:root {
      --sand_light: rgba(247, 231, 206, 0.35);
      --sand_mid: rgba(247, 231, 206, 0.4);
      --ink_light: rgba(0, 0, 0, 0.1);
      --ink_mid: rgba(0, 0, 0, 0.6);
}

body {
  background-color: var(--sand_light);

}

/* présentation du texte */

.zone_texte {
	margin-left: 5vw;
	margin-right: 5vw;
      text-align: justify;
}


.source-serif-4-titre {
  font-family: "Source Serif 4", 'Times New Roman', serif;
  font-optical-sizing: auto;
  font-weight: 550;
  font-style: normal;
}

.source-serif-4 {
  font-family: "Source Serif 4", 'Time New Roman', serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/* menu homepage */

.ul_menu_main {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: transparent;
      position: relative;
      top: 0;
      left: 0;
      z-index: 1;
}

.li_menu_main {
      float: right;
}

.li_menu_main a {
      display: block;
      color: var(--ink_mid);
      text-align: center;
      font-size: 1em;
      padding: 10px 16px;
      text-decoration: none;
}

.li_menu_main a:hover:not(.active) {
      color: black;
}

.active {
      color: black;
}











/* présentation des articles */

.articles_image {
      width: 95%;
      height: 95%;
      position: relative;
      margin: 2% 5%;
      border-radius: 10px;
      opacity: 0.8;
}

.articles_description {
      text-align: justify;
      font-size: 0.8em;
}

.articles_titre {
      font-size: 1em;
}

.articles_date {
      text-align: right;
      font-size: 0.8em;
      color: rgba(0, 0, 0, 0.5);
}

.articles_themes {
      text-align: right;
      font-size: 0.7em;
}

.article_lien {
  text-decoration: none;
  color: black;
}


.grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      gap: 1vw;
      background-color: transparent;
      padding: 8px;
      justify-content: center;
}
.grid-container > div {
      width: 16vw;
      background-color: var(--sand_mid);
      color: black;
      border-radius: 8px;
      padding: 10px;
      text-align: center;
      transition: transform 0.7s ease;
}

.grid-container > div:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}





/* background homepage */

.grid-container-background {
      position: absolute;
      top: 2vh;
      z-index: -1;
      display: grid;
      grid-template-columns: 35vw 60vw;
      gap: 2vw;
      background-color: transparent;
      padding: 8px;
      justify-content: center;
}
.grid-container-background div {
      background-color: transparent;
      color: var(--ink_light);
      padding: 10px;
      text-align: justify;
      overflow: hidden;
}





/* titre et description */

.grid-container-title {
      display: grid;
      grid-template-columns: 35vw 40vw;
      gap: 15vw;
      background-color: transparent;
      padding: 8px;
      justify-content: center;
}
.grid-container-title div {
      background-color: transparent;
      color: black;
      padding: 10px;
}

.text_left {
      text-align: left;
}
.text_right {
      text-align: right;
}

/* lien abonnement */

.link_abo {
      color: var(--ink_mid);
      font-size: 1.2em;
}

.link_abo:hover {
      color: black;
}

/* image hompage */

.img_homepage {
      position: relative;
      max-width: 25vw;
      max-height: 25vw;
      border: groove black;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

      animation: anim_img_homepage ease-in-out 3s infinite;
}

@keyframes anim_img_homepage {
      0% {transform: translateY(0);}
      50% {transform: translateY(-15px);}
      100% {transform: translateY(0);}
}





/* écran petit format */

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

      .grid-container {
            display: grid;
            grid-template-columns: auto auto;
            gap: 2vw;
            
      }
      .grid-container > div {
            width: 30vw;
      }



      .grid-container-background {
            position: absolute;
            z-index: -1;
            display: grid;
            grid-template-columns: 35vw 60vw;
            gap: 1vw;
            background-color: transparent;
            padding: 8px;
            justify-content: center;
      }
      .grid-container-background div {
            background-color: transparent;
            color: var(--ink_light);
            padding: 10px;
            text-align: justify;
      }



      .grid-container-title {
            display: grid;
            grid-template-columns: auto;
            gap: 5px;
            background-color: transparent;
            padding: 8px;
            justify-content: center;
      }
      .grid-container-title div {
            background-color: transparent;
            width: 90vw;
            color: black;
            padding: 10px;
      }
      .text_left {
            text-align: justify;
      }
      .text_right {
            text-align: justify;
      }

}

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


      .grid-container {
            display: grid;
            grid-template-columns: auto;
            gap: 5vw;
            
      }
      .grid-container > div {
            width: 80vw;
      }

      .grid-container-background {
            position: absolute;
            z-index: -1;
            display: grid;
            grid-template-columns: auto;
            gap: 3vh;
            background-color: transparent;
            padding: 8px;
            justify-content: center;
      }
      .grid-container-background div {
            width: 90vw;
            background-color: transparent;
            color: var(--ink_light);
            padding: 10px;
            text-align: justify;
      }


      .grid-container-title {
            display: grid;
            grid-template-columns: auto;
            gap: 5px;
            background-color: transparent;
            padding: 8px;
            justify-content: center;
      }
      .grid-container-title div {
            background-color: transparent;
            width: 90vw;
            color: black;
            padding: 10px;
      }
      .text_left {
            text-align: justify;
      }
      .text_right {
            text-align: justify;
      }

}