/* site.css — La Guinguette du lac de Pareloup · site public */
:root{
  --bleu-lac:#163E8C;
  --bleu-profond:#0C2750;
  --soleil:#F6C13B;
  --terracotta:#D9683F;
  --vert-eau:#1C8C82;
  --whatsapp:#25D366;
  --creme:#FBF1DD;
  --sable:#F1E2C2;
  --sable-fonce:#E6D2A8;
  --blanc:#FFFDF7;
  --encre:#0C2750;

  --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:34px;
  --sh-1:0 2px 10px rgba(12,39,80,.08);
  --sh-2:0 18px 48px rgba(12,39,80,.18);
  --ff-display:"Alfa Slab One",serif;
  --ff-script:"Caveat",cursive;
  --ff-ui:"Hanken Grotesk",system-ui,sans-serif;
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--ff-ui);color:var(--encre);background:var(--creme);
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
a{color:inherit;}

.dotbg{background-image:radial-gradient(var(--sable-fonce) 1.3px,transparent 1.4px);background-size:14px 14px;}
.sunburst{background:repeating-conic-gradient(from 0deg at 50% 50%, var(--soleil) 0deg 7deg, transparent 7deg 14deg);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.kicker{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-size:12.5px;color:var(--terracotta);margin-bottom:14px;}
.kicker::before{content:"";width:26px;height:2px;background:var(--terracotta);}
.kicker.light{color:var(--soleil);}
.kicker.light::before{background:var(--soleil);}
.script{font-family:var(--ff-script);font-weight:700;}

h2.big{font-family:var(--ff-display);font-weight:400;font-size:clamp(30px,5.2vw,58px);
  line-height:1.02;text-wrap:balance;}
.lede{font-size:clamp(16px,2vw,20px);line-height:1.6;color:#5B5340;max-width:60ch;}

/* buttons */
.btn{font-weight:800;font-size:16px;border:0;border-radius:999px;padding:15px 26px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;text-decoration:none;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--terracotta);color:#fff;box-shadow:0 10px 24px rgba(217,104,63,.32);}
.btn-soleil{background:var(--soleil);color:var(--bleu-profond);box-shadow:0 10px 24px rgba(246,193,59,.3);}
.btn-ghost{background:transparent;color:var(--bleu-lac);border:2px solid currentColor;padding:13px 24px;}
.btn-ghost.onblue{color:var(--creme);}
.btn-wa{background:var(--whatsapp);color:#063E26;box-shadow:0 10px 24px rgba(37,211,102,.28);}
.btn-disabled{background:var(--sable-fonce);color:#9A8E6E;cursor:not-allowed;box-shadow:none;}
.btn-disabled:hover{transform:none;}
.btn-lg{font-size:18px;padding:17px 32px;}
.btn-block{width:100%;}

/* segmented */
.seg{display:inline-flex;background:var(--sable);border-radius:999px;padding:5px;gap:4px;width:100%;}
.seg button{flex:1;border:0;background:transparent;font-weight:800;font-size:16px;padding:13px 10px;
  border-radius:999px;cursor:pointer;color:var(--bleu-profond);transition:all .14s ease;}
.seg button.on{background:var(--blanc);color:var(--terracotta);box-shadow:var(--sh-1);}

/* stepper */
.stepper{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;
  background:var(--blanc);border:2px solid var(--sable-fonce);border-radius:999px;padding:6px;width:100%;}
.stepper button{width:46px;height:46px;flex:none;border-radius:50%;border:0;background:var(--bleu-lac);
  color:var(--creme);font-size:26px;line-height:1;cursor:pointer;transition:filter .12s;}
.stepper button:hover{filter:brightness(1.12);}
.stepper button:disabled{background:var(--sable-fonce);cursor:not-allowed;}
.stepper .vwrap{text-align:center;}
.stepper .v{font-weight:800;font-size:22px;font-variant-numeric:tabular-nums;}
.stepper .vwrap small{display:block;font-size:11px;color:#8A8268;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}

/* fields */
.field{margin-bottom:0;}
.field label{display:block;font-weight:700;font-size:13.5px;margin-bottom:7px;}
.field input,.field select{width:100%;font-family:var(--ff-ui);font-size:16px;padding:14px 15px;
  border-radius:var(--r-s);border:2px solid var(--sable-fonce);background:var(--blanc);color:var(--encre);}
.field input:focus,.field select:focus{outline:0;border-color:var(--bleu-lac);box-shadow:0 0 0 4px rgba(22,62,140,.14);}
.field.err input{border-color:#C0492B;}
.field .msg{font-size:12.5px;color:#C0492B;margin-top:6px;font-weight:600;}

/* badges */
.badge{font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;}
.rtag{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:6px;border:1.5px solid;white-space:nowrap;}
.rtag.vegetarien{color:#2C7A2C;border-color:#9AD49A;background:#EAF7EA;}
.rtag.alcool{color:#7A3412;border-color:#FCA99A;background:#FFF0ED;}

/* section */
section{padding:clamp(56px,9vw,108px) 0;}
.sec-narrow{max-width:760px;}

/* cards generic */
.card{background:var(--blanc);border:1px solid var(--sable);border-radius:var(--r-l);box-shadow:var(--sh-1);}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ken burns */
@keyframes kb{from{transform:scale(1.04);}to{transform:scale(1.16);}}
.kenburns{animation:kb 18s ease-in-out infinite alternate;}
@media(prefers-reduced-motion:reduce){.kenburns{animation:none;}}

/* immersive full-bleed band */
.fullband{position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  min-height:min(78vh,620px);display:flex;align-items:flex-end;overflow:hidden;}
.fullband .bg{position:absolute;inset:0;z-index:0;}
.fullband .ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,39,80,.28) 0%,rgba(12,39,80,.05) 40%,rgba(12,39,80,.74) 100%);}
.fullband .inner{position:relative;z-index:2;color:var(--creme);padding:0 22px clamp(40px,7vw,76px);width:100%;}

/* reel marquee */
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.reel-row{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.reel-track{display:flex;width:max-content;animation:marquee 60s linear infinite;}
.reel-row:hover .reel-track{animation-play-state:paused;}
.reel-card{flex:none;width:230px;height:400px;margin-right:16px;border-radius:20px;overflow:hidden;
  position:relative;box-shadow:0 10px 30px rgba(12,39,80,.22);}
@media(prefers-reduced-motion:reduce){.reel-track{animation:none;}}
@media(max-width:600px){.reel-card{width:180px;height:320px;}}

/* — animation intro pizza — */
@keyframes pizzaspin{to{transform:rotate(360deg);}}
@keyframes raysspin{to{transform:rotate(-360deg);}}
@keyframes introPop{0%{transform:scale(.72);opacity:0;}60%{opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes introRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.intro-pizza{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 38%,#FFF7E6 0%,var(--creme) 55%,var(--sable) 130%);
  overflow:hidden;cursor:pointer;transition:opacity .7s ease,visibility .7s;}
.intro-pizza.hide{opacity:0;visibility:hidden;}
.intro-rays{position:absolute;width:160vmax;height:160vmax;opacity:.06;animation:raysspin 80s linear infinite;}
.intro-stack{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;}
.pizza-spin{animation:pizzaspin 6s linear infinite,introPop .8s cubic-bezier(.34,1.4,.5,1) both;transform-origin:50% 50%;}
.intro-logo{line-height:.84;color:var(--bleu-lac);animation:introRise .7s ease .35s both;}
.intro-la{font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--terracotta);text-transform:uppercase;}
.intro-gg{font-family:var(--ff-display);font-size:clamp(30px,6vw,44px);text-transform:uppercase;}
.intro-sub{font-weight:700;font-size:11px;letter-spacing:.24em;color:var(--terracotta);text-transform:uppercase;}
.intro-cap{color:var(--bleu-lac);font-size:clamp(22px,4vw,30px);animation:introRise .7s ease .55s both;}
@media(prefers-reduced-motion:reduce){.pizza-spin{animation:none;}.intro-rays{animation:none;}.intro-logo,.intro-cap{animation:none;}}

/* — responsive nav — */
.desk-nav{display:flex;}
@media(max-width:768px){
  .desk-nav{display:none;}
  .hide-mobile{display:none!important;}
  .show-mobile{display:flex!important;}
}
@media(min-width:769px){.show-mobile{display:none!important;}}

/* — carte page — */
.cp-head{position:sticky;top:0;z-index:40;background:var(--creme);border-bottom:1px solid var(--sable);}
.cp-band{background:var(--bleu-lac);color:var(--creme);position:relative;overflow:hidden;padding:clamp(40px,7vw,72px) 0;}
.cp-band .rays{position:absolute;inset:-40% -10% auto -10%;height:120%;opacity:.09;}
.cp-cats{padding:clamp(40px,6vw,72px) 0 90px;}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(24px,4vw,44px);align-items:start;}
.cp-cat{break-inside:avoid;}
.cathead{font-family:var(--ff-display);text-transform:uppercase;font-size:clamp(22px,3vw,28px);color:var(--bleu-lac);display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.cathead::after{content:"";flex:1;height:3px;background:var(--soleil);border-radius:2px;}
.subcathead{font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--terracotta);margin:18px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--sable-fonce);}
.dish{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--sable-fonce);align-items:flex-start;}
.dish:last-child{border-bottom:none;}
.dish-img{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--sable),var(--sable-fonce));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.4rem;}
.glaces-block{background:var(--blanc);border:1px solid var(--sable);border-radius:var(--r-m);padding:clamp(16px,3vw,24px);}
.glaces-tarifs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.glaces-tarif-pill{background:var(--sable);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;color:var(--bleu-profond);}
.glaces-tarif-pill span{color:var(--terracotta);margin-left:6px;}
.glaces-flavors{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.flavor-tag{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--sable);color:var(--encre);}
