/* style.css */

/* --- 0. Variables et Base --- */
:root {
  --brand-orange: #fc9105; /* Nouvelle couleur dominante (Orange) */
  --accent-dark: #7d03a4;  /* Nouvelle couleur secondaire (Violet) */
  --card-bg: #f6f6f6;
  --muted: #777;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #f8f9fa; /* Fond clair général */
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
    flex: 1; /* Assure que le contenu principal prend l'espace restant */
}

a {
    color: var(--brand-orange);
    text-decoration: none;
    transition: color 0.2s;
}


a:hover {
    color: var(--accent-dark); /* Changement: Utilisation de la couleur secondaire */
}


/* --- 1. Header et Navigation --- */

.site-topbar {
  background: var(--brand-orange); /* Changement: Utilisation de la nouvelle couleur dominante */
  color: #fff;
  padding: 10px 0;
}

.site-topbar .navbar-brand {
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff !important;
}

.site-topbar .nav-link {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.site-topbar .nav-link:hover { opacity: .9; }

/* Bouton dans la navbar */
.site-topbar .btn-outline-light {
    border-color: #fff;
    color: #fff;
}
.site-topbar .btn-outline-light:hover {
    background-color: #fff;
    color: var(--brand-orange);
}


/* --- 2. Section HERO (Index) --- */

.hero {
  background: #000;
  padding: 0;
}
.hero .carousel-item {
  height: 370px;
  background-size: cover;
  background-position: center;
}
.hero .overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
  height: 100%;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.hero .overlay h2 {
    font-size: 1.75rem;
}


/* --- 3. Titres et Sections de Contenu --- */

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 30px;
    text-align: center;
}

/* Style de la section d'appel à l'action Artiste (shop-cta) */
.shop-cta {
    background-color: var(--brand-orange); /* Changement: Utilisation de la nouvelle couleur dominante */
    padding: 30px;
    border-radius: 8px;
    color: #fff;
}
.shop-cta p {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* --- 4. Cartes Produits (Singles) et Artistes --- */

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.product-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.product-card .card-img-top {
    width: 100%;
    height: 180px; /* Hauteur fixe pour l'homogénéité */
    object-fit: cover;
}

/* Les styles pour les cartes TV/Actus ont été supprimés */


/* --- 5. Styles pour les Pages d'Authentification (connexion, inscription, mdp oublie) --- */

.auth-container {
    /* Centre verticalement et horizontalement la carte sur la page */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Assure que le conteneur prend au moins toute la hauteur de la fenêtre (moins le header/footer) */
    min-height: calc(100vh - 120px); 
    padding: 30px 0;
}

.auth-card {
    /* Largeur maximale */
    max-width: 450px; 
    width: 100%;
    padding: 30px;
    border: 1px solid #dee2e6; 
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
    background-color: #ffffff;
}

.auth-card h1, .auth-card h2 {
    font-weight: 700;
    font-size: 1.8rem;
    color: #343a40; 
    margin-bottom: 25px;
    text-align: center;
}

/* Amélioration de l'input et du bouton dans les formulaires d'authentification */
.auth-card .form-control {
    border-radius: 5px;
}

.auth-card .btn-dark,
.auth-card .btn-primary {
    /* Utilisation du .btn-dark de Bootstrap comme couleur principale */
    /* Changement: Utilisation de la couleur secondaire pour le bouton principal/foncé */
    background-color: var(--accent-dark); 
    border-color: var(--accent-dark);
    width: 100%; 
    padding: 10px;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.2s;
}

.auth-card .btn-dark:hover,
.auth-card .btn-primary:hover {
    /* Changement: Utilisation de la couleur dominante au survol */
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.auth-card .help-block {
    color: #dc3545; /* Couleur d'erreur rouge de Bootstrap */
    font-size: 0.85rem;
}


/* --- 6. Styles pour le Lecteur Audio Fixe (mes_singles_achetes.php) --- */

.audio-player-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a; /* Fond sombre */
    color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1050; 
    display: none; /* Masqué par défaut */
    align-items: center;
    justify-content: space-between;
}

.audio-player-fixed.is-active {
    display: flex; /* Affiché par JavaScript */
}

.audio-player-fixed .track-info {
    display: flex;
    align-items: center;
    width: 300px; /* Largeur fixe ou flex-grow pour l'info */
}

.audio-player-fixed .track-info img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-right: 15px;
    object-fit: cover;
}

.audio-player-fixed .track-info h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player-fixed .track-info p {
    margin: 0;
    font-size: 0.75rem;
    color: #999;
}

.audio-player-fixed .player-controls {
    display: flex;
    align-items: center;
    /* Centrer les contrôles sur l'écran */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.audio-player-fixed .btn-play-pause {
    background-color: var(--brand-orange); /* Changement: Utilisation de la nouvelle couleur dominante */
    border: none;
    color: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.audio-player-fixed .btn-play-pause:hover {
    /* Changement: Utilisation d'une variation plus claire de la couleur dominante */
    background-color: #ffb066; 
}

/* Masquer le contrôle audio HTML5 natif */
#audioElement {
    display: none;
}


/* --- 7. Footer --- */

footer {
    /* Changement: Utilisation de la couleur secondaire pour le fond du footer */
    background-color: var(--accent-dark); 
    color: #ffffff;
    padding: 40px 0 20px;
}
footer h5, footer h6 {
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}
footer .small {
    font-size: 0.85rem;
    color: #bbb !important;
}
footer a {
    color: #fff;
    opacity: 0.8;
}
footer a:hover {
    opacity: 1;
}

/* Réactivité mobile (Optionnel, si non couvert par Bootstrap) */
@media (max-width: 768px) {
    .hero .carousel-item {
        height: 250px;
    }
    .hero .overlay h2 {
        font-size: 1.2rem;
    }
    .audio-player-fixed .player-controls {
        position: static;
        transform: none;
    }
}

/* Conteneur principal pour centrer le formulaire */
.auth-container {
    /* Utilise Flexbox pour centrer le contenu à la fois verticalement et horizontalement */
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    min-height: 100vh; /* S'assure qu'il prend toute la hauteur de la fenêtre */
    padding: 20px;
    background-color: var(--card-bg); /* Utilise la variable de fond clair définie dans :root */
}

/* La carte ou le bloc contenant le formulaire */
.auth-card {
    background-color: #ffffff; /* Fond blanc pour le bloc du formulaire */
    padding: 30px;
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombre légère pour donner un effet de carte */
    max-width: 450px; /* Limite la largeur du formulaire */
    width: 100%; /* S'adapte aux écrans plus petits */
    text-align: center; /* Centre les éléments enfants comme le titre et le texte */
}

.auth-card .page-header h2 {
    /* Changement: Utilisation de la couleur secondaire pour le titre du formulaire */
    color: var(--accent-dark); 
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
}

/* Styles pour les formulaires (à l'intérieur de la carte) */
.auth-card .form-group {
    margin-bottom: 20px;
    text-align: left; /* Aligne les labels à gauche */
}

.auth-card .form-group label {
    font-weight: 600;
    display: block; /* S'assure que le label prend sa propre ligne */
    margin-bottom: 5px;
}

.auth-card .form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box; /* IMPORTANT: Inclut le padding et la bordure dans la largeur */
}

/* Style de base pour les boutons de soumission */
.auth-card .btn-primary {
    /* Changement: Utilisation de la couleur dominante pour le bouton principal/primaire */
    background-color: var(--brand-orange);
    color: #ffffff;
    border: 1px solid var(--brand-orange);
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Pour prendre toute la largeur de la carte */
    transition: background-color 0.2s;
    font-size: 16px;
    font-weight: 700;
}

.auth-card .btn-primary:hover {
    /* Changement: Utilisation de la couleur secondaire au survol */
    background-color: var(--accent-dark); 
    border-color: var(--accent-dark);
}

/* Messages d'erreur */
.auth-card .has-error .form-control {
    border-color: #dc3545; /* Rouge pour le champ en erreur */
}

.auth-card .help-block {
    color: #dc3545; /* Texte d'erreur en rouge */
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

/* Messages d'alerte (succès/erreur dans mot_de_passe_oublie.php) */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* Lien de retour/inscription */
.auth-card p {
    margin-top: 15px;
}

/* --- 8. Style pour le Lecteur Audio Personnalisé Intégré (single_details.php) --- */
.custom-audio-player {
    background-color: #1a1a1a; /* Fond très sombre, comme le modèle */
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.custom-audio-player #audioPlayer {
    display: none; /* Masque l'élément audio natif */
}

/* Boutons de contrôle (Play/Pause, Volume) */
.custom-audio-player .btn-custom-control {
    background: none;
    border: none;
    color: #fff;
    padding: 5px 8px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1; /* Assure un bon alignement vertical de l'icône */
}

.custom-audio-player .btn-custom-control:hover {
    color: var(--brand-orange); /* Changement: Utilisation de la couleur dominante au survol */
}

/* Conteneur de la barre de progression */
.progress-bar-container {
    height: 6px;
    background-color: #555; /* Fond de la barre (gris foncé) */
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

/* Remplissage/Avancement de la barre de progression */
.progress-bar-fill {
    height: 100%;
    width: 0%; 
    background-color: #aaa; /* Couleur de progression (gris clair) */
    border-radius: 3px;
    transition: width 0.1s linear; /* Animation douce de l'avancement */
}

/* Slider de Volume */
.volume-slider {
    width: 60px; /* Largeur réduite pour le slider */
    margin-left: 5px;
    /* Styles pour masquer l'apparence native */
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #555;
    outline: none;
    cursor: pointer;
}

/* Curseur du slider (Thumb) pour Chrome/Safari */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* Curseur du slider (Thumb) pour Firefox */
.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none; /* Supprime la bordure Firefox par défaut */
}

/* Style pour le temps écoulé */
.current-time {
    color: #fff;
    width: 35px; /* Largeur fixe pour éviter le saut de mise en page */
    text-align: center;
}

/* Style pour l'image de la navbar */
.site-topbar .navbar-logo {
    height: 35px; /* Ajustez la hauteur selon la taille de votre logo */
    width: auto;
    /* Optionnel: Si votre logo n'est pas blanc, vous pourriez avoir besoin d'un filtre pour le rendre visible sur le fond orange. */
    /* filter: brightness(0) invert(1); */ 
}
/* S'assurer que le lien (navbar-brand) a la bonne couleur s'il y a du texte résiduel */
.site-topbar .navbar-brand {
  color: #fff !important;
}

/* style.css */

/* --- 0. Variables et Base --- */
:root {
  --brand-orange: #fc9105; /* Nouvelle couleur dominante (Orange) */
  --accent-dark: #7d03a4;  /* Nouvelle couleur secondaire (Violet) */
  --card-bg: #f6f6f6;
  --muted: #777;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #f8f9fa; /* Fond clair général */
  color: #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

}

main {
    flex: 1; /* Assure que le contenu principal prend l'espace restant */
}

a {
    color: var(--brand-orange);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-dark); /* Changement: Utilisation de la couleur secondaire */
}


/* --- 1. Header et Navigation --- */

.site-topbar {
  background: var(--brand-orange); /* Changement: Utilisation de la nouvelle couleur dominante */
  color: #fff;
  padding: 10px 0;
}

.site-topbar .navbar-brand {
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff !important;
}

.site-topbar .nav-link {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.site-topbar .nav-link:hover { opacity: .9; }

/* Bouton dans la navbar */
.site-topbar .btn-outline-light {
    border-color: #fff;
    color: #fff;
}
.site-topbar .btn-outline-light:hover {
    background-color: #fff;
    color: var(--brand-orange);
}


/* --- 2. Section HERO (Index) --- */

.hero {
  background: #000;
  padding: 0;
}
.hero .carousel-item {
  height: 370px;
  weight: 1140;
  background-size: cover;
  background-position: center;
}
.hero .overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
  height: 100%;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.hero .overlay h2 {
    font-size: 1.75rem;
}


/* --- 3. Titres et Sections de Contenu --- */

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 30px;
    text-align: center;
}

/* Style de la section d'appel à l'action Artiste (shop-cta) */
.shop-cta {
    background-color: var(--brand-orange); /* Changement: Utilisation de la nouvelle couleur dominante */
    padding: 30px;
    border-radius: 8px;
    color: #fff;
}
.shop-cta p {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* --- 4. Cartes Produits (Singles) et Artistes --- */

.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.product-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.product-card .card-img-top {
    width: 100%;
    height: 180px; /* Hauteur fixe pour l'homogénéité */
    object-fit: cover;
}


.product-card-2 .card-img-top-2 {
    width: 300;
    height: 80px; /* Hauteur fixe pour l'homogénéité */
    object-fit: cover;
}

/* Les styles pour les cartes TV/Actus ont été supprimés */


/* --- 5. Styles pour les Pages d'Authentification (connexion, inscription, mdp oublie) --- */

.auth-container {
    /* Centre verticalement et horizontalement la carte sur la page */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Assure que le conteneur prend au moins toute la hauteur de la fenêtre (moins le header/footer) */
    min-height: calc(100vh - 120px); 
    padding: 30px 0;
}

.auth-card {
    /* Largeur maximale */
    max-width: 450px; 
    width: 100%;
    padding: 30px;
    border: 1px solid #dee2e6; 
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
    background-color: #ffffff;
}

.auth-card h1, .auth-card h2 {
    font-weight: 700;
    font-size: 1.8rem;
    color: #343a40; 
    margin-bottom: 25px;
    text-align: center;
}

/* Amélioration de l'input et du bouton dans les formulaires d'authentification */
.auth-card .form-control {
    border-radius: 5px;
}

.auth-card .btn-dark,
.auth-card .btn-primary {
    /* Utilisation du .btn-dark de Bootstrap comme couleur principale */
    /* Changement: Utilisation de la couleur secondaire pour le bouton principal/foncé */
    background-color: var(--accent-dark); 
    border-color: var(--accent-dark);
    width: 100%; 
    padding: 10px;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.2s;
}

.auth-card .btn-dark:hover,
.auth-card .btn-primary:hover {
    /* Changement: Utilisation de la couleur dominante au survol */
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

.auth-card .help-block {
    color: #dc3545; /* Couleur d'erreur rouge de Bootstrap */
    font-size: 0.85rem;
}


/* --- 6. Styles pour le Lecteur Audio Fixe (mes_singles_achetes.php) --- */

.audio-player-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1a1a1a; /* Fond sombre */
    color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1050; 
    display: none; /* Masqué par défaut */
    align-items: center;
    justify-content: space-between;
}

.audio-player-fixed.is-active {
    display: flex; /* Affiché par JavaScript */
}

.audio-player-fixed .track-info {
    display: flex;
    align-items: center;
    width: 300px; /* Largeur fixe ou flex-grow pour l'info */
}

.audio-player-fixed .track-info img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    margin-right: 15px;
    object-fit: cover;
}

.audio-player-fixed .track-info h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audio-player-fixed .track-info p {
    margin: 0;
    font-size: 0.75rem;
    color: #999;
}

.audio-player-fixed .player-controls {
    display: flex;
    align-items: center;
    /* Centrer les contrôles sur l'écran */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.audio-player-fixed .btn-play-pause {
    background-color: var(--brand-orange); /* Changement: Utilisation de la nouvelle couleur dominante */
    border: none;
    color: #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.audio-player-fixed .btn-play-pause:hover {
    /* Changement: Utilisation d'une variation plus claire de la couleur dominante */
    background-color: #ffb066; 
}

/* Masquer le contrôle audio HTML5 natif */
#audioElement {
    display: none;
}


/* --- 7. Footer --- */

footer {
    /* Changement: Utilisation de la couleur secondaire pour le fond du footer */
    background-color: var(--accent-dark); 
    color: #ffffff;
    padding: 40px 0 20px;
}
footer h5, footer h6 {
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}
footer .small {
    font-size: 0.85rem;
    color: #bbb !important;
}
footer a {
    color: #fff;
    opacity: 0.8;
}
footer a:hover {
    opacity: 1;
}


/* --- 8. Style pour le Lecteur Audio Personnalisé Intégré (single_details.php) --- */
.custom-audio-player {
    background-color: #1a1a1a; /* Fond très sombre, comme le modèle */
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
}

.custom-audio-player #audioPlayer {
    display: none; /* Masque l'élément audio natif */
}

/* Boutons de contrôle (Play/Pause, Volume) */
.custom-audio-player .btn-custom-control {
    background: none;
    border: none;
    color: #fff;
    padding: 5px 8px;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1; /* Assure un bon alignement vertical de l'icône */
}

.custom-audio-player .btn-custom-control:hover {
    color: var(--brand-orange); /* Changement: Utilisation de la couleur dominante au survol */
}

/* Conteneur de la barre de progression */
.progress-bar-container {
    height: 6px;
    background-color: #555; /* Fond de la barre (gris foncé) */
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

/* Remplissage/Avancement de la barre de progression */
.progress-bar-fill {
    height: 100%;
    width: 0%; 
    background-color: #aaa; /* Couleur de progression (gris clair) */
    border-radius: 3px;
    transition: width 0.1s linear; /* Animation douce de l'avancement */
}

/* Slider de Volume */
.volume-slider {
    width: 60px; /* Largeur réduite pour le slider */
    margin-left: 5px;
    /* Styles pour masquer l'apparence native */
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #555;
    outline: none;
    cursor: pointer;
}

/* Curseur du slider (Thumb) pour Chrome/Safari */
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

/* Curseur du slider (Thumb) pour Firefox */
.volume-slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none; /* Supprime la bordure Firefox par défaut */
}

/* Style pour le temps écoulé */
.current-time {
    color: #fff;
    width: 35px; /* Largeur fixe pour éviter le saut de mise en page */
    text-align: center;
}


/* --- 9. Styles Unifiés pour la Pagination --- */

/* Conteneur principal de pagination */
.pagination-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Navigation de pagination */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Éléments de pagination */
.page-item {
    margin: 0;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #fff;
    color: var(--brand-orange);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: var(--card-bg);
    border-color: var(--brand-orange);
    color: var(--accent-dark);
    transform: translateY(-1px);
}

/* Page active */
.page-item.active .page-link {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
    font-weight: 600;
}

.page-item.active .page-link:hover {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
    transform: none;
}

/* Éléments désactivés */
.page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    cursor: not-allowed;
    opacity: 0.6;
}

.page-item.disabled .page-link:hover {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #adb5bd;
    transform: none;
}

/* Icones dans la pagination */
.page-link i {
    font-size: 0.9rem;
}

/* Pagination pour les résultats filtrés */
.pagination-info {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 4px;
}

.pagination-info .badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

/* Style pour les boutons de navigation spéciaux */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
    min-width: 80px;
    font-weight: 600;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .hero .carousel-item {
        height: 250px;
    }
    .hero .overlay h2 {
        font-size: 1.2rem;
    }
    .audio-player-fixed .player-controls {
        position: static;
        transform: none;
    }
    
    /* Responsive pagination */
    .pagination {
        gap: 0.15rem;
    }
    
    .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
    }
    
    .page-item:first-child .page-link,
    .page-item:last-child .page-link {
        min-width: 70px;
    }
    
    .page-link i {
        font-size: 0.8rem;
    }
}

/* Conteneur principal pour centrer le formulaire */
.auth-container {
    /* Utilise Flexbox pour centrer le contenu à la fois verticalement et horizontalement */
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center; /* Centrage vertical */
    min-height: 100vh; /* S'assure qu'il prend toute la hauteur de la fenêtre */
    padding: 20px;
    background-color: var(--card-bg); /* Utilise la variable de fond clair définie dans :root */
}

/* La carte ou le bloc contenant le formulaire */
.auth-card {
    background-color: #ffffff; /* Fond blanc pour le bloc du formulaire */
    padding: 30px;
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombre légère pour donner un effet de carte */
    max-width: 450px; /* Limite la largeur du formulaire */
    width: 100%; /* S'adapte aux écrans plus petits */
    text-align: center; /* Centre les éléments enfants comme le titre et le texte */
}

.auth-card .page-header h2 {
    /* Changement: Utilisation de la couleur secondaire pour le titre du formulaire */
    color: var(--accent-dark); 
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
}

/* Styles pour les formulaires (à l'intérieur de la carte) */
.auth-card .form-group {
    margin-bottom: 20px;
    text-align: left; /* Aligne les labels à gauche */
}

.auth-card .form-group label {
    font-weight: 600;
    display: block; /* S'assure que le label prend sa propre ligne */
    margin-bottom: 5px;
}

.auth-card .form-control {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box; /* IMPORTANT: Inclut le padding et la bordure dans la largeur */
}

/* Style de base pour les boutons de soumission */
.auth-card .btn-primary {
    /* Changement: Utilisation de la couleur dominante pour le bouton principal/primaire */
    background-color: var(--brand-orange);
    color: #ffffff;
    border: 1px solid var(--brand-orange);
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%; /* Pour prendre toute la largeur de la carte */
    transition: background-color 0.2s;
    font-size: 16px;
    font-weight: 700;
}

.auth-card .btn-primary:hover {
    /* Changement: Utilisation de la couleur secondaire au survol */
    background-color: var(--accent-dark); 
    border-color: var(--accent-dark);
}

/* Messages d'erreur */
.auth-card .has-error .form-control {
    border-color: #dc3545; /* Rouge pour le champ en erreur */
}

.auth-card .help-block {
    color: #dc3545; /* Texte d'erreur en rouge */
    font-size: 13px;
    margin-top: 5px;
    display: block;
}

/* Messages d'alerte (succès/erreur dans mot_de_passe_oublie.php) */
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: left;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

/* Lien de retour/inscription */
.auth-card p {
    margin-top: 15px;
}

/* Style pour l'image de la navbar */
.site-topbar .navbar-logo {
    height: 50px; /* Ajustez la hauteur selon la taille de votre logo */
    width: auto;
    /* Optionnel: Si votre logo n'est pas blanc, vous pourriez avoir besoin d'un filtre pour le rendre visible sur le fond orange. */
    /* filter: brightness(0) invert(1); */ 
}
/* S'assurer que le lien (navbar-brand) a la bonne couleur s'il y a du texte résiduel */
.site-topbar .navbar-brand {
  color: #fff !important;
}