* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Load custom font */
@font-face {
    font-family: 'GeneralSans';
    src: url('fonts/GeneralSans-Variable.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'GeneralSans';
    src: url('fonts/GeneralSans-VariableItalic.ttf') format('truetype');
    font-style: italic;
}

body {
    background-color: #143958; 
    color: #ffffff;
    font-family: 'GeneralSans', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    text-align: center;
    overflow: hidden; 
}

header {
    margin-top: clamp(2rem, 5vh, 4rem);
}

.logo {
    width: clamp(50px, 4.5vw, 100px); 
    filter: invert(1);
    margin-bottom: clamp(1.5rem, 12vh, 15rem);
}

.subtitle {
    font-size: clamp(1rem, 3vw, 2.8rem);
    font-weight: bold;
    margin-bottom: clamp(1.5rem, 3vh, 15rem);
}

main {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Countdown container */
#countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1.5rem); 
}

/* Countdown blocks (squares) */
.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    color: #000000;
    padding: clamp(0.5rem, 1.2vw, 1rem) clamp(0.5rem, 1vw, 0.8rem);
    border-radius: clamp(12px, 1.5vw, 17px);
    min-width: clamp(65px, 8vw, 90px); 
    min-height: clamp(65px, 8vw, 90px);
    justify-content: center;
}

.time-block span:first-child {
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: bold;
    line-height: 1;
}

/* La petite barre noire centrale */
.bar {
    width: 40%; 
    height: 1px; 
    background-color: #000000;
    margin: clamp(0.3rem, 0.5vw, 0.6rem) 0;
    border: none;
}

.label {
    font-size: clamp(0.7rem, 0.8vw, 1rem);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- SÉPARATEURS RONDS --- */
.sep-dots {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.2vw, 14px); 
}

.dot {
    width: clamp(6px, 1vw, 10px); 
    height: clamp(6px, 1vw, 10px); 
    background-color: #ffffff;
    border-radius: 50%; 
}

/* --- ADDRESS SECTION --- */
.address-info {
    line-height: 1.4;
    margin-bottom: clamp(2rem, 10vh, 4rem);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 1vh, 8px);
}

.address-info p:first-child {
    font-size: clamp(1.1rem, 2vw, 1.5rem); 
    letter-spacing: 1px;
    margin-bottom: clamp(5px, 1.5vh, 10px);
}

.address-info p:last-child {
    font-size: clamp(0.8rem, 1.2vw, 1rem); 
}

/* Footer brand */
footer {
    margin-bottom: clamp(0.5rem, 1.2vh, 2.5rem);
}

.brand-image {
    width: clamp(150px, 10vw, 250px); 
    height: auto;
}



@media (max-width: 768px), (max-height: 650px) {
    header { 
        margin-top: 1.5rem; 
    }
    
    .logo { 
        margin-bottom: 10vh; 
    }
    
    .subtitle { 
        margin-bottom: 4vh; 
    }
    
    .address-info { 
        margin-top: 6vh; 
        margin-bottom: 10vh; 
    }
    
    footer { 
        margin-bottom: 4.5rem; 
    }
}