/* ═══════════════════════════════════════════════════════════════════════
   RÉSASKILL - Tunnel de réservation
   Refonte « Douceur » - portage fidèle de la maquette validée
   (design/booking-tunnel-demo.html, validée le 16/08/2026).

   RÈGLE DE CE FICHIER : une seule couche.
   Toutes les valeurs passent par les tokens --rsk-* définis en tête. Aucun
   px de mise en forme n'est écrit ailleurs qu'ici, et aucun bloc d'override
   n'est empilé en fin de fichier. C'est ce qui permet aux contrôles Elementor
   (qui écrivent dans --rsk-*) d'agir réellement sur le rendu.

   Sidebar adaptative : pleine (défaut) → réduite (≤940px) → en haut (≤680px),
   pilotée par container queries : le tunnel s'adapte à la largeur de SON
   conteneur (colonne Elementor), pas à celle de l'écran.
   ═══════════════════════════════════════════════════════════════════════ */

/* PAS de @import de polices ici. C'etait la cause n°1 de lenteur au chargement.
   Un @import oblige le navigateur a : telecharger CE fichier (50 Ko), l'analyser,
   DECOUVRIR l'import, puis repartir chercher fonts.googleapis.com, puis encore
   fonts.gstatic.com pour les fichiers de police. Trois allers-retours en file
   indienne, pendant lesquels la page ne s'affiche pas.
   Les memes polices sont deja demandees en PARALLELE via la feuille
   `resaskill-agenda-fonts` (balise <link>), cote PHP :
     - widget Elementor : get_style_depends()
     - shortcode        : wp_enqueue_style( 'resaskill-agenda-fonts', ... )
   C'etait donc la MEME police demandee deux fois, dont une de la pire maniere. */

/* ═══════════════════════════════════════════════════════════════
   TOKENS - scopés au container pour ne pas polluer le thème du site
   ═══════════════════════════════════════════════════════════════ */
.rsk-container,
.resaskill-booking-instance {
  /* Accent (surchargé par site via le widget Elementor) */
  /* 2.4.382 : noir et blanc par defaut (Lovinsky : « pas de rouge »).
     Chaque site met sa couleur par le widget ou Résaskill > Apparence. */
  --rsk-accent:       #17161A;
  --rsk-accent-hover: #000000;
  --rsk-accent-tint:  #F4F4F5;
  --rsk-accent-soft:  #E4E4E7;
  --rsk-accent-ring:  rgba(23, 22, 26, 0.18);

  /* Neutres */
  --rsk-ink:       #17161A;
  --rsk-body:      #3F3D45;
  --rsk-muted:     #6B6875;
  --rsk-faint:     #9C99A6;
  --rsk-line:      #E9E7EC;
  --rsk-line-2:    #DEDBE3;
  --rsk-surface:   #FFFFFF;
  --rsk-surface-2: #F8F7FA;
  --rsk-bg:        #FFFFFF;

  /* Sémantique */
  --rsk-success:   #2F7D5B;
  --rsk-warning:   #B28E4B;

  /* Typo */
  --rsk-font:         'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --rsk-font-display: 'Bricolage Grotesque', Georgia, 'Times New Roman', serif;

  /* Espacement */
  --rsk-s1: 4px;  --rsk-s2: 8px;  --rsk-s3: 12px; --rsk-s4: 16px;
  --rsk-s5: 20px; --rsk-s6: 24px; --rsk-s7: 32px; --rsk-s8: 40px;
  --rsk-s9: 48px; --rsk-s10: 64px;

  /* Rayons */
  --rsk-r-sm:   10px;
  --rsk-r-md:   14px;
  --rsk-r-lg:   18px;
  --rsk-r-2xl:  24px;
  --rsk-r-full: 999px;

  /* Ombres */
  --rsk-shadow-1: 0 1px 2px rgba(23, 22, 26, 0.05);
  --rsk-shadow-2: 0 2px 6px rgba(23, 22, 26, 0.05), 0 18px 38px -20px rgba(23, 22, 26, 0.28);

  /* Mouvement */
  --rsk-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --rsk-t-fast: 140ms;
  --rsk-t-base: 160ms;

  /* Mise en page */
  --rsk-sidebar-w: 244px;
  --rsk-widget-max: 1180px;
  --rsk-rightcol-w: 268px;

  /* Message du moment et badge (studio Apparence) */
  --rsk-promo-bg: #1E293B;
  --rsk-promo-fg: #FFFFFF;
  --rsk-badge-bg: var(--rsk-accent);
  --rsk-badge-fg: #FFFFFF;

  font-family: var(--rsk-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--rsk-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════════════════ */
.rsk-container {
  width: 100%;
  max-width: var(--rsk-widget-max);
  margin: 0 auto;
  position: relative;
  background: var(--rsk-bg);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-2xl);
  box-shadow: var(--rsk-shadow-2);
  overflow: hidden;
  /* Le tunnel s'adapte à la largeur de SON conteneur (colonne Elementor). */
  container-type: inline-size;
  container-name: rsk;
}
.rsk-container *,
.rsk-container *::before,
.rsk-container *::after { box-sizing: border-box; }

.rsk-shell {
  display: grid;
  grid-template-columns: var(--rsk-side-w, var(--rsk-sidebar-w)) minmax(0, 1fr);
}

.rsk-hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   MESSAGE DU MOMENT & BADGE
   ═══════════════════════════════════════════════════════════════ */
.rsk-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: var(--rsk-promo-bg);
  color: var(--rsk-promo-fg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px; font-weight: 600;
  overflow: hidden;
}
.rsk-promo-ico {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
}
.rsk-promo-txt { min-width: 0; }
/* Statique : une ligne, tronquee si trop longue. */
.rsk-promo[data-mode="fixe"] .rsk-promo-txt {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Defilant : le texte est DUPLIQUE par le JS, la boucle se referme sans trou. */
.rsk-promo[data-mode="defile"] .rsk-promo-txt {
  flex: 1;
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: rsk-defile var(--rsk-promo-vitesse, 18s) linear infinite;
}
/* Pause au survol : un message long est illisible sinon. */
.rsk-promo[data-mode="defile"]:hover .rsk-promo-txt { animation-play-state: paused; }
@keyframes rsk-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.rsk-promo-badge {
  position: absolute;
  z-index: 5;
  background: var(--rsk-badge-bg);
  color: var(--rsk-badge-fg);
  font-family: var(--rsk-font-display);
  font-size: 12.5px; font-weight: 800;
  letter-spacing: 0.01em;
  pointer-events: none;
}
.rsk-promo-badge[data-forme="ruban"] {
  top: 20px; right: -52px;
  width: 200px;
  padding: 7px 0;
  text-align: center;
  transform: rotate(38deg);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}
.rsk-promo-badge[data-forme="pastille"] {
  top: 14px; right: 14px;
  padding: 7px 14px;
  border-radius: var(--rsk-r-full);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
}
.rsk-promo-badge[data-forme="etiquette"] {
  top: 18px; left: 0;
  padding: 7px 14px 7px 12px;
  border-radius: 0 var(--rsk-r-full) var(--rsk-r-full) 0;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR - marque, progression, contact
   ═══════════════════════════════════════════════════════════════ */
.rsk-sidebar {
  display: var(--rsk-side-display, flex);
  flex-direction: column;
  gap: var(--rsk-s6);
  background: var(--rsk-surface-2);
  border-right: 1px solid var(--rsk-line);
  padding: var(--rsk-s6) var(--rsk-s5);
}

.rsk-brand { display: flex; align-items: center; gap: 10px; }
/* Logo du site a la place de l initiale (2.4.258) : fond neutre, image
   contenue (jamais rognee), position absolue pour echapper au img{height:auto} des themes. */
.rsk-brand-mark.rsk-brand-logo { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--rsk-line, #E7E5E4); }
.rsk-brand-mark.rsk-brand-logo img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); max-width: none; object-fit: contain; }

.rsk-brand-mark {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--rsk-ink);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--rsk-font-display);
  font-size: 15px; font-weight: 800;
}
.rsk-brand-name {
  font-family: var(--rsk-font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rsk-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Fil d'étapes ── */
.rsk-side-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rsk-side-steps .rsk-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: var(--rsk-r-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-side-steps .rsk-step:hover { background: rgba(23, 22, 26, 0.035); }
.rsk-side-steps .rsk-step.active {
  background: var(--rsk-surface);
  box-shadow: var(--rsk-shadow-1);
}
/* filet vertical de progression entre les pastilles */
.rsk-side-steps .rsk-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 22px; top: 34px; bottom: -2px;
  width: 1px;
  background: var(--rsk-line-2);
}
.rsk-side-steps .rsk-step.done:not(:last-child)::before {
  background: var(--rsk-ink);
  opacity: 0.25;
}

.rsk-step-mark {
  flex: none;
  width: 25px; height: 25px;
  border-radius: var(--rsk-r-full);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line-2);
  color: var(--rsk-faint);
  transition: all var(--rsk-t-base) var(--rsk-ease);
}
.rsk-side-steps .rsk-step.active .rsk-step-mark {
  background: var(--rsk-accent);
  border-color: var(--rsk-accent);
  color: #fff;
}
.rsk-side-steps .rsk-step.done .rsk-step-mark {
  background: var(--rsk-ink);
  border-color: var(--rsk-ink);
  color: transparent;
  font-size: 0;
}
.rsk-side-steps .rsk-step.done .rsk-step-mark::after {
  content: '\2713';
  font-size: 11px;
  color: #fff;
}

.rsk-step-body {
  min-width: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rsk-step-label {
  font-size: 12.5px; font-weight: 600;
  color: var(--rsk-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-side-steps .rsk-step.active .rsk-step-label {
  color: var(--rsk-ink);
  font-weight: 700;
}
.rsk-step-value {
  display: block;
  font-size: 11.5px;
  color: var(--rsk-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rsk-sidebar-spacer { flex: 1; }

/* ── Pied de sidebar : contact ── */
.rsk-contact-block {
  padding-top: var(--rsk-s5);
  border-top: 1px solid var(--rsk-line);
  display: flex;
  flex-direction: column;
  gap: var(--rsk-s2);
}
.rsk-contact-block h4 {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rsk-faint);
  margin: 0 0 2px;
}
.rsk-contact-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 12.5px; font-weight: 500;
  color: var(--rsk-muted);
  text-decoration: none;
  transition: color var(--rsk-t-fast) var(--rsk-ease);
}
/* Un numero ou un email trop long se tronque : il ne doit JAMAIS se casser
   en plusieurs lignes autour de son icone (sidebar etroite). */
.rsk-contact-item span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rsk-contact-item:hover { color: var(--rsk-accent-hover); }
.rsk-contact-item svg {
  flex: none;
  width: 15px; height: 15px;
  stroke: var(--rsk-faint);
  stroke-width: 1.8;
  fill: none;
}

/* ═══════════════════════════════════════════════════════════════
   COLONNE PRINCIPALE
   ═══════════════════════════════════════════════════════════════ */
.rsk-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rsk-main-body {
  flex: 1;
  padding: var(--rsk-s7);
  width: 100%;
}

/* ── Panneaux d'étape ── */
.rsk-panel { animation: rsk-in 320ms var(--rsk-ease); }
@keyframes rsk-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Filet d'accent AU-DESSUS du titre (pas de markup requis) */
.rsk-panel h2::before {
  content: '';
  display: block;
  width: 38px; height: 3px;
  background: var(--rsk-accent);
  border-radius: 2px;
  margin-bottom: var(--rsk-s4);
}
.rsk-panel h2 {
  font-family: var(--rsk-font-display);
  font-size: clamp(21px, 2.8cqi, 26px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--rsk-ink);
  margin: 0 0 6px;
  padding: 0;
}
.rsk-panel h3 {
  font-family: var(--rsk-font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rsk-ink);
  margin: 0 0 var(--rsk-s3);
}
/* Lot de seances dans la liste (2.4.237) : « 48,20 € / séance · 6 séances ». */
.rsk-service-persession,
.rsk-service-seances {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rsk-muted);
}
.rsk-service-persession { margin-left: 4px; }
.rsk-subtitle {
  font-size: 14px;
  color: var(--rsk-muted);
  line-height: 1.5;
  max-width: 62ch;
  margin: 0 0 var(--rsk-s6);
}

/* ═══════════════════════════════════════════════════════════════
   ÉTAPE - PRESTATIONS
   ═══════════════════════════════════════════════════════════════ */
.rsk-selected-employe {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--rsk-accent-tint);
  border: 1px solid var(--rsk-accent-soft);
  border-radius: var(--rsk-r-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--rsk-body);
  margin-bottom: var(--rsk-s5);
}
.rsk-selected-employe strong { color: var(--rsk-ink); font-weight: 700; }
.rsk-sel-initials {
  flex: none;
  width: 36px; height: 36px;
  border-radius: var(--rsk-r-full);
  background: var(--rsk-line);
  color: var(--rsk-muted);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.rsk-sel-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rsk-sel-name { font-size: 14px; font-weight: 700; color: var(--rsk-ink); }
.rsk-sel-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rsk-faint);
}

.rsk-services-list {
  display: flex;
  flex-direction: column;
  gap: var(--rsk-s3);
}

/* Ligne prestation (générée par booking.js : .rsk-service-row) */
.rsk-service-row,
.rsk-service-card {
  display: flex;
  align-items: center;
  gap: var(--rsk-s4);
  padding: 13px 16px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
  cursor: pointer;
  transition: transform var(--rsk-t-base) var(--rsk-ease),
              box-shadow var(--rsk-t-base) var(--rsk-ease),
              border-color var(--rsk-t-base) var(--rsk-ease);
}
.rsk-service-row:hover,
.rsk-service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rsk-shadow-2);
  border-color: var(--rsk-accent);
}
/* La carte entiere est cliquable (booking.js) : elle est donc atteignable
   au clavier, et son focus doit se voir. Sans cet anneau, une personne qui
   navigue au Tab ne sait jamais ou elle se trouve. */
.rsk-service-row:focus-visible,
.rsk-service-card:focus-visible {
  outline: 2px solid var(--rsk-accent);
  outline-offset: 2px;
}
.rsk-service-row.selected,
.rsk-service-card.selected {
  border-color: var(--rsk-accent);
  background: var(--rsk-accent-tint);
}
.rsk-service-info,
.rsk-service-body { flex: 1; min-width: 0; }
.rsk-service-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--rsk-font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rsk-ink);
}
.rsk-service-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rsk-s3);
  margin-top: 3px;
  font-size: 12px;
  color: var(--rsk-muted);
}
.rsk-service-meta span { display: inline-flex; align-items: center; gap: 4px; }
/* Le prix vit DANS la ligne meta, entre un separateur et la duree : sans
   align-items:baseline ses 17px desalignent tout le reste de la ligne. */
.rsk-service-meta { align-items: baseline; }
.rsk-service-sep { color: var(--rsk-faint); }
.rsk-service-duration { color: var(--rsk-muted); }
.rsk-service-desc {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rsk-muted);
}
.rsk-service-action { flex: none; }
/* Vignette carree a gauche de la prestation (2.4.378). Taille et arrondi
   reglables dans le widget Elementor (variables --rsk-thumb / --rsk-thumb-r). */
.rsk-service-thumb {
  flex: none;
  width: var(--rsk-thumb, 84px);
  height: var(--rsk-thumb, 84px);
  border-radius: var(--rsk-thumb-r, 12px);
  overflow: hidden;
  background: var(--rsk-surface-2);
}
.rsk-service-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}
.rsk-service-row.has-thumb { padding: 12px 16px 12px 12px; }
@media (max-width: 600px) {
  .rsk-service-thumb {
    width: var(--rsk-thumb-m, 64px);
    height: var(--rsk-thumb-m, 64px);
  }
}
/* Colonne etroite (telephone) : la vignette + le texte sur une ligne, le
   bouton « Choisir » en dessous sur toute la largeur. Sans ca, le texte
   n'avait plus que ~97 px et chaque carte montait a 310 px (2.4.379). */
@container rsk (max-width: 520px) {
  .rsk-service-row { flex-wrap: wrap; align-items: flex-start; }
  .rsk-service-row .rsk-service-info { flex: 1 1 0; min-width: 0; }
  .rsk-service-row .rsk-service-action { flex: 1 1 100%; }
  .rsk-service-row .rsk-service-action .rsk-btn-choisir { width: 100%; }
}
/* Intervenant seul (2.4.378) : sa carte s'affiche, cochee, sans choix. */
.rsk-mstrip-wrap.is-seul .rsk-mcard { cursor: default; }
.rsk-mstrip-wrap.is-seul .rsk-mcard:hover { transform: none; }
/* 2.4.390 : la carte d'un intervenant seul, un peu plus petite (Lovinsky). */
.rsk-mstrip-wrap.is-seul .rsk-mcard { gap: 9px; padding: 7px 30px 7px 8px; border-radius: 12px; }
.rsk-mstrip-wrap.is-seul .rsk-mcard img,
.rsk-mstrip-wrap.is-seul .rsk-mcard-ini { width: 32px; height: 32px; border-radius: 9px; }
.rsk-mstrip-wrap.is-seul .rsk-mcard-n { font-size: 12.5px; }
.rsk-mstrip-wrap.is-seul .rsk-mcard-check { top: 50%; right: 8px; width: 16px; height: 16px; font-size: 10px; transform: translateY(-50%); }
.rsk-service-price {
  flex: none;
  font-family: var(--rsk-font-display);
  font-size: 17px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rsk-accent);
  white-space: nowrap;
}
.rsk-service-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--rsk-r-md);
  background: var(--rsk-accent-tint);
  color: var(--rsk-accent);
  display: grid; place-items: center;
  font-size: 19px;
}

/* Badges de type / lieu */
.rsk-service-type-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--rsk-font);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 9px;
  border-radius: var(--rsk-r-full);
  background: var(--rsk-accent-tint);
  color: var(--rsk-accent);
}
.rsk-service-type-badge.formule    { background: #EEF2F9; color: #032D67; }
.rsk-service-type-badge.pack       { background: #E8F3ED; color: var(--rsk-success); }
.rsk-service-type-badge.evenement  { background: #FAF3E4; color: var(--rsk-warning); }
.rsk-service-type-badge.decouverte { background: #F1ECFB; color: #6D4AC4; }
.rsk-service-lieu {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--rsk-font);
  font-size: 11px; font-weight: 600;
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--rsk-r-full);
  background: var(--rsk-surface-2);
  color: var(--rsk-muted);
}
.rsk-service-lieu svg { flex: none; }
.rsk-formule-inclus {
  font-size: 12px;
  color: var(--rsk-body);
  margin: 7px 0 0;
  padding: 7px 11px;
  background: var(--rsk-surface-2);
  border-left: 2px solid var(--rsk-accent);
  border-radius: 0 var(--rsk-r-sm) var(--rsk-r-sm) 0;
}

/* Packs (cartes) */
.rsk-service-pack {
  display: flex;
  flex-direction: column;
  gap: var(--rsk-s3);
  padding: var(--rsk-s5);
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
}
.rsk-service-pack-info { display: flex; flex-direction: column; gap: 4px; }
.rsk-service-pack-meta { font-size: 13px; color: var(--rsk-muted); }
.rsk-pack-eco {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  background: #E8F3ED;
  color: var(--rsk-success);
  border-radius: var(--rsk-r-full);
  font-size: 11px; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   ÉTAPE - INTERVENANTS
   Bandeau compact (.rsk-mstrip) fusionné avec le calendrier,
   + grille de cartes pleine (.rsk-employes-cards, écran dédié).
   ═══════════════════════════════════════════════════════════════ */
/* En-tete de l etape 3 : le titre et le choix de l intervenant partagent une
   ligne. Empiles, ils cout aient deux blocs de hauteur pour rien. Le bandeau
   etant masque quand il n y a qu un intervenant, flex rend alors l intro
   pleine largeur sans colonne vide. */
.rsk-step3-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--rsk-s5);
  margin-bottom: var(--rsk-s4);
}
.rsk-step3-intro { flex: 1 1 260px; min-width: 0; }
/* Le bloc de gauche ne doit pas depasser la hauteur des cartes intervenants.
   Titre et sous-titre sont donc plus petits ICI que dans les autres etapes,
   et le sous-titre est plafonne a deux lignes : quelle que soit la largeur
   de la colonne, il ne peut plus pousser le bloc vers le bas. */
.rsk-step3-intro h2 {
  font-size: clamp(17px, 2.1cqi, 21px);
  line-height: 1.15;
  margin-bottom: 5px;
}
.rsk-step3-intro h2::before { margin-bottom: 10px; }
.rsk-step3-intro .rsk-subtitle {
  margin-bottom: 0;
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Description + second message de la prestation (2.4.244).
   Grand ecran : dans la colonne de gauche, sous les etapes. Colonne repliee
   (conteneur <= 940 px) ou masquee : sous la phrase d'aide de l'etape 3, a la
   MEME taille que cette phrase. Le JS remplit les deux blocs, le CSS choisit
   celui qui se voit. */
.rsk-side-infos {
  padding: 0 var(--rsk-s3, 12px);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--rsk-muted);
  text-transform: none;
  letter-spacing: normal;
}
.rsk-infos-desc,
.rsk-infos-msg { margin: 0; white-space: pre-line; }
.rsk-infos-msg { color: var(--rsk-ink); font-weight: 600; }
/* Description masquee par defaut, depliee par le lien (2.4.382, 2.4.384 :
   entierement masquee, plus seulement reduite a 3 lignes). */
.rsk-infos-desc.est-replie { display: none; }
.rsk-infos-lire {
  display: inline-block;
  margin: 4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--rsk-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rsk-infos-lire:hover { color: var(--rsk-accent-hover); }
.rsk-infos-lire:focus-visible { outline: 2px solid var(--rsk-accent); outline-offset: 2px; border-radius: 2px; }
/* Fin trait qui ne touche pas les bords. */
.rsk-infos-sep {
  height: 1px;
  margin: 12px 16px;
  background: var(--rsk-line);
}
.rsk-step-infos {
  display: none;
  margin-top: 8px;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--rsk-muted);
  text-transform: none;
  letter-spacing: normal;
}
.rsk-step-infos .rsk-infos-sep { margin: 8px 16px; }
.rsk-container[data-rsk-sidebar="off"] .rsk-side-infos { display: none !important; }
.rsk-container[data-rsk-sidebar="off"] .rsk-step-infos:not(.rsk-hidden) { display: block; }
.rsk-step3-head .rsk-mstrip-wrap { flex: 0 1 360px; min-width: 0; margin-bottom: 0; }
.rsk-step3-head .rsk-mstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* Des qu il y a la place, les deux blocs NE PEUVENT PLUS s empiler.
   Avec flex-wrap, c est la somme des bases qui decidait : il suffisait de
   quelques pixels manquants pour que le bandeau reparte a la ligne, ce qui
   est exactement ce qu on voulait eviter. nowrap le rend deterministe. */
@container rsk (min-width: 640px) {
  .rsk-step3-head { flex-wrap: nowrap; }
  .rsk-step3-intro { flex: 1 1 auto; }
  .rsk-step3-head .rsk-mstrip-wrap { flex: 0 0 340px; }
}
/* 2.4.384 : un intervenant SEUL ne demande qu'une carte. Il garde sa place a
   droite du titre des 480 px de large (au lieu de 640), comme sur un tunnel
   plus large : a 607 px (meliwamakeupartist.com) tout s'empilait. */
.rsk-step3-head .rsk-mstrip-wrap.is-seul .rsk-mstrip { grid-template-columns: minmax(0, 1fr); }
@container rsk (min-width: 480px) {
  .rsk-step3-head:has(.rsk-mstrip-wrap.is-seul) { flex-wrap: nowrap; }
  .rsk-step3-head:has(.rsk-mstrip-wrap.is-seul) .rsk-step3-intro { flex: 1 1 auto; }
  .rsk-step3-head .rsk-mstrip-wrap.is-seul { flex: 0 0 176px; }
}

.rsk-mstrip-wrap { margin-bottom: var(--rsk-s5); }
.rsk-striplabel {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rsk-faint);
  margin-bottom: 9px;
}
.rsk-mstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.rsk-mcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 12px;
  text-align: left;
  background: var(--rsk-surface);
  border: 1.5px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--rsk-t-base) var(--rsk-ease),
              background var(--rsk-t-base) var(--rsk-ease),
              transform var(--rsk-t-base) var(--rsk-ease);
}
.rsk-mcard:hover { border-color: var(--rsk-line-2); transform: translateY(-1px); }
.rsk-mcard.is-on,
.rsk-mcard.selected {
  border-color: var(--rsk-accent);
  background: var(--rsk-accent-tint);
}
.rsk-mcard img,
.rsk-mcard-ini {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  object-fit: cover;
  display: grid; place-items: center;
  background: var(--rsk-surface-2);
  color: var(--rsk-muted);
  font-size: 13px; font-weight: 700;
}
.rsk-mcard-b { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Prenom sur une ligne, nom sur la suivante : la carte tient dans une demi-
   largeur sans tronquer. */
.rsk-mcard-n {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--rsk-font-display);
  font-size: 13.5px; font-weight: 700;
  line-height: 1.25;
  color: var(--rsk-ink);
}
.rsk-mcard-p,
.rsk-mcard-l {
  display: block;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-mcard-r {
  display: block;
  font-size: 11.5px;
  color: var(--rsk-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-mcard-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--rsk-accent);
  color: #fff;
  display: none;
  place-items: center;
  font-size: 11px;
}
.rsk-mcard.is-on .rsk-mcard-check,
.rsk-mcard.selected .rsk-mcard-check { display: grid; }

/* Grille de cartes intervenants (écran dédié) */
.rsk-employes-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--rsk-s3);
}
.rsk-emp-card,
.rsk-employe-card {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  text-align: left;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
  cursor: pointer;
  font-family: inherit;
  transition: transform var(--rsk-t-base) var(--rsk-ease),
              box-shadow var(--rsk-t-base) var(--rsk-ease),
              border-color var(--rsk-t-base) var(--rsk-ease);
}
.rsk-emp-card:hover,
.rsk-employe-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rsk-shadow-2);
  border-color: var(--rsk-accent);
}
.rsk-emp-card.selected,
.rsk-employe-card.selected {
  border-color: var(--rsk-accent);
  background: var(--rsk-accent-tint);
}
.rsk-emp-card-images,
.rsk-employe-avatar {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--rsk-surface-2);
  display: grid; place-items: center;
}
.rsk-emp-card-images img,
.rsk-employe-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rsk-emp-img-placeholder {
  width: 100%; height: 100%;
  background: var(--rsk-surface-2);
  display: grid; place-items: center;
}
.rsk-emp-img-initials {
  color: var(--rsk-muted);
  font-size: 15px; font-weight: 700;
}
.rsk-emp-card-body,
.rsk-employe-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rsk-emp-card-name,
.rsk-employe-name {
  display: block;
  margin: 0;
  font-family: var(--rsk-font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rsk-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-emp-card-bio,
.rsk-employe-role {
  display: block;
  margin: 0;
  font-size: 12px;
  color: var(--rsk-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-emp-card-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--rsk-s3);
}
.rsk-services-count { font-size: 11px; color: var(--rsk-muted); white-space: nowrap; }
.rsk-btn-choose,
.rsk-btn-choisir,
.rsk-btn-pack {
  padding: 8px 16px;
  border: none;
  border-radius: var(--rsk-r-full);
  background: var(--rsk-accent);
  color: #fff;
  font-family: inherit;
  font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--rsk-t-base) var(--rsk-ease);
}
.rsk-btn-pack { align-self: flex-end; padding: 10px 20px; font-size: 13px; }
.rsk-btn-choose:hover,
.rsk-btn-choisir:hover,
.rsk-btn-pack:hover { filter: brightness(1.06); }

/* ═══════════════════════════════════════════════════════════════
   ÉTAPE - DATE & CRÉNEAUX
   Calendrier à gauche, colonne de droite : séances choisies →
   créneaux du jour → bouton continuer.
   ═══════════════════════════════════════════════════════════════ */
.rsk-cal-empty {
  padding: var(--rsk-s6);
  border: 1px dashed var(--rsk-line-2);
  border-radius: var(--rsk-r-md);
  background: var(--rsk-surface-2);
  color: var(--rsk-body);
  font-size: 14px;
  text-align: center;
}
.rsk-cal-empty-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--rsk-muted);
}

.rsk-cal-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rsk-s5);
  align-items: start;
}
/* Tant quaucun jour nest consulte, le calendrier occupe TOUTE la largeur.
   Un plafond a 640px le laissait flotter au milieu avec du vide autour. */
.rsk-cal-card:not(.has-slots) .rsk-calendar-wrapper {
  width: 100%;
}
.rsk-cal-card.has-slots {
  grid-template-columns: minmax(0, 1fr) var(--rsk-rightcol-w);
}

/* Colonne de droite */
.rsk-rightcol {
  display: flex;
  flex-direction: column;
  gap: var(--rsk-s4);
  min-width: 0;
}

/* ── Calendrier ── */
.rsk-calendar-wrapper {
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
  padding: var(--rsk-s3) var(--rsk-s3) 10px;
}

/* ── Lueur tournante autour du calendrier ──────────────────────────
   Un arc lumineux qui fait le tour du cadre, par-dessus la bordure
   existante (celle-ci n'est pas remplacee : l'arc se superpose, donc
   rien ne casse si la lueur est coupee).
   Le degrade conique ne peut PAS s'animer sans @property : un angle
   declare en simple variable CSS reste un texte, l'animation ne fait
   rien. D'ou la declaration ci-dessous, indispensable.
   Reglages : Apparence -> Calendrier (ou par emplacement). */
@property --rsk-cal-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.rsk-container[data-rsk-calglow="on"] .rsk-calendar-wrapper { position: relative; }
.rsk-container[data-rsk-calglow="on"] .rsk-calendar-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--rsk-cal-glow-w, 2px);
  background: conic-gradient(from var(--rsk-cal-angle),
    transparent 0deg,
    var(--rsk-cal-glow-color, var(--rsk-accent)) calc(var(--rsk-cal-glow-arc, 120deg) * 0.45),
    transparent var(--rsk-cal-glow-arc, 120deg),
    transparent 360deg);
  /* Ne garder que l'anneau : le masque evide le centre. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: var(--rsk-cal-glow-opacity, 0.25);
  animation: rsk-cal-lueur var(--rsk-cal-glow-speed, 2s) linear infinite;
  pointer-events: none;
}
@keyframes rsk-cal-lueur { to { --rsk-cal-angle: 360deg; } }
/* Navigateur sans @property : lueur fixe, plutot qu'un effet fige a moitie. */
@supports not (background: conic-gradient(from var(--rsk-cal-angle), red, blue)) {
  .rsk-container[data-rsk-calglow="on"] .rsk-calendar-wrapper::after {
    background: var(--rsk-cal-glow-color, var(--rsk-accent));
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rsk-container[data-rsk-calglow="on"] .rsk-calendar-wrapper::after { animation: none; }
}
.rsk-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rsk-calendar-nav > span {
  font-family: var(--rsk-font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: var(--rsk-ink);
}
.rsk-btn-icon {
  width: 31px; height: 31px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--rsk-line);
  background: var(--rsk-surface);
  color: var(--rsk-ink);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: border-color var(--rsk-t-fast) var(--rsk-ease),
              color var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-btn-icon:hover { border-color: var(--rsk-accent); color: var(--rsk-accent-hover); }
.rsk-btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }

.rsk-calendar-header {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.rsk-calendar-header span {
  text-align: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rsk-faint);
  padding-bottom: 5px;
}
.rsk-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--rsk-cal-gap, 3px);
}
/* Les valeurs de repli = la taille « moyen », celle d'origine. Les tailles
   « petit » et « grand » ne font que redefinir ces tokens (voir plus bas,
   data-rsk-cal), ce qui evite un second jeu de regles a maintenir. */
.rsk-cal-day {
  position: relative;
  min-width: 0;
  min-height: var(--rsk-cal-cell, 33px);
  display: grid; place-items: center;
  padding-bottom: var(--rsk-cal-pad, 6px);
  border: none;
  background: transparent;
  border-radius: 9px;
  font-family: inherit;
  font-size: var(--rsk-cal-font, 14.5px); font-weight: 600;
  color: var(--rsk-ink);
  cursor: pointer;
  user-select: none;
  transition: background var(--rsk-t-fast) var(--rsk-ease),
              color var(--rsk-t-fast) var(--rsk-ease),
              box-shadow var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-cal-day.empty { background: transparent; cursor: default; padding-bottom: 0; }
.rsk-cal-day.muted {
  color: var(--rsk-faint);
  opacity: 0.4;
  cursor: not-allowed;
  padding-bottom: 0;
}
.rsk-cal-day.muted:hover { background: transparent; }
/* point discret = jour qui a des créneaux libres */
.rsk-cal-day.available::after {
  content: '';
  position: absolute;
  bottom: var(--rsk-cal-dot, 5px);
  width: 3.5px; height: 3.5px;
  border-radius: 50%;
  background: var(--rsk-line-2);
  transition: background var(--rsk-t-fast) var(--rsk-ease);
}
/* Le survol NE DOIT PAS repeindre un jour deja retenu. Sans le :not(.selected),
   cette regle (0,4,0) l'emportait sur .rsk-cal-day.selected (0,2,0) : le fond
   redevenait clair pendant que le chiffre restait blanc, donc invisible. */
.rsk-cal-day:not(.muted):not(.empty):not(.selected):hover { background: var(--rsk-surface-2); }
/* jour dont on consulte les créneaux */
.rsk-cal-day.active {
  background: var(--rsk-surface-2);
  box-shadow: inset 0 0 0 1.5px var(--rsk-ink);
}
/* jour dont un créneau est retenu */
/* --rsk-on-ink : ce qui se pose SUR le fond --rsk-ink. Blanc en clair, sombre
   en theme sombre (ou --rsk-ink est presque blanc). */
.rsk-cal-day.selected { background: var(--rsk-ink); color: var(--rsk-on-ink, #fff); }
.rsk-cal-day.selected::after { background: var(--rsk-on-ink, #fff); }
/* Le jour retenu garde un fond sombre au survol, juste un peu eclairci pour
   que le survol reste perceptible. */
.rsk-cal-day.selected:hover { background: color-mix(in srgb, var(--rsk-ink) 85%, var(--rsk-on-ink, #fff)); }
.rsk-cal-day.selected.active { box-shadow: inset 0 0 0 1.5px var(--rsk-accent); }
.rsk-cal-day.today:not(.selected) { box-shadow: inset 0 0 0 1px var(--rsk-line-2); }
/* plage multi-jours */
.rsk-cal-day.in-range:not(.selected) {
  background: var(--rsk-accent-tint);
  color: var(--rsk-accent);
}

/* ── Créneaux du jour ── */
.rsk-time-slots {
  display: flex;
  flex-direction: column;
  gap: var(--rsk-s2);
}
.rsk-slots-head {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rsk-faint);
}
.rsk-slots-head strong {
  display: block;
  margin-top: 3px;
  font-family: var(--rsk-font-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: normal;
  text-transform: capitalize;
  color: var(--rsk-ink);
}
.rsk-slot-section {
  margin-top: var(--rsk-s3);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rsk-faint);
}
.rsk-slots-grid,
.rsk-slots-group {
  display: flex;
  flex-direction: column;
  gap: var(--rsk-s2);
}
.rsk-slot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 13px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-sm);
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  color: var(--rsk-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--rsk-t-fast) var(--rsk-ease),
              transform var(--rsk-t-fast) var(--rsk-ease),
              background var(--rsk-t-fast) var(--rsk-ease),
              color var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-slot:hover { border-color: var(--rsk-accent); transform: translateX(2px); }
.rsk-slot.selected {
  background: var(--rsk-ink);
  border-color: var(--rsk-ink);
  color: var(--rsk-on-ink, #fff);
}
.rsk-slot-meta { font-size: 12px; font-weight: 500; color: var(--rsk-faint); }
.rsk-slot.selected .rsk-slot-meta { color: rgba(255, 255, 255, 0.6); }
.rsk-slots-empty {
  padding: 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rsk-faint);
}

/* ── Séances choisies (haut de la colonne de droite) ── */
/* Place au-dessus du calendrier : compteur et puces sur la meme ligne. */
.rsk-multi-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--rsk-s4);
  margin-bottom: var(--rsk-s3);
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
  padding: 11px var(--rsk-s4);
}
.rsk-multi-head {
  flex: none;
  font-size: 12.5px;
  color: var(--rsk-muted);
  margin: 0;
}
.rsk-multi-head strong {
  font-family: var(--rsk-font-display);
  font-size: 16px; font-weight: 800;
  color: var(--rsk-accent);
}
.rsk-multi-panel.full .rsk-multi-head strong { color: var(--rsk-ink); }
/* Quota atteint : message temporaire au lieu d'un clic sans effet */
.rsk-multi-head.warn { color: var(--rsk-accent-hover); font-weight: 600; }
.rsk-multi-head.warn strong { color: var(--rsk-accent); }
/* Puces : compactes, elles s'enroulent au lieu d'empiler des lignes pleines */
.rsk-multi-list {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.rsk-multi-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 7px 5px 12px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-full);
  font-size: 12.5px; font-weight: 600;
  color: var(--rsk-ink);
}
.rsk-multi-item > span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-multi-rm {
  flex: none;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--rsk-surface-2);
  color: var(--rsk-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rsk-t-fast) var(--rsk-ease),
              color var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-multi-rm:hover { background: var(--rsk-accent); color: #fff; }
.rsk-multi-empty {
  font-size: 12.5px;
  font-style: italic;
  color: var(--rsk-faint);
}
/* Conteneur du bouton, rendu par booking.js : il ferme la colonne de droite. */
.rsk-multi-cta { display: block; }
.rsk-multi-continue { width: 100%; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   ÉTAPE - OFFRES PREMIUM (absente du fil d'Ariane)
   ═══════════════════════════════════════════════════════════════ */
.rsk-offres {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.rsk-offre {
  --o: var(--rsk-accent);
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  background: var(--rsk-surface);
  border: 1.5px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--rsk-t-base) var(--rsk-ease),
              box-shadow var(--rsk-t-base) var(--rsk-ease),
              transform var(--rsk-t-base) var(--rsk-ease);
}
.rsk-offre:hover { transform: translateY(-2px); box-shadow: var(--rsk-shadow-2); }
.rsk-offre.is-on {
  border-color: var(--o);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--o) 14%, transparent);
}
.rsk-offre input { position: absolute; opacity: 0; pointer-events: none; }
.rsk-offre-img {
  position: relative;
  flex: none;
  width: 112px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border-right: 1px solid var(--rsk-line);
}
.rsk-offre-imgel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.rsk-offre-body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rsk-offre-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--rsk-r-full);
  background: color-mix(in srgb, var(--o) 12%, #fff);
  color: var(--o);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rsk-offre-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rsk-offre-title {
  font-family: var(--rsk-font-display);
  font-size: 15.5px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rsk-ink);
}
.rsk-offre-price {
  font-family: var(--rsk-font-display);
  font-size: 15px; font-weight: 800;
  color: var(--o);
  white-space: nowrap;
}
.rsk-offre-duree {
  display: block;
  margin-top: 2px;
  font-family: var(--rsk-font-body, inherit);
  font-size: 11.5px; font-weight: 700;
  text-align: right;
  color: var(--rsk-muted);
}
.rsk-offre-refus {
  display: block;
  margin: 6px 0 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #FDECEC;
  color: #9B1C1C;
  font-size: 12.5px; line-height: 1.45;
}
.rsk-offre.is-verif { opacity: .6; pointer-events: none; }
.rsk-offre-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rsk-muted);
  white-space: pre-line;
}
/* Mise en forme saisie dans l'editeur visuel (2.4.249). */
.rsk-offre-text p,
.rsk-offre-text ul,
.rsk-offre-text ol { margin: 0 0 .35em; white-space: normal; }
.rsk-offre-text ul,
.rsk-offre-text ol { padding-left: 1.2em; }
.rsk-offre-text > :last-child { margin-bottom: 0; }
.rsk-offre-add {
  flex: none;
  align-self: center;
  margin-right: 16px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1.5px solid var(--rsk-line-2);
  border-radius: var(--rsk-r-full);
  color: transparent;
  font-size: 14px; font-weight: 700;
  transition: all var(--rsk-t-base) var(--rsk-ease);
}
.rsk-offre:hover .rsk-offre-add { border-color: var(--o); }
.rsk-offre.is-on .rsk-offre-add { background: var(--o); border-color: var(--o); color: #fff; }

.rsk-upbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--rsk-s5);
  padding: 14px var(--rsk-s5);
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
}
.rsk-upbar-t { font-size: 12.5px; color: var(--rsk-muted); }
.rsk-upbar-t b {
  display: block;
  margin-top: 1px;
  font-family: var(--rsk-font-display);
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rsk-ink);
}
.rsk-upbar-t s {
  margin-right: 7px;
  color: var(--rsk-faint);
  font-size: 13px; font-weight: 600;
  text-decoration-thickness: 1.5px;
}
.rsk-skip {
  display: block;
  width: 100%;
  padding: 14px 0 0;
  border: none;
  background: none;
  text-align: center;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--rsk-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rsk-skip:hover { color: var(--rsk-ink); }

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRES
   ═══════════════════════════════════════════════════════════════ */
.rsk-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rsk-s4);
  margin-bottom: var(--rsk-s5);
}
.rsk-form-group { display: flex; flex-direction: column; gap: 6px; }
.rsk-form-group label {
  font-size: 12.5px; font-weight: 600;
  color: var(--rsk-body);
}
.rsk-form-group label span {
  margin-left: 5px;
  font-size: 11.5px; font-weight: 500;
  color: var(--rsk-faint);
}
.rsk-form-group-full { grid-column: span 2; }
.rsk-custom-fields {
  display: flex;
  flex-direction: column;
  gap: var(--rsk-s4);
}
/* Un groupe = une etape de questions (2.4.263) ; booking.js n'en montre qu'un. */
.rsk-q-groupe {
  flex-direction: column;
  gap: var(--rsk-s4);
}
.rsk-form-group input,
.rsk-form-group select,
.rsk-form-group textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--rsk-ink);
  transition: border-color var(--rsk-t-fast) var(--rsk-ease),
              box-shadow var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-form-group input::placeholder,
.rsk-form-group textarea::placeholder { color: var(--rsk-faint); }
.rsk-form-group input:hover,
.rsk-form-group select:hover,
.rsk-form-group textarea:hover { border-color: var(--rsk-line-2); }
.rsk-form-group input:focus,
.rsk-form-group select:focus,
.rsk-form-group textarea:focus {
  outline: none;
  border-color: var(--rsk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsk-accent) 16%, transparent);
}
.rsk-form-group textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.rsk-form-hint { font-size: 11.5px; color: var(--rsk-faint); }

/* Informations complémentaires */
.rsk-message-group { margin-top: var(--rsk-s5); }
.rsk-message-group label {
  font-family: var(--rsk-font-display);
  font-size: 14.5px; font-weight: 700;
  color: var(--rsk-ink);
  margin-bottom: 3px;
}
.rsk-message-group label span {
  margin-left: 6px;
  font-family: var(--rsk-font);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rsk-faint);
}
.rsk-message-hint {
  margin: 0 0 9px;
  max-width: 62ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rsk-muted);
}
.rsk-message-count {
  margin-top: 5px;
  text-align: right;
  font-size: 11.5px;
  color: var(--rsk-faint);
}

/* Bandeau d'information (crédit d'un pack, etc.) */
.rsk-info-banner {
  margin-bottom: var(--rsk-s5);
  padding: 12px 15px;
  background: var(--rsk-accent-tint);
  border: 1px solid var(--rsk-accent-soft);
  border-radius: var(--rsk-r-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rsk-body);
}
.rsk-info-banner strong { color: var(--rsk-ink); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   RÉCAPITULATIF
   .rsk-summary-line est la classe réellement générée par booking.js
   (span / span) ; .rsk-summary-row est celle des écrans « pack ».
   Les deux sont stylées ici - plus de règle générique de rattrapage.
   ═══════════════════════════════════════════════════════════════ */
.rsk-summary {
  margin: var(--rsk-s5) 0 var(--rsk-s6);
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
  overflow: hidden;
}
/* En-tete de la carte. Le selecteur h3 est un garde-fou : si un autre chemin de
   rendu injecte un titre brut, il herite du meme padding et ne peut pas se
   coller au bord (l'overflow:hidden le tranchait). */
.rsk-summary-h,
.rsk-summary h3 {
  margin: 0;
  padding: 13px var(--rsk-s5);
  background: var(--rsk-surface-2);
  border-bottom: 1px solid var(--rsk-line);
  font-family: var(--rsk-font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rsk-ink);
}
.rsk-summary-line,
.rsk-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px var(--rsk-s5);
  border-bottom: 1px solid var(--rsk-line);
}
.rsk-summary-line > span:first-child,
.rsk-summary-row > span:first-child {
  flex: none;
  font-size: 12.5px;
  color: var(--rsk-muted);
}
.rsk-summary-line > span:last-child,
.rsk-summary-row > strong {
  min-width: 0;
  text-align: right;
  font-size: 13.5px; font-weight: 600;
  color: var(--rsk-ink);
  /* Un email ou un nom de prestation tres long revient a la ligne au lieu de
     deborder de la carte (qui est en overflow:hidden). */
  overflow-wrap: anywhere;
}
.rsk-summary-line.discount > span:last-child { color: var(--rsk-success); }

.rsk-summary-seances {
  padding: 11px var(--rsk-s5);
  border-bottom: 1px solid var(--rsk-line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rsk-summary-seances > div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px; font-weight: 600;
  color: var(--rsk-ink);
}
.rsk-summary-seances > div::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--rsk-accent);
}

.rsk-summary-line.total,
.rsk-summary-row.rsk-summary-total,
.rsk-summary-total {
  padding: 15px var(--rsk-s5);
  background: var(--rsk-surface-2);
  border-bottom: none;
}
.rsk-summary-line.total > span:first-child,
.rsk-summary-total > span:first-child {
  font-size: 13px; font-weight: 600;
  color: var(--rsk-muted);
}
.rsk-summary-line.total > span:last-child,
.rsk-summary-total > strong {
  font-family: var(--rsk-font-display);
  font-size: 23px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rsk-ink);
}
.rsk-summary-note {
  margin: 0;
  padding: 11px var(--rsk-s5);
  background: var(--rsk-surface-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--rsk-muted);
}

/* Consigne au-dessus du calendrier (mode plage de dates) */
.rsk-multiday-instructions {
  margin-bottom: var(--rsk-s3);
  padding: 9px 12px;
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-sm);
  font-size: 12.5px; font-weight: 600;
  color: var(--rsk-body);
  text-align: center;
}

/* Prestation soumise a validation du prestataire */
.rsk-workflow-info {
  margin: var(--rsk-s3) 0;
  padding: 11px 14px;
  background: var(--rsk-surface-2);
  border-left: 3px solid var(--rsk-accent);
  border-radius: 0 var(--rsk-r-sm) var(--rsk-r-sm) 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rsk-body);
}

/* Note de bas d'étape (paiement sécurisé, etc.) */
.rsk-note {
  margin-top: var(--rsk-s4);
  padding: 11px 14px;
  background: var(--rsk-accent-tint);
  border: 1px solid color-mix(in srgb, var(--rsk-accent) 22%, #fff);
  border-radius: var(--rsk-r-md);
  font-size: 12.5px;
  color: var(--rsk-muted);
}

/* ═══════════════════════════════════════════════════════════════
   CODE PROMO & POINTS DE FIDÉLITÉ
   ═══════════════════════════════════════════════════════════════ */
.rsk-promo-section,
.rsk-points-section {
  margin-top: var(--rsk-s4);
  padding: var(--rsk-s4);
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
}
.rsk-promo-section label,
.rsk-points-section label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px; font-weight: 600;
  color: var(--rsk-body);
}
.rsk-promo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rsk-promo-row input,
.rsk-points-row input {
  flex: 1;
  min-width: 160px;
  padding: 10px 13px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--rsk-ink);
}
.rsk-promo-row input:focus,
.rsk-points-row input:focus {
  outline: none;
  border-color: var(--rsk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rsk-accent) 16%, transparent);
}
.rsk-points-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rsk-points-head strong {
  font-family: var(--rsk-font-display);
  font-size: 14px; font-weight: 700;
  color: var(--rsk-ink);
}
.rsk-points-balance { font-size: 12.5px; color: var(--rsk-muted); }
.rsk-points-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rsk-points-msg,
.rsk-promo-msg {
  margin-top: 8px;
  font-size: 12px;
  color: var(--rsk-muted);
}

/* ═══════════════════════════════════════════════════════════════
   DEMANDE EXPRESSE (droit de retractation)
   Volontairement sobre : ni encadre d'alerte, ni couleur d'avertissement.
   C'est une mention legale, pas une mise en garde -- la dramatiser ferait
   hesiter au moment precis ou le visiteur valide.
   ═══════════════════════════════════════════════════════════════ */
.rsk-retract {
  margin-top: var(--rsk-s4);
  padding: 14px 16px;
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
  transition: border-color var(--rsk-t-base) var(--rsk-ease), background var(--rsk-t-base) var(--rsk-ease);
}
.rsk-retract-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rsk-muted);
}
.rsk-retract-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--rsk-ink);
  cursor: pointer;
}
.rsk-retract-lien {
  display: inline-block;
  margin-top: 4px;
  color: var(--rsk-ink);
  text-decoration: underline;
}
/* Signale la case oubliee sans bloc d'erreur : le bouton n'a pas repondu,
   il faut que l'oeil retrouve pourquoi en une seconde. */
.rsk-retract-manquant {
  border-color: var(--rsk-accent);
  background: var(--rsk-accent-tint);
}
.rsk-retract-manquant .rsk-retract-label { color: var(--rsk-ink); }

/* ═══════════════════════════════════════════════════════════════
   BOUTONS & ACTIONS
   ═══════════════════════════════════════════════════════════════ */
.rsk-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--rsk-s5);
  padding-top: var(--rsk-s4);
  border-top: 1px solid var(--rsk-line);
}
.rsk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: none;
  border-radius: var(--rsk-r-full);
  background: var(--rsk-accent);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px -8px var(--rsk-accent);
  transition: transform var(--rsk-t-base) var(--rsk-ease),
              filter var(--rsk-t-base) var(--rsk-ease);
}
.rsk-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.rsk-btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.rsk-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.rsk-btn-pay { font-size: 15px; }
.rsk-btn-back {
  padding: 6px 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  color: var(--rsk-muted);
  cursor: pointer;
  transition: color var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-btn-back:hover { color: var(--rsk-ink); }
.rsk-btn-secondary {
  padding: 10px 18px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line-2);
  border-radius: var(--rsk-r-sm);
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  color: var(--rsk-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--rsk-t-fast) var(--rsk-ease),
              background var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-btn-secondary:hover { border-color: var(--rsk-ink); background: var(--rsk-surface-2); }

/* ═══════════════════════════════════════════════════════════════
   PAIEMENT
   ═══════════════════════════════════════════════════════════════ */
.rsk-payment-summary {
  margin-bottom: var(--rsk-s5);
  padding: var(--rsk-s5);
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
  font-size: 14px;
}
[id^="rsk-stripe-element-"] {
  padding: var(--rsk-s4);
  min-height: 60px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
}
.rsk-error {
  margin-top: var(--rsk-s3);
  padding: 11px 14px;
  background: var(--rsk-accent-tint);
  border: 1px solid var(--rsk-accent-soft);
  border-radius: var(--rsk-r-md);
  font-size: 13px;
  color: var(--rsk-accent-hover);
}

/* ═══════════════════════════════════════════════════════════════
   CONFIRMATION
   ═══════════════════════════════════════════════════════════════ */
.rsk-success { text-align: center; padding: var(--rsk-s8) var(--rsk-s4); }

/* « Ajouter une autre activité ? » (2.4.288) — après une réservation. */
.rsk-suite { padding: var(--rsk-s5) 0; }
.rsk-suite-ok {
  padding: 12px 14px; margin-bottom: var(--rsk-s4);
  background: #E8F3ED; color: var(--rsk-success);
  border-radius: var(--rsk-r-sm); font-size: 14px;
}
.rsk-suite-titre {
  font-family: var(--rsk-font-display);
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--rsk-ink); margin: 0 0 4px;
}
.rsk-suite-texte { font-size: 14px; color: var(--rsk-muted); margin: 0 0 var(--rsk-s4); }
.rsk-suite-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rsk-suite-item {
  display: grid;
  grid-template-columns: 64px auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 12px;
  padding: 10px; border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md); background: var(--rsk-surface);
}
.rsk-suite-photo {
  width: 64px; height: 48px; border-radius: var(--rsk-r-sm);
  object-fit: cover; background: var(--rsk-line); display: block;
}
.rsk-suite-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; padding: 4px 6px; border-radius: var(--rsk-r-sm);
  background: var(--rsk-accent-tint); color: var(--rsk-accent);
  font-size: 11px; text-transform: uppercase; line-height: 1.1;
}
.rsk-suite-date b { font-size: 17px; }
.rsk-suite-date.est-rdv { font-weight: 700; }
.rsk-suite-infos { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.rsk-suite-nom {
  font-weight: 700; color: var(--rsk-ink); font-size: 14.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsk-suite-quand { font-size: 12.5px; color: var(--rsk-muted); }
.rsk-suite-places { font-size: 12px; color: var(--rsk-success); font-weight: 600; }
.rsk-suite-prix { font-weight: 700; color: var(--rsk-ink); white-space: nowrap; }
.rsk-suite-ajouter {
  border: 1px solid var(--rsk-ink); background: transparent; color: var(--rsk-ink);
  border-radius: var(--rsk-r-full); padding: 8px 16px; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--rsk-t-fast) var(--rsk-ease), color var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-suite-ajouter:hover, .rsk-suite-ajouter:focus-visible { background: var(--rsk-ink); color: #fff; }
.rsk-suite-choisis { margin-top: var(--rsk-s4); font-size: 13px; color: var(--rsk-muted); }
.rsk-suite-choisis ul { margin: 4px 0 0; padding-left: 18px; }
.rsk-suite-pied { margin-top: var(--rsk-s5); display: flex; justify-content: flex-end; }
.rsk-suite-payer { width: auto; }
/* 2.4.299 : le theme repeint le texte au survol, il devenait illisible. */
.rsk-container .rsk-suite-payer, .rsk-container .rsk-suite-payer:hover,
.rsk-container .rsk-suite-payer:focus { color: #fff !important; background: var(--rsk-accent) !important; }
@container (max-width: 560px) {
  .rsk-suite-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rsk-suite-photo { display: none; }
  .rsk-suite-prix { grid-column: 2; grid-row: 2; }
  .rsk-suite-ajouter { grid-column: 3; grid-row: 1 / span 2; }
  .rsk-suite-pied { justify-content: stretch; }
  .rsk-suite-payer { width: 100%; }
}
/* Ecran "Demande envoyee" : pas de wrapper .rsk-success, l'icone porte seule
   la mise en page. Sans cette regle elle s'affichait en glyphe brut colle au titre. */
.rsk-conf-icon {
  display: block;
  margin: 0 auto var(--rsk-s4);
  font-size: 46px;
  line-height: 1;
  text-align: center;
}
.rsk-success-icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--rsk-s5);
  border-radius: var(--rsk-r-full);
  background: var(--rsk-ink);
  color: #fff;
  display: grid; place-items: center;
  font-size: 28px; font-weight: 700;
  box-shadow: 0 0 0 6px var(--rsk-accent-tint);
}
.rsk-success h2 {
  font-family: var(--rsk-font-display);
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--rsk-ink);
  margin: 0 0 var(--rsk-s2);
}
.rsk-success h2::before { display: none; }
.rsk-success p {
  margin: 0 0 var(--rsk-s2);
  font-size: 14px;
  color: var(--rsk-muted);
}
.rsk-success p strong { color: var(--rsk-ink); font-weight: 700; }
.rsk-text-muted { color: var(--rsk-muted); }

/* ═══════════════════════════════════════════════════════════════
   OVERLAY DE CHARGEMENT
   ═══════════════════════════════════════════════════════════════ */
.rsk-loading {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
}
.rsk-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--rsk-line-2);
  border-top-color: var(--rsk-accent);
  border-radius: var(--rsk-r-full);
  animation: rsk-spin 700ms linear infinite;
}
@keyframes rsk-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   ÉTAT 2 - sidebar RÉDUITE (numéros seuls) : conteneur moyen
   ═══════════════════════════════════════════════════════════════ */
@container rsk (max-width: 940px) {
  /* Mode compact : la barre d'etapes devient une fine colonne d'icones.
     On IGNORE la largeur personnalisee (--rsk-side-w) ici, sinon la sidebar
     resterait large et vide alors que les libelles sont masques -> tout
     l'espace supplementaire doit aller a la zone centrale. */
  .rsk-shell { grid-template-columns: 72px minmax(0, 1fr); }
  .rsk-sidebar { padding: var(--rsk-s5) 10px; align-items: center; gap: var(--rsk-s5); }
  .rsk-brand-name,
  .rsk-step-body,
  .rsk-contact-block h4,
  .rsk-contact-item span { display: none; }
  .rsk-brand-mark { width: 34px; height: 34px; }
  .rsk-side-steps { align-items: center; gap: 6px; width: 100%; }
  .rsk-side-steps .rsk-step { justify-content: center; padding: 6px 0; width: 100%; }
  .rsk-side-steps .rsk-step:not(:last-child)::before {
    left: 50%;
    transform: translateX(-0.5px);
    top: 32px;
  }
  .rsk-contact-block { width: 100%; align-items: center; }
  .rsk-contact-item { justify-content: center; }
  /* Colonne repliee : description + second message passent sous la phrase
     d'aide de l'etape 3 (2.4.244). */
  .rsk-side-infos { display: none !important; }
  .rsk-step-infos:not(.rsk-hidden) { display: block; }
  .rsk-main-body { padding: var(--rsk-s6); }
  .rsk-cal-card.has-slots { grid-template-columns: minmax(0, 1fr) 232px; }
}

/* ═══════════════════════════════════════════════════════════════
   ÉTAT 3 - sidebar EN HAUT (bande horizontale) : conteneur étroit
   ═══════════════════════════════════════════════════════════════ */
@container rsk (max-width: 680px) {
  .rsk-shell { grid-template-columns: minmax(0, 1fr); }
  .rsk-sidebar {
    flex-direction: row;
    align-items: center;
    gap: var(--rsk-s4);
    border-right: none;
    border-bottom: 1px solid var(--rsk-line);
    padding: var(--rsk-s3) var(--rsk-s4);
  }
  .rsk-brand-mark { width: 30px; height: 30px; font-size: 14px; }
  .rsk-side-steps {
    flex-direction: row;
    gap: 4px;
    flex: 1;
    justify-content: space-between;
    width: auto;
  }
  .rsk-side-steps .rsk-step { flex: 1 1 0; min-width: 0; padding: 4px 0; }
  .rsk-side-steps .rsk-step:not(:last-child)::before { display: none; }
  .rsk-step-mark { width: 26px; height: 26px; }
  .rsk-sidebar-spacer,
  .rsk-contact-block { display: none; }
  .rsk-main-body { padding: var(--rsk-s5) var(--rsk-s4); }
  /* Les creneaux restent A DROITE du calendrier : voir le palier 560px. */
  .rsk-employes-cards,
  .rsk-mstrip { grid-template-columns: minmax(0, 1fr); }
  .rsk-form-grid { grid-template-columns: 1fr; }
  .rsk-form-group-full { grid-column: auto; }
  .rsk-panel h2 { font-size: 21px; }
  .rsk-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .rsk-btn { justify-content: center; }
  .rsk-btn-back { text-align: center; }
  .rsk-offre { flex-direction: column; }
  .rsk-offre-img {
    width: 100%; height: 120px;
    border-right: none;
    border-bottom: 1px solid var(--rsk-line);
  }
  .rsk-offre-add { align-self: flex-end; margin: 0 16px 14px; }
}

/* En dessous, plus la place pour deux colonnes : les creneaux passent dessous. */
@container rsk (max-width: 560px) {
  .rsk-cal-card.has-slots { grid-template-columns: minmax(0, 1fr); }
}

@container rsk (max-width: 420px) {
  /* Conteneur tres etroit : 7 colonnes, on retombe sur une echelle reduite.
     Le token garde la hierarchie entre les trois tailles. */
  .rsk-cal-day { font-size: var(--rsk-cal-font-sm, 12px); border-radius: 8px; }
  .rsk-main-body { padding: var(--rsk-s4) var(--rsk-s3); }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════ */
.rsk-container button:focus-visible,
.rsk-container input:focus-visible,
.rsk-container select:focus-visible,
.rsk-container textarea:focus-visible,
.rsk-container a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rsk-accent-ring);
}

@media (prefers-reduced-motion: reduce) {
  .rsk-container *,
  .rsk-container *::before,
  .rsk-container *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Le defilement doit s ARRETER, pas tourner 1000 fois plus vite : une
     duree quasi nulle sur une animation infinie produirait un clignotement. */
  .rsk-promo[data-mode="defile"] .rsk-promo-txt {
    animation: none !important;
  }
}

/* ===================================================================
   STUDIO D'APPARENCE - overrides pilotes par tokens (form_design)
   =================================================================== */
.rsk-container .rsk-service-card { background: var(--rsk-card, var(--rsk-surface)); }
.rsk-container .rsk-sidebar { background: var(--rsk-sidebar, transparent); }
.rsk-container .rsk-service-price { color: var(--rsk-price, var(--rsk-accent)); }
.rsk-side-steps .rsk-step.active .rsk-step-mark { background: var(--rsk-step-active, var(--rsk-accent)); }

.rsk-container[data-rsk-slot="pill"] .rsk-slot,
.rsk-container[data-rsk-slot="pill"] .rsk-cal-day { border-radius: 999px; }
.rsk-container[data-rsk-slot="solid"] .rsk-slot.selected,
.rsk-container[data-rsk-slot="solid"] .rsk-slot.active { background: var(--rsk-select, var(--rsk-accent)); color: #fff; }

.rsk-container[data-rsk-btn="gradient"] .rsk-btn:not(.rsk-btn-back):not(.rsk-btn-secondary):not(.rsk-btn-icon) {
  background: linear-gradient(135deg, var(--rsk-accent), var(--rsk-accent-hover));
}
.rsk-container[data-rsk-btn="glow"] .rsk-btn:not(.rsk-btn-back):not(.rsk-btn-secondary):not(.rsk-btn-icon) {
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--rsk-accent) 60%, transparent),
              0 0 calc(var(--rsk-glow, 40) * 0.5px) color-mix(in srgb, var(--rsk-accent) calc(var(--rsk-glow, 40) * 1%), transparent);
}
.rsk-container[data-rsk-total="badge"] .rsk-summary-total {
  border: 1px solid var(--rsk-line-2); border-radius: 999px; padding: 6px 16px;
  background: color-mix(in srgb, var(--rsk-accent) 6%, transparent);
}
.rsk-container[data-rsk-total="glow"] .rsk-summary-total {
  text-shadow: 0 0 20px color-mix(in srgb, var(--rsk-accent) 55%, transparent);
}

/* Theme sombre : palette de base (surchargee par les couleurs choisies) */
.rsk-container[data-rsk-theme="sombre"] {
  --rsk-bg: #06110f; --rsk-surface: #0e211d; --rsk-surface-2: #102924; --rsk-card: #0e211d;
  --rsk-ink: #eafff7; --rsk-body: #9fc6ba; --rsk-muted: #6f948a;
  --rsk-line: rgba(255,255,255,.10); --rsk-line-2: rgba(255,255,255,.18);
  --rsk-sidebar: #0b1c18; --rsk-surface-2: #102924;
  /* --rsk-ink est ici presque blanc : ce qui se pose dessus doit etre sombre,
     sinon le jour retenu affichait du blanc sur du blanc. */
  --rsk-on-ink: #06110f;
  background: var(--rsk-bg);
}

/* Taille des cases du calendrier, par emplacement (shortcode "calendrier",
   controle Elementor "Taille du calendrier"). « moyen » est la taille
   d'origine : elle ne redefinit rien, elle laisse les valeurs de repli.
   A distinguer de --rsk-cal-zoom ci-dessous, qui est un reglage GLOBAL du
   studio d'apparence et agrandit tout le bloc calendrier d'un coup. */
.rsk-container[data-rsk-cal="petit"] {
  --rsk-cal-cell: 27px; --rsk-cal-font: 13px; --rsk-cal-font-sm: 11px;
  --rsk-cal-gap: 2px;  --rsk-cal-pad: 5px;  --rsk-cal-dot: 4px;
}
.rsk-container[data-rsk-cal="grand"] {
  --rsk-cal-cell: 46px; --rsk-cal-font: 17px; --rsk-cal-font-sm: 14px;
  --rsk-cal-gap: 5px;  --rsk-cal-pad: 9px;  --rsk-cal-dot: 7px;
}

/* Dimensions & mise en page (studio) */
.rsk-cal-card { zoom: var(--rsk-cal-zoom, 1); }
.rsk-container[data-rsk-sidebar="off"] .rsk-sidebar { display: none; }
.rsk-container[data-rsk-sidebar="off"] .rsk-shell { grid-template-columns: minmax(0, 1fr); }

/* Galerie d'images d'une offre premium (max 4, en ligne sous le texte) */
.rsk-offre-gal { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rsk-offre-gimg {
  position: relative;
  width: 96px; height: 96px; flex: 0 0 auto;
  border-radius: var(--rsk-r-sm, 10px);
  overflow: hidden;
  border: 1px solid var(--rsk-line);
}
.rsk-offre-gimgel {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Rappel du nom de la prestation en haut du tunnel (toutes etapes).
   C'est le TITRE de contexte : a 12px il passait inapercu (retour de
   Lovinsky, 22/09/2026). Il suit maintenant la largeur du CONTENEUR
   (`cqi`), comme le titre d'etape juste en dessous -- pas la largeur de
   l'ecran, le tunnel pouvant vivre dans une colonne etroite.
   Plafonne a 20px quand le titre d'etape monte a 26px : il doit se voir,
   pas prendre sa place dans la hierarchie.
   Le crenage suit la taille : 0.12em est juste a 12px, et ecarte trop
   les lettres a 20px. */
.rsk-presta-bar {
  font-size: clamp(15px, 2.1cqi, 20px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rsk-accent);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rsk-line);
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════
   OPTIONS DE LA PRESTATION                              2.4.222
   duree retenue · nombre de personnes · billets · serie · attente

   🔴 Ces classes sont generees par booking.js. Une classe produite
   par le JS SANS regle ici n'herite de rien et se fait TRANCHER :
   .rsk-container et .rsk-summary sont en overflow:hidden, donc
   l'element ne deborde meme pas visiblement. C'est le piege qui a
   coute les « titres mordus » de la 2.4.95.

   Tout passe par les tokens --rsk-* de la tete de fichier : aucun
   px de mise en forme en dur, sinon les controles Elementor
   cessent d'etre effectifs.
   ══════════════════════════════════════════════════════════════ */

.rsk-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rsk-s5);
  margin-bottom: var(--rsk-s5);
  padding: var(--rsk-s5);
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-lg);
}

.rsk-opts-bloc { flex: 1 1 220px; min-width: 0; }

.rsk-opts-label {
  margin-bottom: var(--rsk-s1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rsk-muted);
}

.rsk-opts-choix { display: flex; flex-wrap: wrap; gap: var(--rsk-s1); }

/* Un bouton de choix. Il a l'air cliquable ET il l'est : le CSS ne
   promet jamais une interaction que le JS ne tient pas (bug 2.4.212). */
.rsk-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line-2);
  border-radius: var(--rsk-r-md);
  font-family: var(--rsk-font);
  color: var(--rsk-body);
  cursor: pointer;
  transition: border-color var(--rsk-t-fast) var(--rsk-ease),
              background var(--rsk-t-fast) var(--rsk-ease);
}

.rsk-opt b { font-size: 14px; font-weight: 600; color: var(--rsk-ink); }
.rsk-opt span { font-size: 12px; color: var(--rsk-muted); }

.rsk-opt:hover { border-color: var(--rsk-accent-soft); background: var(--rsk-accent-tint); }

.rsk-opt.est-actif {
  border-color: var(--rsk-accent);
  background: var(--rsk-accent-tint);
  box-shadow: 0 0 0 3px var(--rsk-accent-ring);
}
.rsk-opt.est-actif b { color: var(--rsk-accent); }

.rsk-opt:focus-visible,
.rsk-opt-pm:focus-visible,
.rsk-billet:focus-visible {
  outline: 2px solid var(--rsk-accent);
  outline-offset: 2px;
}

/* ── Nombre de personnes ─────────────────────────────────────── */

.rsk-opts-nb { display: flex; align-items: center; gap: var(--rsk-s1); }

.rsk-opt-pm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line-2);
  border-radius: var(--rsk-r-full);
  font-size: 17px;
  line-height: 1;
  color: var(--rsk-ink);
  cursor: pointer;
  transition: border-color var(--rsk-t-fast) var(--rsk-ease);
}
.rsk-opt-pm:hover { border-color: var(--rsk-accent); color: var(--rsk-accent); }

.rsk-opts-nbval {
  min-width: 28px;
  font-family: var(--rsk-font-display);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: var(--rsk-ink);
}

.rsk-opts-nbmax { font-size: 12px; color: var(--rsk-faint); }

/* ── Billets ─────────────────────────────────────────────────── */

.rsk-billets { margin-top: var(--rsk-s5); }

.rsk-billets-h {
  margin-bottom: var(--rsk-s1);
  font-family: var(--rsk-font-display);
  font-size: 15px;
  color: var(--rsk-ink);
}

.rsk-billet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rsk-s5);
  width: 100%;
  margin-bottom: 6px;
  padding: 11px 14px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line-2);
  border-radius: var(--rsk-r-md);
  font-family: var(--rsk-font);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--rsk-t-fast) var(--rsk-ease);
}

.rsk-billet:hover:not(:disabled) { border-color: var(--rsk-accent-soft); }

.rsk-billet.est-actif {
  border-color: var(--rsk-accent);
  background: var(--rsk-accent-tint);
  box-shadow: 0 0 0 3px var(--rsk-accent-ring);
}

/* Un tarif epuise reste LISIBLE : le masquer ferait croire qu'il n'a
   jamais existe, et le visiteur chercherait le tarif qu'on lui a promis. */
.rsk-billet.est-epuise { opacity: 0.5; cursor: not-allowed; }

.rsk-billet-nom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--rsk-ink);
}
.rsk-billet-nom small { font-size: 12px; font-weight: 400; color: var(--rsk-muted); }

.rsk-billet-prix {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  font-family: var(--rsk-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--rsk-accent);
}
.rsk-billet-prix small { font-size: 11px; font-weight: 400; color: var(--rsk-faint); }

/* ── Serie recurrente ───────────────────────────────────────── */

.rsk-recur {
  margin-top: var(--rsk-s5);
  padding: var(--rsk-s5);
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
}

.rsk-recur-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--rsk-ink);
  cursor: pointer;
}

.rsk-recur-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: var(--rsk-s1);
  font-size: 13px;
  color: var(--rsk-body);
}

/* box-sizing obligatoire sur tout champ public : width:100% + padding
   sans lui fait un champ plus large que sa colonne, qui mange la
   gouttiere. Ne jamais compter sur le theme du site pour le poser. */
.rsk-recur-detail select,
.rsk-recur-detail input {
  box-sizing: border-box;
  padding: 7px 10px;
  background: var(--rsk-surface);
  border: 1px solid var(--rsk-line-2);
  border-radius: var(--rsk-r-sm);
  font-family: var(--rsk-font);
  font-size: 13px;
  color: var(--rsk-ink);
}

.rsk-recur-detail input[type="number"] { width: 70px; }

.rsk-recur-note {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--rsk-faint);
}

/* ── « Me prévenir » dans le tunnel ─────────────────────────── */

/* 2.4.231 : le FORMULAIRE vient du composant partagé (attente.css). Ici
   on ne garde que le CADRE, et on donne au composant les couleurs du
   tunnel -- sinon il garderait son indigo par défaut sur un tunnel rouge.

   Les anciennes règles .rsk-attente-h / -txt / -form / -etat sont
   RETIRÉES : plus aucun code ne produit ces classes. */
.rsk-container {
  --rsk-att-accent: var(--rsk-accent, #17161A);
  --rsk-att-ink: var(--rsk-ink, #17161A);
  --rsk-att-muted: var(--rsk-muted, #6B6875);
  --rsk-att-faint: var(--rsk-faint, #9C99A6);
  --rsk-att-line: var(--rsk-line-2, #DEDBE3);
  --rsk-att-r: var(--rsk-r-md, 10px);
}

.rsk-attente {
  margin-top: var(--rsk-s5);
  padding: var(--rsk-s5);
  background: var(--rsk-accent-tint);
  border: 1px solid var(--rsk-accent-soft);
  border-radius: var(--rsk-r-md);
}

/* Sous « aucun créneau disponible » : même cadre, plus d'air au-dessus. */
.rsk-cal-attente {
  margin-top: var(--rsk-s5);
  padding: var(--rsk-s5);
  background: var(--rsk-surface-2);
  border: 1px solid var(--rsk-line);
  border-radius: var(--rsk-r-md);
}

/* Un bloc etroit : c'est la place DISPONIBLE qui decide, pas la
   largeur de l'ecran. Un widget peut vivre dans une colonne de
   300 px sur un ecran de 1920. */
@container (max-width: 480px) {
  .rsk-opts { flex-direction: column; }
  .rsk-billet { flex-wrap: wrap; }
}

/* 2.4.346 : petite carte du lieu (meme forme que la fenetre du Planning des
   cours et le panneau de l'Agenda) : carte carree a cote de l'adresse, rendue
   en double puis reduite (l'interface de Google masquait la carte), clic =
   Google Maps en grand. Valeurs de repli partout. */
.rsk-lieu-mini { display: flex; align-items: center; gap: 14px; margin: 14px 0; text-align: left; }
.rsk-lieu-mini-carte { position: relative; flex: none; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid #E6EAF0; background: #EEF1F5; }
.rsk-lieu-mini-carte iframe { position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 0; display: block; transform: scale(.5); transform-origin: 0 0; pointer-events: none; max-width: none !important; max-height: none !important; min-width: 0 !important; margin: 0 !important; }
.rsk-lieu-mini-carte a { position: absolute; inset: 0; z-index: 2; }
.rsk-lieu-mini-txt { min-width: 0; }
.rsk-lieu-mini-titre { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #93A0B4; font-weight: 700; }
.rsk-lieu-mini-adresse { margin: 4px 0 8px; font-size: 14px; font-weight: 700; color: #12336B; overflow-wrap: anywhere; }
.rsk-lieu-mini a.rsk-lieu-mini-iti, .rsk-lieu-mini a.rsk-lieu-mini-iti:hover, .rsk-lieu-mini a.rsk-lieu-mini-iti:visited { font-size: 13px; font-weight: 700; color: #B28E4B; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) { .rsk-lieu-mini-carte { width: 96px; height: 96px; } }

/* 2.4.355 : ce cours ou un pack, ou utiliser un crédit. */
.rsk-pack-choix:empty { display: none; }
.rsk-pack-choix { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.rsk-pack-titre { font-weight: 700; font-size: 15px; color: var(--rsk-ink, #1C1917); }
.rsk-container .rsk-pack-opt, .rsk-container .rsk-pack-opt:hover, .rsk-container .rsk-pack-opt:focus { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--rsk-line, #E7E5E4); border-radius: 12px; background: #fff; color: var(--rsk-ink, #1C1917); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; white-space: normal; cursor: pointer; box-shadow: none; }
.rsk-container .rsk-pack-opt:hover { border-color: var(--rsk-accent, #17161A); }
.rsk-container .rsk-pack-opt:focus-visible { outline: 2px solid var(--rsk-accent, #17161A); outline-offset: 2px; }
.rsk-container .rsk-pack-opt.est-actif { border-color: var(--rsk-accent, #17161A); background: #FBF6EC; }
.rsk-pack-l { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rsk-pack-nom { font-weight: 700; }
.rsk-pack-prix { font-weight: 800; font-size: 16px; white-space: nowrap; }
.rsk-pack-prix s { font-weight: 500; font-size: 13px; opacity: .6; }
.rsk-pack-det { display: block; margin-top: 3px; font-size: 13px; opacity: .75; }
.rsk-pack-gain { display: inline-block; margin-top: 8px; padding: 3px 11px; border-radius: 99px; background: #E8F6EF; color: #0F7B4F; font-weight: 800; font-size: 15px; }
.rsk-pack-exp { display: none; margin-top: 9px; font-size: 13px; white-space: pre-line; }
.rsk-pack-opt.est-actif .rsk-pack-exp { display: block; }