/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* =====================================================================
   Label Ouverture
   ---------------------------------------------------------------------
   Plus de couche d'alias : les composants tapent directement dans les
   variables GeneratePress.
       --contrast                 texte et titres
       --base-2                   fond des états actifs
       --base-3                   surfaces blanches
       --primary-color-variant    l'or
   Seule la pile de polices des titres n'a pas d'équivalent.
   ===================================================================== */

:root {
	--lo-titre: "Cormorant Garamond", "Cormorant", Georgia, serif;
}

/* =====================================================================
   Sidebar des pages produits
   ===================================================================== */

.lo-sidebar {
	padding: 34px 28px 32px;
	background: var(--base-3);
	text-align: center;
	/* la colonne suit le défilement ; à retirer si un conteneur parent
	   utilise overflow: hidden, ce qui neutralise le sticky */
	/*position: sticky;
	top: 110px;*/
}

/* Icône de la page mère (champ ACF icon-product) */
.lo-sidebar .lo-sidebar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin-bottom: 0;
	border-radius: 50%;
}

.lo-sidebar .lo-sidebar__icon img {
	display: block;
	object-fit: contain;
}

/* Titre de la branche */
.lo-sidebar .lo-sidebar__title {
	margin: 0 0 24px;
	font-family: var(--lo-titre);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--contrast);
}

/* Liste des pages filles.
   L'espacement est posé sur la liste et sur les conteneurs intermédiaires du
   Looper, pour que l'écart de 10 px tombe bien entre les liens, quelle que
   soit la profondeur des blocs. */
.lo-sidebar .lo-sidebar__list,
.lo-sidebar .lo-sidebar__list > *,
.lo-sidebar .lo-sidebar-query,
.lo-sidebar .lo-sidebar-query > * {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lo-sidebar .lo-sidebar__item {
	margin: 0;
}

/* Le lien, qu'il vienne du shortcode ou du bloc Texte du Looper */
.lo-sidebar .lo-sidebar__list a,
.lo-sidebar .lo-sidebar__link {
	display: block;
	padding: 14px 18px;
	background: var(--base-3);
	color: var(--contrast);
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Balise a + lien dynamique : GenerateBlocks produit un lien vide en plus.
   On le masque, il ne sert à rien et il fausse l'espacement. */
.lo-sidebar .lo-sidebar__list a:not([href]),
.lo-sidebar .lo-sidebar__list a:empty {
	display: none;
}

.lo-sidebar .lo-sidebar__list a:hover,
.lo-sidebar .lo-sidebar__list a:focus-visible,
.lo-sidebar .lo-sidebar__link:hover,
.lo-sidebar .lo-sidebar__link:focus-visible {
	background: var(--base-2);
	color: var(--contrast);
}

/* Page affichée */
.lo-sidebar .lo-sidebar__list a.is-current,
.lo-sidebar .lo-sidebar__link.is-current {
	background: var(--base-2);
	box-shadow: inset 3px 0 0 var(--primary-color-variant);
	font-weight: 600;
	color: var(--contrast);
	cursor: default;
}

@media (max-width: 900px) {
	.lo-sidebar {
		position: static;
		padding: 28px 22px 26px;
	}

	.lo-sidebar .lo-sidebar__icon {
		width: 72px;
		height: 72px;
		margin-bottom: 14px;
	}

	.lo-sidebar .lo-sidebar__title {
		margin-bottom: 20px;
		font-size: 24px;
	}
}

/* =====================================================================
   Galeries en carousel
   ===================================================================== */

.lo-slider {
	/* hauteur maximale des grandes images ; « none » pour les libérer */
	--lo-slider-hauteur: 520px;

	margin: 0 0 2em;
}

/* ---------- Grande image ---------- */

.lo-slider .lo-slider__stage {
	position: relative;
}

.lo-slider .lo-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	background: var(--base-2);
	/* la barre de défilement est masquée, la navigation se fait aux flèches
	   et aux vignettes ; le swipe et les flèches du clavier restent actifs */
	scrollbar-width: none;
}

.lo-slider .lo-slider__track::-webkit-scrollbar {
	display: none;
}

.lo-slider .lo-slider__track:focus-visible {
	outline: 2px solid var(--primary-color-variant);
	outline-offset: 2px;
}

.lo-slider .lo-slider__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	padding: 0;
}

.lo-slider .lo-slider__img {
	max-width: 100%;
	width: auto;
	height: auto;
	/* plafond de hauteur, sinon une photo en portrait fait un bandeau immense */
	max-height: var(--lo-slider-hauteur);
	object-fit: contain;
}

/* ---------- Flèches ---------- */

.lo-slider .lo-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: var(--base-3);
	color: var(--contrast);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.lo-slider .lo-slider__nav--prev {
	left: 16px;
}

.lo-slider .lo-slider__nav--next {
	right: 16px;
}

/* GP pose « border: 1px solid transparent » sur tous les boutons :
   le liseré de survol fonctionne donc sans déclarer de bordure ici. */
.lo-slider .lo-slider__nav:hover,
.lo-slider .lo-slider__nav:focus-visible {
	border-color: var(--primary-color-variant);
	background: var(--primary-color-variant);
	color: #fff;
}

.lo-slider .lo-slider__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	background: var(--base-3);
	color: var(--contrast);
	border-color: transparent;
}

/* ---------- Vignettes ---------- */

.lo-slider .lo-slider__thumbs {
	/* grille : les vignettes remplissent toute la largeur et s'alignent en
	   colonnes, sans espace perdu à droite. 70 px est la largeur minimale,
	   elles s'étirent pour occuper la ligne. */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 5px;
	margin-top: 10px;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.lo-slider .lo-slider__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	background: var(--base-3);
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.lo-slider .lo-slider__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lo-slider .lo-slider__thumb:hover,
.lo-slider .lo-slider__thumb:focus-visible {
	opacity: 1;
	border-color: var(--primary-color-variant);
}

.lo-slider .lo-slider__thumb.is-current {
	opacity: 1;
	border-color: var(--primary-color-variant);
	box-shadow: inset 0 0 0 2px var(--primary-color-variant);
}

@media (max-width: 900px) {
	.lo-slider {
		--lo-slider-hauteur: 320px;
	}

	/* sur mobile les vignettes défilent sur une ligne,
	   sinon la grille mange tout l'écran */
	.lo-slider .lo-slider__thumbs {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 62px;
		overflow-x: auto;
	}

	.lo-slider .lo-slider__nav {
		width: 40px;
		height: 40px;
	}

	.lo-slider .lo-slider__nav--prev {
		left: 8px;
	}

	.lo-slider .lo-slider__nav--next {
		right: 8px;
	}

	.lo-slider .lo-slider__thumb {
		width: 62px;
	}
}

/* =====================================================================
   Popup K•LINE
   Deux rendus pour le même balisage : modale centrée sur grand écran,
   bandeau bas sous 768 px. Le script ajoute la classe qui va bien.
   ===================================================================== */

.lo-popup {
	/* largeur de la modale sur grand écran */
	--lo-popup-largeur: 620px;
	/* plafond de hauteur de l'image en bandeau ; « none » = ratio d'origine */
	--lo-popup-bandeau-hauteur: none;

	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
}

.lo-popup::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.lo-popup__inner {
	position: relative;
	background: var(--base-3);
	/* l'image est le seul contenu : on supprime l'espace des lignes */
	line-height: 0;
}

.lo-popup__lien {
	display: block;
}

.lo-popup__img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Bouton de fermeture ---------- */

.lo-popup__fermer {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 0;
	background: var(--base-3);
	color: var(--contrast);
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lo-popup__fermer:hover,
.lo-popup__fermer:focus-visible {
	background: var(--primary-color-variant);
	border-color: var(--primary-color-variant);
	color: #fff;
}

/* ---------- Modale, au-dessus de 768 px ---------- */

.lo-popup--modale {
	width: calc(100% - 32px);
	max-width: var(--lo-popup-largeur);
	margin: auto;
}

/* ---------- Bandeau bas, sous 768 px ---------- */

.lo-popup--bandeau {
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	/* au-dessus de l'en-tête collant de GeneratePress, sous la modale devis */
	z-index: 999;
}

.lo-popup--bandeau .lo-popup__inner {
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}

.lo-popup--bandeau .lo-popup__img {
	max-height: var(--lo-popup-bandeau-hauteur);
	object-fit: contain;
}

.lo-popup--bandeau .lo-popup__fermer {
	width: 36px;
	height: 36px;
	top: 6px;
	right: 6px;
}

/* ---------- Défilement bloqué derrière la modale ---------- */

html.lo-popup-ouverte,
html.lo-popup-ouverte body {
	overflow: hidden;
}

/* ---------- Apparition ---------- */

@media (prefers-reduced-motion: no-preference) {
	.lo-popup--modale[open] {
		animation: lo-popup-apparition 0.28s ease-out;
	}

	.lo-popup--bandeau[open] {
		animation: lo-popup-montee 0.32s ease-out;
	}

	@keyframes lo-popup-apparition {
		from {
			opacity: 0;
			transform: translateY(12px);
		}
	}

	@keyframes lo-popup-montee {
		from {
			transform: translateY(100%);
		}
	}
}