@charset "UTF-8";
/*
 * Habillage du site — thème SBG.
 *
 * Les couleurs, les graisses et les rayons viennent du kit du site historique :
 * la refonte change la mécanique, pas le dessin. Ce qui a été repris tel quel
 * est signalé par la valeur d'origine en commentaire.
 *
 * Ordre du fichier : police, jetons, remise à zéro, éléments, mise en page,
 * en-tête, contenu, sections, pied. Aucune règle ne remonte plus haut que son
 * chapitre — c'est ce qui permet de lire la cascade de haut en bas.
 */

/* ------------------------------------------------------------------
   1. Police
   ------------------------------------------------------------------
   Outfit en fichier variable unique : une seule requête pour les cinq
   graisses employées (300 à 900), et 39 Ko au lieu des 110 du TTF que le
   constructeur servait. `font-display: swap` affiche le texte tout de suite
   dans la police de repli plutôt que de laisser un blanc.
   ------------------------------------------------------------------ */

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------
   2. Jetons
   ------------------------------------------------------------------ */

:root {
	/* Couleurs du kit. Les noms disent la couleur, pas l'usage : « pine » vaut
	   mieux que « secondary » quand on lit une règle six mois plus tard. */
	--sbg-pine: #046865;          /* kit : secondary */
	--sbg-pine-fonce: #03514f;
	--sbg-berry: #f02848;         /* kit : primary */
	--sbg-berry-fonce: #c32c53;   /* kit : rouge logo */
	--sbg-encre: #372d33;         /* kit : text */
	--sbg-brume: #d8e2dc;         /* kit : vert léger */
	--sbg-rose: #ffcad4;
	--sbg-feuille: #eff9ef;       /* kit : vert très pâle */
	--sbg-blush: #fff0f3;         /* kit : rose très pâle */
	--sbg-fond: #fafffa;          /* kit : fond */
	--sbg-blanc: #fff;

	/* Dérivées, pour les états et les traits. */
	--sbg-trait: color-mix(in srgb, var(--sbg-pine) 18%, transparent);
	--sbg-encre-doux: color-mix(in srgb, var(--sbg-encre) 72%, var(--sbg-blanc));

	/* Jetons repris du design system des maquettes Claude Design, pour que la
	   boutique et la fiche produit tombent sur les mêmes valeurs qu'elles. */
	--sbg-pine-300: #8fc4c0;
	--sbg-pine-100: #d3e8e6;
	--sbg-berry-vif: #cb0000;
	--sbg-gris: #5a716d;
	--sbg-ligne: #e3efec;

	--sbg-ombre-fiche: 0 8px 28px rgb(4 104 101 / 0.09);
	--sbg-ombre-douce-fiche: 0 6px 24px rgb(4 104 101 / 0.07);

	/* Typographie. */
	--sbg-police: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--sbg-t-h1: clamp(2.3rem, 1.55rem + 2.35vw, 3.2rem);
	--sbg-t-h1-lh: clamp(2.8rem, 2rem + 2.5vw, 4rem);
	--sbg-t-h2: clamp(1.75rem, 1.35rem + 1.25vw, 2.3rem);
	--sbg-t-h3: clamp(1.35rem, 1.15rem + 0.65vw, 1.6rem);
	--sbg-t-h4: 1.3rem;
	--sbg-t-faq: 1.1rem;
	--sbg-t-petit: 0.9rem;
	--sbg-t-corps: 1rem;

	/* Rythme. Une échelle unique, employée partout : les espacements du site
	   historique tombaient tous sur 10, 15, 20, 25, 40, 50 et 80 px. */
	--sbg-e1: 0.5rem;
	--sbg-e2: 0.625rem;
	--sbg-e3: 0.9375rem;
	--sbg-e4: 1.25rem;
	--sbg-e5: 1.5625rem;
	--sbg-e6: 2.5rem;
	--sbg-e7: 3.125rem;
	--sbg-e8: 5rem;

	/* Formes. */
	--sbg-r-carte: 15px;
	--sbg-r-pilule: 1000px;
	--sbg-r-champ: 10px;

	--sbg-ombre-carte: 5px 5px 10px 0 rgb(0 0 0 / 0.12);
	--sbg-ombre-douce: 5px 5px 10px 0 rgb(0 0 0 / 0.04);
	--sbg-ombre-bouton: 6px 6px 10px -4px rgb(0 0 0 / 0.14);
	--sbg-ombre-barre: 0 0 10px 0 rgb(0 0 0 / 0.14);
	--sbg-ombre-faq: 6px 5px 18px 0 rgb(0 0 0 / 0.12);

	/* Mise en page. */
	--sbg-largeur: 1140px;
	--sbg-largeur-etroite: 760px;
	--sbg-gouttiere: clamp(1rem, 0.5rem + 2vw, 2.5rem);

	--sbg-transition: 0.25s ease;

	color-scheme: light;
}

/* ------------------------------------------------------------------
   3. Remise à zéro
   ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--sbg-fond);
	color: var(--sbg-encre);
	font-family: var(--sbg-police);
	font-size: var(--sbg-t-corps);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

iframe {
	border: 0;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* Même raison que pour les titres et les paragraphes plus bas : on ne remet à
   zéro que les marges VERTICALES. `margin: 0` écrasait aussi le
   `margin-inline: auto` des dispositions, et une liste enfant d'une section se
   calait à gauche pendant que les paragraphes restaient centrés. */
ul,
ol {
	margin-block: 0;
	padding: 0;
}

/* Remise à zéro des marges VERTICALES seulement.
   `margin: 0` remettait aussi les marges horizontales à zéro — et comme les
   règles de disposition du chapitre 21 sont écrites en `:where()`, donc à
   spécificité nulle, ce reset les battait : dans une section « contenu
   contraint », le `margin-inline: auto` ne s'appliquait plus aux titres ni aux
   paragraphes. Ils se calaient à gauche pendant que les grilles, elles,
   restaient centrées — 113 px d'écart entre un titre et les cartes qu'il
   annonce, sur toutes les pages du site. */
figure,
blockquote,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--sbg-trait);
	margin: var(--sbg-e6) 0;
}

/* ------------------------------------------------------------------
   4. Éléments
   ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.15;
	color: var(--sbg-pine);
	text-wrap: balance;
}

h1 {
	font-size: var(--sbg-t-h1);
	line-height: var(--sbg-t-h1-lh);
}

h2 {
	font-size: var(--sbg-t-h2);
}

h3 {
	font-size: var(--sbg-t-h3);
}

h4 {
	font-size: var(--sbg-t-h4);
}

h5,
h6 {
	font-size: 1.1rem;
}

a {
	color: var(--sbg-pine);
	text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
	text-underline-offset: 0.18em;
	transition: color var(--sbg-transition);
}

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

:focus-visible {
	outline: 3px solid var(--sbg-berry);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: var(--sbg-rose);
	color: var(--sbg-encre);
}

.sbg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.sbg-ico {
	flex: none;
	vertical-align: middle;
}

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

.sbg-evitement {
	position: absolute;
	top: -100px;
	left: var(--sbg-e4);
	z-index: 100;
	padding: var(--sbg-e2) var(--sbg-e4);
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	border-radius: 0 0 var(--sbg-r-champ) var(--sbg-r-champ);
	text-decoration: none;
	transition: top var(--sbg-transition);
}

.sbg-evitement:focus {
	top: 0;
	color: var(--sbg-blanc);
}

/* ------------------------------------------------------------------
   5. Mise en page
   ------------------------------------------------------------------ */

.sbg-shell {
	width: 100%;
	max-width: calc(var(--sbg-largeur) + 2 * var(--sbg-gouttiere));
	margin-inline: auto;
	padding-inline: var(--sbg-gouttiere);
}

.sbg-shell--etroit {
	max-width: calc(var(--sbg-largeur-etroite) + 2 * var(--sbg-gouttiere));
}

.sbg-contenu {
	display: block;
	min-height: 40vh;
}

.sbg-grille {
	display: grid;
	gap: var(--sbg-e4);
}

.sbg-grille--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.sbg-grille--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.sbg-grille--4 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

/* ------------------------------------------------------------------
   6. En-tête
   ------------------------------------------------------------------ */

.sbg-entete {
	position: relative;
	z-index: 20;
}

.sbg-barre-haute {
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	font-size: 0.875rem;
}

.sbg-barre-haute .sbg-shell {
	display: flex;
	justify-content: flex-end;
}

.sbg-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbg-menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--sbg-e1);
	text-decoration: none;
}

.sbg-menu--haute {
	flex-wrap: wrap;
	gap: var(--sbg-e4);
	padding-block: 0.4rem;
}

.sbg-menu--haute a {
	color: var(--sbg-blanc);
}

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

.sbg-barre {
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-barre);
	position: sticky;
	top: 0;
	z-index: 30;
}

.sbg-barre__inner {
	display: flex;
	align-items: center;
	gap: var(--sbg-e4);
	min-height: 74px;
}

.sbg-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	padding: 2px;
	text-decoration: none;
}

.sbg-brand__img {
	width: auto;
	object-fit: contain;
}

.sbg-brand__text {
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
}

.sbg-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.sbg-menu--principal {
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(var(--sbg-e3), 2vw, var(--sbg-e6));
}

.sbg-menu--principal > li > a {
	color: var(--sbg-pine);
	font-weight: 500;
	padding-block: var(--sbg-e2);
	position: relative;
}

.sbg-menu--principal > li > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 2px;
	height: 2px;
	background: var(--sbg-berry);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--sbg-transition);
}

.sbg-menu--principal > li > a:hover::after,
.sbg-menu--principal > li > a:focus-visible::after,
.sbg-menu--principal > .current-menu-item > a::after,
.sbg-menu--principal > .current_page_item > a::after,
.sbg-menu--principal > .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

.sbg-menu--principal > li > a:hover,
.sbg-menu--principal > li > a:focus-visible {
	color: var(--sbg-encre);
}

/* Sous-menus : aucun n'existe aujourd'hui, la règle attend le jour où l'on en
   ajoutera un depuis « Apparence > Menus ». */
.sbg-menu--principal .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	list-style: none;
	margin: 0;
	padding: var(--sbg-e1) 0;
	background: var(--sbg-blanc);
	border-radius: var(--sbg-r-champ);
	box-shadow: var(--sbg-ombre-carte);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--sbg-transition), transform var(--sbg-transition), visibility var(--sbg-transition);
}

.sbg-menu--principal > li {
	position: relative;
}

.sbg-menu--principal > li:hover > .sub-menu,
.sbg-menu--principal > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sbg-menu--principal .sub-menu a {
	display: block;
	padding: var(--sbg-e1) var(--sbg-e3);
	color: var(--sbg-pine);
}

.sbg-menu--principal .sub-menu a:hover {
	background: var(--sbg-feuille);
}

.sbg-nav__appoint {
	display: none;
}

.sbg-barre__actions {
	display: flex;
	align-items: center;
	gap: var(--sbg-e3);
	flex: none;
}

.sbg-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--sbg-pine);
	text-decoration: none;
	transition: background var(--sbg-transition), color var(--sbg-transition);
}

.sbg-action:hover,
.sbg-action:focus-visible {
	background: var(--sbg-feuille);
	color: var(--sbg-pine);
}

.sbg-action__pastille {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-berry);
	color: var(--sbg-blanc);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.sbg-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--sbg-r-champ);
	background: transparent;
	color: var(--sbg-pine);
}

.sbg-burger__fermer {
	display: none;
}

.sbg-burger[aria-expanded="true"] .sbg-burger__ouvrir {
	display: none;
}

.sbg-burger[aria-expanded="true"] .sbg-burger__fermer {
	display: block;
}

/* ------------------------------------------------------------------
   7. Boutons
   ------------------------------------------------------------------
   Pilule verte à bord plein, ombre portée douce, inversion au survol : c'est
   le bouton du kit, repris trait pour trait.
   ------------------------------------------------------------------ */

.sbg-bouton,
.wp-block-button__link,
.sbg-prose .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sbg-e1);
	padding: 0.6rem 1.875rem;
	border: 2px solid var(--sbg-pine);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	box-shadow: var(--sbg-ombre-bouton);
	transition: background var(--sbg-transition), color var(--sbg-transition), transform var(--sbg-transition);
}

.sbg-bouton:hover,
.sbg-bouton:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background: var(--sbg-blanc);
	color: var(--sbg-pine);
	transform: translateY(-1px);
}

/* Variante rose : celle des sections « Qui sommes-nous ? » et des appels à
   l'action secondaires. */
.sbg-bouton--rose,
.is-style-sbg-berry .wp-block-button__link {
	background: var(--sbg-berry);
	border-color: var(--sbg-berry);
	color: var(--sbg-blanc);
}

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

.sbg-bouton--fantome,
.is-style-sbg-ghost .wp-block-button__link {
	background: transparent;
	color: var(--sbg-pine);
	box-shadow: none;
}

.sbg-bouton--fantome:hover,
.sbg-bouton--fantome:focus-visible,
.is-style-sbg-ghost .wp-block-button__link:hover,
.is-style-sbg-ghost .wp-block-button__link:focus-visible {
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
}

/* ------------------------------------------------------------------
   8. Sections
   ------------------------------------------------------------------
   Le vocabulaire des pages converties. Une section est un bloc « Groupe »
   portant `sbg-sec` et, s'il y a lieu, une couleur de fond.
   ------------------------------------------------------------------ */

.sbg-sec {
	padding-block: var(--sbg-e6);
	padding-inline: var(--sbg-gouttiere);
}

/* Le bloc « Groupe » en disposition « contenu contraint » borne déjà ses
   enfants à `--sbg-largeur` (chapitre 21) ; la section n'a plus qu'à poser ses
   gouttières. */

.sbg-sec--feuille {
	background: var(--sbg-feuille);
}

.sbg-sec--blush {
	background: var(--sbg-blush);
}

.sbg-sec--brume {
	background: var(--sbg-brume);
}

.sbg-sec--blanc {
	background: var(--sbg-blanc);
}

.sbg-sec--serre {
	padding-block: var(--sbg-e5);
}

.sbg-sec--ample {
	padding-block: var(--sbg-e8);
}

/* Section ample : la respiration est INTERIEURE, jamais en marge. Deux bandes
   colorées qui se suivent se touchent donc, sans bande de fond entre elles, et
   aucune marge ne fusionne avec sa voisine. */
.sbg-sec--detachee {
	padding-block: var(--sbg-e8);
}

/* Section masquée : une section saisonnière qu'on retire de l'affichage sans
   la supprimer du contenu. Enlever la classe la remet en ligne. */
.sbg-masquee {
	display: none !important;
}

/* Le voisin d'une section masquée ne doit pas hériter de l'écart qui les
   séparait : la section a disparu, l'espace aussi. */
.sbg-prose--libre > .sbg-masquee + *,
.sbg-prose > .sbg-masquee + * {
	margin-top: 0;
}

/* La bannière.
   Bâtie sur le bloc « Couverture » de WordPress : c'est lui qui porte l'image
   de fond, le voile et l'image de remplacement pour les lecteurs d'écran. Les
   règles ci-dessous ne font que défaire ses valeurs par défaut (hauteur minimale
   de 430 px, centrage vertical) pour retrouver la bannière du site historique. */
.sbg-banniere.wp-block-cover,
.sbg-banniere {
	min-height: 0;
	padding: var(--sbg-e8) var(--sbg-e7) 0;
	align-items: stretch;
	justify-content: flex-start;
	/* Les deux cartes débordent de 60 px sous la bannière : le `overflow:
	   hidden` du bloc « Couverture » les couperait. L'image de fond, elle, est
	   posée en absolu sur les quatre côtés et ne déborde donc jamais. */
	overflow: visible;
}

.sbg-banniere > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	/* `stretch` et non `center` : centré, le titre se réduirait à la largeur de
	   son texte et ne se couperait plus sur deux lignes comme sur le site
	   historique. Le centrage se fait par `text-align`. */
	align-items: stretch;
	width: 100%;
	/* Le constructeur bornait le contenu de ses conteneurs à 1140 px : c'est
	   cette largeur qui décide de la coupure du titre sur deux lignes et de la
	   taille des deux cartes. */
	max-width: var(--sbg-largeur);
	margin-inline: auto;
}

.sbg-banniere__titre {
	margin: var(--sbg-e7) 0 var(--sbg-e8);
	padding-inline: 10%;
	text-align: center;
	color: var(--sbg-pine);
}

/* Les deux portes de la bannière — « Professionnels » et « Particuliers ».
   Elles débordent de 60 px sous la bannière, comme sur le site historique :
   c'est ce chevauchement qui les accroche à l'image. */
.sbg-portes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sbg-e4);
	width: 61%;
	margin-inline: auto;
	margin-bottom: -60px;
}

.sbg-porte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sbg-e2);
	flex: 1 1 220px;
	padding: var(--sbg-e5);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-carte);
	color: var(--sbg-pine);
	text-align: center;
	text-decoration: none;
	transition: background var(--sbg-transition), transform var(--sbg-transition);
}

.sbg-porte:hover,
.sbg-porte:focus-visible {
	background: var(--sbg-feuille);
	transform: translateY(-2px);
	color: var(--sbg-pine);
}

.sbg-porte--rose:hover,
.sbg-porte--rose:focus-visible {
	background: var(--sbg-blush);
}

.sbg-porte__titre {
	font-size: var(--sbg-t-h3);
	font-weight: 400;
	text-transform: none;
}

/* Les cartes d'atouts — « Frais / Bio / Ecolo / Locaux ». */
.sbg-atouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--sbg-e4);
	margin-top: var(--sbg-e5);
}

.sbg-atout {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sbg-e1);
	padding: var(--sbg-e3);
	border: 2px solid var(--sbg-pine);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-feuille);
	box-shadow: var(--sbg-ombre-douce);
	text-align: center;
	transition: background 0.6s;
}

.sbg-atout:hover {
	background: var(--sbg-blanc);
}

.sbg-atout__icone {
	color: var(--sbg-pine);
}

.sbg-atout__titre {
	margin-bottom: 9px;
	font-size: var(--sbg-t-h3);
	font-weight: 400;
	text-transform: none;
	color: var(--sbg-pine);
}

.sbg-atout__texte {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre);
}

/* Duo texte + image : « Votre sapin de Noël », « Qui sommes-nous ? ». */
.sbg-duo {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sbg-e7);
	align-items: center;
}

.sbg-duo__texte > * + * {
	margin-top: var(--sbg-e2);
}

.sbg-duo__media img {
	width: 100%;
	border-radius: var(--sbg-r-carte);
}

.sbg-surtitre,
.is-style-sbg-surtitre {
	font-size: var(--sbg-t-corps);
	font-weight: 400;
	text-transform: none;
	line-height: 1.4;
	color: var(--sbg-pine);
}

.sbg-surtitre--rose,
.sbg-sec--blush .sbg-surtitre {
	color: var(--sbg-berry);
}

.sbg-titre-sec {
	font-size: var(--sbg-t-h3);
	font-weight: 900;
	text-transform: uppercase;
}

/* Même corps, mais fin et en minuscules : c'est la seconde graisse de titre du
   kit (« H3 — Fin et Min »), employée pour « Coordonnées » et les intitulés de
   carte. */
.sbg-titre-sec--fin {
	font-size: var(--sbg-t-h3);
	font-weight: 400;
	text-transform: none;
}

/* Liste « Retrait / Livraison / Coupe » : icône à gauche, deux lignes à droite. */
.sbg-modes {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e4);
	list-style: none;
}

.sbg-mode {
	display: flex;
	align-items: center;
	gap: var(--sbg-e3);
}

/* Quand la ligne porte un titre et un paragraphe, l'icône se cale sur le titre
   et non au milieu du bloc de texte. */
.sbg-modes--haut .sbg-mode,
.sbg-mode:has(h3) {
	align-items: flex-start;
}

.sbg-mode :is(h3, h4) {
	margin-bottom: 4px;
	font-size: var(--sbg-t-h3);
	font-weight: 700;
	text-transform: none;
	line-height: 1.2;
}

.sbg-mode p {
	color: var(--sbg-encre);
	font-size: 0.95rem;
	line-height: 1.6;
}

.sbg-mode__icone {
	flex: none;
	color: var(--sbg-pine);
}

.sbg-mode__titre {
	display: block;
	font-size: var(--sbg-t-h4);
	font-weight: 600;
	color: var(--sbg-pine);
}

.sbg-mode__sous {
	display: block;
	color: var(--sbg-pine);
}

/* Pastilles de réassurance. */
.sbg-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbg-e2);
	list-style: none;
}

.sbg-pastille {
	padding: 0.1rem var(--sbg-e2);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-brume);
	color: var(--sbg-pine);
	font-size: var(--sbg-t-petit);
}

.sbg-pastille--rose {
	background: var(--sbg-berry);
	color: var(--sbg-feuille);
}

/* Coordonnées. */
.sbg-coordonnees {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e1);
	list-style: none;
}

.sbg-coordonnees a {
	display: inline-flex;
	align-items: center;
	gap: var(--sbg-e1);
	text-decoration: none;
}

/* Carte intégrée : chargée en différé, jamais avant le premier affichage. */
.sbg-carte-lieu {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--sbg-r-carte);
	overflow: hidden;
	background: var(--sbg-brume);
}

.sbg-carte-lieu iframe {
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------------------
   9. FAQ
   ------------------------------------------------------------------
   `<details>` natif : l'accordéon du site historique demandait jQuery et le
   moteur du constructeur ; celui-ci ne demande rien.
   ------------------------------------------------------------------ */

.sbg-faq {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e4);
}

.sbg-faq details,
.sbg-prose details {
	background: var(--sbg-blanc);
	border-radius: var(--sbg-r-carte);
	box-shadow: var(--sbg-ombre-faq);
	overflow: hidden;
}

.sbg-faq summary,
.sbg-prose details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbg-e3);
	padding: var(--sbg-e5) var(--sbg-e5);
	font-size: var(--sbg-t-faq);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
	cursor: pointer;
	list-style: none;
}

.sbg-faq summary::-webkit-details-marker,
.sbg-prose details > summary::-webkit-details-marker {
	display: none;
}

.sbg-faq summary::after,
.sbg-prose details > summary::after {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentcolor;
	border-bottom: 2px solid currentcolor;
	transform: rotate(-45deg);
	transition: transform var(--sbg-transition);
}

.sbg-faq details[open] summary::after,
.sbg-prose details[open] > summary::after {
	transform: rotate(45deg);
}

.sbg-faq details > :not(summary),
.sbg-prose details > :not(summary) {
	padding-inline: 2.1875rem;
}

/* Une liste garde le même bord gauche que les paragraphes : ses puces vivent
   dans la marge, il faut donc leur ménager la place en plus du retrait. */
.sbg-faq details > :is(ul, ol),
.sbg-prose details > :is(ul, ol) {
	padding-inline-start: calc(2.1875rem + 1.2em);
}

.sbg-faq details > :not(summary):last-child,
.sbg-prose details > :not(summary):last-child {
	padding-bottom: var(--sbg-e3);
}

/* La variante « carte » : un seul bloc blanc, les questions séparées par un
   filet plutôt que posées en briques. Partagée par la fiche produit et la
   boutique — c'est pour cela qu'elle vit ici et non dans leurs feuilles. */

.sbg-faq--carte {
	display: block;
	border-radius: 18px;
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce-fiche);
	overflow: hidden;
}

.sbg-faq--carte details {
	border-radius: 0;
	box-shadow: none;
	border-bottom: 1px solid var(--sbg-ligne);
}

.sbg-faq--carte details:last-child {
	border-bottom: 0;
}

.sbg-faq--carte summary {
	padding: 17px 22px;
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	color: var(--sbg-encre);
	transition: background 0.16s;
}

.sbg-faq--carte summary:hover {
	background: var(--sbg-fond);
}

.sbg-faq--carte details > :not(summary) {
	padding-inline: 22px;
	max-width: 84ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--sbg-gris);
}

.sbg-faq--carte details > :last-child {
	padding-bottom: 20px;
}

/* ------------------------------------------------------------------
   10. Contenu éditorial
   ------------------------------------------------------------------ */

.sbg-prose {
	max-width: 100%;
}

/* Une prose posée DANS une section prend la largeur de contenu, comme les
   titres et les paragraphes qui l'entourent — sinon elle déborde de 113 px de
   chaque côté et l'on croit à un défaut d'alignement. */
.sbg-sec > .sbg-prose {
	max-width: var(--sbg-largeur);
	margin-inline: auto;
}

/* Une page de lecture — histoire, label, CGV, page de ville — se lit sur une
   colonne étroite : le corps y monte d'un cran et l'interligne s'ouvre, sinon
   le texte paraît petit et serré au milieu du blanc. */
.sbg-page > .sbg-prose:not(.sbg-prose--libre),
.sbg-article .sbg-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* Spécificité volontairement non nulle : la remise à zéro de `p { margin: 0 }`
   du chapitre 3 vaut 0,0,1 et l'emporterait sur un `:where()`. */
.sbg-prose > * + * {
	margin-top: var(--sbg-e4);
}

.sbg-prose > h2 {
	margin-top: var(--sbg-e6);
}

.sbg-prose > h3,
.sbg-prose > h4 {
	margin-top: var(--sbg-e5);
}

.sbg-prose :where(ul, ol):where(:not(.sbg-menu, .sbg-modes, .sbg-pastilles, .sbg-coordonnees, .sbg-etapes, .sbg-faq, .wp-block-gallery)) {
	padding-inline-start: 1.3em;
}

.sbg-prose li + li {
	margin-top: 0.35em;
}

.sbg-prose img {
	border-radius: var(--sbg-r-carte);
}

/* Une photo posée au fil du texte est bornée en hauteur : sur une colonne de
   760 px, une image en portrait occupait sinon deux écrans à elle seule. */
.sbg-page > .sbg-prose:not(.sbg-prose--libre) img,
.sbg-article .sbg-prose img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
}

.sbg-prose figure {
	margin-block: var(--sbg-e5);
}

/* Les légendes de l'éditeur classique portent une largeur en pixels écrite
   dans l'attribut `style` — 1 034 px pour une colonne de 760. Seul un
   `!important` passe devant un style en ligne. */
.sbg-prose .wp-caption {
	width: auto !important;
	max-width: 100% !important;
}

.sbg-prose .wp-caption img {
	width: 100%;
}

.sbg-prose .wp-caption-text {
	margin-top: var(--sbg-e1);
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
	text-align: center;
}

.sbg-prose :is(h2, h3, h4) + p {
	margin-top: var(--sbg-e2);
}

.sbg-prose figcaption {
	margin-top: var(--sbg-e1);
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
	text-align: center;
}

.sbg-prose blockquote {
	margin: 0;
	padding: var(--sbg-e4) var(--sbg-e5);
	border-inline-start: 4px solid var(--sbg-berry);
	background: var(--sbg-blush);
	border-radius: 0 var(--sbg-r-carte) var(--sbg-r-carte) 0;
	font-size: 1.05rem;
}

.sbg-prose blockquote p + p {
	margin-top: var(--sbg-e2);
}

.sbg-prose blockquote :is(cite, .wp-block-quote__citation) {
	display: block;
	margin-top: var(--sbg-e2);
	font-size: var(--sbg-t-petit);
	font-style: normal;
	font-weight: 600;
	color: var(--sbg-pine);
}

.wp-block-quote {
	box-sizing: border-box;
}

.sbg-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.sbg-prose :is(th, td) {
	padding: var(--sbg-e2) var(--sbg-e3);
	border: 1px solid var(--sbg-trait);
	text-align: start;
}

/* L'alignement posé sur une cellule dans l'éditeur doit passer devant le
   défaut ci-dessus, qui est plus spécifique qu'une simple classe. */
.sbg-prose :is(th, td).has-text-align-center {
	text-align: center;
}

.sbg-prose :is(th, td).has-text-align-right {
	text-align: end;
}

/* Les tableaux larges défilent dans leur cadre plutôt que de pousser la page. */
.wp-block-table {
	overflow-x: auto;
}

.sbg-prose th {
	background: var(--sbg-feuille);
	color: var(--sbg-pine);
	font-weight: 600;
}

.sbg-prose code,
.sbg-prose kbd {
	padding: 0.1em 0.35em;
	border-radius: 5px;
	background: var(--sbg-brume);
	font-size: 0.9em;
}

/* Une page dont le contenu porte ses propres sections pleine largeur : le
   conteneur ne borne plus, chaque section se borne elle-même. */
/* Une page qui finit sur une bande colorée touche le pied de page ; une page
   qui finit sur du texte garde de l'air. */
.sbg-prose--libre > :last-child:not(.sbg-sec):not(.wp-block-cover) {
	margin-bottom: var(--sbg-e8);
}

/* Tout ce qui n'est pas une section se borne a la largeur du site. Les sections
   (`.sbg-sec`, `.sbg-banniere`) portent leur propre fond et vont d'un bord a
   l'autre : elles sont exclues de la regle. */
:where(.sbg-prose--libre) > :where(p, h1, h2, h3, h4, ul, ol, figure, blockquote, table, details, .wp-block-buttons, .wp-block-columns, .wp-block-group:not(.sbg-sec)) {
	max-width: calc(var(--sbg-largeur) + 2 * var(--sbg-gouttiere));
	margin-inline: auto;
	padding-inline: var(--sbg-gouttiere);
}

.sbg-prose--libre > * + * {
	margin-top: var(--sbg-e4);
}

/* Les sections portent leur respiration en padding : elles se suivent sans
   écart, y compris après la bannière. */
.sbg-prose--libre > :is(.sbg-sec, .wp-block-cover) {
	margin-top: 0;
}

.sbg-page:not(.sbg-page--accueil) > .sbg-prose:not(.sbg-prose--libre) {
	width: 100%;
	max-width: calc(var(--sbg-largeur-etroite) + 2 * var(--sbg-gouttiere));
	margin-inline: auto;
	padding: var(--sbg-e6) var(--sbg-gouttiere) var(--sbg-e8);
}

/* ------------------------------------------------------------------
   11. Blocs de WordPress
   ------------------------------------------------------------------ */

.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbg-e6);
	align-items: flex-start;
}

.wp-block-column {
	flex: 1 1 0%;
	min-width: min(100%, 260px);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbg-e2);
}

.wp-block-buttons.is-content-justification-center {
	justify-content: center;
}

.wp-block-image {
	margin: 0;
}

.wp-block-image.is-style-sbg-arrondi img,
.wp-block-image img {
	border-radius: var(--sbg-r-carte);
}

.wp-block-group.is-style-sbg-carte {
	padding: var(--sbg-e5);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-carte);
}

.wp-block-group.is-style-sbg-encadre {
	padding: var(--sbg-e5);
	border: 2px solid var(--sbg-pine);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-feuille);
}

.wp-block-list.is-style-sbg-chevrons {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-sbg-chevrons li {
	position: relative;
	padding-inline-start: 1.4em;
}

.wp-block-list.is-style-sbg-chevrons li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.2em;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--sbg-pine);
	border-top: 2px solid var(--sbg-pine);
	transform: rotate(45deg);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--sbg-trait);
	max-width: 200px;
	margin-inline: auto;
}

.wp-block-embed__wrapper {
	position: relative;
	border-radius: var(--sbg-r-carte);
	overflow: hidden;
}

.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
	aspect-ratio: 16 / 9;
}

.wp-block-embed.wp-embed-aspect-16-9 iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.aligncenter {
	margin-inline: auto;
}

.alignwide {
	max-width: min(100%, 1320px);
	margin-inline: auto;
}

.alignfull {
	max-width: none;
}

.has-text-align-center {
	text-align: center;
}

.has-text-align-right {
	text-align: right;
}

/* ------------------------------------------------------------------
   12. Bandeau de titre, fil d'Ariane
   ------------------------------------------------------------------ */

.sbg-bandeau {
	padding-block: var(--sbg-e7);
	background: var(--sbg-brume);
	text-align: center;
}

.sbg-bandeau__titre {
	color: var(--sbg-pine);
}

.sbg-bandeau__sous {
	margin-top: var(--sbg-e2);
	color: var(--sbg-pine);
}

.sbg-fil {
	padding-block: var(--sbg-e2);
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
}

.sbg-fil a {
	text-decoration: none;
}

.sbg-fil .separator {
	margin-inline: 0.4em;
	opacity: 0.5;
}

/* ------------------------------------------------------------------
   13. Listes d'articles
   ------------------------------------------------------------------ */

.sbg-liste {
	padding-block: var(--sbg-e6) var(--sbg-e8);
}

.sbg-intro-archive {
	padding-block: var(--sbg-e5) 0;
}

.sbg-card {
	height: 100%;
}

.sbg-card__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-carte);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--sbg-transition), box-shadow var(--sbg-transition);
}

.sbg-card__lien:hover,
.sbg-card__lien:focus-visible {
	transform: translateY(-3px);
	box-shadow: 8px 10px 20px 0 rgb(0 0 0 / 0.14);
	color: inherit;
}

.sbg-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--sbg-feuille);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.sbg-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.sbg-card__lien:hover .sbg-card__img {
	transform: scale(1.04);
}

.sbg-card__media-vide {
	color: color-mix(in srgb, var(--sbg-pine) 35%, transparent);
}

/* Pastille de rubrique, posée sur la photo. */
.sbg-card__cat {
	position: absolute;
	inset-block-start: var(--sbg-e2);
	inset-inline-start: var(--sbg-e2);
	padding: 2px var(--sbg-e2);
	border-radius: var(--sbg-r-pilule);
	background: color-mix(in srgb, var(--sbg-blanc) 92%, transparent);
	color: var(--sbg-pine);
	font-size: 0.75rem;
	font-weight: 600;
	backdrop-filter: blur(4px);
}

.sbg-card__corps {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e1);
	flex: 1;
	padding: var(--sbg-e4);
}

.sbg-card__date {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var(--sbg-encre-doux);
}

.sbg-card__titre {
	font-size: 1.15rem;
	font-weight: 700;
	text-transform: none;
	line-height: 1.3;
	color: var(--sbg-pine);
	/* Trois lignes au plus : au-delà, les cartes d'une même rangée se
	   décalent et la grille perd son alignement. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sbg-card__extrait {
	flex: 1;
	font-size: var(--sbg-t-petit);
	line-height: 1.55;
	color: var(--sbg-encre-doux);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sbg-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--sbg-e1);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sbg-berry);
}

.sbg-vide {
	padding-block: var(--sbg-e6);
	text-align: center;
	color: var(--sbg-encre-doux);
}

.sbg-pagination {
	margin-top: var(--sbg-e6);
}

.sbg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sbg-e1);
}

.sbg-pagination :is(a, span).page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--sbg-e1);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce);
	color: var(--sbg-pine);
	text-decoration: none;
}

.sbg-pagination .page-numbers.current {
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
}

/* ------------------------------------------------------------------
   14. Article
   ------------------------------------------------------------------ */

.sbg-article__entete {
	padding-block: var(--sbg-e6) var(--sbg-e4);
	text-align: center;
}

.sbg-article__entete .sbg-shell {
	max-width: calc(820px + 2 * var(--sbg-gouttiere));
}

.sbg-article__titre {
	color: var(--sbg-pine);
}

.sbg-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sbg-e1);
	margin-top: var(--sbg-e2);
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
}

.sbg-article__media {
	margin: 0 0 var(--sbg-e5);
}

.sbg-article__img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--sbg-r-carte);
}

.sbg-article .sbg-prose {
	padding-bottom: var(--sbg-e6);
}

.sbg-partage {
	display: flex;
	align-items: center;
	gap: var(--sbg-e2);
	padding-block: var(--sbg-e4);
	border-top: 1px solid var(--sbg-trait);
}

.sbg-partage__label {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
}

.sbg-partage__lien {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	border: 0;
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-feuille);
	color: var(--sbg-pine);
	font-size: var(--sbg-t-petit);
	text-decoration: none;
	transition: background var(--sbg-transition);
}

.sbg-partage__lien:hover {
	background: var(--sbg-brume);
}

.sbg-partage__lien[data-sbg-copier] {
	padding-inline: var(--sbg-e3);
}

.sbg-lire-aussi {
	padding-block: var(--sbg-e6) var(--sbg-e8);
	background: var(--sbg-feuille);
}

.sbg-lire-aussi__titre {
	margin-bottom: var(--sbg-e4);
	font-size: var(--sbg-t-h3);
}

.sbg-commentaires {
	padding-block: var(--sbg-e6);
}

.sbg-commentaires__titre {
	margin-bottom: var(--sbg-e4);
	font-size: var(--sbg-t-h3);
}

.sbg-commentaires__liste {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e4);
}

.sbg-commentaires__liste .children {
	list-style: none;
	margin-top: var(--sbg-e4);
	padding-inline-start: var(--sbg-e5);
}

.sbg-commentaires :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: var(--sbg-e2) var(--sbg-e3);
	border: 2px solid var(--sbg-trait);
	border-radius: var(--sbg-r-champ);
	background: var(--sbg-blanc);
}

.sbg-commentaires :is(input, textarea):focus {
	border-color: var(--sbg-pine);
	outline: none;
}

/* ------------------------------------------------------------------
   15. Recherche et 404
   ------------------------------------------------------------------ */

.sbg-form-recherche {
	display: flex;
	gap: var(--sbg-e1);
	max-width: 420px;
	margin-inline: auto;
}

.sbg-form-recherche__champ {
	flex: 1;
	padding: 0.6rem var(--sbg-e3);
	border: 2px solid var(--sbg-trait);
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-blanc);
}

.sbg-form-recherche__champ:focus {
	border-color: var(--sbg-pine);
	outline: none;
}

.sbg-form-recherche__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
}

.sbg-recherche-barre {
	margin-bottom: var(--sbg-e6);
}

.sbg-404 {
	padding-block: var(--sbg-e8);
	text-align: center;
}

.sbg-404__code {
	display: flex;
	justify-content: center;
	color: color-mix(in srgb, var(--sbg-pine) 30%, transparent);
}

.sbg-404__titre {
	margin-top: var(--sbg-e4);
}

.sbg-404__texte {
	margin-top: var(--sbg-e2);
	color: var(--sbg-encre-doux);
}

.sbg-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sbg-e2);
	margin-top: var(--sbg-e5);
}

.sbg-404__recherche {
	margin-top: var(--sbg-e6);
}

/* ------------------------------------------------------------------
   16. Pied de page
   ------------------------------------------------------------------ */

.sbg-pied {
	border-top: 4px solid var(--sbg-pine);
	background: var(--sbg-feuille);
	color: var(--sbg-encre);
}

.sbg-pied__grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sbg-e6);
	padding-block: var(--sbg-e6);
}

.sbg-pied__marque {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e2);
	align-items: center;
	text-align: center;
	font-size: var(--sbg-t-petit);
}

.sbg-pied__logo-img {
	width: 150px;
	height: auto;
}

.sbg-pied__nom {
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
}

.sbg-pied__titre {
	margin-bottom: var(--sbg-e3);
	font-size: var(--sbg-t-h4);
	color: var(--sbg-pine);
}

.sbg-menu--pied {
	flex-direction: column;
	gap: var(--sbg-e1);
}

.sbg-menu--pied a {
	position: relative;
	padding-inline-start: 1.2em;
	color: var(--sbg-pine);
	font-size: 0.95rem;
}

.sbg-menu--pied a::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1em;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentcolor;
	border-top: 2px solid currentcolor;
	transform: rotate(45deg);
}

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

.sbg-pied__widgets {
	width: 100%;
	margin-top: var(--sbg-e3);
}

.sbg-pied__bas {
	padding-block: var(--sbg-e2);
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	font-size: var(--sbg-t-petit);
	text-align: center;
}

.sbg-pied__bas a {
	color: var(--sbg-blanc);
}

/* ------------------------------------------------------------------
   17. Retour en haut
   ------------------------------------------------------------------ */

.sbg-haut {
	position: fixed;
	inset-block-end: var(--sbg-e4);
	inset-inline-end: var(--sbg-e4);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-bouton);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--sbg-transition), transform var(--sbg-transition);
}

.sbg-haut[hidden] {
	display: none;
}

.sbg-haut.est-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------------
   18. Adaptations
   ------------------------------------------------------------------ */

@media (min-width: 768px) {

	.sbg-duo {
		grid-template-columns: 1fr 1fr;
	}

	.sbg-duo--trois {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.sbg-duo--texte-large {
		grid-template-columns: 3fr 2fr;
	}

	.sbg-duo--media-large {
		grid-template-columns: 2fr 3fr;
	}

	.sbg-pied__grille {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}

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

@media (min-width: 1025px) {

	.sbg-duo--contact {
		grid-template-columns: 1fr 1.6fr 1.4fr;
	}
}

@media (max-width: 900px) {

	.sbg-burger {
		display: inline-flex;
	}

	.sbg-barre-haute {
		display: none;
	}

	.sbg-nav {
		position: fixed;
		inset: 0;
		z-index: 50;
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--sbg-e5);
		padding: 6rem var(--sbg-gouttiere) var(--sbg-e6);
		background: var(--sbg-blanc);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s ease, visibility 0.3s ease;
	}

	.sbg-nav.est-ouvert {
		transform: translateX(0);
		visibility: visible;
	}

	.sbg-menu--principal {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sbg-menu--principal > li > a {
		display: block;
		padding-block: var(--sbg-e3);
		border-bottom: 1px solid var(--sbg-trait);
		font-size: 1.2rem;
	}

	.sbg-menu--principal > li > a::after {
		display: none;
	}

	.sbg-menu--principal .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding-inline-start: var(--sbg-e4);
	}

	.sbg-nav__appoint {
		display: block;
	}

	.sbg-menu--appoint {
		flex-direction: column;
		gap: var(--sbg-e2);
	}

	.sbg-menu--appoint a {
		color: var(--sbg-berry);
		font-weight: 500;
	}

	body.menu-ouvert {
		overflow: hidden;
	}
}

@media (max-width: 900px) {

	.sbg-portes {
		width: 100%;
	}
}

@media (max-width: 767px) {

	.sbg-banniere,
	.sbg-banniere.wp-block-cover {
		padding-inline: var(--sbg-e4);
	}

	.sbg-banniere__titre {
		margin-block: var(--sbg-e6);
		padding-inline: 0;
	}

	.sbg-sec--detachee {
		margin-block: var(--sbg-e6);
	}

	.sbg-duo {
		gap: var(--sbg-e5);
	}
}

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

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {

	.sbg-entete,
	.sbg-pied,
	.sbg-haut,
	.sbg-partage,
	.sbg-lire-aussi,
	.sbg-fil {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}
}

/* ------------------------------------------------------------------
   19. Formulaires du thème
   ------------------------------------------------------------------ */

.sbg-form {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e3);
	max-width: 620px;
}

.sbg-form__titre {
	font-size: var(--sbg-t-h3);
}

.sbg-form__champ {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sbg-form__label {
	font-size: var(--sbg-t-petit);
	font-weight: 600;
	color: var(--sbg-pine);
}

.sbg-form__requis {
	color: var(--sbg-berry);
}

.sbg-form__saisie {
	width: 100%;
	padding: 0.6rem var(--sbg-e3);
	border: 2px solid var(--sbg-trait);
	border-radius: var(--sbg-r-champ);
	background: var(--sbg-blanc);
	color: var(--sbg-encre);
	transition: border-color var(--sbg-transition);
}

.sbg-form__saisie:focus {
	border-color: var(--sbg-pine);
	outline: none;
}

.sbg-form__champ.est-en-erreur .sbg-form__saisie {
	border-color: var(--sbg-berry);
}

.sbg-form__erreur {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-berry-fonce);
}

.sbg-form__acceptation {
	display: flex;
	align-items: flex-start;
	gap: var(--sbg-e1);
	font-size: var(--sbg-t-petit);
	line-height: 1.4;
	cursor: pointer;
}

.sbg-form__acceptation input {
	margin-top: 0.2em;
	accent-color: var(--sbg-pine);
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

/* Le champ piège : hors de l'écran, et retiré de l'arbre d'accessibilité par
   `aria-hidden` sur son conteneur. `display: none` ne convient pas — certains
   robots ignorent précisément les champs cachés ainsi. */
.sbg-form__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sbg-form__envoyer {
	align-self: flex-start;
	margin-top: var(--sbg-e1);
}

.sbg-form__message {
	padding: var(--sbg-e3) var(--sbg-e4);
	border-inline-start: 4px solid var(--sbg-pine);
	border-radius: var(--sbg-r-champ);
	background: var(--sbg-feuille);
}

.sbg-form__message--ko {
	border-inline-start-color: var(--sbg-berry);
	background: var(--sbg-blush);
}

/* ------------------------------------------------------------------
   20. Détails
   ------------------------------------------------------------------ */

.sbg-pages-liees {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sbg-e1);
	margin-top: var(--sbg-e5);
	font-weight: 600;
}

.sbg-pages-liees > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	border-radius: var(--sbg-r-pilule);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce);
	text-decoration: none;
}

/* Le badge d'avis Google, posé par une extension dans le pied de page. */
.sbg-pied__widget {
	width: 100%;
}

/* Une iframe posée en contenu libre (agenda, carte) : elle prend la largeur et
   garde un cadre cohérent avec le reste. */
.sbg-prose > .wp-block-html iframe,
.sbg-prose--libre > .wp-block-html iframe {
	width: 100%;
	border-radius: var(--sbg-r-carte);
}

/* ------------------------------------------------------------------
   21. Le strict nécessaire des blocs du noyau
   ------------------------------------------------------------------
   WordPress pose ses propres feuilles de blocs : 40 Ko en ligne dans le HTML
   de chaque page, plus 16 Ko de « styles globaux » dérivés de theme.json.
   Le thème habille lui-même tous les blocs qu'il emploie ; ces feuilles sont
   donc retirées (voir inc/blocks.php) et l'on reprend ici les seules règles
   qui font vraiment quelque chose : les mécaniques de mise en page, pas les
   décorations.

   Ce qui est repris vient de WordPress 7.1. En changer une valeur ici, c'est
   diverger du noyau — à faire sciemment.
   ------------------------------------------------------------------ */

/* Dispositions. Elles sont posées par WordPress sur les blocs « Groupe »,
   « Colonnes » et « Boutons » selon leur réglage de mise en page. */
:where(.is-layout-flow) > *,
:where(.is-layout-constrained) > * {
	margin-block-start: var(--sbg-e4);
	margin-block-end: 0;
}

:where(.is-layout-flow > :first-child, .is-layout-constrained > :first-child) {
	margin-block-start: 0;
}

:where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--sbg-largeur);
	margin-inline: auto;
}

:where(.is-layout-constrained) > .alignwide {
	max-width: min(100%, 1320px);
}

/* Deux rattrapages de cascade. Les règles ci-dessus sont écrites en `:where()`,
   donc à spécificité nulle : c'est le choix de WordPress, pour qu'un thème
   puisse les reprendre sans lutter. Ici deux règles du thème lui-même les
   battent sans l'avoir voulu.

   1. Le reset remet `margin-block: 0` sur p, h1–h6, figure et blockquote
      (0,0,1) : le `margin-block-start` du flux ne s'appliquait donc plus à eux.
      Deux paragraphes qui se suivent dans une section se touchaient. On le
      rétablit à une spécificité qui tienne (0,1,1), en ne visant QUE les
      éléments de texte : les grilles et les groupes gardent leurs propres
      marges, qui sont souvent plus grandes. */
:is(.is-layout-flow, .is-layout-constrained) > * + :is(p, h1, h2, h3, h4, h5, h6, figure, blockquote, ul, ol, dl, table, pre) {
	margin-block-start: var(--sbg-e4);
}

/* 2. À l'inverse, une grille écrite en blocs porte elle aussi une disposition :
      ses cartes recevaient le `margin-block-start` du flux, toutes sauf la
      première — la première carte de chaque rangée se retrouvait 20 px plus
      haut que ses voisines. Une grille pose ses écarts par son `gap`, jamais
      par les marges de ses enfants. */
.sbg-atouts > *,
.sbg-grille > *,
.sbg-modes > *,
.sbg-duo > *,
.sbg-etapes-num > *,
.sbg-faq > * {
	margin-block-start: 0;
}

:where(.is-layout-flex) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sbg-e2);
}

:where(.is-layout-flex) > * {
	margin: 0;
}

:where(.is-layout-grid) {
	display: grid;
	gap: var(--sbg-e4);
}

.is-vertical {
	flex-direction: column;
}

.is-nowrap {
	flex-wrap: nowrap;
}

.is-content-justification-center {
	justify-content: center;
}

.is-content-justification-right {
	justify-content: flex-end;
}

.is-content-justification-space-between {
	justify-content: space-between;
}

/* Bloc « Couverture ». Sans ces règles, l'image de fond et le voile se
   posent dans le flux au lieu de se superposer. */
:where(.wp-block-cover) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 430px;
	padding: 1em;
	overflow: hidden;
	background-position: center;
	background-size: cover;
}

.wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Opacité du voile. WordPress écrit `has-background-dim` seul pour 50 %, et
   `has-background-dim-N` pour les autres valeurs, par pas de dix. */
.wp-block-cover__background.has-background-dim {
	opacity: 0.5;
}

.wp-block-cover__background.has-background-dim-0 { opacity: 0; }
.wp-block-cover__background.has-background-dim-10 { opacity: 0.1; }
.wp-block-cover__background.has-background-dim-20 { opacity: 0.2; }
.wp-block-cover__background.has-background-dim-30 { opacity: 0.3; }
.wp-block-cover__background.has-background-dim-40 { opacity: 0.4; }
.wp-block-cover__background.has-background-dim-50 { opacity: 0.5; }
.wp-block-cover__background.has-background-dim-60 { opacity: 0.6; }
.wp-block-cover__background.has-background-dim-70 { opacity: 0.7; }
.wp-block-cover__background.has-background-dim-80 { opacity: 0.8; }
.wp-block-cover__background.has-background-dim-90 { opacity: 0.9; }
.wp-block-cover__background.has-background-dim-100 { opacity: 1; }

.wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: cover;
}

.wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	color: inherit;
}

/* Bloc « Image ». */
:where(.wp-block-image) img {
	box-sizing: border-box;
	height: auto;
	max-width: 100%;
	vertical-align: bottom;
}

.wp-block-image :where(figcaption) {
	margin-top: var(--sbg-e1);
	margin-bottom: 0;
}

.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
	width: 100%;
}

/* Bloc « Détails ». */
.wp-block-details {
	box-sizing: border-box;
}

.wp-block-details summary {
	cursor: pointer;
}

/* Bloc « Bouton ». Le reste de l'habillage est au chapitre 7. */
.wp-block-button__link {
	box-sizing: border-box;
	word-break: break-word;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--sbg-pine);
}

/* Bloc « Liste ». */
.wp-block-list {
	box-sizing: border-box;
}

/* Bloc « Groupe » et « Colonnes ». */
.wp-block-group,
.wp-block-column {
	box-sizing: border-box;
}

/* Couleurs de la palette employées dans le contenu. Seules celles-ci le sont ;
   les ajouter toutes reviendrait à réintroduire les styles globaux. */
.has-blanc-color {
	color: var(--sbg-blanc);
}

.has-berry-fonce-color {
	color: var(--sbg-berry-fonce);
}

.has-pine-color {
	color: var(--sbg-pine);
}

.has-berry-color {
	color: var(--sbg-berry);
}

.has-brume-background-color {
	background-color: var(--sbg-brume);
}

.has-feuille-background-color {
	background-color: var(--sbg-feuille);
}

.has-blush-background-color {
	background-color: var(--sbg-blush);
}

.has-blanc-background-color {
	background-color: var(--sbg-blanc);
}

.has-pine-background-color {
	background-color: var(--sbg-pine);
}

/* Tailles de la palette typographique. */
.has-petit-font-size { font-size: var(--sbg-t-petit); }
.has-normal-font-size { font-size: var(--sbg-t-corps); }
.has-moyen-font-size { font-size: var(--sbg-t-h4); }
.has-grand-font-size { font-size: var(--sbg-t-h3); }
.has-titre-font-size { font-size: var(--sbg-t-h2); }
.has-banniere-font-size { font-size: var(--sbg-t-h1); }

/* Image d'en-tête d'une page secondaire : la photo large que le gabarit du
   constructeur posait sous le titre, hauteur fixe et coins arrondis. */
.sbg-image-entete img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: var(--sbg-r-carte);
}

@media (max-width: 1024px) {

	.sbg-image-entete img {
		height: 333px;
	}
}

@media (max-width: 767px) {

	.sbg-image-entete img {
		height: 204px;
	}
}

/* ------------------------------------------------------------------
   22. Blocs venus des extensions
   ------------------------------------------------------------------
   Le sommaire de Rank Math et l'encadré « L'essentiel » de growth-as sont
   posés dans le contenu de la plupart des articles. Ils arrivaient jusqu'ici
   avec l'habillage par défaut de leur extension ; on les remet dans le dessin
   du site, sans toucher à leur balisage.
   ------------------------------------------------------------------ */

.sbg-prose .wp-block-rank-math-toc-block {
	padding: var(--sbg-e4) var(--sbg-e5);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-feuille);
}

.sbg-prose .wp-block-rank-math-toc-block h2,
.sbg-prose .wp-block-rank-math-toc-block h3 {
	margin: 0 0 var(--sbg-e2);
	font-size: var(--sbg-t-faq);
}

.sbg-prose .rank-math-list {
	list-style: none;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sbg-prose .rank-math-list-item {
	position: relative;
	padding-inline-start: 1.2em;
	margin: 0;
	font-size: 0.95rem;
}

.sbg-prose .rank-math-list-item::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.1em;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-right: 2px solid var(--sbg-pine);
	border-top: 2px solid var(--sbg-pine);
	transform: rotate(45deg);
}

.sbg-prose .rank-math-list-item a {
	text-decoration: none;
}

.sbg-prose .rank-math-list-item a:hover {
	text-decoration: underline;
}

/* L'encadré « L'essentiel » en tête d'article. */
.sbg-prose .gwas-essentiel {
	padding: var(--sbg-e4) var(--sbg-e5);
	border: 0;
	border-inline-start: 4px solid var(--sbg-pine);
	border-radius: 0 var(--sbg-r-carte) var(--sbg-r-carte) 0;
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce);
}

.sbg-prose .gwas-essentiel__title {
	margin-bottom: var(--sbg-e2);
	font-size: var(--sbg-t-faq);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
}

.sbg-prose .gwas-essentiel__list {
	list-style: none;
	padding-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e1);
}

.sbg-prose .gwas-essentiel__item {
	display: flex;
	gap: var(--sbg-e1);
	margin: 0;
	font-size: 0.95rem;
}

.sbg-prose .gwas-essentiel__check {
	flex: none;
	color: var(--sbg-pine);
}

/* ------------------------------------------------------------------
   23. L'article
   ------------------------------------------------------------------
   Un article de fond se lit sur plusieurs minutes. Les capitales du kit, qui
   font l'affaire sur un titre de section de trois mots, deviennent illisibles
   sur « Comment transformer un dessin de Noël en carte de vœux ou étiquette
   cadeau ? ». Dans l'article, et seulement là, les titres reviennent en bas de
   casse.
   ------------------------------------------------------------------ */

.sbg-article .sbg-prose :is(h2, h3, h4) {
	text-transform: none;
	font-weight: 800;
	line-height: 1.25;
	text-wrap: balance;
}

.sbg-article .sbg-prose h2 {
	margin-top: var(--sbg-e7);
	font-size: 1.7rem;
}

.sbg-article .sbg-prose h3 {
	margin-top: var(--sbg-e5);
	font-size: 1.25rem;
	color: var(--sbg-encre);
}

.sbg-article .sbg-prose h4 {
	margin-top: var(--sbg-e4);
	font-size: 1.1rem;
	color: var(--sbg-encre);
}

.sbg-article .sbg-prose > :first-child {
	margin-top: 0;
}

.sbg-article__titre {
	text-transform: none;
	font-weight: 800;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
	line-height: 1.15;
	text-wrap: balance;
}

/* Le sommaire de l'article : replié sur lui-même, il n'écrase plus l'entrée
   en matière. */
.sbg-article .wp-block-rank-math-toc-block {
	margin-block: var(--sbg-e5);
}

/* La FAQ de fin d'article. Elle répète des questions déjà traitées plus haut :
   elle est là pour les moteurs, elle doit rester discrète pour le lecteur. */
.sbg-article .sbg-prose .rank-math-block {
	margin-top: var(--sbg-e4);
	padding: var(--sbg-e4) var(--sbg-e5);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-feuille);
	font-size: 0.95rem;
}

.sbg-article .sbg-prose .rank-math-block .rank-math-list-item {
	padding-inline-start: 0;
	margin-bottom: var(--sbg-e3);
}

.sbg-article .sbg-prose .rank-math-block .rank-math-list-item::before {
	content: none;
}

.sbg-article .sbg-prose .rank-math-block :is(h3, .rank-math-question) {
	margin-top: 0;
	margin-bottom: 4px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--sbg-pine);
}

.sbg-article .sbg-prose .rank-math-block .rank-math-answer p {
	margin: 0;
	color: var(--sbg-encre-doux);
}

/* L'encadré « L'essentiel » arrive avec ses couleurs en style en ligne :
   lavande et indigo, qui n'appartiennent pas au site. Seul `!important` passe
   devant un attribut `style`. */
.sbg-prose .gwas-essentiel {
	background: var(--sbg-blanc) !important;
	border-left-color: var(--sbg-pine) !important;
	border-radius: var(--sbg-r-carte) !important;
	box-shadow: var(--sbg-ombre-douce);
}

.sbg-prose .gwas-essentiel__title {
	color: var(--sbg-pine);
}

/* Une carte posée sous des coordonnées : discrète, elle situe sans prendre
   toute la colonne. */
.sbg-carte-lieu--petite {
	margin-top: var(--sbg-e4);
	aspect-ratio: 3 / 2;
	max-width: 420px;
}

/* ------------------------------------------------------------------
   24. Barème de commission et marches à suivre
   ------------------------------------------------------------------ */

.sbg-bareme {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--sbg-e2);
}

.sbg-bareme td {
	padding: var(--sbg-e2) 0;
	border-bottom: 1px solid var(--sbg-trait);
}

.sbg-bareme td:last-child {
	text-align: end;
	white-space: nowrap;
	color: var(--sbg-pine);
}

.sbg-bareme tr:last-child td {
	border-bottom: 0;
}

.sbg-note {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
}

.sbg-etapes--services {
	gap: var(--sbg-e1);
}

.sbg-etapes--services li {
	display: list-item;
	list-style: none;
	padding-inline-start: 0;
}

/* Marche à suivre numérotée : le numéro dans une pastille verte. */
.sbg-etapes-num {
	list-style: none;
	counter-reset: sbg-etape;
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e4);
	max-width: 780px;
	margin-inline: auto;
	margin-top: var(--sbg-e5);
}

.sbg-etapes-num > li {
	counter-increment: sbg-etape;
	position: relative;
	padding-inline-start: 3.2rem;
	line-height: 1.6;
}

.sbg-etapes-num > li::before {
	content: counter(sbg-etape);
	position: absolute;
	inset-inline-start: 0;
	top: -2px;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	font-weight: 700;
}

.sbg-etapes-num strong {
	color: var(--sbg-pine);
}

/* Carte de tarifs : la grille de prix, dans un cadre blanc posé à côté des
   modes de récupération. */
.sbg-tarif-carte {
	display: flex;
	flex-direction: column;
	gap: var(--sbg-e1);
	padding: var(--sbg-e5);
	border-radius: var(--sbg-r-carte);
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-carte);
}

.sbg-tarif-carte__sur {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-berry);
}

.sbg-tarif-carte__titre {
	font-size: var(--sbg-t-h3);
	font-weight: 400;
	text-transform: none;
	line-height: 1.3;
	color: var(--sbg-pine);
}

.sbg-bareme--prix td:first-child {
	color: var(--sbg-encre-doux);
}

.sbg-bareme--prix td:last-child {
	font-size: 1.05rem;
}

.sbg-tarif-carte__note {
	font-size: var(--sbg-t-petit);
	color: var(--sbg-encre-doux);
}

.sbg-tarif-carte .sbg-bouton {
	align-self: flex-start;
	margin-top: var(--sbg-e2);
}

/* Le tableau comparatif des trois façons d'acheter. */
.sbg-tableau-prix {
	margin-top: var(--sbg-e5);
	overflow-x: auto;
}

.sbg-tableau-prix table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: var(--sbg-blanc);
	border-radius: var(--sbg-r-carte);
	overflow: hidden;
	box-shadow: var(--sbg-ombre-douce);
}

.sbg-tableau-prix :is(th, td) {
	padding: var(--sbg-e2) var(--sbg-e3);
	border: 0;
	border-bottom: 1px solid var(--sbg-trait);
}

.sbg-tableau-prix th {
	background: var(--sbg-feuille);
	color: var(--sbg-pine);
	font-weight: 700;
	line-height: 1.3;
	vertical-align: bottom;
}

.sbg-tableau-prix tr:last-child :is(td, th) {
	border-bottom: 0;
	background: var(--sbg-feuille);
}

@media (min-width: 768px) {

	.sbg-etapes-num--trois {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sbg-e5);
		max-width: none;
	}
}

/* Bouton de second rang posé sur une photo : le contour vert y disparaît, il
   passe donc en contour clair. */
.sbg-bouton--clair,
.is-style-sbg-clair .wp-block-button__link {
	background: transparent;
	border-color: var(--sbg-blanc);
	color: var(--sbg-blanc);
	box-shadow: none;
}

.sbg-bouton--clair:hover,
.sbg-bouton--clair:focus-visible,
.is-style-sbg-clair .wp-block-button__link:hover,
.is-style-sbg-clair .wp-block-button__link:focus-visible {
	background: var(--sbg-blanc);
	color: var(--sbg-pine);
}



/* ------------------------------------------------------------------
   22. Le panneau de panier
   ------------------------------------------------------------------
   L'icône du panier menait à /panier/, que le plugin renvoie aussitôt vers le
   tunnel : quelqu'un qui voulait seulement vérifier son panier avant d'ajouter
   un second sapin se retrouvait dans le paiement. Le panneau répond sur place.

   Étages : bandes fixes 40, menu du téléphone 50, panneau 60, lien d'évitement
   100. Le panneau passe donc au-dessus de tout sauf de l'évitement.
   ------------------------------------------------------------------ */

.sbg-panier-voile {
	position: fixed;
	inset: 0;
	z-index: 59;
	background: rgb(4 44 42 / 0.42);
	animation: sbg-panier-fondu 0.25s ease;
}

@keyframes sbg-panier-fondu {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sbg-panier {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 60;
	width: min(24rem, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--sbg-blanc);
	box-shadow: -8px 0 32px rgb(4 104 101 / 0.16);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.sbg-panier.est-ouvert {
	transform: translateX(0);
}

body.sbg-panier-ouvert {
	overflow: hidden;
}

.sbg-panier__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sbg-e3);
	padding: var(--sbg-e4) var(--sbg-e5);
	border-bottom: 1px solid var(--sbg-ligne);
}

.sbg-panier__titre {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
}

.sbg-panier__fermer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sbg-pine);
	cursor: pointer;
	transition: background 0.16s ease;
}

.sbg-panier__fermer:hover {
	background: var(--sbg-feuille);
}

.sbg-panier__lignes {
	flex: 1;
	overflow-y: auto;
	list-style: none;
	margin: 0;
	padding: var(--sbg-e3) var(--sbg-e5);
}

.sbg-panier__ligne {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--sbg-e3);
	padding-block: var(--sbg-e3);
	border-bottom: 1px solid var(--sbg-ligne);
}

.sbg-panier__ligne:last-child {
	border-bottom: 0;
}

.sbg-panier__vignette {
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: 8px;
}

.sbg-panier__nom {
	display: block;
	font-size: 0.94rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sbg-encre);
	text-decoration: none;
}

.sbg-panier__nom:hover {
	color: var(--sbg-pine);
}

.sbg-panier__quantite {
	margin: 2px 0 0;
	font-size: 0.8rem;
	color: var(--sbg-gris);
}

.sbg-panier__prix {
	margin: 0;
	font-size: 0.94rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--sbg-encre);
}

.sbg-panier__retirer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	color: var(--sbg-gris);
	transition: background 0.16s ease, color 0.16s ease;
}

.sbg-panier__retirer:hover {
	background: var(--sbg-blush);
	color: var(--sbg-berry);
}

.sbg-panier__pied {
	padding: var(--sbg-e4) var(--sbg-e5) var(--sbg-e5);
	border-top: 1px solid var(--sbg-ligne);
	background: var(--sbg-fond);
}

.sbg-panier__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sbg-e3);
	margin: 0 0 var(--sbg-e2);
}

.sbg-panier__total span {
	font-size: 0.88rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--sbg-pine);
}

.sbg-panier__total strong {
	font-size: 1.35rem;
	font-weight: 900;
	color: var(--sbg-encre);
}

.sbg-panier__note {
	margin: 0 0 var(--sbg-e3);
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--sbg-gris);
}

.sbg-panier__cta {
	display: block;
	text-align: center;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--sbg-blanc);
	background: var(--sbg-berry);
	border-radius: 999px;
	padding: 0.85rem 1.5rem;
	text-decoration: none;
	transition: background 0.16s ease;
}

.sbg-panier__cta:hover,
.sbg-panier__cta:focus-visible {
	color: var(--sbg-blanc);
	background: var(--sbg-berry-vif);
}

.sbg-panier__continuer {
	display: block;
	width: 100%;
	margin-top: var(--sbg-e2);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--sbg-gris);
	cursor: pointer;
	padding: 0.6rem;
	border-radius: 999px;
	transition: color 0.16s ease;
}

.sbg-panier__continuer:hover {
	color: var(--sbg-pine);
}

.sbg-panier__vide {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sbg-e2);
	padding: var(--sbg-e6) var(--sbg-e5);
	text-align: center;
}

.sbg-panier__vide .sbg-ico {
	color: var(--sbg-pine-100);
	margin-bottom: var(--sbg-e2);
}

.sbg-panier__vide p {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--sbg-encre);
}

.sbg-panier__vide-sous {
	font-size: 0.88rem !important;
	font-weight: 400 !important;
	line-height: 1.55;
	color: var(--sbg-gris) !important;
	max-width: 30ch;
}

.sbg-panier__vide .sbg-panier__cta {
	margin-top: var(--sbg-e3);
	background: var(--sbg-pine);
	padding-inline: 2rem;
}

.sbg-panier__vide .sbg-panier__cta:hover {
	background: var(--sbg-pine-fonce);
}

@media (prefers-reduced-motion: reduce) {
	.sbg-panier,
	.sbg-panier-voile {
		transition: none;
		animation: none;
	}
}

/* Le signal d'ajout au panier.
   Après un ajout, la page revient sur elle-même : sans un signal, le client ne
   sait pas où est parti son sapin, ni où est la suite. L'icône bondit une fois,
   puis le panneau s'ouvre. */

@keyframes sbg-panier-bond {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.28) translateY(-4px); }
	55%  { transform: scale(0.94); }
	100% { transform: scale(1); }
}

.sbg-action--panier.vient-de-bouger {
	animation: sbg-panier-bond 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sbg-action--panier.vient-de-bouger .sbg-action__pastille {
	animation: sbg-panier-bond 0.55s 0.08s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
	.sbg-action--panier.vient-de-bouger,
	.sbg-action--panier.vient-de-bouger .sbg-action__pastille {
		animation: none;
	}
}

/* ------------------------------------------------------------------
   23. Le widget d'avis flottant et les barres fixes
   ------------------------------------------------------------------
   L'extension d'avis pose son widget en `position: fixed`, en bas à gauche, à
   un z-index de 2 147 483 644 — la valeur maximale d'un entier signé, moins
   trois. Il passait donc par-dessus la barre d'achat de la boutique et par-
   dessus le panneau de panier.

   Deux gestes plutôt qu'un : les barres passent au-dessus de lui, ET le widget
   remonte de la hauteur d'une barre quand il y en a une. Sans le second, la
   barre le recouvrirait — un avis caché ne sert à rien non plus.
   ------------------------------------------------------------------ */

:root {
	--sbg-z-widget-avis: 2147483644;
}

.sbg-btq-barre,
.sbg-fiche-barre {
	z-index: calc(var(--sbg-z-widget-avis) + 1);
}

.sbg-panier-voile {
	z-index: calc(var(--sbg-z-widget-avis) + 2);
}

.sbg-panier {
	z-index: calc(var(--sbg-z-widget-avis) + 3);
}

/* Le widget remonte au-dessus de la barre. `!important` parce que l'extension
   pose son `bottom` dans sa propre feuille, chargée après celle du thème. */
body.sbg--boutique .ti-widget,
body.sbg--fiche .ti-widget {
	bottom: 92px !important;
}

@media (max-width: 47.99em) {
	body.sbg--boutique .ti-widget,
	body.sbg--fiche .ti-widget {
		bottom: 128px !important;
	}
}

/* Panneau de panier ouvert : le widget s'efface, il n'a rien à dire là. */
body.sbg-panier-ouvert .ti-widget {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Le fil d'Ariane reporté sous une page à bannière : discret, il ferme la page
   au lieu de s'interposer entre l'en-tête et la photo. */
.sbg-page + .sbg-fil,
.sbg-fil:last-child {
	border-top: 1px solid var(--sbg-trait);
	padding-block: var(--sbg-e3);
	font-size: var(--sbg-t-petit);
	opacity: 0.75;
}