/* ============================================================
   DESIGN SYSTEM — thème "montagne premium"
   Palette : pierre/crème, forêt profonde, touche terracotta.
   Typo : Fraunces (display, serif élégant) + Inter (texte).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --fond: #FAF8F3;
    --fond-alt: #F1EDE3;
    --ligne: #E4DFD0;
    --texte: #1C1E1A;
    --gris: #6B6F64;
    --foret: #1F3D2E;
    --foret-clair: #2E5641;
    --terracotta: #B5623C;
    --terracotta-clair: #F3E4DA;
    --font-display: 'Fraunces', serif;
    --font-texte: 'Inter', sans-serif;
    --rayon: 8px;
    --rayon-lg: 16px;
    --conteneur: 1240px;
    --ombre: 0 10px 30px rgba(28,30,26,.08);
}
* { box-sizing: border-box; }
body { margin:0; background:var(--fond); color:var(--texte); font-family:var(--font-texte); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; line-height:1.15; margin:0 0 .4em; }
h1 { font-size:clamp(2.4rem,5vw,3.6rem); }
h2 { font-size:clamp(1.7rem,3vw,2.4rem); }
p { color:var(--gris); margin:0 0 1em; }
.conteneur { max-width:var(--conteneur); margin:0 auto; padding:0 24px; }
.section { padding:80px 0; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:999px; font-weight:600; font-size:.92rem; border:1px solid transparent; transition:.15s; }
.btn-primaire { background:var(--foret); color:#fff; }
.btn-primaire:hover { background:var(--foret-clair); }
.btn-secondaire { background:#fff; color:var(--texte); border-color:var(--ligne); }
.btn-terracotta { background:var(--terracotta); color:#fff; }
.btn-large { padding:16px 34px; width:100%; }

.entete { position:sticky; top:0; z-index:50; background:rgba(250,248,243,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--ligne); }
.entete-barre { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; max-width:var(--conteneur); margin:0 auto; }
.logo { font-family:var(--font-display); font-size:1.5rem; color:var(--foret); }
.nav-principale { display:flex; gap:32px; }
.nav-principale a { font-size:.9rem; font-weight:500; }
.nav-principale a:hover { color:var(--foret); }

.hero { position:relative; padding:56px 0 40px; background:linear-gradient(160deg,var(--fond-alt),var(--fond)); border-bottom:1px solid var(--ligne); }
.hero-contenu { max-width:640px; margin-bottom:28px; }
.hero-contenu h1 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.25em; }
.hero-contenu p { font-size:.92rem; max-width:480px; }

.barre-recherche { background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg); box-shadow:var(--ombre); padding:10px; display:flex; flex-wrap:wrap; gap:6px; max-width:900px; }
.barre-recherche .champ-recherche { flex:1; min-width:140px; display:flex; flex-direction:column; gap:2px; padding:8px 16px; border-radius:10px; border:1px solid transparent; }
.barre-recherche .champ-recherche:hover { background:var(--fond-alt); }
.barre-recherche .champ-recherche span { font-size:.65rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gris); }
.barre-recherche input { border:none; outline:none; background:none; font-size:.9rem; width:100%; font-family:inherit; color:var(--texte); }

@media (max-width:760px) {
    .barre-recherche { flex-direction:column; padding:14px; }
    .barre-recherche .champ-recherche { width:100%; border:1px solid var(--ligne); padding:10px 14px; }
    .barre-recherche .btn { width:100%; margin-top:4px; }
}

.grille-categories { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.carte-categorie { background:var(--fond-alt); border:1px solid var(--ligne); border-radius:var(--rayon-lg); padding:28px; transition:.2s; }
.carte-categorie:hover { box-shadow:var(--ombre); transform:translateY(-2px); }

.carousel-logements {
    display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px; -webkit-overflow-scrolling: touch;
}
.carousel-logements::-webkit-scrollbar { height: 6px; }
.carousel-logements::-webkit-scrollbar-thumb { background: var(--ligne); border-radius: 999px; }
.carousel-logements .carte-logement { flex: 0 0 260px; scroll-snap-align: start; }
@media (max-width:760px) {
    .carousel-logements .carte-logement { flex-basis: 78vw; }
}

.grille-logements { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; }
.carte-logement { background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg); overflow:hidden; transition:.25s; }
.carte-logement:hover { box-shadow:var(--ombre); transform:translateY(-3px); }
.carte-logement .image { aspect-ratio:4/3; background:var(--fond-alt); overflow:hidden; position:relative; }
.carte-logement .image img { width:100%; height:100%; object-fit:cover; }
.carte-logement .badge-cat { position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); font-size:.72rem; font-weight:600; padding:5px 12px; border-radius:999px; color:var(--foret); }
.carte-logement .contenu { padding:20px; }
.carte-logement .destination { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gris); }
.carte-logement h3 { font-size:1.15rem; margin:6px 0 12px; }
.carte-logement .caracteristiques { display:flex; gap:14px; font-size:.78rem; color:var(--gris); margin-bottom:14px; }
.carte-logement .prix-ligne { display:flex; align-items:baseline; gap:6px; padding-top:14px; border-top:1px solid var(--ligne); }
.carte-logement .prix { font-family:var(--font-display); font-size:1.3rem; color:var(--foret); }

.filtres-barre { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.filtre-pill { padding:9px 18px; border:1px solid var(--ligne); border-radius:999px; font-size:.85rem; background:#fff; }
.filtre-pill.actif { border-color:var(--foret); background:var(--foret); color:#fff; }

.fiche-logement { display:grid; grid-template-columns:1.4fr 1fr; gap:56px; padding:48px 0 90px; }
.galerie-principale { display:grid; grid-template-columns:2fr 1fr; gap:8px; border-radius:var(--rayon-lg); overflow:hidden; aspect-ratio:16/9; margin-bottom:8px; }
.galerie-principale img { width:100%; height:100%; object-fit:cover; }
.galerie-vignettes { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.equipements-grille { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0; }
.equipement-item { display:flex; align-items:center; gap:10px; font-size:.9rem; padding:10px; background:var(--fond-alt); border-radius:var(--rayon); }

.carte-reservation { position:sticky; top:100px; background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg); box-shadow:var(--ombre); padding:26px; }
.carte-reservation .prix-nuit { font-family:var(--font-display); font-size:1.6rem; margin-bottom:16px; }
.carte-reservation .dates-grille { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--ligne); border-radius:var(--rayon); overflow:hidden; margin-bottom:12px; }
.carte-reservation .dates-grille .champ { padding:10px 14px; border-right:1px solid var(--ligne); margin-bottom:0; }
.carte-reservation .dates-grille .champ:last-child { border-right:none; }
.carte-reservation .dates-grille label { display:block; font-size:.68rem; text-transform:uppercase; color:var(--gris); margin-bottom:3px; }
.carte-reservation .dates-grille input { border:none; outline:none; font-size:.88rem; width:100%; font-family:inherit; padding:0; }
.recap-ligne { display:flex; justify-content:space-between; font-size:.88rem; padding:7px 0; color:var(--gris); }
.recap-ligne.total { border-top:1px solid var(--ligne); margin-top:6px; padding-top:14px; font-weight:700; color:var(--texte); font-size:1.05rem; }

.champ { margin-bottom:16px; }
.champ label { display:block; font-size:.85rem; color:var(--gris); margin-bottom:6px; font-weight:500; }
.champ input, .champ select, .champ textarea { width:100%; border:1px solid var(--ligne); background:#fff; padding:12px 14px; border-radius:var(--rayon); font-size:.92rem; font-family:inherit; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline:none; border-color:var(--foret); box-shadow:0 0 0 3px rgba(31,61,46,.1); }
.champ-ligne { display:flex; gap:14px; }
.champ-ligne .champ { flex:1; }
.carte-form { background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg); padding:32px; max-width:520px; margin:0 auto; box-shadow:var(--ombre); }
.message-erreur { background:#FDECEC; border:1px solid #F3B9B9; color:#B42525; padding:12px 16px; border-radius:var(--rayon); font-size:.88rem; margin-bottom:18px; }
.message-succes { background:#E7F3EC; border:1px solid #A9D9BE; color:#1F6B41; padding:12px 16px; border-radius:var(--rayon); font-size:.88rem; margin-bottom:18px; }

.pied-page { background:var(--foret); color:rgba(255,255,255,.75); padding:64px 0 28px; margin-top:60px; }
.pied-page .logo { color:#fff; }
.pied-grille { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.pied-grille h4 { color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.pied-grille ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.pied-grille a:hover { color:#fff; }
.pied-bas { border-top:1px solid rgba(255,255,255,.15); padding-top:22px; font-size:.78rem; text-align:center; }

.admin-sidebar { width:220px; background:#fff; border-right:1px solid var(--ligne); padding:24px 0; flex-shrink:0; }
.admin-sidebar a { display:block; padding:11px 24px; font-size:.9rem; color:var(--gris); }
.admin-sidebar a:hover, .admin-sidebar a.actif { color:var(--foret); background:var(--fond-alt); }
.admin-main { flex:1; padding:36px 40px; }
table.admin-table { width:100%; border-collapse:collapse; }
table.admin-table th { text-align:left; font-size:.75rem; text-transform:uppercase; color:var(--gris); padding:10px 12px; border-bottom:1px solid var(--ligne); }
table.admin-table td { padding:12px; border-bottom:1px solid var(--ligne); font-size:.88rem; }
.stat-carte { background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg); padding:22px; }
.stat-carte .valeur { font-family:var(--font-display); font-size:2rem; color:var(--foret); }
.stat-carte .label { color:var(--gris); font-size:.8rem; }

@media (max-width:860px) {
    .fiche-logement { grid-template-columns:1fr; }
    .pied-grille { grid-template-columns:1fr 1fr; }
    .nav-principale { display:none; }
}