body, html {
    margin: 0;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    font-family: Arial, sans-serif;

  }
.line-two > a,.list-container > a,.line-two > a:visited,.list-container > a:visited  {color:#007bff;text-decoration:none;}
.line-two > a:hover,.list-container > a:hover {text-decoration:underline;}
.container {display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 20px;}
.list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  max-width: 700px;width:100vw;}
.list-container > a {
  aspect-ratio: 1 / 1;
  flex: 0 0 calc((100% - 50px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;}
.list-container a img {
  aspect-ratio: 1 / 1;
  border: 2px solid black;
  object-fit: contain;
  display: block;
  margin-bottom: 6px;}
.list-container > a:first-child {
  flex: 0 0 100%;
  justify-content: center;}
.line-two {
  display: flex;
  justify-content: center;
  flex: 0 0 100%;
  gap: 25px;
  align-items: center;      
  text-align: center;}
.line-two > a {
  aspect-ratio: 1 / 1;
  flex: 0 0 200px;}
#fleche-gauche{transform: rotate(-90deg);}
#fleche-droite{transform: rotate(90deg);}
#box-gauche, #box-droite {
  flex: 0 0 calc((100% - 50px) / 3);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;  
  overflow: hidden;}
#box-gauche {justify-content: flex-end;}
#box-droite {justify-content: flex-start;}
#fleche-gauche, #fleche-droite {width: 70%; height: auto;}

#tournesol-logo {position: fixed;
        right: 28px;
        bottom: 10px;}
#infoText {position: absolute;
        top: -15%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #567be0;
        color: rgb(255, 251, 0);
        padding: 5px;
        display: none;
        border-radius: 5px;
        white-space: nowrap;
        z-index: 1; }
#tournesol-logo img:hover + #infoText {display: block;}
  

@media (max-width: 687px) {
 #box-droite {display:none;}

.list-container > a:not(:first-child) { 
flex: 0 0 calc((100% - 25px) / 2); 
  }

  }