:root{
    --noir:#0f0f0f;
    --blanc:#ffffff;
    --vert:#1f7a3f;
    --orange:#f28c28;
    --gris:#f4f4f4;
}

html{
    width:100%;
    overflow-x:hidden;
    max-width:100%;
}

body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#fff;
    color:#222;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

/* Wrapper pour 95% de la largeur */
.wrapper{
    width:95%;
    margin:0 auto;
    box-sizing:border-box;
}

@media (max-width: 768px){
    .wrapper{width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box;}
}

/* HEADER */
header{
    background:var(--noir);
    color:#fff;
    padding:0;
    width:100%;
    box-sizing:border-box;
}

.top-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin:auto;
}

.company-name{
    font-size:36px;
    font-family:'Arial Black', 'Cooper Black', sans-serif;
    font-weight:900;
    letter-spacing:2px;
}

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

.header-actions img{
    width:22px;
}

.header-actions input{
    padding:6px;
    border-radius:4px;
    border:none;
}

.btn{
    background:var(--orange);
    border:none;
    padding:8px 14px;
    border-radius:4px;
    cursor:pointer;
    font-weight:bold;
}

/* MENU */
nav{
    background:#1b1b1b;
    border-top:2px solid var(--orange);
    width:100%;
    box-sizing:border-box;
}

.hamburger-menu{
    display:none;
    background:var(--noir);
    border:none;
    color:#fff;
    width:40px;
    height:40px;
    cursor:pointer;
    font-size:24px;
    padding:0;
    margin-right:10px;
}

nav ul{
    list-style:none;
    display:flex;
    padding:10px 0;
    margin:0;
    justify-content:space-around;
    width:100%;
    box-sizing:border-box;
}

nav ul li{
    position:relative;
    cursor:pointer;
    color:#fff;
    padding:8px 12px;
    border-right:1px solid #333;
}

nav ul li:last-child{
    border-right:none;
}

nav ul li:hover{color:var(--orange);}

.submenu{
    display:none;
    position:absolute;
    background:#222;
    top:100%;
    left:0;
    padding:10px 0;
    border-radius:0 0 6px 6px;
    min-width:150px;
    box-shadow:0 4px 8px rgba(0,0,0,0.3);
}

.submenu li{
    padding:6px 15px;
    color:#fff;
    white-space:nowrap;
    border-bottom:1px solid #333;
}

.submenu li:last-child{border-bottom:none;}

li.show .submenu{display:block;}

/* HERO */
.hero{
    height:300px;
    background:url("../images/Bannière.png") left/cover no-repeat;
    position:relative;
    color:#fff;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
}

.hero-text{
    position:absolute;
    top:50%;
    right:10cm;
    transform:translateY(-50%);
    max-width:500px;
}

.hero-text h1{
    font-size:50px;
    font-family:'Arial Black','Cooper Black',sans-serif;
    margin-bottom:10px;
}
.hero-text h3{color:var(--orange);margin-bottom:15px;}
.hero-text p{line-height:1.6;}

/* MAIN GRID */
main{
    display:grid;
    grid-template-columns:3fr 1fr;
    gap:25px;
    padding:30px;
    box-sizing:border-box;
    width:100%;
}

/* SECTIONS */
.section{
    background:var(--gris);
    padding:20px;
    border-radius:14px;
    margin-bottom:30px;
}

.section h2{
    margin-bottom:15px;
    color:#000; /* Titres en noir */
}

/* CAROUSEL */
.carousel{
    overflow:hidden;
    position:relative;
}

.carousel-track{
    display:flex;
    gap:20px;
    transition:transform 0.8s ease;
}

.card{
    background:#fff;
    border-radius:14px;
    padding:15px;
    min-width:48%; /* Toujours deux cartes visibles sur desktop */
    flex-shrink:0;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.card img{
    width:100%;
    height:120px; /* Réduit pour les services afin d'afficher entièrement */
    object-fit:contain; /* Affiche l'image entière sans rognage */
    background:#f7f7f7;
    border-radius:10px;
    margin-bottom:10px;
}

/* Reset images des réalisations à leur taille initiale */
#realisations .card img{
    height:150px;
    object-fit:cover;
    background:transparent;
}

/* Lightbox / Zoomable image */
.lightbox-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.lightbox-content{
    position:relative;
    max-width:90vw;
    max-height:90vh;
    overflow:hidden;
    border-radius:8px;
}
.lightbox-content img{
    display:block;
    max-width:100%;
    max-height:100%;
    transform-origin:center center;
    cursor:grab;
}
.lightbox-controls{
    position:absolute;
    right:8px;
    top:8px;
    display:flex;
    gap:8px;
}
.lightbox-controls button{
    background:rgba(255,255,255,0.9);
    border:none;
    padding:6px 8px;
    border-radius:6px;
    cursor:pointer;
}

/* Titres des cartes : noir par défaut, gras */
.card h3{color:#000;margin-bottom:8px;font-weight:700;}
/* Services : titre rouge et gras */
#services .card h3{color:#c62828;font-weight:800;}

.card p{font-size:14px;line-height:1.5;}
.card ul{padding-left:20px;margin-bottom:10px;}
.card a{
    display:inline-block;
    margin-top:10px;
    color:#fff;
    background:var(--orange);
    padding:6px 10px;
    border-radius:4px;
    text-decoration:none;
    font-weight:bold;
}

/* SIDEBAR */
.sidebar .section{
    padding:20px;
    background:#fff;
    border-radius:14px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
    margin-bottom:20px;
}

.sidebar table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    margin-bottom:15px;
}

.sidebar td{
    padding:6px;
    border-bottom:1px solid #ddd;
}

/* FOOTER */
footer{
    background:var(--noir);
    color:#fff;
    padding:30px;
}

.footer-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

footer a{color:var(--orange);text-decoration:none;}

/* Bootstrap overrides for mobile responsiveness */
.w-100{width:100% !important;}
.mb-2{margin-bottom:8px !important;}
.form-control, input[type="text"], input[type="email"]{
    width:100%;
    box-sizing:border-box;
    padding:8px;
    border-radius:4px;
    border:1px solid #ccc;
}



/* ========== TABLET & MOBILE (768px and below) ========== */
@media (max-width: 768px){
    /* GLOBAL: Ensure NO overflow anywhere */
    html, body, .wrapper{width:100vw; max-width:100vw; overflow-x:hidden; margin:0; padding:0; box-sizing:border-box;}
    
    /* All elements must respect mobile width */
    * {box-sizing:border-box;}
    
    /* Header */
    header{width:100vw; margin:0; padding:0;}
    .top-header{
        width:100vw; 
        padding:8px; 
        align-items:center; 
        justify-content:space-between;
        box-sizing:border-box;
    }
    .company-name{font-size:20px; flex:1; margin:0;}
    
    /* Hamburger */
    .hamburger-menu{display:block; margin:0; padding:6px;}
    .header-actions{display:none !important;}
    
    /* Navigation */
    nav{width:100vw; margin:0; padding:0; position:relative; border-top:2px solid var(--orange);}
    nav ul{width:100%; box-sizing:border-box; margin:0; padding:0;}
    nav ul.nav-menu{width:100vw; box-sizing:border-box; margin:0; padding:0;}
    nav ul.nav-menu li{width:100vw; box-sizing:border-box; padding:12px; border-right:none; margin:0;}
    .submenu{width:100%; position:static; box-sizing:border-box; margin:0; padding:0; background:#1a1a1a;}
    .submenu li{width:100%; box-sizing:border-box; padding:10px 30px; white-space:normal; margin:0;}
    
    /* Hero */
    .hero{width:100vw; height:150px; padding:0; margin:0; background-position:center;}
    .hero-overlay{width:100%; height:100%;}
    .hero-text{
        position:static;
        top:auto;
        right:auto;
        left:auto;
        transform:none;
        padding:12px;
        max-width:100%;
        width:100%;
        box-sizing:border-box;
        margin:0;
    }
    .hero-text h1{font-size:22px; margin:5px 0;}
    .hero-text h3{font-size:14px; margin:5px 0;}
    .hero-text p{font-size:12px; margin:0;}
    
    /* Main content */
    main{
        grid-template-columns:1fr !important;
        width:100vw;
        margin:0;
        padding:0;
        gap:0;
        box-sizing:border-box;
    }
    
    /* Sections */
    .section{
        width:100vw;
        box-sizing:border-box;
        padding:12px;
        margin:0;
        border-radius:0;
    }
    .section h2{font-size:16px; margin:0 0 10px 0;}
    .section p{font-size:13px; margin:8px 0;}
    
    /* Carousel */
    .carousel{width:100%; overflow:hidden;}
    .carousel-track{gap:8px; width:100%; box-sizing:border-box;}
    .card{
        min-width:100%;
        width:100%;
        padding:10px;
        margin:0;
        box-sizing:border-box;
        border-radius:6px;
    }
    .card h3{font-size:14px; margin:0 0 5px 0;}
    .card p{font-size:12px; margin:5px 0;}
    .card img{width:100%; height:auto; max-height:150px; margin:5px 0;}
    .card ul{font-size:12px; padding:0 0 0 18px; margin:5px 0;}
    .card a{padding:6px; font-size:11px; display:block; text-align:center;}
    
    /* Sidebar */
    aside.sidebar{width:100vw; box-sizing:border-box; margin:0; padding:0; order:2;}
    .sidebar .section{width:100vw; padding:12px; margin:0; box-sizing:border-box; border-radius:0;}
    .sidebar img{width:100%; height:auto; margin:0;}
    .sidebar table{width:100%; font-size:12px;}
    
    /* Footer */
    footer{width:100vw; box-sizing:border-box; margin:0; padding:12px; font-size:13px;}
    .footer-grid{grid-template-columns:1fr; gap:10px;}
    footer h3{font-size:14px; margin:0 0 8px 0;}
    footer p{font-size:12px; margin:5px 0;}
}

/* ========== MOBILE (480px and below) ========== */
@media (max-width: 480px){
    .wrapper{width:100% !important; padding:0 !important;}
    
    .company-name{font-size:20px;}
    .header-actions{gap:6px;}
    .header-actions img{width:18px;}
    .btn{padding:6px 10px; font-size:12px;}
    
    nav ul li{padding:10px 12px; font-size:13px;}
    .submenu li{padding:8px 20px; font-size:12px;}
    
    .hero{height:150px;}
    .hero-text{padding:10px;}
    .hero-text h1{font-size:20px; margin-bottom:5px;}
    .hero-text h3{font-size:14px;}
    .hero-text p{font-size:12px;}
    
    main{gap:10px; padding:10px;}
    
    .section{padding:12px; margin:0 0 12px 0;}
    .section h2{font-size:18px;}
    .section p{font-size:12px;}
    
    .card{padding:10px; min-width:100% !important; width:100% !important;}
    .card h3{font-size:15px;}
    .card p{font-size:12px;}
    .card img{max-height:150px;}
    .carousel-track{gap:8px;}
    
    footer{padding:12px;}
    .footer-grid{gap:12px;}
    footer h3{font-size:14px;}
    footer p{font-size:11px;}
}