:root {
    --select-border: #777;
    --select-focus: #04A5AA;
    --select-arrow: var(--select-border);
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #F3F3F3;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

img {
    width: 100%;
}

header {
    background-color: #2e2f31;
    padding: 40px;
    border-bottom-left-radius: 90px;
    border-bottom-right-radius: 90px;
    display: flex;
    gap: 20px;
    margin-left: 10vw;
    margin-right: 10vw;
    max-height: 120px;
}

header a {
    text-decoration: none;
    color: white;
}

header > a:nth-child(1) {
    margin-right: auto;
    font-size: 20pt;
    margin-left: 20px;
}

header > a:nth-child(2), header > a:nth-child(3), header > a:nth-child(4), header > a:nth-child(5), header > a:nth-child(6) {
    font-size: 14pt;
}

header > a:nth-child(6) {
    margin-right: 20px;
}

.center1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.grandtitre {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.titre {
    font-size: 4vw;
}

.grandtitre > div:nth-child(2) {
    margin-bottom: 2vh;
}

.grandtitre > a {
    text-decoration: none;
    color: black;
    font-size: 20pt;
    background-color: #f9a826;
    padding: 10px;
    border-radius: 10px;
}

/*
main > div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
}
 */
main > div:nth-child(2) > img {
    width: 80%;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2e2f31;
    color: white;
    padding: 10px;
}

footer > div:nth-child(1) {
    margin-left: 10px;
}

footer > div:nth-child(2) {
    margin-right: 10px;
}

.mainListe {
    display: grid;
    /*grid-template-rows: 1fr 1fr;*/
    justify-items: center;
    /*min-height: 80vh;*/
}

.filtre {
    border: solid #C4C4C4;
    padding: 20px;
}

.titreFiltre {
    background-color: #C4C4C4;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 20px;
    min-width: 60vw;
    cursor: pointer;
}

.fermer {
    display: none;
}

.ouvrir + .bottomFilter {
    display: initial;

}

.ouvrir > .fleche {
    transform: rotate(180deg);
}

.fleche {
    transition-duration: 0.2s;
}

.filtre span {
    margin-left: 20px
}

.semestrediv > div > input[type="checkbox"] {
    display: none;
}

.semestrediv {
    display: flex;
    margin-bottom: 20px;
}

.semestrediv span {
    margin-right: 30px;
}

.semestre + label {
    background-color: #fad39f;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    cursor: pointer;
}

.semestre:checked + label {
    background-color: #F9A826;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
}

.ac + label {
    background-color: #fad39f;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    cursor: pointer;
    max-width: 5vw;
}

.ac:checked + label {
    background-color: #F9A826;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
}

.compet + label {
    background-color: #fad39f;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    cursor: pointer;
}

.compet:checked + label {
    background-color: #F9A826;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
}

.filtre > input[type="submit"] {
    background-color: #F9A826;
    padding-right: 10px;
    padding-left: 10px;
    border: none;
    border-radius: 20px;
    margin-left: 20px;
}

/*.pas {
    display: none !important;
}*/

/* Affichage par défaut de toute les SAE */
.laliste > div {
    display: flex;
}

/* Pour la selection du filtre */
.laliste.Comprendre > .Comprendre,
.laliste.Concevoir > .Concevoir,
.laliste.Exprimer > .Exprimer,
.laliste.Développer > .Développer,
.laliste.Entreprendre > .Entreprendre,
.laliste.S1 > .S1,
.laliste.S2 > .S2,
.laliste.S3 > .S3,
.laliste.S4 > .S4,
.laliste.S5 > .S5,
.laliste.S6 > .S6 {
    display: none;
}

.sae {
    display: flex;
    flex-direction: column;
    width: 20vw;
    height: 55vh;
    background-color: #2e2f31;
    color: white;
    justify-content: center;
    align-items: center;
    margin: 30px;
    padding: 20px;
}

.sae > div:nth-child(1) {
    font-size: 20pt;
}

.sae p {
    margin: 12px;
}

.sae form input {
    background-color: #F9A826;
    padding-right: 10px;
    padding-left: 10px;
    border: none;
    border-radius: 20px;
    margin-top: 10px;
}

.compet2 {
    background-color: #f9a826;
    color: black;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.laliste {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}

.mainapropos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mainapropos > .descSaeTitre {
    margin-top: 10vh;
    margin-right: auto;
    margin-left: 20px;
}

.centerapropos {
    background-color: #2e2f31;
    color: white;
    font-size: 16pt;
    padding: 30px;
    margin: 10vh;
    border-radius: 20px;
}

.ajouter {
    background-color: #f9a826;
    border-radius: 20px;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 20pt;
    cursor: pointer;
    margin-bottom: 20px;
}

fermeradd {
    display: none;
}

.creation {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}

/*Creation d'une SAE*/

.competcrea > input[type="checkbox"] {
    display: none;
}

.semetrecrea > input[type="radio"] {
    display: none;
}

.autourac input[type="checkbox"] {
    display: none;
}

.ajoutsae {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: solid 4px #C4C4C4;
    padding: 20px;
}

.creersae {
    margin-bottom: 20px;
}

.competbas + label {
    background-color: #fad39f;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    cursor: pointer;
}

.competbas:checked + label {
    background-color: #F9A826;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
}

/* Affichage par défaut de toute les SAE */
.autourac > label {
    display: none;
}

/* Pour la selection du filtre */
.autourac.Comprendrebas > .Comprendre,
.autourac.Concevoirbas > .Concevoir,
.autourac.Exprimerbas > .Exprimer,
.autourac.Développerbas > .Développer,
.autourac.Entreprendrebas > .Entreprendre {
    display: flex;
    justify-content: center;
}

/* Style des menus déroulants */

*,
*::before,
*::after {
    box-sizing: border-box;
}

select {
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0 1em 0 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    outline: none;
}

.autourac {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.select {
    width: 100%;
    min-width: 7.5ch;
    max-width: 10ch;
    border: 1px solid var(--select-border);
    border-radius: 0.25em;
    padding: 0.25em 0.5em;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1.1;
    background-color: #fff;
    background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
    display: grid;
    grid-template-areas: "select";
    align-items: center;
    position: relative;
}

select,
.select:after {
    grid-area: select;
}

.select::after {
    content: "";
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    justify-self: end;
}

select:focus + .focus {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 2px solid var(--select-focus);
    border-radius: inherit;
}

.ajoutsubmit {
    background-color: #F9A826;
    padding-right: 10px;
    padding-left: 10px;
    border: none;
    border-radius: 20px;
    margin-left: 20px;
}

/* afficher le formulaire */

.ouvrir1 + .creersae {
    display: initial;

}

/* Page Creation */

.mainCreation {
    margin: 10px;
}

.topSae {
    display: flex;
    justify-content: center;
    text-align: center;
}

.titreSae {
    margin-top: 20px;
    font-size: 24pt;
    background-color: #2e2f31;
    color: white;
    padding: 12.5px;
    border-radius: 15px;
    margin-left: 1vw;
}

.competSae {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.descSaeTitre {
    font-size: 16pt;
    margin-top: 20px;
    background-color: #f9a826;
    width: fit-content;
    padding: 10px;
    border-radius: 15px;
}

.descSaeTitre2 {
    font-size: 16pt;
    font-weight: 500;
    margin-top: 20px;
    background-color: #f9a826;
    width: fit-content;
    padding: 10px;
    border-radius: 15px;
}

.descSae {
    background-color: #2e2f31;
    color: white;
    padding: 20px;
    margin: 4vw;
    border-radius: 20px;
}

.ressourceSaeTitre {
    font-size: 16pt;
    margin-top: 10px;
    background-color: #f9a826;
    width: fit-content;
    padding: 10px;
    border-radius: 15px;
    margin-left: 1vw;

}

.ressourceSae {
    display: flex;
    flex-wrap: wrap;
    background-color: #2e2f31;
    color: white;
    padding: 20px;
    margin-left: 4vw;
    margin-right: 4vw;
    margin-bottom: 4vw;
    border-radius: 20px;
}

.ressource {
    flex: 0 0 50%;
    padding: 2px;
}


.lesACsTitre {
    font-size: 16pt;
    margin-top: 10px;
    background-color: #f9a826;
    width: fit-content;
    padding: 10px;
    border-radius: 15px;
    margin-left: 1vw;
}

.lesACs {
    margin-bottom: 10px;
}

.ac {
    display: flex;
    margin-top: 10px;
    background-color: #C4C4C4;
    padding: 20px;
    cursor: pointer;
}

.compet3 {
    background-color: #f9a826;
    margin-left: auto;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.imageBas {
    margin-top: 4vw;
    margin-bottom: 4vw;
    margin-left: 10vw;
    margin-right: 10vw;
}

/* afficher les justifications/preuves des ACs */

.ouvrir2 + .justiACs {
    display: block;
    margin: 10px;

}

.ouvrir2 > div:nth-child(2) > svg:nth-child(1) {
    transform: rotate(180deg);
}

.fleche1 {
    transition-duration: 0.2s;
}

.introSae > form:nth-child(8) {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

/*Style des justification/preuves des ACs*/

.titrePreuve {
    font-size: 16pt;
}

.imgPreuveGrande {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.imgPreuveGrande img {
    width: 35%;
}

.imgPreuveGrande video {
    width: 35%;
}

.imgPreuvePetite {
    display: flex;
    justify-content: center;
}

.imgPreuvePetite img {
    width: 75%;
}

.sousTitre {
    font-size: 14pt;
}

.pdfDeux {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Page de connexion */

.mainConnexion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
}

.titreConnexion {
    font-size: 20pt;
}

.formConnexion {
    display: flex;
    flex-direction: column;
}

input[name="okpasswd"] {
    background-color: #f9a826;
    color: black;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 20px;
    display: flex;
    border: none;
    justify-content: center;
    align-items: center;
}

/* Animations */

.slide-in-top {
    animation: slide-in-top 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scale-up-center {
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up-center {
    0% {
        transform: scale(0.5);
    }
    100% {
        transform: scale(1);
    }
}

.mainCV {
    margin: 10px;
}

.imageZoom {
    transition-duration: 0.2s;
}

.imageZoom:hover {
    transform: scale(2);
    transition-duration: 0.2s;
}

#gallery {
    justify-content: center;
}