body {
      margin: 0;
      font-family: Arial, sans-serif;

      /* Image de fond */
  background-image: url('groupe.png');  
  background-repeat: no-repeat;      /* Pas de répétition */
  background-size: cover;            /* L'image couvre tout le fond, même en zoom */
  background-position: center center; /* Centre l'image */
  background-attachment: fixed;      /* L'image reste fixe quand tu scroll */
  
    }
    /* Barre fixe en haut */
    .navbar {
      position: fixed; /* fixe en haut */
      top: 0;
      left: 0;
      width: 100%;
      background-color: #333;
      color: white;
      padding: 50px 150px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000; /* au-dessus des autres éléments */
      font-size: 30px;
    }
   
    /* Style des liens */
    .navbar a {
      color: white;
      text-decoration: none;
      margin-left: 15px;
    }
    .navbar a:hover {
      text-decoration: underline;
    }

    





        /* Pour que le contenu ne soit pas caché sous la barre */
     .content {
      margin-top: 100px; 
      padding: 50px;
      display: flex;
      gap: 50px; /* marge entre colonnes */
      justify-content: center; /* centre les images horizontalement */
      flex-wrap: nowrap; /* interdit de créer une nouvelle ligne/colonne */

    }
    /* Style des images cliquables */
    .content a {
      display: block;
      width: 300px; /* largeur fixe pour chaque colonne */
      box-sizing: border-box;
      border: 2px solid transparent;
      transition: border-color 0.3s;
    }
    .content a:hover {
      border-color: #333;
    }

    .content img {

      width: 100%;
      height: auto;
      display: block;
      border-radius: 0px;
    }

       /* Chaque colonne */
    .column {
      display: flex;
      flex-direction: column;
      gap: 30px; /* espacement vertical entre images */
      width: 400px; /* largeur fixe des colonnes */
      min-width: 0; /* important pour que la colonne ne dépasse pas */
      }

          /* Images cliquables */
    .column a {
      display: block;
      border: 2px solid transparent;
      transition: border-color 0.3s;
      width: 100%;          /* Lien prend 100% de la colonne */
      max-width: 100%;      /* Ne dépasse jamais */
      overflow: hidden;     /* Cache ce qui déborde */
      box-sizing: border-box; /* Pour bien gérer les bordures/paddings */
    }
    .column a:hover {
      border-color: #333;
    }
    .column img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 0 px;
      object-fit: contain;
    }