@font-face {
    font-family: 'Monstserrat'; /* Nom que tu donnes à ta police */
    src: url('resources/fonts/MONTSERRAT-REGULAR.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Monstserrat'; /* Nom que tu donnes à ta police */
    src: url('resources/fonts/MONTSERRAT-BOLD.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Monstserrat'; /* Nom que tu donnes à ta police */
    src: url('resources/fonts/MONTSERRAT-MEDIUM.TTF') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Monstserrat'; /* Nom que tu donnes à ta police */
    src: url('resources/fonts/MONTSERRAT-SEMIBOLD.TTF') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Monstserrat'; /* Nom que tu donnes à ta police */
    src: url('resources/fonts/MONTSERRAT-LIGHT.TTF') format('truetype');
    font-weight: lighter;
    font-style: normal;
}

body, html {
    background-color: black;
    display:block;
    margin: 0;
    padding: 0;
    height: auto;
    width: 100%;

}

a {
    text-decoration: none; /* Supprime le soulignement */
}

h1
{
    font-family: 'Montserrat', sans-serif;
    font-size: 92px;
    text-align: center;
    color: #c03333;
    text-shadow: 8px 5px 5px #000000cc;
}

h2
{
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    color: #c03333;
    text-shadow: 5px 3px 5px #000000cc;
}

h3
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    color: #c03333;
}


/**************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/
/* CONTENU COMMUN - CONTENU COMMUN - CONTENU COMMUN - CONTENU COMMUN - CONTENU COMMUN */
/**************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/





/*******************/
/* Page principale */
/*******************/
.main-page {
    display: block;
    opacity: 0; /* Masquée par l'opacité */
    transition: opacity 1.5s ease-in; /* Transition adoucie */
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background-image: linear-gradient(45deg, black 0%, #B02456 100%);
}

.menu-wide {
    z-index: 3; /* Priorité au-dessus du slider */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f0f0f0; /* Couleur de fond du bandeau */
    padding: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.menu-button {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.35em;
    cursor: pointer;
    background-color: #f0f0f0;
    border: none;
    border-radius: 0px;
    transition: background-color 0.3s;
    color: #333; /* Couleur du texte */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.7vh;
    text-align: center;
}


/******************/
/* Menu principal */
/******************/
.home-button {
    width: 8%;
    height: 8vh; 
}

.home-button img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.menu-button {
    height: 7.5vh;
}

.menu-button:nth-of-type(1) {
    width: 22.5%;
}

.menu-button:nth-of-type(2) {
    width: 22.5%;
}

.menu-button:nth-of-type(3) {
    width: 22.5%;
}

.menu-button:nth-of-type(4) {
    width: 22.5%;
}

.menu-button:nth-of-type(5) {
    width: 22.5%;
}

.logo-link {
    display: block;
    width: 10%;
    height: 8vh;
}

.logo-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menu-button:hover, .menu-button.active {
    background-color: #c03333;
    color: #f0f0f0; 
}


/**************/
/* Sous-menus */
/**************/
.submenu {
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    display: none; /* Caché par défaut */
    position: absolute;
    background-color: #444; /* Couleur de fond des sous-menus */
    padding: 0.5%;
    border-radius: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease-in-out; /* Transition d'opacité pour un fade-out rapide */
    width: 21.5%;
}

.submenu.show {
    display: block;
    opacity: 1; /* Sous-menu visible */
}


.submenu1 {
    top: 100%; /* Positionné sous le bouton "Placeholder 1" */
    left: 0%;
}

.submenu2 {
    top: 100%; /* Positionné sous le bouton "Placeholder 2" */
    left: 22.5%; /* Aligné avec "Placeholder 2" */
}

.submenu4 {
    top: 100%; /* Positionné sous le bouton "Placeholder 4" */
    left: 77.5%; /* Aligné avec "Placeholder 4" */
}

/**************************************************************/
/* Contenu des sous menus et apparition animée des sous-menus */
/**************************************************************/
.submenu-item {
    display: block;
    color: #f0f0f0; /* Couleur du texte */
    padding: 10px 15px;
    text-decoration: none;
    transform: translateX(-20%);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    font-size: 1.25em;
}

.submenu-item:hover {
    background-color: #c03333;
}

.submenu-item:not(:last-child) {
    margin-bottom: 5px; /* Espace entre les éléments */
}

.submenu-item.appear {
    opacity: 1;
    transform: translateX(0);
}


/************************************/
/* Menu portable / fenêtre retrecie */
/************************************/
.menu-tight {
    z-index: 3; /* Priorité au-dessus du slider */
    display: flex;
    width: 100%;
    height: 8vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f0f0f0; /* Couleur de fond du bandeau */
    padding: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    align-content: center;
}


/***************/
/* Burger Menu */
/***************/
#menu__toggle 
{
    opacity: 0;
}

#menu__toggle:checked + .menu__btn > span 
{
    transform: rotate(45deg);
}

#menu__toggle:checked + .menu__btn > span::before 
{
    top: 0;
    transform: rotate(0deg);
}

#menu__toggle:checked + .menu__btn > span::after 
{
    top: 0;
    transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box 
{
    left: 0 !important;
}

#sub__menu__toggle:checked + .menu__btn > span
{
    opacity: 0;
}

#sub__menu__toggle:checked ~ .menu__btn > span::before
{
    opacity: 0;
}

#sub__menu__toggle:checked + .menu__btn > span::after
{
    opacity: 0;
}

.menu__btn 
{
    position: fixed;
    top: 0;
    left: 2vh;
    width: 3.5vh;
    height: 8vh;
    cursor: pointer;
    z-index: 1;
    align-content: center;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after 
{
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #c03333;
    transition-duration: .25s;
}

.menu__btn > span::before 
{
    content: '';
    top: -8px;
}

.menu__btn > span::after 
{
    content: '';
    top: 8px;
}

.hamburger-menu
{
    height: 0;
    width: 0;
    align-items: center;
}

.menu__box 
{
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
}

.menu__item 
{
    cursor: pointer;
    display: block;
    padding: 12px 24px;
    color: #444;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
}


.menu__item:hover
{
    background-color: #aaaaaa;
    color: #c03333;
}


#sub__menu__toggle 
{
    opacity: 0;
}

#sub__menu__toggle:checked ~ .sub__menu__box 
{
    left: 0 !important;
}


.sub__menu__box 
{
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    list-style: none;
    background-color: #ECEFF1;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
    transition-duration: .25s;
    z-index: 2;
}


.sub__menu__item 
{
    cursor: pointer;
    display: block;
    padding: 12px 24px;
    color: #444;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .25s;
    z-index: 3;
}


.sub__menu__item:hover
{
    background-color: #aaaaaa;
    color: #c03333;
}


/***********/
/* GALLERY */
/***********/
.image-viewer-div
{
    position: absolute;
    left:0%;
    top:0%;
    width: 100%;
    height: 100vh;
    background-color: #000000dd;
    z-index: -100;
    align-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}

.image-viewer-exit
{
    position: absolute;
    top: 6%;
    right: 2.5%;
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    font-weight: bold;
    color:#ECEFF1;
    transition: color 0.2;
}

.image-viewer-exit:hover
{
    color:#c03333;
}

.image-viewer-div.show
{
    cursor: pointer;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

.image-viewer-img-viewport
{
    display: flex;
    align-self: center;
    position: relative;
    width: 80%;
    height: 75%;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
}


.image-viewer-img
{
    -ms-transform: scale(0); /* IE 9 */
    -webkit-transform: scale(0); /* Safari 3-8 */
    transform: scale(0);
    
    display: none;
    opacity: 0;
    cursor: zoom-in;
    margin-left: auto;
    margin-right: auto;
    transition: opacity 0.1s, transform .1s;
    border-radius: 5px;
    transform-origin: top left;
}

.image-viewer-img.show
{
    display: inline-block;
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari 3-8 */
    transform: scale(1);
}

.image-viewer-img.zoom
{
    cursor: zoom-out;
    -ms-transform: scale(2.0); /* IE 9 */
    -webkit-transform: scale(2.0); /* Safari 3-8 */
    transform: scale(2.0);
}




/**********/
/* FOOTER */
/**********/
.footer
{
    background-color: #333;
    width: 100%;
    height: 15vh;
    align-content: center;
    margin-top: 2.5vh;
}

.footer-text
{
    margin-left: 5vw;
}


.footer-text-normal
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25em;
    color:#aaaaaa;
    margin-bottom: 0px;
}

.footer-text-small
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color:#aaaaaa;
    margin-top: 0px;
    text-decoration: none;
}

.footer-text-infos
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color:#aaaaaa;
    margin-top: 0px;
    text-decoration: underline;
}

.footer-text-infos:hover {
    color: #EF9024;
}


.global-desc-text
{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.65em;
    color: #f0f0f0;
}

.global-desc-text-small
{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.35em;
    color: #f0f0f0;
}


.mail-to
{
    color: white;
    font-weight: bold;
    text-decoration: underline;
}

.mail-to:hover {
    color: #EF9024;
}

/*********/
/* FORMS */
/*********/
.form-triple-input
{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2vw;
}

.form-single-input 
{
    display: grid;
    align-items: center;
    height: 100%;
}

.form-field 
{
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    color: #f0f0f0;
    border-radius: 5px;
    padding: 0.7rem 1rem;
    background-color: transparent;
    border: none;
    width: 100%;
    box-sizing: border-box;
    outline: 1px solid #fff;
    transition: outline 0.3s;
    transition: background-color 0.3s;
}

.form-field:focus 
{
    outline: 1px solid #EF9024;
    background-color: #ffffff22;
}

.form-label 
{
    font-family: "Montserrat", sans-serif;
    color: #f0f0f055;
    justify-self: start;
    transition-property: transform, padding, font-size;
    transition-duration: 0.3s;
    margin: 0 1rem;
    pointer-events: none;
}

.form-label,
.form-field 
{
    grid-column-start: 1;
    grid-row-start: 1;
}

.form-field:focus ~ .form-label,
.form-field:not(:placeholder-shown) ~ .form-label 
{
    transform: translateY(-220%) translateX(-20%);
    font-size: 0.7rem;
    color: #f0f0f0;
}

.form-single-input ::placeholder 
{
    color: transparent;
}

.form-invalid .form-field 
{
    outline: 1px solid #c03333;
}

.form-invalid .form-label 
{
    color: #c03333;
}

.form-error 
{
    font-family: "Montserrat", sans-serif;
    color: #c03333;
}

.form-submit
{
    position:relative;
    width: 30%;
    height: 120%;
    left: 70%;
    border-radius: 5px;
    border: none;

    font-family: "Montserrat", sans-serif;
    font-size: 1.25em;

    transition: background-color 0.3s;
}

.form-submit:hover
{
    color: #f0f0f0;
    background-color: #c03333;
    cursor: pointer;
}

.classic-carousel-arrow-left
{
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:4em;
    background:none;
    border:none;
    color:#EF9024;
    cursor:pointer
}

.classic-carousel-arrow-right
{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:4em;
    background:none;
    border:none;
    color:#EF9024;
    cursor:pointer
}

.classic-carousel-cross
{
    position:absolute;
    top: 10px;
    right: 10px;
    font-size: 3em;
    background: none;
    border: none;
    color: #EF9024;
    cursor: pointer;
}

.classic-carousel-arrow-left:hover
{
    color: #c03333;
}

.classic-carousel-arrow-right:hover
{
    color: #c03333;
}

.classic-carousel-cross:hover
{
    color: #c03333;
}

/*************/
/** RESIZES **/
/*************/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{ 
    .menu-wide
    {
        display:none;
    }

    
    .menu-tight
    {
        display:flex;
    }

    .logo-link
    {
        display: block;
        margin-left: 25%;
        width: 50%;
        height: 8vh;
    }

    h1
    {
        font-size: 1.75em;
    }

    h2
    {
        font-size: 1.25em;
    }

    h3
    {
        font-size: 1.125em;
    }

    .global-desc-text
    {
        font-size: 0.8em;
        text-align: justify;
    }

    .global-desc-text-small
    {
        font-size: 0.75em;
    }

    .no-margin
    {
        margin: 0px;
    }


    .footer
    {
        background-color: #333;
        width: 100%;
        height: 18vh;
        align-content: center;
    }

    .footer-text
    {
        margin-left: 2vw;
    }


    .footer-text-normal
    {
        font-size: 0.75em;
    }

    .footer-text-small
    {
        margin-top:2vh;
        font-size: 0.6em;
        text-align: right;
    }

    .footer-text-infos
    {
        font-size: 1em;
    }

    .form-error
    {
        font-size: 0.75em;
    }

    .form-triple-input
    {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .form-field
    {
        font-size: 1em;
    }

    .form-submit
    {
        height: 60%;
        width: 70%;
        left:30%;
        font-size: 0.75em;
    }

    .image-viewer-exit
    {
        top: 2.5%;
    }
}


/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 

    .menu-wide
    {
        display:none;
    }

    
    .menu-tight
    {
        display:flex;
    }

    .logo-link
    {
        display: block;
        margin-left: 25%;
        width: 50%;
        height: 8vh;
    }

    h1
    {
        font-size: 2.5em;
    }

    h2
    {
        font-size: 1.65em;
    }

    .global-desc-text
    {
        font-size: 1.05em;
        text-align: justify;
    }

    .global-desc-text-small
    {
        font-size: 0.95em;
    }

    .no-margin
    {
        margin: 0px;
    }


    .footer
    {
        background-color: #333;
        width: 100%;
        height: 18vh;
        align-content: center;
    }

    .footer-text
    {
        margin-left: 2vw;
    }


    .footer-text-normal
    {
        font-size: 0.75em;
        max-width: 80%;
    }

    .footer-text-small
    {
        margin-top:2vh;
        margin-left: auto;
        font-size: 0.7em;
        text-align: right;
        max-width: 65%;
    }

    .footer-text-infos
    {
        font-size: 1em;
    }

    .form-error
    {
        font-size: 0.75em;
    }

    .form-triple-input
    {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .form-field
    {
        font-size: 1em;
    }

    .form-submit
    {
        height: 60%;
        width: 60%;
        left:40%;
        font-size: 1em;
    }

    .image-viewer-exit
    {
        top: 2.5%;
    }
}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 
    .menu-wide
    {
        display:none;
    }

    
    .menu-tight
    {
        display:flex;
    }

    .logo-link
    {
        display: block;
        margin-left: 25%;
        width: 50%;
        height: 8vh;
    }

    h1
    {
        font-size: 3.5em;
    }

    h2
    {
        font-size: 2.15em;
    }

    .global-desc-text
    {
        font-size: 1.25em;
        text-align: justify;
    }

    .global-desc-text-small
    {
        font-size: 1.15em;
    }

    .no-margin
    {
        margin: 0px;
    }


    .footer
    {
        background-color: #333;
        width: 100%;
        height: 18vh;
        align-content: center;
    }

    .footer-text
    {
        margin-left: 2vw;
    }


    .footer-text-normal
    {
        font-size: 1.2em;
        max-width: 95%;
    }

    .footer-text-small
    {
        margin-top:2vh;
        margin-left: auto;
        margin-right: 2.5%;
        font-size: 0.9em;
        text-align: right;
        max-width: 65%;
    }

    .footer-text-infos
    {
        font-size: 1em;
    }

    .form-error
    {
        font-size: 0.75em;
    }

    .form-triple-input
    {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .form-field
    {
        font-size: 1em;
    }

    .form-submit
    {
        height: 60%;
        width: 55%;
        left:45%;
        font-size: 1em;
    }

    .image-viewer-exit
    {
        top: 2.5%;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 
    .menu-wide
    {
        display:flex;
    }
    
    .menu-tight
    {
        display:none;
    }

    .menu-button
    {
        font-size: 1em;
    }

    .submenu-item
    {
        font-size: 1em;
    }
    
    h1
    {
        font-size: 3.5em;
    }

    h2
    {
        font-size: 2.15em;
    }

    h3
    {
        font-size: 1.25em;
    }

    .global-desc-text
    {
        font-size: 1.25em;
        text-align: justify;
    }

    .global-desc-text-small
    {
        font-size: 1.15em;
    }

    .no-margin
    {
        margin: 0px;
    }


    .footer
    {
        background-color: #333;
        width: 100%;
        height: 18vh;
        align-content: center;
    }

    .footer-text
    {
        margin-left: 2vw;
    }


    .footer-text-normal
    {
        font-size: 1em;
        max-width: 95%;
    }

    .footer-text-small
    {
        margin-top:2vh;

        font-size: 0.9em;
        text-align: left;
        max-width: 45%;
    }

    .footer-text-infos
    {
        font-size: 1em;
    }

    .form-error
    {
        font-size: 0.75em;
    }

    .form-triple-input
    {
        gap: 2vw;
    }

    .form-field
    {
        font-size: 1em;
    }

    .form-submit
    {
        height: 100%;
        width: 50%;
        left:50%;
        font-size: 1.15em;
    }
}


/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 
    .menu-wide
    {
        display:flex;
    }


    
    .menu-tight
    {
        display:none;
    }
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 
    .menu-wide
    {
        display:flex;
    }
    
    .menu-tight
    {
        display:none;
    }

    .logo-link
    {
        margin-left: 0;
    }
}



/**************************************************************************************/
/**************************************************************************************/
/*************************************************************************************/
/* FIN CONTENU COMMUN - FIN CONTENU COMMUN - FIN CONTENU COMMUN - FIN CONTENU COMMUN */
/*************************************************************************************/
/**************************************************************************************/
/**************************************************************************************/





/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|                        INDEX.HTML                           |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/********************************************/
/* Barre de chargement & animation de début */
/********************************************/
.index-logo-container {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#index-logo {
    opacity: 0;
    position: relative;
    transform: translateY(10%);
    transition: transform 1.5s, opacity 1.5s;
}

.index-loading-bar-container {
    position: absolute;
    top: calc(50% + 55px);
    left: 35%;
    width: 30%;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
}

.index-loading-bar {
    height: 100%;
    width: 0%;
    background-color: #fff;
    transition: width 1s linear;
}



/**********/
/* Slider */
/**********/
.index-slider {
    overflow-y: scroll; 
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch; 
    position: relative;
    display: block;
    height: 100vh;
    width: 100%;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background-color: white;
}

.index-slide {
    position: relative;
    z-index: 1; /* Plus bas que le menu et l'écran de chargement */
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    scroll-snap-align: start;
}


/***************************************/
/* Slider text box styles & animations */
/***************************************/
.index-main-slider-text-box {
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 1vw;
    border-radius: 5px 5px 0px 0px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    text-align: center;
    max-width: fit-content;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
}

.index-main-slider-subtext-box {
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    margin-top: 0;
    padding: 1vw;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    text-align: left;
    max-width: 25%;
    max-height: fit-content;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1.25em;
}

.index-slide.active .index-main-slider-text-box,
.index-slide.active .index-main-slider-subtext-box {
    opacity: 1;
    transform: translateY(0);
}

.index-tb1
{
    top: 15%;
    left: 5%;
}
.index-tb2
{
    top: 15%;
    right: 15%;
}
.index-tb3
{
    top: 15%;
    left: 5%;
}
.index-tb4
{
    top: 15%;
    right: 15%;
}


.index-stb1
{
    top: 22%;
    left: 5%;
    border-radius: 0px 5px 5px 5px;
}
.index-stb2
{
    top: 22%;
    right: 15%;
    border-radius: 5px 0px 5px 5px;
}
.index-stb3
{
    top: 22%;
    left: 5%;
    border-radius: 0px 5px 5px 5px;
}
.index-stb4
{
    top: 22%;
    right: 15%;
    border-radius: 5px 0px 5px 5px;
}


.index-stb1-small
{
    display:none;
    top: 17.5%;
    left: 2%;
    border-radius: 0px 0px 5px 5px;
}
.index-stb2-small
{
    display:none;
    top: 17.5%;
    right: 4%;
    border-radius: 5px 0px 5px 5px;
}
.index-stb3-small
{
    display:none;
    top: 17.5%;
    left: 2%;
    border-radius: 0px 5px 5px 5px;
}
.index-stb4-small
{
    display:none;
    top: 17.5%;
    right: 4%;
    border-radius: 5px 0px 5px 5px;
}


/***********/
/* METIERS */
/***********/

.index-metiers {
    display: block;
    min-height: 80vh;
    align-content: center;
}


.index-row {
    position: relative;
    width: 100%;
    align-content: center;
    padding-left: 2vw;
    padding-right: 2vw;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

a.index-fill-div {
    cursor:pointer;
    display: flex;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

.index-card {
  float: left;
  margin: 0 0.5%;
  min-width: 18%;
  background-color: #00000000;
  .index-menu-content {
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      display: inline-block;
    }

  }
}

.index-wrapper {
    cursor:pointer;

    min-height: 60vh; 
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background-color: #00000000;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
  }


  .index-data {
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    transform: translateY(calc(75%));
    transition: transform 0.5s;
    .index-content {
      padding: 0.1vh 2vh 1vh 2vh;
      position: relative;
      z-index: 1;
    }
  }
  .index-data:hover
  {
    transform: translateY(calc(0%));
  }

  .index-title {
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 4vh;
    height: 15%;
  }
  .index-text {
    margin-bottom: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    height: 55%;
  }

.index-template {

  /*.index-wrapper {
    background: url(https://images.index-unsplash.index-com/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cda12b505afa1beb06e49d89014cbd65&auto=format&fit=crop&w=634&q=80) 20% 1% / cover no-repeat;
  }*/

  .index-content {
    height: 100%;
    background-color: white;
    border-radius: 0 0 5% 5%;
  }

  .index-title {
    a 
    {
        text-decoration: none; /* Supprime le soulignement */
        color: #c03333;
    }
  }

  .index-en-savoir-plus
  {
    min-height: 10%;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2em;
    margin-bottom: 30px;
    color: #B02456;
    text-align:right;
  }

  .index-menu-content {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    transition: transform 0.3s;
    transform: translateY(0);
    li 
    {
      width: 33.333333%;
      float: left;
      background-color: blue;
      height: 60px;
      position: relative;
    }
    a 
    {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
    }
    span {
      top: -10px;
    }
  }
}

/************************/
/* PARTENAIRES - LABELS */
/************************/
.index-partenaires-label
{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
}

/***************/
/* PARTENAIRES */
/***************/
.index-partenaires
{
    padding-left: 5vw;
    padding-top: 5vh;
    padding-right: 5vw;
    padding-bottom: 5vh;
}

.index-partenaires-en-savoir-plus
{
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  color:#f0f0f0;
  text-align: center;
  text-decoration: underline;
  transition: color 0.25s;
  a
  {
    color:#f0f0f0;
    transition: color 0.25s;
}
}

.index-partenaires-en-savoir-plus:hover {
    color: #EF9024;
    a
    {
        color: #EF9024;
    }
}



/*************************/
/* SLIDESHOW PARTENAIRES */
/*************************/
.index-slick-slide {
    margin: 0px 20px;
}

.index-slick-slide img {
    width: 100%;
}

.index-slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.index-slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.index-slick-list:focus
{
    outline: none;
}
.index-slick-list.index-dragging
{
    cursor: pointer;
    cursor: hand;
}

.index-slick-slider .index-slick-track,
.index-slick-slider .index-slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.index-slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.index-slick-track:before,
.index-slick-track:after
{
    display: table;
    content: '';
}
.index-slick-track:after
{
    clear: both;
}
.index-slick-loading .index-slick-track
{
    visibility: hidden;
}

.index-slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .index-slick-slide
{
    float: right;
}
.index-slick-slide img
{
    display: block;
}
.index-slick-slide.index-slick-loading img
{
    display: none;
}
.index-slick-slide.index-dragging img
{
    pointer-events: none;
}
.index-slick-initialized .index-slick-slide
{
    display: block;
}
.index-slick-loading .index-slick-slide
{
    visibility: hidden;
}
.index-slick-vertical .index-slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.index-slick-arrow.index-slick-hidden {
    display: none;
}


.index-slider-partenaires {
	--totSlides: 7;
	--slideWidth: 200px;
	--slideHeight: 100px;
	--animationSpeed: calc(2s * var(--totSlides));
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
	height: var(--slideHeight);
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
    background: #ffffff;
}



.index-slider-partenaires .index-slides-partenaires-track {
	animation: scroll var(--animationSpeed) linear infinite;
	display: flex;
	width: calc(var(--slideWidth) * var(--totSlides) * 2);
}

.index-slider-partenaires .index-slide-partenaires {
	height: 100px;
	width: var(--slideWidth);
	overflow: hidden;
}

.index-slider-partenaires .index-slide-partenaires img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.index-slider-partenaires-small {
	--totSlides: 10;
	--slideWidth: 200px;
	--slideHeight: 100px;
	--animationSpeed: calc(2s * var(--totSlides));
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5);
	height: var(--slideHeight);
	margin: auto;
	overflow: hidden;
	position: block;
	width: 100%;
    max-width: 45vw;
    background: #ffffff;
}

.index-slider-partenaires-small .index-slides-partenaires-track {
	animation: scroll var(--animationSpeed) linear infinite;
	display: flex;
	width: calc(var(--slideWidth) * var(--totSlides));
}

.index-slider-partenaires-small .index-slide-partenaires {
	height: 100px;
	width: var(--slideWidth);
	overflow: hidden;
}

.index-slider-partenaires-small .index-slide-partenaires img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}


@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(var(--slideWidth) * var(--totSlides) * -1));
	}
}






/*********/
/* LABEL */
/*********/
.index-label
{
    position: block;
    width: 80%;

    margin-left: auto;
    margin-right: auto;

    padding-left: 5vw;
    padding-top: 5vh;
    padding-right: 5vw;
    padding-bottom: 5vh;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.index-label-grid
{
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10%;
}

.index-label-texte
{
    display: block;
    align-content:center;
}


.index-label-titre
{
    font-family: 'Montserrat', sans-serif;
    font-size: 96px;
    text-align: left;
    color: #c03333;
    text-shadow: 5px 3px 5px #000000bb;
    margin-top: 0px;
    margin-bottom: 2vh;
}


.index-label-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    margin-top: 0px;
    color: #f0f0f0;
}

.index-label-img
{
    display: block;
    max-width: 35vh;
    max-height: 35vh;
    margin:auto;
}

.index-label-img-small
{
    display: none;
    max-width: 40vh;
    max-height: 40vh;
    margin-left: auto;
    margin-right: auto;
}


/**************/
/* OU TROUVER */
/**************/
.index-ou-trouver
{
    position: block;
    width: 80vw;

    margin-left: auto;
    margin-right: auto;

    padding-left: 2vw;
    padding-top: 5vh;
    padding-right: 2vw;
    padding-bottom: 5vh;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    display: grid;
    grid-template-columns: 8fr 7fr;
}

.index-ou-trouver-texte
{
    display: block;
}


.index-ou-trouver-titre
{
    margin-top: 0px;
    margin-bottom: 3vh;
    margin-left: -2vw;
    margin-right: -2vw;
    text-align: left;
}


.index-ou-trouver-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    margin-top: 0px;
    color: #f0f0f0;
}


/*******/
/* Map */
/*******/
#index-map 
{
    display: block;
    min-height: 50vh;
}



/*************/
/** RESIZES **/
/*************/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{ 
    .index-slider {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        white-space: nowrap;
    }

    .index-slide
    {
        display: inline-block;
    }


    .index-main-slider-text-box
    {
        font-size: 1em;
    }
    
    .index-main-slider-subtext-box {
        padding: 1.5vw;
        font-size: 0.75em;
        max-width: 75%;
    }

    .index-tb1
    {
        top: 12.5%;
        left: 2%;
    }
    .index-tb2
    {
        top: 12.5%;
        right: 4%;
    }
    .index-tb3
    {
        top: 12.5%;
        left: 2%;
    }
    .index-tb4
    {
        top: 12.5%;
        right: 4%;
    }

    .index-stb1
    {
        display:none;

    }
    .index-stb2
    {
        display:none;

    }
    .index-stb3
    {
        display:none;

    }
    .index-stb4
    {
        display:none;
    }
    
    
    .index-stb1-small
    {
        display:block;
    }
    .index-stb2-small
    {
        display:block;
    }
    .index-stb3-small
    {
        display:block;
    }
    .index-stb4-small
    {
        display:block;
    }






    .index-wrapper
    {
        min-height: 70vh;
    }

    .index-template
    {
        margin: 0 5%;
    }

    .index-data
    {
        transform: translateY(calc(75%));
    }

    .index-row
    {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2vh;
    }

    .index-title
    {
        font-size: 1.25em;
        
        text-shadow: none;
    }

    .index-label{
        padding-left: 0vw;
        padding-top: 0vw;
        padding-right: 0vw;
        padding-bottom: 0vw;

        margin-left: auto;
        margin-right: auto;
        
        display: block;
    }

    .index-label-grid
    {
        display:block;
    }

    .index-text
    {
        font-size: 0.9em;
    }

    .index-en-savoir-plus
    {

    }

    .index-label-img
    {
        display: none;
    }
    
    .index-label-img-small
    {
        display: block;
    }
    
    .index-label-desc
    {
        font-size: 0.8em;
        text-align: justify;
    }

    .index-partenaires-en-savoir-plus
    {
        font-size: 1em;
    }

    .index-ou-trouver
    {
        width: 90vw;
        padding-left: none;
        padding-top: none;
        padding-right: none;
        padding-bottom: none;
        
        grid-template-columns: 1fr;
    }
}


/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 
    .index-slider {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        white-space: nowrap;
    }

    .index-slide
    {
        display: inline-block;
    }


    .index-main-slider-text-box
    {
        padding: 2.5vw;
        font-size: 1.25em;
    }
    
    .index-main-slider-subtext-box {
        padding: 1.5vw;
        font-size: 1em;
        max-width: 75%;
    }

    .index-tb1
    {
        top: 12.5%;
        left: 2%;
    }
    .index-tb2
    {
        top: 12.5%;
        right: 4%;
    }
    .index-tb3
    {
        top: 12.5%;
        left: 2%;
    }
    .index-tb4
    {
        top: 12.5%;
        right: 4%;
    }

    .index-stb1
    {
        display:none;
        
    }
    .index-stb2
    {
        display:none;

    }
    .index-stb3
    {
        display:none;

    }
    .index-stb4
    {
        display:none;
    }
    
    
    .index-stb1-small
    {
        display:block;
        top:20%;
    }
    .index-stb2-small
    {
        display:block;
        top:20%;
    }
    .index-stb3-small
    {
        display:block;
        top:20%;
    }
    .index-stb4-small
    {
        display:block;
        top:20%;
    }






    .index-wrapper
    {
        min-height: 70vh;
    }

    .index-template
    {
        margin: 0 5%;
    }

    .index-data
    {
        transform: translateY(calc(75%));
    }
    .index-row
    {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2vh;
    }

    .index-title
    {
        font-size: 1.5em;
        min-height: auto;
        text-shadow: none;
    }

    .index-label{
        padding-left: 0vw;
        padding-top: 0vw;
        padding-right: 0vw;
        padding-bottom: 0vw;

        margin-left: auto;
        margin-right: auto;
        
        display: block;
    }
    
    .index-label-grid
    {
        display:block;
    }

    .index-text
    {
        font-size: 1.1em;
    }

    .index-en-savoir-plus
    {
        font-size: 1.25em;
    }

    .index-label-img
    {
        display: none;
    }
    
    .index-label-img-small
    {
        display: block;
    }
    
    .index-label-desc
    {
        font-size: 0.8em;
        text-align: justify;
    }

    .index-partenaires-en-savoir-plus
    {
        font-size: 1.2em;
    }

    .index-ou-trouver
    {
        width: 90vw;
        padding-left: none;
        padding-top: none;
        padding-right: none;
        padding-bottom: none;
        
        grid-template-columns: 1fr;
    }
}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 

    .index-slider {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        white-space: nowrap;
    }

    .index-slide
    {
        display: inline-block;
    }


    .index-main-slider-text-box
    {
        padding: 2.5vw;
        font-size: 1.425em;
    }
    
    .index-main-slider-subtext-box {
        padding: 1.5vw;
        font-size: 1.125em;
        max-width: 75%;
    }

    .index-tb1
    {
        top: 12.5%;
        left: 2%;
    }
    .index-tb2
    {
        top: 12.5%;
        right: 4%;
    }
    .index-tb3
    {
        top: 12.5%;
        left: 2%;
    }
    .index-tb4
    {
        top: 12.5%;
        right: 4%;
    }

    .index-stb1
    {
        display:none;
        
    }
    .index-stb2
    {
        display:none;

    }
    .index-stb3
    {
        display:none;

    }
    .index-stb4
    {
        display:none;
    }
    
    
    .index-stb1-small
    {
        display:block;
        top:19.5%;
    }
    .index-stb2-small
    {
        display:block;
        top:19.5%;
    }
    .index-stb3-small
    {
        display:block;
        top:19.5%;
    }
    .index-stb4-small
    {
        display:block;
        top:19.5%;
    }




    .index-wrapper
    {
        min-height: 70vh;
    }

    .index-template
    {
        margin: 0 5%;
    }


    .index-row
    {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 2vh;
    }

    .index-title
    {
        font-size: 2em;
        min-height: auto;
        text-shadow: none;
    }

    .index-label{
        padding-left: 0vw;
        padding-top: 0vw;
        padding-right: 0vw;
        padding-bottom: 0vw;

        margin-left: auto;
        margin-right: auto;
        
        display: block;
    }

    .index-label-grid
    {
        display:block;
    }

    .index-text
    {
        font-size: 1.35em;
    }

    .index-en-savoir-plus
    {
        font-size: 1.5em;
    }

    .index-label-img
    {
        display: none;
    }
    
    .index-label-img-small
    {
        display: block;
    }
    
    .index-label-desc
    {
        font-size: 0.8em;
        text-align: justify;
    }

    .index-partenaires-en-savoir-plus
    {
        margin-left: auto;
        margin-right: auto;
        max-width: 80%;
        font-size: 1.5em;
    }

    .index-ou-trouver
    {
        width: 90vw;
        padding-left: none;
        padding-top: none;
        padding-right: none;
        padding-bottom: none;
        
        grid-template-columns: 1fr;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 
    .index-main-slider-text-box
    {
        padding: 1.5vw;
        font-size: 1.25em;
    }
    
    .index-main-slider-subtext-box {
        padding: 1vw;
        font-size: 1em;
        max-width: 55%;
    }

    .index-tb1
    {
        left: 5%;
    }
    .index-tb2
    {
        right: 5%;
    }
    .index-tb3
    {
        left: 5%;
    }
    .index-tb4
    {
        right: 5%;
    }

    .index-stb1
    {
        top:24.75%;   
        left: 5%;
    }
    .index-stb2
    {
        top:24.75%;   
        right: 5%;
    }
    .index-stb3
    {
        top:24.75%;   
        left: 5%;
    }
    .index-stb4
    {
        top:24.75%;   
        right: 5%;
    }

    .index-row
    {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        gap: 1vw;
    }
    .index-col 
    {
      background-color: #00000000;
    }

    .index-col:nth-child(-1n + 3) 
    {
        grid-column: span 4;
    }
    .index-col:nth-last-child(2) 
    {
        grid-row-start: 2;
        grid-column: 3 / span 4;
    }
    .index-col:nth-last-child(1) 
    {
        grid-row-start: 2;
        grid-column: 7 / span 4;
    }

    .index-text
    {
        font-size:0.9em;
    }

    .index-label
    {
        width: 85%;
        padding-left: 0;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;    
    }
    
    .index-label-grid
    {
        margin-top: -2.5%;
    }

    .index-partenaires-en-savoir-plus
    {
        font-size: 1.75em;
    }

    .index-ou-trouver-titre
    {
        text-align:left;
    }
}


/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 

    
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 

    
}


@media (960px < width) 
{ 

.index-row
{
    display:flex;
    justify-content: center;
}

.index-card
{
    min-width: 19%;
}

.index-slider-partenaires
{
    --slideWidth: 250px;
}
    
}




/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|                     PAGES DE COMPETENCES                    |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
.comp-main-content
{
    position: block;
    width: 90%;
    min-height: 80vh;

    margin-left: auto;
    margin-right: auto;

    padding-top: 7vh;
    padding-bottom: 3vh;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    h1
    {
        margin-bottom: 0;
    }
}

.comp-main-content-grid
{
    width: 90%;
    display: grid !important;
    grid-template-columns: 3fr 2fr;
    gap: 10vw;
    margin-left: 5%;
}

.comp-main-content-texte
{
    display: block;
    margin-top: 2%;
}

.comp-main-content-images
{
    max-width: 50vh;
    max-height: 50vh;
    top: 5vh;
}



/************/
/* CAROUSEL */
/************/
.comp-carousel {
    margin-left: 15%;
    margin-right: 15%;
}

ul.comp-slides {
    display: block;
    position: relative;
    height: 600px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border-radius: 20px;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.4);
}

.comp-slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

ul.comp-slides input {
    display: none; 
}


.comp-slide-container { 
    display: block; 
}

.comp-slide-image {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: all .7s ease-in-out;
    cursor: pointer;
    z-index: -1;
}   

.comp-slide-image img {
    width: auto;
    min-width: 100%;
    height: 100%;
}

.comp-slide-desc
{
    color: #f0f0f0;
    width:auto;
    position:absolute;
    left: 1vw;
    top: 1vh;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    text-shadow: 2px 3px 5px black;
}

.comp-carousel-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    font-size: 100px;
    line-height: 600px;
    color: #f0f0f0;

}

.comp-carousel-controls label {
    display: none;
    position: absolute;
    padding: 0 5px;
    opacity: 0;
    transition: opacity .2s;
    cursor: pointer;
}

.comp-slide-image:hover + .comp-carousel-controls label{
    opacity: 0.5;
}

.comp-carousel-controls label:hover {
    opacity: 1;
}

.comp-carousel-controls .comp-prev-slide {
    width: 25%;
    text-align: left;
    left: 0;
}

.comp-carousel-controls .comp-next-slide {
    width: 25%;
    text-align: right;
    right: 0;
}

.comp-carousel-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 10;
    text-align: center;
}

.comp-carousel-dots .comp-carousel-dot {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.5;
    margin: 10px;
}

input:checked + .comp-slide-container .comp-slide-image {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}


input:checked + .comp-slide-container .comp-carousel-controls label {
     display: block; 
}

input:checked + .comp-slide-container .comp-carousel-controls .comp-prev-slide.hidden {
    display: none; 
}

input:checked + .comp-slide-container .comp-carousel-controls .comp-next-slide.hidden {
    display: none; 
}

input#img-1:checked ~ .comp-carousel-dots label#img-dot-1,
input#img-2:checked ~ .comp-carousel-dots label#img-dot-2,
input#img-3:checked ~ .comp-carousel-dots label#img-dot-3,
input#img-4:checked ~ .comp-carousel-dots label#img-dot-4,
input#img-5:checked ~ .comp-carousel-dots label#img-dot-5,
input#img-6:checked ~ .comp-carousel-dots label#img-dot-6 {
	opacity: 1;
}


input:checked + .comp-slide-container .comp-nav label { display: block; }


/*********************/
/* SHOW OFF CAROUSEL */
/*********************/
 
.comp-container {
    position: relative;
    perspective: 1000px;
}

.comp-carousel-2 {
    height: 100%;
    width: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
    align-content: center;
}

.comp-item-2 {
    display: block;
    position: absolute;
    height: 40vh;
    font-size: 5em;
    text-align: center;
    color: #f0f0f0;
    opacity: 1;
    border-radius: 10px;
    img
    {
        max-width: 100%;
        height: 100%;
    }
}



.comp-a-2 {
    transform: rotateY(0deg) translateZ(232px);
    }
    .comp-b-2 {
    transform: rotateY(90deg) translateZ(232px);
    }
    .comp-c-2 {
    transform: rotateY(180deg) translateZ(232px);
    }
    .comp-d-2 {
    transform: rotateY(270deg) translateZ(232px);
    }


.comp-next, .comp-prev {
color: #444;
position: absolute;
top: 100px;
padding: 1em 2em;
cursor: pointer;
background: #CCC;
border-radius: 5px;
border-top: 1px solid #FFF;
box-shadow: 0 5px 0 #999;
transition: box-shadow 0.1s, top 0.1s;
}
.comp-next:hover, .comp-prev:hover { color: #000; }
.comp-next:active, .comp-prev:active {
top: 104px;
box-shadow: 0 1px 0 #999;
}


/*************/
/** RESIZES **/
/*************/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{     
    .comp-main-content-grid
    {
        grid-template-columns: 1fr;
    }


    .comp-main-content-images
    {
        display: none;
    }

    .comp-carousel
    {
        margin-left: 5%;
        margin-right: 5%;
        padding-bottom: 5%;
    }

    ul.comp-slides
    {
        height: 45vh;
    }

    .comp-slide-desc
    {
        left: 5vw;
        top: 2vh;
        font-size: 1.25em;
    }

    .comp-carousel-controls
    {
        line-height: 200px;
    }

    .comp-carousel-dots
    {
        bottom: -5px;
    }
}


/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 
    .comp-main-content-grid
    {
        grid-template-columns: 1fr;
    }

    .comp-main-content-images
    {
        display: none;
    }

    .comp-carousel
    {
        margin-left: 5%;
        margin-right: 5%;
        padding-bottom: 5%;
    }

    ul.comp-slides
    {
        height: 45vh;
    }

    .comp-slide-desc
    {
        left: 5vw;
        top: 2vh;
        font-size: 1.25em;
    }

    .comp-carousel-controls
    {
        line-height: 250px;
    }

    .comp-carousel-dots
    {
        bottom: -5px;
    }
}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 
    .comp-main-content-grid
    {
        grid-template-columns: 1fr;
    }


    .comp-main-content-images
    {
        display: none;
    }

    .comp-carousel
    {
        margin-left: 5%;
        margin-right: 5%;
        padding-bottom: 5%;
    }

    ul.comp-slides
    {
        height: 45vh;
    }

    .comp-slide-desc
    {
        left: 5vw;
        top: 2vh;
        font-size: 1.25em;
    }

    .comp-carousel-controls
    {
        line-height: 360px;
    }

    .comp-carousel-dots
    {
        bottom: -5px;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 
    .comp-carousel
    {
        margin-left: 5%;
        margin-right: 5%;
        padding-bottom: 5%;
    }

    ul.comp-slides
    {
        height: 75vh;
    }

    .comp-slide-desc
    {
        left: 5vw;
        top: 2vh;
        font-size: 1.25em;
    }

    .comp-carousel-controls
    {
        line-height: 360px;
    }

    .comp-carousel-dots
    {
        bottom: -5px;
    }

    .comp-item-2
    {
        height: 65vh;
    }

    .comp-a-2 {
        transform: rotateY(0deg) translateZ(135px);
        }
        .comp-b-2 {
        transform: rotateY(90deg) translateZ(135px);
        }
        .comp-c-2 {
        transform: rotateY(180deg) translateZ(135px);
        }
        .comp-d-2 {
        transform: rotateY(270deg) translateZ(135px);
        }
}



/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 

    
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 

    
}


/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|                    PAGES DES REALISATIONS                   |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
.real-main-content
{
    position: block;
    width: 100%;
    min-height: 100vh;

    margin-left: auto;
    margin-right: auto;

    padding-top: 7vh;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    display: grid !important;
    grid-template-rows: 1fr 4fr;
    gap: 5vh;
}


.real-main-content-texte
{
    display: block;
    width: 80%;

    margin-left: auto;
    margin-right: auto;
    color:#ffff;

}

.real-main-content-titre
{
    font-family: 'Montserrat', sans-serif;
    font-size: 72px;
    text-align: right;
    color: #c03333;
    text-shadow: 5px 3px 5px #000000bb;
    margin-top: 0px;
    margin-bottom: 2vh;
}


.real-main-content-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    margin-top: 0px;
    text-align: right;
}

.real-main-content-desc-2
{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    margin-top: 0px;
}

.real-main-content-images
{
    max-width: 50vh;
    max-height: 50vh;
}





/******************/
/* CAROUSEL CARTES*/
/******************/

.real-carousel {
    position: relative;
    z-index: 1;
    height: 60%;
    overflow: hidden;
    pointer-events: none;
  }
  
  .real-carousel-item {
    --items: 10;
    --width: clamp(200px, 30vw,  300px);
    --height: clamp(200px, 40vw,  400px);
    --x: calc(var(--active) * 800%);
    --y: calc((var(--active) - 0.1) * 100%);
    --rot: calc(var(--active) * 120deg);
    --opacity: calc(1 - var(--active));
    overflow: hidden;
    position: absolute;
    z-index: var(--zIndex);
    width: calc((1 - 1.5*abs(var(--active))) * 60%);
    height: 85%;
    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -2);
    border-radius: 10px;
    top: 40%;
    left: 50%;
    user-select: none;
    transform-origin: 0% 100%;
    box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .3);
    background: black;
    pointer-events: all;
    transform:  translate(var(--x), var(--y)) rotate(var(--rot)) ;
    transition: transform .8s cubic-bezier(0, 0.02, 0, 1);
    cursor: pointer;
    .real-carousel-box {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
      opacity: var(--opacity);
      font-family: 'Montserrat', sans-serif;
  
      &:before {
        content: '';
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5));
      }
    }

    .real-title {
      position: absolute;
      z-index: 1;
      color: #f0f0f0;

      bottom: 20px;
      left: 20px;
      transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
      font-size: clamp(20px, 3vw, 30px);
      text-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    }
  
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
  }

  .real-carousel-item.zoomable
  {
      cursor: zoom-in;
  }


/* 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
 */

/***********/
/* CONTACT */
/***********/
.real-contact
{
    position: block;
    width: 80%;
    height: 80%;

    margin-left: auto;
    margin-right: auto;

    margin-top: -25%;
    margin-bottom: -15%;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    display: grid !important;
    grid-template-rows: 0fr 0fr 4fr;
    gap: 1vh;
}

.real-contact-titre
{
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    color: #c03333;
    /*text-shadow: 5px 2px 10px #FFFFFF55;*/
    margin: 0;
}

.real-contact-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #f0f0f0;

}



.real-contact-projet
{
    width: 100%;
    height: 100%;
    margin-top: 1vh;
}

/********/
/* FORM */
/********/
.real-form 
{
    margin-left: 5%; 
    margin-right: 5%; 
    display: grid !important;
    grid-template-rows: 1fr 1fr 5fr 1fr;
    gap: 2vh;
}



.form-single-input-projet 
{
    display: grid;
    height: 100%;
}

.form-field-projet 
{
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    color: #f0f0f0;
    border-radius: 5px;
    padding: 0.7rem 1rem;
    background-color: transparent;
    border: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    outline: 1px solid #fff;
    transition: outline 0.3s;
    transition: background-color 0.3s;

}

.form-field-projet:focus 
{
    outline: 1px solid #EF9024;
    background-color: #ffffff22;
}

.form-label-projet 
{
    font-family: "Montserrat", sans-serif;
    padding-top: 1.5vh;
    color: #f0f0f055;
    justify-self: start;
    transition-property: transform, padding, font-size;
    transition-duration: 0.3s;
    margin: 0 1rem;
    pointer-events: none;
}

.form-label-projet,
.form-field-projet 
{
    grid-column-start: 1;
    grid-row-start: 1;
}

.form-field-projet:focus ~ .form-label-projet,
.form-field-projet:not(:placeholder-shown) ~ .form-label-projet 
{
    transform: translateY(-11%) translateX(-20%);
    font-size: 0.7rem;
    color: #f0f0f0;
}


.form-invalid .form-field-projet 
{
    outline: 1px solid #c03333;
}

.form-invalid .form-label-projet 
{
    color: #c03333;
}




/***********/
/* RESIZES */
/***********/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{ 
    .real-carousel
    {
        margin-top: -10%;
    }

    .real-carousel-item
    {
        --items: 10;
        --width: clamp(150px, 30vw,  300px);
        --height: clamp(200px, 40vw,  400px);
        --x: calc(var(--active) * 800%);
        --y: calc(var(--active) * 200%);
        --rot: calc(var(--active) * 120deg);
        --opacity: calc(1 - var(--active));
        width: calc((1 - 1.5*abs(var(--active))) * 65%);
        margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.65);
    }

    .real-contact
    {
        width: 85%;
        margin-top:-75%;
    }

    .real-form
    {
        padding-top: 2vh;
        grid-template-rows: 3fr 3fr 3fr 1fr;
        gap: 4vh;
        margin-left: 0%;
        margin-right: 0%;
    }


    .form-field-projet:focus ~ .form-label-projet,
    .form-field-projet:not(:placeholder-shown) ~ .form-label-projet 
    {
        transform: translateY(-14%) translateX(-20%);
    }



}


/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 
    .real-carousel
    {
        margin-top: -10%;
    }

    .real-carousel-item
    {
        --items: 10;
        --width: clamp(150px, 30vw,  300px);
        --height: clamp(200px, 40vw,  400px);
        --x: calc(var(--active) * 800%);
        --y: calc(var(--active) * 200%);
        --rot: calc(var(--active) * 120deg);
        --opacity: calc(1 - var(--active));
        width: calc((1 - 1.5*abs(var(--active))) * 75%);
        margin: calc(var(--height) * -0.75) 0 0 calc(var(--width) * -1.25);
    }

    .real-title
    {
        width:80%;
    }

    .real-contact
    {
        width: 85%;
        margin-top:-75%;
    }

    .real-form
    {
        padding-top: 2vh;
        grid-template-rows: 3fr 3fr 3fr 1fr;
        gap: 4vh;
        margin-left: 0%;
        margin-right: 0%;
    }


    .form-field-projet:focus ~ .form-label-projet,
    .form-field-projet:not(:placeholder-shown) ~ .form-label-projet 
    {
        transform: translateY(-14%) translateX(-20%);
    }
}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 
    .real-carousel
    {
        margin-top: -10%;
    }

    .real-carousel-item
    {
        --items: 10;
        --width: clamp(150px, 30vw,  300px);
        --height: clamp(200px, 40vw,  400px);
        --x: calc(var(--active) * 800%);
        --y: calc(var(--active) * 200%);
        --rot: calc(var(--active) * 120deg);
        --opacity: calc(1 - var(--active));
        width: calc((1 - 1.5*abs(var(--active))) * 75%);
        margin: calc(var(--height) * -0.75) 0 0 calc(var(--width) * -1.25);
    }

    .real-title
    {
        width:80%;
    }

    .real-contact
    {
        width: 85%;
        margin-top:-75%;
    }

    .real-form
    {
        padding-top: 2vh;
        grid-template-rows: 3fr 3fr 3fr 1fr;
        gap: 4vh;
        margin-left: 0%;
        margin-right: 0%;
    }


    .form-field-projet:focus ~ .form-label-projet,
    .form-field-projet:not(:placeholder-shown) ~ .form-label-projet 
    {
        transform: translateY(-14%) translateX(-20%);
    }
    
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 
    .real-carousel 
    {
        margin-top: -5%;
    }
    .real-carousel-item
    {
        --items: 10;
        --width: clamp(150px, 30vw,  300px);
        --height: clamp(200px, 40vw,  400px);
        --x: calc(var(--active) * 800%);
        --y: calc(var(--active) * 200%);
        --rot: calc(var(--active) * 120deg);
        --opacity: calc(1 - var(--active));
        width: calc((1 - 1.5*abs(var(--active))) * 75%);
        margin: calc(var(--height) * -0.75) 0 0 calc(var(--width) * -1.25);
    }

    .real-title
    {
        width:80%;
    }

    .real-contact
    {
        width: 85%;
        margin-top: -75%;
    }

    .real-form
    {
        padding-top: 2vh;
        grid-template-rows: 3fr 3fr 8fr 3fr;
        gap: 4vh;
        margin-left: 0%;
        margin-right: 0%;
        padding-bottom: 5vh;
    }


    .form-field-projet:focus ~ .form-label-projet,
    .form-field-projet:not(:placeholder-shown) ~ .form-label-projet 
    {
        transform: translateY(-20%) translateX(-20%);
    }

    .real-contact-projet
    {
        margin-top: 0vh;
    }
    
}


/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 

    
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 

    
}






/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|                     PAGE DE CANDIDATURE                     |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
.cand-main-content
{
    position: block;
    width: 100%;
    min-height: 85vh;

    margin-left: auto;
    margin-right: auto;

    padding-top: 7vh;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}


.cand-main-content-texte
{
    display: block;
    width: 80%;

    margin-left: auto;
    margin-right: auto;
    color:#ffff;

}

.cand-main-content-titre
{
    font-family: 'Montserrat', sans-serif;
    font-size: 72px;
    text-align: right;
    color: #c03333;
    text-shadow: 5px 3px 5px #000000bb;
    margin-top: 0px;
    margin-bottom: 2vh;
}


.cand-main-content-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    margin-top: 0px;
    text-align: right;
}

.cand-main-content-desc-2
{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    margin-top: 0px;
}

.cand-main-content-images
{
    max-width: 50vh;
    max-height: 50vh;
}




/***********/
/* CONTACT */
/***********/
.cand-candidature
{
    position: block;
    width: 80%;
    height: 80%;

    margin-left: auto;
    margin-right: auto;

    margin-top: 0%;
    margin-bottom: 0%;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.cand-candidature-titre
{
    font-family: "Montserrat", sans-serif;
    font-size: 48px;
    color: #c03333;
    /*text-shadow: 5px 2px 10px #FFFFFF55;*/
    margin: 0;
}

.cand-candidature-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    color: #f0f0f0;
}

.cand-candidature-inputs-full
{
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 2vw;
}

.cand-candidature-projet
{
    width: 100%;
    height: 100%;
    margin-top: 1vh;
}

/********/
/* FORM */
/********/
.cand-form 
{
    margin-left: 5%; 
    margin-right: 5%; 
    display: grid !important;
    grid-template-rows: 1fr 1fr 0.75fr 0.75fr 0.5fr 1fr;
    gap: 2vh;
}


.cand-section-motiv 
{
    display: grid;
    height: 100%;
}

.cand-input-motiv
{
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    color: #f0f0f0;
    border-radius: 5px;
    padding: 0.7rem 1rem;
    background-color: transparent;
    border: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    outline: 1px solid #fff;
    transition: outline 0.3s;
    transition: background-color 0.3s;

}

.cand-input-motiv:focus 
{
    outline: 1px solid #EF9024;
    background-color: #ffffff22;
}

.cand-label-motiv
{
    font-family: "Montserrat", sans-serif;
    padding-top: 1.5vh;
    color: #f0f0f055;
    justify-self: start;
    transition-property: transform, padding, font-size;
    transition-duration: 0.3s;
    margin: 0 1rem;
    pointer-events: none;
}

.cand-label-motiv,
.cand-input-motiv 
{
    grid-column-start: 1;
    grid-row-start: 1;
}

.cand-input-motiv:focus ~ .cand-label-motiv,
.cand-input-motiv:not(:placeholder-shown) ~ .cand-label-motiv 
{
    transform: translateY(-11%) translateX(-20%);
    font-size: 0.7rem;
    color: #f0f0f0;
}


.cand-invalid .cand-input-projet 
{
    outline: 1px solid #c03333;
}

.cand-invalid .cand-label-projet 
{
    color: #c03333;
}

.cand-input-submit
{
    position:relative;
    width: 20%;
    height: 75%;
    left: 80%;
    border-radius: 5px;
    border: none;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;

    transition: background-color 0.3s;
}

.cand-input-submit:hover
{
    color: #f0f0f0;
    background-color: #c03333;
    cursor: pointer;
}




/************/
/**** CV ****/
/************/
.cand-candidature-cv
{
    display: grid !important;
    margin-right: 30%;
    grid-template-columns: 2fr 4fr;
}

.cand-candidature-cv:hover > .cand-cv-button
{
    background-color:#c03333;
    color:#f0f0f0;
    outline-color:#c03333;
}

.cand-candidature-cv:hover > .cand-cv-desc-div
{
    outline-color:#c03333;
}

.cand-candidature-cv:hover > .cand-cv-desc-div > .cand-cv-desc {
    color: #EF9024;
}

.cand-candidature-cv:hover > .cand-cv-desc-div > .cand-cv-desc-small {
    color: #EF9024;
}

.cand-cv-button
{
    cursor: pointer;
    position:relative;
    background-color: #f0f0f0;
    border-radius: 5px 0px 0px 5px;
    border: none;

    font-family: "Montserrat", sans-serif;
    font-size: 1.15em;

    outline:solid;
    outline-color:#f0f0f0;
    outline-width: 2px;

    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;   
}

.cand-cv-desc-div
{
    cursor: pointer;
    display: flex;
    border-radius: 0px 5px 5px 0px;

    outline:solid;
    outline-color:#f0f0f0;
    outline-width: 2px;
    transition: outline-color 0.3s;

    align-items: center;
    justify-content: center;
}

.cand-cv-desc
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color: #f0f0f0;
    margin: 0;
    margin-left: 5%;
    margin-right: auto;
    padding: 0;
    align-items: center;
    justify-content: center;   
    transition: color 0.3s;
}

.cand-cv-desc-small
{
    display:none;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75em;
    color: #f0f0f0;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    align-items: center;
    justify-content: center;   
    transition: color 0.3s;
}


/********/
/* RGPD */
/********/
.cand-rgpd-label
{
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #f0f0f0;
}


/***********/
/* RESIZES */
/***********/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{ 
    .cand-candidature-inputs
    {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .cand-form
    {
        padding-top: 5%;
        grid-template-rows: repeat(1, 1fr);
        gap: 4vh;
    }
    .cand-candidature-cv
    {
        margin-right: 0%;
        min-height: 8vh;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(1, 1fr);
    }

    .cand-cv-button
    {
        font-size: 0.75em;
        text-align:center;
        border-radius: 5px 0px 0px 0px;

    }

    .cand-cv-desc-div
    {
        border-radius: 0px 0px 5px 0px;
    }

    .cand-cv-desc
    {
        display:none;
    }
    .cand-cv-desc-small
    {
        display:block;
    }

    .cand-candidature-send
    {
        min-height: 8vh;
    }
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 
    .cand-candidature-inputs
    {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .cand-form
    {
        padding-top: 5%;
        grid-template-rows: repeat(1, 1fr);
        gap: 4vh;
    }
    .cand-candidature-cv
    {
        margin-right: 0%;
        min-height: 8vh;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(1, 1fr);
    }

    .cand-cv-button
    {
        font-size: 0.9em;
        text-align:center;
        border-radius: 5px 0px 0px 0px;
    }

    .cand-cv-desc-div
    {
        border-radius: 0px 0px 5px 0px;
    }

    .cand-cv-desc
    {
        display:none;
    }
    .cand-cv-desc-small
    {
        display:block;
        font-size:1em;
    }

    .cand-candidature-send
    {
        min-height: 8vh;
    }
}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 
    .cand-candidature-inputs
    {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .cand-form
    {
        padding-top: 5%;
        grid-template-rows: repeat(1, 1fr);
        gap: 4vh;
    }
    .cand-candidature-cv
    {
        margin-right: 0%;
        min-height: 7vh;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(1, 1fr);
    }

    .cand-cv-button
    {
        font-size: 0.9em;
        text-align:center;
        border-radius: 5px 0px 0px 0px;
    }

    .cand-cv-desc-div
    {
        border-radius: 0px 0px 5px 0px;
    }

    .cand-cv-desc
    {
        display:none;
    }
    .cand-cv-desc-small
    {
        display:block;
        font-size:1.25em;
    }

    .cand-candidature-send
    {
        min-height: 8vh;
    }
    
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 
    .cand-main-content-texte
    {
        width: 85%;
    }

    .cand-candidature
    {
        width: 100%;
    }

    .cand-candidature-inputs
    {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .cand-form
    {
        padding-top: 0.5%;
        grid-template-rows: repeat(1, 1fr);
        gap: 4vh;
        padding-bottom: 2%;
    }

    .cand-candidature-cv
    {
        margin-right: 0%;
        min-height: 5vh;
        grid-template-columns: 2fr 5fr;
        grid-template-rows: 1fr;
    }

    .cand-cv-button
    {
        padding-left: 5%;
        font-size: 1em;
        border-radius: 5px 0px 0px 5px;
        justify-content: center;
    }

    .cand-cv-desc-div
    {
        border-radius: 0px 5px 5px 0px;
    }

    .cand-cv-desc
    {
        display:block;
        font-size: 0.8em;
    }

    .cand-cv-desc-small
    {
        display:none;
    }

    .cand-candidature-send
    {
        min-height: 8vh;
    }
    
}


/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 

    
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 

    
}





/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|                   PAGE DE MENTIONS LEGALES                  |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
.mentions-main-content
{
    position: block;
    width: 100%;
    min-height: 100vh;

    margin-left: auto;
    margin-right: auto;

    padding-top: 7vh;
    padding-bottom: 3vh;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.mentions-text
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/***********/
/* RESIZES */
/***********/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{ 

}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 

}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 
    .mentions-text
    {
        width: 85%;
    }

    .mentions-text > h1
    {
        margin-left: -1%;
        margin-right: -1%;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 
    .mentions-text
    {
        width: 90%;
    }

    .mentions-text > h1
    {
        margin-left: 10%;
        margin-right: 10%;
    }
    
}


/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 

    
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 

    
}


/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|                        PAGE DE LABELS                       |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
.labels-main-content
{
    position: block;
    width: 100%;
    min-height: 100vh;

    margin-left: auto;
    margin-right: auto;

    padding-top: 7vh;
    padding-bottom: 3vh;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.labels-text
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


.labels-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
}

.labels-img
{
    display: block;
    width: 55%;
    margin:auto;   
}

.labels-part
{
    display: block;
    width: 85%;
    margin:auto;   
}



/***********/
/* RESIZES */
/***********/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{ 
    .labels-grid
    {
        display: block;
    }
    .index-slider-partenaires-small 
    { 
        max-width: 80vw;
    }
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 
    .labels-grid
    {
        display: block;
    }
    .index-slider-partenaires-small 
    { 
        max-width: 80vw;
    }
}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 
    .labels-grid
    {
        display: block;
    }

    .labels-text
    {
        width: 85%;
    }

    .labels-text > h1
    {
        margin-left: -1%;
        margin-right: -1%;
    }
    .index-slider-partenaires-small 
    { 
        max-width: 80vw;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 
    .labels-text
    {
        width: 90%;
    }

    .labels-text > h1
    {
        margin-left: 10%;
        margin-right: 10%;
    }
    .index-slider-partenaires-small 
    { 
        max-width: 80vw;
    }
}


/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 

    
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 

    
}


/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|                        PAGE DE POSTES                       |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
.postes-main-content
{
    position: block;
    width: 100%;
    height: 100%;
    min-height: 83vh;

    margin-left: auto;
    margin-right: auto;

    padding-top: 7vh;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.postes-main-content-texte
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@property --offreColor1 {
    syntax: '<color>';
    initial-value: #c0333322;
    inherits: false;
  }
  
  @property --offreColor2 {
    syntax: '<color>';
    initial-value: #ffffff33;
    inherits: false;
  }

.postes-offre
{
    cursor: pointer;
    display: block;
    width:100%;
    height: 10%;
    border-radius: 5px;
    background-image: linear-gradient(10deg, var(--offreColor1) 0%, var(--offreColor2) 100%);
    transition: --offreColor1 0.1s ease-in, --offreColor2 0.1s ease-in;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
}

.postes-offre:hover
{
    --offreColor1: #c0333388;
    --offreColor2: #ffffff99;
}


.postes-offre-container
{
    padding: 2%;
}

.postes-offre-titre
{
    font-family: "Montserrat", sans-serif;
    color: #ECEFF1;
    font-size: 2em;
    margin: auto;
}

.postes-offre-keywords
{
    font-family: "Montserrat", sans-serif;
    color: #ECEFF1;
    font-size: 1.25em;
    margin: auto;
}

.postes-offre-content
{
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
    max-height: 0px;
    opacity: 0;
    padding-top: 0%;
    transition: max-height 0.15s ease-out, opacity 0.15s ease-in, padding-top 0.15s ease-in;
}

.postes-offre-desc-titre
{
    display:none;
    font-family: "Montserrat", sans-serif;
    color: #ECEFF1;
    font-size: 1.25em;
    margin: 0%;
    padding-bottom: 2%;
    max-height: 0px;
}

.postes-offre-desc
{
    display:none;
    font-family: "Montserrat", sans-serif;
    color: #ECEFF1;
    font-size: 1.1em;
    margin: auto;
    padding-bottom: 5%;
    max-height: 0px;

}

.focused > .postes-offre-container > .postes-offre-content 
{
    opacity: 1;
    padding-top: 5%;
    max-height: 5000px;
    transition: max-height 0.35s ease-in, opacity 0.4s ease-in, padding-top 0.2s ease-in;
}

.focused > .postes-offre-container > .postes-offre-content > .postes-offre-column
{
    max-height: none;
}

.focused > .postes-offre-container > .postes-offre-content > .postes-offre-column > .postes-offre-desc
{
    display: block;
    max-height: none;
}

.focused > .postes-offre-container > .postes-offre-content > .postes-offre-column > .postes-offre-desc-titre
{
    display: block;
    max-height: none;
}

.focused > .postes-offre-container > .postes-offre-content > .postes-offre-column > .postes-offre-bouton
{
    display: block;
    max-height: none;
}

.postes-offre-bouton
{
    display: none;
    max-height: 0px;
    position:relative;
    width: fit-content;
    margin-left: auto;
    background-color: #ECEFF1;
    border-radius: 5px;
    border: none;

    font-family: "Montserrat", sans-serif;
    font-size: 1.25em;

    transition: background-color 0.3s;
    padding: 4% 10%;
    text-align: center;
}


.postes-offre-bouton.libre
{
    display: block;
    width: 75%;
    max-height: none;
    min-height: 5vh;
    align-content: center;
    margin-right:auto;
    font-size: 2em;
    padding: 1% 2%;
    border-radius: 15px;
    text-decoration: none; /* Supprime le soulignement */
    color: #333;
}

.postes-offre-bouton:hover
{
    color: #f0f0f0;
    background-color: #c03333;
    cursor: pointer;
}

.postes-offre-column
{
    max-height: 0px;
}


/***********/
/* RESIZES */
/***********/
/* smartphones, iPhone, portrait 480x320 phones */ 
@media (width <= 320px)  
{ 
    .postes-offre-titre
    {
        font-size: 1.5em;
    }

    .postes-offre-keywords
    {
        font-size: 1em;
    }
    
    .postes-offre-desc-titre
    {
        font-size: 1.1em;
    }
    
    .postes-offre-desc
    {
        font-size: 0.9em;
    }
    
    .postes-offre-bouton.libre
    {
        font-size: 1em;
        border-radius: 5px;
    }

    .postes-offre-content
    {
        gap: 0vh;
        grid-template-columns: 1fr;
        grid-template-rows: 0fr 0fr;
    }
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media (320px < width <= 480px)  
{ 
    .postes-offre-titre
    {
        font-size: 1.5em;
    }

    .postes-offre-keywords
    {
        font-size: 1em;
    }
    
    .postes-offre-desc-titre
    {
        font-size: 1.1em;
    }
    
    .postes-offre-desc
    {
        font-size: 0.9em;
    }
    
    .postes-offre-bouton.libre
    {
        font-size: 1.2em;
        border-radius: 5px;
    }

    .postes-offre-content
    {
        gap: 0vh;
        grid-template-columns: 1fr;
        grid-template-rows: 0fr 0fr;
    }
}


/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
@media (480px < width <= 640px)  
{ 
    .postes-offre-titre
    {
        font-size: 1.75em;
    }

    .postes-offre-keywords
    {
        font-size: 1em;
    }
    
    .postes-offre-desc-titre
    {
        font-size: 1.1em;
    }
    
    .postes-offre-desc
    {
        font-size: 0.9em;
    }
    
    .postes-offre-bouton.libre
    {
        font-size: 1.5em;
        border-radius: 5px;
    }

    .postes-offre-content
    {
        gap: 0vh;
        grid-template-columns: 1fr;
        grid-template-rows: 0fr 0fr;
    }
}


/* tablet, landscape iPad, lo-res laptops ands desktops */ 
@media (640px < width <= 960px)  
{ 

}


/* big landscape tablets, laptops, and desktops */ 
@media (960px < width <= 1024px) 
{ 

    
}


/* hi-res laptops and desktops */ 
@media (1024px < width) 
{ 

    
}



/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|   DIFFERENTES OPERATIONS POUR DIFFERENTS FORMATS D'ECRANS   |*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*|-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-|*/
/*@media (max-width: 600px) 
{
    .menu-wide
    {
        display:none;
    }

    
    .menu-tight
    {
        display:flex;
    }

    .logo-link
    {
        display: block;
        margin-left: 25%;
        width: 50%;
        height: 8vh;
    }
}

@media(min-width: 600px)
{
    .menu-wide
    {
        display:flex;
    }
    
    .menu-tight
    {
        display:none;
    }
}*/
/*
@media(width <= 500px)
{
    .index-wrapper
    {
        &:hover {
      .index-data {
        transform: translateY(5%);
        .index-content 
        {
            border-radius: 15px;
        }
      }
    }
    }


    .index-row
    {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr);
        gap: 1vw;
    }
}

@media(500px < width < 900px)
{
    .index-wrapper
    {
        &:hover {
      .index-data {
        transform: translateY(7%);
        .index-content 
        {
            border-radius: 15px;
        }
      }
    }
    }

    .index-row
    {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr);
        gap: 1vw;
    }
    .index-col 
    {
      background-color: #00000000;
    }

    .index-col:nth-child(-1n + 4) 
    {
        grid-column: span 4;
    }
    .index-col:nth-last-child(1) 
    {
        grid-row-start: 3;
        grid-column: 3 / span 4;
    }
}

@media(900px < width <= 1300px)
{
    .index-wrapper
    {
        &:hover {
      .index-data {
        transform: translateY(10%);
        .index-content 
        {
            border-radius: 15px;
        }
      }
    }
    }

    .index-row
    {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        gap: 1vw;
    }
    .index-col 
    {
      background-color: #00000000;
    }

    .index-col:nth-child(-1n + 3) 
    {
        grid-column: span 4;
    }
    .index-col:nth-last-child(2) 
    {
        grid-row-start: 2;
        grid-column: 3 / span 4;
    }
    .index-col:nth-last-child(1) 
    {
        grid-row-start: 2;
        grid-column: 7 / span 4;
    }
}

@media(1300px < width < 1800px)
{
    .index-wrapper
    {
        &:hover {
      .index-data {
        transform: translateY(5%);
        .index-content 
        {
            border-radius: 15px;
        }
      }
    }
    }

    .index-row
    {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr);
        gap: 1vw;
    }
    .index-col 
    {
      background-color: #00000000;
    }

    .index-col:nth-child(-1n + 3) 
    {
        grid-column: span 4;
    }
    .index-col:nth-last-child(2) 
    {
        grid-row-start: 2;
        grid-column: 3 / span 4;
    }
    .index-col:nth-last-child(1) 
    {
        grid-row-start: 2;
        grid-column: 7 / span 4;
    }
}

@media(1800px < width)
{
    .index-wrapper
    {
        &:hover {
      .index-data {
        transform: translateY(0);
        .index-content 
        {
            border-radius: 15px;
        }
      }
    }
    }
    
    .index-row
    {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        gap: 1vw;
    }
}
*/