/**
 * SUB-SURFACE — Agenda du navire (front).
 * Tout est préfixé .ssa et cloisonné pour résister aux thèmes (Divi, Elementor…).
 */

.ssa {
	--ssa-abyssal: #061826;
	--ssa-ocean: #0b2d42;
	--ssa-turquoise: #18b7b9;
	--ssa-lagon: #68d8c7;
	--ssa-softwhite: #f4f8fa;
	--ssa-greyblue: #a9bbc6;
	--ssa-sand: #e8c46a;

	box-sizing: border-box;
	background-color: var(--ssa-abyssal);
	color: var(--ssa-softwhite);
	padding: clamp(20px, 4vw, 48px);
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
}

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

.ssa__head {
	max-width: 62ch;
	margin-bottom: 26px;
}

.ssa__eyebrow {
	margin: 0 0 6px;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ssa-turquoise);
}

.ssa__title {
	margin: 0 0 10px;
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ssa-softwhite);
}

.ssa__intro {
	margin: 0;
	color: var(--ssa-greyblue);
}

/* --- Fil d'étapes --- */

.ssa__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0 0 26px;
	padding: 0 0 18px;
	list-style: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	counter-reset: none;
}

.ssa__step {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--ssa-greyblue);
	opacity: 0.55;
	transition: opacity 0.25s ease, color 0.25s ease;
}

.ssa__step.is-current,
.ssa__step.is-done {
	opacity: 1;
}

.ssa__step.is-current .ssa__steplabel {
	color: var(--ssa-softwhite);
	font-weight: 600;
}

.ssa__stepnum {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
}

.ssa__step.is-current .ssa__stepnum {
	background-color: var(--ssa-turquoise);
	border-color: var(--ssa-turquoise);
	color: var(--ssa-abyssal);
	font-weight: 700;
}

.ssa__step.is-done .ssa__stepnum {
	border-color: var(--ssa-turquoise);
	color: var(--ssa-turquoise);
}

.ssa__steplabel {
	font-size: 14px;
}

/* --- Étape 1 : calendrier pleine largeur --- */

.ssa__hint {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--ssa-greyblue);
}

.ssa__hint--warn {
	color: var(--ssa-sand);
}

/* Étape 1 : calendrier à gauche, aide et actions à droite. */
.ssa__pick {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}

.ssa__calendar {
	flex: 1 1 320px;
	max-width: 480px;
	background-color: var(--ssa-ocean);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: clamp(16px, 2.5vw, 24px);
}

.ssa__calendar--wide {
	max-width: 880px;
}

.ssa__side {
	flex: 1 1 260px;
	max-width: 420px;
}

.ssa__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.ssa__navlabel {
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: clamp(15px, 2vw, 18px);
	font-weight: 700;
	text-transform: capitalize;
	text-align: center;
	color: var(--ssa-softwhite);
}

.ssa__navbtn {
	appearance: none;
	cursor: pointer;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background-color: transparent;
	color: var(--ssa-softwhite);
	font-size: 16px;
	line-height: 1;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ssa__navbtn:hover,
.ssa__navbtn:focus-visible {
	border-color: var(--ssa-turquoise);
	color: var(--ssa-turquoise);
}

.ssa__months {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

/* Le titre de mois ferait doublon avec l'en-tête de navigation. */
.ssa__months--1 .ssa__monthname {
	display: none;
}

@media (min-width: 860px) {
	.ssa__months--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}

.ssa__monthname {
	margin: 0 0 10px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ssa-turquoise);
}

.ssa__weekdays,
.ssa__days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 5px;
}

.ssa__weekdays {
	margin-bottom: 8px;
}

.ssa__weekdays span {
	text-align: center;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssa-greyblue);
	opacity: 0.7;
}

.ssa__day {
	appearance: none;
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 10px;
	border: 1px solid transparent;
	background-color: rgba(255, 255, 255, 0.03);
	color: var(--ssa-softwhite);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ssa__day--empty {
	background: none;
	border: none;
	cursor: default;
}

/* Signature : ligne de flottaison sous les jours ouverts. */
.ssa__day--available::after {
	content: "";
	position: absolute;
	left: 24%;
	right: 24%;
	bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--ssa-turquoise);
	opacity: 0.75;
}

.ssa__day--available:hover,
.ssa__day--available:focus-visible {
	background-color: rgba(24, 183, 185, 0.16);
	border-color: var(--ssa-turquoise);
	transform: translateY(-1px);
}

.ssa__day--busy,
.ssa__day--pending,
.ssa__day--closed {
	cursor: not-allowed;
	color: var(--ssa-greyblue);
	opacity: 0.55;
}

.ssa__day--busy {
	background-image: repeating-linear-gradient(
		135deg,
		rgba(169, 187, 198, 0.22) 0,
		rgba(169, 187, 198, 0.22) 2px,
		transparent 2px,
		transparent 6px
	);
}

.ssa__day--pending::after {
	content: "";
	position: absolute;
	left: 24%;
	right: 24%;
	bottom: 6px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--ssa-sand);
}

.ssa__day--closed {
	opacity: 0.26;
}

/* Plage sélectionnée : le milieu reste sobre, les extrémités marquent la borne. */
.ssa__day.is-selected {
	background-color: rgba(24, 183, 185, 0.28);
	border-color: rgba(24, 183, 185, 0.5);
	color: var(--ssa-softwhite);
	opacity: 1;
}

.ssa__day.is-selected.is-edge {
	background-color: var(--ssa-turquoise);
	border-color: var(--ssa-lagon);
	color: var(--ssa-abyssal);
	font-weight: 700;
}

.ssa__day.is-selected::after {
	background-color: var(--ssa-abyssal);
	opacity: 0.35;
}

.ssa__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ssa-greyblue);
}

.ssa__legend li {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.ssa__dot {
	width: 14px;
	height: 3px;
	border-radius: 2px;
	display: inline-block;
}

.ssa__dot--free {
	background-color: var(--ssa-turquoise);
}

.ssa__dot--pending {
	background-color: var(--ssa-sand);
}

.ssa__dot--busy {
	background-color: rgba(169, 187, 198, 0.5);
}

.ssa__error {
	grid-column: 1 / -1;
	color: var(--ssa-sand);
	font-size: 13px;
}

/* --- Barre de sélection / actions --- */

.ssa__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: 12px;
	border: 1px solid rgba(24, 183, 185, 0.3);
	background-color: rgba(24, 183, 185, 0.07);
}

.ssa__bar--form {
	justify-content: space-between;
	background: none;
	border: none;
	padding: 4px 0 0;
}

.ssa__barinfo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-right: auto;
	min-width: 100%;
}

.ssa__side .ssa__submit {
	width: 100%;
}

.ssa__barlabel {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ssa-turquoise);
}

.ssa__barinfo strong,
.ssa__recap strong {
	display: block;
	font-size: 16px;
	color: var(--ssa-softwhite);
}

.ssa__link {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	color: var(--ssa-greyblue);
	font-family: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.ssa__link:hover {
	color: var(--ssa-turquoise);
}

.ssa__submit {
	appearance: none;
	cursor: pointer;
	padding: 13px 28px;
	border: none;
	border-radius: 8px;
	background-color: var(--ssa-turquoise);
	color: var(--ssa-abyssal);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ssa__submit:hover:not(:disabled) {
	background-color: var(--ssa-lagon);
	transform: translateY(-1px);
}

.ssa__submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

/* --- Étape 2 : formulaire --- */

.ssa__recap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid rgba(24, 183, 185, 0.3);
	background-color: rgba(24, 183, 185, 0.07);
}

.ssa__form {
	max-width: 780px;
}

.ssa__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 16px;
}

@media (min-width: 560px) {
	.ssa__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ssa__field {
	display: block;
	margin-bottom: 16px;
}

.ssa__field > span {
	display: block;
	margin-bottom: 5px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssa-greyblue);
}

.ssa input[type="text"],
.ssa input[type="email"],
.ssa input[type="tel"],
.ssa textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background-color: var(--ssa-ocean);
	color: var(--ssa-softwhite);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.2s ease;
}

.ssa input[type="text"]:focus,
.ssa input[type="email"]:focus,
.ssa input[type="tel"]:focus,
.ssa textarea:focus {
	outline: none;
	border-color: var(--ssa-turquoise);
}

.ssa textarea {
	resize: vertical;
	min-height: 90px;
}

.ssa__fieldset {
	margin: 4px 0 18px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
}

.ssa__fieldset legend {
	padding: 0 6px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ssa-turquoise);
}

.ssa__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-bottom: 14px;
}

.ssa__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	color: var(--ssa-softwhite);
	cursor: pointer;
}

.ssa__check input {
	margin-top: 3px;
	accent-color: var(--ssa-turquoise);
	flex: none;
}

.ssa__check--consent {
	margin: 4px 0 20px;
	color: var(--ssa-greyblue);
	font-size: 13px;
}

.ssa__check--consent a {
	color: var(--ssa-turquoise);
}

.ssa__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ssa__feedback {
	margin: 14px 0 0;
	font-size: 14px;
	color: var(--ssa-greyblue);
}

.ssa__feedback--error {
	color: var(--ssa-sand);
}

/* --- Étape 3 : confirmation --- */

.ssa__stage--done {
	max-width: 560px;
	padding: 12px 0;
}

.ssa__check-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin: 0 0 18px;
	border-radius: 50%;
	background-color: rgba(24, 183, 185, 0.14);
	border: 1px solid var(--ssa-turquoise);
	color: var(--ssa-turquoise);
	font-size: 24px;
	line-height: 1;
}

.ssa__done-title {
	margin: 0 0 10px;
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--ssa-softwhite);
}

.ssa__done-text {
	margin: 0 0 8px;
	color: var(--ssa-greyblue);
}

.ssa__done-slot {
	margin: 0 0 22px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 14px;
	color: var(--ssa-lagon);
}

/* --- Alignement centré (option d'administration) --- */

.ssa--align-center .ssa__head {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ssa--align-center .ssa__steps {
	justify-content: center;
}

.ssa--align-center .ssa__pick {
	justify-content: center;
}

.ssa--align-center .ssa__form,
.ssa--align-center .ssa__recap {
	margin-left: auto;
	margin-right: auto;
}

.ssa--align-center .ssa__stage--done {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.ssa--align-center .ssa__check-mark {
	margin-left: auto;
	margin-right: auto;
}

.ssa--align-center .ssa__legend {
	justify-content: center;
}

/* Le formulaire reste aligné à gauche : des libellés centrés seraient illisibles. */
.ssa--align-center .ssa__field,
.ssa--align-center .ssa__check {
	text-align: left;
}

.ssa :focus-visible {
	outline: 2px solid var(--ssa-lagon);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ssa *,
	.ssa *::before,
	.ssa *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}