/* =============================================================================
   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)
   ---------------------------------------------------------------------------
   The .woff2 files are self-hosted in /assets/fonts/, subset to the glyphs the
   site uses (Latin for Montserrat/Poppins, Arabic+Latin for Tajawal). They are
   (re)generated from the source .ttf by tools/build-fonts.sh (§4). No CDN.

   Arabic font: Tajawal (SIL OFL, client-approved 2026-07-23 — replaced Cairo).
   Its @font-face is in the RTL layer below, applied only for [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 — Tajawal (SIL OFL, client-approved 2026-07-23; replaced
   Cairo). Montserrat/Poppins carry no Arabic glyphs (§4). Subset to Arabic +
   Latin so Latin fragments (OSE, SASE, dates, e-mail) stay in-font on RTL
   pages. Applied only in the RTL layer below. */
@font-face {
	font-family: "Tajawal";
	src: url("../fonts/tajawal-400.woff2?v=2") format("woff2"); /* v2: Latin-digit remap */
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Tajawal";
	src: url("../fonts/tajawal-700.woff2?v=2") format("woff2"); /* v2: Latin-digit remap */
	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 */
	/* ACCENT — brand orange §4, unified site-wide + in the CF7 e-mails
	   (client decision 2026-07-26). Supersedes the copper #D08A45 (v2-mockup
	   Canva artefact) and the interim deep #F09020: the whole site now uses the
	   single brand orange the logos carry. Token NAME kept ("copper") for now;
	   rename copper→orange in a later cleanup. Mirrored by the rgba copies in
	   --color-header-bg and .about__band-overlay below. */
	--color-copper:        #FF9E32; /* brand orange §4 — header + section bands */
	/* Light accent — brighter brand orange (§4 #FF9E32) for the review. Was light
	   copper #F5AA66 (measured off the mockup button). Download buttons + warm
	   accents. */
	--color-copper-light:  #FF9E32; /* brand orange (bright) — download + warm accents */
	/* "Télécharger" label. On brand orange the old blue label fails AA (2.6–3.1:1),
	   so this reverts to §4's original spec: DARK text on orange (7–9:1, passes at
	   any size, any weight). Was blue #3C5DA7 (a v2-mockup-copper choice). */
	--color-download-text: #1A1A1A;
	--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: brand orange §4 (255,158,50) at 85%, so the
	   hero/office photo shows through only faintly. Mirrors --color-copper. */
	--color-header-bg:       rgba(255, 158, 50, 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 Tajawal and drop
   letter-spacing (which breaks the connected Arabic script).
   -------------------------------------------------------------------------- */

[dir="rtl"] {
	--font-heading: "Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-body:    "Tajawal", 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;
	/* Keep each line unbroken — "DEUX SALONS." must never split (client). The
	   font clamps down on mobile (single-column, full width) and the desktop
	   column is far wider than the text, so nowrap causes no horizontal overflow. */
	white-space: nowrap;
}

/* 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;
	/* Orange veil so the optional photo stays faint. Solid orange when no photo is
	   set — this simply sits on the orange background. Mirrors --color-copper. */
	background-color: rgba(255, 158, 50, 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;
	/* Square tiles keep a fixed height, so when the copy is taller than the grid
	   the sectors block is centred against it (client 2026-07-24, "Option 1"),
	   rather than sitting at the top and leaving all the gap at the bottom. Only
	   bites on desktop, where the column stretches to the copy; harmless stacked. */
	justify-content: center;
}

/* 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;
	/* Justified at the client's explicit request (2026-07-24) — flagged as
	   a11y-discouraged (WCAG 1.4.8: justification opens uneven "rivers").
	   No hyphenation (client wants no hyphens at line ends), so the gaps are
	   wider — the accepted trade-off of justify-without-hyphens. */
	text-align: justify;
}

/* 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;
	/* The rich-text editor can save an inline `text-align: left` on each paragraph
	   (client hit the editor's align button). Justify is a LOCKED design choice for
	   this block (2026-07-24), so enforce it over that inline style — `!important`
	   is required because inline styles outrank any selector. */
	text-align: justify !important;
}

.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);
	gap: 12px;
	/* Rows size to the square cards. Client 2026-07-24: square tiles everywhere,
	   no longer stretched to bottom-align the column with the copy. */
}

.sector-card {
	position: relative;
	/* Square tiles (client 2026-07-24). Photos use background-size: cover, so a
	   non-square source crops to the square — it never distorts. */
	aspect-ratio: 1 / 1;
	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.01em;
	font-size: clamp(0.6rem, 0.82vw, 0.75rem); /* smaller: most labels fit one line (client 2026-07-26) */
	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 dark veil makes the
	   white title + logos read clearly over any photo. Deepened 0.3 → 0.45 at the
	   client's request (2026-07-24) for stronger contrast. */
	background-color: rgba(0, 0, 0, 0.45);
}

.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;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Modern, restrained hover: the card lifts and its shadow deepens. */
.why-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px rgba(26, 26, 26, 0.15);
}

/* 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(72px, 5.6vw, 100px);
	block-size: clamp(72px, 5.6vw, 100px);
	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;
	/* "Bold" the thin Streamline strokes by spreading the masked shape a hair in
	   each direction (raster strokes can't be widened otherwise). Test 2026-07-25. */
	filter:
		drop-shadow(0.7px 0 0 var(--color-brand-blue))
		drop-shadow(-0.7px 0 0 var(--color-brand-blue))
		drop-shadow(0 0.7px 0 var(--color-brand-blue))
		drop-shadow(0 -0.7px 0 var(--color-brand-blue));
}

/* Honour reduced-motion: keep the colour/shadow, drop the lift. */
@media (prefers-reduced-motion: reduce) {
	.why-card:hover {
		transform: none;
	}
}

.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.045em; /* airier, more refined (2026-07-25) */
	line-height: 1.55;
	font-size: clamp(0.85rem, 1.05vw, 1rem); /* a touch smaller/finer */
}

/* -----------------------------------------------------------------------------
   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: 18px; /* vertical rhythm between fields */
	color: #4a4a4a; /* quieter than near-black (modern refresh 2026-07-25) */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.92rem; /* 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: 14px 24px;
	border: 1px solid #e2e2e2; /* soft border (modern) — was solid dark */
	border-radius: 999px; /* pill fields kept (v2 mockup) */
	background-color: var(--color-white); /* white fill pops on the grey band */
	color: var(--color-text);
	font: inherit;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); /* subtle depth */
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Multi-line: rounded like the pills but not a full oval. */
.form-section__form textarea {
	inline-size: 100%;
	padding: 14px 22px;
	border: 1px solid #e2e2e2;
	border-radius: 22px; /* rounded, kept */
	background-color: var(--color-white);
	color: var(--color-text);
	font: inherit;
	min-block-size: 120px;
	resize: vertical;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Modern focus: brand-blue border + soft ring (keeps the pill shape). */
.form-section__form input:focus,
.form-section__form select:focus,
.form-section__form textarea:focus {
	outline: none;
	border-color: var(--color-brand-blue);
	box-shadow: 0 0 0 3px rgba(74, 109, 204, 0.16);
}

.form-section__form ::placeholder {
	color: #9a9a9a;
}

/* 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;
}

/* Phone numbers are always LTR — isolate so RTL pages keep the digit groups in
   order and render Western digits (not Arabic-Indic). */
.contact-card__phones a {
	direction: ltr;
	unicode-bidi: isolate;
}

/* 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;
}

/* 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. */
/* -----------------------------------------------------------------------------
   12. Footer (client mockup 2026-07-24)
   ---------------------------------------------------------------------------
   Grey main band — date + venue + two CTA (side by side on desktop) | footer nav
   (centre) | socials + phones (end) — over a slightly darker copyright sub-bar
   with a dynamic year. Grey (#686868, measured off the mockup) is deliberately
   independent of the brand accent.
   -------------------------------------------------------------------------- */

.site-footer {
	color: var(--color-white);
	font-size: 0.95rem;
}

.site-footer__main {
	background-color: #686868;
	color: var(--color-white);
	padding-block: clamp(28px, 3.5vw, 48px);
}

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

/* Left column: date + venue + CTA -------------------------------------------- */
.site-footer__date {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: clamp(1.2rem, 1.6vw, 1.5rem);
	letter-spacing: 0.02em;
}

.site-footer__venue {
	margin: 6px 0 0;
	font-style: italic;
	font-size: 0.85rem;
	opacity: 0.9;
}

/* Side by side on desktop (client 2026-07-24); wraps only when the row runs out
   of width. */
.site-footer__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 24px;
}

.site-footer__cta-btn {
	background-color: #000000;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-nav);
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	padding: 13px 24px;
	transition: opacity 0.15s ease;
}

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

/* Centre column: navigation -------------------------------------------------- */
.site-footer__nav {
	justify-self: center;
}

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

.site-footer__links a {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: var(--weight-nav);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.95rem;
	transition: opacity 0.15s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	opacity: 0.7;
}

/* Right column: socials + phones --------------------------------------------- */
.site-footer__contact {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	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%;
	/* Light circle on the grey band; the glyph is white. */
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--color-white);
	transition: background-color 0.15s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	background-color: rgba(255, 255, 255, 0.28);
}

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

.site-footer__phones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px 22px;
	text-align: end;
}

.site-footer__phones a {
	color: var(--color-white);
	font-size: 0.9rem;
	transition: opacity 0.15s ease;
	/* Phone numbers are always LTR: isolate the run so RTL (Arabic) pages don't
	   reorder the digit groups, and the digits render Western (0-9), not
	   Arabic-Indic. */
	direction: ltr;
	unicode-bidi: isolate;
}

.site-footer__phones a:hover {
	opacity: 0.7;
}

/* Copyright sub-bar (darker grey, centred) ----------------------------------- */
.site-footer__bar {
	background-color: #565656;
	color: var(--color-white);
	padding-block: 16px;
}

.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 18px;
	text-align: center;
}

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

.site-footer__dev {
	font-size: 0.8rem;
	opacity: 0.85;
}

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

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

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	.site-footer__brand {
		grid-column: 1 / -1;
	}
	.site-footer__nav {
		justify-self: start;
	}
	.site-footer__links {
		text-align: start;
	}
	.site-footer__contact {
		align-items: flex-start;
	}
	.site-footer__phones {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* -----------------------------------------------------------------------------
   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;
		/* Bottom padding trimmed (2026-07-26 experiment) so the compacted block sits
		   lower and more of the photo shows above. */
		padding-block: calc(var(--header-height) + 24px) clamp(28px, 4.5vh, 52px);
	}

	.hero__logo {
		/* Bigger on tablet (client 2026-07-26). object-fit:contain keeps the ratio
		   (no distortion); the 48% width cap keeps the two logos from colliding
		   (2×48% + the space-between gap ≤ row width). */
		max-block-size: clamp(140px, 22vw, 240px);
		max-inline-size: 48%;
	}

	/*
	 * 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;
		/* Compacted (2026-07-26): tight gaps BETWEEN the text lines so the text stays
		   a ramassed block at the bottom, but a larger top margin lifts the logos and
		   opens clear space between the logos and the text (client). */
		gap: 11px;
		margin-block-start: clamp(30px, 6vh, 70px);
	}

	/* 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);
	}

	/* Tablet: cap the subtitle so it wraps before the right edge instead of running
	   edge-to-edge (client 2026-07-26). The ch cap is wider than a phone's content
	   box, so mobile (already narrow) is unaffected. */
	.hero__subtitle {
		max-inline-size: 48ch;
	}

	.hero__cta {
		margin-block-start: clamp(14px, 2.2vh, 24px);
		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 {
		/* Bigger on phone (client 2026-07-26), width capped at 46% so the two logos
		   keep clear air between them at the centre (no collision); object-fit:contain
		   keeps the ratio (no distortion). */
		max-block-size: clamp(120px, 33vw, 185px);
		max-inline-size: 46%;
	}

	/* Phone: tight text gap, but a larger top margin lifts the logos and leaves air
	   between the logos and the text (client 2026-07-26). */
	.hero__content {
		gap: 9px;
		margin-block-start: clamp(22px, 4.5vh, 48px);
	}

	.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(12px, 2vh, 20px);
	}

	.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;
	}
}

/* ==========================================================================
   404 — page not found
   ========================================================================== */
.error-404 {
	background-color: var(--color-bg-grey);
	text-align: center;
}

.error-404__inner {
	padding-block: clamp(64px, 12vh, 140px);
}

.error-404__code {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	font-size: clamp(72px, 16vw, 160px);
	line-height: 1;
	color: var(--color-copper);
}

.error-404__title {
	margin: 0.5rem 0 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-heading);
	text-transform: uppercase;
	font-size: clamp(1.4rem, 4vw, 2rem);
	color: var(--color-text);
}

.error-404__text {
	max-inline-size: 44ch;
	margin: 1rem auto 2rem;
	font-family: var(--font-body);
	color: var(--color-text);
}

.error-404__btn {
	margin-top: 0.5rem;
}