@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap'); 
  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@1&display=swap');


   body {
    background-image: url(/csscom/img/drapeau.jpg);
      background-repeat: no-repeat;

      background-position: center;
      background-size: auto auto;
      /* padding: 20px 0 10px 0; */
      font-family: 'Raleway', sans-serif;
      margin: 0, auto;
      padding: 0;
    }
    
    /* ************************************header******************************************* */
     
    .liradio{

      padding-left: 25%;
      margin-left: auto;
      margin-right: auto;
  
      }

      .logoradio{
 
        margin:20px;
    
        width: 10%;
    
      }


   .logo {
 
      width: 220px;
      height: 170px;
      float: left;
    }
    .logo-mobile {
     display: none;

   }
    
    #m-booked-weather-bl250-81239 {
      float: right;
    
    } 
    
    .navbar {
     
     display: none;
    }
    

    .menu>ol {
     
      width: 100%;
    margin-top: 60px;
      overflow: hidden;
      list-style: none;
      padding: 0;
      position: absolute;
      text-align: center;

      z-index: 2;
      
    }
    
    .menu>ol>li {
      
      overflow: hidden;
      background: #535151;
      border-left: 5px solid var(--gradient-color);
      margin-bottom: 1px;
      position: relative;
      transition: 0.5s;
    }
    
    .menu>ol>li:nth-child(1) {
      --accent-color: #fda085;
      --gradient-color: #f6d365;
    }
    
    .menu>ol>li:nth-child(2) {
      --accent-color: #bff098;
      --gradient-color: #6fd6ff;
    }
    
    .menu>ol>li:nth-child(3) {
      --accent-color: #ea8d8d;
      --gradient-color: #a890fe;
    }
    
    .menu>ol>li:nth-child(4) {
     
      --accent-color: #d8b5ff;
      --gradient-color: #1eae98;
    }
    
    .menu>ol>li:nth-child(5) {
      --accent-color: #c6ea8d;
      --gradient-color: #fe90af;
    }
    
    .menu>ol>li a:not(:last-child):before {
      
      content: "\f078";
      font-family: fontAwesome;
      font-size: 0.75em;
      line-height: 50px;
      position: absolute;
      right: 25px;
      top: 0;
      bottom: 0;
      margin: auto;
      transition: 0.5s;
    }
    
    .menu>ol>li:focus,
    .menu>ol>li:focus-within,
    .menu>ol>li:hover {
      z-index: 100;
    }
    
    .menu>ol>li:focus:after,
    .menu>ol>li:focus-within:after,
    .menu>ol>li:hover:after {
      background: linear-gradient(to left, var(--accent-color), var(--gradient-color));
      max-width: 420px;
      
    }
    
    .menu>ol>li:focus .sub-menu,
    .menu>ol>li:focus-within .sub-menu {
      max-height: 500px;
      
    }
    
    .menu>ol>li:focus a:before,
    .menu>ol>li:focus-within a:before {
      transform: rotate(-180deg);
    }
    
    .menu>ol>li:after {
      
      background: #3c3c3c;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      transition: 0.5s;
      max-width: 0;
      overflow: hidden;
    }
    
    .menu>ol .sub-menu {
     
      z-index: 4;
      border-left: 1px solid #fbfbfb;
      margin-left: 22.5px;
      list-style: none;
      max-height: 0px;
      overflow: hidden;
      padding-left: 7.5px;
      position: relative;
      transition: 0.5s;
    
    }
    
    .menu>ol .sub-menu li {
  
      font-size: 1em;
    }
    
    .menu>ol .sub-menu li:hover,
    .menu>ol .sub-menu li a:focus {
      background: rgb(109, 102, 102);
    }
    
    .menu>ol .sub-menu li a:after {
      bottom: 5px;
      height: 1px;
     
    }
    
    .menu>ol .sub-menu li a:hover:after,
    .menu>ol .sub-menu li a:focus:after {
      width: 15px;
      
    }
    
    .menu>ol>li {
      
      border-top: 5px solid var(--accent-color);
      border-left: 0;
      display: inline-block;
      margin-left: -5.3px;
      vertical-align: top;
      width: 10em;
    }
    
    .menu>ol>li:hover:after,
    .menu>ol>li:focus:after,
    .menu>ol>li:focus-within:after {
      background: linear-gradient(to bottom, var(--accent-color), var(--gradient-color));
      border-radius: 3px;
      top: -15px;
      bottom: -15px;
      left: -15px;
      right: -15px;
    }
    
    .menu>ol>li:hover .sub-menu,
    .menu>ol>li:focus .sub-menu,
    .menu>ol>li:focus-within .sub-menu {
      max-height: 750px;
    }
    
    .menu>ol>li a:not(:last-child):before {
      right: 12.5px;
    }
    
    .menu>ol>li:hover a:before {
      transform: rotate(-180deg);
    }
    
    .menu>ol .sub-menu {
      border-left: 0;
    margin-left: -5px;
      padding-left: 0;
    
    }
    
    .menu>ol>li a:not(:last-child):before {
      right: 25px;
    }
    
    #menu li {
      overflow: visible;
      display: inline;
      margin-right: 5px;
      color: rgb(0, 0, 0);
      font-size: 1em;
      
    
    }
    
    .menu>ol>li a {
      
      overflow: hidden;
      color: #fbfbfb;
      display: block;
      padding: 15px;
      position: relative;
      text-decoration: none;
      font-size: 1em;
      z-index: 1;
    
    }
    
    
    a:focus:after {
      width: 50px;
    
    }
    

    a:focus {
      outline: none;
      position: relative;
      
    }
    
    :root {
     
      --accent-color: #45494e;
      --gradient-color: #fbfbfb;
    }

    /* ***************************************bienvenue************************************* */
    
.galerie{
  width: 80%;
  height: auto;
  margin-top: 50px;

  margin-bottom: 20px;

}
@media screen and (min-width: 1440px)
{

 .galerie{ 
  width: 85%;
  margin: 140px 140px 40px;

}
 }

    .mot {
    
      padding-left: 100px;
      word-wrap: break-word;
    }
    
    .mot>ol {
      padding-left: 80px;
      list-style: circle;
      /* position: relative; */
    }
    
    
  
    /* ..........................location...................................................*/
    
     h3 {
      text-align: center;
      padding-top: 150px;
     
      }

      @media screen and (max-width: 420px)
      {
        h3{  padding-top: 110px; }
        
      }
    
    .w3-content {
    
      padding-top: 20px;
    }
    
   
    
    #descriptif {
    
      padding-left: 30px;
      padding-top: 20px;
    }
    
    #descriptif>ol {
      list-style: square;
      padding-left: 80px;
    }
    
    
    
    
    /* ..........................tourisme................................................... */
  
h4{

  padding-left: 10%;
}

     .tourisme {
      padding-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    } 
    
   
    .activité{
      margin: 10px;
      max-width: 35%;
      height: auto;
    }

    .activité1{
      margin: 10px;
      max-width: 50%;
      height: auto;
    }
   
                                       
    
    /* ..........................recette.................................................. */
   
    
    .recette {

      display: inline-flex;
      gap: 20px;
      margin-left: 5%;
      margin-bottom: 5.5%;
      margin-top: 30px;

    }
    @media screen and (min-width: 1450px)
     {

      .recette{ 
      margin-left: 250px;
      margin-bottom: 12.5%;
    }
      }


    
    .photo {
    
      cursor: pointer;
      height: 300px;
      position: relative;
      overflow: hidden;
      width: 300px;
    }
    
    
    .photo .fadedbox {
    
      background-color: #fff7f700;
      position: absolute;
      top: 0;
      left: 0;
      color: #fff;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      opacity: 0;
      width: 300px;
      height: 400px;
      padding: 130px 10px;
    
    }
    
    .photo:hover .fadedbox {
      opacity: 0.9;
    }
    
    .photo .lien {
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      transform: translateY(30px);
      -webkit-transform: translateY(30px);
      text-align: center;
    }
    
    .photo .lien {
      font-size: 1.8em;
      text-transform: uppercase;
      opacity: 1;
      transition-delay: 0.2s;
      transition-duration: 0.3s;
    }
    
    .photo:hover .lien,
    .photo:focus .lien {
      background-color: rgba(102, 92, 92, 0);
      opacity: 1;
      transform: translateY(px);
      -webkit-transform: translateY(0px);
    }
    
    
    /* .............................. gadjak............... */


.plat {
  
  color: #000000;
  padding-top: 130px;
  padding-right: 20px;
  padding-left: 20px;
  margin: 0;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
  grid-auto-rows: minmax(10px, auto);
}

/* *****************vindaye******************* */
.un {
  text-align: center;
  grid-column: 2;
  grid-row: 1;  
 border-bottom: 2px solid black;
 
}
.deux {
 
  grid-column:1;
  grid-row: 2;
}
.trois {
  
  grid-column: 2;
  grid-row: 2;
}
.quatre {
  
  grid-column: 3;
  grid-row: 2;
}
.cinq {
  text-align: center;
  grid-column: 2;
  grid-row: 3;
  border-bottom: 2px solid black;
}
.six {
  grid-column: 1;
  grid-row: 4;
}
.sept {
  
  grid-column: 2;
  grid-row: 4;
}
.huit {
  grid-column: 3;
  grid-row: 4;
}
/* *****************mine******************* */
.neuf {
  border-bottom: 2px solid black;
  text-align: center;
  grid-column: 2;
  grid-row: 5;
}
.dix {
  grid-column: 1;
  grid-row: 6;
}
.onze{
  grid-column: 2;
  grid-row: 6;
}
.douze {
  grid-column: 3;
  grid-row: 6;
}

/* *****************riz******************* */
.treize {
  border-bottom: 2px solid black;
  text-align: center;
  grid-column: 2;
  grid-row: 7;
}
.quatorze {
  grid-column: 1;
  grid-row: 8;
}
.quinze{
  grid-column: 2;
  grid-row: 8;
}
.seize {
  grid-column: 3;
  grid-row: 8;
}

/* *****************pain******************* */

.dixsept {
  grid-column: 2;
  grid-row: 1;
}
.dixhuit {
  grid-column: 1;
  grid-row: 2;
}
.dixneuf{
  grid-column: 2;
  grid-row: 2;
}
.ving {
  grid-column: 3;
  grid-row: 2;
}

.vingtun {
  grid-column: 2;
  grid-row: 3;
}
.vingdeux {
  grid-column: 1;
  grid-row: 4;
}
.vingtrois{
  grid-column: 2;
  grid-row: 4;
}
.vingquatre {
  grid-column: 3;
  grid-row: 4;
}



/* <!-- ........CSS   LIVRE D'OR............. --> */
/* <style type="text/css"> */
article {

    width: 80%;
    margin-left: auto;
    margin-right: auto;

}

p { border-top: solid 1px rgb(0, 0, 0);
  
}


#form {
position: relative;
width: 500px;
margin: 5px auto 100px auto;
}

#bouton{
  border-bottom: none;
}
input {
font-family: 'Lato', sans-serif;
font-size: 0.875em;
width: 470px;
height: 50px;
padding: 0px 15px 0px 15px;

background: transparent;
outline: none;
color: #000000;

border: solid 1px rgb(0, 0, 0);


transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

input:hover {
background: #b3aca7;
color: #000000;

}

textarea {
width: 470px;
max-width: 470px;
height: 110px;
max-height: 110px;
padding: 15px;

background: transparent;
outline: none;

font-size: 0.875em;
border: solid 1px black;

transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}

textarea:hover {
background: #b3aca7;
color: #000000;
}

#submit {
width: 20px;
padding: 0;
margin: -5px 0px 0px 0px;

font-family: 'Lato', sans-serif;
font-size: 0.875em;
color: #000000;

outline:none;
cursor: pointer;

border: solid 4px black;

}

#submit:hover {
color: #000000;
}
 
    
    /* ..........................FOOTER................................................... */
   

    #footer {
      
   
 
   
     background-image: url("/csscom/logo/dodo/favicon-64.png");
     background-repeat: no-repeat;
     background-color: #3c3c3c;
      color: #ffffff;
     
    }
    
    .contact {
      color: #fbfbfb;
      text-align: center;
    }
    
    #copyright {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      color: rgb(255, 255, 255);
      padding-left: 90%;
    }