@media screen and (max-width: 768px) {
  header {
    display: grid;
    grid-template-columns: 1fr; /* une seule colonne */
    grid-template-rows: repeat(5, 1fr);
    height: 100vh;
  }

  header img.logo {
    grid-row: 1;
    grid-column: 1;
    padding-right: 60px;
    justify-self: center;
    max-width: 100px;

  }

  header h1.hero-title {
    grid-row: 2;
    grid-column: 1;
    font-size: 1.5em;
    text-align: center;
    margin-top: .5em;
  }

  header p.hero-text {
    grid-row: 4;
    grid-column: 1;
    font-size: .8em;
    width: 80%;
    margin:auto;
    text-align: center;
    justify-content: center;
  }

  header nav {
    grid-row: 5;
    grid-column: 1;
    justify-content: center;
  }

  button {
    height: 30px;
    width: 150px;
  }

  button:hover{
    scale: 1;
  }

  header nav button a {
    font-size: .9em;
  }

  main section{
    height: 100vh;
  }

  main section img{
    display: none;
  }


  main section article {
    height: auto;
    width: auto;
  }

  main section article h2 {
    font-size:1.1em;
    text-align: center;
  }

 main section article h2::after{
  margin: 12px auto;
  height: 4px;
 }

 main section article h3{
  text-align: center;
 }

  main section article h3 a{
    font-size:1.25em; 
  }

  main section article h3.subtitle-gastronomie::after{
    content: "";
    display: block;
    height: 200px;
    width: 250px;
    background-image: url("images/jardinSens.jpg");
    background-size: cover;
    border-radius: 10px;
    box-shadow: var(--box-shadow-img);
    margin:30px auto 0px auto;
  }

    main section article h3.subtitle-visite::after{
    content: "";
    display: block;
    height: 200px;
    width: 250px;
    background-image: url("images/ravin.jpg");
    background-size: cover;
    border-radius: 10px;
    box-shadow: var(--box-shadow-img);
    margin:30px auto 0px auto;
  }

    main section article h3.subtitle-soiree::after{
    content: "";
    display: block;
    height: 200px;
    width: 250px;
    background-image: url("images/muchacha.png");
    background-size: cover;
    border-radius: 10px;
    box-shadow: var(--box-shadow-img);
    margin:30px auto 0px auto;
  }

   main section article p {
    font-size:.6em;
    line-height: 1.8;
    width: 80%;
    margin: auto;
  }

  main section article button{
   display: block;
   margin: 0 auto;
  }

  main section article button a {
    font-size: .9em;
  }

  footer ul li a img {
    height: 34px;
    width:34px;
  }

  footer ul li a img.france{
    height: 80px;
    width: 80px;
  }
  
footer ul li a img:hover{
transition: none;
scale: none;
}

}