body { /* règles principales du contenu de la page ainsi que son fond */
    background-image: url(../medias/fond.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}

h6 { /* personnalisation des traits à but seulement esthétique */
    font-size: 5px;
    color: #fff; /* blanc */
    box-shadow: 0 0 10px 2px #ccc; /* blanc légèrement plus foncé*/ 
    background-color: #fff; /* blanc */
    width: 600px;    
}

h2 { /* personnalisation des titres pour les aides donnés aux utilisateurs (bienfaits de etc...) */
    color: #000000; /* noir */
    background-color: #fff; /* blanc */
    border-radius: 10px;
    width: 380px;
    padding: 10px 40px;
    opacity: 0.7;
    border-bottom: 5px solid #ffd2d2; /* rose clair */
    box-shadow: 0 0 10px 2px #ffd0d0; /* rose clair légèrement plus rouge */
}

h2:hover { /* animation lorsque la souris est sur un titre de bienfaits */
    font-size: 22.5px;
    background-color: white; /* gris */
    border-bottom: 5px solid #c7a6a6; /* rose gris */
    box-shadow: 0 0 10px 2px #c09d9d; /* rose gris foncé */
    transition: font-size 0.1s ease-in-out;
}

h2:not(:hover) { /* animation lorsque la souris part du titre de bienfaits */
    font-size: 20px;
    transition: font-size 0.1s ease-in-out;
}

p { /* personnalisation du paragraphe explicatif sur le contenu des informations */
    white-space: pre-wrap;
    font-size: 25px;
    color: #fff; /* blanc */
    font: bold;
}

body::before { /* création et personnalisation du carré blanc au centre de la page servant de base à tout le contenu */
    content: "";
    display: block;
    width: 1200px;
    height: 800px;
    background-color: #fff; /* blanc */
    position: fixed;
    z-index: -2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 40px;
    opacity: 0.35;
    box-shadow: 0 0 30px 3px #fff; /* blanc */
  }

.liste1{
      list-style-type: disc; /* Type de puce (par exemple, carrés) */
      color: white; /* Couleur du texte */
      text-align: left;
      margin-left:5%;
      font-size: 22px;

    }

    /* Style pour les éléments de la liste */
.liste1 li {
      margin-bottom: 8px; /* Marge en bas de chaque élément de la liste */
    }

.rubriques { /* personnalisation de l'ensemble des rubriques en haut à gauche de la page */
    width: 200px;
    float: left;
    margin: 0 20px 0 0;
    padding: 20px 0;
    background-color: transparent;
    display: flex;
    list-style-type: none;
    margin-left: 20px;
}

.rubriques li { /* personnalisation des rubriques entre elles */
    margin-right: 30px;
}

  
a { /* personnalisation individuelles de chacune des rubriques */
    color: #fff; /* blanc */
    font-size: 35px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}

a:hover { /* animation lorsque la souris est sur une rubrique */
    font-size: 37px;
    text-shadow: 0 0 10px #fff; /* blanc */
    transition: text-shadow 0.2s ease-in-out;
    transition: font-size 0.2s ease-in-out;
}

a:not(:hover) { /* animation lorsque la souris part d'une rubrique */
    font-size: 35px;
    transition: font-size 0.2s ease-in-out;
}

div{
    margin:7%;
    margin-top:0;
    margin-bottom: 0;
}