/**
 * Fiche produit « Planche Florâme » — habillage calé sur la maquette Figma
 * et repris de la page d'accueil (rose décorative, verts olive).
 *
 * Largeurs : sections pleine largeur (bandes), contenu dans le `.container`
 * de Salient. Titres : classes thème h1like / h2like / h3like.
 * Rose décorative : assets/rose.svg (= Vector2.svg de la home).
 */

:root {
	/* Mappées sur les variables de couleur de Salient (repli = valeur Salient). */
	--planche-olive: var(--nectar-accent-color, #828d7d);
	--planche-olive-light: var(--nectar-extra-color-1, #b3beaf);
	--planche-cream: var(--nectar-extra-color-2, #ebe2d6);
	--planche-section-pale: var(--nectar-extra-color-3, #f0f2ef);
	/* Sans équivalent Salient (nuances de survol) → conservées. */
	--planche-olive-dark: #6c7568;
	--planche-olive-pale: #ced9cb;
	--planche-white: #ffffff;
}
.planche-swatch-item{
	display: flex;
	flex-direction: column;
	gap:7px;
	font-size: 12px;
	appearance:none;
	align-items: center;
}

.planche-swatch-item .planche-swatch__name{
	appearance: none;
  border: none;
  background: none;
  color: #FFF;
  padding: 0;

}
/* Conteneur principal : pas de padding/margin top (la bande crème colle au header). */
.florame-planche-wrap {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
.florame-planche-wrap .planche-hero,
.florame-planche-wrap .planche-specs,
.florame-planche-wrap .planche-faq,
.florame-planche-wrap .planche-exemples {
	width: 100%;
	margin: 0;
}

/* ─── <select> natif masqué : piloté par les swatches ─────────────────── */
.planche-florame .variations_form .variations select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.planche-florame .variations_form .variations {
	display: none;
}
.planche-florame .reset_variations {
	display: none !important;
}
/* Stock / disponibilité masqués (demande client). */
.planche-florame .stock,
.planche-florame .woocommerce-variation-availability {
	display: none !important;
}

/* ─── HERO (fond crème, pleine largeur, rose décorative à droite) ──────── */
.planche-hero {
	position: relative;
	overflow: hidden;
	background: var(--planche-cream);
	padding: 56px 0 72px;
}
.planche-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0; /* derrière le contenu → la rose passe sous le panneau vert. */
	background: url(rose.svg) no-repeat right bottom;
	background-size: 400px;
}
.planche-hero > .container {
	position: relative;
	z-index: 1;
}
.planche-hero__title {
  text-align: center;
  color: #828D7D;
  margin: 0 0 40px;
}
.planche-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
	--planche-media-h: 500px; /* hauteur zone image, partagée avec le panneau vert. */
}
/* Le panneau vert fait AU MINIMUM la hauteur de la zone image (et grandit
   si son contenu dépasse). Uniquement en 2 colonnes (≥ 901px). */
@media (min-width: 901px) {
	.planche-hero__panel {
		min-height: var(--planche-media-h);
	}
}

/* Colonne média : HAUTEUR FIXE (700px), image en « contain », fond TRANSPARENT.
   La hauteur est verrouillée sur le conteneur (et non sur l'image) pour qu'elle
   reste identique quand WooCommerce remplace la photo par celle de la variation. */
.planche-hero__media,
.planche-hero__media .woocommerce-product-gallery,
.planche-hero__media .woocommerce-product-gallery__wrapper,
.planche-hero__media .flex-viewport,
.planche-hero__media .flexslider,
.planche-hero__media .woocommerce-product-gallery__image,
.planche-hero__media .woocommerce-product-gallery__image > a {
	height: var(--planche-media-h) !important;
	margin: 0;
	width: 100% !important;
	background: transparent;
}
.planche-hero__media .woocommerce-product-gallery__image,
.planche-hero__media .woocommerce-product-gallery__image > a {
	display: block;
}
.planche-hero__media img,
.planche-hero__media .woocommerce-product-gallery__image img,
.planche-hero__media img.wp-post-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	background: transparent;
	margin: 0;
}
/* Masque l'icône loupe/zoom qui ouvre l'image (lightbox WooCommerce). */
.planche-hero__media .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* Colonne panneau vert */
.planche-hero__panel {
	background: var(--planche-olive);
	color: var(--planche-white);
	border-radius: 20px;
	padding: clamp(28px, 3.5vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.planche-hero__panel,
.planche-hero__panel p,
.planche-hero__panel li,
.planche-hero__panel .price,
.planche-hero__panel label {
	color: var(--planche-white);
}
.planche-hero__excerpt {
	font-size: 16px;
	line-height: 1.6;
}
.planche-hero__gate {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
}
.planche-hero__gate a {
	color: #fff;
	text-decoration: underline;
}

/* ─── Version non connectée : texte + 2 boutons (créer / se connecter) ─── */
.planche-hero__gate-text {
	/* 50px après les teintes (28 + gap 22px du panneau). padding:0 annule le
	   padding-bottom auto ajouté au <p> par le thème. */
	margin: 28px 0 0 !important;
	padding: 0 !important;
	font-size: 16px;
	line-height: 1.5;
}
.planche-hero__gate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 28px; /* 50px après le texte (28 + gap 22px). */
}
.planche-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 100px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.planche-btn--filled {
	background: var(--planche-olive-light); /* #B3BEAF */
	color: #fff;
	border: 1px solid var(--planche-olive-light);
}
.planche-btn--filled:hover {
	background: var(--planche-olive-pale);
	border-color: var(--planche-olive-pale);
	color: var(--planche-olive-dark);
}
.planche-btn--outline {
	background: transparent;
	color: #fff;
	border: 1px solid var(--planche-olive-pale); /* #CED9CB */
}
.planche-btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* ─── Modale de connexion ─────────────────────────────────────────────── */
.planche-login-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.45);
}
.planche-login-modal.is-open {
	display: flex;
}
/* Carte : même look que le panneau du header (blanc, bordure, radius 15px). */
.planche-login-modal__box {
	position: relative;
	width: 349px;
	max-width: 100%;
	box-sizing: border-box;
	padding: 35px;
	background: #fff;
	border: 1px solid #f4f3f7;
	border-radius: 15px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
	text-align: left;
}
.planche-login-modal__box * {
	box-sizing: border-box;
}
.planche-login-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: #828d7d;
	cursor: pointer;
}
.planche-login-modal__title {
	margin: 0 0 18px !important;
	font-family: "Montserrat", sans-serif;
	color: #828d7d;
	text-align: center;
}

/* Formulaire : copie exacte du style du form du menu header. */
.planche-login-modal .flo-login {
	display: flex !important;
	flex-direction: column !important;
	gap: 19px !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	font-family: "Montserrat", sans-serif !important;
	color: #828d7d !important;
}
.planche-login-modal .flo-login p,
.planche-login-modal .flo-login label {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.5 !important;
	color: #828d7d !important;
	font-weight: 400 !important;
}
.planche-login-modal .flo-login__field {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}
.planche-login-modal .flo-login__field > label {
	font-size: 16px !important;
}
.planche-login-modal .flo-login input[type="text"],
.planche-login-modal .flo-login input[type="password"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	height: 35px !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 12px !important;
	background: #fff !important;
	border: 1px solid #ced9cb !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color: #828d7d !important;
	font: 400 16px/1.5 "Montserrat", sans-serif !important;
}
.planche-login-modal .flo-login input[type="text"]:focus,
.planche-login-modal .flo-login input[type="password"]:focus {
	border-color: #828d7d !important;
	box-shadow: none !important;
	outline: none !important;
}
.planche-login-modal .flo-login__lost {
	font-size: 12px !important;
	color: #828d7d !important;
	margin-top: 3px !important;
	text-decoration: none !important;
	text-transform: none !important;
}
.planche-login-modal .flo-login__lost:hover {
	text-decoration: underline !important;
}
.planche-login-modal .flo-login__remember {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 16px !important;
	cursor: pointer !important;
}
.planche-login-modal .flo-login__remember input[type="checkbox"] {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	accent-color: #828d7d;
}
.planche-login-modal button[type="submit"].flo-login__submit {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 24px !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: #828d7d !important;
	color: #fff !important;
	box-shadow: none !important;
	font: 600 14px/1 "Montserrat", sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
	cursor: pointer !important;
}
.planche-login-modal .flo-login__submit:hover {
	background: #6f7a6a !important;
}
.planche-login-modal .flo-login__error {
	margin: 0 !important;
	color: #b3261e !important;
	font: 400 13px/1.4 "Montserrat", sans-serif !important;
}
.planche-login-modal .flo-login__error[hidden] {
	display: none !important;
}
.planche-login-modal__noacc {
	text-align: center !important;
	font-size: 16px !important;
}
.planche-login-modal__noacc a {
	color: #828d7d !important;
	font-weight: 600 !important;
}
.planche-unavailable {
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 12px 0;
	margin: 0;
}

/* Bouton « Voir des exemples » : centré, SOUS la grille (comme la maquette). */
.planche-hero__examples {
	text-align: center;
	margin-top: clamp(28px, 4vw, 48px);
}
.planche-florame .planche-hero__examples-link.button {
	display: inline-block;
	background: var(--planche-olive) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 24px !important;
	min-width: 360px;
	font-weight: 600 !important;
	font-size: 14px;
	line-height: 1.5 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em;
	box-shadow: none !important;
}
.planche-florame .planche-hero__examples-link.button:hover {
	background: var(--planche-olive-dark) !important;
	color: #fff !important;
}

/* ─── SWATCHES ────────────────────────────────────────────────────────── */
.planche-hero__panel .planche-swatches__label {
	margin: 0 0 20px; /* 20px entre le label « Disponible/Choisissez… » et le sélecteur. */
	padding: 0; /* écrase le padding-bottom hérité de <p> dans le thème. */
	font-weight: 600;
	font-size: 16px;
}
.planche-swatches__items {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
/* Carré arrondi — on neutralise le style « bouton » du thème (Salient). */
.planche-swatches .planche-swatch {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	width: 52px !important;
	height: 52px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid transparent !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: rgba(255, 255, 255, 0.15) !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
	cursor: default;
	line-height: 0;
	text-indent: 0;
}
.planche-swatches.is-interactive .planche-swatch {
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.planche-swatches.is-interactive .planche-swatch:hover {
	transform: translateY(-2px);
}
.planche-swatches .planche-swatch.is-selected {
	border-color: #fff !important;
	box-shadow: 0 0 0 1px var(--planche-olive), 0 4px 10px rgba(0, 0, 0, 0.18);
}
.planche-swatch__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ─── Formulaire variable natif dans le bloc vert ─────────────────────── */
.planche-hero__panel form.cart,
.planche-hero__panel .variations_form {
	margin-bottom: 0 !important;
}
/* Prix WooCommerce natif masqué : remplacé par la « Zone tarifs » (grilles).
   Affichage identique aux planches (simple inclus) : seuls les paliers s'affichent. */
.planche-hero__panel .price,
.planche-hero__panel .woocommerce-variation-price,
.planche-hero__panel .single_variation .price {
	display: none !important;
}
/* Zone live ARIA de WooCommerce (annonce le changement de déclinaison aux
   lecteurs d'écran). Salient ne pose pas le position:absolute canonique de
   .screen-reader-text → ce <div> reste EN FLUX et le gap du panneau flex lui
   réserve un espace. On le sort du flux « proprement » (accessibilité gardée). */
.planche-hero__panel .reset_variations_alert {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}
/* ─── Formulaire panier ───────────────────────────────────────────────────
   Salient impose ses styles via des sélecteurs très spécifiques, ex.
   body[data-form-submit="regular"].woocommerce-page .container-wrap
   button[type="submit"].single_add_to_cart_button  → spécificité (0,5,2).
   On préfixe donc TOUTES nos règles par
   body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel
   (spécificité supérieure) + !important, pour gagner quel que soit l'ordre. */

/* Les 2 blocs (stepper + bouton) alignés en 50-50 sur une ligne.
   - Produit variable / planche : le conteneur est .woocommerce-variation-add-to-cart.
   - Produit simple : c'est le form.cart lui-même (stepper + bouton en enfants directs). */
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .woocommerce-variation-add-to-cart,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel form.cart:not(.variations_form) {
	display: flex !important;
	align-items: stretch;
	gap: 16px;
	flex-wrap: nowrap;
	margin-top: 0 !important; /* WC ajoute une margin-top via .woocommerce-variation-add-to-cart-enabled. */
}

/* Stepper quantité (markup Salient .minus / .qty / .plus) en pilule. */
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity {
	display: flex !important;
	flex: 1 1 0 !important;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	border: 1px solid var(--planche-olive-light) !important; /* #B3BEAF */
	border-radius: 25px !important;
	padding: 9px !important;
	background: transparent !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.minus,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.plus {
	-webkit-appearance: none !important;
	appearance: none !important;
	position: static !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--planche-olive-light) !important; /* #B3BEAF */
	border-radius: 50% !important;
	/* Glyphe en SVG centré (le « - » texte des input n'est jamais centré). */
	color: transparent !important;
	font-size: 0 !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 11px !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.minus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.plus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.minus:hover,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.plus:hover {
	background-color: rgba(255, 255, 255, 0.18) !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.qty {
	/* « textfield » (et NON none) supprime le spinner sous Firefox. */
	-webkit-appearance: textfield !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	width: 40px !important;
	height: 24px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	text-align: center !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	box-shadow: none !important;
	pointer-events: none !important; /* non cliquable / non focusable : réglage uniquement via −/+. */
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.qty::-webkit-outer-spin-button,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Bouton « Ajouter au panier » — pilule olive clair (50%), survol olive très clair.
   On reprend la structure du sélecteur Salient (button[type="submit"]) en plus spécifique. */
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button.disabled,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button:disabled,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button.wc-variation-selection-needed {
	flex: 1 1 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin-top: 0 !important;
	background: var(--planche-olive-light) !important; /* #B3BEAF */
	color: #fff !important;
	border: 0 !important;
	border-radius: 100px !important;
	padding: 12px 24px !important; /* valeurs exactes Figma (px-24 py-12). */
	line-height: 1 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	box-shadow: none !important;
	opacity: 1 !important; /* annule l'état grisé natif (bouton variable désactivé). */
	transition: background 0.15s ease;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button:hover {
	background: var(--planche-olive-pale) !important; /* #CED9CB */
}

/* Bouton « Demander un devis » — masqué par défaut ; affiché à la place du
   bouton d'ajout (MÊME style) quand la quantité dépasse le maximum.
   La visibilité est pilotée par la classe .is-shown (et non par jQuery .hide(),
   qu'un `display:!important` écraserait). */
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel a.planche-quote-btn {
	display: none !important;
	flex: 1 1 0 !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 12px 24px !important; /* identique au bouton d'ajout. */
	background: var(--planche-olive-light) !important; /* #B3BEAF — identique à l'ajout panier. */
	color: #fff !important;
	border: 0 !important;
	border-radius: 100px !important;
	line-height: 1 !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	text-align: center !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background 0.15s ease;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel a.planche-quote-btn.is-shown {
	display: inline-flex !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel a.planche-quote-btn:hover {
	background: var(--planche-olive-pale) !important; /* #CED9CB — identique au survol de l'ajout panier. */
}

/* ─── Messages WooCommerce sous le formulaire (blanc sur olive clair) ───── */
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices {
	margin-top: 16px;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .woocommerce-notices-wrapper {
	margin: 0;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .woocommerce-message,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .woocommerce-info,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .woocommerce-error {
	background: var(--planche-olive-light) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	margin: 0 !important;
	box-shadow: none !important;
	list-style: none !important;
	font-size: 14px !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .woocommerce-message::before,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .woocommerce-info::before,
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .woocommerce-error::before {
	color: #fff !important;
	background: transparent !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices a {
	color: #fff !important;
}
body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .planche-hero__notices .button {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid #fff !important;
	border-radius: 999px !important;
	padding: 8px 18px !important;
}

/* ─── Modale de succès « ajout au panier » ─────────────────────────────── */
.planche-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.45);
}
.planche-modal {
	position: relative;
	width: 100%;
	max-width: 620px;
	background: #fff;
	border-radius: 14px;
	padding: 44px 40px 36px;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	font-family: "Montserrat", sans-serif;
}
.planche-modal__close {
	position: absolute;
	top: 12px;
	right: 16px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var(--planche-olive);
	cursor: pointer;
}
.planche-modal__msg {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.5;
	color: #2f3330;
}
.planche-modal__actions {
	display: flex;
	flex-direction: row;
	gap: 16px;
}
.planche-modal__btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 100px;
	padding: 12px 24px; /* padding charte Figma. */
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: #fff; /* texte blanc pour les 2 boutons. */
	cursor: pointer;
	transition: background 0.15s ease;
}
.planche-modal__btn--cart {
	background: var(--planche-olive);
}
.planche-modal__btn--cart:hover {
	background: var(--planche-olive-dark);
	color: #fff;
}
.planche-modal__btn--continue {
	background: var(--planche-olive-light);
}
.planche-modal__btn--continue:hover {
	background: var(--planche-olive-pale);
	color: #fff;
}
/* Sur très petit écran, on empile les 2 boutons. */
@media (max-width: 520px) {
	.planche-modal__actions {
		flex-direction: column;
	}
}

/* ─── CARACTÉRISTIQUES (encadré, ~1120px) ─────────────────────────────── */
.planche-specs {
	padding: 72px 0;
}
.planche-specs__inner {
	max-width: 1120px;
	margin: 0 auto;
}
.planche-specs__title {
	text-align: center;
	text-transform: uppercase;
	margin: 0 0 36px;
}
.planche-specs__card {
	background: var(--planche-white);
	border: 1px solid var(--planche-olive-pale);
	border-radius: 15px;
	padding: clamp(28px, 4vw, 56px);
}
.planche-specs__body {
	font-size: 16px;
	line-height: 1.65;
}
.planche-specs__body h2,
.planche-specs__body h3 {
	margin: 28px 0 8px;
}
.planche-specs__body > :first-child {
	margin-top: 0;
}
.planche-specs__doc {
	margin: 28px 0 0;
	text-align: center;
}
/* Même bouton que « Voir des exemples ». */
.planche-specs__doc .button {
	display: inline-block;
	background: var(--planche-olive) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 24px !important;
	min-width: 360px;
	font-weight: 600 !important;
	font-size: 14px;
	line-height: 1.5 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em;
	box-shadow: none !important;
}
.planche-specs__doc .button:hover {
	background: var(--planche-olive-dark) !important;
	color: #fff !important;
}

/* ─── FAQ (fond clair, ~920px) ────────────────────────────────────────── */
.planche-faq {
	/* background: var(--planche-section-pale); */
	padding: 64px 0;
}
.planche-faq__title {
	text-align: center;
	text-transform: uppercase;
	margin: 0 0 32px;
}
.planche-faq #faq-numeria {
	max-width: 920px;
	margin: 0 auto;
}

/* ─── EXEMPLES (vert clair #B3BEAF + rose décorative, comme la home) ───── */
.planche-exemples {
	position: relative;
	overflow: hidden;
	background: var(--planche-olive-light);
	padding: 64px 0 72px;
}
.planche-exemples::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(rose.svg) no-repeat right bottom;
	background-size: 400px;
	pointer-events: none;
	z-index: 0;
}
.planche-exemples > .container {
	position: relative;
	z-index: 1;
}
.planche-exemples__title {
	text-align: center;
	color: #fff;
	margin: 0 0 32px;
	text-transform: uppercase;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */
/* Rose : mêmes paliers que la home (.rose-light-bg) → 400px, 300px @1200, masquée @990. */
@media (max-width: 1200px) {
	.planche-exemples::after,
	.planche-hero::after {
		background-size: 300px;
	}
	.planche-exemples::after {
		background-position: right 70%;
	}
}
@media (max-width: 990px) {
	.planche-hero::after,
	.planche-exemples::after {
		display: none;
	}
}

/* Hauteur de la zone image, adaptée en responsive (verrouillée).
   Définie sur la grille → partagée par l'image ET le min-height du panneau. */
@media (max-width: 1200px) {
	.planche-hero__grid {
		--planche-media-h: 440px;
	}
}
@media (max-width: 900px) {
	.planche-hero__grid {
		grid-template-columns: 1fr;
		--planche-media-h: 380px;
	}
}

/* Formulaire panier empilé (stepper + bouton l'un sous l'autre, 100%) :
   sur 901–1300px (panneau étroit en 2 colonnes) ET sur 0–590px (mobile). */
@media (min-width: 901px) and (max-width: 1300px), (max-width: 590px) {
	body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .woocommerce-variation-add-to-cart,
	body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel form.cart:not(.variations_form) {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	/* On vise AUSSI les états désactivés (.disabled / :disabled /
	   .wc-variation-selection-needed) : sinon le style de base, plus spécifique
	   pour ces états, garde flex:1 1 0 + min-height:0 et écrase le bouton tant
	   qu'aucune teinte n'est sélectionnée (bouton coupé en mode disabled). */
	body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel .quantity,
	body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button,
	body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button.disabled,
	body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button:disabled,
	body.woocommerce-page .florame-planche-wrap .planche-florame .planche-hero__panel button[type="submit"].single_add_to_cart_button.wc-variation-selection-needed {
		width: 100% !important;
		flex: 1 1 auto !important;
		min-height: auto !important;
		height: auto !important;
		line-height: 1.4 !important;
	}
}

/* Global section « Footer produit » : supprime le padding-bottom hérité des <p>. */
.planche-global-footer p {
	padding-bottom: 0 !important;
}




/* ─── Galerie produit SIMPLE (image principale + miniatures) ─────────────── */
.planche-hero__media--gallery {
	height: auto !important;
	min-height: 0 !important;
}
.planche-gallery {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.planche-gallery__main {
	height: var(--planche-media-h);
	background: transparent;
}
.planche-gallery__main-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	margin: 0;
}
.planche-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.planche-gallery__thumb {
	width: 74px;
	height: 74px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
	transition: border-color .15s ease, transform .15s ease;
}
.planche-gallery__thumb:hover {
	transform: translateY(-2px);
}
.planche-gallery__thumb.is-active {
	border-color: var(--planche-olive);
}
.planche-gallery__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	margin: 0;
}



/* ─── Section « Nos autres produits » ───────────────────────────────────── */
.planche-related {
	padding: clamp(36px, 5vw, 72px) 0;
	background: var(--planche-section-pale);
}
.planche-related__title {
	margin: 0 0 28px;
	text-align: center;
	text-transform: uppercase;
}
.planche-related__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* centre la rangée quand il y a moins de 4 cartes. */
	gap: 24px;
}
.planche-related-card {
	display: block;
	text-decoration: none;
	color: inherit;
	/* Largeur fixe = 4 colonnes (3 gouttières de 24px) → mêmes cartes qu'à 4,
	   simplement centrées s'il y en a moins. */
	flex: 0 0 calc((100% - 72px) / 4);
	max-width: calc((100% - 72px) / 4);
}
.planche-related-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	padding: 15px;
	background: var(--planche-olive-pale, #eef1e6);
}
.planche-related-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	display: block;
	margin: 0;
	transition: transform .35s ease;
}
.planche-related-card:hover .planche-related-card__media img {
	transform: scale(1.05);
}
.planche-related-card__name {
	display: block;
	font-weight: 600;
	margin-top: 14px;
	line-height: 1.35;
		text-transform: uppercase;
}

/* Slider swipe en tablette (2 par vue) et mobile (1 par vue). */
@media (max-width: 1324px) {
	.planche-related__grid {
			flex-wrap: nowrap;
			justify-content: flex-start; /* slider : on démarre au début (pas de centrage). */
			gap: 16px;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			-webkit-overflow-scrolling: touch;
			padding-bottom: 10px;
			scrollbar-width: thin;
		}
		.planche-related-card {
			flex: 0 0 calc((100% - 16px) / 2);
			max-width: calc((100% - 16px) / 2);
			scroll-snap-align: start;
		}
	}
	@media (max-width: 640px) {
		.planche-related-card {
			flex: 0 0 100%;
			max-width: 100%;
		}
	}