@font-face {
    font-family: 'Quarante';
    src: url('fonts/QuaranteHelvétique-SoftText.woff2') format("woff2");

    font-weight: normal;
    font-style: normal;
}

:root {
    --height-main-image : calc(100vh - 300px);
    --height-main-image-resp : calc(100vh - 250px);
    --accent-color : rgb(19, 23, 240);
    --counter-color : rgb(239, 239, 239);
    --transparent-color : rgb(239, 239, 239, 0);
}
    

@media (min-width:768px) {
    
    body {
        
        background-color: var(--counter-color);
        font-family: 'Quarante';
        font-weight: normal;
        font-size: 16px;

        color: var(--accent-color);
        margin: 0;
    }

    .navbar {
        background-color: var(--accent-color);

        margin-top: 20px;
        margin-left: calc(50% - 55px); /*Pour bien centrer*/

        width: 110px;

        padding-top: 10px;
        padding-bottom: 8px;
        padding-left: 10px;
        padding-right: 10px;
        
        border-radius: 5px;

        text-align: center;

        font-size: 1rem;
        font-family: 'Quarante';
        color: var(--counter-color);
    }

    .announcement-text {
        font-family: 'Quarante';
        font-weight: normal;
        text-align: center;

        font-size: 3rem;

        padding-top: 32px;
    }

    footer{
        font-size: 1rem;
    }

    .time {
        position: absolute;
        width: 100vw;
        bottom: 20px;
        font-feature-settings: "case" 1; /*Pour les :*/
        font-variant-numeric: tabular-nums;

        text-align: center;
    }

    .date-copyright{
        position: absolute;
        bottom: 10px;
        left: 10vw;

        font-feature-settings: "case" 1; /*Avec ça je call un copyright case qui match 2026*/

        align-items: left;
    }

    .adress{
        position: absolute;
        bottom: 10px;
        right: 10vw;
        text-align: right;
    }
    
        /* Le container de base */
    .slideshow-container {
        z-index: 2;
        top: 0px;
        bottom: 0px;
        position: relative;
        max-height: var(--height-main-image);
    }

    .mySlides {
        display: none;
        align-items: center;
        height: var(--height-main-image);
    }

        /*Crafting pour gérer les images internes à la slide affichée*/
    .background-illustration {
        position: absolute;
        opacity: 0;

        max-height: var(--height-main-image);
        width: 90%;

        left: 50%; 
        transform: translateX(-50%);
    }

    .background-illustration:hover {
        opacity: 1;
    }

    .overlay-typeface {
        position: absolute;
        max-height: var(--height-main-image);
        width: 100%;
        left: 50%; 
        transform: translateX(-50%);
    }


    /* Les boutons en mode normal */
    .prev, .next {
        position: absolute;
        z-index: 3;
        
        top: 0%;
        height: var(--height-main-image);
        width: 20vw;
        transition: 0.4s ease;
        border-radius: 3px;
        user-select: none;
        /*DEBUG 
        background-color: var(--accent-color);
        opacity: 0.05;
        */
    }

    /* Ça c'est pour mettre le bouton droit bien à droite */
    .next {
        right: 0;
    }

    /* L'effet de survol */
    .prev:hover {
        background: linear-gradient(90deg, var(--accent-color) 0%, var(--transparent-color) 30%,  var(--transparent-color) 100%);;
        opacity: 0.2;
    }
    .next:hover {
        background: linear-gradient(270deg, var(--accent-color) 0%, var(--transparent-color) 30%,  var(--transparent-color) 100%);;
        opacity: .2;
    }

    /* Juste fade normal */
    .fade {
        animation-name: fade;
        animation-duration: 0.5s;
    }
    /*Ça c'est pour gérer le fading des images YO*/
    @keyframes fade {
        from {opacity: 0.4}
        to {opacity: 1}
    }
}
















/*——————————————————————————————*/
/*———————Responsive time !——————*/
/*——————————————————————————————*/














@media (max-width:768px) {
    
    body {
        
        background-color: var(--counter-color);
        font-family: 'Quarante';
        font-weight: normal;
        font-size: 16px;

        color: var(--accent-color);
        margin: 0;

    }

    .navbar {
        background-color: var(--accent-color);

        margin-top: 20px;
        margin-left: calc(50% - 55px); /*Pour bien centrer, encore du crafting*/

        width: 110px;

        padding-top: 10px;
        padding-bottom: 8px;
        padding-left: 10px;
        padding-right: 10px;
        
        border-radius: 5px;

        text-align: center;

        font-size: 1rem;
        font-family: 'Quarante';
        font-weight: "heavy";
        color: var(--counter-color);
    }

    .announcement-text {
        font-family: 'Quarante';
        font-weight: normal;
        text-align: center;

        font-size: 2rem;

        padding-top: 32px;
    }

    footer{
        font-size: 1rem;
    }

    .time {
        font-feature-settings: "case" 1; /*Pour les :*/
        font-variant-numeric: tabular-nums; /*Ça garde l'espace fixe grâce au tabulaire*/


        text-align: center;

        display: none;
    }

    .date-copyright{
        position: absolute;
        width: 100vw;
        bottom: 10px;
        text-align: center;

        font-feature-settings: "case" 1; /*Avec ça je call un copyright case qui match 2026*/
    }

    .adress{
        position: absolute;
        bottom: 40px;
        width: 100vw;
        text-align: center;
        font-size: 1.5rem;
    }
    
        /* Slideshow container */
    .slideshow-container {
        top: 10px;
        bottom: 0px;
        position: relative;
        max-height: var(--height-main-image-resp);
    }

    /* Hide the images by default */
    .mySlides {
        display: none;
        align-items: center;
        height: var(--height-main-image-resp);
    }

            /*Crafting pour gérer les images internes à la slide affichée*/
    .background-illustration {
        position: absolute;
        opacity: 0;

        max-height: var(--height-main-image);
        width: 90%;

        left: 50%; 
        transform: translateX(-50%);
    }

    .background-illustration:hover {
        opacity: 1;
    }

    .overlay-typeface {
        position: absolute;
        max-height: var(--height-main-image);
        width: 100%;
        left: 50%; 
        transform: translateX(-50%);
    }

    /* Les boutons en mode normal */
    .prev, .next {
        position: absolute;
        
        top: 0%;
        height: var(--height-main-image-resp);
        width: 15vw;
        transition: 0.4s ease;
        border-radius: 3px;
        user-select: none;
        /*DEBUG 
        background-color: var(--accent-color);
        opacity: 0.05;
        */
    }

    /* Ça c'est pour mettre le bouton droit bien à droite */
    .next {
        right: 0;
    }

    /* L'effet de survol */
    .prev:hover {
        background: linear-gradient(90deg, var(--accent-color) 0%, var(--transparent-color) 60%,  var(--transparent-color) 100%);;
        opacity: 0.15;
    }
    .next:hover {
        background: linear-gradient(270deg, var(--accent-color) 0%, var(--transparent-color) 60%,  var(--transparent-color) 100%);;
        opacity: 0.15;
    }

    /* Fading animation */
    .fade {
        animation-name: fade;
        animation-duration: 0.5s;
    }
    /*Ça c'est pour gérer le fading des images YO*/
    @keyframes fade {
        from {opacity: 0.4}
        to {opacity: 1}
    }
    /*Crafting pour gérer les images internes à la slide affichée*/
    img {
        max-height: var(--height-main-image-resp);
    }
}