@media (max-width: 600px) {/*affichage à 100% des multimédias pour les petits écrans (smartphones)*/
    img,video,audio{
        display: block !important;
        width: 100% !important;
        height:auto !important;
    }
}

body{
    font-family: Verdana;
    color:black;
    font-size: 14px;
    font-style: normal;
    text-align: justify;
    line-height: 18px;
    padding: 0 10px 0 10px;
    max-width: 100%;
    overflow-x:hidden;
  /* je rajoute ces 2 dernières instructions pour que la largeur de la page ne dépasse pas la taille de la fenetre du navigateur
   et que s'il y a des éléments qui dépasse (overflow-x), il ne soit pas affichés à l'écran (hidden).
   Lorsqu'il y a des animations, s'il y a des éléments qui sortent de la fenêtre, ils disparaissent. */
}
.centre{
    margin: auto;
    display: block;
}
.aligneV{
    display:flex;
    justify-content :space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

h1{
    font-family: Cambria;
    font-size: 28px;
    font-style: normal;
    text-align: center;
    text-transform: uppercase;
    color:rgb(66, 69, 224);
    line-height: 32px;
}
h2{
    color:rgb(72, 237, 26);
    background-color: beige;
}
h3{
    color:rgb(75, 17, 210);
}
h2, h3{
    font-family: Verdana;
    font-size: 16px;
    font-style: normal;
    text-align: left;
    line-height: 20px;
    padding-left:20px;
}

a{
    color:rgb(6, 6, 236)
}
a:hover{
    color: red;
}

.txtb{
    color:black;
}
.txtr{
    color:red;
    cursor: default;
}

.t1p{
    width: 450px;
    margin:auto;
    border-collapse: collapse;
  
}
.t1p th{
    text-align: center;

}
.t1p th, td{
    border: 2px solid black;
    padding: 0 10px 0 10px;
    width:150px;
}
.t1p tr:nth-child(2n){
    background-color: rgb(120, 196, 244);
}
#form1 fieldset{
    width:300px;
}