:root{
  --bg:#0f1621; --panel:#18212f; --panel2:#1f2a3a; --line:#2c3a4d;
  --txt:#e7edf5; --muted:#95a5bb; --accent:#0070E0; --danger:#e05252;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* sinon .row{display:flex} annule l'attribut hidden */
body{margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
h1{font-size:1.35rem;margin:0 0 .6rem}
h2{font-size:1.05rem;margin:1.2rem 0 .5rem}
.muted{color:var(--muted);font-size:.9rem}
.err{background:#3a1d1d;border:1px solid #6b2b2b;color:#ffb4b4;padding:.6rem .8rem;border-radius:8px}

.top{display:flex;align-items:center;gap:1.2rem;padding:.7rem 1.2rem;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.02em}
.top nav{display:flex;gap:1rem;flex:1;flex-wrap:wrap}
.top nav a{color:var(--muted);padding:.2rem 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a.on{color:var(--txt);border-color:var(--accent)}
.out{color:var(--muted);font-size:.9rem}

.wrap{max-width:1400px;margin:0 auto;padding:1.4rem 1.2rem 4rem}
.center{min-height:100vh;display:grid;place-items:center;padding:1rem}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.2rem}
.card.empty{text-align:center;color:var(--muted);padding:3rem 1rem}
.login{width:min(360px,100%);display:grid;gap:.8rem;text-align:center}
.login h1{font-size:1.3rem;margin:0}
.login .soustitre{color:var(--accent);font-size:.95rem;letter-spacing:.04em;margin:-.4rem 0 .4rem}
.login .muted{font-size:.82rem;margin:.2rem 0 0}
.login input{width:100%}

input,select,textarea{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:.55rem .7rem;border-radius:8px;font:inherit}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
button,.btn{background:var(--accent);color:#fff;border:0;padding:.55rem .9rem;border-radius:8px;
  font:inherit;cursor:pointer;display:inline-block}
button:hover,.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.danger,button.danger{background:var(--danger)}
.btn.small,button.small{padding:.35rem .6rem;font-size:.85rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.search{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.6rem}
.tile{position:relative;display:block;background:var(--panel);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .2s}
.tile:hover img{transform:scale(1.04)}
.badge{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.65);border-radius:20px;
  padding:.1rem .5rem;font-size:.75rem}
.badge.wait{left:6px;right:auto;background:rgba(0,112,224,.85)}
.pager{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:1.4rem}
.pager a{padding:.35rem .65rem;border:1px solid var(--line);border-radius:6px;color:var(--muted)}
.pager a.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.drop{border:2px dashed var(--line);border-radius:var(--radius);padding:2.5rem 1rem;text-align:center;
  background:var(--panel);transition:.15s}
.drop.over{border-color:var(--accent);background:var(--panel2)}
.progress{margin-top:1rem;background:var(--panel2);border-radius:20px;height:22px;position:relative;overflow:hidden}
#bar{background:var(--accent);height:100%;width:0;transition:width .2s}
#pct{position:absolute;inset:0;display:grid;place-items:center;font-size:.8rem}
.log{list-style:none;padding:0;margin:1rem 0;max-height:50vh;overflow:auto}
.log li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem .6rem;border-bottom:1px solid var(--line);font-size:.88rem}
.log li .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log li.ok .s{color:#5fd08a}.log li.doublon .s{color:#e8c05a}.log li.erreur .s{color:#ff8b8b}
.log-out{background:#0b111a;border:1px solid var(--line);border-radius:8px;padding:.8rem;
  overflow:auto;font-size:.8rem;color:var(--muted)}

.dupgroup{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin-bottom:1rem}
.tile.dup{background:transparent;border:0}
.tile.dup .meta{padding:.4rem 0;font-size:.82rem;display:grid;gap:.25rem}
.tile.dup .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keep{color:#5fd08a;font-size:.8rem}

.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.person{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem;text-align:center}
.person img,.person .noface{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--panel2);
  display:grid;place-items:center;color:var(--muted);font-size:2rem}
.person .nm{margin-top:.5rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.viewer{display:grid;grid-template-columns:1fr 320px;gap:1.2rem;align-items:start}
@media(max-width:900px){.viewer{grid-template-columns:1fr}}
.stage{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;line-height:0}
.stage img{max-width:100%;height:auto;display:block;margin:0 auto}
.fbox{position:absolute;border:2px solid #4ade80;border-radius:4px;display:none;pointer-events:none}
.fbox span{position:absolute;bottom:100%;left:0;background:#4ade80;color:#06240f;font-size:.7rem;
  padding:0 .3rem;border-radius:3px;white-space:nowrap;line-height:1.4}
.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.side h1{font-size:1rem;word-break:break-all}
dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;font-size:.88rem;margin:.8rem 0}
dt{color:var(--muted)}
.stats{grid-template-columns:1fr auto;font-size:1rem}
.stats dd{text-align:right;font-weight:600;margin:0}
dd{margin:0}
.faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.6rem;margin-bottom:1rem}
.face img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.face select{width:100%;margin-top:.3rem;font-size:.78rem;padding:.25rem}
form{margin:0 0 .5rem}

/* --- sous-onglets Photos / Vidéos --- */
.tabs{display:flex;gap:.4rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.tabs a{padding:.5rem .9rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--txt);border-color:var(--accent);font-weight:600}
.tabs .c{background:var(--panel2);border-radius:20px;padding:0 .45rem;font-size:.78rem;margin-left:.3rem}

/* --- vidéos --- */
.tile .play{position:absolute;inset:0;display:grid;place-items:center;font-size:1.9rem;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8);pointer-events:none}
.badge.dur{top:auto;bottom:6px}
.stage video{width:100%;max-height:75vh;display:block;background:#000}

/* --- moments --- */
.moments{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.moment{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:block}
.moment:hover{border-color:var(--accent)}
.moment img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.moment .mi{padding:.7rem .8rem}
.moment .slot{color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.moment .lab{font-weight:600;margin:.1rem 0 .2rem}

/* =======================================================================
   Téléphones et petites tablettes
   ======================================================================= */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }

  /* En-tête : marque + Quitter sur une ligne, menu défilant en dessous */
  .top { padding: .55rem .8rem; gap: .5rem 1rem; }
  .brand { order: 1; font-size: 1rem; }
  .out { order: 2; margin-left: auto; }
  .top nav {
    order: 3; flex: 1 0 100%; gap: 1.15rem;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; scroll-snap-align: start; padding-bottom: .3rem; }

  .wrap { padding: .9rem .7rem 3.5rem; }
  h1 { font-size: 1.15rem; }

  /* Barres de titre : tout en pleine largeur, empilé */
  .bar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .bar .search, .bar form { width: 100%; }
  .search input[type=search], .search input[name=name] { flex: 1 1 auto; min-width: 0; }
  .search select { flex: 1 1 auto; }

  /* Champs : 16px minimum, sinon iOS zoome tout seul au clic */
  input, select, textarea { font-size: 16px; padding: .6rem .7rem; }
  button, .btn { padding: .7rem 1rem; min-height: 44px; }
  button.small, .btn.small { min-height: 38px; padding: .45rem .7rem; }

  /* Grilles : 3 vignettes par ligne au lieu d'une seule */
  .grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .35rem; }
  .people { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
  .person { padding: .5rem .35rem; }
  .person .nm { white-space: normal; font-size: .82rem; line-height: 1.2; }
  .person .muted { font-size: .75rem; }
  .moments { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
  .moment img { aspect-ratio: 1; }
  .moment .mi { padding: .5rem .6rem; }
  .moment .lab { font-size: .9rem; }

  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; padding: .55rem .7rem; }

  /* Fiche média : image plein écran, informations dessous */
  .viewer { gap: .8rem; }
  .side { padding: .8rem; }
  .side h1 { font-size: .8rem; line-height: 1.35; word-break: break-word; }
  .stage img, .stage video { max-height: 60vh; width: auto; max-width: 100%; }
  .stage video { width: 100%; }
  .fbox span { font-size: .6rem; }
  .faces { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .45rem; }

  /* Doublons : deux versions côte à côte, lisibles */
  .dupgroup { padding: .7rem; }
  .dupgroup .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
  .tile.dup .meta { font-size: .75rem; }

  .pager a { padding: .5rem .8rem; }
  .card { padding: .9rem; }
  .drop { padding: 1.6rem .8rem; }
  .log li { flex-direction: column; gap: .1rem; }
  .log li .n { white-space: normal; word-break: break-all; }
  dl { font-size: .85rem; }
  .log-out { font-size: .7rem; }
}

/* Très petits écrans : on resserre encore */
@media (max-width: 380px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .moments { grid-template-columns: 1fr 1fr; }
}

/* Le glisser-déposer n'existe pas sur un écran tactile : on ne le propose pas */
@media (hover: none), (max-width: 760px) {
  .pointeur { display: none; }
  .drop { padding: 1.4rem .8rem; }
  .drop .btn { width: 100%; }
}

/* =======================================================================
   Visionneuse plein écran
   ======================================================================= */
.lb{position:fixed;inset:0;z-index:100;background:#05080d;display:flex;flex-direction:column}
.lb-stage{flex:1;display:grid;place-items:center;padding:3.4rem .5rem 1rem;min-height:0}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.6rem;
  padding:.5rem .7rem;background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent)}
.lb-count{color:#c9d6e6;font-size:.85rem;margin:0 auto}
.lb-btn{width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;flex:0 0 auto;padding:0}
.lb-btn:hover{background:rgba(255,255,255,.24)}
.lb-dl{background:var(--accent)}
.lb-dl:hover{background:#2a8bff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:0;
  border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0}
.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:.5rem}
.lb-next{right:.5rem}
@media (max-width:760px){
  .lb-stage{padding:3.2rem .2rem .2rem}
  .lb-nav{width:46px;height:46px;background:rgba(255,255,255,.16)}
  .lb-btn{width:44px;height:44px}
}