/* BASE.CSS - Corrigé pour Cyrillink (05/10/2025)
   Titre h1 à 4em, images .menu-item à 700px, gap: 70px
   Image .logout-icon à 300px, .logout-footer dans le scroll
   Texte .menu-item span en doré, 1.5em, au-dessus
   Grossissement uniforme de .menu-item au survol
   header-container ajusté pour centrer h1 et positionner sms-gauge à droite
   Pas de media queries */
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

   @font-face {
       font-family: "HobbitonBrush";
       src: url("../fonts/hobbitonbrushhand.ttf") format("truetype");
       font-display: swap;
   }
   
   @font-face {
       font-family: 'Ringbearer';
       src: url('../fonts/RingbearerMedium-51mgZ.ttf') format('truetype');
       font-display: swap;
   }
   
   body {
       background-color: #000;
       background-image: url("../images/fond_xefi.jpg");
       background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;
       background-position: center;
       color: #fff;
       margin: 0;
       font-family: Arial, sans-serif;
   }
   
   .header-container {
       position: relative;
       display: flex;
       justify-content: center; /* Centre le contenu */
       align-items: center;
       margin: 40px 20px;
   }
   
   .main-title {
       font-family: "HobbitonBrush", sans-serif;
       font-size: 4em;
       font-weight: bold;
       text-align: center;
       color: #FFD700;
       margin: 0;
   }
   
   .sms-gauge {
       position: absolute;
       right: 20px; /* Position à droite avec marge */
       top: 50%;
       transform: translateY(-50%); /* Centre verticalement */
   }
   
   .sub-title {
       font-family: 'Ringbearer', 'HobbitonBrush', serif;
       font-size: 1.2em;
       text-align: center;
       color: #FFD700;
       margin: 10px 0 20px;
   }
   
   .menu-links {
       display: flex;
       justify-content: center;
       gap: 70px;
       margin-top: 120px;
   }
   
   .menu-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-decoration: none;
       font-family: 'Ringbearer', serif;
       font-size: 1.5em;
       color: #FFD700;
       text-shadow: 0 0 12px rgba(255, 215, 0, 0.9);
       transition: transform 0.3s ease, text-shadow 0.3s ease;
   }
   
   .menu-item span {
       margin-bottom: 10px;
   }
   
   .menu-item img {
       width: 100%;
       max-width: 700px;
       height: auto;
       object-fit: cover;
       border: 3px solid #FFD700;
       box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
       border-radius: 12px;
       transition: box-shadow 0.3s ease;
   }
   
   .menu-item:hover {
       transform: scale(1.02);
   }
   
   .menu-item:hover img {
       box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
   }
   
   .menu-item:hover span {
       text-shadow: 0 0 20px rgba(255, 215, 0, 1);
   }
   
   .logout-footer {
       position: relative;
       margin: 120px auto;
       text-align: center;
       z-index: 1000;
   }
   
   .logout-icon {
       display: inline-flex;
       align-items: center;
       text-decoration: none;
       transition: transform 0.3s ease;
   }
   
   .logout-icon img {
       width: 300px;
       height: auto;
       filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7));
       transition: transform 0.3s ease, filter 0.3s ease;
   }
   
   .logout-icon:hover {
       transform: scale(1.1);
   }
   
   .logout-icon:hover img {
       filter: drop-shadow(0 0 15px rgba(255, 255, 100, 1));
   }