:root {
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --star-color: #f1c40f;
    --bg-color: #f4f7f6;
    --card-bg: #ffffff;
    --twc-primaryFromGradient: 228.89999999999998 100% 20.2%;
    --twc-primaryToGradient: 223.89999999999998 100% 31.4%;
    --twc-background: 0 0% 100%;
    --twc-secondary: 46.89999999999998 95.9% 47.6%;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.27);
    ---tw-ring-shadow: 0 0 #0000;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--card-bg);
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    margin: 0;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 100%;
    max-width: 600px;
}


/* Bandeau top */

.text-background {
    --tw-text-opacity: 1;
    color: hsl(var(--twc-background) / var(--twc-background-opacity, var(--tw-text-opacity)));
    font-family: 'Metropolis Medium';
}

.bg-gradient-primary {
    background-image: linear-gradient(in oklch to right, hsl(var(--twc-primaryFromGradient)), hsl(var(--twc-primaryToGradient)));
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: 20px;
}

.w100 {
    width: 100%;
}

.text-secondary {
    --tw-text-opacity: 1;
    color: hsl(var(--twc-secondary) / var(--twc-secondary-opacity, var(--tw-text-opacity)));
}

.text-display-1 {
    font-size: 3.7rem;
}

/* --- Carte Principale --- */
.card {
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
    border-color : rgb(161 161 161 / 18%);
}

h1 { margin-top: 0; font-size: 1.5rem; }
h2 { font-size: 1.2rem; margin-bottom: 15px; color: #7f8c8d; }


.results-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    min-height: 80px; 
}

.row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ball {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: popIn 0.3s ease-out;
    font-family: 'Metropolis Bold';
}

.highlight{
    position: relative;
    z-index: 1;
}

.highlight::before {
    content: '';
    position: absolute;
    top: 116%;
    right: -1%;
    left: -1%;
    height: 28%;
    background-color: #001367;
    z-index: -1;
}

/* Couleurs des boules */
.ball-main {
    background: radial-gradient(circle at 30% 30%, #001367, #001367);
}
.ball-start {
    background: radial-gradient(circle at 30% 30%, #ffffff, #f5f5f5);
}

.ball-star {
    background: radial-gradient(circle at 30% 30%, #f7dc6f, #d4ac0d);
    color: #4e4e4e; /* Contraste pour le jaune */
    border: 1px solid #b7950b;
}

/* --- Boutons --- */
button {
    cursor: pointer;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    transition: transform 0.1s, opacity 0.2s;
}

button:active { transform: scale(0.98); }

.btn-generate {
    background-color: white;
    color: #001367;
    padding: 10px 16px;
    max-width: 300px;
    font-family: "Metropolis Medium";
    font-size: 1em;
    box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.15);

}
.btn-generate:hover { 
    box-shadow: 0px 4px 12px -2px rgba(0,0,0,0.25);
}

.btn-histo {
    background-color: white;
    color: #001367;
    padding: 10px 16px;
    max-width: 300px;
    font-family: "Metropolis Medium";
    font-size: 1em;
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.15);

}
.btn-histo:hover { 
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.25);
}

.btn-clear {
    background-color: #e74c3c;
    color: white;
    font-size: 0.9rem;
    padding: 8px 16px;
}
.btn-clear:hover { background-color: #c0392b; }

/* --- Historique --- */
.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 2px solid #ecf0f1;
    padding-bottom: 10px;
}

#history-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 400px;
    overflow-y: auto;
}

.history-item {
    /*background: #f8f9f9;*/
    border-bottom: 1px solid #ecf0f1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history-item:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.history-date {
    font-size: 0.8rem;
    color: #95a5a6;
}

.history-numbers {
    display: flex;
    gap: 5px;
}

.history-ball {
    width: 25px;
    height: 25px;
    font-size: 0.8rem;
}

.euro-star {
    position: relative;
    width: 45px;
    height: 45px;
    animation: popIn 0.3s ease-out;
}

.euro-star svg {
    width: 100%;
    height: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.euro-star img {
    
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.15));
}

.euro-star span {
    position: absolute;
    top: 28%;
    left: 63%;
    font-size: 1em;
    font-family: "Metropolis Bold";
    color: white;
}

.euro-star div {
    position: absolute;
    top: 29%;
    font-size: 1em;
    font-family: "Metropolis Bold";
    color: white;
}

.euro-star.s {
    position: relative;
    width: 25px;
    height: 25px;
    z-index: 0;
    animation: none!important;
}

.euro-star.s div {
    position: absolute;
    top: 26%;
    font-size: 0.7em;
    font-family: "Metropolis Bold";
    color: white;
    z-index: 1;
}

.jackpot-wrapper {
  min-height: 60px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.jackpot-skeleton {
  width: 400px;
  height: 60px;
  margin: 5px 0px;
  border-radius: 999px;
  background-color: rgb(0, 28, 138);
  position: relative;
  overflow: hidden;
}

.jackpot-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 120%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    #b7950bcc,
    transparent
  );
  animation: shimmer 1.8s infinite;
}

@keyframes shimmer {
  100% {
    left: 120%;
  }
}

.jackpot-value {
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.jackpot-value:not(.hidden) {
  opacity: 1;
}

.hidden {
  display: none;
}


@media screen and (max-width: 1001px) {
    .header{
        flex-direction: column!important;
    }
    .euromir-fdj{
        order: 3;
    }
    .date-tirage-info{
        order: 1;
        min-width: 0px!important;
    }
    .espace-vide{
        order: 2;
    }
    .montant {
        font-size: 3rem!important;
    }
    .jackpot-skeleton {
    margin: 0px 0px!important;
    width: 340px;
    }
    .jackpot-wrapper{
        margin: 6px 0px;
    }

}


/* --- Animation --- */
@keyframes popIn {
    0% { opacity: 0; }
    /*80% { transform: scale(1.1); }*/
    100% { opacity: 1; }
}

/*** LA POLICE WUWUWUWUWUWUWUWUWU POLICCEEEEEEEE BOUGEZ PLUS ***/


@font-face {
    font-family: 'Metropolis Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Regular'),url('fonts/Metropolis-Regular.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Regular Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Regular Italic'),url('fonts/Metropolis-RegularItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Extra Light';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Light'),url('fonts/Metropolis-ExtraLight.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Light';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Light'),url('fonts/Metropolis-Light.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Thin'),url('fonts/Metropolis-Thin.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Extra Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Light Italic'),url('fonts/Metropolis-ExtraLightItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Light Italic'),url('fonts/Metropolis-LightItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Thin Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Thin Italic'),url('fonts/Metropolis-ThinItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Medium'),url('fonts/Metropolis-Medium.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Semi Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Semi Bold'),url('fonts/Metropolis-SemiBold.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Bold'),url('fonts/Metropolis-Bold.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Bold Italic'),url('fonts/Metropolis-BoldItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Medium Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Medium Italic'),url('fonts/Metropolis-MediumItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Semi Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Semi Bold Italic'),url('fonts/Metropolis-SemiBoldItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Extra Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Bold'),url('fonts/Metropolis-ExtraBold.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Extra Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Extra Bold Italic'),url('fonts/Metropolis-ExtraBoldItalic.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Black';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Black'),url('fonts/Metropolis-Black.otf') format('opentype');
    }
    

    @font-face {
    font-family: 'Metropolis Black Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Metropolis Black Italic'),url('fonts/Metropolis-BlackItalic.otf') format('opentype');
    }