@font-face{font-family:"Fraunces";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/fraunces-600.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/fraunces-700.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/work-sans-400.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/work-sans-500.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/work-sans-600.woff2") format("woff2")}

:root{
  --bg:#f6f1e7; --bg-2:#efe7d7; --surface:#fffdf8; --ink:#1f1c2c; --ink-soft:#57526a; --ink-faint:#6c6680; --accent-text:#9c4524;
  --line:#e2d8c4; --accent:#b8562f; --accent-ink:#ffffff; --gold:#c9902f; --shadow:0 18px 40px -24px rgba(40,28,10,.35);
  --radius:20px; --radius-sm:12px; --max:1160px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#15131d; --bg-2:#1c1a27; --surface:#211f2e; --ink:#f3eee3; --ink-soft:#bdb6c9; --ink-faint:#8d86a0; --accent-text:#e58a5c;
    --line:#302d40; --accent:#e58a5c; --accent-ink:#1a120c; --gold:#e2b25a; --shadow:0 18px 40px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 "Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:12px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:9}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* En-tête */
.site-head{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Fraunces",serif;font-weight:700;font-size:1.08rem}
.brand img{width:34px;height:34px;border-radius:9px}
.brand small{display:block;font:500 .7rem/1 "Work Sans",sans-serif;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.head-nav{display:flex;align-items:center;gap:6px}
.head-nav a{text-decoration:none;font-weight:500;font-size:.92rem;color:var(--ink-soft);padding:8px 10px;border-radius:10px}
.head-nav a:hover{color:var(--ink);background:var(--bg-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
  font:600 .95rem/1 "Work Sans",sans-serif;padding:13px 20px;border-radius:12px;background:var(--accent);color:var(--accent-ink);
  transition:transform .12s ease,filter .12s ease;min-height:44px}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-2);filter:none}
.btn-sm{padding:9px 14px;font-size:.86rem;min-height:38px}
#installBtn[hidden]{display:none}
@media (max-width:720px){ .head-nav a.hide-sm{display:none} }

/* Accueil */
.hero{padding-top:64px;padding-bottom:34px}
.eyebrow{font:600 .78rem/1 "Work Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0 0 14px}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);max-width:17ch}
.hero p.lead{font-size:clamp(1.05rem,2vw,1.2rem);color:var(--ink-soft);max-width:60ch;margin:0 0 24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0;padding:0;list-style:none;color:var(--ink-soft);font-size:.92rem}
.hero-facts li::before{content:"✓ ";color:var(--accent);font-weight:700}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 24px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:500 .88rem/1 "Work Sans",sans-serif;
  padding:10px 15px;border-radius:999px;cursor:pointer;min-height:40px}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin:0;padding:0;list-style:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .18s ease}
.card:hover{transform:translateY(-3px)}
.card[hidden]{display:none}
.tile{text-decoration:none;position:relative;aspect-ratio:16/8;display:grid;place-items:center;background:linear-gradient(135deg,var(--t1),var(--t2))}
.tile .emo{font-size:3.6rem;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.tile .badges{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap}
.badge{font:600 .72rem/1 "Work Sans",sans-serif;background:rgba(255,255,255,.92);color:#1f1c2c;padding:6px 9px;border-radius:999px}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-cat{font:600 .72rem/1 "Work Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.card h3{font-size:1.35rem;margin:0}
.card h3 a{text-decoration:none}
.card p.tag{margin:0;color:var(--ink-soft);flex:1}
.card-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.card-actions .btn{flex:1}

section.block{padding-top:56px;padding-bottom:8px}
section.block h2{font-size:clamp(1.6rem,3vw,2.2rem)}
section.block .intro{color:var(--ink-soft);max-width:62ch;margin:0 0 22px}
.daily{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.daily a{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.daily a:hover{border-color:var(--accent)}
.daily .dot{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:1.3rem;background:linear-gradient(135deg,var(--t1),var(--t2));flex:none}
.daily b{display:block;font-weight:600}
.daily span{font-size:.82rem;color:var(--ink-faint)}

.author{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.author .mono{width:78px;height:78px;border-radius:20px}
.author h2,.author h3{margin-bottom:.3em}
.author p{margin:0 0 14px;color:var(--ink-soft)}
@media (max-width:560px){.author{grid-template-columns:1fr}}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;color:var(--ink-soft)}

/* Page jeu */
.crumbs{font-size:.85rem;color:var(--ink-faint);padding:20px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{text-decoration:none}
.game-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center;padding:30px 0 10px}
.game-hero h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.game-hero .lead{color:var(--ink-soft);font-size:1.08rem;margin:0 0 22px}
.game-hero .tile{border-radius:var(--radius);aspect-ratio:4/3;box-shadow:var(--shadow)}
.game-hero .tile .emo{font-size:6rem}
.play{background:var(--gbtn);color:var(--gbtn-ink);font-size:1.05rem;padding:16px 26px}
.note{font-size:.85rem;color:var(--ink-faint);margin:12px 0 0}
@media (max-width:800px){.game-hero{grid-template-columns:1fr}.game-hero .tile{order:-1;aspect-ratio:16/8}.game-hero .tile .emo{font-size:4.4rem}}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:800px){.cols{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.panel h2{font-size:1.45rem}
.checks{list-style:none;margin:0;padding:0}
.checks li{padding:8px 0 8px 30px;position:relative;border-bottom:1px dashed var(--line)}
.checks li:last-child{border:0}
.checks li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:12px;border-radius:4px;background:var(--gbtn,var(--accent))}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:8px 0 8px 44px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:700 .9rem/1 "Fraunces",serif;background:var(--bg-2);color:var(--ink)}
.others{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;list-style:none;margin:0;padding:0}

.site-foot{margin-top:70px;border-top:1px solid var(--line);padding:30px 0 40px;color:var(--ink-faint);font-size:.88rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.site-foot a{text-decoration:none;display:inline-block;padding:7px 0}
.site-foot a:hover{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================================
   ANIMATIONS — entrée de page, apparitions au défilement, survol en 3D
   (tout est coupé si l'appareil demande « moins d'animations »)
   ========================================================================== */
@keyframes mj-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mj-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes mj-drift{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(14px,-22px,0) rotate(8deg)}100%{transform:translate3d(0,0,0) rotate(0)}}
@keyframes mj-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}
@keyframes mj-sheen{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}
@keyframes mj-pop{0%{opacity:0;transform:scale(.94) translateY(10px)}100%{opacity:1;transform:none}}

/* Entrée de l'accueil et des pages jeu : les éléments arrivent l'un après l'autre */
.anim .hero > *,.anim .game-hero > div > *{animation:mj-rise .7s cubic-bezier(.2,.7,.2,1) both}
.anim .hero > :nth-child(2),.anim .game-hero > div > :nth-child(2){animation-delay:.08s}
.anim .hero > :nth-child(3),.anim .game-hero > div > :nth-child(3){animation-delay:.16s}
.anim .hero > :nth-child(4),.anim .game-hero > div > :nth-child(4){animation-delay:.24s}
.anim .hero > :nth-child(5),.anim .game-hero > div > :nth-child(5){animation-delay:.32s}
.anim .game-hero > .tile{animation:mj-rise .8s .1s cubic-bezier(.2,.7,.2,1) both}

/* Petites icônes des jeux qui flottent derrière le titre */
.hero{position:relative;isolation:isolate}
.hero-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-sky span{position:absolute;font-size:2.2rem;opacity:.18;filter:saturate(1.2);animation:mj-drift var(--d,14s) ease-in-out var(--dl,0s) infinite}
@media (max-width:720px){.hero-sky span{font-size:1.6rem;opacity:.12}}

/* Apparition au défilement */
.anim .reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.anim .reveal.in{opacity:1;transform:none}
.anim .card.reveal.in{transition:opacity .7s ease,transform .18s ease;transition-delay:var(--rd,0s),0s}

/* Cartes des jeux : inclinaison 3D qui suit la souris + reflet lumineux */
.card{transform-style:preserve-3d;will-change:transform}
.card .tile{overflow:hidden}
.card .tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),rgba(255,255,255,0) 55%)}
.card .tile .emo{transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
@media (hover:hover) and (pointer:fine){
  .card:hover{box-shadow:0 28px 50px -26px rgba(40,28,10,.5)}
  .card:hover .tile::after{opacity:1}
  .card:hover .tile .emo{transform:scale(1.18) rotate(-6deg) translateY(-4px)}
  .card.tilting{transition:transform .08s linear}
  .card:not(.tilting){transition:transform .45s cubic-bezier(.2,.8,.2,1)}
}
.tile{background-size:160% 160%;background-position:0% 0%;transition:background-position .6s ease}
.card:hover .tile{background-position:100% 100%}

/* Boutons : trait de lumière qui passe au survol */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:not(.btn-ghost)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));transform:translateX(-120%) skewX(-20deg)}
@media (hover:hover){
  .btn:not(.btn-ghost):hover::after{animation:mj-sheen .75s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(1px)}
}
.play{box-shadow:0 12px 26px -12px var(--gbtn,rgba(0,0,0,.4))}

/* Défis du jour, logo, filtres */
.daily a{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.daily a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.daily a:hover .dot{animation:mj-wiggle .5s ease}
.brand img{transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.brand:hover img{transform:rotate(-10deg) scale(1.12)}
.chip{transition:background .2s ease,color .2s ease,transform .15s ease}
.chip:hover{transform:translateY(-1px)}
.anim .card.pop{animation:mj-pop .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--rd,0s)}
.faq details{transition:border-color .2s ease,box-shadow .2s ease}
.faq details:hover{border-color:var(--accent)}
.faq details[open] p{animation:mj-rise .35s ease both}

/* Page d'un jeu : la grande tuile flotte et s'incline */
.game-hero .tile{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.game-hero .tile .emo{animation:mj-float 5s ease-in-out infinite}
.game-hero .tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--mx,30%) var(--my,20%),rgba(255,255,255,.28),rgba(255,255,255,0) 55%)}

@media (prefers-reduced-motion:reduce){
  .anim .reveal{opacity:1!important;transform:none!important}
  .hero-sky{display:none}
  .card,.game-hero .tile{transform:none!important}
}

/* ======================================================================
   PHASE 1 (oct. 2026) — captures, à la une, jeu au hasard, reprendre
   ====================================================================== */
.btn-lg{padding:15px 24px;font-size:1.05rem;min-height:52px}
/* Captures d'écran dans les cartes */
.tile .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:has(.shot)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,8,20,.55) 0%,rgba(10,8,20,0) 38%,rgba(10,8,20,0) 70%,rgba(10,8,20,.35) 100%)}
.tile .badges{z-index:2}
.tile:has(.shot) .emo{position:absolute;right:10px;bottom:8px;z-index:2;font-size:1.7rem;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:rgba(255,253,248,.92);box-shadow:0 6px 14px -6px rgba(0,0,0,.45);filter:none}
.tile:has(.shot) .emo[style]{background:#1f1c2c}
@media (hover:hover) and (pointer:fine){ .card:hover .tile .shot{transform:scale(1.04)} .card:hover .tile:has(.shot) .emo{transform:scale(1.1) rotate(-6deg)} }
.card .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:.84rem;color:var(--ink-faint)}
.card .meta span+span::before{content:"· ";margin-left:-8px}

/* Hero en deux colonnes avec le jeu à la une */
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:48px;align-content:start}
  .hero > :not(.une):not(.hero-sky){grid-column:1}
  .hero > .une{grid-column:2;grid-row:1 / span 6;align-self:center}
}
.une{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
@media (min-width:900px){.une{margin-top:0}}
.une-img{display:block;position:relative;aspect-ratio:2/1;background:linear-gradient(135deg,var(--t1),var(--t2))}
.une-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.une-label{position:absolute;left:12px;top:12px;z-index:1;background:var(--accent);color:var(--accent-ink);font:600 .74rem/1 "Work Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.une-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.une-body .card-cat{margin:0}
.une h2{font-size:1.5rem;margin:0}
.une h2 a{text-decoration:none}
.une p{margin:0;color:var(--ink-soft)}
.une .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.84rem;color:var(--ink-faint)}
.une .card-actions{margin-top:6px}

/* Reprendre là où vous en étiez */
.recents{padding-top:8px;padding-bottom:30px}
.recents h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 14px}
.recent-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.recent-list a{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px 10px 10px;min-height:64px;transition:border-color .2s ease,transform .2s ease}
.recent-list a:hover{border-color:var(--accent);transform:translateY(-2px)}
.recent-list img{width:88px;height:44px;object-fit:cover;object-position:center top;border-radius:8px;flex:none;background:var(--bg-2)}
.recent-list b{display:block;font-weight:600;line-height:1.25}
.recent-list small{display:block;font-size:.8rem;color:var(--ink-faint)}
.recent-list .go{font-weight:600;color:var(--accent-text);white-space:nowrap}
@media (max-width:720px){.hero{padding-top:40px}}