/*
Theme Name: ASCAR — Carquois
Theme URI: https://ascar-chinon.fr
Author: Maudevo Studio
Author URI: https://maudevo-studio.fr
Description: Thème ASCAR "Carquois" — hero deux colonnes, chiffres clés, parcours en 3 étapes, disciplines, horaires et actualités, entièrement personnalisable depuis "Personnaliser ASCAR".
Version: 1.0
Requires PHP: 7.4
Text Domain: ascar-carquois
*/

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/oswald-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/source-serif-4-400.woff2') format('woff2');
}

:root {
	--cream: #f6f3ec;
	--ink: #14161a;
	--ink-70: rgba(20, 22, 26, 0.7);
	--ink-50: rgba(20, 22, 26, 0.5);
	--white: #ffffff;
	--white-70: rgba(255, 255, 255, 0.7);
	--white-50: rgba(255, 255, 255, 0.5);
	--white-14: rgba(255, 255, 255, 0.14);
	--red: #cf2027;
	--gold: #ffc91f;
	--blue: #1b7fbf;

	--font-display: 'Oswald', sans-serif;
	--font-body: 'Source Serif 4', Georgia, serif;

	--container-pad: clamp(1.25rem, 4vw, 2.75rem);
	--section-pad: clamp(3.5rem, 7vw, 6rem);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.1;
}

h2 {
	font-size: clamp(28px, 3vw, 40px);
}

.container {
	width: min(1240px, 92vw);
	margin-inline: auto;
}

.container-narrow {
	max-width: 760px;
}

.section {
	padding-block: var(--section-pad);
}

.kicker,
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 2.76px;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 1rem;
}

.kicker-line,
.eyebrow-line {
	width: 34px;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}

.text-link {
	font-family: var(--font-display);
	font-size: 13.5px;
	letter-spacing: 1.62px;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}

.steps-intro .text-link {
	border-bottom: 2px solid var(--gold);
	padding-bottom: 4px;
}

.horaires .text-link {
	color: var(--gold);
}

.news .text-link {
	color: var(--blue);
}

.btn {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	padding: 16px 30px;
	border-radius: 4px;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
	background: var(--red);
	color: var(--white);
}

.btn-primary:hover {
	background: var(--gold);
	color: var(--ink);
}

.btn-outline {
	background: transparent;
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.28);
	padding: 16px 24px;
}

.btn-outline:hover {
	background: var(--white);
	color: var(--ink);
}

.btn-dark {
	background: var(--ink);
	color: var(--white);
	padding: 18px 32px;
}

.btn-dark:hover {
	background: var(--red);
	color: var(--white);
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block: 1.75rem;
}

.section-heading {
	max-width: 640px;
	margin-bottom: 36px;
}

.section-heading p {
	color: var(--ink-70);
	margin-top: 0.5rem;
}

.section-heading-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header-top {
	background: var(--ink);
}

.site-header-top-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 9px;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 1.76px;
}

.header-top-name {
	color: rgba(255, 255, 255, 0.62);
	text-transform: uppercase;
}

.header-top-right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.ffta-badge {
	color: rgba(255, 255, 255, 0.62);
}

.membres-link {
	color: var(--gold);
	text-transform: uppercase;
}

.site-header-main {
	background: rgba(246, 243, 236, 0.94);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(20, 22, 26, 0.08);
}

.site-header-main-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.85rem;
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--blue);
}

.site-logo {
	height: 52px;
	width: auto;
}

.site-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.site-title {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ink);
	font-size: 21px;
}

.site-tagline {
	display: block;
	font-size: 10.5px;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: #8a8375;
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid rgba(20, 22, 26, 0.2);
	border-radius: 6px;
	cursor: pointer;
	width: 46px;
	height: 46px;
	position: relative;
}

.menu-toggle-bar,
.menu-toggle-bar::before,
.menu-toggle-bar::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	background: var(--ink);
}

.menu-toggle-bar {
	top: 22px;
	left: 12px;
	right: 12px;
}

.menu-toggle-bar::before {
	top: -7px;
}

.menu-toggle-bar::after {
	top: 7px;
}

.primary-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 1.5rem;
	row-gap: 0.4rem;
	font-family: var(--font-display);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.primary-nav ul li,
.primary-nav ul a {
	white-space: nowrap;
}

.primary-nav li {
	position: relative;
}

.primary-nav > ul > li > a {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
}

.primary-nav > ul > li > a:hover {
	color: var(--red);
	border-bottom-color: var(--red);
}

.primary-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 0.4em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.primary-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	flex-direction: column;
	min-width: 220px;
	background: var(--cream);
	border: 1px solid rgba(20, 22, 26, 0.08);
	box-shadow: 0 8px 20px rgba(20, 22, 26, 0.12);
	padding: 0.5rem 0;
	row-gap: 0;
	z-index: 10;
}

.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
	display: flex;
}

.primary-nav .sub-menu a {
	display: block;
	padding: 0.6rem 1.1rem;
}

.primary-nav .sub-menu a:hover {
	color: var(--red);
}

/* ---------- Hero ---------- */

.hero {
	--lanes: none;
	position: relative;
	overflow: hidden;
	background:
		var(--lanes),
		linear-gradient(122deg, rgba(9, 10, 12, 1) 0%, rgba(9, 10, 12, 0.99) 22%, rgba(12, 14, 17, 0.82) 48%, rgba(16, 18, 22, 0.18) 86%),
		linear-gradient(to top, rgba(14, 16, 19, 0.72) 0%, rgba(14, 16, 19, 0.34) 18%, rgba(14, 16, 19, 0) 46%),
		var(--hero-bg) center 38% / cover no-repeat,
		var(--ink);
	color: var(--white);
	padding-top: 96px;
	padding-bottom: 156px;
}

.hero.has-lanes {
	--lanes: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 132px);
}

.hero-target-decor {
	position: absolute;
	top: -18%;
	right: -14%;
	width: 46%;
	max-width: 620px;
	aspect-ratio: 1 / 1;
	pointer-events: none;
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 2.5rem;
	align-items: center;
}

.hero .eyebrow {
	color: var(--gold);
}

.hero h1 {
	font-size: clamp(44px, 5.6vw, 86px);
	line-height: 0.94;
	letter-spacing: -0.01em;
	margin-bottom: 1.25rem;
}

.hero-title-accent {
	color: var(--gold);
}

.hero-lead {
	color: var(--white-70);
	max-width: 46ch;
}

.hero-media {
	position: relative;
}

.hero-media-frame {
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

.hero-media img {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	display: block;
}

.hero-badge {
	position: absolute;
	top: 1.5rem;
	left: -1rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	max-width: 220px;
	background: var(--gold);
	color: var(--ink);
	padding: 1rem 1.25rem;
	border-radius: 4px;
	box-shadow: 0 10px 24px rgba(20, 22, 26, 0.3);
}

.hero-badge-kicker {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hero-badge-text {
	color: var(--ink-70);
	font-size: 0.85rem;
}

/* ---------- Bandeau d'alerte ---------- */
/* 3 niveaux, sur les couleurs de cible déjà utilisées par le thème plutôt
   qu'une palette d'alerte générique (voir ascar-render-target-svg). */

/* Avant le hero plutôt que dedans : .hero a overflow:hidden (pour le
   cercle décoratif), ce qui casserait le sticky au-delà de sa hauteur.
   Fond crème comme la barre de menu principale — un aplat encre ici se
   fondait avec la barre noire du dessus en un seul gros bloc, et posait
   aussi problème une fois collé au-dessus des sections sombres plus bas
   (horaires, footer) pendant le scroll. --header-h est posée en JS
   (assets/js/main.js) sur la hauteur réelle du header, 116px sert de
   repli tant que le script n'a pas tourné. */
.alert-banner {
	position: sticky;
	top: var(--header-h, 116px);
	z-index: 90;
	background: var(--white);
	border-bottom: 1px solid rgba(20, 22, 26, 0.08);
}

.alert-banner-inner {
	display: flex;
	align-items: stretch;
}

/* Ruban en pointe façon étiquette — clip-path plutôt qu'une pastille,
   pour un rendu plus "signalétique" que le fond plein testé avant.
   Déborde d'1px en haut/bas (et padding compensé d'autant) pour couvrir
   l'interstice de sous-pixel que le clip-path laisse parfois avec la
   barre au niveau de sa pointe. */
.alert-banner-ribbon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 168px;
	margin-block: -1px;
	padding: 19px 30px 19px 22px;
	background: var(--blue);
	clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%);
	animation: alert-banner-ribbon-pulse 2.4s ease-in-out infinite;
}

/* Pulsation douce (variation de luminosité, pas un vrai clignotement) —
   test à valider, voir aussi prefers-reduced-motion plus bas. */
@keyframes alert-banner-ribbon-pulse {
	0%,
	100% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(1.35);
	}
}

@media (prefers-reduced-motion: reduce) {
	.alert-banner-ribbon {
		animation: none;
	}
}

.alert-banner-kicker {
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--white);
}

.alert-banner-body {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 16px 26px;
}

.alert-banner-title {
	display: block;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ink);
}

.alert-banner-message {
	margin: 0;
	color: var(--ink-70);
	font-size: 14.5px;
	line-height: 1.5;
}

.alert-banner-link {
	flex-shrink: 0;
	align-self: center;
	margin-right: 26px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: underline;
	color: var(--ink);
}

.alert-banner--danger .alert-banner-ribbon {
	background: var(--red);
}

.alert-banner--attention .alert-banner-ribbon {
	background: var(--gold);
}

.alert-banner--attention .alert-banner-kicker {
	color: var(--ink);
}

.alert-banner--info .alert-banner-ribbon {
	background: var(--blue);
}

@media (max-width: 560px) {
	/* Pas de sticky sur mobile : un message un peu long en sticky peut
	   occuper une bonne partie d'un petit écran en permanence pendant tout
	   le scroll. Reste visible sans scroller au chargement (toujours en
	   haut de page), mais défile ensuite normalement avec le reste. */
	.alert-banner {
		position: static;
	}

	/* Le ruban plein-largeur devient un petit badge au-dessus du titre —
	   en barre pleine largeur sans la pointe, ça fait un aplat de couleur
	   aussi lourd que le fond encre abandonné plus haut. */
	.alert-banner-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 22px;
		border-top: 4px solid;
	}

	/* Même liseré que les cartes chiffres/tarifs — compense la couleur
	   perdue une fois le ruban réduit à un simple badge. */
	.alert-banner--danger .alert-banner-inner {
		border-top-color: var(--red);
	}

	.alert-banner--attention .alert-banner-inner {
		border-top-color: var(--gold);
	}

	.alert-banner--info .alert-banner-inner {
		border-top-color: var(--blue);
	}

	.alert-banner-ribbon {
		width: auto;
		margin: 0 0 10px;
		padding: 4px 14px;
		border-radius: 999px;
		clip-path: none;
	}

	.alert-banner-body {
		flex: 1 1 auto;
		justify-content: flex-start;
		padding: 0;
	}

	.alert-banner-link {
		align-self: flex-start;
		margin: 10px 0 0;
	}
}

/* ---------- Stats ---------- */

.stats {
	padding-block: 0;
}

.stats-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px;
	margin-top: -92px;
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 30px 26px 28px;
	background: var(--white);
	border-radius: 8px;
	border-top: 4px solid var(--gold);
	box-shadow: 0 20px 44px -28px rgba(20, 22, 26, 0.45);
}

.stat:nth-child(4n + 2) {
	border-top-color: var(--red);
}

.stat:nth-child(4n + 3) {
	border-top-color: var(--blue);
}

.stat:nth-child(4n + 4) {
	border-top-color: var(--ink);
}

.stat-figure {
	line-height: 1;
}

.stat-value {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(42px, 4vw, 58px);
	color: var(--ink);
}

.stat-suffix {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.5em;
	color: var(--ink);
	text-transform: uppercase;
	vertical-align: super;
	margin-left: 0.15em;
}

.stat-label {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	color: var(--ink);
}

.stat-sub {
	color: #5f5a50;
	font-size: 0.85rem;
}

/* ---------- Steps ---------- */

.steps {
	padding-top: 104px;
	padding-bottom: 20px;
}

.steps-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
}

.steps-intro p {
	color: var(--ink-70);
	margin-block: 1rem 1.25rem;
}

.steps-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(20, 22, 26, 0.12);
	border-radius: 8px;
	overflow: hidden;
}

.step {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 26px 28px;
	background: var(--white);
}

.step-number {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 600;
	color: var(--gold);
	flex-shrink: 0;
}

.step:nth-child(3n + 2) .step-number {
	color: var(--red);
}

.step:nth-child(3n + 3) .step-number {
	color: var(--blue);
}

.step-body h3 {
	font-size: 1.1rem;
	margin-bottom: 0.4rem;
}

.step-body p {
	color: var(--ink-70);
	font-size: 0.95rem;
}

/* ---------- Disciplines ---------- */

.disciplines {
	padding-top: 96px;
	padding-bottom: 0;
}

.disciplines-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px;
}

.discipline-card {
	background: var(--white);
	border: 1px solid rgba(20, 22, 26, 0.14);
	border-radius: 8px;
	padding: 26px 22px 24px;
	transition: border-color 0.2s ease;
}

.discipline-card:hover {
	border-color: var(--ink);
}

.discipline-tag {
	display: block;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 0.6rem;
}

.discipline-card h3 {
	font-size: 21px;
	margin-bottom: 0.5rem;
}

.discipline-card p {
	color: var(--ink-70);
	font-size: 0.9rem;
}

/* ---------- Horaires ---------- */

.horaires {
	background: var(--ink);
	color: var(--white);
	margin-top: 96px;
	padding-top: 76px;
	padding-bottom: 76px;
}

.horaires-lead {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.15rem;
	line-height: 1.6;
	max-width: 60ch;
}

/* ---------- News ---------- */

.news {
	padding-top: 96px;
	padding-bottom: 96px;
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
}

.news-card {
	display: flex;
	flex-direction: column;
}

.news-card-media {
	aspect-ratio: 16 / 10;
	background: #e7e2d6;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card-fallback {
	font-size: 2rem;
}

.news-card-body {
	padding-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.news-card-date {
	font-size: 11px;
	color: var(--red);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.news-card-cat {
	font-size: 11px;
	color: #7c7566;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.news-card-body h3 {
	font-size: 22px;
	text-transform: none;
	margin-block: 0.2rem;
}

.news-card:hover .news-card-body h3 {
	color: var(--red);
}

.news-card-body p {
	color: var(--ink-70);
	font-size: 0.9rem;
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--ink);
	color: var(--white-70);
	padding-top: 56px;
	padding-bottom: 24px;
}

.footer-brand {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 2.5rem;
}

.footer-club-name {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: var(--white);
	font-weight: 600;
}

.footer-ffta {
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.66);
}

.footer-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 44px;
	padding-bottom: 24px;
}

.footer-col h3 {
	font-size: 11.5px;
	letter-spacing: 1.84px;
	color: var(--gold);
	margin-bottom: 1rem;
}

.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: 15.5px;
}

.footer-col ul a {
	color: rgba(255, 255, 255, 0.66);
}

.footer-col-concours p {
	font-size: 0.9rem;
	margin-bottom: 0.6rem;
}

.footer-concours-link {
	font-family: var(--font-display);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gold);
}

.footer-partners {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: center;
	padding-block: 1.5rem;
}

.footer-partner {
	color: var(--white-50);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Carte blanche plutôt qu'un filtre (grayscale+brightness) qui comptait
   sur des logos en PNG transparent — deux des logos fournis sont des
   .jpg à fond blanc opaque, le filtre les faisait ressortir en gros
   pavé blanc plutôt que de les fondre dans le fond sombre. */
.footer-partner img {
	max-height: 48px;
	background: var(--white);
	padding: 10px 16px;
	border-radius: 6px;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.5rem;
}

.footer-copyright {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.66);
}

.footer-legal-link {
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- Pages / articles ---------- */

.page-content h1 {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}

.entry-content {
	font-size: 1rem;
	line-height: 1.75;
}

.entry-content a {
	color: var(--blue);
}

.entry-content a:hover {
	color: var(--red);
}

.entry-content > * + * {
	margin-top: 1.1em;
}

.single-thumbnail {
	margin-block: 1.5rem;
	border-radius: 6px;
	overflow: hidden;
}

.content-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-block: 1.5rem;
}

.content-gallery img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(20, 22, 26, 0.12);
}

.content-map {
	margin-block: 1.5rem;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(20, 22, 26, 0.12);
}

.content-map iframe {
	display: block;
	width: 100%;
}

.entry-content h2 {
	font-family: var(--font-display);
	font-size: 26px;
	text-transform: uppercase;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(20, 22, 26, 0.14);
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(20, 22, 26, 0.14);
}

.pagination a {
	font-family: var(--font-display);
	font-size: 13.5px;
	letter-spacing: 1.62px;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}

.pagination a:hover {
	color: var(--blue);
}

.pagination-next {
	margin-left: auto;
}

/* ---------- Bandeau de page standard ---------- */

.page-banner {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(122deg, rgba(9, 10, 12, 0.99) 0%, rgba(11, 13, 16, 0.9) 40%, rgba(16, 18, 22, 0.42) 88%),
		var(--hero-bg) center 42% / cover no-repeat,
		var(--ink);
	color: var(--white);
	padding: 74px 0 78px;
}

.page-banner-target-decor {
	position: absolute;
	top: -70px;
	right: -90px;
	width: 340px;
	height: 340px;
	pointer-events: none;
}

.page-banner-inner {
	position: relative;
	z-index: 1;
}

.breadcrumb {
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white-50);
	margin-bottom: 1rem;
}

.breadcrumb a {
	color: var(--white-70);
}

.breadcrumb a:hover {
	color: var(--gold);
}

.breadcrumb-sep {
	margin-inline: 0.5em;
}

.breadcrumb-current {
	color: var(--gold);
}

.page-banner h1 {
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	line-height: 1;
}

.page-banner-lead {
	margin-top: 1rem;
	max-width: 58ch;
	color: var(--white-70);
}

.page-body {
	padding-block: 64px 96px;
}

.page-body-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	width: min(1240px, 92vw);
	margin-inline: auto;
}

.page-main {
	flex: 1 1 520px;
}

.page-main > * + * {
	margin-top: 1.1em;
}

.page-main > h2 {
	margin-top: 2.75rem;
}

.page-sidebar {
	flex: 0 1 300px;
	position: sticky;
	top: 112px;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.page-sidebar .widget-title {
	font-family: var(--font-display);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

/* ---------- Tarifs / inscription ---------- */

.pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
	margin-block: 1.5rem 2.5rem;
}

.pricing-card {
	background: var(--white);
	border: 1px solid rgba(20, 22, 26, 0.14);
	border-top: 4px solid var(--ink);
	border-radius: 8px;
	padding: 22px 20px;
}

.pricing-card--red {
	border-top-color: var(--red);
}

.pricing-card--blue {
	border-top-color: var(--blue);
}

.pricing-card--gold {
	border-top-color: var(--gold);
}

.pricing-card-cat {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.2rem;
}

.pricing-card-age {
	color: var(--ink-50);
	font-size: 0.82rem;
	margin-bottom: 1rem;
}

.pricing-card-price {
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 600;
}

.pricing-card-detail {
	color: var(--ink-70);
	font-size: 0.82rem;
	margin-top: 0.3rem;
}

.price-list {
	border-top: 1px solid rgba(20, 22, 26, 0.14);
	margin-bottom: 1.5rem;
}

.price-list-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 14px 0;
	border-bottom: 1px solid rgba(20, 22, 26, 0.14);
}

.price-list-note {
	color: var(--ink-50);
	font-size: 0.85rem;
}

.price-list-value {
	font-family: var(--font-display);
	font-weight: 600;
	white-space: nowrap;
}

.sidebar-callout {
	background: var(--gold);
	border-radius: 8px;
	padding: 20px 22px;
}

.sidebar-callout-kicker {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.sidebar-callout p {
	color: var(--ink-70);
	font-size: 0.9rem;
}

.sidebar-links {
	background: var(--white);
	border: 1px solid rgba(20, 22, 26, 0.14);
	border-radius: 8px;
	overflow: hidden;
}

.sidebar-links a {
	display: block;
	padding: 14px 18px;
	font-family: var(--font-display);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(20, 22, 26, 0.1);
}

.sidebar-links a:last-child {
	border-bottom: none;
}

.sidebar-links a:hover {
	color: var(--blue);
}

.sidebar-link-more {
	font-family: var(--font-display);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.callout-alert {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	background: rgba(207, 32, 39, 0.06);
	border-left: 3px solid var(--red);
	border-radius: 4px;
	padding: 18px 20px;
	margin-top: 1.5rem;
}

.callout-alert-kicker {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--red);
}

.callout-alert p {
	color: var(--ink-70);
	font-size: 0.9rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.hero-grid,
	.steps-grid {
		grid-template-columns: 1fr;
	}

	.hero-media {
		order: -1;
	}

	.hero-target-decor {
		display: none;
	}

	.primary-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--cream);
		border-bottom: 1px solid rgba(20, 22, 26, 0.08);
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav ul {
		flex-direction: column;
		gap: 0;
		padding: 1rem var(--container-pad) 1.5rem;
	}

	.primary-nav li {
		padding-block: 15px;
		border-bottom: 1px solid rgba(20, 22, 26, 0.1);
	}

	.primary-nav .sub-menu {
		display: flex;
		position: static;
		flex-direction: column;
		border: none;
		box-shadow: none;
		background: transparent;
		padding: 0.5rem 0 0 1rem;
	}

	.primary-nav .sub-menu a {
		padding: 0.5rem 0;
	}

	.menu-toggle {
		display: block;
	}
}

@media (max-width: 820px) {
	.page-banner-target-decor {
		display: none;
	}

	.page-banner {
		padding: 48px 0 64px;
	}

	.page-body-inner {
		width: min(1240px, 88vw);
	}

	.container {
		width: min(1240px, 88vw);
	}

	.page-sidebar {
		position: static;
		flex-basis: 100%;
	}
}

@media (max-width: 560px) {
	.site-header-top-inner {
		font-size: 0.7rem;
	}

	.header-top-name {
		display: none;
	}
}