a {text-decoration: none;}

ul {list-style: none;}

.emphase {
    text-decoration: #ffed00  underline;
    text-decoration-thickness: 4px;
}
  

.eventTextFull {
    background-color:black;
    color:white;
    display: inline;
}


.eventText {

    color:black;
     display: inline;
}


/* style pour le toglle plier déplier */
details summary {
    cursor: pointer;
    list-style: none; /* enlève le triangle natif */
}

details summary::-webkit-details-marker {
    display: none; /* enlève aussi sur Chrome */
}

details[open] .toggle-icon i {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

.toggle-icon i {
    transition: transform 0.2s ease;
}


.toggle-icon {
    transition: transform 0.25s ease;
    display: inline-block;
    margin-right: .4rem;
}
.collapsed .toggle-icon {
    transform: rotate(-90deg); /* flèche vers la droite quand replié */
}




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Définition de la taille de la page */
html, body {
    height: 100%;
    font-family: Arial, sans-serif;
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    /* padding-bottom: 20px; /* Hauteur du footer */
}
.content {
    flex: 1;
    margin-top: 56px; /* Height of the navbar */
    margin-bottom: 20px; /* Height of the footer */
    overflow-y: auto;
}
nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
}


/* Fixe le footer en bas de la page */
footer {
    
    bottom: 0;
    width: 100%;
    z-index: 1020;
}

/* Conteneur principal qui occupe toute la hauteur de la page */
.container {
    display: flex;
    flex: 1; /* Permet à la container de prendre tout l'espace restant */
    overflow-y: auto; /* Permet le défilement si le contenu déborde */

}

.container-center-large {
    width: 100%; /* Équivalent à container-fluid */
    margin-top: 1.5rem !important; /* Équivalent à mt-4 (valeur par défaut Bootstrap v5) - utilisez la valeur qui vous convient */
    margin-left: auto !important;  /* Équivalent à mx-auto */
    margin-right: auto !important; /* Équivalent à mx-auto */
    background: lightgreen; padding: 2px 6px;
    flex: 1; /* Permet à la container de prendre tout l'espace restant */
    overflow-y: auto; /* Permet le défilement si le contenu déborde */
}

.example-wrapper { 
    width: 100%; /* Équivalent à container-fluid */
    margin-top: 1.5rem !important; /* Équivalent à mt-4 (valeur par défaut Bootstrap v5) - utilisez la valeur qui vous convient */
    margin-left: auto !important;  /* Équivalent à mx-auto */
    margin-right: auto !important; /* Équivalent à mx-auto */
    background: lightgreen; padding: 2px 6px;
    flex: 1; /* Permet à la container de prendre tout l'espace restant */
    overflow-y: auto; /* Permet le défilement si le contenu déborde */
}



/* Ajoute un fond rouge pâle aux champs de formulaire invalides */
.form-control.is-invalid {
    background-color: #f8d7da; /* Couleur de fond rouge pâle (similaire à l'alerte danger de Bootstrap) */
    /* Vous pouvez ajuster la couleur si vous préférez un rouge différent, par exemple : */
    /* background-color: rgba(255, 0, 0, 0.1); /* Un rouge semi-transparent */
}

/* Optionnel : S'assurer que d'autres types d'input invalides ont aussi le fond */
input[type="text"].is-invalid,
input[type="email"].is-invalid,
input[type="password"].is-invalid,
textarea.is-invalid {
    background-color: #f8d7da; /* Assurez-vous que cette règle est assez spécifique si nécessaire */
}

/* Pour les selects invalides si vous en avez */
select.is-invalid {
    background-color: #f8d7da;
}

/* Ajoute un fond rouge pâle aux checkboxes invalides (peut ne pas être très visible) */
input[type="checkbox"].is-invalid {
    background-color: #f8d7da;
}

/* Style le label associé à une checkbox invalide */
/* Ciblage plus spécifique : le label avec la classe .form-check-label */
/* qui suit un input de type checkbox avec la classe .is-invalid */
input[type="checkbox"].is-invalid + label.form-check-label {
    color: #dc3545; /* Couleur de texte rouge (similaire à l'alerte danger de Bootstrap) */
    font-weight: bold;
}



.card-body {
    background-color: white; /* Rend le fond de la carte transparent */
    
}

/* Footer links = look "navbar dark" */
.az-footer-button{
    display:inline-block;
    padding:.5rem 1rem;
    color:rgba(255,255,255,.55);
    text-decoration:none;
}
.az-footer-button:hover, .az-footer-button:focus{
    color:rgba(255,255,255,.75);
    text-decoration:none;
}

.liseret {
    border: 1px solid #444;
    padding: 8px;
    border-radius: 4px;
}


        /* Colonne de gauche */
.left-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 5px;       /* Espace autour des colonnes */
    height: 100%;
    overflow-y: hidden;
}

/* Colonne de droite */
.right-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 5px;       /* Espace autour des colonnes */
    height: 100%;
    overflow-y: hidden;
}

/* Boîtes */
.left-box, .right-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;

    /* --- Ajoute un espacement fixe autour de chaque boîte --- */
    margin: 5px 0;      /* 5px en haut et en bas */
    padding: 5px;       /* 5px à l’intérieur */
    border: 1px solid #ccc;
    border-radius: 5px;
    /** background-color: rgba(255, 0, 0, 0.05); **/
}

.single-column {
    display: flex;
    flex-direction: column;
    padding: 5px;
    max-width: 1800px;
    margin: auto;
}

.content-box {
    margin: 5px 0;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow-y: auto;
}

.row-space {
    margin-bottom: 15px;
}

ul {
    list-style-type: disc !important;
    padding-left: 1.25rem;
}

.navbar-nav {
    list-style: none !important;
    padding-left: 0;
}

    .bg-yellow {
        background-color: #ffc107 !important; /* jaune Bootstrap */
    }
    .bg-red {
        background-color: #e22424 !important; /* rouge Bootstrap */
    }
    .bg-green {
        background-color: #28cf28 !important; /* vert Bootstrap */
    }
    .bg-visiteur {
        background-color: #6d8679ff !important; /* visiteur Bootstrap */
    }    
    .text-black {
        color: #000 !important;
    }