/* ========================================= GCM — STYLE PREMIUM ULTIME COMPLET ========================================= */

:root{

--blue:#28333B; --green:#4D7C60; --light:#F5F7F8; --white:#ffffff; --text:#55636D;

--shadow-soft:0 10px 30px rgba(0,0,0,.05); --shadow-medium:0 20px 60px rgba(0,0,0,.10); --shadow-strong:0 30px 90px rgba(0,0,0,.18);

--radius:32px;

}

/* RESET */

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

html{ scroll-behavior:smooth; }

body{

font-family:'Montserrat',sans-serif;

background:var(--light);

color:var(--blue);

overflow-x:hidden;

line-height:1.7;

}

img{ max-width:100%; display:block; }

a{ text-decoration:none; }

.container{

width:min(1320px,92%); margin:auto;

}

/* HEADER */

.header{

position:fixed;

top:0; width:100%;

z-index:1000;

background:rgba(255,255,255,.92);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(0,0,0,.05);

}

.header-container{

display:flex; align-items:center; justify-content:space-between;

padding:18px 0;

}

.logo img{

height:110px;

transition:.3s ease;

}

.logo img:hover{

transform:scale(1.03);

}

.nav{

display:flex; gap:34px;

}

.nav a{

color:var(--blue);

font-weight:700;

font-size:.95rem;

position:relative;

transition:.3s;

}

.nav a::after{

content:'';

position:absolute;

left:0; bottom:-8px;

width:0%; height:2px;

background:var(--green);

transition:.3s;

}

.nav a:hover{

color:var(--green);

}

.nav a:hover::after{

width:100%;

}

/* HERO */

.hero{

min-height:100vh;

position:relative;

display:flex; align-items:center;

overflow:hidden;

padding-top:140px; padding-bottom:120px;

background: linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.88)), url('images/hero-mobilite.jpg');

background-size:cover; background-position:center;

}

.hero::before{

content:'';

position:absolute; inset:0;

background: linear-gradient( 90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 45%, rgba(255,255,255,.40) 100%);

z-index:1;

}

.hero-overlay{

position:absolute; inset:0;

background: radial-gradient(circle at top right, rgba(77,124,96,.16), transparent 40%);

}

.hero-grid{

position:relative; z-index:2;

display:grid;

grid-template-columns:1.05fr .95fr;

gap:90px;

align-items:center;

}

.hero-logo{

width:250px;

margin-bottom:30px;

}

.hero-left h1{

font-size:clamp(4rem,7vw,7rem);

line-height:.92;

text-transform:uppercase;

font-weight:900;

margin-bottom:28px;

}

.hero-left h1 span{

color:var(--green);

}

.hero-line{

width:120px; height:6px;

border-radius:999px;

background:var(--green);

margin-bottom:36px;

}

.hero-left p{

font-size:1.02rem;

line-height:1.9;

max-width:720px;

color:var(--text);

margin-bottom:42px;

}

.hero-buttons{

display:flex; gap:18px;

margin-bottom:40px;

flex-wrap:wrap;

}

.btn{

padding:18px 32px;

border-radius:18px;

font-weight:800;

transition:.35s;

position:relative;

overflow:hidden;

}

.btn::before{

content:'';

position:absolute;

top:0; left:-120%;

width:120%; height:100%;

background:rgba(255,255,255,.15);

transform:skewX(-25deg);

transition:.6s ease;

}

.btn:hover::before{

left:130%;

}

.btn-primary{

background:var(--blue);

color:white;

box-shadow:var(--shadow-medium);

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

border:2px solid var(--green);

color:var(--green);

background:white;

}

.btn-secondary:hover{

background:var(--green);

color:white;

}

/* HERO THEMATIQUES */

.hero-thematiques{

display:flex;

flex-wrap:wrap;

gap:16px;

}

.hero-item{

background:white;

padding:14px 18px;

border-radius:18px;

display:flex; align-items:center; gap:14px;

box-shadow:var(--shadow-soft);

transition:.35s;

}

.hero-item:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.hero-icon{

width:44px; height:44px;

border-radius:14px;

background:rgba(77,124,96,.10);

display:flex; align-items:center; justify-content:center;

color:var(--green);

}

.hero-item span{

font-weight:700;

font-size:.95rem;

}

/* HERO IMAGE */

.hero-right{

position:relative;

display:flex;
justify-content:center;
align-items:center;

}

.hero-image-card{

position:relative;

border-radius:38px;

overflow:hidden;

box-shadow:var(--shadow-strong);

max-width:520px;

}

.hero-image-card img{

width:100%;

height:auto;

display:block;

object-fit:cover;

}

.floating-card{

position:absolute;

bottom:24px;
left:24px;

background:rgba(255,255,255,.96);

backdrop-filter:blur(12px);

padding:20px 24px;

border-radius:24px;

box-shadow:0 15px 40px rgba(0,0,0,.14);

display:flex;

flex-direction:column;

gap:4px;

z-index:10;

}

.floating-card small{

font-size:.75rem;

text-transform:uppercase;

letter-spacing:1px;

font-weight:700;

color:#7A8790;

}

.floating-card strong{

font-size:4rem;

line-height:1;

font-weight:900;

color:var(--blue);

}

.floating-card span{

font-size:.95rem;

font-weight:600;

color:var(--blue);

}/* STATS */

.stats-section{

margin-top:-30px; margin-bottom:80px;

position:relative; z-index:10;

}

.stats-grid{

display:grid; grid-template-columns:repeat(4,1fr); gap:28px;

}

.stat-card{

background:white;

border-radius:32px;

padding:42px 30px;

text-align:center;

box-shadow:var(--shadow-medium);

transition:.45s ease;

}

.stat-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.stat-card i{

font-size:2.3rem;

color:var(--green);

margin-bottom:20px;

}

.stat-card h3{

font-size:1.05rem;

text-transform:uppercase;

line-height:1.5;

}

/* SECTIONS */

.section{

padding:95px 0;

}

.section-title{

margin-bottom:80px;

}

.section-title h2{

font-size:clamp(2.8rem,5vw,5.4rem);

line-height:.95;

text-transform:uppercase;

font-weight:900;

}

.section-title h2 span{

color:var(--green);

}

.separator{

width:110px; height:5px;

border-radius:999px;

background:var(--green);

margin-top:28px;

}

/* EXPERTISES */

.expertises-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:40px;

}

.expertise-card{

background:white;

border-radius:36px;

padding:38px;

min-height:320px;

box-shadow:var(--shadow-soft);

transition:.4s;

}

.expertise-card:hover{

transform:translateY(-12px) scale(1.01);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.expertise-icon{

width:82px; height:82px;

border-radius:24px;

background:rgba(77,124,96,.10);

display:flex; align-items:center; justify-content:center;

margin-bottom:30px;

color:var(--green);

font-size:2rem;

}

/* ANALYSES */

.analyses-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:32px;

}

.analyse-card{

background:white;

border-radius:34px;

overflow:hidden;

box-shadow:var(--shadow-medium);

transition:.45s ease;

}

.analyse-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 80px rgba(0,0,0,.16);

}

.analyse-card img{

width:100%;

transition:.6s ease;

}

.analyse-card:hover img{

transform:scale(1.04);

}

.analyse-content{

padding:32px;

}

/* MOBILITES */

.mobilites-image{

border-radius:40px;

overflow:hidden;

box-shadow:var(--shadow-strong);

margin-bottom:50px;

}

.mobilites-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

}

.mobilite-card{

background:white;

border-radius:24px;

padding:30px;

text-align:center;

box-shadow:var(--shadow-soft);

transition:.35s;

}

.mobilite-card:hover{

transform:translateY(-8px);

}

/* DOCUMENTS */

.documents-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:40px;

align-items:stretch;

}

.document-card{

background:white;

border-radius:36px;

overflow:hidden;

box-shadow:var(--shadow-medium);

transition:.4s ease;

display:flex;

flex-direction:column;

}

.document-card:hover{

transform:translateY(-10px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}

.document-card img{

width:100%;

height:280px;

object-fit:cover;

display:block;

}

.document-content{

padding:40px;

display:flex;

flex-direction:column;

flex:1;

}

.document-icon{

width:78px;
height:78px;

border-radius:22px;

background:rgba(77,124,96,.10);

display:flex;
align-items:center;
justify-content:center;

font-size:2rem;

color:var(--green);

margin-bottom:24px;

}

.document-content h3{

font-size:1.8rem;

font-weight:800;

margin-bottom:16px;

text-transform:uppercase;

}

.document-content p{

color:var(--text);

margin-bottom:30px;

line-height:1.8;

}

.document-button{

display:inline-flex;

align-items:center;
justify-content:center;

padding:16px 28px;

border-radius:16px;

background:var(--blue);

color:white;

font-weight:700;

transition:.3s;

width:max-content;

}

.document-button:hover{

background:var(--green);

transform:translateY(-3px);

}

/* BENEFICES */

.benefices-section{

background:linear-gradient(135deg,#28333B,#3A4750);

color:white;

}

.benefices-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

}

.benefice-card{

background:rgba(255,255,255,.06);

border-radius:30px;

padding:40px 24px;

text-align:center;

}

/* CONTACT */

.contact-section{

padding:120px 0;

background:var(--light);

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:stretch;

}

.contact-left{

background:linear-gradient(135deg,#28333B,#36424A);

color:white;

padding:70px 60px;

border-radius:40px;

box-shadow:var(--shadow-strong);

display:flex;

flex-direction:column;

justify-content:center;

}

.contact-left h2{

font-size:3.2rem;

line-height:1.05;

font-weight:900;

margin-bottom:45px;

max-width:420px;

}

.contact-items{

display:flex;

flex-direction:column;

gap:28px;

}

.contact-item{

display:flex;

gap:18px;

align-items:flex-start;

}

.contact-icon{

width:56px;
height:56px;

border-radius:18px;

background:rgba(255,255,255,.08);

display:flex;
align-items:center;
justify-content:center;

font-size:1.2rem;

flex-shrink:0;

}

.contact-item strong{

display:block;

font-size:1rem;

margin-bottom:4px;

}

.contact-item span{

color:rgba(255,255,255,.82);

line-height:1.7;

}

.contact-form{

background:white;

padding:60px;

border-radius:40px;

box-shadow:var(--shadow-medium);

}

.contact-form h3{

font-size:2.5rem;

font-weight:800;

margin-bottom:35px;

}

.contact-form input,
.contact-form textarea{

width:100%;

padding:20px 22px;

border:1px solid #DDE3E7;

border-radius:18px;

margin-bottom:20px;

font-family:inherit;

font-size:1rem;

background:#FAFBFC;

transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

outline:none;

border-color:var(--green);

background:white;

box-shadow:0 0 0 4px rgba(77,124,96,.10);

}

.contact-form textarea{

min-height:180px;

resize:vertical;

}

.contact-form small{

display:block;

font-size:.82rem;

line-height:1.7;

color:#7A8790;

margin-top:-5px;

margin-bottom:24px;

}

.contact-form button{

width:100%;

padding:20px;

border:none;

border-radius:18px;

background:var(--green);

color:white;

font-size:1rem;

font-weight:800;

cursor:pointer;

transition:.3s;

}

.contact-form button:hover{

transform:translateY(-4px);

background:#40684F;

}

/* FOOTER */

.footer{

background:#1F272D;

color:rgba(255,255,255,.75);

text-align:center;

padding:30px;

}

/* FADE */

.fade-up{

opacity:0;

transform:translateY(30px);

animation:fadeUp 1s ease forwards;

}

@keyframes fadeUp{

to{

opacity:1;


transform:translateY(0);

}

}

/* RESPONSIVE */

@media(max-width:1100px){

.hero-grid,
.stats-grid,
.expertises-grid,
.analyses-grid,
.documents-grid,
.contact-grid,
.benefices-grid,
.mobilites-grid{

grid-template-columns:1fr;

}

.documents-grid,
.contact-grid{

grid-template-columns:1fr;

}

}
/* ================= MOBILE FINAL ================= */

@media(max-width:768px){

html,body{
width:100%;
overflow-x:hidden !important;
}

.container{
width:100%;
padding:0 15px;
}

/* Header */

.header-container{
flex-direction:column;
padding:12px 0;
}

.logo img{
height:60px;
}

.nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
width:100%;
}

.nav a{
font-size:.82rem;
}

/* HERO */

.hero{
padding-top:180px;
padding-bottom:50px;
min-height:auto;
}

.hero-grid{
display:block !important;
width:100%;
}

.hero-left,
.hero-right{
width:100%;
max-width:100%;
}

.hero-logo{
width:140px;
margin:auto auto 20px;
}

.hero-left{
text-align:center;
}

.hero-left h1{

font-size:2.3rem !important;
line-height:1.05;
word-break:break-word;

}

.hero-left p{
font-size:.95rem;
max-width:100%;
}

.hero-line{
margin:20px auto;
}

.hero-buttons{
display:flex;
flex-direction:column;
gap:12px;
}

.btn{
width:100%;
}

.hero-thematiques{
display:grid;
grid-template-columns:1fr;
}

.hero-image-card{

max-width:100%;
width:100%;

}

.floating-card{
position:relative;
left:auto;
bottom:auto;
width:100%;
margin-top:15px;
}

/* Toutes les grilles */

.stats-grid,
.expertises-grid,
.analyses-grid,
.documents-grid,
.mobilites-grid,
.contact-grid,
.benefices-grid{

grid-template-columns:1fr !important;

}

/* Images */

img{
max-width:100%;
height:auto;
}

}
/* ===== Correction section contact smartphone ===== */

@media(max-width:768px){

.contact-section{
padding:60px 0;
}

.contact-grid{
display:block !important;
width:100% !important;
max-width:100% !important;
}

.contact-left,
.contact-form{
width:100% !important;
max-width:100% !important;
padding:30px 20px !important;
margin-bottom:25px;
border-radius:25px;
box-sizing:border-box;
overflow:hidden;
}

.contact-left h2,
.contact-form h3{
font-size:1.8rem !important;
line-height:1.2;
max-width:100%;
word-break:break-word;
}

.contact-item{
gap:12px;
}

.contact-icon{
width:46px;
height:46px;
flex-shrink:0;
}

}