/* -----------------------------------------------------------------
	 Couleurs principales (variables)
------------------------------------------------------------------ */
:root {
	--color-primary: #23E8C2;
	--color-text: #161515;
	--color-border: #23E8C2;
	--font-base: Open Sans, Arial, sans-serif;
	--font-title: Josefin Sans, Helvetica, Arial, Lucida, sans-serif;
}

/* -----------------------------------------------------------------
	 Style global du formulaire
------------------------------------------------------------------ */
form#forminator-module-1066 {
	font-family: var(--font-base);
	color: var(--color-text);
	padding: 0 1.5rem 1.5rem 1.5rem;
	margin: 0 auto;   /* center if you like */
}

/* Pour espacer les sections */
form#forminator-module-1066 .forminator-row {
	margin-bottom: 1rem;
}

form#forminator-module-1066 .forminator-row .forminator-field-section {
	margin: 2rem auto;
}
form#forminator-module-1066 .forminator-row .forminator-field-section#section-1{
	margin-top: 0;
}

/* -----------------------------------------------------------------
	 Titres de section ( ex. "1. Sélectionnez le matériau...")
------------------------------------------------------------------ */
form#forminator-module-1066 .forminator-title {
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: var(--color-primary);
	font-family: var(--font-title);
}

/* Petites bordures horizontales */
form#forminator-module-1066 hr.forminator-border {
	border: 1px solid var(--color-border) !important; 
	margin: 0.5rem 0 1rem 0;
}

/* -----------------------------------------------------------------
	 Labels
------------------------------------------------------------------ */
form#forminator-module-1066 label.forminator-label {
	display: block; 
	font-weight: 600;
	font-size: 1.1rem;
	margin-bottom: 0.3rem;
	color: var(--color-text);
	font-family: var(--font-title);
}

/* Pour le ( * ) des champs obligatoires */
form#forminator-module-1066 span.forminator-required {
	color: crimson; /* la couleur de l'astérisque pour "obligatoire" */
}

/* -----------------------------------------------------------------
	 Inputs (text, email, number, etc.)
------------------------------------------------------------------ */
form#forminator-module-1066 input.forminator-input,
form#forminator-module-1066 select.forminator-select--field, form#forminator-module-1066 textarea.forminator-textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 0.95rem;
	color: var(--color-text);
	box-sizing: border-box;
	background-color: #fffaff;
}

/* Focus sur les champs */
form#forminator-module-1066 input.forminator-input:focus,
form#forminator-module-1066 select.forminator-select--field:focus, form#forminator-module-1066 textarea.forminator-textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(35, 232, 194, 0.2);
}

/* -----------------------------------------------------------------
	 Champs <select> 
	 (tu peux personnaliser le style de la flèche, etc.)
------------------------------------------------------------------ */
form#forminator-module-1066 select.forminator-select--field {
	background: #fffaff url("data:image/svg+xml;utf8,<svg fill='%23161515' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>")
		no-repeat calc(100% - 0.75rem) center / 18px 18px;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none; 
	padding-right: 2rem; 
}

/* -----------------------------------------------------------------
	 Boutons (par ex. "Demander votre devis")
------------------------------------------------------------------ */
form#forminator-module-1066 button.forminator-button-submit {
	background: var(--color-primary);
	color: #fffaff;
	border: none;
	border-radius: 3px;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.7rem 1.2rem;
	cursor: pointer;
	transition: background 0.3s ease;
	border: 1px solid var(--color-primary);
	transition: all 0.3s ease-in-out;
}

form#forminator-module-1066 button.forminator-button-submit:hover {
	background: transparent; /* foncé un peu le turquoise au hover */
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
	transform: scale(1.04);
}

/* -----------------------------------------------------------------
	 Champs répétables (repeater) 
	 (ex: "Ajouter un plan", "Supprimer un plan")
------------------------------------------------------------------ */
form#forminator-module-1066 .forminator-repeater-action-link {
	color: var(--color-primary);
	text-decoration: none;
	font-weight: 500;
	margin-right: 1rem;
}

form#forminator-module-1066 .forminator-repeater-action-link:hover {
	text-decoration: underline;
}

/* Groupes de champs repeater*/
form#forminator-module-1066 .forminator-field-group .forminator-grouped-fields {
    background-color: #f6f6f6;
	padding: 1.5rem 1.5rem 0.1rem;
    border-radius: 8px;
}
/* -----------------------------------------------------------------
	Messages d'erreur ou de validation
------------------------------------------------------------------ */
form#forminator-module-1066 .forminator-response-message.forminator-error {
	background: #ffecec;
	color: #d90f0f;
	padding: 0.8rem;
	border-radius: 3px;
	margin-bottom: 1rem;
	border: 1px solid #d90f0f;
}

/* Masque le conteneur si aucun message n'est présent */
form#forminator-module-1066 .forminator-response-message.forminator-error:empty {
	display: none !important;
	padding: 0;
	margin: 0;
	border: none;
}

/* -----------------------------------------------------------------
	Champs "group" 
	(Pour aligner sur la même ligne, etc. 
		selon si tu veux plus de colonnes)
------------------------------------------------------------------ */
form#forminator-module-1066 .forminator-col-4 {
	width: 33.3333%;
	float: left;
	padding: 0 0.5rem;
	box-sizing: border-box;
}

form#forminator-module-1066 .forminator-col-6 {
	width: 50%;
	float: left;
	padding: 0 0.5rem;
	box-sizing: border-box;
}

form#forminator-module-1066 .forminator-col-12 {
	width: 100%;
	float: left;
	box-sizing: border-box;
}

/* Remise en forme après le .forminator-row */
form#forminator-module-1066 .forminator-row:after {
	content: "";
	display: block;
	clear: both;
}

/* -----------------------------------------------------------------
	Petits ajustements divers
------------------------------------------------------------------ */
form#forminator-module-1066 .forminator-col-12#select-8 {
	padding: 0 8px;
}
form#forminator-module-1066 .forminator-field-checkbox input[type="checkbox"] {
	position: absolute; 
	opacity: 0;
	pointer-events: none;
	}

	form#forminator-module-1066 .forminator-field-checkbox .forminator-field {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	/*
	2) Le label devient le conteneur “cliquable”.
		On laisse "display: inline-flex;" si tu veux aligner
		la case et le texte sur la même ligne.
  */
	form#forminator-module-1066 .forminator-field-checkbox label.forminator-checkbox {
	display: inline-flex;
	align-items: center;
	margin-right: 1rem;
	cursor: pointer;
	position: relative;
	}

	/*
	3) Style visuel de la boîte custom
		(c’est la <span class="forminator-checkbox-box">)
  */
	form#forminator-module-1066 .forminator-checkbox-box {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid #aaa;
	border-radius: 3px;
	margin-right: 0.5rem;
	transition: background 0.2s;
	box-sizing: border-box;
	}

	form#forminator-module-1066 .forminator-field-checkbox input[type="checkbox"]:checked ~ .forminator-checkbox-box {
		background-color: var(--color-primary);  /* #23E8C2 par ex. */
		border-color: var(--color-primary);
	}

	/* -----------------------------------------------------------
	2 façonnages par ligne (>=768 px) – 
	on cible le .forminator-row qui contient un champ .cs-faconnage
	--------------------------------------------------------------*/
	@media (min-width: 768px) {
		
		.forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row:has(.cs-faconnage) {
			/* empêche la ligne de prendre 100 % */
			width: 50% !important;
			float: left;               /* même logique que .forminator-col-* */
			padding-right: 1%;         /* petite gouttière */
			padding-left: 1%;         /* petite gouttière */
			box-sizing: border-box;
			margin-left: 0;
			margin-right: 0;
		}
		/* .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row:has(.cs-faconnage):nth-child(even){
			padding-right: 0;
		} */
		
		/* pas de gouttière à droite sur la 2ᵉ colonne */
		.forminator-row:has(.cs-faconnage):nth-of-type(2n) {
			padding-right: 0;
		}
		form#forminator-module-1066 .forminator-col-12.cs-faconnage {
			padding-left: 0;
			padding-right: 0;
		}
	/*  <<< CORRECTIF >>> 
    Désactive le flottement pour toutes les autres lignes,
    afin qu’elles repartent à la pleine largeur  */
		.forminator-row:not(:has(.cs-faconnage)){
			clear:both;         /* force un retour à la ligne */
		}
	}

	/* ↓ mobile : on revient à une colonne */
	@media (max-width: 767.98px) {
		.forminator-row:has(.cs-faconnage) {
			width: 100% !important;
			float: none;
			padding-right: 0;
		}
	}
	.cs-cost { font-size: 0.9rem; line-height: 1.3; }

	.infos-guide-form{
		font-weight: 600;
		letter-spacing: 0.2px;
		display: flex;
		align-items: center;
	}
	.infos-guide-form img {
		width: 25px;
		height: auto;
		margin-right: 10px;
	}


/* -----------------------------------------------------------------
	 Inputs type="radio"
------------------------------------------------------------------ */

form#forminator-module-1066 .forminator-field-radio {
	padding-top: 0.8rem;
}

form#forminator-module-1066 .forminator-field-radio .forminator-label {
	font-size: 1rem;
}

form#forminator-module-1066 .forminator-field-radio label.forminator-radio{
	margin: 0 1rem;
}
form#forminator-module-1066 .forminator-field-radio label.forminator-radio .forminator-radio-label {
	font-size: 1rem;
	margin-left: 5px;
}

/* =========================================================
   Infobulles (tooltips) pour les champs de façonnage
   — remplace l'ancienne gestion de descriptions visibles
   — aucune modification HTML/JS requise
   ======================================================== */

/* 1) Le conteneur de champ sert d’ancre au tooltip */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-field{
  position: relative;
}

/* 2) On cache la description par défaut et on la positionne
      en “bulle” au-dessus du champ */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-description{
  display: none;                 /* caché par défaut */
  position: absolute;
  left: 0;
  top: -0.35rem;                 /* point d’ancrage sous le label */
  transform: translateY(-100%);  /* place la bulle au-dessus */
  background: #161515;
  color: #fff;
  font-size: .85rem;
  line-height: 1.3;
  padding: .5rem .6rem;
  border-radius: 6px;
  max-width: 34rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  z-index: 50;
  white-space: normal;           /* retour à la ligne autorisé */
  margin: 0;                     /* annule toute marge résiduelle */
  min-height: 0;                 /* annule la réserve d’espace */
}

/* Petite flèche du tooltip */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-description::after{
  content: "";
  position: absolute;
  left: 12px;
  bottom: -6px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #161515 transparent transparent transparent;
}

/* 3) Icône info uniquement si une description existe */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-label{
  position: relative;
  padding-right: 1.35rem;        /* réserve pour l’icône éventuelle à droite */
  /* pas de cursor par défaut: seulement si description présente */
}

/* Icône ℹ️ à droite du label — masquée par défaut */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-label::after{
  content: "\2139";              /* ℹ */
  position: absolute;
  right: 0;
  top: .05rem;
  font-size: .95rem;
  line-height: 1;
  color: #9aa0a6;
  border: 1px solid #c5c9cc;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: none;                 /* ← masquée par défaut */
  align-items: center;
  justify-content: center;
  background: #fffaff;
}

/* Afficher l’icône ET le curseur “aide” seulement si une description non vide est présente */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-field:has(.forminator-description:not(:empty)) .forminator-label{
  cursor: help;
}
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-field:has(.forminator-description:not(:empty)) .forminator-label::after{
  display: inline-flex;
}

/* 4) Affichage du tooltip au survol du label (ou de l’icône) et pendant la saisie
      NB: on utilise le sélecteur général ~ car la description n’est pas forcément juste après le label */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-field:has(.forminator-description) .forminator-label:hover ~ .forminator-description{
  display: block;
}
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-field:focus-within .forminator-description{
  display: block;
}
/* NEW: afficher la bulle au survol du label (incl. l’icône),
   quelle que soit la position de .forminator-description dans le champ */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-field:has(.forminator-label:hover) .forminator-description{
  display: block;
}
/* Aussi lors d’un clic maintenu sur le label */
form#forminator-module-1066 .forminator-col-12.cs-faconnage .forminator-field:has(.forminator-label:active) .forminator-description{
  display: block;
}

/* 5) Espacement plus compact entre les champs façonnage */
form#forminator-module-1066 .forminator-col-12.cs-faconnage{
  margin-bottom: .5rem;
}

/* =========================================================
Encart "Ajustement commercial" (admin)
======================================================== */
#cs-admin-adjust{
	border: 1px dashed var(--color-primary);
	background: #f7fffd;
	padding: 12px 14px;
	margin: 12px 0;
	border-radius: 6px;
	box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

#cs-admin-adjust > div:first-child{
	font-family: var(--font-title);
	color: var(--color-primary);
	font-weight: 700;
	letter-spacing: .2px;
	margin: 0 0 8px 0 !important; /* prime sur l’inline existant */
}

#cs-admin-adjust label{
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-title);
	font-weight: 600;
	margin: 6px 0;
}

#cs-admin-adjust input[type="number"],
#cs-admin-adjust input[type="text"]{
	padding: 6px 8px;
	border: 1px solid #cfd4d8;
	border-radius: 4px;
	background: #fffaff;
	outline: none;
	transition: box-shadow .2s ease, border-color .2s ease;
}

#cs-admin-adjust input[type="number"]:focus,
#cs-admin-adjust input[type="text"]:focus{
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(35,232,194,.2);
}
#cs-admin-adjust select{
	padding: 6px 8px;
	border: 1px solid #cfd4d8;
	border-radius: 4px;
	background: #fffaff;
	outline: none;
	transition: box-shadow .2s ease, border-color .2s ease;
	max-width: 72px;
}
#cs-admin-adjust select:focus{
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px rgba(35,232,194,.2);
}

/* Largeurs alignées sur l’inline JS */
#cs-admin-adjust #cs-admin-adjust-amount{ max-width: 140px; }
#cs-admin-adjust #cs-admin-adjust-reason{ max-width: 320px; }

/* Badge optionnel si besoin */
#cs-admin-adjust .cs-admin-badge{
	display: inline-block;
	padding: 2px 6px;
	margin-left: 6px;
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	color: var(--color-primary);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2px;
}

/* -----------------------------------------------------------------
	Fin du CSS
------------------------------------------------------------------ */