body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e3f2fd;
    margin: 0;
    overflow: hidden;
}

.container {
    display: flex;
    align-items: center;
}

.label {
    position: absolute;
    font-size: 4.5rem;
    color: white;

    font-family: Arial, sans-serif;
    text-align: center;
    width: 100%;
}

.summer-label { 
    top: 30%; /* Positionné au-dessus de l'heure d'été */
    left: 70%; 
    transform: translate(-50%, -50%); 
}

.winter-label { 
    top: 30%; /* Positionné au-dessus de l'heure d'hiver */
    left: 28%; 
    transform: translate(-50%, -50%); 
}
.clock {
    position: relative;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    border: 50px solid silver;
    background: linear-gradient(to right, 
                #003366 0%,    /* Bleu très foncé */
                #004e92 15%,   /* Bleu métallisé plus intense */
                #006bb3 30%,   /* Bleu métallique clair */
                #3388cc 40%,   /* Bleu plus clair */
                #66aaff 44%,   /* Bleu lumineux */
                #ff7f00 60%,   /* Orange vif et lumineux commence ici, au milieu */
                #cc6600 65%,   /* Orange légèrement plus doux */
                #e65c00 80%,   /* Orange métallique */
                #ff5722 90%,   /* Orange rougeâtre */
                #ff3d00 100%); /* Orange rouge vif */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 0 60px rgba(0, 0, 0, 0.5);  /* Halo lumineux et sombre */
    filter: saturate(1.5) brightness(1.2);  /* Augmente la saturation et la brillance */
    background-size: 150% 150%; /* Crée un dégradé fluide et étendu */
    background-position: center; /* Positionne le dégradé */
    border: 10px solid #d0d0d0; /* Bordure un peu plus claire pour l'effet métallique */
    background-blur: 10px; /* Applique un flou léger pour lisser les transitions */
    z-index: 1;
}

/* Ajout des traits (rayons) autour de l'horloge */
.clock::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 10%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}



/* Ajout de cercles concentriques à l'intérieur de l'horloge */
.clock .inner-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
}

.clock .inner-circle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid #fff;
    transform: translate(-50%, -50%);
}

/* Texture de bokeh derrière l'horloge */
.clock::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('path_to_your_bokeh_texture.png'); /* Texture de bokeh légère pour le fond */
    background-size: cover;
    filter: blur(20px); /* Applique un flou pour l'effet bokeh */
    opacity: 0.4; /* Opacité réduite pour ne pas gêner l'horloge */
    z-index: -1; /* S'assure que l'image de fond est derrière l'horloge */
}

.time {
    position: absolute;
    font-size: 7rem;
    color: white;

    font-family: Arial, sans-serif;
}

.current-time { 
    position: absolute; /* Assure que la position fonctionne bien */
    top: 50%; 
    left: 50%;
    font-size: 8rem; 
    transform: translate(-50%, -50%); 
    background-color: rgba(0, 0, 0, 0.03); /* Fond noir semi-transparent */
    padding: 15px 30px; /* Augmente le padding pour bien entourer l'heure */
    border-radius: 10px; /* Arrondi les bords */
    z-index: 10;!important; /* Assure que l'heure est bien devant tout */
}

.summer-time { 
    top: 50%; 
    left: 86%; /* Positionné à droite */
    transform: translate(-50%, -50%); 
}

.winter-time { 
    top: 50%; 
    left: 13%; /* Positionné à gauche */
    transform: translate(-50%, -50%); 
}
.vertical-line {
    width: 10px;
    height: 100vh;
    background-color: silver;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
z-index: 2; !important;
}