/**
 * MSP Filtre — Grille de contenus filtrable
 * v1.3.0
 *
 * Scope : .msp-filtre
 * Variables composant surchargeables depuis :root si besoin.
 *
 * ---------------------------------------------------------------------------
 * CHANGELOG
 * ---------------------------------------------------------------------------
 * 1.3.0
 *  - AJOUT   : section LAYOUT card-standard, activée par l'attribut
 *              layout="card-standard" du shortcode (classe conteneur
 *              .msp-filtre--layout-card-standard). Reprend le rendu de
 *              .msp-card--machine de msp-liste : filet accent en pied,
 *              description au-dessus du titre, titre rouge, voile sombre +
 *              filigrane au survol, bouton CTA révélé.
 *  - NOTE    : la variante --equipements tombe automatiquement dès que
 *              post_type="equipements". Les deux blocs cohabitent donc
 *              toujours sur ce CPT. Les règles du layout sont calibrées à
 *              2 ids + 3 classes et placées APRÈS le bloc --equipements pour
 *              gagner l'arbitrage à spécificité égale ; le !important n'est
 *              posé que là où --equipements en pose déjà.
 *  - AJOUT   : repli tactile — sans survol possible, le bouton CTA est rendu
 *              dans le flux au lieu de rester invisible.
 * 1.2.0
 *  - CORRIGÉ : --mspf-card-w était figé à 33.33%, ce qui laissait la grille
 *              à moitié vide en columns="1" ou "2". Valeur par défaut 1fr,
 *              plafond toujours surchargeable.
 *  - CORRIGÉ : .mspf-card-body > .mspf-card-title:first-child ne s'appliquait
 *              jamais (spécificité inférieure à la règle #page-container).
 *              Re-scopée au même niveau.
 *  - CORRIGÉ : .mspf-card-media utilise --ratio-img au lieu d'un 4/3 en dur.
 *  - AJOUT   : .mspf-empty[hidden] explicite (robustesse face à Divi).
 *  - AJOUT   : position: relative sur .mspf-item (l'input masqué était
 *              positionné par rapport à un ancêtre inconnu).
 *  - AJOUT   : styles des encadrés .mspf-notice et .mspf-debug (éditeurs).
 *  - AJOUT   : crochet .is-ready (anti-FOUC optionnel, voir plus bas).
 * 1.1.1 — version précédente.
 * ---------------------------------------------------------------------------
 */

/* === Variables composant === */
.msp-filtre {
    --mspf-accent: var(--msp-red, #e2001a);   /* rouge Mecaspin */
    --mspf-dark: var(--msp-black, #1a1a1a);   /* noir Mecaspin */
    --mspf-grey: #CCCCCC;
    --mspf-light: #ececec;
    --mspf-card-bg: #fff;
    --mspf-cta-bg: #f4f4f4;
    --mspf-sidebar-w: 294px;
    --mspf-cols: 3;                            /* surchargée par l'attribut columns */
    --mspf-card-w: 1fr;                        /* plafond de largeur d'une carte.
                                                  Surcharger par une valeur fixe
                                                  (ex. 33.33%) pour brider la carte. */
    --mspf-gap: 15px;                          /* espacement entre cartes (maquette) */
    --mspf-gap-colum: 3.175rem;
    --mspf-radius: 0;                          /* maquette : angles droits */
    --ratio-img: 4 / 3;
}

/* === Layout général === */
.msp-filtre {
    display: grid;
    grid-template-columns: var(--mspf-sidebar-w) minmax(0, 1fr);
    gap: var(--mspf-gap-colum);
    align-items: start;
}

/* === Panneau de filtres === */
.msp-filtre .mspf-filters {
    position: sticky;
    top: calc(var(--msp-bar-h, 80px) + 1rem); /* sous le header sticky si présent */
}

.msp-filtre .mspf-group {
    margin: 0 0 2.2rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.msp-filtre .mspf-group:last-child {
    margin-bottom: 0;
}

.msp-filtre .mspf-group-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0 0.9rem;
    font-weight: 700;
    color: var(--mspf-dark);
    width: 100%;
    position: relative;
}

.msp-filtre .mspf-group-title span {
    font-size: 1.55rem;
}

.msp-filtre .mspf-group-title::before {
    font-family: ETmodules !important;
    content: "\66";
    margin-right: 5px;
    font-size: 1.6em;
    font-weight: 400;
}

.msp-filtre .mspf-group-title:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.5px;
    left: 0;
    bottom: 0.5rem;
    background-color: #707070;
}

.msp-filtre .mspf-group-title .mspf-ico {
    flex-shrink: 0;
    color: var(--mspf-dark);
}

/* === Contrôles (radio / checkbox custom) === */
.msp-filtre .mspf-item {
    position: relative;              /* v1.2.0 : ancre l'input masqué en absolu */
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--mspf-dark);
    line-height: 1.3;
}

.msp-filtre .mspf-item:hover .mspf-mark {
    border-color: var(--mspf-dark);
}

.msp-filtre .mspf-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.msp-filtre .mspf-item .mspf-mark {
    order: 2;
    margin-left: auto;
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    border: 1px solid #c9c9c9;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background: transparent;
}

.msp-filtre .mspf-item .mspf-mark::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform 0.15s ease;
}

.msp-filtre .mspf-item:has(:checked) .mspf-mark {
    background: var(--mspf-dark);
    border-color: var(--mspf-dark);
}

.msp-filtre .mspf-item:has(:checked) .mspf-mark::after {
    transform: scale(1);
}

.msp-filtre .mspf-input:focus-visible ~ .mspf-mark {
    outline: 2px solid var(--mspf-accent);
    outline-offset: 2px;
}

.msp-filtre .mspf-name {
    order: 1;
    font-size: 1rem;
}

.msp-filtre .mspf-item--all .mspf-name {
    font-weight: 700;
}

.msp-filtre .mspf-count {
    order: 1;
    font-size: 0.78rem;
    color: var(--mspf-grey);
}

/* Bouton toggle mobile (caché en desktop) */
.msp-filtre .mspf-filters-toggle {
    display: none;
}

/* === Grille & cartes === */
.msp-filtre .mspf-grid {
    display: grid;
    grid-template-columns: repeat(var(--mspf-cols), minmax(0, var(--mspf-card-w)));
    gap: var(--mspf-gap);
}

.msp-filtre .mspf-card.is-hidden {
    display: none;
}

.msp-filtre .mspf-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mspf-card-bg);
    border-radius: var(--mspf-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.msp-filtre.msp-filtre--equipements .mspf-card-link:hover {
    background-color: var(--msp-black);
    color: #fff;
}

.msp-filtre .mspf-card:hover .mspf-card-link {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.msp-filtre .mspf-card-media {
    aspect-ratio: var(--ratio-img);   /* v1.2.0 : était figé à 4 / 3 */
    background: var(--mspf-light);
}

.msp-filtre .mspf-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: var(--ratio-img);
}

.msp-filtre .mspf-card-noimg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Corps de carte */
.msp-filtre .mspf-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    padding: 0.95rem 1rem 1.1rem;
}

.msp-filtre .mspf-card-tax--1 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: bold;
    color: var(--mspf-accent);
    text-transform: uppercase;
    line-height: 1.227em;
    padding-bottom: 0;
}

.msp-filtre .mspf-card-tax--2,
.msp-filtre .mspf-card-tax--3 {
    margin: 0;
    font-size: 0.937rem;
    color: var(--mspf-grey);
    padding-bottom: 1rem;
}

#page-container #main-content .msp-filtre .mspf-card-title {
    margin: 0.3rem 0 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3em;
    color: var(--mspf-dark);
    text-transform: inherit;
}

/* v1.2.0 : re-scopée au même niveau de spécificité, sinon jamais appliquée.
   Cas card_terms="none" ou contenu sans terme : le titre est en tête de carte. */
#page-container #main-content .msp-filtre .mspf-card-body > .mspf-card-title:first-child {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.25;
}

#page-container #main-content .msp-filtre.msp-filtre--equipements .mspf-card-title {
    font-size: 1.75rem !important;
}

#page-container #main-content .msp-filtre.msp-filtre--equipements .mspf-card-desc {
    font-size: 1.1rem !important;
    font-weight: 500;
}

#page-container #main-content .msp-filtre.msp-filtre--equipements .mspf-card-cta {
    font-size: 1.125rem !important;
}

#page-container #main-content .msp-filtre.msp-filtre--equipements .mspf-card-link:hover :is(.mspf-card-title, .mspf-card-desc) {
    color: #fff;
}

.msp-filtre .mspf-card-desc {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--mspf-dark);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.msp-filtre .mspf-fw-light {
    font-weight: 400;
}

.msp-filtre .mspf-fw-bold {
    font-weight: 700;
}

.msp-filtre .mspf-red {
    color: var(--mspf-accent);
}

/* Bandeau CTA */
.msp-filtre .mspf-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    background: var(--mspf-cta-bg);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mspf-dark);
}

.msp-filtre.msp-filtre--equipements .mspf-card-cta {
    position: relative;
    background-color: inherit;
}

.msp-filtre.msp-filtre--equipements .mspf-card-cta::before {
    content: "";
    position: absolute;
    width: calc(100% - 32px);
    height: 1px;
    background-color: #CCCCCC;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.msp-filtre .mspf-card-cta .mspf-chev {
    flex-shrink: 0;
    color: var(--mspf-accent);
    transition: transform 0.2s ease;
}

.msp-filtre .mspf-card:hover .mspf-card-cta {
    background: var(--mspf-accent);
    color: #fff;
}

.msp-filtre.msp-filtre--equipements .mspf-card:hover .mspf-card-cta {
    background-color: var(--msp-black);
}

.msp-filtre .mspf-card:hover .mspf-card-cta .mspf-chev {
    color: var(--mspf-cta-bg);
}

.msp-filtre .mspf-card:hover .mspf-chev {
    transform: translateX(3px);
}

/* === État vide === */
.msp-filtre .mspf-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--mspf-grey);
    font-size: 1rem;
}

/* v1.2.0 : explicite — l'attribut hidden seul est fragile dès qu'une règle
   Divi pose un display sur un sélecteur de spécificité supérieure. */
.msp-filtre .mspf-empty[hidden] {
    display: none;
}

/* === Animation d'apparition === */
@keyframes mspfFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msp-filtre .mspf-grid.is-anim .mspf-card:not(.is-hidden) {
    animation: mspfFadeUp 0.35s ease both;
    animation-delay: var(--mspf-delay, 0ms);
}

/* === Anti-FOUC (OPTIONNEL — décommenter en connaissance de cause) ===
   Au chargement d'une URL contenant déjà un hash de filtre, les cartes sont
   toutes rendues côté serveur puis masquées par le JS : bref clignotement.
   La règle ci-dessous supprime le flash, MAIS le script étant chargé en pied
   de page, la grille reste invisible tant que le JS n'a pas tourné. Avec
   l'option « Différer l'exécution du JS » de WP Rocket, cela peut retarder
   l'affichage jusqu'à la première interaction. À tester sur la preprod.

.msp-filtre:not(.is-ready) .mspf-grid {
    visibility: hidden;
}
*/

@media (prefers-reduced-motion: reduce) {
    .msp-filtre .mspf-grid.is-anim .mspf-card:not(.is-hidden) {
        animation: none;
    }
    .msp-filtre .mspf-card-link,
    .msp-filtre .mspf-card-cta .mspf-chev,
    .msp-filtre .mspf-mark,
    .msp-filtre .mspf-mark::after,
    .msp-filtre--layout-card-standard .mspf-card,
    .msp-filtre--layout-card-standard .mspf-card-link::before,
    .msp-filtre--layout-card-standard .mspf-card-title,
    .msp-filtre--layout-card-standard .mspf-card-desc,
    .msp-filtre--layout-card-standard .mspf-card-tax,
    .msp-filtre--layout-card-standard .mspf-card-btn {
        transition: none;
    }
}

/* === Encadrés techniques (visibles par les éditeurs uniquement) === */
.mspf-notice,
.mspf-debug {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--msp-red, #e2001a);
    background: #fff6f6;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #1a1a1a;
}

.mspf-debug {
    border-left-color: #2271b1;
    background: #f2f7fc;
}

.mspf-notice-title,
.mspf-debug-title {
    margin: 0 0 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mspf-notice ul {
    margin: 0;
    padding-left: 1.2rem;
}

.mspf-notice li {
    margin-bottom: 0.4rem;
}

.mspf-notice code,
.mspf-debug code {
    padding: 0.1em 0.35em;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 2px;
    font-family: Menlo, Consolas, monospace;
    font-size: 0.92em;
}

.mspf-debug table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.mspf-debug th,
.mspf-debug td {
    padding: 0.45rem 0.6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mspf-debug th {
    width: 32%;
    font-weight: 600;
    white-space: nowrap;
}

.mspf-debug-foot {
    margin: 0.8rem 0 0;
    font-style: italic;
    opacity: 0.75;
}

.msp-filtre-empty .mspf-none {
    padding: 2rem 0;
    color: var(--msp-black, #1a1a1a);
}


/* =============================================================================
   LAYOUT card-standard — activé par layout="card-standard"
   -----------------------------------------------------------------------------
   Ordre visuel : image → (termes) → description → titre rouge.
   Le bandeau .mspf-card-cta n'est pas rendu par le PHP dans ce layout ; il est
   remplacé par .mspf-card-btn, positionné en absolu dans le corps de carte et
   révélé au survol.

   Le filigrane pointe sur le même asset que msp-liste. Les deux feuilles vivent
   dans /css/ du thème enfant, le chemin relatif résout donc à l'identique —
   rien à copier.

   IMPORTANT — ce bloc doit rester APRÈS la variante --equipements pour
   l'emporter à spécificité égale. Ne pas le déplacer plus haut dans le fichier.
   ============================================================================= */

.msp-filtre--layout-card-standard {
    --mspf-card-hover-bg: #1d1d1b;
    --mspf-card-hover-icon: url("../images/icon-hover-msp-card.svg");
    --mspf-card-hover-icon-pos: -5rem -4rem;
    --mspf-card-hover-icon-size: 130% auto;
    --mspf-card-shift: 3.75rem;   /* remontée du texte au survol */
    --mspf-card-pad: 1.625rem 1.437rem 2.125rem;
}

.msp-filtre--layout-card-standard .mspf-card {
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--mspf-accent);
    transition: border-bottom-color 0.35s ease;
}

/* Neutralise l'élévation générique : ce layout a son propre survol. */
.msp-filtre--layout-card-standard .mspf-card:hover .mspf-card-link {
    box-shadow: none;
    transform: none;
}

/* Voile sombre + filigrane, au-dessus de l'image, sous le texte. */
.msp-filtre--layout-card-standard .mspf-card-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background-color: var(--mspf-card-hover-bg);
    background-image: var(--mspf-card-hover-icon);
    background-repeat: no-repeat;
    background-position: var(--mspf-card-hover-icon-pos);
    background-size: var(--mspf-card-hover-icon-size);
    transition: opacity 0.35s ease;
}

.msp-filtre--layout-card-standard .mspf-card-body {
    position: relative;
    z-index: 2;
    padding: var(--mspf-card-pad);
    justify-content: space-between;
}

/* Description : au-dessus du titre, sans troncature à 3 lignes. */
.msp-filtre--layout-card-standard .mspf-card-desc {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    margin: 0 0 0.6rem;
    color: var(--mspf-dark);
    line-height: 1.45;
    transition: color 0.35s ease, transform 0.35s ease;
}

.msp-filtre--layout-card-standard .mspf-card-tax {
    transition: color 0.35s ease, transform 0.35s ease;
}

/* 2 ids + 3 classes : égalise --equipements, et gagne par l'ordre du fichier. */
#page-container #main-content .msp-filtre.msp-filtre--layout-card-standard .mspf-card-desc {
    font-size: 1.1rem !important;
    font-weight: 500;
}

#page-container #main-content .msp-filtre.msp-filtre--layout-card-standard .mspf-card-title {
    margin: 0;
    color: var(--mspf-accent);
    font-size: 1.75rem !important;
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.35s ease, transform 0.35s ease;
}

/* Bouton CTA — masqué au repos, révélé au survol. */
.msp-filtre--layout-card-standard .mspf-card-btn {
    position: absolute;
    z-index: 2;
    bottom: 1.75rem;
    left: 1.437rem;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    padding: 0.65rem 1.5rem;
    background-color: var(--mspf-accent);
    color: #fff;
    font-size: 0.937rem;
    font-weight: 700;
    line-height: 1.2;
    transform: translateY(10px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0s linear 0.3s;
}

@media (hover: hover) {
    .msp-filtre--layout-card-standard .mspf-card:hover .mspf-card-link::before {
        opacity: 1;
    }

    .msp-filtre--layout-card-standard .mspf-card:hover :is(.mspf-card-desc, .mspf-card-tax) {
        color: #fff;
        transform: translateY(calc(var(--mspf-card-shift) * -1));
    }

    #page-container #main-content .msp-filtre.msp-filtre--layout-card-standard .mspf-card:hover .mspf-card-title {
        color: #fff;
        transform: translateY(calc(var(--mspf-card-shift) * -1));
    }

    .msp-filtre--layout-card-standard .mspf-card:hover .mspf-card-btn {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity 0.3s ease 0.08s,
            transform 0.3s ease 0.08s,
            visibility 0s;
    }

    .msp-filtre--layout-card-standard .mspf-card:hover {
        border-bottom-color: var(--mspf-card-hover-bg);
    }
}

/* Repli tactile : sans survol, le bouton doit rester atteignable. */
@media (hover: none) {
    .msp-filtre--layout-card-standard .mspf-card-btn {
        position: static;
        visibility: visible;
        opacity: 1;
        align-self: flex-start;
        margin-top: 1rem;
        transform: none;
    }
}

/* === Responsive === */
@media (max-width: 980px) {
    .msp-filtre {
        grid-template-columns: 1fr;
    }
    .msp-filtre .mspf-filters {
        position: relative;
        top: auto;
    }
    .msp-filtre .mspf-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 1.1rem;
        border: 1px solid var(--mspf-light);
        background: var(--mspf-card-bg);
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--mspf-dark);
        cursor: pointer;
    }
    /* Panneau replié par défaut */
    .msp-filtre .mspf-filters-panel {
        display: none;
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        z-index: 20;
        min-width: 260px;
        max-height: 70vh;
        overflow-y: auto;
        padding: 1.2rem 1.4rem;
        background: var(--mspf-card-bg);
        border: 1px solid var(--mspf-light);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        width: 100%;
    }
    .msp-filtre .mspf-filters.is-open .mspf-filters-panel {
        display: block;
    }
    .msp-filtre .mspf-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 480px) {
    .msp-filtre .mspf-grid {
        grid-template-columns: 1fr;
    }
}