.jeu{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto;
padding:0 clamp(20px,5vw,60px) clamp(60px,9vh,112px);
scroll-margin-top:clamp(76px,10vh,104px)}
.jeu-carte{background:rgba(255,255,255,.55);
border:1px solid rgba(28,28,38,.10);border-radius:24px;
padding:clamp(24px,3.4vw,40px);
box-shadow:0 30px 70px -50px rgba(28,28,38,.5)}
.jeu-kicker{display:block;font-size:12px;letter-spacing:.18em;
text-transform:uppercase;font-weight:600;color:var(--nf-encre);
margin-bottom:8px}
.jeu-titre{font-family:var(--title-font),serif;font-weight:400;
font-size:clamp(24px,2.8vw,34px);line-height:1.06;letter-spacing:-.025em;
color:var(--ink);margin:0 0 8px}
.jeu-titre em{font-style:italic;color:var(--nf-grand)}
.jeu-lead{font-size:15px;line-height:1.55;color:var(--ink-soft);
max-width:62ch;margin:0 0 clamp(16px,2.6vh,24px);text-wrap:pretty}
.jeu-corps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(20px,3vw,40px);align-items:start}
.jeu-choix{display:flex;flex-direction:column;gap:16px}
.jeu-lbl{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
font-weight:600;color:var(--ink-faint);margin-bottom:8px}
.jeu-opts{display:flex;flex-wrap:wrap;gap:8px}
.jeu-opts button{font:inherit;font-size:13.5px;color:var(--ink-soft);
background:rgba(255,255,255,.5);border:1px solid rgba(28,28,38,.14);
border-radius:12px;padding:8px 16px;cursor:pointer;
transition:background .2s,border-color .2s,color .2s}
.jeu-opts.lignes{display:flex;flex-direction:column;gap:8px}
.jeu-opts.lignes button{display:flex;align-items:center;gap:8px;
width:100%;text-align:left;padding:8px 16px;font-size:13.5px;
line-height:1.35}
.jeu-opts.lignes button::before{content:"";flex:0 0 auto;
width:13px;height:13px;border-radius:50%;
border:1px solid rgba(28,28,38,.26);background:#fff;
transition:border-color .2s,box-shadow .2s}
.jeu-opts.lignes button[aria-pressed="true"]::before{
border-color:var(--nf-encre);
box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 13px var(--nf-encre)}
@media (hover:hover){
.jeu-opts button:hover{background:#fff;border-color:rgba(28,28,38,.3);color:var(--ink)}
}
.jeu-opts button[aria-pressed="true"]{color:var(--nf-encre);background:#fff;
border-color:color-mix(in srgb,var(--nf) 55%,transparent);font-weight:500}
.jeu-opts button:focus-visible{outline:2px solid var(--nf);outline-offset:2px}
.jeu-opts.vignettes{display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.jeu-opts.vignettes button{display:flex;flex-direction:column;
align-items:stretch;gap:8px;padding:8px 8px 8px;border-radius:12px;
font-size:11.5px;line-height:1.25;text-align:center}
.jeu-vig{display:block;height:40px;border-radius:8px;overflow:hidden;
position:relative;background:var(--cream);
box-shadow:0 0 0 1px rgba(28,28,38,.10) inset}
.v-s0::after,.v-s1::after,.v-s2::after{content:"";position:absolute;
left:9px;right:9px;top:11px;height:4px;border-radius:2px;
background:color-mix(in srgb,var(--ink) 18%,transparent)}
.v-s1::before,.v-s2::before{content:"";position:absolute;left:9px;bottom:9px;
width:24px;height:9px;border-radius:999px;background:var(--nf-encre)}
.v-s2::before{box-shadow:28px 0 0 0 color-mix(in srgb,var(--nf) 34%,transparent)}
.v-rien{background:var(--cream)}
.v-chiffre::before{content:"404";position:absolute;right:4px;bottom:-9px;
font-family:var(--title-font),serif;font-size:30px;line-height:1;
letter-spacing:-.05em;color:color-mix(in srgb,var(--nf) 22%,transparent)}
.v-couleur{background:
radial-gradient(60% 70% at 12% 8%,color-mix(in srgb,var(--c-accent) 46%,transparent),transparent 70%),
radial-gradient(50% 60% at 92% 14%,color-mix(in srgb,var(--halo-tr) 46%,transparent),transparent 72%),
radial-gradient(60% 70% at 82% 96%,color-mix(in srgb,var(--halo-br) 40%,transparent),transparent 74%),
var(--cream)}
.v-signature::before{content:"";position:absolute;inset:18% 12%;
background:url(../assets/logo.png) center/contain no-repeat;
opacity:.3;filter:grayscale(1)}
.v-chantier::before{content:"";position:absolute;inset:8px 8px;
border:1px solid color-mix(in srgb,var(--nf) 70%,transparent)}
.v-chantier::after{content:"";position:absolute;inset:8px 8px;
outline:1px dashed color-mix(in srgb,var(--nf) 40%,transparent);
outline-offset:4px}
.v-aquarelle{background-image:
radial-gradient(78% 96% at 34% 54%,
color-mix(in srgb,var(--c-affil) 22%,transparent) 0 48%,
color-mix(in srgb,var(--c-affil) 32%,transparent) 66%,transparent 78%),
radial-gradient(70% 84% at 56% 40%,
color-mix(in srgb,var(--c-merchant) 17%,transparent) 0 46%,
color-mix(in srgb,var(--c-merchant) 26%,transparent) 64%,transparent 76%),
radial-gradient(58% 70% at 70% 68%,
color-mix(in srgb,var(--c-connect) 16%,transparent) 0 44%,
color-mix(in srgb,var(--c-connect) 24%,transparent) 62%,transparent 74%)}
.jeu-vue{position:sticky;top:96px}
.jeu-ecran > *{position:relative;z-index:1}
.jeu-ecran{position:relative;overflow:hidden;
aspect-ratio:16/10;border-radius:16px;
background:var(--cream);border:1px solid rgba(28,28,38,.12);
box-shadow:0 18px 44px -22px rgba(28,28,38,.34);
display:flex;flex-direction:column;justify-content:center;
padding:clamp(24px,3vw,32px);gap:16px;
transition:background .35s ease}
.jeu-ecran.deco-couleur{
background:
radial-gradient(60% 70% at 12% 8%,color-mix(in srgb,var(--c-accent) 34%,transparent),transparent 70%),
radial-gradient(50% 60% at 92% 14%,color-mix(in srgb,var(--halo-tr) 34%,transparent),transparent 72%),
radial-gradient(60% 70% at 82% 96%,color-mix(in srgb,var(--halo-br) 28%,transparent),transparent 74%),
var(--cream)}
.jeu-e-gros{position:absolute;right:-2%;bottom:-16%;z-index:0;
font-family:var(--title-font),serif;font-weight:400;font-size:clamp(120px,17vw,210px);
line-height:1;letter-spacing:-.05em;
color:color-mix(in srgb,var(--nf) 16%,transparent);pointer-events:none;
opacity:0;transition:opacity .35s ease}
.jeu-ecran.deco-chiffre .jeu-e-gros{opacity:1}
.jeu-e-msg{position:relative;z-index:1;margin:0;
font-family:var(--title-font),serif;font-weight:400;
font-size:clamp(20px,2.6vw,30px);line-height:1.1;letter-spacing:-.02em;
color:var(--ink);max-width:15ch;text-wrap:balance}
.jeu-e-btns{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;
min-height:34px;align-items:center}
.jeu-e-btns span{display:inline-flex;align-items:center;
font-size:12px;color:var(--ink-soft);
border:1px solid rgba(28,28,38,.18);border-radius:12px;padding:8px 16px;
background:rgba(255,255,255,.55)}
.jeu-e-btns span.plein{background:var(--nf-encre);color:var(--cream);border-color:transparent}
.jeu-dit{margin:12px 2px 0;font-size:14px;line-height:1.5;
color:var(--ink-soft);min-height:2.9em;text-wrap:pretty}
.jeu-champ{display:block;margin-top:8px}
.jeu-champ-lbl{display:block;font-size:11.5px;color:var(--ink-faint);
margin:0 0 4px 2px}
.jeu-champ input{width:100%;font:inherit;font-size:13.5px;
color:var(--ink);background:rgba(255,255,255,.5);
border:1px solid rgba(28,28,38,.14);
border-radius:12px;padding:8px 16px;
transition:border-color .2s,background .2s}
.jeu-champ input::placeholder{color:var(--ink-faint)}
.jeu-champ.actif input{background:#fff;
border-color:color-mix(in srgb,var(--nf) 55%,transparent)}
.jeu-champ input:focus-visible{outline:2px solid var(--nf);outline-offset:2px}
.jeu-ecran.deco-signature::before,
body.jeu-pose .nf-main.deco-signature::before{
content:"";position:absolute;z-index:0;pointer-events:none;
background:url(../assets/logo.png) center/contain no-repeat;
opacity:.13;filter:grayscale(1)}
.jeu-ecran.deco-signature::before{right:6%;bottom:8%;width:56%;height:34%}
body.jeu-pose .nf-main.deco-signature::before{left:auto;right:5%;bottom:8%;
width:min(42vw,520px);height:22vh;transform:none}
body.jeu-pose{overflow-x:clip}
body.jeu-pose .nf-main{position:relative}
body.jeu-pose .nf-main::after,
body.jeu-pose .nf-main::before{z-index:-1}
body.jeu-pose .nf-main > div{position:relative;z-index:1}
.jeu-ecran.deco-chantier{padding-top:40px}
.jeu-ecran.deco-chantier::after,
body.jeu-pose .nf-main.deco-chantier::after{
content:"";position:absolute;z-index:0;pointer-events:none;
top:26px;left:11px;right:11px;bottom:11px;
background-image:
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF)),
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF)),
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF)),
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF));
background-size:7px 7px;background-repeat:no-repeat;
background-origin:border-box;
background-position:0 0,100% 0,0 100%,100% 100%}
.jeu-ecran.deco-chantier,
body.jeu-pose .nf-main.deco-chantier{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22124%22%20height%3D%2248%22%20viewBox%3D%220%200%20124%2048%22%3E%3Cpath%20d%3D%22M4%202l12.5%2032%204.6-13.2L34.5%2016z%22%20fill%3D%22%231D3FBF%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%2225%22%20width%3D%2299%22%20height%3D%2221%22%20rx%3D%226%22%20fill%3D%22%231D3FBF%22%2F%3E%3Ctext%20x%3D%2226%22%20y%3D%2240%22%20font-family%3D%22Helvetica%2CArial%2Csans-serif%22%20font-size%3D%2212.5%22%20fill%3D%22%23ffffff%22%3EMarie-Liesse%3C%2Ftext%3E%3C%2Fsvg%3E");
background-repeat:no-repeat;
background-position:80% 78%;background-size:82px auto}
body.jeu-pose .nf-main.deco-chantier{
background-position:72% 80%;background-size:124px auto}
body.jeu-pose .nf-main.deco-chantier::after{display:none}
body.jeu-pose .nf-main.deco-chantier > div{position:relative}
body.jeu-pose .nf-main.deco-chantier > div::after{
content:"";position:absolute;z-index:0;pointer-events:none;
inset:-32px -32px;
border:1.5px solid color-mix(in srgb,var(--nf) 78%,transparent);
outline:1px dashed color-mix(in srgb,var(--nf) 38%,transparent);
outline-offset:14px;
background-image:
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF)),
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF)),
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF)),
linear-gradient(var(--fig,#1D3FBF),var(--fig,#1D3FBF));
background-size:7px 7px;background-repeat:no-repeat;
background-origin:border-box;
background-position:0 0,100% 0,0 100%,100% 100%}
.jeu-ecran.deco-chantier::after,
body.jeu-pose .nf-main.deco-chantier::after{
border:1.5px solid color-mix(in srgb,var(--nf) 78%,transparent);
outline:1px dashed color-mix(in srgb,var(--nf) 38%,transparent);
outline-offset:6px}
.jeu-ecran.deco-chantier::before,
body.jeu-pose .nf-main.deco-chantier::before{
content:var(--fig-nom,"Écran");position:absolute;z-index:0;pointer-events:none;
left:11px;top:26px;transform:translateY(-100%)}
body.jeu-pose .nf-main.deco-chantier::before{display:none}
body.jeu-pose .nf-main.deco-chantier > div::before{
content:var(--fig-nom,"Écran");position:absolute;z-index:0;pointer-events:none;
left:-34px;top:-30px;transform:translateY(-100%);
font-family:var(--body-font),sans-serif;font-size:12px;font-weight:500;
letter-spacing:.01em;line-height:1;
padding:4px 8px 4px;border-radius:4px 4px 0 0;
color:#fff;background:color-mix(in srgb,var(--nf) 82%,#000)}
.jeu-ecran.deco-chantier::before,
body.jeu-pose .nf-main.deco-chantier::before{
font-family:var(--body-font),sans-serif;font-size:10px;font-weight:500;
letter-spacing:.01em;line-height:1;
padding:3px 8px 4px;border-radius:3px 3px 0 0;
color:#fff;background:color-mix(in srgb,var(--nf) 82%,#000)}
body.jeu-pose .nf-main.deco-chantier::before{font-size:12px;padding:4px 8px 4px}
.jeu-ecran.deco-aquarelle::after,
body.jeu-pose .nf-main.deco-aquarelle::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
radial-gradient(78% 96% at 34% 54%,
color-mix(in srgb,var(--c-affil) 13%,transparent) 0 48%,
color-mix(in srgb,var(--c-affil) 19%,transparent) 66%,transparent 78%),
radial-gradient(70% 84% at 56% 40%,
color-mix(in srgb,var(--c-merchant) 10%,transparent) 0 46%,
color-mix(in srgb,var(--c-merchant) 16%,transparent) 64%,transparent 76%),
radial-gradient(58% 70% at 70% 68%,
color-mix(in srgb,var(--c-connect) 9%,transparent) 0 44%,
color-mix(in srgb,var(--c-connect) 14%,transparent) 62%,transparent 74%);
animation:lavis 28s ease-in-out infinite alternate}
body.jeu-pose .nf-main.deco-aquarelle::after{
left:calc(50% - 50vw);right:auto;width:100vw;
background-image:
radial-gradient(58% 104% at 30% 54%,
color-mix(in srgb,var(--c-affil) 12%,transparent) 0 50%,
color-mix(in srgb,var(--c-affil) 17%,transparent) 68%,transparent 80%),
radial-gradient(52% 92% at 52% 34%,
color-mix(in srgb,var(--c-merchant) 10%,transparent) 0 48%,
color-mix(in srgb,var(--c-merchant) 15%,transparent) 66%,transparent 78%),
radial-gradient(46% 78% at 70% 68%,
color-mix(in srgb,var(--c-connect) 8%,transparent) 0 46%,
color-mix(in srgb,var(--c-connect) 12%,transparent) 64%,transparent 76%);
animation:lavis 28s ease-in-out infinite alternate}
@keyframes lavis{
from{transform:translate(-1.6%,-1.2%) scale(1.06)}
to{transform:translate(1.8%,1.4%) scale(1.13)}}
@media (prefers-reduced-motion:reduce){
.jeu-ecran.deco-aquarelle::after,
body.jeu-pose .nf-main.deco-aquarelle::after{animation:none}}
.jeu-fin{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jeu-mot{margin:clamp(20px,3vh,24px) 0 0;padding-top:clamp(16px,2.4vh,24px);
border-top:1px solid rgba(28,28,38,.10);
font-size:14.5px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.jeu-mot[hidden]{display:none}
.jeu-mien{font:inherit;font-size:13.5px;color:var(--ink-soft);
background:transparent;border:1px solid rgba(28,28,38,.18);border-radius:12px;
padding:8px 16px;cursor:pointer;transition:border-color .2s,color .2s}
.jeu-mien:hover{border-color:var(--ink);color:var(--ink)}
.jeu-mien:focus-visible{outline:2px solid var(--nf-encre);outline-offset:3px}
.jeu-vrai{font:inherit;font-size:13.5px;font-weight:500;
color:var(--cream);background:var(--nf-encre);border:0;
border-radius:12px;padding:12px 20px;cursor:pointer;
transition:filter .2s}
.jeu-vrai:hover{filter:brightness(1.3)}
.jeu-vrai:focus-visible{outline:2px solid var(--nf-encre);outline-offset:3px}
.jeu-ruban{position:fixed;left:0;right:0;bottom:0;z-index:40;
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:8px 16px;padding:12px 20px;
background:color-mix(in srgb,var(--nf) 16%,var(--cream));
border-top:1px solid color-mix(in srgb,var(--nf) 28%,transparent);
box-shadow:0 -10px 30px -18px rgba(28,28,38,.4);
font-size:14px;color:var(--nf-encre)}
.jeu-ruban[hidden]{display:none}
.jeu-defaire{font:inherit;font-size:13.5px;font-weight:500;
color:var(--cream);background:var(--nf-encre);border:0;border-radius:12px;
padding:8px 16px;cursor:pointer;transition:filter .2s}
.jeu-defaire:hover{filter:brightness(1.2)}
.jeu-defaire:focus-visible{outline:2px solid var(--nf-encre);outline-offset:3px}
.nf-gros{position:absolute;right:2%;bottom:2%;z-index:0;pointer-events:none;
font-family:var(--title-font),serif;font-weight:400;
font-size:clamp(160px,26vw,420px);line-height:.82;letter-spacing:-.05em;
color:color-mix(in srgb,var(--nf) 15%,transparent)}
.nf-gros[hidden]{display:none}
body.jeu-pose .nf-main{position:relative}
.nf-vers-jeu{display:inline-flex;align-items:center;gap:8px;
font-size:14.5px;color:var(--ink-soft);text-decoration:none;
border-bottom:1px solid rgba(28,28,38,.22);padding-bottom:2px;
transition:color .25s,border-color .25s}
.nf-vers-jeu:hover{color:var(--ink);border-color:var(--ink)}
.nf-vers-jeu .ar{transition:transform .25s}
.nf-vers-jeu:hover .ar{transform:translateY(3px)}
@media (max-width:820px){
.jeu-corps{grid-template-columns:1fr;gap:16px}
.jeu-vue{order:-1;position:sticky;top:56px;z-index:3;
padding:8px;background:#fff;
border:1px solid rgba(28,28,38,.10);border-radius:16px;
box-shadow:0 10px 24px -16px rgba(28,28,38,.55)}
.jeu-ecran{aspect-ratio:16/10}
.jeu-dit{min-height:0;margin:8px 2px 0;font-size:14px}
.jeu-choix{gap:16px}
}
@media (max-width:420px){
.jeu-ecran{aspect-ratio:16/9;padding:20px;gap:8px}
.jeu-ecran.deco-chantier{padding-top:32px}
.jeu-e-msg{font-size:19px;max-width:20ch}
.jeu-e-btns{min-height:0}
.jeu-e-btns span{font-size:11px;padding:8px 12px}
.jeu-opts button{font-size:13px;padding:8px 12px}
.jeu-fin{gap:8px;flex-wrap:nowrap}
.jeu-vrai{flex:1 1 auto;padding:8px 8px;font-size:12px;white-space:nowrap}
.jeu-mien{flex:0 0 auto;padding:8px 12px;font-size:12px;white-space:nowrap}
.jeu-opts.vignettes{gap:8px}
.jeu-opts.vignettes button{font-size:10.5px;padding:4px 4px 8px}
.jeu-vig{height:34px}
}
@media (prefers-reduced-motion:reduce){
.jeu-ecran,.jeu-e-gros,.jeu-opts button,.nf-vers-jeu .ar{transition:none}
}
@media print{.jeu,.nf-vers-jeu,.jeu-ruban,.nf-gros{display:none!important}}
.nf-devine{margin:16px 0 0;font-size:clamp(15px,1.5vw,17px);line-height:1.55;
color:var(--ink-soft);max-width:46ch}
.nf-devine[hidden]{display:none}
.nf-devine-lien{color:var(--ink);font-weight:500;text-decoration:none;
background-image:linear-gradient(var(--nf),var(--nf));
background-repeat:no-repeat;
background-size:100% 1px;background-position:0 calc(100% + 2px);
transition:background-size .25s ease,color .25s ease}
.nf-devine-lien:hover{color:var(--nf-encre);background-size:100% 2px}
.nf-devine-lien .ar{color:var(--nf);display:inline-block;transition:transform .25s}
.nf-devine-lien:hover .ar{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){.nf-devine-lien,.nf-devine-lien .ar{transition:none}}