@font-face {
    font-family: 'Neue Haas';
    src: url('fonts/HaasGrotDisp-55Roman.otf'); 
    
}

body, html{
    
    height: 100vh;
    font-family: 'Neue Haas';
    color: white;
    font-size: 1.1em;
    scroll-behavior: smooth;
}

body{

    background-color: black;
    align-items: center;
    margin: 0;
    display: grid;
    row-gap: 0vh;
    grid-template-columns: 1fr;
    grid-template-rows:  min-content minmax(min-content, max-content) min-content;
    grid-auto-rows: auto;
    
}

::selection{
	color: #b4b4b4;
}

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

a:hover{

    text-decoration: underline;
}

header{
    
    grid-area: header;
    grid-row: 1;
    grid-column: 1;
    display: grid;
    grid-template-columns: 10vw 1fr 1fr;
    overflow: auto;

}

.logo{
    z-index: 999;
    position: fixed;
    margin: 2.4vw 0 0 2vw;
    cursor: pointer;
    width: 100px;
    grid-row: 1;
    grid-column: 1;
}


.figcaption-text-header{
    
    z-index: 1;
    grid-column: 3;
    color: white;
    font-size: 2em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0em;
    margin-inline-end: 1em;
    margin-top: 2vw;
    margin-bottom: 2vw;

}

main{

    display: block;
    z-index: 998;
    width: 100%;
    grid-area: main;
    grid-column: 1;
    grid-row: 2;
    background-color: black;
}


figure{

    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 2vw;
    margin-inline-end: 2vw;
}


figure img {
    width: 100%;
    height: auto;
    max-width: 99vw;
}

figcaption {
display: grid;
grid-template-columns: 10vw 1fr 1fr;

     
}



.cycle-slideshow {
  max-width: 100%;
  
  }


.cycle-caption { 
  z-index: 700;
}

.figcaption-txt {

    width: 100%;
    font-size: 1em;
    font-weight: medium;
    cursor: text; 
    color: white;
    grid-column: 2 / span 3;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
}


.figcaption-naration{
    
    grid-column: 3;
    color: white;
    font-size: 1.9em;
    margin-block-start: 0.5em;
    margin-block-end: 01em;
    margin-inline-start: 0em;
    margin-inline-end: 1em;

}

section{

    margin: 0 2vw;
    z-index: 998;
    max-width: 99vw;
    grid-area: sect;
    grid-column: 1;
    grid-row: 3;
    background-color: black;
    display: grid;
    grid-template-columns: 8vw 1fr 1fr;
    grid-template-rows: auto;
    
    

}

hr {
    width: 100%;
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    color: white;
    overflow: hidden;
    border: inset 1px; 
    grid-area: 'hr';
    grid-row: 1;
    grid-column: 1 / span 3;
    z-index: 999;

}
    
.hr2{

    grid-area: 'hr2';
    grid-row: 3;
    
    

}

.hr3{
    grid-area: 'hr3';
    grid-row: 5;
    margin-inline-start: 8vw;
    width: calc(100% - 8vw);
    
}
.hr4{
    grid-area: 'hr3';
    grid-row: 7;
    margin-inline-start: 8vw;
    width: calc(100% - 8vw);


    
}
.hr5{
   
    grid-area: 'hr5';
    grid-row: 9;
    margin-block-end: 5vh;

}



.presentation{

    display: block;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-end: 0px;
    grid-area: 'presentation';
    column-count: 2;
    column-gap : 1.5em;    
    grid-row: 2;
    grid-column: 2 / span 3;    
}

.titreequipe{
    margin: 0.2em 0 0.2em 0;
    grid-area: 'titreequipe';
    grid-row: 4; 
    grid-column: 2;

}

.equipe{
    grid-area: 'equipe';
    grid-row: 6;
    grid-column: 2;
    list-style-type: none;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;
    padding-inline-start: 0em;
    
    
}

.contacts{
    margin: 0.2em 0 0.2em 0.7em;
    grid-area: 'contacts';
    grid-row: 4;
    grid-column: 3;
}

.contacts-données{

    grid-area: 'contacts-données';
    grid-row: 6;
    grid-column: 3;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-start: 0.7em;

}

.ajap{

    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    grid-area: 'ajap';
    grid-row: 8;
    grid-column: 2 / span 3;
}

.colophon{
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    grid-row:9;
    grid-column: 2 / span 3;
}


@media only screen and (max-width : 768px) {
    /* Styles pour cette Media Queries */

    body{

        background-color: black;
        align-items: center;
        display: grid;
        row-gap: 0vh;
        grid-template-columns: 1fr;
        grid-template-rows:  min-content minmax(min-content, max-content) min-content;
        
    }


    header{
    
        grid-area: header;
        grid-row: 1;
        grid-column: 1;
        display: grid;
        grid-template-columns: 10vw 1fr 1fr;
        grid-template-rows:  432px min-content ;
        row-gap: 2vw;
        margin-top: 2vw;
        overflow: auto;
    
    }



    .logo{

    z-index: 999;
    position: absolute;
    cursor: pointer;
    width: 300px;
    grid-row: 1;
    grid-column: 2;
    
    }

    .figcaption-text-header{
        
        z-index: 1;
        grid-column: 1 / span 3;
        grid-row: 5;
        color: white;
        font-size: 1em;
        margin-block-start: 1em;
        margin-block-end: 0em;
        margin-inline-start: 10vw;
        margin-inline-end: 1em;
        margin-bottom: 5vw;
    
    }

    main{

        display: block;
        z-index: 998;
        width: 100%;
        grid-area: main;
        grid-column: 1;
        grid-row: 2;
        background-color: black;
    }

    .figcaption-txt{

        font-size: 0.5em;
        max-width: 90%;
    }

    .figcaption-naration{
    
        grid-column: 1 / span 3;
        color: white;
        font-size: 1em;
        margin-block-start: 0.5em;
        margin-block-end: 01em;
        margin-inline-start: 10vw;
        margin-inline-end: 1em;
    
    }

    section{

        margin: 0 2vw;
        z-index: 998;
        max-width: 99vw;
        grid-area: sect;
        grid-column: 1;
        grid-row: 3;
        background-color: black;
        display: grid;
        grid-template-columns: 8vw 1fr 1fr;
        grid-template-rows: auto;
        
        
    
    }

  hr {
   width: 100%;
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    color: white;
    overflow: hidden;
    border: inset 1px; 
    grid-area: 'hr';
    grid-row: 1;
    grid-column: 1 / span 3;
    z-index: 999;}
    
           
    .hr2{
    
        grid-area: 'hr2';
        grid-row: 3;
        
        
    
    }
    
    .hr3{
        grid-area: 'hr3';
        grid-row: 6;
        margin-inline-start: 8vw;
        width: calc(100% - 8vw);
        
    }
    .hr4{
        grid-area: 'hr3';
        grid-row: 9;
        margin-inline-start: 8vw;
        width: calc(100% - 8vw);
    
    
        
    }
    .hr5{
       
        grid-area: 'hr5';
        grid-row: 11;
        margin-block-end: 0em;
        
    
    }
    
         
    .presentation{
    
        display: block;
        margin-block-start: 0.2em;
        margin-block-end: 0.2em;
        margin-inline-end: 0px;
        grid-area: 'presentation';
        column-count: 1;
        grid-row: 2;
        grid-column: 2 / span 3;    
    }
    
    .titreequipe{
        margin: 0.2em 0 0.2em 0;
        grid-area: 'titreequipe';
        grid-row: 4; 
        grid-column: 2;
    
    }
    
    .equipe{
        grid-area: 'equipe';
        grid-row: 5;
        grid-column: 2;
        list-style-type: none;
        margin-block-start: 0.2em;
        margin-block-end: 0.2em;
        margin-inline-start: 0em;
        margin-inline-end: 0em;
        padding-inline-start: 0em;
        
        
    }
    
    .contacts{
        margin: 0.2em 0 0.2em 0em;
        grid-area: 'contacts';
        grid-row: 7;
        grid-column: 2;
    }
    
    .contacts-données{
    
        grid-area: 'contacts-données';
        grid-row: 8;
        grid-column: 2;
        margin-block-start: 0.2em;
        margin-block-end: 0.2em;
        margin-inline-start: 0em;
    
    }
    
    .ajap{
    
        margin-block-start: 0.2em;
        margin-block-end: 0.2em;
        grid-area: 'ajap';
        grid-row: 10;
        grid-column: 2 / span 3;
    }
    .colophon{
        margin-block-start: 0.2em;
        margin-block-end: 0.2em;
        grid-row:12;
        grid-column: 2 / span 3;
    }

.aha::after{
    content: '\A';
    white-space: pre;

    }
.valentin::after{
    content: '\A';
    white-space: pre;
        
            }

    }