/* Base de style : fiche Refero « Diabla » (fond chaud, titre géant très léger à interligne serré, grille éditoriale de trois
   colonnes sans cadre, boutons à simple contour, un seul accent, en-tête réparti gauche / centre / droite). Le rose et le rouge
   sont remplacés par un crème chaud et le vert de l'olivier ; police et sections recomposées pour La Feuille de Chou. */
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken.woff2?v=1) format("woff2");font-weight:100 700;font-display:swap}
:root{
  --creme:#f6efdf;--creme2:#efe6d0;--olive:#5b6a2c;--olive-fonce:#46531f;--encre:#3a3a2a;--sec:#5f5f4b;--blanc:#fffaf0;
  --filet:rgba(58,58,42,.2);--police:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--police);font-size:17px;font-weight:400;line-height:1.65;padding-bottom:64px}
img{display:block;max-width:100%;height:auto}a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.large{width:min(100% - 40px,1200px);margin-inline:auto}
.annonce{background:var(--olive-fonce);color:#f6efdf;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px}
/* En-tête : liens à gauche, nom au centre, liens à droite, transparent sur la photo */
.site-header{position:sticky;top:0;z-index:30;height:70px;background:transparent;color:var(--blanc);transition:background .35s,box-shadow .35s}
.site-header.scrolled{background:rgba(246,239,223,.96);color:var(--encre);box-shadow:0 6px 20px rgba(58,58,42,.12)}
.bar{height:100%;display:flex;align-items:center;justify-content:space-between;width:min(100% - 40px,1240px);margin-inline:auto}
.logo{font-size:20px;font-weight:400;text-decoration:none;letter-spacing:.01em;padding:14px 0}
.nav{display:none;gap:28px;flex:1}
.nav-d{justify-content:flex-end}
.nav a{text-decoration:none;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:16px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-color:currentColor}
.appel-mobile{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid currentColor;border-radius:14px;padding:11px 18px}
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--olive);border-radius:14px;color:var(--olive-fonce);font-family:var(--police);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;background:transparent;transition:background .3s,color .3s}
.bouton:hover{background:var(--olive-fonce);color:var(--creme)}
.bouton-clair{border-color:rgba(255,250,240,.9);color:var(--blanc)}
.bouton-clair:hover{background:var(--blanc);color:var(--olive-fonce)}
.bouton-discret{border-color:rgba(255,250,240,.5)}
.bouton-discret-fonce{border-color:var(--filet)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.sur-titre{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px}
.sur-titre.vert{color:var(--olive-fonce)}
h1,h2,h3{font-weight:200;margin:0}
h1{font-size:clamp(58px,15vw,150px);line-height:.9;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 28px rgba(30,30,10,.55),0 1px 4px rgba(30,30,10,.45)}
h2{font-size:clamp(34px,6.4vw,72px);line-height:.98;letter-spacing:-.025em;margin-bottom:26px}
h3{font-size:clamp(26px,3.2vw,34px);letter-spacing:-.01em;line-height:1.1;margin:6px 0 12px;font-weight:300;text-transform:none}
/* Héros plein cadre */
.hero{position:relative;margin-top:-70px;min-height:calc(100svh - 34px);min-height:calc(100vh - 34px);display:flex;align-items:flex-end;background:var(--olive-fonce);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 50%;animation:lent 30s ease-in-out infinite alternate}
@keyframes lent{from{transform:scale(1)}to{transform:scale(1.05)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(40,42,16,.85) 0%,rgba(40,42,16,.6) 38%,rgba(40,42,16,.3) 70%,rgba(40,42,16,.4) 100%);pointer-events:none}
.hero-contenu{position:relative;z-index:2;width:min(100% - 40px,1240px);margin:0 auto;padding:0 0 76px;color:var(--blanc)}
.hero .sur-titre,.hero-sous{text-shadow:0 1px 14px rgba(30,30,10,.7)}
.hero-sous{font-size:clamp(18px,2vw,22px);font-weight:300;max-width:26em;margin:24px 0 30px;line-height:1.4}
/* Grille éditoriale */
.editorial{padding:96px 0 40px}
.trois{display:grid;gap:56px}
.trois figure{margin:0 0 20px;overflow:hidden}
.trois figure img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.trois article:hover figure img{transform:scale(1.04)}
.trois article p{margin:0 0 20px;color:var(--sec);max-width:26em}
.note{font-size:14px;color:var(--sec);margin:44px 0 0;max-width:46em}
/* Repères de prix */
.reperes{padding:80px 0 88px;border-top:1px solid var(--filet);margin-top:56px}
.prix{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:24px}
.prix li{display:flex;flex-direction:column;border-top:1px solid var(--filet);padding-top:18px}
.prix b{font-weight:200;font-size:clamp(38px,6vw,64px);letter-spacing:-.025em;line-height:1;color:var(--olive-fonce)}
.prix span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--sec);margin-top:10px}
/* Terrasse */
.terrasse{background:var(--olive-fonce);color:var(--blanc);padding:88px 0}
.terrasse-in{width:min(100% - 40px,1200px);margin-inline:auto;display:grid;gap:36px}
.terrasse .sur-titre.vert{color:#d6dea6}
.terrasse h2{color:#fff;margin-bottom:0}
.terrasse p{color:#eef0dc;max-width:34em}
.liste{list-style:none;margin:24px 0 0;padding:0;max-width:34em}
.liste li{padding:13px 0;border-top:1px solid rgba(255,250,240,.25);font-size:15.5px}
.liste li:last-child{border-bottom:1px solid rgba(255,250,240,.25)}
/* Avis */
.avis{padding:96px 0 80px}
.avis .trois{gap:40px;margin-top:10px}
blockquote{margin:0;padding:22px 0 0;border-top:1px solid var(--filet)}
blockquote p{font-weight:200;font-size:clamp(24px,3vw,30px);line-height:1.2;letter-spacing:-.01em;margin:0 0 12px}
blockquote footer{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sec)}
.lien{display:inline-block;margin-top:30px;padding:14px 0 8px;border-bottom:1px solid var(--olive);color:var(--olive-fonce);text-decoration:none;letter-spacing:.06em}
/* Infos */
.infos{background:var(--creme2);padding:96px 0}
.infos h2{font-size:clamp(32px,5vw,56px)}
.infos-grille{display:grid;gap:72px}
.horaires{width:100%;max-width:520px;border-collapse:collapse}
.horaires th,.horaires td{text-align:left;padding:14px 0;border-bottom:1px solid var(--filet);font-weight:300}
.horaires th{font-weight:500;width:34%;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px}
.horaires tr.today{background:rgba(91,106,44,.14)}
.horaires tr.today th::after{content:" · aujourd'hui";font-weight:300;text-transform:none;letter-spacing:.02em;color:var(--olive-fonce)}
address{font-style:normal;margin:0 0 26px;font-size:19px;line-height:1.8}
.pied{background:#2b2d14;color:#d9dcc0;padding:56px 0 44px;font-size:14.5px}
.pied-logo{font-size:clamp(34px,6vw,64px);font-weight:200;letter-spacing:-.02em;color:#fff;margin:0 0 18px}
.pied p{margin:0 0 12px}.pied a{color:#fff;display:inline-block;padding:13px 0}
.petit{font-size:12.5px;max-width:60em}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:center;min-height:58px;background:var(--olive-fonce);color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-img{animation:none}.reveal{opacity:1;transform:none;transition:none}.trois figure img,.bouton{transition:none}}
@media (min-width:900px){
  body{padding-bottom:0}.callbar{display:none}.appel-mobile{display:none}.nav{display:flex}
  .bar{justify-content:center}
  .hero-contenu{padding-bottom:104px}
  .trois{grid-template-columns:repeat(3,1fr);gap:48px}
  .prix{grid-template-columns:repeat(3,1fr);gap:40px}
  .terrasse-in{grid-template-columns:1fr 1fr;gap:96px;align-items:start}
  .infos-grille{grid-template-columns:1fr 1fr;gap:110px}
}