body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 20;
        line-height: 1.6;
        background-color: #f4f4f9;
        color: #333;
        padding: 20px;
    }

    .button {
        width: 40px;
        height:25px;
        -moz-box-shadow:inset 0 1px 0 0 #fff;
        -webkit-box-shadow:inset 0 1px 0 0 #fff;
        box-shadow:inset 0 1px 0 0 #fff;
        bxackground:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
        bacxkground:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
        background-color:#fff;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        border:1px solid #000;
        display:inline-block;
        color:#000;
        font-famdily:Helvetica;
        font-size:15px;
        font-weight:700;
        padding:5px 5px 5px 5px;
        text-decoration:none;
        text-shadsow:1px 1px 0 #555
    }

    .cercle-texte {
      border: 2px solid #D9534F; /* Couleur et épaisseur de la bordure */
      border-radius: 1em; /* C'est la clé ! Crée les coins arrondis. */
      padding: 3px 8px; /* Espace entre le texte et la bordure (haut/bas et gauche/droite) */
      background-color: #000; /* Couleur de fond optionnelle */
    }

    /* Conteneur pour chaque élément rétractable */
    .accordion-item {
        background-color: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 1rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        overflow: hidden; /* Très important pour l'animation de hauteur */
    }
    
    /* Le bouton qui déclenche l'ouverture/fermeture */
    .accordion-header {
        width: 100%;
        background-color: transparent;
        border: none;
        padding: 1rem;
        font-size: 1rem;
        font-weight: bold;
        text-align: left;
        cursor: pointer;
        color: #2980b9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: background-color 0.2s;
    }
    
    .accordion-header:hover {
        background-color: #f9f9f9;
    }

    /* Icône + ou - */
    .accordion-header .icon::before {
        content: '+';
        font-size: 1.2rem;
        font-weight: bold;
        transition: transform 0.3s ease-in-out;
    }

    .accordion-header.active .icon::before {
        content: '−'; /* Caractère moins */
    }

    /* Le contenu caché */
    .accordion-content {
        max-height: 0; /* Caché par défaut */
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.4s ease-in-out;
    }
    
    .accordion-content-inner {
        padding: 0 1rem 1rem 1rem;
    }

.entete {
    background-color: #c00; /* Couleur de fond du menu principal */
    text-align: center;
	font-family:Great Vibes, cursive;
	font-weight: bold;
    color: #fff; /* Couleur du texte du menu principal */
    font-size: 1.5em; /* Taille de la police pour le menu principal */
    padxding: 10px 15px;
}

.entett {
    background-color: #c00; /* Couleur de fond du menu principal */
    text-align: center;
	font-family:cursive;
	font-weight: bold;
    color: #fff; /* Couleur du texte du menu principal */
    font-size: 1.5em; /* Taille de la police pour le menu principal */
    padxding: 10px 15px;
}

.err {
    background-color: #c00; /* Couleur de fond du menu principal */
    text-align: center;
	font-family:Great Vibes, cursive;
	font-weight: bold;
    color: #fff; /* Couleur du texte du menu principal */
    font-size: 2em; /* Taille de la police pour le menu principal */
    padding: 10px 15px 20px 10px;
}

.res {
    background-color: #000000; /* Couleur de fond du menu principal */
    text-align: center;
	font-weight: bold;
    color: black; /* Couleur du texte du menu principal */
    font-size: 5em; /* Taille de la police pour le menu principal */
}

.ligne {
    background-color: #333; /* Couleur de fond des sous-menus */
}

.ssentete {
    background-color: #333; /* Couleur de fond des sous-menus */
    color: white;
}
.sssentete {
    background-color: #777; /* Couleur de fond des sous-menus */
    color: white;
}
.dis_entete {
    background-color: #DDD; /* Couleur de fond des sous-menus */
    color: #555;
}

.td1{
    background-color: #eee; /* Couleur de fond des sous-menus */
    color: black;
    padding:0;
}

.td2 {
    background-color: #ddd; /* Couleur de fond des sous-menus */
    color: #222;
    padding:0;
}

.td3 {
    background-color: #333; /* Couleur de fond des sous-menus */
}

td { 
  color : black;
  font-size: 20;
  padding: 10px;
    
}
tds { 
  color : black;
  font-size: 15;
  padding: 5px;
    
}