/* ===== Design System ===== */
:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #6B7280;
  --gold: #C7A54A; /* accent 1 */
  --orange: #FF6B00; /* accent 2 (primary) */
  --container: 1200px;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --space-1: 8px; --space-2: 12px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 72px; --space-8: 96px;
}
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.45;
}
img{max-width:100%; display:block}
h1, h2, h3{font-family: 'Playfair Display', Georgia, serif; line-height:1.2; margin:0 0 var(--space-3)}
h1{font-size: clamp(32px, 6vw, 56px)}
h2{font-size: clamp(24px, 4vw, 36px)}
h3{font-size: clamp(18px, 2.5vw, 22px)}
p{margin:0 0 var(--space-3); color: var(--text)}
.muted{color:var(--muted)}
.container{max-width:var(--container); margin-inline:auto; padding:0 var(--space-4)}
.section{padding: var(--space-7) 0}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; border:1px solid transparent; font-weight:600; text-decoration:none}
.btn-primary{background:var(--orange); color:white}
.btn-primary:hover{filter:brightness(.95)}
.btn-secondary{background:white; border-color: var(--gold); color:var(--text)}
.btn-secondary:hover{background: #FFF8E6}

/* ===== Nav ===== */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(1.5) blur(10px); border-bottom:1px solid #eee}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700}
.brand-name{font-family: 'Great Vibes', cursive;font-weight: 400; font-size: clamp(28px, 5vw, 44px);line-height: 1;letter-spacing: .3px;  color:var(--orange);}
.logo{width:36px; height:36px; border-radius:12px; box-shadow:var(--shadow)}
.nav a{color:var(--text); text-decoration:none; font-weight:600}
.nav .links{display:flex; gap:30px; align-items:center}
.nav .links a:hover{color:var(--orange)}

/* Hamburger button */
.hamburger{ display:none; cursor:pointer; background:none; border:0; padding:8px; margin-left:auto }
.hamburger .bar{ display:block; width:28px; height:3px; background:#333; margin:6px 0; transition:.3s }
/* Animation X */
.hamburger.is-open .bar:nth-child(1){ transform: translateY(9px) rotate(-45deg) }
.hamburger.is-open .bar:nth-child(2){ opacity:0 }
.hamburger.is-open .bar:nth-child(3){ transform: translateY(-9px) rotate(45deg) }
/* Desktop: menu normal, hamburger caché */
@media (min-width: 961px){
  .hamburger{ display:none }
  .links{ display:flex; gap:20px; align-items:center; position:static; background:none; box-shadow:none; padding:0; border:0 }
  .nav-cta{ margin-left:12px }
}
/* Mobile: cacher les liens par défaut, afficher hamburger */
@media (max-width:960px){
  .nav .wrap{ position:relative; }
  .nav .links{
    display:none !important;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:12px;
    background:#fff; border:1px solid #eee;
    padding:12px 16px; margin-top:8px;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    border-radius:12px;
  }
  .nav .links.is-open{ display:flex !important; }
  .hamburger{ display:inline-block; }
}

/* ===== Hero ===== */
.hero{position:relative; overflow:hidden; background: radial-gradient(1200px 600px at 80% -10%, #FFF3E6 0%, transparent 60%) , linear-gradient(180deg, #fff, #fff)}
.hero-inner{display:grid; grid-template-columns: 1.8fr 1.4fr; gap: var(--space-6); align-items:center}
.hero .media{position:relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);}
.hero .media img, .hero .media video{position:absolute; inset:0px; width:100%; height:100%; object-fit:cover}
.hero h1{font-family: "Playfair Display", Georgia, serif;font-weight: 500;line-height: 1.15;}
.quick{display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--space-4)}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--space-3)}
.badge{font-size:12px; padding:6px 10px; border:1px solid #eee; border-radius:999px; color:#333; background:#fff}

/* ===== About ===== */
.about{display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6)}
.card{border:1px solid #eee; border-radius: var(--radius); padding: var(--space-5); box-shadow: 0 1px 8px rgba(0,0,0,.04); background:white}

/* ===== Gallery (tournante) — base inchangée ===== */
.gallery{position:relative;}
.rail{display:flex;gap:16px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:8px;}
.rail::-webkit-scrollbar{height:8px;}
.rail::-webkit-scrollbar-thumb{background:#ddd;border-radius:6px;}
.shot{flex:0 0 280px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);scroll-snap-align:center;}
.shot img{width:100%;height:100%;object-fit:cover;}
.gallery .arrows{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;pointer-events:none;padding-inline:16px;}
@media (min-width:1024px){.gallery .arrows{padding-inline:56px;}}
.gallery button{pointer-events:auto;width:40px;height:40px;border-radius:999px;background:#fff;box-shadow:var(--shadow);border:2px solid #000;display:grid;place-items:center;transition:transform .15s ease,background .15s ease,color .15s ease;}
.gallery button:hover{background:#000;color:#fff;}
.gallery button:focus{outline:2px solid #000;outline-offset:2px;}
.gallery button:active{transform:scale(.98);}

/* ===== Centrage réel sur mobile (dans le container) ===== */
@media (max-width:600px){
  :root{--shot-w:280px;}                        /* largeur d’une carte */
  .shot{flex:0 0 var(--shot-w);}                /* fixe la carte */

  /* crée des “marges” flex avant/après = (largeur conteneur - carte)/2 */
  .rail::before,
  .rail::after{content:"";flex:0 0 calc((100% - var(--shot-w))/2);}
  /* aligne le snap en tenant compte de ces marges */
  .rail{scroll-padding-left:calc((100% - var(--shot-w))/2);scroll-padding-right:calc((100% - var(--shot-w))/2);}
}


/* ===== Tabs Menu ===== */
.tabs{display:flex; gap:10px; margin: var(--space-4) 0}
.tab{padding:10px 14px; border:1px solid var(--gold); border-radius:999px; background:#fff; cursor:pointer}
.tab[aria-selected="true"]{background:var(--orange); color:#fff; border-color:var(--orange)}
.menu-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px}
.menu-card{border:1px solid #eee; border-radius:16px; padding:16px; box-shadow:0 1px 8px rgba(0,0,0,.04); background:white}
.menu-card h3{margin:0 0 6px 0}
.menu-card p{margin:0 0 10px 0; color:var(--muted)}
.price{font-weight:700}

/* ===== Reservation ===== */
form{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
label{font-weight:600}
input, select, textarea{border:1px solid #ddd; border-radius:12px; padding:12px; font:inherit}
textarea{min-height:100px}
.form-actions{grid-column: 1 / -1; display:flex; gap:12px; align-items:center}
.note{font-size:14px; color:var(--muted)}
.toast{display:none; margin-top:12px; padding:12px 14px; background:#F0FDF4; border:1px solid #DCFCE7; color:#166534; border-radius:12px}
.toast.show{display:block}

/* ===== Footer / Infos ===== */
footer{background:#fafafa; border-top:1px solid #eee; padding: var(--space-6) 0}
.info{display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-5)}
.map{border:0; width:100%; height:320px; border-radius:16px; box-shadow:var(--shadow)}
.links{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.footer-bottom{padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}

/* ===== Responsive ===== */
@media (max-width: 960px){
  .hero-inner, .about, .info{grid-template-columns: 1fr}
  form{grid-template-columns: 1fr}
}



/* === Liens globaux (hors .btn) === */
a:not(.btn):not(.brand) {
  color: #4b5563;
  text-decoration: none;
  transition: color .18s ease, text-underline-offset .18s ease, text-decoration-color .18s ease;
}

a:not(.btn):not(.brand):hover {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

a:not(.btn):not(.brand):visited { color: #4b5563; }

a:not(.btn):not(.brand):focus-visible {
  outline: 2px dashed #9ca3af;
  outline-offset: 2px;
  border-radius: 4px;
}


a:not(.btn):not(.brand) {
  color: #191d25;           /* gris doux au lieu du bleu */
  text-decoration: none;    /* pas de soulignement par défaut */
  transition: color .18s ease, text-underline-offset .18s ease, text-decoration-color .18s ease;
}

a:not(.btn):not(.brand):hover {
  color: #111;              /* foncé au survol */
  text-decoration: underline;
  text-underline-offset: 3px;   /* soulignement un peu décollé */
  text-decoration-thickness: 1.5px;
}

/* même couleur après visite (évite le violet) */
a:not(.btn):not(.brand):visited { color: #191d25; }

/* accessibilité clavier */
a:not(.btn):not(.brand):focus-visible {
  outline: 2px dashed #9ca3af;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Liens du footer un peu plus discrets */
.footer-bottom nav a {
  color: #6b7280;
}
.footer-bottom nav a:hover {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}