/* ==========================================================================
   ILINOVE Technologies — Page « Demande de devis »
   Feuille de style de la refonte 2026. Chargee uniquement sur cette page.
   Ne touche a aucune autre page du site.

   Palette : bleu nuit encre #101B2E, rouge de marque #E51742, corail #F4524D.
   Le corail remplace le rouge pour toute mention en petit corps sur fond
   sombre : le rouge n'y atteint que 3,7:1, en dessous du seuil WCAG AA.
   ========================================================================== */

.ilv-c-intro-row,
.ilv-c-form-row {
	--ilv-fond:   #101B2E;
	--ilv-surf:   #18253C;
	--ilv-bord:   #33415C;
	--ilv-doux:   #A9B2C4;
	--ilv-faible: #7E8798;
	--ilv-rouge:  #E51742;
	--ilv-corail: #F4524D;
}

/* --------------------------------------------------------------------------
   1. Section haute : titre editorial et tuiles chiffrees
   -------------------------------------------------------------------------- */

/* Hauteur de la section haute : elle conditionne la visibilite du formulaire
   au chargement. Les tailles de texte ont ete reduites, pas les respirations. */
.ilv-c-intro-row {
	padding: 52px 0 88px;
	overflow: visible;
}

.ilv-c-label {
	font-family: 'Raleway', sans-serif;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .2em;
	color: var(--ilv-rouge);
	margin-bottom: 22px;
}

.ilv-c-titre {
	font-family: 'Raleway', sans-serif;
	font-size: 60px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	color: #1A1A1A;
	margin: 0 0 26px;
	/* Kalium met ses titres en capitales : on revient au dessin de la maquette. */
	text-transform: none;
}

.ilv-c-titre span { color: var(--ilv-rouge); }

.ilv-c-intro {
	font-size: 17.5px;
	line-height: 1.6;
	color: #454544;
	margin: 0;
	max-width: 560px;
	text-wrap: pretty;
}

/* Chapeau des trois tuiles : il nomme ce qu'elles demontrent (48 h, 20+, 974/976)
   et donne a la page un second niveau de titre. Volontairement discret pour ne
   pas concurrencer le H1 de la colonne de gauche. */
.ilv-c-tuiles-titre {
	font-family: 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #1A1A1A;
	margin: 0;
	padding-top: 26px;
	line-height: 1.4;
}

.ilv-c-tuiles-titre::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	background: var(--ilv-rouge);
	margin-top: 12px;
}

.ilv-c-tuiles {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 24px;
}

.ilv-c-tuiles-titre + .ilv-c-tuiles { padding-top: 18px; }

.ilv-c-tuile {
	border: 1px solid #E4E4E3;
	padding: 16px 22px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.ilv-c-tuile--marque {
	background: var(--ilv-fond);
	border-color: var(--ilv-fond);
}

.ilv-c-tuile svg {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	stroke: var(--ilv-rouge);
	fill: none;
}

.ilv-c-tuile--marque svg { stroke: var(--ilv-corail); }

.ilv-c-val {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.ilv-c-chiffre {
	font-family: 'Raleway', sans-serif;
	font-size: 42px;
	font-weight: 900;
	line-height: .9;
	letter-spacing: -.04em;
	color: #1A1A1A;
}

.ilv-c-unite {
	font-family: 'Raleway', sans-serif;
	font-size: 22px;
	font-weight: 800;
	color: var(--ilv-rouge);
}

.ilv-c-sep {
	width: 2px;
	height: 29px;
	background: var(--ilv-rouge);
	align-self: center;
	display: inline-block;
}

.ilv-c-tuile--marque .ilv-c-chiffre { color: #FFFFFF; }
.ilv-c-tuile--marque .ilv-c-unite   { color: var(--ilv-corail); }

.ilv-c-libelle {
	font-size: 14px;
	line-height: 1.5;
	color: #676766;
	margin: 7px 0 0;
}

.ilv-c-tuile--marque .ilv-c-libelle { color: var(--ilv-doux); }

/* La bande de reassurance ne sert qu'au mobile : voir section 6. */
.ilv-c-bande { display: none; }

/* --------------------------------------------------------------------------
   2. Section basse : aplat bleu nuit
   -------------------------------------------------------------------------- */

.ilv-c-form-row {
	background: var(--ilv-fond);
	padding: 64px 0 84px;
	/* Indispensable : le visuel remonte au-dessus de la section, un overflow
	   masque le couperait net a la limite des deux zones.
	   Le !important est necessaire : WPBakery pose overflow:hidden en style
	   inline sur les rangees pleine largeur, au chargement de la page. */
	overflow: visible !important;
}

.parent--ilv-c-form-row,
.parent--ilv-c-intro-row,
.vc-row-container.row-stretch {
	overflow: visible !important;
}

/* Le visuel remonte dans la section claire. La colonne entiere est decalee,
   les coordonnees reprennent leur place par un padding compensatoire. */
.ilv-c-gauche {
	margin-top: -146px;
	position: relative;
	z-index: 2;
}

.ilv-c-visuel {
	margin: 0;
	position: relative;
	box-shadow: 0 20px 56px rgba(0, 0, 0, .45);
	line-height: 0;
}

.ilv-c-visuel .ilv-c-img {
	display: block;
	width: 100%;
	height: 460px;
	object-fit: cover;
}

.ilv-c-visuel figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 20px 24px;
	background: linear-gradient(to top, rgba(10, 17, 30, .92), rgba(10, 17, 30, 0));
	line-height: 1.4;
}

.ilv-c-vt {
	display: block;
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #FFFFFF;
}

.ilv-c-vs {
	display: block;
	font-size: 13px;
	color: var(--ilv-doux);
	margin-top: 5px;
}

.ilv-c-coord { padding-top: 40px; }

.ilv-c-coord-label {
	font-family: 'Raleway', sans-serif;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .18em;
	color: var(--ilv-corail);
	margin: 0 0 26px;
}

.ilv-c-tel { margin: 0 0 26px; }

.ilv-c-tel a {
	font-family: 'Raleway', sans-serif;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.015em;
	line-height: 1.2;
	color: var(--ilv-corail);
	text-decoration: none;
}

.ilv-c-tel a:hover { color: #F23630; }

.ilv-c-coord hr {
	border: 0;
	height: 1px;
	background: var(--ilv-bord);
	margin: 0 0 26px;
}

.ilv-c-adr {
	font-size: 15px;
	line-height: 1.75;
	color: var(--ilv-doux);
	margin: 0 0 26px;
}

.ilv-c-note {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ilv-faible);
	margin: 0;
}

.ilv-c-form-titre {
	font-family: 'Raleway', sans-serif;
	font-size: 34px;
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: -.02em;
	margin: 0 0 12px;
}

.ilv-c-form-intro {
	font-size: 16px;
	line-height: 1.65;
	color: var(--ilv-doux);
	margin: 0 0 44px;
	max-width: 560px;
}

/* --------------------------------------------------------------------------
   3. Habillage du formulaire Contact Form 7
   Chaque champ sort en <p><label>Texte<br><span data-name="..."><input>.
   La grille cible ces <p> par le data-name du champ qu'ils contiennent.
   -------------------------------------------------------------------------- */

.ilv-c-droite .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 24px;
}

.ilv-c-droite .wpcf7-form > p { margin: 0; }
.ilv-c-droite .wpcf7-form > p > br { display: none; }
.ilv-c-droite .wpcf7-form > fieldset.hidden-fields-container { display: none; }

/* Les blocs qui occupent toute la largeur */
.ilv-c-droite .wpcf7-form > p:has([data-name="checkbox-276"]),
.ilv-c-droite .wpcf7-form > p:has([data-name="your-message"]),
.ilv-c-droite .wpcf7-form > p:has([data-name="checkbox-925"]),
.ilv-c-droite .wpcf7-form > p:has(.wpcf7-submit),
.ilv-c-droite .wpcf7-form > .ilv-c-mention,
.ilv-c-droite .wpcf7-form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

/* Intitules */
.ilv-c-droite .wpcf7-form > p > label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ilv-doux);
	margin: 0;
}

/* Champs de saisie. 16px minimum : en dessous, Safari sur iPhone zoome
   automatiquement a la mise au point du champ et casse la mise en page. */
.ilv-c-droite .wpcf7-form input[type="text"],
.ilv-c-droite .wpcf7-form input[type="email"],
.ilv-c-droite .wpcf7-form input[type="tel"],
.ilv-c-droite .wpcf7-form textarea {
	width: 100%;
	background: #FFFFFF;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #1A1A1A;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: none;
	padding: 0 18px;
	margin-top: 9px;
}

.ilv-c-droite .wpcf7-form input[type="text"],
.ilv-c-droite .wpcf7-form input[type="email"],
.ilv-c-droite .wpcf7-form input[type="tel"] {
	height: 56px;
}

.ilv-c-droite .wpcf7-form textarea {
	height: 196px;
	padding: 18px;
	line-height: 1.7;
	resize: vertical;
}

.ilv-c-droite .wpcf7-form input:focus,
.ilv-c-droite .wpcf7-form textarea:focus {
	outline: 0;
	box-shadow: 0 0 0 2px var(--ilv-corail);
}

.ilv-c-droite .wpcf7-form ::placeholder {
	color: #B4B4B3;
	opacity: 1;
}

/* Objet : trois choix presentes en pastilles cliquables */
.ilv-c-droite .wpcf7-checkbox,
.ilv-c-droite .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.ilv-c-droite .wpcf7-list-item { margin: 0; }

.ilv-c-droite p:has([data-name="checkbox-276"]) .wpcf7-list-item > label {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 22px;
	border: 1px solid var(--ilv-bord);
	color: var(--ilv-doux);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}

.ilv-c-droite p:has([data-name="checkbox-276"]) .wpcf7-list-item > label:hover {
	border-color: var(--ilv-corail);
	color: #FFFFFF;
}

.ilv-c-droite p:has([data-name="checkbox-276"]) .wpcf7-list-item > label:has(input:checked) {
	background: var(--ilv-rouge);
	border-color: var(--ilv-rouge);
	color: #FFFFFF;
	font-weight: 700;
}

.ilv-c-droite p:has([data-name="checkbox-276"]) input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #FFFFFF;
}

/* Consentement */
.ilv-c-droite p:has([data-name="checkbox-925"]) .wpcf7-list-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ilv-c-droite p:has([data-name="checkbox-925"]) input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	flex-shrink: 0;
	accent-color: var(--ilv-rouge);
}

.ilv-c-droite p:has([data-name="checkbox-925"]) .wpcf7-list-item-label {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ilv-doux);
	letter-spacing: normal;
	text-transform: none;
}

/* Lien vers la politique de confidentialite dans la case de consentement.
   Corail et non rouge de marque : a 14px sur fond sombre, le rouge #E51742 ne
   donne que 3,7:1, sous le seuil AA de 4,5. Le corail passe a 4,6.
   Le soulignement est conserve : un lien dans un texte doit rester
   identifiable autrement que par la couleur seule. */
.ilv-c-droite p:has([data-name="checkbox-925"]) .wpcf7-list-item-label a {
	color: var(--ilv-corail);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .15s;
}

.ilv-c-droite p:has([data-name="checkbox-925"]) .wpcf7-list-item-label a:hover {
	color: #FFFFFF;
}

.ilv-c-droite p:has([data-name="checkbox-925"]) .wpcf7-list-item-label a:focus-visible {
	outline: 2px solid var(--ilv-corail);
	outline-offset: 3px;
	color: #FFFFFF;
}

/* Mention sur la suite donnee a la demande, juste avant le bouton. */
.ilv-c-droite .ilv-c-mention {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--ilv-faible);
	margin: 0;
	padding: 16px 18px;
	border-left: 2px solid var(--ilv-bord);
	background: var(--ilv-surf);
}

/* Bouton d'envoi */
.ilv-c-droite .wpcf7-submit {
	height: 62px;
	padding: 0 46px;
	background: var(--ilv-rouge);
	border: 0;
	border-radius: 0;
	color: #FFFFFF;
	font-family: 'Raleway', sans-serif;
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: .03em;
	cursor: pointer;
	transition: background .15s;
	width: auto;
}

.ilv-c-droite .wpcf7-submit:hover { background: #F23630; }

/* Messages de Contact Form 7 */
.ilv-c-droite .wpcf7-not-valid-tip {
	color: #FF8A84;
	font-size: 13.5px;
	letter-spacing: normal;
	text-transform: none;
	margin-top: 7px;
}

.ilv-c-droite .wpcf7-response-output {
	border-color: var(--ilv-corail);
	color: #FFFFFF;
	font-size: 15px;
	margin: 8px 0 0;
	padding: 16px 18px;
}

/* --------------------------------------------------------------------------
   4. Tablette : la grille se resserre avant de basculer
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.ilv-c-titre   { font-size: 62px; }
	.ilv-c-chiffre { font-size: 42px; }
	.ilv-c-gauche  { margin-top: -190px; }
	.ilv-c-visuel .ilv-c-img { height: 400px; }
}

@media (max-width: 991px) {
	.ilv-c-intro-row { padding: 56px 0 110px; }
	.ilv-c-form-row  { padding: 72px 0 64px; }
	.ilv-c-titre     { font-size: 52px; }
	.ilv-c-gauche    { margin-top: -150px; }
	.ilv-c-visuel .ilv-c-img { height: 340px; }
	.ilv-c-tel a     { font-size: 26px; }
	.ilv-c-droite .wpcf7-form { gap: 18px 20px; }
}

/* --------------------------------------------------------------------------
   5. Mobile : le formulaire remonte juste sous le titre

   Les deux rangees deviennent transparentes (display: contents) pour que
   leurs quatre colonnes se retrouvent dans un meme conteneur en colonne.
   L'ordre de lecture devient : titre, bande de reassurance, formulaire,
   tuiles, visuel et coordonnees. Le premier champ passe d'environ 1160 px
   a 420 px du haut de page.

   L'aplat bleu nuit ne peut plus etre porte par la rangee, qui n'a plus de
   boite : il est reporte sur les colonnes concernees.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

	#wpb-content-root {
		display: flex;
		flex-direction: column;
	}

	.ilv-c-intro-row,
	.ilv-c-form-row,
	.parent--ilv-c-intro-row,
	.parent--ilv-c-form-row,
	.vc-row-container:has(.ilv-c-form-row),
	.vc-row-container:has(.ilv-c-intro-row) {
		display: contents;
	}

	.ilv-c-intro-col  { order: 1; }
	.ilv-c-droite     { order: 2; }
	.ilv-c-tuiles-col { order: 3; }
	.ilv-c-gauche     { order: 4; }

	.ilv-c-intro-col,
	.ilv-c-droite,
	.ilv-c-tuiles-col,
	.ilv-c-gauche {
		width: 100% !important;
		float: none !important;
		padding: 0 !important;
	}

	/* WPBakery ajoute un padding interne a chaque colonne. On le neutralise
	   ici pour que les aplats bleus aient tous exactement la meme largeur :
	   sans cela, la bande et le formulaire se decalent en escalier. */
	.ilv-c-intro-col > .vc_column-inner,
	.ilv-c-droite > .vc_column-inner,
	.ilv-c-tuiles-col > .vc_column-inner,
	.ilv-c-gauche > .vc_column-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.ilv-c-intro-col  { padding: 32px 24px 0 !important; }
	.ilv-c-droite     { background: var(--ilv-fond); padding: 32px 24px 42px !important; }
	.ilv-c-tuiles-col { padding: 40px 24px 34px !important; }
	.ilv-c-gauche     { background: var(--ilv-fond); margin-top: 0; padding: 0 0 38px !important; }

	.ilv-c-titre { font-size: 40px; margin-bottom: 16px; }
	.ilv-c-label { margin-bottom: 16px; font-size: 11.5px; }
	.ilv-c-intro { font-size: 16px; line-height: 1.55; }

	/* La colonne porte deja son propre padding haut. */
	.ilv-c-tuiles-titre { padding-top: 0; font-size: 12.5px; }

	/* Bande de reassurance : le delai et le telephone, seuls elements
	   qui font agir, restent au-dessus du formulaire. */
	/* La bande deborde des marges de sa colonne pour se caler exactement sur
	   l'aplat du formulaire : les deux ne font plus qu'un seul bloc bleu. */
	.ilv-c-bande {
		display: flex;
		flex-direction: column;
		gap: 14px;
		background: var(--ilv-fond);
		padding: 22px 24px 6px;
		margin: 30px -24px 0;
	}

	.ilv-c-intro-col { padding-bottom: 0 !important; }

	.ilv-c-bande hr {
		border: 0;
		height: 1px;
		background: var(--ilv-bord);
		margin: 0;
	}

	.ilv-c-bande-l {
		display: flex;
		align-items: center;
		gap: 11px;
		margin: 0;
	}

	.ilv-c-bande-l svg {
		width: 19px;
		height: 19px;
		flex-shrink: 0;
		stroke: var(--ilv-corail);
		fill: none;
	}

	.ilv-c-bande-l span {
		font-size: 14.5px;
		font-weight: 700;
		color: #FFFFFF;
	}

	.ilv-c-bande-l a {
		font-family: 'Raleway', sans-serif;
		font-size: 19px;
		font-weight: 800;
		color: var(--ilv-corail);
		text-decoration: none;
	}

	/* Formulaire sur une seule colonne */
	.ilv-c-droite .wpcf7-form {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.ilv-c-form-titre { font-size: 25px; margin-bottom: 26px; }
	.ilv-c-form-intro { display: none; }

	.ilv-c-droite .wpcf7-form input[type="text"],
	.ilv-c-droite .wpcf7-form input[type="email"],
	.ilv-c-droite .wpcf7-form input[type="tel"] { height: 52px; padding: 0 16px; }

	.ilv-c-droite .wpcf7-form textarea { height: 140px; padding: 16px; }

	/* Choix empiles : 52 px de haut, au-dessus du minimum tactile de 44 px */
	.ilv-c-droite .wpcf7-checkbox,
	.ilv-c-droite .wpcf7-radio { flex-direction: column; gap: 10px; }
	.ilv-c-droite p:has([data-name="checkbox-276"]) .wpcf7-list-item > label { width: 100%; padding: 0 18px; }

	.ilv-c-droite .wpcf7-submit { width: 100%; padding: 0; height: 58px; font-size: 16px; }

	/* Tuiles et visuel, sous le bouton d'envoi */
	.ilv-c-tuiles { padding-top: 0; gap: 12px; }
	.ilv-c-tuile  { padding: 20px; gap: 18px; }
	.ilv-c-tuile svg { width: 26px; height: 26px; }
	.ilv-c-chiffre   { font-size: 36px; }
	.ilv-c-unite     { font-size: 21px; }
	.ilv-c-sep       { height: 25px; }
	.ilv-c-tuile--marque { background: transparent; border-color: #E4E4E3; }
	.ilv-c-tuile--marque svg { stroke: var(--ilv-rouge); }
	.ilv-c-tuile--marque .ilv-c-chiffre { color: #1A1A1A; }
	.ilv-c-tuile--marque .ilv-c-unite   { color: var(--ilv-rouge); }
	.ilv-c-tuile--marque .ilv-c-libelle { color: #676766; }

	.ilv-c-visuel { box-shadow: none; }
	.ilv-c-visuel .ilv-c-img { height: 300px; }
	.ilv-c-coord { padding: 32px 24px 0; }
	.ilv-c-coord-label,
	.ilv-c-tel,
	.ilv-c-coord hr { display: none; }
	.ilv-c-adr  { margin-bottom: 18px; font-size: 14.5px; }
	.ilv-c-note { font-size: 13.5px; }
}