/*
 _______  ______   _______  _______  ______   _______    _______  ______   _______  _______  _______  _  _  _  _______  ______   _     _
(_______)(_____ \ (_______)(_______)(_____ \ (_______)  (_______)(_____ \ (_______)(_______)(_______)(_)(_)(_)(_______)(_____ \ (_)   | |
 _        _____) ) _____    _______   ____) ) _____      _____    _____) ) _______  _  _  _  _____    _  _  _  _     _  _____) ) _____| |
| |      |  __  / |  ___)  |  ___  | / ____/ |  ___)    |  ___)  |  __  / |  ___  || ||_|| ||  ___)  | || || || |   | ||  __  / |  _   _)
| |_____ | |  \ \ | |_____ | |   | || (_____ | |        | |      | |  \ \ | |   | || |   | || |_____ | || || || |___| || |  \ \ | |  \ \
 \______)|_|   |_||_______)|_|   |_||_______)|_|        |_|      |_|   |_||_|   |_||_|   |_||_______) \_____/  \_____/ |_|   |_||_|   \_)

Version 0.9.6.0
Date 02/01/2015
*/

/* ################################################################################################################																		     *
														IMPORTS
 *###############################################################################################################*/


@import url(https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap);
/*@import url("http://fonts.googleapis.com/css?family=Lato:300,400,900");*/

/*font-family: 'Open Sans', Arial, sans-serif;*/



/* ################################################################################################################																		     *
														BASICS
 *###############################################################################################################*/


	html, body { margin: 0; padding: 0; border: 0; }
	body{
		font-size:15px; background: #f3f6fa;
		color: #7c8081;
		font-family: 'Lato', sans-serif;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.75em;
	}

	body.is-loading * {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-o-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

	input, select, textarea {
		color: #7c8081;
		font-family: 'Lato', sans-serif;
		font-size: 15px;
		font-weight: 300;
		letter-spacing: 0.025em;
		line-height: 1.75em;
	}

	a {
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		color: #3fb1a3;
		text-decoration: none;
		border-bottom: dotted 1px;
	}

		a:hover {
			border-bottom-color: transparent;
			text-decoration: none;
			/*color: #666; */
		}

		a:active, a:focus { outline:0; }
		a img { border:0; }


	strong, b {
		font-weight: 400;
	}

	p, ul, ol, dl, table, blockquote {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: inherit;
		font-weight: 300;
		line-height: 1.75em;
		margin-bottom: 1em;
		text-transform: uppercase;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
			border: 0;
		}

	h2 {
		font-size: 1.5em;
		letter-spacing: 0.1em;
	}

	h3 {
		font-size: 1.15em;
		letter-spacing: 0.025em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border-top: solid 1px rgba(124, 128, 129, 0.2);
		border: 0;
		margin-bottom: 1.5em;
	}

	blockquote {
		border-left: solid 0.5em rgba(124, 128, 129, 0.2);
		font-style: italic;
		padding: 1em 0 1em 2em;
	}

	pre {
		margin:10px; padding:5px;
		background:#fafafa; border:1px dashed #ebebeb;
		font-family:Arial, Trebuchet MS, Helvetica, sans-serif;
		font-size:12px;
	}

	/**
	 * Lists
	 */
	ul { margin:0; padding:0; }
	li { list-style-type:none;}

	dl { margin:0; padding:0; }
	dt {}
	dd {}



/* ################################################################################################################																		     *
														ELEMENTS
 *###############################################################################################################*/

/* Table */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tbody tr {
				border-bottom: solid 1px rgba(124, 128, 129, 0.2);
			}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				font-weight: 400;
				padding: 0.5em 1em 0.5em 1em;
				text-align: left;
			}

			table.default thead {
				background: #7c8081;
				color: #fff;
			}




/* Form */

	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea {
		-moz-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-o-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: none;
		border: solid 1px rgba(124, 128, 129, 0.2);
		color: inherit;
		display: block;
		padding: 0.75em;
		text-decoration: none;
		width: 100%;
		outline: 0;
		border-right-width: 20px;
		border-right-style: solid;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"] {
		line-height: 1em;
	}

	.missingField label, .invalidField label { color:#ec0001; }
	.missingField input, .missingField textarea, .missingField select, .invalidField input, .invalidField textarea, .invalidField select { border-color:#ec0001; }

	.formErrors { margin:0; padding:10px 0 10px 0; }
	.formErrors li { list-style:none; margin:0px 0 5px 0; line-height:16px; color:#ec0001;}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border-color: #83d3c9;
	}





/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-o-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-o-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background: none;
		border: solid 1px;
		color: inherit;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 900;
		letter-spacing: 2px;
		min-width: 18em;
		padding: 0.5em 0.75em;
		line-height: 1.75em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		.button:hover {
			background: rgba(188, 202, 206, 0.15);
			border-color: inherit;
		}



/* Google Map / Vcard */


	#jGMapW { width:700px; height:400px; margin:10px auto; border:1px solid #ccc; background:#fafafa; }
	#jGMapW .geo{ display:none;}
	#jGMap { width:700px; height:400px; }

	#Content .vcard p { margin:0; padding:0; font-size:1.2em;}
	#Content .vcard .adr .street-address { display:block; }
	#Content .vcard .tel .type, .vcard .uri { display:none; }



/* LANGS */


	#LangLinks{ z-index:1000; position:absolute; right:10px; top: 3px; }
	#LangLinks li { width: 24px; height: 18px; float: left; margin-right: 8px;}
	#LangLinks li.last{ margin: 0;}
	#LangLinks li a { display: block; height: 100%; background-image: url(zims/buttons/flags.png); border: none; }

	#LangLinks li a.disabled{ background-image: url(zims/buttons/flags-disabled.png); }
	#LangLinks li a:hover{
		background-image: url(zims/buttons/flags.png);
		box-shadow: 0px 0px 3px #ffffff;
	}
	.hiddenData, #ConceptionCredit span, #LangLinks li a span
	{display: none;}
	#FrLink{ background-position: -24px top; } #EnLink{ background-position: 0 top; }
	#EsLink{ background-position: -48px top; } #CaLink{ background-position: -192px top; }
	#DeLink{ background-position: -72px top; }




/* Specials */


	 /**
	 * Floating elems
	 */
	.float
	{display:inline; float:left;}

	/**
	 * Away elems
	 */
	.away
	{position: absolute; top: -99999px;}
	.awayText
	{text-indent: -9999px; overflow: hidden; }
	.hidden
	{display: none;}

	 /**
	 * WRAPPERS 980
	 */
	.focusW
	{ margin:0 auto; width: 980px; }

	/**
	 * Overlays
	 */
	/* WHITE*/
	.overlay-w { background:rgba(255,255,255,0.7); }
	.lt-ie9 .overlay-w{
		background:none;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2ffffff,endColorstr=#b2ffffff)";
		zoom: 1;
	}
	/* BLACK*/
	.overlay-b{ background:rgba(0,0,0,0.7); }
	.lt-ie9 .overlay-b{
		background:none;
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000)";
		zoom: 1;
	}

/* ################################################################################################################																		     *
														PAGES
 *###############################################################################################################*/




 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * GENERAL * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* HEADER */


	#Header {
		z-index: 10000;
		width: 100%;
	}

		#Header h1 {
			font-weight: 900;
			margin: 0;
		}
		#Header h1 { margin:0; padding:0; }



/* Footer */

	#Footer {
		background: #e8eef4;
		color: #7c8081;
		padding: 5em 2em;
		text-align: center;
	}



	#Socials{ display: table; width: 100%; text-align:center;}
	#Socials li{ display: inline-block;  }
	#FacebookLink, #TwitterLink{ border: none; margin-right: 7px;}



/* Content */






 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * HOME * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 
 	#page-home{}

 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CONTACT * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

	#page-contact{}

	p#Confirmation{
		font-size: 22px; font-style:italic; font-weight: 300; line-height:40px; margin: 80px 0 0 25px;
	}












/* ===== HERO BANNER ===== */
.hero {
    position: relative;
    min-height: 200px;
    background: url('../images/hero-bg.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    padding: 40px 48px;
    overflow: hidden;
}

.hero::before {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 55, 0.60);
}

.hero-content {
    position: relative;
    z-index: 1;
    flex: 1;
}

.hero-title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}

.hero-title span {
    background: #1565C0;
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    display: inline-block;
}

/* ===== STEPS ===== */
.hero-steps {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 320px;
    margin-left: 48px;
}

.step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13px;
    color: #222;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.step-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    background: #e0e0e0;
    color: #999;
}

.step--active .step-icon {
    background: #1565C0;
    color: #fff;
}

.step-label strong {
    font-weight: 700;
}

/* ===== FORM GLOBAL ===== */
#DevisForm {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    color: #222;
}

#DevisFormWrapper {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

#DevisFormMainFieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Cacher honeypot */
#field-security {
    display: none !important;
}

/* ===== DEVIS CONTAINER (section 1) ===== */
.devis-container {
    padding: 36px 0 0;
}

.form-section {
    margin-bottom: 32px;
}

/* ===== TITRES DE SECTION ===== */
.section-title,
#DevisFormWrapper h2 {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 32px 0 20px;
    padding: 0;
    border: none;
    background: none;
}

.section-number {
    color: #1565C0;
    margin-right: 4px;
}

/* ===== RADIO GROUPS (typeCaisse, dateInstallation, natureProjet) ===== */
#fieldsList-typeCaisse,
#fieldsList-dateInstallation,
#fieldsList-natureProjet {
    margin-bottom: 24px;
}

.fieldsList .fieldsListTitle {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 400;
}

.fieldsList .fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chaque radio transform� en chip ===== */
.fieldsList .radio-field {
    display: inline-flex;
}

.fieldsList .radio-field label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    font-weight: 400;
    margin: 0;
}

.fieldsList .radio-field label:hover {
    border-color: #1565C0;
    color: #1565C0;
}

/* Cacher le vrai radio */
.fieldsList .radio-field input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Chip s�lectionn�e via :checked */
.fieldsList .radio-field input[type="radio"]:checked + span,
.fieldsList .radio-field input[type="radio"]:checked ~ span {
    /* fallback � g�r� via JS ci-dessous */
}

.fieldsList .radio-field.checked label,
.fieldsList .radio-field label.checked {
    background: #1565C0;
    border-color: #1565C0;
    color: #fff;
}

/* ===== CHAMPS TEXTE ===== */
#DevisFormMainFieldset p.textField {
    margin-bottom: 20px;
}

#DevisFormMainFieldset p.textField label {
    display: block;
    font-size: 13px;
    color: #444;
    margin-bottom: 5px;
    font-weight: 500;
}

#DevisFormMainFieldset input[type="text"] {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid #bbb;
    padding: 7px 0;
    font-size: 14px;
    color: #222;
    background: transparent;
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}

#DevisFormMainFieldset input[type="text"]::placeholder {
    color: #bbb;
}

#DevisFormMainFieldset input[type="text"]:focus {
    border-bottom-color: #1565C0;
}

#DevisFormMainFieldset p.textField.missingField input[type="text"] {
    border-bottom-color: #e53935;
}

/* ===== SELECTS ===== */
.form-group-select {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.form-group-select #field-activite,
.form-group-select #field-interesser {
    flex: 1;
    min-width: 200px;
    position: relative;
    margin-bottom: 0;
}

#field-activite,
#field-interesser {
    margin-bottom: 20px;
}

#field-activite label,
#field-interesser label {
    display: block;
    font-size: 13px;
    color: #444;
    margin-bottom: 5px;
    font-weight: 500;
}

#DevisFormMainFieldset select.selectField {
    width: 100%;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    padding: 10px 36px 10px 12px;
    font-size: 14px;
    color: #888;
    background: #fafafa;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s;
}

#DevisFormMainFieldset select.selectField:focus {
    border-color: #1565C0;
    color: #222;
}

/* Fl�che custom */
.form-group-select #field-activite::after,
.form-group-select #field-interesser::after,
#field-activite::after,
#field-interesser::after {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: #1565C0;
    pointer-events: none;
    font-size: 16px;
}

/* ===== SECTION 2 : COORDONN�ES ===== */
.form-group-coordonees {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

.form-group-coordonees #field-nomSociete,
.form-group-coordonees #field-nomPrenom,
.form-group-coordonees #field-email,
.form-group-coordonees #field-tel {
    margin-bottom: 0;
}

/* ===== TEXTAREA ===== */
#field-message {
    margin-bottom: 20px;
}

#field-message label {
    display: block;
    font-size: 13px;
    color: #444;
    margin-bottom: 5px;
    font-weight: 500;
}

#DevisFormMainFieldset textarea {
    width: 100%;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    padding: 12px;
    font-size: 14px;
    color: #222;
    background: #fafafa;
    min-height: 140px;
    resize: vertical;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s;
}

#DevisFormMainFieldset textarea:focus {
    border-color: #1565C0;
}

/* ===== BRANDS ===== */
.brands-section {
    text-align: center;
    padding: 40px 20px;
    margin: 20px 0;
}

.brands-title {
    font-size: 22px;
    font-weight: 400;
    color: #222;
    margin-bottom: 28px;
}

.brands-title span {
    color: #1565C0;
    font-weight: 700;
}

.brands-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 32px;
}

.brand-placeholder {
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #444;
    opacity: 0.80;
}

/* ===== CHECKBOXES GDPR ===== */
#field-gdpr1,
#field-gdpr2 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0;
    background: none;
    border: none;
}

#field-gdpr1 input[type="checkbox"],
#field-gdpr2 input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #1565C0;
    cursor: pointer;
}

#field-gdpr1 label,
#field-gdpr2 label {
    font-size: 13px;
    font-weight: 400;
    color: #444;
    line-height: 1.5;
    cursor: pointer;
}

/* ===== NOTE RGPD ===== */
.gdpr-note {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 8px 0 24px;
}

.gdpr-note a {
    color: #1565C0;
    text-decoration: underline;
}

/* ===== BOUTON SUBMIT ===== */
#DevisFormButtons {
    text-align: center;
    padding: 16px 0 10px;
}

#DevisFormSubmit {
    background: #1565C0;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-transform: none;
    transition: background 0.15s, transform 0.1s;
}

#DevisFormSubmit:hover {
    background: #1251a0;
    transform: translateY(-1px);
}

#DevisFormSubmit:active {
    transform: translateY(0);
}

/* ===== JS : chip radio active ===== */
/* Inject� via frontend.js ou inline */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        padding: 28px 20px;
        gap: 24px;
    }

    .hero-steps {
        margin-left: 0;
        min-width: unset;
        width: 100%;
    }

    .form-group-select {
        flex-direction: column;
        gap: 16px;
    }

    .form-group-coordonees {
        grid-template-columns: 1fr;
    }
}






:root {
  --bleu:      #2563eb;
  --bleu-mid:  #1d4ed8;
  --bleu-nuit: #1e3a5f;
  --bleu-dark: #0f2137;
  --sable:     #c8a96e;
  --blanc:     #ffffff;
  --gris:      #f3f4f6;
  --bord:      #e5e7eb;
  --texte:     #111827;
  --mid:       #374151;
  --light:     #6b7280;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'Sora',sans-serif;
  font-size:15px;
  color:var(--texte);
  background:var(--blanc);
  line-height:1.65;
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:'Sora',sans-serif;font-weight:700;line-height:1.2}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.container{max-width:1160px;margin:0 auto;padding:0 24px}

/* ?? NAVBAR ?? */
.navbar{
  background:var(--blanc);
  border-bottom:1px solid var(--bord);
  height:66px;
  display:flex;align-items:center;
  padding:0 32px;
  justify-content:space-between;
  position:sticky;top:0;z-index:999;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}

.nav-right{display:flex;align-items:center;gap:20px}

.nav-tel{
  font-size:15px;font-weight:700;
  color:var(--bleu);
  display:flex;align-items:center;gap:6px;
}

.btn-nav{
  background:var(--bleu);color:var(--blanc);
  font-family:'Sora',sans-serif;font-size:13px;font-weight:600;
  padding:9px 22px;border-radius:5px;border:none;cursor:pointer;
  transition:background .18s;
}
.btn-nav:hover{background:var(--bleu-mid)}

/* ?? HERO + FORMULAIRE (above the fold, une seule section) ?? */
.hero-form{
  background:var(--blanc);
  padding:52px 0 48px;
  border-bottom:1px solid var(--bord);
}

.hero-form-inner{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:48px;
  align-items:start;
}

/* Gauche */
.hero-left{}

.hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:#dbeafe;border:1px solid #bfdbfe;
  color:var(--bleu);font-size:11px;font-weight:700;
  padding:5px 12px;border-radius:20px;
  margin-bottom:16px;letter-spacing:.05em;text-transform:uppercase;
}

.hero-left h1{
  font-size:34px;font-weight:800;
  color:var(--texte);
  letter-spacing:-.5px;line-height:1.18;
  margin-bottom:14px;
}

.hero-left h1 em{font-style:normal;color:var(--bleu)}

.hero-sub{
  font-size:15px;color:var(--light);
  margin-bottom:22px;max-width:500px;line-height:1.65;
}

/* Tel hero */
.hero-tel{
  display:inline-flex;align-items:center;gap:10px;
  font-size:20px;font-weight:800;color:var(--bleu-nuit);
  margin-bottom:20px;
}
.hero-tel svg{flex-shrink:0}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--gris);border:1px solid var(--bord);
  color:var(--mid);font-size:12px;font-weight:600;
  padding:5px 13px;border-radius:20px;
}
.pill-dot{width:7px;height:7px;border-radius:50%;background:var(--bleu);flex-shrink:0}

/* Agences */
.agences{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:22px}
.ag{background:var(--gris);border:1px solid var(--bord);border-radius:6px;padding:8px 10px}
.ag-city{font-size:11px;font-weight:700;color:var(--texte);margin-bottom:2px}
.ag-tel{font-size:11px;font-weight:600;color:var(--bleu)}

/* Urgence */
.urgence{
  display:flex;align-items:flex-start;gap:8px;
  background:#eff6ff;border:1px solid #bfdbfe;
  border-radius:5px;padding:9px 12px;
  max-width:480px;
}
.urgence p{font-size:11px;color:var(--bleu-nuit);margin:0;line-height:1.5}

/* Droite : formulaire card */
.form-card{
  background:var(--blanc);
  border:1.5px solid var(--bord);
  border-radius:10px;
  padding:28px;
  box-shadow:0 4px 24px rgba(37,99,235,.1);
  position:sticky;top:80px;
}

.form-card-badge{
  display:inline-block;
  background:var(--bleu);color:var(--blanc);
  font-size:10px;font-weight:700;
  padding:3px 10px;border-radius:3px;
  margin-bottom:12px;letter-spacing:.06em;text-transform:uppercase;
}

.form-card h3{font-size:17px;font-weight:700;color:var(--texte);margin-bottom:3px}
.form-card-sub{font-size:12px;color:var(--light);margin-bottom:14px}

/* Toggle */
.ftoggle{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--gris);border-radius:6px;padding:3px;gap:3px;
  margin-bottom:14px;
}
.ftab{font-size:12px;font-weight:600;padding:8px 4px;border-radius:4px;text-align:center;color:var(--light);cursor:pointer;transition:all .15s}
.ftab.active{background:var(--blanc);color:var(--bleu);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* Champs */
.finp{
  width:100%;background:var(--gris);border:1.5px solid var(--bord);border-radius:5px;
  padding:10px 12px;font-family:'Sora',sans-serif;font-size:13px;color:var(--texte);
  margin-bottom:8px;display:block;transition:border-color .15s;
}
.finp:focus{outline:none;border-color:var(--bleu)}
.finp-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Bouton CTA blanc sur bleu nuit pour contraste maximal dans la charte */
.btn-form{
  display:block;width:100%;
  background:var(--bleu-nuit);color:var(--blanc);
  font-family:'Sora',sans-serif;font-size:14px;font-weight:700;
  padding:13px;border-radius:5px;border:none;cursor:pointer;
  margin-top:4px;transition:background .18s;letter-spacing:.01em;
}
.btn-form:hover{background:#152b47}

.form-legal{font-size:10px;color:var(--light);text-align:center;margin-top:8px}
.form-garantie{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}
.fg-item{font-size:11px;color:var(--light);font-weight:500}
.fg-sep{font-size:11px;color:var(--bord)}
.form-garantie-band{display:flex;align-items:center;justify-content:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:5px;padding:7px 12px;margin-top:8px;font-size:11px;font-weight:600;color:var(--bleu-nuit)}
.form-garantie-band svg{stroke:var(--bleu);flex-shrink:0}

.form-urgence{
  background:#eff6ff;border:1px solid #bfdbfe;border-radius:5px;
  padding:8px 12px;margin-top:10px;
  display:flex;gap:7px;align-items:flex-start;
}
.form-urgence p{font-size:11px;color:var(--bleu-nuit);margin:0;line-height:1.5}

/* ?? KPI STRIP ?? */
.kpi-strip{background:var(--gris);border-bottom:1px solid var(--bord);padding:26px 0}
.kpi-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.kpi-cell{text-align:center;padding:0 20px;border-right:1px solid var(--bord)}
.kpi-cell:last-child{border-right:none}
.kpi-num{font-size:28px;font-weight:800;color:var(--bleu);line-height:1;margin-bottom:4px}
.kpi-lbl{font-size:11px;color:var(--light);font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ?? LOGOS ?? */
.logos-band{background:var(--blanc);padding:32px 0;border-bottom:1px solid var(--bord)}
.logos-lbl{font-size:11px;font-weight:600;color:var(--light);text-align:center;margin-bottom:18px;text-transform:uppercase;letter-spacing:.08em}
.logos-row{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.logo-pill{background:var(--gris);border:1px solid var(--bord);border-radius:6px;padding:7px 18px;font-size:13px;font-weight:700;color:var(--mid)}

/* ?? SECTEURS ACCORD�ON ?? */
.metiers-section{background:var(--gris);padding:64px 0}
.metiers-inner{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}

/* Accord�on */
.acc-item{background:var(--blanc);border:1px solid var(--bord);border-radius:6px;margin-bottom:8px;overflow:hidden}
.acc-header{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;cursor:pointer;transition:background .15s}
.acc-header:hover{background:#f9fafb}
.acc-title{font-size:14px;font-weight:600;color:var(--texte)}
.acc-icon{font-size:20px;color:var(--bleu);font-weight:300;flex-shrink:0;transition:transform .2s;line-height:1}
.acc-item.open .acc-icon{transform:rotate(45deg)}
.acc-body{display:none;padding:0 20px 14px;font-size:13px;color:var(--light);line-height:1.65}
.acc-item.open .acc-body{display:block}
.acc-item.open .acc-title{color:var(--bleu)}

/* Droite texte */
.stag{font-size:11px;font-weight:700;color:var(--bleu);text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:8px}
.sh2{font-size:26px;font-weight:700;color:var(--texte);margin-bottom:12px;line-height:1.25}
.sp{font-size:14px;color:var(--light);line-height:1.7;margin-bottom:16px}
.checklist{display:flex;flex-direction:column;gap:10px}
.chk{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--mid);line-height:1.5}
.chk-dot{width:20px;height:20px;background:#dbeafe;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bleu);font-size:10px;font-weight:700;margin-top:1px}

/* ?? �TAPES ?? */
.etapes-section{background:var(--blanc);padding:70px 0}
.section-hdr{margin-bottom:38px}
.etapes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.etape-card{background:var(--gris);border-radius:8px;padding:28px 22px;border-top:3px solid var(--bleu)}
.etape-badge{display:inline-block;background:var(--bleu);color:var(--blanc);font-size:10px;font-weight:700;padding:3px 10px;border-radius:3px;margin-bottom:12px;letter-spacing:.05em;text-transform:uppercase}
.etape-card h3{font-size:15px;font-weight:700;color:var(--texte);margin-bottom:8px}
.etape-card p{font-size:13px;color:var(--light);line-height:1.65}


/* ?? CARROUSEL AVIS ?? */
.avis-section{background:var(--blanc);padding:70px 0}
.avis-hdr{margin-bottom:36px}
.avis-hdr h2{font-size:26px;color:var(--texte);margin-bottom:6px}
.avis-hdr p{font-size:14px;color:var(--light)}

.carousel-wrap{position:relative;overflow:hidden}

.carousel-track{
  display:flex;
  gap:20px;
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  cursor:grab;
  user-select:none;
}
.carousel-track:active{cursor:grabbing}

.avis-card{
  flex:0 0 calc(33.333% - 14px);
  border-radius:10px;
  padding:28px 24px;
  position:relative;
  overflow:hidden;
  min-height:200px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.avis-card.c1{background:var(--bleu-nuit);color:var(--blanc)}
.avis-card.c2{background:var(--sable);color:var(--blanc)}
.avis-card.c3{background:var(--bleu);color:var(--blanc)}
.avis-card.c4{background:var(--gris);border:1px solid var(--bord);color:var(--texte)}
.avis-card.c5{background:var(--bleu-nuit);color:var(--blanc)}
.avis-card.c6{background:var(--sable);color:var(--blanc)}

.avis-quote{position:absolute;top:12px;right:16px;font-size:56px;line-height:1;font-family:Georgia,serif;opacity:.12;color:var(--blanc)}
.avis-card.c4 .avis-quote{color:var(--texte)}

.avis-card .at{font-size:14px;font-style:italic;line-height:1.65;margin-bottom:20px;flex:1}
.avis-card.c1 .at,.avis-card.c2 .at,.avis-card.c3 .at,.avis-card.c5 .at,.avis-card.c6 .at{color:rgba(255,255,255,.88)}
.avis-card.c4 .at{color:var(--light)}


.avis-nom{font-size:13px;font-weight:700}
.avis-card.c1 .avis-nom,.avis-card.c2 .avis-nom,.avis-card.c3 .avis-nom,.avis-card.c5 .avis-nom,.avis-card.c6 .avis-nom{color:var(--blanc)}
.avis-card.c4 .avis-nom{color:var(--texte)}
.avis-role{font-size:11px;opacity:.72;margin-top:2px}
.avis-stars{font-size:12px;letter-spacing:1px;margin-bottom:10px;color:#f0c040}
.avis-card.c4 .avis-stars{color:#f0a020}

/* Navigation */
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}

.carousel-btn{
  width:44px;height:44px;
  border-radius:50%;
  background: var(--bleu);
  border-color: var(--bleu);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:all .18s;
  flex-shrink:0;
}

.carousel-btn:hover{background:var(--bleu);border-color:var(--bleu)}
.carousel-btn:hover svg{stroke:var(--blanc)}
.carousel-btn svg{stroke:var(--texte-mid);transition:stroke .18s}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}

.carousel-dots{display:flex;gap:6px;align-items:center}
.cdot{width:8px;height:8px;border-radius:50%;background:var(--bord);transition:all .2s;cursor:pointer}
.cdot.active{width:20px;border-radius:4px;background:var(--bleu)}



/* ?? CTA MID ?? */
.cta-mid{background:var(--bleu-nuit);padding:50px 0}
.cta-mid-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-mid-inner h2{color:var(--blanc);font-size:22px;margin-bottom:5px}
.cta-mid-inner p{color:rgba(255,255,255,.7);font-size:14px;margin:0}
.btns-group{display:flex;gap:12px;flex-wrap:wrap}

.btn-blanc{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blanc);color:var(--bleu-nuit);
  font-family:'Sora',sans-serif;font-size:14px;font-weight:700;
  padding:12px 24px;border-radius:5px;border:none;cursor:pointer;
  transition:opacity .18s;white-space:nowrap;
}
.btn-blanc:hover{opacity:.9}

.btn-outline-w{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--blanc);
  font-family:'Sora',sans-serif;font-size:14px;font-weight:600;
  padding:11px 22px;border-radius:5px;border:1.5px solid rgba(255,255,255,.35);
  cursor:pointer;transition:border-color .18s;white-space:nowrap;
}
.btn-outline-w:hover{border-color:var(--blanc)}

/* ?? CERTIFICATIONS ?? */
.certif-section{background:var(--blanc);padding:56px 0;text-align:center;border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.certif-section h2{font-size:24px;color:var(--texte);margin-bottom:8px}
.certif-section > p{font-size:14px;color:var(--light);margin-bottom:28px}
.lne-box{display:inline-flex;align-items:center;justify-content:center;width:110px;height:110px;background:var(--blanc);border:1.5px solid var(--bord);border-radius:12px;padding:10px;margin:0 auto 24px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.certif-badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cbadge{background:var(--gris);border:1px solid var(--bord);border-radius:6px;padding:9px 18px;font-size:12px;font-weight:600;color:var(--mid)}

/* ?? FAQ ?? */
.faq-section{background:var(--gris);padding:70px 0}
.faq-section h2{font-size:26px;color:var(--texte);margin-bottom:30px;max-width:700px}
.faq-list{max-width:100%}
.faq-item{background:var(--blanc);border:1px solid var(--bord);border-radius:6px;margin-bottom:8px;overflow:hidden}
.faq-btn{width:100%;text-align:left;background:none;border:none;padding:15px 20px;font-family:'Sora',sans-serif;font-size:14px;font-weight:600;color:var(--texte);cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;transition:color .15s}
.faq-btn:hover{color:var(--bleu)}
.faq-arrow{font-size:18px;color:var(--bleu);flex-shrink:0;transition:transform .22s;margin-top:1px}
.faq-ans{display:none;padding:0 20px 14px;font-size:13px;color:var(--light);line-height:1.7}
.faq-item.open .faq-ans{display:block}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-item.open .faq-btn{color:var(--bleu)}

/* ?? CTA FINAL ?? */
.cta-final{background:linear-gradient(135deg,var(--bleu-mid),var(--bleu));padding:64px 0}
.cta-final-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-final-inner h2{color:var(--blanc);font-size:28px;margin-bottom:8px}
.cta-final-inner p{color:rgba(255,255,255,.72);font-size:15px;margin:0}

/* ?? FOOTER ?? */
footer{background:var(--bleu-dark);padding:16px 32px}
.footer-bar{max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.35)}
.footer-tel{font-size:13px;font-weight:700;color:var(--blanc)}

/* ?? BANDE LAT�RALE ?? */
.mobile-cta-bar{display:none}
#lateral{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:998}
#lateral a{display:block;background:var(--bleu);color:var(--blanc);font-family:'Sora',sans-serif;font-size:11px;font-weight:700;padding:14px 10px;border-radius:6px 0 0 6px;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);letter-spacing:.08em;box-shadow:-3px 0 12px rgba(0,0,0,.15);transition:background .18s}
#lateral a:hover{background:var(--bleu-mid)}

/* ?? ANIMATIONS ?? */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-left>*{animation:fadeUp .48s ease both}
.hero-left>*:nth-child(1){animation-delay:.04s}
.hero-left>*:nth-child(2){animation-delay:.11s}
.hero-left>*:nth-child(3){animation-delay:.18s}
.hero-left>*:nth-child(4){animation-delay:.25s}
.hero-left>*:nth-child(5){animation-delay:.32s}
.hero-left>*:nth-child(6){animation-delay:.39s}
.form-card{animation:fadeUp .52s .1s ease both}


/* ================================================================
   RESPONSIVE � mobile first
   Breakpoints : 768px (tablette) � 480px (mobile)
   ================================================================ */

/* ?? TABLETTE (? 768px) ?? */
@media (max-width: 768px) {

  /* Navbar */
  .navbar { padding: 0 16px; height: 58px; }
  .nav-tel { display: none; }

  /* Hero : 1 colonne, formulaire sous le contenu */
  .hero-form { padding: 32px 0 40px; }
  .hero-form-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-left h1 { font-size: 26px; }
  .hero-sub { font-size: 14px; }
  .hero-tel { font-size: 17px; margin-bottom: 16px; }

  /* Agences : 2 colonnes */
  .agences { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* Formulaire : plus sticky, pleine largeur */
  .form-card { position: static; box-shadow: 0 2px 12px rgba(37,99,235,.08); }

  /* KPI : 2x2 */
  .kpi-inner { grid-template-columns: 1fr 1fr; }
  .kpi-cell { border-right: none; border-bottom: 1px solid var(--bord); padding: 16px 0; }
  .kpi-cell:nth-child(odd) { border-right: 1px solid var(--bord); }
  .kpi-cell:last-child, .kpi-cell:nth-child(3) { border-bottom: none; }
  .kpi-num { font-size: 22px; }

  /* Logos : scroll horizontal */
  .logos-row { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .logo-pill { flex-shrink: 0; }

  /* Secteurs : 1 colonne */
  .metiers-inner { grid-template-columns: 1fr; gap: 28px; }
  .metiers-section { padding: 48px 0; }

  /* Carrousel : 1 card visible */
  .avis-card { flex: 0 0 calc(100% - 0px); }

  /* CTA mid */
  .cta-mid-inner { flex-direction: column; text-align: center; gap: 20px; }
  .cta-mid-inner h2 { font-size: 18px; }
  .btns-group { justify-content: center; }

  /* �tapes : 1 colonne */
  .etapes-grid { grid-template-columns: 1fr; gap: 12px; }
  .etapes-section { padding: 48px 0; }

  /* Certif */
  .certif-section { padding: 40px 0; }
  .certif-badges { gap: 8px; }
  .cbadge { padding: 7px 12px; font-size: 11px; }

  /* FAQ */
  .faq-section { padding: 48px 0; }
  .faq-section h2 { font-size: 20px; }

  /* CTA final */
  .cta-final { padding: 44px 0; }
  .cta-final-inner { flex-direction: column; text-align: center; gap: 20px; }
  .cta-final-inner h2 { font-size: 22px; }

  /* Footer */
  footer { padding: 14px 16px; }
  .footer-bar { flex-direction: column; text-align: center; gap: 6px; }

  /* Bande lat�rale : masqu�e sur tablette */
  #lateral { display: none; }

  /* Sections padding */
  .section-std, .avis-section { padding: 48px 0; }
  .logos-band { padding: 24px 0; }
}

/* ?? MOBILE (? 480px) ?? */
@media (max-width: 480px) {

  /* Container */
  .container { padding: 0 16px; }

  /* Navbar */
  .navbar { padding: 0 14px; height: 54px; }
  .nav-logo img { height: 40px; }
  .btn-nav { font-size: 12px; padding: 7px 14px; }

  /* Hero */
  .hero-form { padding: 24px 0 32px; }
  .hero-left h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.3px; }
  .hero-sub { font-size: 13px; margin-bottom: 16px; }

  /* Photo hero */
  .hero-form-inner > div:first-child > div[style*="border-radius:10px"] {
    max-height: 200px;
  }
  .hero-form-inner > div:first-child > div[style*="border-radius:10px"] img {
    height: 200px;
  }

  /* Tel */
  .hero-tel { font-size: 15px; margin-bottom: 14px; }

  /* Pills */
  .pills { gap: 6px; margin-bottom: 18px; }
  .pill { font-size: 11px; padding: 4px 10px; }

  /* Agences : 2 col compactes */
  .agences { grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 16px; }
  .ag { padding: 7px 8px; }
  .ag-city { font-size: 10px; }
  .ag-tel { font-size: 10px; }

  /* Badge hero-tag */
  .hero-tag { font-size: 10px; padding: 4px 10px; }

  /* LNE inline dans hero */
  .hero-form-inner > div:first-child > div[style*="display:flex;align-items:center;gap:10px"] img {
    height: 28px;
  }

  /* Formulaire */
  .form-card { padding: 20px 16px; border-radius: 8px; }
  .form-card h3 { font-size: 15px; }
  .form-card-badge { font-size: 9px; padding: 2px 8px; }
  .finp { padding: 9px 10px; font-size: 12px; }
  .btn-form { font-size: 13px; padding: 13px 10px; }
  .ftab { font-size: 11px; padding: 7px 4px; }
  .form-garantie-band { font-size: 10px; padding: 6px 10px; }

  /* KPI */
  .kpi-strip { padding: 20px 0; }
  .kpi-num { font-size: 20px; }
  .kpi-lbl { font-size: 10px; }

  /* Logos : scroll */
  .logos-band { padding: 18px 0; }
  .logos-lbl { font-size: 10px; margin-bottom: 12px; }
  .logo-pill { font-size: 11px; padding: 5px 12px; }

  /* Accord�on secteurs */
  .metiers-section { padding: 36px 0; }
  .acc-title { font-size: 13px; }
  .acc-body { font-size: 12px; }
  .sh2 { font-size: 20px; }
  .sp { font-size: 13px; }
  .checklist { gap: 8px; }
  .chk { font-size: 12px; }

  /* Avis : 1 card, padding r�duit */
  .avis-section { padding: 36px 0; }
  .avis-hdr h2 { font-size: 20px; }
  .avis-card { padding: 20px 18px; min-height: 180px; }
  .avis-card .at { font-size: 13px; }
  .carousel-btn { width: 38px; height: 38px; }

  /* CTA mid */
  .cta-mid { padding: 36px 0; }
  .cta-mid-inner h2 { font-size: 17px; }
  .cta-mid-inner p { font-size: 13px; }
  .btn-blanc { font-size: 13px; padding: 10px 18px; }
  .btn-outline-w { font-size: 13px; padding: 9px 16px; }

  /* �tapes */
  .etapes-section { padding: 36px 0; }
  .etape-card { padding: 20px 16px; }
  .etape-card h3 { font-size: 14px; }
  .etape-card p { font-size: 12px; }
  .sh2[style] { font-size: 20px !important; }

  /* Certif */
  .certif-section { padding: 32px 0; }
  .certif-section h2 { font-size: 20px; }
  .lne-box { width: 80px; height: 80px; padding: 8px; }
  .certif-badges { gap: 6px; }
  .cbadge { padding: 6px 10px; font-size: 10px; }

  /* FAQ */
  .faq-section { padding: 36px 0; }
  .faq-section h2 { font-size: 18px; margin-bottom: 20px; }
  .faq-btn { font-size: 13px; padding: 13px 16px; }
  .faq-ans { font-size: 12px; padding: 0 16px 12px; }

  /* CTA final */
  .cta-final { padding: 36px 0; }
  .cta-final-inner h2 { font-size: 20px; }
  .cta-final-inner p { font-size: 13px; }

  /* Footer */
  footer { padding: 12px 16px; }
  .footer-copy { font-size: 11px; }
  .footer-tel { font-size: 12px; }

  /* CTA mobile fixe en bas � remplace la bande lat�rale */
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 999;
    box-shadow: 0 -2px 12px rgba(0,0,0,.12);
  }

  .mobile-cta-bar a, .mobile-cta-bar button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
  }

  .mobile-cta-bar .mcta-form {
    background: var(--bleu-nuit);
    color: var(--blanc);
  }

  .mobile-cta-bar .mcta-tel {
    background: var(--bleu);
    color: var(--blanc);
    border-left: 1px solid rgba(255,255,255,.2);
  }

  /* Espace pour la barre fixe en bas */
  body { padding-bottom: 56px; }
}

/* ?? Carrousel responsive ?? */
@media (max-width: 768px) {
  .avis-card { flex: 0 0 calc(85% - 10px); }
}
@media (max-width: 480px) {
  .avis-card { flex: 0 0 calc(100% - 0px); }
}

@media print{.navbar{position:static}#lateral{display:none}}


#Footer{
  display:none;
}


/* ?? Page confirmation ?? */
.confirm-wrap{min-height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;padding:48px 20px;background:var(--gris)}
.confirm-card{background:var(--blanc);border:1.5px solid var(--bord);border-radius:10px;padding:38px 32px;max-width:480px;width:100%;text-align:center;box-shadow:0 12px 32px rgba(0,0,0,.07)}
.confirm-icon{width:58px;height:58px;border-radius:50%;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.confirm-card h1{font-size:22px;font-weight:800;color:var(--bleu-nuit);margin-bottom:8px}
.confirm-card p{font-size:14px;color:var(--light);line-height:1.65;margin-bottom:14px}
.btn-confirm{display:inline-block;background:var(--bleu-nuit);color:var(--blanc);font-family:'Sora',sans-serif;font-size:13px;font-weight:700;padding:11px 18px;border-radius:6px;text-decoration:none;margin:4px;transition:background .15s}
.btn-confirm:hover{background:#152b47}
.btn-confirm--outline{background:transparent;color:var(--bleu-nuit);border:1.5px solid var(--bord)}
.btn-confirm--outline:hover{background:var(--gris)}

/* ?? Skin des formulaires g�n�r�s (classe form du framework) ?? */
#tab-rappel input:not([type=submit]):not([type=hidden]):not([type=radio]):not([type=checkbox]),
#tab-devis  input:not([type=submit]):not([type=hidden]):not([type=radio]):not([type=checkbox]),
#tab-rappel textarea, #tab-devis textarea,
#tab-rappel select,   #tab-devis select{
  width:100%;background:var(--gris);border:1.5px solid var(--bord);border-radius:5px;
  padding:10px 12px;font-family:'Sora',sans-serif;font-size:13px;color:var(--texte);
  margin-bottom:8px;transition:border-color .15s;
}
#tab-rappel input:focus, #tab-devis input:focus,
#tab-rappel textarea:focus, #tab-devis textarea:focus{outline:none;border-color:var(--bleu)}

#tab-rappel input[type=submit], #tab-devis input[type=submit],
#tab-rappel button[type=submit], #tab-devis button[type=submit]{
  width:100%;background:var(--bleu-nuit);color:var(--blanc);border:none;cursor:pointer;
  font-family:'Sora',sans-serif;font-size:14px;font-weight:700;padding:12px;border-radius:6px;
  margin-top:8px;transition:background .15s;
}
#tab-rappel input[type=submit]:hover, #tab-devis input[type=submit]:hover,
#tab-rappel button[type=submit]:hover, #tab-devis button[type=submit]:hover{background:#152b47}

/* Messages d'erreur du framework (adapte le s�lecteur au markup r�el) */
#tab-rappel .error, #tab-devis .error,
#tab-rappel .form-error, #tab-devis .form-error{
  font-size:12px;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;
  border-radius:5px;padding:8px 10px;margin-bottom:8px;
}

#form-card-zone {
	visibility: hidden; 
}
#form-card-zone {
  display: contents;
}