:root {
    --color-primary: #178289;
    --color-primary-dark: #106065;
    --color-primary-light: #e3f1f1;
    --color-accent: #d9cbb0;
    --color-accent-dark: #a89066;
    --color-text: #4a3b2a;
    --color-text-muted: #6b5d4a;
    --color-bg: #f7f6f4;
    --color-bg-alt: rgb(247, 242, 234);
    --color-border: #b0d9db;
    --radius-lg: 1.75rem;
    --radius-md: 1.25rem;
    --shadow-card: 0 10px 30px rgba(23, 130, 137, 0.12);
    --font-base: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Fredoka", sans-serif;
}

* { box-sizing: border-box; }

html { height: 100%; }

/* Sticky footer: body is the flex column (header/main/footer, in source order), .site-main is
   the only item allowed to grow — on a short page it stretches to fill the leftover viewport
   height and pushes .site-footer down to the bottom instead of leaving a gap under it. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

.site-main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* CmsPageController::renderPage() bakes the page's auto-title <h1> directly into the same HTML
   string as the block tree (see cms-core), both now inside the same .container the block tree's
   own sections sit in (cms-page.php) — nothing left to constrain here, just the extra breathing
   room below the header that only the very first element (when it's this h1) has ever had. */
.container > h1:first-child {
    padding-top: 1.5rem;
}

/* A bare top-level richtext block still ends up with visible space below it even at
   .cms-richtext's own margin:0 — its *inner* <p> (see cms-blocks/richtext.php's tag=null case)
   keeps its normal browser margin, which collapses through the childless-of-padding/border div
   and reads as spacing after the block. .cms-image has no such inner paragraph to borrow from —
   a bare top-level Image immediately followed by another block touches it with zero gap. */
.container > .cms-image {
    margin-bottom: 1.5rem;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

h1, h2, h3, h4 { line-height: 1.25; font-family: var(--font-display); font-weight: 600; }
/* A "Texte" block set to a markup other than its default <p>/<div> (see cms-core's
   templates/cms-blocks/richtext.php) still needs to read as plain body text, not gain a
   heading's or a paragraph's own default browser margin out of nowhere — spacing between blocks
   is controlled by each section/group's own gap/margin setting, not by this. Placed before the
   variant rules below (.cms-richtext--lead etc., which set their own real margins) so their
   later, equal-specificity declaration still wins over this reset for those specific blocks. */
.cms-richtext { margin: 0; }

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-primary);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.logo img { width: 300px; height: auto; display: block; }

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
}
.menu-toggle__bar {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #fff;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.main-nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.main-nav a:hover { color: #c6fcff; }

.main-nav a.is-active { border-bottom-color: var(--color-accent); }

.main-nav .dropdown-toggle-arrow { font-size: 0.65rem; color: rgba(255, 255, 255, 0.75); }

.nav-cta {
    font-family: var(--font-display);
    color: var(--color-primary-dark) !important;
    background: #fff;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border-bottom: none !important;
}
.nav-cta:hover,
.nav-cta.is-active { background: var(--color-accent); color: var(--color-text) !important; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.nav-item-dropdown { position: relative; display: inline-flex; align-items: center; }

/* Hidden on desktop, where hover/focus-within already opens the dropdown — becomes a real,
   visible tap target in the mobile nav (see the max-width breakpoint below), since there's no
   hover on touch and the parent <a> itself always navigates on tap. */
.dropdown-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
    min-width: 230px;
    width: max-content;
    display: none;
    z-index: 20;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu,
.nav-item-dropdown.is-open .dropdown-menu {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 0.85rem 1.1rem;
    color: var(--color-text);
    font-weight: 500;
    font-size: 0.92rem;
    border: none;
}
.dropdown-menu li a:hover { background: var(--color-bg-alt); color: var(--color-primary); }

/* Home hero */
.home-hero, .cms-section--home-hero { margin-top: 3.5rem; }
.home-hero, .cms-section--home-hero .cms-section__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

.home-hero__badge {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.home-hero h1, .cms-section--home-hero h1 { font-size: 2.9rem; line-height: 1.12; margin: 0 0 1.25rem; color: var(--color-primary-dark); }
.home-hero__lead, .cms-richtext--lead { font-size: 1.15rem; font-weight: 600; color: var(--color-text-muted); max-width: 46ch; margin: 0 0 2rem; }

.home-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.25rem; }

.btn, .cms-button--cta, .cms-button--cta-outline {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.9rem 1.9rem;
    border-radius: 999px;
    display: inline-block;
    cursor: pointer;
    border: none;
}
.btn-primary, .cms-button--cta { color: #fff; background: var(--color-primary); box-shadow: 0 4px 12px rgba(23, 130, 137, 0.16); }
.btn-primary:hover, .cms-button--cta:hover { background: var(--color-primary-dark); color: #fff; }
.btn-outline, .cms-button--cta-outline { color: var(--color-primary-dark); background: #fff; border: 2px solid var(--color-primary); padding: 0.85rem 1.8rem; }
.btn-outline:hover, .cms-button--cta-outline:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.btn:disabled, .btn:disabled:hover { background: #ccc; color: #777; box-shadow: none; cursor: not-allowed; }

.home-hero__media, .cms-group--hero-media { position: relative; }
.home-hero__media .blob, .cms-group--hero-media::before, .cms-group--hero-media::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; }
.home-hero__media .blob--accent, .cms-group--hero-media::before { top: -2rem; right: -2rem; width: 150px; height: 150px; background: var(--color-accent); opacity: 0.4; }
.home-hero__media .blob--primary, .cms-group--hero-media::after { bottom: -1.5rem; left: -1.5rem; width: 110px; height: 110px; background: var(--color-primary); opacity: 0.15; }
.home-hero__media .frame, .cms-group--hero-media .cms-image {
    position: relative;
    z-index: 1;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(23, 130, 137, 0.2);
    aspect-ratio: 4 / 5;
}
.home-hero__media .frame img, .cms-group--hero-media .cms-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Infographic */
.infographic { margin-top: 3.5rem; }
.infographic img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* Mission */
.mission { margin-top: 5rem; }
/* [data-cms-columns] added purely to out-specificity the generic
   .cms-group--layout-columns[data-cms-columns="2"] engine rule below (same 2-selector
   specificity would otherwise make this a file-order coin flip). */
.mission, .cms-section--mission .cms-group--layout-columns[data-cms-columns] {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}
.mission h2, .cms-section--mission h2 { font-size: 1.9rem; color: var(--color-primary-dark); margin: 0 0 1rem; }
.mission p { font-size: 1.1rem; font-weight: 600; color: var(--color-text-muted); margin: 0; }

.stat-list, .cms-stat-list { display: flex; flex-direction: column; gap: 1rem; }
.stat-card, .cms-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}
.stat-card__value, .cms-stat-item__value { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--color-primary); min-width: 5rem; }
.stat-card__label, .cms-stat-item__label { font-size: 0.9rem; color: var(--color-text-muted); }

/* Divider */
.divider { margin-top: 4rem; }
.divider hr { border: none; border-top: 1px solid var(--color-border); margin: 0; }

/* Activities — .cms-section--activities is the CMS alias, same rationale as .hero/.formule-card
   above (matsports.be's "Grille" block). */
.activities, .cms-section--activities { margin-top: 4rem; }
.activities h2, .cms-section--activities h2 { font-size: 1.9rem; color: var(--color-primary-dark); text-align: center; margin: 0 0 2.5rem; }

.activity-grid, .cms-activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }

.activity-card, .cms-activity-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
/* A linked card (matsports.be's "Grille" block, when an editor sets a link per card) renders
   as <a> instead of <article>/<div> — reset its inline default and inherited link styling so
   it looks identical to the non-linked case. */
a.cms-activity-card { display: block; color: inherit; text-decoration: none; }
.activity-card__image, .cms-activity-card__image { width: 100%; height: 160px; }
.activity-card__image img, .cms-activity-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.activity-card__body, .cms-activity-card__body { padding: 1.75rem 2rem 2rem; }
.activity-card h3, .cms-activity-card h3 { font-size: 1.35rem; color: var(--color-primary-dark); margin: 0 0 0.75rem; }
.activity-card p, .cms-activity-card p { color: var(--color-text-muted); margin: 0; font-size: 0.98rem; }

/* Quality + schools */
.quality, .cms-section--quality {
    background: var(--color-primary-dark);
    border-radius: var(--radius-lg);
    padding-top: 3rem;
    padding-bottom: 3rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 4.5rem;
}
/* Left/right padding diverges here: .quality (the static utility pages) has never sat inside
   .cms-section__inner and needs nothing extra. .cms-section--quality (CMS-rendered) used to get
   an extra 1.5rem/24px each side from .cms-section__inner's own padding stacked on top of this
   rule's — now that .cms-section__inner carries no padding of its own (.container, the CMS page
   wrapper, provides that layer once for every top-level block instead), reproducing that same
   1.5rem here keeps this variant's text sitting exactly where it always has. */
.quality { padding-left: 3rem; padding-right: 3rem; }
.cms-section--quality { padding-left: 4.5rem; padding-right: 4.5rem; }
/* No grid on .cms-section--quality itself: the 2-column split is the nested
   group(layout=columns,columns=2) — see bin/seed-cms-content.php's home page build.
   [data-cms-columns] added purely to out-specificity the generic
   .cms-group--layout-columns[data-cms-columns="2"] engine rule below (same 2-selector
   specificity would otherwise make this a file-order coin flip). */
.quality, .cms-section--quality .cms-group--layout-columns[data-cms-columns] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.quality::before, .cms-section--quality::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    background: var(--color-accent);
    opacity: 0.18;
    border-radius: 50%;
}
.quality__content, .quality__schools, .cms-section--quality .cms-section__inner { position: relative; z-index: 1; }
.quality h2, .cms-section--quality h2 { font-size: 1.9rem; margin: 0 0 1rem; }
.quality p, .cms-section--quality p { font-size: 1.05rem; opacity: 0.92; margin: 0 0 1.5rem; }

.tag-list, .cms-list--tags { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* color: inherit beats :where(.cms-list)'s color (further down this file) — that generic
   base rule is meant for plain lists, not this dark-background pill/tag variant, but as a
   direct declaration on the same element it would otherwise win over inheriting the
   section's white text regardless of specificity. */
.cms-list--tags { list-style: none; padding: 0; margin: 0; color: inherit; }
.tag, .cms-list--tags li {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.quality__eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    background: var(--color-accent);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.quality__schools h3, .cms-section--quality h3 { font-size: 1.3rem; margin: 0 0 1rem; }

.school-pills, .cms-list--pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cms-list--pills { list-style: none; padding: 0; margin: 0; color: inherit; }
.school-pill, .cms-list--pills li {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Contact mini CTA */
.contact-mini, .cms-section--contact-mini { margin-top: 4.5rem; }
.contact-mini__inner, .cms-section--contact-mini .cms-section__inner {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem 2rem;
}
.contact-mini__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.contact-mini__inner span, .cms-section--contact-mini .cms-section__inner p { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--color-primary-dark); margin: 0; }
.contact-mini .btn-primary, .cms-section--contact-mini .cms-button--cta { font-size: 0.95rem; padding: 0.65rem 1.5rem; }

/* Hero (generic page-title banner used on all pages except the homepage) */
/* .cms-section--hero is the CMS page-builder's generic equivalent of this same component
   (see cms-core's section.php "variant" setting) — kept as an alias so migrated pages render
   pixel-identical to these hardcoded templates without ever editing the rules below. Left/right
   padding is set separately for the two (see below): .hero (the static utility pages) never sat
   inside .cms-section__inner and needs nothing extra; .cms-section--hero used to get an extra
   1.5rem/24px each side stacked from .cms-section__inner's own padding — now that
   .cms-section__inner carries none of its own (.container, the CMS page wrapper, provides that
   layer once for every top-level block instead), reproducing that same 1.5rem here keeps this
   variant's text sitting exactly where it always has. */
.hero, .cms-section--hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.hero { padding-left: 2rem; padding-right: 2rem; }
.cms-section--hero { padding-left: 3.5rem; padding-right: 3.5rem; }

.hero::before, .cms-section--hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    background: var(--color-accent);
    opacity: 0.35;
    border-radius: 50%;
}

.hero::after, .cms-section--hero::after {
    content: '';
    position: absolute;
    bottom: -90px;
    left: 8%;
    width: 170px;
    height: 170px;
    background: var(--color-accent);
    opacity: 0.18;
    border-radius: 50%;
}

.hero h1, .hero p, .hero a,
.cms-section--hero h1, .cms-section--hero p, .cms-section--hero a {
    position: relative;
    z-index: 1;
}

.hero h1, .cms-section--hero h1 { font-size: 2rem; margin-top: 0; }
.hero p, .cms-section--hero p { font-size: 1.1rem; max-width: 60ch; }
.hero a, .cms-section--hero a {
    color: #fff;
    text-decoration: underline;
}

/* Formule (pricing) card — .cms-section--card is the CMS alias, same rationale as .hero above
   (including the same left/right padding split, same reasoning: compensates for the 1.5rem
   .cms-section__inner no longer contributes on the CMS-rendered side only). */
.formule-card, .cms-section--card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.formule-card { padding-left: 2rem; padding-right: 2rem; }
.cms-section--card { padding-left: 3.5rem; padding-right: 3.5rem; }

.formule-card h3, .cms-section--card h3,
.formule-card h4, .cms-section--card h4 {
    margin-top: 0;
    /* Every other pair of blocks in a card only ever looks spaced because one side has an inner
       <p> whose own browser margin collapses through its wrapper div and reaches the gap (see
       .cms-richtext's own margin:0 comment above) — a heading has no such inner paragraph to
       borrow from, so one immediately followed by a block that doesn't either (.cms-list,
       .cms-image, a button…) touches it directly. Unconditional on the heading itself rather than
       only when followed by those specific block types: margin collapse already keeps a
       heading-then-paragraph pair at the same 16px it had before (max of the two sides, not the
       sum), so this can't double up spacing anywhere it already worked. */
    margin-bottom: 1rem;
}
.formule-card h3, .cms-section--card h3 { color: var(--color-primary-dark); }

.notice-unavailable, .cms-richtext--notice {
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-accent-dark);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-style: italic;
    color: var(--color-text-muted);
}

.price-badge, .cms-richtext--badge {
    display: flex;
    max-width: max-content;
    background: var(--color-accent);
    color: var(--color-text);
    font-weight: 700;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    margin: 0.5rem 0 1rem;
}

.price-tiers, .cms-list--tiers {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.price-tiers li, .cms-list--tiers li {
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.terms-list, .cms-list--terms, .cms-richtext--muted { padding-left: 1.2rem; color: var(--color-text-muted); }

/* Forms */
.form-field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.form-row { display: flex; gap: 1rem; }
.form-row .form-field { flex: 1; min-width: 0; }
@media (max-width: 640px) {
    .form-row { flex-direction: column; gap: 0; }
}
.form-field label { font-weight: 600; }
.form-field input,
.form-field textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    font-family: inherit;
    font-size: 1rem;
}
.form-field .error,
.form-field.error {
    color: #b3261e;
    font-size: 0.9rem;
}
.form-honeypot { position: absolute; left: -9999px; }
.form-success {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.form-field--checkbox label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; }
.form-field--checkbox input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }

fieldset.form-field { border: none; padding: 0; margin: 0 0 1.1rem; }
fieldset.form-field legend { font-weight: 600; padding: 0; margin-bottom: 0.35rem; }
.form-field__option { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; margin-bottom: 0.4rem; cursor: pointer; }

/* Booking (reservation) form */
.booking-form-page, .booking-form { max-width: 640px; }
.booking-form__errors {
    background: #fdecea;
    border: 1px solid #b3261e;
    border-radius: var(--radius-md);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    color: #b3261e;
}
.booking-form__errors p { margin: 0.2rem 0; }
.booking-form__full {
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    color: var(--color-text-muted);
}
.booking-form-inline {
    max-width: 640px;
    margin-top: 1.5rem;
    background: #f1f7f7;
    padding: 2rem;
    border-radius: 1rem;
}

/* Footer */
.site-footer {
    background: var(--color-primary);
    margin-top: 4.5rem;
    padding: 2.5rem 1.5rem 0;
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding-bottom: 1.75rem;
}
.site-footer__brand { display: flex; align-items: center; gap: 0.75rem; }
.site-footer__brand img { height: 34px; }
.site-footer p, .site-footer span { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; margin: 0; }
.site-footer a { color: var(--color-accent); }

/* Admin-picked list (Configuration > Liens du pied de page) — a plain flex-wrap row rather than
   a fixed count of columns, so it keeps reading cleanly whether one page is picked or a dozen:
   short lists sit on one line, long ones wrap without ever overflowing or squeezing the brand
   block on the other side of .site-footer__inner. */
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__links a { font-weight: 500; font-size: 0.8rem; }
.site-footer__bottom {
    /* padding-top/bottom only — a shorthand `padding` here would overwrite (not merge with)
       .container's own left/right padding, since both rules carry equal specificity and this
       one is declared later: the exact bug that misaligned the copyright line 24px left of the
       brand/links row above it during review. */
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.site-footer__bottom span { font-size: 0.8rem; }

/* Cookie consent notice (public/assets/js/cookie-consent.js) — shown once until a choice is
   made, reopenable any time via the "Gérer les cookies" footer link above. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: #fff;
    box-shadow: 0 -10px 30px rgba(23, 130, 137, 0.16);
}
.cookie-banner__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}
.cookie-banner__inner p { flex: 1 1 420px; margin: 0; font-size: 0.9rem; color: var(--color-text); }
.cookie-banner__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; flex-shrink: 0; }
.cookie-banner__actions .btn { padding: 0.6rem 1.4rem; font-size: 0.9rem; }

@media (max-width: 900px) {
    .home-hero, .mission, .quality, .activity-grid,
    .cms-section--home-hero .cms-section__inner,
    .cms-activity-grid,
    .cms-section--mission .cms-group--layout-columns[data-cms-columns],
    .cms-section--quality .cms-group--layout-columns[data-cms-columns] { grid-template-columns: 1fr; }
    .home-hero__media, .cms-group--hero-media { order: -1; }
}

/* Nav gets its own breakpoint, well above the 900px content one: at 900-1120px the desktop nav
   (~726px wide) no longer fits next to the 300px logo and wraps onto its own row instead of
   collapsing into the burger menu — this is measured against the actual nav width, not guessed. */
@media (max-width: 1180px) {
    .site-header__inner { justify-content: flex-start; }

    .menu-toggle { display: flex; order: -1; margin-left: 0; }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-primary-dark);
        padding: 0.5rem 1.5rem 1.5rem;
    }

    .main-nav.is-open { display: flex; }

    .main-nav a {
        padding: 0.85rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* The CTA pill keeps its own horizontal padding — the generic rule above would otherwise
       squash it down to a near-circle (padding: 0.85rem 0 zeroes out its left/right space). */
    .main-nav a.nav-cta { padding: 0.6rem 1.3rem; }

    .nav-item-dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
        flex-direction: row;
        width: 100%;
    }

    .nav-item-dropdown > a { flex: 1; }

    /* The arrow inside the link is purely decorative on desktop (hover opens the dropdown) — on
       mobile the real, tappable control is .dropdown-toggle below, so this would just be a
       confusing second, non-functional chevron next to it. */
    .dropdown-toggle-arrow { display: none; }

    /* Now the actual visible/tappable control (overrides the desktop hidden state above): a
       real touch target separate from the link, which always navigates on tap and never opens
       the submenu by itself. */
    .dropdown-toggle {
        position: static;
        width: 44px;
        height: 44px;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #fff;
        cursor: pointer;
    }

    .dropdown-toggle__icon { font-size: 0.9rem; transition: transform .15s; }
    .nav-item-dropdown.is-open .dropdown-toggle__icon { transform: rotate(180deg); }

    .dropdown-menu {
        position: static;
        display: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0.5rem 1rem;
        margin: 0;
        min-width: 0;
        width: 100%;
    }

    .nav-item-dropdown:hover .dropdown-menu,
    .nav-item-dropdown:focus-within .dropdown-menu {
        display: none;
    }

    .nav-item-dropdown.is-open .dropdown-menu { display: block; }

    .dropdown-menu li a {
        color: #fff;
        padding: 0.75rem 0;
        border-bottom: none;
    }
    .dropdown-menu li a:hover { background: none; color: var(--color-accent); }

    .nav-cta { align-self: flex-start; margin-top: 0.75rem; }
}

@media (max-width: 640px) {
    .logo img { width: 220px; }
    .hero { padding: 2rem 1.25rem; }
}

/* CMS block structure (added by cms-core integration, Task 18) */
/* Sections briefly carried their own horizontal containment here (max-width/margin/padding on
   .cms-section__inner, independent of the page) so a section's background could bleed edge to
   edge if a variant wanted that — no variant ever actually did except the 3 that already have
   a border-radius'd card look of their own (hero/card/quality, which set their own padding
   earlier in this file), so that flexibility bought nothing and cost every OTHER top-level block (the page's
   own <h1>, a bare image/text promoted out of a "Cadre") a second, separately-maintained
   containment rule to stay visually aligned with it. All of that now lives in one place —
   .container, wrapped around the whole page in cms-page.php — and .cms-section__inner is back to
   being a plain flow/grid wrapper with no width or padding of its own. Rules that still target it
   for a specific variant (the home-hero grid, quality's z-index) are unaffected by this and
   remain below. */

.cms-group--layout-stack { display: flex; flex-direction: column; }
/* Same fix as the align-start/-center/-end block below for columns/grid, same reason: without
   it a stack group defaults to align-items:stretch, so an inline-block child (a chip/badge, a
   button) gets stretched to the group's full width instead of shrink-wrapping its own content. */
.cms-group--layout-stack.cms-group--align-start { align-items: flex-start; }
.cms-group--layout-stack.cms-group--align-center { align-items: center; }
.cms-group--layout-stack.cms-group--align-end { align-items: flex-end; }
.cms-group--layout-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
.cms-group--layout-row.cms-group--align-center { justify-content: center; }
.cms-group--layout-row.cms-group--align-end { justify-content: flex-end; }
.cms-group--layout-row.cms-group--align-space-between { justify-content: space-between; align-items: center; }
.cms-group--layout-columns,
.cms-group--layout-grid { display: grid; gap: 1.5rem; }
/* Without this, a grid cell defaults to align-items:stretch — a short item (e.g. a button)
   sharing a row with a taller one (e.g. an image) gets its own box stretched to match, and a
   pill-shaped button stretched tall turns into a huge oval with its label stuck at the top
   instead of centered. "start" mirrors group.php's own default so most groups get the fix
   without having to touch the Align field at all. */
.cms-group--layout-columns.cms-group--align-start,
.cms-group--layout-grid.cms-group--align-start { align-items: start; }
.cms-group--layout-columns.cms-group--align-center,
.cms-group--layout-grid.cms-group--align-center { align-items: center; }
.cms-group--layout-columns.cms-group--align-end,
.cms-group--layout-grid.cms-group--align-end { align-items: end; }
.cms-group--layout-columns[data-cms-columns="2"],
.cms-group--layout-grid[data-cms-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.cms-group--layout-columns[data-cms-columns="3"],
.cms-group--layout-grid[data-cms-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.cms-group--layout-columns[data-cms-columns="4"],
.cms-group--layout-grid[data-cms-columns="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
    .cms-group--layout-columns[data-cms-columns],
    .cms-group--layout-grid[data-cms-columns] { grid-template-columns: 1fr; }
}

.cms-button--primary { display: inline-block; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 0.9rem; line-height: 1; border: none; border-radius: 999px; padding: 0.75rem 1.75rem; text-decoration: none; cursor: pointer; }
.cms-button--primary:hover {
    color: #fff;
    background: #22979f;
}
.cms-button--secondary { display: inline-block; background: transparent; color: var(--color-primary-dark); font-weight: 700; border: 2px solid var(--color-primary); border-radius: 999px; padding: 0.7rem 1.7rem; text-decoration: none; cursor: pointer; }
.cms-button--secondary:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.cms-button-align--center { text-align: center; }
.cms-button-align--right { text-align: right; }

.cms-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.cms-galerie__item img { width: 100%; border-radius: var(--radius-md); }
.cms-galerie[data-cms-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.cms-galerie[data-cms-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.cms-galerie[data-cms-columns="4"] { grid-template-columns: repeat(4, 1fr); }
/* "structurée" fit: every thumbnail forced into the same fixed-shape box (cropped, not
   letterboxed) instead of each keeping its own natural aspect ratio — ratio only matters here,
   since "auto" fit has no box for it to apply to. */
.cms-galerie[data-cms-fit="structuree"] .cms-galerie__item { aspect-ratio: 4 / 3; overflow: hidden; }
.cms-galerie[data-cms-fit="structuree"][data-cms-ratio="carre"] .cms-galerie__item { aspect-ratio: 1; }
.cms-galerie[data-cms-fit="structuree"] .cms-galerie__item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
    .cms-galerie[data-cms-columns="3"],
    .cms-galerie[data-cms-columns="4"] { grid-template-columns: repeat(2, 1fr); }
}

.cms-video-facade { position: relative; display: block; width: 100%; border: none; padding: 0; cursor: pointer; background: none; }
.cms-video-facade img { width: 100%; border-radius: var(--radius-md); }
.cms-video-facade__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.cms-video-iframe { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: var(--radius-md); }
.cms-video-facade--no-thumbnail { aspect-ratio: 16 / 9; background: var(--color-primary-dark); border-radius: var(--radius-md); }
.cms-video { width: 100%; border-radius: var(--radius-md); }

.cms-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.cms-table td { padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); }

/* Zero-specificity on purpose (same :where() technique used elsewhere in this file): a plain
   .cms-list (no variant) should get this base look, but must always lose to any
   .cms-list--{variant} modifier rule regardless of which appears later in the file — the exact
   trap that other margin/padding shorthand collisions in this file caused before. list-style is
   split off by tag so an <ol class="cms-list"> (numbered) doesn't inherit the <ul> bullet. */
:where(.cms-list) { padding-left: 1.2rem; margin: 0 0 1.5rem; color: var(--color-text); }
:where(ul.cms-list) { list-style: disc; }
:where(ol.cms-list) { list-style: decimal; }

.cms-image-texte { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.cms-image-texte--image-right { flex-direction: row-reverse; }
.cms-image-texte__image { max-width: 320px; border-radius: var(--radius-md); flex: 1 1 280px; }
.cms-image-texte__text { flex: 1 1 320px; }

.cms-separateur { border: none; border-top: 1px solid var(--color-border); }
.cms-separateur--epais { border-top-width: 3px; }

.cms-image { margin: 0; }
.cms-image img { display: block; max-width: 100%; border-radius: 1rem; }
.cms-image--compact img { max-width: 320px; }
.cms-image--showcase img { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* Homepage "chip" badge — .home-hero__badge and .quality__eyebrow are two separate,
   pre-existing static rules (never sharing a selector with each other, different background
   colors). cms-richtext--chip is the single generic abstraction for both; kept standalone
   rather than merged into either static rule so neither original is touched. */
.cms-richtext--chip {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary-dark);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.cms-section--home-hero .cms-richtext--chip { background: var(--color-primary-light); margin-bottom: 1.25rem; }
.cms-section--quality .cms-richtext--chip { background: var(--color-accent); }

/* Shown only when a logged-in admin previews an inactive page at its own slug (see
   App\Content\PublicPageRenderer) — a visiting public user never sees this, since
   CmsPageController::renderPage() itself still refuses to render an inactive page at all. */
.page-inactive-banner {
    margin: 0;
    padding: 0.65rem 1.5rem;
    background: #fff3cd;
    color: #664d03;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}