/* LOKA BAR — Bar & Kitchen à Cannes · Charte rose/crème/brique/vert */
:root{--rose:#c9928b;--creme:#f0e6d4;--brique:#a93f2b;--brun:#5f2d20;--vert:#1e6e5c;--brun2:#7a4a3d;}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--rose);color:var(--creme);font-family:'Oswald',sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* Logo — fidèle à la charte : LOKA avec cartouche BAR incrusté entre le K et le A */
.logo{font-family:'Archivo Black';font-size:30px;color:var(--brique);letter-spacing:-2.5px;position:relative;display:inline-block;line-height:1;padding-right:6px}
.logo .bar{position:absolute;left:58%;top:52%;transform:translateY(-50%);background:var(--brique);color:var(--creme);font-size:10px;letter-spacing:1.5px;padding:3px 6px;font-family:'Oswald';font-weight:500;z-index:2}
.logo.clair{color:var(--creme)}
.logo.clair .bar{background:var(--creme);color:var(--brique)}

/* Header */
header{position:fixed;top:0;width:100%;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 32px;background:var(--creme);border-bottom:3px solid var(--brique)}
nav{display:flex;gap:20px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--brique)}
nav a:hover,nav a.actif{color:var(--vert)}
.h-actions{display:flex;gap:10px;align-items:center}

/* Boutons */
.btn{display:inline-block;background:var(--brique);color:var(--creme) !important;padding:14px 32px;font-family:'Archivo Black';font-size:14px;text-transform:uppercase;border:3px solid var(--brun);box-shadow:6px 6px 0 var(--brun);transition:.15s;cursor:pointer;text-align:center}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--brun)}
.btn.creme{background:var(--creme);color:var(--brique) !important}
.btn.vert{background:var(--vert);color:var(--creme) !important}
.btn.petit{padding:10px 20px;font-size:12px;box-shadow:4px 4px 0 var(--brun)}
.btn.petit:hover{box-shadow:2px 2px 0 var(--brun)}

/* Hero parallax plein écran */
.px{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:130px 36px;background-attachment:fixed;background-position:center;background-size:cover;position:relative}
.px.court{min-height:62vh;padding:150px 36px 80px}
.px::before{content:'';position:absolute;inset:0;background:linear-gradient(#4a1f15d9,#4a1f1559 45%,#c9928b)}
.px>*{position:relative;z-index:2}
.px h1{font-family:'Archivo Black';font-size:clamp(44px,8vw,110px);line-height:.95;text-transform:uppercase;color:var(--creme)}
.px h2{font-family:'Archivo Black';font-size:clamp(36px,6vw,80px);line-height:1;text-transform:uppercase;color:var(--creme)}
.px .r{color:var(--brique);-webkit-text-stroke:2px var(--creme)}
.px p.txt{max-width:560px;color:#f0e3d2;line-height:1.8;font-size:17px;margin:18px auto 36px}
.marker{font-family:'Permanent Marker';color:var(--creme);font-size:clamp(18px,2.6vw,28px);transform:rotate(-2deg);margin:22px 0 32px;display:block}
.marker.vert{color:#7fd6c0}
.tampon{position:absolute;right:7%;top:20%;border:4px solid var(--brique);color:var(--brique);font-family:'Archivo Black';padding:12px 20px;transform:rotate(12deg);font-size:18px;text-transform:uppercase;z-index:3;background:#f2e7d5cc}
.tampon.g{left:7%;right:auto;top:auto;bottom:18%;transform:rotate(-9deg);border-color:var(--vert);color:var(--vert)}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:'Permanent Marker';font-size:15px;color:var(--creme);animation:fl 2s infinite;z-index:3}
@keyframes fl{0%,100%{opacity:.4;transform:translate(-50%,0)}50%{opacity:1;transform:translate(-50%,6px)}}

/* Ticker */
.ticker{background:var(--brique);color:var(--creme);font-family:'Archivo Black';padding:12px 0;overflow:hidden;white-space:nowrap;font-size:17px;letter-spacing:2px;border-top:3px solid var(--creme);border-bottom:3px solid var(--creme);position:relative;z-index:5}
.ticker.creme{background:var(--creme);color:var(--brique);border-color:var(--brique)}

/* Sections */
section.bloc-rose{padding:90px 36px;position:relative;overflow:hidden}
.centre{max-width:1150px;margin:auto}
h2.titre{font-family:'Archivo Black';font-size:clamp(32px,5vw,62px);text-transform:uppercase;text-align:center;margin-bottom:12px;color:var(--creme);text-shadow:4px 4px 0 var(--brique)}
.sous-marker{font-family:'Permanent Marker';color:var(--creme);text-align:center;font-size:21px;transform:rotate(-1.5deg);margin-bottom:50px;display:block}

/* Cartes crème */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grille.deux{grid-template-columns:repeat(2,1fr)}
.carte{border:3px solid var(--brun);box-shadow:8px 8px 0 var(--brique);background:var(--creme);transition:.15s}
.carte:nth-child(2){box-shadow:8px 8px 0 var(--brun)}
.carte:nth-child(3){box-shadow:8px 8px 0 var(--vert)}
.carte:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--brun)}
.carte img{width:100%;height:230px;object-fit:cover;display:block;border-bottom:3px solid var(--brun)}
.carte .in{padding:24px}
.carte h3{font-family:'Archivo Black';font-size:22px;text-transform:uppercase;color:var(--brique)}
.carte p{margin:10px 0 0;color:var(--brun2);font-size:15px;line-height:1.6}
.carte .lien{display:inline-block;margin-top:14px;font-weight:500;text-transform:uppercase;font-size:13px;letter-spacing:1px;color:var(--vert);border-bottom:2px solid var(--vert)}

/* Panneau crème pleine largeur (texte SEO, contenu) */
.panneau{max-width:980px;margin:0 auto;background:var(--creme);border:3px solid var(--brun);box-shadow:10px 10px 0 var(--brique);padding:50px}
.panneau.v{box-shadow:10px 10px 0 var(--vert)}
.panneau h2{font-family:'Archivo Black';font-size:clamp(24px,3.5vw,38px);text-transform:uppercase;color:var(--brique);margin-bottom:18px}
.panneau h3{font-family:'Archivo Black';font-size:20px;text-transform:uppercase;color:var(--brun);margin:28px 0 10px}
.panneau p{color:var(--brun2);line-height:1.9;font-size:16px;margin-bottom:14px}
.panneau .mk{font-family:'Permanent Marker';color:var(--vert);font-size:20px;display:block;margin:6px 0 18px;transform:rotate(-1deg)}

/* Menu (cartes food/drinks) */
.menu-cat{max-width:980px;margin:0 auto 40px;background:var(--creme);border:3px solid var(--brun);box-shadow:8px 8px 0 var(--brique);padding:40px}
.menu-cat:nth-child(even){box-shadow:8px 8px 0 var(--vert)}
.menu-cat h2{font-family:'Archivo Black';font-size:clamp(24px,3.5vw,36px);text-transform:uppercase;color:var(--brique);margin-bottom:6px}
.menu-cat .note{font-family:'Permanent Marker';color:var(--vert);font-size:17px;margin-bottom:24px;display:block;transform:rotate(-1deg)}
.plats{display:grid;grid-template-columns:1fr 1fr;gap:18px 36px}
.plat{border-bottom:2px dashed #c9a896;padding-bottom:12px}
.plat .l1{display:flex;justify-content:space-between;gap:14px;font-weight:500;text-transform:uppercase;font-size:15px;letter-spacing:.5px;color:var(--brun)}
.plat .prix{color:var(--brique);font-family:'Archivo Black';white-space:nowrap}
.plat .desc{font-size:13.5px;color:#8a6e5e;line-height:1.5;margin-top:4px}

/* Bandeau CTA */
.cta-bandeau{padding:0 36px 90px}
.cta-bandeau .box{max-width:1150px;margin:auto;background:var(--creme);border:3px solid var(--brun);box-shadow:10px 10px 0 var(--vert);padding:44px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;position:relative;overflow:hidden}
.cta-bandeau .box.brique-sh{box-shadow:10px 10px 0 var(--brique)}
.cta-bandeau .box::after{content:attr(data-emoji);position:absolute;right:-14px;bottom:-22px;font-size:120px;opacity:.12;transform:rotate(-10deg)}
.cta-bandeau h2{font-family:'Archivo Black';font-size:clamp(26px,4vw,46px);color:var(--brique);text-transform:uppercase;line-height:1}
.cta-bandeau .mk{font-family:'Permanent Marker';color:var(--vert);font-size:19px;display:block;margin:10px 0 8px;transform:rotate(-1deg)}
.cta-bandeau p{color:var(--brun2);font-size:15px;line-height:1.7}
.cta-bandeau .droite{text-align:center;position:relative;z-index:2}
.cta-bandeau .note{font-size:12px;color:#8a6e5e;display:block;margin-top:12px;text-transform:uppercase;letter-spacing:1px}

/* Formulaires */
.form{display:grid;gap:16px}
.form .deux-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{font-weight:500;text-transform:uppercase;font-size:12px;letter-spacing:1px;color:var(--brun)}
.form input,.form select,.form textarea{width:100%;background:#fff;border:3px solid var(--brun);padding:13px;font-family:'Oswald';font-size:15px;color:var(--brun);margin-top:6px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--brique)}
.form .rgpd{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--brun2);line-height:1.6}
.form .rgpd input{width:16px;height:16px;margin-top:3px;accent-color:var(--brique)}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1250px;margin:auto}
.galerie img{width:100%;height:260px;object-fit:cover;border:3px solid var(--brun);box-shadow:6px 6px 0 var(--brique);transition:.15s}
.galerie img:nth-child(3n){box-shadow:6px 6px 0 var(--vert)}
.galerie img:nth-child(3n+1){box-shadow:6px 6px 0 var(--brun)}
.galerie img:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--brun)}

/* News & Events */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1150px;margin:auto}
.article{background:var(--creme);border:3px solid var(--brun);box-shadow:8px 8px 0 var(--brique);transition:.15s}
.article:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--brique)}
.article img{width:100%;height:200px;object-fit:cover;border-bottom:3px solid var(--brun)}
.article .in{padding:22px}
.article .date{font-family:'Permanent Marker';color:var(--vert);font-size:15px}
.article h3{font-family:'Archivo Black';font-size:19px;text-transform:uppercase;color:var(--brique);margin:8px 0}
.article p{font-size:14px;color:var(--brun2);line-height:1.6}

/* FAQ */
.faq{max-width:880px;margin:auto;display:grid;gap:16px}
.faq details{background:var(--creme);border:3px solid var(--brun);box-shadow:6px 6px 0 var(--brique)}
.faq summary{cursor:pointer;font-family:'Archivo Black';font-size:16px;text-transform:uppercase;color:var(--brun);padding:20px 24px;list-style:none}
.faq summary::before{content:'+ ';color:var(--brique)}
.faq details[open] summary::before{content:'− '}
.faq details p{padding:0 24px 20px;color:var(--brun2);line-height:1.8;font-size:15px}

/* CTA flottants */
.flotteurs{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:10px}
.flotteurs a{font-family:'Archivo Black';font-size:12px;padding:12px 18px;border:3px solid var(--brun);color:var(--creme);background:var(--brique);box-shadow:0 5px 0 var(--brun);transition:.1s;text-align:center;text-transform:uppercase}
.flotteurs a:hover{transform:translateY(3px);box-shadow:0 2px 0 var(--brun)}
.flotteurs a.jeu{background:var(--vert);animation:pulse 2s infinite}
.flotteurs a.tel{background:var(--creme);color:var(--brique)}
@keyframes pulse{0%,100%{box-shadow:0 5px 0 var(--brun),0 0 0 0 #1e6e5c55}50%{box-shadow:0 5px 0 var(--brun),0 0 0 14px transparent}}

/* Infos pratiques */
.infos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1150px;margin:auto}
.info{background:var(--creme);border:3px solid var(--brun);box-shadow:6px 6px 0 var(--brique);padding:28px;text-align:center}
.info h3{font-family:'Archivo Black';font-size:18px;text-transform:uppercase;color:var(--brique);margin-bottom:10px}
.info p{color:var(--brun2);line-height:1.8;font-size:15px}
.info a{color:var(--vert);font-weight:500}

/* Footer */
footer{padding:50px 36px 30px;font-size:14px;color:var(--creme);letter-spacing:.5px;border-top:3px solid var(--creme);background:#7e3a2a}
.f-grille{max-width:1150px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px}
footer h4{font-family:'Archivo Black';font-size:13px;text-transform:uppercase;color:var(--creme);margin-bottom:12px}
footer a:hover{color:#e0a39a}
footer li{list-style:none;margin-bottom:8px;color:#f0d8cc}
footer .bas{max-width:1150px;margin:36px auto 0;padding-top:18px;border-top:1px solid #9c5a48;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:#e0bcab;text-transform:uppercase}
@media(max-width:950px){
nav{display:none}
.grille,.grille.deux,.news,.infos{grid-template-columns:1fr}
.plats{grid-template-columns:1fr}
.px{background-attachment:scroll}
.tampon{display:none}
.cta-bandeau .box{grid-template-columns:1fr}
.galerie{grid-template-columns:repeat(2,1fr)}
.f-grille{grid-template-columns:1fr 1fr}
.form .deux-col{grid-template-columns:1fr}
.panneau{padding:30px}
}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border:2px solid var(--creme);border-radius:50%;color:var(--creme);transition:.15s}
.socials a:hover{background:var(--creme);color:var(--brique)}
.socials svg{width:18px;height:18px;display:block}