/* ════════════════════════════════════════════════════════════════
   Réalisons — Styles spécifiques par page
   À importer après components.css.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   /compas — Le Compas (FAQ, 148 questions, 12 catégories)
   ════════════════════════════════════════════════════════════ */

.r-page--compas .r-page__hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.r-page--compas .r-page__hero .r-h1 { margin: 4px 0; }
.r-page--compas .r-page__hero .r-body {
  font-weight: 300;
  color: var(--r-text-body);
}

.r-page--compas__hero-cta { margin-top: 8px; }

/* ── Grille catégories (.r-toolbar et .r-search-count sont partagés) ── */
.r-compas__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--r-gutter-md);
  align-items: start;
}

.r-compas__grid--results {
  grid-template-columns: 1fr;
  gap: 18px;
}

/* ── Cartes-catégories ─────────────────────────────────────── */
.r-cat {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  padding: var(--r-card-padding);
  box-shadow: var(--neu-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
}

.r-cat:not(.is-expanded) { cursor: pointer; }

.r-cat:not(.is-expanded):hover {
  box-shadow: var(--neu-card-hover);
  transform: translateY(-2px);
}

.r-cat.is-expanded {
  grid-column: 1 / -1;
  box-shadow: var(--neu-card-hover);
  cursor: default;
  padding: 32px;
}

.r-cat.is-hidden { display: none; }

.r-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.r-cat__count {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
}

.r-cat__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--r-text-dark);
}

.r-cat__teasers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.r-cat__teaser {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-text-body);
  padding-left: 18px;
  position: relative;
}

.r-cat__teaser::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r-text-muted);
}

.r-cat__cta {
  font-family: var(--r-font-heading);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.r-cat__cta svg {
  width: 14px;
  height: 14px;
  transition: var(--r-transition-transform);
}

.r-cat:hover .r-cat__cta svg { transform: translateX(3px); }

.r-cat--c-blue .r-cat__cta { color: var(--r-blue); }
.r-cat--c-purple .r-cat__cta { color: var(--r-purple); }
.r-cat--c-fuchsia .r-cat__cta { color: var(--r-fuchsia); }
.r-cat--c-green .r-cat__cta { color: var(--r-green); }
.r-cat--c-indigo .r-cat__cta { color: var(--r-indigo); }
.r-cat--c-coral .r-cat__cta { color: var(--r-coral); }
.r-cat--c-teal-dark .r-cat__cta { color: var(--r-teal-dark); }
.r-cat--c-orange-dark .r-cat__cta { color: var(--r-orange-dark); }
.r-cat--c-emerald .r-cat__cta { color: var(--r-emerald); }
.r-cat--c-amber .r-cat__cta { color: var(--r-amber); }
.r-cat--c-pink .r-cat__cta { color: var(--r-pink); }
.r-cat--c-navy .r-cat__cta { color: var(--r-navy); }

/* ── État étendu (vue mono-catégorie) ──────────────────────── */
.r-cat.is-expanded .r-cat__teasers,
.r-cat.is-expanded .r-cat__cta { display: none; }

.r-cat__expanded {
  display: none;
  margin-top: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--r-separator);
}

.r-cat.is-expanded .r-cat__expanded { display: block; }

.r-cat__expanded-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.r-cat__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  color: var(--r-text-body);
  display: none;
  align-items: center;
  justify-content: center;
  transition: var(--r-transition-shadow), var(--r-transition-color);
}

.r-cat.is-expanded .r-cat__close { display: inline-flex; }

.r-cat__close:hover {
  color: var(--r-teal);
  box-shadow: var(--neu-card);
}

.r-cat__close svg { width: 14px; height: 14px; }

/* ── Q&A dans une catégorie étendue ────────────────────────── */
.r-q {
  border-radius: var(--r-radius-pill);
  background: var(--r-bg);
  overflow: hidden;
  transition: var(--r-transition-shadow);
}

.r-q.is-open { box-shadow: var(--neu-inner); }

.r-q__btn {
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--r-text-dark);
  line-height: 1.4;
}

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

.r-q__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--r-teal);
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.r-q__icon svg { width: 12px; height: 12px; }
.r-q.is-open .r-q__icon {
  transform: rotate(45deg);
  box-shadow: var(--neu-btn-sm-active);
}

.r-q__body {
  display: none;
  padding: 0 18px 18px;
  font-family: var(--r-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--r-text-body);
}

.r-q.is-open .r-q__body { display: block; }

/* ── Résultats de recherche (cards plat) ───────────────────── */
.r-result {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  padding: 26px 32px;
  box-shadow: var(--neu-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.r-result__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--r-text-dark);
}

.r-result__answer {
  font-family: var(--r-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--r-text-body);
}

/* ── Responsive Compas ─────────────────────────────────────── */
@media (max-width: 1280px) {
  .r-compas__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .r-compas__grid { grid-template-columns: repeat(2, 1fr); }
  .r-cat.is-expanded { grid-column: 1 / -1; padding: 28px; }
}

@media (max-width: 768px) {
  .r-compas__grid { grid-template-columns: 1fr; }
  .r-cat.is-expanded { padding: 22px; }
  .r-cat__close { top: 16px; right: 16px; }
  .r-q__btn { font-size: 15px; padding: 12px 14px; }
  .r-q__body { padding: 0 14px 14px; }
}

/* ════════════════════════════════════════════════════════════
   /podcast — Entredonner (épisodes audio)
   ════════════════════════════════════════════════════════════ */

.r-page--podcast .r-page__hero { display: flex; flex-direction: column; gap: 22px; }

/* ── Plateformes d'écoute ──────────────────────────────────── */
.r-podcast__subscribe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.r-podcast__subscribe-label {
  font-family: var(--r-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--r-text-muted);
}

.r-podcast__platforms {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.r-platform-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  font-family: var(--r-font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--r-text-dark);
  transition: var(--r-transition-shadow), var(--r-transition-transform);
  text-decoration: none;
}

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

.r-platform-pill svg { width: 16px; height: 16px; flex-shrink: 0; }

.r-platform-pill[data-platform="youtube"] svg { color: #FF0000; }
.r-platform-pill[data-platform="apple"] svg { color: #872EC4; }
.r-platform-pill[data-platform="spotify"] svg { color: #1DB954; }

/* ── Player ─────────────────────────────────────────────── */
.r-player {
  background: linear-gradient(135deg, #2D3748 0%, #4A2C0F 50%, var(--r-orange) 130%);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: var(--neu-card);
  color: #fff;
}

.r-player__cover {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--r-orange);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.r-player__body { flex: 1 1 auto; min-width: 0; }

.r-player__meta {
  font-family: var(--r-font-heading);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 4px;
}

.r-player__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 12px;
}

.r-player__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.r-player__time {
  font-family: var(--r-font-body);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
  min-width: 38px;
}

.r-player__bar {
  flex: 1 1 auto;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.r-player__bar-fill {
  height: 100%;
  background: #fff;
  border-radius: 2px;
  width: 0%;
  transition: width 100ms linear;
}

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

.r-player__ctrl {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease-out;
}

.r-player__ctrl:hover { background: rgba(255, 255, 255, 0.22); }
.r-player__ctrl--play {
  width: 44px;
  height: 44px;
  background: #fff;
  color: var(--r-text-dark);
}
.r-player__ctrl--play:hover { background: rgba(255, 255, 255, 0.9); }
.r-player__ctrl svg { width: 14px; height: 14px; }
.r-player__ctrl--play svg { width: 18px; height: 18px; }

/* ── Grille épisodes ──────────────────────────────────────── */
.r-podcast__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: start;
}

.r-ep {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  padding: var(--r-card-padding);
  box-shadow: var(--neu-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  cursor: pointer;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
}

.r-ep:not(.is-expanded):hover {
  box-shadow: var(--neu-card-hover);
  transform: translateY(-2px);
}

.r-ep.is-active:not(.is-expanded) {
  box-shadow: var(--neu-card-hover);
  outline: 2px solid var(--r-teal);
  outline-offset: -2px;
}

.r-ep.is-hidden { display: none; }

/* État étendu — la carte prend toute la largeur, montre la description */
.r-ep.is-expanded {
  grid-column: 1 / -1;
  cursor: default;
  padding: 32px 36px;
  box-shadow: var(--neu-card-hover);
  transform: none;
}

.r-ep.is-expanded .r-ep__title { font-size: 24px; line-height: 1.2; }
.r-ep.is-expanded .r-ep__pitch { display: none; }

.r-ep__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.r-ep__num {
  font-family: var(--r-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--r-text-muted);
  font-variant-numeric: tabular-nums;
}

.r-ep__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--r-text-dark);
}

.r-ep__pitch {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--r-text-body);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.r-ep__description {
  display: none;
  font-family: var(--r-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--r-text-body);
}

.r-ep.is-expanded .r-ep__description { display: block; }

.r-ep__description p { margin-bottom: 14px; }
.r-ep__description p:last-child { margin-bottom: 0; }
.r-ep__description ul { margin: 6px 0 14px 22px; list-style: disc; }
.r-ep__description li { margin-bottom: 6px; }
.r-ep__description a { color: var(--r-teal); text-decoration: underline; text-underline-offset: 2px; }
.r-ep__description a:hover { color: var(--r-teal-dark); }
.r-ep__description strong { color: var(--r-text-dark); font-weight: 700; }

.r-ep__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding-top: 6px;
  gap: 12px;
}

.r-ep__meta {
  font-family: var(--r-font-body);
  font-size: 12.5px;
  color: var(--r-text-muted);
  font-variant-numeric: tabular-nums;
}

.r-ep__cta {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--r-teal);
}

.r-ep[data-type="recit"] .r-ep__cta { color: var(--r-purple); }
.r-ep[data-type="interview"] .r-ep__cta { color: var(--r-teal); }
.r-ep[data-type="analyse"] .r-ep__cta { color: var(--r-orange); }
.r-ep[data-type="hors-serie"] .r-ep__cta { color: var(--r-teal-dark); }
.r-ep[data-status="upcoming"] .r-ep__cta { color: var(--r-text-muted); }

.r-ep__cta svg { width: 14px; height: 14px; transition: var(--r-transition-transform); }
.r-ep:not(.is-expanded):hover .r-ep__cta svg { transform: translateX(3px); }
.r-ep.is-expanded .r-ep__cta { display: none; }

/* Bouton fermer (visible uniquement quand expanded) */
.r-ep__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  color: var(--r-text-body);
  display: none;
  align-items: center;
  justify-content: center;
  transition: var(--r-transition-shadow), var(--r-transition-color);
}

.r-ep.is-expanded .r-ep__close { display: inline-flex; }
.r-ep__close:hover { color: var(--r-teal); box-shadow: var(--neu-card); }
.r-ep__close svg { width: 14px; height: 14px; }

/* ── Responsive Podcast ──────────────────────────────────── */
@media (max-width: 1280px) {
  .r-podcast__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .r-podcast__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .r-podcast__grid { grid-template-columns: 1fr; }
  .r-player {
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
  }
  .r-player__cover { align-self: center; }
  .r-player__body { text-align: center; }
}

/* ════════════════════════════════════════════════════════════
   /catalogue — 28 services en 7 catégories
   ════════════════════════════════════════════════════════════ */

.r-page--catalogue .r-page__hero { display: flex; flex-direction: column; gap: 24px; }
.r-page--catalogue__hero-cta { margin-top: 8px; }

.r-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--r-gutter-md);
  align-items: start;
}

.r-svc {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  padding: var(--r-card-padding);
  box-shadow: var(--neu-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

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

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

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

.r-svc__cta {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.r-svc__cta svg {
  width: 14px;
  height: 14px;
  transition: var(--r-transition-transform);
}

.r-svc:hover .r-svc__cta svg { transform: translateX(3px); }

.r-svc--c-navy .r-svc__cta { color: var(--r-navy); }
.r-svc--c-purple .r-svc__cta { color: var(--r-purple); }
.r-svc--c-blue .r-svc__cta { color: var(--r-blue); }
.r-svc--c-coral .r-svc__cta { color: var(--r-coral); }
.r-svc--c-green .r-svc__cta { color: var(--r-green); }
.r-svc--c-amber .r-svc__cta { color: var(--r-amber); }
.r-svc--c-indigo .r-svc__cta { color: var(--r-indigo); }

@media (max-width: 1280px) {
  .r-catalogue__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .r-catalogue__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .r-catalogue__grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   /commande — finalisation commande (Option 2 : checkout flow
   à gauche, récap commercial sticky à droite — pattern Stripe-like).
   ════════════════════════════════════════════════════════════ */

/* Inversion des colonnes : tunnel gauche (62%), récap droit (38%) */
.r-page--commande {
  grid-template-columns: 1fr var(--r-page-2col-hero-width);
}

.r-page--commande .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  order: 1;
}

.r-page--commande .r-page__hero {
  order: 2;
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding-right: 6px;
}

.r-checkout-flow__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
}

.r-checkout-flow__head .r-eyebrow { margin-bottom: 0; }
.r-checkout-flow__head .r-h1 { font-size: 36px; margin-bottom: 0; }

/* ── Recap colonne droite : 3 boxes neumorphiques empilées + CTA ── */
.r-checkout-recap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-checkout-recap > .r-btn--checkout {
  width: 100%;
  margin-top: 4px;
}

/* Bouton Commander en bas de la colonne checkout (gauche) */
.r-checkout-flow > .r-btn--checkout {
  width: 100%;
  margin-top: 8px;
}

.r-recap-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.r-recap-card__eyebrow {
  font-family: var(--r-font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--r-teal);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.r-recap-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--r-text-dark);
}

.r-recap-card__price {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r-recap-card__price .r-price-block__main { font-size: 36px; }
.r-recap-card__price .r-price-block__strike { font-size: 18px; }

.r-recap-card__list-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--r-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* Variante compacte de la checklist pour le récap latéral */
.r-checklist--compact {
  gap: 8px;
}
.r-checklist--compact li {
  font-size: 13.5px;
  line-height: 1.45;
}
.r-checklist--compact .r-checklist__icon {
  width: 16px;
  height: 16px;
}
.r-checklist--compact .r-checklist__icon svg {
  width: 9px;
  height: 9px;
}

.r-recap-card__totals {
  padding-top: 14px;
  border-top: 1px solid var(--r-separator);
}

.r-recap-card__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--r-text-dark);
}

.r-recap-card__total-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--r-teal);
}

.r-recap-card .r-btn--checkout {
  margin-top: 4px;
}

/* Responsive : on stack en mobile, le récap passe en haut puis le form */
@media (max-width: 1024px) {
  .r-page--commande {
    grid-template-columns: 1fr;
  }
  .r-page--commande .r-page__hero {
    order: 1;
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .r-page--commande .r-page__content {
    order: 2;
  }
}

/* ── Bloc prix dans le hero gauche ─────────────────────────── */
.r-price-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 26px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
}

.r-price-block__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.r-price-block__strike {
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--r-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--r-text-muted);
  white-space: nowrap;
}

.r-price-block__main {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--r-teal);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.r-price-block__suffix {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--r-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.r-price-block__offer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(238, 163, 42, 0.12);
  color: var(--r-orange-dark);
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  align-self: flex-start;
}

.r-price-block__econ {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
}
.r-price-block__econ strong { color: var(--r-text-dark); font-weight: 700; }

.r-trust-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
}

.r-trust-line svg {
  width: 14px;
  height: 14px;
  color: var(--r-teal);
  flex-shrink: 0;
}

/* ── Card de section (titre + corps) ─────────────────────── */
.r-section-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  padding: 28px 32px;
  box-shadow: var(--neu-card);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Stack vertical entre cards section sur les pages info et légales :
   gap de 32px pour que les cards neumorphiques respirent. */
.r-page--info .r-page__content,
.r-page--legal .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.r-section-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.r-section-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--r-text-dark);
}

.r-section-card__num {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--r-teal);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Liste de bénéfices avec coches teal ─────────────────── */
.r-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--r-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--r-text-body);
}

.r-checklist__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(40, 168, 191, 0.12);
  color: var(--r-teal-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.r-checklist__icon svg { width: 11px; height: 11px; }

/* ── Code promo (bandeau discret) ────────────────────────── */
.r-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-radius-input);
  background: var(--r-bg);
  box-shadow: var(--neu-inner);
}

.r-promo__label {
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
}

.r-promo__btn {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--r-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
}

.r-promo__btn:hover { color: var(--r-text-dark); }

/* ── Form ────────────────────────────────────────────────── */
.r-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}

.r-form-field { display: flex; flex-direction: column; gap: 6px; }
.r-form-field--full { grid-column: 1 / -1; }

.r-form-field__label {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--r-text-dark);
}

.r-form-field__label .r-required { color: var(--r-coral); margin-left: 2px; }

.r-form-field__input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--r-radius-input);
  background: var(--r-bg);
  border: none;
  box-shadow: var(--neu-inner);
  font-family: var(--r-font-body);
  font-size: 15px;
  color: var(--r-text-dark);
  outline: none;
}

.r-form-field__input::placeholder { color: var(--r-text-muted); }
.r-form-field__input:focus { box-shadow: var(--neu-inner), 0 0 0 2px var(--r-teal); }

/* ── Récap commande ───────────────────────────────────────── */
.r-summary {
  display: flex;
  flex-direction: column;
}

.r-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--r-separator);
}

.r-summary__row:last-of-type { border-bottom: none; }
.r-summary__row--head {
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--r-text-muted);
  padding-bottom: 8px;
}

.r-summary__row--total {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--r-text-dark);
  padding-top: 18px;
  border-top: 2px solid var(--r-text-dark);
}

.r-summary__product {
  font-family: var(--r-font-body);
  font-size: 15px;
  color: var(--r-text-body);
  flex: 1;
}

.r-summary__amount {
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--r-text-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.r-summary__row--total .r-summary__amount { font-size: 22px; color: var(--r-teal-dark); }

.r-summary__vat {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
}

/* ── Méthodes de paiement (radio cards) ──────────────────── */
.r-pay-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.r-pay-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-radius-input);
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  cursor: pointer;
  transition: var(--r-transition-shadow);
}

.r-pay-option:hover { box-shadow: var(--neu-card); }
.r-pay-option.is-selected { box-shadow: var(--neu-btn-sm-active); }

.r-pay-option__radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--r-text-muted);
  position: relative;
  transition: border-color 150ms ease-out;
}

.r-pay-option.is-selected .r-pay-option__radio { border-color: var(--r-teal); }

.r-pay-option.is-selected .r-pay-option__radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--r-teal);
  border-radius: 50%;
}

.r-pay-option__label {
  flex: 1;
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--r-text-dark);
}

.r-pay-option__sub {
  font-family: var(--r-font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--r-text-muted);
  display: block;
  margin-top: 2px;
}

.r-pay-option__icons {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.r-pay-icon {
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--r-text-dark);
  color: #fff;
  font-family: var(--r-font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
}

.r-pay-icon[data-brand="twint"] { background: #000; }
.r-pay-icon[data-brand="visa"] { background: #1A1F71; }
.r-pay-icon[data-brand="mc"] { background: #EB001B; }
.r-pay-icon[data-brand="postf"] { background: #FCD000; color: #000; }
.r-pay-icon[data-brand="apple"] { background: #000; }
.r-pay-icon[data-brand="google"] { background: #fff; color: #000; box-shadow: 0 0 0 1px var(--r-separator); }
.r-pay-icon[data-brand="klarna"] { background: #FFA8CD; color: #000; }
.r-pay-icon[data-brand="heylight"] { background: #FF3B30; }

/* ── Conditions + CTA final ──────────────────────────────── */
.r-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-text-body);
}

.r-checkbox-row input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--r-teal);
}

.r-checkbox-row a { color: var(--r-teal-dark); text-decoration: underline; text-underline-offset: 2px; }

.r-cta-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 0 4px;
}

.r-btn--checkout {
  width: 100%;
  padding: 18px 28px;
  font-size: 17px;
  border-radius: var(--r-radius-btn);
  background: var(--r-bg);
  color: var(--r-orange-dark);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: var(--neu-btn);
  font-family: var(--r-font-heading);
  transition: var(--r-transition-shadow);
  cursor: pointer;
  border: none;
}

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

.r-btn--checkout svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.r-btn--checkout__amount {
  background: rgba(238, 163, 42, 0.18);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.r-cta-foot {
  font-family: var(--r-font-body);
  font-size: 12.5px;
  color: var(--r-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.r-cta-foot svg { width: 12px; height: 12px; color: var(--r-teal); }

/* ── Récapitulatif (table WooCommerce-style, dans le checkout gauche) ── */
.r-recap-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--r-font-body);
  background: var(--r-bg);
  border-radius: var(--r-radius-input);
  box-shadow: var(--neu-inner);
  overflow: hidden;
}

.r-recap-table thead {
  background: rgba(40, 168, 191, 0.06);
}

.r-recap-table__th {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--r-text-muted);
  text-align: left;
  padding: 14px 20px;
}

.r-recap-table__th--right { text-align: right; }

.r-recap-table tbody tr,
.r-recap-table tfoot tr {
  border-top: 1px solid var(--r-separator);
}

.r-recap-table__product {
  padding: 18px 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--r-text-body);
}

.r-recap-table__amount {
  padding: 18px 20px;
  text-align: right;
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--r-text-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.r-recap-table__label {
  padding: 14px 20px;
  text-align: left;
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--r-text-dark);
}

.r-recap-table__row--subtotal .r-recap-table__amount {
  font-size: 15px;
}

.r-recap-table__row--total .r-recap-table__label {
  font-size: 15px;
  font-weight: 700;
}

.r-recap-table__row--total {
  background: rgba(40, 168, 191, 0.05);
}

.r-recap-table__amount--total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 16px 20px;
}

.r-recap-table__total-main {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--r-teal-dark);
  font-variant-numeric: tabular-nums;
}

.r-recap-table__total-vat {
  font-family: var(--r-font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--r-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Bloc privacy notice (entre paiement et conditions) ──── */
.r-privacy-notice {
  font-family: var(--r-font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--r-text-muted);
  padding: 4px 6px;
}

.r-privacy-notice a {
  color: var(--r-orange-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.r-privacy-notice a:hover { color: var(--r-orange); }

/* ── Card Conditions (CGV checkbox, déplacée à gauche) ───── */
.r-section-card--terms {
  gap: 14px;
}

/* ── Responsive Prix ─────────────────────────────────────── */
@media (max-width: 768px) {
  .r-section-card { padding: 22px 22px; }
  .r-form-grid { grid-template-columns: 1fr; }
  .r-price-block__main { font-size: 36px; }
  .r-recap-table__th,
  .r-recap-table__product,
  .r-recap-table__amount,
  .r-recap-table__label { padding: 12px 14px; }
  .r-recap-table__total-main { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════
   /prix — page tarifs (offre programme principale + cartes secondaires)
   ════════════════════════════════════════════════════════════ */

.r-page--tarifs .r-page__hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.r-page--tarifs .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 44px;  /* Espacement vertical accru entre vedette et extensions */
}

/* ── Carte vedette — Le programme 980.— (visuel renforcé) ──── */
.r-tarif-feature {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: -10px -10px 22px rgba(255,255,255,0.95), 12px 12px 28px rgba(163,177,198,0.55);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  position: relative;
  transform: scale(1.015);
  transform-origin: center top;
  transition: var(--r-transition-shadow), transform 250ms ease-out;
}

.r-tarif-feature:hover {
  transform: scale(1.025);
}

.r-tarif-feature__ribbon {
  position: absolute;
  top: 22px;
  right: -8px;
  background: var(--r-teal);
  color: var(--r-white);
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 8px 18px 8px 14px;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 4px 8px rgba(40, 168, 191, 0.25);
}

.r-tarif-feature__ribbon::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--r-teal-dark) transparent transparent;
}

/* ── En-tête de la grille extensions ─────────────────────── */
.r-tarif-extensions__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--r-separator);
}

.r-tarif-extensions__eyebrow {
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-teal);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.r-tarif-extensions__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--r-text-dark);
}

.r-tarif-feature__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-tarif-feature__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
  color: var(--r-text-dark);
}

.r-tarif-feature__desc {
  font-family: var(--r-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--r-text-body);
  font-weight: 300;
}

.r-tarif-feature__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Tag ───────────────────────────────────────────────────── */
.r-tarif-card__tag {
  align-self: flex-start;
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.r-tarif-card__tag--teal { color: var(--r-teal); }
.r-tarif-card__tag--green { color: var(--r-green); }
.r-tarif-card__tag--orange { color: var(--r-orange); }

/* ── Prix ──────────────────────────────────────────────────── */
.r-tarif-card__price {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--r-text-dark);
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.r-tarif-card__price--xl {
  font-size: 64px;
}

.r-tarif-card__price--text {
  font-size: 30px;
}

.r-tarif-card__price-suffix {
  font-family: var(--r-font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--r-text-body);
  letter-spacing: 0;
}

.r-tarif-card__price--xl .r-tarif-card__price-suffix {
  font-size: 28px;
}

/* ── Grille cartes secondaires (style « négatif » neumorphique inset) ── */
.r-tarif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.r-tarif-card {
  background: var(--r-bg);
  border: none;
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-inner);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

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

.r-tarif-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--r-text-dark);
}

.r-tarif-card__desc {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-text-body);
  font-weight: 300;
}

/* ── CTAs cartes ───────────────────────────────────────────── */
.r-tarif-card__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.r-tarif-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  background: var(--r-bg);
  color: var(--r-teal);
  border-radius: var(--r-radius-btn);
  box-shadow: var(--neu-btn);
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 15px;
  transition: var(--r-transition-shadow);
}

.r-tarif-card__cta:hover { box-shadow: var(--neu-btn-hover); }

.r-tarif-feature__card .r-tarif-card__cta {
  padding: 16px 30px;
  font-size: 16px;
}

.r-tarif-card__link {
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--r-orange);
  transition: var(--r-transition-color);
}

.r-tarif-card__link:hover { color: var(--r-orange-dark); }

/* ── Responsive Prix ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .r-tarif-feature {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 28px;
    transform: none;
  }
  .r-tarif-feature:hover { transform: translateY(-2px); }
  .r-tarif-feature__title { font-size: 30px; }
  .r-tarif-card__price--xl { font-size: 54px; }
  .r-tarif-grid { grid-template-columns: 1fr; }
  .r-tarif-extensions__title { font-size: 22px; }
}

@media (max-width: 768px) {
  .r-tarif-feature { padding: 28px 22px; }
  .r-tarif-feature__title { font-size: 26px; }
  .r-tarif-feature__ribbon { font-size: 10px; padding: 6px 14px 6px 10px; top: 18px; }
  .r-tarif-card__price--xl { font-size: 44px; }
  .r-tarif-card__price { font-size: 36px; }
  .r-tarif-card { padding: 20px 18px; }
}

/* ════════════════════════════════════════════════════════════
   /rendez-vous — page de prise de RDV (booking widget mockup)
   Layout 2 colonnes (.r-page) : hero gauche sticky + agenda droite.
   ════════════════════════════════════════════════════════════ */

.r-page--rendez-vous .r-page__hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-page--rendez-vous .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.r-rdv__hero-meta {
  margin-top: 4px;
  color: var(--r-text-muted);
}

.r-rdv__widget {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: start;
  max-width: 720px;
}

.r-rdv__details {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 12px;
  border-right: 1px solid var(--r-separator);
}

.r-rdv__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.r-rdv__logo {
  width: 56px;
  height: 56px;
  color: var(--r-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.r-rdv__logo svg { width: 56px; height: 56px; }

.r-rdv__brand-name {
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--r-text-dark);
}

.r-rdv__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  color: var(--r-text-dark);
}

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

.r-rdv__meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--r-font-body);
  font-size: 15px;
  color: var(--r-text-body);
}

.r-rdv__meta-icon {
  width: 18px;
  height: 18px;
  color: var(--r-text-muted);
  display: inline-flex;
  flex-shrink: 0;
}

.r-rdv__meta-icon svg { width: 18px; height: 18px; }

.r-rdv__desc {
  font-family: var(--r-font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--r-text-body);
  margin-top: 6px;
}

/* ── Calendrier ────────────────────────────────────────────── */
.r-rdv__calendar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-rdv__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.r-rdv__cal-year {
  color: var(--r-text-muted);
  font-weight: 400;
}

.r-rdv__cal-nav {
  display: flex;
  gap: 6px;
}

.r-rdv__cal-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--r-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--r-transition-color);
}

.r-rdv__cal-arrow:hover { color: var(--r-teal-dark); }
.r-rdv__cal-arrow svg { width: 18px; height: 18px; }

.r-rdv__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.r-rdv__cal-day-name {
  font-family: var(--r-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--r-text-muted);
  text-align: center;
  padding: 6px 0;
}

.r-rdv__cal-cell {
  font-family: var(--r-font-body);
  font-size: 15px;
  color: var(--r-text-dark);
  text-align: center;
  padding: 12px 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.r-rdv__cal-cell--off { visibility: hidden; }

.r-rdv__cal-cell--past {
  color: var(--r-text-muted);
}

.r-rdv__cal-cell--avail {
  background: rgba(163, 177, 198, 0.18);
  color: var(--r-text-dark);
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.r-rdv__cal-cell--avail:hover {
  background: var(--r-teal-light);
  color: var(--r-teal-dark);
}

.r-rdv__cal-cell--today {
  color: var(--r-teal);
  font-weight: 700;
  position: relative;
  cursor: pointer;
}

.r-rdv__cal-cell--today::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--r-teal);
}

/* ── Fuseau horaire ────────────────────────────────────────── */
.r-rdv__tz {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.r-rdv__tz-label {
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--r-text-dark);
}

.r-rdv__tz-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--r-bg);
  border-radius: var(--r-radius-input);
  box-shadow: var(--neu-inner);
  padding: 0 14px;
}

.r-rdv__tz-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  padding: 12px 0;
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
}

.r-rdv__tz-chevron {
  width: 16px;
  height: 16px;
  color: var(--r-text-muted);
  display: inline-flex;
}

.r-rdv__tz-chevron svg { width: 16px; height: 16px; }

@media (max-width: 1024px) {
  .r-rdv__widget { grid-template-columns: 1fr; gap: 28px; padding: 28px; max-width: none; }
  .r-rdv__details { border-right: none; border-bottom: 1px solid var(--r-separator); padding-right: 0; padding-bottom: 24px; }
}

@media (max-width: 768px) {
  .r-rdv__widget { padding: 22px; }
  .r-rdv__title { font-size: 24px; }
  .r-rdv__cal-cell { padding: 10px 0; font-size: 14px; }
}

/* ════════════════════════════════════════════════════════════
   /catalogue/<service> — fiche service individuelle
   ════════════════════════════════════════════════════════════ */

.r-page--service .r-page__hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-page--service .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── Lien retour catalogue (au-dessus du hero) ─────────────── */
.r-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--r-text-muted);
  text-decoration: none;
  transition: var(--r-transition-color);
}

.r-back-link:hover { color: var(--r-teal); }

/* ── Eyebrow couleur catégorie (palette catalogue) ─────────── */
.r-eyebrow--marketing { color: var(--r-blue); }
.r-eyebrow--analyse { color: var(--r-teal); }
.r-eyebrow--identite { color: var(--r-purple); }
.r-eyebrow--commercial { color: var(--r-coral); }
.r-eyebrow--gestion { color: var(--r-emerald); }
.r-eyebrow--legal { color: var(--r-amber); }
.r-eyebrow--equipe { color: var(--r-indigo); }

/* ── Tagline italique sous le H1 ───────────────────────────── */
.r-service__tagline {
  font-family: var(--r-font-body);
  font-size: 17px;
  line-height: 1.5;
  font-style: italic;
  color: var(--r-teal-dark);
  font-weight: 400;
  margin-top: -4px;
}

/* ── Corps de section ──────────────────────────────────────── */
.r-service__body {
  font-family: var(--r-font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--r-text-body);
  font-weight: 400;
}

/* ── Liste de bénéfices avec sous-titres ───────────────────── */
.r-service__points {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-service__point {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px solid var(--r-teal);
}

.r-service__point-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--r-text-dark);
}

.r-service__point p {
  font-family: var(--r-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--r-text-body);
}

/* ── CTA de pied de page service ───────────────────────────── */
.r-service__footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 0 8px;
}

@media (max-width: 768px) {
  .r-service__tagline { font-size: 16px; }
  .r-service__point { padding-left: 12px; }
}

/* ════════════════════════════════════════════════════════════
   / — accueil (hero gauche sticky avec timeline 4 états +
   contenu droit qui change par état)
   ════════════════════════════════════════════════════════════ */

.r-page--home .r-page__hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-page--home .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Layout interne du hero : timeline | texte ──────────────── */
.r-home-hero__layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}

/* ── Timeline verticale 4 étapes ───────────────────────────── */
.r-home-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
  list-style: none;
  position: relative;
}

.r-home-timeline::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 11px;
  width: 2px;
  background: var(--r-separator);
  z-index: 0;
}

.r-home-timeline li {
  position: relative;
  z-index: 1;
}

.r-home-timeline__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--r-text-muted);
  transition: var(--r-transition-color);
}

.r-home-timeline__step:hover {
  color: var(--r-text-body);
}

.r-home-timeline__step.is-active {
  color: var(--r-teal);
}

.r-home-timeline__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--r-separator);
  flex-shrink: 0;
  position: relative;
  transition: background 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.r-home-timeline__step.is-active .r-home-timeline__dot {
  background: var(--r-orange);
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(238, 163, 42, 0.18);
}

.r-home-timeline__label {
  letter-spacing: -0.2px;
}

/* ── Texte hero (eyebrow step + H1 + lead + CTAs) ──────────── */
.r-home-hero__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.r-home-hero__step {
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-orange);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.r-home-hero__h1 {
  font-size: 38px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r-home-hero__h1-main { color: var(--r-text-dark); }
.r-home-hero__h1-accent { color: var(--r-teal); }

.r-home-hero__lead {
  font-size: 15.5px;
  line-height: 1.55;
}

/* ── Panneaux d'état (right) ───────────────────────────────── */
.r-home-state {
  display: none;
}

.r-home-state.is-active {
  display: block;
  animation: r-home-fade-in 240ms ease-out;
}

@keyframes r-home-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── État Situer : carte intro avec 3 piliers ──────────────── */
.r-home-intro {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-home-intro__eyebrow {
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-teal);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.r-home-intro__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  color: var(--r-text-dark);
}

.r-home-intro__body {
  font-family: var(--r-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--r-text-body);
  font-weight: 400;
}

.r-home-intro__pillars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--r-separator);
}

.r-home-intro__pillars li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.r-home-intro__pillar-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  color: var(--r-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
}

.r-home-intro__pillar-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--r-text-dark);
  line-height: 1.3;
}

.r-home-intro__pillar-sub {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-text-body);
}

.r-home-intro__hint {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
  font-style: italic;
  margin-top: 6px;
}

.r-home-intro__hint strong {
  color: var(--r-teal);
  font-weight: 700;
  font-style: normal;
}

/* ── États Analyser / Structurer / Réaliser : section commune ── */
.r-home-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.r-home-section__eyebrow {
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-teal);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.r-home-section__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  color: var(--r-text-dark);
}

.r-home-section__lead {
  font-family: var(--r-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--r-text-body);
  font-weight: 300;
}

/* ── État Analyser : 3 cards profils ───────────────────────── */
.r-profile-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-profile-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
}

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

.r-profile-card__chip {
  align-self: flex-start;
  display: inline-flex;
  padding: 5px 12px;
  border-radius: var(--r-radius-pill);
  background: var(--r-teal-light);
  color: var(--r-teal-dark);
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.r-profile-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: var(--r-text-dark);
}

.r-profile-card__title-accent { color: var(--r-teal); }

.r-profile-card__body {
  font-family: var(--r-font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--r-text-body);
}

/* ── État Structurer : 6 cards résultats ───────────────────── */
.r-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.r-result-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
}

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

.r-result-card__label {
  font-family: var(--r-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--r-teal);
}

.r-result-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--r-text-dark);
}

.r-result-card__title-accent { color: var(--r-teal); font-weight: 600; }

.r-result-card__body {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-text-body);
}

/* ── État Réaliser : carte renvoi catalogue + carte doutes ── */
.r-catalogue-link-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-catalogue-link-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.r-catalogue-link-card__badge {
  align-self: flex-start;
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-teal);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.r-catalogue-link-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--r-text-dark);
}

.r-catalogue-link-card__body {
  font-family: var(--r-font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--r-text-body);
}

.r-catalogue-link-card__cta {
  align-self: flex-start;
  margin-top: 6px;
}

.r-doubts-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.r-doubts-card__eyebrow {
  font-family: var(--r-font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--r-orange);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.r-doubts-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--r-text-dark);
  line-height: 1.3;
}

/* ── Responsive Home ──────────────────────────────────────── */
@media (max-width: 1280px) {
  .r-home-hero__h1 { font-size: 32px; }
  .r-result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .r-home-hero__layout { grid-template-columns: 1fr; }
  .r-home-timeline {
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 0 16px;
  }
  .r-home-timeline::before {
    top: 50%;
    bottom: auto;
    left: 14px;
    right: 14px;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }
  .r-home-timeline__step {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    font-size: 13px;
  }
  .r-result-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .r-home-intro,
  .r-catalogue-link-card { padding: 26px 22px; }
  .r-home-intro__title,
  .r-home-section__title { font-size: 24px; }
  .r-home-hero__h1 { font-size: 26px; }
  .r-result-grid { grid-template-columns: 1fr; }
  .r-home-timeline__step { font-size: 12px; }
}

/* ── Sous-panneaux : drill-down dans un état (ex : profil détaillé) ── */
.r-home-substate { display: none; }
.r-home-substate.is-active {
  display: block;
  animation: r-home-fade-in 220ms ease-out;
}

/* Card profil cliquable (devient un <button>) */
.r-profile-card--clickable {
  appearance: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
}

.r-profile-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--r-teal);
  align-self: flex-start;
}

.r-profile-card__cta svg {
  width: 14px;
  height: 14px;
  transition: var(--r-transition-transform);
}

.r-profile-card--clickable:hover .r-profile-card__cta svg {
  transform: translateX(3px);
}

.r-profile-card__cta--soon {
  color: var(--r-text-muted);
  font-size: 12px;
  font-style: italic;
}

/* Sous-panneau détail */
.r-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-detail__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--r-bg);
  color: var(--r-text-body);
  border-radius: var(--r-radius-pill);
  box-shadow: var(--neu-btn-sm);
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: var(--r-transition-shadow), var(--r-transition-color);
}

.r-detail__back:hover {
  box-shadow: var(--neu-btn);
  color: var(--r-teal);
}

.r-detail__sections {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.r-detail__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r-detail__section + .r-detail__section {
  padding-top: 22px;
  border-top: 1px solid var(--r-separator);
}

.r-detail__section-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--r-text-dark);
}

.r-detail__section p {
  font-family: var(--r-font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--r-text-body);
}

.r-detail__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.r-detail__pill {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--r-radius-pill);
  background: var(--r-teal-light);
  color: var(--r-teal-dark);
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.r-detail__ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .r-detail__sections { padding: 24px 22px; }
  .r-detail__section-title { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════
   / — accueil v3 : layout 2-col (.r-page) + stepper horizontal sticky
   dans la colonne content droite
   ════════════════════════════════════════════════════════════ */

/* Titre d'introduction au-dessus de la frise des 4 étapes. */
.r-home-a__intro {
  margin-bottom: 18px;
}
.r-home-a__intro-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--r-text-dark);
}
@media (max-width: 768px) {
  .r-home-a__intro-title { font-size: 22px; }
}

/* Stepper horizontal sticky sous le header (à l'intérieur de la
   colonne content droite du layout 2-col .r-page--home) */
.r-home-a__stepper {
  position: sticky;
  top: var(--r-header-h, 76px);
  z-index: 40;
  background: var(--r-bg);
  border-top: 1px solid var(--r-separator);
  border-bottom: 1px solid var(--r-separator);
  padding: 14px 4px;
  margin-bottom: 12px;
}

.r-home-a__stepper ol {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.r-home-a__stepper ol::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--r-separator);
  z-index: 0;
  transform: translateY(-50%);
}

.r-home-a__stepper li {
  position: relative;
  z-index: 1;
  background: var(--r-bg);
  padding: 0 6px;
}

.r-home-a__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--r-text-muted);
  border-radius: var(--r-radius-pill);
  transition: var(--r-transition-color), background 150ms ease-out;
}

.r-home-a__step:hover { color: var(--r-text-body); }

.r-home-a__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--r-teal);
  color: var(--r-white);
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  transition: background 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

.r-home-a__step.is-active {
  color: var(--r-orange);
  background: transparent;
}

.r-home-a__step.is-active .r-home-a__step-num {
  background: var(--r-orange);
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(238, 163, 42, 0.18);
}

/* Sections empilées (à l'intérieur de la colonne content droite) */
.r-home-a__sections {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding-top: 12px;
}

.r-home-a__section {
  scroll-margin-top: 180px; /* header sticky + stepper sticky */
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Filtre actif : on masque les autres sections (cf. initHomeA) */
.r-home-a__section.is-hidden { display: none; }

.r-home-a__section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}

.r-home-a__section-step {
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-orange);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.r-home-a__section-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  color: var(--r-text-dark);
}

.r-home-a__section-lead {
  font-family: var(--r-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--r-text-body);
  font-weight: 300;
}

/* ── Responsive A ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .r-home-a__step-label { display: none; }
  .r-home-a__step { padding: 4px 6px; }
  /* En responsive, les 4 sections sont empilées : on neutralise le masquage
     posé par initHomeA (mode desktop) — le stepper devient un fil de
     progression mis à jour au scroll, et chaque section porte son propre
     intitulé « Étape N — Nom » au-dessus du titre. */
  .r-page--home .r-home-a__section.is-hidden { display: flex !important; }
}

@media (max-width: 768px) {
  .r-home-a__sections { gap: 56px; }
  .r-home-a__section-title { font-size: 24px; }
  .r-home-a__stepper { padding: 10px 4px; }
  .r-home-a__step-num { width: 22px; height: 22px; font-size: 12px; }
}

/* Variante 1 colonne pour le grid des résultats */
.r-result-grid--single { grid-template-columns: 1fr !important; }

/* Variante "result-card" cliquable utilisée par les profils en section
   Analyser : même design que .r-result-card, en bouton, avec un CTA
   en pied de carte. */
.r-result-card--clickable {
  appearance: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.r-result-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 13px;
  color: var(--r-teal);
  align-self: flex-start;
}

.r-result-card--clickable:hover .r-result-card__cta {
  color: var(--r-teal-dark);
}

.r-result-card__cta--soon {
  color: var(--r-text-muted);
  font-size: 12px;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   / — accueil OPTION B : hero gauche + content + timeline droite
   ════════════════════════════════════════════════════════════ */

.r-page--home-b {
  display: grid;
  grid-template-columns: 28% 1fr 14%;
  gap: 36px;
  padding: 56px var(--r-page-margin) 80px;
  align-items: start;
}

/* Colonne 1 : hero gauche sticky */
.r-home-b__hero {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding-right: 6px;
}

.r-home-b__hero .r-hero-ctas {
  align-items: flex-start;
  width: 100%;
}

.r-home-b__h1 {
  font-size: 36px;
  margin-bottom: 0;
}

.r-home-b__lead {
  font-size: 15.5px;
}

/* Colonne 2 : content scrollable */
.r-home-b__content {
  display: flex;
  flex-direction: column;
  gap: 72px;
  min-width: 0;
}

.r-home-b__section {
  scroll-margin-top: 110px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Colonne 3 : timeline verticale sticky droite */
.r-home-b__timeline {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  padding: 14px 0;
}

.r-home-b__timeline ol {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.r-home-b__timeline ol::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 9px;
  width: 2px;
  background: var(--r-separator);
  z-index: 0;
}

.r-home-b__timeline li {
  position: relative;
  z-index: 1;
}

.r-home-b__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--r-text-muted);
  transition: var(--r-transition-color);
}

.r-home-b__step:hover { color: var(--r-text-body); }

.r-home-b__step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--r-separator);
  flex-shrink: 0;
  transition: background 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

.r-home-b__step.is-active { color: var(--r-teal); }
.r-home-b__step.is-active .r-home-b__step-dot {
  background: var(--r-orange);
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(238, 163, 42, 0.18);
}

/* Responsive B */
@media (max-width: 1280px) {
  .r-page--home-b { grid-template-columns: 30% 1fr 16%; gap: 28px; }
  .r-home-b__h1 { font-size: 32px; }
}

@media (max-width: 1024px) {
  .r-page--home-b {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .r-home-b__hero {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    text-align: center;
    align-items: center;
  }
  .r-home-b__hero .r-hero-ctas { align-items: center; }
  .r-home-b__timeline {
    position: sticky;
    top: 90px;
    z-index: 40;
    background: var(--r-bg);
    border-top: 1px solid var(--r-separator);
    border-bottom: 1px solid var(--r-separator);
    padding: 12px 0;
    margin: 0 calc(-1 * var(--r-page-margin));
    padding-left: var(--r-page-margin);
    padding-right: var(--r-page-margin);
  }
  .r-home-b__timeline ol {
    flex-direction: row;
    justify-content: space-between;
  }
  .r-home-b__timeline ol::before {
    top: 50%;
    bottom: auto;
    left: 14px;
    right: 14px;
    width: auto;
    height: 2px;
    transform: translateY(-50%);
  }
  .r-home-b__step { flex-direction: column; gap: 6px; padding: 4px; font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   /prix-c — Variante C : hero centré + carte 980 pleine largeur
   au-dessus, 4 secondaires en grille 2×2 dessous.
   Pas dans le menu, accessible directement par URL.
   ════════════════════════════════════════════════════════════ */

.r-page--tarifs-c {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 56px var(--r-page-margin) 80px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.r-tarifs-c__hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
}

.r-tarifs-c__hero .r-eyebrow { margin-bottom: 0; }

.r-tarifs-c__content {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

/* Sur cette page la vedette occupe toute la largeur du content (1200) ;
   le grid interne 2-col déjà défini par .r-tarif-feature s'applique. */
.r-page--tarifs-c .r-tarif-feature {
  /* hérite de tout le styling A (white bg, ribbon, scale, shadow) */
}

/* Responsive C */
@media (max-width: 1024px) {
  .r-page--tarifs-c { padding: 40px var(--r-page-margin) 60px; gap: 36px; }
}

@media (max-width: 768px) {
  .r-page--tarifs-c { padding: 28px var(--r-page-margin) 48px; gap: 28px; }
}

/* ════════════════════════════════════════════════════════════
   /commande-1 — Variante 1 : hero centré en haut + checkout 1 col
   Pas dans le menu, accessible directement par URL.
   ════════════════════════════════════════════════════════════ */

.r-page--commande-1 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 56px var(--r-page-margin) 80px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.r-commande-1__hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.r-commande-1__hero .r-eyebrow { margin-bottom: 0; }
.r-commande-1__hero .r-h1 { font-size: 38px; margin-bottom: 0; }

.r-commande-1__price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--r-bg);
  padding: 18px 26px;
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  margin-top: 6px;
}

.r-commande-1__price-numbers {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.r-commande-1__flow {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

@media (max-width: 768px) {
  .r-commande-1__hero .r-h1 { font-size: 28px; }
  .r-commande-1__price-row { padding: 16px 20px; }
}

/* ════════════════════════════════════════════════════════════
   /commande-validee — confirmation de commande
   Layout 2 colonnes : hero sticky à gauche (titre + lien retour),
   contenu informationnel à droite (prochaines étapes).
   ════════════════════════════════════════════════════════════ */

.r-page--commande-validee .r-page__hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 110px;
  align-self: start;
}

.r-page--commande-validee .r-page__hero .r-eyebrow { margin-bottom: 0; }
.r-page--commande-validee .r-page__hero .r-h1 { margin-bottom: 0; }

.r-page--commande-validee .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-validee-content .r-recap-card {
  gap: 12px;
}

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

.r-validee-link {
  color: var(--r-orange-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.r-validee-link:hover { color: var(--r-orange); }

.r-validee-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.r-validee-links li {
  font-family: var(--r-font-body);
  font-size: 14.5px;
  line-height: 1.5;
}

.r-validee-links a {
  color: var(--r-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r-validee-links a:hover { color: var(--r-text-dark); }

@media (max-width: 1024px) {
  .r-page--commande-validee .r-page__hero {
    position: static;
  }
}

/* ════════════════════════════════════════════════════════════
   /partenaires/* — fiches partenaires (sub-pages prototype)
   ════════════════════════════════════════════════════════════ */

.r-page--partenaire .r-page__hero { display: flex; flex-direction: column; gap: 22px; }

.r-partenaire__meta {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--r-font-body);
  font-size: 14px;
  color: var(--r-text-body);
}
.r-partenaire__meta strong {
  color: var(--r-text-dark);
  font-family: var(--r-font-heading);
  font-weight: 600;
  margin-right: 8px;
}

.r-tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.r-tag {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(202, 238, 244, 0.4);
  color: var(--r-teal-dark);
  border-radius: var(--r-radius-pill);
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   /application — page de connexion à l'espace utilisateur
   (simulation locale, pas de backend réel)
   ════════════════════════════════════════════════════════════ */

.r-page--application .r-page__hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.r-application__features {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-application__features li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: flex-start;
}

.r-application__feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--r-teal);
  flex-shrink: 0;
}

.r-application__feature-icon svg {
  width: 20px;
  height: 20px;
}

.r-application__feature-title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--r-text-dark);
  margin-bottom: 4px;
}

.r-application__feature-sub {
  font-family: var(--r-font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--r-text-body);
}

.r-plateforme__content,
.r-application__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}

/* ── Carte login neumorphique ─────────────────────────────── */
.r-login-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 380px;
  width: 100%;
  align-self: center;
}

.r-login-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.r-login-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--r-teal);
  letter-spacing: -0.3px;
}

.r-login-card__lead {
  font-family: var(--r-font-body);
  font-size: 14.5px;
  color: var(--r-text-body);
  line-height: 1.5;
}

.r-login-card__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-login-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--r-font-body);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}

.r-checkbox-row--inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-body);
  cursor: pointer;
}

.r-login-card__forgot {
  font-family: var(--r-font-heading);
  font-weight: 600;
  color: var(--r-teal);
  text-decoration: none;
  font-size: 13px;
}

.r-login-card__forgot:hover { color: var(--r-teal-dark); }

.r-login-card__submit {
  width: 100%;
  margin-top: 4px;
}

.r-login-card__signup {
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
  text-align: center;
  line-height: 1.5;
}

.r-login-card__signup a {
  color: var(--r-teal);
  text-decoration: none;
  font-weight: 600;
}

.r-login-card__signup a:hover { color: var(--r-teal-dark); }

.r-application__legal-links {
  text-align: center;
  font-family: var(--r-font-body);
  font-size: 13px;
  color: var(--r-text-muted);
  margin-top: 8px;
}

.r-application__legal-links a {
  color: var(--r-teal);
  text-decoration: none;
  font-weight: 500;
}

.r-application__legal-links a:hover { color: var(--r-teal-dark); }

@media (max-width: 768px) {
  .r-login-card { padding: 28px 24px; }
  .r-login-card__title { font-size: 24px; }
}

/* ── Recap card extension : sous-titre + bullets variantes ── */
.r-recap-card__subtitle {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--r-orange-dark);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.r-recap-card .r-checklist--bullets strong {
  color: var(--r-teal);
  font-weight: 700;
}

/* ── Contact : raccourcis en pills neumorphiques ─────────── */
.r-contact-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-contact__shortcuts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.r-btn--shortcut {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 18px;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  font-family: var(--r-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--r-text-dark);
  text-decoration: none;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
}

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

.r-btn--shortcut--accent { color: var(--r-teal); }

/* Liens dans le content des pages info : teal turquoise pour ressortir */
.r-page--info .r-section-card a,
.r-page--legal .r-section-card a {
  color: var(--r-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: var(--r-transition-color);
}

.r-page--info .r-section-card a:hover,
.r-page--legal .r-section-card a:hover {
  color: var(--r-teal-dark);
}

/* ── Partenaires : layout inversé (wide gauche / narrow droite) ───────────
   Hero + grille logos + formulaire candidature à gauche.
   4 étapes du processus en boxes neumorphiques numérotées à droite (sticky).
*/
.r-page--partenaires-inversed {
  display: grid;
  grid-template-columns: 62% 38%;
  gap: var(--r-page-2col-gap);
  padding: 32px var(--r-page-margin);
}

.r-page__content--wide { display: flex; flex-direction: column; gap: 24px; }
.r-page__hero--narrow { position: sticky; top: var(--r-page-2col-sticky-top); align-self: start; display: flex; flex-direction: column; gap: 18px; }

.r-partner-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.r-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 22px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-inner);
  text-decoration: none;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
}

.r-partner-logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

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

@media (max-width: 768px) {
  .r-partner-logos { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .r-partner-logos { grid-template-columns: repeat(1, 1fr); }
}

.r-process-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-process-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: flex-start;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 18px 20px;
}

.r-process-step__num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--r-bg);
  /* Incrustation négative : le numéro est « creusé » dans la carte. */
  box-shadow: var(--neu-btn-sm-active);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--r-teal);
}

.r-process-step h3 {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--r-text-dark);
  margin-bottom: 4px;
}

.r-process-step p {
  font-family: var(--r-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--r-text-body);
}

@media (max-width: 1024px) {
  .r-page--partenaires-inversed { grid-template-columns: 1fr; }
  .r-page__hero--narrow { position: static; }
}


/* ════════════════════════════════════════════════════════════
   /tableau-bord — espace personnel utilisateur (5 menus + app)
   ════════════════════════════════════════════════════════════ */

.r-account-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.r-account-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: var(--r-transition-shadow), var(--r-transition-transform);
}

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

.r-account-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--neu-btn-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--r-teal);
  flex-shrink: 0;
}

.r-account-card__icon svg {
  width: 22px;
  height: 22px;
}

.r-account-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

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

.r-account-card__sub {
  font-family: var(--r-font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--r-text-body);
}

.r-account-card__arrow {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--r-teal);
  transition: transform 200ms ease-out;
}

.r-account-card:hover .r-account-card__arrow {
  transform: translateX(3px);
}

.r-account-card--accent .r-account-card__icon {
  color: var(--r-orange);
}
.r-account-card--accent .r-account-card__arrow {
  color: var(--r-orange);
}

@media (max-width: 768px) {
  .r-account-menu { grid-template-columns: 1fr; gap: 14px; }
  .r-account-card { padding: 18px 20px; }
}

/* Lien d'aide sous le formulaire de connexion */
.r-account-help {
  font-family: var(--r-font-body);
  font-size: 13.5px;
  color: var(--r-text-muted);
  margin-top: 14px;
  text-align: center;
}
.r-account-help a {
  color: var(--r-teal);
  text-decoration: none;
  font-weight: 600;
}
.r-account-help a:hover { color: var(--r-teal-dark); }

/* /équipe — cards profils */
.r-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.r-team-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.r-team-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--r-bg);
  box-shadow: var(--neu-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--r-teal);
}

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

.r-team-card__role {
  font-family: var(--r-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--r-teal);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.r-team-card__bio {
  font-family: var(--r-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--r-text-body);
}

.r-team-card__link {
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--r-teal);
  text-decoration: none;
  margin-top: 4px;
}

.r-team-card__link:hover { color: var(--r-teal-dark); }

/* Gap entre cards section sur les sous-pages (partenaires, services,
   talents, equipe). Mêmes 32px que sur les pages info/légales racine. */
.r-page--partenaire .r-page__content,
.r-page--service .r-page__content,
.r-page--talent .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Placeholder carte plan d'accès. Bloc neumorphique creux en attente
   d'une intégration de carte interactive. */
.r-map-placeholder {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-inner);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--r-text-muted);
  font-family: var(--r-font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   Landing pages — fond accueil flouté + carte neumo centrée
   (URLs cibles : /lancer-mon-activite/ et /relancer-mon-activite/)
   ════════════════════════════════════════════════════════════ */

/* Le backdrop = même structure 2-col que l'accueil, mais flouté.
   Aucune interaction possible (pointer-events: none) pour forcer
   l'utilisateur à passer par la carte en avant-plan. */
.r-landing-bg {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}

/* Overlay plein écran avec backdrop-filter + fond translucide pour
   un effet de "feutrage" cohérent avec le rendu neumorphique. */
.r-landing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(243, 245, 248, 0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 80;
}

/* Carte centrale en neumorphisme : titre noir + accent teal +
   paragraphe + 2 CTAs + lien discret pour découvrir le reste. */
.r-landing-card {
  background: var(--r-bg);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-card-hover);
  padding: 56px 56px 44px;
  max-width: 640px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.r-landing-card__eyebrow {
  font-family: var(--r-font-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--r-teal);
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.r-landing-card__title {
  font-family: var(--r-font-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  color: var(--r-text-dark);
  letter-spacing: -0.5px;
}

.r-landing-card__title .r-h1__accent {
  color: var(--r-teal);
}

.r-landing-card__body {
  font-family: var(--r-font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--r-text-body);
  margin: 4px auto 0;
  max-width: 520px;
}

.r-landing-card__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.r-landing-card__cta .r-btn {
  min-width: 240px;
}

.r-landing-card__dismiss {
  font-family: var(--r-font-heading);
  font-weight: 600;
  font-size: 13px;
  color: var(--r-text-muted);
  text-decoration: none;
  margin-top: 14px;
  letter-spacing: 0.4px;
}

.r-landing-card__dismiss:hover { color: var(--r-text-body); }

/* Placeholder vidéo pour quand le user fournira l'asset */
.r-landing-card__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--r-bg);
  border-radius: var(--r-radius-input);
  box-shadow: var(--neu-inner);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--r-font-heading);
  font-size: 13px;
  color: var(--r-text-muted);
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .r-landing-card { padding: 40px 28px 32px; }
  .r-landing-card__title { font-size: 32px; }
  .r-landing-card__body { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════
   /sitemap — page technique interne (pas de hero, pas de header/footer) :
   mise en page une colonne. NB : cette page n'est pas destinée à être
   convertie sur le site, elle sert d'index des pages du proto.
   ════════════════════════════════════════════════════════════ */

.r-sitemap-page.r-page {
  display: block;
  max-width: 980px;
  margin: 0 auto;
  padding: 48px var(--r-page-margin) 64px;
}

.r-sitemap-page .r-page__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.r-sitemap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r-sitemap-list--cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 16px;
}

.r-sitemap-list a {
  display: inline-block;
  padding: 4px 0;
  font-family: var(--r-font-body);
  font-size: 14.5px;
  color: var(--r-teal);
  text-decoration: none;
  transition: var(--r-transition-color);
}

.r-sitemap-list a:hover {
  color: var(--r-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.r-sitemap-sublist {
  list-style: none;
  padding: 4px 0 0 16px;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 1px solid var(--r-separator);
}

.r-sitemap-sublist a {
  font-size: 13.5px;
  color: var(--r-text-body);
}

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

/* Variante compacte de .r-tarif-feature pour le recap commande
   (single column, pas de hero gauche, plus dense). */
.r-tarif-feature--compact {
  display: block;
  padding: 28px 30px;
  transform: none;
}
.r-tarif-feature--compact:hover { transform: none; }
.r-tarif-feature--compact .r-price-block__row { margin-top: 8px; }
.r-tarif-feature--compact .r-price-block__main { font-size: 38px; }
.r-tarif-feature--compact .r-price-block__strike { font-size: 18px; }

/* Logo partenaire dans la fiche (sub-page), au-dessus de l'eyebrow */
.r-partenaire__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 80px;
  padding: 18px 24px;
  background: var(--r-white);
  border-radius: var(--r-radius-card);
  box-shadow: var(--neu-btn-sm);
  margin-bottom: 16px;
  max-width: 240px;
}

.r-partenaire__logo {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  display: block;
}

/* ───────────────────────────────────────────────────────────────────────────
   Page Talents — utilitaire pleine largeur dans la grille .r-page et
   texte d'aide sous un champ de formulaire.
   ─────────────────────────────────────────────────────────────────────────── */
.r-page__fullwidth {
  grid-column: 1 / -1;
  margin-bottom: 28px;
}

.r-form-field__hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--r-grey-500, #8a8a8a);
}