/* ==============================================
   ⚠️ LEGACY - SERA REMPLACÉ PAR TAILWIND
   Ce fichier contient un mélange de classes foncier
   et spécifiques portail. Il sera refactorisé lors
   de la migration Tailwind (Phase B roadmap).
   ============================================== */

/* header */
#bandeau_mobile{
    display: none;
}

#bandeau_ordi{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo_titre {
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px black;
}
.titre-shadow {
    text-shadow: 1px 1px 2px black;
}

header {
    background-color: var(--primaire);
    /* Filigrane croix occitane (verte) à gauche, comme ram2022 */
    background-image: url("/public/img/occitanie.png");
    background-position: center left 2rem;
    background-repeat: no-repeat;
    background-size: 30%;
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    color: var(--text-color-light);
    display: flex;
    position: sticky;
    top: 0;
    z-index: 1999;
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Lien "Retour à la connexion" dans le bandeau (haut droite), façon ram2022.
   Alimenté par la variable $bandeau_lien_droite (posée par la page, rendue dans header.php). */
.bandeau-lien {
    color: var(--text-color-light);
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 5px;
    white-space: nowrap;
    text-shadow: 1px 1px 2px black;
    transition: background-color 0.2s, color 0.2s;
}
.bandeau-lien:hover {
    background-color: white;
    color: var(--primary-dark);
    text-decoration: none;
    text-shadow: none;
}

.header-menu {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.header-menu li {
    margin-left: 10px;
    border-radius: 3px;
    padding: 5px 15px;
    transition: background-color 0.2s;
}

.header-mobile { display: none; }

/* menu */
.menu_cliquable>a:first-child {
    text-shadow: 1px 1px 2px black;
}

.menu_actif, .menu_cliquable li:hover  {
    background-color: white;
    color: var(--primary-dark);
    border-radius: 5px;
    cursor: pointer;
    margin-top:0;
    padding-top:0;
}

.dropdown:hover > .dropdown-menu {display: block;}
.nav-link.menu_public {
    padding-bottom: 0;
    z-index: 1000;
}
.dropdown-menu.menu_public {
    box-shadow: var(--box-shadow);
    width: 300px;
    border: 0;
    margin-top: -2px;
    z-index: 1002;
}
.nav.menu_public {
    font-weight: bold;
}
/* éléments du formulaire */
.form-container {
    display: flex;
    flex-flow: column;
    width: 60rem;
}

.form-container h1 {
    margin-bottom: 2rem;
}

.form-control {
    display: flex;
    flex-flow: column;
    margin: 1rem 0;
}

.form-control label {
    margin-bottom: 1rem;
}

.form-control input {
    border: var(--border);
    border-radius: 3px;
    padding: 1rem 1.5rem;
}

.form-control select {
    border: var(--border);
    padding: 1rem 1.5rem;
}

.form-control textarea {
    border: var(--border);
    padding: 1rem 1.5rem;
    min-height: 20rem;
}

.form-actions {
    display: flex;
    flex-flow: row nowrap;
}

/* Actions du login : alignées à droite (façon ram2022), scopé pour ne pas
   toucher les .form-actions d'autres contextes. */
.form_connexion .form-actions {
    justify-content: flex-end;
    gap: 1rem;
}

/* ==============================================
   BC-GROUPE - Conteneur des contrôles gPage
   ==============================================

   ⚠️ DÉPRÉCIÉ (Phase B - 2026-02-04)
   ----------------------------------
   Cette classe est conservée pour la rétrocompatibilité avec :
   - Les formulaires existants utilisant br5_tableau
   - Les gparam qui n'ont pas encore le paramètre 'dc'

   POUR LES NOUVEAUX DÉVELOPPEMENTS :
   Utiliser 'dc' dans le BC pour définir les classes Tailwind directement :
   ['n' => 'champ', 'dc' => 'flex gap-2', 'lc' => 'w-1/4', 'c' => 'w-3/4']

   La classe bc-row (définie dans _form.css) est utilisée par défaut
   et permet aux classes Tailwind de fonctionner sans overrides.
   ============================================== */

.bc-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: center;
}

/* Message d'erreur : toujours sur sa propre ligne */
.bc-groupe .message_erreur {
    flex-basis: 100%;
}

/* Classes de largeur dans bc-groupe : utiliser flex-basis pour fonctionner avec gap */
/* Note: Ces overrides ne sont plus nécessaires avec bc-row (Phase B) */
.bc-groupe .w-25 { flex: 0 0 calc(25% - 0.25rem); width: auto !important; }
.bc-groupe .w-33 { flex: 0 0 calc(33.33% - 0.25rem); width: auto !important; }
.bc-groupe .w-50 { flex: 0 0 calc(50% - 0.25rem); width: auto !important; }
.bc-groupe .w-66 { flex: 0 0 calc(66.66% - 0.25rem); width: auto !important; }
.bc-groupe .w-75 { flex: 0 0 calc(75% - 0.25rem); width: auto !important; }
.bc-groupe .w-100 { flex: 0 0 100%; width: auto !important; }

/* Exception pour Summernote : le flexbox interfère avec l'éditeur WYSIWYG */
/* Quand Summernote s'initialise, il ajoute .note-editor après le textarea */
.bc-groupe:has(.note-editor) {
    display: block;
}

/* Labels par défaut */
.bc-groupe label {
    flex-shrink: 0;
}

/* Inputs texte : prennent l'espace disponible */
.bc-groupe input[type="text"],
.bc-groupe input[type="number"],
.bc-groupe input[type="email"],
.bc-groupe input[type="tel"],
.bc-groupe input[type="date"],
.bc-groupe select,
.bc-groupe textarea {
    flex-grow: 1;
    min-width: 0;
}

/* Checkboxes et Radios : taille fixe */
.bc-groupe input[type="checkbox"],
.bc-groupe input[type="radio"] {
    flex: 0 0 auto;
}

/* Labels après checkbox/radio : peuvent wrapper sur plusieurs lignes */
.bc-groupe input[type="checkbox"] + label,
.bc-groupe input[type="radio"] + label,
.bc-groupe input[type="checkbox"] + span,
.bc-groupe input[type="radio"] + span {
    flex: 1 1 auto;
    white-space: normal;
}

/* footer */
footer {
    background-color: var(--background-dark);
    color: #DDD;
}
footer a:hover{
    background-color: rgba(100,100,100,0.5);
    color: white;
    transition: 0.4s;
}
/* alerte, info */
.alerte-warning {
    display: block;
    background: var(--backshadow);
    color: var(--danger);
}

.confirmation-changement {
    display: block;
    border-radius: 3px;
    padding: 0.5rem 1rem;
    background-color: #b1e0a3;
}


/* Note: Les styles .btn sont gérés par Bootstrap */

.bande_copy {
    background-color: var(--primary-dark);
    color: white;
    font-size: 1.3rem;
    box-shadow: var(--box-shadow);
}

.logo_cliquable a:hover{
    border-radius: 10px;
    box-shadow: var(--box-shadow);
}

/* Partie public pas de colonne de gauche de type aside, mais un découpage possible en gpage-affiche / gpage-content */
.gpage-content-only{
    width: 100%;
}