/*=========================================================
            LACHEM SPA
            PREMIUM STYLE V3
=========================================================*/

/*========================
    VARIABLES
=========================*/

:root{

    --primary:#005BAA;
    --primary-dark:#003B73;
    --primary-light:#EAF4FC;

    --white:#FFFFFF;
    --light:#F7F9FC;
    --text:#333333;
    --title:#0B1F3A;

    --shadow:0 20px 60px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    color:var(--text);

    background:#fff;

    overflow-x:hidden;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

/*========================
    CONTAINER
=========================*/

.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}

section{

    padding:100px 0;

}

/*========================
    HEADER
=========================*/

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:.4s;

    background:transparent;

}

header.scrolled{

    background:#ffffff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    height:65px;

    transition:.3s;

}

header.scrolled .logo img{

    height:58px;

}

/*========================
    MENU
=========================*/

.menu{

    display:flex;

    gap:40px;

}

.menu a{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    position:relative;

    transition:.3s;

}

header.scrolled .menu a{

    color:#222;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.menu a:hover::after{

    width:100%;

}

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

.hero{

    height:100vh;

    background:
    linear-gradient(rgba(0,48,92,.60),
                    rgba(0,48,92,.60)),
    url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#fff;

    position:relative;

}

.hero-content{

    max-width:900px;

    padding:20px;

}

.hero h5{

    font-size:18px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:20px;

    color:#D7EFFF;

}

.hero h1{

    font-size:72px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:25px;

}

.hero h1 span{

    color:#7EC8FF;

}

.hero p{

    font-size:22px;

    max-width:700px;

    margin:auto;

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

    padding:18px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    background:#0077d8;

    transform:translateY(-4px);

}

.btn-secondary{

    border:2px solid #fff;

    color:#fff;

    padding:18px 38px;

    border-radius:50px;

    transition:.35s;

}

.btn-secondary:hover{

    background:#fff;

    color:var(--primary);

}

/*========================
    SCROLL INDICATOR
=========================*/

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    font-size:34px;

    animation:moveDown 2s infinite;

}

@keyframes moveDown{

0%{

transform:translate(-50%,0);

}

50%{

transform:translate(-50%,12px);

}

100%{

transform:translate(-50%,0);

}

}

/*=========================================================
            A PROPOS
=========================================================*/

.section-title{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.section-title span{

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.section-title h2{

    font-size:56px;

    color:var(--title);

    margin:15px 0 25px;

    font-weight:800;

}

.section-title p{

    font-size:18px;

    color:#666;

    line-height:1.8;

}

/*=========================================================
            ABOUT
=========================================================*/

.about{

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-image img{

    width:100%;

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.08);

}

.about-content h3{

    font-size:38px;

    color:var(--title);

    margin-bottom:25px;

}

.about-content p{

    margin-bottom:22px;

    color:#666;

    font-size:17px;

    text-align:justify;

}

.about-content strong{

    color:var(--primary);

}

/*=========================================================
            CHIFFRES
=========================================================*/

.about-boxes{

    display:grid;

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

    gap:25px;

    margin:45px 0;

}

.box{

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.box:hover{

    transform:translateY(-8px);

}

.box h4{

    color:var(--primary);

    font-size:42px;

    margin-bottom:12px;

    font-weight:700;

}

.box p{

    margin:0;

    color:#555;

    font-weight:500;

}

/*=========================================================
            ACTIVITES
=========================================================*/

.activities{

    background:var(--light);

}

.activities-grid{

    display:grid;

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

    gap:30px;

}

.activity{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.activity:hover{

    transform:translateY(-10px);

}

.activity img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s;

}

.activity:hover img{

    transform:scale(1.08);

}

.activity h3{

    font-size:24px;

    color:var(--title);

    padding:25px 25px 10px;

}

.activity p{

    padding:0 25px 30px;

    color:#666;

    line-height:1.7;

}

/*=========================================================
            ANIMATION
=========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
            NOTRE USINE
=========================================================*/

.factory{

    background:#ffffff;

}

.factory-grid{

    display:grid;

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

    gap:40px;

    margin-top:60px;

}

.factory-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:all .35s ease;

}

.factory-card:hover{

    transform:translateY(-10px);

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

}

.factory-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    transition:.6s;

}

.factory-card:hover img{

    transform:scale(1.08);

}

.factory-content{

    padding:35px;

}

.factory-content h3{

    color:var(--title);

    font-size:30px;

    margin-bottom:18px;

}

.factory-content p{

    color:#666;

    line-height:1.8;

    font-size:17px;

}


/*=============================
  NOS DOMAINES
=============================*/

.domains{
    padding:100px 0;
    background:#f8f9fb;
}

.domains-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.domain-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.domain-card:hover{

    transform:translateY(-10px);

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

}

.domain-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.4s;

}

.domain-card:hover img{

    transform:scale(1.08);

}

.domain-content{

    padding:25px;

    text-align:center;

}

.domain-content h3{

    font-size:24px;

    color:#12376a;

    margin-bottom:15px;

}

.domain-content p{

    font-size:16px;

    line-height:1.7;

    color:#666;
}

/* Responsive */

@media(max-width:991px){

    .domains-grid{

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

    }

}

@media(max-width:768px){

    .domains-grid{

        grid-template-columns:1fr;

    }

}
/*=========================================================
            POURQUOI LACHEM
=========================================================*/

.why{

    background:#fff;

}

.why-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.why-card{

    background:#fff;

    text-align:center;

    padding:45px 30px;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.why-card:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-10px);

}

.why-card i{

    font-size:55px;

    color:var(--primary);

    margin-bottom:25px;

    display:block;

}

.why-card:hover i{

    color:#fff;

}

.why-card h3{

    font-size:24px;

    margin-bottom:20px;

}

.why-card p{

    line-height:1.8;

}


/*=========================================================
            EFFET IMAGE
=========================================================*/

.factory-card,
.product-card,
.activity{

    cursor:pointer;

}

.factory-card img,
.product-card img,
.activity img{

    will-change:transform;

}


/*=========================================================
            OMBRES PREMIUM
=========================================================*/

.box,
.activity,
.factory-card,
.product-card,
.why-card{

    border:1px solid rgba(0,91,170,.05);

}

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

.contact{

    background:var(--light);

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    margin-top:60px;

}

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-box{

    background:#fff;

    padding:30px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.info-box h3{

    color:var(--primary);

    margin-bottom:12px;

    font-size:22px;

}

.info-box p{

    color:#666;

    line-height:1.8;

}

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

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

    width:100%;

    padding:18px 20px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:12px;

    font-family:Poppins,sans-serif;

    font-size:16px;

    transition:.3s;

}

.contact-form textarea{

    height:180px;

    resize:none;

}

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

    border-color:var(--primary);

    outline:none;

}

.contact-form button{

    border:none;

    cursor:pointer;

}


/*=========================================================
            GOOGLE MAP
=========================================================*/

.map iframe{

    width:100%;

    height:450px;

    border:none;

}


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

footer{

    background:var(--primary-dark);

    color:#fff;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-logo{

    width:180px;

    margin-bottom:25px;

}

footer h3{

    margin-bottom:20px;

    font-size:22px;

}

footer ul{

    padding:0;

}

footer li{

    margin-bottom:12px;

}

footer a{

    color:#fff;

    transition:.3s;

}

footer a:hover{

    color:#7EC8FF;

}

footer hr{

    margin:50px 0 25px;

    border:none;

    height:1px;

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

}

.copyright{

    text-align:center;

    font-size:15px;

    opacity:.8;

}


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

@media(max-width:1100px){

.about-grid,
.contact-wrapper,
.factory-grid{

grid-template-columns:1fr;

}

.activities-grid,
.products-grid,
.why-grid{

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

}

.hero h1{

font-size:50px;

}

}

/* =========================================================
   RESPONSIVE MOBILE LACHEM
   ========================================================= */

@media (max-width: 768px) {

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

    /* ================= HEADER ================= */

    header {
        width: 100%;
        height: auto;
        min-height: 80px;
        padding: 10px 12px;
    }

    header .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* LOGO */

    header img {
        display: block;
        width: 100px;
        max-width: 100px;
        height: auto;
        margin: 0 auto 10px;
    }

    /* MENU */

    nav {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    nav ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 14px;
        margin: 0;
        padding: 0;
    }

    nav ul li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    nav ul li a {
        display: block;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
        padding: 4px 0;
    }

    /* ================= LANGUES ================= */

    .languages {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
    }

    .languages img {
        width: 22px;
        height: auto;
    }


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

    .hero {
        width: 100%;
        min-height: 650px;
        padding: 70px 20px 50px;
        background-position: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }

    .hero h1 {
        font-size: 38px;
        line-height: 1.12;
        margin-bottom: 20px;
    }

    .hero p {
        font-size: 17px;
        line-height: 1.65;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 30px;
    }

    .hero-buttons a {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }


    /* ================= CONTENEUR ================= */

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }


    /* ================= TITRES ================= */

    .section-title {
        width: 100%;
        text-align: center;
    }

    .section-title h2 {
        font-size: 30px;
        line-height: 1.2;
    }

    .section-title p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* ================= DOMAINES ================= */

    .domains-grid,
    .domain-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }


    /* ================= POURQUOI LACHEM ================= */

    .why-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .why-card {
        width: 100%;
    }


    /* ================= QUALITE ================= */

    .quality-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .quality-card {
        width: 100%;
        min-height: auto;
    }


    /* ================= QUI SOMMES-NOUS ================= */

    .about-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .about-image {
        width: 100%;
    }

    .about-image img {
        width: 100%;
        height: auto;
    }


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

    .contact-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    .contact-map iframe {
        width: 100%;
        height: 260px;
    }


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

    footer {
        text-align: center;
    }

}


/* =========================================================
   PETITS TELEPHONES
   ========================================================= */

@media (max-width: 480px) {

    header {
        padding: 8px 8px;
    }

    header img {
        width: 90px;
        max-width: 90px;
    }

    nav ul {
        gap: 7px 11px;
    }

    nav ul li a {
        font-size: 12px;
    }

    .languages img {
        width: 20px;
    }

    .hero {
        min-height: 620px;
        padding: 60px 16px 45px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 16px;
        line-height: 1.6;
    }

    .hero-buttons a {
        max-width: 280px;
    }

    .section-title h2 {
        font-size: 27px;
    }

}


/*=========================================================
            ANIMATIONS
=========================================================*/

.reveal{

opacity:0;

transform:translateY(50px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

html{

scroll-behavior:smooth;

}

/*=========================================================
            LOCALISATION
=========================================================*/

.location{

    padding:100px 0;

    background:#f7f9fc;

}

.location-content{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:40px;

    align-items:stretch;

    margin-top:60px;

}

.location-info{

    background:#005BAA;

    color:#fff;

    padding:40px;

    border-radius:20px;

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

}

.location-info h3{

    font-size:30px;

    margin-bottom:30px;

}

.location-info p{

    margin-bottom:25px;

    font-size:18px;

    line-height:1.8;

}

.location-info strong{

    color:#ffffff;

}

.location-map{

    overflow:hidden;

    border-radius:20px;

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

}

.location-map iframe{

    width:100%;

    height:550px;

    border:0;

    display:block;

}

/*==========================
Responsive
===========================*/

@media(max-width:900px){

.location-content{

grid-template-columns:1fr;

}

.location-info{

margin-bottom:25px;

}

.location-map iframe{

height:450px;

}

}

/*==================================================
    PAGES PRODUITS
==================================================*/

/************ BANNIÈRE ************/

.page-banner{
    position:relative;
    height:500px;
    overflow:hidden;
}

.page-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.banner-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,35,75,.55);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    padding:20px;
}

.banner-overlay h1{
    font-size:52px;
    margin-bottom:20px;
}

.banner-overlay p{
    max-width:800px;
    font-size:22px;
    line-height:1.8;
}

/************ INTRO ************/

.page-intro{
    padding:80px 0;
    text-align:center;
}

.page-intro h2{
    color:#0d4d8b;
    font-size:40px;
    margin-bottom:25px;
}

.page-intro p{
    max-width:900px;
    margin:auto;
    font-size:18px;
    line-height:1.9;
    color:#555;
}

/************ PRODUITS ************/

.products-page{
    padding:90px 0;
    background:#f7f9fc;
}

.products-page .products-grid{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

.products-page .product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.35s;

}

.products-page .product-card:hover{

    transform:translateY(-8px);

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

}

.products-page .product-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.products-page .product-card h3{

    color:#0d4d8b;

    font-size:24px;

    text-align:center;

    margin:25px 20px 15px;

}

.products-page .product-card p{

    padding:0 25px 30px;

    text-align:center;

    line-height:1.8;

    color:#666;

}

/************ AVANTAGES ************/

.advantages{

    padding:90px 0;

    background:#ffffff;

}

.advantages-grid{

    display:grid;

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

    gap:35px;

    margin-top:50px;

}

.advantage-card{

    background:#f7f9fc;

    border-left:6px solid #0d4d8b;

    border-radius:12px;

    padding:35px;

}

.advantage-card h3{

    color:#0d4d8b;

    margin-bottom:15px;

    font-size:24px;

}

.advantage-card p{

    color:#666;

    line-height:1.8;

}

/************ DEVIS ************/

.quote-section{

    background:#0d4d8b;

    color:#fff;

    text-align:center;

    padding:90px 20px;

}

.quote-section h2{

    font-size:40px;

    margin-bottom:20px;

}

.quote-section p{

    max-width:800px;

    margin:auto auto 35px;

    line-height:1.8;

}

.quote-section .btn{

    display:inline-block;

    background:#fff;

    color:#0d4d8b;

    padding:15px 40px;

    border-radius:40px;

    font-weight:bold;

    text-decoration:none;

    transition:.3s;

}

.quote-section .btn:hover{

    background:#f2f2f2;

}

/************ RESPONSIVE ************/

@media(max-width:991px){

.products-page .products-grid{

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

}

.advantages-grid{

grid-template-columns:1fr;

}

.banner-overlay h1{

font-size:42px;

}

}

@media(max-width:768px){

.products-page .products-grid{

grid-template-columns:1fr;

}

.banner-overlay h1{

font-size:34px;

}

.banner-overlay p{

font-size:18px;

}

}

/*============================
HEADER
============================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#ffffff;

    z-index:999;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo img{

    height:65px;

}

.menu{

    display:flex;

    gap:35px;

    list-style:none;

}

.menu a{

    text-decoration:none;

    color:#163b73;

    font-weight:600;

    transition:.3s;

}

.menu a:hover{

    color:#0b74d1;

}

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

.hero{

    height:100vh;

    background:url("assets/images/hero.jpg") center center/cover no-repeat;

    position:relative;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,35,75,.60);

    display:flex;

    align-items:center;

}

.hero .container{

    max-width:850px;

}

.hero h1{

    color:#fff;

    font-size:68px;

    margin-bottom:25px;

}

.hero p{

    color:#fff;

    font-size:22px;

    line-height:1.8;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn-primary{

    background:#0d6efd;

    color:#fff;

    padding:16px 34px;

    border-radius:40px;

    text-decoration:none;

    font-weight:bold;

}

.btn-secondary{

    background:#fff;

    color:#163b73;

    padding:16px 34px;

    border-radius:40px;

    text-decoration:none;

    font-weight:bold;

}

.btn-primary:hover{

    background:#0958c8;

}

.btn-secondary:hover{

    background:#f2f2f2;

}

/*====================================
QUI SOMMES-NOUS
====================================*/

.about{

    padding:120px 0;

    background:#ffffff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.section-subtitle{

    color:#0d6efd;

    font-weight:bold;

    letter-spacing:2px;

    display:block;

    margin-bottom:15px;

}

.about h2{

    font-size:48px;

    color:#163b73;

    margin-bottom:30px;

}

.about p{

    font-size:18px;

    line-height:1.9;

    color:#555;

    margin-bottom:22px;

}

.about-image img{

    width:100%;

    border-radius:18px;

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

}

@media(max-width:991px){

.about-grid{

grid-template-columns:1fr;

}

.about{

text-align:center;

}

}

/*=========================
NOS DOMAINES
=========================*/

.domains{

    padding:120px 0;

    background:#f5f7fa;

}

.domains-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.domain-card{

    position:relative;

    height:320px;

    overflow:hidden;

    border-radius:18px;

    text-decoration:none;

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

}

.domain-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.domain-card:hover img{

    transform:scale(1.08);

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(8,42,89,.92),
    rgba(8,42,89,.20));

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    color:#fff;

}

.overlay h3{

    font-size:28px;

    margin-bottom:10px;

}

.overlay span{

    color:#ffd34d;

    font-weight:bold;

    font-size:17px;

}

.domain-card:hover .overlay{

    background:linear-gradient(to top,
    rgba(13,110,253,.95),
    rgba(13,110,253,.20));

}

@media(max-width:991px){

.domains-grid{

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

}

}

@media(max-width:768px){

.domains-grid{

grid-template-columns:1fr;

}

}

/*====================================
NOTRE USINE
====================================*/

.factory{

    padding:120px 0;

    background:#ffffff;

}

.factory-grid{

    display:grid;

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

    gap:35px;

    margin-top:60px;

}

.factory-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.10);

    transition:.4s;

}

.factory-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.18);

}

.factory-card img{

    width:100%;

    height:280px;

    object-fit:cover;

}

.factory-content{

    padding:30px;

}

.factory-content h3{

    color:#163b73;

    font-size:28px;

    margin-bottom:15px;

}

.factory-content p{

    color:#666;

    line-height:1.8;

    font-size:17px;

}

@media(max-width:991px){

.factory-grid{

grid-template-columns:1fr;

}

}

/*====================================
POURQUOI CHOISIR LACHEM
====================================*/

.why-lachem{

    padding:120px 0;

    background:#f5f7fa;

}

.why-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.why-card{

    background:#ffffff;

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

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

    transition:.4s;

}

.why-card:hover{

    transform:translateY(-10px);

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

}

.why-card .icon{

    font-size:55px;

    margin-bottom:20px;

}

.why-card h3{

    color:#163b73;

    font-size:24px;

    margin-bottom:18px;

}

.why-card p{

    color:#666;

    font-size:17px;

    line-height:1.8;

}

@media(max-width:1200px){

.why-grid{

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

}

}

@media(max-width:768px){

.why-grid{

grid-template-columns:1fr;

}

}

/*====================================
CHIFFRES CLÉS
====================================*/

.stats{

    background:#0d4d8b;

    padding:90px 0;

}

.stats-grid{

    display:grid;

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

    gap:30px;

}

.stat-card{

    text-align:center;

    color:#ffffff;

}

.stat-card h2{

    font-size:70px;

    font-weight:700;

    margin-bottom:10px;

    color:#ffd34d;

}

.stat-card span{

    font-size:20px;

    letter-spacing:.5px;

}

@media(max-width:991px){

.stats-grid{

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

}

}

@media(max-width:768px){

.stats-grid{

grid-template-columns:1fr;

gap:40px;

}

}

/*====================================
QUALITÉ
====================================*/

.quality{

padding:120px 0;

background:#ffffff;

}

.quality-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.quality-card{

text-align:center;

padding:35px;

background:#f8f9fb;

border-radius:18px;

transition:.35s;

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

}

.quality-card:hover{

transform:translateY(-8px);

}

.quality-card img{

width:70px;

margin-bottom:25px;

}

.quality-card h3{

color:#163b73;

margin-bottom:15px;

font-size:24px;

}

.quality-card p{

line-height:1.8;

color:#666;

}

@media(max-width:991px){

.quality-grid{

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

}

}

@media(max-width:768px){

.quality-grid{

grid-template-columns:1fr;

}

}

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

.contact-section{

padding:120px 0;

background:#f7f9fc;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1.5fr;

gap:50px;

margin-top:60px;

align-items:center;

}

.contact-info{

background:#ffffff;

padding:40px;

border-radius:18px;

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

}

.contact-info h3{

color:#163b73;

font-size:30px;

margin-bottom:35px;

}

.contact-item{

margin-bottom:30px;

}

.contact-item strong{

display:block;

font-size:20px;

margin-bottom:10px;

color:#0d4d8b;

}

.contact-item p{

line-height:1.8;

color:#555;

}

.contact-map iframe{

border-radius:18px;

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

}

@media(max-width:991px){

.contact-grid{

grid-template-columns:1fr;

}

}

/* ====================================
   MENU + LANGUES SUR LA MEME LIGNE
==================================== */

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 20px;
    border-left: 1px solid #ddd;
}

.language-bar a {
    text-decoration: none;
    font-size: 20px;
    transition: 0.3s;
}

.language-bar a:hover {
    transform: scale(1.15);
}

/* ===========================================
   QUI SOMMES-NOUS ?
=========================================== */

.about-section {

    padding: 110px 0;

    background: #ffffff;

}

.about-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 70px;

    align-items: center;

}

.section-label {

    display: inline-block;

    color: #2878d4;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 12px;

}

.about-content h2 {

    color: #163b73;

    font-size: 44px;

    line-height: 1.2;

    margin-bottom: 28px;

}

.about-content > p {

    color: #555;

    font-size: 18px;

    line-height: 1.8;

    margin-bottom: 18px;

}

.about-features {

    margin-top: 35px;

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.about-feature {

    display: flex;

    align-items: flex-start;

    gap: 20px;

}

.about-icon {

    min-width: 62px;

    height: 62px;

    border-radius: 50%;

    background: #edf5ff;

    color: #2878d4;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    font-weight: 700;

}

.about-feature h3 {

    color: #163b73;

    font-size: 22px;

    margin: 0 0 6px;

}

.about-feature p {

    color: #666;

    font-size: 16px;

    line-height: 1.6;

    margin: 0;

}

.about-image img {

    width: 100%;

    height: 520px;

    object-fit: cover;

    border-radius: 20px;

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

}


/* ===========================================
   TABLETTE
=========================================== */

@media (max-width: 991px) {

    .about-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .about-image {

        order: -1;

    }

}


/* ===========================================
   MOBILE
=========================================== */

@media (max-width: 768px) {

    .about-section {

        padding: 80px 20px;

    }

    .about-content h2 {

        font-size: 34px;

    }

    .about-content > p {

        font-size: 16px;

    }

    .about-image img {

        height: 350px;

    }

}

/* ===========================================
   FORMULAIRE DE CONTACT
=========================================== */

.contact-grid {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 40px;

    margin-top: 60px;

    align-items: stretch;

}


/* INFORMATIONS */

.contact-info {

    background: #ffffff;

    padding: 40px;

    border-radius: 18px;

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

}

.contact-info h3 {

    color: #163b73;

    font-size: 28px;

    margin-bottom: 30px;

}


/* FORMULAIRE */

.contact-form-box {

    background: #ffffff;

    padding: 40px;

    border-radius: 18px;

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

}

.contact-form-box h3 {

    color: #163b73;

    font-size: 28px;

    margin-bottom: 30px;

}

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}

.form-group {

    margin-bottom: 22px;

}

.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #163b73;

    font-weight: 600;

}

.form-group input,
.form-group textarea {

    width: 100%;

    padding: 14px 16px;

    border: 1px solid #d9dee7;

    border-radius: 8px;

    font-family: inherit;

    font-size: 16px;

    outline: none;

    transition: .3s;

    box-sizing: border-box;

}

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

    border-color: #2878d4;

    box-shadow: 0 0 0 3px rgba(40,120,212,.10);

}

.form-group textarea {

    resize: vertical;

}

.contact-submit {

    background: #2878d4;

    color: #ffffff;

    border: none;

    padding: 15px 32px;

    border-radius: 8px;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.contact-submit:hover {

    background: #163b73;

    transform: translateY(-2px);

}


/* CARTE */

.contact-map {

    margin-top: 30px;

}

.contact-map iframe {

    width: 100%;

    border-radius: 12px;

}


/* MOBILE */

@media (max-width: 991px) {

    .contact-grid {

        grid-template-columns: 1fr;

    }

}

@media (max-width: 600px) {

    .form-row {

        grid-template-columns: 1fr;

    }

    .contact-form-box,
    .contact-info {

        padding: 25px;

    }

}

.footer-logo {
    width: 100px;
    height: auto;
}

/* ====================================
   TITRE NOS DOMAINES D'ACTIVITÉ
==================================== */

.domaines-section .section-title span {
    display: block;
    font-size: 42px;
    font-weight: 700;
    color: #163b73;
    margin-bottom: 15px;
}

.domaines-section .section-title h2 {
    font-size: 28px;
    font-weight: 500;
    color: #2878d4;
    margin-bottom: 20px;
}

/* =========================================
   NOS DOMAINES D'ACTIVITÉ
   Hiérarchie des titres
========================================= */

#domaines .section-title span {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

#domaines .section-title h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 20px !important;
}

/* =========================================
   STYLE DE LA SECTION NOTRE USINE
========================================= */

#usine {
    background: #f5f7fa;
    padding: 100px 0;
}

/* Grand titre : NOTRE USINE */

#usine .section-title span {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Sous-titre */

#usine .section-title h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 20px !important;
}

/* Texte sous le titre */

#usine .section-title p {
    max-width: 950px;
    margin: 0 auto 50px auto;
    color: #666;
    font-size: 18px;
    line-height: 1.7;
}

/* =========================================
   POURQUOI CHOISIR LACHEM ?
========================================= */

.why-lachem {
    background: #f5f7fa;
    padding: 100px 0;
}

/* Grand titre */

.why-lachem .section-title span {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Sous-titre */

.why-lachem .section-title h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 20px !important;
}

/* Texte introductif */

.why-lachem .section-title p {
    max-width: 950px;
    margin: 0 auto 55px auto;
    color: #666;
    font-size: 18px;
    line-height: 1.7;
}

/* =========================================
   CARTES
========================================= */

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.why-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.why-card .icon {
    font-size: 42px;
    margin-bottom: 20px;
}

.why-card h3 {
    color: #163b73;
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 15px;
}

.why-card p {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}


/* =========================================
   TABLETTE
========================================= */

@media (max-width: 1100px) {

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

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .why-lachem {
        padding: 80px 20px;
    }

    .why-lachem .section-title span {
        font-size: 34px !important;
    }

    .why-lachem .section-title h2 {
        font-size: 24px !important;
    }

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

}

/* =========================================
   QUALITÉ & ENGAGEMENTS
========================================= */

.quality {
    background: #f5f7fa;
    padding: 100px 0;
}

/* Grand titre */

.quality .section-title span {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Sous-titre */

.quality .section-title h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 20px !important;
}

/* Texte introductif */

.quality .section-title p {
    max-width: 950px;
    margin: 0 auto 55px auto;
    color: #666;
    font-size: 18px;
    line-height: 1.7;
}

/* =========================================
   CARTES QUALITÉ
========================================= */

.quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.quality-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.quality-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.quality-card img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    margin-bottom: 20px;
}

.quality-card h3 {
    color: #163b73;
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 15px;
}

.quality-card p {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

/* =========================================
   TABLETTE
========================================= */

@media (max-width: 1100px) {

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

}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .quality {
        padding: 80px 20px;
    }

    .quality .section-title span {
        font-size: 34px !important;
    }

    .quality .section-title h2 {
        font-size: 24px !important;
    }

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

}

/* =========================================
   QUI SOMMES-NOUS ?
========================================= */

.about {
    background: #f5f7fa;
    padding: 100px 0;
}

/* Grand titre */

.about .section-title span {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Sous-titre */

.about .section-title h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 20px !important;
}

/* Texte introductif */

.about .section-title p {
    max-width: 950px;
    margin: 0 auto 55px auto;
    color: #666;
    font-size: 18px;
    line-height: 1.7;
}

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

.contact {
    background: #f5f7fa;
    padding: 100px 0;
}

/* Grand titre */

.contact .section-title span {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Sous-titre */

.contact .section-title h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 20px !important;
}

/* Texte introductif */

.contact .section-title p {
    max-width: 950px;
    margin: 0 auto 55px auto;
    color: #666;
    font-size: 18px;
    line-height: 1.7;
}

/* =========================================
   QUI SOMMES-NOUS ?
========================================= */

.about-section {
    background: #f5f7fa;
    padding: 100px 0;
}

/* Grand titre */

.about-section .section-label {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Sous-titre */

.about-section .about-content > h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 25px !important;
}


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

.contact-section {
    background: #f5f7fa;
    padding: 100px 0;
}

/* Grand titre */

.contact-section .section-title span {
    display: block !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #163b73 !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Sous-titre */

.contact-section .section-title h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: #2878d4 !important;
    margin-bottom: 20px !important;
}

/* Texte introductif */

.contact-section .section-title p {
    max-width: 950px !important;
    margin: 0 auto 55px auto !important;
    color: #666 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* =========================================================
   VERSION MOBILE - RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    /* GENERAL */
    * {
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    header {
        height: auto;
        min-height: 85px;
        padding: 10px 15px;
    }

    header .container {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    header img {
        max-width: 125px;
        height: auto;
    }

    nav {
        width: 100%;
    }

    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 18px;
        padding: 0;
        margin: 0;
    }

    nav ul li {
        list-style: none;
    }

    nav ul li a {
        font-size: 14px;
        white-space: nowrap;
    }


    /* =====================================================
       LANGUES
       ===================================================== */

    .languages {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
    }


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

    .hero {
        min-height: 650px;
        padding: 100px 20px 60px;
        background-position: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
    }

    .hero h1 {
        font-size: 38px;
        line-height: 1.15;
        text-align: center;
    }

    .hero p {
        font-size: 17px;
        line-height: 1.6;
        text-align: center;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hero-buttons a {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }


    /* =====================================================
       TITRES DES SECTIONS
       ===================================================== */

    .section-title {
        padding-left: 10px;
        padding-right: 10px;
    }

    .section-title span {
        font-size: 18px;
    }

    .section-title h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .section-title p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* =====================================================
       DOMAINES
       ===================================================== */

    .domains-grid,
    .domain-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .domain-card {
        width: 100%;
    }


    /* =====================================================
       POURQUOI CHOISIR LACHEM
       ===================================================== */

    .why-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .why-card {
        width: 100%;
        padding: 30px 22px;
    }

    .why-card h3 {
        font-size: 21px;
    }

    .why-card p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* =====================================================
       QUALITE & ENGAGEMENTS
       ===================================================== */

    .quality-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .quality-card {
        width: 100%;
        min-height: auto;
        padding: 30px 22px;
    }

    .quality-card h3 {
        font-size: 21px;
    }

    .quality-card p {
        font-size: 16px;
        line-height: 1.6;
    }

    .quality-card img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }


    /* =====================================================
       QUI SOMMES-NOUS
       ===================================================== */

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 35px;
    }

    .about-content {
        width: 100%;
    }

    .about-content h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .about-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .about-image {
        width: 100%;
    }

    .about-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    .about-feature {
        flex-direction: row;
        align-items: flex-start;
        gap: 15px;
    }


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

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .contact-info,
    .contact-form-box {
        width: 100%;
    }

    .contact-form-box {
        padding: 25px 20px;
    }

    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }

    .form-group {
        width: 100%;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        font-size: 16px;
    }

    .contact-map iframe {
        width: 100%;
        height: 260px;
    }


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

    footer {
        text-align: center;
    }

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

    footer img {
        max-width: 120px;
    }

}


/* =========================================================
   PETITS TELEPHONES
   ========================================================= */

@media (max-width: 480px) {

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    header img {
        max-width: 110px;
    }

    nav ul {
        gap: 10px 13px;
    }

    nav ul li a {
        font-size: 13px;
    }

    .hero {
        min-height: 620px;
        padding-top: 80px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 16px;
    }

    .section-title h2 {
        font-size: 28px;
    }

    .section-title span {
        font-size: 16px;
    }

    .about-content h2 {
        font-size: 28px;
    }

}

/* =========================================================
   CORRECTION HEADER MOBILE LACHEM
   ========================================================= */

@media (max-width: 768px) {

    /* HEADER */
    header,
    .header {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 10px 10px 12px;
        background: #ffffff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        box-shadow: 0 3px 15px rgba(0,0,0,.08);
    }

    /* CONTENEUR DU HEADER */
    header .container,
    .header .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    /* BARRE PRINCIPALE */
    .navbar {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    /* LOGO */
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .logo img,
    header .logo img,
    .header .logo img {
        display: block !important;
        width: auto !important;
        height: 48px !important;
        max-width: 110px !important;
        margin: 0 auto !important;
        object-fit: contain;
    }

    /* NAVIGATION + DRAPEAUX */
    .main-nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* MENU */
    .menu {
        width: 100%;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center;
        gap: 5px 16px !important;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .menu li {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .menu a {
        display: block;
        color: #163b73 !important;
        font-size: 13px !important;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        padding: 4px 0;
    }

    /* DRAPEAUX */
    .language-bar {
        width: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 5px 0 0;
        margin: 0;
        border-left: none !important;
    }

    .language-bar a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: 1;
    }

    .language-bar img {
        display: block !important;
        width: 24px !important;
        height: auto !important;
        max-width: 24px !important;
        object-fit: contain;
    }

    /* SI LES DRAPEAUX UTILISENT .languages */
    .languages {
        width: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin: 5px 0 0;
    }

    .languages img {
        display: block !important;
        width: 24px !important;
        height: auto !important;
        max-width: 24px !important;
    }

    /* HERO : on laisse de la place au header fixe */
    .hero {
        min-height: 680px;
        padding-top: 170px;
        background-position: center center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero h1 {
        font-size: 38px !important;
        line-height: 1.12;
    }

    .hero p {
        font-size: 17px !important;
        line-height: 1.6;
    }

}


/* =========================================================
   PETITS TELEPHONES
   ========================================================= */

@media (max-width: 480px) {

    header,
    .header {
        padding: 8px 8px 10px;
    }

    .logo img,
    header .logo img,
    .header .logo img {
        height: 42px !important;
        max-width: 100px !important;
    }

    .menu {
        gap: 4px 11px !important;
    }

    .menu a {
        font-size: 12px !important;
    }

    .language-bar img,
    .languages img {
        width: 21px !important;
        max-width: 21px !important;
    }

    .hero {
        padding-top: 155px;
        min-height: 650px;
    }

    .hero h1 {
        font-size: 32px !important;
    }

    .hero p {
        font-size: 16px !important;
    }
}

/* =========================================================
   LACHEM - CORRECTION FINALE VERSION MOBILE
   ========================================================= */

/* ================================
   TABLETTES ET TELEPHONES
================================ */

@media (max-width: 768px) {

    /* --------------------------------
       GENERAL
    -------------------------------- */

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

    body {
        margin: 0;
        padding: 0;
    }

    * {
        box-sizing: border-box;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
        margin-left: auto;
        margin-right: auto;
    }


    /* =================================
       HEADER
    ================================= */

    header,
    .header {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: auto;
        min-height: 0;

        padding: 8px 10px 10px;

        background: #ffffff !important;

        z-index: 9999;

        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
    }


    /* ---------------------------------
       CONTENEUR HEADER
    --------------------------------- */

    header .container,
    .header .container {

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

        padding: 0;

        margin: 0;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 8px;
    }


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

    .navbar {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 8px;
    }


    /* =================================
       LOGO
    ================================= */

    .logo {

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        margin: 0;
    }

    .logo img,
    header .logo img,
    .header .logo img {

        display: block !important;

        width: auto !important;

        height: 48px !important;

        max-width: 110px !important;

        margin: 0 auto !important;

        object-fit: contain;
    }


    /* =================================
       NAVIGATION PRINCIPALE
    ================================= */

    .main-nav {

        width: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 5px;

        margin: 0;

        padding: 0;
    }


    /* =================================
       MENU
    ================================= */

    .menu {

        width: 100%;

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: center !important;

        align-items: center;

        gap: 5px 14px !important;

        margin: 0 !important;

        padding: 0 !important;

        list-style: none;
    }

    .menu li {

        margin: 0 !important;

        padding: 0 !important;

        list-style: none;
    }

    .menu a {

        display: block;

        color: #163b73 !important;

        font-size: 13px !important;

        font-weight: 600;

        line-height: 1.2;

        white-space: nowrap;

        text-align: center;

        padding: 3px 0;

        text-decoration: none;
    }

    .menu a::after {

        display: none;
    }


    /* =================================
       DRAPEAUX / LANGUES
    ================================= */

    .language-bar {

        width: 100%;

        display: flex !important;

        justify-content: center;

        align-items: center;

        gap: 10px;

        margin: 2px 0 0;

        padding: 4px 0 0;

        border-left: none !important;

        border-top: none !important;
    }

    .language-bar a {

        display: inline-flex;

        justify-content: center;

        align-items: center;

        font-size: 20px;

        line-height: 1;

        text-decoration: none;
    }

    .language-bar img {

        display: block !important;

        width: 24px !important;

        height: auto !important;

        max-width: 24px !important;

        object-fit: contain;
    }


    /* --------------------------------
       SI LES LANGUES UTILISENT
       .languages AU LIEU DE .language-bar
    -------------------------------- */

    .languages {

        width: 100%;

        display: flex !important;

        justify-content: center;

        align-items: center;

        gap: 10px;

        margin: 3px 0 0;

        padding: 0;
    }

    .languages a {

        display: inline-flex;

        justify-content: center;

        align-items: center;
    }

    .languages img {

        display: block !important;

        width: 24px !important;

        height: auto !important;

        max-width: 24px !important;

        object-fit: contain;
    }


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

    .hero {

        width: 100%;

        min-height: 680px;

        height: auto;

        padding: 165px 20px 60px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        background-position: center center;

        overflow: hidden;
    }

    .hero-content {

        width: 100%;

        max-width: 100%;

        padding: 0;

        margin: 0 auto;

        text-align: center;
    }

    .hero h5 {

        font-size: 14px;

        line-height: 1.4;

        margin-bottom: 15px;
    }

    .hero h1 {

        font-size: 38px !important;

        line-height: 1.12 !important;

        margin-bottom: 20px;

        word-wrap: break-word;
    }

    .hero p {

        max-width: 100%;

        font-size: 17px !important;

        line-height: 1.6 !important;

        margin-left: auto;

        margin-right: auto;

        margin-bottom: 30px;
    }


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

    .hero-buttons {

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 14px;

        margin-top: 20px;
    }

    .hero-buttons a {

        width: 100%;

        max-width: 300px;

        text-align: center;

        display: block;

        padding: 16px 25px;
    }


    /* =================================
       TITRES DES SECTIONS
    ================================= */

    section {

        padding: 80px 0;
    }

    .section-title {

        width: 100%;

        max-width: 100%;

        padding-left: 10px;

        padding-right: 10px;

        margin-left: auto;

        margin-right: auto;

        text-align: center;
    }

    .section-title span {

        font-size: 18px !important;

        line-height: 1.3;
    }

    .section-title h2 {

        font-size: 30px !important;

        line-height: 1.2;

        word-wrap: break-word;
    }

    .section-title p {

        font-size: 16px !important;

        line-height: 1.6;

    }


    /* =================================
       NOS DOMAINES
    ================================= */

    .domains,
    .domaines-section {

        padding: 80px 0;
    }

    .domains-grid,
    .domain-grid {

        width: 100%;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px;

        margin-top: 35px;
    }

    .domain-card {

        width: 100%;

        height: 300px;
    }


    /* =================================
       QUI SOMMES-NOUS
    ================================= */

    .about,
    .about-section {

        padding: 80px 0;
    }

    .about-grid {

        width: 100%;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 35px;
    }

    .about-content {

        width: 100%;
    }

    .about-content h2 {

        font-size: 32px !important;

        line-height: 1.2;
    }

    .about-content p {

        font-size: 16px;

        line-height: 1.7;
    }

    .about-image {

        width: 100%;

        order: -1;
    }

    .about-image img {

        width: 100%;

        height: auto;

        max-height: 400px;

        object-fit: cover;

        display: block;
    }


    /* =================================
       NOTRE USINE
    ================================= */

    .factory {

        padding: 80px 0;
    }

    .factory-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 25px;

        margin-top: 35px;
    }

    .factory-card {

        width: 100%;
    }

    .factory-card img {

        width: 100%;

        height: 240px;

        object-fit: cover;
    }

    .factory-content {

        padding: 25px;
    }

    .factory-content h3 {

        font-size: 25px;
    }

    .factory-content p {

        font-size: 16px;
    }


    /* =================================
       POURQUOI LACHEM
    ================================= */

    .why,
    .why-lachem {

        padding: 80px 0;
    }

    .why-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px;

        margin-top: 35px;
    }

    .why-card {

        width: 100%;

        padding: 30px 22px;
    }

    .why-card h3 {

        font-size: 21px;
    }

    .why-card p {

        font-size: 16px;

        line-height: 1.6;
    }


    /* =================================
       QUALITE
    ================================= */

    .quality {

        padding: 80px 0;
    }

    .quality-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px;

        margin-top: 35px;
    }

    .quality-card {

        width: 100%;

        padding: 30px 22px;

        min-height: auto;
    }

    .quality-card img {

        width: 60px;

        height: 60px;

        object-fit: contain;
    }

    .quality-card h3 {

        font-size: 21px;
    }

    .quality-card p {

        font-size: 16px;

        line-height: 1.6;
    }


    /* =================================
       CHIFFRES
    ================================= */

    .stats {

        padding: 70px 0;
    }

    .stats-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 35px;
    }

    .stat-card h2 {

        font-size: 55px;
    }

    .stat-card span {

        font-size: 18px;
    }


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

    .contact,
    .contact-section {

        padding: 80px 0;
    }

    .contact-grid,
    .contact-wrapper {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 30px;

        margin-top: 35px;
    }

    .contact-info,
    .contact-form,
    .contact-form-box {

        width: 100%;

        padding: 25px 20px;
    }

    .form-row {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 0;
    }

    .form-group {

        width: 100%;
    }

    .form-group input,
    .form-group textarea {

        width: 100%;

        max-width: 100%;

        font-size: 16px;
    }


    /* =================================
       CARTE GOOGLE MAPS
    ================================= */

    .contact-map,
    .location-map {

        width: 100%;

        overflow: hidden;
    }

    .contact-map iframe,
    .location-map iframe,
    .map iframe {

        width: 100% !important;

        height: 280px !important;

        display: block;

        border: 0;
    }


    /* =================================
       LOCALISATION
    ================================= */

    .location {

        padding: 80px 0;
    }

    .location-content {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 25px;

        margin-top: 35px;
    }

    .location-info {

        width: 100%;

        padding: 30px 25px;

        margin: 0;
    }

    .location-info h3 {

        font-size: 26px;
    }

    .location-info p {

        font-size: 16px;
    }


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

    .products-page {

        padding: 70px 0;
    }

    .products-page .products-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px;
    }

    .products-page .product-card {

        width: 100%;
    }

    .products-page .product-card img {

        height: 220px;
    }

    .advantages-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 20px;
    }


    /* =================================
       BANNIERE PAGES PRODUITS
    ================================= */

    .page-banner {

        height: 400px;
    }

    .banner-overlay {

        padding: 20px;
    }

    .banner-overlay h1 {

        font-size: 34px !important;

        line-height: 1.2;
    }

    .banner-overlay p {

        font-size: 17px;

        line-height: 1.6;
    }


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

    footer {

        padding: 60px 0 25px;

        text-align: center;
    }

    .footer-grid {

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 35px;

        text-align: center;
    }

    .footer-logo {

        width: 100px !important;

        max-width: 100px !important;

        height: auto;

        margin: 0 auto 20px;
    }

    footer h3 {

        font-size: 20px;
    }

    footer li {

        margin-bottom: 10px;
    }


    /* =================================
       ANIMATIONS
    ================================= */

    .fade-up,
    .reveal {

        transform: translateY(20px);
    }

}


/* =========================================================
   PETITS TELEPHONES : 480px
   ========================================================= */

@media (max-width: 480px) {

    .container {

        padding-left: 15px;

        padding-right: 15px;
    }


    /* HEADER */

    header,
    .header {

        padding: 7px 7px 9px;
    }

    .logo img,
    header .logo img,
    .header .logo img {

        height: 42px !important;

        max-width: 100px !important;
    }


    /* MENU */

    .menu {

        gap: 4px 10px !important;
    }

    .menu a {

        font-size: 12px !important;

        padding: 3px 0;
    }


    /* DRAPEAUX */

    .language-bar,
    .languages {

        gap: 8px;
    }

    .language-bar img,
    .languages img {

        width: 21px !important;

        max-width: 21px !important;
    }


    /* HERO */

    .hero {

        min-height: 650px;

        padding: 150px 16px 45px;
    }

    .hero h1 {

        font-size: 32px !important;

        line-height: 1.12 !important;
    }

    .hero p {

        font-size: 16px !important;

        line-height: 1.6 !important;
    }

    .hero-buttons a {

        max-width: 280px;
    }


    /* TITRES */

    .section-title h2 {

        font-size: 28px !important;
    }

    .section-title span {

        font-size: 16px !important;
    }


    /* DOMAINES */

    .domain-card {

        height: 280px;
    }


    /* ABOUT */

    .about-content h2 {

        font-size: 28px !important;
    }


    /* FOOTER */

    .footer-logo {

        width: 90px !important;

        max-width: 90px !important;
    }

}

/* ===================================================
   SECTION TITLES - MARKETS & OUR FACTORY
=================================================== */

.domains .section-title span,
.factory .section-title span {
    display: block;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.domains .section-title h2,
.factory .section-title h2 {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 0;
}