/*
Kitname: Dwebz Responsive Kit
Author: Visiscope
Author URL : https://visiscope.fr
Description: Dwebz Responsive stylesheet to build mobile versions.
Version: 1.0
*/

/*** GLOBAL ***/
/** MOBILE NAV - MENU **/
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 80%;
  background-color: #000;
  color: #fff;
  padding-top: 60px;
  z-index: 9999;
  transition: transform 0.3s ease;
  transform: translateX(100%);
}
.mobile-menu-list {
  list-style: none;
  padding: 0;
}
.mobile-menu-list li {
  margin-bottom: 20px;
}
.mobile-menu-list a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}
.mobile-menu-toggle {
  display: none;
  cursor: pointer;
  position: relative;
  z-index: 10000;
}
.mobile-menu-toggle span {
  display: block;
  width: 30px;
  height: 3px;
  margin: 6px auto;
  background-color: #000;
}
.mobile-nav.active {
  transform: translateX(0);
}

/*** VERY LARGE SCREENS ***/
@media (min-width: 1681px) {
  h1 {
    font-size: 6.4rem;
    line-height: 8.8rem;
}

/*** MIDDLE SCREENS (DESKTOP & TABLETS LANDSCAPE) ***/
@media (min-width: 992px) and (max-width: 1199px) {
    h1 {
      font-size: 4.8rem;
  }
}

/*** SMALL SCREENS & TABLETS ***/
@media (min-width: 768px) and (max-width: 1020px) {
  h1 {
    font-size: 4.8rem;
}

/*** SMALL SCREENS & PHONES ***/
@media (max-width: 767px) {
}

@media screen and (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes pour les tablettes */
        gap: 30px;
    }
    .col-1 {grid-column: span 4;} /* Utiliser toute la largeur */
    .col-2 {grid-column: span 4;}
    .col-3 {grid-column: span 4;}
    .col-4 {grid-column: span 4;}
    .col-5 {grid-column: span 4;}
    .col-6 {grid-column: span 4;}
    .col-7 {grid-column: span 4;}
    .col-8 {grid-column: span 4;}
}

@media screen and (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes pour les mobiles */
        gap: 20px;
    }
    .col-1 {grid-column: span 2;} /* Utiliser toute la largeur */
    .col-2 {grid-column: span 2;}
    .col-3 {grid-column: span 2;}
    .col-4 {grid-column: span 2;}
    .col-5 {grid-column: span 2;}
    .col-6 {grid-column: span 2;}
    .col-7 {grid-column: span 2;}
    .col-8 {grid-column: span 2;}
    .main-nav, .right-header-menu {
      display: none;
    }
    .mobile-menu-toggle {
      display: block;
    }
    .mobile-nav {
      display: block;
    }
    .m-l {
      margin: var(--space-s); /* Réduire la marge sur mobile */
    }
    .p-m {
      padding: var(--space-xs); /* Réduire le padding sur mobile */
    }
}

@media screen and (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr; /* 1 colonne pour les petits mobiles */
        gap: 10px;
    }
    .col-1, .col-2, .col-3, .col-4, 
    .col-5, .col-6, .col-7, .col-8 {
        grid-column: span 1; /* Chaque élément occupe toute la largeur */
    }
}