/* ═════ MAÎTRES DU JEU — « manga pop » (02/10/2026) ═════════════════════════════════════════════════════════════
   Charte demandée pour CETTE page seulement : bleu électrique + jaune vif, aplats, cases de BD à contour d'encre et ombre
   dure, trames (halftone), traits de vitesse, titres condensés très gras, étiquettes jaunes inclinées, parcours numéroté
   relié par un pointillé. Tout est scopé `body.pg-mj` : aucune autre page n'est touchée.
   Dessins : CSS/SVG + vraies captures du produit. Aucune image générée par IA de notre côté ; les illustrations manga
   livrées par Codex se posent dans les emplacements `.ill-fb` (voir landingV4.js, jetons {{ill:…}}).
   Contrastes (calculés) : blanc/bleu #1B38E8 7,5:1 · jaune/bleu 6,0:1 · encre/jaune 14,7:1 · bleu/blanc 7,5:1.
   Police des titres : Barlow Condensed 800 (SIL OFL 1.1), auto-hébergée, sous-ensemble latin avec accents.
   CSP stricte : aucune valeur calculée ici n'est inline ; le jeu (landing.js) n'agit que par classes et attribut hidden. */

body.pg-mj{
  --blue:#1B38E8;--blue-d:#0F23B0;--ink:#080C2B;--yel:#FFE600;--paper:#fff;--paper2:#EEF1FF;--lblue:#C9D0FF;
  --bg:#fff;--surface:#fff;--muted:#3A4270;--line:rgba(8,12,43,.22);--focus:#0F23B0;
  --accent:var(--blue);--on-accent:#fff;--btn-bg:var(--yel);--btn-ink:var(--ink);--w:1240px;
  --ff-c:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --ht:rgba(255,255,255,.2);
  color:var(--ink);background:#fff;
}
/* Titres : typo.css (chargée après) impose Fraunces en !important ; on gagne par la spécificité. */
body.pg-mj h1,body.pg-mj h2,body.pg-mj h3{font-family:var(--ff-c)!important;font-weight:800!important;font-variation-settings:normal!important;letter-spacing:0!important;word-spacing:normal!important;text-wrap:balance}
body.pg-mj h1{font-size:clamp(3.1rem,12vw,5.9rem)!important;line-height:.92!important}
body.pg-mj h2{font-size:clamp(2.4rem,7.4vw,4.3rem)!important;line-height:.96!important}
body.pg-mj h3{font-size:clamp(1.55rem,3.4vw,2rem)!important;line-height:1!important}
body.pg-mj .mj-sprite{position:absolute}

/* ── Briques communes ── */
.mjh,.mjt,.mjb,.mjn,.mjd,.mjz{position:relative;isolation:isolate;overflow:hidden}
.mjh>.wrap,.mjt>.wrap,.mjb>.wrap,.mjn>.wrap,.mjd>.wrap,.mjz>.wrap{position:relative;z-index:1}
.mj-ht{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,var(--ht) 0 1.6px,transparent 2.1px);background-size:10px 10px;-webkit-mask-image:linear-gradient(105deg,transparent 10%,#000 75%);mask-image:linear-gradient(105deg,transparent 10%,#000 75%)}
.mj-speed{position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg at 80% 42%,rgba(255,255,255,.11) 0 1.1deg,transparent 1.1deg 6.5deg);-webkit-mask-image:radial-gradient(circle at 80% 42%,transparent 12%,#000 62%);mask-image:radial-gradient(circle at 80% 42%,transparent 12%,#000 62%)}
.mj-tag,.mj-k{margin:0}
.mj-tag span,.mj-k span{display:inline-block;background:var(--yel);color:var(--ink);font:800 clamp(1rem,2.4vw,1.2rem)/1.15 var(--ff-c);padding:6px 16px;transform:skew(-8deg) rotate(-1.5deg);box-shadow:3px 3px 0 var(--ink)}
.mj-tag span{font-size:clamp(.95rem,2.2vw,1.1rem);max-width:34ch}
.mj-k{margin-bottom:14px}
.mj-k-b span{background:var(--blue);color:#fff}
.mj-lead{max-width:60ch;font-size:1.12rem;line-height:1.6;margin-top:16px}
.mj-case{position:relative;margin:0;background:#fff;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);overflow:hidden;color:var(--ink)}
.mj-case img{width:100%}
.mj-case figcaption.cap{padding:8px 12px 10px;background:#fff;color:var(--muted);border-top:3px solid var(--ink);font-size:.85rem}
.pg-mj .win-bar{background:var(--yel);border-bottom:3px solid var(--ink)}
.pg-mj .win-bar i{background:var(--ink)}
.mj-list{display:grid;gap:14px;margin-top:20px;max-width:62ch}
.mj-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.mj-list .ic{flex:none;width:28px;height:28px;padding:5px;margin-top:-1px;border-radius:8px;background:var(--blue);color:#fff;stroke-width:2}
.mj-fact{display:flex;gap:10px;align-items:flex-start;margin-top:18px;line-height:1.5}
.mj-fact .ic{flex:none;width:24px;height:24px;margin-top:1px;stroke-width:2.4}
.mj-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;color:var(--blue-d);text-underline-offset:4px;text-decoration-thickness:2px}
.mj-link:hover{text-decoration-thickness:3px}

/* Boutons : jaune plein + contour, ombre dure */
.pg-mj .btn{border-radius:12px;border:3px solid var(--ink);font-weight:800;letter-spacing:0;box-shadow:4px 4px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.pg-mj .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.pg-mj .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.pg-mj .btn.ghost{background:#fff;color:var(--ink)}
.pg-mj .btn.ghost:hover{background:var(--paper2)}
.pg-mj .btn:disabled{opacity:.6;transform:none;box-shadow:4px 4px 0 var(--ink)}
.mjh .btn.ghost,.mjn .btn.ghost,.mjz .btn.ghost,.mjt .btn.ghost{background:transparent;color:#fff;border-color:#fff;box-shadow:4px 4px 0 rgba(8,12,43,.55)}
.mjh .btn.ghost:hover,.mjz .btn.ghost:hover{background:rgba(255,255,255,.14)}
.mjh .mj-btn,.mjz .mj-btn,.mjn .mj-btn{border-color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:14px 16px}
/* Focus visible sur les fonds bleus et encre : jaune (le bleu foncé y serait invisible) */
.mjh,.mjt,.mjn,.mjd,.mjz{--focus:#FFE600}
.mjh :focus-visible,.mjt :focus-visible,.mjn :focus-visible,.mjd :focus-visible,.mjz :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.mjt .tb-mj :focus-visible,.mjt .tb-end :focus-visible{outline-color:var(--blue-d)}
.mjb :focus-visible{outline-color:var(--ink)}

/* ═════ HÉROS ═════ */
.mjh{background:var(--blue);color:#fff;padding:36px 0 112px;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),0 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),0 100%)}
.mjh-grid{display:grid;gap:36px;align-items:center}
.mjh-copy{position:relative;z-index:1;display:grid;gap:18px;justify-items:start}
.mjh h1{display:grid;gap:2px;margin-top:6px}
.mjh h1 span{display:block}
.mjh h1 .l1{color:#fff}
.mjh h1 .l2{color:var(--yel)}
.mjh .lead{max-width:50ch;font-size:1.15rem;line-height:1.6;color:#fff}
.mjh .cta{margin-top:6px}
.mj-pills{display:flex;flex-wrap:wrap;gap:10px 22px;font-weight:600;font-size:.95rem}
.mj-pills li{display:inline-flex;align-items:center;gap:8px}
.mj-pills .ic{width:20px;height:20px;color:var(--yel);stroke-width:2.2}
.mjh-vis{position:relative;min-width:0}
.mjh-vis .ill-fb{position:relative;min-height:340px;margin:12px 0 0}
.mjh-burst{position:absolute;right:-2%;top:-6%;width:68%;fill:var(--yel);stroke:var(--ink);stroke-width:3;stroke-linejoin:round;transform:rotate(8deg)}
.mjh-console{position:absolute;left:0;top:10%;width:80%;margin:0;background:#fff;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transform:rotate(-3deg);overflow:hidden}
.mjh-console img{width:100%}
.mjh-phone{position:absolute;right:1%;bottom:-2%;width:31%;max-width:190px;margin:0;border:4px solid var(--ink);border-radius:22px;background:#fff;box-shadow:6px 6px 0 var(--ink);transform:rotate(5deg);overflow:hidden}
.mjh-phone img{width:100%}
.mjh-d20{position:absolute;left:-3%;bottom:2%;width:22%;max-width:120px;transform:rotate(-16deg);filter:drop-shadow(4px 4px 0 var(--ink))}
.mjh-bubble{position:absolute;left:7%;top:-4%;margin:0;padding:8px 16px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:14px;font:800 1.35rem/1 var(--ff-c);transform:rotate(-4deg);box-shadow:3px 3px 0 var(--ink)}
.mjh-bubble::after{content:"";position:absolute;left:26px;bottom:-17px;border:8px solid transparent;border-top:12px solid var(--ink);border-bottom:0}
/* Dé : couleurs du symbole SVG */
#mj-d20 .d-body{fill:var(--yel)}#mj-d20 .d-top{fill:#fff}#mj-d20 .d-l{fill:var(--blue)}#mj-d20 .d-r{fill:var(--blue-d)}#mj-d20 .d-b{fill:var(--yel)}
#mj-d20 .d-body,#mj-d20 .d-top,#mj-d20 .d-l,#mj-d20 .d-r,#mj-d20 .d-b{stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
#mj-d20 .d-ln{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
/* Illustration livrée : remplace le repli */
.has-ill>.ill-fb{display:none!important}
.ill-img{width:100%;height:auto}
.mjh-vis.has-ill .ill-img{border:0}

/* ═════ PARCOURS EN TROIS ÉTAPES ═════ */
.mjr{position:relative;padding:40px 0 80px;background:#fff}
.mjr h2{max-width:22ch}
.mjr-steps{position:relative;display:grid;gap:44px;margin-top:36px}
.mjr-steps::before{content:"";position:absolute;left:22px;top:24px;bottom:24px;border-left:4px dashed var(--blue)}
.mjr-s{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:center}
.mjr-n{grid-column:1;grid-row:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;border:3px solid var(--ink);font:800 1.5rem/1 var(--ff-c)}
.mjr-t{grid-column:2;grid-row:1;margin:0}
.mjr-t span{display:inline-block;background:var(--yel);padding:4px 18px 6px;transform:skew(-8deg) rotate(-1.5deg);box-shadow:3px 3px 0 var(--ink)}
.mjr-s>p{grid-column:2;color:var(--muted);max-width:34ch;line-height:1.5;font-size:1.05rem}
.mjr-pn{grid-column:2;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.mjr-pn .ill-fb{position:absolute;inset:0;display:grid;place-items:center;background:var(--blue);--ht:rgba(255,255,255,.22);background-image:radial-gradient(circle,var(--ht) 0 1.4px,transparent 1.9px);background-size:9px 9px}
.mjr-pn .ill-fb>img{width:100%;height:100%;object-fit:cover;object-position:left top}
.mjr-pn .ill-phone>img{width:auto;height:92%;max-width:60%;object-fit:contain;border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:4px 4px 0 var(--ink)}
.mjr-pn.has-ill .ill-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mjr-s.s1 .mjr-pn{transform:rotate(-1deg)}.mjr-s.s2 .mjr-pn{transform:rotate(1deg)}.mjr-s.s3 .mjr-pn{transform:rotate(-.6deg)}

/* ═════ LA TABLE (le jeu) ═════ */
.mjt{background:var(--ink);color:#fff;padding:72px 0 88px;--ht:rgba(27,56,232,.5)}
.mjt .mj-ht{-webkit-mask-image:linear-gradient(200deg,#000 0,transparent 60%);mask-image:linear-gradient(200deg,#000 0,transparent 60%)}
.mjt h2{max-width:16ch}
.mjt-lead{margin-top:14px;max-width:56ch;font-size:1.15rem;line-height:1.55;color:var(--lblue)}
.tb{margin-top:36px}
.tb-app{display:grid;gap:36px;align-items:start}
/* Sans JavaScript (navigateur qui sait le dire) : le jeu cède la place à la liste du <noscript>, sans saut de mise en page pour les autres. */
@media(scripting:none){.tb-app{display:none}}
.tb-mj{background:#fff;color:var(--ink);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--yel);padding:18px 16px 20px;min-width:0}
.tb-cap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between;margin:0 0 14px;padding-bottom:12px;border-bottom:3px solid var(--ink)}
.tb-title{font:800 1.7rem/1 var(--ff-c)}
.tb-sim{font-weight:700;font-size:.9rem;color:var(--muted)}
.tb-teams{display:grid;gap:8px}
.tb-team{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 12px;background:var(--paper2);border:3px solid var(--ink);border-radius:10px;transition:background-color .25s ease,transform .25s ease}
.tb-team.is-hot{background:var(--yel);transform:translateX(4px)}
.tb-nm{font-weight:800;flex:1 1 9em}
.tb-st{font-size:.9rem;color:var(--muted);flex:0 0 auto}
.tb-team.is-hot .tb-st{color:var(--ink)}
.tb-tag{display:inline-block;padding:2px 10px;background:var(--ink);color:#fff;border-radius:99px;font-weight:800;font-size:.8rem;line-height:1.5}
.tb-pts{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.95rem}
.tb-pts b{font:800 1.5rem/1 var(--ff-c)}
.tb-play{display:grid;gap:18px;margin-top:20px;align-items:start}
.tb-die{display:grid;justify-items:center;gap:6px;justify-self:center;min-width:140px;min-height:44px;padding:6px 10px;background:none;border:0;color:var(--ink);cursor:pointer;border-radius:14px}
.tb-die:disabled{cursor:default}
.tb-dart{position:relative;display:block;width:124px;height:124px;filter:drop-shadow(5px 5px 0 var(--ink));transition:transform .15s ease}
.tb-die:not(:disabled):hover .tb-dart{transform:translate(-2px,-2px) rotate(-6deg)}
.tb-die:disabled .tb-dart{filter:grayscale(.7) drop-shadow(5px 5px 0 rgba(8,12,43,.35));opacity:.6}
.tb-dart svg,.tb-dart .ill-img{display:block;width:100%;height:100%}
.tb-dn{position:absolute;left:50%;top:55%;width:50px;height:50px;margin:-25px 0 0 -25px;display:grid;place-items:center;border-radius:50%;background:#fff;border:3px solid var(--ink);font:800 1.7rem/1 var(--ff-c);color:var(--ink);pointer-events:none}
.tb-dlab{font:800 1.25rem/1.1 var(--ff-c);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--blue)}
.tb-die:disabled .tb-dlab{text-decoration:none;color:var(--muted)}
.tb.is-rolling .tb-dart{animation:mjroll .7s cubic-bezier(.3,.7,.2,1)}
@keyframes mjroll{0%{transform:rotate(0) scale(1)}40%{transform:rotate(380deg) scale(1.25) translateY(-14px)}100%{transform:rotate(720deg) scale(1)}}
.tb-sit{position:relative;padding:14px 16px 16px;background:var(--yel);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);min-height:132px}
.tb-count{font:800 1rem/1 var(--ff-c);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);opacity:.8;margin-bottom:8px}
.tb-cue{font-size:1.2rem;line-height:1.35;font-weight:700}
.tb-ans{display:grid;gap:8px;margin-top:14px}
.tb-ans button{display:flex;align-items:center;width:100%;min-height:48px;padding:8px 14px;text-align:left;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:10px;font-weight:800;font-size:1rem;line-height:1.25;transition:background-color .15s ease,color .15s ease,transform .15s ease}
.tb-ans button:hover{background:var(--blue);color:#fff;transform:translateX(3px)}
.tb-ans button:active{transform:translateX(0)}
.tb-end{margin-top:20px;padding:18px;background:var(--yel);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink)}
.tb-endt{font:800 clamp(1.7rem,5vw,2.3rem)/1 var(--ff-c);margin-bottom:6px}
.tb-end p{margin:0}
.tb-end .cta{margin-top:14px}
.tb-end .btn.ghost{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.tb-ph{display:grid;justify-items:center;gap:10px}
.tb-phone{width:min(100%,290px);min-height:340px;background:#fff;color:var(--ink);border:6px solid #fff;border-radius:32px;box-shadow:0 0 0 4px var(--blue),9px 9px 0 4px var(--yel);overflow:hidden}
.tb-ph-h{display:flex;flex-direction:column;gap:2px;margin:0;padding:14px 16px 12px;background:var(--blue);color:#fff;font:800 1.45rem/1 var(--ff-c)}
.tb-ph-h small{font:600 .85rem/1.2 var(--ff-s);color:var(--lblue)}
.tb-feed{display:grid;gap:10px;padding:14px 12px 16px;align-content:start;min-height:240px}
.tb-it{margin:0;padding:10px 12px;border:3px solid var(--ink);border-radius:12px;background:var(--paper2);font-size:.95rem;line-height:1.4}
.tb-it b{display:block;font:800 1.05rem/1.1 var(--ff-c);margin-bottom:3px}
.tb-it-idle{background:#fff;border-style:dashed;color:var(--muted)}
.tb-it-msg{background:#fff;border-radius:14px 14px 14px 3px}
.tb-it-ok{background:var(--blue);color:#fff;border-color:var(--ink)}
.tb-it-bonus{background:var(--yel)}
.tb-it-bonus .tb-plus{display:inline-block;margin-right:6px;padding:0 8px;background:var(--ink);color:var(--yel);border-radius:8px;font:800 1.15rem/1.4 var(--ff-c)}
.tb-it-pin svg{display:block;width:100%;height:auto;margin-top:6px;border:2px solid var(--ink);border-radius:8px;background:#fff}
.tb-it-pin .pin{opacity:0;transform-origin:50% 100%}
.tb-it-pin.on .pin{opacity:1;animation:mjpin .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes mjpin{0%{opacity:0;transform:translateY(-18px) scale(.4)}100%{opacity:1;transform:none}}
.tb-it-proj{background:var(--ink);color:#fff}
.tb-it-proj ol{display:grid;gap:5px;margin-top:8px}
.tb-it-proj li{display:flex;justify-content:space-between;gap:10px;padding:5px 9px;background:rgba(255,255,255,.12);border-radius:8px;font-weight:700}
.tb-it-proj li:first-child{background:var(--yel);color:var(--ink)}
.tb-fw{position:relative;height:44px;margin-top:6px;overflow:hidden}
.tb-fw i{position:absolute;bottom:0;width:10px;height:10px;border-radius:50%;background:var(--yel);box-shadow:0 0 0 3px var(--blue)}
.tb-fw i:nth-child(1){left:12%}.tb-fw i:nth-child(2){left:34%;background:#fff}.tb-fw i:nth-child(3){left:56%}.tb-fw i:nth-child(4){left:76%;background:#fff}.tb-fw i:nth-child(5){left:90%}
.tb-it-proj.on .tb-fw i{animation:mjfw 1.4s ease-out infinite}
.tb-it-proj.on .tb-fw i:nth-child(2n){animation-delay:.35s}
@keyframes mjfw{0%{transform:translateY(0) scale(.5);opacity:1}70%{transform:translateY(-34px) scale(1.8);opacity:1}100%{transform:translateY(-38px) scale(2.6);opacity:0}}
.tb-it.new{animation:mjpop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes mjpop{0%{transform:scale(.88);opacity:0}100%{transform:none;opacity:1}}
.tb-ph-cap{margin:14px 0 0;font:800 1.1rem/1 var(--ff-c);letter-spacing:.06em;text-transform:uppercase;color:var(--lblue)}
.tb-fb{max-width:68ch;padding:20px;background:#fff;color:var(--ink);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--yel)}
.tb-fb ol{list-style:decimal;padding-left:1.3em;display:grid;gap:12px;margin-top:12px}
.tb-fb li{list-style:decimal}

/* ═════ LE GRIMOIRE ═════ */
.mjg{padding:72px 0 88px;background:#fff}
.mjg-grid{display:grid;gap:44px;align-items:center}
.mjg-vis{position:relative;display:grid;gap:18px}
.mjg-scen{transform:rotate(-1deg)}
.mjg-ph{width:min(46%,210px);border-radius:22px;justify-self:end;margin-top:-14px;transform:rotate(3deg)}
.mjg-ph img{border-radius:0}

/* ═════ LE BUTIN ═════ */
.mjb{background:var(--yel);padding:72px 0 80px;--ht:rgba(8,12,43,.13)}
.mjb .mj-ht{-webkit-mask-image:linear-gradient(250deg,#000 0,transparent 70%);mask-image:linear-gradient(250deg,#000 0,transparent 70%)}
.mjb-grid{display:grid;gap:36px;align-items:center}
.mjb .mj-lead{color:var(--ink)}
.mjb-note{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:12px 14px;background:#fff;border:3px solid var(--ink);border-radius:12px;font-weight:600;line-height:1.45}
.mjb-note .ic{flex:none;width:24px;height:24px;margin-top:1px;color:var(--blue-d);stroke-width:2.2}
.mjb-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mjb-chips li{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);font-weight:800;line-height:1.15}
.mjb-chips li:nth-child(odd){transform:rotate(-1deg)}.mjb-chips li:nth-child(even){transform:rotate(1deg)}
.mjb-chips .ic{flex:none;width:34px;height:34px;padding:6px;border-radius:50%;background:var(--blue);color:#fff;stroke-width:2}

/* ═════ LES PNJ ═════ */
.mjn{background:var(--blue);color:#fff;padding:80px 0 88px;--ht:rgba(255,255,255,.18)}
.mjn-grid{display:grid;gap:44px;align-items:center}
.mjn-vis{position:relative;display:grid;gap:18px;justify-items:center}
.mjn-ph{width:min(60%,230px);border-radius:24px;transform:rotate(-3deg);box-shadow:6px 6px 0 var(--ink)}
.mjn-suivi{width:100%;max-width:560px;transform:rotate(1.5deg)}
.mjn-copy .mj-lead{color:#fff}
.mjn-trig{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mjn-trig li{padding:7px 14px;background:var(--yel);color:var(--ink);border:3px solid var(--ink);border-radius:99px;font-weight:800;font-size:.95rem;line-height:1.2;box-shadow:3px 3px 0 var(--ink)}
.mjn-time{display:grid;gap:14px;margin-top:20px;padding-left:4px;border-left:4px dashed var(--yel);margin-left:16px}
.mjn-time li{position:relative;display:flex;align-items:center;gap:12px;font-weight:700;padding-left:22px}
.mjn-time b{position:absolute;left:-30px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--blue-d);border:3px solid var(--ink);font:800 1.1rem/1 var(--ff-c)}

/* ═════ LES GRANDES TABLES ═════ */
.mjq{padding:80px 0 88px;background:#fff}
.mjq-grid{display:grid;gap:28px;margin-top:30px}
.mjq-c{display:grid;gap:10px;align-content:start;padding:22px 20px 24px}
.mjq-c p{max-width:52ch;line-height:1.55}
.mjq-ic{width:52px;height:52px;padding:10px;border-radius:50%;background:var(--blue);color:#fff;border:3px solid var(--ink);stroke-width:2}
.mjq-fine{font-size:.9rem;color:var(--muted);padding-top:10px;border-top:3px dashed var(--line)}
.mjq-quiz{padding:0 0 24px}
.mjq-quiz>h3,.mjq-quiz>p{padding-inline:20px}
.mjq-pn{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink);border-bottom:4px solid var(--ink);margin-bottom:10px}
.mjq-pn .ill-fb{position:absolute;inset:0}
.mjq-pn .ill-fb img{width:100%;height:100%;object-fit:cover}
.mjq-pn.has-ill .ill-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ═════ LES DÉCORS ═════ */
.mjd{background:var(--ink);color:#fff;padding:80px 0 96px;--ht:rgba(27,56,232,.55)}
.mjd .mj-ht{-webkit-mask-image:linear-gradient(160deg,#000 0,transparent 55%);mask-image:linear-gradient(160deg,#000 0,transparent 55%)}
.mjd h2{max-width:24ch}
.mjd .mj-lead{color:var(--lblue);max-width:64ch}
.mjd .mj-fact .ic{color:var(--yel)}
.mjd .uv-feats{margin-top:44px;gap:44px}
.mjd .uv-feat h3{margin-top:18px;color:var(--yel)}
.mjd .uv-feat p{color:var(--lblue);max-width:32ch;margin-top:6px}
.mjd .uv-ph{border:4px solid var(--yel);border-radius:18px;box-shadow:5px 5px 0 var(--blue);background:var(--ink)}
.mjd .uv-duo{max-width:400px}

/* ═════ CÔTÉ JOUEURS ═════ */
.mjj{padding:80px 0 88px;background:var(--paper2)}
.mjj-grid{display:grid;gap:40px;align-items:center}
.mjj-ph{width:min(64%,260px);justify-self:center;border-radius:26px;transform:rotate(-2.5deg)}
.mjj-relay{margin-top:20px;padding:12px 16px;background:#fff;border:3px solid var(--ink);border-radius:12px;font-weight:700;max-width:46ch;line-height:1.45}
.mjj-copy .btn{margin-top:20px}

/* ═════ VIVRE DE SES PARTIES ═════ */
.mjv{padding:80px 0 72px;background:#fff}
.mjv-grid{display:grid;gap:22px;margin-top:30px}
.mjv-grid li{display:grid;gap:8px;align-content:start;padding:22px 20px 24px}
.mjv-grid .ic{width:48px;height:48px;padding:10px;border-radius:50%;background:var(--yel);color:var(--ink);border:3px solid var(--ink);stroke-width:2}
.mjv-grid p{line-height:1.55}
/* Offre en bref (bloc partagé) */
.pg-mj .offre{background:var(--paper2);padding:72px 0 80px}
.pg-mj .offre h2{max-width:28ch}
.pg-mj .of-mini .ic{width:28px;height:28px;padding:5px;border-radius:8px;background:var(--blue);color:#fff;stroke-width:2}
.pg-mj .of-mini strong{font-weight:800}
.pg-mj .of-rule{color:var(--muted)}
.pg-mj .founders{border-radius:12px;background:var(--ink);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--yel)}
.pg-mj .of-more a{color:var(--blue-d)}

/* ═════ TARIFS ═════ */
.mjp{padding:80px 0 88px;background:#fff}
.mjp .sub{margin-top:14px;max-width:60ch;color:var(--muted);font-size:1.1rem;line-height:1.55}
.mjp-plans{display:grid;gap:24px;margin-top:30px}
.mjp-plans>li{padding:22px 20px 24px}
.mjp-plans h3{margin-bottom:6px}
.mjp-plans>li>p{color:var(--muted);line-height:1.5}
.pg-mj .pb-fig{font-family:var(--ff-c);font-weight:800;letter-spacing:0!important;font-size:clamp(2rem,5vw,2.6rem)}
.pg-mj .pb-cta{background:var(--yel);color:var(--ink);border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);font-weight:800;transition:transform .15s ease,box-shadow .15s ease}
.pg-mj .pb-cta:hover{background:var(--yel);color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.pg-mj .pb-cta:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.pg-mj .pb-list li::before{border-color:var(--blue)}

/* ═════ FAQ ═════ */
.mjf{padding:72px 0 96px;background:var(--paper2)}
.mjf-in{display:grid;gap:30px}
.mjf-list{display:grid;gap:14px;max-width:880px}
.mjf details{background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
.mjf summary{position:relative;display:flex;align-items:center;min-height:56px;padding:12px 56px 12px 18px;font-weight:800;font-size:1.08rem;line-height:1.3;cursor:pointer;list-style:none;border-radius:9px}
.mjf summary::-webkit-details-marker{display:none}
.mjf summary::after{content:"+";position:absolute;right:14px;top:50%;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;background:var(--yel);border:3px solid var(--ink);border-radius:50%;font:800 1.3rem/1 var(--ff-c);transition:transform .2s ease}
.mjf details[open] summary{background:var(--yel);border-bottom:3px solid var(--ink);border-radius:9px 9px 0 0}
.mjf details[open] summary::after{content:"\2212";background:#fff}
.mjf details p{padding:14px 18px 18px;max-width:64ch;line-height:1.6}
.mjf details a{color:var(--blue-d);font-weight:700}

/* ═════ FINALE ═════ */
.mjz{background:var(--blue);color:#fff;padding:88px 0 96px;text-align:center;--ht:rgba(255,255,255,.18)}
.mjz .wrap{display:grid;gap:18px;justify-items:center}
.mjz h2{max-width:20ch}
.mjz p{max-width:54ch;font-size:1.15rem;line-height:1.55}
.mjz .cta{justify-content:center;margin-top:8px}

/* ═════ Écrans larges ═════ */
@media(min-width:760px){
  .mjb-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mjv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mjp-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mjq-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .tb-play{grid-template-columns:150px minmax(0,1fr);gap:22px}
  .mjh-vis .ill-fb{min-height:420px}
}
@media(min-width:900px){
  .mjr-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
  .mjr-steps::before{left:22px;right:22px;top:22px;bottom:auto;border-left:0;border-top:4px dashed var(--blue)}
  .mjr-s{grid-template-columns:44px minmax(0,1fr)}
  .mjr-pn,.mjr-s>p{grid-column:1 / -1}
  .mjr-s>p{max-width:none}
  .mjg-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
  .mjb-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .mjn-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
  .mjn-vis{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:center}
  .mjn-suivi{max-width:none}
  .mjn-ph{width:100%;max-width:240px}
  .mjj-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px}
  .mjd .uv-feats{grid-template-columns:repeat(3,1fr);gap:36px}
  .tb-app{grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr);gap:44px}
  .tb-mj{padding:22px 22px 24px}
}
@media(min-width:1100px){
  .mjh{padding:56px 0 132px}
  .mjh-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:40px}
  .mjh-vis .ill-fb{min-height:520px}
  .mjh:has(.mjh-vis.has-ill)>.wrap{position:static}
  .mjh-vis.has-ill{position:absolute;inset:0;z-index:-1}
  .mjh-vis.has-ill .ill-img{width:100%;height:100%;object-fit:cover;object-position:right center}
  .mjh:has(.mjh-vis.has-ill)::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(27,56,232,.95) 0,rgba(27,56,232,.88) 38%,rgba(27,56,232,0) 66%)}
}
/* Mouvement : coupé si réduit par l'appareil ou mis en pause (le jeu fait aussi apparaître le résultat sans rouler). */
@media(prefers-reduced-motion:reduce){
  .pg-mj .btn,.tb-team,.tb-dart,.tb-ans button,.mjf summary::after,.pg-mj .pb-cta{transition:none}
  .pg-mj .btn:hover,.pg-mj .pb-cta:hover,.tb-ans button:hover,.tb-die:not(:disabled):hover .tb-dart{transform:none}
}
html.paused .tb-it-proj.on .tb-fw i,html.paused .tb.is-rolling .tb-dart,html.paused .tb-it.new,html.paused .tb-it-pin.on .pin{animation:none}
/* L'attribut hidden doit gagner sur les display: des composants du jeu */
.tb-play[hidden],.tb-end[hidden],.tb-ans[hidden],.tb-tag[hidden]{display:none}
@media(max-width:899px){.tb-phone{min-height:260px}.tb-feed{min-height:150px}}