/* ── CMS pages: consistent layout + clean typography ─────────────────────────
   Done once and for all (loaded last; no SCSS rebuild needed).

   LAYOUT, by page type — detected structurally from the content (no per-id list,
   stable on every environment):
     • TEXT pages (legal: mentions, CGV, CGU, privacy — plain prose) → a centered
       reading column: breadcrumb + title + content move together, centered on the
       page, with a comfortable measure.
     • RICH pages (a-propos, médias, intervention, livraison — their content
       carries a class / image / iframe / table) → the full site-container width,
       edge-aligned with the header and footer; their components stay untouched.

   TYPOGRAPHY (text pages only): Inter body / Poppins headings, neutral near-black,
   real bullets, sober headings, quiet links — coherent with the rest of the site. */


/* ---- LAYOUT ---------------------------------------------------------------- */

/* TEXT/legal pages ONLY → a centered reading column (~760px ≈ 70 chars/line at
   18px Inter; the readability sweet spot, WCAG ≤ 80). The match requires a
   #content.page-cms that carries NO class / image / iframe / table descendant —
   i.e. plain prose. Rich CMS pages (and any other .cms-col) are NOT matched and
   keep their existing legacy layout, untouched. Two separate :has() — one
   positive, one inside :not() — so neither is nested in the other (valid). */
.container .cms-col:has(#content.page-cms):not(:has(#content [class], #content img, #content iframe, #content table)) {
    max-width: 760px;
    margin-inline: auto;
}

/* RICH CMS pages (content carries a class / image / iframe / table — a-propos,
   médias, intervention, livraison…) → the FULL site-container width, left edge
   aligned with the header and footer. Single :has() — valid. (Mutually exclusive
   with the text rule above: a page can't be both plain prose and rich.) */
.container .cms-col:has(#content [class], #content img, #content iframe, #content table) {
    max-width: none;
    margin-inline: 0;
}

/* On those full-width pages, the text blocks must fill the width too (explicit
   choice) — lift the reading-width caps so no paragraph sits in a narrow column
   with empty space beside it. Only the TEXT caps are lifted; the card / image /
   lightbox max-widths (.cms-stats li, .cms-portrait…) stay as layout sizing. */
.container .cms-col:has(#content [class], #content img, #content iframe, #content table) #content :is(.cms-lead, .cms-final p, .cms-section > p) {
    max-width: none;
}


/* ---- VERTICAL RHYTHM (rich CMS pages) ------------------------------------- */
/* Robust, type-agnostic flow: every block inside a CMS section is separated from
   the previous one by ONE consistent gap — paragraph, chips, video, button,
   badge, card grid alike — so no block can end up glued to its neighbour, on any
   page, current or future. It replaces the per-component ad-hoc margins (which
   were 22px / 20px / 16px / 0 / none depending on the block). Adjacent margins
   collapse, so a block with a larger own margin keeps it, and the section-to-
   section gap (.cms-section margin, 44px) stays the larger rhythm. Loaded last,
   so it wins over the legacy per-block margins in cms-pages.css. */
#content .cms-section > * + *,
#content .cms-final > * + * {
    margin-top: 24px;
}

/* …but a heading stays tight to the text it introduces (higher specificity via
   :is() → wins over the rule above for the element right after a heading). */
#content .cms-section > :is(h2, h3, h4) + *,
#content .cms-final > :is(h2, h3, h4) + * {
    margin-top: 8px;
}


/* ---- TYPOGRAPHY (text pages only) ----------------------------------------- */

#content.page-cms:not(:has([class], img, iframe, table)) {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-dark);
    text-align: left;
}

#content.page-cms:not(:has([class], img, iframe, table)) > :first-child {
    margin-top: 0;
}

/* Body text — neutral near-black (overrides the legacy `p { color:#0c193a }`). */
#content.page-cms:not(:has([class], img, iframe, table)) p {
    font-size: inherit;
    color: var(--text-dark);
    margin: 0 0 1em;
}

/* Lists — restore the bullets the legacy reset removed. */
#content.page-cms:not(:has([class], img, iframe, table)) ul {
    list-style: disc;
}
#content.page-cms:not(:has([class], img, iframe, table)) ol {
    list-style: decimal;
}
#content.page-cms:not(:has([class], img, iframe, table)) ul,
#content.page-cms:not(:has([class], img, iframe, table)) ol {
    margin: 0 0 1em;
    padding-left: 1.5em;
}
#content.page-cms:not(:has([class], img, iframe, table)) li {
    font-size: inherit;
    color: var(--text-dark);
    margin: 0.4em 0;
}
#content.page-cms:not(:has([class], img, iframe, table)) li::marker {
    color: var(--text-dark);
}

#content.page-cms:not(:has([class], img, iframe, table)) strong {
    font-weight: 600;
}
#content.page-cms:not(:has([class], img, iframe, table)) em {
    font-style: italic;
}

/* Headings — Poppins, sober: hierarchy by size + spacing, one colour, no borders,
   no uppercase (the legacy h2 had a border-bottom + a second colour). */
#content.page-cms:not(:has([class], img, iframe, table)) :is(h2, h3, h4) {
    font-family: var(--font-heading);
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.3;
    border: 0;
    padding: 0;
    text-transform: none;
}
#content.page-cms:not(:has([class], img, iframe, table)) h2 {
    font-size: 1.5rem;
    margin: 1.8em 0 0.5em;
}
#content.page-cms:not(:has([class], img, iframe, table)) h3 {
    font-size: 1.25rem;
    margin: 1.5em 0 0.4em;
}
#content.page-cms:not(:has([class], img, iframe, table)) h4 {
    font-size: 1.05rem;
    margin: 1.3em 0 0.3em;
}

/* Links — simple underline in the brand colour. The trailing !important beats the
   legacy global `a:hover { color:#ec7330 !important }`. */
#content.page-cms:not(:has([class], img, iframe, table)) a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#content.page-cms:not(:has([class], img, iframe, table)) a:hover {
    color: var(--orange) !important;
    text-decoration: underline;
}

/* The text is structured by its headings; the <hr> rules are redundant noise, so
   they are hidden (kept in the source, simply not rendered). */
#content.page-cms:not(:has([class], img, iframe, table)) hr {
    display: none;
}


/* ---- MOBILE ---------------------------------------------------------------- */
/* Tighten the page title ↔ body gap on small screens (tester feedback). */
@media (max-width: 600px) {
    .cms-page-header h1 {
        margin-bottom: 0.25em;
    }
}