/* =====================================
   PETITS ORDINATEURS
===================================== */

@media screen and (min-width:1025px) and (max-width:1115px){

.navbar{

    padding:0 20px;

}

.logo img{

    height:170px;

    margin-right:20px;

}

.menu{

    gap:18px;

}

.menu a{

    font-size:14px;

}

}


/* ==========================================
   RESPONSIVE TABLETTE
========================================== */

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

/* HEADER */

.navbar{

    height:75px;
    padding:0 25px;

}

.logo img{

    height:110px;
    margin-right:0;

}

/* MENU */

.navigation{

    position:absolute;

    top:75px;
    right:20px;

    width:270px;

    background:#fff;

    border-radius:15px;

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

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(-15px);

    transition:.35s;

}

.navigation.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.menu{

    display:flex;

    flex-direction:column;

    gap:0;

}

.menu li{

    width:100%;

}

.menu a{

    display:block;

    padding:16px 22px;

    font-size:15px;

    border-bottom:1px solid #eee;

}

.menu li:last-child a{

    border-bottom:none;

}

/* HAMBURGER */

.hamburger{

    display:flex;

}

.hamburger span{

    transition:.3s;

}

.hamburger.active span:nth-child(1){

    transform:rotate(45deg) translate(6px,6px);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:rotate(-45deg) translate(6px,-6px);

}

}


/* ==========================================
   RESPONSIVE TELEPHONE
========================================== */

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

.navbar{

    height:70px;
    padding:0 18px;

}

.logo img{

    height:90px;

}

.navigation{

    width:240px;

    top:70px;

    right:15px;

}

.menu a{

    font-size:14px;

    padding:15px 18px;

}

}


/* =====================================
   PRESENTATION
===================================== */

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

.presentation-contenu{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.presentation-image{

    display:flex;
    justify-content:center;

}

.presentation-image img{

    width:100%;
    max-width:700px;

}

.presentation-texte{

    width:100%;

}

.presentation-texte h2{

    font-size:34px;

}

.presentation-texte p{

    font-size:17px;
    line-height:1.8;

}

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

.presentation{

    padding:50px 0;

}

.presentation-contenu{

    gap:30px;

}

.presentation-image img{

    width:100%;

    border-radius:15px;

}

.presentation-texte h2{

    font-size:28px;

    margin-bottom:15px;

}

.presentation-texte p{

    font-size:15px;

    line-height:1.7;

    margin-bottom:15px;

}

.presentation .btn{

    padding:12px 22px;

    font-size:14px;

}

}

/* =====================================
   SERVICES ACCUEIL
===================================== */

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

.services-accueil{

    padding:70px 0;

}

.titre-section{

    text-align:center;

    margin-bottom:40px;

}

.lien-services{

    padding:12px 28px;

    font-size:15px;

}

.titre-section h2{

    font-size:2.2rem;

}

.services-grille{

    grid-template-columns:1fr;

    gap:35px;

}

.service-carte{

    max-width:650px;

    width:100%;

    margin:auto;

}

.service-carte img{

    height:320px;

}

.service-contenu{

    padding:18px;

}

.service-contenu h3{

    font-size:24px;

}

}

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

.services-accueil{

    padding:50px 0;

}

.titre-section{

    margin-bottom:30px;

}

.lien-services{

    padding:10px 24px;

    font-size:14px;

}

.titre-section h2{

    font-size:1.9rem;

}

.services-grille{

    gap:25px;

}

.service-carte{

    border-radius:18px;

}

.service-carte img{

    height:240px;

}

.service-carte::before{

    height:240px;

}

.service-contenu{

    padding:15px;

}

.service-contenu h3{

    font-size:20px;

}

}

/* =====================================
   GALERIE
===================================== */

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

.galerie{

    padding:70px 0;

}

.galerie-contenu{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.galerie-texte h2{

    font-size:34px;

    margin-bottom:20px;

}

.galerie-texte p{

    font-size:17px;

    line-height:1.8;

    margin-bottom:25px;

}

.galerie-grille{

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

    gap:20px;

}

.galerie-grille img{

    height:240px;

}

}

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

.galerie{

    padding:50px 0;

}

.galerie-contenu{

    gap:35px;

}

.galerie-texte h2{

    font-size:28px;

}

.galerie-texte p{

    font-size:15px;

    line-height:1.7;

}

.galerie-grille{

    grid-template-columns:1fr;

    gap:18px;

}

.galerie-grille img{

    width:100%;

    height:230px;

}

.galerie .btn{

    padding:12px 22px;

    font-size:14px;

}

}

/* =====================================
   A PROPOS - QUI SOMMES-NOUS
===================================== */

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

.qui-sommes-nous{

    padding:70px 0;

}

.apropos-grid{

    grid-template-columns:1fr;

    gap:45px;

}

.apropos-images{

    max-width:700px;

    margin:auto;

}

.apropos-texte{

    text-align:center;

}

.apropos-texte h2{

    font-size:34px;

    margin-bottom:20px;

}

.apropos-texte p{

    font-size:17px;

    line-height:1.8;

}

}

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

.qui-sommes-nous{

    padding:50px 0;

}

.apropos-grid{

    gap:30px;

}

.apropos-images{

    grid-template-columns:1fr;

    gap:15px;

}

.apropos-images img{

    width:100%;

    height:320px !important;

    grid-column:auto !important;

}

.apropos-texte h2{

    font-size:28px;

}

.apropos-texte p{

    font-size:15px;

    line-height:1.7;

}

}

/* =====================================
   CATALOGUE SERVICES
===================================== */

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

.catalogue-services{

    padding:70px 0;

}

.catalogue-services h2{

    font-size:34px;

    text-align:center;

    margin-bottom:40px;

}

.grille-services{

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

    gap:30px;

}

.carte-service img,
.carte-service video{

    height:280px;

}

.carte-service h3{

    font-size:17px;

}

}

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

.catalogue-services{

    padding:50px 0;

}

.catalogue-services h2{

    font-size:28px;

    margin-bottom:30px;

}

.grille-services{

    grid-template-columns:1fr;

    gap:25px;

}

.carte-service{

    max-width:420px;

    width:100%;

    margin:auto;

}

.carte-service img,
.carte-service video{

    height:240px;

}

.carte-service h3{

    font-size:16px;

    margin-top:12px;

}

}

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

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

.hero{

    min-height:70vh;

    margin-top:75px;

    background-position:center center;

}

.hero-contenu{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-texte{

    max-width:700px;

    text-align:center;

    margin:auto;

    padding:0 30px;

}

.hero-texte h1{

    font-size:3rem;

}

.hero-texte p{

    font-size:1rem;

}

.overlay{

    background:rgba(0,0,0,.55);

}

}


/* =====================================
   TELEPHONE
===================================== */

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

.hero{

    min-height:60vh;

    margin-top:70px;

    background-position:center;

}

.hero-texte{

    max-width:100%;

    padding:0 20px;

}

.hero-texte h1{

    font-size:2.2rem;

    line-height:1.25;

    margin-bottom:15px;

}

.hero-texte p{

    font-size:15px;

    line-height:1.7;

    margin-bottom:25px;

}

.overlay{

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.70),
        rgba(0,0,0,.55)
    );

}

}


/* =====================================
   PETITS TELEPHONES
===================================== */

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

.hero{

    min-height:55vh;

}

.hero-texte{

    padding:0 15px;

}

.hero-texte h1{

    font-size:1.8rem;

}

.hero-texte p{

    font-size:14px;

}

.hero .btn{

    padding:12px 24px;

    font-size:14px;

}

}


/* =====================================
   IPHONE SE / PETITS ANDROID
===================================== */

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

.hero{

    min-height:50vh;

}

.hero-texte h1{

    font-size:1.6rem;

}

.hero-texte p{

    font-size:13px;

}

.hero .btn{

    padding:10px 20px;

    font-size:13px;

}

}