/*
 * CSS Séjours Archive — Planète Freeride
 *
 * Chargé uniquement sur la page Séjours Outdoor (is_page('sejours-outdoor')).
 * ⚠ Snippet source utilisait is_page(12) — ID fragile remplacé par le slug.
 *
 * Contient :
 * — Breakout du conteneur Spectra pour le hero et le bandeau USP
 * — Hero : image fond, overlay dégradé, titre centré, filtres JS
 * — Filtres : 3 selects (sport/saison/destination) + select tri (dashed) + bouton reset
 * — Grille 4 colonnes : cards pf-col-1 (span 1) / pf-col-2 (span 2) alternés par JS
 * — Hauteur identique toutes cards : image 240px fixe, body flex
 * — Bandeau USP (bloc réutilisable ID 864) : pleine largeur via 100vw trick
 * — Card CTA "séjour sur mesure" : fond bleu anthracite, texte beige, btn orange
 * — .pf-sr-only : accessibilité labels filtres
 *
 * Responsive @media (max-width: 763px) :
 * — Grille 1 colonne, tous spans neutralisés, image 200px, padding réduit
 *
 * Corrections appliquées le 2026-07-01 :
 * — is_page(12) → is_page('sejours-outdoor') (slug plus robuste)
 * — @media 768px → 763px (harmonisation breakpoints projet)
 * — Point-virgule manquant après font-family dans .pf-card-cta__texte
 *
 * Mis à jour le 25/09/2026 : contour .pf-archive-grid-wrap .pf-card-sejour
 * passé de 1.5px à 2px (retouche Julia, cf. sejour.css) — cohérence avec
 * l'épaisseur de trait des CTA outline du site (2px).
 *
 * Mis à jour le 25/09/2026 (2) : ANNULATION du changement ci-dessus — la
 * maquette Figma donne 1.5px partout (CTA, cards séjour, flèches
 * carousel, cards témoignage). Retour à 1.5px (cf.
 * css-additionnel-editeur-site.css, accueil.css, sejour.css).
 *
 * Enqueued via pf-loader.php — condition is_page('sejours-outdoor').
 * Migré depuis Code Snippets (ID 41) le 2026-07-01.
 * Ref. PR2602-0009
 */

/* ================================================
   ARCHIVE SÉJOURS — [pf_sejours_archive]
   ================================================ */
	/* Breakout du conteneur Spectra pour les sections pleine largeur */
.pf-archive-hero,
.pf-bandeau-usp {
		margin-left: calc(-1 * var(--wp--style--root--padding-left, 32px));
		margin-right: calc(-1 * var(--wp--style--root--padding-right, 32px));
		width: calc(100% + var(--wp--style--root--padding-left, 32px) + var(--wp--style--root--padding-right, 32px));
	}
/* ── CARDS — couleurs forcées dans le contexte archive ── */
.pf-archive-grid-wrap .pf-card-sejour {
    color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    text-decoration: none;
}

.pf-archive-grid-wrap .pf-card-title {
    color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    font-family: var(--wp--preset--font-family--satoshi-variable);
    font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
}

.pf-archive-grid-wrap .pf-card-prix {
    color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    font-family: var(--wp--preset--font-family--satoshi-variable);
    font-size: var(--wp--preset--font-size--medium);
}

.pf-archive-grid-wrap .pf-card-sep {
    border-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    opacity: 0.15;
}

.pf-archive-grid-wrap .pf-card-arrow {
    color: var(--wp--preset--color--custom-pf-bleu-anthracite);
}

.pf-archive-grid-wrap .pf-card-sejour {
    border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
    border-radius: 2px;
}
	/* Force la grille à pleine largeur */
body .pf-sejours-grid {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 24px;
	}

body .pf-archive-card-wrap.pf-col-1 { grid-column: span 1 !important; }
body .pf-archive-card-wrap.pf-col-2 { grid-column: span 2 !important; }

.pf-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── HERO ── */
.pf-archive-hero {
    position: relative;
    min-height: 480px;
	height:745px;
    background-size: cover;
    background-position: center;
	border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
}
.pf-archive-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(27, 47, 55, 0.05) 0%,
        rgba(27, 47, 55, 0.45) 100%
    );
    pointer-events: none;
}
.pf-archive-hero__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
}
.pf-archive-hero__titre {
    font-family: var(--wp--preset--font-family--fatfrank);
    font-size: clamp(2rem, 4vw, 3rem);
    color: #ffffff;
    margin: 0;
}

/* ── FILTRES ── */
.pf-archive-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.pf-filter-select {
    appearance: none;
    background-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
    border-radius: 2px;
    color: var(--wp--preset--color--custom-pf-beige);
    font-family: var(--wp--preset--font-family--satoshi-variable);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    padding: 10px 36px 10px 16px;
    cursor: pointer;
    min-width: 180px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FCF8E6' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* ── SELECTS — hover/focus : transparent beige ── */
.pf-filter-select:hover,
.pf-filter-select:focus {
    background-color: rgba(252, 248, 230, 0.15);
    border-color: rgba(252, 248, 230, 0.6);
    color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
    outline: none;
}
.pf-filter-select option {
    background-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
    color: #ffffff;
}
/* ── SELECT tri — différencié ── */
.pf-filter-select--tri {
    background-color: rgba(27, 47, 55, 0.7);
    border-style: dashed;
    border-color: rgba(252, 248, 230, 0.4);
}
.pf-filter-select--tri:hover,
.pf-filter-select--tri:focus {
    background-color: rgba(27, 47, 55, 0.85);
    border-color: rgba(252, 248, 230, 0.8);
}
.pf-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--wp--preset--color--custom-pf-bleu-anthracite);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    color: #ffffff;
    font-family: var(--wp--preset--font-family--satoshi-variable);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-decoration: none;
}
.pf-filter-reset:hover,
.pf-filter-reset:focus {
    background-color: rgba(27, 47, 55, 0.85); /* plus opaque */
    border-color: rgba(252, 248, 230, 0.8);
    color: #ffffff;
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}
/* ── GRILLE ── */
.pf-archive-grid-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 24px;
}
/* ── GRID 4 colonnes ── */
.pf-sejours-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    align-items: stretch;
}
/* ── SPANS alternés — gérés via classes JS ── */
body .pf-archive-card-wrap {
    display: flex;
}
.pf-archive-card-wrap[hidden] {
    display: none !important;
}
body .pf-archive-card-wrap.pf-col-1 { grid-column: span 1 !important; }
body .pf-archive-card-wrap.pf-col-2 { grid-column: span 2 !important; }
/* bandeau usp en pleine largeur */
.pf-archive-usp-break {
    grid-column: 1 / -1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
	/* ── HAUTEUR IDENTIQUE toutes cards ── */
.pf-sejours-grid .pf-card-sejour {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}
.pf-sejours-grid .pf-card-img-wrap {
    height: 240px;
    flex-shrink: 0;
    overflow: hidden;
}
.pf-sejours-grid .pf-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pf-sejours-grid .pf-card-body {
    flex: 1;
}

.pf-card-cta {
    border: 1.5px solid var(--wp--preset--color--custom-pf-beige);
    border-radius: 2px;
    background: var(--wp--preset--color--custom-pf-bleu-anthracite);
    display: flex;
    flex: 1;
    height: 100%;
}

.pf-card-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 32px;
}

.pf-card-cta__texte {
    font-family: var(--wp--preset--font-family--satoshi-variable);
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--custom-pf-beige);
    margin: 0;
    line-height: 1.3;
}

.pf-card-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wp--preset--color--custom-pf-orange);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 2px;
    font-family: var(--wp--preset--font-family--satoshi-variable);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--small);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pf-card-cta__btn:hover {
    opacity: 0.85;
}
	.pf-card-cta__logo {
    display: block;
}
.pf-card-cta__logo img {
    max-width: 160px;
    height: auto;
}
/* ================================================
   RESPONSIVE — GRILLE MOBILE
   ================================================ */
@media (max-width: 763px) {

    body .pf-sejours-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body .pf-archive-card-wrap.pf-col-1,
    body .pf-archive-card-wrap.pf-col-2 {
        grid-column: span 1 !important;
    }

    .pf-sejours-grid .pf-card-img-wrap {
        height: 200px;
    }

    .pf-archive-grid-wrap {
        padding: 24px 16px;
    }
}