/**
 * Pixel Fleurs V2 - Styles du Configurateur de Bouquet
 *
 * Styles pour la page de création de bouquet personnalisé
 */

/* Variables héritées du :root dans style.css - ne pas dupliquer ici */

/* ===== PAGE CONFIGURATEUR ===== */

/* MOBILE-FIRST: Page configurateur */
.configurateur-page {
	min-height: calc(100vh - 280px);
	background-color: var(--background);
	padding: var(--spacing-xl) 0;
}

@media (min-width: 768px) {
	.configurateur-page {
		padding: var(--spacing-2xl) 0;
	}
}

.container-large {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--spacing-lg);
}

/* En-tête du configurateur */
.configurateur-header {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
	animation: fadeInDown 0.5s ease;
}

/* MOBILE-FIRST: Header h1 typographie fluide */
.configurateur-header h1 {
	font-size: clamp(1.5rem, 5vw, 2.5rem);
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: var(--spacing-md);
	line-height: 1.2;
}

.configurateur-header .subtitle {
	font-size: 1.125rem;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto;
}

/* ===== CONTENEUR PRINCIPAL ===== */

/* MOBILE-FIRST: Configurateur 1 colonne mobile.
   ⚠️ `minmax(0, 1fr)` et NON `1fr` : `1fr` vaut `minmax(auto, 1fr)`, donc la colonne ne descend jamais
   sous la largeur minimale de son contenu. Un seul texte insécable dans la barre collante suffisait
   à élargir TOUTE la page (mesuré : 688 px de large sur un écran de 390 px). */
.configurateur-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--spacing-lg);
	animation: fadeInUp 0.5s ease 0.1s backwards;
}

/* 768–1023 px : toujours UNE colonne (l'aside « Votre composition » passe sous la sélection). À deux
   colonnes, il ne restait ~360 px à la grille des fleurs : 4 cartes de 55 px, inutilisables. La
   deuxième colonne n'apparaît qu'à partir de 1024 px, là où l'aside redevient collant. */
@media (min-width: 768px) {
	.configurateur-container {
		gap: var(--spacing-2xl);
	}
}

@media (min-width: 1024px) {
	.configurateur-container {
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

/* SECTION SÉLECTION DES FLEURS */

/* MOBILE-FIRST: Selection section responsive */
.flowers-selection-section {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
	.flowers-selection-section {
		padding: var(--spacing-2xl);
	}
}

/* Étape 3 : la section ne garde que l'indicateur d'étapes (il se trouve dans la section, entre le
   conseil de Lindsay et la grille). Tout le reste est masqué, comme l'était la section entière. */
.flowers-selection-section.is-step3 > :not(.configurateur-steps-indicator) {
	display: none;
}

.flowers-selection-section.is-step3 .configurateur-steps-indicator {
	margin-bottom: 0;
}

/* ===== BULLE DE CONSEIL DE LINDSAY (NOUVEAU) ===== */

.florist-advice-bubble {
	background: linear-gradient(135deg, #FFF9F5 0%, #FEF5F1 100%);
	border: 2px solid #E8B4A8;
	border-radius: var(--radius-lg);
	padding: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
	animation: slideDown 0.4s ease;
	box-shadow: 0 4px 15px rgba(232, 196, 196, 0.15);
	position: relative;
	overflow: hidden;
}

.florist-advice-bubble::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(232, 196, 196, 0.1) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.advice-bubble-inner {
	position: relative;
	z-index: 1;
}

/* Conteneur photo et infos Lindsay */
.florist-photo-container {
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	border-bottom: 2px solid rgba(232, 196, 196, 0.3);
}

.florist-photo {
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--secondary-color);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.florist-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.florist-info h3 {
	margin: 0 0 4px 0;
	font-size: 1rem;
	font-weight: 700;
	color: #8B5A5A;
	line-height: 1.2;
}

.florist-title {
	margin: 0;
	font-size: 0.85rem;
	color: #B8956A;
	font-style: italic;
	font-weight: 500;
}

/* Conseil rotatif */
.rotating-advice {
	min-height: 100px;
	margin-bottom: var(--spacing-lg);
	position: relative;
}

.advice-text {
	margin: 0;
	color: var(--text-primary);
	font-size: 0.95rem;
	line-height: 1.6;
	opacity: 1;
	transition: all 0.4s ease;
	animation: fadeInText 0.4s ease;
}

.advice-text.hidden {
	display: none;
	opacity: 0;
}

@keyframes fadeInText {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.advice-text strong {
	color: #D97757;
	font-weight: 600;
}

/* Navigation des conseils */
.advice-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-md);
}

.advice-nav-btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #E8B4A8;
	background: var(--white);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	color: #8B5A5A;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1;
}

.advice-nav-btn:hover {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--white);
	transform: scale(1.05);
}

.advice-nav-btn .icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.advice-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex: 1;
	min-width: 120px;
}

.advice-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E8B4A8;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.advice-dot.active {
	background: #D97757;
	width: 24px;
	border-radius: 4px;
}

.advice-dot:hover {
	transform: scale(1.2);
	background: #D97757;
}

/* Boîte de conseils professionnels (version alternative) */
.pro-tips-box {
	background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);
	border: 2px solid #81C784;
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-xl);
	animation: slideDown 0.4s ease;
}

.pro-tips-box h3 {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2E7D32;
	margin: 0 0 var(--spacing-md) 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.tips-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.tips-list li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-left: 0;
}

.tips-list li strong {
	color: #1B5E20;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
}

.tips-list li strong::before {
	content: "✓";
	display: inline-block;
	margin-right: 8px;
	color: #4CAF50;
	font-weight: bold;
	font-size: 1.1rem;
}

.tips-list li span {
	color: #555;
	font-size: 0.85rem;
	line-height: 1.4;
}

.flowers-selection-section h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: var(--spacing-xl);
	padding-bottom: var(--spacing-lg);
	border-bottom: 2px solid var(--background);
}

/* Filtres */
.filters-section {
	margin-bottom: var(--spacing-xl);
	padding-bottom: var(--spacing-lg);
	border-bottom: 1px solid var(--background);
}

.filters-section label {
	display: block;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
	font-size: 0.95rem;
}

.filter-select {
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid #E0E0E0;
	border-radius: var(--radius-md);
	font-size: 0.95rem;
	color: var(--text-primary);
	background-color: var(--white);
	cursor: pointer;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-select:hover {
	border-color: var(--primary-color);
}

.filter-select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(91, 126, 140, 0.1);
}

/* Story 20.3 (+ retouche) : pastilles de couleur multi-sélection — ÉPURÉES (rond + nom, sans bordure
   ni fond, pour dégager la page). Grille 3 par ligne sur mobile → gagne de la hauteur ; plus par
   ligne sur écran large. La sélection est marquée par un ANNEAU autour du rond + le nom accentué. */
.color-pastilles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)); /* mobile : 3 par ligne */
	gap: 12px var(--spacing-xs);
	margin-top: var(--spacing-xs);
}

@media (min-width: 480px) {
	.color-pastilles {
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	}
}

.color-pastille {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
	padding: 4px 2px;
	min-height: 40px;
	border: none;
	background: none;
	color: #4a5b62;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	text-align: left;
}

.color-pastille-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
	transition: box-shadow 0.15s ease;
}

.color-pastille:hover .color-pastille-dot {
	box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.25);
}

.color-pastille.selected .color-pastille-dot {
	box-shadow: 0 0 0 2px var(--white), 0 0 0 4px #D97757;
}

.color-pastille.selected .color-pastille-label {
	color: #D97757;
	font-weight: 600;
}

.color-pastille-dot.is-multi {
	background: conic-gradient(#e74c3c, #f1c40f, #2ecc71, #3498db, #9b59b6, #e74c3c);
}

.color-pastille-dot.is-unknown {
	background: repeating-linear-gradient(45deg, #eee, #eee 4px, #ddd 4px, #ddd 8px);
}

.color-pastille-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Grille des fleurs — SEUL endroit où son nombre de colonnes est défini (mobile-first, chaque palier
   remplace le précédent, aucun ne se chevauche) :
     < 480 px : 2 colonnes · 480–767 px : 3 · 768–1279 px : 4 · ≥ 1280 px : 5
     (de 1024 à 1279 px l'aside de 380 px réduit la sélection : 5 cartes y tomberaient à ~80 px).
   `minmax(0, 1fr)` : une colonne `1fr` ne descend jamais sous la largeur de son contenu, la grille
   pouvait donc dépasser de son conteneur. Avec `0`, les cartes se partagent la place réelle. */
.flowers-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-sm);
	min-height: 200px;
}

@media (min-width: 480px) {
	.flowers-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--spacing-lg);
	}
}

@media (min-width: 768px) {
	.flowers-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.flowers-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Story 20.1/20.2 : étape « extras » en SECTIONS repliables (accordéons) */
.flowers-grid.is-sections {
	display: block; /* conteneur = blocs empilés ; chaque section garde sa propre grille */
}

/* Texte d'aide en haut de la zone extras (Story 20.2) */
.extras-hint {
	margin: 0 0 var(--spacing-md);
	font-size: 0.9rem;
	color: #6b7280;
}

.extras-section {
	border: 1px solid rgba(91, 126, 140, 0.18);
	border-radius: 10px;
	margin-bottom: var(--spacing-md);
	background: rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

/* En-tête = bouton pleine largeur, cible tactile ≥ 44px (Story 20.2) */
.extras-section-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding: 14px var(--spacing-md);
	min-height: 48px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: #4a5b62;
}

.extras-section-header:hover {
	background: rgba(91, 126, 140, 0.06);
}

.extras-section-title {
	font-size: 1.02rem;
	font-weight: 600;
}

.extras-section-count {
	font-weight: 400;
	color: #9ca3af;
	font-size: 0.9em;
}

.extras-section-chevron {
	color: #9ca3af;
	transition: transform 0.2s ease;
}

.extras-section.is-open .extras-section-chevron {
	transform: rotate(180deg);
}

/* Corps replié par défaut ; déplié quand .is-open */
.extras-section-body {
	display: none;
	padding: 0 var(--spacing-md) var(--spacing-md);
}

.extras-section.is-open .extras-section-body {
	display: block;
}

/* Grille interne d'une section : pas de min-height (évite le vide) */
.extras-section .flowers-grid {
	min-height: 0;
}

.flower-item {
	background: var(--background);
	border: 2px solid transparent;
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 290px;
}

.flower-item:hover {
	border-color: var(--primary-color);
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.flower-item.selected {
	background: #E8F5E9;
	border-color: var(--success);
	box-shadow: inset 0 0 0 1px var(--success);
}

.flower-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	margin-bottom: var(--spacing-sm);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
	cursor: zoom-in;
}

/* ===== Photo zoomable : conteneur + badge loupe ===== */
.flower-thumb-wrap {
	position: relative;
	margin-bottom: var(--spacing-sm);
	line-height: 0;
	border-radius: var(--radius-sm);
}

.flower-thumb-wrap .flower-thumb {
	margin-bottom: 0;
	display: block;
}

/* Petite loupe grisée dans le coin pour signaler le zoom au clic */
.flower-zoom-badge {
	position: absolute;
	right: 6px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(38, 38, 38, 0.55);
	color: #fff;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: background 0.2s ease;
}

.flower-item:hover .flower-zoom-badge {
	background: rgba(38, 38, 38, 0.75);
}

.flower-zoom-badge svg {
	width: 15px;
	height: 15px;
}

/* ===== Lightbox photo fleur (A2) ===== */
.flower-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
	background: rgba(0, 0, 0, 0.85);
}

.flower-lightbox.is-open {
	display: flex;
}

.flower-lightbox-img {
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--radius-md);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.flower-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.flower-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Desktop : taille bornée pour rester confortable */
@media (min-width: 1024px) {
	.flower-lightbox-img {
		max-width: 700px;
		max-height: 85vh;
	}
}

.flower-name {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--spacing-xs);
	word-break: break-word;
	line-height: 1.2;
}

/* Badge « Formule » (produits bundle) — story 8-4 */
.flower-badge-formule {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #7c3aed;
	background: rgba(124, 58, 237, 0.12);
	border-radius: 999px;
	padding: 2px 8px;
	margin-bottom: var(--spacing-xs);
}

.flower-attributes {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-sm);
	line-height: 1.3;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2px;
}

.flower-color {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-sm);
}

.flower-price {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--action-color);
	margin-bottom: var(--spacing-md);
	margin-top: var(--spacing-sm);
}

.flower-stock {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-bottom: var(--spacing-md);
}

.flower-stock.low {
	color: var(--warning);
	font-weight: 500;
}

.flower-stock.out {
	color: var(--error);
	font-weight: 500;
}

.flower-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: var(--white);
	border: 1px solid #E0E0E0;
	border-radius: var(--radius-sm);
	padding: 4px;
}

.flower-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--primary-color);
	cursor: pointer;
	font-size: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	line-height: 1;
}

.flower-btn:hover {
	background: var(--primary-color);
	color: var(--white);
	border-radius: 3px;
}

.flower-quantity {
	min-width: 30px;
	text-align: center;
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--text-primary);
}

/* Message pas de fleurs */
/* Carte de message pleine largeur de la grille — stock vide (ambre) ou erreur (rouge,
   cf. .configurateur-error-message ci-dessous) partagent la même mise en page. */
.no-flowers-message,
.configurateur-error-message {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-2xl);
	border-radius: var(--radius-md);
}

.no-flowers-message {
	background: #FFF3CD;
	border: 1px solid #FFE082;
	color: #856404;
}

/* Chantier cache/nonce (2026-09) : erreur technique/accès refusé — distincte visuellement
   du vrai message de stock vide ci-dessus (teinte rouge plutôt qu'ambre). */
.configurateur-error-message {
	background: #F8D7DA;
	border: 1px solid #F1AEB5;
	color: #842029;
}

.configurateur-error-message p {
	margin-bottom: var(--spacing-md);
}

.loading-spinner {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-2xl);
}

.loading-spinner p {
	color: var(--text-secondary);
	font-style: italic;
}

/* ===== SECTION RÉSUMÉ DU BOUQUET ===== */

/* MOBILE-FIRST: Bouquet summary static en mobile */
.bouquet-summary-section {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	box-shadow: var(--shadow-md);
	height: auto;
	position: static;
	top: auto;
	max-height: none;
	overflow-y: auto;
}

@media (min-width: 768px) {
	.bouquet-summary-section {
		padding: var(--spacing-2xl);
	}
}

@media (min-width: 1024px) {
	.bouquet-summary-section {
		height: fit-content;
		position: sticky;
		top: 100px;
		max-height: calc(100vh - 120px);
	}
}

.bouquet-summary-section h2 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 2px solid var(--background);
}

/* Story 24.1 — le croquis du bouquet. Conteneur CARRÉ : le moteur (configurateur-croquis.js)
   dessine dans un repère logique 800×800 et lit la largeur réelle du canvas pour se recadrer,
   `aspect-ratio` garantit donc que hauteur = largeur sans JS de mise en page. */
.configurateur-croquis-holder {
	width: 100%;
	aspect-ratio: 1;
	margin-bottom: var(--spacing-lg);
	background: var(--background);
	border-radius: var(--radius-md);
	border: 1px solid #E0E0E0;
	overflow: hidden;
	/* Story 24.4 : repère pour la bulle d'actions et le message, qui déménagent avec le canvas. */
	position: relative;
}

.configurateur-croquis-holder canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Story 24.7 — la phrase qui dit ce qu'est le dessin. Discrète mais LISIBLE : c'est le garde-fou
   qui évite qu'une belle image devienne un avis Google. Jamais en gris pâle sur blanc. */
.croquis-disclaimer {
	margin: calc(-1 * var(--spacing-md, 12px)) 0 var(--spacing-lg);
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--text-secondary, #6B6157);
	text-align: center;
}

.croquis-disclaimer--fullscreen {
	margin: 0;
	padding: var(--spacing-sm, 8px) var(--spacing-lg, 20px) var(--spacing-md, 12px);
	flex: 0 0 auto; /* le croquis occupe la place restante, la phrase ne se laisse pas comprimer */
}

/* Story 24.3 — sur téléphone, le croquis n'a qu'UNE maison : la fenêtre vivante de la barre du bas.
   Sans ce masquage, la cliente qui descend trouverait ici un cadre vide (le canvas a déménagé). */
@media (max-width: 1023.98px) {
	.configurateur-croquis-holder,
	/* La phrase suit son dessin : sans lui, elle n'aurait plus d'objet ici. Elle reste présente
	   dans le plein écran et à côté de la case de confirmation. */
	.configurateur-croquis-holder + .croquis-disclaimer {
		display: none;
	}
}

/* Conteneur fleurs sélectionnées */
.selected-flowers-container {
	min-height: 80px;
	margin-bottom: var(--spacing-lg);
	max-height: 200px;
	overflow-y: auto;
	padding: var(--spacing-md);
	background: var(--background);
	border-radius: var(--radius-md);
	border: 1px solid #E0E0E0;
}

.selected-flowers {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.empty-composition {
	text-align: center;
	color: var(--text-secondary);
	font-style: italic;
	padding: var(--spacing-md) 0;
	margin: 0;
}

.selected-flower-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-sm);
	background: var(--white);
	border: 1px solid #E0E0E0;
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
}

.selected-flower-name {
	flex: 1;
	font-weight: 500;
	color: var(--text-primary);
}

.selected-flower-qty {
	color: var(--text-secondary);
	margin: 0 var(--spacing-sm);
	min-width: 40px;
	text-align: right;
}

.selected-flower-price {
	font-weight: 600;
	color: var(--action-color);
	min-width: 50px;
	text-align: right;
}

.remove-flower-btn {
	width: 20px;
	height: 20px;
	padding: 0;
	margin-left: var(--spacing-sm);
	border: none;
	background: transparent;
	color: var(--error);
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
	line-height: 1;
}

.remove-flower-btn:hover {
	color: var(--text-primary);
}

/* Section total */
.total-section {
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
	border-bottom: 2px solid var(--background);
}

.total-price-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-md);
	background: linear-gradient(135deg, var(--background) 0%, #F5F5F5 100%);
	border-radius: var(--radius-md);
}

.total-label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.total-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--action-color);
}

/* Story 22.21 : le total se lit comme un ticket de caisse — une ligne par poste, montants alignés
   à droite, puis le total. La jauge du minimum se glisse sous « Fleurs & feuillages ». */
.price-breakdown {
	margin-bottom: var(--spacing-sm);
}

.price-breakdown-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-sm);
	padding: 3px var(--spacing-md);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--text-secondary);
}

.price-breakdown-row[hidden] {
	display: none;
}

.price-breakdown-amount {
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.price-breakdown .min-order-gauge {
	margin: 2px 0 var(--spacing-sm);
}

/* Boutons d'action */
.btn-lg {
	width: 100%;
	padding: var(--spacing-lg) var(--spacing-md);
	font-size: 1rem;
	font-weight: 600;
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.btn-primary {
	background: var(--primary-color);
	color: var(--white);
	margin-bottom: var(--spacing-lg);
}

.btn-primary:hover:not(:disabled) {
	background: var(--primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-action {
	background: var(--action-color);
	color: var(--white);
	margin-bottom: var(--spacing-lg);
}

.btn-action:hover:not(:disabled):not([aria-disabled="true"]) {
	background: var(--action-hover);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.btn-action:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Encart aperçu IA intérimaire — story 13.4 (PL10) */
.preview-soon-notice {
	margin-bottom: var(--spacing-lg);
	padding: var(--spacing-md) var(--spacing-lg);
	background: var(--background-card, #FDF8F6);
	border: 1.5px dashed var(--primary-color, #C8956C);
	border-radius: var(--radius-md);
	text-align: center;
}

.preview-soon-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 var(--spacing-xs, 6px) 0;
}

.preview-soon-text {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin: 0;
}

/* Story 24.7 — la case de confirmation, juste au-dessus du bouton d'ajout au panier.
   Encadrée, parce qu'elle doit se distinguer du reste de l'étape 3 : c'est le dernier geste
   avant l'engagement, pas une ligne de formulaire de plus. */
.sketch-ack {
	margin-bottom: var(--spacing-md, 12px);
	padding: var(--spacing-md, 12px) var(--spacing-lg, 20px);
	background: var(--background-card, #FDF8F6);
	border: 1px solid #E0E0E0;
	border-radius: var(--radius-md);
}

.sketch-ack-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--text-primary);
	cursor: pointer;
}

/* Cible tactile confortable sans grossir la case elle-même au point de déséquilibrer la ligne. */
.sketch-ack-input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--primary-color, #C8956C);
	cursor: pointer;
}

/* Le refus s'affiche ICI, contre la case — pas dans une fenêtre système qui disparaît en
   laissant la cliente devant un bouton qui ne marche pas. Ton neutre, jamais un reproche. */
.sketch-ack-error {
	margin: var(--spacing-sm, 8px) 0 0 30px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #B3261E;
}

/* Message personnalisé */
.custom-message-section {
	margin-bottom: var(--spacing-lg);
}

.custom-message-section label {
	display: block;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--spacing-sm);
}

.custom-message-textarea {
	width: 100%;
	padding: var(--spacing-md);
	border: 1px solid #E0E0E0;
	border-radius: var(--radius-md);
	font-family: 'Inter', sans-serif;
	font-size: 0.95rem;
	color: var(--text-primary);
	resize: vertical;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	min-height: 100px;
	padding-top: 12px;
}

.custom-message-textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(91, 126, 140, 0.1);
}

.char-count {
	display: block;
	text-align: right;
	color: var(--text-secondary);
	font-size: 0.85rem;
	margin-top: 4px;
}

/* Lien retour */
.back-to-shop-link {
	text-align: center;
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--background);
}

.back-to-shop-link a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	transition: color 0.3s ease;
}

.back-to-shop-link a:hover {
	color: var(--primary-hover);
	text-decoration: underline;
}

/* ===== ANIMATIONS ===== */

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		max-height: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		max-height: 500px;
		transform: translateY(0);
	}
}

/* ===== RESPONSIVE DESIGN ===== */

/* MOBILE-FIRST: Extra small phones (< 480 px) */
@media (max-width: 479.98px) {
	.configurateur-page {
		padding: var(--spacing-lg) 0;
	}

	.configurateur-header h1 {
		font-size: 1.5rem;
	}

	.configurateur-header .subtitle {
		font-size: 0.95rem;
	}

	.flower-item {
		min-height: 260px;
	}

	.bouquet-summary-section h2 {
		font-size: 1.1rem;
	}

	.total-amount {
		font-size: 1.25rem;
	}

	.florist-advice-bubble {
		padding: var(--spacing-lg);
		margin-bottom: var(--spacing-lg);
	}

	.florist-photo-container {
		gap: var(--spacing-md);
		margin-bottom: var(--spacing-md);
		padding-bottom: var(--spacing-md);
	}

	.florist-photo {
		width: 60px;
		height: 60px;
	}

	.florist-info h3 {
		font-size: 0.95rem;
	}

	.florist-title {
		font-size: 0.8rem;
	}

	.advice-text {
		font-size: 0.9rem;
	}

	.advice-nav-btn {
		width: 28px;
		height: 28px;
		font-size: 1rem;
	}
}

/* Mobile standard et au-delà (480px +) — la grille des fleurs est réglée en haut de fichier. */
@media (min-width: 480px) {
	.flower-item {
		min-height: 260px;
	}
}

/* Tablette (768px +) */
@media (min-width: 768px) {
	.configurateur-page {
		padding: var(--spacing-2xl) 0;
	}

	.configurateur-header h1 {
		font-size: 2rem;
	}

	.configurateur-header .subtitle {
		font-size: 1.1rem;
	}

	.flowers-selection-section {
		padding: var(--spacing-2xl);
	}

	.bouquet-summary-section {
		padding: var(--spacing-2xl);
		position: static;
		height: auto;
		max-height: none;
	}

	.flower-item {
		min-height: 260px;
	}

	.florist-advice-bubble {
		padding: var(--spacing-xl);
		margin-bottom: var(--spacing-2xl);
	}

	.florist-photo-container {
		gap: var(--spacing-lg);
		margin-bottom: var(--spacing-lg);
		padding-bottom: var(--spacing-lg);
	}

	.florist-photo {
		width: 70px;
		height: 70px;
	}

	.florist-info h3 {
		font-size: 1rem;
	}

	.florist-title {
		font-size: 0.85rem;
	}

	.advice-text {
		font-size: 0.95rem;
	}

	.advice-nav-btn {
		width: 32px;
		height: 32px;
		font-size: 1.2rem;
	}

	.pro-tips-box {
		padding: var(--spacing-lg);
	}

	.pro-tips-box h3 {
		font-size: 1.1rem;
	}

	.tips-list li span {
		font-size: 0.85rem;
	}

	.btn-lg {
		padding: var(--spacing-lg) var(--spacing-md);
		font-size: 1rem;
	}

	.selected-flowers-container {
		max-height: 200px;
	}
}

/* Desktop (1024px +) */
@media (min-width: 1024px) {
	.bouquet-summary-section {
		position: sticky;
		top: 100px;
		height: fit-content;
		max-height: calc(100vh - 120px);
	}
}

/* ===== WIZARD MULTI-ÉTAPES ===== */

/* Indicateur d'étapes */
.configurateur-steps-indicator {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-lg);
	animation: fadeInDown 0.4s ease;
}

.step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: default;
	flex: 0 1 140px;
	text-align: center;
}

/* Badge arrondi avec icône */
.step-badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 16px;
	background: #f1ece6;
	/* Story 24.19 : l'icône d'une étape à venir était à 1,89:1 sur son propre fond beige —
	   une icône doit atteindre 3:1 pour être reconnaissable. Mesuré après : 3,11:1. */
	color: #9B816B;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.step-badge svg {
	display: block;
	width: 24px;
	height: 24px;
}

.step-icon {
	display: inline-flex;
}

/* Numéro en pastille d'angle */
.step-number {
	position: absolute;
	top: -7px;
	right: -7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 700;
	background: var(--white);
	color: #7F6956;   /* Story 24.19 : 2,22 → 4,60:1 sur le crème (étape à venir) */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	transition: color 0.3s ease;
}

.step-label {
	font-family: var(--font-family-heading);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text-color);
	text-align: center;
	line-height: 1.15;
	letter-spacing: 0.2px;
	transition: color 0.3s ease;
}

/* Étape active */
.step-item.active .step-badge {
	/* ⚠️ Story 24.19 : l'extrémité CLAIRE d'un dégradé décide de la lisibilité. Avec le rose pâle,
	   l'icône blanche du badge tombait à 2,11:1. Les deux bornes restent dans la plage lisible. */
	background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
	color: var(--white);
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 8px 18px rgba(91, 126, 140, 0.32);
}

.step-item.active .step-number {
	color: var(--primary-color);
}

.step-item.active .step-label {
	color: var(--primary-color);
}

/* Étape complétée */
.step-item.completed .step-badge {
	background: var(--action-color);   /* Story 24.19 : le pâle portait une icône blanche à 2,11:1 */
	color: var(--white);
}

.step-item.completed .step-number {
	/* Story 24.19 : le rose PÂLE en texte donnait 2,11:1 — illisible. Le rose accessible le
	   remplace dans tous ses rôles de texte ; il garde ses rôles de décor. */
	color: var(--action-color);
}

.step-item.completed .step-label {
	color: var(--action-color);   /* Story 24.19 : idem, le pâle ne porte plus de texte */
}

/* Flèche de progression entre les étapes */
.step-connector {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-top: 14px;
	color: #d8cfc6;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-connector svg {
	width: 22px;
	height: 22px;
}

/* Navigation entre étapes */
.step-navigation {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
	padding-top: var(--spacing-lg);
	border-top: 1px solid #eee;
	flex-wrap: wrap;
	/* Story 20.2 : barre d'action FIXE en bas de l'écran (toujours atteignable sans scroller
	   toute la liste). Fond opaque (le contenu passe dessous) + ombre pour se détacher. */
	position: sticky;
	bottom: 0;
	z-index: 20;
	background: var(--white);
	padding-bottom: var(--spacing-md);
	box-shadow: 0 -8px 18px -10px rgba(0, 0, 0, 0.18);
}

.step-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: var(--spacing-sm) var(--spacing-lg);
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
	white-space: nowrap;
}

/* Bouton secondaire (Retour) */
.btn-secondary {
	background: transparent;
	color: var(--text-color);
	border: 2px solid #ddd !important;
}

.btn-secondary:hover {
	border-color: var(--primary-color) !important;
	color: var(--primary-color);
}

/* Bouton lien discret (Passer cette étape) */
.btn-link {
	background: transparent;
	color: #888;
	border: none !important;
	font-weight: 500;
	font-size: 0.875rem;
	padding-left: 0;
	margin-left: auto;
}

.btn-link:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

#next-step-btn {
	margin-left: auto;
}

#next-step-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

#step-3-content {
	animation: fadeInDown 0.35s ease;
}

@media (max-width: 479.98px) {
	.configurateur-steps-indicator {
		gap: 2px;
	}

	.step-item {
		flex-basis: 88px;
		gap: 5px;
	}

	.step-badge {
		width: 46px;
		height: 46px;
		border-radius: 14px;
	}

	.step-badge svg {
		width: 22px;
		height: 22px;
	}

	.step-number {
		top: -5px;
		right: -5px;
		width: 18px;
		height: 18px;
		font-size: 0.66rem;
	}

	.step-label {
		font-size: 0.82rem;
	}

		.step-connector {
		margin-top: 12px;
	}

	.step-connector svg {
		width: 18px;
		height: 18px;
	}

	.step-navigation {
		flex-direction: column;
		align-items: stretch;
	}

	#next-step-btn,
	.btn-secondary {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}

	.btn-link {
		margin-left: 0;
		text-align: center;
	}
}


/* ===== Story 22.2 — arrivée depuis « Personnaliser ce bouquet » ===== */

.prefill-notice {
	margin: 0 auto var(--spacing-lg);
	padding: var(--spacing-md);
	max-width: 100%;
	background: #FDF7F3;
	border: 1px solid #E8D5C8;
	border-left: 4px solid var(--action-color);
	border-radius: var(--radius-md);
}

.prefill-source {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text-primary);
}

/* Fleurs retirées ou réduites : la cliente doit comprendre pourquoi sa composition diffère. */
.prefill-adjusted {
	margin: var(--spacing-sm) 0 0;
	padding-left: 1.15rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--text-secondary);
}

.prefill-adjusted li {
	margin-bottom: 0.15rem;
}

/* Story 22.4 : renvoi vers le contact pour les fleurs en vrac (non vendues en ligne). */
.total-vrac {
	margin: var(--spacing-xs) 0 0;
	padding: 0 var(--spacing-md);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--text-secondary);
	text-align: right;
}

.total-vrac a {
	color: var(--action-color);
	text-decoration: underline;
}


/* ===== Story 22.16 — récapitulatif vivant sur mobile ===== */

/*
 * Trois pièces solidaires, toutes sous 1024 px uniquement :
 *   1. `.recap-bar`   — compteur + total greffés sur la barre d'action déjà collée en bas ;
 *   2. `.recap-sheet` — le détail en superposition, ouvert d'un appui ;
 *   3. `.recap-toast` — la confirmation fugace de chaque ajout.
 * À partir de 1024 px l'aside redevient collante : les trois disparaissent, le desktop est intact.
 */

/*
 * Story 24.3 — la rangée que se partagent la fenêtre vivante et le récapitulatif.
 *
 * Elle reprend exactement la place que la barre occupait seule (pleine largeur, première ligne) :
 * la hauteur de `.step-navigation` ne change donc pas quand la fenêtre apparaît, et la grille ne
 * se décale pas sous le doigt — la contrainte que 22.16 et 22.18 se sont employées à tenir.
 */
.recap-row {
	flex: 0 0 100%;
	order: -1;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	width: 100%;
	margin-bottom: 4px;
}

/*
 * Hauteur figée sur l'état le plus haut (Story 24.10) — ⚠️ UNIQUEMENT quand la fenêtre est là.
 * La barre oscille naturellement entre 2 et 3 lignes selon la longueur de son texte : « Détail »
 * tient sur la ligne de l'info à « 1 tige · 1,90 € » (74 px) mais passe dessous à « Aucune fleur
 * sélectionnée » (99 px) et à « 15 tiges · 40,90 € » (102 px) — mesures à 390 px. Sans ce plancher,
 * la barre monte et descend de quelques pixels au fil de la composition et la grille bouge sous le
 * doigt.
 * Plancher relevé de 104 à 132 px pour la ligne « dont … de composition » (+28 px, mesuré à 360,
 * 390 et 768 px : 132 px vide, à 1 tige comme à 31 tiges).
 * La classe vient du serveur : tant que le drapeau du croquis est baissé, aucune fenêtre n'est
 * rendue, et imposer ce plancher à tout le monde ajouterait ~30 px de vide dans la barre des
 * visiteuses.
 */
.recap-row--with-croquis {
	/* Le BOUQUET est l'élément visuel principal de la barre : ~132 px de côté dès 390 px (122 px à 360 px),
	   au lieu de 96 px. La hauteur de la barre ne change pas (le plancher valait déjà 132 px) : on rend
	   simplement à la fenêtre la place que la barre lui gardait. Sous 1024 px uniquement (au-dessus, la
	   barre est masquée : le croquis vit dans l'aside). */
	--pf-croquis: clamp(120px, 34vw, 132px);
	min-height: var(--pf-croquis);
	align-items: stretch;
}

/* Le récapitulatif épouse la hauteur de la fenêtre (deux cadres de même hauteur, même rayon, même fond),
   et se compacte : l'emplacement réservé sous le total est toujours vide depuis que la confection est
   incluse dans le prix de chaque tige — il ne sert plus à rien et volait ~18 px à la barre. */
.recap-row--with-croquis .recap-bar {
	align-self: stretch;
	align-content: center;
}

.recap-row--with-croquis .recap-bar-split {
	display: none;
}

/* Petits écrans : la fenêtre prend ~120 px, il reste ~170 px au récapitulatif. On le compacte (marges,
   pictogramme décoratif) pour que « 15 tiges · 40,90 € » reste entier, sans troncature. */
@media (max-width: 399.98px) {
	.recap-row--with-croquis .recap-bar {
		padding-left: 10px;
		padding-right: 10px;
	}

	.recap-row--with-croquis .recap-bar-icon {
		display: none;
	}

	.recap-row--with-croquis .recap-bar-count {
		font-size: 0.8125rem;
	}

	.recap-row--with-croquis .recap-bar-total {
		font-size: 1rem;
	}
}

/* Dans la rangée, la barre cède la largeur de la fenêtre et rend son ordre/marge à la rangée. */
.recap-row .recap-bar {
	flex: 1 1 auto;
	order: 0;
	width: auto;
	min-width: 0;
	margin-bottom: 0;
}

/*
 * La fenêtre vivante : le bouquet en miniature, visible PENDANT la composition.
 *
 * Story 24.10 — agrandie de 56 à 96 px : à 56 px, le bouquet ne faisait que 28 px de large (mesuré),
 * trop discret pour l'usage comme pour la vidéo. Coût assumé, mesuré à 390 px : la barre se resserre
 * et « Détail » passe sur sa propre ligne, soit +28 px de hauteur.
 *
 * ⚠️ Elle est RÉSERVÉE, pas retirée du flux : masquée par `visibility` et non par `display`, sa place
 * est prise dès le chargement. Sans ça, son apparition à la première tige ferait grandir la barre
 * sous le doigt — et un simple `min-height` sur la rangée n'y suffirait pas, puisque c'est la
 * LARGEUR reprise à la barre qui la fait passer à la ligne. `visibility: hidden` la sort aussi de
 * l'ordre de tabulation et de l'arbre d'accessibilité, sans qu'on ait à s'en occuper.
 */
.croquis-window {
	flex: 0 0 auto;
	width: var(--pf-croquis, 96px);
	height: var(--pf-croquis, 96px);
	align-self: center;
	padding: 4px;
	border: 1px solid #E8D5C8;
	border-radius: var(--radius-md);
	background: #FDF7F3;
	cursor: pointer;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.25s ease;
}

.croquis-window.is-visible {
	visibility: visible;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.croquis-window {
		transition: none;
	}
}

.croquis-window:hover,
.croquis-window:focus-visible {
	border-color: var(--action-color);
}

.croquis-window:active {
	transform: scale(0.96);
}

.croquis-window-frame {
	display: block;
	width: 100%;
	height: 100%;
}

.croquis-window-frame canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.recap-bar {
	/* Largeur pleine → la barre passe seule au-dessus des boutons, sans casser leur mise en page. */
	flex: 0 0 100%;
	order: -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	width: 100%;
	margin-bottom: 4px;
	padding: 9px var(--spacing-md);
	border: 1px solid #E8D5C8;
	border-radius: var(--radius-md);
	background: #FDF7F3;
	color: var(--text-primary);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.recap-bar:hover:not(:disabled) {
	background: #FBF0E9;
	border-color: var(--action-color);
}

/* Rien de sélectionné : la barre reste en place (pas de saut de mise en page à la 1re fleur)
   mais devient inerte — il n'y a aucun détail à ouvrir. */
.recap-bar:disabled {
	background: var(--white);
	border-color: #EEE;
	cursor: default;
}

.recap-bar-info {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.recap-bar-icon {
	display: flex;
	color: var(--action-color);
}

.recap-bar-icon svg {
	width: 17px;
	height: 17px;
}

.recap-bar-count {
	font-size: 0.875rem;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.recap-bar-total {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--action-color);
	white-space: nowrap;
}

.recap-bar-total::before {
	content: '·';
	margin-right: 6px;
	color: var(--text-secondary);
	font-weight: 400;
}

.recap-bar-total[hidden] {
	display: none;
}

/* « dont 0,40 € de composition » sous le total (sans le taux, issue #77). Toujours présente (vide =
   invisible) et jamais sur deux lignes : la barre collante garde sa hauteur d'un bout à l'autre de la composition. */
.recap-bar-split {
	flex: 0 0 100%;
	order: 1;
	min-width: 0;
	margin-top: 3px;
	font-size: 0.75rem;
	line-height: 1.3;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.recap-bar-split.is-empty {
	visibility: hidden;
}

/* Pulsation du total à chaque changement : le prix qui bouge est le signal que l'ajout est pris. */
.recap-bar-total.is-bumped {
	animation: recapBump 0.45s ease;
}

@keyframes recapBump {
	0% { transform: scale(1); }
	35% { transform: scale(1.16); }
	100% { transform: scale(1); }
}

.recap-bar-cta {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--action-color);
	white-space: nowrap;
}

.recap-bar:disabled .recap-bar-cta {
	visibility: hidden;
}

.recap-bar-chevron {
	transition: transform 0.2s ease;
}

.recap-bar[aria-expanded="true"] .recap-bar-chevron {
	transform: rotate(180deg);
}

/* --- Confirmation d'ajout ------------------------------------------------ */

/* Ancrée sur `.step-navigation` (collante) : elle flotte donc toujours juste au-dessus
   de la barre, sans mesure JS ni position fixe à recalculer. */
.recap-toast {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 6px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 9px var(--spacing-md);
	border-radius: var(--radius-md);
	background: rgba(45, 45, 45, 0.94);
	color: var(--white);
	font-size: 0.875rem;
	box-shadow: var(--shadow-lg);
	animation: recapToastIn 0.22s ease;
	pointer-events: none;
}

.recap-toast[hidden] {
	display: none;
}

.recap-toast-sign {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	color: #9FD5A8;
}

.recap-toast.is-removal .recap-toast-sign {
	color: #F0A9A9;
}

.recap-toast-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.recap-toast-qty {
	flex: 0 0 auto;
	font-weight: 600;
	opacity: 0.85;
}

/* Le prix de la tige ajoutée, composition comprise, sur sa propre ligne. */
.recap-toast {
	flex-wrap: wrap;
}

.recap-toast-price {
	flex: 0 0 100%;
	font-size: 0.75rem;
	opacity: 0.85;
}

@keyframes recapToastIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* --- Feuille de détail --------------------------------------------------- */

.recap-sheet {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: flex-end;
}

.recap-sheet[hidden] {
	display: none;
}

.recap-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(45, 45, 45, 0.45);
	animation: recapFadeIn 0.2s ease;
}

.recap-sheet-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 82vh;
	padding: var(--spacing-sm) var(--spacing-lg) calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
	background: var(--white);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
	animation: recapSheetIn 0.26s ease;
}

.recap-sheet-handle {
	display: block;
	width: 42px;
	height: 4px;
	margin: 0 auto var(--spacing-sm);
	border-radius: 2px;
	background: #DDD;
}

.recap-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding-bottom: var(--spacing-sm);
	border-bottom: 2px solid #F2EDE8;
}

.recap-sheet-head h2 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.recap-sheet-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: -8px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	cursor: pointer;
}

.recap-sheet-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--spacing-md) 0;
}

/* Une ligne de composition, une seule mise en page — aside desktop ET feuille mobile, puisque
   les deux sortent de la même fabrique (`renderCompositionInto`) : nom · quantité · prix · retirer.
   `display: contents` sort le bouton « retirer » de son entête pour le renvoyer en fin de ligne,
   sans imposer un second markup au JS. Avant, il retombait sous le nom, à gauche, dans le vide. */
.selected-flower-item {
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-md);
}

.selected-flower-header {
	display: contents;
}

.selected-flower-name {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.35;
}

.selected-flower-details {
	order: 2;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex: 0 0 auto;
}

.selected-flower-qty {
	margin: 0;
	min-width: 0;
}

.selected-flower-price {
	min-width: 58px;
}

/* Bouton franchement identifiable et atteignable au doigt : 44 px, la cible tactile minimale
   déjà imposée aux boutons du thème (style.css). `flex: 0 0` est indispensable, sinon un nom
   long comprime la largeur et le cercle devient un ovale. */
.remove-flower-btn {
	order: 3;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: -6px 0;
	border-radius: 50%;
	background: #F7F1EC;
	font-size: 1.2rem;
}

/* Le panneau collant (≈300 px utiles) est trop étroit pour tenir sur une seule ligne : « Germini-
   classique-bicolore rose et blanc cœur clair » y descendrait à un mot par ligne. On y donne donc
   sa ligne au nom, et on renvoie quantité · prix · retirer dessous, alignés à droite. La feuille
   mobile, elle, a la largeur pour rester à plat. */
.selected-flowers .selected-flower-item {
	flex-wrap: wrap;
	row-gap: var(--spacing-xs);
}

.selected-flowers .selected-flower-name {
	flex: 1 1 100%;
}

.selected-flowers .selected-flower-details {
	margin-left: auto;
}

.selected-flowers .remove-flower-btn {
	flex-basis: 32px;
	width: 32px;
	height: 32px;
	min-height: 0;
	margin: 0;
	font-size: 1.05rem;
}

.recap-sheet-foot {
	flex: 0 0 auto;
	padding-top: var(--spacing-md);
	border-top: 2px solid #F2EDE8;
}

.recap-sheet-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm) var(--spacing-md);
	background: linear-gradient(135deg, var(--background) 0%, #F5F5F5 100%);
	border-radius: var(--radius-md);
}

.recap-sheet-total-label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.recap-sheet-total {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--action-color);
}

.recap-sheet-continue {
	width: 100%;
	margin-top: var(--spacing-md);
	padding: var(--spacing-md);
	border: none;
	border-radius: var(--radius-md);
	background: var(--primary-color);
	color: var(--white);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.recap-sheet-continue:hover {
	background: var(--primary-hover);
}

@keyframes recapFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes recapSheetIn {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

/* Confort iPhone : la barre collante ne passe plus sous la barre d'accueil de Safari. */
.step-navigation {
	padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
	.recap-toast,
	.recap-sheet-backdrop,
	.recap-sheet-panel,
	.recap-bar-total.is-bumped {
		animation: none;
	}
}

/*
 * Story 24.3 — le croquis en grand, sur le patron de l'atelier de la 23.14 : aucun habillage de
 * page, une colonne pleine hauteur, le dessin prend toute la place restante.
 *
 * ⚠️ Ici la hauteur se prend en `100%`, PAS en `100dvh` (contrairement à la 23.14, où la colonne
 * n'était pas en `position: fixed`) : le parent est déjà `fixed; inset: 0`, donc calé sur le
 * viewport de positionnement fixe. Un enfant en `dvh` suivrait, lui, le viewport DYNAMIQUE — les
 * deux divergeraient au fur et à mesure que la barre d'adresse mobile se rétracte, laissant une
 * bande blanche sous le panneau ou un débordement hors de l'écran.
 */
.croquis-fullscreen {
	position: fixed;
	inset: 0;
	/* Au-dessus de l'en-tête collant du site (z-index 1100, style.css) ET de la feuille de détail
	   (1200) : sans ça, l'en-tête recouvre le titre et le bouton de fermeture — constaté en vérif. */
	z-index: 1250;
	background: var(--white);
}

.croquis-fullscreen[hidden] {
	display: none;
}

.croquis-fullscreen-panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--spacing-md);
	gap: var(--spacing-sm);
}

.croquis-fullscreen-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
	flex: none;
}

.croquis-fullscreen-head h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--text-primary);
}

/**
 * ⚠️ Story 24.15 — LA CROIX ÉTAIT BLANCHE SUR BLANC, et c'est l'état de FOCUS qui la faisait
 * disparaître.
 *
 * `openFullscreen()` donne le focus à ce bouton dès l'ouverture (accessibilité, story 24.3).
 * `:focus-visible` repeignait alors le trait en `--action-color` (#C98B8B) sur fond blanc : un
 * contraste de 2,6:1, sous le minimum de 3:1 exigé pour un élément d'interface. L'état censé
 * rendre le bouton repérable le rendait invisible — Alexis n'a pas trouvé comment revenir aux
 * étapes du configurateur.
 *
 * Le repos porte donc un vrai contraste (trait sombre sur fond neutre), et le focus AJOUTE un
 * anneau au lieu d'éclaircir le trait.
 */
.croquis-fullscreen-close {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* ⚠️ LARGEUR EXPLICITE, pas seulement un `min-width` : une règle globale du thème élargit les
	   boutons sur téléphone, et celui-ci s'étalait alors sur 360 px en débordant de l'écran
	   (mesuré : bord droit à 453 px pour un écran de 390). Le `width` fixe reprend la main ;
	   il repasse en `auto` dès que le libellé s'affiche. */
	width: 44px;
	height: 44px;
	padding: 0;
	flex: none;
	font-size: 0.85rem;
	font-weight: 600;
	border: 1px solid #C9C1B8;
	border-radius: 999px;
	background: var(--background-card, #FDF8F6);
	color: var(--text-primary);
	cursor: pointer;
}

.croquis-fullscreen-close:hover {
	border-color: var(--text-primary);
	background: #FFFFFF;
	color: var(--text-primary);
}

.croquis-fullscreen-close:focus-visible {
	color: var(--text-primary);
	outline: 2px solid var(--action-color, #A25858);
	outline-offset: 2px;
}

/* Sur un écran étroit, l'icône suffit : le libellé prendrait la place du titre. */
.croquis-fullscreen-close-label {
	display: none;
}

@media (min-width: 560px) {
	.croquis-fullscreen-close {
		width: auto;
		min-width: 44px;
		padding: 0 16px;
	}

	.croquis-fullscreen-close-label {
		display: inline;
	}
}

/* Le croquis prend toute la hauteur restante. Il reste carré (le bouquet est rond) : sur un écran
   de 390 px il plafonne donc à 390 px de côté — limite physique, pas un défaut de mise en page. */
.croquis-fullscreen-stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	/* Story 24.4 : repère pour la bulle et le message. Ils sont en `position:absolute`, donc hors
	   du flux : le centrage du canvas n'en est pas dérangé. */
	position: relative;
}

/* --- Story 24.4 — la manipulation au doigt --------------------------------------------------
   ⚠️ `touch-action: none` est INDISPENSABLE et son absence est silencieuse : sans lui, le
   navigateur interprète le glissement comme un défilement ou un pincement, les `pointermove`
   cessent d'arriver, et la fleur ne suit plus le doigt sans qu'aucune erreur ne soit levée.
   Uniquement là où l'on manipule : dans la vignette de 96 px, le geste normal reste le
   défilement de la page. */
.configurateur-croquis-holder canvas,
.croquis-fullscreen-stage canvas {
	touch-action: none;
	cursor: grab;
}

.configurateur-croquis-holder canvas:active,
.croquis-fullscreen-stage canvas:active {
	cursor: grabbing;
}

/* La bulle d'actions, posée contre la tige sélectionnée. `left`/`top` sont écrits par le JS ;
   la translation la centre sur ce point et la rabat au-dessus (ou en dessous) de la fleur. */
.croquis-tools {
	display: flex;
	gap: 2px;
	padding: 4px;
	background: #FFFFFF;
	border: 1px solid #D9D2C9;
	border-radius: var(--radius-md);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
	white-space: nowrap;
}

.croquis-tools button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 38px;
	padding: 0 6px;
	line-height: 1;
	color: var(--text-primary);
	background: transparent;
	border: 0;
	border-radius: var(--radius-sm, 6px);
	cursor: pointer;
}

.croquis-tools button:hover,
.croquis-tools button:focus-visible {
	background: var(--background-card, #FDF8F6);
}

.croquis-tools button.is-danger {
	color: #B3261E;
}

/* Le message éphémère : mode d'emploi à l'ouverture, conseil de Lindsay après le premier geste.
   Posé EN BAS du croquis, là où il ne recouvre pas le bouquet qu'il commente. */
/* ⚠️ Rayon MODÉRÉ, pas une pastille : dans l'aside de 298 px le texte passe sur quatre ou cinq
   lignes, et un `border-radius: 999px` transforme alors le message en grosse bulle ronde qui
   recouvre le bouquet qu'il commente. Constaté à l'écran, corrigé. */
.croquis-hint {
	position: absolute;
	z-index: 3;
	left: 8px;
	right: 8px;
	bottom: 8px;
	margin: 0;
	padding: 8px 12px;
	font-size: 0.8rem;
	line-height: 1.35;
	text-align: center;
	color: #FFFFFF;
	background: rgba(38, 34, 30, 0.90);
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
	pointer-events: none; /* il ne doit jamais intercepter un geste destiné au croquis */
}

/* En plein écran il y a de la place : on le recentre sans l'étirer d'un bord à l'autre. */
.croquis-fullscreen-stage .croquis-hint {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: max-content;
	max-width: min(86%, 420px);
}

.croquis-hint.is-visible {
	opacity: 1;
	visibility: visible;
}

/* « Réorganiser » : dans l'en-tête du plein écran, il ne concerne pas une tige mais tout le
   bouquet, et reste atteignable même quand rien n'est sélectionné. */
/* « Réorganiser » : en bas du panneau plein écran. ⚠️ Il était d'abord dans l'en-tête ; à 390 px,
   titre + deux boutons ne tiennent pas sur une ligne et « Le croquis de votre bouquet » s'écrasait
   sur cinq lignes (mesuré). En bas, il ne dispute la place à personne. */
.croquis-fullscreen-actions {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	padding-top: var(--spacing-xs, 6px);
}

.croquis-reflow {
	padding: 9px 18px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--text-primary);
	background: var(--background-card, #FDF8F6);
	border: 1px solid #D9D2C9;
	border-radius: 999px;
	cursor: pointer;
}

.croquis-reflow:hover,
.croquis-reflow:focus-visible {
	border-color: var(--primary-color, #C8956C);
}

@media (prefers-reduced-motion: reduce) {
	.croquis-hint {
		transition: none;
	}
}

/*
 * Le cadre du canvas remplit la place disponible (il n'est donc pas carré), et `object-fit` se
 * charge de dessiner le bouquet CARRÉ et centré dedans.
 * ⚠️ Ne pas tenter de rendre le CADRE carré avec `aspect-ratio` + `height:100%` : la largeur se
 * déduirait de la hauteur puis serait rognée par `max-width`, sans que la hauteur suive — mesuré,
 * ça donne un croquis étiré (360 × 760 sur un écran de 390). `object-fit` n'a pas ce défaut, et
 * évite au passage de dépendre de la taille interne du canvas, qui change à chaque déménagement.
 */
.croquis-fullscreen-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Le fond ne défile pas pendant qu'on contemple le croquis. */
body.croquis-fullscreen-open {
	overflow: hidden;
}

/* Desktop : l'aside collante fait déjà le travail — on ne change rien à l'existant. */
@media (min-width: 1024px) {
	.recap-bar,
	.recap-row,
	.croquis-window,
	.recap-toast,
	.recap-sheet {
		display: none !important;
	}

	.step-navigation {
		padding-bottom: var(--spacing-md);
	}
}

/* ===== Story 22.18 — minimum de commande ===== */

/*
 * Le seuil se lit à trois endroits, tous alimentés par la même jauge (`renderMinOrderGauge`) :
 * l'aside du desktop, la barre de récap et la feuille de détail sur mobile. L'écart est affiché en
 * EUROS et non en pourcentage — « Encore 8,10 € » se traduit directement en tiges à ajouter.
 */

/* Repère d'en-tête : une ligne discrète sous l'encart « stock du jour », pas un second encart —
   deux blocs empilés au-dessus du titre repousseraient la grille hors de l'écran sur mobile. */
/* Volontairement PAS en flex : le pictogramme, le texte et le montant en gras sont trois nœuds
   distincts, que flex disposerait en trois colonnes — la phrase se briserait en morceaux. */
.configurateur-min-note {
	display: block;
	max-width: 680px;
	margin: var(--spacing-sm) auto 0;
	font-size: var(--font-size-sm);
	line-height: 1.5;
	color: var(--text-secondary);
	text-align: center;
}

.configurateur-min-note svg {
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 5px;
	vertical-align: -4px;
	color: var(--action-color);
}

.configurateur-min-note strong {
	color: var(--text-primary);
	white-space: nowrap;
}

.min-order-gauge {
	display: block;
	margin: var(--spacing-sm) 0 0;
	padding: 0 var(--spacing-md);
}

.min-order-gauge-track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #EFE4DE;
	overflow: hidden;
}

.min-order-gauge-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--secondary-color), var(--action-color));
	transition: width 0.35s ease, background 0.35s ease;
}

.min-order-gauge-label {
	display: block;
	margin-top: 5px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--text-secondary);
	text-align: right;
}

/* Seuil atteint : la jauge cesse de réclamer et confirme. */
.min-order-gauge.is-reached .min-order-gauge-fill {
	background: var(--success);
}

.min-order-gauge.is-reached .min-order-gauge-label {
	color: var(--success);
	font-weight: 600;
}

.min-order-gauge.is-reached .min-order-gauge-label::before {
	content: '✓ ';
}

/* Variante barre de récap (mobile) : la jauge prend une deuxième ligne, piste et libellé côte à
   côte pour rester dans les ~28 px de haut ajoutés à une barre déjà collante. */
.recap-bar {
	flex-wrap: wrap;
}

.min-order-gauge--compact {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 100%;
	min-width: 0; /* sans lui, la jauge refuse de rétrécir sous la longueur de sa phrase */
	max-width: 100%;
	order: 1;
	margin-top: 7px;
	padding: 0;
}

.min-order-gauge--compact .min-order-gauge-track {
	flex: 1 0 48px; /* la piste garde une longueur lisible : c'est le libellé qui cède la place */
	height: 5px;
}

/* ⚠️ `white-space: nowrap` SEUL était la cause du débordement mobile : la phrase (≈ 85 caractères)
   restait sur une ligne d'environ 600 px, ce minimum remontait par la barre collante jusqu'à la
   colonne de la page, qui s'élargissait à 688 px sur un écran de 390 px. Une seule ligne est
   conservée exprès (la barre est collante : sa hauteur ne doit jamais changer sous le doigt) mais
   le libellé peut maintenant rétrécir (`min-width: 0`) et se termine par « … » s'il manque de place.
   La phrase complète reste lisible dans la jauge du récapitulatif (« Votre composition »). */
.min-order-gauge--compact .min-order-gauge-label {
	flex: 0 1 auto;
	min-width: 0;
	margin-top: 0;
	font-size: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bloqué par le minimum, le bouton PORTE l'information (« Encore 8,10 € pour commander ») : il ne
   doit donc pas être estompé à 50 % comme un bouton mort, sinon le message devient illisible.
   Bordure PLEINE, jamais pointillée : l'encart « Aperçu en image : prochainement » juste au-dessus
   utilise déjà des pointillés, et deux cadres identiques d'affilée se confondent. */
#add-to-cart-btn.is-below-minimum {
	opacity: 1;
	background: #F6EDE8;
	color: var(--text-primary);
	border: 1px solid #E0C7BB;
	font-weight: 600;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.min-order-gauge-fill {
		transition: none;
	}
}

/* ===== Story 22.19 — compléter en un clic ===== */

/*
 * Cartes de proposition affichées sous le bouton bloqué. Elles doivent se lire comme un conseil de
 * fleuriste, pas comme une vitrine : photo discrète, raison en clair, et le total obtenu à droite —
 * la seule chiffre qui répond à « et si je prends ça, je suis débloquée ? ».
 */
.min-order-suggestions {
	margin: calc(-1 * var(--spacing-sm)) 0 var(--spacing-lg);
}

.min-order-suggestions-title {
	margin: 0 0 var(--spacing-sm);
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--text-secondary);
	text-align: center;
}

.min-order-suggestions-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.min-order-suggestion {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	width: 100%;
	/* 56 px de haut au minimum : la cible reste confortable au pouce. */
	min-height: 56px;
	padding: 8px 10px;
	border: 1px solid #EADCD4;
	border-radius: var(--radius-md);
	background: var(--white);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.min-order-suggestion:hover,
.min-order-suggestion:focus-visible {
	border-color: var(--action-color);
	background: #FDF7F3;
	transform: translateY(-1px);
}

.min-order-suggestion-thumb {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.min-order-suggestion-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Certains noms d'extras sont à rallonge (« Emballage individuel environ 80cm transparent/cœur
   rouge ») : deux lignes au maximum, sinon une seule carte occupe tout l'écran. */
.min-order-suggestion-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.3;
}

.min-order-suggestion-reason {
	font-size: 0.75rem;
	color: var(--text-secondary);
	line-height: 1.3;
}

/* « au total » sous le montant : sans ce mot, le chiffre de droite se lit comme le prix de l'ajout
   — deux lectures possibles pour le seul chiffre qui doit être limpide. */
.min-order-suggestion-total {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--action-color);
	white-space: nowrap;
	line-height: 1.2;
}

.min-order-suggestion-total-label {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.min-order-suggestion {
		transition: none;
	}

	.min-order-suggestion:hover,
	.min-order-suggestion:focus-visible {
		transform: none;
	}
}

/* Story 24.5 — « Réorganiser » sous le croquis de l'aside (ordinateur). Le croquis y est
   manipulable depuis la 24.4 : sans ce bouton, on pouvait épingler sans jamais pouvoir revenir
   en arrière. Masqué sous 1024 px, où le croquis vit dans la vignette et le plein écran. */
.croquis-aside-actions {
	display: flex;
	justify-content: center;
	margin-bottom: var(--spacing-lg);
}

@media (max-width: 1023.98px) {
	.croquis-aside-actions {
		display: none;
	}
}

/* --- Story 24.6 — partager son croquis ------------------------------------------------------ */
.croquis-share {
	padding: 9px 18px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	color: #FFFFFF;
	background: var(--primary-color, #C8956C);
	border: 1px solid var(--primary-color, #C8956C);
	border-radius: 999px;
	cursor: pointer;
}

.croquis-share:hover,
.croquis-share:focus-visible {
	filter: brightness(0.94);
}

/* Dans le plein écran, les deux actions partagent la ligne sans jamais déborder d'un téléphone. */
.croquis-fullscreen-actions {
	flex-wrap: wrap;
	gap: var(--spacing-sm, 8px);
}

.croquis-share-block {
	margin-bottom: var(--spacing-md, 12px);
	text-align: center;
}

/* Révélé seulement sur le chemin « ordinateur » : sur téléphone, le partage natif prend la main
   et ce bloc n'a pas lieu d'être. */
.croquis-share-result {
	margin-top: var(--spacing-sm, 8px);
	padding: var(--spacing-md, 12px);
	background: var(--background-card, #FDF8F6);
	border: 1px solid #E0E0E0;
	border-radius: var(--radius-md);
	text-align: left;
}

.croquis-share-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-secondary, #6B6157);
}

.croquis-share-row {
	display: flex;
	gap: 8px;
}

/* `min-width: 0` : sans lui, un champ en flex refuse de se réduire sous sa largeur par défaut
   et pousse le bouton « Copier » hors de l'écran sur un téléphone. */
.croquis-share-url {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	font-size: 0.8rem;
	color: var(--text-primary);
	background: #FFFFFF;
	border: 1px solid #D9D2C9;
	border-radius: var(--radius-sm, 6px);
}

/* ⚠️ Story 24.17 — `width: auto` N'EST PAS DÉCORATIF, il contredit une règle globale du thème :
   `@media (max-width: 480px) { button { width: 100% } }` (style.css). Sans lui, « Copier »
   réclamait 100 % de la rangée et, étant en `flex: none`, ne la rendait pas : le champ de l'URL
   se retrouvait écrasé à 22 px. Alexis, terrain : « à côté du bouton copier il y a un autre
   bouton que je ne peux pas décrire car c'est tout petit » — ce n'était pas un bouton, c'était
   le champ. TROISIÈME fois que cette règle globale mord (voir aussi la croix de la 24.15). */
.croquis-share-copy {
	flex: none;
	width: auto;
	padding: 8px 14px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text-primary);
	background: #FFFFFF;
	border: 1px solid #D9D2C9;
	border-radius: var(--radius-sm, 6px);
	cursor: pointer;
}

.croquis-share-state {
	margin: 8px 0 0;
	font-size: 0.8rem;
	color: var(--text-secondary, #6B6157);
}

/* --- Story 24.11 (review terrain) ----------------------------------------------------------- */

.croquis-fly {
	position: fixed;
	z-index: 1400;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--primary-color, #C8956C);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	animation: croquis-fly 720ms cubic-bezier(0.4, 0.1, 0.3, 1) forwards;
}

@keyframes croquis-fly {
	0%   { transform: translate(0, 0) scale(1);      opacity: 0; }
	12%  { opacity: 1; }
	70%  { transform: translate(calc(var(--dx) * 0.82), calc(var(--dy) * 0.7)) scale(0.9); opacity: 1; }
	100% { transform: translate(var(--dx), var(--dy)) scale(0.35); opacity: 0; }
}

/* Le réglage d'accessibilité ne se contourne pas parce que l'effet est joli (leçon 24.5) : le JS
   ne crée même pas la tache, cette règle n'est qu'une seconde barrière. */
@media (prefers-reduced-motion: reduce) {
	.croquis-fly {
		display: none;
	}
}

/* La promesse qui accompagne une composition ajustée au stock (Story 24.11). Elle porte une
   décision commerciale : elle doit se lire, pas se deviner dans une note de bas de page. */
.prefill-promise {
	margin: var(--spacing-sm, 8px) 0 0;
	padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--text-primary);
	background: var(--background-card, #FDF8F6);
	border-left: 3px solid var(--primary-color, #C8956C);
	border-radius: var(--radius-sm, 6px);
}

/* --- Story 24.12 (2e review terrain) -------------------------------------------------------- */

/* L'indication qui dit quoi faire du croquis, juste au-dessus de « Suivant ».
   La pastille de la 24.11 était en `position: absolute` dans un parent NON POSITIONNÉ : elle
   s'était échappée sous le bouton « Suivant », à 843 px au lieu de 670. Ici, elle est dans le
   flux — elle ne peut plus fuir. PERMANENTE : une ligne qui apparaît et disparaît changerait la
   hauteur de la barre collante et décalerait la grille sous le doigt (22.16, puis 24.10). */
.croquis-nudge {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 7px;
	/* ⚠️ HAUTEUR FIGÉE. Mesuré : avec un texte plus long, la ligne passait de 16,9 à 32,4 px selon
	   la largeur disponible — et la barre collante grandissait de 15 px sous le doigt, exactement
	   ce que la 22.16 puis la 24.10 ont verrouillé. Un texte court ET une hauteur fixe : deux
	   garde-fous, parce qu'une traduction ou un téléphone plus étroit remettraient le premier en
	   cause. */
	height: 18px;
	overflow: hidden;
	margin: 0 0 var(--spacing-sm, 8px);
	font-size: 0.78rem;
	line-height: 18px;
	white-space: nowrap;
	color: var(--text-secondary, #6B6157);
}

/* La flèche pointe vers la fenêtre vivante, qui est juste au-dessus à gauche. */
.croquis-nudge-arrow {
	flex: none;
	font-size: 1rem;
	line-height: 1;
	color: var(--primary-color, #C8956C);
}

@media (min-width: 1024px) {
	/* Sur ordinateur, le croquis est déjà à l'écran dans la colonne de droite : l'indication de la
	   barre collante n'a plus d'objet (la barre elle-même est masquée). */
	.croquis-nudge {
		display: none;
	}
}

/* L'emplacement de la barre d'outils, au-dessus du dessin. Sa hauteur est réservée EN PERMANENCE :
   la barre apparaît et disparaît sans que le croquis ne bouge d'un pixel sous le doigt. */
.croquis-tools-slot {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 46px;
	flex: 0 0 auto;
}

/* Sur ordinateur, l'emplacement ne prend sa place que lorsque le croquis est manipulable —
   inutile de réserver 46 px sous une colonne qui n'a pas de barre collante à protéger. */
@media (max-width: 1023.98px) {
	#croquis-tools-slot-aside {
		display: none;
	}
}

/* Le plein écran du croquis passe SOUS la barre d'administration de WordPress (z-index 99999),
   qui lui mangeait son en-tête — titre à moitié caché, bouton de fermeture à moitié couvert.
   Invisible pour la clientèle (pas de barre d'admin sans compte), mais Alexis et Lindsay
   travaillent connectés : c'est exactement dans cet état qu'ils relisent le croquis.
   Hauteurs imposées par WordPress : 46 px sous 783 px de large, 32 px au-delà. */
body.admin-bar .croquis-fullscreen {
	top: 46px;
}

@media screen and (min-width: 783px) {
	body.admin-bar .croquis-fullscreen {
		top: 32px;
	}
}

/* --- Story 24.13 (3e review terrain) -------------------------------------------------------- */

/* « Retour » et « Passer » sur une seule ligne. À l'étape 2, trois boutons empilés faisaient une
   barre collante bien plus haute qu'à l'étape 1 : l'étape s'ouvrait sur les conseils de Lindsay
   et la grille des extras n'était plus à l'écran. */
.step-nav-secondary {
	display: flex;
	gap: var(--spacing-sm, 8px);
	margin-bottom: var(--spacing-sm, 8px);
}

.step-nav-secondary .step-nav-btn {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	white-space: nowrap;
}

/* Le croquis du récapitulatif (étape 3) : c'est la DERNIÈRE chance de modifier avant le panier.
   Un bouton, pas une image décorative — le toucher ouvre le plein écran. */
/* Story 24.17 : un simple cadre, plus un bouton — un appui sur le dessin ne doit RIEN déclencher.
   Le geste de modification a son propre bouton, nommé, juste en dessous. */
.croquis-step3 {
	display: block;
	width: 100%;
	margin: 0 0 var(--spacing-md, 12px);
	text-align: center;
}

.croquis-step3-stage {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	background: var(--background);
	border: 1px solid #E0E0E0;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.croquis-step3-stage canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* ⭐ Story 24.17 — le geste porte enfin son nom. « Touchez le croquis pour le modifier »
   demandait un geste QUI BLOQUAIT LE DÉFILEMENT ; ici on nomme l'action et on la confie à une
   cible franche de 44 px de haut (le minimum tactile retenu partout ailleurs dans le thème). */
.croquis-step3-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 10px;
	padding: 11px 22px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary);
	background: var(--background-card, #FDF8F6);
	border: 1px solid #D9D2C9;
	border-radius: 999px;
	cursor: pointer;
}

.croquis-step3-edit:hover,
.croquis-step3-edit:focus-visible {
	border-color: var(--text-primary);
}

.croquis-step3-edit-icon {
	flex: none;
}

/* À l'étape 3, la vignette et son invitation n'ont plus d'objet : le croquis est dans la page,
   en grand, juste au-dessus de la case à cocher. */
#step-navigation.is-step3 .croquis-window,
#step-navigation.is-step3 .croquis-nudge {
	display: none;
}

#step-navigation.is-step3 .recap-row--with-croquis {
	min-height: 0;
}

/* Sur ordinateur, le croquis vit dans la colonne de droite à toutes les étapes : le doubler dans
   le récapitulatif n'apporterait rien et volerait le canvas à l'aside. */
@media (min-width: 1024px) {
	.croquis-step3 {
		display: none;
	}
}

/* --- Story 24.14 (4e review terrain) -------------------------------------------------------- */

/* ⚠️ LE CROQUIS DE L'ASIDE EST BORNÉ. À l'étape 3 la colonne de gauche disparaît, la grille se
   replie et l'aside passe de 330 à 820 px — le croquis, carré, atteignait alors 740 × 740 px
   (860 × 860 sur un écran de 1512). Il débordait de la fenêtre et repoussait tout le reste sous
   la ligne de flottaison : « cela force le client à faire un scroll pour aller voir ».
   Mesuré, puis borné. La taille des étapes 1 et 2 (300 px) n'est pas affectée. */
.configurateur-croquis-holder {
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}

.croquis-aside-actions {
	gap: var(--spacing-sm, 8px);
}

.croquis-enlarge {
	padding: 9px 18px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	color: #FFFFFF;
	background: var(--primary-color, #C8956C);
	border: 1px solid var(--primary-color, #C8956C);
	border-radius: 999px;
	cursor: pointer;
}

.croquis-enlarge:hover,
.croquis-enlarge:focus-visible {
	filter: brightness(0.94);
}

/* La phrase sous le croquis suit la même largeur que lui : centrée, elle ne s'étale pas sur
   toute la colonne quand l'aside s'élargit. */
.configurateur-croquis-holder + .croquis-disclaimer {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

/* Story 24.16 — « Enregistrer l'image », à côté de « Partager ». Deux intentions différentes :
   partager met un LIEN cliquable devant la destinataire (avec son aperçu), enregistrer donne le
   fichier brut pour l'impression ou l'album photo. Secondaire, donc en contour. */
.croquis-download {
	padding: 9px 18px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--text-primary);
	background: var(--background-card, #FDF8F6);
	border: 1px solid #D9D2C9;
	border-radius: 999px;
	cursor: pointer;
}

.croquis-download:hover,
.croquis-download:focus-visible {
	border-color: var(--text-primary);
}

.croquis-share-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-sm, 8px);
}

.croquis-share-block .croquis-share-result {
	flex: 1 1 100%;
}

/* --- Story 24.18 : la fleur qui tourne ------------------------------------------------------ */

/* ⭐ Alexis : « on se demande s'il se passe quelque chose ». Ce n'est pas une décoration, c'est
   l'accusé de réception du geste : sans lui, la cliente retouche le bouton, croit avoir raté son
   appui, ou quitte la page. La 24.18 supprime d'abord 90 % de l'attente (voir inc/configurateur.php),
   celle-ci montre ce qui reste — surtout la montée des 739 Ko depuis un téléphone. */
.pf-attente {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ⚠️⚠️ DÉFAUT INTRODUIT PAR CETTE STORY, PUIS CORRIGÉ — le même piège que la 24.15.
   Le bouton est mis en `disabled` pendant l'attente (pour qu'un second appui n'ajoute pas le
   bouquet deux fois), et TROIS règles du thème estompent alors tout bouton désactivé à
   `opacity: 0.5` (style.css:278, configurateur.css:1047 et 1064). Mesuré : le contraste du
   libellé tombait de 2,78:1 à ~1,6:1 — « Ajout en cours… » et la fleur devenaient illisibles au
   moment précis où ils doivent rassurer. L'état censé informer effaçait l'information.
   `aria-busy` est le bon sélecteur : il ne vaut QUE pendant l'attente, jamais sur un bouton
   réellement désactivé (qui, lui, doit bien être estompé). */
.btn-action[aria-busy="true"],
.btn-primary[aria-busy="true"],
button[aria-busy="true"] {
	opacity: 1;
	cursor: progress;
}

.pf-attente-fleur {
	flex: none;
	width: 18px;
	height: 18px;
	transform-origin: 50% 50%;
	animation: pf-tourne 1.1s linear infinite;
}

@keyframes pf-tourne {
	to { transform: rotate(360deg); }
}

/* ⚠️ « Mouvement réduit » ne veut pas dire « aucun retour » — c'est la leçon de la 24.5, où
   remplacer une animation par un placement instantané avait supprimé TOUT signal. La fleur cesse
   de tourner, elle ne disparaît pas, et le texte qui l'accompagne porte l'information. */
@media (prefers-reduced-motion: reduce) {
	.pf-attente-fleur {
		animation: none;
	}
}

/* La grille des fleurs au démarrage : la fleur rejoint le texte déjà présent. */
.loading-spinner .pf-attente {
	flex-direction: column;
	gap: 10px;
}

.loading-spinner .pf-attente-fleur {
	width: 32px;
	height: 32px;
	color: var(--primary-color, #51727E);
}

/* ===========================================================================
   Préouverture (build 7) — recherche, disponibilité, croquis en vignette
   =========================================================================== */

/* Le croquis tient lieu de photo : fond noir, entier (contain), jamais étiré ni recadré. */
.flower-thumb.is-sprite {
	background: #000;
	object-fit: contain;
	padding: 6%;
	box-sizing: border-box;
	filter: none;
}

.flower-lightbox-img.is-sprite {
	background: #000;
	padding: 24px;
	box-sizing: border-box;
}

.pf-flower-tools {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: var(--spacing-lg);
}

.pf-flower-search {
	width: 100%;
	max-width: 420px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--border-color, #d9cbc4);
	border-radius: 999px;
	font: inherit;
	font-size: 1rem;
	box-sizing: border-box;
}

.pf-avail-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pf-avail-filter__btn {
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--border-color, #d9cbc4);
	border-radius: 999px;
	background: var(--surface, #fff);
	color: var(--text-primary);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
	white-space: nowrap;
}

.pf-avail-filter__btn[hidden] {
	display: none;
}

.pf-avail-filter__btn.is-active,
.pf-avail-filter__btn[aria-pressed="true"] {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white, #fff);
	font-weight: 600;
}

.pf-avail-filter__count {
	opacity: 0.8;
	font-weight: 400;
}

.pf-flower-filter-status {
	margin: 0;
	font-size: 0.85rem;
	color: var(--text-secondary);
}

/* Statut de chaque fleur pour la date, posé SUR la photo : ✓ en stock, ⏱ sur commande,
   🌸 saisonnière / ? à confirmer. La création est libre : une fleur « à confirmer » se pose dans le
   croquis ; son cadre pointillé rappelle que la commande passera par une adaptation. */
.flower-avail-badge {
	position: absolute;
	left: 6px;
	top: 6px;
	max-width: calc(100% - 12px);
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	color: #fff;
	background: #2f7d45;
}

.flower-avail-badge--order,
.flower-avail-badge--later {
	background: #c46f12;
}

.flower-avail-badge--season,
.flower-avail-badge--confirm {
	background: #7a3e6e;
}

.flower-item.is-avail-now {
	box-shadow: inset 0 0 0 1px rgba(47, 125, 69, 0.35);
}

.flower-item.is-to-confirm {
	border-style: dashed;
	border-color: rgba(122, 62, 110, 0.45);
}

.flower-item.is-to-confirm.selected {
	border-style: solid;
}

.flower-stock.to-confirm {
	color: #6b2f60;
	font-weight: 600;
}

/* Vignette Pixel Fleurs (pas de photo ni de croquis) : SVG anthracite + nom de la fleur. */
.flower-thumb.is-placeholder {
	object-fit: cover;
	background: #26262b;
	filter: none;
}

.flower-placeholder-name {
	position: absolute;
	left: 8px;
	right: 8px;
	top: 44%;
	color: #f1e4ec;
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	pointer-events: none;
	overflow-wrap: anywhere;
}

.selected-flower-confirm {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: #6b2f60;
}

.pf-avail-filter__btn--all {
	border-color: var(--primary-color);
	font-weight: 600;
}

.pf-to-confirm-notice {
	margin: 0 0 var(--spacing-sm);
	padding: 10px 12px;
	border-left: 3px solid #7a3e6e;
	border-radius: var(--radius-sm);
	background: #f6eef3;
	color: #4a2443;
	font-size: 0.88rem;
	line-height: 1.4;
}

.pf-to-confirm-notice[hidden],
.pf-adaptation-panel[hidden] {
	display: none;
}

.pf-adaptation-panel {
	margin: var(--spacing-md) 0;
	padding: var(--spacing-md);
	border: 1px solid rgba(122, 62, 110, 0.35);
	border-radius: var(--radius-md);
	background: #fbf6f9;
	color: var(--text-primary);
	text-align: left;
}

.pf-adaptation-panel__title {
	margin: 0 0 6px;
	font-weight: 700;
}

.pf-adaptation-panel__lines {
	margin: 0 0 8px;
	padding-left: 0;
	list-style: none;
}

.pf-adaptation-panel__lines li {
	margin: 2px 0;
	overflow-wrap: anywhere;
}

.pf-adaptation-panel__promise {
	margin: 0 0 12px;
}

.pf-adaptation-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.pf-adaptation-panel__edit {
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid var(--border-color, #d9cbc4);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	cursor: pointer;
}

.pf-adaptation-panel__secondary {
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pf-variety-note {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--text-secondary);
	font-style: italic;
}

.pf-flower-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	margin: var(--spacing-md) 0;
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	background: #f6eef3;
	text-align: center;
}

.pf-flower-more[hidden] {
	display: none;
}

.pf-flower-more__text {
	margin: 0;
	font-weight: 600;
	color: #4a2443;
}

.pf-flower-more__cta {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 16px;
	border-radius: 999px;
	background: #7a3e6e;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.pf-creative-error {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 var(--spacing-sm);
	padding: 10px 12px;
	border-left: 3px solid #c46f12;
	border-radius: var(--radius-sm);
	background: #fdf3e7;
	font-size: 0.88rem;
}

.pf-creative-error p {
	margin: 0;
}

.pf-creative-loading {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--spacing-lg);
	text-align: center;
	color: var(--text-secondary);
}

.pf-price-indicative-note {
	margin: 4px 0 var(--spacing-sm);
	font-size: 0.82rem;
	color: #6b2f60;
}

.pf-price-indicative-note[hidden] {
	display: none;
}

.pf-adaptation-panel__phone {
	margin: 10px 0 0;
	font-size: 0.9rem;
}

.pf-adaptation-panel__phone a {
	font-weight: 600;
	white-space: nowrap;
}

.pf-filter-empty {
	grid-column: 1 / -1;
	padding: var(--spacing-lg);
	text-align: center;
}

.pf-filter-empty__btn {
	margin: 6px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--primary-color);
	border-radius: 999px;
	background: transparent;
	color: var(--primary-color);
	font: inherit;
	cursor: pointer;
}

/* Mention de prix, au plus près du total (et non plus dans l'en-tête, qui doit rester court). */
.pf-price-includes {
	margin: 4px 0 0;
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--text-secondary);
}


/* P1-C — boutons − / + sur chaque ligne du récapitulatif (dernière étape). Cibles de 44 px au doigt (minimum du
   thème), jamais plus étroites : un nom long ne doit pas les écraser (`flex: 0 0`). */
.selected-flower-stepper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.stepper-btn {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #E6DDD5;
	border-radius: 50%;
	background: #F7F1EC;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.stepper-btn:hover:not([disabled]) {
	background: #EFE5DC;
}

.stepper-btn:focus-visible {
	outline: 2px solid var(--primary-color, #8a5a6a);
	outline-offset: 2px;
}

.stepper-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.selected-flower-stepper .selected-flower-qty {
	min-width: 1.6em;
	text-align: center;
	font-weight: 600;
}

/* Le panneau collant étroit : les boutons gardent 44 px, la ligne passe dessous le nom (déjà prévu plus haut). */
.selected-flowers .stepper-btn {
	flex-basis: 44px;
	width: 44px;
	height: 44px;
}