/*
 * Cartes joueurs (page Effectif) : onglets des équipes, vignettes, carte agrandie recto / verso.
 * La carte reprend le dessin de l'appli (CarteJoueur.tsx, maquette « Carte joueur HVB ») dans un repère de
 * 300 × 472 : toutes les mesures de la carte sont des multiples de --u (largeur de la carte / 300).
 */

/* ---------- Onglets des équipes ---------- */
.cj-onglets {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 clamp(28px, 4vw, 44px);
}
.cj-onglet {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 48px;
	padding: 6px 16px 6px 8px;
	border: 1px solid var(--ligne);
	border-radius: 999px;
	background: var(--blanc);
	color: var(--texte);
	text-align: left;
	transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.cj-onglet:hover { border-color: var(--noir); transform: translateY(-1px); }
.cj-onglet[aria-selected="true"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.cj-onglet__logo { width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: var(--blanc); object-fit: contain; flex: none; }
.cj-onglet__textes { display: flex; flex-direction: column; line-height: 1.1; }
.cj-onglet__titre { font: 700 15px/1.15 var(--corps); white-space: nowrap; }
.cj-onglet__detail { font: 600 11px/1.2 var(--corps); color: var(--rouge); white-space: nowrap; }
.cj-onglet[aria-selected="true"] .cj-onglet__detail { color: #F7D47C; }

/* Téléphone : une seule ligne qui défile au doigt, d'un bord à l'autre de l'écran. */
@media (max-width: 760px) {
	.cj-onglets {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		margin-inline: calc(-1 * var(--gouttiere));
		padding: 2px var(--gouttiere) 6px;
	}
	.cj-onglets::-webkit-scrollbar { display: none; }
	.cj-onglet { flex: none; scroll-snap-align: center; }
}

/* ---------- En-tête d'une équipe ---------- */
.cj-equipe:focus { outline: none; }
.cj-equipe__entete { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 8px; }
.cj-equipe__logo { width: 64px; height: 64px; object-fit: contain; flex: none; }
.cj-equipe:not(.cj-equipe--hvb) .cj-equipe__logo { padding: 4px; border-radius: 50%; background: var(--blanc); box-shadow: 0 0 0 2px var(--detail), 0 6px 18px rgba(0,0,0,.12); }
.cj-equipe__nom { margin: 0; font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; }
.cj-equipe__intro { margin: 2px 0 0; font: 600 15px/1.4 var(--corps); color: var(--gris); }

.cj-poste {
	display: flex; align-items: center; gap: 14px;
	margin: clamp(30px, 4vw, 44px) 0 16px;
	font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; font-style: italic; text-transform: uppercase;
}
.cj-poste::before, .cj-poste::after { content: ''; flex: 1; height: 2px; background: var(--ligne); }

/* ---------- Vignettes ---------- */
/* Rangées centrées (comme l'ancienne grille du site) : un poste de 2 ou 3 joueurs ne laisse pas de vide à droite. */
.cj-grille {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 16px;
	margin: 0; padding: 0; list-style: none;
}
.cj-grille > li { flex: 0 1 196px; margin: 0; min-width: 0; }
@media (max-width: 600px) { .cj-grille { gap: 10px; } .cj-grille > li { flex-basis: calc((100% - 20px) / 3); } }

.cj-vignette {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	width: 100%;
	aspect-ratio: .62;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	container-type: inline-size;
	background:
		radial-gradient(ellipse 90% 55% at 50% 100%, color-mix(in srgb, var(--detail) 42%, transparent), transparent 70%),
		radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--fond) 70%, #fff 10%), var(--fond) 78%);
	color: var(--blanc);
	text-align: left;
	box-shadow: 0 8px 22px rgba(0,0,0,.12);
	transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.cj-equipe--hvb .cj-vignette { background: radial-gradient(ellipse 90% 55% at 50% 100%, rgba(208,24,24,.5), transparent 70%), radial-gradient(circle at 50% 30%, #2a2a2e, #111 78%); }
.cj-vignette::after { /* Liseré or (HVB) ou aux couleurs du club, au survol. */
	content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .25s;
}
.cj-vignette:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.2); }
.cj-vignette:hover::after { box-shadow: inset 0 0 0 2px var(--detail); }
.cj-equipe--hvb .cj-vignette:hover::after { box-shadow: inset 0 0 0 2px #F2C14E; }
.cj-vignette:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; }

.cj-vignette__photo {
	position: absolute; left: 0; right: 0; bottom: 34px;
	width: 100%; height: 82%;
	object-fit: contain; object-position: center bottom;
	transform-origin: center bottom;
	transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.cj-vignette:hover .cj-vignette__photo { transform: scale(1.04); }
.cj-vignette--ronde .cj-vignette__photo {
	left: 50%; bottom: calc(44px + 6cqw);
	width: 62%; height: auto; aspect-ratio: 1;
	border-radius: 50%; border: 2px solid var(--blanc);
	object-fit: cover;
	transform: translateX(-50%);
}
.cj-vignette--ronde:hover .cj-vignette__photo { transform: translateX(-50%) scale(1.04); }
.cj-vignette__logo { position: absolute; left: 50%; top: 46%; width: 56%; aspect-ratio: 1; object-fit: contain; opacity: .16; filter: grayscale(1) brightness(2.2); transform: translate(-50%, -50%); }

.cj-vignette__numero {
	position: absolute; top: 2px; left: 8px;
	font: 800 clamp(28px, 30cqw, 54px)/1.1 var(--titre);
	color: var(--blanc);
	text-shadow: 0 2px 6px var(--detail);
}
.cj-equipe--hvb .cj-vignette__numero { text-shadow: 0 2px 6px #C8141B; }
.cj-vignette__nom {
	position: relative;
	display: flex; flex-direction: column;
	padding: 5px 8px 6px;
	background: rgba(0,0,0,.55);
	border-top: 2px solid var(--detail);
}
.cj-equipe--hvb .cj-vignette__nom { background: #C8141B; border-top: 0; }
.cj-vignette__prenom, .cj-vignette__famille { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-vignette__prenom { font: 600 clamp(11px, 9cqw, 14px)/1.25 var(--corps); color: #FBE3E3; }
.cj-vignette__famille { font: 800 clamp(14px, 12.5cqw, 20px)/1.1 var(--titre); text-transform: uppercase; letter-spacing: .02em; }

/* Arrivée des vignettes quand on change d'équipe. */
.cj-equipe--entree .cj-vignette { animation: cj-vignette .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(min(var(--i), 14) * 35ms); }
@keyframes cj-vignette { from { opacity: 0; transform: translateY(18px) scale(.97); } }

.cj-note { margin: 36px 0 0; font: 400 14px/1.6 var(--corps); color: var(--gris); text-align: center; }

/* ---------- Fenêtre de la carte ---------- */
html.cj-ouverte { overflow: hidden; }
.cj-dialogue {
	--l: min(82vw, max(220px, calc((100svh - 200px) * .6356)), 400px);
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: #070707;
	color: var(--blanc);
	overflow: hidden;
	overscroll-behavior: contain;
}
.cj-dialogue[open] { animation: cj-fondu .25s ease-out; }
.cj-dialogue::backdrop { background: rgba(7,7,7,.9); }
@keyframes cj-fondu { from { opacity: 0; } }

.cj-scene { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 42%, var(--scene-1, #3A0609) 0%, var(--scene-2, #150203) 45%, #070707 100%); }
.cj-scene > span { position: absolute; }
.cj-rayons {
	inset: 0;
	background: repeating-conic-gradient(from 0deg at 50% 42%, color-mix(in srgb, var(--lumiere) 7%, transparent) 0deg 4deg, transparent 4deg 14deg);
	-webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0, transparent 70%);
	mask-image: radial-gradient(circle at 50% 42%, #000 0, transparent 70%);
}
.cj-faisceau {
	top: -140px; width: 70px; height: 115%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--lumiere) 42%, transparent), transparent 75%);
	filter: blur(6px);
	opacity: .35;
	transform-origin: 50% 0;
	animation: cj-balayage 3.2s ease-in-out infinite alternate;
}
.cj-faisceau--gauche { left: calc(50% - 28vw - 35px); --de: -34deg; --a: 30deg; }
.cj-faisceau--droite { left: calc(50% + 28vw - 35px); --de: 34deg; --a: -30deg; }
@keyframes cj-balayage { from { transform: rotate(var(--de)); } to { transform: rotate(var(--a)); } }
.cj-sol { left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--sol) 45%, transparent), transparent 70%); }

.cj-fermer {
	position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 3;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: var(--blanc);
	transition: background .2s;
}
.cj-fermer:hover { background: rgba(255,255,255,.18); }
.cj-fermer svg, .cj-fleche svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cj-dialogue :focus-visible { outline: 3px solid #F2C14E; outline-offset: 3px; }

.cj-plateau {
	position: relative; z-index: 1;
	height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 18px;
	padding: 64px 16px 28px;
}
.cj-emplacement { position: relative; width: var(--l); height: calc(var(--l) * 472 / 300); flex: none; }
.cj-halo {
	position: absolute; left: 50%; top: 50%;
	width: calc(var(--l) * 1.7); aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--lumiere) 50%, transparent) 0%, color-mix(in srgb, var(--sol) 25%, transparent) 40%, transparent 70%);
	opacity: .75;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.cj-eclats { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.cj-eclats i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--lumiere); box-shadow: 0 0 10px var(--lumiere); opacity: 0; }
.cj-eclats i:nth-child(2n) { width: 6px; height: 6px; left: -3px; top: -3px; }
.cj-eclats i:nth-child(3n + 1) { background: #fff; }
.cj-eclats i:nth-child(1) { --dx: 0; --dy: -230; }
.cj-eclats i:nth-child(2) { --dx: 160; --dy: -160; }
.cj-eclats i:nth-child(3) { --dx: 230; --dy: 0; }
.cj-eclats i:nth-child(4) { --dx: 160; --dy: 170; }
.cj-eclats i:nth-child(5) { --dx: 0; --dy: 240; }
.cj-eclats i:nth-child(6) { --dx: -170; --dy: 160; }
.cj-eclats i:nth-child(7) { --dx: -230; --dy: 0; }
.cj-eclats i:nth-child(8) { --dx: -160; --dy: -170; }
.cj-eclats i:nth-child(9) { --dx: 90; --dy: -220; }
.cj-eclats i:nth-child(10) { --dx: -90; --dy: 225; }
.cj-eclats i:nth-child(11) { --dx: 220; --dy: 90; }
.cj-eclats i:nth-child(12) { --dx: -220; --dy: -90; }
.cj-eclair { position: fixed; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; }

.cj-glisse { position: absolute; inset: 0; touch-action: pan-y; }

.cj-commandes { display: flex; align-items: center; gap: 14px; transition: opacity .3s; }
.cj-fleche {
	width: 48px; height: 48px; flex: none;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: var(--blanc);
	transition: background .2s, transform .2s;
}
.cj-fleche:hover { background: rgba(255,255,255,.22); }
.cj-fleche:active { transform: scale(.94); }
.cj-aide { margin: 0; min-width: 190px; font: 400 13px/1.3 var(--corps); color: #BDB8B2; text-align: center; }
.cj-position { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ---------- La carte ---------- */
.cj-carte {
	--u: calc(var(--l) / 300);
	position: absolute; inset: 0;
	display: block;
	width: 100%; height: 100%;
	padding: 0; border: 0;
	background: none;
	color: var(--texte-carte);
	font: inherit;
	text-align: left;
	cursor: pointer;
	perspective: 1200px;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
}
.cj-carte:focus-visible { outline: none; }
.cj-carte:focus-visible .cj-face { filter: drop-shadow(0 0 3px #F2C14E); }
.cj-entree, .cj-pivot { position: absolute; inset: 0; transform-style: preserve-3d; }
.cj-pivot { transition: transform .8s cubic-bezier(.34, 1.36, .5, 1); }
.cj-carte.est-retournee .cj-pivot { transform: rotateY(180deg); }
.cj-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cj-face--recto { transform: rotateY(0deg); } /* sans transformation propre, Chrome dessine le recto par-dessus le verso retourné */
.cj-face--verso { transform: rotateY(180deg); }
.cj-face > * { position: absolute; }
.cj-fond { inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Panneau intérieur (forme de la carte, décalée de 7) : photo, voile et reflet y sont découpés. */
.cj-photo, .cj-voile, .cj-reflet {
	inset: 0;
	clip-path: polygon(13.773% 1.483%, 38.56% 1.483%, 50% 4.588%, 61.44% 1.483%, 86.227% 1.483%, 97.667% 8.275%, 97.667% 87.843%, 50% 98.517%, 2.333% 87.843%, 2.333% 8.275%);
	pointer-events: none;
}
.cj-photo img { position: absolute; display: block; max-width: none; }
.cj-photo__detouree {
	left: calc(61 * var(--u)); top: calc(33 * var(--u));
	width: calc(240 * var(--u)); height: calc(278 * var(--u));
	object-fit: contain; object-position: center top;
	filter: drop-shadow(0 calc(8 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.45));
	-webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
	mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
}
.cj-photo__ronde {
	left: calc(109 * var(--u)); top: calc(65 * var(--u));
	width: calc(150 * var(--u)); height: calc(150 * var(--u));
	border-radius: 50%;
	border: calc(3 * var(--u)) solid var(--filet);
	object-fit: cover;
	box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.4);
}
.cj-photo__logo {
	left: calc(115 * var(--u)); top: calc(70 * var(--u));
	width: calc(150 * var(--u)); height: calc(150 * var(--u));
	object-fit: contain;
	opacity: .11;
	filter: grayscale(1) brightness(2.5);
}
.cj-voile { background: linear-gradient(180deg, transparent 50%, rgba(12,1,2,.55) 72.5%, rgba(6,0,1,.88) 100%); }
.cj-reflet { overflow: hidden; }
.cj-reflet::before {
	content: '';
	position: absolute; top: -17%; bottom: -17%; left: 0;
	width: calc(80 * var(--u));
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42), rgba(255,255,255,0));
	transform: translateX(calc(-180 * var(--u))) rotate(18deg);
}
.cj-carte.cj-brille .cj-reflet::before { animation: cj-reflet .95s cubic-bezier(.45, 0, .55, 1) var(--delai-reflet, 0s) both; }
@keyframes cj-reflet { to { transform: translateX(calc(420 * var(--u))) rotate(18deg); } }

/* Colonne de gauche : note, poste, drapeau, club. */
.cj-gauche {
	left: calc(29 * var(--u)); top: calc(41 * var(--u));
	width: calc(64 * var(--u));
	display: flex; flex-direction: column; align-items: center;
	gap: calc(6 * var(--u));
}
.cj-gen { display: block; font: 800 calc(62 * var(--u))/calc(60 * var(--u)) var(--titre); color: var(--note); text-shadow: 0 calc(2 * var(--u)) 0 rgba(0,0,0,.35); }
.cj-abr { display: block; font: 700 calc(22 * var(--u))/1.15 var(--titre); letter-spacing: calc(2 * var(--u)); color: var(--texte-carte); margin-right: calc(-2 * var(--u)); }
.cj-filet { display: block; width: calc(40 * var(--u)); height: calc(2 * var(--u)); background: linear-gradient(90deg, transparent, var(--filet), transparent); }
.cj-drapeau { display: block; width: calc(32 * var(--u)); height: calc(21 * var(--u)); border-radius: calc(2 * var(--u)); overflow: hidden; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.4); }
.cj-drapeau svg { display: block; width: 100%; height: 100%; }
.cj-pays { display: block; font: 700 calc(14 * var(--u))/1.1 var(--titre); letter-spacing: calc(1 * var(--u)); color: var(--accent); text-align: center; text-transform: uppercase; }
.cj-logo { display: block; width: calc(36 * var(--u)); height: calc(36 * var(--u)); object-fit: contain; }
.cj-logo--disque { width: calc(38 * var(--u)); height: calc(38 * var(--u)); padding: calc(4 * var(--u)); border-radius: 50%; background: #fff; border: calc(1.5 * var(--u)) solid var(--filet); }

/* Nom, ornement, notes, pied. */
.cj-noms { left: calc(7 * var(--u)); right: calc(7 * var(--u)); top: calc(268 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.cj-prenom { display: block; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 calc(12 * var(--u))/1.25 var(--corps); letter-spacing: calc(4 * var(--u)); text-transform: uppercase; color: var(--accent); margin-right: calc(-4 * var(--u)); }
.cj-nom { display: block; max-width: 90%; white-space: nowrap; font: 800 calc(42 * var(--u))/1.02 var(--titre); letter-spacing: calc(1.5 * var(--u)); text-transform: uppercase; color: var(--texte-carte); text-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.45); text-align: center; }
.cj-ornement { left: 0; right: 0; top: calc(328 * var(--u)); height: calc(7 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); }
.cj-ornement i { display: block; width: calc(88 * var(--u)); height: calc(1.5 * var(--u)); background: linear-gradient(90deg, transparent, var(--filet)); }
.cj-ornement i:last-child { background: linear-gradient(90deg, var(--filet), transparent); }
.cj-ornement b, .cj-verso__ornement b { display: block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); background: var(--filet); transform: rotate(45deg); flex: none; }
.cj-notes { left: calc(23 * var(--u)); right: calc(23 * var(--u)); top: calc(347 * var(--u)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cj-notes > span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cj-notes__libelle { font: 700 calc(13 * var(--u))/1.2 var(--titre); letter-spacing: calc(1.5 * var(--u)); color: var(--accent); margin-right: calc(-1.5 * var(--u)); }
.cj-notes__valeur { font: 800 calc(27 * var(--u))/calc(29 * var(--u)) var(--titre); color: var(--texte-carte); }
.cj-notes__valeur--vide { opacity: .35; }
.cj-pied { left: 0; right: 0; top: calc(421 * var(--u)); font: 700 calc(8.5 * var(--u))/1.3 var(--corps); letter-spacing: calc(3 * var(--u)); color: var(--accent); opacity: .8; text-align: center; }

/* Verso : statistiques détaillées. */
.cj-verso { left: calc(30 * var(--u)); right: calc(30 * var(--u)); top: calc(46 * var(--u)); bottom: calc(70 * var(--u)); display: flex; flex-direction: column; }
.cj-verso__sur { display: block; font: 700 calc(10 * var(--u))/1.3 var(--corps); letter-spacing: calc(1 * var(--u)); text-transform: uppercase; color: var(--accent); text-align: center; }
.cj-verso__nom { display: block; margin-top: calc(6 * var(--u)); white-space: nowrap; font: 800 calc(30 * var(--u))/calc(34 * var(--u)) var(--titre); letter-spacing: calc(1.5 * var(--u)); text-transform: uppercase; color: var(--texte-carte); text-align: center; }
.cj-verso__detail { display: block; font: 600 calc(12 * var(--u))/1.35 var(--corps); color: var(--accent); text-align: center; }
.cj-verso__ornement { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: calc(10 * var(--u)) 0; }
.cj-verso__ornement i { display: block; flex: 1; height: calc(1.5 * var(--u)); background: var(--filet); opacity: .7; }
.cj-ligne { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); padding: calc(5 * var(--u)) 0; border-bottom: 1px solid rgba(255,255,255,.22); }
.cj-ligne__libelle { flex: 1; font: 400 calc(12.5 * var(--u))/1.25 var(--corps); color: var(--accent); }
.cj-ligne__valeur { font: 700 calc(13.5 * var(--u))/1.25 var(--corps); color: var(--texte-carte); white-space: nowrap; }
.cj-verso__vide { display: block; margin-top: calc(20 * var(--u)); font: 400 calc(14 * var(--u))/calc(20 * var(--u)) var(--corps); color: var(--texte-carte); text-align: center; }
.cj-verso__source { position: absolute; left: 0; right: 0; bottom: 0; font: 400 calc(9 * var(--u))/1.3 var(--corps); color: var(--accent); text-align: center; }

/* ---------- Mise en scène d'arrivée (sobre) ---------- */
.cj-arrive .cj-entree { animation: cj-arrivee .95s cubic-bezier(.22, .8, .3, 1) both; }
@keyframes cj-arrivee {
	0% { opacity: 0; transform: scale(.15) rotateY(360deg); }
	12% { opacity: 1; }
	75% { transform: scale(1.06) rotateY(0deg); }
	100% { opacity: 1; transform: scale(1) rotateY(0deg); }
}
.cj-arrive .cj-gen { animation: cj-note .42s cubic-bezier(.34, 1.9, .5, 1) .76s both; }
@keyframes cj-note { from { opacity: 0; transform: scale(2.4); } }
.cj-arrive .cj-halo { animation: cj-halo 1.1s ease-out both; }
@keyframes cj-halo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } }
.cj-arrive .cj-eclats i { animation: cj-eclat .9s cubic-bezier(.2, .7, .3, 1) .06s both; }
@keyframes cj-eclat {
	0% { opacity: 0; transform: translate(0, 0); }
	10% { opacity: 1; }
	70% { opacity: .6; }
	100% { opacity: 0; transform: translate(calc(var(--dx) * var(--l) / 300), calc(var(--dy) * var(--l) / 300)); }
}
.cj-arrive .cj-eclair { animation: cj-eclair .53s ease-out both; }
@keyframes cj-eclair { 20% { opacity: .55; } 100% { opacity: 0; } }
.cj-arrive .cj-commandes { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.cj-onglet, .cj-vignette, .cj-vignette__photo, .cj-pivot { transition: none; }
	.cj-equipe--entree .cj-vignette, .cj-faisceau { animation: none; }
	.cj-arrive .cj-entree { animation: cj-fondu .2s ease-out both; }
	.cj-arrive .cj-gen, .cj-arrive .cj-halo, .cj-arrive .cj-eclats i, .cj-arrive .cj-eclair, .cj-carte.cj-brille .cj-reflet::before { animation: none; }
	.cj-arrive .cj-commandes { opacity: 1; }
}

@media (max-width: 600px) {
	.cj-equipe__entete { gap: 12px; }
	.cj-equipe__logo { width: 48px; height: 48px; }
	.cj-equipe__intro { font-size: 14px; }
	.cj-vignette { border-radius: 12px; }
	.cj-vignette__photo { bottom: 30px; }
	.cj-vignette__nom { padding: 4px 6px 5px; }
	.cj-plateau { gap: 14px; padding-top: 60px; }
}

/* Mise en scène d'ouverture (comme l'appli) : poste, drapeau et pays, club, puis arrivée de la carte. */
.cj-etapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cj-etape {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	padding: 0 24px; text-align: center;
	opacity: 0;
	animation: cj-etape 1.09s var(--d, 0ms) both;
}
@keyframes cj-etape {
	0% { opacity: 0; transform: scale(.6); animation-timing-function: cubic-bezier(.34, 1.6, .64, 1); }
	22% { opacity: 1; transform: scale(1); }
	79% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
	100% { opacity: 0; transform: scale(1.3); }
}
.cj-etape__sur { margin: 0; font: 700 13px/1 var(--corps); letter-spacing: 6px; color: var(--lumiere); }
.cj-etape__titre {
	margin: 0; max-width: 100%;
	font: 800 clamp(40px, 13vw, 70px)/1.08 var(--titre); letter-spacing: 3px; text-transform: uppercase;
	color: #fff; text-shadow: 0 0 24px var(--lumiere);
	overflow-wrap: anywhere;
}
.cj-etape__titre--pays { font-size: clamp(30px, 9vw, 44px); }
.cj-etape__titre--club { font-size: clamp(24px, 7vw, 32px); }
.cj-etape__drapeau { width: 132px; height: 88px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 40px color-mix(in srgb, var(--lumiere) 35%, transparent); }
.cj-etape__logo { width: 150px; height: 150px; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--lumiere) 45%, transparent)); }
.cj-en-scene .cj-plateau { visibility: hidden; }
.cj-en-scene .cj-faisceau { opacity: .9; }
.cj-passer {
	position: absolute; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 2;
	margin: 0; text-align: center; font: 400 13px/1.3 var(--corps); color: #BDB8B2;
	opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cj-en-scene .cj-passer { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cj-etape { animation: none; } }