/* ============================================================
   Fotos — galerie de famille. Sombre comme le reste de la maison,
   et pensée d'abord pour le TÉLÉPHONE : c'est de là qu'on photographie
   et qu'on dépose.
   ============================================================ */
:root {
  --bg:      #12161d;
  --panel:   #1b2129;
  --line:    #2e3743;
  --ink:     #e8edf4;
  --ink-2:   #9aa8ba;
  --gold:    #e0a83a;
  --ok:      #4ec27a;
  --warn:    #f0883e;
  --sel:     #4b8ef0;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- barre du haut ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px clamp(10px, 3vw, 20px);
  background: #161b23; border-bottom: 1px solid var(--line);
}
.bar h1 { margin: 0; font-size: clamp(16px, 3.4vw, 21px); }
.bar-right { display: flex; align-items: center; gap: 8px; }
.sync { font-size: 12px; color: var(--ink-2); min-height: 1em; }
.sync.ko { color: var(--warn); }

main { max-width: 1100px; margin: 0 auto; padding: clamp(10px, 3vw, 18px); }

/* ---------- blocs ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(10px, 2.6vw, 16px); margin-bottom: 14px; }
.card h2 { margin: 0 0 8px; font-size: clamp(15px, 3vw, 18px); }
.hint { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.err { margin: 8px 0 0; font-size: 13px; color: #ff8a8a; min-height: 1em; }

input[type=password] {
  font: inherit; color: var(--ink); background: #10151c; width: 100%;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
}
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,168,58,.22); }

/* ---------- boutons ---------- */
.btn { font: inherit; font-weight: 700; color: var(--ink); background: #253040;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 15px; cursor: pointer; }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }
.btn.primary { background: #2f6fd0; border-color: #3d81e8; }
.btn.ghost { background: transparent; text-decoration: none; font-size: 13px; padding: 7px 11px; }

.gate { max-width: 420px; }
.gate-card { margin-top: 8vh; }
.gate-card .btn { width: 100%; margin-top: 12px; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions .btn { flex: 1 1 200px; }

/* ---------- progression d'envoi ---------- */
.prog { margin-top: 12px; }
.prog-bar { height: 8px; background: #10151c; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; }
.prog-bar i { display: block; height: 100%; width: 0; background: var(--ok);
  transition: width .18s ease; }
.prog-txt { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }

.errs { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: #ff9a9a; }
.errs li { margin: 3px 0; }

/* ---------- barre de sélection ----------
   Elle ne s'affiche qu'une fois des photos cochées : tant qu'on regarde,
   rien ne vient encombrer l'écran. */
.selbar { display: none; position: sticky; top: 52px; z-index: 15;
  align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: #0f1620; border: 1px solid var(--line); border-radius: 12px; }
.selbar.show { display: flex; }
.selbar #selCount { font-weight: 700; margin-right: auto; }
.selbar-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.selbar .btn { padding: 8px 12px; font-size: 14px; }

.empty { color: var(--ink-2); text-align: center; padding: 30px 10px; }

/* ---------- grille ---------- */
.grid { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: #1e2632; cursor: pointer; border: 2px solid transparent; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile.sel { border-color: var(--sel); }
.tile.sel img { filter: brightness(.72); }

/* La coche est la seule zone qui sélectionne : ailleurs, on ouvre la photo.
   Sur mobile elle reste visible, il n'y a pas de survol pour la révéler. */
.tile .pick {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.45);
  color: #fff; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tile.sel .pick { background: var(--sel); border-color: #fff; }
.tile .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px;
  font-size: 11px; color: #dbe4f0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; background: linear-gradient(transparent, rgba(0,0,0,.85)); }

/* ---------- visionneuse ---------- */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.95);
  display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.85), transparent); }
.lb-name { flex: 1; font-size: 13px; color: #cbd5e1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-btn { background: none; border: 0; color: #e2e8f0; font-size: 22px;
  cursor: pointer; text-decoration: none; padding: 4px 8px; border-radius: 8px; line-height: 1; }
.lb-btn:hover { background: rgba(255,255,255,.14); }
.lb-nav { position: absolute; top: 0; bottom: 0; width: 22%; border: 0; background: none;
  color: #fff; font-size: 2.6rem; opacity: .45; cursor: pointer; user-select: none; }
.lb-nav:hover { opacity: 1; }
.lb-nav.prev { left: 0; }
.lb-nav.next { right: 0; }

@media (max-width: 560px) {
  .bar h1 span { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
  .selbar { top: 48px; }
  .selbar #selCount { flex: 1 1 100%; margin-bottom: 4px; }
  .selbar-btns { width: 100%; }
  .selbar-btns .btn { flex: 1; }
}

/* Suppression : rouge, et visible seulement pour un administrateur. */
.btn.danger{background:#b3392f;border-color:#d4493d;color:#fff}
.btn.danger:hover{background:#cf4439}
.btn.danger:disabled{opacity:.5;cursor:not-allowed}