/*
 * Pages publiques (base_bank.html) : fonds animés et effets « verre ».
 * Le reste de la mise en page est en classes Tailwind dans les gabarits.
 */

/* --- Fond de base : toujours sombre, quel que soit le thème (les cartes, elles, suivent le thème) --- */
.fond-base {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, #1b2735, #090a0f);
}

/* --- Couches animées (wallpaper / cosmos) : fondu croisé --- */
.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* la visibilité ne change qu'après la fin du fondu de sortie */
  transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
}
.bg-layer.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease-in-out, visibility 0s linear 0s;
}
.no-bg-transition .bg-layer,
.no-bg-transition .wallpaper-slide {
  transition: none !important;
}

.wallpaper-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity;
  transition: opacity 1.5s ease-in-out;
  filter: brightness(0.5);
}
.wallpaper-slide.is-visible { opacity: 1; }

/* Voile pour garder le texte lisible au-dessus des images */
.fond-voile {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(17, 24, 39, 0.3); /* gris-900 à 30 %, comme l'ancien fond */
}

/* Libellé du bouton de fond : petit fondu lors du changement */
[data-bascule-fond] [data-contenu] { transition: opacity 0.2s ease; }
[data-bascule-fond].is-switching [data-contenu] { opacity: 0; }

/* Tuiles de l'accueil */
.tuile-accueil { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.tuile-accueil:hover { transform: translateY(-2px); }
.tuile-accueil:active { transform: translateY(0) scale(0.98); }

/* Texte riche saisi dans l'éditeur (page « Informations ») */
.texte-riche :where(h1, h2, h3) { font-weight: 700; margin: 1em 0 0.5em; line-height: 1.3; }
.texte-riche :where(h1) { font-size: 1.5rem; }
.texte-riche :where(h2) { font-size: 1.25rem; }
.texte-riche :where(h3) { font-size: 1.1rem; }
.texte-riche :where(p, ul, ol) { margin: 0.6em 0; }
.texte-riche :where(ul) { list-style: disc; padding-left: 1.4em; }
.texte-riche :where(ol) { list-style: decimal; padding-left: 1.4em; }
.texte-riche :where(a) { color: #0284c7; text-decoration: underline; }
.texte-riche :where(img) { max-width: 100%; height: auto; border-radius: 0.75rem; }
.texte-riche :where(table) { width: 100%; border-collapse: collapse; }
.texte-riche :where(td, th) { border: 1px solid rgba(148, 163, 184, 0.4); padding: 0.4em 0.6em; }

@media (prefers-reduced-motion: reduce) {
  .bg-layer, .wallpaper-slide, .tuile-accueil { transition-duration: 0.01s !important; }
  .tuile-accueil:hover { transform: none; }
}

/* --- Barre de réglages (langue, thème, fond) ---
 * Mobile (< 640 px) : repliée derrière ⚙, la pilule (centrée) s'étire à l'ouverture
 * (toucher, survol à la souris ou clavier ; état porté par .barre-haute[data-reglages-ouvert]).
 * Ordinateur : toujours dépliée, bouton ⚙ masqué. */
.icone-fermer { display: none; }
.barre-haute[data-reglages-ouvert="true"] .icone-ouvrir { display: none; }
.barre-haute[data-reglages-ouvert="true"] .icone-fermer { display: block; }

@media (max-width: 639.98px) {
  .reglages-contenu {
    max-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    white-space: nowrap;
    transition:
      max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.15s ease,
      visibility 0s linear 0.35s;
  }
  .barre-haute[data-reglages-ouvert="true"] .reglages-contenu {
    max-width: 22rem;
    opacity: 1;
    visibility: visible;
    transition:
      max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.25s ease 0.1s,
      visibility 0s linear 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reglages-contenu { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}