/* ============================================================
   PhotoStyle — Galerie Photos de LopStyle & Co
   Feuille de style applicative (SPA vanilla JS).
   Direction « chrome & néon » : graphite neutre (BLACK SHADOW #161616),
   accent bleu néon (BLUE NEON #1B4CF6), encre chrome (LIGHT CHROME #DCDCDC),
   Comfortaa. Esprit planche-contact conservé (viseurs, grain).
   ============================================================ */

/* ─── Webfonts : JetBrains Mono self-hostée ──────────────────────── */
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:100; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Thin.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:100; font-display:swap; src:url("/assets/fonts/JetBrainsMono-ThinItalic.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:200; font-display:swap; src:url("/assets/fonts/JetBrainsMono-ExtraLight.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:200; font-display:swap; src:url("/assets/fonts/JetBrainsMono-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:300; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Light.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:300; font-display:swap; src:url("/assets/fonts/JetBrainsMono-LightItalic.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Regular.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:400; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Italic.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Medium.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:500; font-display:swap; src:url("/assets/fonts/JetBrainsMono-MediumItalic.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/JetBrainsMono-SemiBold.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:600; font-display:swap; src:url("/assets/fonts/JetBrainsMono-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/JetBrainsMono-Bold.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:700; font-display:swap; src:url("/assets/fonts/JetBrainsMono-BoldItalic.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:800; font-display:swap; src:url("/assets/fonts/JetBrainsMono-ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"JetBrains Mono"; font-style:italic; font-weight:800; font-display:swap; src:url("/assets/fonts/JetBrainsMono-ExtraBoldItalic.ttf") format("truetype"); }
/* Comfortaa — variable (300–700), latin, police principale (thème « Abysse ») */
@font-face { font-family:"Comfortaa"; font-style:normal; font-weight:300 700; font-display:swap; src:url("/assets/fonts/Comfortaa.woff2") format("woff2"); }

/* ─── Tokens PhotoStyle + alias de compatibilité ─────────────────── */
:root {
  /* Rampe graphite neutre (BLACK SHADOW) — le nom « slate » est conservé
     pour ne pas casser les références existantes. */
  --slate-950:#0f0f0f; --slate-900:#161616; --slate-850:#1b1b1b;
  --slate-800:#212121; --slate-750:#262626; --slate-700:#2c2c2c;
  --slate-650:#343434; --slate-600:#3f3f3f; --slate-500:#6f6f6f;
  --slate-400:#8a8a8a; --slate-300:#a6a6a6; --slate-200:#c2c2c2;
  --slate-100:#d0d0d0; --slate-50:#dcdcdc;

  /* Accent bleu néon (BLUE NEON) + or éditorial */
  --accent-700:#1338ce; --accent-600:#1743e8; --accent-500:#1b4cf6;
  --accent-400:#5478ff; --accent-300:#93a9ff; --accent-soft:rgba(27,76,246,.16);
  --gold-500:#c9a86a; --gold-soft:rgba(201,168,106,.14);

  /* Sémantiques désaturées */
  --success-500:#5fae80; --success-soft:rgba(95,174,128,.14);
  --warning-500:#d2a45a; --warning-soft:rgba(210,164,90,.14);
  --danger-500:#d77b72;  --danger-soft:rgba(215,123,114,.14);

  /* Rôles */
  --bg-0:var(--slate-950); --bg-1:var(--slate-900); --bg-2:var(--slate-800);
  --bg-3:var(--slate-700); --bg-inset:var(--slate-850);
  --fg-1:var(--slate-50);  --fg-2:var(--slate-300); --fg-3:var(--slate-400);
  --fg-disabled:var(--slate-500); --fg-on-accent:#ffffff;
  --border-1:#262626; --border-2:var(--slate-650); --border-3:var(--slate-600);
  --link:var(--accent-400); --link-hover:var(--accent-300);

  /* Typo */
  --font-code:"JetBrains Mono","SFMono-Regular",ui-monospace,"Menlo",monospace;
  /* Chiffres (compteurs, stats, %, tailles) en JetBrains Mono ; le reste en Comfortaa. */
  --font-num:var(--font-code);
  --font-sans:"Comfortaa",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  /* Thème « Abysse » : l'app était tout-mono -> --font-mono bascule sur Comfortaa
     (les composants qui l'utilisent suivent). Mono réel disponible via --font-code. */
  --font-mono:var(--font-sans);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --tracking-tight:-0.02em; --tracking-wide:0.04em;
  --tracking-wider:0.12em;  --tracking-widest:0.2em;
  --leading-relaxed:1.65;

  /* Espacement */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px;
  --gutter:2px;

  /* Rayons — adoucis (premium modern) */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px;
  --radius-lg:14px; --radius-xl:18px; --radius-full:999px;

  /* Biseau des vignettes — coins haut-droit & bas-gauche coupés à 45° */
  --chamfer:18px;

  /* Ombres */
  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 6px 20px rgba(0,0,0,.45);
  --shadow-3:0 18px 50px rgba(0,0,0,.55);
  --shadow-lift:0 24px 70px rgba(0,0,0,.62);
  --ring-focus:0 0 0 2px var(--bg-1),0 0 0 4px var(--accent-500);
  --hairline-top:inset 0 1px 0 rgba(255,255,255,.04);

  /* Mouvement */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
  --grain-opacity:0.035;

  /* ---- Alias legacy (référencés inline dans app.js) ------------- */
  --bg:var(--bg-1); --bg-2:var(--slate-800); --bg-3:var(--slate-700);
  --surface:rgba(255,255,255,.035); --surface-h:rgba(255,255,255,.07);
  --border:var(--border-1); --border-h:var(--border-3);
  --accent:var(--accent-500); --accent-2:var(--accent-400);
  --accent-glow:rgba(27,76,246,.35);
  --gold:var(--gold-500); --gold-dim:var(--gold-soft);
  --danger:var(--danger-500); --success:var(--success-500);
  --text:var(--fg-1); --text-2:var(--fg-2); --text-3:var(--slate-500);
  --radius:var(--radius-lg);
  --shadow:var(--shadow-2); --shadow-lg:var(--shadow-3);
  --blur:blur(16px);
  --font:var(--font-sans);
  --transition:var(--dur-base) var(--ease-out);

  /* ---- transitions.dev — tokens partagés ----------------------- */
  --modal-open-dur:250ms; --modal-close-dur:150ms;
  --modal-scale:0.96; --modal-scale-close:0.96;
  --modal-ease:cubic-bezier(0.22,1,0.36,1);
  --sk-pulse-dur:1200ms; --sk-pulse-min:0.5;
  --shake-distance:6px; --shake-overshoot:4px;
  --shake-dur-a:80ms; --shake-dur-b:60ms;
  --shake-ease:cubic-bezier(0.22,1,0.36,1);
  --tabs-dur:250ms; --tabs-ease:cubic-bezier(0.22,1,0.36,1);

  /* ---- Néon bleu (boutons clés, états actifs, accents) ----------
     Les noms --neon-cyan-* sont conservés (référencés partout). */
  --neon-cyan:0 0 10px rgba(27,76,246,.55), 0 0 26px rgba(27,76,246,.30);
  --neon-cyan-sm:0 0 8px rgba(27,76,246,.50);
  --neon-cyan-text:0 0 12px rgba(27,76,246,.55);
  --neon-gold:0 0 10px rgba(201,168,106,.5), 0 0 24px rgba(201,168,106,.25);
  --neon-red:0 0 10px rgba(255,43,76,.55), 0 0 26px rgba(255,43,76,.28);
  --neon-red-sm:0 0 8px rgba(255,43,76,.50);
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

/* ─── Chiffres en JetBrains Mono ─────────────────────────────────────
   Compteurs, stats, %, tailles. Les mots restent en Comfortaa : dans les
   libellés mixtes (« 12 albums »), seul le nombre est enveloppé dans .num. */
.stat-val, .hs-n, .hw-num, .upload-prog-pct, .upload-item-size, .num {
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
}
body {
  color:var(--fg-1);
  font-family:var(--font);
  font-size:15px;
  line-height:var(--leading-relaxed);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* Fond uni « noir premium » commun à toutes les pages (connexion comprise).
     Les seules touches de bleu viennent des deux lueurs fixes de body::after. */
  background-color:#0a0a0a;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
input, textarea, select { font:inherit; color:inherit; background:none; border:none; outline:none; }
ul, ol { list-style:none; }

/* Halos d'ambiance bleus (façon maquette « Page Album ») — deux lueurs
   radiales fixes, très diffuses, derrière tout le contenu. */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(620px circle at 88% -6%,  rgba(27,76,246,.10), transparent 70%),
    radial-gradient(540px circle at -4% 104%, rgba(84,120,255,.07), transparent 70%);
}

/* Grain argentique discret par-dessus le fond */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:var(--grain-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg-1); }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background:var(--accent-500); }

/* ─── Système d'icônes Fluent (masques recolorables) ─────────────── */
.ps-ic {
  display:inline-block; width:1.15em; height:1.15em; flex:none;
  vertical-align:-0.18em;
  background-color:currentColor;
  -webkit-mask:var(--_ic) center / contain no-repeat;
  mask:var(--_ic) center / contain no-repeat;
}
.ps-ic--sm { width:16px; height:16px; }
.ps-ic--md { width:20px; height:20px; }
.ps-ic--lg { width:24px; height:24px; }
.ps-ic--image       { --_ic:url("/assets/icons/image.png"); }
.ps-ic--image-multi { --_ic:url("/assets/icons/image_multiple.png"); }
.ps-ic--filmstrip   { --_ic:url("/assets/icons/filmstrip_play.png"); }
.ps-ic--grid        { --_ic:url("/assets/icons/layout_cell_four.png"); }
.ps-ic--search      { --_ic:url("/assets/icons/search.png"); }
.ps-ic--scan        { --_ic:url("/assets/icons/scan.png"); }
.ps-ic--heart       { --_ic:url("/assets/icons/heart.png"); }
.ps-ic--star        { --_ic:url("/assets/icons/star.png"); }
.ps-ic--share       { --_ic:url("/assets/icons/share_android.png"); }
.ps-ic--download    { --_ic:url("/assets/icons/folder_arrow_down.png"); }
.ps-ic--edit        { --_ic:url("/assets/icons/edit.png"); }
.ps-ic--link        { --_ic:url("/assets/icons/link.png"); }
.ps-ic--lock        { --_ic:url("/assets/icons/lock_closed.png"); }
.ps-ic--person      { --_ic:url("/assets/icons/person.png"); }
.ps-ic--people      { --_ic:url("/assets/icons/people.png"); }
.ps-ic--tag         { --_ic:url("/assets/icons/tag.png"); }
.ps-ic--color       { --_ic:url("/assets/icons/color.png"); }
.ps-ic--sparkle     { --_ic:url("/assets/icons/sparkle.png"); }
.ps-ic--folder      { --_ic:url("/assets/icons/folder_open.png"); }

/* ─── Splash ─────────────────────────────────────────────────────── */
.splash {
  position:fixed; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px;
  background:#0a0a0a;
  z-index:9999;
  transition:opacity .4s, visibility .4s;
}
.splash.hidden { opacity:0; visibility:hidden; }
.splash-logo { line-height:0; }
.splash-logo-img { height:58px; width:auto; filter:drop-shadow(0 0 26px rgba(27,76,246,.25)); }
.splash-spinner {
  width:34px; height:34px;
  border:2px solid var(--border-2); border-top-color:var(--accent-500);
  border-radius:50%; animation:spin .9s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Layout ─────────────────────────────────────────────────────── */
#app { min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1; }
.container { width:min(1320px, 100% - 48px); margin-inline:auto; }
.page { flex:1; padding-block:40px 80px; }

/* ─── Navbar (verre dépoli, fixe) ────────────────────────────────── */
.navbar {
  position:sticky; top:0; z-index:100;
  background:rgba(13,13,13,.80);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid var(--border-1);
  /* hairline supérieure claire + fin halo néon sous la barre */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),
             0 1px 0 color-mix(in srgb, var(--accent-500) 22%, transparent),
             0 10px 30px rgba(0,0,0,.30);
}
.navbar-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; height:62px; }
.nav-logo {
  display:flex; align-items:center; white-space:nowrap;
  transition:opacity var(--transition);
}
.nav-logo-img { height:36px; width:auto; display:block; }
.nav-logo:hover { opacity:.82; }
.nav-search {
  position:relative; display:flex; align-items:center;
  max-width:560px; width:100%; margin:0 auto;
  background:var(--bg-inset); border:1px solid var(--border-2);
  border-radius:var(--radius-md); overflow:hidden;
  transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.nav-search:hover { border-color:var(--accent-500); box-shadow:inset 0 0 0 1px var(--accent-soft), var(--neon-cyan-sm); }
.nav-search:focus-within { border-color:var(--accent-500); background:var(--slate-800); }
.nav-search input {
  flex:1; background:transparent; border:none; outline:none;
  padding:6px 8px 6px 38px; font-size:14px; color:var(--fg-1);
}
.nav-search input::placeholder { color:var(--fg-3); }
.nav-search-icon {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--fg-3); pointer-events:none; z-index:1; display:flex;
}
.nav-search-btn {
  background:var(--accent-500); border:none; padding:0 16px; align-self:stretch;
  color:var(--fg-on-accent); font-size:16px; font-weight:var(--fw-semibold);
  cursor:pointer; transition:background var(--transition);
  flex-shrink:0; display:flex; align-items:center;
}
.nav-search-btn:hover { background:var(--accent-400); box-shadow:var(--neon-cyan-sm); }
/* La barre de recherche s'illumine quand on l'utilise (focus). */
.nav-search:focus-within { box-shadow:var(--neon-cyan-sm); }
.nav-actions { display:flex; align-items:center; gap:8px; }
.nav-user-wrap { position:relative; }
.nav-user {
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px;
  background:var(--bg-2); border:1px solid var(--border-1);
  border-radius:var(--radius-md); font-size:13px; font-weight:var(--fw-medium);
  transition:all var(--transition); cursor:pointer;
}
/* Même hover que le bouton « Envoyer » : bordure bleue pleine + halo néon */
.nav-user:hover { background:var(--bg-3); border-color:var(--accent-500); box-shadow:var(--neon-cyan); }
.nav-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:var(--radius-md); box-shadow:var(--shadow-3);
  min-width:230px; z-index:200; overflow:hidden;
}
.nav-dropdown.open { display:block; }
.nav-dropdown-item {
  display:flex; align-items:center; gap:10px; width:100%; padding:11px 16px;
  font-size:13px; text-align:left; color:var(--fg-2);
  transition:background var(--transition), color var(--transition);
}
.nav-dropdown-item:hover { background:var(--bg-3); color:var(--fg-1); }
.nav-dropdown-danger { color:var(--danger-500); }
.nav-avatar {
  width:28px; height:28px; border-radius:var(--radius-full);
  background:var(--accent-soft); border:1px solid var(--accent-500);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:var(--fw-bold); color:var(--accent-300); flex-shrink:0;
  box-shadow:var(--neon-cyan-sm); transition:box-shadow var(--transition);
}
.nav-user:hover .nav-avatar { box-shadow:var(--neon-cyan); }

/* Raccourci clavier ⌘K affiché dans la recherche (masqué sur petit écran) */
.nav-kbd {
  /* 54px = largeur du bouton flèche + marge, pour que le « K » ne colle pas au bleu */
  position:absolute; right:54px; top:50%; transform:translateY(-50%);
  display:flex; gap:4px; pointer-events:none;
}
.nav-kbd span {
  font-size:10px; line-height:1; padding:3px 5px; border-radius:4px;
  color:var(--fg-3); background:var(--bg-2); border:1px solid var(--border-2);
}
@media (max-width:900px) { .nav-kbd { display:none; } }

/* ─── Navbar : sous-menu horizontal (2ᵉ étage, façon maquette) ───── */
.nav-sub {
  background:rgba(255,255,255,.03); border-top:1px solid var(--border-1);
}
.nav-sub-inner {
  display:flex; align-items:stretch; gap:28px; height:46px;
  overflow-x:auto; scrollbar-width:none;
}
.nav-sub-inner::-webkit-scrollbar { display:none; }
.nav-sub-link {
  display:flex; align-items:center; gap:8px; padding:0 2px;
  font-size:11px; font-weight:var(--fw-semibold); white-space:nowrap;
  text-transform:uppercase; letter-spacing:var(--tracking-wider);
  color:var(--fg-3); border-bottom:2px solid transparent;
  background:none; font-family:inherit; cursor:pointer;
  transition:color var(--transition), border-color var(--transition), text-shadow var(--transition);
}
.nav-sub-link:hover { color:var(--accent-300); border-bottom-color:color-mix(in srgb, var(--accent-500) 35%, transparent); }
.nav-sub-link.active {
  color:var(--accent-300); border-bottom-color:var(--accent-500);
  text-shadow:var(--neon-cyan-text);
}
.nav-sub-link .ps-ic { width:15px; height:15px; }
.nav-sub-right { margin-left:auto; }

/* Bouton « Envoyer » de la barre du haut */
.nav-upload { flex-shrink:0; }
.nav-upload .ps-ic { width:16px; height:16px; }
@media (max-width:640px) {
  .nav-upload-txt { display:none; }
  .nav-upload { padding:9px 11px; }
}
/* Laisse la place aux chips Ctrl+K dans le champ de recherche */
@media (min-width:901px) { .nav-search input { padding-right:106px; } }

/* ─── Boutons ────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:var(--radius-md);
  font-family:var(--font-mono); font-size:13px; font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide);
  border:1px solid var(--border-2); background:var(--bg-3); color:var(--fg-1);
  transition:all var(--transition); white-space:nowrap;
}
/* Survol unifié sur le modèle du bouton « Envoyer » : bordure pleine + halo néon. */
.btn:hover { border-color:var(--accent-500); box-shadow:var(--neon-cyan); }
.btn:active { transform:scale(.98); }
.btn:focus-visible { outline:none; box-shadow:var(--ring-focus); }
/* Primary = action clé tintée cyan (genre « Scanner ce dossier » de MotsClés) + néon. */
.btn-primary { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent-500) 45%, transparent); color:var(--accent-300); font-weight:var(--fw-semibold); }
.btn-primary:hover { background:color-mix(in srgb, var(--accent-500) 22%, transparent); border-color:var(--accent-500); color:var(--accent-300); box-shadow:var(--neon-cyan); }
.btn-primary:active { background:color-mix(in srgb, var(--accent-500) 30%, transparent); box-shadow:var(--neon-cyan-sm); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--fg-2); }
.btn-ghost:hover { background:var(--bg-3); color:var(--fg-1); border-color:var(--accent-500); box-shadow:var(--neon-cyan); }
/* bouton discret façon encadré mot-clé (accent doux), réagit au survol */
.btn-soft { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent-500) 40%, transparent); color:var(--accent-300); }
.btn-soft:hover { background:color-mix(in srgb, var(--accent-500) 22%, transparent); border-color:var(--accent-500); color:var(--accent-300); box-shadow:var(--neon-cyan); }
/* Version rouge, même genre que primary (tintée + néon), pour actions sensibles. */
.btn-danger { background:rgba(255,43,76,.14); border-color:color-mix(in srgb, #FF2B4C 45%, transparent); color:#ff5e76; font-weight:var(--fw-semibold); }
.btn-danger:hover { background:rgba(255,43,76,.24); border-color:#FF2B4C; color:#ff7d90; box-shadow:var(--neon-red); }
.btn-danger:active { background:rgba(255,43,76,.30); box-shadow:var(--neon-red-sm); }
/* Rouge alerte plein (suppression définitive) — charte #FF2B4C */
.btn-danger-solid { background:rgba(255,43,76,.16); border-color:color-mix(in srgb, #FF2B4C 55%, transparent); color:#FF2B4C; font-weight:var(--fw-semibold); }
.btn-danger-solid:hover { background:rgba(255,43,76,.30); border-color:#FF2B4C; box-shadow:var(--neon-red); }
/* Orange vigilance (retirer du catalogue) — charte #FFA128 */
.btn-warn { background:rgba(255,161,40,.16); border-color:color-mix(in srgb, #FFA128 60%, transparent); color:#FFA128; font-weight:var(--fw-medium); }
.btn-warn:hover { background:rgba(255,161,40,.30); border-color:#FFA128; box-shadow:0 0 10px rgba(255,161,40,.55), 0 0 26px rgba(255,161,40,.28); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

/* ─── Cartes verre / surfaces ────────────────────────────────────── */
.glass {
  background:var(--bg-2); border:1px solid var(--border-1);
  border-radius:var(--radius-lg); box-shadow:var(--hairline-top);
}
.glass-lg {
  background:var(--bg-2); border:1px solid var(--border-2);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-3), var(--hairline-top);
}

/* ─── Formulaires ────────────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label {
  font-size:11px; font-weight:var(--fw-medium); color:var(--fg-3);
  text-transform:uppercase; letter-spacing:var(--tracking-wider);
}
.form-control {
  width:100%; padding:10px 14px;
  background:var(--bg-inset); border:1px solid var(--border-2);
  border-radius:var(--radius-sm); color:var(--fg-1); font-size:14px;
  transition:border-color var(--transition), background var(--transition);
}
.form-control:focus { border-color:var(--accent-500); background:var(--slate-800); }
.form-control::placeholder { color:var(--fg-3); }
textarea.form-control { resize:vertical; min-height:80px; line-height:1.5; }
.form-error { font-size:12px; color:var(--danger-500); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px) { .form-row { grid-template-columns:1fr; } }

/* ─── Login ──────────────────────────────────────────────────────────
   Carte de connexion « chrome & néon » — valeurs littérales locales pour
   garder une portée strictement limitée à .login-card.
   Palette : bg #161616 · panel #212121 · border #2c2c2c · text #dcdcdc
             muted #a6a6a6 · accent #1b4cf6 · accent-2 #93a9ff · base 14px. */
.login-wrap {
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  padding:100px 24px 48px;
  /* Le fond uni #0a0a0a vient du body (commun à tout le site) */
  position:relative; overflow:hidden;
}
/* Halo premium qui suit la souris (variables --mx/--my posées par app.js, lissées) */
.login-glow {
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(260px circle at var(--mx,68%) var(--my,26%),
    rgba(120,155,255,.34), rgba(58,98,255,.14) 42%, transparent 68%);
  mix-blend-mode:screen;
}
/* Halos d'ambiance bleu néon (maquette « Page Cnx ») — statiques */
.login-wrap::before, .login-wrap::after {
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(70px);
}
.login-wrap::before {
  top:-22%; right:-14%; width:620px; height:620px;
  background:radial-gradient(closest-side, rgba(27,76,246,.18), transparent 70%);
}
.login-wrap::after {
  bottom:-24%; left:-14%; width:520px; height:520px;
  background:radial-gradient(closest-side, rgba(84,120,255,.10), transparent 70%);
}
/* Colonne logo vertical + panneau */
.login-box {
  position:relative; z-index:1;
  width:min(420px, 92vw);
  display:flex; flex-direction:column; gap:30px;
}
.login-hero {
  width:min(270px, 72%); margin:0 auto;
  filter:drop-shadow(0 0 34px rgba(27,76,246,.28));
  animation:login-logo-in .7s var(--ease-out) .05s both;
}
/* Carte de connexion — IDENTIQUE au nouveau MotsClés : cadre « darkroom »,
   verre dépoli, crochets de viseur aux 4 coins, halo cyan, révélation au chargement. */
.login-card {
  position:relative;
  width:100%; padding:30px 28px; border-radius:16px;
  font-family:var(--font-sans);
  font-size:14px; line-height:1.45;
  background:linear-gradient(180deg,#212121,#161616); border:1px solid #2c2c2c;
  /* Effet néon bleu permanent. */
  box-shadow:0 18px 44px rgba(0,0,0,.5),
             0 0 0 1px rgba(27,76,246,.16) inset,
             0 0 34px rgba(27,76,246,.14),
             inset 0 1px 0 rgba(255,255,255,.05);
  animation:login-card-in .6s var(--ease-out) both;
}
.login-card::before, .login-card::after {
  content:""; position:absolute; width:16px; height:16px;
  border:2px solid #1b4cf6; pointer-events:none;
}
.login-card::before { top:10px; left:10px; border-right:0; border-bottom:0; }
.login-card::after  { bottom:10px; right:10px; border-left:0; border-top:0; }
@keyframes login-card-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
/* Entrée du logo vertical (utilisée par .login-hero) */
@keyframes login-logo-in { from { opacity:0; transform:translateY(-8px) scale(.92); } to { opacity:1; transform:none; } }
.login-title { font-size:1.25rem; font-weight:var(--fw-semibold); margin-bottom:4px; text-align:center; }
.login-sub {
  color:#a6a6a6; font-size:11px; margin:2px 0 22px; text-align:center;
  text-transform:uppercase; letter-spacing:.22em;
}
.login-form { display:flex; flex-direction:column; gap:14px; }

/* Champ à icône (personne / cadenas) + œil de visibilité */
.login-field { position:relative; }
.login-field .ps-ic {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:#6f6f6f; pointer-events:none;
  transition:color var(--transition);
}
.login-field:focus-within .ps-ic { color:#1b4cf6; }
.login-card .login-field .form-control { padding-left:40px; }
.login-card .login-field .form-control[type="password"],
.login-card .login-field #l-pass { padding-right:42px; }
.login-eye {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:8px; color:#6f6f6f; cursor:pointer;
  transition:color var(--transition), background var(--transition);
}
.login-eye svg { width:18px; height:18px; }
.login-eye:hover { color:#93a9ff; background:rgba(27,76,246,.10); }
.login-eye:focus-visible { outline:2px solid #1b4cf6; outline-offset:2px; }

/* Ligne label + « Accès oublié ? » */
.login-label-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.login-forgot {
  font-size:11px; color:#7d96f5; cursor:pointer; letter-spacing:.02em;
  transition:color var(--transition);
}
.login-forgot:hover { color:#93a9ff; text-decoration:underline; }
.login-forgot:focus-visible { outline:2px solid #1b4cf6; outline-offset:2px; border-radius:4px; }

/* Champs identiques à MotsClés : labels minuscules poids normal, champs sombres compacts. */
.login-card .form-group { gap:4px; }
.login-card .form-label {
  text-transform:uppercase; letter-spacing:.1em; font-size:11px; font-weight:400; color:#a6a6a6; margin:0;
}
.login-card .form-control {
  padding:8px 10px; border-radius:8px; font-size:14px; line-height:1.4;
  background:#161616; border:1px solid #2c2c2c; color:#dcdcdc;
}
.login-card .form-control:focus { border-color:#1b4cf6; background:#161616; }
.login-card .form-error { text-align:center; }

/* Bouton « Se connecter » — CTA plein bleu néon (maquette), flèche animée. */
.login-card .login-btn {
  margin-top:14px; width:100%; justify-content:center; padding:12px 16px;
  font-size:14px; letter-spacing:.01em; font-weight:600;
  color:#ffffff; background:#1b4cf6;
  border:1px solid #1b4cf6; border-radius:10px;
  box-shadow:0 10px 28px -10px rgba(27,76,246,.55);
}
.login-card .login-btn:hover {
  color:#ffffff; border-color:#5478ff; background:#2b59ff;
  box-shadow:0 12px 32px -10px rgba(27,76,246,.7), var(--neon-cyan-sm);
}
.login-card .login-btn:active { transform:scale(.98); }
.login-card .login-btn:disabled { box-shadow:none; }
.login-btn .login-arrow { display:inline-block; transition:transform var(--transition); }
.login-btn:hover .login-arrow { transform:translateX(4px); }

/* ─── En-têtes de section ────────────────────────────────────────── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.section-title { font-size:1.25rem; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-tight); }
.section-sub { font-size:12px; color:var(--fg-3); margin-top:2px; text-transform:uppercase; letter-spacing:var(--tracking-wider); }

/* ─── Accueil : en-tête « hero » (façon maquette Page Album) ─────── */
.home-hero {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:28px;
}
.hh-title {
  font-size:clamp(1.7rem, 4vw, 2.4rem); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-tight); line-height:1.1; margin-bottom:8px;
}
.hh-sub { font-size:14px; color:var(--fg-2); opacity:.85; max-width:560px; }
/* Même effet que les cartes KPI Statistiques (.stat-card) : dégradé slate,
   hairline cyan révélée + léger soulèvement ombré au survol. */
.hh-kpis {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:22px; padding:14px 20px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-inset));
  border:1px solid var(--border-1); border-radius:var(--radius-xl);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.hh-kpis::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-500), transparent);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.hh-kpis:hover { transform:translateY(-3px); border-color:var(--accent-500); box-shadow:var(--neon-cyan), var(--shadow-2); }
.hh-kpis:hover::before { opacity:.75; }
/* Lueur bleue « comète » qui parcourt le contour au survol (border beam).
   Anneau de 1px dessiné par masque XOR ; rotation via @property (navigateurs
   récents ; sinon lueur statique, dégradation propre). */
@property --hh-beam {
  syntax:'<angle>'; initial-value:0deg; inherits:false;
}
.hh-kpis::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:conic-gradient(from var(--hh-beam),
    transparent 0deg, transparent 300deg,
    var(--accent-500) 335deg, rgba(120,155,255,.95) 348deg, transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.hh-kpis:hover::after {
  opacity:1;
  animation:hh-beam-spin 4.5s linear infinite;
}
@keyframes hh-beam-spin { to { --hh-beam:360deg; } }
@media (prefers-reduced-motion: reduce) { .hh-kpis::after { animation:none; opacity:0; } }
.hh-kpi { display:flex; flex-direction:column; }
.hh-kpi .hs-n { font-size:26px; }
.hh-kpi .hs-l { margin-top:4px; }
.hh-kpi + .hh-kpi { border-left:1px solid var(--border-1); padding-left:22px; }

/* ─── Sections par année ─────────────────────────────────────────── */
.year-section { margin-bottom:48px; }
.year-title {
  font-size:1.5rem; font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight);
  color:var(--fg-1); margin-bottom:20px; padding-bottom:10px;
  border-bottom:1px solid var(--border-1);
}
/* En-tête façon maquette : année + filet qui s'étire + compteur à droite */
.year-head { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.year-head .year-name {
  font-size:1.5rem; font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-tight); color:var(--fg-1);
}
.year-head .year-line { flex:1; height:1px; background:var(--border-2); }
.year-head .year-count {
  font-size:11px; color:var(--fg-3);
  text-transform:uppercase; letter-spacing:var(--tracking-wider);
}
.year-sub-title {
  font-size:11px; font-weight:var(--fw-medium); color:var(--fg-3);
  margin:24px 0 12px; text-transform:uppercase; letter-spacing:var(--tracking-wider);
}

/* ─── Grille albums ──────────────────────────────────────────────── */
/* Mosaïque d'albums : 4 colonnes fixes, hauteur de rangée régulière, et
   remplissage dense — les tuiles (1×1, 2×1, 2×2, pleine largeur) se calent
   sans laisser de trou. Le mélange des tailles est décidé côté JS (mosaicSizes). */
.albums-grid {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:220px; grid-auto-flow:dense; gap:var(--space-6);
}

/* Accueil — KPIs (total photos / albums) */
.home-stats { display:flex; gap:14px; margin-bottom:8px; }
.hs-kpi { flex:1; background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border:1px solid var(--border-1);
  border-radius:var(--radius-lg); padding:16px 18px; transition:border-color var(--transition), box-shadow var(--transition); }
.hs-kpi:hover { border-color:var(--accent-500); box-shadow:inset 0 0 0 1px var(--accent-soft), var(--neon-cyan-sm); }
.hs-n { font-size:30px; font-weight:var(--fw-bold); color:var(--accent-500); letter-spacing:-.02em; line-height:1; }
.hs-l { font-size:12px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.12em; margin-top:6px; }
@media (max-width:520px){ .home-stats{flex-direction:column} }

/* Accueil — Top 5 / Récents : KPI repliable (même gabarit que les KPI du haut) */
.home-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:16px; align-items:start; }
@media (max-width:760px){ .home-grid{grid-template-columns:1fr} }
.hs-acc { background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border:1px solid var(--border-1);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out); }
/* Même hover que le bouton « Envoyer » (bordure bleue + halo néon) + relief 3D */
.hs-acc:hover { transform:translateY(-3px); border-color:var(--accent-500); box-shadow:var(--neon-cyan), var(--shadow-2); }
.acc-head { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; cursor:pointer; user-select:none; }
.acc-head::-webkit-details-marker { display:none; }
.acc-title { display:flex; flex-direction:column; gap:5px; font-size:15px; font-weight:var(--fw-bold); color:var(--fg-1); }
.acc-title small { font-size:11px; font-weight:var(--fw-medium); color:var(--fg-3); text-transform:uppercase; letter-spacing:.12em; }
.acc-arrow { flex:none; color:var(--fg-3); font-size:22px; line-height:1; transition:transform var(--transition); }
.hs-acc[open] .acc-arrow { transform:rotate(90deg); color:var(--accent-500); }
.acc-body { padding:0 12px 12px; }
.hw-list { display:flex; flex-direction:column; gap:3px; }
.hw-row { display:grid; grid-template-columns:1fr 90px auto; align-items:center; gap:10px; width:100%;
  text-align:left; background:none; border:0; padding:5px 6px; color:var(--fg-1); font:inherit; cursor:pointer;
  border-radius:var(--radius-md); transition:background var(--transition); }
.hw-row:hover { background:var(--bg-3); }
.hw-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-track { height:8px; border-radius:999px; background:var(--bg-0); border:1px solid var(--border-2); overflow:hidden; }
.hw-fill { display:block; height:100%; background:linear-gradient(90deg,var(--accent-500),var(--accent-300)); transform-origin:left; }
.hw-num { color:var(--fg-3); font-size:12px; font-variant-numeric:tabular-nums; }
/* Image interne des tuiles — zoom permanent rogné par le conteneur (overflow:hidden) */
.ps-tile-img { transform:scale(1.06); transition:transform 600ms var(--ease-out), filter 600ms var(--ease-out); will-change:transform; }
/* Cartes albums : à plat au repos, coins arrondis. */
.album-card {
  border-radius:var(--radius-xl); overflow:hidden;
  background:var(--bg-2); cursor:pointer;
  position:relative; will-change:transform;
  border:1px solid var(--border-1);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
/* Au survol : même effet que les tuiles Top 5 / Récents —
   lift -3px, bordure bleue pleine, halo néon + ombre portée. */
.album-card:hover {
  transform:translateY(-3px);
  border-color:var(--accent-500);
  box-shadow:var(--neon-cyan), var(--shadow-2);
}
@media (prefers-reduced-motion: reduce) {
  .album-card, .album-card:hover { transform:none; }
}
/* La hauteur des tuiles vient des rangées de la mosaïque ; la cover remplit la carte. */
.album-cover { height:100%; overflow:hidden; position:relative; }

/* Tailles de tuiles de la mosaïque */
.album-card--wide { grid-column:span 2; grid-row:span 2; }   /* vedette : 2 colonnes × 2 rangées max */
.album-card--pano { grid-column:1 / -1; }                    /* orphelin fin de section : pleine largeur ×1 */
.album-card--big  { grid-column:span 2; grid-row:span 2; }   /* 2×2 */
.album-card--w2   { grid-column:span 2; }                    /* 2×1 */
/* Vignette vedette : bandeau « gris luxe » translucide pleine largeur posé sur
   le bas de la photo (verre dépoli : l'image transparaît légèrement derrière) ;
   il porte le nom, le compteur et le badge. */
.album-card--wide .album-overlay { display:none; }
.album-card--wide .album-meta {
  padding:16px 120px 16px 24px; /* réserve à droite pour le badge Vedette */
  background:linear-gradient(180deg, rgba(33,33,33,.50), rgba(22,22,22,.66));
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:var(--hairline-top);
}
.album-card--wide .album-name { font-size:1.35rem; }

/* Tablette : la mosaïque retombe sur 2 colonnes (le flux dense rebouche tout) */
@media (max-width:900px) {
  .albums-grid { grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:190px; }
}
/* Mobile : une colonne, hauteurs naturelles par ratio d'image */
@media (max-width:620px) {
  .albums-grid { grid-template-columns:1fr; grid-auto-rows:auto; }
  .album-card--wide, .album-card--pano, .album-card--big, .album-card--w2 { grid-column:auto; grid-row:auto; }
  .album-cover { height:auto; aspect-ratio:16/10; }
  .album-card--wide .album-cover { aspect-ratio:16/9; }
  .album-card--wide .album-meta { padding:12px 104px 12px 14px; }
  .album-card--wide .album-name { font-size:1rem; }
}

/* Badges sur la vignette : « Partagé » (visibilité) et « Vedette » (carte panoramique).
   Les albums privés n'affichent aucun badge. */
.album-badge {
  display:inline-block; width:max-content; margin-bottom:8px;
  font-size:9px; font-weight:var(--fw-semibold); line-height:1;
  text-transform:uppercase; letter-spacing:var(--tracking-widest);
  padding:5px 8px; border-radius:var(--radius-sm);
  background:rgba(10,10,10,.72); backdrop-filter:blur(6px);
  color:var(--accent-400); border:1px solid color-mix(in srgb, var(--accent-500) 80%, transparent);
}
.album-badge--shared { color:var(--gold-500); border-color:color-mix(in srgb, var(--gold-500) 45%, transparent); }
/* Espace entre deux badges côte à côte (Nouveau + Partagé) — le Vedette, hors flux, ne compte pas */
.album-badge:not(.album-badge--vedette) + .album-badge { margin-left:6px; }
/* « Vedette » : à droite du bandeau, centré verticalement, avec un reflet
   de brillance qui balaie le badge toutes les 3 s. */
.album-badge--vedette {
  color:var(--gold-500); border-color:color-mix(in srgb, var(--gold-500) 45%, transparent);
  position:absolute; right:24px; top:50%; transform:translateY(-50%); margin:0;
  overflow:hidden;
}
/* « Nouveau » : album créé récemment — vert, même brillance que Vedette. */
.album-badge--new {
  color:var(--success-500); border-color:color-mix(in srgb, var(--success-500) 55%, transparent);
  position:relative; overflow:hidden;
}
.album-badge--vedette::after, .album-badge--new::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform:translateX(-130%);
  animation:vedette-sheen 3s var(--ease-out) infinite;
}
@keyframes vedette-sheen {
  0%        { transform:translateX(-130%); }
  55%, 100% { transform:translateX(130%); }
}
@media (max-width:620px) { .album-badge--vedette { right:14px; } }
/* Reflet diagonal qui balaie la cover au survol */
.album-cover::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 28%, rgba(255,255,255,.16) 46%, transparent 64%);
  transform:translateX(-130%);
  transition:transform 780ms var(--ease-out);
}
.album-card:hover .album-cover::before { transform:translateX(130%); }
.album-cover img {
  width:100%; height:100%; object-fit:cover;
  /* Recadrage toujours centré sur le milieu de la photo, quel que soit le format de la tuile */
  object-position:center center;
  filter:brightness(.92); transition:transform 600ms var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.album-card:hover .album-cover img { transform:scale(1.12); filter:brightness(1.08) saturate(1.1); }
.album-cover-empty {
  width:100%; height:100%; background:var(--bg-inset);
  display:flex; align-items:center; justify-content:center;
  color:var(--slate-600); font-size:2.2rem;
}
.album-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.45) 42%, transparent 72%);
}
.album-meta { position:absolute; bottom:0; left:0; right:0; padding:14px; }
.album-name { font-size:1rem; font-weight:var(--fw-semibold); line-height:1.3; transition:text-shadow var(--transition); }
.album-card:hover .album-name { text-shadow:0 0 14px rgba(27,76,246,.45); }
.album-count {
  font-size:11px; color:var(--fg-3); margin-top:4px;
  text-transform:uppercase; letter-spacing:var(--tracking-wider);
}
.album-desc { font-size:12px; color:var(--fg-2); margin-top:4px; }

/* ─── En-tête galerie ────────────────────────────────────────────── */
.gallery-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; }
.back-btn {
  padding:8px 11px; border-radius:var(--radius-sm);
  background:var(--bg-2); border:1px solid var(--border-2);
  color:var(--fg-2); font-size:16px; line-height:1;
  transition:all var(--transition); flex-shrink:0;
}
.back-btn:hover { background:var(--bg-3); color:var(--fg-1); border-color:var(--bg-3); }
.gallery-title { font-size:1.5rem; font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight); line-height:1.2; }
.gallery-subtitle {
  color:var(--fg-3); font-size:11px; margin-top:6px;
  text-transform:uppercase; letter-spacing:var(--tracking-wider);
}

/* ─── Barre de filtres ───────────────────────────────────────────── */
.filter-bar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:24px; padding:12px 16px;
  background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius-md);
}
.filter-label { font-size:11px; color:var(--fg-3); font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:var(--tracking-wider); margin-right:4px; }
/* Filtre album en liste déroulante (même accordéon que l'accueil) */
.filter-acc { margin-bottom:24px; }
/* En-tête plus compact : titre + sous-libellé sur une seule ligne (façon MotsClés). */
.filter-acc .acc-head { padding:11px 14px; }
.filter-acc .acc-title { flex-direction:row; align-items:baseline; gap:8px; font-size:13px; }
.filter-acc .acc-title small { text-transform:none; letter-spacing:.04em; }
.filter-acc .acc-arrow { font-size:18px; }
.filter-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-chip {
  padding:4px 10px; border-radius:var(--radius-md); font-size:11px;
  text-transform:uppercase; letter-spacing:var(--tracking-wide);
  background:var(--bg-inset); border:1px solid var(--border-2); color:var(--fg-2);
  cursor:pointer; transition:all var(--transition);
}
.filter-chip:hover { border-color:var(--accent-500); color:var(--accent-300); }
.filter-chip.active { background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent-500) 50%, transparent); color:var(--accent-300); box-shadow:var(--neon-cyan-sm); }

/* ─── Grille photos (mosaïque justifiée façon Google Photos) ─────── */
/* Rangées remplies pile-poil : ratios conservés, zéro trou.
   Les dimensions de chaque .photo-item sont posées par justifyGallery() (app.js). */
.photos-grid {
  --ps-gap:12px;
  display:flex; flex-wrap:wrap; align-content:flex-start;
  gap:var(--ps-gap);
}
/* Vue album : mosaïque en grille (spans posés par mosaicLayout() selon
   l'orientation). Les colonnes et la hauteur de rangée sont réglées en ligne
   par le JS ; chaque tuile remplit sa cellule (object-fit:cover). */
.photos-grid--mosaic {
  display:grid;
  grid-auto-flow:row dense;
}
.photos-grid--mosaic .photo-item { width:auto; height:auto; }
/* Pagination « Charger plus » sous la grille */
.load-more-wrap { display:flex; justify-content:center; margin-top:24px; }
.photo-item {
  flex:0 0 auto;
  border-radius:var(--radius-xs); overflow:hidden;
  cursor:pointer; position:relative; background:var(--bg-0);
  will-change:transform;
  /* Coins nets façon planche-contact + crochets de viseur au survol (cf. Portail) */
  transition:transform 460ms cubic-bezier(.2,.85,.25,1), filter 460ms var(--ease-out);
}
/* Crochets de viseur (4 coins, un seul pseudo) — ::after est réservé à .is-new. */
.photo-item::before {
  content:""; position:absolute; inset:7px; z-index:5; pointer-events:none; opacity:0;
  background:
    linear-gradient(var(--accent-500),var(--accent-500)) 0 0/12px 2px no-repeat,
    linear-gradient(var(--accent-500),var(--accent-500)) 0 0/2px 12px no-repeat,
    linear-gradient(var(--accent-500),var(--accent-500)) 100% 0/12px 2px no-repeat,
    linear-gradient(var(--accent-500),var(--accent-500)) 100% 0/2px 12px no-repeat,
    linear-gradient(var(--accent-500),var(--accent-500)) 0 100%/12px 2px no-repeat,
    linear-gradient(var(--accent-500),var(--accent-500)) 0 100%/2px 12px no-repeat,
    linear-gradient(var(--accent-500),var(--accent-500)) 100% 100%/12px 2px no-repeat,
    linear-gradient(var(--accent-500),var(--accent-500)) 100% 100%/2px 12px no-repeat;
  transition:opacity 280ms var(--ease-out), inset 280ms var(--ease-out);
}
.photo-item:hover::before { opacity:.95; inset:5px; }
.photo-item img {
  width:100%; height:100%; object-fit:cover; display:block;
}
/* zoom permanent léger : l'aperçu déborde, on ne voit pas les bords de la photo */
.photo-item .ps-tile-img { transform:scale(1.08); }
/* survol : la photo s'élève, se « développe » (zoom doux + lumière) et glow néon */
.photo-item:hover {
  transform:scale(1.4) translateY(-2px);
  z-index:10;
  filter:drop-shadow(0 0 7px rgba(27,76,246,.5)) drop-shadow(0 24px 42px rgba(0,0,0,.82));
}
.photo-item:hover .ps-tile-img {
  transform:scale(1.16);
  filter:brightness(1.06) contrast(1.04) saturate(1.08);
}
.photo-item-overlay {
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.5) 38%, transparent 66%);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
  display:flex; flex-direction:column; justify-content:flex-end; padding:10px;
}
.photo-item:hover .photo-item-overlay { opacity:1; }
/* Contenu de l'overlay : remontée en fondu, étagée (premium) */
.photo-item-overlay > * { opacity:0; transform:translateY(10px);
  transition:opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.photo-item:hover .photo-item-overlay > * { opacity:1; transform:none; }
.photo-item:hover .photo-item-overlay > *:nth-child(2){ transition-delay:55ms; }
.photo-item:hover .photo-item-overlay > *:nth-child(3){ transition-delay:110ms; }
/* Surbrillance des photos nouvellement ajoutées (lien email « nouvelles photos ») :
   anneau cyan interne (compatible clip-path), pulsé 5× puis laissé fixe. */
.photo-item.is-new::after {
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 0 3px #1b4cf6;
  animation:ps-new-pulse 1.5s var(--ease-out) 0s 5;
}
@keyframes ps-new-pulse {
  0%, 100% { box-shadow:inset 0 0 0 3px rgba(27,76,246,.95); }
  50%      { box-shadow:inset 0 0 0 3px rgba(27,76,246,.20); }
}
.photo-item-title { font-size:12px; font-weight:var(--fw-medium); line-height:1.3; }
.photo-item-stars { display:flex; align-items:center; gap:3px; margin-top:4px; }
.photo-item-kw { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }

/* Badge note (photos notées) : chiffre + étoile dorée, premium avec reflet
   balayant comme « Vedette ». Toujours visible, coin haut-gauche de la tuile. */
.photo-rating {
  position:absolute; top:8px; left:8px; z-index:6; pointer-events:none;
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:var(--fw-semibold); line-height:1;
  padding:4px 7px; border-radius:var(--radius-sm);
  background:rgba(10,10,10,.72); backdrop-filter:blur(6px);
  color:var(--gold-500); border:1px solid color-mix(in srgb, var(--gold-500) 50%, transparent);
  box-shadow:var(--neon-gold); overflow:hidden;
}
.photo-rating .rating-star { font-size:12px; line-height:1; }
.photo-rating::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform:translateX(-130%);
  animation:vedette-sheen 3s var(--ease-out) infinite;
}

/* Apparition premium des photos : chaque tuile arrive depuis l'extérieur de
   l'écran (vecteur --tx/--ty aléatoire) en tournant, puis se pose à sa place
   avec un léger dépassement. Le délai (--d) et le vecteur sont posés par
   revealPhotos() une seule fois par tuile (les nouvelles du « Charger plus »
   entrent seules, sans rejouer les précédentes). */
.photos-grid.ps-in .photo-item {
  animation:ps-photo-in 720ms cubic-bezier(.2,.9,.3,1.06) both;
  animation-delay:var(--d, 0ms);
}
@keyframes ps-photo-in {
  from { opacity:0; transform:translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0)) scale(.85); }
  to   { opacity:1; transform:none; }
}
/* Pendant la cascade, on fige le scroll : les tuiles hors-champ ne créent pas
   de barre de défilement transitoire. */
body.is-revealing { overflow:hidden; }
@media (prefers-reduced-motion:reduce) { .photos-grid.ps-in .photo-item { animation:none; } }

/* ─── Chips mots-clés ────────────────────────────────────────────── */
.kw-badge {
  font-size:10px; padding:2px 7px; border-radius:var(--radius-md);
  text-transform:uppercase; letter-spacing:var(--tracking-wide);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent-500) 40%, transparent);
  color:var(--accent-300);
}

/* ─── Dashboard mots-clés (explorer admin) ───────────────────────── */
.kw-mode-toggle { display:inline-flex; gap:2px; padding:3px; background:var(--bg-inset); border:1px solid var(--border); border-radius:var(--radius-full); }
.kw-mode { font-size:12px; font-weight:var(--fw-medium); padding:6px 14px; border-radius:var(--radius-full); background:none; border:none; color:var(--fg-3); cursor:pointer; transition:var(--transition); letter-spacing:var(--tracking-wide); }
.kw-mode:hover { color:var(--fg-1); }
.kw-mode.active { background:var(--accent-500); color:var(--fg-on-accent); box-shadow:var(--neon-cyan-sm); }

.kw-dash { display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; }
.kw-dash-nav { padding:14px; max-height:calc(100vh - 230px); overflow-y:auto; }
.kw-dash-detail { padding:18px 20px; max-height:calc(100vh - 230px); overflow-y:auto; }

.kw-nav-head { font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--fg-3); font-weight:var(--fw-semibold); margin:2px 4px 10px; display:flex; align-items:center; gap:8px; }
.kw-nav-delall { margin-left:auto; font-size:10px; background:none; border:none; color:var(--danger); cursor:pointer; text-transform:uppercase; letter-spacing:var(--tracking-wide); }
.kw-nav-delall:hover { text-decoration:underline; }
.kw-nav-create { display:flex; gap:6px; margin-bottom:10px; }
.kw-nav-create .form-control { flex:1; font-size:13px; }

.kw-nav-item { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:var(--radius-md); cursor:pointer; transition:var(--transition); position:relative; }
.kw-nav-item:hover { background:var(--bg-2); }
.kw-nav-item.active { background:var(--accent-soft); }
.kw-nav-item.active::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--accent-500); box-shadow:var(--neon-cyan-sm); }
.kw-nav-name { flex:1; font-size:13px; color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kw-nav-count { font-size:11px; color:var(--fg-3); background:var(--bg-inset); border-radius:var(--radius-full); padding:1px 8px; min-width:22px; text-align:center; }
.kw-nav-item.active .kw-nav-count { color:var(--accent-300); }

.kw-detail-head { font-size:17px; font-weight:var(--fw-semibold); color:var(--fg-1); margin-bottom:4px; }
.kw-detail-sub { font-size:12px; text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--fg-2); font-weight:var(--fw-medium); margin:14px 0 10px; }
.kw-detail-sub .text-muted { text-transform:none; letter-spacing:normal; font-weight:var(--fw-regular); }
.kw-detail-actions { display:flex; gap:8px; margin:6px 0 18px; }
.kw-detail-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:240px; color:var(--fg-3); text-align:center; padding:20px; }
.kw-detail-empty i { font-size:34px; opacity:.5; }

.kw-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.kw-chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:5px 6px 5px 12px; border-radius:var(--radius-full); background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent-500) 35%, transparent); color:var(--accent-300); }
.kw-chip-x { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; cursor:pointer; color:var(--fg-3); transition:var(--transition); font-size:14px; line-height:1; }
.kw-chip-x:hover { background:var(--danger); color:#fff; }
.kw-add-row { display:flex; gap:8px; align-items:center; max-width:520px; }
.kw-add-row .form-control { flex:1; font-size:13px; }

@media (max-width:760px) {
  .kw-dash { grid-template-columns:1fr; }
  .kw-dash-nav { max-height:320px; }
}

/* ─── Étoiles (note) ─────────────────────────────────────────────── */
.stars { display:inline-flex; align-items:center; gap:2px; }
.star { font-size:15px; color:var(--slate-600); cursor:pointer; transition:color var(--transition), transform var(--transition); line-height:1; }
.star.filled { color:var(--gold-500); }
.star:hover { transform:scale(1.18); }
.stars-display .star { cursor:default; }
.stars-display .star:hover { transform:none; }
.stars-sm .star { font-size:12px; }
.avg-label { font-size:11px; color:var(--fg-3); margin-left:5px; letter-spacing:var(--tracking-wide); }

/* ─── Lightbox / modal photo ─────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:500; background:rgba(5,5,5,.9);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  padding:16px; animation:fade-in .2s ease;
}
@keyframes fade-in { from { opacity:0; } }
.modal-backdrop.closing { animation:fade-out .2s ease forwards; }
@keyframes fade-out { to { opacity:0; } }
.modal-photo {
  width:min(1600px, 96vw); max-height:calc(100vh - 32px);
  display:grid; grid-template-columns:1fr 380px;
  background:var(--bg-1); border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lift);
  /* transitions.dev — modal (06) : scale-up depuis --modal-scale, ease smooth */
  animation:zoom-in var(--modal-open-dur) var(--modal-ease);
}
@keyframes zoom-in { from { opacity:0; transform:scale(var(--modal-scale)); } }
.modal-backdrop.closing .modal-photo { animation:zoom-out var(--modal-close-dur) var(--modal-ease) forwards; }
@keyframes zoom-out { to { opacity:0; transform:scale(var(--modal-scale-close)); } }
@media (max-width:860px) { .modal-photo { grid-template-columns:1fr; grid-template-rows:auto 1fr; } }
.modal-img-wrap { background:var(--bg-0); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; min-height:300px; }
.modal-img-wrap img { max-width:100%; max-height:calc(100vh - 48px); object-fit:contain; display:block; transition:transform var(--transition); }
.modal-img-wrap img.zoomed { transform:scale(1.5); cursor:zoom-out; }
.modal-img-wrap img:not(.zoomed) { cursor:zoom-in; }
.modal-nav { position:absolute; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; width:100%; padding:0 12px; pointer-events:none; }
.modal-nav-btn {
  pointer-events:all; width:40px; height:40px; border-radius:var(--radius-full);
  background:rgba(10,10,10,.6); backdrop-filter:blur(8px);
  border:1px solid var(--border-2); color:var(--fg-1);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:all var(--transition);
}
.modal-nav-btn:hover { background:var(--accent-500); border-color:var(--accent-500); color:var(--fg-on-accent); }
.modal-panel { display:flex; flex-direction:column; border-left:1px solid var(--border-1); overflow:hidden; background:var(--bg-1); }
.modal-panel-head { padding:20px 20px 16px; border-bottom:1px solid var(--border-1); flex-shrink:0; }
/* Ligne titre + bouton Fermer (panneau de droite) : titre à gauche, bouton collé à droite. */
.modal-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px; }
.modal-title-row .modal-title { margin-bottom:0; }
/* Bouton « Fermer × » repris du style des badges mots-clés (.kw-badge), en rouge vif (local). */
.modal-close {
  --close-red:#ff2b4c;
  flex-shrink:0; align-self:flex-start;
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; padding:4px 9px; border-radius:var(--radius-md);
  text-transform:uppercase; letter-spacing:var(--tracking-wide); font-weight:var(--fw-semibold);
  background:color-mix(in srgb, var(--close-red) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--close-red) 60%, transparent);
  color:var(--close-red); transition:all var(--transition);
}
.modal-close .modal-close-x { font-size:14px; line-height:1; }
.modal-close:hover { background:var(--close-red); border-color:var(--close-red); color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--close-red) 25%, transparent); }
.modal-title { font-size:1.05rem; font-weight:var(--fw-semibold); line-height:1.3; margin-bottom:6px; }
.modal-desc { font-size:13px; color:var(--fg-2); margin-bottom:10px; line-height:1.5; }
.modal-info {
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px;
  font-size:11px; color:var(--fg-3); text-transform:uppercase; letter-spacing:var(--tracking-wider);
}
.modal-info span { display:flex; align-items:center; gap:5px; }
.modal-kw { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.modal-rating { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.modal-rating-label { font-size:11px; color:var(--fg-3); text-transform:uppercase; letter-spacing:var(--tracking-wider); }
.modal-cover-row { margin-top:14px; }
.modal-panel-body { flex:1; overflow-y:auto; padding:16px 20px; }
/* Trait fin de séparation des sections du panneau (même style que le bord sous « Ma note »). */
.modal-sep { height:1px; background:var(--border-1); margin:18px 0; }
.comments-title { font-size:11px; font-weight:var(--fw-semibold); color:var(--fg-3); margin-bottom:12px; text-transform:uppercase; letter-spacing:var(--tracking-wider); }
.comment-item { display:flex; gap:10px; margin-bottom:14px; }
.comment-avatar {
  width:30px; height:30px; border-radius:var(--radius-full); flex-shrink:0;
  background:var(--accent-soft); border:1px solid var(--accent-500);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:var(--fw-bold); color:var(--accent-300);
}
.comment-body { flex:1; }
.comment-meta { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.comment-author { font-size:13px; font-weight:var(--fw-medium); }
.comment-date { font-size:10px; color:var(--fg-3); text-transform:uppercase; letter-spacing:var(--tracking-wide); }
.comment-text { font-size:13px; color:var(--fg-2); line-height:1.55; }
.comment-del { font-size:13px; color:var(--danger-500); opacity:0; transition:opacity var(--transition); cursor:pointer; margin-left:auto; }
.comment-item:hover .comment-del { opacity:1; }
.comment-form { margin-top:16px; }
.comment-input-wrap { position:relative; }
.comment-input {
  width:100%; padding:10px 46px 10px 14px;
  background:var(--bg-inset); border:1px solid var(--border-2); border-radius:var(--radius-sm);
  color:var(--fg-1); resize:none; min-height:70px; font-size:13px; line-height:1.5;
  transition:border-color var(--transition);
}
.comment-input:focus { border-color:var(--accent-500); }
.comment-submit {
  position:absolute; bottom:10px; right:10px; width:32px; height:32px;
  border-radius:var(--radius-sm); background:var(--accent-500); color:var(--fg-on-accent);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  transition:all var(--transition);
}
.comment-submit:hover { background:var(--accent-400); }

/* ─── Admin ──────────────────────────────────────────────────────── */
.admin-nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--radius-sm); font-size:13px; color:var(--fg-2); cursor:pointer;
  transition:all var(--transition); margin-bottom:2px;
}
.admin-nav-item:hover { background:var(--bg-3); color:var(--fg-1); }
.admin-nav-item.active { background:var(--accent-soft); color:var(--accent-300); font-weight:var(--fw-medium); box-shadow:inset 3px 0 0 var(--accent-500), inset 4px 0 8px color-mix(in srgb, var(--accent-500) 35%, transparent); }
.admin-content { min-height:600px; }

/* ─── Navigation admin horizontale ───────────────────────────────── */
.admin-nav-h {
  display:flex; align-items:stretch; gap:4px;
  padding:6px; margin-bottom:20px;
  overflow-x:auto; scrollbar-width:none;
}
.admin-nav-h::-webkit-scrollbar { display:none; }
.admin-nav-h .admin-nav-item {
  margin-bottom:0; white-space:nowrap; border-radius:var(--radius-sm);
  padding:10px 16px; position:relative;
}
.admin-nav-h .admin-nav-item:hover {
  background:none; color:var(--accent-300);
  box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--accent-500) 35%, transparent);
}
.admin-nav-h .admin-nav-item.active {
  background:none; color:var(--accent-300); font-weight:var(--fw-semibold);
  box-shadow:inset 0 -2px 0 var(--accent-500);
  text-shadow:var(--neon-cyan-text);
}

/* ─── Tableau de bord admin (dashboard) ──────────────────────────── */
.dash-card { padding:20px; }
.gauge-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:640px) { .gauge-grid { grid-template-columns:1fr; } }
.dash-card-head {
  display:flex; align-items:center; gap:8px;
  font-size:1rem; font-weight:var(--fw-semibold); color:var(--fg-1);
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border-1);
}
.dash-card-head .ps-ic { color:var(--accent-400); }
.dash-empty { color:var(--fg-3); font-size:13px; padding:18px 0; text-align:center; }

/* Jauges stockage */
.gauge { margin-bottom:18px; }
.gauge:last-child { margin-bottom:0; }
.gauge-row { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--fg-2); margin-bottom:7px; }
.gauge-pct { color:var(--accent-300); font-weight:var(--fw-semibold); font-variant-numeric:tabular-nums; }
.gauge-track { height:8px; border-radius:999px; background:var(--bg-inset, var(--bg-3)); border:1px solid var(--border-2); overflow:hidden; }
.gauge-fill { height:100%; border-radius:999px; transition:width .5s var(--ease-out); }
.gauge-fill--vol    { background:linear-gradient(90deg, var(--accent-600), var(--accent-400)); box-shadow:0 0 10px color-mix(in srgb, var(--accent-500) 45%, transparent); }
.gauge-fill--photos { background:linear-gradient(90deg, var(--accent-400), var(--accent-300)); opacity:.9; }
.gauge-sub { font-size:11px; color:var(--fg-3); margin-top:7px; font-variant-numeric:tabular-nums; }

/* Flux d'activité */
.activity-feed { display:flex; flex-direction:column; }
.activity-item { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--border-1); }
.activity-item:last-child { border-bottom:0; padding-bottom:0; }
.activity-ic {
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-400);
  border:1px solid color-mix(in srgb, var(--accent-500) 25%, transparent);
}
.activity-body { flex:1; min-width:0; font-size:14px; color:var(--fg-1); line-height:1.45; }
.activity-body p { margin:0; }
.act-strong { font-weight:var(--fw-semibold); color:var(--accent-300); }
.act-em { color:var(--fg-2); font-style:italic; }
.act-quote {
  margin-top:8px !important; padding:8px 12px; font-size:13px; font-style:italic;
  color:var(--fg-2); background:var(--bg-inset, var(--bg-3));
  border:1px solid var(--border-1); border-radius:var(--radius-sm);
  overflow:hidden; text-overflow:ellipsis;
}
.activity-time { display:block; margin-top:6px; font-size:11px; color:var(--fg-3); }

/* Top photos — colonnes fixes 130px auto-remplies et centrées : autant de
   colonnes que la largeur le permet (> 4), 12 photos ≈ 2 rangées. */
.top-photos-grid { display:grid; grid-template-columns:repeat(auto-fill, 130px); gap:14px; justify-content:center; }
.top-photo { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.top-photo img { width:130px; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius-md); }
.top-photo-info { width:130px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.top-photo-title { font-size:13px; color:var(--fg-1); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.admin-section-title {
  font-size:1.1rem; font-weight:var(--fw-semibold); margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid var(--border-1);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th {
  text-align:left; font-size:10px; font-weight:var(--fw-semibold); color:var(--fg-3);
  letter-spacing:var(--tracking-wider); text-transform:uppercase;
  padding:10px 14px; border-bottom:1px solid var(--border-2);
}
.admin-table td { padding:12px 14px; border-bottom:1px solid var(--border-1); font-size:13px; vertical-align:middle; }
.admin-table tr:hover td { background:var(--bg-2); }
.badge { display:inline-flex; align-items:center; font-size:10px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:3px 9px; border-radius:var(--radius-md); }
.badge-admin { background:var(--accent-soft); color:var(--accent-300); border:1px solid color-mix(in srgb, var(--accent-500) 40%, transparent); }
.badge-user  { background:var(--bg-inset); color:var(--fg-2); border:1px solid var(--border-2); }
.badge-on  { background:var(--success-soft); color:var(--success-500); border:1px solid color-mix(in srgb, var(--success-500) 40%, transparent); }
.badge-off { background:var(--danger-soft); color:var(--danger-500); border:1px solid color-mix(in srgb, var(--danger-500) 40%, transparent); }
.admin-actions { display:flex; gap:6px; flex-wrap:wrap; }
/* Les boutons d'action tintés (.btn-primary : EXIF, Modifier, Accès…) gardent
   leur survol cyan tinté + néon, comme « Nouveau ». Seuls les .btn neutres
   restants (s'il en reste) prennent l'aplat cyan ; le danger reste rouge. */
.admin-actions .btn:not(.btn-danger):not(.btn-primary):hover {
  background:var(--accent-500);
  border-color:var(--accent-500);
  color:var(--fg-on-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-500) 28%, transparent);
}
/* Bouton × (suppression) : croix plus grosse et bien centrée */
.admin-actions .btn-danger {
  font-size:27px;
  line-height:1;
  padding-top:1px;
  padding-bottom:1px;
}

/* ─── Envoyer Photos (upload utilisateur) ────────────────────────── */
.upload-card { padding:24px; display:flex; flex-direction:column; gap:18px; }
.upload-dropzone {
  border:2px dashed var(--border-3); border-radius:var(--radius-md);
  background:var(--bg-inset, var(--bg-3));
  padding:36px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:all var(--transition);
}
.upload-dropzone.dragover {
  border-color:var(--accent-500);
  background:var(--accent-soft);
}
.upload-drop-icon { color:var(--accent-400); opacity:.9; }
.upload-drop-title { font-weight:var(--fw-medium); color:var(--fg-1); }
.upload-drop-sub { color:var(--fg-2); font-size:13px; }
.upload-drop-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

.upload-list { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow:auto; }
.upload-list:empty { display:none; }
.upload-item {
  display:flex; align-items:center; gap:12px;
  padding:8px 12px; border:1px solid var(--border-2); border-radius:var(--radius-md);
  background:var(--bg-3);
}
.upload-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.upload-item-size { flex-shrink:0; }
.upload-item-x {
  flex-shrink:0; width:24px; height:24px; border-radius:6px;
  border:1px solid transparent; background:transparent; color:var(--fg-2);
  font-size:18px; line-height:1; cursor:pointer; transition:all var(--transition);
}
.upload-item-x:hover { background:var(--danger-soft); color:var(--danger-500); }

.upload-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* Popup de progression */
.upload-prog-wrap { display:flex; align-items:center; gap:12px; margin:18px 0 10px; }
.upload-prog-bar {
  flex:1; height:10px; border-radius:999px; overflow:hidden;
  background:var(--bg-inset, var(--bg-3)); border:1px solid var(--border-2);
}
.upload-prog-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent-600), var(--accent-400));
  border-radius:999px; transition:width .2s ease;
}
.upload-prog-pct { min-width:48px; text-align:right; font-variant-numeric:tabular-nums; color:var(--fg-1); font-weight:var(--fw-medium); }
.upload-prog-info { text-align:center; }

/* ─── Stats ──────────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; margin-bottom:28px; }
/* Cartes KPI — même effet que le tableau de bord MotsClés : dégradé slate,
   hairline cyan révélée + léger soulèvement au survol. Surcharge .glass. */
.stat-card {
  position:relative; overflow:hidden; padding:18px 18px 16px;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-inset));
  border:1px solid var(--border-1); border-radius:var(--radius-lg);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.stat-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-500), transparent);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.stat-card:hover { transform:translateY(-3px); border-color:var(--border-3); box-shadow:var(--shadow-2); }
.stat-card:hover::before { opacity:.75; }
.stat-val {
  font-size:2.1rem; font-weight:var(--fw-bold); line-height:1;
  color:var(--accent-400); letter-spacing:var(--tracking-tight);
  font-variant-numeric:tabular-nums;
  text-shadow:var(--neon-cyan-text);
}
.stat-label { font-size:10px; color:var(--fg-3); margin-top:10px; font-weight:var(--fw-medium); text-transform:uppercase; letter-spacing:var(--tracking-wider); }

/* ─── Navigateur NAS ─────────────────────────────────────────────── */
.nas-breadcrumb { display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:16px; font-size:14px; }
.nas-crumb { color:var(--accent-400); cursor:pointer; padding:2px 6px; border-radius:var(--radius-sm); transition:background var(--transition); }
.nas-crumb:hover { background:var(--bg-3); }
.nas-crumb-active { color:var(--fg-1); cursor:default; }
.nas-crumb-active:hover { background:none; }
.nas-crumb-sep { color:var(--fg-3); }
.rub-title {
  display:flex; align-items:center; gap:8px;
  font-size:15px; text-transform:uppercase; letter-spacing:var(--tracking-wider);
  color:var(--fg-2); margin:26px 0 14px;
}
.rub-title .ps-ic { width:20px; height:20px; }
.rub-title .num { color:var(--fg-1); font-weight:var(--fw-semibold); }
.nas-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(173px, 1fr)); gap:10px; }
.nas-item {
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px;
  background:var(--bg-2); border:1px solid var(--border-1); border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition); text-align:center;
}
/* Survol façon bouton « Nouveau » : fond cyan tinté + bord accent + néon doux. */
.nas-item { transition:background var(--transition), border-color var(--transition), box-shadow var(--transition); }
.nas-item:hover { background:var(--accent-soft); border-color:var(--accent-500); box-shadow:var(--neon-cyan-sm); }
.nas-item:hover .nas-item-name { color:var(--accent-300); }
.nas-item-icon { font-size:3.6rem; color:var(--fg-3); display:flex; }
.nas-item-name { font-size:12px; line-height:1.35; color:var(--fg-2); word-break:break-all; max-width:100%; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* Vignette NAS = même effet que les cartes d'album : zoom interne clippé au survol.
   Le wrapper masque le débordement, seul l'<img> zoome (scale 1.25) — la carte ne bouge pas. */
.nas-thumb-wrap {
  width:100%; aspect-ratio:1; overflow:hidden;
  border-radius:var(--radius-sm); background:var(--bg-inset);
}
.nas-thumb {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 600ms var(--ease-out), filter var(--dur-base) var(--ease-out);
  will-change:transform;
}
.nas-file:hover .nas-thumb { transform:scale(1.25); filter:brightness(1.08) saturate(1.1); }
.nas-folder .nas-item-name { color:var(--fg-1); font-weight:var(--fw-medium); }

/* Fichier = vignette pleine largeur + légende alignée à gauche (nom mono + taille). */
.nas-file { padding:0; gap:0; overflow:hidden; }
.nas-file-caption { width:100%; padding:8px 10px 10px; text-align:left; }
.nas-file-name {
  font-family:var(--font-code); font-size:10px; color:var(--fg-2); letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nas-file-size { font-family:var(--font-code); font-size:10px; color:var(--fg-3); }

/* Bouton flottant « importer / ajouter » — révélé au survol de la tuile. */
.nas-import {
  position:absolute; top:8px; right:8px; z-index:3;
  width:30px; height:30px; display:grid; place-items:center;
  border:none; border-radius:var(--radius-full); cursor:pointer;
  background:var(--accent-500); color:#fff;
  opacity:0; transform:scale(.85);
  transition:opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.nas-import .ps-ic { width:16px; height:16px; }
.nas-item:hover .nas-import { opacity:1; transform:scale(1); box-shadow:var(--neon-cyan); }
.nas-import:hover { background:var(--accent-400); }

/* En-tête de l'onglet : sur-titre + titre + actions à droite. */
.nas-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.nas-kicker { font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-widest); color:var(--accent-400); margin-bottom:6px; }
.nas-title { font-size:26px; font-weight:var(--fw-semibold); letter-spacing:-0.02em; color:var(--fg-1); }
.nas-header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ─── Dialog ─────────────────────────────────────────────────────── */
.dialog-backdrop {
  position:fixed; inset:0; z-index:600; background:rgba(5,5,5,.72);
  backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
  padding:24px; animation:fade-in .15s ease;
}
.dialog { width:min(480px, 100%); padding:28px; animation:zoom-in .2s var(--ease-out); }
.dialog-title { font-size:1.05rem; font-weight:var(--fw-semibold); margin-bottom:20px; }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }

/* ─── Empty state ────────────────────────────────────────────────── */
.empty { text-align:center; padding:64px 24px; color:var(--fg-3); }
.empty-icon { font-size:2.6rem; margin-bottom:16px; color:var(--slate-600); display:flex; justify-content:center; }
.empty-bang {
  display:inline-grid; place-items:center; width:1em; height:1em;
  border:2px solid var(--warning-500); border-radius:var(--radius-full);
  color:var(--warning-500); font-weight:var(--fw-bold); font-size:.7em; line-height:1;
}
.empty-title { font-size:1rem; font-weight:var(--fw-medium); color:var(--fg-2); margin-bottom:6px; }
.empty-sub { font-size:13px; }

/* ─── Toast ──────────────────────────────────────────────────────── */
#toast-root { position:fixed; bottom:24px; right:24px; z-index:9000; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.toast {
  padding:12px 18px; border-radius:var(--radius-md);
  background:var(--bg-2); border:1px solid var(--border-2);
  backdrop-filter:var(--blur); box-shadow:var(--shadow-3);
  font-size:13px; font-weight:var(--fw-medium); max-width:340px;
  animation:toast-in .3s var(--ease-out); display:flex; align-items:center; gap:10px;
}
.toast > span:first-child { font-weight:var(--fw-bold); }
@keyframes toast-in { from { opacity:0; transform:translateX(16px); } }
.toast.toast-success { border-color:color-mix(in srgb, var(--success-500) 45%, transparent); color:var(--success-500); }
.toast.toast-error   { border-color:color-mix(in srgb, var(--danger-500) 45%, transparent);  color:var(--danger-500); }
.toast.toast-info    { border-color:color-mix(in srgb, var(--accent-500) 45%, transparent);  color:var(--accent-300); }
.toast.hiding { animation:toast-out .25s ease forwards; }
@keyframes toast-out { to { opacity:0; transform:translateX(16px); } }

/* ─── Loader ─────────────────────────────────────────────────────── */
.loader { display:flex; align-items:center; justify-content:center; padding:48px; }
.loader-ring { width:38px; height:38px; border:2px solid var(--border-2); border-top-color:var(--accent-500); border-radius:50%; animation:spin .9s linear infinite; }

/* ─── transitions.dev — skeleton loaders (14, adapté pleine page) ─── */
/* Tuiles-fantôme pulsées affichées pendant le fetch ; remplacées par
   la vraie grille (.grid-in) à l'arrivée des données. */
.ps-skel { background:linear-gradient(90deg,var(--bg-3),var(--bg-2)); border-radius:var(--radius-md,8px); }
.ps-skel-grid > * { animation:ps-skel-pulse var(--sk-pulse-dur) ease-in-out infinite; }
/* Grille dédiée au skeleton photos (la vraie .photos-grid est un flex justifié par JS). */
.ps-skel-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.ps-skel-card { display:flex; flex-direction:column; gap:10px; }
.ps-skel-card .ps-skel-cover { aspect-ratio:4/3; width:100%; }
.ps-skel-card .ps-skel-line { height:12px; width:70%; }
.ps-skel-card .ps-skel-line.sm { height:10px; width:42%; }
.ps-skel-tile { aspect-ratio:3/2; width:100%; }
@keyframes ps-skel-pulse { 0%,100% { opacity:1; } 50% { opacity:var(--sk-pulse-min); } }

/* ─── transitions.dev — error state shake (12) ──────────────────── */
/* On n'utilise ici que le segment « shake » du snippet : le visuel
   d'erreur (texte/bordure) est déjà géré par .form-error de l'app. */
.t-shake { will-change:transform; }
.t-shake.is-shaking {
  animation:t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0%      { transform:translateX(0);                                 animation-timing-function:var(--shake-ease); }
  28.57%  { transform:translateX(var(--shake-distance));             animation-timing-function:var(--shake-ease); }
  57.14%  { transform:translateX(calc(var(--shake-distance) * -1));  animation-timing-function:var(--shake-ease); }
  78.57%  { transform:translateX(var(--shake-overshoot));            animation-timing-function:var(--shake-ease); }
  100%    { transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-skel-grid > * { animation:none !important; }
  .t-shake.is-shaking { animation:none !important; transform:none !important; }
}

/* ─── transitions.dev — tabs sliding (16, adapté en filet) ───────── */
/* Le snippet dessine une pastille pleine sur barre grise ; la nav admin
   marque l'onglet actif par un filet sous le libellé. On garde le
   mécanisme du snippet (transform + width écrits en JS, tween en CSS)
   et on retaille la pastille en filet pour ne pas toucher au design. */
.admin-nav-h { position:relative; }
.t-tabs-pill {
  position:absolute; left:0; bottom:6px; height:2px; width:0;
  background:var(--accent-500); border-radius:2px;
  transform:translateX(0);
  transition:transform var(--tabs-dur) var(--tabs-ease),
             width     var(--tabs-dur) var(--tabs-ease);
  will-change:transform, width; z-index:0; pointer-events:none;
}
.admin-nav-h .admin-nav-item { transition:color var(--tabs-dur) var(--tabs-ease); }
/* Le filet actif est désormais porté par .t-tabs-pill, qui glisse : on
   retire l'inset box-shadow, qui sautait d'un onglet à l'autre. */
.admin-nav-h .admin-nav-item.active { box-shadow:none; }
@media (prefers-reduced-motion: reduce) {
  .t-tabs-pill, .admin-nav-h .admin-nav-item { transition:none !important; }
}

/* ─── kbd ────────────────────────────────────────────────────────── */
.kbd { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:var(--radius-sm); background:var(--bg-inset); border:1px solid var(--border-2); font-size:11px; color:var(--fg-3); }

/* ─── Utilitaires ────────────────────────────────────────────────── */
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.mt-2 { margin-top:8px; }
.mt-4 { margin-top:16px; }
.text-sm { font-size:13px; }
.text-xs { font-size:11px; }
.text-muted { color:var(--fg-2); }
.text-danger { color:var(--danger-500); }
.text-accent { color:var(--accent-400); }
.w-full { width:100%; }
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ─── Animations d'entrée de grille (discrètes) ──────────────────── */
.fade-in { animation:fade-in .35s ease; }
.grid-in > * { animation:grid-item-in .4s var(--ease-out) backwards; }
.grid-in > *:nth-child(1) { animation-delay:0ms; }
.grid-in > *:nth-child(2) { animation-delay:30ms; }
.grid-in > *:nth-child(3) { animation-delay:60ms; }
.grid-in > *:nth-child(4) { animation-delay:90ms; }
.grid-in > *:nth-child(5) { animation-delay:120ms; }
.grid-in > *:nth-child(6) { animation-delay:150ms; }
.grid-in > *:nth-child(n+7) { animation-delay:180ms; }
@keyframes grid-item-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ─── Fondu entre pages ──────────────────────────────────────────────
   Chaque page apparaît en fondu ; la page sortante s'efface (is-leaving)
   avant le remplacement du DOM. Crossfade simple et propre. */
.page { animation:page-fade-in var(--dur-base) var(--ease-out) both; }
.page.is-leaving { animation:page-fade-out 180ms var(--ease-out) both; }
@keyframes page-fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes page-fade-out { from { opacity:1; } to { opacity:0; } }

/* ─── Éclatement des cartes albums (ouverture d'un album) ─────────────
   Au clic, chaque carte fuit du centre de l'écran vers son bord (vecteur
   --ex/--ey) en tournant et en s'effaçant, puis la vue album recompose ses
   photos depuis l'extérieur (revealPhotos) = mouvement inverse continu.
   Sortie en ease-in (accélère, projeté). */
.album-card.is-exploding {
  animation:album-explode 540ms cubic-bezier(.5,0,.75,0) both;
  animation-delay:var(--ed, 0ms);
  z-index:30;
}
@keyframes album-explode {
  to { opacity:0; transform:translate(var(--ex,0), var(--ey,0)) rotate(var(--er,0)) scale(.55); }
}
@media (prefers-reduced-motion:reduce) { .album-card.is-exploding { animation:none; } }

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ─── Responsive ─────────────────────────────────────────────────── */
/* La mosaïque justifiée (.photos-grid flex) s'adapte seule : la largeur du
   conteneur diminue → moins de vignettes par rangée (cf. justifyGallery dans app.js). */
@media (max-width:480px)  {
  .albums-grid { grid-template-columns:1fr 1fr; }
  .container { width:calc(100% - 32px); }
  .modal-photo { grid-template-columns:1fr; }
}

/* ─── Barre de navigation mobile (bas, verre dépoli) ─────────────── */
.mobile-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  display:none; justify-content:space-around; align-items:center;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background:rgba(13,13,13,.92);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border-top:1px solid var(--border-1);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.mobile-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:64px; padding:7px 12px; border-radius:var(--radius-md);
  font-size:9px; font-weight:var(--fw-semibold);
  text-transform:uppercase; letter-spacing:var(--tracking-wider);
  color:var(--fg-3); transition:color var(--transition), background var(--transition);
}
.mobile-nav-item .ps-ic { width:20px; height:20px; }
.mobile-nav-item.active { color:var(--accent-300); background:var(--accent-soft); }
.mobile-nav-item:active { transform:scale(.92); }
@media (max-width:768px) {
  .mobile-nav { display:flex; }
  .page { padding-bottom:110px; }
  .nav-sub { display:none; }   /* le sous-menu du haut cède la place à la barre du bas */
}

/* ─── Admin : onglet Photos ──────────────────────────────────────── */
.admin-photos-section { margin-bottom:44px; }
.admin-photos-album-title { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border-1); }
.admin-photos-album-name { font-size:1rem; font-weight:var(--fw-semibold); color:var(--fg-1); cursor:pointer; transition:color var(--transition); }
.admin-photos-album-name:hover { color:var(--accent-400); }
.admin-photos-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:var(--space-6); }
.admin-photo-thumb {
  aspect-ratio:1; border-radius:var(--radius-xs); overflow:hidden; position:relative;
  cursor:pointer; background:var(--bg-0); will-change:transform;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.admin-photo-thumb:hover { transform:scale(1.02); z-index:2; box-shadow:var(--shadow-2); }
.admin-photo-thumb img { width:100%; height:100%; object-fit:cover; filter:brightness(.9); transition:filter var(--dur-base) var(--ease-out); }
.admin-photo-thumb:hover img { filter:brightness(1.04); }
/* Croix de suppression — même genre que le « × » rouge des albums (.btn-danger),
   en taille adaptée à la vignette (overlay, apparaît au survol). */
.admin-photo-del {
  position:absolute; top:6px; right:6px; width:24px; height:24px;
  border-radius:var(--radius-sm);
  background:rgba(255,43,76,.18); border:1px solid color-mix(in srgb, #FF2B4C 55%, transparent);
  color:#ff5e76; font-size:16px; font-weight:var(--fw-semibold); line-height:1;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--transition), background var(--transition),
                        border-color var(--transition), box-shadow var(--transition);
}
.admin-photo-thumb:hover .admin-photo-del { opacity:1; }
.admin-photo-del:hover { background:rgba(255,43,76,.30); border-color:#FF2B4C; color:#ff7d90; box-shadow:var(--neon-red-sm); }
.admin-select-mode .admin-photo-thumb .photo-select-cb { opacity:1; }
.admin-select-mode .admin-photo-thumb:hover .photo-select-cb { border-color:#fff; }
.admin-photo-thumb.selected .photo-select-cb { background:var(--accent-500); border-color:var(--accent-500); color:var(--fg-on-accent); }
.admin-photo-thumb.selected { box-shadow:0 0 0 2px var(--accent-500); }
.admin-select-mode .admin-photo-thumb:hover { transform:none; }
.admin-select-mode .admin-photo-thumb:hover img { filter:brightness(.9); }

/* ─── Sélection groupée (photos) ─────────────────────────────────── */
.photo-select-cb {
  position:absolute; top:8px; left:8px; z-index:3; width:22px; height:22px;
  border-radius:var(--radius-full); background:rgba(10,10,10,.6); border:2px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:var(--fw-bold);
  color:transparent; opacity:0;
  transition:opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  pointer-events:none;
}
.select-mode .photo-item .photo-select-cb { opacity:1; }
.select-mode .photo-item:hover .photo-select-cb { border-color:#fff; }
.photo-item.selected .photo-select-cb { background:var(--accent-500); border-color:var(--accent-500); color:var(--fg-on-accent); }
/* sélection : bordure accent ajoutée uniquement à l'état sélectionné (épouse le biseau clip-path) */
.photo-item.selected { border:2px solid var(--accent-500); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent-500) 55%, transparent)); }
.select-mode .photo-item { cursor:pointer; }
.select-mode .photo-item:hover { transform:none; }
.select-mode .photo-item:hover img { filter:brightness(.9); }
.select-mode .photo-item.selected:hover { border-color:var(--accent-500); }

/* ─── Barre de sélection (bas, verre dépoli) ─────────────────────── */
.select-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:400;
  background:rgba(13,13,13,.92); backdrop-filter:blur(16px) saturate(120%);
  border-top:1px solid var(--border-3); padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  animation:slide-up-bar .2s var(--ease-out);
}
@keyframes slide-up-bar { from { transform:translateY(100%); } }
#select-count, #ap-sel-count { font-size:13px; font-weight:var(--fw-medium); color:var(--fg-2); }

/* ─── Cases admin ────────────────────────────────────────────────── */
.admin-table input[type="checkbox"], .nas-item input[type="checkbox"] { width:16px; height:16px; cursor:pointer; accent-color:var(--accent-500); }
input[type="checkbox"] { accent-color:var(--accent-500); }

/* ─── Albums admin : grille de cartes (couverture + overlay actions) ── */
.admin-albums-selectall {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  font-size:12px; color:var(--fg-2); cursor:pointer; user-select:none;
}
.admin-albums-selectall input { width:16px; height:16px; cursor:pointer; accent-color:var(--accent-500); }
.admin-albums-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:var(--space-5);
}
.admin-album-card {
  background:var(--bg-1); border:1px solid var(--border-1); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; will-change:transform;
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.admin-album-card:hover {
  transform:translateY(-3px); border-color:var(--border-3); box-shadow:var(--shadow-3);
}
.admin-album-cover { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-0); }
.admin-album-cover img {
  width:100%; height:100%; object-fit:cover; filter:brightness(.92);
  transition:transform 600ms var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.admin-album-card:hover .admin-album-cover img { transform:scale(1.06); filter:brightness(1.02); }
.admin-album-empty {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--fg-disabled); font-size:34px; background:var(--bg-inset);
}

/* Case de sélection — coin haut-gauche, verre dépoli */
.admin-album-check {
  position:absolute; top:10px; left:10px; z-index:3; display:flex;
  width:26px; height:26px; border-radius:var(--radius-sm);
  background:rgba(10,10,10,.55); backdrop-filter:blur(6px);
  border:1px solid var(--border-3); align-items:center; justify-content:center; cursor:pointer;
}
.admin-album-check input { width:15px; height:15px; cursor:pointer; accent-color:var(--accent-500); margin:0; }

/* Compteur photos — coin haut-droit */
.admin-album-count {
  position:absolute; top:10px; right:10px; z-index:2;
  padding:3px 9px; border-radius:var(--radius-full);
  background:rgba(10,10,10,.6); backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb, var(--accent-500) 35%, transparent);
  color:var(--accent-300); font-size:10px; font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-wide);
}
.admin-album-count .num { font-family:var(--font-num); }

/* Statut public / privé — coin bas-gauche de la couverture */
.admin-album-status {
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--radius-md);
  font-size:10px; font-weight:var(--fw-semibold); letter-spacing:var(--tracking-wide);
  text-transform:uppercase; backdrop-filter:blur(6px);
}
.admin-album-status.is-public {
  background:var(--success-soft); color:var(--success-500);
  border:1px solid color-mix(in srgb, var(--success-500) 40%, transparent);
}
.admin-album-status.is-private {
  background:rgba(10,10,10,.55); color:var(--fg-2); border:1px solid var(--border-3);
}

/* Overlay d'actions — apparaît au survol de la carte */
.admin-album-overlay {
  position:absolute; inset:0; z-index:1; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(10,10,10,.78); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--dur-base) var(--ease-out);
}
.admin-album-card:hover .admin-album-overlay,
.admin-album-card:focus-within .admin-album-overlay { opacity:1; }
.admin-album-overlay .btn { min-width:150px; justify-content:center; }
@media (hover:none) { .admin-album-overlay { opacity:1; background:rgba(10,10,10,.35); backdrop-filter:none; justify-content:flex-end; padding:10px; gap:6px; } }

/* Corps de la carte — nom + chemin NAS + période */
.admin-album-body { padding:12px 14px; display:flex; flex-direction:column; gap:5px; }
.admin-album-name {
  font-size:14px; font-weight:var(--fw-semibold); color:var(--fg-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.admin-album-line {
  display:flex; align-items:center; gap:6px; min-width:0;
  font-size:11px; color:var(--fg-3);
}
.admin-album-path { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-album-period { font-family:var(--font-num); letter-spacing:.02em; }

/* Carte sélectionnée */
.admin-album-card:has(.album-check:checked) {
  border-color:var(--accent-500); box-shadow:0 0 0 1px var(--accent-500);
}
.admin-album-card:has(.album-check:checked) .admin-album-check {
  background:var(--accent-500); border-color:var(--accent-500);
}