/* RDF — Vente en ligne ou sur devis : habillage minimal, le thème fait le reste. */

.rdf-devis-bloc {
	margin: 1.2em 0;
}

.rdf-devis-mention {
	margin: 0 0 .8em;
	font-size: .9em;
	line-height: 1.5;
	opacity: .8;
}

.rdf-devis-btn--loop {
	display: inline-block;
}

.rdf-devis-prix-masque {
	font-weight: 600;
}

/* Dans les grilles Woodmart, le bouton occupe la largeur comme le bouton d'achat natif. */
.wd-product .rdf-devis-btn--loop {
	width: 100%;
	text-align: center;
}

/* ───────────────── Liste « Ma demande de devis » ───────────────── */

.rdf-devis-btn--occupe { opacity: .6; pointer-events: none }
.rdf-devis-btn--dedans { opacity: .92 }
.rdf-devis-btn--dedans .rdf-devis-btn__txt::after { content: " \2713" }

.rdf-devis-voir { margin: .6em 0 0; font-size: .9em }
.rdf-devis-voir a { text-decoration: underline }

/* Compteur d'en-tête */
.rdf-devis-compteur {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}
.rdf-devis-compteur__nombre,
.rdf-devis-bulle__nombre {
	display: inline-grid;
	place-items: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 .35em;
	border-radius: 999px;
	background: currentColor;
	font-size: .78em;
	font-weight: 700;
	line-height: 1;
}
.rdf-devis-compteur__nombre { color: inherit }

/* Bulle flottante, pour ne pas devoir toucher à l'en-tête du thème */
.rdf-devis-bulle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 390;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .85em 1.25em;
	border-radius: 999px;
	background: #333;
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 14px 32px -12px rgba(0, 0, 0, .35);
	text-decoration: none;
}
.rdf-devis-bulle:hover { color: #fff; transform: translateY(-2px) }
.rdf-devis-bulle__nombre { background: rgba(255, 255, 255, .22); color: #fff }

@media (max-width: 768px) {
	.rdf-devis-bulle { right: 12px; bottom: 12px; padding: .75em 1.1em }
}

/* Le tableau de la demande */
.rdf-devis-liste__chargement { color: #666; margin: 0 }

.rdf-devis-liste__vide {
	margin: 0 0 2em;
	padding: 2.6em 1.6em;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10px;
	background: #fafafa;
	text-align: center;
}
.rdf-devis-liste__vide-icone {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 1.1em;
	border-radius: 50%;
	background: rgba(0, 0, 0, .05);
	position: relative;
}
.rdf-devis-liste__vide-icone::before,
.rdf-devis-liste__vide-icone::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #8a8a8a;
	transform: translate(-50%, -50%);
	border-radius: 2px;
}
.rdf-devis-liste__vide-icone::before { width: 22px; height: 2px }
.rdf-devis-liste__vide-icone::after { width: 2px; height: 22px }

.rdf-devis-liste__vide-titre {
	margin: 0 0 .4em;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}
.rdf-devis-liste__vide-texte {
	margin: 0 auto;
	max-width: 46ch;
	color: #666;
}
.rdf-devis-liste__vide-action { margin: 1.5em 0 0 }

@media (max-width: 600px) {
	.rdf-devis-liste__vide { padding: 2em 1.1em }
	.rdf-devis-liste__vide-titre { font-size: 1.12em }
}

.rdf-devis-liste__table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.2em;
}
.rdf-devis-liste__table th,
.rdf-devis-liste__table td {
	padding: .85em .7em;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
}
.rdf-devis-liste__table thead th {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #666;
	font-weight: 600;
}
.rdf-devis-liste__produit { display: flex; align-items: center; gap: .9em }
.rdf-devis-liste__produit span { display: flex; flex-direction: column; gap: .15em }
.rdf-devis-liste__produit small { color: #777; font-size: .8rem }
.rdf-devis-liste__img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none }

.rdf-devis-liste__qte { white-space: nowrap }
.rdf-devis-liste__qte input { width: 5.5em }
.rdf-devis-liste__unite { margin-left: .4em; color: #666; font-size: .9em }
.rdf-devis-liste__note input { width: 100%; min-width: 9em }

.rdf-devis-retirer {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 50%;
	background: transparent;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	color: #777;
}
.rdf-devis-retirer:hover { border-color: #c0392b; color: #c0392b }

.rdf-devis-liste__actions { margin: 0 0 1.5em }
.rdf-devis-vider {
	border: 0;
	background: none;
	padding: 0;
	color: #777;
	font-size: .9rem;
	text-decoration: underline;
	cursor: pointer;
}
.rdf-devis-vider:hover { color: #c0392b }

@media (max-width: 600px) {
	.rdf-devis-liste__table thead { display: none }
	.rdf-devis-liste__table tr { display: grid; gap: .5em; padding: .9em 0; border-bottom: 1px solid rgba(0, 0, 0, .09) }
	.rdf-devis-liste__table td { border: 0; padding: 0 }
	.rdf-devis-liste__retirer { justify-self: start }
}

/* ── Bouton d'ajout dans les grilles de produits ──────────────────
   Le thème dessine la glyphe depuis la variable --wd-btn-icon, héritée
   par le .wd-action-icon. En la redéfinissant sur notre propre lien, on
   remplace l'icône de panier — trompeuse sur un produit sur devis —
   sans toucher au gabarit du thème.
   Glyphes de la police « woodmart-font » : \f107 coche, \f11a options,
   \f123 panier, \f130 aperçu, \f128 comparer, \f106 favoris,
   \f117 partager, \f116 alerte prix, \f143 ajouter à une liste. */

.rdf-devis-btn--icone { --wd-btn-icon: "\f11a" }

.rdf-devis-btn--icone.rdf-devis-btn--dedans,
.rdf-devis-btn--icone.rdf-devis-btn--ok { --wd-btn-icon: "\f107" }

.rdf-devis-btn--icone.rdf-devis-btn--ok { --wd-action-color: #2e7d32 }

.rdf-devis-btn--icone.rdf-devis-btn--occupe { opacity: .5 }

/* Choix de la declinaison (couleur, kit) sur une fiche vendue sur devis */
.rdf-devis-variantes { display: grid; gap: 12px; margin: 0 0 16px; }
.rdf-devis-variantes__champ { display: grid; gap: 4px; font-weight: 600; font-size: .9em; }
.rdf-devis-variantes__champ select { width: 100%; font-weight: 400; }
.rdf-devis-variantes__msg { margin: 0; color: #b32d2e; font-size: .9em; }
.rdf-devis-variantes__msg[hidden] { display: none; }

/* ───────────── Bandeau de message et reprise de liste ───────────── */

.rdf-devis-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 400;
	max-width: min(34rem, calc(100vw - 32px));
	padding: .9em 1.3em;
	border-radius: 8px;
	background: #222;
	color: #fff;
	font-size: .95rem;
	line-height: 1.45;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .14), 0 16px 36px -14px rgba(0, 0, 0, .4);
	transform: translate(-50%, 12px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
}

.rdf-devis-toast--visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.rdf-devis-toast--erreur {
	background: #8c2f20;
}

@media (prefers-reduced-motion: reduce) {
	.rdf-devis-toast {
		transition: none;
	}
}

/* La pastille flottante occupe le coin : on remonte le bandeau au-dessus. */
@media (max-width: 768px) {
	.rdf-devis-toast {
		bottom: 84px;
	}
}

.rdf-devis-resync {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em .9em;
	margin: .6em 0 0;
	padding: .75em 1em;
	border-inline-start: 3px solid #b8860b;
	border-radius: 0 6px 6px 0;
	background: #fffbef;
	font-size: .9rem;
	line-height: 1.45;
}

.rdf-devis-resync__btn {
	padding: 0;
	border: 0;
	background: none;
	color: #1f4e79;
	font-size: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.rdf-devis-resync__btn:hover {
	text-decoration: none;
}