/**
 * Réalisons Component Styles — Neumorphic
 * Maps design tokens to reusable component classes
 */

/* ─── Reset & Base ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Apply the design system bg to the body universally. WordPress
   adds the `custom-background` body class on every front-end page
   and prints `body.custom-background { background: #fff }` inline
   in the head (specificity 0,1,1) AFTER our stylesheet link, so we
   need a STRICTLY HIGHER specificity to win regardless of source
   order. `html body.custom-background` is (0,1,2) which beats
   (0,1,1). No !important needed. */
html body.custom-background,
body {
  background-color: var(--r-bg);
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Skip Navigation ─── */
.r-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 99999;
  padding: 8px 16px;
  background: var(--r-teal);
  color: var(--r-white);
  font-family: var(--r-font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--r-radius-pill) 0;
  transition: top var(--r-transition);
}
.r-skip-link:focus {
  top: 0;
  outline: none;
}

/* ─── Focus Visible (global) ─── */
:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--r-teal-a20);
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Carousel/timeline buttons: remove ALL focus artifacts on click */
.r-chip:focus:not(:focus-visible),
.r-pill:focus:not(:focus-visible),
.r-btn:focus:not(:focus-visible),
.r-nav-btn:focus:not(:focus-visible),
.r-carousel__dot:focus:not(:focus-visible),
.r-carousel__nav:focus:not(:focus-visible),
.r-timeline__step:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

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

/* ─── Typography ─── */
.r-h1 {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 52px;
  line-height: 62px;
  color: var(--r-text-dark);
}
.r-h1--accent { color: var(--r-teal); }

.r-h2 {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
}

.r-h3 {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--r-text-dark);
}

.r-body { font-size: 15px; line-height: 24px; }
.r-body-sm { font-size: 13px; line-height: 20px; }
.r-caption { font-size: 12px; }

.r-eyebrow {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r-teal);
}

/* ─── Card ─── */
.r-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  transition: box-shadow var(--r-transition);
}
.r-card:hover {
  box-shadow: var(--r-neu-card-hover);
}

/* ─── Button ─── */
.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--r-bg);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  padding: var(--r-btn-padding-v) var(--r-btn-padding-h);
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow var(--r-transition), border-color var(--r-transition);
  text-decoration: none;
}
.r-btn:hover {
  box-shadow: var(--r-neu-btn-hover);
}
.r-btn:active {
  box-shadow: var(--r-neu-btn-active);
}

.r-btn--teal {
  color: var(--r-teal);
  border-color: var(--r-teal-a20);
}
.r-btn--teal:hover {
  color: var(--r-teal-dark);
  border-color: var(--r-teal-a40);
}

.r-btn--orange {
  color: var(--r-orange);
  border-color: var(--r-orange-a20);
}
.r-btn--orange:hover {
  color: var(--r-orange-dark);
  border-color: var(--r-orange-a40);
}

.r-btn--green {
  color: var(--r-green);
  border-color: var(--r-green-a20);
}

/* Ghost: no shadow, subtle border, muted text */
.r-btn--ghost {
  box-shadow: none;
  background: transparent;
  color: var(--r-text-muted);
  border-color: var(--r-separator);
  font-weight: 400;
}
.r-btn--ghost:hover {
  box-shadow: none;
  color: var(--r-text-body);
  border-color: var(--r-text-muted);
}
.r-btn--ghost:active {
  box-shadow: none;
}

/* ─── Nav Button (round) ─── */
.r-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r-teal);
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: box-shadow var(--r-transition);
  border: none;
}
.r-nav-btn:hover {
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal-dark);
}
.r-nav-btn:active {
  box-shadow: var(--r-neu-btn-active);
}
/* Active page state — nav button of the current page */
.r-nav-btn--active {
  box-shadow: var(--r-neu-btn-active);
  color: var(--r-teal-dark);
}
.r-nav-btn--active:hover {
  box-shadow: var(--r-neu-btn-active);
}
/* Home modifier — slight visual distinction (icon sizing) */
.r-nav-btn--home {
  font-size: 18px;
}

/* SVG icons inside nav buttons — Variant A outline. */
.r-nav-btn--svg svg {
  width: 18px;
  height: 18px;
  color: var(--r-teal);
  transition: color var(--r-transition);
}
.r-nav-btn--svg:hover svg { color: var(--r-teal-dark); }
.r-nav-btn--svg.r-nav-btn--active svg { color: var(--r-teal-dark); }

/* On hover, fill the hollow inside outline nav icons with Realisons doré.
   The outline shapes (rect/circle/path) stay stroked in teal; their
   interior fills with orange progressively. */
.r-nav-btn--svg svg path,
.r-nav-btn--svg svg rect,
.r-nav-btn--svg svg circle,
.r-nav-btn--svg svg ellipse {
  transition: fill 0.3s ease;
}
.r-nav-btn--svg:hover svg [fill="none"],
.r-nav-btn--svg:hover svg path,
.r-nav-btn--svg:hover svg rect,
.r-nav-btn--svg:hover svg circle,
.r-nav-btn--svg:hover svg ellipse {
  fill: rgba(238, 163, 42, 0.6);
}
.r-nav-btn--svg.r-nav-btn--active svg [fill="none"],
.r-nav-btn--svg.r-nav-btn--active svg path,
.r-nav-btn--svg.r-nav-btn--active svg rect,
.r-nav-btn--svg.r-nav-btn--active svg circle,
.r-nav-btn--svg.r-nav-btn--active svg ellipse {
  fill: rgba(238, 163, 42, 0.6);
}

/* ─── Input ─── */
.r-input {
  background: var(--r-bg);
  border-radius: var(--r-radius-input);
  box-shadow: var(--r-neu-inner);
  padding: 12px 16px;
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  border: none;
  outline: none;
  resize: none;
  width: 100%;
}
.r-input:focus {
  box-shadow:
    var(--r-neu-inner),
    0 0 0 2px var(--r-teal-a30);
}
.r-input::placeholder {
  color: var(--r-text-muted);
}

/* Cursor ellipse — animated dot from hero CTA to card CTA */
.r-cursor-ellipse {
  position: fixed;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--r-teal);
  box-shadow: 0 0 16px var(--r-teal-a40), 0 0 32px var(--r-teal-a20);
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
}

/* Inner white core */
.r-cursor-ellipse::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--r-white, #fff);
  opacity: 0.8;
}

/* Pulse animation when CTA focuses the textarea */
.r-input--pulse {
  animation: r-input-pulse 0.6s ease-out;
}

@keyframes r-input-pulse {
  0% { box-shadow: var(--r-neu-inner), 0 0 0 0 var(--r-teal-a40); }
  50% { box-shadow: var(--r-neu-inner), 0 0 0 6px var(--r-teal-a20); }
  100% { box-shadow: var(--r-neu-inner), 0 0 0 0 transparent; }
}

/* ─── Chip (profile selector) — aligned with .r-btn--teal standard ── */
.r-chip {
  background: var(--r-bg);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  padding: var(--r-btn-padding-v) var(--r-btn-padding-h);
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--r-teal);
  border: 1px solid var(--r-teal-a20);
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--r-transition), border-color var(--r-transition);
  outline: none;
}
.r-chip:hover {
  background: var(--r-teal-light);
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal-dark);
}
.r-chip:active {
  box-shadow: var(--r-neu-btn-active);
}

.r-chip.active {
  background: var(--r-teal-light);
  box-shadow: var(--r-neu-btn);
  color: var(--r-teal-dark);
  border-left: 3px solid var(--r-teal);
}

/* ─── Pill (result item) ─── */
.r-pill {
  background: var(--r-bg);
  border-radius: var(--r-radius-pill);
  box-shadow: var(--r-neu-btn);
  padding: 10px 18px;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--r-teal);
  border: 1px solid var(--r-teal-a20);
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--r-transition), border-color var(--r-transition);
  outline: none;
}
.r-pill:hover {
  background: var(--r-teal-light);
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal-dark);
}

.r-pill:active {
  box-shadow: var(--r-neu-btn-active);
}

.r-pill.active {
  background: var(--r-teal-light);
  box-shadow: var(--r-neu-btn);
  color: var(--r-teal-dark);
}

/* ─── Badge ─── */
.r-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-radius-dot);
  padding: 3px 10px;
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 9px;
  color: var(--r-white);
}
.r-badge--visibilite { background: var(--r-teal); }
.r-badge--gestion    { background: var(--r-orange); }
.r-badge--branding   { background: var(--r-purple); }

/* ─── Carousel ─── */
.r-carousel {
  background: var(--r-bg);
  border-radius: var(--r-radius-carousel);
  box-shadow: var(--r-neu-card);
  overflow: hidden;
  position: relative;
}

.r-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r-dot-inactive);
  transition: all var(--r-transition);
  border: none;
  padding: 0;
  cursor: pointer;
}
.r-carousel__dot.active {
  width: 10px;
  height: 10px;
  background: var(--r-orange);
}
.r-carousel__dot:hover,
.r-carousel__dot:focus-visible {
  width: 8px;
  height: 8px;
  background: var(--r-teal-a60, rgba(40, 168, 191, 0.6));
}

.r-carousel__nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 12px;
  transition: box-shadow var(--r-transition), color var(--r-transition);
}
.r-carousel__nav--prev { color: var(--r-text-body); }
.r-carousel__nav--next { color: var(--r-teal); }
.r-carousel__nav:hover,
.r-carousel__nav:focus-visible {
  box-shadow: var(--r-neu-btn);
  color: var(--r-teal-dark);
}

/* ─── Timeline ─── */
.r-timeline {
  position: relative;
}
.r-timeline__track {
  width: 3px;
  background: var(--r-separator);
  border-radius: 2px;
  position: absolute;
  left: 6px;
}
.r-timeline__fill {
  width: 3px;
  background: var(--r-teal);
  border-radius: 2px;
  position: absolute;
  left: 6px;
  top: 0;
  transition: height var(--r-transition-slow);
}
.r-timeline__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r-dot-inactive);
  transition: all var(--r-transition);
  flex-shrink: 0;
  /* Center small dot on the same axis as the active 14px dot */
  margin-left: 3px;
}
.r-timeline__dot.active {
  width: 14px;
  height: 14px;
  background: var(--r-orange);
  box-shadow: 0 0 12px rgba(238, 163, 42, 0.45);
  margin-left: 0;
}
.r-timeline__label {
  font-size: 13px;
  font-family: var(--r-font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--r-text-body);
  opacity: 0.6;
}
.r-timeline__label.active {
  color: var(--r-teal);
  opacity: 1;
}

/* ─── Overlay (base + panel + backdrop) ─── */

/* Outer wrapper — fixed backdrop covering the viewport */
.r-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--r-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Hidden by default — shown via aria-hidden + class */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--r-transition), visibility var(--r-transition);
  box-sizing: border-box;
}

.r-overlay--visible {
  visibility: visible;
  opacity: 1;
}

/* Semi-transparent backdrop */
.r-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45, 55, 72, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Neumorphic panel card */
.r-overlay__panel {
  position: relative;
  z-index: 1;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  transform: translateY(8px);
  transition: transform var(--r-transition);
}

.r-overlay--visible .r-overlay__panel {
  transform: translateY(0);
}

/* Topline accent bar */
.r-overlay__topline {
  height: 4px;
  width: 100%;
}
.r-overlay__topline--green  { background: var(--r-green); }
.r-overlay__topline--teal   { background: var(--r-teal); }
.r-overlay__topline--orange { background: var(--r-orange); }

/* Inner content padding */
.r-overlay__content {
  padding: 24px var(--r-card-padding) var(--r-card-padding);
}

/* Header row: label + close button */
.r-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* Close button */
.r-overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn-sm);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  color: var(--r-text-body);
  line-height: 1;
  flex-shrink: 0;
  transition: box-shadow var(--r-transition), color var(--r-transition);
}
.r-overlay__close:hover {
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-text-dark);
}
.r-overlay__close:active {
  box-shadow: var(--r-neu-btn-active);
}

/* ─── OverlayResultat ─── */
.r-overlay-resultat__profile-label {
  font-family: var(--r-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r-text-muted);
}

.r-overlay-resultat__profile-name {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--r-text-dark);
  margin: 0 0 12px;
}

.r-overlay-resultat__score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.r-overlay-resultat__score-label {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-muted);
}

.r-overlay-resultat__score-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-radius-badge);
  background: var(--r-teal-light);
  color: var(--r-teal-dark);
  font-family: var(--r-font-body);
  font-size: 12px;
  font-weight: 700;
}

.r-overlay-resultat__recommendation {
  margin: 16px 0 20px;
}

.r-overlay-resultat__rec-title {
  font-family: var(--r-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--r-text-muted);
  margin: 0 0 8px;
}

.r-overlay-resultat__rec-text {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--r-text-body);
}

.r-overlay-resultat__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* ─── OverlayEchange ─── */
.r-overlay-echange__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--r-text-dark);
  margin: 0 0 6px;
}

.r-overlay-echange__subtitle {
  font-family: var(--r-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--r-teal);
  margin: 0 0 14px;
}

.r-overlay-echange__body {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--r-text-body);
  margin: 0 0 20px;
}

.r-overlay-echange__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ─── Evaluation form (card 01) ─── */
.r-evaluation {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
}

.r-evaluation__input {
  width: 100%;
  padding: 10px 14px;
  background: var(--r-bg);
  border: 1px solid var(--r-teal-a20);
  border-radius: var(--r-radius-input);
  box-shadow: var(--r-neu-inner);
  font-family: var(--r-font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--r-text-dark);
  resize: none;
  min-height: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
  transition: border-color var(--r-transition), box-shadow var(--r-transition);
}

.r-evaluation__input::placeholder {
  color: var(--r-text-muted);
}

.r-evaluation__input:focus {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
  border-color: var(--r-teal-a40);
}

.r-evaluation__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.r-evaluation__submit {
  flex-shrink: 0;
  color: var(--r-teal);
  border-color: var(--r-teal-a20);
}

.r-evaluation__error {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-orange-dark);
  flex: 1;
  min-width: 0;
}

/* Disable state for submit button */
.r-evaluation__submit[disabled],
.r-evaluation__submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* ─── Print: hide overlays and evaluation form ─── */
/* Chained-class selector .r-overlay.r-overlay (0,2,0) beats any base
   declaration without needing !important. */
@media print {
  .r-overlay.r-overlay,
  .r-evaluation.r-evaluation {
    display: none;
  }
}

/* ─── Inline overlay cards (evaluation result in carousel) ─── */
.r-card--overlay {
  padding-top: 20px;
}

.r-card--overlay .r-overlay__topline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--r-radius-card) var(--r-radius-card) 0 0;
}

.r-card--overlay .r-eyebrow {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-muted);
  margin-bottom: 2px;
}

.r-card--overlay .r-overlay__title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.r-card--overlay .r-overlay__icon {
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.r-card--overlay .r-overlay__icon--green { color: var(--r-green); }
.r-card--overlay .r-overlay__icon--teal  { color: var(--r-teal); }

.r-card--overlay .r-overlay__desc {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
  line-height: 1.5;
  flex: 1;
}

.r-card--overlay .r-btn {
  margin-top: auto;
  width: 100%;
}

/* CTA outline variants — Figma border at 20% opacity */
.r-btn--green-outline {
  background: var(--r-bg);
  border: 1px solid rgba(72, 187, 120, 0.2);
  color: var(--r-green);
  box-shadow: var(--r-neu-btn);
  font-family: var(--r-font-heading);
  font-size: 14px;
  font-weight: 700;
}
.r-btn--green-outline:hover {
  box-shadow: var(--r-neu-btn-hover);
}

.r-btn--teal-outline {
  background: var(--r-bg);
  border: 1px solid rgba(40, 168, 191, 0.2);
  color: var(--r-teal);
  box-shadow: var(--r-neu-btn);
  font-family: var(--r-font-heading);
  font-size: 14px;
  font-weight: 700;
}
.r-btn--teal-outline:hover {
  box-shadow: var(--r-neu-btn-hover);
}

/* ─── Separator ─── */
.r-separator {
  height: 1px;
  background: var(--r-separator);
  width: 100%;
}

/* ─── Header ─── */

/* Divi section containing header: no padding, fixed height */
/* `body .et_pb_section:has(.r-header)` (0,2,1) beats any Divi chain
   like `.et_pb_section.et_pb_section_*` (0,2,0) without !important. */
body .et_pb_section:has(.r-header) {
  padding: 0;
  background: var(--r-bg);
  overflow-x: hidden;
}

.et_pb_section:has(.r-header) .et_pb_row {
  padding: 0;
  max-width: 100%;
  width: 100%;
}

.r-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 56px;
  background: var(--r-bg);
  border-bottom: 1px solid var(--r-separator);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.r-header__logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: var(--r-text-dark);
}

.r-header__logo svg {
  height: 28px;
  width: auto;
  display: block;
  transition: opacity var(--r-transition);
}

.r-header__logo:hover svg {
  opacity: 0.8;
}

.r-header__logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.r-header__nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Prevent duplicate headers — hide TB header when page has its own */
.et-l--header .r-header {
  display: none;
}

/* But show it if there's no page-level header */
body:not(:has(.et-l--post .r-header)) .et-l--header .r-header {
  display: flex;
}

/* TB footer: show by default, hide only if page body also has a footer */
body:has(.et-l--post .r-footer) .et-l--footer .r-footer {
  display: none;
}

@media (max-width: 767.98px) {
  .r-header__logo svg {
    height: 22px;
  }
}

/* ─── Footer ─── */
.r-footer {
  background: var(--r-bg);
  padding: 0;
  text-align: center;
  font-size: 11px;
  color: var(--r-text-body);
  width: 100%;
  /* height: auto intentionally — removing height: 100% from the legacy
     Divi TB footer wrapper. That rule caused the footer to fill the
     viewport on CPT pages (single-service, archive-poste, 404) whose
     template doesn't sit inside the TB wrapper. #349. */
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}

.r-footer__separator {
  height: 1px;
  background: var(--r-separator);
  width: 100%;
}

.r-footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Footer stays centered: two stacked lines (links + copyright),
     horizontally centered with symmetric left/right padding. */
  padding: 8px 48px;
  gap: 0;
  /* min-height: auto — removed calc(100% - 1px) which was paired with
     .r-footer { height: 100% } above and collapsed to 100vh inside the
     CPT flex-column body. #349. */
  box-sizing: border-box;
}

.r-footer a {
  color: var(--r-text-body);
  text-decoration: none;
  transition: color var(--r-transition);
}

.r-footer a:hover {
  color: var(--r-teal);
}

.r-footer__links {
  margin: 0;
  line-height: 1.4;
}

.r-footer__divider {
  color: var(--r-text-muted);
}

.r-footer__copyright {
  font-size: 10px;
  color: var(--r-text-muted);
  margin: 1px 0 0;
}

/* Hide TB footer wrapper only if the page body already has its own footer module */
body:has(.et-l--post .r-footer) .et-l--footer {
  display: none;
}

/* WPML auto-injects two widgets at the bottom of every page: a
   language switcher (.wpml-ls-statics-footer) and a dev-site banner
   (.otgs-development-site-front-end). They appear BELOW our .r-footer,
   making it look like the footer is duplicated/broken. The Realisons
   footer module already handles language switching internally; the
   dev-site banner is a WPML free-trial reminder we don't need on
   staging. Specificity (0,2,0) via chained-class beats any base
   display rule without !important. */
.wpml-ls-statics-footer.wpml-ls-statics-footer,
.otgs-development-site-front-end.otgs-development-site-front-end {
  display: none;
}

/* ─── Hero Immersif ─── */
.r-hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--r-bg);
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  /* Symmetric right padding — equal to the section padding-right
     clamp(80, 8vw, 160) so left and right margins match on every
     page. */
  padding-right: clamp(80px, 8vw, 160px);
}

/* Override Divi section/row padding when hero is inside */
/* `body .et_pb_section:has(.r-hero)` (0,2,1) wins natively. */
body .et_pb_section:has(.r-hero) {
  background: var(--r-bg);
  padding: 0;
  overflow-x: hidden;
}

.et_pb_section:has(.r-hero) .et_pb_row {
  padding: 0;
  max-width: 100%;
  width: 100%;
}

/* Divi section containing footer: no padding */
body .et_pb_section:has(.r-footer) {
  padding: 0;
  background: var(--r-bg);
  overflow-x: hidden;
}

.et_pb_section:has(.r-footer) .et_pb_row {
  padding: 0;
  max-width: 100%;
  width: 100%;
}

/* ─── Common page pattern — same typography/spacing as .r-hero__left ─── */
/* All pages: eyebrow = page name (no H1), fluid responsive text */
/* `.r-page .r-eyebrow` (0,2,0) already beats `.r-eyebrow` (0,1,0) base
   without needing !important. */
.r-page .r-eyebrow {
  margin: 0 0 0.5vh;
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
}

.r-page .r-step {
  color: var(--r-text-body);
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
  margin: 0.3vh 0;
}

.r-page .r-body {
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  line-height: 1.55;
}

.r-page .r-accent {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: clamp(24px, min(3vw, 4.5vh), 56px);
  line-height: 1.15;
  color: var(--r-teal);
  margin: 0.3vh 0 0;
}

/* Override Divi wrappers for ALL page modules (same pattern as hero) */
body .et_pb_section:has(.r-tarifs-hero),
body .et_pb_section:has(.r-section-podcast),
body .et_pb_section:has(.r-faq) {
  background: var(--r-bg);
  padding: 0;
  overflow-x: hidden;
}

/* Catalogue needs height:auto to prevent Divi flex collapse.
   The flex parent constrains children to 0px — override every level. */
body .et_pb_section:has(.r-section-catalogue),
body .et_pb_section:has(.r-section-catalogue) .et_pb_row,
body .et_pb_section:has(.r-section-catalogue) .et_pb_column {
  background: var(--r-bg);
  padding: 0;
  overflow: visible;
  height: auto;
  min-height: auto;
  flex-shrink: 0;
  flex-basis: auto;
}

.et_pb_section:has(.r-tarifs-hero) .et_pb_row,
.et_pb_section:has(.r-section-podcast) .et_pb_row,
.et_pb_section:has(.r-faq) .et_pb_row {
  padding: 0;
  max-width: 100%;
  width: 100%;
}

/* ─── Full-viewport page layout ───
 * When header + hero + footer are on the same page,
 * no scroll. Hero height = viewport minus header and footer.
 */

/* Hide empty Divi TB header/footer wrappers */
.et-l--header:has(.et_pb_section:empty),
.et-l--footer:has(.et_pb_section:empty) {
  display: none;
}

@media (min-width: 981px) {
  .r-hero {
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
  }

  /* When hero is between header + footer, fill remaining space.
   * Header section = 80px, footer section ≈ 100px.
   * Use 100dvh for dynamic viewport on mobile. */
  /* The hero fills the height of the scroll viewport — set by the
     fixed-shell flex cascade in the layout block (#173). No
     hardcoded chrome heights: min-height: 100% means "100% of the
     parent that has been sized by the flex cascade", which is the
     scroll viewport minus header + footer + admin bar. */
  .r-hero {
    min-height: 100%;
    height: auto;
  }
}

/* Timeline — vertical nav on left side (desktop only) */
.r-hero > .r-timeline {
  position: absolute;
  left: clamp(16px, 2vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(60px, 5.5vw, 90px);
  z-index: 3;
}

.r-hero > .r-timeline .r-timeline__step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(40px, 8vh, 140px);
}

.r-hero > .r-timeline .r-timeline__step:last-child {
  margin-bottom: 0;
}

.r-hero > .r-timeline .r-timeline__track {
  top: 0;
  bottom: 0;
  height: auto;
}

.r-hero > .r-timeline .r-timeline__fill {
  height: 0;
  top: 0;
}

.r-hero > .r-timeline .r-timeline__step {
  position: relative;
  z-index: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.r-hero > .r-timeline .r-timeline__step:hover .r-timeline__dot {
  background: var(--r-teal);
  box-shadow: var(--r-glow-teal);
  width: 11px;
  height: 11px;
  margin-left: 1.5px;
}

.r-hero > .r-timeline .r-timeline__step:hover .r-timeline__dot.active {
  width: 14px;
  height: 14px;
  margin-left: 0;
}

.r-hero > .r-timeline .r-timeline__step:hover .r-timeline__label {
  color: var(--r-teal);
  opacity: 1;
}

/* Left column — narrative text */
.r-hero__left {
  display: flex;
  flex-direction: column;
  padding-top: clamp(12px, 2vh, 24px);
  padding-right: clamp(20px, 3vw, 80px);
  padding-bottom: clamp(8px, 1.5vh, 16px);
  padding-left: var(--r-page-margin);
  flex: 0 0 45%;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

@media (min-width: 981px) {
  .r-hero__left {
    padding-left: clamp(110px, 10vw, 160px);
  }
}

/* Top section — eyebrow + step, pinned to top, never centered */
.r-hero__top {
  flex-shrink: 0;
  padding-bottom: clamp(4px, 0.5vh, 12px);
}

@media (min-width: 981px) {
  .r-hero__top {
    margin-left: clamp(30px, 4vw, 80px);
  }
}

/* Narrative text wrapper — flex:1, centered vertically, clips overflow.
   min-height prevents reflow jump when text content changes (#270). */
.r-hero__narrative {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: clamp(180px, 22vh, 320px);
}

@media (min-width: 981px) {
  .r-hero__narrative,
  .r-hero__bottom {
    margin-left: clamp(30px, 4vw, 80px);
  }
}

/* Bottom section — CTA + sublabel, pinned to bottom, never moves */
.r-hero__bottom {
  flex-shrink: 0;
  padding-top: clamp(6px, 1vh, 16px);
}

/* Subtle fade-in only — text is never blank. State swap happens
   instantly, then the new content briefly glides in at opacity 0.6
   → 1 for ~150 ms. No fade-out phase, no flashing empty state.
   Only the narrative and step transition (they change per state). */
.r-hero__left .r-hero__narrative,
.r-hero__left .r-hero__step {
  transition: opacity 0.15s linear;
}
.r-hero__left--transitioning .r-hero__narrative,
.r-hero__left--transitioning .r-hero__step {
  opacity: 0.6;
}
.r-hero__left .r-eyebrow,
.r-hero__left .r-hero__top,
.r-hero__left .r-hero__bottom,
.r-hero__left .r-hero__cta,
.r-hero__left .r-hero__sublabel {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Sublabel centered under the CTA button (desktop + mobile). */
.r-hero__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.r-hero__sublabel {
  text-align: center;
  margin: 0;
}

/* Spacer hidden — replaced by narrative/bottom flex split */
.r-hero__cta-spacer {
  display: none;
}

/* ─── Hero Typography — fluid responsive ───
 * Uses min(vw, vh) strategy so fonts scale with the SMALLER dimension,
 * ensuring text always fits both wide screens and short viewports.
 */
.r-hero__left .r-eyebrow {
  margin: 0 0 0.5vh;
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
}

.r-hero__step {
  color: var(--r-text-body);
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
  margin: 0.3vh 0;
}

.r-hero__left .r-h1 {
  margin: 0;
  font-size: clamp(24px, min(3vw, 4.5vh), 56px);
  line-height: 1.15;
}

.r-hero__left .r-h1--accent {
  margin: 0.3vh 0 0;
  font-size: clamp(24px, min(3vw, 4.5vh), 56px);
  line-height: 1.15;
}

.r-hero__left .r-body {
  margin-top: clamp(6px, 1.2vh, 20px);
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  line-height: 1.55;
}

/* CTA button — fixed bottom */
.r-hero__cta {
  display: inline-flex;
  width: fit-content;
  min-width: clamp(220px, 18vw, 340px);
  padding: clamp(8px, 1vh, 14px) clamp(20px, 2vw, 36px);
  font-size: clamp(15px, min(1.1vw, 1.8vh), 18px);
  flex-shrink: 0;
}

.r-hero__sublabel {
  color: var(--r-text-muted);
  font-size: clamp(11px, min(0.8vw, 1.4vh), 13px);
  margin: 0.3vh 0 0;
}

/* Right column — carousel */
.r-hero__right {
  flex: 1;
  display: flex;
  align-items: center;
  /* `flex-end` so the carousel right edge sits at the right edge of
     the column instead of being centered with empty space on the
     right. The right column's right edge already matches the section
     padding-right (.r-hero has padding-right: clamp(20, 3vw, 80))
     so the carousel right now aligns with the footer copyright edge
     across the whole site. */
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

/* Hero carousel — cards stacked via position absolute */
.r-hero__carousel {
  width: clamp(400px, 35vw, 640px);
  max-width: 100%;
  height: clamp(300px, 50vh, 480px);
  position: relative;
  overflow: hidden;
}

.r-hero__carousel > .r-card {
  position: absolute;
  left: 0;
  top: 4px;
  width: clamp(340px, 30vw, 560px);
  max-width: calc(100% - 16px);
  height: clamp(260px, 44vh, 420px);
  /* Hide cards by default — carousel.js positionCards() sets the
     correct opacity inline on init (currentCard=1, others 0/0.7).
     Without this default, all 4 cards stack visible at the carousel
     origin until JS runs, briefly overflowing the container. */
  opacity: 0;
}

/* No transition on transform/opacity — under prefers-reduced-motion
   the bridge from CSS default → inline JS value gets stuck at the
   start, making the inline style appear to be ignored. Width/height
   transitions on `.r-card--expanded` are still allowed below via the
   element-class selector which doesn't conflict with the inline
   transform updates that drive the carousel rotation. */
.r-hero__carousel > .r-card {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card expanded — fills entire carousel */
/* `.r-hero .r-hero__carousel > .r-card.r-card--expanded` (0,4,1)
   beats any base .r-card declaration without !important. */
.r-hero .r-hero__carousel > .r-card.r-card--expanded {
  width: 100%;
  height: 100%;
  max-width: 100%;
  top: 0;
  z-index: 5;
  animation: r-card-pulse-trace 1.8s ease-out 0.3s both;
  animation-duration: 1.8s;
}

/* Width/height transitions only — transform/opacity are now controlled
   exclusively by carousel.js via inline styles, no transition. */
/* (0,3,1) beats the prefers-reduced-motion universal rule (0,0,0). */
.r-hero .r-hero__carousel > .r-card {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Blue pulse — teal border that radiates outward */
@keyframes r-card-pulse-trace {
  0% {
    box-shadow: var(--r-neu-card), 0 0 0 0 rgba(40, 168, 191, 0.6);
  }
  40% {
    box-shadow: var(--r-neu-card), 0 0 0 12px rgba(40, 168, 191, 0.3);
  }
  70% {
    box-shadow: var(--r-neu-card), 0 0 0 20px rgba(40, 168, 191, 0.05);
  }
  100% {
    box-shadow: var(--r-neu-card), 0 0 0 24px rgba(40, 168, 191, 0);
  }
}

/* Card internal layout — title pinned top, rest centered */
.r-hero__carousel > .r-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.r-hero__carousel .r-card .r-h3 {
  margin: 0;
  flex-shrink: 0;
}

/* Everything after the title gets centered in remaining space */
.r-hero__carousel .r-card .r-body-sm,
.r-hero__carousel .r-card .r-input,
.r-hero__carousel .r-card .r-btn,
.r-hero__carousel .r-card .r-hero__chip-list,
.r-hero__carousel .r-card .r-hero__pill-list {
  /* Push first content item down to center the group */
}

.r-hero__carousel .r-card .r-body-sm {
  margin: auto 0 clamp(4px, 0.8vh, 8px);
  flex-shrink: 1;
}

.r-hero__carousel .r-card .r-input {
  height: clamp(40px, 8vh, 70px);
  flex-shrink: 1;
  min-height: 30px;
  overflow: hidden;
  resize: none;
}

.r-hero__carousel .r-card .r-btn {
  width: 100%;
  margin-top: clamp(4px, 0.8vh, 8px);
  margin-bottom: auto;
  flex-shrink: 0;
}

/* Cards without body-sm (card 2 chips, card 3 pills) */
.r-hero__carousel .r-card .r-hero__chip-list,
.r-hero__carousel .r-card .r-hero__pill-list {
  margin-top: auto;
  margin-bottom: auto;
}

/* Carousel bottom nav area */
.r-carousel__nav-area {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

.r-carousel__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Chip and pill lists inside cards */
.r-hero__chip-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(8px, 1.5vh, 16px);
  flex: 1;
  overflow: hidden;
}

.r-hero__chip-list .r-chip {
  width: 100%;
  box-sizing: border-box;
}

.r-hero__pill-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 8px;
  margin-top: clamp(8px, 1.5vh, 16px);
  flex: 1;
  overflow: hidden;
  align-content: center;
}

.r-hero__pill-list .r-pill {
  width: calc(50% - 8px);
  box-sizing: border-box;
}

/* ─── Chatbot ─── */
/* `body .r-chatbot` (0,1,1) beats `.et_pb_column > *` (0,1,1) on tied
   specificity via source order — no !important needed. */
body .r-chatbot {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  overflow: hidden;
  display: flex;
  height: 420px;
}

.r-chatbot__sidebar {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid var(--r-separator);
}

.r-chatbot__sidebar-title {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--r-teal);
  margin-bottom: 16px;
}

.r-chatbot__sidebar-cat {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--r-orange);
  margin: 12px 0 6px;
}

.r-chatbot__sidebar-q {
  font-size: 11px;
  color: var(--r-text-body);
  padding: 4px 0;
  cursor: pointer;
  transition: color var(--r-transition);
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  font-family: var(--r-font-body);
}

.r-chatbot__sidebar-q:hover,
.r-chatbot__sidebar-q:focus-visible {
  color: var(--r-teal);
}

.r-chatbot__main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.r-chatbot__header {
  background: var(--r-teal-dark);
  padding: 10px 20px;
  flex-shrink: 0;
}

.r-chatbot__header-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--r-white);
}

.r-chatbot__header-sub {
  font-size: 10px;
  color: var(--r-teal-light);
  margin-top: 2px;
}

.r-chatbot__messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-chatbot__msg {
  display: flex;
  gap: 8px;
}

.r-chatbot__msg--bot {
  align-items: flex-end;
}

.r-chatbot__msg--user {
  flex-direction: row-reverse;
}

.r-chatbot__bubble {
  max-width: 380px;
  padding: 10px 14px;
  border-radius: var(--r-radius-pill);
  font-size: 13px;
  line-height: 1.6;
  color: var(--r-text-dark);
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
}

.r-chatbot__msg--user .r-chatbot__bubble {
  background: var(--r-teal);
  color: var(--r-white);
  box-shadow: none;
}

.r-chatbot__footer {
  padding: 10px 20px;
  border-top: 1px solid var(--r-separator);
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.r-chatbot__dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.r-chatbot__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r-teal-light);
  animation: r-dot-bounce 1.2s infinite ease-in-out;
}

.r-chatbot__dots span:nth-child(2) { animation-delay: 0.2s; }
.r-chatbot__dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes r-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Card Tarif ─── */
.r-card-tarif {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--r-section-gap);
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r-card-tarif:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-2px);
}

.r-card-tarif--programme {
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--r-radius-card);
}

.r-card-tarif--extension {
  border-radius: 16px;
  padding: 16px;
}

.r-card-tarif__label {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

.r-card-tarif__label--programme { color: var(--r-orange); }
.r-card-tarif__label--extension { color: var(--r-text-body); }

.r-card-tarif__prix {
  font-family: var(--r-font-heading);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0;
}

.r-card-tarif__prix--lg {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--r-text-dark);
}

.r-card-tarif__prix--sm {
  font-size: clamp(1rem, 2.5vw, 18px);
  color: var(--r-teal);
}

.r-card-tarif--extension .r-card-tarif__label {
  font-size: 9px;
  letter-spacing: 1px;
}

.r-card-tarif__desc {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--r-text-body);
  margin: 0;
}

.r-card-tarif--extension .r-card-tarif__desc {
  font-size: 11px;
  line-height: 1.45;
}

.r-card-tarif__features {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.r-card-tarif__feature {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-dark);
  padding-left: 1.3em;
  position: relative;
  line-height: 1.4;
}

.r-card-tarif__feature::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--r-green);
  font-weight: 700;
}

.r-card-tarif__note {
  font-family: var(--r-font-body);
  font-size: 9px;
  font-style: normal;
  color: var(--r-orange);
  margin: 4px 0 0;
  padding-top: 0;
  border-top: none;
}

/* ─── Card Tarif — Buy Button ─── */
.r-card-tarif__buy {
  display: inline-block;
  margin-top: var(--r-spacing-md, 16px);
  padding: var(--r-spacing-sm, 12px) var(--r-spacing-lg, 32px);
  text-align: center;
  width: 100%;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.r-card-tarif__buy:hover {
  box-shadow: var(--r-neu-btn-hover);
  transform: translateY(-1px);
}

.r-card-tarif__buy:active {
  box-shadow: var(--r-neu-btn-active);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .r-card-tarif__buy {
    transition: none;
  }
}

/* ─── Tarifs Hero (carousel layout — same viewport pattern as .r-hero) ─── */
/* Specificity (0,2,0) beats Divi 5 .et_pb_column > * (0,1,1) without !important.
   Right padding symmetric with left margin for centered framing. */
/* ─── Tarifs Hero — simplified one-card carousel ─── */
.r-section-tarif .r-tarifs-hero,
section.r-tarifs-hero {
  background: var(--r-bg);
  padding: clamp(24px, 4vh, 48px) clamp(20px, 5vw, 80px);
}

/* (0,2,0) beats Divi 5 .et_pb_column > * (0,1,1) */
.r-tarifs-hero .r-tarifs-hero__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: clamp(24px, 4vh, 40px);
}

/* Left column — text */
.r-tarifs-hero .r-tarifs-hero__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r-tarifs-hero__left .r-eyebrow {
  margin: 0 0 4px;
  font-size: clamp(12px, 1vw, 14px);
}

.r-tarifs-hero__step {
  color: var(--r-text-body);
  font-size: clamp(12px, 1vw, 14px);
  margin: 0;
}

.r-tarifs-hero .r-tarifs-hero__titre {
  margin: 8px 0 0;
  font-size: clamp(24px, 4vw, 48px);
  line-height: 1.15;
}

.r-tarifs-hero__pitch {
  margin-top: 8px;
  max-width: 520px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
}

.r-tarifs-hero__spacer {
  /* Narrow gap between hero__top and narrative block (no flex-grow —
     matches accueil where narrative flows right after top). */
  min-height: clamp(12px, 2vh, 24px);
}

/* Right column — card + nav + CTA */
.r-tarifs-hero__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Carousel container — just holds the cards */
.r-tarifs-hero__carousel {
  width: 100%;
  max-width: 480px;
}

/* Product card — display toggled by JS, only active card visible */
.r-tarifs-hero__card {
  display: none;
  flex-direction: column;
  gap: 12px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding, 24px);
  width: 100%;
}

.r-tarifs-hero__card-label {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

.r-tarifs-hero__card--teal .r-tarifs-hero__card-label   { color: var(--r-teal); padding-bottom: 0; margin-bottom: 0; }
.r-tarifs-hero__card--orange .r-tarifs-hero__card-label  { color: var(--r-orange); }
.r-tarifs-hero__card--green .r-tarifs-hero__card-label   { color: var(--r-green, #48BB78); }
.r-tarifs-hero__card--purple .r-tarifs-hero__card-label  { color: var(--r-purple, #805AD5); }

.r-tarifs-hero__card-prix {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--r-text-dark);
  margin: 0;
  padding-bottom: 0;
  line-height: 1.1;
}

.r-tarifs-hero__card-desc {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  line-height: 1.5;
  margin: 0;
}

/* Specificity (0,2,0) via `.r-tarifs-hero .r-tarifs-hero__features`
   beats Divi's default `.et-db ul` (0,1,1 when scoped) and `.et_pb_section
   ul` style that reintroduces `list-style: disc`. Must also kill the
   pseudo ::marker on browsers that respect it even when list-style:none. */
.r-tarifs-hero .r-tarifs-hero__features {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Allow the features list to shrink so the CTA + note stay visible
     at the bottom of the card. */
  min-height: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

.r-tarifs-hero .r-tarifs-hero__feature {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  line-height: 1.4;
  list-style: none;
  list-style-type: none;
}

/* Some browsers (Chrome) still render ::marker even with list-style:none
   when inherited from Divi. Force-clear the marker content. */
.r-tarifs-hero .r-tarifs-hero__feature::marker {
  content: '';
}

/* Card spacer removed — CTA's margin-top:auto already pins it to the
   bottom of the flex column. */
.r-tarifs-hero__card-spacer { display: none; }

/* Card CTA button — pinned near the bottom of the card, centered.
   flex-shrink:0 so it never gets clipped. */
.r-tarifs-hero__card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  align-self: center;
  margin-top: auto;
  flex-shrink: 0;
  line-height: 1;
}

/* Note element removed from the visual design — hidden entirely. */
.r-tarifs-hero__card .r-tarifs-hero__card-note,
.r-tarifs-hero__card-note {
  display: none;
}

/* Nav area — below the card, not inside it */
.r-tarifs-hero__nav-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.r-tarifs-hero__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.r-tarifs-hero__dot {
  width: 8px;
  height: 8px;
  border: none;
  padding: 0;
  border-radius: 50%;
  background: var(--r-separator, #C8D0D8);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.r-tarifs-hero__dot--active {
  background: var(--r-orange);
  transform: scale(1.3);
}

.r-tarifs-hero__nav {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn-sm);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.r-tarifs-hero__nav--prev { color: var(--r-text-body); }
.r-tarifs-hero__nav--next { color: var(--r-teal); }

.r-tarifs-hero__nav:hover {
  box-shadow: var(--r-neu-btn);
}

/* CTA below nav */
.r-tarifs-hero__right .r-tarifs-hero__cta {
  display: inline-flex;
  width: fit-content;
}

.r-tarifs-hero__note {
  color: var(--r-text-muted, #A0AEC0);
  font-size: 11px;
  margin: 0;
  text-align: center;
}

/* Legacy tarifs mobile rules moved into realisons-responsive.css (#181).
   Kept here as no-op so historical diffs stay readable. */

/* ─── Section Tarif (legacy flat layout) ─── */
.r-section-tarif {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 80px);
  background: var(--r-bg);
}

.r-section-tarif__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}

/* Intro */
.r-section-tarif__intro {
  max-width: 640px;
}

.r-section-tarif__titre {
  margin: 8px 0 12px;
  color: var(--r-text-dark);
}

.r-section-tarif__sous-titre {
  color: var(--r-text-body);
  margin: 0;
}

/* Grille 2 programmes */
.r-section-tarif__programmes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
}

/* Extensions */
.r-section-tarif__ext-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-section-tarif__ext-titre {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r-text-body);
  margin: 0;
}

.r-section-tarif__ext-sous-titre {
  color: var(--r-text-body);
  margin: 0;
  max-width: 560px;
}

.r-section-tarif__extensions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 24px);
  margin-top: 8px;
}

/* CTA — Figma: left-aligned between programmes and extensions */
.r-section-tarif__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 0;
}

.r-section-tarif__cta {
  font-size: 14px;
  padding: 13px clamp(32px, 4vw, 48px);
  min-width: 300px;
}

.r-section-tarif__cta-note {
  color: var(--r-text-muted);
  margin: 0;
  text-align: center;
}

/* Divi section wrapper reset */
body .et_pb_section:has(.r-section-tarif) {
  background: var(--r-bg);
  padding: 0;
}

.et_pb_section:has(.r-section-tarif) .et_pb_row {
  padding: 0;
  max-width: 100%;
  width: 100%;
}

/* Responsive — tablet */
@media (max-width: 1023.98px) {
  .r-section-tarif__programmes {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }

  .r-section-tarif__extensions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive — mobile */
@media (max-width: 480px) {
  .r-section-tarif__extensions {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .r-section-tarif__cta {
    width: 100%;
    text-align: center;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .r-card-tarif {
    transition: none;
  }
}

/* Print */
@media print {
  .r-card-tarif {
    box-shadow: none;
    border: 1px solid var(--r-separator);
    break-inside: avoid;
  }

  .r-section-tarif__cta-wrap {
    display: none;
  }
}

/* ─── Card Service ─── */
.r-card-service {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  transition: box-shadow var(--r-transition);
}

.r-card-service:hover {
  box-shadow: var(--r-neu-card-hover);
}

.r-card-service__titre {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--r-text-dark);
  margin: 12px 0 8px;
}

.r-card-service__desc {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  margin: 0 0 12px;
}

.r-card-service__link {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--r-teal);
  text-decoration: underline;
  transition: color var(--r-transition);
}

.r-card-service__link:hover {
  color: var(--r-teal-dark);
}

.r-card-service__link:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* ─── Section Profils ─── */
.r-section-profils {
  padding: 64px var(--r-page-margin);
  background: var(--r-bg);
}

.r-section-profils__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.r-section-profils__titre {
  text-align: center;
  margin-bottom: 40px;
  color: var(--r-text-dark);
}

.r-section-profils__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.r-section-profils__card {
  display: flex;
  flex-direction: column;
  gap: var(--r-section-gap);
  padding: var(--r-card-padding);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r-section-profils__card:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-2px);
}

.r-section-profils__icone {
  font-size: 2rem;
  line-height: 1;
}

.r-section-profils__card-titre {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--r-text-dark);
  margin: 0;
  line-height: 1.3;
}

.r-section-profils__card-desc {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 1023.98px) {
  .r-section-profils {
    padding: 48px 32px;
  }

  .r-section-profils__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-section-profils__card {
    transition: none;
  }
}

/* ─── Section Chiffres ─── */
.r-section-chiffres {
  padding: 64px var(--r-page-margin);
  background: var(--r-bg);
}

.r-section-chiffres__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.r-section-chiffres__titre {
  text-align: center;
  margin-bottom: 40px;
  color: var(--r-text-dark);
}

.r-section-chiffres__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.r-section-chiffres__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: var(--r-card-padding);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  transition: box-shadow var(--r-transition);
}

.r-section-chiffres__item:hover {
  box-shadow: var(--r-neu-card-hover);
}

.r-section-chiffres__valeur {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--r-teal);
  margin: 0;
  line-height: 1;
}

.r-section-chiffres__nombre {
  display: inline;
}

.r-section-chiffres__unite {
  font-family: var(--r-font-heading);
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: var(--r-text-body);
  font-weight: 500;
}

.r-section-chiffres__label {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  margin: 0;
  line-height: 1.4;
}

@keyframes r-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.r-section-chiffres__item.r-is-visible {
  animation: r-count-up 0.5s ease-out both;
}

.r-section-chiffres__item.r-is-visible:nth-child(2) { animation-delay: 0.1s; }
.r-section-chiffres__item.r-is-visible:nth-child(3) { animation-delay: 0.2s; }

@media (max-width: 1023.98px) {
  .r-section-chiffres {
    padding: 48px 32px;
  }

  .r-section-chiffres__grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* `.r-section-chiffres .r-section-chiffres__item` (0,2,0) beats the
     base `.r-section-chiffres__item` (0,1,0) animation declaration. */
  .r-section-chiffres .r-section-chiffres__item {
    animation: none;
    transition: none;
  }
}

/* ─── Card Episode ─── */
/* ─── Card Episode — Figma colored cards (528:156) ─── */
.r-card-episode {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  overflow: hidden;
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r-card-episode:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-3px);
}

/* Color variants — accent color on left border only, neu bg stays */
.r-card-episode--teal   { border-left: 4px solid var(--r-teal); }
.r-card-episode--orange { border-left: 4px solid var(--r-orange); }
.r-card-episode--purple { border-left: 4px solid var(--r-purple); }

/* Image slot */
.r_card_episode__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.r_card_episode__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body wrapper */
.r_card_episode__body {
  display: flex;
  flex-direction: column;
  gap: var(--r-spacing-sm, 8px);
  padding: var(--r-card-padding, 20px);
}

/* Titles use dark text (auto-adapts in dark mode via --r-text-dark) */
.r-card-episode--teal .r_card_episode__titre   { color: var(--r-teal); }
.r-card-episode--orange .r_card_episode__titre { color: var(--r-orange); }
.r-card-episode--purple .r_card_episode__titre { color: var(--r-purple); }

/* CTA link — play icon */
.r_card_episode__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-family: var(--r-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--r-teal);
  background: var(--r-bg);
  border: 1px solid var(--r-teal-a20);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r_card_episode__cta:hover {
  box-shadow: var(--r-neu-btn-hover);
  transform: translateY(-1px);
}

.r_card_episode__cta:active {
  box-shadow: var(--r-neu-btn-active);
  transform: translateY(0);
}

.r_card_episode__cta:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* Colored variant CTAs inherit accent color */
.r-card-episode--orange .r_card_episode__cta { color: var(--r-orange); border-color: var(--r-orange-a20); }
.r-card-episode--purple .r_card_episode__cta { color: var(--r-purple); border-color: var(--r-teal-a20); }

/* ─── Responsive: Tablet (768px–980px) ─── */
@media (max-width: 1023.98px) {
  /* Hero — tablet: stack vertically, narrative scrolls */
  .r-hero__left {
    flex: 1;
    padding: 24px 40px 16px;
  }

  .r-hero__narrative {
    justify-content: flex-start;
    overflow-y: auto;
  }

  .r-hero__right {
    padding: 0 40px 16px;
  }

  .r-hero__carousel {
    width: 100%;
    height: auto;
    min-height: 280px;
  }

  .r-hero__carousel > .r-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .r-hero__carousel > .r-card:not(:first-of-type) {
    left: auto;
    display: none;
  }

  .r-carousel__nav-area {
    position: relative;
    bottom: auto;
    padding: 12px 10px;
  }

  /* Typography */
  .r-h1,
  .r-h1--accent {
    font-size: 36px;
    line-height: 44px;
  }

  .r-h2 {
    font-size: 28px;
    line-height: 36px;
  }

  .r-h3 {
    font-size: 18px;
  }

  .r-eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  /* Carousel — wider on tablet */
  .r-carousel {
    width: 100%;
  }

  /* Chatbot — stack vertically */
  .r-chatbot {
    flex-direction: column;
    height: auto;
  }

  .r-chatbot__sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--r-separator);
    max-height: 200px;
  }

  .r-chatbot__bubble {
    max-width: 320px;
  }

  /* Timeline — hidden on tablet */
  .r-timeline {
    display: none;
  }

  /* Cards — full width in grid contexts */
  .r-card-tarif {
    width: 100%;
  }

  .r-card-tarif__prix--lg {
    font-size: 30px;
  }

  .r-card-service {
    width: 100%;
  }

  .r_section_podcast__intro-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--r-spacing-md, 16px);
  }
}

/* ─── Responsive: Mobile (<767px) ─── */
@media (max-width: 767.98px) {
  /* Hero — single column, tight padding */
  .r-hero {
    min-height: auto;
  }

  .r-hero__left {
    flex: 1;
    padding: 24px 20px 16px;
  }

  .r-hero__right {
    padding: 0 16px 24px;
  }

  .r-hero__carousel {
    width: 100%;
    height: auto;
    min-height: 260px;
  }

  .r-hero__carousel > .r-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .r-hero__carousel > .r-card:not(:first-of-type) {
    left: auto;
    display: none;
  }

  .r-carousel__nav-area {
    position: relative;
    bottom: auto;
    padding: 12px 10px;
  }

  /* Typography — reduced sizes */
  .r-h1,
  .r-h1--accent {
    font-size: 28px;
    line-height: 36px;
  }

  .r-h2 {
    font-size: 24px;
    line-height: 32px;
  }

  .r-h3 {
    font-size: 16px;
  }

  .r-body {
    font-size: 14px;
    line-height: 22px;
  }

  .r-body-sm {
    font-size: 12px;
    line-height: 18px;
  }

  .r-eyebrow {
    font-size: 9px;
    letter-spacing: 1px;
  }

  /* Cards — full width, reduced padding */
  .r-card {
    padding: 20px;
  }

  .r-card-tarif {
    width: 100%;
    padding: 20px;
  }

  .r-card-tarif__prix--lg {
    font-size: 28px;
  }

  .r-card-tarif__prix--sm {
    font-size: 16px;
  }

  .r-card-tarif__desc,
  .r-card-tarif__feature {
    font-size: 13px;
  }

  .r-card-service {
    width: 100%;
    padding: 20px;
  }

  .r-card-service__titre {
    font-size: 16px;
    margin: 8px 0 6px;
  }

  .r-card-service__desc,
  .r-card-service__link {
    font-size: 13px;
  }

  .r-card-episode {
    padding: 14px;
  }

  .r-card-episode__title {
    font-size: 12px;
  }

  /* Carousel — full width, no outer radius */
  .r-carousel {
    width: 100%;
    border-radius: var(--r-radius-card);
  }

  /* Chatbot — sidebar hidden, compact */
  .r-chatbot {
    height: 360px;
  }

  .r-chatbot__sidebar {
    display: none;
  }

  .r-chatbot__bubble {
    max-width: 260px;
    font-size: 12px;
  }

  .r-chatbot__messages {
    padding: 16px;
    gap: 8px;
  }

  /* Nav buttons — slightly smaller, still ≥24px touch target */
  .r-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  /* Buttons — ensure touch target */
  .r-btn {
    min-height: 44px;
    font-size: 13px;
  }

  /* Timeline — hidden */
  .r-timeline {
    display: none;
  }
}

/* ─── Responsive: Large screens (>1600px) ─── */
@media (min-width: 1600px) {
  /* Carousel — larger on big screens */
  .r-hero__carousel {
    width: 640px;
    height: 370px;
  }

  .r-hero__carousel > .r-card {
    width: 560px;
    height: 320px;
  }

  /* No padding-right on .r-hero__right at large screens — the
     .r-hero section already provides padding-right that aligns the
     right column with the footer right edge. Adding more here
     creates an 80px gap and breaks the alignment. */
}

/* ─── Reduced Motion ─── */
/* `*:not(.x):not(.y):not(.z)` has specificity (0,3,0) (universal +
   3 negation pseudo-classes); this beats any single-class animation
   rule (0,1,0) and most descendant rules without needing !important. */
@media (prefers-reduced-motion: reduce) {
  *:not(.r-card):not(.r-card--expanded):not(.r-cursor-ellipse),
  *:not(.r-card):not(.r-card--expanded):not(.r-cursor-ellipse)::before,
  *:not(.r-card):not(.r-card--expanded):not(.r-cursor-ellipse)::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  .r-hero__left--transitioning {
    opacity: 1;
    transform: none;
  }

  .r-card-episode:hover {
    transform: none;
  }
}

/* ─── High Contrast Mode ─── */
@media (forced-colors: active) {
  .r-btn,
  .r-chip,
  .r-pill,
  .r-nav-btn,
  .r-card {
    border: 1px solid ButtonText;
  }

  .r-input {
    border: 1px solid ButtonText;
  }

  .r-overlay__topline {
    background: Highlight;
  }
}

/* ─── Print ─── */
/* Chained-class selectors (0,2,0) beat any base display declaration. */
@media print {
  .r-hero__right.r-hero__right,
  .r-carousel.r-carousel,
  .r-nav-btn.r-nav-btn,
  .r-carousel__nav.r-carousel__nav,
  .r-timeline.r-timeline,
  .r-chatbot__footer.r-chatbot__footer,
  .r-skip-link.r-skip-link {
    display: none;
  }

  .r-hero__left {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

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

  body.realisons-site {
    color: #000;
    background: #fff;
  }

  .r-card,
  .r-btn,
  .r-chip,
  .r-pill {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .r-h1,
  .r-h1--accent,
  .r-h2,
  .r-h3 {
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #666;
  }
}


/* ─────────────────────────────────────────────────────────────────
   Page Fonctionnement — modules (issue #82)
   SectionFAQ · ParcoursFonctionnement · DifferencesSection
   ──────────────────────────────────────────────────────────────── */

/* ─── SectionFAQ / Le Compas — Figma 527:103 split widget ─── */
/* `.r-section-faq .r-faq` (0,2,0) beats `.et_pb_column > *` (0,1,1)
   without !important. The outer Divi wrapper has class .r-section-faq.
   Left padding sums the .r-hero__left padding (clamp(110, 10vw, 160))
   and the .r-hero__top margin (clamp(30, 4vw, 80)) so section content
   aligns vertically with the accueil hero content across all pages. */
.r-section-faq .r-faq,
section.r-faq {
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
  background: var(--r-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Page header — eyebrow = page name, same sizing as hero */
.r-faq__page-header {
  flex-shrink: 0;
  margin-bottom: clamp(8px, 1.5vh, 16px);
}

/* (0,2,0) beats `.r-eyebrow` / `.r-body` (0,1,0) base. */
.r-faq__page-header .r-eyebrow {
  margin: 0 0 0.5vh;
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
}

.r-faq__page-header .r-body {
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  line-height: 1.55;
  margin: 0.3vh 0 0;
}

/* Split widget: sidebar | main */
/* Specificity (0,2,0) beats Divi 5 .et_pb_column > * (0,1,1) without !important. */
.r-faq .r-faq__widget {
  flex: 1;
  display: flex;
  border-radius: 20px;
  box-shadow: var(--r-neu-card);
  overflow: hidden;
  min-height: 0;
}

/* Sidebar — 50% left panel (issue #136 — redistribute from 280px fixed to 50/50) */
.r-faq__sidebar {
  flex: 1 1 50%;
  min-width: 0;
  overflow-y: auto;
  padding: 24px 28px;
  border-right: 1px solid #C8D2DC;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.r-faq__sidebar::-webkit-scrollbar {
  display: none;
}

.r-faq__sidebar-title {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--r-teal);
  margin: 0 0 16px;
}

/* Search input (#279) */
.r-faq__search {
  display: block;
  width: 100%;
  padding: 8px 12px;
  margin: 0 0 12px;
  border: none;
  border-radius: var(--r-radius-input, 8px);
  box-shadow: var(--r-neu-inner);
  background: var(--r-bg);
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
}

.r-faq__search::placeholder {
  color: var(--r-text-muted);
}

/* Collapsible category groups (#279) */
.r-faq__sidebar-group {
  margin: 0 0 4px;
}

.r-faq__sidebar-cat {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--r-orange);
  margin: 0;
  padding: 8px 0 4px;
  cursor: pointer;
  list-style: none;
}

.r-faq__sidebar-cat::-webkit-details-marker {
  display: none;
}

.r-faq__sidebar-cat::before {
  content: '▸ ';
  font-size: 10px;
}

.r-faq__sidebar-group[open] > .r-faq__sidebar-cat::before {
  content: '▾ ';
}

.r-faq__sidebar-q {
  display: block;
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.2s;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  line-height: 1.6;
}

.r-faq__sidebar-q:hover,
.r-faq__sidebar-q:focus-visible {
  color: var(--r-teal);
}

.r-faq__sidebar-q--active {
  color: var(--r-teal);
  font-weight: 700;
}

/* Main area — 50% right panel (issue #136) */
.r-faq__main {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.r-faq__main-header {
  background: var(--r-teal-dark, #1E7F8E);
  padding: 10px 20px;
  flex-shrink: 0;
}

.r-faq__main-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  margin: 0 0 2px;
}

.r-faq__main-sub {
  font-family: var(--r-font-body);
  font-size: 10px;
  color: #CAEEF4;
  margin: 0;
}

.r-faq__answer-zone {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
}

.r-faq__welcome {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  line-height: 1.65;
  margin: 0;
}

/* Answer display (replaces welcome when question clicked) */
.r-faq__answer-display {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-dark);
  line-height: 1.7;
}

.r-faq__answer-display p {
  margin: 0 0 12px;
}

.r-faq__input-wrap {
  padding: 12px 20px;
  flex-shrink: 0;
}

.r-faq__input {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  padding: 0 14px;
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-dark);
  box-sizing: border-box;
}

.r-faq__input::placeholder { color: #B0BEC5; }
.r-faq__input:focus { outline: 2px solid var(--r-teal); outline-offset: -2px; }

@media (min-width: 981px) {
  .r-faq {
    min-height: 100%;
    height: auto;
  }
}

/* Legacy FAQ mobile rule moved into realisons-responsive.css (#184). Kept
   here as no-op so historical diffs stay readable. */

/* Old accordion CSS kept for backward compat (unused in new layout) */
.r-faq__inner {
  max-width: 820px;
  margin: 0 auto;
}

.r-faq__header {
  margin-bottom: calc(var(--r-card-padding) * 2);
  text-align: center;
}

.r-faq__eyebrow {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--r-teal);
  margin: 0 0 8px;
  text-transform: uppercase;
}

.r-faq__titre,
.r-faq__header h1,
.r-faq__header h2 {
  font-family: var(--r-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: var(--r-text-dark);
  margin: 0 0 var(--r-section-gap);
}

.r-faq__header p {
  color: var(--r-text-body);
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── FAQ Category Tabs ─── */
.r-faq__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-faq__tab {
  all: unset;
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  font-family: var(--r-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--r-text-body);
  background: var(--r-bg);
  border-radius: var(--r-radius-pill);
  box-shadow: var(--r-neu-btn);
  cursor: pointer;
  transition: box-shadow var(--r-transition), color var(--r-transition);
  box-sizing: border-box;
}

.r-faq__tab:hover {
  box-shadow: var(--r-neu-btn-hover, var(--r-neu-card-hover));
  color: var(--r-teal-dark);
}

.r-faq__tab:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-faq__tab--active {
  color: var(--r-teal-dark);
  box-shadow: var(--r-neu-inner);
}

/* ─── FAQ Search bar ─── */
.r-faq__search-wrap {
  margin-bottom: calc(var(--r-card-padding) * 1.5);
}

.r-faq__search {
  width: 100%;
  padding: 12px 16px 12px 40px;
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-dark);
  background: var(--r-bg);
  border: none;
  border-radius: var(--r-radius-input, 8px);
  box-shadow: var(--r-neu-inner);
  box-sizing: border-box;
  transition: box-shadow var(--r-transition);
  appearance: none;
}

.r-faq__search::placeholder {
  color: var(--r-text-body);
  opacity: 0.6;
}

.r-faq__search:focus {
  outline: 2px solid var(--r-teal);
  outline-offset: -2px;
  box-shadow: var(--r-neu-inner), 0 0 0 3px var(--r-teal-a20, rgba(49,151,149,0.2));
}

.r-faq__search-wrap {
  position: relative;
}

.r-faq__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--r-text-body);
  opacity: 0.5;
  pointer-events: none;
  font-size: 0.9rem;
}

.r-faq__no-results {
  text-align: center;
  padding: var(--r-card-padding);
  color: var(--r-text-body);
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  display: none;
}

/* ─── FAQ Categories ─── */
.r-faq__category {
  margin-bottom: calc(var(--r-card-padding) * 1.5);
}

.r-faq__cat-label {
  font-family: var(--r-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--r-teal-dark);
  margin-bottom: var(--r-section-gap);
  padding-left: 4px;
}

/* ─── FAQ Items ─── */
.r-faq__item {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  margin-bottom: var(--r-section-gap);
  overflow: hidden;
  transition: box-shadow var(--r-transition);
}

.r-faq__item:hover {
  box-shadow: var(--r-neu-card-hover);
}

.r-faq__item[data-open="true"] {
  box-shadow: var(--r-neu-card-hover);
}

.r-faq__question {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--r-card-padding);
  font-family: var(--r-font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--r-text-dark);
  cursor: pointer;
  gap: var(--r-section-gap);
  box-sizing: border-box;
  min-height: 48px;
}

.r-faq__question:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: -2px;
}

.r-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--r-teal-dark);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-style: normal;
  line-height: 1;
}

.r-faq__item[data-open="true"] .r-faq__icon {
  transform: rotate(45deg);
}

/* ─── FAQ Answer (animated) ─── */
.r-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 var(--r-card-padding);
}

.r-faq__item[data-open="true"] .r-faq__answer {
  padding-bottom: var(--r-card-padding);
}

.r-faq__answer-inner {
  background: var(--r-bg);
  border-radius: var(--r-radius-input);
  box-shadow: var(--r-neu-inner);
  padding: var(--r-section-gap) var(--r-card-padding);
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-body);
  line-height: 1.7;
}

.r-faq__answer-inner p {
  margin: 0 0 0.6em;
}

.r-faq__answer-inner p:last-child {
  margin-bottom: 0;
}

/* ─── FAQ Footer CTA ─── */
.r-faq__footer {
  text-align: center;
  margin-top: calc(var(--r-card-padding) * 2);
  padding-top: var(--r-card-padding);
}

.r-faq__footer-text {
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-body);
  margin: 0 0 var(--r-section-gap);
}

.r-faq__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--r-font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--r-teal-dark);
  background: var(--r-bg);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  text-decoration: none;
  transition: box-shadow var(--r-transition), transform 0.15s ease;
}

.r-faq__cta:hover {
  box-shadow: var(--r-neu-btn-hover, var(--r-neu-card-hover));
  transform: translateY(-1px);
}

.r-faq__cta:active {
  box-shadow: var(--r-neu-inner);
  transform: translateY(0);
}

/* ─── ParcoursFonctionnement ─── */
.r-parcours {
  padding: var(--r-page-margin);
  background: var(--r-bg);
}

.r-parcours__header {
  text-align: center;
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-parcours__header h2 {
  font-family: var(--r-font-heading);
  color: var(--r-text-dark);
  margin: 0 0 var(--r-section-gap);
}

.r-parcours__header p {
  color: var(--r-text-body);
  margin: 0 auto;
  max-width: 560px;
}

.r-parcours__track {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--r-section-gap);
  overflow-x: auto;
  scrollbar-width: none;
}

.r-parcours__track::-webkit-scrollbar {
  display: none;
}

.r-parcours__card {
  flex: 1 1 0;
  min-width: 180px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  text-align: center;
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r-parcours__card:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-2px);
}

.r-parcours__connector {
  flex: 0 0 32px;
  height: 2px;
  background: linear-gradient(to right, var(--r-teal-dark), var(--r-separator));
  align-self: center;
  margin-top: calc(var(--r-card-padding) * -1.5);
}

.r-parcours__icon {
  display: block;
  font-size: 2rem;
  color: var(--r-teal-dark);
  margin-bottom: var(--r-section-gap);
}

.r-parcours__num {
  display: block;
  font-family: var(--r-font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--r-text-body);
  margin-bottom: 4px;
}

.r-parcours__card h3 {
  font-family: var(--r-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 var(--r-section-gap);
}

.r-parcours__card p {
  font-family: var(--r-font-body);
  font-size: 0.85rem;
  color: var(--r-text-body);
  line-height: 1.55;
  margin: 0;
}

/* ─── DifferencesSection ─── */
.r-differences {
  padding: var(--r-page-margin);
  background: var(--r-bg);
}

.r-differences__header {
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-differences__header h2 {
  font-family: var(--r-font-heading);
  color: var(--r-text-dark);
  margin: 0 0 var(--r-section-gap);
}

.r-differences__header p {
  color: var(--r-text-body);
  margin: 0;
}

.r-differences__card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  overflow: hidden;
}

.r-differences__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.r-differences__scroll:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: -2px;
}

.r-differences__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.r-differences__table th,
.r-differences__table td {
  padding: var(--r-section-gap) var(--r-card-padding);
  font-family: var(--r-font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  vertical-align: middle;
}

.r-differences__th-crit,
.r-differences__th {
  font-family: var(--r-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--r-bg);
  text-align: center;
  vertical-align: bottom;
}

.r-differences__th-crit {
  text-align: left;
  color: var(--r-text-body);
  width: 28%;
}

.r-differences__th--realisons {
  background: var(--r-teal-dark);
  color: var(--r-white);
  border-radius: var(--r-radius-card) var(--r-radius-card) 0 0;
  box-shadow: var(--r-neu-btn);
  width: 24%;
}

.r-differences__crit {
  font-family: var(--r-font-heading);
  font-weight: 600;
  color: var(--r-text-dark);
  text-align: left;
  background: var(--r-bg);
  border-bottom: 1px solid var(--r-separator);
}

.r-differences__val {
  text-align: center;
  background: var(--r-bg);
  color: var(--r-text-body);
  border-bottom: 1px solid var(--r-separator);
}

.r-differences__val--realisons {
  background: rgba(49, 151, 149, 0.08);
  color: var(--r-teal-dark);
  font-weight: 600;
  box-shadow: var(--r-neu-btn-sm);
}

.r-differences__row:last-child .r-differences__crit,
.r-differences__row:last-child .r-differences__val {
  border-bottom: none;
}

/* ─── Responsive: Fonctionnement modules ─── */
@media (max-width: 1023.98px) {
  .r-parcours__track {
    flex-direction: column;
    gap: var(--r-section-gap);
  }

  .r-parcours__card {
    min-width: 0;
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--r-section-gap);
    padding: var(--r-section-gap) var(--r-card-padding);
  }

  .r-parcours__connector {
    display: none;
  }

  .r-parcours__icon {
    margin-bottom: 0;
    grid-row: span 2;
    font-size: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .r-faq {
    padding: var(--r-card-padding);
  }

  .r-faq__tabs {
    gap: 6px;
  }

  .r-faq__tab {
    padding: 6px 14px;
    font-size: 0.75rem;
  }

  .r-faq__question {
    font-size: 0.9rem;
    padding: 14px 16px;
  }

  .r-faq__answer {
    padding: 0 16px;
  }

  .r-faq__cta {
    width: 100%;
    justify-content: center;
  }

  .r-parcours {
    padding: var(--r-card-padding);
  }

  .r-differences {
    padding: var(--r-card-padding);
  }

  .r-differences__table {
    min-width: 520px;
  }

  .r-differences__table th,
  .r-differences__table td {
    padding: var(--r-section-gap) 12px;
    font-size: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-faq__icon,
  .r-faq__answer,
  .r-faq__tab,
  .r-faq__item,
  .r-faq__cta,
  .r-parcours__card {
    transition: none;
    animation: none;
  }
}

@media print {
  .r-faq__item {
    box-shadow: none;
    border: 1px solid var(--r-separator);
    break-inside: avoid;
  }

  /* Chained-class (0,2,0) beats `.r-faq__answer` (0,1,0) base. */
  .r-faq__answer.r-faq__answer {
    max-height: none;
    padding-bottom: var(--r-card-padding);
  }

  .r-faq__icon { display: none; }

  .r-parcours__track {
    flex-direction: column;
    gap: 12px;
  }

  .r-parcours__card {
    box-shadow: none;
    border: 1px solid var(--r-separator);
    break-inside: avoid;
  }

  .r-parcours__connector { display: none; }

  .r-differences__card {
    box-shadow: none;
    border: 1px solid var(--r-separator);
  }

  .r-differences__val--realisons {
    background: transparent;
    color: var(--r-teal-dark);
    border-left: 3px solid var(--r-teal-dark);
    box-shadow: none;
  }
}

/* ─── CardEpisode ─── */
.r-card-episode {
  display: flex;
  flex-direction: column;
  gap: var(--r-section-gap);
  padding: var(--r-card-padding);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r-card-episode:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-2px);
}

.r_card_episode__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.r_card_episode__numero {
  font-family: var(--r-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--r-teal);
}

.r_card_episode__categorie {
  display: inline-flex;
  padding: 4px 14px;
  font-family: var(--r-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--r-radius-badge);
  box-shadow: var(--r-neu-btn-sm);
  color: var(--r-teal-dark);
  border: 1px solid var(--r-teal-a20);
  background: var(--r-bg);
}

.r_card_episode__titre {
  font-family: var(--r-font-heading);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--r-text-dark);
  line-height: 1.3;
  margin: 0;
}

.r_card_episode__desc {
  font-family: var(--r-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--r-text-body);
  margin: 0;
}

.r_card_episode__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: auto;
}

.r_card_episode__duree {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--r-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--r-text-muted);
}

.r_card_episode__player {
  flex: 1;
  min-width: 180px;
  height: 36px;
  border-radius: var(--r-radius-btn);
}

.r_card_episode__play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-family: var(--r-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--r-teal);
  background: var(--r-bg);
  border: 1px solid var(--r-teal-a20);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  cursor: pointer;
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r_card_episode__play-btn:hover:not(:disabled) {
  box-shadow: var(--r-neu-btn-hover);
  transform: translateY(-1px);
}

.r_card_episode__play-btn:active:not(:disabled) {
  box-shadow: var(--r-neu-btn-active);
  transform: translateY(0);
}

.r_card_episode__play-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.r_card_episode__play-btn:focus-visible,
.r-card-episode:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE AMBASSADEUR — issue #92
   ═══════════════════════════════════════════════════════════════════════════ */

.r-ambassadeur {
  position: relative;
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
  background: var(--r-bg);
}

.r-ambassadeur__inner {
  margin: 0 auto;
}

.r-ambassadeur__header {
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-ambassadeur__header .r-h1 {
  margin: 0 0 var(--r-section-gap);
}

.r-ambassadeur__header .r-body {
  color: var(--r-text-body);
  margin: 0;
}

.r-ambassadeur__intro {
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-ambassadeur__intro p {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
}

.r-ambassadeur__benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--r-card-padding);
  margin-bottom: calc(var(--r-card-padding) * 2.5);
}

.r-ambassadeur__benefit {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  transition: box-shadow var(--r-transition);
}

.r-ambassadeur__benefit:hover {
  box-shadow: var(--r-neu-card-hover);
}

.r-ambassadeur__benefit-title {
  font-family: var(--r-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 var(--r-section-gap);
}

.r-ambassadeur__benefit-desc {
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0;
}

.r-ambassadeur__form {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: calc(var(--r-card-padding) * 1.5);
}

.r-ambassadeur__form h3 {
  font-family: var(--r-font-body);
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  font-weight: 400;
  color: var(--r-text-body);
  margin: 0 0 var(--r-card-padding);
}

.r-ambassadeur__form label {
  display: block;
  font-family: var(--r-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--r-text-dark);
  margin-bottom: 6px;
}

.r-ambassadeur__form input,
.r-ambassadeur__form textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--r-bg);
  border: none;
  border-radius: var(--r-radius-input);
  box-shadow: var(--r-neu-inner);
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-dark);
  margin-bottom: var(--r-section-gap);
  box-sizing: border-box;
}

.r-ambassadeur__form input:focus,
.r-ambassadeur__form textarea:focus {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-ambassadeur__form textarea {
  resize: vertical;
  min-height: 100px;
}

.r-ambassadeur__form button {
  display: inline-block;
  padding: 14px 32px;
  background: var(--r-bg);
  border: 1px solid rgba(49, 151, 149, 0.2);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  font-family: var(--r-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--r-teal-dark);
  cursor: pointer;
  transition: box-shadow var(--r-transition);
}

.r-ambassadeur__form button:hover {
  box-shadow: var(--r-neu-btn-hover);
}

.r-ambassadeur__form button:active {
  box-shadow: var(--r-neu-btn-active);
}

.r-ambassadeur__form button:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE PARTENAIRE — issue #92
   ═══════════════════════════════════════════════════════════════════════════ */

.r-partenaire {
  position: relative;
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
  background: var(--r-bg);
}

.r-partenaire__inner {
  margin: 0 auto;
}

.r-partenaire__header {
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-partenaire__header .r-h1 {
  margin: 0 0 var(--r-section-gap);
}

.r-partenaire__header .r-body {
  color: var(--r-text-body);
  margin: 0;
}

.r-partenaire__intro {
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-partenaire__intro p {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
}

.r-partenaire__types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--r-card-padding);
  margin-bottom: calc(var(--r-card-padding) * 2.5);
}

.r-partenaire__type {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  transition: box-shadow var(--r-transition);
}

.r-partenaire__type:hover {
  box-shadow: var(--r-neu-card-hover);
}

.r-partenaire__type-title {
  font-family: var(--r-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 var(--r-section-gap);
}

.r-partenaire__type-desc {
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0;
}

.r-partenaire__form {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: calc(var(--r-card-padding) * 1.5);
}

.r-partenaire__form h3 {
  font-family: var(--r-font-body);
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  font-weight: 400;
  color: var(--r-text-body);
  margin: 0 0 var(--r-card-padding);
}

.r-partenaire__form label {
  display: block;
  font-family: var(--r-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--r-text-dark);
  margin-bottom: 6px;
}

.r-partenaire__form input,
.r-partenaire__form textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--r-bg);
  border: none;
  border-radius: var(--r-radius-input);
  box-shadow: var(--r-neu-inner);
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-dark);
  margin-bottom: var(--r-section-gap);
  box-sizing: border-box;
}

.r-partenaire__form input:focus,
.r-partenaire__form textarea:focus {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-partenaire__form textarea {
  resize: vertical;
  min-height: 100px;
}

.r-partenaire__form button {
  display: inline-block;
  padding: 14px 32px;
  background: var(--r-bg);
  border: 1px solid rgba(49, 151, 149, 0.2);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  font-family: var(--r-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--r-teal-dark);
  cursor: pointer;
  transition: box-shadow var(--r-transition);
}

.r-partenaire__form button:hover {
  box-shadow: var(--r-neu-btn-hover);
}

.r-partenaire__form button:active {
  box-shadow: var(--r-neu-btn-active);
}

.r-partenaire__form button:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* ─── SectionPodcast — Figma 528:156 ─── */
/* `.r-section-podcast.r-section-podcast` (0,2,0) beats `.et_pb_module`
   (0,1,0) flex/display defaults without !important. Left padding
   matches .r-faq / hero content alignment (see SectionFAQ comment). */
.r-section-podcast.r-section-podcast {
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
  background: var(--r-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

@media (min-width: 981px) {
  .r-section-podcast {
    min-height: 100%;
    height: auto;
  }
}

.r-podcast__header {
  margin-bottom: clamp(6px, 1vh, 12px);
  flex-shrink: 0;
}

/* (0,2,0) beats `.r-eyebrow` / `.r-body` (0,1,0) base. */
.r-podcast__header .r-eyebrow {
  margin: 0 0 0.5vh;
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
}

.r-podcast__header .r-body {
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  line-height: 1.55;
  margin: 0.3vh 0 0;
}

.r-podcast__eyebrow,
.r-section-podcast .r-eyebrow {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--r-teal);
  margin: 0 0 8px;
}

/* Podcast title — caption style like hero step, not bold H1 */
.r-podcast__titre {
  font-family: var(--r-font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--r-text-muted);
  margin: 0 0 8px;
}

.r-podcast__subtitle {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* ── 3 feature cards (neumorphic, light) ── */
/* Specificity (0,2,0) beats Divi 5 .et_pb_column > * (0,1,1) without !important. */
.r-section-podcast .r-podcast__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.r-podcast__feat-card {
  background: var(--r-bg);
  border-radius: 12px;
  box-shadow: var(--r-neu-card);
  padding: 12px 16px;
  min-height: 0;
  transition: box-shadow 0.2s, transform 0.2s;
}

.r-podcast__feat-card:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-2px);
}

.r-podcast__feat-icon {
  font-size: 20px;
  color: var(--r-teal);
  font-weight: 700;
  margin-bottom: 8px;
}

.r-podcast__feat-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--r-text-dark);
  margin: 0 0 8px;
}

.r-podcast__feat-desc {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  line-height: 1.5;
  margin: 0;
}

/* ── Episode section ── */
/* `.r-section-podcast .r-podcast__next-eyebrow` (0,2,0) beats `.r-eyebrow` base. */
.r-section-podcast .r-podcast__next-eyebrow {
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
  color: var(--r-orange);
  margin: 0 0 0.3vh;
}

.r-podcast__next-titre {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: clamp(14px, min(1.5vw, 2.5vh), 20px);
  color: var(--r-text-dark);
  margin: 0 0 clamp(6px, 1vh, 12px);
}

/* PodCloud player section */
.r-podcast__player-section {
  flex: 1;
  margin-top: clamp(12px, 2vh, 24px);
}

.r-podcast__player {
  border: none;
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  background: var(--r-bg);
  width: 100%;
  min-height: 400px;
}

/* Placeholder until episodes are published */
.r-podcast__player-placeholder {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(32px, 5vh, 64px) var(--r-card-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.r-podcast__player-icon {
  font-size: 48px;
  color: var(--r-teal);
  margin: 0;
}

.r-podcast__player-title {
  font-family: var(--r-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0;
}

.r-podcast__player-status {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-muted);
  margin: 0 0 8px;
}

/* Legacy episodes section — kept for backward compat */
.r-podcast__episodes-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Episode list — vertical stack, no carousel (#278) */
.r-podcast__episodes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r-podcast__episodes-list > .r-podcast__ep-card {
  display: flex;
}

/* `.r-section-podcast .r-podcast__episodes` (0,2,0) beats `.et_pb_column > *` (0,1,1). */
.r-section-podcast .r-podcast__episodes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
  flex: 1;
  min-height: 0;
}

.r-podcast__ep-card {
  background: var(--r-bg);
  border-radius: 16px;
  box-shadow: var(--r-neu-card);
  padding: 24px 24px 20px;
  min-height: 0;
  width: 100%;
  color: var(--r-text-dark);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r-podcast__ep-card:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-2px);
}

/* Accent color via left border only — keeps neu bg */
.r-podcast__ep-card--teal   { border-left: 4px solid var(--r-teal); }
.r-podcast__ep-card--orange { border-left: 4px solid var(--r-orange); }
.r-podcast__ep-card--purple { border-left: 4px solid var(--r-purple); }

.r-podcast__ep-card--teal .r-podcast__ep-title   { color: var(--r-teal); }
.r-podcast__ep-card--orange .r-podcast__ep-title { color: var(--r-orange); }
.r-podcast__ep-card--purple .r-podcast__ep-title { color: var(--r-purple); }

.r-podcast__ep-meta {
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 10px;
  opacity: 0.7;
  margin: 0 0 4px;
}

.r-podcast__ep-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  margin: 0;
}

/* ── CTA story banner ── */
.r-podcast__cta-banner {
  background: var(--r-bg);
  border-radius: 10px;
  box-shadow: var(--r-neu-btn);
  padding: clamp(6px, 1vh, 10px) clamp(12px, 1.5vw, 20px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.r-podcast__cta-eyebrow {
  font-size: clamp(7px, 0.6vw, 9px);
  letter-spacing: 1px;
  color: var(--r-orange);
  margin: 0 0 2px;
}

.r-podcast__cta-text {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: clamp(13px, min(1.1vw, 1.8vh), 16px);
  color: var(--r-text-dark);
  margin: 0;
}

.r-podcast__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 36px;
  border-radius: 18px;
  background: var(--r-bg);
  border: 1px solid var(--r-orange-a20);
  box-shadow: var(--r-neu-btn);
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-orange);
  text-decoration: none;
  cursor: pointer;
}

/* Legacy podcast mobile rules moved into realisons-responsive.css (#183).
   Kept here as no-op so historical diffs stay readable. */

/* ── Legacy dark hero classes (kept for backward compat) ── */

/* ── Episodes eyebrow ── */
.r_section_podcast__episodes-eyebrow {
  text-align: center;
  padding: var(--r-spacing-lg, 24px) 0 0;
}

/* ── Story CTA block ── */
.r_section_podcast__story-cta {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(32px, 4vw, 56px);
  text-align: center;
  margin: 0 clamp(20px, 5vw, 80px);
}

.r_section_podcast__story-title {
  margin: 0 0 var(--r-spacing-sm, 8px);
}

.r_section_podcast__story-desc {
  margin: 0 0 var(--r-spacing-md, 16px);
  color: var(--r-text-body);
}

.r_section_podcast__story-btn {
  display: inline-block;
  text-decoration: none;
}

.r_section_podcast__header {
  text-align: center;
  max-width: var(--r-container-prose-narrow);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.r_section_podcast__surtitre {
  font-family: var(--r-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--r-teal);
}

.r_section_podcast__titre {
  font-family: var(--r-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--r-text-dark);
  line-height: 1.2;
  margin: 0;
}

.r_section_podcast__soustitre {
  font-family: var(--r-font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--r-text-body);
  margin: 0;
}

.r_section_podcast__featured {
  display: flex;
  flex-direction: column;
  gap: var(--r-section-gap);
  padding: var(--r-card-padding);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
}

.r_section_podcast__featured-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r_section_podcast__featured-titre {
  font-family: var(--r-font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--r-text-dark);
  line-height: 1.3;
  margin: 0;
}

.r_section_podcast__featured-desc {
  font-family: var(--r-font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--r-text-body);
  margin: 0;
}

.r_section_podcast__player {
  width: 100%;
  height: 48px;
  border-radius: var(--r-radius-btn);
}

.r_section_podcast__player-placeholder {
  width: 100%;
  padding: 16px;
  text-align: center;
  font-family: var(--r-font-body);
  font-size: 0.875rem;
  color: var(--r-text-muted);
  font-style: italic;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
}

.r_section_podcast__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--r-section-gap);
}

.r_section_podcast__cta-wrap {
  text-align: center;
}

.r_section_podcast__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--r-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--r-teal);
  background: var(--r-bg);
  border: 1px solid var(--r-teal-a20);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r_section_podcast__cta:hover {
  box-shadow: var(--r-neu-btn-hover);
  transform: translateY(-2px);
}

.r_section_podcast__cta:active {
  box-shadow: var(--r-neu-btn-active);
  transform: translateY(0);
}

.r_section_podcast__cta:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .r_section_podcast__intro-grid {
    grid-template-columns: 1fr;
  }

  .r_section_podcast__story-cta {
    margin: 0 var(--r-spacing-md, 16px);
    padding: var(--r-spacing-lg, 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-card-episode,
  .r_card_episode__cta,
  .r_section_podcast__intro-card {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE JOBS — issue #92
   ═══════════════════════════════════════════════════════════════════════════ */

.r-jobs {
  position: relative;
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
  background: var(--r-bg);
}

.r-jobs__inner {
  margin: 0 auto;
}

.r-jobs__header {
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-jobs__header .r-h1 {
  margin: 0 0 var(--r-section-gap);
}

.r-jobs__header .r-body {
  color: var(--r-text-body);
  margin: 0;
}

.r-jobs__intro {
  margin-bottom: calc(var(--r-card-padding) * 2);
}

.r-jobs__intro p {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
}

.r-jobs__listings {
  margin-bottom: calc(var(--r-card-padding) * 2.5);
}

.r-jobs__listing {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  margin-bottom: var(--r-section-gap);
  transition: box-shadow var(--r-transition);
}

.r-jobs__listing:hover {
  box-shadow: var(--r-neu-card-hover);
}

.r-jobs__listing-title {
  font-family: var(--r-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 4px;
}

.r-jobs__listing-type {
  font-family: var(--r-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--r-teal-dark);
  margin: 0 0 10px;
}

.r-jobs__listing-desc {
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0;
}

.r-jobs__form {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: calc(var(--r-card-padding) * 1.5);
}

.r-jobs__form h3 {
  font-family: var(--r-font-body);
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  font-weight: 400;
  color: var(--r-text-body);
  margin: 0 0 var(--r-card-padding);
}

.r-jobs__form label {
  display: block;
  font-family: var(--r-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--r-text-dark);
  margin-bottom: 6px;
}

.r-jobs__form input,
.r-jobs__form textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--r-bg);
  border: none;
  border-radius: var(--r-radius-input);
  box-shadow: var(--r-neu-inner);
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-dark);
  margin-bottom: var(--r-section-gap);
  box-sizing: border-box;
}

.r-jobs__form input:focus,
.r-jobs__form textarea:focus {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-jobs__form textarea {
  resize: vertical;
  min-height: 100px;
}

.r-jobs__form button {
  display: inline-block;
  padding: 14px 32px;
  background: var(--r-bg);
  border: 1px solid rgba(49, 151, 149, 0.2);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  font-family: var(--r-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--r-teal-dark);
  cursor: pointer;
  transition: box-shadow var(--r-transition);
}

.r-jobs__form button:hover {
  box-shadow: var(--r-neu-btn-hover);
}

.r-jobs__form button:active {
  box-shadow: var(--r-neu-btn-active);
}

.r-jobs__form button:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* ─── CardEpisode + SectionPodcast responsive ─── */
@media (max-width: 768px) {
  .r_card_episode__footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .r_card_episode__player {
    width: 100%;
  }

  .r_section_podcast__grid {
    grid-template-columns: 1fr;
  }

  .r_section_podcast__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ─── CardEpisode + SectionPodcast reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .r-card-episode,
  .r_card_episode__play-btn,
  .r_section_podcast__cta {
    transition: none;
  }
}

/* ── Responsive — Pages secondaires (#92) ─────────────────────────────── */

@media (max-width: 767.98px) {
  .r-ambassadeur,
  .r-partenaire,
  .r-jobs,
  .r-archive {
    padding-left: var(--r-gutter-sm, 16px);
    padding-right: var(--r-gutter-sm, 16px);
    padding-top: clamp(12px, 2vh, 24px);
    padding-bottom: clamp(8px, 1.5vh, 16px);
    width: 100%;
  }

  .r-ambassadeur__benefits,
  .r-partenaire__types {
    grid-template-columns: 1fr;
  }
}

/* Safe-area padding on phones (iPhone notch / rounded corners). */
@supports (padding: max(0px)) {
  @media (max-width: 767.98px) {
    .r-ambassadeur,
    .r-partenaire,
    .r-jobs,
    .r-archive {
      padding-left: max(var(--r-gutter-sm, 16px), env(safe-area-inset-left));
      padding-right: max(var(--r-gutter-sm, 16px), env(safe-area-inset-right));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-ambassadeur__benefit,
  .r-ambassadeur__form button,
  .r-partenaire__type,
  .r-partenaire__form button,
  .r-jobs__listing,
  .r-jobs__form button,
  .r-archive__card {
    transition: none;
  }
}

/* ─── CardEpisode + SectionPodcast + Pages secondaires print ─── */
@media print {
  .r-card-episode,
  .r-ambassadeur__benefit,
  .r-ambassadeur__form,
  .r-partenaire__type,
  .r-partenaire__form,
  .r-jobs__listing,
  .r-jobs__form {
    box-shadow: none;
    border: 1px solid var(--r-separator);
    break-inside: avoid;
  }

  .r_card_episode__player,
  .r_card_episode__play-btn {
    display: none;
  }

  .r_card_episode__categorie {
    box-shadow: none;
    border: 1px solid var(--r-separator);
  }

  .r_section_podcast__featured {
    box-shadow: none;
    border: 1px solid var(--r-separator);
  }

  .r_section_podcast__player,
  .r_section_podcast__player-placeholder {
    display: none;
  }

  .r_section_podcast__cta {
    box-shadow: none;
    border: 1px solid var(--r-separator);
  }
  .r-ambassadeur__form input,
  .r-ambassadeur__form textarea,
  .r-ambassadeur__form button,
  .r-partenaire__form input,
  .r-partenaire__form textarea,
  .r-partenaire__form button,
  .r-jobs__form input,
  .r-jobs__form textarea,
  .r-jobs__form button,
  .r-contact__form input,
  .r-contact__form textarea,
  .r-contact__submit {
    display: none;
  }
}

/* ─── PageLegal ─── */
.r-page-legal {
  display: flex;
  flex-direction: column;
  gap: var(--r-section-gap);
  max-width: 860px;
  margin: 0 auto;
  padding: var(--r-section-padding);
  background: var(--r-bg);
}

.r_page_legal__header {
  text-align: center;
  padding-bottom: var(--r-section-gap);
  border-bottom: 1px solid var(--r-separator);
}

.r_page_legal__titre {
  font-family: var(--r-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--r-text-dark);
  line-height: 1.2;
  margin: 0 0 8px;
}

.r_page_legal__date {
  font-family: var(--r-font-body);
  font-size: 0.875rem;
  color: var(--r-text-muted);
  margin: 0;
}

.r_page_legal__card {
  padding: var(--r-card-padding);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
}

.r_page_legal__intro {
  font-family: var(--r-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--r-text-body);
}

.r_page_legal__sections {
  font-family: var(--r-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--r-text-body);
}

.r_page_legal__sections h2 {
  font-family: var(--r-font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  color: var(--r-text-dark);
  line-height: 1.3;
  margin: var(--r-section-gap) 0 12px;
  padding-top: var(--r-section-gap);
  border-top: 1px solid var(--r-separator);
}

.r_page_legal__sections h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.r_page_legal__sections h3 {
  font-family: var(--r-font-heading);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 700;
  color: var(--r-teal-dark);
  line-height: 1.3;
  margin: 16px 0 8px;
}

.r_page_legal__sections p {
  margin: 0 0 12px;
}

.r_page_legal__sections ul,
.r_page_legal__sections ol {
  margin: 0 0 12px;
  padding-left: 24px;
}

.r_page_legal__sections li {
  margin-bottom: 4px;
}

.r_page_legal__sections a,
.r_page_legal__contact a {
  color: var(--r-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--r-transition);
}

.r_page_legal__sections a:hover,
.r_page_legal__contact a:hover {
  color: var(--r-teal-dark);
}

.r_page_legal__sections a:focus-visible,
.r_page_legal__contact a:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION CATALOGUE — issue #80
   ═══════════════════════════════════════════════════════════════════════════ */

/* `.r-section-catalogue.r-section-catalogue` (0,2,0) beats `.et_pb_module`
   (0,1,0) defaults without !important. Left padding matches the
   hero content alignment (see SectionFAQ comment). */
.r-section-catalogue.r-section-catalogue {
  position: relative;
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
  background: var(--r-bg);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

@media (min-width: 981px) {
  .r-section-catalogue {
    min-height: 100%;
    height: auto;
  }
}

.r-section-catalogue__inner {
  max-width: none;
  margin: 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  height: auto;
}

/* Catalogue typography — same sizing as hero */
/* `.r-section-catalogue .r-section-catalogue__eyebrow` (0,2,0) beats `.r-eyebrow` base. */
.r-section-catalogue .r-section-catalogue__eyebrow {
  font-size: clamp(12px, min(0.9vw, 1.6vh), 14px);
  margin: 0 0 0.5vh;
}

.r-section-catalogue__titre {
  display: none; /* No H1 — eyebrow is page name */
}

/* (0,2,0) beats `.r-body` (0,1,0) base. */
.r-section-catalogue .r-section-catalogue__subtitle {
  margin: 0 0 clamp(4px, 0.8vh, 10px);
  font-size: clamp(15px, min(1.1vw, 2vh), 18px);
  line-height: 1.55;
  color: var(--r-text-body);
}

/* Controls: filters + search inline */
/* (0,2,0) beats `.et_pb_column > *` (0,1,1) without !important. */
.r-section-catalogue .r-section-catalogue__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(8px, 1.2vh, 14px);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.r-section-catalogue__search {
  display: block;
  width: 180px;
  padding: 8px 12px;
  margin: 0;
  border: none;
  border-radius: var(--r-radius-input, 8px);
  box-shadow: var(--r-neu-inner);
  background: var(--r-bg);
  font-family: var(--r-font-body);
  font-size: 13pt;
  color: var(--r-text-body);
  box-sizing: border-box;
}

.r-section-catalogue__search::placeholder { color: var(--r-text-muted); }
.r-section-catalogue__search:focus { outline: 2px solid var(--r-teal); outline-offset: -2px; }

/* Pagination nav — removed. Grid now scrolls natively; filter pills +
   search are the only controls. Keep the legacy selectors here as a
   no-op hidden rule so any leftover markup (cached theme builder
   layouts, old exports) disappears until rebuilt. */
/* Chained-class (0,2,0) beats any base display rule. */
.r-section-catalogue__nav.r-section-catalogue__nav,
.r-section-catalogue__prev.r-section-catalogue__prev,
.r-section-catalogue__next.r-section-catalogue__next,
.r-section-catalogue__page-indicator.r-section-catalogue__page-indicator {
  display: none;
}

/* Empty-state message (surfaced by catalogue-filter.js when no card matches) */
.r-section-catalogue__empty {
  margin-top: 16px;
  padding: 16px;
  text-align: center;
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-muted);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
}
/* `[hidden]` selector adds (0,1,0); chained class total = (0,3,0). */
.r-section-catalogue__empty.r-section-catalogue__empty[hidden] { display: none; }

/* ── Search highlight ── */
/* <mark> elements injected by catalogue-filter.js during search.
   (0,2,0) specificity beats the UA default yellow background. */
.r-section-catalogue .r-section-catalogue__highlight {
  background: var(--r-teal-a20);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Filter dropdown ── */
/* (0,2,0) beats `.et_pb_column > *` (0,1,1) without !important. */
.r-section-catalogue .r-section-catalogue__filter-select {
  height: 36px;
  min-width: 220px;
  border: none;
  border-radius: var(--r-radius-pill, 12px);
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  font-family: var(--r-font-body);
  font-size: 13pt;
  color: var(--r-text-body);
  padding: 0 32px 0 14px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23319795' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  flex-shrink: 0;
}

.r-section-catalogue .r-section-catalogue__filter-select:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* Legacy pill styles removed — replaced by .r-section-catalogue__filter-select
   dropdown (see ── Filter dropdown ── block above). */

/* Specificity (0,2,0) beats Divi 5 .et_pb_column > * (0,1,1) without !important. */
.r-section-catalogue .r-section-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: min-content;
  gap: 20px;
  padding: 14px 14px 18px;
  flex: 1 0 auto;
  align-content: start;
  overflow: visible;
}

.r-section-catalogue__grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* `.r-section-catalogue .r-section-catalogue__card` (0,2,0) beats
   `.et_pb_column > *` (0,1,1) without !important. */
.r-section-catalogue .r-section-catalogue__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 16px;
  background: var(--r-bg);
  border-radius: 16px;
  box-shadow: var(--r-neu-card);
  transition: box-shadow var(--r-transition), transform var(--r-transition);
  height: auto;
}

.r-section-catalogue__card:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-3px);
}

.r-section-catalogue__card:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-section-catalogue__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 12px;
  border-radius: 10px;
  font-family: var(--r-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  background: var(--r-dark, #2D3748);
  color: #fff;
  line-height: 1.4;
}

/* (0,2,0) beats Divi link/badge defaults (0,1,0) without !important. */
.r-section-catalogue .r-section-catalogue__badge--visibilite {
  background: var(--r-teal);
  color: #fff;
}

.r-section-catalogue .r-section-catalogue__badge--gestion {
  background: var(--r-orange);
  color: #fff;
}

.r-section-catalogue .r-section-catalogue__badge--branding {
  background: var(--r-purple, #805AD5);
  color: #fff;
}

.r-section-catalogue__icon {
  font-size: 2rem;
  line-height: 1;
}

.r-section-catalogue__card-titre {
  font-family: var(--r-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0;
}

.r-section-catalogue__card-desc {
  font-family: var(--r-font-body);
  font-size: 12pt;
  line-height: 1.45;
  color: var(--r-text-body);
  margin: 0;
}

.r-section-catalogue__card-link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-teal);
  text-decoration: none;
  transition: color var(--r-transition);
}

.r-section-catalogue__card-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.r-section-catalogue__card-link:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* Per-category link colors */
.r-section-catalogue__card-link--visibilite {
  color: var(--r-teal);
}

.r-section-catalogue__card-link--gestion {
  color: var(--r-orange);
}

.r-section-catalogue__card-link--branding {
  color: var(--r-purple, #805AD5);
}

.r_page_legal__contact {
  font-family: var(--r-font-body);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--r-text-body);
}

/* PageLegal responsive */
@media (max-width: 768px) {
  .r-page-legal {
    padding: var(--r-card-padding);
  }
}

/* PageLegal reduced motion */
@media (prefers-reduced-motion: reduce) {
  .r_page_legal__sections a,
  .r_page_legal__contact a {
    transition: none;
  }
}

/* ── Catalogue card filter transitions ── */
.r-section-catalogue__card[hidden] {
  display: none;
}

/* Legacy catalogue mobile rules moved into realisons-responsive.css (#182).
   Kept here as no-op so historical diffs stay readable. */

@media (prefers-reduced-motion: reduce) {
  .r-section-catalogue__card {
    transition: none;
  }

  .r-section-catalogue__card:hover {
    transform: none;
  }

  .r-section-catalogue__card-link {
    transition: none;
  }
}

@media print {
  .r-section-catalogue__card {
    box-shadow: none;
    border: 1px solid var(--r-separator);
    break-inside: avoid;
  }

  .r-section-catalogue__card-link {
    text-decoration: none;
  }

  .r-section-catalogue__card-link::after {
    content: ' (' attr(href) ')';
    font-size: 0.75em;
    color: var(--r-text-body);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Section A Propos — Issue #90
   ═══════════════════════════════════════════════════════════════════ */

.r-apropos {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 80px);
  background: var(--r-bg);
}

.r-apropos__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
}

.r-apropos__header {
  text-align: center;
}

.r-apropos__subtitle {
  max-width: 680px;
  margin: var(--r-spacing-md, 16px) auto 0;
  color: var(--r-text-body);
}

.r-apropos__mission,
.r-apropos__equipe {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-spacing-xl, 32px);
}

.r-apropos__mission h2,
.r-apropos__equipe h2 {
  font-family: var(--r-font-heading);
  color: var(--r-text-dark);
  margin: 0 0 var(--r-spacing-md, 16px);
}

.r-apropos__mission p,
.r-apropos__equipe p {
  color: var(--r-text-body);
  line-height: 1.7;
  margin: 0;
}

.r-apropos__valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--r-spacing-lg, 24px);
}

.r-apropos__valeur {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-spacing-lg, 24px);
  transition: box-shadow 0.2s ease;
}

.r-apropos__valeur:hover {
  box-shadow: var(--r-neu-card-hover);
}

.r-apropos__valeur-title {
  font-family: var(--r-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r-teal-dark);
  margin: 0 0 var(--r-spacing-sm, 8px);
}

.r-apropos__valeur-desc {
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0;
}

.r-apropos__cta-wrap {
  text-align: center;
}

@media (max-width: 767.98px) {
  .r-apropos {
    padding: var(--r-spacing-lg, 24px);
  }
  .r-apropos__valeurs {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-apropos__valeur {
    transition: none;
  }
}

/* PageLegal print */
@media print {
  .r_page_legal__card {
    box-shadow: none;
    border: 1px solid var(--r-separator);
  }

  .r-page-legal {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Formulaire Contact — Issue #90
   ═══════════════════════════════════════════════════════════════════ */

.r-contact {
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
  background: var(--r-bg);
}

.r-contact__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.r-contact__header {
  text-align: left;
}

.r-contact__subtitle {
  margin: var(--r-spacing-md, 16px) 0 0;
  color: var(--r-text-body);
}

.r-contact__disamb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-spacing-sm, 8px);
}

.r-contact__form {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-spacing-xl, 32px);
}

.r-contact__field {
  margin-bottom: var(--r-spacing-md, 16px);
}

.r-contact__field label {
  display: block;
  font-family: var(--r-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--r-text-dark);
  margin-bottom: 6px;
}

.r-contact__field input,
.r-contact__field textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--r-bg);
  border: none;
  border-radius: var(--r-radius-input, 8px);
  box-shadow: var(--r-neu-inner);
  font-family: var(--r-font-body);
  font-size: 0.9rem;
  color: var(--r-text-dark);
  box-sizing: border-box;
}

.r-contact__field input:focus,
.r-contact__field textarea:focus {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-contact__field textarea {
  resize: vertical;
  min-height: 120px;
}

.r-contact__field--error input,
.r-contact__field--error textarea {
  box-shadow: var(--r-neu-inner), inset 0 0 0 1px var(--r-error, #e53e3e);
}

.r-contact__error-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--r-error, #e53e3e);
  margin-top: 4px;
  min-height: 1.2em;
}

.r-contact__submit {
  display: inline-block;
  margin-top: var(--r-spacing-sm, 8px);
  padding: 14px 32px;
  width: 100%;
  text-align: center;
  background: var(--r-bg);
  border: 1px solid rgba(49, 151, 149, 0.2);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--r-neu-btn);
  font-family: var(--r-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--r-teal-dark);
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.r-contact__submit:hover {
  box-shadow: var(--r-neu-btn-hover);
  transform: translateY(-1px);
}

.r-contact__submit:active {
  box-shadow: var(--r-neu-btn-active);
  transform: translateY(0);
}

.r-contact__submit:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-contact__alert {
  padding: var(--r-spacing-md, 16px);
  border-radius: var(--r-radius-card);
  text-align: center;
}

.r-contact__alert--success {
  background: rgba(40, 168, 191, 0.1);
  color: var(--r-teal-dark);
  box-shadow: var(--r-neu-card);
}

.r-contact__alert--error {
  background: rgba(229, 62, 62, 0.1);
  color: var(--r-error, #e53e3e);
  box-shadow: var(--r-neu-card);
}

@media (max-width: 767.98px) {
  .r-contact {
    padding: var(--r-spacing-lg, 24px);
  }
  .r-contact__form {
    padding: var(--r-spacing-lg, 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-contact__submit {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Page Demarrer — FormulaireEvaluation (issue #83)
   ──────────────────────────────────────────────────────────────── */

.r-eval { padding: var(--r-page-margin); background: var(--r-bg); }
.r-eval__inner { max-width: 640px; margin: 0 auto; }
.r-eval__header { text-align: center; margin-bottom: calc(var(--r-card-padding) * 2); }
.r-eval__eyebrow { font-family: var(--r-font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--r-teal-dark); margin-bottom: 8px; }
.r-eval__title { font-family: var(--r-font-heading); color: var(--r-text-dark); margin: 0 0 var(--r-section-gap); }
.r-eval__subtitle { color: var(--r-text-body); margin: 0; }
.r-eval__form { background: var(--r-bg); border-radius: var(--r-radius-card); box-shadow: var(--r-neu-card); padding: var(--r-card-padding) calc(var(--r-card-padding) * 1.2); }
.r-eval__step[hidden] { display: none; }
.r-eval__label { display: block; font-family: var(--r-font-heading); font-size: 0.85rem; font-weight: 600; color: var(--r-text-dark); margin-bottom: 8px; }

.r-eval__textarea {
  width: 100%; min-height: 100px; padding: 12px 16px;
  font-family: var(--r-font-body); font-size: 0.9rem; color: var(--r-text-dark);
  background: var(--r-bg); border: none; border-radius: var(--r-radius-input, 8px);
  box-shadow: var(--r-neu-inner); box-sizing: border-box; resize: vertical;
  transition: box-shadow var(--r-transition); line-height: 1.6;
}
.r-eval__textarea:focus { outline: 2px solid var(--r-teal); outline-offset: -2px; box-shadow: var(--r-neu-inner), 0 0 0 3px var(--r-teal-a20, rgba(49,151,149,0.2)); }
.r-eval__textarea::placeholder { color: var(--r-text-body); opacity: 0.6; }
.r-eval__hint { font-size: 0.75rem; color: var(--r-text-body); opacity: 0.7; margin: 6px 0 0; }

.r-eval__row { display: flex; gap: 12px; }
.r-eval__field { flex: 1; }
.r-eval__input {
  width: 100%; padding: 10px 14px;
  font-family: var(--r-font-body); font-size: 0.9rem; color: var(--r-text-dark);
  background: var(--r-bg); border: none; border-radius: var(--r-radius-input, 8px);
  box-shadow: var(--r-neu-inner); box-sizing: border-box;
  transition: box-shadow var(--r-transition);
}
.r-eval__input:focus { outline: 2px solid var(--r-teal); outline-offset: -2px; box-shadow: var(--r-neu-inner), 0 0 0 3px var(--r-teal-a20, rgba(49,151,149,0.2)); }
.r-eval__input::placeholder { color: var(--r-text-body); opacity: 0.6; }

.r-eval__loading { text-align: center; padding: var(--r-card-padding) 0; }
.r-eval__spinner { width: 40px; height: 40px; border: 3px solid var(--r-separator, #ddd); border-top-color: var(--r-teal); border-radius: 50%; margin: 0 auto 12px; animation: r-eval-spin 0.8s linear infinite; }
@keyframes r-eval-spin { to { transform: rotate(360deg); } }
.r-eval__loading-text { font-family: var(--r-font-body); font-size: 0.9rem; color: var(--r-text-body); margin: 0 0 12px; }
.r-eval__progress-bar { width: 100%; height: 4px; background: var(--r-separator, #ddd); border-radius: 2px; overflow: hidden; }
.r-eval__progress-fill { height: 100%; width: 0%; background: var(--r-teal); border-radius: 2px; transition: width 0.4s ease; }

.r-eval__error { background: #FEE; color: #C53030; border-radius: var(--r-radius-input, 8px); padding: 10px 14px; font-size: 0.85rem; margin-top: 12px; }
.r-eval__error[hidden] { display: none; }

.r-eval__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: var(--r-card-padding); }
.r-eval__back { all: unset; padding: 10px 20px; font-family: var(--r-font-heading); font-size: 0.85rem; font-weight: 600; color: var(--r-text-body); cursor: pointer; border-radius: var(--r-radius-btn); box-shadow: var(--r-neu-btn); background: var(--r-bg); transition: box-shadow var(--r-transition); box-sizing: border-box; }
.r-eval__back:hover { box-shadow: var(--r-neu-card-hover); }
.r-eval__back[hidden] { display: none; }

.r-eval__submit { all: unset; padding: 12px 32px; font-family: var(--r-font-heading); font-size: 0.9rem; font-weight: 600; color: var(--r-teal-dark); background: var(--r-bg); border-radius: var(--r-radius-btn); box-shadow: var(--r-neu-btn); cursor: pointer; transition: box-shadow var(--r-transition), transform 0.15s ease; box-sizing: border-box; min-height: 48px; display: inline-flex; align-items: center; }
.r-eval__submit:hover { box-shadow: var(--r-neu-btn-hover, var(--r-neu-card-hover)); transform: translateY(-1px); }
.r-eval__submit:active { box-shadow: var(--r-neu-inner); transform: translateY(0); }
.r-eval__submit:focus-visible { outline: 2px solid var(--r-teal); outline-offset: 2px; }
.r-eval__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.r-eval__privacy { text-align: center; font-size: 0.75rem; color: var(--r-text-body); opacity: 0.7; margin: 12px 0 0; }

@media (max-width: 767.98px) {
  .r-eval { padding: var(--r-card-padding); }
  .r-eval__row { flex-direction: column; }
  .r-eval__submit { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .r-eval__spinner { animation: none; }
  .r-eval__step, .r-eval__submit, .r-eval__textarea, .r-eval__input, .r-eval__progress-fill { transition: none; }
}

@media print {
  .r-eval__form { box-shadow: none; border: 1px solid var(--r-separator); }
  .r-eval__submit, .r-eval__back, .r-eval__loading { display: none; }
}

/* ─── Reservation page (Amelia booking wrapper) — issue #134 ─── */
.r-reservation {
  background: var(--r-bg);
  padding: clamp(24px, 4vw, 64px) clamp(20px, 3vw, 80px);
  min-height: 60vh;
}

.r-reservation__inner {
  max-width: var(--r-container-page);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 20px);
}

.r-reservation__header {
  text-align: center;
}

.r-reservation__header .r-eyebrow {
  margin: 0 0 8px;
}

.r-reservation__title {
  font-family: var(--r-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--r-text-dark);
  margin: 0 0 12px;
  line-height: 1.15;
}

.r-reservation__intro {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

.r-reservation__card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(16px, 2.5vw, 32px);
}

/* Give booking widgets (FluentBooking / legacy Amelia) room inside the
   neumorphic card. (0,2,0) beats plugin base background without !important. */
.r-reservation__card .amelia-app-booking,
.r-reservation__card .amelia_app_booking,
.r-reservation__card .fcal_booking,
.r-reservation__card .fluent-booking,
.r-reservation__card [class*="fluent-booking"],
.r-reservation__card [class*="fcal"] {
  background: transparent;
}

@media (max-width: 767.98px) {
  .r-reservation { padding: 16px; }
  .r-reservation__card { padding: 16px; }
}


/* ─── Header nav inline label (issue #161) ─── */
/* Discreet hover label that lives inside the nav, to the LEFT of the icons.
   Position absolute so it never pushes the icons or causes layout shift,
   no popup, no neumo card — pure text fading in next to the buttons. */
.r-header__nav {
  position: relative;
}

.r-header__nav-label {
  position: absolute;
  right: calc(100% + 28px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  /* Eyebrow typography (matches .r-eyebrow) */
  font-family: var(--r-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--r-teal);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.r-header__nav-label.is-visible {
  opacity: 1;
}

@media (max-width: 767.98px) {
  .r-header__nav-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .r-header__nav-label { transition: none; }
}

/* ─── 404 page (issue #123) ─── */
.r-404 {
  background: var(--r-bg);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 6vw, 96px) clamp(20px, 3vw, 80px);
}

.r-404__inner {
  max-width: 640px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(28px, 4vw, 56px);
  text-align: center;
}

.r-404__title {
  font-family: var(--r-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--r-text-dark);
  margin: 12px 0 16px;
  line-height: 1.15;
}

.r-404__body {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0 0 28px;
}

.r-404__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.r-404__ctas .r-btn {
  min-width: 180px;
}

@media (max-width: 480px) {
  .r-404 { padding: 24px 16px; }
  .r-404__inner { padding: 24px; }
  .r-404__ctas { flex-direction: column; }
  .r-404__ctas .r-btn { width: 100%; }
}

/* ─── Contact form — #117 additions ─── */
/* Honeypot — chained class (0,2,0) beats any base form input rule. */
.r-contact__hp.r-contact__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.r-contact__privacy {
  font-family: var(--r-font-body);
  font-size: 11px;
  color: var(--r-text-body);
  line-height: 1.5;
  margin: 12px 0 20px;
}

.r-contact__privacy a {
  color: var(--r-teal);
  text-decoration: underline;
}

.r-contact__coords {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(16px, 2vw, 24px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
}

.r-contact__coord {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  margin: 0 0 8px;
  line-height: 1.55;
}

.r-contact__coord-label {
  font-weight: 700;
  color: var(--r-teal);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 8px;
}

.r-contact__coord a {
  color: var(--r-text-dark);
}

.r-contact__coord-cta {
  margin-top: 16px;
}

/* ─── Merci thank-you pages (issue #122) ─── */
.r-merci {
  background: var(--r-bg);
  padding: clamp(32px, 6vw, 96px) clamp(20px, 3vw, 80px);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r-merci__inner {
  max-width: 680px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(28px, 4vw, 56px);
  text-align: center;
}

.r-merci__title {
  font-family: var(--r-font-heading);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: var(--r-text-dark);
  margin: 12px 0 16px;
  line-height: 1.2;
}

.r-merci__body {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0 0 24px;
}

/* Divi prints inline:
     #left-area ol, .entry-content ol, .et-l--body ol,
     .et-l--footer ol, .et-l--header ol { list-style: decimal }
   The strongest selector in that list is `#left-area ol` with
   specificity (1,0,1). To win without !important we need a selector
   strictly stronger. `#left-area .r-merci__steps` is (1,1,0) which
   beats (1,0,1). We list every Divi parent context as a fallback so
   the override works on Theme Builder layouts too. */
.r-merci__steps,
#left-area .r-merci__steps,
.entry-content .r-merci__steps,
.et-l--body .r-merci__steps,
.et-l--post .r-merci__steps {
  text-align: left;
  margin: 0 auto 28px;
  padding: 20px 24px;
  max-width: 520px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
  counter-reset: merci-step;
  list-style: none;
}

.r-merci__steps li,
#left-area .r-merci__steps li,
.entry-content .r-merci__steps li,
.et-l--body .r-merci__steps li,
.et-l--post .r-merci__steps li {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0 0 10px;
  padding-left: 28px;
  position: relative;
  counter-increment: merci-step;
  list-style: none;
}

.r-merci__steps li::before {
  content: counter(merci-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--r-teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r-merci__steps li:last-child {
  margin-bottom: 0;
}

.r-merci__ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.r-merci__ctas .r-btn {
  min-width: 180px;
}

@media (max-width: 480px) {
  .r-merci { padding: 24px 16px; }
  .r-merci__inner { padding: 24px; }
  .r-merci__ctas { flex-direction: column; }
  .r-merci__ctas .r-btn { width: 100%; }
}

/* ─── Shared footer-page back CTA ─── */
.r-footer-page__ctas {
  margin-top: clamp(24px, 3vw, 40px);
  text-align: center;
}

/* ─── Legal pages (issue #119) ─── */
.r-legal {
  background: var(--r-bg);
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
}

.r-legal__inner {
  max-width: var(--r-container-standard);
  margin: 0 auto;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(28px, 4vw, 56px);
}

.r-legal__header {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--r-separator, rgba(0, 0, 0, 0.08));
}

.r-legal__title {
  font-family: var(--r-font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--r-text-dark);
  margin: 10px 0 8px;
  line-height: 1.2;
}

.r-legal__meta {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  opacity: 0.75;
  margin: 0;
}

.r-legal__section {
  font-family: var(--r-font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--r-text-dark);
  margin: clamp(24px, 3vw, 40px) 0 12px;
}

.r-legal__inner p {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
  margin: 0 0 16px;
}

/* ─── Parsed markdown typography (Realisons_Markdown_Mini output).
   The legal pages' body is built from .md files and emitted as raw
   h2/h3/h4/ul/ol/blockquote/hr/table. Give them a unified baseline so
   headings, paragraphs and lists all align on the same left edge and
   the rhythm between titles and paragraphs is comfortable. */
.r-legal__inner h2,
.r-legal__inner h3,
.r-legal__inner h4 {
  font-family: var(--r-font-heading);
  color: var(--r-text-dark);
  line-height: 1.25;
  /* Reset any WP/Divi default indent/padding so headings share the
     exact left edge as paragraphs and list items. */
  padding-left: 0;
  text-indent: 0;
}
.r-legal__inner h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: clamp(28px, 3.2vw, 44px) 0 clamp(10px, 1.2vw, 14px);
}
.r-legal__inner h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  margin: clamp(22px, 2.6vw, 32px) 0 clamp(8px, 1vw, 12px);
}
.r-legal__inner h4 {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  margin: clamp(18px, 2vw, 24px) 0 clamp(6px, 0.8vw, 10px);
  color: var(--r-text-body);
}
.r-legal__inner ul,
.r-legal__inner ol {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
  margin: 0 0 16px;
  /* List markers sit inside the block so the text column shares the
     same left edge as paragraphs — no negative indent effect. */
  padding-left: 1.25em;
  list-style-position: outside;
}
.r-legal__inner li {
  margin: 0 0 6px;
}
.r-legal__inner li > p {
  margin: 0 0 6px;
}
.r-legal__inner blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid var(--r-teal-a40);
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: var(--r-radius-pill);
  color: var(--r-text-body);
  font-style: italic;
}
.r-legal__inner hr {
  border: 0;
  height: 1px;
  background: var(--r-separator);
  margin: clamp(24px, 3vw, 36px) 0;
}
.r-legal__inner strong { color: var(--r-text-dark); }
.r-legal__inner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: var(--r-radius-pill);
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
}

.r-legal__todo {
  font-style: italic;
  opacity: 0.65;
  padding: 10px 14px;
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: var(--r-radius-card);
}

/* ─── Page À propos (#339 IMP-004) ───
   Visually aligned with the legal pages (cgv/cgu) — same neumo
   container width, header padding, typography scale and bullet rules.
   Shares the .r-legal definitions via a selector list so any future
   tweak to legal-page visuals automatically propagates here. */
.r-a-propos,
.r-legal { /* container — see duplicate .r-legal above, this alias keeps them in sync */ }

.r-a-propos {
  background: var(--r-bg);
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
}

.r-a-propos__inner {
  max-width: var(--r-container-standard);
  margin: 0 auto;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(28px, 4vw, 56px);
}

.r-a-propos__header {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--r-separator, rgba(0, 0, 0, 0.08));
}

.r-a-propos__header .r-eyebrow {
  margin: 0 0 10px;
}

/* Narrative intro ("Il n'y avait personne.") — small prose line above
   the H1 title, same role as a kicker subtitle. */
.r-a-propos__header .r-body {
  font-family: var(--r-font-body);
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.5;
  color: var(--r-text-body);
  margin: 0 0 6px;
}

/* Main page title ("Alors nous l'avons construit.") — matches
   .r-legal__title on /cgu/ and /cgv/ for visual parity. */
.r-a-propos__title {
  font-family: var(--r-font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  color: var(--r-text-dark);
  margin: 0;
  line-height: 1.2;
}

/* MarkdownMini body — shared heading / paragraph / list rules with
   .r-legal__inner (see §Legal above). */
.r-a-propos__inner h2,
.r-a-propos__inner h3,
.r-a-propos__inner h4 {
  font-family: var(--r-font-heading);
  color: var(--r-text-dark);
  line-height: 1.25;
  padding-left: 0;
  text-indent: 0;
}
.r-a-propos__inner h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: clamp(28px, 3.2vw, 44px) 0 clamp(10px, 1.2vw, 14px);
}
.r-a-propos__inner h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  margin: clamp(22px, 2.6vw, 32px) 0 clamp(8px, 1vw, 12px);
}
.r-a-propos__inner h4 {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  margin: clamp(18px, 2vw, 24px) 0 clamp(6px, 0.8vw, 10px);
  color: var(--r-text-body);
}

.r-a-propos__inner p {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
  margin: 0 0 16px;
}

.r-a-propos__inner a {
  color: var(--r-teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.15s ease;
}
.r-a-propos__inner a:hover,
.r-a-propos__inner a:focus-visible {
  text-decoration-thickness: 2px;
}

.r-a-propos__inner ul,
.r-a-propos__inner ol {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
  margin: 0 0 16px;
  padding-left: 1.25em;
  list-style-position: outside;
}
.r-a-propos__inner li { margin: 0 0 6px; }
.r-a-propos__inner li > p { margin: 0 0 6px; }

.r-a-propos__inner strong { color: var(--r-text-dark); }
.r-a-propos__inner em     { font-style: italic; }

/* ─── Commande / Mon compte pages (#120 #121 #137) ─── */
.r-checkout {
  background: var(--r-bg);
  padding: clamp(24px, 4vw, 64px) clamp(20px, 3vw, 80px);
}

/* Old checkout grid rules removed — superseded by unified layout below (~line 9000) */

.r-checkout__card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(24px, 3vw, 40px);
}

.r-checkout__title {
  font-family: var(--r-font-heading);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 8px 0 16px;
  color: var(--r-text-dark);
}

.r-checkout__program {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  margin: 0 0 12px;
}

.r-checkout__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
}

.r-checkout__price-label {
  font-family: var(--r-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--r-teal);
}

.r-checkout__price-value {
  font-family: var(--r-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--r-text-dark);
  margin-left: auto;
}

.r-checkout__desc {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.6;
  margin: 0 0 16px;
}

.r-checkout__includes {
  list-style: none;
  padding: 0;
  margin: 0;
}

.r-checkout__includes li {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  line-height: 1.6;
  padding-left: 22px;
  position: relative;
  margin-bottom: 6px;
}

.r-checkout__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--r-teal);
  font-weight: 700;
}

.r-compte {
  background: var(--r-bg);
  padding: clamp(12px, 2vh, 24px) clamp(80px, 8vw, 160px) clamp(8px, 1.5vh, 16px);
}

.r-compte__inner {
  max-width: var(--r-container-standard);
  margin: 0 auto;
}

.r-compte__header {
  text-align: left;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.r-compte__intro {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  margin: 0;
}

.r-compte__card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(24px, 3vw, 40px);
}

/* (0,2,0) beats woocommerce widget background defaults (0,1,0). */
.r-checkout__card .woocommerce,
.r-compte__card .woocommerce {
  background: transparent;
}

/* WooCommerce order action buttons — smaller in table context (#280) */
.r-compte__inner .woocommerce-orders-table__cell-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.r-compte__inner .woocommerce-orders-table__cell-order-actions .r-btn,
.r-compte__inner .woocommerce-orders-table__cell-order-actions .button {
  padding: 6px 14px;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 1023.98px) {
  .r-checkout__inner { grid-template-columns: 1fr; }
  .r-checkout__right { position: static; }
}

@media (max-width: 480px) {
  .r-compte { padding-left: 16px; padding-right: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WooCommerce Neumorphic Overrides
   Applies the Réalisons design system to all WC pages:
   product, cart, checkout, my-account.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Global WC buttons ───
   Chained body.single-product / body.woocommerce-page (0,2,0+)
   beats Divi customizer .woocommerce button.button.alt (0,3,0). */
body.single-product .woocommerce .button,
body.single-product .woocommerce button.button,
body.single-product .woocommerce button.button.alt,
body.single-product .woocommerce a.button,
body.single-product .woocommerce a.button.alt,
body.single-product button.button.alt,
body.single-product .product button.button.alt,
body.woocommerce-page .woocommerce .button,
body.woocommerce-page .woocommerce button.button,
body.woocommerce-page .woocommerce button.button.alt,
body.woocommerce-page .woocommerce a.button,
body.woocommerce-page .woocommerce a.button.alt,
body.woocommerce-cart .woocommerce .button,
body.woocommerce-checkout .woocommerce .button,
body.woocommerce-checkout .woocommerce button.button {
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
  border-radius: var(--r-radius-btn);
  color: var(--r-teal);
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 14px;
  border: 1px solid rgba(40, 168, 191, 0.2);
  padding: 12px 28px;
  cursor: pointer;
  transition: box-shadow var(--r-transition), color var(--r-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.single-product .woocommerce .button:hover,
body.single-product .woocommerce button.button:hover,
body.single-product .woocommerce button.button.alt:hover,
body.single-product button.button.alt:hover,
body.single-product .product button.button.alt:hover,
body.woocommerce-page .woocommerce .button:hover,
body.woocommerce-page .woocommerce button.button:hover,
body.woocommerce-page .woocommerce button.button.alt:hover,
body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-checkout .woocommerce .button:hover {
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal-dark);
}

/* ─── WC notices — neumorphic alignment ─── */
html body .woocommerce-message.woocommerce-message,
html body .woocommerce-info.woocommerce-info {
  background: var(--r-bg) !important;
  border-radius: var(--r-radius-card) !important;
  box-shadow: var(--r-neu-card) !important;
  border: none !important;
  border-left: 4px solid var(--r-teal) !important;
  color: var(--r-text-dark) !important;
  font-family: var(--r-font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  padding: 18px 24px !important;
  margin-bottom: 20px !important;
}
html body .woocommerce-message::before,
html body .woocommerce-info::before {
  color: var(--r-teal) !important;
}
html body .woocommerce-info a,
html body .woocommerce-message a {
  color: var(--r-teal) !important;
  font-weight: 700;
  text-decoration: none;
}
html body .woocommerce-info a:hover,
html body .woocommerce-message a:hover {
  color: var(--r-teal-dark) !important;
}
html body .woocommerce-info a.button,
html body .woocommerce-info a.showlogin,
html body .woocommerce-info a.showcoupon {
  background: var(--r-bg) !important;
  color: var(--r-teal) !important;
  box-shadow: var(--r-neu-btn) !important;
  border: 1px solid var(--r-teal-a20) !important;
  border-radius: var(--r-radius-pill) !important;
  padding: 8px 20px !important;
  font-family: var(--r-font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-left: 8px !important;
  transition: box-shadow var(--r-transition) !important;
}
html body .woocommerce-info a.button:hover,
html body .woocommerce-info a.showlogin:hover,
html body .woocommerce-info a.showcoupon:hover {
  box-shadow: var(--r-neu-btn-hover) !important;
  color: var(--r-teal-dark) !important;
}

html body .woocommerce-error.woocommerce-error {
  background: var(--r-bg) !important;
  border-radius: var(--r-radius-card) !important;
  box-shadow: var(--r-neu-card) !important;
  border: none !important;
  border-left: 4px solid var(--r-orange) !important;
  color: var(--r-text-dark) !important;
  font-family: var(--r-font-body) !important;
  font-size: 14px !important;
  padding: 18px 24px !important;
}

/* ─── WC page background — unify with neumorphic bg ─── */
body.single-product,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.single-product #page-container,
body.woocommerce-page #page-container,
body.single-product .et-l,
body.woocommerce-page .et-l {
  background: var(--r-bg);
}

/* Remove Divi default header/footer shadow on WC pages */
body.single-product .et-l--header,
body.single-product .et-l--footer,
body.woocommerce-page .et-l--header,
body.woocommerce-page .et-l--footer {
  box-shadow: none;
  border-radius: 0;
}

/* ─── Single Product page ─── */
/* Hide ALL sidebar content on product pages (Divi widgets + native WC) */
body.single-product .widget-area,
body.single-product #secondary,
body.single-product .sidebar,
body.single-product .et_pb_widget.widget_search,
body.single-product .et_pb_widget.widget_block,
body.single-product .et_pb_widget.widget_recent_entries,
body.single-product .et_pb_widget.widget_recent_comments,
body.single-product .et_pb_extra_sidebar,
body.single-product .et_right_sidebar #sidebar {
  display: none;
}

body.single-product .content-area,
body.single-product #primary,
body.single-product #left-area,
body.single-product .et_pb_row {
  width: 100%;
  max-width: 100%;
  float: none;
}

/* Target only the real WC product div, not Divi's .et_builder_inner_content.product wrappers */
body.single-product .product.type-product {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(32px, 5vw, 64px);
  /* Equal 24px gutters on all 4 sides. */
  width: calc(100vw - 48px);
  max-width: 1080px;
  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);
  margin: 24px auto;
  /* Two-column layout: price block LEFT, description RIGHT. */
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.4fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
  overflow: hidden;
  box-sizing: border-box;
}

/* Left column — price block. Because .summary is wrapped by a
   .clearfix div, put that wrapper (display:contents) into grid col 1. */
body.single-product .product.type-product > .clearfix:has(.summary),
body.single-product .product.type-product > .summary {
  display: contents;
}
body.single-product div.product div.summary {
  grid-column: 1;
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Right column — description. Scrollable internally with fade-out
   mask at the bottom so clipped text fades out gracefully. */
body.single-product .product.type-product > .woocommerce-tabs {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: block;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
}
body.single-product .product.type-product > .summary,
body.single-product .product.type-product > .clearfix > .summary {
  grid-row: 1;
}

/* On product page only, let the .container that wraps the post content
   breathe to the viewport so the card can be truly centered. */
body.single-product .et-boc > div > .container,
html body.single-product .et-boc .container {
  max-width: 100%;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Flex-center only the wrappers that DIRECTLY contain the product card,
   not every .container/.clearfix on the site (which breaks header,
   footer and nav). Scoped to .et-l--post (Divi Theme Builder post body). */
body.single-product .et-l--post .et_builder_inner_content:has(> div.product),
body.single-product .et-l--post .clearfix:has(> div.product) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Strip Divi section/row/column padding INSIDE and AROUND the post
   body so the product card is truly centered + viewport-sized. */
body.single-product .et-l--post .et_pb_section,
body.single-product .et-l--post .et_pb_section .et_pb_row,
body.single-product .et-l--post .et_pb_section .et_pb_column,
body.single-product .et-l--post .et-l__post-content,
body.single-product .et-l--post .et_builder_inner_content,
body.single-product .et-l--post .clearfix,
body.single-product .et-l--post .container,
body.single-product .et-l--post > div,
body.single-product .et-l--post > div > div,
body.single-product .et-l--post .clearfix > div,
body.single-product .et-l--post .clearfix > div > div,
html body.single-product .et-l--post .clearfix > div,
html body.single-product .et-boc .clearfix > div,
html body.single-product .clearfix > div,
html body.single-product #main-content .clearfix > div,
html body.single-product .et-l--post .container,
html body.single-product #main-content .et-l--post .container,
html body.single-product #main-content > .container,
html body.single-product .et-boc > div > .container,
html body.single-product .et-boc > div,
html body.single-product #main-content > div {
  padding: 0;
  margin: 0;
}

/* Strip neumo from Divi inner_content wrappers that inherit .product class */
body.single-product .et_builder_inner_content.product {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  margin: 0;
}

body.single-product .product_title,
body.single-product .woocommerce div.product .product_title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--r-text-dark);
  padding-top: 50px;
  margin-bottom: 12px;
}

body.single-product .price {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--r-teal);
}

body.single-product .single_add_to_cart_button,
body.single-product button.single_add_to_cart_button.button.alt {
  width: 100%;
  margin-top: 16px;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
  border-radius: var(--r-radius-btn);
  border: 1px solid rgba(40, 168, 191, 0.2);
  color: var(--r-teal);
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 16px;
  padding: 14px 32px;
  cursor: pointer;
}
body.single-product .single_add_to_cart_button:hover,
body.single-product button.single_add_to_cart_button.button.alt:hover {
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal-dark);
}

body.single-product .woocommerce-breadcrumb {
  display: none;
}

body.single-product .related.products {
  display: none;
}

/* Hide product-meta and WooCommerce form decorations on single product
   and single post/article pages. Cart/checkout pages are left intact
   (scoped via body.single-product and body.single). */
body.single-product .product_meta,
body.single .product_meta,
body.single-product .woocommerce .quantity input.qty,
body.single-product .woocommerce-page .quantity input.qty,
body.single-product .woocommerce #content .quantity input.qty,
body.single-product .woocommerce-page #content .quantity input.qty,
body.single-product .woocommerce-cart table.cart td.actions .coupon .input-text,
body.single-product .woocommerce form .form-row input.input-text,
body.single-product .woocommerce form .form-row textarea,
body.single-product .et_pb_wc_cart_totals .select2-container--default .select2-selection--single,
body.single-product .et_pb_wc_checkout_billing .select2-container--default .select2-selection--single,
body.single-product .et_pb_wc_checkout_shipping .select2-container--default .select2-selection--single,
body.single .woocommerce .quantity input.qty,
body.single .woocommerce-page .quantity input.qty,
body.single .woocommerce #content .quantity input.qty,
body.single .woocommerce-page #content .quantity input.qty,
body.single .woocommerce-cart table.cart td.actions .coupon .input-text,
body.single .woocommerce form .form-row input.input-text,
body.single .woocommerce form .form-row textarea,
body.single .et_pb_wc_cart_totals .select2-container--default .select2-selection--single,
body.single .et_pb_wc_checkout_billing .select2-container--default .select2-selection--single,
body.single .et_pb_wc_checkout_shipping .select2-container--default .select2-selection--single {
  display: none;
}

/* Override the WooCommerce onsale badge text ("Promo !") with a custom
   label via ::before, hiding the default text. High specificity to beat
   Divi/theme styling. */
html body.woocommerce span.onsale,
html body.woocommerce-page span.onsale {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  text-indent: -9999px;
  background: rgba(238, 163, 42, 0.55) !important;
  background-color: rgba(238, 163, 42, 0.55) !important;
}
html body.woocommerce span.onsale::before,
html body.woocommerce-page span.onsale::before {
  content: "Offre valable jusqu'au 06.06.2026";
  display: block;
  font-size: 13px;
  font-family: var(--r-font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--r-white, #fff);
  line-height: 1;
  text-indent: 0;
  white-space: nowrap;
}

/* Remove margins on form.cart (and its clearfix pseudo-elements, quantity
   wrapper, and single add-to-cart button) — Divi/WC push extra spacing. */
html body.woocommerce div.product form.cart,
html body.woocommerce-page div.product form.cart,
html body.woocommerce div.product form.cart::after,
html body.woocommerce div.product form.cart::before,
html body.woocommerce-page div.product form.cart::after,
html body.woocommerce-page div.product form.cart::before,
html body.woocommerce div.product form.cart .quantity,
html body.woocommerce-page div.product form.cart .quantity,
html body.woocommerce div.product form.cart .single_add_to_cart_button,
html body.woocommerce-page div.product form.cart .single_add_to_cart_button {
  margin: 0 !important;
}

/* Hide related/upsell products on single-product pages.
   The woocommerce-tabs stays visible (description shown inside the
   card, below the CTA), only the tab navigation is hidden. */
body.single-product .related.products,
body.single-product .upsells.products,
body.single-product .woocommerce-tabs > ul.tabs,
body.single-product .woocommerce-Tabs-panel > h2:first-child {
  display: none;
}

/* Description panel — right column of the product card. Remove any
   inherited border/outline/shadow from WooCommerce/Divi.
   Content is clipped to fit the container — never overflows. */
html body.single-product .woocommerce-Tabs-panel,
html body.single-product .woocommerce div.product .woocommerce-tabs .panel,
html body.single-product .woocommerce div.product .woocommerce-tabs,
html body.single-product .woocommerce-tabs {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  text-align: left;
  font-size: 15px;
  line-height: 1.55;
  color: var(--r-text-body);
}
/* Inner panels height auto so the parent .woocommerce-tabs scroll works. */
html body.single-product .woocommerce-Tabs-panel,
html body.single-product .woocommerce div.product .woocommerce-tabs .panel {
  height: auto;
  overflow: visible;
}

/* Tighter spacing between description blocks so more content fits. */
html body.single-product .woocommerce-Tabs-panel > *:first-child {
  margin-top: 0;
}
html body.single-product .woocommerce-Tabs-panel p,
html body.single-product .woocommerce-Tabs-panel h2,
html body.single-product .woocommerce-Tabs-panel h3,
html body.single-product .woocommerce-Tabs-panel h4,
html body.single-product .woocommerce-Tabs-panel ul,
html body.single-product .woocommerce-Tabs-panel ol {
  margin: 0 0 0.5em 0;
}
html body.single-product .woocommerce-Tabs-panel h2,
html body.single-product .woocommerce-Tabs-panel h3 {
  font-size: 1em;
  font-weight: 700;
  color: var(--r-text-dark);
  margin-top: 0.6em;
}

/* Product images hidden — catalogue produits sans visuels. */
body.single-product .woocommerce div.product div.images,
body.single-product .woocommerce-product-gallery,
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image {
  display: none;
}

/* Summary block: centered inside the product card, no forced height.
   (0,4,0) beats the WooCommerce default `.woocommerce div.product div.summary`
   which sets float: right and width: 48%. */
body.single-product .woocommerce div.product div.summary,
body.single-product div.product div.summary {
  width: 100%;
  max-width: 600px;
  float: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Kill the .clearfix wrapper's block behaviour — it boxes the summary
   into a tiny column when float is disabled. */
body.single-product .clearfix:has(> div.product),
body.single-product .clearfix:has(div.summary),
body.single-product div.product > .clearfix {
  display: contents;
}

/* Category label */
body.single-product .posted_in {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-muted);
}

/* ─── My Account page ─── */

/* Hide sidebar widgets on ALL my-account pages (subpages too) */
body.woocommerce-account .widget-area,
body.woocommerce-account #secondary,
body.woocommerce-account .sidebar,
body.woocommerce-account .et_pb_widget.widget_search,
body.woocommerce-account .et_pb_widget.widget_block,
body.woocommerce-account .et_pb_widget.widget_recent_entries,
body.woocommerce-account .et_pb_widget.widget_recent_comments,
body.woocommerce-account .et_pb_extra_sidebar,
body.woocommerce-account .et_right_sidebar #sidebar {
  display: none;
}

body.woocommerce-account .content-area,
body.woocommerce-account #primary,
body.woocommerce-account #left-area,
body.woocommerce-account .et_pb_row {
  width: 100%;
  max-width: 100%;
  float: none;
}

/* Background unification for account pages */
body.woocommerce-account,
body.woocommerce-account #page-container,
body.woocommerce-account .et-l {
  background: var(--r-bg);
}

/* Strip neumo from Divi wrappers on account pages */
body.woocommerce-account .et_builder_inner_content {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
  margin: 0;
}

/* Account page title — caption style, not bold H1 */
body.woocommerce-account .entry-title,
body.woocommerce-account .woocommerce-MyAccount-content > h2 {
  font-family: var(--r-font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--r-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Account wrapper — centered with max-width */
body.woocommerce-account .woocommerce {
  max-width: 960px;
  margin: clamp(16px, 3vh, 32px) auto;
  padding: 0 clamp(16px, 3vw, 40px);
}
.woocommerce-MyAccount-navigation ul,
.woocommerce-MyAccount-navigation ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 16px;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
  border-radius: var(--r-radius-pill);
  color: var(--r-text-dark);
  font-family: var(--r-font-body);
  font-size: 13px;
  text-decoration: none;
  text-align: center;
  transition: box-shadow var(--r-transition), color var(--r-transition);
}

.woocommerce-MyAccount-navigation ul li a:hover {
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  color: var(--r-teal);
  box-shadow: var(--r-neu-btn-active);
}

.woocommerce-MyAccount-content {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  font-family: var(--r-font-body);
  color: var(--r-text-dark);
}

.woocommerce-MyAccount-content a {
  color: var(--r-teal);
}

/* ─── Cart page ─── */
body.woocommerce-cart .cart-empty.cart-empty {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(32px, 5vh, 64px) var(--r-card-padding);
  text-align: center;
  color: var(--r-text-muted);
  font-family: var(--r-font-body);
}

.woocommerce-cart .return-to-shop {
  text-align: center;
  margin-top: 20px;
}

/* ─── Checkout page ─── */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: var(--r-card-padding);
  margin-bottom: 20px;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border: 1px solid transparent;
  border-radius: var(--r-radius-input, 12px);
  padding: 10px 14px;
  font-family: var(--r-font-body);
  color: var(--r-text-dark);
  transition: border-color var(--r-transition);
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
  border-color: var(--r-teal-a40);
}

.woocommerce-checkout #place_order {
  width: 100%;
  font-size: 16px;
  padding: 14px 32px;
}

/* ─── Cookie banner (issue #129) ─── */
.r-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9998;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(16px, 2vw, 24px);
  animation: r-cookie-slide-in 280ms ease-out;
}

@keyframes r-cookie-slide-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.r-cookie-banner__inner {
  max-width: var(--r-container-page);
  margin: 0 auto;
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  flex-wrap: wrap;
}

.r-cookie-banner__text {
  flex: 1 1 360px;
}

.r-cookie-banner__title {
  font-family: var(--r-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 4px;
}

.r-cookie-banner__body {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  line-height: 1.55;
  margin: 0;
}

.r-cookie-banner__body a {
  color: var(--r-teal);
  text-decoration: underline;
}

.r-cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.r-cookie-banner__actions .r-btn {
  min-width: 130px;
}

.r-cookie-modal[hidden] { display: none; }

.r-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.r-cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 35, 0.55);
  backdrop-filter: blur(4px);
}

.r-cookie-modal__card {
  position: relative;
  max-width: 520px;
  width: 100%;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(24px, 3vw, 40px);
  max-height: 90vh;
  overflow-y: auto;
}

.r-cookie-modal__title {
  font-family: var(--r-font-heading);
  font-size: 18px;
  color: var(--r-text-dark);
  margin: 0 0 16px;
}

.r-cookie-modal__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.r-cookie-modal__list li {
  margin-bottom: 12px;
}

.r-cookie-modal__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
  cursor: pointer;
}

.r-cookie-modal__row--locked {
  cursor: not-allowed;
  opacity: 0.75;
}

.r-cookie-modal__row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--r-teal);
}

.r-cookie-modal__row span {
  flex: 1;
  font-family: var(--r-font-body);
}

.r-cookie-modal__row strong {
  display: block;
  font-size: 13px;
  color: var(--r-text-dark);
  margin-bottom: 2px;
}

.r-cookie-modal__row em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--r-text-body);
  line-height: 1.45;
}

.r-cookie-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .r-cookie-banner { left: 8px; right: 8px; bottom: 8px; }
  .r-cookie-banner__inner { flex-direction: column; align-items: stretch; }
  .r-cookie-banner__actions { flex-direction: column; }
  .r-cookie-banner__actions .r-btn { width: 100%; }
}

/* ─── Ambassadeur form — #114 additions (honeypot + privacy) ─── */
/* Honeypot — chained class (0,2,0) beats any base form input rule. */
.r-ambassadeur__hp.r-ambassadeur__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.r-ambassadeur__privacy {
  font-family: var(--r-font-body);
  font-size: 11px;
  color: var(--r-text-body);
  line-height: 1.5;
  margin: 4px 0 20px;
}

.r-ambassadeur__privacy a {
  color: var(--r-teal);
  text-decoration: underline;
}

/* ─── PageJobs form additions (#116) ─── */
/* Honeypot — chained class (0,2,0) beats any base form input rule. */
.r-jobs__hp.r-jobs__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.r-jobs__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 20px;
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  line-height: 1.5;
  cursor: pointer;
}

.r-jobs__consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--r-teal);
  flex-shrink: 0;
}

.r-jobs__consent a {
  color: var(--r-teal);
  text-decoration: underline;
}

/* ─── Single CPT templates (issue #125) ─── */
.r-single {
  background: var(--r-bg);
  padding: clamp(32px, 5vw, 80px) clamp(20px, 3vw, 80px);
}

.r-single__inner {
  max-width: var(--r-container-prose);
  margin: 0 auto;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(28px, 4vw, 56px);
}

.r-single__back {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--r-font-body);
  font-size: 12px;
}

.r-single__back a {
  color: var(--r-teal);
  text-decoration: none;
  letter-spacing: 0.4px;
}

.r-single__back a:hover {
  text-decoration: underline;
}

.r-single__header {
  margin-bottom: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--r-separator, rgba(0, 0, 0, 0.08));
}

.r-single__header--with-logo {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 32px);
}

.r-single__logo {
  flex: 0 0 auto;
  width: clamp(72px, 10vw, 120px);
  height: clamp(72px, 10vw, 120px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.r-single__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.r-single__title-block {
  flex: 1;
  min-width: 0;
}

.r-single__title {
  font-family: var(--r-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--r-text-dark);
  margin: 8px 0 12px;
  line-height: 1.15;
}

.r-single__legal-name {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  opacity: 0.7;
  margin: 0 0 12px;
  letter-spacing: 0.3px;
}

.r-single__lead {
  font-family: var(--r-font-body);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--r-text-body);
  line-height: 1.55;
  margin: 0;
}

.r-single__sub {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  opacity: 0.85;
  margin: 12px 0 0;
}

.r-single__deadline-passed {
  color: var(--r-text-body);
  opacity: 0.5;
  text-decoration: line-through;
}

.r-single__meta-card,
.r-single__guest,
.r-single__player {
  margin: clamp(20px, 2.5vw, 32px) 0;
  padding: clamp(16px, 2vw, 24px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
}

.r-single__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--r-separator, rgba(0, 0, 0, 0.05));
}

.r-single__meta:last-child {
  border-bottom: 0;
}

.r-single__meta-label {
  font-family: var(--r-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--r-teal);
}

.r-single__meta-value {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-dark);
}

.r-single__meta-value--strong {
  font-family: var(--r-font-heading);
  font-size: 18px;
  font-weight: 700;
}

.r-single__player audio {
  width: 100%;
  display: block;
}

.r-single__guest-name {
  font-family: var(--r-font-heading);
  font-size: 16px;
  color: var(--r-text-dark);
  margin: 6px 0 2px;
}

.r-single__guest-role {
  font-family: var(--r-font-body);
  font-size: 12px;
  color: var(--r-text-body);
  opacity: 0.85;
  margin: 0;
}

.r-single__body {
  font-family: var(--r-font-body);
  color: var(--r-text-body);
  line-height: 1.7;
  margin: clamp(20px, 2.5vw, 32px) 0;
}

.r-single__body p,
.r-single__body ul,
.r-single__body ol {
  margin: 0 0 16px;
}

/* Section headings inside CPT single body (service / partenaire fiches).
   All heading levels share the same rule so Divi-rendered <h2> / <h3> /
   <h4> / <h5> / <h6> all pick up `--r-text-dark`. Without this the
   browser inherited `--r-text-body` (medium grey) from .r-single__body,
   which became invisible on dark-mode backgrounds (#1A202C).
   Closes #366. */
.r-single__body h2,
.r-single__body h3,
.r-single__body h4,
.r-single__body h5,
.r-single__body h6,
.r-single__section-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: clamp(24px, 3vw, 40px) 0 12px;
  line-height: 1.3;
}

.r-single__body h2,
.r-single__section-title {
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
}

.r-single__body h3 {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  margin: clamp(20px, 2.5vw, 32px) 0 8px;
}

.r-single__body h4 {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  margin: clamp(16px, 2vw, 24px) 0 8px;
}

.r-single__body h5,
.r-single__body h6 {
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  margin: clamp(12px, 1.5vw, 20px) 0 6px;
}

.r-single__body strong {
  color: var(--r-text-dark);
}

.r-single__body a {
  color: var(--r-teal);
  text-decoration: underline;
}

.r-single__cta {
  margin: clamp(20px, 3vw, 32px) 0 0;
  text-align: center;
}

.r-single__cta-card {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: clamp(20px, 3vw, 32px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  text-align: center;
}

.r-single__cta-card--closed {
  opacity: 0.85;
}

.r-single__cta-eyebrow {
  font-family: var(--r-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--r-teal);
  margin: 0 0 8px;
}

.r-single__cta-text {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  line-height: 1.55;
  margin: 0 0 16px;
}

.r-single__cta-privacy {
  font-family: var(--r-font-body);
  font-size: 11px;
  color: var(--r-text-body);
  opacity: 0.75;
  margin: 12px 0 0;
}

.r-single__cta-privacy a {
  color: var(--r-teal);
  text-decoration: underline;
}

.r-single__transcript {
  margin: clamp(20px, 3vw, 32px) 0 0;
  padding: clamp(16px, 2vw, 24px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
}

.r-single__transcript summary {
  font-family: var(--r-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--r-teal);
  cursor: pointer;
  list-style: none;
}

.r-single__transcript summary::-webkit-details-marker {
  display: none;
}

.r-single__transcript summary::after {
  content: " ↓";
}

.r-single__transcript[open] summary::after {
  content: " ↑";
}

.r-single__transcript-body {
  margin-top: 14px;
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  line-height: 1.7;
}

@media (max-width: 480px) {
  .r-single__header--with-logo { flex-direction: column; align-items: stretch; }
  .r-single__logo { width: 80px; height: 80px; }
}

/* ─── Fixed shell layout — issue #171 ────────────────────────────────
   No browser scrollbar on any page. The viewport is treated as a
   fixed shell: html/body don't scroll, the content area inside
   #et-main-area scrolls internally if it overflows.

   Layout cascade:
     html, body { height: 100dvh; overflow: hidden }
     #page-container { height: 100dvh; flex column }
       .et-boc { height: 100% }
         header.et-l--header   (auto height, fixed at top)
         #et-main-area         (flex 1, scroll internally)
           [page content]
           footer.et-l--footer (auto height, sits at bottom of scroll
                                viewport when content is short, scrolls
                                naturally with content when long)

   No hardcoded chrome heights — the layout cascades via flex.
   ─────────────────────────────────────────────────────────────────── */
html,
body {
  height: 100dvh;
  overflow: hidden;
  margin: 0;
}

/* Podcast page: unlock viewport — page must scroll naturally,
   unlike the immersive hero/tarifs/catalogue/faq shells.
   Flex column + footer margin-top:auto keeps the footer sticky at
   the bottom when content is short. */
html:has(.r-section-podcast),
html:has(.r-section-podcast) body {
  height: auto;
  min-height: 100dvh;
  overflow: auto;
}
html:has(.r-section-podcast) #page-container,
html:has(.r-section-podcast) .et-boc {
  height: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
html:has(.r-section-podcast) .et-l--footer,
html:has(.r-section-podcast) #et-footer-outer,
html:has(.r-section-podcast) .r-footer {
  margin-top: auto;
}

/* When the WordPress admin bar is present, deduct its measured height
   so the shell still fits exactly in the viewport. The height is
   pushed into --r-admin-bar-h at runtime by chrome-measure.js. */
body.admin-bar {
  height: calc(100dvh - var(--r-admin-bar-h));
}

#page-container,
.et-boc {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.et-boc > header.et-l--header {
  flex: 0 0 auto;
}

/* The main area takes the remaining height and scrolls its own content.
   This is the only place vertical scroll lives. */
.et-boc > #et-main-area {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide the inner scrollbar visually but keep scrolling enabled */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.et-boc > #et-main-area::-webkit-scrollbar {
  display: none;
}

/* Footer is moved out of #et-main-area into .et-boc by the
   footer-relocate.js shim (#173) so it stays visible at all times,
   just like the header. Once relocated, it's a direct child of
   .et-boc and is therefore OUTSIDE the scrollable #et-main-area. */
.et-boc > .et-l--footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 9;
  background: var(--r-bg);
}

/* Header stays visible at the top by virtue of being outside the
   #et-main-area scroll container; raise its z-index for safety. */
.et-boc > header.et-l--header {
  position: relative;
  z-index: 10;
}

/* The page content above the footer flex 1 so the footer naturally
   lands at the bottom when content is short. We cascade flex column +
   min-height 0 down through every wrapper Divi 5 Theme Builder
   inserts between #et-main-area and the actual hero module:

     #et-main-area
     └ #main-content
       └ <article>
         └ .entry-content
           └ .et-l.et-l--post           (Theme Builder layout wrap)
             └ .et_builder_inner_content (Theme Builder inner)
               └ .et_pb_section          (the section)
                 └ .et_pb_row
                   └ .et_pb_column
                     └ .r-* hero        (min-height: 100%)

   Without this cascade, the inner column has a natural content height
   that exceeds the scroll viewport by a few pixels (because of
   subpixel rounding) and leaks a "petit jeu" scroll into
   #et-main-area. min-height: 0 + flex 1 1 auto on each link of the
   chain forces every wrapper to size to the available viewport
   instead of to the natural content. */
#et-main-area > #main-content,
#et-main-area > #main-content > article,
#et-main-area > #main-content > article > .entry-content,
#et-main-area > #main-content > article > .entry-content > .et-l--post,
#et-main-area > #main-content > article > .entry-content > .et-l--post > .et_builder_inner_content,
#et-main-area > .et_pb_section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* The page sections themselves (whether nested in the Theme Builder
   layout or rendered directly) flex 1 so the single-section pages
   (/tarifs, /podcast, /faq, /catalogue) have their hero stretch to
   fill the scroll viewport. Divi sometimes renders sections as
   `display: block` (no `et_flex_section` class) — we force them to
   flex column so the inner row/column chain gets a real height.
   Multi-section pages (/accueil) only get the FIRST section
   stretched; subsequent sections take their natural content height
   and stack below, scrolling normally. */
/* Specificity (2,5,1) — already overwhelmingly stronger than any
   normal Divi class chain. No !important required. */
#et-main-area > #main-content > article > .entry-content > .et-l--post > .et_builder_inner_content > .et_pb_section:first-of-type {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* The Divi row and column inside the stretched section also flex
   so the .r-* hero's `min-height: 100%` has a real height to
   resolve against. */
#et-main-area > #main-content > article > .entry-content > .et-l--post > .et_builder_inner_content > .et_pb_section:first-of-type > .et_pb_row,
#et-main-area > #main-content > article > .entry-content > .et-l--post > .et_builder_inner_content > .et_pb_section:first-of-type > .et_pb_row > .et_pb_column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}

/* The .r-* hero module needs flex too — Divi marks it with both
   `.et_pb_module` AND the realisons class. Scope this strictly to
   the direct first-of-type section's first row+column so it never
   bleeds into subsequent sections (multi-section pages must keep
   their normal block flow). */
#et-main-area > #main-content > article > .entry-content > .et-l--post > .et_builder_inner_content > .et_pb_section:first-of-type > .et_pb_row > .et_pb_column > .et_pb_module {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Footer-link pages: cascade flex 1 down through the default WP
   template wrappers so the .r-* block can stretch + container width
   override to break out of the default 1300px max-width. */
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) #main-content,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) #content-area,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) .container,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) #left-area,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) article.page,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) .entry-content {
  /* Each selector in this :is() group has specificity (1,3,1) — way
     above the (1,0,1) maximum Divi defines for #left-area chains. */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  float: none;
}

body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) #sidebar,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) .et_post_meta_wrapper,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) .entry-title,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) header.entry-header,
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) .et_pb_post_content {
  /* Selector specificity (1,3,1) wins natively without !important. */
  display: none;
}

/* Prevent any horizontal overflow showing on the right edge by
   ensuring the WP wrappers strictly clip to viewport width. */
body.page:is(
  :has(.r-merci), :has(.r-legal), :has(.r-404), :has(.r-reservation),
  :has(.r-checkout), :has(.r-compte), :has(.r-single), :has(.r-landing)
) {
  overflow-x: hidden;
}

/* Override the white background that Divi sets on #main-content via:
     #main-content { background: #fff }   (specificity 1,0,0)
   from both the inline runtime style AND the Theme Builder customizer
   stylesheet. We use `html #main-content` (specificity 1,0,1) which
   strictly beats (1,0,0) without any !important. The bg becomes
   transparent so the body's --r-bg shows through and the page reads
   as one continuous off-white surface (the only "card" styling lives
   on .r-merci__inner / .r-legal__inner / etc via neumorphic shadow). */
html #main-content {
  background-color: transparent;
}

/* Kill the vertical separator Divi draws inside .container::before
   on every page (it's used for sidebar layouts which we never use).
   The pseudo is positioned absolutely with bg #e2e2e2 and reads as
   a thin grey "ligne noire" in the middle of the card area.
   Specificity (0,1,2) > Divi's (0,1,1). */
body .container::before,
body .container::after {
  display: none;
  content: none;
}

/* The .r-* blocks stretch inside their parent flex column. */
.r-merci,
.r-legal,
.r-404,
.r-reservation,
.r-checkout,
.r-compte,
.r-single {
  flex: 1 1 auto;
}

/* Wider max-widths on the inner cards so they match the site DA.
   All footer-link pages share the same page container width as the
   main pages (defined once in realisons-tokens.css). */
.r-merci__inner,
.r-404__inner,
.r-reservation__inner,
.r-single__inner {
  max-width: var(--r-container-page);
}

/* Cap legal long-form prose for line-length comfort even though the
   visual card is wider. */
.r-legal__inner > * {
  max-width: var(--r-container-prose);
  margin-left: auto;
  margin-right: auto;
}

.r-single__body,
.r-single__lead {
  max-width: var(--r-container-prose-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Heros: stretch to match the height of the scroll viewport so they
   visually fill the screen on landing. The shell is overflow: hidden
   on html/body and the footer is sticky bottom 0, so any overflow
   from the hero scrolls invisibly inside #et-main-area without
   showing a browser scrollbar. */
.r-hero,
.r-tarifs-hero,
.r-faq,
.r-section-podcast,
.r-section-catalogue {
  min-height: 100%;
}

/* ════════════════════════════════════════════════════════════════════════
   #261 — CPT archive landing pages (/partenaires/, /talents/)

   Uses the same token language as .r-section-catalogue so the grid feels
   consistent with the rest of the MVP. Every color / shadow / spacing is
   a var(--r-*) token — no hardcoded values, dark mode safe.
   ════════════════════════════════════════════════════════════════════════ */

.r-archive {
  background: var(--r-bg);
  min-height: 100%;
  width: 100%;
  padding: clamp(12px, 2vh, 24px) clamp(16px, 2vw, 32px) clamp(8px, 1.5vh, 16px);
  box-sizing: border-box;
}

.r-archive__inner {
  margin: 0 auto;
}

.r-archive__header {
  text-align: left;
  margin-bottom: clamp(24px, 4vh, 48px);
}

.r-archive__eyebrow {
  margin: 0 0 8px;
}

.r-archive__subtitle {
  margin: 0;
  color: var(--r-text-muted);
}

/* Card grid — 3 cols desktop, 2 cols tablet, 1 col mobile */
.r-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(32px, 5vh, 64px);
}

/* Partenaires variant — 4 columns on desktop, logo-centric cards. */
.r-archive__grid--partenaires {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1279.98px) {
  .r-archive__grid--partenaires { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023.98px) {
  .r-archive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .r-archive__grid--partenaires { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .r-archive__grid {
    grid-template-columns: 1fr;
  }
  .r-archive__grid--partenaires { grid-template-columns: 1fr; }
}

/* Partenaire card — whole card is a clickable link to the slug page. */
.r-archive__card--partenaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(18px, 2vw, 28px);
  text-decoration: none;
  color: inherit;
  min-height: 200px;
  text-align: center;
}
.r-archive__card--partenaire .r-archive__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  overflow: hidden;
}
.r-archive__card--partenaire .r-archive__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.r-archive__logo--placeholder {
  font-family: var(--r-font-heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--r-teal);
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: 50%;
  width: 72px !important;
  height: 72px !important;
}
.r-archive__card--partenaire .r-archive__card-title {
  font-size: 16px;
  margin: 0;
  color: var(--r-text-dark);
}

.r-archive__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vw, 24px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  transition: box-shadow var(--r-transition), transform var(--r-transition);
}

.r-archive__card:hover {
  box-shadow: var(--r-neu-card-hover);
  transform: translateY(-3px);
}

.r-archive__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 10px;
  font-family: var(--r-font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--r-teal);
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
}

.r-archive__badge--poste { color: var(--r-orange, var(--r-teal)); }
.r-archive__badge--juridique, .r-archive__badge--comptable, .r-archive__badge--finance { color: var(--r-purple, var(--r-teal)); }
.r-archive__badge--marketing, .r-archive__badge--digital { color: var(--r-teal); }
.r-archive__badge--rh { color: var(--r-green, var(--r-teal)); }

.r-archive__logo {
  width: 100%;
  max-width: 160px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.r-archive__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.r-archive__card-title {
  margin: 0;
  color: var(--r-text-dark);
}

.r-archive__legal-name {
  margin: 0;
  color: var(--r-text-muted);
  font-size: 12px;
}

.r-archive__location {
  margin: 0;
  color: var(--r-text-muted);
}

.r-archive__card-desc {
  margin: 4px 0;
  color: var(--r-text-body);
  font-size: 14px;
  line-height: 1.55;
}

.r-archive__card-link {
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
  color: var(--r-teal);
  font-family: var(--r-font-body);
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow var(--r-transition);
}

.r-archive__card-link:hover {
  box-shadow: var(--r-neu-btn-hover, var(--r-neu-card));
}

.r-archive__card-link:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

.r-archive__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--r-text-muted);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
}

/* Closing CTA section — mirrors the soft card style of .r-archive__empty */
.r-archive__cta {
  margin-top: clamp(32px, 5vh, 64px);
  padding: clamp(24px, 4vh, 48px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
  text-align: center;
}

.r-archive__cta-title {
  margin: 0 0 12px;
  color: var(--r-text-dark);
}

.r-archive__cta-body {
  margin: 0 auto 20px;
  max-width: 560px;
  color: var(--r-text-body);
}

/* ════════════════════════════════════════════════════════════════════════
   #127 — ID Reviews widget placeholder
   ════════════════════════════════════════════════════════════════════════ */

.r-idreviews {
  margin: clamp(16px, 2vh, 24px) 0;
}

.r-idreviews--placeholder {
  padding: clamp(16px, 2vw, 24px);
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-inner);
  text-align: center;
}

.r-idreviews__title {
  margin: 0 0 8px;
  font-family: var(--r-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--r-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.r-idreviews__body {
  margin: 0;
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
}

.r-idreviews--footer.r-idreviews--placeholder {
  padding: 12px 16px;
}

.r-idreviews--footer .r-idreviews__title {
  font-size: 11px;
}

.r-idreviews--footer .r-idreviews__body {
  font-size: 11px;
}

/* ─── Info sections (partenaires + ambassadeur) ─────────────────────────
   Shared layout for "avantages / fonctionnement / profils / conditions"
   blocks. Identical visual design on both pages.
   ──────────────────────────────────────────────────────────────────── */
.r-info-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(32px, 5vh, 56px) 0;
}
@media (max-width: 767.98px) {
  .r-info-sections { grid-template-columns: 1fr; }
}

.r-info-section {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-info-section__title {
  font-family: var(--r-font-heading);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0;
}

.r-info-section__list,
.r-info-section .r-info-section__list,
ul.r-info-section__list {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  padding-left: 0 !important;
  padding: 0 !important;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.r-info-section__list > li {
  list-style: none !important;
}
.r-info-section__list > li::marker {
  content: '';
  color: transparent;
}
.r-info-section__item {
  position: relative;
  padding-left: 22px;
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-text-body);
}
.r-info-section__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r-teal);
  box-shadow: var(--r-neu-btn-sm);
}

.r-info-section__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.r-info-section__step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.r-info-section__step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: 50%;
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--r-teal);
}
.r-info-section__step-body { flex: 1; }
.r-info-section__step-title {
  font-family: var(--r-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 4px;
}
.r-info-section__step-detail {
  font-family: var(--r-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--r-text-body);
  margin: 0;
}

.r-info-section__note {
  font-family: var(--r-font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--r-text-muted);
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ─── Final form section (ambassadeur / partenaire / talent / contact) ──
   Shared neumorphic wrapper around a FluentForm shortcode. Same visual
   language as .r-info-section. All inputs styled to match the site
   design system.
   ───────────────────────────────────────────────────────────────────── */
.r-final-form-section {
  margin: clamp(32px, 5vh, 64px) 0;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(24px, 4vw, 48px);
}
.r-final-form-section__inner {
  max-width: 720px;
  margin: 0 auto;
}
.r-final-form-section__header {
  text-align: center;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.r-final-form-section__title {
  font-family: var(--r-font-heading);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 8px 0 12px;
}
.r-final-form-section__subtitle {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--r-text-body);
  margin: 0 auto;
  max-width: 560px;
}

/* FluentForm overrides — neumorphic inputs inside the final form section */
.r-final-form-section .fluentform .ff-default .ff-el-input--content input[type="text"],
.r-final-form-section .fluentform .ff-default .ff-el-input--content input[type="email"],
.r-final-form-section .fluentform .ff-default .ff-el-input--content input[type="tel"],
.r-final-form-section .fluentform .ff-default .ff-el-input--content input[type="url"],
.r-final-form-section .fluentform .ff-default .ff-el-input--content select,
.r-final-form-section .fluentform .ff-default .ff-el-input--content textarea,
.r-final-form-section .fluentform input[type="text"],
.r-final-form-section .fluentform input[type="email"],
.r-final-form-section .fluentform input[type="tel"],
.r-final-form-section .fluentform input[type="url"],
.r-final-form-section .fluentform select,
.r-final-form-section .fluentform textarea {
  background: var(--r-bg) !important;
  box-shadow: var(--r-neu-inner) !important;
  border: none !important;
  border-radius: var(--r-radius-input, 8px) !important;
  padding: 10px 14px !important;
  font-family: var(--r-font-body) !important;
  font-size: 14px !important;
  color: var(--r-text-body) !important;
  transition: box-shadow var(--r-transition) !important;
}
.r-final-form-section .fluentform input:focus,
.r-final-form-section .fluentform select:focus,
.r-final-form-section .fluentform textarea:focus {
  outline: 2px solid var(--r-teal) !important;
  outline-offset: 2px !important;
}
.r-final-form-section .fluentform .ff-el-input--label label,
.r-final-form-section .fluentform label {
  font-family: var(--r-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--r-text-dark) !important;
  margin-bottom: 6px !important;
}
.r-final-form-section .fluentform .ff-btn-submit,
.r-final-form-section .fluentform button[type="submit"] {
  background: var(--r-bg) !important;
  color: var(--r-teal) !important;
  box-shadow: var(--r-neu-btn) !important;
  border: 1px solid rgba(40, 168, 191, 0.2) !important;
  border-radius: var(--r-radius-pill) !important;
  padding: 12px 32px !important;
  font-family: var(--r-font-heading) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: box-shadow var(--r-transition) !important;
}
.r-final-form-section .fluentform .ff-btn-submit:hover,
.r-final-form-section .fluentform button[type="submit"]:hover {
  box-shadow: var(--r-neu-btn-hover) !important;
}
.r-final-form-section .fluentform .ff-btn-submit:active,
.r-final-form-section .fluentform button[type="submit"]:active {
  box-shadow: var(--r-neu-btn-active) !important;
}

/* ─── Podcast platforms (YouTube / Apple / Spotify icons) ───────────── */
.r-podcast__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  flex-wrap: wrap;
}
.r-podcast__header-text { flex: 1 1 300px; min-width: 0; }
.r-podcast__platforms {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.r-podcast__platform {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--r-bg);
  box-shadow: var(--r-neu-btn);
  border-radius: 50%;
  color: var(--r-teal);
  text-decoration: none;
  transition: box-shadow var(--r-transition), color var(--r-transition);
}
.r-podcast__platform:hover {
  box-shadow: var(--r-neu-btn-hover);
  color: var(--r-teal-dark);
}
.r-podcast__platform:active {
  box-shadow: var(--r-neu-btn-active);
}
.r-podcast__platform:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* ─── Archive section separators (partenaires / talents) ─────────────── */
.r-archive__sep {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(40, 168, 191, 0.25) 20%,
    rgba(40, 168, 191, 0.25) 80%,
    transparent 100%
  );
  margin: clamp(32px, 5vh, 56px) 0;
}

/* ─── Align ambassadeur + contact layouts with archive (parte/talent) ── */
.r-ambassadeur .r-info-sections,
.r-ambassadeur .r-final-form-section,
.r-contact .r-info-sections,
.r-contact .r-final-form-section,
.r-archive .r-info-sections,
.r-archive .r-final-form-section {
  margin-top: clamp(32px, 5vh, 56px);
  margin-bottom: clamp(32px, 5vh, 56px);
}

/* Visible separator on all 4 pages — parte/talent/amba/contact */
.r-ambassadeur .r-archive__sep,
.r-contact .r-archive__sep,
.r-archive .r-archive__sep {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(40, 168, 191, 0.25) 20%,
    rgba(40, 168, 191, 0.25) 80%,
    transparent 100%
  );
  margin: clamp(32px, 5vh, 56px) 0;
  width: 100%;
}

/* ─── File input styling — neumo, match form inputs ─────────────────── */
.r-final-form-section .fluentform input[type="file"],
.r-contact .fluentform input[type="file"],
.r-ambassadeur input[type="file"],
body.single-product input[type="file"] {
  background: var(--r-bg) !important;
  box-shadow: var(--r-neu-inner) !important;
  border: none !important;
  border-radius: var(--r-radius-input, 8px) !important;
  padding: 10px 14px !important;
  font-family: var(--r-font-body) !important;
  font-size: 14px !important;
  color: var(--r-text-body) !important;
  cursor: pointer;
}
/* Style the "Choose File" native button inside the input */
.r-final-form-section .fluentform input[type="file"]::file-selector-button,
.r-final-form-section .fluentform input[type="file"]::-webkit-file-upload-button,
body.single-product input[type="file"]::file-selector-button {
  background: var(--r-bg);
  color: var(--r-teal);
  box-shadow: var(--r-neu-btn);
  border: 1px solid rgba(40, 168, 191, 0.2);
  border-radius: var(--r-radius-pill);
  padding: 6px 16px;
  margin-right: 12px;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: box-shadow var(--r-transition);
}
.r-final-form-section .fluentform input[type="file"]::file-selector-button:hover {
  box-shadow: var(--r-neu-btn-hover);
}

/* Timeline step — button-look stripping handled by existing rule above
   at line ~1202. Only add focus-visible for a11y. */
.r-hero > .r-timeline .r-timeline__step:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── FluentForm upload button — align with neumo teal button design ── */
.fluentform .ff_upload_btn.ff-btn,
.fluentform a.ff_upload_btn.ff-btn,
.fluentform .ff_upload_btn {
  background: var(--r-bg) !important;
  color: var(--r-teal) !important;
  box-shadow: var(--r-neu-btn) !important;
  border: 1px solid rgba(40, 168, 191, 0.2) !important;
  border-radius: var(--r-radius-pill) !important;
  padding: 10px 24px !important;
  font-family: var(--r-font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: box-shadow var(--r-transition), color var(--r-transition) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fluentform .ff_upload_btn.ff-btn:hover,
.fluentform a.ff_upload_btn.ff-btn:hover {
  box-shadow: var(--r-neu-btn-hover) !important;
  color: var(--r-teal-dark) !important;
}
.fluentform .ff_upload_btn.ff-btn:active {
  box-shadow: var(--r-neu-btn-active) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   WooCommerce /panier/ — neumo alignment with site design
   Applies to desktop + responsive via clamp() values.
   ═══════════════════════════════════════════════════════════════════════ */
body.woocommerce-cart {
  background: var(--r-bg);
}
body.woocommerce-cart .woocommerce {
  max-width: 960px;
  margin: clamp(24px, 4vh, 48px) auto;
  padding: clamp(16px, 3vw, 32px);
  box-sizing: border-box;
}

/* Cart table — neumo card */
body.woocommerce-cart .woocommerce-cart-form table.shop_table,
body.woocommerce-cart .shop_table {
  background: var(--r-bg);
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(12px, 2vw, 24px);
  border-collapse: separate;
  border-spacing: 0;
  border: none;
}
body.woocommerce-cart .shop_table thead th,
body.woocommerce-cart .shop_table tbody td {
  border: none;
  padding: 12px 8px;
  font-family: var(--r-font-body);
  color: var(--r-text-body);
}
body.woocommerce-cart .shop_table thead th {
  font-family: var(--r-font-heading);
  font-weight: 700;
  color: var(--r-text-dark);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(40, 168, 191, 0.15);
}
body.woocommerce-cart .shop_table tbody tr + tr td {
  border-top: 1px solid rgba(40, 168, 191, 0.08);
}
body.woocommerce-cart .product-thumbnail img {
  max-width: 60px;
  border-radius: var(--r-radius-input, 8px);
  box-shadow: var(--r-neu-inner);
}
body.woocommerce-cart .product-name a {
  color: var(--r-text-dark);
  font-weight: 700;
  text-decoration: none;
}
body.woocommerce-cart .product-name a:hover { color: var(--r-teal); }
body.woocommerce-cart .amount {
  font-family: var(--r-font-heading);
  font-weight: 700;
  color: var(--r-teal);
}
body.woocommerce-cart a.remove {
  color: var(--r-text-muted) !important;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  transition: color var(--r-transition);
}
body.woocommerce-cart a.remove:hover {
  color: var(--r-orange) !important;
  background: transparent !important;
}

/* Coupon + Update cart actions row */
body.woocommerce-cart .cart .actions {
  padding: clamp(16px, 2vh, 24px) 8px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
body.woocommerce-cart .coupon {
  display: flex;
  gap: 8px;
  align-items: center;
}
body.woocommerce-cart .coupon input.input-text {
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border: none;
  border-radius: var(--r-radius-pill);
  padding: 8px 16px;
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  min-width: 180px;
}
body.woocommerce-cart .woocommerce button.button,
body.woocommerce-cart .woocommerce input.button,
body.woocommerce-cart .woocommerce a.button {
  background: var(--r-bg) !important;
  color: var(--r-teal) !important;
  box-shadow: var(--r-neu-btn) !important;
  border: 1px solid rgba(40, 168, 191, 0.2) !important;
  border-radius: var(--r-radius-pill) !important;
  padding: 10px 24px !important;
  font-family: var(--r-font-heading) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: box-shadow var(--r-transition), color var(--r-transition) !important;
}
body.woocommerce-cart .woocommerce button.button:hover,
body.woocommerce-cart .woocommerce a.button:hover {
  box-shadow: var(--r-neu-btn-hover) !important;
  color: var(--r-teal-dark) !important;
}
body.woocommerce-cart .woocommerce button.button.alt,
body.woocommerce-cart .woocommerce a.button.alt,
body.woocommerce-cart .checkout-button {
  background: var(--r-teal) !important;
  color: #fff !important;
  border-color: var(--r-teal) !important;
}
body.woocommerce-cart .woocommerce button.button.alt:hover,
body.woocommerce-cart .checkout-button:hover {
  background: var(--r-teal-dark) !important;
  color: #fff !important;
}

/* Cart totals — neumo card */
body.woocommerce-cart .cart_totals {
  background: var(--r-bg);
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(16px, 2.5vw, 28px);
  margin-top: clamp(20px, 3vh, 32px);
}
body.woocommerce-cart .cart_totals h2 {
  font-family: var(--r-font-heading);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 16px;
}
body.woocommerce-cart .cart_totals table {
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  border: none;
  padding: 10px 0;
  color: var(--r-text-body);
}
body.woocommerce-cart .cart_totals table tr + tr th,
body.woocommerce-cart .cart_totals table tr + tr td {
  border-top: 1px solid rgba(40, 168, 191, 0.08);
}
body.woocommerce-cart .cart_totals .order-total .amount {
  font-size: 22px;
}
body.woocommerce-cart .wc-proceed-to-checkout { margin-top: 20px; }

/* Empty cart message */
body.woocommerce-cart .cart-empty.cart-empty {
  background: var(--r-bg);
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(24px, 4vw, 48px);
  color: var(--r-text-body);
  text-align: center;
  border: none;
  font-family: var(--r-font-body);
  font-size: 15px;
  line-height: 1.55;
}

/* Responsive — single column stacking on mobile */
@media (max-width: 767.98px) {
  body.woocommerce-cart .shop_table,
  body.woocommerce-cart .shop_table thead,
  body.woocommerce-cart .shop_table tbody,
  body.woocommerce-cart .shop_table tr,
  body.woocommerce-cart .shop_table th,
  body.woocommerce-cart .shop_table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  body.woocommerce-cart .shop_table thead { display: none; }
  body.woocommerce-cart .shop_table tbody tr {
    background: var(--r-bg);
    box-shadow: var(--r-neu-inner);
    border-radius: var(--r-radius-input, 8px);
    padding: 12px;
    margin-bottom: 12px;
  }
  body.woocommerce-cart .shop_table tbody td {
    text-align: right;
    padding: 6px 0;
    border-top: none !important;
    position: relative;
  }
  body.woocommerce-cart .shop_table tbody td::before {
    content: attr(data-title);
    float: left;
    font-family: var(--r-font-heading);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--r-text-muted);
  }
  body.woocommerce-cart .cart .actions {
    flex-direction: column;
    align-items: stretch;
  }
  body.woocommerce-cart .coupon {
    flex-direction: column;
    width: 100%;
  }
  body.woocommerce-cart .coupon input.input-text {
    width: 100%;
  }
}

/* ═══ /panier/ Divi wrappers neutralization + WC block cart neumo ═══ */
body.woocommerce-cart .et_pb_section,
body.woocommerce-cart .et_pb_row,
body.woocommerce-cart .et_pb_column,
body.woocommerce-cart #main-content .container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
}

/* WooCommerce Block-based cart (wc-block-*) — neumo alignment */
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wp-block-woocommerce-cart {
  max-width: 960px;
  margin: clamp(24px, 4vh, 48px) auto !important;
  padding: clamp(16px, 3vw, 32px) !important;
  background: var(--r-bg);
  color: var(--r-text-body);
}
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wp-block-woocommerce-cart-items-block {
  background: var(--r-bg) !important;
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(12px, 2vw, 24px) !important;
}
body.woocommerce-cart .wc-block-cart-items__row,
body.woocommerce-cart .wc-block-cart-items__header,
body.woocommerce-cart .wc-block-cart-items table {
  border: none !important;
  background: transparent !important;
}
body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-cart .wp-block-woocommerce-cart-totals-block {
  background: var(--r-bg) !important;
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(16px, 2.5vw, 28px) !important;
  margin-top: clamp(20px, 3vh, 32px) !important;
}
body.woocommerce-cart .wc-block-components-button,
body.woocommerce-cart .wc-block-proceed-to-checkout,
body.woocommerce-cart .wc-block-cart__submit-button {
  background: var(--r-teal) !important;
  color: #fff !important;
  border-radius: var(--r-radius-pill) !important;
  padding: 12px 28px !important;
  font-family: var(--r-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  box-shadow: var(--r-neu-btn) !important;
  border: 1px solid var(--r-teal) !important;
  transition: box-shadow var(--r-transition), background var(--r-transition) !important;
}
body.woocommerce-cart .wc-block-components-button:hover,
body.woocommerce-cart .wc-block-cart__submit-button:hover {
  background: var(--r-teal-dark) !important;
  box-shadow: var(--r-neu-btn-hover) !important;
}
body.woocommerce-cart .wc-block-components-totals-item__value,
body.woocommerce-cart .wc-block-formatted-money-amount {
  font-family: var(--r-font-heading) !important;
  color: var(--r-teal) !important;
  font-weight: 700 !important;
}
body.woocommerce-cart .wc-block-components-totals-item__label {
  font-family: var(--r-font-body) !important;
  color: var(--r-text-body) !important;
}

/* Empty cart block */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
body.woocommerce-cart .wc-block-cart__empty-cart__title {
  background: var(--r-bg);
  text-align: center;
  color: var(--r-text-body);
  font-family: var(--r-font-body);
}
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(24px, 4vw, 48px) !important;
  margin: clamp(16px, 3vh, 32px) auto !important;
}

/* Input fields in cart (coupon, quantity) */
body.woocommerce-cart input[type="text"],
body.woocommerce-cart input[type="number"],
body.woocommerce-cart input[type="email"] {
  background: var(--r-bg) !important;
  box-shadow: var(--r-neu-inner) !important;
  border: none !important;
  border-radius: var(--r-radius-pill) !important;
  padding: 10px 16px !important;
  font-family: var(--r-font-body) !important;
  color: var(--r-text-body) !important;
}

/* ─── Hide Divi right sidebar on WooCommerce pages + last order summary item ── */
body.woocommerce-checkout .et_right_sidebar #sidebar,
body.woocommerce-cart .et_right_sidebar #sidebar,
body.woocommerce-page .et_right_sidebar #sidebar,
.et_right_sidebar #sidebar {
  display: none !important;
}
body.woocommerce-checkout .et_right_sidebar #main-content,
body.woocommerce-cart .et_right_sidebar #main-content,
body.woocommerce-page .et_right_sidebar #main-content {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item:last-child > div {
  display: none !important;
}

/* ─── Hide product thumbnails in cart table (panier + commander + add-payment) ── */
#add_payment_method table.cart .product-thumbnail,
.woocommerce-cart table.cart .product-thumbnail,
.woocommerce-checkout table.cart .product-thumbnail {
  display: none !important;
}
/* Also hide the column header if shop_table uses <th class="product-thumbnail"> */
#add_payment_method table.cart th.product-thumbnail,
.woocommerce-cart table.cart th.product-thumbnail,
.woocommerce-checkout table.cart th.product-thumbnail {
  display: none !important;
}

/* Skip-cart flow — repurpose the "Return to cart" link as "Voir le programme".
   Hide original label and render custom text via ::before. */
.wc-block-components-checkout-return-to-cart-button {
  font-size: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.wc-block-components-checkout-return-to-cart-button::before {
  content: "← Voir le programme";
  font-size: 13px;
  font-family: var(--r-font-heading);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--r-teal);
  transition: color var(--r-transition);
}
.wc-block-components-checkout-return-to-cart-button:hover::before {
  color: var(--r-teal-dark);
}

/* ─── Checkout — hide everything except login, coupon, billing, order_review ── */
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .col2-set > .col-2,
body.woocommerce-checkout #ship-to-different-address-checkbox,
body.woocommerce-checkout .woocommerce-account-fields, /* hidden — account auto-created silently for non-logged users */
body.woocommerce-checkout .col2-set h3:not(:first-child),
body.woocommerce-checkout .woocommerce-additional-fields h3,
body.woocommerce-checkout .woocommerce-additional-fields label,
body.woocommerce-checkout .woocommerce-additional-fields textarea,
body.woocommerce-checkout #order_comments_field,
body.woocommerce-checkout p.form-row.notes {
  display: none !important;
}

/* ─── Checkout — #customer_details IS .col2-set (same element).
   Make it a transparent wrapper via display:contents so its children
   (.col-1 billing) participate directly in the parent flow. ────────── */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .col2-set {
  display: contents !important;
}
/* col-1 (billing) fills full width, no float */
body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout #customer_details .col-1 {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  display: block !important;
}
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #order_review_heading {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* ─── Checkout — hide country field (always CH, mono-market Suisse) ── */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field,
body.woocommerce-checkout .woocommerce-billing-fields [data-fcf-field-input="billing_country"],
body.woocommerce-checkout p.form-row:has([data-fcf-field-input="billing_country"]) {
  display: none !important;
}

/* ─── H1 dot accent — periods in headings colored Réalisons doré ─── */
.r-dot-accent {
  color: var(--r-orange);
}

/* ─── Accueil — hide stray empty Divi section above footer ──────────── */
#post-1597 > div > div > div > .et_pb_section_1.et_pb_section.et_section_regular {
  display: none !important;
}

/* ─── Hero secondary CTA — "Commander le programme" link below main CTA ─ */
.r-hero__secondary-cta {
  display: inline-block;
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--r-orange);
  text-decoration: none;
  transition: color var(--r-transition);
  margin-top: 4px;
}
.r-hero__secondary-cta:hover {
  color: var(--r-orange-dark);
}


/* ═══ Unified checkout page /commande/ — product info left + checkout right ═══ */
.r-checkout {
  background: var(--r-bg);
  padding: clamp(16px, 3vw, 32px);
}
.r-checkout__inner {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(400px, 1.3fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.r-checkout__left {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: calc(var(--r-header-h, 56px) + 24px);
  align-self: start;
  margin: 0;
  padding-top: 0;
}
.r-checkout__left > :first-child {
  margin-top: 0;
  padding-top: 0;
}
.r-checkout__title {
  font-family: var(--r-font-heading);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 8px 0 16px;
}
.r-checkout__program {
  font-family: var(--r-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 16px;
}
.r-checkout__details {
  background: var(--r-bg);
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(16px, 2vw, 24px);
}
.r-checkout__details > :first-child {
  margin-top: 0;
}
.r-checkout__details-title {
  font-family: var(--r-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 16px 0 10px;
}
.r-checkout__details-title:first-child {
  margin-top: 0;
}
.r-checkout__details .r-info-section__list {
  margin-bottom: 12px;
}
.r-checkout__details a {
  color: var(--r-teal);
  text-decoration: none;
}
.r-checkout__details a:hover {
  color: var(--r-teal-dark);
}

/* Right column: WooCommerce checkout form full width */
.r-checkout__right .woocommerce,
.r-checkout__right #customer_details,
.r-checkout__right .woocommerce-billing-fields,
.r-checkout__right #order_review {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Mobile: stack to single column */
@media (max-width: 767.98px) {
  .r-checkout__inner {
    grid-template-columns: 1fr;
  }
  .r-checkout__left {
    position: static;
  }
}

/* ─── Checkout promo block ──────────────────────────────────────────── */
.r-checkout__promo {
  margin: 16px 0 20px;
}
.r-checkout__promo-badge {
  display: inline-block;
  background: rgba(238, 163, 42, 0.55);
  color: #fff;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  border-radius: var(--r-radius-pill);
  margin-bottom: 10px;
}
.r-checkout__promo-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.r-checkout__price-old {
  font-family: var(--r-font-heading);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--r-text-muted);
  text-decoration: line-through;
}
.r-checkout__price-current {
  font-family: var(--r-font-heading);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--r-teal);
}
.r-checkout__price-current small {
  font-size: 14px;
  font-weight: 400;
  color: var(--r-text-muted);
}

/* ─── WooCommerce Order Confirmation (thank you page) ──────────────── */
.r-checkout .woocommerce-order {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--r-neu-card);
  padding: clamp(20px, 3vw, 32px);
}

/* "Merci. Votre commande a été reçue." */
.r-checkout .woocommerce-order .woocommerce-thankyou-order-received {
  font-family: var(--r-font-heading);
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--r-teal);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(40, 168, 191, 0.15);
}

/* Order overview (numéro, date, email, total, paiement) — single inset card */
.r-checkout .woocommerce-order .woocommerce-order-overview {
  list-style: none;
  padding: 16px;
  margin: 0 0 24px;
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: var(--r-radius-btn);
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  line-height: 1.8;
}
.r-checkout .woocommerce-order .woocommerce-order-overview li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(40, 168, 191, 0.08);
}
.r-checkout .woocommerce-order .woocommerce-order-overview li:last-child {
  border-bottom: none;
}
.r-checkout .woocommerce-order .woocommerce-order-overview li strong {
  font-family: var(--r-font-heading);
  color: var(--r-text-dark);
}

/* "Détails de la commande" heading */
.r-checkout .woocommerce-order h2,
.r-checkout .woocommerce-order .woocommerce-order-details h2,
.r-checkout .woocommerce-order .woocommerce-customer-details h2 {
  font-family: var(--r-font-heading);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 24px 0 12px;
}

/* Order details table */
.r-checkout .woocommerce-order .woocommerce-table--order-details {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: var(--r-radius-btn);
  overflow: hidden;
  font-family: var(--r-font-body);
  font-size: 14px;
}
.r-checkout .woocommerce-order .woocommerce-table--order-details th,
.r-checkout .woocommerce-order .woocommerce-table--order-details td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(40, 168, 191, 0.08);
  color: var(--r-text-body);
}
.r-checkout .woocommerce-order .woocommerce-table--order-details thead th {
  font-family: var(--r-font-heading);
  font-weight: 700;
  color: var(--r-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.r-checkout .woocommerce-order .woocommerce-table--order-details tfoot th {
  font-weight: 700;
  color: var(--r-text-dark);
}
.r-checkout .woocommerce-order .woocommerce-table--order-details tfoot td {
  font-weight: 700;
  color: var(--r-teal);
}
.r-checkout .woocommerce-order .woocommerce-table--order-details tr:last-child th,
.r-checkout .woocommerce-order .woocommerce-table--order-details tr:last-child td {
  border-bottom: none;
}

/* Customer details (adresse de facturation) */
.r-checkout .woocommerce-order .woocommerce-customer-details {
  margin-top: 24px;
}
.r-checkout .woocommerce-order .woocommerce-customer-details address {
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: var(--r-radius-btn);
  padding: 16px;
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
  font-style: normal;
  line-height: 1.8;
}
.r-checkout .woocommerce-order .woocommerce-customer-details address p {
  margin: 4px 0;
}
.r-checkout .woocommerce-order .woocommerce-customer-details a {
  color: var(--r-teal);
  text-decoration: none;
}
.r-checkout .woocommerce-order .woocommerce-customer-details a:hover {
  color: var(--r-teal-dark, #1e8a9e);
}

/* ─── Secondary CTA teal variant (overlay positif "Réservez un échange") ── */
.r-hero__secondary-cta--teal {
  color: var(--r-teal);
  display: block;
  text-align: center;
  width: 100%;
}
.r-hero__secondary-cta--teal:hover {
  color: var(--r-teal-dark);
}

/* ═══ ID Reviews widget — issue #337 (emr-simple-slider) ═══════════════ */

.r-idreviews {
  background: var(--r-bg);
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(20px, 2.5vw, 32px);
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
  box-sizing: border-box;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r-idreviews emr-simple-slider {
  display: block;
  width: 100%;
  min-height: 100px;
}

.r-idreviews--placeholder {
  flex-direction: column;
  text-align: center;
  gap: 8px;
  color: var(--r-text-muted);
}
.r-idreviews__title {
  font-family: var(--r-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0;
  letter-spacing: 0.3px;
}
.r-idreviews__body {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
  margin: 0;
  max-width: 60ch;
}

/* Placement-specific tweaks */
.r-idreviews--footer {
  padding: 12px 20px;
  min-height: 60px;
  max-width: 520px;
}
.r-idreviews--footer emr-simple-slider {
  min-height: 44px;
}
.r-idreviews--landing {
  margin-top: 8px;
}

/* ═══ Landing pages Google Ads — issues #336 + #337 ═════════════════════ */

.r-landing {
  background: var(--r-bg);
  padding: clamp(32px, 5vw, 72px) clamp(16px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
  max-width: 1100px;
  margin: 0 auto;
}

.r-landing > section,
.r-landing > header,
.r-landing > footer,
.r-landing > .r-landing__eval {
  background: var(--r-bg);
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: clamp(24px, 3vw, 40px);
}

.r-landing__h1 {
  font-family: var(--r-font-heading);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--r-text-dark);
  line-height: 1.2;
  margin: 12px 0 16px;
}
.r-landing__h1-accent {
  font-style: italic;
  font-weight: 700;
  color: var(--r-teal);
  display: inline-block;
  margin-left: 4px;
}

.r-landing__h2 {
  font-family: var(--r-font-heading);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 20px;
}

.r-landing__h3 {
  font-family: var(--r-font-heading);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--r-text-dark);
  margin: 0 0 8px;
}

.r-landing__body {
  font-family: var(--r-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--r-text-body);
  margin: 0 0 12px;
}

.r-landing__hero {
  text-align: center;
}
.r-landing__hero-body {
  font-family: var(--r-font-body);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--r-text-body);
  max-width: 720px;
  margin: 0 auto 20px;
}
.r-landing__pill {
  display: inline-block;
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: var(--r-radius-pill);
  padding: 8px 18px;
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
  letter-spacing: 0.3px;
}

.r-landing__eval {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 80px;
}
.r-landing__eval .r-evaluation__input {
  width: 100%;
  min-height: 88px;
  padding: 14px 16px;
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border: none;
  border-radius: var(--r-radius-card);
  font-family: var(--r-font-body);
  font-size: 15px;
  color: var(--r-text-dark);
  resize: vertical;
}
.r-landing__eval .r-evaluation__input:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}
.r-landing__eval .r-evaluation__submit {
  align-self: flex-start;
}
.r-landing__eval .r-evaluation__error {
  color: #b50000;
  font-size: 13px;
  min-height: 1.2em;
}

.r-landing__reviews {
  text-align: center;
}
.r-landing__reviews-widget {
  margin-top: 16px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r-landing__pain-grid,
.r-landing__pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 24px;
}
.r-landing__pain-card,
.r-landing__pillar-card {
  background: var(--r-bg);
  box-shadow: var(--r-neu-inner);
  border-radius: var(--r-radius-card);
  padding: clamp(18px, 2.5vw, 24px);
}

.r-landing__final-cta {
  text-align: center;
}
.r-landing__cta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin: 24px auto 16px;
  max-width: 640px;
}
.r-landing__cta-primary,
.r-landing__cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  font-size: 16px;
  min-height: 48px;
}
.r-landing__disclaimer {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
  margin-top: 16px;
}

.r-landing__footer-link {
  text-align: center;
}
.r-landing__footer-link a {
  color: var(--r-teal);
  text-decoration: none;
  margin-left: 6px;
}
.r-landing__footer-link a:hover {
  color: var(--r-teal-dark);
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .r-landing {
    padding: clamp(24px, 4vw, 40px) 16px;
    gap: 28px;
  }
  .r-landing > section,
  .r-landing > header,
  .r-landing > footer,
  .r-landing > .r-landing__eval {
    padding: 20px 16px;
  }
  .r-landing__cta-row {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   FluentForm — Neumorphic integration (#365 stop-gap → #393 final)

   Replaces the legacy custom forms (r-contact__form, r-ambassadeur__form).
   All 4 site forms now use FluentForm shortcodes:
     #1 Contact, #6 Ambassadeur, #7 Partenaire, #8 Talent

   FluentForm injects classes:
     .frm-fluent-form, .fluent_form_*, .ff-el-form-control (inputs),
     .ff-btn-submit (submit button), .ff-message-success (success msg),
     .ff-el-input--label (labels), .ff-el-form-check-label (checkbox)

   Strategy: target with .fluent_form_X selectors at (0,2,0) to beat
   FluentForm internal CSS (typically (0,1,0)) without !important.
   ════════════════════════════════════════════════════════════════════════ */

/* Form container — neumo card around the whole form */
.fluentform .frm-fluent-form,
.frm-fluent-form .ff_form_instance_1_1,
.frm-fluent-form .ff_form_instance_6_1,
.frm-fluent-form .ff_form_instance_7_1,
.frm-fluent-form .ff_form_instance_8_1 {
  font-family: var(--r-font-body);
  color: var(--r-text-dark);
}

/* Labels */
.fluentform .ff-el-input--label,
.fluentform .ff-el-form-check-label,
.fluentform label {
  font-family: var(--r-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--r-text-dark);
  margin-bottom: 6px;
}

/* Inputs / textareas / selects — neumo inset */
.fluentform .ff-el-form-control,
.fluentform input[type="text"].ff-el-form-control,
.fluentform input[type="email"].ff-el-form-control,
.fluentform input[type="tel"].ff-el-form-control,
.fluentform input[type="number"].ff-el-form-control,
.fluentform input[type="url"].ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.fluentform select.ff-el-form-control {
  background: var(--r-bg);
  border: 1px solid rgba(160, 170, 180, 0.18);
  border-radius: var(--r-radius-input);
  box-shadow: var(--r-neu-inner);
  padding: 10px 14px;
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-dark);
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--r-transition);
}

.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 1px;
  border-color: var(--r-teal);
}

/* Placeholder */
.fluentform .ff-el-form-control::placeholder {
  color: var(--r-text-muted);
  opacity: 0.7;
}

/* Submit button — match .r-btn + .r-btn--teal exactly so FluentForm
   submit aligns visually with the rest of the site buttons.
   Specificity note: FluentForm injects a per-form inline rule
   `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)` (0,3,1)
   that sets `background-color: var(--fluentform-primary)` (blue).
   FluentForm DOM:
     <div class="fluentform fluentform_wrapper_N">
       <form class="frm-fluent-form fluent_form_N">
         <button class="ff-btn ff-btn-submit ff_btn_style">
   To beat the inline rule without !important we stack
   `.fluentform form.frm-fluent-form[class*="fluent_form_"]`
   plus `.ff-btn-submit.ff-btn` → (0,5,1), which wins uniformly
   across all forms (contact #1, ambassadeur #6, partenaires #7,
   talents #8). */
.fluentform form.frm-fluent-form[class*="fluent_form_"] .ff-btn-submit.ff-btn,
.fluentform form.frm-fluent-form[class*="fluent_form_"] button[type="submit"].ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--r-bg);
  background-color: var(--r-bg);
  color: var(--r-teal);
  box-shadow: var(--r-neu-btn);
  border: 1px solid var(--r-teal-a20);
  border-radius: var(--r-radius-btn);
  padding: var(--r-btn-padding-v) var(--r-btn-padding-h);
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--r-transition), border-color var(--r-transition);
}

.fluentform form.frm-fluent-form[class*="fluent_form_"] .ff-btn-submit.ff-btn:hover,
.fluentform form.frm-fluent-form[class*="fluent_form_"] button[type="submit"].ff-btn:hover {
  background: var(--r-bg);
  background-color: var(--r-bg);
  color: var(--r-teal-dark);
  border-color: var(--r-teal-a40);
  box-shadow: var(--r-neu-btn-hover);
}

.fluentform form.frm-fluent-form[class*="fluent_form_"] .ff-btn-submit.ff-btn:active,
.fluentform form.frm-fluent-form[class*="fluent_form_"] button[type="submit"].ff-btn:active {
  background: var(--r-bg);
  background-color: var(--r-bg);
  box-shadow: var(--r-neu-btn-active);
}

.fluentform form.frm-fluent-form[class*="fluent_form_"] .ff-btn-submit.ff-btn:focus-visible,
.fluentform form.frm-fluent-form[class*="fluent_form_"] button[type="submit"].ff-btn:focus-visible {
  outline: 2px solid var(--r-teal);
  outline-offset: 2px;
}

/* Success message — neumo success card */
.fluentform .ff-message-success,
.fluentform .ff_submit_btn_loader + .ff-message-success {
  background: var(--r-bg);
  color: var(--r-text-dark);
  border-left: 4px solid var(--r-teal);
  box-shadow: var(--r-neu-card);
  border-radius: var(--r-radius-card);
  padding: 16px 20px;
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.55;
  margin: 16px 0 0;
}

/* Error messages */
.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .text-danger {
  border-color: #E53E3E;
}
.fluentform .error.text-danger,
.fluentform .ff-el-form-control + .error {
  color: #E53E3E;
  font-size: 12px;
  margin-top: 4px;
}

/* Loading state */
.fluentform .ff_submit_btn_loader {
  border-top-color: var(--r-teal);
}

/* Honeypot field — keep hidden */
.fluentform .ff-section-break,
.fluentform input[name^="ff_hp_"] {
  display: none;
}

/* Form section spacing */
.fluentform .ff-el-group {
  margin-bottom: 14px;
}

/* Mobile responsive — slightly tighter padding */
@media (max-width: 767px) {
  .fluentform .ff-btn-submit,
  .fluentform button[type="submit"].ff-btn {
    width: 100%;
    padding: 14px 24px;
  }
}