/* =============================================================================
   OSE & SASE — main stylesheet
   Step 1 scaffolding only: design tokens (CLAUDE.md §4), self-hosted fonts,
   and a minimal reset. NO section styles yet — those come in later steps.
   Write section CSS with logical properties (margin-inline, text-align:start…)
   so the RTL/Arabic pass (§9-ter, §10 step 12) mirrors automatically.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Self-hosted webfonts  (§4 — no Google Fonts CDN)
   ---------------------------------------------------------------------------
   NOTE: the .woff2 files below are NOT yet in /assets/fonts/. They must be
   added (client / designer). Filenames are the expected convention — adjust to
   match the actual files once provided. Until then the font-family declarations
   fall back to the system sans-serif stack.

   Arabic font is [TBD] (§4): Cairo / Tajawal / Noto Sans Arabic / IBM Plex Sans
   Arabic — pending client approval. Its @font-face is added in the RTL pass and
   applied only for :lang(ar) / [dir="rtl"].
   -------------------------------------------------------------------------- */

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* Arabic webfont — Cairo (client-approved). Montserrat/Poppins have no Arabic
   glyphs (§4). Applied only for the RTL / Arabic layer (see section 2). The
   .woff2 files are [TBD] (added to /assets/fonts/); until then it falls back. */
@font-face {
	font-family: "Cairo";
	src: url("../fonts/cairo-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cairo";
	src: url("../fonts/cairo-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Design tokens  (§4)
   -------------------------------------------------------------------------- */

:root {
	/* Colors --------------------------------------------------------------- */
	--color-brand-blue:    #4A6DCC; /* logos, brand elements, accents, headings */
	--color-blue-ink:      #4463C2; /* slightly darker blue for body text → AA on grey (§3.13) */
	--color-brand-orange:  #FF9E32; /* legacy accent (logos keep it); superseded by copper in v2 */
	/* Copper (v2 mockup). PROVISIONAL — sampled from the mockup; the client will
	   provide the exact hex. To swap: update these two tokens AND the rgba copies
	   in --color-header-bg and .about__band-overlay (they mirror the deep copper). */
	--color-copper:        #D08A45; /* deep copper — header + section bands */
	/* Light copper — SAMPLED from the v2 mockup's "Télécharger" button, which is
	   a flat fill (identical on the Programme and Formulaire pages). This one is
	   measured, not eyeballed; the deep copper above is still provisional (the
	   header/bands are semi-transparent over the photo, so no flat sample of it
	   exists in the mockup). */
	--color-copper-light:  #F5AA66; /* light copper — download buttons + warm accents */
	/* "Télécharger" label — sampled from the same button. On #F5AA66 it scores
	   3.26:1, i.e. AA only as WCAG "large text" (3:1, not the 4.5:1 of normal
	   text). The label is Medium (500), matching the mockup — NOT bold — so the
	   large-text threshold is the full 18pt = 24px, and .btn--download's 24px is
	   a HARD FLOOR with no margin left. (Bold would have qualified from 18.66px.)
	   Shrinking the label, or lightening it below 500, breaks AA unless this blue
	   is darkened first — #2D467D scores 4.74:1 and passes at any size. */
	--color-download-text: #3C5DA7;
	--color-bg-grey:       #EDEDED; /* content section background */
	--color-text:          #1A1A1A; /* body text */
	--color-white:         #FFFFFF;

	/* Hero photo dark overlay. Opacity is [TBD] — confirm against the mockup. */
	--color-hero-overlay:  rgba(0, 0, 0, 0.5);

	/* Primary action color. Defaults to brand orange (§4); switch to
	   --color-copper only if the client prefers the muted mockup shade. */
	--color-primary:       var(--color-copper);

	/* Buttons — client decision: BLACK, faithful to the mockup (header + hero).
	   To switch site-wide to the §4 orange, set --color-button:var(--color-copper). */
	--color-button:        #1A1A1A;
	--color-button-text:   #FFFFFF;

	/* Header bar + section bands (v2 mockup): deep copper #D08A45 at 85%, so the
	   hero/office photo shows through only faintly. */
	--color-header-bg:       rgba(208, 138, 69, 0.85);

	/* Typography ----------------------------------------------------------- */
	--font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	/* --font-arabic set in the RTL pass once the font is approved (§4). */

	--weight-heading: 700;
	--weight-nav:     500; /* nav links + header CTAs: medium, per mockup */
	--weight-body:    400;

	/* Layout --------------------------------------------------------------- */
	--page-width:     1440px; /* mockup reference width — also the content max */
	/* Site-wide inline gutter (left/right), matched to the hero. Desktop scales
	   24→72px; overridden to 24px on tablet/mobile (see responsive section). */
	--gutter:         clamp(24px, 5vw, 72px);
	--container-max:  1200px; /* (legacy token — kept for reference) */
	--container-pad:  24px;   /* (legacy token) */
	--header-height:  72px;   /* sticky header height, offsets the hero behind it */
}

/* -----------------------------------------------------------------------------
   2-bis. Arabic / RTL layer  (§9-ter, §10 step 12)
   ---------------------------------------------------------------------------
   language_attributes() emits dir="rtl" on <html> for Arabic (Polylang locale
   + is_rtl()), so the whole layout mirrors automatically thanks to the logical
   properties used throughout. Here we only swap the font to Cairo and drop
   letter-spacing (which breaks the connected Arabic script).
   -------------------------------------------------------------------------- */

[dir="rtl"] {
	--font-heading: "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-body:    "Cairo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

[dir="rtl"] * {
	letter-spacing: normal;
}

/* -----------------------------------------------------------------------------
   3. Minimal reset / base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	/* Smooth-scroll anchor clicks (e.g. LE SALON → #le-salon on the home page).
	   The header no longer sticks, so anchored sections need only a small comfort
	   gap at the top, not the full header height. */
	scroll-behavior: smooth;
	scroll-padding-block-start: clamp(12px, 3vh, 24px);
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-body);
	color: var(--color-text);
	background-color: var(--color-white);
	line-height: 1.5;
	overflow-x: hidden; /* safety net against any stray horizontal overflow */
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	margin: 0;
}

img,
picture,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

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

/* Accessibility: keep a visible focus outline (HARD RULE §3.13). */
:focus-visible {
	outline: 2px solid var(--color-brand-blue);
	outline-offset: 2px;
}

/* Centered content container — same width & gutter as the hero (site-wide). */
.osesase-container {
	inline-size: 100%;
	max-inline-size: var(--page-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* -----------------------------------------------------------------------------
   4. Accessibility utilities  (§3.13)
   -------------------------------------------------------------------------- */

/* Visually hidden but available to screen readers. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Skip link — becomes visible when focused via keyboard. */
.skip-link:focus {
	position: fixed;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip: auto;
	background: var(--color-white);
	color: var(--color-text);
}

/* -----------------------------------------------------------------------------
   5. Buttons  (§4 — client decision: black, mockup-faithful)
   -------------------------------------------------------------------------- */

.btn {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.2;
	background-color: var(--color-button);
	color: var(--color-button-text);
	border: 1px solid var(--color-button);
	padding: 12px 20px;
	cursor: pointer;
	/* Hover state not in the mockup (§4 [TBD]) — subtle lift, pending approval. */
	transition: opacity 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
	opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   6. Site header  (§5 — persistent orange bar, mockup page 1)
   -------------------------------------------------------------------------- */

.site-header {
	/* Overlay at the top of the page (over the hero / banner photo, no white
	   gap) but NOT sticky: it's absolutely positioned in the document, so it
	   scrolls AWAY with the page instead of following the viewport (client
	   request 2026-07-10). A "back to top" button replaces persistent access. */
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	background-color: var(--color-header-bg);
}

/*
 * Inner pages (multi-page): the banner photo bleeds UP under the fixed,
 * semi-transparent header — no white gap — exactly like the mockup (pages
 * 4-10) and the home hero. The banner clears the header via its own top
 * padding (see .banner below), so #content adds no offset of its own.
 */

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-block-size: var(--header-height);
	padding-block: 8px;
}

/* Navigation — takes the available width, links spread across. */
/* Desktop: flatten the nav so its <li> items become direct flex children of
   the header menu — then the nav links, FR and the CTA group are all evenly
   distributed together (equal gaps everywhere). Reset on mobile (overlay). */
.site-nav {
	display: contents;
}

.site-nav__list {
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__link {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: var(--weight-nav); /* medium, per mockup (not bold) */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1rem;
	white-space: nowrap;
	color: var(--color-white);
	transition: color 0.15s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	color: var(--color-text); /* colour change on hover, no underline */
}

/* "LE SALON" dropdown → OSE / SASE (desktop: on hover/focus). */
.site-nav__item--has-children {
	position: relative;
}

.site-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	min-inline-size: 170px;
	background-color: var(--color-header-bg); /* semi-transparent orange, like the header */
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 10;
}

.site-nav__item--has-children:hover .site-nav__submenu,
.site-nav__item--has-children:focus-within .site-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav__sublink {
	display: block;
	padding: 8px 22px;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.9rem;
	white-space: nowrap;
	color: var(--color-white);
	transition: color 0.15s ease;
}

.site-nav__sublink:hover,
.site-nav__sublink:focus-visible {
	color: var(--color-text);
}

/* Language switcher (static placeholder until Polylang, §10 step 11). */
/* Menu wrapper — inline row on desktop, fullscreen overlay on mobile. */
.site-header__menu {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	/* One even distribution for nav links + FR + CTA group → every gap equal
	   (between links, CONTACT→FR, and FR→buttons). */
	justify-content: space-between;
	gap: clamp(14px, 1.8vw, 44px);
}

.site-header__lang {
	flex: 0 0 auto;
}

/* Language switcher — dropdown on desktop (current + others on hover/focus),
   like the nav dropdowns. */
.lang-switcher {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-weight: var(--weight-nav);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-white);
}

.lang-switcher__current {
	cursor: default;
}

.lang-switcher__menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-end: 0;
	z-index: 10;
	min-inline-size: 84px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background-color: var(--color-header-bg);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.lang-switcher:hover .lang-switcher__menu,
.lang-switcher:focus-within .lang-switcher__menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.lang-switcher__link {
	display: block;
	padding: 6px 20px;
	color: var(--color-white);
	transition: color 0.15s ease;
}

.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
	color: var(--color-text);
}

/* Two stacked CTA buttons, far end of the bar. */
.site-header__cta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.btn--header {
	font-weight: var(--weight-nav); /* medium, per mockup (not bold) */
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	padding: 8px 16px;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   7. Hero  (§7 Section 1 — mockup page 1)
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	color: var(--color-white);
	background-color: #141414; /* dark fallback when no photo is set ([TBD] §11). */
	overflow: hidden;
}

/* Background photo + dark overlay. */
.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--color-hero-overlay);
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/* Wide content area (mockup): near full-width, NOT the 1200px container, so
	   logos and date sit close to the edges. Capped at the 1440px design width. */
	max-inline-size: var(--page-width);
	margin-inline: auto;
	min-block-size: 100svh;
	padding-block: calc(var(--header-height) + clamp(48px, 9vh, 88px)) clamp(64px, 16vh, 150px);
	padding-inline: var(--gutter);
}

/*
 * Vertical rhythm (mockup page 1): top-down flow — logos near the top, the
 * title/date band below (title & date top-aligned), buttons lower, room below.
 * Gaps are viewport-height based so the proportions hold across screens.
 */
.hero__logos {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}

/* Logos: size unchanged (client request) — capped by width AND height so the
   two always fit the row without horizontal overflow. */
.hero__logo {
	inline-size: auto;
	block-size: auto;
	max-block-size: clamp(110px, 16vw, 220px);
	max-inline-size: 44%;
	object-fit: contain;
	transition: opacity 0.2s ease;
}

/* Each logo links to its "À propos" section (OSE → #le-salon, SASE →
   #salon-sase). display:contents keeps the <img> as the direct flex child, so
   every logo-size rule still applies while the link stays clickable/focusable. */
.hero__logo-link {
	display: contents;
	cursor: pointer;
}

.hero__logo-link:hover .hero__logo,
.hero__logo-link:focus-visible .hero__logo {
	opacity: 0.85;
}

/*
 * Middle band as a 2x2 grid: row 1 = title | date, row 2 = subtitle | venue.
 * Two independent flex columns could not line the SECOND row up — each stacked
 * on its own, so the subtitle landed wherever the title happened to end. Only a
 * shared grid gives the subtitle and the venue the same top (client request
 * 2026-07-17). The wrappers stay in the markup and hand their children to the
 * grid via `display: contents`; the entrance animation moved onto the children
 * accordingly (see the hero animation block).
 */
.hero__content {
	margin-block-start: clamp(48px, 9vh, 88px);
	display: grid;
	grid-template-columns: minmax(0, 42ch) auto;
	justify-content: space-between;
	align-items: start;
	column-gap: 40px;
	row-gap: 20px; /* mockup: 20px between date and venue */
}

.hero__intro,
.hero__meta {
	display: contents;
}

.hero__title {
	grid-area: 1 / 1;
}

.hero__subtitle {
	grid-area: 2 / 1;
}

.hero__date {
	grid-area: 1 / 2;
	/* Bottom of row 1. The title is taller than the date, so a top-aligned date
	   would leave ~48px of air above the venue and the 20px row-gap would not be
	   the gap you actually see. Anchored low, 20px reads as 20px. */
	align-self: end;
}

.hero__venue {
	grid-area: 2 / 2;
	text-align: end;
}

.hero__title {
	text-transform: uppercase;
	line-height: 1.05;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
}

.hero__title-line {
	display: block;
}

/* margin: 0 on the hero paragraphs. The stylesheet resets h1-h6 but never <p>,
   so these kept the browser default of 1em — and 1em of .hero__date is 67px,
   which is exactly the gap that opened between the date and the venue. The
   grid's row-gap owns the spacing now. */
.hero__subtitle {
	margin: 0;
	font-style: italic;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.5;
}

.hero__date {
	margin: 0; /* see .hero__subtitle — 1em here was 67px */
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	/* Larger than the title (mockup). */
	font-size: clamp(2.2rem, 5.6vw, 4.2rem);
	line-height: 1.05;
}

.hero__venue {
	margin: 0;
	font-style: italic;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* Two CTA buttons, centered, in the lower part of the hero. */
.hero__cta {
	margin-block-start: clamp(36px, 5.5vh, 64px);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 56px);
}

.hero__btn {
	min-inline-size: 220px;
	padding: 16px 28px;
	font-weight: var(--weight-nav); /* medium, per mockup */
}

/* -----------------------------------------------------------------------------
   8. About (OSE / SASE)  (§7 sections 2-3 — mockup pages 2-3)
   -------------------------------------------------------------------------- */

/* Full-width "À PROPOS" band: orange over a faint (optional) photo. */
.about__band {
	position: relative;
	background-color: var(--color-copper);
	background-size: cover;
	background-position: center;
	padding-block: clamp(28px, 6vh, 64px);
}

.about__band-overlay {
	position: absolute;
	inset: 0;
	/* Copper veil so the optional photo stays faint (v2 mockup). Solid copper when
	   no photo is set — this simply sits on the copper background. */
	background-color: rgba(208, 138, 69, 0.82);
}

.about__band .osesase-container {
	position: relative;
	z-index: 1;
}

.about__band-title {
	margin: 0;
	text-align: center;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(1.8rem, 4vw, 3rem);
}

/* Light grey content body. */
.about__body {
	background-color: var(--color-bg-grey);
	padding-block: clamp(40px, 7vh, 88px);
}

/* v2 mockup: both columns end at the same height — the sector grid bottom lines
   up with the last line of copy. `stretch` lets the right column match the left
   one's height; the grid then fills whatever space the heading leaves (see
   .sector-grid). Client decision (2026-07-16): keep the copy readable at 16px
   and let the tiles grow, rather than shrinking the text to the mockup's ~14px. */
.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: stretch;
}

.about__sectors {
	display: flex;
	flex-direction: column;
}

/* Left column: logo + title + italic paragraph.
   v2 mockup: logo and title are CENTRED in the column; the paragraph stays
   left-aligned (the mockup justifies it — deliberately not reproduced: justified
   text in a narrow column opens white rivers and hurts readability). */
.about__logo {
	display: block;
	margin-inline: auto;
	block-size: clamp(90px, 10vw, 140px);
	inline-size: auto;
	margin-block-end: 28px;
}

/* Sizes below are MEASURED off the v2 mockup at its 1440px reference width
   (cap-heights sampled pixel-wise, see PROGRESS 2026-07-16): title 20.7px,
   sectors heading 38.6px, copy 14.3px / line-height 1.33. The mockup's
   hierarchy is far steeper than ours was — its heading is nearly double its
   title (1.87x, we had 1.25x). Rounded to clean rem (<0.25px drift). */
.about__title {
	margin: 0 0 24px;
	color: var(--color-text);
	font-size: clamp(1.1rem, 1.45vw, 1.3rem); /* 20.8px @1440 (mockup 20.7) */
	line-height: 1.33;
	text-align: center;
	text-transform: uppercase;
}

/* Mockup copy: 14.3px / 1.33. This is what makes the layout fall into place —
   at this size the column ends level with the sector grid on its own, with
   near-square tiles, no stretching needed. It is small for running text, so it
   is confined to the two-column desktop view and goes back to 1rem/1.6 once the
   layout stacks (see the ≤1024 block), where no column has to line up. */
.about__text {
	color: #333333;
	font-style: italic;
	font-size: 0.9rem; /* 14.4px (mockup 14.3) */
	line-height: 1.33;
}

/* The mockup separates paragraphs by exactly one blank line: measured 38 CSS
   between paragraphs against a 19 CSS line step. Expressed in em so it tracks
   the font-size (14.4px here, 16px once stacked) instead of drifting. The old
   flat 12px was tuned for line-height 1.6 and collapsed the paragraphs into one
   block at 1.33. */
.about__text p {
	margin: 0 0 1.33em;
}

.about__text p:last-child {
	margin-block-end: 0;
}

/* Right column: sectors heading + 2×3 photo-card grid. */
.about__sectors-title {
	margin: 0 0 24px;
	color: var(--color-text);
	font-size: clamp(1.5rem, 2.67vw, 2.4rem); /* 38.4px @1440 (mockup 38.6) */
	text-transform: uppercase;
}

.sector-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr); /* two equal rows share the height */
	gap: 12px;
	flex: 1; /* take the height the heading leaves → bottom meets the copy */
	min-block-size: 420px; /* floor: short copy must not squash the tiles */
}

.sector-card {
	position: relative;
	/* The grid row dictates the height here so the column can meet the copy;
	   `aspect-ratio: 1/1` comes back below 1024px, where the layout stacks and
	   there is no second column to line up with. Photos use background-size:
	   cover, so a taller tile crops — it never distorts. */
	aspect-ratio: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #2a2a2a; /* placeholder tile when no photo ([TBD] §11). */
	background-size: cover;
	background-position: center;
}

/* Dark veil so the white label reads, centered over the image. */
.sector-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.45);
	transition: background-color 0.25s ease;
}

/* Clickable (has a photo) → pointer + lighten the veil on hover/focus. */
.sector-card[data-img] {
	cursor: pointer;
}

.sector-card[data-img]:hover::after,
.sector-card[data-img]:focus-visible::after {
	background-color: rgba(0, 0, 0, 0.28);
}

.sector-card__label {
	position: relative;
	z-index: 1;
	padding: 14px;
	text-align: center;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(0.8rem, 1.1vw, 1rem);
	line-height: 1.25;
}

/* Lightbox — click a sector image to view it large. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(0, 0, 0, 0.85);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox__img {
	max-inline-size: 92vw;
	max-block-size: 88vh;
	inline-size: auto;
	block-size: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 20px;
	padding: 8px;
	background: none;
	border: 0;
	color: var(--color-white);
	font-size: 2.4rem;
	line-height: 1;
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   9. Section banner + Why exhibit / Why visit  (§7 sections 4-5, pages 4-5)
   -------------------------------------------------------------------------- */

/* Reusable title banner: orange over an optional photo, centered white title. */
.banner {
	position: relative;
	background-color: #141414; /* dark fallback when no photo is set ([TBD] §11) */
	background-size: cover;
	background-position: center;
	/* Photo bleeds under the fixed header (no white gap, mockup pages 4-10): the
	   top padding absorbs the header height so the title stays centered in the
	   band visible below it; the bottom padding matches for balance. */
	padding-block: calc(var(--header-height) + clamp(40px, 8vh, 96px)) clamp(40px, 8vh, 96px);
}

.banner__overlay {
	position: absolute;
	inset: 0;
	/* Just the photo — NO orange tint (mockup pages 4-10). A subtle dark veil
	   keeps the white title legible over any photo. */
	background-color: rgba(0, 0, 0, 0.3);
}

.banner .osesase-container {
	position: relative;
	z-index: 1;
}

/* v2 mockup: OSE logo (start) + title (center) + SASE logo (end). */
.banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 4vw, 60px);
}

.banner__logo {
	flex: 0 0 auto;
	inline-size: clamp(120px, 13vw, 210px);
	block-size: auto;
	max-block-size: 108px;
	object-fit: contain;
}

.banner__title {
	flex: 1 1 auto; /* take the middle so the logos sit at the edges */
	margin: 0;
	text-align: center;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(1.8rem, 4.5vw, 3.25rem);
	text-wrap: balance;
}

/* Light grey body shared by both Why sections. */
.why__body {
	background-color: var(--color-bg-grey);
	padding-block: clamp(40px, 8vh, 96px);
}

/* Why exhibit — two-column bulleted list (§7 s4). */
.why__list {
	list-style: none;
	margin-block: 0;
	margin-inline: auto;
	padding: 0;
	inline-size: 100%;
	max-inline-size: 1080px;
	columns: 2;
	column-gap: clamp(56px, 12vw, 190px); /* wide central gutter, like the mockup */
}

.why__item {
	break-inside: avoid;
	position: relative;
	padding-inline-start: 28px;
	margin-block-end: clamp(16px, 2.4vh, 26px);
	color: var(--color-text);
	font-style: italic;
	line-height: 1.5;
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.why__item::before {
	content: "\2022"; /* • */
	position: absolute;
	inset-inline-start: 0;
}

/* Why visit — two text columns (§7 s5). */
.why__cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(32px, 8vw, 120px);
}

.why__col p {
	margin: 0;
	max-inline-size: 42ch;
	color: var(--color-text);
	font-style: italic;
	line-height: 1.6;
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

/* v2 mockup: both Why sections render as a 3×2 grid of white icon cards. */
.why__cards {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	inline-size: 100%;
	max-inline-size: 1180px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
}

.why-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 22px;
	padding: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 36px);
	background-color: var(--color-white);
	border-radius: 0; /* square corners (v2 mockup) */
	box-shadow: 0 14px 30px rgba(26, 26, 26, 0.08);
	text-align: center;
}

/* Client-uploaded icon, tinted to the brand blue via a CSS mask so any
   monochrome icon renders uniformly (v2 mockup). Mask URL is set inline per card. */
.why-card__icon {
	display: block;
	inline-size: clamp(44px, 3.6vw, 60px);
	block-size: clamp(44px, 3.6vw, 60px);
	background-color: var(--color-brand-blue);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.why-card__text {
	margin: 0;
	color: var(--color-blue-ink); /* AA on white (§3.13) */
	font-family: var(--font-heading);
	font-weight: 400; /* light weight, per v2 mockup */
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.45;
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

/* -----------------------------------------------------------------------------
   10. Form sections — Réservation stand / Inscription visiteur  (§7 s6, s8)
   -------------------------------------------------------------------------- */

.form-section__body {
	background-color: var(--color-bg-grey);
	padding-block: clamp(40px, 8vh, 96px);
}

.form-section__intro {
	max-inline-size: 60ch;
	margin: 0 0 clamp(28px, 4vh, 44px);
	color: var(--color-text);
	font-style: italic;
	line-height: 1.6;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

/* v2 mockup: the form runs nearly edge to edge — its fields measure ~1250px at
   the 1440 reference (x 93 → 1342), not the narrow column v1 used. The 720px cap
   below was a v1 leftover and made the form half its intended width. Centred, so
   with the container's 72px gutter it lands on the mockup's ~95px margins. */
.form-section__form {
	max-inline-size: 1250px;
	margin-inline: auto;
}

/*
 * Baseline Contact Form 7 styling — the actual fields are built in CF7 (§9);
 * these rules theme whatever fields the client adds.
 */
.form-section__form p {
	margin: 0 0 16px;
}

.form-section__form label {
	display: block;
	margin-block-end: 20px; /* vertical rhythm between fields */
	color: var(--color-text);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1rem; /* mixed case, per v2 mockup (not uppercase) */
}

/* CF7 wraps each control in this span — make it a block under its label text. */
.form-section__form .wpcf7-form-control-wrap {
	display: block;
	margin-block-start: 6px;
}

/*
 * Anti-spam honeypot (injected into every CF7 form by inc/cf7.php).
 *
 * Must stay reachable in the DOM — `display: none` and `visibility: hidden` are
 * exactly what a well-written bot skips — so it is pushed off-canvas instead.
 * `inset-inline-start` keeps it off-screen in RTL (Arabic) too. It is
 * aria-hidden and tabindex="-1", so screen readers and keyboards never meet it.
 */
.osesase-hp {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Two fields side by side — wrap them in <div class="form-row"> in the CF7
 * editor (e.g. Nom + Prénom). Reusable for any pair; stacks on mobile.
 */
.form-section__form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-block-end: 20px;
}

.form-section__form .form-row label {
	margin-block-end: 0; /* the grid gap handles spacing — avoid doubling it */
}

@media (max-width: 600px) {
	.form-section__form .form-row {
		grid-template-columns: 1fr;
	}
}

.form-section__form input[type="text"],
.form-section__form input[type="email"],
.form-section__form input[type="tel"],
.form-section__form input[type="url"],
.form-section__form input[type="number"],
.form-section__form select {
	inline-size: 100%;
	padding: 15px 26px;
	border: 1px solid var(--color-text);
	border-radius: 999px; /* pill fields (v2 mockup) */
	background-color: transparent;
	color: var(--color-text);
	font: inherit;
}

/* Multi-line: rounded like the pills but not a full oval. */
.form-section__form textarea {
	inline-size: 100%;
	padding: 15px 22px;
	border: 1px solid var(--color-text);
	border-radius: 22px;
	background-color: transparent;
	color: var(--color-text);
	font: inherit;
	min-block-size: 120px;
	resize: vertical;
}

/* v2 mockup: blue pill submit ("SEND / ENVOYER", "VALIDER / VALIDATE"), centered. */
.form-section__form .wpcf7-submit {
	display: block;
	margin: clamp(20px, 4vh, 36px) auto 0;
	inline-size: fit-content;
	padding: 15px 56px;
	border: none;
	border-radius: 999px;
	background-color: var(--color-brand-blue);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.form-section__form .wpcf7-submit:hover,
.form-section__form .wpcf7-submit:focus-visible {
	opacity: 0.85;
}

/* --- CF7 validation states --------------------------------------------- */

/* Field flagged invalid on submit. */
.form-section__form .wpcf7-not-valid {
	border-color: #d33;
}

/* Inline error tip under a field. */
.form-section__form .wpcf7-not-valid-tip {
	display: block;
	margin-block-start: 6px;
	color: #d33;
	font-size: 0.85rem;
	font-style: normal;
}

/* Form-level message box (success / errors) below the submit button. */
.form-section__form .wpcf7-response-output {
	margin-block: 20px 0;
	margin-inline: 0;
	padding: 12px 16px;
	border: 1px solid #c4c4c4;
	font-size: 0.95rem;
	line-height: 1.5;
}

.form-section__form.sent .wpcf7-response-output,
.form-section__form .wpcf7-mail-sent-ok {
	border-color: #3a9a4e;
	color: #256b34;
}

.form-section__form .wpcf7-validation-errors,
.form-section__form .wpcf7-mail-sent-ng,
.form-section__form .wpcf7-spam-blocked {
	border-color: #d33;
	color: #a11;
}

/* AJAX loading spinner alignment. */
.form-section__form .wpcf7-spinner {
	margin-inline-start: 12px;
}

/* -----------------------------------------------------------------------------
   11. Download sections — Participation / Programme  (§7 s7, s9)
   -------------------------------------------------------------------------- */

.download-section__body {
	background-color: var(--color-bg-grey);
	padding-block: clamp(40px, 8vh, 96px);
}

.download-section__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
	/* Cap the width so on wide screens the button pulls in from the edge
	   (mockup pages 7 & 9: title left ~7%, button ~80%) instead of hugging it. */
	max-inline-size: 1100px;
}

.download-section__label {
	margin: 0;
	max-inline-size: 22ch;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.2;
	font-size: clamp(1.4rem, 3vw, 2.4rem);
}

.download-section__action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.download-section__note {
	margin-block-start: clamp(40px, 8vh, 96px);
	color: var(--color-text);
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

/* Copper "Télécharger" button (v2 mockup — Participation & Programme): light
   copper fill, blue label. NOTE §3.13: brand blue on this copper is ~2.4:1,
   below AA — flagged with the client; may need a darker navy. */
/* Measured against the v2 mockup: a 240x80 button with its label at ~23px
   Medium. Rounded up to 24px, which is both within the measurement's margin and
   WCAG's large-text threshold — that is what makes the mockup's blue-on-copper
   (3.26:1) pass AA. Shrinking the label below 24px breaks that; see
   --color-download-text. */
.btn--download {
	padding: 20px 48px;
	border-color: var(--color-copper-light);
	background-color: var(--color-copper-light);
	color: var(--color-download-text);
	text-transform: none; /* "Télécharger" is title case in the mockup. */
	/* Medium, not the .btn bold: measured on the mockup's own button (stem/size
	   ratio 0.109 — a Medium signature; Bold sits at 0.13-0.15). Montserrat only
	   ships 500 and 700 here, so 500 is both right and available. */
	font-weight: var(--weight-nav);
	font-size: 1.5rem;
	line-height: 1.2;
}

/* -----------------------------------------------------------------------------
   12. Contact  (§7 s10)  +  Footer  (§8 — minimal proposal)
   -------------------------------------------------------------------------- */

.contact__body {
	background-color: var(--color-bg-grey);
	padding-block: clamp(48px, 9vh, 110px);
}

.contact__heading {
	position: relative;
	margin: 0 0 20px;
	padding-block-end: 16px;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-text);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
}

.contact__heading::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	margin-inline: auto; /* centered in both LTR and RTL (no translateX) */
	inline-size: 64px;
	block-size: 3px;
	background-color: var(--color-copper);
}

.contact__intro {
	max-inline-size: 60ch;
	margin: 0 auto clamp(40px, 6vh, 64px);
	text-align: center;
	color: var(--color-blue-ink); /* on grey bg → AA-readable blue */
	line-height: 1.6;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* Columns follow however many blocks actually render: with a field left empty
   in admin its block is gone, and the rest stay centered and evenly sized
   instead of clinging to one side of a fixed 3-column grid. */
.contact__cards {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: clamp(24px, 3vw, 48px);
}

/* v2 mockup: no white cards — the blocks sit straight on the grey band and are
   separated by thin copper rules. */
.contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: clamp(24px, 3vw, 40px) 24px;
	text-align: center;
}

/* Rule between blocks only (never leading/trailing). `inline-start` mirrors
   itself in RTL, and the rule follows whichever blocks actually render — an
   empty admin field removes its block and its rule with it. */
.contact-card + .contact-card {
	border-inline-start: 1px solid var(--color-copper-light);
}

.contact-card__icon {
	color: var(--color-brand-blue);
}

.contact-card__icon svg {
	display: block;
}

.contact-card__title {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-style: italic;
	text-transform: uppercase;
	font-size: clamp(1.3rem, 2.2vw, 1.8rem);
}

.contact-card__content {
	color: var(--color-blue-ink);
	line-height: 1.7;
}

.contact-card__content a {
	color: var(--color-blue-ink);
}

.contact-card__content a:hover {
	text-decoration: underline;
}

.contact-card__phones {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Map — client-uploaded image, full-bleed under the blocks (v2 mockup). No
   embed: nothing about the visitor reaches a third party (HARD RULE §3.14).
   ~115px tall, measured off the mockup (a wide, thin strip) — not the 220-360px
   it was before. */
.contact__map img {
	display: block;
	inline-size: 100%;
	block-size: clamp(96px, 13vh, 128px);
	object-fit: cover;
}

.contact__map-link {
	display: block;
}

/* Social band — grey #676767 strip with the icons, at the very bottom of the
   Contact page (v2 mockup). It lives on the Contact page ONLY, not in the
   site-wide footer (client, 2026-07-18). Admin-driven: no icons saved → no band. */
.contact__social-band {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 77px; /* mockup: 77px tall at the 1440 reference */
	padding-block: 14px;
	padding-inline: var(--gutter);
	background-color: #676767;
}

.contact__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2.6vw, 36px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.contact__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 44px hit area (WCAG 2.5.5) around a 26px glyph. */
	inline-size: 44px;
	block-size: 44px;
	color: var(--color-white);
	transition: opacity 0.15s ease;
}

.contact__social a:hover,
.contact__social a:focus-visible {
	opacity: 0.75;
}

.contact__social svg {
	inline-size: 26px;
	block-size: 26px;
}

/* Footer — minimal proposal (§8, [TBD]): logos + editable copyright. */
/* -----------------------------------------------------------------------------
   Footer (§8 — v2 mockup)
   ---------------------------------------------------------------------------
   The v2 mockup ends the page on a grey band holding the social icons, and
   nothing else. The v1 three-column footer (logos / nav / contact) is gone —
   client decision 2026-07-17. The copyright bar stays: the mockup's 16:9 slide
   cuts off right at the band, and a live site needs one (§8 keeps the footer
   [TBD] until the client validates it).
   -------------------------------------------------------------------------- */

/* Modern footer (2026-07-20): a single deep-copper background, one clean block
   of content over a thin rule that sets off the copyright row — no separate
   colour bands. Dark text throughout (white on #D08A45 is only 2.84:1; #1A1A1A
   is 6.14:1). Every block is admin-driven and hides when empty. */
.site-footer {
	background-color: var(--color-copper);
	color: var(--color-text);
	font-size: 0.95rem;
}

/* Upper band deep copper, copyright row white (client) — dark text reads on
   both (6.14:1 on the copper, near-black on white), and the logos in the white
   row finally render crisp. */
.site-footer__main {
	background-color: var(--color-copper);
	padding-block: clamp(44px, 6vw, 80px);
}

.site-footer__date {
	margin: 14px 0 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}

.site-footer__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 22px;
}

.site-footer__cta-btn {
	font-size: 0.9rem;
	padding: 12px 26px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

/* No chip — logos sit directly on the copper footer (client). */
.site-footer__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-block-end: 20px;
}

.site-footer__logo {
	block-size: 48px;
	inline-size: auto;
}

.site-footer__tagline {
	margin: 0 0 14px;
	color: var(--color-text);
	font-style: italic;
	line-height: 1.5;
}

.site-footer__addr {
	margin: 0;
	color: var(--color-text);
	line-height: 1.7;
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Same style as the main nav links (.site-nav__link): Montserrat medium,
   uppercase, 1rem, 0.04em, colour-change on hover (no underline). */
.site-footer__links a {
	color: var(--color-text);
	font-family: var(--font-heading);
	font-weight: var(--weight-nav);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 1rem;
	transition: color 0.15s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var(--color-white);
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 50%;
	/* Dark circles with a white glyph — clean and high-contrast on the copper. */
	background-color: var(--color-text);
	color: var(--color-white);
	transition: opacity 0.15s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	opacity: 0.82;
}

.site-footer__social svg {
	inline-size: 20px;
	block-size: 20px;
}

.site-footer__phones {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.8;
}

.site-footer__phones a {
	color: var(--color-text);
	transition: color 0.15s ease;
}

.site-footer__phones a:hover {
	color: var(--color-white);
}

/* Copyright row — the site's light-grey section background (client: not white).
   SASE logo left, copyright block centred, OSE logo right; the logos still read
   crisply on the near-white grey. */
.site-footer__bar {
	background-color: var(--color-bg-grey);
	color: var(--color-text);
	padding-block: 22px;
}

.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	/* Keep the container's left gutter; add clearance on the end side so the
	   right logo doesn't slip under the fixed back-to-top button (48px at
	   clamp(16-32px) from the edge). This selector overrides .osesase-container's
	   symmetric padding, so both sides are set explicitly. */
	padding-inline-start: var(--gutter);
	padding-inline-end: calc(var(--gutter) + clamp(32px, 4vw, 52px));
}

.site-footer__bar-logo {
	flex: 0 0 auto;
	block-size: 46px;
	inline-size: auto;
}

.site-footer__bar-center {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.site-footer__org-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.site-footer__org-logo {
	block-size: 24px;
	inline-size: auto;
}

.site-footer__copy {
	margin: 0;
	font-size: 0.9rem;
}

.site-footer__dev a {
	color: var(--color-text);
}

.site-footer__dev a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	/* Stack the bottom bar and centre everything. */
	.site-footer__bar-inner {
		flex-direction: column;
	}
	.site-footer__org,
	.site-footer__dev {
		flex: none;
		justify-content: center;
		text-align: center;
	}
}

/* -----------------------------------------------------------------------------
   13. Motion — reveal on scroll (JS adds .reveal / .is-visible)
   -------------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Hero content plays its entrance on PAGE LOAD (it's above the fold, so it must
 * not wait for a scroll). Same fade-up feel as the reveal system, staggered
 * top-to-bottom. `both` keeps the hidden start state during the delay → no flash.
 */
@keyframes osesase-hero-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Targets the CHILDREN, not .hero__intro / .hero__meta: those are now
   `display: contents` (see .hero__content) and have no box left to animate. The
   stagger is unchanged — the two halves keep their own delay. */
.hero__title,
.hero__subtitle,
.hero__date,
.hero__venue,
.hero__cta {
	animation: osesase-hero-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero__title,
.hero__subtitle { animation-delay: 0.1s; }

.hero__date,
.hero__venue { animation-delay: 0.28s; }

.hero__cta { animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
	.hero__title,
	.hero__subtitle,
	.hero__date,
	.hero__venue,
	.hero__cta {
		animation: none;
	}
}

/* -----------------------------------------------------------------------------
   14. Burger button (hidden on desktop, shown at the mobile breakpoint)
   -------------------------------------------------------------------------- */

.burger {
	display: none; /* shown in the responsive block below */
	position: relative;
	z-index: 110; /* above the fullscreen overlay */
	margin-inline-start: auto;
	padding: 12px; /* 28×20 box + padding → ≥44px tap target (WCAG 2.5.5) */
	background: none;
	border: 0;
	cursor: pointer;
}

.burger__box {
	display: block;
	position: relative;
	inline-size: 28px;
	block-size: 20px;
}

.burger__bar {
	position: absolute;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 2px;
	background-color: var(--color-white);
	transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.burger__bar:nth-child(1) { top: 0; }
.burger__bar:nth-child(2) { top: 9px; }
.burger__bar:nth-child(3) { top: 18px; }

.site-header.is-open .burger__bar:nth-child(1) { top: 9px; transform: rotate(45deg); }
.site-header.is-open .burger__bar:nth-child(2) { opacity: 0; }
.site-header.is-open .burger__bar:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* -----------------------------------------------------------------------------
   15. Responsive  (§12 — tablet ≤1024px, mobile ≤600px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* Tighter gutter on tablet/mobile (matches the hero). */
	:root {
		--gutter: 24px;
	}

	/* Header → burger + fullscreen overlay menu. */
	.burger {
		display: inline-flex;
		align-items: center;
	}

	.site-header__menu {
		position: fixed;
		inset: 0;
		z-index: 90;
		flex-direction: column;
		justify-content: center;
		align-items: center; /* centre nav / lang / CTA horizontally */
		gap: 28px;
		padding: calc(var(--header-height) + 24px) 24px 40px;
		background-color: var(--color-copper);
		overflow-y: auto; /* scroll if the menu is taller than the screen */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
	}

	.site-header.is-open .site-header__menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav {
		display: block; /* reset the desktop display:contents for the overlay */
		flex: 0 0 auto;
	}

	.site-nav__list {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 18px;
		text-align: center; /* centre links that wrap to 2 lines (PROGRAMME…) */
	}

	.site-nav__link {
		font-size: 1.2rem;
		white-space: normal; /* allow wrapping in the overlay (desktop is nowrap) */
		padding-block: 12px; /* comfortable tap target in the mobile overlay */
	}

	/* Submenu → accordion: tap the parent to expand (no hover on touch).
	   Chevron shown here only (desktop stays text-only) and rotates when open. */
	.site-nav__item--has-children > .site-nav__link {
		cursor: pointer;
	}

	.site-nav__item--has-children > .site-nav__link::after {
		content: "\25BE"; /* ▾ */
		display: inline-block;
		margin-inline-start: 8px;
		font-size: 0.72em;
		transition: transform 0.2s ease;
	}

	.site-nav__item--has-children.is-expanded > .site-nav__link::after {
		transform: rotate(180deg);
	}

	.site-nav__submenu {
		position: static;
		min-inline-size: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
		max-block-size: 0;
		overflow: hidden;
		transition: max-block-size 0.3s ease, padding 0.3s ease;
	}

	.site-nav__item--has-children.is-expanded .site-nav__submenu {
		max-block-size: 260px;
		padding-block: 12px 4px;
		gap: 10px;
	}

	.site-nav__sublink {
		padding: 10px 0;
		font-size: 0.95rem;
		opacity: 0.85;
	}

	/* CTA buttons stack, centered, within the overlay. */
	.site-header__cta {
		flex-direction: column;
		align-items: center;
		inline-size: 100%;
		max-inline-size: 320px;
		gap: 12px;
	}

	.btn--header {
		inline-size: 100%;
		font-size: 0.95rem;
		padding: 12px 16px;
	}

	body.menu-open {
		overflow: hidden;
	}

	/* Language switcher → inline row (current + others) inside the overlay. */
	.lang-switcher {
		gap: 16px;
	}

	.lang-switcher__menu {
		position: static;
		display: flex;
		gap: 16px;
		min-inline-size: 0;
		padding: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.lang-switcher__link {
		padding: 0;
	}

	/* Hero (tablet/mobile) → ALL content anchored to the BOTTOM (photo shows
	   above), left-aligned, sizes optimised. */
	.hero__inner {
		max-inline-size: none;
		justify-content: flex-end;
		padding-block: calc(var(--header-height) + 24px) clamp(40px, 7vh, 72px);
	}

	.hero__logo {
		max-block-size: clamp(110px, 17vw, 190px); /* bigger on tablet for impact */
		max-inline-size: 46%;
	}

	/*
	 * Single column below 1024. The desktop 2x2 grid (title|date /
	 * subtitle|venue) is a DESKTOP-ONLY request (client, 2026-07-17): stacked,
	 * there is no second column to line anything up with, and two columns on a
	 * phone crushed the title to ~89px wide.
	 *
	 * NB: this block used to say `flex-direction: column`, which silently did
	 * nothing once .hero__content became a grid — the columns survived down to
	 * 390px. Grid needs grid properties.
	 */
	.hero__content {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-block-start: clamp(24px, 4vh, 44px);
	}

	/* Back to DOM order (title, subtitle, date, venue) — the explicit grid-areas
	   would otherwise keep forcing two columns. */
	.hero__title,
	.hero__subtitle,
	.hero__date,
	.hero__venue {
		grid-area: auto;
	}

	.hero__date {
		align-self: auto; /* the desktop bottom-anchor has no meaning stacked */
	}

	.hero__venue {
		text-align: start;
	}

	.hero__title {
		font-size: clamp(2rem, 5.4vw, 3rem);
	}

	.hero__date {
		font-size: clamp(2.2rem, 6.4vw, 3.4rem);
	}

	.hero__subtitle,
	.hero__venue {
		font-size: clamp(0.98rem, 1.8vw, 1.1rem);
	}

	.hero__cta {
		margin-block-start: clamp(24px, 4vh, 44px);
		justify-content: flex-start;
	}

	/* Stacked: there is no second column to line up with, so the desktop
	   stretch is undone and the tiles go back to squares. */
	.about__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		align-items: start;
	}

	.about__sectors {
		display: block;
	}

	.sector-grid {
		grid-template-rows: auto;
		flex: none;
		min-block-size: 0;
	}

	/* Stacked: nothing to line up with, so the mockup's tight 14.3px/1.33 buys
	   us nothing and only costs legibility. Back to comfortable reading. */
	.about__text {
		font-size: 1rem;
		line-height: 1.6;
	}

	.sector-card {
		aspect-ratio: 1 / 1;
	}

	.why__cols {
		grid-template-columns: 1fr;
	}

	.why__list {
		columns: 1;
		max-inline-size: 100%;
	}

	.why__cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact__cards {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		max-inline-size: 460px;
		margin-inline: auto;
	}

	/* Single column → the vertical rule would sit beside the blocks; separate
	   them horizontally instead. */
	.contact-card + .contact-card {
		border-inline-start: 0;
		border-block-start: 1px solid var(--color-copper-light);
		padding-block-start: clamp(24px, 4vw, 40px);
	}
}

@media (max-width: 600px) {

	.why__cards {
		grid-template-columns: 1fr;
	}

	/* Banner logos crowd the title on phones — title alone, centered. */
	.banner__logo {
		display: none;
	}

	.hero__logos {
		gap: 16px;
	}

	.hero__logo {
		max-block-size: clamp(96px, 26vw, 150px); /* bigger on mobile for impact */
		max-inline-size: 46%;
	}

	.hero__date {
		font-size: clamp(1.9rem, 9vw, 2.7rem); /* a touch bigger than the title */
	}

	.hero__title {
		font-size: clamp(1.8rem, 8.5vw, 2.4rem);
	}

	.hero__cta {
		margin-block-start: clamp(24px, 5vh, 40px);
	}

	.sector-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.download-section__row {
		align-items: flex-start;
	}

	/* Compact, content-width buttons, left-aligned (not full-width). */
	.hero__cta {
		justify-content: flex-start;
		gap: 12px;
	}

	.hero__btn {
		inline-size: auto;
		min-inline-size: 0;
		padding: 12px 22px;
		font-size: 0.9rem;
	}
}

@media (max-width: 400px) {
	.sector-grid {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------------------------
   16. Desktop — sparse form / download sections fill the viewport height
       (client request) so they don't look empty. Content centered below the
       banner. Mobile/tablet keep their natural (compact) height.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {

	.form-section,
	.download-section,
	.why--exhibit,
	.why--visit {
		display: flex;
		flex-direction: column;
		min-block-size: 100vh;
	}

	/* Empty Why section (no admin cards): banner only, no full-height gap. */
	.why--empty {
		min-block-size: 0;
	}

	.form-section__body,
	.download-section__body,
	.why--exhibit .why__body,
	.why--visit .why__body {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
	}

	/* Push the right text column to the outer third → wide central gap (mockup
	   page 5). Left column stays at the start; both remain left-aligned. */
	.why--visit .why__col:last-child {
		justify-self: end;
	}
}

/* -----------------------------------------------------------------------------
   17. Responsive fine-tuning — tablet (≤1024) & mobile (≤600).
       Same colours & typefaces; only sizes and vertical rhythm are scaled down
       so the site feels right on smaller screens (client request). Desktop is
       untouched.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* Softer section rhythm. */
	.about__body,
	.why__body,
	.form-section__body,
	.download-section__body,
	.contact__body {
		padding-block: clamp(40px, 6vh, 72px);
	}

	/*
	 * Tighter forms on tablet/mobile — the desktop 56px fields made a very tall
	 * scroll (the stand form ran 1134px on a phone). Two hard limits, both kept:
	 *
	 * - fields stay >= 44px tall (WCAG 2.5.5 touch target). 11px padding + 24px
	 *   line + 2px border = 48px, so there is margin left;
	 * - the field FONT stays 16px. Below that, iOS Safari zooms the page on
	 *   focus — so the padding shrinks, never the type. Labels may shrink: they
	 *   are not focusable, so they don't trigger it.
	 */
	.form-section__form label {
		margin-block-end: 14px;
		font-size: 0.95rem;
	}

	.form-section__form input[type="text"],
	.form-section__form input[type="email"],
	.form-section__form input[type="tel"],
	.form-section__form input[type="url"],
	.form-section__form input[type="number"],
	.form-section__form select,
	.form-section__form textarea {
		padding: 11px 20px;
		/* Re-assert 16px: the fields are `font: inherit`, so the smaller label
		   above would drag them to 15.2px and trip iOS Safari's focus zoom. */
		font-size: 1rem;
	}

	.form-section__form textarea {
		min-block-size: 96px;
	}

	.form-section__form .wpcf7-submit {
		padding: 13px 44px;
	}

	/* Banner / section titles a touch smaller than desktop. */
	.banner__title,
	.about__band-title {
		font-size: clamp(1.7rem, 4.4vw, 2.6rem);
	}

	.about__sectors-title {
		font-size: clamp(1.3rem, 2.8vw, 1.7rem);
	}

	.download-section__label {
		font-size: clamp(1.3rem, 3.4vw, 2rem);
	}

	.contact__heading {
		font-size: clamp(1.5rem, 3.4vw, 2rem);
	}
}

@media (max-width: 600px) {

	/* Compact vertical rhythm on phones. */
	.about__body,
	.why__body,
	.form-section__body,
	.download-section__body,
	.contact__body {
		padding-block: clamp(32px, 5vh, 56px);
	}

	.banner__title,
	.about__band-title {
		font-size: clamp(1.5rem, 6.5vw, 2rem);
	}

	.about__title {
		font-size: clamp(1.15rem, 4.6vw, 1.4rem);
	}

	.about__sectors-title {
		font-size: clamp(1.2rem, 5vw, 1.5rem);
	}

	.about__logo {
		block-size: clamp(64px, 18vw, 96px);
	}

	.about__text,
	.why__item,
	.why__col p {
		font-size: clamp(0.95rem, 4vw, 1.05rem);
	}

	.download-section__label {
		font-size: clamp(1.2rem, 5.6vw, 1.6rem);
	}

	.download-section__note {
		margin-block-start: clamp(24px, 5vh, 48px);
		font-size: clamp(1rem, 4.4vw, 1.2rem);
	}

	/* Padding tightens on phones, but the label CANNOT drop below 24px: the
	   mockup's blue-on-copper is AA only as large text (3.26:1). Shrink the box,
	   never the type. */
	.btn--download {
		padding: 16px 32px;
		font-size: 1.5rem;
	}

	.contact__heading {
		font-size: clamp(1.4rem, 6vw, 1.8rem);
	}

	.contact__intro {
		font-size: clamp(0.95rem, 4vw, 1.05rem);
	}

	.contact-card {
		padding: 32px 20px;
	}

	.contact-card__title {
		font-size: clamp(1.2rem, 5.5vw, 1.5rem);
	}
}

/* -----------------------------------------------------------------------------
   Back-to-top button

   The header no longer sticks (client request 2026-07-10), so this fixed button
   is the persistent way back up. Hidden by default; JS adds .is-visible once the
   page is scrolled, so it never shows without JS (progressive enhancement).
   Same visual language as the site buttons (black, mockup-faithful).
   -------------------------------------------------------------------------- */
.back-to-top {
	position: fixed;
	inset-block-end: clamp(16px, 3vw, 32px);
	inset-inline-end: clamp(16px, 3vw, 32px);
	z-index: 200;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--color-button);
	color: var(--color-button-text);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	/* Hidden state: faded out, nudged down, non-interactive. */
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.back-to-top:hover,
.back-to-top:focus-visible {
	background-color: var(--color-copper);
}

.back-to-top:focus-visible {
	outline: 3px solid var(--color-copper);
	outline-offset: 3px;
}

.back-to-top svg {
	inline-size: 22px;
	block-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transform: none;
		transition: opacity 0.2s ease;
	}
}