/**
 * ODL Notaires FSE (enfant de kiweb-fse-base) — WordPress-specific additions
 * Repris de odl-notaires/assets/css/wordpress.css (thème autonome, même maquette notaire2.1).
 *
 * Everything here exists for reasons that don't apply to the plain mockup
 * (Gutenberg block constraints, the editor canvas, WP's own generated CSS).
 * Loaded AFTER base.css, front-end and editor alike, so that file stays
 * byte-for-byte `cp`-able from the mockup at any time — never add anything
 * to it directly, always add it here instead.
 */

/**
 * Active main-nav highlight (CSS-only, no JS)
 *
 * `odl_nav_body_class()` (functions.php) adds a `nav-{key}` class to <body>
 * identifying the current main-menu section; paired with the matching
 * `.nav-link--{key}` class on each header link (`parts/header.html`), this
 * highlights the active item with the same styling as the mockup's own
 * `.nav-link.active` (color + background) — entirely server-rendered, no
 * FOUC, no JS, no hardcoded page IDs (the `etude` ancestor is resolved via
 * `get_page_by_path()`). This mechanism has no equivalent in the plain
 * mockup (its PHP build computes `.active` directly via `isActiveNav()`),
 * so it lives here rather than in `base.css`.
 */
body.nav-accueil .nav-link--accueil,
body.nav-etude .nav-link--etude,
body.nav-domaines .nav-link--dropdown,
body.nav-actualites .nav-link--actualites,
body.nav-contact .nav-link--contact,
body.nav-outils .nav-link--tool {
  color: var(--color-accent);
  background-color: rgba(194, 161, 90, 0.06);
}

/**
 * blockGap:0 specificity fix
 *
 * `.alignfull h2` / `.alignfull header` / `.alignfull header .subtitle` /
 * `.alignfull header.centered` — re-assert base.css's `section h2` /
 * `section header` / `section header .subtitle` / `section header.centered`
 * rules at higher specificity. WordPress generates
 * `.wp-container-xxx > * { margin-block: 0 }` for any group with
 * `blockGap:0` (0,1,0) — the mockup's plain two-type-selector rules (0,0,2)
 * can lose that tie, collapsing these margins; `.alignfull` (present on
 * every full-bleed section block) raises it to (0,1,1), which wins
 * deterministically in both the editor canvas and the front end.
 */
.alignfull {
  & h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }

  & header:not(aside header) {
    margin-bottom: var(--space-8);

    @media (min-width: 640px) {
      margin-bottom: var(--space-12);
    }

    & .subtitle {
      font-size: var(--text-lg);
      color: var(--color-text-muted);
      line-height: 1.7;
    }

    &.centered {
      text-align: center;

      & .subtitle {
        max-width: 600px;
        margin: 0 auto;
      }
    }
  }
}

/**
 * Decorative icon boxes (pillars)
 *
 * The mockup inlines a real <svg> inside `.icon`; a wp:html wrapper for
 * that SVG would render colorless/unstyled in the editor canvas (SandBox
 * iframe gets no theme CSS — see kiweb-wordpress agent conventions). Each
 * `.icon` is instead an empty, real Group block (`<span>` on the front
 * end), with the icon graphic as a `background-image` (colour baked in —
 * `currentColor` doesn't reach a background-image) on `::before`, centered
 * with position:absolute (not flex/justify-content — an empty block can
 * get extra internal editor UI as a real sibling node in the canvas only,
 * which would throw off flex-based centering).
 *
 * Scopé à `.page-index` : la section « équipe » de /etude réutilise
 * `class="header-grid"` mais ses cartes portent `.avatar`, pas `.icon` — sans
 * ce scope, le `:nth-child(N) .icon::before` viserait génériquement les mauvaises
 * cartes. Miroir non scopé dans editor.css (le canvas n'a pas de body.page-*).
 */
.page-index section.header-grid .card {
  & .icon {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 28px;
      height: 28px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }

  &:nth-child(1) .icon::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%23C2A15A" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>');
  }

  &:nth-child(2) .icon::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%23C2A15A" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>');
  }

  &:nth-child(3) .icon::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%23C2A15A" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>');
  }
}

/**
 * Image de fond du hero (toutes les pages, dont les pages service)
 *
 * Depuis kiweb-fse-base 1.49.0, le `background-image` de `section.hero`
 * provient de l'IMAGE MISE EN AVANT de la page : `kiweb_theme_hero_featured_background()`
 * imprime `<style id="kiweb-theme-hero-bg">body.page-id-{ID} section.hero{…}</style>`
 * en front (+ preload), et `kiweb_theme_page_editor_styles()` l'injecte dans le
 * canevas. Les anciens blocs `@scope (.page--{immobilier,famille,…})` codant une
 * image par domaine sont donc supprimés (source unique = l'image mise en avant,
 * pas de règle morte ni de double chargement). `base.css` `@scope (.page-service)`
 * fournit toujours `background-size: cover` + overlay beige + texte sombre.
 */

/**
 * Pages légales (`page-base`) — hero à fond uni, sobre
 *
 * Divergence assumée vs maquette : la maquette laisse ces pages hériter du
 * `section.hero { background-image: lac-annecy… }` global de `base.css`. Ce
 * sont les pages les plus simples graphiquement → hero sans photo, fond uni.
 * `base.css` étant un `cp` littéral (non éditable), l'override vit ici.
 * `@scope (.page-base)` (et non un sélecteur plat) pour être rejoué dans le
 * canevas par `kiweb_theme_page_editor_styles()` du parent.
 *
 * En complément, `odl_notaires_fse_hero_featured_image_enabled()` (functions.php)
 * exclut ces pages du mécanisme d'image mise en avant : même en posant une
 * image mise en avant, leur hero reste uni.
 */
@scope (.page-base) {
  & section.hero {
    background-image: none;
    background-color: var(--color-bg-subtle);
  }

  & section.hero::before {
    background: none;
  }
}

/**
 * Button-block bridge — EDITOR CANVAS ONLY
 *
 * `odl_button_block_to_anchor()` (functions.php) reduces core/button to a
 * bare `<a class="btn …">` on the front end only — the editor canvas still
 * renders the native wrapper (`.wp-block-button` div >
 * `.wp-block-button__link.wp-element-button` a). Without this reset,
 * WordPress's own default button padding stacks with `.btn-lg`'s padding
 * on the wrapper, making buttons look oversized in the canvas only.
 */
.wp-block-button.btn {
  position: relative;

  .wp-block-buttons > & {
    display: inline-flex;
  }

  & > .wp-block-button__link {
    all: unset;
    cursor: pointer;
    color: inherit;
    font: inherit;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }
  }
}

/**
 * CTA button icons (calendar, phone)
 *
 * The mockup's `button/btn.php` inlines the icon's <svg> (stroke="currentColor")
 * directly inside the <a>, before the label. core/button's RichText label can't
 * carry an inline SVG, so the icon is rendered as a `::before` background-image
 * instead — stroke baked to white (both `.btn-primary` and `.btn-secondary` render
 * white text/icon in this section's dark background). Scoped to a per-button
 * modifier class (never the shared `.btn-primary`/`.btn-secondary`), so other
 * buttons reusing those classes elsewhere are unaffected.
 * Two selector forms: the front-end's bare `<a class="btn … btn-icon-*">`
 * (`odl_button_block_to_anchor()`) and the editor canvas's native wrapper
 * (`.wp-block-button` div > `.wp-block-button__link` a).
 */
/* Une seule règle par jeu de sélecteurs (pas de `&::before` imbriqué : le
   `:is()` généré nivellerait la spécificité de `a.btn-icon-*` sur celle,
   bien plus forte, de `.wp-block-button… > .wp-block-button__link`). */
a.btn-icon-calendar::before,
a.btn-icon-phone::before,
a.btn-icon-calculator::before,
.wp-block-button.btn-icon-calendar > .wp-block-button__link::before,
.wp-block-button.btn-icon-phone > .wp-block-button__link::before,
.wp-block-button.btn-icon-calculator > .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: var(--space-2);
  vertical-align: -3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

a.btn-icon-calendar::before,
.wp-block-button.btn-icon-calendar > .wp-block-button__link::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
}

a.btn-icon-phone::before,
.wp-block-button.btn-icon-phone > .wp-block-button__link::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.18 6.18l.91-.91a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.92 17z"/></svg>');
}

/* Tarifs (/tarifs) — CTA « Simuler mes frais », icône reprise de
   icon/calculator.php (maquette notaire2.1), stroke blanc comme les 2
   icônes ci-dessus (.btn-primary a fond --color-accent, texte blanc). */
a.btn-icon-calculator::before,
.wp-block-button.btn-icon-calculator > .wp-block-button__link::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><line x1="8" y1="6" x2="16" y2="6"></line><line x1="16" y1="14" x2="16" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg>');
}

/**
 * Founding-year badge (/etude) — <p class="badge-label"> rendered by wp:paragraph
 *
 * Mirrors base.css's `.badge span { font-size: xs; opacity: .7 }`.
 */
.badge {
  & .badge-year {
    margin: 0;
  }

  & .badge-label {
    font-size: var(--text-xs);
    opacity: 0.7;
    margin: 0;
  }
}

/**
 * Content sidebar — contact info icons (clock + pin)
 *
 * base.css uses `.sidebar-card.contact ul li .icon svg` with
 * `stroke="currentColor"` and `color: var(--color-gold-light)`.
 * In WordPress, the <svg> is replaced by CSS ::before on the <li>
 * (modifier classes info-hours / info-address). The gold-light stroke
 * (#D4B96A) is baked into the data-URI; mask-image + background-color
 * would also work but data-URI is simpler for two fixed icons.
 */
.sidebar-card.contact ul li {
  &.info-hours::before,
  &.info-address::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  &.info-hours::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23D4B96A" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>');
  }

  &.info-address::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23D4B96A" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
  }
}

/**
 * Contact sidebar — core blocks bridged to contact.css mockup selectors
 *
 * The sidebar is built from native core blocks (no wp:html except the
 * Google Maps iframe). Three WP-specific bridges are needed:
 *
 * 1. Icon boxes — the mockup nests `<span class="icon"><svg></span>` as the
 *    first flex child of each `.item`. An empty `wp:group` can't stand in for
 *    it: the block editor injects an InnerBlocks appender inside every empty
 *    group, which breaks the `::before` centring in the canvas. So the icon
 *    element is dropped entirely and the 40×40 gold box + glyph is drawn as
 *    `.item::before` — the exact slot the `<span class="icon">` occupied. A
 *    modifier class on each `.item` (`item--geo` / `item--phone` /
 *    `item--mail`) picks the glyph.
 * 2. Hours rows (.hours-row) → wp:group div pairs replacing ul.table li,
 *    bridged to the same flex layout.
 * 3. Access list items → wp:list-item, check icon via CSS ::before.
 */

/**
 * Contact info icons (geo, phone, mail) — SVG data-URIs, stroke #D4B96A.
 * `::before` reproduces contact.css `.contact-info-card .item .icon`
 * (40×40, gold-tint box, flex-shrink 0) since that element no longer exists.
 */
.contact-info-card .item {
  &::before {
    content: '';
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: rgba(194, 161, 90, 0.25);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
  }

  &.item--geo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D4B96A' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
  }

  &.item--phone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D4B96A' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.18 6.18l.91-.91a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21.92 17z'%3E%3C/path%3E%3C/svg%3E");
  }

  &.item--mail::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23D4B96A' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22%2C6 12%2C13 2%2C6'%3E%3C/polyline%3E%3C/svg%3E");
  }
}

/**
 * Hours rows (.hours-row) — wp:group div pairs
 *
 * Mirrors contact.css `.contact-hours ul.table li { display: flex;
 * justify-content: space-between; … }`.
 */
.contact-hours .hours-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  &:last-child {
    border-bottom: none;
  }

  & p {
    margin: 0;
    font-size: inherit;
    color: inherit;
  }
}

/**
 * split-block aside — wp:image figure bridge
 *
 * The mockup's `.split-block aside img` rules (height 240/360/500px,
 * object-fit:cover) target the <img> directly. WordPress wraps wp:image
 * in <figure class="wp-block-image"> which defaults to display:table and
 * resets the img's width/height — the image stays at its intrinsic size
 * instead of filling the aside.
 * Fix: make the figure a transparent full-width flex container so the
 * existing base.css rules on `aside img` apply correctly.
 */
.split-block aside .wp-block-image {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;

  & img {
    width: 100%;
    height: 240px;
    object-fit: cover;

    @media (min-width: 640px) {
      height: 360px;
    }

    @media (min-width: 1024px) {
      height: 500px;
    }
  }

  & figcaption {
    display: none; /* decorative — pas de légende visible */
  }
}

/**
 * Domains grid card — wp:image figure bridge
 *
 * Même correctif que split-block : les 6 photos de section.services .card
 * (domains-grid.php) sont passées de <!-- wp:html --> à un vrai bloc wp:image
 * pour hériter correctement des styles de l'éditeur (un bloc HTML brut
 * s'affiche dans un aperçu isolé qui ne charge pas add_editor_style()).
 * La figure.wp-block-image (display:table par défaut) doit redevenir un
 * conteneur transparent.
 *
 * L'<img> généré par wp:image n'a PAS d'attribut width/height (contrairement
 * à la maquette : <img width="400" height="200">). La règle cœur
 * `.wp-block-image img { height:auto }` (0,1,1 ; en éditeur
 * `.editor-styles-wrapper .wp-block-image img`, 0,2,1) l'emporte alors sur
 * `section.services .card figure img` de base.css dans certains contextes :
 * les images portrait (successions, portrait de Maître Leblanc) s'affichent
 * à leur ratio naturel au lieu du cadre 200 px. On rétablit explicitement
 * le cadre ici, à (0,3,3). Voir aussi editor.css (canvas, `!important`).
 */
.card figure.wp-block-image {
  display: block;
  width: 100%;
  margin: 0;

  & figcaption {
    display: none; /* decorative — pas de légende visible */
  }

  /* `section.services &` (et non `& …` puis re-scoper) garde la spécificité
     exacte (0,3,3) de l'ancien `section.services .card figure.wp-block-image img`. */
  section.services & img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
}

/**
 * photo-stack (/etude) — pont figure wp:image
 *
 * `base.css` vise `.photo-stack img.main` / `img.inset` (classe sur l'<img>) ;
 * `wp:image` porte la className sur `<figure class="wp-block-image … main/inset">`.
 * On rebranche marge / position / taille sur le <figure> et son <img>. Valeurs
 * reprises telles quelles du bloc `.photo-stack` de la maquette.
 */
.photo-stack figure.wp-block-image {
  margin: 0;

  &.main img {
    width: 100%;
    height: inherit;
    object-fit: cover;
  }

  &.inset {
    position: absolute;
    bottom: -24px;
    left: -24px;
    width: 180px;
    height: 140px;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 4px solid #fff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
  }
}

/**
 * Avatar équipe (/etude) — pont figure wp:image
 *
 * WordPress rend `<figure class="wp-block-image size-thumbnail avatar"><img>`.
 * `base.css` `.card .avatar` / `.card .avatar img` cible n'importe quel tag
 * (sélecteur de classe) mais la règle cœur `.wp-block-image img { height:auto }`
 * reprend le dessus dans certains cas (images sources non carrées, ex.
 * `thomas-r.jpg` 400×402 → ovale). On force ici le cadre circulaire 56×56,
 * mêmes déclarations que la maquette.
 */
.card figure.wp-block-image.avatar {
  display: flex;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
}

/**
 * Variante « card--bigpic » — même principe que `base.css`, réasserti ici à
 * spécificité égale (0,3,1) pour l'emporter sur la règle ci-dessus : le
 * template `card/team-member.php` rend un `<figure class="wp-block-image
 * … avatar">` (pont WordPress), pas le `<span class="avatar">` de la
 * maquette, sur lequel `.card--bigpic .avatar` de base.css seul perdrait.
 */
.card--bigpic figure.wp-block-image.avatar {
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-5);
}

/**
 * Variante « card--lgpic » — même principe, réasserti à spécificité égale
 * (0,3,1) pour l'emporter, image rectangulaire pleine largeur en tête de
 * carte (voir le commentaire équivalent dans base.css).
 */
.card--lgpic figure.wp-block-image.avatar {
  width: calc(100% + var(--space-6) * 2);
  height: 200px;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  border-radius: 0;

  & img {
    border-radius: 0;
    object-position: center -33px;

    @media (min-width: 375px) {
      object-position: center -55px;
    }

    @media (min-width: 640px) {
      object-position: center -33px;
    }

    @media (min-width: 1440px) {
      object-position: center -55px;
    }
  }

  @media (min-width: 640px) {
    width: calc(100% + var(--space-8) * 2);
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) var(--space-5);
  }
}

/**
 * Access list — check icon via CSS ::before
 *
 * Mirrors the inline check-mini SVG (icon/check-mini.php): stroke
 * currentColor, color driven by --color-secondary (#485563).
 * `flex-shrink: 0; margin-top: 3px` preserved from the original inline style.
 */
.access ul li {
  &::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    margin-top: 3px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23485563' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/**
 * Formulaire de contact — erreur serveur (échec d'envoi malgré une
 * validation client réussie)
 *
 * `.form-server-error` (injecté par contact.js, jamais présent dans la
 * maquette — celle-ci n'a pas de soumission AJAX réelle) n'a aucune
 * contrepartie dans contact.css : ajouté ici plutôt que dans ce fichier,
 * qui doit rester une copie `cp` littérale de la maquette (voir en-tête de
 * ce fichier).
 */
.form-server-error {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border-left: 3px solid #ef4444;
  background-color: #fef2f2;
  color: #991b1b;
  font-size: var(--text-sm);
}

/**
 * Cookie preferences toggles (page cookies uniquement)
 */
.cookie-toggle-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);

  &:last-of-type {
    border-bottom: none;
  }
}

.cookie-toggle-info {
  & h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-1);

    #cookie-preferences-form & {
      margin-top: 0;
    }
  }

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

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;

  & input {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + .toggle-slider {
      background-color: var(--color-secondary);

      &::before {
        transform: translateX(24px);
      }
    }

    &:focus + .toggle-slider {
      box-shadow: 0 0 0 3px rgba(72, 85, 99, 0.25);
    }

    &:disabled + .toggle-slider {
      background-color: var(--color-secondary);
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

.toggle-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: var(--color-border);
  transition: var(--transition);

  &::before {
    content: '';
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
  }
}

#cookie-pref-confirmation {
  display: none;
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #065f46;
  background-color: #ecfdf5;
  border: 1px solid #6ee7b7;
}

/**
 * Outils — icônes de catégorie via h3::before (adaptation WordPress FSE)
 *
 * Dans la maquette, l'icône est un <span class="icon"><svg/></span> réel.
 * En WordPress, wp:group ne supporte pas de tagName="span", et un wp:html
 * vide autour d'une icône déclenche un SandBox iframe avec fond blanc.
 * Solution : pseudo-élément h3::before scopé à la classe de catégorie du
 * wp:group parent (ex. `&.card--immobilier h3::before`). display:block crée
 * le bloc icon-box au-dessus du texte du h3, identique visuellement.
 * Les règles .icon de page.css restent sans effet (aucun span.icon en WP).
 */
.card--tool {
  & h3::before {
    content: '';
    display: block;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-5);
    background-color: rgba(194, 161, 90, 0.08);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
  }

  &.card--immobilier h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
  }

  &.card--famille h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  }

  &.card--successions h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2'%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='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
  }

  &.card--societes h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
  }

  &.card--patrimoine h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  }

  &.card--simulateurs h3::before {
    background-color: rgba(255, 255, 255, 0.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4B96A' stroke-width='2'%3E%3Cline x1='12' y1='1' x2='12' y2='23'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
  }
}

/**
 * Testimonials — card mise en avant (note globale Google)
 *
 * Fond bleu primaire semi-transparent laissant entrevoir l'image de fond
 * (empreinte digitale) de la section. Texte inversé.
 */
section.testimonials .card--summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  background-color: var(--color-primary);
  background-image:
    linear-gradient(rgba(28, 28, 31, 0.82), rgba(28, 28, 31, 0.82)),
    url('../img/empreinte-digitale.png');
  background-repeat: repeat;
  background-size: auto;
  border-color: transparent;

  /* Pas de guillemet décoratif sur cette card */
  &::before {
    display: none;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  & .summary-score {
    font-family: var(--font-heading);
    font-size: var(--text-5xl);
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    margin-bottom: var(--space-1);
  }

  & .summary-stars {
    font-size: var(--text-xl);
    letter-spacing: 0.1em;
    color: var(--color-accent);
    margin: 0;
  }

  & .summary-count {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 var(--space-4);
  }

  & .summary-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  & .btn-outline-white,
  & .btn-white {
    display: block;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition);
  }

  & .btn-outline-white {
    color: var(--color-white);
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.55);

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

  & .btn-white {
    color: var(--color-primary);
    background: var(--color-white);

    &:hover {
      background: var(--color-bg-subtle);
    }
  }
}

/**
 * Tarifs (/tarifs) — native wp:table inside .page-content article
 *
 * wp-block-library's own stylesheet (still enqueued site-wide) sets
 * `.wp-block-table td, .wp-block-table th { border: 1px solid }` and
 * `.wp-block-table thead { border-bottom: 3px solid }` — a full grid the
 * mockup's own table CSS (base.css, `section.page-content article table`)
 * never asked for (it only draws `border-bottom` on odd <tbody> rows via
 * `tr:nth-of-type(odd)`). Because base.css's td/th rules never declare
 * `border` themselves, core's declaration otherwise wins that property even
 * though the selector as a whole is out-specified. Neutralise it here,
 * scoped to `.table` (the custom className added on each wp:table block) so
 * no other project use of core/table is affected.
 */
.wp-block-table.table {
  & thead {
    border-bottom: none;
  }

  & td,
  & th {
    border: none;
  }
}