/* ==========================================================
   ANNuaire DES PROFESSIONNELS — 2B ÉVÉNEMENT
   Phase 1
   ----------------------------------------------------------
   Cette feuille contient uniquement les styles spécifiques
   à la page annuaire.html.

   Les styles généraux du site sont conservés dans :
   css/style.css
   ========================================================== */


/* ==========================================================
   BANNIÈRE ANNuaire
   ========================================================== */

.annuaire-hero {

    min-height: 480px;

    position: relative;

    display: flex;
    align-items: center;

    /* Décalage pour tenir compte de la navbar fixe */
    padding-top: 90px;
    box-sizing: border-box;

    background:
        linear-gradient(
            rgba(11, 60, 93, 0.88),
            rgba(11, 60, 93, 0.88)
        );

}


/* ==========================================================
   CONTENU DE LA BANNIÈRE
   ========================================================== */

.annuaire-hero .hero-content {

    position: relative;

    z-index: 2;

}


/* ==========================================================
   SOUS-TITRE
   ========================================================== */

.annuaire-hero .hero-subtitle {

    margin-bottom: 10px;

}


/* ==========================================================
   TITRE
   ========================================================== */

.annuaire-hero .hero-title {

    margin-bottom: 15px;

}


/* ==========================================================
   TEXTE
   ========================================================== */

.annuaire-hero .hero-text {

    max-width: 700px;

}


/* ==========================================================
   STRUCTURE PRINCIPALE
   ----------------------------------------------------------
   Réservée aux prochaines phases de l'annuaire.
   ========================================================== */

.annuaire-page {

    width: 100%;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991.98px) {

    .annuaire-hero {

        min-height: 420px;

    }

}


@media (max-width: 767.98px) {

    .annuaire-hero {

        min-height: 380px;

    }

}


@media (max-width: 575.98px) {

    .annuaire-hero {

        min-height: 350px;

    }

}/* ==========================================================
   ENTREPRISES ADHÉRENTES
   PHASE 2
   ========================================================== */

.adherents-section {

    padding: 70px 0 80px;

    background: #F5F7FA;

    overflow: hidden;

}


/* ==========================================================
   TITRE
   ========================================================== */

.adherents-section .section-title {

    margin-bottom: 40px;

}


.adherents-section .section-title h6 {

    color: #F39C12;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 10px;

}


.adherents-section .section-title h2 {

    color: #0B3C5D;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

    margin-bottom: 0;

}


/* ==========================================================
   CONTENEUR DU BANDEAU ADHÉRENTS
   ========================================================== */

.adherents-slider {

    width: 100%;

    overflow: hidden;

    position: relative;

    padding: 15px 0;

    background: #0B3C5D;

}


/* ==========================================================
   PISTE DES LOGOS
   ========================================================== */

.adherents-track {

    display: flex;

    align-items: center;

    gap: 18px;

    width: max-content;

    animation: adherents-scroll 35s linear infinite;

}


/* ==========================================================
   CONTENEUR D'UN LOGO
   ========================================================== */

.adherent-logo {

    flex: 0 0 150px;

    width: 150px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8px 12px;

    background: #FFFFFF;

    border-radius: 8px;

}


/* ==========================================================
   IMAGE DU LOGO
   ========================================================== */

.adherent-logo img {

    max-width: 100%;

    max-height: 58px;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;

}


/* ==========================================================
   PISTE DE DÉFILEMENT
   ========================================================== */

.adherents-track {

    display: flex;

    align-items: center;

    width: max-content;

    animation: adherents-scroll 35s linear infinite;

}


/* ==========================================================
   NOM DES ENTREPRISES
   ========================================================== */

.adherent-item {

    flex-shrink: 0;

    padding: 0 25px;

    color: #FFFFFF;

    font-family: 'Poppins', sans-serif;

    font-size: 1rem;

    font-weight: 500;

    white-space: nowrap;

    user-select: none;

}


/* ==========================================================
   SÉPARATEUR
   ========================================================== */

.adherent-separator {

    flex-shrink: 0;

    color: #F39C12;

    font-size: 1.2rem;

    font-weight: 700;

    user-select: none;

}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes adherents-scroll {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}


/* ==========================================================
   ACCESSIBILITÉ
   ----------------------------------------------------------
   Les utilisateurs ayant demandé une réduction des animations
   voient le bandeau sans animation.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .adherents-track {

        animation: none;

    }

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 767.98px) {

    .adherents-section {

        padding: 55px 0 65px;

    }


    .adherents-section .section-title {

        margin-bottom: 30px;

        padding: 0 15px;

    }


    .adherents-section .section-title h2 {

        font-size: 1.6rem;

    }


    .adherent-item {

        padding: 0 18px;

        font-size: 0.9rem;

    }


    .adherent-separator {

        font-size: 1rem;

    }


    .adherents-track {

        animation-duration: 30s;

    }

}/* ==========================================================
   RECHERCHE DES PROFESSIONNELS
   PHASE 3
   ========================================================== */

.recherche-annuaire {

    padding: 90px 0;

    background: #FFFFFF;

}


/* ==========================================================
   TITRE DE SECTION
   ========================================================== */

.recherche-annuaire .section-title h6 {

    color: #F39C12;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 10px;

}


.recherche-annuaire .section-title h2 {

    color: #0B3C5D;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

    margin-bottom: 15px;

}


.recherche-annuaire .section-title p {

    max-width: 700px;

    margin: 0 auto;

    color: #555555;

    font-family: 'Open Sans', sans-serif;

}


/* ==========================================================
   BLOC DE RECHERCHE
   ========================================================== */

.recherche-box {

    max-width: 1100px;

    margin: 0 auto;

    padding: 35px;

    background: #F5F7FA;

    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(11, 60, 93, 0.08);

    border: 1px solid rgba(11, 60, 93, 0.08);

}


/* ==========================================================
   LABELS
   ========================================================== */

.recherche-box .form-label {

    display: block;

    margin-bottom: 8px;

    color: #0B3C5D;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

}


/* ==========================================================
   MENUS DÉROULANTS
   ========================================================== */

.recherche-box .form-select {

    min-height: 50px;

    border: 1px solid #D9E0E5;

    border-radius: 6px;

    font-family: 'Open Sans', sans-serif;

    color: #333333;

    background-color: #FFFFFF;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.recherche-box .form-select:focus {

    border-color: #F39C12;

    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.15);

}


/* ==========================================================
   BOUTON RECHERCHE
   ========================================================== */

.recherche-box .btn-warning {

    min-width: 210px;

    font-family: 'Poppins', sans-serif;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}


/* ==========================================================
   ZONE DE RÉSULTATS
   ----------------------------------------------------------
   Vide pour la Phase 3.
   ========================================================== */

.resultats-annuaire {

    max-width: 1100px;

    margin: 50px auto 0;

}


/* ==========================================================
   RESPONSIVE TABLETTE
   ========================================================== */

@media (max-width: 991.98px) {

    .recherche-annuaire {

        padding: 75px 0;

    }


    .recherche-box {

        padding: 30px;

    }

}


/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .recherche-annuaire {

        padding: 60px 0;

    }


    .recherche-annuaire .section-title h2 {

        font-size: 1.7rem;

    }


    .recherche-box {

        padding: 25px 20px;

    }


    .recherche-box .btn-warning {

        width: 100%;

    }

}


/* ==========================================================
   PETITS ÉCRANS
   ========================================================== */

@media (max-width: 575.98px) {

    .recherche-box {

        padding: 22px 15px;

    }


    .recherche-annuaire .section-title {

        padding: 0 10px;

    }

}/* ==========================================================
   LOGO O’BDM — CARTE PROFESSIONNELLE
   Charte 2B ÉVÉNEMENT
   ========================================================== */

.fiche-obdm .professionnel-image {

    width: 100%;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px;

    background: #FFFFFF;

    overflow: hidden;
}


/* Logo O’BDM */

.fiche-obdm .professionnel-logo {

    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 160px;

    object-fit: contain;

    margin: 0 auto;
}


/* ==========================================================
   RESPONSIVE TABLETTE
   ========================================================== */

@media (max-width: 991.98px) {

    .fiche-obdm .professionnel-image {

        height: 180px;

    }

    .fiche-obdm .professionnel-logo {

        max-height: 150px;

    }

}


/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .fiche-obdm .professionnel-image {

        height: 200px;

        padding: 20px;

    }

    .fiche-obdm .professionnel-logo {

        max-height: 170px;

    }

}/* ==========================================================
   LOGOS DES PROFESSIONNELS
   GABARIT UNIQUE — ANNuaire 2B ÉVÉNEMENT
   Référence : logo O’BDM
========================================================== */

.professionnel-image {

    width: 100%;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px;

    background: #FFFFFF;

    overflow: hidden;
}


/* ==========================================================
   LOGO
========================================================== */

.professionnel-image .professionnel-logo {

    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 160px;

    object-fit: contain;

    margin: 0 auto;
}


/* ==========================================================
   RESPONSIVE TABLETTE
========================================================== */

@media (max-width: 991.98px) {

    .professionnel-image {

        height: 180px;

    }

    .professionnel-image .professionnel-logo {

        max-height: 150px;

    }

}


/* ==========================================================
   RESPONSIVE MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .professionnel-image {

        height: 200px;

        padding: 20px;

    }

    .professionnel-image .professionnel-logo {

        max-height: 170px;

    }

}