/* Habillage « Grande balade » (piste 1 validée le 13/10) : ciel et route, Maxou la mascotte, police ronde Fredoka,
   cartes colorées, boutons orange qui s'enfoncent, podium et confettis. Se charge après style.css. */
@font-face{font-family:"Fredoka";font-weight:400;font-display:swap;src:url(/fonts/fredoka-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url(/fonts/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(/fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(/fonts/fredoka-latin-700-normal.woff2) format("woff2")}
:root{
  --bg:#fffaf0; --card:#fff; --line:#efe6d3; --panel:#f6eedd; --tint:#fff1d6; --line2:#e6dcc6;
  --forest:#14254a; --head:#2b3a55; --ink:#2b3a55; --text:#2b3a55; --muted:#6b7a94; --faint:#a3adbf;
  --anis:#ff7a59; --anis-press:#f2643f; --on-anis:#fff; --orange-edge:#d9532f;
  --gold:#ffc93c; --gold-bg:#fff3b0; --gold-ink:#8a5a00;
  --sky1:#8fd3ff; --sky2:#d7f0ff; --lime:#4cb7f0;
  --font:"Fredoka","Figtree",system-ui,sans-serif;
}
body{font-family:var(--font);font-weight:500}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;color:var(--head)}
h1{font-size:34px;line-height:1.05}
.hl{background:none;color:var(--anis)}
.lead{font-weight:500;font-size:17px;color:var(--muted)}
.terms p,.terms li{font-family:"Figtree",system-ui,sans-serif}

/* En-tête : le nom en couleurs du logo */
.brand{font-weight:700;letter-spacing:-.01em;color:var(--forest)}
.brand .b2{color:#4cb7f0}
.sndbtn,.setbtn,.headlink{background:rgba(255,255,255,.85);box-shadow:0 3px 0 rgba(43,58,85,.10)}
.headlink{font-weight:600}

/* Boutons : ronds, orange, qui s'enfoncent */
.btn{border-radius:999px;font-weight:700;font-size:19px}
.btn-main{background:var(--anis);color:#fff;box-shadow:0 5px 0 var(--orange-edge)}
.btn-main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--orange-edge);background:var(--anis)}
.btn-main:disabled{box-shadow:0 5px 0 #d8d2c4;background:#ece6d8;color:var(--faint)}
.btn-ghost{background:#fff;border:0;box-shadow:0 4px 0 var(--line2)}
.btn-dark{background:var(--head);box-shadow:0 4px 0 #111a2c}

/* ---------- Accueil ---------- */
body[data-view="home"][data-step="1"]{background:linear-gradient(#a9dcf7,#c6ecfd 380px,var(--bg) 380px) no-repeat,var(--bg)}
body[data-view="home"]:not([data-step="1"]){background:linear-gradient(#c6ecfd,var(--bg) 160px) no-repeat,var(--bg)}
body[data-view="home"][data-step="1"] .headlink{display:none}
body[data-view="home"][data-step="1"] .app{gap:0}
.bl-hero{position:relative;margin:0 -16px;text-align:center}
.bl-sun{position:absolute;right:22px;top:-6px;width:54px;height:54px;border-radius:50%;background:#ffe066;box-shadow:0 0 0 10px rgba(255,224,102,.35),0 0 0 22px rgba(255,224,102,.15)}
.bl-title{position:relative;padding:14px 20px 0}
.bl-title h1{font-size:36px;line-height:1.02;color:#14254a}
.bl-title .hl{color:#14254a}
.bl-title .hl::after{content:"";display:inline-block}
.bl-title .lead{color:#22324f;font-size:16.5px;font-weight:500;margin-top:8px;line-height:1.3;text-wrap:balance}
.bl-scene{height:min(56vw,250px);margin-top:4px;background:url(/paysage.jpg) center 40%/cover no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.bl-sheet{position:relative;margin:-30px -16px 0;padding:22px 16px 6px;background:var(--bg);border-radius:30px 30px 0 0;display:flex;flex-direction:column;gap:14px;box-shadow:0 -6px 16px rgba(20,37,74,.06)}
.bl-sheet h2{text-align:center;font-size:26px;color:#14254a}
.bl-modes{gap:10px}
/* les deux encarts « Chacun son téléphone » / « Un seul téléphone » ont toujours la même taille */
.bl-deux{display:grid;grid-auto-rows:1fr;gap:10px}
.bl-modes .opt{text-align:center;align-items:center;padding:14px 10px 16px;background:#fff!important;box-shadow:0 0 0 2px var(--line2),0 5px 0 2px var(--line2)}
.bl-modes .opt .art{height:84px;width:100%;background:#eef8ff;display:flex;justify-content:center;margin-bottom:6px}
.bl-modes .opt:nth-child(2) .art{background:#fff1e6}
.bl-modes .opt b{font-size:18px;color:#14254a}
.bl-modes .opt small{font-size:14px}
.bl-modes .reco{display:inline-block;margin:8px auto 0;background:#d6eefc;color:#14254a;font-size:13px;padding:4px 12px}
.bl-modes .opt[aria-pressed="true"]{background:#eaf6ff!important;box-shadow:0 0 0 3px #14254a,0 5px 0 3px #14254a}
.bl-modes .opt .radio{top:10px;right:10px;width:28px;height:28px}
.bl-modes .opt[aria-pressed="true"] .radio{background:var(--anis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;border-color:var(--anis);box-shadow:none}
.bl-go{min-height:64px;font-size:26px;margin-top:4px}
.bl-join{font-size:17px;font-weight:600;color:#14254a;align-self:center;margin-top:-4px}
.bl-dots{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:14px}
.bl-dots{flex-direction:row;justify-content:center;flex-wrap:wrap}
.bl-dots span{width:100%;text-align:center}
.bl-dots i{width:10px;height:10px;border-radius:50%;background:#dcd6c8}
.bl-dots i.on{background:var(--anis)}
.tagline{font-size:23px;color:var(--anis);margin:0 0 -6px 2px;transform:rotate(-2deg)}
.steps .stepn{font-weight:600}
.dots i{height:10px;border-radius:5px;background:#ece4d2}.dots i.on{background:var(--anis)}
.back{font-weight:600}
.reco{background:#fff;color:var(--anis);font-weight:700;text-transform:none;letter-spacing:0;font-size:13px}
/* les grandes tuiles de choix, chacune sa couleur */
.opt{border:0;border-radius:26px;box-shadow:0 5px 0 rgba(43,58,85,.08);padding:14px}
.opt b{font-weight:700;font-size:18px}
.opt small{font-weight:500;color:#55627a}
.opt .art{background:rgba(255,255,255,.7);border-radius:18px;padding:6px}
.grid1 .opt:nth-child(1),.grid2 .opt:nth-child(4n+1){background:#ffe27a}
.grid1 .opt:nth-child(2),.grid2 .opt:nth-child(4n+2){background:#bfe6ff}
.grid2 .opt:nth-child(4n+3){background:#ffd8cc}
.grid2 .opt:nth-child(4n+4){background:#d5f5d0}
.grid1 .opt .art{height:88px;display:flex;align-items:center;justify-content:center}
.opt .radio{border-color:rgba(43,58,85,.3);background:#fff}
.opt[aria-pressed="true"]{border:0;padding:14px;box-shadow:0 0 0 4px var(--head),0 5px 0 4px var(--head)}
.opt[aria-pressed="true"] .radio{background:var(--anis);border-color:var(--anis)}
.pill{border:0;box-shadow:0 4px 0 var(--line2);font-weight:600}
.pill[aria-pressed="true"]{background:var(--anis);color:#fff;box-shadow:0 4px 0 var(--orange-edge)}
.pill[aria-pressed="true"] small{color:#fff}
.again{background:#fff;border:0;box-shadow:0 4px 0 var(--line2);border-radius:22px}
.again b{font-weight:700;color:var(--anis)}
.pass{border:0;box-shadow:0 4px 0 var(--line2);border-radius:20px}
.pass.on{background:#e6f7dc;box-shadow:0 0 0 3px var(--forest)}
.pass input:checked{background:var(--forest)}
input[type=text],input[type=email],input[type=password]{border:0;box-shadow:inset 0 0 0 2px var(--line2);border-radius:18px;font-weight:600}
.addp,.nickbtn{background:#fff;box-shadow:0 3px 0 var(--line2);color:var(--head);font-weight:600}
.recap span{background:#fff;box-shadow:0 3px 0 var(--line2);font-weight:600}
.card{border:0;box-shadow:0 5px 0 rgba(43,58,85,.08);border-radius:26px}
.chip{background:#fff;box-shadow:0 3px 0 var(--line2);font-weight:600}
.onair{background:var(--forest)}


/* accueil : cartes en liste (texte à gauche, dessin à droite, flèche) et 2 gros boutons */
.bl-modes .opt{display:grid;grid-template-columns:1fr 104px 18px;grid-template-rows:auto auto;column-gap:10px;text-align:left;align-items:center;padding:12px 12px 12px 16px!important}
.bl-modes .opt .art{grid-column:2;grid-row:1/3;height:70px;margin:0;background:none!important;padding:0}
.bl-modes .opt b{grid-column:1;grid-row:1;align-self:end;font-size:19px}
.bl-modes .opt small{grid-column:1;grid-row:2;align-self:start}
.bl-modes .opt::after{content:"›";grid-column:3;grid-row:1/3;font-size:30px;font-weight:600;color:#14254a;line-height:1}
.bl-modes .opt .radio{display:none}
.bl-modes .opt[aria-pressed="true"] .radio{display:block;top:-8px;right:-6px;left:auto}
.bl-modes .reco{display:table;margin:0 0 4px;padding:2px 10px;background:#d6eefc;color:#14254a;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0}
.bl-join{align-self:stretch;margin-top:0;min-height:52px;background:#fff;box-shadow:0 0 0 2px #14254a;font-size:18px;color:#14254a}
.bl-go{min-height:60px;font-size:25px}

/* ---------- Partie ---------- */
body[data-view="game"]{background:var(--bg)}
.gtop h1{font-size:27px}
/* les scores en haut, en petites étiquettes */
.board{flex-direction:row;flex-wrap:wrap;gap:8px;border:0;background:none;box-shadow:none;padding:0}
.board .bh{display:none}
.board .br{display:flex;flex-direction:column;align-items:flex-start;gap:0;background:#fff;border-radius:16px;padding:6px 12px 6px 44px;position:relative;box-shadow:0 3px 0 var(--line2);min-width:0}
.board .br::before{content:"";position:absolute;left:8px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:#ffb08f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='7.5' r='3.6' fill='%23fff'/%3E%3Cpath d='M3.5 17.5q.8-5.4 6.5-5.4t6.5 5.4z' fill='%23fff'/%3E%3C/svg%3E") center/22px no-repeat}
.board .br:nth-child(3)::before{background-color:#8fd0f5}.board .br:nth-child(4)::before{background-color:#c6b3f5}.board .br:nth-child(5)::before{background-color:#9fdc86}
.board .br .pos,.board .br .bt{display:none}
.board .br .nm{font-weight:600;font-size:14px;color:#14254a}
.board .br .sc{font-weight:700;font-size:15px;color:var(--anis)}
.board .br.lead{box-shadow:0 0 0 2px var(--gold),0 3px 0 2px var(--gold)}
.pc{background:#fff;box-shadow:0 3px 0 var(--line2)}
.pc.me{box-shadow:0 0 0 2px var(--anis)}
/* le paysage et le chemin de l'objectif */
.goalbar{position:relative;background:url(/paysage.jpg) 70% 12%/cover no-repeat;border-radius:26px;padding:10px;min-height:150px;box-shadow:0 0 0 6px var(--bg);grid-template-columns:1fr auto auto auto;align-content:space-between;overflow:hidden}
.goalbar::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,0) 40%,rgba(255,250,240,.55));pointer-events:none}
.goalbar>*{position:relative}
.goalbar .t{background:rgba(255,255,255,.9);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;justify-self:start;color:#14254a}
.goalbar .lead2{background:rgba(255,255,255,.9);border-radius:12px;padding:4px 10px;display:inline-block;color:#14254a}
.clock{font-weight:700;border-left:0!important;background:#fff;border-radius:999px;padding:4px 12px!important;color:#14254a}
.gbtn{border:0;background:#fff;color:#14254a;border-radius:999px}
.goalbar .gact #morebtn{background:rgba(255,255,255,.95);color:#14254a;box-shadow:0 3px 0 rgba(0,0,0,.12);border-radius:999px;min-height:36px}
.goalbar:has(.bl-path)>div:first-child{display:contents}
.goalbar:has(.bl-path) .t{grid-column:1;grid-row:1;align-self:center}
.goalbar:has(.bl-path) .prog{grid-column:1/-1;grid-row:2;margin:6px 0 0;display:block}
.goalbar:has(.bl-path) .prog small{display:none}
.goalbar:has(.bl-path) #morebtn{grid-row:3}
.bl-path{display:block;position:relative}
.bl-path svg{width:100%;height:auto;display:block;overflow:visible}
.bl-score{position:absolute;right:4px;bottom:-6px;background:#fff;border-radius:999px;padding:3px 12px;font-weight:700;font-size:15px;color:#14254a;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.bl-score::first-line{color:var(--anis)}
/* cartes : titre et points en haut, dessin au milieu, bouton « Vu ! » */
.cards:not(.many) .ch,.ch{border:0;border-radius:22px;box-shadow:0 4px 0 rgba(43,58,85,.08);position:relative;padding:10px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t p" "art art" "mini mini" "go go";align-items:start;gap:6px;text-align:left}
.ch .t{grid-area:t;font-weight:600;font-size:16px;line-height:1.12;color:#14254a;margin:0;min-height:36px}
.ch .p{grid-area:p;margin:0;padding:2px 9px!important;border-radius:999px;background:#d6eefc;color:#14254a;font-size:13.5px;font-weight:700;align-self:start}
.ch .art{grid-area:art;justify-content:center;background:none;border-radius:0;padding:0}
.cards:not(.many) .ch .art{height:clamp(52px,8svh,72px)}
.ch .cat,.ch .h{display:none!important}
.ch .go{grid-area:go}
.ch .go{border-radius:999px;background:var(--anis);color:#fff;font-weight:700;font-size:17px;box-shadow:0 4px 0 var(--orange-edge);min-height:42px}
.ch .go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--orange-edge);background:var(--anis)}
.ch .go.no{background:#fff;color:var(--head);box-shadow:0 4px 0 var(--line2)}
.ch .sayb,.ch .swapb{grid-area:mini;position:static;align-self:center;background:#eef6ff}
.ch .sayb{justify-self:start;width:28px;height:28px;font-size:13px}
.ch .swapb{justify-self:end;padding:5px 8px;font-size:11.5px}
.ch.bonus{background:linear-gradient(#fff8d6,#ffe9a3);box-shadow:0 4px 0 #f0c64a;border:0!important;padding:10px!important}
.ch.bonus .p{background:#ffc93c;color:#5b3d00}
.ch.bonus .art{background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%)}
.ch.bonus .go{background:#14254a;box-shadow:0 4px 0 #0a1428}
.ch.bonus .sayb,.ch.bonus .swapb{background:rgba(255,255,255,.9)}
.cards.many .ch{grid-template-areas:"t p" "art art" "mini mini" "go go";padding:8px}
.stopbtn{border:0;background:#fff;box-shadow:0 0 0 2px #14254a;color:#14254a;font-weight:600}
.toast{border-radius:999px;background:#14254a;font-weight:600}
.toast button{background:var(--anis);color:#fff}
.cd{background:linear-gradient(#8fd3ff,#4cb7f0)}
.cd .n{color:#fff}
.pzov{background:linear-gradient(#8fd3ff,#4cb7f0)}
.pzov .pzi{color:#fff}
.sheet{border-radius:30px 30px 0 0}

/* ---------- Résultat ---------- */
body[data-view="end"]{background:linear-gradient(#8fd3ff,#cdeeff 330px,transparent 330px) no-repeat,url(/paysage.jpg) 75% 330px/170% auto no-repeat,var(--bg)}
body[data-view="end"] .head{order:-3}
body[data-view="end"] .head .brand{color:#14254a}
body[data-view="end"] .bl-podium ~ h1{order:-2;text-align:center;color:#14254a;font-size:40px;margin-top:4px}
body[data-view="end"] .bl-win{order:-1}
body[data-view="end"] .bl-podium ~ .lead{text-align:center;color:#14254a;font-weight:600;background:rgba(255,255,255,.85);border-radius:999px;padding:4px 14px;align-self:center}
.bl-win{position:relative;height:150px;margin:-14px -16px 0;display:flex;justify-content:center}
.bl-trophy{width:150px;position:relative;z-index:1;animation:bl-bob 2s ease-in-out infinite}
.bl-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bl-confetti i{position:absolute;display:block;transform:rotate(var(--r));animation:bl-fall 3s linear infinite}
@keyframes bl-fall{from{transform:translateY(-40px) rotate(var(--r))}to{transform:translateY(60px) rotate(calc(var(--r) + 200deg))}}
@keyframes bl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.bl-podium{display:flex;justify-content:center;align-items:flex-end;gap:0;margin-top:70px}
.bl-step{flex:1;max-width:33%;background:linear-gradient(#fbf7ee,#ece4d3);border-radius:6px 6px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:8px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.05),0 6px 14px rgba(0,0,0,.12);position:relative;color:#14254a}
.bl-step.first{z-index:1;margin:0 -2px}
.bl-laurel{position:absolute;top:6px;width:52px;left:50%;margin-left:-26px}
.bl-step .n{font-size:30px;font-weight:700;line-height:1;margin-top:4px;position:relative}
.bl-step.first .n{font-size:38px}
.bl-step b{font-weight:600;font-size:16px;margin-top:6px;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-step small{font-size:13px;font-weight:600}
.bl-step em{font-style:normal;color:var(--anis);font-size:19px;font-weight:700}
body[data-view="end"] .bl-podium ~ section.card:first-of-type .rank:nth-child(-n+3){display:none}
body[data-view="end"] .bl-podium ~ section.card:first-of-type:not(:has(.rank:nth-child(4))){display:none}
.rank{border-top:1.5px dashed var(--line2)}
body[data-view="end"] .chips{justify-content:center}
body[data-view="end"] .btn-ghost{box-shadow:0 0 0 2px #14254a;color:#14254a}
@media (prefers-reduced-motion:reduce){.bl-trophy,.bl-confetti i{animation:none}}

/* Mode nuit */
:root[data-theme="dark"]{--bg:#141b2e;--card:#1e2740;--line:#2c3654;--panel:#232d48;--line2:#2c3654;--head:#eef2fb;--ink:#eef2fb;--text:#d9e0ee;--muted:#a6b1c8}
:root[data-theme="dark"] .ch .t,:root[data-theme="dark"] .bl-sheet h2,:root[data-theme="dark"] .bl-modes .opt b{color:var(--head)}
:root[data-theme="dark"] .bl-modes .opt{background:var(--card)!important}

/* Accueil : le bouton « C'est parti ! » reste visible sans faire défiler, même sur un petit iPhone */
.bl-title{padding-top:4px}
.bl-title h1{font-size:clamp(28px,8vw,34px)}
.bl-title .lead{font-size:15.5px;margin-top:4px}
.bl-scene{height:clamp(80px,calc(100svh - 530px),250px)}
.bl-sheet{gap:10px;padding-top:16px;margin-top:-24px}
.bl-sheet h2{font-size:23px}
.bl-modes{gap:8px}
.bl-modes .opt{padding:8px 12px 8px 16px!important}
.bl-modes .opt .art{height:58px}
.bl-go{min-height:56px}
@media (max-height:600px){.bl-title .lead{display:none}}

/* Logo « La route » : l'image du logo choisi, telle quelle (route corail) */
.brand .wm-img{height:46px;width:auto;display:block}
:root[data-theme="dark"] .brand .wm-img{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)}

/* Accueil : on garde toute l'image (la voiture reste visible), on réduit le ciel au-dessus */
.bl-scene{height:44vw;max-height:260px;background-position:center bottom;-webkit-mask-image:linear-gradient(transparent,#000 12%);mask-image:linear-gradient(transparent,#000 12%)}
.bl-title{padding:0 16px}
.bl-title h1{font-size:clamp(26px,7.4vw,32px);line-height:1.05}
.bl-sheet{margin-top:-12px}
@media (max-height:760px){.bl-title .lead{display:none}}
@media (max-height:600px){.bl-sheet h2{display:none}}
@media (max-height:660px){.bl-modes .opt small{display:none}.bl-modes .opt .art{height:48px}}

/* Nouveau paysage (image nette de Nicolas) : on montre la mer, le village et la voiture */
.bl-scene{height:clamp(150px,calc(100svh - 430px),262px);max-height:none;background-size:cover;background-position:center 62%}
body[data-view="end"]{background:linear-gradient(#8fd3ff,#cdeeff 330px,transparent 330px,transparent 560px,var(--bg) 600px) no-repeat,url(/paysage.jpg) center 330px/100% auto no-repeat,var(--bg)}

/* Plus de vert : bleu nuit + bleu ciel (celui de la petite voiture) avec le corail */
.ch .p,.place .p,.ch .cat.trip,.live{color:#14254a}
.live::before{background:#4cb7f0}
.br .bt i{background:#4cb7f0}
.reco,.bl-modes .reco{background:#d6eefc!important;color:#14254a!important}
.rme i::before{border-bottom-color:#14254a}

/* Entrée vers la version Petits */
.pt-mot{font-weight:700;letter-spacing:.5px}
.pt-mot b{display:inline-block}
.pt-mot b:nth-child(1),.pt-mot b:nth-child(5){color:#ff5f37}.pt-mot b:nth-child(2),.pt-mot b:nth-child(6){color:#4cb7f0}.pt-mot b:nth-child(3){color:#ffb400}.pt-mot b:nth-child(4){color:#14254a}
.pt-mot b:nth-child(odd){transform:translateY(-1px) rotate(-6deg)}.pt-mot b:nth-child(even){transform:translateY(1px) rotate(5deg)}
.bl-scene{position:relative}
.pt-pastille{position:absolute;left:12px;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:0;background:#fff;border-radius:18px;padding:5px 12px 6px;box-shadow:0 4px 0 rgba(20,37,74,.18);text-decoration:none;transform:rotate(-4deg);font-size:21px;line-height:1.05}
.pt-pastille small{font-size:12px;font-weight:600;color:#14254a}
.pt-carte{display:flex;align-items:center;gap:10px;margin-top:2px;padding:8px 10px 8px 12px;border-radius:18px;background:#d6eefc;border:2px dashed #4cb7f0;text-decoration:none;color:#14254a}
.pt-carte .pt-ico{font-size:34px;line-height:1}
.pt-carte .pt-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.pt-carte .pt-txt b{font-size:18px;white-space:nowrap}
.pt-carte .pt-txt small{font-size:13px;color:#4a5878}
.pt-carte .pt-btn{background:#ff5f37;color:#fff;font-weight:700;font-size:16px;padding:9px 14px;border-radius:999px;box-shadow:0 3px 0 #d94a26;white-space:nowrap}
.pt-carte:active .pt-btn{transform:translateY(2px);box-shadow:0 1px 0 #d94a26}
.pt-lien{align-self:center;font-weight:600;color:#14254a;font-size:16px;text-decoration:none;display:flex;gap:6px;align-items:center;padding:6px 10px}
.pt-lien .pt-mot{font-size:19px}
/* Avec la carte Junior, l'image laisse sa place pour garder « C'est parti ! » visible */
.bl-hero:has(+ .bl-sheet .pt-carte) .bl-scene{height:clamp(120px,calc(100svh - 505px),262px)}

/* ===== Étape 2 « On part où ? » d'après la maquette de Nicolas ===== */
.op{display:block}
.op-steps{display:flex;align-items:center;gap:8px;margin:0 0 4px}
.op-back{width:36px;height:36px;flex:none;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 6px rgba(20,37,74,.14);display:grid;place-items:center;color:#14254a;padding:0;cursor:pointer}
.op-back svg{width:18px;height:18px;transform:scaleX(-1)}
.op-rond{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}
.op-rond i{font-style:normal;flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:16px;background:#eef0f3;color:#8a93a3;position:relative}
.op-rond i.ici{width:38px;height:38px;font-size:18px;background:#ff6b4a;color:#fff;box-shadow:0 0 0 4px #ffdcd2}
.op-rond i.fait{background:#ffe08a;color:#ff5f37}
.op-rond i.fait::after{content:"✓";position:absolute;top:-5px;right:-6px;width:17px;height:17px;border-radius:50%;background:#ff5f37;color:#fff;font-size:10px;line-height:17px;text-align:center;box-shadow:0 0 0 2px #fff}
.op-rond b{flex:0 1 20px;min-width:8px;border-top:2px dashed #b8c0cc;margin:0 4px}
.op-n{flex:none;font-size:13px;font-weight:600;color:#14254a}
.op-t{text-align:center;font-size:clamp(28px,8.4vw,34px);font-weight:700;color:#14254a;margin:4px 0 0;line-height:1.1}
.op-t::before,.op-t::after{content:"";display:inline-block;width:15px;height:5px;border-radius:3px;background:#ffcf3f;vertical-align:middle;margin:0 10px 6px;transform:rotate(-25deg)}
.op-t::after{transform:rotate(25deg)}
.op-sub{text-align:center;color:#5a6478;margin:2px 0 10px;font-size:15px}
.op-trajets{display:grid;gap:10px}
.op-trajet,.op-g{position:relative;display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:2px solid transparent;border-radius:22px;padding:8px 12px 8px 8px;box-shadow:0 3px 10px rgba(20,37,74,.08);text-align:left;font:inherit;color:#14254a;cursor:pointer}
.op-trajet img{width:48%;height:auto;flex:none;display:block}
.op-txt{min-width:0;padding-right:22px}
.op-txt b{display:block;font-size:18px;font-weight:700;line-height:1.15;color:#14254a}
.op-txt small{display:block;font-size:14px;line-height:1.25;color:#5a6478;margin-top:3px}
.op-coche{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:50%;border:2px solid #c9ced6;background:#fff}
.op-trajet[aria-pressed="true"],.op-g[aria-pressed="true"]{border-color:#ff7a59;background:#fff5f1}
[aria-pressed="true"]>.op-coche{background:#ff5f37;border-color:#ff5f37}
[aria-pressed="true"]>.op-coche::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.op-h2{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:700;color:#14254a;margin:14px 0 8px}
.op-h2 img{height:30px;width:auto}
.op-durees{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.op-durees button{min-height:54px;border-radius:16px;border:0;background:#fff;box-shadow:0 2px 8px rgba(20,37,74,.1),0 3px 0 #ece4d2;font:inherit;font-weight:700;font-size:17px;color:#14254a;line-height:1.05;padding:4px 2px;cursor:pointer}
.op-durees button small{display:block;font-size:12px;font-weight:500;color:#5a6478;margin-top:2px}
.op-durees button[aria-pressed="true"]{background:#ff6b4a;color:#fff;box-shadow:0 4px 0 #e0502f}
.op-durees button[aria-pressed="true"] small{color:#fff}
.op-gagner{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op-g{gap:6px;padding:8px 8px 8px 6px;border-radius:20px}
.op-g img{width:clamp(50px,15vw,64px);height:auto;flex:none}
.op-g .op-txt b{font-size:17px}
.op-g .op-txt small{font-size:13px}
.op-g .op-txt{padding-right:4px}
.op-g .op-txt b{padding-right:18px}
.op-g .op-coche{top:6px;right:6px;width:22px;height:22px}
.op-g[aria-pressed="true"]>.op-coche::after{left:5px;top:2px;width:5px;height:10px}
.op-note{margin:8px 0 0;color:#5a6478}
.op-bonus{display:flex;align-items:center;gap:8px;background:#fff3c9;border-radius:14px;padding:5px 12px 5px 8px;margin:12px 0;font-size:14px;color:#14254a}
.op-bonus img{height:24px;width:auto;flex:none}
.op-go{position:sticky;bottom:10px;z-index:3;width:100%;min-height:56px;border:0;border-radius:999px;background:#ff6b4a;color:#fff;font:inherit;font-weight:700;font-size:21px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 5px 0 #e0502f;cursor:pointer}
.op-go svg{width:22px;height:22px}
.op-go:disabled{background:#ece4d2;color:#b9ad95;box-shadow:0 5px 0 #ddd2bb;cursor:default}
.op-trajet img{width:40%}
.op-trajet .op-txt{padding:18px 0 0}
.op-trajet .op-txt b{font-size:clamp(16px,4.6vw,19px);white-space:nowrap}
.op-gagner{gap:8px}
.op-g img{width:clamp(44px,12.5vw,60px)}
.op-g .op-txt small{font-size:12.5px}

/* ===== Étape 4 « À vous de jouer ! » d'après la maquette de Nicolas ===== */
.op4{position:relative}
.op-t4::before,.op-t4::after{background:#ff7a59}
.op-sub4{position:relative;padding:0 64px}
.op-route{position:absolute;right:-8px;top:-6px;width:70px;height:auto;pointer-events:none}
.op-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 8px}
.op-ph .op-h2{margin:0}
.op-sans{display:flex;align-items:center;gap:6px;border:0;background:#fff;border-radius:999px;padding:5px 14px 5px 8px;font:inherit;font-weight:600;font-size:15px;color:#14254a;box-shadow:0 2px 8px rgba(20,37,74,.1),0 3px 0 #ece4d2;cursor:pointer;white-space:nowrap}
.op-sans img{width:26px;height:auto}
.op-joueurs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.op-joueurs.un{grid-template-columns:1fr}
.op-joueur{position:relative;background:#fff;border-radius:20px;box-shadow:0 3px 10px rgba(20,37,74,.08);padding:10px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.op-av{width:64px;height:64px}
.op-joueur b{font-size:16px;font-weight:600;color:#5a6478;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-joueur input{width:100%;min-width:0;height:42px;border:2px solid #e6dcc6;border-radius:12px;background:#fff;padding:0 12px;font:inherit;font-size:16px;color:#14254a}
.op-joueur input::placeholder{color:#a5acb8}
.op-joueur input:focus{outline:none;border-color:#ff7a59}
.op-crayon,.op-x{position:absolute;top:8px;width:30px;height:30px;border-radius:50%;border:0;background:#f1f2f4;color:#14254a;display:grid;place-items:center;padding:0;cursor:pointer}
.op-crayon{right:8px}.op-crayon svg{width:15px;height:15px}
.op-x{left:8px;font-size:18px;line-height:1;color:#8a93a3}
.op-joueurs.un .op-joueur{flex-direction:row;flex-wrap:wrap;justify-content:center}
.op-joueurs.un .op-joueur b{display:none}
.op-joueurs.un .op-av{width:52px;height:52px}
.op-joueurs.un .op-joueur input{flex:1;width:auto;margin-right:34px}
.op-ajout{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:10px;min-height:52px;border:2px dashed #ff7a59;border-radius:18px;background:#fff3ef;font:inherit;font-weight:700;font-size:18px;color:#14254a;cursor:pointer}
.op-ajout span{color:#ff5f37;font-size:28px;font-weight:600;line-height:1;margin-top:-3px}
.op-info{display:flex;align-items:center;gap:10px;background:#d6eefc;border-radius:16px;padding:10px 12px;margin-top:10px;font-size:14px;color:#14254a}
.op-info svg{width:26px;height:26px;flex:none}
.op-pass{display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;box-shadow:0 3px 10px rgba(20,37,74,.08);padding:12px 14px;margin-top:12px;cursor:pointer}
.op-pass input{position:absolute;opacity:0;width:1px;height:1px}
.op-case{flex:none;width:30px;height:30px;border:2.5px solid #b3b9b4;border-radius:8px;position:relative;margin-right:2px}
.op-pass input:checked+.op-case{background:#ff5f37;border-color:#ff5f37}
.op-pass input:checked+.op-case::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:14px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.op-pass input:focus-visible+.op-case{outline:3px solid #4cb7f0;outline-offset:2px}
.op-pt{border-left:2px solid #ece4d2;padding-left:12px}
.op-pt b{display:block;font-size:17px;font-weight:700;color:#14254a}
.op-pt small{display:block;font-size:13.5px;line-height:1.3;color:#5a6478}
.op-pt a{color:#14254a;text-decoration:underline}
.op-bas{position:sticky;bottom:0;z-index:3;margin-top:14px;padding:8px 0 10px;background:linear-gradient(rgba(255,250,240,0),var(--bg,#fdf8ee) 30%)}
.op-bas .op-go{position:static}
.op-manque{text-align:center;margin:8px 0 0;font-size:14px;color:#5a6478}

/* ===== Étape 3 « Choisissez votre thème » d'après la maquette de Nicolas ===== */
.op-route3{display:block;width:100%;max-width:330px;height:auto;margin:2px auto 0}
.op-t3{text-align:center;font-size:clamp(25px,7.6vw,32px);font-weight:700;color:#14254a;margin:2px 0 12px;line-height:1.1}
.op-themes{display:grid;gap:12px}
.op-theme{position:relative;display:flex;align-items:center;gap:12px;width:100%;border:0;border-radius:24px;padding:10px;text-align:left;font:inherit;color:#14254a;cursor:pointer}
.op-theme.jaune{background:#fee677;box-shadow:0 5px 0 #f0cf4c}
.op-theme.bleu{background:#bee6fd;box-shadow:0 5px 0 #9fd2f1}
.op-theme img{width:43%;height:auto;flex:none;display:block}
.op-theme .op-txt{padding:0 22px 0 0}
.op-theme .op-txt b{font-size:clamp(20px,6vw,24px);line-height:1.1}
.op-theme .op-txt small{font-size:14px;color:#2d3c5a;margin-top:6px}
.op-theme .op-txt em{display:block;font-style:normal;font-weight:700;font-size:14px;line-height:1.25;margin-top:6px}
.op-direct{display:inline-block;margin-top:6px;background:#14254a;color:#fff;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.op-theme .op-coche{top:10px;right:10px;width:28px;height:28px;border-color:#fff;background:rgba(255,255,255,.7)}
.op-theme[aria-pressed="true"]{outline:3px solid #14254a;outline-offset:-3px}
.op-theme[aria-pressed="true"]>.op-coche{background:#14254a;border-color:#14254a}
.op3 .op-go{margin-top:16px}

/* ===== Étapes 2 à 4 : tout tient dans l'écran (resserré si besoin) ===== */
body[data-view="home"]:not([data-step="1"]) .app{padding-bottom:10px}
body.serre{padding-top:8px!important;padding-bottom:6px!important}
body.serre .app{gap:8px!important;padding-bottom:4px}
body.serre .op-steps{margin:0}
body.serre .op-back{width:32px;height:32px}
body.serre .op-t{font-size:clamp(24px,7vw,30px)}
body.serre .op-sub{margin:0 0 6px;font-size:14px}
body.serre .op-trajets,body.serre .op-themes{gap:8px}
body.serre .op-trajet{padding:5px 10px 5px 6px}
body.serre .op-trajet img{width:34%}
body.serre .op-trajet .op-txt{padding-top:12px}
body.serre .op-h2{margin:8px 0 6px;font-size:19px}
body.serre .op-h2 img{height:24px}
body.serre .op-durees button{min-height:46px}
body.serre .op-g{padding:5px 6px 5px 4px}
body.serre .op-g img{width:44px}
body.serre .op-bonus{margin:8px 0;padding:3px 10px 3px 6px}
body.serre .op-bonus img{height:20px}
body.serre .op-go{min-height:50px;font-size:19px}
body.serre .op3 .op-go{margin-top:10px}
body.serre .op-route3{max-width:220px}
body.serre .op-t3{margin:0 0 8px}
body.serre .op-theme{padding:7px}
body.serre .op-theme img{width:36%}
body.serre .op-theme .op-txt small,body.serre .op-theme .op-txt em{margin-top:3px}
body.serre .op-ph{margin:6px 0 6px}
body.serre .op-joueur{padding:6px 8px 8px;gap:2px}
body.serre .op-av{width:48px;height:48px}
body.serre .op-joueur input{height:38px}
body.serre .op-ajout{min-height:44px;margin-top:8px}
body.serre .op-pass{padding:8px 12px;margin-top:8px}
body.serre .op-bas{margin-top:8px;padding:4px 0 2px}
body.serre .op-manque{margin-top:4px}
body[data-view="home"]:not([data-step="1"]){padding-bottom:10px}
.op-joueurs.nombreux{grid-template-columns:repeat(3,1fr);gap:8px}
.op-joueurs.nombreux .op-joueur{padding:6px 6px 8px;gap:3px}
.op-joueurs.nombreux .op-av{width:42px;height:42px}
.op-joueurs.nombreux .op-joueur b,.op-joueurs.nombreux .op-crayon{display:none}
.op-joueurs.nombreux .op-joueur input{height:36px;font-size:15px;padding:0 8px}
.op-joueurs.nombreux .op-x{top:4px;left:auto;right:4px;width:24px;height:24px;font-size:16px}
/* le bouton du bas ne recouvre plus rien : il suit simplement le contenu */
.op .op-go,.op .op-bas{position:static}
.op-bas{background:none}
body[data-view="home"]:not([data-step="1"]){padding-top:8px}
/* Étape 3, 2e maquette : titre + sous-titre, grandes images posées sur la carte */
.op-t3{font-size:clamp(24px,7.4vw,31px);margin:6px 0 0}
.op-t3::before{background:#ffcf3f}.op-t3::after{background:#ff7a59}
.op-sub3{margin:2px 0 12px;font-size:17px;font-weight:600;color:#4a5670}
.op-theme.jaune{background:#fde999;box-shadow:0 5px 0 #f0d36b}
.op-theme.bleu{background:#c4eafd;box-shadow:0 5px 0 #a3d5f2}
.op-theme{padding:8px 10px 8px 6px}
.op-theme img{width:50%}
.op-theme[aria-pressed="true"]{outline:3px solid #14254a;outline-offset:-3px}
body.serre .op-sub3{margin:0 0 6px;font-size:15px}
body.serre .op-theme img{width:42%}
.op-t3{white-space:nowrap;font-size:clamp(20px,6.3vw,28px)}
.op-t3::before,.op-t3::after{margin:0 7px 5px;width:13px}
body.serre .op-t3{font-size:clamp(20px,6.1vw,26px)}
/* Étape 4 : colonne à la hauteur de l'écran, seule la liste des joueurs défile */
.op4[style*="height"]{display:flex;flex-direction:column}
.op4[style*="height"]>*{flex:none}
.op4[style*="height"]>.op-liste{flex:0 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2px 2px 4px;margin:0 -2px}
.op4 .op-bas{margin-top:auto;padding-top:8px}
.op4[style*="height"]>.op-pass{margin-top:auto}
.op4 .op-bas{margin-top:0}
/* Étape 3 : les cartes remplissent la hauteur de l'écran, l'image grandit avec */
.op3[style*="height"]{display:flex;flex-direction:column}
.op3[style*="height"]>*{flex:none}
.op3[style*="height"]>.op-themes{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr)}
.op3 .op-theme{display:grid;grid-template-columns:50% 1fr;align-items:center;min-height:0;overflow:hidden}
.op3 .op-theme img{width:100%;height:100%;max-height:100%;min-height:0;object-fit:contain}

/* ===== Écran de jeu : tient dans l'écran visible, sans défiler, sur tous les téléphones ===== */
body[data-view="game"]{overflow:hidden;padding:0}
.jeu{position:fixed;inset:0;display:flex;flex-direction:column;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 10px calc(env(safe-area-inset-bottom,0px) + 8px);max-width:560px;margin:0 auto}
.jeu>*{flex:none}
.jtop{display:flex;align-items:center;gap:6px;min-height:44px;background:#fff;border-radius:999px;padding:4px;box-shadow:0 3px 0 rgba(43,58,85,.08)}
.jbtn{flex:none;width:38px;height:38px;border-radius:50%;background:#eef6ff;color:#14254a;display:flex;align-items:center;justify-content:center;border:0}
.jbtn:active{transform:scale(.94)}
.jeu .jclock{flex:none;display:flex;align-items:center;gap:5px;font-size:21px;font-weight:700;padding:0 6px!important;background:none;box-shadow:none;color:#14254a}
.jeu .jclock svg{width:19px;height:19px}
.jeu .jclock.low{color:#ff5f37}
.jobj{flex:none;display:flex;align-items:center;gap:4px;font-weight:700;font-size:14px;color:#14254a;padding:0 4px}
.jscores{flex:1;min-width:0;display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;justify-content:flex-end}
.jscores::-webkit-scrollbar{display:none}
.js{flex:none;display:flex;align-items:center;gap:5px;background:#f3f0e8;border-radius:999px;padding:4px 4px 4px 10px;font-size:13.5px;color:#14254a;max-width:150px}
.js i{font-style:normal;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.js b{min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.js.lead{background:var(--anis);color:#fff}
.js.lead b{color:var(--anis)}
.js.me{box-shadow:inset 0 0 0 2px #14254a}
.jeu #routebox:empty{display:none}
.jeu .rbox{padding:8px 12px;border-radius:16px;gap:8px}
.jeu .rbox small{font-size:12.5px}
.jcards{flex:1 1 auto!important;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cards.jcards .ch,.cards.jcards.many .ch{min-width:0;min-height:0;overflow:hidden;padding:8px!important;gap:4px;display:flex;flex-direction:column;align-items:stretch}
.jmini{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;min-height:26px}
.jmini>i{display:block}
.cards.jcards .ch .jmini .p{justify-self:center}
.cards.jcards .ch .t{min-height:0;flex:none;text-align:center;font-size:clamp(13.5px,3.9vw,16px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cards.jcards .ch .art,.cards.jcards:not(.many) .ch .art{flex:1 1 0;height:auto;min-height:0;min-width:0;contain:size;display:flex;align-items:center;justify-content:center}
.cards.jcards .ch .art svg,.cards.jcards .ch .art img{height:100%;width:100%;max-height:100%;object-fit:contain}
.cards.jcards .ch .sayb{width:30px;height:30px;flex:none}
.cards.jcards .ch .sayb{justify-self:start}
.cards.jcards .ch .swapb{justify-self:end;flex:none}
.cards.jcards .ch .go{min-height:clamp(34px,6svh,44px);font-size:clamp(15px,4.2vw,17px);margin:0}
/* Bonus bien visible : doré, étoile, léger éclat. */
.cards.jcards .ch.bonus{background:linear-gradient(160deg,#fff6c9,#ffd75e);box-shadow:0 0 0 3px #ffc93c,0 4px 0 #e0a91c;padding-top:20px!important;animation:jbon 2.4s ease-in-out infinite}
.jbonus{position:absolute;top:0;left:50%;transform:translateX(-50%);background:#ffc93c;color:#5b3d00;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 10px;border-radius:0 0 10px 10px;white-space:nowrap}
@keyframes jbon{0%,100%{box-shadow:0 0 0 3px #ffc93c,0 4px 0 #e0a91c}50%{box-shadow:0 0 0 3px #ffc93c,0 0 18px 4px rgba(255,201,60,.75),0 4px 0 #e0a91c}}
@media (prefers-reduced-motion:reduce){.cards.jcards .ch.bonus{animation:none}}
/* « Terminer la partie » : centré, plein bleu nuit, bien visible ; les crédits de carte passent dessous (demande de Nicolas). */
.jfoot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.jfoot .stopbtn{width:auto;padding:8px 26px;font-size:15px;font-weight:800;min-height:42px;background:#14254a;color:#fff;box-shadow:0 3px 0 #0a1530;border:0}
.jfoot .stopbtn:active{transform:translateY(2px);box-shadow:0 1px 0 #0a1530}
.jfoot .stopbtn svg path{fill:#ff8a6b;stroke:#ff8a6b}
.jfoot .credits{font-size:10px;line-height:1.2;text-align:center;margin:0}
.pzset{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.9);color:#14254a;border:0;border-radius:999px;padding:8px 16px;font-weight:600;font-size:15px}
/* Petits écrans (iPhone SE…) : on resserre. */
@media (max-height:600px){
  .jeu{gap:6px;padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
  .jtop{min-height:38px}.jbtn{width:32px;height:32px}
  .jcards{gap:6px}
  .cards.jcards .ch,.cards.jcards.many .ch{padding:6px!important;gap:3px 4px}
  .cards.jcards .ch.bonus{padding-top:16px!important}
  .cards.jcards .ch .sayb{width:26px;height:26px}
  .cards.jcards .ch .swapb{padding:3px 7px}
  .jfoot .stopbtn{min-height:34px;padding:5px 20px;font-size:14px}
}
.cd p.cdcri{max-width:340px}
.jmini>*{grid-area:auto!important;position:static!important}
.jscores{justify-content:flex-start}
.jscores>:first-child{margin-left:auto}
.cards.jcards .ch .swapb{white-space:nowrap;padding:4px 8px;font-size:12px;min-height:0;height:26px;display:flex;align-items:center}
.cards.jcards .ch .sayb{width:26px;height:26px;font-size:12px}
.cards.jcards .ch .jmini .p{padding:1px 8px!important;font-size:13px}
@media (max-width:370px){.cards.jcards .ch .swapb{padding:3px 6px;font-size:11px}}
.jtop:has(.jobj) .js i{max-width:52px}
.jtop:has(.jobj) .jclock svg{display:none}
.jeu .rbox{font-size:13.5px}
.jeu .rbox .rtxt small{line-height:1.25}
.cd .cdcri{background:#14254a;color:#fff;font-size:17px;padding:12px 18px}.cd .cdcri b{color:#ff7a59}
/* En-tête des étapes, maquette « Étape 3 » : Retour + Étape X sur N, barre en morceaux. */
.op-steps{justify-content:space-between;margin:0}
.op .op-back{width:auto;height:auto;border-radius:999px;background:none;box-shadow:none;display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px;color:#14254a;padding:4px 2px}
.op .op-back svg{width:20px;height:20px;transform:none}
.op .op-n{font-size:15px;font-weight:600}
.op-barre{display:flex;gap:8px;margin:6px 0 4px}
.op-barre i{flex:1;height:8px;border-radius:999px;background:#ece6da}
.op-barre i.fait{background:#ff6b4a}
.op-astuce{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:14px;font-weight:500;color:#14254a;text-align:left}
.op-astuce img{width:30px;height:auto;flex:none}
body.serre .op-astuce{font-size:13px}
body.serre .op-astuce img{width:24px}
.op3[style*="height"]>.op-astuce{flex:none}
/* Étape 4 : à partir de 4 joueurs, des lignes compactes sur 2 colonnes (jusqu'à 8 sans défiler). */
.op-joueurs.lignes{grid-template-columns:1fr 1fr;gap:8px}
.op-joueurs.lignes .op-joueur{flex-direction:row;align-items:center;padding:5px 6px;gap:6px;border-radius:16px}
.op-joueurs.lignes .op-av{width:34px;height:34px;flex:none}
.op-joueurs.lignes .op-joueur b,.op-joueurs.lignes .op-crayon{display:none}
.op-joueurs.lignes .op-joueur input{flex:1;height:36px;font-size:15px;padding:0 8px}
.op-joueurs.lignes .op-x{position:static;flex:none;width:24px;height:24px;font-size:16px;order:3}
.op-joueurs.lignes~.op-ajout{min-height:42px;margin-top:8px;font-size:16px}
/* La liste prend la place libre, centrée : l'écran est rempli, rien ne défile ni ne se chevauche. */
.op4[style*="height"]>.op-liste{flex:1 1 auto;overflow:visible;display:flex;flex-direction:column;justify-content:center}
/* « Que cherchez-vous ? » (maquette) : plein écran, ciel + logo en haut, panneau crème, rien ne défile. */
.vs-ov{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:linear-gradient(#8fd3ff,#d7f0ff 60%);animation:fade .2s ease-out}
.vs-top{flex:none;display:flex;justify-content:center;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 12px}
.vs-top img{height:clamp(34px,6.5svh,56px);width:auto}
.vs-p{flex:1;min-height:0;position:relative;background:#fffaf0;border-radius:28px 28px 0 0;box-shadow:0 -6px 20px rgba(20,37,74,.08);padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;flex-direction:column;gap:clamp(6px,1.4svh,12px);max-width:560px;width:100%;margin:0 auto}
.vs-p>*{flex:none}
.vs-poignee{display:block;width:56px;height:6px;border-radius:999px;background:#d9cfbd;margin:0 auto}
.vs-x{position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:#fff;box-shadow:0 2px 8px rgba(20,37,74,.15);color:#14254a;font-size:18px;display:grid;place-items:center}
.vs-p h2{margin:2px 0 0;font-size:clamp(24px,7.4vw,34px);font-weight:700;color:#14254a;line-height:1.1}
.vs-sub{margin:-4px 0 0;font-size:clamp(14px,4vw,17px);color:#5a6478}
.vs-tout{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:2px solid #f0e8d8;border-radius:18px;padding:8px 14px;cursor:pointer}
.vs-tout b{display:block;font-size:17px;font-weight:700;color:#14254a}
.vs-tout small{font-size:13.5px;color:#5a6478}
.vs-tout .sw:checked{background:#ff6b4a}
.vs-grille{flex:1 1 auto!important;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:10px}
.vs-c{position:relative;min-height:0;min-width:0;overflow:hidden;background:#fff;border:2px solid #f0e8d8;border-radius:20px;padding:8px 10px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;font:inherit;color:#14254a;cursor:pointer}
.vs-c[aria-pressed="true"]{border-color:#ff7a59}
.vs-c img{flex:1 1 0;min-height:0;width:100%;height:auto;object-fit:contain;margin:4px 0 2px}
.vs-c b{font-size:clamp(14px,4.3vw,18px);font-weight:700;line-height:1.1}
.vs-c small{font-size:clamp(11px,3.3vw,13.5px);color:#5a6478;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.vs-coche{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:2px solid #d9cfbd;background:#fff;z-index:1}
.vs-c[aria-pressed="true"] .vs-coche{border-color:#ff6b4a;background:#ff6b4a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.vs-compte{display:flex;align-items:center;justify-content:center;gap:12px;background:#e3f2fd;border-radius:16px;padding:8px 12px;font-weight:700;font-size:16px;color:#14254a}
.vs-rond{width:30px;height:30px;border-radius:50%;background:#4a90d9;color:#fff;display:grid;place-items:center;font-size:16px}
.vs-compte.vide .vs-rond{background:#c5ccd6}
.vs-note{margin:-2px 0 0;text-align:center;font-size:14px;color:#5a6478}
.vs-p .op-go{position:static}
@media (max-height:620px){.vs-tout{padding:5px 12px}.vs-tout small{display:none}.vs-compte{padding:5px 10px;font-size:14.5px}.vs-rond{width:24px;height:24px}.vs-p .op-go{min-height:48px;font-size:18px}.vs-grille{gap:8px}}
body.serre .op .op-back{width:auto;height:auto}
body.serre .op3 .op-theme img{width:100%}
body.serre .op3 .op-theme{padding:6px 8px}
.jeu .rbox .rtxt b{display:none}
.jeu .rbox .rtxt small:not(.rerr):has(~ .rerr){display:none}
.jeu .rbox{padding:6px 10px}
.jeu .rbox small{font-size:12px}
.op-astuce{margin-top:4px}
/* Beaucoup de prénoms : on enlève la petite phrase sous le titre pour garder la taille normale. */
.op4.beaucoup .op-sub4{display:none}
.op4.beaucoup .op-t4{margin-bottom:6px}
.setsel{max-width:52%;min-width:0;height:40px;border:2px solid #e6dcc6;border-radius:12px;background:#fff;color:#14254a;font:inherit;font-size:15px;padding:0 8px}
.setvoix{gap:10px}
/* Message du bas pendant le jeu : il a sa place, rien n'est caché dessous. */
.jeu{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px + var(--toast,0px))}
body[data-view="game"] .toast{bottom:calc(6px + env(safe-area-inset-bottom,0px))}
/* Scores : tous visibles, sur 2 lignes si beaucoup de joueurs. */
.jtop{border-radius:24px;align-items:center}
.jscores{flex-wrap:wrap;justify-content:flex-end;overflow:visible;row-gap:4px}
.jscores>:first-child{margin-left:0}
.jtop:has(.js:nth-child(3)) .js{font-size:12.5px;padding:2px 2px 2px 8px;gap:4px}
.jtop:has(.js:nth-child(3)) .js i{max-width:64px}
.jtop:has(.js:nth-child(3)) .js b{min-width:22px;height:22px;font-size:13px}
/* Écrans pleins (accueil, invitation, fin) : pas de grande marge en bas. */
body.plein{padding-bottom:10px}
#qr[data-souple]{padding:6px}
#qr[data-souple]{box-sizing:border-box}
#qr[data-souple] svg{width:100%;height:100%;display:block}
html:has(.vs-ov),body:has(.vs-ov){overflow:hidden}
/* Invitation plus compacte : la liste des joueurs en petites étiquettes. */
body[data-view="lobby"] .players{display:flex;flex-wrap:wrap;gap:6px}
body[data-view="lobby"] .players li{padding:4px 10px 4px 4px;border:0;background:#f3f0e8;border-radius:999px;font-size:14px;gap:6px}
body[data-view="lobby"] .players li .tag{display:none}
body[data-view="lobby"] .players li .who{width:24px;height:24px}
body[data-view="lobby"] .card{padding:12px 14px;gap:8px}
body[data-view="end"] .rank{padding-block:4px}

/* « Donner mon avis » en fin de partie */
.chip.avisbtn{border:0;cursor:pointer;background:#14254a;color:#fff;box-shadow:0 3px 0 #0a1530}
.chip.avisbtn:disabled{background:#fff;color:#14254a;box-shadow:0 3px 0 var(--line2);cursor:default}
.sheet.avis textarea{width:100%;box-sizing:border-box;border:2px solid #d9e2ef;border-radius:14px;padding:10px 12px;font:inherit;font-size:16px;color:#14254a;background:#fff;resize:none}
.avis-et{display:flex;justify-content:center;gap:6px}
.avis-et button{border:0;background:none;font-size:40px;line-height:1;color:#d9e2ef;padding:2px 4px;cursor:pointer}
.avis-et button.on{color:#ffc93c}

/* Accueil : « Jouer tout de suite » en grand, puis « Construire ma partie » et « Rejoindre » côte à côte */
.bl-deux2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bl-deux2 .bl-join{font-size:16px;padding:8px 6px;min-height:50px;line-height:1.15}
.bl-deux2 .bl-join:disabled{opacity:.45}
/* Partie rapide : rappel des réglages sous l'en-tête */
.op-rapide{margin:2px 0 0;text-align:center;font-size:14px;color:var(--muted);font-weight:600}
.op-rapide button{background:none;border:0;padding:4px 6px;font:inherit;color:#e8603c;text-decoration:underline;cursor:pointer}
/* Accueil sans le choix du mode (il est dans « Construire ma partie ») : l'image peut être entière */
.bl-hero:has(+ .bl-sheet .pt-carte) .bl-scene,.bl-scene{height:clamp(150px,calc(100svh - 440px),67vw)}
.bl-rapide{margin:-4px 0 0;text-align:center;font-size:14px;font-weight:600;color:var(--muted)}
/* Écran « Comment jouez-vous ? » de « Construire ma partie » */
body[data-view="home"][data-step="mode"] .headlink{display:none}
.op1 .bl-modes{margin:8px 0 6px}
.op1 .bl-modes,.op1 .bl-deux{grid-template-columns:minmax(0,1fr)}
.op1 .bl-modes .opt{grid-template-columns:minmax(0,1fr) min(104px,26vw) 18px}
.op1 .pt-carte .pt-txt b{white-space:normal}
.op1 .pt-carte .pt-mot{display:inline-block;white-space:nowrap}
.op1 .pt-carte .pt-txt b{font-size:17px}
.op1 .pt-carte .pt-btn{padding:8px 12px;font-size:15px}
/* « Construire ma partie » : même gros bouton que « Partie rapide », en bleu nuit */
.bl-construire{background:#14254a!important;color:#fff!important;box-shadow:0 5px 0 #0a1530!important;margin-top:2px}
/* Sur « Comment jouez-vous ? », « Rejoindre » reste en haut (rejoindre avec un code) */
body[data-view="home"][data-step="mode"] .headlink{display:inline-flex}
.bl-hero:has(+ .bl-sheet .pt-carte) .bl-scene,.bl-scene{height:clamp(110px,calc(100svh - 470px),67vw)}
.bl-sheet .bl-go{min-height:58px}
.bl-scene{height:clamp(150px,calc(100svh - 390px),67vw)}

/* Page de résultats remise en ordre : ciel derrière le titre et le trophée, le paysage dans un cadre arrondi
   derrière le podium (avant, l'image de fond était posée à hauteur fixe et passait sous les boutons). */
body[data-view="end"]{background:linear-gradient(#8fd3ff,#cdeeff 260px,var(--bg) 380px) no-repeat,var(--bg)}
body[data-view="end"] .bl-podium ~ h1{font-size:clamp(30px,9vw,40px);margin:0}
body[data-view="end"] .bl-win{height:clamp(80px,15svh,130px);margin:-6px -16px 0}
body[data-view="end"] .bl-trophy{height:100%;width:auto}
body[data-view="end"] .bl-podium{margin:0;padding:clamp(28px,7svh,70px) 14px 0;border-radius:24px;background:url(/paysage.jpg) center 60%/cover no-repeat;overflow:hidden;box-shadow:0 6px 16px rgba(20,37,74,.15)}
body[data-view="end"] .bl-podium ~ .lead{background:none;padding:0;font-size:16px;margin:0}
body[data-view="end"] .chips{margin:0}
@media (max-height:620px){body[data-view="end"] .bl-step{transform-origin:bottom;zoom:.85}}
/* « Sans prénoms » plus gros (demande de Nicolas) : bouton sur toute la largeur */
.op-ph.grand{justify-content:center;margin:10px 0}
.op-ph.grand .op-sans{width:100%;justify-content:center;min-height:56px;font-size:19px;gap:10px;border-radius:18px;padding:8px 16px;box-shadow:0 0 0 2px #14254a,0 4px 0 2px #14254a}
.op-ph.grand .op-sans img{width:36px}
body.serre .op-ph.grand{margin:6px 0}
body.serre .op-ph.grand .op-sans{min-height:46px;font-size:17px}
.op-rapide{margin:0}

/* Nouvel accueil (image de Nicolas, 15/10) : l'image entière, bord à bord ; notre logo d'origine posé sur le
   cartouche blanc du dessin ; les vrais boutons son et réglages sur ceux du dessin. */
body[data-view="home"][data-step="1"]{background:var(--bg);padding-top:0}
.acc2{position:relative;margin:0 -16px;line-height:0}
.acc2>img{display:block;width:100%;height:auto}
.acc2-logo{position:absolute;left:3.4%;top:2.9%;width:55%;height:15.4%;background:#fff;border-radius:999px;display:flex;align-items:center;justify-content:center}
.acc2-logo img{width:78%;height:auto}
.acc2-btns{position:absolute;inset:0;pointer-events:none}
.acc2-btns button{position:absolute;pointer-events:auto;top:8.9%;width:9.6%;aspect-ratio:1;height:auto;min-width:0;min-height:0;padding:0;border-radius:50%;background:#fff;color:#14254a;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(20,37,74,.12)}
.acc2-btns .sndbtn{left:77.6%}
.acc2-btns .setbtn{left:89.5%}
.acc2-btns svg{width:48%;height:48%}
body[data-view="home"][data-step="1"] .bl-sheet{margin-top:-18px;padding-top:14px;gap:8px}
@media (max-height:620px){body[data-view="home"][data-step="1"] .bl-sheet .bl-go{min-height:50px;font-size:22px}}
body[data-view="home"][data-step="1"]{margin:0}
body[data-view="home"][data-step="1"] .bl-sheet{margin-top:0;box-shadow:none}
/* Résultats sans photo de fond (demande de Nicolas) : podium simple sur le ciel */
body[data-view="end"] .bl-podium{background:none;box-shadow:none;border-radius:0;padding-top:clamp(10px,3svh,30px)}
/* Accueil : le cadre beige commence net sous l'image (sans coins arrondis qui laissaient voir des morceaux) */
body[data-view="home"][data-step="1"] .bl-sheet{border-radius:0;margin-top:0}
/* Compte à rebours : le bleu déborde de l'écran en haut et en bas, et le fond de la page devient bleu aussi,
   pour qu'aucune bande blanche n'apparaisse quand la barre de Safari bouge ou sous l'encoche. */
.cd{top:-120px;bottom:-120px;padding-block:calc(120px + env(safe-area-inset-top,0px)) calc(120px + env(safe-area-inset-bottom,0px))}
html:has(.cd),html:has(.cd) body{background:#6cc4f5!important}
/* « Rejouer comme la dernière fois » : tout petit encart (demande de Nicolas) */
.bl-sheet .again{align-self:center;padding:7px 16px;min-height:0;border-radius:999px;box-shadow:0 0 0 1.5px var(--line2);gap:0}
.bl-sheet .again b{font-size:14px;font-weight:600;color:#14254a}
.bl-sheet .again span{display:none}
/* Aperçu Pass vacances (lien de test) */
.sheet.pass{text-align:center;align-items:stretch}
.sheet.pass .pass-et{font-size:40px;line-height:1}
.sheet.pass h2{color:#14254a}
.pass-l{list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left;justify-self:center;align-self:center}
.pass-l li{font-weight:600;color:#14254a;padding-left:28px;position:relative}
.pass-l li::before{content:"✓";position:absolute;left:4px;color:#ff7a59;font-weight:800}
.pass-x{background:none;border:0;font:inherit;font-weight:600;color:var(--muted);padding:6px;text-decoration:underline}
/* « Jouer sans prénoms » centré entre « À vous de jouer ! » et les joueurs : l'espace libre se partage
   au-dessus et au-dessous du bouton (et avant « Je suis passager »). */
.op4[style*="height"]>.op-liste{flex:0 1 auto;justify-content:flex-start}
.op4[style*="height"]>.op-ph.grand{margin-top:auto;margin-bottom:auto}
.op4[style*="height"]>.op-ph.grand{padding-block:6px}
.op-sans .op-masque{width:36px;height:36px;flex:none}
/* Petits écrans : les deux boutons et leurs petites lignes tiennent sous l'image entière */
@media (max-height:700px){body[data-view="home"][data-step="1"] .bl-sheet{gap:5px;padding-top:10px}body[data-view="home"][data-step="1"] .bl-sheet .bl-go{min-height:50px;font-size:21px}body[data-view="home"][data-step="1"] .bl-rapide{font-size:13px;margin:0}}
@media (max-height:600px){body[data-view="home"][data-step="1"] .bl-sheet .bl-go{min-height:44px;font-size:19px;padding-block:6px}body[data-view="home"][data-step="1"] .bl-sheet{gap:3px;padding-top:6px}}
.bl-bientot{color:#e8603c!important}
/* Pastille collée au bouton « Créer une partie » (pour prévenir que ce sera payant plus tard) */
.bl-construire{position:relative;overflow:visible}
.bl-badge{position:absolute;top:-10px;right:12px;background:#ffc93c;color:#14254a;font-size:12.5px;font-weight:800;line-height:1;padding:5px 10px;border-radius:999px;box-shadow:0 2px 0 rgba(20,37,74,.25);white-space:nowrap;transform:rotate(2deg)}
/* « Jouer sans prénoms » en corail pour le distinguer du titre bleu nuit */
.op-ph.grand .op-sans{color:#e8603c;box-shadow:0 0 0 2px #ff7a59,0 4px 0 2px #ff7a59;background:#fff5f0}
body[data-view="home"][data-step="1"] .bl-sheet .bl-construire{margin-top:12px}
/* Fin de partie refaite d'après la maquette de Nicolas (16/10) : ciel avec nuages, grand titre avec traits
   jaunes, trophée, cartes des joueurs (médaille, animal, nom, points), boutons en bas. */
body[data-view="end"]{background:
  radial-gradient(60px 34px at 92% 230px,#fff 98%,transparent),radial-gradient(48px 30px at 82% 246px,#fff 98%,transparent),
  radial-gradient(70px 40px at 4% 330px,rgba(255,255,255,.9) 98%,transparent),radial-gradient(54px 32px at 16% 344px,rgba(255,255,255,.9) 98%,transparent),
  linear-gradient(#8fd3ff,#cdeeff 300px,#fdf6e8 420px) no-repeat,#fdf6e8}
body[data-view="end"] .app{gap:10px}
.fin-titre{text-align:center;color:#14254a}
.fin-titre h1{position:relative;display:inline-block;margin:0;color:#14254a;font-size:clamp(34px,11vw,48px);line-height:1.05;font-weight:700;padding:0 34px;max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.fin-titre h1::before,.fin-titre h1::after{content:"";position:absolute;top:50%;width:22px;height:30px;margin-top:-15px;
  background:linear-gradient(#ffc93c,#ffc93c) 0 0/18px 5px no-repeat,linear-gradient(#ffc93c,#ffc93c) 0 50%/22px 5px no-repeat,linear-gradient(#ffc93c,#ffc93c) 0 100%/18px 5px no-repeat}
.fin-titre h1::before{left:4px;transform:skewY(-14deg)}
.fin-titre h1::after{right:4px;transform:scaleX(-1) skewY(-14deg)}
.fin-titre p{margin:4px 0 0;font-size:clamp(15px,4.6vw,19px);font-weight:600}
body[data-view="end"] .bl-win{height:clamp(84px,17svh,150px);margin:-4px -16px -6px}
body[data-view="end"] .bl-trophy{height:100%;width:auto;filter:drop-shadow(0 0 18px rgba(255,214,90,.7))}
.fin-cartes{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px}
.fin-c1{--n:1;width:62%;margin:0 auto}
.fin-c3{--n:3;gap:8px}
.fin-carte{position:relative;background:linear-gradient(#fffdf8,#fbf3e3);border-radius:22px;box-shadow:0 4px 14px rgba(20,37,74,.12);padding:10px 8px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#14254a;min-width:0}
.fin-carte.moi{box-shadow:0 0 0 3px #ff7a59,0 4px 14px rgba(20,37,74,.12)}
.fin-carte .fin-av{width:100%;aspect-ratio:364/314;object-fit:contain;mix-blend-mode:multiply}
.fin-carte .fin-perso{width:72%;margin:6% 0 4%;aspect-ratio:1;mix-blend-mode:normal}
.fin-emo{display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,#fff);line-height:1}
.fin-carte .fin-emo{width:72%;margin:6% 0 4%;aspect-ratio:1;font-size:clamp(40px,14vw,64px);mix-blend-mode:normal}
.fin-c3 .fin-carte .fin-emo{font-size:clamp(28px,9vw,44px)}
.fin-med{position:absolute;left:4px;top:2px;width:42%;z-index:1;line-height:0}
.fin-med img{width:100%;mix-blend-mode:multiply}
.fin-med b{position:absolute;left:51%;top:43%;transform:translate(-50%,-50%);font-size:clamp(16px,6vw,26px);font-weight:700;line-height:1;color:#fff8e1;text-shadow:0 1.5px 0 rgba(120,70,0,.55)}
.fin-med.fin-n{width:auto}
.fin-n{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:50%;background:#14254a;color:#fff;font-weight:700;font-size:15px;line-height:1}
.fin-nom{font-weight:700;font-size:clamp(16px,5.4vw,22px);line-height:1.15;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-c3 .fin-nom{font-size:clamp(14px,4.4vw,17px)}
.fin-pts{font-weight:700;font-size:clamp(17px,5.4vw,22px);line-height:1.1}
.fin-pts em{font-style:normal;color:#ff7a59;font-size:1.45em}
.fin-c3 .fin-pts{font-size:15px}
.fin-v{font-size:13px;font-weight:600;color:#5a6785}
.fin-liste{display:flex;flex-direction:column;gap:6px}
.fin-ligne{display:flex;align-items:center;gap:10px;background:#fffdf8;border-radius:16px;padding:5px 12px 5px 8px;box-shadow:0 2px 8px rgba(20,37,74,.08);color:#14254a}
.fin-ligne.moi{box-shadow:0 0 0 2px #ff7a59}
.fin-ligne .fin-av{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;mix-blend-mode:multiply}
.fin-ligne .fin-emo{font-size:20px}
.fin-ligne .fin-nom{flex:1;font-size:17px;min-width:0}
.fin-ligne .fin-pts{font-size:15px}
.fin-ligne .fin-pts em{font-size:1.3em}
.fin-raison{margin:0;text-align:center;color:#14254a;font-weight:500;font-size:16px}
body[data-view="end"] .fin-chips{justify-content:center;gap:10px;margin:0}
.fin-chips .chip{display:inline-flex;align-items:center;gap:7px;background:#fff;padding:7px 16px;font-size:16px;box-shadow:0 2px 8px rgba(20,37,74,.1)}
.fin-chips svg{width:20px;height:20px}
.fin-revanche{gap:10px}
.fin-revanche svg{width:26px;height:26px}
.fin-avis{align-self:center;display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:4px 8px;font:inherit;font-size:16px;font-weight:600;color:#14254a;cursor:pointer}
.fin-avis svg{width:32px;height:28px}
.fin-avis:disabled{cursor:default;color:#5a6785}
body[data-view="end"] .bl-win{order:0}
.fin-carte{background:#fdfaf3}
.fin-carte{background:#fdf8ee}
.fin-med{z-index:auto;mix-blend-mode:multiply}
.fin-med.fin-n{mix-blend-mode:normal;left:8px;top:8px}
/* Accueil retravaillé par Nicolas (16/10) : son image entière, logo compris ; les vrais boutons son et
   réglages posés sur ceux du dessin ; le bas de la rue se fond dans le crème comme sur sa maquette. */
.acc2-btns button{top:7.13%;width:9.25%}
.acc2-btns .sndbtn{left:77.03%}
.acc2-btns .setbtn{left:89.05%}
.acc2::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9%;background:linear-gradient(rgba(253,246,232,0),var(--bg));pointer-events:none}
/* 4 joueurs ou plus (test des familles) : les scores passent sur une seule ligne sous le chrono, en petites
   étiquettes, pour laisser la place aux dessins des défis. */
.jtop:has(.js:nth-child(4)){flex-wrap:wrap;row-gap:2px;padding:3px 4px}
.jtop:has(.js:nth-child(4)) .jscores{order:9;flex:1 0 100%;flex-wrap:nowrap;justify-content:center;overflow-x:auto;padding-bottom:1px}
.jtop:has(.js:nth-child(4)) .jclock{margin-right:auto}
.jtop:has(.js:nth-child(4)) .jbtn{width:34px;height:34px}
.jtop:has(.js:nth-child(4)) .js{font-size:12px;padding:1px 1px 1px 7px;gap:3px}
.jtop:has(.js:nth-child(4)) .js i{max-width:52px}
.jtop:has(.js:nth-child(4)) .js b{min-width:22px;height:22px;font-size:12.5px}
.jtop:has(.js:nth-child(6)) .js i{max-width:40px}
/* « Que cherchez-vous ? » (test des familles, petits Android) : la page derrière la fenêtre ne dépasse plus
   l'écran, sinon la barre du navigateur bougeait et cachait « Continuer ». */
body:has(.vs-ov) .op{display:none}
.vs-ov{height:100vh;height:100dvh;bottom:auto}
/* Étape 3 sur petit écran : la phrase en gras de « En ville » était coupée, on la retire. */
@media (max-height:700px){.op-theme em{display:none}}
/* Écran de jeu (demande de Nicolas, 16/10) : les lieux de la route dans un encadré bleu ciel avec une étiquette ;
   un défi qui va être remplacé clignote doucement ; un nouveau défi s'illumine en arrivant. */
.ch.lieu{background:linear-gradient(#f2faff,#dcf1fe)!important;box-shadow:0 0 0 3px #4cb7f0,0 4px 0 #2e9bd8!important;padding-top:16px!important}
.jlieu{position:absolute;top:0;left:50%;transform:translateX(-50%);background:#4cb7f0;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 10px;border-radius:0 0 10px 10px;white-space:nowrap}
.ch.lieu .sayb,.ch.lieu .swapb{background:#fff}
.ch.part{animation:jpart 1.1s ease-in-out infinite}
@keyframes jpart{0%,100%{box-shadow:0 0 0 0 rgba(255,201,60,0),0 4px 0 rgba(43,58,85,.08)}50%{box-shadow:0 0 0 4px #ffc93c,0 0 20px 6px rgba(255,201,60,.8),0 4px 0 rgba(43,58,85,.08)}}
.ch.nouveau{animation:jnouv 2.6s ease-out var(--age,0ms) 1 both}
@keyframes jnouv{0%{box-shadow:0 0 0 5px #4cb7f0,0 0 26px 8px rgba(76,183,240,.9);transform:scale(1.03)}15%{transform:none}70%{box-shadow:0 0 0 4px #4cb7f0,0 0 18px 5px rgba(76,183,240,.6)}100%{box-shadow:0 0 0 0 rgba(76,183,240,0),0 4px 0 rgba(43,58,85,.08)}}
.ch.bonus.nouveau,.ch.bonus.part{animation-name:jnouv}
.ch.bonus.part{animation:jpart 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ch.part,.ch.nouveau{animation:none}.ch.part{box-shadow:0 0 0 4px #ffc93c}}
/* Couleurs distinctes : bleu ciel = lieu de la route ; doré = nouveau défi ; orange qui pulse = défi qui va partir. */
@keyframes jpart{0%,100%{box-shadow:0 0 0 3px rgba(255,122,89,.55),0 4px 0 rgba(43,58,85,.08)}50%{box-shadow:0 0 0 4px #ff7a59,0 0 22px 7px rgba(255,122,89,.75),0 4px 0 rgba(43,58,85,.08)}}
@keyframes jnouv{0%{box-shadow:0 0 0 5px #ffc93c,0 0 28px 10px rgba(255,201,60,.95);transform:scale(1.03)}15%{transform:none}70%{box-shadow:0 0 0 4px #ffc93c,0 0 18px 5px rgba(255,201,60,.6)}100%{box-shadow:0 0 0 0 rgba(255,201,60,0),0 4px 0 rgba(43,58,85,.08)}}
.ch.lieu.nouveau{animation:none}
.cards.jcards .ch.lieu,.cards.jcards.many .ch.lieu{padding-top:22px!important}
/* Carte en train d'être dite par la voix : bien entourée, légèrement agrandie, le 🔊 bat la mesure */
.ch.dit,.ch.lieu.dit,.ch.bonus.dit{box-shadow:0 0 0 4px var(--ink),0 0 0 9px rgba(76,183,240,.5),0 8px 18px rgba(20,37,74,.28)!important;transform:scale(1.035);z-index:3;transition:transform .2s,box-shadow .2s}
.ch.dit .sayb{animation:jdit .8s ease-in-out infinite;background:var(--gold)}
@keyframes jdit{50%{transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){.ch.dit{transform:none}.ch.dit .sayb{animation:none}}
/* « Jouer sans prénoms » choisi : bouton plein corail, texte blanc, petite coche */
.op-ph.grand .op-sans.actif{background:#ff7a59;color:#fff;box-shadow:0 0 0 2px #e8603c,0 4px 0 2px #e8603c}
.op-sans.actif .op-masque{background:#fff;border-radius:50%;padding:2px}
.op-sans.actif::after{content:"✓";font-weight:800;margin-left:2px}
.op2b .op-theme .op-txt b{display:block;white-space:nowrap;font-size:clamp(18px,5.2vw,24px)}
/* Étape 2 (thème + durée, demande de Nicolas 16/10) : images des thèmes un peu plus petites, durée et
   « Comment gagner ? » à la même taille que le reste de l'appli ; l'espace en trop se répartit entre les blocs. */
.op2b .op-themes{gap:10px}
.op2b .op-theme{height:clamp(96px,17svh,150px);grid-template-columns:44% 1fr}
.op2b .op-theme .op-txt small{font-size:14.5px}
.op2b .op-h2{font-size:21px;margin:16px 0 8px}
.op2b .op-h2 img{height:30px}
.op2b .op-durees button{min-height:60px;font-size:19px;border-radius:18px}
.op2b .op-g{padding:10px 10px 10px 8px;gap:8px;border-radius:22px}
.op2b .op-g img{width:clamp(54px,15vw,68px)}
.op2b .op-g .op-txt b{font-size:19px}
.op2b .op-g .op-txt small{font-size:14px}
.op2b .op-g .op-coche{width:24px;height:24px}
.op2b .op-note{font-size:15px}
.op2b .op-go{margin-top:16px}
.op3.op2b[style*="height"]>.op-themes{flex:none;grid-auto-rows:auto}
.op3.op2b[style*="height"]{justify-content:space-between}
body.serre .op2b .op-h2{margin:10px 0 6px;font-size:20px}
body.serre .op2b .op-durees button{min-height:52px}
body.serre .op2b .op-theme{height:clamp(88px,15svh,130px)}
.op2b .op-g .op-txt b{padding-right:24px}
.op2b .op-theme .op-txt small{margin-top:6px}
.op2b .op-gagner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.op2b .op-g .op-txt{min-width:0}
/* Chrono / Objectif : image au-dessus, texte centré (comme les cartes de l'étape 1), la coche dans le coin. */
.op2b .op-g{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 8px 10px}
.op2b .op-g img{width:auto;height:clamp(44px,7svh,62px)}
.op2b .op-g .op-txt{padding:0}
.op2b .op-g .op-txt b{padding:0}
.op2b .op-g .op-txt small{font-size:14px}
.op2b .op-g .op-coche{top:8px;right:8px}
body.serre .op2b .op-g{padding:6px 6px 8px}
body.serre .op2b .op-g img{height:clamp(36px,6svh,52px);width:auto}
/* ===== Accueil : le bas est petit pour que tout tienne (Nicolas, 17/10) ===== */
.soloback2{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.soloback2 .sb-go{display:flex;align-items:center;gap:4px;border:0;border-radius:999px;background:#4cb7f0;color:#14254a;font:inherit;font-weight:700;font-size:14px;padding:6px 14px;cursor:pointer}
.soloback2 .sb-go svg{width:14px;height:14px}
.soloback2 .sb-non{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;padding:4px;cursor:pointer;white-space:nowrap}
body[data-view="home"][data-step="1"] .bl-sheet .again{margin-top:4px;padding:5px 14px}
body[data-view="home"][data-step="1"] .bl-sheet .again b{font-size:13px}
body[data-view="home"][data-step="1"] .carnetpill{padding:5px 12px;font-size:13px;border-radius:999px}
body[data-view="home"][data-step="1"] .foot{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 6px;padding-top:0}
body[data-view="home"][data-step="1"] .foot .footlink{font-size:11.5px;padding:2px}
.bl-reprise{white-space:nowrap}
.bl-reprise button{border:0;background:none;padding:0;font:inherit;line-height:inherit;color:#1b8fd0;font-weight:800;text-decoration:underline;cursor:pointer}
.bl-reprise button.non{color:var(--muted);font-weight:600}
.setlien{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;border:0;background:none;padding:0;font:inherit;font-weight:800;font-size:16px;color:var(--head);text-align:left;cursor:pointer;border-top:1px solid var(--line)}
.setg .setlien:first-child{border-top:0}
body.acc-serre .bl-sheet{padding-bottom:0!important}body.acc-serre #app{padding-bottom:0!important}
html:has(body.acc-serre),body.acc-serre{overflow:hidden}
.setlien .chev{font-size:24px;line-height:1}
/* ===== « Comment jouez-vous ? » plein écran, « Continuer » tout en bas (Nicolas, 17/10) ===== */
.op1[style*="height"]{display:flex;flex-direction:column}
.op1[style*="height"]>*{flex:none}
.op1[style*="height"]>.bl-modes{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px;margin-top:4px}
.op1[style*="height"] .bl-deux{flex:1 1 auto;min-height:0;grid-auto-rows:minmax(0,1fr);gap:12px}
.op1[style*="height"] .bl-modes .opt{grid-template-columns:1fr 44% 16px;grid-template-rows:minmax(0,1fr) minmax(0,1fr);min-height:0}
.op1[style*="height"] .bl-modes .opt .art{height:100%;min-height:0;overflow:hidden}
.op1[style*="height"] .bl-modes .opt .art{display:flex;align-items:center;justify-content:center;align-self:stretch}
.op1[style*="height"] .bl-modes .opt .art>*{width:100%;height:100%;max-height:100%;object-fit:contain}
.op1[style*="height"] .bl-modes .opt b{font-size:clamp(19px,5.6vw,23px)}
.op1[style*="height"] .bl-modes .opt small{display:none}
@media (min-height:720px){.op1[style*="height"] .bl-modes .opt small{display:block;font-size:15px}}
/* Grands écrans : l'image en grand au-dessus, le titre dessous */
@media (min-height:720px){
.op1[style*="height"] .bl-modes .opt{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;text-align:center;justify-items:center;padding:14px 16px 16px!important;row-gap:4px}
.op1[style*="height"] .bl-modes .opt .art{grid-column:1;grid-row:1;width:100%}
.op1[style*="height"] .bl-modes .opt b{grid-column:1;grid-row:2;align-self:center}
.op1[style*="height"] .bl-modes .opt small{grid-column:1;grid-row:3}
.op1[style*="height"] .bl-modes .opt::after{display:none}}
.op1[style*="height"] .op-go{margin-top:12px}
@media (max-width:380px){.headlink{padding:8px 9px;font-size:13px}.head .brand{max-width:104px}.head .brand img,.head .brand svg{width:100%;height:auto}.headr{gap:5px}.pt-carte .pt-txt b{font-size:15px}.pt-carte .pt-txt small{white-space:nowrap}.pt-carte .pt-ico{display:none}.pt-carte .pt-btn{padding-inline:12px;font-size:15px}.op-sub{font-size:14px}}
.op1[style*="height"] .bl-modes .opt .art{border-radius:0;overflow:visible}
@media (max-height:719px){.op1[style*="height"] .bl-modes .opt b{grid-row:1/3;align-self:center}}
/* « Comment jouez-vous ? » : la carte Junior aussi grande que les deux autres (Nicolas, 17/10) */
.pt-carte .pt-img{flex:none;width:52px;height:52px;border-radius:14px;object-fit:cover;box-shadow:0 2px 6px rgba(20,37,74,.18)}
.op1[style*="height"]>.bl-modes>.bl-deux{flex:2 1 0}
.op1[style*="height"]>.bl-modes>.pt-carte{flex:1 1 0;min-height:0;margin:0;padding:10px 14px 10px 12px;gap:14px;border-width:3px;border-radius:22px}
.op1[style*="height"] .pt-carte .pt-img{width:auto;height:min(100%,96px);aspect-ratio:1;border-radius:18px}
.op1[style*="height"] .pt-carte .pt-txt b{font-size:clamp(19px,5.6vw,23px);line-height:1.15}
.op1[style*="height"] .pt-carte .pt-txt small{font-size:15px;margin-top:2px}
.op1[style*="height"] .pt-carte .pt-btn{font-size:17px;padding:10px 16px}
@media (min-height:720px){
  .op1[style*="height"]>.bl-modes>.pt-carte{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;text-align:center;row-gap:6px;padding:12px 16px 14px}
  .op1[style*="height"] .pt-carte .pt-img{height:100%;max-height:130px}
  .op1[style*="height"] .pt-carte .pt-txt{align-items:center}
  .op1[style*="height"] .pt-carte .pt-btn{padding:9px 22px}
}
.pt-chev{display:none}
@media (max-height:719px){
  .op1[style*="height"] .pt-carte .pt-btn{display:none}
  .op1[style*="height"] .pt-carte .pt-chev{display:block;flex:none;font-size:30px;font-weight:600;color:#14254a;line-height:1;width:18px}
  .op1[style*="height"] .pt-carte .pt-txt small{white-space:normal}
  .op1[style*="height"]>.bl-modes>.pt-carte{padding:8px 12px 8px 12px}
}
@media (min-height:720px){
  .op1[style*="height"]>.bl-modes>.pt-carte{display:flex;flex-direction:column;align-items:center;justify-content:center}
  .op1[style*="height"] .pt-carte .pt-img{flex:1 1 0;min-height:0;height:auto;max-height:150px;width:auto;aspect-ratio:1}
  .op1[style*="height"] .pt-carte .pt-txt{flex:none}
}
.pt-imgw{flex:none;display:flex;align-items:center;justify-content:center;align-self:stretch}
@media (max-height:719px){.op1[style*="height"] .pt-carte .pt-imgw{height:100%;max-height:96px;align-self:center}.op1[style*="height"] .pt-carte .pt-img{height:100%;width:auto}}
@media (min-height:720px){
  .op1[style*="height"] .pt-carte .pt-imgw{flex:1 1 0;min-height:0;width:100%}
  .op1[style*="height"] .pt-carte .pt-img{flex:none;height:100%;max-height:150px;width:auto;aspect-ratio:1}
}
/* Taille fixe d'après la hauteur de l'écran (les pourcentages faisaient déborder l'image) */
.op1[style*="height"] .pt-carte .pt-imgw{flex:none!important;height:auto!important;max-height:none!important;width:auto!important;align-self:center!important}
.op1[style*="height"] .pt-carte .pt-img{width:min(11vh,88px)!important;height:min(11vh,88px)!important;max-height:none!important;flex:none!important;aspect-ratio:1}
@media (min-height:720px){.op1[style*="height"] .pt-carte .pt-img{width:min(13vh,130px)!important;height:min(13vh,130px)!important}}
@media (min-height:720px){
  .op1[style*="height"]>.bl-modes>.pt-carte{flex-direction:row!important;justify-content:flex-start;text-align:left;padding:10px 14px 10px 12px}
  .op1[style*="height"] .pt-carte .pt-img{width:min(14vh,120px)!important;height:min(14vh,120px)!important;border-radius:22px}
  .op1[style*="height"] .pt-carte .pt-txt{flex:1 1 auto;min-width:0;align-items:flex-start}
  .op1[style*="height"] .pt-carte .pt-txt b{font-size:clamp(20px,5.8vw,24px)}
  .op1[style*="height"] .pt-carte .pt-btn{display:none}
  .op1[style*="height"] .pt-carte .pt-chev{display:block;flex:none;font-size:30px;font-weight:600;color:#14254a;line-height:1;width:18px}
}
/* Carte Junior : se coche comme les deux autres, puis « Continuer » ouvre Junior (Nicolas, 17/10) */
.op1 .pt-carte{position:relative;font:inherit;text-align:left;cursor:pointer;width:100%}
.op1 .pt-carte .pt-chev,.op1 .pt-carte .pt-btn{display:none!important}
.op1 .pt-carte .radio{display:none;position:absolute;top:-8px;right:-6px;width:28px;height:28px;border-radius:50%;background:var(--anis) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='3.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;border:0}
.op1 .pt-carte[aria-pressed="true"]{border-style:solid;border-color:#14254a;box-shadow:0 0 0 1px #14254a,0 5px 0 3px #14254a}
.op1 .pt-carte[aria-pressed="true"] .radio{display:block}
/* Écrans courts (Samsung avec barres du navigateur, Nicolas 18/10) : tout ce qui n'est pas l'image est plus serré,
   pour que l'image garde de la place. Rien n'est posé sur l'image. */
@media (max-height:820px){
  .jcards{gap:6px!important}
  .cards.jcards .ch,.cards.jcards.many .ch{padding:6px 6px 7px!important;gap:2px!important}
  .cards.jcards .ch .t{font-size:clamp(13px,3.7vw,15px);line-height:1.15}
  .cards.jcards .ch .jmini{min-height:22px}
  .cards.jcards .ch .sayb{width:22px!important;height:22px!important;font-size:11px!important}
  .cards.jcards .ch .swapb{height:22px!important;padding:2px 7px!important;font-size:11.5px!important}
  .cards.jcards .ch .jmini .p{padding:0 7px!important;font-size:12px!important}
  .cards.jcards .ch .go{min-height:34px!important;font-size:15px!important;padding-top:4px!important;padding-bottom:4px!important}
  .cards.jcards .ch.bonus{padding-top:6px!important;overflow:visible}
  .cards.jcards .ch.bonus .jbonus{top:-9px;border-radius:10px;font-size:10px;padding:1px 9px;z-index:1}
  .cards.jcards .ch.lieu,.cards.jcards.many .ch.lieu{padding-top:6px!important;overflow:visible}
  .cards.jcards .ch.lieu .jlieu{top:-9px;border-radius:10px;font-size:10px;padding:1px 9px;z-index:1}
}

/* Écran de jeu « rue » (maquette de Nicolas, 19/10) : jusqu'à 6 défis. Image fixe de la rue de l'accueil,
   la voiture rouge au milieu en bas, 3 défis à gauche et 3 à droite. */
.jeu.rue{background:#bfe3f8 url(/maquette/partie-rue.webp) center/cover no-repeat}
.jeu.rue .jcards{grid-template-columns:clamp(100px,28vw,150px) minmax(0,1fr) clamp(100px,28vw,150px);grid-template-rows:repeat(3,minmax(0,1fr))}
.jeu.rue .jcards>.ch:nth-child(2),.jeu.rue .jcards>.ch:nth-child(5){grid-row:1}
.jeu.rue .jcards>.ch:nth-child(3),.jeu.rue .jcards>.ch:nth-child(6){grid-row:2}
.jeu.rue .jcards>.ch:nth-child(4),.jeu.rue .jcards>.ch:nth-child(7){grid-row:3}
.jeu.rue .jcards>.ch:nth-child(-n+4){grid-column:1}
.jeu.rue .jcards>.ch:nth-child(n+5){grid-column:3}
.jeu.rue .jauto{grid-column:2;grid-row:3;align-self:end;justify-self:center;width:100%;max-width:220px;position:relative;pointer-events:none}
.jeu.rue .jauto img{display:block;width:100%;position:relative}
.jeu.rue .jauto:before{content:"";position:absolute;left:6%;right:6%;bottom:-2%;height:10%;border-radius:50%;background:#0b1a2e;filter:blur(6px);opacity:.45}
.jeu.rue .cards.jcards .ch{box-shadow:0 4px 12px rgba(20,37,74,.22)}
.jeu.rue .cards.jcards .ch .t{font-size:clamp(12.5px,3.6vw,15px);line-height:1.1}
.jeu.rue .cards.jcards .ch .swapb span{display:none}
.jeu.rue .cards.jcards .ch .swapb{padding:2px 8px!important}
.jeu.rue .cards.jcards .ch .go{font-size:clamp(13px,3.7vw,16px)!important;padding-left:4px;padding-right:4px}
.jeu.rue .jfoot .credits{background:#fffdf8d9;border-radius:8px;padding:1px 6px}
/* Bouton « Changer ce défi » bien plus grand (demande de Nicolas, 19/10 : trop petit pour le doigt) */
.cards.jcards .ch .swapb,.jeu.rue .cards.jcards .ch .swapb{width:clamp(34px,10vw,42px)!important;height:clamp(34px,10vw,42px)!important;padding:0!important;border-radius:50%;justify-content:center;font-size:clamp(20px,6vw,25px)!important;font-weight:800;color:var(--nuit,#14254a);background:#dcecfb;box-shadow:0 0 0 2px #14254a22}
.cards.jcards .ch .swapb span{display:none}
.cards.jcards .ch .swapb:active{transform:scale(.92)}
@media (max-height:700px){.cards.jcards .ch .swapb,.jeu.rue .cards.jcards .ch .swapb{width:34px!important;height:34px!important;font-size:20px!important}}
/* Bouton Changer à cheval sur le coin haut de la carte, côté route (demande de Nicolas, 19/10) */
.cards.jcards .ch{overflow:visible}
.cards.jcards .ch>.swapb{position:absolute!important;top:-10px;right:-10px;left:auto;z-index:5;grid-area:auto!important;background:#fff!important;box-shadow:0 3px 10px #14254a40,0 0 0 2px #14254a22}
.jeu.rue .cards.jcards>.ch:nth-child(-n+4)>.swapb{right:-16px;left:auto}
.jeu.rue .cards.jcards>.ch:nth-child(n+5)>.swapb{left:-16px;right:auto}
.jeu.rue .cards.jcards>.ch:nth-child(-n+4) .t{padding-right:clamp(16px,5vw,24px)}
.jeu.rue .cards.jcards>.ch:nth-child(n+5) .t{padding-left:clamp(16px,5vw,24px)}
.jeu.rue .cards.jcards .ch .t{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Images plus grandes : elles prennent presque toute la largeur de la carte (demande de Nicolas, 19/10) */
.jeu.rue .cards.jcards .ch .art{margin-left:-6px;margin-right:-6px;width:auto;align-self:stretch}
.jeu.rue .cards.jcards .ch .jmini .p{font-size:clamp(15px,4.4vw,18px)!important;padding:1px 10px!important;font-weight:800}
/* Phrase de départ dans le ciel, au-dessus de l'église : on voit sans le son que la partie a commencé (demande de Nicolas, 20/10) */
.jeu.rue .jdepart{grid-column:2;grid-row:1;align-self:start;justify-self:center;width:calc(100% - 22px);max-width:220px;margin-top:2px;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;background:#fffdf8e6;border-radius:16px;padding:6px 8px;box-shadow:0 3px 10px #14254a2e;color:var(--nuit,#14254a);pointer-events:none}
.jeu.rue .jdepart b{font-size:clamp(14px,4.2vw,18px);line-height:1.1;color:#ff7a59}
.jeu.rue .jdepart span{font-size:clamp(12px,3.4vw,14px);font-weight:600;line-height:1.15}
/* Titres : un mot n'est jamais coupé en deux (« Dépanneus/e ») ; place réduite côté bouton Changer */
.jeu.rue .cards.jcards .ch .t{overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual;font-size:clamp(12px,3.4vw,15px)}
.jeu.rue .cards.jcards>.ch:nth-child(-n+4) .t{padding-right:12px}
.jeu.rue .cards.jcards>.ch:nth-child(n+5) .t{padding-left:12px}
/* 5 ou 6 joueurs : les scores sur 2 lignes de 3, chaque prénom en entier, rien de coupé sur les bords (contrôle 20/10) */
.jtop:has(.js:nth-child(5)) .jscores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:visible;justify-content:stretch}
.jtop:has(.js:nth-child(5)) .jscores>:first-child{margin-left:0}
.jtop:has(.js:nth-child(5)) .js{max-width:none;min-width:0;justify-content:space-between}
.jtop:has(.js:nth-child(5)) .js i{max-width:none;flex:1 1 auto;min-width:0}
.jtop:has(.js:nth-child(4)):not(:has(.js:nth-child(5))) .jscores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;overflow:visible;justify-content:stretch}
.jtop:has(.js:nth-child(4)):not(:has(.js:nth-child(5))) .jscores>:first-child{margin-left:0}
.jtop:has(.js:nth-child(4)):not(:has(.js:nth-child(5))) .js{max-width:none;min-width:0;justify-content:space-between}
.jtop:has(.js:nth-child(4)):not(:has(.js:nth-child(5))) .js i{max-width:none;flex:1 1 auto;min-width:0}