/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Thème enfant de Hello Elementor pour Les Pizzas de Lulu. Les styles et fonctions sur mesure vont ici.
Author: Kofibus
Author URI: https://kofibus.com/
Template: hello-elementor
Version: 1.2.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hello-elementor-child
*/

/* ==========================================================================
   Compléments au kit Elementor (couleurs, polices et boutons sont réglés
   dans Elementor > Réglages du site). Ici : uniquement ce qu'Elementor
   gratuit ne sait pas faire, piloté par des classes CSS posées dans
   l'éditeur (onglet Avancé > Classes CSS).
   ========================================================================== */

/* Pas de débordement horizontal malgré les éléments décoratifs inclinés. Le bandeau et les ingrédients
   dépassent volontairement de l'écran : on les coupe au niveau du contenu de la page, sans que cela
   remonte jusqu'à la fenêtre (le glissement latéral reste impossible sur mobile). */
body,
.elementor[data-elementor-type="wp-page"] {
	overflow-x: clip;
}

/* Les titres Elementor rendus en <p> gardaient la marge basse des paragraphes du thème (14 px) :
   le texte remontait dans les pastilles, la pastille du midi et le bandeau. */
.elementor-widget-heading p.elementor-heading-title {
	margin-block-end: 0;
}

/* Pas de scroll-behavior: smooth ici : il entre en conflit avec le défilement
   animé du menu Header & Footer Builder. Le défilement doux passe par lulu.js. */

/* Les ancres tiennent compte de l'en-tête collant. */
.elementor [id] {
	scroll-margin-top: 88px;
}

/* Logo typographique : « Les Pizzas » + « de Lulu » manuscrit. */
.lulu-wordmark .elementor-heading-title {
	white-space: nowrap;
}

.lulu-script {
	font-family: "Caveat", cursive;
	font-weight: 700;
	font-size: 1.2em;
	text-transform: none;
	letter-spacing: 0;
	color: #C94A1A;
	margin-left: 0.08em;
}

.lulu-footer .lulu-script,
.lulu-on-dark .lulu-script {
	color: #EE7A3B;
}

/* En-tête collant (Header & Footer Builder le place en relative par défaut). */
.ehf-header #masthead {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar.ehf-header #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar.ehf-header #masthead {
		top: 46px;
	}
}

.lulu-header {
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
}

/* En-tête : le logo et le bouton d'appel ne se compriment jamais. */
.lulu-header .lulu-wordmark,
.lulu-header .lulu-header-call,
.elementor-widget.lulu-nowrap {
	flex-shrink: 0;
}

/* Numéros de téléphone toujours sur une ligne, comme les noms composés (Saint-Pierre-de-Varengeville). */
.lulu-header-call .elementor-button,
.lulu-nowrap .elementor-button,
.lulu-insecable {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.lulu-header-call .elementor-button-text {
		display: none;
	}
}

/* Bouton d'appel flottant (mobile uniquement, masqué ailleurs par Elementor). */
.elementor-widget.lulu-call-fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99;
	width: auto;
	margin: 0;
}

.lulu-call-fab .elementor-button {
	box-shadow: 0 12px 30px rgba(20, 42, 29, 0.35);
}

/* Pastilles du hero. */
.lulu-badges .elementor-icon-list-items.elementor-inline-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.lulu-badges .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid rgba(247, 240, 227, 0.24);
	border-radius: 999px;
	background: rgba(247, 240, 227, 0.08);
}

.lulu-badges .elementor-icon-list-item::after {
	display: none;
}

/* Prix : la mention « la plaque », « la pinsa » en petit. */
.lulu-price small {
	font-family: "DM Sans", sans-serif;
	font-size: 0.4em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
	opacity: 0.85;
	margin-left: 0.2em;
}

/* ==========================================================================
   Cartes de la carte
   ========================================================================== */

.lulu-card {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.lulu-pizza:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px rgba(31, 61, 43, 0.16);
}

.lulu-pizza .elementor-widget-image img {
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lulu-pizza:hover .elementor-widget-image img {
	transform: scale(1.07) rotate(-2.5deg);
}

@media (max-width: 767px) {
	.lulu-pizza > .elementor-widget-image {
		align-self: center;
	}
}

/* Fiche avec photo : la photo occupe le haut de la fiche (la gauche sur mobile), recadrée en 4:3. */
.lulu-card-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.lulu-pizza:hover .lulu-card-photo img {
	transform: scale(1.05);
}

@media (max-width: 767px) {
	.lulu-pizza > .lulu-card-photo {
		align-self: stretch;
	}

	.lulu-card-photo .elementor-widget-container,
	.lulu-card-photo img {
		height: 100%;
	}

	.lulu-card-photo img {
		aspect-ratio: auto;
		min-height: 120px;
	}
}

/* Fiche encore sans photo : le tampon de Lulu sur fond vert, au format de la photo, avec la même lumière douce
   venue d'en haut à gauche que sur les photos. Il tourne un peu au survol, comme les photos. */
.lulu-nophoto {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: radial-gradient(120% 95% at 22% 12%, #2F5E43 0%, #1F3D2B 58%, #17301F 100%);
}

.lulu-nophoto svg {
	width: 46%;
	height: auto;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lulu-pizza:hover .lulu-nophoto svg {
	transform: rotate(-14deg) scale(1.05);
}

@media (max-width: 767px) {
	.lulu-nophoto {
		height: 100%;
		aspect-ratio: auto;
		min-height: 120px;
	}

	.lulu-nophoto svg {
		width: 62%;
	}
}

/* Case « Une envie ? » : elle s'étire sur les colonnes que la dernière rangée laisse libres (build-carte.php
   calcule l'étendue). Étirée, elle devient un bandeau, avec la photo du kiosque qui se fond dans le vert. */
@media (min-width: 1025px) {
	.lulu-span-d-2 { grid-column: span 2; }
	.lulu-span-d-3 { grid-column: span 3; }
	.lulu-span-d-4 { grid-column: span 4; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.lulu-span-t-2 { grid-column: span 2; }
}

/* La photo suit la hauteur du texte (ou de la rangée) sans l'imposer. */
.lulu-cta > .lulu-cta__photo {
	position: relative;
	align-self: stretch;
	min-height: 220px;
}

.lulu-cta__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 55%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
	mask-image: linear-gradient(90deg, transparent 0, #000 45%);
}

/* Encart des recettes spéciales (Trio Surprise) : photo sur toute la hauteur à gauche, au-dessus sur mobile. */
.lulu-special > .lulu-special-photo,
.lulu-special-photo .elementor-widget-container {
	align-self: stretch;
	height: auto;
}

.lulu-special-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.lulu-special-photo img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* Photos du défilé et du concept : coins arrondis et ombre portée. */
.lulu-marquee-item--photo img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 36px rgba(31, 61, 43, 0.18);
}

.lulu-photo-frame img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 26px 50px rgba(0, 0, 0, 0.35);
}

.lulu-rot-4 { --lulu-rot: 4deg; }

/* Le corps de la carte prend la hauteur restante : les prix s'alignent en bas. */
.lulu-pizza > .lulu-card-body {
	flex-grow: 1;
}

.lulu-card-prices {
	margin-top: auto;
}

/* Prix pinsa / teglia en pastilles : libellé et montant centrés l'un sur l'autre (et non alignés sur
   leur ligne de base, qui faisait descendre le libellé). */
.lulu-chip .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.lulu-chip .elementor-heading-title b {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-size: 1.45em;
	line-height: 1;
	letter-spacing: 0.02em;
}

/* Pastille inclinée posée sur une photo. Sa petite ligne passe en bloc compact sous le texte principal
   (sinon elle hérite de l'interligne de la grande police et la pastille s'allonge en ovale). */
.lulu-sticker {
	transform: rotate(-8deg);
}

.lulu-sticker.lulu-price small {
	display: block;
	margin: 0.35em 0 0;
	line-height: 1.2;
}

/* Encart de la formule du midi : pastille ronde, « dès », le prix, puis « la part ». */
.lulu-midi-price {
	flex-shrink: 0;
}

.lulu-midi-photo img {
	display: block;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	transform: rotate(-2deg);
}

.lulu-midi-price .elementor-heading-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 156px;
	height: 156px;
	padding-bottom: 5px; /* centrage optique : les capitales d'Anton descendent sinon de 2 px */
}

.lulu-midi-price.lulu-price small {
	margin: 0.4em 0 0;
	font-size: 0.24em;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lulu-midi-price.lulu-price small:first-child {
	margin: 0 0 0.4em;
}

/* Compteur « dès 5 € » : « dès » en petites capitales, posé sur la ligne de base du prix. Son interligne
   repasse à 1 : hérité en px (64 px), il agrandissait la ligne et faisait descendre la légende. */
.lulu-counter-des .elementor-counter-number-wrapper {
	align-items: baseline;
}

.lulu-counter-des .elementor-counter-number-prefix {
	line-height: 1;
	font-family: "DM Sans", sans-serif;
	font-size: 0.28em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-right: 0.2em;
}

@media (max-width: 767px) {
	.lulu-midi-price .elementor-heading-title {
		width: 128px;
		height: 128px;
	}
}

/* ==========================================================================
   Comment ça marche (#etapes) : trois scènes 3D qui s'enchaînent au défilement.
   Par défaut (mobile, éditeur, sans JS) : scènes et étapes alternées en colonne.
   Sur ordinateur, lulu.js ajoute .is-ready : la section devient haute, son contenu
   reste fixe et les scènes se succèdent selon la progression (--lulu-steps-p).
   ========================================================================== */

.lulu-step__num {
	flex-shrink: 0;
}

.lulu-step__num .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #1F3D2B;
	transition: background-color 0.4s ease, transform 0.4s ease;
}

.lulu-steps__scene img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	/* Les colonnes s'effacent : scène 1, étape 1, scène 2, étape 2… */
	.lulu-steps__text,
	.lulu-steps__list,
	.lulu-steps__stage {
		display: contents;
	}

	.lulu-steps__scene:nth-child(1) { order: 1; }
	.lulu-step:nth-child(1) { order: 2; }
	.lulu-steps__scene:nth-child(2) { order: 3; }
	.lulu-step:nth-child(2) { order: 4; }
	.lulu-steps__scene:nth-child(3) { order: 5; }
	.lulu-step:nth-child(3) { order: 6; }
	.lulu-steps__cta { order: 7; }

	.lulu-steps__scene {
		width: 86%;
		align-self: center;
	}

	.lulu-step {
		margin-bottom: 30px;
	}

	.lulu-steps.is-ready .lulu-steps__scene,
	.lulu-steps.is-ready .lulu-step {
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	.lulu-steps.is-ready .lulu-steps__scene:not(.is-visible),
	.lulu-steps.is-ready .lulu-step:not(.is-visible) {
		opacity: 0;
		transform: translateY(28px);
	}
}

@media (min-width: 768px) {
	.lulu-steps.e-con {
		min-height: 300vh; /* longueur de défilement pendant laquelle la section reste fixe */
		justify-content: flex-start;
	}

	.lulu-steps__pin.e-con {
		position: sticky;
		top: 70px;
		height: calc(100vh - 70px);
		width: 100%;
		max-width: 1232px;
		margin: 0 auto;
	}

	.lulu-steps__stage.e-con {
		--width: min(58%, calc(100vh - 150px));
		position: relative;
		aspect-ratio: 1 / 1;
	}

	.lulu-steps__scene {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
		transform: translateY(46px) scale(0.92);
		transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	/* Sans JS ou avant son démarrage : la première scène est visible. */
	.lulu-steps:not(.is-ready) .lulu-steps__scene:first-child,
	.lulu-steps__scene.is-active {
		opacity: 1;
		transform: translateY(var(--lulu-drift, 0px)) scale(1);
	}

	.lulu-steps__scene.is-past {
		transform: translateY(-46px) scale(1.04);
	}

	/* Seul le texte s'atténue : les pastilles restent opaques (couleurs pleines) pour masquer le fil qui passe derrière. */
	.lulu-step__body {
		opacity: 0.4;
		transition: opacity 0.45s ease;
	}

	.lulu-steps:not(.is-ready) .lulu-step:first-child .lulu-step__body,
	.lulu-step.is-active .lulu-step__body {
		opacity: 1;
	}

	.lulu-step.is-done:not(.is-active) .lulu-step__body {
		opacity: 0.65;
	}

	.lulu-step__num .elementor-heading-title {
		background: #A7B5A9; /* à venir */
	}

	.lulu-step.is-done .lulu-step__num .elementor-heading-title {
		background: #1F3D2B; /* déjà vue */
	}

	.lulu-steps:not(.is-ready) .lulu-step:first-child .lulu-step__num .elementor-heading-title,
	.lulu-step.is-active .lulu-step__num .elementor-heading-title {
		background: #C94A1A; /* en cours */
		transform: scale(1.12);
	}

	/* Fil de progression entre les numéros. */
	.lulu-steps__list.e-con {
		position: relative;
	}

	/* Elementor réutilise ::before des conteneurs pour ses fonds (hauteur 100 %, bordures…) : on neutralise ces réglages. */
	.lulu-steps__list.e-con::before,
	.lulu-steps__list.e-con::after {
		content: "";
		position: absolute;
		left: 21px;
		top: 22px;
		bottom: var(--lulu-line-bottom, 22px); /* lulu.js : s'arrête au centre de la dernière pastille */
		width: 2px;
		height: auto;
		border: 0;
		border-radius: 0;
		opacity: 1;
		mix-blend-mode: normal;
		background: rgba(31, 61, 43, 0.14);
	}

	.lulu-steps__list.e-con::after {
		background: #C94A1A;
		transform: scaleY(var(--lulu-steps-p, 0));
		transform-origin: top;
	}

	.lulu-step,
	.lulu-step__num {
		position: relative;
		z-index: 1;
	}
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	.lulu-steps__scene,
	.lulu-step__body,
	.lulu-step__num .elementor-heading-title {
		transition: none;
	}
}

/* Plan d'accès OpenStreetMap. */
.lulu-map {
	overflow: hidden;
}

.lulu-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
}

/* ==========================================================================
   Mouvements : parallaxe, flottement, rotation, défilement infini.
   Classes à poser dans l'éditeur ; lulu.js calcule la parallaxe.
   ========================================================================== */

.lulu-parallax {
	transform: translate3d(0, var(--lulu-py, 0px), 0) rotate(var(--lulu-pr, 0deg));
	will-change: transform;
}

/* Les ingrédients gardent leur inclinaison de départ (lulu-rot-*) et tournent au défilement (lulu.js). */
.lulu-deco.lulu-parallax {
	transform: translate3d(0, var(--lulu-py, 0px), 0) rotate(calc(var(--lulu-rot, 0deg) + var(--lulu-pr, 0deg)));
}

.lulu-rot-n8 { --lulu-rot: -8deg; }
.lulu-rot-n4 { --lulu-rot: -4deg; }
.lulu-rot-12 { --lulu-rot: 12deg; }
.lulu-rot-30 { --lulu-rot: 30deg; }
.lulu-rot-n35 { --lulu-rot: -35deg; }

.lulu-float img {
	animation: lulu-float 6s ease-in-out infinite;
}

.lulu-float-slow img {
	animation-duration: 9s;
}

.lulu-delay-1 img { animation-delay: -1.5s; }
.lulu-delay-2 img { animation-delay: -3s; }
.lulu-delay-3 img { animation-delay: -4.5s; }

@keyframes lulu-float {
	0%,
	100% {
		transform: translateY(0) rotate(var(--lulu-rot, 0deg));
	}

	50% {
		transform: translateY(-14px) rotate(calc(var(--lulu-rot, 0deg) + 5deg));
	}
}

.lulu-spin svg {
	display: block;
	width: 100%;
	height: auto;
	animation: lulu-spin 24s linear infinite;
}

/* Accueil : le kiosque en encart photo sur le diaporama, cadre crème légèrement incliné, qui se redresse au survol. */
.lulu-hero-kiosque.e-con {
	--lulu-kiosque-rot: 2.5deg;
	transform: rotate(var(--lulu-kiosque-rot));
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
	overflow: visible;
}

.lulu-hero-kiosque.e-con:hover {
	--lulu-kiosque-rot: 0deg;
}

.lulu-hero-kiosque__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
}

@media (max-width: 767px) {
	.lulu-hero-kiosque.e-con {
		--lulu-kiosque-rot: 1.5deg;
		margin-top: 12px;
	}
}

@keyframes lulu-spin {
	to {
		transform: rotate(360deg);
	}
}

.lulu-deco {
	pointer-events: none;
}

.lulu-deco img {
	filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
}

/* Ingrédients en suspension : trois plans de profondeur rendus par la taille, l'ombre et la vitesse
   de parallaxe (pas de flou : il passait pour une image en basse définition). */
.lulu-depth-near img {
	filter: drop-shadow(0 34px 34px rgba(0, 0, 0, 0.26));
}

.lulu-depth-far img {
	filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.2));
}

.lulu-shadow img {
	filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
}

/* Hero photo sur tablette et mobile : le texte occupe toute la largeur, le voile devient vertical et plus dense en haut. */
@media (max-width: 1024px) {
	.lulu-hero.e-con::before,
	.lulu-hero > .elementor-background-slideshow::before {
		background-image: linear-gradient(180deg, rgba(16, 34, 23, 0.9) 0%, rgba(16, 34, 23, 0.82) 58%, rgba(16, 34, 23, 0.4) 100%) !important;
	}
}

/* Filigrane géant derrière le hero. */
.lulu-watermark {
	pointer-events: none;
	user-select: none;
}

.lulu-watermark .elementor-heading-title {
	white-space: nowrap;
	line-height: 0.8;
}

/* Défilement infini : lulu.js range les enfants du conteneur dans une piste dupliquée. */
.lulu-marquee {
	overflow: hidden;
}

.lulu-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	column-gap: var(--column-gap, 32px);
	padding-right: var(--column-gap, 32px);
	animation: lulu-marquee var(--lulu-marquee-duration, 40s) linear infinite;
}

.lulu-marquee__track > * {
	flex: 0 0 auto;
}

.lulu-marquee-slow { --lulu-marquee-duration: 80s; }
.lulu-marquee-fast { --lulu-marquee-duration: 28s; }

.lulu-marquee-reverse .lulu-marquee__track {
	animation-direction: reverse;
}

.lulu-marquee:hover .lulu-marquee__track {
	animation-play-state: paused;
}

@keyframes lulu-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* Bandeau incliné aux couleurs de Lulu. Il déborde de 60 px de chaque côté (largeur et marges réglées
   dans Elementor) pour que l'inclinaison ne découvre jamais les bords ; Elementor plafonne sinon
   la largeur des conteneurs à 100 %. */
.lulu-band {
	transform: rotate(-2deg);
	z-index: 3;
}

.lulu-band.e-con {
	max-width: none;
}

.lulu-band-text .elementor-heading-title {
	white-space: nowrap;
}

.lulu-marquee-item .elementor-widget-image img {
	transition: transform 0.5s ease;
}

.lulu-marquee-item:hover .elementor-widget-image img {
	transform: scale(1.06) rotate(2deg);
}

@media (prefers-reduced-motion: reduce) {
	.lulu-card,
	.lulu-pizza .elementor-widget-image img,
	.lulu-nophoto svg {
		transition: none;
	}

	.lulu-float img,
	.lulu-spin svg,
	.lulu-marquee__track {
		animation: none;
	}

	.lulu-parallax {
		transform: none;
	}
}