/*
 * CSS À propos — Planète Freeride
 *
 * Chargé uniquement sur la page À propos (is_page('a-propos')).
 * Contient :
 * — Grille galerie CSS Grid 5 colonnes (.pf-galerie-grid)
 * — Positionnements combinés pf-start-X.pf-col-Y (priorité sur les règles simples)
 * — Hauteurs pf-row-1 / pf-row-2 avec forçage grid-row pour portraits extrêmes
 * — Photos : object-fit cover + zoom hover 1.04
 * — Vidéos : façade cliquable (.pf-video-facade), iframe injectée au clic (RGPD)
 * — Icône play SVG centrée, masquée après lancement (.is-playing)
 * — .sr-only : classe accessibilité (légendes masquées visuellement, lues par SR)
 *
 * Responsive :
 * — @media (max-width: 763px)          : grille 1 colonne, neutralise tous les spans
 * — @media (764px – 1199px) tablette   : grille 3 colonnes
 *
 * ⚠ BUG CORRIGÉ 2026-07-01 :
 * Le @media tablette était imbriqué dans le @media mobile — CSS invalide.
 * Corrigé : les deux blocs sont maintenant des frères au même niveau.
 *
 * JS façade vidéo extrait dans js/galerie.js (chargé via wp_enqueue_script).
 *
 * Enqueued via pf-loader.php — condition is_page('a-propos').
 * Migré depuis Code Snippets (ID 21) le 2026-07-01.
 * Ref. PR2602-0009
 *
 * Mis à jour le 25/09/2026 : espacement entre les 3 galeries (shortcodes
 * [pf_galerie] successifs sur la page) — Jeff a constaté des marges
 * haut/bas inégales entre les blocs de galerie (captures d'écran, page À
 * propos).
 * — Essai 1 : marge haut/bas symétrique (24px) ajoutée sur .pf-galerie-grid.
 *   Mesure en direct par Jeff : espace obtenu de 80px, beaucoup trop —
 *   annulé.
 * — Essai 2 (retenu) : l'espace entre galeries était déjà de 18px sans
 *   aucune marge ajoutée (comportement par défaut du bloc WordPress qui
 *   enveloppe chaque shortcode). Plutôt que d'ajouter une marge par-dessus,
 *   le gap interne de la grille (entre les photos d'une même galerie) est
 *   remonté de 8px à 18px, pour que l'espacement soit identique partout —
 *   dans une galerie ET entre les galeries.
 */

/* ================================================
       PAGE À PROPOS — PR2602-0009 Planète Freeride
   					GRILLE GALERIE
  ================================================ */

	.pf-galerie-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 18px;
		width: 100%;
	}

	/* Position + largeur combinées — priorité sur les règles simples */
	.pf-galerie-item.pf-start-1.pf-col-1 { grid-column: 1 / span 1; }
	.pf-galerie-item.pf-start-1.pf-col-2 { grid-column: 1 / span 2; }
	.pf-galerie-item.pf-start-1.pf-col-3 { grid-column: 1 / span 3; }
	.pf-galerie-item.pf-start-1.pf-col-4 { grid-column: 1 / span 4; }
	.pf-galerie-item.pf-start-1.pf-col-5 { grid-column: 1 / span 5; }

	.pf-galerie-item.pf-start-3.pf-col-1 { grid-column: 3 / span 1; }
	.pf-galerie-item.pf-start-3.pf-col-2 { grid-column: 3 / span 2; }
	.pf-galerie-item.pf-start-3.pf-col-3 { grid-column: 3 / span 3; }

	.pf-galerie-item.pf-start-4.pf-col-1 { grid-column: 4 / span 1; }
	.pf-galerie-item.pf-start-4.pf-col-2 { grid-column: 4 / span 2; }

	.pf-galerie-item.pf-start-5.pf-col-1 { grid-column: 5 / span 1; }

	/* Largeur seule — sans position explicite (auto) */
	.pf-galerie-item.pf-col-1 { grid-column: span 1; }
	.pf-galerie-item.pf-col-2 { grid-column: span 2; }
	.pf-galerie-item.pf-col-3 { grid-column: span 3; }
	.pf-galerie-item.pf-col-4 { grid-column: span 4; }
	.pf-galerie-item.pf-col-5 { grid-column: span 5; }

	/* Hauteur */
	.pf-galerie-item.pf-row-1 { grid-row: span 1; }
	.pf-galerie-item.pf-row-2 { grid-row: span 2; }

	/* Cellule — overflow + hauteur min */
	.pf-galerie-item {
		overflow: hidden;
		position: relative;
		min-height: 220px;
	}
	/* Portrait extrême droite — force le départ à la rangée 1 */
	.pf-galerie-item.pf-start-5.pf-row-2 {
		grid-row: 1 / span 2;
	}
		.pf-galerie-item.pf-start-1.pf-row-2 { grid-row: 1 / span 2; }
	.pf-galerie-item.pf-start-5.pf-row-2 { grid-row: 1 / span 2; }

    /* -----------------------------------------------
       PHOTO
       ----------------------------------------------- */

    .pf-galerie-photo {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }

    .pf-galerie-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .pf-galerie-item:hover .pf-galerie-photo img {
        transform: scale(1.04);
    }

    /* Placeholder — si image manquante */
    .pf-galerie-placeholder {
        width: 100%;
        height: 100%;
        background: #2A4A55;
        min-height: 220px;
    }

    /* -----------------------------------------------
       VIDÉO
       ----------------------------------------------- */

    .pf-galerie-video {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        text-decoration: none;
    }

    .pf-galerie-video img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease;
    }

    .pf-galerie-video:hover img {
        transform: scale(1.04);
    }

    /* Icône play */
    .pf-galerie-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        transition: transform 0.25s ease;
        pointer-events: none;
    }

    .pf-galerie-video:hover .pf-galerie-play {
        transform: translate(-50%, -50%) scale(1.1);
    }

    .pf-galerie-play svg {
        width: 100%;
        height: 100%;
    }
	/* -----------------------------------------------
	   FAÇADE VIDÉO
	   ----------------------------------------------- */

	.pf-video-facade {
		position: relative;
		width: 100%;
		height: 100%;
		cursor: pointer;
		display: block;
	}

	.pf-video-facade img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.4s ease;
	}

	.pf-video-facade:hover img {
		transform: scale(1.04);
	}

	/* Iframe après clic */
	.pf-video-facade iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
	}

	/* Masquer le bouton play une fois la vidéo lancée */
	.pf-video-facade.is-playing .pf-galerie-play {
		display: none;
	}
    /* -----------------------------------------------
       ACCESSIBILITÉ
       ----------------------------------------------- */

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
    	/* Message de consentement vidéo (YouTube non accepté) */
	.pf-video-consent {
		position: absolute;
		inset: 0;
		z-index: 2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 16px;
		padding: 24px;
		text-align: center;
		background: rgba(29, 43, 51, 0.92);
		color: var(--wp--preset--color--custom-pf-beige);
		font-size: var(--wp--preset--font-size--small);
		cursor: default;
	}
	.pf-video-consent p { margin: 0; max-width: 36ch; }
	.pf-video-consent a { color: inherit; text-decoration: underline; }
	.pf-video-consent__btn {
		background: var(--wp--preset--color--custom-pf-beige);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		border: 1px solid var(--wp--preset--color--custom-pf-beige);
		border-radius: 0;
		padding: 10px 20px;
		font-weight: 500;
		cursor: pointer;
	}
	.pf-video-consent__btn:hover,
	.pf-video-consent__btn:focus-visible {
		background: transparent;
		color: var(--wp--preset--color--custom-pf-beige);
	}
	.pf-video-consent__btn:focus-visible,
	.pf-video-consent a:focus-visible {
		outline: 2px solid var(--wp--preset--color--custom-pf-beige);
		outline-offset: 3px;
	}
    /* -----------------------------------------------
       RESPONSIVE
       ----------------------------------------------- */

	/* Responsive mobile */
	@media (max-width: 763px) {
		.pf-galerie-grid {
        grid-template-columns: 1fr;
    }

    /* Neutralise TOUTES les combinaisons start+col, quelle que soit leur spécificité */
    .pf-galerie-item[class*="pf-start-"] {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }

    .pf-galerie-item.pf-col-1,
    .pf-galerie-item.pf-col-2,
    .pf-galerie-item.pf-col-3,
    .pf-galerie-item.pf-col-4,
    .pf-galerie-item.pf-col-5 {
        grid-column: span 1;
    }

    .pf-galerie-item.pf-row-1,
    .pf-galerie-item.pf-row-2 {
        grid-row: span 1;
    }

    .pf-galerie-item {
        min-height: auto;
    }
	} /* fin @media mobile */
	/* Responsive tablette */
	@media (min-width: 764px) and (max-width: 1199px) {
		.pf-galerie-grid {
			grid-template-columns: repeat(3, 1fr);
		}
		.pf-galerie-item.pf-col-2 { grid-column: span 2; }
		.pf-galerie-item.pf-col-3 { grid-column: span 3; }
	}