/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN LUMINEUX — Modernisation visuelle complète
   Thèmes éclairés · Typographie lisible · UI ultra-moderne
   Chargé après design-premium.css — priorité maximale
═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1. ÉCLAIRCISSEMENT DE TOUS LES THÈMES SOMBRES
   Les fonds passent de quasi-noir à sombre-mais-visible
───────────────────────────────────────────────────────────────────────── */

[data-theme="foret-profonde"] {
  --color-bg-primary:    #172817;
  --color-bg-secondary:  #1e3420;
  --color-bg-surface:    rgba(26,42,24,0.96);
  --color-bg-card:       rgba(20,34,18,0.98);
  --color-text-primary:  #f2ede0;
  --color-text-secondary:#b8d0a8;
  --color-text-muted:    #82a870;
  --color-border:        rgba(200,168,75,0.22);
  --color-border-strong: rgba(200,168,75,0.50);
  --shadow-sm:           0 2px 12px rgba(0,12,0,0.45);
  --shadow-md:           0 6px 30px rgba(0,12,0,0.55);
  --shadow-lg:           0 16px 56px rgba(0,10,0,0.70);
  --gradient-surface:    linear-gradient(160deg,rgba(28,44,24,0.97),rgba(20,34,18,0.99));
}

[data-theme="montagne-granit"] {
  --color-bg-primary:    #1c2a38;
  --color-bg-secondary:  #263646;
  --color-bg-surface:    rgba(30,44,60,0.96);
  --color-bg-card:       rgba(22,34,48,0.98);
  --color-text-primary:  #e8f2f8;
  --color-text-secondary:#90b4d0;
  --color-text-muted:    #607890;
  --color-border:        rgba(144,184,216,0.22);
  --color-border-strong: rgba(144,184,216,0.50);
  --shadow-sm:           0 2px 12px rgba(0,12,28,0.45);
  --shadow-md:           0 6px 30px rgba(0,12,28,0.55);
  --shadow-lg:           0 16px 56px rgba(0,10,22,0.70);
  --gradient-surface:    linear-gradient(160deg,rgba(32,48,66,0.97),rgba(22,36,52,0.99));
}

[data-theme="cote-sauvage"] {
  --color-bg-primary:    #0e1e30;
  --color-bg-secondary:  #162840;
  --color-bg-surface:    rgba(18,34,52,0.96);
  --color-bg-card:       rgba(12,26,42,0.98);
  --color-text-primary:  #dff0fa;
  --color-text-secondary:#72b0d0;
  --color-text-muted:    #487090;
  --color-border:        rgba(56,184,216,0.22);
  --color-border-strong: rgba(56,184,216,0.50);
  --shadow-sm:           0 2px 12px rgba(0,10,22,0.45);
  --shadow-md:           0 6px 30px rgba(0,10,22,0.55);
  --shadow-lg:           0 16px 56px rgba(0,8,18,0.70);
}

[data-theme="aube-doree"] {
  --color-bg-primary:    #22180a;
  --color-bg-secondary:  #2e2210;
  --color-bg-surface:    rgba(36,30,14,0.96);
  --color-bg-card:       rgba(28,22,8,0.98);
  --color-text-primary:  #f5e8c8;
  --color-text-secondary:#d0a860;
  --color-text-muted:    #9a7040;
  --color-border:        rgba(224,160,48,0.22);
  --color-border-strong: rgba(224,160,48,0.50);
}

[data-theme="lande-sauvage"] {
  --color-bg-primary:    #1c1228;
  --color-bg-secondary:  #261a36;
  --color-bg-surface:    rgba(32,22,48,0.96);
  --color-bg-card:       rgba(24,16,38,0.98);
  --color-text-primary:  #eedff6;
  --color-text-secondary:#b090cc;
  --color-text-muted:    #7a6090;
  --color-border:        rgba(184,136,216,0.22);
  --color-border-strong: rgba(184,136,216,0.50);
}

[data-theme="riviere-verte"] {
  --color-bg-primary:    #101e1c;
  --color-bg-secondary:  #182c28;
  --color-bg-surface:    rgba(20,36,32,0.96);
  --color-bg-card:       rgba(14,26,24,0.98);
  --color-text-primary:  #d8f0ea;
  --color-text-secondary:#70c0a8;
  --color-text-muted:    #489080;
  --color-border:        rgba(72,200,168,0.22);
  --color-border-strong: rgba(72,200,168,0.50);
}

[data-theme="falaise-rouge"] {
  --color-bg-primary:    #221008;
  --color-bg-secondary:  #2e1810;
  --color-bg-surface:    rgba(38,22,14,0.96);
  --color-bg-card:       rgba(28,14,8,0.98);
  --color-text-primary:  #f5e0cc;
  --color-text-secondary:#d09068;
  --color-text-muted:    #a06040;
  --color-border:        rgba(224,104,40,0.22);
  --color-border-strong: rgba(224,104,40,0.50);
}

[data-theme="elegance-cotiere"] {
  --color-bg-primary:    #182840;
  --color-bg-secondary:  #203450;
  --color-bg-surface:    rgba(24,44,62,0.96);
  --color-bg-card:       rgba(16,32,50,0.98);
  --color-text-primary:  #ecf6ff;
  --color-text-secondary:#88c0e0;
  --color-text-muted:    #5890a8;
  --color-border:        rgba(77,184,232,0.22);
  --color-border-strong: rgba(77,184,232,0.50);
}

[data-theme="foret-ancestrale"] {
  --color-bg-primary:    #182516;
  --color-bg-secondary:  #20300e;
  --color-bg-surface:    rgba(26,38,20,0.96);
  --color-bg-card:       rgba(18,28,14,0.98);
  --color-text-primary:  #eaeedd;
  --color-text-secondary:#a8c098;
  --color-text-muted:    #708a58;
  --color-border:        rgba(168,144,96,0.22);
  --color-border-strong: rgba(168,144,96,0.50);
}

[data-theme="minimaliste-pro"] {
  --color-bg-primary:    #1a1a1e;
  --color-bg-secondary:  #232328;
  --color-bg-surface:    rgba(28,28,34,0.96);
  --color-bg-card:       rgba(22,22,28,0.98);
  --color-text-primary:  #ececf0;
  --color-text-secondary:#a0a0ae;
  --color-text-muted:    #72727e;
  --color-border:        rgba(0,255,136,0.18);
  --color-border-strong: rgba(0,255,136,0.45);
}

[data-theme="minuit-etoile"] {
  --color-bg-primary:    #12121e;
  --color-bg-secondary:  #1a1a2a;
  --color-bg-surface:    rgba(20,20,34,0.96);
  --color-bg-card:       rgba(14,14,26,0.98);
  --color-text-primary:  #eceef8;
  --color-text-secondary:#b0b0cc;
  --color-text-muted:    #787888;
  --color-border:        rgba(184,142,216,0.22);
  --color-border-strong: rgba(184,142,216,0.50);
}

[data-theme="desert-bronze"] {
  --color-bg-primary:    #201408;
  --color-bg-secondary:  #2c1c0e;
  --color-bg-surface:    rgba(36,26,14,0.96);
  --color-bg-card:       rgba(28,18,8,0.98);
  --color-text-primary:  #f4e4cc;
  --color-text-secondary:#d0a870;
  --color-text-muted:    #9a7050;
  --color-border:        rgba(200,120,48,0.22);
  --color-border-strong: rgba(200,120,48,0.50);
}

[data-theme="ocean-turquoise"] {
  --color-bg-primary:    #0c1e30;
  --color-bg-secondary:  #102840;
  --color-bg-surface:    rgba(14,34,52,0.96);
  --color-bg-card:       rgba(8,24,42,0.98);
  --color-text-primary:  #d8f4f0;
  --color-text-secondary:#4ad0c8;
  --color-text-muted:    #28a090;
  --color-border:        rgba(32,217,163,0.22);
  --color-border-strong: rgba(32,217,163,0.50);
}

[data-theme="aurore-boreale"] {
  --color-bg-primary:    #081018;
  --color-bg-secondary:  #0e1a26;
  --color-bg-surface:    rgba(12,24,36,0.96);
  --color-bg-card:       rgba(6,16,28,0.98);
  --color-text-primary:  #dcfaec;
  --color-text-secondary:#40d888;
  --color-text-muted:    #22a060;
  --color-border:        rgba(0,232,120,0.22);
  --color-border-strong: rgba(0,232,120,0.50);
}

[data-theme="velours-prune"] {
  --color-bg-primary:    #1c1228;
  --color-bg-secondary:  #261a38;
  --color-bg-surface:    rgba(32,20,46,0.96);
  --color-bg-card:       rgba(24,14,36,0.98);
  --color-text-primary:  #f4deff;
  --color-text-secondary:#c880d8;
  --color-text-muted:    #9050a8;
  --color-border:        rgba(208,96,208,0.22);
  --color-border-strong: rgba(208,96,208,0.50);
}

[data-theme="terre-ocre"] {
  --color-bg-primary:    #201408;
  --color-bg-secondary:  #2c1e10;
  --color-bg-surface:    rgba(36,24,12,0.96);
  --color-bg-card:       rgba(26,16,8,0.98);
  --color-text-primary:  #f4e2cc;
  --color-text-secondary:#d0a060;
  --color-text-muted:    #a07040;
  --color-border:        rgba(216,144,80,0.22);
  --color-border-strong: rgba(216,144,80,0.50);
}

[data-theme="glacier-bleu"] {
  --color-bg-primary:    #102030;
  --color-bg-secondary:  #183048;
  --color-bg-surface:    rgba(18,38,58,0.96);
  --color-bg-card:       rgba(10,26,46,0.98);
  --color-text-primary:  #daf2fa;
  --color-text-secondary:#78c0e0;
  --color-text-muted:    #4888a8;
  --color-border:        rgba(80,184,232,0.22);
  --color-border-strong: rgba(80,184,232,0.50);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. FOND DU BODY — Texture subtile et profondeur
───────────────────────────────────────────────────────────────────────── */

body {
  background-color: var(--color-bg-primary) !important;
  background-image:
    radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgba(var(--color-accent-rgb), 0.07) 0%,
      transparent 65%
    ) !important;
  background-attachment: fixed !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. BARRE DE NAVIGATION — Glassmorphism lumineux
───────────────────────────────────────────────────────────────────────── */

#admin-bar {
  background: linear-gradient(
    90deg,
    rgba(var(--color-accent-rgb), 0.04) 0%,
    rgba(0,0,0,0.70) 40%,
    rgba(0,0,0,0.70) 60%,
    rgba(var(--color-accent-rgb), 0.04) 100%
  ) !important;
  backdrop-filter: blur(28px) saturate(180%) brightness(1.15) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.15) !important;
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.22) !important;
  box-shadow:
    0 1px 0 rgba(var(--color-accent-rgb), 0.12),
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Liens nav */
.nav-link {
  font-size: 10px !important;
  letter-spacing: 3px !important;
  font-weight: 500 !important;
  color: rgba(var(--color-accent-rgb), 0.55) !important;
  padding: 0 20px !important;
  transition: color 0.25s ease !important;
  position: relative !important;
}
.nav-link:hover  { color: rgba(var(--color-accent-rgb), 1) !important; }
.nav-link.active { color: var(--color-accent) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   4. PAGE CANVAS — Luminosité et respiration
───────────────────────────────────────────────────────────────────────── */

.page-canvas {
  background: transparent !important;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. SECTIONS — Fond semi-transparent avec éclairage ambiant
───────────────────────────────────────────────────────────────────────── */

.page-section {
  background: rgba(var(--color-accent-rgb), 0.02) !important;
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.06) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. TYPOGRAPHIE — Lisibilité et hiérarchie
───────────────────────────────────────────────────────────────────────── */

/* Titres h1 avec légère lueur */
h1, .el-h1 h1 {
  color: var(--color-text-primary) !important;
  text-shadow:
    0 0 60px rgba(var(--color-accent-rgb), 0.18),
    0 2px 8px rgba(0,0,0,0.4) !important;
  line-height: 1.08 !important;
}

h2, h3 {
  color: var(--color-text-primary) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3) !important;
}

/* Corps de texte — meilleur contraste */
p, .el-text p {
  color: var(--color-text-primary) !important;
  line-height: 1.85 !important;
}
/* Laisser l'editeur gerer ses propres couleurs */
.el-text-inner p,
.el-text-inner h1,
.el-text-inner h2,
.el-text-inner h3,
.el-text-inner h4,
.el-text-inner span {
  color: inherit !important;
}

/* Texte secondaire plus lisible */
.el-text p[style*="color:#a8a090"],
.el-text p[style*="color: #a8a090"] {
  color: var(--color-text-secondary) !important;
  opacity: 0.92 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. ÉLÉMENTS DE PAGE — Rendu sur fond lumineux
───────────────────────────────────────────────────────────────────────── */

.element-wrapper {
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.25));
}

/* Séparateurs dorés avec lueur */
.el-separator hr {
  box-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.35) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   8. BOUTONS — Design moderne et visible
───────────────────────────────────────────────────────────────────────── */

/* Bouton primaire */
.el-btn-primary,
[class*="btn"][class*="primary"],
.contact-submit-btn {
  background: linear-gradient(
    135deg,
    rgba(var(--color-accent-rgb), 0.90) 0%,
    rgba(var(--color-accent-rgb), 0.75) 100%
  ) !important;
  color: #0a0a0a !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  font-size: 11px !important;
  padding: 16px 36px !important;
  box-shadow:
    0 4px 20px rgba(var(--color-accent-rgb), 0.35),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  text-transform: uppercase !important;
}
.el-btn-primary:hover,
.contact-submit-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 8px 32px rgba(var(--color-accent-rgb), 0.55),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
  filter: brightness(1.1) !important;
}

/* Bouton outline */
.el-btn-outline,
[class*="btn"][class*="outline"] {
  background: rgba(var(--color-accent-rgb), 0.08) !important;
  border: 1.5px solid rgba(var(--color-accent-rgb), 0.55) !important;
  color: var(--color-accent) !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  font-size: 11px !important;
  padding: 15px 34px !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.28s cubic-bezier(0.4,0,0.2,1) !important;
  text-transform: uppercase !important;
}
.el-btn-outline:hover {
  background: rgba(var(--color-accent-rgb), 0.18) !important;
  border-color: rgba(var(--color-accent-rgb), 0.85) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 6px 24px rgba(var(--color-accent-rgb), 0.25) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   9. CARTES ET SURFACES — Glassmorphism lumineux
───────────────────────────────────────────────────────────────────────── */

.card, .modal-box, .contact-form {
  background: rgba(var(--color-accent-rgb), 0.028) !important;
  border: 1px solid rgba(var(--color-accent-rgb), 0.18) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  box-shadow:
    0 0 0 1px rgba(var(--color-accent-rgb), 0.06),
    0 20px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. SECTION HERO — Fond dynamique avec lueur centrale
───────────────────────────────────────────────────────────────────────── */

/* Overlay de lumière ambiante sur le fond de page */
.page-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 100%,
      rgba(var(--color-accent-rgb), 0.06) 0%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   11. GALERIE — Modernisation
───────────────────────────────────────────────────────────────────────── */

#gallery-section {
  background: linear-gradient(
    180deg,
    rgba(var(--color-accent-rgb), 0.03) 0%,
    transparent 30%
  ) !important;
}

/* Items galerie avec reflet lumineux */
.gallery-item {
  border: 1px solid rgba(var(--color-accent-rgb), 0.10) !important;
  overflow: hidden !important;
  border-radius: 6px !important;
}
.gallery-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
  border-radius: 6px 6px 0 0;
}

.gallery-item:hover {
  border-color: rgba(var(--color-accent-rgb), 0.35) !important;
  box-shadow:
    0 16px 52px rgba(0,0,0,0.55),
    0 0 0 1px rgba(var(--color-accent-rgb), 0.25),
    0 0 30px rgba(var(--color-accent-rgb), 0.08) !important;
}

/* Titre de galerie */
.gallery-block-title {
  background: linear-gradient(
    135deg,
    var(--color-text-primary) 0%,
    var(--color-accent-light) 100%
  ) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   12. FORMULAIRE CONTACT — Plus clair et lisible
───────────────────────────────────────────────────────────────────────── */

.contact-form-group input,
.contact-form-group textarea {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(var(--color-accent-rgb), 0.22) !important;
  color: var(--color-text-primary) !important;
  font-size: 15px !important;
  padding: 14px 18px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.contact-form-group input:focus,
.contact-form-group textarea:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(var(--color-accent-rgb), 0.60) !important;
  box-shadow:
    0 0 0 3px rgba(var(--color-accent-rgb), 0.12),
    0 4px 16px rgba(0,0,0,0.2) !important;
  outline: none !important;
}
.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
  color: rgba(var(--color-accent-rgb), 0.38) !important;
}
.contact-form-group label {
  font-size: 10px !important;
  letter-spacing: 3px !important;
  color: rgba(var(--color-accent-rgb), 0.65) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   13. FOOTER — Séparation lumineuse
───────────────────────────────────────────────────────────────────────── */

.site-footer {
  background: linear-gradient(
    to bottom,
    rgba(var(--color-accent-rgb), 0.04) 0%,
    rgba(0,0,0,0.55) 100%
  ) !important;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.18) !important;
}
.site-footer::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-accent-rgb), 0.50) 25%,
    rgba(var(--color-accent-rgb), 0.85) 50%,
    rgba(var(--color-accent-rgb), 0.50) 75%,
    transparent 100%
  ) !important;
  box-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.35) !important;
}
.footer-text {
  color: rgba(var(--color-accent-rgb), 0.50) !important;
}
.footer-link {
  color: rgba(255,255,255,0.50) !important;
}
.footer-link:hover {
  color: var(--color-accent) !important;
}
.footer-copyright {
  color: rgba(255,255,255,0.38) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   14. SCROLLBAR PREMIUM
───────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(var(--color-accent-rgb), 0.04); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    rgba(var(--color-accent-rgb), 0.5),
    rgba(var(--color-accent-rgb), 0.25)
  );
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-accent-rgb), 0.75);
}

/* ─────────────────────────────────────────────────────────────────────────
   15. ANIMATIONS — Entrées fluides et modernes
───────────────────────────────────────────────────────────────────────── */

@keyframes fadeUpGlow {
  from {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.page-canvas.page-entering {
  animation: fadeUpGlow 0.5s cubic-bezier(0.22,1,0.36,1) forwards !important;
}

/* Reveal scroll plus doux */
.reveal {
  opacity: 0 !important;
  transform: translateY(28px) !important;
  transition:
    opacity 0.70s cubic-bezier(0.22,1,0.36,1),
    transform 0.70s cubic-bezier(0.22,1,0.36,1) !important;
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger étendu */
.gallery-item:nth-child(1)  { transition-delay: 0.00s; }
.gallery-item:nth-child(2)  { transition-delay: 0.06s; }
.gallery-item:nth-child(3)  { transition-delay: 0.12s; }
.gallery-item:nth-child(4)  { transition-delay: 0.18s; }
.gallery-item:nth-child(5)  { transition-delay: 0.24s; }
.gallery-item:nth-child(6)  { transition-delay: 0.30s; }
.gallery-item:nth-child(7)  { transition-delay: 0.36s; }
.gallery-item:nth-child(8)  { transition-delay: 0.42s; }

/* ─────────────────────────────────────────────────────────────────────────
   16. FILTRES GALERIE — Pills modernes
───────────────────────────────────────────────────────────────────────── */

.gallery-filter-btn {
  border-radius: 50px !important;
  padding: 9px 24px !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  font-weight: 600 !important;
  border: 1.5px solid rgba(var(--color-accent-rgb), 0.22) !important;
  color: rgba(var(--color-accent-rgb), 0.65) !important;
  background: transparent !important;
  transition: all 0.22s ease !important;
  text-transform: uppercase !important;
}
.gallery-filter-btn:hover {
  background: rgba(var(--color-accent-rgb), 0.10) !important;
  border-color: rgba(var(--color-accent-rgb), 0.55) !important;
  color: var(--color-accent) !important;
}
.gallery-filter-btn.active {
  background: rgba(var(--color-accent-rgb), 0.18) !important;
  border-color: rgba(var(--color-accent-rgb), 0.70) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.20) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   17. LIGHTBOX — Plus pur et immersif
───────────────────────────────────────────────────────────────────────── */

.lightbox {
  background: rgba(4,6,4,0.97) !important;
  backdrop-filter: blur(2px) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   18. TOAST — Pill design moderne
───────────────────────────────────────────────────────────────────────── */

.toast {
  border-radius: 50px !important;
  padding: 12px 24px !important;
  background: rgba(20,26,20,0.96) !important;
  border: 1px solid rgba(var(--color-accent-rgb), 0.30) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.50),
    0 0 0 1px rgba(var(--color-accent-rgb), 0.08) !important;
  backdrop-filter: blur(20px) !important;
  border-left-width: 1px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   19. THÈME CLAIR (neige-pins) — Adapté au fond blanc
───────────────────────────────────────────────────────────────────────── */

[data-theme="neige-pins"] body,
[data-theme="neige-pins"] .page-canvas {
  background-image: none !important;
}
[data-theme="neige-pins"] #admin-bar {
  background: rgba(242,244,240,0.90) !important;
  border-bottom: 1px solid rgba(58,96,48,0.18) !important;
  box-shadow: 0 2px 20px rgba(0,20,0,0.10) !important;
}
[data-theme="neige-pins"] .nav-link {
  color: rgba(58,96,48,0.55) !important;
}
[data-theme="neige-pins"] .nav-link.active,
[data-theme="neige-pins"] .nav-link:hover {
  color: var(--color-accent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   20. RESPONSIVE — Cohérence mobile
───────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .gallery-filter-btn {
    padding: 8px 18px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }
  .el-btn-primary, .el-btn-outline {
    padding: 14px 28px !important;
    font-size: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   21. HINT DE CLIC — Images avec panneau info (visiteurs uniquement)
───────────────────────────────────────────────────────────────────────── */

body:not(.admin-mode) .canvas-element.has-parchment {
  cursor: pointer !important;
}

.parchment-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 12px 12px;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.18) 70%,
    transparent 100%
  );
  color: rgba(var(--color-accent-rgb, 200,168,75), 1);
  text-align: center;
  font-size: 12px;
  font-family: 'Inter', 'Lato', sans-serif;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.28s ease;
  z-index: 20;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}

.canvas-element.has-parchment:hover .parchment-hint {
  opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────
   22. DIAPORAMA INCRUSTÉ
───────────────────────────────────────────────────────────────────────── */

.img-inlay-slideshow {
  overflow: hidden;
  position: absolute;
}

.img-inlay-slideshow .inlay-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.img-inlay-slideshow .inlay-slide.slide-active {
  opacity: 1;
}

/* Transition glissement */
.img-inlay-slideshow[data-transition="slide"] .inlay-slide {
  transform: translateX(100%);
  transition: opacity 0s, transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.img-inlay-slideshow[data-transition="slide"] .inlay-slide.slide-active {
  transform: translateX(0);
  opacity: 1;
}

/* Points de navigation */
.inlay-dots {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 5;
  pointer-events: none;
}

.inlay-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: background 0.3s ease, transform 0.3s ease;
}
.inlay-dot.active {
  background: rgba(255,255,255,0.95);
  transform: scale(1.25);
}

/* Vignette dans le panneau admin */
.pp-slide-thumb {
  position: relative;
  display: inline-block;
}
.pp-slide-rm {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(200,60,60,0.9);
  border: none;
  color: #fff;
  font-size: 8px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}