/**
 * Realisons responsive refonte — #180 #181 #182 #183 #184 #185 #186
 *
 * Strict mobile-first : every override below uses @media (min-width: …)
 * with one of the 4 canonical breakpoints declared in
 * realisons-tokens.css (#178) :
 *
 *   --r-bp-sm: 480px    phone landscape / large phone
 *   --r-bp-md: 768px    tablet portrait
 *   --r-bp-lg: 1024px   tablet landscape / small laptop
 *   --r-bp-xl: 1280px   desktop
 *
 * NEVER use max-width. NEVER use any other pixel value in a
 * breakpoint condition. CSS custom properties do not work inside
 * @media queries so the numeric value is inlined — keep it in sync
 * with the tokens file.
 *
 * ZERO !important rule (#268) — every selector is scoped under its
 * parent section class to reach specificity (0,2,0), which beats
 * Divi 5's .et_pb_column > * (0,1,1). This file loads AFTER
 * realisons-components.css (declared dependency in the enqueue) so
 * source order makes mobile rules win on tied specificity.
 *
 * Mobile baseline (unstyled by this file) = phone portrait. Each
 * breakpoint progressively enables desktop features (multi-column
 * grids, horizontal scroll interactions, hover behaviours).
 */

/* ════════════════════════════════════════════════════════════════════════
   Global scrollbar hiding — cosmetic, scrolling still works.
   Requested: no visible scrollbars anywhere, especially on mobile.
   Firefox: scrollbar-width:none. WebKit/Blink: ::-webkit-scrollbar 0.
   ════════════════════════════════════════════════════════════════════════ */
html { scrollbar-width: none; }
html * { scrollbar-width: none; }
html::-webkit-scrollbar,
html *::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ════════════════════════════════════════════════════════════════════════
   Touch target minimums (WCAG 2.2 — Success Criterion 2.5.8)

   Applies to every pointer: coarse device (phones, tablets, touch
   laptops). Desktop mouse pointers keep the original compact sizing.
   ════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .r-btn,
  .r-chip,
  .r-pill,
  .r-nav-btn,
  .r-carousel__nav,
  .r-carousel__dot,
  .r-section-catalogue__card-link,
  .r-tarifs-hero__nav,
  .r-podcast__ep-prev,
  .r-podcast__ep-next,
  .r-faq__sidebar-q {
    min-height: 44px;
    min-width: 44px;
  }

  /* Dots also need a 44×44 tappable surface even when the visual
     circle is smaller — pad invisibly so the visible dot keeps its
     desktop appearance. background-clip:content-box hides the padding
     fill so the colored circle only paints the inner 6-8 px area.
     Active variants must repeat the clip because the components.css
     `background: var(--r-teal)` shorthand resets background-clip. */
  .r-carousel__dot,
  .r-tarifs-hero__dot,
  .r-carousel__dot.active,
  .r-tarifs-hero__dot--active {
    padding: 14px;
    margin: -14px;
    background-clip: content-box;
    -webkit-background-clip: content-box;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   #180 — .r-hero mobile-first refonte

   Baseline (phone) : 1 column stack, scroll natif, narrative states
   defilent à la scroll. Layer C (hover preview) reste désactivé en
   pointer:coarse (no hover) mais les listeners JS sont idempotents.
   ════════════════════════════════════════════════════════════════════════ */

/*
 * Baseline (phone portrait) — defensive override of the desktop-first
 * .r-hero__left { flex: 0 0 45% } declared in realisons-components.css.
 * Both columns must stack 100% width on mobile so the right column
 * (carousel + nav) appears below the narrative instead of overflowing.
 *
 * The hero parent uses .r-hero so chained-class selectors like
 * .r-hero .r-hero__left would still be (0,2,0). Same for __right.
 */
.r-hero {
  /* .r-hero is already display: flex + flex-direction: column in
     components.css — keep that baseline and just adjust the gap. */
  gap: clamp(16px, 3vh, 24px);
}

.r-hero .r-hero__left {
  /* Override the desktop-first 45% width */
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  /* Tighten the desktop-first padding for phone */
  padding-left: var(--r-gutter-sm);
  padding-right: var(--r-gutter-sm);
}

.r-hero .r-hero__right {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}

/* The carousel inside the right column gets native horizontal swipe
   on phones — desktop logic re-enables the absolute-positioned card
   deck via the 1024px breakpoint below. */
.r-hero .r-hero__carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding: 0 var(--r-gutter-sm) 8px;
  scrollbar-width: none;
}
.r-hero .r-hero__carousel::-webkit-scrollbar { display: none; }

.r-hero .r-hero__carousel > .r-card {
  flex: 0 0 88vw;
  scroll-snap-align: start;
  /* The existing components.css card sizing assumes desktop-first
     absolute positioning — neutralize so the flex value above wins. */
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

/* Tablet portrait — slightly larger gutters + card width */
@media (min-width: 768px) {
  .r-hero .r-hero__left {
    padding-left: var(--r-gutter-md);
    padding-right: var(--r-gutter-md);
  }

  .r-hero .r-hero__carousel {
    padding: 0 var(--r-gutter-md) 8px;
  }

  .r-hero .r-hero__carousel > .r-card {
    flex: 0 0 420px;
  }
}

/* Mobile/Tablet ONLY — single evaluation card, no carousel */
@media (max-width: 1023.98px) {
  .r-hero {
    min-height: auto;
    height: auto;
  }

  .r-hero .r-hero__narrative {
    min-height: auto;
  }

  /* Show only card 1 + overlay results, hide cards 2-4 */
  .r-hero .r-hero__carousel > .r-card[data-card="profils"],
  .r-hero .r-hero__carousel > .r-card[data-card="resultats"],
  .r-hero .r-hero__carousel > .r-card[data-card="programme"] {
    display: none;
  }

  /* Tighten the card title on mobile — no bottom padding/margin so the
     textarea sits closer underneath. */
  .r-hero .r-hero__carousel .r-card .r-h3 {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* Textarea limited to 2 visible lines on mobile to keep the card
     compact at the bottom of the viewport. */
  .r-hero .r-evaluation__input {
    min-height: 0;
    height: calc(2 * 1.5em + 16px);
    rows: 2;
    resize: none;
  }

  /* Hide the description paragraph inside the evaluation card on mobile.
     Its text is copied to the textarea placeholder by hero-card-mobile.js. */
  .r-hero .r-hero__carousel > .r-card[data-card="evaluation"] > .r-body-sm {
    display: none;
  }

  /* Card 1 + overlays fill available width, but stay compact on mobile.
     Limit to 40 % of viewport to avoid the desktop-tall carousel
     leaking onto small screens. */
  .r-hero .r-hero__carousel > .r-card[data-card="evaluation"],
  .r-hero .r-hero__carousel > .r-card--overlay {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: 40dvh;
    overflow: hidden;
    padding: clamp(12px, 2.4vw, 18px);
    gap: clamp(6px, 1.4vw, 12px);
    opacity: 1;
    pointer-events: auto;
  }

  /* Hide entire carousel wrapper — card 1 rendered outside via JS or
     the carousel container is transparent with only card 1 visible.
     Reset the desktop fixed height so mobile uses content-based sizing. */
  .r-hero .r-hero__carousel {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  /* Card sticky above the footer on mobile/tablet. Footer height is
     measured at runtime by chrome-measure.js into --r-footer-h. */
  .r-hero .r-hero__right {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--r-footer-h, 0px) + env(safe-area-inset-bottom));
    z-index: 5;
    padding: 0 var(--r-gutter-sm, 16px) 12px;
    background: linear-gradient(to bottom, transparent, var(--r-bg) 24%);
    pointer-events: none;
  }
  .r-hero .r-hero__right > * { pointer-events: auto; }

  /* Hero shell locked to available viewport — no page scroll, no rubber
     band. Card fixed above footer via .r-hero__right bottom. */
  .r-hero {
    height: calc(100dvh - var(--r-footer-h, 0px) - var(--r-header-h, 0px));
    min-height: 0;
    max-height: calc(100dvh - var(--r-footer-h, 0px) - var(--r-header-h, 0px));
    overflow: hidden;
    padding-bottom: 0;
    touch-action: none;
    overscroll-behavior: contain;
  }
  .r-hero .r-hero__left {
    padding-bottom: 12px;
  }

  /* Hide carousel nav — single card, no nav needed */
  .r-hero .r-carousel__nav-area,
  .r-hero .r-carousel__nav,
  .r-hero .r-carousel__dots,
  .r-hero .r-carousel__live {
    display: none;
  }

  /* Hide bottom CTA "Évaluer ma situation" + sublabel */
  .r-hero .r-hero__bottom {
    display: none;
  }

  /* ── Section padding reset for mobile ──
     Desktop uses clamp(80px, 8vw, 160px) lateral padding — too wide
     for mobile. Override to phone-friendly gutters. */
  .r-tarifs-hero.r-tarifs-hero,
  .r-section-catalogue.r-section-catalogue,
  .r-section-podcast.r-section-podcast,
  .r-faq.r-faq {
    padding-left: var(--r-gutter-sm, 16px);
    padding-right: var(--r-gutter-sm, 16px);
  }
}

/* Laptop+ — restore the desktop-first 45/55 split, hand the
   carousel back to its absolute-positioned card deck. */
@media (min-width: 1024px) {
  .r-hero .r-hero__left {
    flex: 0 0 45%;
    width: 45%;
    max-width: 45%;
    padding-left: clamp(110px, 10vw, 160px);
    padding-right: clamp(20px, 3vw, 80px);
  }

  .r-hero .r-hero__right {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .r-hero .r-hero__carousel {
    /* Reset the mobile flex layout so the existing absolute-positioned
       card deck from components.css takes over (driven by carousel.js). */
    display: block;
    /* `overflow: clip` instead of `hidden` — `hidden` creates a
       scrollable context (scrollLeft can be set programmatically),
       and the browser's autoscroll-on-focus was shifting the carousel
       by ~1060px after each rotation, making the cards drift off the
       viewport on subsequent rotations. `clip` blocks programmatic
       scroll entirely. */
    overflow: clip;
    padding: 0;
    position: relative;
  }

  /* Restore the original absolute-positioned card deck — carousel.js
     drives transforms/opacity on top of this base (top:4px, left:0). */
  .r-hero .r-hero__carousel > .r-card {
    flex: none;
    position: absolute;
    top: 4px;
    left: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   #181 — .r-tarifs-hero — simplified one-card-at-a-time carousel
   ════════════════════════════════════════════════════════════════════════ */

/*
 * Mobile: hide left column, show only the carousel (card + nav + note).
 * Card fills the viewport width. Desktop restores the 45/55 split.
 */

/* Mobile: hide left column text, carousel is the only content.
   Section fits the viewport — card scrolls internally if taller. */
@media (max-width: 1023.98px) {
  .r-tarifs-hero .r-tarifs-hero__left {
    display: none;
  }

  section.r-tarifs-hero,
  .r-section-tarif .r-tarifs-hero {
    height: 100vh;
    min-height: 0;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Symmetric top/bottom — matches the card↔nav gap so the visual
       breathing space is identical above and below the card. */
    padding: clamp(56px, 8vh, 88px) var(--r-gutter-sm, 16px);
    box-sizing: border-box;
    /* Swipe handled by tarifs-carousel.js — disable browser pan. */
    touch-action: none;
    overscroll-behavior: contain;
  }

  /* No scrollbars anywhere inside the tarifs section on mobile. */
  .r-tarifs-hero,
  .r-tarifs-hero * {
    scrollbar-width: none;
  }
  .r-tarifs-hero::-webkit-scrollbar,
  .r-tarifs-hero *::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .r-tarifs-hero .r-tarifs-hero__inner {
    width: 100%;
    gap: clamp(8px, 1.5vh, 16px);
  }

  .r-tarifs-hero__right {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.5vh, 16px);
  }

  .r-tarifs-hero .r-tarifs-hero__carousel {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Symmetric horizontal gutter so the card doesn't touch the
       viewport edges. */
    padding: 0 clamp(12px, 4vw, 24px);
    box-sizing: border-box;
  }

  /* Card sized naturally — no inner scrollbar on mobile. */
  .r-tarifs-hero__card {
    width: 100%;
    overflow: hidden;
    padding: clamp(12px, 2vh, 20px);
    gap: clamp(4px, 0.8vh, 8px);
  }

  .r-tarifs-hero__card-label { margin: 0; }
  .r-tarifs-hero__card-prix {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    line-height: 1;
    margin: 0;
  }
  .r-tarifs-hero__card-desc { margin: 0; line-height: 1.35; }
  .r-tarifs-hero__features {
    margin: 4px 0 0;
    gap: 3px;
  }
  .r-tarifs-hero__feature { line-height: 1.25; }
  .r-tarifs-hero__card-spacer { min-height: 4px; }
  .r-tarifs-hero__card-cta { margin-top: 4px; }
  .r-tarifs-hero__card-note { margin: 0; padding: 0; }
  /* Cancel the parent gap (clamp(4px, 0.8vh, 8px)) between CTA and note. */
  .r-tarifs-hero__card .r-tarifs-hero__card-note { margin-top: calc(-1 * clamp(4px, 0.8vh, 8px)); }

  .r-tarifs-hero__nav-area {
    flex-shrink: 0;
  }
}

@media (min-width: 1024px) {
  /* Section fits viewport exactly — no page scroll on desktop */
  section.r-tarifs-hero,
  .r-section-tarif .r-tarifs-hero {
    height: 100vh;
    min-height: 0;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
  }

  .r-tarifs-hero .r-tarifs-hero__inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(32px, 5vw, 80px);
    width: 100%;
    max-width: none;
    height: 100%;
  }

  /* Left column — hero__top pinned to top (inherits .r-hero__left padding),
     narrative (title + pitch) vertically centered in the remaining space. */
  .r-tarifs-hero .r-tarifs-hero__left {
    flex: 0 0 45%;
    max-width: 45%;
    justify-content: flex-start;
  }
  /* Left column — desktop sizing. Narrative (titre + pitch) aligned
     horizontally with hero__top (same margin-left), and vertically
     centered in the remaining space via auto margins. */
  .r-tarifs-hero__left .r-eyebrow { margin-bottom: 8px; }
  .r-tarifs-hero .r-tarifs-hero__titre,
  .r-tarifs-hero .r-tarifs-hero__sous-titre,
  .r-tarifs-hero .r-tarifs-hero__pitch {
    margin-left: clamp(30px, 4vw, 80px);
  }
  .r-tarifs-hero .r-tarifs-hero__titre {
    font-size: clamp(32px, 3.2vw, 44px);
    margin-top: auto;
  }
  .r-tarifs-hero .r-tarifs-hero__pitch { margin-bottom: auto; }

  /* Right column — carousel centered in the column, not stuck right */
  .r-tarifs-hero__right {
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .r-tarifs-hero .r-tarifs-hero__carousel {
    margin-left: auto;
    margin-right: auto;
  }

  .r-tarifs-hero__carousel {
    max-width: min(40vw, 540px);
  }

  /* All cards share the same dimensions so the first one (longer copy)
     doesn't overflow. Reduced ~15% from the previous size, kept fully
     viewport-relative. */
  .r-tarifs-hero__card {
    height: min(60vh, 476px);
    max-height: min(60vh, 476px);
    width: min(40vw, 540px);
    max-width: min(40vw, 540px);
    overflow: hidden;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   #182 — .r-section-catalogue mobile-first refonte

   Grid: 1 → 2 → 3 cols. Filter pills horizontal scroll on phones
   (no wrap) to keep the UI compact while preserving tap targets.
   ════════════════════════════════════════════════════════════════════════ */

/* Padding is left to the components.css base rule
   `.r-section-catalogue.r-section-catalogue` (0,2,0) which uses the
   asymmetric clamp() padding for proper desktop framing — overriding
   it here loses anyway (lower specificity) AND would force a uniform
   gutter on desktop where we want the timeline-aligned left margin. */

/* Specificity (0,2,0) — matches the base declaration so source order wins. */
.r-section-catalogue .r-section-catalogue__grid {
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 20px);
}

/* Filter dropdown + search stack on mobile, sit side-by-side at tablet+ */
.r-section-catalogue .r-section-catalogue__search {
  width: 100%;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .r-section-catalogue .r-section-catalogue__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .r-section-catalogue .r-section-catalogue__search {
    width: auto;
    margin-top: 0;
    min-width: 260px;
  }
}

/* Laptop — 3 columns grid (matches the base file). Padding stays at
   the asymmetric clamp() value from components.css (timeline-aligned
   left padding) — don't override it here. */
@media (min-width: 1024px) {
  .r-section-catalogue .r-section-catalogue__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* No 1280+ override for catalogue — the original asymmetric clamp()
   padding from components.css (.r-section-catalogue.r-section-catalogue,
   specificity (0,2,0)) provides the proper desktop framing. Adding a
   max-width: 1200px here narrowed the section to a centered 1200px
   box while the hero stayed full-width, making page widths inconsistent
   across the site. */

/* ════════════════════════════════════════════════════════════════════════
   #183 — .r-section-podcast mobile-first refonte

   Feat cards (intro piliers) : 1 → 2 → 3 cols.
   Episodes carousel : native swipe on touch, arrow nav on desktop.
   ════════════════════════════════════════════════════════════════════════ */

/* Padding for .r-section-podcast comes from the components.css base
   rule `.r-section-podcast.r-section-podcast` (0,2,0) — same reason
   as catalogue: keep the asymmetric desktop padding intact. */

/* Specificity (0,2,0) — matches base declaration so source order wins. */
.r-section-podcast .r-podcast__features {
  grid-template-columns: 1fr;
  gap: clamp(12px, 2vw, 20px);
}

.r-section-podcast .r-podcast__episodes-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.r-section-podcast .r-podcast__episodes-track::-webkit-scrollbar { display: none; }

.r-section-podcast .r-podcast__ep-card {
  flex: 0 0 85vw;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .r-section-podcast .r-podcast__features {
    grid-template-columns: repeat(2, 1fr);
  }

  .r-section-podcast .r-podcast__ep-card {
    flex: 0 0 380px;
  }
}

/* Laptop — 3 columns features. Padding stays at the asymmetric clamp()
   value from components.css — don't override it here. */
@media (min-width: 1024px) {
  .r-section-podcast .r-podcast__features {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* No 1280+ override for podcast inner — same reason as catalogue. */

/* ════════════════════════════════════════════════════════════════════════
   #184 — .r-faq mobile-first refonte

   Phone: sidebar collapses above the answer zone as an accordion.
   Tablet+: sidebar 50% left, answer 50% right, side-by-side.
   Laptop+: original 280px sidebar + flexible answer column.
   ════════════════════════════════════════════════════════════════════════ */

/*
 * Phones get a stacked accordion-like layout : sidebar above, answer zone
 * below. The widget keeps display: flex from the base declaration but we
 * flip it to column on phones via flex-direction.
 * Specificity (0,2,0) matches the base to win on source order.
 */
.r-faq .r-faq__widget {
  flex-direction: column;
}

/* 50/50 vertical split — sidebar (questions) and main (answer) share
   the available widget height equally on mobile. Both scroll internally. */
.r-faq .r-faq__widget {
  height: 100%;
  min-height: 0;
}

.r-faq .r-faq__sidebar {
  flex: 1 1 50%;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: 50%;
  border-right: none;
  border-bottom: 1px solid #C8D2DC;
  padding: 16px var(--r-gutter-sm);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Bump every text element inside the FAQ sidebar by +3pt on mobile. */
.r-faq .r-faq__sidebar .r-faq__sidebar-title { font-size: calc(11px + 3pt); }
.r-faq .r-faq__sidebar .r-faq__search        { font-size: calc(13px + 3pt); }
.r-faq .r-faq__sidebar .r-faq__sidebar-cat   { font-size: calc(11px + 3pt); }
.r-faq .r-faq__sidebar .r-faq__sidebar-q     { font-size: calc(13px + 3pt); }

.r-faq .r-faq__main {
  flex: 1 1 50%;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  max-height: 50%;
  padding: 16px var(--r-gutter-sm);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-size: 12pt;
}
.r-faq .r-faq__main * {
  font-size: 12pt;
}

/* Tablet portrait — switch to side-by-side 50/50 split */
@media (min-width: 768px) {
  .r-faq .r-faq__widget {
    flex-direction: row;
  }

  .r-faq .r-faq__sidebar {
    flex: 1 1 50%;
    max-width: 50%;
    max-height: none;
    border-right: 1px solid #C8D2DC;
    border-bottom: none;
    padding: 20px 24px;
  }

  .r-faq .r-faq__main {
    flex: 1 1 50%;
    max-width: 50%;
    padding: 24px 28px;
  }
}

/* Laptop+ — original full padding */
@media (min-width: 1024px) {
  .r-faq .r-faq__sidebar {
    padding: 24px 28px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   #185 — .r-header mobile-first refonte

   Phone: icons only at 44×44, labels hidden (handled by CSS tooltip
   in header-nav-tooltip.js already). Logo mark-only under 480px.
   Desktop: icons 36×36 + hover labels (existing behavior).
   ════════════════════════════════════════════════════════════════════════ */

/* Header padding for the mobile baseline only — desktop padding stays
   on the components.css baseline (the asymmetric clamp() values that
   match the .r-hero alignment). */
@media (max-width: 767.98px) {
  .r-header {
    padding: 8px var(--r-gutter-sm);
  }
}

.r-header .r-header__nav {
  gap: 4px;
}

.r-header .r-nav-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone landscape+ : slightly more room between icons */
@media (min-width: 480px) {
  .r-header .r-header__nav {
    gap: 8px;
  }
}

/* Tablet+ : let components.css base padding apply (it already uses
   asymmetric clamp() values that align with the rest of the layout). */

/* ════════════════════════════════════════════════════════════════════════
   #186 — .r-footer

   The footer uses the components.css base layout at ALL viewport
   widths: flex column, centered horizontally + vertically, two
   stacked lines (links above, copyright below), symmetric padding.
   No responsive override needed — the base is correct as-is.
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   Safe area — notch devices (iPhone X+, iPad Pro)

   Wrapped in `@media (max-width: 1023.98px)` so the safe-area padding
   only applies on phones/tablets. On desktop the asymmetric clamp()
   padding from components.css (~80-160px on the left for timeline
   alignment) wins natively — adding env() padding here at desktop
   widths erased that asymmetry and made the hero look like every
   other section (the framing inconsistency reported on 2026-04-11).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  @supports (padding: env(safe-area-inset-left)) {
    .r-hero,
    .r-tarifs-hero .r-tarifs-hero__inner,
    .r-section-catalogue,
    .r-section-podcast .r-section-podcast__inner,
    .r-faq {
      padding-left: max(var(--r-gutter-sm), env(safe-area-inset-left));
      padding-right: max(var(--r-gutter-sm), env(safe-area-inset-right));
    }
  }
}

/* ─── #189 Podcast — hide H1 titre on mobile, show .r-body subtitle
   instead (matches the eyebrow + body pattern used on other pages). */
@media (max-width: 1023.98px) {
  .r-section-podcast .r-podcast__titre { display: none; }
  .r-section-podcast .r-podcast__subtitle { display: block; }
}

/* ─── #194 Podcast — platform icons pinned top-right of the header ─── */
@media (max-width: 1023.98px) {
  .r-section-podcast .r-podcast__header {
    position: relative;
    display: block;
  }
  .r-section-podcast .r-podcast__header-text {
    /* Reserve space in the top-right for the absolutely-positioned icons. */
    padding-right: 140px;
  }
  .r-section-podcast .r-podcast__platforms {
    position: absolute;
    top: 0;
    right: 0;
    gap: 8px;
  }
  .r-section-podcast .r-podcast__platform {
    width: 36px;
    height: 36px;
  }
  .r-section-podcast .r-podcast__platform svg {
    width: 18px;
    height: 18px;
  }
}
@media (max-width: 479.98px) {
  /* Tight phones — smaller reserved gutter. */
  .r-section-podcast .r-podcast__header-text {
    padding-right: 120px;
  }
  .r-section-podcast .r-podcast__platform {
    width: 32px;
    height: 32px;
  }
  .r-section-podcast .r-podcast__platform svg {
    width: 16px;
    height: 16px;
  }
}

/* ─── #193 Page produit WooCommerce — single column en mobile ─── */
@media (max-width: 767.98px) {
  body.single-product .product.type-product {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: clamp(12px, 2vh, 20px);
    padding: clamp(16px, 3vw, 24px);
    /* Force fit to viewport between header and footer — no overflow. */
    height: calc(100dvh - var(--r-header-h, 0px) - var(--r-footer-h, 0px) - 48px);
    max-height: calc(100dvh - var(--r-header-h, 0px) - var(--r-footer-h, 0px) - 48px);
    min-height: 0;
    overflow: hidden;
  }
  body.single-product div.product div.summary {
    grid-column: 1;
    grid-row: 1;
    flex-shrink: 0;
    /* Push summary below the absolutely-positioned onsale badge. */
    padding-top: 40px;
  }
  body.single-product .product.type-product > .woocommerce-tabs {
    grid-column: 1;
    grid-row: 2;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
  }
  /* Tighter summary on mobile to save vertical space. */
  body.single-product .product_title {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    margin-bottom: 6px;
  }
  body.single-product .price {
    font-size: clamp(18px, 4.5vw, 22px) !important;
    margin-bottom: 10px;
  }
  html body.woocommerce span.onsale,
  html body.woocommerce-page span.onsale {
    font-size: 0 !important;
    top: 8px !important;
    left: 8px !important;
    padding: 4px 10px !important;
  }
  html body.woocommerce span.onsale::before {
    font-size: 11px;
  }
}

/* ─── #192 Eyebrow — padding-top 20px en responsive ─── */
@media (max-width: 1023.98px) {
  .r-eyebrow {
    padding-top: 20px;
  }
}

/* ─── #191 Footer links — pas de padding bas en responsive ─── */
@media (max-width: 1023.98px) {
  .r-footer__links {
    padding-bottom: 0;
  }
}

/* ─── #190 Pages légales (CGV, CGU, Données perso, Mentions) ─── */
/* Mobile : padding 10px gauche/droite, 0 haut/bas — y compris sur les
   wrappers Divi qui enveloppent le bloc .r-legal. */
@media (max-width: 1023.98px) {
  body .et_pb_section:has(.r-legal),
  body .et_pb_section:has(.r-legal) .et_pb_row,
  body .et_pb_section:has(.r-legal) .et_pb_column,
  .r-legal,
  .r-legal__inner {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ─── Podcast placeholder — sticky above footer on mobile ─── */
@media (max-width: 1023.98px) {
  .r-section-podcast .r-podcast__player-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--r-footer-h, 0px) + env(safe-area-inset-bottom));
    z-index: 5;
    padding: 0 var(--r-gutter-sm, 16px) 12px;
    background: linear-gradient(to bottom, transparent, var(--r-bg) 24%);
    pointer-events: none;
  }
  .r-section-podcast .r-podcast__player-section > * { pointer-events: auto; }
  /* Reserve room so content above does not hide behind the fixed block. */
  .r-section-podcast { padding-bottom: calc(var(--r-footer-h, 0px) + 260px); }
}