/* =========================================================================
   Devis express – styles
   ========================================================================= */
:root {
	--de-blue: #1c3e89;
	--de-blue-light: #51b8f9;
	--de-grey: #f1f1f1;
	--de-border: #dfe3ea;
	--de-radius: .75rem;

	--bs-primary: var(--de-blue);
	--bs-primary-rgb: 28, 62, 137;
	--bs-link-color: var(--de-blue);
	--bs-link-color-rgb: 28, 62, 137;
}

body { background: #fff; color: #222; }

.btn-primary {
	--bs-btn-bg: var(--de-blue);
	--bs-btn-border-color: var(--de-blue);
	--bs-btn-hover-bg: #152f69;
	--bs-btn-hover-border-color: #152f69;
	--bs-btn-disabled-bg: var(--de-blue);
	--bs-btn-disabled-border-color: var(--de-blue);
}
.btn-outline-primary {
	--bs-btn-color: var(--de-blue);
	--bs-btn-border-color: var(--de-blue);
	--bs-btn-hover-bg: var(--de-blue);
	--bs-btn-hover-border-color: var(--de-blue);
}

/* --- En-tête / pied ----------------------------------------------------- */
.site-header { padding: 1rem 0; border-bottom: 1px solid var(--de-border); }

.site-footer { background: var(--de-grey); padding: 2.5rem 0; margin-top: 4rem; font-size: .95rem; }
.footer-title { font-weight: 700; text-transform: uppercase; margin-bottom: .5rem; }
.footer-title a { color: inherit; text-decoration: none; }
.social { list-style: none; padding: 0; margin: 0; display: inline-flex; gap: .75rem; }
.social a { color: var(--de-blue); font-size: 1.5rem; }

/* --- Titres ------------------------------------------------------------- */
.page-title { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--de-blue); }

.step-title {
	display: flex; align-items: center; gap: .75rem;
	font-size: 1.15rem; font-weight: 700; margin-bottom: 1.25rem; color: #222;
}
.step-num {
	display: inline-grid; place-items: center;
	width: 2rem; height: 2rem; border-radius: 50%;
	background: var(--de-blue); color: #fff; font-size: .95rem;
}

/* --- Cartes produit ----------------------------------------------------- */
.product-card {
	display: flex; flex-direction: column; height: 100%;
	border: 2px solid var(--de-border); border-radius: var(--de-radius);
	overflow: hidden; cursor: pointer; background: #fff;
	color: inherit; text-decoration: none;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.product-card > img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; filter: grayscale(.6); opacity: .8; transition: filter .15s, opacity .15s; }
.product-card:hover { border-color: var(--de-blue-light); transform: translateY(-2px); }
.product-card:hover > img { filter: none; opacity: 1; }

.product-body { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.product-body > span:first-child { display: flex; flex-direction: column; }
.product-name { font-weight: 800; font-size: 1.15rem; color: var(--de-blue); }
.product-type { font-weight: 600; }
.product-sub  { font-size: .9rem; color: #6c757d; }
.product-badge { height: 40px; width: auto; flex-shrink: 0; }

.btn-check:checked + .product-card {
	border-color: var(--de-blue);
	box-shadow: 0 0 0 .25rem rgba(28, 62, 137, .15);
}
.btn-check:checked + .product-card > img { filter: none; opacity: 1; }
.btn-check:focus-visible + .product-card { outline: 3px solid var(--de-blue-light); outline-offset: 2px; }

.product-card--link { border-style: dashed; }

/* --- Étape 2 ------------------------------------------------------------ */
.step-placeholder {
	padding: 1.5rem; border: 2px dashed var(--de-border); border-radius: var(--de-radius);
	color: #6c757d; text-align: center; margin: 0;
}

.criterion {
	height: 100%; padding: 1.25rem; margin: 0;
	border: 1px solid var(--de-border); border-radius: var(--de-radius);
	background: #fff; transition: opacity .2s, background .2s;
}
.criterion[disabled] { opacity: .45; background: var(--de-grey); }
.criterion-title {
	float: left; width: 100%; padding: 0;
	font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--de-blue); margin-bottom: 1rem;
}
.criterion-title + * { clear: both; }
.criterion-help { font-size: .85rem; color: #6c757d; margin: .75rem 0 0; }

/* Choix radio en blocs */
.choice { position: relative; display: flex; gap: .65rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--de-border); border-radius: .5rem; margin-bottom: .6rem; }
.choice:last-child { margin-bottom: 0; }
.choice .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.choice-label { flex: 1; cursor: pointer; display: flex; flex-direction: column; font-size: .9rem; }
.choice-label span { color: #6c757d; font-size: .85rem; }
.choice-label::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable */
.choice:has(.form-check-input:checked) { border-color: var(--de-blue); background: rgba(28, 62, 137, .05); }
.choice .help-btn { position: relative; z-index: 1; }

.form-check-input:checked { background-color: var(--de-blue); border-color: var(--de-blue); }

.help-btn { display: inline-grid; place-items: center; min-width: 1.5rem; min-height: 1.5rem; border: 0; background: none; padding: 0 .15rem; color: var(--de-blue-light); font-size: 1.1rem; line-height: 1; vertical-align: middle; }
.help-btn:hover { color: var(--de-blue); }

/* --- Assistance --------------------------------------------------------- */
.assist {
	display: flex; gap: 1.5rem; align-items: flex-start;
	padding: 2rem; border-radius: var(--de-radius); background: var(--de-grey);
}
.assist-photo { border-radius: .5rem; object-fit: cover; flex-shrink: 0; }
.assist h2 { color: var(--de-blue); font-weight: 700; }

@media (max-width: 575.98px) {
	.assist { flex-direction: column; padding: 1.5rem; }
}

/* --- Résultat ----------------------------------------------------------- */
#resultat:focus { outline: none; }
.result-card { border: 2px solid var(--de-blue); border-radius: var(--de-radius); padding: 1.5rem; background: #fff; }
.result-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--de-border); }
.result-ref { font-size: 1.1rem; color: var(--de-blue); }
.result-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.result-price-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6c757d; }
.result-price-old { text-decoration: line-through; color: #6c757d; }
.result-price-value { font-size: 2rem; font-weight: 800; color: var(--de-blue); line-height: 1.1; font-variant-numeric: tabular-nums; }

.result-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.result-stats div { background: var(--de-grey); border-radius: .5rem; padding: .75rem 1rem; }
.result-stats dt { font-size: .75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; }
.result-stats dd { margin: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.result-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.pieces-table td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: #6c757d; }

@media (max-width: 575.98px) {
	.result-price { align-items: flex-start; text-align: left; }
}