/*polices importées - charte graphique*/
@font-face {
    font-family: 'sifonn';
    src: url('Fonts/SIFONN_PRO.otf');
}

@font-face {
    font-family: 'chetta visto';
    src: url('Fonts/ChettaVissto.ttf');
}

@font-face {
    font-family: 'glacial indifference';
    src: url('Fonts/GlacialIndifference-Regular.otf');
}

/*items du nav*/
nav {
    padding: 15px;
    max-width: 300px; width: 100%;
    background-color: #c8d6bc;
    border-radius: 5px;
}

nav h2 {
    text-decoration: underline;
}

nav a, nav a:visited, nav a:hover, nav li, nav h2 { /*liens, items et titres dans le menu de navigation*/
    font-family: 'glacial indifference';
}


a, a:visited, a:hover { /*tous les liens sur la page, quel que soit leur état*/
    font-family: 'glacial indifference';
    color: #44361c;
    text-decoration: underline double;
}

a:hover { /*couleurs des liens au survol*/
    color: var(--couleur-hover, #ff00b3);

}

/*items du body*/
body {
    background-color: #ebe6c6; /*couleur de fond claire*/
    padding: 50px;
}

body.page-index section h2 { /*titre des sections uniquement sur la page index, style spécifique à cette page*/

    display: inline-block;
    padding: 8px 12px;
    border-radius: 5px;
    background-color:#c8d6bc;
    margin: 20px auto;
}

body.page-pourquoi section h2 {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 5px;
    background-color:#5e4f35; /*couleur de charte graphique*/
    margin: 20px auto;
}

body.page-ameliorer section h2 {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 5px;
    background-color:lightgrey;
    margin: 20px auto;
}

/*items textuels : */
h1 {
    font-family: 'sifonn';
    font-size: 60px;
    text-align: center;
    color: #2d2e2b;
    padding: 10px 15px;
    margin: 0;
    background: radial-gradient(white, lightgrey, grey, #2d2e2b);
    border-radius: 5px;
    border-style: outset;
    width: 100%;
    box-sizing: border-box;
}

p {
    font-family: 'glacial indifference';
    font-size: 20px;
}

h2, h3, h4 {
    font-family: 'glacial indifference';
    font-size: 2em;
}

small {
    display: block;
    font-family: 'glacial indifference';
    text-align: center;
    font-size: large;
    font-style: italic;
}

/*tableau unique "comment m'améliorer"*/
#table {
    margin: 20px auto;
    border-collapse: collapse;
    border: 3px solid #3d502c;
}

#table th,
#table td {
    border: 1px solid #3d502c; /* lignes internes */
    background-color: #cfc582;
    padding: 12px 18px;
    font-family: 'glacial indifference';
    text-align: center;
}

/*listes à puces et numérotées : */
ol {
    list-style-type: upper-roman;
    font-family: 'glacial indifference';
}

ul {
    list-style-type: square;
    font-family: 'secrcode';
}

li {
    font-family: 'glacial indifference';
    font-size: 1.1em;
    color:#3d502c;
    margin-bottom: 5px;
    align-content: center;
}

footer {
    background-color: #c8d6bc;
    padding: 10px;
    margin: 1px;
    border-radius: 10px;
    text-align: center;
}
/*items de classe*/
.centered { /*bloc centré sur la page avec largeur maximale*/
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
}

.menu p { /*paragraphes à l’intérieur d’un menu*/
    font-family: 'glacial indifference';
}

.title h2 { /*titre h2 à l'intérieur d'un bloc avec la classe "title" pour styliser un titre particulier*/
    background-color:#cfc582;
    padding: 0px
}
/*styles pour images*/
.clearfix {
    clear: both;
}

.bloc-image {
    float: left;
    width: 40%;
    margin: 10px 50px 10px 0;
    text-align: center;
}

.image-article {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 3px solid #3d502c;
}

.legende {
    font-family: 'glacial indifference';
    font-size: 0.9em;
    margin-top: 6px;
    color: #3d502c;
    font-style: italic;
}
/*styles pour vidéos*/
.bloc-video {
    width: 60%;
    margin: 50px auto;
    text-align: center;
}

.video-article {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 3px solid #3d502c;
}

/* Pour que l'iframe garde le format 16/9 */
.bloc-video iframe {
    aspect-ratio: 16 / 9;
}