/* ═══════════════════════════════════════════════════════════════════
   PREFERENCES — Mode nuit & Langue
   Boutons fixes + overrides CSS pour night mode
   Persistance via localStorage (js/preferences.js)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Conteneur des boutons ──────────────────────────────────────── */
#pref-panel {
  position   : fixed;
  bottom     : 36px;
  right      : 36px;
  display    : flex;
  flex-direction : column;
  gap        : 10px;
  z-index    : 99997;   /* sous le burger (99999) mais au-dessus du reste */
}

/* ── Chaque bouton ──────────────────────────────────────────────── */
#btn-night-mode,
#btn-lang {
  width           : 42px;
  height          : 42px;
  border-radius   : 50%;
  border          : 1.5px solid rgba(208, 185, 141, 0.35);
  background      : rgba(0, 0, 0, 0.55);
  backdrop-filter : blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color           : rgba(255, 255, 255, 0.85);
  font-size       : 13px;
  font-family     : 'DM Serif Text', serif;
  letter-spacing  : 0.05em;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  transition      : border-color 0.3s ease,
                    background   0.3s ease,
                    transform    0.2s ease;
  line-height     : 1;
  padding         : 0;
  user-select     : none;
  -webkit-user-select: none;
}

#btn-night-mode:hover,
#btn-lang:hover {
  border-color : #d0b98d;
  background   : rgba(0, 0, 0, 0.75);
  transform    : scale(1.06);
}

#btn-night-mode:active,
#btn-lang:active {
  transform    : scale(0.96);
}

/* Responsive mobile */
@media (max-width: 640px) {
  #pref-panel {
    bottom : 24px;
    right  : 16px;
  }
  #btn-night-mode,
  #btn-lang {
    width  : 38px;
    height : 38px;
  }
}

/* ── MODE NUIT ──────────────────────────────────────────────────── */
/*
   Principe : on surcharge les couleurs de fond via :root et des
   sélecteurs ciblés. Le fond body passe en quasi-noir, les sections
   teal (#006266) passent en très sombre (#030f10).
   Textes, curseur et boutons restent inchangés.
*/

html.night-mode {
  /* Override la variable burger overlay */
  --overlay-bg : #0a0a0a;
}

/* Corps de page */
html.night-mode body {
  background-color : #0a0a0a !important;
}

/* Header/section teal → même noir que le reste */
html.night-mode [class*="006266"],
html.night-mode .topindex {
  background-color : #0a0a0a !important;
}

/* Sections noires → identiques */
html.night-mode [class*="000000"] {
  background-color : #0a0a0a !important;
}

/* Bannière "Pour qui" */
html.night-mode .pour-qui-banner {
  background : #111111 !important;
}

/* Section Mon Intention — fond transparent OK, on laisse */

/* Bouton night actif : indicateur doré */
html.night-mode #btn-night-mode {
  border-color : #d0b98d;
  background   : rgba(10, 10, 10, 0.85);
}

/* Footer */
html.night-mode .bg-\[\#000000\] {
  background-color : #0a0a0a !important;
}

/* ── TRANSITION ENTRE PAGES ─────────────────────────────────────── */
#amh-page-transition {
  position       : fixed;
  inset          : 0;
  background     : #050a0b;
  z-index        : 999998;
  opacity        : 1;
  pointer-events : none;
  transition     : opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── BARRE DE PROGRESSION SCROLL ───────────────────────────────── */
#amh-progress {
  position   : fixed;
  top        : 0;
  left       : 0;
  width      : 0%;
  height     : 3px;
  background : #d0b98d;
  z-index    : 99999;
  pointer-events : none;
  transition : width 0.08s linear;
}

/* ── LANGUE active : indicateur bouton ──────────────────────────── */
html[lang="en"] #btn-lang {
  border-color : #d0b98d;
}