/* ==========================================================================
   Le lecteur de la vidéo de la boutique (13/11/2026, GG_Marque_Fiche_Confiance::lecteur) : la vidéo du site dans
   son cadre, un gros bouton de lecture au milieu de l'image et, quand on défile pendant la lecture, un petit
   lecteur collé en bas de l'écran. Le bouton et le petit lecteur sont ajoutés par lecteur.js ; sans lui, il
   reste le lecteur du navigateur. Les couleurs sont redéfinies ici : le lecteur sert aussi hors de « Qui
   sommes-nous ».
   ========================================================================== */
.gg-lecteur {
	--gg-vert-f: #3d5a36;
	--gg-or-f: #a8741f;
	--gg-encre: #1d2b21;
	--gg-gris: #5a5646;
	margin: 0;
	font-family: "Montserrat", sans-serif;
	color: var(--gg-gris);
}

/* La place garde sa hauteur quand le cadre s'en détache pour flotter. Le reel est vertical (9 / 16) : le
   cadre en 4 / 5 le recadre en hauteur pour que la colonne tienne à côté du texte ; `--vertical` le garde entier. */
.gg-lecteur__place {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	background: var(--gg-encre);
}

.gg-lecteur--vertical .gg-lecteur__place {
	aspect-ratio: 9 / 16;
}

.gg-lecteur__cadre {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--gg-encre);
}

.gg-lecteur video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sans commandes, un appui sur la vidéo la met en pause (lecteur.js). */
.gg-lecteur video {
	cursor: pointer;
}

/* En plein écran, la vidéo reste entière (deux règles : un sélecteur inconnu du navigateur invalide toute la liste). */
.gg-lecteur video:fullscreen {
	object-fit: contain;
}

.gg-lecteur video:-webkit-full-screen {
	object-fit: contain;
}

.gg-lecteur figcaption {
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
}

.gg-lecteur figcaption a {
	font-weight: 600;
	color: var(--gg-vert-f);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.gg-lecteur figcaption a:hover {
	color: var(--gg-encre);
}

/* --- Le bouton de lecture, au milieu de l'image ---------------------------------
   Il couvre toute l'image (lecteur.js retire les commandes du navigateur, qui faisaient doublon) : un appui
   n'importe où sur l'image lance la vidéo. Il disparaît pendant la lecture (`est-lu`, posé sur la figure) ; un
   appui sur la vidéo la met alors en pause et le bouton revient.
   Les deux boutons passent par `body .gg-lecteur button.…` : les réglages de boutons du kit Elementor
   (`.elementor-kit-488 button`, et leurs `:hover` / `:focus`) ajoutent bordure rose, fond et marges, et l'emportent
   sur une seule classe. */
body .gg-lecteur button.gg-lecteur__lire {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(20, 30, 22, 0.14);
	font: inherit;
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease;
}

body .gg-lecteur button.gg-lecteur__lire:hover {
	background: rgba(20, 30, 22, 0.24);
}

body .gg-lecteur button.gg-lecteur__lire:focus-visible {
	outline: 3px solid var(--gg-or-f);
	outline-offset: -3px;
}

body .gg-lecteur.est-lu button.gg-lecteur__lire {
	display: none;
}

.gg-lecteur__rond {
	display: grid;
	place-items: center;
	width: 5.6rem;
	height: 5.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--gg-vert-f);
	box-shadow: 0 10px 30px rgba(10, 20, 12, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.55);
	animation: gg-lecteur-pouls 2.4s ease-out infinite;
	transition: transform 0.18s ease;
}

.gg-lecteur__rond svg {
	width: 2.4rem;
	height: 2.4rem;
	margin-left: 0.2rem; /* le triangle pèse à gauche : on le recentre à l'œil. */
	fill: currentColor;
}

.gg-lecteur__lire:hover .gg-lecteur__rond,
.gg-lecteur__lire:focus-visible .gg-lecteur__rond {
	transform: scale(1.07);
}

.gg-lecteur__etiquette {
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	background: rgba(20, 30, 22, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	color: #fff;
}

@keyframes gg-lecteur-pouls {
	0% {
		box-shadow: 0 10px 30px rgba(10, 20, 12, 0.4), 0 0 0 0 rgba(255, 255, 255, 0.55);
	}

	70%,
	100% {
		box-shadow: 0 10px 30px rgba(10, 20, 12, 0.4), 0 0 0 1.2rem rgba(255, 255, 255, 0);
	}
}

/* --- Le petit lecteur collé en bas de l'écran ------------------------------------
   Posé par lecteur.js (`est-flottant` sur le cadre) quand on défile pendant la lecture. En bas à gauche : la bulle
   WhatsApp et la note Google sont à droite. */
body .gg-lecteur button.gg-lecteur__fermer {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	z-index: 2;
	display: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 30, 22, 0.74);
	color: #fff;
	cursor: pointer;
}

.gg-lecteur__fermer svg {
	width: 1rem;
	height: 1rem;
}

body .gg-lecteur button.gg-lecteur__fermer:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.gg-lecteur__cadre.est-flottant {
	position: fixed;
	inset: auto auto 1rem 1rem;
	z-index: 96; /* au-dessus de la note Google (95) et de la barre d'achat mobile (90), sous la bulle WhatsApp et les cookies. */
	width: 11rem;
	height: auto;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	box-shadow: 0 12px 36px rgba(20, 30, 22, 0.45);
	animation: gg-lecteur-entree 0.22s ease-out;
}

body .gg-lecteur__cadre.est-flottant button.gg-lecteur__fermer {
	display: grid;
}

body .gg-lecteur__cadre.est-flottant button.gg-lecteur__lire {
	gap: 0;
}

.gg-lecteur__cadre.est-flottant .gg-lecteur__rond {
	width: 3.2rem;
	height: 3.2rem;
	animation: none;
}

.gg-lecteur__cadre.est-flottant .gg-lecteur__rond svg {
	width: 1.4rem;
	height: 1.4rem;
}

.gg-lecteur__cadre.est-flottant .gg-lecteur__etiquette {
	display: none;
}

@keyframes gg-lecteur-entree {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gg-lecteur__rond,
	.gg-lecteur__cadre.est-flottant {
		animation: none;
	}
}

/* Sous 900 px : plus petit, et au-dessus de la barre d'achat fixe quand la fiche en a une (classe posée sur <body>
   par GG_Marque_Fiche_Gant::classe_du_corps ; la barre fait 72 px, fiche.css). */
@media (max-width: 899px) {
	.gg-lecteur__cadre.est-flottant {
		left: 0.75rem;
		bottom: 0.75rem;
		width: 7.6rem;
	}

	body.gg-avec-achat-fixe .gg-lecteur__cadre.est-flottant {
		bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 0.75rem);
	}

	.gg-lecteur__rond {
		width: 4.6rem;
		height: 4.6rem;
	}
}