/**
 * WordPress-only additions — layered on top of base.css (itself a
 * byte-for-byte `cp` of the mockup, never hand-edited). See
 * kiweb-fse-base's README, "Règle importante".
 */

/* Mirrors the cookies page's own inline `style="margin-top:var(--space-6);"`
   on the preferences form's submit button — expressed as a class here
   since a Gutenberg block's save() output cannot carry a literal inline
   `style` attribute without risking a byte-level validation mismatch
   with what the editor's own re-render would produce. */
.cookie-form-submit {
  margin-top: var(--space-6);
}

/**
 * Editor-canvas parity for `section.profile`'s decor-tl/tr system
 * (conseillere-rh.php — coaxiarh/profile-article, coaxiarh/decor-section).
 *
 * base.css's `section.profile { & article { & > section {…} } }` (and its
 * decor circle / content-offset rules) is a plain, unscoped rule — unlike
 * the service pages' `@scope (.page-service)` system, it needs no PHP-side
 * `@scope` mirroring to activate in the canvas (it has no body-class gate
 * to begin with). But its `>` child combinators still break there for the
 * exact same reason as the (now-fixed) service-page system: WordPress's
 * `InnerBlocks` wraps a block's real children in two `display:contents`
 * `<div>`s, editor-canvas only — `display:contents` never changes the
 * underlying DOM parent-child relationship a `>` combinator tests. See
 * kiweb-fse-base's `kiweb_theme_extract_scope_css()` doc comment for the
 * full diagnosis (found via direct DevTools inspection, not by reading
 * code) and `KIWEB_THEME_INNERBLOCKS_WRAPPER_CHAIN` for the equivalent
 * PHP-side fix used there. Selectors below use the exact same wrapper
 * chain — chained by `>` at every hop, never a bare descendant space
 * (that also matched a deeper block's OWN, identically-classed wrapper
 * divs — e.g. a decor-section's own children — a real regression hit
 * once already on the service pages).
 *
 * Inert on the front-end: `.block-editor-inner-blocks`/
 * `.block-editor-block-list__layout` never exist in `save()`'s output.
 */
.profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section {
  position: relative;
  margin-top: 70px;

  &:first-child {
    margin-top: 0;
  }

  & > .block-editor-inner-blocks > .block-editor-block-list__layout > * {
    position: relative;
    z-index: 1;
  }
}

.profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tr h2 {
  text-align: right;
}

.profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tl::after,
.profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tr::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -50px;
  border-radius: 50%;
  width: 220px;
  height: 220px;
}

/* Standalone @media, selector repeated — NOT nested inside the ::after
   rule above. Confirmed by isolated testing (this exact pattern, plain
   HTML, no other CSS involved) that a nested `@media { & {…} }` inside a
   rule whose selector ends in `::after`/`::before` does not reliably
   override the base size in this rendering engine — the mockup's own
   base.css independently discovered and documents the same limitation
   for its own decor-* circles (@scope (.page-service), "nester le @media
   à l'intérieur du bloc ::after lui-même ne surchargeait pas fiablement
   la taille de base"). This file follows the identical, proven-safe
   pattern. */
@media (min-width: 640px) {
  .profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tl::after,
  .profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tr::after {
    width: 300px;
    height: 300px;
  }
}

.profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tl::after {
  left: -90px;
  background: var(--color-brand);
}

.profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tr::after {
  right: -90px;
  background: var(--color-brand);
}

@media (min-width: 768px) {
  .profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tl > .block-editor-inner-blocks > .block-editor-block-list__layout > :not(h2) {
    max-width: calc(100% - 195px);
    margin-left: auto;
    margin-right: 0;
  }

  .profile article > .block-editor-inner-blocks > .block-editor-block-list__layout > section.decor-tr > .block-editor-inner-blocks > .block-editor-block-list__layout > :not(h2) {
    max-width: calc(100% - 195px);
    margin-left: 0;
    margin-right: auto;
  }
}

/**
 * Blog listing page — responsive H1 sizing.
 *
 * The mockup's `section.blog & header & h1` only sets a color
 * (`--color-brand`, brought by the `cp`) — this responsive font-size scale
 * (relative `em`, not a `--text-*` token) is WordPress-only: the blog
 * listing page's H1 comes from the post title (dynamic length), which the
 * mockup's fixed demo copy never needed to handle.
 */
section.blog & header & h1 {
  font-size: 1em;
}

@media (min-width: 640px) {
  section.blog & header & h1 {
    font-size: 2em;
  }
}

/**
 * Contact form — success/error feedback (real submission states).
 *
 * The mockup's contact form is a static demo with no submission handling;
 * this block (icon + title/message column, shown/hidden via [hidden]) is
 * the real feedback UI wired to the actual form. Colors remapped onto the
 * new palette: `--color-brand-tint`/`--color-brand-deep` (removed tokens)
 * → `--color-brand-soft`/`--color-brand` for `.form-success`; `.form-error`
 * already used raw hex, untouched by the token cleanup.
 */
.form-success,
.form-error {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;

  &:not([hidden]) {
    display: flex;
  }

  & svg {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    flex-shrink: 0;
  }

  & .form-feedback-body {
    flex: 1;
    min-width: 0;

    & strong {
      display: block;
    }

    & .form-feedback-message {
      margin: 4px 0 0;

      &:empty {
        display: none;
      }
    }
  }
}

.form-success {
  background: var(--color-brand-soft);
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
}

.form-error {
  background: #fff5f5;
  border: 1px solid #e53e3e;
  color: #c53030;
}

/**
 * `ol.timeline` icon sizing — WordPress-only.
 *
 * `ol.timeline .icon`/`ol.timeline li .icon` (font-size 20px / 17px at
 * 1024px+) has no mockup equivalent: the mockup's timeline icons are
 * sized via `& svg { width; height }` directly (a real `<svg>`), while
 * `.icon` here also renders a plain-text fallback (see `timeline.css`'s
 * own comment) that needs an explicit font-size.
 */
ol.timeline .icon {
  font-size: 20px;
}

@media (min-width: 1024px) {
  ol.timeline li .icon {
    font-size: 17px;
  }
}

/**
 * Red gradient tokens — kept for `timeline.css`'s `section.pains` severity
 * gradient only.
 *
 * The mockup permanently removed these 4 tokens from its own `:root`
 * (confirmed absent as of this port) — `timeline.css` (byte-for-byte `cp`
 * from the mockup) still references them for its 4-tone red gradient,
 * with no replacement ever introduced upstream. Re-declaring them here
 * (rather than reverting the `cp`) keeps `timeline.css` a true `cp` while
 * preventing 4 undefined custom properties from silently breaking that
 * gradient. Values unchanged from the last time this project used them.
 */
:root {
  --color-red: #F9DAD0;
  --color-red-deep: #BE4C27;
  --color-red-soft: #F9E7E2;
  --color-red-tint: #FDF6F4;
}

/**
 * `.btn-primary`/`.btn-primary--bg` — kept for the shared parent theme
 * `kiweb-fse-base`, which still renders these exact classes at 5+
 * confirmed call sites (`functions.php` shortcodes/CTA helpers,
 * `template-parts/block/availability.php`) with no equivalent in the
 * mockup (which dropped `.btn-primary` entirely in its own color
 * consolidation). Remapped onto the new palette exactly like `.btn-black`
 * (no hover color change — transform/shadow only, consistent with
 * `.btn-brand`/`.btn-black`).
 */
.btn-primary {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-primary--bg {
  background-color: var(--color-black);
}

/**
 * Cookie banner buttons — real classes rendered by the parent theme's
 * `template-parts/layout/footer/cookie.php` (`.btn-primary`/`.btn-secondary`,
 * not the mockup's `.btn-brand`/`.btn-outline`). Previously lived inline in
 * `base.css` (`coaxiarh-fse @ 1.0.36`) — moved here as part of restoring
 * `base.css` to a byte-for-byte `cp`. The `:hover` color change from
 * 1.0.36 (`background-color: var(--color-brand-deep)`) is intentionally
 * dropped: `--color-brand-deep` no longer exists, and the new design
 * language's buttons (`.btn-brand`/`.btn-black`) no longer change color on
 * hover (transform + shadow only) — this button now follows the same rule.
 */
.cookie-banner nav .btn.btn-primary {
  background-color: var(--color-brand);
}

.cookie-banner nav .btn.btn-secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.4);

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    color: var(--color-white);
  }
}

/**
 * Appointment widget — WordPress-only real booking flow.
 *
 * The mockup's `appointment.css` is a static visual demo of the widget
 * (one card, no interactivity); this theme integrates the real
 * `kiweb-appointment` plugin, which needs a full multi-step booking flow
 * (day-browse navigation, a step-2 contact form with validation, a step-3
 * confirmation/error state) that has no mockup equivalent at all. Moved
 * here verbatim ahead of the `cp`, colors remapped onto the new palette
 * (`--color-border`/`--color-text-mute` → `--color-gray-soft`,
 * `--color-text` → `--color-black`, `--color-text-soft` → `--color-gray`,
 * `--color-secondary` → `--color-white`, `--color-brand-deep` →
 * `--color-brand`, `--color-brand-tint` → `--color-brand-soft`; the old
 * brand-tinted `rgba(93, 191, 170, …)` focus rings become
 * `color-mix(in srgb, var(--color-brand) …%, transparent)`, self-updating
 * if the brand color changes again). Raw hex error colors (`#e53e3e` and
 * friends) are pre-existing, untouched by the token cleanup.
 */

/* Re-assert `.opening-hours-day` sizing/color: this element is an <h1>
   (`block/availability.php`), and the hero's generic `& h1` rule
   (`section.hero h1`, specificity 0,1,2) otherwise wins over `h1.label`
   (0,1,1), rendering it at hero-title size/color instead. */
.appointment header .opening-hours-day {
  font-size: var(--text-xs);
  color: var(--color-brand);
}

/* .meta is the last visible child of .subfooter/.body (flex box) — no
   margin-bottom here, unlike the mockup's static single-block layout
   where .meta directly preceded the CTA button in the same block; the
   real CTA lives in its own <footer>, outside .body. */
.appointment .meta {
  margin-bottom: 0;
}

/* .btn.btn-primary.btn-block (4 classes, specificity 0,4,0) rather than
   plain .btn-block (0,2,0 once nested under .appointment) — base.css's
   hero rule "section.hero .container .btn" compiles to 0,3,1 (3 classes +
   the `section` type selector) and otherwise wins, including its own
   @media (min-width: 640px) override back to width:auto, silently
   shrinking this widget's CTA on tablet/desktop despite this rule
   appearing later in the cascade (specificity always outranks source
   order). The widget's card is capped at max-width:420px regardless of
   viewport, so its CTA should stay full-width at every breakpoint. */
.appointment .btn.btn-primary.btn-block {
  width: 100%;
  justify-content: center;
}

/* Outer CTA footer — direct child of .appointment, sibling of .body
   (persists across the 3 booking steps). Padding matches .body's own
   (22px) so the CTA button aligns with the rest of the card's content. */
.appointment > footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 22px 22px 22px;
}

/* Étape 2 — formulaire de coordonnées (name/email/phone) */
.appointment .subfooter input:not([type="hidden"]) {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-gray-soft);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-black);
  transition: border-color .2s var(--ease-refined), box-shadow .2s var(--ease-refined);

  &::placeholder {
    color: var(--color-gray-soft);
  }

  &:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 15%, transparent);
  }

  &.error {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
  }
}

.appointment .subfooter .booking-form-error {
  font-size: var(--text-xs);
  color: #c53030;
  background: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-2);
}

.appointment .subfooter button[type="submit"] {
  width: 100%;
  justify-content: center;
}

/* Étape 3 — confirmation (`appointment.js` ne construit jamais que la variante
   succès : en cas d'erreur, l'utilisateur reste à l'étape 2, via
   `.booking-form-error`, ci-dessus). */
.appointment [data-step="3"] .booking-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 22px;
  text-align: center;
  border-radius: var(--radius-md);

  & .booking-feedback-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    flex-shrink: 0;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  & h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
    color: var(--color-black);
  }

  & p {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 0;
    color: var(--color-gray);
  }

  &.booking-feedback--success {
    background: var(--color-brand-soft);
    border: 1px solid var(--color-brand-soft);

    & .booking-feedback-icon {
      background: var(--color-brand-soft);
      color: var(--color-brand);
    }
  }
}

/* [data-step="1"] — flex column + gap: only source of spacing between
   .mini-cal and .subfooter (collaborator card, itself optional per the
   plugin's calendar_show_person option). Neither carries its own margin —
   spacing stays identical whether .subfooter renders or not. */
[data-step="1"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mini-slots-empty {
  grid-column: 1 / -1;
  padding: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--color-gray-soft);
  border: 1px dashed var(--color-gray-soft);
  border-radius: 8px;
}

/* ── Navigation arrows — shared by scroll + open modes ─────────────────── */
.mini-cal-arrow,
.mini-cal-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-gray-soft);
  background: var(--color-white);
  color: var(--color-brand);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s var(--ease-refined), border-color .2s var(--ease-refined), color .2s var(--ease-refined);

  & svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  &:hover {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-white);
  }
}

/* ── Scroll mode ──────────────────────────────────────────────────────── */
.mini-cal-scroll {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Pas de margin-bottom : .mini-cal-scroll est un enfant direct de
     .mini-cal comme .mini-cal-grid/.mini-cal-open — même `gap` de parent,
     même règle pour les trois modes de day_browse. */

  & .mini-cal-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    flex: 1;
    min-width: 0;
    gap: 8px;

    &::-webkit-scrollbar {
      display: none;
    }

    & span[id] {
      flex: 0 0 0;
      width: 0;
      overflow: hidden;
    }

    & .mini-day {
      scroll-snap-align: start;
      flex: 0 0 calc((100% - 3 * 8px) / 4);
    }
  }
}

/* ── Open/collapse mode ───────────────────────────────────────────────── */
.mini-cal-open {
  /* flex column + gap, comme .mini-cal lui-même : l'espacement entre la
     grille de dates et le bouton déplier/replier vient uniquement de ce
     `gap`, pas d'une marge sur l'un ou l'autre — cohérent avec les autres
     modes de day_browse (aucun n'utilise de margin-bottom). */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);

  & .mini-days-toggle {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  & .mini-cal-grid {
    /* Doit couvrir la hauteur réelle d'une ligne de .mini-day (padding 7px×2
       + bordures 1px×2 + span 9px/1.2 + marge 1px + b 13px/1.2 ≈ 43.4px) avec
       une petite marge de sécurité — sinon la 1ère ligne de dates est
       tronquée quand le bloc est replié. Revoir cette valeur si les tailles
       de police ou le padding de .mini-day changent. */
    max-height: var(--mini-day-row-h, 3rem);
    overflow: hidden;
    transition: max-height 0.35s ease;
    width: 100%;
  }

  & .mini-days-toggle:checked ~ .mini-cal-grid {
    max-height: 25rem;
  }

  & .mini-days-toggle:checked ~ .mini-cal-expand-btn svg {
    transform: rotate(180deg);
  }
}

.mini-cal-expand-btn {
  margin: 0;

  & svg {
    transition: transform 0.3s ease;
  }
}

/* ── Étape 2 — récapitulatif du créneau sélectionné ─────────────────────── */
/* :not([hidden]) — sans ce garde-fou, cette règle (spécificité 0,1,0, comme
   [hidden]) l'emporte sur le display:none natif de [hidden] par ordre
   d'apparition dans la cascade : l'élément reste un participant flex (donc
   inclus dans le gap de son parent .body) même masqué, ajoutant un espace
   vide entre .subfooter et le <footer> du CTA. */
[data-step="2"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  & .booking-back {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-brand);
    transition: opacity .2s var(--ease-refined);

    & svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }

    &:hover {
      opacity: 0.75;
    }
  }

  & .booking-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 14px;
    background: var(--color-white);
    border-radius: 12px;

    & .booking-item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);

      & .booking-label {
        flex-shrink: 0;
        min-width: 3rem;
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-gray-soft);
        padding-top: 0.15em;
      }

      & .booking-value {
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-black);
        line-height: 1.5;

        &.booking-time {
          color: var(--color-brand);
          font-weight: 600;
        }

        &.booking-person {
          display: flex;
          align-items: center;
          gap: var(--space-2);

          & .avatar {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            flex-shrink: 0;
            overflow: hidden;

            & img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          & .name {
            font-size: var(--text-sm);
            font-weight: 600;
            color: var(--color-black);
          }

          & .role {
            font-size: 0.75rem;
            color: var(--color-gray-soft);
            line-height: 1.4;
          }
        }
      }
    }
  }
}

/**
 * `.btn--pdf` — decorative PDF icon prefix on a `coaxiarh/button` instance
 * (Formation page: certificat Qualiopi, politique handicap). Mirrors the
 * mockup's inline `<?php component('icon/pdf'); ?>` (icon/pdf.php) before
 * the button label — kept 100% CSS `::before` (never an editable RichText
 * character or a child block) since `coaxiarh/button`'s label is plain
 * RichText with no icon-prefix attribute of its own: applied per-instance
 * via the block's native "Classe(s) CSS supplémentaire(s)" field, same
 * mechanism already used for `.badge`/`.badges` elsewhere in this theme.
 * Stroke color baked into the data-URI (a `background-image` cannot read
 * `currentColor`) — must match whichever `.btn-*` variant the instance
 * also carries, never a single fixed color: white for `.btn-brand`
 * (fond plein, texte blanc — « Voir le certificat », certification
 * Qualiopi) ; `--color-brand` pour `.btn-white` (fond blanc, texte
 * `--color-brand` — « Politique handicap », depuis le port de
 * `coaxia @ 0.10.18`, qui a fait passer ce bouton précis de `.btn-brand`
 * à `.btn-white` sans que ce fichier ne soit mis à jour en même temps —
 * l'icône restait blanche sur un fond désormais blanc, quasi invisible).
 */
.btn.btn-brand.btn--pdf::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.6'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.btn.btn-white.btn--pdf::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359BB9D' stroke-width='1.6'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='13' x2='15' y2='13'/%3E%3Cline x1='9' y1='17' x2='15' y2='17'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/**
 * Sélecteurs supprimés de `base.css` (maquette « coaxia » 0.7.0, sélecteurs
 * morts — update.md 8.2) mais encore rendus par ce thème : reportés ici, JAMAIS
 * dans la copie de `base.css`. Les autres sélecteurs supprimés (menu déroulant,
 * `.doc-link`, `.article-callout`, `.split-block`…) n'apparaissent dans
 * aucune page publiée du site.
 */

/* Section « Trois exemples d'interventions de collectif » de la page d'accueil
   (`section.cases`) : en-tête aligné à gauche, pleine largeur du conteneur
   (annule le `header` centré à 760px de `.header-grid`). */
section.cases {
  & header {
    max-width: none;
    margin: 0 0 52px;
    text-align: left;
  }
}

/* Section Contact de la page d'accueil : fond sombre UNI (`--color-black`), sans
   aucun dégradé. Deux dégradés d'origine sont retirés : le dégradé linéaire de
   `section.section-bg-dark` (`base.css` : noir vers `#0E1614`, 135deg) et les deux
   halos radiaux menthe de `section-bg-dark-gradient` (`::before` / `::after`,
   supprimés — `::before` porte désormais le triangle de connexion posé par
   `includes/mockup-structure.php`, dont la couleur `--dark` = `--color-black`
   se raccorde donc exactement au fond). La classe `section-bg-dark-gradient`
   reste dans le markup du bloc `coaxiarh/contact-section` (`save()` inchangé, pas
   de « bloc invalide ») mais n'a plus aucune règle. Spécificité (0,2,1) >
   `section.section-bg-dark` de `base.css` (0,1,1). */
section.contact.section-bg-dark {
  background: var(--color-black);
}

/* Citation sur fond blanc (section « constat » de la page d'accueil,
   `coaxiarh/blockquote` avec `bg="white"`) : variante `.blockquote-bg-white`. */
.blockquote.blockquote-bg-white {
  background: var(--color-white);
  --quote-mark: var(--color-brand);

  & blockquote {
    color: var(--color-black);
  }

  & h3,
  & figcaption {
    color: var(--color-brand);
  }
}

/**
 * Page d'accueil — alternance des fonds après les Témoignages (constat
 * brand-soft, cibles blanc, cas brand-soft, FAQ blanc, Contact sombre, Blog
 * brand-soft) : classes et triangles posés par `includes/mockup-structure.php`.
 */

/* Citation du constat (`section.pains > figure.blockquote`) : le chevauchement
   du bord inférieur (carte blanche débordant sur la section suivante,
   `base.css` `@scope (.page-index)`) n'a plus lieu d'être — la section suivante
   est désormais « Pour les organisations… » et non plus les Offres. La citation
   reprend le design des autres citations du site (fond `--color-brand`, texte
   blanc en italique, guillemet-filigrane) dans le flux normal, à la largeur du
   conteneur. Spécificité supérieure (0,3,3) à celle de la règle de `base.css`
   (0,2,2) pour l'emporter sans `!important`. */
body.page-index section.pains > figure.blockquote {
  z-index: auto;
  margin: var(--space-10) auto 0;
  /* Padding horizontal : `.blockquote` (`base.css`) n'en a pas — pensé pour une
     bande de section dont la colonne fait déjà le retrait ; ici la figure est
     une carte pleine largeur du conteneur (même retrait que dans le corps des
     articles, `.content-layout article figure.blockquote`). */
  padding: var(--space-4) var(--space-6);
}

/* FAQ sur fond blanc : `base.css` la dessine en blanc sur fond `--color-brand`
   (filets blancs, questions et réponses blanches) — recolorée pour le fond clair
   du site (filets `--color-gray-soft`, textes sombres, survol brand). */
section.faq:not(.section-bg-brand) {
  & .faq-list details {
    border-bottom-color: var(--color-gray-soft);

    &:first-child {
      border-top-color: var(--color-gray-soft);
    }

    & summary {
      color: var(--color-black);

      &:hover {
        color: var(--color-brand);
      }
    }

    &[open] summary {
      color: var(--color-black);
    }

    & div {
      color: var(--color-gray);
    }
  }
}

/**
 * Lien « Agefiph » (page Formation, section « Accueil et handicap »,
 * `.section-bg-brand-soft`) devenu blanc — même régression que `.contact-
 * list` côté maquette (`coaxia @ 0.10.21`), mais ce thème réutilise ici le
 * bloc générique `coaxiarh/simple-list`/`simple-list-item` (`<ul
 * class="wp-block-coaxiarh-simple-list">`) plutôt que le `<ul
 * class="contact-list">` littéral de la maquette pour ce même contenu —
 * la classe `.contact-list` n'existe nulle part dans le DOM de ce thème,
 * le correctif de `base.css` (copié verbatim) n'y trouve donc rien à
 * cibler. Même recette de spécificité que ce correctif pour l'emporter
 * sur `section.page-content article .section-bg-brand-soft a:not(.btn)`
 * (`base.css`, 3 classes/3 types) : 4 classes ici (`.page-content` +
 * `.section-bg-brand-soft` + `.simple-list-item` + le `.btn` de
 * `:not()`) l'emportent d'emblée, quel que soit le nombre de types.
 */
section.page-content article .section-bg-brand-soft .wp-block-coaxiarh-simple-list-item a:not(.btn) {
  color: var(--color-brand);
}

/**
 * Formation — `.offers .card` : canvas text-align + font-size fix.
 *
 * `section.page-content article { text-align: justify }` (base.css) applies
 * globally (front + canvas). Since `section.offers` now lives inside
 * `section.page-content article` (restructure_formation.php), every
 * descendant — including card `<h3>` and `<p>` — inherits that rule.
 * On the frontend the `@scope (.page-service)` override
 *   `.offers.section-accordion .card { text-align: left }`
 * resets alignment (h3 is left-aligned on the frontend, not justified).
 * The same @scope also resets `.card .text p { font-size: inherit }` back
 * to `var(--text-sm)` (14 px), and normalises `ul`/`li` inside `.card .text`.
 * Those @scope rules are all muted in the editor canvas (no `page-service`
 * class on the canvas iframe body). Replicate the same resets here,
 * canvas-only.
 */
.editor-styles-wrapper .offers .card {
  text-align: left;

  & .text {
    & p {
      font-size: var(--text-sm);
      line-height: 1.55;
      color: inherit;
      margin-bottom: 0;
    }

    & ul {
      padding-inline-start: 0;

      & li {
        line-height: 1.5;
        margin-bottom: 0;
      }
    }
  }
}

/**
 * Formation — `.card--detail` : toujours ouverte dans le canvas éditeur.
 *
 * Sur le frontend, les cards sont fermées par défaut (`grid-template-rows: 0fr`
 * sur `.detail`, `aspect-ratio: 1` ≥640 px sur `:not(.is-open)`) et s'ouvrent
 * en JS via la classe `is-open`. Dans le canvas éditeur, le JS ne tourne pas :
 * les cards restent carrées et le texte long (`.detail p`) reste à `opacity: 0`
 * — l'éditeur ne peut ni voir ni cliquer dessus.
 *
 * La règle `base.css` qui masque `.detail` vaut (0,4,1) :
 *   `section.method .grid-5c .card .detail { grid-template-rows: 0fr }`
 * Un sélecteur descendant ordinaire n'atteint pas cette spécificité sans
 * dupliquer toute la chaîne d'ancêtres. `!important` author est le pattern
 * documenté pour les overrides `add_editor_style()` (cf. kiweb-wordpress
 * "wp:image canvas — !important" note). Inoffensif côté front :
 * `.editor-styles-wrapper` n'existe que dans l'iframe éditeur.
 */
.editor-styles-wrapper .card--detail {
  aspect-ratio: auto !important;

  & .detail {
    grid-template-rows: 1fr !important;
    margin-top: var(--space-3) !important;

    & p {
      transform: translateY(0) !important;
      opacity: 1 !important;
    }
  }
}