/*
Theme Name: L'Engrenage (Hello Elementor Child)
Template: hello-elementor
Description: Thème enfant pour le site vitrine one-page de L'Engrenage - Salle Parkour & Ninja.
Version: 1.0.0
Text Domain: lengrenage-child
*/

@font-face {
	font-family: 'FC Barcelona';
	src: url('assets/fonts/FCBarcelona.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gotham Book';
	src: url('assets/fonts/GothamBook.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--lg-noir: #000000;
	--lg-jaune: #FFD400;
	--lg-blanc: #FFFFFF;
	--lg-gris-fonce: #1A1A1A;
	--lg-gris-clair: #F5F5F3;
	--lg-font-display: 'FC Barcelona', 'Anton', sans-serif;
	--lg-font-body: 'Gotham Book', 'Poppins', sans-serif;
	--lg-gear-icon: url('/wp-content/uploads/2026/07/pictogramme-engrenage-jaune.png');
}

html { scroll-behavior: smooth; }

/* La navbar est sticky (76px de haut) : sans ça, le haut de chaque section
   ciblée par une ancre (nav, liens "retour", etc.) atterrit pile derrière
   elle après le scroll — repéré sur #tarifs (titre masqué), pas sur #infos
   par coïncidence de padding interne. Un seul point de réglage plutôt que
   du padding au cas par cas par section. */
#accueil, #activites, #infos, #tarifs, #actus, #contact, #article-content,
#entrees, #abonnements, #cours, #groupes, #anniversaires, #evenements {
	scroll-margin-top: 92px;
}

/* ---------- Sommaire d'ancres rapides en haut de la page Tarifs ---------- */
.lg-price-jumpnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: 900px; /* 6 pastilles depuis l'ajout d'Événements : 720px isolait la
	dernière ("Événements") seule sur une 2e ligne — élargi pour que les 6 tiennent
	sur une ligne aux largeurs desktop courantes. */
	margin: 0 auto;
	padding: 28px 24px 0;
}
.lg-price-jumpnav a {
	display: inline-block;
	padding: 8px 16px;
	border: 1.5px solid var(--lg-noir);
	border-radius: 20px;
	color: var(--lg-noir) !important;
	font-family: var(--lg-font-display);
	font-size: 13px;
	letter-spacing: 0.5px;
	text-decoration: none !important;
}
.lg-price-jumpnav a:hover { background: var(--lg-jaune); border-color: var(--lg-jaune); }

/* Filigrane décoratif fixe (voir functions.php) : noir à faible opacité,
   se fond dans les sections à fond noir, ressort sur les fonds clairs. */
.lg-bg-gorilla {
	position: fixed;
	bottom: -30px;
	right: -50px;
	width: 340px;
	max-width: 45vw;
	height: auto;
	opacity: 0.05;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}
@media (max-width: 600px) {
	.lg-bg-gorilla { width: 220px; }
}

body {
	font-family: var(--lg-font-body);
	color: var(--lg-noir);
	background-color: var(--lg-blanc);
}

h1, h2, h3, h4, h5, h6,
.lg-display {
	font-family: var(--lg-font-display);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Respect du réglage système : coupe l'animation de rebond en continu et les
   transitions de survol pour les personnes ayant activé "réduire les animations". */
@media (prefers-reduced-motion: reduce) {
	.lg-scroll-cue { animation: none; }
	.lg-vcard-media img,
	.lg-hscroll-btn,
	.lg-btn .elementor-button {
		transition: none;
	}
}

a {
	color: inherit;
}

/* Badges / boutons style engrenage
   Elementor place la classe CSS custom (_css_classes) sur le wrapper
   ".elementor-widget-button", pas sur le <a class="elementor-button"> interne :
   on cible donc ".lg-btn .elementor-button" (+ !important pour prévaloir sur
   les variables globales injectées par Elementor via .elementor-widget-button .elementor-button). */
.lg-btn .elementor-button {
	font-family: var(--lg-font-display);
	background-color: var(--lg-jaune) !important;
	color: var(--lg-noir) !important;
	padding: 14px 32px;
	border-radius: 4px;
	text-decoration: none !important;
	letter-spacing: 1px;
	border: 2px solid var(--lg-jaune) !important;
	transition: transform .15s ease, background-color .15s ease;
}
.lg-btn .elementor-button:hover {
	background-color: var(--lg-blanc) !important;
	border-color: var(--lg-blanc) !important;
	transform: translateY(-2px);
}
.lg-btn.lg-btn--outline .elementor-button {
	background-color: transparent !important;
	color: var(--lg-blanc) !important;
	border: 2px solid var(--lg-jaune) !important;
}
.lg-btn.lg-btn--outline .elementor-button:hover {
	background-color: var(--lg-jaune) !important;
	color: var(--lg-noir) !important;
}
/* Variante contour sombre : pour un bouton secondaire sur fond clair (page Tarifs...),
   contrairement à .lg-btn--outline ci-dessus qui suppose un fond noir (texte blanc,
   invisible sur blanc). Utile juste avant un bloc jaune plein pour éviter deux jaunes
   pleins qui se suivent visuellement (ex. "Demander un devis" suivi de l'encart
   "Une question sur nos tarifs ?"). */
.lg-btn.lg-btn--outline-dark .elementor-button {
	background-color: transparent !important;
	color: var(--lg-noir) !important;
	border: 2px solid var(--lg-noir) !important;
}
.lg-btn.lg-btn--outline-dark .elementor-button:hover {
	background-color: var(--lg-noir) !important;
	color: var(--lg-blanc) !important;
}

.lg-badge-manquant {
	background: #FFF3F3;
	border: 1.5px dashed #d40000;
	color: #a30000;
	font-family: var(--lg-font-body);
	font-size: 12px;
	font-weight: bold;
	text-transform: none;
	letter-spacing: 0;
	padding: 2px 8px;
	border-radius: 4px;
	display: inline-block;
	line-height: 1.6;
}
/* Info trouvée (recherche externe) mais pas confirmée par le client — distincte du rouge
   "totalement manquant" pour ne pas les mélanger visuellement. */
.lg-badge-confirmer {
	background: #FFF8E5;
	border: 1.5px dashed #b8860b;
	color: #7a5c00;
	font-family: var(--lg-font-body);
	font-size: 12px;
	font-weight: bold;
	text-transform: none;
	letter-spacing: 0;
	padding: 2px 8px;
	border-radius: 4px;
	display: inline-block;
	line-height: 1.6;
}

.lg-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement (voir functions.php) : hors écran par défaut, ramené à
   l'écran uniquement au focus clavier (jamais visible à la souris). */
.lg-skip-link {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 1000;
	background: var(--lg-jaune);
	color: var(--lg-noir) !important;
	font-family: var(--lg-font-display);
	font-size: 14px;
	letter-spacing: 0.5px;
	text-decoration: none !important;
	padding: 12px 20px;
	border-radius: 4px;
	transition: top .15s ease;
}
.lg-skip-link:focus {
	top: 12px;
}

/* ---------- Navbar ---------- */
.lg-navbar {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--lg-noir);
	border-bottom: 1px solid #2a2a2a;
}
.lg-nav-links a {
	color: var(--lg-blanc);
	font-family: var(--lg-font-display);
	font-size: 14px;
	letter-spacing: 1px;
	text-decoration: none;
	margin: 0 14px;
	text-transform: uppercase;
}
.lg-nav-links a:hover { color: var(--lg-jaune); }
/* État "section courante" (voir assets/js/nav-active.js) : même jaune que le hover,
   !important pour prévaloir sur .lg-footer .lg-nav-links a plus bas (couleur grise) —
   même spécificité (deux classes + élément), l'ordre seul ne suffirait pas si ce bloc
   était déplacé un jour. */
.lg-nav-links a.lg-nav-active { color: var(--lg-jaune) !important; }

/* ---------- Hero ---------- */
.lg-hero {
	background-color: var(--lg-noir);
	position: relative;
	overflow: hidden;
	text-align: center;
}
.lg-hero .lg-kicker {
	color: var(--lg-jaune);
	font-family: var(--lg-font-display);
	letter-spacing: 3px;
	font-size: 14px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
/* Date d'ouverture (sous les boutons du hero) : remontée de 13px (taille
   d'origine, trop discrète pour une info aussi importante à l'approche de
   l'ouverture) à 20px. L'icône SVG inline est en `width`/`height` fixes dans
   le HTML du widget (pas en `em`), donc `transform: scale()` plutôt qu'un
   sélecteur ciblant le `<svg>` : évite de dupliquer la logique de taille à
   deux endroits différents (CSS + attributs SVG). */
.lg-hero .lg-hero-opening-date {
	font-size: 20px;
	letter-spacing: 2px;
}
.lg-hero .lg-hero-opening-date svg {
	transform: scale(1.3);
	transform-origin: center;
	/* Le margin-right:6px de l'icône est fixé en inline dans le HTML du widget
	   (proportionné à l'ancienne taille 13px) : à 20px il paraît trop serré.
	   Corrigé ici plutôt qu'en réécrivant le contenu Elementor. */
	margin-right: 10px !important;
}
@media (max-width: 480px) {
	.lg-hero .lg-hero-opening-date { font-size: 16px; letter-spacing: 1.5px; }
}
.lg-hero p {
	color: #e6e6e6;
	text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
/* Titre hero en vrai texte (pas une image) : reste lisible quelle que soit
   la photo de fond, et meilleur pour le SEO qu'un wordmark bitmap. */
.lg-hero-title h1 {
	color: var(--lg-blanc) !important;
	font-size: clamp(48px, 8vw, 96px);
	margin: 0;
	line-height: 1;
	text-shadow: 0 4px 24px rgba(0,0,0,0.75);
}
.lg-hero-subtitle {
	color: var(--lg-jaune) !important;
	font-family: var(--lg-font-display);
	letter-spacing: 4px;
	font-size: 16px;
	text-transform: uppercase;
	margin-top: 6px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.lg-hero-accroche {
	color: var(--lg-blanc) !important;
	font-family: var(--lg-font-display);
	font-size: clamp(18px, 2.6vw, 28px);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin: 12px 0 0;
	text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.lg-hero-pills span {
	display: inline-block;
	border: 1.5px solid var(--lg-jaune);
	color: var(--lg-jaune);
	font-family: var(--lg-font-display);
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 30px;
	margin: 4px 6px;
}
.lg-scroll-cue {
	/* Chevron SVG (pas le rond "engrenage" des boutons de carrousel
	   lg-hscroll-btn, déjà pris pour cette forme ailleurs sur le site —
	   retour testeur). */
	animation: lg-bounce 1.6s infinite;
	display: inline-block;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform .2s ease;
	line-height: 0;
}
.lg-scroll-cue:hover { animation-play-state: paused; transform: scale(1.25); }
@keyframes lg-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(10px); }
}

/* ---------- Sections generic ---------- */
.lg-section-title {
	text-align: center;
}
.lg-section-kicker {
	text-align: center;
	color: var(--lg-noir);
	font-family: var(--lg-font-display);
	letter-spacing: 3px;
	font-size: 13px;
	background: var(--lg-jaune);
	display: inline-block;
	padding: 4px 16px;
	border-radius: 20px;
}
.lg-section-intro { text-align: center; color: #444 !important; }

/* ---------- Infos pratiques : tuiles-stats + cartes détail (au lieu de 8 blocs uniformes) ---------- */
.lg-stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}
.lg-stat-tile {
	/* Fond noir (retour testeur : les tuiles grises "ne claquaient pas
	   assez") — texte/valeur en blanc, icône et label restent lisibles
	   (contrastes vérifiés ci-dessous). */
	background: var(--lg-noir);
	color: var(--lg-blanc);
	border-radius: 14px;
	padding: 26px 20px;
	flex: 1 1 calc(50% - 10px);
	max-width: calc(50% - 10px);
	box-sizing: border-box;
	text-align: center;
}
@media (max-width: 480px) {
	.lg-stat-tile { flex-basis: 100%; max-width: 100%; }
}
.lg-stat-tile svg { color: var(--lg-jaune); margin-bottom: 10px; }
/* Tuile cliquable (lien vers /tarifs/) : neutralise le style de lien par
   défaut du navigateur, même traitement que .lg-vcard. */
.lg-stat-tile { text-decoration: none !important; }
a.lg-stat-tile:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--lg-blanc), 0 0 0 5px var(--lg-jaune);
}
.lg-stat-tile .lg-stat-value {
	font-family: var(--lg-font-display);
	font-size: 21px;
	line-height: 1.2;
	/* !important nécessaire : c'est un widget heading, la couleur globale du
	   kit Elementor (.elementor-heading-title) gagne sinon contre la couleur
	   héritée de .lg-stat-tile (même famille de piège que .lg-price-table th
	   plus bas — voir skill projet, Piège n°2). */
	color: var(--lg-blanc) !important;
}
.lg-stat-tile .lg-stat-label {
	font-size: 12px;
	color: #b8b8b8; /* contraste ~8.3:1 sur fond noir (AA/AAA) */
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 4px;
}
/* Passés de h4 à h3 pour ne pas sauter de niveau après le h2 de section
   (a11y) ; taille figée en CSS pour ne rien changer visuellement. */
.lg-info-item-title .elementor-heading-title {
	font-size: 17px !important;
}
.lg-detail-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.lg-info-item {
	background: var(--lg-gris-clair);
	border-radius: 14px;
	padding: 26px 24px;
	/* !important nécessaire : Elementor pose sa propre largeur (width: ...)
	   sur l'élément avec une spécificité plus forte que ".lg-info-item" seul,
	   qui gagnait silencieusement contre ce flex-basis (cartes empilées en
	   pleine largeur au lieu de côte à côte — même famille que le piège des
	   grilles de tuiles déjà documenté). */
	flex: 1 1 320px !important;
	border-left: 4px solid var(--lg-jaune);
}
/* Icône + titre sur la même ligne (au lieu d'empilés) */
.lg-info-item-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.lg-info-item-head svg { margin-bottom: 0 !important; }
.lg-info-item-head .lg-info-item-title { margin: 0; }
.lg-info-item svg { color: var(--lg-noir); margin-bottom: 10px; display: block; }
.lg-info-item h4 {
	font-family: var(--lg-font-display);
	font-size: 17px;
	margin: 0 0 8px;
	text-transform: uppercase;
}
.lg-info-item p { margin: 0; font-size: 15px; color: #333; line-height: 1.5; }

.lg-tarif-callout {
	background: var(--lg-jaune);
	border-radius: 12px;
	text-align: center;
	padding: 34px 20px;
}
/* Sélecteur à deux classes (spécificité 0,2,0) plutôt qu'un margin-top isolé sur
   .lg-tarif-callout seul : ce dernier serait écrasé par le "margin: 0 auto 64px"
   (shorthand, top:0 implicite) de .lg-article-cta plus bas dans ce fichier — même
   spécificité (une classe), donc l'ordre de déclaration l'aurait emporté. Sans ça,
   le bloc précédent (ex. bouton "Demander un devis") colle directement au-dessus de
   cet encart plein-jaune — même rythme que .lg-price-group h2 (56px). */
.lg-article-cta.lg-tarif-callout { margin-top: 56px; }
.lg-tarif-callout h3 {
	font-family: var(--lg-font-display);
	font-size: 30px;
	margin: 0 0 8px;
}
.lg-tarif-callout p { margin: 0; color: #1a1a1a; }
/* Le bouton par défaut (fond jaune) devient invisible sur ce fond jaune :
   inversion noir/blanc pour un vrai contraste, seulement dans ce contexte. */
.lg-tarif-callout .lg-btn .elementor-button {
	background-color: var(--lg-noir) !important;
	color: var(--lg-blanc) !important;
	border-color: var(--lg-noir) !important;
}
.lg-tarif-callout .lg-btn .elementor-button:hover {
	background-color: transparent !important;
	color: var(--lg-noir) !important;
	border-color: var(--lg-noir) !important;
}

/* ---------- Card grids (activités / actus) ---------- */
.lg-grid-4 {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}
.lg-card {
	flex: 1 1 260px;
	max-width: 300px;
	border-radius: 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
}
.lg-card-img img {
	width: 100% !important;
	height: 170px !important;
	object-fit: cover;
	display: block;
}
.lg-card-body {
	padding: 22px 20px 26px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.lg-card h3 {
	font-family: var(--lg-font-display);
	font-size: 19px;
	margin: 0 0 14px;
	line-height: 1.25;
}
.lg-card p { font-size: 14px; line-height: 1.5; flex-grow: 1; }
.lg-card .lg-card-badge {
	display: inline-block;
	font-family: var(--lg-font-display);
	font-size: 12px;
	margin: 10px 0;
}
/* ---------- Carrousel horizontal (Activités / Actus, façon Big Mamma) ---------- */
.lg-hscroll-wrap {
	position: relative;
}
/* Elementor imbrique les enfants d'un container dans un .e-con-inner : on
   applique donc le comportement scroll/flex sur ce wrapper interne (pas
   directement sur .lg-hscroll qui n'a que .e-con-inner comme enfant direct). */
.lg-hscroll > .e-con-inner {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 56px 14px;
	justify-content: flex-start !important;
}
@media (max-width: 480px) {
	.lg-hscroll > .e-con-inner { padding-left: 44px; padding-right: 44px; }
}
.lg-hscroll > .e-con-inner::-webkit-scrollbar { display: none; }
.lg-hscroll .lg-vcard {
	scroll-snap-align: start;
	flex: 0 0 340px !important;
	width: 340px;
}
/* Actus dynamiques : le widget "Shortcode" d'Elementor qui génère les cartes
   (classe .lg-actus-dynamic) ne doit créer AUCUNE boîte, sinon ses cartes
   .lg-vcard seraient prisonnières du wrapper du widget au lieu d'être des
   enfants flex directs de la piste .e-con-inner du carrousel. display:contents
   fait disparaître le wrapper de la mise en page tout en gardant les cartes. */
.lg-actus-dynamic,
.lg-actus-dynamic .elementor-widget-container,
.lg-actus-dynamic .elementor-shortcode {
	display: contents;
}
.lg-hscroll .lg-card {
	scroll-snap-align: start;
	flex: 0 0 260px !important;
	width: 260px;
}
@media (max-width: 480px) {
	.lg-hscroll .lg-vcard { flex-basis: 78vw !important; width: 78vw; }
}
/* Flèches en forme d'engrenage (clin d'œil à la marque) : PNG du picto jaune
   en fond + chevron blanc en SVG (pas de caractère typographique — évite le
   glyphe manquant/tofu que rendait le picker de police custom). */
.lg-hscroll-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	background-image: var(--lg-gear-icon);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	z-index: 5;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
	transition: transform .3s ease, opacity .25s ease;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
/* Le carré rouge au survol venait du contour de focus/tap par défaut du
   navigateur : comme il tourne avec l'élément (transform s'applique à la
   boîte entière, contour compris), il devenait très visible pendant la
   rotation. Neutralisé explicitement sur le wrapper ET le bouton, sur tous
   les états d'interaction. */
.lg-hscroll-btn:hover,
.lg-hscroll-btn:focus,
.lg-hscroll-btn:focus-visible,
.lg-hscroll-btn:active {
	outline: none;
}
.lg-hscroll-btn--hidden {
	opacity: 0 !important;
	pointer-events: none !important;
}
/* Le <button> natif à l'intérieur du widget garde son chrome par défaut du
   navigateur (bordure, fond, padding asymétrique) tant qu'on ne le reset pas
   explicitement : c'est lui qui causait le "carré rouge" et le chevron
   décalé, la classe CSS custom d'Elementor s'appliquant au wrapper du
   widget, pas à l'élément <button> lui-même (cf. skill, piège n°1). */
.lg-hscroll-btn button {
	all: unset;
	/* `all: unset` ne neutralise pas fiablement `appearance` sur tous les
	   navigateurs (sa valeur initiale reste "auto" dans certains moteurs) :
	   sans ce reset explicite, le chrome natif du bouton (couleur système
	   de hover/pressed dérivée de l'accent color de l'OS) peut resurgir et
	   recouvrir tout le bouton d'un aplat de couleur au survol. */
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent !important;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
	box-sizing: border-box;
}
.lg-hscroll-btn button:focus,
.lg-hscroll-btn button:hover,
.lg-hscroll-btn button:active {
	outline: none;
}
/* Remplacement visible du focus clavier retiré ci-dessus (jamais outline:none
   sans alternative) : double anneau blanc/jaune, lisible aussi bien sur les
   photos de fond que sur les fonds noirs des sections. */
.lg-hscroll-btn button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--lg-blanc), 0 0 0 5px var(--lg-jaune);
	border-radius: 50%;
}
.lg-hscroll-btn svg { pointer-events: none; display: block; }
.lg-hscroll-btn:hover { transform: translateY(-50%) rotate(25deg); }
.lg-hscroll-prev:hover { transform: translateY(-50%) rotate(-25deg); }
.lg-hscroll-prev { left: 4px; }
.lg-hscroll-next { right: 4px; }
@media (max-width: 480px) {
	.lg-hscroll-btn { width: 44px; height: 44px; }
}

/* ---------- Lien Instagram avec pictogramme ---------- */
.lg-ig-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
}
.lg-ig-link svg { flex-shrink: 0; }
.lg-ig-link:hover { text-decoration: underline; }

.lg-transit {
	display: flex !important;
	align-items: center;
	gap: 8px;
	color: #444;
	font-size: 14px;
}
.lg-transit svg { flex-shrink: 0; color: var(--lg-noir); }

/* ---------- Vignettes "image-first" (section Activités, style Big Mamma) ---------- */
.lg-vgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}
.lg-vcard {
	position: relative;
	flex: 1 1 340px;
	max-width: 380px;
	aspect-ratio: 3 / 4;
	border-radius: 16px;
	overflow: hidden;
	display: block;
	background-color: #111;
	/* La carte entière devient un <a> pour les actus reliées à un article
	   (cf. journal) : neutralise le style de lien par défaut du navigateur,
	   les couleurs du texte à l'intérieur sont déjà gérées par ailleurs. */
	text-decoration: none !important;
	color: inherit;
}
a.lg-vcard:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--lg-blanc), 0 0 0 6px var(--lg-jaune);
}
.lg-vcard-media {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
}
.lg-vcard-media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.lg-vcard:hover .lg-vcard-media img {
	transform: scale(1.06);
}
.lg-vcard-top-badge {
	position: absolute !important;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: var(--lg-jaune);
	color: var(--lg-noir);
	font-family: var(--lg-font-display);
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 20px;
}
.lg-vcard-overlay {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 26px 22px 22px;
	background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.68) 55%, rgba(0,0,0,0) 100%);
	display: flex;
	flex-direction: column;
}
.lg-vcard-title h3 {
	color: var(--lg-blanc) !important;
	font-size: 23px;
	line-height: 1.2;
	margin: 0 0 8px;
}
.lg-vcard-tagline {
	color: #e8e8e8 !important;
	font-size: 14px;
	margin: 0 0 14px;
}
.lg-vcard .lg-btn .elementor-button {
	padding: 9px 20px !important;
	font-size: 13px !important;
}

.lg-card--activite {
	background: var(--lg-jaune);
	color: var(--lg-noir);
}
.lg-card--activite .lg-card-badge { color: #1a1a1a !important; }
.lg-card--actu {
	background: #111111;
	color: var(--lg-blanc);
	border: 1.5px solid var(--lg-jaune);
}
.lg-card--actu .lg-card-badge, .lg-card--actu h3 { color: var(--lg-jaune) !important; }
.lg-card--actu p { color: #d8d8d8 !important; }

.lg-section--dark { background-color: var(--lg-noir); }
.lg-section--dark .lg-section-title,
.lg-section--dark h2 { color: var(--lg-blanc) !important; }
.lg-section--dark .lg-section-intro { color: #bbbbbb !important; }

/* ---------- Contact ---------- */
.lg-map-placeholder {
	border: 2px dashed #bbb;
	border-radius: 10px;
	background: var(--lg-gris-clair);
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #777;
	font-family: var(--lg-font-display);
	text-align: center;
	padding: 20px;
}

/* ---------- Footer ---------- */
.lg-footer {
	background-color: var(--lg-noir);
	color: #cccccc;
}
.lg-footer a { color: #cccccc; text-decoration: none; }
.lg-footer a:hover { color: var(--lg-jaune); }
.lg-footer .lg-nav-links a { color: #cccccc; }
.lg-footer .lg-nav-links a:hover { color: var(--lg-jaune); }
/* Sans !important, le kit global Elementor (chargé après ce fichier, même
   spécificité que .lg-footer a) écrase la couleur en quasi-noir sur fond noir —
   contraste 1.2:1 relevé par l'audit Lighthouse, repéré ici (piège déjà documenté
   ailleurs sur ce projet, cf. skill wp-elementor-lengrenage §Piège n°2). Sur le
   conteneur ET sur les liens : les " · " séparateurs sont du texte brut hors
   <a>, ils héritent de la couleur du div .lg-footer-legal lui-même. */
.lg-footer-legal { color: #cccccc !important; }
.lg-footer-legal a { margin: 0 10px; font-size: 13px; color: #cccccc !important; }
.lg-footer-copy { font-size: 12px; color: #888; }

/* ---------- Bouton hamburger mobile (injecté en JS, voir nav-toggle.js) ----------
   Sous 900px, les liens de nav n'avaient plus aucun moyen d'être atteints
   (display:none sans remplacement) : seul le footer, tout en bas de la page,
   permettait de naviguer. Ajout d'un vrai menu déroulant. */
.lg-nav-toggle {
	/* Reset complet (piège déjà documenté sur les flèches carrousel, skill
	   projet #6) : sans appearance:none explicite, le chrome natif du bouton
	   (couleur système de pressed/hover) resurgit au clic malgré le reset.
	   "all:unset" repasse "display" à sa valeur initiale ("inline") : on doit
	   donc reposer display:none explicitement après, sinon le bouton reste
	   visible à toutes les largeurs au lieu de n'apparaître que sous 900px. */
	all: unset;
	display: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent !important;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin: 0;
	cursor: pointer;
	color: var(--lg-blanc);
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}
.lg-nav-toggle:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--lg-noir), 0 0 0 4px var(--lg-jaune);
	border-radius: 4px;
}
.lg-nav-toggle svg { display: block; }
/* Sélecteur plus spécifique que ".lg-nav-toggle svg" ci-dessus (2 classes vs
   1 classe + 1 type) : sans ça "display:none" perd silencieusement et les
   deux icônes (burger + croix) s'affichaient en même temps. */
.lg-nav-toggle .lg-nav-toggle-icon-close { display: none; }
.lg-nav-toggle[aria-expanded="true"] .lg-nav-toggle-icon-open { display: none; }
.lg-nav-toggle[aria-expanded="true"] .lg-nav-toggle-icon-close { display: block; }

/* Seuil relevé de 767px à 900px (audit 2026-09) : à 768px (iPad portrait, une
   largeur d'appareil réelle courante), le menu desktop était encore affiché
   mais manquait de place — le lien "Infos pratiques" (le plus long) passait
   sur deux lignes au lieu de rester aligné avec les autres. 900px laisse une
   marge confortable au-dessus de la largeur réelle nécessaire (~780px avec
   tous les liens sur une ligne, mesuré en pratique). */
@media (max-width: 900px) {
	.lg-navbar .lg-nav-toggle { display: flex; align-items: center; justify-content: center; }
	.lg-navbar .lg-nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--lg-noir);
		border-bottom: 1px solid #2a2a2a;
	}
	.lg-navbar .lg-nav-links.lg-nav-links--open { display: block; }
	.lg-navbar .lg-nav-links.lg-nav-links--open > .e-con-inner {
		flex-direction: column;
		align-items: stretch;
		padding: 4px 24px 20px;
	}
	.lg-navbar .lg-nav-links a {
		display: block;
		padding: 14px 0;
		margin: 0;
		border-bottom: 1px solid #1f1f1f;
	}
	.lg-navbar .lg-nav-links a:last-child { border-bottom: none; }
}

/* ---------- Pages articles (détail d'une actu) ---------- */
.lg-article-hero {
	/* display:flex + l'alignement du bloc de contenu (bottom + centré) sont
	   posés côté Elementor (flex_justify_content/flex_align_items sur le
	   container, PAS align_items/justify_content sans préfixe — piège n°5
	   déjà documenté) : ici on ne gère que taille/fond/overlay. */
	position: relative;
	min-height: 420px;
	background-color: var(--lg-gris-fonce);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.lg-article-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%);
}
.lg-article-hero-inner {
	position: relative;
	z-index: 1;
	padding: 40px 24px;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.lg-article-hero .lg-section-kicker { margin-bottom: 14px; }
.lg-article-hero-title h1 {
	color: var(--lg-blanc) !important;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.1;
	margin: 0;
	text-shadow: 0 4px 24px rgba(0,0,0,0.75);
}
.lg-article-hero-subtitle {
	color: #e6e6e6 !important;
	font-size: 16px;
	margin-top: 10px;
}

.lg-article-body {
	max-width: 700px;
	margin: 0 auto;
	padding: 56px 24px;
}
.lg-article-body p {
	font-size: 17px;
	line-height: 1.7;
	color: #222;
	margin: 0 0 20px;
}
.lg-article-body h2, .lg-article-body h3 {
	margin: 36px 0 14px;
}
/* Liens inline dans le texte des articles/pages : la règle globale
   `a { color: inherit }` les rend visuellement indiscernables du texte
   courant sans ça (repéré en ajoutant le lien "planning des cours" — même
   souci déjà présent, non repéré jusqu'ici, sur le lien "/tarifs/" de
   l'article "Notre enseigne est posée !"). */
.lg-article-body a,
.lg-price-group-intro a,
.lg-price-table-note a {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.lg-article-body a:hover,
.lg-price-group-intro a:hover,
.lg-price-table-note a:hover {
	color: #b8860b;
}

.lg-article-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--lg-font-display);
	font-size: 13px;
	letter-spacing: 0.5px;
	text-decoration: none !important;
	color: var(--lg-noir) !important;
}
.lg-article-back:hover { color: var(--lg-jaune) !important; }

/* !important nécessaire : Elementor pose son propre max-width/width sur
   l'élément avec une spécificité plus forte (même famille que le piège déjà
   documenté sur .lg-info-item) — sans ça le bandeau s'étire sur toute la
   largeur de l'écran au lieu de rester dans la colonne de lecture. */
.lg-article-cta { max-width: 700px !important; margin: 0 auto 64px; padding: 0 24px; }

/* ---------- Carte "Horaires d'ouverture" (pleine largeur, réutilise .lg-info-item) ---------- */
.lg-info-item--full { flex: 1 1 100%; }
.lg-hours-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 14px;
}
.lg-hours-table td {
	padding: 10px 6px;
	border-bottom: 1px solid #e5e5e5;
	font-size: 15px;
}
.lg-hours-table td:first-child {
	font-family: var(--lg-font-display);
	letter-spacing: 0.5px;
	width: 45%;
}
.lg-hours-table td:last-child { color: #444; text-align: right; }
.lg-hours-table tr.lg-hours-closed td:last-child { color: #a30000; }

/* ---------- Page Tarifs : tableaux ---------- */
/* Tableau fluide (width:100%, pas de min-width/nowrap) plutôt que scroll
   horizontal : un scroll caché dans une colonne qui disparaît hors-écran
   sans indice visuel est une impasse UX sur mobile (testé : la colonne
   "Prix" des tableaux à 2 colonnes sortait entièrement de l'écran sans
   qu'on devine qu'il fallait scroller *dans* le tableau). Le wrapper
   overflow-x reste en garde-fou si un libellé imprévu s'avère trop long. */
.lg-price-table-wrap {
	overflow-x: auto;
	margin: 18px 0 40px;
	-webkit-overflow-scrolling: touch;
}
.lg-price-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.lg-price-table th,
.lg-price-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid #e5e5e5;
}
.lg-price-table th {
	background: var(--lg-noir);
	color: var(--lg-jaune) !important;
	font-family: var(--lg-font-display);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 13px;
}
.lg-price-table th:not(:first-child),
.lg-price-table td:not(:first-child) { text-align: right; }
.lg-price-table tbody tr:nth-child(even) { background: var(--lg-gris-clair); }
@media (max-width: 480px) {
	.lg-price-table { font-size: 13px; }
	.lg-price-table th, .lg-price-table td { padding: 10px 8px; }
}
.lg-price-table-note {
	font-size: 14px;
	color: #555;
	margin: -24px 0 40px;
}
/* Bouton "Réserver/Acheter" par ligne dans les tableaux de tarifs — dernière
   colonne sans en-tête visible (cf. th:not(:first-child) déjà en right,
   cohérent avec le reste du tableau). */
.lg-price-table-btn {
	display: inline-block;
	padding: 6px 14px;
	background: var(--lg-jaune);
	color: var(--lg-noir) !important;
	font-family: var(--lg-font-display);
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 30px;
	white-space: nowrap;
}
.lg-price-table-btn:hover { background: var(--lg-noir); color: var(--lg-jaune) !important; }
.lg-price-group { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.lg-price-group h2 { margin: 56px 0 4px; }
.lg-price-group h2:first-of-type { margin-top: 0; }
.lg-price-group-intro { color: #555; margin: 0 0 4px; font-size: 15px; }

/* En-tête par défaut du thème (Mentions légales / RGPD) : ces 2 pages restent
   volontairement sur le template WordPress standard, pas construites en
   Elementor (pas de navbar custom) — mais l'en-tête générique du thème
   (titre de site en texte brut, sans logo ni couleur) détonnait fortement
   avec le reste du site. Habillage minimal : logo (theme mod custom_logo,
   picto engrenage/gorille jaune) + couleurs de marque sur la barre
   d'en-tête, sans reconstruire toute la navigation. */
.site-header {
	background: var(--lg-noir);
	padding: 20px 24px;
	justify-content: flex-start;
	border-bottom: 3px solid var(--lg-jaune);
}
.site-header .custom-logo-link { display: block; line-height: 0; }
.site-header .custom-logo-link img {
	height: 44px;
	width: auto;
}
.site-header .site-title a {
	font-family: var(--lg-font-display);
	color: var(--lg-jaune);
	text-decoration: none;
	letter-spacing: 0.5px;
}
.site-header .site-description {
	/* Le réglage Elementor qui contrôle son affichage est un paramètre de Kit
	   global (pas un simple theme_mod) — plus sûr et plus simple de la
	   masquer ici que d'aller toucher un réglage potentiellement partagé.
	   Le logo suffit, la tagline en texte brut faisait doublon en dessous. */
	display: none;
}