/* =====================================================================
   La Nuit Blanche 2026 — Design foundation
   Aesthetic (per client maquette): éditorial terracotta / crème.
   Fond crème chaud, accent terracotta (rouge brique) pour bandes, titres,
   carte d'inscription et icônes ; titres en serif élégant haute-graisse.
   Tokens first, then base elements, then layout primitives & components.
   Display/body fonts use an elegant self-contained serif/sans stack
   (no Google Fonts CDN — RGPD). Georgia-based serif stays editorial.
   ===================================================================== */

:root {
    /* — Palette (terracotta / crème) -------------------------------- */
    --c-bg: #F4EDE1;          /* fond crème / ivoire chaud */
    --c-bg-2: #EFE6D6;        /* crème un ton plus profond */
    --c-surface: #FBF6EC;     /* crème clair (cartes, champs) */
    --c-surface-2: #ECE2D1;   /* panneau crème subtil */
    --c-cream: #F4EFE2;       /* crème des champs / boutons sur terracotta */

    /* Terracotta — accent principal. Mappé sur --c-gold pour réutiliser
       toutes les références d'accent (y compris l'admin) sans tout réécrire. */
    --c-terra: #BE4434;
    --c-terra-2: #A83A2B;     /* terracotta foncé (hover, ombres) */
    --c-terra-3: #C9543F;     /* terracotta clair */
    --c-gold: #BE4434;        /* alias accent (compat) */
    --c-gold-bright: #C9543F; /* alias accent clair (compat) */
    --c-silver: #C9BBA6;      /* hairline chaud (compat) */

    /* Surfaces "sombres" = terracotta profond (au lieu du bleu nuit).
       Conserve les noms --c-night* pour compat admin/footer. */
    --c-night: #9E3324;
    --c-night-2: #B03E2D;
    --c-night-3: #C24A36;

    --c-ink: #2B2620;         /* texte principal sombre chaud sur crème */
    --c-ink-soft: #6B5F50;    /* texte secondaire chaud */
    --c-ink-faint: #9A8C78;
    --c-green: #3E5240;       /* vert profond — libellés des champs (maquette) */
    --c-on-night: #FBF4E9;    /* texte crème sur terracotta */
    --c-on-night-soft: #F1E2D2;

    --c-line: rgba(43, 38, 32, .12);
    --c-line-strong: rgba(43, 38, 32, .20);
    --c-line-gold: rgba(190, 68, 52, .42);   /* hairline terracotta (compat) */
    --c-line-on-night: rgba(255, 245, 233, .26);

    /* — Typography -------------------------------------------------- */
    /* Serif éditorial haute-graisse pour titres ; pile lisible pour le corps. */
    --font-display: "Playfair Display", "Cormorant Garamond", "Georgia", "Times New Roman", serif;
    --font-serif: "Playfair Display", "Georgia", "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --fs-display: clamp(2.5rem, 5vw + 1rem, 4.75rem);
    --fs-h1: clamp(2.1rem, 3.6vw + 1rem, 3.5rem);
    --fs-h2: clamp(1.7rem, 2.4vw + 1rem, 2.6rem);
    --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
    --fs-lead: clamp(1.05rem, .5vw + 1rem, 1.3rem);
    --fs-body: 1.0625rem;
    --fs-sm: .9rem;
    --fs-eyebrow: .78rem;

    /* — Spacing & shape -------------------------------------------- */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --container: 1180px;
    --container-narrow: 760px;
    --section-y: clamp(2.75rem, 8vw, 7rem);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 26px;
    --r-xl: 32px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(43, 30, 20, .07), 0 1px 1px rgba(43, 30, 20, .05);
    --shadow-md: 0 16px 40px -18px rgba(120, 50, 35, .28);
    --shadow-lg: 0 36px 72px -26px rgba(120, 50, 35, .38);

    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .4s;
}

/* =====================================================================
   Reset & base elements
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* room for the sticky header */
}

/* Anti-overflow belt — prevent horizontal scroll without breaking the sticky header.
   `clip` (unlike `hidden`) does NOT create a scroll container, so position:sticky still works. */
html, body { overflow-x: clip; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0 0 .5em;
    color: var(--c-terra);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--c-line-gold); text-underline-offset: .18em; }

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

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }

button { font: inherit; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--c-terra);
    outline-offset: 3px;
    border-radius: 3px;
}
/* On dark/terracotta surfaces, keep a visible white ring + halo. */
.section--night :focus-visible,
.hero__copy :focus-visible,
.reg-card :focus-visible,
.btn--cream:focus-visible,
.section--night .btn--primary:focus-visible,
.carousel :focus-visible {
    outline-color: #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(28, 16, 12, .6);
}

/* =====================================================================
   Layout primitives
   ===================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

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

/* Bande terracotta — texte crème. (Conserve le nom --night pour compat.) */
.section--night {
    background: var(--c-terra);
    color: var(--c-on-night);
}
.section--night h1, .section--night h2, .section--night h3 { color: #fff; }
.section--alt { background: var(--c-bg-2); }

.stack > * + * { margin-top: var(--flow, 1.1rem); }

/* =====================================================================
   Components
   ===================================================================== */

/* Eyebrow — small uppercase terracotta label */
.eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6em;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-terra);
    margin: 0 0 1rem;
}
.eyebrow::before,
.eyebrow::after {
    content: "";
    width: 1.75rem;
    height: 2px;
    background: var(--c-terra);
}
.section--night .eyebrow { color: var(--c-on-night); }
.section--night .eyebrow::before,
.section--night .eyebrow::after { background: var(--c-on-night-soft); }
/* On the cream-alt band, darken the accent to clear AA for small text (#A83A2B on #EFE6D6). */
.section--alt .eyebrow { color: var(--c-terra-2); }
.section--alt .eyebrow::before,
.section--alt .eyebrow::after { background: var(--c-terra-2); }
.section--alt h2 { color: var(--c-terra-2); }
/* Centrer les eyebrows (le rendez-vous, souvenirs, …) et le titre qui suit. */
.eyebrow + h2 { text-align: center; }

/* =====================================================================
   Section header — ONE component for every public section (kicker + title
   + optional subtitle), so the rhythm is identical everywhere.
   ===================================================================== */
.section-head { max-width: 44rem; margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 3rem); text-align: center; }
.section-head .eyebrow { margin: 0 0 .9rem; }
.section-head > h1,
.section-head > h2 { margin: 0; }
.section-head > .lead { margin: 1rem auto 0; }

.lead {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--c-ink-soft);
    max-width: 62ch;
}
.section--night .lead { color: var(--c-on-night-soft); }

.muted { color: var(--c-ink-soft); }

/* Hairline divider, optionally terracotta */
.hairline { border: 0; height: 1px; background: var(--c-line); margin: 0; }
.hairline--gold { background: linear-gradient(90deg, transparent, var(--c-line-gold), transparent); }

/* Buttons */
.btn {
    --btn-bg: var(--c-terra);
    --btn-fg: var(--c-cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .9em 1.7em;
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--primary {
    --btn-bg: var(--c-terra);
    --btn-fg: var(--c-cream);
}
.btn--primary:hover { --btn-bg: var(--c-terra-2); }
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--c-terra);
    border-color: var(--c-terra);
}
.btn--ghost:hover { --btn-bg: var(--c-terra); --btn-fg: var(--c-cream); }

/* On a terracotta band, buttons invert to cream (cf. bouton ENVOYER). */
.section--night .btn--primary,
.btn--cream {
    --btn-bg: var(--c-cream);
    --btn-fg: var(--c-terra);
}
.section--night .btn--primary:hover,
.btn--cream:hover { --btn-bg: #fff; --btn-fg: var(--c-terra-2); }
.section--night .btn--ghost { --btn-fg: var(--c-on-night); border-color: var(--c-line-on-night); }
.section--night .btn--ghost:hover { --btn-bg: var(--c-cream); --btn-fg: var(--c-terra); border-color: var(--c-cream); }
.btn--lg { padding: 1.05em 2.1em; font-size: 1rem; }

/* Cards */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Accessibility helper */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Utilities
   ===================================================================== */
.text-center { text-align: center; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--c-terra);
    color: var(--c-cream);
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--r-sm) 0;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

/* Honeypot — visually removed but still in the DOM for bots. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =====================================================================
   Header & footer
   ===================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.5rem;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--c-terra); min-width: 0; }
.brand__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 0; color: var(--c-terra); white-space: nowrap; }
.site-nav { display: flex; gap: 1.6rem; }
.site-nav a { text-decoration: none; color: var(--c-ink-soft); font-size: .95rem; font-weight: 500; padding-block: .5rem; transition: color var(--dur) var(--ease); }
.site-nav a:hover { color: var(--c-terra); }
.site-header__cta { padding-block: .6em; white-space: nowrap; }

/* Footer — crème éditorial : email centré + réseaux sociaux (cf. maquette). */
.site-footer { background: var(--c-bg-2); color: var(--c-ink-soft); padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--c-line); }
.site-footer__inner { display: flex; flex-direction: column; gap: 1.75rem; align-items: center; text-align: center; }
.site-footer__brand { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--c-terra); margin: 0 0 .4rem; }
.site-footer__contact { font-size: 1rem; color: var(--c-ink-soft); margin: 0; }
.site-footer__contact a { color: var(--c-terra); text-decoration-color: var(--c-terra); display: inline-block; padding: .5rem .25rem; min-height: 44px; }
.site-footer__note { margin: 0; max-width: 52ch; font-size: .88rem; color: var(--c-ink-soft); }
.site-footer__social-label { font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--c-terra); margin: 0; }
.site-footer__social { display: flex; gap: 1.1rem; justify-content: center; }
.site-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    color: var(--c-terra); background: var(--c-surface);
    border: 1.5px solid var(--c-line-gold);
    transition: background var(--dur), color var(--dur), transform var(--dur);
}
.site-footer__social a:hover { background: var(--c-terra); color: var(--c-cream); transform: translateY(-2px); }
.site-footer__social svg { width: 1.25rem; height: 1.25rem; }
.site-footer__links { display: flex; gap: .75rem 1.5rem; flex-wrap: wrap; justify-content: center; }
.site-footer__links a { color: var(--c-ink-soft); text-decoration-color: var(--c-terra); font-size: .9rem; display: inline-block; padding: .5rem .25rem; min-height: 44px; }
.site-footer__links a:hover { color: var(--c-terra); }

@media (max-width: 860px) {
    .site-nav { display: none; }
}
/* CTA + brand stay on ONE line, side by side, on every phone (objectif n°1 = inscription). */
@media (max-width: 560px) {
    .site-header__inner { gap: .75rem; min-height: 4rem; }
    .brand__name { font-size: 1.15rem; }
    .site-header__cta { padding: .5em .9em; font-size: .8rem; }
}
@media (max-width: 360px) {
    .brand__name { font-size: 1rem; }
    .site-header__cta { padding: .45em .75em; font-size: .75rem; }
}

/* =====================================================================
   Hero & countdown  (maquette : bloc terracotta à gauche, photo à droite)
   ===================================================================== */
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 5vw, 4rem); }
.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 780px);
    justify-content: center;
    align-items: stretch;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Panneau terracotta arrondi qui porte le titre */
.hero__copy {
    position: relative;
    background: var(--c-terra);
    color: var(--c-on-night);
    border-radius: var(--r-xl);
    padding: clamp(1.75rem, 4vw, 3.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero__kicker { margin: 0 0 1.5rem; }
.hero__kicker-title { display: block; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: #fff; line-height: 1.1; }
.hero__kicker-date { display: block; margin-top: .2rem; font-size: .95rem; letter-spacing: .02em; color: #FBF4E9; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: 1.05; margin: 0 0 1.1rem; color: #fff; text-wrap: pretty; }
.hero__dresscode { font-size: clamp(1.05rem, 2.5vw, 1.4rem); line-height: 1.45; color: #fff; font-weight: 500; margin: 0 0 1rem; }
.hero__dresscode strong { font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.hero__tagline { font-size: var(--fs-lead); line-height: 1.55; color: #FBF4E9; margin: 0; }

/* Carte photo sur bloc terracotta */
.hero__media { position: relative; display: flex; }
.hero__media::before {
    content: "";
    position: absolute;
    inset: clamp(1.25rem, 3vw, 2.5rem) auto auto clamp(-1.5rem, -2vw, -.75rem);
    width: 70%; height: 78%;
    background: var(--c-terra);
    border-radius: var(--r-xl);
    z-index: 0;
}
.hero__photo {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    align-self: center;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* Countdown — pastilles crème sur le panneau terracotta.
   Grid fluide : 4 cartes égales qui occupent toute la largeur du panneau
   (desktop/tablette), 2x2 sous 560px — jamais de coupure ni d'overflow. */
.countdown { margin: 1.75rem 0 0; max-width: 100%; }
.countdown__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1.5vw, .9rem); }
.countdown__cell {
    min-width: 0;
    padding: clamp(.8rem, 1.6vw, 1.1rem) .5rem;
    background: rgba(251, 244, 233, .14);
    border: 1px solid var(--c-line-on-night);
    border-radius: var(--r-md);
    text-align: center;
}
.countdown__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.countdown__label { display: block; margin-top: .35rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #FBF4E9; }
.countdown__started { font-family: var(--font-display); font-size: 1.3rem; color: #fff; }

@media (max-width: 880px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__media { order: -1; }
    .hero__media::before { display: none; }
}

/* Hero panel breathing room on small phones (320-560px) + countdown 2x2
   (Jours/Heures puis Min/Sec) + CTA pleine largeur jamais coupé. */
@media (max-width: 560px) {
    .hero__copy { padding: 1.5rem 1.15rem 1.75rem; }
    .hero__title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .hero__kicker { margin-bottom: .9rem; }
    .hero__kicker-title { font-size: 1.2rem; }
    .countdown__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .countdown__cell { padding: .85rem .5rem; }
    .countdown__num { font-size: clamp(1.7rem, 9vw, 2.1rem); }
    .countdown__label { font-size: .64rem; }
    .hero__actions { margin-top: 1.5rem; }
    .hero__actions .btn { width: 100%; max-width: 100%; justify-content: center; white-space: normal; }
}

/* =====================================================================
   Concept & rules
   ===================================================================== */
/* (Concept title now flows inside .section-head — no special width clamp.) */
.concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.concept-facet { display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.25rem; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); }
.concept-facet__icon { color: var(--c-terra); font-size: 1.1rem; }
.concept-facet p { margin: 0; font-size: .98rem; }

/* Règles du jeu — bande terracotta, lignes icône + texte (cf. maquette) */
.rules-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.4rem; }
.rules-list li { display: flex; align-items: flex-start; gap: 1rem; }
.rule-icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem;
    margin-top: .1rem;
    color: var(--c-on-night);
}
.rule-icon svg { width: 1.7rem; height: 1.7rem; }
.rules-list p { margin: 0; color: var(--c-on-night); font-size: 1.05rem; line-height: 1.5; }
.rules-list strong { color: #fff; font-weight: 700; }

/* (Anciennes cartes — conservées au cas où) */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.rule-card { position: relative; overflow: hidden; }
.rule-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rule-card__num { position: absolute; top: .5rem; right: 1rem; font-family: var(--font-display); font-size: 3.5rem; color: var(--c-surface-2); z-index: 0; }
.rule-card h3, .rule-card p { position: relative; z-index: 1; }
.rule-card h3 { color: var(--c-terra); }

/* =====================================================================
   Infos pratiques — lignes icône + texte sur crème (cf. maquette)
   ===================================================================== */
.infos-list { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 1.1rem; }
.infos-list li { display: flex; align-items: center; gap: .9rem; font-size: 1.05rem; line-height: 1.5; color: var(--c-ink); }
.infos-list .info-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; color: var(--c-terra); }
.infos-list .info-icon svg { width: 1.5rem; height: 1.5rem; }
.infos-list em { font-style: italic; color: var(--c-ink-soft); }
.infos-price { margin-top: 1.5rem; font-size: 1.05rem; color: var(--c-ink); }
.infos-price strong { color: var(--c-terra); font-weight: 700; }

/* =====================================================================
   Confirmed counter
   ===================================================================== */
.counter-section { text-align: center; }
.counter-grid { display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; justify-content: center; margin-top: 2rem; }
.counter-stat__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 7vw, 5rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.counter-stat__label { display: block; margin-top: .5rem; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #FBF4E9; }

/* =====================================================================
   Gallery page (/galerie) — header, year filters, rights, "voir toute la galerie"
   ===================================================================== */
.eyebrow + h1 { text-align: center; }
.gallery-lead { text-align: center; max-width: 60ch; margin-inline: auto; }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.75rem 0 0; }
.gallery-filters a {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: .4rem .95rem; border-radius: var(--r-pill);
    border: 1.5px solid var(--c-line-gold); color: var(--c-ink-soft);
    text-decoration: none; font-size: .9rem; font-weight: 600;
    transition: color var(--dur), border-color var(--dur), background-color var(--dur);
}
.gallery-filters a:hover { border-color: var(--c-terra); color: var(--c-terra); }
.gallery-filters a.is-active { background: var(--c-terra); border-color: var(--c-terra); color: #fff; }
.gallery-empty { text-align: center; margin-top: 2rem; }
.gallery-rights { margin: clamp(2rem, 5vw, 3rem) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--c-line); font-size: .92rem; color: var(--c-ink-soft); text-align: center; }
.gallery-back { margin: 1rem 0 0; text-align: center; }
.gallery-back a { color: var(--c-terra); text-decoration: none; font-weight: 600; }
.gallery-more { text-align: center; margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* =====================================================================
   Media sections (Photos et GIF / Vidéos), paginated with "Charger plus"
   ===================================================================== */
.media-section { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.gallery-section-title { margin: 0; font-size: var(--fs-h3); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: clamp(.6rem, 2vw, 1rem); margin-top: clamp(1rem, 3vw, 1.5rem); }
.media-tile { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-sm); background: var(--c-surface-2); }
.media-tile__open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.media-tile--video .media-tile__open { cursor: pointer; }
.media-tile__open img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .media-tile:hover .media-tile__open img { transform: scale(1.06); } }
.media-tile__open:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-cream), inset 0 0 0 6px var(--c-terra); }
/* No-poster video fallback: a warm dark card (not a raw red block), with the play badge + title. */
.media-tile__ph { position: absolute; inset: 0; background: linear-gradient(150deg, #342c26 0%, #241f1b 100%); }
.media-tile__ph::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 30%, rgba(190, 68, 52, .22), transparent 70%); }
.media-tile__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3rem; height: 3rem; border-radius: 50%; background: rgba(251, 246, 236, .92); pointer-events: none; }
.media-tile__play::before { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: .5rem 0 .5rem .8rem; border-color: transparent transparent transparent var(--c-terra); }
.media-tile--video:hover .media-tile__play { background: #fff; }
.media-tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .6rem .5rem; font-size: .8rem; font-weight: 600; color: #fff; text-align: left; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-pagination { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: center; margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.gallery-pagination .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
    .media-tile__open img { transition: none; }
    .media-tile:hover .media-tile__open img { transform: none; }
}

/* =====================================================================
   Sponsors
   ===================================================================== */
.sponsors { list-style: none; padding: 0; margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: center; justify-content: center; }
.sponsor img { max-height: 60px; max-width: 160px; filter: grayscale(1); opacity: .7; transition: filter var(--dur), opacity var(--dur); }
.sponsor a:hover img { filter: grayscale(0); opacity: 1; }
.sponsor__name { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-ink-soft); }
@media (max-width: 520px) {
    .sponsors { gap: 1.25rem 1.75rem; }
    .sponsor__name { font-size: 1.1rem; text-align: center; }
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { margin-top: 2.5rem; }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary { cursor: pointer; padding: 1.15rem 0; font-family: var(--font-display); font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--c-terra); font-size: 1.5rem; transition: transform var(--dur) var(--ease); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 1.25rem; color: var(--c-ink-soft); }

/* =====================================================================
   Registration form — carte terracotta + panneau crème (cf. maquette)
   ===================================================================== */
.reg-card {
    background: var(--c-terra);
    border-radius: var(--r-xl);
    padding: clamp(1.5rem, 4vw, 3rem);
    box-shadow: var(--shadow-lg);
    margin-top: 2.5rem;
}
/* Higher specificity than ".section--alt h2" so the title stays light on terracotta. */
.reg-card .reg-card__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
    text-align: center;
    margin: 0 0 1.75rem;
}
.reg-card__price { text-align: center; color: var(--c-on-night-soft); margin: -1rem 0 1.75rem; font-size: 1rem; }
.reg-card__price strong { color: #fff; }

/* Le panneau crème qui contient les champs */
.reg-panel {
    background: var(--c-cream);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.reg-form { margin: 0; }
.reg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
/* In the 2-col grid the gap already spaces rows — drop the extra margin to avoid double gaps. */
.reg-grid .field { margin-bottom: 0; }
/* Push each input to the bottom of its grid cell so inputs align even if a label wraps. */
.reg-grid .field > label { margin-bottom: auto; }
.field label { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-green); }
/* Mark required fields up-front (Symfony already adds .required on the label). */
.field label.required::after { content: " *"; color: var(--c-terra); font-weight: 700; }

/* Champs « ligne pointillée » sur fond crème, texte vert profond */
.reg-form input:not([type=checkbox]):not([type=radio]),
.reg-form select,
.reg-form textarea {
    width: 100%;
    min-height: 44px;
    padding: .75em .35em;
    font: inherit;
    color: var(--c-green);
    background: transparent;
    border: 0;
    border-bottom: 2px dotted color-mix(in srgb, var(--c-green) 70%, transparent);
    border-radius: 0;
    transition: border-color var(--dur), box-shadow var(--dur);
}
.reg-form textarea { border: 2px dotted color-mix(in srgb, var(--c-green) 60%, transparent); border-radius: var(--r-sm); padding: .6em .7em; }
.reg-form select { padding-block: .5em; }
.reg-form input::placeholder, .reg-form textarea::placeholder { color: color-mix(in srgb, var(--c-green) 72%, transparent); }

/* Hide native number spinner — keeps the underline style consistent (paired with inputmode in PHP). */
.reg-form input[type=number] { -moz-appearance: textfield; }
.reg-form input[type=number]::-webkit-outer-spin-button,
.reg-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Error state — Symfony sets aria-invalid on faulty widgets. */
.reg-form input[aria-invalid="true"],
.reg-form select[aria-invalid="true"],
.reg-form textarea[aria-invalid="true"] { border-color: #b3261e; border-bottom-style: solid; }
.reg-form input:focus, .reg-form select:focus, .reg-form textarea:focus {
    outline: none;
    border-bottom-style: solid;
    border-color: var(--c-green);
    box-shadow: 0 2px 0 -1px var(--c-green);
}
.reg-form textarea:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-green) 35%, transparent); }

/* Auth input (admin login) garde son style encadré classique */
.auth__input {
    width: 100%;
    padding: .8em .9em;
    font: inherit;
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    transition: border-color var(--dur), box-shadow var(--dur);
}
.auth__input:focus {
    outline: none;
    border-color: var(--c-terra);
    box-shadow: 0 0 0 3px rgba(190,68,52,.18);
}

.field--check { flex-direction: row; align-items: center; gap: .7rem; min-height: 44px; }
.field--check input { width: 1.3rem; height: 1.3rem; margin-top: 0; accent-color: var(--c-terra); border-bottom: 0 !important; }
.field--check label { font-weight: 500; font-size: .92rem; letter-spacing: 0; text-transform: none; color: var(--c-green); }
/* Long-text consents keep top alignment. */
.field--check.consent { align-items: flex-start; min-height: 0; }
.field--check.consent input { margin-top: .15rem; }
.consent { background: color-mix(in srgb, var(--c-surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--c-green) 18%, transparent); border-radius: var(--r-sm); padding: .85rem 1rem; }

/* Inline radio group (preferred contact) — pair radio+label, 44px touch targets. */
.field--inline { gap: .6rem; }
.field--inline > div, .field--inline ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; list-style: none; padding: 0; margin: 0; }
.field--inline > div label, .field--inline ul label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .25rem .2rem; font-weight: 500; color: var(--c-green); cursor: pointer; }
.reg-form .field--inline input[type=radio] { width: 1.15rem; height: 1.15rem; accent-color: var(--c-terra); margin: 0; border-bottom: 0 !important; }

/* fieldset/legend wrapper for the radio group — neutralise native chrome, give the legend the group-label look. */
fieldset.field--inline { border: 0; padding: 0; margin: 0 0 1.1rem; }
fieldset.field--inline legend { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-green); padding: 0; margin-bottom: .25rem; }

.reg-form__submit { margin: 1.75rem auto 0; display: flex; min-width: 14rem; }
.reg-form__note { margin: 1.25rem 0 0; font-size: .9rem; font-weight: 500; color: #FBF4E9; text-align: center; }
.reg-form ul.form-error-message, .reg-form .form-error-message, .field ul { margin: .25rem 0 0; padding: 0; list-style: none; color: #7a1d12; font-size: .85rem; font-weight: 600; }
.field ul li::before { content: "⚠ "; }

.form-flash { padding: .9rem 1.1rem; border-radius: var(--r-sm); margin-bottom: 1.25rem; background: var(--c-surface); border: 1px solid var(--c-line-strong); }
.form-flash--error { border-color: #d9a59c; background: #f7e9e6; color: #7a1d12; }

/* Inscriptions fermées — message sur la carte terracotta */
.reg-closed { background: var(--c-cream); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem); text-align: center; color: var(--c-green); font-size: 1.05rem; }
.reg-closed__cta { margin: 1.5rem 0 0; text-align: center; }
/* Ajax success card shown in place of the form (no full reload). */
.reg-success { background: var(--c-cream); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); text-align: center; color: var(--c-green); font-size: 1.1rem; line-height: 1.6; }
.reg-success strong { display: block; font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .6rem; color: var(--c-terra-2); }
.reg-form .form-flash { text-align: center; }

@media (max-width: 620px) {
    .reg-grid { grid-template-columns: 1fr; }
    .reg-form__submit { width: 100%; min-width: 0; }
}

/* =====================================================================
   Confirmation screen, legal docs & admin login
   ===================================================================== */
.confirm-screen { min-height: 70vh; display: flex; align-items: center; }
.confirm-screen__sign { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 1.6rem; color: #fff; }

.legal-doc h2 { font-size: var(--fs-h3); margin-top: 2rem; }
.legal-doc { line-height: 1.7; }
/* Cap reading measure independently of the 760px container. */
.section .container--narrow > p, .legal-doc p, .legal-doc li { max-width: 68ch; }
.legal-doc a { text-decoration-color: var(--c-terra); }

/* Charte de l’amitié — carte éditoriale centrée, respiration poétique. */
.charter { max-width: 56ch; margin: 0 auto; text-align: center; background: var(--c-surface); border: 1px solid var(--c-line-gold); border-radius: var(--r-md); padding: clamp(1.75rem, 5vw, 3.25rem); box-shadow: var(--shadow-sm); }
.charter > h1 { font-family: var(--font-display); color: var(--c-terra); margin: .35rem 0 0; }
.charter__text { margin: 1.75rem 0 0; font-size: 1.12rem; line-height: 1.95; color: var(--c-green); }
.charter__text p { margin: 0 0 1.4rem; }
.charter__text p:last-child { margin-bottom: 0; }
.charter__back { margin: 2.25rem 0 0; }

.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); background: radial-gradient(120% 120% at 50% 0%, var(--c-terra-3), var(--c-terra-2)); }
.auth__card { width: 100%; max-width: 400px; background: var(--c-surface); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.auth__brand { text-align: center; letter-spacing: .22em; text-transform: uppercase; font-size: .75rem; color: var(--c-terra); margin: 0; }
.auth__title { text-align: center; margin: .15rem 0 0; font-size: clamp(1.7rem, 7vw, 2.3rem); line-height: 1.1; }
.auth__subtitle { text-align: center; color: var(--c-ink-soft); font-size: .9rem; margin: .25rem 0 1.6rem; }
.auth__label { font-size: .9rem; font-weight: 600; margin-top: .75rem; }
.auth__input { margin-top: .4rem; }
.auth__error { background: #f7e9e6; border: 1px solid #d9a59c; color: #7a1d12; padding: .7rem .9rem; border-radius: var(--r-sm); font-size: .9rem; }
.auth__submit { margin-top: 1.5rem; justify-content: center; }

/* =====================================================================
   Administration
   ===================================================================== */
body.admin { background: #eef0f3; }

.admin-shell { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }

.admin-side { background: var(--c-night); color: var(--c-on-night); padding: 1.5rem 1.1rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 0; height: 100vh; }
.admin-brand { color: #fff; text-decoration: none; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; }
.admin-brand small { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin-top: .25rem; }
.admin-nav { display: flex; flex-direction: column; gap: .15rem; }
.admin-nav a { color: var(--c-on-night-soft); text-decoration: none; padding: .6rem .8rem; border-radius: var(--r-sm); font-size: .95rem; transition: background var(--dur), color var(--dur); }
.admin-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-nav a.is-active { background: rgba(217,189,120,.16); color: #fff; }
.admin-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; font-size: .9rem; }
.admin-side__foot a { color: var(--c-on-night-soft); text-decoration: none; }
.admin-side__foot a:hover { color: #fff; }

.admin-main { padding: clamp(1.25rem, 3vw, 2.5rem); max-width: 1100px; }
.admin-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 1.5rem; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-head .admin-title { margin: 0; }
.admin-back { margin: 0 0 1rem; }
.admin-back a { color: var(--c-ink-soft); text-decoration: none; }

.admin-flash { padding: .85rem 1.1rem; border-radius: var(--r-sm); margin-bottom: 1.25rem; border: 1px solid var(--c-line-strong); background: #fff; }
.admin-flash--success { border-color: #b6dcc0; background: #eef8f1; color: #1d6b35; }
.admin-flash--error { border-color: #e3b5b0; background: #fcf3f2; color: #8a2018; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.kpi { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem; background: #fff; border: 1px solid var(--c-line); border-left: 4px solid var(--c-silver); border-radius: var(--r-md); text-decoration: none; color: var(--c-ink); box-shadow: var(--shadow-sm); }
.kpi__num { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
.kpi__label { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-soft); }
.kpi--amber { border-left-color: #d99a16; }
.kpi--green { border-left-color: #2e8a4f; }
.kpi--gold { border-left-color: var(--c-gold); }
.kpi--red { border-left-color: #c4452f; }

.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.admin-panel { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: clamp(1.1rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-sm); }
.admin-panel--narrow { max-width: 560px; }
.admin-panel h2 { font-size: 1.2rem; margin: 1.5rem 0 .85rem; }
.admin-panel h2:first-child { margin-top: 0; }

.admin-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-table th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-faint); padding: .5rem .6rem; border-bottom: 1px solid var(--c-line); }
.admin-table td { padding: .65rem .6rem; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.admin-table a { color: var(--c-ink); }

.admin-filters { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.admin-filters select, .admin-filters input { padding: .6em .8em; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); font: inherit; }

.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0 0 1rem; }
.detail-list dt { color: var(--c-ink-faint); font-size: .85rem; }
.detail-list dd { margin: 0; }

.action-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.action-row form { margin: 0; }

.history { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.history li { padding-bottom: .6rem; border-bottom: 1px solid var(--c-line); font-size: .9rem; }

.row-actions { display: flex; gap: .4rem; align-items: center; }
.row-actions form { margin: 0; }
.btn--xs { padding: .35em .8em; font-size: .8rem; }

.thumb { max-width: 200px; border-radius: var(--r-sm); border: 1px solid var(--c-line); }
.thumb--sm { max-height: 34px; max-width: 90px; }

.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.admin-gallery__item { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.admin-gallery__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.admin-gallery__item figcaption { display: flex; gap: .5rem; align-items: center; padding: .5rem .65rem; font-size: .82rem; }
.admin-gallery__item .row-actions { padding: 0 .65rem .65rem; }

.badge { display: inline-block; padding: .25em .7em; border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; background: #eceef1; color: var(--c-ink-soft); }
.badge--amber, .badge--status-pending { background: #fdf0d5; color: #8a5a00; }
.badge--green, .badge--status-sent { background: #e3f4e7; color: #1d6b35; }
.badge--red, .badge--status-failed { background: #fcebe9; color: #8a2018; }
.badge--grey, .badge--status-mock { background: #e6eaf0; color: #45506a; }
.badge--gold { background: #f3e7c8; color: #7a5a14; }

.warn { background: #fff8e8; border: 1px solid #ecd9a6; color: #7a5a14; padding: .85rem 1.1rem; border-radius: var(--r-sm); }
.error-text { color: #b3261e; font-size: .85rem; }

.admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.admin-status { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
.admin-status__item { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: .85rem 1.1rem; box-shadow: var(--shadow-sm); }
.admin-status__label { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-soft); }
.admin-status__link { font-size: .85rem; color: var(--c-terra); text-decoration: none; }
.admin-status__link:hover { text-decoration: underline; }

/* Raw admin forms (bulk upload, bulk video links). */
.admin-form .field { margin-bottom: 1.2rem; }
.admin-form label:not(.field-check) { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--c-ink); }
.admin-form input[type=file],
.admin-form input[type=number],
.admin-form input[type=text],
.admin-form textarea { width: 100%; padding: .6em .75em; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); font: inherit; background: #fff; }
.admin-form textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
.admin-form .field-help { margin: .4rem 0 0; font-size: .85rem; color: var(--c-ink-soft); }
.admin-form .field-check { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.2rem; font-weight: 500; cursor: pointer; }
.admin-form .field-check input { width: auto; }

/* form_row-rendered admin forms (manual registration, Excel import) — bordered control look. */
.admin-form > div { margin-bottom: 1.1rem; }
.admin-form input[type=email],
.admin-form input[type=tel],
.admin-form input[type=search],
.admin-form select { width: 100%; padding: .6em .75em; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); font: inherit; background: #fff; }
.admin-form select { min-height: 44px; }
.admin-form .help-text { display: block; margin: .35rem 0 0; font-size: .85rem; color: var(--c-ink-soft); }
.admin-form input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--c-terra); }

/* Two-column field grid for the manual add form (collapses below). */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form-grid > div { margin-bottom: 1.1rem; }

/* Excel import — steps, summary pills, preview row states. */
.import-steps { margin: 0 0 1.25rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; color: var(--c-ink-soft); }
.import-help { margin-top: 1.25rem; }
.import-summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.pill { display: inline-block; padding: .3em .8em; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; background: #eceef1; color: var(--c-ink-soft); }
.pill--ok { background: #e3f4e7; color: #1d6b35; }
.pill--warn { background: #fdf0d5; color: #8a5a00; }
.pill--err { background: #fcebe9; color: #8a2018; }
.import-table { font-size: .88rem; }
.import-row--dup { background: #fffaf0; }
.import-row--err { background: #fdf4f3; }
.import-row .error-text { display: block; }
.import-row .warn-text { display: block; color: #8a5a00; font-size: .85rem; }
.import-hint { margin: -.4rem 0 1rem; }
.import-hint--ok { color: #1d6b35; font-weight: 600; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Bulk-cancel selection on the registrations list. */
.bulk-bar { display: flex; justify-content: flex-end; margin: 0 0 .85rem; }
.col-check { width: 2.4rem; text-align: center; }
.col-check input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--c-terra); cursor: pointer; }
.btn--danger { color: #b3261e; border-color: #e2b3ae; }
.btn--danger:hover:not([disabled]) { background: #fcebe9; border-color: #b3261e; }
.import-confirm { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .5rem 0 1rem; }

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

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
    .admin-side__foot { margin: 0; flex-direction: row; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-cols { grid-template-columns: 1fr; }
}

/* Admin tables → readable stacked cards on small screens. */
@media (max-width: 640px) {
    .admin-panel { overflow-x: auto; }
    .admin-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .admin-table--cards tbody { display: block; }
    .admin-table--cards tr { display: block; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: .35rem .85rem; margin-bottom: .75rem; box-shadow: var(--shadow-sm); }
    .admin-table--cards td { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border: 0; padding: .45rem 0; text-align: right; }
    .admin-table--cards td:not(:last-child) { border-bottom: 1px solid var(--c-line); }
    .admin-table--cards td::before { content: attr(data-label); font-weight: 600; color: var(--c-ink-faint); text-align: left; }
}

/* =====================================================================
   Motion preferences
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* =====================================================================
   Home gallery cover (single photo → link to the full gallery)
   ===================================================================== */
.gallery-cover {
    position: relative; display: block; margin-top: clamp(1.75rem, 4vw, 3rem);
    border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md);
    aspect-ratio: 3 / 2;
}
.gallery-cover__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.gallery-cover__ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--c-terra-3), var(--c-terra-2)); }
.gallery-cover__overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: .25rem; padding: clamp(1rem, 4vw, 2rem); text-align: center; color: #fff;
    background: linear-gradient(to top, rgba(43, 24, 18, .72), rgba(43, 24, 18, .05) 55%, transparent);
}
.gallery-cover__label { font-weight: 700; font-size: clamp(1.05rem, 3.5vw, 1.4rem); }
.gallery-cover__hint { font-size: .92rem; opacity: .92; }
@media (hover: hover) and (pointer: fine) {
    .gallery-cover:hover .gallery-cover__img { transform: scale(1.04); }
}
.gallery-cover:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-cream), 0 0 0 6px var(--c-terra); }

/* =====================================================================
   Per-media share button (overlay on gallery tiles)
   ===================================================================== */
.share-icon { width: 1.05rem; height: 1.05rem; }
.media-share-btn {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%;
    background: rgba(251, 246, 236, .92); color: var(--c-terra); cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), background-color var(--dur);
}
.media-share-btn:hover { transform: scale(1.08); background: #fff; }
.media-share-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-cream), 0 0 0 5px var(--c-terra); }

/* =====================================================================
   Carousel (full-screen lightbox for photos AND videos)
   ===================================================================== */
.carousel {
    position: fixed; inset: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; padding: 0; border: 0; background: rgba(28, 16, 12, .97); color: #fff;
}
.carousel::backdrop { background: rgba(28, 16, 12, .97); }
.carousel__bar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: max(.6rem, env(safe-area-inset-top)) clamp(.8rem, 3vw, 1.5rem) .6rem;
}
.carousel__counter { font-size: .92rem; font-weight: 600; opacity: .9; }
.carousel__bar-actions { display: inline-flex; align-items: center; gap: .5rem; }
.carousel__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px;
    padding: .45rem .95rem; border: 0; border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 600; font-size: .9rem;
    cursor: pointer; transition: background-color var(--dur);
}
.carousel__btn:hover { background: rgba(255, 255, 255, .26); }
.carousel__close { width: 2.75rem; min-width: 2.75rem; padding: 0; font-size: 1.6rem; line-height: 1; }
.carousel__stage {
    position: absolute; inset: 0; margin: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(3.4rem, 9vh, 5rem) clamp(.5rem, 4vw, 4rem);
    touch-action: none; /* pinch-zoom/pan/swipe are handled in JS */
}
.carousel__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; transform-origin: center center; will-change: transform; }
.carousel__img.is-zoomed { cursor: grab; border-radius: 0; }
.carousel__video { max-width: 100%; max-height: 100%; border-radius: 8px; background: #000; }
.carousel__frame { width: min(100%, 1100px); aspect-ratio: 16 / 9; max-height: 100%; border: 0; border-radius: 8px; background: #000; }
.carousel__link { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.carousel__link .carousel__img { max-height: 68vh; }
.carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(2.75rem, 7vw, 3.4rem); height: clamp(2.75rem, 7vw, 3.4rem);
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 1.8rem; line-height: 1; cursor: pointer;
    transition: background-color var(--dur), transform var(--dur);
}
.carousel__nav:hover { background: rgba(255, 255, 255, .3); }
.carousel__nav--prev { left: clamp(.4rem, 2vw, 1.2rem); }
.carousel__nav--next { right: clamp(.4rem, 2vw, 1.2rem); }
.carousel__cap {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); text-align: center; font-size: .95rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

/* =====================================================================
   Single-media share page (/galerie/photo/{id}, /galerie/video/{id})
   ===================================================================== */
.media-page__back { margin-bottom: 1.25rem; }
.media-page__back a { color: var(--c-terra); text-decoration: none; font-weight: 600; }
.media-page__frame { margin: 0; }
.media-page__frame > img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.media-page__video { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-md); background: #000; }
div.media-page__video { aspect-ratio: 16 / 9; }
div.media-page__video iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: var(--r-md); }
video.media-page__video { height: auto; max-height: 80vh; display: block; }
.media-page__out { display: inline-flex; }
.media-page__cap { margin-top: .85rem; font-weight: 600; text-align: center; }
.media-page__actions { margin-top: 1.5rem; text-align: center; }
.media-share-pill { display: inline-flex; align-items: center; gap: .5rem; }
.media-share-pill .share-icon { width: 1.1rem; height: 1.1rem; }