/* ================================================================
   ESPACE MÉMORIEL - Styles Globaux
   Famille Delacroix  ·  Version statique de démonstration
   ================================================================ */

/* --- POLICES LOCALES ----------------------------------------- */
@font-face {
  font-family: 'Aboreto';
  src: url('../fonts/Aboreto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Abhaya Libre';
  src: url('../fonts/AbhayaLibre-Medium.ttf') format('truetype');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Abril Fatface';
  src: url('../fonts/AbrilFatface-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- RESET ---------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* --- VARIABLES ------------------------------------------------ */
:root {
  --gold:        #d4af37;
  --gold-dark:   #c19b2a;
  --dark:        #1a1a1a;
  --dark2:       #2c2c2c;
  --white:       #ffffff;
  --card-bg:     rgba(255,255,255,0.177);
  --card-blur:   blur(10px);
  --radius:      18px;
  --font-title:  'Aboreto', serif;
  --font-body:   'Abhaya Libre', serif;
  --font-accent: 'Abril Fatface', serif;
}

/* --- FOND SOMBRE (accueil, hommages, anecdotes) -------------- */
.background {
  background:
    linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.52)),
    url('../images/logo/background.webp') center/cover no-repeat fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Fallback gradient si l'image est inaccessible */
@supports not (background: url('') center/cover) {
  .background {
    background: linear-gradient(160deg, #1a2a3a 0%, #2d3a2d 35%, #1a1a2e 65%, #0d1117 100%);
  }
}

/* --- HEADER & NAVIGATION ------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Barre "Menu" (état fermé) */
.close {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
  background: rgba(255,255,255,0.177);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.close .logo-sym { font-size: 26px; color: var(--gold); }
.close img { height: 30px; object-fit: contain; }
.close p {
  font-size: 15px;
  font-family: var(--font-accent);
  color: var(--white);
  letter-spacing: 2px;
}
#menu { text-decoration: none; }

/* Barre "Menu" état ouvert */
.open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 15px 0;
  background: rgba(255,255,255,0.177);
  backdrop-filter: blur(12px);
}
.open button { font-size: 20px; border: none; cursor: pointer; }

#closeOpenMenu {
  color: var(--white);
  background-color: rgba(255,255,255,0.2);
  font-size: 24px;
  padding: 10px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
#closeOpenMenu:hover {
  background-color: rgba(255,255,255,0.35);
  transform: rotate(90deg);
}

/* Boîte liens + connexion */
.box-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  gap: 0 2rem;
}

.links {
  padding: 10px 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  font-family: var(--font-accent);
  gap: 20px;
}
.links a {
  position: relative;
  text-decoration: none;
  color: var(--white);
}
.links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background-color: var(--white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.links a:hover::after { transform: scaleX(1); transform-origin: left; }
.links a.active-link { color: var(--gold); }
.links a.active-link::after { background: var(--gold); transform: scaleX(1); }

.connexion {
  display: flex;
  align-items: center;
  gap: 12px;
}
.connexion .logo-sym { font-size: 20px; color: var(--gold); }
.connexion img { height: 44px; object-fit: contain; }
.open img { height: 50px; object-fit: contain; margin: 0 auto; }

/* --- BADGE "DÉMO DÉSACTIVÉE" --------------------------------- */
.demo-badge {
  position: fixed;
  bottom: 18px; right: 18px;
  background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.78rem;
  font-family: var(--font-accent);
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  letter-spacing: 1px;
  pointer-events: none;
}

/* --- BOUTON PARTAGE (désactivé) ----------------------------- */
.share-section {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.share-btn {
  background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
  color: var(--gold);
  border: 2px solid var(--gold);
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(212,175,55,0.3);
  font-family: var(--font-title);
}
.share-btn:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--dark);
  box-shadow: 0 12px 35px rgba(212,175,55,0.5);
}

/* --- RESPONSIVE -------------------------------------------- */
@media (max-width: 900px) {
  .links { font-size: 16px; gap: 12px; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 700px) {
  .links { font-size: 14px; flex-direction: column; gap: 6px; text-align: center; }
  .box-box { flex-direction: row; width: 100%; }
  .connexion { flex-direction: column; border-left: 1px solid rgba(255,255,255,0.3); }
}
@media (max-width: 480px) {
  .close p { font-size: 13px; }
  .links a { padding: 4px 8px; }
}