/* Warner Marrakech — piste « Sticker street » */
:root{
  --fu:#E92675; --fu-vif:#F53070; --bl:#1240B0; --or:#F26A1B; --pk:#F4C6DC; --ink:#111; --wh:#fff;
  --trait:3px solid var(--ink);
  --ombre:6px 6px 0 var(--ink);
  --display:"Bowlby One",Impact,sans-serif;
  --texte:"Instrument Sans",system-ui,sans-serif;
  --main:"Permanent Marker",cursive;
  --gouttiere:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font:400 1.0625rem/1.55 var(--texte);color:var(--wh);background:var(--fu);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:4px solid var(--wh);outline-offset:3px;border-radius:6px}
.sur-blanc :focus-visible,.plat:focus-visible{outline-color:var(--bl)}
.saut{position:absolute;left:-999px}
.saut:focus{left:16px;top:16px;z-index:100;background:var(--wh);color:var(--ink);padding:10px 16px;border-radius:8px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
.t-xl{font-size:clamp(3rem,10.5vw,8.75rem);text-shadow:.055em .055em 0 var(--ink)}
.t-l{font-size:clamp(2.25rem,6.2vw,5rem);text-shadow:.06em .06em 0 var(--ink)}
.t-m{font-size:clamp(1.5rem,3vw,2.25rem);line-height:1}
.sans-ombre{text-shadow:none}
.penche{display:inline-block;transform:rotate(-3deg)}
.manuscrit{font-family:var(--main);font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.05;transform:rotate(-5deg);display:inline-block}
.chapo{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.5;max-width:58ch}
p{max-width:68ch}

.page{max-width:1280px;margin:0 auto;padding-inline:var(--gouttiere)}
.bloc{padding-block:clamp(56px,9vw,128px);position:relative}
.bloc--bleu{background:var(--bl)}
.bloc--noir{background:var(--ink)}
.bloc--blanc{background:var(--wh);color:var(--ink)}
.bloc--rose{background:var(--pk);color:var(--ink)}
.bloc--blanc .t-l,.bloc--rose .t-l{text-shadow:.06em .06em 0 var(--fu)}
.bloc--damier{background:conic-gradient(var(--ink) 25%,var(--wh) 0 50%,var(--ink) 0 75%,var(--wh) 0) 0 0/96px 96px}
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);align-items:center}
.pile>*+*{margin-top:clamp(16px,2vw,28px)}
@media (max-width:820px){.deux{grid-template-columns:1fr}}

/* En-tête */
.entete{position:sticky;top:0;z-index:50;padding:12px var(--gouttiere)}
.barre{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:8px;background:var(--ink);border-radius:999px;padding:8px 10px 8px 22px;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.barre nav{display:contents}
.barre .logo{margin-right:auto;display:block}
.barre .logo img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:4px;list-style:none;padding:0}
.nav a{display:block;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.98rem}
.nav a:hover{background:#2a2a2a}
.nav a[aria-current=page]{background:var(--wh);color:var(--ink)}
.nav .nav-cta a{background:var(--fu);font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:.95rem;padding:11px 20px}
.nav .nav-cta a:hover{background:var(--fu-vif)}
.langue-mobile{display:none;background:var(--ink);color:var(--wh);border:2px solid var(--wh);border-radius:999px;font:400 .95rem var(--display);text-transform:uppercase;text-decoration:none;padding:10px 16px;line-height:normal}
.burger{display:none;background:var(--fu);color:var(--wh);border:0;border-radius:999px;font:400 .95rem var(--display);text-transform:uppercase;padding:12px 18px;cursor:pointer}
@media (max-width:880px){
  .burger,.langue-mobile{display:block}
  .nav .nav-langue{display:none}
  .barre{flex-wrap:wrap;border-radius:28px}
  .barre{padding-left:16px}
  .barre .logo img{height:36px}
  .burger,.langue-mobile{font-size:.85rem}
  .nav{display:none;flex-direction:column;align-items:stretch;width:100%;padding:8px 0 10px}
  .nav.ouvert{display:flex}
  .nav a{font-size:1.15rem;padding:14px 16px}
  .nav .nav-cta a{text-align:center;margin-top:6px}
}

/* Stickers */
.stk{display:inline-block;font-family:var(--display);text-transform:uppercase;text-decoration:none;line-height:1;font-size:clamp(1rem,1.5vw,1.3rem);padding:.85em 1.3em;border:var(--trait);border-radius:12px;background:var(--wh);color:var(--ink);box-shadow:var(--ombre);transform:rotate(var(--r,-3deg));transition:transform .15s,box-shadow .15s;cursor:pointer}
.stk:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.stk:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.stk--bleu{background:var(--bl);color:var(--wh);border-radius:999px}
.stk--rose{background:var(--fu);color:var(--wh)}
.stk--orange{background:var(--or);color:var(--ink);border-radius:999px}
.stk--noir{background:var(--ink);color:var(--wh);border-color:var(--wh);box-shadow:6px 6px 0 var(--fu)}
.actions{display:flex;flex-wrap:wrap;gap:20px 24px;align-items:center}
.etoile{display:grid;place-items:center;text-align:center;width:var(--t,150px);aspect-ratio:1;background:var(--or);color:var(--ink);font:400 clamp(.9rem,1.3vw,1.15rem)/1 var(--display);text-transform:uppercase;transform:rotate(12deg);
  clip-path:polygon(50% 0%,61% 12%,75% 7%,79% 21%,93% 25%,88% 39%,100% 50%,88% 61%,93% 75%,79% 79%,75% 93%,61% 88%,50% 100%,39% 88%,25% 93%,21% 79%,7% 75%,12% 61%,0% 50%,12% 39%,7% 25%,21% 21%,25% 7%,39% 12%)}
.etoile--bleu{background:var(--bl);color:var(--wh)}
.etoile--blanc{background:var(--wh)}
.pastille{display:inline-flex;align-items:center;gap:.55em;background:var(--wh);color:var(--ink);border:var(--trait);border-radius:999px;padding:.45em 1em;font-weight:600;font-size:.95rem;box-shadow:4px 4px 0 var(--ink)}
.pastille::before{content:"";width:.7em;height:.7em;border-radius:50%;background:#19A95B}
.pastille.ferme::before{background:#D21F3C}
.glisse{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.glisse:active{cursor:grabbing}

/* Bandes */
.bande{overflow:hidden;white-space:nowrap;font:400 clamp(1rem,1.8vw,1.5rem)/1 var(--display);text-transform:uppercase;padding:.6em 0;background:var(--ink);color:var(--wh);width:110vw;margin-left:-5vw;transform:rotate(var(--r,-3deg));position:relative;z-index:2}
.bande--blanche{background:var(--wh);color:var(--ink)}
.bande--orange{background:var(--or);color:var(--ink)}
.bande span{display:inline-block;padding-right:.5em;animation:defile var(--v,38s) linear infinite}
.bande--inverse span{animation-direction:reverse}
@keyframes defile{to{transform:translateX(-100%)}}
.bandes{position:relative;margin-block:clamp(-40px,-3vw,-16px);pointer-events:none}
.bandes .bande+.bande{margin-top:-.4em}

/* Héros */
.heros{position:relative;padding-top:clamp(24px,4vw,56px);overflow:hidden}
.heros .deux{align-items:center;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.heros-texte{padding-block:clamp(24px,4vw,64px) clamp(56px,8vw,120px);position:relative;z-index:3}
.heros .t-xl{font-size:clamp(3rem,8.4vw,7.25rem)}
.heros-texte .actions{margin-top:clamp(28px,4vw,48px)}
.heros-img{position:relative;align-self:end}
.heros-img img{width:100%;height:min(80vh,780px);object-fit:cover;object-position:center 45%;-webkit-mask:linear-gradient(90deg,transparent,#000 14%);mask:linear-gradient(90deg,transparent,#000 14%)}
.heros .etoile{position:absolute;z-index:4}
/* Pastilles ancrées à la photo : elles gardent leur place quelle que soit la taille d'écran */
.etoile-a{top:5%;left:-17%}
.etoile-b{--t:130px;bottom:24%;right:-1%;transform:rotate(-10deg)}
@media (max-width:820px){
  .heros .deux{grid-template-columns:1fr}
  .heros-texte{padding-bottom:0}
  .etoile-a{--t:88px;font-size:.72rem;top:12%;left:auto;right:3%}
  .etoile-b{--t:84px;font-size:.7rem;top:58%;bottom:auto;right:6%}
  .heros-img{padding-bottom:30px}
  .heros-img img{width:90%;-webkit-mask:linear-gradient(180deg,transparent,#000 12%),linear-gradient(270deg,transparent,#000 9%);-webkit-mask-composite:source-in;mask:linear-gradient(180deg,transparent,#000 12%),linear-gradient(270deg,transparent,#000 9%);mask-composite:intersect;height:auto;max-height:none;object-fit:contain}
}
.entete-page{padding-block:clamp(40px,7vw,96px) clamp(32px,5vw,72px)}
.entete-page .chapo{margin-top:24px;font-weight:600}

/* Cartes sticker (plats, photos) */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(18px,2.4vw,32px)}
.plat{position:relative;display:flex;flex-direction:column;background:var(--wh);color:var(--ink);border:var(--trait);border-radius:16px;box-shadow:var(--ombre);overflow:hidden;text-decoration:none;transition:transform .15s}
.plat:nth-child(3n+1){--r:-1.2deg}.plat:nth-child(3n+2){--r:.9deg}.plat:nth-child(3n){--r:-.5deg}
.plat{transform:rotate(var(--r))}
.plat:hover{transform:rotate(0) translateY(-4px)}
.plat img{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;object-position:center 72%;background:var(--wh)}
.plat--verre img{aspect-ratio:1;object-fit:contain;object-position:center}
.plat-txt{padding:14px 16px 18px;border-top:var(--trait);flex:1;display:flex;flex-direction:column;gap:6px}
.plat h3{font-size:1.05rem;line-height:1.05}
.plat p{font-size:.92rem;line-height:1.4;color:#444}
.prix{position:absolute;top:12px;right:12px;background:var(--fu);color:var(--wh);font:400 1rem/1 var(--display);padding:.5em .7em;border:var(--trait);border-radius:999px;transform:rotate(6deg)}
.plat.indispo img{filter:grayscale(1);opacity:.5}
.plat.indispo .prix{background:var(--ink)}
.rupture{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) rotate(-10deg);background:var(--ink);color:var(--wh);font:400 .95rem/1 var(--display);text-transform:uppercase;padding:.6em 1em;white-space:nowrap}
.liste-prix{list-style:none;padding:0;columns:2 280px;column-gap:48px}
.liste-prix li{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:2px dotted currentColor;break-inside:avoid;font-weight:600}
.liste-prix li span:first-child{flex:1}
.liste-prix li span:last-child{font-family:var(--display);font-weight:400}

/* La carte */
.rayons{position:sticky;top:76px;z-index:40;background:var(--fu);border-block:var(--trait);padding:10px 0}
.rayons ul{list-style:none;padding:0 var(--gouttiere);display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;max-width:1280px;margin:0 auto}
.rayons ul::-webkit-scrollbar{display:none}
.rayons a{display:block;white-space:nowrap;text-decoration:none;font-weight:600;font-size:.95rem;background:var(--wh);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:8px 16px}
.rayons a:hover,.rayons a.actif{background:var(--ink);color:var(--wh)}
.rayon{padding-block:clamp(40px,6vw,80px);scroll-margin-top:140px}
.rayon:nth-child(even){background:var(--bl)}
.rayon:nth-child(4n+3){background:var(--ink)}
.rayon h2{margin-bottom:clamp(24px,3vw,40px)}
.rayon--liste .page{max-width:980px}

/* Photos */
.photo{border:var(--trait);border-radius:16px;box-shadow:var(--ombre);overflow:hidden;background:var(--wh);transform:rotate(var(--r,0deg))}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--haute{aspect-ratio:3/4}
.photo--large{aspect-ratio:4/3}
.scotch{position:relative}
.scotch::before{content:"";position:absolute;z-index:2;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(255,255,255,.75);border:2px solid var(--ink);transform:rotate(-4deg)}
.mosaique{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);align-items:start}
.mosaique>:nth-child(1){grid-column:1/8}
.mosaique>:nth-child(2){grid-column:8/13;margin-top:12%}
.mosaique>:nth-child(3){grid-column:2/7}
.mosaique>:nth-child(4){grid-column:7/13}
@media (max-width:700px){.mosaique>*{grid-column:1/-1!important;margin-top:0!important}}

/* Journée */
.journee{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(18px,2.4vw,32px)}
.journee li{background:var(--wh);color:var(--ink);border:var(--trait);border-radius:16px;box-shadow:var(--ombre);padding:22px;transform:rotate(var(--r,0))}
.journee li:nth-child(odd){--r:-1deg}.journee li:nth-child(even){--r:1.2deg}
.journee time{display:inline-block;font:400 1.5rem/1 var(--display);background:var(--ink);color:var(--wh);padding:.35em .6em;border-radius:8px;margin-bottom:14px}
.journee h3{font-size:1.25rem;margin-bottom:8px}
.journee p{font-size:.98rem}

/* Infos + formulaire */
.fiche{background:var(--wh);color:var(--ink);border:var(--trait);border-radius:20px;box-shadow:var(--ombre);padding:clamp(22px,3vw,40px)}
.fiche h2,.fiche h3{margin-bottom:14px}
.fiche dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px}
.fiche dt{font-weight:600}
.fiche a:not(.stk){color:var(--bl);font-weight:600}
.horaires{width:100%;border-collapse:collapse}
.horaires th,.horaires td{text-align:left;padding:9px 0;border-bottom:2px dotted var(--ink);font-weight:400}
.horaires td{text-align:right;font-family:var(--display)}
.horaires tr.auj th,.horaires tr.auj td{color:var(--fu)}
.champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.champs .large{grid-column:1/-1}
@media (max-width:560px){.champs{grid-template-columns:1fr}}
label{display:block;font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;color:var(--ink);background:var(--wh);border:var(--trait);border-radius:10px;padding:12px 14px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:4px solid var(--bl);outline-offset:1px}
textarea{min-height:110px;resize:vertical}
.aide{font-size:.9rem;color:#444;margin-top:6px}
.erreur{color:#B3122F;font-weight:600;margin-top:6px;font-size:.92rem}
button.stk{font-size:1.15rem}

/* Pied */
.pied{background:var(--ink);padding-block:clamp(48px,6vw,88px) 32px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,64px)}
@media (max-width:760px){.pied-grille{grid-template-columns:1fr}}
.pied img{width:min(320px,80%)}
.pied h2{font-size:1.1rem;margin-bottom:14px;color:var(--fu)}
.pied ul{list-style:none;padding:0}
.pied li{padding:4px 0}
.pied a{text-decoration:none;border-bottom:2px solid transparent}
.pied a:hover{border-color:var(--fu)}
.pied small{display:block;margin-top:48px;color:#bbb;font-size:clamp(.55rem,3vw,.9rem);white-space:nowrap}

/* 404 */
.perdu{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:48px 96px}
.perdu .photo{width:min(420px,80vw);margin:0 auto 40px}

/* Langue, icônes des réseaux, barre d'accès rapide */
.nav .nav-langue a{border:2px solid #555;padding:8px 12px;font-size:.85rem}
.icone svg{display:block}
.pied li[data-si-lien]{display:inline-block;margin:14px 10px 0 0}
.pied a.icone{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--fu);border:0}
.pied a.icone:hover{background:var(--wh);color:var(--ink)}
.stk.icone{padding:.7em;border-radius:50%}
.stk.icone svg{width:34px;height:34px}
.acces{position:fixed;z-index:60;left:50%;bottom:16px;display:flex;gap:10px;padding:8px;background:var(--ink);border:2px solid var(--wh);border-radius:999px;box-shadow:0 8px 0 rgba(0,0,0,.3);transform:translate(-50%,160%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1.2),visibility .3s}
.acces.visible{transform:translate(-50%,0);visibility:visible}
.acces a{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:var(--ink);transition:transform .15s}
.acces a svg{width:32px;height:32px}
.acces a:hover{transform:scale(1.08) rotate(-6deg)}
.acces-waze{background:#33CCFF}
.acces-whatsapp{background:#25D366}
.acces-tel{background:var(--fu);color:var(--wh)!important}

/* Inscription aux e-mails, annonce et popup (contenus gérés dans l'admin) */
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.lettre{margin-top:clamp(32px,5vw,56px);padding-top:clamp(28px,4vw,44px);border-top:2px solid #333;max-width:620px}
.lettre h2{font-size:1.1rem;margin-bottom:10px;color:var(--fu)}
.lettre-ligne{display:flex;gap:12px;margin:16px 0 12px;flex-wrap:wrap;align-items:center}
.lettre-ligne input{flex:1 1 220px}
.lettre-ligne .stk{font-size:1rem;--r:-2deg}
.lettre-accord{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem;margin:0}
.lettre-accord input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--fu);padding:0}
.lettre-retour{margin-top:12px;font-weight:600}
.lettre--ok .lettre-ligne,.lettre--ok .lettre-accord{display:none}
.annonce{position:relative;z-index:70;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;background:var(--or);color:var(--ink);padding:10px 48px 10px 16px;text-align:center;font-weight:500;border-bottom:var(--trait)}
.annonce p{max-width:none}
.annonce-lien{font-weight:600;text-decoration:underline;white-space:nowrap}
.annonce-fermer,.popup-fermer{position:absolute;right:8px;top:50%;translate:0 -50%;width:34px;height:34px;border:0;border-radius:50%;background:var(--ink);color:var(--wh);font-size:1.3rem;line-height:1;cursor:pointer}
.popup{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(17,17,17,.62)}
.popup-boite{position:relative;width:min(460px,100%);background:var(--wh);color:var(--ink);border:var(--trait);border-radius:20px;box-shadow:var(--ombre);padding:34px 26px 28px;transform:rotate(-1deg);animation:popup-entree .35s cubic-bezier(.2,.9,.3,1.3)}
.popup-boite>*+*{margin-top:14px}
.popup-boite .t-m{padding-right:34px}
.popup-fermer{top:14px;right:14px;translate:none}
.popup .lettre{margin:0;padding:0;border:0}
.popup .lettre-retour,.popup .lettre-accord{color:var(--ink)}
@keyframes popup-entree{from{opacity:0;transform:rotate(-1deg) scale(.9)}}