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

    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tamil:ital,wght@1,600&display=swap');

    html{
      font-family: 'Roboto', sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
    }

    /* HEADER */


    .menu {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: end;
     
        background-color: #000000;
    }

    .menu img {
        width: 75px;
        margin: 10px 25px;
        padding-top: 9px;
    }
    nav ul {
        display: inline-flex;
        list-style: none;
        padding-right: 35px;
      }
    
      nav ul li {
        margin:0 10px;
        padding:4px;
        font-size: 1.2em;
      }
      nav ul li:hover {
        background-color: rgba(255, 255, 255, 0.466);
        text-decoration: none;
        transform: scale(1.2);
        border-radius:8px;
        
      }
      nav ul li a {
        color: white;
        text-decoration: none;
        transition: color 0.3s, transform 0.3s;
      }


    /* ZONE D'ACCROCHE (IMG DE FOND) */
    .zone-accroche {
        position: relative;
        width: 100%;
        height: 300px;
    }

    .image-fond {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('start/images/home.jpg');
        background-size: cover;
        background-position: center;
        
    }
    .image-fond a{
      text-decoration: none;
      
    }
    .image-fond a p {
      color:black;
      font-size: 2em;
      padding:8px 0 0 15px;
      font-weight: bold;
      text-shadow: 4px 4px 6px rgb(255, 255, 255);
    }
    .texte-accroche {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 20px;
        color: #ffffff;
    
        width: 400px;
        margin: auto;
        top: 55px;

    }

    .texte-accroche h2 {
        font-size: 58px;
        margin-bottom: 10px;
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.628);
    }

    .texte-accroche p {
        font-size: 16px;
        text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    }

    button {
        animation: rotationEffect 0.8s linear;
        background-color: #48c1d6;
        padding:5px;
        border-radius: 7px;
    }

    @keyframes rotationEffect {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(1024deg);

        }
    }

    button:hover {
        cursor: pointer;
    }

    main#contenu{
      text-align: center;
    }
    .images {
      width: 70%;
      margin: auto;
    }
    
    .images ul {
      display: flex;
      flex-wrap: wrap;
    }
    
    .images ul li {
      flex-basis: 48%;
    }
    
    .images ul li img {
      max-width: 250px;
      margin: auto;
      border-radius: 5%;

    }

    /* Zone 1 */
  
    .zone1 h3{ 
      padding-top: 25px;
    }
    .zone1 p{
      padding: 15px 
    }
    .zone1 hr{
      margin-bottom: 25px;
      width:40%;
      color: #48c1d6;
      font-size: 5px;
    }
    .zone2{
      background-color: rgb(221, 219, 219);
    }
  
    .zone2 h3{
     
      padding-top: 25px;
    }
    .zone2 p{
      
      padding: 15px 
    }
    .zone2 hr{
      margin-bottom: 25px;
      width:40%;
      color: #48c1d6;
    }
    .zone3 {
      width: 70%;
      margin:auto;
      background-color: rgb(221, 219, 219);
    }
    
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    
    .grid-container li {
      list-style: none;
      text-align: center;
    }
    .zone3 li h4{
      padding:8px;
    }
    .zone3 li{
      padding:15px
    }
  
    .zone4{
      padding: 20px;
    }
    
    .zone4 h3{
      padding: 15px;
    }
    .zone4 input::placeholder {
      text-align: center; /* Centre le texte */
    }
    .zone4 form input[type="submit"] {
      background-color: #48c1d6;
      margin-left: 50px;
    }
    .zone4 form{
      margin-top: 10px;
      display:inline-flex;
    }
    .zone5{
      padding:15px;
    }
    .zone5 h3 {
     
      padding: 25px;
    }
    
  
    i{ 
      font-size: 3em;
      color:#48c1d6;
    }
  
    /* FOOTER */
    footer ul{
      display:inline-flex;
      justify-content: center;
      background-color:rgb(101, 100, 100);
      width:100%;
      height:75px;
      align-items: center;
    }
    footer ul li{
      font-size:8px;
      margin:20px;
      padding:4px;
      text-decoration: none;
      color:black;
      background-color: rgb(255, 255, 255);
      border-radius: 7px;
    }
  

    footer p{
      background-color:rgb(101, 100, 100);
      padding-bottom:15px;
    }
}