/*==================================================
    RESPONSIVE
    ÉCRANS ≤ 1200px
==================================================*/

@media screen and (max-width:1200px){

    :root{

        --container:1140px;

    }

    .container{

        width:94%;

        max-width:1140px;

    }

    section{

        padding:80px 0;

    }

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.2rem;

    }

    .hero-content{

        max-width:700px;

    }

    .hero-content h1{

        font-size:3.2rem;

    }

    .hero-content p{

        font-size:1.1rem;

    }

    .about-content{

        gap:45px;

    }

    .services-grid,

    .technology-grid,

    .culture-grid,

    .livestock-grid,

    .news-grid,

    .testimonial-grid{

        gap:25px;

    }

    .statistics-grid{

        gap:25px;

    }

    .gallery-grid{

        gap:18px;

    }

    .footer-grid{

        gap:35px;

    }

    .partner-card{

        padding:25px;

    }

    .service-card img,

    .technology-card img,

    .culture-card img,

    .livestock-card img,

    .news-card img{

        height:220px;

    }

    .gallery-grid img{

        height:240px;

    }

    .map-container iframe{

        height:450px;

    }

}
/*==================================================
    RESPONSIVE
    ÉCRANS ≤ 992px
==================================================*/

@media screen and (max-width:992px){

    .container{

        width:95%;

    }

    section{

        padding:70px 0;

    }

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.3rem;

    }

    p{

        font-size:1rem;

    }

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

    #header .container{

        min-height:75px;

    }

    .logo img{

        width:60px;

    }

    .logo h1{

        font-size:1.4rem;

    }

    nav{

        position:fixed;

        top:75px;

        left:-100%;

        width:280px;

        height:calc(100vh - 75px);

        background:var(--white);

        box-shadow:var(--shadow);

        transition:var(--transition);

        overflow-y:auto;

        z-index:999;

    }

    nav.active{

        left:0;

    }

    nav ul{

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:25px;

    }

    nav ul li{

        width:100%;

    }

    nav ul li a{

        display:block;

        width:100%;

        padding:15px 0;

        border-bottom:1px solid var(--border);

    }

    #menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

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

    .hero{

        min-height:90vh;

    }

    .hero-content{

        max-width:650px;

    }

    .hero-content h1{

        font-size:2.8rem;

    }

    .hero-content p{

        font-size:1.05rem;

    }

    .hero-card{

        gap:20px;

    }

    .hero-card .card{

        width:220px;

    }

    /*==============================
        GRILLES
    ==============================*/

    .about-content,

    .contact-form,

    .quote-form{

        grid-template-columns:1fr;

    }

    .services-grid,

    .technology-grid,

    .culture-grid,

    .livestock-grid,

    .news-grid,

    .testimonial-grid{

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

    }

    .statistics-grid{

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

    }

    .partners-grid{

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

    }

    .gallery-grid{

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

    }

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

    .footer-grid{

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

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}
/*==================================================
    RESPONSIVE
    ÉCRANS ≤ 768px
==================================================*/

@media screen and (max-width:768px){

    .container{

        width:95%;

    }

    section{

        padding:60px 0;

    }

    h1{

        font-size:2.2rem;

        line-height:1.3;

    }

    h2{

        font-size:1.8rem;

    }

    h3{

        font-size:1.2rem;

    }

    p{

        font-size:.98rem;

        line-height:1.7;

    }

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

    #header .container{

        min-height:70px;

    }

    .logo{

        gap:10px;

    }

    .logo img{

        width:50px;

    }

    .logo h1{

        font-size:1.2rem;

    }

    nav{

        top:70px;

        width:100%;

        height:calc(100vh - 70px);

    }

    nav ul{

        padding:20px;

    }

    nav ul li a{

        font-size:1rem;

        padding:16px 0;

    }

    .header-right{

        gap:10px;

    }

    #language{

        font-size:.9rem;

        padding:8px 12px;

    }

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

    .hero{

        min-height:85vh;

    }

    .hero-content{

        max-width:100%;

        padding:15px;

    }

    .hero-content h1{

        font-size:2.3rem;

    }

    .hero-content p{

        font-size:1rem;

        margin-bottom:30px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }

    .hero-buttons .btn,

    .hero-buttons .btn-primary,

    .hero-buttons .btn-secondary{

        width:100%;

    }

    .hero-card{

        flex-direction:column;

        align-items:center;

    }

    .hero-card .card{

        width:100%;

        max-width:340px;

    }

    /*==============================
        GRILLES
    ==============================*/

    .services-grid,

    .technology-grid,

    .culture-grid,

    .livestock-grid,

    .statistics-grid,

    .gallery-grid,

    .news-grid,

    .testimonial-grid,

    .partners-grid,

    .footer-grid{

        grid-template-columns:1fr;

    }

    /*==============================
        FORMULAIRES
    ==============================*/

    .contact-form,

    .quote-form,

    .newsletter-form{

        display:flex;

        flex-direction:column;

    }

    .newsletter-form input,

    .newsletter-form button{

        width:100%;

    }

    /*==============================
        TABLEAUX
    ==============================*/

    table{

        display:block;

        width:100%;

        overflow-x:auto;

        white-space:nowrap;

    }

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

    .footer-column{

        text-align:center;

    }

    .footer-links{

        justify-content:center;

    }

    .social-links{

        justify-content:center;

    }

    .copyright{

        text-align:center;

        font-size:.9rem;

    }

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

    .map-container iframe{

        height:350px;

    }

}
/*==================================================
    RESPONSIVE
    ÉCRANS ≤ 576px
==================================================*/

@media screen and (max-width:576px){

    .container{

        width:96%;

    }

    section{

        padding:50px 0;

    }

    h1{

        font-size:1.9rem;

        line-height:1.35;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.1rem;

    }

    h4{

        font-size:1rem;

    }

    p{

        font-size:.95rem;

    }

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

    #header .container{

        min-height:65px;

    }

    .logo{

        gap:8px;

    }

    .logo img{

        width:45px;

    }

    .logo h1{

        font-size:1.05rem;

    }

    #menu-toggle{

        width:42px;

        height:42px;

        font-size:1.2rem;

    }

    #language{

        padding:8px 10px;

        font-size:.85rem;

    }

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

    .hero{

        min-height:80vh;

    }

    .hero-content{

        padding:10px;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .hero-content p{

        font-size:.95rem;

        margin-bottom:25px;

    }

    .hero-badge{

        font-size:.8rem;

        padding:8px 16px;

    }

    .hero-card .card{

        max-width:100%;

        padding:20px;

    }

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

    .btn,

    .btn-primary,

    .btn-secondary,

    .btn-outline{

        width:100%;

        padding:14px 20px;

        font-size:.95rem;

    }

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

    .service-card,

    .technology-card,

    .culture-card,

    .livestock-card,

    .news-card,

    .testimonial-card{

        border-radius:10px;

    }

    .service-card img,

    .technology-card img,

    .culture-card img,

    .livestock-card img,

    .news-card img,

    .gallery-grid img{

        height:210px;

    }

    .service-card h3,

    .technology-card h3,

    .culture-card h3,

    .livestock-card h3,

    .news-content h3{

        font-size:1.15rem;

    }

    /*==============================
        STATISTIQUES
    ==============================*/

    .stat-card{

        padding:25px 15px;

    }

    .stat-card h3{

        font-size:2rem;

    }

    /*==============================
        FAQ
    ==============================*/

    .faq-item{

        padding:18px;

    }

    /*==============================
        FORMULAIRES
    ==============================*/

    input,

    textarea,

    select{

        padding:12px;

        font-size:.95rem;

    }

    textarea{

        min-height:150px;

    }

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

    #footer{

        padding:50px 0 20px;

    }

    .footer-column{

        text-align:center;

    }

    .footer-column img{

        width:140px;

        margin:0 auto 20px;

    }

    .social-links a{

        width:42px;

        height:42px;

    }

    .social-links img{

        width:20px;

        height:20px;

    }

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

    .map-container iframe{

        height:280px;

    }

    /*==============================
        BACK TO TOP
    ==============================*/

    #backToTop{

        width:45px;

        height:45px;

        right:15px;

        bottom:15px;

    }

}
/*==================================================
    RESPONSIVE
    ÉCRANS ≤ 480px
==================================================*/

@media screen and (max-width:480px){

    html{

        font-size:15px;

    }

    .container{

        width:97%;

    }

    section{

        padding:45px 0;

    }

    h1{

        font-size:1.7rem;

        line-height:1.4;

    }

    h2{

        font-size:1.45rem;

    }

    h3{

        font-size:1.05rem;

    }

    p{

        font-size:.92rem;

        line-height:1.7;

    }

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

    #header .container{

        min-height:60px;

    }

    .logo img{

        width:40px;

    }

    .logo h1{

        font-size:1rem;

    }

    #menu-toggle{

        width:40px;

        height:40px;

        font-size:1.1rem;

    }

    #language{

        min-width:70px;

        padding:7px 8px;

        font-size:.8rem;

    }

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

    .hero{

        min-height:75vh;

    }

    .hero-content{

        padding:5px;

    }

    .hero-content h1{

        font-size:1.8rem;

    }

    .hero-content p{

        font-size:.9rem;

        margin-bottom:20px;

    }

    .hero-badge{

        font-size:.75rem;

        padding:7px 14px;

    }

    .hero-card{

        gap:15px;

    }

    .hero-card .card{

        padding:18px;

    }

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

    .btn,

    .btn-primary,

    .btn-secondary,

    .btn-outline{

        padding:13px 18px;

        font-size:.9rem;

    }

    /*==============================
        IMAGES
    ==============================*/

    .service-card img,

    .technology-card img,

    .culture-card img,

    .livestock-card img,

    .news-card img,

    .gallery-grid img{

        height:190px;

    }

    /*==============================
        STATISTIQUES
    ==============================*/

    .stat-card{

        padding:20px 15px;

    }

    .stat-card h3{

        font-size:1.8rem;

    }

    /*==============================
        FORMULAIRES
    ==============================*/

    input,

    textarea,

    select{

        font-size:.9rem;

        padding:11px;

    }

    textarea{

        min-height:130px;

    }

    /*==============================
        TABLEAUX
    ==============================*/

    table{

        font-size:.85rem;

    }

    th,

    td{

        padding:10px;

    }

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

    .footer-grid{

        gap:25px;

    }

    .footer-column h3{

        font-size:1.1rem;

    }

    .footer-column p,

    .footer-column li,

    .footer-links a{

        font-size:.9rem;

    }

    .social-links{

        gap:10px;

    }

    .social-links a{

        width:40px;

        height:40px;

    }

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

    .map-container iframe{

        height:240px;

    }

    /*==============================
        BACK TO TOP
    ==============================*/

    #backToTop{

        width:42px;

        height:42px;

        right:12px;

        bottom:12px;

    }

}
/*==================================================
    RESPONSIVE
    ÉCRANS ≤ 360px
==================================================*/

@media screen and (max-width:360px){

    html{

        font-size:14px;

    }

    .container{

        width:98%;

    }

    section{

        padding:40px 0;

    }

    h1{

        font-size:1.5rem;

        line-height:1.4;

    }

    h2{

        font-size:1.3rem;

    }

    h3{

        font-size:1rem;

    }

    h4{

        font-size:.95rem;

    }

    p{

        font-size:.88rem;

        line-height:1.6;

    }

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

    #header .container{

        min-height:56px;

    }

    .logo{

        gap:6px;

    }

    .logo img{

        width:36px;

    }

    .logo h1{

        font-size:.9rem;

    }

    #menu-toggle{

        width:36px;

        height:36px;

        font-size:1rem;

    }

    #language{

        min-width:60px;

        padding:6px;

        font-size:.75rem;

    }

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

    .hero{

        min-height:70vh;

    }

    .hero-content{

        padding:0;

    }

    .hero-content h1{

        font-size:1.6rem;

        margin-bottom:15px;

    }

    .hero-content p{

        font-size:.85rem;

        margin-bottom:18px;

    }

    .hero-badge{

        font-size:.7rem;

        padding:6px 12px;

        margin-bottom:18px;

    }

    .hero-card{

        gap:12px;

    }

    .hero-card .card{

        padding:15px;

    }

    .hero-card .card h3{

        font-size:1rem;

    }

    .hero-card .card p{

        font-size:.8rem;

    }

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

    .btn,

    .btn-primary,

    .btn-secondary,

    .btn-outline{

        padding:12px 16px;

        font-size:.85rem;

    }

    /*==============================
        IMAGES
    ==============================*/

    .service-card img,

    .technology-card img,

    .culture-card img,

    .livestock-card img,

    .news-card img,

    .gallery-grid img{

        height:170px;

    }

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

    .service-card,

    .technology-card,

    .culture-card,

    .livestock-card,

    .testimonial-card,

    .news-card{

        border-radius:8px;

    }

    .service-card h3,

    .technology-card h3,

    .culture-card h3,

    .livestock-card h3,

    .news-content h3{

        font-size:1rem;

    }

    /*==============================
        STATISTIQUES
    ==============================*/

    .stat-card{

        padding:18px 12px;

    }

    .stat-card h3{

        font-size:1.6rem;

    }

    .stat-card p{

        font-size:.85rem;

    }

    /*==============================
        FORMULAIRES
    ==============================*/

    input,

    textarea,

    select{

        padding:10px;

        font-size:.85rem;

    }

    textarea{

        min-height:120px;

    }

    /*==============================
        FAQ
    ==============================*/

    .faq-item{

        padding:15px;

    }

    .faq-item h3{

        font-size:1rem;

    }

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

    #footer{

        padding:40px 0 15px;

    }

    .footer-column img{

        width:120px;

    }

    .footer-column h3{

        font-size:1rem;

    }

    .footer-column p,

    .footer-column li,

    .footer-links a{

        font-size:.85rem;

    }

    .social-links{

        gap:8px;

    }

    .social-links a{

        width:36px;

        height:36px;

    }

    .social-links img{

        width:18px;

        height:18px;

    }

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

    .map-container iframe{

        height:200px;

    }

    /*==============================
        BACK TO TOP
    ==============================*/

    #backToTop{

        width:38px;

        height:38px;

        right:10px;

        bottom:10px;

        font-size:.9rem;

    }

}
/*==================================================
    RESPONSIVE
    ORIENTATION PAYSAGE (LANDSCAPE)
==================================================*/

@media screen and (max-width:992px) and (orientation:landscape){

    html{

        scroll-padding-top:70px;

    }

    .container{

        width:95%;

    }

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

    #header .container{

        min-height:65px;

    }

    nav{

        top:65px;

        height:calc(100vh - 65px);

        overflow-y:auto;

    }

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

    .hero{

        min-height:100vh;

        padding:100px 0 60px;

    }

    .hero-content{

        max-width:700px;

        margin:0 auto;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:row;

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-card{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

    }

    /*==============================
        SECTIONS
    ==============================*/

    section{

        padding:60px 0;

    }

    .about-content,

    .contact-form,

    .quote-form{

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

        align-items:center;

    }

    .services-grid,

    .technology-grid,

    .culture-grid,

    .livestock-grid,

    .news-grid,

    .testimonial-grid{

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

    }

    .statistics-grid{

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

    }

    .gallery-grid{

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

    }

    .partners-grid{

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

    }

    .footer-grid{

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

    }

    /*==============================
        IMAGES
    ==============================*/

    .service-card img,

    .technology-card img,

    .culture-card img,

    .livestock-card img,

    .news-card img,

    .gallery-grid img{

        height:180px;

        object-fit:cover;

    }

    /*==============================
        FORMULAIRES
    ==============================*/

    input,

    textarea,

    select{

        font-size:.95rem;

    }

    textarea{

        min-height:120px;

    }

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

    .map-container iframe{

        height:320px;

    }

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

    .footer-bottom{

        display:flex;

        justify-content:space-between;

        align-items:center;

        flex-wrap:wrap;

        gap:15px;

    }

    /*==============================
        BOUTON RETOUR EN HAUT
    ==============================*/

    #backToTop{

        width:45px;

        height:45px;

    }

}
/*==================================================
    RESPONSIVE
    CORRECTIONS FINALES
==================================================*/

@media screen{

    /*==============================
        IMAGES
    ==============================*/

    img{

        max-width:100%;

        height:auto;

        display:block;

    }

    picture{

        display:block;

        width:100%;

    }

    video{

        max-width:100%;

        height:auto;

    }

    iframe{

        max-width:100%;

        border:0;

    }

    /*==============================
        TABLEAUX
    ==============================*/

    .table-responsive{

        width:100%;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

    }

    table{

        width:100%;

        border-collapse:collapse;

    }

    /*==============================
        FORMULAIRES
    ==============================*/

    input,

    textarea,

    select,

    button{

        max-width:100%;

        font:inherit;

    }

    textarea{

        resize:vertical;

    }

    /*==============================
        FLEXBOX
    ==============================*/

    .d-flex{

        display:flex;

        flex-wrap:wrap;

    }

    .flex-center{

        justify-content:center;

        align-items:center;

    }

    .flex-between{

        justify-content:space-between;

        align-items:center;

    }

    /*==============================
        GRID
    ==============================*/

    .grid{

        display:grid;

        gap:30px;

    }

    /*==============================
        TEXTES
    ==============================*/

    h1,

    h2,

    h3,

    h4,

    h5,

    h6,

    p{

        overflow-wrap:break-word;

        word-wrap:break-word;

    }

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

    .btn,

    .btn-primary,

    .btn-secondary,

    .btn-outline{

        cursor:pointer;

        transition:var(--transition);

    }

    /*==============================
        ACCESSIBILITÉ
    ==============================*/

    :focus-visible{

        outline:3px solid var(--primary);

        outline-offset:3px;

    }

    html{

        scroll-behavior:smooth;

    }

    /*==============================
        PRÉVENTION DES DÉBORDEMENTS
    ==============================*/

    body{

        overflow-x:hidden;

    }

    section,

    header,

    footer,

    nav,

    main{

        width:100%;

    }

    /*==============================
        IMPRESSION
    ==============================*/

    @media print{

        nav,

        #menu-toggle,

        #backToTop,

        .hero-buttons,

        .newsletter,

        footer{

            display:none !important;

        }

        body{

            background:#ffffff;

            color:#000000;

        }

        a{

            text-decoration:none;

            color:#000000;

        }

        img{

            max-width:100%;

            page-break-inside:avoid;

        }

    }

}

/*==================================================
    FIN DU FICHIER responsive.css
==================================================*/