/* Décors du site BALE Basket : ce que les réglages de Mon Builder ne couvrent pas. */

/* Police des titres du site actuel (fichier repris de balebasket-sgl.fr ; licence à vérifier). */
@font-face {
	font-family: "A Space";
	src: url("fonts/a-space-bold-italic.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Grands titres ---------- */

.bb-titre :is(h1, h2, h3, p) {
	margin: 0;
	font-family: "A Space", "Poppins", sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 50px);
	line-height: 1.02;
	text-transform: uppercase;
	color: inherit;
}

.bb-titre h1 {
	font-size: clamp(30px, 4.2vw, 62px);
}

.bb-titre--petit :is(h1, h2, h3, p) {
	font-size: clamp(24px, 2.4vw, 32px);
}

/* Mot en rouge dans un titre. */
.bb-titre em {
	font-style: normal;
	color: var(--mb-primary);
}

/* ---------- Bouton rond des ouvertures (« radar ») ---------- */

.bb-radar {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-top: 10px;
}

.bb-radar span {
	position: absolute;
	inset: 0;
	border: 2px solid var(--mb-primary);
	border-radius: 50%;
	background: rgba(158, 35, 35, 0.4);
	animation: bb-radar 2s cubic-bezier(0, 0, 0.2, 1) infinite;
	pointer-events: none;
}

.bb-radar span + span {
	animation-delay: 0.75s;
}

.bb-radar i {
	position: relative;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: var(--mb-primary);
	transition: background 0.2s;
}

.bb-radar i::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 18px;
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}

.bb-radar:hover i {
	background: var(--mb-accent);
}

@keyframes bb-radar {
	0% {
		transform: scale(0.8);
		opacity: 0.9;
	}
	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-radar span {
		animation: none;
		opacity: 0;
	}
}

/* ---------- En-tête ---------- */

.bb-entete .mb-menu__list {
	flex-wrap: nowrap;
}

.bb-entete .mb-menu__list a,
.bb-entete .mb-button {
	white-space: nowrap;
}

/* Bouton blanc au logo LDLC ASVEL. */
.bb-asvel {
	display: block;
	width: 96px;
	height: 50px;
	border-radius: 12px;
	background: #fff url("ldlc-asvel.svg") center / 66px auto no-repeat;
	transition: background-color 0.2s;
}

.bb-asvel:hover {
	background-color: #ddd;
}

/* Barre rouge des réseaux, fixée à gauche. */
.bb-reseaux .mb-socials {
	flex-direction: column;
	padding: 34px 8px;
	background: var(--mb-primary);
}

.bb-reseaux .mb-social:hover {
	opacity: 0.75;
}

@media (max-width: 1024px) {
	.bb-reseaux {
		display: none;
	}
}

@media (max-width: 767px) {
	.bb-asvel {
		width: 70px;
		height: 40px;
		background-size: 50px auto;
	}
}

/* Sur fond sombre ou sur une photo, le mot en rouge est plus vif pour rester lisible. */
.bb-sombre .bb-titre em,
.bb-ouverture .bb-titre em {
	color: var(--mb-accent);
}

/* ---------- Cases à filet (valeurs, avantages) ---------- */

.bb-cellule {
	border: 1px solid rgba(18, 18, 18, 0.14);
	margin: 0 -1px -1px 0;
}

.bb-sombre .bb-cellule {
	border-color: rgba(255, 255, 255, 0.16);
}

/* ---------- Cartes rouges (membres, équipes) ---------- */

.bb-cartes > .mb-container__inner,
.bb-cartes > .mb-container > .mb-container__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.bb-carte {
	box-shadow: 0 6px 16px rgba(18, 18, 18, 0.12);
	transition: transform 0.2s, background-color 0.2s;
}

.bb-carte--lien:hover {
	transform: translateY(-3px);
}

.bb-carte a {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte est cliquable, pas seulement le nom. */
.bb-carte--lien {
	position: relative;
}

.bb-carte--lien a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 1024px) {
	.bb-cartes > .mb-container__inner,
	.bb-cartes > .mb-container > .mb-container__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.bb-cartes > .mb-container__inner,
	.bb-cartes > .mb-container > .mb-container__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ---------- Pages légales ---------- */

.bb-legal h2 {
	margin: 1.6em 0 0.4em;
	font-size: 20px;
	font-weight: 600;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

/* Les ancres s'arrêtent sous l'en-tête fixe, en douceur. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 116px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Contour visible au clavier, partout. */
.mb-site-main a:focus-visible,
.mb-site-main button:focus-visible,
.bb-asvel:focus-visible,
.bb-radar:focus-visible {
	outline: 2px solid var(--mb-accent);
	outline-offset: 3px;
}

/* ---------- Menu : survol et page en cours soulignés de rouge ---------- */

@media (min-width: 1025px) {
	.bb-entete .mb-menu__list > li > a {
		position: relative;
	}

	.bb-entete .mb-menu__list > li > a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 2px;
		left: 0;
		height: 3px;
		border-radius: 2px;
		background: var(--mb-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.2s;
	}

	.bb-entete .mb-menu__list > li > a:hover::after,
	.bb-entete .mb-menu__list > li > a:focus-visible::after,
	.bb-entete .mb-menu__list > .current-menu-item > a::after,
	.bb-entete .mb-menu__list > .current-menu-ancestor > a::after {
		transform: scaleX(1);
	}

	/* Sous-menu « Club » : un peu d'air, page en cours marquée d'un trait rouge. */
	.bb-entete .mb-menu--horizontal .sub-menu {
		min-width: 230px;
		padding: 10px 0;
		border-top: 3px solid var(--mb-primary);
		border-radius: 0 0 8px 8px;
	}

	.bb-entete .sub-menu a {
		padding: 10px 20px;
		font-size: 15px;
	}

	.bb-entete .sub-menu a:hover,
	.bb-entete .sub-menu .current-menu-item > a {
		background: rgba(255, 255, 255, 0.08);
		box-shadow: inset 3px 0 0 var(--mb-accent);
	}
}

/* ---------- Menu sur tablette et mobile ---------- */

@media (max-width: 1024px) {
	/* Le bouton du menu passe tout à droite : son panneau s'ouvre alors dans l'écran. */
	.bb-entete .mb-w-nav-menu {
		order: 3;
	}

	.bb-entete .mb-menu__toggle {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
	}

	.bb-entete .mb-menu.is-open .mb-menu__panel {
		width: min(340px, calc(100vw - 32px));
		margin-top: 14px;
		padding: 8px 22px 14px;
		border-top: 3px solid var(--mb-primary);
	}

	.bb-entete .mb-menu__list li {
		border-bottom-color: rgba(255, 255, 255, 0.12);
	}

	.bb-entete .mb-menu__list li:last-child {
		border-bottom: 0;
	}

	.bb-entete .mb-menu__list a {
		flex: 1;
		padding: 14px 0;
	}

	.bb-entete .mb-menu__sub-toggle {
		width: 44px;
		height: 44px;
	}

	.bb-entete .mb-menu__sub-toggle svg {
		width: 14px;
		height: 14px;
	}

	.bb-entete .sub-menu a {
		padding: 10px 0;
		font-size: 15px;
		text-transform: none;
	}

	.bb-entete .mb-menu__list .current-menu-item > a {
		color: #fff;
		text-decoration: underline;
		text-decoration-color: var(--mb-accent);
		text-decoration-thickness: 3px;
		text-underline-offset: 6px;
	}
}

/* ---------- Barre des réseaux : seulement quand il y a la place à gauche du contenu ---------- */

@media (max-width: 1339px) {
	.bb-reseaux {
		display: none;
	}
}

/* ---------- Pied de page ---------- */

.bb-pied .mb-menu a {
	padding: 6px 0;
}

.bb-pied .mb-menu .current-menu-item > a {
	font-weight: 600;
}

.bb-pied__titre {
	letter-spacing: 0.08em;
}

/* ---------- Bandeau « À découvrir aussi » ---------- */

.bb-aussi__carte {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.4);
	transition: background-color 0.2s, transform 0.2s;
}

.bb-aussi__carte:hover,
.bb-aussi__carte:focus-within {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

.bb-aussi__carte a {
	color: inherit;
	text-decoration: none;
	outline: none;
}

.bb-aussi__carte a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
}

.bb-aussi__carte a:focus-visible::after {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.bb-aussi__carte::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 20px;
	color: #fff;
	font-size: 20px;
	transform: translateY(-50%);
	transition: transform 0.2s;
}

.bb-aussi__carte:hover::after {
	transform: translate(4px, -50%);
}

/* ---------- Frise de la page Histoire ---------- */

.bb-frise-bloc {
	position: sticky;
	top: 96px;
	z-index: 20;
	background: #fff;
	box-shadow: 0 4px 14px rgba(18, 18, 18, 0.08);
}

.bb-frise {
	display: flex;
	gap: 8px;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
	overflow-x: auto;
}

.bb-frise a {
	flex: none;
	padding: 8px 18px;
	border: 1px solid rgba(18, 18, 18, 0.16);
	border-radius: 999px;
	color: var(--mb-text);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.bb-frise a:hover,
.bb-frise a.est-actif {
	border-color: var(--mb-primary);
	background: var(--mb-primary);
	color: #fff;
}

@media (max-width: 767px) {
	.bb-frise-bloc {
		top: 76px;
	}

	/* Les six périodes tiennent sur une ligne, sans rien couper. */
	.bb-frise {
		gap: 5px;
		padding: 10px 12px;
	}

	.bb-frise a {
		flex: 1;
		padding: 7px 0;
		font-size: 13px;
		text-align: center;
	}
}

/* ---------- Cartes d'équipes : celles qui ouvrent un calendrier le montrent ---------- */

.bb-carte--lien::after {
	content: "↗";
	position: absolute;
	top: 6px;
	right: 10px;
	color: #fff;
	font-size: 15px;
	opacity: 0.75;
	pointer-events: none;
}

.bb-carte--lien:hover {
	background-color: var(--mb-accent);
}