/* =================================================
GLOBAL
================================================= */

.section{
background:white;
}

.section-grey{
background:#f7f7f7;
}

/* =================================================
NAVBAR
================================================= */

/* navbar toujours au dessus */

.navbar{
position:relative;
padding:15px;
width:100%;
z-index:9999;
transition:background 0.3s ease;
}
/* navbar noire quand on scroll */

.navbar.scrolled{
background:rgba(0,0,0,0.8);
}



/* liens */

.navbar-item,
.navbar-item:hover{
background-color:transparent !important;
}

.logo{
color:white;
font-weight:600;
letter-spacing:4px;
}

.nav-link{
color:white;
position:relative;
text-decoration:none;
}

.nav-link::after{
content:"";
position:absolute;
left:0;
bottom:4px;
width:0;
height:2px;
background:white;
transition:width .25s ease;
}

.nav-link:hover::after{
width:100%;
}


/* BURGER */

.navbar-burger span{
background:white;
}

.navbar-burger{
color:white;
}

/* enlever fond du burger */

.navbar-burger,
.navbar-burger:hover{
background:transparent !important;
}

/* =================================================
SMALL HERO (pages internes)
================================================= */


.hero-small{
min-height:320px;
height:auto;
}

.hero-small.hero-bg{
min-height:320px;
background-size:cover;
background-position:center;
}

.hero-small .hero-body{
padding-top:120px;
padding-bottom:60px;
}

/* =================================================
LEGAL CONTENT
================================================= */

.legal-section{
background:white;
padding:80px 20px;
}

.legal-content{
max-width:800px;
margin:auto;
font-size:16px;
line-height:1.7;
color:#1f2937; /* texte sombre lisible */
}

.legal-content h2{
color:#111827;
margin-bottom:30px;
}

.legal-content h3{
margin-top:35px;
margin-bottom:10px;
color:#111827;
}

.legal-content p{
margin-bottom:15px;
color:#374151;
}

.legal-content a{
color:#f97316;
text-decoration:none;
}

.legal-content strong{
    color:#000;
}

.legal-content a:hover{
text-decoration:underline;
}

/* =================================================
HERO
================================================= */

.hero{
padding-top:0;
}

.hero-bg{
min-height:100vh;
background-image:url("../img/hero.jpg");
background-size:cover;
background-position:center;
position:relative;
}

.hero-bg::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0.35);
pointer-events:none;
z-index:0;
}

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


/* =================================================
HERO TEXT
================================================= */

.hero-text{
max-width:700px;
}

.hero-small-title{
color:white;
font-size:14px;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:15px;
}

.hero-big-title{
color:white;
font-size:clamp(5rem,10vw,9rem);
font-weight:800;
line-height:1;
letter-spacing:3px;
margin-bottom:20px;
}

.hero-description{
color:white;
font-size:16px;
opacity:.9;
max-width:700px;
line-height:1.6;
}


/* =================================================
HERO CONTACT CARD
================================================= */

.project-card{
position:absolute;
right:6%;
bottom:40px;
width:300px;

background:rgba(255,255,255,0.15);
backdrop-filter:blur(14px);

border-radius:18px;
padding:24px;

color:white;
z-index:5;
}

.card-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px;
}

.card-title{
font-weight:600;
font-size:16px;
}

.card-subtitle{
font-size:14px;
opacity:.9;
margin-bottom:15px;
}

.card-avatar{
width:40px;
height:40px;
border-radius:50%;
object-fit:cover;
background:white;
padding:5px;
}


/* disponibilité */

.availability{
font-size:14px;
margin-bottom:14px;
font-weight:500;
}

.available{
color:#22c55e;
}

.unavailable{
color:#ef4444;
}


/* =================================================
BUTTONS
================================================= */

.project-btn{
border-radius:999px;
font-weight:600;
border:none;
background:#f97316;
color:white;
transition:all .25s ease;
}

.project-card .project-btn{
width:100%;
padding:14px 20px;
}

.project-btn:hover{
background:#ea580c;
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.section-cta .project-btn{
padding:14px 28px;
}


/* =================================================
SECTION TITLES
================================================= */

.section-header{
max-width:650px;
margin-bottom:60px;
}

.section-small-title{
font-size:13px;
text-transform:uppercase;
letter-spacing:2px;
color:#f97316;
margin-bottom:10px;
}

.section-title{
font-size:36px;
font-weight:700;
margin-bottom:20px;
color:#111827;
}

.section-intro{
color:#4b5563;
line-height:1.7;
font-size:16px;
}


/* =================================================
SECTION PARTICULIERS
================================================= */

.particuliers{
padding:110px 20px;
}


/* =================================================
CARDS SOLS
================================================= */

.floor-columns{
align-items:stretch;
}

.floor-columns .column{
display:flex;
}

.floor-card{
background:white;
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);

display:flex;
flex-direction:column;
width:100%;

transition:transform .25s ease, box-shadow .25s ease;
}

.floor-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.floor-image{
width:100%;
height:220px;
object-fit:cover;
}

.floor-content{
padding:26px;
flex-grow:1;
}

.floor-content h3{
font-size:20px;
font-weight:700;
margin-bottom:10px;
color:#1f2937;
}

.floor-content p{
color:#4b5563;
margin-bottom:16px;
font-size:15px;
line-height:1.6;
}

.floor-content ul{
list-style:none;
margin-top:15px;
padding:0;
}

.floor-content li{
display:flex;
align-items:center;
gap:10px;
padding:10px 0;
border-top:1px solid #e5e7eb;
font-size:14px;
color:#374151;
}

.floor-content li::before{
content:"✓";
color:#22c55e;
font-weight:bold;
}


/* =================================================
CTA
================================================= */

.section-cta{
margin-top:60px;
text-align:center;
}

.section-cta .button{
padding:16px 36px;
font-size:16px;
}

.cta-text{
max-width:600px;
margin:0 auto 20px auto;
text-align:center;
color:#4b5563;
line-height:1.6;
}


/* =================================================
SECTION HISTOIRE
================================================= */

.story-image{
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,.1);
width:100%;
}

.story-caption{
font-size:14px;
color:#6b7280;
margin-top:10px;
text-align:center;
}

.story-points{
list-style:none;
padding:0;
margin-top:20px;
}

.story-points li{
display:flex;
align-items:center;
gap:10px;
padding:10px 0;
border-top:1px solid #e5e7eb;
font-size:15px;
color:#374151;
}

.story-points li::before{
content:"✓";
color:#22c55e;
font-weight:bold;
}


/* =================================================
REALISATIONS
================================================= */

.realisations-grid{
margin-top:40px;
}

.realisation-item{
background:white;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.realisation-item img{
width:100%;
height:260px;
object-fit:cover;
display:block;
transition:transform .35s ease;
}

.realisation-item:hover img{
transform:scale(1.05);
}

.realisation-caption{
font-size:14px;
color:#4b5563;
padding:12px 14px;
text-align:center;
}

/* =================================================
CONTACT SECTION
================================================= */

.contact-section{
background:white;
border-top:1px solid #e5e7eb;
padding:100px 20px;
}


/* =========================
ZONE D'INTERVENTION
========================= */

.service-area{
margin-top:30px;
text-align:center;
}

.service-area ul{
list-style:none;
padding:0;
margin:0 auto;
max-width:800px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;
}

.service-area li{
background:#f9fafb;
padding:10px 14px;
border-radius:8px;
font-size:14px;
color:#374151;

box-shadow:0 4px 12px rgba(0,0,0,.05);
transition:transform .2s ease, box-shadow .2s ease;
}

.service-area li:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.08);
}


/* =================================================
CONTACT SECTION
================================================= */

.contact-section{
background:white;
border-top:1px solid #e5e7eb;
padding:100px 20px;
}


/* =========================
ZONE D'INTERVENTION
========================= */

.service-area{
margin-top:35px;
text-align:center;
}

.service-area ul{
list-style:none;
padding:0;
margin:0 auto;
max-width:850px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;
}

.service-area li{
background:#f3f4f6;
padding:10px 14px;
border-radius:8px;
font-size:14px;
color:#1f2937;

border:1px solid #e5e7eb;

transition:all .2s ease;
}

.service-area li:hover{
background:#f97316;
color:white;
border-color:#f97316;
transform:translateY(-2px);
}


/* =========================
CONTACT PRINCIPAL
========================= */

.contact-main{
margin-top:60px;
display:flex;
justify-content:center;
}

.contact-card{
background:white;
padding:40px;
border-radius:14px;
text-align:center;

box-shadow:0 12px 35px rgba(0,0,0,.08);

max-width:340px;
width:100%;

transition:transform .25s ease, box-shadow .25s ease;
}

.contact-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}


/* NOM */

.contact-name{
font-size:22px;
font-weight:600;
margin-bottom:6px;
color:#111827;
}


/* ROLE */

.contact-role{
font-size:14px;
color:#6b7280;
margin-bottom:22px;
}


/* TELEPHONE */

.contact-phone{
display:block;
font-size:18px;
font-weight:600;
color:#f97316;
margin-bottom:12px;
text-decoration:none;
}

.contact-phone:hover{
text-decoration:underline;
}


/* EMAIL */

.contact-mail{
display:block;
font-size:14px;
color:#4b5563;
margin-bottom:25px;
text-decoration:none;
}

.contact-mail:hover{
text-decoration:underline;
}


/* BOUTON */

.contact-card .project-btn{
padding:14px 28px;
font-size:16px;
}


/* =================================================
RESPONSIVE
================================================= */

@media (max-width:768px){

.contact-section{
padding:80px 20px;
}

.service-area ul{
grid-template-columns:repeat(2,1fr);
}

.contact-card{
padding:30px;
}

}


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

.site-footer{
background:#14161a;
padding:30px 20px;
text-align:center;
}

.footer-text{
color:#9ca3af;
font-size:14px;
margin-bottom:6px;
}

.footer-links a{
color:#d1d5db;
font-size:14px;
text-decoration:none;
}

.footer-links a:hover{
text-decoration:underline;
}


/* =================================================
HERO MOBILE CTA
================================================= */

.mobile-call{
display:none;
text-align:center;
margin-top:25px;
}

.mobile-call .button{
padding:16px 28px;
font-size:16px;
}

/* =================================================
RESPONSIVE
================================================= */

@media (max-width:1023px), (max-height:700px){

/* NAVBAR */

.navbar{
position:fixed;
top:0;
left:0;
width:100%;
z-index:10000;
}

/* MENU MOBILE */

.navbar-menu{
display:none;
background:#111;
padding:10px 0;
position:absolute;
top:100%;
left:0;
width:100%;
z-index:10001;
}

.navbar-menu.is-active{
display:block;
}

.navbar-item{
color:white;
}


/* HERO MOBILE */

.hero{
min-height:auto;
padding-top:90px;
padding-bottom:40px;
}

.hero-text{
text-align:center;
margin:0 auto;
}

.hero-big-title{
font-size:clamp(2.5rem,6vw,5.5rem);
font-weight:800;
line-height:1.1;
letter-spacing:2px;
margin-bottom:20px;
}

.hero-description{
text-align:center;
margin:0 auto;
max-width:420px;
}


/* SUPPRIMER LA CARD FLOTTANTE */

.project-card{
display:none;
}


/* ACTIVER LE BOUTON MOBILE */

.mobile-call{
display:block;
margin-top:25px;
}

.mobile-call .button{
padding:16px 28px;
font-size:16px;
}


/* AUTRES SECTIONS */

.columns{
flex-direction:column;
}

.floor-columns .column{
width:100%;
}

.section-header{
text-align:center;
}

.realisation-item img{
height:220px;
}

.contact-card{
margin-bottom:20px;
}


/* SECTION HISTOIRE */

#histoire .column{
text-align:center;
}

#histoire .story-points{
max-width:320px;
margin:20px auto 0 auto;
text-align:left;
}

.story-caption{
text-align:center;
}

}


/* PETITS MOBILES */

@media (max-width:480px){

.hero-big-title{
font-size:32px;
}

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

.floor-image{
height:180px;
}

}