/* ////////////////////////////////////////////////  
   _____   ______   _   _   ______   _____               _      
  / ____| |  ____| | \ | | |  ____| |  __ \      /\     | |     
 | |  __  | |__    |  \| | | |__    | |__) |    /  \    | |     
 | | |_ | |  __|   | . ` | |  __|   |  _  /    / /\ \   | |     
 | |__| | | |____  | |\  | | |____  | | \ \   / ____ \  | |____ 
  \_____| |______| |_| \_| |______| |_|  \_\ /_/    \_\ |______|

///////////////////////////////////////////////////   */







html {
    scroll-behavior: smooth;
}


* {
    box-sizing: border-box;
    font-family:arial;
    text-decoration: none;
}


a.lien {
    font-size:21px;
    cursor: pointer;
    line-height: 0;
}


body{
    margin:0px;
    padding:0px;
}


body.index{
    margin: 0px;
    height: 100vh; 
    background-size: cover; 
    background-position: center center; 
}


.HeaderEtMenu {
    position:relative;
}


body.apropos{
    position:relative;
    height: 100vh;
    background-image:url(/.images/0_general/008.jpg);
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: contain;
}


body.realisation{
    position:relative;
    height: 100vh;
    background-image:url(/.images/0_general/fond_carto_02.png);
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: contain;
}


body.imagefond{
    position:relative;
    height: 100vh;
    background-image:url(/.images/0_general/fond_carto_03.png);
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: contain;
}


body.contactfond{
    position:relative;
    height: 100vh;
    background-image:url(/.images/0_general/006.jpg);
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: contain;
}


.container{
    background-color:none;
    display: flex;
    flex-direction: row;
    column-gap: 3vw;
    margin-left:9vw;
}








/* ////////////////////////////////////////////////  
  __  __   ______   _   _   _    _ 
 |  \/  | |  ____| | \ | | | |  | |
 | \  / | | |__    |  \| | | |  | |
 | |\/| | |  __|   | . ` | | |  | |
 | |  | | | |____  | |\  | | |__| |
 |_|  |_| |______| |_| \_|  \____/ 

///////////////////////////////////////////////////   */


.CouleurEnFondOn {
    width: 35vh;
    height: 75vh;
    border: 5px  rgba(176,250,54,0.8);
    border-style:dashed;
    position:absolute;
    right:-4vh;
    float: right;
    z-index:-1;
    background-color: rgba(255,255,255,0.7);
    background-position: center;
    background-repeat:no-repeat;
    visibility: visible;
    opacity: 1;
}



.GrosCouleurEnFondOn {
    width: 84vw;
    height: 93vh;
    border: 5px dashed rgba(176,250,54,0.8);
    position: fixed;
    left:8vw;
    top:3vh;
    float: right;
    z-index:-50;
    background-color: rgba(255,255,255,0.7);
    background-position: center;
    background-repeat:no-repeat;
    visibility: visible;
    opacity: 1;
}


.ContactCouleurEnFond {
    width: 57vw;
    height: 78vh;
    border: 5px dashed rgba(176,250,54,0.8);
    position: fixed;
    left:8vw;
    top:10vh;
    float: right;
    z-index:-50;
    background-color: rgba(255,255,255,0.7);
    background-position: center;
    background-repeat:no-repeat;
    visibility: visible;
    opacity: 1;
}


.ProjetCouleurEnFond {
    width: 84vw;
    height: 83vh;
    border: 5px dashed rgba(176,250,54,0.8);
    position: fixed;
    left:8vw;
    top:10vh;
    float: right;
    z-index:-50;
    background-color: rgba(255,255,255,0.7);
    background-position: center;
    background-repeat:no-repeat;
    visibility: visible;
    opacity: 1;
}


.menuContainer {
    background-color: none;
    position:sticky;
    display: flex;
    place-items:center;
    justify-content: flex-end;
    top:0vw;
    text-align: right;
    height: 100vh;
    width:15vw;
    min-width:120px;
    z-index: 10;
    float:right;
    clear: both;
}


.verdure {
    min-width:120px;
    z-index: 10;
    margin-bottom: 3vw;
    float:right;
    clear:both;
}


.verdure p{
    font-family: times;
    margin:0px;
    line-height: 0.8;
    text-align: right;
    font-size:6vh;
    font-style:italic;
    white-space:nowrap;
    float:right;
    clear:both;
    color:
}




/* ////////////////////////////////////////////////  
  _                                                              
 | |                                                             
 | |   ___     __ _    ___      _ __ ___     ___   _ __    _   _ 
 | |  / _ \   / _` |  / _ \    | '_ ` _ \   / _ \ | '_ \  | | | |
 | | | (_) | | (_| | | (_) |   | | | | | | |  __/ | | | | | |_| |
 |_|  \___/   \__, |  \___/    |_| |_| |_|  \___| |_| |_|  \__,_|
               __/ |                                             
              |___/                                
///////////////////////////////////////////////////   */




#menuLogo {
    cursor: pointer;
    margin:2.5px;
    background-color:none;
    width:30px;
    float: right;
    clear:both;
    z-index: 10;
}


#menuLogo:hover #bar{
    background-color: greenyellow;
    transition: 0.3s;
}


.bar1 {
  position:relative;
  right:2.5px;
  width: 35px;
  height: 5px;
  background-color: rgba(0,0,0,0.8);
  transition: 0.3s;
}


.bar2, .bar3 {
  position:relative;
  right:2.5px;
  width: 35px;
  height: 5px;
  background-color: rgba(0,0,0,0.8);
  margin-top: 6px ;
  transition: 0.3s;
}

.bar1On {
  position:relative;
  right:2.5px;
  width: 35px;
  height: 5px;
  background-color: rgba(0,0,0,0.8);
  transition: 0.3s;
    transform:  translate(0, 11px) rotate(-45deg);
}


.bar2On {
  position:relative;
  right:2.5px;
  width: 35px;
  height: 5px;
  background-color: rgba(0,0,0,0.8);
  margin-top: 6px ;
  transition: 0.3s;
    opacity: 0;
}

.bar3On {
  position:relative;
  right:2.5px;
  width: 35px;
  height: 5px;
  background-color: rgba(0,0,0,0.8);
  margin-top: 6px ;
  transition: 0.3s;
    transform: translate(0, -11px) rotate(45deg);
}


.off .bar1On {
  transform:  translate(0, 0px) rotate(0deg);
}


.off .bar2On {
    opacity: 1;
}


.off .bar3On {
  transform: translate(0, 0px) rotate(0deg);
}


.change .bar1 {
  transform:  translate(0, 11px) rotate(-45deg);
}


.change .bar2 {
    opacity: 0;
}


.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}




/* ////////////////////////////////////////////////  
  _ __     __ _  __   __
 | '_ \   / _` | \ \ / /
 | | | | | (_| |  \ V / 
 |_| |_|  \__,_|   \_/

///////////////////////////////////////////////////   */




.menuPremier {
    float: right;
    clear: both;
    width: 12vw;
    min-width:120px;
    background : rgba(255, 255, 255, 0.8) ;
    padding-top:5px;
    padding-bottom:5px;
    margin-top: 1vw;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    transition:0.3s;
    z-index: 10;
    font-size:16px;
}


.menuPremier:hover {
    background-color: greenyellow;
    transition:0.3s;
    color: white;
}


.menuPremier:hover a{
    color: white;
    transition:0.3s;
}


.menuPremier li{
    padding-right: 10px;
    float:right;
    clear:both;
    width:100%;
}


.menuDeuxième{
    position: relative;
    float: right;
    clear: both;
    display: none;
    z-index: 10;
    font-size:14px;    
}


.menuDeuxième li{
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.8);
    text-align: right;
    overflow:visible;
    position:relative;
    width:12vw;
    min-width:120px;
}


.menuDeuxième a{
    display: block;
}


.menuDeuxième li:last-child{
    border-bottom: none;
}


.menuDeuxième a:hover{
    color:greenyellow;
}


.menu {
    opacity:0;
    visibility:hidden;
    transition: opacity 0.3s;
}


.menuOn {
    opacity: 1;
    visibility:visible;
    transition: opacity 0.3s;
}

.menuOff {
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s;
}


ul {
    list-style-type: none;
    padding-left: 0;    
}


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


a:hover{
    color:greenyellow;
    transition:0.3s;
}


a.back:hover{
    color:white;
}










/* //////////////////////////////////////////////////////////   

   _____    ____    _   _   _______   ______   _   _   _    _ 
  / ____|  / __ \  | \ | | |__   __| |  ____| | \ | | | |  | |
 | |      | |  | | |  \| |    | |    | |__    |  \| | | |  | |
 | |      | |  | | | . ` |    | |    |  __|   | . ` | | |  | |
 | |____  | |__| | | |\  |    | |    | |____  | |\  | | |__| |
  \_____|  \____/  |_| \_|    |_|    |______| |_| \_|  \____/ 

///////////////////////////////////////////////////////////// */








.contenuContainer {
    background-color: none;
    position:relative;
    margin-top:9vw;
    margin-bottom:9vw;
    width:45vw;
}


.first{
    position: fixed;
    top:0;
    left:0;
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity:1;
    z-index: 1000;
    width:100vw;
    height:100vh;
    background-color: white;
}


.firstOff{
    visibility: hidden;
    opacity:0;
    transition:1s;
}


.first div{
    background-color: none;
    width:fit-content;
    padding:0px;
    line-height:0;
    margin:auto;
    font-size:3vw;
    animation-duration: 1s;
    animation-name: opacity;
    animation-iteration-count:1;
}


@keyframes opacity {
  from {
    opacity:0;
  }

  to {
    opacity: 1;
  }
}


.titre {
    position: sticky;
    top:3vw;
    z-index: 6;
    margin-bottom:3vw;   
}





/* ///////////////////////////////////////////////////   
              _           _           _                               
             (_)         (_)         | |                              
  _ __ ___    _   _ __    _    __ _  | |_   _   _   _ __    ___   ___ 
 | '_ ` _ \  | | | '_ \  | |  / _` | | __| | | | | | '__|  / _ \ / __|
 | | | | | | | | | | | | | | | (_| | | |_  | |_| | | |    |  __/ \__ \
 |_| |_| |_| |_| |_| |_| |_|  \__,_|  \__|  \__,_| |_|     \___| |___/

///////////////////////////////////////////////////// */





.containerProjet{
    display: flex;
    flex-wrap: wrap;
    margin-top:3vw;
    width:70vw;
    position:relative;
    grid-gap: 1.5vw;
}


.blocProjet {
    background-color: white;
    width: 370px;
    height:370px;
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}


.blocProjet>img{
    position: absolute;
    opacity:1;
    width: 100%;
    height:100%;
    object-fit:cover;
    filter: grayscale(0%);
}


.blocProjet h3{
    visibility:visible;
    color: white;
    opacity:1;
    display:block;
    text-transform:uppercase;
    background-color: rgba(255,255,255,0);
    height:100%;
    margin: 0vw;
    padding:10px;
    position: relative;
    width: 100%;
    z-index: 1;
}


.blocProjet:hover h3{
    visibility: visible;
    max-width: 100%;
    color:white;
    height:100%;
    opacity:1;
    transition:.5s;
    text-justify: none;
    background-color: rgba(176,250,54,0.6);
    overflow: hidden;
}


.blocProjet h3 mark{
    font-family: arial;
    text-align:center;
    text-transform: uppercase;
    background-color:rgba(255,255,255,0.6);
    color:  rgba(255,255,255,1);
    border:0px solid white;
    padding:3px;
margin:10px 0px;
    font-size:22px;
    line-height:1.3;
}


.blocProjet:hover mark{
    background-color:rgba(176,250,54,0);
    transition:.5s;
    font-size:32px;
}


p.type{
    margin:0px;
    font-size:12px;
    font-style: italic;
}


.blocProjet small{
    font-size:15px;
}


.molo:hover mark{
    font-size:23px;
}




/* ///////////////////////////////////////////   

  _                                    
 (_)                                   
  _   _ __ ___     __ _    __ _    ___ 
 | | | '_ ` _ \   / _` |  / _` |  / _ \
 | | | | | | | | | (_| | | (_| | |  __/
 |_| |_| |_| |_|  \__,_|  \__, |  \___|
                           __/ |       
                          |___/ 

//////////////////////////////////////////// */




figure {
    z-index: 5;
    background-color: none;
    position:relative;
    padding:0px;
    margin: 0px;
    margin-top:3vw;
    margin-bottom: 2vw;
}


figcaption{
    background-color: none;
    font-size: 12px;
    margin-top: 10px;
    margin-top: 10px;
    opacity: 0.6;
    font-style: italic;
    line-height: 1.5;
    text-align: left;
}


/* ---------- IMAGE SIMPLE --------- */


.image > img{
    max-height:75vh;
    max-width: 55vw;
    object-fit: contain;
}


/* ---------- MOSAÏQUE --------- */


.mosaïque {
    background-color: none;
    display: flex;
    margin:3vw 0vw;
    width:100%;
}


.mosaïque > figure{
    background-color: nonen;
    padding:10px;
    margin: 0px;
    align-content:flex-end;
}


.mosaïque > figure > img{
    background-color: none;
    object-fit: contain;
    width:100%;
}


.mosaïque > figure > figcaption {
    background-color: none;
    font-size: 12px;
    margin-top: 10px;
    margin-top: 10px;
    opacity: 0.6;
    font-style: italic;
    line-height: 1.5;
    text-align: left;
    text-align:center;
}


/* ---------- BLOC IMAGE --------- */


.blocImage{
    margin-top:3vw;
    width: 150%;
    height:35vw;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    align-content: flex-start;
    scrollbar-color:black transparent;
    scrollbar-width:normal;
}


.blocImage > img{
    max-width: 100%;
    max-height:33.6vw;
    margin-right:1vw; 
    margin-bottom:5px;
}


.blocImagePetit{
    margin-top:3vw;
    max-width: 100%;
    height:45vh;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    align-content: flex-start;
    scrollbar-color:greenyellow transparent;
    scrollbar-width:normal;
}


.blocImagePetit img{
    max-height:100%;
    margin-right:1vw; 
    margin-bottom:1vw;
}


/* ---------- SCROLLBAR --------- */



div::-webkit-scrollbar {
    height:0.5vw;
}


div::-webkit-scrollbar-button {
    background-color: rgba(0,0,0,0.8);
    border-radius: 0px;
    cursor:pointer;
    display:none;
}


div::-webkit-scrollbar-track{
    background: rgba(0,0,0,0.1);
    border-radius:0px;
}


div::-webkit-scrollbar-track-piece{
    background:none;
}


div::-webkit-scrollbar-thumb:horizontal {
    background: greenyellow;
    cursor:pointer;
    border-radius: 0px;
}


div::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.6);
}




/* //////////////////////////////////////////////////////////   
  _                   _          
 | |                 | |         
 | |_    ___  __  __ | |_    ___ 
 | __|  / _ \ \ \/ / | __|  / _ \
 | |_  |  __/  >  <  | |_  |  __/
  \__|  \___| /_/\_\  \__|  \___|

///////////////////////////////////////////////////////////// */




.contenuContainer > p {
    font-family: arial;
    width:45vw;
    z-index: 4;
    text-align:justify;
    text-justify: inter-word;
    font-size:15px;
    line-height:1.5;
    margin-bottom:1vw;
    margin-top:0vw;
}


.titre > h1{
    color:rgba(0,0,0,0.8)
    margin: 0px;
    background-color:rgba(255,255,255,0.8);
    padding: 10px;
    border : 1px solid rgba(0,0,0,0.8);
    font-family: arial;
    font-size:24px;
    text-transform: uppercase;
    text-justify:left;
    width: fit-content;
    line-height: 1.2;
}


.titre > h6{
    font-size: 16px;
    color: rgba(0,0,0,0.8);
    margin-bottom:1vw;
    margin-top: 0px;
    background-color: rgba(176,250,54,0.8);
    width: fit-content;
}


h1.soustitre{
    margin-top: -2.5vw;
    background-color:rgba(255,255,255,0.8);
    padding: 10px;
    color:rgba(0,0,0,0.8);
    border : 1px solid rgba(0,0,0,0.8);
    font-family: arial;
    font-size:16px;
    text-transform: uppercase;
    font-weight: bold;
    text-justify:left;
    width: 100%;
    line-height: 1.2;
    margin-bottom:3vw;   
}


h2{
    font-size: 32px;
    color:white;
    background-color: rgba(176,250,54,0.8);
    font-weight: lighter;
    text-align:left;
    width:75%;
    line-height: 1.1;
    margin-top:3vw;
    margin-bottom:3vw;
    padding:10px 20px;
    text-transform: uppercase;
}


h2.soustitre {
    text-transform: none;
    font-size: 2vw;
    text-align: left;
    background-color: rgba (176,250,54,0.8);
    color:rgba(255,255,255,1);
    width:100%;
    margin-top:-1.5vw;
}


h3 {
    margin:3vw 0vw;
}


h5 {
  margin-top:-2vw;
  margin-bottom:3vw;
}

big {
    font-weight: bold;
    text-transform: uppercase;
    font-size:14px;
}

big.approche {
    text-transform:uppercase;
    font-size:18px;
    background-color: rgba(176,250,54,0.6);
    font-weight:bold;
    font-style: oblique;
    padding:5px;
}


mark {
    background-color: rgba(255,255,255,0.8);
    font font-weight: lighter;
    text-align: center;
    padding:5px;
    font-size:18px;
}


span {
    padding: 0px 15px;
}


sup {
    background-color:rgba(255,255,255,0.6);
    margin:3px;
    line-height: 0;
}


a {
    cursor: pointer;
}


pre{
    margin:0px;
}


blockquote {
    margin:3vw;
    text-align: center;
    line-height: 1.5;
}


abbr {
    float:left;
    clear:both;
    margin-bottom:10px;
    transform:translateX(-13.5vw);
    text-align: right;
    background-color : rgba(255,255,255,0.5);
    padding: 5px;
    width:10.5vw;
    font-size:12px;
    border:1px rgba(0,0,0,0.1) solid;
    color:rgba(0,0,0,0.5);
    font-style:italic;
    z-index: -10;
    line-height:1.2;
    word-wrap: break-word;
    margin-right:-13.5vw
}



/* ///////////////////////////////////////////   
                               _   
                              | |  
   ___  __  __   ___   _ __   | |_ 
  / _ \ \ \/ /  / _ \ | '_ \  | __|
 |  __/  >  <  |  __/ | |_) | | |_ 
  \___| /_/\_\  \___| | .__/   \__|
                      | |          
                      |_|   

//////////////////////////////////////////// */




mark.verdurePetit{
    font-size:20px;
    font-family:times;
    font-style:italic;
    background-color:transparent;
    position:relative;
    margin:non;
    float:none;
    clear:none;
    padding:none;
    white-space: nowrap;
    line-height: 0;
}


.normal {
    text-transform: none;
    font-size:30px;
    text-align: left;
    background-color: rgba (176,250,54,0.8);
    color:rgba(255,255,255,1);
    width:100%;
}


.minus {
        text-transform: lowercase;
        width: 45vw;
}


h2.principal{
    margin-top:6vw;
}


.noTopMarge{
    margin-top:0px;
}


.lessBottomMarge {
    margin-bottom:1vw;
}


.noBottomMarge{
    margin-bottom:0px;
}


.contre {
    background-color: rgba(250,176,54,0.8);
}


.approcheContre {
    text-transform:uppercase;
    font-size:18px;
    font-weight:bold;
    font-style: oblique;
    padding:5px;
    background-color: rgba(250,176,54,0.8);
}


#verdureagit {
    color:rgba(0,0,0,0.8);
    background-color:none;
    display: flex;
    flex-direction: row;
    justify-content:flex-start;
    text-align: left;
    align-items:baseline;
    margin-bottom:-10vh;
    grid-gap: 1vw;
}

#verdureagit p {
    font-size:32px;
}

#verdureagit pre {
    font-size:32px;
}


.black{
    color:rgba(0,0,0,0.8);
}


.transparent{
    color:transparent;
}


.greenyellow {
    color: greenyellow;
}

.fondVert{
    background-color: rgba(176,250,54,0.6);
    padding-left:5px;
    padding-right:5px;
    margin-right:5px;
    color:black;
}


.grey {
    color:rgba(0,0,0,0.2);
}


.white {
    color:rgba(255,255,255,1);
}


.retour:hover {
    color:white;
}


.italic {
    font-style: italic;
}


.times {
    font-family: times;
}


.bold {
    font-weight: bold;
}


.pre{
    white-space: nowrap;
}


.télécharger {
    width:90%;
    margin:auto;
    margin-top:6vh;
    margin-bottom:6vh;
    
}




/* ///////////////////////////////////////////   
                                                _               
                                               (_)              
  ___    ___    _ __ ___    _ __ ___     __ _   _   _ __    ___ 
 / __|  / _ \  | '_ ` _ \  | '_ ` _ \   / _` | | | | '__|  / _ \
 \__ \ | (_) | | | | | | | | | | | | | | (_| | | | | |    |  __/
 |___/  \___/  |_| |_| |_| |_| |_| |_|  \__,_| |_| |_|     \___| 

//////////////////////////////////////////// */





.sommaire {
    background-color:rgba(255,255,255,0.8);
    margin:6vw 0vw;
    padding:1vw;
    border:solid 1px rgba(0,0,0,0.3);
    color:blue;
}


.sommaire h1{
    background-color: rgba(176,250,54,0.8);
    margin:0px;
    text-transform: uppercase;
    color:white;
    padding:10px;
    font-size:4vh;
}


.sommaire ul{
    margin:3vw;
}


li.prim{
    margin-top:1vw;
    margin-bottom:0.5vw;
}


li.bis {
    margin-left:3vw;
    margin-top:5px;
    margin-bottom;5px;
}


li.tris {
    margin-left:6vw;
    margin-top:5px;
    margin-bottom;5px;
}


.sommaire a{
    color:rgba(0,0,0,0.8);
}


.sommaire a:hover{
        color:rgba(176,250,54,1);
}


/* ---------- BIBLIOGRAPHIE --------- */


.biblio{
    margin-left:3vw;
    margin-bottom:9vw;
    
}




/* ///////////////////////////////////////////////////
                         _            _   _     
                        | |          (_) | |    
   ___    ___    _ __   | |_   _ __   _  | |__  
  / __|  / _ \  | '_ \  | __| | '__| | | | '_ \ 
 | (__  | (_) | | | | | | |_  | |    | | | |_) |
  \___|  \___/  |_| |_|  \__| |_|    |_| |_.__/ 

////////////////////////////////////////////////////*/




.contributeurices {
    background-color : none;
    border:1px solid rgba(176,250,54,0);
    width :45vw;
    height:auto; 
    display:flex;
    margin-bottom:3vw;
    float:left;
    clear:both;
}


.photo {
    background-color: none;
    padding:0.5vw;
    width : 10vw;
    height:10vw;
    display: flex;
}


.photo > img {
    background-color: none;
    height:100%;
    width:100%;
    object-fit:cover;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:50%;
    filter: grayscale(100%);
}


.infos {
    background-color:none;
    width:35vw;
    padding-left:1vw;
    margin:auto;
    display: flex;
    flex-direction: column;
    float:left;
    clear:both;
}


.nom {
    border-bottom: 3px dotted rgba(0,0,0,0.5);
    width:100%;
    display:flex;
    margin-bottom:0.5vw;

}


.nom > a{
    position:absolute;
    background-color:none;
    border:1px solid rgba(0,0,0,0.8);
    right:0;
    text-align: center;
    justify-content: center;
    height:3vw;
    width: 3vw;
    margin:0px;
    display:flex;
    align-items: center;
    transform:0.3s;
    z-index:1;
}


.nom > a:hover {
    color:white;
    border-color: white;
    background-color: greenyellow;
}


.défile{
   transform: rotate(90deg);
   z-index: 1;
}


.nom > p {
    margin:0px;
    width:100%;
    background-color: none;
    font-style: italic;
    color:greenyellow;
    font-family: times;
    margin-bottom:0.5vw;
    height:3vw;
    text-transform:none;
    display: flex;
    align-items: center;
}


.étiquette {
    display: flex;
    grid-gap: 1vh;
    flex-direction: row;
    flex-wrap: wrap;
}


.étiquette > p {
    background-color: rgba(255,255,255,0.8);
    padding:3px;
    width:fit-content;
    font-size:12px;
    margin:0px;
}


.localisation {
    display: flex;
    align-items: center;
    grid-gap:10px;
    margin-top:0.5vw;
}


.localisation p{
    background-color: none;
    text-transform: uppercase;
    margin:0px;
    border:1px solid rgba(0,0,0,0.6);
    padding:5px;
    width:fit-content;
    font-weight: bolder;
}


.localisation > img {
    background-color: none;
    height:24px;
}


.détail {
    background-color: none;
    position:relative;
    top:1.5vw;
    width:100%;
    display:none;
    flex-direction: column;
    float:left;
    clear:both;
    margin-bottom:3vw
}


.détail > h2 {
    margin:0px;
    background-color: rgba(0,0,0,0.8);
    font-size:1vw;
    padding:2px;
    width:100%;
    font-weight:bolder;
    padding-left:10px;
}


.détail > p {
    position: relative;
    margin:5px;
    width:100%;
    font-size:1vw; 
}


.coordonnées {
    display: flex;
    align-items: center;
    margin-top:5px;
    grid-gap:10px;
}


.coordonnées p{
    background-color: none;
    margin:0px;
    font-size:16px;
}


.coordonnées > img {
    height:16px;
}




/* ///////////////////////////

CONTACT

///////////////////////////   */




.contact {
    background-color: none;
    position:relative;
    width:50%;
    margin:0px;
    display:flex;
    flex-direction: column;
    float:none;
    clear:none;
    margin-bottom:3vw;
}


.contact > .coordonnées > p {
    font-family: times;
    position: relative;
    margin:5px;
    width:100%;
    font-size:3vh; 
    white-space: nowrap;
}




/* ///////////////////////////

  _                     
 | |                    
 | |__    _   _    __ _ 
 | '_ \  | | | |  / _` |
 | |_) | | |_| | | (_| |
 |_.__/   \__,_|  \__, |
                   __/ |
                  |___/

///////////////////////////   */




.containerBug {
    background-color: rgba(0,0,0,0);
    width: 40vw;
    height:100vh;
    display: flex;
    place-items: center;
    min-height: 100vh;
    position:relative;
    left:9vw;
}


.Bug {
    font-size:16px;
}
   

#headerBug {
    background-color: none;
    position: relative;

}


#headerBug p{
    font-family: times;
    font-style: italic;
    line-height:0;  
    margin-top:0vw;  
    font-size:6vh;
}



.Bug > h1{
    margin-top : -1vh ; 
    margin-bottom : 6vh;
    background-color:rgba(255,255,255,0.75);
    padding: 10px;
    border : 1px solid black;
    font-family: arial;
    font-size:24px;
    text-transform: uppercase;
    width: fit-content;
    text-justify:left;
    white-space: nowrap;   
}


.Bug > p{
    font-size:15px;
    line-height: 1.5;
    margin-top: 5vh ;
    margin-bottom: 5vh;
}


.contactbug {
    display: flex;
    flex-direction:column;
    align-items: flex-start;
    width:75%;
    padding: 1vh;
    border: dashed 3px white;
    color: rgba(255,255,255,1);
    background-color: rgba(0,0,0,0.8);
    line-height: 1.5;
}


.green{
    color:greenyellow;
}

.contactbug > p{
    margin:0px;  
    padding: 0px;
}


.contactbug big{
    margin:none;
    font-size :24px;
    text-transform: none;
    font-weight: normal;
}










/* ////////////////////////////////////////////////////////////////////////////   
  ______   _____   _   _ 
 |  ____| |_   _| | \ | |
 | |__      | |   |  \| |
 |  __|     | |   | . ` |
 | |       _| |_  | |\  |
 |_|      |_____| |_| \_|

/////////////////////////////////////////////////////////////////////////////// */











.finContainer {
    background-color:none;
    height: 100vh;
    min-width:3vw;
    padding-bottom: 3vw;
    position:sticky;
    top:0;
    writing-mode: vertical-lr;
    display:flex;
    flex-direction: row;
    column-gap: 1.5vw;
    justify-content: flex-end;
}


.signature{
    width:100%;
    display:grid;
    place-items: center;
    padding: 10px;
    font-size: 16px;
    background-color: rgba(255,255,255,0.3);
    border:1px rgba(0,0,0,0.1) solid;
    color: rgba(0,0,0,0.2);
}


.signature:hover {
    background-color: rgba(255,255,255,0.6);
    border:1px rgba(0,0,0,0.4) solid;
    color: rgba(0,0,0,0.6);
    transition:0.3s; 
}


.top{
    width:100%;
    padding:10px;
    display:grid;
    place-items: center;
    font-size: 16px;
    background-color: greenyellow;
    opacity :0.4;
    border:1px rgba(0,0,0,0.2) solid;
    color:rgba(0,0,0);
}


.top:hover {
    border:1px solid rgba(255,255,255,0.8);
    transition:0.3s;
    color: white;
    opacity:1;
}















































/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



             _____               _____    _______           __  _  __                      _____               _____    _______     
     /\     |  __ \      /\     |  __ \  |__   __|         / / | | \ \             /\     |  __ \      /\     |  __ \  |__   __|    
    /  \    | |  | |    /  \    | |__) |    | |           / /  | |  \ \           /  \    | |  | |    /  \    | |__) |    | |       
   / /\ \   | |  | |   / /\ \   |  ___/     | |          / /   | |   \ \         / /\ \   | |  | |   / /\ \   |  ___/     | |       
  / ____ \  | |__| |  / ____ \  | |         | |         / /    |_|    \ \       / ____ \  | |__| |  / ____ \  | |         | |       
 /_/    \_\ |_____/  /_/    \_\ |_|         |_|        /_/     (_)     \_\     /_/    \_\ |_____/  /_/    \_\ |_|         |_|       
                                                                                                                                    
                                                                                                                                    
             _____               _____    _______           __  _  __                      _____               _____    _______     
     /\     |  __ \      /\     |  __ \  |__   __|         / / | | \ \             /\     |  __ \      /\     |  __ \  |__   __|    
    /  \    | |  | |    /  \    | |__) |    | |           / /  | |  \ \           /  \    | |  | |    /  \    | |__) |    | |       
   / /\ \   | |  | |   / /\ \   |  ___/     | |          / /   | |   \ \         / /\ \   | |  | |   / /\ \   |  ___/     | |       
  / ____ \  | |__| |  / ____ \  | |         | |         / /    |_|    \ \       / ____ \  | |__| |  / ____ \  | |         | |       
 /_/    \_\ |_____/  /_/    \_\ |_|         |_|        /_/     (_)     \_\     /_/    \_\ |_____/  /_/    \_\ |_|         |_|       
                                                                                                                                    
                                                                                                                                    
             _____               _____    _______           __  _  __                      _____               _____    _______     
     /\     |  __ \      /\     |  __ \  |__   __|         / / | | \ \             /\     |  __ \      /\     |  __ \  |__   __|    
    /  \    | |  | |    /  \    | |__) |    | |           / /  | |  \ \           /  \    | |  | |    /  \    | |__) |    | |       
   / /\ \   | |  | |   / /\ \   |  ___/     | |          / /   | |   \ \         / /\ \   | |  | |   / /\ \   |  ___/     | |       
  / ____ \  | |__| |  / ____ \  | |         | |         / /    |_|    \ \       / ____ \  | |__| |  / ____ \  | |         | |       
 /_/    \_\ |_____/  /_/    \_\ |_|         |_|        /_/     (_)     \_\     /_/    \_\ |_____/  /_/    \_\ |_|         |_|       
                                                                                                                                    
                                                                                                    


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */











































/* ////////////////////////////////////////////////  

   _____   ______   _   _   ______   _____               _      
  / ____| |  ____| | \ | | |  ____| |  __ \      /\     | |     
 | |  __  | |__    |  \| | | |__    | |__) |    /  \    | |     
 | | |_ | |  __|   | . ` | |  __|   |  _  /    / /\ \   | |     
 | |__| | | |____  | |\  | | |____  | | \ \   / ____ \  | |____ 
  \_____| |______| |_| \_| |______| |_|  \_\ /_/    \_\ |______|  
              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////   */



@media only screen and (max-width: 900px) {
    .container{
    background-color:none;
    display: flex;
    flex-direction: column;
    column-gap: 0vw;
    margin-left:0vw;
}
}


@media only screen and (max-width: 900px) {
body.index{
    position:relative;
    top:-9vh;
    height: 100vh; /* 100% de la hauteur de la fenêtre */
    background-position: fixed;
    background-size:  cover;
    background-repeat: no-repeat;
    background-position: center;
}
}


@media only screen and (max-width: 900px) {
body.apropos{
    position:relative;
    top:-9vh;
    height: 100vh; 
    background-image:url(/.images/0_general/fond_carto_02.png);
    background-position: fixed;
    background-size:  cover;
    background-repeat: no-repeat;
    background-position: center;
}
}


@media only screen and (max-width: 900px) {
body.contactfond {
    position:relative;
    top:-vh;
    height: 100vh; 
    background-image:url(/.images/0_general/fond_carto_02.png);
    background-position: fixed;
    background-size:  cover;
    background-repeat: no-repeat;
    background-position: center;
}
}






/* ////////////////////////////////////////////////  

  __  __   ______   _   _   _    _ 
 |  \/  | |  ____| | \ | | | |  | |
 | \  / | | |__    |  \| | | |  | |
 | |\/| | |  __|   | . ` | | |  | |
 | |  | | | |____  | |\  | | |__| |
 |_|  |_| |______| |_| \_|  \____/ 
              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////   */








@media only screen and (max-width: 900px) {
  .menuContainer {
    background-color: white;
    position:sticky;
    top:0;
    display:flex;
    flex-direction: row;
    width:100%;
    height:9vh;
    border-bottom: 1px rgba(0,0,0,0.8) solid;
    z-index:100;
}
}


@media only screen and (max-width: 900px) {
  .HeaderEtMenu {
    display:flex;
    flex-direction:row-reverse;
    height:9vh;
    width:100%;
    z-index: 100;
    place-items: center;
  }
}


@media only screen and (max-width: 900px) {
.verdure {
    position:relative;
    align-content: center;
    margin:auto;
    height:9vh;
}
}


@media only screen and (max-width: 900px) {
.verdure p{
    display:inline;
    font-family: times;
    margin:auto;
    padding:10px;
    line-height: 0.8;
    font-size:6vw;
    white-space: nowrap;
    float:none;
    clear:none;
}
}




/* ////////////////////////////////////////////////  
  _                                                              
 | |                                                             
 | |   ___     __ _    ___      _ __ ___     ___   _ __    _   _ 
 | |  / _ \   / _` |  / _ \    | '_ ` _ \   / _ \ | '_ \  | | | |
 | | | (_) | | (_| | | (_) |   | | | | | | |  __/ | | | | | |_| |
 |_|  \___/   \__, |  \___/    |_| |_| |_|  \___| |_| |_|  \__,_|
               __/ |                                             
              |___/               

              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////   */




@media only screen and (max-width: 900px) {
#menuLogo {
    cursor: pointer;
    background-color:none;
    float: none;
    clear:none;
    height:9vh;
    display:flex;
    justify-content: center;
    align-items: center;    
    position:relative;
    width:9vh;
    border-right:1px solid black;
}
}



/* ////////////////////////////////////////////////  

  _ __     __ _  __   __
 | '_ \   / _` | \ \ / /
 | | | | | (_| |  \ V / 
 |_| |_|  \__,_|   \_/

              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////   */


@media only screen and (max-width: 900px) {
.CouleurEnFondOn {
    display:none;
}
}


@media only screen and (max-width: 900px) {
.GrosCouleurEnFondOn {
    display:none;
}
}


@media only screen and (max-width: 900px) {
.ProjetCouleurEnFond {
    display:none;
}
}

@media only screen and (max-width: 900px) {
.ContactCouleurEnFond {
    display:none;
}
}


@media only screen and (max-width: 900px) {
.menu{
    position:absolute;
    width:100%;
    top:9vh;
    height:100vh;
    background-color: rgba(255,255,255,0.8);
    z-index:-10;
    display:flex;
    flex-direction: column;
}
}


@media only screen and (max-width: 900px) {
.menuOn{
    position:absolute;
    width:100%;
    top:9vh;
    height:100vh;
    background-color:  rgba(255,255,255,0.8);
    z-index:-10;
    display:flex;
    flex-direction: column;
}
}


@media only screen and (max-width: 900px) {
.menuPremier {
    float: none;
    clear: both;
    width: 90%;
    display:flex;
    flex-direction: column;
    margin:auto;
    margin-top:3vh;
    background : white ;
    padding:1vh;
    border:1px rgba(0,0,0,1) solid;
    cursor: pointer;
    transition:0.3s;
    z-index: 10;
    position:static;
    text-align: center;
    text-transform: uppercase;
    padding-right:0px;
}
}


@media only screen and (max-width: 900px) {
    .menuPremier a{
    font-size:32px;
    color:white);
    font-size: 24px;
}
}

@media only screen and (max-width: 900px) {
.menuDeuxième {
    background-color:none;
    position: relative;
    float: none;
    clear: both;
    display: none;
    z-index: 10;
    font-size:20px;
}
}


@media only screen and (max-width: 900px) {
.menuDeuxième li{
    padding:0px;
    margin: auto;
    border: none;
    width:90%;
}
}


@media only screen and (max-width: 900px) {
.menuDeuxième a{
   background-color:rgba(255,255,255,0.8);
    height: 6vh;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:0px;
    margin: auto;
    margin-top:1vh;
    border: none;
    border-bottom:0px solid white;
    text-align: center;
    overflow:visible;
    float:none;
    clear:none;
    width:100%;
}
}


@media only screen and (max-width: 900px) {
.menuDeuxième li:hover a{
    color:greenyellow;
    transition:0.3s;
    font-size: none;
}
}










/* //////////////////////////////////////////////////////////   

   _____    ____    _   _   _______   ______   _   _   _    _ 
  / ____|  / __ \  | \ | | |__   __| |  ____| | \ | | | |  | |
 | |      | |  | | |  \| |    | |    | |__    |  \| | | |  | |
 | |      | |  | | | . ` |    | |    |  __|   | . ` | | |  | |
 | |____  | |__| | | |\  |    | |    | |____  | |\  | | |__| |
  \_____|  \____/  |_| \_|    |_|    |______| |_| \_|  \____/ 

              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////////////// */










@media only screen and (max-width: 900px) {
.contenuContainer {
    background-color: none;
    position:relative;
    margin:auto;
    margin-top:0vh;
    margin-bottom:33vh;
    width:100%;
    display:grid;
    grid-template-columns: 100%;
    grid-row-gap: 0vh;
}
}


@media only screen and (max-width: 900px) {
.titre {
    position: sticky;
    top:9vh;
    width:100%;
    z-index: 10;
    margin-bottom:0vh; 
}
}




/* ///////////////////////////////////////////////////   
              _           _           _                               
             (_)         (_)         | |                              
  _ __ ___    _   _ __    _    __ _  | |_   _   _   _ __    ___   ___ 
 | '_ ` _ \  | | | '_ \  | |  / _` | | __| | | | | | '__|  / _ \ / __|
 | | | | | | | | | | | | | | | (_| | | |_  | |_| | | |    |  __/ \__ \
 |_| |_| |_| |_| |_| |_| |_|  \__,_|  \__|  \__,_| |_|     \___| |___/
              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////// */




@media only screen and (max-width: 900px) {
.containerProjet{
    background-color: none;
    position:relative;
    margin-top:-3vh;
    grid-gap:6vw;
    margin:auto;
    display: flex;
    justify-content: center;
    width:84vw;
}
}




@media only screen and (max-width: 900px) {
.blocProjet {
    background-color: white;
    width:90vw;
    height:60vw;
    min-width: 250px;
    min-height:250px;;
    position:relative;
}
}


@media only screen and (max-width: 900px) {
.blocProjet img{
    position: absolute;
    opacity:0.9;
    width: 100%;
    height:100%;
    object-fit:cover; 
    filter:grayscale(0%) ;
}
} 



@media only screen and (max-width: 900px) {
.blocProjet h3{
    color: white;
    opacity:1;
    display:block;
    text-transform:uppercase;
    background-color: rgba(255,255,255,0);
    height:100%;
    margin: 0vw;
    padding:10px;
    position: relative;
    width: 100%;
    z-index: 1;
    border:0px solid white;
    line-height:1;
}
}


@media only screen and (max-width: 900px) {
.blocProjet:hover h3{
    visibility: visible;
    max-width: 100%;
    color:white;
    height:100%;
    opacity:1;
    transition:.5s;
    background-color: rgba(176,250,54,0.6);
    overflow: hidden;
    line-height:1;
}
}


@media only screen and (max-width: 900px) {
.blocProjet h3 mark{
    font-family: arial;
    text-align: justify;
    text-transform: uppercase;
    background-color:rgba(0,0,0,0.3);
    color:  rgba(255,255,255,1);
    border:0px solid white;
    padding:2px;
    font-size:3vh;
}
}


@media only screen and (max-width: 900px) {
.blocProjet:hover mark{
    background-color:rgba(176,250,54,0);
    transition:.5s;
    font-size:3.5vh;
}
}


@media only screen and (max-width: 900px) {
.blocProjet small{
    font-size:2vh;
}
}

@media only screen and (max-width: 900px) {
small.type {
    margin:0px;
    font-size:2vh;
    font-style:italic;
    font-weight: normal;
    position: relative;
}
}


@media only screen and (max-width: 900px) {
.molo h3 mark{
    font-size:18px;
}
}


@media only screen and (max-width: 900px) {
.molo h3:hover mark{
    font-size:19px;
}
}




/* ///////////////////////////////////////////   

  _                                    
 (_)                                   
  _   _ __ ___     __ _    __ _    ___ 
 | | | '_ ` _ \   / _` |  / _` |  / _ \
 | | | | | | | | | (_| | | (_| | |  __/
 |_| |_| |_| |_|  \__,_|  \__, |  \___|
                           __/ |       
                          |___/ 

              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 


//////////////////////////////////////////// */



@media only screen and (max-width: 900px) {
.contenuContainer >figure:first-of-type{
    margin-top:-3vh;
}
}


@media only screen and (max-width: 900px) {
.contenuContainer >figure:first-of-type figcaption{
  
}
}


@media only screen and (max-width: 900px) {
figure {
    max-height:none;
    min-width: none;
    z-index: 5;
    background-color: none;
    position:relative;
    margin: auto;
    padding:0px;
    width:100%;
}
}


@media only screen and (max-width: 900px) {
figcaption {
    width:90%;
    margin:auto;
    margin-top:1vh;
    padding-left:1vh;
}
}


/* ---------- IMAGE SIMPLE ---------- */


@media only screen and (max-width: 900px) {
.image {
    margin-top:3vh;
    margin-bottom:3vh;
}
}


@media only screen and (max-width: 900px) {
.image > img{
    max-height:none;
    min-width: 100%;
}
}


/* ---------- BLOC IMAGE ---------- */


@media only screen and (max-width: 900px) {
.blocImage{
    margin-top:0vh;
    width: 100%;
    height:auto;
    display: flex;
    flex-direction:column;
    grid-template-columns: 100%;
    grid-row-gap: 4vh;
    background-color: rgba(255,255,255,0);
    padding:3vh;
    padding-bottom:3vh;
    scrollbar-color:none transparent;
    scrollbar-width:none;
}
}


@media only screen and (max-width: 900px) {
.blocImage img{
    min-width: 100%;
    max-height:none;
    margin-right:0vw;
    margin-bottom:0px;
}
}


/* ---------- MOSAÏQUE ---------- */

@media only screen and (max-width: 900px) {
.mosaïque {
    width:90%;
    margin:auto;
   
}
}


/* ---------- SCROLLBAR ---------- */


@media only screen and (max-width: 900px) {
div::-webkit-scrollbar {
    height:3vh;
}
}



/* ---------- BLOC IMAGE PETIT ---------- */


@media only screen and (max-width: 900px) {
.blocImagePetit {
    width:90%;
    margin:auto;
}
}





/* //////////////////////////////////////////////////////////   
  _                   _          
 | |                 | |         
 | |_    ___  __  __ | |_    ___ 
 | __|  / _ \ \ \/ / | __|  / _ \
 | |_  |  __/  >  <  | |_  |  __/
  \__|  \___| /_/\_\  \__|  \___|

              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////////////// */





@media only screen and (max-width: 900px) {
.first{
    position: fixed;
    top:0;
    left:0;
    display: flex;
    flex-direction: column;
    visibility: visible;
    opacity:1;
    z-index: 1000;
    width:100%;
    height:100%;
    background-color: white;
}
}


@media only screen and (max-width: 900px) {
.first div p{
    background-color: none;
    width:fit-content;
    padding:0px;
    margin:0px;
    font-size:8vw;
    line-height:1;
}
}



@media only screen and (max-width: 900px) {
.firstOff{
    visibility: hidden;
    opacity:0;
    transition:1s;
}
}



@media only screen and (max-width: 900px) {
.titre {
    display:flex;
    flex-direction: row;
    height: auto;
    align-items: center;
    width:100%;
    background-color: white;
    border-bottom: 1px solid black;
    margin-bottom:3vh;
}
}


@media only screen and (max-width: 900px) {
.titre > h1{
    margin: 0px;
    background-color:rgba(255,255,255,0.9);
    padding: 1.5vh;
    border: none;
    font-family: arial;
    font-size:20px;
    text-align:left;
    text-transform: uppercase;
    white-space: wrap;  
    color:black; 
}
}


@media only screen and (max-width: 900px) {
.titre >h6{
    display:inline;
    background-color: transparent;
    border-right:1px solid black;
    height:100%;
    margin-bottom:0px;
    align-content: center;
    padding:1.5vh;
    text-transform: uppercase;
    color:black;
    opacity: 1;
    font-size:14px;
}
}


@media only screen and (max-width: 900px) {
h5{
    padding:1vh;
    margin-top:-3vh;
    margin-bottom:3vh;
    background-color: rgba(176,250,54,1);
    color
}
}


@media only screen and (max-width: 900px) {
.titre a:hover {
    color: greenyellow;
}
}


@media only screen and (max-width: 900px) {
h2{
    width:fit-content;
    margin-top:6vh;
    margin-bottom:6vh;
}
}


@media only screen and (max-width: 900px) {
h1.soustitre {
    text-transform: uppercase;
    font-weight:normal;
    font-size: 3vh;
    text-align: center;
    align-content: center;
    border:none;
    background-color: rgba(255,255,255,0.8);
    color:black;;
    width:100%;
    padding:1.5vh;
    margin:auto;
    margin-bottom:6vh;
    margin-top:-3vh;
}
}


@media only screen and (max-width: 900px) {
h2.soustitre {
    text-transform: none;
    font-size: 5vh;
    text-align: center;
    align-content: center;
    background-color: rgba(176,250,54,1);
    color:black;;
    width:100%;
    padding:1.5vh;
    margin:auto;
    margin-top:-3vh;
    margin-bottom:3vh;
}
}


@media only screen and (max-width: 900px) {
.contenuContainer p {
    width:90%;
    margin:auto;
    margin-top:6vh;
    margin-bottom:6vh;
    z-index: 4;
    text-align:justify;
    text-justify: inter-word;
    font-size:16px;
    line-height:1.5;
}
}


@media only screen and (max-width: 900px) {
abbr {
    transform:translateX(-0vw);
    margin-right:-0vw;
    position:relative;
    float:none;
    clear: none;
    margin:auto;
    text-align: left;
    background-color : rgba(255,255,255,0);
    border:0px rgba(0,0,0,0) solid;
    padding-top:1.5vh;
    padding-bottom:3vh;
    padding-left:0vh;
    width:100%; 
    font-size:14px;
    color:rgba(0,0,0,0.3);
    font-style:italic;
    z-index: -10;
    line-height:1.5;
}
}


@media only screen and (max-width: 900px) {
h3 {
    width:90%;
    margin:auto;
    margin-top:0vh;
    margin-bottom:0vh;
}
}


@media only screen and (max-width: 900px) {
h2.principal{
    font-size: 4vh;
    color:white;
    background-color: rgba(176,250,54,0.8);
    font-weight: lighter;
    text-align:left;
    width:75%;
    line-height: 1.1;
    margin-top:3vw;
    margin-bottom:3vw;
    padding:10px 20px;
    text-transform: uppercase;
}
}


@media only screen and (max-width: 900px) {
blockquote {
    width:90%;
    margin:auto;
    margin-bottom:3vh;
    
}
}


@media only screen and (max-width: 900px) {
.sommaire {
    background-color:rgba(255,255,255,0.8);
    padding:3vh;
    border:solid 1px rgba(0,0,0,0.5);
    color:none;
    width:90%;
    margin:auto;
    margin-top:3vh;
    margin-bottom:6vh;
}
}


@media only screen and (max-width: 900px) {
.contactPage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin:auto;
    width:80%;
    padding: 1vw;
    color: rgba(0,0,0,0.8);
    font-size:21px; 
}
}


@media only screen and (max-width: 900px) {
.contactPage big{
    margin:none;
    font-size :24px;
    text-transform: none;
    font-weight: normal;
}
}


@media only screen and (max-width: 900px) {
.contactPage > p{
    font-size:18px;
    margin:0px;  
    padding:0px;
}
}


@media only screen and (max-width: 900px) {
    .décalageschlag {
    margin-bottom:12vh;
}
}




/* ///////////////////////////////////////////////////
                         _            _   _     
                        | |          (_) | |    
   ___    ___    _ __   | |_   _ __   _  | |__  
  / __|  / _ \  | '_ \  | __| | '__| | | | '_ \ 
 | (__  | (_) | | | | | | |_  | |    | | | |_) |
  \___|  \___/  |_| |_|  \__| |_|    |_| |_.__/ 

              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

////////////////////////////////////////////////////*/




@media only screen and (max-width: 900px) {
.contributeurices {
    background-color : none;
    border:3px solid rgba(255,255,255,1);
    width :90%;
    margin:auto;
    padding:3vh;
    height:auto; 
    display:flex;
    flex-direction: column;
    margin-bottom:9vh;
    float:left;
    clear:both;
}
}


@media only screen and (max-width: 900px) {
.infos {
    background-color:none;
    width:100%;
    padding-left:0vw;
    margin:auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    float:none;
    clear:none;
}
}


@media only screen and (max-width: 900px) {
.photo {
    background-color: none;
    padding:0vw;
    width : 30vw;
    height:30vw;
    display: flex;
    margin:auto;

}
}


@media only screen and (max-width: 900px) {
.photo >img {
    background-color: none;
    height:100%;
    width:100%;
    object-fit:cover;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:1000%;
    filter: grayscale(100%);

}
}


@media only screen and (max-width: 900px) {
.nom > a{
    position:relative;
    background-color:none;
    border:1px solid rgba(0,0,0,0.8);
    right:none;
    text-align: center;
    justify-content: center;
    height:40px;
    width: 50px;
    margin:auto;
    margin-left:3vh;
    display:flex;
    align-items: center;
    transform:0.3s;
    z-index: 10;
}
}


@media only screen and (max-width: 900px) {
.nom {
    border-bottom: 3px dotted rgba(0,0,0,0.5);
    width:100%;
    display:flex;
    flex-direction: row;
    margin-bottom:0vh;
    
}
}


@media only screen and (max-width: 900px) {
.nom > p {
    margin:auto;
    width:100%;
    background-color: none;
    font-style: italic;
    color:greenyellow;
    font-family: times;
    margin-bottom:0px;
    text-align: center;
    height:auto;
    text-transform:none;
    display: flex;
    justify-content: center;
}
}


@media only screen and (max-width: 900px) {
.étiquette {
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content:center;
    flex-wrap: wrap;
    background-color: none;
    grid-gap: 1vh;
    height:auto;
    margin:1vh;
}
}


@media only screen and (max-width: 900px) {
.étiquette > p {
    background-color: rgba(255,255,255,0.8);
    padding:1vh;
    margin:0px;
    width:fit-content;
    font-size:14px;

}
}


@media only screen and (max-width: 900px) {
.localisation {
    background-color: none;
    display: flex;
    align-items: flex-start;
    grid-gap:1vh;
    margin-top:0px;
}
}


@media only screen and (max-width: 900px) {
.localisation p{
    background-color: none;
    text-transform: uppercase;
    margin:0px;
    border:1px solid rgba(0,0,0,0.6);
    padding:5px;
    width:fit-content;
    font-weight: bolder;
}
}


@media only screen and (max-width: 900px) {
.détail {
    margin-top:3vh;
    background-color: none;
    position:relative;
    width:100%;
    display:none;
    flex-direction: column;
    float:none;
    clear:none;
    margin-bottom:3vh;
}
}


@media only screen and (max-width: 900px) {
.détail > h2 {
    margin-bottom:1vh;
    background-color: rgba(0,0,0,0.8);
    font-size:2vh;
    padding:2px;
    width:100%;
    font-weight:bolder;
    padding-left:10px;
}
}


@media only screen and (max-width: 900px) {
.détail > p {
    padding-bottom:1vh;
    position: relative;
    margin:0px;
    width:100%;
    font-size:14px; 
}
}


@media only screen and (max-width: 900px) {
.coordonnées {
    display: flex;
    align-items: center;
    margin-top:5px;
    grid-gap:10px;
}
}


@media only screen and (max-width: 900px) {
.coordonnées p{
    background-color: none;
    margin:0px;
    font-size:16px;
}
}








/* //////////////////////////////////////////////////////////   

  ______   _____   _   _ 
 |  ____| |_   _| | \ | |
 | |__      | |   |  \| |
 |  __|     | |   | . ` |
 | |       _| |_  | |\  |
 |_|      |_____| |_| \_|

              _                   _   
             | |                 | |  
   __ _    __| |   __ _   _ __   | |_ 
  / _` |  / _` |  / _` | | '_ \  | __|
 | (_| | | (_| | | (_| | | |_) | | |_ 
  \__,_|  \__,_|  \__,_| | .__/   \__|
                         | |          
                         |_| 

///////////////////////////////////////////////////////////// */











@media only screen and (max-width: 900px) {
.finContainer {
    background-color:none;
    padding:0vh;
    height: auto;
    width:90%;
    align-self: center;
    position:relative;
    bottom:-12px;
    margin-top:0vh;
    margin-bottom: 0vh;
    writing-mode: horizontal-tb;
    display:flex;
    flex-direction: column;
    column-gap: 0vh;
    z-index:100;
}
}


@media only screen and (max-width: 900px) {
.signature {
    position:relative;
    bottom:30vh;
    height:auto;
    width:fit-content;
    display:flex;
    margin:auto;
    text-align: center;
    padding: 1.5vh;
    font-size: 16px;
    background-color: rgba(255,255,255,0.3);
    border:1px rgba(0,0,0,0.1) solid;
    color: rgba(0,0,0,0.2);
}
}


@media only screen and (max-width: 900px) {
.top{
    position:fixed;
    bottom:3vh;
    left:33vw;
    right:33vw;
    text-align: center;
    opacity:0.9;
    background-color:white;
    width:auto;
    height:6vh;
    z-index:50;
    padding:0px;
    writing-mode:horizontal-rl; 
}
}


@media only screen and (max-width: 900px) {
.top:hover{
    background-color:greenyellow;
    opacity:1;
}
}