/* Styles du wizard de demande de devis [hs_devis_wizard].
   Identité visuelle Home Solutions : terracotta doré (#C78D5B), déclinée en
   variables CSS scopées à .hs-devis-wizard (jamais sur :root, pour ne rien
   faire fuiter sur le reste du site). */

.hs-devis-wizard {
	--hs-devis-primary: #C78D5B;
	--hs-devis-primary-hover: #A9713F;
	--hs-devis-primary-tint: rgba(199, 141, 91, 0.06);
	--hs-devis-border: #e5d6c8;
	--hs-devis-border-input: #d6c6b6;
	--hs-devis-shadow-card: 0 2px 8px rgba(199, 141, 91, 0.10);

	max-width: 640px;
	margin: 0 auto;
	padding: 2em;
	background: #FBF6F0;
	border-radius: 16px;
	font-size: 16px;
}

.hs-devis-notice {
	padding: 1em 1.25em;
	border-radius: 10px;
	margin-bottom: 1.5em;
}

.hs-devis-notice--success {
	background: #eafaf0;
	border: 1px solid #34a25f;
	color: #1e6b3c;
}

.hs-devis-notice--error {
	background: #fdeceb;
	border: 1px solid #d63638;
	color: #8a1f21;
}

.hs-devis-wizard__form fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.5em;
}

.hs-devis-wizard__form legend {
	font-weight: 700;
	font-size: 1.2em;
	margin-bottom: 1em;
	padding: 0 0 0.5em;
	color: #3a2a1d;
	border-bottom: 3px solid var(--hs-devis-primary);
}

/* Barre de progression (1 pastille numérotée par étape, reliées par un
   trait), injectée par setupSteps()/buildProgress() dans hs-devis-wizard.js
   juste avant la 1ère étape — n'existe donc que quand JS est actif (voir le
   commentaire en tête de hs-devis-wizard.js : sans JS, toutes les étapes
   restent visibles en même temps, une progression n'aurait alors pas de sens). */
.hs-devis-progress {
	display: flex;
	align-items: center;
	margin: 0 0 2em;
}

.hs-devis-progress__dot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--hs-devis-border);
	color: #a8907c;
	font-weight: 700;
	font-size: 0.85em;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hs-devis-progress__dot.is-active,
.hs-devis-progress__dot.is-completed {
	background: var(--hs-devis-primary);
	border-color: var(--hs-devis-primary);
	color: #fff;
}

.hs-devis-progress__dot.is-active {
	box-shadow: 0 0 0 4px var(--hs-devis-primary-tint);
}

.hs-devis-progress__line {
	flex: 1 1 auto;
	height: 2px;
	background: var(--hs-devis-border);
	margin: 0 0.4em;
	transition: background-color 0.2s ease;
}

.hs-devis-progress__line.is-completed {
	background: var(--hs-devis-primary);
}

/* Piège à robots : invisible pour un humain, mais présent dans le DOM
   (contrairement à display:none, ce qui le rend plus crédible pour un bot). */
.hs-devis-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hs-devis-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75em;
}

.hs-devis-service-card {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.9em 1em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 14px;
	box-shadow: var(--hs-devis-shadow-card);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.hs-devis-service-card:hover {
	border-color: var(--hs-devis-primary);
}

.hs-devis-service-card:has(input:checked) {
	border-color: var(--hs-devis-primary);
	background: var(--hs-devis-primary-tint);
	box-shadow: 0 2px 10px rgba(199, 141, 91, 0.18);
}

.hs-devis-service-card input {
	margin: 0;
}

/* Variante compacte des cartes de choix visuelles, pour un groupe avec
   davantage d'options que "Maison / Appartement" (ex. les types de
   revêtement de sol, voir HS_Tarif_Sol_CPT::get_revetement_types()) : cartes
   plus petites et plus nombreuses par ligne, texte centré plutôt qu'aligné à
   gauche d'un pictogramme absent ici. */
.hs-devis-service-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.5em;
}

.hs-devis-service-card--compact {
	justify-content: center;
	text-align: center;
	padding: 0.6em 0.75em;
	font-size: 0.92em;
	border-radius: 12px;
}

.hs-devis-step-subtitle {
	font-size: 1em;
	font-weight: 600;
	margin: 1.25em 0 0.75em;
	padding-left: 0.65em;
	border-left: 3px solid var(--hs-devis-primary);
	color: #1d2327;
}

.hs-devis-type-bien-grid {
	margin-bottom: 0.5em;
}

/* Sous-titre de sous-groupe à l'intérieur d'un bloc de détail (ex. les
   groupes "Interrupteurs", "Prises"... de l'étape Électricité) — plus
   discret que .hs-devis-step-subtitle, qui sépare des étapes entières. */
.hs-devis-subgroup-title {
	font-size: 0.9em;
	font-weight: 600;
	margin: 0.9em 0 0.5em;
	color: #50575e;
}

.hs-devis-subgroup-title:first-child {
	margin-top: 0;
}

/* "Caractéristiques du bien" (étape 1) : une caractéristique par ligne,
   pleine largeur, libellé à gauche / contrôle à droite — même boîte
   visuelle que .hs-devis-oui-non-field ci-dessous (bordure, arrondi,
   padding), pour que "WC séparé" (un champ oui/non) s'intègre sans rupture
   visuelle à côté de "Nombre de chambres" ou "Surface totale" (un champ
   saisie/liste). Remplace l'ancienne grille à plusieurs colonnes
   (.hs-devis-field-grid.hs-devis-bien-grid). */
.hs-devis-bien-rows {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	margin-bottom: 0.5em;
}

.hs-devis-bien-rows .hs-devis-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1em;
	padding: 0.75em 1em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 14px;
	box-shadow: var(--hs-devis-shadow-card);
	margin: 0;
}

/* IMPORTANT : la règle display:flex ci-dessus (deux sélecteurs de classe)
   est plus spécifique que la règle native du navigateur pour l'attribut
   hidden ([hidden] { display: none }, un seul sélecteur d'attribut) — sans
   cette redéclaration, un champ "maison uniquement"/"appartement
   uniquement" masqué par JS (voir setupTypeBienToggle() dans
   hs-devis-wizard.js) resterait visible malgré son attribut hidden. */
.hs-devis-bien-rows .hs-devis-field[hidden] {
	display: none;
}

.hs-devis-bien-rows .hs-devis-field label {
	font-weight: 600;
	margin: 0;
}

.hs-devis-bien-rows .hs-devis-field input[type="number"] {
	width: auto;
	min-width: 10em;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	font-size: 1em;
	font-family: inherit;
}

.hs-devis-bien-rows .hs-devis-field select {
	width: auto;
	min-width: 10em;
	box-sizing: border-box;
}

.hs-devis-bien-rows .hs-devis-field .hs-devis-field-error {
	flex-basis: 100%;
}

.hs-devis-oui-non-grid {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.hs-devis-oui-non-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 1em;
	padding: 0.75em 1em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 14px;
	box-shadow: var(--hs-devis-shadow-card);
	margin: 0;
}

/* Même raison que .hs-devis-bien-rows .hs-devis-field[hidden] plus haut :
   display:flex ci-dessus est plus spécifique que la règle native du
   navigateur pour [hidden], donc sans cette ligne, "Sous-sol"/"Combles"
   (maison uniquement) ou "Ascenseur" (appartement uniquement) restaient
   visibles même une fois masqués par JS. */
.hs-devis-oui-non-field[hidden] {
	display: none;
}

.hs-devis-oui-non-field .hs-devis-field-error {
	flex-basis: 100%;
}

.hs-devis-oui-non-label {
	font-weight: 600;
}

.hs-devis-oui-non-options {
	display: flex;
	gap: 0.5em;
}

/* Renommée "pill" à l'origine (forme arrondie en pilule, border-radius:999px)
   mais restylée en carte rectangulaire compacte pour rester cohérente avec
   .hs-devis-service-card ("Type de bien", etc.) — même traitement visuel
   (fond blanc, bordure, ombre légère, surbrillance à la sélection), juste
   plus petite pour s'intégrer dans une rangée de 2-3 options à côté d'un
   libellé de question (voir .hs-devis-oui-non-field ci-dessus), là où
   .hs-devis-service-card occupe toute une grille sans libellé de question
   séparé. Le nom de classe n'a pas été renommé pour éviter de toucher aux
   ~50 endroits de class-hs-devis-shortcode.php qui l'utilisent déjà. */
.hs-devis-radio-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.55em 1em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 10px;
	box-shadow: var(--hs-devis-shadow-card);
	cursor: pointer;
	font-weight: 400;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.hs-devis-radio-pill:hover {
	border-color: var(--hs-devis-primary);
}

.hs-devis-radio-pill:has(input:checked) {
	border-color: var(--hs-devis-primary);
	background: var(--hs-devis-primary-tint);
	box-shadow: 0 2px 10px rgba(199, 141, 91, 0.18);
	color: #7a4b28;
	font-weight: 600;
}

.hs-devis-radio-pill input {
	margin: 0;
}

/* Taille explicite des cases/boutons radio natifs, dans TOUT le wizard (pas
   seulement .hs-devis-radio-pill/.hs-devis-service-card) : sans ça, le
   rendu du contrôle natif est laissé à la seule main du navigateur, et les
   navigateurs mobiles (Safari iOS notamment) l'affichent bien plus gros que
   sur desktop — un cercle disproportionné dans un petit conteneur comme
   .hs-devis-radio-pill. 1.15em à font-size:16px (base du wizard, voir plus
   haut) donne ~18px, cohérent quel que soit l'appareil. */
.hs-devis-wizard input[type="checkbox"],
.hs-devis-wizard input[type="radio"] {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
}

.hs-devis-piece-list {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
}

.hs-devis-piece {
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 14px;
	padding: 0.9em 1em;
	box-shadow: var(--hs-devis-shadow-card);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Une pièce cochée se détache visuellement des autres (bordure + fond
   légèrement teintés), même si son détail (dimensions, travaux...) n'est
   affiché qu'une fois la case cochée — voir setupToggles() dans
   hs-devis-wizard.js. */
.hs-devis-piece:has(.hs-devis-piece-toggle:checked) {
	border-color: var(--hs-devis-primary);
	background: var(--hs-devis-primary-tint);
}

.hs-devis-piece__toggle {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: 600;
	cursor: pointer;
}

.hs-devis-piece__toggle input {
	margin: 0;
}

.hs-devis-piece__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6em;
}

/* Bouton "Validé — modifier" affiché à la place de la case à cocher une fois
   la pièce validée (accordéon replié) et .hs-devis-piece__detail masqué via
   .is-collapsed — voir setupPieceAccordion() dans hs-devis-wizard.js. */
.hs-devis-piece__validated-indicator {
	display: flex;
	align-items: center;
	gap: 0.4em;
	background: none;
	border: none;
	padding: 0;
	font-size: 0.95em;
	font-weight: 600;
	color: #1e6b3c;
	cursor: pointer;
}

/* Comme .hs-devis-piece__detail--sdb-order[hidden] plus haut : display:flex
   ci-dessus est plus spécifique que la règle native du navigateur pour
   [hidden] — sans cette ligne, le bouton "Validé — modifier" resterait
   visible pour toutes les pièces dès le chargement de la page. */
.hs-devis-piece__validated-indicator[hidden] {
	display: none;
}

.hs-devis-piece__validated-indicator:hover {
	text-decoration: underline;
}

.hs-devis-piece__validated-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	flex: none;
	border-radius: 50%;
	background: #34a25f;
	color: #fff;
	font-size: 0.75em;
	line-height: 1;
}

.hs-devis-piece__detail {
	margin-top: 0.9em;
	padding-top: 0.9em;
	border-top: 1px solid var(--hs-devis-border);
}

.hs-devis-piece__detail.is-collapsed {
	display: none;
}

.hs-devis-piece__validate {
	margin-top: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Message d'erreur inséré dynamiquement par setupPieceAccordion() (voir
   hs-devis-wizard.js) quand "Valider cette pièce" est cliqué sans
   Longueur/Largeur renseignées — flex-basis: 100% le force sur sa propre
   ligne, au-dessus du bouton, dans le conteneur flex ci-dessus. */
.hs-devis-piece__validate-error {
	flex-basis: 100%;
	text-align: right;
}

/* Salle de bain / WC (voir HS_Devis_Form_Handler::get_pieces_avec_module_sdb()) :
   remet visuellement le détail de "Démolition"/"Enduit-Peinture"/"Électricité"
   dans le même ordre que leurs cases à cocher juste au-dessus ("Travaux
   complémentaires"), et avant le module "Carrelage & sanitaires" — sans
   toucher à l'ordre du HTML généré côté PHP (partagé avec toutes les autres
   pièces) ni le dupliquer : seul l'ORDRE VISUEL change, via flexbox + order,
   uniquement pour les 2 pièces concernées (classe posée conditionnellement
   par HS_Devis_Shortcode). Les éléments sans "order" explicite (la grille de
   dimensions, la case d'erreur, la ligne de cases "Travaux complémentaires")
   restent à leur position naturelle (order: 0, avant tout le reste). */
.hs-devis-piece__detail--sdb-order {
	display: flex;
	flex-direction: column;
}

.hs-devis-piece__detail--sdb-order[hidden] {
	display: none;
}

.hs-devis-piece__detail--sdb-order > [id$="-detail-demolition"] {
	order: 3;
}

.hs-devis-piece__detail--sdb-order > [id$="-detail-enduit_peinture"] {
	order: 4;
}

.hs-devis-piece__detail--sdb-order > [id$="-detail-electricite"] {
	order: 5;
}

.hs-devis-piece__detail--sdb-order > .hs-devis-sdb-carrelage-module {
	order: 6;
}

/* Grille générique réutilisée pour les dimensions d'une pièce ET pour les
   quantités de l'étape "Électricité" (même forme : plusieurs petits champs
   numériques côte à côte). */
.hs-devis-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75em;
	margin-bottom: 0.9em;
}

/* Même raison que .hs-devis-bien-rows .hs-devis-field[hidden] plus haut :
   display:grid ci-dessus est plus spécifique que la règle native du
   navigateur pour [hidden] — sans cette ligne, un bloc "hs-devis-field-grid"
   porté directement par l'élément masqué (ex. taille du meuble vasque du
   module "Carrelage & sanitaires", voir HS_Devis_Shortcode) resterait
   visible malgré son attribut hidden. */
.hs-devis-field-grid[hidden] {
	display: none;
}

.hs-devis-field-grid .hs-devis-field {
	margin: 0;
}

/* "Hauteur sous plafond (m)" est plus long que "Longueur (m)"/"Largeur (m)"/
   "Étage" et passe sur 2 lignes dans les colonnes étroites générées par
   .hs-devis-field-grid (voir grid-template-columns ci-dessus) — sans cette
   réservation d'espace fixe (2 lignes, quel que soit le libellé), son champ
   de saisie se retrouverait décalé plus bas que les 3 autres de la même
   ligne, dont le libellé tient sur 1 seule ligne. */
.hs-devis-field-grid .hs-devis-field label {
	min-height: 2.4em;
	line-height: 1.2;
}

.hs-devis-field-grid input[type="number"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	font-size: 1em;
	font-family: inherit;
}

.hs-devis-piece__travaux-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5em;
}

/* Bloc "Carrelage & sanitaires" (voir class-hs-devis-shortcode.php) :
   la sous-section "Sanitaires" suit directement le dernier champ de
   "Carrelage mural (faïence)" dans le HTML, sans wrapper englobant les
   2 sous-sections — cette marge haute + cette bordure de séparation les
   distinguent visuellement l'une de l'autre. */
.hs-devis-sdb-sanitaires-label {
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px solid #e0e0e0;
}

/* Grille à 3 colonnes de largeur FIXE et ÉGALE (repeat(3, ...), jamais
   auto-fill/minmax dont le nombre de colonnes dépend de la largeur
   disponible) : avec flex-wrap (comportement d'origine) ou une grille
   auto-fill, la largeur de chaque case dépendait de la longueur de son
   libellé et du nombre de cases présentes, ce qui décalait les colonnes
   d'une pièce à l'autre dès que le jeu de cases différait (ex. Salle de
   bain/WC sans "Revêtement de sol"/"Plomberie / Sanitaires"). Ici les 3
   colonnes ont TOUJOURS exactement la même largeur, sur toutes les lignes
   et dans tous les blocs de pièce, quel que soit le nombre de cases ou la
   longueur des libellés. minmax(0, 1fr) (plutôt que 1fr seul) empêche un
   libellé long ("Menuiserie intérieure") de forcer sa colonne à s'élargir
   au-delà des 2 autres : il passe à la ligne dans sa cellule à la place
   (voir min-width: 0 sur .hs-devis-checkbox ci-dessous, nécessaire pour
   qu'un enfant de grille accepte de rétrécir sous sa largeur intrinsèque). */
.hs-devis-piece__travaux {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6em 1.2em;
	margin-bottom: 0.9em;
}

.hs-devis-piece__travaux .hs-devis-checkbox {
	min-width: 0;
}

/* En dessous de 768px, 3 colonnes fixes ne laissent plus assez de place a
   des libelles comme "Menuiserie interieure" ou "Enduit / Peinture" : le
   mot le plus long de la case refuse de retrecir sous sa largeur minimale
   (min-content) et deborde par-dessus la case a cocher de la colonne
   suivante. On passe donc a 2 colonnes entre 480 et 767px (chaque colonne
   garde largement la place pour le mot le plus long), puis a 1 seule
   colonne pleine largeur en dessous de 480px, ou meme 2 colonnes seraient
   trop etroites. */
@media screen and (max-width: 767px) {
	.hs-devis-piece__travaux {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6em 1em;
	}
}

@media screen and (max-width: 479px) {
	.hs-devis-piece__travaux {
		grid-template-columns: 1fr;
	}
}

/* Le libellé "Travaux à prévoir" est le premier enfant de la grille
   ci-dessus (voir class-hs-devis-shortcode.php) : sans cette règle, il
   occuperait une simple cellule au lieu de sa propre ligne pleine largeur. */
.hs-devis-piece__travaux > .hs-devis-piece__travaux-label {
	grid-column: 1 / -1;
}

/* Bloc replié/déplié quand on coche Électricité, Chauffage,
   Plomberie/Sanitaires ou Sols dans la liste de travaux d'une pièce. Même
   ton crème que le fond du wizard (voir .hs-devis-wizard) : imbriqué dans
   une pièce déjà blanche, ce 3e ton marque la hiérarchie sans reprendre un
   gris neutre hors palette. */
.hs-devis-travaux-detail {
	margin: 0 0 0.9em;
	padding: 0.9em 1em;
	background: #FBF6F0;
	border: 1px solid var(--hs-devis-border);
	border-radius: 12px;
}

.hs-devis-travaux-detail:last-child {
	margin-bottom: 0;
}

/* Accordéon de confort niveau 3 (voir setupSubcategoryAccordion() dans
   hs-devis-wizard.js) : une fois une sous-catégorie validée à l'intérieur
   d'une pièce encore ouverte, tout son contenu se replie SAUF son en-tête
   (.hs-devis-piece__header, réutilisé tel quel — voir plus haut) qui reste
   visible avec le bouton "Validé — modifier". Pas de wrapper de contenu
   dédié : plus simple de cacher tous les autres enfants directs que
   d'ajouter un niveau d'imbrication à chacun des 10 blocs concernés. */
.hs-devis-travaux-detail.is-collapsed > *:not(.hs-devis-piece__header) {
	display: none;
}

/* Accordéon de confort niveau 2 : mêmes règles que le niveau 3 ci-dessus,
   pour les 2 sections globales hors pièce (Électricité, Menuiserie
   extérieure — voir setupGlobalSectionAccordion() dans hs-devis-wizard.js) —
   .hs-devis-global-section n'a par ailleurs aucun style propre (pas de
   fond/bordure de carte), pour ne rien changer à l'identité visuelle
   actuelle de ces 2 sections en dehors du comportement d'accordéon. */
.hs-devis-global-section.is-collapsed > *:not(.hs-devis-piece__header) {
	display: none;
}

/* Sous-section nettement séparée à l'intérieur d'un .hs-devis-travaux-detail
   (ex. "Isolation des rampants", "Plaques de plâtre", "Chien assis",
   "Isolation périphérique" du module Combles) : carte blanche sur le fond
   crème du bloc parent, même langage visuel que .hs-devis-oui-non-field
   (bordure + arrondi), mais empilable verticalement avec plusieurs champs. */
.hs-devis-subsection {
	margin: 0 0 0.75em;
	padding: 0.9em 1em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 12px;
}

.hs-devis-subsection:last-child {
	margin-bottom: 0;
}

.hs-devis-subsection > .hs-devis-piece__travaux-label {
	margin-bottom: 0.75em;
}

/* Sous-blocs du détail "Revêtement de sol" (état du support, sous-formulaire
   Carrelage, gamme de parquet, sous-formulaire Vinyle / PVC — voir
   setupSolsTypeToggle() dans hs-devis-wizard.js, qui affiche/masque chacun
   de ces blocs selon le type choisi). Léger retrait + séparateur du haut
   pour bien les distinguer des cartes de choix juste au-dessus, sans
   imbriquer un second fond dans le fond de .hs-devis-travaux-detail. */
.hs-devis-sols-block {
	margin-top: 0.9em;
	padding-top: 0.9em;
	border-top: 1px solid var(--hs-devis-border);
}

.hs-devis-sols-block[hidden] {
	display: none;
}

.hs-devis-sols-block .hs-devis-field:last-child {
	margin-bottom: 0;
}

.hs-devis-sols-preparation-list {
	margin-bottom: 0;
}

/* Champs numériques posés directement dans un <p class="hs-devis-field">
   du bloc Revêtement de sol (métrage de plinthes, largeur de joint "Autre")
   plutôt que dans un .hs-devis-field-grid déjà stylé — même style que ce
   dernier (voir .hs-devis-field-grid input[type="number"] plus haut), pour
   rester visuellement cohérent avec le reste des sous-formulaires Carrelage
   et Vinyle / PVC. */
.hs-devis-sols-block input[type="number"] {
	width: 100%;
	max-width: 12em;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	font-size: 1em;
	font-family: inherit;
}

.hs-devis-equipement-list {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.hs-devis-equipement {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em 1.25em;
}

.hs-devis-equipement__detail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	font-weight: 400;
}

/* Même raison que .hs-devis-bien-rows .hs-devis-field[hidden] plus haut :
   sans cette ligne, le détail (type/quantité) d'un équipement plomberie
   décoché restait visible malgré son attribut hidden, à cause du
   display:flex ci-dessus plus spécifique que la règle native [hidden]. */
.hs-devis-equipement__detail[hidden] {
	display: none;
}

.hs-devis-equipement__detail label {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 400;
}

.hs-devis-select,
.hs-devis-equipement__detail input[type="number"] {
	padding: 0.4em 0.6em;
	font-size: 1em;
	font-family: inherit;
}

.hs-devis-equipement__detail input[type="number"] {
	width: 4.5em;
}

.hs-devis-checkbox {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 400;
	cursor: pointer;
}

/* Même raison que .hs-devis-bien-rows .hs-devis-field[hidden] plus haut :
   display:flex ci-dessus est plus spécifique que la règle native du
   navigateur pour [hidden] — sans cette ligne, la case "Électricité" d'une
   pièce resterait visible en mode "Forfait par type de bien" malgré son
   attribut hidden (voir setupElectriciteModeToggle() dans
   hs-devis-wizard.js). */
.hs-devis-checkbox[hidden] {
	display: none;
}

.hs-devis-checkbox input {
	margin: 0;
}

.hs-devis-field {
	margin: 0 0 1.1em;
}

.hs-devis-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.hs-devis-field input[type="text"],
.hs-devis-field input[type="email"],
.hs-devis-field input[type="tel"],
.hs-devis-field input[type="number"]:not(.hs-devis-stepper__input),
.hs-devis-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	font-size: 1em;
	font-family: inherit;
}

/* Style de repos (bordure, arrondi) et de focus commun à tous les champs de
   saisie/sélection du wizard — centralisé ici plutôt que répété dans chacune
   des règles ci-dessus/ci-dessous (elles ne gardent que leurs propriétés de
   mise en page : largeur, padding...). Les cases à cocher/boutons radio, eux,
   utilisent accent-color plutôt qu'une bordure : voir plus bas. */
.hs-devis-wizard input[type="text"],
.hs-devis-wizard input[type="email"],
.hs-devis-wizard input[type="tel"],
.hs-devis-wizard input[type="number"],
.hs-devis-wizard select,
.hs-devis-wizard textarea {
	border: 1px solid var(--hs-devis-border-input);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hs-devis-wizard input[type="text"]:focus,
.hs-devis-wizard input[type="email"]:focus,
.hs-devis-wizard input[type="tel"]:focus,
.hs-devis-wizard input[type="number"]:focus,
.hs-devis-wizard select:focus,
.hs-devis-wizard textarea:focus {
	outline: none;
	border-color: var(--hs-devis-primary);
	box-shadow: 0 0 0 3px var(--hs-devis-primary-tint);
}

/* Cases à cocher et boutons radio natifs (pièces, travaux, Oui/Non,
   cartes de choix...) : recolorés en une seule ligne via accent-color
   plutôt qu'en redessinant chaque contrôle. */
.hs-devis-wizard input[type="checkbox"],
.hs-devis-wizard input[type="radio"] {
	accent-color: var(--hs-devis-primary);
}

.hs-devis-service-card input:focus-visible {
	outline: 2px solid var(--hs-devis-primary);
	outline-offset: 2px;
}

.hs-devis-field-error {
	display: block;
	color: #d63638;
	font-size: 0.9em;
	margin-top: 0.35em;
}

/* setupPieceAccordion() (voir hs-devis-wizard.js) bascule ce message via
   l'attribut natif [hidden], pas une classe : sans cette règle, le
   display:block ci-dessus (règle d'auteur) l'emporterait sur le
   display:none de la feuille de style UA pour [hidden], et le message
   resterait visible en permanence. */
.hs-devis-field-error[hidden] {
	display: none;
}

/* Note informative (pas une erreur) sous un champ, ex. la limite de 3 ml
   du forfait "Ouverture mur porteur". */
.hs-devis-field-note {
	display: block;
	color: #646970;
	font-size: 0.85em;
	font-style: italic;
	margin-top: 0.35em;
}

/* Mention informative, non chiffrée (ex. "Ragréage à prévoir..." déclenché
   par "Dépose de sol") — volontairement plus visible qu'une simple
   .hs-devis-field-note pour signaler qu'elle n'est PAS comptabilisée dans
   le total du devis, juste indicative pour le client. */
.hs-devis-info-note {
	display: block;
	margin-top: 0.6em;
	padding: 0.6em 0.85em;
	background-color: #faf3ea;
	border-left: 3px solid var(--hs-devis-primary);
	border-radius: 4px;
	color: #6b6258;
	font-size: 0.85em;
	line-height: 1.4;
}

/* Bloc "Forfait par type de bien" de l'étape Électricité (sélecteur de
   catégorie + récapitulatif figé). Même ton crème nichée que
   .hs-devis-travaux-detail ci-dessus. Pas de display: déclaré ici
   volontairement — la balise reste un <div> en display:block par défaut,
   ce qui laisse la règle native [hidden] { display: none } du navigateur
   s'appliquer sans conflit (voir le commentaire sur .hs-devis-checkbox[hidden]
   plus haut pour le problème que ça évite). */
.hs-devis-elec-forfait-block {
	margin: 0 0 1.1em;
	padding: 0.9em 1em;
	background: #FBF6F0;
	border: 1px solid var(--hs-devis-border);
	border-radius: 12px;
}

.hs-devis-elec-forfait-items {
	margin: 0;
	padding-left: 1.25em;
	color: #3c434a;
}

.hs-devis-elec-forfait-items li {
	margin-bottom: 0.3em;
}

.hs-devis-actions {
	display: flex;
	gap: 0.75em;
	margin-top: 1em;
}

.hs-devis-btn {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.75em 1.75em;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.hs-devis-btn--primary {
	background: var(--hs-devis-primary);
	border-color: var(--hs-devis-primary);
	color: #fff;
	box-shadow: 0 2px 6px rgba(199, 141, 91, 0.25);
}

.hs-devis-btn--primary:hover {
	background: var(--hs-devis-primary-hover);
	border-color: var(--hs-devis-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(169, 113, 63, 0.32);
}

.hs-devis-btn--secondary {
	background: #fff;
	border-color: var(--hs-devis-primary);
	color: var(--hs-devis-primary);
}

.hs-devis-btn--secondary:hover {
	background: var(--hs-devis-primary-tint);
}

/* Zones d'upload "Photos du bien" / "Plans du bien" (étape 1). */
.hs-devis-upload-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1em;
	margin-bottom: 1.5em;
}

.hs-devis-dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5em;
	padding: 1.5em 1em;
	background: #fff;
	border: 2px dashed var(--hs-devis-border-input);
	border-radius: 14px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hs-devis-dropzone.is-dragover {
	border-color: var(--hs-devis-primary);
	background: var(--hs-devis-primary-tint);
}

.hs-devis-dropzone.is-uploading {
	opacity: 0.6;
}

.hs-devis-dropzone.has-error {
	border-color: #c0392b;
}

.hs-devis-dropzone__title {
	margin: 0;
	font-weight: 600;
}

.hs-devis-dropzone__hint {
	margin: 0;
	font-size: 0.9em;
	color: #6b6258;
}

.hs-devis-dropzone__count {
	margin: 0;
	min-height: 1.2em;
	font-size: 0.85em;
	color: var(--hs-devis-primary-hover);
}

.hs-devis-dropzone__tip {
	margin: 0;
	font-size: 0.8em;
	color: #6b6258;
	font-style: italic;
}

/* Étape 3 "Vos coordonnées" : intro courte + champ en lecture seule quand
   "Identique à l'adresse client" est cochée (voir setupChantierSameAddress()
   dans hs-devis-wizard.js). */
.hs-devis-step-intro {
	margin: 0 0 1.25em;
	color: #6b6258;
}

.hs-devis-field input.is-readonly,
.hs-devis-field input[readonly] {
	background: #FBF6F0;
	color: #8a8078;
	cursor: not-allowed;
}

/* Écran final : fourchette d'estimation + section "Obtenir mon devis détaillé". */
.hs-devis-estimate {
	margin-top: 1em;
	padding: 1.25em 1.5em;
	background: var(--hs-devis-primary-tint);
	border: 1px solid var(--hs-devis-border);
	border-radius: 14px;
	text-align: center;
}

.hs-devis-estimate__kicker {
	margin: 0 0 0.5em;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hs-devis-primary-hover);
}

.hs-devis-estimate__label {
	margin: 0 0 0.25em;
	font-size: 0.9em;
	color: #6b6258;
}

.hs-devis-estimate__range {
	margin: 0;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--hs-devis-primary-hover);
}

.hs-devis-estimate__disclaimer {
	margin: 0.5em 0 0;
	font-size: 0.8em;
	color: #6b6258;
}

/* Question de transition entre la fourchette d'estimation et la carte
   "Obtenir mon offre détaillée gratuitement" ci-dessous. */
.hs-devis-transition-question {
	margin: 1.25em 0 0;
	text-align: center;
	font-size: 1.05em;
	font-weight: 600;
	color: #3d3730;
}

/* Section "Obtenir mon offre détaillée gratuitement" (voir
   HS_Devis_Shortcode::render(), bloc $success), juste sous la fourchette
   d'estimation. */
.hs-devis-upsell {
	margin-top: 1.5em;
	padding: 1.5em;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 14px;
	box-shadow: var(--hs-devis-shadow-card);
	text-align: left;
}

.hs-devis-upsell__title {
	margin: 0 0 0.5em;
	font-size: 1.3em;
}

.hs-devis-upsell__intro {
	margin: 0 0 1em;
	color: #6b6258;
}

@media screen and (max-width: 600px) {
	/* Marge de securite a droite pour le TEXTE de cette section sur mobile
	   uniquement (jamais sur .hs-devis-upsell dans son ensemble : ça
	   reduirait aussi la largeur disponible pour l'apercu du tableau plus
	   bas, provoquant a nouveau une compression illisible malgre le
	   min-width sur .hs-devis-preview__table) — les widgets de chat
	   flottants tiers (WhatsApp notamment, present sur le site de
	   production mais pas dans ce plugin) restent fixes en bas a droite de
	   l'ecran quel que soit le defilement : si ce texte s'etend jusqu'au
	   bord droit reel de l'ecran, sa derniere ligne se retrouve recouverte
	   des que cette section est visible en bas de viewport. Reserve donc
	   une zone morte a droite plutot que d'essayer de deviner la position
	   exacte de defilement ou le widget se superposera. */
	.hs-devis-upsell__title,
	.hs-devis-upsell__intro,
	.hs-devis-upsell__paragraph,
	.hs-devis-upsell__tagline {
		padding-right: 64px;
	}
}

.hs-devis-upsell__arguments {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.hs-devis-upsell__arguments li {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
}

.hs-devis-upsell__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
	background: var(--hs-devis-primary-tint);
	color: var(--hs-devis-primary-hover);
	font-weight: 700;
	font-size: 0.85em;
}

.hs-devis-upsell__paragraph {
	margin: 0 0 1em;
	font-size: 0.9em;
	color: #6b6258;
}

.hs-devis-upsell__tagline {
	margin: 0 0 1.5em;
	font-weight: 700;
	font-size: 1.1em;
	color: var(--hs-devis-primary-hover);
}

/* Aperçu / exemple du format du devis détaillé — jamais le vrai chiffrage du
   projet du client (réservé au paiement), mais un vrai gabarit de document
   (logo, en-tête, bloc client/chantier, postes groupés par catégorie,
   totaux, pied de page légal), rempli de données fictives. Le badge et le
   filigrane "Exemple" rappellent que ces montants ne sont pas ceux du
   dossier du visiteur. */
.hs-devis-preview {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 1.5em;
	padding: 1.25em;
	background: #FBF6F0;
	border: 1px dashed var(--hs-devis-border-input);
	border-radius: 12px;
	overflow: hidden;
}

/* Le gabarit de devis ci-dessus (tableau + en-tête + pied de page) reste
   fait pour du desktop/tablette : sur mobile, malgre les correctifs deja
   appliques au tableau (voir .hs-devis-preview__table plus bas), le reste
   du document (numero de devis, en-tete, colonnes) continue a mal
   s'accommoder d'un ecran etroit. Plutot que de continuer a rapiecer un
   gabarit qui ne veut pas cooperer, on le masque entierement sur mobile —
   ce n'est qu'un aperçu marketing ("Exemple"), jamais le vrai devis du
   client (toujours consultable en PDF) : la page enchaine directement de
   l'estimation vers le bouton "Obtenir mon offre detaillee gratuitement". */
@media screen and (max-width: 767px) {
	.hs-devis-preview {
		display: none;
	}
}

.hs-devis-preview__badge {
	position: absolute;
	top: 1em;
	right: 1em;
	z-index: 2;
	padding: 0.25em 0.75em;
	background: var(--hs-devis-primary);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 999px;
}

/* Filigrane en diagonale, posé derrière le contenu du document (voir
   z-index sur .hs-devis-preview__doc plus bas) — répète le rappel "Exemple"
   sans dépendre uniquement du petit badge en coin haute, pour qu'il n'y ait
   aucune ambiguïté même en cas de capture d'écran partielle. */
.hs-devis-preview__watermark {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-25deg);
	font-size: 4.5em;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(199, 141, 91, 0.12);
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.hs-devis-preview__doc {
	position: relative;
	z-index: 1;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--hs-devis-border);
	border-radius: 10px;
	box-shadow: var(--hs-devis-shadow-card);
	padding: 1.5em;
}

.hs-devis-preview__doc-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	padding-bottom: 1em;
	margin-bottom: 1em;
	border-bottom: 2px solid var(--hs-devis-primary);
}

.hs-devis-preview__logo {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.hs-devis-preview__logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 8px;
	background: var(--hs-devis-primary);
	color: #fff;
	font-weight: 800;
	font-size: 1.1em;
	flex: none;
}

.hs-devis-preview__logo-text {
	font-weight: 700;
	line-height: 1.15;
	color: var(--hs-devis-primary-hover);
}

.hs-devis-preview__doc-meta {
	text-align: right;
	font-size: 0.85em;
	color: #6b6258;
}

.hs-devis-preview__doc-meta p {
	margin: 0 0 0.2em;
}

.hs-devis-preview__doc-number {
	font-weight: 700;
	color: #2b2621;
	font-size: 1.05em;
}

.hs-devis-preview__parties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1em;
	margin-bottom: 1.25em;
}

.hs-devis-preview__party h4 {
	margin: 0 0 0.3em;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hs-devis-primary-hover);
}

.hs-devis-preview__party p {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.5;
}

.hs-devis-preview__table-wrap {
	width: 100%;
	overflow-x: auto;
	/* Empeche le survol du bord arrondi de .hs-devis-preview__doc quand le
	   tableau ci-dessous depasse et declenche le defilement horizontal. */
	-webkit-overflow-scrolling: touch;
}

.hs-devis-preview__table {
	width: 100%;
	/* IMPORTANT : sans ce min-width, "width:100%" + "table-layout:fixed"
	   ci-dessous se contentent de RETRECIR chaque colonne (46%/18%/18%/18%)
	   a la largeur du conteneur mobile, forcant "overflow-wrap:break-word"
	   plus bas a couper les mots/nombres lettre par lettre/chiffre par
	   chiffre — le "overflow-x:auto" du wrapper ci-dessus ne sert alors a
	   rien, rien ne depassant jamais. Avec min-width, le tableau garde une
	   largeur lisible et c'est le wrapper qui defile horizontalement sur
	   petit ecran (comportement volontaire, coherent avec le fait que
	   cette section "Exemple" reste un aperçu, jamais le vrai devis final
	   du client, consultable en PDF). */
	min-width: 500px;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.9em;
}

.hs-devis-preview__table th,
.hs-devis-preview__table td {
	padding: 0.6em 0.75em;
	text-align: left;
	overflow-wrap: break-word;
}

.hs-devis-preview__table th:not(:first-child),
.hs-devis-preview__table td:not(:first-child) {
	/* Les montants/quantites ne doivent jamais se couper en plusieurs
	   lignes (ex. "1 200,00 €" coupe en "1 200,00" / "€") : avec le
	   min-width ci-dessus, chaque colonne a largement la place. */
	white-space: nowrap;
}

.hs-devis-preview__table th:first-child,
.hs-devis-preview__table td:first-child {
	width: 46%;
}

.hs-devis-preview__table th:not(:first-child),
.hs-devis-preview__table td:not(:first-child) {
	width: 18%;
}

.hs-devis-preview__table thead th {
	border-bottom: 2px solid var(--hs-devis-border);
	color: #6b6258;
	font-weight: 600;
	font-size: 0.85em;
}

.hs-devis-preview__table tbody td {
	border-bottom: 1px solid var(--hs-devis-border);
}

.hs-devis-preview__table td:last-child,
.hs-devis-preview__table th:last-child {
	text-align: right;
}

.hs-devis-preview__category td {
	padding-top: 1em;
	padding-bottom: 0.3em;
	border-bottom: none;
	font-weight: 700;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hs-devis-primary-hover);
	white-space: normal;
}

.hs-devis-preview__totals {
	margin: 1em 0 0;
	padding-top: 0.75em;
	border-top: 1px solid var(--hs-devis-border);
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	max-width: 18em;
	margin-left: auto;
}

.hs-devis-preview__totals-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	font-size: 0.9em;
	color: #6b6258;
}

.hs-devis-preview__totals-row--ttc {
	padding-top: 0.35em;
	border-top: 1px solid var(--hs-devis-border);
	font-weight: 700;
	font-size: 1.1em;
	color: #2b2621;
}

.hs-devis-preview__doc-footer {
	margin-top: 1.5em;
	padding-top: 1em;
	border-top: 1px solid var(--hs-devis-border);
	font-size: 0.75em;
	line-height: 1.6;
	color: #8a8078;
}

.hs-devis-upsell__cta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	text-align: center;
	font-size: 0.95em;
	/* white-space:normal (pas nowrap) : sur un ecran etroit, le libelle
	   "Obtenir mon offre detaillee gratuitement" ne tient pas sur une seule
	   ligne a la largeur du bouton — il doit pouvoir passer sur 2 lignes
	   centrees plutot que deborder de son conteneur. */
	white-space: normal;
	line-height: 1.3;
	padding-left: 1.25em;
	padding-right: 1.25em;
}

/* Écran de confirmation après génération du devis détaillé (voir HS_Devis_Payment) :
   "Votre devis a été envoyé à ..." + bouton de téléchargement direct. */
.hs-devis-confirmation__note {
	margin: 0 0 1.25em;
	color: #6b6258;
}

.hs-devis-confirmation__download {
	display: inline-block;
}

/* Sélecteur numérique +/- (voir "Nombre de radiateurs" du bloc Chauffage,
   setupStepper() dans hs-devis-wizard.js). */
.hs-devis-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.hs-devis-stepper__btn {
	flex: none;
	width: 2.2em;
	height: 2.2em;
	border: 1px solid var(--hs-devis-border-input);
	border-radius: 50%;
	background: #fff;
	color: var(--hs-devis-primary-hover);
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hs-devis-stepper__btn:hover {
	background: var(--hs-devis-primary-tint);
	border-color: var(--hs-devis-primary);
}

.hs-devis-stepper__input {
	width: 3.5em;
	text-align: center;
	box-sizing: border-box;
	padding: 0.6em 0.5em;
}

/* Récapitulatif de puissance calculée automatiquement (bloc Chauffage,
   toute pièce sauf Salle de bain). */
.hs-devis-chauffage-recap {
	margin: 1em 0 0;
	padding: 0.75em 1em;
	background: var(--hs-devis-primary-tint);
	border-radius: 10px;
	font-size: 0.9em;
	line-height: 1.6;
}

.hs-devis-chauffage-recap:empty {
	display: none;
}

.hs-devis-chauffage-recap__totale {
	font-weight: 600;
	color: var(--hs-devis-primary-hover);
}

.hs-devis-chauffage-recap__detail {
	color: #4a4238;
}