/* Page « Jeux » et gabarit commun des pages de jeu, repris de design/css/jeux.css (mêmes écarts
   volontaires que le reste du thème : @container pcc (min-width:1024px) → @media (min-width:1024px)). */
/* « Les deux » : bouton principal jaune du site, sans accent d’espèce */
[data-species="tous"]{--accent:var(--logo-yellow);--accent-strong:var(--ink);--accent-tint:var(--surface-sunken);--on-accent:var(--ink)}
.jx-pick{display:grid;gap:var(--space-2);padding-top:var(--space-5)}
.jx-pick__k{margin:0;font:600 18px/24px var(--font-display)}
.jx-seg{max-width:420px}
.jx-pick__note{margin:0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.jx-games{margin-top:var(--space-5)}
.jx-grid{display:grid;gap:var(--space-4);margin:0;padding:0;list-style:none}
.jx-card{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:transform 160ms ease-out}
@media (hover:hover){.jx-card:hover{transform:translateY(-3px)}}
.jx-card__photo{margin:0}
.jx-card__photo .pcc-photo__img{aspect-ratio:16/7;border-bottom:2px solid var(--ink)}
.jx-card__body{display:flex;flex:1;flex-direction:column;gap:var(--space-2);padding:var(--space-4)}
.jx-card__t{margin:0;font:600 22px/28px var(--font-display);text-wrap:balance}
.jx-card__x{margin:0}
.jx-card__foot{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-3);margin-top:auto;padding-top:var(--space-3)}
.jx-card__go{min-width:112px;box-shadow:0 4px 0 var(--ink)}
.jx-card__go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
/* Publicités : hauteur réservée, au moins 32 px d’écart avec les cartes et leurs boutons */
.jx-ad .pcc-ad{min-height:274px;margin:var(--space-6) auto}
.jx-text{max-width:calc(70ch + 32px)}
.jx-text p{margin:0 0 var(--space-4)}
@media (min-width:1024px){
  .jx-pick{grid-template-columns:auto minmax(0,420px) minmax(0,1fr);align-items:center;column-gap:var(--space-5);padding-top:var(--space-6)}
  .jx-pick__note{margin-left:var(--space-2)}
  .jx-games{margin-top:var(--space-6)}
  .jx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
  .jx-ad .pcc-ad{min-height:114px;margin:var(--space-7) auto}
  .jx-text{max-width:calc(70ch + 64px)}
}

/* ===================== Pages de jeu (.jg) ===================== */
/* .pcc-banner pose display:flex ; sans cette règle, l'attribut hidden (posé par
   jeu-coup-de-coeur.js au passage en jeu) n'aurait aucun effet visuel (même motif que
   .pcc-menu[hidden] dans components.css). */
.jg-banner[hidden]{display:none}
.jg-banner .home-hero__title{font-size:28px;line-height:36px}
.jg-head{padding:0 0 var(--space-4)}
.jg-h1{margin:var(--space-1) 0 0;font:700 24px/32px "Poppins",var(--font-display);letter-spacing:-.01em;text-wrap:balance}
.jg-layout{padding:var(--space-5) var(--space-4) 0}
.jg .pcc-crumbs li:last-child{display:none}
.jg-col{min-width:0}
.jg-side{display:none}

/* Bloc de jeu : reprend le style du quiz */
.jg-box{background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 6px 0 var(--accent);overflow:hidden}
.jg-pad{display:grid;gap:var(--space-5);padding:var(--space-5) var(--space-4)}
/* data-jeu-depart-zone et data-jeu-cours-zone (render-jeu.php) sont des div sans classe : sans
   cette règle, leurs enfants (filtres, bouton, note…) s'empilaient sans aucun écart, repéré par
   le client sur plusieurs jeux à la fois (29 octobre 2026). */
[data-jeu-depart-zone],[data-jeu-cours-zone]{display:grid;gap:var(--space-4)}
/* Sans ceci, le display:grid ci-dessus l'emporte sur l'attribut hidden posé par le script (même
   mécanisme que .jg-banner[hidden] plus haut) : l'écran de départ restait visible par-dessus le
   tournoi de la Bataille des noms une fois lancé, d'où l'effet « trop serré » signalé par le
   client (30 octobre 2026). */
[data-jeu-depart-zone][hidden],[data-jeu-cours-zone][hidden]{display:none}
.jg-center{text-align:center;justify-items:center}
.jg-ask{margin:0;font:600 20px/26px var(--font-display)}
.jg-species{margin:0}
.jg-species .qz-sp{padding:var(--space-4) var(--space-2)}
.jg-species .qz-sp svg{width:80px;height:80px}
.jg-species .qz-sp[aria-pressed="true"]{background:var(--accent);box-shadow:0 6px 0 var(--ink)}
.jg-species .qz-sp[aria-pressed="false"]{background:var(--surface);border-color:var(--line-strong);box-shadow:0 4px 0 var(--line)}
.jg-remember{margin:calc(var(--space-2) * -1) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted);text-align:center}
.jg-k{display:block;margin:0;font:600 17px/24px var(--font-display)}
.jg-note{margin:0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.jg-start{margin-top:0}
.jg-link{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 16px/24px var(--font-text);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px;cursor:pointer}
.jg-link--block{justify-self:center}
.jg-finish{justify-self:center;min-height:44px;padding:0 var(--space-3);border:0;background:none;color:var(--ink-muted);font:600 16px/24px var(--font-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.jg-actions{display:grid;gap:var(--space-4);width:100%}
.jg-actions .home-go{margin-top:0}
.jg-actions--row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* :not(.qz-fav) : ce bouton gère déjà son propre cœur plein/vide (quiz.css, même composant
   que le quiz) — sans cette exclusion, les deux règles ont la même spécificité et celle-ci
   l'emporterait simplement parce qu'elle est chargée après (trouvé en testant la Bataille). */
.jg-actions .pcc-btn:not(.qz-fav) svg,.jg-invite .pcc-btn:not(.qz-fav) svg{flex:none;width:20px;height:20px;margin-right:6px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jg-btn2{min-height:52px}

/* Filtres repliables */
.jg-filters{border:1px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface)}
.jg-filters summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--space-2);min-height:52px;padding:var(--space-2) var(--space-4);list-style:none;cursor:pointer;font:600 17px/24px var(--font-display)}
.jg-filters summary::-webkit-details-marker{display:none}
.jg-filters__sum{font:400 15px/22px var(--font-text);color:var(--ink-muted)}
.jg-filters__in{display:grid;gap:var(--space-2);padding:0 var(--space-4) var(--space-4)}
.jg-filters__in .home-seg__btn{font-size:15px}

/* A. Pile de cartes */
.jg-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.jg-count{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--accent-tint);font:600 16px/1 var(--font-display);white-space:nowrap}
.jg-count svg{width:20px;height:20px;fill:var(--logo-red);stroke:var(--ink);stroke-width:1.5}
.jg-undo{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:600 16px/20px var(--font-display);cursor:pointer}
.jg-undo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.jg-undo:disabled{color:var(--ink-disabled);border-color:var(--line);cursor:default}
.jg-filtline{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:calc(var(--space-2) * -1) 0 0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.jg-stack{position:relative;padding:12px 0 0}
.jg-stack__back{position:absolute;left:12px;right:12px;top:6px;bottom:6px;background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);transform:rotate(-2.5deg)}
.jg-stack__back--2{left:22px;right:22px;top:0;transform:rotate(3deg);background:var(--accent-tint)}
.jg-swipe{position:relative;display:grid;gap:var(--space-2);min-height:300px;align-content:center;padding:var(--space-5) var(--space-4);background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 6px 0 var(--accent);text-align:center;touch-action:pan-y}
.jg-swipe__n{margin:0;font:400 64px/70px "Lilita One",var(--font-display);letter-spacing:.01em;overflow-wrap:anywhere}
.jg-swipe .jg-name__meta{justify-content:center;margin-top:var(--space-2)}
.jg-swipe__m{margin:var(--space-2) auto 0;max-width:34ch}
.jg-swipe__pos{margin:var(--space-2) 0 0;font-size:16px;line-height:22px;color:var(--ink-muted)}
.jg-hint{margin:0;font-size:16px;line-height:24px;color:var(--ink-muted);text-align:center}
.jg-choice{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4)}
.jg-round{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:0;border:0;background:none;color:var(--ink);font:600 16px/20px var(--font-display);cursor:pointer}
.jg-round svg{box-sizing:border-box;width:84px;height:84px;padding:20px;border:2px solid var(--ink);border-radius:50%;background:var(--surface);box-shadow:0 5px 0 var(--ink);transition:transform 120ms ease-out}
.jg-round--paw svg{fill:var(--ink-muted);stroke:none}
.jg-round--heart svg{fill:var(--logo-red);stroke:var(--ink);stroke-width:1.5;background:var(--accent-tint)}
.jg-round:active svg{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.jg-round:focus-visible{outline:none}
.jg-round:focus-visible svg{outline:3px solid var(--focus);outline-offset:3px}
.jg-keys{display:none;margin:0;font-size:15px;line-height:22px;color:var(--ink-muted);text-align:center}
/* Coup de cœur : la carte part à droite ; coup de patte : à gauche. Tampon sur la carte qui s'envole. */
.jg-swipe--out{position:absolute;left:0;right:0;top:12px;z-index:3;pointer-events:none;min-height:0;height:calc(100% - 12px);box-sizing:border-box}
@keyframes jgOutR0{0%{transform:none;opacity:1}100%{transform:translateX(120%) rotate(16deg);opacity:0}}
@keyframes jgOutR1{0%{transform:none;opacity:1}100%{transform:translateX(120%) rotate(16deg);opacity:0}}
@keyframes jgOutL0{0%{transform:none;opacity:1}100%{transform:translateX(-120%) rotate(-16deg);opacity:0}}
@keyframes jgOutL1{0%{transform:none;opacity:1}100%{transform:translateX(-120%) rotate(-16deg);opacity:0}}
.jg-stamp{position:absolute;top:18px;padding:4px 12px;border:3px solid var(--ink);border-radius:var(--radius-sm);font:400 22px/1.1 "Lilita One",var(--font-display);letter-spacing:.02em;background:var(--surface)}
.jg-stamp--heart{left:16px;transform:rotate(-12deg);background:var(--accent);box-shadow:0 3px 0 var(--ink)}
.jg-stamp--paw{right:16px;transform:rotate(12deg);background:var(--surface-sunken);box-shadow:0 3px 0 var(--ink)}
@media (hover:hover){.jg-round--heart:hover svg{transform:rotate(8deg) scale(1.06)}.jg-round--paw:hover svg{transform:rotate(-8deg) scale(1.06)}}
.jg-tofav{justify-self:center;gap:8px}
.jg-tofav svg{width:20px;height:20px;fill:var(--logo-red);stroke:var(--ink);stroke-width:1.5}
@keyframes jgIn0{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes jgIn1{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}

/* Résultats communs */
.jg-res__top{display:grid;justify-items:center;gap:var(--space-1);text-align:center}
.jg-res__mascot{width:180px}
.jg-wait__mascot{width:200px}
.jg-res__k{margin:0;font:600 17px/24px var(--font-display);color:var(--ink-muted)}
.jg-res__big{margin:var(--space-2) 0 0;font:400 32px/36px "Lilita One",var(--font-display);letter-spacing:.01em;text-wrap:balance}
.jg-res__x{margin:0;max-width:46ch}
.jg-name__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0;font-size:16px;line-height:24px;color:var(--ink-muted)}
.jg-center__meta{justify-content:center}
.jg-kept{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.jg-kept__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.jg-kept__n{font:600 22px/28px var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.jg-kept__row .jg-name__meta{margin-top:var(--space-1)}
.jg-kept__go{flex:none;max-width:12ch;font-size:15px;line-height:20px;color:var(--ink);text-align:right;text-underline-offset:3px}

/* B. Invitation, attente, noms communs */
.jg-steps{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.jg-steps li{display:flex;align-items:flex-start;gap:var(--space-3);font-size:16px;line-height:24px}
.jg-steps__n{flex:none;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;background:var(--accent);font:600 15px/1 var(--font-display)}
.jg-invite{display:grid;gap:var(--space-3);padding:var(--space-4);background:var(--accent-tint);border-radius:var(--radius-md)}
.jg-invite__k{margin:0;font:600 17px/24px var(--font-display)}
.jg-invite__link{margin:0;padding:var(--space-2) var(--space-3);background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius-sm);font-size:16px;line-height:24px;overflow-wrap:anywhere;user-select:all}
.jg-invite__btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.jg-invite__btns .pcc-btn{padding:0 10px;font-size:16px}
.jg-players{display:grid;gap:var(--space-2);width:100%;margin:0;padding:0;list-style:none;text-align:left}
.jg-player{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);font:600 17px/24px var(--font-display)}
.jg-player__av{flex:none;display:grid;place-items:center;width:36px;height:36px;border:1.5px solid var(--ink);border-radius:50%;background:var(--surface-sunken)}
.jg-player.is-done .jg-player__av{background:var(--accent)}
.jg-player__st{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:400 15px/20px var(--font-text);color:var(--ink-muted)}
.jg-player__st svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jg-dots{display:inline-flex;gap:3px}
.jg-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-muted);animation:jgDot 1.2s ease-in-out infinite}
.jg-dots i:nth-child(2){animation-delay:.2s}.jg-dots i:nth-child(3){animation-delay:.4s}
@keyframes jgDot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.jg-common{display:grid;gap:var(--space-2);width:100%;margin:0;padding:0;list-style:none}
.jg-common li{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3);border:2px solid var(--ink);border-radius:var(--radius-lg);background:var(--accent-tint)}
.jg-common__n{font:400 40px/46px "Lilita One",var(--font-display);color:var(--ink);text-decoration:none}

/* C. Bataille */
.jg-source{display:grid;gap:var(--space-2)}
.jg-src{display:grid;gap:2px;padding:var(--space-3) var(--space-4) var(--space-3) 48px;position:relative;border:2px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.jg-src::before{content:"";position:absolute;left:16px;top:18px;width:18px;height:18px;border:2px solid var(--ink);border-radius:50%;background:var(--surface)}
.jg-src[aria-checked="true"]{border-color:var(--ink);background:var(--accent-tint)}
.jg-src[aria-checked="true"]::before{background:radial-gradient(circle,var(--ink) 0 45%,var(--surface) 50%)}
.jg-src__t{font:600 18px/24px var(--font-display)}
.jg-src__x{font-size:16px;line-height:22px;color:var(--ink-muted)}
.jg-rounds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.jg-rounds li{display:grid;place-items:center;min-height:36px;padding:0 4px;border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);font:600 13px/16px var(--font-display);text-align:center;color:var(--ink-muted)}
.jg-rounds li.is-done{background:var(--surface-sunken);color:var(--ink)}
.jg-rounds li.is-on{border-color:var(--ink);background:var(--accent);color:var(--ink)}
.jg-duel__k{margin:0;font-size:16px;line-height:24px;color:var(--ink-muted);text-align:center}
.jg-duel{display:grid;gap:var(--space-4);justify-items:stretch}
.jg-fighter{display:grid;justify-items:center;gap:var(--space-2);min-height:150px;align-content:center;padding:var(--space-4);border:2px solid var(--ink);border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 6px 0 var(--accent);color:var(--ink);cursor:pointer;transition:transform 160ms ease-out}
.jg-fighter:active{transform:translateY(3px);box-shadow:0 3px 0 var(--accent)}
@media (hover:hover){.jg-fighter:hover{transform:translateY(-3px);background:var(--accent-tint)}}
.jg-fighter__n{font:400 48px/54px "Lilita One",var(--font-display);letter-spacing:.01em}
.jg-fighter .jg-name__meta{justify-content:center;margin-top:var(--space-2)}
.jg-vs{justify-self:center;display:grid;place-items:center;width:56px;height:56px;margin:0;border:2px solid var(--ink);border-radius:50%;background:var(--logo-yellow);font:600 18px/1 var(--font-display);z-index:1}
.jg-win{margin:0;font:400 72px/80px "Lilita One",var(--font-display);letter-spacing:.01em;overflow-wrap:anywhere}
.jg-win__hl{box-shadow:inset 0 -.3em 0 var(--accent)}
.jg-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--space-2);width:100%;margin:var(--space-2) 0 0;padding:0;list-style:none}
.jg-podium li{display:grid;justify-items:center;align-content:start;gap:var(--space-1);padding:var(--space-3) var(--space-1);border:2px solid var(--ink);border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;background:var(--surface-sunken)}
.jg-podium a{font:600 18px/22px var(--font-display);color:var(--ink);text-underline-offset:3px;overflow-wrap:anywhere}
.jg-podium__1{min-height:120px;background:var(--accent)!important}
.jg-podium__2{min-height:92px}
.jg-podium__3{min-height:72px}
.jg-podium__rank{font:400 24px/1 "Lilita One",var(--font-display)}

/* D. Crash-test */
.jg-form{display:grid;gap:var(--space-3)}
.jg-form .home-seg{margin-bottom:var(--space-2)}
.jg-input{width:100%;box-sizing:border-box;min-height:52px;padding:0 18px;border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:400 18px/24px var(--font-text)}
.jg-input:focus{outline:3px solid var(--focus);outline-offset:2px}
.jg-form .jg-start{margin-top:var(--space-3)}
.jg-score{display:flex;align-items:center;gap:var(--space-4)}
.jg-score__n{flex:none;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:var(--logo-yellow);box-shadow:var(--shadow-sticker);border:2px solid var(--ink);font:400 46px/1 "Lilita One",var(--font-display);color:var(--ink)}
.jg-score__n small{display:block;margin-top:-6px;font:600 17px/1 var(--font-display)}
.jg-score__name{margin:var(--space-2) 0 0;font:400 40px/44px "Lilita One",var(--font-display)}
.jg-score__x{margin:var(--space-1) 0 0;font-size:16px;line-height:24px}
.jg-crits{display:grid;gap:var(--space-2);width:100%;margin:0;padding:0;list-style:none;text-align:left}
.jg-crit{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.jg-crit__ico{flex:none;display:grid;place-items:center;width:32px;height:32px}
.jg-crit__ico svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jg-crit--ok .jg-crit__ico svg{fill:var(--mixed-bg);stroke:var(--mixed-ink)}
.jg-crit--warn .jg-crit__ico svg{fill:var(--accent-tint)}
.jg-crit--bad .jg-crit__ico svg{fill:var(--female-bg);stroke:var(--female-ink)}
.jg-crit--wait{color:var(--ink-muted)}
.jg-crit__t{margin:0;font:600 17px/24px var(--font-display)}
.jg-crit__v{display:inline-block;margin-left:4px;padding:0 8px;border-radius:var(--radius-pill);background:var(--surface-sunken);font:600 14px/22px var(--font-text);color:var(--ink)}
.jg-crit__x{margin:var(--space-2) 0 0;font-size:16px;line-height:23px}
.jg-legend{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:0;font-size:15px;line-height:22px;color:var(--ink-muted)}
.jg-legend span{display:inline-flex;align-items:center;gap:4px}
.jg-legend svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jg-sub{margin:var(--space-2) 0 0;font:600 20px/26px var(--font-display)}
.jg-mini__score{flex:none;padding:2px 8px;border:1.5px solid var(--ink);border-radius:var(--radius-pill);background:var(--logo-yellow);font:600 14px/20px var(--font-display)}

/* E. Pelage */
.jg-two{display:grid;gap:var(--space-4)}
.jg-two__opt{display:grid;gap:var(--space-2)}
.jg-or{justify-self:center;margin:0;font:600 16px/1 var(--font-display);color:var(--ink-muted)}
.jg-upload{display:grid;justify-items:center;gap:4px;padding:var(--space-5) var(--space-4);border:2px dashed var(--ink);border-radius:var(--radius-lg);background:var(--accent-tint);color:var(--ink);cursor:pointer}
.jg-upload svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.jg-upload__t{font:600 19px/24px var(--font-display)}
.jg-upload__x{font-size:16px;line-height:22px;color:var(--ink-muted)}
.jg-upload--row{grid-auto-flow:column;justify-content:start;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}
.jg-upload--row svg{width:28px;height:28px}
.jg-sws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.jg-sw{display:flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;padding:4px 12px;border:1.5px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);font:600 16px/18px var(--font-display);text-align:center;cursor:pointer}
.jg-sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--accent-tint)}
.jg-sw__c{flex:none;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%}
.jg-sw__c--big{width:64px;height:64px;border-width:2px}
.jg-privacy{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;padding:var(--space-3);background:var(--surface-sunken);border-radius:var(--radius-md);font:600 16px/23px var(--font-text)}
.jg-privacy svg{flex:none}
.jg-userphoto{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--radius-md);background:linear-gradient(160deg,#ead2a4,#d98a3d 55%,#8f5a2a);overflow:hidden}
.jg-userphoto__hint{display:grid;justify-items:center;gap:4px;color:var(--surface);font:600 15px/20px var(--font-text)}
.jg-userphoto__hint svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6}
.jg-target{position:absolute;left:58%;top:58%;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid var(--surface);border-radius:50%;box-shadow:0 0 0 2px var(--ink)}
.jg-target::after{content:"";position:absolute;inset:16px;border-radius:50%;background:var(--surface)}
.jg-detect{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.jg-detect[hidden]{display:none}
.jg-detect__k{font:600 16px/22px var(--font-display);color:var(--ink-muted)}
.jg-detect__pill{display:inline-flex;align-items:center;gap:var(--space-2);height:44px;padding:0 16px 0 8px;border:2px solid var(--ink);border-radius:var(--radius-pill);background:var(--accent-tint);font:600 18px/1 var(--font-display)}
.jg-sws--small .jg-sw{min-height:44px}
.jg-colres{display:flex;align-items:center;gap:var(--space-3)}
.jg-colnames{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.jg-colname{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.jg-colname .pcc-pill{justify-self:start}
.jg-colname__n{font:600 22px/28px var(--font-display);color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:5px}
.jg-colname__why{grid-column:1 / -1;margin:0;font-size:16px;line-height:23px}

/* F. Copains de panier */
.jg-pair{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.jg-pair span{display:grid;place-items:center;min-height:52px;padding:0 16px;border:2px solid var(--ink);border-radius:var(--radius-pill);font:400 26px/1 "Lilita One",var(--font-display)}
.jg-pair__a{background:var(--surface)}
.jg-pair__b{background:var(--accent);min-width:52px}
.jg-pair .jg-pair__plus{min-height:0;padding:0;border:0;font:600 24px/1 var(--font-display)}
.jg-pair--res{justify-content:flex-start}
.jg-pair--res .jg-pair__b{font:600 17px/1 var(--font-display)}
.jg-crits--left{text-align:left}
.jg-alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1.5px solid var(--ink);border-radius:var(--radius-md);background:var(--accent-tint)}
.jg-alert svg{flex:none;width:28px;height:28px;fill:var(--surface);stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jg-alert p{margin:0;font-size:16px;line-height:24px}

/* G. Faire-part : carré 1080 × 1080, soleil du logo derrière la photo, nom en étiquette autocollante */
.jg-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.jg-model{display:grid;justify-items:center;gap:6px;padding:var(--space-2);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:600 15px/18px var(--font-display);cursor:pointer}
.jg-model[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--accent-tint)}
.jg-model__sq{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border:1.5px solid var(--ink);border-radius:var(--radius-sm)}
.jg-model__sun{position:absolute;left:50%;top:44%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(var(--fp-ray) 0 10deg,transparent 10deg 22.5deg)}
.jg-model__dot{position:absolute;left:50%;top:44%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border:1.5px solid var(--ink);border-radius:50%;background:var(--surface)}
.jg-fp--soleil{--fp-bg:var(--logo-yellow);--fp-ray:rgba(255,255,255,.45);--fp-shadow:var(--logo-orange);--fp-tag:var(--surface)}
.jg-fp--orange{--fp-bg:var(--logo-orange);--fp-ray:rgba(255,221,0,.55);--fp-shadow:var(--ink);--fp-tag:var(--logo-yellow)}
.jg-fp--creme{--fp-bg:var(--bg);--fp-ray:rgba(255,221,0,.75);--fp-shadow:var(--logo-orange);--fp-tag:var(--logo-yellow)}
.jg-model__sq.jg-fp--soleil,.jg-model__sq.jg-fp--orange,.jg-model__sq.jg-fp--creme{background:var(--fp-bg)}
.jg-fpwrap{container-type:inline-size;width:100%}
.jg-fpwrap--small{max-width:240px;justify-self:center}
.jg-fp{position:relative;display:flex;flex-direction:column;align-items:center;aspect-ratio:1;box-sizing:border-box;overflow:hidden;padding:5.5cqw 6cqw 5cqw;background:var(--fp-bg);border:2px solid var(--ink);border-radius:var(--radius-md);color:var(--ink);font-family:var(--font-display);text-align:center}
.jg-fp__rays{position:absolute;left:50%;top:42%;width:118cqw;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-conic-gradient(var(--fp-ray) 0 7deg,transparent 7deg 15deg);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 70%);mask-image:radial-gradient(circle,#000 30%,transparent 70%)}
.jg-fp__deco{position:absolute;inset:0;width:100%;height:100%}
.jg-fp__badge{position:relative;padding:1.2cqw 3.4cqw;border:.5cqw solid var(--ink);border-radius:999px;background:var(--surface);font:600 3.6cqw/1.1 var(--font-display);transform:rotate(-3deg);box-shadow:0 .9cqw 0 var(--ink)}
.jg-fp__photo{position:relative;display:grid;place-items:center;align-content:center;gap:1cqw;width:44cqw;height:44cqw;margin-top:4cqw;border:1.1cqw solid var(--ink);border-radius:50%;background:linear-gradient(160deg,#ead2a4,#d98a3d 55%,#8f5a2a);box-shadow:0 0 0 1.6cqw var(--surface),0 2.4cqw 0 1.6cqw var(--fp-shadow);color:var(--surface);font:600 2.8cqw/1.2 var(--font-text)}
.jg-fp__photo svg{width:7cqw;height:7cqw;fill:none;stroke:currentColor;stroke-width:1.6}
.jg-fp__hello{position:relative;margin-top:6cqw;font:600 4.4cqw/1.1 var(--font-display)}
.jg-fp__name{position:relative;margin-top:1.4cqw;padding:.4cqw 3.6cqw 1cqw;background:var(--fp-tag);border:.7cqw solid var(--ink);border-radius:3cqw;box-shadow:0 1.4cqw 0 var(--fp-shadow);transform:rotate(-2.5deg);font:400 12.5cqw/1.05 "Lilita One",var(--font-display);letter-spacing:.02em;white-space:nowrap}
.jg-fp__date{position:relative;margin-top:3.6cqw;font:600 3.6cqw/1.2 var(--font-display)}
.jg-fp__foot{position:relative;display:flex;align-items:center;gap:1.6cqw;margin-top:auto;padding:1cqw 3cqw 1cqw 1cqw;background:var(--ink);color:var(--surface);border-radius:999px;font:600 3.2cqw/1 var(--font-display)}
.jg-fp__foot img{width:6.4cqw;height:6.4cqw;border-radius:50%;background:var(--surface)}

/* Sous le bloc */
.jg-ad .pcc-ad{min-height:274px;margin:var(--space-6) auto}
.jg-aff{margin-top:var(--space-6)}
.jg-aff + .jg-aff{margin-top:var(--space-4)}
.jg-next{margin-top:var(--space-6);padding:var(--space-5) var(--space-4);background:var(--accent-tint);border-radius:var(--radius-lg)}
.jg-next__h{margin:0 0 var(--space-3);font:600 24px/30px var(--font-display)}
.jg-next__list{display:grid;gap:var(--space-3)}
.jg-next__card{display:grid;gap:var(--space-1);padding:var(--space-4);background:var(--surface);border:2px solid var(--ink);border-radius:var(--radius-lg);box-shadow:0 4px 0 var(--ink);color:var(--ink);text-decoration:none;transition:transform 160ms ease-out}
@media (hover:hover){.jg-next__card:hover{transform:translateY(-3px)}}
.jg-next__t{font:600 20px/26px var(--font-display)}
.jg-next__x{font-size:16px;line-height:24px}
.jg-next__go{justify-self:start;margin-top:var(--space-2);padding:6px 16px;border-radius:var(--radius-pill);background:var(--accent);border:1.5px solid var(--ink);font:600 16px/20px var(--font-display)}
.jg-how{margin:var(--space-6) 0 var(--space-8);max-width:70ch}
.jg-how p{margin:0 0 var(--space-3)}

@media (min-width:1024px){
  .jg-banner .home-hero__title{font-size:46px;line-height:56px}
  .jg-banner .pcc-banner__in{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);column-gap:var(--space-7)}
  .jg-banner .pcc-banner__in > *{grid-column:1;justify-self:center;max-width:760px;text-align:center}
  .jg-banner .pcc-crumbs ol{justify-content:center}
  /* Titre compact : dans la colonne du jeu, centré sur le bloc */
  .jg-head{padding:0 0 var(--space-5);text-align:center}
  .jg-head .pcc-crumbs ol{justify-content:center}
  .jg-h1{max-width:760px;margin-left:auto;margin-right:auto}
  .jg .pcc-crumbs ol{justify-content:center}
  .jg .pcc-crumbs li:last-child{display:inline-flex}
  .jg-h1{font-size:36px;line-height:46px}
  .jg-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);gap:var(--space-7);align-items:start;max-width:calc(var(--content-max) + 64px);margin:0 auto;padding:var(--space-6) 32px 0}
  .jg-side{display:block;position:sticky;top:var(--space-4)}
  .jg-side .pcc-ad{margin:0}
  .jg-pad{padding:var(--space-6) var(--space-7)}
  .jg-species{max-width:520px;width:100%;justify-self:center}
  .jg-stack{width:440px;justify-self:center}
  .jg-choice{width:360px;justify-self:center}
  .jg-keys{display:block}
  .jg-duel{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:var(--space-5)}
  .jg-vs{margin:0}
  .jg-fighter{min-height:220px}
  .jg-fighter__n{font-size:56px;line-height:62px}
  .jg-two{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start}
  .jg-two .jg-upload{min-height:124px;box-sizing:border-box;align-content:center}
  .jg-or{align-self:center;margin-top:36px}
  .jg-colnames,.jg-kept{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .jg-common{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jg-common li{flex-direction:column;gap:var(--space-2)}
  .jg-res__big{font-size:40px;line-height:46px}
  .jg-actions{grid-template-columns:repeat(auto-fit,minmax(200px,max-content));justify-content:center}
  .jg-fpwrap{max-width:440px;justify-self:center}
  .jg-fpwrap--small{max-width:240px}
  .jg-ad .pcc-ad{min-height:114px;margin:var(--space-7) auto}
  .jg-next{padding:var(--space-6)}
  .jg-next__list{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
@media (prefers-reduced-motion:reduce){.jg-swipe,.jg-duel{animation:none !important}.jg-dots i{animation:none;opacity:.6}}