/* Lot M3 (version mobile : photo, notes, documents) : règles de la version mobile, toutes préfixées :root[data-mobile]. Aucune couleur en dur : seulement des var(--…).
   Cartes en relief et fonds teintés par rubrique comme la maquette A ; cibles tactiles >= 44 px ; mouvement coupé si « réduire les animations ». */

:root[data-mobile] .mp-i { flex: none; width: 22px; height: 22px; }
:root[data-mobile] .mp-cache { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
:root[data-mobile] .mp-lbl { margin: var(--s-5) var(--s-1) var(--s-2); font: 500 11px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
:root[data-mobile] .mp-vide { padding: var(--s-5) var(--s-3); text-align: center; color: var(--muted); font-size: 15px; }
:root[data-mobile] .mp-vide-grand { min-height: 40dvh; display: grid; place-items: center; }
:root[data-mobile] .mp-attente { padding: var(--s-5); text-align: center; color: var(--muted); }

/* ── Étapes ── */
:root[data-mobile] .mp-haut { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
:root[data-mobile] .mp-retour { flex: none; width: var(--mb-cible); height: var(--mb-cible); display: grid; place-items: center; margin-left: calc(-1 * var(--s-2)); border: 0; border-radius: var(--r-md); background: none; color: var(--fg); cursor: pointer; }
:root[data-mobile] .mp-etapes { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); }
:root[data-mobile] .mp-etapes i { height: 4px; border-radius: 2px; background: var(--surface2); }
:root[data-mobile] .mp-etapes i.on { background: var(--accent); }
:root[data-mobile] .mp-q { margin: 0 var(--s-1) var(--s-2); font-size: calc(var(--s-6) - 1px); letter-spacing: -.01em; }

/* ── Prise de photo ── */
:root[data-mobile] .mp-viseur {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  padding: calc(var(--s-7) + var(--s-3)) var(--s-4) var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--e-2);
}
:root[data-mobile] .mp-viseur::before,
:root[data-mobile] .mp-viseur::after { content: ""; position: absolute; width: 26px; height: 26px; border: 0 solid var(--accent); pointer-events: none; }
:root[data-mobile] .mp-viseur::before { top: var(--s-3); left: var(--s-3); border-top-width: 3px; border-left-width: 3px; border-top-left-radius: var(--r-md); }
:root[data-mobile] .mp-viseur::after { bottom: var(--s-3); right: var(--s-3); border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: var(--r-md); }
:root[data-mobile] .mp-declencheur {
  width: 92px; height: 92px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent-grad); color: var(--accent-text);
  box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 18%, transparent), 0 12px 28px -8px color-mix(in oklab, var(--accent) 80%, transparent);
}
:root[data-mobile][data-theme="light"] .mp-declencheur { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent) 14%, transparent), var(--e-2); }
:root[data-mobile] .mp-declencheur .mp-i { width: 40px; height: 40px; }
:root[data-mobile] .mp-viseur-t { font-size: calc(var(--s-5) + 2px); font-weight: 700; letter-spacing: -.01em; }
:root[data-mobile] .mp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3); }
:root[data-mobile] .mp-sec { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: var(--s-2); border-radius: var(--r-lg); font-weight: 600; background: var(--surface); }
:root[data-mobile] .mp-grand { display: flex; width: 100%; min-height: 52px; margin-top: var(--s-4); align-items: center; justify-content: center; gap: var(--s-2); border-radius: var(--r-lg); font-size: 17px; font-weight: 700; }
:root[data-mobile] .mp-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
:root[data-mobile] .mp-vignette { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); background: var(--surface2); }
:root[data-mobile] .mp-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-mobile] .mp-petit { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); margin-bottom: var(--s-3); }
:root[data-mobile] .mp-x { position: absolute; top: var(--s-1); right: var(--s-1); width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in oklab, var(--bg) 70%, transparent); color: var(--fg); cursor: pointer; }
:root[data-mobile] .mp-x .mp-i { width: 16px; height: 16px; }
:root[data-mobile] .mp-x::after { content: ""; position: absolute; inset: -6px; }      /* zone tactile de 44 px autour de la croix de 32 px */
:root[data-mobile] .mp-x-ligne { position: relative; top: auto; right: auto; flex: none; background: var(--surface2); }

/* ── Projets proposés ── */
:root[data-mobile] .mp-liste { display: grid; gap: var(--s-2); }
:root[data-mobile] .mp-projet,
:root[data-mobile] .mp-choisi,
:root[data-mobile] .mp-note,
:root[data-mobile] .mp-groupe { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-2); }
:root[data-mobile] .mp-projet { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: var(--s-3); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
:root[data-mobile] .mp-projet:active { background: var(--surface2); }
:root[data-mobile] .mp-puce { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-d); color: var(--accent); }
:root[data-mobile] .mp-projet-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
:root[data-mobile] .mp-ref { font: 500 13px var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
:root[data-mobile] .mp-marque { color: var(--accent); font-weight: 600; }
:root[data-mobile] .mp-nom { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
:root[data-mobile] .mp-sous { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
:root[data-mobile] .mp-chev { flex: none; width: 20px; height: 20px; color: var(--muted); }
:root[data-mobile] .mp-cherche { display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: 0 var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--muted); }
:root[data-mobile] .mp-cherche[hidden] { display: none; }
:root[data-mobile] .mp-cherche input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: none !important; box-shadow: none !important; color: var(--fg); }
:root[data-mobile] .mp-cherche:focus-within { border-color: var(--accent); }
:root[data-mobile] .mp-choisi { display: flex; align-items: center; gap: 14px; padding: var(--s-3); margin-top: var(--s-2); }
:root[data-mobile] .mp-changer { flex: none; min-height: var(--mb-cible); padding: 0 var(--s-2); border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
:root[data-mobile] .mp-texte { width: 100%; resize: vertical; border-radius: var(--r-lg); }

/* ── Envoi et fin ── */
:root[data-mobile] .mp-envoi { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
:root[data-mobile] .mp-envoi-t { font-weight: 600; }
:root[data-mobile] .mp-progres { height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface2); }
:root[data-mobile] .mp-progres[hidden] { display: none; }
:root[data-mobile] .mp-progres i { display: block; width: 0; height: 100%; background: var(--accent-grad); }
:root[data-mobile] .mp-erreur { margin-top: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); font-weight: 600; }
:root[data-mobile] .mp-erreur[hidden] { display: none; }
:root[data-mobile] .mp-fin { display: grid; justify-items: center; padding-top: var(--s-7); text-align: center; }
:root[data-mobile] .mp-fin-rond { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--success) 18%, transparent); color: var(--success); }
:root[data-mobile] .mp-fin-rond .mp-i { width: 44px; height: 44px; stroke-width: 2.6; }
:root[data-mobile] .mp-fin h2 { margin: var(--s-5) 0 var(--s-1); font-size: calc(var(--s-6) + 2px); letter-spacing: -.01em; }
:root[data-mobile] .mp-fin-s { margin: 0 0 var(--s-5); color: var(--muted); }
:root[data-mobile] .mp-fin .mp-grand { max-width: 420px; }

/* ── Bouton « + » flottant (un seul bouton principal par écran) ── */
:root[data-mobile] .mp-fab {
  position: fixed; z-index: var(--z-onglets); right: var(--s-4); bottom: calc(var(--mb-barre-h) + var(--s-7) + env(safe-area-inset-bottom));
  width: 58px; height: 58px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent-grad); color: var(--accent-text); box-shadow: 0 10px 24px -6px color-mix(in oklab, var(--accent) 75%, transparent);
}
:root[data-mobile][data-theme="light"] .mp-fab { box-shadow: var(--e-2); }
:root[data-mobile] .mp-fab[hidden] { display: none; }
:root[data-mobile] .mp-fab .mp-i { width: 28px; height: 28px; }

/* ── Notes ── */
:root[data-mobile] .mp-notes { margin-top: var(--s-3); }
:root[data-mobile] .mp-note { display: grid; gap: 3px; width: 100%; padding: var(--s-3) var(--s-4); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
:root[data-mobile] .mp-note:active { background: var(--surface2); }
:root[data-mobile] .mp-note-t { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
:root[data-mobile] .mp-etiq { display: inline-block; margin-left: var(--s-1); padding: 1px var(--s-2); border-radius: 9px; background: var(--accent-d); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0; vertical-align: 2px; }

/* ── Documents : groupes par projet ── */
:root[data-mobile] .mp-onglets { margin-top: var(--s-3); }
:root[data-mobile] .mp-corps { margin-top: var(--s-3); display: grid; gap: var(--s-2); align-content: start; }
:root[data-mobile] .mp-groupe { overflow: hidden; }
:root[data-mobile] .mp-groupe-t { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
:root[data-mobile] .mp-compte { flex: none; min-width: 30px; padding: 2px var(--s-2); border-radius: 12px; background: var(--accent-d); color: var(--accent); font-size: 13px; font-weight: 700; text-align: center; }
:root[data-mobile] .mp-bas { flex: none; width: 20px; height: 20px; color: var(--muted); }
:root[data-mobile] .mp-groupe.ouvert .mp-bas { transform: rotate(180deg); }
:root[data-mobile] .mp-fichiers { border-top: 1px solid var(--border); }
:root[data-mobile] .mp-fichier { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 68px; padding: var(--s-3) var(--s-4); border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
:root[data-mobile] .mp-fichier + .mp-fichier { border-top: 1px solid var(--border); }
:root[data-mobile] .mp-fichier:active { background: var(--surface2); }
:root[data-mobile] .mp-fichier-pret { cursor: default; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
:root[data-mobile] .mp-fichier-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
:root[data-mobile] .mp-fichier .mp-nom { font-size: 16px; }
:root[data-mobile] .mp-ext { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--surface2); color: var(--muted); font: 700 12px var(--font-mono); }
:root[data-mobile] .mp-ext-pdf { background: color-mix(in oklab, var(--danger) 16%, transparent); color: var(--danger); }
:root[data-mobile] .mp-ext-img { background: color-mix(in oklab, var(--blue) 16%, transparent); color: var(--blue); }
:root[data-mobile] .mp-depot .mp-liste { margin-top: var(--s-3); }
:root[data-mobile] .mp-depot .mp-progres { margin-top: var(--s-3); }
:root[data-mobile] .mp-corps .dm-dossiers-cartes { grid-template-columns: 1fr; }
:root[data-mobile] .mp-corps .dm-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-mobile] .mp-corps .lp-bar { display: grid; gap: var(--s-2); }
:root[data-mobile] .mp-corps .lp-bar label { display: grid; gap: var(--s-1); }
:root[data-mobile] .mp-corps .lp-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
:root[data-mobile] .mp-corps .lp-acts .btn { min-height: var(--mb-cible); }

@media (prefers-reduced-motion: no-preference) {
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-projet,
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-note,
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-fichier,
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-bas { transition: background .15s, transform .15s; }
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-declencheur:active,
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-fab:active { transform: scale(.94); }
  :root[data-mobile]:not([data-mouvement="reduit"]) .mp-progres i { transition: width .25s; }
}