@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#173a33;background:#f8f3e8;scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 7% 9%,#e5ceac80 0 2px,transparent 3px) 0 0/28px 28px,linear-gradient(#f8f3e8,#f2e9d9)}a{color:inherit}button{font:inherit}.site-header{max-width:1280px;min-height:80px;margin:auto;padding:10px 28px;display:flex;align-items:center;justify-content:space-between;gap:22px}.mark{display:flex;align-items:center;text-decoration:none;font-size:34px;font-weight:800;letter-spacing:-2px;white-space:nowrap}.mark-dot{color:#d35f3d}.logo-stage{width:43px;height:55px;display:inline-grid;place-items:center;position:relative;margin-right:-2px;font-family:Fraunces,serif;color:#d35f3d}.logo-seven{font-size:53px;transform-origin:center;animation:seven-appear 1.4s ease-out both}.logo-snake{position:absolute;font-size:11px;letter-spacing:0;color:#245a45;font-family:DM Sans,sans-serif;border:2px solid #245a45;border-radius:50%;padding:9px 2px;transform:rotate(-30deg);animation:snake-wrap 1.4s ease-in-out both}@keyframes snake-wrap{0%{opacity:1;transform:translateX(-25px) rotate(-100deg) scale(1.3)}65%{opacity:1;transform:translateX(0) rotate(230deg) scale(.72)}100%{opacity:0;transform:translateX(0) rotate(360deg) scale(.2)}}@keyframes seven-appear{0%,45%{opacity:.15;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-weight:700;font-size:14px}nav a{text-decoration:none}nav a:hover,.community-links a:hover{color:#bd5536}#site-language{border:1px solid #9aab97;background:#fff9ed;color:#134237;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:800}h1,h2{font-family:Fraunces,serif;line-height:1.1}h1{font-size:clamp(42px,5vw,75px);margin:18px 0}h2{font-size:clamp(32px,4vw,51px);margin:10px 0}.eyebrow{letter-spacing:.14em;color:#b55a3d;font-weight:800;font-size:12px}.hero{max-width:1280px;margin:5px auto 0;min-height:530px;display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center;padding:35px 28px 55px}.hero-copy p{font-size:19px;max-width:540px;line-height:1.7;color:#547267}.btn{display:inline-flex;background:#154c3d;color:white;padding:18px 24px;border-radius:14px;text-decoration:none;font-weight:800}.hero-art{height:440px;border-radius:35px;background:linear-gradient(160deg,#f8dca8 0 47%,#e4bc88 47% 72%,#d9976c 72%);position:relative;overflow:hidden;box-shadow:20px 25px 0 #e9dcc4}.building{position:absolute;bottom:65px;left:11%;width:78%;height:250px;background:#f5ecd3;border:7px solid #185040;border-radius:18px 18px 4px 4px;box-shadow:13px 13px 0 #092d25}.awning{height:62px;background:repeating-linear-gradient(90deg,#db6248 0 35px,#fff1d3 35px 70px);border-bottom:5px solid #174b3d}.sign{display:block;text-align:center;margin:8px 0;font-size:20px;font-weight:800;color:#134638}.door{position:absolute;bottom:0;left:14%;width:30%;height:100px;background:#236251;border:6px solid #114c3c;border-radius:55px 55px 0 0}.window{position:absolute;bottom:29px;right:12%;height:74px;width:90px;border-radius:50%;background:#d39a55;text-align:center;padding-top:17px;font-size:30px;border:5px solid #154a3a}.table{position:absolute;bottom:10px;left:34%;width:36%;height:73px;border-radius:50%;background:#174d3f;box-shadow:0 16px 0 #0b382d;color:#fff;font-size:25px;display:flex;align-items:center;justify-content:space-around}.cafe{background:#154a3c;color:white;padding:75px max(28px,calc((100vw - 1224px)/2)) 90px}.section-head p{color:#c8e1d4}.games{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}.game{display:flex;flex-direction:column;gap:14px;min-height:260px;background:#fff8e9;color:#184237;text-decoration:none;border-radius:22px;padding:29px;transition:transform .2s,box-shadow .2s}.game:hover,.places a:hover{transform:translateY(-5px);box-shadow:0 14px 30px #05241c33}.game.rami{background:#f1d9c6}.game-icon{font-size:42px;color:#cb6143}.game-name{font-family:Fraunces,serif;font-size:38px;font-weight:700}.game b{margin-top:auto;color:#a2492e}.district{max-width:1280px;padding:80px 28px;margin:auto}.places{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}.places>a{background:#fff;border-radius:18px;padding:25px;box-shadow:0 5px 20px #302b1720;text-decoration:none;transition:transform .2s,box-shadow .2s}.places span{font-size:34px}.places h3{font-size:22px;margin:15px 0 8px}.places p{line-height:1.5;color:#537165}.places b{color:#a2492e}.community{background:#e7dbc3;padding:65px max(28px,calc((100vw - 1224px)/2));display:grid;grid-template-columns:1.5fr 1fr;gap:30px}.community p{line-height:1.7;max-width:680px}.community-links{display:flex;flex-direction:column;gap:15px;justify-content:center}.community-links a{background:#fff9ef;border:1px solid #d7c6a9;border-radius:12px;padding:16px;text-decoration:none;font-weight:700}footer{display:flex;justify-content:space-between;padding:28px;max-width:1280px;margin:auto;color:#547165}[dir=rtl] .hero-copy,[dir=rtl] .district,[dir=rtl] .community{text-align:right}@media(max-width:850px){.site-header{align-items:flex-start;flex-direction:column;padding:12px 20px}nav{gap:12px;font-size:13px}.hero{grid-template-columns:1fr;padding:35px 20px}.hero-art{height:310px;order:-1}.building{height:205px}.sign{font-size:14px}.games,.places,.community{grid-template-columns:1fr}.cafe,.district,.community{padding:55px 20px}.game{min-height:220px}footer{display:grid;gap:8px}}@media(prefers-reduced-motion:reduce){.logo-seven,.logo-snake{animation:none}.logo-snake{display:none}}

/* La carte du 7 de carreau devient le 7 rouge du nom. */
.mark{gap:0}.logo-stage{width:36px;height:51px;margin-right:-3px}.logo-letters{margin-left:-1px}.logo-card{position:absolute;inset:3px 1px 4px;display:flex;align-items:center;justify-content:center;background:#fff9ef;border:2px solid #c45645;border-radius:5px;box-shadow:0 4px 8px #173a3330;color:#c83832;transform-origin:center;animation:logo-card-fold 1.6s ease-in-out both}.logo-card-corner{position:absolute;top:3px;left:3px;font:800 10px 'DM Sans',sans-serif;white-space:nowrap}.logo-card-corner.bottom{top:auto;left:auto;right:3px;bottom:3px;transform:rotate(180deg)}.logo-card-center{font-size:22px;line-height:1}.logo-stage .logo-seven{color:#cb3431;z-index:1;animation:logo-seven-reveal 1.6s ease-in-out both}.logo-stage .logo-snake{display:none}@keyframes logo-card-fold{0%,52%{opacity:1;transform:translateX(-12px) rotate(-17deg) scale(1)}78%{opacity:.95;transform:translateX(0) rotateY(75deg) scale(.9)}100%{opacity:0;transform:translateX(0) rotateY(90deg) scale(.7)}}@keyframes logo-seven-reveal{0%,55%{opacity:0;transform:scale(.65)}85%,100%{opacity:1;transform:scale(1)}}
.hero-art{background:#183d36 url('/images/khmais-cafe.jpg') center/cover no-repeat;box-shadow:20px 25px 0 #e9dcc4}.hero-art .hero-glow{position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(circle at 28% 30%,#ffce8b25,transparent 37%),linear-gradient(110deg,transparent 35%,#fff6dc17 49%,transparent 62%);animation:hero-light 9s ease-in-out infinite alternate}@keyframes hero-light{from{transform:translateX(-4%);opacity:.55}to{transform:translateX(4%);opacity:1}}
.places>a{overflow:hidden;padding:0}.places>a img{width:100%;height:155px;object-fit:cover;display:block}.places>a h3,.places>a p,.places>a b{display:block;margin-left:23px;margin-right:23px}.places>a h3{margin-top:18px}.places>a b{margin-bottom:23px}.places>a p{min-height:72px}.places>a img{transition:transform .4s ease}.places>a:hover img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.logo-card,.logo-stage .logo-seven,.hero-art .hero-glow{animation:none}.logo-card{display:none}.logo-stage .logo-seven{opacity:1;transform:none}}

/* La même carte que dans la Chkobba introduit le nom du quartier. */
.logo-stage{perspective:130px}.logo-stage .logo-card{inset:3px 1px 4px;width:34px;height:44px;object-fit:fill;padding:0;border:0;background:none;border-radius:4px;animation:logo-card-fold 1.6s ease-in-out both}

/* Tableau animé du Khmaïs Café, inspiré de la première illustration. */
.hero-art{isolation:isolate;background:linear-gradient(180deg,#91b9ad 0%,#f8d4a0 45%,#dc9d72 68%,#ae7655 100%);box-shadow:20px 25px 0 #e9dcc4}
.hero-art>span{position:absolute;display:block}.hero-sky{inset:0 0 28%;background:radial-gradient(circle at 77% 24%,#ffe6a1 0 8%,transparent 20%),linear-gradient(110deg,#bad5bf,#e5c79d 58%,#bb8f81);animation:sky-shift 12s ease-in-out infinite alternate}.hero-mosque{right:3%;bottom:30%;width:45%;height:39%;opacity:.74;filter:drop-shadow(0 6px 3px #475d5655)}.hero-mosque:before{content:'';position:absolute;bottom:0;left:21%;width:67%;height:42%;background:#55796f;border-radius:45% 45% 0 0}.hero-mosque:after{content:'';position:absolute;bottom:38%;left:36%;width:38%;height:40%;background:#55796f;border-radius:100% 100% 4% 4%;clip-path:polygon(50% 0,90% 22%,100% 100%,0 100%,10% 22%)}.hero-mosque i{position:absolute;right:7%;bottom:0;width:12%;height:104%;background:#55796f;border-radius:9px 9px 0 0}.hero-mosque i:before{content:'';position:absolute;left:-37%;top:15%;width:174%;height:8%;background:#55796f;border-radius:60%}.hero-mosque i:after{content:'';position:absolute;left:42%;top:-13%;width:16%;height:15%;background:#55796f}.hero-mosque b{position:absolute;bottom:0;left:9%;width:12%;height:68%;background:#55796f;border-radius:50% 50% 0 0}.hero-floor{inset:66% 0 0;background:repeating-linear-gradient(28deg,#bd855f 0 3px,#d19b72 3px 32px,#b77758 33px 35px),linear-gradient(#cf9d79,#ad704f);transform:perspective(240px) rotateX(30deg) scale(1.3);transform-origin:bottom}.hero-building{left:5%;bottom:21%;width:66%;height:57%;background:repeating-linear-gradient(90deg,#ead1a7 0 28px,#ddbd90 29px 31px);border:7px solid #6c684c;border-radius:24px 24px 3px 3px;box-shadow:14px 14px 0 #704c3f88}.hero-awning{position:absolute;left:-8%;right:-8%;top:0;height:24%;background:repeating-linear-gradient(90deg,#a53e34 0 31px,#f5e3b6 31px 61px);border:4px solid #693e32;border-radius:13px 13px 8px 8px;box-shadow:0 8px 6px #5d473b55;animation:awning-sway 8s ease-in-out infinite alternate}.hero-sign{position:absolute;top:29%;left:7%;right:7%;text-align:center;font:800 clamp(10px,1.5vw,18px) 'DM Sans',sans-serif;color:#184338;white-space:nowrap}.hero-door{position:absolute;left:13%;bottom:0;width:36%;height:51%;border:8px solid #725039;border-radius:65px 65px 0 0;background:radial-gradient(circle at 50% 5%,#f7cc7d,#926640 70%)}.hero-door:before{content:'';position:absolute;inset:12% 15% 0;border:3px solid #b28a5b;border-bottom:0;border-radius:40px 40px 0 0}.hero-window{position:absolute;right:11%;bottom:18%;width:24%;height:34%;background:radial-gradient(circle,#f6c471,#bc7a4c);border:7px solid #76513a;border-radius:55px 55px 4px 4px;box-shadow:0 0 23px #ffcb72aa;animation:window-light 5s ease-in-out infinite alternate}.hero-lantern{right:17%;top:17%;width:11%;height:19%;background:radial-gradient(circle,#f9cc6d,#b56c36 70%);clip-path:polygon(25% 0,75% 0,100% 18%,83% 87%,50% 100%,17% 87%,0 18%);box-shadow:0 0 28px #ffd477;animation:lantern-sway 5s ease-in-out infinite alternate;transform-origin:top}.hero-lantern:before{content:'';position:absolute;top:-30%;left:50%;height:40%;border-left:2px solid #4e463a}.hero-table{left:23%;bottom:5%;width:57%;height:22%;border-radius:50%;background:radial-gradient(ellipse,#246652,#123e34 72%);border:10px solid #8c593c;box-shadow:0 16px 0 #4b372d,0 27px 18px #3e392d77;z-index:2}.hero-cards{position:absolute;left:13%;top:33%;color:#f9ead0;font-size:clamp(13px,2.5vw,31px);letter-spacing:-3px;transform:rotate(-12deg);text-shadow:0 2px 2px #102b23}.hero-cards b{color:#da6b51}.hero-tea{position:absolute;left:52%;top:-13%;width:15%;height:84%;border:3px solid #e9ceaa;border-radius:7px 7px 16px 16px;background:linear-gradient(90deg,#b4532caa,#dc9141dd,#8b3b1caa);box-shadow:inset 4px 0 3px #f5d5a0,0 7px 7px #0c241a66}.hero-tea:before,.hero-tea:after{content:'';position:absolute;left:37%;top:-47%;width:25%;height:40%;border-left:3px solid #f8e6c0b5;border-radius:50%;animation:smoke-rise 3.7s ease-in-out infinite}.hero-tea:after{left:57%;animation-delay:1.7s}.hero-tea i{position:absolute;inset:0;border-top:6px solid #b5cf85;border-radius:inherit}.hero-shisha{position:absolute;right:12%;top:-69%;width:9%;height:143%;background:linear-gradient(90deg,#9e623d,#e3ac6d,#995b36);border-radius:45% 45% 30% 30%;box-shadow:0 5px 5px #10291d88}.hero-shisha:before{content:'';position:absolute;left:-44%;top:-10%;width:188%;height:13%;background:#4b3930;border-radius:50%;box-shadow:0 -9px 0 -3px #be9b72}.hero-shisha:after{content:'';position:absolute;left:50%;top:-80%;width:75%;height:70%;border-left:4px solid #f9ebd2b5;border-radius:50%;animation:smoke-rise 4.3s ease-in-out infinite}.hero-glow{inset:-12%;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#fff1bf22 50%,transparent 65%);animation:hero-light 9s ease-in-out infinite alternate}
@keyframes sky-shift{to{filter:hue-rotate(12deg) brightness(1.06)}}@keyframes awning-sway{to{transform:skewX(-2deg) translateX(2px)}}@keyframes window-light{to{filter:brightness(1.18)}}@keyframes lantern-sway{to{transform:rotate(5deg)}}@keyframes smoke-rise{0%{opacity:0;transform:translateY(7px) rotate(-10deg)}35%{opacity:.8}100%{opacity:0;transform:translateY(-15px) rotate(18deg)}}
@media(max-width:850px){.hero-art{height:310px}.hero-sign{font-size:clamp(9px,2.4vw,18px)}}
@media(prefers-reduced-motion:reduce){.hero-art *{animation:none!important}}

/* La carte s'approche, puis le chiffre reste seul dans le mot. */
.logo-stage{overflow:visible}.logo-stage .logo-card{animation:card-becomes-seven 2.3s cubic-bezier(.22,.6,.25,1) both;transform-origin:23% 16%;z-index:2}.logo-stage .logo-seven{animation:seven-from-card 2.3s ease both}@keyframes card-becomes-seven{0%{opacity:0;transform:translate(-24px,2px) rotate(-23deg) scale(.55);clip-path:inset(0)}25%{opacity:1;transform:translate(-7px,1px) rotate(-10deg) scale(1);clip-path:inset(0)}52%{opacity:1;transform:translate(2px,5px) rotate(0) scale(1.65);clip-path:inset(0)}75%{opacity:1;transform:translate(2px,5px) rotate(0) scale(1.65);clip-path:inset(0 57% 65% 0)}100%{opacity:0;transform:translate(2px,5px) rotate(0) scale(1.65);clip-path:inset(0 57% 65% 0)}}@keyframes seven-from-card{0%,62%{opacity:0;transform:scale(.82)}82%,100%{opacity:1;transform:scale(1)}}

/* Image de café photographique animée comme un plan d'ouverture. */
.hero-art{background:#2e211b;overflow:hidden}.hero-art:before{content:'';position:absolute;inset:-6%;z-index:0;background:url('/images/khmais-cafe-hero-v2.png') center/cover no-repeat;animation:cafe-camera 14s ease-in-out infinite alternate}.hero-art>span{z-index:2}.hero-art>span:not(.hero-glow){display:none}.hero-art .hero-glow{inset:0;z-index:1;background:radial-gradient(circle at 61% 72%,#fff0c21f,transparent 28%),linear-gradient(100deg,transparent 35%,#fff2c015 52%,transparent 72%);animation:cafe-light 7s ease-in-out infinite alternate}.hero-art:after{content:'';position:absolute;left:53%;bottom:23%;width:7%;height:18%;z-index:2;background:radial-gradient(ellipse at 32% 70%,#fff5e290 0 5%,transparent 45%),radial-gradient(ellipse at 67% 33%,#fff5e270 0 4%,transparent 43%);filter:blur(5px);animation:cafe-steam 4.5s ease-out infinite}@keyframes cafe-camera{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.09) translate(-1.4%,.8%)}}@keyframes cafe-light{to{opacity:.4;transform:translateX(4%)}}@keyframes cafe-steam{0%{opacity:0;transform:translateY(13px) scale(.75)}35%{opacity:.7}100%{opacity:0;transform:translateY(-28px) scale(1.35)}}
@media(prefers-reduced-motion:reduce){.logo-stage .logo-card{display:none}.logo-stage .logo-seven{animation:none;opacity:1;transform:none}.hero-art:before,.hero-art:after,.hero-art .hero-glow{animation:none}}
/* The brand always reads 7ouma, including on right-to-left pages. */
.mark{direction:ltr;unicode-bidi:isolate;flex-direction:row}
.logo-stage .logo-seven{color:#cb3431}

/* Wooden wayfinding signs between the entrance and the café. */
.wood-signpost{position:relative;isolation:isolate;display:flex;justify-content:center;align-items:center;gap:12px;max-width:980px;margin:-8px auto 46px;padding:22px 24px 28px;font-size:15px}
.wood-signpost .signpost-post{position:absolute;z-index:-1;top:9px;bottom:0;left:50%;width:15px;transform:translateX(-50%);border:2px solid #664321;border-radius:5px;background:linear-gradient(90deg,#67431f,#bc8851 48%,#764a25);box-shadow:3px 5px 9px #38271832}
.wood-signpost a{min-width:170px;max-width:250px;padding:13px 24px;text-align:center;white-space:nowrap;color:#fff8e8;text-shadow:0 1px 2px #2e170c;background:linear-gradient(165deg,#a76c37,#865023 54%,#70401c);border:2px solid #603818;border-radius:7px;box-shadow:inset 0 2px 2px #ffdfa03d,inset 0 -2px 2px #3b220d77,3px 6px 8px #35271538;transition:transform .2s,filter .2s}
.wood-signpost a:nth-of-type(1){transform:rotate(-3deg)}.wood-signpost a:nth-of-type(2){transform:rotate(2deg)}.wood-signpost a:nth-of-type(3){transform:rotate(-2deg)}
.wood-signpost a:hover{color:white;filter:brightness(1.13);transform:translateY(-3px)}
@media(max-width:650px){.wood-signpost{display:grid;justify-items:center;gap:8px;margin:0 auto 30px;padding:20px}.wood-signpost a{min-width:200px;padding:9px 18px}.wood-signpost .signpost-post{width:12px}}
.site-header{position:relative;z-index:5;border-bottom:1px solid #d8dfcf;background:#fffaf0d9;border-radius:0 0 22px 22px;box-shadow:0 9px 28px #244e3511;backdrop-filter:blur(12px)}
.site-header nav{gap:6px}.site-header nav a{padding:10px 13px;border-radius:11px;transition:background .18s,color .18s}.site-header nav a:hover,.site-header nav a[aria-current=page]{background:#e7eee5;color:#154936}.site-header nav .account-link{background:#18533f;color:white;padding:11px 17px;box-shadow:0 4px 12px #174b3430}.site-header nav .account-link:hover{background:#0c392c;color:white}
@media(max-width:850px){.site-header{border-radius:0 0 18px 18px}.site-header nav{width:100%;gap:2px}.site-header nav a{padding:8px 10px}.site-header nav .account-link{padding:9px 12px}}

/* Les directions sont taillées en pointes dans les planches. */
.wood-signpost{max-width:1140px;gap:10px}
.wood-signpost a{min-width:190px;max-width:260px;padding:14px 30px 14px 18px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);border-radius:3px;text-align:center}
.wood-signpost a:nth-of-type(4){transform:rotate(2deg)}
@media(max-width:850px){.wood-signpost{flex-wrap:wrap}.wood-signpost a{min-width:190px}}
@media(max-width:650px){.wood-signpost a{min-width:220px;padding:10px 30px 10px 15px}}

/* Compte et langue restent accessibles en haut à droite sur téléphone. */
@media(max-width:650px){.site-header{position:relative;padding:12px 16px 14px;gap:10px;min-height:112px}.site-header .mark{min-height:48px}.site-header nav{width:100%;padding-top:2px;padding-right:0;gap:3px 6px}.site-header nav a:not(.account-link){padding:6px 8px}.site-header nav .account-link,.site-header #site-language{position:absolute;top:15px;white-space:nowrap}.site-header nav .account-link{right:91px;padding:9px 11px}.site-header #site-language{right:12px;padding:8px 10px}}

/* Les panneaux partent du poteau vers leur destination. */
.wood-signpost{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:650px;direction:ltr}
.wood-signpost a{width:min(100%,255px);min-width:0;max-width:none;white-space:normal;line-height:1.2;align-self:center}
.wood-signpost a:nth-of-type(1){grid-area:1/1;justify-self:end}
.wood-signpost a:nth-of-type(2){grid-area:2/1;justify-self:end}
.wood-signpost a:nth-of-type(3){grid-area:1/2;justify-self:start}
.wood-signpost a:nth-of-type(4){grid-area:2/2;justify-self:start}
.wood-signpost a:nth-of-type(1),.wood-signpost a:nth-of-type(2){clip-path:polygon(22px 0,100% 0,100% 100%,22px 100%,0 50%);padding:14px 18px 14px 30px}
[dir=rtl] .wood-signpost a{direction:rtl}
@media(max-width:650px){
 .wood-signpost{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 8px;max-width:390px;padding:20px 17px 28px;margin:0 auto 30px;font-size:12px}
 .wood-signpost a{width:100%;min-width:0;padding-top:11px!important;padding-bottom:11px!important}
 .wood-signpost a:nth-of-type(1){grid-area:1/2;justify-self:start;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);padding-left:12px;padding-right:27px}
 .wood-signpost a:nth-of-type(2){grid-area:1/1;justify-self:end;clip-path:polygon(22px 0,100% 0,100% 100%,22px 100%,0 50%);padding-left:27px;padding-right:12px}
 .wood-signpost a:nth-of-type(3){grid-area:2/2;justify-self:start;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);padding-left:12px;padding-right:27px}
 .wood-signpost a:nth-of-type(4){grid-area:2/1;justify-self:end;clip-path:polygon(22px 0,100% 0,100% 100%,22px 100%,0 50%);padding-left:27px;padding-right:12px}
}

/* Sur téléphone, les quatre directions alternent une ligne à droite et une ligne à gauche. */
@media(max-width:650px){
 .wood-signpost{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
 .wood-signpost a:nth-of-type(1){grid-area:1/2}
 .wood-signpost a:nth-of-type(2){grid-area:2/1}
 .wood-signpost a:nth-of-type(3){grid-area:3/2}
 .wood-signpost a:nth-of-type(4){grid-area:4/1}
 [dir=rtl] .site-header nav .account-link{left:12px;right:auto}
[dir=rtl] .site-header #site-language{left:108px;right:auto}
.site-header nav .account-link::before{content:'♙';margin-right:6px}
.account-message{padding:10px 12px;border-radius:10px;background:#e6f1e5;color:#20553d;font-weight:700}.account-message.is-error{background:#fae6df;color:#943e2d}.account-switch{margin:0 0 12px!important;background:transparent!important;color:#17513e!important;border:1px solid #b8cdbd!important;cursor:pointer!important}.account-email-display{font-size:14px}.account-session button{padding:12px 14px;border:0;border-radius:10px;background:#18533f;color:#fff;font-weight:800;cursor:pointer}
.mobile-bottom-nav{display:none}
@media(max-width:700px){body{padding-bottom:82px}.mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;left:10px;right:10px;bottom:10px;z-index:30;padding:9px 6px calc(9px + env(safe-area-inset-bottom));border:1px solid #d8e1d5;border-radius:20px;background:#fffaf0ee;box-shadow:0 12px 30px #153f3626;backdrop-filter:blur(15px)}.mobile-bottom-nav a{display:grid;justify-items:center;gap:3px;color:#285b4a;text-decoration:none;font-size:21px;line-height:1}.mobile-bottom-nav small{font-size:10px;font-weight:800;white-space:nowrap}.mobile-bottom-nav a[aria-current=page]{color:#b05238}}
}

/* Photo du Khmaïs Café fournie par le propriétaire du site. */
.hero-art{height:350px}
.hero-art:before{inset:0;background-image:url('/images/khmais-cafe-photo.jpg');background-position:center;animation:cafe-photo-camera 14s ease-in-out infinite alternate}
@keyframes cafe-photo-camera{from{transform:scale(1)}to{transform:scale(1.025)}}
@media(max-width:850px){.hero-art{height:clamp(205px,55vw,320px)}}
@media(prefers-reduced-motion:reduce){.hero-art:before{animation:none}}
[id="site-language"]{display:none!important}

header.site-header>nav{margin-left:auto}

header.site-header nav a{color:#28556f}
header.site-header nav a:hover,header.site-header nav a[aria-current=page]{background:#dfedf3;color:#0b537e;box-shadow:none}

header.site-header .react-nav{flex:0 1 auto!important;min-width:0!important;width:auto!important;gap:3px!important}


/* Alignement du menu desktop sur la colonne principale des pages. */
@media(min-width:851px){header.site-header .react-nav{margin-right:0!important}header.site-header .profile-link{margin-right:56px!important}}


/* Même largeur de colonne pour le Profil sur toutes les pages desktop. */
@media(min-width:851px){header.site-header .profile-link{width:58px;min-width:58px;align-items:center}}


/* Profil et navigation mobile harmonisés sur toutes les pages. */
.profile-link{display:inline-grid;justify-items:center;align-items:center;gap:4px;padding:3px 8px;color:#707070;text-decoration:none;font-weight:700;line-height:1;transition:color .2s ease,transform .2s ease}
.profile-link:hover,.profile-link:focus-visible{color:#0b537e;transform:translateY(-1px)}
.profile-link small{font-size:12px}
.profile-link .profile-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#f1f4f8;border:2px solid #2563a6;color:#2563a6;font-size:23px;line-height:1}
@media(min-width:851px){header.site-header .profile-link{width:58px;min-width:58px;align-items:center}}
@media(max-width:700px){
  header.react-header{min-height:62px!important;max-height:62px!important;padding:7px 14px!important;gap:6px!important;border-radius:0 0 16px 16px!important;box-shadow:0 7px 20px #244e3518!important}
  header.react-header .mark{font-size:28px}
  header.react-header .profile-link{width:44px!important;min-width:44px!important;padding:2px 0!important;gap:1px!important}
  header.react-header .profile-link .profile-avatar{width:34px!important;height:34px!important;font-size:19px!important}
  .mobile-bottom-nav{left:12px!important;right:12px!important;bottom:8px!important;gap:1px!important;padding:6px 5px calc(6px + env(safe-area-inset-bottom))!important;border:1.5px solid #c9d8d5!important;border-radius:18px!important;background:#fffaf0f2!important;box-shadow:0 10px 24px #153f3628,inset 0 0 0 1px #ffffffb8!important;backdrop-filter:blur(14px)}
  .mobile-bottom-nav a{gap:2px!important;padding:4px 2px!important;border-radius:12px!important;font-size:21px!important}
  .mobile-bottom-nav .nav-icon,.mobile-bottom-nav .stadium-avatar,.mobile-bottom-nav .profile-avatar{width:30px!important;height:30px!important;font-size:22px!important}
  .mobile-bottom-nav small{font-size:9px!important}
}


/* Sur mobile, le cadre supérieur suit la même largeur compacte que le menu inférieur. */
@media(max-width:700px){
  header.react-header{width:calc(100% - 24px)!important;margin:0 12px!important}
}


/* Le menu inférieur mobile est plus étroit ; l’en-tête garde sa largeur habituelle. */
@media(max-width:700px){
  header.react-header{width:100%!important;margin:0!important}
  .mobile-bottom-nav{left:24px!important;right:24px!important}
}


/* Menu mobile final : cadre toujours visible et icônes alignées avec les libellés. */
@media(max-width:700px){
  body{padding-bottom:86px!important}
  .mobile-bottom-nav{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    align-items:stretch!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    left:24px!important;
    right:24px!important;
    bottom:8px!important;
    min-height:58px!important;
  }
  .mobile-bottom-nav a{
    min-width:0!important;
    min-height:48px!important;
    height:48px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    padding:3px 1px!important;
    line-height:1!important;
  }
  .mobile-bottom-nav .nav-icon,
  .mobile-bottom-nav .stadium-avatar,
  .mobile-bottom-nav .profile-avatar{
    display:grid!important;
    place-items:center!important;
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    line-height:1!important;
    margin:0!important;
  }
  .mobile-bottom-nav .nav-icon{font-size:21px!important}
  .mobile-bottom-nav .stadium-avatar{font-size:21px!important}
  .mobile-bottom-nav .profile-avatar{font-size:0!important}
  .mobile-bottom-nav small{
    display:block!important;
    height:11px!important;
    line-height:11px!important;
    font-size:9px!important;
    margin:0!important;
  }
}


/* Cadre supérieur mobile plus étroit horizontalement, comme le cadre desktop. */
@media(max-width:700px){
  header.react-header{width:calc(100% - 24px)!important;margin:0 12px!important}
}


/* Navigation mobile : page active en bleu et Profil maintenu sur la ligne supérieure. */
@media(max-width:850px){
  header.site-header.react-header{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important}
  header.site-header.react-header .mark{flex:1 1 auto;min-width:0}
  header.site-header.react-header .profile-link{flex:0 0 auto;white-space:nowrap}
}
@media(max-width:700px){
  .mobile-bottom-nav a[aria-current=page]{
    color:#146b9b!important;
    background:#e6f2f6!important;
    border:1px solid #9bc3d4!important;
    box-shadow:inset 0 0 0 1px #ffffffb8,0 2px 8px #146b9b24!important;
  }
  .mobile-bottom-nav a[aria-current=page] small{color:#146b9b!important}
}


/* Bibliothèque et Stade : le groupe menu + Profil est légèrement plus à gauche sur PC. */
@media(min-width:851px){
  body:has(.library-hero) header.site-header .profile-link,
  body:has(.stadium-hero) header.site-header .profile-link{margin-right:72px!important}
}