/* Formulaire de contact et de devis, page des avis. Chargé seulement sur les pages qui en ont besoin (inc/formulaires.php). */

.contact-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin-top: 1.5rem;
}
@media (min-width: 62rem) {
	.contact-grille { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}

/* Formulaire */
.formulaire { max-width: 46rem; }
.formulaire__titre { margin: 0 0 1rem; color: var(--couleur-titre); font-size: 1.5rem; }
.formulaire__note { margin: 0 0 1.1rem; color: var(--couleur-texte-doux); font-size: 0.9rem; }
.formulaire__delai { margin: 0 0 1rem; color: var(--couleur-titre); font-size: 0.9rem; font-weight: 600; }
.formulaire__ligne[hidden] { display: none; }
.formulaire__corps .formulaire__note:last-of-type { margin: 0.25rem 0 1rem; }
.formulaire__ligne { margin: 0 0 1.1rem; }
.formulaire__deux { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 40rem) {
	.formulaire__deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.formulaire label,
.formulaire__etiquette {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--couleur-titre);
	font-weight: 700;
}
.formulaire__oblig { color: var(--couleur-bouton); }
.formulaire__facultatif { color: var(--couleur-texte-doux); font-size: 0.85em; font-weight: 400; }
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire select,
.formulaire textarea {
	width: 100%;
	min-height: 2.9rem;
	padding: 0.65rem 0.85rem;
	background: #fff;
	border: 1px solid var(--couleur-bordure);
	border-radius: 0.6rem;
	color: var(--couleur-texte);
	font: inherit;
}
.formulaire textarea { min-height: 9rem; resize: vertical; }
.formulaire input:focus-visible,
.formulaire select:focus-visible,
.formulaire textarea:focus-visible {
	border-color: var(--couleur-bouton);
	outline: 3px solid color-mix(in srgb, var(--couleur-bouton) 18%, #fff);
	outline-offset: 0;
}
.formulaire input:user-invalid,
.formulaire textarea:user-invalid { border-color: #b3261e; }

/* Bloc propre au devis */
.formulaire__devis {
	margin: 0 0 1.1rem;
	padding: 1rem 1.1rem 0.1rem;
	background: var(--couleur-fond-doux);
	border: 0;
	border-radius: 0.8rem;
}
.formulaire__devis[hidden] { display: none; }
.formulaire__devis legend { padding: 0 0.4rem; color: var(--couleur-titre); font-weight: 800; }
.formulaire__choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.formulaire__puce { position: relative; margin: 0; cursor: pointer; }
.formulaire__puce input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.formulaire__puce span {
	display: inline-block;
	padding: 0.55rem 1rem;
	background: #fff;
	border: 1.5px solid var(--couleur-bordure);
	border-radius: 999px;
	color: var(--couleur-titre);
	font-weight: 600;
}
.formulaire__puce input:checked + span { background: var(--couleur-titre); border-color: var(--couleur-titre); color: #fff; }
.formulaire__puce input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--couleur-bouton) 40%, #fff); outline-offset: 2px; }

/* Champ-piège : hors de l'écran, jamais vu d'un visiteur ni d'un lecteur d'écran */
.formulaire__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__envoyer { min-width: 14rem; padding-block: 1em; font-size: 1.05rem; }
.formulaire__envoyer:disabled { opacity: 0.7; cursor: progress; }
@media (max-width: 39.99rem) {
	.formulaire__envoyer { width: 100%; }
}

/* Messages de retour */
.formulaire__statut {
	display: grid;
	gap: 0.25rem;
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	border: 1px solid;
	border-radius: 0.8rem;
}
.formulaire__statut--ok { background: #eef7f0; border-color: #a8d5b3; color: #14532d; }
.formulaire__statut--erreur { background: #fdf0ee; border-color: #f1b4ad; color: #8a1c14; }
.formulaire__statut strong { font-size: 1.1rem; }
.formulaire__autre { justify-self: start; margin-top: 0.4rem; color: inherit; font-weight: 700; }

/* Colonne d'aide */
.contact-aide {
	padding: 1.5rem;
	background: var(--couleur-fond-doux);
	border-radius: 1rem;
}
.contact-aide__titre { margin: 0 0 0.6rem; color: var(--couleur-titre); font-size: 1.1rem; }
.contact-aide__titre:not(:first-child) { margin-top: 1.5rem; }
.contact-aide__liste,
.contact-aide__liens { margin: 0; padding: 0; list-style: none; }
.contact-aide__liste li,
.contact-aide__liens li { margin: 0 0 0.45rem; }
.contact-aide a { color: var(--couleur-titre); font-weight: 600; }
.contact-aide a:hover { color: var(--couleur-bouton); }
.contact-aide__liens a { text-decoration: none; }
.contact-aide__liens a::after { content: " \2192"; }

/* Avis */
.avis__titre { margin: 0 0 1rem; color: var(--couleur-titre); font-size: 1.5rem; }
.etoiles { color: var(--couleur-accent-texte); letter-spacing: 0.08em; white-space: nowrap; }
.etoiles__vides { color: var(--couleur-bordure); }
.avis__synthese { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin: 0 0 1.75rem; }
.avis__note { color: var(--couleur-titre); font-size: 2.4rem; font-weight: 800; line-height: 1; }
.avis__synthese .etoiles { font-size: 1.4rem; }
.avis__total { color: var(--couleur-texte-doux); }
.avis__liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) {
	.avis__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.avis__carte { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 1.25rem; background: #fff; border: 1px solid var(--couleur-bordure); border-radius: 1rem; }
.avis__carte p { margin: 0; }
.avis__etoiles { font-size: 1.15rem; }
.avis__texte { flex: 1; }
.avis__texte p + p { margin-top: 0.5rem; }
.avis__auteur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; color: var(--couleur-texte-doux); font-size: 0.95rem; }
.avis__auteur strong { color: var(--couleur-titre); }
.avis__verifie { color: #14532d; font-size: 0.85rem; font-weight: 600; }
.avis__produit { color: var(--couleur-texte-doux); font-size: 0.9rem; }
.avis__produit a { color: var(--couleur-titre); }

.avis__vide {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	max-width: 36rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	background: var(--couleur-fond-doux);
	border-radius: 1rem;
	text-align: center;
}
.avis__vide p { margin: 0; }
.avis__vide-etoiles { color: var(--couleur-bordure); font-size: 2rem; letter-spacing: 0.15em; }
.avis__vide .bouton { margin-top: 0.8rem; }

/* Formulaire court au pied de chaque page */
.rappel { padding-block: 3rem; background: var(--couleur-fond-doux); border-top: 1px solid var(--couleur-bordure); }
.rappel__grille { display: grid; gap: 2rem; }
@media (min-width: 62rem) {
	.rappel__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4rem; align-items: start; }
}
.rappel__intro h2 { margin-bottom: 0.6rem; }
.rappel__intro p { max-width: 28rem; color: var(--couleur-texte-doux); }
.rappel__moyens { display: grid; gap: 0.6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.rappel__moyens a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; color: var(--couleur-titre); font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.rappel__moyens a:hover { color: var(--couleur-bouton); }
.rappel__moyens svg { flex: none; width: 1.4rem; height: 1.4rem; color: var(--couleur-bouton); }
.formulaire--court {
	max-width: none;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--couleur-bordure);
	border-radius: 1rem;
	box-shadow: 0 14px 34px -22px rgba(15, 26, 36, 0.4);
}
.formulaire--court textarea { min-height: 6.5rem; }

/* Boutons flottants : appeler et être rappelé, sur chaque page */
.appel-flottant {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.55rem;
}
.appel-flottant__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3.1rem;
	padding: 0 1.2rem;
	border-radius: 999px;
	box-shadow: 0 10px 24px -8px rgba(15, 26, 36, 0.5);
	font: 800 0.98rem/1 var(--police-texte);
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s, color 0.15s;
}
.appel-flottant__lien svg { flex: none; width: 1.35rem; height: 1.35rem; }
.appel-flottant__lien:hover { transform: translateY(-2px); }
.appel-flottant__lien--tel { background: var(--couleur-action); color: #fff; }
.appel-flottant__lien--tel:hover { background: var(--couleur-action-survol); color: #fff; }
.appel-flottant__lien--ecrire { background: #fff; box-shadow: 0 10px 24px -8px rgba(15, 26, 36, 0.5), inset 0 0 0 2px var(--couleur-titre); color: var(--couleur-titre); }
.appel-flottant__lien--ecrire:hover { background: var(--couleur-titre); color: #fff; }
/* Libellé sur deux lignes (réglage flottant_ecrire) : orange, texte foncé (contraste 6 pour 1) */
.appel-flottant__texte { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; }
.appel-flottant__texte small { font: 700 0.8rem/1 var(--police-texte); }
.appel-flottant__lien--devis { padding-block: 0.45rem; background: #f26a1b; box-shadow: 0 10px 24px -8px rgba(15, 26, 36, 0.5); color: #1b1208; }
.appel-flottant__lien--devis:hover { background: #ff8133; color: #1b1208; }
@media (prefers-reduced-motion: reduce) { .appel-flottant__lien { transition: none; } }
/* Les boutons posés dans l'angle ne doivent pas couvrir le bas du pied de page (colonne « Aide et idées », « Gérer les cookies ») :
   de la place pour un bouton, pour deux quand « Appeler » est affiché. */
@media (min-width: 40rem) {
	.pied { padding-bottom: 5rem; }
	body:has(.appel-flottant__lien--tel) .pied { padding-bottom: 8rem; }
}

/* Téléphone : une barre sur toute la largeur en bas de l'écran */
@media (max-width: 39.99rem) {
	.appel-flottant {
		right: 0;
		bottom: 0;
		left: 0;
		flex-direction: row;
		gap: 0;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1px solid var(--couleur-bordure);
		box-shadow: 0 -8px 24px rgba(15, 26, 36, 0.14);
	}
	.appel-flottant__lien { flex: 1; justify-content: center; min-height: 3.4rem; border-radius: 0; box-shadow: none; }
	.appel-flottant__lien--ecrire { box-shadow: none; }
	.pied { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
}
/* Fiche produit sur téléphone ou tablette : la barre d'achat occupe le bas, les boutons passent au-dessus en pastilles rondes */
@media (max-width: 61.99rem) {
	body.single-product .appel-flottant {
		right: 0.75rem;
		bottom: calc(5.4rem + env(safe-area-inset-bottom));
		left: auto;
		flex-direction: column;
		gap: 0.55rem;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}
	body.single-product .appel-flottant__lien { flex: none; justify-content: center; width: 3.1rem; padding: 0; border-radius: 50%; box-shadow: 0 10px 24px -8px rgba(15, 26, 36, 0.5); }
	body.single-product .appel-flottant__lien--ecrire { box-shadow: 0 10px 24px -8px rgba(15, 26, 36, 0.5), inset 0 0 0 2px var(--couleur-titre); }
	body.single-product .appel-flottant__lien span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* Bulle de demande de devis : s'ouvre au clic sur tout lien « Devis gratuit » (#devis-gratuit), comme un chatbot, avec le formulaire.
   Posée dans l'angle, par-dessus les boutons flottants ; sur téléphone elle prend la largeur de l'écran, depuis le bas. */
.devis-bulle {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	display: flex;
	flex-direction: column;
	width: min(24rem, calc(100vw - 2rem));
	max-width: none;
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	background: #fff;
	border-radius: 1rem 1rem 0.3rem 1rem;
	box-shadow: 0 22px 50px -14px rgba(15, 26, 36, 0.6), inset 0 0 0 1px var(--couleur-bordure);
	color: var(--couleur-texte);
	outline: 0;
}
.devis-bulle[hidden] { display: none; }
.devis-bulle__entete {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 0.85rem 0.85rem 1.15rem;
	background: var(--couleur-titre);
	border-radius: 1rem 1rem 0 0;
	color: #fff;
}
.devis-bulle__titre { margin: 0; color: inherit; font: 800 1.05rem/1.25 var(--police-titre, var(--police-texte)); }
.devis-bulle__fermer {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
}
.devis-bulle__fermer:hover { background: rgba(255, 255, 255, 0.18); }
.devis-bulle__fermer:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.devis-bulle__fermer svg { width: 1.2rem; height: 1.2rem; }
.devis-bulle__corps { flex: 1; min-height: 0; padding: 1.1rem 1.15rem 1.15rem; overflow-y: auto; overscroll-behavior: contain; }
.devis-bulle__corps .formulaire__ligne { margin-bottom: 0.85rem; }
.devis-bulle__corps textarea { min-height: 6rem; }
.devis-bulle__corps .formulaire__note { margin: 0 0 0.85rem; font-size: 0.85rem; }
.devis-bulle__deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.75rem; }
.devis-bulle__corps .formulaire__envoyer { width: 100%; min-width: 0; }
.devis-bulle__corps .formulaire__statut { margin-bottom: 1rem; }
.devis-bulle__corps .formulaire__statut[hidden] { display: none; }
.devis-bulle__corps button.formulaire__autre { padding: 0; background: none; border: 0; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 39.99rem) {
	.devis-bulle { right: 0.5rem; bottom: 0.5rem; left: 0.5rem; width: auto; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); }
}

/* Tchat WhatsApp : bulle ronde au-dessus du bouton « Devis gratuit » (à droite), carte de discussion au-dessus de la bulle.
   À gauche en bas de l'écran il y a la colonne des réseaux sociaux : la bulle n'y va que sur téléphone, où elle surmonte la barre de contact. */
.whatsapp-flottant {
	position: fixed;
	right: 1rem;
	bottom: 5.2rem;
	z-index: 45;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.7rem;
}
.whatsapp-flottant__bulle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 3.4rem;
	padding: 0 1.15rem 0 0.95rem;
	border: 0;
	border-radius: 999px;
	background: #1fa855;
	box-shadow: 0 10px 24px -8px rgba(15, 26, 36, 0.5);
	color: #fff;
	font: 800 0.98rem/1 var(--police-texte);
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s;
}
.whatsapp-flottant__bulle:hover { background: #178f47; transform: translateY(-2px); }
.whatsapp-flottant__bulle svg { flex: none; width: 1.7rem; height: 1.7rem; }
.whatsapp-flottant__carte {
	width: min(19rem, calc(100vw - 2rem));
	padding: 1.1rem 1.15rem 1.15rem;
	border-radius: 1rem 1rem 0.3rem 1rem;
	background: #fff;
	box-shadow: 0 18px 40px -14px rgba(15, 26, 36, 0.55), inset 0 0 0 1px var(--couleur-bordure);
	color: var(--couleur-texte);
}
.whatsapp-flottant__carte[hidden] { display: none; }
.whatsapp-flottant__nom { margin: 0 0 0.35rem; color: var(--couleur-titre); font: 800 1.02rem/1.25 var(--police-titre, var(--police-texte)); }
.whatsapp-flottant__texte { margin: 0 0 0.95rem; font-size: 0.95rem; line-height: 1.45; }
.whatsapp-flottant__ecrire {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 2.9rem;
	border-radius: 999px;
	background: #1fa855;
	color: #fff;
	font: 800 0.95rem/1 var(--police-texte);
	text-decoration: none;
}
.whatsapp-flottant__ecrire:hover { background: #178f47; color: #fff; }
.whatsapp-flottant__ecrire svg { flex: none; width: 1.35rem; height: 1.35rem; }
@media (prefers-reduced-motion: reduce) { .whatsapp-flottant__bulle { transition: none; } }
/* La bulle ne doit pas couvrir le bas du pied de page : de la place pour deux boutons, pour trois quand « Appeler » est affiché */
@media (min-width: 40rem) {
	body:has(.whatsapp-flottant) .pied { padding-bottom: 9rem; }
	body:has(.whatsapp-flottant):has(.appel-flottant__lien--tel) .pied { padding-bottom: 12.5rem; }
}
/* Téléphone : la barre de contact occupe le bas de l'écran, la bulle ronde passe au-dessus, à gauche */
@media (max-width: 39.99rem) {
	.whatsapp-flottant { right: auto; bottom: calc(4.4rem + env(safe-area-inset-bottom)); left: 0.75rem; align-items: flex-start; }
	.whatsapp-flottant__carte { border-radius: 1rem 1rem 1rem 0.3rem; }
	.whatsapp-flottant__bulle { width: 3.1rem; min-height: 3.1rem; padding: 0; justify-content: center; }
	.whatsapp-flottant__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* Fiche produit sur téléphone ou tablette : la barre d'achat occupe le bas, la bulle ronde passe au-dessus d'elle, à gauche */
@media (max-width: 61.99rem) {
	body.single-product .whatsapp-flottant { right: auto; bottom: calc(5.4rem + env(safe-area-inset-bottom)); left: 0.75rem; align-items: flex-start; }
	body.single-product .whatsapp-flottant__carte { border-radius: 1rem 1rem 1rem 0.3rem; }
	body.single-product .whatsapp-flottant__bulle { width: 3.1rem; min-height: 3.1rem; padding: 0; justify-content: center; }
	body.single-product .whatsapp-flottant__libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}