*{margin:0; padding:0;} 

font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: emoji;
font-family: math;
font-family: fangsong;

a{
    color:yellow;
    display: block;
    text-align: center;
}

/* Taile de la police */
h1{
    font-size:4vw;
}

h2{
    font-size:3vw;
}

h3{
    font-size:2vw;
}

h4{
    font-size:1vw;
}

/* Séparateur */
hr{
    size: 50%;
    color: white;
    margin-left: auto;
    margin-right:auto;
}

/* Titre de page sans couleur de fond */
.titre_nu{
    color:white;
    /*font-size:calc(40px + 0.390625vw);*/
    /*font-size:80px;*/
    text-align: center;
}
.titre_nu h1{
    font-size:7vw;
}

/* Bande de couleur pour les titres de sections */
.titre_Section{
    width: 80%;
    background-color: blue;
    color:white;
    text-align: center;
    margin-left: auto;
    margin-right:auto;
}
.titre_Section h2{
    font-size:6vw;
}

/* Bande de couleur pour les titre de parametres */
.titre_parametre{
    width: 40%;
    background-color: rgb(163, 161, 10);
    color:rgb(10, 10, 10);
    text-align: center;
    margin-left: auto;
    margin-right:auto;
}
.titre_parametre h2{
    font-size:5vw;
}


/* Bloc photo centrée prenant toute la place */
.photo{
    width: 60%;
    margin-left: auto;
    margin-right:auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.photo img{
    object-fit: fill;
    width: 100%;
}

/* Bloc de contenu de texte */
.paragraphe{
    width: 95%;
    margin-left: auto;
    margin-right:auto;
    color:white;
    text-align:justify;
}
.paragraphe h4{
    font-size:30px;
}

.legende{
    width: 95%;
    margin-left: auto;
    margin-right:auto;
    color:white;
    text-align:center;
}
.legende h4{
    font-size:3vw;
}
.legende h3{
    font-size:3vw;
    color:aqua
}
.legende a:link, .legende a:visited {
    color: rgb(211, 214, 37);
    text-decoration: underline;
    font-size: 2vw;
    font-weight: bold;
}

/* Vignette de presentation */
.vignette{
    display: grid;
    grid-template-columns: 25% 75%;
    width: 80%;
    background-color: rgb(83, 182, 240);
    margin-left: auto;
    margin-right:auto;
    border-radius: 30px;
    
}
.vignetteImg{
  text-align: center;
  grid-column: 1 ;
  grid-row: 1;
  
}
.vignetteTxt{
    display: table;
    text-align: center; 
    grid-column: 2 ;
    grid-row: 1;
    color:white;
}
.vignetteTxt a{
    color:white;
}
.vignette h4{
    font-size:3vw;
}
.vignette h2{
    font-size:5vw;
    display: table-cell;
    vertical-align: middle;
}

.lien, a:link, a:visited {
    text-decoration: none;
}

/* Barre de menu */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(235, 167, 22);
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
    color: rgb(0, 0, 0);
}
li a:link, li a:visited{
    text-decoration: underline;
}

ul h4{
    font-size:4vw;
}

/* PAGE INDEX (about.html)*/
.txt_about{
    width: 80%;
    max-width: 800px;
    background-color: rgb(0, 0, 0);
    color:white;
    text-align: justify;
    margin-left: auto;
    margin-right:auto;
}

.bloc_home{
    grid-template-columns: 2fr 1fr 2fr;
    
    text-align: center; 
    display: grid;
}

.blocA{
    background-color:black;
}
.blocB{
    background-color: #ffd100;
}
.blocC{
    background-color:black;
}

.bloc_home a:link, .bloc_home a:visited {
    color: black;
    text-decoration: underline;
    font-size: 5vw;
}

.bloc_photo{
    width: 60%;
    margin-left: auto;
    margin-right:auto;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 800px;
}

.bloc_photo img{
    object-fit: fill;
    width: 100%;
}