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

body {
    margin: 0;
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    overflow-x: hidden;
}

.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), so it lands as a direct child of
   <main class="site-main"> with nothing of its own to contain it — same values as .container
   above, targeted at the DOM shape instead of an actual wrapper div, so section blocks
   elsewhere in the tree keep managing their own full-bleed-capable width unaffected. */
.site-main > h1 {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0;
}

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

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

.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 */
.activities { margin-top: 4rem; }
.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; }
.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; }

/* These three are bespoke, decorated components (gradient/card background, border-radius,
   box-shadow) — unlike a generic section, going full-width edge-to-edge was never the intent
   for them; they're meant to read as a contained card/banner, same as before section width
   became per-section instead of page-wide. Static usage already sits inside the restored
   .container (see layout.php); this is the CMS-rendered path's equivalent, since a section's
   own containment now lives on .cms-section__inner, not on the page. */
.cms-section--hero, .cms-section--card, .cms-section--quality {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* Quality + schools */
.quality, .cms-section--quality {
    background: var(--color-primary-dark);
    border-radius: var(--radius-lg);
    padding: 3rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 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. */
.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;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.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. */
.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;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.formule-card h3, .cms-section--card h3 {
    color: var(--color-primary-dark);
    margin-top: 0;
}

.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: inline-block;
    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-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;
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.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); }

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

    .menu-toggle { display: flex; }

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

    .nav-item-dropdown {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

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

    .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.5rem 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 used to all live inside one page-level .container (removed from layout.php) — a
   section's own width setting (removed from the block entirely; every section behaves the
   same way now) could never actually go wider or narrower than that shared ancestor. Each
   section now carries its own containment on .cms-section__inner instead, matching the
   site-wide .container's own values: the outer <section> itself is always full-width (so a
   section's background can bleed edge to edge if a variant wants that), and .cms-section__inner
   centers just the content to the same reading width used everywhere else on the site.
   margin-left/right only (never the `margin` shorthand) — this rule's job is horizontal
   centering, not vertical rhythm. Using the shorthand here would silently wipe out whatever
   margin-top a variant/settings rule declares elsewhere, purely depending on which rule
   happens to appear later in this file — see .cms-section--hero, --quality, --contact-mini,
   and the `margin` settings field (section.php) for the rules that actually own margin-top. */
.cms-section__inner { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.cms-group--layout-stack { display: flex; flex-direction: column; }
.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; }
.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); }