/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   /* overflow: auto, scroll, visible, hidden */
 

    body {
      margin: 0;
      height: 100vh;
      background: url("bg.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      vertical-align: baseline;
      position: static;
    }
    
    
    footer {
      margin-top: 50px;
      text-align: center;
    }

  h4 {
    font-size: 12px;
    font-weight: normal;
    text-decoration: underline;
    text-indent: 20px;
    margin-top: -15px;
    
  }
  
    h5 {
    font-size: 15px;
    font-weight: normal;
    text-decoration: underline;
    text-indent: 20px;
    margin-top: -2px;
    text-align: right;
    
  }
    
        /* changer couleur des liens en fonction de leur état*/
        
      /* lien non visité */
      a:link {
        color: #54acba;
        text-decoration: none;
      }
      /* lien visité */
      a:visited {
        color: #429096;
        text-decoration: none;
      }
      /* souris sur le lien */
      a:hover {
        color: #a5a1f7;
        text-decoration: underline;
      }
      /* lien séléctionné */
      a:active {
        color: #e63f00;
        text-decoration: underline;
      }
        /*Bordure en haut */
        
    
     
     /*Centre */ 
    .center {
      flex: 50%;
      padding: 5%;
      box-sizing: border-box;
      margin: 10px;
      float: left;
      min-width: 100px;
      text-align: center;
      word-wrap: break-word;
      background-color: white;
      border: 5px solid black;

      
    }
    
.layout {
  display: flex;
  gap: 20px;
  width: 55%;

}

.actu {
  overflow:auto;
  width: auto;
  align-items: center;
  justify-content: center;
  padding: 1px;
}

.actu img {
  max-width: 450px;
  object-fit: contain;
  display: block;
}

.photo {
    /*min-width: 265px;
    max-width: 265px;*/
    overflow: hidden;
    width: 230px;
    align-items: center;
    justify-content: center;
}

.photo img {
  max-width: 230px;
  object-fit: contain;
  display: block;
}

.gallery {
  border: none;
  flex-direction: column;
  overflow: scroll;
  /*align-items: baseline;*/
  /*justify-content: space-around;*/
}

.gallery img {
    object-fit: contain;
    display: inline;
    min-width: 60px;
    max-width: 60px;
    vertical-align: top;
    text-align: center;
    
}
.galpic {
  align-items: center;
  text-align: center;
}

.colonne {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gauche { flex: 1; 
max-width: 265px;
}
.milieu { flex: 2; 
  max-width: 450px;
  min-width: 500px;
}
.droite { flex: 1; 
  max-width: 265px;
}

.encart {
  background: #1c1b1b;
  padding: 15px;
  border: 5px solid black;
  color: white;
  justify-content: center;
}

.actif {
  background: #1c1b1b;
  padding: 0px;
  border: 5px solid black;
  color: white;
  justify-content: center;
}

    .container {
      display: flex;
      justify-content: center;
      border: 5px solid black;
      padding: 30px;
      width: 200px;
      max-width: 800px;

      background-color: #262626;

    }
    
    .preuves {
        background-color: #262626;
        color: white;
        padding: 0px;
        margin: 10px 0;
        border-radius: 8px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        max-height: 110px;
        min-height: 110px;

    }

      .card {
        background-color: #262626;
        color: white;
        padding: 20px;
        margin: 10px 0;
        border-radius: 8px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

    }
          .cardpg {
        background-color: #262626;
        display: inline;
        color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

    }
    
    .imageflottante
{
float: left;
width: 100px;
margin-right: 15px;
}

    
    
      .HForum {
        background-color: #54acba;
        color: white;
        padding: 5px;
        margin: 10px 0;
        border-radius: 8px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

    }
    
          .FForum {
        background-color: #262626;
        color: white;
        padding: 5px;
        margin: 10px 0;
        border-radius: 8px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

    }

       .card-row {
        display: flex;
        gap: 20px; 

    }

      .card-row .card {
        flex: 1;
        text-align: center;
    }
    
    .titre {
      font-size: 90px;
      font-weight: bold;
      display: flex;
      gap: 20px;
      align-items: baseline;
      color: white;
    }

    .sous-titre {
      font-size: 20px;
      font-weight: normal;
      color: white;
    }
    
    #logo {
      width: 100px;
      float:left;
      margin: -10px;
      margin-right: 20px;
    }
    
    /* orga forum*/
    
    .forumT {
      font-size: 50px;
      color: white;
      text-align: center;
      
      text-decoration: none;
      
    }
    
    .ZtitreF {
  background: #1c1b1b;
  border: 5px solid black;
  color: white;
  justify-content: center;
}
  .RforumT {
      font-size: 15px;
    font-weight: normal;
    text-decoration: none;
    text-indent: 0px;
    margin-top: 0px;
    text-align: left;
    
  }
  
    /* Orga des typos tenez vous informés*/
    
    .ahdate {
      font-size: 12px;
      color: grey;
      font-weight: normal;
      text-transform: lowercase;
      text-align: right;
    }
    
    .ahtitre {
      font-size: 20px;
      color: white;
      font-weight: bold;
      text-transform: none;
      text-decoration: underline;
      text-align: left;
      vertical-align: bottom;
    }
    
        .ahtexte {
      font-size: 14px;
      color: white;
      font-weight: normal;
      text-transform: none;
      text-align: justify;
      margin-top: -20px;
      margin-bottom: -5px;
      text-indent: 10px;
    }
    
        .ahinfoa {
      font-size: 12px;
      color: white;
      font-weight: 500;
      text-transform: none;
      text-align: left;
      margin-top: 0px;
    }
    
    mark {
      color: grey;
      font-weight: normal;
      text-decoration: none;
      background-color: #262626;
    }
      
    
    /* NE PAS TOUCHER A CE QUI EST EN DESSOUS, C'EST POUR LE BANDEAU DEROULANT*/
    
    .scrolling-text-container {
    background-color: #1c1b1b;
    border-radius: 0px;
    overflow: hidden;
    /*max-width:2000px;*/
    
}

.scrolling-text-inner {
    display: flex;
    white-space:nowrap;
    font-size: 30px;
    font-weight: bold;
    padding: 6px 0;
}

.scrolling-text {
    display: flex; 
    color: grey;
    font-size: 15px;
    font-family: tomatoes;
}
/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}


marquee {
    text-decoration: none;
}
      margin-right: 30px;
    }