/* Tutoriel : guide d'objectifs et astuces */
.tg-widget { position: fixed; left: 18px; bottom: 18px; z-index: 2900; max-width: calc(100vw - 110px); font-family: inherit; color: #e8eefc; }
.tg-widget[hidden] { display: none; }
.tg-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #3a2f10; color: #f2c45a; font-size: .95rem; flex: none; }
.tg-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 8px; border-radius: 99px; border: 1px solid #5a4a1c; background: #0e1828; color: #e8eefc; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.tg-pill em { font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 99px; background: #f2c45a; color: #2a1c00; font-size: .75rem; }
.tg-card { width: 330px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px; box-sizing: border-box; border-radius: 18px; background: #0e1828; border: 1px solid #5a4a1c; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); position: relative; }
.tg-card.done { flex-direction: row; align-items: center; gap: 10px; }
.tg-card.done small { color: #8ea0bf; flex: 1; }
.tg-card header { display: flex; align-items: center; gap: 8px; }
.tg-title { flex: 1; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.tg-title span:last-child { display: grid; }
.tg-title small { color: #8ea0bf; font-size: .75rem; }
.tg-x { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #2c4060; background: transparent; color: #b8c6e0; font-size: 1.1rem; cursor: pointer; }
.tg-bar { display: block; height: 6px; border-radius: 99px; background: #1f2d45; overflow: hidden; }
.tg-bar s { display: block; height: 100%; background: #f2c45a; text-decoration: none; }
.tg-cur { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #13233b; border: 1px solid #2c4060; }
.tg-cur.ok { border-color: #54e39e; background: rgba(84, 227, 158, .07); }
.tg-lab { font-size: .68rem; font-weight: 800; letter-spacing: .08em; color: #f2c45a; }
.tg-cur.ok .tg-lab { color: #9ff0c4; }
.tg-cur p { margin: 0; font-size: .84rem; line-height: 1.45; color: #c9d5ea; }
.tg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tg-row small { color: #8ea0bf; font-size: .76rem; }
.tg-btn { min-height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #2c4060; background: transparent; color: #e8eefc; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.tg-btn.primary { border: 0; background: #5fe0ff; color: #06202a; }
.tg-btn.gold { border: 0; background: #f2c45a; color: #2a1c00; }
.tg-ready { display: flex; align-items: center; gap: 8px; justify-content: space-between; font-size: .8rem; color: #9ff0c4; }
.tg-next { margin: 0; padding-left: 22px; display: grid; gap: 3px; color: #8ea0bf; font-size: .8rem; }
.tg-next li.ok { color: #9ff0c4; }
.tg-menu { position: absolute; right: 12px; top: 52px; display: grid; padding: 6px; border-radius: 12px; background: #0a1322; border: 1px solid #2c4060; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); z-index: 2; }
.tg-menu button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #e8eefc; font: inherit; font-size: .84rem; text-align: left; cursor: pointer; white-space: nowrap; }
.tg-menu button:hover { background: #142238; }
.tg-tip { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 10; display: flex; align-items: flex-start; gap: 12px; width: min(640px, calc(100vw - 40px)); box-sizing: border-box; padding: 14px 16px; border-radius: 16px; background: #13233b; border: 1px solid #f2c45a; box-shadow: 0 14px 40px rgba(0, 0, 0, .6); color: #e8eefc; animation: tgIn .25s ease; }
.tg-tip > div:nth-child(2) { flex: 1; min-width: 0; }
.tg-tip p { margin: 4px 0 0; font-size: .86rem; line-height: 1.45; color: #c9d5ea; }
.tg-tipbtns { display: grid; gap: 6px; flex: none; }
@keyframes tgIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 760px) { .tg-widget { left: 10px; bottom: 10px; } .tg-tip { flex-wrap: wrap; } .tg-tipbtns { grid-auto-flow: column; } }
@media (prefers-reduced-motion: reduce) { .tg-tip { animation: none; } }