@keyframes bg_anim {
    0% {
        background-position: 50% 0%
    }

    50% {
        background-position: 50% 100%
    }

    100% {
        background-position: 50% 0%
    }
}

body {
    background-image: radial-gradient(var(--radial-gradient)), var(--background-url);
    background-attachment: fixed;
    width: 100%;
    z-index: -1;
    top: 0;
    background-position-x: 50%;
    height: 100%;
    background-size: cover;
    background-repeat: repeat;
}

/* body {
background: linear-gradient(178deg, var(--color-primary), #7a7a7a);
background-size: 400% 400%;
animation: bg_anim 10s linear infinite;
}*/
a {
    color: var(--color-secondary);
}

header {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 2px;
    background-color: white;
    width: 100%;
    align-items: center;
    justify-items: center;
}

header h1 img {
    /* Header Icone image */
    height: 45px;
    vertical-align: middle;
    box-shadow: var(--text-shadow);
    /* border-radius: 25% 50%; */
}


h1 {
    text-align: center;
    margin: 0;
    padding: 0.5em 0;
}

h2 {
    padding: 0.2em;
    background-color: var(--bg-color);
    color: var(--font-color-secondary);
    /* border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);*/
    box-shadow: var(--box_shadow);
}


ul {
    list-style-type: "✓  ";
}


li {
    color: var(--font-color-secondary);
}

nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    padding: 0.5em 0;
    background-color: var(--bg-color-gris);
    gap: 10px;
}

.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 70px;
}

/*portfolio*/
.fonction {

    padding: 0 10px;
}

.fonction div h2 {
    display: flex;
    flex-wrap: nowrap;
    padding: 10px;
    box-shadow: var(--box_shadow);
    align-items: center;
    gap: 10px;
    flex-direction: row;
    justify-content: space-between;
    /* border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);*/
}


.rotate {
    transform: rotate(90deg);
    transition: .3s;
}


.unrotate {
    transform: rotate(0deg);
    transition: .3s;
}

.realisation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.apercu_realisation {
    display: flex;
    max-width: 320px;
    border: 1px solid var(--color-secondary);
    border-radius: var(--border-radius);
    background-color: white;
    padding: 10px;
    cursor: pointer;
    margin: 5px;
    box-shadow: var(--box_shadow);
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.desactive {
    /*  opacity: 0.8; */
    cursor: auto;
}

.apercu_realisation img {
    width: 100%;
    box-shadow: var(--box_shadow);
}

/*Ellipsie */
.apercu_realisation p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*Realisation*/

.fiche_rea {
    max-width: 800px;
    margin: 10px auto 70px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.description {
    width: 100%;
}

.description,
.comp_tech,
.rea_img {
    background-color: white;
    border: 1px solid var(--bg-color-gris);
    border-radius: var(--border-radius);
    padding: 10px 25px;
    box-shadow: var(--box_shadow);
}

.comp_tech {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;

}

.comp_tech div {
    width: 45%;
}

.rea_img {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
    align-items: flex-start;
}

.rea_img img {
    max-width: 45%;
    box-shadow: var(--box_shadow);
}

/*------------------------*/
footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--bg-color-gris);
    justify-content: space-around;

    position: fixed;
    left: 0;
    bottom: 0;
    padding-top: 5px;
}

/*-------------------------*/
.croix_supp {
    color: red;
    font-weight: bold;
    cursor: pointer;
}

.logo {
    max-width: 400px;
}

.logo img {
    width: 100%;
}

.entete {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: white;
}

.data {
    text-align: center;
}

.grid_head {
    font-weight: bold;
    text-align: center;
    padding: 0.3em;
}

/**/
.crea {
    display: none;
    background-color: var(--font-color-info);
}

.carnet,
.nb_ann,
.next {
    width: 50px;
}

.debut {
    width: 80px;
}

.fin {
    background-color: var();
}

.encours {
    background-color: var(--font-color-valid) !important;
}

.competence_nok {
    background-color: var(--bg-color-gris);
}

.competence_ok {
    background-color: var(--font-color-valid);
}

input:disabled,
input[type=date]:disabled,
input[type=datetime-local]:disabled {
    background-color: var(--bg-color-gris);
}

#contact {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--radial-gradient)), var(--background-url);
    background-attachment: fixed;
}

#coordonnee {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
    background-color: white;

    border-radius: var(--border-radius);
    width: 330px;
    margin: 50px auto;
    padding: 0 10px 10px;

}

#coordonnee h1 img {
    border-style: none;
    width: 80px;
    border-radius: 10% 30% 50% 70%;
    vertical-align: middle;
    box-shadow: var(--box_shadow);
}

/*Edition*/
.section_edit {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
}

.edition {
    border-radius: var(--border-radius);
    background-color: #fff3e1;
    padding: 10px;
    margin: 5px;
}

.edition ul ul {
    list-style: none;
    padding-inline-start: 0px;
}

.edition input,
textarea {
    width: 100%;
}

.edition input,
label {
    display: block;
}

figure {
    text-align: center;
    font-style: italic;
    font-size: smaller;
    text-indent: 0;
    border: thin silver solid;
    margin: 0.5em;
    padding: 0.5em;
    background-color: white;
    width: 30%;
}

img.scaled {
    width: 100%;
}

@media only screen and (max-width: 1024px) {
    .apercu_realisation {
        max-width: 295px;
    }
}

@media only screen and (max-width: 414px) {

    /* For mobile phones: */
    .fonction {
        padding: 0;
    }

    .realisation {
        justify-content: center;
    }

    .apercu_realisation {
        max-width: 330px;
    }

    .rea_img img {
        max-width: 100%;
    }

    .section_edit {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
        margin-top: 10px;
    }

    .comp_tech {
        justify-content: flex-start;
    }

    .comp_tech div {
        width: 100%;
    }

    header h1 img {
        display: none;
    }

    h1 {
        font-size: 1.4em;
    }
}

/* @media only print {
    .fiche_rea {
        max-width: 1200px;
    }
} */