/* =========================================================
   La Place Verte — feuille de style
   Conversion de la maquette Claude Design « La Place Verte v2 »
   en HTML/CSS standard. Polices auto-hébergées (fonts/fonts.css).
   ========================================================= */

:root{
  --bg:#faf7f1;
  --bg2:#f3efe6;
  --ink:#1d1d1a;
  --ink2:#565650;
  --ink3:#7a7870;
  --ink4:#96907f;
  --dark:#0f1f18;
  --dark2:#132a20;
  --green:#2f6b47;
  --green-d:#1e4630;
  --green-pale:#e8f0e9;
  --gold:#c9a227;
  --gold-l:#e3c56b;
  --trait:#e0d9c8;
  --max:1180px;
  --display:'Limelight',Georgia,serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Hauteur de l'en-tete collant. Valeur de repli volontairement un peu
     superieure a la hauteur reelle (97 px depuis que le logo vectoriel sert
     d'enseigne unique) : si app.js ne s'execute pas, la barre d'onglets doit
     rester SOUS l'en-tete, jamais dessous-dessus. */
  --lpv-head:100px;
}
@media (max-width:760px){ :root{ --lpv-head:70px; } }

*{box-sizing:border-box}

/* L'attribut HTML hidden n'est applique que par la regle navigateur
   [hidden]{display:none}. Toute regle d'auteur portant sur une classe la
   surclasse en specificite et l'annule sans bruit : .lpv-panel{display:grid}
   suffisait a rendre visibles les 8 categories a la fois. On la reaffirme
   ici avec la priorite maximale, une bonne fois pour toutes. */
[hidden]{display:none!important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4{margin:0}
button{font-family:inherit}

.lpv-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.lpv-narrow{max-width:820px;margin:0 auto;padding:0 24px;text-align:center}

.lpv-skip{position:absolute;left:-9999px}
.lpv-skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:6px}

::-webkit-scrollbar{height:6px;width:6px}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:6px}

/* ---------- Animations ---------- */
@keyframes lpvUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes lpvFade{from{opacity:0}to{opacity:1}}
@keyframes lpvZoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes lpvKen{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes lpvMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lpv-reveal{opacity:0}
.lpv-reveal.is-in{animation:lpvUp .8s cubic-bezier(.22,.61,.36,1) forwards}

/* ---------- En-tête ---------- */
.lpv-header{
  position:sticky;top:0;z-index:50;
  background:rgba(15,31,24,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,162,39,.25);
}
.lpv-header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:14px}
.lpv-brand{display:flex;align-items:center;gap:14px}
.lpv-brand:hover{color:inherit}
/* Hauteur fixe, largeur libre : le logo est la seule enseigne de l'en-tete et
   doit rester juste quelles que soient ses proportions — carre comme le
   fichier actuel, ou large comme un bloc-marque complet. max-width borne les
   logos tres allonges pour qu'ils ne repoussent pas la navigation.
   Le fond clair et l'arrondi restent : le logo est sur fond blanc, il lui faut
   une pastille pour ne pas flotter sur le vert sombre de l'en-tete. */
.lpv-brand-logo{
  height:68px;width:auto;max-width:220px;object-fit:contain;
  background:var(--bg);padding:5px 8px;border-radius:6px;
}
/* gap:20px et non 26px : .lpv-wrap plafonne le contenu a 1132 px utiles, et
   l'ajout du lien « Reserver » portait la navigation a 862 px, soit 24 px de
   trop une fois le logo (270 px) et son gap comptes — l'en-tete passait alors
   sur deux lignes a toutes les resolutions desktop. */
.lpv-nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.lpv-link{color:rgba(255,255,255,.85);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.lpv-link:hover{color:var(--gold-l)}
/* Selecteur de langue */
.lpv-lang{
  color:rgba(255,255,255,.85);font-size:12px;font-weight:600;letter-spacing:.12em;
  border:1px solid rgba(201,162,39,.55);border-radius:100px;padding:5px 11px;line-height:1;
  transition:background .2s,color .2s,border-color .2s;
}
.lpv-lang:hover{background:var(--gold);border-color:var(--gold);color:#1d1705}
.lpv-tel{background:var(--gold);color:#1d1705;padding:9px 20px;border-radius:100px;font-weight:600;font-size:14px;letter-spacing:.04em}
.lpv-tel:hover{background:var(--gold-l);color:#1d1705}

/* ---------- Hero ---------- */
.lpv-hero{position:relative;min-height:94vh;display:grid;background:var(--dark);overflow:hidden}
.lpv-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:lpvKen 22s ease-out forwards}
.lpv-hero-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,16,12,.9) 0%,rgba(12,20,14,.42) 45%,rgba(20,28,18,.55) 100%)}
.lpv-hero-in{
  position:relative;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:150px 24px 96px;
}
.lpv-hero-name{
  display:flex;align-items:center;gap:16px;margin-bottom:12px;
  font-family:var(--display);font-size:clamp(28px,4vw,60px);letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-l);animation:lpvFade 1s .1s both;
}
.lpv-rule{flex:0 0 auto;width:52px;height:1px;background:rgba(227,197,107,.7)}
.lpv-hero-kicker{
  margin-bottom:24px;font-size:clamp(13px,1.3vw,16px);letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.82);animation:lpvFade 1s .2s both;
}
.lpv-hero-h1{
  margin:0 0 20px;font-family:var(--display);font-weight:400;
  font-size:clamp(24px,4.2vw,66px);line-height:1.08;color:#fff;letter-spacing:.02em;
  text-transform:uppercase;text-shadow:0 2px 44px rgba(0,0,0,.6);animation:lpvUp 1s .2s both;
}
.lpv-hero-lede{
  margin:0 0 32px;font-size:clamp(16px,1.6vw,20px);font-weight:300;
  color:rgba(255,255,255,.92);max-width:50ch;line-height:1.6;
  text-shadow:0 2px 20px rgba(0,0,0,.5);animation:lpvUp 1s .35s both;
}
.lpv-hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;animation:lpvUp 1s .5s both}
.lpv-hero-addr{margin:26px 0 0;font-size:16px;letter-spacing:.06em;animation:lpvFade 1s .7s both}
.lpv-hero-addr a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:4px}
.lpv-hero-addr a:hover{color:var(--gold-l)}

/* ---------- Boutons ---------- */
.lpv-btn{display:inline-block;border-radius:100px;font-size:16px;font-weight:600;letter-spacing:.02em;text-align:center;transition:background .25s,color .25s,border-color .25s}
.lpv-btn-gold{background:var(--gold);color:#1d1705;padding:15px 32px}
.lpv-btn-gold:hover{background:var(--gold-l);color:#1d1705}
.lpv-btn-outline{border:1px solid rgba(255,255,255,.6);color:#fff;padding:14px 32px;font-weight:500}
.lpv-btn-outline:hover{background:#fff;color:var(--dark)}
.lpv-btn-green{background:var(--green);color:#fff;padding:14px 30px;font-size:15px}
.lpv-btn-green:hover{background:var(--green-d);color:#fff}
.lpv-btn-greenline{border:1.5px solid var(--green);color:var(--green);padding:13px 30px;font-size:15px;font-weight:500}
.lpv-btn-greenline:hover{background:var(--green);color:#fff}
.lpv-btn-sm{padding:11px 26px;font-size:14px}

/* ---------- Réservation (widget OpenTable) ----------
   Le module de reservation est un <iframe> vers opentable.fr : aucun script
   tiers n'est charge dans notre page. La CSP de vercel.json n'autorise donc
   qu'une seule chose en plus, frame-src sur les domaines OpenTable. */
.lpv-resa-lede{margin:0 auto 34px;max-width:52ch;text-align:center;font-size:17px;font-weight:300;line-height:1.7;color:var(--ink2)}
.lpv-resa-box{
  max-width:860px;margin:0 auto;background:#fff;
  border:1px solid var(--trait);border-radius:14px;overflow:hidden;
  box-shadow:0 8px 30px rgba(15,31,24,.07);
}
/* Hauteur fixe : un iframe tiers ne peut pas dimensionner son parent, il faut
   donc lui reserver la place. 420 px couvre le module OpenTable complet. */
.lpv-resa-frame{display:block;width:100%;height:420px;border:0}

/* Bouton de secours, toujours visible sous le module. Il n'est pas presente
   comme un message d'erreur : si l'iframe fonctionne c'est un simple raccourci
   vers OpenTable, et si le navigateur affiche un cadre vide (integration
   refusee, reseau coupe) c'est le chemin de reservation qui reste ouvert.
   Un filet place DERRIERE l'iframe ne marcherait pas : Chrome peint sa propre
   page d'erreur opaque dans le cadre et masquerait tout. */
.lpv-resa-alt{margin-top:26px;text-align:center}
.lpv-resa-note{margin:16px auto 0;max-width:60ch;text-align:center;font-size:14.5px;line-height:1.7;color:var(--ink3)}
.lpv-resa-note a{font-weight:600}

/* Lien « Reserver » de l'en-tete : mis en avant en pastille doree, puisque le
   bouton dore du hero renvoie desormais vers le module et non vers le telephone. */
.lpv-link-resa{border:1px solid var(--gold);border-radius:100px;padding:6px 14px;color:var(--gold-l)}
.lpv-link-resa:hover{background:var(--gold);color:#1d1705}

/* Des que le cadre n'est plus assez large, le module OpenTable empile ses
   champs et lui faut plus de hauteur, sinon il defile a l'interieur du cadre.
   Le seuil est a 900 px et non a 760 px comme le reste du site : a 768 px le
   cadre ne fait deja que 720 px de large, largeur a laquelle le module passe
   en colonne. Mieux vaut un peu de blanc en trop qu'un module tronque. */
@media (max-width:900px){
  .lpv-resa-frame{height:560px}
}

/* Bande intermediaire (761-1179 px) : la navigation complete y reste affichee,
   mais la largeur ne suffit plus. Sans resserrage, les neuf entrees s'empilaient
   sur deux ou trois rangees et l'en-tete atteignait 201 px, mangeant un quart de
   l'ecran d'un iPad. Espacement et graisse reduits, l'ensemble tient sur une
   rangee. La bascule est a 1180 px, la largeur maximale du site (--max) : au
   dela, la nav pleine taille rentre sans se replier. */
/* 761-800 px : meme resserree, la navigation complete depasse encore d'une
   vingtaine de pixels et repasse sur deux rangees. Sur cette bande etroite on
   garde le traitement du telephone — logo, langue et telephone seulement ; la
   navigation par sections reste assuree par le defilement et la barre d'appel
   a l'action collante en bas d'ecran. */
@media (min-width:761px) and (max-width:800px){
  .lpv-nav .lpv-link{display:none}
}

@media (min-width:761px) and (max-width:1179px){
  .lpv-nav{gap:13px}
  .lpv-link{font-size:12.5px;letter-spacing:.05em}
  .lpv-link-resa{padding:5px 11px}
  .lpv-lang{font-size:11px;padding:4px 9px}
  .lpv-tel{padding:7px 13px;font-size:13px}
  .lpv-brand-logo{height:58px;max-width:180px}
}
@media (max-width:760px){
  .lpv-resa-lede{margin-bottom:26px}
}

/* ---------- Bandeau défilant ---------- */
.lpv-marquee{background:var(--gold);color:#231c04;overflow:hidden;white-space:nowrap}
.lpv-marquee-track{display:inline-flex;gap:48px;padding:12px 0;animation:lpvMarquee 26s linear infinite;font-family:var(--display);font-size:19px}

/* ---------- Sections ---------- */
.lpv-sec{padding:96px 0;scroll-margin-top:calc(var(--lpv-head,86px) + 12px)}
.lpv-sec-intro{padding:96px 0 40px}
.lpv-sec-carte{padding:56px 0 96px}
.lpv-sec-bar{background:var(--dark);color:rgba(255,255,255,.88)}
.lpv-sec-vins{background:var(--bg2);border-bottom:1px solid var(--trait)}
.lpv-sec-ig{background:var(--bg2);border-top:1px solid var(--trait)}
.lpv-sec-contact{background:var(--dark);color:#fff}
.lpv-sec-resa{background:var(--bg2);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}

.lpv-kicker{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.lpv-h2{margin:0 0 18px;font-family:var(--display);font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.01em;font-weight:400}
.lpv-h2-mb{margin-bottom:44px}
.lpv-h2-tight{margin-bottom:6px}
.lpv-sec-bar .lpv-h2,.lpv-sec-contact .lpv-h2{color:#fff}
.lpv-head-c{text-align:center;margin-bottom:40px}
.lpv-dash{display:block;width:56px;height:1px;background:var(--gold);margin:0 auto}
.lpv-lede{margin:0 0 14px;font-size:17px;font-weight:300;line-height:1.7;color:var(--ink2);max-width:52ch;margin-inline:auto}
.lpv-lede-wide{max-width:64ch;margin-inline:0;margin-bottom:44px}
.lpv-chef{margin:0;font-size:15px;color:var(--green);font-weight:500}
.lpv-sub{margin:0 auto;font-size:16px;font-weight:300;color:rgba(255,255,255,.6);max-width:56ch}
.lpv-sub-dark{color:var(--ink2)}
.lpv-sub-left{margin:0 0 28px;max-width:46ch;line-height:1.7;color:rgba(255,255,255,.72)}

/* ---------- Onglets ---------- */
/* La barre d'onglets se colle SOUS l'en-tete. Sa hauteur reelle est mesuree
   par app.js et publiee dans --lpv-head : un en-tete qui passe a la ligne
   ne peut donc plus recouvrir les onglets. */
.lpv-tabsbar{position:sticky;top:var(--lpv-head,86px);z-index:20;background:rgba(250,247,241,.94);backdrop-filter:blur(8px);padding:14px 0;margin-bottom:8px;border-bottom:1px solid #e8e1d1}
.lpv-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.lpv-tabs-c{justify-content:center;flex-wrap:wrap;overflow:visible;margin-bottom:40px}
.lpv-tabs-gap{flex:1;min-width:16px}
.lpv-tab{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;letter-spacing:.04em;padding:8px 15px 8px 9px;border-radius:100px;
  cursor:pointer;white-space:nowrap;transition:all .25s;
  border:1px solid var(--trait);background:transparent;color:#6a6a62;font-weight:400;
}
/* Teintes des categories. Elles etaient portees par des attributs
   style="--pastel:…" en HTML, ce qui obligeait la CSP a autoriser
   style-src 'unsafe-inline'. Passees en classes, ce token a pu etre retire. */
.lpv-c1{--pastel:#d9ecdd}
.lpv-c2{--pastel:#f3e2cf}
.lpv-c3{--pastel:#efe7cd}
.lpv-c4{--pastel:#f7dcd9}
.lpv-c5{--pastel:#dee5f3}
.lpv-c6{--pastel:#dcecd3}
.lpv-c7{--pastel:#f0e2ce}
.lpv-c8{--pastel:#eddcec}
.lpv-tab.is-on{border-color:var(--pastel,#1e4630);background:var(--pastel,#1e4630);color:#3a4a2f;font-weight:600}
.lpv-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;background:var(--pastel,#e8e1d1);filter:saturate(.7);opacity:.85}
.lpv-tab.is-on .lpv-dot{opacity:1}
.lpv-vege{padding:8px 15px}
.lpv-vege.is-on{background:var(--green-d);border-color:var(--green-d);color:#fff}
.lpv-tabs-c .lpv-tab{padding:9px 18px}
.lpv-tabs-c .lpv-tab.is-on{background:var(--green-d);border-color:var(--green-d);color:#fff}
.lpv-tab-d{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75)}
.lpv-tab-d.is-on{background:var(--gold);border-color:var(--gold);color:#1d1705;font-weight:600}

/* ---------- Items de carte ---------- */
.lpv-panels,.lpv-barpanels{min-height:280px}
.lpv-panel,.lpv-barpanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px 64px;align-items:start;padding-top:24px}
/* Le panneau des bieres n est pas une liste en colonnes : c est un tableau
   centre suivi d une note. Sans cette regle il heritait du grid a colonnes
   auto-fit de .lpv-barpanel, qui sur grand ecran le coupait en deux et
   envoyait la note des bouteilles a l autre bout de la page. */
.lpv-barpanel:not(.lpv-cols){display:block}
.lpv-cols{display:block;columns:2;column-gap:64px;max-width:820px;margin:0 auto}
.lpv-cols .lpv-item{break-inside:avoid}
.lpv-item{margin-bottom:14px;animation:lpvUp .5s both}
.lpv-item[hidden]{display:none}
.lpv-row{display:flex;align-items:baseline;gap:10px}
.lpv-n{font-weight:500;font-size:16px}
.lpv-lead{flex:1;border-bottom:1px dotted #c8c1af;min-width:20px;transform:translateY(-4px)}
.lpv-p{font-family:var(--display);font-size:17px;color:var(--green-d);white-space:nowrap}
.lpv-d{margin:3px 0 0;font-size:13.5px;font-weight:300;color:var(--ink3);line-height:1.5;max-width:46ch}
.lpv-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--green-pale);color:var(--green-d);padding:2px 8px;border-radius:3px;white-space:nowrap}
.lpv-tag-cru{background:#dee5f3;color:#2b4d6b}
.lpv-tag-spicy{background:#f7e4dd;color:#8a3c1e}
.lpv-empty{text-align:center;color:var(--ink4);font-style:italic;padding:40px 0}

.lpv-sec-bar .lpv-lead{border-bottom-color:rgba(255,255,255,.2)}
.lpv-sec-bar .lpv-p{color:var(--gold-l)}
.lpv-sec-bar .lpv-d{color:rgba(255,255,255,.5)}
.lpv-sec-bar .lpv-n{font-size:15px}

/* ---------- Carrousel ---------- */
.lpv-carousel-bleed{
  width:100%;margin-top:52px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.lpv-carousel{display:flex;gap:14px;width:max-content;animation:lpvMarquee 60s linear infinite}
.lpv-carousel:hover{animation-play-state:paused}
.lpv-carousel img{width:330px;height:240px;object-fit:cover;border-radius:6px;cursor:zoom-in;flex:0 0 auto}

/* ---------- Bières ---------- */
.lpv-beer{display:grid;grid-template-columns:1fr 58px 58px 84px;gap:4px 10px;font-size:15px;align-items:baseline;max-width:760px;margin:0 auto}
.lpv-cl{text-align:right;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.lpv-cl-gold{color:var(--gold-l)}
.lpv-bn{padding:9px 0;border-top:1px dotted rgba(255,255,255,.14)}
.lpv-bp{text-align:right;padding:9px 0;border-top:1px dotted rgba(255,255,255,.14)}
.lpv-bh{color:var(--gold-l);font-weight:500}
.lpv-beer-note{max-width:760px;margin:22px auto 0;font-size:14px;font-weight:300;color:rgba(255,255,255,.65);line-height:1.7}

/* ---------- Vins ---------- */
.lpv-vinbox{max-width:860px;margin:0 auto;min-height:320px}
.lpv-wine{display:grid;grid-template-columns:1fr 52px 52px 52px 52px;gap:2px 10px;font-size:15px;align-items:baseline}
.lpv-wine .lpv-cl{color:var(--ink4)}
.lpv-wn{padding:9px 0;border-top:1px dotted #d5cdb9;font-weight:500}
.lpv-wn em{display:block;font-size:12px;color:var(--ink4);font-style:italic;font-weight:300}
.lpv-wp{text-align:right;padding:9px 0;border-top:1px dotted #d5cdb9}
.lpv-wb{font-weight:500;color:var(--green-d)}
.lpv-bulles .lpv-item{margin-bottom:0}
.lpv-bulles .lpv-row{padding:10px 0;border-top:1px dotted #d5cdb9}
.lpv-bulles .lpv-lead{border-bottom-color:#d5cdb9}
.lpv-legal{margin:32px 0 0;font-size:13px;font-style:italic;color:var(--ink4);line-height:1.7;text-align:center}

/* ---------- Privatisation ---------- */
.lpv-spaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:44px}
.lpv-space{background:var(--dark);color:#fff;border-radius:4px;padding:32px 28px;transition:transform .4s,box-shadow .4s}
.lpv-space:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,31,24,.35)}
.lpv-cap{display:block;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);margin-bottom:12px}
.lpv-space h3{margin:0 0 8px;font-family:var(--display);font-size:26px;font-weight:400}
.lpv-space p{margin:0;font-size:15px;font-weight:300;color:rgba(255,255,255,.72);line-height:1.6}
.lpv-privcta{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center;background:var(--green-pale);border-radius:4px;padding:36px}
.lpv-privcta > div:first-child{flex:1 1 320px}
.lpv-privcta h3{margin:0 0 8px;font-family:var(--display);font-size:28px;color:var(--green-d);font-weight:400}
.lpv-privcta p{margin:0 0 8px;font-size:15px;font-weight:300;color:var(--ink2);line-height:1.6}
.lpv-perk{font-weight:600!important;color:var(--green-d)!important}
.lpv-privact{display:flex;flex-direction:column;gap:12px}

/* ---------- Bande photo ---------- */
.lpv-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));background:var(--dark)}
.lpv-band div{position:relative;overflow:hidden;cursor:zoom-in}
.lpv-band img{width:100%;height:340px;object-fit:cover;transition:transform .6s}
.lpv-band div:hover img{transform:scale(1.06)}

/* ---------- Infos ---------- */
.lpv-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-bottom:44px}
.lpv-infos h3{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--green-d)}
.lpv-infos p{margin:0 0 6px;font-size:16px;line-height:1.6}
.lpv-mut{font-size:14px!important;color:var(--ink3);font-weight:300}
.lpv-strong{font-weight:600}

.lpv-map{display:block;position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#e9efe6 0%,#dde7e0 100%);border:1px solid var(--trait);transition:box-shadow .3s}
.lpv-map:hover{box-shadow:0 16px 40px rgba(30,70,48,.15)}
.lpv-map-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(148,168,150,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(148,168,150,.35) 1px,transparent 1px);background-size:44px 44px}
.lpv-map-street{position:absolute;background:#cfd8cd}
.lpv-map-s1{top:-40px;left:12%;width:70%;height:14px;transform:rotate(24deg)}
.lpv-map-s2{bottom:20%;left:-10%;width:80%;height:20px;background:#c7d3c6;transform:rotate(-12deg)}
.lpv-map-in{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:56px 24px;min-height:260px}
.lpv-pin{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--gold);font-size:24px;box-shadow:0 8px 20px rgba(201,162,39,.4)}
.lpv-map-addr{display:block;font-family:var(--display);font-size:24px;color:var(--green-d)}
.lpv-map-metro{display:block;margin-top:4px;font-size:14px;color:#6a7a6c;font-weight:300}
.lpv-map-btn{display:inline-flex;align-items:center;gap:8px;background:var(--green-d);color:#fff;padding:11px 24px;border-radius:100px;font-size:14px;font-weight:500}

/* ---------- Instagram ---------- */
.lpv-ig-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px}
.lpv-ig-handle{font-size:17px;font-weight:500;color:var(--green-d)}
.lpv-ig-handle:hover{color:var(--gold)}
/* 170 px et non 180 : a 1132 px de large, 180 ne laissait tenir que 5
   colonnes et la sixieme photo tombait seule sur une deuxieme ligne. */
.lpv-ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.lpv-ig a{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:6px}
.lpv-ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lpv-ig a:hover img{transform:scale(1.07)}

/* ---------- Contact ---------- */
/* min(300px,100%) et non 300px : sous 348 px de large, une colonne de 300 px
   depassait l'ecran et faisait defiler toute la page horizontalement. */
.lpv-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:56px;align-items:start}
.lpv-coord{display:flex;flex-direction:column;gap:14px}
.lpv-coord a,.lpv-coord span{display:flex;align-items:center;gap:12px;color:#fff;font-size:16px}
.lpv-coord a:hover{color:var(--gold-l)}
.lpv-coord span span{color:var(--gold)}
.lpv-coord > span{color:rgba(255,255,255,.72);font-size:15px;font-weight:300}

.lpv-form{background:var(--dark2);border:1px solid rgba(201,162,39,.25);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:16px}
.lpv-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.lpv-form input,.lpv-form select,.lpv-form textarea{
  background:var(--dark);border:1px solid rgba(255,255,255,.16);border-radius:6px;
  padding:12px 13px;color:#fff;font-family:var(--sans);font-size:15px;
  /* Sans min-width:0, un champ refuse de descendre sous sa largeur intrinseque
     (~208 px) et fait deborder la grille sur tablette. */
  min-width:0;width:100%;
}
.lpv-form textarea{resize:vertical}
.lpv-form input:focus,.lpv-form select:focus,.lpv-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
/* minmax(0,1fr) et non 1fr : « 1fr » vaut minmax(auto,1fr), donc les colonnes
   ne pouvaient pas se comprimer sous la taille des champs. Entre 768 et
   1023 px, le formulaire reclamait 432 px pour 274 disponibles et poussait
   toute la page en debordement horizontal. */
.lpv-form-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lpv-captcha{max-width:200px}
.lpv-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lpv-submit{background:var(--gold);color:#1d1705;border:none;padding:14px 28px;border-radius:100px;font-weight:600;font-size:15px;letter-spacing:.02em;cursor:pointer;align-self:flex-start;transition:background .25s}
.lpv-submit:hover{background:var(--gold-l)}
.lpv-formerr{margin:0;font-size:14px;color:#f0a5a0}
.lpv-formnote{margin:0;font-size:12px;color:rgba(255,255,255,.4);font-weight:300;line-height:1.6}
.lpv-formok{background:var(--green-pale);color:var(--green-d);border-radius:8px;padding:36px 32px;text-align:center}
.lpv-formok-t{margin:0 0 8px;font-family:var(--display);font-size:28px}
.lpv-formok p{margin:0;font-size:15px;line-height:1.6}

/* ---------- Pied de page ---------- */
.lpv-foot{background:var(--dark);color:rgba(255,255,255,.78);padding:64px 0 96px}
.lpv-foot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px}
.lpv-foot-logo{display:inline-flex;background:var(--bg);border-radius:10px;padding:10px;margin:0 0 14px;box-shadow:0 4px 16px rgba(0,0,0,.3)}
/* max-width : borne les bloc-marques tres allonges, la hauteur seule ne suffit
   pas a les contenir dans la colonne du pied de page. */
.lpv-foot-logo img{height:72px;width:auto;max-width:260px;object-fit:contain;border-radius:5px}
.lpv-foot h4{margin:0 0 12px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);font-weight:600}
.lpv-foot p{margin:0 0 4px;font-size:14px}
.lpv-foot a{color:#fff}
.lpv-foot a:hover{color:var(--gold-l)}
.lpv-mut2{color:rgba(255,255,255,.55);font-weight:300}
.lpv-copy{text-align:center;margin:48px 0 0;font-size:13px;color:rgba(255,255,255,.4)}

/* ---------- Lightbox ---------- */
.lpv-lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,12,9,.94);display:flex;align-items:center;justify-content:center;padding:32px;cursor:zoom-out;animation:lpvFade .25s both}
.lpv-lightbox[hidden]{display:none}
.lpv-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:lpvZoom .35s cubic-bezier(.22,.61,.36,1) both}
.lpv-lb-close{position:fixed;top:24px;right:28px;background:none;border:none;color:#fff;font-size:38px;line-height:1;cursor:pointer}

/* ---------- Retour en haut ---------- */
.lpv-top{position:fixed;right:20px;bottom:80px;z-index:61;width:48px;height:48px;border-radius:50%;border:1px solid rgba(201,162,39,.5);background:rgba(15,31,24,.94);backdrop-filter:blur(8px);color:var(--gold-l);font-size:20px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s}
.lpv-top[hidden]{display:none}
.lpv-top:hover{background:var(--gold);color:#1d1705}

/* ---------- Barre d'appel fixe ---------- */
.lpv-ctabar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(15,31,24,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(201,162,39,.3);transform:translateY(110%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.lpv-ctabar.is-on{transform:translateY(0)}
.lpv-ctabar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:12px}
.lpv-ctabar-t{font-family:var(--display);font-size:19px;color:#fff;flex:1;min-width:180px}

/* ---------- Pages légales ---------- */
.lpv-legalpage{padding:72px 0 96px}
.lpv-legalwrap{max-width:760px;margin:0 auto;padding:0 24px}
.lpv-legalwrap h1{margin-bottom:36px}
.lpv-legalwrap h2{
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-d);
  margin:52px 0 14px;padding-top:22px;border-top:1px solid var(--trait);
}
.lpv-legalwrap h2:first-of-type{margin-top:0}
.lpv-legalwrap p{margin:0 0 15px;font-size:16px;font-weight:300;line-height:1.75;color:#3a3a35}
.lpv-legalwrap strong{font-weight:600;color:var(--ink)}
.lpv-legalwrap a{text-decoration:underline;text-underline-offset:3px}
.lpv-legalnote{font-size:14px!important;color:var(--ink3)!important;font-style:italic}
.lpv-legaldate{margin-top:44px!important;padding-top:22px;border-top:1px solid var(--trait);font-size:13px!important;color:var(--ink4)!important}
.lpv-legalwrap mark{background:#fdf3d0;color:#6b5410;padding:1px 5px;border-radius:2px;font-style:italic}

.lpv-highlight{background:var(--green-pale);border-left:3px solid var(--green);border-radius:0 4px 4px 0;padding:24px 26px;margin:0 0 40px}
.lpv-highlight p{margin:0 0 10px;color:var(--green-d)}
.lpv-highlight p:last-child{margin:0}

.lpv-datatable{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.lpv-datatable caption{text-align:left;font-size:13px;color:var(--ink4);font-style:italic;padding-bottom:10px}
.lpv-datatable th,.lpv-datatable td{text-align:left;vertical-align:top;padding:11px 0;border-bottom:1px solid var(--trait);font-weight:300;line-height:1.65;color:#3a3a35}
.lpv-datatable th{width:34%;padding-right:22px;font-weight:600;color:var(--ink);font-size:14px}
.lpv-datatable tr:last-child th,.lpv-datatable tr:last-child td{border-bottom:0}

.lpv-rights{margin:0 0 18px;padding:0;list-style:none}
.lpv-rights li{padding:9px 0 9px 20px;position:relative;font-size:16px;font-weight:300;line-height:1.7;color:#3a3a35;border-bottom:1px dotted var(--trait)}
.lpv-rights li:last-child{border-bottom:0}
.lpv-rights li::before{content:"→";position:absolute;left:0;color:var(--gold);font-weight:600}

/* ---------- Mobile ---------- */
@media (max-width:700px){
  .lpv-datatable,.lpv-datatable tbody,.lpv-datatable tr,.lpv-datatable th,.lpv-datatable td{display:block;width:auto}
  .lpv-datatable th{border-bottom:0;padding-bottom:2px}
  .lpv-datatable td{padding-top:0;padding-bottom:14px}
}
@media (max-width:900px){
  .lpv-cols{columns:1}
  .lpv-panel,.lpv-barpanel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .lpv-nav .lpv-link{display:none}
  .lpv-nav{gap:12px}

  /* En-tete compact : sur 390 px il passait a la ligne et atteignait 147 px,
     enterrant completement la barre d'onglets. */
  .lpv-header-in{flex-wrap:nowrap;gap:12px;padding-block:9px}
  .lpv-brand{gap:9px;min-width:0}
  .lpv-brand-logo{height:48px;max-width:150px;padding:3px 5px}
  .lpv-tel{padding:8px 14px;font-size:13px;white-space:nowrap}

  /* Sur telephone la barre d'onglets n'est plus collante : elle passe a la
     ligne pour que les 8 categories soient toutes atteignables, au lieu
     d'etre cachees dans un defilement horizontal de 1051 px. */
  .lpv-tabsbar{position:static;padding:12px 0;backdrop-filter:none}
  .lpv-tabs{flex-wrap:wrap;overflow-x:visible;gap:7px}
  .lpv-tabs-gap{display:none}
  .lpv-vege{margin-left:auto}

  .lpv-hero-name{font-size:clamp(24px,7vw,40px);gap:10px;line-height:1.5}
  .lpv-rule{width:26px}
  .lpv-hero-h1{font-size:clamp(22px,6vw,34px);white-space:normal}
  .lpv-hero-in{padding:110px 22px 80px}
  .lpv-sec{padding:64px 0}
  .lpv-beer{grid-template-columns:1fr 46px 46px 62px;font-size:14px}
  .lpv-wine{grid-template-columns:1fr 44px 44px 44px 44px;font-size:14px}
  .lpv-form-2{grid-template-columns:1fr}
  .lpv-privcta{padding:26px}
  .lpv-ctabar-t{display:none}
  .lpv-ctabar-in{justify-content:center}
  .lpv-top{bottom:90px;right:14px}
  .lpv-carousel img{width:240px;height:180px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .lpv-reveal{opacity:1}
  .lpv-hero-img{transform:none}
}