/* Il Gattopardo : styles du site (aussi utilisés par l'admin)
   Deux polices : Zilla Slab pour les titres, Jost (proche du lettrage du logo) pour tout le reste. */
:root{
  --inchiostro:#16140F;   /* noir encre, texte & fonds sombres */
  --pietra:#F6F1E6;       /* pierre de Palma, fond clair */
  --calce:#FBF8F1;        /* chaux, fond de la carte */
  --oro:#F2B918;          /* jaune Gattopardo : boutons, filets, accents sur fond sombre */
  --oro-chiaro:#F7CD4C;
  --oro-fonce:#8F6300;    /* jaune lisible sur fond clair (contraste AA) */
  --oro-pale:#FFF1C2;     /* jaune très clair : surlignages, survols */
  --terra:#8C3B24;        /* rouge brique sicilien, très ponctuel */
  --grigio:#6E675B;
  --ligne:#DDD4C2;
  --slab:"Zilla Slab", Rockwell, Georgia, serif;
  --sans:"Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --jost:var(--sans);
  --wrap:1160px;
  --section:clamp(4.5rem, 9vw, 7.5rem);
  --header:72px;
  --rayon:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--pietra);color:var(--inchiostro);font-family:var(--sans);font-weight:400;font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1.2rem}
:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.wrap{width:min(var(--wrap),100% - 3rem);margin-inline:auto}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Éléments communs ---------- */
.surtitre{font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-fonce);margin:0 0 1rem}
.titre{font-family:var(--slab);font-weight:700;font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.01em;margin:0 0 1.6rem;text-wrap:balance}
.chapo{max-width:52ch;color:var(--grigio);margin:0 0 2.5rem}
.centre{text-align:center}
.centre .chapo{margin-inline:auto}

.ornement{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--oro)}
.ornement::before,.ornement::after{content:"";height:1px;width:64px;background:currentColor;opacity:.7}
.ornement svg{width:24px;height:24px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-family:var(--sans);font-weight:500;font-size:.8rem;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;padding:1.05rem 1.9rem;border:1px solid currentColor;border-radius:999px;background:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn-or{background:var(--oro);border-color:var(--oro);color:var(--inchiostro)}
.btn-or:hover{background:var(--oro-chiaro);border-color:var(--oro-chiaro);box-shadow:0 8px 22px rgba(242,185,24,.4)}
.btn-noir{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}
.btn-noir:hover{background:#000;box-shadow:0 8px 22px rgba(22,20,15,.3)}
.btn-clair{color:#fff;border-color:rgba(255,255,255,.7)}
.btn-clair:hover{background:#fff;color:var(--inchiostro);border-color:#fff}
.btn-sombre{color:var(--inchiostro)}
.btn-sombre:hover{background:var(--oro);border-color:var(--oro);color:var(--inchiostro)}

/* ---------- En-tête ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:30;padding-top:env(safe-area-inset-top,0px);color:#fff;transition:background .35s,box-shadow .35s}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--header)}
.header.plein{background:var(--inchiostro);box-shadow:0 1px 0 rgba(242,185,24,.25)}
.brand{display:block;text-decoration:none;transition:opacity .35s}
.brand img{height:46px;width:auto}
.header:not(.plein) .brand{opacity:0;pointer-events:none}   /* le grand logo est déjà sur la photo */
.nav{display:flex;align-items:center;gap:2.2rem}
.nav a{text-decoration:none;font-size:.8rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;opacity:.85;transition:opacity .2s,color .2s}
.nav a:hover{opacity:1;color:var(--oro-chiaro)}
.nav .appel{opacity:1;background:var(--oro);color:var(--inchiostro);border-radius:999px;padding:.6rem 1.2rem;font-weight:500;font-variant-numeric:tabular-nums;transition:background .2s,transform .2s}
.nav .appel:hover{background:var(--oro-chiaro);color:var(--inchiostro);transform:translateY(-1px)}
.appel .court{display:none}
@media (max-width:900px){.nav a:not(.appel){display:none}}
@media (max-width:520px){.appel .long{display:none}.appel .court{display:inline}}

/* ---------- Accueil (photo) ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden;background:var(--inchiostro)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;animation:zoom 14s ease-out both}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,20,15,.6) 0%,rgba(22,20,15,.45) 45%,rgba(22,20,15,.85) 100%)}
.hero-contenu{position:relative;z-index:1;padding:calc(var(--header) + 3rem) 1.5rem 7rem;display:flex;flex-direction:column;align-items:center;animation:entree 1.4s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes entree{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero h1{margin:0 0 2rem;line-height:0}
.hero h1 img{width:min(560px,82vw);height:auto;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))}
.hero .avant{font-weight:400;font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;margin:0 0 .9rem;color:rgba(255,255,255,.92)}
.hero .avant span{white-space:nowrap}
.hero .devise{font-family:var(--slab);font-weight:500;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.3;color:var(--oro);margin:0 0 2.6rem}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.legende,.statut{position:absolute;z-index:1;bottom:1.6rem;font-size:.8rem;letter-spacing:.08em;margin:0}
.legende{right:1.6rem;font-weight:300;color:rgba(255,255,255,.7)}
.statut{left:1.6rem;display:flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.95);background:rgba(22,20,15,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:.5rem 1rem;border-radius:999px}
.statut i{width:7px;height:7px;border-radius:50%;background:#999}
.statut.ouvert i{background:#7fd08f;box-shadow:0 0 0 0 rgba(127,208,143,.7);animation:pouls 2s infinite}
@keyframes pouls{70%{box-shadow:0 0 0 8px rgba(127,208,143,0)}100%{box-shadow:0 0 0 0 rgba(127,208,143,0)}}
.statut.ferme i{background:#d96a4d}
@media (max-width:600px){
  .legende{display:none}
  .statut{left:50%;transform:translateX(-50%);white-space:nowrap}
  .hero .avant{letter-spacing:.22em;font-size:.78rem}
  .hero .avant .point{display:none}
  .hero .avant span{display:block}
  .actions{flex-direction:column;align-items:stretch;width:min(300px,100%)}
}

/* ---------- Sections ---------- */
section{padding-block:var(--section)}

/* ---------- Histoire ---------- */
#histoire .wrap{display:grid;grid-template-columns:5fr 6fr;gap:clamp(3rem,7vw,6.5rem);align-items:center}
.citation{font-family:var(--slab);font-size:clamp(1.55rem,2.8vw,2.1rem);line-height:1.3;font-weight:500;margin:0;padding-top:2rem;border-top:2px solid var(--oro);text-wrap:pretty}
.citation cite{display:block;margin-top:1.4rem;font-family:var(--sans);font-style:normal;font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio)}
#histoire p{max-width:58ch}
.origines{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--ligne)}
.villes{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.villes li{font-family:var(--slab);font-weight:500;font-size:1.05rem;background:var(--oro-pale);border:1px solid #F3DB8A;border-radius:999px;padding:.35rem 1rem;transition:background .2s,transform .2s}
.villes li:hover{background:var(--oro);transform:translateY(-2px) rotate(-1deg)}
.origines span{display:block;font-family:var(--sans);font-weight:500;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio);margin-bottom:.5rem}
@media (max-width:860px){#histoire .wrap{grid-template-columns:1fr}}

/* ---------- Carte ---------- */
#carte{background:var(--calce)}
#carte .ornement{margin-bottom:3rem}
.onglets{position:sticky;top:calc(var(--header) + env(safe-area-inset-top,0px));z-index:10;background:var(--calce);padding:.9rem 0;display:flex;justify-content:center;gap:.6rem;overflow-x:auto;margin-bottom:3rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.onglets::-webkit-scrollbar{display:none}
.onglets button{flex:none;background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:.75rem 1.3rem;font-family:var(--sans);font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);cursor:pointer;transition:color .2s,background .2s,border-color .2s,transform .2s}
.onglets button:hover{color:var(--inchiostro);border-color:var(--oro);transform:translateY(-1px)}
.onglets button[aria-selected="true"]{color:var(--inchiostro);background:var(--oro);border-color:var(--oro);box-shadow:0 6px 16px -6px rgba(143,99,0,.5)}
@media (max-width:860px){
  .onglets{justify-content:flex-start;gap:.5rem;margin-inline:-1.5rem;padding-inline:1.5rem;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
}
#panneaux[aria-busy="true"]{min-height:60vh}
.panneau{display:grid;gap:4rem;animation:fondu .35s ease both}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.groupe h3{font-family:var(--slab);font-weight:500;font-size:1.5rem;text-transform:uppercase;letter-spacing:.03em;color:var(--oro-fonce);margin:0 0 1.8rem;line-height:1.15;display:flex;align-items:center;gap:1.2rem}
.groupe h3::after{content:"";flex:1;height:1px;background:var(--ligne)}
.plats{display:grid;grid-template-columns:1fr 1fr;gap:0 5rem;align-items:start}
.plats.une{grid-template-columns:1fr}
.plats.une .colonne{max-width:calc(50% - 2.5rem)}
.plat{margin:0 -.8rem .6rem;padding:.55rem .8rem;border-radius:12px;transition:background .2s}
.plat:hover{background:var(--oro-pale)}
.plat-ligne{display:flex;align-items:baseline;gap:.6rem}
.plat-nom{font-weight:500;font-size:.95rem;text-transform:uppercase;letter-spacing:.07em;line-height:1.3}
.plat-points{flex:1;border-bottom:1px dotted #BDB29C;transform:translateY(-5px);min-width:1.5rem}
.plat-prix{font-weight:500;font-size:1rem;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.duo .plat-prix{width:4.6rem;text-align:right}
.duo .plat-prix+.plat-prix{width:4.2rem;color:var(--grigio);font-weight:400}
.plat-desc{color:var(--grigio);font-size:.95rem;line-height:1.55;margin:.2rem 0 0;max-width:46ch}
.entete{display:flex;justify-content:flex-end;gap:.6rem;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin:0 0 .9rem}
.entete span{width:4.6rem;text-align:right}
.entete span+span{width:4.2rem}
.supp{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 5rem;border-top:1px solid var(--ligne);padding-top:2rem}
.supp h4{grid-column:1/-1;font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-fonce);margin:0 0 .6rem}
.supp div{display:flex;gap:.6rem;align-items:baseline;font-size:.95rem;color:var(--grigio)}
.supp div strong{font-weight:500;color:var(--inchiostro);font-variant-numeric:tabular-nums}
.supp div .plat-points{transform:translateY(-4px)}
.supp p{grid-column:1/-1;margin:.9rem 0 0;font-size:.88rem;color:var(--grigio)}
@media (max-width:860px){
  .plats,.supp{grid-template-columns:1fr}
  .plats.une .colonne{max-width:none}
  .colonne+.colonne .entete{display:none}
  .panneau{gap:3.2rem}
}
@media (max-width:560px){
  .plat-nom{font-size:.88rem;letter-spacing:.05em}
  .plat-prix{font-size:.95rem}
  .duo .plat-prix,.entete span{width:3.9rem}
  .duo .plat-prix+.plat-prix,.entete span+span{width:3.6rem}
  .groupe h3{font-size:1.3rem}
}

/* ---------- Infos ---------- */
#infos .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3.5rem,7vw,6.5rem)}
.horaires{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.horaires td{padding:.85rem 0;border-bottom:1px solid var(--ligne);vertical-align:top}
.horaires td:last-child{text-align:right}
.horaires .ferme{color:#9E9686}
.horaires tr.aujourdhui td{font-weight:500}
.horaires tr.aujourdhui td:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--oro);margin-right:.6rem;vertical-align:2px}
.adresse{font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.5;margin:0 0 1.4rem}
.tel{font-weight:400;letter-spacing:.04em;font-size:clamp(1.9rem,3.4vw,2.3rem);line-height:1.2;text-decoration:none;display:inline-block;margin-bottom:.6rem;font-variant-numeric:tabular-nums}
.tel:hover{color:var(--oro-fonce)}
.petit{color:var(--grigio);font-size:.95rem;margin:0 0 2rem;max-width:44ch}
.liens{display:flex;flex-wrap:wrap;gap:.7rem}
.liens .btn:first-child{background:var(--inchiostro);color:var(--pietra);border-color:var(--inchiostro)}
.liens .btn:first-child:hover{background:transparent;color:var(--inchiostro)}
@media (max-width:860px){#infos .wrap{grid-template-columns:1fr}}

/* ---------- Plan d'accès (pleine largeur, rejoint le pied de page) ---------- */
#infos{padding-bottom:0}
.plan{position:relative;margin-top:var(--section);height:clamp(380px,46vw,520px);background:#E9E3D6;border-top:1px solid var(--ligne);isolation:isolate}
.plan-carte{position:absolute;inset:0;z-index:0;background:#E9E3D6}
.plan-carte .leaflet-tile-pane{filter:grayscale(1) sepia(.22) brightness(1.04) contrast(.88)}
.plan-carte.pret{animation:fondu .6s ease both}
.plan .leaflet-container{font-family:var(--sans);background:#E9E3D6}
.plan .leaflet-control-zoom{border:0;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(22,20,15,.18);margin:1.2rem 1.2rem 0 0}
.plan .leaflet-control-zoom a{width:38px;height:38px;line-height:36px;color:var(--inchiostro);background:var(--calce);border-color:var(--ligne);font-size:1.2rem}
.plan .leaflet-control-zoom a:hover{background:#fff}
.plan .leaflet-control-attribution{background:rgba(251,248,241,.85);color:var(--grigio);font-size:.68rem;padding:.1rem .5rem}
.plan .leaflet-control-attribution a{color:inherit}
.repere span{position:relative;display:block;background:var(--inchiostro);padding:10px 14px 9px;box-shadow:0 6px 18px rgba(22,20,15,.35)}
.repere img{display:block;width:96px;height:auto}
.repere span::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;background:var(--inchiostro);transform:rotate(45deg)}
.plan-etiquette{position:absolute;z-index:500;left:max(1.5rem,calc((100% - var(--wrap)) / 2));top:50%;transform:translateY(-50%);background:var(--calce);padding:2rem 2.2rem;box-shadow:0 10px 34px rgba(22,20,15,.18);border-top:4px solid var(--oro);border-radius:var(--rayon);max-width:300px}
.plan-etiquette .surtitre{margin-bottom:.6rem}
.plan-adresse{font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.45;margin:0 0 1.4rem}
.plan.sans-carte .plan-carte{background:linear-gradient(135deg,#EDE7DA,#E2DACB)}
@media (max-width:860px){
  .plan{height:auto;display:flex;flex-direction:column}
  .plan-carte{position:relative;inset:auto;height:340px}
  .plan-etiquette{position:relative;left:auto;top:auto;transform:none;max-width:none;margin:-2.5rem 1.5rem 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 1.5rem}
  .plan-etiquette .surtitre{width:100%;margin:0}
  .plan-adresse{margin:0;font-size:1rem}
  .plan{padding-bottom:3rem;background:var(--pietra)}
}
@media (max-width:560px){.liens{display:grid;grid-template-columns:1fr 1fr}.liens .btn:first-child{grid-column:1/-1}.liens .btn{padding-inline:1rem}}

/* ---------- Pied de page ---------- */
footer{background:var(--inchiostro);color:#A39B8B;padding-block:4.5rem 3rem;text-align:center;font-size:.9rem}
footer .logo{width:min(240px,60vw);height:auto;margin:0 auto 2rem}
footer .merci{font-family:var(--slab);font-weight:500;font-size:1.2rem;color:var(--oro);margin-bottom:1.2rem}
footer p{margin:.35rem 0}
footer a{text-decoration:none}
footer a:hover{color:var(--oro-chiaro)}
footer .reseaux{display:flex;justify-content:center;gap:1.6rem;margin:1.4rem 0;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase}
footer .copyright{margin-top:1.8rem;font-size:.8rem;color:#7C7568}

/* ---------- Bandeau d'appel avant le pied de page ---------- */
.appel-bandeau{background:var(--oro);padding-block:clamp(2.5rem,5vw,3.5rem)}
.appel-bandeau .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap}
.appel-texte{margin:0;font-size:1.1rem;max-width:44ch}
.appel-texte span{display:block;font-family:var(--slab);font-weight:700;font-size:clamp(2rem,4.2vw,3rem);line-height:1.05;margin-bottom:.35rem}
.appel-bandeau .btn{font-size:1rem;letter-spacing:.1em;padding:1.2rem 2.2rem}

/* ---------- Apparition douce au défilement ---------- */
.revele{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.revele.visible{opacity:1;transform:none}

@media (max-width:860px){
  .appel-bandeau .btn{width:100%}
}