@charset "UTF-8";
/*
 * Habillage de l'espace pro : thème enfant SBG Pro.
 *
 * Chargée après theme.css du parent, et après woocommerce.css et pros.css quand
 * la page les charge (voir functions.php). Elle n'invente ni couleur, ni rayon,
 * ni espacement : tout vient des jetons `--sbg-*` et des composants du parent.
 * Elle ne fait que trois choses : habiller ce que l'enfant ajoute (en-tête et
 * pied pro, accueil, encart de saison), élargir ce que le parent dessinait pour
 * deux et que le site pro emploie à trois, et habiller Mon compte, que le parent
 * n'habille pas (il retire woocommerce-layout.css et woocommerce-smallscreen.css).
 *
 * Le panier, la commande et la confirmation sont habillés par le plugin SBG Pro
 * (shop.css, checkout.css) : aucune règle ici ne les vise. Les règles de
 * Mon compte sont toutes bornées par `.sbg-pro.woocommerce-account` (classes
 * du corps de page).
 *
 * Ordre : en-tête, pied, accueil, encart de saison, pages de contenu,
 * formulaires du thème, Mon compte, adaptations, mouvement réduit, impression.
 */

/* ------------------------------------------------------------------
   1. En-tête pro
   ------------------------------------------------------------------ */

/* Le bandeau vert : « Espace professionnels et associations » à gauche, la
   sortie vers le site particuliers à droite. Le parent calait son menu à
   droite ; ici deux textes se répondent. */
.sbg-barre-haute.sbg-pro-bandeau .sbg-pro-bandeau__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.15rem var(--sbg-e4);
	padding-block: 0.4rem;
}

.sbg-pro-bandeau__titre {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.sbg-pro-bandeau__lien {
	color: color-mix(in srgb, var(--sbg-blanc) 88%, transparent);
}

.sbg-pro-bandeau__lien a {
	color: var(--sbg-blanc);
	font-weight: 600;
	text-decoration-color: color-mix(in srgb, currentcolor 55%, transparent);
}

.sbg-pro-bandeau__lien a:hover,
.sbg-pro-bandeau__lien a:focus-visible {
	color: var(--sbg-rose);
}

/* Sur le vert, le contour rose du focus se lit mal : il passe en blanc. */
.sbg-pro-bandeau a:focus-visible {
	outline-color: var(--sbg-blanc);
}

/* Les boutons de compte de la barre : plus compacts que le bouton du kit, pour
   tenir à côté de la navigation dès 901 px. */
.sbg-barre__actions .sbg-pro-action--texte {
	padding: 0.45rem 1.15rem;
	font-size: 0.95rem;
	white-space: nowrap;
	box-shadow: none;
}

/* Boutons roses, partout sur le site pro : « Créer un compte » de l'en-tête et
   boutons « is-style-sbg-berry » des contenus. Le blanc sur --sbg-berry ne donne
   que 4,12:1, sous les 4,5:1 exigés pour un texte de cette taille (WCAG 1.4.3) ;
   sur le rouge du logo (--sbg-berry-fonce), 5,5:1. Au survol et au focus, le
   texte sur blush prend le même rouge (5:1 au lieu de 3,7:1). Aucune couleur
   nouvelle : le jeton est celui du parent. */
.sbg-pro .sbg-bouton--rose,
.sbg-pro .is-style-sbg-berry .wp-block-button__link {
	background: var(--sbg-berry-fonce);
	border-color: var(--sbg-berry-fonce);
}

.sbg-pro .sbg-bouton--rose:hover,
.sbg-pro .sbg-bouton--rose:focus-visible,
.sbg-pro .is-style-sbg-berry .wp-block-button__link:hover,
.sbg-pro .is-style-sbg-berry .wp-block-button__link:focus-visible {
	background: var(--sbg-blush);
	color: var(--sbg-berry-fonce);
}

/* Raccourci en icône d'une action texte : seulement sur téléphone. */
.sbg-pro-action--mobile {
	display: none;
}

/* L'icône de la page affichée (Mon compte et ses sous-pages, panier). */
.sbg-action.sbg-pro-action[aria-current="page"] {
	background: var(--sbg-feuille);
}

/* ------------------------------------------------------------------
   2. Pied pro
   ------------------------------------------------------------------
   Quatre colonnes comme le parent, mais le parent les pose dès 768 px : avec
   une adresse email de 33 caractères, la colonne des coordonnées déborde
   entre 768 et 1 024 px. Ici : une colonne, puis deux dès 600 px, puis quatre
   dès 1 025 px.
   ------------------------------------------------------------------ */

.sbg-pro-pied .sbg-pied__marque {
	align-items: flex-start;
	text-align: start;
}

.sbg-pro-pied .sbg-pied__colonne > p + p {
	margin-top: var(--sbg-e2);
}

.sbg-pro-pied__adresse {
	font-style: normal;
}

.sbg-pro-pied .sbg-coordonnees li {
	display: flex;
	align-items: flex-start;
	gap: var(--sbg-e1);
	font-size: 0.95rem;
}

.sbg-pro-pied .sbg-coordonnees a {
	align-items: flex-start;
	color: var(--sbg-pine);
}

.sbg-pro-pied .sbg-coordonnees a:hover,
.sbg-pro-pied .sbg-coordonnees a:focus-visible {
	color: var(--sbg-berry);
}

.sbg-pro-pied .sbg-coordonnees .sbg-ico {
	margin-top: 0.15em;
	color: var(--sbg-pine);
}

/* L'adresse email ne doit jamais pousser la page à 360 px. */
.sbg-pro-pied .sbg-coordonnees span {
	overflow-wrap: anywhere;
}

.sbg-pro-pied__sortie {
	display: inline-flex;
	align-items: center;
	gap: var(--sbg-e1);
	font-weight: 600;
	text-decoration: none;
}

.sbg-pro-pied__sortie .sbg-ico {
	transition: transform var(--sbg-transition);
}

.sbg-pro-pied__sortie:hover .sbg-ico,
.sbg-pro-pied__sortie:focus-visible .sbg-ico {
	transform: translateX(3px);
}

.sbg-pro-pied__bas-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sbg-e1) var(--sbg-e5);
}

.sbg-pro-pied__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sbg-e1) var(--sbg-e4);
	list-style: none;
}

.sbg-pro-pied__bas a:focus-visible {
	outline-color: var(--sbg-blanc);
}

/* ------------------------------------------------------------------
   3. Accueil
   ------------------------------------------------------------------ */

/* Les trois portes : « Vous êtes un particulier », « Association, école, APE »,
   « Entreprise, commerce, CSE ». Le parent les borne à 61 % pour deux cartes de
   220 px ; à trois, la troisième passait à la ligne. Elles tiennent ici sur une
   ligne dès 768 px, et s'empilent en dessous. */
.sbg-pro .sbg-portes {
	width: min(100%, var(--sbg-largeur));
}

/* Hors d'une bannière, rien à chevaucher : pas de marge négative. */
.sbg-pro .sbg-portes:not(.sbg-banniere .sbg-portes) {
	margin-bottom: 0;
}

.sbg-porte__texte {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre);
	line-height: 1.45;
}

/* L'encart de connexion de l'accueil : la bannière porte le titre et le texte
   à gauche, le formulaire [sbg_pro_connexion] à droite ; sur téléphone, le
   formulaire passe dessous. Balisage attendu (blocs natifs) :
     groupe .sbg-pro-accueil-tete (section, avec sbg-sec)
       groupe .sbg-pro-accueil-tete__grille
         groupe .sbg-pro-accueil-tete__texte       (h1, paragraphes, [sbg_pro_saison])
         groupe .sbg-pro-accueil-tete__connexion   ([sbg_pro_connexion])
   Le formulaire du plugin est déjà une carte (.sbg-pro-connexion, accounts.css) :
   la colonne ne fait que le placer, sans seconde carte autour. La même règle
   place la colonne qui contient l'ancre #connexion dans un duo du parent ou
   des colonnes natives. */
.sbg-pro-accueil-tete__grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbg-e6);
	align-items: center;
}

.sbg-pro-accueil-tete__grille > * {
	margin-block-start: 0;
}

.sbg-pro-accueil-tete__texte > * + * {
	margin-top: var(--sbg-e3);
}

.sbg-pro-accueil-tete h1 {
	text-wrap: balance;
}

.sbg-pro-accueil-tete__connexion,
:where(.sbg-duo, .wp-block-columns) > :has(#connexion) {
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
}

/* La carte du plugin prend toute la colonne. */
:is(.sbg-pro-accueil-tete__connexion, .sbg-pro-accueil-repli__connexion) > .sbg-pro-connexion {
	max-width: none;
}

#connexion {
	scroll-margin-top: var(--sbg-e5);
}

/* « Comment ça marche » en quatre étapes : la marche numérotée du parent en
   ligne, comme sa variante à trois, bornée à la largeur du site (et non aux
   780 px de la liste verticale). */
.sbg-etapes-num--quatre {
	max-width: var(--sbg-largeur);
}

/* En grille, l'écart entre deux puces de la prose du parent (li + li) décalerait
   les étapes 2 à 4 vers le bas : les écarts viennent du gap. */
.sbg-etapes-num--quatre > li + li {
	margin-top: 0;
}

/* Accueil de repli (page d'accueil vide, voir front-page.php). */
.sbg-pro-accueil-repli__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e4);
	max-width: var(--sbg-largeur-etroite);
	margin-inline: auto;
}

.sbg-pro-accueil-repli__connexion {
	width: 100%;
	max-width: 480px;
}

.sbg-pro-accueil-repli__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbg-e2);
}

.sbg-pro-accueil-repli__particuliers {
	font-size: var(--sbg-t-petit);
}

/* ------------------------------------------------------------------
   4. Encart de saison ([sbg_pro_saison], rendu par le plugin)
   ------------------------------------------------------------------
   Quatre états : pre (avant l'ouverture, compte à rebours ajouté par pro.js),
   open (commandes ouvertes), closed (commandes closes, espace pro consultable),
   off (hors saison). La couleur dit l'état ; le texte le dit aussi, jamais la
   couleur seule.
   ------------------------------------------------------------------ */

.sbg-pro-saison {
	display: grid;
	gap: 0.2rem;
	padding: var(--sbg-e4) var(--sbg-e5);
	border: 1px solid var(--sbg-ligne);
	border-inline-start: 6px solid var(--sbg-pine);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce-fiche);
	color: var(--sbg-encre);
	text-align: start;
}

/* Posé directement dans une page pleine largeur, l'encart se borne au site. */
.sbg-prose--libre > .sbg-pro-saison {
	width: min(calc(100% - 2 * var(--sbg-gouttiere)), var(--sbg-largeur));
	margin-inline: auto;
}

.sbg-pro-saison__titre {
	font-size: var(--sbg-t-h4);
	font-weight: 800;
	line-height: 1.25;
	color: var(--sbg-pine);
	text-wrap: balance;
}

.sbg-pro-saison__texte {
	line-height: 1.5;
}

.sbg-pro-saison__decompte {
	margin-top: var(--sbg-e1);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--sbg-berry-fonce);
}

.sbg-pro-saison__decompte a {
	color: inherit;
	font-weight: 700;
}

.sbg-pro-saison--pre {
	border-color: var(--sbg-rose);
	border-inline-start-color: var(--sbg-berry);
	background: var(--sbg-blush);
}

.sbg-pro-saison--pre .sbg-pro-saison__titre {
	color: var(--sbg-berry-fonce);
}

.sbg-pro-saison--open,
.sbg-pro-saison.est-ouvert {
	border-color: var(--sbg-pine-100);
	border-inline-start-color: var(--sbg-pine);
	background: var(--sbg-feuille);
}

.sbg-pro-saison.est-ouvert .sbg-pro-saison__decompte {
	color: var(--sbg-pine-fonce);
}

.sbg-pro-saison--closed {
	border-inline-start-color: var(--sbg-gris);
}

.sbg-pro-saison--closed .sbg-pro-saison__titre,
.sbg-pro-saison--off .sbg-pro-saison__titre {
	color: var(--sbg-gris);
}

.sbg-pro-saison--off {
	border-color: var(--sbg-brume);
	border-inline-start-color: var(--sbg-brume);
	background: var(--sbg-fond);
}

/* ------------------------------------------------------------------
   5. Pages de contenu
   ------------------------------------------------------------------ */

/* Un écran du plugin (formulaire d'inscription, demande, bon de commande...)
   posé en code court directement dans une page pleine largeur n'a pas de
   section pour le borner : il se borne à la largeur du site. Spécificité nulle,
   pour que la feuille du module l'emporte toujours ; les sections et les
   groupes, qui se bornent eux-mêmes, sont exclus. */
:where(.sbg-prose--libre) > :where([class^="sbg-pro-"], [class*=" sbg-pro-"]):where(:not(.sbg-sec, .wp-block-group, .wp-block-cover)) {
	width: min(calc(100% - 2 * var(--sbg-gouttiere)), var(--sbg-largeur));
	margin-inline: auto;
}

/* Panier et commande (paiement d'une commande et remerciement compris, servis
   par la page Commande) : pages pleine largeur, comme Mon compte (section 7),
   dont le code court WooCommerce n'a aucune section pour le borner. Sans cette
   règle, le tableau du panier et le formulaire de commande couraient d'un bord
   à l'autre de l'écran. Même borne que l'en-tête (.sbg-shell du parent). */
.sbg-pro:is(.woocommerce-cart, .woocommerce-checkout) .sbg-prose--libre > .woocommerce {
	max-width: calc(var(--sbg-largeur) + 2 * var(--sbg-gouttiere));
	margin-inline: auto;
	padding: var(--sbg-e6) var(--sbg-gouttiere) var(--sbg-e8);
}

/* Page de lecture (conditions générales, mentions légales) : leurs longs
   intertitres numérotés, en capitales 900 du parent, écrasent la colonne de
   760 px ; un cran de moins suffit à les garder lisibles. */
.sbg-page > .sbg-prose:not(.sbg-prose--libre) > h2 {
	font-size: var(--sbg-t-h3);
}

.sbg-page > .sbg-prose:not(.sbg-prose--libre) > h3 {
	font-size: var(--sbg-t-h4);
}

/* Histogramme de la commission ([sbg_bareme vue="barres"], page associations).
   Jusqu'au parent 1.1.0, la table pour lecteur d'écran portait elle-même la
   classe .screen-reader-text et ne se réduisait pas à 1 px (une table garde la
   largeur minimale de son contenu) : elle poussait la page à 393 px sur un
   téléphone de 360 px. Le parent 1.2.0 la place dans un div.screen-reader-text ;
   cette règle reste un filet : le graphique est son bloc conteneur et rogne ce
   qui déborderait, et la table reste une vraie table pour les lecteurs d'écran. */
.sbg-pro figure.sbg-pp-barres {
	position: relative;
	overflow: hidden;
}

/* ------------------------------------------------------------------
   6. Formulaires du thème ([sbg_formulaire])
   ------------------------------------------------------------------
   Le modèle « contact » du site pro (functions.php) marque ses champs courts
   « demi » : ils vont par deux dès 600 px. Le parent ne sait le faire que dans
   les pages pros (pros.css), dont la règle plus spécifique reste maîtresse.
   ------------------------------------------------------------------ */

.sbg-form:where(:has(> .sbg-form__champ--demi)) .sbg-form__envoyer {
	justify-self: start;
}

/* ------------------------------------------------------------------
   7. Mon compte
   ------------------------------------------------------------------
   Rendu par [woocommerce_my_account] dans page.php. Sans woocommerce-layout.css,
   la navigation et le contenu s'empilaient, les champs « prénom / nom » ne
   partageaient plus leur ligne, le bouton qui montre le mot de passe perdait son
   icône, et les tableaux débordaient sur téléphone. Tout est repris ici, aux
   couleurs du site.
   ------------------------------------------------------------------ */

/* Largeur : deux colonnes ne tiennent pas dans la colonne de lecture de 760 px
   que le parent donne aux pages de texte. */
.sbg-pro.woocommerce-account .sbg-page > .sbg-prose:not(.sbg-prose--libre) {
	max-width: calc(var(--sbg-largeur) + 2 * var(--sbg-gouttiere));
	font-size: var(--sbg-t-corps);
	line-height: 1.6;
}

.sbg-pro.woocommerce-account .sbg-prose--libre > .woocommerce {
	max-width: calc(var(--sbg-largeur) + 2 * var(--sbg-gouttiere));
	margin-inline: auto;
	padding: var(--sbg-e6) var(--sbg-gouttiere) var(--sbg-e8);
}

/* Les champs de WooCommerce lisent ces variables : on les règle sur les jetons
   du site plutôt que de réécrire chaque règle. */
.sbg-pro.woocommerce-account .woocommerce {
	--wc-form-border-width: 2px;
	--wc-form-border-color: var(--sbg-trait);
	--wc-form-border-radius: var(--sbg-r-champ);
	--wc-form-color-background: var(--sbg-blanc);
	--wc-form-color-text: var(--sbg-encre);
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation ul,
.sbg-pro.woocommerce-account .woocommerce-MyAccount-content :where(ul, ol).woocommerce-PaymentMethods {
	padding-inline-start: 0;
}

/* Navigation : une carte blanche, l'onglet courant en vert plein. */
.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: var(--sbg-e2);
	border: 1px solid var(--sbg-ligne);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce-fiche);
	list-style: none;
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation li,
.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	margin: 0;
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.55rem var(--sbg-e3);
	border: 1px solid transparent;
	border-radius: var(--sbg-r-champ);
	font-size: var(--sbg-t-corps);
	color: var(--sbg-pine);
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background var(--sbg-transition), color var(--sbg-transition);
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible {
	background: var(--sbg-feuille);
	color: var(--sbg-pine);
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current="page"] {
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--sbg-e1);
	padding-top: var(--sbg-e1);
	border-top: 1px solid var(--sbg-trait);
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--sbg-berry-fonce);
}

/* Contenu. */
.sbg-pro.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-content > * + * {
	margin-top: var(--sbg-e4);
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-content :is(h2, h3) {
	font-size: var(--sbg-t-h3);
}

.sbg-pro.woocommerce-account .woocommerce-MyAccount-content mark {
	background: transparent;
	color: inherit;
	font-weight: 700;
}

.sbg-pro.woocommerce-account .woocommerce :is(.col2-set, .woocommerce-columns--2)::before,
.sbg-pro.woocommerce-account .woocommerce :is(.col2-set, .woocommerce-columns--2)::after {
	content: none;
}

.sbg-pro.woocommerce-account .woocommerce :is(.col2-set, .woocommerce-columns--2) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbg-e5);
}

.sbg-pro.woocommerce-account .woocommerce :is(.col2-set, .woocommerce-columns--2) > * {
	float: none;
	width: auto;
	margin: 0;
}

/* Adresses : une carte par adresse. */
.sbg-pro.woocommerce-account :is(.woocommerce-Address, .woocommerce-customer-details .woocommerce-column) {
	padding: var(--sbg-e4) var(--sbg-e5);
	border: 1px solid var(--sbg-ligne);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce-fiche);
}

.sbg-pro.woocommerce-account .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sbg-e1) var(--sbg-e3);
	margin-bottom: var(--sbg-e2);
}

.sbg-pro.woocommerce-account :is(.woocommerce-Address-title, .woocommerce-customer-details) :is(h2, h3),
.sbg-pro.woocommerce-account .woocommerce-column__title {
	font-size: var(--sbg-t-h4);
}

.sbg-pro.woocommerce-account .woocommerce-Address-title .edit {
	font-size: var(--sbg-t-petit);
	font-weight: 600;
}

.sbg-pro.woocommerce-account .woocommerce address {
	font-style: normal;
	line-height: 1.6;
}

/* Formulaires : deux colonnes pour les champs « premier / dernier », une pour
   le reste ; l'espacement vient de la grille, pas des marges de WooCommerce. */
.sbg-pro.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sbg-e3) var(--sbg-e4);
}

.sbg-pro.woocommerce-account .woocommerce form .clear {
	display: none;
}

.sbg-pro.woocommerce-account .woocommerce form .form-row {
	margin: 0;
	padding: 0;
}

.sbg-pro.woocommerce-account .woocommerce form .form-row label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--sbg-t-petit);
	font-weight: 600;
	line-height: 1.4;
	color: var(--sbg-pine);
}

.sbg-pro.woocommerce-account .woocommerce form .form-row :is(label.checkbox, label.woocommerce-form__label-for-checkbox) {
	display: inline-flex;
	align-items: center;
	gap: var(--sbg-e1);
	margin: 0;
	font-weight: 400;
	color: var(--sbg-encre);
}

.sbg-pro.woocommerce-account .woocommerce form .form-row :is(.input-text, select, textarea) {
	width: 100%;
	padding: 0.6rem var(--sbg-e3);
	border: 2px solid var(--sbg-trait);
	border-radius: var(--sbg-r-champ);
	background-color: var(--sbg-blanc);
	color: var(--sbg-encre);
	line-height: 1.4;
	transition: border-color var(--sbg-transition);
}

.sbg-pro.woocommerce-account .woocommerce form .form-row :is(.input-text, select, textarea):focus {
	border-color: var(--sbg-pine);
	outline: none;
}

.sbg-pro.woocommerce-account .woocommerce form .form-row.woocommerce-invalid :is(.input-text, select) {
	border-color: var(--sbg-berry);
}

.sbg-pro.woocommerce-account .woocommerce form .form-row.woocommerce-invalid label {
	color: var(--sbg-berry-fonce);
}

.sbg-pro.woocommerce-account .woocommerce form .form-row :is(input[type="checkbox"], input[type="radio"]) {
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	accent-color: var(--sbg-pine);
}

.sbg-pro.woocommerce-account .woocommerce form .form-row > span > em {
	display: block;
	margin-top: 4px;
	font-size: var(--sbg-t-petit);
	font-style: normal;
	color: var(--sbg-encre-doux);
}

/* Liste de pays et de départements (selectWoo) : même champ que les autres. */
.sbg-pro.woocommerce-account .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 2.9rem;
	border: 2px solid var(--sbg-trait);
	border-radius: var(--sbg-r-champ);
	background: var(--sbg-blanc);
}

.sbg-pro.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0.6rem var(--sbg-e3);
	line-height: 1.4;
	color: var(--sbg-encre);
}

.sbg-pro.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: var(--sbg-e1);
	transform: translateY(-50%);
}

.sbg-pro.woocommerce-account .select2-container--default.select2-container--focus .select2-selection--single,
.sbg-pro.woocommerce-account .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--sbg-pine);
}

.sbg-pro.woocommerce-account .woocommerce form fieldset {
	display: grid;
	gap: var(--sbg-e3);
	min-width: 0;
	margin: var(--sbg-e2) 0 0;
	padding: var(--sbg-e4) var(--sbg-e5) var(--sbg-e5);
	border: 1px solid var(--sbg-ligne);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
}

.sbg-pro.woocommerce-account .woocommerce form legend {
	padding-inline: var(--sbg-e1);
	font-weight: 700;
	color: var(--sbg-pine);
}

/* Formulaires affichés sans compte (mot de passe perdu, réinitialisation,
   connexion quand la porte d'accès n'est pas en service) : une carte. */
.sbg-pro.woocommerce-account .woocommerce :is(form.woocommerce-ResetPassword, form.woocommerce-form-login, form.woocommerce-form-register) {
	display: grid;
	gap: var(--sbg-e3);
	max-width: 560px;
	margin: 0;
	padding: var(--sbg-e5);
	border: 1px solid var(--sbg-ligne);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce-fiche);
	text-align: start;
}

.sbg-pro.woocommerce-account .woocommerce :is(form.woocommerce-ResetPassword, form.woocommerce-form-login, form.woocommerce-form-register) > p {
	margin: 0;
}

.sbg-pro.woocommerce-account .woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sbg-e2) var(--sbg-e4);
}

.sbg-pro.woocommerce-account .woocommerce .woocommerce-form-login__submit {
	float: none;
	margin: 0;
}

.sbg-pro.woocommerce-account .woocommerce .u-columns.col2-set h2 {
	font-size: var(--sbg-t-h3);
	margin-bottom: var(--sbg-e3);
}

/* Tableaux : commandes, détail d'une commande, moyens de paiement. */
.sbg-pro.woocommerce-account .woocommerce table.shop_table {
	font-size: 0.95rem;
}

.sbg-pro.woocommerce-account .woocommerce table.shop_table :is(th, td) {
	padding: var(--sbg-e2) var(--sbg-e3);
	border: 0;
	border-top: 1px solid var(--sbg-trait);
	text-align: start;
	vertical-align: middle;
}

.sbg-pro.woocommerce-account .woocommerce table.shop_table thead th {
	border-top: 0;
	overflow-wrap: normal;
	white-space: nowrap;
}

.sbg-pro.woocommerce-account .woocommerce table.shop_table tfoot :is(th, td) {
	font-weight: 600;
}

.sbg-pro.woocommerce-account .woocommerce table.shop_table .button {
	padding: 0.3rem 0.9rem;
	font-size: var(--sbg-t-petit);
	box-shadow: none;
}

.sbg-pro.woocommerce-account .woocommerce .woocommerce-orders-table__cell-order-actions .button + .button {
	margin-inline-start: 4px;
}

.sbg-pro.woocommerce-account .woocommerce .woocommerce-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sbg-e2);
}

/* Le fil des mises à jour d'une commande. */
.sbg-pro.woocommerce-account .woocommerce-OrderUpdates {
	display: grid;
	gap: var(--sbg-e2);
	list-style: none;
	padding-inline-start: 0;
}

.sbg-pro.woocommerce-account .woocommerce-OrderUpdate {
	padding: var(--sbg-e3) var(--sbg-e4);
	border-inline-start: 4px solid var(--sbg-pine-300);
	border-radius: var(--sbg-r-champ);
	background: var(--sbg-blanc);
}

.sbg-pro.woocommerce-account .woocommerce-OrderUpdate-meta {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
}

/* Le bouton qui montre le mot de passe : sa mise en page et son icône
   vivaient dans woocommerce-layout.css. Icônes « œil » et « œil barré » de
   Lucide (licence ISC, comme le sprite du parent), en masque : elles prennent la
   couleur du texte. */
.woocommerce .password-input {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.woocommerce .password-input :is(input[type="password"], input[type="text"]) {
	padding-inline-end: 2.9rem;
}

.woocommerce .password-input input::-ms-reveal {
	display: none;
}

.woocommerce .show-password-input {
	position: absolute;
	top: 50%;
	inset-inline-end: 0.45rem;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--sbg-r-champ);
	background: transparent;
	box-shadow: none;
	color: var(--sbg-pine);
	cursor: pointer;
	transform: translateY(-50%);
}

.woocommerce .show-password-input:hover,
.woocommerce .show-password-input:focus-visible {
	background: var(--sbg-feuille);
}

.woocommerce .show-password-input::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   8. Adaptations
   ------------------------------------------------------------------ */

@media (min-width: 600px) {

	.sbg-form:where(:has(> .sbg-form__champ--demi)) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sbg-e3) var(--sbg-e4);
		max-width: var(--sbg-largeur-etroite);
	}

	.sbg-form:where(:has(> .sbg-form__champ--demi)) > :where(:not(.sbg-form__champ--demi)) {
		grid-column: 1 / -1;
	}

	.sbg-etapes-num--quatre {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sbg-e5);
	}

	.sbg-pro-pied__grille.sbg-pied__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sbg-pro.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sbg-pro.woocommerce-account :is(.woocommerce-EditAccountForm, .woocommerce-address-fields__field-wrapper) > :not(.form-row-first, .form-row-last) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) {

	.sbg-pro .sbg-porte {
		flex: 1 1 0;
		min-width: 0;
	}

	.sbg-pro.woocommerce-account .woocommerce :is(.col2-set, .woocommerce-columns--2) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 901px) {

	.sbg-pro-accueil-tete__grille {
		grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
	}

	.sbg-pro-accueil-tete__connexion,
	:where(.sbg-duo, .wp-block-columns) > :has(#connexion) {
		margin-inline: auto 0;
	}

	/* Mon compte en deux colonnes : navigation à gauche, contenu à droite ; tout
	   autre enfant (messages, formulaire sans compte) prend la largeur. */
	.sbg-pro.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
		gap: var(--sbg-e6);
		align-items: start;
	}

	/* Le « clearfix » de WooCommerce (::before et ::after en display: table)
	   deviendrait deux cellules de la grille et décalerait la navigation d'une
	   colonne : on le retire, et chaque enfant est placé explicitement. */
	.sbg-pro.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::before,
	.sbg-pro.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation)::after {
		content: none;
	}

	.sbg-pro.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > :not(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
		grid-column: 1 / -1;
	}

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation {
		position: sticky;
		top: var(--sbg-e4);
		grid-column: 1;
	}

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 2;
	}
}

@media (min-width: 1025px) {

	.sbg-etapes-num--quatre {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* La colonne des coordonnées prend la largeur de l'adresse email, les
	   autres se partagent le reste. */
	.sbg-pro-pied__grille.sbg-pied__grille {
		grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (max-width: 900px) {

	/* Le parent masque son bandeau sur téléphone et recopie ses liens dans le
	   panneau du menu. Le bandeau pro reste : il est la seule sortie visible
	   vers le site particuliers. */
	.sbg-pro .sbg-barre-haute.sbg-pro-bandeau {
		display: block;
		font-size: 0.8125rem;
	}

	.sbg-barre-haute.sbg-pro-bandeau .sbg-pro-bandeau__inner {
		justify-content: center;
		text-align: center;
		padding-block: 0.35rem;
	}

	/* Les boutons de compte quittent la barre pour le panneau du menu ; « Se
	   connecter » garde un raccourci en icône. */
	.sbg-barre__actions .sbg-pro-action--texte {
		display: none;
	}

	.sbg-pro-action--mobile {
		display: inline-flex;
	}

	.sbg-nav__appoint.sbg-pro-nav__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sbg-e2);
	}

	/* La navigation sort du flux (panneau fixe) : sans marge automatique, les
	   icônes et le bouton du menu se collaient au logo au lieu du bord droit. */
	.sbg-pro .sbg-barre__actions {
		margin-inline-start: auto;
	}

	/* Le panneau du menu couvre tout l'écran (position fixe, z-index 50) : sans
	   ceci, il recouvrait aussi le bouton qui le referme, et l'on ne sortait du
	   menu qu'en choisissant un lien. */
	.sbg-pro .sbg-barre__actions {
		position: relative;
		z-index: 60;
	}

	/* Le bandeau reste au-dessus de la barre : le premier lien du panneau
	   descend d'autant pour ne pas passer sous le bouton de fermeture. */
	.sbg-pro .sbg-nav {
		padding-top: 8.5rem;
	}

	/* Menu au clavier. À l'ouverture, theme.js du parent donne le focus au
	   premier lien juste après avoir posé est-ouvert ; mais la transition du
	   parent gardait le panneau en visibility: hidden pendant 0,3 s, et un
	   élément caché ne reçoit pas le focus : il restait sur le bouton. La
	   visibilité bascule donc tout de suite à l'ouverture ; à la fermeture, la
	   règle du parent la garde le temps du glissement. */
	.sbg-pro .sbg-nav.est-ouvert {
		transition: transform 0.3s ease, visibility 0s;
	}

	/* Tant que le panneau couvre l'écran, ce qu'il cache sort de l'ordre de
	   tabulation : sans cela, Tab menait du bouton du menu au contenu de la
	   page, invisible derrière le panneau et impossible à faire défiler
	   (body.menu-ouvert est en overflow: hidden). Les icônes de la barre et le
	   bouton de fermeture, au-dessus du panneau, restent atteignables. Le
	   masquage attend la fin du glissement : la page ne disparaît pas avant
	   d'être couverte. Toutes les fermetures (bouton, Échap, lien, grand écran)
	   retirent menu-ouvert, donc ce masquage. */
	body.sbg-pro.menu-ouvert :is(.sbg-evitement, .sbg-pro-bandeau, .sbg-brand, #sbg-contenu, .sbg-pied, .sbg-haut) {
		visibility: hidden;
		transition: visibility 0s linear 0.3s;
	}

	/* Mon compte : la navigation passe en pastilles au-dessus du contenu. */
	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: var(--sbg-e5);
	}

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sbg-e1);
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation a {
		padding: 0.35rem 0.9rem;
		border: 1.5px solid var(--sbg-trait);
		border-radius: var(--sbg-r-pilule);
		background: var(--sbg-blanc);
		font-size: var(--sbg-t-petit);
	}

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation .is-active a,
	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation a[aria-current="page"] {
		border-color: var(--sbg-pine);
	}

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

@media (max-width: 767px) {

	.sbg-pro .sbg-porte {
		flex-basis: 100%;
	}

	/* Tableaux de Mon compte : une carte par ligne, l'intitulé de colonne
	   devant chaque valeur (repris de woocommerce-smallscreen.css). Le numéro
	   de commande, cellule d'en-tête de ligne, reste affiché. */
	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive thead {
		display: none;
	}

	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody tr {
		display: block;
		padding-block: var(--sbg-e1);
	}

	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody tr + tr {
		border-top: 2px solid var(--sbg-ligne);
	}

	/* Bloc et non flex : une valeur faite de plusieurs morceaux (« 277,20 € pour
	   12 articles ») reste d'un seul tenant. L'intitulé flotte à gauche. */
	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody :is(th, td) {
		display: block;
		border-top: 0;
		text-align: end;
	}

	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody :is(th, td)[data-title]::before {
		content: attr(data-title) "\00a0:";
		float: inline-start;
		margin-inline-end: var(--sbg-e3);
		font-weight: 600;
		color: var(--sbg-pine);
		text-align: start;
	}

	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody th:not([data-title]) {
		display: none;
	}

	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody :is(.order-actions, .woocommerce-orders-table__cell-order-actions, .payment-method-actions) {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sbg-e1);
		text-align: start;
	}

	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody :is(.order-actions, .woocommerce-orders-table__cell-order-actions, .payment-method-actions) .button + .button {
		margin-inline-start: 0;
	}

	.sbg-pro.woocommerce-account .woocommerce table.shop_table_responsive tbody :is(.order-actions, .woocommerce-orders-table__cell-order-actions, .payment-method-actions)::before {
		content: none;
	}
}

@media (max-width: 599px) {

	.sbg-pro.woocommerce-account .woocommerce :is(form.woocommerce-ResetPassword, form.woocommerce-form-login, form.woocommerce-form-register),
	.sbg-pro.woocommerce-account .woocommerce form fieldset {
		padding: var(--sbg-e4);
	}
}

/* ------------------------------------------------------------------
   9. Mouvement réduit
   ------------------------------------------------------------------
   Le parent ramène déjà toutes les transitions à 0,01 ms. Restent les
   déplacements eux-mêmes, qui sautent au lieu de glisser : on les retire.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

	.sbg-pro .sbg-porte:hover,
	.sbg-pro .sbg-porte:focus-visible,
	.sbg-pro-pied__sortie:hover .sbg-ico,
	.sbg-pro-pied__sortie:focus-visible .sbg-ico,
	.sbg-barre__actions .sbg-pro-action--texte:hover,
	.sbg-barre__actions .sbg-pro-action--texte:focus-visible {
		transform: none;
	}

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}
}

/* ------------------------------------------------------------------
   10. Impression
   ------------------------------------------------------------------
   Une commande de Mon compte s'imprime sans la navigation du compte.
   ------------------------------------------------------------------ */

@media print {

	.sbg-pro.woocommerce-account .woocommerce-MyAccount-navigation,
	.sbg-pro-saison__decompte {
		display: none !important;
	}

	.sbg-pro.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: block;
	}
}