:root{
  --color-backgroundBlanc: #F8F9FA;
  --color-accentuationBleu: #055EB1 ;
  --color-accentuationBleuClair: #7cbbfd;
  --color-jaunemoche : #EBBD3F;
  --color-iconeRouge: #F90A0A;
  --color-grisClair: #EBEBEB;
  /* --color-accentuationBleu: #003566; */
}

.colorJauneMoche{
  color: var(--color-jaunemoche);
} 
.colorBleuSombre{
  color: var(--color-accentuationBleu);
} 

.colorBleuClair{
  color: var(--color-accentuationBleuClair);
} 


*{
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Bonne pratique */
}

body{
  background-color: var(--color-backgroundBlanc);
  font-family: Roboto, serif;
}
 
.label-slider{
  font-size: 0.8rem !important;
}
/* --- Styles pour le conteneur des sliders --- */
 /* .range-container {
    display: flex;
  flex-direction: column;
  width: 80%;  
    margin: 0 auto; 
    
}  */

.sliders_control {
  position: relative; /* ESSENTIEL pour positionner les sliders absolument à l'intérieur */
  height: 50px; /* Hauteur suffisante pour contenir les curseurs et la barre */
  display: flex; /* Bien que les enfants soient absolus, peut aider à l'alignement initial */
  align-items: center;
}

/* --- Styles de base pour les DEUX barres (pistes) --- */
input[type="range"] {
  -webkit-appearance: none; /* Nécessaire pour Webkit */
  appearance: none;         /* Standard */
  width: 100%;
  height: 8px;              /* Hauteur de la piste */
  background: #e8e7e7;    /* Couleur de la piste pour barreMin */
  border-radius: 5px;
  outline: none;
  padding: 0;
  margin: 0;
  position: absolute;      /* Positionnement absolu pour superposition */
  top: 50%;                /* Centre verticalement */
  transform: translateY(-50%); /* Ajustement fin du centrage vertical */
  pointer-events: none;    /* La PISTE n'est pas cliquable */
  z-index: 1;              /* Niveau de base */
}

/* --- Style spécifique pour la piste de la barre MAX --- */
#barreMin{
  background-color: var(--color-accentuationBleuClair)!important;
  z-index: 2; /* S'assure qu'elle est au-dessus de barreMin si jamais elles se superposent */
}
/* Rend la piste supérieure transparente pour voir celle du dessous */
#barreMax{
  background-color: transparent;
  z-index: 2; /* S'assure qu'elle est au-dessus de barreMin si jamais elles se superposent */
}

#barreAnneeMax{
  background-color: transparent !important;
  z-index: 2; /* S'assure qu'elle est au-dessus de barreMin si jamais elles se superposent */
}

#barreAnneeMin{
  background-color: var(--color-accentuationBleuClair)!important;
  z-index: 2; /* S'assure qu'elle est au-dessus de barreMin si jamais elles se superposent */
}


#barreMin::-moz-range-track {
  background-color: var(--color-accentuationBleuClair )!important;
}
#barreAnneeMin::-moz-range-track {
  background-color: var(--color-accentuationBleuClair) !important;
}
#barreAnneeMax::-moz-range-track {
  background-color: transparent !important;
}
#barreMax::-moz-range-track {
  background-color: transparent !important;
}

/* --- Styles pour le CURSEUR (thumb) --- */

/* Curseur pour WebKit (Chrome, Safari, Edge, Opera) */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Obligatoire pour styler */
  appearance: none;
  width: 7px;          /* Largeur du curseur */
  height: 24px;         /* Hauteur du curseur (vertical) */
  background-color: var(--color-jaunemoche); /* Couleur du curseur */
  border-radius: 3px;
  cursor: pointer;
  pointer-events: all;  /* TRES IMPORTANT: Rend le CURSEUR cliquable/déplaçable */
  position: relative;   /* Permet z-index */
  z-index: 3;           /* Doit être au-dessus des pistes */
  /* box-shadow: 0 0 0 1px #C6C6C6; /* Optionnel */
}

/* Curseur pour Firefox */
input[type=range]::-moz-range-thumb {
  /* Pas besoin de -moz-appearance: none; ici */
  width: 7px;          /* Largeur du curseur */
  height: 24px;         /* Hauteur du curseur (vertical) */
  background-color: var(--color-jaunemoche); /* Couleur du curseur */
  border-radius: 3px;
  border: none;         /* Enlève la bordure par défaut de Firefox */
  cursor: pointer;
  pointer-events: all;  /* TRES IMPORTANT: Rend le CURSEUR cliquable/déplaçable */
  position: relative;   /* Permet z-index */
  z-index: 3;           /* Doit être au-dessus des pistes */
  /* box-shadow: 0 0 0 1px #C6C6C6; /* Optionnel */
}

/* --- Styles Hover/Active pour le CURSEUR --- */

/* Hover */
input[type=range]::-webkit-slider-thumb:hover {
  background: var(--color-backgroundBlanc);
}
input[type=range]::-moz-range-thumb:hover { /* Ajout pour Firefox */
  background: var(--color-backgroundBlanc);
}

/* Active (pendant le glissement) */
input[type=range]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #ffffff, 0 0 9px #ffffff;
  -webkit-box-shadow: inset 0 0 3px #ffffff, 0 0 9px #ffffff;
}
input[type=range]::-moz-range-thumb:active { /* Ajout pour Firefox */
  /* Vous pouvez définir un style 'active' pour Firefox, par ex. une ombre ou une couleur différente */
   box-shadow: inset 0 0 3px #ffffff, 0 0 9px #ffffff; /* Essayez si ça marche */
  /* Ou simplement une couleur: */
  /* background-color: #333; */
}


/* --- Styles pour les inputs numériques --- */
/* .form_control {
  position: relative; Garder relatif si besoin
  display: flex;
  justify-content: space-between;
  font-size: 24px; Taille texte 'Min'/'Max'
  color: #635a5a;
 
  margin-top: 15px; Espace après les sliders
} */

.form_control_container {
  display: flex;
  flex-direction: column; /* Label au-dessus de l'input */
  align-items: center;
}

.form_control_container__time {
  font-size: 0.8em; /* Taille du label (Min/Max) */
  margin-bottom: 5px;
  
}
/* 
.form_control_container__time__input {
  /* Utilise les styles de input[type=number] 
} */

input[type="number"] {
  color: var(--color-accentuationBleu); /* Couleur du texte */ 
  width: 60px; /* Un peu plus large peut-être */
  height: 30px;
  font-size: 20px;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  text-align: center;
  padding: 2px 5px;
  /* Supprime les flèches */
  -moz-appearance: textfield; /* Firefox */
}
/* Webkit */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}





a{
  text-decoration: none;
  
}

h1{
  font-family: Nunito Sans, serif;
  letter-spacing: -3px;
  font-size: 5rem !important;
  color: var(--color-accentuationBleu); 
  text-align: center; 
  text-shadow: 0.5rem 0.5rem 0.7rem rgba(0, 0, 0, 0.2); 
}

@media (max-width: 768px) {
  h1 {
    font-size: 3rem !important;
  }
}

.navIndex{
  min-height: 20vh; 
 
}

label{
  color: var(--color-accentuationBleuClair);
}

/*  */
.mainIndex{
  height: 60vh;
  display: flex; 
  flex-direction: column;
  align-items: center; 
  padding-top: 20px; 
  background-color: var(--color-backgroundBlanc);
}

.chevron {
    margin-top: 20px;
    display: block;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
    color: var(--color-accentuationBleuClair);
    }

    @-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }

@keyframes pulse {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px); }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); } }


  



.accueilGlobal{
  padding-top: 5rem;

}

.chevronO{
  border: none;
  color: var(--color-accentuationBleu);
  background-color: transparent;
  font-size: 30px;
}

.footerIndex{

  min-height: 20vh; /* Utilisez peut-être min-height */
}

.navIndex, .footerIndex {
  /* Couleur de fond FINALE (celle qui sera révélée) */
  background-color: var(--color-backgroundBlanc);
  /* Position relative pour positionner le pseudo-élément absolument */
  position: relative;
  /* Cache tout ce qui dépasse (important pour l'effet de glissement) */
  overflow: hidden;
  /* Ajoutez d'autres styles si besoin : padding, height, etc. */

  color: var(--color-accentuationBleu); /* Couleur du texte sur fond jaune */
}

.navIndex::before,
.footerIndex::before {
    content: ''; /* Nécessaire pour qu'un pseudo-élément s'affiche */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black; /* Couleur initiale */
    z-index: 1; /* Pour être au-dessus du background jaune de l'élément parent */

    /* La transition s'appliquera à la transformation */
    transition: transform 0.6s ease-in-out; /* Durée et type de transition */
}

.navIndex.color-changed::before {
  /* Déplace le ::before de la nav vers le HAUT */
  transform: translateY(-100%);
}

.footerIndex.color-changed::before {
  /* Déplace le ::before du footer vers le BAS */
  transform: translateY(100%);
}

.iconeNavIndex{
  font-size: 2rem;
  color: var(--color-backgroundBlanc); /* Couleur initiale (jaune) */
  /* Position relative pour pouvoir utiliser z-index */
  position: relative;
  /* Mettre l'icône AU-DESSUS de la couche ::before de nav/footer (qui a z-index: 1) */
  z-index: 2;
  /* Ajouter une transition pour le changement de couleur de l'icône elle-même */
  transition: color 0.6s ease-in-out; /* Même durée que le fond pour la synchro */
  /* Important : Assurez-vous que l'icône n'est pas affectée par l'overflow:hidden du parent
     si elle devait dépasser un peu (peu probable pour une icône mais bon à savoir).
     Cela dépendra de la structure HTML exacte. Souvent, ce n'est pas un problème. */
}

.navIndex.color-changed .iconeNav {
  color: var(--color-accentuationBleu); /* Couleur finale (bleu) */
}

.boutonFind{
  background-color: var(--color-jaunemoche);
  color: var(--color-accentuationBleu);
  font-family: Roboto, serif;
  border: none;
  padding:1px 30px;
  font-size: 20px;
  border-radius: 30px;
  cursor: pointer;
  z-index: 2; /* Pour être au-dessus du ::before */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transition pour le changement de couleur */
}

.sectionCachee {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.sectionCachee.visible {
  max-height: 100%; /* Large enough to reveal content */
  opacity: 1;
}

.labelFont{
  font-size: 0.8rem; /* Taille du texte de la case à cocher */
  color: var(--color-accentuationBleuClair);
  font-weight: 500;
}

.form-check-input{
  height: 1.2rem !important;
  width: 1.2rem !important;
}


.checkbox-item input[type="checkbox"]{
  cursor : pointer;

}

.checkbox-item input[type="checkbox"]:checked {
  background-color: var(--color-accentuationBleu);
  color : var(--color-jaunemoche);
}


/***************** Page non index *******************/
.logo{
  width: 100%;
  object-fit: contain;
}


.headerFilm{
  /* height: 20vh; */
  background-color: var(--color-backgroundBlanc);
}

.footerFilm{
  background-color: var(--color-backgroundBlanc);
  height: 10px;
  
}

.bgSite{
  background-color: var(--color-backgroundBlanc);
}

.iconeNav{
  font-size: 2rem;
  color: var(--color-accentuationBleu); /* Couleur initiale (jaune) */
  /* Position relative pour pouvoir utiliser z-index */

}

.item-drop{

  color: var(--color-accentuationBleu); /* Couleur initiale (jaune) */
  /* Position relative pour pouvoir utiliser z-index */

}

nav button{
  border: none;
  background-color: transparent;
}
/***************** Page Film *******************/



.img-film {
  
  max-height: 70vh; /* Limite la hauteur de l'image à la hauteur du viewport moins la hauteur du footer */
  width: auto; /* Garde les proportions de l'image */
  object-fit: contain; /* Ajuste l'image pour qu'elle reste visible sans déformation */
  /* display: block; Évite les marges indésirables */
  
  box-shadow: 0px 0px 10px var(--color-accentuationBleu);
}

.main-film {
  display: flex; /* Active Flexbox pour aligner le contenu */
  flex-direction: column; /* Aligne les éléments verticalement */
  align-items: center; /* Centre horizontalement */
  justify-content: center; /* Centre verticalement */
  /* overflow: hidden; Cache tout dépassement */
}

.color-texte-accentuation{

  color: var(--color-accentuationBleu);
}

.surlignement{
  text-decoration: underline;
  text-decoration-color: var(--color-accentuationBleuClair);
  text-underline-position: under;
}

.btn-changement{
  
  background-color: var(--color-accentuationBleu);
  color: var(--color-jaunemoche);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.btn-changement:hover{
  background-color: var(--color-jaunemoche);
  color: var(--color-accentuationBleu);
}

.btn-changement:active{
  background-color: var(--color-jaunemoche);
  color: var(--color-accentuationBleu);
}

.icone-dynamique{
  color: var(--color-accentuationBleu);
}

.iconeRating{
  width: 40px;
  height: auto;
}
.imdbRating,.tmdbRating{
  color: var(--color-accentuationBleu);
}

.btn-film{
  background-color: var(--color-jaunemoche);
  color: var(--color-accentuationBleu);
  font-family: Roboto, serif;
  border: none;

  cursor: pointer;

  transition: background-color 0.3s ease, color 0.3s ease; /* Transition pour le changement de couleur */
}

.boutonSendData{
  background-color: var(--color-jaunemoche);
  /* border: 1px solid var(--color-accentuationBleu); */
  width: 3rem;
  height: 3rem;
  /* box-shadow: 2px 2px 2px var(--color-accentuationBleu); */
  border-radius: 50%;
}

/***************** Page List *******************/


.divListFilm{
   scrollbar-width: thin; /* Équivalent à width: 8px en WebKit */
  scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 162, 255, 0.397); /* Format: thumb track */
}

.divListFilm::-webkit-scrollbar-track {
  background: rgba(0, 162, 255, 0.397); /* Rend le fond de la piste transparent */
}

.divListFilm::-webkit-scrollbar {
  width: 8px; /* Largeur de la scrollbar */
}

.divListFilm::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5); /* Couleur du curseur avec transparence */
  border-radius: 4px; /* Arrondir les coins */
}


.divScroll {
   /* display: flex !important; */
  /* flex-direction: column !important; */
  overflow-y: auto;
  height: 85vh;
  /* border-right: 2px solid var(--color-accentuationBleuClair); */
}

.middlebar{
  padding: 0px !important;
 background-color: var(--color-accentuationBleuClair);
 margin: auto;
 height: 60vh;
  width: 5px;
  border-radius: 10px;
  
}

.divScroll-inner-flex-container {
  
  overflow: hidden; /* TRÈS IMPORTANT: C'est MAINTENANT ce conteneur qui doit
                       empêcher .divListFilm de l'étirer au-delà de sa hauteur (100% de .divScroll). */
}

.divListFilm {
    flex-grow: 1; /* Pour prendre tout l'espace DANS .divScroll */
  overflow-y: auto; /* Pour scroller */
  min-height: 0; /* Toujours essentiel pour le scroll dans un parent flex */
}

#titleShow{
  color: var(--color-accentuationBleu);
}

.filmInList {
  cursor: pointer; /* Indique que l'élément est cliquable */
}

.filmInList:hover {
    background-color: #83a0f18e; /* Effet de survol léger */
  }


.posterFilmList {
  height: 10rem;
  width: auto; /* Garde les proportions de l'image */
  object-fit: contain; /* Ajuste l'image pour qu'elle reste visible sans déformation */
  display: block; /* Évite les marges indésirables */
  margin: 0 auto; /* Centre l'image horizontalement */
}

.detailsFilm{
  height: 100%;
}

.divAfficheFilm{

  height: 50vh;
}

.detailsAfficheFilm {
  max-width: 100%;
  max-height: 100%; /* Pour s'assurer qu'elle ne dépasse pas divAfficheFilm */
  height: auto;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 10px var(--color-accentuationBleu);
}


/***************** Login *******************/

.loginMain{
  height: 80vh; /* min-height est souvent mieux que height */
}

.card-border{
  max-Width: 400px;
  background-Color:  var(--color-backgroundBlanc);
  border: 2px solid var(--color-accentuationBleu) !important;
  border-radius: 10px;

}

.boutonSite{
  background-color: var(--color-accentuationBleu)!important;
  /* color: var(--color-backgroundBlanc)!important; */
  font-family: Roboto, serif;
}

.boutonSite:hover{
  background-color: var(--color-jaunemoche)!important;
  color: var(--color-accentuationBleu)!important;
}

.labelFormLogin{
  color: var(--color-accentuationBleu) !important;
}

.inputFormLogin{
  background-color: transparent !important;
  color: var(--color-accentuationBleu) !important;
  border-color: var(--color-accentuationBleu) !important;
}

.inputFormLogin::placeholder{
  color : var(--color-accentuationBleuClair) !important;
  font-weight: 300 !important;
}



/***************** Register *******************/

.RegisterMain{
  height: 80vh; /* min-height est souvent mieux que height */
}

.card-border{
  max-Width: 400px;
  background-Color:  var(--color-backgroundBlanc);
  border: 1px solid var(--color-accentuationBleu);
  border-radius: 10px;

}



.labelFormRegister{
  color: var(--color-accentuationBleu) !important;
}

.inputFormRegister{
  background-color: transparent !important;
  color: var(--color-accentuationBleu) !important;
  border-color: var(--color-accentuationBleu) !important;
}

.inputFormRegister::placeholder{
  color : var(--color-accentuationBleuClair) !important;
  font-weight: 300 !important;
}


/***************** Page de profil *******************/

.borderProfil{
  border-width: 2px !important;
  border-color: var(--color-accentuationBleu) !important;
}