/* ============================================================
   Rolly's Pub — Landing pages Google Ads (karaoke / billard / flechettes)
   S'appuie sur style.css (tokens, boutons, module de réservation)
   ============================================================ */

/* header allégé : logo + téléphone + CTA, pas de menu (moins de fuites) */
.lp-head{position:sticky;top:0;z-index:100;background:var(--green);color:var(--cream);box-shadow:var(--shadow)}
.lp-head .nav{height:68px}
.lp-head .logo img{height:44px}
.lp-head .acts{display:flex;gap:10px;align-items:center}
.lp-head .tel{border:1.5px solid rgba(246,239,225,.4);border-radius:40px;padding:8px 14px;font-weight:800;font-size:14px;white-space:nowrap}
.lp-head .tel:hover{background:var(--amber);color:var(--green);border-color:var(--amber)}
@media(max-width:620px){.lp-head .tel .num{display:none}.lp-head .btn{display:none}}

/* hero */
.lp-hero{position:relative;color:var(--cream);background:var(--green3);overflow:hidden}
.lp-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.lp-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(22,56,43,.94) 0%,rgba(22,56,43,.82) 45%,rgba(58,37,23,.35) 100%)}
.lp-hero .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:64px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.lp-hero .kicker{display:inline-flex;gap:8px;align-items:center;background:rgba(246,239,225,.12);border:1px solid rgba(246,239,225,.25);padding:6px 14px;border-radius:30px;font-size:13px;font-weight:700;margin-bottom:18px}
.lp-hero h1{font-size:clamp(34px,5.4vw,58px);line-height:1.03;font-weight:900;margin-bottom:14px}
.lp-hero h1 span{color:var(--amber)}
.lp-hero .sub{font-size:18px;opacity:.95;max-width:560px;margin-bottom:22px}
.lp-hero .ticks{list-style:none;display:grid;gap:8px;margin-bottom:28px;font-weight:600;font-size:15.5px}
.lp-hero .ticks li{display:flex;gap:10px;align-items:flex-start}
.lp-hero .ticks li::before{content:"✓";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--amber);color:var(--wooddark);display:grid;place-items:center;font-size:12px;font-weight:900;margin-top:1px}
.pricecard{background:var(--cream);color:var(--ink);border-radius:var(--radius);padding:26px;box-shadow:0 24px 50px rgba(0,0,0,.35);text-align:center}
.pricecard .lbl{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--coral)}
.pricecard .amt{font-size:58px;font-weight:900;color:var(--green);line-height:1;margin:10px 0 4px}
.pricecard .amt small{font-size:18px;font-weight:700;color:var(--muted)}
.pricecard .per{font-size:14.5px;color:var(--muted);margin-bottom:18px}
.pricecard .btn{width:100%;justify-content:center;font-size:16px;padding:16px}
.pricecard .mini{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
@media(max-width:900px){
  .lp-hero .wrap{grid-template-columns:1fr;padding-top:40px;padding-bottom:40px;gap:26px}
  .lp-hero .bg::after{background:linear-gradient(180deg,rgba(22,56,43,.9),rgba(22,56,43,.86))}
}

/* bande de réassurance */
.trust{background:var(--wooddark);color:var(--cream)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:18px;padding-bottom:18px}
.trust div{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:600}
.trust b{font-size:20px}
@media(max-width:900px){.trust .wrap{grid-template-columns:1fr 1fr}}

/* module de réservation embarqué */
.lp-book{scroll-margin-top:80px}
.lp-book .head{text-align:center;margin-bottom:26px}
.lp-book .steps-nav .s:first-child,.lp-book .steps-nav .sep:first-of-type{display:none}
.lp-book .step-panel[data-step="1"]{display:none !important}
.lp-book .resa-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:30px}
.lp-book .bookcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
@media(max-width:860px){.lp-book .resa-layout{grid-template-columns:1fr}.lp-book .summary{position:static}.lp-book .bookcard{padding:20px}}

/* arguments */
.usp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.usp .it{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.usp .ic{font-size:28px;margin-bottom:8px}
.usp h3{color:var(--green);font-size:17px;margin-bottom:4px}
.usp p{color:var(--muted);font-size:14.5px}
@media(max-width:900px){.usp{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.usp{grid-template-columns:1fr}}

/* galerie */
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:14px}
.gal .ph{border-radius:14px;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.gal .ph:first-child{grid-row:span 2}
@media(max-width:760px){.gal{grid-template-columns:1fr 1fr;grid-template-rows:220px 150px}.gal .ph:first-child{grid-column:span 2;grid-row:auto}.gal .ph:nth-child(4){display:none}}

/* étapes */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:how}
.how .it{position:relative;padding:22px 22px 22px 70px;background:var(--cream);border-radius:16px;border:1px solid var(--line)}
.how .it::before{counter-increment:how;content:counter(how);position:absolute;left:20px;top:20px;width:36px;height:36px;border-radius:50%;background:var(--green);color:var(--cream);display:grid;place-items:center;font-weight:900}
.how h3{color:var(--green);font-size:17px;margin-bottom:4px}
.how p{color:var(--muted);font-size:14.5px}
@media(max-width:900px){.how{grid-template-columns:1fr}}

/* occasions / univers */
.occ{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.occ .it{border-radius:16px;padding:20px;background:var(--green);color:var(--cream)}
.occ .it:nth-child(2){background:var(--wood)}
.occ .it:nth-child(3){background:var(--coral)}
.occ .it:nth-child(4){background:var(--wooddark)}
.occ h3{font-size:18px;margin-bottom:4px}
.occ p{font-size:14.5px;opacity:.92}
@media(max-width:900px){.occ{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.occ{grid-template-columns:1fr}}
.occ-note{margin-top:18px;font-size:15px;color:var(--muted)}
.occ-note a{color:var(--coral);font-weight:800}

/* accès */
.acc{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.acc{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:17px 30px 17px 0;font-weight:800;color:var(--green);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:24px;color:var(--coral)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:17px;font-size:15px}

/* autres jeux */
.cross{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.cross{grid-template-columns:1fr}}
.cross .tile{min-height:240px}

/* barre de réservation fixe (mobile) */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--green);padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:none;gap:10px;box-shadow:0 -8px 24px rgba(0,0,0,.2)}
.stickybar .btn{flex:1;justify-content:center;padding:14px 10px}
.stickybar .call{flex:0 0 auto;background:rgba(246,239,225,.14);color:var(--cream);padding:14px 16px}
@media(max-width:860px){
  .stickybar{display:flex}
  body.lp{padding-bottom:76px}
  body.lp #cookie-banner{bottom:86px}
  body.lp .toast{bottom:96px}
}
body.lp.in-book .stickybar{display:none}

/* hero plus compact sur mobile : le tarif remonte au-dessus de la ligne de flottaison */
@media(max-width:900px){
  .lp-hero .sub{font-size:16px;margin-bottom:16px}
  .lp-hero .ticks{font-size:14.5px;margin-bottom:6px}
  .lp-hero .ticks li:nth-child(4){display:none}
  .lp-hero h1{font-size:34px}
}