/* Inclusion de la police ORDINAIRENORMAL.otf */
@font-face {
    font-family: 'ORDINAIRENORMAL';
    src: url('font/ORDINAIRENORMAL.otf') format('opentype');
}

/* Fond avec image seule */
body {
    background: url('media/fond.png') no-repeat center center fixed;
    background-size: cover;
    font-family: 'ORDINAIRENORMAL', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* Utilisation de la hauteur visible réelle du viewport */
    overflow: hidden; /* Empêche le scrolling */
}

/* Encadré pour le titre */
header {
    text-align: center;
    padding: 10px;
    border: 2px solid #0f3692; /* Retour à une bordure plus fine */
    margin: 10px;
    box-sizing: border-box;
    background: transparent; /* Fond transparent pour le titre */
}

h1 {
    margin: 0;
    color: #0f3692;
    font-size: 8vw; /* Taille plus grande pour le titre */
}

h2 {
    margin: 5px 0;
    color: #0f3692;
    font-size: 5vw; /* Ajustement léger pour le sous-titre */
}

/* Style des mots */
main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.word {
    color: #0f3692;
    cursor: pointer;
    margin: 20px;
    transition: font-size 0.3s ease;
    text-align: center;
    white-space: nowrap;
    user-select: none;
    cursor: default;
    display: inline-block;
}

/* Appliquer une couleur spécifique à la première lettre de chaque mot */
.word::first-letter {
    color: #ff2f19;
}

/* Taille des mots */
.word-large {
    font-size: 18vw; /* Augmentation de la taille des mots */
}

.word-medium {
    font-size: 16vw;
}

.word-small {
    font-size: 14vw;
}

/* Classe pour surligner et animer un mot */
.highlight {
    background-color: rgba(255, 255, 255, 0.6);
    animation: zoomInOut 0.3s ease;
    display: inline-block;
    padding: 0 10px;
    border-radius: 4px;
}

/* Bas de page */
footer {
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.6); /* Un fond léger et transparent */
    font-size: 5vw; /* Taille plus grande pour la lisibilité */
    border-top: 2px solid #0f3692; /* Ligne en haut pour délimiter le footer */
}

footer p {
    color: black;
    margin: 5px 0;
}

footer a {
    color: #0f3692;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Responsive : Ajustements spécifiques pour les petits écrans */
@media (max-width: 768px) {
    header {
        margin: 5px;
        padding: 10px;
    }

    main {
        padding: 5px;
    }

    .word {
        margin: 10px;
    }

    h1 {
        font-size: 10vw; /* Titre plus grand sur smartphone */
    }

    h2 {
        font-size: 6vw;
    }

    .word-large {
        font-size: 20vw; /* Taille des mots ajustée pour smartphone */
    }

    .word-medium {
        font-size: 18vw;
    }

    .word-small {
        font-size: 16vw;
    }
}