/* =================================================
RESET
================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
margin:0;
padding:0;
}

/* =================================================
HEADER / NAVBAR
Accueil
================================================= */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 60px;
background:#020203;
}

.logo img{
height:140px;
}

nav a{
color:white;
text-decoration:none;
margin-left:25px;
font-size:16px;
transition:0.3s;
}

nav a:hover{
color:#25D366;
}

/* =================================================
HERO SECTION
Accueil
================================================= */
/* HERO SECTION */

.hero{
position:relative;
height:600px;
background-image:url("image/pic3.jpg"); /* ton image */
background-size:cover;
background-position:center;
display:flex;
align-items:center;
padding-left:8%;
color:rgb(245, 245, 245);
}

/* overlay sombre */

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, 0.55);
}

/* contenu */

.hero-content{
position:relative;
max-width:600px;
}

/* petit titre */

.hero-mini-title{
color:#d4a017;
letter-spacing:3px;
font-size:14px;
margin-bottom:20px;
}

/* titre principal */

.hero h1{
font-size:60px;
font-weight:bold;
line-height:1.1;
margin-bottom:20px;
}

.hero h1 span{
color:#d4a017;
}

/* description */

.hero-description{
font-size:16px;
line-height:1.6;
margin-bottom:30px;
}

/* boutons */

.hero-buttons{
display:flex;
gap:20px;
}

/* bouton principal */

.btn-primary{
background:#d4a017;
color:white;
padding:14px 28px;
text-decoration:none;
border-radius:6px;
font-weight:bold;
transition:0.3s;
}

.btn-primary:hover{
background:#d4a017;
}

/* bouton outline */

.btn-outline{
border:2px solid white;
color:white;
padding:12px 26px;
text-decoration:none;
border-radius:6px;
font-weight:bold;
transition:0.3s;
}

.btn-outline:hover{
background:white;
color:black;
}


/* SECTION QUI NOUS SOMMES */

#qui-nous-sommes{
padding:80px 20px;
background:#f9f9f9;
}

.about-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
gap:60px;
flex-wrap:wrap;
}

/* IMAGE */

.about-image{
position:relative;
flex:1;
}

.about-image img{
width:100%;
border-radius:12px;
}

/* BADGE */

.badge{
position:absolute;
bottom:20px;
left:20px;
background:#d4a017;
color:white;
padding:10px 18px;
border-radius:6px;
font-weight:bold;
}

/* TEXTE */

.about-text{
flex:1;
}

.about-mini-title{
color:#d4a017;
font-weight:bold;
letter-spacing:2px;
margin-bottom:10px;
}

.about-text h2{
font-size:36px;
margin-bottom:20px;
}

.about-description{
color:#020202;
line-height:1.7;
margin-bottom:15px;
}

/* FEATURES */

.features{
display:flex;
gap:40px;
margin-top:30px;
flex-wrap:wrap;
}

.feature{
display:flex;
align-items:center;
gap:15px;
}

.feature img{
width:60px;
}

.feature h3{
margin:0;
font-size:18px;
}

.feature p{
margin:0;
color:#747373;
font-size:14px;
}

/* RESPONSIVE */

@media(max-width:900px){

.about-container{
flex-direction:column;
text-align:center;
}

.features{
justify-content:center;
}
}


/* ===== SECTION POURQUOI CHOISIR ===== */

.why-section {
    background: radial-gradient(circle at top right, rgba(77, 65, 14, 0.733), transparent 40%),
                linear-gradient(135deg, #05070d, #000000);
    padding: 90px 20px;
    text-align: center;
    color: #fff;
}

/* TITRE */
.why-section h2 {
    font-size: 38px;
    font-weight: 600;
}

.why-section h2 span {
    color: #d4a017;
}

/* SOUS-TITRE */
.subtitle {
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 60px;
}

/* CONTAINER */
.why-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* CARTE */
.why-card {
    width: 320px;
    padding: 40px 25px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(244,194,107,0.2);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: all 0.4s ease;
}

/* HOVER LUXE */
.why-card:hover {
    transform: translateY(-12px);
    border-color: #d4a017;
    box-shadow: 0 10px 40px rgba(244,194,107,0.2);
}

/* ICONE */

.icon-box {
    width: 20px;
    height: 20px;
    margin: 0 auto 20px;
    border-radius: 15px;
    background: rgba(244,194,107,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TITRE CARTE */
.why-card h3 {
    margin-bottom: 12px;
    font-size: 20px;
}

/* TEXTE */
.why-card p {
    color: #f7f7f7;
    font-size: 14px;
    line-height: 1.6;
}
/* CONTENEUR ICONE */
.icon-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* IMAGE */
.icon-img {
    width: 60px;   /* 🔥 CHANGE ICI */
    height: 60px;
    object-fit: contain;
}

/* =================================================
PRODUITS
Produits
================================================= */

.produits{
background:#f5f5f5;
padding:70px 10%;
}

.produits-container{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;

}

.produit-card{

background:rgb(14, 13, 13);
border-radius:12px;
overflow:hidden;
box-shadow:0 8px 20px rgba(14, 12, 12, 0.1);
transition:0.3s;

}

.produit-card:hover{
transform:translateY(-5px);
}

.produit-image{
position:relative;
height:400px;
}

.produit-image img{

width:100%;
height:100%;
object-fit:cover;

}

.produit-image h3{

position:absolute;
bottom:15px;
left:20px;
color:#d1900e;
font-size:22px;
font-weight:400;
 font-weight: bold; /* ici on passe à bold */

}

.produit-content{

padding:25px;

}

.produit-content p{

color:#faf9f9;
margin-bottom:20px;

}

.produit-content ul{

display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-bottom:25px;
font-size:14px;

}

.produit-content li{

list-style:none;
color:#666;

}

.btn-devis{

display:block;
background:#d4a017;
color:white;
text-align:center;
padding:12px;
border-radius:6px;
text-decoration:none;
font-weight:600;

}

.btn-devis:hover{

background:#d4a017;

}

/* SECTION ACCESSOIRES */

.accessoires-section{

background:#efefef;

padding:80px 20px;

text-align:center;

}


/* TITRES */

.accessoires-top{

color:#d4a017;

font-size:16px;

letter-spacing:2px;

margin-bottom:10px;

}


.accessoires-title{

font-size:40px;

margin-bottom:10px;

}

.accessoires-title span{

color:#d4a017;

}

.accessoires-subtitle{

color:#d4a017;

margin-bottom:60px;

}


/* GRID */

.accessoires-grid{

display:grid;

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

gap:30px;

max-width:1100px;

margin:auto;

}


/* CARD */

.accessoire-card{

background:#f7f7f7;

padding:30px;

border-radius:10px;

text-align:left;

transition:0.3s;

}

.accessoire-card:hover{

transform:translateY(-5px);

box-shadow:0 10px 20px rgba(0,0,0,0.1);

}


/* ICON */

.accessoire-icon{

width:90px;

height:90px;

background:#d4a017;

display:flex;

align-items:center;

justify-content:center;

border-radius:8px;

margin-bottom:15px;

}

.accessoire-icon img{

width:55px;

}


/* TEXT */

.accessoire-card h3{

font-size:16px;

margin-bottom:8px;

}

.accessoire-card p{

font-size:13px;

color:#666;

}
/* =================================================
SERVICES
Services
================================================= */

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #fff;
}

/* ===============================
   SECTION PRINCIPALE
================================ */
.section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 10%;
    gap: 40px;
}

/* inversion droite/gauche */
.section.reverse {
    flex-direction: row-reverse;
}

/* ===============================
   IMAGE
================================ */
.image-box {
    position: relative;
    width: 50%;
}

.image-box img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

/* icône sur image */
.icon {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(7, 7, 7, 0.6);
    color: #fff;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
}

/* ===============================
   TEXTE
================================ */
.text-box {
    width: 50%;
}

.text-box h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.text-box p {
    font-size: 16px;
    color: #030303;
    margin-bottom: 15px;
}

/* liste */
.text-box ul {
    padding-left: 18px;
    margin-bottom: 20px;
}

.text-box ul li {
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

/* ===============================
   BOUTON
================================ */
.btn {
    display: inline-block;
    background: #d4a017;
    color: white;
    padding: 10px 18px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    transition: 0.3s;
}

.btn:hover {
    background: #d4a017;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .container {
        flex-direction: column;
    }
}

/* ===============================
   NOS ENGAGEMENTS
================================ */
/* RESET */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #000;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #000;
}

/* SECTION */
#NOS-ENGAGEMENTS {
    padding: 100px 10%;
    background: radial-gradient(circle at right, #1a1206, #05070f);
    color: #d4a017;
}

/* CONTENEUR CENTRÉ */
.why-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* TITRE */
.why-title {
    font-size: 42px;
    margin-bottom: 10px;
    text-align: center;
}

.why-title span {
    color: #d4a017;
}

/* SOUS TITRE */
.why-subtitle {
    color: #fff;
    max-width: 600px;
    margin: 0 auto 30px;
    text-align: center;
}

/* GRID */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD */
.why-card {
    background: linear-gradient(145deg, #000000, #0a0f1a);
    padding: 30px;
    border-radius: 20px;
    text-align: left;
    border: 1px solid rgba(204, 146, 29, 0.6);
    position: relative;
    transition: 0.3s;
}

/* GLOW BORDER */
.why-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid rgba(255, 170, 0, 0.3);
    pointer-events: none;
}

/* HOVER */
.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(255, 170, 0, 0.2);
}

/* ICON */
.why-icon {
    width: 55px;
    height: 55px;
    background: #1a1206;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.why-icon img {
    width: 28px;
    height: 28px;
}

/* TITRE CARD */
.why-card h3 {
    margin: 0;
    font-size: 18px;
    color: white;
}

/* TEXTE */
.why-card p {
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
}

/* =================================================
Catalogue 
================================================= */
/* BLOC CATALOGUE */
.bloc-catalogue {
    padding: 60px 40px;
    background-size: cover;
    background-position: center;
}
/* INTRO CENTRÉE */
.catalogue-intro {
    height: 40vh; /* prend toute la hauteur écran */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre vertical */
    align-items: center;     /* centre horizontal */
    text-align: center;
    padding: 50px;
}

/* TITRE */
.catalogue-intro h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

/* TEXTE */
.catalogue-intro p {
    font-size: 18px;
    margin-bottom: 30px;
    color: #555;
}

/* BOUTON */
.btn-catalogue {
    padding: 15px 30px;
    background: #d4af37;
    border: none;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.3s;
}

/* SECTION INTRO */
.catalogue-intro {
    text-align: center;
    padding: 60px 20px;
}

/* FORMULAIRE */
.download-form {
    margin-top: 5px; /* espace de 15px sous le bouton */
    display: flex;
    justify-content: center;
}

/* BOITE */
.form-box {
    width: 320px;
    text-align: center;
}

/* INPUT */
.form-box input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/* BOUTON */
.btn-send {
    width: 100%;
    padding: 12px;
    background: #d4af37;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}
.btn-catalogue:hover {
    background: #b8962e;
}
/* TITRE */
.bloc-catalogue h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
    font-size: 28px;
}

/* GRID DES CABINES */
.cabine-grid {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: nowrap; /* IMPORTANT = tout sur une seule ligne */
    overflow-x: auto;  /* scroll si ça dépasse */
}
.cabine-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* espace horizontal + vertical */
    justify-content: center;
}

/* CARTE */
.cabine {
    min-width: 40px;
    text-align: center;
}
/* Espace au-dessus du bloc Ascenseur Passagers */
.bloc-catalogue {
    margin-top: 60px;
}
/* IMAGE */
.cabine img {
    width: 170px;
    height: 370px;
    object-fit: cover;
    border-radius: 10px;
}

/* TEXTE */
.cabine p {
    color: #fff;
    margin-top: 10px;
    font-size: 14px;
}
body {
    margin: 10;
    font-family: 'Arial', sans-serif;
    background-color: #0d0d0d;
    color: #fff;
}

/* HEADER */
.header {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(to right, #000, #1a1a1a);
}

.header h1 {
    font-size: 40px;
    color: #d4af37;
    letter-spacing: 2px;
}

.header p {
    color: #ccc;
    margin-top: 10px;
}

/* CATALOGUE */
.catalogue {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px;
    gap: 30px;
}

/* CARD */
.card {
    background: #1a1a1a;
    border-radius: 15px;
    overflow: hidden;
    width: 300px;
    transition: 0.3s;
    border: 1px solid rgba(212,175,55,0.3);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(212,175,55,0.2);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h2 {
    color: #d4af37;
    font-size: 20px;
}

.card-content p {
    color: #ccc;
    font-size: 14px;
}

/* FOOTER */
.footer {
    text-align: center;
    padding: 20px;
    background: #000;
    color: #777;
}
/* ESPACE ENTRE LES BLOCS */
.bloc-catalogue {
    padding: 60px 40px;
    background-size: cover;
    background-position: center;
    margin-bottom: 60px; /* ESPACE ENTRE LES BLOCS */
}
/* =================================================
CTA
Catalogue / Devis
================================================= */

.cta{
background:#faf9f9;
color:rgb(8, 1, 1);
text-align:center;
padding:80px 20px;
}

.cta-button{
display:inline-block;
background:#d4a017;
color:white;
text-decoration:none;
padding:15px 35px;
border-radius:6px;
}


/* =================================================
CONTACT
Contact
================================================= */

.hero-contact{
position:relative;
width:100%;
height:200px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
background-image:url("image/cont2.jpg");
background-size:cover;
background-position:center;
color:white;
}

.contact-section{
max-width:1200px;
margin:auto;
padding:60px 20px;
}

.contact-container{
display:flex;
gap:50px;
}

.contact-info{
flex:1;
}

/* =================================================
FORMULAIRE
Contact / Devis
================================================= */

.form-section {
    padding: 100px 10%;
    
    /* ✅ IMAGE BACKGROUND FULL WIDTH */
    background: 
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        url("image/cont2.jpg") center/cover no-repeat;

    text-align: left;          /* ← texte à gauche */
}

/* CONTENU */
.form-content {
    max-width: 1000px;
    margin: 50px 0 0 0; /* ← marge en haut */
    background: white;
    padding: 20px;
    border-radius: 10px;
}
/* INPUTS */
.form-content input,
.form-content textarea,
.form-content select {
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* BOUTON */
.btn-primary {
    background: #d4a017;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
}
.desc {
    margin-bottom: 20px; /* espace sous le texte */
}
/* =================================================
WHATSAPP
Global
================================================= */

.whatsapp-box{
position:fixed;
bottom:25px;
right:25px;
background:rgba(37,211,102,0.9);
color:white;
padding:14px 22px;
border-radius:40px;
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
font-weight:bold;
z-index:9999;
}

/* =================================================
FOOTER
Global
================================================= */
.footer{
background:#070707;
color:white;
padding:60px 10% 30px 10%;
font-family:Arial, Helvetica, sans-serif;
}

.footer-container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:60px;
align-items:flex-start;

}

/* LOGO */

.footer-logo{
width:70px;
margin-bottom:10px;
}

/* TITRE CONCEPT LIFT */

.footer-col h2{

color:#d4a017;
font-size:18px;
margin-bottom:5px;

}

/* TITRES DES COLONNES */

.footer-col h3{

color:#d4a017;
font-size:14px;
letter-spacing:1px;
margin-bottom:20px;

}

/* PARAGRAPHE */

.footer-col p{

color:#ffffff;
font-size:12px;
line-height:1.6;

}

/* LISTE */

.footer-col ul{

list-style:none;
padding:0;

}

.footer-col ul li{

margin-bottom:10px;

}

/* LIENS */

.footer-col ul li a{

text-decoration:none;
color:#ffffff;
font-size:12px;
transition:0.3s;

}

.footer-col ul li a:hover{

color:#d4a017;

}

/* LIGNE DU BAS */

.footer-bottom{

margin-top:40px;
padding-top:20px;
border-top:1px solid #eeeeee;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;

}

.footer-bottom p{

color:#f3f2f2;
font-size:13px;

}
.overlay {
    z-index: 1;
}

.footer {
    z-index: 999;
    position: relative;
}

/* ===============================
   VISITE TECHNIQUE 
================================ */

  body {
            font-family: Arial, sans-serif;
            background-color: #f8f5f0;
            color: #222;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 700px;
            margin: 80px auto;
            background: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.08);
        }

        h1 {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #222;
        }

        p {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        ul {
            margin-bottom: 30px;
        }

        li {
            margin-bottom: 10px;
        }

        .btn-green {
            display: inline-block;
            background-color: #28a745;
            color: white;
            padding: 15px 25px;
            text-decoration: none;
            font-weight: bold;
            border-radius: 6px;
            transition: 0.3s;
        }

        .btn-green:hover {
            background-color: #218838;
        }
   

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

@media(max-width:900px){

header{
flex-direction:column;
gap:15px;
}

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.contact-container{
flex-direction:column;
}

.footer-container{
flex-direction:column;
gap:30px;
}

}