/* Cadastra — « la plaque et la pièce » (voir docs/DESIGN.md) */

/* ---------------------------------------------------------------- polices (embarquées, licence OFL) */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/baloo-2-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo-2-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/nunito-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/nunito-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

/* ---------------------------------------------------------------- couleurs et mesures */
:root{
  --encre:#17233F; --encre2:#43506E; --gris:#6B7895; --trait:#DCE4F2; --ciel:#EAF2FF; --blanc:#fff;
  --plaque:#1E4598; --plaque2:#132F6B; --plaque-clair:#E3EBFF;
  --cadre:#2E8B57; --cadre2:#1F6A40;
  --piece:#FFC233; --piece2:#D99114; --piece-clair:#FFF3CF;
  --brique:#E4573D; --brique2:#B43A23;
  --titre:'Baloo 2',ui-rounded,system-ui,sans-serif; --texte:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --panneau:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --ombre:0 6px 18px rgba(23,35,63,.13); --ombre-forte:0 12px 34px rgba(23,35,63,.22);
  --nav:70px;
  /* couleurs de la carte (inchangées) */
  --me:#4F86F0; --other:#E4573D; --mixed:#9B51E0;
  /* anciens noms, encore utilisés dans quelques textes générés */
  --bg:var(--ciel); --panel:var(--blanc); --card:var(--blanc); --line:var(--trait); --txt:var(--encre); --muted:var(--gris);
  --gold:#A86F00; --ok:#1F7A4A;
}
:root{--arc:linear-gradient(115deg,#FF4D6D,#FF9F1C,#FFE14D,#3DDC84,#2F9BFF,#8E5CFF,#FF4DC4,#FF4D6D);--arc-rond:conic-gradient(#FF4D6D,#FF9F1C,#FFE14D,#3DDC84,#2F9BFF,#8E5CFF,#FF4DC4,#FF4D6D)}
.r1{--rc:#8E9AAF;--rc2:#5D6A80}.r2{--rc:#2FB36D;--rc2:#1C7C49}.r3{--rc:#2F80ED;--rc2:#1C57AE}.r4{--rc:#9B51E0;--rc2:#6A2BAB}.r5{--rc:#FF7A00;--rc2:#B34D00}.r6{--rc:#B44DFF;--rc2:#6B2A9E}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ciel);color:var(--encre);font-family:var(--texte);font-weight:500;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit}
h1,h2,h3{font-family:var(--titre);font-weight:800;color:var(--encre);letter-spacing:-.01em}
a{color:var(--plaque);font-weight:800}
#map{position:absolute;inset:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom))}

/* ---------------------------------------------------------------- boutons en relief */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--piece);color:#3B2600;border:0;border-bottom:4px solid var(--piece2);border-radius:14px;padding:10px 16px 8px;font-family:var(--titre);font-weight:800;font-size:16px;line-height:1.1;cursor:pointer;white-space:nowrap;box-shadow:0 4px 10px rgba(217,145,20,.28);transition:transform .08s ease,border-bottom-width .08s ease,filter .15s;user-select:none}
.btn:active:not(:disabled){transform:translateY(3px);border-bottom-width:1px}
.btn:disabled{filter:grayscale(1);opacity:.5;cursor:default;box-shadow:none}
.btn.bleu,.btn.sm.bleu{background:var(--plaque);color:#fff;border-bottom-color:var(--plaque2);box-shadow:0 4px 10px rgba(30,69,152,.25)}
.btn.vert,.btn.sm.vert{background:var(--cadre);color:#fff;border-bottom-color:var(--cadre2);box-shadow:0 4px 10px rgba(46,139,87,.25)}
.btn.danger,.btn.sm.danger{background:#fff;color:var(--brique2);border:2px solid #F3C7BE;border-bottom-width:4px;box-shadow:none}
.btn.clair,.btn.ghost,.btn.sm{background:#fff;color:var(--encre);border:2px solid var(--trait);border-bottom-width:4px;box-shadow:none}
.btn.sm{padding:7px 12px 5px;font-size:14px;border-radius:12px}
.btn.sm.next{background:var(--piece);color:#3B2600;border-color:var(--piece2);border-width:0 0 4px}
.btn.large{width:100%;padding:13px 16px 11px;font-size:18px;border-radius:16px}
.btn .pc{width:16px;height:16px}

/* la pièce (icône dessinée en CSS) */
/* la pièce de CityDeck : une pièce d'or ronde frappée d'une maison (icones/piece.svg ; le logo de Gautier, 5 nov. 2026) */
.pc{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='.85' y2='1'%3E%3Cstop offset='0' stop-color='%23FFF1B8'/%3E%3Cstop offset='.45' stop-color='%23FFC93D'/%3E%3Cstop offset='1' stop-color='%23D9890A'/%3E%3C/linearGradient%3E%3ClinearGradient id='o2' x1='0' y1='0' x2='.85' y2='1'%3E%3Cstop offset='0' stop-color='%23E8A417'/%3E%3Cstop offset='1' stop-color='%23FFE38A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='14.6' fill='url%28%23o%29' stroke='%238A5300' stroke-width='1.6'/%3E%3Ccircle cx='16' cy='16' r='11.2' fill='url%28%23o2%29' stroke='%23B87407' stroke-opacity='.6' stroke-width='.8'/%3E%3Cpath d='M16 9.4 8.3 16.3h2.7v6.2h10v-6.2h2.7l-2.8-2.5v-3.3h-2.1v1.4ZM14.8 22.5v-3.7h2.4v3.7Z' transform='translate%28.45 .5%29' fill='%23FFF4C4' fill-opacity='.85' fill-rule='evenodd'/%3E%3Cpath d='M16 9.4 8.3 16.3h2.7v6.2h10v-6.2h2.7l-2.8-2.5v-3.3h-2.1v1.4ZM14.8 22.5v-3.7h2.4v3.7Z' fill='%23A86A08' fill-rule='evenodd'/%3E%3Cpath d='M6.2 10.4A11 11 0 0 1 12.5 5.2' stroke='%23fff' stroke-opacity='.85' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;flex:none;font-style:normal}

/* ---------------------------------------------------------------- la plaque de rue (émail parisien, dessiné) */
.plaque{position:relative;overflow-wrap:anywhere;hyphens:auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;box-sizing:border-box;padding:7px 26px 6px;margin:7px 7px 13px;border-radius:8px;color:#fff;font-family:var(--panneau);font-weight:700;font-size:21px;line-height:1.02;letter-spacing:.035em;text-transform:uppercase;text-align:center;text-shadow:0 1px 0 rgba(4,16,48,.35);
  background:
    linear-gradient(168deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.08) 33%,rgba(255,255,255,0) 34.5%,rgba(0,0,0,0) 70%,rgba(0,0,0,.14) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(130% 150% at 28% 12%,#2E5CB4 0%,#204899 48%,#183A80 100%);
  box-shadow:inset 0 0 0 2.5px #204899,inset 0 0 0 4px #F2EFE6,inset 0 1px 7px 4px rgba(6,20,60,.32),0 0 0 3px #2D7A55,0 0 0 4.5px #184B34,0 4px 0 4.5px #12392A,0 9px 14px 4px rgba(23,35,63,.28)}
.plaque::before,.plaque::after{content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:linear-gradient(45deg,transparent 42%,rgba(55,62,74,.85) 43% 57%,transparent 58%),radial-gradient(circle at 35% 30%,#fff 0,#D9DEE6 35%,#8F98A6 75%,#5A6270 100%);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.plaque::before{left:9px}.plaque::after{right:9px}
.plaque small{display:block;font-family:var(--panneau);font-weight:600;font-size:.52em;text-transform:none;letter-spacing:.05em;line-height:1.15;padding:0 8px 2px;margin-bottom:3px;border-bottom:1.5px solid rgba(242,239,230,.85);opacity:.95}
.plaque.petite{font-size:16px;padding:5px 22px 4px;margin:5px 5px 10px;border-radius:7px}
.plaque.petite::before,.plaque.petite::after{width:5px;height:5px;margin-top:-2.5px}.plaque.petite::before{left:8px}.plaque.petite::after{right:8px}
/* le numéro de la maison : la petite plaque bleue sous la plaque de rue */
.numero{display:inline-flex;align-items:center;justify-content:center;min-width:36px;box-sizing:border-box;padding:4px 10px 3px;border-radius:7px;color:#fff;font-family:var(--panneau);font-weight:700;font-size:21px;line-height:1;letter-spacing:.02em;text-shadow:0 1px 0 rgba(4,16,48,.35);
  background:linear-gradient(168deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 41%),radial-gradient(130% 150% at 28% 12%,#2E5CB4,#204899 50%,#183A80);
  box-shadow:inset 0 0 0 2px #204899,inset 0 0 0 3.2px #F2EFE6,0 0 0 1.5px #12306B,0 3px 0 1.5px #0E2457,0 5px 8px rgba(0,0,0,.28)}
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44'%3E%3Cg stroke='%23A08C66' stroke-opacity='.32' stroke-width='1.2'%3E%3Cpath d='M0 .6H64M0 22.6H64M.6 0V22M32.6 22V44'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,#F1E8D4 0%,#E6D9BE 100%);
  box-shadow:inset 0 0 0 1px rgba(140,118,84,.25),inset 0 -12px 20px rgba(140,118,84,.14),inset 0 10px 16px rgba(255,255,255,.35)}

/* ---------------------------------------------------------------- pastilles */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--ciel);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:800;color:var(--encre2);white-space:nowrap}
.chip b{font-family:var(--titre);font-weight:800;font-size:15px;color:var(--encre)}
.chip.vert{background:#DDF3E6;color:var(--cadre2)} .chip.vert b{color:var(--cadre2)}
.chip.or{background:var(--piece-clair);color:#7A5200} .chip.or b{color:#7A5200}
.chip.bleu{background:var(--plaque-clair);color:var(--plaque)} .chip.bleu b{color:var(--plaque)}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:900;padding:3px 9px;border-radius:999px;background:var(--ciel);color:var(--encre2);margin-left:6px;vertical-align:middle;white-space:nowrap;text-decoration:none}
.tag[class*="r"]{}
.tag.r1,.tag.r2,.tag.r3,.tag.r4,.tag.r5,.tag.r6{background:color-mix(in srgb,var(--rc) 16%,#fff);color:var(--rc2)!important}
.tag.monument{background:var(--piece-clair);color:#7A5200}
.tag.lieu{background:var(--piece-clair);color:#7A5200}
.own{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:6px 11px;border-radius:999px;white-space:nowrap;font-weight:900;cursor:pointer}
.own.me{background:#DCE9FF;color:#1D4FB8}
.own.other{background:#FDE3DE;color:var(--brique2)}
.own.libre{background:#DDF3E6;color:var(--cadre2);cursor:default}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}

/* ---------------------------------------------------------------- la barre du haut (sur la carte) */
#top{position:absolute;top:0;left:0;right:0;padding:calc(10px + env(safe-area-inset-top)) 12px 0;display:flex;flex-direction:column;gap:8px;pointer-events:none;z-index:6}
#top > *{pointer-events:auto}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.pill{background:#fff;border-radius:999px;padding:5px 12px 5px 5px;display:flex;gap:8px;align-items:center;box-shadow:var(--ombre);white-space:nowrap;cursor:pointer;border:0;font-size:14px;transition:transform .08s}
.pill:active{transform:scale(.97)}
.moi .av{width:38px;height:38px;font-size:22px;background:var(--plaque-clair);border:2.5px solid var(--plaque)}
.moi-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.moi-t b{font-family:var(--titre);font-size:16px;font-weight:800;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.moi-t small{font-size:12px;color:var(--gris);font-weight:800}
.bourse{padding:6px 8px 6px 8px;gap:6px}
.bourse .pc{width:26px;height:26px}
.bourse b{font-family:var(--titre);font-weight:800;font-size:20px;color:var(--encre);line-height:1}
.gain{background:#DDF3E6;color:var(--cadre2);font-weight:900;font-size:12px;border-radius:999px;padding:3px 8px}
.gain:empty{display:none}
.barre{display:flex;gap:8px;align-items:center}
#search{flex:1;display:flex;gap:6px;background:#fff;border-radius:16px;padding:5px 5px 5px 12px;box-shadow:var(--ombre);align-items:center;border:2px solid transparent}
#search:focus-within{border-color:var(--plaque)}
#search .loupe{font-size:16px;opacity:.7}
#search input{flex:1;background:transparent;border:0;color:var(--encre);font-family:var(--texte);font-weight:700;font-size:15px;outline:none;min-width:0;padding:6px 0}
#search input::placeholder{color:#9AA5BE;font-weight:600}
#search button{background:var(--plaque);color:#fff;border:0;border-bottom:3px solid var(--plaque2);border-radius:11px;padding:7px 12px 5px;font-family:var(--titre);font-weight:800;font-size:15px;cursor:pointer}
.rond{position:relative;width:48px;height:48px;border-radius:50%;background:#fff;border:0;box-shadow:var(--ombre);font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .08s}
.rond:active{transform:scale(.94)}
.cnt{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;background:var(--brique);color:#fff;font-family:var(--titre);font-size:12px;font-weight:800;border-radius:999px;padding:1px 5px 0;display:none;border:2px solid #fff;line-height:15px;text-align:center}
#sugg{background:#fff;border-radius:16px;overflow:hidden;display:none;box-shadow:var(--ombre-forte)}
#sugg div{padding:11px 14px;font-size:15px;font-weight:800;border-bottom:1px solid var(--trait);cursor:pointer}
#sugg div:last-child{border-bottom:0}
#sugg small{color:var(--gris);display:block;font-size:12px;font-weight:700}

/* contrôles de la carte */
#ctrls{position:absolute;right:12px;top:calc(124px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:8px;z-index:5;align-items:center}
.seg{display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:var(--ombre);padding:4px;gap:2px}
.rbtn{width:44px;height:40px;border-radius:12px;background:transparent;border:0;color:var(--gris);font-family:var(--titre);font-weight:800;font-size:15px;cursor:pointer}
.rbtn.on{background:var(--plaque);color:#fff;box-shadow:0 3px 0 var(--plaque2)}
#bnorth{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--ombre);color:var(--brique);font-size:13px}
#legend{position:absolute;left:12px;bottom:calc(var(--nav) + 14px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-radius:14px;padding:7px 10px;font-size:11px;font-weight:800;color:var(--encre2);z-index:5;display:flex;flex-direction:column;gap:3px;box-shadow:var(--ombre)}
#legend span{display:flex;align-items:center;gap:4px}
.maplibregl-ctrl-group{border-radius:14px!important;box-shadow:var(--ombre)!important;overflow:hidden}
.maplibregl-ctrl-bottom-right{bottom:calc(46px)!important}

/* ---------------------------------------------------------------- la barre du bas */
#nav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:#fff;box-shadow:0 -6px 24px rgba(23,35,63,.12);display:flex;z-index:40;border-radius:22px 22px 0 0}
#nav button{flex:1;background:transparent;border:0;color:#8A95AD;font-size:11px;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;cursor:pointer;padding:0}
#nav button i{font-style:normal;font-size:23px;line-height:1;width:52px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:999px;transition:background .2s,transform .2s;filter:grayscale(.5) opacity(.75)}
#nav button.on{color:var(--plaque)}
#nav button.on i{background:var(--plaque-clair);filter:none;transform:translateY(-1px)}
#nav .cnt{top:4px;right:calc(50% - 26px)}
/* le pack du jour : bouton central, en relief */
#nav .pack-nav{flex:1.15;justify-content:flex-end;padding-bottom:7px;gap:3px}
.pack-rond{width:66px;height:66px;margin-top:-30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE58A,#FFC233 55%,#F0A21A);border:4px solid #fff;box-shadow:0 5px 0 var(--piece2),0 10px 24px rgba(217,145,20,.45);display:flex;align-items:center;justify-content:center;font-size:32px;transition:transform .1s}
.pack-nav:active .pack-rond{transform:translateY(3px);box-shadow:0 2px 0 var(--piece2),0 6px 14px rgba(217,145,20,.4)}
.pack-nav.attente .pack-rond{background:radial-gradient(circle at 35% 30%,#F3F6FC,#D6DEEC);box-shadow:0 5px 0 #AEB9CF,0 8px 18px rgba(23,35,63,.18);filter:saturate(.4)}
.pack-nav.pret .pack-rond{animation:appel 1.6s ease-in-out infinite}
.pack-nav .pack-t{color:#7A5200;font-family:var(--titre);font-size:13px;font-weight:800}
.pack-nav.attente .pack-t{color:var(--gris);font-family:var(--texte);font-size:11px;font-weight:900}
@keyframes appel{0%,100%{transform:scale(1);box-shadow:0 5px 0 var(--piece2),0 0 0 0 rgba(255,194,51,.55)}50%{transform:scale(1.06);box-shadow:0 5px 0 var(--piece2),0 0 0 12px rgba(255,194,51,0)}}

/* ---------------------------------------------------------------- écrans */
.screen{position:absolute;inset:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom));background:var(--ciel);z-index:20;overflow:auto;padding:calc(14px + env(safe-area-inset-top)) 14px 64px;display:none;-webkit-overflow-scrolling:touch}
.screen.on{display:block;animation:entree .22s ease-out}
@keyframes entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.screen h1{font-size:30px;margin:2px 0 12px;display:flex;align-items:center;gap:10px;line-height:1.1}
.screen h1 .act{margin-left:auto}
.screen h2.section{font-size:19px;margin:18px 2px 8px}
.card{background:#fff;border-radius:20px;padding:14px;margin-bottom:12px;box-shadow:var(--ombre)}
.card .t{font-family:var(--titre);font-weight:800;font-size:18px;line-height:1.2}
.card .m{color:var(--gris);font-size:13px;font-weight:700;margin-top:3px;line-height:1.35}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.kpi{background:#fff;border-radius:18px;padding:10px 6px 8px;text-align:center;box-shadow:var(--ombre)}
.kpi small{display:block;color:var(--gris);font-size:12px;font-weight:800}
.kpi b{font-family:var(--titre);font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2}
.kpi i{font-style:normal;font-size:20px;display:block;line-height:1.1}
.flex{display:flex;align-items:center;justify-content:space-between;gap:8px}
.build{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.vide{text-align:center;padding:26px 18px}
.vide .ico{font-size:52px;line-height:1;margin-bottom:8px}
.vide .t{font-family:var(--titre);font-weight:800;font-size:20px}
.vide .m{color:var(--gris);font-weight:700;margin:4px 0 14px}

/* champs */
input.txt,input.num{width:100%;background:#fff;border:2px solid var(--trait);color:var(--encre);border-radius:14px;padding:11px 12px;font-family:var(--texte);font-weight:800;font-size:16px;outline:none}
input.num{width:120px;font-family:var(--titre);font-size:17px;padding:8px 10px}
input.txt:focus,input.num:focus{border-color:var(--plaque)}
.err{color:var(--brique2);font-size:13px;font-weight:800;min-height:18px;margin-top:5px}

/* ---------------------------------------------------------------- la fiche (feuille qui glisse du bas) */
#sheet{position:absolute;left:0;right:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom));max-height:80%;background:#fff;border-radius:28px 28px 0 0;transform:translateY(110%);transition:transform .32s cubic-bezier(.2,.9,.25,1);z-index:30;overflow:auto;padding:22px 16px 18px;box-shadow:0 -14px 40px rgba(23,35,63,.25);overscroll-behavior:contain}
#sheet.open{transform:translateY(0)}
#sheet::before{content:'';position:sticky;top:-14px;display:block;width:44px;height:5px;border-radius:9px;background:#CBD5E6;margin:-12px auto 10px}
.close{position:absolute;right:12px;top:12px;background:var(--ciel);border:0;color:var(--encre2);width:38px;height:38px;border-radius:50%;font-size:20px;font-weight:800;cursor:pointer;z-index:2}
h2{margin:4px 0 2px;font-size:22px}
.sub{color:var(--gris);font-size:14px;font-weight:700;margin-bottom:10px}
.svwrap{position:relative;margin:4px 0 12px;border-radius:18px;overflow:hidden;box-shadow:var(--ombre);background:#cfd9ea}
/* la photo de la fiche se tourne au doigt (c'est la page de Google) ; la carte ne suit qu'en promenade (« Se promener »).
   Essayé le 4 nov. : toucher la photo lançait la promenade, mais la photo semblait figée ; décision de Gautier : on garde
   le Street View gratuit, la photo de la fiche tournable, la promenade par son bouton */
.sv{width:100%;aspect-ratio:16/9;border:0;display:block;background:#cfd9ea}
.svwrap a.ext{position:absolute;right:8px;bottom:8px;background:rgba(23,35,63,.72);color:#fff;font-size:12px;font-weight:800;padding:6px 10px;border-radius:10px;text-decoration:none}
.parcelle-info{color:var(--gris);font-size:11px;font-weight:700;margin-top:14px;padding-top:10px;border-top:1px solid var(--trait);line-height:1.5}

/* un lieu (dans la fiche, le détail d'une carte) */
.addr{position:relative;padding:14px;border-radius:22px;margin-bottom:12px;background:#fff;border:2.5px solid color-mix(in srgb,var(--rc,#DCE4F2) 55%,#fff);box-shadow:0 4px 0 color-mix(in srgb,var(--rc,#DCE4F2) 30%,#fff)}
.addr .tete{display:flex;gap:12px;align-items:flex-start}
.ico-lieu{width:56px;height:56px;flex:none;border-radius:18px;background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 35%,#fff),color-mix(in srgb,var(--rc) 12%,#fff));border:2.5px solid var(--rc);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 3px 0 var(--rc2)}
.addr .corps{flex:1;min-width:0}
.addr .n{font-family:var(--titre);font-weight:800;font-size:19px;line-height:1.15;word-break:break-word}
.addr .m{color:var(--gris);font-size:13px;font-weight:800;margin-top:2px}
.addr .lignes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.addr .lignes .tag{margin-left:0}
.addr .actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.addr .actions .btn{flex:1}
.addr .offre{display:flex;gap:8px;margin-top:10px;align-items:center}
.addr .offre .btn{flex:1}

/* l'échelle de construction */
.echelle{display:flex;align-items:flex-start;margin:12px 0 2px}
.echelle .pas{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;font-size:11px;font-weight:900;color:var(--gris);text-align:center;gap:3px}
.echelle .pas::before{content:'';position:absolute;top:19px;left:-50%;right:50%;height:5px;background:var(--trait);z-index:0}
.echelle .pas:first-child::before{display:none}
.echelle .pas.fait::before{background:var(--cadre)}
.echelle .rond-pas{width:40px;height:40px;border-radius:50%;background:#F2F5FB;border:3px solid var(--trait);display:flex;align-items:center;justify-content:center;font-size:19px;z-index:1;position:relative}
.echelle .pas.fait .rond-pas{background:#DDF3E6;border-color:var(--cadre)}
.echelle .pas.fait{color:var(--cadre2)}
.echelle .pas.suivant .rond-pas{background:var(--piece-clair);border-color:var(--piece);animation:appel-pas 1.8s ease-in-out infinite}
.echelle .pas.suivant{color:#7A5200}
.echelle .pas.bloque .rond-pas{opacity:.45;filter:grayscale(1)}
.echelle .pas.bloque{opacity:.6}
.echelle .pas .prix{font-family:var(--titre);font-size:12px;font-weight:800;display:flex;align-items:center;gap:2px}
.echelle .pas>div:last-child{line-height:1.2}.echelle .pas .prix{white-space:nowrap;justify-content:center}
.echelle.longue .pas{font-size:10px;letter-spacing:-.01em}
.echelle.longue .rond-pas{width:34px;height:34px;font-size:16px}.echelle.longue .pas::before{top:16px}
@keyframes appel-pas{0%,100%{box-shadow:0 0 0 0 rgba(255,194,51,.5)}50%{box-shadow:0 0 0 7px rgba(255,194,51,0)}}

/* ---------------------------------------------------------------- les cartes de collection */
.collection{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ccarte{position:relative;border-radius:20px;padding:0;background:#2A1A14;border:3px solid var(--rc);box-shadow:0 5px 0 var(--rc2),var(--ombre);cursor:pointer;display:block;aspect-ratio:11/15;min-height:200px;transition:transform .08s;overflow:hidden}
.ccarte:active{transform:translateY(3px);box-shadow:0 2px 0 var(--rc2),var(--ombre)}
.ccarte .rar{position:absolute;left:7px;top:7px;z-index:2;font-size:11px;font-weight:900;color:#fff;background:var(--rc);border-radius:999px;padding:2px 9px;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 2px 5px rgba(0,0,0,.35)}
.ccarte .niv{position:absolute;right:7px;top:6px;z-index:2;width:28px;height:28px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 5px rgba(0,0,0,.35)}
.ccarte .big{font-size:52px;line-height:1;text-align:center;margin:10px 0 8px;filter:drop-shadow(0 4px 4px rgba(23,35,63,.18))}
.ccarte .n{font-family:var(--titre);font-weight:800;font-size:16px;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccarte .m{color:var(--gris);font-size:12px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccarte .pied{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;gap:4px;font-family:var(--titre);font-weight:800;font-size:14px}
.ccarte .pied .loyer{color:var(--cadre2);font-size:13px}
.ccarte .vente{z-index:3;position:absolute;left:-30px;top:50px;transform:rotate(-38deg);background:var(--cadre);color:#fff;font-size:11px;font-weight:900;padding:3px 34px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ccarte.r4::after,.ccarte.r5::after,.ccarte.r6::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);background-size:260% 100%;animation:reflet 4.5s ease-in-out infinite;pointer-events:none}
@keyframes reflet{0%,60%{background-position:130% 0}100%{background-position:-60% 0}}
.filtres{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 4px;scrollbar-width:none}
.filtres::-webkit-scrollbar{display:none}
.filtre{flex:none;display:inline-flex;align-items:center;gap:6px;border:2px solid var(--trait);background:#fff;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:900;color:var(--encre2);cursor:pointer}
.filtre .dot{background:var(--rc)}
.filtre b{font-family:var(--titre);font-weight:800}
.filtre.on{background:var(--encre);border-color:var(--encre);color:#fff}
.filtre.on .dot{box-shadow:0 0 0 2px #fff}

/* ---------------------------------------------------------------- fenêtres */
#modal{position:absolute;inset:0;background:rgba(23,35,63,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:50;display:none;align-items:center;justify-content:center;padding:16px}
#modal.on{display:flex;animation:fondu .18s ease-out}
#modal .box{background:#fff;border-radius:28px;padding:20px 18px 18px;width:100%;max-width:420px;max-height:90%;overflow:auto;box-shadow:var(--ombre-forte);animation:pop .32s cubic-bezier(.2,1.4,.4,1)}
#modal .box h2{font-size:25px;line-height:1.15;margin:0 0 4px}
#modal .box .btn{margin-top:4px}
@keyframes pop{from{transform:scale(.88) translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.av{width:36px;height:36px;border-radius:50%;background:var(--plaque-clair);display:inline-flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.profil-tete{display:flex;flex-direction:column;align-items:center;text-align:center;margin:4px 0 12px}
.profil-tete .av{width:84px;height:84px;font-size:46px;border:4px solid var(--plaque);box-shadow:0 5px 0 var(--plaque2);margin-bottom:12px}
.profil-tete .sub{margin:2px 0 0}
.avgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:12px 0}
.avgrid button{font-size:25px;aspect-ratio:1;background:#fff;border:2.5px solid var(--trait);border-radius:14px;padding:0;cursor:pointer;transition:transform .08s}
.avgrid button.on{border-color:var(--plaque);background:var(--plaque-clair);transform:scale(1.06)}
.raisons button{display:block;width:100%;text-align:left;margin:7px 0;background:#fff;border:2.5px solid var(--trait);border-radius:14px;padding:12px;color:var(--encre);font-size:15px;font-weight:800;cursor:pointer}
.raisons button.on{border-color:var(--plaque);background:var(--plaque-clair)}
.recolte{font-family:var(--titre);font-size:52px;font-weight:800;color:var(--cadre);text-align:center;margin:12px 0 4px;display:flex;align-items:center;justify-content:center;gap:10px;line-height:1}
.recolte .pc{width:54px;height:54px}
.liste-btn{display:flex;flex-direction:column;gap:8px;margin-top:12px}

/* ---------------------------------------------------------------- bandeau (toast) */
#toast{position:absolute;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translate(-50%,-140%);background:#fff;color:var(--encre);padding:12px 16px;border-radius:18px;font-weight:800;font-size:15px;z-index:60;display:block;text-align:center;width:max-content;max-width:calc(100% - 28px);box-shadow:var(--ombre-forte);border-bottom:4px solid var(--piece);transition:transform .3s cubic-bezier(.2,1.2,.4,1);pointer-events:none}
#toast.on{transform:translate(-50%,0)}
#diag{pointer-events:none;position:absolute;left:12px;right:12px;top:calc(130px + env(safe-area-inset-top));background:#FDE3DE;color:var(--brique2);border-radius:12px;padding:10px 12px;font-size:12px;z-index:30;display:none;white-space:pre-wrap}

/* ---------------------------------------------------------------- repères sur la carte */
.badge{width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid var(--plaque);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 3px 0 var(--plaque2),0 4px 10px rgba(0,0,0,.25)}
.badge.vente{background:var(--cadre);border-color:#fff;color:#fff;font-size:13px;font-weight:900;box-shadow:0 3px 0 var(--cadre2),0 4px 10px rgba(0,0,0,.25)}
.cel{display:flex;align-items:center;gap:4px;cursor:pointer}
.cel-pt{width:26px;height:26px;border-radius:50%;background:var(--plaque);border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 0 var(--plaque2),0 3px 8px rgba(0,0,0,.35)}
.cel-nom{display:none;background:var(--plaque);color:#fff;font-family:var(--titre);font-size:12px;font-weight:800;padding:2px 8px 1px;border-radius:7px;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis;border:2px solid #fff;outline:2px solid var(--cadre)}
#map.cel-noms .cel-nom{display:block}
.halo{width:70px;height:70px;border-radius:50%;border:3px solid var(--piece);box-shadow:0 0 30px 8px rgba(255,194,51,.55),inset 0 0 20px rgba(255,194,51,.4);animation:pulse 2.2s ease-in-out infinite;pointer-events:none}
@keyframes pulse{0%{transform:scale(.85);opacity:.9}50%{transform:scale(1.15);opacity:.45}100%{transform:scale(.85);opacity:.9}}
.mlabel{background:linear-gradient(135deg,#FFD65A,#FF9F1C);color:#3B2600;font-family:var(--titre);font-weight:800;font-size:13px;padding:6px 10px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:nowrap;cursor:pointer}

/* ---------------------------------------------------------------- listes, classements, réglages */
.rank{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1.5px solid var(--ciel)}
.rank:last-child{border-bottom:0}
.rank .pos{width:30px;font-family:var(--titre);font-weight:800;font-size:17px;color:var(--gris);text-align:center;flex:none}
.rank .who{flex:1;font-weight:800;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank b{font-family:var(--titre);font-weight:800;display:flex;align-items:center;gap:4px}
.rank.moi{background:var(--plaque-clair);border-radius:14px;padding:10px 8px;border-bottom:0;margin:2px 0}
.bar{height:10px;background:var(--ciel);border-radius:999px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--piece),#FF9F1C);border-radius:999px}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1.5px solid var(--ciel);font-weight:800}
.sw span small{display:block;font-size:12px;color:var(--gris);font-weight:700;margin-top:3px;line-height:1.35}
.sw.mode{background:var(--plaque-clair);border-radius:14px;padding:12px;margin-top:10px;border-bottom:0}
.sw:last-child{border-bottom:0}
.sw input{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:999px;background:#CBD5E6;position:relative;cursor:pointer;flex:none;transition:background .2s;margin:0}
.sw input::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
.sw input:checked{background:var(--cadre)}
.sw input:checked::after{transform:translateX(20px)}
.notif{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:20px}
.notif .ico{width:42px;height:42px;border-radius:14px;background:var(--ciel);display:flex;align-items:center;justify-content:center;font-size:21px;flex:none}
.notif.unread{box-shadow:inset 4px 0 0 var(--piece),var(--ombre)}
.notif .quand{color:var(--gris);font-size:12px;font-weight:800}
.notif .texte{font-weight:700;line-height:1.35}
.compte-a-rebours{display:inline-flex;align-items:center;gap:6px;background:var(--encre);color:#fff;border-radius:999px;padding:5px 12px;font-family:var(--titre);font-weight:800;font-size:15px}
.lot .mise{font-family:var(--titre);font-weight:800;font-size:24px;display:flex;align-items:center;gap:6px;line-height:1.1}
.lot .rapides{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.lot .rapides .btn{flex-direction:column;gap:2px;white-space:normal;padding:8px 4px 6px;font-size:15px;line-height:1}
.lot .rapides .btn .montant{font-size:13px}
.lot details{margin-top:10px}
.lot summary{cursor:pointer;color:var(--plaque);font-weight:900;font-size:14px}
.couronne{font-size:20px}

/* ---------------------------------------------------------------- scène d'ouverture de pack (sombre : un moment de cinéma) */
#packscene{position:absolute;inset:0;z-index:70;display:none;background:#05070F;opacity:0;transition:opacity .45s ease;overflow:hidden;touch-action:none;color:#fff}
#packscene.on{display:block} #packscene.show{opacity:1}
#packscene .stage{position:absolute;inset:0}
#packscene .hint{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:#fff;opacity:.9;font-family:var(--titre);font-weight:700;font-size:17px}
.pk{width:230px;height:340px;position:relative;transform-style:preserve-3d;animation:float 3.2s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0) rotateY(-6deg) rotateX(4deg)}50%{transform:translateY(-12px) rotateY(6deg) rotateX(-3deg)}100%{transform:translateY(0) rotateY(-6deg) rotateX(4deg)}}
.cards{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.rcard{position:absolute;width:220px;height:320px;border-radius:20px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.9,.3,1.1),opacity .4s;opacity:0;pointer-events:auto;cursor:pointer}
.rcard .face{position:absolute;inset:0;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.rcard .back{background:radial-gradient(circle at 50% 40%,#2A57B8,var(--plaque) 55%,#0E2457);display:flex;align-items:center;justify-content:center;font-size:58px;border:4px solid #fff;outline:4px solid var(--cadre);outline-offset:-10px}
.rcard .front{transform:rotateY(180deg);background:#2A1A14;border:5px solid var(--rc);box-shadow:0 0 44px color-mix(in srgb,var(--rc) 75%,transparent);padding:0;display:block;text-align:center;color:#fff}
.rcard .front .big{font-size:74px;filter:drop-shadow(0 6px 6px rgba(23,35,63,.25))}
.rcard .front .n{font-family:var(--titre);font-weight:800;font-size:21px;line-height:1.1;color:var(--encre)}
.rcard .front .m{font-size:13px;font-weight:800;color:var(--gris)}
.rcard .front .rar{position:absolute;left:10px;top:10px;z-index:2;font-size:12px;font-weight:900;color:#fff;background:var(--rc);border-radius:999px;padding:3px 12px;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rcard.r4 .front::before,.rcard.r5 .front::before,.rcard.r6 .front::before{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,255,255,.55) 75%,transparent 80%);animation:spin 3s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.rcard.in{opacity:1}
.rcard.flip{transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r)) rotateY(180deg) scale(var(--s))}
.rcard.pos{transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--r)) scale(var(--s))}
#packdone{position:absolute;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom));display:none;z-index:30}
#packscene .hint{z-index:30;padding:0 18px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
#packscene.fini .hint{bottom:calc(98px + env(safe-area-inset-bottom));font-size:15px}
.rcard.flip.zoom{transform:translateX(0) translateY(var(--yz)) rotate(0deg) rotateY(180deg) scale(var(--sz))!important;z-index:40!important}

/* la révélation façon FIFA */
#reveal{position:absolute;inset:0;z-index:5;display:none;background:radial-gradient(circle at 50% 40%,#102252,#03050C 70%)}
#reveal::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(95,141,255,.25),transparent 60%);animation:beat 1.1s ease-in-out infinite;pointer-events:none}
@keyframes beat{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.08)}}
#reveal.fast::before{animation-duration:.45s}
#reveal.r4::before{background:radial-gradient(circle at 50% 45%,rgba(155,81,224,.5),transparent 60%)} #reveal.r5::before{background:radial-gradient(circle at 50% 45%,rgba(255,122,0,.6),transparent 60%)}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
#reveal.shake{animation:shake .5s ease-out}
@keyframes shake{0%{transform:translate(0,0)}15%{transform:translate(-8px,5px)}30%{transform:translate(7px,-6px)}45%{transform:translate(-5px,4px)}60%{transform:translate(4px,-3px)}80%{transform:translate(-2px,2px)}100%{transform:translate(0,0)}}
#reveal svg g{will-change:transform}
#reveal.on{display:block}
#reveal svg{position:absolute;inset:0;width:100%;height:100%}
#reveal .sil{fill:#1d2b5e;stroke:#7fa6ff;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#reveal .glow{fill:none;stroke:rgba(95,141,255,.35);stroke-width:7;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#reveal .sil.hi{fill:#2a3f8a;stroke:#9fd0ff}
#reveal .dot{fill:#FFC233}
#reveal .dotglow{fill:rgba(255,194,51,.35)}
#reveal .ring{fill:none;stroke:#FFC233;stroke-width:0.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center;animation:ring 1.4s ease-out infinite}
@keyframes ring{0%{transform:scale(.2);opacity:.9}100%{transform:scale(3);opacity:0}}
#rlabels{position:absolute;left:0;right:0;bottom:calc(120px + env(safe-area-inset-bottom));text-align:center;pointer-events:none;padding:0 16px}
#rlabels .l{color:#fff;font-family:var(--titre);font-weight:800;font-size:17px;opacity:0;transform:translateY(12px);transition:all .45s ease;text-shadow:0 2px 16px rgba(0,0,0,.6)}
#rlabels .l.on{opacity:1;transform:translateY(0)}
#rlabels .l.big{font-size:32px;line-height:1.1;margin-top:6px}
#rlabels .l.rar{display:inline-block;font-size:14px;margin-top:12px;padding:3px 14px;border-radius:999px;background:rgba(255,255,255,.14)}
#rhint{position:absolute;left:0;right:0;bottom:calc(40px + env(safe-area-inset-bottom));text-align:center;color:rgba(255,255,255,.55);font-size:13px;font-weight:800;pointer-events:none;transition:opacity .3s}
#reveal.vite #rhint{opacity:0}

/* ---------------------------------------------------------------- écrans étroits, animations réduites */
@media (max-width:360px){.screen h1{font-size:26px}.kpi b{font-size:17px}.ccarte .art .icone{font-size:44px}#nav button{font-size:10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------------------------------------------------------------- petites fêtes, montants */
.fete{position:fixed;left:50%;top:48%;width:0;height:0;z-index:80;pointer-events:none}
.fete i{position:absolute;left:0;top:0;font-style:normal;font-size:26px;opacity:0;animation:jaillir 1.25s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes jaillir{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}12%{opacity:1}55%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15);opacity:1}100%{transform:translate(calc(-50% + var(--dx) * 1.15),calc(-50% + var(--dy) + 160px)) scale(.85);opacity:0}}
.montant{display:inline-flex;align-items:center;gap:3px;font-family:var(--titre);font-weight:800}
.tag.bleu-lien{background:var(--plaque-clair);color:var(--plaque)}

/* ---------------------------------------------------------------- le guide des premiers pas */
#guide{position:absolute;inset:0;z-index:90}
#guide .spot{position:absolute;box-shadow:0 0 0 9999px rgba(23,35,63,.66);outline:3px solid var(--piece);outline-offset:2px;transition:all .38s cubic-bezier(.2,.9,.3,1);pointer-events:none}
#guide .bulle{position:absolute;left:14px;right:14px;background:#fff;border-radius:24px;padding:16px;box-shadow:var(--ombre-forte);animation:pop .32s cubic-bezier(.2,1.4,.4,1)}
#guide .bulle .t{font-family:var(--titre);font-weight:800;font-size:21px;line-height:1.15}
#guide .bulle .m{color:var(--encre2);font-weight:700;margin-top:4px;line-height:1.4}
#guide .points{display:flex;gap:5px}
#guide .points i{width:8px;height:8px;border-radius:50%;background:var(--trait)}
#guide .points i.on{background:var(--plaque);width:20px;border-radius:9px}

/* ---------------------------------------------------------------- l'écran d'accueil (pendant le chargement de la carte) */
#accueil{position:absolute;inset:0;z-index:100;background:radial-gradient(circle at 50% 38%,#fff 0,var(--ciel) 55%,#CFE0FA 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .5s ease}
#accueil.fin{opacity:0;pointer-events:none}
#accueil .logo{font-size:46px;padding:10px 42px 8px;border-radius:11px;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
#accueil .logo small{font-size:19px}
#accueil .logo::before{left:14px}#accueil .logo::after{right:14px}
.chargement{display:flex;gap:10px}
.chargement .pc{width:20px;height:20px;animation:saut 1s ease-in-out infinite}
.chargement .pc:nth-child(2){animation-delay:.15s}.chargement .pc:nth-child(3){animation-delay:.3s}
@keyframes saut{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}

/* ---------------------------------------------------------------- finitions */
:focus-visible{outline:3px solid var(--plaque);outline-offset:2px}
.gain:not(:empty){animation:invite 2.4s ease-in-out infinite}
@keyframes invite{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.screen h2.section.flex{display:flex}
button.chip{font-family:var(--texte)}
button.chip:active{transform:scale(.96)}

/* voyage vers un lieu lointain : un court écran le temps que le quartier se charge */
#voyage{position:absolute;inset:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom));z-index:4;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.96) 0,rgba(234,242,255,.97) 45%,rgba(207,224,250,.98) 100%);opacity:0;pointer-events:none;transition:opacity .2s ease}
#voyage.on{opacity:1;pointer-events:auto}
#voyage .voyage-carte{display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 24px;text-align:center;transform:translateY(8px);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
#voyage.on .voyage-carte{transform:none}
#voyage .voyage-pin{font-size:44px;animation:saut 1.1s ease-in-out infinite;filter:drop-shadow(0 6px 4px rgba(23,35,63,.18))}
#voyage .plaque{font-size:25px;max-width:310px;padding:9px 32px 7px;line-height:1.05}
#voyage .voyage-sous{font-weight:800;color:var(--encre2);font-size:14px;min-height:18px}
#charge{position:absolute;left:50%;top:calc(122px + env(safe-area-inset-top));transform:translate(-50%,-8px);z-index:5;background:#fff;border-radius:999px;padding:7px 14px 7px 10px;font-weight:800;font-size:13px;color:var(--encre2);box-shadow:0 6px 18px rgba(23,35,63,.16);display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
#charge.on{opacity:1;transform:translate(-50%,0)}
#charge .pc{width:18px;height:18px;animation:tourne 1.2s linear infinite}
@keyframes tourne{to{transform:rotateY(360deg)}}

/* l'anneau qui respire autour d'un monument (l'animation est sur les enfants : MapLibre place le repère avec transform) */
.mon-anneau{width:0;height:0;pointer-events:none}
.mon-anneau i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;border:3px solid #FFC233;box-shadow:0 0 12px rgba(255,194,51,.7);animation:anneau 2.4s ease-out infinite;opacity:0}
.mon-anneau i:nth-child(2){animation-delay:1.2s}
.mon-anneau.national i{left:-38px;top:-38px;width:76px;height:76px}
@keyframes anneau{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.5);opacity:0}}

.ico-lieu .numero{font-size:17px;min-width:30px;padding:3px 7px 2px;border-radius:6px}
.mini-plaque{display:inline-block;width:34px;height:22px;border-radius:5px;background:radial-gradient(130% 150% at 28% 12%,#2E5CB4,#204899 50%,#183A80);box-shadow:inset 0 0 0 2px #204899,inset 0 0 0 3px #F2EFE6,0 0 0 2px #2D7A55,0 2px 0 2px #12392A}

/* mettre en vente : le prix au choix */
.vente-valeur{display:flex;justify-content:space-between;align-items:center;background:var(--piece-clair);color:#7A5200;border-radius:14px;padding:10px 14px;font-weight:800;margin:4px 0 12px}
.vente-valeur b{font-family:var(--titre);font-size:18px}
.champ-prix{display:flex;align-items:center;gap:8px;border:2.5px solid var(--plaque);border-radius:16px;padding:6px 14px;background:#fff;box-shadow:0 4px 0 var(--plaque-clair)}
.champ-prix span{font-weight:900;color:var(--encre2);font-size:13px;white-space:nowrap}
.champ-prix input{flex:1;min-width:0;border:0;outline:0;background:none;text-align:right;font-family:var(--titre);font-weight:800;font-size:28px;color:var(--encre);padding:2px 0}
.champ-prix .pc{width:26px;height:26px}
#prix-vite{margin:12px 0 4px}
.prix-note{min-height:20px;font-size:13px;font-weight:800;color:var(--cadre2);margin:6px 2px 12px}
.prix-note.bas{color:#B5651D}.prix-note.err{color:#C62828}
.prix-vente{border:0;background:var(--piece-clair);color:#7A5200;border-radius:999px;padding:5px 10px;font-family:var(--titre);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:3px;cursor:pointer;white-space:nowrap}

/* ---------------------------------------------------------------- cartes « full art » (pack et collection)
   le fond occupe toute la carte ; le sujet en grand au milieu ; un bandeau sombre en bas pour les chiffres */
.art{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.fond-brique{background:linear-gradient(180deg,rgba(255,236,214,.16) 0%,rgba(255,236,214,0) 40%,rgba(40,12,4,.2) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='32'%3E%3Crect width='96' height='32' fill='%23D8CBB8'/%3E%3Crect x='0.6' y='0.6' width='22.8' height='6.8' rx='0.8' fill='%23AE4F37'/%3E%3Crect x='24.6' y='0.6' width='22.8' height='6.8' rx='0.8' fill='%23BD5E44'/%3E%3Crect x='48.6' y='0.6' width='22.8' height='6.8' rx='0.8' fill='%23C2664B'/%3E%3Crect x='72.6' y='0.6' width='22.8' height='6.8' rx='0.8' fill='%23B4533A'/%3E%3Crect x='-11.4' y='8.6' width='22.8' height='6.8' rx='0.8' fill='%23A94A33'/%3E%3Crect x='84.6' y='8.6' width='22.8' height='6.8' rx='0.8' fill='%23A94A33'/%3E%3Crect x='12.6' y='8.6' width='22.8' height='6.8' rx='0.8' fill='%23A94A33'/%3E%3Crect x='36.6' y='8.6' width='22.8' height='6.8' rx='0.8' fill='%23AE4F37'/%3E%3Crect x='60.6' y='8.6' width='22.8' height='6.8' rx='0.8' fill='%23B4533A'/%3E%3Crect x='84.6' y='8.6' width='22.8' height='6.8' rx='0.8' fill='%239F442F'/%3E%3Crect x='0.6' y='16.6' width='22.8' height='6.8' rx='0.8' fill='%23B4533A'/%3E%3Crect x='24.6' y='16.6' width='22.8' height='6.8' rx='0.8' fill='%23A94A33'/%3E%3Crect x='48.6' y='16.6' width='22.8' height='6.8' rx='0.8' fill='%23C2664B'/%3E%3Crect x='72.6' y='16.6' width='22.8' height='6.8' rx='0.8' fill='%23C2664B'/%3E%3Crect x='-11.4' y='24.6' width='22.8' height='6.8' rx='0.8' fill='%23A94A33'/%3E%3Crect x='84.6' y='24.6' width='22.8' height='6.8' rx='0.8' fill='%23A94A33'/%3E%3Crect x='12.6' y='24.6' width='22.8' height='6.8' rx='0.8' fill='%239F442F'/%3E%3Crect x='36.6' y='24.6' width='22.8' height='6.8' rx='0.8' fill='%23A94A33'/%3E%3Crect x='60.6' y='24.6' width='22.8' height='6.8' rx='0.8' fill='%23C2664B'/%3E%3Crect x='84.6' y='24.6' width='22.8' height='6.8' rx='0.8' fill='%23B4533A'/%3E%3C/svg%3E") 0 0/84px 28px;box-shadow:inset 0 0 22px rgba(40,12,4,.45)}
.fond-ciel{background:radial-gradient(120% 80% at 50% 30%,color-mix(in srgb,var(--rc) 22%,#fff) 0%,color-mix(in srgb,var(--rc) 55%,#24345E) 70%,color-mix(in srgb,var(--rc) 40%,#141C33) 100%)}
.fond-ciel::before{content:'';position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 38%,rgba(255,255,255,.13) 0 6deg,rgba(255,255,255,0) 6deg 18deg);pointer-events:none}
.art .sujet{position:absolute;left:6px;right:6px;top:34px;bottom:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.art .sujet .plaque{font-size:24px;margin:4px 4px 10px;max-width:calc(100% - 14px)}
.art .sujet .plaque.l{font-size:20px}.art .sujet .plaque.xl{font-size:16.5px}
.art .sujet.adresse .numero{align-self:flex-end;margin-right:12%;font-size:23px}
.art .icone{font-size:86px;line-height:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4));position:relative}
.art .sujet .plaque.nom{font-size:18px;margin-top:6px}.art .sujet .plaque.nom.l{font-size:16px}.art .sujet .plaque.nom.xl{font-size:14px}
.art .bandeau{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;background:linear-gradient(180deg,rgba(16,9,6,0) 0%,rgba(16,9,6,.78) 42%,rgba(16,9,6,.9) 100%);color:#fff;font-family:var(--titre);font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.art .bandeau .valeur{display:inline-flex;align-items:center;gap:4px;font-size:20px;color:#FFE08A}
.art .bandeau .valeur .pc{width:20px;height:20px}
.art .bandeau .plafond{font-size:13px;opacity:.95}
.art .bandeau .loyer{color:#9BF0B8;font-size:13px}
/* dans la collection : plus petit, le bandeau sur une ligne */
.ccarte .fond-brique{background-size:auto,64px 21px}
.ccarte .art .sujet{top:30px;bottom:38px;left:3px;right:3px}
.ccarte .art .sujet .plaque{font-size:17px;padding:5px 16px 4px;margin:3px 2px 7px;border-radius:6px}
.ccarte .art .sujet .plaque small{font-size:10px;padding:0 4px 1px;margin-bottom:2px}
.ccarte .art .sujet .plaque::before,.ccarte .art .sujet .plaque::after{width:4px;height:4px;margin-top:-2px}.ccarte .art .sujet .plaque::before{left:5px}.ccarte .art .sujet .plaque::after{right:5px}
.ccarte .art .sujet .plaque.l{font-size:15px}.ccarte .art .sujet .plaque.xl{font-size:13px}
.ccarte .art .sujet .plaque.nom{font-size:14px}.ccarte .art .sujet .plaque.nom.l{font-size:13px}.ccarte .art .sujet .plaque.nom.xl{font-size:12px}
.ccarte .art .sujet.adresse .numero{font-size:16px;min-width:28px;padding:3px 7px 2px;border-radius:5px;margin-right:10%}
.ccarte .art .icone{font-size:54px}
.ccarte .art .bandeau{flex-direction:row;justify-content:space-between;padding:16px 9px 7px;font-size:14px}
.ccarte .art .bandeau .valeur{font-size:15px}.ccarte .art .bandeau .valeur .pc{width:16px;height:16px}

/* proposer un échange : choisir un de ses lieux, ajouter des pièces si on veut */
.echange-zone{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.echange-zone .btn{flex:1}
.ech-vise{display:flex;align-items:center;gap:10px;background:var(--ciel);border-radius:16px;padding:8px 12px 8px 8px;margin:6px 0 4px}
.ech-vise .ico-lieu,.ech-lieu .ico-lieu{width:44px;height:44px;border-radius:14px;font-size:22px}
.ech-vise .corps,.ech-lieu .corps{flex:1;min-width:0;text-align:left}
.ech-vise .n,.ech-lieu .n{font-family:var(--titre);font-weight:800;font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--encre)}
.ech-vise .m,.ech-lieu .m{font-size:12px;font-weight:800;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ech-vise b,.ech-lieu b{font-family:var(--titre);font-size:15px;white-space:nowrap;color:var(--encre)}
.ech-titre{font-family:var(--titre);font-size:16px;margin:12px 0 6px}
.ech-liste{display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow:auto;padding:2px;margin-bottom:12px}
.ech-lieu{display:flex;align-items:center;gap:10px;width:100%;border:2.5px solid var(--trait);background:#fff;border-radius:16px;padding:6px 12px 6px 6px;cursor:pointer;font:inherit;transition:border-color .12s,background .12s,transform .08s}
.ech-lieu:active{transform:scale(.98)}
.ech-lieu.on{border-color:var(--plaque);background:var(--plaque-clair);box-shadow:0 3px 0 var(--plaque)}
.ech-lieu:disabled{opacity:.45;cursor:default}
.ech-ajout span{line-height:1.1}.ech-ajout small{font-weight:700;color:var(--gris);font-size:11px}
.ech-recu{margin-top:8px}.ech-recu .ech-vise{width:100%;border:0;font:inherit;color:inherit;cursor:pointer;margin:0 0 6px;text-align:left}.ech-recu div.ech-vise{cursor:default}
.ico-lieu.pieces{--rc:var(--piece);--rc2:var(--piece2)}
.ech-ajout input{font-size:24px}
#ech-vite{margin:8px 0 0}#ech-vite .chip{border:0;cursor:pointer}
.ech-balance{font-size:13px;font-weight:800;color:var(--cadre2);margin:10px 2px 6px;line-height:1.45;min-height:20px}
.ech-balance.bas{color:#B5651D}.ech-balance.err{color:#C62828}
/* pied de fenêtre collé en bas : le bilan et les boutons restent visibles quand la liste est longue */
.pied-modal{position:sticky;bottom:-18px;margin:8px -18px -18px;padding:10px 18px 16px;background:#fff;border-top:1px solid var(--trait);box-shadow:0 -10px 16px -14px rgba(23,35,63,.35);z-index:2}
.pied-modal .ech-balance{margin:0 2px 10px}
.rangee-btn{display:flex;gap:8px}.rangee-btn .btn{margin:0;font-size:16px;white-space:normal;text-align:center}
.rangee-btn .btn.clair{flex:0 0 auto;width:auto;padding-left:16px;padding-right:16px}.rangee-btn .btn:not(.clair){flex:1;min-width:0}
.rank .who small{display:block;font-size:12px;color:var(--gris);font-weight:800}
.rank .fleche{color:var(--plaque)}

/* un lieu libre : il ne s'achète pas, il sort des packs */
.libre-info{display:flex;align-items:center;gap:10px;background:var(--ciel);border-radius:14px;padding:10px 12px;font-size:13px;font-weight:700;color:var(--encre2);line-height:1.35;width:100%}
.libre-info b{color:var(--encre)}

/* ---------------------------------------------------------------- lisibilité sur téléphone (3 nov.) */
/* les chiffres d'un lieu : une case par chiffre, alignées, libellé au-dessus */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:6px;margin:12px 0 4px}
.stat{background:var(--ciel);border-radius:14px;padding:7px 8px 6px;text-align:center;min-width:0}
.stat>span{display:block;font-size:11px;font-weight:900;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.stat b{display:flex;align-items:center;justify-content:center;gap:3px;font-family:var(--titre);font-size:17px;font-weight:800;color:var(--encre);white-space:nowrap;line-height:1.3}
.stat b small{font-family:var(--texte);font-size:11px;color:inherit;opacity:.8;font-weight:800}
.stat b .montant{gap:3px}
.stat.or{background:var(--piece-clair)} .stat.or b{color:#7A5200}
.stat.vert{background:#E2F5EA} .stat.vert b{color:var(--cadre2)}
.stat .etoiles{color:#E8A500;letter-spacing:1px}.stat .etoiles i{font-style:normal;color:#C9D2E3}
/* ce qu'on peut faire sur un lieu : séparé des informations */
.addr .echelle{margin-top:12px}
.addr .actions,.addr .offre{margin-top:14px;padding-top:12px;border-top:1px dashed var(--trait)}
.addr .offre .num{flex:1;min-width:0;width:auto}
.addr .offre .btn{flex:0 0 auto}
.addr .echange-zone{margin-top:10px}
.addr .libre-info{margin-top:4px}
/* raccourcis de montant : trois boutons égaux */
.vite{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.raccourci{border:0;background:var(--ciel);border-radius:12px;padding:6px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-family:inherit;color:var(--encre)}
.raccourci span{font-size:11px;font-weight:800;color:var(--gris)}
.raccourci b{font-family:var(--titre);font-size:15px;font-weight:800}
.raccourci:active{transform:scale(.97);background:var(--plaque-clair)}
.vite .raccourci:last-child:nth-child(3n+2){grid-column:span 2}
/* fiche ouverte : la recherche, les boutons de carte et la légende s'effacent (plus de chevauchement) */
body.fiche-ouverte #top .barre,body.fiche-ouverte #sugg,body.fiche-ouverte #ctrls,body.fiche-ouverte #legend{opacity:0;pointer-events:none;transition:opacity .2s}
#sheet{max-height:calc(100% - 92px - env(safe-area-inset-top))}
/* légende repliable */
#legend{cursor:pointer;user-select:none}
#legend .titre-legende{font-family:var(--titre);font-size:12px;color:var(--encre)}
#legend.repliee span{display:none}
#legend.repliee{padding:6px 10px}

/* ===== Extraordinaire (r6) : l'arc-en-ciel (monuments, enchères seulement ; décision de Gautier, 3 nov. 2026) ===== */
@keyframes arc{to{background-position:200% 50%}}
.tag.r6{background:linear-gradient(115deg,#FFE3E8,#FFF0D6,#FFF9D1,#DDF8E8,#DCEEFF,#EBE2FF,#FFE0F4);color:#6B2A9E!important}
.ccarte.r6,.rcard.r6 .front,.ico-lieu.r6{border-color:transparent}
.addr.r6{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(115deg,#FFB3C1,#FFD8A1,#FFF0A6,#AEEFC9,#A9D6FF,#CDB8FF,#FFB3E6) border-box}
.ccarte.r6{background:linear-gradient(#2A1A14,#2A1A14) padding-box,var(--arc) border-box;background-size:auto,200% 100%;animation:arc 6s linear infinite;box-shadow:0 5px 0 #6B2A9E,var(--ombre)}
.rcard.r6 .front{background:linear-gradient(#2A1A14,#2A1A14) padding-box,var(--arc) border-box;background-size:auto,200% 100%;animation:arc 4s linear infinite;box-shadow:0 0 48px rgba(180,77,255,.6),0 0 90px rgba(255,159,28,.35)}
.ico-lieu.r6{background:linear-gradient(160deg,#FFF4F7,#F3EEFF) padding-box,var(--arc) border-box;box-shadow:0 3px 0 #6B2A9E}
.ccarte.r6 .rar,.rcard.r6 .front .rar{background:var(--arc);background-size:200% 100%;animation:arc 6s linear infinite;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.filtre.r6 .dot{background:var(--arc-rond)}
.r6 .fond-ciel{background:radial-gradient(120% 80% at 50% 30%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 55%),linear-gradient(160deg,#FF6B81,#FFB347 22%,#FFE66D 40%,#6EE7A8 58%,#5AB2FF 76%,#9B7BFF 100%)}
.r6 .fond-ciel::before{background:repeating-conic-gradient(from 0deg at 50% 38%,rgba(255,255,255,.22) 0 6deg,rgba(255,255,255,0) 6deg 18deg)}
#reveal.r6::before{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.35),transparent 30%),conic-gradient(from 0deg at 50% 45%,rgba(255,77,109,.5),rgba(255,159,28,.5),rgba(255,225,77,.5),rgba(61,220,132,.5),rgba(47,155,255,.5),rgba(142,92,255,.5),rgba(255,77,109,.5))}
.card.lot.nat{border:3px solid transparent;background:linear-gradient(#fff,#fff) padding-box,var(--arc) border-box;background-size:auto,200% 100%;animation:arc 8s linear infinite}
.card.lot.r6:not(.nat){border:3px solid #E3D6FB}
.mon-anneau i{border-color:transparent;background:var(--arc-rond) border-box;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));box-shadow:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.8))}
@media (prefers-reduced-motion:reduce){.ccarte.r6,.rcard.r6 .front,.ccarte.r6 .rar,.rcard.r6 .front .rar,.card.lot.nat{animation:none}}

/* ===== Communes : la recherche, la commune ouverte, mes communes en lignes (demande de Gautier, 3 nov.) ===== */
.recherche-commune{position:relative;margin:4px 0 14px}
.recherche-commune .loupe{position:absolute;left:14px;top:13px;font-size:17px;pointer-events:none}
.recherche-commune input.txt{padding-left:42px;border-radius:16px;box-shadow:var(--ombre)}
.recherche-commune input::-webkit-search-cancel-button{display:none}
#com-sugg{display:none;margin-top:6px;background:#fff;border-radius:16px;box-shadow:var(--ombre-forte);overflow:hidden}
.sugg-commune{display:flex;align-items:center;gap:10px;width:100%;border:0;background:#fff;padding:11px 14px;border-bottom:1px solid var(--trait);text-align:left;font-family:inherit;color:var(--encre);cursor:pointer}
.sugg-commune:last-child{border-bottom:0}.sugg-commune:active{background:var(--ciel)}
.sugg-commune .nom,.ligne-commune .nom{flex:1;min-width:0;font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg-commune small,.ligne-commune small{display:block;font-size:12px;font-weight:700;color:var(--gris);overflow:hidden;text-overflow:ellipsis}
.sugg-commune .maire-mini{flex:none;max-width:45%;font-size:12px;font-weight:800;color:#7A5200;background:var(--piece-clair);border-radius:999px;padding:4px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#com-sugg .aucune{padding:14px;font-weight:800;color:var(--gris);font-size:14px}
.commune-ouverte{position:relative;border:2.5px solid var(--piece)}
.fermer-commune{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:0;background:var(--ciel);font-size:16px;font-weight:900;color:var(--encre);cursor:pointer}
.maire-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 6px}
.liste-communes{padding:4px 6px}
.ligne-commune{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:11px 6px;border-bottom:1.5px solid var(--ciel);text-align:left;font-family:inherit;color:var(--encre);cursor:pointer}
.ligne-commune:last-child{border-bottom:0}.ligne-commune.on{background:var(--piece-clair);border-radius:12px}
.ligne-commune .moi-n{flex:none;text-align:right;font-family:var(--titre);font-weight:800;font-size:15px}
.ligne-commune .moi-n small{font-family:var(--texte)}
.ligne-commune .chevron{flex:none;font-size:22px;color:var(--gris);font-weight:900}

/* une offre reçue : la valeur de mon lieu et l'écart (au-dessus en vert, en dessous en orange) */
.offre-valeur{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:7px 10px;border-radius:12px;background:var(--ciel);font-size:13px;font-weight:800;color:var(--gris)}
.offre-valeur b{color:var(--encre)} .offre-valeur .montant{font-size:14px}
.offre-valeur .ecart{flex:none;border-radius:999px;padding:2px 9px;font-size:13px}
.offre-valeur .ecart.plus{background:#DDF3E6;color:var(--cadre2)} .offre-valeur .ecart.moins{background:#FDEBD8;color:#B5651D}

/* la valeur qui bouge : la variation sous la valeur, ses raisons sous les chiffres, le marché de la semaine */
.stat .var{display:block;font-style:normal;font-size:11px;font-weight:900;margin-top:1px}
.stat .var.plus,.facteurs .plus,.tendances .plus{color:var(--cadre2)} .stat .var.moins,.facteurs .moins,.tendances .moins{color:#B5651D}
.facteurs{font-size:12px;font-weight:800;color:var(--gris);margin:6px 2px 0;line-height:1.4}
.tendances .m{margin-top:6px;line-height:1.45} .tendances .petit{font-size:12px}

/* ---------------------------------------------------------------- la promenade (Street View en haut, la carte au milieu, ce qu'on longe en bas) */
.svwrap .prom-entree{position:absolute;left:8px;bottom:8px;border:0;background:var(--plaque);color:#fff;font-size:13px;font-weight:900;padding:7px 11px;border-radius:10px;box-shadow:0 3px 0 var(--plaque2);cursor:pointer}
#bprom{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--ombre);font-size:20px;padding:0}
#prom{position:absolute;inset:0;z-index:20;pointer-events:none;display:none}
body.promenade{--nav:0px}
body.promenade #prom{display:block}
body.promenade #top,body.promenade #ctrls,body.promenade #legend,body.promenade #nav,body.promenade #charge{display:none}
body.promenade #sheet{max-height:calc(58% - 6px)}
body.promenade #sheet .svwrap{display:none}
.prom-vue{position:absolute;left:0;right:0;top:0;height:42%;min-height:220px;background:#17233F;pointer-events:auto;overflow:hidden;border-radius:0 0 22px 22px;box-shadow:0 8px 24px rgba(23,35,63,.28)}
.prom-sv{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s;background:#17233F;pointer-events:none}
.prom-sv.vu{opacity:1}
/* La couche qui reçoit les gestes, sur toute la photo. Retour de Gautier (3 nov.) : on ne pouvait plus tourner, le geste
   partait ailleurs. Chrome envoie les touchers à une page intégrée d'un autre site (ici Google) quand la couche posée
   dessus est vide : les cadres de Street View sont donc inertes (pointer-events:none), et la couche est peinte (fond
   presque transparent) dans son propre calque. Google reste à un toucher : « Google Maps ↗ ». */
#prom-touche{position:absolute;inset:0;touch-action:none;cursor:grab;background:rgba(23,35,63,.01);will-change:transform;-webkit-user-select:none;user-select:none}
.prom-google{position:absolute;top:calc(14px + env(safe-area-inset-top));right:58px;background:rgba(23,35,63,.72);color:#fff;font-size:12px;font-weight:800;padding:7px 10px;border-radius:10px;text-decoration:none}
.prom-quitter{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:var(--encre);font-size:18px;font-weight:900;box-shadow:var(--ombre-forte);cursor:pointer}
.prom-aide{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);background:rgba(23,35,63,.8);color:#fff;font-weight:800;font-size:13px;padding:8px 12px;border-radius:12px;white-space:nowrap;pointer-events:none;animation:prom-aide 5s forwards}
@keyframes prom-aide{0%,78%{opacity:1}100%{opacity:0}}
.prom-charge{position:absolute;left:12px;top:calc(12px + env(safe-area-inset-top));width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:var(--ombre)}
.prom-charge .pc{width:20px;height:20px;animation:tourne 1.2s linear infinite}
#prom.charge .prom-charge,#prom.marche .prom-charge{opacity:1}
.prom-bas{position:absolute;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -6px 24px rgba(23,35,63,.14);pointer-events:auto}
.prom-rue{font-family:var(--titre);font-weight:800;color:var(--encre2);font-size:15px;margin:0 2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prom-vide{font-size:13px;font-weight:700;color:var(--gris);padding:8px 4px 10px}
.prom-lieu{display:flex;align-items:center;gap:10px;width:100%;background:var(--ciel);border:0;border-radius:14px;padding:7px 10px;margin-bottom:6px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.prom-lieu .cote{display:flex;flex-direction:column;align-items:center;font-size:17px;line-height:1.1;color:var(--plaque);min-width:46px;font-weight:900}
.prom-lieu .cote small{font-size:10px;color:var(--encre2);white-space:nowrap}
.prom-lieu .corps{flex:1;min-width:0}
.prom-lieu .corps b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:900}
.prom-lieu .corps b.attente{color:var(--gris)}
.prom-lieu .corps small{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:3px}
.prom-lieu .own{font-size:12px;padding:3px 9px;cursor:inherit}
.prom-lieu .gris{font-size:12px;font-weight:800;color:var(--gris)}
.prom-prix{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:900;color:var(--cadre2)}
.prom-prix .pc{width:13px;height:13px}
.prom-lieu .aller{font-weight:900;font-size:13px;color:#fff;background:var(--plaque);padding:7px 10px;border-radius:10px;white-space:nowrap;box-shadow:0 2px 0 var(--plaque2)}
.prom-boutons{display:flex;gap:8px;justify-content:center;margin-top:4px}
.prom-boutons button{width:54px;height:50px;border-radius:16px;border:0;background:var(--plaque-clair);color:var(--plaque);font-size:23px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #C8D5F5}
.prom-boutons button.grand{flex:1;max-width:160px;width:auto;background:var(--plaque);color:#fff;font-size:17px;box-shadow:0 3px 0 var(--plaque2)}
.prom-boutons button:active{transform:translateY(2px);box-shadow:none}
#prom.marche #prom-av{opacity:.6}
.marcheur{width:110px;height:110px;pointer-events:none}
.marcheur .cone{position:absolute;left:50%;top:0;width:84px;height:55px;transform:translateX(-50%);background:linear-gradient(to top,rgba(79,134,240,.6),rgba(79,134,240,0));clip-path:polygon(50% 100%,0 0,100% 0)}
.marcheur .pt{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#4F86F0;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}

/* ================================================================ graphismes, la preuve (phase 10, 3 nov. 2026)
   Le pack et les cartes en style « jeu mobile coloré » (choix de Gautier) : contour encre épais, anneau de la rareté en
   relief, étiquette en onglet, chiffres en relief, effets qui montent avec la rareté. Référence : docs/BIBLE-GRAPHIQUE.md */
.ccarte,.rcard .front{border:3px solid var(--encre)!important;background:var(--encre)}
.ccarte{box-shadow:0 5px 0 var(--encre),var(--ombre)}
.ccarte:active{box-shadow:0 2px 0 var(--encre),var(--ombre)}
.rcard .front{border-width:4px!important;box-shadow:0 0 46px color-mix(in srgb,var(--rc) 70%,transparent)}
/* l'anneau de la rareté (dégradé, lumière en haut à gauche) et le filet blanc à l'intérieur */
.art .cadre{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;padding:6px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--rc) 40%,#fff) 0%,var(--rc) 34%,var(--rc2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.art::after{content:'';position:absolute;inset:6px;z-index:3;border-radius:12px;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),inset 0 0 0 3.5px rgba(23,35,63,.45)}
.rcard .art .cadre{padding:8px}.rcard .art::after{inset:8px;border-radius:13px}
/* l'étiquette de rareté : un onglet qui pend du haut de la carte */
.ccarte .rar,.rcard .front .rar{z-index:5;top:0;left:50%;right:auto;transform:translateX(-50%);padding:2px 12px 4px;border-radius:0 0 11px 11px;border:2.5px solid var(--encre);border-top:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 45%,#fff),var(--rc) 55%,var(--rc2));font-family:var(--titre);font-weight:800;letter-spacing:.02em;white-space:nowrap;color:#fff;
  text-shadow:0 1.5px 0 var(--encre),1px 0 0 var(--encre),-1px 0 0 var(--encre),0 -1px 0 var(--encre);box-shadow:0 3px 0 rgba(23,35,63,.35)}
.ccarte .rar{font-size:10.5px;padding:2px 10px 4px}.rcard .front .rar{font-size:12.5px;padding:3px 16px 5px}
.ccarte.r6 .rar,.rcard.r6 .front .rar{background:var(--arc);background-size:200% 100%;animation:arc 6s linear infinite}
.ccarte .niv{top:25px;right:9px;width:26px;height:26px;font-size:14px;border:2.5px solid var(--encre);box-shadow:0 2px 0 var(--encre)}
/* le bandeau du bas : chiffres or, cernés d'encre, en relief */
.art .bandeau{z-index:2;background:linear-gradient(180deg,rgba(14,22,48,0) 0%,rgba(14,22,48,.86) 38%,#0E1630 100%)}
.art .bandeau .valeur{color:#FFD54A;text-shadow:2px 0 var(--encre),-2px 0 var(--encre),0 2px var(--encre),0 -2px var(--encre),1.5px 1.5px var(--encre),-1.5px 1.5px var(--encre),1.5px -1.5px var(--encre),-1.5px -1.5px var(--encre),0 4px 0 var(--encre)}
.rcard .art .bandeau .valeur{font-size:24px}
.art .bandeau .valeur .pc{filter:drop-shadow(0 2px 0 var(--encre))}
.art .bandeau .loyer,.art .bandeau .plafond{text-shadow:0 1.5px 0 var(--encre),1px 0 0 var(--encre),-1px 0 0 var(--encre)}
/* les effets montent avec la rareté (bible § 3) */
.ccarte.r4::after,.ccarte.r5::after,.ccarte.r6::after{display:none}
.r3 .art .reflet,.r4 .art .reflet,.r5 .art .reflet,.r6 .art .reflet{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 48%,rgba(255,255,255,.15) 52%,transparent 60%);background-size:280% 100%;animation:reflet 5s ease-in-out infinite}
.r4 .art .eclats,.r5 .art .eclats,.r6 .art .eclats{position:absolute;inset:0;z-index:4;pointer-events:none;
  --etoile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C11 6.5 13.5 9 20 10C13.5 11 11 13.5 10 20C9 13.5 6.5 11 0 10C6.5 9 9 6.5 10 0Z' fill='%23fff'/%3E%3C/svg%3E");
  background:var(--etoile) 14% 20%/13px no-repeat,var(--etoile) 86% 34%/9px no-repeat,var(--etoile) 18% 64%/8px no-repeat,var(--etoile) 82% 70%/12px no-repeat;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9));animation:scintille 2.6s ease-in-out infinite}
.r4 .art .eclats::after,.r5 .art .eclats::after,.r6 .art .eclats::after{content:'';position:absolute;inset:0;background:var(--etoile) 30% 12%/8px no-repeat,var(--etoile) 70% 16%/11px no-repeat,var(--etoile) 50% 82%/9px no-repeat;animation:scintille 2.6s ease-in-out 1.3s infinite}
@keyframes scintille{0%,100%{opacity:.15;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.ccarte.r5,.rcard.r5 .front{animation:halo-or 2.8s ease-in-out infinite}
@keyframes halo-or{0%,100%{box-shadow:0 5px 0 var(--encre),0 0 0 0 rgba(255,170,40,0)}50%{box-shadow:0 5px 0 var(--encre),0 0 18px 3px rgba(255,170,40,.75)}}
.r5 .fond-ciel::before,.r6 .fond-ciel::before{animation:spin 26s linear infinite}
.r6 .art .cadre{background:var(--arc);background-size:200% 100%;animation:arc 6s linear infinite}
.r6 .art .holo{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;mix-blend-mode:overlay;opacity:.6;
  background:linear-gradient(115deg,transparent 15%,rgba(255,77,109,.55) 25%,rgba(255,225,77,.55) 35%,rgba(61,220,132,.55) 45%,rgba(47,155,255,.55) 55%,rgba(142,92,255,.55) 65%,transparent 75%);background-size:300% 100%;animation:holo 7s linear infinite}
@keyframes holo{from{background-position:120% 0}to{background-position:-180% 0}}
/* le dos des cartes : bleu vif, rayons, double cadre or et encre, la pièce-maison en grand qui respire */
.rcard .back{border:4px solid var(--encre);outline:none;flex-direction:column;gap:10px;
  background:repeating-conic-gradient(from 0deg at 50% 44%,rgba(255,255,255,.10) 0 7deg,rgba(255,255,255,0) 7deg 18deg),radial-gradient(circle at 50% 44%,#5C9BFF 0%,#2B5BE0 38%,#16318F 78%,#0E2266 100%);
  box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 9px var(--piece),inset 0 0 0 12px var(--encre),0 8px 0 rgba(0,0,0,.35)}
.rcard .back .dos-piece{width:104px;height:104px;filter:drop-shadow(0 5px 0 var(--encre)) drop-shadow(0 0 16px rgba(255,214,90,.75));animation:respire 2.4s ease-in-out infinite}
.rcard .back .dos-nom{font-family:var(--titre);font-weight:800;font-size:22px;color:#fff;background:linear-gradient(180deg,#2A57C0,var(--plaque));border:3px solid #fff;outline:3px solid var(--cadre);border-radius:10px;padding:0 16px 1px;box-shadow:0 4px 0 var(--encre);text-shadow:0 2px 0 var(--encre)}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion: reduce){.art .reflet,.art .eclats,.art .eclats::after,.art .holo,.r5 .fond-ciel::before,.r6 .fond-ciel::before,.ccarte.r5,.rcard.r5 .front,.rcard .back .dos-piece,.r6 .art .cadre{animation:none!important}}
/* les cartes glissent hors du pack, une par une (phase 10.3) : elles partent de sous l'ouverture, cachées tant qu'elles y sont */
.rcard.sortie{opacity:1;transition:none;transform:translateX(var(--x)) translateY(calc(var(--y) + 380px)) scale(var(--s))}

/* ===================== la révélation habillée (phase 10.5, 4 nov. 2026 ; bible graphique § 9) =====================
   Direction de Gautier (4 nov.) : « moins dessin animé, plus classe, stylé, impressionnant ». Une nuit profonde, des traits
   fins dorés et lumineux (la France, le département, la commune), une lumière de la couleur de la rareté dès le départ
   (comme le reflet de couleur d'un pack FIFA), une typographie étroite en capitales espacées, l'or en dégradé métallique. */
#reveal{background:radial-gradient(ellipse 120% 90% at 50% 40%,#16285A 0%,#0A1430 45%,#03060F 100%)}
#reveal::before{background:radial-gradient(circle at 50% 42%,rgba(233,199,123,.14),transparent 55%)}
#reveal.r3::before{background:radial-gradient(circle at 50% 42%,rgba(64,140,255,.30),transparent 58%)}
#reveal.r4::before{background:radial-gradient(circle at 50% 42%,rgba(160,90,255,.34),transparent 58%)}
#reveal.r5::before{background:radial-gradient(circle at 50% 42%,rgba(255,150,40,.36),transparent 60%)}
#rrayons{position:absolute;left:50%;top:42%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,236,200,.07) 0deg 1.1deg,rgba(255,236,200,0) 1.1deg 11deg);animation:rayons 140s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 16%,transparent 40%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.5) 16%,transparent 40%)}
#reveal.r3 #rrayons{background:repeating-conic-gradient(from 0deg,rgba(120,180,255,.13) 0deg 1.2deg,rgba(120,180,255,0) 1.2deg 10deg)}
#reveal.r4 #rrayons{background:repeating-conic-gradient(from 0deg,rgba(200,150,255,.15) 0deg 1.2deg,rgba(200,150,255,0) 1.2deg 10deg)}
#reveal.r5 #rrayons{background:repeating-conic-gradient(from 0deg,rgba(255,200,110,.17) 0deg 1.3deg,rgba(255,200,110,0) 1.3deg 9deg);animation-duration:70s}
#reveal.r6 #rrayons{background:repeating-conic-gradient(from 0deg,rgba(255,120,170,.16) 0deg 1.2deg,transparent 1.2deg 9deg,rgba(255,225,120,.16) 9deg 10.2deg,transparent 10.2deg 18deg,rgba(120,200,255,.16) 18deg 19.2deg,transparent 19.2deg 27deg);animation-duration:60s}
#reveal.fast #rrayons{animation-duration:25s}
@keyframes rayons{to{transform:rotate(360deg)}}
#reveal .glow{fill:none;stroke:rgba(233,199,123,.22);stroke-width:10;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#reveal .sil{fill:url(#rgFrance);stroke:#E9C77B;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#reveal .sil.hi{fill:url(#rgDep);stroke:#F3D899;stroke-width:2}
#reveal .sil.com{fill:url(#rgCom);stroke:#FFF1C9;stroke-width:2.2}
#reveal .sil.loin{fill-opacity:.35;stroke-opacity:.35;transition:fill-opacity .7s ease,stroke-opacity .7s ease}
#reveal .glow.loin{stroke-opacity:.2}
#reveal .dot{fill:#fff;stroke:none}
#reveal .dotglow{fill:rgba(255,226,160,.4)}
#reveal .ring{stroke:#F3D899;stroke-width:1.5}
#rlabels{bottom:calc(112px + env(safe-area-inset-bottom))}
#rlabels .l{text-shadow:none}
#rl1{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--panneau);font-weight:600;font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:#E9C77B;margin:0 0 10px;text-align:center}
#rl1::before,#rl1::after{content:'';height:1px;width:22px;flex:none;background:linear-gradient(90deg,transparent,#E9C77B)}
#rl1::after{background:linear-gradient(90deg,#E9C77B,transparent)}
#rl1:empty::before,#rl1:empty::after{display:none}
#rl2{display:grid;justify-items:center;font-family:var(--panneau);font-weight:700;font-size:35px;line-height:1.02;letter-spacing:.03em;text-transform:uppercase;margin:0 6px}
#rl2 > span{grid-area:1/1;padding:0 8px}
#rl2 .contour{color:transparent;text-shadow:0 0 22px rgba(255,196,90,.55),0 2px 0 rgba(0,0,0,.35)}
#rl2 .or{background:linear-gradient(180deg,#FFF6DA 0%,#F6DC98 30%,#D9A548 58%,#FBE7A9 76%,#B9832E 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#rl2.on{animation:rentre .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rentre{0%{opacity:0;letter-spacing:.35em;filter:blur(10px)}100%{opacity:1;letter-spacing:.03em;filter:blur(0)}}
#rlabels .l.rar{font-family:var(--panneau);font-size:14px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#fff;margin-top:16px;padding:6px 10px 5px 14px;border-radius:3px;
  background:color-mix(in srgb,var(--rc,#8E9AAF) 22%,transparent);border:1px solid var(--rc,#8E9AAF);box-shadow:0 0 22px color-mix(in srgb,var(--rc,#8E9AAF) 60%,transparent),inset 0 0 12px color-mix(in srgb,var(--rc,#8E9AAF) 35%,transparent)}
#rlabels .l.rar.r6{border-color:#FFE14D;background:linear-gradient(90deg,rgba(255,77,109,.25),rgba(255,225,77,.25),rgba(61,220,132,.25),rgba(47,155,255,.25),rgba(142,92,255,.25))}
#rhint{color:rgba(233,199,123,.6);font-family:var(--panneau);letter-spacing:.18em;text-transform:uppercase;font-size:12px}
@media (prefers-reduced-motion:reduce){#rrayons{animation:none!important}#rl2.on{animation:none;opacity:1}}
/* l'explosion de lumière d'une carte Rare et au-delà (demande de Gautier, 4 nov.) : un cœur blanc, la lumière de la rareté,
   un trait de lumière horizontal, des faisceaux fins, une onde, des grains de lumière */
.explo{position:absolute;left:50%;top:42%;width:0;height:0;pointer-events:none;z-index:4;--c:#3D8BFF;--c2:#BFE0FF}
.explo.r4{--c:#A35BFF;--c2:#EBD3FF}.explo.r5{--c:#FF8A1E;--c2:#FFE6A8}.explo.r6{--c:#FF4DC4;--c2:#FFF0A0}
.explo .eclat{position:absolute;left:-65vmax;top:-65vmax;width:130vmax;height:130vmax;border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 3%,var(--c2) 9%,color-mix(in srgb,var(--c) 85%,transparent) 22%,color-mix(in srgb,var(--c) 30%,transparent) 38%,transparent 60%);transform:scale(.04);opacity:0;animation:explo-eclat 1.1s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes explo-eclat{0%{transform:scale(.04);opacity:1}35%{opacity:1}100%{transform:scale(1.25);opacity:0}}
.explo .trait{position:absolute;left:-75vw;top:-2px;width:150vw;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c) 25%,var(--c2) 42%,#fff 50%,var(--c2) 58%,var(--c) 75%,transparent);box-shadow:0 0 18px 4px color-mix(in srgb,var(--c) 70%,transparent);transform:scaleX(0);opacity:0;animation:explo-trait .9s cubic-bezier(.15,.8,.3,1) forwards}
@keyframes explo-trait{0%{transform:scaleX(0);opacity:1}30%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1.2) scaleY(.3);opacity:0}}
.explo .rais{position:absolute;left:-80vmax;top:-80vmax;width:160vmax;height:160vmax;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--c2) 0deg .8deg,transparent .8deg 7.5deg);-webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 48%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 18%,transparent 48%);opacity:0;animation:explo-rais 1.3s ease-out forwards}
@keyframes explo-rais{0%{opacity:0;transform:scale(.3) rotate(0deg)}18%{opacity:.85}100%{opacity:0;transform:scale(1.1) rotate(14deg)}}
.explo .onde{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;box-sizing:border-box;border:2px solid var(--c2);box-shadow:0 0 22px 3px var(--c),inset 0 0 14px var(--c);transform:scale(.2);opacity:0;animation:explo-onde 1s cubic-bezier(.1,.7,.3,1) forwards}
.explo .onde.o2{animation-delay:.14s;border-width:1px}
@keyframes explo-onde{0%{transform:scale(.2);opacity:1}100%{transform:scale(10);opacity:0}}
.explo b{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px var(--c),0 0 3px 1px var(--c2);opacity:0;animation:explo-grain var(--t) cubic-bezier(.12,.75,.3,1) .05s forwards}
@keyframes explo-grain{0%{opacity:1;transform:rotate(var(--a)) translateY(0)}70%{opacity:.9}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -2.2))}}
.explo.r6 .eclat{background:radial-gradient(circle,#fff 0,#fff 3%,#FFF0A0 9%,rgba(255,77,196,.8) 20%,rgba(142,92,255,.5) 32%,transparent 60%)}
.explo.bis .eclat{animation-duration:1.3s}.explo.bis .trait{animation-name:explo-trait-v}
@keyframes explo-trait-v{0%{transform:rotate(90deg) scaleX(0);opacity:1}30%{transform:rotate(90deg) scaleX(.7);opacity:1}100%{transform:rotate(90deg) scaleX(.8) scaleY(.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.explo .rais,.explo b,.explo .onde,.explo .trait{display:none}.explo .eclat{animation-duration:.4s}}

/* ===================== les cartes du pack : une carte = un seul objet (refonte du 4 nov. 2026) =====================
   On la retourne (--flip), on l'incline au doigt (--rx, --ry), les reflets suivent (--mx, --my, --hx, --hy). Le dos est dans
   le style « classe » : nuit bleue, guilloché et double filet d'or, la pièce-maison en or, CADASTRA en capitales d'or. */
#packscene{background:radial-gradient(ellipse 110% 80% at 50% 38%,#14275A 0%,#081230 50%,#03060F 100%)}
#pkcards{perspective:1200px}
.c3d{position:absolute;left:50%;top:50%;width:240px;height:350px;margin:-175px 0 0 -120px;pointer-events:auto;touch-action:none;cursor:grab;
  transform:translate3d(var(--x,0px),var(--y,0px),0) rotate(var(--r,0deg)) scale(var(--s,1));transition:transform .6s cubic-bezier(.2,.85,.25,1),opacity .35s;will-change:transform}
.c3d.libre{transition:transform .07s linear}
.c3d::after{content:'';position:absolute;left:10%;right:10%;bottom:-22px;height:28px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);pointer-events:none}
.c3d-corps{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--flip,180deg)));transition:transform .95s cubic-bezier(.25,1.3,.35,1)}
.c3d.libre .c3d-corps,.c3d.suit .c3d-corps{transition:transform .1s linear}
.c3d-face{position:absolute;inset:0;border-radius:16px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}
.c3d-dos{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(circle at 50% 44%,rgba(233,199,123,.22),transparent 52%),repeating-radial-gradient(circle at 50% 44%,rgba(233,199,123,.09) 0 1px,transparent 1px 8px),linear-gradient(160deg,#17326F 0%,#0B1738 55%,#050B1E 100%);
  box-shadow:inset 0 0 0 3px #08112B,inset 0 0 0 5px #C9A24E,inset 0 0 0 9px #08112B,inset 0 0 0 10px rgba(233,199,123,.6)}
.c3d-embleme{width:92px;height:92px;filter:drop-shadow(0 0 16px rgba(255,200,100,.6))}
.c3d-nom{font-family:var(--panneau);font-weight:700;font-size:21px;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;background:linear-gradient(180deg,#FFF3CF,#E9C77B 45%,#B8862F 72%,#F6DE9C);-webkit-background-clip:text;background-clip:text;color:transparent}
.c3d-avant{background:var(--encre);border:4px solid var(--encre);color:#fff;text-align:center}
.c3d.vue .c3d-avant{box-shadow:0 0 44px color-mix(in srgb,var(--rc) 65%,transparent)}
.c3d .art .cadre{padding:8px}.c3d .art::after{inset:8px;border-radius:12px}
.c3d .art .bandeau .valeur{font-size:25px}
.c3d-avant .rar{position:absolute;z-index:7;top:0;left:50%;transform:translateX(-50%);padding:3px 16px 5px;border-radius:0 0 11px 11px;border:2.5px solid var(--encre);border-top:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 45%,#fff),var(--rc) 55%,var(--rc2));font-family:var(--titre);font-weight:800;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;color:#fff;
  text-shadow:0 1.5px 0 var(--encre),1px 0 0 var(--encre),-1px 0 0 var(--encre),0 -1px 0 var(--encre)}
.c3d.r6 .c3d-avant .rar{background:var(--arc);background-size:200% 100%;animation:arc 6s linear infinite}
/* les reflets : une lumière qui suit l'inclinaison, et un irisé (« holographique ») qui monte avec la rareté */
.c3d-brillance{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;mix-blend-mode:soft-light;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.95) 0%,rgba(255,255,255,.25) 28%,rgba(0,0,0,.35) 80%)}
.c3d.vue .c3d-brillance{opacity:.9}
.c3d-holo{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;mix-blend-mode:color-dodge;opacity:0;transition:opacity .5s;
  background:repeating-linear-gradient(115deg,#ff4d6d 0%,#ffe14d 5%,#3ddc84 10%,#2f9bff 15%,#8e5cff 20%,#ff4d6d 25%),repeating-linear-gradient(25deg,rgba(255,255,255,.35) 0 1px,transparent 1px 4px);
  background-size:400% 400%,100% 100%;background-position:var(--hx,50%) var(--hy,50%),0 0}
.c3d.vue.r3 .c3d-holo{opacity:.16}.c3d.vue.r4 .c3d-holo{opacity:.24}.c3d.vue.r5 .c3d-holo{opacity:.32}.c3d.vue.r6 .c3d-holo{opacity:.42}
/* l'éclair de lumière quand une carte rare se retourne */
.c3d.eclair::before{content:'';position:absolute;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0,color-mix(in srgb,var(--rc) 75%,transparent) 22%,transparent 60%);animation:c3d-eclair 1.1s ease-out forwards}
@keyframes c3d-eclair{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){.c3d-corps{transition:none}.c3d.eclair::before{animation:none;opacity:0}}
#packscene .hint{font-family:var(--panneau);font-weight:600;font-size:18px;letter-spacing:.04em;color:#F3E3BC;text-shadow:0 2px 10px rgba(0,0,0,.7)}
#pkload{font-family:var(--panneau);letter-spacing:.12em;text-transform:uppercase;color:#E9C77B!important}

/* ===================== la carte d'un lieu (refonte du 4 nov. 2026, interview de Gautier ; src/carte_lieu.js) =====================
   Un badge aux coins coupés, bleu nuit et or comme la pochette ; le plan cadastral d'or et la maquette de verre éclairée ;
   le nom sur la plaque émaillée ; la lumière de la couleur de la rareté (blanc et or pour une Commune). Pas de science-fiction. */
.cl{position:relative;width:240px;height:350px;color:#F3E3BC;font-family:var(--panneau);--c1:#FFF1C9;--c2:#E9C77B;
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  background:radial-gradient(ellipse 90% 55% at 50% 34%,color-mix(in srgb,var(--c2) 26%,transparent),transparent 70%),
    repeating-radial-gradient(circle at 50% 36%,rgba(233,199,123,.06) 0 1px,transparent 1px 9px),linear-gradient(170deg,#17326F 0%,#0B1738 52%,#050B1E 100%)}
.cl.r2{--c1:#C8F7DA;--c2:#2FB36D}.cl.r3{--c1:#CFE6FF;--c2:#3D8BFF}.cl.r4{--c1:#EBD6FF;--c2:#A35BFF}.cl.r5{--c1:#FFE6B8;--c2:#FF8A1E}.cl.r6{--c1:#FFDDF4;--c2:#FF4DC4}
.cl-cadre{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.cl-trait{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}.cl-trait.epais{stroke-width:2.6}
.cl-trait.or{stroke:#E9C77B}.cl-trait.vif{stroke:var(--c2);filter:drop-shadow(0 0 3px var(--c2))}.cl-plein.or{fill:#E9C77B}.cl-plein.vif{fill:var(--c2)}
.cl.r1 .cl-trait.vif{stroke:rgba(233,199,123,.55);filter:none}
.cl-trait.pouls{stroke-width:3;opacity:.2;animation:cl-pouls 2.6s ease-in-out infinite}
.cl.r4 .cl-trait.vif:not(.epais){animation:cl-pouls-doux 2.6s ease-in-out infinite}
@keyframes cl-pouls{0%,100%{opacity:.15}50%{opacity:.85}}
@keyframes cl-pouls-doux{0%,100%{opacity:.55}50%{opacity:1}}
.cl-rar{position:absolute;top:11px;left:0;right:0;z-index:4;text-align:center;font-weight:600;font-size:11px;letter-spacing:.34em;padding-left:.34em;text-transform:uppercase;color:var(--c1);text-shadow:0 0 8px color-mix(in srgb,var(--c2) 80%,transparent)}
.cl-vue{position:absolute;left:10px;right:10px;top:26px;width:calc(100% - 20px);height:176px;z-index:1}
.cl-nom{position:absolute;left:8px;right:8px;top:196px;z-index:4;display:flex;justify-content:center}
.cl-nom .plaque{font-size:15px;max-width:100%;margin:0}
.cl-stats{position:absolute;left:14px;right:14px;bottom:13px;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;padding-top:9px;border-top:1px solid rgba(233,199,123,.35)}
.cl-stats > div{display:flex;flex-direction:column;align-items:center;gap:1px}
.cl-stats b{font-weight:700;font-size:19px;line-height:1;letter-spacing:.02em;background:linear-gradient(180deg,#FFF4D2,#E9C77B 55%,#C9973F);-webkit-background-clip:text;background-clip:text;color:transparent}
.cl-stats b .pc{width:15px;height:15px;vertical-align:-2px}
.cl-stats b.etoiles{letter-spacing:.12em;background:none;color:#E9C77B;-webkit-text-fill-color:#E9C77B;text-shadow:0 0 6px rgba(233,199,123,.45)}.cl-stats b.etoiles span{color:rgba(233,199,123,.22);-webkit-text-fill-color:rgba(233,199,123,.22);text-shadow:none}
.cl-rar{top:13px}
.cl-stats i{font-style:normal;font-weight:600;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(243,227,188,.6)}
@media (prefers-reduced-motion:reduce){.cl-trait.pouls,.cl.r4 .cl-trait.vif{animation:none}}

/* la révélation, refaite d'après l'interview (4 nov.) : la lumière de la rareté (Commune : blanc et or), la comète, l'alerte,
   le choc de chaque indice, la rue tracée en or, le silence avant le boum */
#reveal.r1::before{background:radial-gradient(circle at 50% 42%,rgba(255,236,190,.22),transparent 58%)}
#reveal.r2::before{background:radial-gradient(circle at 50% 42%,rgba(47,179,109,.3),transparent 58%)}
#reveal.r2 #rrayons{background:repeating-conic-gradient(from 0deg,rgba(140,230,180,.13) 0deg 1.2deg,rgba(140,230,180,0) 1.2deg 10deg)}
#reveal.choc::before{animation:choc .55s ease-out}
@keyframes choc{0%{opacity:1;transform:scale(1.25)}100%{opacity:.6;transform:scale(1)}}
#reveal.silence #rrayons{opacity:.25;transition:opacity .4s}
#reveal .sil.reg{fill:url(#rgDep);stroke:#F3D899;stroke-width:1.6}
#reveal .rue{fill:none;stroke:rgba(233,199,123,.32);stroke-linecap:round;stroke-linejoin:round}
#reveal .parcelle{fill:rgba(233,199,123,.18);stroke:#FFF1C9;stroke-width:1.8;vector-effect:non-scaling-stroke}
#reveal .bati{fill:rgba(233,199,123,.05);stroke:rgba(233,199,123,.75);stroke-width:1;vector-effect:non-scaling-stroke}
#reveal .bati.cible{fill:rgba(255,241,201,.55);stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 2px rgba(255,220,150,.9))}
#reveal .rue.loin,#reveal .bati.loin,#reveal .parcelle.loin{opacity:.35}
#reveal.rue .ring{animation-duration:.9s}
.comete{position:absolute;left:0;top:0;width:0;height:0;z-index:4;pointer-events:none;--c:#FFF1C9;--c2:#E9C77B;--L:150px;--e:5px;
  transform:translate(var(--x0),var(--y0)) rotate(var(--a));animation:comete var(--t) cubic-bezier(.55,0,.9,.6) forwards}
.comete::before{content:'';position:absolute;right:0;top:calc(var(--e) * -1);width:var(--L);height:calc(var(--e) * 2);border-radius:var(--e);background:linear-gradient(90deg,transparent,var(--c2) 60%,#fff);filter:blur(1px);box-shadow:0 0 18px 3px var(--c2)}
.comete::after{content:'';position:absolute;left:calc(var(--e) * -2.2);top:calc(var(--e) * -2.2);width:calc(var(--e) * 4.4);height:calc(var(--e) * 4.4);border-radius:50%;background:radial-gradient(circle,#fff 0,#fff 30%,var(--c) 55%,transparent 72%);box-shadow:0 0 26px 8px var(--c2)}
.comete.r2{--c:#C8F7DA;--c2:#2FB36D}.comete.r3{--c:#CFE6FF;--c2:#3D8BFF;--L:190px;--e:6px}.comete.r4{--c:#EBD6FF;--c2:#A35BFF;--L:230px;--e:7px}.comete.r5{--c:#FFE6B8;--c2:#FF8A1E;--L:280px;--e:9px}.comete.r6{--c:#FFDDF4;--c2:#FF4DC4;--L:300px;--e:10px}
@keyframes comete{0%{transform:translate(var(--x0),var(--y0)) rotate(var(--a));opacity:0}12%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--a));opacity:1}}
#ralerte{position:absolute;left:0;right:0;top:calc(30% - 34px);z-index:6;height:68px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;--c:#A35BFF;--c2:#EBD6FF;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 45%,transparent) 20%,color-mix(in srgb,var(--c) 60%,transparent) 50%,color-mix(in srgb,var(--c) 45%,transparent) 80%,transparent);
  border-top:1px solid color-mix(in srgb,var(--c2) 70%,transparent);border-bottom:1px solid color-mix(in srgb,var(--c2) 70%,transparent);transform:scaleX(0);transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .2s,top .6s ease,height .6s ease}
#ralerte.r5{--c:#FF8A1E;--c2:#FFE6B8}#ralerte.r6{--c:#FF4DC4;--c2:#FFF0A0}
#ralerte span{font-family:var(--panneau);font-weight:700;font-size:34px;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:#fff;text-shadow:0 0 16px var(--c),0 0 4px var(--c2);transition:font-size .6s ease,letter-spacing .6s ease}
#ralerte.on{opacity:1;transform:scaleX(1);animation:alerte .5s ease-in-out 3}
#ralerte.haut{top:calc(18px + env(safe-area-inset-top));height:30px;animation:none}
#ralerte.haut span{font-size:15px;letter-spacing:.5em}
@keyframes alerte{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.explo{left:50%;top:42%}
/* la carte en main se dessine en lumière : les filets du cadre se tracent, le contenu apparaît */
.c3d.materialise .cl-trait{stroke-dasharray:1300;stroke-dashoffset:1300;animation:cl-trace 1.3s ease-out .35s forwards}
.c3d.materialise .cl-nom,.c3d.materialise .cl-stats,.c3d.materialise .cl-rar{opacity:0;animation:cl-apparait .6s ease-out 1.2s forwards}
@keyframes cl-trace{to{stroke-dashoffset:0}}
@keyframes cl-apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.c3d .cl{width:100%;height:100%}
.c3d-avant{background:transparent;border:0}
@media (prefers-reduced-motion:reduce){.comete{display:none}#ralerte.on{animation:none}.c3d.materialise .cl-trait,.c3d.materialise .cl-nom,.c3d.materialise .cl-stats,.c3d.materialise .cl-rar{animation:none;opacity:1;stroke-dashoffset:0}}
/* le dos et la face ont la même forme de badge (coins coupés) ; le dos noir et or est traversé de fines lignes de lumière
   irisées qui glissent lentement (« or et hologramme mêlés », interview du 4 nov.) */
.c3d-dos,.c3d-avant{border-radius:0;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.c3d-dos::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-linear-gradient(118deg,transparent 0 22px,rgba(255,241,201,.16) 22px 23px,transparent 23px 46px),
    linear-gradient(118deg,rgba(255,120,170,.10),rgba(255,225,120,.10),rgba(120,220,180,.10),rgba(120,180,255,.10),rgba(200,140,255,.10));
  background-size:100% 100%,300% 300%;animation:dos-lignes 9s linear infinite}
@keyframes dos-lignes{from{background-position:0 0,0% 50%}to{background-position:0 0,100% 50%}}
.c3d.vue .c3d-avant{box-shadow:none}
@media (prefers-reduced-motion:reduce){.c3d-dos::after{animation:none}}

/* la plaque du nom ne touche jamais le cadre de la carte (remarque de Gautier) ; les noms longs se réduisent */
.cl-nom{left:20px;right:20px}
.cl-nom .plaque{max-width:100%;padding-left:20px;padding-right:20px}
.cl-nom .plaque.long{font-size:13px}.cl-nom .plaque.tres-long{font-size:11.5px}
/* plus de reflet irisé arc-en-ciel sur les cartes de lieu (trop « science-fiction ») : seule une lumière douce suit l'inclinaison */
.c3d .cl ~ .c3d-holo{display:none}
.c3d.vue .c3d-brillance{opacity:.55}
#reveal .sil.com.loin{fill-opacity:.1}
#reveal.rue::before{opacity:.5}

/* le pack d'essai, dans les Réglages (à retirer au lancement) */
.essais{margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--ciel)}
.essais b{font-family:var(--titre);font-size:15px}.essais small{display:block;color:var(--gris);font-size:12px;margin:2px 0 8px}
.essais .liste-btn{display:flex;flex-wrap:wrap;gap:6px}.essais .btn{flex:1 1 auto;font-size:14px;padding:8px 10px 6px}

/* ===================== la révélation sur la carte (4 nov. au soir, retours de Gautier) =====================
   La carte a une épaisseur (une tranche dorée) ; la pile ressemble à un paquet ; l'annonce (la carte de dos s'illumine et
   tremble) ; la révélation se joue sur sa face, étape par étape, avec des zooms fluides ; les noms claquent. */
.c3d-avant{transform:translateZ(3px)}.c3d-dos{transform:rotateY(180deg) translateZ(3px)}
.c3d-tranche{position:absolute;inset:0;transform:translateZ(var(--z));background:linear-gradient(90deg,#6B4E1C,#E9C77B 50%,#6B4E1C);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.c3d::after{bottom:-16px;height:22px;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent)}
/* l'annonce : le halo de la rareté derrière la carte, et la carte qui tremble (plus fort si c'est rare) */
.c3d-aura{position:absolute;left:-55%;top:-40%;width:210%;height:180%;pointer-events:none;opacity:0;transition:opacity .5s;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 85%,#fff) 0%,color-mix(in srgb,var(--rc) 55%,transparent) 35%,transparent 72%)}
.c3d.r1 .c3d-aura{background:radial-gradient(closest-side,rgba(255,241,201,.85) 0%,rgba(233,199,123,.4) 35%,transparent 72%)}
.c3d.annonce .c3d-aura{opacity:1;animation:aura .9s ease-in-out infinite}
.c3d.enscene .c3d-aura{opacity:.55}
@keyframes aura{0%,100%{transform:scale(.92)}50%{transform:scale(1.08)}}
.c3d.annonce{--amp:1px;animation:tremble .11s linear infinite}
.c3d.annonce.r3{--amp:2.2px}.c3d.annonce.r4{--amp:3.2px}.c3d.annonce.r5,.c3d.annonce.r6{--amp:4.5px}
@keyframes tremble{0%{translate:0 0}25%{translate:calc(var(--amp) * -1) calc(var(--amp) * .6)}50%{translate:var(--amp) calc(var(--amp) * -.5)}75%{translate:calc(var(--amp) * -.6) calc(var(--amp) * -.8)}100%{translate:0 0}}
.c3d.annonce .c3d-dos{box-shadow:inset 0 0 0 3px #08112B,inset 0 0 0 5px var(--rc),inset 0 0 0 9px #08112B,inset 0 0 0 10px color-mix(in srgb,var(--rc) 70%,#fff),inset 0 0 60px color-mix(in srgb,var(--rc) 55%,transparent)}
.c3d.r1.annonce .c3d-dos{box-shadow:inset 0 0 0 3px #08112B,inset 0 0 0 5px #E9C77B,inset 0 0 0 9px #08112B,inset 0 0 0 10px #FFF1C9,inset 0 0 60px rgba(255,236,190,.45)}
/* le fond de la scène : la lumière de la rareté derrière la carte, les bords qui s'assombrissent */
#pkfond{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s ease;
  background:radial-gradient(circle at 50% 46%,var(--lum,rgba(255,236,190,.3)) 0%,transparent 55%),radial-gradient(ellipse 75% 60% at 50% 46%,transparent 55%,rgba(0,0,0,.72) 100%)}
#packscene.revele #pkfond{opacity:1}
#packscene[data-r="2"]{--lum:rgba(47,179,109,.38)}#packscene[data-r="3"]{--lum:rgba(61,139,255,.42)}#packscene[data-r="4"]{--lum:rgba(163,91,255,.46)}#packscene[data-r="5"]{--lum:rgba(255,138,30,.5)}#packscene[data-r="6"]{--lum:rgba(255,77,196,.5)}
/* la couche des effets et des touchers par-dessus la carte (la révélation ne se joue plus en plein écran) */
#reveal.surcarte{background:transparent}#reveal.surcarte::before,#reveal.surcarte #rsvg,#reveal.surcarte #rrayons,#reveal.surcarte #rlabels{display:none}
#reveal.surcarte #rhint{bottom:calc(30px + env(safe-area-inset-bottom))}
/* la scène de la révélation, sur la face de la carte */
.rev-scene{position:absolute;inset:0;z-index:8;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .5s ease;
  background:radial-gradient(ellipse 90% 70% at 50% 46%,#16306A 0%,#0A1636 60%,#050B1E 100%);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.c3d.enscene .rev-scene{opacity:1}
.rev-scene.fin{opacity:0;transition:opacity .9s ease .1s}
.rev-plan{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform,opacity}
.rev-plan.premiere{animation:rev-premiere .7s ease-out}
@keyframes rev-premiere{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.rev-plan.entre{transition:transform .9s cubic-bezier(.55,.06,.22,1),opacity .4s ease}
.rev-plan.sort{transition:transform .9s cubic-bezier(.55,.06,.22,1),opacity .5s ease .4s}
.rev-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(233,199,123,.7),inset 0 0 40px rgba(0,0,0,.6)}
.rev-nom{position:absolute;left:8px;right:8px;top:44%;z-index:3;text-align:center;transform:translateY(-50%);opacity:0;pointer-events:none;
  font-family:var(--panneau);font-weight:700;font-size:30px;line-height:1.02;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(180deg,#FFF6DA 0%,#F6DC98 35%,#D9A548 62%,#FBE7A9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))}
.rev-nom.claque{animation:claque .95s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes claque{0%{opacity:0;transform:translateY(-50%) scale(2.3)}16%{opacity:1;transform:translateY(-50%) scale(.94)}24%{transform:translateY(-50%) scale(1.03)}32%{transform:translateY(-50%) scale(1)}74%{opacity:1;transform:translateY(-50%) scale(1)}100%{opacity:0;transform:translateY(-260%) scale(.5)}}
.rev-fil{position:absolute;left:10px;right:10px;top:13px;z-index:3;text-align:center;font-family:var(--panneau);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#F3D899;opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev-fil.arrive{animation:fil .35s ease-out forwards}
@keyframes fil{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.c3d.silence .rev-scene{filter:brightness(.55);transition:filter .5s}
.c3d.enscene{transition:transform .75s cubic-bezier(.2,.9,.25,1.05)}
@media (prefers-reduced-motion:reduce){.c3d.annonce{animation:none}.rev-plan.entre,.rev-plan.sort{transition:opacity .3s}.rev-nom.claque{animation:none;opacity:1}}

/* la carte plus marquée et plus riche (retours de Gautier, 4 nov. au soir : « traits trop fins », « pas assez riche ») */
.cl-trait{stroke-width:2.4}.cl-trait.epais{stroke-width:3.4}.cl-trait.fin{stroke-width:1.8}
.cl-trait.vif{filter:drop-shadow(0 0 4px var(--c2))}
.cl-rar{top:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700}
.cl-rar::before,.cl-rar::after{content:'';width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--c2))}.cl-rar::after{background:linear-gradient(90deg,var(--c2),transparent)}
.cl.r1 .cl-rar::before,.cl.r1 .cl-rar::after{background:linear-gradient(90deg,transparent,#E9C77B)}
/* la fenêtre du plan : un filet d'or gradué, comme le cadre d'une carte ancienne */
.cl-fenetre{position:absolute;left:14px;right:14px;top:30px;height:166px;z-index:2;pointer-events:none;border:1.5px solid rgba(233,199,123,.55);
  background:repeating-linear-gradient(90deg,rgba(233,199,123,.7) 0 1px,transparent 1px 12px) top/100% 5px no-repeat,repeating-linear-gradient(90deg,rgba(233,199,123,.7) 0 1px,transparent 1px 12px) bottom/100% 5px no-repeat,
    repeating-linear-gradient(0deg,rgba(233,199,123,.7) 0 1px,transparent 1px 12px) left/5px 100% no-repeat,repeating-linear-gradient(0deg,rgba(233,199,123,.7) 0 1px,transparent 1px 12px) right/5px 100% no-repeat}
.cl-vue{top:31px;left:15px;right:15px;width:calc(100% - 30px);height:164px}
.cl-rose{position:absolute;right:20px;top:36px;width:24px;height:24px;z-index:3;pointer-events:none}
.cl-rose path{fill:rgba(233,199,123,.55)}.cl-rose path.n{fill:#FFF1C9}.cl-rose circle{fill:#E9C77B}
.cl-stats{border-top:1.5px solid rgba(233,199,123,.5)}
.cl-stats b{font-size:21px}.cl-stats i{font-size:9.5px;color:rgba(243,227,188,.75)}

/* ===================== fluidité de l'ouverture (4 nov. au soir : « l'ouverture lag trop ») =====================
   Mesuré au téléphone simulé : les six cartes empilées par carte pour l'épaisseur (trente grandes images à composer), le dos
   animé en continu, les mélanges de couleurs et les filtres de lueur faisaient tomber la révélation à 2-3 images par
   seconde. Remplacés par des équivalents légers. */
.c3d-tranche{display:none}
.c3d-bord{position:absolute;background:linear-gradient(90deg,#6B4E1C,#E9C77B 50%,#6B4E1C);pointer-events:none}
.c3d-bord.haut,.c3d-bord.bas{left:16px;right:16px;height:6px}.c3d-bord.haut{top:-3px;transform:rotateX(90deg)}.c3d-bord.bas{bottom:-3px;transform:rotateX(90deg)}
.c3d-bord.gauche,.c3d-bord.droite{top:16px;bottom:16px;width:6px;background:linear-gradient(0deg,#6B4E1C,#E9C77B 50%,#6B4E1C)}.c3d-bord.gauche{left:-3px;transform:rotateY(90deg)}.c3d-bord.droite{right:-3px;transform:rotateY(90deg)}
.c3d-dos::after{animation:none;mix-blend-mode:normal;opacity:.35}
.c3d-brillance{mix-blend-mode:normal;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 30%,transparent 65%)}
.c3d.vue .c3d-brillance{opacity:1}
.cl-trait.vif{filter:none}.cl-trait.halo{stroke:var(--c2);stroke-width:7;opacity:.22}.cl.r1 .cl-trait.halo{opacity:0}
.cl.r4 .cl-trait.vif:not(.epais){animation:none}
.c3d.silence .rev-scene{filter:none}.rev-sombre{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none;transition:opacity .5s}.c3d.silence .rev-sombre{opacity:.45}
#ralerte.on{animation:none}
.explo .eclat{left:-50vmax;top:-50vmax;width:100vmax;height:100vmax}
.c3d-aura{will-change:transform,opacity}
/* les noms qui claquent : clairs et lisibles sur la carte sombre (remarque de Gautier), sur un bandeau sombre */
.rev-nom{filter:none;background:none;color:#FFF8E6;-webkit-text-fill-color:#FFF8E6;font-size:31px;text-shadow:0 0 18px rgba(255,214,140,.85),0 2px 0 rgba(0,0,0,.6)}
.rev-nom span{display:inline-block;padding:8px 14px 6px;background:linear-gradient(90deg,transparent,rgba(5,11,30,.82) 15%,rgba(5,11,30,.82) 85%,transparent);border-top:1.5px solid rgba(255,214,140,.75);border-bottom:1.5px solid rgba(255,214,140,.75)}
.rev-fil{color:#FFF1C9;font-size:13px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.9);background:linear-gradient(90deg,transparent,rgba(5,11,30,.75) 20%,rgba(5,11,30,.75) 80%,transparent);padding:3px 0}
.cl-moteur{pointer-events:none}

/* ===================== les coins arrondis, le dos premium, la roulette (4 nov. au soir, retours de Gautier) ===================== */
.cl,.c3d-dos,.c3d-avant,.rev-scene{clip-path:none;border-radius:14px;overflow:hidden}
.c3d-bord.haut,.c3d-bord.bas{left:14px;right:14px}.c3d-bord.gauche,.c3d-bord.droite{top:14px;bottom:14px}
.c3d-dos{background:var(--dos-carte,linear-gradient(160deg,#17326F,#050B1E)) center/100% 100% no-repeat,#0B1738;box-shadow:none}
.c3d-dos::after{display:none}
.c3d.annonce .c3d-dos{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 80%,#fff),inset 0 0 50px color-mix(in srgb,var(--rc) 60%,transparent)}
.c3d.r1.annonce .c3d-dos{box-shadow:inset 0 0 0 2px #FFF1C9,inset 0 0 50px rgba(255,236,190,.45)}
.rev-plan canvas{position:absolute;left:0;top:0;width:100%;height:100%}
.rev-case{opacity:0;transition:opacity .09s linear}.rev-case.on{opacity:1}

/* ===================== la collection aux nouvelles cartes (4 nov. au soir) =====================
   La grille du Patrimoine montre les mêmes badges que le pack, à l'échelle de la colonne (--k) ; la carte touchée s'ouvre en
   grand en haut de sa fiche : on l'incline au doigt, sa maquette tourne. */
.collection{gap:12px 10px}
.ccl{position:relative;aspect-ratio:240/350;cursor:pointer;border-radius:calc(14px * var(--k,.7));box-shadow:0 6px 16px rgba(5,11,30,.35);-webkit-tap-highlight-color:transparent}
.ccl:active{transform:translateY(2px)}
.ccl-in{position:absolute;left:0;top:0;width:240px;height:350px;transform-origin:0 0;transform:scale(var(--k,.7))}
.ccl .niv{position:absolute;right:6%;top:9%;z-index:6;width:26px;height:26px;border-radius:50%;background:#0B1738;border:1.5px solid #E9C77B;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ccl .vente{position:absolute;z-index:6;left:-6px;top:38%;background:#E4573D;color:#fff;font-family:var(--panneau);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:0 6px 6px 0;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.cl-grand{display:flex;justify-content:center;perspective:900px;margin:-4px 0 14px;touch-action:none}
.cl-grand-in{position:relative;width:240px;height:350px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.9,.3,1.2);border-radius:14px;box-shadow:0 16px 34px rgba(5,11,30,.45)}
.cl-grand-in.libre{transition:transform .06s linear}
.cl-grand-lumiere{position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.2),rgba(255,255,255,.05) 30%,transparent 65%)}
@media (max-width:360px){.cl-grand-in{transform:scale(.9) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}

/* ===================== le cadre des cartes (4 nov. au soir : « supprime les cadres qui rentrent et qui sortent de la carte ») =====================
   Un seul filet au bord, à la couleur de la rareté (or pour les Communes). Pas de « vector-effect:non-scaling-stroke » : dans
   une carte réduite (collection), Chrome sur Android dessinait alors le filet plus petit, décalé vers le haut à gauche. */
.cl-trait{vector-effect:none}
.cl-trait.bord{stroke:var(--c2);stroke-width:2.8}

/* ===================== la caisse de travaux (le Maire, 4 nov. 2026, GDD § 5) ===================== */
.maire-gain{margin:8px 0 0;padding:8px 10px;border-radius:12px;background:var(--piece-clair);color:#7A5200}
.caisse{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--ciel)}
.caisse-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.caisse-fin{font-family:var(--titre);font-weight:800;font-size:14px;color:var(--plaque);white-space:nowrap}
.caisse-total{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:12px;background:var(--ciel);font-weight:800}
.caisse-total b{font-family:var(--titre);font-size:18px}
.m.petit{font-size:12px;margin-top:8px;opacity:.8}

/* ===================== la face cachée jusqu'à la révélation (4 nov. au soir) =====================
   Gautier : « on aperçoit brièvement, avant la carte de France, le modèle 3D de l'adresse ». La maquette est préparée à
   l'avance sur la face (fluidité) ; le voile de la révélation apparaissait en fondu (0,5 s) au retournement, et la maquette
   transparaissait. Le voile est désormais opaque dès le départ ; il ne s'efface qu'à la fin de la révélation. */
.c3d .rev-scene{opacity:1;transition:none}
.c3d .rev-scene.fin{opacity:0;transition:opacity .9s ease .1s}

/* ===================== les saisons et les classements (4 nov. au soir, GDD § 5 bis) ===================== */
.saison-carte{display:block;width:100%;text-align:left;border:none;cursor:pointer;font:inherit;color:inherit;background:linear-gradient(135deg,#fff 0%,var(--piece-clair) 100%)}
.saison-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.saison-rangs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 6px}
.saison-rangs>div{background:#fff;border-radius:14px;padding:8px 10px;box-shadow:0 1px 0 rgba(13,27,62,.06)}
.saison-rangs small{display:block;font-weight:800;font-size:12px;color:var(--gris)}
.saison-rangs b{display:block;font-family:var(--titre);font-weight:800;font-size:26px;line-height:1.1;color:var(--plaque)}
.saison-rangs i{display:block;font-style:normal;font-size:12px;color:var(--gris)}
.saison-voir{display:block;text-align:right;font-weight:800;font-size:13px;color:var(--plaque)}
.onglets-classement{margin-top:8px}
.saison-passee{padding:10px 0;border-bottom:1.5px solid var(--ciel)}
.podiums{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.podiums small{display:block;font-weight:800;font-size:12px;color:var(--gris);margin-bottom:2px}
.pod{display:flex;gap:4px;align-items:baseline;font-size:13px}.pod span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plaques-saison{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.plaque-saison{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:linear-gradient(90deg,#F7E7B8,#FFF6DA);color:#6B4A00;font-weight:800;font-size:13px}
.plaque-saison span{flex:1}

/* ===================== l'entretien des monuments (4 nov. au soir, GDD § 5 ter) ===================== */
.stat.rouge b{color:#C2412D}
.card.entretien{border:2px solid var(--piece-clair)}
.card.entretien.impaye{border-color:#E4573D;background:#FFF4F1}
.alerte-impaye{color:#B23A22;font-weight:800}

/* ===================== la boutique et les gemmes (4 nov. au soir, GDD § 3 et § 9) ===================== */
.pills-droite{display:flex;gap:6px;align-items:center}
.pill.gemmes{padding:6px 10px 6px 8px;gap:4px}
.pill.gemmes .gem{font-style:normal;font-size:18px;line-height:1}
.pill.gemmes b{font-family:var(--titre);font-weight:800;font-size:17px;color:#5B3FB0;line-height:1}
.article{background:var(--ciel);border-radius:16px;padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.article .m{margin:0}
.article.pass{background:linear-gradient(135deg,#FFF6DA,#F7E7B8)}
.pass-actif{font-weight:800;color:#6B4A00}
.gemmes-offres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.offre-gemmes{border:0;border-radius:14px;background:#fff;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font:inherit;box-shadow:0 1px 0 rgba(13,27,62,.08)}
.offre-gemmes b{font-family:var(--titre);font-size:16px;color:#5B3FB0}.offre-gemmes small{font-weight:800;color:var(--gris)}
.probas{margin-top:6px}.proba{display:inline-flex;align-items:center;gap:4px;margin:0 10px 4px 0;white-space:nowrap}
.proba .dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--rc,#ccc)}
.proba.r1 .dot{background:#B9B9B9}.proba.r2 .dot{background:#2FB36D}.proba.r3 .dot{background:#3D8BFF}.proba.r4 .dot{background:#A35BFF}.proba.r5 .dot{background:#FF8A1E}

/* ===================== vendre et offrir en pièces ou en gemmes (4 nov. au soir, GDD § 9) ===================== */
.devises{display:flex;gap:6px;margin:8px 0}
.devises button{flex:1;border:2px solid var(--ciel);background:#fff;border-radius:12px;padding:8px 6px;font:inherit;font-weight:800;cursor:pointer;color:var(--encre)}
.devises button.on{border-color:var(--plaque);background:var(--plaque-clair);color:var(--plaque)}
.devises.petit button{padding:6px 4px;font-size:13px}
.gem-in{font-style:normal;margin-left:2px}

/* ===================== payer des gemmes par carte (Stripe, GDD § 9) ===================== */
.consentement{display:flex;gap:10px;align-items:flex-start;background:var(--ciel);border-radius:14px;padding:12px;margin:12px 0;font-weight:700;font-size:14px;line-height:1.35;cursor:pointer}
.consentement input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--plaque)}

/* ===================== la sortie des cartes et la pile (5 nov., retour de Gautier) =====================
   Les cartes montent hors du sachet (cachées sous sa ligne d'ouverture), puis le sachet tombe, puis la pile se pose ;
   la pile se lit comme un paquet : décalage régulier, cartes du dessous plus sombres, une tranche sous la dernière. */
.c3d.montee{transition:transform .78s cubic-bezier(.2,.75,.25,1)}
.c3d.sans-transition{transition:none!important}
.c3d.dessous .c3d-dos{background:linear-gradient(rgba(3,6,16,.3),rgba(3,6,16,.3)),var(--dos-carte,linear-gradient(160deg,#17326F,#050B1E)) center/100% 100% no-repeat,#0B1738;
  box-shadow:0 0 0 1.5px rgba(233,199,123,.8)}
.c3d.socle .c3d-dos{box-shadow:0 0 0 1.5px rgba(233,199,123,.8),0 4px 0 #040A1C,0 5.5px 0 rgba(233,199,123,.55),0 9px 0 #040A1C,0 10.5px 0 rgba(233,199,123,.35)}

/* ===================== le style façon Pokémon TCG Pocket (5 nov. 2026 ; docs/DESIGN.md, bible graphique § 12) =====================
   Gautier, après cinq preuves (« nuit et or » : « trop basique, on dirait une appli de réservation d'hôtel » ; « Clash Royale
   en plus riche » puis deux versions moins cartoon : « moins de couleurs, on dirait un jeu Roblox ») : les menus de Pokémon
   TCG Pocket. Blanc et gris perle, une seule couleur pour les boutons importants (le bleu de la plaque), la barre du bas
   blanche, des icônes au trait d'une seule couleur (src/icones.js). Le jeu se voit dans les cartes, la carte de la ville et
   la plaque de rue, pas dans les menus. La classe pocket est posée sur <html> (index.html) : ces règles l'emportent sur
   celles d'avant, qui restent dessous. */
.ico-svg{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;flex:none}
ico-t{display:contents}
html.pocket #accueil{background:radial-gradient(circle at 50% 42%,#FFFFFF 0,#F3F5F9 55%,#E6EBF3 100%)}
/* les cartes et l'ouverture du pack gardent leur police ronde (un moment de jeu) */
.c3d,.rcard,.art,.ccarte,#packscene,#reveal{--titre:'Baloo 2',ui-rounded,system-ui,sans-serif}
html.pocket{
  --encre:#1F2633; --encre2:#495266; --gris:#7C8598; --trait:#E6EAF1; --ciel:#F3F5F9; --blanc:#fff;
  --accent:#2453B3; --accent2:#1A3F8C; --accent-clair:#EAF0FB;
  --plaque:#2453B3; --plaque2:#1A3F8C; --plaque-clair:#EAF0FB; --piece-clair:#F4F6FA;
  --titre:'Nunito',system-ui,sans-serif;
  --ombre:0 1px 2px rgba(20,30,60,.04),0 6px 18px rgba(20,30,60,.06); --ombre-forte:0 18px 44px rgba(20,30,60,.18);
  --nuance:#F6F8FB;
}
html.pocket,html.pocket body{background:var(--ciel);color:var(--encre)}
html.pocket h1,html.pocket h2,html.pocket h3{font-family:var(--titre);font-weight:900;letter-spacing:-.01em;color:var(--encre)}
html.pocket a{color:var(--accent)}

/* le fond : gris perle, un fin motif de lignes */
html.pocket .screen{background:repeating-linear-gradient(135deg,rgba(31,38,51,.022) 0 1px,transparent 1px 13px),linear-gradient(180deg,#F8F9FC 0%,#EEF1F6 100%)}
html.pocket .screen h1{font-size:28px;font-weight:900;letter-spacing:-.015em}
html.pocket .screen h2.section{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin:22px 4px 9px}
html.pocket .screen h2.section.flex{text-transform:none;letter-spacing:-.01em;font-size:19px;color:var(--encre);font-weight:900}

/* les panneaux : blancs, un bord fin, une ombre douce */
html.pocket .card,html.pocket .kpi,html.pocket .notif{background:#fff;border:1px solid var(--trait);border-radius:18px;box-shadow:var(--ombre)}
html.pocket .card .t{font-weight:900}
html.pocket .card .m{color:var(--gris);font-weight:600}
html.pocket .kpi small{color:var(--gris);font-weight:700}
html.pocket .kpi b{font-weight:900;font-size:21px}
html.pocket .kpi i{color:var(--accent);font-size:22px}
html.pocket .kpi i .ico-svg{width:24px;height:24px}

/* les boutons : un seul accent (le bleu de la plaque) ; les autres blancs */
html.pocket .btn{background:linear-gradient(180deg,#3567D0 0%,#2453B3 55%,#1E4598 100%);color:#fff;border:0;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px rgba(36,83,179,.28);font-family:var(--titre);font-weight:800;letter-spacing:.005em;padding:11px 16px}
html.pocket .btn:active:not(:disabled){transform:scale(.98);border-bottom-width:0}
html.pocket .btn.vert,html.pocket .btn.sm.vert,html.pocket .btn.bleu,html.pocket .btn.sm.bleu,html.pocket .btn.sm.next{background:linear-gradient(180deg,#3567D0 0%,#2453B3 55%,#1E4598 100%);color:#fff;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 12px rgba(36,83,179,.25)}
html.pocket .btn.clair,html.pocket .btn.ghost,html.pocket .btn.sm{background:#fff;color:var(--encre);border:1px solid #D9DFEA;box-shadow:0 1px 2px rgba(20,30,60,.06)}
html.pocket .btn.sm{padding:7px 12px;border-radius:12px}
html.pocket .btn.danger,html.pocket .btn.sm.danger{background:#fff;color:#C2412D;border:1px solid #F0D3CC;box-shadow:none}
html.pocket .btn:disabled{filter:grayscale(1);opacity:.45}
html.pocket .close,html.pocket .fermer-commune{background:#F1F3F7;color:var(--encre);border:0;font-weight:700}

/* la barre du haut, sur la carte : du blanc, des ombres douces */
html.pocket .pill,html.pocket #search,html.pocket .rond,html.pocket .seg,html.pocket #bnorth,html.pocket #bprom,html.pocket #legend,html.pocket #charge{background:rgba(255,255,255,.96);border:0;box-shadow:0 2px 10px rgba(20,30,60,.14)}
html.pocket .moi .av{background:var(--accent-clair);border:2px solid #fff;box-shadow:0 0 0 1.5px #D9DFEA}
html.pocket .moi-t b,html.pocket .bourse b,html.pocket .pill.gemmes b{font-family:var(--titre);font-weight:900;color:var(--encre)}
html.pocket .pill.gemmes .gem{color:var(--accent)}
html.pocket .gain{background:var(--accent-clair);color:var(--accent);font-weight:800}
html.pocket #search .loupe{color:var(--gris);opacity:1}
html.pocket #search button{background:var(--accent);border:0;border-radius:11px;font-family:var(--titre);font-weight:800}
html.pocket #search:focus-within{border:0;box-shadow:0 0 0 2px var(--accent),0 2px 10px rgba(20,30,60,.14)}
html.pocket .rond,html.pocket #bnorth,html.pocket #bprom{color:var(--encre)}
html.pocket #bnorth{color:var(--accent);font-family:var(--titre);font-weight:900}
html.pocket .rbtn{font-family:var(--titre);font-weight:800}
html.pocket .rbtn.on{background:var(--accent);box-shadow:none}
html.pocket .cnt{background:#E5484D;border-color:#fff;font-family:var(--titre);font-weight:800}
html.pocket #legend .titre-legende{font-family:var(--titre)}

/* la barre du bas : blanche, des icônes simples, l'onglet ouvert en bleu */
html.pocket #nav{background:#fff;border-top:1px solid var(--trait);box-shadow:0 -4px 18px rgba(20,30,60,.06);border-radius:0}
html.pocket #nav button{color:#8A93A6;font-family:var(--titre);font-weight:800;font-size:11px}
html.pocket #nav button i{filter:none;color:#8A93A6;width:52px;height:30px}
html.pocket #nav button i .ico-svg{width:24px;height:24px}
html.pocket #nav button.on{color:var(--accent)}
html.pocket #nav button.on i{color:var(--accent);background:var(--accent-clair);transform:none}
html.pocket .pack-rond{background:linear-gradient(180deg,#3A6CD6 0%,#2453B3 60%,#1E4598 100%);border:4px solid #fff;box-shadow:0 6px 16px rgba(36,83,179,.38);color:#fff;overflow:hidden;position:relative}
html.pocket .pack-rond .ico-svg{width:30px;height:30px}
html.pocket .pack-nav .pack-t{color:var(--accent);font-family:var(--titre);font-weight:900}
html.pocket .pack-nav.attente .pack-rond{background:#EEF1F6;box-shadow:0 3px 10px rgba(20,30,60,.12);color:#9AA3B5;filter:none}
html.pocket .pack-nav.attente .pack-t{color:var(--gris);font-family:var(--titre);font-weight:800}
/* le pack prêt : un reflet qui passe (le seul mouvement de la barre) */
html.pocket .pack-nav.pret .pack-rond{animation:none}
html.pocket .pack-nav.pret .pack-rond::after{content:'';position:absolute;inset:-4px;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;animation:reflet-pack 2.8s ease-in-out infinite}
@keyframes reflet-pack{0%,45%{background-position:130% 0}100%{background-position:-40% 0}}
@media (prefers-reduced-motion:reduce){html.pocket .pack-nav.pret .pack-rond::after{animation:none}}

/* la fiche d'un lieu et le détail d'une carte */
html.pocket #sheet{background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(20,30,60,.16)}
html.pocket #sheet::before{background:#D5DBE5}
html.pocket .svwrap{border-radius:16px;box-shadow:0 0 0 1px var(--trait)}
html.pocket .addr{background:#fff;border:1px solid var(--trait);border-radius:20px;box-shadow:inset 0 3px 0 color-mix(in srgb,var(--rc,#D9DFEA) 80%,#fff),var(--ombre)}
html.pocket .addr.r6{border:1px solid var(--trait);background:#fff;box-shadow:var(--ombre)}
html.pocket .addr.r6::before{content:'';position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--arc)}
html.pocket .addr .n{font-family:var(--titre);font-weight:900}
html.pocket .addr .m{color:var(--gris);font-weight:700}
html.pocket .ico-lieu,html.pocket .ico-lieu.r6{background:var(--nuance);border:1px solid var(--trait);box-shadow:none;border-radius:16px;color:var(--encre)}
html.pocket .tag{background:#F1F3F7;color:var(--encre2);font-weight:800}
html.pocket .tag.r1,html.pocket .tag.r2,html.pocket .tag.r3,html.pocket .tag.r4,html.pocket .tag.r5{background:color-mix(in srgb,var(--rc) 12%,#fff);color:var(--rc2)!important}
html.pocket .tag.r6{background:#F4EEFF;color:#6B2A9E!important}
html.pocket .own{font-weight:800}
html.pocket .own.me{background:var(--accent-clair);color:var(--accent)}
html.pocket .own.other,html.pocket .own.libre{background:#F1F3F7;color:var(--encre2)}
html.pocket .stats{gap:8px}
html.pocket .stat,html.pocket .stat.or,html.pocket .stat.vert{background:var(--nuance);border:1px solid #E9EDF3;border-radius:14px}
html.pocket .stat>span{color:var(--gris);font-weight:800;letter-spacing:.08em;font-size:10.5px}
html.pocket .stat b,html.pocket .stat.or b,html.pocket .stat.vert b{font-family:var(--titre);font-weight:900;color:var(--encre)}
html.pocket .stat.rouge b{color:#C2412D}
html.pocket .stat .etoiles{color:var(--accent)} html.pocket .stat .etoiles i{color:#D3DAE6}
html.pocket .facteurs{color:var(--gris)}
html.pocket .addr .actions,html.pocket .addr .offre{border-top:1px solid var(--trait)}
/* l'échelle : un fil, des ronds au trait ; ce qui est fait en bleu */
html.pocket .echelle .pas{color:var(--gris);font-weight:800}
html.pocket .echelle .pas::before{height:2px;top:19px;background:#E2E7EF}
html.pocket .echelle.longue .pas::before{top:16px}
html.pocket .echelle .pas.fait::before{background:var(--accent)}
html.pocket .echelle .rond-pas{background:#fff;border:1.5px solid #D9DFEA;color:var(--encre2)}
html.pocket .echelle .rond-pas .ico-svg{width:20px;height:20px}
html.pocket .echelle .pas.fait .rond-pas{background:var(--accent);border-color:var(--accent);color:#fff}
html.pocket .echelle .pas.fait{color:var(--accent)}
html.pocket .echelle .pas.suivant .rond-pas{background:#fff;border:2px solid var(--accent);color:var(--accent);animation:appel-pocket 2s ease-in-out infinite}
html.pocket .echelle .pas.suivant{color:var(--accent)}
@keyframes appel-pocket{0%,100%{box-shadow:0 0 0 0 rgba(36,83,179,.3)}50%{box-shadow:0 0 0 6px rgba(36,83,179,0)}}
html.pocket .echelle .pas.bloque .rond-pas{opacity:.5;filter:none}
html.pocket .raccourci{background:var(--nuance);border:1px solid #E9EDF3}
html.pocket .raccourci b{font-family:var(--titre);font-weight:900}
html.pocket input.txt,html.pocket input.num,html.pocket .champ-prix{border:1px solid #D9DFEA;box-shadow:none;border-radius:14px}
html.pocket input.txt:focus,html.pocket input.num:focus{border-color:var(--accent)}
html.pocket .vente-valeur,html.pocket .prix-vente,html.pocket .maire-gain{background:var(--nuance);color:var(--encre)}
html.pocket .filtre{background:#fff;border:1px solid #D9DFEA;color:var(--encre2);font-weight:800}
html.pocket .filtre.on{background:var(--encre);border-color:var(--encre);color:#fff}
html.pocket .chip,html.pocket .chip.or,html.pocket .chip.vert,html.pocket .chip.bleu{background:var(--nuance);color:var(--encre2)}

/* fenêtres, notifications, listes */
html.pocket #modal{background:rgba(20,28,45,.42)}
html.pocket #modal .box{border-radius:24px;border:0;box-shadow:var(--ombre-forte)}
html.pocket #modal .box h2{font-family:var(--titre);font-weight:900}
html.pocket .notif .ico{background:var(--nuance);border:1px solid #E9EDF3;color:var(--encre);border-radius:14px}
html.pocket .notif.unread{box-shadow:inset 3px 0 0 var(--accent),var(--ombre)}
html.pocket .notif .quand{color:var(--gris);font-weight:700}
html.pocket .offre-valeur{background:var(--nuance)}
html.pocket .offre-valeur .ecart.plus{background:#E8F5EE;color:#237A4B}
html.pocket .offre-valeur .ecart.moins{background:#FBEFE6;color:#A45A1C}
html.pocket .rank.moi{background:var(--accent-clair)}
html.pocket .bar{background:#E9EDF3} html.pocket .bar i{background:var(--accent)}
html.pocket .sw input:checked{background:var(--accent)}
html.pocket .sw.mode{background:var(--nuance)}
html.pocket .compte-a-rebours{background:var(--encre);font-family:var(--titre);font-weight:800}
html.pocket .lot .mise{font-family:var(--titre);font-weight:900}
html.pocket .lot summary{color:var(--accent)}
html.pocket .card.lot.nat{border:1px solid var(--trait);background:#fff;animation:none;position:relative;overflow:hidden}
html.pocket .card.lot.nat::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--arc)}
html.pocket .card.lot.r6:not(.nat){border:1px solid var(--trait)}
html.pocket .ligne-commune .nom,html.pocket .sugg-commune .nom{font-weight:900}
html.pocket .ligne-commune .chevron{color:#B4BCCB}
html.pocket .sugg-commune .maire-mini{background:var(--nuance);color:var(--encre2)}
html.pocket .saison-carte{background:#fff!important}
html.pocket .saison-rangs>div{background:var(--nuance);border:1px solid #E9EDF3;box-shadow:none}
html.pocket .saison-rangs b{font-family:var(--titre);font-weight:900;color:var(--accent)}
html.pocket .saison-voir,html.pocket .caisse-fin{color:var(--accent)}
html.pocket .plaque-saison{background:var(--nuance);color:var(--encre)}
html.pocket .card.entretien{border:1px solid var(--trait)}
html.pocket .article,html.pocket .article.pass{background:var(--nuance);border:1px solid #E9EDF3}
html.pocket .offre-gemmes{border:1px solid #E9EDF3;box-shadow:none}
html.pocket .offre-gemmes b{color:var(--accent)}
html.pocket .devises button.on{border-color:var(--accent);background:var(--accent-clair);color:var(--accent)}
html.pocket .recolte{color:var(--accent);font-family:var(--titre);font-weight:900}
html.pocket .profil-tete .av{border:3px solid #fff;box-shadow:0 0 0 1.5px #D9DFEA,0 8px 20px rgba(20,30,60,.12);background:var(--accent-clair)}
html.pocket .avgrid button.on,html.pocket .raisons button.on{border-color:var(--accent);background:var(--accent-clair)}
html.pocket .cel-pt{background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.3)}
html.pocket .cel-nom{background:#fff;color:var(--encre);border:0;outline:0;box-shadow:0 2px 8px rgba(0,0,0,.25);font-family:var(--titre);font-weight:900}
html.pocket .mlabel{background:#fff;color:var(--encre);font-family:var(--titre);font-weight:900}
html.pocket #toast{border-radius:16px}
html.pocket select{background:#fff;border:1px solid #D9DFEA;border-radius:12px;padding:8px 10px;font-family:var(--texte);font-weight:700;font-size:15px;color:var(--encre)}

/* ===================== le logo de CityDeck (5 nov. 2026 : le modèle de Gautier, redessiné en SVG, src/logo.js) ===================== */
.logo-jeu svg{display:block;width:100%;height:auto}
#accueil .logo-jeu{width:min(84vw,380px);filter:drop-shadow(0 12px 22px rgba(20,30,60,.18));animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.logo-jeu.petit{width:210px;margin:-4px auto 6px}
.points-charge{display:flex;gap:9px}
.points-charge i{width:10px;height:10px;border-radius:50%;background:var(--accent,#2453B3);animation:point-charge 1.1s ease-in-out infinite}
.points-charge i:nth-child(2){animation-delay:.15s}.points-charge i:nth-child(3){animation-delay:.3s}
@keyframes point-charge{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.points-charge i{animation:none;opacity:.6}}

/* ===================== le choix de la région du pack régional (5 nov., Gautier : « le menu déroulant est trop basique ») ===================== */
.choix-region{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 2px}
.cr-carte{width:min(100%,250px);height:auto;display:block}
.cr-region path{stroke:#fff;stroke-width:.5;stroke-linejoin:round;cursor:pointer;transition:fill .15s}
.cr-region.t0 path{fill:#DCE4F2}.cr-region.t1 path{fill:#CCD8EE}.cr-region.t2 path{fill:#E4EAF5}.cr-region.t3 path{fill:#D3DDF0}
.cr-region.on path{fill:var(--accent,#2453B3);stroke:#fff;stroke-width:.6}
.cr-nom{font-family:var(--titre);font-weight:900;font-size:17px;color:var(--accent,#2453B3);min-height:22px}
.cr-liste{display:flex;gap:6px;overflow-x:auto;max-width:100%;padding:2px 2px 6px;scrollbar-width:none}
.cr-liste::-webkit-scrollbar{display:none}
.cr-liste button{flex:none;border:1px solid #D9DFEA;background:#fff;border-radius:999px;padding:6px 11px;font-family:var(--texte);font-weight:800;font-size:13px;color:var(--encre2);cursor:pointer}
.cr-liste button.on{background:var(--accent,#2453B3);border-color:var(--accent,#2453B3);color:#fff}
/* le trophée des classements, en haut de la carte (5 nov.) */
#trophee{color:#C98A12}
#trophee .ico-svg{width:24px;height:24px}
.onglets-classement .filtre .pc{width:15px;height:15px}
/* ===================== la barre du haut tient sur tous les téléphones (5 nov., Gautier : « certains boutons sont rognés ») =====================
   Chaque élément peut rétrécir au lieu de sortir de l'écran (la recherche d'abord, puis le pseudo, coupé par « … ») ; si cela
   ne suffit pas (texte agrandi dans les réglages du téléphone), index.html serre la barre d'un cran (classes serre1 à serre3). */
:root{color-scheme:only light}
#top .row,#top .barre{min-width:0;max-width:100%}
#top .pill.moi{flex:0 1 auto;min-width:0;overflow:hidden}
#top:not(.serre2) .pill.moi{min-width:118px}
#top .moi-t{min-width:0;overflow:hidden}
#top .moi-t b,#top .moi-t small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#top .pills-droite{flex:0 0 auto;min-width:0}
#top .pill.gemmes,#top .pill.bourse,#top .barre .rond{flex:none}
#top #search{min-width:0}
#top #search input{width:100%;min-width:0}
#top.serre1 .moi-t small{display:none}
#top.serre1 .pill{padding-right:9px}
#top.serre1 .rond{width:44px;height:44px}
#top.serre1 .row,#top.serre1 .barre,#top.serre1 .pills-droite{gap:6px}
#top.serre2 .moi-t{display:none}
#top.serre2 .pill.moi{padding:4px}
#top.serre2 .pill.moi{flex:none}
#top.serre3 .gain{display:none}
#top.serre4 .bourse b,#top.serre4 .pill.gemmes b{font-size:15px}
#top.serre4 .bourse .pc{width:20px;height:20px}
#top.serre4 .pill.bourse,#top.serre4 .pill.gemmes{padding:5px 8px 5px 6px;gap:4px}
#top.serre4 .pill.gemmes{flex:0 1 auto;min-width:0;overflow:hidden}
/* le choix de la langue (réglages, 5 nov.) */
.sw.langue .choix-langue{display:flex;gap:6px;margin:0;flex:none}
.sw.langue .choix-langue button{flex:none;min-width:84px}
/* le choix de la langue sur l'écran de compte (avant les réglages) */
.cpt-langue{display:flex;justify-content:center;gap:6px;margin:14px 0 0}
.cpt-langue button{border:0;background:none;font:inherit;font-weight:800;font-size:13px;color:var(--gris,#7C8598);padding:4px 10px;border-radius:999px;cursor:pointer}
.cpt-langue button.on{background:var(--accent-clair,#EAF0FB);color:var(--accent,#2453B3)}