/* style.css */

/* Reset de base pour une meilleure cohérence */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Adventures Unlimited';
    src: url('fonts/AdventuresUnlimited-ScriptRg.woff2') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cardo';
    src: url('fonts/Cardo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
    /* Rend le défilement doux pour les ancres */
}

body {
    font-family: 'Cardo', sans-serif;
    line-height: 1.5em;
    color: #333;
    overflow-x: hidden;
    font-size: 1em;
    /* Empêche le défilement horizontal */

    display: grid;
    grid-template-rows: auto 1fr; /* header auto, main prend le reste */
    height: 100dvh;
}

main {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth; 
}

h1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

h3 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Styles pour les sections de pleine hauteur */
section {
    scroll-snap-align: start;
    height: 100%;                 /* remplit la “part” de main */
    max-height: 100%;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0em;
    text-align: center;
    background: linear-gradient(160deg, #f6ede3 0%, #ead4bc 100%);
    /* Fallback pour anciens navigateurs */
    background-color: #f0e1d0;
}

/* Conteneur pour le fondu des images */
#background-fader {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Styles pour chaque image de fond */
.background-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    /* Toutes les images sont cachées par défaut */
    transition: opacity 2s ease-in-out;
    /* Durée et type de l'animation */
}

/* Classe pour rendre une image visible */
.background-image.active {
    opacity: 1;
}

/* Classe pour l'opacité finale du fond */
.final-opacity .background-image.active {
    opacity: 0.2 !important;
    /* Opacité finale réduite */
}

/* Classe pour l'opacité finale du fond */
.final-opacity .presentation-content {
    opacity: 1 !important;
}

.presentation-content {
    position: relative;
    z-index: 1;
    opacity: 0;
    /* Durée et type de l'animation */
}

.presentation-content span {
    opacity: 0;
    transition: opacity 1s ease;
}

.presentation-content p {
    font-size: 1.3em;
}

/*
#presentation::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('images/fond_normal.png') center/cover no-repeat;
    opacity: 0.2;
    
    z-index: 0;
}

#presentation>* {
    position: absolute;
    z-index: 1;
}*/

p {
    max-width: 70vw;
    margin-bottom: 1em;
}

.hidden {
    display: none;
}

.absolute {
    position: absolute;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.fond-fusain {
    background: url('images/fond_fusain.png') center/cover no-repeat;
}

.fond-aquarelle {
    background: url('images/fond_aquarelle.png') center/cover no-repeat;
}

.fond-normal {
    background: url('images/fond_normal.png') center/cover no-repeat;
}

.fond-final {
    background: url('images/fond_final.png') center/cover no-repeat;
}


@media (max-width: 600px) {
    body {
        font-size: 0.8em;
    }

    p {
        max-width: 90vw;
    }
}

@media (max-height: 600px) {
    body {
        font-size: 0.8em;
    }
}

@media screen and (orientation: portrait) {
    .fond-fusain {
        background: url('images/pfond_fusain.png') center/cover no-repeat;
    }

    .fond-aquarelle {
        background: url('images/pfond_aquarelle.png') center/cover no-repeat;
    }

    .fond-normal {
        background: url('images/pfond_normal.png') center/cover no-repeat;
    }

    .fond-final {
        background: url('images/pfond_final.png') center/cover no-repeat;
    }
}