/* =====================================================
   RESPONSIVE.CSS
   Brioude Informatique
   ===================================================== */


/* =====================================================
   TABLETTES
   ===================================================== */

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

    .container{
        width:95%;
    }

    h1{
        font-size:2.8rem;
    }

    h2{
        font-size:2rem;
    }

    section{
        padding:70px 0;
    }

    /* HERO */

    .hero{

        min-height:85vh;
        text-align:center;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-floating{

        display:none;

    }

    /* SERVICES */

    .services-grid{

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

    }

    /* MAGASIN */

    .store-content{

        grid-template-columns:1fr;

        gap:40px;

    }

    /* ATELIER */

    .atelier-content{

        grid-template-columns:1fr;

        gap:40px;

    }

    /* CONTACT */

    .contact-content{

        grid-template-columns:1fr;

    }

}
/* =====================================================
   SMARTPHONES
   ===================================================== */

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

    /* HEADER */

    .top-bar{

        display:none;

    }

    .navbar{

        min-height:75px;

    }

    .logo{

        left:0;

        top:0;

    }

    .logo img{

        height:55px;

    }

    /* MENU */

    .menu-toggle{

        display:block;

        z-index:1001;

    }

    .nav-menu{

        position:fixed;

        top:75px;

        right:-100%;

        width:280px;

        height:calc(100vh - 75px);

        background:#ffffff;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        padding:35px;

        gap:25px;

        transition:.35s;

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

    }

    .nav-menu.active{

        right:0;

    }

    .header-buttons{

        display:none;

    }

    .languages{

        margin-top:20px;

    }

    /* HERO */

    .hero{

        min-height:100vh;

        padding-top:90px;

    }

    .hero-content h1{

        font-size:2.2rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn{

        width:100%;

        justify-content:center;

        max-width:320px;

    }

    /* SERVICES */

    .services-grid{

        grid-template-columns:1fr;

    }

    .service-card{

        margin:0 auto;

    }

    /* CHIFFRES */

    .stats-grid{

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

    /* MAGASIN */

    .store-content{

        grid-template-columns:1fr;

    }

    /* ATELIER */

    .atelier-content{

        grid-template-columns:1fr;

    }

    /* MARQUES */

    .brands-grid{

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

        gap:20px;

    }

    /* TELECHARGEMENTS */

    .downloads-grid{

        grid-template-columns:1fr;

    }

    /* CONTACT */

    .contact-content{

        grid-template-columns:1fr;

    }

    form{

        padding:25px;

    }

    input,
    textarea,
    select{

        font-size:16px;

    }

    /* FOOTER */

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;

    }

}
/* =====================================================
   PETITS SMARTPHONES
===================================================== */

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

    body{

        font-size:15px;

    }

    .container{

        width:94%;

    }

    h1{

        font-size:1.9rem;

        line-height:1.3;

    }

    h2{

        font-size:1.7rem;

    }

    h3{

        font-size:1.2rem;

    }

    section{

        padding:55px 0;

    }

    /* HERO */

    .hero{

        min-height:90vh;

    }

    .hero-content{

        text-align:center;

    }

    .hero-badge{

        font-size:.85rem;

        padding:10px 16px;

    }

    .hero-buttons{

        gap:15px;

    }

    .btn{

        width:100%;

        padding:14px;

        font-size:.95rem;

    }

    /* SERVICES */

    .service-card{

        padding:25px;

    }

    .service-card i{

        font-size:2.3rem;

    }

    /* CHIFFRES */

    .stats-grid{

        grid-template-columns:1fr;

    }

    .stat-number{

        font-size:2.2rem;

    }

    /* MARQUES */

    .brands-grid{

        grid-template-columns:1fr 1fr;

        gap:15px;

    }

    /* TELECHARGEMENTS */

    .download-card{

        padding:25px;

    }

    /* CONTACT */

    form{

        padding:20px;

    }

    textarea{

        min-height:160px;

    }

    /* FOOTER */

    .footer-bottom{

        font-size:.85rem;

        line-height:1.6;

    }

}
/* =====================================================
   GRANDS ECRANS
===================================================== */

@media screen and (min-width:1600px){

    .container{

        max-width:1400px;

    }

    h1{

        font-size:4.5rem;

    }

    h2{

        font-size:3rem;

    }

}


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

@media screen and (max-height:600px) and (orientation:landscape){

    .hero{

        min-height:auto;

        padding:140px 0 80px;

    }

}


/* =====================================================
   ACCESSIBILITE
===================================================== */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


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

@media print{

    .top-header,
    .menu-toggle,
    .hero-buttons,
    .footer,
    #topButton{

        display:none !important;

    }

    body{

        color:#000;

        background:#fff;

    }

    a{

        color:#000;

        text-decoration:none;

    }

}


/* =====================================================
   CORRECTIONS GENERALES
===================================================== */

iframe{

    max-width:100%;

}

table{

    width:100%;

    overflow-x:auto;

    display:block;

}

img{

    height:auto;

}

video{

    max-width:100%;

}

html{

    overflow-x:hidden;

}

body{

    overflow-x:hidden;

}


/* =====================================================
   FIN DU FICHIER
===================================================== */