/*
Theme Name: LifeUp
Theme URI: https://assolifeup.fr
Description: Thème enfant de Twenty Twenty-Five pour l'Association LifeUp — reconstruction du site sans Colibri, avec l'éditeur de blocs natif de WordPress.
Template: twentytwentyfive
Version: 1.0.0
Author: Association LifeUp
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: lifeup
*/

/* ---------- Touches navigateur modernes ---------- */
:root {
	/* Site clair uniquement : bloque le mode sombre auto des navigateurs. */
	color-scheme: light;
	/* Cases à cocher, radios, barres de progression… en orange LifeUp. */
	accent-color: #f79007;
}
::selection {
	background: #f79007;
	color: #ffffff;
}
html {
	/* Firefox + Chrome 121+ : ascenseur aux couleurs du site. */
	scrollbar-color: #f79007 #f5fafd;
}
body {
	/* Flash de tap mobile discret, teinté orange. */
	-webkit-tap-highlight-color: rgba(247, 144, 7, 0.2);
}
:focus-visible {
	outline-color: #f79007;
}

/* ---------- Barre du haut ---------- */
.lu-topbar a {
	color: #ffffff;
	text-decoration: none;
}
.lu-topbar a:hover {
	text-decoration: underline;
}
.lu-topbar .wp-block-social-links {
	gap: 4px;
}

/* ---------- Panneau « verre dépoli » derrière le contenu du hero ---------- */
.lu-hero-panel {
	background: rgba(16, 24, 32, 0.38);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 22px;
	padding: 40px 44px;
}
@media (max-width: 781px) {
	.lu-hero-panel { padding: 28px 24px; }
}

/* ---------- Boutons secondaires du hero (fantômes, fond translucide) ---------- */
.lu-btn-hero .wp-block-button__link {
	background: rgba(255, 255, 255, 0.08);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	border-radius: 36px;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 13px 26px;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.lu-btn-hero .wp-block-button__link:hover,
.lu-btn-hero .wp-block-button__link:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
	color: #ffffff;
}
/* ---------- Bouton principal du hero (« Nous rejoindre ! ») ---------- */
.lu-btn-hero.lu-btn-plein .wp-block-button__link {
	background-image: linear-gradient(92deg, #f5620f 0%, #f79007 100%);
	border: 1.5px solid transparent;
	box-shadow: 0 6px 22px rgba(226, 91, 27, 0.5);
	font-size: 13px;
	padding: 14px 30px;
}
.lu-btn-hero.lu-btn-plein .wp-block-button__link:hover,
.lu-btn-hero.lu-btn-plein .wp-block-button__link:focus {
	background-image: linear-gradient(92deg, #ff7a1f 0%, #ffa42a 100%);
	box-shadow: 0 8px 26px rgba(226, 91, 27, 0.6);
	border-color: transparent;
}
/* Variante blanche pour les bandeaux orange */
.lu-btn-blanc .wp-block-button__link {
	background: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 36px;
	color: #e25b1b;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 12px 26px;
}
.lu-btn-blanc .wp-block-button__link:hover {
	background: #fff4e5;
	color: #c94d14;
}

/* ---------- Boutons du pied de page (petites pilules discrètes) ---------- */
.lu-btn-footer .wp-block-button__link {
	background: transparent;
	border: 1px solid #fdfeff;
	border-radius: 5px;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 8px 16px;
}
.lu-btn-footer .wp-block-button__link:hover {
	background-color: #026e9f;
	border-color: #d6d8d8;
	color: #ffffff;
}

/* ---------- Titre du hero ---------- */
.lu-hero-title {
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	font-weight: 600;
}

/* ---------- Cartes qui chevauchent le hero ---------- */
.lu-overlap {
	margin-top: -90px !important;
	position: relative;
	z-index: 10;
}
.lu-card {
	background: #ffffff;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
	text-align: center;
	border-radius: 16px;
}
.lu-card h5 {
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	font-size: 1rem;
}
.lu-icon svg {
	width: 40px;
	height: 40px;
	fill: #000000;
	display: inline-block;
}

/* ---------- Séparateurs SVG (formes orange / rouge du site d'origine) ---------- */
.lu-sep {
	margin: 0 !important;
	line-height: 0;
}
.lu-sep svg {
	display: block;
	width: 100%;
	height: 100px;
}
.lu-sep--flip svg {
	transform: rotateX(180deg);
}

/* Coin orange arrondi en haut à droite de la section « association de jeux » */
.lu-has-corner {
	position: relative;
	overflow: hidden;
}
.lu-corner-tr {
	position: absolute;
	top: -1px;
	right: 0;
	height: 300px;
	width: auto;
	line-height: 0;
	z-index: 0;
}
.lu-corner-tr svg {
	height: 300px;
	width: auto;
	display: block;
}
.lu-has-corner > *:not(.lu-corner-wrap) {
	position: relative;
	z-index: 1;
}
/* Écrans étroits (colonnes empilées) : le coin réduit ne passe plus
   derrière le titre, qui redevient lisible. */
@media (max-width: 781px) {
	.lu-corner-tr,
	.lu-corner-tr svg {
		height: 96px;
	}
}

/* ---------- Carte photo de l'équipe (ombre portée) ---------- */
.lu-card-img img {
	box-shadow: 0 10px 30px 2px rgba(0, 0, 0, 0.15);
}

/* ---------- Carte Google Maps ---------- */
.lu-map iframe {
	width: 100%;
	height: 420px;
	border: 0;
	display: block;
}

/* ---------- Logos partenaires ---------- */
.lu-partenaires img {
	max-height: 110px;
	width: auto;
	object-fit: contain;
}

/* ---------- Vidéos événements ---------- */
/* ================================================================
   Proposition moderne (page /proposition-moderne/) — dans la DA
   du site : fond clair, orange chaleureux, et cartes d'événements
   en carrousel qui défile tout seul.
   ================================================================ */

/* Carrousel : défilement auto (JS lifeup.js) + manipulable au trackpad/doigt.
   La barre de défilement est masquée mais le geste horizontal natif fonctionne. */
.lu-carousel {
	overflow-x: auto;
	position: relative;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}
.lu-carousel::-webkit-scrollbar {
	display: none;
}
.lu-carousel-track {
	display: flex;
	width: max-content;
}

/* Cartes d'événement (claires, dans l'esprit des cartes du site) */
.lu-ev-card {
	width: 290px;
	flex-shrink: 0;
	margin-right: 24px;
	scroll-snap-align: start;
	background: #ffffff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lu-ev-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.lu-ev-card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.lu-ev-card .lu-ev-corps {
	padding: 16px 18px 20px;
}
.lu-ev-chip {
	display: inline-block;
	background: #fff4e5;
	border: 1px solid rgba(247, 144, 7, 0.45);
	border-radius: 6px;
	color: #e25b1b;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 3px 10px;
	margin-bottom: 10px;
}
.lu-ev-card h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #1d3538;
}
.lu-ev-card .lu-ev-lieu {
	margin: 0;
	font-size: 13px;
	color: #49858d;
}

/* Badges « ce qu'on y joue » */
.lu-tag {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	border-radius: 999px;
	padding: 8px 18px;
	margin: 0 8px 10px 0;
	background: #ffffff;
	border: 1px solid #d8e4e9;
	color: #49858d;
}
.lu-tag--jv {
	border-color: rgba(3, 169, 244, 0.45);
	color: #0288c7;
	background: #f0faff;
}
.lu-tag--js {
	border-color: rgba(247, 144, 7, 0.45);
	color: #e25b1b;
	background: #fff8ef;
}

/* Panneau « infos pratiques » du local */
.lu-infos-card {
	background: #ffffff;
	border-radius: 14px;
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}
.lu-infos-card p {
	margin: 0 0 14px;
	color: #1d3538;
}
.lu-infos-card .lu-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #f79007;
}
.lu-infos-card a {
	color: #0288c7;
}

/* ================================================================
   Évolution v4 — page d'accueil repensée (DA claire, sans néon)
   ================================================================ */

/* Étiquette de section */
.lu-eyebrow {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	color: #f79007;
	margin-bottom: 4px;
}
.lu-eyebrow--blanc {
	color: rgba(255, 255, 255, 0.9);
}

/* Pastilles d'icônes des 3 cartes */
.lu-icon-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
}
.lu-icon-circle svg {
	width: 32px;
	height: 32px;
	display: block;
}
.lu-ic-bleu { background: #e7f6fe; }
.lu-ic-bleu svg { fill: #0288c7; }
.lu-ic-orange { background: #fff4e5; }
.lu-ic-orange svg { fill: #e25b1b; }
.lu-ic-vert { background: #e5f9f2; }
.lu-ic-vert svg { fill: #00a374; }

/* Statistiques de l'association */
.lu-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 44px;
	margin-top: 26px;
}
.lu-stat strong {
	display: block;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	color: #1d3538;
}
.lu-stat span {
	font-size: 13px;
	color: #49858d;
}

/* Photos arrondies */
.lu-round img {
	border-radius: 16px;
}
.lu-gal-ronde .wp-block-image img {
	border-radius: 12px;
}

/* Liens secondaires du hero */
.lu-hero-links {
	font-size: 13px;
}
.lu-hero-links a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}
.lu-hero-links a:hover {
	text-decoration-color: #ffffff;
}

/* Cartes des logos partenaires */
.lu-partner-card {
	background: #ffffff;
	border: 1px solid #e3edf2;
	border-radius: 14px;
	width: 186px;
	height: 112px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lu-partner-card img {
	max-height: 72px;
	max-width: 142px;
	width: auto;
	object-fit: contain;
	filter: grayscale(30%);
	opacity: 0.9;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.lu-partner-card:hover {
	border-color: rgba(247, 144, 7, 0.5);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}
.lu-partner-card:hover img {
	filter: none;
	opacity: 1;
}

/* ================================================================
   Évolution v5 — horizontalité : bandeaux photos défilants
   ================================================================ */
.lu-strip {
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.lu-strip::-webkit-scrollbar {
	display: none;
}
.lu-strip + .lu-strip {
	margin-top: 16px;
}
.lu-strip-track {
	display: flex;
	width: max-content;
}
.lu-strip img {
	height: 260px;
	width: auto;
	display: block;
	border-radius: 12px;
	margin-right: 16px;
}
@media (max-width: 781px) {
	.lu-strip img { height: 180px; }
}


/* ================================================================
   Bouton avec infobulle (« Bulletin d'adhésion » du hero)
   ================================================================ */
.lu-tooltip-wrap {
	position: relative;
	display: inline-block;
}
.lu-btn-tooltip {
	background: transparent;
	border: 2px solid #ffffff;
	border-radius: 36px;
	color: #ffffff;
	text-transform: uppercase;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 12px 24px;
	cursor: pointer;
	transition: background 0.25s ease;
}
.lu-btn-tooltip:hover,
.lu-btn-tooltip:focus-visible {
	background-image: linear-gradient(85deg, #e25b1b 0%, #eebb2a 100%);
}
.lu-tooltip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background: #1d3538;
	color: #ffffff;
	font-size: 13px;
	line-height: 1.45;
	text-transform: none;
	letter-spacing: 0;
	padding: 10px 14px;
	border-radius: 10px;
	width: max-content;
	max-width: 270px;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	z-index: 30;
}
.lu-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #1d3538;
}
.lu-tooltip-wrap:hover .lu-tooltip,
.lu-tooltip-wrap.is-open .lu-tooltip,
.lu-btn-tooltip:focus-visible + .lu-tooltip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ================================================================
   Carrousel à flèches + repères chronologiques
   ================================================================ */
.lu-carousel-outer {
	position: relative;
}
.lu-car-arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid #e3edf2;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	color: #1d3538;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0 3px;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.lu-car-arrow:hover {
	color: #e25b1b;
	border-color: rgba(247, 144, 7, 0.6);
}
.lu-car-prev { left: -14px; }
.lu-car-next { right: -14px; }

/* Pastille des événements terminés */
.lu-ev-chip--past {
	background: #eef2f4;
	border-color: #c9d6dc;
	color: #6b8791;
}

/* Rangées de logos (partenaires / institutions) — affichage simple */
.lu-logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 48px;
}
.lu-logo-row img {
	max-height: 92px;
	max-width: 150px;
	width: auto;
	object-fit: contain;
}

/* ================================================================
   Ajustements : petits boutons du hero, flèches du carrousel,
   médias arrondis
   ================================================================ */
/* Petits boutons sous la rangée principale du hero */
.lu-btn-petit {
	display: inline-block;
	background: transparent;
	border: 1px solid #ffffff;
	border-radius: 36px;
	color: #ffffff !important;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	padding: 8px 16px;
	text-decoration: none;
	transition: background 0.25s ease;
}
.lu-btn-petit:hover {
	background-image: linear-gradient(85deg, #e25b1b 0%, #eebb2a 100%);
}
.lu-tooltip-wrap--petit .lu-btn-tooltip {
	font-size: 11px;
	padding: 8px 16px;
	border-width: 1px;
}

/* Flèches : à l'intérieur du bloc sur fenêtres étroites, à cheval sur les bords
   uniquement quand il y a la place */
.lu-car-prev { left: 8px; }
.lu-car-next { right: 8px; }
@media (min-width: 1760px) {
	.lu-car-prev { left: -14px; }
	.lu-car-next { right: -14px; }
}

/* Vidéos et photos de la page événements : coins arrondis */
/* ================================================================
   Barre du haut : prochain rendez-vous en accent orange
   ================================================================ */
.lu-topbar-event {
	color: #c4d2d8;
}
.lu-topbar-event a {
	color: #ffb765;
	font-weight: 600;
	text-decoration: none;
}
.lu-topbar-event a:hover {
	color: #ffd096;
	text-decoration: underline;
}
@media (max-width: 900px) {
	.lu-topbar-event {
		display: none;
	}
}
/* Centrage réel de l'événement : les deux côtés (contact / réseaux) prennent
   la même largeur flexible, sinon space-between décale le milieu vers la
   droite (le bloc contact est plus large que les icônes). Appliqué seulement
   quand la place le permet, pour ne pas faire replier le bloc contact. */
@media (min-width: 1100px) {
	.lu-topbar > p:first-child,
	.lu-topbar > .wp-block-social-links {
		flex: 1 1 0;
	}
	.lu-topbar > .wp-block-social-links {
		justify-content: flex-end;
	}
	.lu-topbar-event {
		text-align: center;
	}
}

/* ================================================================
   Passe « éditeur visuel » : variantes natives des briques HTML
   ================================================================ */
/* Liens tertiaires du hero (Bulletin d'adhésion, La boutique) : discrets */
.lu-btn-hero.lu-btn-hero--petit .wp-block-button__link {
	background: transparent;
	border: none;
	border-radius: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: none;
	padding: 4px 2px;
	box-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.lu-btn-hero.lu-btn-hero--petit .wp-block-button__link:hover,
.lu-btn-hero.lu-btn-hero--petit .wp-block-button__link:focus {
	background: transparent;
	color: #ffffff;
	border-bottom-color: #ffb765;
	box-shadow: none;
}
/* Icônes des cartes en blocs image natifs */
figure.lu-icon-circle {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px;
}
figure.lu-icon-circle img {
	width: 32px;
	height: 32px;
}
/* Statistiques en blocs natifs */
.lu-stat p { margin: 0; }
.lu-stat .lu-stat-num {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1;
	color: #1d3538;
}
.lu-stat .lu-stat-lab {
	font-size: 13px;
	color: #49858d;
}
/* Rangées de logos partenaires : tuiles blanches uniformes */
.lu-logos {
	gap: 22px !important;
}
.lu-logos .wp-block-image {
	margin: 0;
	background: #ffffff;
	border: 1px solid #e3edf2;
	border-radius: 16px;
	width: 210px;
	height: 118px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 24px;
	box-shadow: 0 2px 10px rgba(29, 53, 56, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.lu-logos .wp-block-image:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 26px rgba(29, 53, 56, 0.12);
	border-color: rgba(247, 144, 7, 0.5);
}
.lu-logos .wp-block-image a,
.lu-logos .wp-block-image figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.lu-logos img {
	max-height: 74px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}
@media (max-width: 600px) {
	.lu-logos { gap: 12px !important; }
	.lu-logos .wp-block-image {
		box-sizing: border-box;
		width: calc(50% - 6px);
		height: 96px;
		padding: 12px 14px;
	}
}
/* Le bouton-guide (infobulle générée par lifeup.js) */
.wp-block-button.lu-tooltip-wrap { position: relative; display: inline-block; }

/* Mosaïque compacte « Nous savons rassembler les joueurs »
   (page Nos évènements) : grille 4 colonnes, vidéos et photos
   recadrées à la même hauteur. */
.lu-mosaique {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 230px;
	gap: 12px;
}
.lu-mosaique video,
.lu-mosaique img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}
.lu-mos-tall { grid-row: span 2; }
.lu-mos-wide { grid-column: span 2; }
@media (max-width: 781px) {
	.lu-mosaique {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 150px;
		grid-auto-flow: dense;
	}
}