/* style.css */
body {
  scroll-behavior: smooth;
}
section.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color: white;
  position: relative;
  z-index: 1;
}
section.parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
        #formations-list .card-icon {
            color: #0d6efd;
            font-size: 3.5rem;
            margin-bottom: 15px;
        }
        .hero::after {
            content: '';
            background: url('https://ams-06.fr/image/logoams06_blanc.png') no-repeat center center;/* Image de logo en filigranne */
            background-size: contain;
            opacity: 0.25;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 0;
        }
        .hero .container {
            position: relative;
            z-index: 1;
        }

        /* NEW: Custom class for a transparent navbar with white text */
        .navbar-transparent {
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        .navbar-transparent .navbar-brand,
        .navbar-transparent .nav-link,
        .navbar-transparent .navbar-toggler-icon {
            color: white !important; /* Ensure brand and links are visible */
        }

        .navbar-transparent .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.1);
        }

		/* NOUVEAU : Style pour le logo principal dans la navbar */
        .navbar-logo {
            max-height: 40px; /* Taille maximale harmonisée pour le logo principal */
            width: auto;
            /* Si votre logo est flou, vous pouvez essayer d'utiliser simplement height au lieu de max-height */
            /* height: 40px; */
        }

        /* NOUVEAU : Style pour le logo secondaire (en haut à droite) */
        .navbar-secondary-logo {
            max-height: 40px; /* Le rendre plus petit pour le côté droit (optionnel) */
            width: auto;
            margin-top: 0;
            margin-bottom: 0;
        }
        /* NOUVEAU : S'assurer que la section Hero prend toute la hauteur de l'écran */
        .hero {
            min-height: 100vh;
			position: relative; /* S'assurer que les enfants positionnés en absolute restent dans la section */
            overflow: hidden; /* CORRECTION CLÉ : Masquer le contenu qui déborde */
			padding-top: 56px; /* Ajustement pour la navbar fixe si nécessaire */
        }
		 /* NOUVEAU : Style pour rendre le titre plus accrocheur (effet lumineux) */
        .hero-title-glow {
            /* Donne une ombre de texte blanche et lumineuse pour un effet "néon" */
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(0, 0, 0, 0.5);
            line-height: 1.1;
        }

        /* NOUVEAU : Styles pour la vidéo de fond */
        .hero-video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            min-width: 100%;
            min-height: 100%; 
            width: auto;
            height: auto;
            z-index: -1; 
            object-fit: cover; 
        }

        /* NOUVEAU : Overlay pour assombrir la vidéo et rendre le texte lisible */
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Noir à 50% d'opacité */
            z-index: 0; 
        }

        .hero .container {
            position: relative;
            z-index: 2; /* S'assurer que le contenu est bien au-dessus de tout */
        }


/* NOUVEAU : Styles pour les cartes avec image de fond */
#formations-list .card-with-bg {
    position: relative;
    overflow: hidden; /* Important pour que l'image ne dépasse pas */
    color: white !important; /* Texte en blanc pour être lisible sur l'image */
    transition: transform 0.3s ease;
}

/* Pseudo-élément pour l'image de fond */
#formations-list .card-with-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.7; /* Légère opacité pour rendre le texte plus lisible */
    z-index: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Appliquer l'image de fond via un attribut 'data-bg' et CSS */
#formations-list .card-with-bg[data-bg]::before {
    background-image: var(--card-bg-url);
}

/* Contenu de la carte au-dessus de l'image */
#formations-list .card-with-bg .card-body {
    position: relative;
    z-index: 1;
}

/* Surcharger les couleurs pour le texte sur fond d'image */
#formations-list .card-with-bg .card-title,
#formations-list .card-with-bg .card-icon,
#formations-list .card-with-bg .card-text {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Ombre pour meilleure lisibilité */
}

/* Style du bouton sur fond clair */
#formations-list .card-with-bg .btn-outline-primary {
    color: white !important; /* Texte blanc */
    border-color: white !important; /* Contour blanc */
    background-color: transparent !important;
}

/* Effet au survol (optionnel) */
#formations-list .card-with-bg:hover::before {
    opacity: 0.9;
    transform: scale(1.05);
}/* style.css */
/* ... (styles précédents) ... */

/* Contenu de la carte au-dessus de l'image */
#formations-list .card-with-bg .card-body {
    position: relative;
    z-index: 1;
     /* MODIFICATION CLÉ : Utilise la variable --frame-color ou le blanc transparent par défaut */
    background-color: var(--frame-color, rgba(255, 255, 255, 0.7)); 
    border-radius: 0.25rem; /* Optionnel : pour correspondre au style Bootstrap */
    padding: 1rem !important; /* Pour s'assurer qu'il y a de l'espace autour du texte encadré */
    margin: 1rem; /* Pour décoller le cadre du bord de l'image */
}

/* Surcharger les couleurs pour le texte sur fond clair */
#formations-list .card-with-bg .card-title,
#formations-list .card-with-bg .card-text {
    /* Utilise la variable CSS --text-color ou revient au blanc par défaut */
    color: var(--text-color, black) !important; 
    text-shadow: none; /* L'ombre de texte n'est plus nécessaire grâce au nouveau cadre */
}

/* Garder l'icône en bleu */
#formations-list .card-with-bg .card-icon {
     /* Utilise la variable CSS --icon-color ou revient au bleu par défaut si non défini */
    color: var(--icon-color, #0d6efd) !important; 
    text-shadow: none;
	/* NOUVEAU : Cadre blanc 70% de transparence */
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 15px; /* Espace autour de l'icône */
    border-radius: 50%; /* Rendre le cadre rond */
    display: inline-block; /* Assurer que le padding et le fond sont appliqués correctement */
    margin-bottom: 15px; /* Rétablir la marge inférieure pour séparer du titre */
}
/* Effet au survol (optionnel) */
#formations-list .card-with-bg:hover::before {
    /* Rendre l'overlay un peu plus clair au survol (0.4) pour un effet d'éclaircissement */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--card-bg-url);
    transform: scale(1.05);
}


/* --- NOUVEAUX STYLES POUR LES ÉTOILES DANS LES STATISTIQUES --- */

/* Conteneur des étoiles */
#statistiques .rating-stars {
    font-size: 1.5rem; /* Taille des étoiles */
}

/* Couleur des étoiles pleines */
#statistiques .rating-stars .star-filled,
#statistiques .rating-stars .star-half {
    color: #ffc107; /* Jaune / Couleur Bootstrap 'warning' */
}

/* Si vous utilisez des étoiles vides (fa-regular fa-star), mettez-les en gris clair */
#statistiques .rating-stars .fa-regular {
    color: #ced4da;
}


/* ======================================================= */
/* RÈGLES PC : Affichage Double Colonne (Désactive le scroll mobile) */
/* ======================================================= */

@media (min-width: 768px) {
    /* Cible le dropdown-menu par sa classe Bootstrap */
    .dropdown-menu {
        /* Rétablit la largeur minimale pour l'affichage 50%/50% */
        min-width: 600px !important;
        /* Annule les styles 'inline' de scroll sur PC */
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    /* Rétablit la largeur 50% des colonnes sur PC */
    .dropdown-menu .col-md-6 {
        width: 50% !important; 
    }
    
    /* Rétablit la bordure sur PC (si jamais elle a été supprimée) */
    .dropdown-menu .col-md-6.border-start {
        border-left: 1px solid var(--bs-dropdown-border-color, #dee2e6) !important;
    }
}


/* ======================================================= */
/* RÈGLES MOBILE : S'assure que tout est propre (Empilement) */
/* ======================================================= */

@media (max-width: 767.98px) {
    /* Règle pour l'empilement correct sur mobile (col-12) */
    .dropdown-menu .col-md-6 {
        width: 100% !important; 
    }
    
    /* Cache la bordure verticale sur mobile (entre la colonne 1 et 2) */
    .dropdown-menu .border-start {
        border-left: none !important;
    }
}