/* =========================================================
   Le Comptoir des Remparts — site de démonstration
   Palette tirée des matériaux de Vannes :
   murs à la chaux, ardoise des toits, craie, ocre des colombages.
   ========================================================= */

:root{
  --chaux:#EFEBE3;
  --chaux-2:#E5E0D6;
  --ardoise:#2B3330;
  --ardoise-2:#3B4642;
  --craie:#E8E4DA;
  --ocre:#B0803A;
  --pierre:#7E7A6E;

  --pad:clamp(1.25rem,5vw,6rem);
  --stack:clamp(3.5rem,9vh,6.5rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--chaux);
  color:var(--ardoise);
  font-family:'Karla',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
img{max-width:100%;display:block}

/* ---------- vocabulaire typographique ---------- */
.display{
  font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.01em;
}
.eyebrow{
  font-size:.6875rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--pierre);
}

/* ---------- navigation ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.25rem var(--pad);
  border-bottom:1px solid rgba(43,51,48,.14);
  position:relative;z-index:5;
}
.nav .mark{
  font-family:'Bodoni Moda',Georgia,serif;
  font-size:1.0625rem;letter-spacing:.02em;text-decoration:none;color:var(--ardoise);
}
.nav ul{display:flex;gap:clamp(.9rem,3vw,2rem);list-style:none;margin:0;padding:0}
.nav a.link{
  font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  text-decoration:none;color:var(--pierre);padding:.35rem 0;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.nav a.link:hover,.nav a.link:focus-visible{color:var(--ardoise);border-color:var(--ocre)}
.nav a.link[aria-current="page"]{color:var(--ardoise);border-color:var(--ocre)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,8vh,5.5rem) var(--pad) var(--stack);max-width:1200px}
.hero h1{margin:1rem 0 0;font-size:clamp(2.6rem,9vw,6.5rem)}
.hero .sub{
  margin:1.5rem 0 0;max-width:38ch;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);color:#4A544F;
}

/* ---------- ardoise : élément signature ---------- */
.ardoise{
  background:var(--ardoise);
  color:var(--craie);
  border-radius:3px;
  padding:clamp(1.75rem,5vw,3.25rem);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -28px rgba(43,51,48,.7);
  position:relative;
}
.ardoise::after{
  content:'';position:absolute;inset:8px;
  border:1px solid rgba(232,228,218,.16);border-radius:2px;pointer-events:none;
}
.ardoise .eyebrow{color:rgba(232,228,218,.6)}
.ardoise h2,.ardoise h3{color:var(--craie)}

.plat{
  display:grid;grid-template-columns:1fr auto;
  gap:.35rem 1.25rem;align-items:baseline;
  padding:.95rem 0;
  border-bottom:1px solid rgba(232,228,218,.13);
}
.plat:last-child{border-bottom:0}
.plat .nom{font-weight:600;letter-spacing:.01em}
.plat .prix{
  font-family:'Bodoni Moda',Georgia,serif;
  font-size:1.0625rem;color:var(--ocre);white-space:nowrap;
}
.plat .desc{grid-column:1/-1;margin:0;font-size:.9375rem;color:rgba(232,228,218,.62);line-height:1.55}

/* ---------- sections ---------- */
.section{padding:var(--stack) var(--pad);max-width:1200px}
.section.tight{padding-top:0}
.section h2{margin:.85rem 0 0;font-size:clamp(1.9rem,5.5vw,3.4rem)}
.section p{max-width:58ch}
.rule{border:0;border-top:1px solid rgba(43,51,48,.14);margin:0 var(--pad)}

.grid2{display:grid;gap:clamp(1.75rem,5vw,4rem)}
@media(min-width:860px){.grid2{grid-template-columns:1fr 1fr;align-items:start}}

/* ---------- horaires ---------- */
.horaires{list-style:none;margin:1.5rem 0 0;padding:0;max-width:26rem}
.horaires li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid rgba(43,51,48,.12);
}
.horaires li:last-child{border-bottom:0}
.horaires .jour{font-weight:600}
.horaires .h{color:var(--pierre);font-variant-numeric:tabular-nums}
.horaires li.ferme .h{color:var(--ocre)}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.95rem 1.6rem;border-radius:2px;
  font-weight:700;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--ardoise);
  background:var(--ardoise);color:var(--chaux);
  transition:background .25s,color .25s;
  min-height:48px;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ardoise)}
.btn.ghost{background:transparent;color:var(--ardoise)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ardoise);color:var(--chaux)}
.btn.craie{border-color:var(--craie);background:var(--craie);color:var(--ardoise)}
.btn.craie:hover,.btn.craie:focus-visible{background:transparent;color:var(--craie)}

/* ---------- barre d'appel mobile ---------- */
.appel{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;
  background:var(--ardoise);
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px -20px rgba(43,51,48,.8);
}
.appel a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;border-radius:2px;
  background:var(--ocre);color:#231A0C;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.875rem;
  text-decoration:none;
}
.appel a + a{margin-left:.6rem;background:transparent;color:var(--craie);border:1px solid rgba(232,228,218,.4)}
@media(min-width:860px){.appel{display:none}}
@media(max-width:859px){body{padding-bottom:5.5rem}}

/* ---------- pied ---------- */
footer{
  background:var(--ardoise-2);color:rgba(232,228,218,.8);
  padding:var(--stack) var(--pad) clamp(2rem,5vh,3rem);
}
footer a{color:var(--craie)}
footer .cols{display:grid;gap:2.25rem;max-width:1200px}
@media(min-width:760px){footer .cols{grid-template-columns:1.2fr 1fr 1fr}}
footer h3{
  font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(232,228,218,.55);margin:0 0 .9rem;font-weight:600;
}
footer .mark{font-family:'Bodoni Moda',Georgia,serif;font-size:1.25rem;color:var(--craie)}
.demo{
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.5rem;
  border-top:1px solid rgba(232,228,218,.16);
  font-size:.8125rem;color:rgba(232,228,218,.6);max-width:1200px;
}
.demo a{color:var(--ocre);text-decoration:none;border-bottom:1px solid rgba(176,128,58,.5)}

/* ---------- accessibilité & motion ---------- */
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--ardoise);color:var(--craie);
  padding:.75rem 1.25rem;z-index:100;
}
.skip:focus{left:0}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}