/* ==========================================================================
   Page « Événementiel & prestations » (page-evenementiel-esport.php) — chargée uniquement sur cette page.
   Mêmes jetons et composants que les pages Association et Prévention : encre, pétrole, teal, crème,
   sable ; une seule bordure par élément, survol = changement de couleur. Aucun décor ajouté hors fines
   lignes ondulées validées (bloc devis).
   ========================================================================== */

/* Hero : « Événementiel » sur une ligne, « & prestations » sur la suivante, sans coupure dans les mots. */
.a-hero--evt .a-hero__content {
	max-width: 900px;
}

.a-hero--evt .a-hero__title {
	font-size: clamp(2rem, 11.2vw, 6.2rem);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.a-hero--evt .a-hero__subtitle {
	max-width: 58ch;
	letter-spacing: 0.08em;
}

.a-hero--evt .a-hero__devise {
	max-width: 12ch;
	font-size: clamp(1.05rem, 1.7vw, 1.55rem);
	opacity: 0.85;
	transform: rotate(-5deg);
}

@media (max-width: 640px) {
	.a-hero--evt .a-hero__subtitle {
		font-size: 0.95rem;
	}

	.a-hero--evt .a-hero__content {
		padding-bottom: 72px;
	}

	.a-hero--evt .a-hero__devise {
		position: absolute;
		right: auto;
		bottom: 26px;
		left: var(--a-gutter);
		max-width: 18ch;
		margin: 0;
		font-size: 1.05rem;
		text-align: left;
		transform: rotate(-3deg);
		transform-origin: left bottom;
	}
}

.a-evt-section {
	position: relative;
	padding-block: clamp(56px, 7vw, 96px);
}

.a-evt-section .a-section-head {
	margin-bottom: clamp(22px, 2.6vw, 34px);
}

.a-evt-section p {
	color: var(--a-text);
}

.a-evt-lead {
	max-width: 64ch;
	margin: -8px 0 clamp(24px, 3vw, 34px);
	font-size: 1.125rem;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   1. Nos prestations : six cartes (3 × 2), fond noir bleuté avec variations discrètes
   -------------------------------------------------------------------------- */
.a-evt-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-evt-service {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius);
	background:
		radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in srgb, var(--c-teal) 7%, transparent), transparent 70%),
		color-mix(in srgb, var(--a-petrol-deep) 50%, var(--c-ink));
	transition: border-color 0.2s;
}

.a-evt-service:nth-child(even) {
	background:
		radial-gradient(ellipse 80% 60% at 0% 100%, color-mix(in srgb, var(--c-sand) 5%, transparent), transparent 70%),
		color-mix(in srgb, var(--a-petrol-deep) 40%, var(--c-ink));
}

.a-evt-service:hover,
.a-evt-service:focus-within {
	border-color: var(--a-piping);
}

.a-evt-service__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border: 1px solid var(--a-piping-soft);
	border-radius: 50%;
	color: var(--c-teal);
}

.a-evt-service__icon .a-icon {
	width: 24px;
	height: 24px;
}

.a-evt-service__title {
	margin: 0;
	font-family: var(--a-ff-cond);
	font-stretch: var(--a-fs-cond);
	font-size: clamp(1.3rem, 1.7vw, 1.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-almond);
}

.a-evt-service__text {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.6;
}

.a-evt-service__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 8px;
	font-weight: 700;
}

.a-evt-service__link .a-icon {
	width: 16px;
	height: 16px;
}

.a-evt-note {
	max-width: 70ch;
	margin: 22px 0 0;
	font-size: 0.98rem;
	color: var(--a-muted);
}

/* --------------------------------------------------------------------------
   2. Publics (quatre cartes) + notre approche
   -------------------------------------------------------------------------- */
.a-evt-publics {
	border-block: 1px solid var(--a-line);
	background:
		radial-gradient(ellipse 40% 70% at 0% 40%, color-mix(in srgb, var(--c-teal) 7%, transparent), transparent 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--a-petrol-deep) 55%, var(--c-ink)), var(--c-ink));
}

.a-evt-publics__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-evt-public {
	display: grid;
	grid-template-rows: auto auto 1fr;
	justify-items: center;
	gap: 10px;
	padding: 26px 18px 24px;
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius);
	background: color-mix(in srgb, var(--c-ink) 55%, transparent);
	text-align: center;
}

.a-evt-public__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--a-piping-soft);
	border-radius: 50%;
	color: var(--c-teal);
}

.a-evt-public__icon .a-icon {
	width: 24px;
	height: 24px;
}

.a-evt-public__title {
	margin: 4px 0 0;
	font-family: var(--a-ff-cond);
	font-stretch: var(--a-fs-cond);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-almond);
}

.a-evt-public__text {
	max-width: 26ch;
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.5;
}

/* « Pourquoi Antic ? » : bloc horizontal sobre — titre à gauche, filet vertical, quatre points à droite. */
.a-evt-approach {
	display: grid;
	grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr);
	align-items: center;
	margin-top: clamp(28px, 3.5vw, 44px);
	border: 1px solid var(--a-line-teal);
	border-radius: var(--a-radius);
	background:
		radial-gradient(ellipse 60% 120% at 0% 50%, color-mix(in srgb, var(--c-teal) 10%, transparent), transparent 70%),
		color-mix(in srgb, var(--a-petrol-deep) 75%, var(--c-ink));
}

.a-evt-approach__title {
	align-self: stretch;
	display: flex;
	align-items: center;
	margin: 0;
	padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
	border-right: 1px solid var(--a-line);
	font-family: var(--a-ff-cond);
	font-stretch: var(--a-fs-cond);
	font-size: clamp(1.5rem, 2.2vw, 1.9rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-almond);
}

.a-evt-approach__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px clamp(20px, 3vw, 40px);
	margin: 0;
	padding: clamp(22px, 2.6vw, 30px) clamp(22px, 3vw, 34px);
	list-style: none;
}

.a-evt-approach__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-almond);
}

/* Petite coche turquoise dans une pastille. */
.a-evt-approach__list .a-icon {
	flex: none;
	box-sizing: content-box;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	padding: 4px;
	border: 1px solid var(--a-piping-soft);
	border-radius: 50%;
	color: var(--c-teal);
}

/* --------------------------------------------------------------------------
   3. Nos réalisations : cartes (photo, type, titre, date/lieu, texte) + photos complémentaires
   -------------------------------------------------------------------------- */
.a-evt-works__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-evt-works__grid[data-items="1"] {
	grid-template-columns: minmax(0, 400px);
}

.a-evt-works__grid[data-items="2"] {
	grid-template-columns: repeat(2, minmax(0, 400px));
}

.a-evt-work {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--a-line);
	border-radius: var(--a-radius);
	background: color-mix(in srgb, var(--a-petrol-deep) 45%, var(--c-ink));
	transition: border-color 0.2s;
}

.a-evt-work:hover,
.a-evt-work:focus-within {
	border-color: var(--a-piping);
}

.a-evt-work__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background:
		linear-gradient(135deg, transparent 55%, color-mix(in srgb, var(--c-teal) 8%, transparent) 55%),
		color-mix(in srgb, var(--a-petrol-deep) 70%, var(--c-ink));
}

/* Photo : même cadre 3:2 pour toutes les cartes, recadrage centré. */
.a-evt-work__media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sans photo (en attendant la vraie photo) : emblème Antic discret et centré, à taille fixe,
   sur le même fond que la plaque — plus de mascotte agrandie qui remplit tout le cadre. */
.a-evt-work__mark {
	display: grid;
	place-items: center;
	height: 100%;
}

.a-evt-work__mark .a-evt-work__crest {
	width: auto;
	height: 42%;
	max-width: 40%;
	object-fit: contain;
	opacity: 0.28;
}

.a-evt-work__type {
	position: absolute;
	top: 12px;
	left: 12px;
}

.a-evt-work__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
}

.a-evt-work__title {
	margin: 0;
	font-family: var(--a-ff-body);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-almond);
}

.a-evt-work__title a {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte est cliquable (un seul lien, celui du titre). */
.a-evt-work__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.a-evt-work__title a:focus-visible {
	outline: none;
}

.a-evt-work:focus-within {
	outline: 2px solid var(--c-teal);
	outline-offset: 3px;
}

.a-evt-work__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--c-sand);
}

.a-evt-work__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.a-evt-work__meta .a-icon {
	width: 15px;
	height: 15px;
}

.a-evt-work__text {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.55;
}

.a-evt-work__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--c-teal);
}

.a-evt-work__more .a-icon {
	width: 15px;
	height: 15px;
}

.a-evt-sub {
	margin: clamp(22px, 2.6vw, 32px) 0 12px;
	font-family: var(--a-ff-cond);
	font-stretch: var(--a-fs-cond);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-almond);
}

/* « Retour en images » : bandeau plus bas et plus discret que les cartes (format 16:9, même recadrage). */
.a-evt-works .a-gallery {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.a-evt-works .a-gallery a {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Comment ça se passe ? | Demander un devis (bloc distinct, fines lignes ondulées)
   -------------------------------------------------------------------------- */
.a-evt-request {
	border-top: 1px solid var(--a-line);
	background:
		radial-gradient(ellipse 50% 70% at 0% 100%, color-mix(in srgb, var(--c-teal) 10%, transparent), transparent 70%),
		color-mix(in srgb, var(--a-petrol-deep) 70%, var(--c-ink));
	scroll-margin-top: 80px;
}

.has-kraken-wave-lines .a-evt-request {
	padding-top: calc(clamp(56px, 7vw, 96px) + 100vw * 66 / 2400);
	background:
		var(--a-kraken-wave-lines) center top / 100% auto no-repeat,
		radial-gradient(ellipse 50% 70% at 0% 100%, color-mix(in srgb, var(--c-teal) 10%, transparent), transparent 70%),
		color-mix(in srgb, var(--a-petrol-deep) 70%, var(--c-ink));
}

.a-evt-request__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: start;
	gap: clamp(32px, 5vw, 72px);
}

.a-evt-request__title,
.a-evt-request__form-title {
	margin: 0 0 clamp(22px, 2.6vw, 30px);
	font-family: var(--a-ff-cond);
	font-stretch: var(--a-fs-cond);
	font-size: clamp(2.2rem, 4.2vw, 3.3rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-almond);
}

.a-evt-request__form-title {
	margin-bottom: 18px;
	font-size: clamp(1.6rem, 2.4vw, 2rem);
}

/* Étapes : grand numéro teal, titre crème, description. */
.a-evt-steps {
	position: relative;
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.a-evt-step {
	position: relative;
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	gap: 18px;
	padding-bottom: 26px;
}

.a-evt-step:last-child {
	padding-bottom: 0;
}

/* Filet entre les numéros (s'arrête au dernier). */
.a-evt-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 52px;
	bottom: 0;
	left: 26px;
	width: 1px;
	background: color-mix(in srgb, var(--c-teal) 55%, transparent);
}

.a-evt-step__num {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--c-teal);
	border-radius: 50%;
	background: var(--c-ink);
	font-family: var(--a-ff-cond);
	font-stretch: var(--a-fs-cond);
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--c-teal);
}

.a-evt-step__body {
	padding-top: 4px;
}

.a-evt-step__title {
	margin: 0;
	font-family: var(--a-ff-cond);
	font-stretch: var(--a-fs-cond);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--c-almond);
}

.a-evt-step__text {
	margin: 6px 0 0;
	font-size: 1.0625rem;
	line-height: 1.55;
}

.a-evt-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 8px;
	margin: 30px 0 0;
	color: var(--a-muted);
}

.a-evt-more .a-link {
	display: inline-block;
	padding-block: 8px;
	font-weight: 700;
}

.a-evt-request__form {
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--a-line-teal);
	border-radius: var(--a-radius);
	background: var(--c-ink);
}

.a-evt-request__form .a-btn {
	width: 100%;
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.a-evt-publics__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.a-evt-services__grid,
	.a-evt-works__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.a-evt-request__grid,
	.a-evt-approach {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Titre au-dessus des points : le filet vertical devient horizontal. */
	.a-evt-approach__title {
		padding-bottom: 16px;
		border-right: 0;
		border-bottom: 1px solid var(--a-line);
	}

	.a-evt-approach__list {
		padding-top: 18px;
	}
}

@media (max-width: 640px) {
	.a-evt-services__grid,
	.a-evt-works__grid,
	.a-evt-works__grid[data-items="1"],
	.a-evt-works__grid[data-items="2"],
	.a-evt-approach__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.a-evt-publics__grid {
		gap: 10px;
	}

	.a-evt-public {
		padding: 20px 12px 18px;
	}

	.a-evt-public__title {
		font-size: 1.05rem;
	}

	.a-evt-public__text {
		font-size: 0.92rem;
	}

	.a-evt-lead {
		font-size: 1.0625rem;
	}

	/* Galerie : une colonne, photos basses (16:9) et serrées. */
	.a-evt-works .a-gallery {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

@media (max-width: 360px) {
	.a-evt-publics__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}