/* =====================================================
   NEON NOIR : BRET EASTON ELLIS ARCHIVE
   Los Angeles, la nuit : bitume, enseignes, chlore.
   -----------------------------------------------------
   Couche unique chargée APRÈS archive.css (base déjà sombre).
   Ne touche ni la structure, ni le layout, ni les tailles de
   typo, ni le responsive : couleur, profondeur, halos, contrastes.
   Réversible : retirer ce <link> restaure la base archive.css.
   ===================================================== */

:root {
  /* --- Palette « LA noir 80s » --- */
  --ln-tar:         #050507;   /* le plus profond : footer */
  --ln-asphalt:     #0B0B0D;   /* fond de page */
  --ln-asphalt-2:   #101014;   /* fond secondaire */
  --ln-panel:       #15151B;   /* surface des cartes */
  --ln-panel-2:     #1C1C24;   /* survol carte */
  --ln-smoke:       #9A9AA2;   /* texte secondaire (fumée) */
  --ln-bone:        #E7E7E9;   /* texte principal (os) */
  --ln-bone-bright: #FAFAFB;   /* titres (surface polie) */
  --ln-rose:        #E8557A;   /* néon rose : accent principal */
  --ln-rose-soft:   #F58CA7;
  --ln-cyan:        #4FD8E8;   /* néon cyan : accent secondaire */
  --ln-cyan-soft:   #93E9F3;
  --ln-chrome:      #E4E4E8;   /* remplissage chrome (boutons) */
  --ln-border:      rgba(232, 232, 238, 0.12);
  --ln-border-strong: rgba(232, 232, 238, 0.26);

  /* --- Remap des variables sémantiques d'archive.css --- */
  --bg: var(--ln-asphalt);
  --bg-2: var(--ln-asphalt-2);
  --surface: var(--ln-panel);
  --surface-2: var(--ln-panel-2);
  --border: var(--ln-border);
  --border-strong: var(--ln-border-strong);
  --text: var(--ln-bone);
  --muted: var(--ln-smoke);
  --color-smoke: #A8A8B0;
  --color-bone: var(--ln-bone);
  --gold: var(--ln-rose);              /* l'accent est le néon, pas l'or */
  --gold-soft: var(--ln-rose-soft);
}

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

/* Profondeur : lueur d'enseigne en haut, chlore à droite, vignette de nuit */
body::before {
  background:
    radial-gradient(120% 72% at 50% -10%, rgba(232, 85, 122, 0.16), transparent 62%),
    radial-gradient(80% 52% at 100% 4%, rgba(79, 216, 232, 0.09), transparent 58%),
    radial-gradient(135% 110% at 50% 40%, transparent 50%, rgba(3, 3, 5, 0.62) 100%);
}

/* Portrait de l'introduction : seule image du site sans étalonnage d'origine.
   Une désaturation légère et un peu de contraste suffisent à l'asseoir dans la
   direction froide, sans la dénaturer. Retirer ce bloc rend la photo brute. */
.bee-split-media img { filter: saturate(0.8) contrast(1.05) brightness(0.93); }

/* Titres : surface polie */
.bee-section-title, .bee-card-title, .bee-era-title, .bee-work-title, .bee-quote-text { color: var(--ln-bone-bright); }

/* ==========================================================================
   NAVIGATION : verre fumé
   ========================================================================== */
.bee-nav-link { transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.bee-nav-link:hover { color: var(--ln-bone-bright); }
.bee-nav.is-scrolled {
  background: rgba(11, 11, 13, 0.66);
  -webkit-backdrop-filter: saturate(130%) blur(18px);
  backdrop-filter: saturate(130%) blur(18px);
  border-bottom: 1px solid var(--ln-border);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   HERO : étalonnage nuit, néon diffus
   ========================================================================== */
/* Photo déjà étalonnée, virée rose, tiers gauche fondu au noir pour recevoir
   le texte : on ne l'écrase pas comme le fond abstrait qu'elle remplace, et on
   laisse vivre sa dominante plutôt que de la recouvrir. */
.bee-hero-bg img { opacity: 1; filter: brightness(0.86) contrast(1.03) saturate(1.06); }
.bee-hero-bg::after {
  background:
    /* Plus de nappe rose ajoutée : la photographie l'apporte elle-même.
       Reste un fondu bas vers le noir (raccord avec la section suivante),
       une touche de cyan au coin opposé, et une vignette adoucie. */
    linear-gradient(180deg, rgba(5,5,7,0.42) 0%, rgba(11,11,13,0.10) 32%, rgba(5,5,7,0.88) 100%),
    radial-gradient(62% 48% at 97% 82%, rgba(79, 216, 232, 0.09) 0%, transparent 66%),
    radial-gradient(130% 100% at 50% 50%, transparent 54%, rgba(2, 2, 4, 0.55) 100%);
}
/* Portrait étroit : le texte ne passe plus sur le noir du bord gauche mais sur
   le visage éclairé. On renforce le voile bas pour garder un contraste franc,
   plutôt que de recadrer et de perdre le portrait. */
@media (max-width: 768px) {
  .bee-hero-bg::after {
    background:
      linear-gradient(180deg, rgba(5,5,7,0.44) 0%, rgba(5,5,7,0.22) 20%, rgba(5,5,7,0.78) 54%, rgba(5,5,7,0.95) 100%),
      radial-gradient(120% 70% at 50% 100%, rgba(5, 5, 7, 0.70) 0%, transparent 62%);
  }
}

.bee-hero-title { color: var(--ln-bone-bright); text-shadow: 0 2px 44px rgba(0, 0, 0, 0.7); }
.bee-hero-sub { color: rgba(231, 231, 233, 0.82); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6); }
.bee-hero .bee-kicker { color: var(--ln-rose); text-shadow: 0 0 18px rgba(232, 85, 122, 0.45); }

/* ==========================================================================
   BOUTONS : chrome sur bitume, halo néon
   ========================================================================== */
.bee-btn { transition: background 220ms cubic-bezier(0.22,1,0.36,1), color 220ms, border-color 220ms, box-shadow 220ms, transform 220ms; }
.bee-btn--primary {
  background: var(--ln-chrome); color: var(--ln-asphalt); border: 1px solid var(--ln-chrome);
}
.bee-btn--primary:hover {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--ln-tar);
  box-shadow: 0 0 0 1px rgba(232, 85, 122, 0.55), 0 12px 34px rgba(232, 85, 122, 0.22), 0 12px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* États sélectionnés : pastille chrome */
.bee-filter-btn.active { background: var(--ln-chrome); color: var(--ln-asphalt); border-color: var(--ln-chrome); }
.bee-lang-btn.active { background: var(--ln-chrome); color: var(--ln-asphalt); }

/* ==========================================================================
   CARTES : panneaux fumés, liseré néon au survol
   ========================================================================== */
.bee-card {
  background: var(--ln-panel); border-color: var(--ln-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  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;
}
.bee-work {
  background: var(--ln-panel); border-color: var(--ln-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.bee-work-cover { background: #0E0E12; box-shadow: inset 0 0 0 1px rgba(232, 232, 238, 0.07); }
.bee-to-top { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

/* ==========================================================================
   BANDEAUX : citation, en-têtes de page, encadrés
   ========================================================================== */
.bee-quote { background: linear-gradient(180deg, rgba(22, 16, 22, 0.72) 0%, var(--ln-asphalt) 100%); border-color: var(--ln-border); }
.bee-page-hero { background: linear-gradient(180deg, rgba(232, 85, 122, 0.09) 0%, transparent 100%); border-bottom: 1px solid var(--ln-border); }
.bee-note { background: var(--ln-panel); border-color: var(--ln-border-strong); }

/* ==========================================================================
   MÉDIAS : modale / lightbox profondes
   ========================================================================== */
.bee-modal { background: rgba(5, 5, 7, 0.94); }
.bee-lightbox { background: rgba(5, 5, 7, 0.95); }
.bee-play svg { fill: var(--ln-bone-bright); }

/* ==========================================================================
   MENU MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  .bee-nav-links { background: rgba(8, 8, 10, 0.98); border-bottom-color: var(--ln-border); }
  .bee-nav-link { border-bottom-color: var(--ln-border); }
}

/* ==========================================================================
   FOOTER : le fond de la nuit
   ========================================================================== */
.bee-footer { background: linear-gradient(180deg, var(--ln-asphalt) 0%, var(--ln-tar) 100%); border-top: 1px solid var(--ln-border); }
.bee-footer-desc { color: var(--ln-smoke); }
.bee-footer-col h4 { color: var(--ln-rose); }
.bee-footer-col a { color: var(--ln-smoke); transition: color 200ms cubic-bezier(0.22,1,0.36,1); }
.bee-footer-col a:hover { color: var(--ln-bone-bright); }
.bee-footer-bottom { border-top-color: var(--ln-border); }
.bee-footer-bottom p { color: rgba(154, 154, 162, 0.7); }