* { box-sizing: border-box; }

body {
    background-color: #F8F5EC;
}

h1 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.box_principale {
    font-variant: small-caps;
    max-width: 1500px;
    width: 92%;
    margin: 0 auto;
    padding: 20px 5%;
    min-height: 250px;
    background-color: #EEECE0;
    border: solid #EEECE0;
    border-radius: 0.4rem;
}

.nom {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: clamp(20px, 3vw, 30px);
}

.sous_titre {
    font-size: clamp(14px, 2vw, 20px);
}

.texte {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.img_cv {
    border: dotted 1px;
    float: right;
    width: 11em;
    max-width: 30%;
    height: auto;
    aspect-ratio: 11 / 12;
    border-radius: 0.9rem;
    margin-top: 17px;
}

.navigation {
    list-style: none;
    margin: 1em auto;
    padding: 0;
    border: solid #EFF1E6;
    background-color: #D2D2C8;
    border-radius: 0.8rem;
    display: flex;
    flex-wrap: wrap;
}

.navigation li {
    padding: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navigation a {
    text-decoration: none;
    display: block;
    color: black;
}

.navigation img {
    margin-top: 3px;
}

a:hover {
    color: rgb(73, 72, 72);
}

.box_premiere_annee,
.box_deuxieme_annee,
.box_troisieme_annee {
    max-width: 1280px;
    width: 90%;
    margin: 20px auto 0;
    background-color: #A69485;
    border: solid #A69485;
    text-align: center;
    border-radius: 0.5rem;
    padding: 1em;
}

.box_premiere_annee {
    margin-top: 3em;
}

.box_premiere_annee a,
.box_deuxieme_annee a,
.box_troisieme_annee a {
    text-decoration: none;
    display: block;
    color: black;
}

.an1, .an2, .an3 {
    display: none;
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
}

.an1.active,
.an2.active2,
.an3.active3 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
    padding: 20px;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

.ad, .co, .pr {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    border: 1px solid #ccc;
    background-color: #DCD6CA;
    padding: 20px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.ad a, .co a, .pr a {
    text-decoration: none;
    color: black;
}