/* =====================================================
   ABYSSE & CUIVRE — ARCHIVE JULES VERNE
   Thème : bleu profond océanique (les abysses du Nautilus,
   le ciel du voyage lunaire), cuivre & laiton (instruments
   de navigation, dorure des cartonnages Hetzel), papier
   ancien pour les moments « document ».
   -----------------------------------------------------
   Couche unique chargée APRÈS archive.css (base sombre).
   Aucune modification de structure / layout / typo (tailles) /
   animations / responsive — uniquement couleur & profondeur.
   ===================================================== */

:root {
  /* --- Abysse océanique (profond → clair) --- */
  --gl-abyss:        #05090F;   /* le plus profond — pied de page */
  --gl-navy:         #08161F;   /* fond de page — bleu de haute mer */
  --gl-navy-2:       #0B1F2B;   /* fond secondaire */
  --gl-panel:        #0E2330;   /* surface des cartes */
  --gl-panel-2:      #143140;   /* survol carte */
  --gl-steel:        #9CB0BB;   /* texte secondaire (brume de mer) */
  --gl-ice:          #E7EEF1;   /* texte principal */
  --gl-ice-bright:   #F4F8FA;   /* titres (autorité) */
  --gl-glacier:      #6FB6C8;   /* bleu lagon — détails marins discrets */
  --gl-glacier-soft: #9AD0DD;
  --gl-frost:        #D7E6EC;

  /* --- Cuivre & laiton : l'accent chaud (instruments, dorure Hetzel) --- */
  --cu:              #C2853F;   /* cuivre — accent principal */
  --cu-soft:         #DDA866;   /* laiton clair — survols, liens */
  --cu-deep:         #8A5A2C;   /* cuivre patiné — filets, états pressés */
  --cu-glow:         rgba(194, 133, 63, 0.30);
  --cu-line:         rgba(206, 158, 96, 0.55);   /* filet doré tracé */

  /* --- Papier ancien : moments « document / carte » --- */
  --parchment:       #ECE2C9;
  --parchment-2:     #E1D2AF;
  --parchment-ink:   #2A2113;

  --gl-border:        rgba(173, 199, 212, 0.14);
  --gl-border-strong: rgba(173, 199, 212, 0.28);

  /* --- Remap des variables sémantiques d'archive.css --- */
  --bg: var(--gl-navy);
  --bg-2: var(--gl-navy-2);
  --surface: var(--gl-panel);
  --surface-2: var(--gl-panel-2);
  --border: var(--gl-border);
  --border-strong: var(--gl-border-strong);
  --text: var(--gl-ice);
  --muted: var(--gl-steel);
  --color-cool-gray: #AEBECA;
  --color-ivory-mist: var(--gl-ice);
  --gold: var(--cu);            /* l'accent n'est plus or froid mais cuivre */
  --gold-soft: var(--cu-soft);
}

/* ---------- Base & rendu ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--cu-deep) var(--gl-navy); }
body {
  background: var(--gl-navy);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
::selection { background: var(--cu); color: #14100A; }
a { transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--gl-navy); }
::-webkit-scrollbar-thumb { background: var(--cu-deep); border: 3px solid var(--gl-navy); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--cu); }

/* Profondeur : lueur de surface haute (lagon) + glint de cuivre + vignette d'abysse */
body::before {
  background:
    radial-gradient(120% 75% at 50% -8%, rgba(28, 78, 96, 0.42), transparent 60%),
    radial-gradient(70% 48% at 93% 3%, rgba(194, 133, 63, 0.10), transparent 60%),
    radial-gradient(135% 110% at 50% 42%, transparent 50%, rgba(3, 7, 12, 0.62) 100%);
}

/* Titres : glace lumineuse (autorité) */
.ej-section-title, .ej-card-title, .ej-era-title, .ej-work-title { color: var(--gl-ice-bright); }

/* ==========================================================================
   NAVIGATION — verre froid d'abysse
   ========================================================================== */
.ej-logo img { filter: none; }
.ej-nav-link { transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.ej-nav-link:hover { color: var(--cu-soft); }
.ej-nav-link.is-active { color: var(--gl-ice); }
.ej-nav.is-scrolled {
  background: rgba(8, 18, 26, 0.66);
  -webkit-backdrop-filter: saturate(125%) blur(18px);
  backdrop-filter: saturate(125%) blur(18px);
  border-bottom: 1px solid var(--gl-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   HERO — portrait océanique, profondeur, étalonnage cuivre/abysse
   ========================================================================== */
.ej-hero-bg img {
  opacity: 1;
  filter: brightness(0.7) contrast(1.06) saturate(0.55) sepia(0.14);
  object-position: 68% 22%;
}
.ej-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(8,18,26,0.94) 0%, rgba(8,18,26,0.74) 40%, rgba(8,18,26,0.30) 72%, rgba(8,18,26,0.55) 100%),
    linear-gradient(180deg, rgba(8,18,26,0.40) 0%, transparent 32%, rgba(5,9,15,0.86) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 44%, rgba(3, 7, 12, 0.62) 100%);
}
.ej-hero-title { color: var(--gl-ice-bright); text-shadow: 0 2px 44px rgba(0, 0, 0, 0.6); }
.ej-hero-sub { color: rgba(233, 242, 247, 0.84); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5); }
.ej-hero .ej-kicker { color: var(--cu-soft); }

/* ==========================================================================
   BOUTONS — cuivre plein sur abysse
   ========================================================================== */
.ej-btn { transition: background 220ms cubic-bezier(0.22,1,0.36,1), color 220ms, border-color 220ms, box-shadow 220ms, transform 220ms; }
.ej-btn--primary {
  background: var(--cu); color: #19110A; border: 1px solid var(--cu);
}
.ej-btn--primary:hover {
  background: var(--cu-soft); border-color: var(--cu-soft); color: #19110A;
  box-shadow: 0 0 0 1px var(--cu-glow), 0 12px 30px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.ej-btn--ghost {
  background: transparent; color: var(--gl-ice); border: 1px solid var(--gl-border-strong);
}
.ej-btn--ghost:hover {
  background: rgba(194, 133, 63, 0.10); border-color: var(--cu); color: var(--cu-soft);
}

/* États sélectionnés : pastille cuivre */
.ej-filter-btn.active { background: var(--cu); color: #19110A; border-color: var(--cu); }
.ej-lang-btn.active { background: var(--cu); color: #19110A; }

/* ==========================================================================
   CARTES — panneaux d'abysse, liseré cuivre au survol
   ========================================================================== */
.ej-card {
  background: var(--gl-panel); border-color: var(--gl-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
  transition: transform 240ms cubic-bezier(0.22,1,0.36,1), box-shadow 240ms cubic-bezier(0.22,1,0.36,1), border-color 240ms, background 240ms;
}
.ej-card:hover {
  background: var(--gl-panel-2); border-color: var(--cu-line);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(194, 133, 63, 0.16);
}
.ej-work {
  background: var(--gl-panel); border-color: var(--gl-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.30);
}
.ej-work:hover { box-shadow: 0 22px 56px rgba(0, 0, 0, 0.55); border-color: var(--cu-line); }
.ej-work-cover { background: #0A1A24; box-shadow: inset 0 0 0 1px rgba(206, 158, 96, 0.10); }
.ej-to-top { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }

/* ==========================================================================
   CITATION — papier ancien : un document posé sur l'abysse
   ========================================================================== */
.ej-quote {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  border-top: 1px solid var(--cu-deep);
  border-bottom: 1px solid var(--cu-deep);
  color: var(--parchment-ink);
  position: relative;
}
.ej-quote .ej-kicker { color: var(--cu-deep); }
.ej-quote .ej-kicker::before { background: var(--cu-deep); opacity: 0.8; }
.ej-quote-text { color: var(--parchment-ink) !important; }
.ej-quote-author { color: var(--cu-deep); }

/* En-têtes de page & encadrés */
.ej-page-hero { background: linear-gradient(180deg, rgba(28, 78, 96, 0.16) 0%, transparent 100%); border-bottom: 1px solid var(--gl-border); }
.ej-note { background: var(--gl-panel); border-color: var(--gl-border-strong); }

/* ==========================================================================
   MÉDIAS — modale / lightbox d'abysse
   ========================================================================== */
.ej-modal { background: rgba(5, 11, 17, 0.93); }
.ej-lightbox { background: rgba(5, 11, 17, 0.95); }
.ej-play svg { fill: var(--gl-ice); }

/* ==========================================================================
   MENU MOBILE — fond abysse
   ========================================================================== */
@media (max-width: 768px) {
  .ej-nav-links { background: rgba(7, 16, 22, 0.98); border-bottom-color: var(--gl-border); }
  .ej-nav-link { border-bottom-color: var(--gl-border); }
}

/* ==========================================================================
   FOOTER — abysse profond, titres cuivre
   ========================================================================== */
.ej-footer { background: linear-gradient(180deg, var(--gl-navy) 0%, var(--gl-abyss) 100%); border-top: 1px solid var(--gl-border); }
.ej-footer-logo img { opacity: 0.9; }
.ej-footer-desc { color: var(--gl-steel); }
.ej-footer-col h4 { color: var(--cu-soft); }
.ej-footer-col a { color: var(--gl-steel); transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.ej-footer-col a:hover { color: var(--gl-ice); }
.ej-footer-bottom { border-top-color: var(--gl-border); }
.ej-footer-bottom p { color: rgba(156, 176, 187, 0.7); }

/* ==========================================================================
   UTILITAIRE — bloc « papier ancien » réutilisable (encarts muséaux)
   ========================================================================== */
.jv-paper {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-2) 100%);
  color: var(--parchment-ink);
  border: 1px solid var(--cu-deep);
  border-radius: var(--radius-sm, 8px);
}
.jv-paper h1, .jv-paper h2, .jv-paper h3, .jv-paper h4 { color: #1C160C; }
.jv-paper .ej-kicker { color: var(--cu-deep); }
.jv-paper .ej-kicker::before { background: var(--cu-deep); }