/* =====================================================
   RESA VVA — Thème simple, moderne, stable & accessible
   ===================================================== */

/* Palette (sobre) */
:root {
  --bg:#eee8e4;
  --panel:#5b4742;
  --panel-2:#6a544e;
  --card:#ffffff;
  --field:#f7f3f1;
  --ink:#2b2423;
  --ink-soft:#594f4b;
  --accent:#c7a36a;
  --accent-2:#b48e57;
  --border:#ded3cf;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 6px 20px rgba(0,0,0,.10);
}

/* ===================================================== */
/* Base */
/* ===================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
main{flex:1}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ===================================================== */
/* HEADER / NAVIGATION */
/* ===================================================== */
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--panel-2); color:#fff;
  box-shadow:var(--shadow-sm);
}
.topbar__inner{
  max-width:1120px; margin:0 auto; padding:.9rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
}
nav{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
nav a, .dropbtn{
  color:#fff; font-weight:600; opacity:.95;
  padding:.25rem .3rem; border-radius:6px; transition:opacity .15s ease, background .15s ease;
}
nav a:hover, .dropbtn:hover{opacity:1; background:rgba(255,255,255,.1)}
nav a.active{border-bottom:2px solid var(--accent);}

/* Dropdown */
.dropdown{position:relative}
.dropdown-content{
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:var(--panel); color:#fff; min-width:180px; padding:.4rem;
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
}
.dropdown-content a{
  display:block; padding:.55rem .7rem; border-radius:6px;
  color:#fff; font-weight:600;
}
.dropdown-content a:hover{background:rgba(255,255,255,.12)}
.dropdown:is(:hover,:focus-within) .dropdown-content{display:block}

/* ===================================================== */
/* LAYOUT DE PAGE */
/* ===================================================== */
.container{max-width:1120px; margin:0 auto; padding:1.1rem}
.section-title{
  margin:1rem 0 .6rem; font-size:1.4rem; font-weight:800; color:var(--panel);
}
.section-title::after{
  content:""; display:block; width:48px; height:3px;
  background:var(--accent); border-radius:2px; margin-top:.35rem;
}

/* ===================================================== */
/* FORMULAIRE DE RECHERCHE */
/* ===================================================== */
.search{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1rem; box-shadow:var(--shadow-sm);
}
.search-grid{display:grid; gap:.9rem; grid-template-columns:1fr 1fr}
.field{display:flex; flex-direction:column; gap:.35rem}
.field label{font-size:.9rem; color:var(--ink-soft); font-weight:700}
.field input, .field select{
  appearance:none; background:var(--field); border:1px solid var(--border);
  border-radius:10px; padding:.7rem .85rem; color:var(--ink); font-size:.95rem;
}
.field input:focus, .field select:focus{border-color:var(--accent)}
.field-row-2{grid-column:span 2}
.search-actions{grid-column:span 2; display:flex; justify-content:flex-end}

/* ===================================================== */
/* BOUTONS */
/* ===================================================== */
.btn{
  background:linear-gradient(180deg,#e9ddd6,#dbcabf);
  border:1px solid var(--border); color:var(--panel); font-weight:800;
  padding:.6rem 1rem; border-radius:10px; cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.btn:hover{background:linear-gradient(180deg,#ead2ac,#d1b27b)}
.btn:active{transform:translateY(1px)}

.btn-ghosted{
  background:#fff; border:1px solid var(--border); color:var(--panel); font-weight:700;
}
.btn-ghosted:hover{background:var(--field)}
.btn-danger{
  background:#f6e0dd; border:1px solid #e0b4ae; color:#7a1c14; font-weight:700;
}
.btn-danger:hover{background:#f8d1cc}
.btn-danger:active{transform:translateY(1px)}

/* Bouton gérer les réservations (gestionnaire) */
.btn-manage {
  display:block;
  margin:2.5rem auto 1rem;
  text-align:center;
  width:max-content;
  background:linear-gradient(180deg,#e9ddd6,#dbcabf);
  border:1px solid var(--border);
  color:var(--panel);
  font-weight:800;
  padding:.9rem 1.6rem;
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:background .2s ease, transform .1s ease, box-shadow .2s ease;
}
.btn-manage:hover {
  background:linear-gradient(180deg,#ead2ac,#d1b27b);
  box-shadow:var(--shadow-md);
}
.btn-manage:active {
  transform:translateY(1px);
}

/* ===================================================== */
/* CARTES HÉBERGEMENTS — disposition 3x3 façon tablette  */
/* ===================================================== */

.list-title {
  margin: 2rem 0 1rem;
  color: var(--panel);
  font-weight: 900;
  font-size: 1.5rem;
  text-align: left;
  letter-spacing: .3px;
}
.list-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 3px;
}

/* === Grille en 3 colonnes fixes === */
.cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes fixes */
  align-items: stretch;
  margin-bottom: 2rem;
}

/* Ajustement automatique pour tablettes et mobiles */
@media (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 680px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* === Carte d’hébergement === */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .25s ease;
  height: 100%; /* force la même hauteur */
}

/* Effet au survol */
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* === Image (miniature) === */
.thumb {
  width: 100%;
  aspect-ratio: 4 / 3; /* proportions harmonieuses */
  background: linear-gradient(135deg,#f0ebe8,#f8f5f3);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}

/* === Bloc info === */
.info {
  flex: 1;
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* === Titre === */
.info h3 {
  margin: 0 0 .4rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--panel);
  line-height: 1.3;
  text-transform: capitalize;
}

/* === Métadonnées === */
.meta {
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .7rem;
}

/* === Boutons d’action === */
.actions {
  display: flex;
  gap: .5rem;
  margin-top: auto;
  flex-wrap: wrap;
}
.actions .btn {
  flex: 1;
  text-align: center;
}



/* ===================================================== */
/* MESSAGES / NOTES */
/* ===================================================== */
.note{
  margin:.8rem 0; padding:.7rem .9rem; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--ink-soft);
}
.note.ok{border-color:#cbe7b0; background:#f5fbef; color:#234b1a}
.note.err{border-color:#f3c2bd; background:#fff3f2; color:#7a1c14}

/* ===================================================== */
/* MESSAGE DE BIENVENUE */
/* ===================================================== */
.welcome-box{
  text-align:left; margin:2rem 0 1.5rem; padding:1rem 1.2rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg,#fffdfa,#f3ede9);
  box-shadow:var(--shadow-sm); border:1px solid var(--border);
  animation:fadeInBox .8s ease both;
}
@keyframes fadeInBox{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.welcome-title{
  font-size:2.2rem; font-weight:900; letter-spacing:.3px; margin:0 0 .4rem;
  background:linear-gradient(90deg,#caa45e,#e6d0a5,#b9935a,#e6d0a5,#caa45e);
  background-size:300%; background-clip:text; -webkit-text-fill-color:transparent;
  animation:goldShine 5s linear infinite, fadeInSlide 1s ease both;
  text-transform:capitalize;
}
@keyframes goldShine{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes fadeInSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.welcome-title::after{
  content:""; display:block; width:90px; height:3px; margin-top:6px;
  border-radius:2px; background:linear-gradient(90deg,var(--accent),transparent);
}
.welcome-subtitle{margin:0;font-size:1rem;color:var(--ink-soft);opacity:.9}

/* ===================================================== */
/* FORMULAIRE AJOUT HÉBERGEMENT */
/* ===================================================== */
.ajout-hebergement{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  box-shadow:var(--shadow-sm); margin-bottom:2rem;
  animation:fadeInBox .6s ease both;
}
.ajout-hebergement h2{
  margin-top:0; font-size:1.4rem; font-weight:800; color:var(--panel);
  margin-bottom:1rem; display:flex; align-items:center; gap:.4rem;
}
.form-ajout{display:flex; flex-direction:column; gap:1.2rem}
.form-ajout .grid{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.form-ajout label{font-weight:700; color:var(--ink-soft); font-size:.9rem; margin-bottom:.25rem}
.form-ajout input,.form-ajout select{
  width:100%; background:var(--field); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:.7rem .8rem;
  font-size:.95rem; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-ajout input:focus,.form-ajout select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(199,163,106,.25);
}
.form-ajout button{align-self:flex-start;margin-top:.6rem}

/* Champ fichier */
.form-ajout input[type="file"]{
  background:var(--field); border:1px dashed var(--border);
  border-radius:var(--radius-sm); padding:.8rem;
  cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.form-ajout input[type="file"]:hover{
  border-color:var(--accent); background:#fdfaf7;
}
.form-ajout input[type="file"]::file-selector-button{
  background:var(--accent); color:#fff; border:none; border-radius:6px;
  padding:.5rem .8rem; font-weight:700; cursor:pointer; margin-right:.8rem;
  transition:background .15s ease;
}
.form-ajout input[type="file"]::file-selector-button:hover{
  background:var(--accent-2);
}

/* ===================================================== */
/* FOOTER */
/* ===================================================== */
footer{
  background:var(--panel); color:#fff; text-align:center;
  padding:1rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}