@charset "UTF-8";
/*
 * SBG Pro : inscription, connexion, page demande.
 *
 * Complète les classes de formulaire du thème SBG (sbg-form, sbg-form__champ,
 * sbg-form__saisie, est-en-erreur...) sans les redéfinir. Toutes les règles sont
 * bornées par .sbg-pro-compte ; les jetons du thème sont lus avec une valeur de
 * repli, pour que les écrans restent lisibles si la feuille du thème manque.
 *
 * Mobile d'abord : une colonne jusqu'à 40em (640 px), puis deux colonnes pour
 * les champs courts (sbg-form__champ--demi). Rendu vérifié à 360 px.
 */

.sbg-pro-compte {
	--sbgp-pine: var(--sbg-pine, #046865);
	--sbgp-berry: var(--sbg-berry, #f02848);
	--sbgp-encre: var(--sbg-encre, #372d33);
	--sbgp-feuille: var(--sbg-feuille, #eff9ef);
	--sbgp-blush: var(--sbg-blush, #fff0f3);
	--sbgp-ligne: var(--sbg-ligne, #e3efec);
	--sbgp-gris: var(--sbg-gris, #5a716d);
	--sbgp-r-carte: var(--sbg-r-carte, 15px);
	--sbgp-r-champ: var(--sbg-r-champ, 10px);
	--sbgp-e1: var(--sbg-e1, 0.5rem);
	--sbgp-e3: var(--sbg-e3, 0.9375rem);
	--sbgp-e4: var(--sbg-e4, 1.25rem);
	--sbgp-e5: var(--sbg-e5, 1.5625rem);

	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	color: var(--sbgp-encre);
}

/* L'attribut hidden doit gagner sur display: flex des champs du thème. */
.sbg-pro-compte [hidden] {
	display: none;
}

.sbg-pro-compte .sbg-form {
	max-width: none;
}

.sbg-pro-compte .sbg-form__message {
	margin: 0 0 var(--sbgp-e4);
}

.sbg-pro-compte .sbg-form__message p {
	margin: 0;
}

.sbg-pro-compte .sbg-form__message p + p,
.sbg-pro-compte .sbg-form__message ul {
	margin-top: var(--sbgp-e1);
}

.sbg-pro-compte .sbg-form__message--ok {
	border-inline-start-color: var(--sbgp-pine);
}

.sbg-pro-erreurs {
	margin: var(--sbgp-e1) 0 0;
	padding-inline-start: 1.2em;
}

.sbg-pro-erreurs a {
	color: inherit;
}

.sbg-pro-aide {
	margin: 0;
	font-size: var(--sbg-t-petit, 0.9rem);
	color: var(--sbgp-gris);
	line-height: 1.45;
}

.sbg-pro-aide a {
	color: var(--sbgp-pine);
}

/* ------------------------------------------------------------------
   Blocs et grille
   ------------------------------------------------------------------ */

.sbg-pro-bloc {
	min-width: 0;
	margin: 0;
	padding: var(--sbgp-e4) 0 0;
	border: 0;
	border-top: 1px solid var(--sbgp-ligne);
}

.sbg-pro-bloc__titre {
	float: left;
	width: 100%;
	margin: 0 0 var(--sbgp-e3);
	padding: 0;
	font-size: var(--sbg-t-h4, 1.3rem);
	font-weight: 600;
	color: var(--sbgp-pine);
}

.sbg-pro-bloc__titre + * {
	clear: both;
}

.sbg-pro-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbgp-e3);
}

.sbg-pro-sous-bloc {
	padding: var(--sbgp-e3);
	border-radius: var(--sbgp-r-champ);
	background: var(--sbgp-feuille);
}

@media (min-width: 40em) {
	.sbg-pro-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sbg-pro-grille > * {
		grid-column: 1 / -1;
	}

	.sbg-pro-grille > .sbg-form__champ--demi {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------
   Type de structure
   ------------------------------------------------------------------ */

.sbg-pro-choix {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sbg-pro-choix > legend {
	margin-bottom: var(--sbgp-e1);
	padding: 0;
}

.sbg-pro-types {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbgp-e1);
}

@media (min-width: 40em) {
	.sbg-pro-types {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sbg-pro-type {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px var(--sbgp-e1);
	align-items: start;
	padding: var(--sbgp-e3);
	border: 2px solid var(--sbgp-ligne);
	border-radius: var(--sbgp-r-champ);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.sbg-pro-type input {
	grid-row: 1 / span 2;
	width: 1.1em;
	height: 1.1em;
	margin: 0.25em 0 0;
	accent-color: var(--sbgp-pine);
}

.sbg-pro-type__titre {
	font-weight: 600;
	color: var(--sbgp-pine);
}

.sbg-pro-type__texte {
	font-size: var(--sbg-t-petit, 0.9rem);
	line-height: 1.4;
	color: var(--sbgp-gris);
}

.sbg-pro-type:hover {
	border-color: color-mix(in srgb, var(--sbgp-pine) 45%, transparent);
}

.sbg-pro-type:has(input:checked) {
	border-color: var(--sbgp-pine);
	background: var(--sbgp-feuille);
}

.sbg-pro-type:has(input:focus-visible) {
	outline: 2px solid var(--sbgp-pine);
	outline-offset: 2px;
}

.sbg-pro-choix.est-en-erreur .sbg-pro-type {
	border-color: var(--sbgp-berry);
}

/* Particuliers égarés : encart en tête du formulaire, avant toute saisie. */
.sbg-pro-particuliers {
	margin: 0 0 var(--sbgp-e4);
	padding: var(--sbgp-e4);
	border-left: 4px solid var(--sbgp-pine);
	border-radius: var(--sbgp-r-carte);
	background: var(--sbgp-feuille);
}

.sbg-pro-particuliers p {
	margin: 0;
}

.sbg-pro-particuliers p + p {
	margin-top: var(--sbgp-e1);
}

.sbg-pro-particuliers__titre {
	font-weight: 700;
	color: var(--sbgp-pine);
}

.sbg-pro-particuliers .sbg-bouton {
	margin-top: var(--sbgp-e1);
}

/* ------------------------------------------------------------------
   Encart formule code
   ------------------------------------------------------------------ */

.sbg-pro-encart {
	margin: var(--sbgp-e4) 0;
	padding: var(--sbgp-e4);
	border-radius: var(--sbgp-r-carte);
	background: var(--sbgp-blush);
}

.sbg-pro-grille > .sbg-pro-encart {
	margin: 0;
}

.sbg-pro-encart p {
	margin: 0;
}

.sbg-pro-encart p + p {
	margin-top: var(--sbgp-e1);
}

.sbg-pro-encart__titre {
	font-weight: 700;
	color: var(--sbg-berry-fonce, #c32c53);
}

.sbg-pro-encart a:not(.sbg-bouton) {
	color: var(--sbg-berry-fonce, #c32c53);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Recherche d'entreprises
   ------------------------------------------------------------------ */

.sbg-pro-recherche__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbgp-e1);
}

.sbg-pro-recherche__ligne .sbg-form__saisie {
	flex: 1 1 14rem;
	min-width: 0;
}

.sbg-pro-recherche__ligne .sbg-bouton {
	flex: 0 0 auto;
}

.sbg-pro-recherche__etat {
	min-height: 1.2em;
	margin: 0;
	font-size: var(--sbg-t-petit, 0.9rem);
	color: var(--sbgp-gris);
}

.sbg-pro-recherche__resultats {
	display: grid;
	gap: 4px;
	max-height: 22rem;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.sbg-pro-recherche__choix {
	display: block;
	width: 100%;
	padding: 0.6rem var(--sbgp-e3);
	border: 1px solid var(--sbgp-ligne);
	border-radius: var(--sbgp-r-champ);
	background: #fff;
	color: var(--sbgp-encre);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.sbg-pro-recherche__choix:hover,
.sbg-pro-recherche__choix:focus-visible {
	border-color: var(--sbgp-pine);
	background: var(--sbgp-feuille);
	outline: none;
}

.sbg-pro-recherche__nom {
	display: block;
	font-weight: 600;
}

.sbg-pro-recherche__detail {
	display: block;
	font-size: var(--sbg-t-petit, 0.9rem);
	color: var(--sbgp-gris);
	overflow-wrap: anywhere;
}

.sbg-pro-recherche__ferme {
	display: inline-block;
	margin-inline-start: var(--sbgp-e1);
	padding: 0 0.5em;
	border-radius: 999px;
	background: var(--sbgp-blush);
	color: var(--sbg-berry-fonce, #c32c53);
	font-size: 0.8rem;
	font-weight: 600;
}

.sbg-pro-selection {
	margin: 0;
	padding: var(--sbgp-e1) var(--sbgp-e3);
	border-inline-start: 4px solid var(--sbgp-pine);
	border-radius: var(--sbgp-r-champ);
	background: var(--sbgp-feuille);
	font-size: var(--sbg-t-petit, 0.9rem);
}

.sbg-pro-selection.est-ferme {
	border-inline-start-color: var(--sbgp-berry);
	background: var(--sbgp-blush);
}

/* ------------------------------------------------------------------
   Mot de passe
   ------------------------------------------------------------------ */

.sbg-pro-mdp {
	position: relative;
}

.sbg-pro-mdp .sbg-form__saisie {
	padding-inline-end: 5.5rem;
}

.sbg-pro-mdp__bascule {
	position: absolute;
	top: 50%;
	right: 0.4rem;
	transform: translateY(-50%);
	padding: 0.3rem 0.6rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sbgp-pine);
	font: inherit;
	font-size: var(--sbg-t-petit, 0.9rem);
	font-weight: 600;
	cursor: pointer;
}

.sbg-pro-mdp__bascule:hover,
.sbg-pro-mdp__bascule:focus-visible {
	background: var(--sbgp-feuille);
	outline: 2px solid var(--sbgp-pine);
	outline-offset: 0;
}

/* ------------------------------------------------------------------
   Actions
   ------------------------------------------------------------------ */

.sbg-pro-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbgp-e1);
	margin: var(--sbgp-e3) 0;
}

.sbg-pro-actions .sbg-bouton {
	white-space: normal;
}

.sbg-pro-compte .sbg-form__envoyer {
	align-self: stretch;
}

@media (max-width: 29.99em) {
	.sbg-pro-actions .sbg-bouton {
		flex: 1 1 100%;
	}
}

@media (min-width: 30em) {
	.sbg-pro-compte .sbg-form__envoyer {
		align-self: flex-start;
	}
}

.sbg-pro-compte .sbg-bouton[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ------------------------------------------------------------------
   Connexion
   ------------------------------------------------------------------ */

.sbg-pro-connexion {
	max-width: 480px;
	padding: var(--sbgp-e5);
	border-radius: var(--sbgp-r-carte);
	background: #fff;
	box-shadow: var(--sbg-ombre-douce-fiche, 0 6px 24px rgb(4 104 101 / 0.07));
}

@media (max-width: 29.99em) {
	.sbg-pro-connexion {
		padding: var(--sbgp-e3);
	}
}

.sbg-pro-connexion__titre {
	margin: 0 0 var(--sbgp-e3);
	color: var(--sbgp-pine);
}

.sbg-pro-form--connexion {
	gap: var(--sbgp-e3);
}

.sbg-pro-form--connexion .sbg-pro-actions {
	margin: 0;
}

.sbg-pro-connexion__inscription {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbgp-e1);
	margin-top: var(--sbgp-e4);
	padding-top: var(--sbgp-e4);
	border-top: 1px solid var(--sbgp-ligne);
}

.sbg-pro-connexion__inscription p {
	margin: 0;
	font-weight: 600;
}

.sbg-pro-connexion__bonjour {
	margin: 0 0 var(--sbgp-e1);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Page demande
   ------------------------------------------------------------------ */

.sbg-pro-statut {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sbgp-e1) var(--sbgp-e4);
	margin: 0 0 var(--sbgp-e4);
	padding: var(--sbgp-e3) var(--sbgp-e4);
	border-radius: var(--sbgp-r-carte);
	background: var(--sbgp-feuille);
}

.sbg-pro-statut p {
	margin: 0;
}

.sbg-pro-statut--rejected,
.sbg-pro-statut--suspended {
	background: var(--sbgp-blush);
}

.sbg-pro-titre {
	margin: var(--sbgp-e5) 0 var(--sbgp-e3);
	font-size: var(--sbg-t-h4, 1.3rem);
	color: var(--sbgp-pine);
}

.sbg-pro-etapes {
	margin: 0;
	padding-inline-start: 1.4em;
}

.sbg-pro-etapes li + li {
	margin-top: var(--sbgp-e1);
}

.sbg-pro-resume {
	margin: 0 0 var(--sbgp-e3);
	border-top: 1px solid var(--sbgp-ligne);
}

.sbg-pro-resume__ligne {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px var(--sbgp-e3);
	padding: var(--sbgp-e1) 0;
	border-bottom: 1px solid var(--sbgp-ligne);
}

@media (min-width: 40em) {
	.sbg-pro-resume__ligne {
		grid-template-columns: 14rem minmax(0, 1fr);
	}
}

.sbg-pro-resume dt {
	font-weight: 600;
	color: var(--sbgp-pine);
}

.sbg-pro-resume dd {
	margin: 0;
	overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
	.sbg-pro-type {
		transition: none;
	}
}
