/*=========================================
RESPONSIVE.CSS
L'ATELIER AU FIL DE SOI
==========================================*/


/***************
GRANDES TABLETTES
****************/

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

.container{

    width:92%;

}

.hero-content{

    gap:50px;

}

.presentation .container{

    gap:50px;

}

.cards{

    gap:20px;

}

.preview-grid{

    gap:25px;

}

.atelier-card{

    gap:35px;

}

}


/****************
TABLETTES
*****************/

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

header .container{

    padding:15px 0;

}

.hero{

    padding-top:150px;

}

.hero-content{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-image{

    order:-1;

}

.hero-image img{

    max-width:600px;

    margin:auto;

}

.presentation .container{

    grid-template-columns:1fr;

}

.presentation-image{

    text-align:center;

}

.presentation-image img{

    max-width:500px;

    margin:auto;

}

.cards{

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

}

.preview-grid{

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

}

.testimonial-grid{

    grid-template-columns:1fr;

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.tarifs-grid{

    grid-template-columns:1fr;

}

.atelier-card{

    grid-template-columns:1fr;

}

.atelier-card.reverse{

    grid-template-columns:1fr;

}

.atelier-card.reverse .atelier-image{

    order:0;

}

.atelier-card.reverse .atelier-content{

    order:0;

}

.atelier-content{

    padding:35px;

}

}


/****************
MENU MOBILE
****************/

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

.menu-toggle{

    display:flex;

}

nav{

    position:fixed;

    top:90px;

    right:-100%;

    width:280px;

    height:calc(100vh - 90px);

    background:white;

    box-shadow:-5px 0 25px rgba(0,0,0,.08);

    transition:.4s;

    padding:40px;

}

nav.open{

    right:0;

}

nav ul{

    flex-direction:column;

    gap:30px;

}

.btn-header{

    display:none;

}

}


/****************
SMARTPHONES
****************/

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

h1{

    font-size:48px;

}

h2{

    font-size:36px;

}

h3{

    font-size:28px;

}

section{

    padding:70px 0;

}

.cards{

    grid-template-columns:1fr;

}

.preview-grid{

    grid-template-columns:1fr;

}

.form-row{

    grid-template-columns:1fr;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.btn-secondary{

    margin-left:0;

}

.hero::before{

    display:none;

}

.presentation-image::before{

    display:none;

}

.atelier-footer{

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}

.price{

    font-size:40px;

}

.map iframe{

    height:320px;

}

}


/****************
PETITS MOBILES
****************/

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

.logo img{

    width:130px;

}

.container{

    width:94%;

}

.hero{

    padding-top:120px;

}

.hero p{

    font-size:16px;

}

.hero-buttons a{

    width:100%;

    text-align:center;

}

.card{

    padding:30px 25px;

}

.tarif{

    padding:30px;

}

.reservation-form{

    padding:30px;

}

.info-card{

    padding:25px;

}

.atelier-content{

    padding:25px;

}

.page-hero{

    padding-top:140px;

}

.page-hero h1{

    font-size:42px;

}

footer{

    padding-top:50px;

}

}


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

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

h1{

    font-size:38px;

}

h2{

    font-size:30px;

}

.btn-primary,
.btn-secondary,
.btn-light{

    padding:14px 20px;

}

.logo img{

    width:110px;

}

.card i{

    font-size:35px;

}

.price{

    font-size:32px;

}

}


/****************
MODE PAYSAGE MOBILE
****************/

@media screen and (max-height:500px){

.hero{

    padding-top:110px;

}

nav{

    overflow-y:auto;

}

}


/****************
IMPRESSION
****************/

@media print{

header,
footer,
.hero-buttons,
.top-button,
.cta{

display:none;

}

body{

background:white;

color:black;

}

section{

padding:20px 0;

}
}