:root{--section-guide-blue:#2286ff;--section-guide-ink:#07152d;--section-guide-line:rgba(178,215,255,.72)}
.section-guide-prompt[hidden],.section-guide-layer[hidden]{display:none!important}
.section-guide-prompt{position:fixed;right:18px;bottom:18px;z-index:1110;width:min(340px,calc(100vw - 36px));animation:section-guide-prompt-in .34s ease-out both}
.section-guide-prompt button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px 9px 9px;border:1px solid rgba(93,163,255,.55);border-radius:16px;background:linear-gradient(130deg,rgba(12,33,70,.96),rgba(18,23,55,.96));box-shadow:0 14px 38px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.09);color:#f6f9ff;text-align:left;cursor:pointer;font:inherit;transition:transform .18s ease,border-color .18s ease}
.section-guide-prompt button:hover,.section-guide-prompt button:focus-visible{transform:translateY(-2px);border-color:#8dc9ff;outline:0}.section-guide-prompt-orbit{display:grid;flex:0 0 33px;place-items:center;width:33px;height:33px;border-radius:11px;background:radial-gradient(circle at 32% 27%,#d7f5ff 0 7%,#4fc0ff 8% 31%,#2455e9 32% 66%,#17236e 67%);box-shadow:0 0 0 4px rgba(66,161,255,.12);color:#fff;font-size:17px}.section-guide-prompt span:nth-child(2){display:grid;gap:1px;min-width:0}.section-guide-prompt small{color:#9fc7ff;font-size:8px;font-weight:900;letter-spacing:.11em}.section-guide-prompt strong{overflow:hidden;color:#f7fbff;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.section-guide-prompt b{margin-left:auto;color:#8cc8ff;font-size:18px}
.section-guide-layer{position:fixed;z-index:1210;inset:0;pointer-events:none}.section-guide-dim{position:absolute;inset:0;background:rgba(1,7,19,.46);pointer-events:auto}.section-guide-spotlight{position:fixed;z-index:1;border:2px solid rgba(145,210,255,.98);border-radius:16px;box-shadow:0 0 0 4px rgba(46,147,255,.18),0 0 28px rgba(48,161,255,.58),0 0 0 999vmax rgba(1,7,19,.04);pointer-events:none;transition:top .24s ease,left .24s ease,width .24s ease,height .24s ease,opacity .18s ease}
.section-guide-card{position:fixed;z-index:2;display:grid;grid-template-columns:158px minmax(0,1fr);width:min(568px,calc(100vw - 32px));max-height:min(68vh,430px);overflow:auto;border:1px solid rgba(177,220,255,.9);border-radius:22px;background:linear-gradient(150deg,#fbfdff 0%,#e6f2ff 100%);box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.95);color:var(--section-guide-ink);pointer-events:auto;transition:top .24s ease,left .24s ease,opacity .16s ease}.section-guide-card::before{position:absolute;inset:0 auto 0 0;width:158px;background:radial-gradient(circle at 50% 25%,rgba(66,179,255,.56),transparent 44%),linear-gradient(165deg,#172d63,#0a1333 74%);content:""}.section-guide-character{position:relative;z-index:1;align-self:end;display:flex;align-items:flex-end;min-height:265px;overflow:hidden}.section-guide-character img{display:block;width:188px;max-width:none;margin:0 -14px -3px -17px;filter:drop-shadow(0 13px 16px rgba(1,8,24,.45))}.section-guide-copy{position:relative;z-index:1;padding:22px 22px 17px;min-width:0}.section-guide-topline{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}.section-guide-kicker{margin:0;color:#316ab4;font-size:9px;font-weight:950;letter-spacing:.13em}.section-guide-step{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:36px;height:23px;border-radius:999px;background:#dbeeff;color:#1f61ad;font-size:10px;font-weight:900}.section-guide-copy h2{margin:6px 0 9px;font-size:clamp(1.22rem,2.5vw,1.65rem);letter-spacing:-.035em;line-height:1.08}.section-guide-copy>p:not(.section-guide-kicker){margin:0;color:#29415f;font-size:.92rem;line-height:1.5}.section-guide-note{display:flex;gap:8px;margin:13px 0 0;padding:10px 11px;border:1px solid rgba(61,139,226,.18);border-radius:12px;background:rgba(70,157,246,.1);color:#234d80;font-size:.76rem;line-height:1.4}.section-guide-note i{color:#217cf4;font-style:normal;font-weight:950}.section-guide-progress{display:flex;gap:5px;margin:15px 0 13px}.section-guide-progress i{display:block;width:22px;height:5px;border-radius:999px;background:#cbd8e9}.section-guide-progress i.done{background:#5bb7ff}.section-guide-progress i.active{background:#126ff2;box-shadow:0 0 0 3px rgba(18,111,242,.13)}.section-guide-actions{display:flex;align-items:center;justify-content:space-between;gap:9px}.section-guide-actions-group{display:flex;align-items:center;gap:8px}.section-guide-actions button{font:800 .8rem inherit;cursor:pointer}.section-guide-primary{padding:10px 13px;border:1px solid #136deb;border-radius:10px;background:linear-gradient(135deg,#1e90ff,#075ce9);box-shadow:0 8px 16px rgba(16,104,235,.23);color:#fff}.section-guide-secondary{padding:9px 10px;border:1px solid #bdd2ec;border-radius:10px;background:rgba(255,255,255,.66);color:#315579}.section-guide-text{padding:7px 2px;border:0;background:transparent;color:#58718d;text-decoration:underline;text-underline-offset:3px}.section-guide-actions button:disabled{opacity:.45;cursor:default}.section-guide-card[data-placement="left"] .section-guide-character{order:2}.section-guide-card[data-placement="left"]::before{right:0;left:auto}.section-guide-card[data-placement="left"] .section-guide-copy{order:1}
@keyframes section-guide-prompt-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:720px){.section-guide-prompt{right:10px;bottom:10px;width:min(300px,calc(100vw - 20px))}.section-guide-prompt button{padding:8px}.section-guide-prompt-orbit{flex-basis:29px;width:29px;height:29px;font-size:14px}.section-guide-prompt strong{font-size:10px}.section-guide-card{right:10px!important;bottom:10px!important;left:10px!important;top:auto!important;grid-template-columns:76px minmax(0,1fr);width:auto!important;max-height:min(52vh,390px);border-radius:18px;transform:none!important}.section-guide-card::before{width:76px}.section-guide-character{min-height:174px}.section-guide-character img{width:112px;margin:0 -11px -2px -17px}.section-guide-copy{padding:16px 15px 13px}.section-guide-copy h2{font-size:1.14rem}.section-guide-copy>p:not(.section-guide-kicker){font-size:.81rem;line-height:1.42}.section-guide-note{margin-top:9px;padding:8px;font-size:.68rem}.section-guide-progress{margin:10px 0}.section-guide-progress i{width:16px;height:4px}.section-guide-actions{align-items:flex-end}.section-guide-actions-group{gap:5px}.section-guide-primary{padding:9px 10px;font-size:.73rem}.section-guide-secondary{padding:8px;font-size:.73rem}.section-guide-text{font-size:.68rem}.section-guide-card .section-guide-character{order:0}.section-guide-card::before{left:0;right:auto}.section-guide-card .section-guide-copy{order:1}}
@media (prefers-reduced-motion:reduce){.section-guide-prompt,.section-guide-spotlight,.section-guide-card{animation:none;transition:none}}
/* Les guides contextuels gardent leur personnage sur smartphone, vertical comme horizontal. */
@media (max-width:720px) and (orientation:portrait){.section-guide-card .section-guide-character{display:flex!important}.section-guide-card .section-guide-character img{display:block!important;visibility:visible!important;opacity:1!important}}
@media (max-width:720px) and (orientation:landscape){.section-guide-card .section-guide-character{display:flex!important}.section-guide-card .section-guide-character img{display:block!important;visibility:visible!important;opacity:1!important}}

/* Un guide replié reste toujours disponible, sans masquer le jeu. */
.section-guide-prompt.minimized{width:50px}.section-guide-prompt.minimized button{justify-content:center;padding:8px;border-radius:50%}.section-guide-prompt.minimized span:nth-child(2),.section-guide-prompt.minimized b{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}.section-guide-prompt.minimized .section-guide-prompt-orbit{width:33px;height:33px;flex-basis:33px}@media (max-width:720px){.section-guide-prompt.minimized{width:45px}.section-guide-prompt.minimized .section-guide-prompt-orbit{width:29px;height:29px;flex-basis:29px}}

/* Le guide ne doit jamais pousser ses actions hors de l'écran. Le texte défile
   dans sa colonne, tandis que les contrôles restent accessibles en permanence. */
.section-guide-card{grid-template-columns:132px minmax(0,1fr);width:min(520px,calc(100vw - 28px));max-height:min(58dvh,360px);overflow:hidden}
.section-guide-card::before{width:132px}
.section-guide-character{align-self:stretch;min-height:0;overflow:hidden}
.section-guide-character img{width:160px;max-height:min(58dvh,360px);margin:0 -14px -2px -14px;object-fit:contain;object-position:center bottom}
.section-guide-copy{display:flex;flex-direction:column;min-height:0;max-height:min(58dvh,360px);padding:17px 18px 12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.section-guide-copy h2{margin:5px 0 7px;font-size:clamp(1.12rem,2.15vw,1.46rem)}
.section-guide-copy>p:not(.section-guide-kicker){font-size:.84rem;line-height:1.42}
.section-guide-note{margin-top:10px;padding:8px 9px;font-size:.7rem;line-height:1.32}
.section-guide-progress{margin:11px 0 9px}.section-guide-progress i{width:17px}
.section-guide-actions{position:sticky;bottom:0;z-index:3;flex-shrink:0;margin-top:auto;padding:9px 0 2px;background:linear-gradient(180deg,rgba(235,245,255,0),#edf6ff 28%,#edf6ff 100%)}
@media (max-width:720px){
  .section-guide-card{grid-template-columns:64px minmax(0,1fr);max-height:min(56dvh,330px)}
  .section-guide-card::before{width:64px}.section-guide-character{min-height:0}.section-guide-character img{width:96px;max-height:min(56dvh,330px);margin:0 -14px -2px -17px}
  .section-guide-copy{max-height:min(56dvh,330px);padding:13px 12px 10px}.section-guide-copy h2{font-size:1.02rem}.section-guide-copy>p:not(.section-guide-kicker){font-size:.76rem;line-height:1.36}
  .section-guide-note{margin-top:7px;padding:7px;font-size:.64rem}.section-guide-progress{margin:8px 0}.section-guide-progress i{width:12px}
  .section-guide-actions{align-items:flex-end;gap:6px;padding-top:7px}.section-guide-actions-group{margin-left:auto;gap:5px}.section-guide-primary,.section-guide-secondary{white-space:nowrap}.section-guide-text{font-size:.64rem}
}
@media (max-width:390px){.section-guide-actions{flex-wrap:wrap}.section-guide-actions-group{width:100%;justify-content:flex-end}.section-guide-text{padding-bottom:0}}