/* Catalogue activités — archive-activite.php. Auto-contenu (tokens = assets/css/tokens.css). */
.arch{overflow-x:hidden}
.arch-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;color:#fff;isolation:isolate;overflow:hidden}
.arch-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.arch-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in srgb,var(--overlay) 92%,transparent),color-mix(in srgb,var(--overlay) 35%,transparent) 60%,transparent)}
.arch-hero__in{max-width:1320px;margin:0 auto;padding:0 54px 64px;width:100%}
.arch-crumb{font:600 13px/1 var(--fb);color:rgba(255,255,255,.85);margin-bottom:16px}
.arch-crumb a{color:inherit;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.arch-hero h1{font-family:var(--ft);font-weight:800;letter-spacing:-.03em;font-size:clamp(38px,6vw,84px);color:#fff;margin:0 0 16px}
.arch-hero p{max-width:60ch;font-size:18px;line-height:1.6;color:rgba(255,255,255,.92);margin:0}
.arch-univ{background:var(--paper);padding:72px 0}
.arch-univ .wrap{max-width:1320px;margin:0 auto;padding:0 54px}
.arch-univ__head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:10px;margin-bottom:30px}
.arch-univ__jeton{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--teal)}
.arch-univ__jeton svg{width:28px;height:28px}
.arch-univ__head h2{font-family:var(--ft);font-weight:800;letter-spacing:-.03em;font-size:clamp(24px,3vw,36px);margin:0;color:var(--ink)}
.arch-univ__count{font-size:14px;color:var(--ink-soft,#5C706C)}
.arch-univ__more{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--ft);font-weight:800;font-size:14px;color:var(--gold-ink,#785F1F)}
.arch-univ__more:hover{text-decoration:underline}
.arch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.arch-univ[data-univ="sport-piscine"] .arch-univ__head{background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 14%,transparent),transparent)}
.arch-univ[data-univ="studio-wellness"] .arch-univ__head{background:linear-gradient(90deg,color-mix(in srgb,var(--deep) 14%,transparent),transparent)}
.arch-univ[data-univ="enfants"] .arch-univ__head{background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 16%,transparent),transparent)}
.arch-univ[data-univ="entreprises"] .arch-univ__head{background:linear-gradient(90deg,color-mix(in srgb,var(--deep) 14%,transparent),transparent)}
:where(.arch a,.arch .btn):focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media(max-width:900px){.arch-hero__in{padding:0 22px 44px}.arch-univ{padding:52px 0}.arch-univ .wrap{padding:0 22px}.arch-grid{grid-template-columns:1fr 1fr;gap:16px}.arch-univ__more{margin-left:0;flex-basis:100%}}

/* ---- Cartes .ocard (copie verbatim depuis blocks/av-u-activites/style.css) ----
   Le helper av_render_activite_card() est rendu hors de son bloc habituel sur
   cette archive native : ses styles ne sont donc pas chargés autrement.
   Dette technique assumée (voir task-1-brief.md, Step 3). La grille (.ogrid,
   .S, .amap, .subfilter…) N'EST PAS copiée : .arch-grid fournit le layout ici. */
.ocard {
	background: var(--white);
	border: 1px solid var(--paper2);
	border-radius: var(--r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px color-mix(in srgb,var(--overlay) 5%,transparent);
	transition: transform .24s ease, box-shadow .24s ease;
}
.ocard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -20px color-mix(in srgb,var(--overlay) 36%,transparent); }

.oimg { position: relative; aspect-ratio: 363/230; overflow: hidden; background: var(--paper2); }
.oimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ocard:hover .oimg img { transform: scale(1.05); }

/* Placeholder de marque quand une activité n'a pas de photo */
.oimg--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--deep), var(--abyss)); }
.oimg--ph .oimg-ph { display: inline-flex; color: var(--gold); opacity: .55; }
.oimg--ph .oimg-ph svg { width: 44px; height: 44px; }

.obadge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	font: 800 10px/1 var(--fb);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--abyss);
	background: var(--gold);
	padding: 7px 10px;
	border-radius: 999px;
}

.obd { padding: 18px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.obd h3 { font: 800 20px/1.12 var(--ft); color: var(--ink); letter-spacing: -.01em; }
.obd p { font: 500 14px/1.5 var(--fb); color: var(--ink-soft); margin: 8px 0 0; flex: 1; }

.ometa { display: flex; align-items: center; gap: 9px; margin-top: 14px; font: 600 12.5px/1 var(--fb); color: var(--ink); }
.ometa .mdot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* ---- Deux liens par carte (copié depuis av-offres/style.css) ---- */
.oacts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.odetail { font: 800 13px/1 var(--ft); color: var(--teal-ink); border-bottom: 1.5px solid transparent; padding: 4px 0; transition: border-color .2s; }
.odetail:hover { border-color: var(--gold); }
.obook {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--r-sm);
	background: var(--teal);
	color: #fff;
	font: 800 13px/1 var(--ft);
	transition: background .2s, transform .2s;
}
.obook:hover { background: var(--deep); transform: translateY(-2px); }
.obook .ar { color: #fff; transition: transform .2s; }
.obook:hover .ar { transform: translateX(2px); }
.obook:focus-visible, .odetail:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (max-width: 380px) {
	.oacts { flex-direction: column; align-items: stretch; }
	.obook { justify-content: center; }
	.odetail { text-align: center; }
}

/* ---- CTA final (copie de av-final/style.css) ---- */
.final{position:relative;color:#fff;text-align:center;isolation:isolate;overflow:hidden}
.final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.final::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,color-mix(in srgb,var(--overlay) 92%,transparent),color-mix(in srgb,var(--deep) 66%,transparent) 60%,color-mix(in srgb,var(--primary) 36%,transparent))}
.final .in{padding:var(--s7) 24px;max-width:760px;margin:0 auto}
.final .kicker{justify-content:center;color:var(--gold)}
.final .kicker::before{display:none}
.final h2{color:#fff;font-size:clamp(34px,4.6vw,68px);margin:20px 0 18px}
.final p{color:rgba(255,255,255,.9);margin:0 0 32px;font-size:18px}
@media (max-width:760px){.final .in{padding:64px 16px}}