/* ui/s2/jeu.css — Sorcerers 2 · l'interface de jeu, NOUVEAU DESIGN : fond crème, marine, rouge rubis et or ; pastilles et plaques arrondies,
   titres en Poppins, texte de cartes en Source Serif 4 (polices embarquées : assets/polices). Couleurs des camps : Rubis (rouge) et
   Myrtille (bleu). Tout est lisible par-dessus la scène 3D. Les noms de variables d'origine (--fluo, --ink, --bg) sont conservés :
   --fluo est désormais l'OR d'accent, --ink le marine, --bg la crème. */
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("../../assets/polices/poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("../../assets/polices/poppins-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("../../assets/polices/poppins-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-style:normal;font-display:swap;src:url("../../assets/polices/poppins-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:100 449;font-style:normal;font-display:swap;src:url("../../assets/polices/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:450 549;font-style:normal;font-display:swap;src:url("../../assets/polices/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:550 649;font-style:normal;font-display:swap;src:url("../../assets/polices/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:650 1000;font-style:normal;font-display:swap;src:url("../../assets/polices/ibm-plex-mono-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:200 900;font-style:normal;font-display:swap;src:url("../../assets/polices/source-serif-4-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:200 900;font-style:italic;font-display:swap;src:url("../../assets/polices/source-serif-4-latin-wght-italic.woff2") format("woff2")}
:root{--bg:#fcf0dc;--bg2:#fffaf0;--ink:#102237;--muted:#6c6a66;--fluo:#fdb946;--rubis:#fd3a3c;--myrtille:#3c5fc4;--rouge:#fd3a3c;--marine:#102237;--or:#fdb946;--creme:#fcf0dc;
  --f-t:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;--f-m:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;--f-j:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;--f-u:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-c:"Source Serif 4","Noto Serif",Georgia,"Times New Roman",serif;
  --ombre:0 5px 14px rgba(16,34,55,.30);--ombre-g:0 12px 34px rgba(16,34,55,.38);--r:18px;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#103b2d;overflow:hidden;font-family:var(--f-t);color:var(--ink)}
canvas{display:block;width:100%;height:100%;touch-action:none}
canvas.main{cursor:pointer}canvas.interdit{cursor:not-allowed}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row.fin{justify-content:flex-end;margin-top:12px}
.btn{font-family:var(--f-m);font-size:12px;font-weight:700;border:1.5px solid var(--ink);background:var(--bg);color:var(--ink);padding:7px 11px;cursor:pointer;line-height:1.15;border-radius:0;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover:not(:disabled){background:var(--fluo)}
.btn:disabled{opacity:.45;cursor:default}
.btnPlein{background:var(--ink);color:var(--bg)}.btnPlein:hover:not(:disabled){background:var(--fluo);color:var(--ink)}
.btn.grand{font-size:15px;padding:12px 18px}
.btn.rond{width:34px;height:34px;justify-content:center;padding:0;border-radius:50%}
:focus-visible{outline:2px solid var(--fluo);outline-offset:2px}

/* ---------------------------------------------------------------- accueil */
#accueil{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:22px;background:var(--bg);transition:opacity .6s,transform .6s}
#accueil .chargement{display:grid;gap:6px;justify-items:center;font:12px var(--f-m)}
#accueil progress{width:min(360px,70vw);height:8px;appearance:none;border:1.5px solid var(--ink);background:var(--bg)}
#accueil progress::-webkit-progress-bar{background:var(--bg)}#accueil progress::-webkit-progress-value{background:var(--fluo)}#accueil progress::-moz-progress-bar{background:var(--fluo)}
.credit{font:11px var(--f-m);color:var(--muted)}

/* ---------------------------------------------------------------- écrans en carte (menu, objectif, fin) */
#fin{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(680px,calc(100vw - 32px));padding:14px 18px}#fin h2{font-size:22px;margin:0 0 4px}#fin p{margin:2px 0;font:12px var(--f-m)}#fin .row{margin-top:8px}
.carteEcran{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:24px 26px}
.carteEcran h1,.carteEcran h2{font-family:var(--f-j);font-weight:700;margin:0 0 8px;letter-spacing:-.01em}.carteEcran h1{font-size:34px}.carteEcran h2{font-size:26px}
.chapo{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.45}
#menu .portraitDeco{float:right;width:110px;margin:-8px -8px 0 10px}
.menuChoix{display:grid;gap:10px;margin:8px 0 18px;clear:both}
.menuChoix label{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:center;font:12px var(--f-m);font-weight:700}
/* menus déroulants : texte et chevron explicitement noirs sur blanc, quel que soit le thème du navigateur ou de la page hôte (mode sombre : texte blanc invisible) */
select{font:12px var(--f-m);color:#0a0a0a;color-scheme:light;-webkit-appearance:none;appearance:none;border:1.5px solid var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230a0a0a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center;padding:5px 24px 5px 6px;border-radius:0;text-overflow:ellipsis}
select option{color:#0a0a0a;background:#fff}
input[type=text],input[type=password],input[type=number]{font:12px var(--f-m);color:#0a0a0a;background:#fff;color-scheme:light}
.menuBoutons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.buts{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:18px 0}
.buts>div{border:1.5px solid var(--ink);padding:12px;display:grid;gap:6px}.buts b{font:700 22px var(--f-m);background:var(--fluo);justify-self:start;padding:0 6px}.buts span{font-family:var(--f-j);font-size:18px;font-weight:600}.buts small{font-size:12px;color:var(--muted);line-height:1.35}.buts em{font:12px var(--f-m)}
.rubrique{font:11px var(--f-m);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#finDecompte{font:12px var(--f-m);margin:12px 0 4px}.jaugeFin{display:block;height:4px;background:#eee;margin-bottom:14px}#finJauge{display:block;height:100%;background:var(--fluo);transform-origin:left}

/* annonces */
.annonce{position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);z-index:45;background:var(--bg);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:22px 30px;display:grid;gap:10px;justify-items:center;cursor:pointer;animation:entre .35s cubic-bezier(.3,1.5,.5,1)}
.annonce small{font:12px var(--f-m);text-transform:uppercase;letter-spacing:.1em}.annonce .qui{font:600 24px var(--f-j)}.annonce .qui b{font-weight:700}
.annonce .jauge{display:block;width:100%;height:4px;background:var(--fluo);transform-origin:left;animation:jauge 4s linear forwards}
.annonce.tour{top:30%;border-color:var(--camp,var(--ink));box-shadow:6px 6px 0 var(--camp,var(--ink))}.annonce.tour strong{font:700 30px var(--f-j);color:var(--camp,var(--ink))}
.annonce.sortie,.annonce.tour.sortie{animation:sort .34s ease-in forwards}
@keyframes entre{from{transform:translate(-50%,-50%) scale(.7);opacity:0}}@keyframes sort{to{transform:translate(-50%,-60%) scale(.9);opacity:0}}@keyframes jauge{to{transform:scaleX(0)}}

/* ---------------------------------------------------------------- démonstration des sorts */
#demo{position:fixed;inset:0;z-index:30;pointer-events:none}#demo>*{pointer-events:auto}
.demoBarre{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;gap:6px;align-items:center;background:var(--bg);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:8px 10px;max-width:calc(100vw - 32px)}
.demoBarre select{padding:6px 24px 6px 8px;max-width:38vw}
#demoCarte{position:absolute;left:16px;bottom:16px;width:min(240px,34vw);container-type:inline-size}
#demoFil{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:var(--bg);border:1.5px solid var(--ink);padding:5px 10px;font:11px var(--f-m);white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis}
body.en-demo #btnReglages,body.en-demo .coin{display:none}
/* ---------------------------------------------------------------- recrutement — NOUVEAU DESIGN
   En-tête : pastille « Recrutement » et commutateur Tirage / Retour ; deux pastilles d'équipe (Rubis, Myrtille) aux quatre places ;
   au centre la carte du sorcier visé (flèches, Recruter, Grimoire) ; en bas la bande de vignettes à parcourir. Trois étages :
   0 les sorciers · 1 le grimoire (la bande montre alors ses sorts) · 2 un sort en grand, retournable. */
#recrutement{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden;--haut:196px;--bas:148px}
#recrutement>*{pointer-events:auto}#recrutement.enTunnel{pointer-events:auto}
body.en-recrutement #btnReglages,body.en-recrutement .coin{display:none}
/* bandeau de coins géométriques, comme sur la carte */
#recrutement::before,#recrutement::after{content:'';position:absolute;top:0;width:min(34vw,330px);height:88px;pointer-events:none;z-index:1}
#recrutement::before{left:0;background:linear-gradient(135deg,var(--rubis) 0 34%,var(--ink) 34% 62%,var(--fluo) 62% 74%,transparent 74%);clip-path:polygon(0 0,100% 0,0 100%)}
#recrutement::after{right:0;background:linear-gradient(225deg,var(--ink) 0 30%,var(--rubis) 30% 58%,var(--fluo) 58% 70%,transparent 70%);clip-path:polygon(0 0,100% 0,100% 100%)}
.recTete{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:grid;justify-items:center;gap:9px;z-index:6}
.recTitre{margin:0;display:flex;align-items:center;gap:14px;padding:9px 34px 9px 24px;border-radius:999px;background:var(--bg);color:var(--ink);font:800 clamp(22px,3vw,30px)/1.1 var(--f-j);letter-spacing:-.01em;box-shadow:var(--ombre),0 0 0 3px rgba(255,255,255,.7)}
.recTitre svg{width:34px;height:34px;fill:currentColor}
.recTete #recTour{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.recSeg{display:flex;border-radius:999px;overflow:hidden;border:3px solid var(--ink);background:var(--bg);box-shadow:var(--ombre)}
.recSeg button{display:flex;align-items:center;gap:10px;padding:7px 24px 7px 18px;border:0;font:700 clamp(15px,2vw,19px)/1 var(--f-j);cursor:pointer;transition:filter .15s}
.recSeg button:hover:not(:disabled){filter:brightness(1.07)}.recSeg button:active:not(:disabled){filter:brightness(.94)}
.recSeg svg{width:24px;height:24px;fill:currentColor}.recSeg svg circle{fill:var(--pip,currentColor)}
.segRouge{background:var(--rubis);color:#fff;--pip:var(--rubis)}.segCreme{background:var(--bg);color:var(--ink)}
/* pastilles d'équipe : icône, nom, quatre places rondes (portrait de la recrue quand elle arrive) */
.banc{position:absolute;top:132px;left:max(14px,2.2vw);display:flex;align-items:center;gap:14px;padding:7px 16px 7px 14px;border-radius:24px;background:var(--bg);border:3.5px solid var(--camp,var(--ink));box-shadow:var(--ombre);color:var(--camp,var(--ink));transition:box-shadow .25s,transform .25s;z-index:5;max-width:calc(50vw - 24px)}
.banc.droite{left:auto;right:max(14px,2.2vw)}
.banc.auTrait{transform:translateY(-3px);box-shadow:0 0 0 5px color-mix(in srgb,var(--camp) 28%,transparent),var(--ombre-g)}
.banc h3{margin:0;display:flex;align-items:center;gap:9px;font:800 clamp(16px,1.9vw,20px)/1 var(--f-j);color:var(--camp)}
.banc h3 .icCamp{width:28px;height:28px;flex:none}
.sieges{display:flex;gap:7px;margin-left:auto}
.siege{position:relative;flex:none;width:38px;height:38px;border-radius:50%;background:rgba(16,34,55,.09);display:grid;place-items:center;overflow:hidden;font:800 16px/1 var(--f-j);color:var(--camp)}
.siege b{font-weight:800}.siege span{display:none}
.siege.plein{background:var(--bg2);box-shadow:0 0 0 2.5px var(--camp)}.siege.plein img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.siege.arrive{animation:siegeArrive .5s cubic-bezier(.3,1.4,.5,1)}@keyframes siegeArrive{from{transform:scale(.55);background:var(--fluo)}}
/* la zone libre entre l'en-tête et la bande : la carte du sorcier visé */
.recRoue{position:absolute;inset:var(--haut) 0 0 0;outline:none;touch-action:pan-x;user-select:none;container-type:size;pointer-events:none;--navX:170px}
.recRoue>*{pointer-events:auto}
.recHalo,.recViseur,.recRetour{display:none}
.recCouche{position:absolute;inset:0;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.75,.25,1)}
.recCouche[data-etat="passe"],.recCouche[data-etat="loin"]{opacity:0;pointer-events:none;transform:translateY(30px)}
/* la bande de vignettes (sorciers à l'étage 0, sorts du grimoire à l'étage 1) */
#recAnneau,#recSorts{position:absolute;inset:auto 0 12px 0;height:auto;display:flex;gap:11px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:16px 22px 12px;scroll-snap-type:x proximity;scrollbar-width:none;justify-content:safe center;align-items:flex-end}
#recAnneau::-webkit-scrollbar,#recSorts::-webkit-scrollbar{display:none}
.recCarte{position:static;flex:none;width:var(--wv,86px);aspect-ratio:5/7;margin:0;padding:0;border:0;background:none;cursor:pointer;scroll-snap-align:center;transform:none!important;transition:translate .22s cubic-bezier(.3,1.4,.5,1),filter .25s;border-radius:14px}
.recCarte span:not(.vignette){display:none}
.vignette{display:block;position:relative;width:100%;height:100%;border-radius:13px;overflow:hidden;isolation:isolate;background:var(--cr);border:3px solid var(--bg2);box-shadow:0 0 0 1.5px var(--ink),0 6px 12px rgba(16,34,55,.34);transition:box-shadow .2s}
.vignette .fcCadre{position:absolute;inset:0;width:100%;height:100%}
.vignette img{position:absolute;left:6%;top:1%;width:88%;height:80%;object-fit:cover;object-position:50% 44%;mix-blend-mode:multiply;clip-path:inset(0 0 7% 0);pointer-events:none}
.recCarte:hover{translate:0 -4px}
.recCarte.visee{translate:0 -10px;z-index:2}.recCarte.visee .vignette{box-shadow:0 0 0 4px var(--fluo),0 0 0 6.5px var(--ink),0 12px 20px rgba(16,34,55,.45)}
#recSorts .recSortCarte{position:static;flex:none;width:calc(var(--wv,86px) * 1.12);margin:0;padding:0;border:0;background:none;cursor:zoom-in;transition:translate .22s cubic-bezier(.3,1.4,.5,1);border-radius:6cqw;scroll-snap-align:center;transform:none!important}
#recSorts[data-etat="actif"] .recSortCarte{animation:sortArrive .55s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i) * 22ms)}
@keyframes sortArrive{from{opacity:0;scale:.5;translate:0 24px}}
#recSorts .recSortCarte:hover{translate:0 -8px;z-index:5}
#recSorts .recNb{position:absolute;right:-5px;top:-5px;z-index:6;background:var(--ink);color:var(--fluo);font:800 11px/1 var(--f-j);padding:3px 7px;border-radius:999px;font-style:normal;border:2px solid var(--bg)}
/* le centre : la carte du sorcier visé (recule quand le grimoire s'ouvre) */
#recCentre{position:absolute;left:50%;top:4px;bottom:var(--bas);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:20;width:auto}
#recCentre[data-niveau="1"]{transform:translateX(-50%) scale(.9);top:46px}#recCentre[data-niveau="1"] .recBoutons{opacity:0;pointer-events:none}
#recCentre[data-etat="passe"]{transform:translateX(-50%) scale(1.2);opacity:0;pointer-events:none}
.recCarteCentre{cursor:pointer;width:min(330px,calc((100cqh - var(--bas) - 130px) * 5 / 7),78cqw);filter:drop-shadow(0 16px 22px rgba(16,34,55,.4))}
.recCarteCentre.change{animation:carteCentre .42s cubic-bezier(.3,1.45,.5,1)}
@keyframes carteCentre{from{transform:perspective(700px) rotateY(55deg) scale(.82);opacity:.35}}
#recCentre .recBoutons{display:grid;gap:8px;width:84%;transition:opacity .3s}
.pastilleBtn{display:flex;align-items:center;justify-content:center;gap:10px;height:clamp(40px,5.6vh,50px);padding:0 22px;border-radius:999px;border:3px solid var(--ink);font:700 clamp(16px,2.1vh,19px)/1 var(--f-j);cursor:pointer;box-shadow:var(--ombre);transition:filter .15s,transform .15s;white-space:nowrap}
.pastilleBtn svg{width:25px;height:25px;flex:none;fill:currentColor}.pastilleBtn svg.icCamp{fill:none}
.pastilleBtn.marine{background:var(--ink);color:var(--bg)}.pastilleBtn.creme{background:var(--bg);color:var(--ink)}
.pastilleBtn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.pastilleBtn:disabled{opacity:.55;cursor:default;box-shadow:none}
#recCentre .aide,#recCentreSort .aide{font:600 12px var(--f-m);text-align:center;margin:0;background:var(--bg);padding:2px 8px;border-radius:99px}
/* l'étage 2 : un sort en grand (recto, verso) */
#recCentreSort{position:fixed;left:50%;top:calc(50% + 52px);z-index:55;transform:translate(-50%,-50%);display:grid;gap:12px;justify-items:center;width:min(390px,calc(100vw - 130px),calc((100dvh - 350px) * 5 / 7))}
#recCentreSort[data-etat="loin"]{transform:translate(-50%,-50%) scale(.15);opacity:0;pointer-events:none}
#recCentreSort .recFlip{width:100%;filter:drop-shadow(0 18px 26px rgba(16,34,55,.45))}
.recFlip{position:relative;cursor:pointer;perspective:1200px}.recFlip .recto,.recFlip .verso{transition:transform .5s;backface-visibility:hidden}.recFlip .verso{position:absolute;inset:0;transform:rotateY(180deg)}
.recFlip.retournee .recto{transform:rotateY(-180deg)}.recFlip.retournee .verso{transform:rotateY(0)}
#recRetourBulle{position:fixed;z-index:500;pointer-events:none;padding:7px 14px;border-radius:999px;background:var(--ink);color:var(--bg);font:700 13px var(--f-j);white-space:nowrap;transform:translate(14px,14px);box-shadow:var(--ombre);opacity:0;transition:opacity .2s}
#recRetourBulle.vu{opacity:1}#recRetourBulle b{display:inline-block;color:var(--fluo);animation:flecheRetour .9s ease-in-out infinite}
@keyframes flecheRetour{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
#recrutement.retourPossible{cursor:zoom-out}
/* FLÈCHES ◂ ▸ : de part et d'autre de la carte du centre, à chaque étage */
.recNav{position:absolute;left:50%;top:var(--navY,45%);z-index:58;width:54px;height:54px;border-radius:50%;padding:0;margin:0;transform:translate(-50%,-50%) translateX(calc(-1 * var(--navX)));border:3px solid var(--ink);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--ombre);transition:transform .25s,background .2s}
.recNav svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.recNav.suiv{transform:translate(-50%,-50%) translateX(var(--navX))}
.recNav:hover{background:var(--fluo)}.recNav:hover:not(.suiv){transform:translate(-50%,-50%) translateX(calc(-1 * var(--navX) - 4px))}.recNav.suiv:hover{transform:translate(-50%,-50%) translateX(calc(var(--navX) + 4px))}
.recRoue.sortInspecte .recNav{position:fixed;top:50%}
/* cartes en vol (recrue vers sa place, sort vers le centre) */
#recVol{position:fixed;inset:0;pointer-events:none;z-index:120}
.recVolant{position:absolute;transform-origin:50% 50%;will-change:transform}.recVolSorcier{border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(16,34,55,.45)}.recVolSorcier img{width:100%;height:100%;object-fit:cover;object-position:top;background:var(--cr)}
/* fil d'Ariane (étages 1 et 2) */
.recPied{position:absolute;left:50%;top:calc(var(--haut) + 2px);transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:var(--bg);border:3px solid var(--ink);border-radius:999px;padding:5px 8px 5px 18px;max-width:92vw;box-shadow:var(--ombre);z-index:7}
#recFil{font:600 13px var(--f-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recPied .pastilleBtn{height:32px;font-size:14px;padding:0 14px;box-shadow:none;background:var(--ink);color:var(--bg)}
/* grand écran : les deux équipes encadrent le titre, sur la même rangée */
@media (min-width:1180px){
  #recrutement{--haut:134px}
  .banc{top:20px}
}
/* écran étroit ou court : titre plus compact, équipes dessous */
@media (max-width:620px){.banc{padding:6px 10px;gap:8px;border-width:3px;top:128px}.banc h3 span{display:none}.siege{width:30px;height:30px;font-size:13px}.sieges{gap:5px}#recrutement{--haut:186px;--bas:134px}.recNav{width:44px;height:44px}.recCarte{--wv:70px}}
@media (max-height:640px){#recrutement{--bas:118px}.recCarte{--wv:66px}}

/* ---------------------------------------------------------------- les cartes (recto, verso, sorcier, dos) — NOUVEAU DESIGN
   Fond crème, cadre géométrique (SVG engendré par ui/s2/themes.js, aux couleurs du sorcier), personnage fondu sur la crème
   (multiply), médaillons marine à filet d'or, plaque de titre à empattements, plaque de texte. Mesures en cqw (largeur de carte =
   100, hauteur = 140). La densité du texte (data-l 1 à 4) règle la hauteur de la fenêtre d'illustration et la place des plaques. */
.fcBoite{container-type:inline-size;width:100%;display:block}
.fc{position:relative;width:100%;aspect-ratio:5/7;border-radius:5.4cqw;overflow:hidden;isolation:isolate;color:#0f1b2e;text-align:center;font-family:var(--f-c);
  --a:#f2352f;--a2:#ff7a4a;--b:#fdb946;--n:#102237;--acc:#c0201c;--cr:#fcf3df;--corps-carte:5.2cqw;
  --y-rang:85.3;--y-nom:91.5;--h-nom:17;--y-tx:111;--h-tx:21.5;--ya:82;
  background:var(--cr);box-shadow:0 .5cqw 1.6cqw rgba(16,34,55,.28)}
.fc[data-l="2"]{--ya:76;--y-rang:79.3;--y-nom:85.5;--h-nom:15.5;--y-tx:102.5;--h-tx:29.5}
.fc[data-l="3"]{--ya:70;--y-rang:73.3;--y-nom:79.5;--h-nom:15;--y-tx:96;--h-tx:36}
.fc[data-l="4"]{--ya:64;--y-rang:67.3;--y-nom:73.5;--h-nom:14.5;--y-tx:90;--h-tx:42}
.fcCadre{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.fc .fcArt{position:absolute;left:6cqw;right:6cqw;top:0;height:calc((var(--ya) + 1) * 1cqw);z-index:1;pointer-events:none;mix-blend-mode:multiply;overflow:hidden}
.fc .fcArt img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block}
.fc .fcArt img.portraitRepli{object-position:50% 40%;clip-path:inset(0 0 7% 0)}
/* médaillons : marine, filet d'or, liseré crème */
.fcCout,.fcEmbleme,.fcMed,.fcCoin{border-radius:50%;box-sizing:border-box;background:var(--n);border:.9cqw solid var(--b);box-shadow:0 0 0 .6cqw var(--cr),0 .8cqw 1.6cqw rgba(16,34,55,.35);display:grid;place-items:center;z-index:3}
.fcCout{position:absolute;left:3.6cqw;top:3.4cqw;width:21.5cqw;height:21.5cqw;align-content:center;gap:0;color:var(--cr)}
.fcCout b{font:800 13.5cqw/.9 var(--f-c);display:block}.fcCout i{font:700 5.4cqw/1 var(--f-c);font-style:normal;letter-spacing:.04em;margin-top:-.4cqw}
.fcCout::before,.fcCout::after{content:'';position:absolute;top:50%;width:2.2cqw;height:2.2cqw;background:var(--b);transform:translateY(-50%) rotate(45deg);opacity:.9}.fcCout::before{left:1.6cqw}.fcCout::after{right:1.6cqw}
.fcEmbleme{position:absolute;right:3.8cqw;top:3.4cqw;width:19cqw;height:19cqw}
.fcEmbleme svg,.fcCoin svg,.fcMed svg.emb{width:64%;height:64%;display:block;overflow:visible}
.fcMed{position:relative;flex:none;width:12.8cqw;height:12.8cqw;z-index:4}
.fcMed svg{width:58%;height:58%;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}.fcMed svg .plein{fill:#fff;stroke:none}
.fcMed svg.emb{width:66%;height:66%;stroke:none}
.fcRang{position:absolute;left:2.4cqw;right:2.4cqw;top:calc((var(--y-rang) - 6.4) * 1cqw);height:12.8cqw;display:flex;align-items:center;z-index:3}
.fcPastille{flex:1 1 0;min-width:0;height:8.8cqw;box-sizing:border-box;display:grid;place-items:center;background:var(--n);border-radius:4.4cqw;border:.45cqw solid var(--b);
  font:700 4.6cqw/1 var(--f-c);letter-spacing:.03em;text-transform:uppercase;color:var(--cr);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 5.2cqw}
.fcMed.g{margin-right:-4.4cqw}.fcMed.d{margin-left:-4.4cqw}
.fcPivot{flex:none;width:10cqw;height:10cqw;margin:0 -1.2cqw;border-radius:50%;background:var(--a);border:.8cqw solid var(--b);box-shadow:0 0 0 .6cqw var(--cr);display:grid;place-items:center;z-index:5;position:relative}
.fcPivot svg{width:62%;height:62%;fill:var(--cr);display:block}
/* plaque du titre */
.fcNom{position:absolute;left:8.6cqw;right:8.6cqw;top:calc(var(--y-nom) * 1cqw);height:calc(var(--h-nom) * 1cqw);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9cqw;z-index:2;
  background:var(--cr);border-radius:5cqw;box-shadow:0 0 0 .7cqw var(--b),0 0 0 1.5cqw var(--a),0 1cqw 2cqw rgba(16,34,55,.3)}
.fcNom::before,.fcNom::after{content:'';position:absolute;top:36%;width:2.8cqw;height:2.8cqw;background:var(--a);transform:rotate(45deg)}.fcNom::before{left:3.4cqw}.fcNom::after{right:3.4cqw}
.fcNom>span{display:block;white-space:nowrap;max-width:100%;font:800 10.4cqw/1.02 var(--f-c);letter-spacing:-.005em;color:#0e1a2c}
.fcSous{display:block;font:600 3.2cqw/1 var(--f-u);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.fcSous:empty{display:none}
/* plaque de texte */
.fcTexte{position:absolute;left:15.4cqw;right:15.4cqw;top:calc(var(--y-tx) * 1cqw);height:calc(var(--h-tx) * 1cqw);margin:0;padding:.8cqw 3cqw;z-index:2;overflow:hidden;display:flex;align-items:safe center;justify-content:center;
  background:var(--cr);border-radius:5cqw;box-shadow:0 0 0 .7cqw var(--b),0 0 0 1.5cqw var(--a),0 1cqw 2cqw rgba(16,34,55,.3);text-align:center;hyphens:auto;-webkit-hyphens:auto;font:400 var(--corps-carte)/1.3 var(--f-c);color:#14213a}
.fcCorps{display:block;max-height:100%}
.fcTexte b{display:block;font-weight:800;font-size:1.22em;line-height:1.12;color:#0e1a2c;margin-bottom:.6cqw}.fcTexte i{display:block;margin-top:1cqw;color:var(--acc);font-style:italic;font-size:.92em}
.fcTexte.coupe .fcCorps::after{content:' …';color:var(--acc);font-weight:800}
.fcCoin{position:absolute;bottom:3.6cqw;width:12.4cqw;height:12.4cqw}.fcCoin.g{left:3cqw}.fcCoin.d{right:3cqw}
.fc[data-l="1"] .fcCoin{bottom:3cqw;width:13cqw;height:13cqw}
/* ultime : cadre marine, filets d'or */
.fcUltime .fcPastille.g{background:var(--b);color:#0a1226;border-color:var(--cr)}
.fcUltime .fcCout{border-color:#fff0b8}
.fcUltime .fcNom,.fcUltime .fcTexte{box-shadow:0 0 0 .7cqw var(--b),0 0 0 1.5cqw #0a1226,0 1cqw 2cqw rgba(16,34,55,.3)}
/* verso : une grande feuille crème sur le cadre ; nom, fiche technique, règle complète */
.fcVerso .fcFeuille{position:absolute;left:7.2cqw;right:7.2cqw;top:7.2cqw;bottom:7.2cqw;z-index:2;display:flex;flex-direction:column;gap:2.4cqw;padding:5cqw 4.6cqw 4.4cqw;background:var(--cr);border-radius:5.4cqw;box-shadow:0 0 0 .7cqw var(--b),0 0 0 1.5cqw var(--a),0 1cqw 2cqw rgba(16,34,55,.3)}
.fcVerso .fcNom{position:static;flex:none;height:auto;background:none;box-shadow:none;border-radius:0;padding:0 6cqw 1cqw;min-height:13cqw}.fcVerso .fcNom::before,.fcVerso .fcNom::after{display:none}
.fcVerso .fcNom>span{font-size:9cqw}
.fcVerso .fcDetails{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;text-align:left;padding:0 .6cqw}
.fcStats{display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw;margin:0}
.fcStat{border-radius:2.6cqw;background:var(--n);padding:1.8cqw 2.2cqw;min-width:0;border:.4cqw solid var(--b)}
.fcStat dt{font:600 2.9cqw/1 var(--f-u);letter-spacing:.14em;text-transform:uppercase;color:var(--b)}.fcStat dd{margin:1cqw 0 0;font:700 4.5cqw/1.18 var(--f-c);color:var(--cr)}
.fcStat.large{grid-column:1/-1}
.fcVerso .fcTexte{position:static;inset:auto;height:auto;margin:2.6cqw 0 0;padding:0;overflow:visible;display:block;box-shadow:none;background:none;border-radius:0;text-align:left;font-size:4.7cqw;line-height:1.38}
.fcVerso .fcTexte i{margin-top:.6em}
.fcEmbleme.petit{right:2.4cqw;top:2.4cqw;width:14cqw;height:14cqw;z-index:4}
/* dos : cadre rouge, médaillon central marine à sceau d'or */
.fcDos{display:grid;place-items:center}
.fcDosSceau{position:relative;z-index:2;width:42cqw;height:42cqw;border-radius:50%;background:var(--n);border:1.6cqw solid var(--b);box-shadow:0 0 0 1cqw var(--cr),0 1.4cqw 3cqw rgba(16,34,55,.35);display:grid;place-items:center;margin-top:-8cqw}
.fcDosSceau b{font:800 28cqw/1 var(--f-c);color:var(--b)}
.fcSorcier .fcArt img{object-position:50% 52%;clip-path:inset(0 0 7% 0)}
/* carte à jouer vue de face : filtre gris si injouable */
.carte.grise .fc{filter:grayscale(1) brightness(.8) contrast(.9)}.carte.grise:hover .fc,.carte.grise.lue .fc,.carte.grise.survolee .fc{filter:grayscale(.45) brightness(.92)}
/* jouable ou pas, d'un coup d'œil : les cartes jouables portent un liseré d'or et se tiennent droites ; les injouables sont
   grises, un peu enfoncées, et portent une pastille « ✕ » */
.carte:not(.grise):not(.choisie) .fc{box-shadow:0 0 0 1cqw var(--fluo),0 0 0 1.8cqw var(--ink),0 12px 24px -8px rgba(16,34,55,.6)}
.carte.grise{filter:none}.carte.grise .corpsC{transform:translateY(calc(var(--wc) * .06))}
.carte.grise::after{content:'✕';position:absolute;z-index:3;top:calc(var(--wc) * .04);left:calc(var(--wc) * .02);width:calc(var(--wc) * .2);height:calc(var(--wc) * .2);border-radius:50%;background:var(--ink);color:#fff;font:700 calc(var(--wc) * .12)/calc(var(--wc) * .2) var(--f-m);text-align:center;box-shadow:0 0 0 2px var(--bg);pointer-events:none}

/* ---------------------------------------------------------------- haut de l'écran : portraits des camps */
#familles{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:12;display:flex;align-items:flex-start;gap:10px;--tp:46px}
.campCol{display:grid;justify-items:center;gap:4px;opacity:.78;transition:opacity .3s}.campCol.auTrait{opacity:1}
.campNom{font:700 11px var(--f-m);background:var(--bg);border:1.5px solid var(--camp);color:var(--ink);padding:1px 6px}.campCol.auTrait .campNom{background:var(--camp);color:#fff}
.portraits{display:flex;gap:5px}.camp0 .portraits{flex-direction:row-reverse}
.sorcier{position:relative;width:var(--tp);height:var(--tp);padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--bg);overflow:hidden;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.sorcier img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}
.sorcier.actif{box-shadow:0 0 0 3px var(--fluo),0 3px 0 3px var(--ink);transform:translateY(-2px)}
.sorcier.tombe{filter:grayscale(1) brightness(.85);opacity:.5}.sorcier.inerte{cursor:help}
.pvMini{position:absolute;left:12%;right:12%;bottom:6%;height:4px;background:#e4e4e4;border:1px solid var(--ink)}.pvMini::after{content:"";position:absolute;inset:0;width:calc(var(--pv) * 100%);background:var(--fluo)}
.centreHaut{display:grid;justify-items:center;background:var(--bg);border:2px solid var(--ink);padding:4px 10px;box-shadow:var(--ombre);min-width:84px}
.centreHaut small{font:10px var(--f-m);text-transform:uppercase;letter-spacing:.05em}.centreHaut b{font:700 18px var(--f-m)}
#ficheSorcier{position:fixed;z-index:30;width:240px;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .15s,transform .15s}
#ficheSorcier.vu{opacity:1;transform:none}
.ficheEtat{background:var(--bg);border:2px solid var(--camp,var(--ink));border-top:0;padding:8px;font-size:12px;display:grid;gap:4px}
.ficheEtat .pv{display:flex;gap:3px}.ficheEtat .pv i{width:12px;height:12px;transform:rotate(45deg);border:1.5px solid var(--ink);background:#e4e4e4}.ficheEtat .pv i.plein{background:var(--camp)}
.ficheEtat small{font:11px var(--f-m);color:var(--muted)}

/* ---------------------------------------------------------------- coins, actions rares, PA, fin du tour */
.coin{position:fixed;z-index:21;display:flex;gap:8px}.hautDroite{top:16px;right:max(16px,env(safe-area-inset-right))}
#modes{position:fixed;left:16px;bottom:16px;z-index:14;display:grid;gap:6px}
#modes button{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--ink);padding:6px 10px 6px 6px;font:700 11px var(--f-m);cursor:pointer;box-shadow:var(--ombre)}
#modes button svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
#modes button.actif{background:var(--fluo)}
#pastillesPA{position:fixed;right:16px;bottom:74px;z-index:16;display:flex;gap:6px;align-items:center;background:var(--bg);border:1.5px solid var(--ink);padding:5px 9px;box-shadow:var(--ombre)}
#pastillesPA .lib{font:700 11px var(--f-m);margin-right:4px}
#pastillesPA i{width:16px;height:16px;transform:rotate(45deg);border:2px solid var(--ink);background:var(--rubis)}#pastillesPA[data-camp="1"] i{background:var(--myrtille)}
#pastillesPA i.use{background:var(--bg)}#pastillesPA i.pop{animation:pop .45s}
@keyframes pop{40%{transform:rotate(45deg) scale(1.5)}}
#btnFinTour{position:fixed;right:16px;bottom:16px;z-index:16;font-size:14px;padding:12px 16px;box-shadow:4px 4px 0 var(--fluo)}
#btnFinTour[data-camp="0"]:not(:disabled){border-color:var(--rubis)}#btnFinTour[data-camp="1"]:not(:disabled){border-color:var(--myrtille)}
#indice{position:fixed;left:50%;top:104px;transform:translate(-50%,-8px);z-index:22;background:var(--bg);border:1.5px solid var(--ink);font:12.5px var(--f-m);padding:6px 12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(560px,90vw);text-align:center}
#indice.vu{opacity:1;transform:translate(-50%,0)}#indice.alerte{border-color:var(--rubis);box-shadow:3px 3px 0 var(--rubis)}
#aideCiblage{position:fixed;right:16px;bottom:126px;z-index:17;width:min(280px,40vw);background:var(--bg);border:1.5px solid var(--ink);box-shadow:var(--ombre);padding:10px;display:grid;gap:6px;font-size:12.5px;line-height:1.35}

body:not(.en-ciblage) #aideCiblage #btnAnnulerCible,body:not(.en-ciblage) #consigneCible{display:none}
#consigneCible{font-weight:700}#cibleInfo{font:11.5px var(--f-m)}#cibleInfo[data-legal="false"]{color:var(--muted)}#erreurCible{color:var(--rubis);font-weight:600}


/* ---------------------------------------------------------------- main, pioche, défausse, carte tenue */
#zoneMain{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:15;display:flex;align-items:flex-end;gap:14px;padding:0 0 10px;--wc:clamp(100px,12.2vw,140px);transition:transform .35s cubic-bezier(.3,1.2,.5,1)}
#zoneMain.pliee{transform:translate(-50%,66%)}
/* gros plan « Fire Emblem » (réglage) : la main se retire sous l'écran et les panneaux latéraux s'effacent pour laisser lire l'action */
body.en-gros-plan #zoneMain{transform:translate(-50%,108%);transition-duration:.45s}
body.en-gros-plan #aideCiblage,body.en-gros-plan #indice,body.en-gros-plan #pastillesPA,body.en-gros-plan #btnFinTour{opacity:0;transition:opacity .35s;pointer-events:none}
#eventail{display:flex;align-items:flex-end;justify-content:center;min-width:calc(var(--wc) * 2);height:calc(var(--wc) * 1.4)}
.carte{container-type:inline-size;position:relative;width:var(--wc);margin:0 calc(var(--wc) * -0.16);transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * 3deg)) translateY(calc((var(--i) - (var(--n) - 1) / 2) * (var(--i) - (var(--n) - 1) / 2) * 2px));transform-origin:50% 120%;transition:transform .2s,margin .2s,filter .2s;cursor:pointer;outline:none}
.carte .corpsC{position:relative;transition:transform .22s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.carte .recto,.carte .verso{backface-visibility:hidden;transition:transform .45s}.carte .verso{position:absolute;inset:0;transform:rotateY(180deg)}
.carte.retournee .recto{transform:rotateY(-180deg)}.carte.retournee .verso{transform:rotateY(0)}
.carte.survolee,.carte:focus-visible,.carte.lue{z-index:5;margin:0 calc(var(--wc) * 0.06)}
.carte.survolee .corpsC,.carte:focus-visible .corpsC,.carte.lue .corpsC{transform:translateY(calc(var(--wc) * -0.92)) scale(2);transform-origin:50% 100%}
.carte.choisie .fc{outline:.8cqw solid #e9cd8f;outline-offset:.6cqw;box-shadow:inset 0 0 0 .55cqw #d9ba7c,inset 0 0 0 1.55cqw #0f1a16,0 0 30px -2px rgba(233,205,143,.7)}.carte.copiable .fc{box-shadow:0 0 0 3px #ffc23a;animation:respire 1s infinite alternate}
.btnLire{position:absolute;right:6cqw;top:68cqw;width:12cqw;height:12cqw;padding:0;border-radius:50%;border:.7cqw solid #d9ba7c;background:#10221c;color:#f6ecd4;font:italic 700 7cqw/1 var(--f-c);display:grid;place-items:center;cursor:pointer;box-shadow:0 .6cqw 1.8cqw rgba(0,0,0,.55);opacity:0;transition:opacity .15s;z-index:3}.btnLire:hover{background:#d9ba7c;color:#10221c}
.carte.survolee .btnLire,.carte:focus-visible .btnLire{opacity:1}
body:not(.telephone) .carte .corpsC{pointer-events:none}   /* le survol est calculé sur l'emplacement de la carte dans la main (main.js), pas sur son image agrandie */
.raisonCarte{display:none}.carte.grise.survolee .raisonCarte{display:block;position:absolute;left:50%;bottom:calc(100% + var(--wc) * 2.45);transform:translateX(-50%);width:max(220px,calc(var(--wc) * 2));background:var(--bg);border:1.5px solid var(--rubis);font:11px var(--f-m);padding:5px 8px;z-index:6}
#zoneMain.avecTenue .raisonCarte{display:none!important}   /* une carte est tenue au-dessus de la main : pas d’infobulle par-dessus */
/* maîtrise des sorts (règle maison) : pastille fluo en bas à gauche, +1 à +3 */
.maitriseCarte{position:absolute;left:-6px;bottom:-6px;min-width:26px;height:22px;padding:0 5px;border-radius:11px;border:1.5px solid var(--ink);background:var(--fluo);color:var(--ink);font:700 12px/19px var(--f-m);text-align:center;z-index:3;pointer-events:auto}.maitriseCarte[hidden]{display:none}
.pile{position:relative;width:calc(var(--wc) * .62);display:grid;justify-items:center;font:11px var(--f-m)}
.pile .dos,.pile .dessus{width:100%;aspect-ratio:5/7;border:2px solid var(--bg2);border-radius:10px;background:radial-gradient(circle at 50% 50%,#102237 0 17%,#fdb946 18% 22%,#102237 23% 27%,transparent 28%),linear-gradient(135deg,#fd3a3c 0 40%,#102237 40% 46%,#fd3a3c 46% 100%);box-shadow:0 4px 10px rgba(16,34,55,.45)}
.pile .dessus{background:var(--bg);overflow:hidden}.pile .dessus .fc{border-radius:8px;font-size:0}
.pile>b{position:absolute;top:30%;background:var(--fluo);border:1.5px solid var(--ink);padding:0 5px;font:700 13px var(--f-m);z-index:2}.pile>small{background:var(--bg);padding:0 4px;margin-top:3px}
#pioche.vide .dos{opacity:.35}
#porteCarte{position:fixed;right:16px;top:96px;z-index:18;width:clamp(170px,17vw,250px);display:grid;gap:6px}
#porteCarte .carte.tenue{width:100%;margin:0;transform:none;animation:tenue 1.6s ease-in-out infinite alternate}
@keyframes tenue{to{filter:drop-shadow(0 0 10px var(--fluo))}}@keyframes respire{to{transform:translateY(-6px)}}
.optionsTenue{display:flex;gap:6px}.optionsTenue button{flex:1;font:700 11px var(--f-m);border:1.5px solid var(--ink);background:var(--bg);padding:6px;cursor:pointer}.optionsTenue button.actif{background:var(--fluo)}
.carteVol{position:fixed;left:0;top:0;width:150px;z-index:50;pointer-events:none}
/* combustion d'une carte : masque qui monte, liseré de braise, cendres */
@property --brulure{syntax:'<percentage>';inherits:false;initial-value:0%}
.carteVol.seConsume{--brulure:0%;-webkit-mask-image:linear-gradient(0deg,transparent calc(var(--brulure) - 8%),#000 var(--brulure));mask-image:linear-gradient(0deg,transparent calc(var(--brulure) - 8%),#000 var(--brulure));filter:saturate(1.2)}
.carteVol.seConsume::after{content:'';position:absolute;left:0;right:0;height:9%;bottom:calc(var(--brulure) - 9%);background:linear-gradient(0deg,transparent,var(--braise,#ffb347) 40%,#fff3c4 70%,transparent);mix-blend-mode:screen;filter:blur(1px);pointer-events:none}
.braise{position:fixed;width:5px;height:5px;border-radius:50%;z-index:51;pointer-events:none;box-shadow:0 0 8px 2px rgba(255,180,80,.8)}
body.en-passage #zoneMain,body.en-passage #modes,body.en-passage #porteCarte{visibility:hidden}

/* ---------------------------------------------------------------- dialogues */
dialog{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px 20px;max-width:min(860px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--bg);color:var(--ink)}
dialog::backdrop{background:#0a0a0a66}
.choixTete{display:flex;gap:12px;align-items:center;margin-bottom:12px}.choixTete img{width:56px;height:56px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;object-position:top}
.choixTete small{font:11px var(--f-m);color:var(--muted)}.choixTete h3{margin:2px 0 0;font:700 20px var(--f-j)}
.choixCartes{display:flex;flex-wrap:wrap;gap:10px;max-height:62dvh;overflow:auto;padding:4px}
.choixCartes .mini{width:168px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.choixCartes .mini.choisi .fc{box-shadow:0 0 0 4px var(--fluo)}
.choixOption,.planBtn{font:700 12px var(--f-m);border:1.5px solid var(--ink);background:var(--bg);padding:8px 10px;cursor:pointer}.choixOption.choisi,.planBtn.actif{background:var(--fluo)}
.planSceaux{display:grid;gap:10px;width:100%}.planGrand{display:grid;gap:3px;text-align:left;border:1.5px solid var(--ink);background:var(--bg);padding:10px 12px;cursor:pointer}.planGrand:hover:not(:disabled){background:var(--fluo)}.planGrand b{font:700 15px var(--f-j)}.planGrand small{font-size:12px;color:var(--muted)}
.planCases,.planRetrait{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.planCompteur{font:12px var(--f-m);margin:0}.planCompteur b{background:var(--fluo);padding:0 5px;font-size:15px}
.planCartesMain{display:flex;gap:8px;overflow-x:auto;padding:4px}.planCarteMain{width:132px;flex:none}.planMarque{position:absolute;left:4px;right:4px;bottom:6px;background:var(--fluo);border:1px solid var(--ink);font:700 9px var(--f-m);text-align:center}
.planErreur{color:var(--rubis);font-weight:600;margin:0}.planNote{font-size:12px;color:var(--muted);margin:0}.planLigne{display:flex;gap:6px;align-items:center}.planLigne p{margin:0;font:12px var(--f-m);min-width:120px}
#aide{width:min(680px,calc(100vw - 24px))}#aide h2{font:700 26px var(--f-j);margin:0 0 6px}#aide h3{font:700 16px var(--f-j);margin:14px 0 4px}#aide p{margin:0 0 6px;font-size:13.5px;line-height:1.5}

/* ---------------------------------------------------------------- réglages (style de la v1) */
.panneau{position:fixed;left:max(16px,env(safe-area-inset-left));top:62px;z-index:25;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .25s;transform-origin:16px -30px;background:var(--bg);color:var(--ink);border:1.5px solid var(--ink);padding:14px;width:min(320px,calc(100vw - 32px));max-height:calc(100dvh - 78px);overflow:auto;display:grid;gap:8px}
.panneau.ferme{transform:translateY(-12px) scale(.94);opacity:0;visibility:hidden}
.panneau h1{margin:0;font:800 20px var(--f-t)}.panneau h2{margin:10px 0 2px;font:600 11px var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-top:1px solid #e4e4e4;padding-top:8px}
.btn-reglages{position:fixed;left:max(16px,env(safe-area-inset-left));top:16px;z-index:26;display:flex;align-items:center;gap:7px;font:700 12px var(--f-m);background:var(--bg);color:var(--ink);border:1.5px solid var(--ink);padding:7px 11px 7px 9px;cursor:pointer;line-height:1}
.btn-reglages svg{width:16px;height:16px;transition:transform .45s}.btn-reglages[aria-expanded="true"]{background:var(--ink);color:var(--bg)}.btn-reglages[aria-expanded="true"] svg{transform:rotate(90deg)}
.reglage{display:grid;grid-template-columns:92px 1fr auto;gap:8px;align-items:center;font:11px var(--f-m)}.reglage select{grid-column:2/4}.reglage input[type=range]{accent-color:var(--ink)}
.case{display:flex;gap:6px;align-items:center;font:11px var(--f-m);cursor:pointer}.case input{accent-color:var(--ink)}
body.en-accueil .btn-reglages,body.en-accueil .coin{display:none}

/* ---------------------------------------------------------------- petits écrans */
@media (max-width:700px){
  #familles{--tp:30px;top:56px}.campNom{font-size:9px}
  #zoneMain{--wc:78px}.carte.survolee .corpsC,.carte.lue .corpsC{transform:translateY(-70px) scale(1.5)}
  #porteCarte{width:140px;right:10px}#aideCiblage{width:min(220px,52vw);right:10px}
  #modes .lib{display:none}.banc{width:96px;top:150px}.banc h3 small,.siege span{display:none}
  .menuBoutons{grid-template-columns:1fr}.menuChoix label{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01s!important;animation-duration:.01s!important}}

#bullePouvoirs{position:fixed;z-index:35;width:280px;background:var(--bg);border:1.5px solid var(--ink);box-shadow:var(--ombre);padding:10px;font-size:12px;display:none;pointer-events:none}
#bullePouvoirs.vu{display:grid;gap:6px}#bullePouvoirs h4{margin:0;font:700 13px var(--f-j)}#bullePouvoirs.defense,#bullePouvoirs.bouclier{border-color:#2fbf5a}#bullePouvoirs.sort,#bullePouvoirs.etat{border-color:#8a5cff}#bullePouvoirs.bonus{border-color:#ffd84a}
#bullePouvoirs .pouvoir{border-top:1px solid #ddd;padding-top:5px}#bullePouvoirs p{margin:2px 0}#bullePouvoirs small{font:10.5px var(--f-m);color:var(--muted)}

/* explication pas à pas d'un sort (recrutement) */
.explication{position:absolute;inset:-6px;z-index:5;background:var(--bg);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:grid;grid-template-rows:auto 1fr auto auto auto;gap:6px;padding:10px}
.explication header{display:flex;justify-content:space-between;align-items:center;font:700 15px var(--f-j)}.explication svg{width:100%;height:auto}
.explication .legende{font:10px var(--f-m);color:var(--muted)}.explication .bulle{margin:0;font-size:12.5px;line-height:1.35;min-height:3.9em}
.explication nav{display:flex;gap:6px;align-items:center;justify-content:center}.explication .compteur{font:11px var(--f-m);min-width:44px;text-align:center}
.demoPulse{animation:demoPulse 1.1s ease-in-out infinite alternate}.demoFlux{animation:demoFlux .9s linear infinite}
@keyframes demoPulse{to{opacity:.85}}@keyframes demoFlux{to{stroke-dashoffset:-28}}

/* réglages de rendu repliables */
.sousReglages{margin:6px 0}.sousReglages summary{cursor:pointer;font:600 12px var(--f-m);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:4px 0}.sousReglages[open] summary{color:var(--ink)}

/* ---------------------------------------------------------------- main à droite (réglage) : les cartes en colonne sur le bord droit,
   le plateau garde tout l'écran ; même survol (la carte s'agrandit vers l'intérieur), mêmes animations de pioche, de vol et de combustion */
body.main-droite #zoneMain{left:auto;right:12px;top:92px;bottom:118px;transform:none;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:8px;padding:0;--wc:clamp(84px,8.6vw,112px)}
body.main-droite #zoneMain.pliee{transform:translateX(112%)}
body.main-droite.en-gros-plan #zoneMain{transform:translateX(118%)}
body.main-droite #zoneMain .pile{width:calc(var(--wc) * .47)}body.main-droite #zoneMain .pile>small{font-size:9px;padding:0 2px}
body.main-droite #zoneMain>.pile{order:0}body.main-droite #defausse{order:1}body.main-droite #eventail{order:2}
body.main-droite #zoneMain{display:grid;grid-template-columns:auto auto;grid-template-rows:auto minmax(0,1fr);justify-content:end;align-items:stretch;column-gap:6px}
body.main-droite #pioche{grid-column:1;grid-row:1}body.main-droite #defausse{grid-column:2;grid-row:1}
body.main-droite #eventail{grid-column:1/3;grid-row:2;position:relative;display:block;min-width:0;min-height:0;width:var(--wc);height:auto;align-self:stretch;justify-self:end}
body.main-droite .carte{position:absolute;right:0;margin:0;transform:none;transition:top .3s cubic-bezier(.3,1.2,.5,1),filter .2s;
  top:calc(var(--i) * min((100% - var(--wc) * 1.4) / max(1, var(--n) - 1), var(--wc) * .62))}
body.main-droite .carte.survolee,body.main-droite .carte:focus-visible,body.main-droite .carte.lue{margin:0;z-index:5}
body.main-droite .carte.survolee .corpsC,body.main-droite .carte:focus-visible .corpsC,body.main-droite .carte.lue .corpsC{transform:translateX(calc(var(--wc) * -.12)) scale(1.9);transform-origin:100% calc(var(--i) * 100% / max(1, var(--n) - 1))}
body.main-droite .carte.grise.survolee .raisonCarte{left:auto;right:calc(100% + var(--wc) * 1.1 + 10px);bottom:auto;top:0;transform:none}
body.main-droite .maitriseCarte{left:auto;right:-6px}
body.main-droite #porteCarte{right:auto;left:16px}
body.main-droite #aideCiblage{right:auto;left:16px;bottom:150px}
body.main-droite #indice{top:auto;bottom:24px;left:50%}

/* ---------------------------------------------------------------- téléphone (body.telephone, détection du monde) : interface compacte,
   cartes lues au premier toucher et jouées au second, plateau entier à l'écran même en portrait (focale adaptée dans le monde) */
#erreurTel{position:fixed;left:8px;right:8px;top:8px;z-index:99;margin:0;padding:8px 10px;background:#fff;border:2px solid var(--rubis);font:11px var(--f-m);white-space:pre-wrap;max-height:30vh;overflow:auto}
body.telephone #familles{--tp:34px;top:6px;gap:6px}body.telephone .campNom{font-size:9px}body.telephone .centreHaut{min-width:64px;padding:2px 6px}body.telephone .centreHaut b{font-size:14px}body.telephone .centreHaut small{font-size:8px}
body.telephone .btn-reglages{top:8px;left:8px;padding:6px 8px}body.telephone .hautDroite{top:8px;right:8px}body.telephone .btn.rond{width:30px;height:30px}
body.telephone #zoneMain{--wc:clamp(72px,22vw,96px);padding-bottom:6px;gap:8px}
body.telephone .carte.lue .corpsC,body.telephone .carte.survolee .corpsC{transform:translateY(calc(var(--wc) * -1.05)) scale(1.9)}
body.telephone #porteCarte{width:min(150px,40vw);top:64px;right:8px}
body.telephone #aideCiblage{width:min(210px,52vw);right:8px;bottom:118px;font-size:11.5px;padding:8px}
body.telephone #btnFinTour{right:8px;bottom:10px;font-size:13px;padding:10px 12px}body.telephone #pastillesPA{right:8px;bottom:60px;padding:4px 7px}
body.telephone #modes{left:8px;bottom:10px}body.telephone #modes .lib{display:none}
body.telephone #indice{top:auto;bottom:calc(var(--wc, 90px) * 1.9 + 16px);max-width:92vw;font-size:11.5px}
body.telephone .carteEcran{padding:16px 16px}body.telephone .carteEcran h1{font-size:26px}body.telephone #menu .portraitDeco{width:72px}
body.telephone .panneau{top:50px;width:min(300px,calc(100vw - 16px));left:8px}
body.telephone .choixCartes .mini{width:min(150px,44vw)}
/* main à droite : sans objet sur téléphone en portrait (la colonne mangerait le plateau) */
@media (orientation:portrait){body.telephone.main-droite #zoneMain{left:50%;right:auto;top:auto;bottom:0;transform:translateX(-50%);display:flex;flex-direction:row;align-items:flex-end;padding:0 0 6px;--wc:clamp(72px,22vw,96px)}
  body.telephone.main-droite #eventail{position:static;display:flex;width:auto;height:calc(var(--wc) * 1.4);min-width:calc(var(--wc) * 2)}
  body.telephone.main-droite .carte{position:relative;right:auto;top:auto;margin:0 calc(var(--wc) * -0.16)}body.telephone.main-droite #porteCarte{left:auto;right:8px}}
/* téléphone : la main est décalée à gauche (les boutons PA et Fin du tour gardent le coin droit), la carte lue se redresse */
body.telephone #zoneMain{left:39%;gap:6px}body.telephone #modes{bottom:auto;top:66px;left:8px}body.telephone #zoneMain .pile{width:calc(var(--wc) * .42)}body.telephone #zoneMain .pile>small{font-size:9px}
body.telephone .carte.lue{transform:none;z-index:6}body.telephone .carte.lue .corpsC{transform:translate(calc(var(--wc) * .2),calc(var(--wc) * -1.1)) scale(1.9);transform-origin:50% 100%}
body.telephone .btn-reglages svg{width:18px;height:18px}
body.telephone #familles{top:4px;--tp:30px}body.telephone #btnQuitter{font-size:10px;padding:5px 7px}
/* téléphone, carte tenue : la main se retire, la carte tenue devient une barre en bas (vignette, nom, coût, portée, options),
   la consigne de ciblage se pose juste au-dessus ; tout le plateau reste touchable */
.tenueInfos{display:none}
body.telephone #zoneMain.avecTenue{transform:translate(-50%,110%)}
body.telephone #porteCarte{top:auto;bottom:8px;left:8px;right:8px;width:auto;display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;background:var(--bg);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px;z-index:19}
body.telephone #porteCarte .carte.tenue{width:52px;animation:none}
body.telephone .tenueInfos{display:grid;gap:2px;min-width:0}body.telephone .tenueInfos b{font:700 14px var(--f-j);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.telephone .tenueInfos small{font:11px var(--f-m);color:var(--muted)}
body.telephone .optionsTenue{display:grid;gap:4px}body.telephone .optionsTenue:empty{display:none}body.telephone .optionsTenue button{font-size:10px;padding:5px 6px}
body.telephone #aideCiblage{left:8px;right:8px;width:auto;bottom:112px;padding:8px 10px;grid-template-columns:1fr auto;align-items:center}
body.telephone #aideCiblage #consigneCible{grid-column:1}body.telephone #aideCiblage #btnAnnulerCible{grid-column:2;grid-row:1/span 2}
body.telephone #zoneMain.avecTenue ~ #btnFinTour,body.telephone.en-ciblage #btnFinTour,body.telephone.en-ciblage #pastillesPA{opacity:0;pointer-events:none}
body.telephone #btnAnnulerCible{font-size:0;padding:9px 12px}body.telephone #btnAnnulerCible::after{content:'Annuler';font:700 12px var(--f-m)}

/* ================================================================ HABILLAGE — nouveau design
   Pastilles arrondies à contour marine, plaques crème, ombres douces, coins géométriques rouge / marine / or (comme sur les cartes).
   Cette couche vient APRÈS les règles de structure : elle ne déplace rien, elle change la peau. */
:focus-visible{outline:3px solid var(--fluo);outline-offset:3px;border-radius:12px}
.btn{font:700 14px/1.1 var(--f-m);border:3px solid var(--ink);background:var(--bg);color:var(--ink);padding:9px 20px;border-radius:999px;box-shadow:var(--ombre);transition:filter .15s,transform .15s,background .15s}
.btn:hover:not(:disabled){background:var(--fluo);transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(1px);filter:brightness(.95)}
.btn:disabled{opacity:.5;box-shadow:none}
.btnPlein{background:var(--ink);color:var(--bg)}.btnPlein:hover:not(:disabled){background:var(--fluo);color:var(--ink)}
.btn.grand{font-size:18px;padding:12px 30px}
.btn.rond{width:38px;height:38px;padding:0}
select{font:600 14px var(--f-m);color:var(--ink);border:3px solid var(--ink);border-radius:999px;background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.500 1.500 6 6l4.500-4.500' fill='none' stroke='%23102237' stroke-width='2.400' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;padding:7px 36px 7px 16px;cursor:pointer}
select option{color:var(--ink);background:var(--bg2)}
input[type=text],input[type=password],input[type=number]{font:600 14px var(--f-m);border:3px solid var(--ink);border-radius:999px;background:var(--bg2);padding:7px 14px}
/* accueil */
#accueil{background:radial-gradient(circle at 50% 38%,#fffaf0 0,var(--bg) 62%)}
#accueil::before,#accueil::after{content:'';position:absolute;width:min(30vw,300px);height:min(30vw,300px);pointer-events:none}
#accueil::before{left:0;top:0;background:linear-gradient(135deg,var(--rubis) 0 30%,var(--ink) 30% 58%,var(--fluo) 58% 68%,transparent 68%);clip-path:polygon(0 0,100% 0,0 100%)}
#accueil::after{right:0;bottom:0;background:linear-gradient(315deg,var(--rubis) 0 30%,var(--ink) 30% 58%,var(--fluo) 58% 68%,transparent 68%);clip-path:polygon(100% 100%,0 100%,100% 0)}
#accueil .chargement{font:600 13px var(--f-m);color:var(--ink)}
#accueil progress{height:16px;border:3px solid var(--ink);border-radius:999px;background:var(--bg2);overflow:hidden}
#accueil progress::-webkit-progress-bar{background:var(--bg2);border-radius:999px}#accueil progress::-webkit-progress-value{background:linear-gradient(90deg,var(--rubis),var(--fluo));border-radius:999px}#accueil progress::-moz-progress-bar{background:var(--fluo);border-radius:999px}
.credit{font:600 12px var(--f-m);color:var(--muted)}
/* plaques d'écran : menu, objectif, fin */
.carteEcran{background:var(--bg);border:4px solid var(--ink);border-radius:32px;box-shadow:var(--ombre-g);padding:34px 34px 28px}
.carteEcran::before{content:'';position:absolute;left:0;top:0;width:78px;height:78px;pointer-events:none;background:linear-gradient(135deg,var(--rubis) 0 34%,var(--ink) 34% 60%,var(--fluo) 60% 72%,transparent 72%);clip-path:polygon(0 0,100% 0,0 100%)}
.carteEcran::after{content:'';position:absolute;right:0;bottom:0;width:78px;height:78px;pointer-events:none;background:linear-gradient(315deg,var(--ink) 0 34%,var(--rubis) 34% 60%,var(--fluo) 60% 72%,transparent 72%);clip-path:polygon(100% 100%,0 100%,100% 0)}
.carteEcran h1,.carteEcran h2{font-weight:800;letter-spacing:-.015em;color:var(--ink)}.carteEcran h1{font-size:clamp(28px,4vw,38px);line-height:1.08}
.menuChoix label{font:700 14px var(--f-m);grid-template-columns:140px 1fr}
.menuBoutons .btn:first-child{background:var(--rubis);color:#fff;border-color:var(--ink)}.menuBoutons .btn:first-child:hover{background:#ff5a5c}
#menu .portraitDeco{width:128px;mix-blend-mode:multiply;clip-path:inset(0 0 8% 0);margin:-14px -10px 0 10px}
.buts>div{border:3px solid var(--ink);border-radius:22px;background:var(--bg2)}.buts b{border-radius:999px;padding:2px 12px;background:var(--fluo)}
.buts span{font:800 18px var(--f-j)}.buts small{color:var(--muted)}
#finDecompte{font:600 13px var(--f-m)}.jaugeFin{height:8px;border-radius:99px;background:rgba(16,34,55,.12);overflow:hidden}#finJauge{background:var(--fluo)}
/* annonces */
.annonce{background:var(--bg);border:4px solid var(--ink);border-radius:30px;box-shadow:var(--ombre-g)}
.annonce small{font:700 12px var(--f-m);letter-spacing:.14em}.annonce .jauge{height:6px;border-radius:99px}
.annonce.tour{border-color:var(--camp,var(--ink));box-shadow:var(--ombre-g)}.annonce.tour strong{font:800 clamp(22px,3vw,32px) var(--f-j)}
/* démo des sorts */
.demoBarre{background:var(--bg);border:3px solid var(--ink);border-radius:999px;box-shadow:var(--ombre);padding:7px 12px}.demoBarre select{padding:5px 30px 5px 12px}
#demoFil{background:var(--bg);border:3px solid var(--ink);border-radius:999px;padding:5px 16px;font:600 12px var(--f-m)}
/* haut de l'écran : les deux camps */
.campNom{font:800 12px var(--f-m);background:var(--bg);border:3px solid var(--camp);border-radius:999px;padding:2px 12px;color:var(--camp);box-shadow:var(--ombre)}
.campCol.auTrait .campNom{background:var(--camp);color:#fff}
.sorcier{border:3px solid var(--ink);box-shadow:var(--ombre);background:var(--bg2)}
.sorcier.actif{box-shadow:0 0 0 4px var(--fluo),var(--ombre);transform:translateY(-3px)}
.pvMini{height:6px;border:0;border-radius:99px;background:rgba(16,34,55,.28);overflow:hidden;bottom:7%}.pvMini::after{background:var(--fluo)}
.centreHaut{background:var(--bg);border:3px solid var(--ink);border-radius:20px;box-shadow:var(--ombre);padding:4px 14px}
.centreHaut small{font:700 10px var(--f-m);letter-spacing:.08em}.centreHaut b{font:800 20px var(--f-j)}
.ficheEtat{background:var(--bg);border:3px solid var(--camp,var(--ink));border-top:0;border-radius:0 0 22px 22px;padding:10px 12px}
.ficheEtat .pv i{border:2px solid var(--ink);background:rgba(16,34,55,.14)}.ficheEtat small{color:var(--muted)}
#ficheSorcier .ficheCarte{filter:drop-shadow(0 10px 16px rgba(16,34,55,.4))}
/* coins, actions rares, PA, fin du tour */
#modes button{background:var(--bg);border:3px solid var(--ink);border-radius:999px;padding:6px 14px 6px 8px;box-shadow:var(--ombre);font:700 12px var(--f-m)}
#modes button.actif{background:var(--fluo)}
#pastillesPA{background:var(--bg);border:3px solid var(--ink);border-radius:999px;box-shadow:var(--ombre);padding:6px 14px}
#pastillesPA i{border:2.5px solid var(--ink);border-radius:50%;transform:none;width:18px;height:18px}#pastillesPA i.pop{animation:popPA .45s}
@keyframes popPA{40%{transform:scale(1.5)}}
#btnFinTour{border-width:3px;box-shadow:var(--ombre-g);font:800 16px var(--f-j);padding:13px 24px}
#btnFinTour:not(:disabled){box-shadow:0 0 0 4px color-mix(in srgb,var(--fluo) 70%,transparent),var(--ombre-g)}
#indice{background:var(--bg);border:3px solid var(--ink);border-radius:999px;font:600 13.5px var(--f-m);padding:8px 18px;box-shadow:var(--ombre)}
#indice.alerte{border-color:var(--rubis);box-shadow:var(--ombre)}
#aideCiblage{background:var(--bg);border:3px solid var(--ink);border-radius:24px;box-shadow:var(--ombre-g);padding:14px 16px}
#consigneCible{font-weight:700}#erreurCible{color:var(--rubis)}
.optionsTenue button{font:700 12px var(--f-m);border:3px solid var(--ink);border-radius:999px;background:var(--bg);padding:7px 10px}.optionsTenue button.actif{background:var(--fluo)}
.pile>b{background:var(--fluo);border:2.5px solid var(--ink);border-radius:999px;padding:1px 8px;font:800 13px var(--f-j)}.pile>small{background:var(--bg);border-radius:99px;padding:0 8px}
.maitriseCarte{border:2.5px solid var(--ink);background:var(--fluo);font:800 12px/18px var(--f-j)}
.raisonCarte{border-radius:16px!important;border:3px solid var(--rubis)!important;background:var(--bg)!important;font:600 12px var(--f-m)!important;padding:7px 12px!important}
.btnLire{border:.9cqw solid var(--b);background:var(--n);color:var(--cr);font:italic 800 7cqw/1 var(--f-c);right:5cqw;top:60cqw}.btnLire:hover{background:var(--b);color:var(--n)}
/* dialogues */
dialog{border:4px solid var(--ink);border-radius:30px;box-shadow:var(--ombre-g);padding:24px 26px;background:var(--bg)}
dialog::backdrop{background:rgba(16,34,55,.5)}
.choixTete img{border:3px solid var(--ink)}.choixTete h3{font:800 22px var(--f-j)}
.choixCartes .mini.choisi .fc{box-shadow:0 0 0 1.4cqw var(--fluo),0 0 0 2.2cqw var(--ink)}
.choixOption,.planBtn{font:700 13px var(--f-m);border:3px solid var(--ink);border-radius:999px;background:var(--bg);padding:8px 16px}.choixOption.choisi,.planBtn.actif{background:var(--fluo)}
.planGrand{border:3px solid var(--ink);border-radius:20px;background:var(--bg2)}.planGrand:hover:not(:disabled){background:var(--fluo)}.planCompteur b{background:var(--fluo);border-radius:99px;padding:0 9px}
.planMarque{background:var(--fluo);border:2px solid var(--ink);border-radius:99px}
#aide h2{font:800 28px var(--f-j)}#aide h3{font:800 17px var(--f-j)}
/* réglages */
.panneau{background:var(--bg);border:3px solid var(--ink);border-radius:28px;box-shadow:var(--ombre-g);padding:18px}
.panneau h1{font:800 22px var(--f-t)}.panneau h2{font:700 11px var(--f-m);letter-spacing:.12em;border-top:2px solid rgba(16,34,55,.12)}
.btn-reglages{background:var(--bg);border:3px solid var(--ink);border-radius:999px;box-shadow:var(--ombre);padding:8px 16px 8px 12px;font:700 13px var(--f-m)}
.btn-reglages[aria-expanded="true"]{background:var(--ink);color:var(--bg)}
.reglage input[type=range],.case input{accent-color:var(--rubis)}
.sousReglages summary{font:700 12px var(--f-m)}
/* bulles d'information, explications */
#bullePouvoirs{background:var(--bg);border:3px solid var(--ink);border-radius:22px;box-shadow:var(--ombre-g);padding:12px 14px}
#bullePouvoirs h4{font:800 14px var(--f-j)}#bullePouvoirs .pouvoir{border-top:2px solid rgba(16,34,55,.12)}
.explication{background:var(--bg);border:4px solid var(--ink);border-radius:28px;box-shadow:var(--ombre-g);padding:14px}
.explication header{font:800 16px var(--f-j)}.explication .legende{font:600 11px var(--f-m)}
#erreurTel{background:var(--bg);border:3px solid var(--rubis);border-radius:16px}

/* Paysage court (téléphone couché) : titre masqué, carte à gauche des boutons, vignettes réduites */
@media (max-height:520px) and (orientation:landscape){
  #recrutement{--haut:62px;--bas:92px}
  .recTitre{display:none}
  .recTete{top:8px}
  .banc{top:10px;padding:4px 8px;gap:6px;border-width:3px;max-width:33vw}.banc.auTrait{transform:none}
  .banc h3 span{display:none}.siege{width:26px;height:26px;font-size:12px}.sieges{gap:4px}
  .recSeg{transform:scale(.85);transform-origin:top}
  .recCarte{--wv:58px}
  #recCentre{flex-direction:row;gap:18px;top:0}
  .recCarteCentre{width:min(calc((100cqh - var(--bas) - 8px) * 5 / 7),40cqw)}
  #recCentre .recBoutons{width:auto;min-width:170px}
  #recCentre[data-niveau="1"]{top:0;transform:translateX(-50%) scale(.85)}
  .recPied{top:calc(var(--haut) - 4px)}
  .recNav,.recNav:hover:not(.suiv){left:18px;transform:translateY(-50%)!important;width:46px;height:46px}
  .recNav.suiv,.recNav.suiv:hover{left:auto;right:18px}
}

/* ================================================================ CARTE DE SORT — gabarit GRILLE.sort / GRILLE.verso (ui/s2/grille.js)
   Les positions viennent de la grille (classes .z-sort-* générées) ; ce bloc ne règle que l'habillage et la typographie. */
.fcSort{--cel:#f6e9cb;--corps-carte:4.7cqw}
.fcSort .fcArt{left:5cqw;top:5cqw;right:auto;width:90cqw;height:57cqw;border-radius:9cqw;mix-blend-mode:multiply}
.fcSort .fcArt img{object-position:50% 50%;clip-path:none}
.fcSort .fcCout,.fcSort .fcEmbleme{position:absolute}
.fcSort .fcEmbleme svg{width:62%;height:62%}
.fsRole{position:absolute;z-index:5;border-radius:50%;box-sizing:border-box;background:var(--n);border:.9cqw solid var(--b);box-shadow:0 0 0 .6cqw var(--cr),0 .8cqw 1.4cqw rgba(16,34,55,.3);display:grid;place-items:center;color:#fff}
.fsRole .pi{width:56%;height:56%;display:block}
.fsFit{position:absolute;z-index:4;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-family:var(--f-u);text-transform:uppercase}
.fsRoleT{font-weight:700;font-size:3.8cqw;letter-spacing:.1em;color:var(--cr);padding-left:1.6cqw}
.fsTypeT{font-weight:600;font-size:3.2cqw;letter-spacing:.08em;color:var(--b);justify-content:flex-end;padding-right:3.4cqw}
.fsNom{position:absolute;z-index:2;display:grid;place-items:center;text-align:center}
.fsNom>span{display:block;max-width:100%;white-space:nowrap;font:800 9.6cqw/1.05 var(--f-c);letter-spacing:-.005em;color:#0e1a2c}
.fcVerso .fsNom>span{white-space:normal;line-height:1.04;overflow-wrap:normal}
.fsCel{position:absolute;z-index:2;box-sizing:border-box;background:var(--cel);border:.45cqw solid color-mix(in srgb,var(--b) 75%,var(--a));border-radius:3cqw;display:grid;grid-template-rows:4.2cqw 1fr 4.4cqw;justify-items:center;align-items:center;padding:1.2cqw .8cqw .6cqw;overflow:hidden}
.fsEt{font:600 2.9cqw/1 var(--f-u);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);white-space:nowrap}
.fsVal{display:flex;align-items:center;justify-content:center;gap:.8cqw;color:var(--n);min-height:0}
.fsVal b{font:800 9.5cqw/1 var(--f-c);color:var(--n)}
.fsVal .pi{display:block;color:var(--a)}.fsVal .pi.mini{width:5cqw;height:5cqw}.fsVal .pi.grand{width:9.6cqw;height:9.6cqw}
.fsCap{font:600 3.3cqw/1 var(--f-u);font-style:normal;color:#14213a;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.zoneGrille{width:11.6cqw;height:11.6cqw;display:block}.zoneGrille .on{fill:var(--a)}.zoneGrille .off{fill:rgba(16,34,55,.14)}.zoneGrille .pt{fill:#fff}
.fsTexte{position:absolute;z-index:2;box-sizing:border-box;margin:0;padding:.8cqw 2.4cqw .8cqw 5cqw;display:flex;align-items:safe center;overflow:hidden;text-align:left;font:400 var(--corps-carte)/1.26 var(--f-c);color:#14213a;hyphens:auto;-webkit-hyphens:auto}
.fsTexte::before{content:'';position:absolute;left:1.8cqw;top:8%;bottom:8%;width:.9cqw;border-radius:.5cqw;background:var(--a)}
.fsTexte b{font-weight:800;color:#0e1a2c}
.fsTexte.coupe .fcCorps::after{content:' …';color:var(--acc);font-weight:800}
.fsTexte .fcCorps{display:block;max-height:100%}
/* verso */
.fsLignes{position:absolute;z-index:2;display:grid;grid-template-columns:1.25fr .85fr;grid-template-rows:1fr 1fr;gap:1.4cqw}
.fsLignes>div{background:var(--cel);border:.45cqw solid color-mix(in srgb,var(--b) 75%,var(--a));border-radius:2.4cqw;padding:.6cqw 2.2cqw;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:1.8cqw;min-width:0;overflow:hidden}
.fsLignes>.large{grid-column:1/-1}
.fsLignes .fsEt{font-size:2.5cqw}.fsLignes b{font:700 3.2cqw/1.1 var(--f-c);color:#0e1a2c;white-space:normal;overflow:hidden;text-align:left;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fsRegle{display:block;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;font-size:4.3cqw;line-height:1.34;padding:1.6cqw 3cqw 1.6cqw 5cqw}
.fsRegle p{margin:0 0 1.8cqw}.fsRegle .note{font-style:italic;color:var(--acc);font-size:.92em}
.fcSort.fcVerso .fcCout,.fcSort.fcVerso .fcEmbleme{z-index:4}
.fsRegle.defile{-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}

/* ================================================================ VERSO DU SORCIER — gabarit GRILLE.sorcierVerso */
.svFeuille{position:absolute;z-index:1;background:var(--cr);box-shadow:0 0 0 .7cqw var(--b),0 0 0 1.5cqw var(--a),0 1cqw 2cqw rgba(16,34,55,.3)}
.fcVersoSorcier .fsCel{background:var(--cel,#f6e9cb);z-index:2}.fcVersoSorcier{--cel:#f6e9cb}
.svNom{position:absolute;z-index:2;display:grid;place-items:center;align-content:center;gap:1cqw;text-align:center}
.svNom span{display:block;max-width:100%;white-space:nowrap;font:800 9.6cqw/1.05 var(--f-c);color:#0e1a2c}
.svNom em{font:600 3.3cqw/1 var(--f-u);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.svCorps{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2.6cqw;overflow:hidden}
.svTalent{flex:none;font:400 4.5cqw/1.28 var(--f-c);color:#14213a;padding:0 0 0 3.6cqw;border-left:.9cqw solid var(--a);box-sizing:border-box;display:block}
.svTalent b{display:block;font:800 6.6cqw/1.1 var(--f-c);color:#0e1a2c;margin:.8cqw 0 .8cqw}
.svTalent p{margin:0 0 .9cqw}.svTalent .faible{font-style:italic;color:var(--acc)}.svTalent .faible u{text-decoration:none;font:700 .72em var(--f-u);letter-spacing:.12em;text-transform:uppercase;font-style:normal}
.svGrimoire{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:1.4cqw;overflow:hidden}
.svGrimoire .fsEt small{font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.8}
.svGrimoire ul{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;overflow:hidden;columns:var(--col,2);column-gap:3cqw;font:600 3.8cqw/1 var(--f-c);color:#14213a}
.svGrimoire li{display:flex;align-items:center;gap:1.4cqw;height:var(--rh,5.9cqw);break-inside:avoid;border-bottom:.3cqw dotted color-mix(in srgb,var(--a) 45%,transparent)}
.svGrimoire li .rl{width:1.15em;height:1.15em;flex:none;color:var(--a)}
.svGrimoire li .nm{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svGrimoire li i{font:600 .85em var(--f-u);font-style:normal;color:var(--acc)}
.svGrimoire li b{flex:none;min-width:1.7em;height:1.7em;border-radius:50%;background:var(--n);color:var(--cr);display:grid;place-items:center;font:800 .95em var(--f-c)}
.svGrimoire li.ult .nm{font-weight:800}.svGrimoire li.ult b{background:var(--b);color:#0a1226}
.recCarteCentre{position:relative}.recCarteCentre .recFlip{width:100%}
.btnRetourne{position:absolute;right:-12px;top:10%;z-index:30;width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--bg);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:var(--ombre)}
.btnRetourne:hover{background:var(--fluo)}.btnRetourne svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ================================================================ CHARTE « CARTE » — l'interface parle comme les cartes
   Mêmes ingrédients que le recto d'un sort : liseré crème, cadre rouge, filet or, triangles de coin or / marine / rouge, plaques de titre
   à double filet or + rouge, pastilles marine à bord or, médaillons ronds, cellules crèmes à filet or. Cette couche passe en DERNIER. */
:root{--rim:#fffaf0;--cr:#fcf3df;--cel:#f6e9cb}
/* — grands cadres : menu, objectif, fin, dialogues, réglages, explication, aide au ciblage */
.carteEcran,dialog,.panneau,.explication,#aideCiblage,#bullePouvoirs,.annonce{
  border:2.5px solid var(--fluo);border-radius:26px;background-origin:border-box;color:var(--ink);
  background:
    linear-gradient(135deg,var(--fluo) 0 24%,var(--ink) 24% 42%,var(--rubis) 42% 54%,transparent 54%) 0 0/64px 64px no-repeat,
    linear-gradient(225deg,var(--rubis) 0 24%,var(--fluo) 24% 42%,var(--ink) 42% 54%,transparent 54%) 100% 0/64px 64px no-repeat,
    linear-gradient(45deg,var(--ink) 0 30%,var(--fluo) 30% 44%,transparent 44%) 0 100%/46px 46px no-repeat,
    linear-gradient(315deg,var(--ink) 0 30%,var(--fluo) 30% 44%,transparent 44%) 100% 100%/46px 46px no-repeat,
    var(--cr);
  box-shadow:0 0 0 4px var(--rubis),0 0 0 7px var(--rim),0 20px 44px rgba(16,34,55,.42)}
.carteEcran::before,.carteEcran::after{display:none}
#aideCiblage,#bullePouvoirs,.annonce{border-radius:20px;background-size:44px 44px,44px 44px,32px 32px,32px 32px,auto;box-shadow:0 0 0 3px var(--rubis),0 0 0 5px var(--rim),0 12px 28px rgba(16,34,55,.38)}
.carteEcran,dialog,.panneau,.explication{padding-top:30px}
.carteEcran,dialog{padding-left:36px;padding-right:36px}
/* — plaques de titre : cream, double filet or + rouge, deux losanges rouges */
.carteEcran h1,.carteEcran h2,dialog h2,dialog h3,.choixTete h3,.panneau h1,.explication header,#aide h2{
  position:relative;display:table;margin:0 auto 14px;padding:7px 34px;text-align:center;background:var(--rim);border-radius:999px;color:#0e1a2c;
  font:800 clamp(20px,2.6vw,28px)/1.1 var(--f-c);letter-spacing:-.005em;box-shadow:0 0 0 2px var(--fluo),0 0 0 4.5px var(--rubis),0 4px 10px rgba(16,34,55,.3)}
.carteEcran h1::before,.carteEcran h2::before,dialog h2::before,dialog h3::before,.panneau h1::before,.explication header::before,#aide h2::before,.carteEcran h1::after,.carteEcran h2::after,dialog h2::after,dialog h3::after,.panneau h1::after,.explication header::after,#aide h2::after{
  content:'';position:absolute;top:50%;width:9px;height:9px;background:var(--rubis);transform:translateY(-50%) rotate(45deg)}
.carteEcran h1::before,.carteEcran h2::before,dialog h2::before,dialog h3::before,.panneau h1::before,.explication header::before,#aide h2::before{left:14px}
.carteEcran h1::after,.carteEcran h2::after,dialog h2::after,dialog h3::after,.panneau h1::after,.explication header::after,#aide h2::after{right:14px}
.choixTete h3{margin:0;display:block;box-shadow:0 0 0 2px var(--fluo),0 0 0 4.5px var(--rubis)}.choixTete h3::before,.choixTete h3::after{display:none}
.recTitre::before,.recTitre::after{display:none}
#aide h3{font:800 17px var(--f-c);color:var(--rubis);letter-spacing:0}
/* — pastilles et boutons : marine à bord or, texte crème en capitales (comme les pastilles de rôle) */
.btn,.btn-reglages,#modes button,.optionsTenue button,.choixOption,.planBtn,#indice,#pastillesPA,.demoBarre,#demoFil{
  background:var(--ink);color:var(--cr);border:3px solid var(--fluo);border-radius:999px;box-shadow:0 0 0 2px var(--ink),0 6px 14px rgba(16,34,55,.35);
  font:800 12.5px/1.1 var(--f-u);letter-spacing:.07em;text-transform:uppercase}
.btn:hover:not(:disabled),.btn-reglages:hover,#modes button:hover,.optionsTenue button:hover,.choixOption:hover,.planBtn:hover{background:var(--fluo);color:var(--ink);transform:translateY(-1px)}
.btnPlein,.menuBoutons .btn:first-child{background:var(--rubis);color:#fff;border-color:var(--fluo)}
.btnPlein:hover:not(:disabled),.menuBoutons .btn:first-child:hover{background:#ff5a5c;color:#fff}
.btn.grand{font-size:15px;padding:13px 30px}
.btn.rond{background:var(--ink)}
#modes button.actif,.optionsTenue button.actif,.choixOption.choisi,.planBtn.actif,.btn-reglages[aria-expanded="true"]{background:var(--fluo);color:var(--ink)}
#indice{text-transform:none;letter-spacing:.01em;font:700 13.5px var(--f-u)}#indice.alerte{border-color:var(--rubis);background:var(--ink)}
#pastillesPA{padding:6px 16px;gap:6px;text-transform:none}#pastillesPA i{background:var(--rubis);border:2.5px solid var(--fluo);width:18px;height:18px}
#btnFinTour{background:var(--rubis);color:#fff;border:3px solid var(--fluo);font:800 15px var(--f-u);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 0 3px var(--ink),0 8px 18px rgba(16,34,55,.4)}
#btnFinTour:disabled{background:var(--ink);color:rgba(252,243,223,.5);border-color:rgba(253,185,70,.5)}
.pastilleBtn.marine{border-color:var(--fluo)}.pastilleBtn.creme{background:var(--rim);border-color:var(--rubis);color:var(--ink)}
/* — champs : cellules crèmes à filet or */
select,input[type=text],input[type=password],input[type=number]{background-color:var(--cel);border:2.5px solid var(--fluo);box-shadow:0 0 0 2px var(--ink);border-radius:999px;font:700 14px var(--f-u);color:var(--ink)}
select option{background:var(--rim)}
.reglage input[type=range],.case input{accent-color:var(--rubis)}
.menuChoix label,.reglage>label,.reglage>span:first-child{font-weight:700}
.panneau h2,.sousReglages summary{display:inline-block;margin:10px 0 6px;padding:3px 14px;border:0;border-radius:999px;background:var(--ink);color:var(--cr);font:800 11px/1.3 var(--f-u);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 2px var(--fluo)}
.panneau h2{border-top:0}
/* — plaques d'information du haut de l'écran */
.centreHaut,.ficheEtat,#ficheSorcier .ficheEtat{background:var(--rim);border:0;border-radius:20px;box-shadow:0 0 0 2.5px var(--fluo),0 0 0 5px var(--rubis),0 8px 16px rgba(16,34,55,.35)}
.ficheEtat{border-radius:0 0 18px 18px}
.campNom{background:var(--ink);color:var(--cr);border:3px solid var(--fluo);font:800 11.5px var(--f-u);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 0 0 2px var(--camp,var(--ink))}
.campCol.auTrait .campNom{background:var(--camp);color:#fff}
/* — portraits des sorciers : médaillons marine à bord or */
.sorcier{border:3px solid var(--fluo);background:var(--ink);box-shadow:0 0 0 2.5px var(--ink),0 5px 10px rgba(16,34,55,.4)}
.sorcier.actif{box-shadow:0 0 0 2.5px var(--ink),0 0 0 6px var(--rubis),0 6px 12px rgba(16,34,55,.45);transform:translateY(-3px)}
.pvMini{background:rgba(16,34,55,.55)}.pvMini::after{background:var(--rubis)}
/* — annonces, fin de partie */
.annonce{padding:14px 30px}.annonce small{color:var(--acc,var(--rubis))}
.annonce.tour{background:linear-gradient(var(--cr),var(--cr)) padding-box;border-color:var(--camp,var(--fluo))}
.buts>div{background:var(--cel);border:2.5px solid var(--fluo);border-radius:20px;box-shadow:0 0 0 2px var(--ink)}.buts b{background:var(--ink);color:var(--cr)}
/* — recrutement : pilules d'équipes et segment, mêmes filets */
.banc{border-width:3px;background:var(--rim);box-shadow:0 0 0 3px var(--fluo),0 0 0 5.5px var(--ink),0 8px 18px rgba(16,34,55,.35)}
.recTitre{background:var(--rim);box-shadow:0 0 0 2.5px var(--fluo),0 0 0 5.5px var(--rubis),0 8px 18px rgba(16,34,55,.35);border:0}
.recSeg{border-color:var(--ink);box-shadow:0 0 0 3px var(--fluo),0 8px 18px rgba(16,34,55,.35)}
/* — petits médaillons : aide, menu */
#btnAide,.btn.rond,#btnMenu{background:var(--ink);color:var(--cr);border:3px solid var(--fluo)}
.menuBoutons .btnPlein:last-child{background:var(--ink);color:var(--cr)}.menuBoutons .btnPlein:last-child:hover{background:var(--fluo);color:var(--ink)}
.panneau h2,.sousReglages summary{justify-self:start;width:max-content}
.carteEcran h1,.carteEcran h2,dialog h2,.panneau h1,#aide h2{justify-self:center}
#aide h3,dialog h3{justify-self:start}.carteEcran h2+p,.carteEcran h2+*{margin-top:4px}

/* verso de sort : « en pratique » */
.fsPratique{display:block;overflow:hidden;padding:1.2cqw 3cqw 1cqw 5cqw;font:400 4.3cqw/1.3 var(--f-c)}
.fsPratique>.fsEt{display:block;margin:0 0 1cqw;font-size:2.9cqw}
.fsPratique ol{list-style:none;margin:0;padding:0}.fsPratique li{margin:0 0 1.5cqw}.fsPratique li[hidden]{display:none}
.fsPratique li b{display:inline-block;margin-right:1.2cqw;padding:.3cqw 1.8cqw;border-radius:99px;background:var(--n);color:var(--cr);font:800 .62em/1.35 var(--f-u);letter-spacing:.1em;text-transform:uppercase;vertical-align:.08em}
.fsPratique li[data-p="Exemple"] b{background:var(--a);color:#fff}
.fsLignes{grid-template-columns:.9fr 1.5fr;grid-template-rows:1fr}
.fsLignes b{-webkit-line-clamp:2;font-size:3.2cqw}
.fcCout b{font-size:14.5cqw}.fcCout i{font-size:5.8cqw}
.fsFit>span{flex:none}

/* ================================================================ COURBURES « CARTE » (v40)
   L'interface reprend les deux rayons des cartes, mesurés sur une carte lue en grand (≈ 390 px de large) :
   --r-carte = coin de la carte (5,4 % de sa largeur ≈ 21 px) pour tout ce qui est un cadre ;
   --r-cel   = coin des cellules PORTÉE / CIBLE… (3 % ≈ 12 px) pour boutons, pastilles, champs, plaques.
   Les médaillons ronds (portraits, aide, menu, compteurs) restent des cercles, comme les médaillons des cartes. */
:root{--r-carte:21px;--r-cel:12px}
.carteEcran,dialog,.panneau,.explication,#aideCiblage,#bullePouvoirs,.annonce,.centreHaut,.banc,.recTitre,.planGrand,#erreurTel,.raisonCarte{border-radius:var(--r-carte)!important}
.ficheEtat,#ficheSorcier .ficheEtat{border-radius:0 0 var(--r-carte) var(--r-carte)}
.btn:not(.rond),.btn-reglages,#modes button,.optionsTenue button,.choixOption,.planBtn,#indice,#pastillesPA,.demoBarre,#demoFil,#btnFinTour,.pastilleBtn,.campNom,.recSeg,
select,input[type=text],input[type=password],input[type=number],.buts>div,.vignette,#recRetourBulle,
.carteEcran h1,.carteEcran h2,dialog h2,dialog h3,.choixTete h3,.panneau h1,.explication header,#aide h2,.panneau h2,.sousReglages summary,.pile>b{border-radius:var(--r-cel)}
:focus-visible{border-radius:var(--r-cel)}
.pile .dos,.pile .dessus,.pile .dessus .fc{border-radius:5.4% / 3.86%}   /* pioche et défausse : même coin que la carte (5,4 % de la largeur) */
/* recrutement : la carte agrandie a TOUJOURS la même taille, qu'elle soit un sorcier (niveau 0) ou un sort (niveau 2) */
#recrutement{--carteZoom:min(330px,calc(100vw - 130px),calc((100dvh - 350px) * 5 / 7))}
@media (max-height:520px) and (orientation:landscape){#recrutement{--carteZoom:min(calc((100dvh - 100px) * 5 / 7),40vw)}}
.recCarteCentre,#recCentreSort{width:var(--carteZoom)!important}
/* recrutement : bandes glissées à la souris ; tirage au sort (la carte du milieu s'efface, la vignette tirée se soulève) */
#recAnneau,#recSorts{cursor:grab}#recAnneau.glisse,#recSorts.glisse{cursor:grabbing}#recAnneau.glisse .recCarte,#recSorts.glisse .recSortCarte{pointer-events:none}
#recCentre{transition:opacity .35s,transform .35s}
#recCentre.tirage{opacity:0;transform:translateX(-50%) scale(.85);pointer-events:none}
.recCarte.tiree{translate:0 -14px;transition:translate .3s cubic-bezier(.3,1.4,.5,1)}
#recrutement.tirage .recNav{opacity:0;pointer-events:none;transition:opacity .3s}
/* introduction : scène 3D très floue derrière les cartes (accueil, menu, recrutement), nette en 1 s au début de la partie */
.scene3d{opacity:1;transition:opacity .7s ease}
body.intro-floue .scene3d,body.en-recrutement .scene3d{opacity:0;pointer-events:none;transition:none}
@media(prefers-reduced-motion:reduce){.scene3d{transition:none}}

/* ================================================================ v54 — typographie d'interface IBM Plex Mono ; les cartes gardent la leur */
:root{--f-t:"IBM Plex Mono",ui-monospace,Menlo,monospace;--f-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;--f-j:"IBM Plex Mono",ui-monospace,Menlo,monospace;--f-u:"IBM Plex Mono",ui-monospace,Menlo,monospace;--f-c:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.fc,.vignette{--f-t:"Poppins",system-ui,sans-serif;--f-m:"Poppins",system-ui,sans-serif;--f-j:"Poppins",system-ui,sans-serif;--f-u:"Poppins",system-ui,sans-serif;--f-c:"Source Serif 4","Noto Serif",Georgia,serif}
/* médaillon PV / PA : le chiffre et l'unité ne se touchent jamais */
.fcCout{display:flex;flex-direction:column;align-items:center;justify-content:center}
.fcCout b{font-size:11.6cqw!important;line-height:.86}.fcCout i{font-size:4.4cqw!important;margin-top:.9cqw!important;line-height:1}
.fcNom>span{font-size:7.6cqw}

/* ================================================================ v54 — recrutement : en-tête compact, cartes de même encombrement */
#recrutement{--haut:112px;--bas:150px;--carteZoom:min(300px,calc(100vw - 170px),calc((100dvh - var(--haut) - var(--bas) - 60px) * 5 / 7))}
.recTete{top:10px;gap:6px}
.recTitre{padding:5px 18px 5px 14px;gap:9px;font:700 16px/1.1 var(--f-j);letter-spacing:.02em;text-transform:uppercase}
.recTitre svg{width:20px;height:20px}
.recSeg{border-width:2.5px}.recSeg button{padding:5px 14px 5px 11px;gap:7px;font:700 11.5px/1 var(--f-j);letter-spacing:.04em;text-transform:uppercase}.recSeg svg{width:16px;height:16px}
.banc{top:12px;padding:5px 10px 5px 10px;gap:9px;border-width:2.5px}
.banc h3{font:700 13px/1 var(--f-j);gap:6px;text-transform:uppercase;letter-spacing:.04em}.banc h3 .icCamp{width:18px;height:18px}
.siege{width:28px;height:28px;font:700 11px/1 var(--f-j)}.sieges{gap:5px}
/* les deux cartes (sorcier, sort) occupent exactement la même place : même largeur, même colonne, même rangée de boutons */
.recCarteCentre,#recCentreSort{width:var(--carteZoom)!important}
#recCentre,#recCentreSort{position:absolute!important;left:50%;top:4px;bottom:var(--bas);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:55}
#recCentre[data-niveau="1"]{transform:translateX(-50%);top:4px}
#recCentreSort[data-etat="loin"]{transform:translateX(-50%) scale(.15);opacity:0;pointer-events:none}
#recCentreSort:not(:has(#recExpliquer))::after{content:'';display:block;height:32px}
#recCentre .recBoutons{display:flex;gap:8px;width:auto;justify-content:center}
#recCentre .recBoutons .pastilleBtn,#recCentreSort #recExpliquer{height:32px;padding:0 14px;gap:7px;font:700 11px/1 var(--f-m);letter-spacing:.05em;text-transform:uppercase}
#recCentre .recBoutons .pastilleBtn svg{width:15px;height:15px}
.recRoue.sortInspecte .recNav{position:absolute;top:var(--navY,45%)}
/* bouton recto / verso : à côté de la carte, en haut à droite, de la taille des flèches */
.recCarteCentre .btnRetourne,#recCentreSort .btnRetourne{position:absolute;top:0;right:-57px;left:auto;width:54px;height:54px;border-radius:50%;border:3px solid var(--ink);background:var(--rim,#fffaf0);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;z-index:60;box-shadow:0 0 0 2px var(--fluo),0 6px 14px rgba(16,34,55,.35)}
.recCarteCentre .btnRetourne svg,#recCentreSort .btnRetourne svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.recCarteCentre .btnRetourne:hover,#recCentreSort .btnRetourne:hover{background:var(--fluo)}
#recCentreSort .recFlip{position:relative}
/* fil d'Ariane au-dessus de la carte : supprimé (retour : clic hors de la carte, sur la carte du sorcier, ou Échap) */
.recPied{display:none!important}
/* bandes du bas : celle qui part descend, l'autre remonte en rebondissant */
.recCouche{transition:opacity .3s ease,transform .38s cubic-bezier(.5,0,.75,0)}
.recCouche[data-etat="passe"],.recCouche[data-etat="loin"]{opacity:0;pointer-events:none;transform:translateY(120%)}
.recCouche[data-etat="actif"]{transition:opacity .25s ease,transform .62s cubic-bezier(.3,1.45,.45,1)}
#recAnneau.revient .recCarte{animation:sortArrive .55s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i) * 18ms + 200ms)}
/* nom du sorcier dans sa vignette */
.vignette{container-type:inline-size}
.vigNom{position:absolute;left:7%;right:7%;bottom:5%;z-index:3;padding:1.5cqw 2cqw;border-radius:6cqw;background:var(--cr,#fcf3df);box-shadow:0 0 0 1.4cqw var(--a);font:800 10.5cqw/1.05 var(--f-c);color:#0e1a2c;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.recCarte span:not(.vignette){display:none}.recCarte .vignette .vigNom{display:block}

/* v58 — annonce de départ : rappel du but (la carte « Objectif » ne s'intercale plus avant le plateau) */
.annonce .but{display:block;font:500 12.5px var(--f-m);font-style:normal;opacity:.75;margin:2px 0 4px;max-width:34ch;text-align:center}

/* ================================================================ v59 — popups : informations centrées, partout
   titres, sous-titres, encadrés, choix et boutons sur l'axe du popup (seul le corps des Règles reste aligné à gauche : lecture longue) */
.carteEcran,dialog{text-align:center}
.carteEcran>*,dialog>*{margin-left:auto;margin-right:auto}
.carteEcran h1,.carteEcran h2,dialog h2,dialog h3,.panneau h1,#aide h2{justify-self:center;margin-left:auto;margin-right:auto}
dialog h3,#aide h3{justify-self:center}
.carteEcran p,dialog p{text-align:center}
.row,.row.fin,#fin .row,.carteEcran .row{justify-content:center}
.carteEcran>.btn,dialog>.btn{display:flex;margin-left:auto;margin-right:auto}
/* Objectif : deux encadrés de même hauteur, contenu centré dans les deux sens */
.buts{align-items:stretch}
.buts>em{align-self:center}
.buts>div{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:18px 16px}
.buts b{justify-self:center;align-self:center}
.buts span,.buts small{text-align:center}
#butJeu .btn{margin-top:4px}
/* choix (cartes, options) : en-tête et grille centrés */
.choixTete{justify-content:center;text-align:left}
.choixCartes{justify-content:center}
/* fin de manche */
#fin{text-align:center}#fin .jaugeFin{margin-left:auto;margin-right:auto}
/* Règles : titres et bouton centrés, texte courant à gauche pour la lecture */
#aide section p{text-align:left}
#aide h3{text-align:center}
.choixTete{flex-direction:column;gap:8px}.choixTete>div{display:flex;flex-direction:column;align-items:center;text-align:center}
.choixTete small{display:block;text-align:center;margin-bottom:6px}

/* ================================================================ v60 — popups sans bandes diagonales (lisibilité) ; PA et « Fin du tour » centrés en bas
   Les triangles de coin restent l'apanage des cartes à jouer : les popups gardent le cadre (filet or, cadre rouge) sur un fond crème uni. */
.carteEcran,dialog,.panneau,.explication,#aideCiblage,#bullePouvoirs,.annonce{background:var(--cr)!important}
.carteEcran,dialog,.panneau,.explication{padding-top:24px}
#aideCiblage,#bullePouvoirs{color:var(--ink)}
#aideCiblage #cibleInfo,#aideCiblage #consigneCible{color:var(--ink);font:600 13.5px/1.4 var(--f-m)}
#bullePouvoirs p,#bullePouvoirs small{color:var(--ink)}#bullePouvoirs small{opacity:.75}
/* barre du tour : PA et Fin du tour côte à côte, même hauteur, centrés en bas ; la main se pose juste au-dessus */
#barreTour{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:16;display:flex;align-items:stretch;gap:12px;--hBarre:46px;transition:opacity .35s}
#barreTour>#pastillesPA,#barreTour>#btnFinTour{position:static!important;inset:auto!important;transform:none!important;height:var(--hBarre);box-sizing:border-box;margin:0;display:flex;align-items:center;justify-content:center}
#barreTour>[hidden]{display:none!important}
#barreTour>#pastillesPA{padding:0 18px;border-radius:var(--r-cel)!important}
#barreTour>#btnFinTour{padding:0 26px;font-size:15px;border-radius:var(--r-cel)!important;white-space:nowrap}
body.en-gros-plan #barreTour{opacity:0;pointer-events:none}
#zoneMain{bottom:calc(var(--hBarre-espace,62px) + max(0px,env(safe-area-inset-bottom)))}
body.main-droite #zoneMain{bottom:118px}
body.telephone #barreTour{--hBarre:40px;gap:8px;bottom:max(8px,env(safe-area-inset-bottom))}
body.telephone #barreTour>#btnFinTour{padding:0 16px;font-size:13px}body.telephone #barreTour>#pastillesPA{padding:0 12px}
body.telephone #zoneMain{--hBarre-espace:52px}
body.telephone #zoneMain.avecTenue ~ #barreTour,body.telephone.en-ciblage #barreTour{opacity:0;pointer-events:none}

/* ================================================================ v62 — lisibilité : cartes de la main plus grandes, survol plus grand,
   aide posée en bas à gauche sur la même ligne de base que la barre du tour, une seule taille de texte pour toute la base */
:root{--t-base:15px}
/* main à droite : cartes plus grandes, survol plus grand */
body:not(.telephone).main-droite #zoneMain{--wc:clamp(118px,11.5vw,158px);top:84px;bottom:76px}
body:not(.telephone).main-droite .carte.survolee .corpsC,body:not(.telephone).main-droite .carte:focus-visible .corpsC,body:not(.telephone).main-droite .carte.lue .corpsC{transform:translateX(calc(var(--wc) * -.14)) scale(2.35)}
/* main en bas : survol plus grand */
body:not(.telephone) .carte.survolee .corpsC,body:not(.telephone) .carte:focus-visible .corpsC,body:not(.telephone) .carte.lue .corpsC{transform:translateY(calc(var(--wc) * -0.92)) scale(2.5)}
body:not(.telephone).main-droite .carte.survolee .corpsC,body:not(.telephone).main-droite .carte:focus-visible .corpsC,body:not(.telephone).main-droite .carte.lue .corpsC{transform:translateX(calc(var(--wc) * -.14)) scale(2.35)}
/* aide au ciblage : en bas à gauche, même base et même hauteur minimale que « PA » et « Fin du tour » */
body:not(.telephone) #aideCiblage,body:not(.telephone).main-droite #aideCiblage{left:16px;right:auto;bottom:max(12px,env(safe-area-inset-bottom));top:auto;width:min(360px,30vw);min-height:var(--hBarre,46px);box-sizing:border-box;padding:10px 14px;gap:8px;align-content:center}
/* une seule taille de texte pour la base de l'écran : PA, Fin du tour, Annuler, consigne */
#barreTour #pastillesPA .lib,#barreTour #btnFinTour,#aideCiblage,#aideCiblage #cibleInfo,#aideCiblage #consigneCible,#aideCiblage .btn,#aideCiblage #erreurCible{font-size:var(--t-base)!important;line-height:1.3}
#barreTour #pastillesPA .lib{font-family:var(--f-u);font-weight:800;letter-spacing:.08em;margin-right:6px}
#aideCiblage .btn{height:auto;padding:8px 14px}
body.telephone{--t-base:13px}
/* actions rares (Modeler…) : une rangée au-dessus de l'aide, pour laisser la ligne de base à l'aide, aux PA et à « Fin du tour » */
body:not(.telephone) #modes{left:16px;right:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--hBarre,46px) + 12px)}
body:not(.telephone) #modes button{font-size:var(--t-base)}

/* ================================================================ v64 — titres de cartes : un seul corps, une seule ligne, partout */
.fsNom>span,.fcVerso .fsNom>span,.fcNom>span{white-space:nowrap!important;line-height:1.05;overflow:visible}
/* plaque du nom des sorciers : losanges rapprochés du bord, pour que le plus long nom (Harmonomancien) tienne au même corps */
.fcNom::before{left:2.4cqw}.fcNom::after{right:2.4cqw}

/* ================================================================ v65 — grille typographique stricte des cartes
   Médaillons : coût (PV), élément et rôle ont le même diamètre (19 cqw), le même filet, et leur picto la même taille (52 %) ;
   coût et rôle sont sur le même axe vertical, élément symétrique. Rôle et type : même corps, même graisse, même interlettrage. */
.fc .fcCout,.fc .fcEmbleme,.fc .fsRole,.fc .fcPv{border-width:.9cqw!important;box-shadow:0 0 0 .6cqw var(--cr),0 .8cqw 1.6cqw rgba(16,34,55,.32)!important}
.fc .fcEmbleme svg,.fc .fsRole .pi,.fcSort .fcEmbleme svg{width:52%!important;height:52%!important}
.fc .fcCout b{font-size:10.2cqw!important;line-height:.86}.fc .fcCout i{font-size:3.9cqw!important;margin-top:.7cqw!important}
.fc .fcCout::before,.fc .fcCout::after{width:1.8cqw;height:1.8cqw}.fc .fcCout::before{left:1.3cqw}.fc .fcCout::after{right:1.3cqw}
.fsRoleT,.fsTypeT{font-weight:700!important;letter-spacing:.1em!important}
.fsLignes .fsEt{font-size:2.9cqw}
/* recrutement : cartes plus grandes ; bouton recto/verso identique aux flèches */
#recrutement{--carteZoom:min(400px,calc(100vw - 170px),calc((100dvh - var(--haut) - var(--bas) - 24px) * 5 / 7))}
.recCarteCentre .btnRetourne,#recCentreSort .btnRetourne{width:54px!important;height:54px!important;border:3px solid var(--ink)!important;background:var(--bg)!important;box-shadow:var(--ombre)!important}
.recCarteCentre .btnRetourne svg,#recCentreSort .btnRetourne svg{width:26px!important;height:26px!important;stroke-width:3.2!important}
@media (max-width:620px){.recCarteCentre .btnRetourne,#recCentreSort .btnRetourne{width:44px!important;height:44px!important}}

/* ================================================================ v67 — main à droite : la carte agrandie se décale vers la gauche
   et laisse voir une bande des cartes de la colonne (on vise la suivante sans la deviner) */
body:not(.telephone).main-droite .carte.survolee .corpsC,body:not(.telephone).main-droite .carte:focus-visible .corpsC,body:not(.telephone).main-droite .carte.lue .corpsC{transform:translateX(calc(var(--wc) * -.62)) scale(2.35)}
body:not(.telephone).main-droite .carte .corpsC{transition:transform .16s cubic-bezier(.3,1.1,.5,1)}

/* ================================================================ v68 — main à droite : APERÇU DÉTACHÉ
   La carte visée s'affiche en grand à gauche de la colonne (jamais par-dessus) ; dans la colonne, elle sort de 14 px avec un
   liseré doré. Aucun agrandissement sur place : toutes les cartes restent visibles et cliquables. */
#apercuMain{position:fixed;z-index:40;width:clamp(250px,21vw,340px);pointer-events:none;opacity:0;transform:translateX(12px) scale(.97);transform-origin:100% 50%;
  transition:opacity .1s ease-out,transform .14s ease-out,top .12s cubic-bezier(.3,1,.5,1)}
#apercuMain.vu{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
#apercuMain .apercuCarte{container-type:inline-size;position:relative;width:100%;filter:drop-shadow(0 14px 26px rgba(16,34,55,.45))}
#apercuMain .corpsC{position:relative;transform:none!important;transform-style:preserve-3d}
#apercuMain .recto,#apercuMain .verso{backface-visibility:hidden}#apercuMain .verso{position:absolute;inset:0;transform:rotateY(180deg)}
#apercuMain .retournee .recto{transform:rotateY(-180deg)}#apercuMain .retournee .verso{transform:rotateY(0)}
#apercuMain .grise .fc{filter:grayscale(.45) brightness(.92)}
#apercuMain .apercuRaison{margin:10px 0 0;padding:8px 12px;border-radius:var(--r-cel);border:3px solid var(--rubis);background:var(--bg);color:var(--ink);font:600 var(--t-base,15px)/1.3 var(--f-m);text-align:center}
@media (prefers-reduced-motion:reduce){#apercuMain{transition:opacity .1s}}
/* dans la colonne : plus de zoom sur place, la carte visée sort légèrement vers l'aperçu */
body:not(.telephone).main-droite .carte.survolee .corpsC,body:not(.telephone).main-droite .carte:focus-visible .corpsC{transform:translateX(-14px)!important}
body:not(.telephone).main-droite .carte.survolee .fc{box-shadow:0 0 0 3px var(--fluo),0 8px 18px rgba(16,34,55,.35)}
body:not(.telephone).main-droite .carte .corpsC{transition:transform .1s ease-out}
body:not(.telephone).main-droite .carte.survolee .raisonCarte{display:none!important}
body:not(.telephone).main-droite .carte.survolee{z-index:5}

/* ================================================================ v69 — carte tenue unique, plongeon magique */
body:not(.telephone).main-droite #eventail .carte.choisie{visibility:hidden}   /* la carte tenue a quitté la colonne : jamais deux fois à l'écran */
.etincelleMagique{position:fixed;z-index:60;width:9px;height:9px;pointer-events:none;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);box-shadow:0 0 8px currentColor}
.anneauMagique{position:fixed;z-index:59;width:70px;height:70px;border-radius:50%;border:3px solid #ffe27a;pointer-events:none;box-shadow:0 0 18px rgba(255,226,122,.8),inset 0 0 12px rgba(255,255,255,.7)}

/* ================================================================ v73 — TÉLÉPHONE EN PORTRAIT
   Repères : cibles tactiles de 44 px au moins (Apple HIG), actions fréquentes dans la zone du pouce (bas de l'écran,
   Hoober), lecture des cartes en grand plutôt qu'un zoom minuscule (feuille de carte, comme Marvel Snap ou Hearthstone). */
@media (orientation:portrait){
  /* haut : réglages à gauche, aide et menu à droite, en icônes de 44 px ; les deux camps et le compteur juste dessous */
  body.telephone .btn-reglages{top:calc(env(safe-area-inset-top) + 8px)!important;left:8px!important;width:44px;height:44px;padding:0!important;display:grid;place-items:center}
  body.telephone .hautDroite{top:calc(env(safe-area-inset-top) + 8px)!important;right:8px!important;gap:8px}
  body.telephone .hautDroite .btn.rond,body.telephone #btnQuitter{min-width:44px;height:44px!important;font-size:12px!important;padding:0 10px!important}
  body.telephone #familles{top:calc(env(safe-area-inset-top) + 60px)!important;left:8px;right:8px;transform:none;width:auto;justify-content:space-between;--tp:31px!important;gap:4px}
  body.telephone #familles .campNom{font-size:9.5px!important;padding:2px 8px}
  body.telephone #familles .sorcier{min-width:34px;min-height:34px}
  body.telephone .centreHaut{min-width:58px!important;padding:2px 6px!important}
  /* bas : la main au-dessus de la barre du tour ; cartes plus grandes, en éventail serré, chaque carte touchable sur ≥ 44 px */
  body.telephone #zoneMain{--wc:min(25vw,108px)!important;left:50%!important;bottom:calc(env(safe-area-inset-bottom) + 66px)!important;gap:4px!important}
  body.telephone #zoneMain .pile{width:calc(var(--wc) * .38)!important}
  body.telephone #barreTour{--hBarre:50px;left:10px;right:10px;transform:none;justify-content:center;bottom:calc(env(safe-area-inset-bottom) + 8px)!important}
  body.telephone #barreTour>#btnFinTour{flex:1;max-width:240px;font-size:15px!important}
  body.telephone #barreTour>#pastillesPA{padding:0 14px}
  /* consigne de ciblage : bandeau sous les camps, bouton Annuler de 44 px (un seul libellé) */
  body.telephone #aideCiblage{left:8px!important;right:8px!important;width:auto!important;top:calc(env(safe-area-inset-top) + 126px)!important;bottom:auto!important;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:8px 10px!important}
  body.telephone #btnAnnulerCible{font-size:14px!important;min-height:44px;padding:0 14px!important}
  body.telephone #btnAnnulerCible::after{content:none!important}
  /* carte tenue : vignette en bas, au-dessus de la zone du pouce */
  body.telephone #porteCarte{bottom:calc(env(safe-area-inset-bottom) + 10px)!important}
}
/* la consigne : un seul libellé partout (le texte du bouton suffit) */
body.telephone #btnAnnulerCible::after{content:none!important}body.telephone #btnAnnulerCible{font-size:14px!important}

/* feuille de carte (tactile) */
#feuilleCarte{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:1fr auto auto;justify-items:center;align-items:center;padding:calc(env(safe-area-inset-top) + 16px) 14px calc(env(safe-area-inset-bottom) + 16px);touch-action:none}
#feuilleCarte[hidden]{display:none}
#feuilleCarte .fcVoile{position:absolute;inset:0;background:rgba(10,18,30,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .16s}
#feuilleCarte.ouverte .fcVoile{opacity:1}
#feuilleCarte .fcScene{position:relative;width:min(84vw,calc((100dvh - 210px) * 0.714),420px);perspective:1400px;transform:translateY(24px) scale(.94);opacity:0;transition:transform .2s cubic-bezier(.2,.9,.3,1.2),opacity .14s}
#feuilleCarte.ouverte .fcScene{transform:none;opacity:1}
#feuilleCarte .fcPile{position:relative;container-type:inline-size;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.3,1,.4,1)}
#feuilleCarte .fcPile.retournee{transform:rotateY(180deg)}
#feuilleCarte .fcRecto,#feuilleCarte .fcVersoF{backface-visibility:hidden;-webkit-backface-visibility:hidden}
#feuilleCarte .fcVersoF{position:absolute;inset:0;transform:rotateY(180deg)}
#feuilleCarte .fcPoints{position:relative;display:flex;gap:7px;margin:12px 0 4px}#feuilleCarte .fcPoints i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45)}#feuilleCarte .fcPoints i.ici{background:var(--fluo);transform:scale(1.3)}
#feuilleCarte .fcActions{position:relative;display:flex;gap:10px;align-items:center;justify-content:center;width:min(92vw,440px);margin-top:8px}
#feuilleCarte .fcActions .btn{min-height:50px;font-size:15px!important}
#feuilleCarte .fcJouer{flex:1;font-size:17px!important;min-height:56px!important}
#feuilleCarte .fcRaison{flex:1;margin:0;padding:10px 12px;border-radius:var(--r-cel);border:3px solid var(--rubis);background:var(--bg);color:var(--ink);font:600 14px/1.3 var(--f-m);text-align:center}
#feuilleCarte .fcFermer{width:50px;height:50px;padding:0;flex:none}
/* téléphone : actions rares (Modeler, Sonder…) en colonne de pastilles de 44 px sur le bord droit, sous les camps */
@media (orientation:portrait){
  body.telephone #modes{top:calc(env(safe-area-inset-top) + 128px)!important;right:8px!important;left:auto!important;bottom:auto!important;display:grid;gap:8px}
  body.telephone #modes button{width:44px!important;height:44px!important;min-width:44px;padding:0!important;display:grid;place-items:center;border-radius:50%!important}
  body.telephone #modes button svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  body.telephone #modes button .lib,body.telephone #modes button span{display:none}
  body.telephone.en-ciblage #modes{top:calc(env(safe-area-inset-top) + 196px)!important}
}
/* v74 — téléphone en portrait : le haut tient sur UNE ligne de 40 px
   [réglages] [camp Rubis] [tour] [camp Myrtille] [?] [menu] ; le nom des camps devient une capsule de couleur */
@media (orientation:portrait){
  body.telephone .btn-reglages{width:40px!important;height:40px!important;top:calc(env(safe-area-inset-top) + 8px)!important}
  body.telephone .hautDroite{gap:5px!important}
  body.telephone .hautDroite .btn.rond,body.telephone #btnQuitter{width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;font-size:0!important;display:grid;place-items:center}
  body.telephone .hautDroite .btn.rond{font-size:16px!important}
  body.telephone #btnQuitter::before{content:'';width:16px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2.4px no-repeat,linear-gradient(currentColor 0 0) center/100% 2.4px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2.4px no-repeat}
  body.telephone #familles{top:calc(env(safe-area-inset-top) + 8px)!important;left:52px!important;right:95px!important;height:40px;align-items:center!important;justify-content:center!important;gap:4px!important}
  body.telephone #familles .campCol{display:flex;align-items:center;flex:1 1 0;min-width:0;justify-content:center;height:40px;padding:0 3px;border-radius:20px;background:color-mix(in srgb,var(--camp) 30%,transparent);box-shadow:inset 0 0 0 2px var(--camp);opacity:.82}
  body.telephone #familles .campCol.auTrait{opacity:1;background:color-mix(in srgb,var(--camp) 55%,transparent);box-shadow:inset 0 0 0 2.5px var(--camp),0 0 10px var(--camp)}
  body.telephone #familles .campNom{display:none}
  body.telephone #familles .portraits{gap:0}
  body.telephone #familles .sorcier{min-width:0!important;min-height:0!important;width:var(--tp);height:var(--tp);border-width:2px;margin:0 -3.5px;box-shadow:0 0 0 1.5px var(--ink)}
  body.telephone #familles .sorcier.actif{z-index:2;transform:scale(1.12)}
  body.telephone .centreHaut.compact{min-width:44px!important;height:40px;padding:0 4px!important;display:grid;align-content:center;justify-items:center;gap:0;flex:none}
  body.telephone .centreHaut.compact b{font-size:14px!important;line-height:1.05}
  body.telephone .centreHaut.compact small{font-size:7.5px!important;letter-spacing:0;white-space:nowrap}
  body.telephone #aideCiblage{top:calc(env(safe-area-inset-top) + 56px)!important}
  body.telephone #modes{top:calc(env(safe-area-inset-top) + 56px)!important}
  body.telephone.en-ciblage #modes{top:calc(env(safe-area-inset-top) + 124px)!important}
  body.telephone #ficheSorcier{top:calc(env(safe-area-inset-top) + 56px)!important}
}
/* v75 — ascension contre l'esprit du jeu : l'échelle des cinq niveaux (menu, annonce, fin, haut de l'écran) */
.echelle{list-style:none;margin:6px auto;padding:0;display:flex;align-items:flex-start;justify-content:center;gap:0;counter-reset:n}
.echelle li{display:grid;justify-items:center;gap:4px;position:relative;min-width:64px}
.echelle li+li::before{content:'';position:absolute;top:15px;right:calc(50% + 15px);width:calc(100% - 30px);height:3px;background:color-mix(in srgb,var(--ink) 25%,transparent)}
.echelle li.gagne+li::before,.echelle li.gagne+li.gagne::before{background:var(--fluo)}
.echelle b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--f-m);background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--ink) 35%,transparent)}
.echelle li.gagne b{background:var(--fluo);color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.echelle li.courant b{background:var(--ink);color:var(--fluo);box-shadow:0 0 0 3px var(--fluo),0 0 14px var(--fluo);animation:pouls 1.6s ease-in-out infinite}
.echelle span{font:700 10px var(--f-m);text-transform:uppercase;letter-spacing:.04em;opacity:.65;white-space:nowrap}.echelle li.courant span,.echelle li.gagne span{opacity:1}
.echelle.compacte li{min-width:34px}.echelle.compacte b{width:24px;height:24px;font-size:12px}.echelle.compacte li+li::before{top:11px;right:calc(50% + 12px);width:calc(100% - 24px)}
@keyframes pouls{50%{box-shadow:0 0 0 5px var(--fluo),0 0 22px var(--fluo)}}
.annonce .echelleDepart{display:grid;justify-items:center;gap:4px}.annonce .echelleDepart[hidden]{display:none}
.annonce .echelleDepart i{font:italic 13px var(--f-m);max-width:300px;text-align:center;opacity:.8}
.annonce small b{font-size:15px}
#fin.ascension #finTitre{font-size:24px}#fin[data-issue="gagne"] #finTitre{font-size:28px}
.btnAscension{display:grid;justify-items:center;gap:2px}.btnAscension small{font:600 11px var(--f-m);text-transform:none;letter-spacing:0;opacity:.85}
.centreHaut.niveauAsc b{color:var(--ink)}
@media (max-width:560px){.echelle li{min-width:52px}.echelle span{font-size:8.5px}}
.echelle li{width:78px;min-width:0}.echelle span{white-space:normal;text-align:center;line-height:1.15;max-width:74px}
.echelle li+li::before{right:calc(50% + 15px);width:calc(100% - 30px)}
#fin .jaugeFin[hidden]{display:none}
@media (max-width:560px){.echelle li{width:62px}.echelle span{font-size:8.5px;max-width:60px}}

/* Découverte / Avancé : six familles dans l'ordre, au-dessus du grimoire. */
#aidePaquets{margin:2px 0 0;font:500 12px/1.5 var(--f-m);text-align:left;max-width:46em}
#recrutement{--haut:174px}
.recFamilles{position:absolute;top:86px;left:50%;transform:translateX(-50%);width:min(1000px,calc(100% - 32px));display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;z-index:8}
.recFamilles button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px;border:2px solid var(--ink);border-radius:var(--r-cel);background:var(--bg);color:var(--ink);font:700 12px/1.2 var(--f-m);box-shadow:0 3px 0 var(--ink);cursor:pointer}
.recFamilles small{opacity:.6;font-size:10px}.recFamilles b{display:grid;place-items:center;min-width:19px;height:19px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:10px}
.recFamilles button[aria-pressed="true"]{background:var(--fluo)}.recFamilles button:disabled{cursor:default;opacity:.6}.recFamilles button:focus-visible{outline:3px solid var(--rubis);outline-offset:3px}
.recFamilleDescription{position:absolute;top:136px;left:50%;transform:translateX(-50%);margin:0;width:max-content;max-width:calc(100% - 32px);padding:5px 12px;background:var(--bg);border-radius:var(--r-cel);font:500 11px/1.4 var(--f-m);text-align:center;z-index:7}
.recFamilles[hidden],.recFamilleDescription[hidden]{display:none}
#recrutement.enTunnel{--haut:112px}
.heureDepart{display:block;margin-top:6px;font:700 18px/1.3 var(--f-m)}
.echelle li>small{font:500 10px/1.35 var(--f-m);text-align:center}
@media (max-width:760px){
  #recrutement{--haut:252px;--bas:140px}
  #recrutement .banc{top:85px;width:auto;max-width:calc(50% - 20px);padding:5px 7px;gap:6px}
  #recrutement .banc h3 span{display:none}
  #recrutement .sieges{gap:3px;flex-wrap:wrap;justify-content:flex-end}
  #recrutement .siege{width:24px;height:24px}
  .recFamilles{top:134px;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:calc(100% - 24px)}
  .recFamilles button{min-height:34px;font-size:10px;gap:4px;padding:4px}
  .recFamilles small{font-size:8px}.recFamilles b{min-width:16px;height:16px;font-size:9px}
  .recFamilleDescription{top:215px;font-size:10px;max-width:calc(100% - 24px);padding:4px 8px}
  #recrutement.enTunnel{--haut:140px}
}
@media (max-height:520px) and (orientation:landscape){
  #recrutement{--haut:134px;--bas:92px}
  #recrutement .banc{top:12px;max-width:30%;padding:4px}
  #recrutement .banc h3 span{display:none}
  .recFamilles{top:76px;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .recFamilles button{min-height:28px;font-size:9px;gap:3px}.recFamilles small{display:none}
  .recFamilleDescription{top:110px;font-size:9px;padding:3px 8px}
  #recrutement.enTunnel{--haut:80px}
}

/* Carte armée et passage de tour : un seul exemplaire visuel, annonce en haut. */
body:not(.telephone) #porteCarte{left:16px;right:auto;top:96px;width:clamp(170px,17vw,230px)}
body:not(.telephone) #porteCarte .carte.tenue{animation:none}

/* Lecture d'une carte engagée : même coin pour les deux camps, indépendante de la main privée. */
#carteAnnoncee{position:fixed;left:16px;top:96px;width:clamp(170px,17vw,230px);z-index:24;pointer-events:none;display:grid;gap:5px}
#carteAnnoncee[hidden]{display:none}
#carteAnnoncee .carte{width:100%;margin:0;transform:none;animation:none;position:relative;inset:auto}
.annonceEquipe,.annonceLecture{padding:6px 9px;border:2px solid var(--ink);border-radius:9px;background:var(--cr);color:var(--ink);font:700 12px/1.3 var(--f-m);text-align:center}
.annonceEquipe{background:#ffddc5}#carteAnnoncee[data-camp="1"] .annonceEquipe{background:#d9e4ff}
@media(max-width:620px){#carteAnnoncee{left:8px;top:160px;width:min(145px,38vw)}.annonceEquipe,.annonceLecture{font-size:10px;padding:4px 6px}}
@media(max-height:540px){#carteAnnoncee{top:68px;width:min(150px,28vh)}.annonceEquipe,.annonceLecture{font-size:10px;padding:3px 5px}}
.annonce.tour{top:70px;max-width:calc(100vw - 32px);padding:10px 22px;pointer-events:none;white-space:nowrap}
.annonce.tour strong{font-size:clamp(16px,2.5vw,24px)}
.annonce.tour.sortie{animation-duration:.22s}
@media(prefers-reduced-motion:reduce){.annonce.tour{animation:none}.annonce.tour.sortie{animation:none;opacity:0}}

/* Table en ligne : invitation, reprise et présence. */
#salonEnLigne{z-index:42}#salonEnLigne .chapo{max-width:40ch}
#formRejoindre{margin:22px 0;display:grid;gap:8px}#formRejoindre .row{flex-wrap:nowrap}
#codeEnLigne{min-width:0;width:190px;max-width:100%;font:600 22px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;border:2px solid var(--ink);padding:8px}
#codeInvitation{display:block;font:700 clamp(32px,7vw,48px) 'IBM Plex Mono',monospace;letter-spacing:.18em;user-select:all;color:var(--myrtille)}
#statutInvitation{font-size:14px;line-height:1.6}#erreurEnLigne{color:#982d29;font-size:13px}
#etatEnLigne{position:fixed;z-index:41;bottom:14px;left:16px;max-width:min(380px,calc(100vw - 32px));padding:7px 12px;border:2px solid var(--ink);background:var(--bg);font:600 11px var(--f-m);pointer-events:none}
#etatEnLigne[data-connecte=false]{border-color:var(--rubis)}
body.en-recrutement #etatEnLigne{bottom:46px;font-size:10px;max-width:220px}
body.telephone #etatEnLigne{bottom:auto;top:50px;left:8px;max-width:calc(100vw - 16px)}
body.telephone.en-recrutement #etatEnLigne{top:auto;bottom:36px;max-width:calc(100vw - 16px);padding:3px 7px}
#capaciteMain{position:absolute;right:0;bottom:100%;margin-bottom:12px;padding:4px 9px;border:1px solid var(--ink);background:var(--bg);font:600 11px var(--f-m);white-space:nowrap}
body.telephone #capaciteMain{font-size:10px;margin-bottom:4px}

/* Zone réservée à l'action de recrutement, distincte de la bande de portraits. */
#recrutement{--bas:170px;--carteZoom:min(370px,calc(100vw - 170px),calc((100dvh - var(--haut) - var(--bas) - 92px) * 5 / 7))}
#recCentre{gap:14px}
.recCarteCentre{flex:0 0 auto}
#recCentre .recBoutons{flex:0 0 auto;min-height:44px;padding:4px 6px;background:var(--bg);border-radius:12px;box-shadow:0 3px 12px #10223733}
#recCentre .recBoutons .pastilleBtn{min-height:44px;height:auto;padding:10px 16px;font-size:12px;letter-spacing:.025em;white-space:nowrap}
#recCentre #recRecruter{background:var(--ink);color:var(--bg);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--or)}
#recCentre #recRecruter:not(:disabled):hover{background:var(--or);color:var(--ink)}
#recCentre #recRecruter:disabled{opacity:.6}
.fcNom>span{max-width:calc(100% - 14cqw)}
.fsNom>span{max-width:calc(100% - 4cqw)}
.fsNom>span,.fcNom>span{line-height:1.18!important}
.fcSous{max-width:calc(100% - 10cqw);font-size:2.8cqw;letter-spacing:.1em}
.fcTexte,.fsTexte{padding-top:1.2cqw;padding-bottom:1.4cqw}
.fcTexte.texteDefilant,.fsTexte.texteDefilant{display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--a) transparent}
.texteDefilant .fcCorps{max-height:none}
.svGrimoire li .nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12}
.svNom>span{max-width:100%;line-height:1.18}
.svNom em{letter-spacing:.08em;line-height:1.2}
.svCorps{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.svGrimoire{flex:none;overflow:visible}
.svGrimoire ul{flex:none;overflow:visible}
.svGrimoire li{height:auto;min-height:5.9cqw;padding:.7cqw 0}
.recLire{position:absolute;right:-57px;bottom:0;width:54px;min-height:40px;padding:5px 0;border:2px solid var(--ink);border-radius:10px;background:var(--bg);color:var(--ink);font:700 12px var(--f-m);cursor:zoom-in;z-index:60}
.lectureCarte{max-width:calc(100vw - 20px);width:420px;max-height:calc(100dvh - 24px);padding:16px;overflow-y:auto;background:var(--bg);color:var(--ink);border:3px solid var(--ink)}
.lectureCarte::backdrop{background:#102237bb}
.fermerLecture{position:sticky;top:0;z-index:5;display:block;margin:0 auto 12px;background:var(--bg)}
.lectureVisuel{width:min(340px,100%);margin:auto}
.lectureTexte{font:400 16px/1.6 var(--f-c)}.lectureTexte h2{font:700 23px/1.3 var(--f-c)}
@media(max-width:760px){#recrutement{--bas:150px}#recCentre .recBoutons .pastilleBtn{padding:10px 12px;font-size:11px}}
@media(max-height:520px) and (orientation:landscape){
  #recrutement{--bas:112px;--carteZoom:min(190px,calc((100dvh - var(--haut) - var(--bas) - 24px) * 5 / 7))}
  #recCentre{flex-direction:row;gap:18px}#recCentre .recBoutons{flex-direction:column}
  #recCentre .recBoutons .pastilleBtn{min-height:40px}
  .recCarteCentre .btnRetourne,.recCarteCentre .recLire,#recCentreSort .btnRetourne,#recCentreSort .recLire{right:auto;left:-62px}
}

/* Choix confirmé par le serveur : grande carte, puis place réservée dans le bandeau de son équipe. */
.recChoixEnLigne{transform-origin:center;filter:drop-shadow(0 12px 22px #10223766)}
#recrutement.annonceRecrue #recCentre{visibility:hidden}
#recrutement.annonceRecrue #recAnneau{opacity:.25}
.recChoixEnLigne .recAnnonceChoix{position:absolute;left:-20%;right:-20%;bottom:calc(100% + 8px);padding:8px;border:2px solid var(--ink);border-radius:10px;background:var(--cr);color:var(--ink);text-align:center;font:700 13px/1.3 var(--f-m)}

/* Repères de main hors des titres. Le vol est décoratif et ne prend jamais les clics. */
#eventail .carte .maitriseCarte{top:8%;bottom:auto;right:5%;left:auto;width:auto;height:auto;min-width:0;padding:2px 5px;font:800 clamp(10px,.85vw,13px)/1.2 var(--f-m);background:#ffe06b;color:#231d13;pointer-events:none}
.precisionMaitrise{display:block;margin:4px 0 0;padding:4px 8px;background:#352d21;color:#ffe493;border-radius:8px;font:700 12px/1.25 var(--f-m);text-align:center;pointer-events:none}
.precisionMaitrise[hidden],#eventail .maitriseCarte[hidden]{display:none}
#porteCarte .precisionMaitrise{grid-column:1/-1}
#feuilleCarte .precisionMaitrise{position:absolute;bottom:100%;left:0;right:0}
.volNouvellePioche{position:fixed;z-index:44;pointer-events:none;transform-origin:top left;container-type:inline-size}
#eventail .nouvellePioche .corpsC{outline:3px solid #ffd264;outline-offset:2px;border-radius:9px}

body.telephone #menu button{touch-action:manipulation}

#sablierEnLigne{position:fixed;z-index:19;left:max(8px,env(safe-area-inset-left));top:51%;transform:translateY(-50%);display:grid;justify-items:center;gap:2px;padding:6px;border:2px solid #efa19b;border-radius:12px;color:white;background:#17233b;pointer-events:none;font:700 14px/1.1 var(--f-m);font-variant-numeric:tabular-nums}
#sablierEnLigne[data-camp="1"]{border-color:#a8c9ff}
#sablierEnLigne small{font-size:10px}
#sablierEnLigne.urgent b{color:#ffcc73}
#sablierEnLigne[hidden]{display:none}
@media(max-width:600px),(max-height:500px){#sablierEnLigne{font-size:12px;padding:4px;left:max(4px,env(safe-area-inset-left))}#sablierEnLigne svg{width:16px;height:19px}}

/* Le point du sanctuaire rejoint le score ; aucune interception des gestes. */
.centreHaut .scoreCristaux{display:flex;align-items:center;justify-content:center;gap:7px;min-width:88px;padding:3px 1px 1px;white-space:nowrap}
.scoreCristaux .scoreCamp{display:flex;align-items:center;gap:4px;color:var(--camp)}
.scoreCristaux .scoreCamp>span{font-size:13px}
.centreHaut .scoreCristaux strong{display:inline-block;font:800 26px/1 var(--f-j);font-variant-numeric:tabular-nums;min-width:20px;text-align:center}
.scoreCristaux .scoreSeparateur{font:700 15px/1 var(--f-m);opacity:.55}
.pointCristal{position:fixed;top:0;left:0;z-index:120;pointer-events:none;user-select:none;color:var(--camp);background:#fff7df;border:3px solid var(--camp);border-radius:18px;padding:6px 12px;font:800 36px/1 var(--f-j);box-shadow:0 0 0 3px #ffdc6d,0 6px 20px #172d3540;will-change:transform,opacity}
body.telephone .centreHaut .scoreCristaux strong{font-size:22px}
@media(max-width:700px) and (orientation:portrait){
  body.telephone #familles .sorcier{margin-inline:calc(-1 * var(--chevauchePortrait,3.5px))}
  body.telephone .centreHaut.compact{position:relative;z-index:3}
  body.telephone .centreHaut.compact .scoreCristaux{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);min-width:80px;padding:5px 7px;background:var(--rim);border-radius:10px;box-shadow:0 0 0 2px var(--fluo),0 0 0 4px var(--rubis),0 5px 12px #10223740}
}

/* Recrutement et menus sur un aplat, avec le même objectif annoncé aux deux camps. */
#accueil{background:#103b2d;color:var(--creme)}
#choixVictoire{grid-column:1 / -1}

#menu .menuChoix{min-width:0;width:100%}
#menu .menuChoix label{min-width:0}
#menu .menuChoix select{min-width:0;max-width:100%}
@media(max-width:600px){
  #menu .menuChoix label{grid-template-columns:1fr;gap:5px;text-align:left}
  #menu .menuChoix select{width:100%}
  #menu .menuChoix label>span{display:flex;align-items:center;gap:8px}
  #menu .portraitDeco{width:66px}
  #menu .optionsMenu{padding:20px}
}

body.en-gros-plan #zoneMain.consultation:not(.pliee){transform:translateX(-50%)}
body.main-droite.en-gros-plan #zoneMain.consultation:not(.pliee){transform:none}
@media (orientation:portrait){body.telephone.main-droite.en-gros-plan #zoneMain.consultation:not(.pliee){transform:translateX(-50%)}}

/* Lettrage blanc sur le même vert pendant le chargement et au menu. */
#accueil::before,#accueil::after{display:none}
#accueil .chargement,#accueil .credit{color:white}
.titreMarque{position:relative;display:block;width:min(1080px,92vw);aspect-ratio:1792 / 304;margin:0 auto;overflow:hidden;mix-blend-mode:screen}
.titreMarque img{position:absolute;width:119.92%;height:auto;max-width:none;left:-10.6%;top:-67.1%;filter:grayscale(1) invert(1) contrast(1.65)}
#menu{position:fixed;inset:0;z-index:40;overflow:auto;overscroll-behavior:contain;background:#103b2d;padding:max(16px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))}
#menu .optionsMenu{position:relative;left:auto;top:auto;transform:none;max-height:none;overflow:visible;margin:clamp(14px,3vh,30px) auto 8px}

/* Tout le choix de partie tient dans une seule fiche. */
.titreMarque{width:min(780px,82vw)}
#menu{padding-block:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-bottom))}
.avisPrototype{margin:4px auto 0;text-align:center;color:#fff;font:500 clamp(11px,1.4vw,15px)/1.25 var(--f-m);max-width:64ch}
#menu .optionsMenu{width:min(800px,calc(100% - 12px));padding:clamp(10px,2.4vh,24px) clamp(12px,3vw,36px);margin:14px auto 5px}
.outilsMenu{display:flex;align-items:center;justify-content:space-between;font:600 12px var(--f-m)}
.outilsMenu select{margin-inline-start:6px}
#menu .menuChoix{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:8px 0}
#menu .menuChoix label{display:grid;grid-template-columns:minmax(65px,.55fr) minmax(0,1fr);font-size:13px}
#menu #choixVictoire{grid-column:auto}
#menu #infoEssaiRunes,#menu #aidePaquets{grid-column:1/-1;margin:7px 0;font:500 12px/1.3 var(--f-m);text-align:left;max-width:none}
#menu .menuBoutons{grid-template-columns:1fr 1fr;margin-bottom:6px}
#menu .menuBoutons button{min-width:0;padding:7px 8px;font-size:14px}
#menu .row{margin-top:6px}
#menu .btnAscension small{font-size:10px}
@media(max-width:600px){
 #menu .menuChoix label{grid-template-columns:1fr;gap:2px;font-size:12px}
 #menu .menuChoix{gap:5px 10px}
 #menu .menuChoix select{padding-block:5px}
 #menu .menuBoutons button,#menu .row button{font-size:12px;min-height:38px}
}
@media(max-height:500px) and (orientation:landscape){
 #menu{padding-block:4px}
 #menu .titreMarque{width:min(320px,45vw)}
 #menu .optionsMenu{margin-top:5px;padding:6px 22px}
 #menu .menuChoix{gap:3px 12px;margin:3px 0}
 #menu .menuChoix label{grid-template-columns:72px 1fr}
 #menu .menuBoutons button,#menu .row button{min-height:32px;padding-block:3px}
 #menu .avisPrototype,#menu #infoEssaiRunes,#menu #aidePaquets{margin-block:2px}
}
@media(max-width:600px){
 #menu .menuChoix select{font-size:clamp(12px,3vw,14px)}
}
@media(max-height:500px) and (orientation:landscape){
 #menu .titreMarque{width:min(245px,40vw)}
 #menu .optionsMenu{padding-block:4px}
 #menu .row{margin-block:2px}
 #menu .menuBoutons{margin-bottom:3px}
 #menu .btnAscension small{display:inline;margin-left:6px}
}
@media(max-height:370px) and (orientation:landscape){
 #menu .titreMarque{display:inline-block;width:min(190px,35vw);vertical-align:middle;margin:0 8px}
 #menu{text-align:center}
 #menu .avisPrototype{display:inline-block;max-width:50%;vertical-align:middle;font-size:11px}
 #menu .optionsMenu{text-align:left;margin-top:3px;padding:4px 14px}
 #menu .menuChoix label{font-size:11px;grid-template-columns:64px minmax(0,1fr)}
 #menu .menuChoix select{font-size:12px;padding-block:3px}
 #menu .optionsMenu .btn{font-size:11px}
}
@media(max-width:600px){
 #menu .menuChoix select{padding-inline:7px 20px;background-position:right 5px center}
}
@media(max-width:350px){
 #menu .optionsMenu{padding:10px}
 #menu .menuChoix{grid-template-columns:1.16fr .84fr;gap:4px 8px}
 #menu .menuChoix select{font-size:12px;padding-inline:4px 16px;background-position:right 3px center}
}

.pointCristal{display:grid;justify-items:center;white-space:nowrap}
.pointCristal small{font:700 12px/1.3 var(--f-m)}

body.decor-minimal .scene3d{transition:none}
#lienMinimal{color:white;font:600 13px var(--f-m);text-underline-offset:3px}
body.decor-minimal #lienMinimal{display:none}
#noteDecor{display:block;margin:0 0 8px;font-size:11px}
.outilsMenu{gap:12px}.outilsMenu label{min-width:0}
@media(max-width:600px){
 .outilsMenu{display:grid;grid-template-columns:.85fr 1.25fr;gap:8px}
 .outilsMenu label{display:grid;gap:2px;text-align:left}
 .outilsMenu select{width:100%;margin:0;padding:5px 16px 5px 6px;background-position:right 3px center;font-size:12px}
}
body.decor-minimal #feuilleCarte .fcVoile{backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
body.decor-minimal .carteVol.seConsume::after{filter:none}

/* Le raccourci garde un libellé même sur écran tactile. */
#btnReglages span,.outilsMenu label,#panneau .reglage{font-family:system-ui,sans-serif}
#panneau .sousReglages[open] summary{color:var(--cr)}
#menuDecor,#regDecor{color:#16272b;background-color:#fff8e9;-webkit-text-fill-color:#16272b;color-scheme:light}
body.telephone #btnReglages{display:flex;justify-content:center;width:auto!important;min-width:66px;padding:0 6px!important;gap:3px;font-size:12px}
@media (orientation:landscape) and (max-height:600px){body.telephone #familles{left:80px!important}}

#cadenceRendu{position:fixed;left:max(6px,env(safe-area-inset-left));bottom:max(3px,env(safe-area-inset-bottom));z-index:23;pointer-events:none;user-select:none;padding:2px 4px;border-radius:3px;color:#fff;background:#18261ee6;font:600 10px/1.2 system-ui,sans-serif;font-variant-numeric:tabular-nums}
body:not(.telephone):not(.intro-floue) #aideCiblage{bottom:calc(max(3px,env(safe-area-inset-bottom)) + 23px)}
@media (orientation:portrait){body.telephone:not(.intro-floue) #barreTour{left:max(51px,env(safe-area-inset-left))!important}}

#occupationRunes:not([hidden]){grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:7px;font:600 11px/1.2 system-ui,sans-serif}
#occupationRunes b{display:inline-flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
#occupationRunes i{width:9px;height:9px;border-radius:50%;border:1px solid #28332d}