/*
Theme Name: STCA Management Sportif
Description: Thème premium sur mesure pour STCA, agence de management sportif à Grand-Bassam. Direction artistique « le terrain » : lignes de craie, pelouse tondue, typographie de maillot. Joueurs, galerie photos et vidéos, actualités, recrutement, contact et chat WhatsApp.
Author: Kairos Digital
Version: 2.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: stca
*/

/* ==========================================================================
   1. Polices (intégrées au thème, aucun service extérieur)
   ========================================================================== */

@font-face {
	font-family: "Big Shoulders Display";
	src: url("assets/fonts/big-shoulders.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("assets/fonts/hanken-grotesk.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("assets/fonts/hanken-grotesk-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   2. Jetons de design
   ========================================================================== */

:root {
	/* Couleurs */
	--encre: #06121C;        /* nuit de stade */
	--encre-2: #0C1E2C;
	--encre-3: #1A3142;
	--pelouse: #0E3B2A;      /* pelouse profonde */
	--pelouse-2: #134A35;
	--vert: #1E8E4E;         /* action */
	--or: #E9B10A;           /* laiton, trophée */
	--or-clair: #F6D46A;
	--craie: #EEF2EE;        /* lignes du terrain */
	--blanc: #FFFFFF;
	--brume: #A3B4B1;        /* texte doux sur fond sombre */
	--texte: #06121C;
	--texte-2: #3B4945;
	--doux: #5E6D69;
	--filet: rgba(6, 18, 28, .12);
	--filet-clair: rgba(238, 242, 238, .16);

	/* Typographie */
	--f-titre: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
	--f-texte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--t-xs: .8125rem;   /* 13 */
	--t-s: .9375rem;    /* 15 */
	--t-m: 1.0625rem;   /* 17 */
	--t-l: 1.3125rem;   /* 21 */
	--t-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
	--t-2xl: clamp(2.4rem, 1.6rem + 3vw, 4rem);
	--t-3xl: clamp(3rem, 1.8rem + 5vw, 6.25rem);
	--t-hero: clamp(3.4rem, 1.4rem + 8.2vw, 9.5rem);

	/* Espacements (échelle de 8) */
	--e-1: .5rem;
	--e-2: 1rem;
	--e-3: 1.5rem;
	--e-4: 2rem;
	--e-5: 3rem;
	--e-6: 4rem;
	--e-section: clamp(5rem, 3rem + 7vw, 10rem);
	--gouttiere: clamp(1.25rem, .6rem + 3vw, 3.5rem);
	--max: 1320px;

	/* Formes */
	--r-s: 6px;
	--r-m: 14px;
	--r-l: 28px;

	/* Mouvement */
	--courbe: cubic-bezier(.22, 1, .36, 1);
	--courbe-in: cubic-bezier(.65, 0, .35, 1);
	--d-court: .25s;
	--d-moyen: .6s;
	--d-long: 1.1s;

	/* Textures */
	--tonte: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 96px, transparent 96px 192px);
	--grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ==========================================================================
   3. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--craie);
	color: var(--texte);
	font-family: var(--f-texte);
	font-size: var(--t-m);
	line-height: 1.65;
	font-feature-settings: "ss01", "kern";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, video, iframe, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
::selection { background: var(--or); color: var(--encre); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; clip: auto; background: var(--or); color: var(--encre); padding: 12px 18px; border-radius: var(--r-s); font-weight: 700; }

#contenu { overflow-x: clip; }
.cadre { width: 100%; max-width: calc(var(--max) + var(--gouttiere) * 2); margin: 0 auto; padding: 0 var(--gouttiere); }
.sombre { background: var(--encre); color: var(--craie); }
.pelouse { background-color: var(--pelouse); background-image: var(--grain), var(--tonte); color: var(--craie); }
.sombre.texture { background-image: var(--grain), var(--tonte); }

/* Typographie de titres */
.display {
	font-family: var(--f-titre);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.005em;
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
}
.titre-section { font-size: var(--t-3xl); }
.titre-moyen { font-size: var(--t-2xl); }
.chapeau { font-size: var(--t-l); line-height: 1.5; color: var(--texte-2); max-width: 34em; }
.sombre .chapeau, .pelouse .chapeau { color: var(--brume); }
.repere { display: inline-flex; align-items: center; gap: .75em; margin: 0 0 var(--e-3); font-size: var(--t-s); font-weight: 600; color: var(--vert); }
.repere::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.sombre .repere, .pelouse .repere { color: var(--or); }

/* Contour (chiffres et mots en creux) */
.creux { color: transparent; -webkit-text-stroke: 1.5px var(--trait, var(--encre)); }

/* ==========================================================================
   4. Boutons et liens
   ========================================================================== */

.btn {
	--fond: var(--or);
	--encre-btn: var(--encre);
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .9em;
	min-height: 54px;
	padding: .5em .6em .5em 1.6em;
	border: 0;
	border-radius: 999px;
	background: var(--fond);
	color: var(--encre-btn);
	font: 700 var(--t-s)/1.2 var(--f-texte);
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	transition: transform var(--d-court) var(--courbe), color var(--d-moyen) var(--courbe);
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--encre-btn);
	border-radius: inherit;
	transform: translateY(101%);
	transition: transform var(--d-moyen) var(--courbe);
}
.btn:hover { color: var(--fond); }
.btn:hover::before { transform: translateY(0); }
.btn__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--encre-btn);
	color: var(--fond);
	overflow: hidden;
	transition: background var(--d-moyen) var(--courbe), color var(--d-moyen) var(--courbe);
}
.btn:hover .btn__icone { background: var(--fond); color: var(--encre-btn); }
.btn__icone svg { transition: transform var(--d-moyen) var(--courbe); }
.btn:hover .btn__icone svg { animation: fleche .6s var(--courbe); }
@keyframes fleche { 0% { transform: translateX(0); } 45% { transform: translateX(140%); } 46% { transform: translateX(-140%); } 100% { transform: translateX(0); } }
.btn:active { transform: scale(.97); }
.btn--clair { --fond: var(--craie); --encre-btn: var(--encre); }
.btn--sombre { --fond: var(--encre); --encre-btn: var(--or); }
.btn--vert { --fond: var(--vert); --encre-btn: var(--blanc); }
.btn--simple { padding: .5em 1.6em; }

.lien {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .4em 0;
	font-weight: 700;
	text-decoration: none;
	color: inherit;
}
.lien::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .15em;
	height: 2px;
	background: currentColor;
	transform: scaleX(.25);
	transform-origin: left;
	transition: transform var(--d-moyen) var(--courbe);
}
.lien:hover::after { transform: scaleX(1); }
.lien svg { transition: transform var(--d-moyen) var(--courbe); }
.lien:hover svg { transform: translateX(4px); }

/* ==========================================================================
   5. En-tête
   ========================================================================== */

.entete {
	position: fixed;
	inset: 0 0 auto;
	z-index: 80;
	color: var(--craie);
	transition: transform .5s var(--courbe), background .4s ease, box-shadow .4s ease;
}
.admin-bar .entete { top: 32px; }
.entete.est-defile { background: rgba(6, 18, 28, .82); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 var(--filet-clair); }
.entete.est-cache { transform: translateY(-100%); }
.entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 84px; }
.entete__progression { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--or); transform: scaleX(0); transform-origin: left; }

.marque { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.marque svg, .marque img { width: auto; height: 46px; transition: transform var(--d-moyen) var(--courbe); }
.marque:hover svg { transform: rotate(-6deg) scale(1.04); }
.marque__nom { display: block; font-family: var(--f-titre); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: .04em; }
.marque__base { display: block; font-size: .75rem; color: var(--brume); letter-spacing: .02em; }

.nav ul { display: flex; gap: clamp(1rem, 1.6vw, 2rem); margin: 0; padding: 0; list-style: none; }
.nav a { position: relative; display: block; padding: .6em 0; color: inherit; font-size: var(--t-s); font-weight: 600; text-decoration: none; opacity: .78; transition: opacity var(--d-court); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25em; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: right; transition: transform var(--d-moyen) var(--courbe); }
.nav a:hover, .nav .current-menu-item > a, .nav .current_page_item > a, .nav .current-menu-ancestor > a { opacity: 1; }
.nav a:hover::after, .nav .current-menu-item > a::after, .nav .current_page_item > a::after, .nav .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.nav .sub-menu { display: none; }
.entete__actions { display: flex; align-items: center; gap: .75rem; }
.entete__actions .btn { min-height: 48px; padding-left: 1.3em; }
.entete__actions .btn .btn__icone { width: 34px; height: 34px; }
.burger { display: none; position: relative; width: 50px; height: 50px; border: 1px solid var(--filet-clair); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.burger span { position: absolute; left: 15px; right: 15px; height: 2px; background: currentColor; transition: transform var(--d-moyen) var(--courbe), opacity var(--d-court); }
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 24px; }
.burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1180px) {
	.burger { display: inline-block; }
	.entete__actions .btn-wa-texte { display: none; }
	.entete__actions .btn { padding: 0; min-height: 50px; width: 50px; justify-content: center; }
	.entete__actions .btn .btn__icone { background: transparent; color: inherit; }
	.nav {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 110px var(--gouttiere) var(--e-5);
		background-color: var(--encre);
		background-image: var(--grain), var(--tonte);
		clip-path: circle(0 at calc(100% - 50px) 42px);
		visibility: hidden;
		transition: clip-path .8s var(--courbe-in), visibility 0s .8s;
	}
	.nav.est-ouvert { clip-path: circle(150% at calc(100% - 50px) 42px); visibility: visible; transition: clip-path .8s var(--courbe-in), visibility 0s; }
	.nav ul { flex-direction: column; gap: 0; }
	.nav li { overflow: hidden; border-bottom: 1px solid var(--filet-clair); }
	.nav a { padding: .35em 0; font-family: var(--f-titre); font-weight: 800; font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.05; text-transform: uppercase; opacity: 1; transform: translateY(105%); transition: transform .7s var(--courbe), color var(--d-court); }
	.nav a::after { display: none; }
	.nav a:hover, .nav .current-menu-item > a { color: var(--or); }
	.nav.est-ouvert a { transform: none; }
	.nav.est-ouvert li:nth-child(2) a { transition-delay: .05s; }
	.nav.est-ouvert li:nth-child(3) a { transition-delay: .1s; }
	.nav.est-ouvert li:nth-child(4) a { transition-delay: .15s; }
	.nav.est-ouvert li:nth-child(5) a { transition-delay: .2s; }
	.nav.est-ouvert li:nth-child(6) a { transition-delay: .25s; }
	.nav.est-ouvert li:nth-child(7) a { transition-delay: .3s; }
	.nav.est-ouvert li:nth-child(8) a { transition-delay: .35s; }
}
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* ==========================================================================
   6. Héros (accueil)
   ========================================================================== */

.hero {
	position: relative;
	min-height: max(100svh, 680px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background-color: var(--encre);
	background-image: var(--grain), var(--tonte);
	color: var(--craie);
}
.hero__terrain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--craie); opacity: .14; }
.hero__grille { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); align-items: end; padding-top: 140px; padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero__texte { grid-column: 1 / span 8; position: relative; z-index: 2; }
.hero__lieu { margin: 0 0 var(--e-4); font-size: var(--t-s); color: var(--brume); }
.hero__lieu strong { color: var(--craie); font-weight: 600; }
.hero h1 { font-size: var(--t-hero); margin-bottom: var(--e-4); }
.hero h1 .ligne { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .ligne > span { display: inline-block; }
.hero h1 .ligne--or { color: var(--or); }
.hero__bas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-4) var(--e-5); }
.hero__accroche { max-width: 30em; margin: 0; color: var(--brume); font-size: var(--t-l); line-height: 1.5; }
.hero__visuel { grid-column: 9 / span 4; grid-row: 1; align-self: stretch; position: relative; z-index: 1; display: flex; align-items: flex-end; }
.hero__photo { position: relative; width: 100%; aspect-ratio: 3 / 4.3; border-radius: 999px 999px var(--r-l) var(--r-l); overflow: hidden; background: var(--encre-2); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.hero__photo img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.hero__photo--logo { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, var(--pelouse-2), var(--encre-2) 70%); }
.hero__photo--logo svg { width: 58%; height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.45)); }
.hero__defiler { position: absolute; left: 50%; bottom: 22px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--brume); font-size: var(--t-xs); text-decoration: none; transform: translateX(-50%); }
.hero__defiler i { position: relative; display: block; width: 1px; height: 42px; overflow: hidden; background: var(--filet-clair); }
.hero__defiler i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--or); animation: descente 2.2s var(--courbe-in) infinite; }
@keyframes descente { to { top: 100%; } }

@media (max-width: 960px) {
	.hero__texte { grid-column: 1 / -1; }
	.hero__visuel { grid-column: 7 / -1; grid-row: auto; margin-top: var(--e-5); order: -1; justify-self: end; width: 100%; max-width: 300px; }
	.hero__grille { padding-top: 120px; }
	.hero__defiler { display: none; }
}
@media (max-width: 600px) {
	.hero__visuel { grid-column: 4 / -1; max-width: 230px; margin-top: 0; margin-bottom: var(--e-4); }
}

/* Bandeau de page intérieure */
.bandeau-page { position: relative; overflow: hidden; padding: 180px 0 var(--e-6); background-color: var(--encre); background-image: var(--grain), var(--tonte); color: var(--craie); }
.bandeau-page__terrain { position: absolute; right: -6%; top: 50%; width: min(60vw, 720px); transform: translateY(-50%); color: var(--craie); opacity: .1; pointer-events: none; }
.bandeau-page h1 { position: relative; font-size: var(--t-3xl); max-width: 14ch; }
.bandeau-page p { position: relative; max-width: 36em; margin: var(--e-3) 0 0; color: var(--brume); font-size: var(--t-l); line-height: 1.5; }
.fil { position: relative; display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 var(--e-4); padding: 0; list-style: none; font-size: var(--t-s); color: var(--brume); }
.fil a { color: var(--craie); text-decoration: none; }
.fil a:hover { color: var(--or); }
.fil li + li::before { content: "/"; margin-right: .5em; opacity: .5; }

/* ==========================================================================
   7. Sections de l'accueil
   ========================================================================== */

.section { position: relative; padding: var(--e-section) 0; }
.entete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.entete-section > div { max-width: 46rem; }
.entete-section .chapeau { margin: var(--e-3) 0 0; }

/* L'agence : composition éditoriale asymétrique */
.agence { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); row-gap: var(--e-5); }
.agence__titre { grid-column: 1 / span 9; font-size: var(--t-3xl); }
.agence__visuel { grid-column: 1 / span 5; position: relative; }
.agence__photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-m); overflow: hidden; background: #DCE3DE; }
.agence__photo img { width: 100%; height: 100%; object-fit: cover; }
.agence__photo .vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--doux); }
.agence__surface { position: absolute; top: -34px; left: 38%; width: 82%; height: auto; aspect-ratio: 4 / 3; color: var(--vert); pointer-events: none; z-index: 0; }
.agence__photo { z-index: 1; }
.agence__corps { grid-column: 8 / span 5; align-self: center; }
.agence__corps p { font-size: var(--t-l); line-height: 1.6; color: var(--texte-2); }
.agence__signature { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--filet); }
.agence__signature svg { flex: none; }
.agence__signature span { font-size: var(--t-s); color: var(--doux); }
@media (max-width: 860px) {
	.agence__titre, .agence__visuel, .agence__corps { grid-column: 1 / -1; }
	.agence__visuel { max-width: 460px; }
}

/* Services : tableau tactique */
.services { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-3); }
.services__intro { grid-column: 1 / span 5; }
.services__intro > div { position: sticky; top: 130px; }
.services__liste { grid-column: 7 / -1; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet-clair); }
.service { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--e-1) var(--e-3); padding: var(--e-4) var(--e-2) var(--e-4) 0; border-bottom: 1px solid var(--filet-clair); }
.service::before { content: ""; position: absolute; inset: 0 -1rem; z-index: 0; background: rgba(238,242,238,.05); border-radius: var(--r-m); opacity: 0; transform: scaleY(.6); transition: opacity var(--d-moyen) var(--courbe), transform var(--d-moyen) var(--courbe); }
.service:hover::before { opacity: 1; transform: none; }
.service > * { position: relative; z-index: 1; }
.service__icone { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid var(--filet-clair); border-radius: 50%; color: var(--or); transition: transform var(--d-moyen) var(--courbe), background var(--d-moyen) var(--courbe), color var(--d-moyen); }
.service:hover .service__icone { background: var(--or); color: var(--encre); transform: rotate(-12deg); }
.service h3 { font-family: var(--f-titre); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1; text-transform: uppercase; }
.service p { margin: 0; max-width: 32em; color: var(--brume); }
.service__trace { position: absolute; right: 0; top: var(--e-4); width: 90px; height: 40px; color: var(--or); opacity: 0; transition: opacity var(--d-moyen); }
.service:hover .service__trace { opacity: 1; }
.service__trace path { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset .9s var(--courbe); }
.service:hover .service__trace path { stroke-dashoffset: 0; }
@media (max-width: 860px) {
	.services__intro, .services__liste { grid-column: 1 / -1; }
	.services__intro > div { position: static; margin-bottom: var(--e-5); }
	.service__trace { display: none; }
}

/* Joueurs : défilement horizontal piloté par le scroll */
.joueurs { overflow: clip; }
.joueurs__piste-zone { position: relative; }
.joueurs__collant { position: relative; }
.joueurs__piste { display: flex; gap: var(--e-3); padding: 0 var(--gouttiere) var(--e-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.joueurs__piste::-webkit-scrollbar { display: none; }
.est-epingle .joueurs__collant { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.est-epingle .joueurs__piste { overflow: visible; will-change: transform; }
.est-epingle .joueur { flex-basis: min(26vw, 360px, calc((100vh - 340px) * .75)); }
.est-epingle .joueur--fin { aspect-ratio: auto; height: min(calc(100vh - 340px), 480px); }

.joueur {
	position: relative;
	flex: 0 0 clamp(260px, 26vw, 360px);
	scroll-snap-align: start;
	color: var(--craie);
	text-decoration: none;
}
.joueur__photo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden; background: var(--encre-2); }
.joueur__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transform: scale(1.02); transition: filter .8s var(--courbe), transform 1.2s var(--courbe); }
.joueur:hover .joueur__photo img, .joueur:focus-visible .joueur__photo img { filter: none; transform: scale(1.08); }
.joueur__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6,18,28,.85)); }
.joueur__numero { position: absolute; right: .12em; bottom: -.12em; z-index: 1; font-family: var(--f-titre); font-weight: 900; font-size: clamp(7rem, 11vw, 10rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--or); transition: color .6s var(--courbe), transform .8s var(--courbe); }
.joueur:hover .joueur__numero { color: var(--or); transform: translateY(-6px); }
.joueur__infos { padding-top: var(--e-3); }
.joueur__nom { display: block; font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 800; line-height: 1; text-transform: uppercase; }
.joueur__poste { display: block; margin-top: .4em; color: var(--brume); font-size: var(--t-s); }
.joueur--fin { display: flex; flex-direction: column; justify-content: center; gap: var(--e-3); padding: var(--e-4); border: 1px dashed var(--filet-clair); border-radius: var(--r-m); aspect-ratio: 3 / 4; height: auto; align-self: flex-start; }
.joueur--fin p { margin: 0; font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 800; text-transform: uppercase; line-height: 1; }

.joueurs__tete { padding-top: var(--e-section); }
.joueurs__fin { height: var(--e-section); }
.est-epingle .joueurs__tete { padding-top: 96px; margin-bottom: var(--e-5); }
.est-epingle .joueurs__fin { height: 0; }
.joueurs__compteur { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--gouttiere) 0; color: var(--brume); font-size: var(--t-s); }
.joueurs__compteur i { position: relative; flex: 1; max-width: 240px; height: 2px; background: var(--filet-clair); }
.joueurs__compteur i b { position: absolute; inset: 0; background: var(--or); transform: scaleX(0); transform-origin: left; }

/* Galerie : composition en mosaïque */
.mosaique { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 220px); gap: var(--e-2); }
.mosaique > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
.mosaique > :nth-child(2) { grid-column: span 3; }
.mosaique > :nth-child(3) { grid-column: span 2; }
.mosaique > :nth-child(4) { grid-column: span 1; }
.mosaique > :nth-child(5) { grid-column: span 3; }
.mosaique > :nth-child(6) { grid-column: span 3; }
@media (max-width: 760px) {
	.mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
	.mosaique > * { grid-column: span 1 !important; grid-row: span 1 !important; }
	.mosaique > :nth-child(1) { grid-column: span 2 !important; grid-row: span 2 !important; }
}

.media {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 150px;
	padding: 0;
	border: 0;
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--encre-2);
	color: var(--craie);
	font: inherit;
	text-align: left;
	cursor: zoom-in;
}
.media[data-type="iframe"], .media[data-type="fichier"] { cursor: pointer; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe), filter .6s; }
.media:hover img, .media:focus-visible img { transform: scale(1.06); }
.media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,18,28,.78)); opacity: .7; transition: opacity var(--d-moyen); }
.media:hover::after { opacity: 1; }
.media__lecture { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(238,242,238,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(238,242,238,.35); color: var(--craie); transform: translate(-50%, -50%); transition: transform var(--d-moyen) var(--courbe), background var(--d-moyen); }
.media:hover .media__lecture { background: var(--or); color: var(--encre); border-color: var(--or); transform: translate(-50%, -50%) scale(1.08); }
.media__lecture::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(238,242,238,.5); animation: onde 2.4s ease-out infinite; }
@keyframes onde { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.media__legende { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-2); z-index: 2; font-size: var(--t-s); font-weight: 600; transform: translateY(8px); opacity: .9; transition: transform var(--d-moyen) var(--courbe), opacity var(--d-moyen); }
.media:hover .media__legende { transform: none; opacity: 1; }
.media__type { position: absolute; left: var(--e-2); top: var(--e-2); z-index: 2; padding: .25em .7em; border-radius: 999px; background: var(--or); color: var(--encre); font-size: var(--t-xs); font-weight: 700; }
.media .vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brume); }

/* Actualités : une à la une + liste */
.actus { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); }
.actu-une { grid-column: 1 / span 7; text-decoration: none; color: inherit; }
.actu-une__image { aspect-ratio: 16 / 11; border-radius: var(--r-m); overflow: hidden; background: #DCE3DE; }
.actu-une__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.actu-une:hover .actu-une__image img { transform: scale(1.04); }
.actu-une h3 { margin-top: var(--e-3); font-family: var(--f-titre); font-size: var(--t-2xl); line-height: .95; text-transform: uppercase; }
.actu-meta { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); color: var(--doux); font-size: var(--t-s); }
.actu-meta .cat { color: var(--vert); font-weight: 700; }
.actus__liste { grid-column: 9 / -1; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.actu-ligne { display: grid; grid-template-columns: 108px 1fr; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--filet); color: inherit; text-decoration: none; }
.actu-ligne__image { aspect-ratio: 1; border-radius: var(--r-s); overflow: hidden; background: #DCE3DE; }
.actu-ligne__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--courbe); }
.actu-ligne:hover .actu-ligne__image img { transform: scale(1.08); }
.actu-ligne h3 { font-size: var(--t-l); font-weight: 700; line-height: 1.3; transition: color var(--d-court); }
.actu-ligne:hover h3 { color: var(--vert); }
.actu-ligne .actu-meta { margin-top: .4em; }
@media (max-width: 960px) { .actu-une, .actus__liste { grid-column: 1 / -1; } }

/* Grille d'articles (page Actualités) */
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--e-6) var(--e-4); }
.article-carte { color: inherit; text-decoration: none; }
.article-carte__image { aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: #DCE3DE; }
.article-carte__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--courbe); }
.article-carte:hover .article-carte__image img { transform: scale(1.05); }
.article-carte h3 { margin-top: var(--e-3); font-size: var(--t-xl); font-weight: 700; line-height: 1.2; }
.article-carte p { margin: var(--e-1) 0 0; color: var(--texte-2); font-size: var(--t-s); }
.article-carte .vide, .actu-une .vide, .actu-ligne .vide { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--doux); }

/* Recrutement : bande or */
.appel { position: relative; overflow: hidden; padding: var(--e-section) 0; background: var(--or); color: var(--encre); }
.appel__terrain { position: absolute; inset: auto -10% -45% auto; width: min(90vw, 1100px); color: var(--encre); opacity: .12; pointer-events: none; }
.appel__titre { position: relative; font-size: var(--t-hero); line-height: .96; max-width: 11ch; }
.appel__titre .creux { --trait: var(--encre); -webkit-text-stroke-width: 2px; }
.appel__bas { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); margin-top: var(--e-5); }
.appel__bas p { max-width: 30em; margin: 0; font-size: var(--t-l); line-height: 1.5; }

/* Contact */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); }
.contact__infos { grid-column: 1 / span 5; }
.contact__form { grid-column: 7 / -1; }
.coordonnees { margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.coordonnees li { display: grid; grid-template-columns: 44px 1fr; gap: var(--e-2); align-items: center; padding: var(--e-2) 0; border-top: 1px solid var(--filet-clair); }
.coordonnees li:last-child { border-bottom: 1px solid var(--filet-clair); }
.coordonnees svg { color: var(--or); }
.coordonnees small { display: block; color: var(--brume); font-size: var(--t-xs); }
.coordonnees a { color: inherit; text-decoration: none; font-weight: 600; }
.coordonnees a:hover { color: var(--or); }
@media (max-width: 960px) { .contact__infos, .contact__form { grid-column: 1 / -1; } }

/* ==========================================================================
   8. Formulaires
   ========================================================================== */

.formulaire { display: flex; flex-direction: column; gap: var(--e-3); }
.formulaire .ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--e-3); }
.formulaire label { position: relative; display: flex; flex-direction: column; gap: .35rem; font-size: var(--t-s); font-weight: 600; }
.formulaire label > span:first-child { color: var(--texte-2); }
.formulaire input[type=text], .formulaire input[type=tel], .formulaire input[type=email], .formulaire input[type=url], .formulaire input[type=date], .formulaire select, .formulaire textarea {
	width: 100%;
	padding: .8rem 0;
	border: 0;
	border-bottom: 1px solid rgba(6,18,28,.25);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: 400 var(--t-m)/1.4 var(--f-texte);
	transition: border-color var(--d-court);
	-webkit-appearance: none;
	appearance: none;
}
.formulaire select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E6D69' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 28px; }
.formulaire textarea { resize: vertical; min-height: 120px; }
.formulaire label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vert); transform: scaleX(0); transform-origin: left; transition: transform var(--d-moyen) var(--courbe); pointer-events: none; }
.formulaire label:focus-within::after { transform: scaleX(1); }
.formulaire label.case::after { display: none; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; }
.formulaire .case { flex-direction: row; align-items: flex-start; gap: .75rem; font-weight: 400; }
.formulaire .case input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vert); }
.formulaire .case span { color: var(--texte-2); }
.formulaire .aide { margin: 0; font-size: var(--t-xs); color: var(--doux); }
.formulaire .requis { color: #B42318; }
.formulaire .pot { position: absolute !important; left: -9999px !important; }
.formulaire button[type=submit] { align-self: flex-start; margin-top: var(--e-1); }

.sombre .formulaire label > span:first-child, .sombre .formulaire .case span { color: var(--brume); }
.sombre .formulaire input, .sombre .formulaire select, .sombre .formulaire textarea { border-bottom-color: rgba(238,242,238,.28); color: var(--craie); }
.sombre .formulaire select option { color: var(--encre); }
.sombre .formulaire label::after { background: var(--or); }
.sombre .formulaire .aide { color: var(--brume); }
.sombre .formulaire .requis { color: var(--or); }
.sombre .formulaire input[type=date] { color-scheme: dark; }

.avis { margin: 0 0 var(--e-4); padding: var(--e-2) var(--e-3); border-radius: var(--r-s); font-weight: 600; animation: apparait .6s var(--courbe); }
.avis--ok { background: rgba(30,142,78,.14); color: #0E5B32; border-left: 3px solid var(--vert); }
.avis--erreur { background: rgba(180,35,24,.1); color: #8A1F11; border-left: 3px solid #B42318; }
.avis ul { margin: .4em 0 0; padding-left: 1.2em; font-weight: 400; }
.sombre .avis--ok { color: #8FE0B3; }
.sombre .avis--erreur { color: #FFB4A9; }
@keyframes apparait { from { opacity: 0; transform: translateY(-8px); } }

/* ==========================================================================
   9. Pages intérieures
   ========================================================================== */

.contenu { max-width: 46rem; margin: 0 auto; }
.entry-content { font-size: var(--t-l); line-height: 1.7; color: var(--texte-2); }
.entry-content > * + * { margin-top: 1.2em; }
.entry-content h2, .entry-content h3 { color: var(--texte); font-family: var(--f-titre); text-transform: uppercase; line-height: 1; }
.entry-content h2 { font-size: var(--t-2xl); margin-top: 1.6em; }
.entry-content h3 { font-size: var(--t-xl); margin-top: 1.4em; }
.entry-content a { color: var(--vert); text-underline-offset: .2em; }
.entry-content img { border-radius: var(--r-m); }
.entry-content blockquote { margin-left: 0; padding-left: var(--e-3); border-left: 3px solid var(--or); font-size: var(--t-xl); color: var(--texte); }
.entry-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-m); }
.image-une { margin: calc(var(--e-6) * -1) 0 var(--e-5); border-radius: var(--r-l); overflow: hidden; position: relative; z-index: 2; }
.image-une img { width: 100%; max-height: 640px; object-fit: cover; }

/* Fiche joueur */
.fiche { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); align-items: start; }
.fiche__photo { grid-column: 1 / span 5; position: relative; margin-top: calc(var(--e-section) * -.6); z-index: 2; }
.fiche__photo > div { aspect-ratio: 3 / 4; border-radius: 999px 999px var(--r-l) var(--r-l); overflow: hidden; background: var(--encre-2); box-shadow: 0 40px 80px -40px rgba(6,18,28,.5); }
.fiche__photo img { width: 100%; height: 100%; object-fit: cover; }
.fiche__numero { position: absolute; right: -.1em; bottom: -.18em; font-family: var(--f-titre); font-weight: 900; font-size: clamp(8rem, 16vw, 14rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--vert); }
.fiche__texte { grid-column: 7 / -1; }
.fiche-technique { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 var(--e-5); border-top: 1px solid var(--filet); }
.fiche-technique div { padding: var(--e-3) var(--e-2) var(--e-3) 0; border-bottom: 1px solid var(--filet); }
.fiche-technique dt { font-size: var(--t-s); color: var(--doux); }
.fiche-technique dd { margin: .2em 0 0; font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 800; line-height: 1; text-transform: uppercase; }
.video-bloc { margin-top: var(--e-section); }
@media (max-width: 860px) { .fiche__photo, .fiche__texte { grid-column: 1 / -1; } .fiche__photo { max-width: 420px; } }

.lecteur { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-m); overflow: hidden; background: #000; }
.lecteur iframe, .lecteur video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Galerie complète */
.filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.segments { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--blanc); box-shadow: inset 0 0 0 1px var(--filet); }
.segments a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.3em; border-radius: 999px; color: var(--texte-2); font-size: var(--t-s); font-weight: 700; text-decoration: none; transition: color var(--d-court); }
.segments a[aria-current="true"] { background: var(--encre); color: var(--craie); }
.compteur { margin: 0; color: var(--doux); font-size: var(--t-s); }
.albums { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--e-5); }
.albums a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1em; border: 1px solid var(--filet); border-radius: 999px; color: var(--texte); font-size: var(--t-s); text-decoration: none; transition: border-color var(--d-court), background var(--d-court); }
.albums a:hover { border-color: var(--encre); }
.albums a[aria-current="true"] { background: var(--vert); border-color: var(--vert); color: var(--blanc); font-weight: 700; }
.colonnes-medias { columns: 3 280px; column-gap: var(--e-2); }
.colonnes-medias figure { break-inside: avoid; margin: 0 0 var(--e-2); }
.colonnes-medias .media { height: auto; min-height: 0; }
.colonnes-medias .media img { height: auto; }
.colonnes-medias .media:not(:has(img)), .colonnes-medias .media[data-type="iframe"], .colonnes-medias .media[data-type="fichier"] { aspect-ratio: 16 / 10; }
.colonnes-medias .media[data-type="iframe"] img, .colonnes-medias .media[data-type="fichier"] img { height: 100%; }
.colonnes-medias figcaption { display: flex; justify-content: space-between; gap: var(--e-2); padding: .6rem .2rem 0; font-size: var(--t-xs); color: var(--doux); }
.colonnes-medias figcaption strong { color: var(--texte); font-size: var(--t-s); font-weight: 600; }

/* Pagination, messages */
.pagination { margin-top: var(--e-6); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 1em; border-radius: 999px; border: 1px solid var(--filet); color: var(--texte); font-weight: 700; text-decoration: none; transition: background var(--d-court), color var(--d-court); }
.pagination .page-numbers:hover { border-color: var(--encre); }
.pagination .page-numbers.current { background: var(--encre); border-color: var(--encre); color: var(--craie); }
.message-vide { padding: var(--e-6) var(--e-4); border: 1px dashed var(--filet); border-radius: var(--r-m); text-align: center; color: var(--doux); }
.sombre .message-vide { border-color: var(--filet-clair); color: var(--brume); }

/* ==========================================================================
   10. Pied de page
   ========================================================================== */

.pied { position: relative; overflow: hidden; padding-top: var(--e-section); background-color: #040D15; background-image: var(--grain); color: var(--brume); font-size: var(--t-s); }
.pied__haut { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5) var(--e-3); }
.pied__marque { grid-column: 1 / span 5; }
.pied__marque p { max-width: 26em; margin: var(--e-3) 0 0; }
.pied__col { grid-column: span 3; }
.pied__col:first-of-type { grid-column: 7 / span 3; }
.pied h2 { margin: 0 0 var(--e-2); color: var(--craie); font-size: var(--t-s); font-weight: 700; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: .5em; }
.pied a { color: inherit; text-decoration: none; transition: color var(--d-court); }
.pied a:hover { color: var(--or); }
.reseaux { display: flex; gap: .6rem; margin-top: var(--e-4); }
.reseaux a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--filet-clair); border-radius: 50%; color: var(--craie); transition: background var(--d-moyen) var(--courbe), color var(--d-moyen), transform var(--d-moyen) var(--courbe); }
.reseaux a:hover { background: var(--or); border-color: var(--or); color: var(--encre); transform: translateY(-3px); }
.pied__geant { margin: var(--e-6) 0 0; font-family: var(--f-titre); font-weight: 900; font-size: clamp(6rem, 31vw, 30rem); line-height: .74; letter-spacing: -.02em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(233,177,10,.45); user-select: none; transform: translateY(.12em); }
.pied__bas { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2); padding: var(--e-3) 0; border-top: 1px solid var(--filet-clair); font-size: var(--t-xs); }
@media (max-width: 860px) {
	.pied__marque { grid-column: 1 / -1; }
	.pied__col, .pied__col:first-of-type { grid-column: span 6; }
}

/* ==========================================================================
   11. Visionneuse photos / vidéos
   ========================================================================== */

.visionneuse { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 72px var(--gouttiere) 32px; background: rgba(4,13,21,.95); opacity: 0; visibility: hidden; transition: opacity .4s var(--courbe), visibility 0s .4s; }
.visionneuse.est-ouverte { opacity: 1; visibility: visible; transition: opacity .4s var(--courbe), visibility 0s; }
.visionneuse__contenu { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); width: 100%; max-width: 1180px; max-height: 100%; transform: scale(.96); transition: transform .5s var(--courbe); }
.visionneuse.est-ouverte .visionneuse__contenu { transform: none; }
.visionneuse__contenu img { max-height: 80vh; width: auto; border-radius: var(--r-s); }
.visionneuse__video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden; background: #000; }
.visionneuse__video iframe, .visionneuse__video video { display: block; width: 100%; height: 100%; border: 0; }
.visionneuse__legende { margin: 0; color: var(--craie); font-weight: 600; text-align: center; }
.visionneuse__legende small { margin-left: .8em; color: var(--brume); font-weight: 400; }
.visionneuse button { position: absolute; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--filet-clair); border-radius: 50%; background: transparent; color: var(--craie); cursor: pointer; transition: background var(--d-court), color var(--d-court); }
.visionneuse button:hover { background: var(--or); border-color: var(--or); color: var(--encre); }
.visionneuse__fermer { top: 14px; right: 14px; }
.visionneuse__prec { left: 14px; top: 50%; transform: translateY(-50%); }
.visionneuse__suiv { right: 14px; top: 50%; transform: translateY(-50%); }
.visionneuse button[hidden] { display: none; }

/* ==========================================================================
   12. Chat WhatsApp
   ========================================================================== */

.chat { position: fixed; right: 20px; bottom: 20px; z-index: 900; font-family: var(--f-texte); }
.chat__lanceur { position: relative; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border: 0; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 14px 30px -8px rgba(18,140,74,.6); cursor: pointer; transition: transform .5s var(--courbe); }
.chat__lanceur:hover { transform: scale(1.07) rotate(-6deg); }
.chat__lanceur::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25D366; z-index: -1; animation: pouls 2.8s ease-out infinite; }
@keyframes pouls { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.chat__lanceur .i-fermer { display: none; }
.chat.est-ouvert .chat__lanceur .i-wa { display: none; }
.chat.est-ouvert .chat__lanceur .i-fermer { display: block; }
.chat.est-ouvert .chat__lanceur::before { animation: none; opacity: 0; }
.chat__pastille { position: absolute; top: -2px; right: -2px; display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid var(--craie); border-radius: 999px; background: #E5383B; color: #fff; font-size: 11px; font-weight: 700; }
.chat.est-ouvert .chat__pastille, .chat__pastille[hidden] { display: none; }

.chat__bulle-intro { position: absolute; right: 74px; bottom: 8px; width: max-content; max-width: 240px; padding: .75rem 1rem; border-radius: 16px 16px 4px 16px; background: var(--blanc); color: var(--encre); font-size: var(--t-s); box-shadow: 0 18px 40px -16px rgba(6,18,28,.45); opacity: 0; transform: translateX(10px) scale(.95); transform-origin: right bottom; pointer-events: none; transition: opacity .5s var(--courbe), transform .5s var(--courbe); }
.chat__bulle-intro.est-visible { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }
.chat.est-ouvert .chat__bulle-intro { display: none; }

.chat__panneau { position: absolute; right: 0; bottom: 78px; width: min(370px, calc(100vw - 32px)); max-height: min(620px, calc(100svh - 120px)); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #EFEAE2; box-shadow: 0 30px 70px -20px rgba(6,18,28,.55); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.94); transform-origin: right bottom; transition: opacity .45s var(--courbe), transform .45s var(--courbe), visibility 0s .45s; }
.chat.est-ouvert .chat__panneau { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--courbe), transform .45s var(--courbe), visibility 0s; }
.chat__tete { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; background-color: var(--encre); background-image: var(--grain), var(--tonte); color: var(--craie); }
.chat__avatar { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--encre-2); display: flex; align-items: center; justify-content: center; }
.chat__avatar svg, .chat__avatar img { width: 30px; height: auto; border-radius: 50%; }
.chat__avatar i { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border: 2px solid var(--encre); border-radius: 50%; background: #9AA5A3; }
.chat[data-statut="en-ligne"] .chat__avatar i { background: #25D366; }
.chat__tete strong { display: block; font-size: var(--t-m); line-height: 1.2; }
.chat__tete span { display: block; font-size: var(--t-xs); color: var(--brume); }
.chat__corps { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; background-color: #EFEAE2; background-image: radial-gradient(rgba(6,18,28,.06) 1px, transparent 1px); background-size: 14px 14px; }
.chat__msg { max-width: 86%; padding: .6rem .8rem .45rem; border-radius: 4px 14px 14px 14px; background: var(--blanc); color: var(--encre); font-size: var(--t-s); line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.08); animation: bulle .45s var(--courbe) both; }
.chat__msg time { display: block; margin-top: .2rem; text-align: right; color: #8696A0; font-size: 11px; }
.chat__msg--moi { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: #D9FDD3; }
@keyframes bulle { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.chat__ecrit { display: inline-flex; gap: 4px; align-self: flex-start; padding: .8rem .9rem; border-radius: 4px 14px 14px 14px; background: var(--blanc); }
.chat__ecrit i { width: 7px; height: 7px; border-radius: 50%; background: #8696A0; animation: points 1.2s infinite; }
.chat__ecrit i:nth-child(2) { animation-delay: .15s; }
.chat__ecrit i:nth-child(3) { animation-delay: .3s; }
@keyframes points { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat__choix { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.chat__choix button { min-height: 38px; padding: 0 .9rem; border: 1px solid rgba(18,140,74,.4); border-radius: 999px; background: var(--blanc); color: #0E6B3A; font: 600 var(--t-xs)/1 var(--f-texte); cursor: pointer; transition: background var(--d-court), color var(--d-court), transform var(--d-court); animation: bulle .45s var(--courbe) both; }
.chat__choix button:hover { background: #25D366; border-color: #25D366; color: #fff; transform: translateY(-1px); }
.chat__saisie { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem; background: #F0F2F5; }
.chat__saisie label { flex: 1; }
.chat__saisie textarea { display: block; width: 100%; max-height: 120px; min-height: 44px; padding: .7rem .9rem; border: 0; border-radius: 22px; background: var(--blanc); color: var(--encre); font: 400 var(--t-s)/1.4 var(--f-texte); resize: none; }
.chat__saisie textarea:focus { outline: 2px solid #25D366; }
.chat__envoyer { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #25D366; color: #fff; cursor: pointer; transition: transform var(--d-court), background var(--d-court); }
.chat__envoyer:hover { transform: scale(1.06); background: #1EBE5A; }
.chat__envoyer:disabled { background: #B5C3BF; cursor: not-allowed; transform: none; }
.chat__note { margin: 0; padding: 0 .9rem .7rem; background: #F0F2F5; color: #667781; font-size: 11px; text-align: center; }
body.menu-ouvert .chat { opacity: 0; visibility: hidden; }
@media (max-width: 480px) { .chat { right: 14px; bottom: 14px; } .chat__bulle-intro { display: none; } }

/* ==========================================================================
   13. Mouvement : apparitions au défilement
   ========================================================================== */

.js [data-revele] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--courbe), transform 1.1s var(--courbe); transition-delay: var(--retard, 0s); }
.js [data-revele="rideau"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--courbe-in); transition-delay: var(--retard, 0s); }
.js [data-revele="rideau"] img { transform: scale(1.18); transition: transform 1.8s var(--courbe); }
.js [data-revele="fondu"] { transform: none; }
.js [data-revele].est-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.js [data-revele="rideau"].est-visible img { transform: none; }

.js [data-trace] path, .js [data-trace] circle, .js [data-trace] rect, .js [data-trace] line { stroke-dasharray: var(--long, 2000); stroke-dashoffset: var(--long, 2000); transition: stroke-dashoffset 2.4s var(--courbe-in); transition-delay: var(--retard, 0s); }
.js [data-trace].est-visible path, .js [data-trace].est-visible circle, .js [data-trace].est-visible rect, .js [data-trace].est-visible line { stroke-dashoffset: 0; }

/* Séquence d'ouverture du héros */
.js .hero h1 .ligne > span { transform: translateY(105%); transition: transform 1.2s var(--courbe); }
.js .hero .hero__lieu, .js .hero .hero__bas { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--courbe), transform 1s var(--courbe); }
.js .hero .hero__photo { clip-path: inset(100% 0 0 0 round 999px 999px 28px 28px); transition: clip-path 1.6s var(--courbe-in) .2s; }
.est-pret .hero h1 .ligne > span { transform: none; }
.est-pret .hero h1 .ligne:nth-child(2) > span { transition-delay: .1s; }
.est-pret .hero h1 .ligne:nth-child(3) > span { transition-delay: .2s; }
.est-pret .hero h1 .ligne:nth-child(4) > span { transition-delay: .3s; }
.est-pret .hero .hero__lieu { opacity: 1; transform: none; }
.est-pret .hero .hero__bas { opacity: 1; transform: none; transition-delay: .55s; }
.est-pret .hero .hero__photo { clip-path: inset(0 0 0 0 round 999px 999px 28px 28px); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.js [data-revele], .js [data-revele="rideau"] { opacity: 1; transform: none; clip-path: none; }
	.js [data-trace] path, .js [data-trace] circle, .js [data-trace] rect, .js [data-trace] line { stroke-dashoffset: 0; }
	.js .hero h1 .ligne > span, .js .hero .hero__lieu, .js .hero .hero__bas { transform: none; opacity: 1; }
	.js .hero .hero__photo { clip-path: none; }
}