html,
body {
   display: flex;
   flex-direction:column;                 /* donne la direction en cas de dépassement des bords  */
   position: relative;  
   float: left;   
   height: auto;
   width: 100%;
   /*background-color:darkgrey;*/
   border:transparent;  
   margin: 0;
   padding: 0;
   background-position: top;  
   background-repeat:no-repeat;
   background-size:cover; 
   background-image: url('./images/par_defaut.jpg'); 
}

@media screen and (max-width: 360px) {     
   body {
      position: relative;     
      float: left;
      height: 640px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/360x640.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}

@media screen and (max-width: 375) {     
   body {
      position: relative;     
      float: left;
      height: 667px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/375x667.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}

@media screen and (max-width: 360) {     
   body {
      position: relative;     
      float: left;
      height: 720px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/360x720.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}

@media screen and (max-width: 375px) {    
   body {
      position: relative;     
      float: left;
      height: 812px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/375x812.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}

@media screen and (max-width: 411px) {    
   body {
      position: relative;     
      float: left;
      height: 731px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/411x731.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}

@media screen and (max-width: 768px) {    
   body {
      position: relative;     
      float: left;
      height: 1024px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/768x1024.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}
@media screen and (max-width: 1366px) {    
   body {
      position: relative;     
      float: left;
      height: 768px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/champ_lavande.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}
@media screen and (max-width: 1920px) {    
   body,html {      
      position: relative;     
      float: left;
      height: 1460px;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/champ_lavande.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}
@media screen and (max-width: 3840px) {     
   body {
      position: relative;     
      float: left;
      height: 100%;
      width: auto;
      background-position: top;  
      background-repeat:no-repeat;
      background-size:cover; 
      background-image: url('./images/3840x2160.jpg');
      border:transparent;  
      margin: 0;
      padding: 0; 
   }
}

header {
   display: flex;
   flex-direction:column;
   align-items: center;
   height: 0px;
   padding: 0 0px 0 30px;
 }

footer { 
   display: flex;
   flex-direction:column;
   float: left; 
   font-size: small;
   background-color: #dcffd9;
   text-align: center;
   padding: 5px 30px 5px 30px;
   margin-top: 0px;
   opacity: 40%; 
 } 
 .sap { 
   display: flex;
   flex-direction:column;
   box-sizing:border-box;
   float: right; /* associé avec le code html <p class="sap" permet le bon positionnement du block d'image */
   height: 150px;
   width: auto;
   margin-top: 325px;
 }
 .nav { 
   display: flex;
   align-items: left;
   padding: 0px 0px 0px 00px; /* 400*/

}
 
.pageindex { 
   display: flex;
   flex-direction:column;
   background-color: hsla(246, 23%, 59%, 0);                                /* uniquement pour la page index */               
	border-radius: 25px 25px 25px 25px;
	opacity: 100%; 
   margin: 1em 1em 1em 1em;
   padding: 10px 10px 10px 10px; 
   color: rgb(6, 58, 10);
}

.contenu {    
   /* l'élément background-color: associé du code html <div class="contenu"> permet les blocs avec transparence malgré une image fond */
   display: flex;
   flex-direction:column;
   box-sizing:border-box;
   float: left;
   /*align-items: center; non, ne rien modifier*/
   flex-wrap: wrap;  
   /*float:center; non*/
   background-color: rgba(131, 126, 174, 0.493);                                /* couleur de fond du contenu */               
	border-radius: 25px 25px 25px 25px;
	opacity: 85%;                       /* transparence du contenu */
   /*padding: 10px 10px 10px 10px;  non, les marges sont définies ailleurs */
   color: white;
   text-align: left;
}
.contenu h1 {
   text-align: center;
   font-weight: bold;
}

.contenu h2 {
   text-align: center;
}

.contenu p {
   text-align: left;
   float: left; 
}

.contenu p a {
   float: none;
   display:contents ; 
   border-radius: 5px 5px 5px 5px;
}

.contenu p a:hover{
   float: none;
   display:contents ; 
   background-color:darkblue;
   color:white;
   border-radius: 5px 5px 5px 5px;
}

.organigramme img {
   width: 10%;
   background-color:transparent;
}

.organigramme img:hover {
   background-color:transparent;
   width: 100%;
}

.image {
   position: relative;
   visibility: visible;
   width: 100%;  
 }
 
 .overlay {
   display: none;
 } 


.accueil {
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}

.pageservices {
   /*display: flex;
   flex-direction:column;
   background-color: hsla(246, 23%, 59%, 0);                                             
	border-radius: 25px 25px 25px 25px;
	opacity: 100%; 
   margin: 1em 1em 1em 1em;
   padding: 10px 10px 10px 10px; 
   color: rgb(6, 58, 10);
   background-image: linear-gradient(bottom, white, black);*/
   all: unset;
}

.pageservices a {
   text-decoration:underline;
}

#info {
   box-sizing:border-box;
   padding: 0em 1em 0 1em; 
   margin: 1em 1em 1em 1em;  
   opacity: 80%;
   font-size: 0.7em;
   text-align: center;
   background-color: rgb(255, 230, 0);
   color:black;
   border-radius: 25px 25px 25px 25px;
}
.contact {
   box-sizing:border-box;
   display: inline-block;
   background-color:#EEEEEE;
   color:darkblue;
   border-radius: 5px 5px 5px 5px; 
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}
.contact p a {
   background-color:rgb(8, 126, 141);
   border-radius: 5px 5px 5px 5px; 
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}

.cadre {
   display: flex;
   flex-wrap: wrap;   
   box-sizing: border-box;
   float:center;
   opacity: 100%;
   color:unset;
   background-color: unset;
   text-align: center;
}
                                                         /* classe des blocks de menu */
.cadre-jardinage { /* flexbox style ! */  
   background-color: rgb(142, 255, 127);
   padding: 0.3em 0.8em 0.3em 0.8em;
   margin: 1em 1em 1em 1em; 
   border-radius: 25px 25px 25px 25px;   
}
.cadre-bricolage {  
   background-color: rgba(218, 80, 80, 0.884);
   padding: 0.3em 0.8em 0.3em 0.8em;
   margin: 1em 1em 1em 1em;
   border-radius: 25px 25px 25px 25px;    
}
.cadre-informatique {     
   background-color: rgba(67, 105, 231, 0.836);
   padding: 0.3em 0.8em 0.3em 0.8em;
   margin: 1em 1em 1em 1em; 
   border-radius: 25px 25px 25px 25px;  
}

.cadre-maintenance { 
   background-color: rgba(131, 90, 0, 0.808); 
   padding: 0.3em 0.8em 0.3em 0.8em;
   margin: 1em 1em 1em 1em;
   border-radius: 25px 25px 25px 25px;
}

.cadre-nettoyage { 
   color:black;
   background-color: white;
   padding: 0.3em 0.8em 0.3em 0.8em;
   margin: 1em 1em 1em 1em; 
   border-radius: 25px 25px 25px 25px;   
}

.cadre-nettoyage:hover {
   color:black;
   background-color:whitesmoke;
}

.deplacements {
   text-align: left;
   color:black;
   /*background-color: rgb(245, 245, 245);*/
   padding: 0.3em 0.8em 0.3em 0.8em;
   margin: 1em 1em 1em 1em; 
   border-radius: 25px 25px 25px 25px;   
}

.deplacements p a {
   display: inline-block;
   box-sizing: border-box;
   background-color: whitesmoke;
   color:blue;
   margin: 1em 1em 1em 1em; 
   padding: 1em 1em 1em 1em; 
   border-radius: 25px 25px 25px 25px;
}

.deplacements p a:hover{
   display: inline-block;
   box-sizing: border-box;
   background-color: blue;
   color: white;
}


                                                               /* id sections */
#jardinage {
   box-sizing: border-box;
   opacity: 100%; 
   background-color: rgba(142, 255, 127, 0.795);
   border-radius: 25px 25px 25px 25px;
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}

#imgjardinage {
   margin: 1em 1em 1em 1em;
   float: right;
}

#imgbricolage {
   margin: 1em 1em 1em 1em;
   float: left;
}

#imgordi {
   margin: 1em 1em 1em 1em;
   float: right;
}

#bricolage {
   display:inline-block; /* attention : sans inline-block, le texte paraît bon dans un certain affichage, dans l'autre, le texte lui précède... ! */
   box-sizing: border-box;
   opacity: 100%; 
   background-color: rgb(218, 80, 80);
   border-radius: 25px 25px 25px 25px;
   margin: 1em 1em 1em 1em;
   padding: 1em 1em 1em 1em;
}

#bricolage ul {
   display:inline-block;
}

#maintenance {    
   display:inline-block;
   box-sizing: border-box;
   opacity: 100%; 
   background-color: rgb(194, 154, 67);
   border-radius: 25px 25px 25px 25px;
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}
#nettoyage {
   display:inline-block;
   box-sizing: border-box;
   opacity: 100%; 
   background-color:white;
   color:black;
   border-radius: 25px 25px 25px 25px;
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}
#informatique {
   display:inline-block;
   box-sizing: border-box;
   opacity: 100%; 
   background-color: rgb(67, 105, 231);
   color:white;
   border-radius: 25px 25px 25px 25px;
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}

#informatique ul {
   display:inline-block;
}

#autres {
   display:inline-block;
   box-sizing: border-box;
   opacity: 100%; 
   color:white;
   background-color: rgb(161, 68, 204);
   border-radius: 25px 25px 25px 25px;
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}
                                                      /* cadre & hover */
.cadre-bricolage:hover{
   text-decoration:overline;
}

.cadre-jardinage:hover{
   text-decoration:overline;
}

.cadre-informatique:hover {
   text-decoration:overline;
}

.cadre-nettoyage:hover {
   text-decoration:overline;
}

.cadre-maintenance:hover {
   text-decoration:overline;
}

a {
    color: inherit;
    text-decoration: none;
      /* permet de retirer le trait de soulignement du lien... */
 }
 
 a:hover {    
    text-decoration: none;  /* permet de retirer le trait de soulignement du lien... */  
 }

 .reglement {
   text-align: left;
   display:inline-block;
   box-sizing: border-box;
   opacity: 85%; 
   background-color: rgb(208, 241, 171);
   border-radius: 25px 25px 25px 25px;
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
}

.reglement h1 {
   text-align: center;
}

.reglement p a:hover {
   opacity: 100%;     
   color:rgb(31, 16, 168);
   background-color:white;
   border-radius: 5px 5px 5px 5px;
   padding: 0em 0em 0em 0em;
   margin: 0em 0em 0em 0em;
}

.reglement p a{
   text-decoration:underline;
}

.reglement img {
   width: 20%;
   background-color:transparent;
}

.reglement img:hover{
   width: 100%;
}

 .paiement {     
   text-align: left;
   display:inline-block;
   box-sizing: border-box;
   background-color:rgb(177, 188, 255);
   padding: 0.3em 0.8em 0.3em 0.8em;
   margin: 1em 1em 1em 1em; 
   border-radius: 25px 25px 25px 25px;   
}

.grille_t {
   text-align: left;
   display:inline-block; 
   background-color:rgba(247, 255, 177, 0.932);
   padding: 1em 1em 1em 1em;
   margin: 1em 1em 1em 1em;
   border-radius: 25px 25px 25px 25px; 
}

.important {
   text-align: center;
   display:inline-block; 
   background-color:rgba(255, 30, 30, 0.801);
   border-radius: 25px 25px 25px 25px; 
}

.important p {
   padding: 0.5m 2em 0.5em 2em;
   margin: 0.5em 2em 0.5em 2em;
}

.important p a:hover {
   text-decoration:underline;
}

.blink {
   animation: blink-animation 1s steps(5, start) infinite;
   -webkit-animation: blink-animation 1s steps(5, start) infinite;
 }
 @keyframes blink-animation {
   to {
     visibility: hidden;
   }
 }
 @-webkit-keyframes blink-animation {
   to {
     visibility: hidden;
   }
 }

 .reseaux {
   all:unset;
   color:rgb(2, 71, 2);
   display: contents; 
   text-align: center; 
   border-radius: 25px 25px 25px 25px; 
}

.paiement li a {
   text-decoration: underline;
}
 

.paiement li a:hover {
   text-decoration:none;
   opacity: 100%; 
   background-color:white;
   color:darkslategrey;
   border-radius: 5px 5px 5px 5px;
   padding: 0em 1em 0em 1em;
   margin: 0em 0em 0em 0em;
   
}

.paiment ul {
   display:inline-block;
   
}

.paiement p iframe {
   box-sizing: border-box;
   margin: 0.2em 0.2em 0.2em 0.2em;
   padding: 0.2em 0.2em 0.2em 0.2em;
   display:inline;
   /*display: inline;*/ 
}

.sitemap img {
   width: 30%;
   height: auto;
}

 .menu {
   text-decoration: none;
   min-height: calc(100vh - 94px - 94px);
    margin: 130px 0px 0px 160px; 
    padding-top: 70px 0px 150px 0px;
    /*padding: 0% 0% 0% 0%;*/
    position: absolute;
    left: 0%;
    top: 0%; 
    bottom: 0;
    right: 0px;
    width: 0px;
    height: 0px;
    text-align: center;
    box-sizing: border-box;
    font-size: 26px;    
 }
 
 .menu-a {
    color: rgb(23, 32, 151);       
 }
 
 .menu-item,
 .menu-open-button {
    background: #EEEEEE; /* couleur du fond du bouton central */
    border-radius: 100%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    position: absolute;
    color:rgb(0, 72, 131);    /* couleur de la police de caractère */
    text-align: center;
    line-height: 80px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
 }
 
 .menu-open {
    display: none;
 }  

 .menu-open:checked + .menu-open-button .line-1 {
    -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
    transform: translate3d(0, 0, 0) rotate(45deg);
 }
 
 .menu-open:checked + .menu-open-button .line-2 {
    -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
    transform: translate3d(0, 0, 0) scale(0.1, 1);
 }
 
 .menu-open:checked + .menu-open-button .line-3 {
    -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
    transform: translate3d(0, 0, 0) rotate(-45deg);
 }
 
 /* .menu-item {
    transition: all 0.1s ease 0s;
 } */
 
 .menu-item:hover {
    background: #EEEEEE; /* couleur de fond au passage par la souris sur les boutons */
    text-decoration: none;
 }
 
 .menu-item:nth-child(3) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(4) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(5) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(6) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(7) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(8) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-item:nth-child(9) {
    -webkit-transition-duration: 180ms;
    transition-duration: 180ms;
 }
 
 .menu-open-button {
    z-index: 2;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    cursor: pointer;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
 }
 
 .menu-open-button:hover {
    -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
    transform: scale(1.2, 1.2) translate3d(0, 0, 0);
 }
 
 .menu-open:checked + .menu-open-button {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-duration: 200ms;
    transition-duration: 200ms;
    -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
    transform: scale(0.8, 0.8) translate3d(0, 0, 0);
 }
 
 .menu-open:checked ~ .menu-item {
    -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
    transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(3) {
    transition-duration: 180ms;
    -webkit-transition-duration: 180ms;
    -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
    transform: translate3d(0.08361px, -104.99997px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(4) {
    transition-duration: 280ms;
    -webkit-transition-duration: 280ms;
    -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
    transform: translate3d(90.9466px, -52.47586px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(5) {
    transition-duration: 380ms;
    -webkit-transition-duration: 380ms;
    -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
    transform: translate3d(90.9466px, 52.47586px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(6) {
    transition-duration: 480ms;
    -webkit-transition-duration: 480ms;
    -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
    transform: translate3d(0.08361px, 104.99997px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(7) {
    transition-duration: 580ms;
    -webkit-transition-duration: 580ms;
    -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
    transform: translate3d(-90.86291px, 52.62064px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(8) {
    transition-duration: 680ms;
    -webkit-transition-duration: 680ms;
    -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
    transform: translate3d(-91.03006px, -52.33095px, 0);
 }
 
 .menu-open:checked ~ .menu-item:nth-child(9) {
    transition-duration: 780ms;
    -webkit-transition-duration: 780ms;
    -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
    transform: translate3d(-0.25084px, -104.9997px, 0);
 }
 
 .blue {
    background-color: #ff5e00;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .blue:hover {
    color: #ff5e00;
    text-shadow: none;   
 }
 
 .green {opacity: 0.9;
    background-color: #ff8800;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .green:hover {
    color: #ff8800;
    text-shadow: none;
 }
 
 .red {
    background-color: #ffc655;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .red:hover {  
   color:#8b6d31;                                                      
    text-shadow: none;
 }
 
 .purple {
    background-color: #fff78c;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .purple:hover {
    color: #85814a;
    text-shadow: none;
 }
 
 .orange {
    background-color: #c5fa70;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .orange:hover {
    color: #5e7737;
    text-shadow: none;
 }
 
 .lightblue {
    background-color: #70faa9;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
 }
 
 .lightblue:hover {
    color: #387c54;
    text-shadow: none;
 }