/* =============================================
       V3 - "The Landed Curator" / 2026 Editorial
       Bento grid · Scroll-driven · Kinetic type
       Organic shapes · Tonal depth · No borders
       ============================================= */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --primary: #00662c;
      --primary-mid: #0a6e30;
      --primary-light: #2fa855;
      --primary-pale: #7bcf9a;

      --secondary: #bd7419;
      --secondary-light: #E8922A;
      --tertiary: #7a4b00;
      --tertiary-fixed: #ffddb3;
      --on-tertiary-fixed: #291800;

      --surface: #fef9f1;
      --surface-low: #f8f3eb;
      --surface-lowest: #ffffff;
      --surface-high: #ece8e0;
      --surface-highest: #e7e2da;

      /* Fond alterne des blocs editoriaux, choisi par NTF.
         Le corps d'une page editoriale est pose sur --surface-low (#f8f3eb) :
         ce creme plus clair s'en detache donc bien, tout en restant dans les
         surfaces deja utilisees par le theme. Une seule valeur a changer pour
         ajuster l'intensite. */
      --surface-alt: #fef9f1;

      --on-surface: #1d1c17;
      --on-surface-muted: #6f6a61;
      --outline-ghost: rgba(195, 201, 185, 0.15);

      --font-display: 'Noto Serif', Georgia, serif;
      --font-body: 'Manrope', system-ui, sans-serif;

      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

      /* Layout container system - shared by hero, sections & footers.
         Outer elements get the fluid gutter; inner content caps at --container-max.
         Aligns hero and all sections to the same edges at every screen size. */
      --container-max: 1280px;
      /* Narrower cap for the post-hero page body (prose, stats, équipe, CA,
         partenaires) so content sits in one centered column on large screens,
         like the laptop view. Hero + navbar keep the full --container-max. */
      --content-max: 1080px;
      --container-gutter: clamp(2rem, 5vw, 3rem);
      /* Gutter de bord pour la navbar et les barres vertes (héros) : reste au
         clamp de base à toutes les tailles, y compris la bande laptop où
         --container-gutter passe à 10rem. Permet navbar + héro plus larges que
         le corps de page sur laptop. */
      --edge-gutter: clamp(2rem, 5vw, 3rem);
      --reading-max: 72ch;
      /* Colonne de lecture des pages éditoriales (Qui sommes-nous, Vous
         informer, Services). 680px ≈ 66-70 caractères par ligne en Manrope
         1rem - contre ~118 quand le texte occupait tout --content-max
         (1080px), ce qui « ne donnait pas envie de lire » (retour client).
         Le reliquat à droite (~340px) EST le rail : vide par défaut, photo
         sur les sections qui en ont une (voir .qsn-section__body--rail).
         SEUL POINT DE RÉGLAGE de la largeur de texte du site éditorial. */
      --reading-col: 680px;
      /* ENG-310 : palier intermédiaire du réglage de largeur des blocs, entre
         la colonne de lecture et la largeur du corps de page. */
      --reading-col-wide: 880px;
      /* Home + navbar use the SAME max-width and gutter as every other page,
         so the logo, hero, and all sections share one left/right edge at all
         screen sizes. */
      --home-max: var(--container-max);
      --home-gutter: var(--container-gutter);
      /* Espace au-dessus de l'eyebrow dans les heros (sous la navbar fixe).
         Desktop keeps original spacing; mobile adjusts via media query. */
      /* ENG-45 : +air au-dessus du fil d'Ariane (desktop). */
      /* NOTE : encore consommé par .event-detail, .member-dashboard et le hero
         de la page article ; .qsn-hero ne s'en sert plus (voir --hero-nav-clear). */
      --hero-pad-top: clamp(10rem, 4.5vw, 11.5rem);
      /* Barres vertes (héros) - HAUTEUR FIXE identique partout.
         Le contenu se centre dedans. --hero-band-clear = clairance navbar fixe
         (plus petite que --hero-pad-top, pour laisser la place au contenu dans
         la barre compacte). Consommés par .contact-hero, .mag-hero, .agenda-hero. */
      --hero-band-h: 20rem;
      --hero-band-clear: 8rem; /* ENG-45 : +air au-dessus du fil d'Ariane (mobile) */

      /* .qsn-hero - CENTRAGE VERTICAL (correctif du vide sous le titre).
         Le bug ENG-45 venait de la confusion de deux rôles dans --hero-pad-top :
         il dégageait la navbar fixe ET servait de zone de centrage.
         On sépare donc deux tokens :
           --hero-nav-clear = hauteur réservée à la navbar fixe. Appliquée en
             MARGE (hors de la boîte), donc totalement exclue du centrage.
           --hero-pad-y     = respiration haut/bas, SYMÉTRIQUE. Sans min-height,
             la bande épouse son contenu et ce padding le centre optiquement.
         (Il n'y a plus de --hero-content-h / min-height : on privilégie le
         centrage du contenu à une hauteur de bande identique entre pages.) */
      /* Hauteur RÉELLE de la navbar fixe, mesurée au navigateur (117.9px à
         1400px, 116.2px à 1200px) + 2px de sécurité. Depuis que le dégagement
         se fait en marge (et non en padding), tout excédent devient du blanc
         visible au-dessus de la bande verte : cette valeur doit donc coller à
         la navbar, pas la surestimer. */
      --hero-nav-clear: 7.5rem;
      --hero-pad-y: clamp(2rem, 3vw, 2.75rem);
      /* Taille du titre <h1> des pages en MOBILE - source unique partagée par
         tous les heros (.qsn-hero__title, .mag-hero__title, .agenda-hero__title,
         .contact-hero__title, .aff-hero h1, .fermage-hero h1). Modifier ici
         change la taille du titre mobile sur TOUTES les pages d'un coup. */
      --page-title-size-mobile: clamp(1.6rem, 7vw, 2.2rem);
    }

    /* Smaller-laptop band only: widen the side gutter so content breathes
       away from the screen edges. Big screens, tablet & mobile keep the
       :root value above. Single-point override - every element using
       var(--container-gutter) shifts together. */
    @media (min-width: 1024px) and (max-width: 1300px) {
      :root {
        --container-gutter: 10rem;
        /* La home utilise --home-gutter (et non --container-gutter) : on le
           re-fixe au clamp de base pour que la front-page reste pleine largeur
           comme avant. Sinon --home-gutter résout contre le 10rem de :root. */
        --home-gutter: clamp(2rem, 5vw, 3rem);
      }
      /* Pages EXCLUES du gutter laptop : Actualités, Agenda, NTF Mag, Contact.
         Sur elles, header ET contenu reviennent au gutter de base (comme avant
         la modif 10rem). Re-fixer --container-gutter sur le body de ces pages le
         ramène au clamp de base pour tous leurs descendants. La home est gérée
         ci-dessus via --home-gutter. */
      body.page-template-page-actualites,
      body.page-template-page-agenda,
      body.page-template-page-ntf-mag,
      body.page-template-page-contact {
        --container-gutter: clamp(2rem, 5vw, 3rem);
      }
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-body);
      font-weight: 400;
      line-height: 1.75;
      color: var(--on-surface);
      background: var(--surface);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }

    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 600;
      line-height: 1.15;
    }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* - Label Caps (editorial) - */
    .eyebrow {
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--secondary);
    }

    /* - Reveal animation - */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.95s ease-in-out, transform 0.95s var(--ease-out);
      will-change: opacity, transform;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Cards declare their own faster transform-transition (for hover) on a
       single-class selector, which would otherwise win over .reveal and cut the
       entrance short. This combined-class selector is more specific, so the slow
       reveal timing governs the fade-up. Hover still works: translateY(-4px) on
       :hover transitions with this same 1.2s curve - smooth and intentional. */
    .domaine-card.reveal,
    .news-card.reveal {
      transition: opacity 0.95s ease-in-out, transform 0.95s var(--ease-out);
    }
    /* Green pivot band (mission-block): a more discreet reveal than the cards -
       a gentle fade with only a small lift, so it doesn't compete visually. */
    .mission-block__left.reveal {
      transform: translateY(14px);
      transition: opacity 0.7s ease-in-out, transform 0.7s var(--ease-out);
    }
    .reveal-delay-1 { transition-delay: 0.10s; }
    .reveal-delay-2 { transition-delay: 0.20s; }
    .reveal-delay-3 { transition-delay: 0.30s; }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* Hub cards skip reveal - functional list, not a hero */
    .content-hub .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }

    /* =============================================
       NAV - Two-row editorial bar
       ============================================= */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      background: var(--surface);
      transition: box-shadow 0.3s ease;
    }
    body.admin-bar .nav { top: 32px; }
    @media screen and (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

    .nav.scrolled {
      box-shadow: 0 2px 20px rgba(29, 28, 23, 0.07);
    }

    .nav__wrap {
      /* --edge-gutter (et non --container-gutter) : la navbar garde le gutter
         de base sur laptop pour rester plus large que le corps de page. */
      width: min(var(--container-max), 100% - 2 * var(--edge-gutter));
      margin: 0 auto;
    }

    /* - Top row (mobile: logo + toggle) - */
    .nav__top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.9rem 0 0.7rem;
      gap: 1rem;
    }

    .nav__logo {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .nav__logo-img { height: 44px; width: auto; }

    .nav__secondary {
      display: none;
      align-items: center;
      gap: 1.8rem;
    }

    /* - Desktop: two-column grid (logo spans rows) - */
    .nav__grid {
      display: none;
    }

    .nav__secondary-link {
      font-size: clamp(0.66rem, 0.85vw, 0.72rem);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--on-surface-muted);
      transition: color 0.2s ease;
    }
    .nav__secondary-link:hover,
    .nav__secondary-link.is-active { color: var(--primary); }

    .nav__cta-wrap {
      display: none;
      align-items: center;
      gap: 0.5rem;
      margin-left: auto;
      flex-shrink: 0;
    }
    /* Fluid scaling of the nav buttons only (not the same .btn--nav used in
       page content) so the header stays harmonious on smaller desktops. */
    .nav__cta-wrap .btn {
      padding: 0.6rem clamp(0.85rem, 1.4vw, 1.3rem);
      font-size: clamp(0.66rem, 0.85vw, 0.72rem);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: all 0.25s var(--ease-out);
    }

    .btn--nav {
      padding: 0.6rem 1.3rem;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-radius: 0.4rem;
      background: var(--primary-mid);
      color: #fff;
    }
    .btn--nav:hover {
      background: var(--primary);
      transform: translateY(-1px);
    }

    .btn--nav-alt {
      padding: 0.6rem 1.3rem;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-radius: 0.4rem;
      background: var(--secondary);
      color: #fff;
    }
    .btn--nav-alt:hover {
      background: #6e4229;
      transform: translateY(-1px);
    }

    .btn__icon {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      opacity: 0.85;
    }

    .btn__arrow {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      flex-shrink: 0;
    }

    /* - Bottom row (only visible in grid on desktop) - */

    .nav__links {
      display: flex;
      align-items: center;
      gap: clamp(1.1rem, 2.2vw, 2.2rem);
    }

    .nav__link {
      font-size: clamp(0.72rem, 0.9vw, 0.78rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--primary);
      position: relative;
      transition: color 0.2s ease;
    }

    .nav__link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -0.65rem;
      width: 100%;
      height: 2px;
      background: var(--primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s var(--ease-out);
    }
    .nav__link:hover::after { transform: scaleX(1); }
    .nav__link:hover { color: var(--primary-light); }

    .nav__search,
    .nav__search--top {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--on-surface-muted);
      transition: color 0.2s ease;
    }
    .nav__search:hover,
    .nav__search--top:hover { color: var(--primary); }
    .nav__search svg,
    .nav__search--top svg { width: 18px; height: 18px; }
    .nav__search--top { display: none; } /* shown only in desktop breakpoint via nav__grid-top rule */

    .nav__linkedin {
      display: none; /* shown in desktop breakpoint only */
      align-items: center;
      justify-content: center;
      width: 30px; height: 30px;
      color: var(--on-surface-muted);
      transition: color 0.2s ease, transform 0.2s ease;
      flex-shrink: 0;
    }
    .nav__linkedin svg { fill: currentColor; display: block; }
    .nav__linkedin:hover { color: #0a66c2; transform: translateY(-1px); }

    /* - Search panel - */
    .srch {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 300;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
    }
    .srch.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    /* Croix verte cliquable, visible sur tous les ecrans (ENG-293) : le public
       senior ne doit pas dependre de la touche Echap pour fermer. */
    .srch__close-top {
      position: absolute; top: 1.1rem; right: 1.5rem;
      display: flex; align-items: center; justify-content: center;
      width: 2.75rem; height: 2.75rem; z-index: 2;
      background: none; border: none; cursor: pointer; border-radius: 50%;
      color: var(--primary);
      transition: background 0.15s, color 0.15s;
    }
    .srch__close-top svg { width: 1.6rem; height: 1.6rem; }
    .srch__close-top:hover { background: var(--surface-high); }
    .srch__body {
      flex: 1;
      overflow-y: auto;
      padding: 2.5rem 2rem 2rem;
    }
    .srch__body::-webkit-scrollbar { width: 4px; }
    .srch__body::-webkit-scrollbar-track { background: transparent; }
    .srch__body::-webkit-scrollbar-thumb { background: var(--surface-high); border-radius: 2px; }
    .srch__inner { max-width: none; margin: 0; } /* pleine largeur (ENG-293) */
    .srch-field-wrap { position: relative; margin-bottom: 2.5rem; }
    .srch-eyebrow {
      font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.15em; color: #008a7a; margin-bottom: 0.9rem;
    }
    .srch-field {
      display: flex; align-items: center; gap: 0.75rem;
      border-bottom: 2px solid var(--primary); padding-bottom: 0.55rem;
      transition: border-color 0.2s;
    }
    .srch-field:focus-within { border-color: #00954b; }
    .srch-field__icon { flex-shrink: 0; color: var(--on-surface-muted); display: flex; }
    .srch-field__icon svg { width: 20px; height: 20px; }
    .srch-field input {
      flex: 1; min-width: 0; background: none; border: none; outline: none;
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 3vw, 2.4rem);
      font-weight: 400; color: var(--on-surface); line-height: 1.2;
      caret-color: #00954b;
    }
    .srch-field input::placeholder { color: var(--surface-highest); font-style: italic; }
    /* Esc hint - desktop only, hidden on mobile */
    .srch-field__esc-hint {
      flex-shrink: 0;
      font-family: var(--font-body); font-size: 0.62rem; font-weight: 600;
      background: var(--surface-high); color: var(--on-surface-muted);
      padding: 0.18rem 0.5rem; border-radius: 0.3rem;
      border: 1px solid var(--surface-highest);
      white-space: nowrap; pointer-events: none; user-select: none;
    }
    .srch-sugg {
      position: absolute; top: calc(100% + 0.55rem); left: 0; right: 0; z-index: 20;
      background: var(--surface); border: 1px solid var(--surface-high);
      border-radius: 0.8rem; box-shadow: 0 14px 40px -8px rgba(0,149,75,0.13);
      overflow: hidden; display: none;
    }
    .srch-sugg.on { display: block; }
    .srch-sugg__label {
      font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: #008a7a; padding: 0.7rem 1.1rem 0.25rem;
    }
    .srch-sugg__item {
      display: flex; align-items: center; gap: 0.7rem;
      padding: 0.5rem 1.1rem; cursor: pointer; transition: background 0.12s;
    }
    .srch-sugg__item:hover, .srch-sugg__item.hi { background: var(--surface-low); }
    .srch-sugg__thumb {
      width: 44px; height: 34px; object-fit: cover;
      border-radius: 0.35rem; flex-shrink: 0; background: var(--surface-high);
    }
    .srch-sugg__title { flex: 1; font-size: 0.84rem; font-weight: 600; color: var(--on-surface); }
    .srch-sugg__title mark { background: none; color: #00954b; font-weight: 700; }
    .srch-sugg__cat {
      font-size: 0.59rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      background: var(--surface-high); color: var(--on-surface-muted);
      padding: 0.16rem 0.5rem; border-radius: 50px; flex-shrink: 0;
    }
    .srch-sugg__cat--type {
      background: rgba(0,149,75,0.1); color: #00954b;
    }
    .srch-label {
      font-size: 0.61rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.13em; color: #008a7a; margin-bottom: 0.85rem;
    }
    .srch-themes { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 2.5rem; }
    .srch-pill {
      display: inline-flex; align-items: center; gap: 0.4rem;
      padding: 0.42rem 0.95rem 0.42rem 0.7rem;
      border-radius: 50px; border: 1px solid var(--surface-high);
      background: none; cursor: pointer; font-family: var(--font-body);
      transition: border-color 0.16s, background 0.16s, transform 0.18s var(--ease-out);
    }
    .srch-pill:hover { border-color: #00954b; background: #00954b; transform: translateY(-1px); }
    .srch-pill:hover .srch-pill__icon, .srch-pill:hover .srch-pill__name { color: #fff; }
    .srch-pill__icon {
      font-size: 0.95rem; color: #008a7a;
      display: flex; align-items: center; flex-shrink: 0;
      font-family: 'Material Symbols Outlined';
      font-weight: normal; font-style: normal; line-height: 1;
      text-transform: none; letter-spacing: normal; white-space: nowrap;
      direction: ltr; -webkit-font-smoothing: antialiased;
      font-variation-settings: 'FILL' 0, 'wght' 300;
    }
    .srch-pill__name { font-size: 0.78rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
    .srch-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
    .srch-tag {
      display: inline-flex; align-items: center; gap: 0.28rem;
      font-size: 0.74rem; font-weight: 600; font-family: var(--font-body);
      padding: 0.34rem 0.8rem; border-radius: 50px;
      background: none; color: var(--primary-mid);
      border: 1px solid var(--surface-high); cursor: pointer;
      transition: background 0.16s, color 0.16s, transform 0.18s var(--ease-out);
    }
    .srch-tag:hover { background: #00954b; color: #fff; border-color: #00954b; transform: translateY(-1px); }
    .srch-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(0,149,75,0.3); flex-shrink: 0; }
    .srch-tag:hover .srch-tag-dot { background: rgba(255,255,255,0.4); }
    .srch-default.off { display: none; }
    .srch-results { display: none; }
    .srch-results.on { display: block; }
    .srch-list { list-style: none; margin-bottom: 2rem; }
    .srch-result {
      display: grid;
      grid-template-columns: 64px 1fr;
      gap: 0.85rem;
      align-items: start;
      padding: 0.8rem 0; border-bottom: 1px solid var(--surface-high);
      cursor: pointer; transition: background 0.12s; text-decoration: none;
    }
    .srch-result:last-child { border-bottom: none; }
    .srch-result:hover {
      background: var(--surface-low);
      margin: 0 -0.65rem; padding: 0.8rem 0.65rem;
      border-bottom-color: transparent; border-radius: 0.55rem;
    }
    .srch-result__thumb {
      width: 64px; height: 64px; object-fit: cover;
      border-radius: 0.45rem; background: var(--surface-high);
    }
    /* When there's no thumbnail, body should span full width */
    .srch-result:not(:has(.srch-result__thumb)) { grid-template-columns: 1fr; }
    .srch-result__body {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
    .srch-result__title {
      font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
      color: var(--on-surface); line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .srch-result__title mark { background: none; color: #00954b; }
    .srch-result__desc {
      font-size: 0.78rem; color: var(--on-surface-muted); line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .srch-result__tag {
      align-self: flex-start;
      font-size: 0.59rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      background: var(--surface-high); color: var(--on-surface-muted);
      padding: 0.2rem 0.55rem; border-radius: 50px;
    }
    .srch-result__tag--type {
      background: rgba(0,149,75,0.1); color: #00954b;
    }
    .srch-no-results { text-align: center; padding: 2.5rem 0; display: none; }
    .srch-no-results.on { display: block; }
    .srch-no-results__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--primary); margin-bottom: 0.3rem; }
    .srch-no-results__sub { font-size: 0.78rem; color: var(--on-surface-muted); }
    .srch__bottom {
      border-top: 1px solid var(--surface-high);
      padding: 0.7rem 2rem;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      flex-shrink: 0;
    }
    .srch-kbd-hints { display: flex; gap: 1rem; align-items: center; }
    .srch-kbd { display: flex; align-items: center; gap: 0.28rem; font-size: 0.66rem; color: var(--on-surface-muted); }
    .srch-kbd kbd {
      font-family: var(--font-body); font-size: 0.6rem; font-weight: 600;
      background: var(--surface-high); color: var(--on-surface-muted);
      padding: 0.1rem 0.38rem; border-radius: 0.25rem; border: 1px solid var(--surface-highest);
    }
    .srch-count-display { font-size: 0.68rem; font-weight: 600; color: var(--on-surface-muted); }
    @media (max-width: 640px) {
      .srch-field__esc-hint { display: none; }
    }

    /* - Mobile toggle - */
    .nav__toggle {
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
    }
    .nav__toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--on-surface);
      border-radius: 2px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    /* Croix (X) : les deux barres extrêmes doivent se croiser au CENTRE exact du
       bouton, à l'emplacement de la barre du milieu. On translate d'abord sur Y
       (dans le repère non pivoté) pour amener chaque barre au centre, PUIS on
       pivote. L'ancienne écriture `rotate() translate(5px,5px)` appliquait la
       translation dans le repère DÉJÀ pivoté : la croix partait vers la droite
       et ne retombait pas sur la position du burger. */
    .nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav__toggle.active span:nth-child(2) { opacity: 0; }
    .nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── Mobile drawer (sliding multi-level). Visible only at <960px ── */
    .nav__mobile {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      max-width: 480px;
      height: 100vh;
      height: 100dvh;
      background: var(--surface);
      box-shadow: 0 8px 30px rgba(29, 28, 23, 0.1);
      transform: translateX(100%);
      transition: transform 0.3s var(--ease-out);
      will-change: transform;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .nav__mobile.open { transform: translateX(0); }

    .nav__mobile-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(29, 28, 23, 0.4);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s var(--ease-out);
      z-index: 999;
    }
    body.menu-open .nav__mobile-backdrop {
      opacity: 1;
      pointer-events: auto;
    }
    /* Verrou de défilement à l'ouverture du menu. `overflow:hidden` supprime la
       barre de défilement : sans compensation, toute la page (navbar et bouton
       compris) se décale de sa largeur à l'ouverture puis revient à la fermeture.
       `scrollbar-gutter: stable` réserve la gouttière en permanence, donc plus
       aucun saut. */
    html { scrollbar-gutter: stable; }
    body.menu-open { overflow: hidden; }

    .nav__mobile [data-nav-source] { display: none !important; }

    .nav__mobile-stack {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      min-height: 0;
    }

    .nav__mobile-header {
      flex: 0 0 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.25rem;
      border-bottom: 1px solid var(--surface-high);
    }
    .nav__mobile-logo { display: flex; align-items: center; }
    .nav__mobile-logo img,
    .nav__mobile-logo .custom-logo {
      height: 36px;
      width: auto;
    }
    .nav__mobile-header-actions {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .nav__mobile-linkedin {
      width: 40px; height: 40px;
      display: grid; place-items: center;
      color: var(--primary);
      border-radius: 999px;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .nav__mobile-linkedin svg { fill: currentColor; display: block; }
    .nav__mobile-linkedin:hover { background: var(--surface-high); color: #0a66c2; }

    .nav__mobile-close,
    .nav__mobile-search-btn {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--primary);
      border-radius: 999px;
      transition: background 0.2s ease;
    }
    .nav__mobile-close:hover,
    .nav__mobile-search-btn:hover { background: var(--surface-high); }

    .nav__mobile-track {
      flex: 1 1 auto;
      position: relative;
      width: 100%;
      overflow: hidden;
      min-height: 0;
    }
    .nav__mobile-level {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: 0.75rem 1.25rem 1rem;
      -webkit-overflow-scrolling: touch;
      transform: translateX(0);
      transition: transform 0.3s var(--ease-out);
      will-change: transform;
    }
    /* Level positions relative to track viewport */
    .nav__mobile-level[data-level="1"] { transform: translateX(100%); }
    .nav__mobile-level[data-level="2"] { transform: translateX(200%); }
    .nav__mobile-level[data-level="3"] { transform: translateX(300%); }

    /* When current level changes, slide all panes */
    .nav__mobile-track[data-current-level="1"] .nav__mobile-level[data-level="0"] { transform: translateX(-100%); }
    .nav__mobile-track[data-current-level="1"] .nav__mobile-level[data-level="1"] { transform: translateX(0); }
    .nav__mobile-track[data-current-level="1"] .nav__mobile-level[data-level="2"] { transform: translateX(100%); }
    .nav__mobile-track[data-current-level="1"] .nav__mobile-level[data-level="3"] { transform: translateX(200%); }

    .nav__mobile-track[data-current-level="2"] .nav__mobile-level[data-level="0"] { transform: translateX(-200%); }
    .nav__mobile-track[data-current-level="2"] .nav__mobile-level[data-level="1"] { transform: translateX(-100%); }
    .nav__mobile-track[data-current-level="2"] .nav__mobile-level[data-level="2"] { transform: translateX(0); }
    .nav__mobile-track[data-current-level="2"] .nav__mobile-level[data-level="3"] { transform: translateX(100%); }

    .nav__mobile-track[data-current-level="3"] .nav__mobile-level[data-level="0"] { transform: translateX(-300%); }
    .nav__mobile-track[data-current-level="3"] .nav__mobile-level[data-level="1"] { transform: translateX(-200%); }
    .nav__mobile-track[data-current-level="3"] .nav__mobile-level[data-level="2"] { transform: translateX(-100%); }
    .nav__mobile-track[data-current-level="3"] .nav__mobile-level[data-level="3"] { transform: translateX(0); }

    .nav__mobile-back {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.65rem 0;
      margin-bottom: 0.25rem;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--secondary);
    }
    .nav__mobile-back:hover { color: var(--primary); }

    .nav__mobile-level-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--primary);
      margin: 0.25rem 0 0.85rem;
      line-height: 1.15;
    }

    .nav__mobile-row,
    .nav__mobile-section-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 1rem;
      padding: 1rem 0;
      border: none;
      border-bottom: 1px solid var(--surface-high);
      background: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--primary);
      text-align: left;
    }
    .nav__mobile-row:hover,
    .nav__mobile-section-row:hover { color: var(--primary-mid); }
    .nav__mobile-section-row {
      font-size: 0.88rem;
      color: var(--primary-mid);
    }
    .nav__mobile-chevron {
      flex-shrink: 0;
      color: var(--primary-light);
      transition: transform 0.2s ease;
    }
    .nav__mobile-row:hover .nav__mobile-chevron,
    .nav__mobile-section-row:hover .nav__mobile-chevron {
      transform: translateX(2px);
    }

    .nav__mobile-flat {
      display: flex;
      flex-direction: column;
      padding-top: 0.5rem;
    }
    .nav__mobile-row--flat {
      display: block;
      padding: 0.7rem 0;
      font-family: var(--font-body);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--on-surface-muted);
      text-decoration: none;
      border-bottom: 1px solid var(--surface-high);
    }
    .nav__mobile-row--flat:last-child { border-bottom: none; }
    .nav__mobile-row--flat:hover { color: var(--primary); }

    .nav__mobile-link {
      display: block;
      padding: 0.75rem 0;
      font-family: var(--font-body);
      font-size: 0.92rem;
      font-weight: 500;
      color: var(--on-surface);
      text-decoration: none;
      border-bottom: 1px solid var(--surface-high);
      transition: color 0.15s ease, transform 0.2s ease;
    }
    .nav__mobile-link:hover {
      color: var(--primary);
      transform: translateX(0.35rem);
    }
    .nav__mobile-link:last-child { border-bottom: none; }
    /* « Tous les services » - titre chapeau du menu Services, mis en avant (Feedback 9) */
    .nav__mobile-link--lead { color: var(--secondary); font-weight: 700; }
    .nav__mobile-link--lead:hover { color: var(--secondary); }

    /* Drill-down row: a link that itself opens a deeper level */
    .nav__mobile-link--parent {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      background: none;
      border: none;
      border-bottom: 1px solid var(--surface-high);
      cursor: pointer;
      text-align: left;
      font-family: var(--font-body);
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--primary);
    }
    .nav__mobile-link--parent:hover { color: var(--primary-mid); padding-left: 0; }
    .nav__mobile-link--parent:hover .nav__mobile-chevron { transform: translateX(2px); }

    /* "Voir tout : {thème}" - the section's landing page, set apart from the sub-links */
    .nav__mobile-link--all {
      font-weight: 600;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.82rem;
    }

    .nav__mobile-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      padding: 0.25rem 0 1rem;
      margin-bottom: 0.5rem;
      border-bottom: 1px solid var(--surface-high);
    }
    .nav__mobile-tag {
      display: inline-flex;
      align-items: center;
      padding: 0.35rem 0.75rem;
      background: var(--surface-high);
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--primary-mid);
      text-decoration: none;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .nav__mobile-tag:hover {
      background: var(--primary);
      color: #fff;
    }

    .nav__mobile-footer {
      flex: 0 0 auto;
      padding: 1rem 1.25rem 1.25rem;
      border-top: 1px solid var(--surface-high);
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      background: var(--surface);
    }
    .nav__mobile-footer .btn--nav,
    .nav__mobile-footer .btn--nav-alt { text-align: center; justify-content: center; }

    @media (prefers-reduced-motion: reduce) {
      .nav__mobile,
      .nav__mobile-track,
      .nav__mobile-backdrop {
        transition: none;
      }
    }

    /* Hide drawer + backdrop on desktop entirely */
    @media (min-width: 960px) {
      .nav__mobile,
      .nav__mobile-backdrop {
        display: none !important;
      }
    }

    /* =============================================
       DROPDOWN - Wrap (positions the panel under its trigger)
       ============================================= */
    .nav__dropdown-wrap {
      position: relative;
    }

    /* =============================================
       DROPDOWN - Trigger buttons
       ============================================= */
    .nav__link--mega {
      background: none;
      border: none;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      cursor: pointer;
      padding: 0;
      font-family: var(--font-body);
      position: relative;
    }
    .nav__link-chevron {
      width: 10px;
      height: 6px;
      stroke: currentColor;
      fill: none;
      flex-shrink: 0;
      transition: transform 0.25s var(--ease-out);
    }
    .nav__link--mega[aria-expanded="true"] .nav__link-chevron {
      transform: rotate(180deg);
    }
    .nav__link--mega[aria-expanded="true"] { color: var(--primary-light); }
    .nav__link--mega[aria-expanded="true"]::after { width: 100%; }

    /* =============================================
       DROPDOWN - Panel shell
       ============================================= */
    .dropdown {
      position: absolute;
      top: calc(100% + 0.5rem);
      left: 0;
      z-index: 190;
      background: var(--surface);
      border: 1px solid var(--surface-high);
      border-radius: 0.75rem;
      box-shadow: 0 12px 32px -4px rgba(29,28,23,0.14);
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
    }
    .dropdown[hidden] {
      display: block !important;
      visibility: hidden;
    }
    .dropdown--open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
      visibility: visible;
    }
    /* Default: vertical list */
    .dropdown__inner {
      display: block;
      padding: 0.5rem 0;
    }
    /* Two-column layout only for dropdowns that have sub-categories */
    .dropdown__inner--split {
      display: flex;
      align-items: stretch;
      padding: 0;
    }
    .dropdown__cats {
      flex-shrink: 0;
      width: 220px;
      padding: 0.5rem 0;
      border-radius: 0.75rem 0 0 0.75rem;
      overflow: hidden;
    }
    /* Right sub-panel: zero-width clip by default, expands on hover */
    .dropdown__subs {
      overflow: hidden;
      max-width: 0;
      transition: max-width 0.22s var(--ease-out);
      border-radius: 0 0.75rem 0.75rem 0;
    }
    .dropdown__subs.has-active {
      max-width: 320px;
      border-left: 1px solid var(--surface-high);
    }
    .dropdown__subs-inner {
      width: 260px;
      padding: 0.5rem 0;
    }

    /* Level-1 category button */
    .dropdown__cat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--primary);
      text-decoration: none;
      padding: 0.55rem 1.1rem;
      text-align: left;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .dropdown__cat:hover { background: var(--surface-low); }
    .dropdown__cat[aria-expanded="true"] {
      background: var(--surface-low);
      color: var(--primary-light);
    }
    .dropdown__cat-chevron {
      width: 7px;
      height: 10px;
      stroke: currentColor;
      fill: none;
      flex-shrink: 0;
      opacity: 0.35;
      transition: opacity 0.15s ease;
    }
    .dropdown__cat:hover .dropdown__cat-chevron,
    .dropdown__cat[aria-expanded="true"] .dropdown__cat-chevron { opacity: 1; }

    /* Level-2 sub-links - stack inside subs-inner, only visible one shown */
    .dropdown__sub {
      display: none;
      padding: 0;
    }
    .dropdown__sub[hidden] { display: none !important; }
    .dropdown__sub:not([hidden]) { display: block; }
    .dropdown__sub-inner { display: contents; }

    .dropdown__link {
      display: block;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--on-surface-muted);
      padding: 0.38rem 1.1rem;
      white-space: nowrap;
      transition: color 0.15s ease, background 0.15s ease;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }
    .dropdown__link:hover {
      color: var(--primary);
      background: var(--surface-low);
    }
    /* Sujet listé au sommaire mais sans page dédiée pour l'instant - visible,
       non cliquable, distinct des vrais liens (cursor + opacité réduits). */
    .dropdown__link--soon {
      opacity: 0.55;
      cursor: default;
      pointer-events: none;
    }
    /* Barème semestriel introuvable dans l'archive ntf.be (ex. 2017 - 2e semestre) :
       même traitement - visible, non cliquable, distinct du reste de la liste. */
    .deg-baremes-list__missing {
      opacity: 0.55;
    }

    /* Bandeau « page en relecture » (ex. Politique de confidentialité) - même
       langage visuel que .fermage-notice (fermage.css), mais scopé ici plutôt
       que dans un CSS de page, pour rester réutilisable ailleurs si besoin. */
    .legal-review-notice {
      max-width: var(--reading-col, 680px);
      margin: 0 auto;
      padding: 1.1rem 1.35rem;
      background: var(--surface-low);
      border-radius: 12px;
    }
    .legal-review-notice__title {
      margin: 0 0 0.5rem;
      font-weight: 600;
      color: var(--primary);
    }
    .legal-review-notice p,
    .legal-review-notice ul { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.6; }
    .legal-review-notice ul { padding-left: 1.2rem; }
    .legal-review-notice li { margin-bottom: 0.3rem; }
    .legal-review-notice p:last-child,
    .legal-review-notice ul:last-child { margin-bottom: 0; }
    .dropdown__link--parent {
      font-weight: 600;
      color: var(--primary);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      width: 100%;
    }
    .dropdown__link-chevron {
      flex-shrink: 0;
      width: 9px;
      height: 6px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      opacity: 0.6;
      transition: transform 0.2s ease, opacity 0.15s ease;
    }
    .dropdown__link--parent:hover .dropdown__link-chevron { opacity: 1; }
    .dropdown__link--parent[aria-expanded="true"] .dropdown__link-chevron {
      transform: rotate(180deg);
      opacity: 1;
    }

    /* Level-3 accordion: sub-links revealed under a parent link */
    .dropdown__sublinks {
      display: block;
      padding: 0.15rem 0 0.4rem;
    }
    .dropdown__sublinks[hidden] { display: none !important; }
    .dropdown__sublink {
      display: block;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--on-surface-muted);
      padding: 0.34rem 1.1rem 0.34rem 1.9rem;
      white-space: nowrap;
      transition: color 0.15s ease, background 0.15s ease;
    }
    .dropdown__sublink:hover { color: var(--primary); background: var(--surface-low); }

    /* Flat link (no sub-level - single-group panels) */
    .dropdown__flat {
      display: block;
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--on-surface-muted);
      padding: 0.42rem 1.1rem;
      white-space: nowrap;
      transition: color 0.15s ease, background 0.15s ease;
    }
    .dropdown__flat:hover { color: var(--primary); background: var(--surface-low); }

    /* « Tous les services » - titre chapeau du menu Services, mis en avant (Feedback 9) */
    .dropdown__flat--lead { color: var(--secondary); font-weight: 700; }
    .dropdown__flat--lead:hover { color: var(--secondary); background: var(--surface-low); }

    /* Badge */
    .mega__badge {
      font-size: 0.6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      background: var(--tertiary-fixed);
      color: var(--on-tertiary-fixed);
      padding: 0.15rem 0.5rem;
      border-radius: 50px;
      margin-left: 0.5rem;
      flex-shrink: 0;
    }

    /* Tags bar (Patrimoine) */
    .dropdown__tags-bar {
      border-top: 1px solid var(--surface-high);
      padding: 0.6rem 1.1rem 0.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.25rem;
    }
    .mega__tag {
      font-size: 0.68rem;
      font-weight: 600;
      padding: 0.2rem 0.7rem;
      background: var(--surface-low);
      color: var(--primary-mid);
      border-radius: 50px;
      border: 1px solid var(--surface-high);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .mega__tag:hover { background: var(--primary-pale); color: var(--primary); border-color: var(--primary-pale); }

    /* Promo block (Services) */
    .dropdown__promo {
      margin: 0.4rem 0.8rem 0.6rem;
      background: var(--surface-low);
      border-radius: 0.6rem;
      padding: 1rem;
      border: 1px solid var(--surface-high);
      width: 200px;
    }
    .dropdown__promo .btn--nav {
      display: block;
      text-align: center;
      white-space: nowrap;
      padding-left: 0.8rem;
      padding-right: 0.8rem;
    }
    .mega__promo-title {
      font-family: var(--font-display);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 0.4rem;
    }
    .mega__promo-text {
      font-size: 0.78rem;
      color: var(--on-surface-muted);
      line-height: 1.55;
      margin-bottom: 0.75rem;
    }

    /* Mobile menu data-source blocks (.mob-group[data-nav-source]) are hidden via .nav__mobile [data-nav-source] rule. */
    .mob-group__lead { color: var(--secondary) !important; font-weight: 700; }

    /* =============================================
       HERO - Photo + Projects Panel + Copy
       ============================================= */
    .hero {
      position: relative;
      width: 100%;
      isolation: isolate;
    }

    /* Bandeau image : les cartes viennent chevaucher son bas. */
    .hero__media {
      position: relative;
      z-index: 0;
      width: 100%;
      height: clamp(440px, 54vw, 680px);
      overflow: hidden;
    }
    .hero__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 45%;
      /* Léger voile : image désaturée/assombrie juste ce qu'il faut pour
         qu'elle ne domine pas, sans la rendre terne. */
      filter: saturate(0.9) contrast(1.02) brightness(0.94);
    }
    /* Voile subtil par-dessus l'image : dégradé de marque vert → orange (couleurs
       NTF --primary #00662c et --secondary-light #E8922A), volontairement très
       peu opaque pour teinter la photo sans la masquer. Le léger assombrissement
       vers le bas garde du contraste là où les cartes viennent se poser. */
    .hero__media::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(115deg, rgba(0,102,44,0.20) 0%, rgba(0,102,44,0.06) 45%, rgba(232,146,42,0.10) 80%, rgba(232,146,42,0.16) 100%),
        linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,40,18,0.16) 100%);
    }

    /* ── Slider de messages (texte + CTA) ────────────────────────────────
       Restauration du slider rotatif : bloc de texte superposé sur l'image du
       hero, ancré en bas à gauche. Chaque slide = message (rich-text) + bouton
       d'appel à l'action. Rotation gérée par hero-slider.js (#heroSlider). */
    .hero__layout--slider-only {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 0 var(--container-gutter) clamp(2rem, 5vw, 3.5rem);
      width: min(var(--container-max), 100%);
      margin-inline: auto;
    }
    .hero__slider {
      align-self: end;
      color: #fff;
      max-width: 100%;
      padding: 0;
      position: relative;
    }
    .hero__slides {
      /* Empilement en GRILLE : tous les slides occupent la MÊME cellule
         (grid-area 1/1) → même hauteur, aucun saut, zéro ghosting. */
      display: grid;
    }
    .hero__slide {
      grid-area: 1 / 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      transition: opacity .3s ease-in;
    }
    .hero__slide--active {
      opacity: 1;
      pointer-events: auto;
      z-index: 1;
      transition: opacity .45s ease-out .3s;
    }
    .hero__slide-eyebrow {
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #FF9E2C;
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 1rem;
    }
    .hero__slide-eyebrow::before {
      content: "";
      width: 24px;
      height: 2px;
      background: #FF9E2C;
      box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    /* Corps du slide = contenu rich-text actuel (crb_hero_slides.body). Repris du
       titre d'origine pour rester lisible sur la photo, avec ombre portée. */
    .hero__slide-body {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 2.6vw, 2.6rem);
      font-weight: 400;
      line-height: 1.12;
      letter-spacing: -0.01em;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.45);
      max-width: 24ch;
      margin: 0 0 1.75rem;
    }
    .hero__slide-body strong { font-weight: 700; }
    .hero__slide-body p { margin: 0; }
    .hero__slide .btn--hero { align-self: flex-start; width: auto; }
    .hero__slider-dots {
      display: flex;
      gap: 0.4rem;
      margin-top: 1.15rem;
    }
    .hero__dot {
      width: 28px;
      height: 24px; /* cible cliquable ≥ 24px de haut - WCAG 2.2 SC 2.5.8 */
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: width .3s ease;
    }
    .hero__dot--active {
      width: 44px;
    }
    .hero__dot::before {
      content: "";
      display: block;
      width: 28px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,0.28);
      transition: background .3s ease, width .3s ease;
    }
    .hero__dot--active::before {
      background: #fff;
      width: 44px;
    }
    @media (hover: hover) {
      .hero__dot:hover::before {
        background: rgba(255,255,255,0.55);
      }
    }

    /* ── Missions + thématiques (sous le hero) - Variante 3 ─────────────────
       Deux colonnes éditoriales, sans cartes : à gauche les 3 missions en liste
       serrée (titre à pastille ambre + description + lien) ; à droite les
       thématiques en liste sobre sur 2 colonnes. Compact, peu de hauteur. */
    /* Bandeau vert PLEINE LARGEUR : le fond vert traverse tout l'écran (100vw,
       débordant les gouttières), texte blanc. Les 3 colonnes restent centrées
       et capées à --home-max à l'intérieur. Hauteur réduite (padding vertical
       serré). Séparateurs verticaux entre colonnes. */
    .missions {
      width: 100vw;
      margin-left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: #fff;
      padding-block: clamp(1.5rem, 3vw, 2.25rem);
    }
    .missions__tagline {
      width: min(var(--home-max), 100% - 2 * var(--home-gutter));
      margin-inline: auto;
      font-family: var(--font-display);
      font-size: clamp(0.95rem, 1.5vw, 1.1rem);
      font-weight: 500;
      text-align: center;
      color: rgba(255,255,255,0.8);
      letter-spacing: 0.02em;
      margin-bottom: clamp(1rem, 2vw, 1.5rem);
      text-wrap: balance;
    }
    /* 3 colonnes égales : chaque mission = titre + description + lien.
       Centrées et capées à l'intérieur du bandeau pleine largeur. */
    .missions__grid {
      width: min(var(--home-max), 100% - 2 * var(--home-gutter));
      margin-inline: auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      align-items: stretch;
    }
    .mission {
      display: flex;
      flex-direction: column;
      padding-inline: clamp(1.5rem, 3vw, 2.75rem);
    }
    /* Petits séparateurs entre les colonnes (bordures gauche/droite). */
    .mission + .mission {
      border-left: 1px solid rgba(255,255,255,0.22);
    }
    .mission__title {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
      margin: 0 0 0.45rem;
    }
    .mission__text {
      font-size: 0.9rem;
      line-height: 1.5;
      color: rgba(255,255,255,0.85);
      margin: 0 0 0.55rem;
    }
    .mission__link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      color: var(--secondary-light);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-decoration: none;
      transition: color .18s ease;
    }
    .mission__link svg { width: 13px; height: 13px; }
    @media (hover: hover) {
      .mission__link:hover { color: #fff; }
    }

    /* Mobile : les 3 colonnes s'empilent ; séparateurs horizontaux. */
    @media (max-width: 760px) {
      .missions__grid { grid-template-columns: 1fr; }
      .mission { padding-block: 1.5rem; }
      .mission + .mission {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.22);
      }
    }

    /* ── Buttons ── */
    .btn--hero {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      height: 48px;
      padding: 0 1.35rem;
      border-radius: 0.55rem;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      background: var(--surface);
      color: var(--primary);
      transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
    }
    /* hover: hover → seulement sur appareils avec vrai survol (souris). Sur
       mobile, :hover « colle » après un tap et reste actif tant qu'on ne tape
       pas ailleurs → le bouton restait surligné en scrollant. */
    @media (hover: hover) {
      .btn--hero:hover {
        background: #fff;
        box-shadow: 0 14px 32px rgba(0,0,0,0.25);
        transform: translateY(-1px);
      }
      .btn--hero:hover .arr { transform: translateX(3px); }
    }
    .btn--hero .arr { transition: transform .25s ease; }

    .btn--hero-ghost {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      height: 48px;
      padding: 0 1.35rem;
      border-radius: 0.55rem;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      background: rgba(255,255,255,0.08);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.22);
      backdrop-filter: blur(6px);
      transition: background .25s ease;
    }
    .btn--hero-ghost:hover { background: rgba(255,255,255,0.14); }

    /* Bouton plein des cartes du carrousel hero (vert plein, coins arrondis). */
    .btn--hero-card {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 1.25rem;
      /* Même rayon que les boutons du site (.btn--nav / .btn--news : 0.4rem)
         pour une cohérence visuelle - plus de pilule arrondie. */
      border-radius: 0.4rem;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      background: var(--primary);
      color: #fff;
      transition: background .2s ease, transform .2s ease;
    }
    @media (hover: hover) {
      .btn--hero-card:hover {
        background: #05753a;
        transform: translateY(-1px);
      }
    }

    /* ── LEFT: projects panel ── */
    .panel-slot {
      position: relative;
      align-self: center;
      width: 100%;
      max-width: 460px;
      justify-self: start;
    }

    .panel {
      position: relative;
      width: 100%;
      background: rgba(254,249,241,0.96);
      border-radius: 1.5rem;
      box-shadow:
        0 30px 80px -20px rgba(0,0,0,0.55),
        0 6px 18px rgba(0,0,0,0.18);
      overflow: hidden;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .panel__head {
      padding: 1.6rem 1.75rem 1.1rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      border-bottom: 1px solid rgba(0,102,44,0.07);
    }
    .panel__title-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
    .panel__eyebrow {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--secondary);
    }
    .panel__title {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--primary);
      margin: 0;
      line-height: 1.1;
    }

    .panel__nav { display: flex; gap: 0.4rem; }
    .panel__nav button {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      border: 1px solid rgba(0,102,44,0.14);
      background: var(--surface-lowest);
      color: var(--primary);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: all .2s ease;
    }
    .panel__nav button:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      transform: translateY(-1px);
    }
    .panel__nav button:disabled { opacity: 0.35; cursor: not-allowed; }
    .panel__nav button:disabled:hover {
      background: var(--surface-lowest);
      color: var(--primary);
      border-color: rgba(0,102,44,0.14);
      transform: none;
    }

    .panel__scroller {
      height: 420px;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,102,44,0.18) transparent;
      padding: 0.5rem 1.75rem 1.5rem;
    }
    .panel__scroller::-webkit-scrollbar { width: 6px; }
    .panel__scroller::-webkit-scrollbar-thumb {
      background: rgba(0,102,44,0.18);
      border-radius: 999px;
    }
    .panel__scroller::-webkit-scrollbar-thumb:hover { background: rgba(0,102,44,0.32); }

    .panel__foot {
      padding: 1rem 1.75rem 1.4rem;
      border-top: 1px solid rgba(0,102,44,0.07);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      background: linear-gradient(180deg, rgba(248,243,235,0) 0%, rgba(248,243,235,1) 60%);
    }
    .panel__progress {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      flex: 1 1 auto;
      min-width: 0;
      max-width: 70%;
    }
    .panel__progress-track {
      flex: 1 1 auto;
      height: 3px;
      background: rgba(0,102,44,0.10);
      border-radius: 999px;
      overflow: hidden;
    }
    .panel__progress-fill {
      display: block;
      height: 100%;
      width: 0%;
      background: var(--secondary);
      border-radius: inherit;
      transition: width .25s cubic-bezier(.22,.61,.36,1);
    }
    .panel__counter {
      font-size: 0.74rem;
      color: var(--on-surface-muted);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      flex-shrink: 0;
      display: inline-flex;
      align-items: baseline;
      gap: 0.15rem;
    }
    .panel__counter strong { color: var(--primary); font-weight: 700; font-size: 0.84rem; }
    .panel__counter-sep { opacity: 0.4; margin: 0 0.15rem; }
    .panel__all {
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      text-decoration: none;
      display: inline-flex;
      gap: 0.4rem;
      align-items: center;
      transition: gap .2s ease;
    }
    .panel__all:hover { gap: 0.7rem; }

    /* ── Project cards ── */
    .project {
      scroll-snap-align: start;
      display: grid;
      grid-template-columns: 96px 1fr;
      gap: 1.1rem;
      padding: 1.1rem 0;
      border-bottom: 1px solid rgba(0,102,44,0.06);
      text-decoration: none;
      color: inherit;
      transition: transform .25s ease;
    }
    .project:last-child { border-bottom: 0; }
    .project:hover { transform: translateX(2px); }
    .project:hover .project__title { color: var(--primary-mid); }
    .project:hover .project__cta { gap: 0.55rem; }

    .project__img {
      position: relative;
      width: 96px;
      height: 112px;
      border-radius: 0.65rem;
      overflow: hidden;
      background: var(--surface-high);
      flex-shrink: 0;
    }
    .project__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s ease;
    }
    .project:hover .project__img img { transform: scale(1.06); }

    .project__body { display: flex; flex-direction: column; min-width: 0; }
    .project__top {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      margin-bottom: 0.35rem;
      flex-wrap: wrap;
    }
    .project__category {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--secondary);
    }
    .project__dot {
      width: 3px;
      height: 3px;
      background: rgba(0,102,44,0.28);
      border-radius: 50%;
    }
    .project__date {
      font-size: 0.7rem;
      color: var(--on-surface-muted);
      font-variant-numeric: tabular-nums;
    }
    .project__title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--primary);
      line-height: 1.25;
      margin: 0 0 0.3rem;
      transition: color .2s ease;
    }
    .project__desc {
      font-size: 0.82rem;
      color: var(--on-surface-muted);
      line-height: 1.45;
      margin: 0 0 0.55rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .project__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-top: auto;
    }
    .project__pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.25rem 0.6rem 0.25rem 0.55rem;
      border-radius: 999px;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
    }
    .project__pill::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }
    .pill--en-cours { background: rgba(58,104,32,0.12); color: var(--primary-light); }
    .pill--acheve   { background: rgba(188,114,28,0.12); color: var(--secondary); }
    .pill--a-venir  { background: rgba(0,102,44,0.08);   color: var(--primary); }

    .project__cta {
      font-size: 0.74rem;
      font-weight: 700;
      color: var(--primary);
      letter-spacing: 0.04em;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      transition: gap .2s ease;
    }

    .project--featured {
      grid-template-columns: 1fr;
      gap: 0.9rem;
      padding-top: 0.5rem;
      padding-bottom: 1.4rem;
    }
    .project--featured .project__img { width: 100%; height: 240px; }
    .project--featured .project__title { font-size: 1.3rem; line-height: 1.18; }
    .project--featured .project__desc { font-size: 0.88rem; }

    /* Scroll progress bar */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: var(--secondary);
      width: 0%;
      z-index: 300;
      transition: width 0.1s linear;
    }

    /* =============================================
       BENTO GRID - Pillars
       ============================================= */
    .bento {
      padding: 5rem var(--container-gutter);
      background: var(--surface-low);
    }

    .bento__header {
      max-width: 600px;
      margin-bottom: 3rem;
    }

    .bento__header .eyebrow {
      color: var(--secondary);
      margin-bottom: 0.75rem;
    }

    .bento__header h2 {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      color: var(--primary);
      letter-spacing: -0.02em;
    }

    .bento__grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      gap: 1rem;
      max-width: 1280px;
      margin: 0 auto;
    }

    .bento__card {
      background: var(--surface-lowest);
      border-radius: 1.5rem;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      transition: transform 0.5s var(--ease-out);
    }

    .bento__card:hover {
      transform: translateY(-4px) scale(1.005);
    }

    .bento__card--featured {
      background: var(--primary);
      color: #fff;
    }

    .bento__card--featured .bento__card-title {
      color: #fff;
    }

    .bento__card--featured .bento__card-text {
      color: rgba(255,255,255,0.7);
    }

    .bento__card--featured .bento__tag {
      background: rgba(255,255,255,0.12);
      color: var(--tertiary-fixed);
    }

    .bento__card-icon {
      width: 44px;
      height: 44px;
      margin-bottom: 1.5rem;
      color: var(--primary);
    }

    .bento__card--featured .bento__card-icon {
      color: var(--tertiary-fixed);
    }

    .bento__card-title {
      font-size: 1.35rem;
      color: var(--primary);
      margin-bottom: 0.6rem;
      letter-spacing: -0.01em;
    }

    .bento__card-text {
      font-size: 0.9rem;
      color: var(--on-surface-muted);
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }

    .bento__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
    }

    .bento__tag {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 0.3rem 0.75rem;
      background: var(--surface-low);
      color: var(--primary-mid);
      border-radius: 50px;
    }

    /* Image card */
    .bento__card--image {
      padding: 0;
      min-height: 260px;
    }
    .bento__card--image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1.5rem;
      transition: transform 0.6s var(--ease-out);
    }
    .bento__card--image:hover img {
      transform: scale(1.04);
    }

    /* =============================================
       DOMAINES - Cinematic full-bleed cards
       ============================================= */
    .domaines {
      padding: clamp(3.5rem, 6vw, 5.5rem) var(--home-gutter);
      background: var(--surface);
    }

    .domaines__header {
      max-width: var(--home-max);
      margin: 0 auto 2rem;
    }

    .domaines__eyebrow { color: var(--secondary); }

    .domaines__title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.4vw, 2.2rem);
      font-weight: 600;
      color: var(--primary);
      letter-spacing: -0.02em;
      margin-top: 0.4rem;
    }

    .domaines__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      max-width: var(--home-max);
      margin: 0 auto;
    }

    /* Carte : image PLEINE, titre + lien superposés en bas sur voile dégradé. */
    .domaine-card {
      position: relative;
      border-radius: 1rem;
      overflow: hidden;
      aspect-ratio: 16 / 11; /* mobile (1 col): shorter cards; 3/4 restored from 640px */
      cursor: pointer;
      transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
    }

    /* Image remplit toute la carte */
    .domaine-card__img {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .domaine-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .domaine-card:hover .domaine-card__img img { transform: scale(1.06); }

    /* Voile dégradé multi-stops */
    .domaine-card__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(
          to top,
          rgba(0, 0, 0, 0.82) 0%,
          rgba(0, 0, 0, 0.45) 35%,
          rgba(0, 0, 0, 0.1) 60%,
          transparent 100%
        );
      transition: background 0.4s ease;
    }
    .domaine-card:hover .domaine-card__overlay {
      background:
        linear-gradient(
          to top,
          rgba(0, 0, 0, 0.88) 0%,
          rgba(0, 0, 0, 0.55) 40%,
          rgba(0, 0, 0, 0.15) 65%,
          transparent 100%
        );
    }

    /* Contenu texte - ancré en bas, sur l'image */
    .domaine-card__body {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .domaine-card__title {
      font-family: var(--font-display);
      font-size: clamp(1.1rem, 1.8vw, 1.35rem);
      font-weight: 600;
      color: #fff;
      line-height: 1.2;
      margin: 0;
    }

    .domaine-card__link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--secondary-light);
      width: fit-content;
      transition: gap 0.25s ease;
    }
    .domaine-card:hover .domaine-card__link { gap: 10px; }
    .domaine-card__link svg { width: 13px; height: 13px; flex-shrink: 0; }
    /* Toute la carte est cliquable : un lien invisible recouvre l'ensemble de
       la carte (image comprise) et passe au-dessus de tous les calques. */
    .domaine-card__cover {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: block;
    }
    .domaine-card__cover:focus-visible {
      outline: 3px solid var(--secondary);
      outline-offset: -3px;
    }

    @media (min-width: 640px) {
      .domaines__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
      .domaine-card { aspect-ratio: 3 / 4; }
      .domaine-card__body { padding: 2rem 1.75rem; }
    }
    @media (min-width: 1024px) {
      .domaines__grid { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
      .domaine-card { aspect-ratio: unset; height: 320px; }
      .domaine-card__body { padding: 1rem 1rem; }
      .domaine-card__title { font-size: clamp(0.85rem, 1vw, 1rem); }
    }
    /* Écrans peu hauts (ex. laptop 1280×800) quelle que soit la largeur :
       image hero un peu plus courte pour dégager la bande verte sous le hero.
       On reste au-dessus de la hauteur du bloc de texte du slider (sinon le
       texte déborde par le HAUT de l'image, car il est ancré en bas). */
    @media (min-width: 1024px) and (max-height: 850px) {
      .hero__media { height: clamp(460px, 62vh, 560px); }
    }

    /* Petits laptops : ajustements layout pour cette bande.
       Les grands écrans (>1300px) gardent le rendu plein. */
    @media (min-width: 1024px) and (max-width: 1300px) {
      /* Image hero un peu moins haute sur petit laptop pour laisser voir la
         bande verte, sans passer sous la hauteur du texte du slider. */
      .hero__media { height: clamp(480px, 52vw, 560px); }
      /* Cartes domaines moins hautes sur laptop (image en fond, cf. aspect/height). */
      .domaine-card { height: 240px; }
      /* Articles : 3 colonnes au lieu de 4 (trop serré sur laptop, titres
         sur 4 lignes). On masque le 4e article pour garder une ligne nette
         de 3 ; il reste visible sur grand écran (>1300px) et sur /actualites.
         Double classe (.news__grid.news__grid) pour battre la règle 4-col du
         bloc @media(min-width:960px) plus bas dans le fichier - sinon, à
         spécificité égale, c'est elle qui gagnait et laissait une colonne vide. */
      .news__grid.news__grid { grid-template-columns: repeat(3, 1fr); }
      .news__grid .news-card:nth-child(4) { display: none; }
    }

    /* =============================================
       TROIS PILIERS
       ============================================= */
    .pillars {
      background: var(--surface-low);
      padding: clamp(3rem, 5vw, 5rem) 2rem clamp(3.5rem, 5.5vw, 5.5rem);
      position: relative;
    }
    .pillars__inner {
      max-width: 1280px;
      margin: 0 auto;
    }
    .pillars__head {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      align-items: flex-start;
      margin-bottom: clamp(2rem, 3vw, 3rem);
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(0,102,44,0.10);
    }
    .pillars__eyebrow {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--secondary);
      display: inline-flex; align-items: center; gap: 0.65rem;
    }
    .pillars__eyebrow::before {
      content: ""; width: 28px; height: 1px;
      background: var(--secondary);
    }
    .pillars__title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.4vw, 2.2rem);
      font-weight: 600;
      color: var(--primary);
      line-height: 1.08;
      letter-spacing: -0.01em;
      margin: 0;
    }
    .pillars__title em {
      /* ENG-45 item E : titres uniformes, plus d'orange/italique */
      font-style: normal;
      font-weight: inherit;
      color: inherit;
    }
    .pillars__lead {
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--on-surface-muted);
      margin: 0;
      max-width: 52ch;
      align-self: end;
      padding-bottom: 0.25rem;
    }
    .pillars__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }
    .pillar {
      position: relative;
      background: var(--surface-lowest);
      border-radius: 1.4rem;
      padding: 1.75rem 1.75rem 1.75rem;
      display: flex; flex-direction: column;
      overflow: hidden;
      isolation: isolate;
      transition: transform .35s ease, box-shadow .35s ease;
    }
    .pillar:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 48px -16px rgba(0,102,44,0.18);
    }
    .pillar--dark {
      background: var(--primary);
      color: #fff;
    }
    .pillar--dark .pillar__num { color: var(--tertiary-fixed); }
    .pillar--dark .pillar__eyebrow { color: var(--tertiary-fixed); }
    .pillar--dark .pillar__title { color: #fff; }
    .pillar--dark .pillar__body { color: rgba(255,255,255,0.78); }
    .pillar--dark .pillar__list li { color: rgba(255,255,255,0.85); }
    .pillar--dark .pillar__list li::before { background: var(--tertiary-fixed); }
    .pillar--dark .pillar__divider { background: rgba(255,255,255,0.18); }
    .pillar--dark .pillar__cta { color: #fff; }
    .pillar--dark .pillar__cta::after { background: rgba(255,255,255,0.85); }
    .pillar--dark .pillar__cta:hover::after { background: var(--tertiary-fixed); }
    .pillar--warm {
      background: var(--surface-lowest);
      color: var(--on-surface);
    }
    .pillar--warm .pillar__num { color: var(--secondary); }
    .pillar--warm .pillar__eyebrow { color: var(--secondary); }
    .pillar--warm .pillar__cta { color: var(--primary); }
    .pillar--warm .pillar__cta::after { background: var(--primary); }
    .pillar--mono {
      background: var(--primary-mid);
      color: #fff;
    }
    .pillar--mono .pillar__num { color: rgba(255,255,255,0.55); }
    .pillar--mono .pillar__eyebrow { color: rgba(255,255,255,0.7); }
    .pillar--mono .pillar__title { color: #fff; }
    .pillar--mono .pillar__body { color: rgba(255,255,255,0.78); }
    .pillar--mono .pillar__list li { color: rgba(255,255,255,0.88); }
    .pillar--mono .pillar__list li::before { background: rgba(255,255,255,0.85); }
    .pillar--mono .pillar__divider { background: rgba(255,255,255,0.20); }
    .pillar--mono .pillar__cta { color: #fff; }
    .pillar--mono .pillar__cta::after { background: rgba(255,255,255,0.85); }

    /* Combination A test - amber + warm surface + burnt orange */
    .pillar--amber {
      background: #bb721f;
      color: #fff;
    }
    .pillar--amber .pillar__title { color: #fff; }
    .pillar--amber .pillar__body { color: rgba(255,255,255,0.82); }
    .pillar--amber .pillar__cta { color: #fff; }
    .pillar--amber .pillar__cta::after { background: rgba(255,255,255,0.85); }
    .pillar--amber .pillar__cta:hover::after { background: #f08a5c; }
    .pillar--amber:hover { box-shadow: 0 20px 48px -16px rgba(187,114,31,0.35); }

    .pillar--rust {
      background: #b95510;
      color: #fff;
    }
    .pillar--rust .pillar__title { color: #fff; }
    .pillar--rust .pillar__body { color: rgba(255,255,255,0.82); }
    .pillar--rust .pillar__cta { color: #fff; }
    .pillar--rust .pillar__cta::after { background: rgba(255,255,255,0.85); }
    .pillar--rust .pillar__cta:hover::after { background: #f08a5c; }
    .pillar--rust:hover { box-shadow: 0 20px 48px -16px rgba(185,85,16,0.35); }

    .pillar__top {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.75rem;
    }
    .pillar__num {
      font-family: var(--font-display);
      font-size: 3.4rem;
      font-weight: 400;
      font-style: italic;
      line-height: 0.85;
      color: var(--primary-pale);
      letter-spacing: -0.02em;
    }
    .pillar__icon {
      width: 44px; height: 44px;
      border-radius: 999px;
      border: 1px solid currentColor;
      opacity: 0.45;
      display: grid; place-items: center;
      flex-shrink: 0;
      margin-top: 0.65rem;
    }
    .pillar__icon svg { width: 18px; height: 18px; }
    .pillar__eyebrow {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--secondary);
      margin-bottom: 0.65rem;
    }
    .pillar__title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--primary);
      line-height: 1.15;
      margin: 0 0 0.85rem;
      letter-spacing: -0.005em;
    }
    .pillar__body {
      font-size: 0.88rem;
      line-height: 1.6;
      color: var(--on-surface-muted);
      margin: 0 0 1.5rem;
    }
    .pillar__divider {
      height: 1px;
      background: rgba(0,102,44,0.10);
      margin: 0 0 1.25rem;
    }
    .pillar__list {
      list-style: none; padding: 0; margin: 0 0 2rem;
      display: flex; flex-direction: column; gap: 0.65rem;
    }
    .pillar__list li {
      font-size: 0.86rem;
      line-height: 1.5;
      color: var(--on-surface);
      padding-left: 1.1rem;
      position: relative;
    }
    .pillar__list li::before {
      content: "";
      position: absolute;
      left: 0; top: 0.55rem;
      width: 5px; height: 5px;
      background: var(--primary);
      border-radius: 50%;
      transform: rotate(45deg);
    }
    .pillar__cta {
      margin-top: auto;
      align-self: flex-start;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary);
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding-bottom: 0.5rem;
      position: relative;
    }
    .pillar__cta::after {
      content: "";
      position: absolute;
      left: 0; bottom: 0;
      width: 100%; height: 1px;
      background: var(--primary);
      transform-origin: left;
      transition: transform .35s ease;
    }
    .pillar__cta:hover::after { transform: scaleX(0.5); }
    .pillar__cta .arr { transition: transform .25s ease; }
    .pillar__cta:hover .arr { transform: translateX(4px); }

    /* =============================================
       MISSION BLOCK - Dark green, quote + cards
       ============================================= */
    .mission-block {
      position: relative;
      background: var(--primary);
      color: #fff;
      padding: clamp(3.5rem, 6vw, 5.5rem) var(--home-gutter);
      overflow: hidden;
    }

    .mission-block::before { display: none; }

    .mission-block__inner {
      position: relative;
      z-index: 1;
      max-width: var(--home-max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: center;
    }

    /* Left col - quote */
    .mission-block__left {
      position: relative;
      display: flex;
      flex-direction: column;
    }

    /* Order: motto on top, quote below, buttons last. */
    .mission-block__motto   { order: 1; }
    .mission-block__quote   { order: 2; }
    .mission-block__actions { order: 3; }

    .mission-block__big-quote { display: none; }

    .mission-block__quote {
      font-family: var(--font-display);
      font-size: clamp(1.05rem, 1.6vw, 1.35rem);
      font-style: italic;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 0;
    }

    /* Lead motto - three verbs on one line, amber → fading-white
       (same colour idea as the QSN hero motto, but self-contained so it
       isn't affected by the shared .qsn-hero__motto-list layout rules). */
    .mission-block__motto {
      list-style: none;
      padding: 0;
      margin: 0 0 1.25rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0.3rem 0.6rem;
    }
    .mission-block__motto li {
      font-family: var(--font-display);
      font-style: normal;
      font-weight: 500;
      font-size: 1.5rem;
      line-height: 1.05;
      color: #fff;
    }
    @media (max-width: 1100px) {
      .mission-block__motto li { font-size: clamp(1.4rem, 5vw, 2rem); }
    }

    .mission-block__actions {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      margin-top: 1.25rem;
      flex-wrap: wrap;
    }

    .mission-block__secondary {
      color: rgba(255,255,255,0.65);
      font-size: 0.82rem;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.18s;
    }
    .mission-block__secondary:hover { color: #fff; }

    /* Colonne de droite (cartes) retirée - voir ENG-46 : le bandeau vert est
       désormais une seule colonne pleine largeur (3 verbes + citation + boutons
       sur une longue ligne). */

    /* =============================================
       NEWS - Staggered editorial cards
       ============================================= */
    .news {
      padding: clamp(3.5rem, 6vw, 5.5rem) var(--home-gutter);
      background: var(--surface-low);
    }

    .news__header {
      max-width: var(--home-max);
      margin: 0 auto 1.75rem;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem 1.5rem;
      /* Quand titre + bouton ne tiennent plus côte à côte, le bouton passe sous
         le titre au lieu d'écraser le titre (qui se mettait à wrapper sur 3
         lignes serrées et "se battait" avec le bouton pour la place). */
      flex-wrap: wrap;
    }

    .news__header__left {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      /* Le bloc titre prend l'espace disponible en priorité et garde une largeur
         minimale confortable → le titre ne se fait plus comprimer. */
      flex: 1 1 16rem;
    }

    .news__header .eyebrow { color: var(--secondary); }

    .news__header h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.4vw, 2.2rem);
      font-weight: 600;
      color: var(--primary);
      letter-spacing: -0.02em;
      margin: 0;
    }

    .news__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      max-width: var(--home-max);
      margin: 0 auto;
    }

    .btn--news {
      padding: 0.6rem 1.3rem;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-radius: 0.4rem;
      border: none;
      background: var(--primary);
      color: #fff;
      transition: background 0.2s, transform 0.2s;
      /* Le label tient sur une seule ligne : sinon, dans l'en-tête flex resserré
         sur mobile, "Voir tous les articles" passe sur 2 lignes et le bouton
         paraît épais. flex-shrink:0 l'empêche d'être comprimé. */
      white-space: nowrap;
      flex-shrink: 0;
    }
    .btn--news:hover {
      background: var(--primary-mid);
      transform: translateY(-2px);
    }

    .news-card {
      display: flex;
      flex-direction: column;
      background: var(--surface-lowest);
      border-radius: 1.25rem;
      overflow: hidden;
      transition: transform 0.4s var(--ease-out);
    }

    /* Pas de déplacement de la carte au survol : seul le léger zoom de l'image
       (voir .news-card:hover .news-card__img img) suffit. */

    .news-card__img {
      height: 220px;
      overflow: hidden;
    }
    .news-card__img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Même zoom que les cartes Domaines (durée/courbe identiques) pour un
         survol cohérent entre les deux sections. */
      transition: transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
    }
    .news-card:hover .news-card__img img { transform: scale(1.06); }

    .news-card__body { padding: 2rem; display: flex; flex-direction: column; flex: 1; }

    .news-card__topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.65rem;
    }

    .news-card__date {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--secondary);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .news-card__access {
      padding: 0.25rem 0.65rem;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: #006832;
      color: #fff;
    }
    .news-card__access--membre {
      background: #b95510;
      color: #fff;
    }

    .news-card__title {
      font-size: 1.15rem;
      color: var(--primary);
      margin-bottom: 0.5rem;
      line-height: 1.3;
    }

    .news-card__excerpt {
      font-size: 0.88rem;
      color: var(--on-surface-muted);
      line-height: 1.65;
      margin-bottom: 1.2rem;
      flex: 1;
    }

    .news-card__link {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--primary);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: gap 0.3s ease;
    }
    .news-card__link:hover { gap: 12px; }
    .news-card__link svg { width: 14px; height: 14px; }

    /* =============================================
       CONTENT HUB - Themes, tags, article detail
       ============================================= */
    .content-hub {
      padding: 5rem var(--container-gutter);
      background: var(--surface-low);
    }

    .content-hub__inner {
      max-width: var(--container-max);
      margin: 0 auto;
    }

    .content-hub__top {
      max-width: 760px;
      margin-bottom: 2rem;
    }

    .content-hub__top .eyebrow {
      color: var(--secondary);
      margin-bottom: 0.7rem;
    }

    .content-hub__top h2 {
      font-size: clamp(1.9rem, 4vw, 3rem);
      color: var(--primary);
      letter-spacing: -0.02em;
      margin-bottom: 0.9rem;
    }

    .content-hub__intro {
      font-size: 0.98rem;
      color: var(--on-surface-muted);
      max-width: 60ch;
    }

    .content-hub__search-shell {
      background: var(--surface-lowest);
      border-radius: 1.5rem;
      padding: 1.5rem;
      box-shadow: 0 14px 34px rgba(29, 28, 23, 0.06);
      margin-bottom: 1.5rem;
    }

    .content-hub__search-label {
      display: block;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--secondary);
      margin-bottom: 0.75rem;
    }

    .content-hub__search-row {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    .content-hub__search-input {
      width: 100%;
      padding: 1rem 1.25rem;
      border: 1px solid var(--surface-high);
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: 0.95rem;
      background: var(--surface);
      color: var(--on-surface);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .content-hub__search-input:focus {
      border-color: var(--primary-pale);
      box-shadow: 0 0 0 4px rgba(152, 194, 123, 0.18);
    }

    .content-hub__search-note {
      font-size: 0.82rem;
      color: var(--on-surface-muted);
      margin-top: 0.85rem;
    }

    .content-hub__theme-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1rem;
    }

    .content-hub__theme-chip,
    .content-hub__tag,
    .taxonomy-link,
    .content-hub__clear,
    .content-hub__back {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      border-radius: 999px;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .content-hub__theme-chip {
      padding: 0.65rem 1rem;
      background: var(--surface);
      border: 1px solid var(--surface-high);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--primary);
    }

    .content-hub__theme-chip:hover,
    .content-hub__theme-chip.is-active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      transform: translateY(-1px);
    }

    .content-hub__layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .content-hub__sidebar,
    .article-view {
      background: var(--surface-lowest);
      border-radius: 1.5rem;
      box-shadow: 0 14px 34px rgba(29, 28, 23, 0.06);
    }

    .content-hub__main-panel {
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .content-hub__sidebar {
      padding: 1.5rem;
      height: fit-content;
    }

    .content-hub__context-label {
      display: block;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--secondary);
      margin-bottom: 0.65rem;
    }

    .content-hub__sidebar h3 {
      font-size: 1.35rem;
      color: var(--primary);
      margin-bottom: 0.7rem;
    }

    .content-hub__sidebar p {
      font-size: 0.88rem;
      color: var(--on-surface-muted);
      line-height: 1.7;
    }

    .content-hub__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin: 1rem 0 1.25rem;
    }

    .taxonomy-link {
      display: inline-flex;
      align-self: flex-start;
      width: auto;
      padding: 0.42rem 0.78rem;
      border: 1px solid var(--surface-high);
      background: var(--surface);
      font-size: 0.74rem;
      font-weight: 700;
      color: var(--primary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .taxonomy-link:hover,
    .taxonomy-link.is-active {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      transform: translateY(-1px);
    }

    .taxonomy-link--sub {
      color: var(--secondary);
      border-color: rgba(135, 81, 52, 0.16);
      background: rgba(135, 81, 52, 0.06);
    }

    .taxonomy-link--tag {
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: var(--primary-mid);
      background: var(--surface-low);
    }

    /* Croix de retrait dans les pastilles de filtre actif (#active-badges) :
       discrète, elle signale que la pastille est cliquable pour lever le filtre. */
    .content-hub__meta .taxonomy-link > span {
      font-weight: 400;
      font-size: 1em;
      line-height: 1;
      opacity: 0.7;
    }

    .content-hub__filters {
      border-top: 1px solid var(--surface-high);
      padding-top: 1.1rem;
    }

    .content-hub__filter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.85rem;
    }

    .content-hub__filter-title {
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary-light);
    }

    .content-hub__clear,
    .content-hub__back {
      border: 1px solid transparent;
      background: rgba(23, 57, 1, 0.08);
      color: var(--primary);
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 700;
      padding: 0.45rem 0.8rem;
      cursor: pointer;
    }

    .content-hub__clear:hover,
    .content-hub__back:hover {
      background: rgba(23, 57, 1, 0.14);
      transform: translateY(-1px);
    }

    .content-hub__tag-list,
    .hub-card__tags,
    .article-view__tags,
    .article-view__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .content-hub__tag {
      justify-content: space-between;
      width: 100%;
      padding: 0.65rem 0.9rem;
      border: 1px solid var(--surface-high);
      background: var(--surface);
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--on-surface);
    }

    .content-hub__tag:hover,
    .content-hub__tag.is-active {
      border-color: var(--primary-pale);
      background: rgba(152, 194, 123, 0.16);
      color: var(--primary);
      transform: translateY(-1px);
    }

    .content-hub__tag-count {
      font-size: 0.72rem;
      color: var(--on-surface-muted);
    }

    .content-hub__main-panel {
      padding: 1.5rem;
    }

    .content-hub__toolbar {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      margin-bottom: 1.25rem;
    }

    .content-hub__breadcrumbs,
    .article-view__breadcrumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      font-size: 0.76rem;
      color: var(--on-surface-muted);
    }

    .content-hub__breadcrumbs a,
    .article-view__breadcrumbs a {
      color: var(--primary-mid);
      font-weight: 600;
    }

    .content-hub__count {
      font-size: 0.88rem;
      color: var(--on-surface-muted);
    }

    .content-hub__results {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .hub-card {
      display: grid;
      grid-template-columns: 1fr;
      background: var(--surface-lowest);
      border-radius: 1.25rem;
      overflow: hidden;
      min-height: 100%;
    }

    .hub-card__image {
      aspect-ratio: 16 / 10;
      min-height: 0;
      overflow: hidden;
      background: var(--surface-high);
    }

    .hub-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s var(--ease-out);
    }

    .hub-card:hover .hub-card__image img {
      transform: scale(1.04);
    }

    .hub-card__body {
      padding: 1.4rem;
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
    }

    .hub-card__topline {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.7rem;
      align-items: center;
    }

    .hub-card__date {
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--secondary);
    }

    .hub-card__access {
      padding: 0.25rem 0.6rem;
      border-radius: 999px;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      background: #006832;
      color: #fff;
    }
    .hub-card__access--membre {
      background: #b95510;
      color: #fff;
    }

    .hub-card__title {
      font-family: var(--font-display);
      font-size: 1.2rem;
      color: var(--primary);
      line-height: 1.25;
    }

    .hub-card__title a:hover {
      color: var(--primary-light);
    }

    .hub-card__excerpt {
      font-size: 0.9rem;
      color: var(--on-surface-muted);
      line-height: 1.7;
    }

    .hub-card__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--primary);
      margin-top: auto;
    }

    .hub-card__cta:hover {
      gap: 0.7rem;
    }

    .article-view {
      padding: 1.6rem;
    }

    .article-view__hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .article-view__cover {
      border-radius: 1.3rem;
      overflow: hidden;
      min-height: 260px;
    }

    .article-view__cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .article-view__eyebrow {
      color: var(--secondary);
      margin-bottom: 0.8rem;
      display: inline-block;
    }

    .article-view__title {
      font-size: clamp(1.8rem, 4vw, 3rem);
      color: var(--primary);
      letter-spacing: -0.03em;
      margin-bottom: 1rem;
    }

    .article-view__lead,
    .article-view__body p,
    .article-view__related-text {
      font-size: 0.96rem;
      color: var(--on-surface-muted);
      line-height: 1.8;
    }

    .article-view__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      margin: 1rem 0 1.25rem;
    }

    .article-view__body {
      margin-top: 1.5rem;
      display: grid;
      gap: 1rem;
    }

    .article-view__related {
      margin-top: 2rem;
      border-top: 1px solid var(--surface-high);
      padding-top: 1.5rem;
    }

    .article-view__related h4 {
      font-size: 1.15rem;
      color: var(--primary);
      margin-bottom: 0.45rem;
    }

    .article-view__related-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.9rem;
      margin-top: 1rem;
    }

    .article-view__related-card {
      padding: 1rem;
      border-radius: 1rem;
      background: var(--surface);
    }

    .article-view__related-card h5 {
      font-size: 1rem;
      color: var(--primary);
      margin-bottom: 0.35rem;
    }

    .content-hub__empty {
      padding: 2.2rem 1.4rem;
      border-radius: 1.2rem;
      background: var(--surface);
      text-align: center;
      color: var(--on-surface-muted);
    }

    /* =============================================
       ACTUALITÉS - refonte (scopée à .content-hub--actualites)
       En-tête compact, recherche affinée, thèmes une ligne,
       dropdown tags, grille 3 colonnes, badge thème sur photo.
       ============================================= */
    /* ENG-61 - le titre et le fil d'Ariane vivent désormais dans la bande verte
       `.qsn-hero` placée au-dessus. C'est elle qui dégage la navbar fixe (via sa
       marge --hero-nav-clear) : le hub n'a plus besoin de son offset de 65/137px,
       seulement d'un espacement normal sous la bande. */
    .content-hub--actualites {
      padding-top: 2.5rem;
    }

    /* ── Barre de recherche/filtres INTÉGRÉE à la bande verte (ENG-61) ──────
       Recherche, chips de thèmes et dropdown tags vivent dans `.qsn-hero`.
       Traitement « verre » : blanc translucide sur le vert, l'état actif passe
       en blanc opaque avec texte vert (combo A : primary #00662c / blanc). */
    .actu-hero__bar {
      position: relative;
      z-index: 2;                    /* au-dessus de la texture ::before du hero */
      width: 100%;
      max-width: var(--container-max);
      margin: 2rem auto 0;
    }

    .actu-hero__row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .actu-hero__search {
      position: relative;
      flex: 1 1 22rem;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.7rem 1.1rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.13);
      border: 1px solid rgba(255, 255, 255, 0.26);
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .actu-hero__search:focus-within {
      background: #fff;
      border-color: #fff;
    }

    .actu-hero__search-icon {
      flex: 0 0 auto;
      color: rgba(255, 255, 255, 0.75);
      transition: color 0.2s ease;
    }

    .actu-hero__search:focus-within .actu-hero__search-icon { color: var(--primary); }

    .actu-hero__search-input {
      flex: 1 1 auto;
      min-width: 0;
      background: none;
      border: none;
      outline: none;
      font-family: var(--font-body);
      font-size: 0.9rem;
      color: #fff;
    }

    .actu-hero__search-input::placeholder { color: rgba(255, 255, 255, 0.6); }
    .actu-hero__search:focus-within .actu-hero__search-input { color: var(--on-surface); }
    .actu-hero__search:focus-within .actu-hero__search-input::placeholder { color: var(--on-surface-muted); }
    /* Croix native du type=search : invisible sur fond vert, on la neutralise. */
    .actu-hero__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

    /* Thèmes : une rangée par défaut, bouton « Voir tous » pour déplier */
    .actu-hero__chips {
      margin-top: 0.85rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      overflow: hidden;
      max-height: 2.4rem;            /* ~ une seule rangée de chips */
      transition: max-height 0.28s ease;
    }

    .actu-hero__chips.is-expanded {
      max-height: 40rem;             /* assez pour toutes les rangées */
    }

    .actu-hero__chips .content-hub__theme-chip {
      flex: 0 0 auto;
      white-space: nowrap;
      padding: 0.42rem 0.85rem;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.11);
      border: 1px solid rgba(255, 255, 255, 0.24);
      color: rgba(255, 255, 255, 0.88);
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .actu-hero__chips .content-hub__theme-chip:hover {
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
    }

    .actu-hero__chips .content-hub__theme-chip.is-active {
      background: #fff;
      border-color: #fff;
      color: var(--primary);
    }

    .actu-hero__toggle {
      color: rgba(255, 255, 255, 0.82);
    }

    .actu-hero__toggle:hover { color: #fff; }

    /* Le bloc `.hub-filter--hero` (variante du dropdown tags sur fond vert) est
       plus bas dans le fichier, APRÈS les règles de base `.hub-filter` : à
       spécificité égale (3 classes de part et d'autre pour l'état actif), c'est
       l'ordre source qui tranche. */

    .content-hub__themes-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.6rem;
      padding: 0.2rem 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--primary);
    }

    .content-hub__themes-toggle[hidden] { display: none; }
    .content-hub__themes-toggle:hover { text-decoration: underline; }

    .content-hub__themes-toggle-chevron { transition: transform 0.2s ease; }

    .content-hub__themes-toggle[aria-expanded="true"] .content-hub__themes-toggle-chevron {
      transform: rotate(180deg);
    }

    /* Toolbar : compteur/fil à gauche, dropdown tags à droite */
    .content-hub--actualites .content-hub__main-panel {
      padding: 0;
    }

    .content-hub--actualites .content-hub__toolbar {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .content-hub--actualites .content-hub__toolbar-left {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .content-hub--actualites .content-hub__toolbar-left .content-hub__meta {
      margin: 0;
    }

    .content-hub__reset {
      align-self: flex-start;
      margin-top: 0.15rem;
    }

    /* Dropdown de filtre par tags (style e-commerce) */
    .hub-filter {
      position: relative;
    }

    .hub-filter__trigger {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      list-style: none;
      cursor: pointer;
      padding: 0.6rem 1rem;
      border-radius: 999px;
      border: 1px solid var(--surface-high);
      background: var(--surface-lowest);
      font-family: var(--font-body);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--primary);
      user-select: none;
      white-space: nowrap;
    }

    .hub-filter__trigger::-webkit-details-marker { display: none; }
    .hub-filter__trigger:hover { border-color: var(--primary-pale); }

    .hub-filter.is-active .hub-filter__trigger {
      border-color: var(--primary);
      background: rgba(152, 194, 123, 0.16);
    }

    .hub-filter__badge {
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-size: 0.66rem;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .hub-filter__chevron {
      transition: transform 0.2s ease;
      margin-left: 0.1rem;
    }

    .hub-filter[open] .hub-filter__chevron { transform: rotate(180deg); }

    .hub-filter__panel {
      position: absolute;
      top: calc(100% + 0.5rem);
      right: 0;
      z-index: 30;
      width: min(320px, 82vw);
      max-height: 360px;
      overflow-y: auto;
      background: var(--surface-lowest);
      border: 1px solid var(--surface-high);
      border-radius: 1rem;
      box-shadow: 0 18px 40px rgba(29, 28, 23, 0.14);
      padding: 1rem;
    }

    .hub-filter__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    /* Dropdown tags - variante « sur fond vert » (ENG-61, page Actualités).
       DOIT rester après les règles `.hub-filter` ci-dessus : pour l'état actif,
       `.hub-filter--hero.is-active .hub-filter__trigger` et
       `.hub-filter.is-active .hub-filter__trigger` pèsent le même poids
       (3 classes) - seul l'ordre source départage. Le panneau reste blanc,
       il s'ouvre par-dessus le contenu clair sous la bande verte. */
    .hub-filter--hero { flex: 0 0 auto; }

    .hub-filter--hero .hub-filter__trigger {
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.26);
      color: #fff;
      padding: 0.68rem 1.1rem;
    }

    .hub-filter--hero .hub-filter__trigger:hover {
      background: rgba(255, 255, 255, 0.22);
      border-color: rgba(255, 255, 255, 0.4);
    }

    .hub-filter--hero.is-active .hub-filter__trigger {
      background: #fff;
      border-color: #fff;
      color: var(--primary);
    }

    /* Mobile : recherche et dropdown empilés pleine largeur, panneau tags calé
       à gauche puisque le trigger occupe toute la ligne. */
    @media (max-width: 640px) {
      .actu-hero__bar { margin-top: 1.5rem; }
      .actu-hero__search { flex: 1 1 100%; }
      /* ENG-274 : laisser tous les chips de thèmes visibles sur mobile */
      .actu-hero__chips { max-height: none; overflow: visible; }
      .hub-filter--hero { flex: 1 1 100%; }
      .hub-filter--hero .hub-filter__trigger { width: 100%; justify-content: flex-start; }
      .hub-filter--hero .hub-filter__label { flex: 1 1 auto; }
      .hub-filter--hero .hub-filter__panel { right: auto; left: 0; }
    }

    /* Badge « thème principal » posé sur la photo (haut-gauche) */
    .content-hub--actualites .hub-card { position: relative; }

    /* Images de hauteur identique → dates alignées d'une carte à l'autre */
    .content-hub--actualites .hub-card {
      grid-template-rows: auto 1fr;
    }

    .hub-card__theme {
      position: absolute;
      top: 0.7rem;
      left: 0.7rem;
      z-index: 2;
      max-width: calc(100% - 1.4rem);
      padding: 0.32rem 0.7rem;
      border: none;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.94);
      color: var(--primary);
      font-family: var(--font-body);
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(29, 28, 23, 0.18);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .hub-card__theme:hover {
      background: var(--primary);
      color: #fff;
    }

    /* Cartes un peu plus compactes (3 par ligne) */
    .content-hub--actualites .hub-card__body {
      padding: 1.1rem;
      gap: 0.65rem;
    }

    .content-hub--actualites .hub-card__title {
      font-size: 1.05rem;
    }

    .content-hub--actualites .hub-card__excerpt {
      font-size: 0.86rem;
      line-height: 1.6;
    }

    @media (min-width: 960px) {
      .content-hub--actualites .content-hub__results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    /* =============================================
       NEWSLETTER - Warm tertiary band (v2 style)
       ============================================= */
    .newsletter {
      background: var(--tertiary-fixed);
      padding: 4rem 1.5rem;
      text-align: center;
      color: var(--on-tertiary-fixed);
    }

    .newsletter__title {
      font-size: clamp(1.4rem, 3vw, 1.9rem);
      margin-bottom: 0.75rem;
      color: var(--tertiary);
    }

    .newsletter__text {
      font-size: 1rem;
      font-weight: 400;
      opacity: 0.75;
      margin-bottom: 2rem;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

    .newsletter__form {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      max-width: 480px;
      margin: 0 auto;
    }

    .newsletter__input {
      flex: 1;
      padding: 1rem 1.5rem;
      font-family: var(--font-body);
      font-size: 0.95rem;
      border: none;
      border-radius: 0.75rem;
      background: var(--surface-high);
      color: var(--on-surface);
      outline: none;
      transition: background 0.25s ease;
    }

    .newsletter__input::placeholder {
      color: var(--on-surface-muted);
    }

    .newsletter__input:focus {
      background: var(--surface-highest);
      box-shadow: inset 0 -2px 0 var(--outline-ghost);
    }

    .newsletter__btn {
      padding: 1rem 2rem;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 600;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 0.75rem;
      cursor: pointer;
      transition: background 0.25s ease, transform 0.15s ease;
    }

    .newsletter__btn:hover {
      background: var(--primary-mid);
      transform: translateY(-1px);
    }

    /* =============================================
       FOOTER - Deep forest green (v2 style)
       ============================================= */
    .footer {
      position: relative;
      background: var(--primary);
      color: rgba(255, 255, 255, 0.92);
      padding: 5rem 2rem 2.25rem;
    }
    .footer::before {
      content: "";
      position: absolute; top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent 0%, var(--tertiary-fixed) 50%, transparent 100%);
      opacity: 0.4;
    }

    .footer__inner {
      max-width: 1360px;
      margin: 0 auto;
    }

    .footer__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      padding-bottom: 2.5rem;
    }

    .footer__logo {
      display: block;
      height: auto;
      width: 185px;
      max-width: 100%;
      margin-bottom: 1.5rem;
    }

    /* Titres de colonnes : blancs et plus lisibles, alignés sur « Restez
       informé » (1rem). Le trait orange et la couleur orange ont été retirés.
       Interlettrage réduit de 0.18em à 0.08em : à 1rem, l'ancien écartement
       faisait passer « CONTACT & ADHÉSION » sur deux lignes dans une colonne. */
    .footer__heading {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      margin: 0 0 1.5rem;
    }

    .footer__desc {
      font-family: var(--font-display);
      font-size: 1rem;
      line-height: 1.65;
      color: rgba(255, 255, 255, 0.72);
      max-width: 340px;
      margin: 0 0 1.5rem;
    }

    .footer__links {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    .footer__link {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.92);
      text-decoration: none;
      transition: color 0.2s ease;
      width: fit-content;
    }
    .footer__link:hover { color: #fff; }

    .footer__contact p {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.92);
      margin: 0 0 0.4rem;
      line-height: 1.55;
    }
    .footer__contact p:first-child {
      font-family: var(--font-display);
      font-size: 0.95rem;
      color: #fff;
      margin-bottom: 0.25rem;
    }

    .footer__social {
      display: flex;
      gap: 0.6rem;
      margin-top: 1.75rem;
    }

    .footer__social-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.10);
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }
    .footer__social-link:hover {
      background: var(--tertiary-fixed);
      border-color: var(--tertiary-fixed);
      transform: translateY(-2px);
    }
    .footer__social-link:hover svg { fill: var(--on-tertiary-fixed); }
    .footer__social-link svg {
      width: 16px;
      height: 16px;
      fill: rgba(255, 255, 255, 0.85);
      transition: fill 0.25s ease;
    }

    .footer__newsletter {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding: 1.75rem 0;
      border-top: 1px solid rgba(255,255,255,0.10);
      margin-bottom: 1.75rem;
    }
    .footer__newsletter-heading {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      display: block;
      margin-bottom: 0.3rem;
    }
    .footer__newsletter-sub {
      font-size: 0.82rem;
      color: rgba(255,255,255,0.85);
      margin: 0;
      line-height: 1.5;
    }
    .footer__newsletter-form {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .footer__newsletter-input {
      flex: 1 1 180px;
      max-width: 320px;
      padding: 0.55rem 0.9rem;
      font-family: var(--font-body);
      font-size: 0.82rem;
      border-radius: 0.4rem;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08);
      color: #fff;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .footer__newsletter-input::placeholder { color: rgba(255,255,255,0.4); }
    .footer__newsletter-input:focus {
      border-color: var(--secondary-light);
      background: rgba(255,255,255,0.12);
    }
    .footer__newsletter-btn {
      padding: 0.55rem 1.25rem;
      font-family: var(--font-body);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      border: none;
      border-radius: 0.5rem;
      background: var(--secondary-light);
      color: #fff;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.2s ease;
    }
    .footer__newsletter-btn:hover { opacity: 0.85; }
    .footer__newsletter-form { justify-content: flex-start; }

    /* NEWSLETTER - pop-up d'inscription (ENG-115/116/117) */
    .nl-modal {
      /* margin auto : le reset global écrase le centrage natif du <dialog>. */
      margin: auto;
      border: 0;
      border-radius: 1.35rem;
      padding: 0;
      width: min(92vw, 720px);
      background: var(--surface, #faf7f2);
      box-shadow: 0 24px 60px rgba(23, 57, 1, 0.25);
    }
    .nl-modal::backdrop { background: rgba(23, 34, 18, 0.55); }
    .nl-modal__form { position: relative; padding: 2rem 1.9rem 1.7rem; }
    .nl-modal__close {
      position: absolute;
      top: 0.9rem;
      right: 0.9rem;
      padding: 0.3rem;
      border: 0;
      background: none;
      line-height: 1;
      color: var(--on-surface-muted, #6f6a61);
      cursor: pointer;
    }
    .nl-modal__close:hover { color: var(--on-surface, #1d1c17); }
    .nl-modal__title { margin: 0 0 0.35rem; font-size: 1.45rem; color: var(--primary, #00662c); }
    .nl-modal__sub { margin: 0 0 1.4rem; font-size: 0.95rem; color: var(--on-surface-muted, #6f6a61); }
    /* Grille de 4 colonnes : l'adresse belge (rue / n° / boîte, puis CP /
       localité) tient sur 2 lignes au lieu de 3, et le formulaire gagne en
       largeur ce qu'il perd en hauteur. Un champ vaut une demi-largeur. */
    .nl-modal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
    /* min-width: 0 - sans ça, la largeur intrinsèque des <input> empêche les
       colonnes de descendre sous ~180px et les spans perdent leurs proportions. */
    .nl-field { display: flex; flex-direction: column; gap: 0.3rem; grid-column: span 2; min-width: 0; }
    /* display:flex (feuille auteur) écrase le [hidden] de la feuille UA -
       il faut réaffirmer la sémantique hidden au niveau auteur. */
    .nl-field[hidden] { display: none; }
    .nl-field--full { grid-column: 1 / -1; }
    .nl-field--quarter { grid-column: span 1; }
    .nl-field--three-quarters { grid-column: span 3; }
    .nl-field label { font-size: 0.8rem; font-weight: 600; color: var(--on-surface, #1d1c17); }
    /* margin-top: auto - le champ Téléphone porte un hint sous son label ;
       sans ça son input descendrait plus bas que celui de l'Email, à côté. */
    .nl-field input,
    .nl-field select { margin-top: auto; }
    .nl-field input {
      min-width: 0;
      padding: 0.6rem 0.75rem;
      font-family: var(--font-body);
      font-size: 0.92rem;
      border: 1px solid rgba(23, 57, 1, 0.18);
      border-radius: 0.6rem;
      background: #fff;
      color: var(--on-surface, #1d1c17);
    }
    .nl-field input:focus { outline: 2px solid var(--primary, #00662c); outline-offset: 1px; }
    .nl-field select {
      min-width: 0;
      padding: 0.6rem 0.75rem;
      font-family: var(--font-body);
      font-size: 0.92rem;
      border: 1px solid rgba(23, 57, 1, 0.18);
      border-radius: 0.6rem;
      background: #fff;
      color: var(--on-surface, #1d1c17);
    }
    .nl-field select:focus { outline: 2px solid var(--primary, #00662c); outline-offset: 1px; }
    .nl-hint { font-size: 0.78rem; color: var(--on-surface-muted, #6f6a61); }
    .nl-statut { margin: 1.2rem 0 0; padding: 0; border: 0; }
    .nl-statut legend { margin-bottom: 0.5rem; padding: 0; font-size: 0.8rem; font-weight: 600; color: var(--on-surface, #1d1c17); }
    .nl-statut__options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem 0.9rem; }
    .nl-statut__option {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.92rem;
      color: var(--on-surface, #1d1c17);
      cursor: pointer;
    }
    .nl-statut__option input { accent-color: var(--primary, #00662c); }
    .nl-modal__actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
    /* Honeypot anti-spam : hors écran, jamais display:none (les bots filtrent). */
    .nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    /* Zone toujours dans le flux (hauteur réservée ≈ 2 lignes) : l'arrivée
       du message bascule la visibilité, jamais la hauteur - zéro layout shift. */
    .nl-modal__feedback {
      min-height: 3.3rem;
      margin: 1rem 0 0;
      padding: 0.7rem 0.9rem;
      border-radius: 0.6rem;
      font-size: 0.92rem;
      visibility: hidden;
    }
    .nl-modal__feedback--ok { visibility: visible; background: rgba(0, 102, 44, 0.12); color: var(--primary, #00662c); }
    .nl-modal__feedback--error { visibility: visible; background: rgba(176, 32, 32, 0.1); color: #b02020; }
    .nl-feedback { margin: 0.75rem auto 0; font-size: 0.85rem; text-align: center; }
    .nl-feedback--ok { color: #9fd7b4; }
    .nl-feedback--error { color: #f0b9b9; }
    /* Une seule bascule : les 4 colonnes tiennent jusqu'à ~560px de viewport
       (colonne ≈ 103px, assez pour « Numéro » et « Code postal »). En dessous,
       tout s'empile - les spans doivent être neutralisés, sinon `span 2` déborde. */
    @media (max-width: 560px) {
      .nl-modal__grid,
      .nl-statut__options { grid-template-columns: 1fr; }
      .nl-field,
      .nl-field--quarter,
      .nl-field--three-quarters,
      .nl-field--full { grid-column: 1 / -1; }
    }
    /* 320 px : 1,9rem de padding latéral mangeait un cinquième de la largeur. */
    @media (max-width: 400px) {
      .nl-modal__form { padding: 1.6rem 1.1rem 1.3rem; }
      .nl-modal__close { top: 0.6rem; right: 0.6rem; }
    }

    .footer__bottom {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      text-align: center;
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.7);
    }
    .footer__bottom p { margin: 0; }
    .footer__bottom a {
      color: rgba(255, 255, 255, 0.78);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    .footer__bottom a:hover { color: var(--tertiary-fixed); }

    /* =============================================
       RESPONSIVE - TABLET
       ============================================= */
    @media (min-width: 640px) {
      .bento__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
          "forets  image"
          "terres  espace";
      }
      .bento__card--forets  { grid-area: forets; }
      .bento__card--image   { grid-area: image; }
      .bento__card--terres  { grid-area: terres; }
      .bento__card--espace  { grid-area: espace; }
      .bento__header { padding-left: 0.5rem; }


      .news__grid { grid-template-columns: repeat(2, 1fr); }
      .content-hub__search-row { flex-direction: row; }
      .content-hub__search-row .content-hub__search-input { flex: 1; }
      .content-hub__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .article-view__related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

      .newsletter__form { flex-direction: row; }
      .newsletter__card { padding: 4rem 3rem; }

      /* Le pied de page est passé de 3 à 5 colonnes (ENG-191) : identité +
         colonnes de liens éditables + contact. À cette largeur on n'en tient
         que 2 de front ; le desktop passe à 5 plus bas. */
      .footer__grid { grid-template-columns: repeat(2, 1fr); }
      .footer__links--tight { margin-top: 1rem; }
      .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
    }

    /* =============================================
       RESPONSIVE - DESKTOP
       ============================================= */
    @media (min-width: 960px) {
      /* Pied de page 5 colonnes : identité (large) + 3 colonnes de liens + contact. */
      .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2rem; }

      /* Hide mobile row, show two-column grid */
      .nav__top { display: none; }

      .nav__grid {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1px auto;
        column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
        align-items: center;
      }

      /* Logo: spans all 3 rows (top row + divider + bottom row) */
      .nav__grid-logo {
        grid-column: 1;
        grid-row: 1 / 4;
        display: flex;
        align-items: center;
        padding: 1rem 0;
      }
      .nav__grid-logo img {
        height: clamp(56px, 5.5vw, 80px);
        width: auto;
      }

      /* Right column - Row 1: secondary links + search */
      .nav__grid-top {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: clamp(1rem, 1.8vw, 1.8rem);
        padding: 0.6rem 0;
      }

      .nav__grid-top .nav__search--top {
        display: flex;
      }

      .nav__grid-top .nav__linkedin {
        display: flex;
      }

      .nav__icons {
        display: flex;
        align-items: center;
        gap: 0.1rem;
        margin-left: auto;
      }

      /* Right column - Divider */
      .nav__grid-divider {
        grid-column: 2;
        grid-row: 2;
        height: 1px;
        background: var(--surface-high);
      }

      /* Right column - Row 2: main links + CTA buttons */
      .nav__grid-bottom {
        grid-column: 2;
        grid-row: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.7rem 0;
      }

      .nav__grid-bottom .nav__cta-wrap {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
      }

      .bento__grid {
        grid-template-columns: 1.2fr 0.8fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
          "forets  forets  image"
          "terres  espace  image";
      }
      .bento__card--image { min-height: 100%; }
      .bento__header { padding-left: 0.5rem; }

      .news__grid { grid-template-columns: repeat(4, 1fr); }
      .content-hub__layout { grid-template-columns: 320px minmax(0, 1fr); }
      .content-hub__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .article-view__hero { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
    }

    /* Mega-menu hidden on mobile */
    @media (max-width: 959px) {
      .mega { display: none !important; }
    }

    /* Mega-menu 2-col at narrow desktop */
    @media (min-width: 960px) and (max-width: 1100px) {
      .mega__grid--6 { grid-template-columns: repeat(2, 1fr); }
      .mega__inner { padding: 1.5rem; }
    }

    @media (max-width: 560px) {
      /* Slider sur mobile : le corps du message reste lisible sur la photo. */
      .hero__slide-body { font-size: clamp(1.5rem, 6vw, 2rem); max-width: 100%; }
    }

    @media (max-width: 1000px) {
      .pillars__head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
      .pillars__lead { padding-bottom: 0; }
      .pillars__grid { grid-template-columns: 1fr; gap: 1rem; }
      .pillar { padding: 2rem 1.75rem; }
    }

    /* =============================================
       PAGE PROMOUVOIR
       ============================================= */
    /* promo-hero inherits all base qsn-hero tokens - no overrides needed */

    /* ── Prose divider ───────────────────────────────────────────────────── */
    .promo-divider {
      border: none;
      border-top: 1px solid var(--surface-high);
      margin: 2rem 0;
    }

    /* ── Prix Fondation CTA ─────────────────────────────────────────────── */
    .promo-prix-cta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem 1.25rem;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .btn--prix {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 0.55rem;
      background: var(--primary);
      color: #fff;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.18s ease, transform 0.12s ease;
    }
    .btn--prix:hover { background: var(--primary-mid); }
    .btn--prix:active { transform: scale(0.97); }
    .btn--prix__icon { font-size: 1.15em; }
    .promo-prix-cta__deadline {
      font-size: 0.82rem;
      color: var(--on-surface-muted);
      font-style: italic;
    }

    /* ── Prix Modal ─────────────────────────────────────────────────────── */
    .prix-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
    .prix-modal[hidden] { display: none; }
    .prix-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); cursor: pointer; }
    .prix-modal__panel {
      position: relative;
      width: min(620px, 100%);
      max-height: 85vh;
      overflow-y: auto;
      background: var(--surface);
      border-radius: 1rem;
      padding: 2rem 2rem 1.5rem;
      box-shadow: 0 12px 48px rgba(0,0,0,0.2);
    }
    .prix-modal__close {
      position: absolute; top: 1rem; right: 1rem;
      background: none; border: none; cursor: pointer;
      color: var(--on-surface-muted);
      padding: 0.35rem;
      border-radius: 0.35rem;
      transition: background 0.15s ease;
    }
    .prix-modal__close:hover { background: var(--surface-low); color: var(--on-surface); }
    .prix-modal__header { text-align: center; margin-bottom: 1.25rem; }
    .prix-modal__icon { font-size: 2rem; display: block; margin-bottom: 0.35rem; }
    .prix-modal__title {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--primary);
      margin: 0;
    }
    .prix-modal__subtitle {
      font-size: 0.95rem;
      color: var(--on-surface-muted);
      margin: 0.2rem 0 0;
    }
    .prix-modal__body { font-size: 0.88rem; line-height: 1.6; color: var(--on-surface); }
    .prix-modal__body h3 {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--primary);
      margin: 1.15rem 0 0.35rem;
    }
    .prix-modal__body ul,
    .prix-modal__body ol { padding-left: 1.25rem; margin: 0.35rem 0 0.75rem; }
    .prix-modal__body li { margin-bottom: 0.25rem; }
    .prix-modal__body a { color: var(--primary); text-decoration: underline; }
    .prix-modal__note {
      font-size: 0.8rem;
      color: var(--on-surface-muted);
      font-style: italic;
      margin-top: 0.75rem;
    }
    .prix-modal__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--surface-high);
    }
    .btn--prix-dl {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.6rem 1.15rem;
      border-radius: 0.45rem;
      font-size: 0.82rem;
      font-weight: 600;
      text-decoration: none;
      background: var(--primary);
      color: #fff;
      border: 1.5px solid var(--primary);
      transition: background 0.15s ease;
    }
    .btn--prix-dl:hover { background: var(--primary-mid); }
    .btn--prix-dl--outline {
      background: transparent;
      color: var(--primary);
    }
    .btn--prix-dl--outline:hover { background: var(--primary); color: #fff; }
    .prix-modal__footer {
      margin-top: 1rem;
      padding-top: 0.75rem;
      text-align: center;
      font-size: 0.8rem;
      color: var(--on-surface-muted);
    }
    .prix-modal__footer a { color: var(--primary); }
    .prix-modal__footer strong { color: var(--on-surface); }

    @media (max-width: 500px) {
      .prix-modal__panel { padding: 1.5rem 1.25rem 1.25rem; }
      .prix-modal__title { font-size: 1.15rem; }
      .prix-modal__actions { flex-direction: column; }
      .btn--prix-dl { justify-content: center; }
    }

    .promo-agenda-link {
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* ── Initiatives rurales slider ── */
    .promo-slider {
      background: var(--surface-lowest);
      border-radius: 1.4rem;
      overflow: hidden;
      box-shadow: 0 1px 0 rgba(0,102,44,0.03), 0 24px 56px -28px rgba(0,102,44,0.18);
      border: 1px solid rgba(0,102,44,0.06);
      position: relative;
      margin-top: 2.5rem;
    }
    .promo-slider__track {
      display: flex;
      transition: transform .6s cubic-bezier(0.4, 0, 0.15, 1);
      will-change: transform;
    }
    .promo-slide {
      min-width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .promo-slide__img {
      position: relative;
      min-height: 420px;
      overflow: hidden;
    }
    .promo-slide__img img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .promo-slide__tag {
      position: absolute;
      top: 1.5rem; left: 1.5rem;
      display: inline-flex; align-items: center; gap: 0.35rem;
      padding: 0.45rem 0.85rem;
      border-radius: 999px;
      background: var(--secondary);
      font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: #fff;
      z-index: 1;
    }
    .promo-slide__content {
      padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
    }
    .promo-slide__counter {
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--secondary);
      display: inline-flex; align-items: center; gap: 0.55rem;
      margin-bottom: 1.5rem;
    }
    .promo-slide__counter::before {
      content: ""; width: 20px; height: 1px;
      background: var(--secondary);
    }
    .promo-slide__cat {
      font-family: var(--font-display);
      font-style: italic; font-weight: 400;
      font-size: 0.95rem;
      color: var(--secondary);
      margin: 0 0 0.65rem;
    }
    .promo-slide__title {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.4vw, 2rem);
      font-weight: 600;
      color: var(--primary);
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin: 0 0 1.15rem;
      text-wrap: balance;
    }
    .promo-slide__desc {
      font-size: 1rem;
      line-height: 1.75;
      color: var(--on-surface-muted);
      margin: 0 0 1.75rem;
      max-width: 46ch;
    }
    .promo-slide__cta {
      display: inline-flex; align-items: center; gap: 0.65rem;
      font-family: var(--font-display);
      font-size: 0.95rem; font-weight: 600;
      color: var(--primary);
      text-decoration: none;
      transition: gap .3s ease, color .3s ease;
    }
    .promo-slide__cta:hover { gap: 0.9rem; color: var(--primary-light); }
    .promo-slide__cta-arrow {
      display: inline-flex;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      align-items: center; justify-content: center;
      transition: background .3s ease, transform .3s ease;
    }
    .promo-slide__cta:hover .promo-slide__cta-arrow {
      background: var(--primary-mid);
      transform: translateX(3px);
    }
    .promo-slide__cta-arrow svg { width: 16px; height: 16px; }
    .promo-slider__controls {
      position: absolute;
      bottom: 0; right: 0;
      display: flex;
      z-index: 3;
    }
    .promo-slider__btn {
      width: 56px; height: 56px;
      border: 0;
      background: var(--surface-lowest);
      color: var(--primary);
      display: grid; place-items: center;
      cursor: pointer;
      transition: background .25s, color .25s;
      border-left: 1px solid rgba(0,102,44,0.08);
      border-top: 1px solid rgba(0,102,44,0.08);
    }
    .promo-slider__btn:first-child { border-top-left-radius: 1rem; }
    .promo-slider__btn:hover { background: var(--primary); color: #fff; }
    .promo-slider__btn svg { width: 18px; height: 18px; }


    @media (max-width: 900px) {
      .promo-slide { grid-template-columns: 1fr; }
      .promo-slide__img { min-height: 240px; }
      .promo-slide__watermark { font-size: 7rem; }
    }
    @media (max-width: 700px) {
      .promo-slide__img { min-height: 200px; }
      .promo-slider__controls { bottom: auto; top: 0; right: 0; }
      .promo-slider__btn { width: 48px; height: 48px; border-top: 0; }
      .promo-slider__btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 1rem; }
    }

    /* Short viewports: scale the cadre down in height so it doesn't overflow */
    @media (min-width: 901px) and (max-height: 800px) {
      .promo-slide__img { min-height: 320px; }
      .promo-slide__content { padding: 1.75rem 2.5rem; }
      .promo-slide__counter { margin-bottom: 1rem; }
      .promo-slide__title {
        font-size: clamp(1.35rem, 2.1vw, 1.7rem);
        margin-bottom: 0.85rem;
      }
      .promo-slide__desc { margin-bottom: 1.25rem; }
    }
    @media (min-width: 901px) and (max-height: 640px) {
      .promo-slide__img { min-height: 250px; }
      .promo-slide__content { padding: 1.25rem 2rem; }
      .promo-slide__title { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
      .promo-slide__desc {
        font-size: 0.92rem;
        line-height: 1.6;
        margin-bottom: 1rem;
      }
    }

    .promo-events-list { margin-top: 1.5rem; }
    .promo-events-foot { margin-top: 2rem; }
    /* Plus spécifique que .qsn-video__frame (déclaré plus bas, margin: 0 auto) */
    .qsn-video__frame.promo-soiree__video { margin-top: 3rem; }

    /* =============================================
       PRINT
       ============================================= */
    @media print {
      .nav, .newsletter, .scroll-progress { display: none !important; }
      .hero { min-height: auto; }
      .hero__slider-dots { display: none !important; }
      body { background: #fff; color: #000; }
    }

    /* =============================================
       SINGLE ARTICLE PAGE
       ============================================= */
    .article-page {
      padding: var(--hero-pad-top) var(--container-gutter) 0;
    }

    .article-page__inner {
      max-width: var(--content-max);
      margin: 0 auto 4rem;
    }

    /* Back button */
    .article-page__back {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 1.25rem;
      color: var(--primary);
      font-size: 0.86rem;
      font-weight: 700;
      text-decoration: none;
      background: rgba(23, 57, 1, 0.07);
      padding: 0.5rem 1rem 0.5rem 0.7rem;
      border-radius: 999px;
      transition: background 0.2s;
    }
    .article-page__back:hover { background: rgba(23, 57, 1, 0.13); }
    .article-page__back svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    /* Breadcrumbs */
    .article-page__breadcrumbs {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      align-items: center;
      font-size: 0.8rem;
      color: var(--on-surface-muted);
      margin-bottom: 2rem;
    }
    .article-page__breadcrumbs a {
      color: var(--primary-mid);
      font-weight: 600;
      text-decoration: none;
      transition: color 0.2s;
    }
    .article-page__breadcrumbs a:hover { color: var(--primary); }

    /* Header layout */
    .article-page__header {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-bottom: 2.5rem;
    }

    .article-page__topline {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: center;
      margin-bottom: 1rem;
    }

    .article-page__date { color: var(--secondary); }

    .article-page__lock-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.3rem 0.85rem;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
    }
    .article-page__lock-badge--free {
      background: #006832;
      color: #fff;
    }
    .article-page__lock-badge--member {
      background: #b95510;
      color: #fff;
    }

    .article-page__title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 2.7vw, 2.5rem);
      color: var(--primary);
      letter-spacing: -0.01em;
      margin-bottom: 1rem;
      line-height: 1.15;
    }

    .article-page__lead {
      max-width: 62ch;
      font-size: 1.05rem;
      color: var(--on-surface-muted);
      line-height: 1.7;
    }

    /* Sous-titre (extrait WordPress) sous le titre */
    .article-page__subtitle {
      max-width: 62ch;
      font-family: var(--font-display);
      font-size: clamp(0.95rem, 1.45vw, 1.17rem);
      font-style: italic;
      color: var(--secondary);
      line-height: 1.55;
      margin-bottom: 0.5rem;
    }

    /* Category + tag pills */
    .article-page__theme-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
      margin-top: 1.25rem;
    }

    .article-page__theme-link,
    .article-page__subtheme-link,
    .article-page__mag-link {
      display: inline-flex;
      align-items: center;
      padding: 0.22rem 0.62rem;
      border-radius: 999px;
      border: 1px solid var(--surface-high);
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
    }
    .article-page__theme-link {
      background: #006832;
      color: #fff;
      border-color: #006832;
    }
    .article-page__theme-link:hover { background: #00954b; border-color: #00954b; }
    .article-page__subtheme-link {
      background: #b95510;
      color: #fff;
      border-color: #b95510;
    }
    .article-page__subtheme-link:hover { background: #9e3e21; border-color: #9e3e21; }
    /* ENG-274 : lien croisé article → NTF Mag */
    .article-page__mag-link {
      background: var(--secondary, #bd7419);
      color: #fff;
      border-color: var(--secondary, #bd7419);
    }
    .article-page__mag-link:hover { background: #9a5f12; border-color: #9a5f12; }

    /* Cover image */
    .article-page__cover {
      border-radius: 1.6rem;
      overflow: hidden;
      background: var(--surface-high);
      box-shadow: 0 20px 48px rgba(23, 57, 1, 0.12);
      min-height: 320px;
    }
    .article-page__cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Article body */
    /* Meme taille de corps que le chapeau (.article-page__intro) : le corps se
       lisait plus petit (0.95 vs 1.06rem), ce qui donnait deux tailles pour un
       meme texte suivi (ENG-321, Honorine). Les deux sont alignes sur 1.08rem,
       la taille des blocs editoriaux (.article-block--texte) et de la prose
       (.qsn-prose__body p) : une seule taille de paragraphe sur tout le site. */
    .article-page__body {
      max-width: 1280px;
      margin: 0 auto;
      padding: 2.5rem 0 0;
      font-size: 1.08rem;
    }

    .article-page__intro {
      font-family: var(--font-display);
      font-size: 1.08rem;
      line-height: 1.85;
      color: var(--on-surface);
    }

    .article-page__intro::first-letter {
      float: left;
      font-size: 5rem;
      line-height: 0.84;
      padding-right: 0.8rem;
      padding-top: 0.22rem;
      color: var(--on-surface);
    }

    .article-page__body p + p { margin-top: 1.2rem; }
    .article-page__body h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); margin: 2rem 0 0.75rem; }
    .article-page__body h3 { font-family: var(--font-display); font-size: 1.17rem; color: var(--primary-mid); margin: 1.6rem 0 0.6rem; }
    /* h4 : sans cette regle, un « Titre 4 » de l'editeur retombait sur le
       style par defaut du navigateur — petit, noir, hors charte. Rare, donc
       passe inapercu longtemps (constate le 15/09 sur l'article Speeckaert). */
    .article-page__body h4 { font-family: var(--font-display); font-size: 1.02rem; color: var(--primary-mid); margin: 1.3rem 0 0.5rem; }
    .article-page__body ul, .article-page__body ol { padding-left: 1.4rem; margin: 1rem 0; }
    .article-page__body a:not(.btn) { color: var(--primary); text-decoration: underline; }

    /* Photos intercalées dans le corps d'article.
       Insérées via l'éditeur WordPress : couvre les blocs image Gutenberg
       (figure.wp-block-image) et l'éditeur classique (img.alignleft / figure.wp-caption).
       Permet d'intercaler les photos gauche / droite / centrée / pleine largeur,
       avec légende, au lieu de les regrouper en fin d'article. */
    .article-page__body img {
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 1.6rem;
      box-shadow: 0 20px 48px rgba(23, 57, 1, 0.12);
    }
    .article-page__body figure { margin: 2rem 0; }

    /* Légendes */
    .article-page__body figcaption,
    .article-page__body .wp-caption-text,
    .article-page__body .wp-element-caption {
      margin-top: 0.6rem;
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--on-surface-muted);
      text-align: center;
    }

    /* Pleine largeur (par défaut + alignwide / alignfull) */
    .article-page__body figure.alignwide img,
    .article-page__body figure.alignfull img,
    .article-page__body img.alignwide,
    .article-page__body img.alignfull { width: 100%; }

    /* Centrée */
    .article-page__body figure.aligncenter {
      max-width: 70%;
      margin-left: auto;
      margin-right: auto;
    }
    .article-page__body img.aligncenter { margin-left: auto; margin-right: auto; }

    /* Flottante à gauche - le texte habille l'image à droite */
    .article-page__body figure.alignleft,
    .article-page__body img.alignleft {
      float: left;
      max-width: min(46%, 430px);
      margin: 0.4rem 2rem 1.4rem 0;
    }

    /* Flottante à droite - le texte habille l'image à gauche */
    .article-page__body figure.alignright,
    .article-page__body img.alignright {
      float: right;
      max-width: min(46%, 430px);
      margin: 0.4rem 0 1.4rem 2rem;
    }

    /* Les titres de section et la fin du corps n'enjambent pas une image flottante */
    .article-page__body h2,
    .article-page__body h3 { clear: both; }
    .article-page__body::after { content: ''; display: block; clear: both; }

    /* ─────────────────────────────────────────────────────────────────────
       Constructeur d'article - blocs (crb_article_blocks)
       Palette de blocs empilables : Titre, Texte, Image seule, Image + texte,
       Deux images, Citation. La colonne de lecture est plafonnée à --reading-max
       ; les images « large » / « full » débordent au-delà pour respirer.
       ───────────────────────────────────────────────────────────────────── */
    .article-blocks {
      display: flex;
      flex-direction: column;
      gap: 3.5rem;
    }

    /* Page éditoriale : le chapeau d'intro et le bloc de blocs sont deux frères
       du conteneur de section. Sans gap, le premier titre de bloc collait au
       chapeau alors que les blocs suivants respiraient (3.5rem entre eux).
       Le conteneur reprend donc le MÊME gap : un seul écart partout. */
    .page-editorial-body {
      display: flex;
      flex-direction: column;
      gap: 3.5rem;
    }

    .article-block { margin: 0; }

    /* Titre optionnel d'un bloc - collé à son contenu.
       Sélecteur qualifié (.article-block > .article-block__heading) pour battre
       la règle générique `.article-block--texte h3` qui écrasait sinon la marge. */
    .article-block > .article-block__heading,
    .article-block--split-wrap > .article-block__heading {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 1.9vw, 1.55rem);
      line-height: 1.25;
      color: var(--primary);
      margin: 0 0 1.4rem;
    }
    /* Le paragraphe qui suit immédiatement un titre de bloc ne colle pas au titre
       (au cas où une marge concurrente serait réduite à 0). */
    .article-block__heading + p { margin-top: 0.2rem; }
    .article-block--split-wrap { display: block; }

    /* ENG-310 - Largeur réglable par bloc, choisie dans le back-office.
       Trois paliers, calés sur les tokens déjà en place : la colonne de lecture
       du site éditorial, la largeur du corps de page, puis la pleine largeur du
       conteneur. Pas de margin auto : le thème aligne le chapeau et le corps sur
       le même bord gauche, un bloc centré casserait cet alignement. */
    .article-block--w-lecture { max-width: var(--reading-col); }
    .article-block--w-moyenne { max-width: var(--reading-col-wide); }
    .article-block--w-pleine { max-width: var(--content-max); }

    /* Fond alterne, choisi bloc par bloc en back-office.
       Le corps d'une page editoriale est une seule section d'un seul fond :
       rien ne marquait le passage d'un sujet au suivant.

       Le fond doit filer d'un bord a l'autre de l'ecran alors que le bloc est
       dans un conteneur centre : d'ou le box-shadow lateral, qui peint au-dela
       de la boite SANS changer sa largeur ni sa position. Un margin negatif
       aurait decale le bloc et casse l'alignement du bord gauche que les
       largeurs ci-dessus preservent volontairement (« pas de margin auto »).

       Le padding vertical compense le gap de 3.5rem de .article-blocks : sans
       lui, le texte colle au bord de la couleur. */
    /* `isolation` cree un contexte d'empilement propre au bloc : le fond peut
       alors passer DERRIERE le texte sans tomber derriere le fond de la
       section, ce que ferait un `z-index: -1` pose sans ce garde-fou. */
    .article-block--fond-alt {
      position: relative;
      isolation: isolate;
      padding-block: 2.2rem;
    }

    /* Le fond est peint par un pseudo-element cale sur la LARGEUR DE L'ECRAN,
       et non sur la boite du bloc : le corps de page est dans un conteneur
       centre, et `body` porte un `overflow-x: hidden` (indispensable, il evite
       le defilement horizontal) qui rognerait aussi bien un box-shadow etendu
       qu'un margin negatif. Le calage par `left: 50%` + `translateX(-50%)` sur
       `100vw` ne depasse jamais la fenetre, donc rien n'est rogne. */
    .article-block--fond-alt::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      /* Le bloc est un element flex cale a GAUCHE (les largeurs ci-dessus
         n'utilisent volontairement pas de margin auto) : son centre n'est donc
         pas celui de l'ecran, et `left: 50%` laissait une bande non peinte a
         droite. On elargit donc symetriquement a partir des DEUX bords du bloc,
         de 100vw de chaque cote : la couleur deborde largement l'ecran, et
         l'`overflow-x: hidden` de `body` se charge de couper proprement. */
      left: -100vw;
      right: -100vw;
      background: var(--surface-alt, #eef2ea);
      z-index: -1;
    }

    /* Deux blocs colores qui se suivent forment une seule bande : le gap
       laisserait sinon une rayure de fond de page entre les deux. */
    .article-block--fond-alt + .article-block--fond-alt {
      margin-top: -3.5rem;
      padding-top: 0;
    }

    /* - Bloc texte - la largeur vient desormais de .article-block--w-* */
    .article-block--texte {
      font-size: 1.08rem;
      line-height: 1.85;
      color: var(--on-surface);
    }
    .article-block--texte > *:first-child { margin-top: 0; }
    .article-block--texte > *:last-child { margin-bottom: 0; }
    .article-block--texte p { margin: 0 0 1.1rem; }
    .article-block--texte h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); margin: 0.5rem 0 0.75rem; }
    .article-block--texte h3 { font-family: var(--font-display); font-size: 1.17rem; color: var(--primary-mid); margin: 0.4rem 0 0.6rem; }
    .article-block--texte h4 { font-family: var(--font-display); font-size: 1.02rem; color: var(--primary-mid); margin: 0.35rem 0 0.5rem; }
    .article-block--texte ol { padding-left: 1.4rem; margin: 1rem 0; }

    /* Puces : même rond orange que `.qsn-prose__body ul` des gabarits dédiés.
       Sans cette règle, une liste migrée vers un bloc Texte repassait aux
       puces noires par défaut du navigateur — écart visible d'une page à
       l'autre alors que le contenu est le même. */
    .article-block--texte ul { list-style: none; margin: 1rem 0; padding: 0; }
    .article-block--texte ul li {
      position: relative;
      padding-left: 1.4rem;
      line-height: 1.8;
    }
    .article-block--texte ul li::before {
      content: ""; position: absolute;
      left: 0; top: 0.7em;
      width: 0.4rem; height: 0.4rem;
      border-radius: 50%;
      background: var(--secondary, #bd7419);
    }
    .article-block--texte a:not(.btn) { color: var(--primary); text-decoration: underline; }

    /* - Bloc image seule - pleine largeur du conteneur.
       Hauteur choisie par l'éditeur : bandeaux rognés (compact/moyen/grand)
       ou hauteur naturelle (image entière non rognée). */
    .article-block--image { display: block; width: 100%; }
    .article-block--image img {
      width: 100%;
      display: block;
      border-radius: 1.6rem;
      box-shadow: 0 20px 48px rgba(23, 57, 1, 0.12);
    }
    /* Bandeaux : hauteur fixe, image rognée au centre */
    .article-block--image-h-compact img,
    .article-block--image-h-medium img,
    .article-block--image-h-tall img {
      object-fit: cover;
      max-height: 70vh;
    }
    .article-block--image-h-compact img { height: 280px; }
    .article-block--image-h-medium img  { height: 420px; }
    .article-block--image-h-tall img    { height: 560px; }
    /* Naturelle : image entière, ratio préservé */
    .article-block--image-h-natural img { height: auto; }
    .article-block--image figcaption {
      margin-top: 0.6rem;
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--on-surface-muted);
      text-align: center;
    }

    /* - Bloc image + texte -
       Le DOM est déjà dans l'ordre visuel (image puis texte si à gauche ;
       texte puis image si à droite), donc les colonnes suivent l'ordre visuel
       et le ratio image/texte s'exprime directement, sans `order`. */
    .article-block--split {
      display: grid;
      gap: 2rem;
      align-items: center;
    }
    /* Ratios image/texte selon le côté de l'image.
       À gauche : 1ère colonne = image. À droite : 1ère colonne = texte. */
    .article-block--split-left.article-block--r33  { grid-template-columns: 33% minmax(0, 1fr); }
    .article-block--split-left.article-block--r50  { grid-template-columns: 50% minmax(0, 1fr); }
    .article-block--split-left.article-block--r66  { grid-template-columns: 66% minmax(0, 1fr); }
    .article-block--split-left.article-block--r75  { grid-template-columns: 75% minmax(0, 1fr); }
    .article-block--split-right.article-block--r33 { grid-template-columns: minmax(0, 1fr) 33%; }
    .article-block--split-right.article-block--r50 { grid-template-columns: minmax(0, 1fr) 50%; }
    .article-block--split-right.article-block--r66 { grid-template-columns: minmax(0, 1fr) 66%; }
    .article-block--split-right.article-block--r75 { grid-template-columns: minmax(0, 1fr) 75%; }
    .article-block__media img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 1.6rem;
      box-shadow: 0 20px 48px rgba(23, 57, 1, 0.12);
    }
    /* Hauteur de l'image dans Image + texte : bandeaux rognés ou naturelle.
       Sur les crans fixes, l'image se cale en haut (align-self: start) pour ne
       pas s'étirer avec le texte à côté. */
    .article-block--split-h-compact,
    .article-block--split-h-medium,
    .article-block--split-h-tall { align-items: start; }
    .article-block--split-h-compact .article-block__media img,
    .article-block--split-h-medium .article-block__media img,
    .article-block--split-h-tall .article-block__media img {
      object-fit: cover;
      max-height: 60vh;
    }
    .article-block--split-h-compact .article-block__media img { height: 240px; }
    .article-block--split-h-medium .article-block__media img  { height: 340px; }
    .article-block--split-h-tall .article-block__media img    { height: 460px; }
    /* Naturelle : ratio d'origine (déjà le comportement par défaut, explicité). */
    .article-block--split-h-natural .article-block__media img { height: auto; }
    /* Meme typographie de corps que le bloc texte seul (.article-block--texte) :
       un texte accompagne d'une image se lisait plus petit (0.95 vs 1.08rem),
       ce qui donnait deux styles pour un meme bloc texte (ENG-293, Honorine). */
    .article-block__text { font-size: 1.08rem; line-height: 1.85; color: var(--on-surface); }

    /* Bloc vidéo YouTube - 16:9 par défaut, variante verticale pour les Shorts.
       Sélecteur de base sur le frame : il sert aussi dans la colonne média du
       bloc « Vidéo + texte ». */
    .article-block__video-frame {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 14px;
      overflow: hidden;
      background: #000;
    }
    .article-block--video-vertical .article-block__video-frame {
      aspect-ratio: 9 / 16;
      max-width: 420px;
      margin-inline: auto;
    }
    .article-block__video-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    .article-block__text > *:first-child { margin-top: 0; }
    .article-block__text > *:last-child { margin-bottom: 0; }
    .article-block__text p { margin: 0 0 1.1rem; }
    .article-block__text h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); margin: 0 0 0.6rem; }
    .article-block__text h3 { font-family: var(--font-display); font-size: 1.17rem; color: var(--primary-mid); margin: 0.4rem 0 0.5rem; }
    .article-block__text a:not(.btn) { color: var(--primary); text-decoration: underline; }

    /* - Bloc deux images - */
    .article-block--duo { display: block; }
    .article-block__duo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }
    .article-block--duo-r65 .article-block__duo-grid { grid-template-columns: 65% minmax(0, 1fr); }
    .article-block--duo-r35 .article-block__duo-grid { grid-template-columns: 35% minmax(0, 1fr); }
    .article-block__duo-grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 1.6rem;
      box-shadow: 0 20px 48px rgba(23, 57, 1, 0.12);
    }
    /* Hauteur des deux images : bandeaux rognés (compact/moyen/grand) ou
       hauteur naturelle (chaque image entière, ratio préservé). */
    .article-block--duo-h-compact .article-block__duo-grid img { height: 260px; max-height: 60vh; }
    .article-block--duo-h-medium  .article-block__duo-grid img { height: 360px; max-height: 60vh; }
    .article-block--duo-h-tall    .article-block__duo-grid img { height: 480px; max-height: 60vh; }
    .article-block--duo-h-natural .article-block__duo-grid img { height: auto; object-fit: contain; }
    .article-block--duo-h-natural .article-block__duo-grid { align-items: start; }
    .article-block--duo figcaption {
      margin-top: 0.6rem;
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--on-surface-muted);
      text-align: center;
    }

    /* - Bloc citation - largeur pilotée par .article-block--w-* (ENG-310) */
    .article-block--quote {
      border-left: 4px solid var(--secondary);
      padding: 0.4rem 0 0.4rem 1.6rem;
      margin: 0;
    }
    .article-block--quote p {
      font-family: var(--font-display);
      font-size: clamp(1.25rem, 2vw, 1.6rem);
      font-style: italic;
      line-height: 1.5;
      color: var(--primary);
      margin: 0;
    }
    .article-block--quote cite {
      display: block;
      margin-top: 0.9rem;
      font-family: var(--font-body);
      font-style: normal;
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--secondary);
    }

    /* Paywall fade — le contenu verrouille n'est plus emis du tout (coupe
       serveur). Ce degrade ne masque donc rien : il adoucit la fin du dernier
       paragraphe visible pour que la coupure ne soit pas franche. */
    .article-page__preview {
      position: relative;
    }

    .article-page__preview--cut::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 5.5rem;
      background: linear-gradient(
        180deg,
        rgba(254, 249, 241, 0) 0%,
        rgba(254, 249, 241, 0.75) 55%,
        rgba(254, 249, 241, 1) 100%
      );
      pointer-events: none;
    }


    /* Paywall lock card */
    /* Espacements généreux et symétriques : la carte est un point d'arrêt de
       lecture, pas un encart de plus. Le bas valait 1.5rem contre 2rem en
       haut, ce qui la faisait paraître tassée. */
    .article-lock {
      margin-top: 2.2rem;
      border-radius: 1.35rem;
      padding: clamp(2.4rem, 5vw, 3.2rem) clamp(1.6rem, 4vw, 2.6rem);
      background: rgba(255,255,255,0.97);
      border: 1px solid rgba(23, 57, 1, 0.12);
      box-shadow: 0 18px 42px rgba(44, 70, 26, 0.08);
      text-align: center;
    }

    .article-lock h2 {
      font-family: var(--font-display);
      font-size: clamp(1.55rem, 3vw, 2.15rem);
      color: var(--primary);
      line-height: 1.18;
      /* Premier élément de la carte depuis le retrait de l'eyebrow et du
         kicker : c'est le padding de la carte qui donne l'air au-dessus. */
      max-width: 22ch;
      margin: 0 auto 1.25rem;
    }

    .article-lock > p {
      color: var(--on-surface-muted);
      font-size: 0.96rem;
      line-height: 1.7;
      max-width: 60ch;
      margin: 0 auto;
    }

    .article-lock__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      margin-top: 2.1rem;
      justify-content: center;
    }

    .btn--light {
      padding: 0.65rem 1.5rem;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-radius: 0.5rem;
      background: var(--primary);
      color: #fff;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      transition: background 0.2s, transform 0.2s;
    }
    .btn--light:hover { background: var(--primary-mid); transform: translateY(-1px); }

    .btn--ghost {
      padding: 0.65rem 1.5rem;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-radius: 0.5rem;
      background: rgba(23, 57, 1, 0.08);
      color: var(--primary);
      text-decoration: none !important;
      display: inline-flex;
      align-items: center;
      transition: background 0.2s;
    }
    .btn--ghost:hover { background: rgba(23, 57, 1, 0.14); }

    .article-lock__benefits {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
      margin-top: 1.65rem;
      padding-top: 1.45rem;
      border-top: 1px solid rgba(23, 57, 1, 0.12);
    }

    .article-lock__benefit {
      position: relative;
      padding-left: 1.45rem;
      font-size: 0.88rem;
      line-height: 1.7;
      color: var(--primary);
      text-align: left;
    }

    .article-lock__benefit::before {
      content: '';
      position: absolute;
      left: 0; top: 0.55rem;
      width: 0.6rem; height: 0.6rem;
      border-radius: 50%;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(23, 57, 1, 0.1);
    }

    /* Nettement détaché des boutons : c'est une porte de sortie secondaire
       (« déjà membre »), elle ne doit pas se lire comme un 3e bouton.
       Sélecteur `p.article-lock__signin` et non la classe seule : la règle
       `.article-lock > p` plus haut (spécificité 0,1,1) écrasait sinon la
       marge, ce qui collait le lien aux boutons quelle que soit la valeur. */
    p.article-lock__signin {
      margin-top: 3rem;
      margin-bottom: 0;
      font-size: 0.92rem;
      color: rgba(29, 28, 23, 0.66);
    }
    .article-lock__signin a { color: var(--primary); font-weight: 700; }

    /* Explore section */
    .article-page__explore {
      max-width: 1280px;
      margin: 3rem auto 0;
      padding: 1.8rem;
      border-radius: 1.6rem;
      background: var(--surface-lowest);
      box-shadow: 0 18px 36px rgba(29, 28, 23, 0.08);
    }

    .article-page__explore h3 {
      font-family: var(--font-display);
      font-size: 1.35rem;
      color: var(--primary);
      margin-bottom: 0.5rem;
    }

    .article-page__explore > p {
      color: var(--on-surface-muted);
      font-size: 0.9rem;
    }

    .article-page__explore-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 1.25rem;
    }

    .article-page__explore-links a {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.75rem 1.1rem;
      border-radius: 0.85rem;
      background: var(--surface);
      color: var(--primary);
      border: 1px solid var(--surface-high);
      font-size: 0.84rem;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s;
    }
    .article-page__explore-links a:hover { background: var(--surface-low); border-color: var(--primary-pale); }

    /* Membership CTA (member articles) */
    .membership-cta {
      margin: 4rem auto 0;
      max-width: 1080px;
      padding: 0 1.5rem 4rem;
    }

    .membership-cta__card {
      padding: 2.2rem;
      border-radius: 1.6rem;
      background: var(--primary);
      color: #fff;
    }

    .membership-cta__card h3 {
      font-family: var(--font-display);
      font-size: 1.9rem;
      margin-bottom: 0.7rem;
    }

    .membership-cta__card > p {
      max-width: 58ch;
      color: rgba(255,255,255,0.76);
    }

    .membership-cta__card .article-lock__actions { margin-top: 1.4rem; justify-content: flex-start; }
    .membership-cta__card .btn--light { background: #fff !important; color: var(--primary) !important; }
    .membership-cta__card .btn--ghost { background: rgba(255,255,255,0.12) !important; color: #fff !important; }

    .article-lock .btn--light { background: var(--primary) !important; color: #fff !important; }
    .article-lock .btn--ghost { background: rgba(0,102,44,0.08) !important; color: var(--primary) !important; }

    /* Responsive */
    /* ≥900px : la photo de couverture s'aligne exactement sur la hauteur de
       la colonne de gauche (date → titre → tags) au lieu de déborder en hauteur
       (Feedback 9). L'image passe en position absolue pour ne pas imposer sa
       hauteur propre : la rangée prend la hauteur du texte et la figure s'y
       étire (min-height en garde-fou pour les titres courts). */
    @media (min-width: 900px) {
      .article-page__header {
        grid-template-columns: 1.1fr 0.9fr;
        align-items: stretch;
        gap: 3rem;
      }
      .article-page__cover {
        position: relative;
        min-height: 280px;
        height: auto;
        max-height: none;
      }
      .article-page__cover img {
        position: absolute;
        inset: 0;
      }
    }

    @media (max-width: 700px) {
      .article-page { padding: 6rem var(--container-gutter) 0; }
      .article-page__title { font-size: 1.9rem; }
      .article-page__intro::first-letter { font-size: 3.6rem; padding-right: 0.5rem; }
      /* Sur mobile, les photos ne flottent plus : pleine largeur empilée */
      .article-page__body figure.alignleft,
      .article-page__body figure.alignright,
      .article-page__body figure.aligncenter,
      .article-page__body img.alignleft,
      .article-page__body img.alignright {
        float: none;
        max-width: 100%;
        margin: 1.5rem 0;
      }
      /* Mobile : on garde du souffle, sans la largeur du desktop. */
      .article-lock { padding: 2.2rem 1.3rem; }
      .article-lock h2 { max-width: none; }
      .article-lock__benefits { grid-template-columns: 1fr; gap: 0.75rem; }

      /* Blocs d'article : tout s'empile sur mobile, quel que soit le ratio.
         Sélecteurs à double-classe pour battre la spécificité des règles ratio. */
      .article-blocks,
      .page-editorial-body { gap: 2.6rem; }
      .article-block--split,
      .article-block--split-left.article-block--r33,
      .article-block--split-left.article-block--r50,
      .article-block--split-left.article-block--r66,
      .article-block--split-left.article-block--r75,
      .article-block--split-right.article-block--r33,
      .article-block--split-right.article-block--r50,
      .article-block--split-right.article-block--r66,
      .article-block--split-right.article-block--r75 {
        grid-template-columns: 1fr;
        gap: 1.2rem;
      }
      .article-block__duo-grid,
      .article-block--duo-r65 .article-block__duo-grid,
      .article-block--duo-r35 .article-block__duo-grid {
        grid-template-columns: 1fr;
      }
      /* Bandeaux image seule plus courts sur mobile (l'image « naturelle »
         garde son ratio, non rognée). */
      .article-block--image-h-compact img { height: 200px; }
      .article-block--image-h-medium img  { height: 240px; }
      .article-block--image-h-tall img    { height: 300px; }

      /* Deux images empilées sur mobile : bandeaux plus courts */
      .article-block--duo-h-compact .article-block__duo-grid img { height: 200px; }
      .article-block--duo-h-medium  .article-block__duo-grid img { height: 240px; }
      .article-block--duo-h-tall    .article-block__duo-grid img { height: 300px; }

      /* Image + texte empilé sur mobile : bandeaux plus courts */
      .article-block--split-h-compact .article-block__media img { height: 200px; }
      .article-block--split-h-medium .article-block__media img  { height: 240px; }
      .article-block--split-h-tall .article-block__media img    { height: 300px; }
    }

/* ============================================================
   QUI SOMMES-NOUS - page template styles (qsn- prefix)
   ============================================================ */

/* HERO */
.qsn-hero {
  position: relative;
  background: var(--primary);
  color: #fff;
  /* Padding STRICTEMENT SYMÉTRIQUE : même valeur en haut et en bas. Plus aucun
     calcul lié à la navbar ici - c'est ce mélange (clairance + centrage dans la
     même propriété) qui rendait le padding-haut structurellement plus grand que
     le bas et faussait le centrage.
     --edge-gutter (et non --container-gutter) en horizontal : la barre verte
     garde le gutter de base sur laptop, alignée sur la navbar. */
  padding: var(--hero-pad-y) var(--edge-gutter);
  /* La navbar est fixe et se superpose au hero : on la dégage avec une MARGE
     (extérieure à la boîte), et non avec du padding. La zone de centrage reste
     ainsi parfaitement symétrique, et le contenu est centré dans la bande verte
     VISIBLE. */
  margin-top: var(--hero-nav-clear);
  /* Pas de min-height : la bande épouse son contenu (padding vertical
     symétrique via --hero-pad-y), donc le contenu est optiquement centré
     sur toutes les pages, quelle que soit sa hauteur.
     Contrepartie assumée (inverse de l'arbitrage ENG-45) : le fil d'Ariane
     n'est plus à hauteur constante d'une page à l'autre, puisque les contenus
     n'ont pas la même hauteur. Choix : centrage du contenu > alignement des
     fils d'Ariane. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Pages avec barre stats (Qui sommes-nous, Domaine) : la barre remonte de 3rem
   (margin-top:-3rem) et recouvre le bas de la bande. On rend ces 3rem en
   padding-bas UNIQUEMENT - le contenu reste alors optiquement centré dans la
   partie de la bande réellement visible (hors zone recouverte par les stats).
   Pas de min-height majoré : la bande garderait sinon 3rem de vide en trop,
   ce qui la rendait nettement plus haute que les autres pages. */
.qsn-hero:has(+ .qsn-stats-wrap) {
  padding-bottom: calc(var(--hero-pad-y) + 3rem);
}
/* Connecté en back-office : NE RIEN AJOUTER à la marge des héros.
   WordPress injecte lui-même `html { margin-top: 32px !important }` (46px sous
   782px, voir _admin_bar_bump_cb() dans wp-includes/admin-bar.php). Tout le
   contenu en flux normal - donc les héros - est déjà descendu de cette hauteur.
   Seule la navbar, qui est `position: fixed`, échappe à cette marge : c'est
   pourquoi `body.admin-bar .nav { top: 32px }` existe, et lui seul suffit.
   L'ancien --hero-admin-offset rajoutait ces 32px une SECONDE fois sur la marge
   du héros : la bande verte descendait de 32px de plus que la navbar, laissant
   ~34px de blanc au lieu des ~2px prévus. Visible uniquement connecté, et
   uniquement en haut de page (une fois scrollé, la navbar recouvre l'écart).
   Les héros sans ce token (.contact-hero…) n'ont jamais eu le problème. */
.qsn-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.08; mix-blend-mode: overlay; pointer-events: none;
}
.qsn-hero__inner {
  max-width: var(--container-max); margin: 0 auto;
  position: relative; z-index: 1;
  width: 100%;
  /* Pas de flex:1 ici : l'inner prend la hauteur de son contenu pour que
     justify-content:center du hero le centre dans l'espace restant. */
  display: grid; grid-template-columns: 1.4fr 0.8fr;
  /* align-items:center → la colonne des verbes est centrée sur le bloc titre
     (demande : centrer verticalement les textes ET les 3 verbes). */
  gap: 4rem; align-items: center;
}
/* FIL D'ARIANE À HAUTEUR CONSTANTE - la colonne titre est calée en HAUT.
   Avec le seul align-items:center ci-dessus, la colonne titre était centrée
   face à la colonne de droite. Sa position dépendait donc du contenu : sur
   Bail à ferme la colonne titre (fil d'Ariane + H1 + bouton) est plus haute
   que les verbes et restait en haut ; sur Actualités, qui n'a pas de bouton,
   elle est plus courte que les verbes et se retrouvait poussée vers le bas.
   D'où un fil d'Ariane à une distance du haut différente d'une page à l'autre.
   En calant cette colonne en `start`, le fil d'Ariane tombe toujours à
   --hero-nav-clear + --hero-pad-y, quel que soit le contenu de droite.
   Les verbes, eux, gardent leur centrage (demande client). */
.qsn-hero__inner > :first-child { align-self: start; }
.qsn-hero__eyebrow {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secondary-light);
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-bottom: 1rem;
}
.qsn-hero__eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--secondary-light); opacity: 0.7;
}

/* Fil d'Ariane discret en tête de hero (remplace les eyebrows orange - ENG-45).
   Défaut : hero vert → texte blanc translucide. */
.hero-crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem; line-height: 1.4;
  margin-bottom: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}
.hero-crumbs__link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.hero-crumbs__link:hover,
.hero-crumbs__link:focus-visible { color: #fff; }
.hero-crumbs__sep { opacity: 0.55; }
.hero-crumbs__current { color: #fff; font-weight: 600; }
/* Rubrique de navigation sans page dédiée (ex. « Vous informer ») : même
   traitement discret qu'un lien, mais non cliquable. */
.hero-crumbs__branch { color: rgba(255, 255, 255, 0.7); }

/* Modificateur pour heros à fond clair (agenda, mag) : reprend les tokens de surface. */
.hero-crumbs--light { color: var(--on-surface-muted); }
.hero-crumbs--light .hero-crumbs__link { color: var(--on-surface-muted); }
.hero-crumbs--light .hero-crumbs__link:hover,
.hero-crumbs--light .hero-crumbs__link:focus-visible { color: var(--primary); }
.hero-crumbs--light .hero-crumbs__current { color: var(--primary); }
.qsn-hero__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600; line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 1.25rem;
  color: #fff; text-wrap: balance;
}
.qsn-hero__title em { font-style: normal; font-weight: inherit; color: inherit; } /* ENG-45 item E */
/* CALAGE VERTICAL - la seule chose nécessaire.
   `justify-content` sur .qsn-hero (aujourd'hui flex-start, pour aligner les
   fils d'Ariane de toutes les pages) suffit à placer le contenu :
   il n'a besoin d'AUCUNE compensation. Les tentatives précédentes ajoutaient du
   padding calculé à la main (hauteur estimée du fil d'Ariane, du bouton…) pour
   « aider » ce centrage : c'est précisément ce qui le cassait - le padding
   s'ajoutait au min-height (barre qui gonfle) et recentrait le H1 au lieu du
   bloc visible (d'où l'air plus grand en haut).

   Il suffit que la hauteur du bloc soit égale à celle de son ENCRE VISIBLE :
   on neutralise donc la marge haute du premier enfant et la marge basse du
   dernier, qui sinon seraient comptées comme du contenu et décentreraient le
   bloc. Le flex fait le reste. */
.qsn-hero__inner > div > :first-child { margin-top: 0; }
.qsn-hero__inner > div > :last-child { margin-bottom: 0; }
.qsn-hero__lead {
  font-size: 0.95rem; line-height: 1.7;
  color: rgba(255,255,255,0.78);
  margin: 0; max-width: 56ch;
}
.qsn-hero__motto {
  /* Centrage assuré par align-items:center sur .qsn-hero__inner - pas besoin
     d'align-self ici (l'ancien align-self:center contredisait le align-items:end
     de la grille). */
  border-left: 1px solid rgba(255,255,255,0.20);
  padding: 0.5rem 0 0.5rem 2rem;
}
.qsn-hero__motto-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.qsn-hero__motto-list li {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem; font-weight: 500;
  font-style: normal;
  color: #fff;
  line-height: 1;
}
.qsn-hero__motto-label {
  font-family: var(--font-sans, sans-serif);
  font-style: normal;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.85rem;
}

/* STATS STRIP */
.qsn-stats-wrap {
  background: var(--surface-low, #f8f3eb);
}
.qsn-stats {
  width: min(var(--content-max), 100% - 2 * var(--container-gutter));
  margin: -3rem auto 0;
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--surface-high, #ece8e0);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(0,102,44,0.35);
}
.qsn-stat {
  background: #fff;
  padding: 1.1rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.qsn-stat__num {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.7rem; font-weight: 600;
  color: var(--primary);
  line-height: 1; letter-spacing: -0.02em;
}
.qsn-stat__num em {
  font-style: italic; color: var(--secondary, #bd7419);
  font-size: 0.75em; margin-left: 0.2rem;
}
.qsn-stat__label {
  font-size: 0.7rem;
  color: var(--on-surface-muted, #78736a);
  line-height: 1.35;
}

/* SECTION COMMON - fluid container system (see --container-* tokens)
   Plain .qsn-section has no inner wrapper: it's the full-width outer element,
   and its direct children are capped to --container-max and centered.
   .qsn-section--alt / --vision keep their .qsn-section__inner wrapper. */
.qsn-section {
  max-width: none;
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) var(--container-gutter);
}
.qsn-section > * {
  max-width: var(--content-max);
  margin-inline: auto;
}
/* NE PAS neutraliser ce centrage pour la prose : le conteneur .qsn-prose__body
   doit rester une bande de --content-max centrée, exactement comme
   .qsn-section__head. C'est ce qui garantit que titre et texte partagent le
   même bord gauche. Le resserrement se fait sur les enfants du bloc de prose
   (voir --reading-col plus bas), pas sur le bloc lui-même. */
.qsn-section--alt { max-width: none; background: var(--surface-low, #f8f3eb); margin: 0; padding: 0 var(--container-gutter); }
.qsn-section--alt .qsn-section__inner { max-width: var(--content-max); margin: 0 auto; padding: clamp(1.5rem, 2.5vw, 2.5rem) 0; }

/* Readability cap (option B): full-width editorial paragraphs stay comfortable
   to read even when the container is 1280px wide. Grids/lists keep full width. */
.qsn-issue-item__desc,
.qsn-mission-item__body p { max-width: var(--reading-max); }

.qsn-section__head {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
.qsn-section__head-left { display: contents; }
/* Grid à deux colonnes bornées : la track minmax(0,1fr) contraint le titre
   à revenir à la ligne, le bouton vit dans sa propre colonne - le
   chevauchement titre/bouton constaté en flex (320→1280px) devient
   géométriquement impossible. */
.qsn-section__head.promo-section__head--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}
.qsn-section__head.promo-section__head--row > div {
  min-width: 0;
}
.qsn-section__head.promo-section__head--row .qsn-section__title {
  white-space: normal;
}
/* Sous 900px, le header s'empile : titre puis bouton. */
@media (max-width: 899px) {
  .qsn-section__head.promo-section__head--row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
  }
}
.qsn-eyebrow {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secondary, #bd7419);
  display: inline-flex; align-items: center; gap: 0.65rem;
}
.qsn-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--secondary, #bd7419); }
.qsn-section__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 600; color: var(--primary);
  line-height: 1.15; letter-spacing: -0.01em;
  /* balance et non nowrap : les titres longs (Voiries, Événements…)
     débordaient de l'écran à toutes les largeurs > 768px. */
  margin: 0; text-wrap: balance;
}
.qsn-section__title em { font-style: normal; font-weight: inherit; color: inherit; } /* ENG-45 item E */
.qsn-section__lead {
  font-size: 0.95rem; line-height: 1.7;
  color: var(--on-surface-muted, #78736a);
  /* --reading-col (et non --reading-max) : le chapeau et le corps de texte
     doivent partager exactement le même bord droit. */
  margin: 0; max-width: var(--reading-col);
}

.qsn-section--vision {
  max-width: none;
  background: var(--surface-low, #f8f3eb);
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) var(--container-gutter);
}
.qsn-section--vision .qsn-section__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: 0;
}

/* VIDÉO DE PRÉSENTATION - facade click-to-load YouTube */
.qsn-video__frame {
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45);
}
.qsn-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* INTRO PROSE */
.qsn-prose {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.qsn-prose__lede {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  font-weight: 500; line-height: 1.45;
  color: var(--primary);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.qsn-prose__lede em { font-style: italic; color: var(--secondary, #bd7419); }
/* COLONNE DE LECTURE - c'est le TEXTE qui est resserré, pas son conteneur.
   Le conteneur .qsn-prose__body garde sa largeur pleine : il reste donc calé
   sur la même bande centrée que le titre (.qsn-section__head), et titre et
   texte partagent le même bord gauche dans les deux gabarits de section
   (fond blanc où la prose est enfant direct de .qsn-section, fond beige où
   elle vit dans .qsn-section__inner). Capper le conteneur, lui, désalignait
   l'un des deux gabarits - c'est la bonne façon de faire.
   L'espace laissé libre à droite EST le rail : vide ici, image en passe 2.
   Tableaux, figures et images ne sont volontairement PAS cappés : ils ont
   besoin de toute la largeur.
   Portée : .qsn-prose__body n'existe QUE dans les templates Qui sommes-nous,
   Vous informer (thèmes + sous-thèmes) et Services - Actualités, Agenda,
   Contact, NTF Mag, articles et home ne l'utilisent pas. Aucun ciblage par
   body.page-template-* n'est donc nécessaire. */
.qsn-prose__body > p,
.qsn-prose__body > ul,
.qsn-prose__body > ol,
.qsn-prose__body > h3 { max-width: var(--reading-col); }
/* ENG-277 : espacement h3 aligné sur .article-page__body h3 */
.qsn-prose__body h3 { font-family: var(--font-display); font-size: 1.17rem; color: var(--primary-mid); margin: 1.6rem 0 0.6rem; }

/* Texte collé depuis Word : le contenu arrive enfermé dans
   <span style="font-weight: 400"> au lieu de <p>. Or c'est `.qsn-prose__body > p`
   qui porte la taille de paragraphe du site : un <span> n'en hérite pas et
   retombe sur la taille par défaut, plus petite. Résultat visible en
   production : certaines pages ont des paragraphes plus petits que les autres,
   sans que le gabarit ni le CSS n'y soient pour quelque chose.

   On neutralise donc la taille et la graisse portées en ligne, plutôt que de
   nettoyer le HTML champ par champ en base : la règle couvre les pages déjà
   saisies ET les prochains copier-coller, sans toucher au contenu de NTF.

   Portée volontairement étroite : uniquement à l'intérieur de la prose. Les
   <span style> du thème sont ailleurs (pastilles de statut dans wp-admin), ils
   ne sont pas concernés.
   Le nettoyage du HTML reste souhaitable, mais c'est un autre chantier. */
.qsn-prose__body span[style],
.article-block__text span[style] { font-size: inherit; font-weight: inherit; }
/* Exception : un <strong> ou un <b> à l'intérieur doit rester gras. */
.qsn-prose__body span[style] strong,
.qsn-prose__body span[style] b,
.article-block__text span[style] strong,
.article-block__text span[style] b { font-weight: 600; }
/* ENG-321 : meme taille de corps que les blocs editoriaux
   (.article-block--texte / .article-block__text, 1.08rem) et que le corps des
   articles. La prose des 43 gabarits « Vous informer » / « Qui sommes-nous »
   se lisait 8 % plus petite, ce qui donnait des paragraphes de tailles
   differentes d'une page a l'autre (Honorine : « c'est comme cela dans toutes
   les pages que j'ai creees »). */
.qsn-prose__body p {
  font-size: 1.08rem; line-height: 1.8;
  color: var(--on-surface, #1d1c17);
  margin: 0 0 1.25rem;
}
.qsn-prose__body p:last-child { margin-bottom: 0; }
.qsn-prose__body strong { color: var(--primary); font-weight: 600; }
/* Sous-titre en gras dans le texte courant (uniquement Défendre/Promouvoir/Informer) */
.qsn-prose__sub {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem; font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  margin: 1.75rem 0 0.4rem;
}
.qsn-prose__sub:first-child { margin-top: 0; }
/* Devenu un <p> (c'est un sous-titre visuel, pas une section) : la règle
   `.qsn-prose__body p:last-child` lui retirerait sinon sa marge basse. */
.qsn-prose__body p.qsn-prose__sub:last-child { margin-bottom: 0.4rem; }
/* Listes à puces dans le texte courant (POURQUOI) */
.qsn-prose__body ul {
  list-style: none;
  margin: 0 0 1.25rem; padding: 0;
}
.qsn-prose__body ul li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1rem; line-height: 1.8;
  color: var(--on-surface, #1d1c17);
}
.qsn-prose__body ul li::before {
  content: ""; position: absolute;
  left: 0; top: 0.7em;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--secondary, #bd7419);
}

/* RAIL IMAGE - section « texte à gauche + photo à droite ».
   Markup attendu :
     <div class="qsn-section__body qsn-section__body--rail">
       <div class="qsn-prose__body">…</div>
       <figure class="qsn-section__rail"><img …></figure>
     </div>
   La 1re piste vaut --reading-col : la colonne de texte est au pixel près la
   même que dans une section SANS rail. Ajouter une photo à une section ne
   déplace donc jamais le texte des sections voisines. */
.qsn-section__body--rail {
  display: grid;
  grid-template-columns: minmax(0, var(--reading-col)) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.qsn-section__rail { margin: 0; }
.qsn-section__rail img {
  width: 100%; height: auto;
  border-radius: 14px; object-fit: cover;
}
/* 860px : même bascule mobile que .theme-intro__grid, pour que les deux
   systèmes 2-colonnes passent en pile à la même largeur. */
@media (max-width: 860px) {
  .qsn-section__body--rail { grid-template-columns: 1fr; }
}

/* POURQUOI - editorial text */
.qsn-issues-editorial {
  display: flex; flex-direction: column;
  gap: 1.75rem;
}
.qsn-issues-cta {
  margin-top: 2rem;
}
.qsn-issue-item {
  display: block;
  padding: 0;
}
.qsn-issue-item__num { display: none; }
.qsn-issue-item__name {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem; font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.qsn-issue-item__desc {
  font-size: 1rem; line-height: 1.8;
  color: var(--on-surface, #1d1c17);
  margin: 0;
}

/* MISSION - editorial text */
.qsn-mission-editorial {
  display: flex; flex-direction: column;
  gap: 1.75rem;
}
.qsn-mission-item {
  display: block;
  padding: 0;
}
.qsn-mission-item__head {
  display: block;
  margin: 0 0 0.4rem;
}
.qsn-mission-item__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem; font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
}
.qsn-mission-item__body p {
  font-size: 1rem; line-height: 1.8;
  color: var(--on-surface, #1d1c17);
  margin: 0 0 1rem;
}
.qsn-mission-item__body p:last-child { margin-bottom: 0; }
.qsn-mission-item__cta {
  display: inline-block; margin-top: 1rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--secondary, #bd7419);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity .2s ease;
}
.qsn-mission-item__cta:hover { opacity: 0.7; }

/* VISION */
.qsn-vision-grid {
  display: flex; flex-direction: column; gap: 1.5rem;
}
.qsn-vision-roles {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem;
}
.qsn-vision-role {
  font-size: 0.92rem; font-weight: 500;
  color: var(--on-surface, #1d1c17);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0,102,44,0.08);
}

/* VALUES - editorial list */
.qsn-values-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  counter-reset: none;
}
.qsn-value-item {
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0,102,44,0.08);
}
.qsn-value-item:first-child { border-top: 1px solid rgba(0,102,44,0.08); }
.qsn-value-item__num {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic; font-weight: 400;
  font-size: 1.3rem;
  color: var(--secondary, #bd7419);
  line-height: 1.4;
  padding-top: 0.15rem;
}
.qsn-value-item__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem; font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  margin: 0 0 0.6rem;
}
.qsn-value-item__desc {
  font-size: 0.97rem; line-height: 1.75;
  color: var(--on-surface-muted, #78736a);
  margin: 0;
}

/* TEAM - square overlay cards (Valbiom style) */
.qsn-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0 clamp(2.5rem, 4vw, 4.5rem);
}
@media (max-width: 700px) {
  /* minmax(0,1fr) forces both columns to be truly equal - plain 1fr lets a
     column shrink to its content (shorter name/email), making photos uneven. */
  .qsn-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .qsn-team-grid { grid-template-columns: minmax(0, 1fr); }
}

.qsn-team-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--primary);
}
.qsn-team-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .45s ease;
}
.qsn-team-card:hover .qsn-team-card__img { transform: scale(1.04); }
.qsn-team-card__initials {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-display, Georgia, serif);
  font-size: 2.5rem; font-weight: 600;
  color: var(--tertiary-fixed, #ffddb3);
}
.qsn-team-card--warm .qsn-team-card__initials { color: #fff; }
.qsn-team-card--warm { background: var(--secondary, #bd7419); }

.qsn-team-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 22%, rgba(0,0,0,0.12) 42%, transparent 58%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 1.1rem 1rem;
}
.qsn-team-card__name {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem; font-weight: 600;
  color: #fff; line-height: 1.2;
  display: block; margin-bottom: 0.3rem;
}
.qsn-team-card__role {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #f08a5c;
  display: block; margin-bottom: 0.35rem;
}
/* Icônes mail / LinkedIn sous la fonction - l'adresse en toutes lettres
   débordait des cartes et n'était pas cliquable au doigt. */
.qsn-team-card__links {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
}
/* Pastilles pleines : pêche pour le mail, bleu LinkedIn pour le profil.
   Le blanc sur couleur pleine reste lisible sur le scrim sombre comme sur le
   fond clair du mobile - inutile de redéfinir les teintes plus bas. */
.qsn-team-card__icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  transition: transform .2s ease, filter .2s ease;
}
.qsn-team-card__icon .material-symbols-outlined { font-size: 18px; }
.qsn-team-card__icon--mail     { background: #f08a5c; }
.qsn-team-card__icon--linkedin { background: #0a66c2; }
.qsn-team-card__icon:hover,
.qsn-team-card__icon:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Mobile (2-col cards) - caption moves BELOW the photo so no text covers a face,
   and long emails wrap across the full card width instead of overflowing. */
@media (max-width: 700px) {
  .qsn-team-card {
    aspect-ratio: auto;        /* let the card grow to fit photo + caption */
    overflow: visible;         /* caption sits outside the photo, must not clip */
    background: none;
  }
  .qsn-team-card__img,
  .qsn-team-card__initials {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;       /* every photo forced to the same box; cover crops the rest */
    object-fit: cover;
    border-radius: 0.75rem;
  }
  .qsn-team-card__overlay {
    position: static;          /* flows under the image instead of overlaying it */
    inset: auto;
    background: none;          /* no scrim - caption is on the page background */
    padding: 0.7rem 0.2rem 0;
  }
  .qsn-team-card__name {
    font-size: 0.9rem;
    color: var(--primary);     /* dark text on light background */
  }
  .qsn-team-card__role {
    color: var(--secondary, #bd7419);
  }
  .qsn-team-card__links { margin-top: 0.15rem; }
}

/* BOARD - editorial definition list */
.qsn-board-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 3rem;
  margin: 0; padding: 0;
}
.qsn-board-entry {
  display: flex; flex-direction: column; gap: 2px;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(0,102,44,0.08);
}
.qsn-board-entry:nth-child(3n+1):nth-child(-n+3),
.qsn-board-entry:nth-child(3n+2):nth-child(-n+3),
.qsn-board-entry:nth-child(3n):nth-child(-n+3) { border-top: 1px solid rgba(0,102,44,0.08); }
.qsn-board-entry dt {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--secondary, #bd7419);
}
.qsn-board-entry dd {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem; font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
  margin: 0;
}
.qsn-board-entry--hl dt { color: var(--primary); }
.qsn-board-entry--hl dd { color: var(--primary); font-size: 1.1rem; }

/* PARTNERS - editorial stacked */
.qsn-partners-editorial {
  display: flex; flex-direction: column; gap: 0;
}
.qsn-partner-item {
  display: grid;
  grid-template-columns: 11rem 1fr 2rem;
  gap: 0 3rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(0,102,44,0.08);
  text-decoration: none; color: inherit;
  align-items: center;
  transition: background .2s;
}
.qsn-partner-item:first-child { border-top: none; }
.qsn-partner-item:hover { background: transparent; }
.qsn-partner-item__logo {
  height: 150px; width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}
.qsn-partner-item__loc {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary, #bd7419);
  display: block; margin-bottom: 0.35rem;
}
.qsn-partner-item__name {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem; font-weight: 600;
  color: var(--primary);
  line-height: 1.25; margin: 0 0 0.5rem;
}
.qsn-partner-item__desc {
  font-size: 0.9rem; line-height: 1.7;
  color: var(--on-surface-muted, #78736a);
  margin: 0; max-width: 60ch;
}
.qsn-partner-item__arrow {
  color: var(--primary); opacity: 0.35;
  transition: transform .2s, opacity .2s;
  justify-self: end;
}
.qsn-partner-item:hover .qsn-partner-item__arrow { opacity: 1; transform: translateX(3px); }

/* SUPPORTERS - 4-across logo strip (distinct from editorial alliances) */
.qsn-supporters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.qsn-supporter-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 2rem 1.5rem;
  text-decoration: none;
  transition: transform .2s;
}
a.qsn-supporter-card:hover {
  transform: translateY(-2px);
}
.qsn-supporter-card__logo {
  /* min() borne le logo à la fois par une taille idéale ET par 100 % de la
     cellule, pour qu'il ne déborde jamais sur petit écran (la borne basse fixe
     de l'ancien clamp 190px provoquait un overflow horizontal sur mobile). */
  max-width: min(260px, 100%);
  max-height: clamp(95px, 9vw, 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.qsn-supporter-card__placeholder {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1rem;
  color: var(--on-surface-muted, #78736a);
  text-align: center;
}

/* BAF - hero button + tighter lead.
   Même bouton pêche repris par toutes les pages éditoriales « Vous informer »
   (Urbanisme, Cadastre, Contraintes environnementales, Contrats alternatifs,
   Dégâts de gibier, Fiscalité du bois, Groupement forestier, Infrastructures,
   Natura 2000 x2, Transmission) : le vert de .btn--nav ne doit pas être utilisé
   tel quel dans un héro. */
.qsn-hero__btn,
.baf-hero__btn,
.urb-hero__btn,
.cad-hero__btn,
.env-hero__btn,
.chbf-hero__btn,
.deg-hero__btn,
.fis-hero__btn,
.gf-hero__btn,
.inf-hero__btn,
.nat-hero__btn,
.ind-hero__btn,
.trans-hero__btn {
  /* inline-FLEX (et non inline-block, qui écrasait le display de .btn) : en
     inline-block le bouton s'aligne sur la ligne de base du texte et traîne
     ~5,6px de demi-interligne fantôme sous lui, invisible mais compté dans la
     hauteur du bloc - ce qui décentrait le contenu du héros. */
  margin-top: 0.5rem; display: inline-flex;
  background: #f08a5c; color: #fff;
}
.qsn-hero__btn:hover,
.baf-hero__btn:hover,
.urb-hero__btn:hover,
.cad-hero__btn:hover,
.env-hero__btn:hover,
.chbf-hero__btn:hover,
.deg-hero__btn:hover,
.fis-hero__btn:hover,
.gf-hero__btn:hover,
.inf-hero__btn:hover,
.nat-hero__btn:hover,
.ind-hero__btn:hover,
.trans-hero__btn:hover { background: #d9713f; transform: translateY(-1px); }
.baf-hero .qsn-hero__lead { max-width: 52ch; }

/* Bandeau image pleine largeur (pages thèmes) - sous l'encadré vert */
.theme-banner { margin: 0; }
.theme-banner img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 380px);
  object-fit: cover;
  object-position: center;
}

/* Bandeau PARALLAX pleine largeur (essai page Bail à ferme). L'image de fond est
   fixée (background-attachment: fixed) : elle défile plus lentement que la page,
   d'où l'effet de profondeur. L'image se passe via la variable --bg en inline. */
.parallax-band {
  position: relative;
  min-height: clamp(280px, 42vw, 520px);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  background-repeat: no-repeat;
}
/* background-attachment: fixed est ignoré / coûteux sur la plupart des
   navigateurs mobiles (et tactiles) : on repasse en scroll pour un rendu propre
   plutôt qu'un fond figé bancal. */
@media (hover: none), (max-width: 860px) {
  .parallax-band { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-band { background-attachment: scroll; }
}

/* Intro 2 colonnes : image (gauche) + paragraphe & sous-thèmes (droite) - pages thèmes */
.theme-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: stretch;
}
/* Image centrée verticalement et de hauteur bornée : elle ne s'étire plus sur
   toute la hauteur de la rangée (sinon une image portrait domine un texte court
   et laisse un grand vide). Hauteur raisonnable, ratio géré par object-fit. */
.theme-intro__media { margin: 0; align-self: center; }
.theme-intro__media img {
  display: block;
  width: 100%;
  height: clamp(260px, 28vw, 340px);
  object-fit: cover;
  border-radius: 14px;
}
/* Pages « Vous informer » : l'image s'arrête exactement au bas du dernier
   bouton, au lieu de déborder sous lui.
   Clé du réglage : la rangée de grille est en `align-items: stretch`, donc la
   COLONNE de contenu s'étire elle aussi au-delà de son contenu réel. Se caler
   sur sa hauteur ne suffisait pas - il faut d'abord empêcher cet étirement
   (align-self: start sur la colonne), puis l'image épouse la hauteur ainsi
   obtenue, qui est celle du contenu visible.
   Scopé via :has(.theme-intro__subs) - donc uniquement les 4 pages de thèmes.
   Bail à ferme, Certification et Consultations juridiques utilisent aussi
   --reverse et gardent leur rendu. */
/* La rangée de grille se dimensionne sur la COLONNE DE CONTENU seule.
   Sans cela, la hauteur intrinsèque de l'image portrait (ratio 3/4) gonflait
   la rangée - mesuré 560px contre 524px de contenu réel - et l'image
   débordait de 36px sous le dernier bouton, quelles que soient les contraintes
   posées sur la figure. On sort donc l'image du calcul de hauteur en la
   positionnant en absolu dans la rangée. */
.theme-intro__grid--reverse:has(.theme-intro__subs) .theme-intro__media {
  position: relative;
  align-self: stretch;
  min-height: 0;
}
.theme-intro__grid--reverse:has(.theme-intro__subs) .theme-intro__media img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
}
/* Variante portrait : photo verticale à côté du texte (page Agriculture & foncier).
   On sort du bandeau paysage par défaut pour respecter le cadrage vertical de la
   photo ; object-fit/border-radius restent hérités de la règle ci-dessus. */
.theme-intro__media--portrait img {
  height: auto;
  aspect-ratio: 3 / 4;
  max-height: clamp(360px, 42vw, 520px);
}
/* Colonne droite : paragraphe puis sous-thèmes empilés */
.theme-intro__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
/* Colonne texte seul (sans bloc sous-thèmes) : centrée verticalement face à
   l'image, sinon le texte court reste collé en haut et laisse un grand vide
   sous lui (pages PAC, Code forestier, Certification). */
.theme-intro__col--centered {
  justify-content: center;
}
/* Grille inversée : image à DROITE, texte à gauche (desktop). On alterne ainsi
   les sections image+texte. Sur mobile la grille passe en 1 colonne (≤860px) et
   l'ordre source reprend (image en haut), donc rien à inverser là. */
/* Image à droite : on réinverse AUSSI les largeurs de colonnes, sinon le texte
   tombe dans la colonne étroite (0.82fr) et le titre déborde sous l'image. */
.theme-intro__grid--reverse { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.theme-intro__grid--reverse .theme-intro__media { order: 2; }
.theme-intro__grid--reverse .theme-intro__col   { order: 1; }
/* Section à texte court : on borne la hauteur de l'image pour qu'elle ne domine
   pas un seul paragraphe (sinon grande image + grand vide sous le texte). */
.theme-intro__grid--compact .theme-intro__media { align-self: center; }
.theme-intro__grid--compact .theme-intro__media img {
  height: auto;
  max-height: 360px;
}
/* EXCEPTION à la colonne de lecture : dans .theme-intro__grid le texte vit
   déjà dans une colonne étroite (~600px) face à l'image. --reading-col (680px)
   n'y mord donc pas, mais on neutralise explicitement pour que le jour où la
   colonne de lecture serait resserrée, ce bloc ne se resserre pas deux fois. */
.theme-intro__text > p,
.theme-intro__text > ul { max-width: none; }
.theme-intro__subs-title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}
/* CTA secondaire placé SOUS les boutons de sous-thèmes (ex. « Calculer mon
   fermage » sur Agriculture & foncier) : il suit l'action principale au lieu
   de la précéder. */
.theme-intro__subs-cta { margin-top: 1.25rem; }
/* Titre chapeautant le TEXTE de la section (et non les boutons) : il porte
   l'enjeu de la page, en complément du H1 du bandeau vert. */
.theme-intro__title {
  font-family: var(--font-display, Georgia, serif);
  /* Taille resserrée pour tenir sur une seule ligne dans la colonne de texte. */
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
  /* Marge basse réduite : le titre doit rester solidaire de son paragraphe.
     Le `gap` de .theme-intro__col ajoutant déjà de l'espace, on l'annule ici
     et on ne garde qu'un interligne court. */
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
/* Titre et texte forment UN bloc. La colonne est en flex avec un `gap` allant
   jusqu'à 2.25rem, qui séparerait le titre de son paragraphe : on le rattrape
   par une marge négative égale au gap, de sorte que seul le margin-bottom
   court du titre (0.5rem) subsiste entre les deux. */
.theme-intro__col > .theme-intro__title + .theme-intro__text {
  margin-top: calc(-1 * clamp(1.5rem, 2.5vw, 2.25rem));
}
/* Sous-thèmes des pages « Vous informer » : BOUTONS STANDARD (ENG-63).
   Auparavant des cartes/tuiles grises (style « outils » de la page mon-compte).
   On reprend maintenant l'apparence de .btn + .btn--nav - le même bouton que
   « Devenir membre » et le reste du site - sans toucher au markup des 4 pages :
   les classes .domain-tool-card / __label restent, seul le style change. */
.theme-intro__subs-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* Les boutons ne s'étirent plus sur toute la largeur : ils prennent la largeur
   de leur libellé, comme n'importe quel bouton du site. */
.theme-intro__subs-grid > * {
  flex: 0 0 auto;
}
.theme-intro__subs-grid .domain-tool-card {
  /* Reprend .btn + .btn--nav (theme.css:279-303). */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Boutons plus généreux que le .btn--nav de la navbar : ce sont les points
     d'entrée principaux vers les sous-thèmes, ils doivent avoir du poids. */
  padding: 0.9rem 1.75rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--primary-mid);
  color: #fff;
  text-decoration: none;
  transition: all 0.25s var(--ease-out);
}
.theme-intro__subs-grid a.domain-tool-card:hover {
  background: var(--primary);
  transform: translateY(-1px);
  box-shadow: none;
}
.theme-intro__subs-grid .domain-tool-card__label {
  /* Typo bouton : sans-serif, capitales, comme .btn--nav - mais un cran plus
     grande, en accord avec le padding élargi ci-dessus. */
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: inherit;
  /* Plus de réserve de 2 lignes ni de line-clamp : un bouton s'ajuste à son
     libellé (l'ancienne contrainte servait à aligner les icônes des tuiles). */
  min-height: 0;
  display: inline;
  overflow: visible;
}
/* Sous-thème pas encore publié : bouton neutre, non cliquable. */
.theme-intro__subs-grid .domain-tool-card--soon {
  background: var(--surface-high, #ece8e0);
  opacity: 1;
}
.theme-intro__subs-grid .domain-tool-card--soon .domain-tool-card__label {
  color: var(--on-surface-muted);
}
.theme-intro__subs-grid .domain-tool-card__soon {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-muted);
  opacity: 0.8;
}
/* Logo de label inséré dans le corps d'une page (ex. Wildlife Estates) :
   petit, sans cadre photo, aligné à droite avec le texte qui l'habille. */
.qsn-logo-figure { margin: 0 0 0.5rem 1.5rem; float: right; }
.qsn-logo-figure img { display: block; width: 160px; height: auto; }
@media (max-width: 700px) {
  .qsn-logo-figure { float: none; margin: 0 auto 1.25rem; }
  .qsn-logo-figure img { margin-inline: auto; }
}

/* Page sans image (aménagement) : colonne unique centrée */
.theme-intro--solo .theme-intro__col { max-width: 860px; margin-inline: auto; }
@media (max-width: 860px) {
  .theme-intro__grid { grid-template-columns: 1fr; }
  .theme-intro__media img { height: auto; max-height: 340px; }
}

/* Consultations juridiques : l'image épouse exactement la hauteur du bloc de
   texte adjacent (Feedback 9 - les images à hauteur fixe dépassaient les
   textes courts). Scopé à la page pour ne pas toucher les autres pages
   utilisant theme-intro. */
.page-template-page-consultations-juridiques .theme-intro__media {
  position: relative;
  align-self: stretch;
  min-height: 240px;
}
.page-template-page-consultations-juridiques .theme-intro__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 860px) {
  .page-template-page-consultations-juridiques .theme-intro__media { min-height: 0; }
  .page-template-page-consultations-juridiques .theme-intro__media img {
    position: static;
    height: auto;
    max-height: 340px;
  }
}

/* QSN HERO - RESPONSIVE
   Borne à 1100px (et non 1000px) pour coïncider avec le passage en une colonne
   défini plus bas : sinon, entre 1001 et 1100px, la grille s'empile déjà tandis
   que la bande garde ses dimensions desktop → hero inutilement haut sur cette
   plage de 100px. */
@media (max-width: 1100px) {
  /* Une seule colonne : les verbes passent SOUS le titre, donc align-items:start
     est correct ici (centrer une colonne pleine largeur n'aurait aucun effet).
     Le centrage vertical du bloc entier reste assuré par le hero lui-même. */
  .qsn-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
}
/* Sous 960px la navbar repasse sur UNE rangée : c'est ici, et pas avant, que la
   clairance doit diminuer. Hauteur exacte de cette rangée = padding .nav__top
   (0.9rem + 0.7rem = 25.6px) + .nav__logo-img (44px) = 69.6px. On garde la même
   marge de sécurité qu'en desktop (~2px), d'où 4.5rem = 72px.
   5rem (80px) laissait ~10px de crème sous la navbar : comme la navbar et cette
   bande partagent le fond --surface, ça se lisait comme une navbar plus haute au
   chargement, qui « rentrait dans l'ordre » au scroll (la navbar fixe recouvrant
   alors l'écart).
   La valeur est posée sur :root, pas sur .qsn-hero - les quatre consommateurs du
   token (.qsn-hero, .contact-hero, .agenda-hero, .mag-hero) doivent suivre la
   même navbar. Scopée à .qsn-hero, la réduction laissait les trois autres à
   7.5rem en mobile, soit ~50px de crème. */
@media (max-width: 959px) {
  :root { --hero-nav-clear: 4.5rem; }
}
@media (max-width: 768px) {
  /* Mobile : navbar sur une seule rangée → clairance encore réduite. Padding
     vertical resserré, symétrique via --hero-pad-y. */
  /* Clairance navbar : déjà réduite à 4.5rem sur :root sous 960px, rien à
     redéfinir ici - la navbar est la même rangée unique. */
  .qsn-hero { --hero-pad-y: clamp(1.75rem, 4vw, 2.25rem); }
  .qsn-hero:has(+ .qsn-stats-wrap) { padding-bottom: calc(var(--hero-pad-y) + 3rem); }
  .qsn-hero__inner { gap: 1.5rem; }
  .qsn-hero__title { font-size: var(--page-title-size-mobile); }
  .qsn-hero__motto-list { gap: 0.65rem; }
  .qsn-stats { margin-top: -3rem; }
  .qsn-section { padding: 2rem var(--container-gutter); }
  .qsn-section--alt .qsn-section__inner { padding: 2rem 0; }
  .qsn-section__title { text-wrap: balance; }
}

/* STATS - 4-column override (bail à ferme) */
.qsn-stats--4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .qsn-stats--4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .qsn-stats--4col { grid-template-columns: repeat(2, 1fr); } }

/* BAF - CTA site bailaferme.be */
.baf-cta-site {
  background: var(--primary);
  max-width: none;
  padding: clamp(3rem, 5vw, 5rem) var(--container-gutter);
}
.baf-cta-site__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  justify-content: space-between;
}
.baf-cta-site__text { flex: 1; }
.baf-cta-site__text .qsn-eyebrow { color: var(--secondary-light); margin-bottom: 0.75rem; display: inline-flex; }
.baf-cta-site__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
.baf-cta-site__title em { color: inherit; font-style: normal; font-weight: inherit; } /* ENG-45 item E */
.baf-cta-site__desc { font-size: 0.9rem; color: rgba(255,255,255,0.75); line-height: 1.6; margin: 0; }
.baf-cta-site__btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 700px) {
  .baf-cta-site__inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}

/* CTA FOOT */
.qsn-cta-foot {
  background: var(--surface, #fef9f1);
  padding: clamp(4rem, 6vw, 6rem) var(--container-gutter);
  border-top: 1px solid var(--surface-high, #ece8e0);
}
.qsn-cta-foot__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem; align-items: center;
}
.qsn-cta-foot__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--primary);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.qsn-cta-foot__title em { font-style: normal; color: inherit; font-weight: inherit; } /* ENG-45 item E */
.qsn-cta-foot__lead {
  font-size: 0.95rem; line-height: 1.7;
  color: var(--on-surface-muted, #78736a);
  margin: 1rem 0 0; max-width: var(--reading-max);
}
.qsn-cta-foot__actions { display: flex; gap: 0.6rem; }

/* TOUS-LES-SERVICES - inline link + link-card trio */
.qsn-values-list--no-num .qsn-value-item { grid-template-columns: 1fr; }
.qsn-values-list--no-num .qsn-value-item__num { display: none; }

.qsn-inline-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary, #00662c);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.qsn-inline-link:hover { text-decoration: underline; }

/* Liens dans la prose éditoriale - même règle que .article-page__body a
   (vert + souligné) ; sans classe, le reset global `a { color: inherit }`
   les rend invisibles dans le texte. */
.qsn-prose-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* TAG CARDS - keyword lists shown as small framed boxes (non-clickable).
   Replaces the plain row/bullet lists on page-tous-les-services.php and
   page-consultations-juridiques.php (client feedback 8). No hover state on
   the box itself so it never reads as clickable. */
.qsn-tag-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
/* compact variant for narrow containers (consultations 2-col block):
   wider cards + smaller title so short labels stay on one line. */
.qsn-tag-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.qsn-tag-grid--compact .qsn-tag-card { padding: 0.85rem 1rem; }
.qsn-tag-grid--compact .qsn-tag-card__title { font-size: 0.95rem; }
.qsn-tag-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.3rem;
  background: var(--surface-high, #ece8e0);
  border-radius: 0.85rem;
}
.qsn-tag-card__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
  margin: 0;
}

@media (max-width: 860px) {
  .qsn-tag-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .qsn-tag-grid { grid-template-columns: 1fr; }
}

.qsn-links-trio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
@media (max-width: 700px) {
  .qsn-links-trio { flex-direction: column; }
  .qsn-links-trio .btn { width: 100%; justify-content: center; }
}

/* TLS - section "Avec NTF à vos côtés" (institutionnel, fond clair) */
.tls-avantages {
  padding: clamp(3rem, 5vw, 5rem) var(--container-gutter);
}
.tls-avantages__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}
.tls-avantages__head {
  max-width: 760px;
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
}
.tls-avantages__eyebrow {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--secondary, #bd7419);
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.tls-avantages__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--secondary, #bd7419); }
.tls-avantages__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  color: var(--primary, #00662c);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.tls-avantages__title em { font-style: normal; color: inherit; font-weight: inherit; } /* ENG-45 item E */
.tls-avantages__lead {
  font-size: 0.95rem; line-height: 1.7;
  color: var(--on-surface-muted, #78736a);
  margin: 0 0 clamp(2rem, 3.5vw, 3rem);
  max-width: var(--reading-max);
}
.tls-avantages__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 3rem;
}
.tls-avantage {
  position: relative;
  padding-left: 1.5rem;
}
.tls-avantage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--secondary, #bd7419);
}
.tls-avantage p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--on-surface-muted, #78736a);
  margin: 0;
}
.tls-avantage strong {
  font-weight: 700;
  color: var(--primary, #00662c);
}

/* NOTE - the fluid container system (ex-`.tls-page` override) is now the global
   default for .qsn-hero / .qsn-section / .qsn-cta-foot etc. via the --container-*
   tokens. The `tls-page` class on <main> is now a no-op and kept only as a hook. */

/* QSN MODIFIERS - utilisés notamment par la page bail-à-ferme */
.qsn-mission-editorial--centered .qsn-mission-item__num { display: none; }
.qsn-mission-editorial--centered .qsn-mission-item__title {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}

/* QSN RESPONSIVE */
@media (max-width: 1100px) {
  .qsn-hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .qsn-hero__motto { border-left: 0; border-top: 1px solid rgba(255,255,255,0.20); padding: 1.25rem 0 0; }
  /* Motto compact en mode empilé : 3 mots sur une ligne, typo réduite */
  .qsn-hero__motto-label { margin-bottom: 0.6rem; }
  /* Mode compact horizontal : les 3 mots tiennent TOUJOURS sur une ligne.
     nowrap (li + liste) empêche tout retour à la ligne ; le clamp réduit
     juste assez la typo sur les petits écrans ; les écarts resserrés laissent
     le texte plus grand que l'ancien 1.15rem sur les téléphones larges. */
  .qsn-hero__motto-list { flex-direction: row; flex-wrap: nowrap; gap: 0.3rem 0.5rem; align-items: baseline; }
  .qsn-hero__motto-list li { font-size: clamp(0.9rem, 3.2vw, 1.2rem); white-space: nowrap; }
  .qsn-hero__motto-list li:not(:last-child)::after {
    content: "·"; margin-left: 0.5rem; opacity: 0.5; font-style: normal;
  }
  .qsn-hero__btn,
  .baf-hero__btn,
  .urb-hero__btn,
  .cad-hero__btn,
  .env-hero__btn,
  .chbf-hero__btn,
  .deg-hero__btn,
  .fis-hero__btn,
  .gf-hero__btn,
  .inf-hero__btn,
  .nat-hero__btn,
  .ind-hero__btn,
  .trans-hero__btn { margin-top: 1.25rem; }
  .qsn-section__head { gap: 0.6rem; }
  .qsn-prose { grid-template-columns: 1fr; gap: 1.5rem; }
  .qsn-staff-list { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .qsn-board-list { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
  .qsn-partner-item { grid-template-columns: 9rem 1fr 2rem; gap: 0 2rem; }
  .qsn-supporters-grid { grid-template-columns: repeat(2, 1fr); }
  .qsn-vision-roles { grid-template-columns: repeat(2, 1fr); }
  .qsn-cta-foot__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 700px) {
  .qsn-stats { grid-template-columns: 1fr; }
  .qsn-stat { align-items: center; text-align: center; }
  .qsn-value-item { display: block; }
  .qsn-staff-list { grid-template-columns: 1fr; }
  .qsn-staff-avatar { width: 120px; height: 120px; font-size: 1.5rem; }
  .qsn-president-banner__avatar { width: 120px; height: 120px; }
  .qsn-board-list { grid-template-columns: 1fr; gap: 0; }
  .qsn-board-entry:nth-child(3n+1):nth-child(-n+3),
  .qsn-board-entry:nth-child(3n+2):nth-child(-n+3),
  .qsn-board-entry:nth-child(3n):nth-child(-n+3) { border-top: none; }
  .qsn-board-entry:first-child { border-top: none; }
  .qsn-partner-item { grid-template-columns: 1fr 2rem; grid-template-rows: auto auto; gap: 0.75rem 1rem; }
  .qsn-partner-item__logo { grid-row: 1; grid-column: 1 / -1; max-width: 100%; height: 150px; }
  .qsn-partner-item__body { grid-row: 2; grid-column: 1; }
  .qsn-partner-item__arrow { grid-row: 2; grid-column: 2; align-self: start; margin-top: 0.25rem; }
  .qsn-supporters-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .qsn-supporter-card { min-height: 150px; padding: 1.5rem 1rem; }
  .qsn-vision-roles { grid-template-columns: 1fr; }
  .qsn-vision-role:last-child { border-bottom: none; }
  /* Side padding on mobile is now governed by --container-gutter (= 2.25rem here),
     so the old 1.25rem overrides are removed to keep hero & sections aligned. */
  .qsn-cta-foot__actions { flex-wrap: wrap; }
  .tls-avantages__list { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* CONSULTATIONS JURIDIQUES - cj- prefix */

/* Price grid: 2-column side by side, collapses to 1 on mobile */
.cj-price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

/* Price card: bordered white card with display-font amount */
.cj-price-card {
  background: #fff;
  border: 1px solid rgba(0, 104, 50, 0.14);
  border-radius: 0.5rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.cj-price-card__amount {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.05;
  margin: 0 0 0.35rem;
}
.cj-price-card__currency {
  font-size: 0.55em;
  font-weight: 600;
  vertical-align: middle;
}
.cj-price-card__unit {
  font-family: var(--font-body, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--secondary);
  margin: 0 0 0.9rem;
}
.cj-price-card__label {
  font-size: 0.9rem;
  color: var(--on-surface-muted, #6b6454);
  line-height: 1.6;
  margin: 0;
}

/* Small italicised note below the price grid (billing note) */
.cj-invoice-note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--on-surface-muted, #6b6454);
  font-style: italic;
}

/* Contact block: single-column, email then note stacked */
.cj-contact-block {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cj-contact-email {
  display: inline-block;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
  line-height: 1.3;
}
.cj-contact-email:hover { color: var(--secondary); }
.cj-contact-note {
  background: transparent;
  padding: 0;
}
.cj-contact-note .qsn-eyebrow { margin-bottom: 0.6rem; }
.cj-contact-note p {
  font-size: 1rem;
  color: var(--on-surface, #1d1c17);
  line-height: 1.8;
  margin: 0 0 0.4rem;
}
.cj-contact-note p:last-child { margin-bottom: 0; }
.cj-contact-note__cond { color: var(--on-surface, #1d1c17); }

/* Closing paragraph inside bon-à-savoir */
.cj-closing {
  margin-top: 2.5rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--on-surface, #2a2318);
  max-width: 72ch;
}

/* Accompagnement 2-column prose grid */
.cj-accompagnement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2.5rem;
}
.cj-accompagnement__intro {
  font-size: 0.95rem;
  color: var(--on-surface, #2a2318);
  margin: 0 0 0.6rem;
}
.cj-accompagnement__obj {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--on-surface, #2a2318);
}

/* Bullet list used inside accompagnement and inclusion card */
.cj-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.cj-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--on-surface, #2a2318);
}
.cj-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--secondary);
}

/* "Ce qui est compris" card below the price grid */
.cj-inclusion-card {
  margin-top: 2rem;
  background: #fff;
  border: 1px solid rgba(0, 104, 50, 0.14);
  border-radius: 0.5rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.cj-inclusion-card__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 0.75rem;
}
.cj-inclusion-card__intro {
  font-size: 0.95rem;
  color: var(--on-surface, #2a2318);
  margin: 0 0 0.6rem;
}

/* Diagnostic prose block */
.cj-diagnostic-prose {
  margin-top: 1.5rem;
}
.cj-diagnostic-prose p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--primary);
  margin: 0 0 0.75rem;
}
.cj-diagnostic-prose__badge {
  font-family: var(--font-display, Georgia, serif);
  font-style: italic;
  font-size: 1rem;
  font-weight: 600;
  color: var(--secondary);
  line-height: 1.5;
}
.cj-diagnostic-subhead {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  margin: 2rem 0 0;
}

/* Inline link inside issue-item descriptions */
.cj-inline-link { color: var(--on-surface, #1d1c17); text-decoration: underline; text-underline-offset: 2px; }
.cj-inline-link:hover { color: var(--primary); }
/* Bloc « réservé aux membres » - médaillon compact (ENG-141). Scopé conseil
   juridique : surcharge .article-lock sans toucher au composant global. */
.cj-rdv-lock { text-align: center; max-width: 560px; margin-left: auto; margin-right: auto; padding: 1.5rem 1.7rem 1.6rem; border-radius: 1.15rem; background: var(--surface-lowest); box-shadow: 0 10px 26px rgba(44, 70, 26, 0.07); }
.cj-rdv-lock .cj-rdv-lock__med { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 0.85rem; background: rgba(0, 102, 44, 0.10); color: var(--primary); }
.cj-rdv-lock .cj-rdv-lock__med .material-symbols-outlined { font-size: 1.6rem; }
.cj-rdv-lock .cj-rdv-lock__title { font-family: var(--font-display); font-weight: 600; color: var(--primary); font-size: 1.22rem; line-height: 1.2; margin: 0 0 0.3rem; }
.cj-rdv-lock .cj-rdv-lock__sub { color: var(--on-surface-muted); font-size: 0.93rem; line-height: 1.6; margin: 0 auto 1.15rem; max-width: 42ch; }
.cj-rdv-lock .article-lock__actions { margin-top: 0; }
/* Conseil juridique - phrase « Vous pouvez contacter… » sur une seule ligne (ENG-50) */
/* Section 100 % texte : sans corps noir après le chapeau, le gris muted
   généralisé détonnait par rapport aux autres sections de la page. */
#rendez-vous .qsn-section__lead { max-width: none; color: var(--on-surface, #1d1c17); font-size: 1rem; line-height: 1.8; }

/* Responsive */
@media (max-width: 1100px) {
.cj-accompagnement { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 700px) {
  .cj-price-grid { grid-template-columns: 1fr; }
  .cj-price-card { padding: 1.5rem; }
  .cj-inclusion-card { padding: 1.5rem; }
}

/* === POSITION BLOCK === */
.position-block {
  margin: 3rem 0;
  background: rgba(185, 85, 16, 0.06);
  border-radius: 1rem;
  padding: 1.8rem 2rem 1.6rem;
}
.position-block__inner {
}
.position-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b95510;
  margin-bottom: 0.9rem;
}
.position-block__eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.4rem;
  height: 2px;
  background: #b95510;
  flex-shrink: 0;
}
.position-block__quote {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.75;
  quotes: none;
}
.position-block__quote::before,
.position-block__quote::after {
  content: none;
}
.position-block__quote p {
  margin: 0 0 0.75em;
  color: var(--on-surface-muted);
}
.position-block__quote p:last-child {
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .position-block {
    padding: 1.4rem 1.25rem 1.3rem;
  }
}

/* ══════════════════════════════════════════════════════
   SEARCH PAGE
══════════════════════════════════════════════════════ */
.search-page__hero {
  background: var(--primary);
  padding: 5rem 2rem 3.5rem;
}
.search-page__hero-inner {
  max-width: 860px;
  margin: 0 auto;
}
.search-page__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: #fff;
  margin: 0.4rem 0 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.search-page__title em { color: inherit; font-style: normal; font-weight: inherit; } /* ENG-45 item E */
.search-page__form {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 4px 20px -4px rgba(0,0,0,0.18);
}
.search-page__input {
  flex: 1;
  border: none;
  padding: 0.9rem 1.25rem;
  font-size: 0.95rem;
  color: var(--on-surface, #1a1a18);
  outline: none;
  background: transparent;
}
.search-page__submit {
  border: none;
  background: var(--primary);
  color: #fff;
  padding: 0 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  transition: background 0.18s;
}
.search-page__submit:hover { background: var(--primary-mid); }
.search-page__body {
  padding: 3rem 2rem 5rem;
}
.search-page__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.search-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.search-page__pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.search-page__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.4rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-surface);
  border: 1px solid var(--surface-low, #ede9e3);
}
.search-page__pagination .page-numbers.current,
.search-page__pagination .page-numbers:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.search-page__empty {
  text-align: center;
  padding: 4rem 1rem;
}
.search-page__empty-icon {
  font-size: 3.5rem;
  color: var(--on-surface-muted);
  display: block;
  margin-bottom: 1rem;
}
.search-page__empty h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.search-page__empty p { color: var(--on-surface-muted); margin-bottom: 1.5rem; }
.search-page__suggestions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border-radius: 0.4rem;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
}
.btn--outline:hover { background: var(--primary); color: #fff; }
@media (max-width: 1000px) { .search-page__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .search-page__hero { padding: 3.5rem 1.25rem 2.5rem; }
  .search-page__body { padding: 2rem 1.25rem 3rem; }
  .search-page__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════════════════ */
.services-section {
  padding: 4rem var(--container-gutter) 5rem;
}
.services-section__inner { max-width: var(--container-max); margin: 0 auto; }
.services-section__head { margin-bottom: 2.5rem; }
.services-section__head h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 600;
  margin: 0.3rem 0 0;
  letter-spacing: -0.02em;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.service-card {
  background: #fff;
  border: 1px solid var(--surface-low, #ede9e3);
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.18s;
}
.service-card:hover {
  box-shadow: 0 8px 32px -8px rgba(0,102,44,0.16);
  transform: translateY(-2px);
}
.service-card--featured {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  grid-column: span 1;
}
.service-card__icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.6rem;
  background: var(--surface-lowest, #faf8f5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.service-card--featured .service-card__icon-wrap {
  background: rgba(255,255,255,0.18);
}
.service-card__icon-wrap .material-symbols-outlined {
  font-size: 1.5rem;
  color: var(--primary);
}
.service-card--featured .service-card__icon-wrap .material-symbols-outlined {
  color: #fff;
}
.service-card__body { flex: 1; }
.service-card__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.service-card__desc {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--on-surface-muted);
  margin: 0 0 0.75rem;
}
.service-card--featured .service-card__desc { color: rgba(255,255,255,0.8); }
.service-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.service-card__price {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--on-surface-muted);
}
.service-card--featured .service-card__price { color: rgba(255,255,255,0.75); }
.service-card__badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.service-card__badge--member { background: var(--primary-container, #e8f5e0); color: var(--primary); }
.service-card__badge--free   { background: var(--surface-low, #ede9e3); color: var(--on-surface-muted); }
.service-card--featured .service-card__badge--member { background: rgba(255,255,255,0.2); color: #fff; }
.service-card__cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: auto;
}
.service-card--featured .service-card__cta { color: #fff; }
@media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .services-section { padding: 2.5rem 1.25rem 3rem; }
  .services-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   DOMAIN EXPERTISE TEMPLATE
══════════════════════════════════════════════════════ */
.domain-tools {
  padding: 4rem var(--container-gutter);
  background: var(--surface-low, #f8f3eb);
}
.domain-tools__inner { max-width: var(--container-max); margin: 0 auto; }
.domain-tools__head { margin-bottom: 2rem; }
.domain-tools__head h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color: var(--primary);
  margin: 0.3rem 0 0;
  letter-spacing: -0.02em;
}
.domain-tools__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.domain-tool-card {
  background: #fff;
  border: 1px solid var(--surface-low, #ede9e3);
  border-radius: 0.875rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.18s;
}
.domain-tool-card:hover {
  box-shadow: 0 6px 24px -8px rgba(0,102,44,0.14);
  transform: translateY(-2px);
}
/* Sous-thème pas encore publié : carte grisée, non cliquable */
.domain-tool-card--soon {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}
.domain-tool-card__soon {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-muted);
}
.domain-tool-card__icon { font-size: 1.6rem; color: var(--primary); }
.domain-tool-card__label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--on-surface);
}
.domain-tool-card__desc {
  font-size: 0.8rem;
  color: var(--on-surface-muted);
  line-height: 1.55;
}

/* ─── Cartes « Services réservés aux membres » (Tous les services) ───────────
   Icône carrée à gauche (≈ 2 lignes du titre) + titre, puis description dessous. */
/* ─── Intro « Nos services » : mêmes cartes que la section membres, sans icône
   (verbe principal en titre de carte - Feedback 9). ───── */
.svc-grid--intro { margin-top: 0; }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.svc-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.6rem 1.5rem;
  background: var(--surface-lowest, #fff);
  border: 1px solid var(--surface-high);
  border-radius: 0.9rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.18s ease;
}
a.svc-card:hover {
  box-shadow: 0 8px 26px -12px rgba(0, 102, 44, 0.2);
  transform: translateY(-3px);
}
.svc-card__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.svc-card__icon {
  flex-shrink: 0;
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background: var(--surface-high);
  color: var(--primary);
  font-size: 1.5rem;
}
.svc-card__title {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.3;
}
.svc-card__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--on-surface-muted);
  line-height: 1.6;
}
/* Feedback 10 : différencier les encadrés intro (non-cliquables) des cartes cliquables - retirer la boîte blanche (ENG-49) */
.svc-grid--intro .svc-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* ─── Domaines de consultation (page consultations juridiques) ───────────────
   ENG-178 : ces domaines n'étaient pas cliquables mais portaient la boîte
   blanche des cartes .svc-card, ce qui les faisait passer pour des boutons.
   Ils reprennent désormais .cj-list - la liste à puce verte déjà utilisée deux
   fois dans cette même section - sur 2 colonnes pour rester compact.
   Interligne de ligne plus généreux que .cj-list : les libellés longs passent
   sur deux lignes et se toucheraient avec le gap de 0.5rem. */
.cj-domains-list {
  column-gap: 1.5rem;
  row-gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* On conserve la typographie des anciennes cartes (serif, 1.1rem, vert) : le
   ticket ne demande que le retrait du fond blanc, pas un changement de taille.
   Le vert distingue aussi ces domaines des deux listes de process (texte
   foncé) placées juste à côté dans la même section. */
.cj-domains-list li {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--primary);
}
/* le libellé long (gestion/transmission) occupe toute la ligne */
.cj-domains-list li:last-child { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .cj-domains-list { grid-template-columns: 1fr; }
}

/* ─── Micro-section ressource « Bail à ferme » (Tous les services) ─────────── */
.svc-resource {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.75rem 2rem;
  background: var(--surface-low, #f8f3eb);
  border: 1px solid var(--surface-high);
  border-radius: 1rem;
}
.svc-resource__icon {
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 0.8rem;
  background: var(--surface-lowest, #fff);
  color: var(--primary);
  font-size: 1.8rem;
}
.svc-resource__text { flex: 1 1 300px; }
.svc-resource__title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
}
.svc-resource__desc {
  margin: 0;
  font-size: 0.92rem;
  color: var(--on-surface-muted);
  line-height: 1.55;
  max-width: 62ch;
}
.svc-resource__btn { flex-shrink: 0; }
.domain-articles {
  padding: 4rem var(--container-gutter);
}
.domain-articles__inner { max-width: var(--container-max); margin: 0 auto; }
/* Bail à ferme : aligne le bloc articles sur la colonne 1080px des sections
   au-dessus (page-domaine garde sa largeur 1280px par cohérence avec ses voisins). */
.baf-articles .domain-articles__inner { max-width: var(--content-max); }
.domain-articles__head { margin-bottom: 2rem; }
.domain-articles__head h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color: var(--primary);
  margin: 0.3rem 0 0;
  letter-spacing: -0.02em;
}
.domain-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.domain-articles__footer {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
.domain-cta {
  background: var(--primary);
  padding: 4rem var(--container-gutter);
  text-align: center;
}
.domain-cta__inner { max-width: 680px; margin: 0 auto; }
.domain-cta h2 {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 600;
  color: #fff;
  margin: 0.4rem 0 2rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.domain-cta .eyebrow { color: var(--tertiary-fixed, #e8f5e0); }
.domain-cta__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.domain-cta .btn--outline {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.domain-cta .btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
@media (max-width: 1000px) {
  .domain-tools__grid { grid-template-columns: repeat(2, 1fr); }
  .domain-articles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .domain-tools { padding: 2.5rem 1.25rem; }
  .domain-articles { padding: 2.5rem 1.25rem; }
  .domain-cta { padding: 2.5rem 1.25rem; }
  .domain-tools__grid { grid-template-columns: 1fr; }
  .domain-articles__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   HOMEPAGE - FP STATS BAR
══════════════════════════════════════════════════════ */
.fp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1280px;
  margin: 2rem auto 0;
  padding: 0 2rem;
  gap: 0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 40px -16px rgba(0,102,44,0.18);
  position: relative;
  z-index: 2;
}
.fp-stat {
  background: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-right: 1px solid var(--surface-low, #f0ece6);
}
.fp-stat:last-child { border-right: none; }
.fp-stat__num {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.fp-stat__num em {
  font-style: italic;
  color: var(--secondary, #bd7419);
  font-size: 0.75em;
  margin-left: 0.2rem;
}
.fp-stat__icon {
  font-size: 1.75rem;
  color: var(--primary);
  line-height: 1;
}
.fp-stat__label {
  font-size: 0.7rem;
  color: var(--on-surface-muted, #78736a);
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .fp-stats { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
  .fp-stat:nth-child(2) { border-right: none; }
  .fp-stat:nth-child(1),
  .fp-stat:nth-child(2) { border-bottom: 1px solid var(--surface-low, #f0ece6); }
}
@media (max-width: 600px) {
  .fp-stats { grid-template-columns: 1fr; padding: 0 1rem; }
  .fp-stat { border-right: none; border-bottom: 1px solid var(--surface-low, #f0ece6); }
  .fp-stat:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════
   HOMEPAGE - WHY JOIN (POURQUOI S'AFFILIER)
══════════════════════════════════════════════════════ */
.why-join {
  padding: 5rem 2rem;
  background: var(--surface-low);
}
.why-join__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.why-join__head {
  margin-bottom: 2.5rem;
}
.why-join__head .eyebrow {
  color: var(--secondary);
}
.why-join__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--primary);
  margin: 0.4rem 0 0;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.why-join__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.why-join__card {
  background: var(--surface-lowest);
  border-radius: 1.4rem;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid var(--surface-highest);
  transition: transform .35s ease, box-shadow .35s ease;
}
.why-join__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -16px rgba(0,102,44,0.18);
}
.why-join__icon {
  font-size: 1.75rem;
  color: var(--primary);
}
.why-join__card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--on-surface);
  margin: 0;
  line-height: 1.2;
}
.why-join__card-body {
  font-size: 0.85rem;
  color: var(--on-surface-muted);
  line-height: 1.6;
  margin: 0;
}
.why-join__cta {
  display: flex;
  justify-content: center;
}
@media (max-width: 1100px) {
  .why-join__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .why-join { padding: 3rem 1.25rem; }
  .why-join__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   HOMEPAGE - CTA STRIP
══════════════════════════════════════════════════════ */
.cta-strip {
  background: var(--primary);
  padding: 2rem 2rem;
}
.cta-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.cta-strip__text {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.cta-strip__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
.btn--cta-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.18s, transform 0.18s;
}
.btn--cta-strip:hover {
  background: var(--tertiary-fixed, #e8f5e0);
  transform: translateY(-1px);
}
.cta-strip__secondary {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-strip__secondary:hover {
  color: #fff;
}
@media (max-width: 800px) {
  .cta-strip { padding: 1.5rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════ */

/* Hero */
.contact-hero {
  background: var(--primary);
  color: #fff;
  /* Pas de min-height : la bande épouse son contenu, padding vertical
     symétrique via --hero-pad-y → contenu optiquement centré (cf. .qsn-hero). */
  margin-top: var(--hero-nav-clear);
  padding: var(--hero-pad-y) var(--container-gutter);
  /* flex-start (et non center) : voir l'explication sur .qsn-hero - c'est ce
     qui aligne le fil d'Ariane de Contact sur celui de Bail à ferme. */
  display: flex; flex-direction: column; justify-content: flex-start;
  position: relative;
}
.contact-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.08; mix-blend-mode: overlay; pointer-events: none;
}
.contact-hero__inner {
  width: 100%;
  max-width: var(--container-max); margin: 0 auto;
  position: relative; z-index: 1;
}
.contact-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--secondary-light);
  margin-bottom: 1.25rem;
}
.contact-hero__eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--secondary-light); opacity: 0.7;
}
.contact-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 600; line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 1.25rem;
  color: #fff; text-wrap: balance;
}
.contact-hero__title em { font-style: normal; font-weight: inherit; color: inherit; } /* ENG-45 item E */
.contact-hero__lead {
  font-size: 0.95rem; line-height: 1.7;
  color: rgba(255,255,255,0.78);
  margin: 0; max-width: 56ch;
}
.contact-hero__aside {
  align-self: end;
  border-left: 1px solid rgba(255,255,255,0.20);
  padding: 0.5rem 0 0.5rem 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.contact-hero__aside-item { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-hero__aside-label {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.contact-hero__aside-value {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 500;
  color: #fff; line-height: 1.3;
}

/* CONTACT HERO - RESPONSIVE */
@media (max-width: 1000px) {
  .contact-hero__inner { max-width: 100%; }
}
@media (max-width: 768px) {
  /* Mobile : la clairance navbar est déjà gérée en marge (valeur mobile de
     --hero-nav-clear) ; padding symétrique conservé, rien à redéfinir. */
  .contact-hero__title { font-size: var(--page-title-size-mobile); }
  .contact-hero__aside { padding-left: 1.5rem; gap: 1.2rem; }
  .contact-strip-wrap { margin-top: -3rem; }
}

/* Cards strip */
.contact-strip-wrap {
  width: min(var(--container-max), 100% - 2 * var(--container-gutter));
  margin: -1rem auto 0;
  position: relative; z-index: 2;
}
.contact-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(23,57,1,0.10);
  border-radius: 1.2rem;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(23,57,1,0.35);
}
.contact-info-card {
  background: var(--surface-lowest);
  padding: 1.1rem 1.5rem;
  display: flex; flex-direction: row; align-items: center; gap: 1rem;
}
.contact-info-card__icon {
  width: 36px; height: 36px;
  border-radius: 0.5rem;
  background: var(--surface-low);
  color: var(--primary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.contact-info-card__icon svg { width: 18px; height: 18px; display: block; }
.contact-info-card__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.contact-info-card__label {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--secondary);
}
.contact-info-card__value {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 600;
  color: var(--primary); line-height: 1.3; margin: 0;
}
.contact-info-card__value a { color: inherit; text-decoration: none; }
.contact-info-card__value a:hover { text-decoration: underline; text-underline-offset: 2px; }
.contact-info-card__detail { font-size: 0.8rem; line-height: 1.5; color: var(--on-surface-muted); margin: 0; }
.contact-info-card__detail a {
  color: var(--on-surface-muted);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(23,57,1,0.2);
}

/* Section wrapper */
.contact-section {
  width: min(var(--container-max), 100% - 2 * var(--container-gutter));
  margin: 0 auto;
  padding: clamp(4rem, 7vw, 7rem) 0;
}
.contact-section__head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem; align-items: end;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(23,57,1,0.10);
}
.contact-section__head-left { display: flex; flex-direction: column; gap: 0.75rem; }
.contact-section__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600; color: var(--primary);
  line-height: 1.08; letter-spacing: -0.01em;
  margin: 0; text-wrap: balance;
}
.contact-section__title em { font-style: normal; font-weight: inherit; color: inherit; } /* ENG-45 item E */
.contact-section__lead {
  font-size: 1.05rem; line-height: 1.7;
  color: var(--on-surface-muted);
  margin: 0; max-width: 56ch;
  align-self: end; padding-bottom: 0.25rem;
}
.contact-section__lead a {
  color: var(--primary-light); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(58,104,32,0.3);
}

/* Two-column form + sidebar layout */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}

/* Form fields */
.cf-group { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.5rem; }
.cf-group--half {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-bottom: 1.5rem;
}
.cf-group--half .cf-group { margin-bottom: 0; }
.cf-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--primary);
}
.cf-label span { color: var(--secondary); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 0.3rem; font-size: 0.78rem; }
.cf-input,
.cf-select,
.cf-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--surface-high);
  border-radius: 0.55rem;
  background: var(--surface-lowest);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--on-surface);
  transition: border-color .25s, box-shadow .25s;
  outline: none;
}
.cf-input::placeholder,
.cf-textarea::placeholder { color: var(--on-surface-muted); opacity: 0.6; }
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--primary-pale);
  box-shadow: 0 0 0 3px rgba(152,194,123,0.18);
}
.cf-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378736a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.cf-textarea { resize: vertical; min-height: 140px; line-height: 1.65; }
.cf-hint { font-size: 0.78rem; color: var(--on-surface-muted); line-height: 1.45; margin-top: 0.25rem; }
.cf-checkbox {
  display: flex; align-items: flex-start; gap: 0.65rem;
  margin-bottom: 1.5rem; cursor: pointer;
}
.cf-checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.cf-checkbox__text { font-size: 0.88rem; color: var(--on-surface-muted); line-height: 1.5; }
.cf-checkbox__text a { color: var(--primary-light); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(58,104,32,0.3); }
.cf-submit { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }

/* Success state */
.contact-success {
  text-align: center;
  padding: 3rem 2rem;
}
.contact-success__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary); color: var(--tertiary-fixed);
  display: grid; place-items: center;
  margin: 0 auto 1.5rem;
}
.contact-success__icon svg { width: 32px; height: 32px; }
.contact-success__title {
  font-family: var(--font-display);
  font-size: 1.65rem; font-weight: 600;
  color: var(--primary); margin: 0 0 0.75rem;
}
.contact-success__text {
  font-size: 1rem; line-height: 1.7;
  color: var(--on-surface-muted);
  max-width: 44ch; margin: 0 auto;
}

/* Sidebar */
.contact-sidebar { display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 2rem; }
.contact-sidebar-block {
  background: var(--surface-lowest);
  border-radius: 1.2rem;
  padding: 1.75rem;
  border: 1px solid rgba(23,57,1,0.06);
}
.contact-sidebar-block .qsn-eyebrow { margin-bottom: 1rem; }
.contact-sidebar-block__title {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600;
  color: var(--primary); line-height: 1.25;
  margin: 0 0 0.85rem;
}
.contact-sidebar-block--dark {
  background: #65332c;
  color: #fff; border: 0;
}
.contact-sidebar-block--dark .qsn-eyebrow { color: #f08a5c; }
.contact-sidebar-block--dark .qsn-eyebrow::before { background: #f08a5c; }
.contact-sidebar-block--dark .contact-sidebar-block__title { color: #fff; }
.contact-sidebar-block--dark p { font-size: 0.92rem; line-height: 1.65; color: rgba(255,255,255,0.85); margin: 0 0 1.25rem; }

/* Hours list */
.contact-hours-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.contact-hours-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(23,57,1,0.06);
  font-size: 0.92rem;
}
.contact-hours-row:last-child { border-bottom: 0; }
.contact-hours-row__day { color: var(--on-surface); font-weight: 500; }
.contact-hours-row__time { color: var(--on-surface-muted); }
.contact-hours-row__time--closed { color: var(--secondary); font-style: italic; font-weight: 500; }

/* Info rows inside sidebar */
.contact-info-row {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(23,57,1,0.06);
}
.contact-info-row:last-child { border-bottom: 0; }
.contact-info-row__icon {
  width: 32px; height: 32px; border-radius: 0.4rem;
  background: var(--surface-low); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0; margin-top: 1px;
}
.contact-info-row__icon svg { width: 16px; height: 16px; display: block; }
.contact-info-row__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.contact-info-row__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary); }
.contact-info-row__value { font-size: 0.95rem; font-weight: 500; color: var(--on-surface); line-height: 1.45; }
.contact-info-row__value a { color: var(--primary); text-decoration: none; font-weight: 600; transition: color .2s; }
.contact-info-row__value a:hover { color: var(--primary-light); }

/* Map embed section */
.contact-map-section { background: var(--surface-low); }
.contact-map-section__inner {
  width: min(var(--container-max), 100% - 2 * var(--container-gutter)); margin: 0 auto;
  padding: clamp(4rem, 7vw, 7rem) 0;
}
.contact-map-embed {
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 8px 40px -8px rgba(23,57,1,0.18);
}
.contact-map-embed iframe {
  width: 100%; height: 380px; display: block;
}
.contact-map-embed__caption {
  background: var(--surface-lowest);
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.88rem; color: var(--on-surface-muted); font-weight: 500;
}
.contact-map-embed__caption svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }

/* Responsive */
@media (max-width: 1100px) {
  .contact-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .contact-hero__aside { border-left: 0; border-top: 1px solid rgba(255,255,255,0.20); padding: 1.5rem 0 0; flex-direction: row; gap: 3rem; }
  .contact-section__head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-sidebar { position: static; }
  .contact-strip-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Side padding governed by --container-gutter */
  .contact-hero__aside { flex-direction: column; gap: 1.25rem; }
  .cf-group--half { grid-template-columns: 1fr; gap: 1rem; }
  .contact-map-embed iframe { height: 260px; }
}

/* Conseils cynégétiques - tableau des représentants des propriétaires */
.cyneg-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.cyneg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.cyneg-table th,
.cyneg-table td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--surface-high, #ece8e0);
}
.cyneg-table thead th {
  font-family: var(--font-display, Georgia, serif);
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
  white-space: nowrap;
}
.cyneg-table tbody tr:nth-child(even) { background: var(--surface-low, #f6f3ee); }

/* ── Favoris articles (ENG-279) ──────────────────────────────────────────
 * Sur les cartes : pastille en haut-droite, en pendant du badge thème
 * (haut-gauche). Dans la page article : bouton en ligne parmi les pills.
 */
.ntf-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--on-surface-muted, #6b6a63);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(29, 28, 23, 0.18);
  transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.ntf-fav .material-symbols-outlined { font-size: 1.15rem; line-height: 1; }

.ntf-fav:hover { color: var(--primary); transform: translateY(-1px); }

/* En ligne dans l'en-tête de l'article - repos uniquement.
   Déclaré AVANT .is-active : à spécificité égale (0,2,0) c'est l'ordre qui
   tranche, et l'état actif doit gagner. Placé après, le fond gris écrasait
   le fond « primary » et le favori ne se voyait plus dans l'article. */
.article-page__theme-links .ntf-fav {
  width: 2.1rem;
  height: 2.1rem;
  background: var(--surface-2, #f2f1ec);
  box-shadow: none;
}

/* État actif porté par le fond, pas par l'icône : la police Material Symbols
   est chargée avec l'axe FILL figé à 0, donc `favorite` et `favorite_border`
   rendent de façon identique (c'était déjà vrai des `bookmark` d'avant le
   passage au cœur). Sans ce contraste, le clic ne se voyait pas. */
.ntf-fav.is-active {
  background: var(--primary);
  color: #fff;
}
.ntf-fav.is-active:hover { background: var(--primary); color: #fff; }
.ntf-fav:disabled { opacity: 0.55; cursor: progress; }

.ntf-fav:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Posé sur la photo de la carte */
.hub-card .ntf-fav {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  .ntf-fav { transition: none; }
  .ntf-fav:hover { transform: none; }
}

/* ── Bloc « Tableau » de la palette éditoriale ───────────────────────────
   Reprend le traitement déjà appliqué à .apg-table et .cdt-table, qui le
   faisaient chacun dans leur propre feuille : au-delà de 900px un tableau
   classique, en dessous chaque ligne devient une carte dont la 1re cellule
   est le titre, les autres étiquetées par leur intitulé de colonne via
   data-label. Seuil à 900px comme .apg-table. */
.ntf-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--surface-high, #ece8e0);
  border-radius: 1rem;
  background: var(--surface-lowest, #fff);
  margin: 1.5rem 0;
}
.ntf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.ntf-table th,
.ntf-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--surface-high, #ece8e0);
}
/* En-tête sur fond vert NTF, texte blanc : les colonnes se distinguent
   franchement des lignes de données, y compris sur un tableau long. */
.ntf-table thead th {
  font-family: var(--font-display, Georgia, serif);
  font-weight: 700;
  background: var(--primary, #00662c);
  color: #fff;
  border-bottom-color: var(--primary, #00662c);
}
.ntf-table tbody tr:last-child th,
.ntf-table tbody tr:last-child td { border-bottom: 0; }
.ntf-table__rowhead { font-weight: 700; }

@media (max-width: 900px) {
  .ntf-tablewrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  /* En-têtes retirés de l'affichage mais gardés pour les lecteurs d'écran. */
  .ntf-table thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  .ntf-table,
  .ntf-table tbody,
  .ntf-table tbody tr,
  .ntf-table tbody th,
  .ntf-table tbody td { display: block; }

  .ntf-table tbody tr {
    margin-bottom: 1rem;
    padding: 0.35rem 0.5rem 0.6rem;
    border: 1px solid var(--surface-high, #ece8e0);
    border-radius: 0.9rem;
    background: var(--surface-lowest, #fff);
  }
  .ntf-table tbody tr:last-child { margin-bottom: 0; }

  .ntf-table__rowhead {
    padding: 0.5rem 0.75rem 0.6rem;
    border-bottom: 1px solid var(--surface-high, #ece8e0);
    font-family: var(--font-display, Georgia, serif);
    font-size: 1rem;
    white-space: normal;
  }
  .ntf-table tbody td {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 0;
    white-space: normal;
  }
  .ntf-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 100%;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-muted, #6f6a61);
  }
  .ntf-table tbody td:not([data-label])::before { display: none; }
}

/* ── Page réservée aux membres (ENG-321) ──────────────────────────────────
   Le fragment portait `.qsn-page` (aucune règle nulle part) et
   `.baf-hero__btn` (un style de héros de sous-thème, fond saumon #f08a5c).
   Résultat : un bloc sans cadre collé au menu, et deux boutons saumon pâle
   identiques — impossible de distinguer l'action principale de la secondaire,
   et sans rapport avec les boutons de la barre de navigation juste au-dessus.

   Même carte que `.article-lock`, le verrou des articles réservés : les deux
   disent la même chose, ils doivent se ressembler. */
/* Le header est fixe et porte DEUX rangées sur desktop (liens utilitaires puis
   menu principal) : il dépasse largement les 65px des pages à une rangée. Sans
   cette réserve, la carte venait toucher le menu. Elle est seule sur la page,
   donc elle peut respirer. */
.member-gate {
  max-width: var(--content-max, 1280px);
  margin: 0 auto;
  padding: clamp(10rem, 16vw, 13rem) var(--container-gutter, 1.25rem) clamp(5rem, 10vw, 8rem);
}

/* Une seule rangée sous 1100px : la réserve peut diminuer d'autant. */
@media (max-width: 1100px) {
  .member-gate { padding-top: clamp(7rem, 14vw, 9rem); }
}

.member-gate__panel {
  max-width: 620px;
  margin: 0 auto;
  border-radius: 1.35rem;
  padding: clamp(2.4rem, 5vw, 3.2rem) clamp(1.6rem, 4vw, 2.6rem);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(23, 57, 1, 0.12);
  box-shadow: 0 18px 42px rgba(44, 70, 26, 0.08);
  text-align: center;
}

.member-gate__icon {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--secondary);
  margin-bottom: 0.9rem;
}

.member-gate__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  color: var(--primary);
  line-height: 1.2;
  margin: 0 0 0.7rem;
}

.member-gate__text {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--on-surface);
  margin: 0 auto 1.6rem;
  max-width: 44ch;
}

/* Les deux boutons gardent `btn--nav` / `btn--nav-alt` : mêmes couleurs que la
   barre de navigation, et le vert marque l'action principale. */
.member-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@media (max-width: 480px) {
  .member-gate__actions { flex-direction: column; }
  .member-gate__actions .btn { width: 100%; }
}