/* =====================================
   TABLETTES ET PETITS ORDINATEURS
===================================== */


@media(max-width:1200px){



.navbar{

padding:0 20px;

}



.nav-links{

gap:20px;

}



.hero-content h1{

font-size:55px;

}



.collection-grid{

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

}



.product-grid{

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

}



.catalogue-grid{

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

}



.gallery-grid{

columns:2;

}



}









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


@media(max-width:900px){



/* MENU MOBILE */


.menu-toggle{

display:block;

}



.nav-links{

position:absolute;

top:90px;

left:0;

width:100%;

background:white;

flex-direction:column;

align-items:center;

padding:30px 0;

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

transform:translateY(-120%);

transition:.4s;

}



.nav-links.active{

transform:translateY(0);

}



.nav-links li{

margin:15px 0;

}




/* HERO */


.hero{

height:75vh;

}



.hero-content{

padding:0 30px;

text-align:center;

margin:auto;

}



.hero-content h1{

font-size:45px;

}





/* SECTIONS */


.collections,
.featured-products,
.gallery-section,
.contact-section{

padding:70px 5%;

}




/* GRILLES */


.collection-grid,
.product-grid,
.catalogue-grid,
.mission-section,
.catalogue-actions{

grid-template-columns:1fr;

}




/* PRODUIT */


.product-detail{

grid-template-columns:1fr;

}




.product-gallery{

position:relative;

top:0;

}




/* A PROPOS */


.story-section,
.workshop-container,
.contact-wrapper,
.catalogue-intro{

grid-template-columns:1fr;

}




/* TIMELINE */


.timeline::before{

left:20px;

}


.timeline-item,
.timeline-item:nth-child(even){

flex-direction:column;

align-items:flex-start;

padding-left:60px;

}



.timeline-content{

width:100%;

}




/* STATISTIQUES */


.about-stats{

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

}



}









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


@media(max-width:600px){



body{

overflow-x:hidden;

}



/* HEADER */


.logo h2{

font-size:24px;

}



.logo img{

width:45px;

height:45px;

}





.nav-icons i{

font-size:20px;

}







/* TITRES */


.section-title h2{

font-size:32px;

}



.section-title p{

font-size:14px;

}







/* HERO */


.hero{

height:650px;

}



.hero-content h1{

font-size:38px;

}



.hero-content p{

font-size:16px;

}





.btn-primary{

padding:13px 25px;

}







/* BANNIERES */


.shop-banner,
.catalogue-banner,
.gallery-banner,
.about-banner,
.contact-banner{

height:350px;

}



.shop-banner h1,
.catalogue-banner h1,
.gallery-banner h1,
.about-banner h1,
.contact-banner h1{

font-size:40px;

}









/* CARTES */


.collection-card{

height:350px;

}



.card-image,
.product-image{

height:350px;

}



.main-image{

height:400px;

}









/* PRODUIT */


.product-info-detail h1{

font-size:32px;

}



.new-price{

font-size:28px;

}



.thumbnail-list img{

width:60px;

height:60px;

}








/* GALERIE */


.gallery-grid{

columns:1;

}



.gallery-filter{

gap:10px;

}



.filter-btn{

padding:10px 20px;

}








/* CONTACT */


.contact-form-box{

padding:20px;

}



.contact-banner p,
.catalogue-banner p,
.gallery-banner p{

font-size:16px;

}





.map iframe{

height:300px;

}








/* FOOTER */


footer{

padding:30px 15px;

font-size:14px;

}






/* WHATSAPP */


.floating-whatsapp{

width:55px;

height:55px;

font-size:28px;

right:20px;

bottom:20px;

}



}









/* =====================================
   TRES PETITS ECRANS
===================================== */


@media(max-width:380px){



.hero-content h1{

font-size:32px;

}



.logo h2{

display:none;

}



.btn-primary{

font-size:14px;

}



}

/*====================================================
        RESPONSIVE GLAMOUR BY MARIE
====================================================*/


/*==============================
        ECRANS XXL
==============================*/

@media (min-width:1600px){

.hero{

    min-height:100vh;

}

.hero-content{

    max-width:900px;

}

.product-grid{

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

}

}



/*==============================
        LAPTOP
==============================*/

@media (max-width:1200px){

.navbar{

    padding:15px 40px;

}

.hero{

    padding:120px 40px;

}

.hero h1{

    font-size:60px;

}

.product-grid{

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

}

.collection-grid{

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

}

}



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

@media (max-width:992px){

.navbar{

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

}

.logo img{

    width:90px;

}

.nav-links{

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

}

.hero{

    min-height:85vh;

    padding:80px 30px;

}

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:20px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons a{

    width:260px;

}

.collection-grid,

.product-grid,

#listeFavoris{

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

}

.about-preview{

    flex-direction:column;

    text-align:center;

    gap:40px;

}

.about-image img{

    width:100%;

}

.footer{

    grid-template-columns:1fr;

}

}



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

@media (max-width:768px){

.navbar{

    padding:15px;

}

.logo img{

    width:75px;

}

.nav-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

}

.nav-links a{

    font-size:15px;

}

.nav-actions{

    gap:18px;

}

.hero{

    padding:70px 20px;

}

.hero h1{

    font-size:38px;

    line-height:1.2;

}

.hero p{

    font-size:17px;

}

.hero-buttons{

    width:100%;

}

.hero-buttons a{

    width:100%;

}

.section-title h2{

    font-size:34px;

}

.collection-grid,

.product-grid,

#listeFavoris{

    grid-template-columns:1fr;

}

.shop-card,

.carte-produit{

    border-radius:20px;

}

.shop-card img,

.carte-produit img{

    height:320px;

}

.actions-favoris{

    flex-direction:column;

}

.actions-favoris .btn,

.actions-favoris button{

    width:100%;

}

.product-container{

    flex-direction:column;

}

.product-details{

    width:100%;

}

.product-details h2{

    font-size:34px;

}

select,

input[type="number"]{

    width:100%;

}

.cta{

    padding:50px 25px;

}

footer{

    text-align:center;

}

footer div{

    margin-bottom:35px;

}

}



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

@media (max-width:480px){

.hero{

    min-height:75vh;

}

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:15px;

}

.section-title h2{

    font-size:28px;

}

.shop-card img,

.carte-produit img{

    height:250px;

}

.carte-produit h3{

    font-size:22px;

}

.prix{

    font-size:20px;

}

.product-details h2{

    font-size:28px;

}

.product-details h3{

    font-size:24px;

}

.btn,

.btn-boutique,

.whatsapp{

    width:100%;

    justify-content:center;

}

.logo img{

    width:65px;

}

.nav-links{

    gap:10px;

}

.nav-links a{

    font-size:14px;

}

}



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

@media (hover:none){

.shop-card:hover,

.carte-produit:hover,

.collection-card:hover{

    transform:none;

}

}