/* ============================================================
   SereniBook — Formulaire de réservation (public)
   ============================================================ */
/* Polices : valeurs de repli, surchargées à la volée par SB_Fonts
   (la version Pro pourra les remplacer). */
:root {
	--sb-font-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sb-font-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.sb-booking {
	--sg: #7C9A92; --sg-dk: #5d7a72; --tr: #D4A574;
	--bd: #e6e8e4; --tx: #2d3436; --mut: #6b7280; --bg: #f6f7f5;
	max-width: 620px; margin: 0 auto; box-sizing: border-box;
	background: #fff; border: 1px solid var(--bd); border-radius: 16px; padding: 26px;
	font-family: var(--sb-font-texte);
	color: var(--tx); font-size: 15px; line-height: 1.5;
}

/* Fraunces pour les titres, boutons et CTA */
.sb-booking .sb-bk-h3,
.sb-booking .sb-bk-nom,
.sb-booking .sb-bk-svc__nom,
.sb-booking .sb-cx-course__nom,
.sb-cx-modal__title {
	font-family: var(--sb-font-titre); font-weight: 600; letter-spacing: -.01em;
}
.sb-booking .sb-bk-btn, .sb-cx-modal .sb-bk-btn {
	font-family: var(--sb-font-titre); font-weight: 600; letter-spacing: -.005em;
}
.sb-booking input, .sb-booking select, .sb-booking textarea, .sb-booking label { font-family: var(--sb-font-texte); }
.sb-booking *, .sb-booking *::before, .sb-booking *::after { box-sizing: border-box; }
.sb-booking button { font-family: inherit; cursor: pointer; }

/* En-tête praticien : logo au-dessus, nom + adresse en dessous */
.sb-bk-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--bd); margin-bottom: 20px; }
.sb-bk-logo { display: inline-flex; align-items: center; height: 46px; }
.sb-bk-logo img { height: 46px; width: auto; max-width: 190px; object-fit: contain; display: block; }
.sb-bk-logo--txt { width: 46px; height: 46px; justify-content: center; border-radius: 13px; background: var(--sg); color: #fff; font-size: 22px; font-weight: 700; font-family: Georgia, serif; }
.sb-bk-ident { display: flex; flex-direction: column; gap: 3px; }
.sb-bk-nom { font-size: 1.2rem; font-weight: 700; color: var(--tx); }
.sb-bk-adresse { display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--mut); }
.sb-bk-adresse svg { color: var(--sg); }

/* Fil d'étapes */
.sb-bk-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; font-size: .8rem; color: #b3b8b4; margin-bottom: 22px; }
.sb-bk-steps span { position: relative; padding: 0 2px; }
.sb-bk-steps span:not(:last-child)::after { content: '·'; margin: 0 7px; color: #cfd4d0; }
.sb-bk-steps span.is-done { color: var(--sg); }
.sb-bk-steps span.is-active { color: var(--sg-dk); font-weight: 700; }

/* Progression compacte : réservée au mobile (voir la media query). */
.sb-bk-prog { display: none; margin-bottom: 20px; }
.sb-bk-prog__bar { height: 5px; background: #eef0ed; border-radius: 99px; overflow: hidden; margin-bottom: 8px; }
.sb-bk-prog__bar i { display: block; height: 100%; width: 25%; border-radius: 99px;
	background: linear-gradient( 90deg, var(--sg), var(--sg-dk) ); transition: width .3s ease; }
.sb-bk-prog__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sb-bk-prog__etape { font-size: .78rem; font-weight: 600; color: var(--sg-dk); }
.sb-bk-prog__num { font-size: .74rem; color: var(--mut); flex: 0 0 auto; }

/* Panneaux */
.sb-bk-panel { display: none; }
.sb-bk-panel.is-active { display: block; animation: sb-bk-in .28s ease; }
@keyframes sb-bk-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sb-bk-h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 16px; color: var(--tx); }
.sb-bk-empty, .sb-bk-hint { color: var(--mut); font-size: .9rem; text-align: center; padding: 18px 0; margin: 0; }

/* Services */
.sb-bk-services { display: flex; flex-direction: column; gap: 10px; }
.sb-bk-svc { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--bd); border-radius: 12px; padding: 14px 16px; transition: border-color .15s, background .15s; }
.sb-bk-svc:hover { border-color: #ccd3cf; }
.sb-bk-svc.is-on { border-color: var(--sg); background: #f3f7f5; }
.sb-bk-svc__main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-bk-svc__nom { font-size: .98rem; font-weight: 600; color: var(--tx); }
.sb-bk-svc__desc { font-size: .84rem; color: var(--mut); line-height: 1.45; }
.sb-bk-svc__meta { font-size: .84rem; color: var(--sg-dk); font-weight: 600; margin-top: 2px; }
.sb-bk-svc__check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef1ef; color: transparent; transition: background .15s, color .15s; }
.sb-bk-svc.is-on .sb-bk-svc__check { background: var(--sg); color: #fff; }

/* Semaine + jours */
.sb-bk-week { display: flex; align-items: stretch; gap: 8px; margin-bottom: 16px; }
.sb-bk-weeknav { flex: 0 0 auto; width: 36px; border: 1.5px solid var(--bd); background: #fff; border-radius: 10px; font-size: 1.3rem; line-height: 1; color: var(--mut); }
.sb-bk-weeknav:hover { border-color: var(--sg); color: var(--sg); }
.sb-bk-days { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sb-bk-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 2px; border: 1.5px solid var(--bd); background: #fff; border-radius: 10px; color: var(--tx); }
.sb-bk-day:hover:not(:disabled) { border-color: var(--sg); }
.sb-bk-day.is-on { border-color: var(--sg); background: var(--sg); color: #fff; }
.sb-bk-day:disabled { opacity: .35; cursor: not-allowed; }
.sb-bk-day__n { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.sb-bk-day__d { font-size: 1.1rem; font-weight: 700; }
.sb-bk-day__m { font-size: .62rem; opacity: .75; }

/* Créneaux */
.sb-bk-slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.sb-bk-slot { padding: 10px 6px; border: 1.5px solid var(--bd); background: #fff; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--tx); }
.sb-bk-slot:hover { border-color: var(--sg); }
.sb-bk-slot.is-on { border-color: var(--sg); background: var(--sg); color: #fff; }

/* Formulaire */
.sb-bk-form { display: flex; flex-direction: column; gap: 14px; }
.sb-bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-bk-field { display: flex; flex-direction: column; gap: 5px; }
.sb-bk-field label { font-size: .8rem; font-weight: 600; color: var(--tx); }
.sb-bk-field input, .sb-bk-field textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--bd); border-radius: 9px; font-size: .92rem; font-family: inherit; color: var(--tx); background: #fff; }
.sb-bk-field input:focus, .sb-bk-field textarea:focus { outline: none; border-color: var(--sg); box-shadow: 0 0 0 3px rgba(124,154,146,.14); }
.sb-bk-consent { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--mut); line-height: 1.4; }
.sb-bk-consent input { margin-top: 3px; }
.sb-bk-err { color: #dc2626; font-size: .86rem; margin: 4px 0 0; }

/* Navigation */
.sb-bk-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.sb-bk-btn { padding: 11px 22px; border-radius: 10px; border: none; font-size: .92rem; font-weight: 600; background: var(--sg); color: #fff; transition: background .15s, opacity .15s; }
.sb-bk-btn:hover:not(:disabled) { background: var(--sg-dk); }
.sb-bk-btn:disabled { opacity: .45; cursor: not-allowed; }
.sb-bk-btn--ghost { background: transparent; color: var(--tx); border: 1.5px solid var(--bd); }
.sb-bk-btn--ghost:hover { background: var(--bg); }

/* Confirmation */
.sb-bk-done { text-align: center; padding: 16px 0; }
.sb-bk-done__ico { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: #eaf3ef; color: var(--sg); margin-bottom: 12px; }
.sb-bk-done__msg { color: var(--mut); font-size: .9rem; margin: 0 0 18px; }
.sb-bk-recap { text-align: left; max-width: 340px; margin: 0 auto; }
.sb-bk-ics { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; text-decoration: none; }
.sb-bk-recap__row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #eef0ed; font-size: .9rem; }
.sb-bk-recap__row span { color: var(--mut); }
.sb-bk-recap__row strong { color: var(--tx); }

/* Watermark */
.sb-bk-watermark { text-align: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--bd); font-size: .78rem; color: #a5aaa6; }
.sb-bk-watermark a { color: var(--sg); text-decoration: none; font-weight: 600; }

@media ( max-width: 560px ) {
	.sb-booking { padding: 18px; }
	.sb-bk-row { grid-template-columns: 1fr; }

	/* 7 jours ne tiennent pas sur un écran étroit : au lieu de les écraser
	   (noms et chiffres coupés en deux), la bande devient défilable. */
	.sb-bk-days {
		display: flex !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.sb-bk-days::-webkit-scrollbar { display: none; }
	.sb-bk-day { flex: 0 0 54px; scroll-snap-align: start; }

	/* Les 4 libellés ne tiennent pas sur une ligne : on remplace le fil
	   d'étapes par une barre de progression, comme le configurateur admin. */
	.sb-booking .sb-bk-steps { display: none; }
	.sb-booking .sb-bk-prog { display: block; }

	/* Côte à côte, les deux boutons réclament ~315 px pour 281 disponibles :
	   les mots se coupaient en plein milieu. On les empile en pleine largeur,
	   action principale au-dessus (column-reverse : elle est en dernier dans le HTML). */
	.sb-booking .sb-bk-nav {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 10px;
	}
	.sb-booking .sb-bk-nav .sb-bk-btn { width: 100%; white-space: nowrap; }
}

/* Le contenu d'un jour ne doit jamais se couper sur plusieurs lignes. */
.sb-bk-day__n, .sb-bk-day__d, .sb-bk-day__m { white-space: nowrap; }

/* ============================================================
   Overrides défensifs : le plugin doit primer sur le thème
   ============================================================ */
/* Neutralise les marges/paddings ajoutés par le thème (gros espace au-dessus des services) */
.sb-booking h1, .sb-booking h2, .sb-booking h3, .sb-booking h4, .sb-booking p, .sb-booking figure { margin: 0; }
.sb-booking nav, .sb-booking section, .sb-booking ul, .sb-booking ol { margin: 0; padding: 0; }
.sb-booking .sb-bk-panel { padding: 0; }
.sb-booking .sb-bk-steps { margin-bottom: 22px; }
.sb-booking .sb-bk-h3 { margin: 0 0 16px; }

/* Neutralise l'apparence native + le fond bleu du thème au survol */
.sb-booking button { -webkit-appearance: none; appearance: none; box-shadow: none; text-shadow: none; }
.sb-booking .sb-bk-svc:hover { background: #fff !important; border-color: #ccd3cf; }
.sb-booking .sb-bk-svc.is-on, .sb-booking .sb-bk-svc.is-on:hover { background: #f3f7f5 !important; border-color: var(--sg); }
/* Flèches semaine précédente / suivante : le thème imposait son bleu
   au survol, au focus et après clic. On verrouille nos couleurs. */
.sb-booking .sb-bk-weeknav,
.sb-booking .sb-bk-weeknav:hover,
.sb-booking .sb-bk-weeknav:focus,
.sb-booking .sb-bk-weeknav:active,
.sb-booking .sb-bk-weeknav:focus-visible {
	background: #fff !important;
	box-shadow: none !important;
	outline: none !important;
}
.sb-booking .sb-bk-weeknav:hover,
.sb-booking .sb-bk-weeknav:focus,
.sb-booking .sb-bk-weeknav:active { border-color: var(--sg) !important; color: var(--sg) !important; }
/* Accessibilité : on garde un repère visible au clavier. */
.sb-booking .sb-bk-weeknav:focus-visible { box-shadow: 0 0 0 3px rgba(124,154,146,.35) !important; }

.sb-booking .sb-bk-day:hover:not(:disabled) { background: #fff !important; border-color: var(--sg); }
.sb-booking .sb-bk-day.is-on, .sb-booking .sb-bk-day.is-on:hover { background: var(--sg) !important; color: #fff; }
.sb-booking .sb-bk-slot:hover { background: #fff !important; border-color: var(--sg); }
.sb-booking .sb-bk-slot.is-on, .sb-booking .sb-bk-slot.is-on:hover { background: var(--sg) !important; color: #fff; }
/* Boutons : le thème reprenait la main sur :focus et sur l'état désactivé
   (les règles ne visaient que :hover:not(:disabled)). On verrouille tout. */
.sb-booking .sb-bk-btn,
.sb-booking .sb-bk-btn:disabled,
.sb-booking .sb-bk-btn:focus,
.sb-booking .sb-bk-btn:focus-visible,
.sb-booking .sb-bk-btn:active,
.sb-cx-modal .sb-bk-btn:focus,
.sb-cx-modal .sb-bk-btn:active { background: var(--sg) !important; color: #fff !important; box-shadow: none !important; outline: none !important; }
.sb-booking .sb-bk-btn:hover:not(:disabled),
.sb-booking .sb-bk-btn:focus:not(:disabled) { background: var(--sg-dk) !important; }
.sb-booking .sb-bk-btn:focus-visible { box-shadow: 0 0 0 3px rgba(124,154,146,.35) !important; }

.sb-booking .sb-bk-btn--ghost,
.sb-booking .sb-bk-btn--ghost:focus,
.sb-booking .sb-bk-btn--ghost:active,
.sb-booking .sb-bk-btn--ghost:disabled { background: transparent !important; color: var(--tx) !important; }
.sb-booking .sb-bk-btn--ghost:hover { background: var(--bg) !important; color: var(--tx) !important; }

/* Jours : l'état désactivé échappait à la règle :hover:not(:disabled). */
/* Le jour sélectionné est exclu : sinon le fond blanc du :focus l'emportait
   sur le fond sage de .is-on, et le texte blanc devenait invisible. */
.sb-booking .sb-bk-day:not(.is-on),
.sb-booking .sb-bk-day:not(.is-on):disabled,
.sb-booking .sb-bk-day:not(.is-on):disabled:hover,
.sb-booking .sb-bk-day:not(.is-on):focus { background: #fff !important; box-shadow: none !important; outline: none !important; }
.sb-booking .sb-bk-day.is-on,
.sb-booking .sb-bk-day.is-on:hover,
.sb-booking .sb-bk-day.is-on:focus { background: var(--sg) !important; color: #fff !important; }
.sb-booking .sb-bk-day:focus-visible { box-shadow: 0 0 0 3px rgba(124,154,146,.35) !important; }

/* Cases à cocher : sans accent-color, le navigateur les coche en bleu. */
.sb-booking input[type="checkbox"],
.sb-cx-modal input[type="checkbox"] { accent-color: var(--sg); }

/* Le thème imposait sa couleur de texte (gris-bleu) au libellé de consentement. */
.sb-booking .sb-bk-consent,
.sb-booking .sb-bk-consent span { color: var(--mut) !important; }
/* … et sa couleur de lien (bleue) au renvoi vers la politique de confidentialité. */
.sb-booking .sb-bk-consent a,
.sb-booking .sb-bk-consent a:hover,
.sb-booking .sb-bk-consent a:focus { color: var(--sg-dk) !important; text-decoration: underline; }

/* ============================================================
   Gestion du rendez-vous par le client (lien d'annulation)
   ============================================================ */
.sb-annul__recap { margin-bottom: 20px; }
.sb-annul__recap.is-annule { opacity: .55; text-decoration: line-through; }
.sb-annul__question { font-size: .9rem; color: var(--mut); margin: 0 0 4px; }
.sb-booking .sb-annul__btn,
.sb-booking .sb-annul__btn:hover,
.sb-booking .sb-annul__btn:focus,
.sb-booking .sb-annul__btn:active { background: #fff !important; color: #b91c1c !important; border: 1.5px solid #f0c8c8 !important; }
.sb-booking .sb-annul__btn:hover { background: #fef4f4 !important; }
.sb-annul__ok { text-align: center; padding: 8px 0 4px; }
.sb-annul__ok .sb-bk-done__ico {
	display: inline-flex; align-items: center; justify-content: center;
	width: 62px; height: 62px; border-radius: 50%; background: var(--sg); color: #fff; margin-bottom: 12px;
}

/* ============================================================
   Bouton flottant + panneau de réservation
   ============================================================ */
.sb-fab {
	position: fixed; z-index: 99000; right: 22px; bottom: 22px;
	display: inline-flex; align-items: center; gap: 9px;
	padding: 13px 20px; border: 0 !important; border-radius: 999px;
	background: #7C9A92 !important; color: #fff !important;
	font-family: var(--sb-font-titre); font-weight: 600; font-size: .95rem; line-height: 1;
	box-shadow: 0 8px 26px rgba(45,52,54,.22); cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.sb-fab:hover { background: #5d7a72 !important; color: #fff !important; transform: translateY(-2px); }
.sb-fab:focus-visible { outline: none; box-shadow: 0 8px 26px rgba(45,52,54,.22), 0 0 0 4px rgba(124,154,146,.4); }
.sb-fab svg { flex: 0 0 auto; }

/* Voile */
.sb-fab-overlay {
	position: fixed; inset: 0; z-index: 99001;
	background: rgba(45,52,54,.45);
	opacity: 0; transition: opacity .25s ease;
}
.sb-fab-overlay.is-on { opacity: 1; }
.sb-fab-overlay[hidden] { display: none; }

/* Modale centrée */
.sb-fab-panneau {
	position: fixed; z-index: 99002; top: 50%; left: 50%;
	width: calc(100% - 32px); max-width: 560px; max-height: 88vh;
	background: #fff; border-radius: 18px;
	box-shadow: 0 24px 70px rgba(45,52,54,.3);
	/* En-tête figé + contenu défilant : le bouton de fermeture reste
	   toujours à sa place, sans déborder du coin arrondi. */
	display: flex; flex-direction: column; overflow: hidden;
	opacity: 0; transform: translate(-50%, -48%) scale(.98);
	transition: opacity .2s ease, transform .2s ease;
}
.sb-fab-panneau.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sb-fab-panneau:focus { outline: none; }
.sb-fab-panneau[hidden] { display: none; }
.sb-fab-panneau__corps {
	flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
	padding: 4px 22px 32px;
}
/* Dans le panneau, le formulaire occupe toute la largeur, sans double cadre. */
.sb-fab-panneau .sb-booking { border: 0; border-radius: 0; padding: 0; max-width: none; }

/* Bouton de fermeture : dimensions imposées, sinon le thème ajoute son propre
   remplissage et le halo déborde du coin de la modale. */
.sb-fab-panneau .sb-fab-fermer {
	flex: 0 0 auto; align-self: flex-end;
	margin: 12px 12px 0 0; padding: 0 !important;
	width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important;
	display: flex; align-items: center; justify-content: center;
	border: 0 !important; border-radius: 50% !important;
	background: transparent !important; color: #6b7280 !important;
	font-size: 24px; line-height: 1; cursor: pointer;
	box-shadow: none !important; transition: background .15s ease, color .15s ease;
}
.sb-fab-panneau .sb-fab-fermer:hover,
.sb-fab-panneau .sb-fab-fermer:focus {
	background: #f0f2f0 !important; color: #2d3436 !important; box-shadow: none !important; outline: none !important;
}
.sb-fab-panneau .sb-fab-fermer:focus-visible { box-shadow: 0 0 0 3px rgba(124,154,146,.35) !important; }

/* Page figée derrière le panneau (sans perdre la position de lecture) */
body.sb-fab-ouvert { position: fixed; width: 100%; overflow: hidden; }

@media ( max-width: 640px ) {
	/* Modale quasi plein écran : sur un petit écran, la marge est du gâchis. */
	.sb-fab-panneau { width: calc(100% - 20px); max-height: 92vh; }
	.sb-fab-panneau__corps { padding: 20px 16px 28px; }
	.sb-fab { right: 14px; bottom: 14px; padding: 12px 18px; font-size: .9rem; }
}

/* ============================================================
   Cours collectifs (public) — [serenibook_cours]
   ============================================================ */
.sb-cours-pub .sb-cx-list { display: flex; flex-direction: column; gap: 18px; }
.sb-cours-pub .sb-cx-course { border: 1px solid var(--bd); border-radius: 13px; padding: 16px 18px; }
.sb-cours-pub .sb-cx-course__head { display: flex; gap: 12px; margin-bottom: 12px; }
.sb-cours-pub .sb-cx-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; margin-top: 5px; }
.sb-cours-pub .sb-cx-course__nom { display: block; font-size: 1.05rem; font-weight: 700; }
.sb-cours-pub .sb-cx-course__meta { display: block; font-size: .84rem; color: var(--mut); margin-top: 2px; }
.sb-cours-pub .sb-cx-course__desc { display: block; font-size: .88rem; color: var(--tx); margin-top: 6px; }

.sb-cours-pub .sb-cx-seances { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-cours-pub .sb-cx-seance { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--bg); border-radius: 10px; }
.sb-cours-pub .sb-cx-when { display: flex; flex-direction: column; min-width: 88px; }
.sb-cours-pub .sb-cx-when__date { font-weight: 700; font-size: .9rem; text-transform: capitalize; }
.sb-cours-pub .sb-cx-when__heure { font-size: .82rem; color: var(--mut); }
.sb-cours-pub .sb-cx-places { flex: 1; font-size: .84rem; color: var(--sg-dk); font-weight: 600; }
.sb-cours-pub .sb-cx-places.is-full { color: #b45309; }
.sb-cours-pub .sb-cx-book { flex: 0 0 auto; padding: 8px 16px; }

/* Modale d'inscription */
.sb-cx-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sb-cx-modal[hidden] { display: none; }
.sb-cx-modal__overlay { position: absolute; inset: 0; background: rgba(45,52,54,.5); }
.sb-cx-modal__box {
	position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow: auto;
	background: #fff; border-radius: 16px; padding: 26px;
	font-family: var(--sb-font-texte);
	color: #2d3436; box-shadow: 0 20px 60px rgba(0,0,0,.28);
	--sg: #7C9A92; --sg-dk: #5d7a72; --bd: #e6e8e4; --tx: #2d3436; --mut: #6b7280; --bg: #f6f7f5;
}
.sb-cx-modal__box *, .sb-cx-modal__box *::before, .sb-cx-modal__box *::after { box-sizing: border-box; }
.sb-cx-modal__x { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--mut); cursor: pointer; }
.sb-cx-modal__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; }
.sb-cx-modal__seance { font-size: .9rem; color: var(--sg-dk); font-weight: 600; margin: 0 0 14px; }
.sb-cx-attente-note { font-size: .84rem; color: #b45309; background: #fef3e2; border-radius: 8px; padding: 8px 10px; margin: 0 0 14px; }
.sb-cx-done { text-align: center; padding: 10px 0; }
.sb-cx-done .sb-bk-done__ico { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--sg); color: #fff; margin-bottom: 14px; }
.sb-cx-done__msg { color: var(--mut); margin: 6px 0 18px; }

@media (max-width: 520px) {
	.sb-cours-pub .sb-cx-seance { flex-wrap: wrap; }
	.sb-cours-pub .sb-cx-places { flex-basis: 100%; order: 3; }
}