/*
  But :     Exercice 0
  Auteur : Emilien Stulz
  Date :   13.05.2024 / V1.0
*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0; 
    background-image: url("https://doc.casthighlight.com/wp-content/uploads/2018/03/apibackground-1024x576.png");
    /* Beige clair *
   
    color: #333;
    /* Couleur du texte */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Utiliser min-height pour s'assurer que le contenu s'étire jusqu'au bas de la fenêtre */
}

.container {
    width: 80%;
    text-align: center;
    /* Centrage du contenu */
    padding: 40px;
    /* Ajout de padding pour l'espace intérieur du conteneur */
    border-radius: 20px;
    /* Coins arrondis pour le conteneur */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* Ajout d'une ombre douce */
    background-color: #f1f1f1;
    /* Couleur de fond */
    overflow: hidden;
    /* Masque tout ce qui dépasse du conteneur */
    position: relative;
    /* Position relative pour les éléments enfants positionnés */
}

h1 {
    font-size: 72px;
    /* Taille du titre pour les appareils mobiles */
    margin-top: 20px;
    /* Espacement par rapport au haut de la page */
    color: #333;
    /* Couleur du titre */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    /* Ombre portée pour le titre */
    transition: all 0.3s ease;
    /* Ajout d'une transition pour l'effet de survol */
}

h1:hover {
    transform: rotate(3deg) scale(1.1);
    /* Rotation et agrandissement au survol */
}

h2 {
    font-size: 36px;
    /* Taille de la liste des exercices pour les appareils mobiles */
    margin-bottom: 40px;
    /* Espacement sous le sous-titre */
    color: #555;
    /* Couleur du sous-titre */
    text-transform: uppercase;
    /* Texte en majuscules */
}

ul {
    list-style-type: none;
    padding: 0;
    text-decoration: none;
}

li {

    margin-bottom: 30px;
    /* Espacement entre les éléments de la liste */
    font-size: 28px;
    /* Taille du texte de la liste des exercices pour les appareils mobiles */
    border: 3px solid #ccc;
    /* Bordure autour de chaque élément de la liste */
    border-radius: 15px;
    /* Coins arrondis pour les éléments de la liste */
    background-color: #f9f9f9;
    /* Couleur de fond des éléments de la liste */
    padding: 30px;
    /* Espacement à l'intérieur du cadre */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    /* Ajout d'une ombre douce */
    transition: transform 0.3s ease, background-color 0.3s ease;
    /* Ajout de transitions */
    position: relative;
    /* Position relative pour les éléments enfants positionnés */
}




li:hover {
    transform: translateY(-5px);
    /* Déplacement vers le haut au survol */
    background-color: #e0e0e0;
    /* Changement de couleur de fond au survol */
}

li:hover:before {
    opacity: 1;
    /* Affiche l'élément avant au survol */
}

a {
    text-decoration: none;
    color: #333;
    font-size: 24pt;
}

a:hover {
    text-decoration: none;
}

/* Styles pour les appareils mobiles */
/* Styles pour les appareils mobiles */
/* Styles pour les appareils mobiles */


/* Styles pour les appareils mobiles */
/* Styles pour les appareils mobiles */
@media only screen and (max-width: 1000px) {
    body {
        font-size: 14px;
        /* Réduire la taille de la police globale */
    }

    .container {
        width: 100%;
        /* Utiliser toute la largeur de l'écran */
        padding: 10px;
        /* Réduire le padding */
    }

    h1 {
        font-size: 16px;
        /* Réduire la taille du titre */
        margin-top: 10px;
        /* Espacement du haut */
    }

    h2 {
        font-size: 12px;
        /* Réduire la taille du sous-titre */
        margin-bottom: 10px;
        /* Espacement du bas */
    }

    ul#exerciseList li {
        padding: 10px;
        /* Espacement interne des exercices */
        font-size: 10px;
        /* Taille du texte des exercices */
        border-radius: 5px;
        /* Coins arrondis pour les cadres */
        border: 1px solid #ccc;
        /* Bordure autour des cadres */
        margin-bottom: 10px;
        /* Espacement entre les exercices */
    }

    /* Styles pour l'heure et la date sur téléphone */

    #datetime {
display: none; 
    }


    a {
        font-size: 10px;
        /* Taille du texte pour les liens */
    }
}





#exerciseList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Trois colonnes de largeur égale */
    gap: 20px;
    /* Espacement entre les exercices */
    list-style: none;
    /* Supprime les puces de la liste */
    padding: 0;
    /* Supprime le padding par défaut */
}

#exerciseList li {
    background-color: #f9f9f9;
    /* Couleur de fond des exercices */
    border: 1px solid #ccc;
    /* Bordure autour des exercices */
    border-radius: 5px;
    /* Coins arrondis */
    padding: 10px;
    /* Espacement interne */
    text-align: center;
    /* Centrer le texte */
}

#datetime {
    position: fixed;
    /* Position fixe par rapport à la fenêtre */
    top: 10px;
    /* À 10px du haut */
    right: 10px;
    /* À 10px de la droite */
    background-color: #fff;
    /* Couleur de fond blanche */
    padding: 10px 20px;
    /* Espacement interne */
    border-radius: 20px;
    /* Coins arrondis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Légère ombre */
    font-size: 16px;
    /* Taille de police par défaut */
    font-weight: bold;
    /* Texte en gras */
    color: #333;
    /* Couleur du texte */
    z-index: 9999;
    /* Z-index élevé pour être au-dessus du reste du contenu */


}

/* Dégradé de couleur pour les cellules des exercices */
/* Dégradé de couleur pour les cellules des exercices */
ul#exerciseList li {
    background: linear-gradient(to right, #ff7979, #6fb3a1);
    /* Dégradé de couleur du rouge au bleu */
    border: none;
    color: white;
    /* Couleur du texte */
    padding: 15px 32px;
    /* Espacement interne */
    text-align: center;
    /* Centrage du texte */
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    /* Taille de police */
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    /* Coins arrondis */
}