@charset "UTF-8";
/*
 * La fiche produit d'un sapin.
 *
 * Reprise de la maquette « Fiche produit.dc.html ». Les valeurs — rayons,
 * ombres, graisses, espacements — sont celles de la maquette ; les couleurs
 * passent par les jetons du thème, qui portent déjà les mêmes teintes.
 *
 * Cette feuille n'est servie que sur une fiche configurable (voir
 * inc/assets.php) : une page de contenu ne la charge pas.
 */

.sbg-fiche {
	--fiche-largeur: 1120px;
	max-width: var(--fiche-largeur);
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   Les deux colonnes
   ------------------------------------------------------------------ */

.sbg-fiche__haut {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: flex-start;
}

.sbg-fiche__media {
	flex: 1 1 420px;
	min-width: min(100%, 300px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbg-fiche__resume {
	flex: 1 1 440px;
	min-width: min(100%, 320px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ------------------------------------------------------------------
   Galerie
   ------------------------------------------------------------------ */

.sbg-fiche__galerie {
	position: relative;
	height: clamp(320px, 40vw, 460px);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: var(--sbg-ombre-fiche);
	background: var(--sbg-feuille);
}

.sbg-fiche__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sbg-fiche__photo.est-active {
	opacity: 1;
}

.sbg-fiche__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.sbg-fiche__etiquettes {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	z-index: 2;
}

.sbg-fiche__etiquette {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sbg-pine);
	background: rgb(255 255 255 / 0.94);
	border-radius: 999px;
	padding: 6px 13px;
}

.sbg-fiche__etiquette--rouge {
	color: var(--sbg-blanc);
	background: var(--sbg-berry);
}

.sbg-fiche__vignettes {
	display: flex;
	gap: 10px;
}

.sbg-fiche__vignette {
	flex: 1;
	height: 74px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 10px;
	overflow: hidden;
	background: var(--sbg-feuille);
	cursor: pointer;
	transition: border-color 0.16s;
}

.sbg-fiche__vignette.est-active {
	border-color: var(--sbg-pine);
}

.sbg-fiche__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/* ------------------------------------------------------------------
   Ce que vous recevez
   ------------------------------------------------------------------ */

.sbg-fiche__inclus {
	margin-top: 4px;
	padding: 18px 20px;
	border: 1.5px solid var(--sbg-pine-100);
	border-radius: 14px;
	background: var(--sbg-blanc);
}

.sbg-fiche__inclus-titre {
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
}

.sbg-fiche__inclus ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sbg-fiche__inclus li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.45;
}

.sbg-fiche__inclus .sbg-ico {
	margin-top: 2px;
	color: var(--sbg-pine);
	stroke-width: 2.6;
}

/* ------------------------------------------------------------------
   Résumé
   ------------------------------------------------------------------ */

.sbg-fiche__note {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--sbg-gris);
}

.sbg-fiche__etoiles {
	font-size: 15px;
	letter-spacing: 0.07em;
	color: var(--sbg-berry);
}

.sbg-fiche__titre {
	margin-bottom: 8px;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.05;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
	text-wrap: balance;
}

.sbg-fiche__accroche p {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--sbg-gris);
	max-width: 56ch;
	text-wrap: pretty;
}

.sbg-fiche__accroche p + p {
	margin-top: 0.6em;
}

/* ------------------------------------------------------------------
   Le configurateur
   ------------------------------------------------------------------ */

.sbg-fiche__config {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 22px clamp(18px, 2.5vw, 24px);
	border-radius: 18px;
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-fiche);
}

.sbg-fiche__bloc {
	margin: 0;
	padding: 0;
	border: 0;
}

.sbg-fiche__bloc + .sbg-fiche__bloc {
	padding-top: 18px;
	border-top: 1px solid var(--sbg-ligne);
}

.sbg-fiche__legende {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 11px;
	padding: 0;
}

.sbg-fiche__etape {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--sbg-gris);
}

.sbg-fiche__aparte {
	font-size: 13px;
	color: var(--sbg-gris);
}

/* Les tailles */

.sbg-fiche__tailles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: 8px;
}

.sbg-fiche__taille {
	position: relative;
	display: block;
	cursor: pointer;
}

.sbg-fiche__taille input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sbg-fiche__taille-corps {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 13px;
	border: 1.5px solid var(--sbg-ligne);
	border-radius: 11px;
	background: var(--sbg-blanc);
	transition: border-color 0.16s, background 0.16s;
}

.sbg-fiche__taille:hover .sbg-fiche__taille-corps {
	border-color: var(--sbg-pine-300);
}

.sbg-fiche__taille input:checked + .sbg-fiche__taille-corps {
	border-color: var(--sbg-pine);
	background: var(--sbg-feuille);
}

.sbg-fiche__taille input:focus-visible + .sbg-fiche__taille-corps {
	outline: 3px solid var(--sbg-berry);
	outline-offset: 2px;
}

.sbg-fiche__taille.est-epuisee {
	cursor: not-allowed;
	opacity: 0.5;
}

.sbg-fiche__taille-nom {
	font-size: 15px;
	font-weight: 600;
}

.sbg-fiche__taille-prix {
	font-size: 14px;
	font-weight: 900;
	color: var(--sbg-pine);
}

.sbg-fiche__taille-note {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--sbg-berry);
}

.sbg-fiche__conseil {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sbg-gris);
}

/* Les lignes à cocher : mode de remise et options */

.sbg-fiche__lignes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbg-fiche__ligne {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 13px 15px;
	border: 1.5px solid var(--sbg-ligne);
	border-radius: 12px;
	background: var(--sbg-blanc);
	cursor: pointer;
	transition: border-color 0.16s, background 0.16s;
}

.sbg-fiche__ligne:hover {
	border-color: var(--sbg-pine-300);
}

.sbg-fiche__ligne input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

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

.sbg-fiche__ligne:has(input:focus-visible) {
	outline: 3px solid var(--sbg-berry);
	outline-offset: 2px;
}

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

.sbg-fiche__puce {
	flex: none;
	width: 19px;
	height: 19px;
	border-radius: 999px;
	border: 5.5px solid var(--sbg-pine-100);
	background: var(--sbg-blanc);
	box-sizing: border-box;
	transition: border-color 0.16s;
}

.sbg-fiche__ligne:has(input:checked) .sbg-fiche__puce {
	border-color: var(--sbg-pine);
}

.sbg-fiche__case {
	flex: none;
	display: grid;
	place-items: center;
	width: 21px;
	height: 21px;
	border: 1.5px solid var(--sbg-pine-100);
	border-radius: 6px;
	background: var(--sbg-blanc);
	transition: background 0.16s, border-color 0.16s;
}

.sbg-fiche__ligne:has(input:checked) .sbg-fiche__case {
	border-color: var(--sbg-pine);
	background: var(--sbg-pine);
}

.sbg-fiche__ligne:has(input:checked) .sbg-fiche__case::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--sbg-blanc);
	border-bottom: 2px solid var(--sbg-blanc);
	transform: rotate(-45deg) translate(1px, -1px);
}

.sbg-fiche__ligne-corps {
	flex: 1;
	min-width: 0;
}

.sbg-fiche__ligne-titre {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.sbg-fiche__ligne-desc {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sbg-gris);
}

.sbg-fiche__ligne-prix {
	font-size: 15px;
	font-weight: 900;
	white-space: nowrap;
}

.sbg-fiche__ligne-prix.est-gratuit {
	color: var(--sbg-pine);
}

.sbg-fiche__indice {
	margin-bottom: 11px;
	font-size: 13px;
	color: var(--sbg-gris);
}

.sbg-fiche__indice:empty {
	display: none;
}

/* L'achat */

.sbg-fiche__achat-haut {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.sbg-fiche__quantite {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border: 1.5px solid var(--sbg-ligne);
	border-radius: 999px;
}

.sbg-fiche__pas {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--sbg-pine);
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.16s;
}

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

.sbg-fiche__nombre {
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}

.sbg-fiche__nombre::-webkit-outer-spin-button,
.sbg-fiche__nombre::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.sbg-fiche__total {
	flex: 1;
	min-width: 140px;
	text-align: end;
}

.sbg-fiche__total-label {
	display: block;
	font-size: 13px;
	color: var(--sbg-gris);
}

.sbg-fiche__total-somme {
	display: block;
	font-size: 30px;
	font-weight: 900;
	line-height: 1.05;
	color: var(--sbg-pine);
}

.sbg-fiche__cta {
	display: block;
	width: 100%;
	padding: 17px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--sbg-berry);
	color: var(--sbg-blanc);
	font-size: 17px;
	font-weight: 600;
	text-align: center;
	transition: background 0.16s, transform 0.1s;
}

.sbg-fiche__cta:hover {
	background: var(--sbg-berry-vif);
}

.sbg-fiche__cta:active {
	transform: scale(0.98);
}

.sbg-fiche__reperes {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 12px;
	list-style: none;
	font-size: 13px;
	color: var(--sbg-gris);
}

.sbg-fiche__reperes li {
	display: flex;
	gap: 6px;
	align-items: center;
}

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

/* Le rappel du rendez-vous */

.sbg-fiche__rdv {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--sbg-blush);
	font-size: 14px;
	line-height: 1.55;
}

.sbg-fiche__rdv .sbg-ico {
	flex: none;
	margin-top: 2px;
	color: var(--sbg-berry);
}

/* ------------------------------------------------------------------
   Les sections du bas
   ------------------------------------------------------------------ */

.sbg-fiche__section {
	margin-top: 44px;
}

.sbg-fiche__section-titre {
	margin-bottom: 18px;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--sbg-pine);
}

.sbg-fiche__etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.sbg-fiche__etape-carte {
	display: flex;
	flex-direction: column;
	gap: 9px;
	padding: 20px;
	border: 1.5px solid var(--sbg-pine-100);
	border-radius: 14px;
	background: var(--sbg-blanc);
}

.sbg-fiche__etape-num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--sbg-pine);
	color: var(--sbg-blanc);
	font-size: 14px;
	font-weight: 900;
}

.sbg-fiche__etape-titre {
	font-size: 16px;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--sbg-encre);
}

.sbg-fiche__etape-carte p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sbg-gris);
	text-wrap: pretty;
}

/* Les avis */

.sbg-fiche__avis {
	padding: 24px clamp(18px, 3vw, 28px);
	border-radius: 18px;
	background: var(--sbg-blanc);
	box-shadow: var(--sbg-ombre-douce-fiche);
}

.sbg-fiche__avis-tete {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.sbg-fiche__avis-note {
	font-size: 32px;
	font-weight: 900;
	line-height: 1;
	color: var(--sbg-pine);
}

.sbg-fiche__avis-detail {
	flex: 1;
	display: block;
	font-size: 13px;
	color: var(--sbg-gris);
}

.sbg-fiche__avis-detail .sbg-fiche__etoiles {
	display: block;
	font-size: 16px;
	letter-spacing: 0.08em;
}

.sbg-fiche__avis-lien {
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1.5px solid var(--sbg-pine-300);
	text-decoration: none;
}

.sbg-fiche__temoignages {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.sbg-temoignage {
	margin: 0;
	border-top: 1px solid var(--sbg-ligne);
	padding-top: 14px;
}

.sbg-temoignage__etoiles {
	margin: 0 0 5px;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--sbg-berry);
}

/* `blockquote` porte une marge et un trait dans la feuille du thème : ici la
   citation est une carte, pas un exergue. */
.sbg-temoignage__texte {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 15px;
	font-style: normal;
	line-height: 1.55;
	color: var(--sbg-encre);
	text-wrap: pretty;
}

.sbg-temoignage__auteur {
	margin-top: 6px;
	font-size: 13px;
	color: var(--sbg-gris);
}

/* L'accordéon de la fiche */

/* ------------------------------------------------------------------
   Le panneau collant
   ------------------------------------------------------------------ */

.sbg-fiche-barre {
	position: fixed;
	inset: auto 0 0 0;
	/* Au-dessus du widget d'avis flottant, qui se pose a 2 147 483 644. */
	z-index: calc(var(--sbg-z-widget-avis, 2147483644) + 1);
	background: rgb(255 255 255 / 0.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--sbg-ligne);
	box-shadow: 0 -6px 24px rgb(4 104 101 / 0.08);
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

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

.sbg-fiche-barre.est-visible {
	transform: translateY(0);
}

.sbg-fiche-barre__inner {
	max-width: 1120px;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding-block: 12px;
}

.sbg-fiche-barre__objet {
	flex: 1 1 240px;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
}

.sbg-fiche-barre__titre {
	display: block;
	font-weight: 600;
}

.sbg-fiche-barre__sous {
	display: block;
	color: var(--sbg-gris);
}

.sbg-fiche-barre__total {
	font-size: 24px;
	font-weight: 900;
	color: var(--sbg-pine);
}

.sbg-fiche-barre__cta {
	padding: 14px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--sbg-berry);
	color: var(--sbg-blanc);
	font-size: 15px;
	font-weight: 600;
	transition: background 0.16s, transform 0.1s;
}

.sbg-fiche-barre__cta:hover {
	background: var(--sbg-berry-vif);
}

.sbg-fiche-barre__cta:active {
	transform: scale(0.97);
}

/* Le panneau collant recouvrirait le bouton du retour en haut. */
body:has(.sbg-fiche-barre.est-visible) .sbg-haut {
	inset-block-end: 92px;
}

@media (max-width: 620px) {

	.sbg-fiche-barre__objet {
		flex-basis: 100%;
	}

	.sbg-fiche-barre__cta {
		flex: 1;
	}
}

/* ------------------------------------------------------------------
   Le produit sans configurateur garde la fiche simple
   ------------------------------------------------------------------ */

.single-product .sbg-fiche + .sbg-complements,
.single-product .sbg-fiche ~ .related {
	margin-top: 44px;
}

/* ------------------------------------------------------------------
   Quand la fiche prend la main
   ------------------------------------------------------------------
   La feuille WooCommerce du thème pose une grille à deux colonnes sur
   `div.product` — galerie à gauche, résumé à droite. La fiche porte sa propre
   mise en page : la grille se défait, et la colonne de résumé, désormais vide,
   sort du flux.
   ------------------------------------------------------------------ */

.sbg--fiche .single-product div.product,
.single-product.sbg--fiche div.product {
	display: block;
}

.sbg--fiche div.product > .summary.entry-summary:empty,
.sbg--fiche div.product > .summary.entry-summary {
	display: none;
}

.sbg--fiche div.product > .woocommerce-product-gallery {
	display: none;
}

/* ------------------------------------------------------------------
   Les fiches qui ne sont pas celles d'un sapin
   ------------------------------------------------------------------
   Le même gabarit sert le lot de branchages et les prestations. Ce qui n'a pas
   de sens s'y retire tout seul — tailles, mode de remise, options —, et il
   reste deux cas de mise en page à traiter : la page sans photo, et la page
   qui ne vend pas.
   ------------------------------------------------------------------ */

/* Sans photo, le résumé prend toute la largeur plutôt que la moitié. */
.sbg-fiche__resume--seule {
	flex: 1 1 100%;
	max-width: 46rem;
	margin-inline: auto;
}

/* Une prestation ne se commande pas seule : le plugin refuse un panier qui ne
   contiendrait que des services. On le dit à la place du bouton. */
.sbg-fiche__mur {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 13px 15px;
	border-radius: 12px;
	background: var(--sbg-feuille);
	font-size: 14px;
	line-height: 1.5;
	color: var(--sbg-encre);
	text-wrap: pretty;
}

.sbg-fiche__mur .sbg-ico {
	flex: none;
	margin-top: 2px;
	color: var(--sbg-pine);
}

.sbg-fiche__cta--creux {
	color: var(--sbg-pine);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--sbg-pine-300);
	text-decoration: none;
	display: block;
	text-align: center;
}

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

/* La description longue : c'est le corps de référence de la page, il se lit
   comme un article et non comme une fiche. */
.sbg-fiche__texte {
	max-width: var(--sbg-largeur-etroite);
}

/* Le message de WooCommerce se cale sur la fiche (1 120 px) et non sur la
   coquille du thème (1 140 px) : dix pixels de décalage se voient. */
.sbg--fiche .woocommerce-notices-wrapper {
	max-width: var(--fiche-largeur, 1120px);
	margin-inline: auto;
}