/* ==========================================================
   SAVEAN & FILS
   responsive.css
========================================================== */


/* ==========================================================
   ÉCRANS < 1200 px
========================================================== */

@media (max-width:1200px){

.container{

    width:95%;

}

.hero h1{

    font-size:48px;

}

}


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

@media (max-width:992px){

/* ---------- Navigation ---------- */

.menu-toggle{

    display:block;

}

#menu{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#fff;

    flex-direction:column;

    align-items:flex-start;

    padding:25px;

    display:none;

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

}

#menu.active{

    display:flex;

}

#menu li{

    width:100%;

}

#menu a{

    display:block;

    width:100%;

    padding:15px 0;

}

/* ---------- Hero ---------- */

.hero{

    height:75vh;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:20px;

}

/* ---------- Présentation ---------- */

.presentation-grid{

    grid-template-columns:1fr;

}

/* ---------- Services ---------- */

.services-grid{

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

}

/* ---------- Pourquoi nous ---------- */

.advantages .container{

    grid-template-columns:1fr;

}

.advantages-grid{

    grid-template-columns:1fr 1fr;

}

/* ---------- Chiffres ---------- */

.stats .container{

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

}

/* ---------- Galerie ---------- */

.gallery-grid{

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

}

/* ---------- Contact ---------- */

.contact-grid{

    grid-template-columns:1fr;

}

/* ---------- Zone ---------- */

.area-content{

    grid-template-columns:1fr;

}

/* ---------- Footer ---------- */

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}


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

@media (max-width:768px){

section{

    padding:70px 0;

}

.topbar{

    display:none;

}

.logo img{

    height:55px;

}

.hero{

    height:70vh;

}

.hero-content{

    text-align:center;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:18px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn-primary,
.btn-secondary{

    width:260px;

    text-align:center;

    margin:10px 0;

}

.section-title h2{

    font-size:32px;

}

.presentation-grid{

    gap:40px;

}

.services-grid{

    grid-template-columns:1fr;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.advantages-grid{

    grid-template-columns:1fr;

}

.stats .container{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-grid img{

    margin:auto auto 25px;

}

.contact-form{

    padding:30px;

}

.contact-info{

    padding:30px;

}

.map iframe{

    height:350px;

}

}


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

@media (max-width:576px){

body{

    font-size:15px;

}

h1{

    font-size:30px;

}

h2{

    font-size:28px;

}

h3{

    font-size:22px;

}

.hero{

    min-height:600px;

}

.hero-content{

    padding-top:40px;

}

.btn-primary,
.btn-secondary{

    width:100%;

}

.service-card img{

    height:220px;

}

.gallery-grid img{

    height:220px;

}

.testimonial{

    padding:30px;

}

.contact-form{

    padding:25px;

}

.contact-info{

    padding:25px;

}

}


/* ==========================================================
   TRÈS PETITS ÉCRANS
========================================================== */

@media (max-width:400px){

.hero h1{

    font-size:26px;

}

.hero p{

    font-size:16px;

}

.section-title h2{

    font-size:24px;

}

.logo img{

    height:48px;

}

.menu-toggle{

    font-size:30px;

}

}


/* ==========================================================
   ÉCRANS LARGES
========================================================== */

@media (min-width:1600px){

.container{

    max-width:1400px;

}

.hero h1{

    font-size:72px;

}

.hero p{

    font-size:28px;

}

}


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

@media print{

header,
footer,
.hero,
.map,
.menu-toggle,
.btn-primary,
.btn-secondary{

    display:none !important;

}

body{

    color:#000;

    background:#fff;

}

a{

    color:#000;

    text-decoration:none;

}

section{

    padding:20px 0;

}

}