/* ==========================================================
   KICKBOXING QUÉBEC
   RÉSEAU OFFICIEL — AFFILIATIONS
   Fichier : assets/css/iska-affiliation.css
   Version : 1.6
   ========================================================== */

/* ==========================================================
   01 — VARIABLES / SECTION PRINCIPALE
   ========================================================== */

.iska-school-locator-section {
    --kbq-black: #050505;
    --kbq-dark: #111111;
    --kbq-dark-soft: #181818;

    --kbq-gold: #5f9fbd;
    --kbq-gold-light: #b7e4f5;
    --kbq-gold-bright: #87c4df;
    --kbq-gold-dark: #315f78;

    --kbq-white: #ffffff;
    --kbq-text-light: rgba(255, 255, 255, .82);
    --kbq-text-muted: rgba(255, 255, 255, .66);

    position: relative;

    width: 100%;
    margin: 0;
    padding: 85px 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(95,159,189, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(95,159,189, .08),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #111111 55%,
            #0b141c 100%
        );

    color: #ffffff;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.7;
}

/* ==========================================================
   02 — RESET LOCAL
   ========================================================== */

.iska-school-locator-section *,
.iska-school-locator-section *::before,
.iska-school-locator-section *::after {
    box-sizing: border-box;
}

.iska-school-locator-section a {
    text-decoration: none !important;
}

/* ==========================================================
   03 — ARRIÈRE-PLAN
   ========================================================== */

.iska-school-locator-bg,
.iska-school-locator-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.iska-school-locator-bg {
    z-index: 0;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(95,159,189, .10),
            transparent 35%
        );
}

.iska-school-locator-overlay {
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .05),
            rgba(0, 0, 0, .20)
        );
}

.iska-school-locator-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: min(1200px, 90%);
    height: 4px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #5f9fbd,
            #b7e4f5,
            #5f9fbd,
            transparent
        );

    z-index: 3;
}

/* ==========================================================
   04 — CONTENEUR PRINCIPAL
   ========================================================== */

.iska-school-locator-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;
}

.iska-affiliation-main-hub {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;
}

/* ==========================================================
   05 — EN-TÊTE
   ========================================================== */

.iska-school-locator-header {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto 45px;

    text-align: center;
}

/* ==========================================================
   06 — BADGE
   ========================================================== */

.iska-school-locator-kicker {
    display: inline-flex;

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

    width: fit-content;

    margin: 0 auto 20px;
    padding: 10px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #315f78,
            #5f9fbd,
            #b7e4f5
        );

    color: #050505 !important;

    font-size: 11px;
    font-weight: 950;

    letter-spacing: .14em;

    text-transform: uppercase;
}

/* ==========================================================
   07 — TITRE
   ========================================================== */

.iska-school-locator-header h3 {
    max-width: 1000px;

    margin: 0 auto 22px !important;

    color: #ffffff !important;

    font-size: clamp(36px, 5vw, 58px) !important;
    font-weight: 950 !important;

    line-height: 1.05 !important;
    letter-spacing: -.025em;

    text-align: center !important;
    text-transform: uppercase;

    opacity: 1 !important;
}

/* ==========================================================
   08 — DIVISEUR
   ========================================================== */

.iska-school-locator-divider {
    width: 80px;
    height: 4px;

    margin: 0 auto 25px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #315f78,
            #5f9fbd,
            #b7e4f5
        );
}

/* ==========================================================
   09 — INTRODUCTION
   ========================================================== */

.iska-school-locator-intro {
    max-width: 880px;

    margin: 0 auto 14px !important;

    color: rgba(255, 255, 255, .80) !important;

    font-size: 16px !important;
    line-height: 1.8 !important;

    text-align: center !important;

    opacity: 1 !important;
}

.iska-school-locator-intro strong {
    color: #87c4df !important;
    font-weight: 900 !important;
}

/* ==========================================================
   10 — BOÎTE DE RECHERCHE
   ========================================================== */

.iska-affiliation-search-box {
    width: 100%;

    margin: 38px auto 0;
    padding: 26px;

    border: 1px solid rgba(95,159,189, .28);
    border-radius: 22px;

    background: rgba(255, 255, 255, .055);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .24);

    text-align: left;
}

.iska-affiliation-search-box label {
    display: block;

    margin: 0 0 10px;

    color: #87c4df !important;

    font-size: 11px;
    font-weight: 950;

    letter-spacing: .12em;

    text-transform: uppercase;
}

/* ==========================================================
   11 — LIGNE DE RECHERCHE
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-search-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(220px, .8fr)
        160px !important;

    align-items: center !important;

    gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
   12 — CORRECTIF WORDPRESS / BOLDTHEMES
   ========================================================== */

/*
 * BoldThemes peut ajouter un <p> autour des champs.
 * display: contents permet aux champs de rester directement
 * dans la grille sans que le <p> devienne une colonne.
 */

.iska-school-locator-section
.iska-affiliation-search-row > p {
    display: contents !important;
}

/*
 * Dans la zone des cartes, les paragraphes et <br>
 * ajoutés automatiquement ne doivent jamais participer
 * au Flexbox.
 */

.iska-school-locator-section
.iska-affiliation-hub-grid > p,

.iska-school-locator-section
.iska-affiliation-hub-grid > br {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

/* ==========================================================
   13 — CHAMP DE RECHERCHE
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-search-row
input.iska-search-input-main {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    border: 1px solid rgba(95,159,189, .40) !important;
    border-radius: 999px !important;

    outline: none !important;

    background: #090909 !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    appearance: none;
    -webkit-appearance: none;
}

.iska-school-locator-section
.iska-affiliation-search-row
input.iska-search-input-main::placeholder {
    color: rgba(255, 255, 255, .58) !important;

    opacity: 1 !important;
}

.iska-school-locator-section
.iska-affiliation-search-row
input.iska-search-input-main:focus {
    border-color: rgba(95,159,189, .80) !important;

    box-shadow:
        0 0 0 3px rgba(95,159,189, .16) !important;
}

/* ==========================================================
   14 — SELECT
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-search-row
select {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 0 42px 0 18px !important;

    border: 1px solid rgba(95,159,189, .40) !important;
    border-radius: 999px !important;

    outline: none !important;

    background-color: #090909 !important;

    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer;

    opacity: 1 !important;
    visibility: visible !important;
}

.iska-school-locator-section
.iska-affiliation-search-row
select option {
    background: #111111 !important;
    color: #ffffff !important;
}

.iska-school-locator-section
.iska-affiliation-search-row
select:focus {
    border-color: rgba(95,159,189, .80) !important;

    box-shadow:
        0 0 0 3px rgba(95,159,189, .16) !important;
}

/* ==========================================================
   15 — BOUTON RECHERCHER
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-search-row
button {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 150px !important;
    height: 54px !important;

    margin: 0 !important;
    padding: 0 24px !important;

    border: 1px solid #5f9fbd !important;
    border-radius: 999px !important;

    background:
        linear-gradient(
            135deg,
            #315f78,
            #5f9fbd,
            #b7e4f5
        ) !important;

    color: #050505 !important;

    font-size: 12px !important;
    font-weight: 950 !important;

    letter-spacing: .08em !important;
    line-height: 1 !important;

    text-transform: uppercase !important;

    box-shadow:
        0 14px 34px rgba(95,159,189, .20) !important;

    cursor: pointer !important;

    opacity: 1 !important;
    visibility: visible !important;

    transition:
        transform .22s ease,
        filter .22s ease,
        box-shadow .22s ease;
}

.iska-school-locator-section
.iska-affiliation-search-row
button:hover {
    transform: translateY(-2px);

    filter: brightness(1.07);

    box-shadow:
        0 18px 38px rgba(95,159,189, .28) !important;
}

/* ==========================================================
   16 — ZONE DU RÉPERTOIRE
   ========================================================== */

.iska-school-locator-directory-wrap {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-top: 40px;
}

.iska-school-locator-section
.iska-school-locator-directory-frame {
    display: block !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    padding: 32px;

    border: 1px solid rgba(95,159,189, .28) !important;
    border-radius: 26px;

    background:
        radial-gradient(
            circle at top right,
            rgba(95,159,189, .08),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #070707,
            #111111
        ) !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .30);
}

/* ==========================================================
   17 — NAVIGATION DES RÉPERTOIRES
   FLEXBOX — VERSION FINALE
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-hub-grid {
    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: stretch !important;
    justify-content: space-between !important;

    gap: 20px !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 0 32px !important;
    padding: 0 !important;
}

/* ==========================================================
   18 — CARTES
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-hub-grid
> .iska-affiliation-hub-card {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;

    /*
     * Les trois cartes se partagent exactement
     * la largeur disponible.
     */
    flex: 1 1 0 !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 220px !important;

    margin: 0 !important;
    padding: 30px !important;

    float: none !important;
    clear: none !important;

    overflow: hidden !important;

    border: 1px solid rgba(95,159,189, .30) !important;
    border-radius: 20px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(95,159,189, .12),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #090909,
            #151515
        ) !important;

    color: #ffffff !important;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .25) !important;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}

/* Ligne or supérieure */

.iska-school-locator-section
.iska-affiliation-hub-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 22px;
    right: 22px;

    height: 4px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #315f78,
            #5f9fbd,
            #b7e4f5
        );
}

/* ==========================================================
   19 — LABEL DES CARTES
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-hub-card
.iska-affiliation-card-label {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #87c4df !important;

    font-size: 12px !important;
    font-weight: 950 !important;

    letter-spacing: .12em !important;
    line-height: 1.4 !important;

    text-transform: uppercase !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* ==========================================================
   20 — LIENS DES CARTES
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-hub-card
.iska-affiliation-card-link {
    display: block !important;

    width: 100% !important;

    margin: 45px 0 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-family:
        "Oswald",
        "Arial Narrow",
        Arial,
        sans-serif !important;

    font-size: 25px !important;
    font-weight: 900 !important;

    line-height: 1.2 !important;

    text-decoration: none !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.iska-school-locator-section
.iska-affiliation-card-link::after {
    content: " →";

    display: inline-block;

    margin-left: 6px;

    color: #5f9fbd !important;

    transition: transform .22s ease;
}

/* ==========================================================
   21 — HOVER CARTES
   ========================================================== */

.iska-school-locator-section
.iska-affiliation-hub-card:hover {
    transform: translateY(-5px);

    border-color: rgba(95,159,189, .65) !important;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .38) !important;
}

.iska-school-locator-section
.iska-affiliation-hub-card:hover
.iska-affiliation-card-link {
    color: #b7e4f5 !important;
}

.iska-school-locator-section
.iska-affiliation-hub-card:hover
.iska-affiliation-card-link::after {
    transform: translateX(5px);
}

/* ==========================================================
   22 — RÉSULTATS DE RECHERCHE
   ========================================================== */

.iska-affiliation-search-results {
    width: 100%;

    margin: 0;
    padding: 0;
}

/* ==========================================================
   23 — BUSINESS DIRECTORY
   ========================================================== */

.iska-school-locator-directory-frame
.wpbdp-listings-list {
    width: 100%;
}

.iska-school-locator-directory-frame
.wpbdp-listing {
    width: 100%;

    margin: 0 0 16px;
    padding: 22px;

    border: 1px solid rgba(95,159,189, .16);
    border-radius: 18px;

    background: rgba(255, 255, 255, .05);

    color: #ffffff !important;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, .16);
}

.iska-school-locator-directory-frame
.wpbdp-listing a {
    color: #87c4df !important;
}

.iska-school-locator-directory-frame
.wpbdp-listing strong {
    color: #ffffff !important;
}

/* ==========================================================
   24 — PROTECTION DES COULEURS
   ========================================================== */

.iska-school-locator-section
.iska-school-locator-header p,

.iska-school-locator-section
.iska-school-locator-header span,

.iska-school-locator-section
.iska-school-locator-directory-frame p {
    opacity: 1;
}

/* ==========================================================
   25 — ACCESSIBILITÉ
   ========================================================== */

.iska-school-locator-section a:focus-visible,
.iska-school-locator-section button:focus-visible,
.iska-school-locator-section input:focus-visible,
.iska-school-locator-section select:focus-visible {
    outline:
        3px solid rgba(135,196,223, .50) !important;

    outline-offset: 3px;
}

/* ==========================================================
   26 — TABLETTE
   ========================================================== */

@media (max-width: 1024px) {

    .iska-school-locator-section {
        padding: 70px 22px;
    }

    /* Recherche */

    .iska-school-locator-section
    .iska-affiliation-search-row {
        grid-template-columns:
            1fr 1fr !important;
    }

    .iska-school-locator-section
    .iska-affiliation-search-row button {
        grid-column: 1 / -1 !important;

        width: 100% !important;
    }

    /* Cartes */

    .iska-school-locator-section
    .iska-affiliation-hub-grid {
        flex-direction: row !important;
        flex-wrap: wrap !important;

        gap: 20px !important;
    }

    .iska-school-locator-section
    .iska-affiliation-hub-grid
    > .iska-affiliation-hub-card {
        flex:
            1 1 calc(50% - 10px) !important;

        width:
            calc(50% - 10px) !important;

        min-width:
            280px !important;
    }
}

/* ==========================================================
   27 — MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .iska-school-locator-section {
        padding: 55px 14px;
    }

    .iska-school-locator-header {
        margin-bottom: 32px;
    }

    .iska-school-locator-header h3 {
        font-size: 34px !important;
        line-height: 1.08 !important;
    }

    .iska-school-locator-intro {
        font-size: 15px !important;
    }

    /* Recherche */

    .iska-affiliation-search-box {
        padding: 20px;
    }

    .iska-school-locator-section
    .iska-affiliation-search-row {
        grid-template-columns:
            1fr !important;
    }

    .iska-school-locator-section
    .iska-affiliation-search-row button {
        grid-column: auto !important;

        width: 100% !important;
    }

    /* Répertoire */

    .iska-school-locator-section
    .iska-school-locator-directory-frame {
        padding: 20px !important;
    }

    /* Cartes */

    .iska-school-locator-section
    .iska-affiliation-hub-grid {
        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        gap: 15px !important;
    }

    .iska-school-locator-section
    .iska-affiliation-hub-grid
    > .iska-affiliation-hub-card {
        flex: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        min-height: 170px !important;
    }

    .iska-school-locator-section
    .iska-affiliation-card-link {
        margin-top: 35px !important;

        font-size: 23px !important;
    }
}

/* ==========================================================
   28 — PETITS MOBILES
   ========================================================== */

@media (max-width: 420px) {

    .iska-school-locator-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .iska-school-locator-header h3 {
        font-size: 30px !important;
    }

    .iska-school-locator-kicker {
        padding: 8px 12px;

        font-size: 9px;
    }

    .iska-affiliation-search-box {
        padding: 16px;
    }

    .iska-school-locator-section
    .iska-school-locator-directory-frame {
        padding: 16px !important;
    }

    .iska-school-locator-section
    .iska-affiliation-hub-grid
    > .iska-affiliation-hub-card {
        min-height: 155px !important;

        padding: 22px !important;
    }

    .iska-school-locator-section
    .iska-affiliation-card-link {
        margin-top: 30px !important;

        font-size: 21px !important;
    }
}

/* ==========================================================
   29 — RÉDUCTION DES ANIMATIONS
   ========================================================== */

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

    .iska-school-locator-section *,
    .iska-school-locator-section *::before,
    .iska-school-locator-section *::after {
        transition: none !important;
    }
}