/* ===== BODY ===== */

   html,
   body {
       height: 100%;
       margin: 0;
       padding: 0;
   }


   body {
       font-family: system-ui, Arial, sans-serif;
       background: #0f1724;
       color: #e6eef8;
       text-align: center;

       display: flex;
       flex-direction: column;
       align-items: center;
       height: 100vh;
       box-sizing: border-box;
   }

   /* ===== LOGO ===== */
   #logo {
       position: fixed;
       top: 10px;
       left: 10px;
       width: clamp(100px, 15vw, 150px);
       height: auto;
       z-index: 1000;
       filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.4));
   }

   @media (max-width: 600px) {
       #logo {
           top: 5px;
           left: 5px;
           width: 90px;
       }
   }

   .header .colonnes {
        grid-template-columns: 1fr 1fr 1fr;
   }

   .footer .colonnes {
        grid-template-columns: 1fr auto 1fr;
   }


   .header, .footer {
       max-height: 120px;
       
       flex: 0 0 auto;
       width: 100%;

       /* ===== GRILLE PRINCIPALE ===== */
       .colonnes {
           height: 100%;
           display: grid;

           .colonne {

               height: 100%;
               overflow: hidden;
               align-content: center;

               img {

                   max-height: 100%;
                   max-width: 100%;
                   background-color: white;
               }
           }
       }


       /* ===== COMPTE À REBOURS ===== */
       .countdown {
           background: #16233d;
           border-radius: 12px;
           padding: 15px;
           margin: auto;
           width: min(550px, 95vw);
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);



           .unit {
               display: inline-block;
               margin: 0 5px;
           }

           .value {
               font-size: 2em;
               font-weight: bold;
           }

           .label {
               display: block;
               font-size: 0.8em;
               color: #9fb4d8;
           }
       }

   }

   .center {
       flex: 1 1 auto;
       overflow: hidden;
       width: 100%;

       /* ===== GRILLE PRINCIPALE ===== */
       .colonnes {
           display: grid;
           grid-template-columns: 1fr minmax(auto, 1fr) 1fr;
           gap: 20px;
           box-sizing: border-box;
           align-items: stretch;
           height: 100%;
           width: 100%;

           .colonne {
               display: flex;
               flex-direction: column;
               background: #16233d;
               border-radius: 12px;
               box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
               margin: 15px;
               overflow: hidden;
           }
       }

       .agenda,
       .classement {
           padding: 15px;
       }

       /* ===== AFFICHE (fond transparent) ===== */
       .affiche {
           background: none !important;
           box-shadow: none !important;
           padding: 0;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .affiche img {
           max-width: 100%;
           max-height: 100%;
           border-radius: 12px;
           object-fit: contain;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
       }

       /* ===== SCROLL WRAPPER ===== */
       .scroll-wrapper {
           flex: 1;
           overflow: hidden;
           position: relative;
       }


       .scroll-wrapper>ul,
       ol {

           padding-inline-start: 0px;
           margin: 0px;
       }


       /* ===== LISTES ===== */
       li {
           background: rgba(255, 255, 255, 0.05);
           padding: 6px 10px;
           margin: 3px 0;
           border-radius: 6px;
           list-style: none;
       }

       .scrollrow {
           font-size: 1.2em;
           margin: 6px 0;
           transition: background 0.2s, transform 0.2s;
       }

       .scrollrow.current {
           background-color: orange;
           font-weight: bold;
           transform: scale(1.03);
       }

       /* ===== TOP 10 ===== */
       .classement li:first-child {
           color: gold;
           font-weight: bold;
       }

       .classement li:first-child::before {
           content: "🏆 ";
       }

       .classement li:nth-child(2) {
           color: silver;
           font-weight: bold;
       }

       .classement li:nth-child(2)::before {
           content: "🥈 ";
       }

       .classement li:nth-child(3) {
           color: #cd7f32;
           font-weight: bold;
       }

       .classement li:nth-child(3)::before {
           content: "🥉 ";
       }
   }



   /* ===== BARRE FIXE : DISTANCE ===== */
   .footer {
       background: #16233d;
       border-top: 1px solid rgba(255, 255, 255, 0.15);
   }


   /* ===== BARRE FIXE : DISTANCE ===== */
   #totalDistanceWrapper {
       width: 100%;
       text-align: center;
       padding: 12px 0;
   }

   #totalDistance {
       font-size: 3em;
       margin: 0px;
       font-weight: bold;
       color: #9fb4d8;
   }

   /* ===== QR CODE ===== */
   .inscription {
       position: fixed;
       bottom: 10px;
       /* juste au-dessus de la barre */
       right: 10px;
       z-index: 1100;
   }

   .inscription p {
       margin: 0%;
   }

   .inscription img {
       width: clamp(60px, 10vw, 90px);
       height: auto;
       cursor: pointer;
       transition: transform 0.3s ease;
   }

   .inscription img:hover {
       transform: scale(1.1);
   }

  @media (max-width: 1000px) {

  body {
    overflow: visible;
  }

  /* --- HEADER --- */
  .header, .footer {
    
    max-height: none;
.colonnes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
    .colonne {
       max-height: 90px;
    }
  } 
  .countdown {
    width: 90%;
    padding: 10px;
  }

  .center {
    overflow: visible;
  }

  /* --- CONTENU CENTRAL --- */
  .center .colonnes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
  }

  .center .colonne {
    width: 90%;
    max-width: 500px;
    margin: 0 auto;
  }

  .center .affiche {
    background: none;
    box-shadow: none;
  }

  .center .affiche img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  #totalDistance {
    font-size: 2em;
  }

}