/* ==========================================================================
   Commune de Sainte-Lucie-de-Tallano - Feuille de style
   Reconstruction responsive - encodage windows-1252
   Palette d'origine conservee :
     fond creme #FDFCF0 | texte #2E2A24 | liens #C27D38
     bandeau vert olive #4A5D23 | survol rouge #CA0008 | gris #808080
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
   background: #FDFCF0;
   color: #2E2A24;
   font-family: Verdana, Geneva, Arial, sans-serif;
   font-size: 1rem;          /* 16px - lisible (l'ancien 8pt etait trop petit) */
   line-height: 1.55;
}

/* Images toujours fluides : ne debordent jamais de leur conteneur */
img { max-width: 100%; height: auto; border: 0; }

/* Liens */
a { color: #C27D38; }
a:hover, a:focus { color: #A5641F; }

/* Focus clavier visible partout (accessibilite) */
a:focus, button:focus, input:focus, select:focus, textarea:focus, label:focus,
.menu-button:focus {
   outline: 3px solid #4A5D23;
   outline-offset: 2px;
}

/* Lien d'evitement (accessibilite) : cache jusqu'au focus clavier */
.skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
   background: #4A5D23;
   color: #fff;
   padding: .6rem 1rem;
   z-index: 1000;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---- Titres ---- */
h1 { font-size: 1.5rem; color: #2E2A24; line-height: 1.25; }
h2 { font-size: 1.6rem; color: #2E2A24; text-align: center; margin: .6rem 0; }
h3 { font-size: 1.3rem; color: #4A4A4A; margin: .8rem 0 .4rem; }
h4 { font-size: 1.1rem; color: #4A5D23; margin: .9rem 0 .3rem; }

p { margin: .6rem 0; }
ul, ol { margin: .5rem 0 .8rem 1.4rem; }

/* ==========================================================================
   EN-TETE / BANDEAU
   ========================================================================== */
.site-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .6rem 1rem;
   padding: .6rem 1rem;
   border-bottom: 3px solid #4A5D23;
}
.brand { display: flex; align-items: center; gap: .8rem; }
.brand .logo { width: 64px; height: auto; }
.brand .site-title {
   font-size: 1.15rem;
   font-weight: bold;
   color: #4A5D23;
   line-height: 1.2;
}

/* Bouton hamburger : visible en mobile seulement */
.menu-toggle { position: absolute; left: -9999px; }   /* case a cocher masquee */
.menu-button {
   display: inline-block;
   margin-left: auto;
   padding: .5rem .9rem;
   font-size: 1.05rem;
   font-weight: bold;
   color: #fff;
   background: #4A5D23;
   border-radius: 4px;
   cursor: pointer;
   user-select: none;
}

/* ---- Navigation ---- */
.site-nav { width: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
   display: block;
   padding: .7rem .9rem;
   color: #C27D38;
   font-weight: bold;
   text-decoration: none;
   border-radius: 3px;
}
.site-nav a:hover, .site-nav a:focus { background: #CA0008; color: #fff; }
/* Sous-rubriques : legerement en retrait et plus discretes */
.site-nav ul ul a { padding-left: 2rem; font-weight: normal; }

/* ---- Banniere ---- */
.banner { text-align: center; padding: .5rem 0 0; }
.banner .banner-welcome { max-width: 320px; margin: .4rem auto; }
.banner h2, .banner h1.slogan {
   font-size: 1.4rem;
   color: #2E2A24;
   margin: .5rem auto;
   padding: 0 1rem;
   max-width: 60ch;
}
.banner .banner-photo { width: 100%; display: block; }

/* ==========================================================================
   CONTENU
   Anciennes classes conservees pour ne pas casser les pages existantes.
   Les tableaux de contenu passent en 100 % fluide.
   ========================================================================== */
main, .contenu { display: block; padding: 1rem; max-width: 1100px; margin: 0 auto; }

table { border-collapse: collapse; width: 100% !important; max-width: 100%; }
td, th { vertical-align: top; }

.TrCenter { background: #FDFCF0; color: #2E2A24; text-align: center; padding: 5px; }
.TrOddR  { background: #FDFCF0; color: #2E2A24; text-align: right;  padding: 5px; }
.TrOddL  { background: #FDFCF0; color: #2E2A24; text-align: left;   padding: 5px; }
.TrRowL  { background: #666; color: #fff; text-align: left;  padding: 5px; }
.TrRowC  { background: #666; color: #fff; text-align: center; padding: 5px; }
.PCenter { text-align: center; }

/* Anciennes puces <Li> hors <ul> : on les rend lisibles */
li { margin-left: 1.2rem; }

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */
.TbFooter, .site-footer {
   width: 100%;
   background: #4A5D23;
   color: #fff;
   margin-top: 1.5rem;
}
.site-footer .footer-inner {
   max-width: 1100px;
   margin: 0 auto;
   padding: 1.2rem 1rem;
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: space-between;
   align-items: flex-start;
}
.site-footer, .site-footer a { color: #fff; }
.site-footer a { text-decoration: underline; }
.TrFooter { background: #4A5D23; color: #fff; text-align: center; padding: 8px; }

/* Zone info-bulle du menu (ancien #Desc) : utile au survol souris, sans nuire au mobile */
#Desc {
   background: #808080; color: #fff; min-height: 26px;
   font-size: .85rem; text-align: center; padding: 3px; border: 1px solid #CCCC99;
}

/* Champs de formulaire (page reservation gite) */
input, select, textarea { font: inherit; margin: .4rem 0; padding: .35rem; }
label { display: block; margin-top: .5rem; }
input[type="text"]  { width: 100%; max-width: 320px; }
input[type="email"] { width: 100%; max-width: 320px; }
input[type="tel"]   { width: 100%; max-width: 200px; }
input[type="number"]{ width: 5rem; text-align: center; }
select { width: 100%; max-width: 260px; height: 2.2rem; }

/* ==========================================================================
   RESPONSIVE
   Mobile-first ci-dessus. Ci-dessous : tablette / ordinateur.
   ========================================================================== */

/* --- Mobile (par defaut) : menu replie derriere le bouton --- */
@media (max-width: 768px) {
   .site-nav { display: none; }
   .menu-toggle:checked ~ .site-nav { display: block; }
   .menu-button { display: inline-block; }
   .brand .site-title { font-size: 1rem; }
}

/* --- Ordinateur / tablette large --- */
@media (min-width: 769px) {
   .menu-button { display: none; }          /* pas de hamburger sur grand ecran */
   .site-nav { display: block; }
   .site-nav > ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .1rem .3rem;
      border-top: 1px solid #E4E0C8;
      padding-top: .4rem;
   }
   .site-nav > ul > li { position: relative; }
   .site-nav a { padding: .5rem .8rem; }
   /* Sous-rubriques affichees en ligne sous leur parent */
   .site-nav ul ul { display: flex; flex-wrap: wrap; }
   .site-nav ul ul a { padding: .35rem .7rem; font-size: .9rem; }
}

/* Confort de lecture sur tres grand ecran */
@media (min-width: 1100px) {
   .brand .site-title { font-size: 1.25rem; }
}