/* ==========================================================================
   Crayon Noir, formulaires : mise en page uniquement.
   Couleurs, polices, lignes de champ, boutons, focus et messages d'erreur
   viennent du thème (theme.json, theme.css) : sky-formulaire, sky-champ-erreur,
   esquisse, sky-carte, sky-note, sky-surtitre, sky-lecteur.
   Le vermillon reste au seul bouton d'action de l'écran.
   Ce qui dépend du script est gaté derrière .sky-js et .est-pilote : sans script,
   et dans l'éditeur, toutes les étapes et tous les créneaux restent visibles.
   ========================================================================== */

.sc-formulaire {
	--sc-ecart: 1.25rem;
	position: relative;
}

.sc-formulaire [hidden] {
	display: none !important;
}

/* Pot de miel : hors écran, jamais visible, jamais annoncé. */
.sc-miel {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* --------------------------------------------------------------------------
   Champs
   -------------------------------------------------------------------------- */

.sc-formulaire fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sc-formulaire .sc-legende {
	display: block;
	width: 100%;
	margin: 0 0 0.5rem;
	padding: 0;
	font-size: var(--sky-s6, 0.875rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--graphite, #1E2124);
}

.sc-formulaire .sc-legende--bloc {
	margin-bottom: 1rem;
	/* Un intitule de groupe : la police du texte (Onest), en 600. */
	font-family: var(--sky-texte, 'Onest', Helvetica, Arial, sans-serif);
	font-weight: 600;
	line-height: 1.25;
}

.sc-champ + .sc-champ,
.sc-champ + .sc-recap,
.sc-recap + .sc-champ {
	margin-block-start: var(--sc-ecart);
}

.sc-facultatif {
	font-weight: 400;
	color: var(--graphite-doux, #565C63);
}

.sc-formulaire .sc-aide {
	margin: -0.125rem 0 0.5rem;
}

.sc-champ--texte,
.sc-champ--email,
.sc-champ--tel,
.sc-champ--url {
	max-width: 36rem;
}

.sc-champ--zone {
	max-width: 48rem;
}

/* Cases à cocher et boutons radio : toute la case est cliquable. */
.sc-choix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-choix__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin: 0;
	padding: 0.75rem 0.875rem;
	border-bottom: 2px solid var(--gris-trait, #7C828A);
	background-color: var(--papier-profond, #E9E4D9);
}

/* Réponse choisie : le thème la passe en capsule noire (section 18). Plus de filet épaissi ni de
   rembourrage changé ici : ils grandissaient la capsule cochée de 13 px et toute sa rangée avec. */

.sc-choix__item:has(input:focus-visible) {
	outline: 3px solid var(--graphite, #1E2124);
	outline-offset: 2px;
}

.sc-choix__item input {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	margin: 0.2rem 0 0;
}

.sky-formulaire .sc-choix__item label {
	display: block;
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--sky-s5, 1.0625rem);
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

.sc-choix__item label::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Consentement : une case simple, sans fond. */
.sc-consentement .sc-choix__item {
	padding: 0;
	border: 0;
	background: none;
}

.sc-consentement .sc-choix__item:has(input:checked) {
	padding: 0;
	border: 0;
}

.sc-consentement .sc-choix__item label::after {
	content: none;
}

.sc-consentement .sc-aide {
	margin: 0.5rem 0 0 1.75rem;
}

.sc-consentement .sky-champ-erreur {
	margin-left: 1.75rem;
}


/* --------------------------------------------------------------------------
   Boutons et résumé d'erreurs
   -------------------------------------------------------------------------- */

.sc-etape__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
}

.sc-etape__actions > .sc-bouton,
.sc-etape__actions > [data-sc-envoyer] {
	margin-left: auto;
}

.sc-rdv__coordonnees .sc-etape__actions > .sc-bouton,
.sc-contact .sc-etape__actions > .sc-bouton,
.sc-attente .sc-etape__actions > .sc-bouton {
	margin-left: 0;
}

.sc-bouton-bloc {
	margin: 0;
}

.sc-bouton[aria-disabled="true"] {
	cursor: progress;
}

.sc-erreurs {
	margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
}

.sc-erreurs__titre {
	margin: 0;
	font-weight: 500;
	color: var(--graphite, #1E2124);
}

.sc-erreurs__titre:empty {
	display: none;
}

.sc-erreurs__liste {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.sc-erreurs__liste:empty {
	display: none;
}

.sc-engagement {
	margin-block: 1rem 0;
}


/* --------------------------------------------------------------------------
   Devis en quatre étapes
   -------------------------------------------------------------------------- */

.sc-devis__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 1.5rem);
}

.sc-progression__compteur {
	margin: 0 0 0.5rem;
}

.sc-progression__liste {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-progression__lien {
	display: grid;
	gap: 0.125rem;
	padding: 0.625rem 0 0.25rem;
	border-top: 2px solid var(--gris-trait, #7C828A);
	color: var(--graphite-doux, #565C63);
	text-decoration: none;
}

.sc-progression__lien:hover .sc-progression__titre {
	text-decoration: underline;
}

.sc-progression__numero {
	/* Les numeros : la police des titres (Unbounded, chargee en 500 seulement), chiffres tabulaires. */
	font-family: var(--sky-titres, 'Unbounded', 'Arial Black', Arial, sans-serif);
	font-variant-numeric: tabular-nums;
	font-size: var(--sky-s3, 1.5rem);
	font-weight: 500;
	line-height: 1.1;
}

.sc-progression__titre {
	font-size: var(--sky-s6, 0.875rem);
	font-weight: 500;
	line-height: 1.35;
}

.sc-progression__item.est-faite .sc-progression__lien {
	color: var(--graphite, #1E2124);
}

.sc-progression__item.is-active .sc-progression__lien {
	padding-top: calc(0.625rem - 1px);
	border-top: 3px solid var(--graphite, #1E2124);
	color: var(--graphite, #1E2124);
}

.sc-progression__note {
	margin: 1rem 0 0;
}

.sc-etape {
	scroll-margin-top: 7rem;
}

.sc-etape + .sc-etape {
	margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
}

.sc-etape__titre {
	margin: 0 0 0.25rem;
}

.sc-etape__compteur {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--sky-texte, system-ui, sans-serif);
	font-variation-settings: normal;
}

.sc-etape__intro {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
}

/* Avec le script : une étape à la fois. */
.sky-js .sc-devis.est-pilote .sc-etape:not(.is-active) {
	display: none;
}

.sky-js .sc-devis.est-pilote .sc-etape + .sc-etape {
	margin-block-start: 0;
}

/* Récapitulatif */
.sc-recap {
	margin-block: var(--wp--preset--spacing--50, 1.5rem) 0;
}

.sc-recap:focus:not(:focus-visible) {
	outline: none;
}

.sc-devis__etapes > .sc-recap {
	margin-block: 0 var(--wp--preset--spacing--50, 1.5rem);
}

.sc-recap__titre {
	margin: 0;
}

.sc-recap .sc-recap__section {
	margin-block-start: 1.25rem;
	padding-block-start: 1rem;
	border-top: 2px solid var(--gris-trait, #7C828A);
}

.sc-recap__soustitre {
	margin: 0 0 0.5rem;
	font-family: var(--sky-texte, system-ui, sans-serif);
	font-variation-settings: normal;
	font-size: var(--sky-s5, 1.0625rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
}

.sc-recap__liste {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.sc-recap__ligne {
	display: grid;
	gap: 0 1rem;
}

.sc-recap__ligne dt {
	font-size: var(--sky-s6, 0.875rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--graphite-doux, #565C63);
}

.sc-recap__ligne dd {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.sc-recap__modifier {
	margin: 0.5rem 0 0;
	font-size: var(--sky-s6, 0.875rem);
	font-weight: 500;
}

@media (max-width: 599px) {
	.sc-progression__titre {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.sc-etape__actions > * {
		flex: 1 1 100%;
	}

	.sc-etape__actions > .sc-bouton-bloc .sc-bouton,
	.sc-etape__actions > .sc-bouton {
		width: 100%;
	}

	.sc-etape__actions > .sc-bouton,
	.sc-etape__actions > [data-sc-envoyer] {
		order: -1;
	}
}

@media (min-width: 600px) {
	.sc-recap__ligne {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}
}

@media (min-width: 1024px) {
	.sc-devis__grille {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
		column-gap: var(--wp--preset--spacing--60, 3rem);
		align-items: start;
	}

	.sc-progression {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
	}

	.sc-progression__liste {
		grid-template-columns: minmax(0, 1fr);
	}

	.sc-progression__lien {
		grid-template-columns: 2.75rem minmax(0, 1fr);
		align-items: baseline;
		padding-block: 0.875rem;
	}

	.sc-progression__item.is-active .sc-progression__lien {
		padding-top: calc(0.875rem - 1px);
	}

	.sc-progression__titre {
		font-size: var(--sky-s5, 1.0625rem);
	}
}


/* --------------------------------------------------------------------------
   Rendez-vous
   -------------------------------------------------------------------------- */

.sc-rdv__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60, 2.5rem);
}

.sc-rdv__grille > * {
	min-width: 0;
}

.sc-jours {
	display: flex;
	gap: 0.5rem;
	margin: 0 -0.25rem 1rem;
	padding: 0.25rem 0.25rem 0.75rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}

.sc-formulaire .sc-jour {
	display: grid;
	flex: 0 0 auto;
	justify-items: center;
	min-width: 4.25rem;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 0.625rem;
	border: 2px solid transparent;
	border-bottom-color: var(--gris-trait, #7C828A);
	background-color: var(--papier-profond, #E9E4D9);
	color: var(--graphite, #1E2124);
	font: inherit;
	cursor: pointer;
	scroll-snap-align: start;
}

.sc-formulaire .sc-jour[aria-pressed="true"] {
	border-color: var(--graphite, #1E2124);
	background-color: var(--papier, #F5F2EA);
}

.sc-jour__nom,
.sc-jour__mois {
	font-size: var(--sky-s6, 0.875rem);
	line-height: 1.3;
	color: var(--graphite-doux, #565C63);
}

.sc-jour__numero {
	/* Les numeros : la police des titres (Unbounded, chargee en 500 seulement), chiffres tabulaires. */
	font-family: var(--sky-titres, 'Unbounded', 'Arial Black', Arial, sans-serif);
	font-variant-numeric: tabular-nums;
	font-size: var(--sky-s3, 1.5rem);
	font-weight: 500;
	line-height: 1.15;
}

.sc-jour-panneau + .sc-jour-panneau {
	margin-block-start: 1.25rem;
}

.sky-js .sc-rdv.est-pilote .sc-jour-panneau:not(.is-active) {
	display: none;
}

.sc-heures {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sc-heure {
	padding: 0.625rem 0.75rem;
}

.sc-heure:has(input:checked) {
	padding-bottom: calc(0.625rem - 1px);
}

.sky-formulaire .sc-heure label {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sc-rdv__choix {
	margin: 1rem 0 0;
	font-weight: 500;
}

.sc-rdv [data-sc-champ="creneau"]:focus:not(:focus-visible) {
	outline: none;
}

@media (min-width: 1024px) {
	.sc-rdv__grille {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}
}


/* --------------------------------------------------------------------------
   Contact, liste d'attente, confirmations
   -------------------------------------------------------------------------- */

.sc-contact,
.sc-attente,
.sc-confirmation {
	max-width: 48rem;
}

.sc-contact__grille {
	display: grid;
	gap: var(--sc-ecart);
}

.sc-contact__grille > .sc-champ {
	max-width: none;
	margin: 0;
}

.sc-attente__intro > * {
	margin-block: 0;
}

.sc-attente__intro > * + * {
	margin-block-start: 1rem;
}

.sc-attente__intro {
	margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
}

.sc-confirmation > * {
	margin-block: 0;
}

.sc-confirmation > * + * {
	margin-block-start: 1rem;
}

.sc-confirmation:focus:not(:focus-visible) {
	outline: none;
}

.sc-formulaire .sc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
}

@media (min-width: 782px) {
	.sc-contact__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}

	.sc-contact__grille > :not([data-sc-champ="nom"]):not([data-sc-champ="email"]) {
		grid-column: 1 / -1;
	}
}