span,
  p {
    font-family: var(--general-font);
    color: var(--font-color);
  }

  h1 {
    color: var(--font-color);
    font-family: var(--title-font);
  }

  /*html{
    overflow-x: hidden;
  }*/

  /**************************************** CSS Mobile ****************************************************/
  body {
    background-color: var(--background-color);
    /* background-image: url(../Images/Hexagon.png); */
    background-size: 10em;
    background: linear-gradient(180deg, #1B1B1B 0%, #2B2B2B 44.23%, #323232 77.88%, #1B1B1B 100%);
  }

  .border {
    position: fixed;
    background: var(--border-color-side);
    /* couleur des bords */
    z-index: 9999;
  }

  .border.gauche {
    top: 0;
    left: 1em;
    width: 1px;
    /* épaisseur du bord gauche */
    height: 100%;
  }

  .border.droite {
    top: 0;
    right: 1em;
    width: 1px;
    /* épaisseur du bord droit */
    height: 100%;
  }

  /**************************************** CSS Section Carroussel **************************************************/
  .carroussel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* Le motif est rendu via ::before pour n'affecter que le fond (permets un masque dégradé) */
  }

  .carroussel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='25%25' height='25%25' opacity='0.1' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8Z' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 40px 40px;
    /* Masque pour faire un fondu descendant uniquement sur le motif */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  #image-carroussel {
    display: flex;
    justify-self: center;
    height: 75vh;
    width: 100%;
    opacity: 1;
    border-bottom: 2px solid var(--border-color-special);
    object-fit: cover;
    filter: brightness(0.5);
  }

  .image-titre {
    width: 50%;
    height: auto;
    top: 3rem;
    left: 5rem;
    position: absolute;
    z-index: 1;
  }

  .arcade-details {
    display: flex;
    flex-direction: column;
    position: absolute;
    font-family: var(--general-font);
    left: 0%;
    bottom: 10vh;
    background-color: #2b2b2bc1;
    min-width: 80%;
    text-align: left;
    width: auto;
    justify-self: anchor-center;
    justify-content: center;
    margin: 0 9vw;
  }

  .arcade-details>.sous-titre {
    font-size: clamp(20px, 4vw, 35px);
    font-family: var(--title-font);
    text-align: left;
    margin: 0;
    margin-left: 4vw;
  }


  .arcade-details .description {
    font-weight: 500;
    padding: 2vh 5vw;
    font-size: clamp(12px, 2.2vw, 18px);
    line-height: clamp(0.8rem, 2.2vw, 2.4rem);
    padding-top: 0;
    justify-self: anchor-center;
  }

  .sous-titre-carroussel {
    margin-left: -2em;
    text-align: center;
  }

  .carroussel-choix {
    display: flex;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-self: center;
    font-size: 2vw;
    padding: 0.5em;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    gap: 0.9vw;
  }

  .carroussel-choix div p {
    margin: 0;
    display: inline-block;
    width: 27vw;
    height: 5vh;
    white-space: nowrap;
  }

  .carroussel-choix div {
    flex-grow: 1;
  }

  .bouton-finissants>p,
  .bouton-arcade>p,
  .bouton-graphisme>p {
    border: 1px solid var(--border-color);
    width: 100%;
    text-align: center;
    align-content: center;
    font-family: var(--title-font);
  }

  .bouton-arcade>.arcade {
    /*background-color: var(--carrousel-bouton-background-color);*/
    opacity: 1;
    letter-spacing: var(--title-letter-spacing);
    border: none;
  }

  .bouton-finissants>.finissants {
    /*background-color: var(--bouton-projet-finissant-color);*/
    opacity: 1;
    letter-spacing: var(--title-letter-spacing);
    border: none;
  }

  .bouton-graphisme>.jour-terre {
    /*background-color: var(--bouton-projet-jt-color);*/
    opacity: 1;
    letter-spacing: var(--title-letter-spacing);
    border: none;
  }

  /* Glow animations for clicked states (pulsing effect) */
  @keyframes glow-arcade {
    0% {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.0), 0 0 0px rgba(0, 0, 0, 0);
    }

    50% {
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.06), 0 0 28px var(--bouton-projet-arcade-color);
    }

    100% {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.0), 0 0 0px rgba(0, 0, 0, 0);
    }
  }

  @keyframes glow-jt {
    0% {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.0);
    }

    50% {
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.06), 0 0 28px var(--bouton-projet-jt-color);
    }

    100% {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.0);
    }
  }

  @keyframes glow-finissants {
    0% {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.0);
    }

    50% {
      box-shadow: 0 0 1px rgba(255, 255, 255, 0.06), 0 0 28px var(--bouton-projet-finissant-color);
    }

    100% {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.0);
    }
  }

  .bouton-arcade>.arcade-click {
    border: 1px solid rgb(5, 5, 115);
    opacity: 1;
    letter-spacing: var(--title-letter-spacing);
    z-index: 200;
    background-color: var(--bouton-projet-arcade-color);
    border-radius: 5px;
    transition: all 0.5s ease;
    animation: glow-arcade 1.8s ease-in-out infinite;
  }

  .bouton-graphisme>.jour-terre-click {
    border: 1px solid rgb(6, 51, 49);
    opacity: 1;
    letter-spacing: var(--title-letter-spacing);
    z-index: 200;
    background-color: var(--bouton-projet-jt-color);
    border-radius: 5px;
    transition: all 0.5s ease;
    animation: glow-jt 1.8s ease-in-out infinite;
  }

  .bouton-finissants>.finissants-click {
    border: 1px solid rgb(88, 67, 6);
    opacity: 1;
    letter-spacing: var(--title-letter-spacing);
    background-color: var(--bouton-projet-finissant-color);
    border-radius: 5px;
    transition: all 0.5s ease;
    /* subtle pulsing glow */
    animation: glow-finissants 1.8s ease-in-out infinite;
  }


  .finissants.finissants-click~.student,
  .arcade.arcade-click~.manette,
  .jour-terre.jour-terre-click~.tree {
    display: block;
    position: absolute;
    width: 5vw;
    bottom: 0;
    right: 40%;
  }

  .bouton-arcade,
  .bouton-graphisme,
  .bouton-finissants {
    position: relative;
  }

  .arcade-details>.plus:hover,
  .bouton-arcade>.arcade:hover,
  .bouton-graphisme>.jour-terre:hover,
  .bouton-finissants>.finissants:hover {
    cursor: pointer;
  }

  .plus {
    color: var(--font-color);
    text-decoration: none;
    font-family: var(--general-font);
  }

  .manette,
  .tree,
  .student {
    transform-origin: center center;
    will-change: transform, opacity;
    transform: translateY(19px) rotate(0deg) scale(1);
    transition: transform 220ms cubic-bezier(.2, .9, .2, 1), opacity 200ms;
    opacity: 0.9;
  }

  @keyframes icon-hover-rotate {
    0% {
      transform: translateY(19px) rotate(0deg) scale(1);
    }

    100% {
      transform: translateY(19px) rotate(25deg) scale(1.03);
    }

    /* final rotated state */
  }

  .bouton-arcade:hover .manette,
  .bouton-graphisme:hover .tree,
  .bouton-finissants:hover .student {
    animation: icon-hover-rotate 320ms cubic-bezier(.2, .9, .2, 1) forwards;
    opacity: 1;
  }

  .manette,
  .tree,
  .student {
    display: none;
  }

  /****************************************** CSS Section Accroche ***************************************************/

  .accroche {
    width: 255px;
    height: auto;
    font-size: 1.5rem;
    font-family: var(--title-font);

    background: linear-gradient(90deg,
        #7D77D4 0%,
        #2FC7BF 35%,
        #EECC7F 80%,
        #7D77D4 100%);

    background-size: 200% auto;
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: anim-accroche 3s linear infinite;
    letter-spacing: var(--title-letter-spacing);
  }

  .numeration-short {
    display: none;
  }

  .numeration {
    color: #606060;
    font-family: var(--title-font);

    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    display: inline-block;
    transform-origin: center;
    font-size: 11px;
    box-sizing: border-box;
    align-self: center;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: 15px;
    margin: 0px;
    padding-top: 15px;
    padding-right: 10px;
  }

  .ligne-parallele {
    position: relative;
    width: 28px;
    height: 240px;
    margin: 0;
    align-self: center;
    pointer-events: none;
  }

  .ligne-parallele::before,
  .ligne-parallele::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--font-color);
    opacity: 0.85;
  }

  .ligne-parallele::before {
    left: 4px;
    background: linear-gradient(#222 0%,
        #404040 10.1%,
        #505050 21.63%,
        #5A5A5A 32.21%,
        #A4A4A4 84.13%,
        #222 100%);
  }

  .ligne-parallele::after {
    left: 18px;
    background: linear-gradient(#222 0%,
        #404040 10.1%,
        #505050 21.63%,
        #5A5A5A 32.21%,
        #A4A4A4 84.13%,
        #222 100%);
  }


  @keyframes anim-accroche {
    to {
      background-position: 200% center;
    }
  }

  .accroche-conteneur {
    padding: 25vw 0;
    padding-left: 1em;
    display: flex;
    justify-content: center;
  }


  /*************************************** CSS Section À Propos ******************************************************/
  /*
.a-propos-background, .partenaires {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800' opacity='0.38' width='800' height='800'%3E%3Cg stroke-width='3' stroke='hsla(0, 0%25, 100%25, 1.00)' fill='none'%3E%3Crect width='400' height='400' x='0' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='800'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 40px;
  }*/

  .a-propos-background,
  .partenaires {
    position: relative;
    /* conteneur pour le pseudo-élément motif */
  }

  .a-propos-background::before,
  .partenaires::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800' opacity='0.38' width='800' height='800'%3E%3Cg stroke-width='3' stroke='hsla(0, 0%25, 100%25, 1.00)' fill='none'%3E%3Crect width='400' height='400' x='0' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='0'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='400'%3E%3C/rect%3E%3Crect width='400' height='400' x='0' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='400' y='800'%3E%3C/rect%3E%3Crect width='400' height='400' x='800' y='800'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 40px 40px;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .a-propos-background {
    display: flex;
    justify-content: center;
    padding: 2em 0em;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    max-width: 100vw;
  }

  .a-propos {
    max-width: 900px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    min-height: 800px;
    /* hauteur minimale pour grands écrans */
    padding: 2rem 1rem;
    /* espace vertical qui s’adapte */
  }

  .a-propos>.sous-titre {
    width: 70%;
    text-align: center;
    font-family: var(--title-font);
    font-size: xx-large;
    justify-self: center;
    margin-bottom: 1em;
  }

  .a-propos>.image-a-propos {
    display: block;
    width: 100%;
    height: 144px;
    justify-self: center;
  }

  .carroussel-apropos {
    position: relative;
    width: 300px;
    height: 300px;
    margin-right: 13rem;
    transform-style: preserve-3d;
    perspective: 1000px;
  }

  .carroussel-apropos img {
    position: absolute;
    top: 10%;
    left: 51%;
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    transform-style: preserve-3d;
    transform-origin: center center -130px;
    animation: spin 10s linear infinite;
    border: 2px solid var(--border-color);
  }

  .carroussel-apropos img:nth-child(1) {
    --start-angle: 0deg;
  }

  .carroussel-apropos img:nth-child(2) {
    --start-angle: 120deg;
  }

  .carroussel-apropos img:nth-child(3) {
    --start-angle: 240deg;
  }

  @keyframes spin {

    0%,
    20% {
      transform: rotateY(var(--start-angle));
    }

    33% {
      transform: rotateY(calc(var(--start-angle) + 120deg));
    }

    33%,
    53% {
      transform: rotateY(calc(var(--start-angle) + 120deg));
    }

    66% {
      transform: rotateY(calc(var(--start-angle) + 240deg));
    }

    66%,
    86% {
      transform: rotateY(calc(var(--start-angle) + 240deg));
    }

    100% {
      transform: rotateY(calc(var(--start-angle) + 360deg));
    }
  }

  .a-propos>.description {
    font-family: var(--general-font);
    justify-self: center;
    font-size: 15px;
    width: 60vw;
    text-align: left;
    border: 1px solid var(--border-color);
    background-color: rgba(38, 36, 36, 0.415);
    padding: 2em;
  }

  .infos-a-propos>* {
    width: 65vw;
    text-align: left;
    padding: 0.5em 1em;
    background-color: var(--font-color);
    color: black;
    border-radius: 5px;
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
  }

  /********************************** CSS Section Projets Populaire **********************************/
  .projets {
    padding: 0 15vw;
    padding-top: 7vh;
  }

  .projets .projet-populaire-finissant,
  .projets .projet-populaire-arcade,
  .projets .projet-populaire-jour-terre {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .projets .projet-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }


  .projets-populaire {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 800 800' opacity='0.38' width='800' height='800'%3E%3Cg stroke-width='3' stroke='hsla(0, 0%25, 100%25, 1.00)' fill='none'%3E%3Ccircle r='3.6578947368421053' cx='0' cy='0' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='400' cy='0' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='800' cy='0' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='0' cy='400' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='400' cy='400' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='800' cy='400' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='0' cy='800' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='400' cy='800' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3Ccircle r='3.6578947368421053' cx='800' cy='800' fill='hsla(0, 0%25, 100%25, 1.00)' stroke='none'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 100px;
    padding: 98px 0;
  }

  .projet-aléatoire {
    align-content: stretch;
  }

  .projets-populaire>h1,
  .partenaires>h1,
  .equipe>h1 {
    text-align: center;
  }

  .projets-populaire>p {
    font-family: var(--general-font);
    width: auto;
    margin: auto;
  }

  .boutonRefresh {
    display: flex;
    align-items: center;
    background: var(--background-color);
    padding: 0.5em;
    border-radius: 10px;
    padding-right: 1em;
    border: 2px solid #8b7b7b;
    align-items: center;
    justify-content: center;
    width: 200px;
    place-self: center;
    margin: 0 auto;
  }

  .boutonRefresh>.span {
    align-items: center;
  }

  .boutonRefresh.loading {
    opacity: 0.5;
    pointer-events: none;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .refresh {
    width: 40px;
  }

  .projet-populaire-arcade,
  .projet-populaire-finissant,
  .projet-populaire-jour-terre {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: repeat(3, 1fr);
    width: auto;
    margin: 0 auto;
    margin-top: 1rem;
  }

  .projet-populaire-arcade>span,
  .projet-populaire-jour-terre>span,
  .projet-populaire-finissant>span {
    border: 1px var(--border-color) solid;
    padding: 0.4em;
    text-align: center;
  }

  .projet-populaire-arcade>span {
    background-color: var(--bouton-projet-arcade-color);
  }

  .projet-populaire-jour-terre>span {
    background-color: var(--bouton-projet-jt-color);
  }

  .projet-populaire-finissant>span {
    background-color: var(--bouton-projet-finissant-color);
  }

  .projet-populaire-arcade>.titre,
  .projet-populaire-jour-terre>.titre,
  .projet-populaire-finissant>.titre {
    grid-area: 1 / 1 / 2 / 4;
    font-family: var(--title-font);
    font-size: 5vw;
    height: auto;
    padding-left: 10px;
  }

  .projet-populaire-arcade>.bouton,
  .projet-populaire-jour-terre>.bouton,
  .projet-populaire-finissant>.bouton {
    grid-area: 1 / 4 / 1 / 4;
    font-size: x-large;
    height: auto;
  }

  .projet-populaire-arcade>.bouton a,
  .projet-populaire-jour-terre>.bouton a,
  .projet-populaire-finissant>.bouton a {
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .projet-populaire-arcade>.categorie,
  .projet-populaire-jour-terre>.categorie,
  .projet-populaire-finissant>.categorie {
    grid-area: 2/1/3/2;
    height: 2rem;
    align-content: center;
  }

  .projet-populaire-arcade>.categorie-nom,
  .projet-populaire-jour-terre>.categorie-nom,
  .projet-populaire-finissant>.categorie-nom {
    grid-area: 2 / 2 / 4 / 5;
    height: 2rem;
    align-content: center;
  }

  .image-populaire-arcade,
  .image-populaire-jour-terre,
  .image-populaire-finissants,
  .partenaires>img {
    display: block;
    justify-self: center;
    grid-area: 3 / 1 / 4 / 5;
    width: 100%;
    height: 100%;
    align-self: stretch;
    /* ✅ CRITICAL */
    object-fit: cover;
  }

  .description-populaire-arcade,
  .description-populaire-jour-terre,
  .description-populaire-finissants {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;
    width: auto;
    margin: auto;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
  }

  .description-populaire-arcade>span,
  .description-populaire-jour-terre>span,
  .description-populaire-finissants>span {
    padding: 0.4em;
  }

  .description-populaire-arcade>.moins,
  .description-populaire-jour-terre>.moins,
  .description-populaire-finissants>.moins {
    width: 45px;
    text-align: end;
    border-left: 1px solid var(--border-color);
  }

  .projet-populaire-arcade,
  .projet-populaire-finissant,
  .projet-populaire-jour-terre {
    display: grid;
    grid-template-rows: auto auto 1fr;
    grid-template-columns: repeat(3, 1fr);
    min-width: auto;
    margin: 0;
    margin-top: 0;
    border: 2px solid var(--font-color);
    max-width: none;
    max-height: none;
    height: 60vh;
  }

  .projet-populaire-arcade {
    box-shadow: 12px 12px 0px rgb(14, 11, 72);
    animation: cardFloat 3s ease-in-out infinite;
  }

  .projet-populaire-jour-terre {
    box-shadow: 12px 12px 0px rgb(9, 45, 50);
    animation: cardFloat 5s ease-in-out infinite;
  }

  .projet-populaire-finissant {
    box-shadow: 12px 12px 0px rgb(68, 56, 7);
    animation: cardFloat2 4s ease-in-out infinite;
  }

  .projet-populaire-arcade:hover,
  .projet-populaire-finissant:hover,
  .projet-populaire-jour-terre:hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-radius 0.3s ease;
  }

  .projet-populaire-arcade>.titre,
  .projet-populaire-jour-terre>.titre,
  .projet-populaire-finissant>.titre {
    align-content: center;
    text-align: justify;
  }

  .image-populaire-arcade,
  .image-populaire-jour-terre,
  .image-populaire-finissants,
  .partenaires>img {
    overflow: hidden;
    height: auto;
    border-top: 2px solid var(--font-color);
  }

  .projet-populaire-arcade:hover {
    transform: translateY(-10px);
    box-shadow: 16px 16px 0px rgb(74, 66, 222);
    color: thistle;
    border-radius: 15px;
  }

  .projet-populaire-arcade:hover img,
  .projet-populaire-jour-terre:hover img,
  .projet-populaire-finissant:hover img {
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
  }

  .projet-populaire-arcade:hover>.titre,
  .projet-populaire-jour-terre:hover>.titre,
  .projet-populaire-finissant:hover>.titre {
    border-top-left-radius: 13px;
  }

  .projet-populaire-arcade:hover>.bouton,
  .projet-populaire-jour-terre:hover>.bouton,
  .projet-populaire-finissant:hover>.bouton {
    border-top-right-radius: 13px;
  }

  .projet-populaire-jour-terre:hover {
    transform: translateY(-10px);
    box-shadow: 16px 16px 0px rgb(31, 173, 195);
    color: thistle;
    border-radius: 15px;
  }

  .projet-populaire-finissant:hover {
    transform: translateY(-10px);
    box-shadow: 16px 16px 0px rgb(197, 158, 6);
    color: thistle;
    border-radius: 15px;
  }

  .projet-populaire-arcade,
  .projet-populaire-jour-terre,
  .projet-populaire-finissant {
    margin-bottom: 2rem;
  }

  .projets-populaire h1 {
    padding: 0 5vw;
  }

  .boutonRefresh {
    margin: 0 auto;
  }

  .boutonRefresh.loading {
    animation: none;
  }

  .boutonRefresh:hover {
    cursor: pointer;
  }

  .boutonRefresh img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }

  /******************************************* CSS Section Équipe ************************************/

  .equipe {
    padding: 0 2em;
    padding-bottom: 6em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid var(--border-color);
    padding: 98px 0;
  }

  .equipe h1 {
    text-align: center;
    margin-bottom: 2em;
  }

  .cartes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
    width: 90%;
  }

  .cartes a {
    color: white;
  }


  .carte-equipe,
  .carte-equipe-2,
  .carte-equipe-3,
  .carte-equipe-4,
  .carte-equipe-5 {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(2, 1fr);
    width: 291px;
    height: 148px;
    margin-top: 2em;
    box-sizing: border-box;
  }

  .carte-equipe>.photo,
  .carte-equipe-3>.photo,
  .carte-equipe-5>.photo {
    grid-area: 1 / 1 / 5 / 2;
    border: 1px var(--border-color-special) solid;
  }

  .carte-equipe>.nom,
  .carte-equipe-3>.nom,
  .carte-equipe-5>.nom {
    grid-area: 1 / 2 / 2 / 3;
    border: 1px var(--border-color-special) solid;
    background-color: var(--border-color-special);
    color: black;
    padding-top: 0.4em;
    padding-left: 0.4em;
    text-align: center;
  }

  .carte-equipe>.role,
  .carte-equipe-3>.role,
  .carte-equipe-5>.role {
    grid-area: 2 / 2 / 3 / 3;
    border: 1px var(--border-color-special) solid;
    padding-top: 0.4em;
    padding-left: 0.4em;
    text-align: center;
    font-size: small;
  }

  .carte-equipe>.petits-carre,
  .carte-equipe-3>.petits-carre,
  .carte-equipe-5>.petits-carre {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: 3 / 2 / 5 / 3;
    border: 1px var(--border-color-special) solid;
  }

  .carte-equipe-2>.photo,
  .carte-equipe-4>.photo {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: 3 / 1 / 5 / 2;
    border: 1px var(--border-color-special) solid;
  }

  .carte-equipe-2>.nom,
  .carte-equipe-4>.nom {
    grid-area: 1 / 1 / 2 / 2;
    border: 1px var(--border-color-special) solid;
    background-color: var(--border-color-special);
    color: black;
    padding-top: 0.4em;
    padding-left: 0.4em;
    text-align: center;
  }

  .carte-equipe-2>.role,
  .carte-equipe-4>.role {
    grid-area: 2 / 1 / 3 / 2;
    border: 1px var(--border-color-special) solid;
    padding-top: 0.4em;
    padding-left: 0.4em;
    text-align: center;
    font-size: small;
  }

  .carte-equipe-2>.petits-carre,
  .carte-equipe-4>.petits-carre {
    grid-area: 1 / 2 / 5 / 3;
    border: 1px var(--border-color-special) solid;
  }


  .carte-equipe {
    box-shadow: 0 0 17px 5px rgba(7, 7, 106, 0.7);
  }

  .carte-equipe .nom {
    background-color: rgb(18, 18, 104);
    color: white;
  }

  .carte-equipe-2 {
    box-shadow: 0 0 17px 5px rgb(124, 0, 124, 0.7);
  }

  .carte-equipe-2 .nom {
    background-color: rgb(130, 28, 130);
    color: white;
  }

  .carte-equipe-3 {
    box-shadow: 0 0 17px 5px rgba(203, 94, 158, 0.7);
  }

  .carte-equipe-3 .nom {
    background-color: rgb(227, 154, 208);
    color: white;
  }

  .carte-equipe-4 {
    box-shadow: 0 0 17px 5px rgba(151, 21, 21, 0.7);
  }

  .carte-equipe-4 .nom {
    background-color: rgb(194, 46, 46);
    color: white;
  }

  .carte-equipe-5 {
    box-shadow: 0 0 17px 5px rgba(108, 195, 9, 0.532);
  }

  .carte-equipe-5 .nom {
    background-color: rgb(135, 163, 51);
    color: white;
  }

  .img-personne {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

    .carte-equipe,
    .carte-equipe-2,
    .carte-equipe-3,
    .carte-equipe-4,
    .carte-equipe-5 {
      transform: scale(0.8);
      margin: 0;
    }

    .carte-wrapper,
    .carte-wrapper-2,
    .carte-wrapper-3,
    .carte-wrapper-4,
    .carte-wrapper-5 {
      height: min-content;
    }
  }

  /*************************************** CSS Tablette*************************************************/

  @media screen and (min-width: 576px) and (max-width: 1366.98px) {

    .border {
      position: fixed;
      background: var(--border-color-side);
      z-index: 9999;
    }

    .border.gauche {
      top: 0;
      left: 2em;
      width: 1px;
      height: 100%;
    }

    .border.droite {
      top: 0;
      right: 2em;
      width: 1px;
      height: 100%;
    }

    /******************************** CSS Section Carroussel Tablette **************************************************/

    /* ================== ARCADE DETAILS ================== */

    .arcade-details {
      position: absolute;
      bottom: 56vh;
      left: 12vw;
      width: 40vw;
      min-width: 400px;
      height: 22vh;
      background-color: rgba(26, 26, 26, 0.687);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 10px;
      transform: translateY(160%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s ease;
      overflow: hidden;
      z-index: 2;
      opacity: 1;
      /* transform: translateY(42%); */
      justify-self: auto;
      justify-content: center;
      margin: 0;
    }

    .bouton-arcade:hover .arcade-details {
      background: linear-gradient(1deg, #086ec2 10%, transparent 90%);
    }

    .bouton-graphisme:hover .arcade-details {
      background: linear-gradient(1deg, #3dc208 10%, transparent 90%);
    }

    .bouton-finissants:hover .arcade-details {
      background: linear-gradient(1deg, #c28708 10%, transparent 90%);
    }

    .arcade-details>.sous-titre-carroussel {
      width: 50%;
      margin: 0;
      font-size: 2.8vw;
      width: auto;
      padding: 3vh 0 0 2vw;
    }

    .arcade-details>.description {
      width: auto;
      margin: 0;
      line-height: 1.1;
      font-size: clamp(0.5rem, 2vw, 0.95rem);
      white-space: normal;
      text-align: left;
      padding: 0 2vw 30px 2vw;
      font-weight: 400;
    }


    /* Affichage uniquement quand on survole les boutons */
    .carroussel-choix:hover+.arcade-details {
      display: flex !important;
      z-index: 10;
    }




    /******************************************* Carroussel Choix *********************************** */
    #image-carroussel {
      clip-path: none;
      border-bottom: none;
	  transition: opacity 0.3s ease-in-out;
      will-change: opacity;
    }

    .carroussel {
      padding: 0;
    }

    .carroussel-choix {
      display: flex;
      border-radius: 10px;
      padding: 0.3em 0.4em;
      z-index: 8;
      transform-origin: right;
      justify-content: flex-start;
      translate: -18vw;
      top: 58vh;
    }

    @media screen and (min-width:576px) and (max-width: 650px) {
      .carroussel-choix {
        translate: -2vw;
      }
    }

    @media screen and (min-width:650.02px) and (max-width: 800px) {
      .carroussel-choix {
        translate: -12vw;
      }
    }

    @media screen and (min-width:800.02px) and (max-width: 1024px) {
      .carroussel-choix {
        translate: -15vw;
        gap: 10px;
      }
    }


    .bouton-arcade,
    .bouton-graphisme,
    .bouton-finissants {
      position: relative;
      /* conteneur pour que les icônes absolues se réfèrent à lui */
      height: auto;
      cursor: pointer;
      text-align: center;
    }

    .bouton-arcade>.arcade,
    .bouton-graphisme>.jour-terre,
    .bouton-finissants>.finissants {
      font-size: clamp(0.6rem, 1vw, 1.44rem);
      /* taille min 1rem, idéale 2vw, max x-large */
      margin: 0;
      padding: 0.2vh 2vw;
    }

    .carroussel-choix div p {
      margin: 0;
      display: inline-block;
      width: -webkit-fill-available;
      height: 5vh;
      white-space: nowrap;
    }


    /* Icônes devant le bouton et descendues (par défaut pour manette et student) */
    .bouton-finissants .student {
      position: absolute;
      top: 1%;
      left: -10%;
      transform: translateY(19px);
      z-index: 2;

      width: 40px;
      /* taille fixe beaucoup plus petite */
      max-width: 40px;
      /* limite vraiment la grandeur */
      height: auto;
      object-fit: contain;
    }

    .bouton-arcade .manette {
      position: absolute;
      top: -3%;
      left: -5%;
      transform: translateY(19px);
      z-index: 2;

      width: 40px;
      /* taille fixe beaucoup plus petite */
      max-width: 40px;
      /* limite vraiment la grandeur */
      height: auto;
      object-fit: contain;
    }

    .bouton-graphisme .tree {
      position: absolute;
      top: 1%;
      left: -9%;
      transform: translateY(19px);
      z-index: 2;

      width: 40px;
      /* taille fixe beaucoup plus petite */
      max-width: 40px;
      /* limite vraiment la grandeur */
      height: auto;
      object-fit: contain;
    }

    .image-wrap {
      filter: brightness(0.9), drop-shadow(0px 0px 0 rgba(0, 0, 0, 0));
		will-change: filter;
    }


    /****************************************** CSS Section Accroche Tablette ***************************************************/

    .accroche {
      width: 45vw;
      font-size: 3.5vw;
      font-family: var(--title-font);

      background: linear-gradient(90deg,
          #7D77D4 0%,
          #2FC7BF 35%,
          #EECC7F 80%,
          #7D77D4 100%);

      background-size: 200% auto;
      color: #000;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: anim-accroche 3s linear infinite;
      letter-spacing: var(--title-letter-spacing);
    }

    .numeration {

      color: #606060;
      font-family: var(--title-font);

      writing-mode: vertical-rl;
      text-orientation: upright;
      white-space: nowrap;
      display: inline-block;
      transform-origin: center;
      font-size: 11px;
      box-sizing: border-box;
      align-self: center;
      text-transform: uppercase;
      overflow: hidden;
      letter-spacing: 15px;
      margin: 0px;
      padding-top: 15px;
      padding-right: 10px;
    }

    @media screen and (min-width: 768px) {
      .numeration {
        letter-spacing: 19px;
      }
    }

    @media screen and (min-width: 900px) {
      .numeration {
        letter-spacing: 24px;
      }
    }

    .ligne-parallele {
      position: relative;
      width: 28px;
      height: 30vh;
      margin: 0;
      align-self: center;
      pointer-events: none;
      padding: 2em 0;
      height: -webkit-fill-available;
    }

    .ligne-parallele::before,
    .ligne-parallele::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--font-color);
      opacity: 0.85;
    }

    .ligne-parallele::before {
      left: 4px;
      background: linear-gradient(#222 0%,
          #404040 10.1%,
          #505050 21.63%,
          #5A5A5A 32.21%,
          #A4A4A4 84.13%,
          #222 100%);
    }

    .ligne-parallele::after {
      left: 18px;
      background: linear-gradient(#222 0%,
          #404040 10.1%,
          #505050 21.63%,
          #5A5A5A 32.21%,
          #A4A4A4 84.13%,
          #222 100%);
    }


    @keyframes anim-accroche {
      to {
        background-position: 200% center;
      }
    }

    .accroche-conteneur {
      padding: 25vw 0;
      padding-left: 1em;
      display: flex;
      justify-content: center;
    }

    /******************************** CSS Section Projets Populaire Desktop ********************************************/

    .projets-populaire {
      margin-top: 5rem;
      padding-top: 0;
      position: relative;
    }

    .projets-populaire>h1,
    .projets-populaire p,
    .boutonRefresh {
      justify-self: center;
    }

    .projets-populaire>p {
      width: 40%;
    }

    .boutonRefresh.loading {
      animation: rotate 1s infinite linear;
    }

    .boutonRefresh:hover {
      cursor: pointer;
    }

    .projets {
      display: flex;
      justify-content: center;
      gap: 5vw;
      margin-top: 5vh;
      flex-wrap: wrap;
      padding: 0 5vw;
    }

    .projets>p {
      width: 25%;
      font-size: small;
    }

    .projets-populaire h1 {
      margin-bottom: 8vh;
    }

    .projet-populaire-arcade,
    .projet-populaire-finissant,
    .projet-populaire-jour-terre {
      display: grid;
      grid-template-rows: auto auto 1fr;
      grid-template-columns: repeat(3, 1fr);
      min-width: auto;
      width: 18vw;
      min-width: 250px;
      max-width: 600px;
      margin: 0;
      margin-top: 0;
      border: 2px solid var(--font-color);
      max-width: none;
      max-height: none;
      height: 60vh;
    }

    .projet-populaire-arcade {
      box-shadow: 12px 12px 0px rgb(14, 11, 72);
      animation: cardFloat 3s ease-in-out infinite;
    }

    .projet-populaire-jour-terre {
      box-shadow: 12px 12px 0px rgb(9, 45, 50);
      animation: cardFloat 5s ease-in-out infinite;
    }

    .projet-populaire-finissant {
      box-shadow: 12px 12px 0px rgb(68, 56, 7);
      animation: cardFloat2 4s ease-in-out infinite;
    }

    .projet-populaire-arcade:hover,
    .projet-populaire-finissant:hover,
    .projet-populaire-jour-terre:hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-radius 0.3s ease;
    }

    .projet-populaire-arcade>.titre,
    .projet-populaire-jour-terre>.titre,
    .projet-populaire-finissant>.titre {
      font-size: 1vw;
      align-content: center;
      text-align: justify;
      padding-left: 1vw;
    }

    .image-populaire-arcade,
    .image-populaire-jour-terre,
    .image-populaire-finissants,
    .partenaires>img {
      overflow: hidden;
      height: auto;
      border-top: 2px solid var(--font-color);
    }

    .projet-populaire-arcade:hover {
      transform: translateY(-10px);
      box-shadow: 16px 16px 0px rgb(74, 66, 222);
      color: thistle;
      border-radius: 15px;
    }

    .projet-populaire-arcade:hover img,
    .projet-populaire-jour-terre:hover img,
    .projet-populaire-finissant:hover img {
      border-bottom-right-radius: 13px;
      border-bottom-left-radius: 13px;
    }

    .projet-populaire-arcade:hover>.titre,
    .projet-populaire-jour-terre:hover>.titre,
    .projet-populaire-finissant:hover>.titre {
      border-top-left-radius: 13px;
    }

    .projet-populaire-arcade:hover>.bouton,
    .projet-populaire-jour-terre:hover>.bouton,
    .projet-populaire-finissant:hover>.bouton {
      border-top-right-radius: 13px;
    }

    .projet-populaire-jour-terre:hover {
      transform: translateY(-10px);
      box-shadow: 16px 16px 0px rgb(31, 173, 195);
      color: thistle;
      border-radius: 15px;
    }

    .projet-populaire-finissant:hover {
      transform: translateY(-10px);
      box-shadow: 16px 16px 0px rgb(197, 158, 6);
      color: thistle;
      border-radius: 15px;
    }

    .boutonRefresh {
      margin: 0 auto;
    }

    .boutonRefresh.loading {
      animation: none;
    }

    .boutonRefresh:hover {
      cursor: pointer;
    }

    .boutonRefresh img {
      width: 30px;
      height: 30px;
      object-fit: contain;
    }



    /*************************************** CSS Section À Propos Tablette ******************************************************/

    .infos-a-propos {
      display: flex;
      width: 67vw;
      gap: 2vw;
    }

    .infos-a-propos>* {
      width: 30%;
    }



    /**************************** CSS Section Projets Aléatoire Tablette ********************************/
    .projets .titre {
      font-size: 2vw;
    }

    .projets a {
      align-self: center;
    }
  }

  /************************************* CSS Desktop *************************************************/
  @media screen and (min-width: 1367px) {
    body {
      background: linear-gradient(180deg, #1B1B1B 0%, #2B2B2B 44.23%, #323232 77.88%, #1B1B1B 100%);
      background-attachment: fixed;
      background-size: cover;
    }

    .border {
      position: fixed;
      background: var(--border-color-side);
      z-index: 9999;
    }

    .border.gauche {
      top: 0;
      left: 3em;
      width: 1px;
      height: 100%;
    }

    .border.droite {
      top: 0;
      right: 3em;
      width: 1px;
      height: 100%;
    }

    /******************************** CSS Section Carroussel Desktop **************************************************/
    .carroussel {
      position: relative;
      /*margin: 30px 0 0 0; top 50px, left 5vw pour le décalage vers la gauche */
      padding: 30px 0 0 0;
      border-top: none;
      width: 100%;
      background-size: 40px;
    }

    .image-wrap {
      position: relative;
      width: 100%;
      height: 70vh;
      filter: drop-shadow(15px -15px 0 rgba(64, 50, 255, 0.9)) drop-shadow(15px -15px 0 rgba(0, 151, 143, 0.9)) drop-shadow(15px -15px 0 rgba(194, 135, 8, 0.9));
      width: 80vw;
      margin: 45px 0 0 0;
      align-self: center;
    }

    #image-carroussel {
      display: block;
      width: 100%;
      height: 100%;
      justify-self: center;
      clip-path: polygon(84% 0, 100% 33%, 100% 100%, 0 100%, 0 0);
      object-fit: cover;
    }

    .image-titre {
      width: 30%;
      position: absolute;
      top: 5%;
      left: 10%;
      background-color: var(--bouton-projet-arcade-color);
      padding: 1.5rem;
    }

    .image-wrap img {
      width: 100%;
      height: auto;
      object-fit: cover;
      /* base colored drop-shadows with slightly reduced opacity */
      filter: drop-shadow(15px -15px 0 rgba(64, 50, 255, 0.8)) drop-shadow(15px -15px 0 rgba(0, 151, 143, 0.8)) drop-shadow(15px -15px 0 rgba(194, 135, 8, 0.8));
      position: relative;
      z-index: 1;
      /* l'image derrière */
    }

    .arcade-details {
      position: absolute;
      bottom: 0;
      top: 40%;
      left: 13%;
      width: 40vw;
      min-width: 180px;
      height: 20vh;
      background-color: rgba(26, 26, 26, 0.687);
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      padding: 10px;
      transform: translateY(160%);
      opacity: 0;
      pointer-events: none;
      /* ESSENTIEL pour ne pas bloquer les boutons */
      transition: opacity 0.4s ease, transform 0.4s ease;
      overflow: hidden;
      z-index: 2;
      opacity: 1;
      transform: translateY(13vh);
      justify-self: auto;
      margin: 0;
    }

    .bouton-arcade:hover .arcade-details {
      background: linear-gradient(1deg, #086ec2 10%, transparent 90%);
    }

    .bouton-graphisme:hover .arcade-details {
      background: linear-gradient(1deg, #3dc208 10%, transparent 90%);
    }

    .bouton-finissants:hover .arcade-details {
      background: linear-gradient(1deg, #c28708 10%, transparent 90%);
    }

    .arcade-details>.sous-titre-carroussel {
      width: 50%;
      margin: 0;
      font-size: 2.8vw;
      width: auto;
      padding: 3vh 0 0 2vw;
    }

    .arcade-details>.description {
      width: 80%;
      margin: 0;
      line-height: 1.1;
      font-size: clamp(0.6rem, 0.9vw, 300px);
      white-space: normal;
      text-align: left;
      padding: 0 0 10vh 2vw;
    }


    /* Affichage uniquement quand on survole les boutons */
    .carroussel-choix:hover+.arcade-details {
      display: flex !important;
    }



    /******************************************* Carroussel Choix *********************************** */
    #image-carroussel {
      clip-path: polygon(84% 0, 100% 33%, 100% 100%, 0 100%, 0 0);
      border-bottom: none;
    }

    .carroussel {
      padding: 5vh 0;
    }


    .carroussel-choix {
      display: flex;
      justify-content: center;
      width: 40vw;
      top: 83%;
      left: 34%;
      border-radius: 10px;
      padding: 0.3em 0.4em;
      z-index: 8;
    }

    .bouton-arcade,
    .bouton-graphisme,
    .bouton-finissants {
      position: relative;
      /* conteneur pour que les icônes absolues se réfèrent à lui */
      height: auto;
      cursor: pointer;
      text-align: center;
    }

    .bouton-arcade>.arcade,
    .bouton-graphisme>.jour-terre,
    .bouton-finissants>.finissants {
      font-size: clamp(0.6rem, 1vw, 1.44rem);
      /* taille min 1rem, idéale 2vw, max x-large */
      margin: 0;
      padding: 0.2vh 2vw;
    }

    .carroussel-choix div p {
      margin: 0;
      display: inline-block;
      width: -webkit-fill-available;
      height: 5vh;
      white-space: nowrap;
    }


    /* Icônes devant le bouton et descendues (par défaut pour manette et student) */
    .bouton-finissants .student {
      position: absolute;
      top: 10%;
      left: -10%;
      transform: translateY(19px);
      z-index: 2;

      width: 50px;
      /* taille fixe beaucoup plus petite */
      max-width: 50px;
      /* limite vraiment la grandeur */
      height: auto;
      object-fit: contain;
    }

    .bouton-arcade .manette {
      position: absolute;
      top: 10%;
      left: -5%;
      transform: translateY(19px);
      z-index: 2;

      width: 50px;
      /* taille fixe beaucoup plus petite */
      max-width: 50px;
      /* limite vraiment la grandeur */
      height: auto;
      object-fit: contain;
    }

    .bouton-graphisme .tree {
      position: absolute;
      top: 10%;
      left: -9%;
      transform: translateY(19px);
      z-index: 2;

      width: 50px;
      /* taille fixe beaucoup plus petite */
      max-width: 50px;
      /* limite vraiment la grandeur */
      height: auto;
      object-fit: contain;
    }



    /******************************* CSS Section Accroche Desktop ***************************************/

    .accroche {
      width: 800px;
      max-height: 209px;
      font-size: clamp(1rem, 3vw, 2rem);
      font-family: var(--title-font);

      background: linear-gradient(90deg,
          #7D77D4 0%,
          #2FC7BF 35%,
          #EECC7F 80%,
          #7D77D4 100%);

      background-size: 200% auto;
      color: #000;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: anim-accroche 3s linear infinite;
    }

    .numeration {
      display: none;
    }

    .numeration-short {
      color: transparent;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      display: flex;
      flex-direction: column-reverse;

      content: "123";
      color: #606060;
      font-family: var(--title-font);

      writing-mode: vertical-rl;
      text-orientation: upright;
      white-space: nowrap;
      display: inline-block;
      transform-origin: center;
      font-size: 12px;
      box-sizing: border-box;
      align-self: center;
      text-transform: uppercase;
      overflow: hidden;
      letter-spacing: 24px;
      margin: 0px;
      margin-top: 20px;
    }

    .ligne-parallele {
      position: relative;
      width: 28px;
      height: -webkit-fill-available;
      margin: 0;
      align-self: center;
      pointer-events: none;
      margin-left: 7px;
    }

    .ligne-parallele::before,
    .ligne-parallele::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--font-color);
      opacity: 0.85;
    }

    .ligne-parallele::before {
      left: 4px;
      background: linear-gradient(#222 0%,
          #404040 10.1%,
          #505050 21.63%,
          #5A5A5A 32.21%,
          #A4A4A4 84.13%,
          #222 100%);
    }

    .ligne-parallele::after {
      left: 18px;
      background: linear-gradient(#222 0%,
          #404040 10.1%,
          #505050 21.63%,
          #5A5A5A 32.21%,
          #A4A4A4 84.13%,
          #222 100%);
    }


    @keyframes anim-accroche {
      to {
        background-position: 200% center;
      }
    }

    .accroche-conteneur {
      padding: 14vw 0;
      padding-left: 1em;
      display: flex;
      justify-content: center;
    }

    /********************************* CSS Section À Propos Desktop ****************************************************/

    .a-propos-background {
      display: flex;
      justify-content: center;
      padding: 2em 0em;
      /* width: 100%; */
      border-bottom: 1px solid var(--border-color);
      border-top: 1px solid var(--border-color);
      margin: 0 3em;
      width: auto;
    }

    .a-propos {
      justify-items: center;
      padding: 2rem;
      height: 300px;
      max-height: 600px;
      display: flex;
      justify-content: center;
      max-width: none;
    }

    .carroussel-apropos {
      --size: clamp(220px, 25vw, 440px);
      --scale: calc(var(--size) / 300);

      right: 20vw;
      transform-origin: center center;
      transform: scale(var(--scale));
    }

    .carroussel-apropos {
      position: relative;
      /* width: 300px; */
      height: 300px;
      transform-style: preserve-3d;
      perspective: 1000px;
      margin-right: 0;
      transform-origin: center center;
      /* transform: translate(11vw, clamp(1px, 4vh, 300px)); */
      transform: scale(1.3);
      /* top: 0; */
      translate: 29vw 2vh;
    }

    @media screen and (min-width: 1367px) and (max-width: 1400px) {
      .carroussel-apropos {
        transform: scale(1.2);
      }
    }

    @media screen and (min-width: 1400.02px) and (max-width: 1600px) {
      .carroussel-apropos {
        transform: scale(1.3);
      }

    }

    .carroussel-apropos img {
      height: 40vh;
      transform: scale(4);
      width: 30vw;
      border: 2px solid var(--border-color);
      top: 5%;
      z-index: 1;
    }

    .a-propos>.sous-titre {
      font-size: 3.7vw;
      font-family: var(--title-font);
      margin: 0;
      white-space: nowrap;
      align-self: center;
      text-align: center;
      translate: 0 2vh;
    }

    .a-propos>.description {
      width: 33vw;
      font-size: clamp(15px, 1vw, 25px);
      justify-items: end;
      text-align: left;
      /* margin-left: 33vw; */
      margin-top: -16rem;
      padding-left: none;
      border: none;
      background-color: #191717a1;
      padding-right: 34vw;
      height: 30vh;
      display: flex;
      justify-content: center;
      align-items: center;
      /* padding-left: 10vh; */
      /* margin: 10vh; */
      padding-left: 5vh;
      font-style: italic;
      height: 220px;
      border-radius: 15px;
      /*background-image: linear-gradient(11deg, #1b1818, transparent 70%);*/
    }

    .carroussel-apropos img {
      position: absolute;
      top: 20%;
      left: 50%;
      width: 220px;
      height: 220px;
      object-fit: cover;
      border-radius: 12px;
      transform-style: preserve-3d;
      transform-origin: center center -180px;
      animation: spin 10s linear infinite;
      border: 2px solid var(--border-color);
    }

    .infos-a-propos>* {
      background-color: #1e1e1e7a;
      color: var(--font-color);
      margin-top: 20px;
      width: 17.4vw;
    }

    .infos-a-propos {
      display: flex;
      justify-content: center;
      gap: 1vw;
    }




    /******************************** CSS Section Projets Populaire Desktop ********************************************/

    .projets-populaire {
      margin-top: 5rem;
      padding-top: 0;
      position: relative;
    }

    .projets-populaire>h1,
    .projets-populaire p,
    .boutonRefresh {
      justify-self: center;
    }

    .projets-populaire>p {
      width: 40%;
    }

    .boutonRefresh.loading {
      animation: rotate 1s infinite linear;
    }

    .boutonRefresh:hover {
      cursor: pointer;
    }

    .projets {
      display: flex;
      justify-content: center;
      gap: 5vw;
      margin-top: 5vh;
    }

    .projets>p {
      width: 25%;
      font-size: small;
    }

    .projets-populaire h1 {
      margin-bottom: 8vh;
    }

    .projet-populaire-arcade,
    .projet-populaire-finissant,
    .projet-populaire-jour-terre {
      display: grid;
      grid-template-rows: auto auto 1fr;
      grid-template-columns: repeat(3, 1fr);
      min-width: auto;
      width: 18vw;
      max-width: 600px;
      margin: 0;
      margin-top: 0;
      border: 2px solid var(--font-color);
      max-width: none;
      max-height: none;
      height: 60vh;
    }

    .projet-populaire-arcade {
      box-shadow: 12px 12px 0px rgb(14, 11, 72);
      animation: cardFloat 3s ease-in-out infinite;
    }

    .projet-populaire-jour-terre {
      box-shadow: 12px 12px 0px rgb(9, 45, 50);
      animation: cardFloat 5s ease-in-out infinite;
    }

    .projet-populaire-finissant {
      box-shadow: 12px 12px 0px rgb(68, 56, 7);
      animation: cardFloat2 4s ease-in-out infinite;
    }

    .projet-populaire-arcade:hover,
    .projet-populaire-finissant:hover,
    .projet-populaire-jour-terre:hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, border-radius 0.3s ease;
    }

    .projet-populaire-arcade>.titre,
    .projet-populaire-jour-terre>.titre,
    .projet-populaire-finissant>.titre {
      font-size: 1vw;
      align-content: center;
      text-align: justify;
      padding-left: 1vw;
    }

    .image-populaire-arcade,
    .image-populaire-jour-terre,
    .image-populaire-finissants,
    .partenaires>img {
      overflow: hidden;
      height: auto;
      border-top: 2px solid var(--font-color);
    }

    .projet-populaire-arcade:hover {
      transform: translateY(-10px);
      box-shadow: 16px 16px 0px rgb(74, 66, 222);
      color: thistle;
      border-radius: 15px;
    }

    .projet-populaire-arcade:hover img,
    .projet-populaire-jour-terre:hover img,
    .projet-populaire-finissant:hover img {
      border-bottom-right-radius: 13px;
      border-bottom-left-radius: 13px;
    }

    .projet-populaire-arcade:hover>.titre,
    .projet-populaire-jour-terre:hover>.titre,
    .projet-populaire-finissant:hover>.titre {
      border-top-left-radius: 13px;
    }

    .projet-populaire-arcade:hover>.bouton,
    .projet-populaire-jour-terre:hover>.bouton,
    .projet-populaire-finissant:hover>.bouton {
      border-top-right-radius: 13px;
    }

    .projet-populaire-jour-terre:hover {
      transform: translateY(-10px);
      box-shadow: 16px 16px 0px rgb(5, 190, 181);
      color: thistle;
      border-radius: 15px;
    }

    .projet-populaire-finissant:hover {
      transform: translateY(-10px);
      box-shadow: 16px 16px 0px rgb(197, 158, 6);
      color: thistle;
      border-radius: 15px;
    }

    @keyframes cardFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }

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

    @keyframes cardFloat2 {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-15px);
      }

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

    .boutonRefresh {
      position: absolute;
      top: -1vh;
      top: -1vh;
      padding: 0.5em;
      border-radius: 40px;
      width: 30px;
      translate: 900%;
    }

    .boutonRefresh:hover {
      cursor: pointer;
    }

    .boutonRefresh img {
      width: 30px;
      height: 30px;
      object-fit: contain;
    }

    .boutonRefresh span {
      display: none;
    }

    /*************************** CSS Section Partenaires Desktop***************************************/
    .partenaires {
      border-top: 1px solid var(--border-color-special);
      border-bottom: 1px solid var(--border-color-special);
      padding: 3rem;
    }

    .partenaires>img {
      display: block;
      flex-direction: row;
      justify-self: center;
      padding: 0.5rem;
    }

    /******************************** CSS Section Équipe Desktop********************************************/

    .equipe {
      margin-top: 3rem;
      margin-left: 3em;
      margin-right: 3em;
      width: auto;
    }

    .cartes {
      display: flex;
      flex-wrap: wrap;
      gap: 60px;
    }

    .carte-wrapper,
    .carte-wrapper-2,
    .carte-wrapper-3,
    .carte-wrapper-4,
    .carte-wrapper-5 {
      position: relative;
      /* anchor for the hover movement */
      width: 250px;
      height: auto;
    }

    .carte-equipe,
    .carte-equipe-2,
    .carte-equipe-3,
    .carte-equipe-4,
    .carte-equipe-5 {
      position: relative;
      z-index: 1;
      transition:
        transform 0.4s ease,
        z-index 0s;
      transform-origin: center;
    }

    /* Smooth hover transformation */
    .carte-wrapper:hover .carte-equipe,
    .carte-wrapper-2:hover .carte-equipe-2,
    .carte-wrapper-3:hover .carte-equipe-3,
    .carte-wrapper-4:hover .carte-equipe-4 {
      transform: scale(1.05) translateY(-10px);
      z-index: 9999;
      /* floats above everything */
    }

    .carte-wrapper-5:hover .carte-equipe-5 {
      transform: scale(1.05) translateY(-10px);
      z-index: 9999;
      /* floats above everything */
    }

  }

  .boutonRefresh {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .no-click {
    pointer-events: none;
  }