/* =========================================================
   Hordago — Bar Restaurant, Hasparren
   Palette reprise de l'aperçu : mur de fronton, vert Irouléguy,
   crépi à la chaux, colombages labourdins.
   ========================================================= */

:root{
  --brasa:#a8341f;        /* mur de fronton, rouge-brique */
  --brasa-dark:#7c2416;
  --sarasola:#2c4436;     /* vert bouteille, vignes d'Irouléguy */
  --sarasola-dark:#1f3127;
  --harri:#eee6d6;        /* pierre / crépi clair */
  --harri-2:#e2d7bf;
  --ink:#221c17;
  --ink-soft:#4a4038;
  --gold:#c99a44;
  --line-light:rgba(238,230,214,.18);
  --line-dark:rgba(34,28,23,.14);

  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:1100px;
  --gutter:clamp(18px, 4vw, 32px);
  --nav-h:64px;

  /* Grain de chaux (bruit SVG très léger) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .11 0 0 0 0 .09 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Pan de colombage labourdin : poteaux, sablières, écharpes */
  --colombage:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='180' viewBox='0 0 240 180'%3E%3Cg fill='none' stroke='%23a8341f' stroke-opacity='.28' stroke-width='6' stroke-linecap='square'%3E%3Cpath d='M0 3H240M0 90H240M3 0V180M120 0V180'/%3E%3Cpath d='M3 90L120 3M120 177L237 90' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 8px); }
body{
  margin:0;
  background:var(--harri) var(--grain);
  color:var(--ink);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.1; }
.display{ font-family:var(--serif); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--ink); color:var(--harri); padding:10px 16px; border-radius:3px;
}
.skip:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Petit sur-titre en euskara, au-dessus de chaque titre */
.eus{
  margin:0 0 10px;
  font:italic 400 1.05rem/1 var(--serif);
  color:var(--brasa);
  letter-spacing:.01em;
}
.eus::before{
  content:''; display:inline-block; width:28px; height:2px;
  background:currentColor; vertical-align:middle; margin-right:10px; opacity:.6;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; padding:14px 24px; border-radius:3px;
  font:600 .9rem/1.2 var(--sans); letter-spacing:.02em; text-decoration:none;
  transition:transform .15s ease, background-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--harri); color:var(--brasa-dark); }
.btn-ghost{ color:var(--harri); border:1.5px solid rgba(238,230,214,.75); }
.btn-dark{ background:var(--ink); color:var(--harri); margin-top:22px; }
.btn-dark:hover{ background:var(--brasa-dark); }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(238,230,214,.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-dark);
}
.nav-inner{
  max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand img{ color:var(--ink); }
.brand span{ font-size:1.35rem; font-weight:600; letter-spacing:.01em; }
.nav-links{ display:flex; align-items:center; gap:clamp(12px, 2vw, 26px); }
.nav-links a{
  text-decoration:none; font-size:.88rem; font-weight:500; color:var(--ink-soft);
  padding:6px 0; border-bottom:2px solid transparent;
}
.nav-links a:hover{ color:var(--brasa); border-color:var(--brasa); }
.nav-links .nav-call{
  background:var(--brasa); color:var(--harri); padding:9px 14px; border-radius:3px; border:none;
  font-weight:600; white-space:nowrap;
}
.nav-links .nav-call:hover{ background:var(--brasa-dark); color:var(--harri); }

.burger{
  display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  padding:10px; flex-direction:column; justify-content:center; gap:6px;
}
.burger span{ display:block; height:2px; background:var(--ink); transition:transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   HÉROS : MUR DE FRONTON
   ========================================================= */
.fronton{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(80px, 14vw, 140px) var(--gutter) clamp(64px, 10vw, 100px);
  background:
    var(--grain),
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.07), transparent 60%),
    linear-gradient(180deg, var(--brasa) 0%, var(--brasa) 80%, var(--brasa-dark) 100%);
  color:var(--harri);
  border-bottom:10px solid var(--ink);
}
/* Ligne de faute du fronton */
.fronton::before{
  content:''; position:absolute; left:0; right:0; top:clamp(52px, 8vw, 78px);
  height:3px; background:var(--harri); opacity:.9;
}
/* Usure murale, impacts de pelote */
.fronton::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 14% 32%, rgba(0,0,0,.16) 0, transparent 2.6%),
    radial-gradient(circle at 83% 56%, rgba(0,0,0,.12) 0, transparent 3.4%),
    radial-gradient(circle at 61% 82%, rgba(0,0,0,.1) 0, transparent 2.6%),
    radial-gradient(circle at 29% 72%, rgba(0,0,0,.1) 0, transparent 2.2%),
    radial-gradient(circle at 72% 22%, rgba(0,0,0,.08) 0, transparent 2%);
}
.fronton > *{ position:relative; z-index:1; }
.fronton .eus{ color:var(--harri); opacity:.9; font-size:1.2rem; }
.fronton .eus::before{ display:none; }
.fronton h1{
  font-weight:700; font-size:clamp(4rem, 15vw, 9.5rem); line-height:.9; letter-spacing:-.015em;
}
.hero-title{ line-height:0; }
.wordmark{
  display:block; margin:6px auto 0; width:min(100%, 38rem); height:auto;
  color:var(--harri); overflow:visible;
}
.eyebrow{
  margin:20px 0 0; font-size:.78rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; opacity:.85;
}
.subt{ margin:22px auto 0; max-width:34rem; font-size:1.05rem; line-height:1.6; opacity:.94; }
.cta-row{ margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:9px; margin:32px 0 0;
  padding:7px 16px; border:1px solid rgba(238,230,214,.6); border-radius:999px;
  font-size:.8rem; letter-spacing:.04em;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* =========================================================
   SECTIONS GÉNÉRIQUES
   ========================================================= */
section{ padding-block:clamp(72px, 10vw, 112px); }
.section-head{ text-align:center; max-width:40rem; margin:0 auto clamp(36px, 5vw, 56px); }
.section-head .eus::before{ display:none; }
.section-head h2{ font-size:clamp(2.1rem, 5vw, 3.1rem); font-weight:600; }
.section-head .sub{ margin:14px 0 0; color:var(--ink-soft); }

/* Séparateur colombage entre sections claires */
.maison, .menus{ position:relative; }
/* Sablière : la poutre horizontale des façades labourdines */
.menus::before{
  content:''; position:absolute; left:0; right:0; top:0; height:12px;
  background:linear-gradient(var(--brasa) 0 7px, transparent 7px 9px, var(--brasa) 9px 12px);
}

/* ---------- Cadres photo en colombage ---------- */
.photo-slot{
  position:relative; margin:0; aspect-ratio:4/5; overflow:hidden;
  background:var(--harri) var(--colombage) -3px -3px/240px 180px;
  border:8px solid var(--brasa);
}
.photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-slot figcaption{
  position:absolute; left:0; bottom:0; z-index:1;
  background:var(--ink); color:var(--harri);
  font:italic 400 .95rem/1 var(--serif); padding:10px 14px;
}

/* =========================================================
   LA MAISON
   ========================================================= */
.maison-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px, 6vw, 80px); align-items:center;
}
.maison h2{ font-size:clamp(2.1rem, 5vw, 3.1rem); font-weight:600; margin-bottom:22px; }
.maison p{ max-width:36rem; color:var(--ink-soft); }
.maison .lead{ font:400 1.3rem/1.5 var(--serif); color:var(--ink); }
.maison .lead em{ color:var(--brasa); font-style:italic; }
.facts{
  list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:14px 32px;
  border-top:1px solid var(--line-dark); padding-top:22px;
}
.facts li{ display:flex; align-items:baseline; gap:8px; }
.facts strong{ font:600 2rem/1 var(--serif); color:var(--brasa); }
.facts span{ font-size:.85rem; color:var(--ink-soft); }

/* =========================================================
   LA CARTE : ARDOISE
   ========================================================= */
.carte{ background:var(--harri-2) var(--grain); }
.tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin-bottom:-1px; position:relative; z-index:1;
}
.tabs button{
  font:600 .9rem/1 var(--sans); letter-spacing:.02em; cursor:pointer;
  padding:14px 20px; border:0; border-radius:4px 4px 0 0;
  background:transparent; color:var(--ink-soft);
}
.tabs button:hover{ color:var(--brasa); }
.tabs button[aria-selected="true"]{ background:var(--ink); color:var(--harri); }

.ardoise{
  background:var(--ink); color:var(--harri); border-radius:6px;
  padding:clamp(28px, 5vw, 56px) clamp(22px, 6vw, 72px);
  box-shadow:0 22px 50px rgba(34,28,23,.22);
  min-height:22rem;
}
.ardoise [role="tabpanel"]{ max-width:42rem; margin:0 auto; }
.ardoise [role="tabpanel"]:focus-visible{ outline-offset:10px; }
.panel-intro{ margin:0 0 18px; text-align:center; font:italic 400 1.1rem/1.4 var(--serif); color:var(--gold); }

.dishes{ list-style:none; padding:0; margin:0; }
.dishes li{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:15px 0; border-top:1px dashed var(--line-light);
}
.dishes li:first-child{ border-top:0; }
.dishes .name{ font:500 1.12rem/1.35 var(--serif); }
.dishes small{
  display:block; margin-top:4px; font:400 .82rem/1.45 var(--sans); color:rgba(238,230,214,.6);
}
.dishes .price{
  flex:none; text-align:right; font:600 1rem/1.35 var(--sans); color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.side{
  margin:22px 0 0; text-align:center; font-size:.9rem; color:rgba(238,230,214,.7);
}

.photo-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 3vw, 32px); margin-top:clamp(36px, 5vw, 56px);
}
.photo-row .photo-slot{ aspect-ratio:4/3; }

/* =========================================================
   MENUS
   ========================================================= */
.menu-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px, 3vw, 36px); }
.menu-card{
  background:#f7f2e7; border:1px solid var(--line-dark); border-top:6px solid var(--brasa);
  padding:clamp(26px, 4vw, 42px); border-radius:2px;
}
.menu-card header{ border-bottom:1px solid var(--line-dark); padding-bottom:20px; margin-bottom:20px; }
.menu-card h3{ font-size:1.6rem; font-weight:600; }
.menu-price{ margin:10px 0 0; font:700 2.6rem/1 var(--serif); color:var(--brasa); }
.menu-note{ margin:8px 0 0; font-size:.9rem; color:var(--ink-soft); }
.menu-card dl{ margin:0; }
.menu-card dt{ font:600 1.08rem/1.3 var(--serif); margin-top:16px; }
.menu-card dt:first-child{ margin-top:0; }
.menu-card dd{ margin:4px 0 0; font-size:.92rem; color:var(--ink-soft); }

/* =========================================================
   LA CAVE
   ========================================================= */
.cave{ background:var(--ink); color:var(--harri); }
.cave .section-head .sub{ color:rgba(238,230,214,.7); }
.cave .eus{ color:var(--gold); }
.cave-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px, 6vw, 80px); }

.wines{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.wines thead th{
  font:600 .72rem/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); text-align:right; padding:0 0 10px 14px; vertical-align:bottom;
}
.wines thead small{ display:block; letter-spacing:.04em; text-transform:none; color:rgba(238,230,214,.5); font-weight:400; }
.wines tbody th{ text-align:left; font:500 1.05rem/1.35 var(--serif); padding:10px 0; }
.wines tbody th em{ display:block; font:italic 400 .85rem/1.3 var(--serif); color:rgba(238,230,214,.6); }
.wines td{ text-align:right; padding:10px 0 10px 14px; color:var(--harri-2); white-space:nowrap; }
.wines tbody tr{ border-top:1px dashed var(--line-light); }
.wines tr.group{ border-top:0; }
.wines tr.group th{
  padding:26px 0 6px; font:600 .78rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
}
.wines tbody tr.group:first-child th{ padding-top:6px; }

.bar h3{ font-size:1.5rem; font-weight:600; margin-bottom:8px; }
.bar h3 + .dishes{ margin-bottom:34px; }
.dishes.compact li{ padding:11px 0; }
.dishes.compact .name{ font-size:1rem; }
.legal{
  margin:clamp(40px, 6vw, 64px) auto 0; max-width:40rem; text-align:center;
  font-size:.78rem; color:rgba(238,230,214,.5);
}

/* =========================================================
   BANQUETS
   ========================================================= */
.banquets{
  background:var(--sarasola) var(--grain); color:var(--harri); position:relative;
}
.banquets .section-head .sub{ color:rgba(238,230,214,.8); }
.banquets .eus{ color:var(--gold); }
.banquet-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2px;
  background:rgba(238,230,214,.16); border:2px solid rgba(238,230,214,.16);
}
.banquet-grid > div{ background:var(--sarasola); padding:clamp(24px, 3vw, 36px); }
.banquet-grid h3{
  font:600 .78rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin:0 0 12px;
}
.banquet-grid h3 + ul{ margin-bottom:28px; }
.banquet-grid ul{ list-style:none; padding:0; margin:0; }
.banquet-grid ul:last-child{ margin-bottom:0; }
.banquet-grid li{ font:400 1.05rem/1.4 var(--serif); padding:7px 0; }
.banquet-grid small{ display:block; font:400 .82rem/1.45 var(--sans); color:rgba(238,230,214,.6); }
.banquet-cta{ text-align:center; margin-top:clamp(36px, 5vw, 52px); }
.banquet-cta p{ font:italic 400 1.2rem/1.4 var(--serif); margin:0 0 22px; }

/* =========================================================
   INFOS PRATIQUES
   ========================================================= */
.infos-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:clamp(32px, 5vw, 64px); }
.infos h2{ font-size:clamp(2rem, 4.5vw, 2.8rem); font-weight:600; margin-bottom:22px; }
.infos h3{ font-size:1.4rem; font-weight:600; margin:0 0 16px; padding-top:clamp(0px, 4vw, 36px); }
.info-list{ margin:0; }
.info-list div{ display:flex; gap:16px; padding:12px 0; border-top:1px solid var(--line-dark); }
.info-list div:first-child{ border-top:0; }
.info-list dt{
  width:84px; flex:none; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brasa); padding-top:3px;
}
.info-list dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.info-list dd a[href^="mailto"]{ font-size:.92rem; }
.info-list a{ text-decoration-color:rgba(168,52,31,.4); text-underline-offset:3px; }

.hours{ width:100%; border-collapse:collapse; }
.hours th, .hours td{ padding:8px 0; border-top:1px solid var(--line-dark); font-size:.95rem; }
.hours tr:first-child th, .hours tr:first-child td{ border-top:0; }
.hours th{ text-align:left; font-weight:500; }
.hours th, .hours td{ vertical-align:top; }
.hours td{ text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.hours-note{ font-size:.85rem; color:var(--ink-soft); margin:14px 0 0; }

.services{ list-style:none; padding:0; margin:0; }
.services li{ position:relative; padding:8px 0 8px 22px; font-size:.95rem; }
.services li::before{
  content:''; position:absolute; left:0; top:17px; width:10px; height:2px; background:var(--brasa);
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.footer{
  background:var(--ink); color:rgba(238,230,214,.65); text-align:center;
  padding-block:clamp(48px, 7vw, 72px);
  border-top:10px solid var(--brasa);
}
.footer-inner img{ margin:0 auto 12px; filter:invert(92%) sepia(10%) saturate(300%) hue-rotate(5deg); }
.footer .on-egin{ font-size:1.8rem; font-style:italic; color:var(--harri); margin:0 0 14px; }
.footer p{ margin:6px 0; font-size:.88rem; }
.footer a{ color:var(--harri); }
.footer .fine{ font-size:.75rem; color:rgba(238,230,214,.42); margin-top:16px; }

/* =========================================================
   APPARITION AU SCROLL
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover{ transform:none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 960px){
  .infos-grid{ grid-template-columns:1fr 1fr; }
  .infos-grid > :first-child{ grid-column:1 / -1; }
  .infos h3{ padding-top:0; }
}

@media (max-width: 860px){
  .burger{ display:flex; }
  .nav-links{
    position:absolute; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--harri); border-bottom:1px solid var(--line-dark);
    padding:8px var(--gutter) 20px;
    box-shadow:0 14px 30px rgba(34,28,23,.12);
  }
  .nav-links[data-open="false"]{ display:none; }
  .nav-links a{ padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:1rem; }
  .nav-links a:hover{ border-color:var(--line-dark); }
  .nav-links .nav-call{ margin-top:14px; text-align:center; padding:14px; }

  .maison-grid, .cave-grid, .menu-cards{ grid-template-columns:1fr; }
  .maison .photo-slot{ aspect-ratio:4/3; }
  .banquet-grid{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .photo-row{ grid-template-columns:1fr; }
  .infos-grid{ grid-template-columns:1fr; }
  .tabs{ justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button{ flex:none; padding:12px 16px; }
  .ardoise{ border-top-left-radius:0; }
  .dishes .name{ font-size:1.02rem; }
  .cta-row .btn{ width:100%; max-width:22rem; }
}