<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* ====================================
   STYLES DU HEADER - INSCRIPTION DISTANCIEL
   ==================================== */

/* ------ ANIMATIONS DU HEADER ------ */

/* Animations commentÃ©es dans le fichier original - conservÃ©es pour rÃ©fÃ©rence future */
/*
@keyframes slideFromLeft {
    0% {
        transform: translateX(-5%);
        opacity: 0.7;
    }
    100% {
        transform: translateX(-20px);
        opacity: 1;
    }
}

@keyframes slideFromRight {
    0% {
        transform: translateX(5%);
        opacity: 0.7;
    }
    100% {
        transform: translateX(20px);
        opacity: 1;
    }
}
*/

/* Animation de zoom pour le logo */
@keyframes zoom {
  0% {
    transform: scale(1);
    opacity: 0.1;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
  }
}

/* Animation d'entrÃ©e pour les Ã©lÃ©ments du formulaire */
@keyframes slideIn {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ------ STYLES PRINCIPAUX DU HEADER ------ */

/* Conteneur principal du header */
header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  height: 200px;
  background-color: rgb(0, 0, 0);
  z-index: -1;
}

/* Images de fond animÃ©es - commentÃ©es dans le fichier original */
/*
.header-left, 
.header-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.header-left {
    left: 0;
    background-image: url('../../../thanks/assets/images/headerLeft.jpg');
    background-position: right center;
    animation: slideFromLeft 9s forwards;
}

.header-right {
    right: 0;
    background-image: url('../../../thanks/assets/images/headerRight.jpg');
    background-position: left center;
    animation: slideFromRight 9s forwards;
}
*/

/* ------ CONTENEUR ET LOGO ------ */

/* Conteneur du logo avec positionnement relatif */
.logo-container_distanciel {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Styles du logo avec animation de zoom */
.logo_distanciel {
  max-width: 250px;
  animation: zoom 9s forwards;
}

/* ------ DRAPEAUX FRANÃ‡AIS ------ */

/* Conteneur des drapeaux franÃ§ais */
.flags-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}

/* Style de base pour chaque drapeau */
.flag {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

/* Couleur bleue du drapeau franÃ§ais */
.flag-blue {
  background-color: #0055a4;
}

/* Couleur blanche du drapeau franÃ§ais */
.flag-white {
  background-color: #ffffff;
}

/* Couleur rouge du drapeau franÃ§ais */
.flag-red {
  background-color: #ef4135;
}

/* ------ RESPONSIVE DESIGN ------ */

/* Adaptation pour les Ã©crans moyens (tablettes) */
@media (max-width: 768px) {
  header {
    height: 180px;
    padding: 20px 0;
  }

  .logo_distanciel {
    max-width: 200px;
  }

  .flags-container {
    margin-top: 15px;
  }

  .flag {
    width: 12px;
    height: 12px;
  }
}

/* Adaptation pour les petits Ã©crans (mobiles) */
@media (max-width: 480px) {
  header {
    height: 150px;
    padding: 15px 0;
  }

  .logo_distanciel {
    max-width: 180px;
  }

  .flags-container {
    margin-top: 10px;
    gap: 8px;
  }

  .flag {
    width: 10px;
    height: 10px;
  }
}

/* ------ ACCESSIBILITÃ‰ ------ */

/* AmÃ©lioration de l'accessibilitÃ© pour les animations */
@media (prefers-reduced-motion: reduce) {
  .logo_distanciel {
    animation: none;
    transform: scale(1.4);
    opacity: 1;
  }

  /* DÃ©sactivation des animations pour les utilisateurs prÃ©fÃ©rant moins de mouvement */
  @keyframes zoom {
    0%,
    100% {
      transform: scale(1.4);
      opacity: 1;
    }
  }
}

/* ------ Ã‰TATS INTERACTIFS ------ */

/* Effet au survol du logo pour amÃ©liorer l'interactivitÃ© */
.logo_distanciel:hover {
  transform: scale(1.45);
  transition: transform 0.3s ease;
}

/* Effet au survol des drapeaux */
.flag:hover {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

/* ------ OPTIMISATIONS PERFORMANCES ------ */

/* Optimisation GPU pour les animations */
.logo_distanciel,
.flag {
  will-change: transform;
}

/* AmÃ©lioration du rendu des animations */
header {
  transform: translateZ(0);
  backface-visibility: hidden;
}
</pre></body></html>