@import url('https://fonts.googleapis.com/css2?family=ABeeZee&display=swap');

:root {
    --couleur-fond: #0A0A0A;
    --couleur-texte: #FFFFFF;
    --couleur-titre: #A6CE38;
    --couleur-primaire: #A6CE38;
    --couleur-primaire-hover: #8aa92d;
    --couleur-fond-carte: #1c1c1c;
    --couleur-bordure-carte: #333333;
}

body {
    font-family: 'ABeeZee', sans-serif;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    padding-top: 80px; /* Espace pour la navbar fixe */
    padding-bottom: 60px; /* Espace pour le footer */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Permet au contenu principal de prendre l'espace restant */
}


h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
legend {
    color: var(--couleur-titre) !important;
}

/* Navbar */
.navbar {
    background-color: #111111;
    border-bottom: 1px solid var(--couleur-bordure-carte);
}
.navbar-brand img {
    max-height: 40px;
    margin-right: 10px;
}
.navbar-brand {
    color: var(--couleur-titre) !important;
    font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--couleur-texte);
}
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--couleur-titre);
}


/* Formulaires */
.form-control, .form-select {
    background-color: #2b2b2b;
    color: var(--couleur-texte);
    border-color: var(--couleur-bordure-carte);
}
.form-control:focus, .form-select:focus {
    background-color: #333;
    color: var(--couleur-texte);
    border-color: var(--couleur-primaire);
    box-shadow: 0 0 0 0.25rem rgba(166, 206, 56, 0.25);
}
.form-check-input:checked {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(166, 206, 56, 0.25);
}
.form-label {
    color: #e0e0e0; /* Texte des labels un peu plus clair que le texte général si besoin */
}
.text-danger { /* Pour les astérisques et messages d'erreur inline */
    color: #ff8080 !important;
}

/* Boutons */
.btn-primary {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #000000;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--couleur-primaire-hover);
    border-color: var(--couleur-primaire-hover);
    color: #000000;
}
.btn-outline-secondary {
    color: #ccc;
    border-color: #ccc;
}
.btn-outline-secondary:hover {
    color: var(--couleur-texte);
    background-color: #555;
    border-color: #555;
}
.btn-success {
    background-color: var(--couleur-primaire);
    border-color: var(--couleur-primaire);
    color: #000000;
}
.btn-success:hover {
    background-color: var(--couleur-primaire-hover);
    border-color: var(--couleur-primaire-hover);
    color: #000000;
}


/* Cartes */
.card {
    background-color: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure-carte);
    color: var(--couleur-texte); /* Assure que le texte dans les cartes est blanc */
}
.card-header, .card-footer {
    background-color: #222222;
    border-bottom: 1px solid var(--couleur-bordure-carte);
    border-top: 1px solid var(--couleur-bordure-carte);
}
.card-title {
    color: var(--couleur-titre) !important;
}

/* Cartes de Choix sur index.php */
.choice-card {
    text-decoration: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 2px solid transparent; /* Pour l'effet de bordure au survol/focus */
}
.choice-card .card-img-top {
    height: 200px; /* Hauteur fixe pour les images */
    object-fit: cover; /* Assure que l'image couvre bien sans se déformer */
}
.choice-card:hover, .choice-card:focus {
    /*transform: translateY(-5px);*/
    box-shadow: 0 0 1rem rgba(166, 206, 56, 0.3); /* Ombre avec couleur primaire */
    border-color: var(--couleur-primaire);
}
.choice-card .card-body {
    background-color: rgba(0,0,0,0.3); /* Fond semi-transparent pour le texte sur l'image si besoin */
}
.choice-card .card-title {
    color: var(--couleur-titre) !important;
    font-size: 1.5rem;
}
.choice-card p.card-text {
    color: var(--couleur-texte);
}


/* Alertes */
.alert-danger {
    background-color: #4a1a1f;
    color: #f8d7da;
    border-color: #a73c48;
}
.alert-success {
    background-color: #153824;
    color: #d1e7dd;
    border-color: #2a6f47;
}

/* Footer */
.footer {
    background-color: #111111;
    color: rgba(255, 255, 255, 0.7);
    padding: 1rem 0;
    border-top: 1px solid var(--couleur-bordure-carte);
    text-align: center;
    margin-top: auto; /* Pousse le footer en bas si le contenu est court */
}

/* Style pour le Honeypot */
.visually-hidden-custom {
    position: absolute !important; /* Hors de l'écran */
    left: -9999px !important;
    width: 1px !important; /* Réduire la taille au cas où */
    height: 1px !important;
    overflow: hidden !important; /* Cache le contenu qui déborderait */
    white-space: nowrap !important; /* Empêche le retour à la ligne si du texte y était */
    opacity: 0; /* Totalement transparent */
    border: 0; /* Pas de bordure visible */
    padding: 0; /* Pas de padding visible */
    margin: -1px; /* Pour s'assurer qu'il ne prend pas de place */
}

/* Styles spécifiques pour les options de contenants illustrées */
.contenant-option .card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.contenant-option .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--couleur-titre);
}
.contenant-option input[type="radio"]:checked + .card {
    border: 2px solid var(--couleur-titre);
    box-shadow: 0 0 15px var(--couleur-titre);
}
.contenant-option input[type="radio"] {
    display: none; /* On cache le bouton radio natif */
}
.contenant-option .card-img-top {
    height: 150px;
    object-fit: cover;
}

/* ... à la fin de votre fichier CSS ... */

/* Wrapper pour positionner l'icône par rapport à l'input */
.input-with-icon-wrapper {
    position: relative;
    width: 100%;
}

/* Style de l'icône du calendrier positionnée à l'intérieur du champ */
.datepicker-icon {
    position: absolute;
    top: 50%;
    right: 12px; /* Ajustez pour l'espacement désiré du bord droit */
    transform: translateY(-50%); /* Centrage vertical parfait */
    color: #adb5bd; /* Couleur de l'icône, à ajuster si besoin */
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

/* L'icône change de couleur au survol pour un meilleur feedback */
.datepicker-icon:hover {
    color: var(--couleur-titre); /* Utilise votre couleur primaire au survol */
}

/* Important : On ajoute un padding à droite de l'input pour que le texte ne passe pas sous l'icône */
.form-control-with-icon {
    padding-right: 40px !important; /* Espace pour l'icône */
    cursor: pointer !important;
}