/* ==========================================================================
   Rufino Studio · Cinéma Gallery — Design System v6.0 · DEFINITIVO
   components.css — every component the 26 redesign sessions need
   --------------------------------------------------------------------------
   Requires tokens.css loaded first (declares the @layer order).
   ========================================================================== */

/* @layer components REMOVED 2026-05-25 (S2.18.5) — was making all rules lose
   the cascade vs Anita non-layer CSS after migrating inline → external in S2.17.
   Pre-S2.17 these rules were inline in post_content (no layer) and won over
   Anita; in @layer they were demoted below any non-layer rule and the duo hero
   grid (a-propos, témoignages, tarifs, portfolio) collapsed. */

  /* ======================================================================
     LAYOUT PRIMITIVES
     ====================================================================== */

  /* edge-to-edge full-bleed section — the alternation IS the divider */
  .rf-tile {
    padding-block: var(--rf-section);
    background: var(--rf-canvas);
  }
  .rf-tile--elevated { background: var(--rf-elevated); }
  .rf-tile--sunken   { background: var(--rf-sunken); }
  .rf-tile--air      { padding-block: calc(var(--rf-section) * 1.35); }
  .rf-tile--tight    { padding-block: calc(var(--rf-section) * 0.62); }
  .rf-tile--void     { background: var(--rf-void); }

  /* centered content column */
  .rf-wrap {
    inline-size: 100%;
    max-inline-size: var(--rf-maxw);
    margin-inline: auto;
    padding-inline: var(--rf-gutter);
  }
  .rf-wrap--text { max-inline-size: var(--rf-maxw-text); }
  .rf-wrap--wide { max-inline-size: 1560px; }

  /* film-grain overlay — drop on any positioned element */
  .rf-grain { position: relative; isolation: isolate; }
  .rf-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: var(--rf-grain);
    background-size: 160px 160px;
    opacity: 0.05;
    pointer-events: none;
    mix-blend-mode: overlay;
  }

  /* ======================================================================
     TYPOGRAPHY ROLES
     ====================================================================== */

  .rf-overline {
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-overline);
    font-weight: var(--rf-w-medium);
    letter-spacing: var(--rf-ls-overline);
    text-transform: uppercase;
    color: var(--rf-gold);
    display: flex;
    align-items: center;
    gap: var(--rf-sp-2xs);
  }
  .rf-overline--muted { color: var(--rf-ink-muted); }
  .rf-overline::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 1px;
    background: currentColor;
    flex: none;
  }
  .rf-overline--bare::before { display: none; }

  .rf-lead {
    font-size: var(--rf-fs-lead);
    font-weight: var(--rf-w-light);
    line-height: 1.45;
    color: var(--rf-ink-muted);
    text-wrap: pretty;
    max-inline-size: 56ch;
  }
  .rf-body-lg { font-size: var(--rf-fs-body-lg); line-height: 1.6; }
  .rf-measure { max-inline-size: 66ch; }
  .rf-caption {
    font-size: var(--rf-fs-caption);
    color: var(--rf-ink-muted);
    letter-spacing: 0.02em;
  }
  .rf-caption--credit {
    font-style: italic;
    color: var(--rf-ink-faint);
  }

  /* ======================================================================
     BUTTONS  ·  the pill is the action signal
     ====================================================================== */

  .rf-btn {
    --_bg: transparent;
    --_fg: var(--rf-ink);
    --_bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rf-sp-2xs);
    min-block-size: 52px;
    padding: 0 2.25rem;
    font-family: var(--rf-font-display);
    font-size: 0.9375rem;
    font-weight: var(--rf-w-medium);
    letter-spacing: var(--rf-ls-button);
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--_bg);
    color: var(--_fg);
    border: 1px solid var(--_bd);
    border-radius: var(--rf-r-pill);
    transition: background var(--rf-dur-base) var(--rf-ease),
                color var(--rf-dur-base) var(--rf-ease),
                border-color var(--rf-dur-base) var(--rf-ease),
                transform var(--rf-dur-fast) var(--rf-ease);
  }
  .rf-btn:active { transform: scale(0.97); }

  .rf-btn--primary {
    --_bg: var(--rf-gold);
    --_fg: var(--rf-on-gold);
    --_bd: var(--rf-gold);
  }
  .rf-btn--primary:hover { --_bg: var(--rf-gold-hover); --_bd: var(--rf-gold-hover); }

  .rf-btn--ghost { --_bd: var(--rf-hairline-strong); }
  .rf-btn--ghost:hover { --_fg: var(--rf-gold-hover); --_bd: var(--rf-gold); }

  .rf-btn--utility {
    min-block-size: 40px;
    padding: 0 1.1rem;
    font-size: 0.8125rem;
    border-radius: var(--rf-r-sm);
    --_bd: var(--rf-hairline);
  }
  .rf-btn--utility:hover { --_fg: var(--rf-gold-hover); --_bd: var(--rf-gold); }

  .rf-btn--block { display: flex; inline-size: 100%; }

  /* inline text link with a gold underline that draws on hover */
  .rf-xlink-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: var(--rf-w-medium);
    color: var(--rf-gold-hover);
    background-image: linear-gradient(var(--rf-gold), var(--rf-gold));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--rf-dur-base) var(--rf-ease);
  }
  .rf-xlink-text:hover { background-size: 100% 1px; }
  .rf-xlink-text__arrow { transition: transform var(--rf-dur-base) var(--rf-ease); }
  .rf-xlink-text:hover .rf-xlink-text__arrow { transform: translateX(4px); }

  /* ======================================================================
     ICONS  ·  Lucide-style line, gold stroke
     ====================================================================== */

  .rf-icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
    fill: none;
    stroke: var(--rf-gold);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .rf-icon--sm { inline-size: 1.25rem; block-size: 1.25rem; }
  .rf-icon--lg { inline-size: 2rem;    block-size: 2rem; }
  .rf-icon--xl { inline-size: 3rem;    block-size: 3rem; }
  .rf-icon--ink { stroke: var(--rf-ink); }

  /* ======================================================================
     BADGES & DIVIDERS
     ====================================================================== */

  .rf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.45rem 0.9rem;
    font-family: var(--rf-font-display);
    font-size: var(--rf-fs-overline);
    font-weight: var(--rf-w-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rf-on-gold);
    background: var(--rf-gold);
    border-radius: var(--rf-r-pill);
  }
  .rf-badge--outline {
    color: var(--rf-gold);
    background: transparent;
    border: 1px solid var(--rf-gold-40);
  }

  .rf-divider {
    block-size: 1px;
    border: 0;
    background: var(--rf-hairline);
  }
  .rf-divider-gold {
    inline-size: 64px;
    block-size: 1px;
    border: 0;
    background: var(--rf-gold);
  }
  .rf-divider-gold--full { inline-size: 100%; background: var(--rf-gold-25); }

  /* ======================================================================
     NAV  ·  thin bar, transparent over hero, frosted on scroll
     ====================================================================== */

  .rf-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: 72px;
    /* ligne dorée ancrée au bord bas de la nav — définit la nav visuellement
       sans backdrop, et s'aligne pile au nav (pas une ligne flottante). */
    border-block-end: 1px solid var(--rf-gold-25);
    transition: background var(--rf-dur-base) var(--rf-ease),
                border-color var(--rf-dur-base) var(--rf-ease),
                backdrop-filter var(--rf-dur-base) var(--rf-ease);
  }
  .rf-nav.is-scrolled {
    background: color-mix(in oklab, var(--rf-elevated) 88%, transparent);
    border-block-end-color: var(--rf-hairline);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  .rf-nav__inner {
    block-size: 100%;
    max-inline-size: var(--rf-maxw);
    margin-inline: auto;
    padding-inline: var(--rf-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rf-sp-md);
  }
  .rf-nav__brand {
    font-family: var(--rf-font-display);
    font-size: 1.4rem;
    font-weight: var(--rf-w-medium);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--rf-ink);
  }
  .rf-nav__brand b { font-weight: var(--rf-w-medium); color: var(--rf-gold); }
  .rf-nav__brand { display: flex; align-items: center; }
  .rf-nav__logo { display: block; block-size: 56px; inline-size: auto; }
  .rf-nav__links {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
  }
  .rf-nav__link {
    font-family: var(--rf-font-display);
    font-size: 0.8125rem;
    font-weight: var(--rf-w-medium);
    letter-spacing: var(--rf-ls-button);
    text-transform: uppercase;
    color: var(--rf-ink);
    padding-block: 0.5rem;
  }
  .rf-nav__link:hover,
  .rf-nav__link[aria-current] { color: var(--rf-gold-hover); }
  .rf-nav__burger { display: none; }

  /* descend nettement sous la barre d'admin WordPress (utilisateur connecté).
     `.rfv6-adminbar` posée par la plantille v6 via is_admin_bar_showing().
     Offset large (64 px d'air sous la barre d'admin) — la nav ne doit pas
     paraître collée au chrome WP. Le public (sans admin bar) voit la nav
     à top:0 — standard. */
  /* Valores finales aprobados por Pablo (S2.1 · 23/05/2026) :
     offset 30 px desktop / 44 px mobile. Nav prácticamente pegado al borde
     inferior de la admin bar, sin gap visible. */
  :is(.admin-bar, .rfv6-adminbar) .rf-nav { inset-block-start: 30px; }
  :is(.admin-bar, .rfv6-adminbar) .rf-nav__links.is-open { inset-block-start: 102px; }
  @media screen and (max-width: 782px) {
    :is(.admin-bar, .rfv6-adminbar) .rf-nav { inset-block-start: 44px; }
    :is(.admin-bar, .rfv6-adminbar) .rf-nav__links.is-open { inset-block-start: 116px; }
  }

  @media (max-width: 64em) {
    .rf-nav__links { display: none; }
    /* menu mobile — panneau frosté déroulé par le burger (.is-open en JS) */
    .rf-nav__links.is-open {
      display: flex;
      position: fixed;
      inset-block-start: 72px;
      inset-inline: 0;
      flex-direction: column;
      gap: 0;
      padding: var(--rf-sp-2xs) var(--rf-gutter) var(--rf-sp-md);
      background: color-mix(in oklab, var(--rf-elevated) 97%, transparent);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-block-end: 1px solid var(--rf-hairline);
    }
    .rf-nav__links.is-open .rf-nav__link {
      padding-block: var(--rf-sp-sm);
      font-size: 1rem;
      border-block-end: 1px solid var(--rf-hairline-faint);
    }
    .rf-nav__cta-label { display: none; }
    .rf-nav__burger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: 44px;
      block-size: 44px;
      border: 1px solid var(--rf-hairline);
      border-radius: var(--rf-r-sm);
    }
  }

  /* ======================================================================
     HERO  ·  full-bleed photo · scrim · grain · lower-left content
     ====================================================================== */

  .rf-hero {
    position: relative;
    isolation: isolate;
    min-block-size: clamp(560px, 92dvh, 940px);
    display: flex;
    align-items: flex-end;
    overflow: clip;
    background: var(--rf-void);
  }
  .rf-hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
  /* Scrim quasi-nul — la photo domine. Text-shadow assure la lisibilité. */
  .rf-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top,
        rgba(9,9,11,.87) 0%, rgba(9,9,11,.78) 42%,
        rgba(9,9,11,.58) 66%, rgba(9,9,11,.28) 84%, transparent 95%),
      linear-gradient(to right,
        rgba(9,9,11,.68) 0%, rgba(9,9,11,.24) 50%, transparent 80%);
  }
  /* letterbox cinemascope retiré — la finesse n'apportait pas et créait
     une ligne dorée parasite près de la nav (feedback Pablo 23/05). */

  .rf-hero__inner {
    inline-size: 100%;
    max-inline-size: var(--rf-maxw);
    margin-inline: auto;
    padding-inline: var(--rf-gutter);
    padding-block: clamp(3.5rem, 8vw, 7rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rf-sp-md);
  }
  .rf-hero__title {
    font-family: var(--rf-font-display);
    font-size: var(--rf-fs-hero);
    font-weight: var(--rf-w-medium);
    line-height: var(--rf-lh-hero);
    letter-spacing: var(--rf-ls-hero);
    text-transform: uppercase;
    text-wrap: balance;
    max-inline-size: 16ch;
    /* shadow fonctionnel (lisibilité sur photo) — compense le scrim allégé.
       Exception à la règle "no text-shadow" : ici c'est lisibilité, pas déco. */
    text-shadow: 0 2px 24px rgba(9,9,11,.65);
  }
  .rf-hero__title em {
    font-style: normal;
    color: var(--rf-gold);
  }
  .rf-hero__lead {
    max-inline-size: 46ch;
    color: var(--rf-ink);
    text-shadow: 0 1px 12px rgba(9,9,11,.7);  /* lisibilité sur photo */
  }
  .rf-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-sp-xs);
    margin-block-start: var(--rf-sp-2xs);
  }

  /* hero engagement meta-band */
  .rf-meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.75rem);
    margin-block-start: var(--rf-sp-sm);
    padding-block-start: var(--rf-sp-sm);
    border-block-start: 1px solid var(--rf-hairline);
  }
  .rf-meta__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--rf-fs-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rf-ink);
  }

  /* ======================================================================
     NUMBERED HEADING  ·  credit-style 01. + overline + h2 + accent
     ====================================================================== */

  /* Credit number sits in its own clean zone — stacked above the heading,
     never overlapping the overline or the title. */
  .rf-numhead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rf-sp-xs);
    margin-block-end: var(--rf-sp-lg);
  }
  .rf-numhead__num {
    font-family: var(--rf-font-display);
    font-size: var(--rf-fs-credit);
    font-weight: var(--rf-w-bold);
    line-height: 0.9;
    color: var(--rf-gold);
    user-select: none;
    -webkit-user-select: none;
  }
  .rf-numhead__body {
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
  }
  .rf-numhead__title {
    font-size: var(--rf-fs-h2);
    letter-spacing: var(--rf-ls-h2);
    max-inline-size: 20ch;
  }
  .rf-numhead--center {
    align-items: center;
    text-align: center;
  }
  .rf-numhead--center .rf-numhead__title { margin-inline: auto; }
  .rf-numhead--center .rf-overline { justify-content: center; }

  /* ======================================================================
     PRICING  ·  three sibling formats — Photo · Vidéo · Duo (featured)
     ====================================================================== */

  .rf-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rf-sp-md);
    align-items: stretch;
  }
  .rf-price {
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
    padding: 2.75rem 2.25rem;
    background: var(--rf-elevated);
    border: 1px solid var(--rf-hairline);
    border-radius: var(--rf-r-md);
    transition: border-color var(--rf-dur-base) var(--rf-ease);
  }
  .rf-price:hover { border-color: var(--rf-hairline-strong); }

  .rf-price--featured {
    position: relative;
    padding-block: 3.5rem;
    border-color: var(--rf-gold);
    box-shadow: var(--rf-glow-gold);
    transform: translateY(-12px);
    background:
      linear-gradient(to bottom, var(--rf-gold-08), transparent 55%),
      var(--rf-elevated);
  }
  .rf-price__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: -50% -50%;
  }
  .rf-price__role {
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-overline);
    font-weight: var(--rf-w-medium);
    letter-spacing: var(--rf-ls-overline);
    text-transform: uppercase;
    color: var(--rf-ink-muted);
  }
  .rf-price__tier {
    font-size: var(--rf-fs-tagline);
    letter-spacing: 0.02em;
  }
  .rf-price__amount {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
  }
  .rf-price__amount b {
    font-size: clamp(2.75rem, 1.6rem + 3.6vw, 3.75rem);
    font-weight: var(--rf-w-medium);
    color: var(--rf-ink);
    letter-spacing: -0.01em;
  }
  .rf-price__amount span {
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-caption);
    font-weight: var(--rf-w-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rf-ink-muted);
  }
  .rf-price__desc {
    font-size: var(--rf-fs-body-sm);
    color: var(--rf-ink-muted);
    text-wrap: pretty;
  }
  .rf-price__list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-block: var(--rf-sp-xs);
    border-block-start: 1px solid var(--rf-hairline);
  }
  .rf-price__list li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: var(--rf-fs-body-sm);
    line-height: 1.45;
  }
  .rf-price__list .rf-icon { margin-block-start: 0.1rem; }
  .rf-price__cta { margin-block-start: auto; }

  /* ======================================================================
     COMPARISON TABLE  ·  4 tiers × 3 formats (for /tarifs/)
     ====================================================================== */

  .rf-compare {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--rf-fs-body-sm);
  }
  .rf-compare :is(th, td) {
    padding: 1.1rem 1.25rem;
    text-align: start;
    border-block-end: 1px solid var(--rf-hairline);
  }
  .rf-compare thead th {
    font-family: var(--rf-font-display);
    font-size: var(--rf-fs-overline);
    font-weight: var(--rf-w-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rf-ink-muted);
  }
  .rf-compare tbody th {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rf-ink);
  }
  .rf-compare__col-featured {
    background: var(--rf-gold-08);
    color: var(--rf-gold-hover);
    border-inline: 1px solid var(--rf-gold-40);
  }
  .rf-compare__note {
    margin-block-start: var(--rf-sp-sm);
    font-size: var(--rf-fs-caption);
    color: var(--rf-ink-faint);
  }

  /* ======================================================================
     FAQ  ·  native <details> accordion, hairline dividers
     ====================================================================== */

  .rf-faq { border-block-start: 1px solid var(--rf-hairline); }
  .rf-faq__item { border-block-end: 1px solid var(--rf-hairline); }
  .rf-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rf-sp-md);
    padding-block: 1.75rem;
    font-family: var(--rf-font-display);
    font-size: var(--rf-fs-tagline);
    font-weight: var(--rf-w-medium);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--rf-ink);
    list-style: none;
    cursor: pointer;
    transition: color var(--rf-dur-base) var(--rf-ease);
  }
  .rf-faq__q::-webkit-details-marker { display: none; }
  .rf-faq__item:hover .rf-faq__q,
  .rf-faq__item[open] .rf-faq__q { color: var(--rf-gold-hover); }

  /* CSS-drawn + / × marker */
  .rf-faq__sign {
    position: relative;
    inline-size: 22px;
    block-size: 22px;
    flex: none;
  }
  .rf-faq__sign::before,
  .rf-faq__sign::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background: var(--rf-gold);
    transition: transform var(--rf-dur-base) var(--rf-ease);
  }
  .rf-faq__sign::before { inline-size: 22px; block-size: 1.5px; translate: -50% -50%; }
  .rf-faq__sign::after  { inline-size: 1.5px; block-size: 22px; translate: -50% -50%; }
  .rf-faq__item[open] .rf-faq__sign::after { transform: rotate(90deg); }

  .rf-faq__a {
    padding-block-end: 1.75rem;
    max-inline-size: 66ch;
    color: var(--rf-ink-muted);
    text-wrap: pretty;
  }
  /* smooth open/close where ::details-content is supported */
  .rf-faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--rf-dur-base) var(--rf-ease),
                content-visibility var(--rf-dur-base) allow-discrete;
  }
  .rf-faq__item[open]::details-content { block-size: auto; }

  /* ======================================================================
     TESTIMONIAL  ·  pull-quote over a giant gold quote-mark
     ====================================================================== */

  .rf-quote {
    position: relative;
    isolation: isolate;
    max-inline-size: 60ch;
    margin-inline: auto;
    text-align: center;
    padding-block-start: clamp(2rem, 6vw, 5rem);
  }
  .rf-quote__mark {
    position: absolute;
    inset-block-start: clamp(-3rem, -4vw, -1.5rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: -1;
    font-family: var(--rf-font-display);
    font-size: var(--rf-fs-quote);
    font-weight: var(--rf-w-bold);
    line-height: 0.7;
    color: var(--rf-gold-12);
    user-select: none;
    pointer-events: none;
  }
  .rf-quote__text {
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-lead);
    font-weight: var(--rf-w-light);
    line-height: 1.5;
    color: var(--rf-ink);
    text-wrap: balance;
  }
  .rf-quote__attr {
    margin-block-start: var(--rf-sp-md);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .rf-quote__name {
    font-family: var(--rf-font-display);
    font-size: 1.1rem;
    font-weight: var(--rf-w-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .rf-quote__role {
    font-size: var(--rf-fs-overline);
    letter-spacing: var(--rf-ls-overline);
    text-transform: uppercase;
    color: var(--rf-ink-muted);
  }
  .rf-stars { display: inline-flex; gap: 3px; }
  .rf-stars .rf-icon { inline-size: 1rem; block-size: 1rem; fill: var(--rf-gold); stroke: var(--rf-gold); }

  /* testimonial cards grid (for /temoignages/) */
  .rf-tcards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--rf-sp-md);
  }
  .rf-tcard {
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-xs);
    padding: 2rem;
    background: var(--rf-elevated);
    border: 1px solid var(--rf-hairline);
    border-radius: var(--rf-r-md);
  }
  .rf-tcard__head { display: flex; align-items: center; gap: 0.85rem; }
  .rf-tcard__quote { color: var(--rf-ink); font-size: var(--rf-fs-body-sm); text-wrap: pretty; }
  .rf-tcard__meta { margin-block-start: auto; padding-block-start: var(--rf-sp-xs); }

  .rf-avatar {
    inline-size: 72px;
    block-size: 72px;
    flex: none;
    display: grid;
    place-content: center;
    overflow: clip;
    border-radius: var(--rf-r-pill);
    border: 1px solid var(--rf-gold-40);
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    color: var(--rf-gold);
    background: var(--rf-gold-08);
  }
  .rf-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* ======================================================================
     PHOTO + TEXT SPLIT  ·  50/50, alternates side
     ====================================================================== */

  .rf-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5.5rem);
    align-items: center;
  }
  .rf-split__media {
    aspect-ratio: var(--rf-aspect-4-5);
    border-radius: var(--rf-r-md);
    overflow: clip;
    box-shadow: var(--rf-shadow-photo);
  }
  .rf-split__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 28%;
  }
  .rf-split__body { display: flex; flex-direction: column; gap: var(--rf-sp-sm); }
  .rf-split__body h3 { font-size: var(--rf-fs-h3); }
  .rf-split--reverse .rf-split__media { order: 2; }

  /* ======================================================================
     PHOTO EDITORIAL  ·  full-bleed plate + italic caption
     ====================================================================== */

  .rf-editorial { display: flex; flex-direction: column; gap: var(--rf-sp-sm); }
  .rf-editorial__frame {
    aspect-ratio: var(--rf-cinemascope);
    overflow: clip;
    border-radius: var(--rf-r-md);
    box-shadow: var(--rf-shadow-photo);
  }
  .rf-editorial__frame img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .rf-editorial figcaption {
    align-self: flex-start;
    font-size: var(--rf-fs-caption);
    font-style: italic;
    color: var(--rf-ink-faint);
  }

  /* ======================================================================
     GALLERY  ·  masonry, hover scale + caption reveal
     ====================================================================== */

  .rf-gallery {
    columns: 3 280px;
    column-gap: var(--rf-sp-md);
  }
  .rf-gallery__item {
    position: relative;
    break-inside: avoid;
    margin-block-end: var(--rf-sp-md);
    overflow: clip;
    border-radius: var(--rf-r-md);
    isolation: isolate;
  }
  .rf-gallery__item img {
    inline-size: 100%;
    block-size: auto;
    transition: transform var(--rf-dur-slow) var(--rf-ease-cinema);
  }
  .rf-gallery__item:hover img { transform: scale(1.04); }
  .rf-gallery__cap {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 2.5rem 1.25rem 1.1rem;
    font-size: var(--rf-fs-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rf-ink);
    background: linear-gradient(to top, rgba(9,9,11,.92), transparent);
    opacity: 0;
    translate: 0 8px;
    transition: opacity var(--rf-dur-base) var(--rf-ease),
                translate var(--rf-dur-base) var(--rf-ease);
  }
  .rf-gallery__item:hover .rf-gallery__cap,
  .rf-gallery__item:focus-within .rf-gallery__cap { opacity: 1; translate: 0 0; }

  /* ======================================================================
     BEFORE / AFTER  ·  CSS clip reveal driven by a range input
     ====================================================================== */

  .rf-ba {
    --pos: 50%;
    position: relative;
    aspect-ratio: var(--rf-aspect-3-2);
    border-radius: var(--rf-r-md);
    overflow: clip;
    box-shadow: var(--rf-shadow-photo);
  }
  .rf-ba__img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .rf-ba__img--after  { clip-path: inset(0 0 0 var(--pos)); }
  .rf-ba__img--before { filter: grayscale(0.7) brightness(0.82) contrast(1.05); }
  .rf-ba__tag {
    position: absolute;
    inset-block-end: 1rem;
    padding: 0.35rem 0.8rem;
    font-size: var(--rf-fs-overline);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: color-mix(in oklab, var(--rf-void) 70%, transparent);
    border-radius: var(--rf-r-pill);
  }
  .rf-ba__tag--before { inset-inline-start: 1rem; color: var(--rf-ink-muted); }
  .rf-ba__tag--after  { inset-inline-end: 1rem; color: var(--rf-gold-hover); }
  .rf-ba__line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--pos);
    inline-size: 2px;
    background: var(--rf-gold);
    translate: -1px 0;
    pointer-events: none;
  }
  .rf-ba__handle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--pos);
    translate: -50% -50%;
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-content: center;
    border-radius: var(--rf-r-pill);
    background: var(--rf-gold);
    color: var(--rf-on-gold);
    pointer-events: none;
  }
  .rf-ba__range {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
  }

  /* ======================================================================
     VIDEO FRAME  ·  2.39:1 cinemascope, gold play button
     ====================================================================== */

  .rf-video {
    position: relative;
    aspect-ratio: var(--rf-cinemascope);
    border-radius: var(--rf-r-md);
    overflow: clip;
    background: var(--rf-void);
    isolation: isolate;
  }
  .rf-video__poster {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 38%;
  }
  .rf-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(9,9,11,.7), transparent 55%);
  }
  .rf-video__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    z-index: 1;
    inline-size: 88px;
    block-size: 88px;
    display: grid;
    place-content: center;
    border-radius: var(--rf-r-pill);
    border: 1.5px solid var(--rf-gold);
    background: color-mix(in oklab, var(--rf-void) 45%, transparent);
    color: var(--rf-gold);
    transition: background var(--rf-dur-base) var(--rf-ease),
                transform var(--rf-dur-base) var(--rf-ease);
  }
  .rf-video__play:hover { background: var(--rf-gold); color: var(--rf-on-gold); transform: translate(-50%,-50%) scale(1.06); }
  .rf-video__meta {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: var(--rf-sp-sm);
    padding: 1.25rem 1.5rem;
    font-size: var(--rf-fs-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .rf-video__meta b { font-family: var(--rf-font-display); font-weight: var(--rf-w-medium); color: var(--rf-ink); }
  .rf-video__meta span { color: var(--rf-gold-hover); }

  /* ======================================================================
     ENGAGEMENT  ·  6 service commitments — no vanity numbers
     ====================================================================== */

  .rf-engage {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rf-hairline);
    border: 1px solid var(--rf-hairline);
    border-radius: var(--rf-r-md);
    overflow: clip;
  }
  .rf-engage__item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--rf-canvas);
  }
  .rf-tile--elevated .rf-engage__item { background: var(--rf-elevated); }
  .rf-engage__title {
    font-family: var(--rf-font-display);
    font-size: 1.2rem;
    font-weight: var(--rf-w-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-block-start: 0.3rem;
  }
  .rf-engage__text { font-size: var(--rf-fs-body-sm); color: var(--rf-ink-muted); }

  /* ======================================================================
     CROSS-LINK CARDS  ·  photo + title + lead + gold arrow
     ====================================================================== */

  .rf-xlinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rf-sp-md);
  }
  .rf-xlink {
    display: flex;
    flex-direction: column;
    background: var(--rf-elevated);
    border: 1px solid var(--rf-hairline);
    border-radius: var(--rf-r-md);
    overflow: clip;
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                transform var(--rf-dur-base) var(--rf-ease);
  }
  .rf-xlink:hover { border-color: var(--rf-gold-40); transform: translateY(-4px); }
  .rf-xlink__media { display: block; overflow: clip; }
  .rf-xlink__media img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;       /* uniform card image, whatever the source ratio */
    object-fit: cover;
    transition: transform var(--rf-dur-slow) var(--rf-ease-cinema);
  }
  .rf-xlink:hover .rf-xlink__media img { transform: scale(1.05); }
  .rf-xlink__body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.75rem;
    flex: 1;
  }
  .rf-xlink__title {
    font-size: var(--rf-fs-h3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rf-sp-sm);
  }
  .rf-xlink__arrow {
    color: var(--rf-gold);
    transition: transform var(--rf-dur-base) var(--rf-ease);
  }
  .rf-xlink:hover .rf-xlink__arrow { transform: translateX(6px); }
  .rf-xlink__lead { font-size: var(--rf-fs-body-sm); color: var(--rf-ink-muted); }

  /* ======================================================================
     CTA CLOSER  ·  full-bleed photo + radial scrim + one CTA
     ====================================================================== */

  .rf-cta {
    position: relative;
    isolation: isolate;
    min-block-size: clamp(440px, 64dvh, 640px);
    display: grid;
    place-items: center;
    overflow: clip;
    background: var(--rf-void);
    text-align: center;
  }
  .rf-cta__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%; block-size: 100%;
    object-fit: cover;
    object-position: 50% 35%;
  }
  .rf-cta__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(ellipse 70% 80% at 50% 50%, rgba(9,9,11,.55), rgba(9,9,11,.9));
  }
  .rf-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rf-sp-md);
    padding: var(--rf-section) var(--rf-gutter);
    max-inline-size: 40ch;
  }
  .rf-cta__title {
    font-size: var(--rf-fs-display);
    letter-spacing: var(--rf-ls-display);
    text-wrap: balance;
  }

  /* ======================================================================
     BREADCRUMB
     ====================================================================== */

  .rf-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--rf-fs-caption);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rf-ink-muted);
  }
  .rf-crumbs a:hover { color: var(--rf-gold-hover); }
  .rf-crumbs li { display: flex; align-items: center; gap: 0.5rem; }
  .rf-crumbs li:not(:last-child)::after {
    content: "·";
    color: var(--rf-gold);
  }
  .rf-crumbs [aria-current] { color: var(--rf-ink); }

  /* ======================================================================
     BLOG CARD
     ====================================================================== */

  .rf-post {
    display: flex;
    flex-direction: column;
    background: var(--rf-elevated);
    border: 1px solid var(--rf-hairline);
    border-radius: var(--rf-r-md);
    overflow: clip;
    transition: border-color var(--rf-dur-base) var(--rf-ease);
  }
  .rf-post:hover { border-color: var(--rf-gold-40); }
  .rf-post__media { display: block; overflow: clip; }
  .rf-post__media img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;       /* uniform card image, whatever the source ratio */
    object-fit: cover;
    transition: transform var(--rf-dur-slow) var(--rf-ease-cinema);
  }
  .rf-post:hover .rf-post__media img { transform: scale(1.05); }
  .rf-post__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.6rem; }
  .rf-post__title { font-size: var(--rf-fs-h3); text-wrap: balance; }
  .rf-post__excerpt {
    font-size: var(--rf-fs-body-sm);
    color: var(--rf-ink-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: clip;
  }

  /* ======================================================================
     FORMS
     ====================================================================== */

  .rf-field { display: flex; flex-direction: column; gap: 0.5rem; }
  .rf-field__label {
    font-family: var(--rf-font-body);
    font-size: var(--rf-fs-overline);
    font-weight: var(--rf-w-medium);
    letter-spacing: var(--rf-ls-overline);
    text-transform: uppercase;
    color: var(--rf-ink-muted);
  }
  .rf-input,
  .rf-textarea {
    min-block-size: 56px;
    padding: 0.95rem 1.1rem;
    background: var(--rf-elevated);
    color: var(--rf-ink);
    border: 1px solid var(--rf-hairline);
    border-radius: var(--rf-r-md);
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                box-shadow var(--rf-dur-base) var(--rf-ease);
  }
  .rf-textarea { min-block-size: 140px; resize: vertical; }
  .rf-input:focus-visible,
  .rf-textarea:focus-visible {
    outline: none;
    border-color: var(--rf-gold);
    box-shadow: var(--rf-ring-gold);
  }
  .rf-field__help { font-size: var(--rf-fs-caption); color: var(--rf-ink-faint); }

  /* alternative-channels block (contact page) */
  .rf-channels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rf-sp-md);
  }
  .rf-channel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.6rem;
    background: var(--rf-elevated);
    border: 1px solid var(--rf-hairline);
    border-radius: var(--rf-r-md);
  }
  .rf-channel b {
    font-family: var(--rf-font-display);
    font-size: 1.15rem;
    font-weight: var(--rf-w-medium);
    text-transform: uppercase;
  }

  /* ======================================================================
     FOOTER
     ====================================================================== */

  .rf-footer {
    background: var(--rf-sunken);
    padding-block: var(--rf-sp-xl) var(--rf-sp-md);
    color: var(--rf-ink-muted);
    /* fine ligne dorée au bord haut — symétrique de celle de la nav.
       Définit le footer comme zone visuelle sans gros séparateur. */
    border-block-start: 1px solid var(--rf-gold-25);
  }
  .rf-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;          /* logo + tag se alignent au top des 3 colonnes */
  }
  .rf-footer__logo {
    display: block;              /* pas inline-block : pas de gap baseline */
    line-height: 0;              /* pas de leading sous l'image */
  }
  .rf-footer__logo img { display: block; block-size: 80px; inline-size: auto; }
  .rf-footer__tag {
    margin-block-start: var(--rf-sp-xs);
    font-size: var(--rf-fs-body-sm);
    max-inline-size: 34ch;
  }
  .rf-footer__col h4 {
    font-size: var(--rf-fs-overline);
    letter-spacing: var(--rf-ls-overline);
    color: var(--rf-ink);
    margin-block-end: var(--rf-sp-sm);
  }
  .rf-footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; list-style: none; padding: 0; }
  .rf-footer__col a { color: var(--rf-ink-muted); font-size: var(--rf-fs-body-sm); }
  .rf-footer__col a:hover { color: var(--rf-gold-hover); }
  .rf-footer__legal {
    margin-block-start: var(--rf-sp-xl);
    padding-block-start: var(--rf-sp-md);
    border-block-start: 1px solid var(--rf-hairline);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--rf-sp-xs);
    font-size: var(--rf-fs-micro);
    color: var(--rf-ink-faint);
  }

  /* ======================================================================
     PAGE COMPONENTS · S2.17 Migration  (was inline in 18 v6 pages)
     ----------------------------------------------------------------------
     Consolidated from 50 duplicate <style> blocks across services / hubs /
     parlons / reserver / tarifs / portfolio. Single source of truth here.
     Class names match the original inline so no HTML changes are required
     EXCEPT for `.rf-faq--card` and `.rf-tcard--photo` which are NEW
     modifiers added to avoid name collision with the Cinéma `.rf-faq` and
     `.rf-tcard` components above. 11 pages have HTML updated to add those
     modifier classes (services, pack, parlons, reserver, temoignages).
     ====================================================================== */

  /* -------- HERO · compact (services + parlons + reserver + videaste) --- */
  .rf-hero--compact {
    --_rf-hero-bg-brightness: 0.52;
    --_rf-hero-bg-contrast: 1.05;
    --_rf-hero-bg-saturate: 0.92;
    min-block-size: clamp(420px, 55vh, 620px);
    block-size: auto;
  }
  .rf-hero--compact .rf-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .rf-hero--compact .rf-hero__bg img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(var(--_rf-hero-bg-brightness))
            contrast(var(--_rf-hero-bg-contrast))
            saturate(var(--_rf-hero-bg-saturate));
  }
  .rf-hero--compact .rf-hero__scrim {
    z-index: 1;
    background:
      linear-gradient(to top,
        rgba(9,9,11,.84) 0%, rgba(9,9,11,.62) 45%,
        rgba(9,9,11,.28) 78%, transparent 100%),
      linear-gradient(to right,
        rgba(9,9,11,.58) 0%, rgba(9,9,11,.18) 55%, transparent 90%);
  }
  .rf-hero--compact .rf-hero__inner {
    position: relative;
    z-index: 2;
    padding-block-start: clamp(7rem, 15vh, 10.5rem);
    padding-block-end: clamp(3.5rem, 7vh, 5.5rem);
  }
  /* brightness variants (parlons + reserver use .55, videaste uses .58 + softer saturate) */
  .rf-hero--compact-soft   { --_rf-hero-bg-brightness: 0.55; }
  .rf-hero--compact-bright {
    --_rf-hero-bg-brightness: 0.58;
    --_rf-hero-bg-contrast: 1.08;
    --_rf-hero-bg-saturate: 0.85;
  }

  /* -------- HERO · duo (hubs editoriales + a-propos simple) ------------- */
  .rf-hero--duo .rf-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .rf-hero--duo .rf-hero__grid img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.62) contrast(1.04) saturate(.9);
  }
  .rf-hero--duo .rf-hero__scrim {
    z-index: 1;
    background:
      linear-gradient(to top,
        rgba(9,9,11,.87) 0%, rgba(9,9,11,.78) 42%,
        rgba(9,9,11,.58) 66%, rgba(9,9,11,.28) 84%, transparent 95%),
      linear-gradient(to right,
        rgba(9,9,11,.68) 0%, rgba(9,9,11,.24) 50%, transparent 80%);
  }
  .rf-hero--duo .rf-hero__inner {
    position: relative;
    z-index: 2;
  }
  /* a-propos uses an unfiltered split with a single vertical scrim */
  .rf-hero--duo-simple .rf-hero__grid img { filter: none; }
  .rf-hero--duo-simple .rf-hero__scrim {
    background: linear-gradient(180deg,
      rgba(14,14,16,.55) 0%, rgba(14,14,16,.35) 35%, rgba(14,14,16,.85) 100%);
  }
  @media (max-width: 768px) {
    .rf-hero--duo .rf-hero__grid,
    .rf-hero--duo-simple .rf-hero__grid {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
    }
  }

  /* -------- CASES grid (10 services use this for "Notre prestation") --- */
  .rf-cases {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-md);
  }
  @media (min-width: 640px)  { .rf-cases { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .rf-cases { grid-template-columns: repeat(3, 1fr); } }
  .rf-case {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    padding: var(--rf-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease),
                transform    var(--rf-dur-base) var(--rf-ease);
  }
  .rf-case:hover {
    border-color: rgba(201,154,72,.42);
    background: rgba(255,255,255,.04);
    transform: translateY(-2px);
  }
  .rf-case__num {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-light);
    letter-spacing: .04em;
    font-size: 1.4rem;
    color: var(--rf-gold);
    opacity: .85;
    line-height: 1;
  }
  .rf-case__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 1.02rem;
    color: var(--rf-ink);
    margin: 0;
    line-height: 1.3;
  }
  .rf-case__text {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--rf-ink-muted);
    margin: 0;
  }

  /* -------- FAQ card modifier (services + pack + parlons + reserver) ---- */
  /* Modifier of the existing `.rf-faq`. Adds card visuals; replaces the
     hairline-divider Cinéma look with bordered rounded cards. Activated by
     adding `rf-faq--card` to the wrapper AND `rf-faq__item--card` to each
     <details>. */
  .rf-faq--card { border-block-start: 0; display: flex; flex-direction: column; gap: .6rem; max-inline-size: 880px; margin-inline: auto; }
  .rf-faq__item--card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color var(--rf-dur-base) var(--rf-ease);
    border-block-end: 0;  /* override Cinéma hairline */
  }
  .rf-faq__item--card[open] { border-color: rgba(201,154,72,.32); }
  .rf-faq__item--card .rf-faq__q {
    padding: 1.1rem 1.4rem;
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .95rem;
    color: var(--rf-ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: color var(--rf-dur-base);
  }
  .rf-faq__item--card .rf-faq__q::-webkit-details-marker { display: none; }
  .rf-faq__item--card .rf-faq__q::after {
    content: '+';
    color: var(--rf-gold);
    font-size: 1.4rem;
    font-weight: var(--rf-w-light);
    transition: transform var(--rf-dur-base) var(--rf-ease);
    line-height: 1;
  }
  .rf-faq__item--card[open] .rf-faq__q::after { transform: rotate(45deg); }
  .rf-faq__item--card .rf-faq__q:hover { color: var(--rf-gold); }
  .rf-faq__item--card .rf-faq__a {
    padding: 0 1.4rem 1.3rem;
    color: var(--rf-ink);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0;
  }
  .rf-faq__item--card .rf-faq__a p { margin: 0 0 .7rem; }
  .rf-faq__item--card .rf-faq__a p:last-child { margin-block-end: 0; }
  .rf-faq__item--card .rf-faq__a a {
    color: var(--rf-gold);
    text-decoration: none;
    border-block-end: 1px solid rgba(201,154,72,.35);
    transition: border-color var(--rf-dur-base);
  }
  .rf-faq__item--card .rf-faq__a a:hover { border-block-end-color: var(--rf-gold); }

  /* -------- TCARD photo modifier (temoignages + parlons) ---------------- */
  /* Modifier on the existing `.rf-tcard`. Adds avatar + rating + clamped
     quote styling on top of the Cinéma base. Wrap with class
     `.rf-tcard-grid` for the responsive grid. */
  .rf-tcard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-lg);
  }
  @media (min-width: 760px)  { .rf-tcard-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1200px) { .rf-tcard-grid { grid-template-columns: repeat(3, 1fr); } }
  .rf-tcard--photo {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    padding: var(--rf-sp-lg);
    gap: var(--rf-sp-md);
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease);
  }
  .rf-tcard--photo:hover {
    border-color: rgba(201,154,72,.35);
    background: rgba(255,255,255,.04);
  }
  .rf-tcard__head { display: flex; align-items: center; gap: var(--rf-sp-md); }
  .rf-tcard__avatar {
    inline-size: 64px; block-size: 64px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid rgba(201,154,72,.3);
  }
  .rf-tcard__id { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
  .rf-tcard__name {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em; text-transform: uppercase;
    font-size: .98rem; color: var(--rf-ink); line-height: 1.2;
  }
  .rf-tcard__context {
    font-size: .78rem;
    color: var(--rf-ink-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .rf-tcard__rating { display: flex; gap: .18rem; color: var(--rf-gold); align-items: center; }
  .rf-tcard__rating svg { inline-size: 14px; block-size: 14px; }
  .rf-tcard__rating svg path { fill: currentColor; }
  .rf-tcard__rating svg.is-empty path { fill: rgba(201,154,72,.18); }
  .rf-tcard__text {
    font-size: .96rem;
    line-height: 1.62;
    color: var(--rf-ink);
    margin: 0;
    font-style: italic;
  }
  .rf-tcard__text::before { content: '« '; color: var(--rf-gold); font-style: normal; }
  .rf-tcard__text::after  { content: ' »'; color: var(--rf-gold); font-style: normal; }
  /* parlons variant — smaller avatar + clamped quote */
  .rf-tcard--photo-sm .rf-tcard__avatar { inline-size: 56px; block-size: 56px; }
  .rf-tcard--photo-sm .rf-tcard__name   { font-size: .95rem; }
  .rf-tcard--photo-sm .rf-tcard__context{ font-size: .74rem; }
  .rf-tcard--photo-sm .rf-tcard__text {
    font-size: .93rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* temoignages mariages variant — gold-tinted border */
  .rf-tcard--mariage { border-color: rgba(201,154,72,.18); }

  /* -------- PRICETABLE (evenements + tarifs) ---------------------------- */
  .rf-pricetable {
    inline-size: 100%;
    border-collapse: collapse;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    overflow: hidden;
    margin-block-end: var(--rf-sp-xl);
    font-size: .95rem;
  }
  .rf-pricetable th,
  .rf-pricetable td {
    padding: .85rem 1rem;
    text-align: left;
    border-block-end: 1px solid rgba(255,255,255,.06);
  }
  .rf-pricetable thead th {
    background: rgba(201,154,72,.08);
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .85rem;
    color: var(--rf-gold);
  }
  .rf-pricetable td b { color: var(--rf-gold); }
  .rf-pricetable tbody tr:last-child td { border-block-end: 0; }
  .rf-pricetable tbody th {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .95rem;
  }
  .rf-pricetable td.rf-pricetable__feat {
    background: rgba(201,154,72,.06);
    font-weight: var(--rf-w-medium);
  }
  .rf-pricetable td .rf-pricetable__note {
    font-weight: var(--rf-w-light);
    font-family: var(--rf-font-body);
    text-transform: none;
    letter-spacing: 0;
    color: var(--rf-ink-muted);
    font-size: .85rem;
    display: block;
    margin-block-start: .2rem;
  }
  @media (max-width: 600px) {
    .rf-pricetable { font-size: .85rem; }
    .rf-pricetable th, .rf-pricetable td { padding: .6rem .5rem; }
  }

  /* -------- FORM WRAP · CF7 styling (parlons) --------------------------- */
  .rf-form-wrap { max-inline-size: 920px; margin-inline: auto; }
  .rf-form-wrap .anita-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-md);
    margin-block-end: var(--rf-sp-md);
    align-items: start !important;
  }
  @media (min-width: 760px)  { .rf-form-wrap .anita-contact-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .rf-form-wrap .anita-contact-grid { grid-template-columns: repeat(3, 1fr); } }
  .rf-form-wrap .rf-cf7-label      { display: block !important; margin: 0 !important; padding: 0; }
  .rf-form-wrap .rf-cf7-label-text {
    display: block;
    margin: 0 0 .55rem 0;
    line-height: 1.4;
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .75rem;
    color: var(--rf-ink-muted);
  }
  .rf-form-wrap .rf-cf7-label-full { grid-column: 1 / -1; }
  .rf-form-wrap .wpcf7-form-control-wrap {
    display: block;
    inline-size: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .rf-form-wrap p { margin: 0; }
  .rf-form-wrap .rf-req { color: var(--rf-gold); margin-inline-start: .15rem; }
  .rf-form-wrap input[type=text],
  .rf-form-wrap input[type=email],
  .rf-form-wrap input[type=tel],
  .rf-form-wrap input[type=date],
  .rf-form-wrap select,
  .rf-form-wrap textarea {
    inline-size: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px;
    padding: .85rem .95rem;
    color: var(--rf-ink);
    font-family: var(--rf-font-body);
    font-weight: var(--rf-w-light);
    font-size: .96rem;
    line-height: 1.5;
    box-sizing: border-box;
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease);
  }
  .rf-form-wrap input[type=text],
  .rf-form-wrap input[type=email],
  .rf-form-wrap input[type=tel],
  .rf-form-wrap input[type=date],
  .rf-form-wrap select {
    block-size: 54px !important;
    display: block !important;
    margin: 0 !important;
    vertical-align: top;
  }
  .rf-form-wrap textarea {
    min-block-size: 140px !important;
    display: block !important;
    margin: 0 !important;
    resize: vertical;
  }
  .rf-form-wrap input:focus,
  .rf-form-wrap select:focus,
  .rf-form-wrap textarea:focus {
    outline: none;
    border-color: var(--rf-gold);
    background: rgba(255,255,255,.06);
  }
  .rf-form-wrap input::placeholder,
  .rf-form-wrap textarea::placeholder { color: rgba(230,230,230,.4); }
  .rf-form-wrap select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23C99A48' stroke-width='1.5'><polyline points='1 1 6 6 11 1'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
  }
  .rf-form-wrap input[type=submit] {
    inline-size: auto;
    display: inline-block;
    background: var(--rf-gold);
    color: #0E0E10;
    border: 1px solid var(--rf-gold);
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .9rem;
    padding: 1rem 2.2rem;
    cursor: pointer;
    border-radius: 4px;
    margin-block-start: var(--rf-sp-md);
    transition: background var(--rf-dur-base) var(--rf-ease),
                transform  var(--rf-dur-base) var(--rf-ease);
  }
  .rf-form-wrap input[type=submit]:hover {
    background: #D9A85A;
    transform: translateY(-1px);
  }
  .rf-form-wrap .wpcf7-response-output {
    margin-block-start: var(--rf-sp-md);
    padding: .85rem 1rem;
    border-radius: 4px;
    font-size: .92rem;
  }
  .rf-form-wrap .wpcf7-not-valid-tip {
    color: #E89B6A;
    font-size: .82rem;
    margin-block-start: .35rem;
  }
  .rf-form-wrap .wpcf7-spinner { display: none; }

  /* -------- CONTACT CARD (parlons "Contact direct") --------------------- */
  .rf-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-lg);
  }
  @media (min-width: 760px) { .rf-contact-grid { grid-template-columns: repeat(3, 1fr); } }
  .rf-contact-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    padding: var(--rf-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-md);
    align-items: flex-start;
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease),
                transform    var(--rf-dur-base) var(--rf-ease);
  }
  .rf-contact-card:hover {
    border-color: rgba(201,154,72,.42);
    background: rgba(255,255,255,.04);
    transform: translateY(-2px);
  }
  .rf-contact-card__icon {
    inline-size: 48px; block-size: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,154,72,.12);
    border: 1px solid rgba(201,154,72,.28);
    color: var(--rf-gold);
    flex-shrink: 0;
  }
  .rf-contact-card__icon svg {
    inline-size: 22px; block-size: 22px;
    stroke: currentColor; fill: none; stroke-width: 1.6;
  }
  .rf-contact-card__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--rf-ink);
    margin: 0;
  }
  .rf-contact-card__value {
    font-size: 1.02rem;
    color: var(--rf-ink);
    margin: 0;
    line-height: 1.4;
    font-weight: var(--rf-w-regular);
    letter-spacing: .01em;
  }
  .rf-contact-card__value a {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid rgba(201,154,72,.35);
    transition: border-color var(--rf-dur-base), color var(--rf-dur-base);
  }
  .rf-contact-card__value a:hover {
    color: var(--rf-gold);
    border-block-end-color: var(--rf-gold);
  }
  .rf-contact-card__note {
    font-size: .85rem;
    color: var(--rf-ink-muted);
    margin: 0;
    line-height: 1.5;
  }

  /* -------- UNIVERS cards (portfolio: 5 universes) ---------------------- */
  .rf-univers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rf-sp-md);
    justify-content: center;
  }
  .rf-univers__card {
    flex: 0 0 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255,255,255,.025);
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                transform    var(--rf-dur-base) var(--rf-ease);
  }
  @media (min-width: 760px)  { .rf-univers__card { flex: 0 0 calc(50% - var(--rf-sp-md) / 2); } }
  @media (min-width: 1100px) { .rf-univers__card { flex: 0 0 calc(33.333% - var(--rf-sp-md) * 2 / 3); } }
  .rf-univers__card:hover {
    border-color: rgba(201,154,72,.55);
    transform: translateY(-3px);
  }
  .rf-univers__media {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #0E0E10;
    position: relative;
  }
  .rf-univers__media img {
    inline-size: 100%; block-size: 100%;
    object-fit: cover; display: block;
    transition: transform .8s var(--rf-ease);
    filter: brightness(.85) contrast(1.05);
  }
  .rf-univers__card:hover .rf-univers__media img {
    transform: scale(1.04);
    filter: brightness(.95) contrast(1.05);
  }
  .rf-univers__num {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1.2rem;
    z-index: 2;
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em;
    font-size: 2.4rem;
    color: var(--rf-gold);
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  .rf-univers__count {
    position: absolute;
    inset-block-start: 1.3rem;
    inset-inline-end: 1.2rem;
    z-index: 2;
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--rf-ink);
    background: rgba(14,14,16,.78);
    padding: .32rem .65rem;
    border-radius: 2px;
    border: 1px solid rgba(201,154,72,.3);
  }
  .rf-univers__body {
    padding: 1.3rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    flex: 1;
  }
  .rf-univers__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 1.18rem;
    color: var(--rf-ink);
    line-height: 1.2;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
  }
  .rf-univers__title svg {
    inline-size: 14px; block-size: 14px;
    color: var(--rf-gold);
    transition: transform var(--rf-dur-base) var(--rf-ease);
  }
  .rf-univers__card:hover .rf-univers__title svg { transform: translate(3px, -3px); }
  .rf-univers__lead {
    font-size: .88rem;
    color: var(--rf-ink-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
  }
  .rf-univers__cta {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .74rem;
    color: var(--rf-gold);
    margin-block-start: .4rem;
    border-block-start: 1px solid rgba(201,154,72,.18);
    padding-block-start: .7rem;
  }

  /* -------- STEPS · 3-col numbered (reserver "Comment ça marche") ------- */
  .rf-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-lg);
    counter-reset: rfstep;
  }
  @media (min-width: 900px) {
    .rf-steps { grid-template-columns: repeat(3, 1fr); gap: var(--rf-sp-md); }
  }
  .rf-step {
    position: relative;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    padding: var(--rf-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease);
  }
  .rf-step:hover { border-color: rgba(201,154,72,.32); background: rgba(255,255,255,.04); }
  .rf-step__num {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-light);
    font-size: 2.6rem;
    color: var(--rf-gold);
    line-height: 1;
    letter-spacing: .02em;
    opacity: .9;
  }
  .rf-step__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--rf-ink);
    margin: 0;
    line-height: 1.25;
  }
  .rf-step__text { font-size: .94rem; line-height: 1.6; color: var(--rf-ink); margin: 0; }
  .rf-step__note {
    font-size: .78rem;
    line-height: 1.5;
    color: var(--rf-ink-muted);
    margin: .4rem 0 0 0;
    letter-spacing: .02em;
  }

  /* -------- ENGAGE CARD (reserver "Nos engagements" — 4-col grid) ------- */
  /* Note: distinct from the Cinéma `.rf-engage` (3-col hairline grid). */
  .rf-engage-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-lg);
  }
  @media (min-width: 760px)  { .rf-engage-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .rf-engage-grid { grid-template-columns: repeat(4, 1fr); } }
  .rf-engage-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    padding: var(--rf-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
    align-items: flex-start;
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease),
                transform    var(--rf-dur-base) var(--rf-ease);
  }
  .rf-engage-card:hover {
    border-color: rgba(201,154,72,.42);
    background: rgba(255,255,255,.04);
    transform: translateY(-2px);
  }
  .rf-engage-card__icon {
    inline-size: 44px; block-size: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,154,72,.12);
    border: 1px solid rgba(201,154,72,.28);
    color: var(--rf-gold);
    flex-shrink: 0;
  }
  .rf-engage-card__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .95rem;
    color: var(--rf-ink);
    margin: 0;
    line-height: 1.2;
  }
  .rf-engage-card__text {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--rf-ink);
    margin: 0;
  }

  /* -------- CTA FINAL · gradient block (reserver "Parlons de votre projet") */
  .rf-cta-final {
    background: linear-gradient(180deg, rgba(201,154,72,.05), rgba(201,154,72,.02));
    border: 1px solid rgba(201,154,72,.22);
    border-radius: 8px;
    padding: var(--rf-sp-xl);
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-lg);
    align-items: flex-start;
    max-inline-size: 920px;
    margin-inline: auto;
  }
  @media (min-width: 900px) {
    .rf-cta-final {
      flex-direction: row;
      align-items: center;
      gap: var(--rf-sp-xl);
    }
  }
  .rf-cta-final__body { flex: 1; min-width: 0; }
  .rf-cta-final__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: 1.4rem;
    color: var(--rf-ink);
    margin: 0 0 .5rem 0;
    line-height: 1.2;
  }
  .rf-cta-final__title em {
    color: var(--rf-gold);
    font-style: italic;
    font-weight: var(--rf-w-light);
  }
  .rf-cta-final__text {
    font-size: .96rem;
    line-height: 1.6;
    color: var(--rf-ink);
    margin: 0;
  }
  .rf-cta-final__actions {
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
    flex-shrink: 0;
  }
  @media (min-width: 600px) { .rf-cta-final__actions { flex-direction: row; } }

  /* -------- OPTION ROW (pack-innopole "Options à la carte") ------------- */
  .rf-options-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-md);
    max-inline-size: 880px;
    margin-inline: auto;
  }
  @media (min-width: 760px) { .rf-options-list { grid-template-columns: repeat(2, 1fr); } }
  .rf-option-row {
    display: flex;
    align-items: flex-start;
    gap: var(--rf-sp-md);
    padding: var(--rf-sp-md) var(--rf-sp-lg);
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease);
  }
  .rf-option-row:hover {
    border-color: rgba(201,154,72,.32);
    background: rgba(255,255,255,.04);
  }
  .rf-option-row__icon {
    inline-size: 36px; block-size: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(201,154,72,.1);
    border: 1px solid rgba(201,154,72,.24);
    color: var(--rf-gold);
    flex-shrink: 0;
  }
  .rf-option-row__icon svg {
    inline-size: 18px; block-size: 18px;
    stroke: currentColor; fill: none; stroke-width: 1.6;
  }
  .rf-option-row__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
  }
  .rf-option-row__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: .92rem;
    color: var(--rf-ink);
    margin: 0;
    line-height: 1.3;
  }
  .rf-option-row__text {
    font-size: .88rem;
    line-height: 1.55;
    color: var(--rf-ink-muted);
    margin: 0;
  }

  /* -------- POUR QUI CARDS (reserver "Pour qui ?" — 4-col + fallback) --- */
  .rf-pour-qui {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-md);
  }
  @media (min-width: 760px)  { .rf-pour-qui { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .rf-pour-qui { grid-template-columns: repeat(4, 1fr); } }
  .rf-pq-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    padding: var(--rf-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
    transition: border-color var(--rf-dur-base) var(--rf-ease),
                background   var(--rf-dur-base) var(--rf-ease),
                transform    var(--rf-dur-base) var(--rf-ease);
  }
  .rf-pq-card:hover {
    border-color: rgba(201,154,72,.42);
    background: rgba(255,255,255,.04);
    transform: translateY(-2px);
  }
  .rf-pq-card__overline {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--rf-gold);
  }
  .rf-pq-card__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 1.08rem;
    color: var(--rf-ink);
    margin: 0;
    line-height: 1.2;
  }
  .rf-pq-card__price {
    font-family: var(--rf-font-body);
    font-weight: var(--rf-w-light);
    font-size: .85rem;
    color: var(--rf-ink-muted);
    letter-spacing: .02em;
  }
  .rf-pq-card__price strong { color: var(--rf-ink); font-weight: var(--rf-w-medium); }
  .rf-pq-card__desc {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--rf-ink);
    margin: 0;
  }
  .rf-pq-fallback {
    margin-block-start: var(--rf-sp-xl);
    padding: var(--rf-sp-lg);
    background: rgba(201,154,72,.06);
    border: 1px solid rgba(201,154,72,.22);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: var(--rf-sp-sm);
    align-items: flex-start;
  }
  @media (min-width: 760px) {
    .rf-pq-fallback {
      flex-direction: row;
      align-items: center;
      gap: var(--rf-sp-lg);
    }
  }
  .rf-pq-fallback__body { flex: 1; min-width: 0; }
  .rf-pq-fallback__title {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--rf-ink);
    margin: 0 0 .35rem 0;
  }
  .rf-pq-fallback__text {
    font-size: .93rem;
    line-height: 1.55;
    color: var(--rf-ink);
    margin: 0;
  }
  .rf-pq-fallback__cta { flex-shrink: 0; }

  /* -------- APERCU cards (tarifs "Aperçu des 5 prestations") ------------ */
  .rf-apercu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-block: var(--rf-sp-lg);
  }
  .rf-apercu__card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.4rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    transition: border-color var(--rf-dur-base), transform var(--rf-dur-base), background var(--rf-dur-base);
    position: relative;
    overflow: hidden;
  }
  .rf-apercu__card:hover {
    border-color: rgba(201,154,72,.45);
    background: rgba(201,154,72,.04);
    transform: translateY(-2px);
  }
  .rf-apercu__card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    block-size: 0;
    background: var(--rf-gold);
    transition: block-size .42s var(--rf-ease);
  }
  .rf-apercu__card:hover::before { block-size: 100%; }
  .rf-apercu__role {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rf-ink-muted);
    margin: 0 0 .35rem;
  }
  .rf-apercu__name {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    font-size: 1.4rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 .65rem;
    color: var(--rf-ink);
  }
  .rf-apercu__from {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rf-ink-muted);
    margin: 0 0 .15rem;
  }
  .rf-apercu__price {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    font-size: 2.2rem;
    color: var(--rf-gold);
    line-height: 1;
    margin: 0 0 .9rem;
  }
  .rf-apercu__desc {
    font-family: var(--rf-font-body);
    font-weight: var(--rf-w-light);
    font-size: .92rem;
    line-height: 1.55;
    color: var(--rf-ink-muted);
    margin: 0 0 1rem;
  }
  .rf-apercu__link {
    margin-block-start: auto;
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rf-gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
  }
  .rf-apercu__link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .rf-apercu__link svg { transition: transform var(--rf-dur-base) var(--rf-ease); }
  .rf-apercu__card:hover .rf-apercu__link svg { transform: translateX(3px); }

  /* -------- DUO PORTRAITS (pack + duo-photo-video — Pablo + Jenni) ------ */
  .rf-duo-portraits {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rf-sp-md);
    max-inline-size: 880px;
    margin-inline: auto;
    margin-block-end: var(--rf-sp-xl);
  }
  @media (min-width: 640px) {
    .rf-duo-portraits {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--rf-sp-lg);
    }
  }
  .rf-duo-portraits figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
  }
  .rf-duo-portraits img {
    inline-size: 100%; block-size: auto;
    display: block;
    border-radius: 4px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
  .rf-duo-portraits figcaption {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding-inline-start: .15rem;
  }
  .rf-duo-portraits__role {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-regular);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--rf-gold);
  }
  .rf-duo-portraits__name {
    font-family: var(--rf-font-display);
    font-weight: var(--rf-w-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--rf-ink);
    line-height: 1.3;
  }

  /* ======================================================================
     RESPONSIVE COLLAPSE
     ====================================================================== */

  @media (max-width: 64em) {
    .rf-pricing,
    .rf-engage,
    .rf-xlinks,
    .rf-channels { grid-template-columns: 1fr; }
    .rf-price--featured { transform: none; order: -1; }
    .rf-gallery { columns: 2 220px; }
    .rf-footer__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 48em) {
    .rf-split { grid-template-columns: 1fr; }
    .rf-split--reverse .rf-split__media { order: 0; }
    .rf-footer__grid { grid-template-columns: 1fr; }
    .rf-engage { border: 1px solid var(--rf-hairline); }
  }
  @media (max-width: 30em) {
    .rf-gallery { columns: 1; }
    .rf-hero__actions { flex-direction: column; align-items: stretch; inline-size: 100%; }
    .rf-hero__actions .rf-btn { inline-size: 100%; }
  }