/* ==========================================================================
   CHARTE ÉDITORIALE — pixelsphotos.com
   Esthétique musée / portfolio photographe premium
   Couche visuelle finale — sobre, lumineuse, centrée sur l'image
   ========================================================================== */

:root {
  --imm-bg-0: #050504;
  --imm-bg-1: #0c0b09;
  --imm-bg-2: #141210;
  --imm-ink: #f5f0e6;
  --imm-muted: rgba(245, 240, 230, 0.62);
  --imm-gold: #c9a96e;
  --imm-gold-light: #e8d4a8;
  --imm-gold-dark: #8a7048;
  --imm-glass: rgba(8, 7, 5, 0.72);
  --imm-line: rgba(201, 169, 110, 0.22);
  --imm-line-strong: rgba(201, 169, 110, 0.48);
  --imm-blur: blur(20px) saturate(1.1);
  --imm-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --imm-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --font-heading: var(--site-font-heading);
  --font-body: var(--site-font-body);
  --page-font-heading: var(--site-font-heading);
  --page-font-body: var(--site-font-body);
  --color-bg-primary: var(--imm-bg-0);
  --color-bg-secondary: var(--imm-bg-1);
  --color-bg-surface: rgba(12, 11, 9, 0.88);
  --color-bg-card: rgba(8, 7, 5, 0.82);
  --color-text-primary: var(--imm-ink);
  --color-text-secondary: var(--imm-muted);
  --color-text-muted: rgba(245, 240, 230, 0.38);
  --color-accent: var(--imm-gold);
  --color-accent-light: var(--imm-gold-light);
  --color-accent-dark: var(--imm-gold-dark);
  --color-accent-rgb: 201, 169, 110;
  --color-border: rgba(201, 169, 110, 0.16);
  --color-border-strong: rgba(201, 169, 110, 0.38);
  --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.38);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.52);
  --shadow-lg: 0 36px 100px rgba(0, 0, 0, 0.68);
  --shadow-accent: 0 0 32px rgba(201, 169, 110, 0.18);
  --gradient-surface:
    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    rgba(8, 7, 5, 0.82);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
}

html {
  background: var(--imm-bg-0);
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(201, 169, 110, 0.06), transparent 55%),
    linear-gradient(180deg, #050504 0%, #0a0908 50%, #050504 100%) !important;
  color: var(--imm-ink);
  letter-spacing: 0.015em;
}

/* Grain cinématographique subtil — pas de grille néon */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

body::after {
  display: none;
}

#app-main {
  position: relative;
}

#app-main::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0,0,0,0.28) 100%);
}

.page-canvas,
#gallery-section,
#creations-section,
#contact-section {
  position: relative;
  z-index: 1;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
#admin-bar {
  background: rgba(5, 5, 4, 0.82) !important;
  -webkit-backdrop-filter: var(--imm-blur);
  backdrop-filter: var(--imm-blur);
  border-bottom: 1px solid var(--imm-line) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45) !important;
}

#admin-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--imm-gold), transparent);
  opacity: 0.45;
  pointer-events: none;
}

#site-name-display {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  letter-spacing: 0.28em !important;
  font-weight: 400 !important;
  color: var(--imm-ink) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 0 40px rgba(201, 169, 110, 0.25) !important;
}

.nav-link,
.btn-admin,
.btn-edit,
.ebtn,
.theme-cat-btn,
.btn-modal-ok,
.btn-modal-cancel,
.btn-secondary,
.gallery-filter-btn,
.el-button-inner,
.software-card__btn,
.btn-pick-media,
.btn-upload-label {
  transition:
    transform 0.3s var(--imm-spring),
    box-shadow 0.3s var(--imm-ease),
    border-color 0.3s var(--imm-ease),
    background 0.3s var(--imm-ease),
    color 0.3s var(--imm-ease) !important;
}

.nav-link {
  border: 1px solid transparent;
  letter-spacing: 0.22em !important;
}

.nav-link:hover,
.nav-link.active {
  background: rgba(201, 169, 110, 0.06) !important;
  border-color: rgba(201, 169, 110, 0.22);
  color: var(--imm-gold-light) !important;
  box-shadow: none;
  transform: none;
}

.btn-edit,
.btn-modal-ok,
.el-button-inner.btn-primary,
.software-card__btn--primary,
.contact-form button[type="submit"] {
  border: 1px solid rgba(201, 169, 110, 0.55) !important;
  background: linear-gradient(135deg, #c9a96e 0%, #a88850 100%) !important;
  color: #0a0908 !important;
  text-shadow: none !important;
  box-shadow: 0 8px 28px rgba(201, 169, 110, 0.22) !important;
}

.btn-edit:hover,
.btn-modal-ok:hover,
.el-button-inner.btn-primary:hover,
.software-card__btn--primary:hover,
.contact-form button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px rgba(201, 169, 110, 0.32) !important;
  filter: brightness(1.05) !important;
}

.btn-admin,
.btn-modal-cancel,
.btn-secondary,
.gallery-filter-btn,
.btn-pick-media,
.btn-upload-label,
.theme-cat-btn,
.ratio-btn {
  border-color: rgba(201, 169, 110, 0.18) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.btn-admin:hover,
.btn-modal-cancel:hover,
.btn-secondary:hover,
.gallery-filter-btn:hover,
.gallery-filter-btn.active,
.btn-pick-media:hover,
.btn-upload-label:hover,
.theme-cat-btn:hover,
.theme-cat-btn.active,
.ratio-btn:hover,
.ratio-btn.active {
  border-color: rgba(201, 169, 110, 0.42) !important;
  color: var(--imm-gold) !important;
  background: rgba(201, 169, 110, 0.08) !important;
}

/* ── Canvas : texte flottant sans boîtes glass ──────────────────────────── */
.canvas-element.el-text,
.canvas-element.el-separator,
.canvas-element.el-button {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.page-canvas .canvas-element[data-typo="label"] .el-text-inner,
.page-canvas .canvas-element[data-typo="label"] .el-text-inner p {
  color: var(--imm-gold) !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
  background: none !important;
}

.page-canvas .canvas-element[data-typo="title"] .el-text-inner,
.page-canvas .canvas-element[data-typo="title"] .el-text-inner h1,
.page-canvas .canvas-element[data-typo="title"] .el-text-inner h2,
.gallery-block-title,
.software-card__title,
.modal-header h3 {
  color: var(--imm-ink) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow:
    0 2px 24px rgba(0,0,0,0.75),
    0 0 60px rgba(0,0,0,0.4) !important;
}

.page-canvas .canvas-element[data-typo="intro"] .el-text-inner,
.page-canvas .canvas-element[data-typo="intro"] .el-text-inner p,
.page-canvas .canvas-element[data-typo="intro"] .el-text-inner em {
  color: rgba(245, 240, 230, 0.82) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.65) !important;
  background: none !important;
}

.page-canvas .canvas-element[data-typo="label"] .el-text-inner,
.gallery-block-count,
.section-label,
.editor-bar-label {
  color: var(--imm-gold) !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5) !important;
}

/* Cards & modales — glass discret */
.gallery-block,
.software-card,
.contact-info-card,
.contact-form,
.modal-box,
.theme-card,
.layout-card,
.gal-section,
.gallery-admin-bar {
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

.software-card,
.contact-info-card,
.contact-form,
.modal-box,
.theme-card,
.layout-card,
.gal-section {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    rgba(8, 7, 5, 0.88) !important;
  border: 1px solid rgba(201, 169, 110, 0.14) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.48) !important;
}

.software-card:hover,
.contact-info-card:hover,
.theme-card:hover,
.layout-card:hover {
  border-color: rgba(201, 169, 110, 0.32) !important;
  transform: translateY(-4px);
}

#gallery-section,
#creations-section,
#contact-section {
  padding-top: clamp(2.5rem, 5vw, 5rem) !important;
  padding-bottom: clamp(4rem, 8vw, 8rem) !important;
}

.gallery-block {
  position: relative;
  padding: clamp(0.5rem, 1.5vw, 1rem) 0;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
}

.gallery-block::before {
  display: none;
}

.gallery-item {
  border-radius: 2px !important;
  border: none !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.45);
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.5s var(--imm-ease);
}

.gallery-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 56px rgba(0,0,0,0.58) !important;
}

.gallery-item:hover::after {
  opacity: 1;
}

.gallery-item img,
.gallery-item video {
  transition: transform 1.2s var(--imm-ease), filter 0.8s var(--imm-ease) !important;
}

.gallery-item:hover img,
.gallery-item:hover video {
  transform: scale(1.04) !important;
  filter: contrast(1.04) saturate(1.06);
}

.gallery-item-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 55%) !important;
}

.gallery-item-caption,
.software-card__desc,
.contact-info-card p,
.contact-form {
  color: var(--imm-muted) !important;
}

.text-input,
.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body input[type="password"],
.modal-body select,
.modal-body textarea,
.font-select,
.gal-select,
.gal-select-sm,
.contact-form input,
.contact-form textarea {
  background: rgba(5, 5, 4, 0.72) !important;
  border: 1px solid rgba(201, 169, 110, 0.16) !important;
  color: var(--imm-ink) !important;
}

.text-input:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus,
.font-select:focus,
.gal-select:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(201, 169, 110, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.08) !important;
}

.page-bg-overlay {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0.12), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.48) 100%) !important;
}

@media (max-width: 760px) {
  #gallery-section,
  #creations-section,
  #contact-section {
    padding-left: clamp(16px, 5vw, 24px) !important;
    padding-right: clamp(16px, 5vw, 24px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img,
  .gallery-item video {
    transition: none !important;
  }
}