/* ==========================================================================
   6SB — Formulaire de rendez-vous
   Palette conforme WCAG 2.1 AA : --ssb-blue #0057C2 sur blanc = 6,68:1
   Mise en page pilotée par container queries, pas par media queries,
   pour que le formulaire s'adapte à sa colonne et non à l'écran.
   ========================================================================== */

.ssb-rdv {
	--ssb-blue: #0057c2;
	--ssb-blue-h: #00429a;
	--ssb-blue-soft: #eef5ff;
	--ssb-blue-line: #b9d6ff;
	--ssb-navy: #1a2b5a;
	--ssb-ink: #2c2c2c;
	--ssb-muted: #5c6675;
	--ssb-line: #e3e7ec;
	--ssb-err: #a32d2d;
	--ssb-err-bg: #fcebeb;
	--ssb-r: 12px;

	container-type: inline-size;
	box-sizing: border-box;
	max-width: 620px;
	margin: 0 auto;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--ssb-line);
	border-radius: 16px;
	color: var(--ssb-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.ssb-rdv *,
.ssb-rdv *::before,
.ssb-rdv *::after {
	box-sizing: border-box;
}

.ssb-rdv p {
	margin: 0;
}

.ssb-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -- progression ---------------------------------------------------------- */

.ssb-prog {
	margin-bottom: 20px;
}

.ssb-prog__text {
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--ssb-muted);
}

.ssb-prog__text strong {
	color: var(--ssb-navy);
	font-weight: 500;
}

.ssb-prog__track {
	height: 5px;
	background: var(--ssb-line);
	border-radius: 99px;
	overflow: hidden;
}

.ssb-prog__fill {
	width: 30%;
	height: 100%;
	background: var(--ssb-blue);
	border-radius: 99px;
	transition: width 0.3s ease;
}

/* -- structure des étapes ------------------------------------------------- */

.ssb-step {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ssb-step[hidden],
.ssb-done[hidden],
.ssb-other[hidden],
.ssb-err[hidden],
[data-slots-block][hidden],
[data-place-block][hidden] {
	display: none;
}

.ssb-legend {
	display: block;
	width: 100%;
	margin-bottom: 4px;
	padding: 0;
	font-size: 21px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--ssb-navy);
}

.ssb-legend:focus-visible {
	outline: 2px solid var(--ssb-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

.ssb-block {
	margin-top: 20px;
}

.ssb-lbl {
	display: block;
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ssb-navy);
}

.ssb-lbl--sm {
	font-size: 14px;
}

.ssb-lbl__opt,
.ssb-lbl__note {
	font-weight: 400;
	color: var(--ssb-muted);
}

.ssb-hint {
	margin-top: 6px;
	font-size: 13px;
	color: var(--ssb-muted);
}

.ssb-lbl + .ssb-hint {
	margin-top: -2px;
	margin-bottom: 10px;
}

.ssb-hint--lead {
	margin-top: 0;
	margin-bottom: 4px;
	font-size: 14px;
}

.ssb-err {
	margin-top: 8px;
	padding: 8px 10px;
	background: var(--ssb-err-bg);
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--ssb-err);
}

/* -- cartes de mode (étape 1) --------------------------------------------- */

.ssb-cards {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.ssb-card {
	display: block;
	cursor: pointer;
}

.ssb-card input,
.ssb-day input,
.ssb-chip input,
.ssb-consent input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
}

.ssb-card__box {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 14px 16px;
	background: #fff;
	border: 1.5px solid var(--ssb-line);
	border-radius: var(--ssb-r);
	transition: border-color 0.15s, background 0.15s;
}

/* Pictogramme de la carte. Le SVG hérite de `currentColor`, il suffit donc
   de changer la couleur du conteneur pour qu'il suive l'état de la carte. */
.ssb-card__ic {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #f4f6f9;
	color: var(--ssb-muted);
	transition: background 0.15s, color 0.15s;
}

.ssb-card__ic svg {
	display: block;
	width: 21px;
	height: 21px;
}

.ssb-card__txt {
	flex: 1 1 auto;
	min-width: 0;
}

.ssb-card__t {
	display: block;
	font-size: 16px;
	font-weight: 500;
	color: var(--ssb-navy);
}

.ssb-card__d {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	color: var(--ssb-muted);
}

.ssb-card__check {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border: 1.5px solid #c8cfd8;
	border-radius: 50%;
	position: relative;
}

.ssb-card:hover .ssb-card__box {
	border-color: var(--ssb-blue-line);
}

.ssb-card input:checked + .ssb-card__box {
	border-color: var(--ssb-blue);
	background: var(--ssb-blue-soft);
}

.ssb-card input:checked + .ssb-card__box .ssb-card__ic {
	background: #fff;
	color: var(--ssb-blue);
}

.ssb-card input:checked + .ssb-card__box .ssb-card__check {
	border-color: var(--ssb-blue);
	background: var(--ssb-blue);
}

.ssb-card input:checked + .ssb-card__box .ssb-card__check::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 3px;
	width: 7px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ssb-card input:focus-visible + .ssb-card__box,
.ssb-chip input:focus-visible + .ssb-chip__box,
.ssb-day input:focus-visible + .ssb-day__box,
.ssb-consent input:focus-visible + .ssb-consent__box {
	outline: 2px solid var(--ssb-blue);
	outline-offset: 2px;
}

/* -- choix du lieu, sous-question du mode « En personne » ------------------ */

/* Cartes réduites : ce choix est une précision à l'intérieur de l'étape 3,
   pas une étape à part entière — il ne doit pas peser autant à l'œil que le
   choix du mode à l'étape 1. */
.ssb-cards--sm {
	margin-top: 10px;
	gap: 8px;
}

.ssb-cards--sm .ssb-card__box {
	min-height: 54px;
	padding: 11px 13px;
	gap: 10px;
}

.ssb-cards--sm .ssb-card__ic {
	width: 34px;
	height: 34px;
	border-radius: 9px;
}

.ssb-cards--sm .ssb-card__ic svg {
	width: 18px;
	height: 18px;
}

.ssb-cards--sm .ssb-card__t {
	font-size: 15px;
}

.ssb-cards--sm .ssb-card__d {
	font-size: 13px;
}

.ssb-cards--sm .ssb-card__check {
	width: 20px;
	height: 20px;
}

.ssb-cards--sm .ssb-card input:checked + .ssb-card__box .ssb-card__check::after {
	left: 5px;
	top: 2px;
	width: 6px;
	height: 11px;
}

/* Champ d'adresse rattaché visuellement à la carte qui le déclenche. */
.ssb-sub {
	margin-top: 12px;
	padding-left: 13px;
	border-left: 2px solid var(--ssb-blue-line);
}

/* -- rail de jours (étape 2) ---------------------------------------------- */

.ssb-rail {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 2px 2px 10px;
	margin: 0 -2px;
	scrollbar-width: thin;
}

.ssb-rail::-webkit-scrollbar {
	height: 6px;
}

.ssb-rail::-webkit-scrollbar-thumb {
	background: #d4dae2;
	border-radius: 99px;
}

.ssb-day {
	flex: 0 0 auto;
	scroll-snap-align: start;
	cursor: pointer;
}

.ssb-day__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 62px;
	min-height: 72px;
	padding: 8px 4px;
	background: #fff;
	border: 1.5px solid var(--ssb-line);
	border-radius: var(--ssb-r);
	transition: border-color 0.15s, background 0.15s;
}

.ssb-day__wd,
.ssb-day__mo {
	font-size: 11.5px;
	color: var(--ssb-muted);
	text-transform: lowercase;
}

.ssb-day__n {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ssb-navy);
}

.ssb-day:hover .ssb-day__box {
	border-color: var(--ssb-blue-line);
}

.ssb-day input:checked + .ssb-day__box {
	border-color: var(--ssb-blue);
	background: var(--ssb-blue);
}

.ssb-day input:checked + .ssb-day__box .ssb-day__n,
.ssb-day input:checked + .ssb-day__box .ssb-day__wd,
.ssb-day input:checked + .ssb-day__box .ssb-day__mo {
	color: #fff;
}

.ssb-link {
	display: inline-block;
	margin-top: 2px;
	padding: 4px 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 14px;
	color: var(--ssb-blue);
	text-decoration: underline;
	cursor: pointer;
}

.ssb-link:hover {
	color: var(--ssb-blue-h);
}

.ssb-link:focus-visible {
	outline: 2px solid var(--ssb-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.ssb-other {
	margin-top: 10px;
	padding: 14px;
	background: #f7f9fc;
	border-radius: var(--ssb-r);
}

/* -- champs --------------------------------------------------------------- */

.ssb-input {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	background: #fff;
	border: 1.5px solid #ccd3dc;
	border-radius: 10px;
	font: inherit;
	font-size: 16px;
	color: var(--ssb-ink);
	-webkit-appearance: none;
	appearance: none;
}

textarea.ssb-input {
	min-height: 84px;
	resize: vertical;
	line-height: 1.5;
}

.ssb-input:focus {
	outline: 2px solid var(--ssb-blue);
	outline-offset: 1px;
	border-color: var(--ssb-blue);
}

.ssb-input[aria-invalid="true"] {
	border-color: var(--ssb-err);
	background: var(--ssb-err-bg);
}

/* -- chips (créneaux et sujets) ------------------------------------------- */

.ssb-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ssb-chips--wrap {
	row-gap: 10px;
}

.ssb-chip {
	cursor: pointer;
}

.ssb-chip__box {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 9px 15px;
	background: #fff;
	border: 1.5px solid var(--ssb-line);
	border-radius: 99px;
	font-size: 14.5px;
	color: var(--ssb-navy);
	transition: border-color 0.15s, background 0.15s;
}

.ssb-chip:hover .ssb-chip__box {
	border-color: var(--ssb-blue-line);
}

.ssb-chip input:checked + .ssb-chip__box {
	border-color: var(--ssb-blue);
	background: var(--ssb-blue);
	color: #fff;
}

.ssb-chip input:disabled + .ssb-chip__box {
	background: #f4f6f8;
	border-color: #eceff3;
	color: #9aa3ad;
	cursor: not-allowed;
	text-decoration: line-through;
}

.ssb-chip input:disabled {
	cursor: not-allowed;
}

.ssb-slots-load {
	font-size: 13.5px;
	color: var(--ssb-muted);
}

/* -- récapitulatif (étape 4) ---------------------------------------------- */

.ssb-recap {
	display: grid;
	gap: 0;
	margin: 16px 0 20px;
	padding: 4px 16px;
	background: var(--ssb-blue-soft);
	border: 1px solid var(--ssb-blue-line);
	border-radius: var(--ssb-r);
	font-size: 15px;
}

/* Par défaut (conteneur étroit, donc mobile) : le libellé et le lien
   « Modifier » partagent la première ligne, la valeur occupe la seconde
   sur toute la largeur. Une valeur longue dispose ainsi de la totalité
   du conteneur au lieu des ~65 px que laissait la disposition en
   colonnes — qui coupait les mots en plein milieu. La disposition en
   trois colonnes revient à partir de 440 px, plus bas dans ce fichier. */
.ssb-recap__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 3px 10px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ssb-blue-line);
}

.ssb-recap__row:last-child {
	border-bottom: 0;
}

.ssb-recap dt {
	grid-column: 1;
	grid-row: 1;
	font-size: 13px;
	color: var(--ssb-muted);
}

.ssb-recap dd {
	grid-column: 1 / -1;
	grid-row: 2;
	min-width: 0;
	margin: 0;
	color: var(--ssb-navy);
	/* break-word ne coupe qu'en dernier recours, contrairement à
	   word-break, qui césurait les mots ordinaires. */
	overflow-wrap: break-word;
	word-break: normal;
}

.ssb-recap__edit {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	flex: 0 0 auto;
	padding: 2px 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13.5px;
	color: var(--ssb-blue);
	text-decoration: underline;
	cursor: pointer;
}

.ssb-recap__edit:hover {
	color: var(--ssb-blue-h);
}

.ssb-recap__edit:focus-visible {
	outline: 2px solid var(--ssb-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -- consentement --------------------------------------------------------- */

.ssb-consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 4px 0;
	cursor: pointer;
}

.ssb-consent__box {
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	background: #fff;
	border: 1.5px solid #9aa3ad;
	border-radius: 5px;
}

.ssb-consent input:checked + .ssb-consent__box {
	background: var(--ssb-blue);
	border-color: var(--ssb-blue);
}

.ssb-consent input:checked + .ssb-consent__box::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ssb-consent__txt {
	font-size: 14px;
	color: var(--ssb-muted);
	line-height: 1.45;
}

.ssb-consent__txt a {
	color: var(--ssb-blue);
}

/* -- navigation ----------------------------------------------------------- */

.ssb-nav {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.ssb-btn {
	min-height: 50px;
	padding: 13px 22px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.ssb-btn:focus-visible {
	outline: 2px solid var(--ssb-blue);
	outline-offset: 2px;
}

.ssb-btn--primary {
	flex: 1 1 auto;
	background: var(--ssb-blue);
	color: #fff;
}

.ssb-btn--primary:hover {
	background: var(--ssb-blue-h);
}

.ssb-btn--primary[aria-busy="true"] {
	background: #6d8db5;
	cursor: progress;
}

.ssb-btn--ghost {
	flex: 0 0 auto;
	background: #fff;
	border-color: #ccd3dc;
	color: var(--ssb-navy);
}

.ssb-btn--ghost:hover {
	border-color: var(--ssb-navy);
}

.ssb-reassure {
	margin-top: 12px;
	font-size: 13px;
	color: var(--ssb-muted);
	text-align: center;
}

/* -- confirmation --------------------------------------------------------- */

.ssb-done {
	padding: 10px 4px;
	text-align: center;
}

.ssb-done:focus-visible {
	outline: 2px solid var(--ssb-blue);
	outline-offset: 4px;
	border-radius: 8px;
}

.ssb-done__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	background: var(--ssb-blue);
	border-radius: 50%;
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

.ssb-done__t {
	font-size: 21px;
	font-weight: 500;
	color: var(--ssb-navy);
}

.ssb-done__d {
	margin-top: 8px;
	font-size: 15px;
	color: var(--ssb-muted);
}

.ssb-done__add {
	margin-top: 18px;
	font-size: 15px;
}

.ssb-done__add a {
	color: var(--ssb-blue);
}

/* -- pot de miel ---------------------------------------------------------- */

.ssb-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -- à partir de 560px de largeur de conteneur ---------------------------- */

@container (min-width: 560px) {
	.ssb-rdv {
		padding: 28px 32px;
	}

	.ssb-legend {
		font-size: 24px;
	}

	.ssb-cards:not(.ssb-cards--sm) {
		gap: 12px;
	}

	.ssb-day__box {
		width: 68px;
	}
}

/* -- à partir de 440px : récapitulatif en trois colonnes ------------------ */

/* Seuil propre au récapitulatif, plus bas que les 560px ci-dessus : à
   440px de conteneur il reste environ 180px pour la valeur, assez pour
   la ligne « lundi 5 octobre à 11h00 » sans césure. En dessous, la
   disposition empilée définie plus haut s'applique. */
@container (min-width: 440px) {
	.ssb-recap__row {
		display: flex;
		align-items: baseline;
		gap: 10px;
	}

	.ssb-recap dt {
		flex: 0 0 110px;
	}

	.ssb-recap dd {
		flex: 1 1 auto;
	}
}

/* -- préférences système -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ssb-rdv * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.ssb-card input:checked + .ssb-card__box,
	.ssb-chip input:checked + .ssb-chip__box,
	.ssb-day input:checked + .ssb-day__box {
		border: 3px solid Highlight;
	}
}