body {
    font-family: Verdana, Arial;
    background-color: white;
    margin: 0;
    padding: 0;
}


header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between the logo and the menu */
    background-color: #222222;
    padding: 20px 20px; /* Increase the padding to make the header taller */
    height: 80px; /* Set a fixed height for the header */
    position: fixed; /* Fix the header at the top */
    width: 100%; /* Make the header take the full width of the page */
    top: 0; /* Position at the very top */
    z-index: 1000; /* Ensure it is above other elements */
}

.logo {
    flex-shrink: 0; /* Prevent the logo from shrinking */
}

.logo img {
    height: 100px; /* Adjust the height of the logo if needed */
    padding-left: 20px;
}


.tel img {
    height: 30px; /* Adjust the height of the logo if needed */
    padding-left: 20px;
}

nav {
    flex-grow: 1; /* Allow the nav to grow to take up remaining space */
    display: flex;
    justify-content: center; /* Center the menu items */
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    margin-left: 40px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
}

nav ul li a:hover {
    text-decoration: none;
    color:#ffc208;
}

.home img {
    width: 100%; 
    height: auto;
}

.couleur
{
  color:#ffc208;
  font-size: 20px;
  
}

.txt
{
 font-size: 12px;
}

.t1
{
    width:100%;
    padding: 5%;
    background-color: #e7e7e7;
}

.td1
{
    text-align: center;
    font-family:verdana;
    font-size: 20px;
    color:black;/*color:#b16838;*/
}

.titre
{
    font-size: 30px;
  }
  
  
.titre_inf
{
 color:#ffc208;
 font-size: 26px;
}

.titre_info
{
 color:black;
 font-size: 26px;
 
}
  
  .titre_ch
{
    font-size: 48px;
  }
  
  .t2
{
     width: 100%;
     font-family:Tahoma;
}

 table.t2 th,
    table.t2 td {
      width: 50%;
      text-align: center;
      font-size: 28px;
      font-family:Tahoma;
      color:black;/*color:#b16838;*/
      
      /*border: 1px solid #ccc; /* Supprime ou modifie selon besoin */
    }
    
.adr
{
 
background-color: #222222;
}

.chambre
{
    max-width: 100%;
    height: auto;
    display: block;
}

 .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: black;/*#6e4c36;*/
    color: white;
    text-decoration: none;
    border-radius: 10px;
    font-family:verdana;
  }
  
 .info
 {
  font-size: 16px;
  text-align: justify;
  margin: 100px;
  line-height: 2;
  
 }
 
 .information
 {
   width: 400px;
   height: 600px
 }


.salle
{
    max-width: 100%;
    height: auto;
    display: block;
}

.piscine
{
    max-width: 100%;
    height: auto;
    display: block;
}

.deauville
{
    max-width: 100%;
    height: auto;
    display: block;
}


.trouville
{
    max-width: 100%;
    height: auto;
    display: block;
}

.cabourg
{
    max-width: 100%;
    height: auto;
    display: block;
}

.dday
{
    max-width: 100%;
    height: auto;
    display: block;
}

.honfleur
{
    max-width: 100%;
    height: auto;
    display: block;
}

.gite_chambre
{
    max-width: 100%;
    height: auto;
    display: block;
}

.gite_cuisine
{
    max-width: 100%;
    height: auto;
    display: block;
}

.gite_sdb
{
    max-width: 100%;
    height: auto;
    display: block;
}

.gite_terrasse
{
    max-width: 100%;
    height: auto;
    display: block;
}



.t_trouville
{
    text-align: center;
    font-family:verdana;
    font-size: 14px;
    color:black;/*color:#b16838;*/

}

.ville_trouville
{
    font-size: 16px;
    font-weight: bold;
  }


.logo_trouville
{
    width: 150px;
    height: 110px;
}

.logo_honfleur
{
    width: 200px;
    height: 151px;
}

.logo_cabourg
{
    width: 200px;
    height: 134px;
}

.logo_normandie
{
    width: 500px;
    height: 142px;
}


.logo_dday
{
    width: 200px;
    height: 135px;
    border: 1px solid black;
}

.logo_tel
{
    width: 26px;
    height: 26px;
}

.logo_position
{
    width: 80px;
    height: 80px;
}


.logo_gps
{
    width: 80px;
    height: 80px;
}

.mini
{
  width: 60px;
  height: 60px;
}

/* Tableau tarifs*/
  .table-container {
      overflow-x: auto;
      margin: 20px;
    }

    .t_tarif {
      margin: 20px auto;
      border-collapse: separate;
      border-spacing: 0;
      border: double 4px #333;
      text-align: center;
      min-width: 600px; /* assure la largeur minimum du tableau */
    }

    .t_tarif th,
    .t_tarif td {
      border: double 2px #666;
      padding: 10px 15px;
      vertical-align: middle;
      white-space: nowrap;
    }

    .t_tarif thead tr th:nth-child(n+2):nth-child(-n+7) {
      background-color: #000;
      color: #fff;
    }

    .t_tarif tbody tr:nth-child(1) {
      background-color: #f1e2be; /* vert pâle */
    }

    .t_tarif tbody tr:nth-child(2) {
      background-color: #ffe5b4; /* orange clair */
    }

    .t_tarif tbody tr:nth-child(3) {
      background-color: #fff9c4; /* jaune clair */
    }

    @media screen and (max-width: 768px) {
      .t_tarif th,
      .t_tarif td {
        font-size: 14px;
        padding: 8px 10px;
      }
    }
    
/*---fin tableau --*/

.lien_cgv a
{
  /*text-decoration: none;*/
  font-size: 16px;
  color : black;
  
}


.lien_cgv a:hover
{
  /*text-decoration: none;*/
  font-size: 16px;
  color : gray ;
}

.lien_rejoindre a
{
 font-size: 22px;
  color : black;
}

.lien_rejoindre a:hover
{
  /*text-decoration: none;*/
  font-size: 22px;
  color : gray ;
}

footer {
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footer-content a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.footer-content a:hover {
    text-decoration: underline;
}

.t4
{
     width: 100%;
     font-family:Verdana;
     background-color: black;
     text-align: center;
     font-size: 16px;
     color:#ffc208;
}

.t3
{
     width: 100%;
     font-family:Verdana;
}

 table.t3 th,
    table.t3 td {
      width: 33%;
      text-align: right;
      font-size: 14px;
      font-family:Verdana;
      color:white;
      /*border: 1px solid #ccc; /* Supprime ou modifie selon besoin */
    }
    

table.t3 td a:hover {
    text-decoration: none;
    color:#ffc208;
}

.logo_lang
{
 width: 25px;
  height: 16px;
}

 #logo_fb
 {
  width: 25px;
  height: 25px;
 }
 
  #logo_yt
 {
  width: 27px;
  height: 27px;
 }
 
 
  #logo_insta
 {
  width: 25px;
  height: 25px;
 }
 
 .itin
{
  margin: 100px;
}

.sejour
{
  text-align: center;
}


.police
{
  font-size: 18px;
}

.policech
{
  font-size: 16px;
  text-align: left;
  padding-left: 35%;
  
}
 
 
 /* -----------Scroll ------------*/

a#cRetour{
  border-radius:3px;
  padding:15px; /* taille du carré */
  font-size:20px; /* taille de la flèche */
  text-align:center;
  color:#fff;
  background:rgba(128, 128, 128, 0.7);
  position:fixed;
  right:20px;
  opacity:1;
  z-index:99999;
  transition:all ease-in 0.2s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-decoration: none;
}
a#cRetour:before{ content: "\25b2"; }
a#cRetour:hover{
  background:rgba(128, 128, 128, 1);  /*Couleur de fond du boutn */
  transition:all ease-in 0.2s;
}
a#cRetour.cInvisible{
  bottom:-35px;
  opacity:0;
  transition:all ease-in 0.5s;
}

a#cRetour.cVisible{
  bottom:20px;
  opacity:1;
}

/* nous rejoindre */

 .rej { font-family: Arial, sans-serif; margin: 0; padding: 0; color: #333; }
    .rejoindre {
      background-image: url('banniere-manoir.jpg');
      background-size: cover;
      background-position: center;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 0 0 5px #000;
    }
    .rejoindre h1 { font-size: 2.5em; }
    section { padding: 40px 20px; max-width: 900px; margin: 0 auto; }
    h2 { color: #8b5e3c; }
    .icon { font-size: 1.5em; margin-right: 10px; }
    .info-block { margin-bottom: 30px; }
    .map-btn, .lang-btn {
      display: inline-block;
      margin-top: 10px;
      padding: 10px 15px;
      background: #8b5e3c;
      color: white;
      text-decoration: none;
      border-radius: 5px;

    }
    .lang-switch
    {
     text-align: right; padding: 10px 20px;
     }
     
     /*--- Information --*/
        .contact-section {
      max-width: 500px;
      padding: 30px;
      background-color: black;

    }

    .contact-section h2 {
      text-align: center;
      color: #ffc208;
      margin-bottom: 25px;
      font-size: 14px;
    }

    .contact-info p {
      margin: 12px 0;
      font-size: 16px;
    }


.coord
{
 text-align: left;
 padding-left: 200px;
}

.tit
{
 color: white;
 font-size: 26px;
}


.lien_siteweb a
{
  /*text-decoration: none;*/
  font-size: 16px;
  color : #ffc208;
  text-decoration: none;
  
}


.lien_siteweb a:hover
{
  /*text-decoration: none;*/
  font-size: 16px;
  color : white ;
}


.retour a
{
  font-size: 18px;
  color : black;
  text-decoration: none;
  
}


.retour a:hover
{
  font-size: 18px;
  color :  #ffc208;
}


.logomail
{
  width: 17px;
  height: 14px;
}

.logomcs
{
  width: 16px;
  height: 18px;
}

.logo_mail
{
  width: 24px;
  height: 17px;
}

.logopos
{
  width: 15px;
  height: 22px;
}

.logotel
{
  width: 20px;
  height: 23px;
}

.logoweb
{
  width: 19px;
  height: 16px;
}

.logoparking
{
  width: 25px;
  height: 28px;
}

.logopetitdej
{
  width: 30px;
  height: 25px;
}

.logotele
{
  width: 30px;
  height: 26px;
}

.logojardin
{
  width: 30px;
  height: 28px;
}

.logowifi
{
  width: 30px;
  height: 26px;
}

.logousb
{
  width: 18px;
  height: 30px;
}

.logopendule
{
  width: 30px;
  height: 30px;
}

.logopiscine
{
  width: 30px;
  height: 25px;
}

.logoch
{
  width: 30px;
  height: 30px;
}