/* Fiche de voix : verre dépoli, accent hérité de l'univers du personnage. */
#overlay:has(.fiche-voix) .scrim{background:rgba(23,36,56,.28);backdrop-filter:blur(8px) saturate(.85);-webkit-backdrop-filter:blur(8px) saturate(.85)}
.modal.fiche-voix{--fiche-accent:#0A74FF;--fiche-encre:var(--fiche-texte-clair,var(--brand-t));width:min(620px,100%);max-height:min(88dvh,890px);display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb,var(--card) 85%,transparent);border-radius:30px;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--fiche-accent) 14%,transparent),transparent 55%),radial-gradient(ellipse at 100% 70%,#5bddce0b,transparent 55%),color-mix(in srgb,var(--card) 87%,transparent);backdrop-filter:blur(32px) saturate(1.5);-webkit-backdrop-filter:blur(32px) saturate(1.5);box-shadow:0 30px 90px -30px #12253f66,0 8px 24px -16px #14253644,inset 0 1px 1px #fff,inset 0 -1px 1px #ffffff80;color:var(--ink);font:400 12px/1.7 'Montserrat',var(--ui);isolation:isolate}
.fiche-voix .modal-h{position:relative;flex:none;padding:24px 26px 20px;gap:16px;border:0;background:transparent;align-items:center}
.fiche-voix .portrait{width:68px;height:76px;flex:none;border-radius:20px;background:linear-gradient(145deg,#ffffffc9,color-mix(in srgb,var(--fiche-accent) 16%,var(--card)));border:1px solid #ffffffdb;box-shadow:0 8px 18px -12px var(--fiche-accent),inset 0 1px #fff}
.fiche-voix .portrait img{object-position:center 12%}
.fiche-voix .portrait .pc{display:none}
.fiche-identite{min-width:0}
.fiche-univers{display:flex;align-items:center;gap:6px;margin-bottom:4px;color:var(--fiche-encre);font:700 9px/1.5 'Montserrat',var(--ui);letter-spacing:.11em;text-transform:uppercase}
.fiche-univers i{width:6px;height:6px;background:var(--fiche-accent);border-radius:50%;box-shadow:0 0 0 3px color-mix(in srgb,var(--fiche-accent) 12%,transparent)}
.fiche-voix .modal-h h3{font:650 clamp(22px,2.3vw,29px)/1.12 var(--disp);letter-spacing:-.045em;margin:0 0 6px;overflow-wrap:anywhere;white-space:normal}
.fiche-code{font:500 10px/1.3 var(--mono);color:var(--ink2)}
.fiche-voix .fiche-fermer{align-self:flex-start;width:32px;height:32px;min-height:32px;border-radius:50%;border:1px solid color-mix(in srgb,var(--card) 70%,var(--line));background:color-mix(in srgb,var(--card) 64%,transparent);color:var(--ink2);box-shadow:0 2px 6px #10233c06;flex:none;margin-left:auto}
.fiche-voix .modal-b{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 26px 22px;gap:14px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fiche-accent) 22%,var(--line)) transparent}
.fiche-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.fiche-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 5px 10px;border-radius:18px;border:1px solid color-mix(in srgb,var(--card) 80%,var(--line));background:linear-gradient(150deg,color-mix(in srgb,var(--card) 88%,transparent),color-mix(in srgb,var(--card) 38%,transparent));box-shadow:inset 0 1px #ffffffcf,0 4px 12px -10px #1f3b5a2b}
.fiche-stat strong{font:650 27px/1.1 var(--disp);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.fiche-stat span{font-size:10px;color:var(--ink2);margin-top:5px}
.fiche-stat.disponible{background:linear-gradient(145deg,color-mix(in srgb,var(--fiche-accent) 12%,var(--card)),color-mix(in srgb,var(--card) 70%,transparent));border-color:color-mix(in srgb,var(--fiche-accent) 23%,var(--card));color:var(--fiche-encre)}
.fiche-section-titre{font:650 10px/1.4 'Montserrat',var(--ui);color:var(--ink2);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.fiche-progression{padding:3px 2px 4px}
.fiche-voix .idc-progres-label{font-size:11px;color:var(--ink2);margin-bottom:7px}
.fiche-voix .idc-progres-label b{font:650 17px/1 var(--disp);color:var(--ink)}
.fiche-voix .idc-jauge{height:8px;background:color-mix(in srgb,var(--ink) 7%,transparent);border:1px solid color-mix(in srgb,var(--card) 75%,transparent);box-shadow:inset 0 1px 2px #132c3a10;border-radius:20px;overflow:hidden}
.fiche-voix .idc-jauge i{background:linear-gradient(90deg,#16a36b,#3fce8e);box-shadow:0 0 8px #37b87d30;border-radius:20px}
.fiche-voix .idc-progres.perso .idc-jauge i{background:linear-gradient(90deg,var(--brand),#65b1ff)}
.fiche-pipeline{padding:14px 15px;border:1px solid color-mix(in srgb,var(--card) 75%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--card) 45%,transparent)}
.fiche-pipeline .fiche-section-titre{margin-bottom:10px}
.fiche-voix .pipe{margin:0;gap:7px;grid-template-columns:repeat(6,minmax(0,1fr))}
.fiche-voix .pipe-step{font-size:9px;gap:7px;color:var(--ink2)}
.fiche-voix .pipe-step span{font-size:9px;line-height:1.35}
.fiche-voix .pipe-step i{height:4px;background:color-mix(in srgb,var(--ink) 13%,transparent);box-shadow:inset 0 1px #ffffff50}
.fiche-voix .pipe-step.on{color:var(--fiche-encre)}
.fiche-voix .pipe-step.on i{background:var(--fiche-accent);box-shadow:0 0 8px color-mix(in srgb,var(--fiche-accent) 24%,transparent)}
.fiche-voix .pipe-step.fait i{background:var(--green)}
.fiche-voix .banner{padding:13px 15px;gap:10px;border-radius:18px;font-size:11px;line-height:1.75;box-shadow:inset 0 1px #ffffff70;background:color-mix(in srgb,var(--blue-s) 60%,transparent);border-color:color-mix(in srgb,var(--blue) 20%,transparent)}
.fiche-voix .banner>svg{width:15px;height:15px;flex:none;margin-top:3px}
.fiche-voix .banner b{font-size:12px;font-weight:650}
.fiche-voix .banner .bd{margin-top:3px}
.fiche-voix .banner.warn{background:color-mix(in srgb,var(--gold-s) 78%,transparent);border-color:color-mix(in srgb,var(--gold) 22%,transparent)}
.fiche-voix .banner.ok{background:color-mix(in srgb,var(--green-s) 65%,transparent);border-color:color-mix(in srgb,var(--green) 17%,transparent)}
.fiche-direction{padding:15px 16px;border-left:2px solid color-mix(in srgb,var(--fiche-accent) 55%,transparent);background:linear-gradient(110deg,color-mix(in srgb,var(--fiche-accent) 5%,transparent),transparent);border-radius:0 14px 14px 0}
.fiche-direction .fiche-section-titre{color:var(--fiche-encre);margin-bottom:6px}
.fiche-direction p{margin:0;font-size:12px;line-height:1.85}
.fiche-voix .tile{background:color-mix(in srgb,var(--card) 48%,transparent);border:1px solid color-mix(in srgb,var(--card) 70%,var(--line));border-radius:16px;padding:13px 15px;font-size:11px;line-height:1.8}
.fiche-reperes{border:1px solid color-mix(in srgb,var(--card) 70%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--card) 38%,transparent);font-size:11px}
.fiche-reperes>summary{display:flex;align-items:center;gap:8px;list-style:none;padding:13px 15px;font-weight:600;cursor:pointer;user-select:none}
.fiche-reperes>summary::-webkit-details-marker{display:none}
.fiche-reperes>summary>span{flex:1}
.fiche-reperes>summary>svg:last-child{color:var(--ink3);transition:transform .15s}
.fiche-reperes[open]>summary>svg:last-child{transform:rotate(90deg)}
.fiche-reperes-contenu{padding:0 15px 14px;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.fiche-reperes-contenu>p{padding-top:8px}
.fiche-voix .badge{border:1px solid color-mix(in srgb,var(--line) 50%,transparent);background:color-mix(in srgb,var(--card) 65%,transparent);font-size:10px;font-weight:550;padding:4px 9px}
.fiche-voix .badge.r{color:var(--fiche-encre);background:color-mix(in srgb,var(--fiche-accent) 7%,transparent);border-color:color-mix(in srgb,var(--fiche-accent) 15%,transparent)}
.fiche-voix .signal-perso{padding:10px 0 0;border-top:1px solid color-mix(in srgb,var(--line) 45%,transparent);gap:4px;align-items:flex-start}
.fiche-voix .signal-perso>span{font-size:10px;line-height:1.65}
.fiche-voix .signal-perso .btn{font-size:10px;min-height:30px;padding:4px 0;color:var(--ink2)}
.fiche-voix .modal-f{flex:none;position:relative;padding:15px 24px 19px;gap:9px;align-items:center;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 58%,transparent),color-mix(in srgb,var(--card) 93%,transparent));border-top:1px solid color-mix(in srgb,var(--card) 72%,var(--line));box-shadow:0 -8px 20px -15px #142c431c;z-index:3}
.fiche-voix .modal-f .btn{font:600 11px/1.3 'Montserrat',var(--ui);min-height:43px;border-radius:14px;padding:11px 16px}
.fiche-voix .modal-f .btn.pri{background:linear-gradient(165deg,#197bce,#0055a4);border:1px solid #187bcc;color:white;box-shadow:inset 0 1px #ffffff57,inset 0 -1px #003c7966,0 7px 15px -7px #0055a46b;transition:box-shadow .15s,transform .15s}
.fiche-voix .modal-f .btn.pri:hover{box-shadow:inset 0 1px #ffffff75,0 9px 20px -8px #0055a480;transform:translateY(-1px)}
.fiche-voix button:focus-visible,.fiche-voix summary:focus-visible{outline:2px solid var(--brand-t);outline-offset:3px}
html[data-skin="anthracite"] .modal.fiche-voix,html[data-skin="noir"] .modal.fiche-voix{--fiche-encre:var(--ink);box-shadow:0 30px 90px -30px #000a,inset 0 1px #ffffff35,inset 0 -1px #ffffff10;border-color:#ffffff24}
html[data-skin="anthracite"] .fiche-voix .portrait,html[data-skin="noir"] .fiche-voix .portrait{background:linear-gradient(145deg,color-mix(in srgb,var(--card) 90%,var(--fiche-accent)),var(--card));border-color:#ffffff30;box-shadow:inset 0 1px #ffffff25}
html[data-skin="anthracite"] .fiche-voix .fiche-stat,html[data-skin="noir"] .fiche-voix .fiche-stat{box-shadow:inset 0 1px #ffffff20}
@media(max-width:700px){#overlay:has(.fiche-voix){padding:12px}.modal.fiche-voix{max-height:calc(100dvh - 24px);border-radius:25px}.fiche-voix .modal-h{padding:20px 18px 18px;gap:12px}.fiche-voix .portrait{width:56px;height:66px;border-radius:17px}.fiche-voix .modal-h h3{font-size:24px}.fiche-voix .modal-b{padding:0 18px 20px;gap:13px}.fiche-voix .modal-f{padding:13px 16px calc(14px + env(safe-area-inset-bottom))}.fiche-stats{gap:7px}.fiche-stat{border-radius:15px;padding:12px 4px}.fiche-stat strong{font-size:25px}.fiche-stat span{font-size:9px}.fiche-voix .pipe{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}.fiche-voix .pipe-step span{font-size:9px}.fiche-voix .modal-f .btn.pri{flex:1;min-width:160px}.fiche-voix .modal-f .btn{font-size:10px;padding:11px 13px}.fiche-voix .signal-perso .btn{font-size:9px}.fiche-direction{padding:12px 13px}}
@media(prefers-reduced-motion:reduce){.modal.fiche-voix{animation:none}.fiche-voix .btn,.fiche-reperes>summary>svg:last-child{transition:none}.fiche-voix .modal-f .btn.pri:hover{transform:none}}
@media(prefers-reduced-transparency:reduce){.modal.fiche-voix,.fiche-voix .modal-f{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not (backdrop-filter:blur(1px)){.modal.fiche-voix{background:var(--card)}}

.modal.fiche-voix:focus{outline:none}

/* 22/10 : la pioche en trois choix */
.pioche-choix{display:flex;flex-direction:column;gap:9px}
.pioche-option{display:flex;flex-direction:column;gap:4px;text-align:left;padding:13px 15px;border-radius:16px;border:1px solid color-mix(in srgb,var(--fiche-accent) 22%,var(--line));background:color-mix(in srgb,var(--card) 92%,var(--fiche-accent));color:var(--ink);font:inherit}
button.pioche-option{cursor:pointer;transition:border-color .15s,transform .15s}
button.pioche-option:hover{border-color:var(--fiche-accent);transform:translateY(-1px)}
button.pioche-option:focus-visible{outline:2px solid var(--fiche-accent);outline-offset:2px}
.pioche-option b{font-size:14px}
.pioche-option>span{font-size:12px;color:var(--ink2);line-height:1.45}
.pioche-paquets{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.pioche-trafic{font-size:11px;color:var(--ink2);margin-top:-3px}
.pioche-option.verrou b{color:var(--ink2)}
@media(prefers-reduced-motion:reduce){button.pioche-option{transition:none}button.pioche-option:hover{transform:none}}