/* ==========================================================================
   LBQVC — Bandeau urgence "avant hausse des prix d'automne"
   Fichier : wp-content/themes/ohioM-child/css/urgence-banner.css
   Enqueue : functions.php > ohio_child_local_enqueue_parent_styles()

   Ce fichier COMPLETE le bandeau #banner_promo / .lbq-promo déjà existant
   (défini dans le <style> inline de header.php, gradient orange, cookie
   "popup_closed" 24h, texte piloté par l'option WP `text_promo`).

   Il ne redéfinit JAMAIS les règles de base .lbq-promo : ce <style> inline
   est injecté dans <head> APRES wp_head() (donc après ce fichier externe),
   il gagnerait systématiquement la cascade à spécificité égale. Toutes les
   règles ci-dessous utilisent donc soit des classes nouvelles
   (.lbq-promo__badge, .lbq-promo__cta) soit le sélecteur renforcé
   #banner_promo.lbq-promo (ID + classe) pour rester fiables quel que soit
   l'ordre de chargement.

   Comment changer le texte du message plus tard :
     wp option update text_promo "Nouveau texte ici" --url=https://www.leboisquivouschauffe.pro
   (option WP simple, déjà utilisée par le mécanisme historique du thème —
   voir aussi promo_bois_date si le texte réintroduit un jour {promo_date}).
   ========================================================================== */

/* Réserve la place du bouton fermer (✕) pour que rien ne passe dessous */
#banner_promo.lbq-promo {
	padding-right: 52px;
}

/* ---------- Badge feuille d'automne : pulse doux, jamais clignotant ---------- */
.lbq-promo__badge {
	display: inline-block;
	margin-right: 4px;
	animation: lbq-promo-pulse 2.4s ease-in-out infinite;
}

@keyframes lbq-promo-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
	.lbq-promo__badge {
		animation: none;
	}
}

/* ---------- CTA "Commander maintenant" ---------- */
.lbq-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 14px;
	padding: 5px 16px;
	background: #fff;
	color: #e8590c;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: .76rem;
	font-weight: 800;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.lbq-promo__cta:hover,
.lbq-promo__cta:focus {
	background: #fff7ed;
	color: #d14e08;
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
}

/* ---------- Responsive : tablette / mobile (<= 600px) ---------- */
@media (max-width: 600px) {
	#banner_promo.lbq-promo {
		padding: 10px 46px 10px 14px;
		line-height: 1.35;
	}
	#banner_promo.lbq-promo .text_promo {
		font-size: .74rem;
	}
	/* Le CTA passe seul sur sa propre ligne ; badge + texte restent groupés
	   et se réenroulent naturellement (text-align:center hérité de .lbq-promo). */
	#banner_promo.lbq-promo .lbq-promo__cta {
		display: flex;
		width: fit-content;
		margin: 8px auto 0;
		font-size: .72rem;
		padding: 6px 14px;
	}
}

/* ---------- Responsive : petits mobiles (~360px et moins) ---------- */
@media (max-width: 380px) {
	#banner_promo.lbq-promo {
		padding: 9px 40px 9px 12px;
	}
	#banner_promo.lbq-promo .text_promo {
		font-size: .68rem;
	}
	#banner_promo.lbq-promo .lbq-promo__cta {
		font-size: .68rem;
		padding: 5px 12px;
	}
	#banner_promo.lbq-promo .close_promo {
		right: 10px;
	}
	#banner_promo.lbq-promo .close_promo svg {
		width: 15px;
		height: 15px;
	}
}

/* ==========================================================================
   LBQVC — Pop-up urgence automne à l'ouverture du site (ajout du 31/07,
   suite retrait de la carte hero — cf commit "retrait carte hero" du même
   jour : le client la trouvait trop encombrante). La pop-up devient le
   point d'entrée du message, la topbar #banner_promo devient le rappel
   permanent après fermeture.

   Fichiers : header.php (markup pop-up + snippet inline anti-FOUC dans
   <head>) et js/urgence-popup.js (comportement, enqueue dans functions.php
   > my_custom_scripts()).

   Réutilise volontairement @keyframes lbq-promo-pulse (défini plus haut
   dans ce même fichier, section topbar) pour le badge 🍂 — un seul endroit
   à maintenir pour ce pulse.

   Comment modifier le texte plus tard : la pop-up a son propre texte en
   dur dans header.php (variable $lbq_popup_text), volontairement DIFFÉRENT
   du texte topbar `text_promo` pour éviter une répétition mot pour mot
   entre les deux mécanismes. Pas de wp_option dédiée pour l'instant (un
   seul endroit à éditer, cohérent avec le choix déjà fait pour l'ex-carte
   hero) — si besoin d'un pilotage sans déploiement, migrer vers une option
   WP dédiée (ex. `text_promo_popup`) suivant exactement le patron de
   `text_promo`.
   ========================================================================== */

/* ---------- Overlay + carte ---------- */
.lbq-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(15, 23, 42, .68);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.lbq-popup-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s linear 0s;
}

.lbq-popup-card {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: linear-gradient(135deg, #ea580c, #f97316);
	color: #fff;
	border-radius: 20px;
	padding: 40px 32px 32px;
	text-align: center;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
	transform: scale(.85);
	opacity: 0;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}

.lbq-popup-overlay.is-open .lbq-popup-card {
	transform: scale(1);
	opacity: 1;
}

/* ---------- Badge feuille d'automne : même pulse doux que la topbar ---------- */
.lbq-popup-badge {
	display: inline-block;
	font-size: 2.4rem;
	line-height: 1;
	margin-bottom: 12px;
	animation: lbq-promo-pulse 2.4s ease-in-out infinite;
}

/* ---------- Texte ---------- */
.lbq-popup-text {
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 24px;
}

/* ---------- CTA "Commander maintenant" ---------- */
.lbq-popup-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 30px;
	background: #fff;
	color: #e8590c;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 800;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.lbq-popup-cta:hover,
.lbq-popup-cta:focus {
	background: #fff7ed;
	color: #d14e08;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

/* ---------- Croix de fermeture (zone tactile ≥ 40px) ---------- */
.lbq-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .18);
	border: none;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, transform .15s ease;
}

.lbq-popup-close svg {
	width: 18px;
	height: 18px;
}

.lbq-popup-close svg path {
	stroke: #fff;
}

.lbq-popup-close:hover,
.lbq-popup-close:focus {
	background: rgba(255, 255, 255, .32);
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.lbq-popup-badge {
		animation: none;
	}
	.lbq-popup-card,
	.lbq-popup-overlay {
		transition: opacity .15s linear;
	}
	.lbq-popup-close:hover,
	.lbq-popup-close:focus {
		transform: none;
	}
}

/* ---------- Verrouillage du scroll pendant que la pop-up est ouverte ---------- */
html.lbq-popup-lock-scroll,
html.lbq-popup-lock-scroll body {
	overflow: hidden;
}

/* ---------- Responsive : mobile (jusqu'à 480px, testé à 360px) ---------- */
@media (max-width: 480px) {
	.lbq-popup-card {
		max-width: 90%;
		padding: 32px 20px 24px;
		border-radius: 16px;
	}
	.lbq-popup-badge {
		font-size: 2rem;
	}
	.lbq-popup-text {
		font-size: .92rem;
		margin-bottom: 20px;
	}
	.lbq-popup-cta {
		width: 100%;
		padding: 14px 20px;
		font-size: .95rem;
	}
	.lbq-popup-close {
		top: 8px;
		right: 8px;
	}
}

/* ==========================================================================
   LBQVC — Synchro topbar #banner_promo ↔ pop-up (masquée tant que la pop-up
   est affichée, révélée avec transition douce à la fermeture).

   `lbq-popup-active` est posée sur <html> par un tout petit script inline
   très tôt dans <head> (header.php) si sessionStorage ne contient pas
   encore `lbq_promo_popup_seen` — donc AVANT le premier paint, ce qui
   évite tout flash de la topbar avant l'ouverture de la pop-up. La classe
   est retirée par js/urgence-popup.js à la fermeture, ce qui déclenche la
   transition ci-dessous (opacity/transform) car la propriété `transition`
   reste définie en permanence sur la règle de base, indépendamment de la
   présence de la classe.
   ========================================================================== */

#banner_promo.lbq-promo {
	transition: opacity .45s ease, transform .45s ease;
}

html.lbq-popup-active #banner_promo.lbq-promo {
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	#banner_promo.lbq-promo {
		transition: opacity .15s linear;
	}
	html.lbq-popup-active #banner_promo.lbq-promo {
		transform: none;
	}
}
