/* === BASE GLOBALE & TYPO === */

/* Supprime les marges/paddings de base + empêche le scroll horizontal */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* === BOUTON MODE SOMBRE/CLAIR === */

/* Bouton toggle simple, sans style de fond ni bordure */
#theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}

/* Couleur de l’icône selon le thème */
[data-bs-theme="dark"] #theme-icon {
    color: #f8f9fa;
}
[data-bs-theme="light"] #theme-icon {
    color: #212529;
}

/* === SLIDER DE VOLUME === */

/* Conteneur du slider (100% largeur) */
.slidecontainer {
  width: 100%;
}

/* Style général du slider */
.slider {
  -webkit-appearance: none;   /* Enlève le style par défaut (Safari/Chrome) */
  appearance: none;           /* Compatibilité autres navigateurs */
  width: 100%;                /* Occupe toute la largeur dispo */
  height: 8px;                /* Hauteur de la "barre" */
  border-radius: 5px;         /* Coins arrondis */
  background: #d3d3d3;        /* Couleur de fond */
  outline: none;              /* Supprime la bordure focus */
  opacity: 0.7;               /* Transparence légère */
  transition: opacity .2s;    /* Animation fluide au survol */
}

/* Augmente l’opacité du slider au survol */
.slider:hover {
  opacity: 1;
}

/* Style du "bouton" de contrôle (pouce) – version Webkit (Chrome, Safari) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;         /* Cercle parfait */
  background: #090918;        /* Couleur du bouton */
  cursor: pointer;
}

/* Style du "bouton" – version Firefox */
.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #090918;
  cursor: pointer;
}

/* Agrandit le conteneur de volume au survol */
.volume-wrapper:hover {
  width: 130px !important;
}

/* Affiche le slider quand on survole le wrapper */
.volume-wrapper:hover input[type=range] {
  display: inline-block !important;
}

/* Titres principaux avec un style visuel fort */
h1, h2 {
    font-weight: bold;
    margin-top: 2rem;
}

/* === BANNIÈRE === */

/* Conteneur principal de la bannière */
.banner {
    position: relative;
    width: 100%;
    height: 450px;                /* Hauteur de la bannière */
    overflow: hidden;            /* Cache le dépassement */
    display: flex;
    justify-content: center;     /* Centrage horizontal */
    align-items: center;         /* Centrage vertical */
}

/* Image de fond floutée */
.banner-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  z-index: 1;
}


/* Conteneur de l’image nette au centre */
.cover-container {
    position: relative;
    z-index: 2;                  /* Au-dessus de l’image floutée */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Image nette avec ombre */
.cover {
    max-width: 45%;
    height: auto;
    object-fit: contain;         /* Garde le ratio original */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* Ombre stylée */
}

/* Variante image responsive */
.cover-img {
    max-height: 500px;
    object-fit: contain;
}

/* === CARD UI === */

/* Style de base d’une carte */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Mode sombre : fond sombre et texte clair */
[data-bs-theme="dark"] .card {
    background-color: #1e1e2f;
    color: #f8f9fa;
}

/* Mode clair : fond blanc et texte foncé */
[data-bs-theme="light"] .card {
    background-color: #ffffff;
    color: #212529;
}

/* === NAVBAR RESPONSIVE === */

/* Couleurs navbar sombre */
[data-bs-theme="dark"] .navbar {
    background-color: #212529 !important;
}
[data-bs-theme="dark"] .navbar .nav-link {
    color: #f8f9fa !important;
}

/* Couleurs navbar claire */
[data-bs-theme="light"] .navbar {
    background-color: #f8f9fa !important;
}
[data-bs-theme="light"] .navbar .nav-link {
    color: #212529 !important;
}

/* === Pagitanion === */

/* Style de base du lien de pagination) */
.nav-arrow {
  display: inline-flex;           /* Pour aligner texte et icône horizontalement */
  align-items: center;           /* Centrage vertical parfait entre texte et icône */
  gap: 0.25rem;                  /* Espacement entre le texte et l’icône */
  text-decoration: none;         /* Supprime tout soulignement */
  transition: color 0.2s ease;   /* Transition fluide de la couleur (si survol) */
}

/* Préparation de l'icône pour l’animation */
.nav-arrow i {
  transition: transform 0.3s ease; /* Animation fluide quand l’icône bouge */
}

/* Animation flèche droite */
.nav-arrow.arrow-right:hover i {
  transform: translateX(4px);     /* Déplace la flèche vers la droite */
}

/* Animation flèche gauche */
.nav-arrow.arrow-left:hover i {
  transform: translateX(-4px);    /* Déplace la flèche vers la gauche */
}