/**
 * Maître Chloé Leblanc — Base stylesheet
 * Maître C. Leblanc — 4 Rue Saint-François de Sales, 74000 Annecy
 */

/**
 * Design tokens
 */
:root {
  /* Palette — from mockup design.json */
  --color-primary: #1C1C1F;
  /* Bleu profond */
  --color-secondary: #485563;
  /* Gris ardoise */
  --color-accent: #C2A15A;
  /* Or doux */
  --color-bg: #FAF9F7;
  /* Blanc cassé */
  --color-bg-subtle: #F2EFE9;
  /* Légèrement plus sombre */
  --color-white: #FFFFFF;
  --color-text: #1C1C1F;
  --color-text-muted: #8896A4;
  --color-text-light: #6B5A4E;
  /* Taupe — texte secondaire */
  --color-border: #E5E0D8;
  --color-gold-light: #D4B96A;

  /* Typography */
  --font-heading: serif, Georgia, 'Times New Roman', Times;
  --font-body: sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial;

  /* Font sizes — mobile defaults */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.5rem;
  --text-4xl: 1.75rem;
  --text-5xl: 2.25rem;

  /* Spacing (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(28, 28, 31, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 28, 31, 0.10);
  --shadow-lg: 0 8px 32px rgba(28, 28, 31, 0.14);

  /* Easing — mockup convention */
  --ease-refined: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 0.25s var(--ease-refined);

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-5);
  --header-height: 56px;
}

@media (min-width: 480px) {
  :root {
    --header-height: 64px;
  }
}

@media (min-width: 640px) {
  :root {
    --text-3xl: 1.875rem;
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
    --container-padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 72px;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
  }
}

/**
 * Reset & base
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

main p a,
main li a,
main small a {
  color: var(--color-accent);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-body);
}

/**
 * Utilities
 */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section-padding {
  padding: var(--space-16) 0;

  @media (min-width: 640px) {
    & {
      padding: var(--space-20) 0;
    }
  }
}

.bg-light {
  background-color: var(--color-bg-subtle);
}

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

/**
 * Shared patterns
 */

/* Higlighted label */
p.label,
li.label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* 3-column section grids */
.grid-3c {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);

  @media (min-width: 640px) {
    & {
      gap: var(--space-8);
    }
  }

  @media (min-width: 640px) {
    & {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    & {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* Card base */
.card {
  border: 1px solid var(--color-border);
  transition: all var(--transition);

  &:hover {
    box-shadow: var(--shadow-md);
  }

  /* Icon */
  & .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Section card titles */
  & h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
  }

  /* Card body text */
  .text {
    color: var(--color-text-muted);
    line-height: 1.7;
  }

  /* Card links */
  .link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
  }

  /* Person avatar */
  .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);

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

  /* Person role */
  .role {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: var(--space-2);
  }
}

/**
 * Variante « card--bigpic » (page /etude, section « L'équipe ») — photo de
 * membre plus grande, testée en parallèle du design par défaut sur les
 * mêmes données (CPT `odl_team_member`, shortcode
 * [odl_team_grid variant="bigpic"]).
 */
.card--bigpic .avatar {
  width: 96px;
  height: 96px;
  margin-bottom: var(--space-5);
}

/**
 * Variante « card--lgpic » (page /etude, section « L'équipe ») — photo
 * rectangulaire pleine largeur, toujours en tête de carte. `.avatar` déborde
 * du padding de `section.header-grid .card` via des marges négatives
 * (--space-6 mobile, --space-8 dès 640px, en écho au padding responsive de
 * la carte) ; `.card` a déjà `overflow: hidden` pour la contenir proprement.
 * `object-position: center -33px` sur l'image : recadrage `cover` décalé
 * vers le haut (valeur empirique, meilleur compromis sur les 3 photos
 * actuelles sans avoir à les retoucher — là où se trouve le visage sur un
 * portrait plus haut que large).
 */
.card--lgpic .avatar {
  width: calc(100% + var(--space-6) * 2);
  height: 200px;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  border-radius: 0;

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

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

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

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

/* Person profile */
.profile {
  text-align: center;

  & img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto var(--space-4);
    border: 3px solid rgba(255, 255, 255, 0.2);
  }
}

/* Article callout block */
.article-callout {
  background-color: rgba(26, 86, 219, 0.06);
  border-left: 4px solid var(--color-secondary);
  padding: var(--space-5) var(--space-6);

  & p {
    margin: 0;
    color: var(--color-primary);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1.7;
  }
}

/* Article tags */
ul.article-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);

  & li {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    background-color: rgba(26, 86, 219, 0.08);
    padding: 4px 12px;
  }
}

/* Icon box flex centering */
.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/**
 * Section patterns
 */

section {
  & h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: var(--space-4);
  }

  & header {
    margin-bottom: var(--space-8);
    /* mobile: 2rem */

    @media (min-width: 640px) {
      & {
        margin-bottom: var(--space-12);
        /* tablet+: 3rem */
      }
    }

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

    &.centered {
      text-align: center;

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

address {
  font-style: normal;
}

/**
 * Buttons
 */
.btn {
  padding: 0.75rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  transition: all var(--transition);
  /* white-space: nowrap; */
  text-align: center;
  text-decoration: none;

  &:has(svg) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

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

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

    &:hover {
      background-color: var(--color-gold-light);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(194, 161, 90, 0.35);
    }
  }

  &.btn-secondary {
    &.btn-lg {
      background-color: transparent;
      color: var(--color-white);
      border: 2px solid rgba(255, 255, 255, 0.55);
    }

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

  &.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);

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

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

    &:hover {
      background-color: #2e2e33;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(28, 28, 31, 0.30);
    }
  }

  /**
  * Buttons — full-width on mobile
  */
  &.btn-lg {
    width: 100%;
    justify-content: center;
  }

  @media (min-width: 640px) {
    &.btn-lg {
      width: auto;
      justify-content: initial;
    }
  }

  &.btn-sm,
  &.btn-filter {
    padding: 0.5rem 1.25rem;
    font-size: var(--text-sm);
  }

}

/**
 * Header & navigation
 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);

  &.scrolled {
    box-shadow: var(--shadow-md);
  }

  & .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
  }
}

.logo {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  text-decoration: none;
  flex-shrink: 0;

  & .icon {
    --size: clamp(28px, 7vw, 60px);
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;

    & img {
      width: var(--size);
      height: var(--size);
    }
  }

  & h1 {
    display: flex;
    flex-direction: column;
    line-height: 1.2;

    & span {
      font-family: var(--font-heading);
      font-size: clamp(0.8rem, 3vw, 1.25rem);
      font-weight: 400;
      color: var(--color-primary);
      letter-spacing: 0.02em;

      &.tagline {
        display: none;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;

        @media (min-width: 480px) {
          display: block;
        }
      }
    }
  }
}

header {
  --icon-size: 36px;

  & .container {
    padding-inline: calc(var(--container-padding) / 4);

    @media (min-width: 640px) {
      padding-inline: var(--container-padding);
    }
  }

  & .header-inner {
    gap: clamp(0.5rem, 2vw, 1rem);
  }

  /* Logo pousse CTA + burger ensemble vers la droite */
  & .logo {
    margin-right: auto;
  }

  /* ── CTA visible sur toutes les vues ── */
  & .header-cta {
    display: flex;
    flex-shrink: 0;

    & .btn-sm {
      font-size: clamp(0.65rem, 2vw, 0.875rem);
      padding: clamp(0.3rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1.25rem);
      white-space: nowrap;

      /* ≥ 475px : aussi haute que .opening-time .icon (--icon-size) */
      @media (min-width: 375px) {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--icon-size);
      }

      /* ≥ 640px : la relation s'inverse (cf. .opening-time .icon) — le CTA
         reprend sa hauteur fluide naturelle, l'icône vient s'y caler. */
      @media (min-width: 640px) {
        height: auto;
      }
    }
  }

  /* ── Horaires — masquées < 375px (pas de place dans la barre à hauteur
       fixe) ; icône compacte + panneau au survol dès 375px, même langage
       visuel que le dropdown de navigation .has-sub .sub (@media 1024px).
       <details>/<summary> natif (même widget que l'accordéon FAQ) : ouvre
       le panneau au tap/clic via l'attribut [open], en plus du survol/focus
       clavier déjà géré — CSS3 seul, aucun JS requis, fiable sur mobile où
       :hover n'existe pas et où un <span> non focusable ne reçoit jamais
       :focus-within au tap. ── */
  & .opening-time {
    display: none;

    @media (min-width: 375px) {
      display: flex;
      align-items: center;
      position: relative;
      flex-shrink: 0;

      & .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--icon-size);
        height: var(--icon-size);
        color: var(--color-accent);
        background-color: rgba(28, 28, 31, 0.65);
        list-style: none;
        cursor: pointer;
        transition: background-color var(--transition);

        &::-webkit-details-marker {
          display: none;
        }

        &:hover {
          background-color: rgba(28, 28, 31, 0.80);
        }

        & svg {
          width: 18px;
          height: 18px;
        }

        /* ≥ 640px : même hauteur que .header-cta .btn-sm (padding vertical
           clamp + line-height:1 ⇒ font-size), en restant carrée. */
        @media (min-width: 640px) {
          --cta-size: calc(clamp(0.65rem, 2vw, 0.875rem) + (2 * clamp(0.3rem, 1vw, 0.5rem)));
          width: var(--cta-size);
          height: var(--cta-size);
        }
      }

      /* Chrome ≥ 131 enveloppe le contenu non-<summary> d'un <details> dans
         un pseudo-élément UA ::details-content, dont la feuille de style
         interne bascule sa propre content-visibility entre hidden (fermé)
         et visible ([open]). content-visibility:hidden sur cet ancêtre
         saute tout le rendu de son sous-arbre, quoi qu'on force sur .panel
         (display, opacity…) — d'où le survol muet tant que [open] n'est pas
         posé (le clic, lui, fonctionnait déjà). On reprend la main : le
         reveal visuel est entièrement géré ci-dessous (opacity/visibility),
         ce mécanisme UA n'a plus lieu d'exister ici. Sans effet ailleurs
         (::details-content inconnu de Firefox/Safari/Chrome < 131). */
      &::details-content {
        content-visibility: visible;
      }

      & .panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        padding: var(--space-4);
        min-width: 220px;
        background-color: var(--color-white);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all var(--transition);
        z-index: 100;

        & h3 {
          margin: 0;
          font-size: var(--text-xs);
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          color: var(--color-accent);
        }

        & ul {
          display: flex;
          flex-direction: column;
          gap: var(--space-2);
        }

        & li {
          display: flex;
          flex-direction: column;
          gap: 2px;
          font-size: var(--text-xs);
          color: var(--color-text-muted);
          white-space: nowrap;

          & + li {
            padding-top: var(--space-2);
            border-top: 1px solid var(--color-border);
          }

          & span:last-child {
            font-weight: 500;
            color: var(--color-text);
          }
        }
      }

      /* [open] (tap natif sur <summary>) + :hover + :focus-within, tous
         actifs en permanence — volontairement pas de gating via
         @media (hover:none)/(pointer:coarse) : ces media features testent
         le pointeur PRINCIPAL, pas « tous les pointeurs disponibles », et
         sont donc à tort évaluées « tactile » dans plusieurs contextes
         desktop (mode Responsive des DevTools, laptop tactile, écran
         tactile externe) — ce qui désactivait le survol par erreur. Sans
         gating, le comportement reste correct nativement : :hover ne se
         déclenche de toute façon jamais sur un appareil tactile pur (pas de
         curseur), donc le survol « prime » naturellement sur desktop et le
         tap/clic reste le seul déclencheur possible sur tactile. */
      &[open] .panel,
      &:hover .panel,
      &:focus-within .panel {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }
  }

  /* ── Checkbox hack — input caché, pur vecteur CSS ── */
  & #menu-toggle {
    display: none;
  }

  /* ── Burger ── */
  & .burger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    gap: 5px;
    cursor: pointer;
    transition: background-color var(--transition);

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

    & span {
      display: block;
      width: 22px;
      height: 2px;
      background-color: var(--color-primary);
      transition: all var(--transition);
    }
  }

  /* Burger → croix quand menu ouvert */
  &:has(#menu-toggle:checked) .burger-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  &:has(#menu-toggle:checked) .burger-btn span:nth-child(2) {
    opacity: 0;
  }

  &:has(#menu-toggle:checked) .burger-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Menu ouvert via checkbox */
  &:has(#menu-toggle:checked) .menu {
    display: block;
  }

  /* ── Menu — mobile par défaut ── */
  & .menu {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    overflow-y: auto;
    z-index: 999;
    padding: var(--space-6);

    & ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    & li.item>a {
      display: block;
      padding: var(--space-4) 0;
      font-size: var(--text-lg);
      font-weight: 500;
      color: var(--color-primary);
      border-bottom: 1px solid var(--color-border);
      white-space: normal;

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

    & li.item.active>a {
      color: var(--color-accent);
    }

    /* Sous-menu — toujours visible sur mobile */
    & li.item.has-sub .sub {
      display: block;
      padding: var(--space-2) 0 var(--space-4) var(--space-4);

      & li a {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) 0;
        font-size: var(--text-base);
        color: var(--color-text-muted);

        &:hover,
        &.active {
          color: var(--color-accent);
        }

        & svg.icon {
          width: 18px;
          height: 18px;
          color: var(--color-accent);
          flex-shrink: 0;
          opacity: 0.8;
        }
      }
    }

    & li.item.cta {
      display: none;
    }
  }

  /* ── Desktop ── */
  @media (min-width: 1024px) {
    & .logo {
      margin-right: 0;
    }

    & .header-cta {
      display: flex;
      flex-shrink: 0;
    }

    & .burger-btn {
      display: none;
    }

    & .menu {
      display: flex;
      position: static;
      padding: 0;
      background: none;
      overflow: visible;
      align-items: center;

      & ul {
        display: flex;
        align-items: center;
        /* gap: var(--space-1); */
        list-style: none;
        margin: 0;
        padding: 0;
      }

      & li.item {
        position: relative;
      }

      & li.item>a {
        display: block;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text);
        border-bottom: none;
        white-space: nowrap;
        transition: color var(--transition), background-color var(--transition);

        &:hover {
          color: var(--color-accent);
          background-color: rgba(194, 161, 90, 0.06);
        }
      }

      & li.item.active>a {
        color: var(--color-accent);
        background-color: rgba(194, 161, 90, 0.06);
      }

      /* Flèche dropdown */
      & li.item.has-sub>a::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: var(--space-1);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid currentColor;
        vertical-align: middle;
      }

      /* Sous-menu dropdown */
      & li.item.has-sub .sub {
        display: block;
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        padding: var(--space-2);
        background-color: var(--color-white);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
        min-width: 240px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all var(--transition);
        z-index: 100;

        & li a {
          display: flex;
          align-items: center;
          gap: var(--space-3);
          padding: var(--space-3) var(--space-4);
          font-size: var(--text-sm);
          color: var(--color-text);
          white-space: nowrap;
          transition: all var(--transition);

          &:hover,
          &.active {
            background-color: var(--color-bg);
            color: var(--color-accent);
          }

          & svg.icon {
            width: 20px;
            height: 20px;
            color: var(--color-accent);
            flex-shrink: 0;
          }
        }
      }

      & li.item.has-sub:hover .sub {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      /* CTA masqué sur desktop (présent dans .header-cta) */
      & li.item.cta {
        display: none;
      }
    }
  }

}

/* fin header */

/**
 * Hero section
 */
/* HERO SECTION — Content-adaptive height with equal vertical padding */
section.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: var(--space-12) 0;
  /* Mobile: equal top/bottom padding (3rem) — height adapts to content */
  background-image: url('../img/lac-annecy-talloires-duingt-bauges.jpeg');
  /* background-image: url('../img/lac-annecy-menthon-les-bauges.jpg'); */
  background-size: cover;
  background-position: center 30%;
  background-attachment: scroll;
  /* Mobile: scroll attachment prevents parallax jank on small screens */

  @media (min-width: 640px) {
    & {
      padding: var(--space-20) 0;
      /* Tablet+: more generous padding (5rem) */
      background-attachment: fixed;
      /* Tablet+: enable parallax effect on larger screens */

      &::after {
        bottom: var(--space-8);
        font-size: 1.5rem;
        /* Tablet+: restore original size and position */
      }
    }
  }

  @media (min-width: 1024px) {
    & {
      padding: var(--space-24) 0;
      /* Desktop: maximum padding (6rem) */
    }
  }

  /* Full-viewport hero (homepage only) */
  &.full {
    min-height: 100vh;
    justify-content: center;
    /* Full viewport homepage: fill screen and center content vertically */

    &::after {
      display: block;
      /* Show scroll indicator only on full-viewport homepage hero */
    }
  }

  /* Hero has photographic background; CTA keeps solid color */
  &::before {
    /* Overlay bleu profond semi-transparent (lisibilité texte blanc) */
    background: linear-gradient(135deg, rgba(242, 239, 233, 0.72) 0%, rgba(242, 239, 233, 0.50) 100%);
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Scroll indicator at bottom of hero (homepage only) */
  &::after {
    content: '↓';
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.60);
    animation: bounce 2s infinite;
    z-index: 2;
    display: none;
    /* Hidden by default (only shown on .hero.full) */
  }

  /* HERO TITLE — Mobile-first responsive sizing */
  & h1 {
    font-family: var(--font-heading);
    font-size: 1.875rem;
    /* Mobile (min): 30px. Avoid var(--text-5xl) which is 36px+ on mobile */
    font-weight: 400;
    /* color: var(--color-primary);
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; */
    width: fit-content;
    line-height: 1.15;
    margin-bottom: var(--space-4);
    /* Reduced margin on mobile for tighter layout */
    animation: fade-up 500ms var(--ease-refined) 180ms both;

    & span {
      color: inherit;
    }

    @media (min-width: 640px) {
      & {
        font-size: var(--text-5xl);
        /* Tablet+: 40px+ */
        margin-bottom: var(--space-6);
      }
    }
  }

  /* HERO SUBTITLE — Mobile-first responsive */
  & .subtitle {
    font-size: 0.95rem;
    /* Mobile: 15px (smaller on tiny screens) */
    color: var(--color-text);
    text-shadow: none;
    line-height: 1.6;
    margin-bottom: var(--space-6);
    /* Reduced from var(--space-10) on mobile */
    max-width: 100%;
    padding: 0 var(--space-2);
    /* Extra horizontal padding on mobile for breathing room */
    animation: fade-up 500ms var(--ease-refined) 280ms both;

    @media (min-width: 480px) {
      & {
        font-size: 1rem;
        /* Small phones: 16px */
        line-height: 1.7;
        margin-bottom: var(--space-8);
      }
    }

    @media (min-width: 640px) {
      & {
        font-size: var(--text-xl);
        /* Tablet+: 20px */
        padding: 0;
        /* Remove extra padding on tablet+ */
      }
    }

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

  /* HERO ACTIONS (Buttons) — Mobile-first */
  & nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Reduced gap on mobile (from var(--space-4)) */
    flex-wrap: wrap;
    align-items: center;
    /* Center buttons horizontally */
    justify-content: center;
    /* Center buttons vertically in container */
    width: 100%;
    max-width: calc(100% - 2rem);
    /* Relative width: 100% minus 1rem padding each side (prevents overflow @320px) */
    margin: 0 auto;
    /* Center the button container itself */
    animation: fade-up 500ms var(--ease-refined) 360ms both;

    & .btn {
      width: 100%;
      /* Full-width buttons on mobile (touch-friendly) */
    }

    @media (min-width: 480px) {
      & {
        max-width: 330px;
        /* Small phones: safe limit for two-button rows (future) */
      }
    }

    @media (min-width: 640px) {
      & {
        flex-direction: row;
        gap: var(--space-4);
        /* Restore original gap on tablet+ */
        max-width: 100%;
      }

      & .btn {
        width: auto;
        /* Buttons auto-width on tablet+ (not full-width) */
      }
    }

    @media (min-width: 1024px) {
      &.left {
        justify-content: flex-start;
        /* Align button to left on desktop (index2 variant only) */
      }
    }
  }

  /* HERO CONTAINER — Content layout (height handled by .hero padding) */
  & .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
    position: relative;
    z-index: 1;
    margin-top: var(--header-height);
    /* Offset content below header height (72px) for visual balance under fixed header */

    @media (min-width: 480px) {
      & {
        gap: var(--space-6);
      }
    }

    @media (min-width: 640px) {
      & {
        gap: var(--space-10);
      }
    }

    /* Single buttons inside hero (for domain pages /etude/*) */
    & .btn {
      width: 100%;
      /* Mobile: full-width for touch-friendly buttons */

      @media (min-width: 640px) {
        & {
          width: auto;
          max-width: none;
          /* Tablet+: auto-width */
        }
      }
    }

    /* HERO GRID LAYOUT — Two-column layout for hero content + availability card */
    &.grid-row {
      display: flex;
      flex-direction: column;
      gap: var(--space-8);
      /* Mobile: stacked vertically */
      text-align: left;

      @media (min-width: 1024px) {
        & {
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: var(--space-10);
          align-items: flex-start;
          /* Desktop: two columns, top-aligned */
        }
      }

      /* Hero content (left column) */
      & article {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
      }
    }
  }
}

/* Étude page hero — fixed-height to keep background crop consistent */
@scope (.page-about) {
  section.hero {
    background-image: url('../img/office-accueil-03.png');
    background-size: cover;
    background-position: center 35%;
    background-attachment: scroll;
    /* scroll: position relative to element, not viewport — prevents crop
       shift when console or other UI panels change the viewport height */
    min-height: 480px;

    /* Étude page — light beige overlay (#F2EFE9, --color-bg-subtle) */
    &::before {
      background: linear-gradient(135deg, rgba(242, 239, 233, 0.92) 0%, rgba(242, 239, 233, 0.80) 100%);
    }

    /* Étude page — dark text for legibility on the light beige overlay */
    & h1 {
      color: var(--color-primary);
      /* Deep blue title on light overlay */

      & span {
        display: block;
        /* Each \n-separated title line renders as its own block,
           guaranteeing the break at the authored point on all viewports
           — no <br> needed in the markup. */
        color: inherit;
        /* Cancel the global section.hero h1 span { color: gold-light }
           rule — on the étude page the h1 is dark blue, not white. */
      }
    }

    & .subtitle {
      color: var(--color-secondary);
      /* Slate grey subtitle */
      text-shadow: none;
      /* Remove dark shadow (unneeded on light background) */
    }
  }

  section.values {
    padding-top: 0;

    /* rille valeurs avec illustration */
    .values-grid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 1.5rem;
      margin: 2.5rem 0 0;

      & .card {
        padding: 0;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .08);

        & figure {
          margin: 0;
          position: relative;

          & img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
            transition: transform .4s ease;
          }

          &:hover img {
            transform: scale(1.04);
          }
        }

        & .body {
          padding: 1.25rem 1rem 1rem;

          & h3 {
            margin: 0 0 .4rem;
            font-size: var(--text-sm);
            color: var(--color-accent);
          }

          & p {
            margin: 0;
            font-size: .875rem;
            color: var(--color-secondary, #6b6b6b);
            line-height: 1.5;
          }
        }
      }

      @media (min-width: 640px) {
        & {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 1024px) {
        & {
          grid-template-columns: repeat(4, 1fr);
        }
      }
    }
  }

  /* Citation notaire (section "Votre interlocutrice") */
  blockquote {
    border-left: 3px solid var(--color-accent, #C9A96E);
    margin: 0 0 1.5rem 0;
    padding: .75rem 1.25rem;
    font-style: italic;
    color: var(--color-text);

    & cite {
      display: block;
      margin-top: .5rem;
      font-style: normal;
      font-size: .85rem;
      color: var(--color-secondary, #6b6b6b);
    }
  }
}

/* Pages service — hero avec photo humaine par domaine */
@scope (.page-service) {
  section.hero {
    background-size: cover;
    background-position: center center;

    &::before {
      background: linear-gradient(135deg, rgba(242, 239, 233, 0.88) 0%, rgba(242, 239, 233, 0.72) 100%);
    }

    & h1 {
      color: var(--color-primary);
    }

    & .subtitle {
      color: var(--color-secondary);
      text-shadow: none;
    }
  }

  section.faq {
    padding-top: 0;
  }
}


/* Contact page — digital fingerprint background (authenticity symbol) with light beige overlay and dark text */
@scope (.page-contact) {
  section.hero {
    background-image: url('../img/empreinte-digitale.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* Fills hero area without repeating; center keeps image sharp */
  }

  &::before {
    background: linear-gradient(135deg, rgba(242, 239, 233, 0.92) 0%, rgba(242, 239, 233, 0.80) 100%);
  }

  & h1 {
    color: var(--color-primary);
  }

  & .subtitle {
    color: var(--color-secondary);
    text-shadow: none;
  }
}

/* Page Tarifs — le libellé du CTA (« Simuler mes frais ») ne doit jamais
   passer sur 2 lignes, quelle que soit la largeur de viewport. */
@scope (.page-pricing) {
  section.hero {
    & .btn {
      white-space: nowrap;
    }
  }
}

/**
 * Section with header & grid
 */
section.header-grid {
  background-color: var(--color-white);

  & .card {
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
      url('../img/marble-rectangle.png');
    background-repeat: repeat;
    background-size: auto, 575px auto;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--color-accent), var(--color-gold-light));
      opacity: 0;
      transition: opacity var(--transition);
    }

    @media (min-width: 640px) {
      & {
        padding: var(--space-8);
      }
    }

    &:hover {
      transform: translateY(-3px);
      border-color: transparent;
    }

    &:hover::before {
      opacity: 1;
    }

    & .icon {
      width: 52px;
      height: 52px;
      background-color: rgba(194, 161, 90, 0.08);
      margin-bottom: var(--space-5);
      color: var(--color-accent);
    }
  }

  /* Team cards (section L'équipe) */
  & .card--center {
    text-align: center;
  }
}

/**
 * Domains section
 */

section.services {

  /* .card is an <article> — the real link lives in .link > a;
     stretch it over the whole card so the click target is unchanged. */
  & .card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--color-accent), var(--color-gold-light));
      opacity: 0;
      transition: opacity var(--transition);
      z-index: 1;
    }

    &:hover {
      transform: translateY(-4px);
      border-color: var(--color-accent);

      &::before {
        opacity: 1;
      }

      & figure img {
        transform: scale(1.05);
      }

      & .icon {
        background-color: var(--color-accent);
      }
    }

    & figure {
      margin: 0;
      flex-shrink: 0;
      overflow: hidden;

      & img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
        transition: transform .4s ease;
      }
    }

    & .body {
      padding: var(--space-6);
      flex: 1;
      display: flex;
      flex-direction: column;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
        url('../img/statue-justice-fond-marbre.jpg');
      background-repeat: no-repeat;
      background-size: auto, cover;

      @media (min-width: 640px) {
        & {
          padding: var(--space-8);
        }
      }
    }

    & .icon {
      width: 48px;
      height: 48px;
      background-color: var(--color-primary);
      margin-bottom: var(--space-5);
      color: var(--color-white);
      transition: background-color var(--transition);
    }

    & h3 {
      color: var(--color-primary);
      margin-bottom: var(--space-3);
    }

    & .text {
      font-size: var(--text-sm);
      flex: 1;
      margin-bottom: var(--space-5);
      color: var(--color-secondary, #6b6b6b);
    }

    & .link {
      font-weight: 600;
      color: var(--color-accent);

      /* `.link` (display:inline-flex from .card .link) n'a qu'un seul enfant
         flex, <a> — align-items:center n'a donc aucune prise sur le texte et
         le <svg> flèche qui sont son contenu inline. Le flex doit vivre sur
         <a> lui-même pour centrer réellement l'icône sur le texte (même
         idiome que .btn:has(svg)). */
      & a {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        position: static;
        color: inherit;
        text-decoration: none;
        transition: gap var(--transition);

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

    &.card--contact {
      & figure img {
        object-position: center top;
      }

      & .icon {
        background-color: rgba(194, 161, 90, 0.2);
        color: var(--color-accent);
      }

      &:hover .icon {
        background-color: rgba(194, 161, 90, 0.4);
      }
    }
  }
}

/**
 * Stats section
 */
section.stats {
  background-color: var(--color-primary);
  color: var(--color-white);

  /* `display: flex` + `justify-content: center` (au lieu de `grid` +
     `repeat(N, 1fr)`) : des colonnes `1fr` occupent toujours 100% de la
     largeur, donc `justify-content` n'a aucune prise quand il y a moins
     de `.stat-item` que de colonnes (le groupe reste collé à gauche avec
     des cases vides). En flex, chaque item garde sa largeur propre
     (`flex-basis`, `flex-grow: 0`) et le groupe se centre — quel que soit
     son nombre (1, 2, 3, 4…) — dès qu'il ne remplit pas toute la ligne. */
  & .stats-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);

    @media (min-width: 640px) {
      & {
        gap: var(--space-8);
      }
    }
  }

  & .stat-item {
    flex: 0 1 100%;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);

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

    /* Rarement plus de 4 stat-item (un chiffre + une courte description) :
       tous tiennent sur une seule ligne dès 640px, pas besoin d'une étape
       intermédiaire à 2 colonnes.
       `flex-basis` en pourcentage ne tient PAS compte de `gap` (contrairement
       aux pistes `1fr` d'une grille, qui s'en chargent automatiquement) : à
       25% pile, 4 items + leurs 3 `gap` dépassent 100% de la ligne et le 4e
       repasse à la ligne. Formule pour N=4, 3 espaces : chaque item cède
       3/4 d'un `gap` à sa propre largeur (4 × 3/4 gap = 3 gap, exactement
       ce qu'occupent les 3 espaces). */
    @media (min-width: 640px) {
      & {
        flex-basis: calc(25% - (var(--space-8) * 3 / 4));
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.10);

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

    & .value {
      font-family: var(--font-heading);
      font-size: var(--text-5xl);
      font-weight: 400;
      color: var(--color-accent);
      line-height: 1;
      margin-bottom: var(--space-2);
    }

    & .label {
      font-size: var(--text-sm);
      font-weight: normal;
      color: rgba(255, 255, 255, 0.55);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
  }
}

/**
 * Testimonials section
 */
section.testimonials {
  background-color: var(--color-white);

  & .card {
    padding: var(--space-6);
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)),
      url('../img/empreinte-digitale.png');
    background-repeat: repeat;
    background-size: auto;

    @media (min-width: 640px) {
      & {
        padding: var(--space-8);
      }
    }

    /* Decorative opening quote — rendered in CSS (not as editable content) so it
      stays a straight " and matches the WordPress build (immune to wptexturize). */
    &::before {
      content: '"';
      font-size: 3.5rem;
      line-height: 1;
      color: var(--color-accent);
      opacity: 0.18;
      font-family: Georgia, serif;
      position: absolute;
      top: var(--space-4);
      left: var(--space-6);
    }

    & blockquote {
      color: var(--color-text);
      line-height: 1.75;
      margin-bottom: var(--space-6);
      padding-top: var(--space-6);
      font-style: italic;
    }

    & header {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-top: auto;

      & .avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background-color: var(--color-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        flex-shrink: 0;
        margin: 0;
      }

      /* testimonial-name is an <h2>, testimonial-role an <h3> — reset the UA
        heading font-size/weight/family so the semantic tags keep the original look. */
      & h2 {
        font-family: var(--font-body);
        font-weight: 600;
        font-size: var(--text-sm);
        color: var(--color-primary);
        margin: 0;
      }

      & h3 {
        font-family: var(--font-body);
        font-weight: 400;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin: 0;
      }

      & .rate {
        color: var(--color-accent);
        font-size: var(--text-sm);
        margin-top: var(--space-1);
      }
    }
  }
}

/**
 * CTA section
 */
section.cta {
  padding: var(--space-16) 0;
  text-align: center;
  position: relative;
  background-image: url('../img/office-salle-reunion.png');
  background-color: var(--color-bg-subtle);
  background-size: cover;
  background-position: center;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(242, 239, 233, 0.88) 0%, rgba(242, 239, 233, 0.68) 100%);
  }

  @media (min-width: 640px) {
    & {
      padding: var(--space-24) 0;
    }
  }

  & .container {
    position: relative;
    z-index: 1;
  }

  & span {
    color: inherit;
  }

  & h2 {
    color: var(--color-primary);
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    width: fit-content;
    margin: 0 auto var(--space-4);
    font-size: var(--text-4xl);
    max-width: 700px;
  }

  & .subtitle {
    color: var(--color-text);
    text-shadow: none;
    max-width: 560px;
    margin: 0 auto var(--space-10);
  }

  & nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;

    @media (min-width: 640px) {
      & {
        flex-direction: row;
      }
    }
  }
}

/**
 * News section
 */
section.blog {
  & .news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-10);

    @media (min-width: 640px) {
      & {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
      }
    }

    & .card {
      background-color: var(--color-white);
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      height: 100%;
      /* Fill the stretched grid cell so every card in a row is the same height */
      position: relative;
      /* Anchor for the stretched read-more link overlay */

      &:hover {
        transform: translateY(-3px);
      }

      & .img {
        height: 220px;
        overflow: hidden;

        & img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 600ms var(--ease-refined);
        }
      }

      &:hover {
        & .img {
          & img {
            transform: scale(1.03);
          }
        }
      }

      & .body {
        padding: var(--space-6);
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      /* Ligne méta (catégorie + date) : <header> sémantique (et non <div class="meta">). */
      & header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
      }

      & .category {
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-accent);
        background-color: rgba(194, 161, 90, 0.08);
        padding: 2px 10px;
      }

      /* Date de publication : <time datetime> (sémantique HTML5). */
      & time {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
      }

      /* Blog article card titles */
      h3 {
        font-family: var(--font-heading);
        font-size: var(--text-xl);
        font-weight: 400;
        color: var(--color-primary);
        margin-bottom: var(--space-3);
        line-height: 1.3;
      }

      /* Blog article body text */
      .text {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        margin-bottom: var(--space-5);
        line-height: 1.7;
      }

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

  & nav {
    text-align: center;
  }
}

/**
 * Footer
 */
.site-footer {
  background-color: var(--color-primary);
  color: rgba(255, 255, 255, 0.70);

  & .logo {
    h1 {
      span {
        color: var(--color-white);
      }
    }
  }

  .footer-main {
    padding: var(--space-10) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);

    & .nav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-8);
    }

    @media (min-width: 640px) {
      & {
        padding: var(--space-16) 0;
        flex-direction: row;
        flex-wrap: wrap;
      }

      & .brand {
        flex: 1 1 100%;
      }

      & .nav {
        flex: 1 1 0;
      }

      & .contact {
        flex: 1 1 0;
      }
    }

    @media (min-width: 1024px) {
      & {
        flex-direction: row;
        gap: var(--space-12);
      }

      & .brand {
        flex: 2;
      }

      & .nav {
        flex: 2;
        gap: var(--space-12);
      }

      & .contact {
        flex: 1.5;
      }
    }
  }

  & .brand {
    & .desc {
      margin-top: var(--space-4);
      font-size: var(--text-sm);
      line-height: 1.7;
      color: rgba(255, 255, 255, 0.50);
    }
  }

  & h2 {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: var(--space-5);
  }

  & nav {
    & ul {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    & li {
      font-size: var(--text-sm);
      color: rgba(255, 255, 255, 0.50);
      transition: color var(--transition);

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

  & .contact address {
    & div {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-sm);
      color: rgba(255, 255, 255, 0.50);
      margin-bottom: var(--space-4);

      & .icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--color-accent);
      }
    }
  }

  & .opening-time {
    margin-top: var(--space-5);

    & h3 {
      font-size: var(--text-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.30);
      margin-bottom: var(--space-3);
    }

    & ul {
      & li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: var(--space-4);
        row-gap: var(--space-1);
        font-size: var(--text-xs);
        color: rgba(255, 255, 255, 0.50);
        padding: var(--space-1) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);

        & span {
          white-space: nowrap;
        }
      }
    }
  }

  & .map {
    margin-top: var(--space-5);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);

    & iframe {
      width: 100%;
      height: 160px;
      display: block;
      filter: grayscale(1) invert(0.9) contrast(0.8);
      opacity: 0.60;
      transition: opacity var(--transition), filter var(--transition);

      &:hover iframe {
        opacity: 1;
        filter: none;
      }
    }
  }

  & .bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-6) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    text-align: center;

    @media (min-width: 640px) {
      & {
        flex-direction: row;
        text-align: left;
      }
    }

    & .copy {
      font-size: var(--text-xs);
      color: rgba(255, 255, 255, 0.30);
    }

    & ul {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--space-4);

      @media (min-width: 640px) {
        & {
          justify-content: flex-end;
          gap: var(--space-6);
        }
      }

      & li {
        font-size: var(--text-xs);
        color: rgba(255, 255, 255, 0.30);
        transition: color var(--transition);

        &:hover {
          color: rgba(255, 255, 255, 0.65);
        }
      }
    }
  }
}

/**
 * Cookie banner
 */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background-color: var(--color-primary);
  border-top: 2px solid var(--color-accent);
  transform: translateY(100%);
  transition: transform 400ms var(--ease-refined);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.20);

  &.visible {
    transform: translateY(0);
  }

  & .cookie-banner-inner {
    padding: var(--space-5) 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    flex-wrap: wrap;

    @media (min-width: 640px) {
      & {
        flex-direction: row;
        align-items: center;
        gap: var(--space-8);
      }
    }
  }

  & article {
    flex: 1;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    min-width: 280px;

    & strong {
      color: var(--color-white);
      display: block;
      margin-bottom: var(--space-1);
    }

    & a {
      color: var(--color-gold-light);
      text-decoration: underline;
    }
  }

  & nav {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
    width: 100%;

    & .btn {
      flex: 1;
      justify-content: center;
    }

    @media (min-width: 640px) {
      & {
        width: auto;
      }

      & .btn {
        flex: none;
        justify-content: initial;
      }
    }
  }
}

/* Scroll reveals
   Hidden state gated behind .odl-js (added to <html> by a one-line inline
   script in <head>). Without the gate, JS-disabled visitors and the WordPress
   block-editor canvas (where theme JS never runs) would see blank sections. */
.odl-js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms var(--ease-refined),
    transform 500ms var(--ease-refined);
}

.odl-js .reveal-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-refined),
    transform 400ms var(--ease-refined);
}

.reveal.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/**
 * Accessibility
 */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/**
 * Subpage styles
 */

/* OPENING HOURS BADGE — Hero section */
.opening-hours-badge {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  /* Mobile-optimized: 0.75rem top/bottom, 1rem left/right */
  margin: var(--space-5) auto 0 auto;
  /* Centered with auto margins */
  border: 1px solid rgba(194, 161, 90, 0.25);
  background-color: rgba(28, 28, 31, 0.65);
  /* Slightly darker for better mobile readability */
  backdrop-filter: blur(12px);
  width: 100%;
  max-width: calc(100% - 2rem);
  /* Match button width on mobile */

  & svg {
    flex-shrink: 0;
    width: 1.125rem;
    /* 18px: reduced for mobile */
    height: 1.125rem;
    color: var(--color-accent);
    margin-top: 0.125rem;
    /* Slight vertical alignment for text pairing */
  }

  & ul {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* 6px: tighter spacing on mobile */
    font-size: 0.75rem;
    /* 12px: optimized for mobile screens */
    font-weight: 500;
    color: var(--color-white);
    line-height: 1.4;
  }

  & li {
    display: block;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--color-white);

    & time {
      font-weight: 600;
      color: var(--color-accent);
      display: inline;
    }

    & .separator {
      display: none;
      /* Hidden on small mobile; shown on larger screens */
    }
  }

  @media (min-width: 400px) {
    & {
      padding: var(--space-3) var(--space-5);

      & ul {
        font-size: 0.8125rem;
        /* 13px: readable on larger mobile */
        gap: var(--space-2);

        & li {
          .separator {
            display: inline;
            margin: 0 0.25rem;
          }
        }
      }
    }
  }

  @media (min-width: 640px) {

    /* Small tablets / large phones landscape — balance readability and space */
    & {
      display: inline-flex;
      /* Revert to inline layout when space is sufficient */
      align-items: center;
      justify-content: center;
      padding: var(--space-4) var(--space-6);
      /* Slightly reduced padding vs. full tablet */
      margin: var(--space-6) 0 0 0;
      width: auto;
      max-width: none;

      & svg {
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0;
      }

      & ul {
        font-size: 0.9375rem;
        /* 15px: between mobile and full tablet */
        flex-direction: row;
        gap: var(--space-4);
        /* Tighter gap than full tablet */
        line-height: 1.4;

        & li {
          display: inline;
          white-space: nowrap;

          & .separator {
            display: inline;
            margin: 0 var(--space-2);
          }
        }
      }
    }
  }

  @media (min-width: 768px) {

    /* Full tablets and up */
    & {
      display: inline-flex;
      /* Revert to inline layout on larger screens */
      align-items: center;
      justify-content: center;
      padding: var(--space-5) var(--space-8);
      margin: var(--space-8) 0 0 0;
      width: auto;
      max-width: none;

      & svg {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0;
      }

      & ul {
        font-size: var(--text-base);
        flex-direction: row;
        gap: var(--space-6);
        line-height: 1.4;

        & li {
          display: inline;
          white-space: nowrap;

          & .separator {
            display: inline;
            margin: 0 var(--space-2);
          }
        }
      }
    }
  }
}

/* PAGE CONTENT — Harmonize spacing below hero */
section.page-content {
  margin: 0 auto;
  padding: var(--space-12) var(--space-4);
  /* Mobile: 3rem (matches hero padding) */

  @media (min-width: 640px) {
    & {
      padding-top: var(--space-20);
      /* Tablet: 5rem (matches hero padding) */
    }
  }

  @media (min-width: 1024px) {
    & {
      padding-block: var(--space-24);
      /* Desktop: 6rem (matches hero padding) */
    }
  }

  & article {
    & h2 {
      font-family: var(--font-heading);
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--color-primary);
      margin-top: var(--space-10);
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-3);
      border-bottom: 2px solid var(--color-border);

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

    & h3 {
      font-family: var(--font-heading);
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-primary);
      margin-top: var(--space-6);
      margin-bottom: var(--space-3);
    }

    & h4 {
      font-family: var(--font-heading);
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--color-secondary);
      margin-top: var(--space-5);
      margin-bottom: var(--space-2);

      @media (min-width: 640px) {
        font-size: var(--text-lg);
      }
    }

    & p {
      font-size: var(--text-base);
      line-height: 1.8;
      color: var(--color-text);
      margin-bottom: var(--space-4);
    }

    & ul:not(.checklist-grid) {
      list-style: disc;
      padding-left: var(--space-6);
      margin-bottom: var(--space-4);

      & li {
        color: var(--color-text);
        margin-bottom: var(--space-2);
        line-height: 1.7;
      }
    }

    & ol {
      list-style: decimal;
      padding-left: var(--space-6);
      margin-bottom: var(--space-4);

      & li {
        color: var(--color-text);
        margin-bottom: var(--space-2);
        line-height: 1.7;
      }
    }

    & a {
      color: var(--color-accent);
      text-decoration: underline;
    }

    & .table {
      background: var(--color-bg-subtle);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--color-border);
      margin: var(--space-5) 0;

      @media (min-width: 1024px) {
        max-width: 640px;
        /* Sans effet sur mobile (déjà plus étroit) ; évite les 2 colonnes trop
          écartées sur grand écran. */
      }
    }

    & table {
      width: 100%;
      min-width: 480px;
      /* Empêche les 2 colonnes de s'écraser en dessous d'une largeur lisible ;
         au-delà, .table prend le relais avec le scroll horizontal. */
      border-collapse: collapse;
      font-size: var(--text-sm);

      & thead {
        & tr {
          background: var(--color-primary);
          color: white;
        }

        & th {
          padding: var(--space-2) var(--space-3);
          text-align: left;
          font-weight: 600;

          @media (min-width: 640px) {
            padding: var(--space-3) var(--space-4);
          }

          &:nth-child(2) {
            text-align: right;
            /* Colonne "Prix ou modalités" — alignée à droite pour un scan
               vertical des montants, comme une grille tarifaire classique. */
          }
        }
      }

      & tbody {
        & tr:nth-of-type(odd) {
          border-bottom: 1px solid var(--color-border);
        }

        & td {
          padding: var(--space-2) var(--space-3);
          color: var(--color-text-light);

          @media (min-width: 640px) {
            padding: var(--space-3) var(--space-4);
          }

          &:nth-child(2) {
            text-align: right;
          }

          &.monospace {
            font-family: monospace;
          }
        }
      }
    }

    /**
     * Table pricing — variante « .table--pricing » (BEM, cohérente avec
     * .card--bigpic/.card--lgpic/.card--center/.card--contact déjà utilisés
     * dans ce fichier) : <div class="table table--pricing"> sur les 4
     * tableaux de tarifs (tarifs.php) uniquement. N'affecte aucun autre
     * tableau utilisant .table seul (ex. tableau cookies.php, 3 colonnes,
     * pour lequel l'empilement/gras/alignement "prix" n'a pas de sens).
     *
     *   - < 640px : chaque ligne devient un bloc empilé (la cellule "Prix ou
     *     modalités" passe sous "Prestation"), <thead> masqué, plus besoin
     *     de scroll horizontal.
     *   - >= 640px : tableau classique hérité de .table ci-dessus (2
     *     colonnes, prix aligné à droite, zébrage des lignes impaires).
     *   - Cellule "Prix ou modalités" toujours en gras, dans les 2 contextes.
     */
    & .table--pricing {
      /* < 640px : le scroll horizontal de .table (hérité ci-dessus) n'a
         plus lieu d'être, table/tbody/tr/td ci-dessous empilent tout en
         pleine largeur — rien à faire défiler. Redevient actif à 640px
         (valeurs de .table ci-dessus restaurées), quand .table--pricing
         table retrouve min-width (juste en dessous) et que le tableau
         classique peut à nouveau déborder. */
      overflow-x: visible;
      -webkit-overflow-scrolling: auto;

      @media (min-width: 640px) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
    }

    & .table--pricing table {
      /* Annule le min-width:480px hérité de .table ci-dessus : c'est LUI
         qui forçait le débordement/scroll horizontal en dessous de 640px
         (le tableau était contraint à au moins 480px de large quel que
         soit le viewport). Restauré à 640px seulement. */
      min-width: 0;

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

      & thead {
        display: none;

        @media (min-width: 640px) {
          display: table-header-group;
        }
      }

      & tbody {
        & tr {
          display: flex;
          flex-direction: column;
          gap: var(--space-1);
          padding: var(--space-3);
          border-bottom: 1px solid var(--color-border);

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

          @media (min-width: 640px) {
            display: table-row;
            gap: 0;
            padding: 0;
            border-bottom: none;
            /* Le zébrage classique (lignes impaires) est redéclaré
               explicitement ci-dessous, indépendamment de la bordure
               "dernière ligne" ci-dessus (mobile uniquement) — robuste
               quel que soit le nombre de lignes (pair ou impair). */

            &:nth-of-type(odd) {
              border-bottom: 1px solid var(--color-border);
            }
          }
        }

        & td {
          display: block;

          &:nth-child(2) {
            font-weight: 600;
            text-align: left;
            /* Cellule "Prix ou modalités" — mise en avant visuelle du
               montant. text-align: left annule le text-align: right
               hérité de .table ci-dessus (inconditionnel), qui n'a de
               sens qu'en tableau classique (>= 640px, restauré juste
               en dessous). */

            @media (min-width: 640px) {
              text-align: right;
            }
          }

          @media (min-width: 640px) {
            display: table-cell;
          }
        }
      }
    }
  }
}

/**
 * Table pair — 2 <table> côte à côte à partir de 1024px (page tarifs)
 *
 * display:contents sous 1024px : le wrapper disparaît complètement du flux,
 * les <h3>/.table/<p> restent des enfants directs de <article> — rendu mobile
 * identique à un simple empilement sans wrapper. À partir de 1024px, devient
 * un vrai conteneur flex à 2 colonnes.
 */
.table-pair {
  display: contents;

  @media (min-width: 1024px) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);

    & > div {
      flex: 1;
      min-width: 0;
    }
  }
}

/**
 * Simple page content
 */
@scope (.page-base) {
  section.page-content {
    max-width: 820px;
  }
}

/**
 * Image/text grid
 */

.split-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: center;

  @media (min-width: 1024px) {
    & {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-16);
    }
  }

  &.grid {
    gap: var(--space-12);
    align-items: start;
    max-width: 900px;
    margin: 0 auto;

    @media (min-width: 768px) {
      & {
        display: grid;
        grid-template-columns: 1fr 2fr;
      }
    }

    & h3 {
      margin-top: var(--space-4);
      font-family: var(--font-heading);
      font-weight: 700;
      color: var(--color-primary);
    }

    & p {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }

    & img {
      width: 100%;
      object-position: top center;

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

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

      @media (min-width: 768px) {
        object-position: top center;
      }
    }
  }

  & article {

    /* Prose paragraphs only — direct children of <article>, never a label,
       never a button wrapper. `.split-block` has two different article
       shapes on this page ("L'office en bref": <h2> inside the article,
       before the prose; "Votre interlocutrice": no <h2> inside the article
       at all, it lives in a sibling <header>) — a sibling-of-<h2> selector
       only works for the first, so this targets DIRECT children instead:
       - `> p` (child combinator, not descendant) already excludes
         .value-title/.value-text without naming them: they sit two levels
         deeper, inside `ul.checklist-grid > li.bg`, never a direct
         child of <article>.
       - `:not(.label)` excludes the one stable, sitewide, well-known
         semantic class worth excluding by name (not a growing list of
         narrow one-off classes).
       - `:not(:has(.btn))` excludes any <p><a class="btn …"></a></p> CTA
         wrapper by content type, covering every current and future button
         wrapped this way without adding another class to track. */
    &>p:not(.label):not(:has(.btn)) {
      color: var(--color-text);
      line-height: 1.8;
      font-size: var(--text-lg);
      margin-bottom: var(--space-4);
    }

    /* Same rhythm above the button-wrapping <p> as between the prose
       paragraphs above it — explicit margin-top instead of relying on the
       previous paragraph's margin-bottom (which would collapse to the same
       value anyway here, but only by coincidence of sibling order). */
    &>p:has(.btn) {
      margin-top: var(--space-10);
    }

    &>p>.btn {
      display: inline-block;
      max-width: 100%;
      white-space: normal;
      line-height: 1.3;
    }
  }

  & aside {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;

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

      @media (min-width: 640px) {
        & {
          height: 360px;
          /* tablet */
        }
      }

      @media (min-width: 1024px) {
        & {
          height: 500px;
          /* desktop */
        }
      }
    }

    & .badge {
      position: absolute;
      bottom: var(--space-6);
      right: var(--space-6);
      background-color: var(--color-primary);
      color: var(--color-white);
      padding: var(--space-4) var(--space-5);
      text-align: center;

      & strong {
        display: block;
        font-family: var(--font-heading);
        font-size: var(--text-2xl);
        font-weight: 700;
      }

      & span {
        font-size: var(--text-xs);
        opacity: 0.7;
      }
    }
  }
}

.checklist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-8);
  list-style: none;
  padding: 0;
  margin-left: 0;

  @media (min-width: 640px) {
    & {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-5);
    }
  }

  & li {
    &.grid {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: var(--space-3);
      align-items: start;
      /* col 1 = check icon (::before, spans both rows), col 2 = title + text.
        No wrapper <div> needed around the text. */

      /* Check icon before each value (was an inline <svg class="value-icon">).
        In the grid, it occupies column 1 an  d spans the title + text rows. */
      &::before {
        content: "";
        grid-column: 1;
        grid-row: 1 / 3;
        width: 20px;
        height: 20px;
        margin-top: 2px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }

      &.bg {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        background-color: var(--color-bg-subtle);
        padding: var(--space-4);

        &::before {
          grid-row: unset;
          flex-shrink: 0;
        }

        & span {
          font-size: var(--text-sm);
        }
      }
    }

    &:not(.grid) {
      /* Ce <li> (toujours `.bg`) n'est ni grid ni flex : <h3> puis <ul>
        s'empilent en flux normal, le <ul> imbriqué s'affichant naturellement
        dessous. L'icône « check » est portée par chacun des <li> de la
        liste imbriquée, pas par ce <li> englobant (mobile first : aucun
        palier de largeur ne change cette disposition en liste simple, donc
        pas de @media). */
      background-color: var(--color-bg-subtle);
      padding: var(--space-4);

      h3 {
        margin: 0;
      }

      /* <ul> « simple » (ni flex, ni grid — display: block par défaut) :
        pleine largeur du <li> de 1er niveau, aligné à gauche avec <h3>
        (même absence de marge/padding que lui). L'espacement entre les
        <li> de la liste se fait par marge, pas par `gap` (pas de flex ici).
        Qualifiée `.wp-block-list` (classe réellement posée par le bloc
        wp:list ici) : sans ça, `section.page-content article
        ul:not(.checklist-grid) li` (0,2,4) — la liste "prose" générique —
        l'emporte sur ce <li> (0,2,3) et sur ce <ul> (0,2,2 contre 0,2,3),
        imposant puces `disc` + indentation + couleur/marges à cette liste.
        `.wp-block-list` porte la spécificité à (0,3,3)/(0,3,2), qui gagne
        dans les deux cas quel que soit le nombre de sélecteurs de type. */
      & ul.wp-block-list {
        width: 100%;
        margin: 0;
        padding: var(--space-4) 0 0;
        list-style: none;

        & li {
          display: flex;
          align-items: flex-start;
          gap: var(--space-3);
          padding: 0;
          font-size: var(--text-sm);

          /* Check icon devant chaque item de la liste imbriquée (même
            dessin que l'icône de la variante `&.grid`). */
          &::before {
            content: "";
            flex-shrink: 0;
            margin-top: 2px;
            width: 20px;
            height: 20px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A15A' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
          }
        }
      }
    }
  }

  h3 {
    font-family: inherit;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-primary);
    margin-bottom: var(--space-1);
  }

  p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }
}

/**
 * Photo stack (section "L'office en bref")
 */
.photo-stack {
  position: relative;

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

    &.inset {
      position: absolute;
      bottom: -24px;
      left: -24px;
      width: 180px;
      height: 140px;
      object-fit: cover;
      border: 4px solid #fff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
    }
  }
}

/**
 * FAQ accordion
 */
.faq {
  background-color: var(--color-bg);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;

  & details {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-3);
    overflow: hidden;

    /* Question */
    & summary {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-5) var(--space-6);
      text-align: left;
      cursor: pointer;
      transition: background-color var(--transition);
      gap: var(--space-4);
      background: none;
      border: none;

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

      & h3 {
        font-family: var(--font-heading);
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--color-primary);
      }

      /* "open" icon */
      & svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--color-accent);
        transition: transform var(--transition);
      }
    }

    /* Answer */
    & div {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }

    &.open {

      /* Question */
      & summary {

        /* "open" icon */
        & svg {
          transform: rotate(45deg);
        }
      }

      /* Answer */
      & div {
        max-height: 400px;

        & p {
          padding: 0 var(--space-6) var(--space-5);
          color: var(--color-text-light);
          line-height: 1.75;
          font-size: var(--text-base);
        }

        /* Liste éventuelle dans une réponse (wp:list) — même inset/couleur/
          taille que le <p> ci-dessus ; puce affichée dans le flux du texte
          (`list-style-position: inside`) pour rester alignée avec lui sans
          calcul de padding supplémentaire pour le marqueur. */
        & ul {
          padding: 0 var(--space-6) var(--space-5);
          list-style: disc;
          list-style-position: inside;
          color: var(--color-text-light);
          line-height: 1.75;
          font-size: var(--text-base);

          & li {
            margin-bottom: var(--space-2);

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}

/**
 * Content layout (2-col: body + sidebar)
 */
.content-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;

  @media (min-width: 1024px) {
    & {
      grid-template-columns: 2fr 1fr;
      gap: var(--space-16);
    }
  }

  & article {
    & h2 {
      font-family: var(--font-heading);
      font-size: var(--text-2xl);
      font-weight: 700;
      color: var(--color-primary);
      margin-top: var(--space-10);
      margin-bottom: var(--space-4);

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

    & h3 {
      font-family: var(--font-heading);
      font-size: var(--text-xl);
      font-weight: 700;
      color: var(--color-primary);
      margin-top: var(--space-8);
      margin-bottom: var(--space-3);
    }

    & p {
      color: var(--color-text);
      line-height: 1.8;
      margin-bottom: var(--space-4);
      font-size: var(--text-lg);
    }
  }
}

/**
 * Sidebar
 */
.content-sidebar {
  position: static;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);

  @media (min-width: 640px) {
    & {
      flex-direction: row;

      &:has(.sidebar-card.light) {
        flex-direction: column;
      }
    }
  }

  @media (min-width: 1024px) {
    & {
      position: sticky;
      flex-direction: column;
      top: calc(72px + var(--space-8));
    }
  }
}

.sidebar-card {
  background-color: var(--color-primary);
  padding: var(--space-6);
  color: var(--color-white);

  & h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: inherit;
  }

  & ul,
  & nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  & nav {
    margin-top: 0;
  }

  & ul {
    & li {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) 0 var(--space-3) var(--space-2);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      border-bottom: 1px solid var(--color-border);

      &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
      }

      & a {
        font-size: var(--text-sm);
        color: var(--color-text);
        font-weight: 500;
        transition: var(--transition);
        line-height: 1.4;

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

      &.highlight a {
        font-size: var(--text-sm);
        color: var(--color-secondary);
        font-weight: 600;
      }
    }
  }

  & .text {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-5);
  }

  &:not(.light) {
    .btn-outline {
      color: var(--color-white);
      border-color: rgba(255, 255, 255, 0.55);

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

  & .btn-lg {
    padding: 1rem 2.25rem;
    font-size: var(--text-lg);
  }

  &.contact {

    & nav,
    & ul {
      margin-top: var(--space-5);
    }

    & ul {
      gap: 0;

      & li {
        display: flex;
        align-items: center;
        font-size: var(--text-sm);
        color: rgba(255, 255, 255, 0.7);
        border: 0;

        & .icon {
          width: 16px;
          height: 16px;
          color: var(--color-gold-light);
          flex-shrink: 0;
        }
      }
    }
  }

  &.light {
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);

    & h3 {
      color: var(--color-primary);
    }

    & .text {
      color: var(--color-text-light);
    }
  }
}

@scope (.page-blog-article) {
  section.blog {
    & {
      padding: var(--space-24) 0;
      /* Desktop: maximum padding (6rem) */

      &.blog-related {
        padding-top: 0;
      }
    }

    & header {

      /* Blog article title */
      h1 {
        font-family: var(--font-heading);
        font-size: var(--text-4xl);
        font-weight: 700;
        color: var(--color-primary);
        line-height: 1.15;
        margin-bottom: var(--space-8);
      }

      /* Blog article image */
      & img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        margin-bottom: var(--space-8);

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

      /* Blog article meta info */
      .meta {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        flex-wrap: wrap;
        margin-bottom: var(--space-6);

        li {
          height: 15px;
          margin: 0;

          &:not(.label) {
            font-size: var(--text-sm);
            color: var(--color-text-light);
            display: flex;
            align-items: center;
            gap: var(--space-2);

            &::before {
              content: "·";
              font-size: 2rem;
            }
          }
        }
      }
    }

    /**
     * Article layout (2-col content + sidebar)
     */
    .article-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-8);
      align-items: start;

      @media (min-width: 1024px) {
        & {
          grid-template-columns: 2fr 1fr;
          gap: var(--space-16);

        }
      }

      /* Article body */
      & article {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);

        h2 {
          margin-top: var(--space-8);
        }

        h3 {
          font-family: var(--font-heading);
          font-size: var(--text-xl);
          font-weight: 700;
          color: var(--color-primary);
        }

        ul:not(.article-tags) {
          list-style: disc;
          padding-left: 1rem;
        }
      }
    }

    .sidebar-card {
      &.contact {
        background: var(--color-accent);
      }
    }
  }
}

/**
 * Animations — discrètes et raffinées
 */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtle-zoom {
  from {
    transform: scale(1.04);
  }

  to {
    transform: scale(1);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-8px);
  }
}