/* ──────────────────────────────────────────────────────────────────────────────
   Glossaire ACF – Feuille de styles partagée
   Les variables :root sont injectées dynamiquement par PHP (template-loader.php)
   via les réglages du plugin. Ce fichier ne contient pas de valeurs codées en dur.
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Reset / Base ────────────────────────────────────────────────────────────── */
.container_glossaire a {
    text-decoration: none;
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.template_glossaire_header {
    background-color: var(--bg-glossaire);
    padding: 75px 0;
}

.template_glossaire_header h1 {
    color: var(--glossaire-header-color-text);
    font-size: 42px;
}

.bs_template_glossaire_header,
.bs_template_glossaire_header a {
    color: var(--glossaire-header-color-text);
}

/* ── Image hero ──────────────────────────────────────────────────────────────── */
.img_header_glossaire,
.img_header_glossaire img {
    object-fit: cover;
    width: 100%;
    height: 485px;
    border-radius: 10px;
}

/* ── Layout ──────────────────────────────────────────────────────────────────── */
.mt--50 { margin-top: -50px; }
.mt0    { margin-top: 0; }
.mb15   { margin-bottom: 15px; }
.mb0    { margin-bottom: 0; }
.py75   { padding: 75px 0; }
.mw872  { max-width: 872px; }
.mauto { margin: 0 auto; }
.t-center { text-align: center;}
.opacity05 { opacity: 0.5;}

.container_glossaire {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ── Typographie ─────────────────────────────────────────────────────────────── */
h2 { margin: 15px 0; }
h3 { margin: 10px 0; }

.glossaire_center { text-align: center; }
.font54           { font-size: 54px; }

/* ── Images dans le contenu ──────────────────────────────────────────────────── */
.content_glossaire img {
    border-radius: 10px;
    max-width: 100%;
    margin: 20px auto;
    display: block;
}

/* ── Breadcrumbs ─────────────────────────────────────────────────────────────── */
.breadcrumbs_glossaire {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

/* ── Grille sommaire ─────────────────────────────────────────────────────────── */
.row_sommaire {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
}

/* ── Carte glossaire ─────────────────────────────────────────────────────────── */
.glossaire_item {
    border: 1px solid var(--card-border, #E2E2E2);
    border-radius: 10px;
    padding: 20px;
    margin-top: 0;
    display: block;
    transition: margin-top 0.3s ease, box-shadow 0.3s ease;
    background: var(--card-bg, #ffffff);
}

.glossaire_item:hover {
    margin-top: -10px;
}

.glossaire_item .glossaire_name {
    color: var(--card-title, #3B3949);
    font-size: 18px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.glossaire_item p {
    color: var(--card-text, #6B687D);
}

.glossaire_item:hover .glossaire_name {
    color: var(--card-title-hover, var(--accent-color, #FF0088));
}

/* ── Bouton ──────────────────────────────────────────────────────────────────── */
.btn_glossaire {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--btn-accent);
    color: var(--btn-text-color);
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-top: 20px;
}

.btn_glossaire:hover {
    background-color: var(--btn-hover-bg, var(--btn-accent));
    color: var(--btn-hover-text, var(--btn-text-color));
}

/* ── Filtres de taxonomie ────────────────────────────────────────────────────── */
.glossaire_filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 30px 0 40px;
}

.glossaire_filtre_btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background-color: var(--btn-accent, #FF0088);
    color: var(--btn-hover-bg, var(--btn-accent, #FF0088));
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    line-height: 1.4;
    font-family: inherit;
    border: none;
}

.glossaire_filtre_btn:hover,
.glossaire_filtre_btn.is-active {
    background-color: var(--btn-hover-bg, var(--btn-accent, #FF0088));
    color: var(--btn-hover-text, #ffffff);
}

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
.glossaire_spinner {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.glossaire_spinner_inner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--card-border, #E2E2E2);
    border-top-color: var(--btn-accent, #FF0088);
    border-radius: 50%;
    animation: glossaire_spin 0.7s linear infinite;
    display: block;
}

@keyframes glossaire_spin {
    to { transform: rotate(360deg); }
}

/* ── Grille — transition pendant le filtre ───────────────────────────────────── */
#glossaire_grille {
    transition: opacity 0.2s ease;
}

/* ── Message "aucun résultat" ────────────────────────────────────────────────── */
.glossaire_no_result {
    text-align: center;
    color: var(--glossaire-text, #6B687D);
    grid-column: 1 / -1;
    padding: 40px 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .row_sommaire {
        grid-template-columns: repeat(1, 1fr);
    }

    .row_sommaire div,
    .row_sommaire a {
        width: 100%;
    }

    .py75,
    .template_glossaire_header {
        padding: 35px 0;
    }

    .mt--50 {
        margin-top: -20px;
    }

    .img_header_glossaire,
    .img_header_glossaire img {
        height: 280px;
    }

    .font54 {
        font-size: 36px;
    }

    .template_glossaire_header h1 {
        font-size: 28px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .row_sommaire {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Bloc Image + Texte ──────────────────────────────────────────────────────── */
.row_glossaire_content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 24px;
    align-items: center;
    margin: 40px 0;
}

.div_glossaire_img {
    grid-area: 1 / 1 / 2 / 7;
    position: sticky;
    top: 30px;
    align-self: start;
}

.div_glossaire_content {
    grid-area: 1 / 8 / 2 / 13;
}

/* Version inversée : image à droite, texte à gauche */
.row_glossaire_content--reverse .div_glossaire_img {
    grid-area: 1 / 7 / 2 / 13;
    order: 2;
}

.row_glossaire_content--reverse .div_glossaire_content {
    grid-area: 1 / 1 / 2 / 6;
    order: 1;
}

.div_glossaire_img img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

@media (max-width: 1199px) {
    .row_glossaire_content,
    .row_glossaire_content--reverse {
        grid-template-columns: 1fr;
        grid-column-gap: 0;
        grid-row-gap: 24px;
    }

    .div_glossaire_img,
    .row_glossaire_content--reverse .div_glossaire_img {
        grid-area: auto;
        order: 1;
    }

    .div_glossaire_content,
    .row_glossaire_content--reverse .div_glossaire_content {
        grid-area: auto;
        order: 2;
    }
}