/* =====================================================================
   JOY — refonte 2026 (header, accueil, footer)
   Chargé après styles.css. Tout est préfixé .j- pour ne pas entrer en
   conflit avec les anciennes règles encore utilisées par les autres pages.
   ===================================================================== */
:root{
    --j-yellow:#FDFF00;
    --j-black:#000;
    --j-white:#fff;
    --j-line:rgba(255,255,255,.16);
    --j-mute:rgba(255,255,255,.72);
    --j-display:'DrukWideBold','Archivo',Impact,sans-serif;
    --j-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
    --header-h:84px;
    --j-gutter:clamp(1.25rem,4vw,3rem);
    --j-max:1320px;
    --j-radius:18px;
    --j-ease:cubic-bezier(.2,.8,.2,1);
}
@media (max-width:64rem){ :root{ --header-h:68px; } }

html{ scroll-padding-top:var(--header-h); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ font-family:var(--j-body); }
body.j-home{ background:var(--j-black); color:var(--j-white); }
:focus-visible{ outline:3px solid var(--j-yellow); outline-offset:3px; }

.j-wrap{ width:100%; max-width:var(--j-max); margin:0 auto; padding:0 var(--j-gutter); }

/* ---------- Boutons ---------- */
.j-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:50px; padding:.85rem 1.6rem; border-radius:999px; border:2px solid transparent; font-family:var(--j-display); font-weight:normal; font-size:.8rem; letter-spacing:.04em; line-height:1; text-transform:uppercase; text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform .2s var(--j-ease), background-color .2s, color .2s, border-color .2s; }
.j-btn:active{ transform:scale(.97); }
.j-btn--yellow{ background:var(--j-yellow); color:#000; }
.j-btn--yellow:hover{ background:#fff; color:#000; }
.j-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.75); background:rgba(0,0,0,.25); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.j-btn--ghost:hover{ background:#fff; border-color:#fff; color:#000; }
.j-btn--black{ background:#000; color:var(--j-yellow); }
.j-btn--black:hover{ background:var(--j-yellow); color:#000; border-color:#000; }
.j-btn--outline{ color:var(--j-yellow); border-color:var(--j-yellow); }
.j-btn--outline:hover{ background:var(--j-yellow); color:#000; }
.j-btn--sm{ min-height:42px; padding:.6rem 1.15rem; font-size:.7rem; }

/* ---------- Header ---------- */
.j-header{ position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--header-h); background:rgba(0,0,0,.92); -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid rgba(255,255,255,.08); transition:transform .35s var(--j-ease), background-color .3s, border-color .3s; }
.j-header--overlay{ background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 100%); -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; }
.j-header--overlay.is-solid{ background:rgba(0,0,0,.92); -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px); border-bottom-color:rgba(255,255,255,.08); }
.j-header.is-hidden{ transform:translateY(-100%); }
.j-header__bar{ height:100%; max-width:1440px; margin:0 auto; padding:0 var(--j-gutter); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1.5rem; }
.j-header__logo{ justify-self:start; display:block; line-height:0; }
.j-header__logo img{ height:60px; width:auto; transition:transform .3s var(--j-ease); }
.j-header__logo:hover img{ transform:rotate(-4deg) scale(1.05); }

.j-nav{ display:flex; align-items:center; gap:.15rem; }
.j-nav__link{ position:relative; display:inline-flex; align-items:center; gap:.5em; padding:.75rem 1rem; background:none; border:0; border-radius:999px; color:#fff; font-family:var(--j-display); font-weight:normal; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:color .2s; }
.j-nav__link:hover{ color:var(--j-yellow); }
.j-nav__link[aria-current="page"]::after{ content:''; position:absolute; left:1rem; right:1rem; bottom:.3rem; height:3px; border-radius:2px; background:var(--j-yellow); }
.j-nav__link i{ font-size:.7em; transition:transform .2s; }
.j-nav__drop{ position:relative; }
.j-nav__drop:hover .j-nav__link i, .j-nav__drop.is-open .j-nav__link i{ transform:rotate(180deg); }
.j-nav__drop-menu{ position:absolute; top:calc(100% + 8px); left:50%; min-width:190px; padding:.4rem; background:#000; border:1px solid rgba(255,255,255,.16); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.55); opacity:0; visibility:hidden; transform:translate(-50%,-6px); transition:opacity .2s, transform .2s var(--j-ease), visibility .2s; }
.j-nav__drop-menu::before{ content:''; position:absolute; left:0; right:0; top:-10px; height:10px; }
.j-nav__drop:hover .j-nav__drop-menu, .j-nav__drop:focus-within .j-nav__drop-menu, .j-nav__drop.is-open .j-nav__drop-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.j-nav__drop-menu a{ display:flex; align-items:center; gap:.7rem; padding:.75rem .9rem; border-radius:10px; color:#fff; font-weight:600; text-decoration:none; }
.j-nav__drop-menu a i{ width:1.1em; color:var(--j-yellow); }
.j-nav__drop-menu a:hover{ background:var(--j-yellow); color:#000; }
.j-nav__drop-menu a:hover i{ color:#000; }

.j-header__actions{ justify-self:end; display:flex; align-items:center; gap:.25rem; }
.j-header__actions .j-btn{ margin-left:.6rem; }
.j-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:#fff; font-size:1.15rem; text-decoration:none; transition:background-color .2s, color .2s; }
.j-icon-btn:hover{ background:rgba(255,255,255,.12); color:var(--j-yellow); }

.j-burger{ display:none; justify-self:start; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:44px; height:44px; padding:0; margin-left:-8px; background:none; border:0; border-radius:50%; cursor:pointer; }
.j-burger span{ display:block; width:26px; height:2.5px; border-radius:2px; background:#fff; transition:transform .35s var(--j-ease), background-color .2s; }

@media (max-width:64rem){
    .j-nav{ display:none; }
    .j-burger{ display:inline-flex; }
    .j-header__logo{ justify-self:center; }
    .j-header__logo img{ height:48px; }
    .j-header__actions .j-icon-btn{ display:none; }
    .j-header__actions .j-btn{ width:44px; min-height:44px; height:44px; padding:0; margin:0; font-size:.95rem; }
    .j-header__actions .j-btn span{ display:none; }
}

/* ---------- Menu mobile plein écran ---------- */
.j-menu{ position:fixed; inset:0; z-index:999; display:flex; flex-direction:column; padding:calc(var(--header-h) + 1.25rem) var(--j-gutter) calc(1.5rem + env(safe-area-inset-bottom)); overflow-y:auto; background:var(--j-yellow); color:#000; visibility:hidden; clip-path:circle(0 at 42px 34px); transition:clip-path .55s var(--j-ease), visibility 0s linear .55s; }
.j-menu.is-open{ visibility:visible; clip-path:circle(150% at 42px 34px); transition:clip-path .55s var(--j-ease), visibility 0s; }
.j-menu :focus-visible{ outline-color:#000; }
.j-menu__list{ list-style:none; margin:0; padding:0; }
.j-menu__link{ display:block; padding:.4rem 0; color:#000; font-family:var(--j-display); font-size:clamp(2rem,10vw,3.4rem); line-height:1.05; text-transform:uppercase; text-decoration:none; }
.j-menu__link[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:6px; }
.j-menu__link:active{ opacity:.55; }
.j-menu.is-open .j-menu__list li{ animation:jMenuIn .5s var(--j-ease) both; }
.j-menu.is-open .j-menu__list li:nth-child(2){ animation-delay:.04s; }
.j-menu.is-open .j-menu__list li:nth-child(3){ animation-delay:.08s; }
.j-menu.is-open .j-menu__list li:nth-child(4){ animation-delay:.12s; }
.j-menu.is-open .j-menu__list li:nth-child(5){ animation-delay:.16s; }
.j-menu.is-open .j-menu__list li:nth-child(6){ animation-delay:.2s; }
@keyframes jMenuIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.j-menu__foot{ margin-top:auto; padding-top:1.5rem; border-top:2px solid #000; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.j-menu__address{ margin:0; font-weight:600; line-height:1.45; }
.j-menu__social{ display:flex; gap:.5rem; }
.j-menu__social a{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:#000; color:var(--j-yellow); font-size:1.2rem; text-decoration:none; }
body.j-menu-open{ overflow:hidden; }
body.j-menu-open .j-header{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; transform:none; }
body.j-menu-open .j-burger span{ background:#000; }
body.j-menu-open .j-burger span:first-child{ transform:translateY(4.25px) rotate(45deg); }
body.j-menu-open .j-burger span:last-child{ transform:translateY(-4.25px) rotate(-45deg); }
body.j-menu-open .j-header__actions .j-btn{ background:#000; color:var(--j-yellow); }
@media (min-width:64.01rem){ .j-menu{ display:none; } }
@media (prefers-reduced-motion:reduce){
    .j-menu, .j-menu.is-open{ transition:none; }
    .j-menu.is-open .j-menu__list li{ animation:none; }
}

/* ---------- Hero vidéo ---------- */
.j-hero{ position:relative; isolation:isolate; display:flex; align-items:flex-end; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#000; }
.j-hero__video{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.j-hero__shade{ position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.4) 38%,rgba(0,0,0,0) 62%), linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%); }
.j-hero__content{ width:100%; max-width:1440px; margin:0 auto; padding:0 var(--j-gutter) clamp(2.5rem,8vh,5.5rem); }
.j-hero__title{ margin:0 0 1.4rem; color:var(--j-yellow); font-family:var(--j-display); font-weight:normal; font-size:clamp(3rem,10vw,10rem); line-height:1; letter-spacing:-.01em; text-transform:uppercase; text-shadow:0 4px 30px rgba(0,0,0,.35); }
.j-hero__line{ display:block; }
.j-hero__line + .j-hero__line{ margin-top:.1em; } /* place pour la cédille du Ç */
.j-hero__lead{ max-width:34rem; margin:0 0 1.9rem; color:rgba(255,255,255,.92); font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.5; }
.j-hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.j-sound{ position:absolute; right:var(--j-gutter); bottom:clamp(2.5rem,8vh,5.5rem); display:inline-flex; align-items:center; gap:.8rem; min-height:58px; padding:.5rem 1.2rem .5rem .5rem; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; font-family:var(--j-body); text-align:left; cursor:pointer; transition:background-color .25s, border-color .25s, color .25s, transform .2s var(--j-ease); }
.j-sound:hover{ border-color:var(--j-yellow); }
.j-sound:active{ transform:scale(.97); }
.j-sound__eq{ display:inline-flex; align-items:center; justify-content:center; gap:3px; flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--j-yellow); color:#000; font-size:1rem; transition:background-color .25s; }
.j-sound__eq i{ display:none; width:3px; height:5px; border-radius:2px; background:#000; }
.j-sound.is-playing .j-sound__eq{ align-items:flex-end; padding-bottom:14px; }
.j-sound.is-playing .j-sound__eq i{ display:block; }
.j-sound.is-playing .j-sound__mute{ display:none; }
.j-sound__text strong{ display:block; font-family:var(--j-display); font-weight:normal; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.j-sound__text small{ display:block; margin-top:.2rem; color:rgba(255,255,255,.72); font-size:.82rem; }
.j-sound__text small i{ margin-right:.3em; font-size:.8em; }
.j-sound.is-playing{ background:var(--j-yellow); border-color:var(--j-yellow); color:#000; }
.j-sound.is-playing .j-sound__eq{ background:#000; }
.j-sound.is-playing .j-sound__eq i{ background:var(--j-yellow); animation:jEq .9s ease-in-out infinite; }
.j-sound.is-playing .j-sound__eq i:nth-child(2){ animation-delay:-.45s; }
.j-sound.is-playing .j-sound__eq i:nth-child(3){ animation-delay:-.2s; }
.j-sound.is-playing .j-sound__eq i:nth-child(4){ animation-delay:-.65s; }
.j-sound.is-playing small{ color:rgba(0,0,0,.7); }
@keyframes jEq{ 0%,100%{ height:5px; } 50%{ height:17px; } }

@media (prefers-reduced-motion:no-preference){
    .j-hero__line{ animation:jRise 1s var(--j-ease) both; }
    .j-hero__line + .j-hero__line{ animation-delay:.12s; }
    .j-hero__lead{ animation:jFade .8s .35s both; }
    .j-hero__actions, .j-sound{ animation:jFade .8s .5s both; }
}
@keyframes jRise{ from{ opacity:0; transform:translateY(45%); } to{ opacity:1; transform:none; } }
@keyframes jFade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (max-width:48rem){
    .j-hero{ min-height:540px; }
    .j-hero__content{ padding-bottom:calc(1.75rem + env(safe-area-inset-bottom)); }
    .j-hero__title{ font-size:clamp(2.6rem,13.5vw,4.4rem); margin-bottom:1rem; }
    .j-hero__lead{ font-size:1rem; margin-bottom:1.4rem; }
    .j-hero__actions .j-btn{ flex:1 1 0; padding-inline:1rem; }
    .j-sound{ top:calc(var(--header-h) + .75rem); bottom:auto; min-height:50px; padding:.35rem 1rem .35rem .35rem; gap:.65rem; }
    .j-sound__eq{ width:40px; height:40px; }
    .j-sound.is-playing .j-sound__eq{ padding-bottom:13px; }
}

/* ---------- Bandeau hashtags (les bâches de la terrasse) ---------- */
.j-ticker{ overflow:hidden; padding:.95rem 0; background:var(--j-yellow); color:#000; border-block:2px solid #000; }
.j-ticker__track{ display:flex; width:max-content; animation:jMarquee 36s linear infinite; }
.j-ticker__group{ display:flex; flex-shrink:0; }
.j-ticker__group span{ display:inline-flex; align-items:center; font-family:var(--j-display); font-size:clamp(1rem,2.1vw,1.55rem); line-height:1; text-transform:uppercase; white-space:nowrap; }
.j-ticker__group span::after{ content:''; display:inline-block; width:.5em; height:.5em; margin:0 1.1em; background:#000; transform:rotate(45deg); }
@keyframes jMarquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .j-ticker__track{ animation:none; } }

/* ---------- Sections ---------- */
.j-section{ position:relative; padding:clamp(4rem,9vw,7.5rem) 0; }
.j-head{ max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem); }
.j-head--row{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem 3rem; }
.j-head__title{ margin:0 0 .9rem; color:var(--j-yellow); font-family:var(--j-display); font-weight:normal; font-size:clamp(2rem,5vw,4.25rem); line-height:.95; text-transform:uppercase; }
.j-head__text{ max-width:36rem; margin:0; color:var(--j-mute); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.55; }
.j-head__aside{ display:flex; flex-wrap:wrap; gap:.6rem; }

.j-zoom{ position:relative; display:block; width:100%; padding:0; border:0; border-radius:var(--j-radius); overflow:hidden; background:#111; line-height:0; cursor:zoom-in; }
.j-zoom img{ display:block; width:100%; height:auto; transition:transform .6s var(--j-ease); }
.j-zoom--fill img{ height:100%; object-fit:cover; }
.j-zoom:hover img{ transform:scale(1.04); }

/* ---------- Horaires + Game zone ---------- */
.j-play{ background:#000; }
.j-play__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:center; gap:clamp(2.5rem,6vw,6rem); }
.j-play__hours{ justify-self:center; width:100%; max-width:440px; margin:0; }
.j-play__hours .j-zoom{ background:transparent; transform:rotate(-2.5deg); box-shadow:0 40px 80px -30px rgba(253,255,0,.35); transition:transform .4s var(--j-ease); }
.j-play__hours .j-zoom:hover{ transform:rotate(0deg); }
.j-play__hours .j-zoom:hover img{ transform:none; }
.j-games{ display:grid; grid-template-columns:1.25fr 1fr 1fr; grid-template-rows:repeat(2,clamp(170px,15vw,230px)); grid-template-areas:"g1 g2 g3" "g1 g4 g4"; gap:.9rem; }
.j-games > :nth-child(1){ grid-area:g1; }
.j-games > :nth-child(2){ grid-area:g2; }
.j-games > :nth-child(3){ grid-area:g3; }
.j-games > :nth-child(4){ grid-area:g4; }
@media (max-width:64rem){
    .j-play__grid{ grid-template-columns:1fr; }
    .j-play__hours{ max-width:380px; }
}
@media (max-width:48rem){
    .j-play__hours{ max-width:300px; }
    .j-games > *{ aspect-ratio:4 / 5; }
}

/* ---------- Événements ---------- */
.j-events{ background:#000; border-top:1px solid var(--j-line); }
.j-events__list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:1.25rem; }
.j-event{ display:flex; flex-direction:column; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid var(--j-line); border-radius:var(--j-radius); transition:border-color .2s; }
.j-event:hover{ border-color:var(--j-yellow); }
.j-event__media{ position:relative; aspect-ratio:4 / 3; background:#fff url('../images/joyzebre.svg') center / cover; }
.j-event__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.j-event__date{ position:absolute; top:.9rem; left:.9rem; min-width:66px; padding:.6rem .8rem; border-radius:12px; background:var(--j-yellow); color:#000; line-height:1; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.j-event__day{ display:block; font-family:var(--j-display); font-size:1.7rem; }
.j-event__month{ display:block; margin-top:.3rem; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.j-event__body{ display:flex; flex-direction:column; flex:1; gap:.6rem; padding:1.25rem 1.25rem 1.35rem; }
.j-event__name{ margin:0; color:#fff; font-family:var(--j-display); font-weight:normal; font-size:1.05rem; line-height:1.15; text-transform:uppercase; }
.j-event__desc{ margin:0; color:var(--j-mute); font-size:.95rem; line-height:1.5; }
.j-event__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin-top:auto; padding-top:.9rem; border-top:1px solid var(--j-line); font-size:.9rem; }
.j-event__time{ display:inline-flex; align-items:center; gap:.45em; color:var(--j-yellow); font-weight:700; }
.j-event__bonus{ padding:.3rem .8rem; border:1px solid rgba(253,255,0,.5); border-radius:999px; background:rgba(253,255,0,.12); color:var(--j-yellow); font-size:.85rem; font-weight:700; }
.j-event__links{ display:flex; gap:.3rem; margin-left:auto; }
.j-event__links a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:background-color .2s, color .2s; }
.j-event__links a:hover{ background:var(--j-yellow); color:#000; }

/* ---------- Galerie (fond zèbre) ---------- */
.j-gallery{ background:#fff url('../images/joyzebre.svg') center / cover; }
.j-head--plate{ padding:clamp(1.5rem,3vw,2.25rem); border-radius:var(--j-radius); background:#000; }
.j-head--plate .j-head__title{ margin-bottom:.6rem; }
.j-bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,clamp(170px,16vw,250px)) 352px; grid-template-areas:"p1 p1 p2 p3" "p1 p1 p4 p5" "sp sp p6 p6"; gap:clamp(.6rem,1.2vw,1rem); }
.j-bento__photos{ display:contents; }
.j-bento__photos > *{ box-shadow:0 0 0 3px #000; }
.j-bento__photos > :nth-child(1){ grid-area:p1; }
.j-bento__photos > :nth-child(2){ grid-area:p2; }
.j-bento__photos > :nth-child(3){ grid-area:p3; }
.j-bento__photos > :nth-child(4){ grid-area:p4; }
.j-bento__photos > :nth-child(5){ grid-area:p5; }
.j-bento__photos > :nth-child(6){ grid-area:p6; }
.j-bento__spotify{ grid-area:sp; overflow:hidden; border-radius:var(--j-radius); background:#000; box-shadow:0 0 0 3px #000; }
.j-bento__spotify iframe{ display:block; width:100%; height:100%; border:0; }
@media (max-width:64rem){
    .j-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:340px 210px 210px 352px 260px; grid-template-areas:"p1 p1" "p2 p3" "p4 p5" "sp sp" "p6 p6"; }
}
@media (max-width:48rem){
    .j-bento{ display:block; }
    .j-bento__photos{ display:flex; padding-block:3px; }
    .j-bento__photos > *{ aspect-ratio:4 / 5; }
    .j-bento__spotify{ height:152px; margin-top:1rem; border-radius:14px; }
}

/* ---------- Carte ---------- */
.j-carte{ background:#000; }
.j-carte__sticker{ width:clamp(110px,13vw,170px); height:auto; transform:rotate(6deg); }
.j-carte__pages{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.j-carte--side .j-carte__layout{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); align-items:start; gap:clamp(2rem,5vw,5rem); }
.j-carte--side .j-head--row{ flex-direction:column; align-items:flex-start; }
.j-carte--side .j-carte__pages{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.j-carte__page{ aspect-ratio:1 / 1.414; background:#fff; border-radius:12px; transition:transform .35s var(--j-ease); }
.j-carte__page:hover{ transform:translateY(-6px) rotate(-1deg); }
.j-carte__page:hover img{ transform:none; }
.j-empty{ margin:0; color:var(--j-mute); font-size:1.1rem; }
@media (max-width:64rem){
    .j-carte--side .j-carte__layout{ grid-template-columns:1fr; gap:0; }
    .j-carte--side .j-head--row{ flex-direction:row; align-items:flex-end; }
    .j-carte__pages{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:48rem){
    .j-carte__sticker{ display:none; }
    .j-carte__pages{ display:flex; }
}

/* Visionneuse carte (A4) */
.carte-modal{ display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; background:rgba(0,0,0,.94); }
.carte-modal.open{ display:flex; }
.carte-modal-img{ max-width:92vw; max-height:92vh; object-fit:contain; border-radius:6px; box-shadow:0 10px 50px rgba(0,0,0,.6); }
.carte-modal-close, .j-modal-close{ position:absolute; top:14px; right:18px; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:1; cursor:pointer; }
.carte-modal-close:hover, .j-modal-close:hover{ background:var(--j-yellow); color:#000; }
.carte-modal-nav{ position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:54px; height:54px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; cursor:pointer; transition:background-color .2s, color .2s; }
.carte-modal-nav:hover{ background:var(--j-yellow); color:#000; }
.carte-modal-prev{ left:20px; }
.carte-modal-next{ right:20px; }
@media (max-width:600px){ .carte-modal-nav{ top:auto; bottom:18px; transform:none; width:48px; height:48px; font-size:22px; } }
#jeuModal .modal-jeu-image{ max-height:86vh; border-radius:12px; }

/* ---------- Footer ---------- */
.j-footer{ background:var(--j-yellow); color:#000; }
.j-footer :focus-visible{ outline-color:#000; }
.j-footer__top{ display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:2.5rem clamp(2rem,4vw,4rem); padding-block:clamp(3.5rem,7vw,6rem); }
.j-footer__logo{ display:block; width:clamp(150px,14vw,210px); height:auto; margin:-1.5rem 0 .5rem -.6rem; }
.j-footer__motto{ margin:0; font-family:var(--j-display); font-size:clamp(1.2rem,1.75vw,1.6rem); line-height:1.1; text-transform:uppercase; }
.j-footer__motto span{ display:block; }
.j-footer__label{ margin:0 0 .8rem; padding-bottom:.6rem; border-bottom:2px solid #000; font-family:var(--j-body); font-size:1rem; font-weight:800; }
.j-footer__col p{ margin:0 0 .8rem; font-weight:500; line-height:1.5; }
.j-footer__link{ color:#000; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.j-footer__link:hover{ text-decoration-thickness:4px; }
.j-footer__social{ display:grid; gap:.55rem; margin:0; padding:0; list-style:none; }
.j-footer__social a{ display:inline-flex; align-items:center; gap:.65rem; min-height:38px; color:#000; font-weight:700; text-decoration:none; }
.j-footer__social i{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:#000; color:var(--j-yellow); font-size:1rem; transition:transform .25s var(--j-ease); }
.j-footer__social a:hover i{ transform:rotate(-10deg) scale(1.08); }
.j-footer__bottom{ background:#000; color:rgba(255,255,255,.62); font-size:.85rem; }
.j-footer__bottom :focus-visible{ outline-color:var(--j-yellow); }
.j-footer__bottom-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 2rem; padding-block:1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
.j-footer__bottom p{ margin:0; }
.j-footer__bottom a, .j-footer__legal button{ padding:0; border:0; background:none; color:rgba(255,255,255,.82); font:inherit; text-decoration:none; cursor:pointer; }
.j-footer__bottom a:hover, .j-footer__legal button:hover{ color:var(--j-yellow); }
.j-footer__bottom .j-footer__credit{ color:var(--j-yellow); font-weight:700; }
.j-footer__legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; }
@media (max-width:64rem){
    .j-footer__top{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .j-footer__brand{ grid-column:1 / -1; display:flex; align-items:center; gap:1.5rem; }
    .j-footer__logo{ margin:0; width:130px; }
}
@media (max-width:40rem){
    .j-footer__top{ grid-template-columns:1fr 1fr; gap:2.25rem 1.5rem; }
    .j-footer__brand{ flex-direction:column; align-items:flex-start; gap:.75rem; }
    .j-footer__col:last-child{ grid-column:1 / -1; }
    .j-footer__bottom-inner{ flex-direction:column; align-items:flex-start; }
}

/* Défilement horizontal au doigt sur mobile */
@media (max-width:48rem){
    .j-rail{ display:flex; gap:.75rem; margin:0 calc(var(--j-gutter) * -1); padding:0 var(--j-gutter) .25rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--j-gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .j-rail::-webkit-scrollbar{ display:none; }
    .j-rail > *{ flex:0 0 80%; scroll-snap-align:start; }
}

/* ---------- Autres pages : décalage sous le nouveau header ---------- */
.photos-hero{ margin-top:var(--header-h); }