/* Bar al-Lagoon — beach bar, painted wood tiles, daylight lagoon. RTL (ar-JO), logical properties. */
:root {
  --lagon: #064C55;
  --lagon-nuit: #04363C;
  --bois: #6B3F22;
  --bois-fonce: #4A2A16;
  --ecume: #FFF6E6;
  --hibiscus: #FF4F8B;
  --hib-encre: #2A0714;
  --palmier: #7ED38A;
  --sable: #F4D9A6;
  --bambou: #D2A55A;
  --encre: #2B1A10;
  --lien-clair: #0A6352;
  --focus: #7ED38A;
  --titre: 'Playpen Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --texte: 'Noto Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --bois-tex: linear-gradient(rgba(60, 33, 16, .66), rgba(60, 33, 16, .66)), url(../img/bg-wood-800.webp) center / cover, var(--bois);
  --rayon: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 1.125rem/1.85 var(--texte); color: var(--ecume);
  background: var(--lagon) radial-gradient(circle at 15% 8%, rgba(126, 211, 138, .10), transparent 40%), radial-gradient(circle at 85% 40%, rgba(255, 246, 230, .06), transparent 35%);
  background-color: var(--lagon); overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--palmier); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.45; margin: 0 0 .6em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.saut { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ecume); color: var(--encre); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.saut:focus { top: 12px; }
.kicker { font-weight: 700; font-size: .92rem; color: var(--palmier); margin-bottom: .7em; }
.kicker--sombre { color: var(--lien-clair); }
.lead { font-size: 1.12rem; }
.peint { color: var(--ecume); text-shadow: -3px 3px 0 var(--hibiscus); text-align: center; }
.peint--gauche { text-align: start; }

/* boutons */
.btn { display: inline-block; font: 700 1.05rem/1.4 var(--titre); padding: .75em 1.25em; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; margin: 0 0 .5em; margin-inline-end: .4em; }
.btn--hibiscus { background: var(--hibiscus); color: var(--hib-encre); box-shadow: 0 5px 0 #B0124F; }
.btn--hibiscus:hover { background: #FF6B9E; }
.btn--hibiscus:active { transform: translateY(3px); box-shadow: 0 2px 0 #B0124F; }
.btn--bois { background: var(--bois-tex); color: var(--ecume); box-shadow: 0 5px 0 var(--bois-fonce); }
.btn--lien { background: none; color: var(--ecume); text-decoration: underline; padding-inline: .4em; font-family: var(--texte); font-weight: 700; font-size: .95rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* enseigne (header) */
.enseigne { background: var(--bois-tex); border-bottom: 6px solid var(--bambou); position: relative; z-index: 20; }
.enseigne__planche { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: block; border-radius: 10px; }
.logo svg { display: block; }
.nav-large ul, .nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-large ul { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-large a, .nav-mobile a { color: var(--ecume); text-decoration: none; font-weight: 700; font-size: .92rem; padding: 8px 11px; border-radius: 8px; display: block; }
.nav-large a:hover, .nav-mobile a:hover { background: rgba(255, 246, 230, .12); }
.nav-large a[aria-current], .nav-mobile a[aria-current] { box-shadow: inset 0 -3px 0 var(--palmier); }
.nav-mobile { display: none; position: relative; }
.nav-mobile summary { list-style: none; cursor: pointer; font-family: var(--titre); font-weight: 700; color: var(--hib-encre); background: var(--palmier); padding: 7px 14px; border-radius: 10px; display: flex; align-items: center; gap: 10px; transform: rotate(2deg); }
.nav-mobile summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 3px; background: currentColor; border-radius: 2px; position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; inset-inline-start: 0; }
.burger::before { top: -6px; } .burger::after { top: 6px; }
.nav-mobile nav { position: absolute; inset-inline-end: 0; top: calc(100% + 12px); width: min(290px, calc(100vw - 32px)); background: var(--lagon-nuit); border: 2px solid var(--bambou); border-radius: var(--rayon); padding: 8px; box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }
.nav-mobile a { padding: 12px; font-size: 1rem; }
@media (max-width: 1060px) { .nav-large { display: none; } .nav-mobile { display: block; } }

/* ponton (hero) */
.ponton { position: relative; }
.ponton__img img { width: 100%; height: clamp(300px, 72vh, 760px); object-fit: cover; object-position: 50% 45%; }
.ponton__enseigne { position: relative; margin: -48px 16px 0; padding: 28px 24px 22px; background: var(--bois-tex); border-radius: 18px; border: 2px solid var(--bambou); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.ponton__enseigne::before, .ponton__enseigne::after { content: ""; position: absolute; top: -9px; width: 14px; height: 14px; border-radius: 50%; background: var(--bambou); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25); }
.ponton__enseigne::before { left: 22px; } .ponton__enseigne::after { right: 22px; }
.ponton h1 { font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.4; color: var(--ecume); text-shadow: -3px 3px 0 var(--hibiscus); }
.ponton__cta { margin: 1.3em 0 0; }
@media (min-width: 1000px) {
  .ponton__enseigne { position: absolute; inset-inline-start: max(4vw, calc(50% - 600px)); bottom: 46px; margin: 0; max-width: 640px; transform: rotate(1deg); }
}

/* carte (menu board) */
.carte { max-width: 1240px; margin: 0 auto; padding: 70px 16px 40px; position: relative; }
.rail { height: 22px; border-radius: 11px; margin: 0 auto 30px; max-width: 1100px; background: repeating-linear-gradient(90deg, transparent 0 120px, rgba(74, 42, 22, .55) 120px 125px), linear-gradient(#E9C27A, #B8843A); box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }
.tuiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.tuile { position: relative; background: var(--bois-tex); color: var(--ecume); border-radius: 12px; padding: 22px 20px 18px; border: 2px solid rgba(210, 165, 90, .7); box-shadow: 0 10px 0 rgba(0, 0, 0, .18); }
.tuile::before { content: ""; position: absolute; top: 8px; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%; background: var(--bambou); }
.tuile__eti { display: block; font-size: .9rem; font-weight: 700; color: var(--palmier); margin: 0 0 .5em; }
.tuile__nom { display: block; font: 700 1.3rem/1.4 var(--titre); color: var(--ecume); margin: 0 0 .35em; }
.tuile__note { display: block; font-size: .92rem; margin: 0; }
.tuile__val { font: 700 1.8rem/1.3 var(--titre); color: var(--ecume); margin: 0 0 .3em; }
.tuile__gros { font-size: 1.15rem; line-height: 1.85; margin: 0; max-width: 46ch; }
.tuile--reponse { grid-column: span 8; grid-row: span 2; display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; transform: rotate(.6deg); }
.tuile--reponse > p:first-child { width: 100%; }
.tuile--reponse .tuile__gros { flex: 1 1 300px; }
.tuile__toucan { width: 170px; border-radius: 50%; border: 2px solid var(--palmier); flex: 0 0 auto; }
.tuile--lien { grid-column: span 4; text-decoration: none; transition: transform .2s ease; }
.tuile--lien:hover { transform: rotate(1.5deg) translateY(-3px); }
.tuile--lien:nth-child(odd) { transform: rotate(-.8deg); }
.tuile--lien:nth-child(odd):hover { transform: rotate(-2deg) translateY(-3px); }
.t-rose { background: var(--hibiscus); border-color: #FFB6CF; }
.t-rose .tuile__eti, .t-rose .tuile__nom, .t-rose .tuile__note { color: var(--hib-encre); }
.t-vert { background: var(--palmier); border-color: #CFF5D4; }
.t-vert .tuile__eti, .t-vert .tuile__nom, .t-vert .tuile__note { color: var(--lagon-nuit); }
.tuile--fait { grid-column: span 4; }
.tuile--large { grid-column: span 12; padding: 28px; }
.tuile--large .tuile__nom { font-size: 1.6rem; }
.tuile--large .puces { columns: 2; column-gap: 34px; }
.tuile--large .puces li { break-inside: avoid; }
.carte .tuiles > .tuile--lien:nth-last-child(-n+4) { grid-column: span 3; }
@media (max-width: 800px) {
  .tuiles { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tuile--reponse, .tuile--large { grid-column: span 2; }
  .tuile--lien, .tuile--fait, .carte .tuiles > .tuile--lien:nth-last-child(-n+4) { grid-column: span 1; }
  .tuile--large .puces { columns: 1; }
  .tuile__toucan { width: 120px; }
}
@media (max-width: 420px) { .tuile--fait { grid-column: span 2; } .tuile__nom { font-size: 1.1rem; } }

/* listes communes */
.puces { padding-inline-start: 0; list-style: none; margin: 0 0 1.1em; }
.puces li { position: relative; padding-inline-start: 28px; margin-bottom: .55em; }
.puces li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 13px; height: 13px; border-radius: 50% 50% 0 50%; background: var(--hibiscus); transform: rotate(45deg); }
.ordre { padding-inline-start: 1.4em; margin: 0 0 1.1em; } .ordre li { margin-bottom: .5em; } .ordre li::marker { font-family: var(--titre); color: var(--hibiscus); }
.gestes { list-style: none; counter-reset: g; padding: 0; margin: 0 0 1.2em; display: grid; gap: 14px; }
.gestes li { counter-increment: g; position: relative; padding-block: 14px 6px; padding-inline: 66px 16px; border-radius: 12px; background: rgba(255, 255, 255, .55); border: 2px solid rgba(107, 63, 34, .25); }
.gestes li::before { content: counter(g); position: absolute; inset-inline-start: 14px; top: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--titre); font-size: 1.15rem; background: var(--hibiscus); color: var(--hib-encre); }
.gestes h3 { font-size: 1.08rem; margin: 0 0 .3em; color: var(--bois); }
.bulle { position: relative; background: var(--palmier); color: var(--lagon-nuit); border-radius: 18px 18px 4px 18px; padding: 16px 18px 6px; margin: 0 0 1.3em; }
.bulle__titre { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; margin-bottom: .3em; }
.bulle a { color: var(--lagon-nuit); }
.ticket { border-radius: 22px; background: #FFE1EC; color: var(--hib-encre); padding: 18px 20px 8px; margin: 0 0 1.3em; box-shadow: inset 0 0 0 3px #FFF6E6, inset 0 0 0 4px var(--hibiscus); }
.ticket__titre { font-weight: 700; margin-bottom: .4em; }

/* tables */
.ardoise-wrap { overflow-x: auto; margin: 0 0 1.4em; border-radius: 12px; }
.ardoise { width: 100%; border-collapse: collapse; font-size: .95rem; background: #FBEBD0; color: var(--encre); min-width: 460px; }
.ardoise caption { text-align: start; font-weight: 700; padding: 0 0 8px; color: var(--bois); }
.ardoise thead th { background: var(--bois); color: var(--ecume); text-align: start; padding: 10px 12px; font-weight: 700; }
.ardoise td, .ardoise tbody th { padding: 10px 12px; border-top: 1px solid rgba(107, 63, 34, .2); text-align: start; vertical-align: top; }
.ardoise tbody th { font-weight: 700; color: var(--bois-fonce); }
.ardoise tbody tr:nth-child(even) { background: #F6DFB8; }

/* planches claires (lecture longue) */
.planche { --focus: var(--lien-clair); background: var(--ecume) repeating-linear-gradient(180deg, transparent 0 138px, rgba(107, 63, 34, .035) 138px 140px); color: var(--encre); border-radius: 16px; padding: clamp(22px, 4vw, 44px); border: 2px solid var(--bois); box-shadow: inset 0 0 0 2px var(--bambou), 0 16px 0 rgba(0, 0, 0, .2); }
.planche a { color: var(--lien-clair); }
.planche h2 { color: var(--bois); font-size: clamp(1.45rem, 3vw, 2rem); }
.suite { font-weight: 700; margin: 0; }
.suite a::after { content: " ←"; }

/* bar : comptoir + machine */
.bar { background: var(--sable); color: var(--encre); padding: 0 16px 60px; position: relative; --focus: var(--lien-clair); }
.bar::before { content: ""; display: block; height: 30px; margin: 0 -16px 46px; background: repeating-linear-gradient(90deg, #C99047 0 46px, #8E5C25 46px 49px, #D9AA5E 49px 96px, #8E5C25 96px 99px); box-shadow: 0 6px 0 rgba(74, 42, 22, .25); }
.bar a { color: var(--lien-clair); }
.bar__in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.bar h2 { color: var(--bois); }
.bar .gestes li { background: #FFF1D6; }
.bar .bulle { background: var(--lagon); color: var(--ecume); }
@media (min-width: 1100px) { .bar__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } .bar__intro { position: sticky; top: 20px; } }
.comptoir { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 760px) { .comptoir { grid-template-columns: minmax(0, 1fr) 250px; align-items: start; } }
.machine { --focus: var(--palmier); background: var(--lagon); color: var(--ecume); border-radius: 22px; padding: 18px; border: 2px solid var(--bambou); box-shadow: inset 0 0 0 3px #8E5C25, 0 14px 0 rgba(74, 42, 22, .35); }
.machine a { color: var(--palmier); }
.machine__bandeau { background: var(--hibiscus); color: var(--hib-encre); font-weight: 700; font-size: .9rem; padding: 8px 12px; border-radius: 10px; margin-bottom: 14px; }
.machine__nojs { background: var(--lagon-nuit); padding: 12px; border-radius: 10px; }
.plan fieldset { border: 2px dashed rgba(255, 246, 230, .4); border-radius: 14px; padding: 12px 16px 14px; margin: 0 0 14px; min-width: 0; }
.plan legend { font-family: var(--titre); font-weight: 700; padding: 0 6px; font-size: 1.1rem; }
.plan label { display: block; font-weight: 700; margin-bottom: 6px; }
.plan select { font: inherit; padding: 9px 12px; border-radius: 10px; border: 2px solid var(--palmier); background: var(--ecume); color: var(--encre); margin-bottom: 12px; min-width: 160px; }
.plan__q { font-weight: 700; margin: 4px 0 6px; }
.plan__choix { display: flex; flex-wrap: wrap; gap: 8px; }
.plan__choix label { font-weight: 400; background: var(--lagon-nuit); border: 2px solid rgba(126, 211, 138, .5); border-radius: 999px; padding: 7px 14px; cursor: pointer; margin: 0; }
.plan__choix label:has(input:checked) { border-color: var(--palmier); background: #0B5E52; }
.plan__choix input { accent-color: var(--hibiscus); margin-inline-end: 6px; }
.jeu__compteurs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.jeu__compteurs p { margin: 0; display: flex; flex-direction: column; }
.jeu__compteurs .lab { font-size: .85rem; color: var(--palmier); font-weight: 700; }
.jeu__compteurs output, .jeu__compteurs span:not(.lab) { font: 700 1.5rem/1.3 var(--titre); }
.rouleaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--bois-tex); padding: 10px; border-radius: 16px; position: relative; }
.rouleaux::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 4px; margin-top: -2px; background: var(--palmier); border-radius: 2px; opacity: .85; pointer-events: none; }
.case { background: var(--ecume); border-radius: 12px; aspect-ratio: 1.15; display: grid; place-items: center; overflow: hidden; }
.case svg { width: 62%; height: 62%; }
.case.gagne { box-shadow: inset 0 0 0 4px var(--palmier); }
.case.scatter { box-shadow: inset 0 0 0 4px #FFD25A; }
.tourne svg { animation: tourne .12s linear infinite; }
@keyframes tourne { from { transform: translateY(-30%); opacity: .6; } to { transform: translateY(30%); opacity: .6; } }
.jeu__res { min-height: 3.2em; margin: 12px 0 8px; font-weight: 700; }
.jeu__boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.btn--spin { font-size: 1.25rem; padding: .75em 1.6em; }
.resume { background: var(--ecume); color: var(--encre); border-radius: 14px; padding: 16px 18px 6px; margin: 12px 0; }
.resume h3 { color: var(--bois); }
.resume ul { padding-inline-start: 1.2em; margin: 0 0 .8em; }
.journal-wrap { max-height: 260px; overflow: auto; margin-top: 12px; border-radius: 10px; background: var(--lagon-nuit); }
.journal { width: 100%; border-collapse: collapse; font-size: .9rem; }
.journal caption { text-align: start; padding: 8px 10px; font-weight: 700; }
.journal th, .journal td { padding: 6px 10px; text-align: start; border-top: 1px solid rgba(255, 246, 230, .12); }
.journal thead th { position: sticky; top: 0; background: var(--lagon-nuit); color: var(--palmier); }
.journal tr.g td:last-child { color: var(--palmier); font-weight: 700; }
.journal tr.f td:last-child { color: #FFD25A; font-weight: 700; }
.bareme { background: var(--bois-tex); color: var(--ecume); border-radius: 16px; padding: 20px 18px 8px; border: 2px solid var(--bambou); transform: rotate(-1deg); }
.bareme__titre { font-family: var(--titre); font-weight: 700; font-size: 1.25rem; margin-bottom: .2em; }
.bareme__note { font-size: .85rem; color: #F6E3C4; }
.bareme ul { list-style: none; padding: 0; margin: 0 0 1em; }
.bareme li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(255, 246, 230, .25); font-size: .88rem; }
.tri { display: flex; gap: 2px; background: var(--ecume); border-radius: 8px; padding: 3px 5px; }
.tri svg { width: 22px; height: 22px; }
.bareme__regle { font-size: .88rem; }

/* ardoise des gains (home) */
.ardoise-sec { max-width: 980px; margin: 0 auto; padding: 70px 16px 30px; }

/* cocktails */
.cocktails__in { max-width: 1240px; margin: 0 auto; padding: 50px 16px; display: grid; gap: 30px; align-items: center; }
.cocktails__img img { border-radius: 24px; transform: rotate(1.2deg); }
@media (min-width: 900px) { .cocktails__in { grid-template-columns: 1fr 1fr; } }

/* happy hour + planche de surf */
.happy { background: linear-gradient(180deg, transparent, rgba(4, 54, 60, .6)); padding: 40px 16px 70px; }
.happy__in { max-width: 1100px; margin: 0 auto; display: grid; gap: 30px; align-items: start; }
.happy h2 { color: var(--hibiscus); font-size: clamp(1.9rem, 4vw, 2.8rem); }
.happy__img { width: 230px; border-radius: 20px; margin-top: 10px; }
@media (min-width: 760px) { .happy__in { grid-template-columns: 1fr 300px; } }

.surf { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 64px; }
.surf__cordes { position: absolute; top: 0; left: 50%; width: 120px; height: 72px; margin-left: -60px; }
.surf__cordes::before, .surf__cordes::after { content: ""; position: absolute; top: 0; width: 6px; height: 78px; border-radius: 3px; background: repeating-linear-gradient(45deg, #E8C88E 0 4px, #9A7240 4px 8px); }
.surf__cordes::before { left: 22px; transform: rotate(14deg); transform-origin: top; } .surf__cordes::after { right: 22px; transform: rotate(-14deg); transform-origin: top; }
.surf__planche { position: relative; width: 190px; min-height: 500px; border-radius: 50% / 17%; background: linear-gradient(270deg, var(--hibiscus) 0 18%, var(--ecume) 18% 20%, var(--palmier) 20% 30%, var(--ecume) 30% 32%, var(--hibiscus) 32%); box-shadow: inset 10px 0 0 rgba(176, 18, 79, .25), 0 20px 30px rgba(0, 0, 0, .35); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 54px 40px 0 18px; color: var(--hib-encre); text-align: center; }
.surf__eti { font-size: .9rem; font-weight: 700; margin: 0; }
.surf__code { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 1.7rem/1.3 var(--titre); margin: 14px 0; }
.surf__aileron { background: var(--hib-encre); color: var(--ecume); font-size: .74rem; font-weight: 700; padding: 10px 10px 16px; border-radius: 14px 14px 40px 40px; margin: 0; margin-block-end: -6px; margin-inline-start: -22px; width: 118px; }
.surf__tag { position: relative; margin-top: 18px; background: var(--bois-tex); color: var(--ecume); font-family: var(--titre); font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 8px 8px 22px 8px; border: 2px solid var(--bambou); transform: rotate(4deg); }
.surf__tag::before { content: ""; position: absolute; top: -18px; inset-inline-start: 24px; width: 4px; height: 20px; background: #C9A26A; border-radius: 2px; }
.surf__tag:hover { transform: rotate(-2deg); }
.surf--inline { padding-top: 0; margin: 10px 0 1.6em; }
.surf--inline .surf__cordes { display: none; }
.surf--inline .surf__planche, .surf__planche:is(.x) { width: 100%; min-height: 0; border-radius: 22% / 50%; padding: 20px 26px 0; background: linear-gradient(180deg, var(--hibiscus) 0 22%, var(--ecume) 22% 25%, var(--palmier) 25% 36%, var(--ecume) 36% 39%, var(--hibiscus) 39%); }
.surf--inline .surf__code { writing-mode: horizontal-tb; transform: none; font-size: clamp(1.15rem, 3vw, 1.6rem); margin: 18px 0 8px; }
.surf--inline .surf__aileron { margin: 0 0 -4px; margin-inline-start: 0; width: auto; border-radius: 14px 14px 0 0; padding: 8px 18px; }
.surf--inline .surf__tag { align-self: center; }
@media (max-width: 759px) {
  .surf:not(.surf--inline) { padding-top: 0; }
  .surf:not(.surf--inline) .surf__cordes { display: none; }
  .surf:not(.surf--inline) .surf__planche { width: 100%; min-height: 0; border-radius: 24% / 50%; padding: 20px 22px 0; background: linear-gradient(180deg, var(--hibiscus) 0 22%, var(--ecume) 22% 25%, var(--palmier) 25% 36%, var(--ecume) 36% 39%, var(--hibiscus) 39%); }
  .surf:not(.surf--inline) .surf__code { writing-mode: horizontal-tb; transform: none; font-size: 1.35rem; margin: 18px 0 8px; }
  .surf:not(.surf--inline) .surf__aileron { margin: 0 0 -4px; margin-inline-start: 0; width: auto; border-radius: 14px 14px 0 0; padding: 8px 18px; }
}

/* recettes */
.recettes { max-width: 1240px; margin: 0 auto; padding: 60px 16px; }
.recettes__chapo { text-align: center; max-width: 52ch; margin: 0 auto 30px; }
.recettes__grille { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.recette { background: var(--bois-tex); border-radius: 16px; overflow: hidden; border: 2px solid var(--bambou); padding-bottom: 6px; }
.recette:nth-child(2) { transform: translateY(18px); }
.recette img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.recette__eti { margin: 16px 18px 6px; font-size: .9rem; font-weight: 700; color: var(--palmier); }
.recette h3 { margin: 0 18px 10px; font-size: 1.2rem; line-height: 1.5; }
.recette h3 a { color: var(--ecume); text-decoration: none; }
.recette h3 a:hover { text-decoration: underline; }
.recette > p:last-child { margin: 0 18px 14px; font-size: .95rem; }
@media (max-width: 700px) { .recette:nth-child(2) { transform: none; } }

/* panneau: legal frame */
.panneau-sec { padding: 30px 16px 70px; }
.panneau { --focus: var(--lien-clair); max-width: 820px; margin: 0 auto; background: var(--palmier); color: var(--lagon-nuit); padding: 30px clamp(20px, 4vw, 40px) 14px; border-radius: 12px; border: 2px solid var(--bois); position: relative; transform: rotate(-.5deg); }
.panneau::before, .panneau::after { content: ""; position: absolute; bottom: -62px; width: 16px; height: 56px; background: var(--bois); border-radius: 0 0 4px 4px; }
.panneau::before { left: 18%; } .panneau::after { right: 18%; }
.panneau h2 { color: var(--lagon-nuit); }
.panneau .bulle { background: var(--lagon-nuit); color: var(--ecume); }

/* sous-verres (FAQ) */
.comptoir-faq { max-width: 1240px; margin: 0 auto; padding: 40px 16px 70px; }
.sous-verres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 22px; justify-items: center; align-items: start; }
.sous-verre { width: min(100%, 300px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 14%; box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .25), inset 0 0 0 11px rgba(0, 0, 0, .12), 0 10px 0 rgba(0, 0, 0, .18); }
.sous-verre summary { cursor: pointer; font: 700 1.04rem/1.5 var(--titre); list-style: none; border-radius: 10px; padding: 4px; }
.sous-verre summary::-webkit-details-marker { display: none; }
.sous-verre summary::after { content: "اقلب الكأس"; display: block; font: 700 .85rem/1.4 var(--texte); margin-top: 10px; opacity: .85; }
.sous-verre[open] { grid-column: 1 / -1; width: min(100%, 760px); aspect-ratio: auto; border-radius: 34px; text-align: start; place-items: start; padding: 26px 30px 10px; animation: retourne .45s ease; }
.sous-verre[open] summary::after { content: "أعد الكأس إلى مكانها"; }
.sous-verre p { margin: 12px 0 14px; }
.sv-0 { background: var(--hibiscus); color: var(--hib-encre); --focus: var(--hib-encre); }
.sv-1 { background: var(--palmier); color: var(--lagon-nuit); --focus: var(--lagon-nuit); }
.sv-2 { background: var(--bois-tex); color: var(--ecume); }
@keyframes retourne { from { transform: perspective(800px) rotateY(-80deg); } to { transform: none; } }

/* coucher de soleil */
.coucher { position: relative; overflow: hidden; padding: 90px 16px 80px; background: linear-gradient(180deg, var(--lagon) 0%, #F47F52 30%, #FF4F8B 55%, #5A2340 80%, var(--lagon-nuit) 100%); }
.coucher__soleil { position: absolute; left: 50%; top: 40px; width: 300px; height: 300px; margin-left: -150px; border-radius: 50%; background: radial-gradient(circle, #FFE07A 0 55%, rgba(255, 224, 122, 0) 70%); }
.coucher__in { position: relative; max-width: 760px; margin: 120px auto 0; background: rgba(4, 54, 60, .92); border-radius: 22px; padding: clamp(22px, 4vw, 40px); border: 2px solid var(--bambou); }
.coucher h2 { color: var(--ecume); text-shadow: -3px 3px 0 var(--hibiscus); }

/* ponton bas (footer) */
.ponton-bas { background: repeating-linear-gradient(90deg, #4A2A16 0 140px, #3A2010 140px 143px), #4A2A16; color: var(--ecume); border-top: 8px solid var(--bambou); }
.ponton-bas__in { max-width: 1240px; margin: 0 auto; padding: 40px 16px 30px; display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); font-size: .95rem; }
.ponton-bas__in > .ponton-bas__col:first-child { grid-column: span 1; }
@media (min-width: 900px) { .ponton-bas__in { grid-template-columns: 2fr 1fr 1fr; } }
.ponton-bas__marque { font: 700 1.6rem/1.3 var(--titre); color: var(--ecume); text-shadow: -2px 2px 0 var(--hibiscus); }
.ponton-bas__titre { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; color: var(--palmier); }
.ponton-bas ul { list-style: none; padding: 0; margin: 0; }
.ponton-bas li { margin-bottom: 6px; }
.ponton-bas a { color: var(--ecume); }
.age { display: inline-block; background: var(--hibiscus); color: var(--hib-encre); border-radius: 6px; padding: 0 7px; margin-inline-end: 4px; }
.mail { font-weight: 700; word-break: break-all; }
.petit { font-size: .85rem; color: #EAD6B8; }

/* pages recette (guides) */
.recette-tete { max-width: 1240px; margin: 0 auto; padding: 36px 16px 20px; display: grid; gap: 26px; align-items: center; }
.recette-tete__img img { border-radius: 22px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.recette-tete h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.45; text-shadow: -3px 3px 0 var(--hibiscus); }
@media (min-width: 900px) { .recette-tete { grid-template-columns: 1fr 1.05fr; } .recette-tete__img { order: 2; } .recette-tete__img img { transform: rotate(-1.4deg); } }
.recette-corps { max-width: 1240px; margin: 0 auto; padding: 20px 16px 40px; display: grid; gap: 26px; align-items: start; }
@media (min-width: 1000px) { .recette-corps { grid-template-columns: 270px minmax(0, 1fr); } .ingredients { position: sticky; top: 20px; } }
.ingredients { background: var(--bois-tex); border-radius: 14px; padding: 20px 18px 8px; border: 2px solid var(--bambou); }
.ingredients__titre { font-family: var(--titre); font-weight: 700; font-size: 1.15rem; }
.ingredients ol { padding-inline-start: 1.3em; margin: 0 0 1em; }
.ingredients li { margin-bottom: .55em; font-size: .94rem; }
.ingredients a { color: var(--ecume); }
.ingredients li::marker { color: var(--palmier); font-weight: 700; }
.planche--longue { max-width: 800px; }
.planche--longue section + section { margin-top: 2.4em; }
.planche--longue section { scroll-margin-top: 20px; }
.en-bref { background: var(--lagon); color: var(--ecume); border-radius: 16px; padding: 20px 22px 6px; margin-bottom: 2em; --focus: var(--palmier); }
.en-bref__titre { font-family: var(--titre); font-weight: 700; color: var(--palmier); font-size: 1.1rem; margin-bottom: .3em; }
.sous-verres--page { justify-items: start; }
.autres { max-width: 1240px; margin: 0 auto; padding: 10px 16px 60px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.autres__lien { display: block; background: var(--bois-tex); color: var(--ecume); text-decoration: none; font: 700 1.2rem/1.4 var(--titre); padding: 18px; border-radius: 12px; border: 2px solid var(--bambou); }
.autres__lien span { display: block; font: 700 .88rem/1.4 var(--texte); color: var(--palmier); margin-bottom: 6px; }
.autres__lien--bar { background: var(--hibiscus); color: var(--hib-encre); border-color: #FFB6CF; }
.autres__lien--bar span { color: var(--hib-encre); }
.autres__lien:hover { transform: rotate(1deg); }

/* pages simples */
.page-tete { max-width: 900px; margin: 0 auto; padding: 50px 16px 26px; text-align: center; }
.page-tete h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.45; text-shadow: -3px 3px 0 var(--hibiscus); }
.page-grille { max-width: 1180px; margin: 0 auto; padding: 0 16px 70px; display: grid; gap: 30px; justify-content: center; }
.page-grille .planche--longue { width: 100%; }
@media (min-width: 950px) { .page-grille--img { grid-template-columns: minmax(0, 800px) 320px; align-items: start; } .cote { position: sticky; top: 20px; } }
.cote img { border-radius: 24px; max-width: 320px; margin: 0 auto; transform: rotate(-2deg); }
.page-responsible .planche { border-color: var(--lagon-nuit); }
.page-responsible .gestes li::before { background: var(--palmier); color: var(--lagon-nuit); }

/* 404 */
.perdu { max-width: 1000px; margin: 0 auto; padding: 70px 16px 90px; display: grid; gap: 30px; align-items: center; }
.perdu img { width: 260px; border-radius: 50%; margin: 0 auto; }
.perdu h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.45; text-shadow: -3px 3px 0 var(--hibiscus); }
@media (min-width: 760px) { .perdu { grid-template-columns: 280px 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* corrections de spécificité */
.planche .surf__tag, .bar .surf__tag { color: var(--ecume); --focus: var(--lien-clair); }
.sous-verres--page { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.sous-verres--page .sous-verre:not([open]) { width: min(100%, 240px); }
.sous-verres--page .sous-verre summary { font-size: 1rem; }
.happy__img { width: 100%; max-width: 340px; }
.recette-corps, .recette-tete { grid-template-columns: minmax(0, 1fr); }
.page-grille { grid-template-columns: minmax(0, 800px); }
.planche, .ingredients { min-width: 0; }
@media (min-width: 900px) { .recette-tete { grid-template-columns: 1fr 1.05fr; } }
@media (min-width: 1000px) { .recette-corps { grid-template-columns: 270px minmax(0, 1fr); } }
@media (min-width: 950px) { .page-grille--img { grid-template-columns: minmax(0, 800px) 320px; } }

/* RTL helpers: Latin runs (English keywords, game terms, emails) stay left-to-right */
bdi[dir="ltr"] { unicode-bidi: isolate; }
.mail[dir="ltr"] { text-align: right; }

/* ---------- ref CTA (2026-11-03): hibiscus button, wax code, surfboard tag, mobile dock ---------- */
.ponton__ref { display: grid; justify-items: start; gap: .5rem; margin-top: 1.1em; }
.btn--ref { font-size: 1.25rem; padding: .8em 1.9em; margin: 0; min-height: 56px; box-shadow: 0 6px 0 #B0124F, 0 0 0 3px rgba(255, 246, 230, .55); }
.ponton__code { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-weight: 700; color: var(--ecume); }
.wax, .surf__wax [data-code] { font: 700 1.1rem/1.3 ui-monospace, 'Consolas', monospace; color: var(--hib-encre); background: var(--sable); border: 2px dashed var(--bois-fonce); border-radius: 8px; padding: .1rem .6rem; user-select: all; }
.ponton__fine { margin: 0; font-size: .85rem; color: var(--sable); }
.ponton__cta { margin-top: .9em; }
.btn--petit { font-size: .95rem; padding: .5em 1em; }
.copy { font: 700 .88rem var(--texte); color: inherit; background: transparent; border: 2px solid currentColor; border-radius: 999px; padding: .25rem .85rem; min-height: 36px; cursor: pointer; }
.copy:hover { background: rgba(255, 246, 230, .15); }
.copy-st { font-size: .85rem; font-weight: 700; color: var(--palmier); }
.surf .copy-st { color: var(--hib-encre); }
.surf__wax { margin: 0 0 .4rem; }
.surf__wax [data-code] { display: inline-block; background: var(--ecume); font-size: 1.15rem; }
.surf__copy { margin: 0 0 1rem; color: var(--hib-encre); }
.surf__copy .copy { background: rgba(255, 246, 230, .7); }
.surf__go { font-size: 1.15rem; padding: 12px 26px; background: var(--hibiscus); color: var(--hib-encre); border-color: var(--ecume); box-shadow: 0 5px 0 #B0124F; }
.surf__go:hover { color: var(--hib-encre); background: #FF6B9E; }
.surf__note { margin: 1rem 0 0; font-size: .85rem; text-align: center; max-width: 30ch; }
.happy--top { padding-top: 56px; background: linear-gradient(180deg, rgba(4, 54, 60, .6), transparent); }
.dock { display: none; }
@media (max-width: 999px) {
  .ponton__img img { height: clamp(180px, 34vh, 420px); }
  .ponton__enseigne { display: flex; flex-direction: column; padding-top: 22px; }
  .ponton__enseigne .kicker { order: 1; } .ponton__enseigne h1 { order: 2; } .ponton__ref { order: 3; margin: .2em 0 1em; } .ponton__enseigne .lead { order: 4; } .ponton__cta { order: 5; }
}
@media (max-width: 760px) {
  .ponton h1 { font-size: 1.5rem; margin-bottom: .3em; }
  .btn--ref { width: 100%; text-align: center; }
  body.has-dock { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .dock {
    position: fixed; z-index: 40; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: .55rem;
    padding: .5rem 12px calc(.5rem + env(safe-area-inset-bottom));
    background: var(--bois-tex); border-top: 3px solid var(--bambou); box-shadow: 0 -10px 26px rgba(0, 0, 0, .45); color: var(--ecume);
  }
  .dock p { margin: 0; white-space: nowrap; }
  .dock__code { font-size: .8rem; font-weight: 700; }
  .dock__code bdi { font: 700 .95rem ui-monospace, 'Consolas', monospace; color: var(--sable); }
  .dock__go { flex: 1; min-height: 46px; display: grid; place-items: center; white-space: nowrap; padding: 0 .8rem; border-radius: 999px; font: 700 1rem/1 var(--titre); color: var(--hib-encre); background: var(--hibiscus); text-decoration: none; box-shadow: 0 3px 0 #B0124F; }
  .dock__go:hover { color: var(--hib-encre); }
  .dock__fine { font-size: .72rem; color: var(--sable); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .dock__go { transition: background .2s; } }