body {
    background-image: url("Images/background.jpg");
    /* background-color: white; */
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: white;
    font-family: "Kanit", sans-serif;
    height: 100%;
  }

 

  
  /*Désactive les barres de scroll (index.html)*/
  /* .no_scroll {
    overflow: hidden;
  } 
  */
  
  /* -------------------- Début du Style du menu de navigation : -----------------------------------*/
  
  .time{
    text-align: center;
  }

  .menu {
    padding: 0;
    font-size: 1.4em;
  }
  
  .sticky {
    /* Garde le menu en haut de l'écran après le scroll de l'utilisateur        */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
  
  div.nav {
    /* Mise en page de la barre de navigation */
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: black;
    border: double 5px gold;
    z-index: 5; 
  }

  .nav2{
    padding: 0;
    margin: 0;
    text-align: center; 
  }
  
  .reset_padding ul {
    margin-top: 0;
    margin-bottom: 0.8em;
  }
  
  div.nav li {
    /* Affiche les éléments de la liste en ligne */
    display: inline-block;
    list-style: none;
    /* utile pour IE */
    margin-right: 10%;
  }
  
  .nav li:last-child {
    margin-right: 0; /* Annule la marge droite du dernier item */
  }
 
  .hidden {
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    width: 1px;
 }

 .hide{

  display: none;
 }
  .none_background{
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
  }
  
  .nav .social_media{
    border-bottom:none;
    
    
  }
  .social_media{
    position: absolute;
    top:0;
   
  }
  
  .social_media li{
    display: inline;
    margin-right: 1em;
  
  }
  
  .social_media img{
  
   background-attachment:inherit;
   display: inline;
   width: 2.6em;
   transition: 0.3s;
  
   
  }
  .social_media img:hover{
    
    transform: rotate(35deg);
  }

  .social_media_text li{
    display: inline;
    list-style: none;
    font-size: 1.5em;
    margin-right: 2em;

  }
  
 
  div.border_none{
    border: none;
  }
  
  
  /* -------------------- Fin du Style du menu de navigation : -----------------------------------*/
  
/* Début du style de la page articles */


  .articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.articles-card {
  display: block;
  padding: 2rem;
  border-radius: 12px;
  background: #111;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.articles-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.articles-card h2 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  /* text-align: center; */
}

.articles-card p {
  opacity: 0.85;
  line-height: 1.5;
}
/* Fin du style de la page articles */
  
  h1,
  h2 {
    color: gold;
    margin: 0px;
    text-align: center;
    margin-bottom: 1em;
  }
  
  h1 {
    font-size: 3em;
    font-family: "Orbitron", sans-serif;
  }
  
  h2 {
    text-align: left;
    font-size: 2em;
  }

  div.content h2{

    font-size: 2.8em;
    text-align: center;
  }
  
  h3 {
    font-size: 1.8em;
    color: gold;
  }

.toggle
{
    text-align: center;
}

  h4 {
    font-size: 1.5em;
    color: lightgreen;
  }

  h2.white a,
  h2.white a:hover,
  h2.white a:visited
  {
    color: white;
  }
  
  .content {
   
    margin: 3em;
    margin-top: 0em;
    padding: 3em 4em;
    border: double 8px gold;
  }

  .dernierArticle {
    margin-top: 2em;
    padding: 0.7em;
    border: solid 2px gold;
  }

  /* Style Formulaire alerte : */

  .conteneur-alerte
  {
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   
    justify-content: center;
    align-items: center;

    gap:20px;
  }

  .actus
  {
    margin: auto;
    width: 100%;
 
    display: flex;
    justify-content: center;
    
  }

  .iframe_marathon
  {
     background-color: black;
  }

  
  .inscription-alerte,.annulation-alerte, .inscription-service, .iframe_marathon{

    width: 80%;    
    padding: 2em;
    /* margin: auto; */
    border: solid 2px goldenrod;
    border-radius: 15px;
  
  }
  
  .inscription-alerte input,.annulation-alerte input, .inscription-service input, .inscription-service textarea{

    display: block;
    margin: auto;
    width: 50%;
    padding:0.8em;
    font-size:1.4em; 
  }

  .inscription-alerte input[type="text"],
  .inscription-alerte input[type="email"],
  .annulation-alerte input[type="email"],
  .inscription-service input,
  .inscription-service textarea{

   background-color:lightsteelblue;
   color:black
  }


  .conteneur-checkbox {
    
    text-align: center;
    
  }

  
  .conteneur-checkbox input {
    margin-left: 5px;
    display: inline; 
    width: 1em;
    height: 1em;
  }
  
  input[type="text"]::placeholder, 
  input[type="email"]::placeholder { 
             
    /* Firefox, Chrome, Opera */
    text-align: center;
  }

  .inscription-service textarea
  {
   
    padding-top: 1.5em;
    padding-bottom: 1.4em;
    text-align: justify;
  }
 .inscription-service textarea::placeholder 
  {
    text-align: center;
    font-size: 1.5em;
  }



  input[type="submit"]
  {
    cursor: pointer;
    background-color: darkgrey;
    
  }

  input[name="inscription"]:hover,
  input[name="inscription"]:active,
  input[name="tutorat"]:hover,
  input[name="tutorat"]:active {

    background-color: green;
    color: white;
  }

  input[name="désinscription"]:hover,
  input[name="désinscription"]:active {


    background-color: red; 
    color: white;
  }

  /* Fin style formulaire alerte */

  /* Style CSS pour la pop-up Google Analytics */
    .popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
  }

  .popup-contenu {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: gray;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }

  .btn-conteneur {
      text-align: center;
      margin-top: 20px;
  }

  .btn-conteneur button
  {
    padding: 2em 5em;
    font-size: 1em;
  }
  /* Fin du Style CSS pour la pop-up Google Analytics */
  
  .underline {
    text-decoration: underline;
  }

  .gold{
    font-weight:550;
    color:gold;
  }
  
  .skyblue{

    color:skyblue;
  }

  p {
    font-family: "Pangolin", cursive;
    /* font-family: "Mukta", sans-serif; */
    font-size: 1.5em;
    text-align: justify;
  }

  label {
      font-family: "Pangolin", cursive;
      /* font-family: "Mukta", sans-serif; */
      font-size: 1.5em;
  }

  p.copyright{
    text-align: center;
  }
  .commentaire{
    font-size: 1.3em;
    text-align: center;
  }

  .text_center{
    text-align: center;
  }

  .text_right{
    text-align: right;
  }

  code{
    background-color: blue;
    font-weight: bold;
  } 

.codePage
{
  max-width: 100%;
  overflow: auto;

  border:2px solid gold;
  border-radius: 6px;
}

.codePage code
  {
    font-weight: normal;
    font-size: 1.2em;
    
  }
  
  .lightblue
  {
    color:lightblue

  }

  
  .green
  {
    color:rgb(8, 236, 88)

  }

  
 span.always_green, a.always_green, a.always_green:visited {
   color: lime;
    ;
    /* Les liens dans les paragraphes sont en vert */
  }
 
  a,
  a:visited,.grid-list-JV a,.grid-list-JV p a:visited,p.copyright a:hover {
    /* Par défaut, les liens (et les liens déjà visités seront en white) */
    color: white;
    text-decoration: none;
  }
  
  a:hover,.grid-list-JV a:visited:hover {
    color: lime; /* Change la couleur au survol de la souris*/
    text-decoration: none;
  }
  h1 a,
  h1 a:hover,
  h1 a:visited
  ,h2 a,
  h2 a:hover,
  h2 a:visited {
    /* Les liens présent dans les titres 2 sont en doré */
    color: gold;
  }

  .liste_style li, .liste li{
   
    font-size:1.4em; 
    margin-bottom: 1em;
  }

  
  .sous_liste li{
   
    font-size:0.9em; 
    margin-bottom: 0.9em;
  }
  /* -------------------- Début du Style du Carrousel : -----------------------------------*/
  
  .slider-1 {
    max-width: 80%; /*valeur de la largeur du carrousel*/
    margin: 2em auto;
    overflow: hidden;
    /* Cache ce qui dépasse du cadre du carrousel (slider-1)*/
    border: solid gold;
    border-radius: 1em; /*Bordures arrondies*/
  }
  
  .slider-1 .slider {
    display: flex;
    animation: slider-1 20s infinite ease-in-out; /* L'animation tourne en boucle */
  }
  
  .slider-1 img,
  .slider a {
    flex-shrink: 0; /* Permet aux éléments de ne pas se comprimer, sinon (flex-shrink:1) : toutes les images seraient sur 1 slide et tous les autres slides seraient vides */
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .slider-1 img{
    height:100%;
  }
  
  .slider a.bg_transparent,
  .slider a.bg_transparent > img {
  
    background-color: rgba(0, 0, 0, 0);
  }
  
  @keyframes slider-1 {
    /*Pemet de combiner des transformations CSS en une seule animation*/
    0%,
    20% {
      transform: translateX(0);
    }
  
    25%,
    45% {
      transform: translateX(-100%);
    }
  
    50%,
    70% {
      transform: translateX(-200%);
    }
  
    75%,
    95% {
      transform: translateX(-300%);
    }
  
    100% {
      transform: translateX(-400%);
    }
  }
  
  /* -------------------- Fin du Style du Carrousel : -----------------------------------*/
  
  
  .centre {
    /* centre horizontalement l'image*/
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .accueil {
    /* style logo home*/
    width: 45%;
    transition: transform 0.2s;
    will-change: transform;
    margin-bottom: 0;
    position: relative;
    top: 0.7em;
    margin: 0;
    padding: 0;
  }
  
  .accueil:hover {
    transform: rotate(25deg);
    /* animation logo home */
    margin: 0;
    padding: 0;
  }
  
  .animation_zoom:hover {
    transform: scale(1.1);
  }
  
  .animation_zoom {
    transition: transform 0.5s ease-out;
    will-change: transform;
    border: solid gold;
    border-radius: 1em;
  }
  
  
  /* -------------------- DEBUT : display grid   : -----------------------------------*/
  
  .grid-list-JV {
    background-color: rgba(0, 0, 0, 0.3);
    display: grid;
    grid-template-columns: 1fr;
    
    margin: 3em;
    padding: 3em 2em;
    border: double 8px gold;
  }

  .grid-list_guide,.grid-list_astuces {
    background-color: rgba(0, 0, 0, 0.3);
    display: grid;
    grid-template-columns: 1fr;
  
    margin: 3em;
    padding: 3em 2em;
    border: double 8px gold;
  }

 

  .grid-list-JV div, .grid-list_astuces div,.grid-list_guide div{
    border-bottom: 2px solid gold;
  }

  .grid-list-JV div:last-child,.grid-list_guide div:last-child{

    border-bottom: none;
  }

  .grid-list-JV img{
    width: 35% ;
    display: block;
    margin: auto;
    border: 4px gold solid;
    border-radius: 8px;
  }

  .grid-list-JV .trop_petite{

    width: 60%;
  }

  .grid-list-JV .trop_grande{

    width: 35%;
    margin-bottom: 2em;
  }
  .content .trop_grande{

    width: 70%;
  }

  .content .trop_grande2{

    width: 100%;
  }

  .content .trop_grande2_5{

    width: 80%;
  }


  .content .trop_grande3{

    width: 60%;
  }

  .content .trop_grande4{

    width: 50%;
  }

  .content .trop_grande5{

    width: 40%;
  }

  .content .trop_grande6{

    width: 30%;
  }

  .content .trop_petite{

    width: 60%;
  }

  .content .trop_petite2{

    width: 100%;
  }

 .resize{
  width: 90%;
 }

 .flottant_droite{

  float:right;

 }

  .grid-list-JV p{
    text-align: center;
  }


  

  
  /* -------------------- FIN : display grid -----------------------------------*/
  
  img.border-radius {
    border: solid 3.5px gold;
    border-radius: 17px;
  }

  img.border-radius-no-color {
  border-radius: 17px;
  }

  img.marge_bas{
    margin-bottom: 0.5em;
  }

  .video-responsive iframe{
    width: 740px;
    height:417px;
    display: block;
    margin: auto;
    border: solid 2px gold;
    border-radius: 20px;
  }

  .cover{
    width:35%
    
    
  }

  .note{
    width:35%
    
  }

/* Style Projets */

.center-container {
  text-align: center;
}

a.bouton
{
  display: inline-block;
  padding: 25px 30px;
  background-color: white;
  color: black;
  font-size:1.3em;
  text-decoration: none;
  border-radius: 15px;
  font-weight: bold;
}



.bouton:hover
{
  
  color: white;
  background-color:green;
}

 
/* Style Mobile */
  @media only screen and (max-width: 600px) { 
    
    /* Media queries pour appliquer un style spécifique selon la taille de l'écran.
    
    Ici, cela permet d'améliorer l'affichage du site sur un téléphone.
  
    Le menu s'affiche verticalement.
    */

    div.nav{
      padding: 0;
      margin: 0;
    }
  
    div.nav li {
      /* Affiche les éléments de la liste en ligne */
      display: block;
      list-style: none;
      /* utile pour IE */
      margin: 0;
      
    }

    div.sticky {
      /* Garde le menu en haut de l'écran après le scroll de l'utilisateur        */
      position: inherit;
      position: inherit;
     
    }
  
    div.slider-1 {
      max-width: 100%
  
    }
  
    div.animation_zoom:hover{
  
      transform: none;
    }

  
    img.accueil{
  
     
      display: none;
     
    }

    /* Style Champ de Formulaire sur mobile (responsive) */

    .conteneur-alerte input[type="submit"],
    .conteneur-alerte input[type="text"],
    .conteneur-alerte input[type="email"]
    {
      width: 86%;
      font-size: 1.2em;
      
      
    }
    
    .conteneur-alerte input[type="submit"]
    {
      font-size:1.10em;
      width: 100%;
      padding:1.5em 1em;
    } 


    img.flottant_droite{
      float: none;
      display: block;
      margin: auto;
    }

    img.no_zoom{
      width: 40%;
    }

    
  
    li.hidden {
      position: inherit;
      width: auto;
      height: auto;
      padding-top: 0.7em;
   }
  
   
  
  

   .grid-list-JV,.grid-list_astuces,.grid-list_guide{
     margin: 0;
    
  
    }
  

    div.content{

      margin: 0;
      padding: 1em;
    

    }
    body p{

      font-size: 1.5em;
    }

    
  

    div.grid div,div.grid2 div,div.content,div.nav{
    
      /* Les lignes suivantes permettent au texte de s'adapter à l'écran et de s'afficher correctement*/
      max-width: 100%;
      /* min-width: 40%; */
      height:max-content; 
      overflow-wrap:break-word;    
  
    }
  
    div.grid2 h2,div.grid2 h2{
     text-align: center;
    }
  
    

    div img,div img.resize,
    div.content img.trop_petite,
    div.content img.trop_grande,
    div.content img.trop_grande2_5,
    div.content img.trop_grande3,
    div.content img.trop_grande4,
    div.content img.trop_grande5,
    div.content img.trop_grande6,
    div.content img.resize,
    div.grid-list-JV img, div.grid-list-JV img.trop_grande,
    div.grid-list-JV img.trop_petite
    
    {
      width: 100%;

    }



    div.content img.cover,
    div.content img.note {
      width: 70%;
    }

      div.content img.trop_grande_mobile{
      width: 65%;
    }
    
 nav.social_media{
      display: none;
    }
    body h1{
      font-size: 2.5em;
  
    }
    .titre-pas-responsive
    {
      font-size: 2.2em;
    }

    h1,h2,h3,h4
    {
      text-align: center;
    }

    /* div.content iframe{
      width: 100%;
    } */
    .video-responsive {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; 
      height: 0;
    }
    .video-responsive iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
    }
   
    

   
    ol.liste_style li,ul.liste_style li{
      font-size: 1.5em;
    }
    
    ul.sous_liste li, ol.sous_liste li{
      font-size: 1em;
    }
   
   div.content .word_break /* pour les h2 */
  {
    font-size: 2.5em;
   
  }
  
  
}