/* ============================================================
   Nalo.art — feuille de style (site vitrine de peinture)
   Esthétique galerie : sobre, chaleureuse, place aux œuvres.
   ============================================================ */

:root {
  /* ---- Image de bannière utilisée en fond de site ---- */
  --banner: url("/image/IMG_1986.jpg");

  /* Bleu marine des cadres (vidéos + photos) */
  --frame: linear-gradient(160deg, #1a2b52, #0a142e);
  --frame-line: rgba(120, 160, 230, 0.35);

  /* Angles / typo / ombres : communs aux deux thèmes */
  --radius: 4px;          /* angles nets, esprit galerie */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* ============================================================
   THÈMES : clair (fond blanc) et sombre (fond noir)
   Choisi via le bouton ☀/🌙 — mémorisé dans le navigateur.
   ============================================================ */
/* Thème SOMBRE = valeur par défaut du site (fond quasi-noir bleuté). */
:root,
[data-theme="dark"] {
  --bg: #04060c;
  --bg-soft: #08091a;
  --panel: #0c1020;
  --ink: #ffffff;
  --ink-soft: #c0d0f5;
  --muted: #5a7098;
  --accent: #4a90e2;
  --accent-soft: #6aa9f0;
  --line: rgba(80, 130, 255, 0.18);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  --header-bg: rgba(4, 6, 12, 0.82);
  --veil: rgba(4, 6, 12, 0.78);
  /* Lueur néon blanche utilisée sur les titres et le texte fort */
  --glow: 0 0 8px rgba(255,255,255,0.9), 0 0 22px rgba(255,255,255,0.55), 0 0 50px rgba(80,160,255,0.35);
  --glow-sm: 0 0 5px rgba(255,255,255,0.8), 0 0 14px rgba(80,160,255,0.4);
}

/* Thème CLAIR (bouton soleil) : vrai fond blanc, texte sombre. */
[data-theme="light"] {
  --bg: #f5f7fc;          /* fond clair légèrement bleuté */
  --bg-soft: #ffffff;
  --panel: #ffffff;
  --ink: #0a1020;         /* texte sombre lisible sur blanc */
  --ink-soft: #33425f;
  --muted: #6a7690;
  --accent: #1f5fd6;
  --accent-soft: #2b6fe0;
  --line: rgba(20, 40, 90, 0.16);
  --shadow: 0 20px 50px rgba(20, 40, 90, 0.14);
  --header-bg: rgba(255, 255, 255, 0.88);
  --veil: rgba(255, 255, 255, 0.55);
  /* En clair, on remplace la lueur néon blanche par une ombre bleue discrète. */
  --glow: 0 1px 2px rgba(20,40,90,0.18), 0 0 18px rgba(31,95,214,0.18);
  --glow-sm: 0 1px 2px rgba(20,40,90,0.15);
}

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

/* ---------- Protection du contenu ----------
   On empêche la sélection de texte et le glisser-déposer des images
   sur tout le site. Les champs de saisie restent utilisables. */
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

html { scroll-behavior: smooth; }

/* ---------- Effets d'apparition au défilement ---------- */
/* Les éléments marqués .reveal démarrent légèrement décalés/transparents,
   puis remontent en fondu quand ils entrent dans l'écran (.is-visible). */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Respect des préférences d'accessibilité : pas d'animation si demandé. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Bannière fixée en fond de site, avec un voile (clair ou noir) par-dessus
   pour que le texte reste lisible dans les deux thèmes. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(var(--veil), var(--veil)), var(--banner) center / cover no-repeat;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   CURSEUR PERSONNALISÉ — logo Nalo (curser/nalo.png) qui suit la souris
   ============================================================ */
/* On masque le curseur système PARTOUT sur les appareils à souris fine.
   Le sélecteur universel + !important évite que le curseur système
   réapparaisse au survol d'éléments qui redéfinissent « cursor »
   (ex. .art-card { cursor: pointer }). */
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-body),
  body:not(.admin-body) * { cursor: none !important; }
}
/* Halo lumineux (l'anneau) derrière le logo, pour un rendu « néon ». */
.cursor-o {
  position: fixed;
  top: 0;
  left: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 70%);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  will-change: transform;
}
/* Le logo Nalo lui-même, collé à la souris. */
.cursor-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  height: auto;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  /* brightness(0) invert(1) : force le logo en BLANC ; + lueur blanche. */
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255,255,255,0.85));
  transition: width 0.18s ease, opacity 0.2s ease;
  will-change: transform;
}
/* Sur un élément cliquable : le logo grossit et le halo s'étend. */
.cursor-img.is-hovering { width: 156px; }
.cursor-o.is-hovering { width: 176px; height: 176px; }
/* Impact au clic. */
.cursor-img.is-down { width: 96px; }
/* Réduction des animations : le logo curseur reste affiché (il colle
   simplement à la souris, sans transitions animées) ; seul le halo/traîne
   est neutralisé côté JS. On ne restaure donc PAS le curseur système. */
@media (prefers-reduced-motion: reduce) {
  .cursor-img { transition: none; }
}

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(20px, 5vw, 64px);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
/* En défilement : légère ombre pour détacher l'en-tête du contenu. */
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.brand { display: inline-flex; align-items: center; }
.brand-logo {
  height: 72px;
  width: auto;
  display: block;
  transition: transform 0.25s ease, filter 0.25s ease;
}
/* Logo Nalo forcé en BLANC sur le site public (brightness(0) invert(1)). */
body:not(.admin-body) .brand-logo {
  filter: brightness(0) invert(1);
}
.brand:hover .brand-logo { transform: scale(1.05); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.nav a { font-size: 0.9rem; color: var(--ink-soft); letter-spacing: 0.4px; transition: color 0.2s, text-shadow 0.2s; }
.nav a:hover { color: #fff; text-shadow: var(--glow-sm); }
/* Soulignement animé au survol des liens de navigation (hors bouton admin) */
.nav a:not(.nav-admin) { position: relative; }
.nav a:not(.nav-admin)::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:not(.nav-admin):hover::before { transform: scaleX(1); }
.nav-admin {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--accent-soft) !important;
}
.nav-admin:hover { background: rgba(31, 95, 214, 0.12); }
.nav a.is-current { color: var(--accent); }
.nav a.is-current::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--accent);
  margin-top: 3px;
}

/* Bouton bascule thème (clair / sombre) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--accent-soft); border-color: var(--accent); }

/* Sélecteur de langue */
.lang-select {
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.lang-select:hover { color: var(--accent-soft); border-color: var(--accent); }
.lang-select:focus { outline: none; border-color: var(--accent); }
.lang-select option { background: var(--panel); color: var(--ink); }

/* ---------- Sens droite-à-gauche (arabe) ---------- */
[dir="rtl"] .nav { flex-direction: row-reverse; }
[dir="rtl"] .hero-location { direction: rtl; }
[dir="rtl"] .section-title::after { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.hero {
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(60px, 12vh, 140px) 20px;
  position: relative;
}
.hero-inner { max-width: 760px; }
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.8rem;
  color: var(--accent-soft);
  margin-bottom: 18px;
  text-shadow: var(--glow-sm);
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(3.2rem, 11vw, 7rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 22px;
  color: #fff;
  text-shadow: var(--glow);
}
/* Logo au centre du hero (remplace le grand titre texte) */
.hero-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(140px, 26vw, 300px);
  margin: 0 auto 22px;
}
/* Petites infos de présentation sous le logo du hero */
.hero-badges {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto 26px;
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  color: var(--ink-soft);
  letter-spacing: 0.3px;
}
.hero-badges li { line-height: 1.4; }
.hero-badges a {
  color: var(--accent);
  transition: color 0.2s ease;
}
.hero-badges a:hover { color: var(--accent-soft); }

/* Masque un élément visuellement tout en le gardant pour les lecteurs d'écran. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 34px;
}
.hero-location {
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  margin: -18px auto 30px;
}
.hero-location[hidden] { display: none; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Aperçu contact sur l'accueil */
.home-contact { text-align: center; }

.btn {
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-soft); box-shadow: 0 10px 30px rgba(31, 95, 214, 0.35); }
/* Reflet lumineux qui traverse le bouton au survol. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-primary:hover::after { left: 130%; }
.btn-ghost { border-color: var(--line); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-soft); }

/* ---------- Titres de section ---------- */
.section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  text-align: center;
  margin-bottom: 28px;
  position: relative;
  color: #fff;
  text-shadow: var(--glow);
}
.section-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--accent);
  margin: 14px auto 0;
  box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
}

section { padding: clamp(50px, 8vh, 90px) clamp(20px, 5vw, 64px); }

/* En-tête des pages secondaires (Vidéos, Contact) */
.page-head { text-align: center; padding-top: clamp(70px, 12vh, 130px); padding-bottom: 10px; }
.page-head .section-title { margin-bottom: 14px; }
.page-sub { color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 560px; margin: 0 auto; }

/* ---------- Filtres ---------- */
.filters { padding-bottom: 0; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filter-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent-soft); }
.filter-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }

/* ---------- Galerie (groupée par catégorie) ---------- */
.gallery-wrap { padding-top: 34px; }
.gallery { max-width: 1200px; margin: 0 auto; }

/* Un bloc par catégorie */
.cat-group { margin-bottom: 48px; }
.cat-group:last-child { margin-bottom: 0; }
.cat-group-title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 500;
  color: #fff;
  text-shadow: var(--glow-sm);
  margin: 0 0 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* Grille maçonnée à l'intérieur de chaque catégorie */
.cat-grid {
  columns: 3 280px;
  column-gap: 20px;
}
.art-card {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: 14px;
  overflow: hidden;
  /* Passe-partout bleu marine autour de la photo, comme les cadres vidéo. */
  padding: 12px;
  background: var(--frame);
  border: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}
.art-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); }
.art-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Cadre de l'image : liseré fin + coins arrondis, l'image zoome au survol
   (le débordement est masqué par overflow: hidden). */
.art-card .art-frame {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--frame-line);
}
.art-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.art-card:hover img { transform: scale(1.06); }
.art-cap {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.art-title { font-family: var(--serif); font-size: 1.25rem; color: #fff; text-shadow: var(--glow-sm); }
.art-desc { font-size: 0.85rem; color: var(--muted); }

/* ---------- Vidéos ---------- */
.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}
.video-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  width: 680px;
  max-width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.28);
  border-color: var(--accent);
}
/* Cadre média : la vidéo est posée dans un encadrement (passe-partout + liseré)
   pour un rendu « œuvre encadrée ». Le zoom au survol reste contenu. */
.video-media {
  position: relative;
  padding: 8px;
  background: var(--frame);
  border-radius: 18px 18px 0 0;
}
.video-media::after {
  /* Fin liseré intérieur pour souligner le cadre. */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--frame-line);
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}
.video-media > video,
.video-media > .video-embed {
  border-radius: 10px;
  overflow: hidden;
}
/* Vidéo en format paysage (16/9, façon écran d'ordinateur) */
.video-card video {
  width: 100%;
  display: block;
  background: #000;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* En plein écran, on annule le recadrage 9/16 : la vidéo garde ses vraies
   proportions et remplit l'écran sans être rognée ni déformée. */
video:fullscreen,
video:-webkit-full-screen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  transform: none;
  border-radius: 0;
}
.video-embed { position: relative; padding-top: 56.25%; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-meta { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.video-meta:empty { display: none; }
.video-title { font-family: var(--serif); font-size: 1.3rem; color: #fff; text-shadow: var(--glow-sm); }
.video-desc { font-size: 0.85rem; color: var(--muted); }

/* ---------- Contact ---------- */
.contact { text-align: center; }
/* ---------- Réseaux sociaux ---------- */
.socials { text-align: center; }
.social-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.social-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 220px;
  max-width: 100%;
  padding: 30px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
}
/* Halo coloré propre à chaque réseau (variable --sc posée en inline) */
.social-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--sc, var(--accent)) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.social-card > * { position: relative; z-index: 1; }
.social-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--sc, var(--accent));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.social-card:hover::before { opacity: 0.16; }
.social-ico {
  font-size: 2.4rem;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.social-card:hover .social-ico { transform: scale(1.2) rotate(-6deg); }
.social-name { font-family: var(--serif); font-size: 1.4rem; color: #fff; text-shadow: var(--glow-sm); }
.social-handle { font-size: 0.9rem; color: var(--muted); letter-spacing: 0.3px; }

.contact-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.contact-chip {
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 16px 34px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #fff;
  background: rgba(31, 95, 214, 0.16);
  text-shadow: var(--glow-sm);
  transition: all 0.2s;
}
.contact-chip:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(31, 95, 214, 0.3);
  transform: translateY(-2px);
}

.empty-state { text-align: center; color: var(--muted); font-style: italic; padding: 20px; }

/* ---------- Pied de page ---------- */
.site-footer {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 18, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox-stage { max-width: 90vw; max-height: 82vh; display: flex; }
.lightbox-stage img { max-width: 90vw; max-height: 82vh; border-radius: 8px; box-shadow: var(--shadow); }
.lightbox-close {
  position: absolute; top: 20px; right: 28px;
  background: none; border: none; color: var(--ink);
  font-size: 2.6rem; line-height: 1; cursor: pointer; opacity: 0.8;
}
.lightbox-close:hover { opacity: 1; color: var(--accent-soft); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  color: var(--ink); font-size: 2rem; width: 54px; height: 54px;
  border-radius: 50%; cursor: pointer; transition: background 0.2s;
}
.lightbox-nav:hover { background: rgba(74, 144, 226, 0.25); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-caption {
  position: absolute; bottom: 28px; left: 0; right: 0;
  text-align: center; color: var(--ink-soft); display: flex;
  flex-direction: column; gap: 4px; padding: 0 20px;
}
.lightbox-caption strong { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; gap: 10px; padding: 14px 18px; }
  .nav { gap: 10px 14px; flex-wrap: wrap; justify-content: flex-end; }
  .nav a { font-size: 0.82rem; }
  .cat-grid { columns: 1; }
  .lightbox-nav { width: 44px; height: 44px; font-size: 1.5rem; }
}

/* ============================================================
   ESPACE ADMIN — Direction artistique "Rockstar"
   Fond noir, jaune signature, capitales grasses, angles nets.
   Scopé sous .rk / .admin-body pour ne pas toucher le site public.
   ============================================================ */
.admin-body.rk {
  --rk-black: #04060c;
  --rk-panel: #0a0f1c;
  --rk-card: #0e1524;
  --rk-line: rgba(80, 130, 255, 0.20);
  --rk-line-soft: rgba(80, 130, 255, 0.35);
  --rk-yellow: #4a90e2;          /* accent bleu (nom conservé pour limiter les changements) */
  --rk-yellow-hi: #6aa9f0;
  --rk-ink: #ffffff;
  --rk-muted: #6a80a8;
  --rk-sans: "Inter", system-ui, -apple-system, sans-serif;
  --rk-round: 14px;              /* rayon des grandes surfaces */
  --rk-round-sm: 10px;           /* rayon des champs / boutons */
  background: var(--rk-black);
  color: var(--rk-ink);
  font-family: var(--rk-sans);
}
.admin-body.rk .brand-dot { color: var(--rk-yellow); }
.rk-star { color: var(--rk-yellow); display: inline-block; }
/* Logo « NALO.ART » de la barre latérale admin forcé en BLANC. */
.rk-brand, .rk-brand .brand-dot, .rk-brand .rk-star { color: #fff; }

/* ---------- Écran de connexion ---------- */
.admin-body.rk .login-card {
  max-width: 400px; margin: 14vh auto; background: var(--rk-panel);
  border: 1px solid var(--rk-line); border-radius: var(--rk-round);
  padding: 44px 34px; text-align: center; position: relative; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(80,130,255,0.05);
}
.admin-body.rk .login-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--rk-yellow), var(--rk-yellow-hi));
}
.admin-body.rk .login-card .rk-star { font-size: 1.8rem; margin-bottom: 8px; }
.admin-body.rk .login-card h1 {
  font-family: var(--rk-sans); font-weight: 900; font-size: 1.9rem;
  letter-spacing: 2px; margin-bottom: 4px;
}
.admin-body.rk .login-card p {
  color: var(--rk-muted); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 3px; margin-bottom: 26px;
}

/* ---------- Mise en page : sidebar + contenu ---------- */
.rk-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.rk-side {
  background: var(--rk-panel); border-right: 1px solid var(--rk-line);
  padding: 26px 18px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}
.rk-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 1.25rem; letter-spacing: 1.5px; padding: 0 6px 18px;
  border-bottom: 1px solid var(--rk-line);
}
.rk-brand .rk-star { font-size: 1.3rem; }

.rk-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rk-nav-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; border-left: 3px solid transparent;
  color: var(--rk-muted); font-family: var(--rk-sans); font-weight: 700;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1.2px;
  padding: 13px 14px; cursor: pointer; text-align: left; transition: color 0.15s, background 0.15s;
}
.rk-nav-btn .rk-nav-ico { font-size: 0.9rem; width: 16px; text-align: center; }
.rk-nav-btn:hover { color: var(--rk-ink); background: rgba(255,255,255,0.03); }
.rk-nav-btn.is-active {
  color: #fff; background: linear-gradient(135deg, var(--rk-yellow), rgba(74,144,226,0.55));
  border-left-color: var(--rk-yellow-hi); border-radius: 0 var(--rk-round-sm) var(--rk-round-sm) 0;
  box-shadow: 0 6px 20px rgba(74,144,226,0.25);
}
.rk-count {
  margin-left: auto; background: rgba(0,0,0,0.25); color: inherit;
  font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; font-weight: 800;
}
.rk-nav-btn:not(.is-active) .rk-count { background: var(--rk-card); color: var(--rk-muted); }

.rk-side-foot { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Contenu principal ---------- */
.rk-main { padding: 34px clamp(20px, 4vw, 48px) 80px; max-width: 1100px; }
.rk-panel { display: none; animation: rkFade 0.25s ease; }
.rk-panel.is-active { display: block; }
@keyframes rkFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.rk-head { margin-bottom: 24px; }
.rk-head h2 {
  font-family: var(--rk-sans); font-weight: 900; font-size: 1.9rem;
  text-transform: uppercase; letter-spacing: 1px; line-height: 1.1;
}
.rk-head h2 .rk-total { color: var(--rk-yellow); }
.rk-head-sub { color: var(--rk-muted); font-size: 0.85rem; margin-top: 6px; }

.rk-card {
  background: var(--rk-card); border: 1px solid var(--rk-line);
  border-radius: var(--rk-round); padding: 26px; position: relative; overflow: hidden;
}
.rk-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--rk-yellow), transparent);
}

/* ---------- Champs (dans l'admin Rockstar) ---------- */
.admin-body.rk .field label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--rk-muted); margin-bottom: 7px;
}
.admin-body.rk .input,
.admin-body.rk .textarea {
  background: var(--rk-black); border: 1px solid var(--rk-line);
  color: var(--rk-ink); border-radius: var(--rk-round-sm); padding: 12px 14px; font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-body.rk .input:focus,
.admin-body.rk .textarea:focus { outline: none; border-color: var(--rk-yellow); box-shadow: 0 0 0 3px rgba(74,144,226,0.15); }

/* ---------- Boutons (Rockstar) ---------- */
.admin-body.rk .btn {
  border-radius: 999px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; font-size: 0.8rem; padding: 12px 22px;
}
.admin-body.rk .btn-primary {
  background: var(--rk-yellow); color: #fff; border: 1px solid var(--rk-yellow);
}
.admin-body.rk .btn-primary:hover { background: var(--rk-yellow-hi); box-shadow: 0 10px 30px rgba(74,144,226,0.4); }
.admin-body.rk .btn-primary::after { display: none; }
.admin-body.rk .btn-ghost {
  background: transparent; border: 1px solid var(--rk-line); color: var(--rk-ink);
}
.admin-body.rk .btn-ghost:hover { border-color: var(--rk-yellow); color: var(--rk-yellow); }

.admin-body.rk .msg { font-size: 0.85rem; margin-top: 12px; min-height: 18px; }
.admin-body.rk .msg.error { color: #ff6b57; }
.admin-body.rk .msg.ok { color: var(--rk-yellow); }

/* ---------- Zone d'ajout ---------- */
.admin-body.rk .uploader { border: none; padding: 0; margin: 0; background: transparent; }
.admin-body.rk .upload-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-body.rk .tab-btn {
  background: var(--rk-black); border: 1px solid var(--rk-line); color: var(--rk-muted);
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: var(--rk-sans); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.8px; transition: all 0.18s;
}
.admin-body.rk .tab-btn.is-active { background: var(--rk-yellow); color: #fff; border-color: var(--rk-yellow); }
.admin-body.rk .progress { height: 6px; background: var(--rk-black); border-radius: 999px; overflow: hidden; margin-top: 14px; }
.admin-body.rk .progress[hidden] { display: none; }
.admin-body.rk .progress-bar { height: 100%; width: 0; background: var(--rk-yellow); transition: width 0.15s; }

/* ---------- Filtres de catégories ---------- */
.rk-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.rk-chip {
  background: var(--rk-card); border: 1px solid var(--rk-line); color: var(--rk-muted);
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  font-family: var(--rk-sans); font-weight: 700; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.8px; transition: all 0.15s;
}
.rk-chip:hover { color: var(--rk-ink); border-color: var(--rk-yellow); }
.rk-chip.is-active { background: var(--rk-yellow); color: #fff; border-color: var(--rk-yellow); box-shadow: 0 6px 18px rgba(74,144,226,0.3); }
.rk-chip .rk-chip-count { opacity: 0.7; margin-left: 5px; }

/* ---------- Groupes par catégorie ---------- */
.cat-groups { display: flex; flex-direction: column; gap: 34px; }
.cat-group { }
.cat-group.is-hidden { display: none; }
.cat-group-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rk-line);
}
.cat-group-head h3 {
  font-family: var(--rk-sans); font-weight: 900; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--rk-ink);
}
.cat-group-head .rk-star { font-size: 0.85rem; }
.cat-group-head .cat-group-count { color: var(--rk-muted); font-size: 0.8rem; font-weight: 700; }

/* ---------- Liste des œuvres (admin Rockstar) ---------- */
.admin-body.rk .item-list { display: flex; flex-direction: column; gap: 10px; }
.admin-body.rk .item-row {
  display: grid; grid-template-columns: 24px 90px 1fr auto; gap: 14px; align-items: center;
  background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-round-sm); padding: 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.admin-body.rk .item-row:hover { border-color: var(--rk-line-soft); transform: translateX(4px); box-shadow: -4px 0 0 var(--rk-yellow); }
.admin-body.rk .item-row.dragging { opacity: 0.45; border-color: var(--rk-yellow); }
.admin-body.rk .item-drag { cursor: grab; color: var(--rk-muted); font-size: 1.3rem; text-align: center; }
.admin-body.rk .item-drag:active { cursor: grabbing; }
.admin-body.rk .item-thumb { width: 90px; height: 70px; border-radius: 8px; overflow: hidden; background: var(--rk-black); display: grid; place-items: center; position: relative; }
.admin-body.rk .item-thumb img, .admin-body.rk .item-thumb video { width: 100%; height: 100%; object-fit: cover; }
.admin-body.rk .thumb-badge { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.4rem; color: var(--rk-yellow); pointer-events: none; }
.admin-body.rk .thumb-badge.embed { position: static; font-size: 1.8rem; }
.admin-body.rk .item-info { display: flex; flex-direction: column; gap: 8px; }
.admin-body.rk .item-info .item-field {
  background: var(--rk-black); border: 1px solid var(--rk-line); color: var(--rk-ink);
  border-radius: 8px; padding: 8px 10px; font-family: var(--rk-sans); font-size: 0.85rem; width: 100%;
}
.admin-body.rk .item-info .item-field:focus { outline: none; border-color: var(--rk-yellow); box-shadow: 0 0 0 3px rgba(74,144,226,0.15); }
.admin-body.rk .item-info textarea.item-field { resize: vertical; min-height: 48px; }
.admin-body.rk .type-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--rk-yellow); font-weight: 800; }
.admin-body.rk .item-actions { display: flex; flex-direction: column; gap: 8px; align-self: start; }
.admin-body.rk .btn-danger {
  background: transparent; border: 1px solid var(--rk-line); color: var(--rk-muted);
  border-radius: 999px; padding: 8px 14px; cursor: pointer; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; white-space: nowrap; align-self: start;
}
.admin-body.rk .btn-danger:hover { border-color: #ff6b57; color: #ff6b57; }
.admin-body.rk .replace-label {
  display: inline-block; align-self: start; font-size: 0.72rem; color: var(--rk-muted);
  border: 1px dashed var(--rk-line); border-radius: 999px; padding: 6px 12px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.8px; transition: border-color 0.2s, color 0.2s;
}
.admin-body.rk .replace-label:hover { border-color: var(--rk-yellow); color: var(--rk-yellow); }
.admin-body.rk .item-msg { font-size: 0.78rem; }
.admin-body.rk .item-msg.ok { color: var(--rk-yellow); }
.admin-body.rk .item-msg.error { color: #ff6b57; }
.admin-body.rk .item-msg[hidden] { display: none; }
.admin-body.rk .empty-state { color: var(--rk-muted); font-size: 0.9rem; padding: 20px 0; }

/* ---------- Responsive admin ---------- */
@media (max-width: 860px) {
  .rk-layout { grid-template-columns: 1fr; }
  .rk-side {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 12px; padding: 16px;
  }
  .rk-brand { border-bottom: none; padding: 0; flex: 1; }
  .rk-nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; gap: 6px; }
  .rk-nav-btn { width: auto; border-left: none; border-bottom: 3px solid transparent; padding: 10px 12px; }
  .rk-nav-btn.is-active { border-left: none; border-bottom-color: var(--rk-yellow-hi); }
  .rk-side-foot { flex-direction: row; }
}
@media (max-width: 560px) {
  .admin-body.rk .item-row { grid-template-columns: 24px 1fr; }
  .admin-body.rk .item-thumb { width: 100%; height: 160px; grid-column: 1 / -1; }
  .admin-body.rk .item-info { grid-column: 1 / -1; }
  .admin-body.rk .item-actions { grid-column: 1 / -1; flex-direction: row; }
}

/* ============================================================
   SITE PUBLIC — Direction artistique "Rockstar" (accent bleu conservé)
   Typo grasse en capitales, motif étoile, effets & animations.
   Tout est scopé sur body:not(.admin-body) → l'admin n'est pas touché.
   ============================================================ */
body:not(.admin-body) {
  /* Toutes les écritures du site public passent en BLANC NÉON.
     On neutralise les gris (ink-soft / muted) en blanc et on ajoute
     une lueur néon sur le texte courant. */
  --ink: #ffffff;
  --ink-soft: #ffffff;
  --muted: #ffffff;
  --neon: 0 0 4px rgba(255,255,255,0.85), 0 0 12px rgba(120,180,255,0.55), 0 0 24px rgba(80,150,255,0.3);
  color: #fff;
}
/* Le texte courant du site public : blanc + lueur néon. */
body:not(.admin-body) .nav a,
body:not(.admin-body) .hero-kicker,
body:not(.admin-body) .hero-sub,
body:not(.admin-body) .hero-location,
body:not(.admin-body) .hero-badges,
body:not(.admin-body) .hero-badges a,
body:not(.admin-body) .page-sub,
body:not(.admin-body) .art-desc,
body:not(.admin-body) .video-desc,
body:not(.admin-body) .social-handle,
body:not(.admin-body) .contact-chip,
body:not(.admin-body) .filter-btn,
body:not(.admin-body) .lang-select,
body:not(.admin-body) .theme-toggle,
body:not(.admin-body) .site-footer,
body:not(.admin-body) .empty-state,
body:not(.admin-body) .lightbox-caption {
  color: #fff;
  text-shadow: var(--neon);
}
/* Le texte des boutons pleins reste net (déjà sur fond coloré). */
body:not(.admin-body) .btn-primary { text-shadow: none; }

/* ============================================================
   THÈME CLAIR (bouton soleil) — on ANNULE le "tout blanc" du site
   public, sinon le texte et les logos blancs seraient invisibles sur
   le fond blanc. Texte sombre, sans lueur néon, logos en noir.
   ============================================================ */
[data-theme="light"] body:not(.admin-body) {
  --ink: #0a1020;
  --ink-soft: #33425f;
  --muted: #6a7690;
  --neon: none;
  color: var(--ink);
}
[data-theme="light"] body:not(.admin-body) .nav a,
[data-theme="light"] body:not(.admin-body) .hero-kicker,
[data-theme="light"] body:not(.admin-body) .hero-sub,
[data-theme="light"] body:not(.admin-body) .hero-location,
[data-theme="light"] body:not(.admin-body) .hero-badges,
[data-theme="light"] body:not(.admin-body) .hero-badges a,
[data-theme="light"] body:not(.admin-body) .page-sub,
[data-theme="light"] body:not(.admin-body) .art-desc,
[data-theme="light"] body:not(.admin-body) .video-desc,
[data-theme="light"] body:not(.admin-body) .social-handle,
[data-theme="light"] body:not(.admin-body) .contact-chip,
[data-theme="light"] body:not(.admin-body) .filter-btn,
[data-theme="light"] body:not(.admin-body) .lang-select,
[data-theme="light"] body:not(.admin-body) .theme-toggle,
[data-theme="light"] body:not(.admin-body) .site-footer,
[data-theme="light"] body:not(.admin-body) .empty-state,
[data-theme="light"] body:not(.admin-body) .lightbox-caption {
  color: var(--ink-soft);
  text-shadow: none;
}
/* Titres forts (blancs + néon) : passent en sombre sans lueur. */
[data-theme="light"] body:not(.admin-body) .nav a:hover,
[data-theme="light"] body:not(.admin-body) .section-title,
[data-theme="light"] body:not(.admin-body) .art-title,
[data-theme="light"] body:not(.admin-body) .video-title,
[data-theme="light"] body:not(.admin-body) .social-name,
[data-theme="light"] body:not(.admin-body) .lightbox-caption strong {
  color: var(--ink);
  text-shadow: none;
}
/* Logos : en clair on les remet en NOIR (sinon blanc sur blanc). */
[data-theme="light"] body:not(.admin-body) .brand-logo { filter: none; }
[data-theme="light"] body:not(.admin-body) .hero-logo {
  filter: drop-shadow(0 12px 40px rgba(31,95,214,0.25));
}
/* Curseur personnalisé : forcé en NOIR sur fond clair pour rester visible. */
[data-theme="light"] .cursor-img {
  filter: brightness(0) drop-shadow(0 0 10px rgba(31,95,214,0.45));
}

/* --- Texture globale : grain + fines lignes de balayage, très discrets --- */
body:not(.admin-body)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 0%, rgba(31,95,214,0.18), transparent 60%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  body:not(.admin-body)::after { display: none; }
}

/* --- Barre d'accent lumineuse animée sous l'en-tête --- */
body:not(.admin-body) .site-header {
  position: sticky;
}
body:not(.admin-body) .site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: rkSweep 4s linear infinite;
}
body:not(.admin-body) .site-header.is-scrolled::after { opacity: 0.9; }
@keyframes rkSweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --- Navigation : capitales grasses, façon HUD --- */
body:not(.admin-body) .nav a:not(.nav-admin) {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 1.5px;
}
body:not(.admin-body) .nav-admin {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
body:not(.admin-body) .nav-admin:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 -34px 0 0 rgba(31,95,214,0.22), 0 8px 20px rgba(31,95,214,0.3);
}

/* --- Kicker du hero --- */
body:not(.admin-body) .hero-kicker {
  font-weight: 800;
}

/* --- Hero : halo pulsé derrière le logo + entrée animée --- */
body:not(.admin-body) .hero { overflow: hidden; }
body:not(.admin-body) .hero::before {
  content: "";
  position: absolute;
  top: 42%; left: 50%;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(31,95,214,0.28), transparent 62%);
  filter: blur(10px);
  z-index: 0;
  animation: rkPulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rkPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.12); }
}
body:not(.admin-body) .hero-inner { position: relative; z-index: 1; }
body:not(.admin-body) .hero-logo {
  animation: rkRise 0.9s cubic-bezier(.2,.8,.2,1) both;
  /* brightness(0) invert(1) : logo du hero forcé en BLANC + ombre portée. */
  filter: brightness(0) invert(1) drop-shadow(0 12px 40px rgba(31,95,214,0.4));
}
body:not(.admin-body) .hero-kicker { animation: rkRise 0.7s cubic-bezier(.2,.8,.2,1) both; }
body:not(.admin-body) .hero-badges { animation: rkRise 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: 0.15s; }
body:not(.admin-body) .hero-actions { animation: rkRise 1.1s cubic-bezier(.2,.8,.2,1) both; animation-delay: 0.25s; }
@keyframes rkRise {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.admin-body) .hero::before { animation: none; }
  body:not(.admin-body) .hero-logo,
  body:not(.admin-body) .hero-kicker,
  body:not(.admin-body) .hero-badges,
  body:not(.admin-body) .hero-actions { animation: none; }
}

/* --- Titres de section : capitales lourdes + tiret d'accent --- */
body:not(.admin-body) .section-title,
body:not(.admin-body) .page-head .section-title {
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
body:not(.admin-body) .section-title::after {
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
body:not(.admin-body) .cat-group-title {
  font-family: var(--sans);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* --- Boutons : capitales grasses, façon jeu --- */
body:not(.admin-body) .btn {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}
body:not(.admin-body) .btn-primary {
  box-shadow: 0 6px 20px rgba(31,95,214,0.28);
}
body:not(.admin-body) .btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
}

/* --- Cartes d'œuvres : coin coupé + reflet balayant + tilt léger --- */
body:not(.admin-body) .art-card {
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, border-color 0.35s;
}
body:not(.admin-body) .art-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: 150% 150%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
body:not(.admin-body) .art-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: var(--accent);
  box-shadow: 0 28px 70px rgba(0,0,0,0.4), 0 0 0 1px rgba(31,95,214,0.4), 0 0 30px rgba(31,95,214,0.25);
}
body:not(.admin-body) .art-card:hover::after {
  opacity: 1;
  animation: rkShine 0.8s ease forwards;
}
@keyframes rkShine {
  from { background-position: 150% 150%; }
  to   { background-position: -50% -50%; }
}
body:not(.admin-body) .art-title { font-family: var(--serif); }

/* --- Vidéos : liseré lumineux + petit indicateur ▶ animé --- */
body:not(.admin-body) .video-card:hover {
  box-shadow: 0 26px 60px rgba(0,0,0,0.4), 0 0 30px rgba(31,95,214,0.25);
}
body:not(.admin-body) .video-title { font-family: var(--serif); }

/* --- Puces contact : capitales --- */
body:not(.admin-body) .contact-chip {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.8px;
}

/* --- Filtres : capitales, façon onglets de menu --- */
body:not(.admin-body) .filter-btn {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.8px;
  font-size: 0.78rem;
}
body:not(.admin-body) .filter-btn.is-active {
  box-shadow: 0 6px 18px rgba(31,95,214,0.35);
}