/* Le bureau est propre au trombinoscope : aucune modification des autres écrans. */
body[data-menu-step=heroes] #menu{background:linear-gradient(#fff4da20,#8c54200a),url('assets/agent-desk.png') center/cover;padding:18px 3vw 12px;color:#1a3042}
body[data-menu-step=heroes] #menu .masthead{border-bottom:1px solid #59452933;flex-basis:48px}
body[data-menu-step=heroes] #menu .brand h1{color:#193044}
#flow-heroes .flow-stage-heading{margin:12px 0 18px;align-items:center;display:flex}
#flow-heroes .flow-stage-heading h2{font-size:clamp(28px,3vw,44px);color:#193044}
#flow-heroes .flow-stage-heading small{letter-spacing:2px;color:#473e33}
.agent-steps{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12px;background:#fff9ebdf;padding:12px 18px;box-shadow:2px 3px 9px #50311620;transform:rotate(1deg)}
.agent-steps b{color:#a6312e}.agent-steps b span{color:#193044;margin-left:5px}.agent-steps i{height:1px;width:32px;background:#88765b}
#flow-heroes .flow-choice-layout{grid-template-columns:minmax(280px,39%) 1fr;gap:3vw;padding:0 10px 0 6px}
#flow-heroes .flow-detail{background:linear-gradient(115deg,#fffbee,#f8edda);border:1px solid #cbb28c;border-radius:4px;padding:18px 20px 22px;overflow:visible;box-shadow:0 12px 22px #51331935,7px 7px 0 #c8a36b,9px 9px 0 #8e6b3f;display:flex;flex-direction:column;isolation:isolate}
#flow-heroes .flow-detail:before{content:'';position:absolute;inset:0;z-index:-1;background:transparent;border:1px solid #a88048;border-radius:6px;transform:rotate(-1.4deg);box-shadow:0 0 0 9px #c6a16e,0 7px 14px #51331933;pointer-events:none}
.dossier-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;border-bottom:1px solid #cbb28c;padding-bottom:8px;color:#796447;letter-spacing:2px;font-size:12px}.dossier-heading b{font:700 12px Affiche;letter-spacing:1px}
#flow-heroes .flow-portrait{flex:1;min-height:90px;height:auto;background:linear-gradient(90deg,#fff7d757,#fff8e7a8),url('assets/accueil-v7.png') 58% 45%/cover;box-shadow:inset 0 0 35px #b6945244;border:1px solid #cbb28c;overflow:hidden}
#flow-heroes .flow-portrait:after{display:none}
#flow-heroes .agent-stage{object-fit:contain;filter:drop-shadow(0 6px 3px #6b432d30)}
.portrait-tag{position:absolute;left:12px;top:12px;padding:6px 12px;background:#fff9e9ed;box-shadow:1px 2px 4px #50311622;font:700 16px Affiche;color:#193044;z-index:3}
.dossier-seal{position:absolute;right:12px;bottom:12px;width:clamp(54px,5vw,85px);height:auto;z-index:3;transform:rotate(-9deg)}
#flow-heroes .flow-detail>small{margin-top:12px;text-transform:uppercase;letter-spacing:1px;color:#725c40;font-size:12px}
#flow-heroes .flow-detail h3{font-size:clamp(30px,3.5vw,58px);line-height:1;margin:4px 0 6px;color:#193044}
#flow-heroes .flow-detail>p:not(.dossier-unlock){font-size:14px;line-height:1.3;margin:5px 0;color:#443d33}
#flow-heroes .flow-detail dl{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:8px;margin:10px 0 5px;flex-shrink:0}
#flow-heroes .flow-detail dl>div{border:1px solid #ceb995;border-radius:3px;background:#fffaf080;padding:9px;box-shadow:1px 2px 3px #51331912}
#flow-heroes .flow-detail dt{font-size:12px;color:#6b5940;text-transform:uppercase;letter-spacing:.5px}
#flow-heroes .flow-detail dd{margin:5px 0 0;font:700 clamp(15px,1.3vw,20px) Affiche;color:#193044}
#flow-heroes .flow-detail .flow-start-rule{font-size:12px!important;margin:4px 0!important;color:#756850!important}
.dossier-unlock{font-size:12px!important;margin:5px 0 0!important;padding-right:80px;color:#776045;line-height:1.3}
#flow-heroes .agent-serial{bottom:8px;right:12px;letter-spacing:1px}
#flow-heroes .flow-hero-list{display:flex;flex-direction:column;overflow:visible;padding:0 6px 6px;min-height:0}
.roster-heading{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:7px 12px 10px;letter-spacing:1.5px;font-size:12px;color:#352e25;background:#fff9ebdd;border-radius:4px 4px 0 0}.roster-heading b{font:700 14px Affiche;letter-spacing:1px}
#flow-heroes .hero-grid{flex:1;height:auto;min-height:0;gap:14px;padding:12px;background:#f9f1e3dd;border:1px solid #ccb48c;border-radius:0 0 8px 8px;box-shadow:0 9px 18px #50311635,3px 4px 0 #ba9866;perspective:1200px}
#flow-heroes .hero-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;background:linear-gradient(120deg,#fffdf5,#f5e7ce);border:1px solid #c7b28f;border-radius:6px;overflow:visible;box-shadow:0 3px 5px #51331926;transform-origin:50% 10%;transition:transform .22s,box-shadow .22s,border-color .22s}
#flow-heroes .hero-card:before{width:11px;height:23px;top:-9px;left:50%;border:2px solid #756f61;border-radius:8px;background:transparent;box-shadow:1px 1px 0 #fff8;transform:rotate(9deg)}
#flow-heroes .hero-card .hero-art{width:100%;flex:1;min-height:45px;height:auto;border:0;border-top:9px solid var(--service-color);background:radial-gradient(ellipse at 50% 80%,#fffef4,#fff1d466),linear-gradient(140deg,var(--service-color),#f6e9d6);overflow:hidden;border-radius:5px 5px 0 0;position:relative}
#flow-heroes .hero-card .hero-art:after{content:attr(data-number);position:absolute;left:9px;top:7px;font:700 15px Affiche;color:#816341;opacity:.7}
#flow-heroes .hero-card .sprite{position:absolute;width:auto!important;aspect-ratio:1;height:180%!important;max-width:none;max-height:none;bottom:-85%;left:50%;transform:translateX(-50%)!important;filter:drop-shadow(2px 2px 0 #51331922)}
#flow-heroes .hero-card .sprite-crop{image-rendering:auto}
#flow-heroes .card-copy{padding:7px 12px 9px;border-top:1px solid #dcc7a044;flex-shrink:0}
#flow-heroes .card-copy h4{font-size:clamp(19px,1.7vw,26px);margin:0 0 2px;color:#193044;line-height:1}
#flow-heroes .card-copy p{font-size:12px;margin:0;color:#5b4a36;line-height:1.2}
#flow-heroes .hero-card.selected{border:2px solid #d66521;box-shadow:0 0 0 2px #ffdc93,0 5px 12px #70451a33}
#flow-heroes .hero-card.selected .card-copy:after{content:'SÉLECTIONNÉ';position:absolute;right:8px;top:15px;color:#a6312e;border:2px solid #a6312e;transform:rotate(-9deg);font:700 12px Affiche;padding:2px 4px;background:#fff9ebba}
#flow-heroes .hero-card.locked:after{font-size:12px;bottom:9px;right:6px;background:#fff9e9dd;padding:2px 4px;transform:rotate(-8deg)}
#flow-heroes .hero-card.locked .hero-art{filter:saturate(.25);opacity:.7}
#flow-heroes .hero-card.locked .card-copy{padding-bottom:27px}
.agent-condition{display:none;position:absolute;bottom:calc(100% + 12px);left:0;right:0;background:#193044;color:#fff8e9;border-radius:4px;padding:12px;font:400 13px Service;line-height:1.4;box-shadow:0 5px 15px #19304433;z-index:20;pointer-events:none}
#flow-heroes .hero-card:hover,#flow-heroes .hero-card:focus-visible{z-index:15;transform:translateY(-5px) rotateY(var(--badge-x,0deg)) rotateX(var(--badge-y,0deg));box-shadow:0 10px 15px #51331933}
#flow-heroes .hero-card:hover .agent-condition,#flow-heroes .hero-card:focus-visible .agent-condition{display:block}
#flow-heroes .flow-stage-actions{display:flex;justify-content:space-between;align-items:center;padding:18px 12px 6px;gap:16px}
.agent-desk-note{font-size:14px;color:#193044;padding:10px 18px;background:#fff8e7dd;border-left:3px solid #b14d32;margin:0;transform:rotate(-1deg)}
#flow-hero-next{font-size:21px;border:1px solid #ffd79c!important;background:linear-gradient(#e77028,#c94d19)!important;box-shadow:0 5px 0 #8e3418,0 9px 18px #51331940!important;padding:17px 30px;min-width:300px;border-radius:4px}
body[data-motion=off] #flow-heroes *{animation:none!important;transition:none!important;transform:none!important}
@media(min-width:701px) and (max-height:760px){body[data-menu-step=heroes] #menu{padding-top:10px}#flow-heroes .flow-stage-heading{margin:8px 0 12px}#flow-heroes .flow-detail{padding:12px 14px 20px}.dossier-heading{margin-bottom:7px;padding-bottom:5px}#flow-heroes .flow-detail h3{font-size:34px}#flow-heroes .flow-detail>p:not(.flow-start-rule):not(.dossier-unlock){display:none}#flow-heroes .flow-detail dl{margin:6px 0 0}#flow-heroes .flow-detail dl>div{padding:6px}#flow-heroes .flow-detail>small{margin-top:6px}#flow-heroes .flow-stage-actions{padding-top:12px}#flow-hero-next{padding:12px 24px}.roster-heading{padding:6px 10px}#flow-heroes .hero-grid{gap:10px;padding:10px}#flow-heroes .card-copy{padding:5px 10px 6px}.agent-desk-note{font-size:12px}}
@media(max-width:700px){body[data-menu-step=heroes] #menu{padding:9px 12px}#flow-heroes .flow-stage-heading{margin:8px 0 12px;gap:10px}#flow-heroes .flow-stage-heading h2{font-size:26px}.agent-steps{display:none}#flow-heroes .flow-choice-layout{grid-template-columns:1fr;grid-template-rows:190px 1fr;gap:15px;padding:0 4px}#flow-heroes .flow-detail{display:grid;grid-template-columns:42% 1fr;grid-template-rows:22px 25px 32px 1fr;column-gap:10px;padding:10px}.dossier-heading{grid-column:1/-1;font-size:12px;margin:0;padding:0;border:0}.dossier-heading b{display:none}#flow-heroes .flow-portrait{grid-row:2/5;grid-column:1;width:100%;height:100%;float:none;margin:0}#flow-heroes .flow-detail>small{display:block;grid-column:2;margin:0;font-size:12px}#flow-heroes .flow-detail h3{grid-column:2;font-size:30px;margin:0}#flow-heroes .flow-detail>p{display:none}#flow-heroes .flow-detail dl{display:block;grid-column:2;margin:0}#flow-heroes .flow-detail dl>div{padding:3px 5px;margin-top:3px}#flow-heroes .flow-detail dl>div:not(:first-child){display:none}#flow-heroes .flow-detail dd{font-size:16px;margin:2px 0}.portrait-tag{display:none}.dossier-seal{width:40px;bottom:5px;right:5px}.agent-serial{display:none}.roster-heading{font-size:12px;letter-spacing:0;padding:5px 6px}.roster-heading b{font-size:12px}#flow-heroes .hero-grid{gap:7px;padding:8px}#flow-heroes .card-copy{padding:5px 6px}#flow-heroes .card-copy h4{font-size:18px}#flow-heroes .card-copy p{display:none}#flow-heroes .hero-card.locked .card-copy{padding-bottom:19px}#flow-heroes .hero-card.locked:after{bottom:4px;font-size:12px;padding:0 2px}#flow-heroes .hero-card.selected .card-copy:after{display:none}#flow-heroes .hero-card:before{height:17px;top:-5px;width:8px}#flow-heroes .flow-stage-actions{padding:12px 0 4px}.agent-desk-note{display:none}#flow-hero-next{width:100%;min-width:0;font-size:20px;padding:12px}.agent-condition{left:-10px;right:-10px;font-size:12px;padding:8px}}
@media(prefers-reduced-motion:reduce){#flow-heroes *{animation:none!important;transition:none!important;transform:none!important}}
/* Zones de lecture opaques : contraste indépendant de l’illustration. */
body[data-menu-step=heroes] #menu .masthead{background:#fff9ec;border:1px solid #cbb995;border-radius:4px;padding:8px 100px 8px 12px;box-shadow:0 2px 6px #50311620;flex-basis:57px}
#flow-heroes .flow-stage-heading{background:#fff9ec;border:1px solid #cbb995;border-radius:4px;padding:10px 12px;box-shadow:0 2px 6px #50311620}
#flow-heroes .flow-stage-heading small{color:#55432f;font-weight:600}
#flow-heroes .flow-back{background:#fffdf6;border:2px solid #193044;color:#193044;font-weight:700;box-shadow:0 3px 0 #cbb995;padding:10px 16px;border-radius:3px}
#flow-heroes .flow-back:hover,#flow-heroes .flow-back:focus-visible{background:#193044;color:#fff9ec}
body[data-menu-step=heroes] #v7-account{background:#fffdf6;border:2px solid #193044;color:#193044;font-weight:700;top:25px}
body[data-menu-step=heroes] #v7-account:hover{background:#193044;color:#fff9ec}
#flow-heroes .roster-heading{background:#fff9ec;color:#193044}
#flow-heroes .dossier-heading,#flow-heroes .flow-detail>small,#flow-heroes .flow-detail dt,#flow-heroes .dossier-unlock,#flow-heroes .flow-detail .flow-start-rule{color:#55432f!important}
#flow-heroes .hero-card.selected{border-color:#a93a13;box-shadow:0 0 0 2px #f8ad56,0 5px 12px #70451a33}
#flow-hero-next{background:linear-gradient(#c74d15,#ac350b)!important;border:2px solid #ffe2b4!important;color:#fff!important}
#flow-hero-next:hover,#flow-hero-next:focus-visible{background:#8f2b08!important;outline:3px solid #193044;outline-offset:3px}
@media(max-width:700px){body[data-menu-step=heroes] #menu .masthead{flex-basis:49px;padding-top:5px;padding-bottom:5px}body[data-menu-step=heroes] #v7-account{top:16px;right:19px}#flow-heroes .flow-stage-heading{padding:7px 8px}#flow-heroes .flow-back{padding:7px 10px}}
/* Le texte critique garde au minimum 12 px et une teinte stable. */
#flow-heroes .agent-steps{background:#fff9ec;box-shadow:none}
#flow-heroes .dossier-heading{font-weight:600}
#flow-heroes .card-copy h4{color:#142b40}

/* Les cartes conservent leur hauteur, quel que soit le nombre de collègues. */
#flow-heroes .flow-choice-layout{min-height:0;align-items:stretch}
#flow-heroes .flow-hero-list{min-height:0;overflow:hidden}
#flow-heroes .hero-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:206px;align-content:start;align-items:stretch;overflow-y:auto;overflow-x:hidden;max-height:clamp(300px,calc(100dvh - 290px),650px);min-height:280px;flex:0 1 auto;gap:14px;padding:16px 12px;scrollbar-width:thin;scrollbar-color:#947247 #eee2cd;scroll-padding:12px}
#flow-heroes .hero-card{height:206px;min-height:206px;max-height:206px;display:grid;grid-template-rows:120px 1fr;position:relative;overflow:hidden;flex:none}
#flow-heroes .hero-card:before{display:none}
#flow-heroes .hero-card .hero-art{height:120px;min-height:120px;flex:none;overflow:hidden;border-top-width:6px;border-radius:4px 4px 0 0}
#flow-heroes .hero-card .sprite{height:108px!important;width:auto!important;aspect-ratio:1;bottom:0!important;top:auto!important;left:50%;max-height:108px;transform:translateX(-50%)!important}
#flow-heroes .hero-card .shop-sprite{width:125px!important;aspect-ratio:auto}
#flow-heroes .card-copy{min-height:80px;padding:10px 12px!important;position:relative;background:#fff9ed}
#flow-heroes .card-copy h4{font-size:23px;line-height:1.1;margin:0 0 4px}
#flow-heroes .card-copy p{display:block;color:#514636;font-size:12px}
#flow-heroes .hero-card.locked:after{display:none}
#flow-heroes .hero-card.selected .card-copy:after{top:48px;font-size:10px;transform:none;border-width:1px}
#flow-heroes .hero-card .shop-lock-note{position:absolute;bottom:0;left:0;right:0;margin:0;padding:6px 10px;border:0;border-top:1px solid #ceb793;border-radius:0;font-size:12px!important;color:#7a391e!important;background:#f0e2ca}
#flow-heroes .hero-card:hover,#flow-heroes .hero-card:focus-visible{transform:none;box-shadow:0 0 0 2px #b56029;z-index:2}
#flow-heroes .agent-condition{display:none!important}
@media(max-width:1000px) and (min-width:701px){#flow-heroes .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){#flow-heroes .hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;min-height:0;overflow:visible;grid-auto-rows:196px;gap:10px;padding:10px}#flow-heroes .flow-hero-list{overflow:visible}#flow-heroes .hero-card{height:196px;min-height:196px;max-height:196px;grid-template-rows:110px 1fr}#flow-heroes .hero-card .hero-art{height:110px;min-height:110px}#flow-heroes .card-copy h4{font-size:21px}#flow-heroes .card-copy{padding:9px!important}}
#flow-heroes .hero-grid{overscroll-behavior:contain;touch-action:pan-y}@media(max-width:700px){#flow-heroes .hero-grid{max-height:clamp(220px,calc(100dvh - 450px),520px);overflow-y:auto;overflow-x:hidden;min-height:0}#flow-heroes .flow-hero-list{overflow:hidden}}

#flow-heroes .flow-portrait:has(.agent-stage)>.hero-art{display:none!important}

.shop-sprite{overflow:hidden}.shop-sprite>img.shop-sprite-image{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;min-height:0!important;object-fit:contain!important;position:static!important;inset:auto!important;transform:none!important}

#flow-heroes .flow-portrait:has(.shop-sprite)>.cinema-canvas{display:none!important}