/*
 * CSS Fiche Séjour — Planète Freeride
 *
 * Chargé uniquement sur les fiches séjour (is_singular('sejour')).
 * Contient :
 * — Hero : image fond plein format, overlay, titre H1, prix, accroche, CTA
 * — Navigation sticky desktop (onglets en haut) / barre fixe mobile (bas d'écran)
 * — 4 sections accordéon : Programme, Hébergement, Tarifs, Fiche technique
 * — Timeline programme : grille image + jours, items J1-J10 masqués si vides
 * — Métadonnées (durée, destination, groupe, altitude) : 4 colonnes flex
 * — Descriptif du séjour : bloc wysiwyg optionnel, entre métadonnées et timeline
 * — Inclus / Non inclus : grille 2 colonnes
 * — Hébergement : photos 2 colonnes, cards infos (chambres, pension, équipements, localisation)
 * — Grille tarifaire : 15 lignes, lignes vides masquées
 * — Dates disponibles : 2 colonnes, badges statut (disponible/complet/urgent)
 * — Fiche technique : dots niveau (1-5), barre effort couleur dynamique (1-10),
 *   matériel obligatoire/recommandé, 8 infos pratiques avec icônes SVG
 * — Slider "Autres séjours" en bas de page
 *
 * Responsive :
 * — @media (max-width: 1023px) : nav en barre fixe bas, programme 1 colonne,
 *   fiche technique 1 colonne, padding-bottom 76px pour laisser place à la nav
 * — @media (max-width: 763px)  : séparateurs entre sections accordéon,
 *   navigation bottom en grille 2×2, hero réduit, metas flex-wrap 50%,
 *   grilles inclus/dates/matériel/hébergement en 1 colonne
 *
 * Enqueued via pf-loader.php — condition is_singular('sejour').
 * Migré depuis Code Snippets (ID 35) le 2026-07-01.
 *
 * Mis à jour le 2026-08-20 : sélecteurs "strong" des blocs Programme (J1-J10),
 * Hébergement et Matériel obligatoire/recommandé passés en enfant direct
 * (« > strong ») au lieu de descendant. Ces champs sont maintenant en wysiwyg :
 * le strong direct enfant du conteneur est l'étiquette/titre du bloc (ex. le
 * titre du jour, "Chambres", "Matériel obligatoire"...), volontairement stylée
 * en display:block pour ressembler à un mini-titre. Mais avec un sélecteur
 * descendant, cette même règle s'appliquait aussi à n'importe quel mot mis en
 * gras PAR L'UTILISATEUR à l'intérieur du texte wysiwyg (imbriqué plus profond,
 * dans un <div><p>...<strong>), le faisant passer à la ligne à chaque fois. Le
 * combinateur enfant direct restreint la règle au seul strong d'étiquette et
 * laisse les mots en gras du texte s'afficher normalement, en ligne.
 *
 * Mis à jour le 2026-08-24 : alignements WordPress (aligncenter/alignleft/
 * alignright) rétablis sur les images insérées dans les champs wysiwyg
 * Descriptif du séjour et Description générale Hébergement — la règle
 * générique "img { margin: 12px 0 }" de ces blocs était plus spécifique que
 * la règle .aligncenter du thème et écrasait silencieusement le
 * margin-left/right: auto nécessaire au centrage (l'image restait collée à
 * gauche quel que soit l'alignement choisi dans l'éditeur). Ref. demande du
 * 24/08/2026.
 *
 * Mis à jour le 2026-08-26 : normalisation de la taille des icônes du bloc
 * Durée/Destination/Groupe/Altitude (.pf-sejour-meta__icon svg) à 25px de
 * hauteur — les 4 nouveaux SVG fournis n'ont pas tous les mêmes dimensions
 * intrinsèques (12px à 20px), sans cette règle ils s'affichaient à des
 * tailles différentes et plus petites que l'ancien jeu d'icônes.
 *
 * Mis à jour le 25/09/2026 : contour .pf-card-sejour passé de 1.5px à 2px
 * (retouche Julia) — les CTA outline du site (ex. bouton "Envoyer" des
 * formulaires, calqué sur is-style-outline-beige) sont en 2px ; à côté
 * d'eux le contour de card à 1.5px paraissait visiblement plus fin,
 * incohérence d'épaisseur de trait entre deux éléments du même vocabulaire
 * visuel (contour + coins carrés). Un seul point de retouche : la couleur
 * de bordure et border-radius restent inchangés.
 *
 * Mis à jour le 25/09/2026 (3) : ANNULATION du changement ci-dessus, CTA
 * outline compris — 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, sejours-archive.css).
 *
 * Mis à jour le 25/09/2026 (2) : suppression du border-top: 1px solid beige
 * sur .pf-sejour-section (séparateur horizontal entre les 4 sections
 * accordéon en desktop) — retouche Julia. Le séparateur mobile (border-top
 * bleu anthracite, @media 763px, rôle différent : marque la coupure entre
 * sections empilées sur petit écran) est conservé, non concerné.
 * Ref. PR2602-0009
 */

/* Masque tous les <p> vides injectés par wpautop dans les sections séjour */
.pf-sejour-section__inner p:empty,
.pf-sejour-heberg__photos > p,
.pf-sejour-heberg__cards > p,
.pf-sejour-programme > p,
.pf-sejour-tarifs__grille > p,
.pf-sejour-infos > p,
.pf-sejour-materiel > p,
.pf-sejour-inclus > p {
    display: none !important;
    margin: 0 !important;
    height: 0 !important;
    line-height: 0 !important;
}
    /* ================================================
       HERO SÉJOUR
       ================================================ */
		/* Neutralise le margin-block-start injecté par WP core sur le wrapper du shortcode */
		.wp-site-blocks > .wp-block-shortcode {
			margin-block-start: 0;
		}

		.pf-hero-sejour {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		min-height: 535px;
		padding-top: 55px;
		padding-bottom: 60px;
		background-size: cover;
		background-position: center;
		background-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

		.pf-hero-sejour__overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.75) 70%,
			rgba(255, 255, 255, 0.98) 100%
		);
		pointer-events: none;
	}

    .pf-hero-sejour__content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1200px;
		margin: 0 auto;
        padding: 0 40px;
        display: flex;
        flex-direction: column;
        gap: 16px;
		align-items: flex-start;
    }
	.pf-hero-sejour .wp-block-group.boutons-hero {
		width: fit-content;
		justify-content: flex-start;
	}

	.pf-hero-sejour .wp-block-buttons.is-layout-flex {
		justify-content: flex-start;
	}
    .pf-hero-sejour__titre {
        font-family: var(--wp--preset--font-family--fatfrank);
        font-size: clamp(2rem, 5vw, 3.5rem);
        color: #1c3038;
        line-height: 1.1;
        margin: 0;
    }

    .pf-hero-sejour__prix {
        display: inline-block;
        border: 1.5px solid #1c3038;
        color: #1c3038;
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--medium);
        font-weight: var(--wp--custom--font-weight--medium);
        padding: 4px 14px;
        border-radius: 5px;
        width: fit-content;
        background: transparent;
    }

    .pf-hero-sejour__prix strong {
        font-weight: var(--wp--custom--font-weight--bold);
    }
        a.pf-hero-sejour__prix--demande {
        text-decoration: none;
        transition: background-color .2s, color .2s;
    }
    a.pf-hero-sejour__prix--demande:hover,
    a.pf-hero-sejour__prix--demande:focus-visible {
        background: #1c3038;
        color: var(--wp--preset--color--custom-pf-beige);
    }
    a.pf-hero-sejour__prix--demande:focus-visible {
        outline: 2px solid #1c3038;
        outline-offset: 3px;
    }

    .pf-sejour-tarif__demande {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .pf-sejour-tarif__demande p { margin: 0; }
    .pf-hero-sejour__accroche {
        font-family: var(--wp--preset--font-family--satoshi-variable);
        font-size: var(--wp--preset--font-size--medium);
        color: #1c3038;
        max-width: 560px;
        margin: 0;
        line-height: var(--wp--custom--line-height--large);
    }

    .pf-hero-sejour__ctas {
        margin-top: 8px;
    }
	/* Boutons hero séjour — correctif positionnement icône */
	/* Correctif layout boutons hero — PHP shortcode ne charge pas le CSS bloc natif */
	.pf-hero-sejour .wp-block-buttons.is-layout-flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.pf-hero-sejour .wp-block-button__link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.pf-hero-sejour .wp-block-button__link::after {
		line-height: 1;
		align-self: center;
	}

	/* ================================================
	   HERO FREETEST — variante du hero séjour construite avec un
	   bloc Cover (image <img> réelle avec srcset, pas de background-image
	   CSS comme pour .pf-hero-sejour). Classes propres à ce bloc
	   (.pf-hero-freetest / __image / __overlay) ; le texte réutilise tel
	   quel .pf-hero-sejour__content/__titre/__prix/__accroche (mêmes
	   styles typographiques que le hero séjour, cf. règles ci-dessus).
	   Ajouté le 2026-08-20 : le bloc n'avait jusqu'ici aucun CSS dédié,
	   d'où l'image affichée hors gabarit et le texte qui retombait sous
	   l'image au lieu de se superposer dessus.
	   ================================================ */
	.pf-hero-freetest {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		min-height: 535px;
		padding-top: 55px;
		padding-bottom: 60px;
		overflow: hidden;
		background-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

	.pf-hero-freetest__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}

	.pf-hero-freetest__overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.75) 70%,
			rgba(255, 255, 255, 0.98) 100%
		);
		pointer-events: none;
	}

	/* Neutralise le <p> vide injecté entre l'overlay et le contenu */
	.pf-hero-freetest p:empty {
		display: none;
		margin: 0;
	}

	/* ================================================
	   FREETEST — Onglet Informations : carte SOUS le descriptif
	   ================================================
	   La fiche Freetest réutilise .pf-sejour-programme (la grille 2
	   colonnes image + timeline de la fiche séjour) pour poser côte à
	   côte le bloc Descriptif (.pf-sejour-programme__timeline) et la
	   carte OSM (.pf-freetest-carte). À la demande de Jeff (21/08), la
	   carte doit s'afficher sous le descriptif plutôt qu'à côté.
	   Plutôt que de toucher au PHP partagé (qui casserait la mise en
	   page de la fiche séjour), on neutralise la grille uniquement sur
	   la page Freetest via le body class natif WordPress
	   "single-{post_type}" — la fiche séjour garde ses 2 colonnes.
	   Ref. demande du 21/08/2026.
	   ================================================ */
	body.single-freetest .pf-sejour-programme {
		grid-template-columns: 1fr;
	}

	body.single-freetest .pf-freetest-carte {
		margin-top: 30px;
	}

	/* ================================================
	   BARRE STICKY
	   ================================================ */
		/* Supprime les <p> vides injectés par wpautop */
		.pf-sejour-nav + p:empty,
		.pf-sejour-section + p:empty,
		.wp-block-shortcode > p:empty {
			display: none;
			margin: 0;
		}

		/* Neutralise le min-height sur les pages séjour */
		body.single-sejour .wp-site-blocks {
			min-height: unset;
		}
	.pf-sejour-nav {
		position: sticky;
		top: 0;
		z-index: 100;
		background: var(--wp--preset--color--custom-pf-bleu-anthracite);
		padding-top: 6px;
	    padding-bottom: 0;

	}

	.pf-sejour-nav__inner {
		display: flex;
		align-items: flex-end;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 40px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pf-sejour-nav__inner::-webkit-scrollbar {
		display: none;
	}

	.pf-sejour-nav__link {
		display: inline-flex;
		align-items: center;
		padding: 0px 24px;
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		font-weight: var(--wp--custom--font-weight--medium);
		color: rgba(252, 248, 230, 0.5);
		text-decoration: none;
		white-space: nowrap;
		text-transform: uppercase;
	    letter-spacing: 0.08em;
		border-bottom: none;
		transition: color 0.2s ease, border-color 0.2s ease;
	}

	.pf-sejour-nav__link:hover,
	.pf-sejour-nav__link--active {
		background: #FFF;
    	color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

	/* ================================================
	   SECTIONS COMMUNES
	   ================================================ */

	.pf-sejour-section {
		padding:40px 0;
	}

	.pf-sejour-section__inner {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 40px;
		display: flex;
		flex-direction: column;
	}
	.pf-card-sejour{
        border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
    }
	.pf-card-title, .pf-card-prix, .pf-card-arrow, .pf-card-avis {
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}
	.pf-card-sep {
        border: none;
        border-top: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);}
	/* ================================================
	   SECTION 1 — PROGRAMME & ITINÉRAIRE
	   ================================================ */

	.pf-sejour-meta {
		display: flex;
		gap: 0;
		border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		border-radius: 2px;
		overflow: hidden;
	}

	.pf-sejour-meta__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 4px;
		padding: 16px 20px;
		border-right: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

	.pf-sejour-meta__item:last-child {
		border-right: none;
	}

	.pf-sejour-meta__icon {
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		display: flex;
	}

	/* Normalise la hauteur des icônes SVG du bloc Durée/Destination/Groupe/
	   Altitude à 25px, quelle que soit leur taille intrinsèque (width/height
	   posés dans le SVG lui-même) — évite que le jeu d'icônes s'affiche à
	   des tailles différentes selon le SVG fourni. Ref. PR2602-0009 */
	.pf-sejour-meta__icon svg {
		height: 25px;
		width: auto;
		flex-shrink: 0;
	}

	.pf-sejour-meta__label {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: var(--wp--custom--font-weight--regular);
		color: rgba(27, 47, 55, 0.6);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.pf-sejour-meta__value {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--medium);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

	/* Descriptif du séjour — bloc wysiwyg optionnel, entre les métadonnées et le programme */
	.pf-sejour-descriptif {
		margin-top: 30px;
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--medium);
		color: rgba(27, 47, 55, 0.8);
		line-height: var(--wp--custom--line-height--large);
	}

	.pf-sejour-descriptif p {
		margin: 0 0 12px;
	}

	.pf-sejour-descriptif p:last-child {
		margin-bottom: 0;
	}

	.pf-sejour-descriptif ul,
	.pf-sejour-descriptif ol {
		padding-left: 20px;
		margin: 0 0 12px;
	}

	.pf-sejour-descriptif li {
		margin-bottom: 6px;
	}

	/* Images insérées via le bouton média du champ wysiwyg — évite tout
	   débordement si l'image est plus large que le bloc de texte */
	.pf-sejour-descriptif img {
		max-width: 100%;
		height: auto;
		border-radius: 2px;
		margin: 12px 0;
	}

	/* Alignements WordPress (aligncenter/alignleft/alignright) posés par
	   l'éditeur sur l'image — sans ces règles, la classe .aligncenter (ou
	   align*) n'a aucun effet ici : la règle ci-dessus (.pf-sejour-descriptif
	   img) est plus spécifique que la règle .aligncenter générique du thème,
	   et son "margin: 12px 0" écrase silencieusement le margin-left/right:
	   auto nécessaire au centrage — l'image reste collée à gauche quel que
	   soit l'alignement choisi. Ref. demande du 24/08/2026. */
	.pf-sejour-descriptif img.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.pf-sejour-descriptif img.alignleft {
		float: left;
		margin: 12px 16px 12px 0;
	}

	.pf-sejour-descriptif img.alignright {
		float: right;
		margin: 12px 0 12px 16px;
	}

	.pf-sejour-programme {
		display: grid;
		grid-template-columns: 0.7fr 1.5fr;
		gap: 0 48px;
		align-items: start;
		margin-top: 50px;
	}
	.pf-sejour-programme__image {
		position: sticky;
		top: 120px; /* offset header + nav sticky */
		height: fit-content;
		overflow: hidden;
		border-radius: 2px;
	}

	.pf-sejour-programme__image img {
		width: 100%;
		height: 100%;
		min-height: 400px;
		object-fit: cover;
		display: block;
		border-radius: 2px;
		max-height: 500px;
	}

	.pf-sejour-programme__titre {
		font-family: var(--wp--preset--font-family--fatfrank);
		font-size: var(--wp--preset--font-size--x-large);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		margin: 0 0 24px;
	}

		.pf-sejour-programme__timeline {
		border-left: 2px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		padding-left: 24px;
	}

	.pf-sejour-timeline__item {
		display: flex;
		gap: 16px;
		/*padding-bottom: 20px;*/
		/*border-bottom: 1px solid rgba(27, 47, 55, 0.1);*/
		margin-bottom: 10px;
	}

	.pf-sejour-timeline__item:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.pf-sejour-timeline__badge {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--wp--preset--color--custom-pf-vert);
		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--x-small);
		font-weight: var(--wp--custom--font-weight--bold);
		padding: 4px 10px;
		border-radius: 2px;
		white-space: nowrap;
		height: 55px;
		width:90px;
		margin-top: 2px;
	}

	.pf-sejour-timeline__content > strong {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--medium);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		display: block;
		margin-bottom: 4px;
	}

	.pf-sejour-timeline__content p {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		color: rgba(27, 47, 55, 0.7);
		margin: 0;
		line-height: var(--wp--custom--line-height--large);
	}

	.pf-sejour-inclus {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin: 50px 0 20px 0;
	}

	.pf-sejour-inclus__col {
		border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		border-radius: 2px;
		padding: 24px;
	}

	.pf-sejour-inclus__col h3 {
		font-family: var(--wp--preset--font-family--fatfrank);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--bold);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		margin: 0 0 16px;
		line-height: 1.1;
	}

	.pf-sejour-inclus__col ul,
	.pf-sejour-inclus__col ol {
		columns: 2;
    	column-gap: 24px;
		padding-left: 20px;
		margin: 0;
	}

	.pf-sejour-inclus__col li {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--regular);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		line-height: var(--wp--custom--line-height--x-small);
		margin-bottom: 8px;
		break-inside: avoid;
	}

	/* ================================================
	   SECTION 2 — HÉBERGEMENT
	   ================================================ */

	.pf-sejour-heberg__titre {
		font-family: var(--wp--preset--font-family--fatfrank);
		font-size: var(--wp--preset--font-size--x-large);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		margin: 0;
	}

	.pf-sejour-heberg__photos {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 25px;
		height: 360px;
		margin-top: 30px;
	}

	.pf-sejour-heberg__photo {
		overflow: hidden;
		border-radius: 2px;
	}

	.pf-sejour-heberg__photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.pf-sejour-heberg__cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 25px;
		margin: 25px 0 20px 0;
	}

	.pf-sejour-heberg__card {
		border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		border-radius: 2px;
		padding: 20px 24px;
	}

	.pf-sejour-heberg__card--full {
		grid-column: 1 / -1;
	}

	.pf-sejour-heberg__card > strong {
		font-family: var(--wp--preset--font-family--fatfrank);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--bold);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		margin: 0 0 16px;
		line-height: 1.1;
	}

	.pf-sejour-heberg__card p {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		color: rgba(27, 47, 55, 0.7);
		margin: 0;
		line-height: var(--wp--custom--line-height--large);
	}

	/* Image insérée via le bouton média du champ Description générale
	   (Hébergement) — évite tout débordement dans la card */
	.pf-sejour-heberg__card img {
		max-width: 100%;
		height: auto;
		border-radius: 2px;
		margin: 12px 0;
	}

	/* Alignements WordPress (aligncenter/alignleft/alignright) — même
	   correctif que pour .pf-sejour-descriptif ci-dessus, nécessaire ici
	   pour les mêmes raisons de spécificité CSS. Ref. demande du 24/08/2026. */
	.pf-sejour-heberg__card img.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.pf-sejour-heberg__card img.alignleft {
		float: left;
		margin: 12px 16px 12px 0;
	}

	.pf-sejour-heberg__card img.alignright {
		float: right;
		margin: 12px 0 12px 16px;
	}

	/* ================================================
	   LIENS DANS LE CONTENU WYSIWYG (Descriptif, Programme/timeline,
	   Hébergement, Inclus/non inclus, Matériel)
	   ================================================
	   Sans cette règle, un lien collé tel quel dans un champ wysiwyg
	   hérite de la couleur de lien globale du thème
	   (a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--background) })
	   — une couleur crème pensée pour des liens posés sur fond sombre
	   (hero, footer). Sur ces blocs à fond clair, le lien devient
	   quasi invisible (texte crème sur blanc), comme repéré sur les
	   liens "Nos partenaires" de la fiche Freetest. On lui donne ici
	   une couleur à fort contraste + un soulignement, pour rester
	   repérable même sans la couleur (RGAA 3.2 / Opquast — usage de la
	   couleur seule). :not(.wp-element-button) exclut les boutons
	   (ex. "Itinéraire") qui ont déjà leur propre style.
	   Ref. demande du 21/08/2026.
	   ================================================ */
	.pf-sejour-descriptif a:not(.wp-element-button),
	.pf-sejour-programme__timeline a:not(.wp-element-button),
	.pf-sejour-heberg__card a:not(.wp-element-button),
	.pf-sejour-inclus__col a:not(.wp-element-button),
	.pf-sejour-materiel__col a:not(.wp-element-button) {
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		text-decoration: underline;
	}

	.pf-sejour-descriptif a:not(.wp-element-button):hover,
	.pf-sejour-programme__timeline a:not(.wp-element-button):hover,
	.pf-sejour-heberg__card a:not(.wp-element-button):hover,
	.pf-sejour-inclus__col a:not(.wp-element-button):hover,
	.pf-sejour-materiel__col a:not(.wp-element-button):hover {
		color: var(--wp--preset--color--custom-pf-orange);
	}

	.pf-sejour-descriptif a:not(.wp-element-button):focus-visible,
	.pf-sejour-programme__timeline a:not(.wp-element-button):focus-visible,
	.pf-sejour-heberg__card a:not(.wp-element-button):focus-visible,
	.pf-sejour-inclus__col a:not(.wp-element-button):focus-visible,
	.pf-sejour-materiel__col a:not(.wp-element-button):focus-visible {
		outline: 2px solid var(--wp--preset--color--custom-pf-orange);
		outline-offset: 2px;
	}

	/* ================================================
	   SECTION 3 — TARIFS & DATES
	   ================================================ */

	.pf-sejour-tarifs__grille {
		border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		border-radius: 2px;
		overflow: hidden;
	}

	.pf-sejour-tarif__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 24px;
		border-bottom: 1px solid rgba(27, 47, 55, 0.1);
	}

	.pf-sejour-tarif__row:last-child {
		border-bottom: none;
	}

	.pf-sejour-tarif__info {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.pf-sejour-tarif__info strong, .pf-sejour-date__card strong {
		font-family: var(--wp--preset--font-family--fatfrank);
		font-size: var(--wp--preset--font-size--medium);
		font-weight: var(--wp--custom--font-weight--bold);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		margin: 0 0 16px;
		line-height: 1.1;
	}

	.pf-sejour-tarif__info span {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		color: rgba(27, 47, 55, 0.6);
	}

	.pf-sejour-tarif__prix {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--large);
		font-weight: var(--wp--custom--font-weight--medium);
		font-style: italic;
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		white-space: nowrap;
	}

	.pf-sejour-tarif__saison {
		font-family: var(--wp--preset--font-family--fatfrank);
		font-weight: var(--wp--custom--font-weight--bold);
		font-size: var(--wp--preset--font-size--x-large);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		margin: 0;
		display: flex;
		align-items: flex-start;
		gap: 8px;
		padding-bottom: 20px;
	}

	.pf-sejour-dates {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.pf-sejour-date__card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		border-radius: 2px;
		padding: 18px 20px;
		gap: 12px;
	}

	.pf-sejour-date__card > div {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.pf-sejour-date__card span {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		color: rgba(27, 47, 55, 0.6);
	}

	.pf-sejour-date__badge {
		flex-shrink: 0;
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: var(--wp--custom--font-weight--bold);
		font-style: oblique;
		padding: 6px 12px;
		border-radius: 2px;
		white-space: nowrap;
	}

	.pf-sejour-date__badge--disponible {
		background: var(--wp--preset--color--custom-pf-vert);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

	.pf-sejour-date__badge--complet {
		background: var(--wp--preset--color--custom-pf-orange);
		color: var(--wp--preset--color--custom-pf-beige);
	}

	.pf-sejour-date__badge--urgent {
		background: var(--wp--preset--color--custom-pf-jaune);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}
	.pf-sejour-section__inner p {
		margin-block-end: 5px !important;
	}
	.pf-sejour-tarif__info-note {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		background: var(--wp--preset--color--custom-pf-bleu-anthracite);
		color: var(--wp--preset--color--custom-pf-beige);
		padding: 12px 20px;
		border-radius: 2px;
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		line-height: var(--wp--custom--line-height--large);
		width: fit-content;
		margin-block-start: 2rem;
		}

	.pf-sejour-tarif__info-note p {
		margin: 0;
		color: var(--wp--preset--color--custom-pf-beige);
	}

	.pf-sejour-tarif__info-icon {
		flex-shrink: 0;
		font-size: var(--wp--preset--font-size--medium);
		margin-top: 1px;
		display:flex;
	}
		/* ================================================
		   SECTION 4 — FICHE TECHNIQUE
		   ================================================ */

		.pf-sejour-fiche__bloc {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin-block-end: 55px;
		}

		/* Wrapper surtitre + card — aligne le surtitre au-dessus */
		.pf-sejour-fiche__col {
			display: flex;
			flex-direction: column;
			gap: 8px;
			flex: 1;
		}

		.pf-sejour-fiche__col .pf-sejour-materiel__col {
			flex: 1;
		}

		/* Titre fort commun aux cards niveau et effort */
		.pf-sejour-fiche__titre {
			font-family: var(--wp--preset--font-family--fatfrank);
			font-size: var(--wp--preset--font-size--medium);
			color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		}

		/* Dots niveau */
		.pf-sejour-niveau__dots {
			display: flex;
			gap: 5px;
		}
		.pf-sejour-niveau__dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			border : solid 1px #000;
			background: var(--wp--preset--color--custom-pf-vert);
			opacity: 0.2;
		}
		.pf-sejour-niveau__dot.is-active {
			opacity: 1;
		}

		/* Barre effort — background géré en inline PHP */
		.pf-sejour-effort__bar {
			height: 6px;
			background: rgba(27, 47, 55, 0.12);
			border-radius: 3px;
			overflow: hidden;
			margin-block-end: 22px;
		}
		.pf-sejour-effort__fill {
			height: 100%;
			border-radius: 3px;
			transition: width 0.6s ease;
		}

		/* Grille 2 colonnes — commune à niveau/effort ET matériel */
		.pf-sejour-materiel {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 24px;
		}

		/* Card bordée — commune à tous les blocs en 2 colonnes */
		.pf-sejour-materiel__col {
			border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
			border-radius: 2px;
			padding: 24px;
		}

		.pf-sejour-materiel__col > strong, .pf-sejour-info__label strong  {
			font-family: var(--wp--preset--font-family--fatfrank);
			font-size: var(--wp--preset--font-size--medium);
			font-weight: var(--wp--custom--font-weight--bold);
			color: var(--wp--preset--color--custom-pf-bleu-anthracite);
			line-height: 1.1;
		}

		/* Descriptions dans les cards niveau et effort */
		.pf-sejour-materiel__col p {
			font-family: var(--wp--preset--font-family--satoshi-variable);
			font-size: var(--wp--preset--font-size--small);
			color: rgba(27, 47, 55, 0.7);
			margin: 0;
			line-height: var(--wp--custom--line-height--large);
		}

		.pf-sejour-materiel__col ul,
		.pf-sejour-materiel__col ol {
			columns: 2;
			column-gap: 24px;
			padding-left: 20px;
			margin: 0;
		}
		.pf-sejour-materiel__col li {
			font-family: var(--wp--preset--font-family--satoshi-variable);
			font-size: var(--wp--preset--font-size--small);
			color: rgba(27, 47, 55, 0.8);
			margin-bottom: 6px;
		}

		/* Infos pratiques */
		.pf-sejour-infos {
			border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
			border-radius: 2px;
			overflow: hidden;
		}
		.pf-sejour-info__row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16px 24px;
			border-bottom: 1px solid rgba(27, 47, 55, 0.1);
			gap: 16px;
		}
		.pf-sejour-info__row:last-child {
			border-bottom: none;
		}
		.pf-sejour-info__label {
			display: flex;
			align-items: center;
			gap: 12px;
			color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		}
		.pf-sejour-info__detail {
			font-family: var(--wp--preset--font-family--satoshi-variable);
			font-size: var(--wp--preset--font-size--medium);
			color: rgba(27, 47, 55, 0.7);
			text-align: right;
		}
/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 1023px) {
	body.single-sejour {
		padding-bottom: 76px;
	}
	.pf-sejour-programme {
		grid-template-columns: 1fr;
	}
	.pf-sejour-programme__image {
		position: static;
		max-height: 240px;
		overflow: hidden;
	}
	.pf-sejour-fiche__bloc--row {
		grid-template-columns: 1fr;
	}

	/* navigation — bottom bar fixe */
	.pf-sejour-nav {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 200;
		padding: 8px 0;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
	}
	.pf-sejour-nav__inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		padding: 0 16px;
		max-width: none;
	}
	.pf-sejour-nav__inner br {
		display: none;
	}
	.pf-sejour-nav__link {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		min-height: 44px;
		padding: 12px 8px;
		border: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		border-radius: 8px;
		background: var(--wp--preset--color--custom-pf-beige);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.3;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		white-space: normal;
	}
	.pf-sejour-nav__link:hover,
	.pf-sejour-nav__link:focus-visible,
	.pf-sejour-nav__link--active {
		background: var(--wp--preset--color--custom-pf-bleu-anthracite);
		color: var(--wp--preset--color--custom-pf-beige);
		border-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}
	.pf-sejour-nav__link:focus-visible {
		outline: 2px solid var(--wp--preset--color--custom-pf-orange);
		outline-offset: 2px;
	}
}

@media (max-width: 763px) {
	/* === Séparation visuelle entre chaque section accordéon === */
	.pf-sejour-section {
		border-top: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		padding-top: 24px;
		margin-top: 24px;
	}
	.pf-sejour-section:first-of-type {
		border-top: none;
		margin-top: 0;
		padding-top: 0;
	}

	.pf-hero-sejour,
	.pf-hero-freetest {
		min-height: 420px;
		padding-top: 32px;
		padding-bottom: 40px;
	}
	.pf-hero-sejour__content {
		padding: 0 20px;
	}

	.pf-sejour-section__inner {
		padding: 0 20px;
		gap: 32px;
	}
	.pf-sejour-meta {
		flex-wrap: wrap;
	}
	.pf-sejour-meta__item {
		flex: 1 1 calc(50% - 1px);
	}
	.pf-sejour-inclus,
	.pf-sejour-dates,
	.pf-sejour-materiel,
	.pf-sejour-heberg__cards,
	.pf-sejour-heberg__photos {
		grid-template-columns: 1fr;
	}
	.pf-sejour-heberg__photos {
		height: 240px;
	}
	.pf-sejour-date__card {
		flex-direction: column;
		align-items: flex-start;
	}
}