/* raw-live front terrain — mobile-first, thème sombre (contrôle photo en
   soirée : fond neutre, pas d'éblouissement). Vanilla, aucune dépendance.
   Accessibilité : contrastes AA, cibles tactiles ≥ 44px, focus visible,
   reduced-motion respecté, scroll verrouillé sous les dialogues. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #111214;
  --panel: #1b1d20;
  --text: #e8e8e6;
  --muted: #9a9a94;
  --accent: #4c8dff;      /* liens, badges, onglet actif (sur fond sombre) */
  --primary: #2f6fd8;     /* fond des boutons primaires (blanc dessus : AA) */
  --ok: #3fb26f;
  --warn: #e0a83c;
  --danger: #d95757;      /* texte sur fond sombre */
  --danger-btn: #c24444;  /* fond des boutons danger (blanc dessus : AA) */
}

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}

/* verrou de scroll quand un dialogue (visionneuse, login) est ouvert */
body.modal-open { overflow: hidden; }

/* focus clavier visible partout (le défaut est invisible sur fond sombre) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* ── entête : session + jauge disque + onglets ─────────────────────────── */

header {
  position: sticky; top: 0; z-index: 10;
  background: var(--panel);
  padding: calc(8px + env(safe-area-inset-top)) 12px 0;
  border-bottom: 1px solid #2a2d31;
}
.head-row { display: flex; align-items: baseline; gap: 10px; }
h1 { font-size: 17px; letter-spacing: .5px; }
/* le nom de session est un bouton (ouvre le panneau session) qui se lit
   comme du texte — le soulignement discret signale le tap possible */
.session { color: var(--muted); font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; background: none;
  border: none; padding: 4px 0; min-height: 0;
  text-decoration: underline dotted; text-underline-offset: 3px; }

.gauge { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.gauge-bar { flex: 1; height: 6px; background: #2a2d31; border-radius: 3px;
  overflow: hidden; }
#disk-fill { height: 100%; width: 0; background: var(--ok); }
.gauge.alerte #disk-fill { background: var(--warn); }
.gauge.critique #disk-fill { background: var(--danger); }
#disk-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.gauge.critique #disk-label { color: var(--danger); font-weight: 600; }

nav { display: flex; gap: 4px; }
.tab { flex: 1; min-height: 44px; padding: 10px 0; background: none;
  border: none; border-bottom: 2px solid transparent; color: var(--muted);
  font-size: 14px; }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ── galerie ───────────────────────────────────────────────────────────── */

main { padding: 10px; }
.actions { margin-bottom: 8px; display: flex; justify-content: flex-end; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(5, 1fr); } }

/* Vignettes en object-fit CONTAIN, pas cover : le boîtier shoote en 3:2 et
   les cases sont en 3:2 → un paysage remplit exactement sa case (identique
   à cover), un portrait s'affiche ENTIER avec des bandes latérales noires —
   l'orientation se lit d'un coup d'œil (retour terrain Florian 2026-07-05). */
.card { position: relative; aspect-ratio: 3/2; background: #000;
  border-radius: 4px; overflow: hidden; border: none; padding: 0;
  /* long-press = entrée en mode sélection : pas de callout ni de sélection
     natifs. Le préfixe -webkit- est INDISPENSABLE sur iOS — sans lui,
     Safari surligne la vignette comme du texte et ouvre le menu
     copier/partager (vécu téléphone 2026-07-06). */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.card img { width: 100%; height: 100%; object-fit: contain; display: block;
  /* long-press mobile : sans ça le navigateur fait DÉCOLLER l'image (drag
     natif, image flottante, ouverte en plein écran au lâcher — vécu
     téléphone 2026-07-06). pointer-events:none : l'image ne peut jamais
     être la cible du geste, tout va au bouton parent. */
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none;
  pointer-events: none; }
.card .ph { display: flex; width: 100%; height: 100%; align-items: center;
  justify-content: center; color: var(--muted); font-size: 11px; }

.badge { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px;
  border-radius: 8px; font-size: 10px; font-weight: 600;
  background: rgba(0,0,0,.72); }
.badge.received, .badge.rendering { color: #c9c9c2; }
.badge.previewed { color: var(--accent); }
.badge.validated { color: var(--ok); }
.badge.rejected { color: var(--warn); }
.badge.error { color: var(--danger); }
/* CR3 purgé : le sort éditorial (livrée/rejetée) reste lisible, atténué */
.card.purged { opacity: .55; }

.empty, .hint { color: var(--muted); font-size: 13px; padding: 18px 6px;
  text-align: center; }
.hint { text-align: left; padding: 4px 2px 12px; }

/* ── mode sélection (Lot 3) ────────────────────────────────────────────── */

/* coche de sélection : visible seulement en mode sélection (rendue par JS) */
.card .check { position: absolute; top: 4px; right: 4px; width: 22px;
  height: 22px; border-radius: 50%; background: rgba(0,0,0,.6);
  border: 2px solid rgba(255,255,255,.55); color: transparent;
  font-size: 13px; line-height: 18px; text-align: center; }
.card.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.card.selected .check { background: var(--accent);
  border-color: var(--accent); color: #fff; }
/* non réglable (pas previewed/rendering avec rendu) : atténuée, tap ignoré */
.card.unselectable { opacity: .35; }

/* barre fixe bas + panneaux batch empilés au-dessus (même logique que la
   barre d'actions de la visionneuse : boutons fixes, grisés jamais masqués).
   Deux rangées : méta (sortir, compteur, tout cocher) puis actions. */
.select-ui { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; flex-direction: column; }
.select-bar { display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid #2a2d31; }
.select-row { display: flex; align-items: center; gap: 8px; }
.select-row .btn { flex: 1; }
.select-row .btn.icon { flex: 0 0 44px; }
#select-count { flex: 1; text-align: left; padding-left: 4px;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.batch-panel { border-top: 1px solid #2a2d31; }
/* la sélection ne doit pas cacher la dernière rangée de vignettes */
body.select-open main { padding-bottom: 200px; }

/* ── boutons ───────────────────────────────────────────────────────────── */

.btn { min-height: 44px; padding: 11px 16px; border: 1px solid #34383d;
  border-radius: 8px; background: #24272b; color: var(--text);
  font-size: 14px; }
.btn.primary { background: var(--primary); border-color: var(--primary);
  color: #fff; font-weight: 600; }
.btn.danger { background: var(--danger-btn); border-color: var(--danger-btn);
  color: #fff; font-weight: 600; }
.btn:disabled { opacity: .45; }

/* ── visionneuse plein écran ───────────────────────────────────────────── */

.viewer { position: fixed; inset: 0; z-index: 20; background: #000;
  display: flex; flex-direction: column;
  /* le geste (swipe) est géré en JS ; rien ne doit scroller derrière */
  touch-action: none; overscroll-behavior: contain; }
.viewer img { flex: 1; min-height: 0; object-fit: contain; width: 100%;
  /* mêmes parades long-press que les vignettes (vécu grille 2026-07-06,
     re-vécu visionneuse : maintien du doigt = l'image DÉCOLLE en drag natif
     flottant). Le préfixe -webkit-user-select est INDISPENSABLE sur iOS ;
     touch-callout coupe le menu copier/partager. PAS de pointer-events:none
     ici : l'image porte le double-tap zoom (dblclick). */
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  -webkit-touch-callout: none;
  /* zoom/pan maison (voir app.js) : transform piloté en JS */
  transform-origin: center center; will-change: transform; }
.viewer p { flex: 1; display: flex; align-items: center;
  justify-content: center; color: var(--danger); padding: 20px;
  text-align: center; }
/* bandeau haut : fermer + nom + état — les infos, jamais sur l'image.
   position/z-index : reste au-dessus de l'image zoomée (transform =
   stacking context), comme la barre d'actions du bas. */
.viewer-top { display: flex; align-items: center; gap: 10px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  background: var(--panel);
  position: relative; z-index: 2; }
.viewer-name { flex: 1; min-width: 0; text-align: center; font-size: 13px;
  color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* panneau d'ajustement (Phase 6b + WB Lot 2 + teinte Lot 2bis) : au-dessus
   de la barre d'actions — une rangée par réglage (Expo, WB, Teinte) +
   Appliquer commun. gap 8 + label 52 : « Teinte » tient sans élargir la
   rangée (52+4×44+84+6×8 = 360px, sous les 364px de la rangée WB
   d'origine — pas de régression petits écrans) */
.adjust-panel { display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; background: var(--panel);
  border-bottom: 1px solid #2a2d31;
  position: relative; z-index: 2; }
.adjust-row { display: flex; align-items: center; gap: 8px;
  justify-content: center; }
.adjust-label { flex: 0 0 52px; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; text-align: right; }
/* la valeur est un bouton (tap = retour à la valeur initiale) qui se lit
   comme du texte */
.adjust-value { flex: 0 0 84px; text-align: center; font-size: 16px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  background: none; border: none; color: var(--text); min-height: 44px; }
.adjust-panel .btn.primary { width: 100%; }
/* rangée Auto WB + Appliquer : deux boutons côte à côte, largeurs égales
   (flex-basis 0 — le width:100% du primary ne compte plus comme base) */
.adjust-actions { display: flex; gap: 8px; }
.adjust-actions .btn { flex: 1 1 0; }

/* panneau presets (Phase 6c) : liste scrollable + création */
.preset-panel { display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px; background: var(--panel);
  border-bottom: 1px solid #2a2d31;
  position: relative; z-index: 2;
  max-height: 45vh; overflow-y: auto; }
.preset-list { display: flex; flex-direction: column; gap: 6px; }
.preset-list .section { color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
/* une rangée = bouton principal (appliquer) + éventuel 💾 (enregistrer) */
.preset-row { display: flex; gap: 6px; }
.preset-row .btn.main { flex: 1; text-align: left; display: flex;
  justify-content: space-between; align-items: center; gap: 8px; }
.preset-row .btn.main.current { border-color: var(--accent); }
.preset-list .muted { color: var(--muted); font-size: 12px; }
/* actions de gestion d'un preset (⋯ déplié) : promouvoir / dupliquer */
.preset-actions { display: flex; gap: 6px; padding-left: 14px; }
.preset-actions .btn { flex: 1; min-height: 40px; padding: 8px 10px;
  font-size: 13px; }
.preset-create { display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; }
.preset-create input[type=text] { flex: 1 1 100%; min-height: 44px;
  padding: 10px; border-radius: 8px; border: 1px solid #34383d;
  background: #24272b; color: var(--text); font-size: 16px; }
.preset-scope { display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); }
.preset-scope input { width: 18px; height: 18px; }

/* panneau session (preset par défaut des prochaines photos) */
.session-panel { position: fixed; inset: 0; z-index: 25;
  background: rgba(0, 0, 0, .6); display: flex; align-items: flex-start;
  justify-content: center; padding: 60px 14px;
  overscroll-behavior: contain; }
.session-card { background: var(--panel); border: 1px solid #2a2d31;
  border-radius: 12px; padding: 16px; width: min(420px, 100%);
  display: flex; flex-direction: column; gap: 10px;
  max-height: 75vh; overflow-y: auto; }
.session-card h2 { font-size: 16px; }
.session-card h3 { font-size: 14px; margin-top: 6px; }
.session-card .hint { padding: 0; text-align: left; }

/* métadonnées livrées (6d.1) — mêmes champs que la création de preset */
.meta-form { display: flex; flex-direction: column; gap: 8px; }
.meta-form input[type=text] { min-height: 44px; padding: 10px;
  border-radius: 8px; border: 1px solid #34383d; background: #24272b;
  color: var(--text); font-size: 16px; }

/* lien galerie client (6d.2) : champ lecture seule + bouton copier */
.client-link { display: flex; gap: 8px; }
.client-link input { flex: 1; min-width: 0; min-height: 44px; padding: 10px;
  border-radius: 8px; border: 1px solid #34383d; background: #24272b;
  color: var(--muted); font-size: 13px; }

/* clôture de presta (6d.3) : inventaire + confirmation dans le panneau */
#closeout-zone { display: flex; flex-direction: column; gap: 8px; }

/* barre bas : uniquement les actions, en gros boutons terrain.
   Libellés FIGÉS sur une ligne (nowrap + ellipsis) : un texte long ne doit
   jamais faire sauter la hauteur de la barre (retour terrain 2026-07-06). */
.viewer-bar { display: flex; align-items: center; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--panel);
  position: relative; z-index: 2; }
.viewer-bar .btn { flex: 1; position: relative; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* photo retouchée : point discret sur « Ajuster » — largeur inchangée,
   le détail des réglages vit dans l'overlay ⓘ */
.viewer-bar .btn.modified::after { content: ""; position: absolute;
  top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); }

/* overlay d'infos ⓘ : chip discret sous le bandeau, par-dessus l'image —
   lecture seule (pointer-events none : les gestes passent au travers) */
.info-overlay { position: absolute; z-index: 2;
  top: calc(54px + env(safe-area-inset-top)); left: 10px;
  max-width: 74vw; background: rgba(0, 0, 0, .68); border-radius: 8px;
  padding: 8px 12px; font-size: 12px; line-height: 1.55;
  pointer-events: none; }
#viewer-info { font-style: italic; font-family: Georgia, serif; }
#viewer-info.active { border-color: var(--accent); color: var(--accent); }

.btn.icon { flex: 0 0 44px; width: 44px; padding: 0; font-size: 17px; }

/* badge d'état dans le bandeau (déclaré après .badge : couleurs par état
   héritées, position statique et taille lisible ici) */
.viewer-state { position: static; font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 12px; background: rgba(0, 0, 0, .5);
  flex: 0 0 auto; }

.nav-btn { position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 44px; height: 72px; border: none; border-radius: 10px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 30px; line-height: 1; }
.nav-btn.prev { left: 6px; }
.nav-btn.next { right: 6px; }
.nav-btn:disabled { opacity: .25; }

/* ── corbeille ─────────────────────────────────────────────────────────── */

.trash-summary { font-size: 14px; padding: 4px 2px 10px; }
.trash-list { list-style: none; }
.trash-list li { display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 2px; border-bottom: 1px solid #24272b; font-size: 13px; }
.trash-list .muted { color: var(--muted); }
.trash-list .warn { color: var(--warn); }
.purge-zone { display: flex; flex-direction: column; gap: 10px;
  padding: 16px 2px; }
.purge-recap { background: var(--panel); border: 1px solid var(--danger);
  border-radius: 8px; padding: 12px; font-size: 14px; }

/* ── login + toast ─────────────────────────────────────────────────────── */

.login { position: fixed; inset: 0; z-index: 30; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overscroll-behavior: contain; }
.login form { display: flex; flex-direction: column; gap: 12px;
  width: min(320px, 86vw); }
.login h2 { text-align: center; letter-spacing: 1px; }
.login input { min-height: 44px; padding: 12px; border-radius: 8px;
  border: 1px solid #34383d; background: var(--panel); color: var(--text);
  font-size: 16px; }
.error { color: var(--danger); font-size: 13px; text-align: center; }

.toast { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40;
  background: #24272b; border: 1px solid #34383d; color: var(--text);
  padding: 10px 16px; border-radius: 10px; font-size: 14px;
  max-width: 90vw; box-shadow: 0 4px 18px rgba(0,0,0,.5);
  pointer-events: none; /* n'intercepte jamais un tap du flux de revue */ }
/* visionneuse ouverte : en bas de l'IMAGE, au-dessus de la barre d'actions
   (~64px de barre + safe area), jamais sur les boutons (retour terrain) */
.toast.in-viewer { bottom: calc(78px + env(safe-area-inset-bottom)); }
.toast.err { border-color: var(--danger); }

@media (prefers-reduced-motion: no-preference) {
  #disk-fill { transition: width .4s; }
}

[hidden] { display: none !important; }