/* Tchété Gallery — feuille de style commune */
/* couleurs et tailles : theme.css */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:.94rem; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em;font-weight:650;letter-spacing:-.01em}
h1{font-size:1.6rem} h2{font-size:1.15rem} h3{font-size:1rem}
small,.small{font-size:.82rem;color:var(--dim)}
.muted{color:var(--dim)} .faint{color:var(--faint)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ── boutons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  padding:9px 16px; border-radius:var(--radius-sm); cursor:pointer;
  font:inherit; font-weight:600; font-size:.92rem; transition:.15s;
  white-space:nowrap;
}
.btn:hover{background:var(--surface-3);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.primary{background:var(--green);color:var(--ok-fond);border-color:transparent}
.btn.primary:hover{background:#55ddA0}
.btn.gold{background:var(--gold);color:var(--sur-or);border-color:transparent}
.btn.gold:hover{background:var(--or-2)}
.btn.danger{background:transparent;color:var(--red);border-color:rgba(224,106,96,.45)}
.btn.danger:hover{background:var(--rouge-fond)}
.btn.ghost{background:transparent}
.btn.sm{padding:6px 11px;font-size:.82rem}
.btn.block{width:100%}

/* ── formulaires ─────────────────────────────────────────────────────────── */
input,select,textarea{
  background:var(--bg2); color:var(--text); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:10px 12px; font:inherit; width:100%;
  transition:.15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(62,207,142,.13)}
label{display:block;font-size:.85rem;color:var(--dim);margin:0 0 5px}
.field{margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:150px}
.check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.9rem}
.check input{width:auto;margin:0;accent-color:var(--green)}

/* ── cartes / panneaux ───────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card+.card{margin-top:14px}
.tag{
  display:inline-block;padding:3px 10px;border-radius:99px;font-size:.74rem;
  font-weight:650;letter-spacing:.02em;background:var(--panel2);color:var(--dim)}
.tag.green{background:rgba(62,207,142,.16);color:var(--green)}
.tag.gold{background:rgba(224,163,37,.16);color:var(--gold)}
.tag.red{background:rgba(239,91,91,.16);color:var(--red)}
.tag.blue{background:rgba(77,141,246,.16);color:var(--blue)}

/* ── barre de progression ────────────────────────────────────────────────── */
.bar{height:6px;background:var(--bg2);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--green);border-radius:99px;
  transition:width .35s ease;width:0}
.bar.gold>i{background:var(--gold)}

/* ── page centrée (connexion) ────────────────────────────────────────────── */
.center-page{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1000px 600px at 50% -10%,rgba(var(--accent-rgb),.1),var(--bg))}
.center-card{width:100%;max-width:400px;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.brand{font-size:1.45rem;font-weight:700;letter-spacing:-.02em}
.brand span{color:var(--green)}

/* ── code d'accès ────────────────────────────────────────────────────────── */
.code-input{letter-spacing:.5em;text-align:center;font-size:1.5rem;font-weight:700;
  padding:14px}

/* ── messages ────────────────────────────────────────────────────────────── */
.alert{padding:11px 14px;border-radius:var(--radius-sm);font-size:.88rem;margin-bottom:14px}
.alert.err{background:rgba(239,91,91,.12);color:var(--rouge-clair);border:1px solid rgba(224,106,96,.45)}
.alert.ok{background:rgba(62,207,142,.12);color:var(--ok-clair);border:1px solid rgba(140,196,154,.4)}
.alert.info{background:rgba(77,141,246,.1);color:var(--info-clair);border:1px solid var(--line-or)}

/* ── toasts ──────────────────────────────────────────────────────────────── */
#toasts{position:fixed;right:16px;bottom:16px;z-index:9000;display:flex;
  flex-direction:column;gap:9px;max-width:330px}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--green);
  padding:11px 14px;border-radius:10px;box-shadow:var(--shadow);font-size:.88rem;
  animation:slidein .25s ease}
.toast.err{border-left-color:var(--red)}
.toast.info{border-left-color:var(--blue)}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* ── grille de photos ────────────────────────────────────────────────────── */
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.grid.large{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid.small{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.cell{position:relative;background:var(--panel);border-radius:10px;overflow:hidden;
  cursor:pointer;aspect-ratio:1/1;border:2px solid transparent;transition:.16s}
.cell img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;
  transition:opacity .35s ease, transform .3s ease}
.cell img.on{opacity:1}
.cell:hover img{transform:scale(1.045)}
.cell.sel{border-color:var(--green)}
.cell.sel::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 3px rgba(62,207,142,.35);border-radius:8px;pointer-events:none}
.cell .heart{
  position:absolute;top:7px;right:7px;width:32px;height:32px;border-radius:50%;
  background:var(--voile-fenetre);backdrop-filter:blur(4px);display:grid;place-items:center;
  font-size:16px;color:#fff;border:none;cursor:pointer;transition:.15s;opacity:.85}
.cell .heart:hover{transform:scale(1.12);opacity:1}
.cell.sel .heart{background:var(--green);color:var(--ok-fond)}
.cell .nb{position:absolute;left:7px;bottom:7px;font-size:.7rem;padding:2px 7px;
  border-radius:99px;background:rgba(8,12,18,.6);color:var(--texte-doux)}
.cell .warn{position:absolute;left:7px;top:7px;font-size:.68rem;padding:2px 7px;
  border-radius:99px;background:rgba(239,91,91,.85);color:#fff}
.skeleton{background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);
  background-size:220% 100%;animation:sk 1.3s infinite}
@keyframes sk{from{background-position:180% 0}to{background-position:-40% 0}}

/* ── visionneuse ─────────────────────────────────────────────────────────── */
.viewer{position:fixed;inset:0;background:rgba(6,9,14,.96);z-index:8000;display:none;
  flex-direction:column}
.viewer.on{display:flex}
.viewer .vtop{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--surface-3)}
.viewer .vname{font-size:.9rem;color:var(--dim);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.viewer .vstage{flex:1;position:relative;display:grid;place-items:center;overflow:hidden}
.viewer .vstage img{max-width:100%;max-height:100%;object-fit:contain;
  transition:transform .2s ease;user-select:none;-webkit-user-drag:none}
.viewer .vbot{padding:12px 16px;display:flex;gap:10px;align-items:center;
  justify-content:center;border-top:1px solid var(--surface-3);flex-wrap:wrap}
.vnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:70px;
  background:rgba(20,27,37,.7);border:none;color:#fff;font-size:22px;cursor:pointer;
  border-radius:10px;opacity:.7;transition:.15s}
.vnav:hover{opacity:1;background:rgba(32,44,62,.9)}
.vnav.prev{left:12px} .vnav.next{right:12px}
.vfilm{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--surface-3)}
.vfilm img{height:54px;width:54px;object-fit:cover;border-radius:6px;cursor:pointer;
  opacity:.45;border:2px solid transparent;flex:none}
.vfilm img.on{opacity:1;border-color:var(--green)}

@media (max-width:640px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px}
  .card{padding:14px}
  .vnav{width:38px;height:56px;font-size:18px}
}

/* correctifs d'affichage */
[hidden]{display:none !important}
.viewer{background:#06090e}
@media (max-width:640px){
  .viewer .vfilm{display:none}
  .viewer .vbot{padding:10px 12px;gap:8px}
  .viewer .vbot input{max-width:none;flex:1 1 100%;order:3}
}


/* bandeau « connexion perdue » (client et invité) */
.bandeau-coupure{position:fixed;left:10px;right:10px;top:10px;z-index:9800;
  background:#2a1417;border:1px solid #6b2b31;border-radius:14px;padding:14px 16px;
  box-shadow:var(--shadow);color:#ffd6d6;font-size:.9rem;line-height:1.5}
.bandeau-coupure .bc-titre{font-weight:700;font-size:1rem;margin-bottom:4px;color:#fff}
.bandeau-coupure ol{margin:6px 0 10px;padding-left:20px}
.bandeau-coupure .small{margin-left:8px;color:#e8b4b8}