/* ASTEM – Demande de devis
   Styles volontairement sobres : le thème Woodmart habille déjà .button.
   ------------------------------------------------------------------ */

/* Bouton « Demander un devis » ------------------------------------- */

/* Dans les grilles produits : même gabarit que « Choix des options »,
   pleine largeur, texte centré, hauteur régulière. Le bouton hérite déjà
   des classes du thème ; ces règles garantissent le rendu si le thème
   ne les applique pas. */
a.astem-devis-button--loop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	padding: 10px 20px;
	box-sizing: border-box;
	text-align: center;
	line-height: 1.2;
	text-decoration: none;
}

/* Sur la fiche produit et la page de confirmation : gabarit du bouton
   principal « Ajouter au panier ». */
a.astem-devis-button--single {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 32px;
	box-sizing: border-box;
	line-height: 1.2;
	text-decoration: none;
}

.astem-devis-button,
a.astem-devis-button.button,
.woocommerce a.astem-devis-button.button {
	background-color: #0d236a;
	color: #fff;
	border: 1px solid #0d236a;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Au survol, l'inversion garde un contraste élevé : un texte blanc sur
   le vert d'eau serait illisible. */
.astem-devis-button:hover,
.astem-devis-button:focus,
a.astem-devis-button.button:hover,
a.astem-devis-button.button:focus,
.woocommerce a.astem-devis-button.button:hover,
.woocommerce a.astem-devis-button.button:focus {
	background-color: #c7fae9;
	color: #0d236a;
	border-color: #0d236a;
}

.astem-devis-button:focus-visible {
	outline: 2px solid #0d236a;
	outline-offset: 2px;
}

.astem-devis-button.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* Bouton d'envoi du formulaire, même charte */
.astem-devis-submit,
.astem-devis .button.alt {
	background-color: #0d236a;
	color: #fff;
	transition: background-color .2s ease, color .2s ease;
}

.astem-devis-submit:hover,
.astem-devis-submit:focus {
	background-color: #c7fae9;
	color: #0d236a;
}

.astem-devis-price-hidden {
	font-style: italic;
	opacity: .8;
}

.astem-devis-single {
	margin: 1.5em 0;
}

.astem-devis-counter {
	display: inline-flex;
	align-items: center;
	gap: .5em;
}

.astem-devis-count {
	display: inline-block;
	min-width: 1.6em;
	padding: 0 .4em;
	border-radius: 1em;
	background: currentColor;
	color: #fff;
	font-size: .8em;
	line-height: 1.6em;
	text-align: center;
}

.astem-devis-count { color: inherit; }

/* Cartes ----------------------------------------------------------- */

:root {
	--astem-radius: 30px;
	--astem-pad: 30px;
	--astem-shadow: 0 0 10px #2E1FB41A;
	--astem-navy: #0d236a;
	--astem-mint: #c7fae9;
}

.astem-devis-recap,
.astem-devis-form,
.astem-devis-thanks,
.astem-devis-account-item,
.astem-devis-account-empty {
	padding: var(--astem-pad);
	margin-bottom: 30px;
	background: #fff;
	border-radius: var(--astem-radius);
	box-shadow: var(--astem-shadow);
}

.astem-devis-recap h2:first-child,
.astem-devis-form h2:first-child {
	margin-top: 0;
}

/* Titres soulignés ------------------------------------------------- */

/* Reprise du style maison. Les règles sont limitées à .astem-devis pour
   l'emporter sur celles du thème ; la police reste celle définie dans le
   CSS personnalisé du site, qui s'applique par la classe globale. */
.astem-devis .titre-souligne-wrap {
	position: relative;
	display: inline-block;
	overflow: visible;
	margin: 0 0 24px;
}

.astem-devis .titre-souligne {
	position: relative;
	display: inline-block;
	z-index: 2;
	color: var(--astem-navy);
	font-weight: 800;
	font-size: 40px;
	line-height: 1.25;
}

.astem-devis .titre-souligne::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 10px;
	z-index: -1;
	width: calc(100% + 10px);
	height: 15px;
	background: var(--astem-mint);
}

/* Boutons secondaires du récapitulatif ----------------------------- */

.astem-devis .astem-devis-recap button.button,
.astem-devis .astem-devis-recap .button,
.astem-devis .astem-devis-table button.astem-devis-remove {
	background-color: var(--astem-navy);
	color: var(--astem-mint);
	border: 1px solid var(--astem-navy);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.astem-devis .astem-devis-recap button.button:hover,
.astem-devis .astem-devis-recap button.button:focus,
.astem-devis .astem-devis-recap .button:hover,
.astem-devis .astem-devis-recap .button:focus,
.astem-devis .astem-devis-table button.astem-devis-remove:hover,
.astem-devis .astem-devis-table button.astem-devis-remove:focus {
	background-color: var(--astem-mint);
	color: var(--astem-navy);
	border-color: var(--astem-navy);
}

.astem-devis .astem-devis-table button.astem-devis-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 10px;
	font-size: 20px;
	line-height: 1;
	opacity: 1;
	cursor: pointer;
}

/* Récapitulatif ---------------------------------------------------- */

.astem-devis-table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

.astem-devis-table th,
.astem-devis-table td {
	padding: .75em;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	text-align: left;
	vertical-align: middle;
}

.astem-devis-table .astem-thumb {
	width: 72px;
}

.astem-devis-table img {
	display: block;
	height: auto;
	border-radius: 4px;
}

.astem-devis-table input[type="number"] {
	width: 5em;
}

/* Formulaire ------------------------------------------------------- */

.astem-devis-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5em;
}

.astem-devis-grid .astem-full {
	grid-column: 1 / -1;
}

.astem-devis-grid label {
	display: block;
	margin-bottom: .35em;
	font-weight: 600;
}

.astem-devis-grid input[type="text"],
.astem-devis-grid input[type="email"],
.astem-devis-grid input[type="tel"],
.astem-devis-grid textarea {
	width: 100%;
}

.astem-devis-grid .astem-consent label {
	font-weight: 400;
}

.astem-devis-grid .required {
	color: #b32d2e;
}

@media (max-width: 640px) {
	.astem-devis-grid {
		grid-template-columns: 1fr;
	}
}

/* Captcha Prosopo -------------------------------------------------- */

.astem-devis-captcha {
	margin: 0 0 24px;
}

.astem-devis-captcha .procaptcha {
	display: inline-block;
	max-width: 100%;
}

/* Champ leurre anti-spam : masqué sans display:none, que les robots détectent */
.astem-devis-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Messages --------------------------------------------------------- */

.astem-devis-notice,
.astem-devis-error {
	margin-bottom: 1.5em;
	padding: .9em 1.2em;
	border-left: 4px solid;
	border-radius: 3px;
}

.astem-devis-notice {
	border-color: #2a7f4f;
	background: rgba(42, 127, 79, .08);
}

.astem-devis-error {
	border-color: #b32d2e;
	background: rgba(179, 45, 46, .08);
}

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

.astem-devis-toast {
	position: fixed;
	right: 1.5em;
	bottom: 1.5em;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 1em;
	max-width: 22em;
	padding: 1em 1.25em;
	border-radius: 6px;
	background: #1e1e1e;
	color: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s ease, transform .25s ease;
}

.astem-devis-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.astem-devis-toast a {
	color: #fff;
	text-decoration: underline;
	white-space: nowrap;
}

/* Page de confirmation -------------------------------------------- */

.astem-devis-thanks {
	max-width: 640px;
	margin: 2em auto;
	text-align: center;
}

.astem-devis-thanks-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1em;
	border-radius: 50%;
	background: #c7fae9;
	color: #0d236a;
}

.astem-devis-thanks h2 {
	margin-bottom: .6em;
	color: #0d236a;
}

.astem-devis-thanks p {
	margin-bottom: 1.2em;
}

.astem-devis-thanks-account {
	font-size: .92em;
	opacity: .85;
}

.astem-devis-login-hint {
	margin-bottom: 1.5em;
	padding: .8em 1.1em;
	border-radius: 6px;
	background: rgba(13, 35, 106, .05);
	font-size: .92em;
}

/* Mon compte → Demandes de devis ----------------------------------- */

.astem-devis-account-intro {
	margin-bottom: 1.5em;
}

.astem-devis-account-item {
	padding: 0;
	margin-bottom: 16px;
}

.astem-devis-account-item summary {
	display: grid;
	grid-template-columns: 1fr auto auto auto; /* réf. | date | nb | +/− */
	gap: 1.5em;
	align-items: center;
	padding: var(--astem-pad);
	cursor: pointer;
	list-style: none;
}

.astem-devis-account-item summary::-webkit-details-marker {
	display: none;
}

.astem-devis-account-item summary::after {
	content: "+";
	font-size: 1.2em;
	line-height: 1;
	color: #0d236a;
}

.astem-devis-account-item[open] summary::after {
	content: "−";
}

.astem-devis-account-ref {
	font-weight: 600;
	color: #0d236a;
}

.astem-devis-account-date,
.astem-devis-account-count {
	opacity: .75;
	font-size: .92em;
}

.astem-devis-account-detail {
	padding: 0 var(--astem-pad) var(--astem-pad);
	overflow-x: auto;
}

.astem-devis-account-message {
	margin-top: 1em;
	font-size: .92em;
}

@media (max-width: 640px) {
	.astem-devis-account-item summary {
		grid-template-columns: 1fr auto auto; /* réf. | date | +/− */
		gap: 1em;
		padding: 20px;
	}

	.astem-devis-recap,
	.astem-devis-form,
	.astem-devis-thanks,
	.astem-devis-account-empty {
		padding: 20px;
		border-radius: 20px;
	}

	.astem-devis-account-detail {
		padding: 0 20px 20px;
	}

	/* 40 px passeraient sur trois lignes sur un téléphone */
	.astem-devis .titre-souligne {
		font-size: 28px;
	}

	.astem-devis .titre-souligne::after {
		bottom: 6px;
		height: 11px;
	}
	.astem-devis-account-count {
		display: none;
	}
}