/**

--------------------------------------------------------------------
                    Fichier de style global
--------------------------------------------------------------------

 */

@font-face {
    font-family: 'Biryani';
    src: url('../assets/fonts/Biryani/Biryani-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Biryani';
    src: url('../assets/fonts/Biryani/Biryani-Light.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Biryani';
    src: url('../assets/fonts/Biryani/Biryani-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Biryani';
    src: url('../assets/fonts/Biryani/Biryani-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

*{
    margin: 0;
    padding: 0;
}
:root{
    --primary : #007858;
    --primary-hover : #2D5642;

    --secondary : #2B8088;
    --secondary-hover : #166D75;

    --grey : #CFCFCF;
    --background : #F9F9FB;
    --black : #19251F;

    --combinaison : rgba(45, 86, 66, 0.08);
    --backoffice-background : rgba(0, 120, 88, 0.08);

    --statut-contact : #757575;
    --statut-contact-background : rgba(174, 165, 165, 0.24);

    --statut-repondu : #007858;
    --statut-repondu-background : rgba(10, 164, 89, 0.25);

    --statut-favorisPiece : rgb(255, 207, 0);
    --statut-favorisPiece-background : rgba(255, 211, 115, 0.25);

    --statut-inprogressPiece : #6D7BE8;
    --statut-inprogressPiece-background : rgba(80, 94, 227, 0.24);

    --statut-abandon : #D90101;
    --statut-abandon-background : rgba(255, 0, 0, 0.24);
}
body {
    min-height: 100vh;
}
header{
    display: block;
    position: relative;
}
nav{
    width: 100%;
    height: 56px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 5%;
    gap: 5%;
}
nav a,
nav h1{
    color: white;
}
/*formaté les textes*/
a,
li,
span,
label,
textarea,
p{
    font-family: 'Biryani', sans-serif;
    font-style: normal;
    font-size: 14px;
    color: var(--black);
}
h1{
    font-family: 'Biryani', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    color: var(--black);
}
h2{
    font-family: 'Biryani', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    color: var(--black);
}
h3{
    font-family: 'Biryani', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--black);
}
a{
    text-decoration: none;
}


.sub-paragraph{
    font-size: 12px;
    color: var(--black);
}
/*style pour la mise en page*/
.flex-line{
    display: flex;
}
.flex-col{
    display: flex;
    flex-direction: column;
}
.flex-center{
    justify-content: center;
}
.flex-align-center{
    align-items: center;
}
.hide{
    display: none;
}
hr{
    border: 1px solid var(--grey);
}
.full-width-center{
    display: flex;
    width: 100%;
    justify-content: center;
}


.button-primary{
    padding: 8px 16px;
    background-color: var(--primary);
    border-radius: 8px;
    color: white;
    width: fit-content;
    transition: 100ms ease-in-out;
}
.button-primary span{
    color: white;
}
.button-primary:hover{
    background-color: var(--primary-hover);
}

.button-secondaire{
    padding: 8px 16px;
    background-color: var(--secondary);
    border-radius: 8px;
    color: white;
    width: fit-content;
    transition: 100ms ease-in-out;
}
.button-secondaire span{
    color: white;
}
.button-secondaire:hover{
    background-color: var(--secondary-hover);
}

.champs-text{
    display: flex;
    flex-direction: column;
}
.champs-text textarea{
    padding: 16px;
    height: 40px;
    border: 1px solid var(--grey);
    border-radius: 8px;
    box-sizing: border-box;
}
.champs-text input{
    height: 40px;
    border: 1px solid var(--grey);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 16px;
}

.title-wrapper{
    margin-bottom: 24px;
}
.title-wrapper p{
    line-height: 14px;
    opacity: 0.75;
    font-weight: 300;
}

.title-margin-ajust{
    margin-bottom: 16px;
}

.icone{
    margin-right: 8px;
}

.form-container{
    display: flex;
    gap: 10%;
    justify-content: center;
    width: 400px;
    margin: 0 auto;
}

.attribuContentMarge{

    opacity: 0.75;
    list-style-position: inside;
}

.text-center{
    width: 100%;
    text-align: center;
}
.opacity75{
    opacity: 0.75;
}

/*style des cartes métiers*/
.metier{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    border-radius: 8px;
    width: fit-content;
    border: 1px solid var(--grey);
    cursor: pointer;
    background-color: white;
}
.metier p{
    width: 160px;
}
.metier-selected{
    background-color: var(--primary);
}
.metier-selected p{
    color: white;
}

/*style des cartes pièces jointes*/
.piece-jointe{
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--grey);
    box-sizing: border-box;
    background-color: white;
}
.piece-jointe p{
    width: 160px;
    /*si le texte dépasse on met des points*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 16px;
}
.piece-jointe .button-see{
    display: flex;
    align-items: center;
    background-color: var(--secondary);
    padding: 4px;
    border-radius: 16px;
}
.piece-jointe .button-delete{
    display: flex;
    align-items: center;
    background-color: var(--statut-abandon);
    padding: 4px;
    border-radius: 16px;
    margin-left: 16px;
}

/*style des headers*/
header .header-content{
    padding: 32px 80px;
    justify-content: space-between;
    align-items: center;
}
.header-title{
    font-family: 'Calibri', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
}

/*Style des statuts*/
.statut-item,
.statut{
    width: 132px;
    height: 29px;
    background-color: var(--statut-contact-background);
    border-radius: 20px;
    display: flex;
    position: relative;
    cursor: pointer ;
    margin-top: 10px;
}
.menu-item{
    transition: 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-item:hover{
    transform: translate(0, -2px);
}
.statut-item span,
.statut span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-left: 16px;
    margin-top: 4px;
}
.statut-item span::before,
.statut span::before{
    content: "";
    height: 9px;
    width: 9px;
    background-color: var(--statut-contact);
    border-radius: 8px;
    left: 10px;
    display: block;
    position: absolute;
    margin-top: -4px;
}

.statut-repondu{
    background-color: var(--statut-repondu-background);
}
.statut-repondu span::before{
    background-color: var(--statut-repondu);
}

.statut-favoris{
    background-color: var(--statut-favorisPiece-background);
}
.statut-favoris span::before{
    background-color: var(--statut-favorisPiece);
}

.statut-inprogress{
    background-color: var(--statut-inprogressPiece-background);
}
.statut-inprogress span::before{
    background-color: var(--statut-inprogressPiece);
}

.statut-abandon{
    background-color: var(--statut-abandon-background);
}
.statut-abandon span::before{
    background-color: var(--statut-abandon);
}

.statut-container{
    position: relative;
}
.menuStatut{
    position: absolute;
    background-color: #fff;
    top: 32px;
    left: 0px;
    z-index: 1;
    display: none;
    border: 1px solid var(--grey);
    box-shadow: 0px 6px 12px #adabab;
    border-radius: 8px;
    display: none;
    padding: 8px;
    gap: 8px;
}
.playMenuAppear{
    display: flex!important;
    flex-direction: column;
    animation: menuAppear 0.2s forwards;
}
@keyframes menuAppear {
    0% {
        opacity: 0.3;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.menu-item {
    cursor: pointer;
}

#loading-container .card-skeleton{
    height: 400px;
    width: 448px;
    box-sizing: border-box;
}

#loading-container .card-skeleton .card-content{
    width: 100%;
}

.card-content{
    width: 100%;
}
.offre-liste .button-primary{
    margin-bottom: 0 !important;
}
.offre-liste .card-content .header{
    margin-bottom: 0;
}
.offre-liste .body{
    gap: 10px !important;
}
.offre-liste .details-container-column{
    gap: 8px !important;
}
.offre-liste .card-content .header .offer-titler-container{
    height: auto;
}
.offre-liste .statut{
    position: absolute;
    left: 0;
    top: 47px;
}
#ville, .descripteur li{
    margin-left: 0 !important;
    margin-bottom: 0!important;
}

@keyframes wave {
    0% {
        background-position: -100% 0;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.skeleton{
    border-radius: 8px;
    opacity: 1!important;
    background-image: linear-gradient(-90deg, #f3f3f3 0%, #e7e7e7 50%, #f3f3f3 100%);
    background-size: 200% 100%;
    animation: wave 1.5s ease-in-out infinite;
}
.skeleton-title,
.skeleton-text{
    height: 16px;
    width: 100%;
}
.skeleton-title {
    height: 26px;
    width: 100%;
    margin-top: 8px;
}
.skeleton-button{
    height: 40px;
    width: 120px;
    margin-bottom: 16px;
}
.skeleton-statut{
    border-radius: 20px;
}

/*Style générale des cartes offres*/
.offre-card{
    height: fit-content;
    background: white;
    padding: 24px;
    border-radius: 16px;
    position: relative;
    margin-bottom: 80px;
    box-sizing: border-box;
}
.offre-card .header{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.offre-card .header .offer-titler-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}
.offre-card .header .offer-titler-container h3{
    /*afficher 2 lignes maxi*/
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.offre-card .body{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.offre-card .body p{
    opacity: 0.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.offre-card .body a{
    text-decoration: none;
}
.offre-card .body .button-primary{
    margin-bottom: 24px;
}
.offre-card .details-container{
    justify-content: space-between;
    opacity: 0.75;
}
.offre-card .details-container li{
    display: inline;
}
.offre-card .dates{
    position: absolute;
    right: 5px;
    margin-top: 5px;
    opacity: 0.75;
}
.offre-liste .dates{
    position: absolute;
    bottom: 5px;
    right: 340px;
    margin-top: 5px;
    opacity: 0.75;
}
.offre-card .limitdates {
    position: absolute;
    margin-top: 5px;
    left: 5px;
    opacity: 0.75;
}
.offre-liste .limitdates{
    position: absolute;
    right: 5px;
    bottom: 5px;
    margin-top: 5px;
    opacity: 0.75;
}
.metier{
    margin-bottom: .4em;
}
#flash-message {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    background-color: #dff0d8;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#logOrCre{
    text-align: center;
    margin-bottom: 1em;
    font-family: 'Biryani', sans-serif;
    font-style: normal;
    font-weight: bold;
}
input[type="date"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    width: 220px;
    margin-top: 5px;
    font-family: 'Biryani', sans-serif;
}
@media screen and (max-width: 768px) {
    .form-container{
        flex-direction: column;
        width: 100%;
        margin: 0;
    }
}