/*========================= RESET =========================*/
*{margin:0;padding:0;box-sizing:border-box;}
html,body{overflow-x:hidden;background:#f5f5f5;font-family:Arial,Helvetica,sans-serif;}
img{width:100%;display:block;}
a{text-decoration:none;color:inherit;}

/*========================= VARIABLES =========================*/
:root{
	--primary:#479eff;
	--bg:#f8f4ee;
	--headerbg:#07192d;
	--footerbg:#07192d;
	--bloctextebg:#e8f3ff;
	--lien-menuhaut-actif:#9eccff;
	--lien-menuhaut:#479eff;
	--lien-menuhaut-fond:#0a1b2e;
	--white:#fff;
	--text:#222;
	--border:#e6dfd6;
	--shadow:0 8px 24px rgba(0,0,0,.08);
	--radius:14px;
	--transition:.30s;
	--gray:#CCCCCC;
}


/*========================= GLOBAL =========================*/
body{color:var(--text);background:linear-gradient(#fff,#faf7f2);line-height:1.6;}
.container{width:min(1450px,95%);margin:auto;}



/*========================= GALERIE HERO =========================*/
.hero-gallery{width:58%;display:flex;overflow:hidden;position:relative;padding-left:55px;padding-right:25px;}
.panel{flex:1;position:relative;overflow:hidden;transform:skewX(-12deg);transform-origin:center;transition:flex .45s ease;will-change:flex;}
.panel:not(:first-child){margin-left:-32px;}
.panel:hover{flex:1.70;}
.panel img{	position:absolute;inset:0;width:125%;height:110%;object-fit:cover;transform:skewX(12deg) translateX(-15%) scale(1.09);transform-origin:center;transition:transform .45s ease;will-change:transform;}
.panel:hover img{	transform:skewX(12deg) translateX(-10%) scale(1.09);}
.panel::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.15),rgba(0,0,0,0));z-index:1;}
.panel span{position:absolute;left:80px;bottom:22px;transform:skewX(12deg);color:#fff;font-size:30px;font-weight:700;letter-spacing:.8px;z-index:2;text-transform:uppercase;}

/*========================= HERO =========================*/
.hero{display:flex;min-height:520px;background:var(--headerbg);overflow:hidden;position:relative;}
.hero-left{width:42%;padding:70px 60px;display:flex;flex-direction:column;justify-content:center;z-index:2;}
.hero-left h1{font-size:64px;line-height:.95;font-weight:900;color:#EEE;margin-bottom:30px;}
.hero-left h2{color:WHITE;}
.hero-left p{max-width:420px;color:#BBB;line-height:1.7;margin-bottom:35px;}

/*======================= MENU HAUT ======================*/
.menu{	display:flex;	justify-content:flex-end;	position:relative;	z-index:10;	margin:20px 40px 0;	border:1px solid #333;	background:rgba(15,15,15,.85);	width:max-content;	margin-left:auto;}
.menu{	position:absolute;	top:20px;	right:40px;	z-index:20;	margin:0;}
.menu a{	position:relative;	padding:14px 18px;	color:var(--lien-menuhaut);	font-size:13px;	font-weight:bold;	white-space:nowrap;	transition:.25s;}
.menu a:not(:last-child){	border-right:1px solid var(--lien-menuhaut);}
.menu a:hover,.menu a.active{	color:var(--lien-menuhaut-actif);	background:var(--lien-menuhaut-fond);}
.menu a.active:after,.menu a:hover:after{	content:"";	position:absolute;	left:18px;	right:18px;	bottom:6px;	height:2px;	background:var(--lien-menuhaut-actif);}

.subtitle{font-size:13px;font-weight:700;margin-bottom:20px;color:#666;}
.subtitle {color:white;}


.buttons{display:flex;gap:15px;}
.btn{background:#222;color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border:2px solid #222;border-radius:6px;text-decoration:none;font-weight:700;transition:.25s;}
.btn:hover{background:var(--primary);color:#fff;}



/*========================= SECTION TITLE =========================*/
.section-title{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:45px;font-size:34px;font-weight:700;text-transform:uppercase;text-align:center;}
.section-title span{width:70px;height:2px;background:#777;}


/*========================= GRILLES GÉNÉRIQUES =========================*/
.grid-container {width: 100%; margin: 0 auto;}
.grid-3, .grid-4, .grid-5, .grid-6, .grid-align-center {display: grid; width: 85%; margin: 0 auto;}
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-5 { grid-template-columns: repeat(5, 1fr); gap: 22px; }
.grid-6 { grid-template-columns: repeat(6, 1fr); gap: 18px; }
.grid-align-center { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px;}
.grid-card {background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); transition: .35s;}
.grid-card:hover { transform: translateY(-8px); box-shadow: 0 18px 45px rgba(0,0,0,.16);}
.grid-card-image {height: 190px; overflow: hidden;}
.grid-card-image img { height: 100%; object-fit: cover; transition: .5s;}
.grid-card:hover .grid-card-image img { transform: scale(1.08);}
.grid-card-content { padding: 16px;}
.grid-card h3 { font-size: 18px; padding: 0 20px 8px; margin: 0;}
.grid-card p { padding: 0 20px 22px; color: #666; font-size: 15px; min-height: 80px;}
.grid-card a{display:inline-flex;align-items:center;gap:8px;color:var(--primary);font-weight:bold;margin-top:5px;font-size:12px}
.grid-card a:hover{gap:14px;}





/* =========================
 PROCESSUS E-MAGE
========================= */

.section-claire, .section-foncee { padding: 30px 0 40px; width: 100%; text-align: center}
.section-claire h2, .section-claire h3,.section-foncee h2, .section-foncee h3, {padding-bottom: 15px}
.section-claire p, .section-foncee p { padding: 10px 0}
.section-claire{ background: #fff;}
.section-foncee {background:var(--bloctextebg)}





.process-intro { text-align: center; max-width: 700px; margin: 0 auto 70px;}
.process-intro .section-title { margin-bottom: 12px;}
.process-intro p { color: #666; font-size: 17px;}
.process-grid { position: relative; width: 88%; max-width: 1350px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr);}
.process-grid::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: #e6dfd6;}
.process-step { position: relative; text-align: center; padding: 0 18px;}
.process-number { position: relative; z-index: 2; width: 56px; height: 56px; margin: 0 auto 28px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--primary); border-radius: 50%; color: var(--primary); font-size: 16px; font-weight: 800; transition: .3s ease;}
.process-step h3 { margin-bottom: 12px; font-size: 16px; line-height: 1.25; font-weight: 800;}
.process-step p { color: #666; font-size: 14px; line-height: 1.65;}
.process-step:hover .process-number { background: var(--primary); color: #111; transform: scale(1.12);}
.process-step:hover h3 { color: var(--primary);}


/*========================= FOOTER =========================*/

.cta-text{display:flex;align-items:center;gap:20px;}
.cta-icon{width:55px;height:55px;border:2px solid #ffb400;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#ffb400;font-size:28px;}
.cta-text h2{font-size:28px;margin-bottom:6px;}
.cta-text p{color:#b8c1d2;}
.btn-devis{background:#ffb000;color:#111!important;font-weight:bold;padding:18px 40px;border-radius:6px;transition:.3s;}
.btn-devis:hover{background:#ffc63d;}

.logo{width:180px;margin-bottom:20px;}
.about p{line-height:1.8;color:#b8c1d2;margin-bottom:25px;}

.contact li{line-height:1.6;}
.gallery{display:grid;grid-template-columns:repeat(3,80px);gap:10px;}
.gallery img{width:80px;height:80px;border-radius:8px;object-fit:cover;}

.footer-main{max-width:1400px;margin:auto;padding:45px 40px;display:grid;grid-template-columns:2fr 1fr 1.2fr 1.3fr;gap:45px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);max-width:1400px;margin:auto;padding:22px 40px;display:flex;justify-content:space-between;align-items:center;color:#8f9ab0;font-size:14px;}
.footer-bottom div{display:flex;gap:25px;}
.footer-col h3{margin-bottom:20px;font-size:15px;letter-spacing:1px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:12px;color:#c9d1df;}
.footer{background:var(--footerbg);color:#fff;}
.footer a{color:#d5d9e1;text-decoration:none;transition:.3s;}
.footer a:hover{color:#ffb400;}
.footer-cta{max-width:1400px;margin:auto;padding:22px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);}



/*========================= CONTACT =========================*/
.contact-section{background:var(--bg);}
.contact-grid{display:grid;grid-template-columns:380px 1fr;gap:45px;align-items:start;}
.contact-info,.contact-form{	background:#fff;	padding:40px;	border-radius:var(--radius);	border:1px solid var(--border);	box-shadow:var(--shadow);}
.contact-info{background:#07192d;color:#fff;}
.contact-info h2,.contact-form h2{font-size:28px;margin-bottom:15px;}
.contact-info>p{color:#b8c1d2;margin-bottom:30px;}
.contact-item{display:flex;gap:15px;margin-bottom:22px;}
.contact-icon{	flex:0 0 45px;	width:45px;height:45px;	border:2px solid var(--primary);	border-radius:9px;	display:flex;	align-items:center;	justify-content:center;	color:var(--primary);	font-size:20px;}
.contact-item h3{font-size:13px;}
.contact-item p,.contact-item a{color:#b8c1d2;font-size:14px;}
.contact-item a:hover{color:var(--primary);}

.contact-form>p{color:#666;margin-bottom:25px;font-size:14px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;}
.form-group label span{color:var(--primary);}
.form-group input,.form-group select,.form-group textarea{	width:100%;	padding:13px 15px;	border:1px solid var(--border);	border-radius:7px;	background:#fafafa;	font:inherit;	outline:none;	transition:.25s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{	border-color:var(--primary);	background:#fff;	box-shadow:0 0 0 3px rgba(243,155,18,.12);}
.form-group textarea{min-height:170px;resize:vertical;}
.form-submit{text-align:right;}
.btn-submit{	border:0;	background:#111;	color:#fff;	padding:15px 25px;	border-radius:6px;	font-weight:700;	cursor:pointer;	transition:.25s;}
.btn-submit:hover{background:var(--primary);color:#111;}
.form-message{	padding:15px 18px;	margin-bottom:25px;	border-radius:7px;	font-size:14px;	font-weight:600;}
.form-success{background:#e9f7df;color:#356d20;}
.form-error{background:#fff0f0;color:#a52c2c;}
.honeypot{	position:absolute;	left:-9999px;	width:1px;	height:1px;	opacity:0;}




```css
/*========================= RESPONSIVE 1100px =========================*/
@media(max-width:1100px){
.hero{	flex-direction:column;}
.hero-left{	width:100%;}
.hero-gallery{	width:100%;}
.hero-left{	padding:50px 30px;}
.hero-left h1{	font-size:46px;}
.hero-gallery{	height:350px;}
.footer-main{	grid-template-columns:repeat(2,1fr);}
}


/*========================= RESPONSIVE 900px =========================*/
@media(max-width:900px){
.service-grid{	grid-template-columns:repeat(2,1fr);}
.client-grid{	grid-template-columns:repeat(2,1fr);}
.portfolio-grid{	grid-template-columns:repeat(2,1fr);}
.section-title{	font-size:28px;}
.section-title span{	width:40px;}
.contact-grid{	grid-template-columns:1fr;}

.menu{	position:absolute;	top:15px;	left:20px;	right:20px;	width:auto;	margin:0 0 10px;	justify-content:center;}
.menu a{	padding:10px 8px;	font-size:10px;}
.process-grid{	width:90%;	grid-template-columns:1fr;	gap:45px;}
.process-grid::before{	top:28px;	bottom:28px;	left:28px;	right:auto;	width:2px;	height:auto;}
.process-step{	display:grid;	grid-template-columns:56px 1fr;	column-gap:25px;	text-align:left;	padding:0;}
.process-number{	grid-row:span 2;	margin:0;}
.process-step h3{	margin:5px 0;}
.process-step p{	margin:0;}
}


/*========================= RESPONSIVE 768px =========================*/
@media(max-width:768px){

.hero-gallery{	flex-direction:column;	height:auto;}
.panel{	height:220px;	margin-left:0!important;	transform:none;}
.panel img{	width:100%;	height:100%;	transform:none;}
.panel:hover img{	transform:scale(1.05);}
.panel span{	transform:none;}
.footer-cta{	flex-direction:column;	gap:20px;	text-align:center;}
.footer-bottom{	flex-direction:column;	gap:20px;	text-align:center;}
.cta-text{	flex-direction:column;}
.footer-main{	grid-template-columns:1fr;	text-align:center;}
.socials{	justify-content:center;}
.gallery{	justify-content:center;	grid-template-columns:repeat(3,90px);}
.emage-content-color{	padding:50px 20px 55px;}
.emage-content-color h2{	font-size:30px;}
.emage-content-color-text p{	font-size:15px;}
.emage-content-color-text .emage-content-color-lead{	font-size:17px;}
.form-row{	grid-template-columns:1fr;	gap:0;}
.contact-info{	padding:30px 25px;}
.contact-form{	padding:30px 25px;}
.form-submit{	text-align:center;}
.btn-submit{	width:100%;}

}


/*========================= RESPONSIVE 600px =========================*/
@media(max-width:600px){

.service-grid{
	grid-template-columns:1fr;
}

.client-grid{
	grid-template-columns:1fr;
}

.portfolio-grid{
	grid-template-columns:1fr;
}

.service-image{
	height:230px;
}

.client-card img{
	height:230px;
}

.section-title{
	font-size:22px;
	gap:10px;
}

.section-title span{
	width:20px;
}

.emage-content-color{
	padding:45px 18px 50px;
}

.emage-content-color h2{
	font-size:26px;
}

.emage-content-color-text p{
	font-size:14px;
	line-height:1.7;
}

.emage-content-color-text .emage-content-color-lead{
	font-size:16px;
}

}


/*========================= RESPONSIVE 480px =========================*/
@media(max-width:480px){

.hero-left{
	padding:40px 20px;
}

.hero-left h1{
	font-size:36px;
	line-height:1.1;
}

.panel{
	height:180px;
}

.gallery{
	grid-template-columns:repeat(3,80px);
	gap:8px;
}

.section-title{
	font-size:20px;
}

.process-grid{
	width:100%;
	padding:0 18px;
}

.process-step{
	grid-template-columns:48px 1fr;
	column-gap:18px;
}

.process-number{
	width:48px;
	height:48px;
}

.contact-info{
	padding:25px 18px;
}

.contact-form{
	padding:25px 18px;
}

}


/*========================= RESPONSIVE 360px =========================*/
@media(max-width:360px){

.hero-left{
	padding:35px 16px;
}

.hero-left h1{
	font-size:31px;
}

.menu{
	left:10px;
	right:10px;
}

.menu a{
	padding:8px 5px;
	font-size:9px;
}

.gallery{
	grid-template-columns:repeat(3,70px);
}

.section-title{
	font-size:19px;
}

}
```





/*========================= ANIMATION AU SCROLL =========================*/

.reveal{
	opacity:0;
	transform:translateY(40px);
	transition:opacity .7s ease,transform .7s ease;
}

.reveal.visible{
	opacity:1;
	transform:translateY(0);
}

@media(prefers-reduced-motion:reduce){
	.reveal{
		opacity:1;
		transform:none;
		transition:none;
	}
}