/* ═══════════════════════════════════════════════════════════════════════
   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) */
  --rsk-accent:       #C93622;
  --rsk-accent-hover: #A52B1A;
  --rsk-accent-tint:  #FDF1EE;
  --rsk-accent-soft:  #F5D3CD;
  --rsk-accent-ring:  rgba(201, 54, 34, 0.20);

  /* 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; }
.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);
}
.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);
}
.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; }
.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;
}
.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; }
}

.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-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rsk-muted);
  white-space: pre-line;
}
.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);
}
.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); }
/* 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; }
  .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) */
.rsk-presta-bar {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rsk-accent);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rsk-line);
  line-height: 1.4;
}