/* DEBUGUEUR PERSO
/* Enlever les commentaire pour faire apparaitre des bordures rouge à chaque élément du dom 
* {
    outline: 1px solid red;
} 
*/

* {
    box-sizing: content-box;
}

/* VARIABLE COULEURS */
/* Syntaxe pour déclarer une variable exemple: var(--nomdevariable); */
:root {
    --green: #00A99B;
    --light-green: #00dac7;
    --dark-green: #00867b;
    --gray: #2F3E47;
    --light-gray: #4e6877;
    --dark-gray: #232e35;
    --light-background: #e3f2f5;
    /* TAILLE DE BASE DES PHOTOS PAR CLASS : S / M / L  */
    --s-row-height: 259px; /* 288 origin size */
    --m-height: 540px; /* 600 origin size */
    --l-width:  742px; /* 824 origin size */
    --s-m-column-width: 360px; /* 400 origin size */
}

/* TYPOGRAPHIE */
@font-face {
    font-family: 'AtkNorm';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/atkinson-hyperlegible-v7-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/atkinson-hyperlegible-v7-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/atkinson-hyperlegible-v7-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/atkinson-hyperlegible-v7-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/atkinson-hyperlegible-v7-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/atkinson-hyperlegible-v7-latin-regular.svg#AtkinsonHyperlegible') format('svg');
    /* Legacy iOS */
}

@font-face {
    font-family: 'AtkBold';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/atkinson-hyperlegible-v7-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/atkinson-hyperlegible-v7-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/atkinson-hyperlegible-v7-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/atkinson-hyperlegible-v7-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/atkinson-hyperlegible-v7-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/atkinson-hyperlegible-v7-latin-700.svg#AtkinsonHyperlegible') format('svg');
    /* Legacy iOS */
}

html {
    height: 100%;
}

body {
    font-family: 'AtkNorm';
    height: 100%;

}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'AtkBold';
    color: var(--gray);
}

h1 {
    font-size: 2.3rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.4rem;
}

a {
    color: blue;
}
a:hover {
    color: white;
    text-decoration: none;
}

/* FIN TYPOGRAPHIE */


/* DEBUT SECTION LAYOUT*/
/*.container {
    max-width: calc(75rem + 2rem * 2);*/ /* 2rem * 2 for the padding */
  /*  padding-right: 2rem;
    padding-left: 2rem;
    margin-right: auto;
    margin-left: auto;
}*/

header {
    /*position: fixed;
    width: 100%;
    z-index: 100000;
    background-color: var(--dark-green);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;*/
}

section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

section.hero-section {
    position: relative;
    /*background-image: url(../img/bandeau_LAB-BIO-M4-08.jpg);
    padding-top: 10rem;
    padding-bottom: 5rem;
    min-height: 20rem;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--light-background);
}
section.hero-section .bandeau {
     padding: 120px 0 10px 0;
}
section.event-section {
    background-color: white;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

section.composante-section {
/*    padding-top: 4rem;
    padding-bottom: 4rem;*/
    background-color: var(--light-background);
}

section.formulaire-section {
    margin-top: 10rem;
}

section.presse-section {
    margin-top: 6rem;
    min-height: calc(100vh - 12rem);
}

section.galerie-section {
    margin-top: 10rem;
    min-height: 75vh;
}

section.propose-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

section.advanced-section {
    margin-top: 10rem;
    padding-bottom: 4rem;
    min-height: 70vh;
}

section.evenements-section {
    margin-top: 10rem;
    min-height: 75vh;
}


footer {
    background-color: rgb(65, 65, 65);
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: white;
}

/*FIN SECTION LAYOUT */


/* HEADER STYLE */
header>.container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}

.logo-tours {
    width: 7rem;
    height: 2rem;
}
#logo-tours-header {
    margin-left: 1.5rem;
}



#header-search-bar {
    padding-left: .7rem;
    border: none;
    border-radius: 0rem;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
    height: 1.9rem;
    width: clamp(5rem, 45vw, 25rem);
}
#header-search-bar.rechAvancee {

    border-radius: 0.5rem;
}

#header-search-bar:hover,
#header-search-bar:focus {
    outline: 2px solid var(--light-gray);
}

.nav-button {
    position: absolute;
    left: 1.5rem;
    bottom: 0;
    display: block;
    opacity: 0;
    height: 1.5rem;
    width: 1.2rem;
    cursor: pointer;
    z-index: 9;
}

/* Burger menu */
.nav-span {
    z-index: 8;
    position: absolute;
    left: 28px;
    width: 1.2rem;
    height: 2px;
    border-radius: .5rem;
    background-color: var(--gray);
    color: rgb(180, 252, 255);
    cursor: pointer;
    transition: transform 0.4s ease-in-out;
}

.span1 {
    bottom: 20px;
}

.span2 {
    bottom: 15px;
}

.span3 {
    bottom: 10px;
}

.nav-button:checked ~ .span1{
    bottom: 15px;
    transform: rotate(45deg);
}
.nav-button:checked ~ .span2{
    display: none;
}
.nav-button:checked ~ .span3{
    bottom: 15px;
    transform: rotate(-45deg);
}





.header-menu-list {
    position: absolute;
    left: 0;
    top: 56px;
    padding-top: 3rem;
    background-color: var(--light-gray);
    border-bottom-right-radius: 2rem;
    min-width: 10rem;
    min-height: 15rem;
    transform: translateX(-150%);
    transition: transform .5s ease-in-out;
}
.nav-button:checked ~ .header-menu-list {
    transform: translateX(0);
}



.header-menu-item {
    text-align: center;
    position: relative;
    font-size: 1.2rem;
    margin-bottom: .5rem;
    margin-top: .5rem;
}
.menu-header-link {
    color: white;
}


@media (min-width:764px) {
    #logo-tours-header {
        display: block;
        margin-left: 0;
    }

    .nav-span,
    .nav-button {
        display: none;
    }

    .header-menu-list {
        position: inherit;
        min-width: 5rem;
        min-height: 0;
        display: flex;
        gap: 1rem;
        background-color: transparent;
        padding: 0;
        transform: translateX(0);
    }

    .header-menu-item {
        font-size: 1.2rem;
        margin-bottom: 0;
        margin-top: 0;
    }

    .header-menu-item:hover:after,
    .header-menu-item:focus:after {
        /*border-bottom: 3px solid var(--light-green);*/
        content: "";
        display: block;
        position: absolute;
        top: 25px;
        width: 100%;
        height: .2rem;
        background-color: var(--light-green);
        border-radius: 6rem;
    }
}
    .autocomplete-parent-div,
    .autocomplete-parent-div-hero {
        position: relative;
        z-index: 1;
    }
    

    .autocomplete-div,
    .autocomplete-div-hero {
        background-color: var(--white);
        position: absolute;
        top: 35px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .autocomplete-div-hero {
        top: 40px;
        width: clamp(6rem, 80%, 20rem);
        margin-left:  0 !important;
    }
    .autocomplete-item {
        display: block;
        cursor: pointer;
        /*color: white;
        border: 1px solid gray;*/
        min-height: 1.9rem;
        text-align: left;
    }
    .autocomplete-item:hover, 
    .autocomplete-item:focus {
        background-color: var(--light-green);
        color: var(--white);
    }
    .autocomplete-div-hero ul, .autocomplete-div ul {
        padding-left:  0 !important;
       text-indent:  10px !important;
       margin-bottom:  0 !important;
    }
    
    

/* FIN HEADER STYLE */
/* ----------------*/
/*DEBUT HERO STYLE */
/*.hero-section>.container {
    margin-top: 4rem;
    padding-bottom: 10rem;
}*/

.hero-title {
    color: white;
}
.hero-paragraph {
    color: white;
    font-style: italic;
}

#hero-search-bar {
    /*border: none;
    padding-left: 0.7rem;
    border-radius: .1rem;
    margin-bottom: .5rem;
    height: 2.3rem;
    width: clamp(10rem, 80%, 30rem);*/
}

#hero-search-bar:hover,
#hero-search-bar:focus {
    outline: 1px solid var(--light-gray);
}

select {
 /*   border: none;
    height: 1.8rem;
    border-radius: .2rem;
    margin-top: .4rem;
    margin-bottom: .2rem;
    max-width: 10rem;
    background-color: var(--light-gray);
    color: white;
    cursor: pointer;*/
}

/* Style des boutons submit de => Index.html / Contact.html */
#hero-submit,
#form-submit {
    /*margin-top: 1rem;
    background-color: white;
    height: 2.3rem;
    width: clamp(6rem, 15vw, 10rem);
    border-radius: .2rem;
    border: none;
    background-color: var(--light-gray);
    color: white;
    cursor: pointer;*/
}

#hero-submit:hover,
#hero-submit:focus,
#form-submit:hover,
#form-submit:focus {
    /*color: var(--light-gray);
    background-color: white;*/
}

.advanced-link  {
    display: block;
    max-width: 9rem;
    color: white;
    margin-top: 1rem;
    margin-left: 1rem;
    padding: .3rem 1rem .3rem 1rem;
    background-color: var(--light-gray);
    border-radius: .1rem;
}

.scroller {
    position: absolute;
    bottom: 3rem;
    right: 50%;
    height: 3rem;
}
/* FIN HERO STYLE */

/* DEBUT EVENT STYLE */

.event-paragraph {
    margin-bottom: 2rem;
}

/* COMPOSANTE DEBUT */
.composante-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.composante-item {
    position: relative;
    background: rgb(47, 62, 71);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: .3rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 2rem 1rem .2rem 1rem;
    min-height: 8rem;
    max-width: 25rem;
    min-width: 14rem;
}



.composante-content-link {
    position: absolute;
    bottom: 78%;
    color: var(--gray);
    background-color: rgb(252, 243, 243);
    border-radius: 2rem;
    padding: .5rem 1rem .5rem 1rem;
}

.composante-content-link:hover,
.composante-content-link:focus {
    background-color: var(--gray);
    color: white;
}

/*COMPOSANTE FIN */

/* CAROUSSEL DEBUT */
#carousel {
    position: relative;
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-bottom: 2rem;
}


#prev,
#next {
    display: flex;
    justify-content: center;
    align-content: center;
    background: var(--light-gray);
    border: none;
    padding: 8px;
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
    position: absolute;
}

#prev {
    left: 0;
    transform: translate(50%, -50%);
    display: none;
}

#next {
    right: 0;
    transform: translate(-50%, -50%);
}

#content {
    display: grid;
    grid-gap: 16px;
    grid-auto-flow: column;
    margin: auto;
    box-sizing: border-box;
}

.team-grid .item {
    position: relative;
    color: white;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*border: 1px solid gray;*/
    padding: 15px 1.3rem 15px 1.3rem;
    min-height: 14rem;
    background-size: cover;
    background-repeat: no-repeat;

}
.slider .item,
.evenements-list .item{
    /*position: relative;
    color: white;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;*/
    /*border: 1px solid gray;*/
    /*padding: 15px 1.3rem 15px 1.3rem;
    width: 180px;*/

    border-radius: 1rem;
    border: 5px solid #FFF;
    min-height: 14rem;
    background-origin: border-box;
    background-size: cover;
    background-repeat: no-repeat;
}


.title-item {
    color: rgb(255, 255, 255);
    line-height: 1;
}
.title-item::after {
    content: "";
    display: block;
    width: 100%;
    height: .1rem;
    background-color: white;
}



.evenements-list .item-link,
.slider .item-link{
    position: absolute;
    bottom: 5px;
    /*background-color: white;
    color: var(--dark-gray);*/
    padding: .5rem 2rem;
    border-radius: .4rem;
}

.slider .item-link{
    bottom: 45px;
}

.item-link:hover,
.item-link:focus {
    background-color: #FFF !important;
    color: var(--dark-gray) !important;
}

/* CAROUSSEL FIN */

/* PROPOSE DEBUT */

.propose-paragraphe {
    font-size: 1.2rem;
    font-style: italic;
}
.propose-mail {
    display: block;
    color: var(--gray);
    margin-right: auto;
    margin-left: auto;
    margin-top: 1.5rem;
    text-align: center;
    width: 8rem;
    border: 1px solid var(--gray);
    padding: .6rem 1.5rem .6rem 1.5rem;
    border-radius: .2rem;
}
.propose-mail:hover, 
.propose-mail:focus {
    background-color: var(--gray);
    color: #FFF;
}

.propose-list {
    margin-top: 1rem;
    list-style: square;
}
.propose-item {
    font-size: 1.1rem;
}

/* PROPOSE FIN */
/* FOOTER DEBUT */
/*footer>.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}*/

.footer-paragraph {
    font-size: .8rem;
    max-width: 12rem;
}

.social-list {
    display: flex;
    flex-direction: row;
    gap: .4rem;
}

.social-link>img {
    width: 2rem;
    height: 1.7rem;
}

@media (max-width:764px) {
    .footer-paragraph {
        visibility: hidden;
    }

}

/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/*                                              CSS PAGE CONTACT                                              */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

/* DEBUT SECTION FORM */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    /*padding-top: 2rem;
    padding-bottom: 2rem;*/
    margin-right: auto;
    margin-left: auto;
    max-width: 50rem;
}

.contact-form::before,
.contact-form::after {
    content: "";
    display: block;
    height: .1rem;
    width: 100%;
    margin: 0.6rem auto 0.6rem auto;
    background-color: var(--light-green);
}

#form-message {
    font-size: 1.1rem;
    font-family: 'AtkNorm';
    height: 8rem;
    border: none;
    border-radius: .2rem;
    background-color: var(--light-background);
}

#form-submit {
    margin-right: auto;
    margin-left: auto;
}

.input-names {
    border: none;
    background-color: var(--light-background);
    height: 2rem;
    /*width: clamp(15rem, 70vw, 60%);*/
    border-radius: .2rem;
    font-family: 'AtkNorm';
    font-size: 1.3rem;
    color: var(--gray);
}

.input-names:hover,
.input-names:focus,
#form-message:hover,
#form-message:focus {
    outline: 1px solid var(--light-gray);
}

/* FIN SECTION FORM */

/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/*                                              CSS PAGE PRESSE                                               */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

/* DEBUT SECTION PRESSE */

.presse-paragraph1::after {
    content: "";
    display: block;
    height: .1rem;
    width: 100%;
    margin: 2rem auto 2rem auto;
    background-color: var(--light-green);
}

.presse-mail-link {
    display: inline-block;
    margin-top: 2rem;
    padding: .3rem .7rem .3rem .7rem;
    border-radius: .2rem;
    background-color: var(--green);
    color: var(--light-gray);
}

.presse-mail-link:hover,
.presse-mail-link:focus {
    background-color: var(--dark-gray);
    color: var(--light-green);
}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/*                                              CSS PAGE RECHERCHE                                            */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

.galerie-result {
    display: inline-block;
    min-width: 1rem;
    border-bottom: 2px solid var(--light-gray);
}

.tag-match-research {
    background-color: #2c3e50;
    margin-right: 10px;
    margin-left: 10px;
    color: white;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 3px;
    cursor: pointer;
}
.tag-match-reasearch::hover {
    text-decoration: line-through;
}

.galerie-tag-paragraph {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.galerie-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.galerie-tag-list::after {
    content: "";
    display: block;
    height: .1rem;
    width: 100%;
    margin: 1.5rem auto 1.5rem auto;
    background-color: var(--light-green);
}

.galerie-delete-btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

#load-more {
    width: 15rem;
    margin-right: auto;
    margin-left: auto;
}

/*.galerie-tag {
    display: inline-block;
    border: 1px solid var(--light-gray);
    border-radius: 1rem;
    padding: 0 5px;
    margin: 5px;
    background-color: var(--light-gray);
    color: white;
    min-width: 1rem;
}*/
.galerie-tag {
  /*background-color: #2c3e50;
  margin-bottom: 10px;
  color: white;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 2px;*/
  margin:2px;
}
.galerie-tag .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
}

.footer-tag-date, .footer-tag-clic {
    color: #2c3e50;
    font-size:  0.675rem;
}
.galerie-delete-btn:hover,
.galerie-delete-btn:focus {
    outline: none;
    color: red;
}

.filter-div {
    display: flex;
    margin-bottom: 2rem;
    gap: 7rem;
    align-items: center;
    justify-content: center;
}
.switch-order {
    border: 1px solid var(--dark-gray);
    border-radius: .5rem;
    background-color: transparent;
    font-size: 1.5rem;
    cursor: pointer;
}
.order, 
.year {
    display: flex;
    align-items: center;
    gap: .6rem;
}
@media (max-width:415px) {
    .order p,
    .year p {
        display: none;
    }
}

/* Bout de code pour background en mosaïque */
/*background: conic-gradient(var(--gray) 90deg, var(--green) 90deg 180deg, var(--gray) 180deg 270deg, var(--green) 270deg) top left / 20px 20px repeat;*/

/* GRID STYLE */
.grid{
    display:grid;
    gap: 1rem;
    justify-content: center;
    align-items: center;	
    margin-bottom: 2rem;
    grid-template-columns: repeat(auto-fill, 300px);
    /* Auto row doit être égal à la hauteur de la plus petit image */
    /* La hauteur de la plus grande image doit être un multiple de la hauter de la plus petite */
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
}

.img-div {
    position: relative;
}

.card-img-top:hover {
    cursor: pointer;
}
.img-div img {
    width: 100%;
    height: 100%;
    max-height: 200px;
    object-fit: contain;
}
.img-infos {
    /*transition: .5s ease;*/
    /*position: absolute;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*width: 100%;*/
   /* max-height: 100%;*/
    /*background-color: rgba(0, 0, 0, 0.550);*/
    /*bottom: 0;*/
    /*opacity: 1;*/
    /*font-size: 0.8rem;*/
    /*padding-top: 1.5rem;
    padding-bottom: 1.5rem;*/
}

.img-infos.card-body {
    padding: 0.1rem 0.1rem;

}
.img-infos .text-tag {
    color: #FFF;
    text-align: center;
}
.logo-download {
    transition: .5s ease;
    position: absolute;
    top: 1rem;
    right: 2rem;
    height: 1.8rem;
    width: 2rem;
    opacity: 0;
}
.img-div:hover .img-infos,
.img-div:hover .logo-download {
    opacity: 1;
}
.img-infos .img-tag-list {
    /*display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;*/
   /*width: 75%;*/
    /*justify-content: center;*/
    padding-left: 0px;
    margin-bottom: 0;

}


@media (max-width:1260px) {
    .img-tag-list .galerie-tag {
        font-size: .7rem;
    }
    .logo-download {
        height: 1.4rem;
        width: 1.5rem;
    }
}
@media (max-width:595px) {
    .img-infos {
        display: none;
    }
    .logo-download {
        display: none;
    }
}

.s,
.m,
.l {
    /*
    max-width: 100%;
    height: auto; */
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
}

.galerie-img {

    width:100%;
    height:30rem;
    cursor: pointer;
    object-fit:cover;
}

.message-break-img > p {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    
}
/* DEFINIT LE NOMBRE DE COLONNE / LIGNE QUE L'ELEMENT PREND */
.s{
    height: 230px;
    max-height: var(--s-row-height);
    grid-column-end: span 1;
    grid-row-end:span 1;
}

   
.m{
    height: 480px;
    max-height: var(--m-height);
    grid-column-end: span 1;
    grid-row-end:span 2;
}
   
.l{
    height: 480px;
    max-width: var(--l-width);
    grid-column-end: span 2;
    grid-row-end:span 2;
}



@media (max-width:1260px) {
    .grid {
        grid-template-columns: repeat(3,250px);
        grid-auto-rows: auto;
        gap: 1rem;
    }
    .s {
        max-height: 200px;
    }
    .m {
        max-height: 425px;
    }
    .l {
        max-width: 510px;
        max-height: 425px;
    }
}

/* Passe juste à deux colonne */
@media (max-width:942px) {
    .grid {
        grid-template-columns: repeat(2, calc(var(--s-m-column-width)* 0.70));
    }


}

@media (max-width:595px) {
    .grid {
        grid-template-columns: repeat(2, calc(var(--s-m-column-width)* 0.4));
        grid-auto-rows: 200px;
        gap: calc(1.5rem * 0.4);
    }
    .s {
        max-height: 200px;
    }
    .m {
        max-height: 200px;
        grid-row-end:span 1;
    }
    .l {
        max-width: calc(var(--l-width) * 0.4);
    }
}

/* DEBUT LIGHTBOX */
.lightbox {
    position: fixed;
    top: 20rem;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000000000909090;
    background-color: rgba(255, 255, 255, 0.856);
    min-height: 40rem;
    overflow-y: hidden;
}
.lightbox-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    max-width: clamp(10rem, 70%, 35rem);
    margin-right: auto;
    margin-left: auto;
}

/* Gere l'affichage de l'image dans la modal */
.lightbox-img {
    height: 20rem;
    width: 30rem;
    background-size: contain;
}
.lightbox-close {
    border: none;
    background-color: red;
    color: white;
    height: 2rem;
    width: 2rem;
    border-radius: .2rem;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus {
    background-color: white;
    color: red;
}
.lightbox-prev, 
.lightbox-next {
    font-size: 3rem;
    border: none;
    background-color: transparent;
    color: #949494;
    position: absolute;
    cursor: pointer;
}
.lightbox-next {
    right: -5rem;
}
.lightbox-prev {
    left: -5rem;
}
@media (max-width: 620px) {
    .lightbox-next,
    .lightbox-prev {
        bottom: -5rem;
    }
    .lightbox-next {
        right: 0;
    }
    .lightbox-prev {
        left: 0;
    }
    .lightbox {
        padding-top: 9rem;
        align-items: flex-start;
    }
}

.dowload-input {
    display: none;
}
.dowload-input:checked + .dowload-label{
    background-color: var(--light-green);
}
.dowload-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    width: 100%;
}
.download-legend {
    text-align: center;
}
.dowload-label {
    background-color: var(--gray);
    color: white;
    border: 1px solid gray;
    border-radius: .3rem;
    display: block;
    padding: .5rem 1rem;
    cursor: pointer;
}
.download-valide {
    padding: .3rem .7rem;
    cursor: pointer;
}

.download-img {
    padding: .3rem 1rem;
    background-color: white;
    border: 1px solid gray;
    border-radius: .3rem;
    color: var(--gray);
}
.download-img:hover, 
.download-img:focus {
    color: white;
    background-color: var(--gray);
}



/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/*                                              CSS PAGE ADVANCED                                              */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

.advanced-form {
    position: relative;
    display: flex;
    gap: 1rem;
}
.advanced-div {
    display: flex;
    justify-content: space-around;
    gap: 4rem;
    margin-top: 5rem;
}

.advanced-arrow {
    position: absolute;
    top: 50%;
    height: 3rem;
}

.tag-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 20rem;
    max-width: 25rem;
    max-height: 15rem;
    border-radius: .3rem;
    overflow-y: auto;
    padding: .6rem 1rem;
    background: #FFF;
}
.choix-paragraphe {
    width: 100%;
}

.tags-item-search {
    display: flex;
    align-items: center;
    height: 2rem;
    border-radius: .3rem;
    padding: .2rem .4rem;
    background-color: rgba(128, 128, 128, 0.363);
}
.cross-tag-search {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.advanced-form .advanced-search{
    padding-left: 1rem;
    height: 2rem;
    width: 40%;
    min-width: 15rem;
    border: none;
    outline: none;
}
.advanced-form .advanced-search-clear {
    position: absolute;
    bottom: -3.2rem;
    background-color: white;
    color: white;
    border: 1px solid var(--light-gray);
    border-radius: .2rem;
    cursor: pointer;
    width: 2rem;
    height: 2.2rem;
    background-image: url(../img/trash.png);
    background-size: 25px;
    background-position: center;
    background-repeat: no-repeat;
}
.advanced-form .advanced-search-submit {
    position: absolute;
    right: 0;
    bottom: -3.2rem;
    background-color: var(--gray);
    color: white;
    border: 1px solid var(--light-gray);
    border-radius: .2rem;
    cursor: pointer;
    height: 2.2rem;
}
.advanced-search-submit:hover, 
.advanced-search-submit:focus { 
    background-color: white;
    color: var(--gray);
}

.advanced-modal {
    display: none;
    flex-direction: column;
    background-color: white;
    position: absolute;
    border: 1px solid var(--light-gray);
    border-radius: .1rem;
    height: 20rem;
    width: 60%;
    min-width: 15rem;
    padding-left: 1rem;
    padding-bottom: 1rem;
    top: 3rem;
    right: 0;
    left: 0;
}
.top-div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}
.top-title, .tags-title {
    font-size: 1rem;
}
.top-ul {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.top-item {
    color: var(--gray);
    border: 1px solid var(--light-green);
    padding: .4rem 1.5rem .4rem 1.5rem;
    border-radius: .2rem;
    cursor: pointer;
}
.top-item:hover, 
.top-item:focus {
    background-color: var(--light-green);
}

.tags-div {
    display: flex;
    flex-direction: column;
    border-radius: .3rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    /*gap: .5rem;
    margin-top: 1rem;*/
    width: 20rem;
    padding: 1rem 2rem;
    height: 15rem;
    background-color:#FFF;
    overflow-y: scroll;
}

.tags-item {
    cursor: pointer;
}
.tags-item-para {
    margin: 0;
}
.container1 {
    position: relative;
}
.container2 {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: start;
}
.tags-search {
    /*position: absolute;
    top: -2.1rem;
    right: 25px;
    padding-left: 1rem;
    margin-top: 1rem;
    height: 1.8rem;
    min-width: 80%;*/
    width: 20rem !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

@media (max-width: 1092px) {
    .advanced-div {
        flex-direction: column;
        justify-content: center;
    }
    .advanced-arrow {
        display: none;
    }
}

/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/*                                              CSS ajout seb                                                   */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

a.link-cover {
    font-size:  2rem;
    text-decoration: none;
    color:  white;
}
a.link-cover:hover {
    color:  white;
}
.error {
    color: red;
}
.awesomplete ul {
    text-align: left !important;
    font-weight: bold;
    text-transform: uppercase;
}