/* 1. Reset et Font-face */
@font-face {
    font-family: Police;
    src: url(Bread.woff2) format(woff2);
}

* {
    font-family: bread, sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #caf3e5; 
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* 2. Typographie et Éléments de base */
h1, h4 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0px;
}

h4 a {
  color:rgb(65, 65, 154)
}

p {
    display: block; 
    margin: 0;
    color: black;
}

a {
    color: black;
    text-decoration: underline;
}

/* 3. Structure des listes */
li {
    list-style-type: none;
    margin-left: 20px;
}

.liste {
    display: flex;
    align-items: center;
}

/* 4. Icônes personnalisées */
.fleche, .coche, .cible, .flecherouge {
    display: inline-block;
    width: 20px;
    height: 22px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.fleche {
    background-image: url(../icones/fleche.svg);
    background-position: center 4px;
}

.coche {
    background-image: url(../icones/coche.svg);
    background-position: center 4px;
}

.cible {
    background-image: url(../icones/cible.svg);
    background-position: center 2px;
}

.flecherouge {
    background-image: url(../icones/flecherouge.svg);
    background-position: center 2px;
}

/* 5. Compteurs / Meters */
.meter {
    margin-left: auto;
    display: flex;
    align-items: center;
    margin-right: 50px;
}

.meter span {
    margin-right: 5px;
}

/* 6. Layout Responsive (Table/Colonnes) */
table {
    width: 100%;
    border-collapse: collapse;
}

@media screen and (max-width: 600px) {
    .DevoirsEcole {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }
    .colonneDevoirs, .colonneAutonomie {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media screen and (min-width: 601px) {
    .DevoirsEcole {
        display: flex;
        justify-content: space-between;
        padding: 20px;
    }
    .colonneDevoirs, .colonneAutonomie {
        flex: 1;
        margin: 0 10px;
    }
}