/* Tutos des missions : actions numérotées et captures annotées.
   Le jaune surligneur est réservé aux annotations : il ressort sur les captures
   sombres (Google, Brave) comme sur les claires, sans se confondre avec le bleu des interfaces. */
:root { --mark: #2BC27A; --mark-ink: #052E1A; }

.tuto-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tuto-actions li { display: flex; gap: .75rem; align-items: flex-start; }
.tuto-num {
    flex-shrink: 0; width: 1.6rem; height: 1.6rem; margin-top: .05rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--mark); color: var(--mark-ink);
    font-weight: 700; font-size: .85rem; line-height: 1;
}
.tuto-check {
    display: flex; gap: .5rem; padding: .65rem .85rem; border-radius: .75rem;
    background: rgb(22 163 74 / .09); color: rgb(var(--fg) / .78);
}
.tuto-check svg { color: #16A34A; }
.tuto-actions kbd, .tuto-check kbd {
    font: inherit; font-size: .85em; padding: .05rem .4rem; border-radius: .35rem;
    border: 1px solid rgb(var(--fg) / .2); border-bottom-width: 2px; background: rgb(var(--fg) / .04);
}

/* Encadré : liseré sombre autour du jaune pour rester lisible sur une capture claire */
.shot-box {
    position: absolute; border: 3px solid var(--mark); border-radius: .6rem;
    box-shadow: 0 0 0 2px rgb(0 0 0 / .45); pointer-events: none;
}
.shot-badge {
    /* À gauche de l'encadré, à l'extérieur : la pastille ne cache jamais l'élément visé */
    position: absolute; top: 50%; left: -2.1rem; transform: translateY(-50%); z-index: 1;
    width: 1.7rem; height: 1.7rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mark); color: var(--mark-ink); font-weight: 800; font-size: .9rem;
    box-shadow: 0 0 0 2px rgb(0 0 0 / .45);
}
/* Zone masquée : cache ce qui donnerait la réponse à la question finale */
.shot-mask {
    position: absolute; display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--mark); border-radius: .6rem;
    background: rgb(20 20 24 / .55); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    color: #fff; font-size: .8rem; font-weight: 600; text-align: center; padding: 0 .4rem;
    white-space: nowrap; overflow: visible;
}
.shot-mask > span:first-child { overflow: hidden; text-overflow: clip; max-width: 100%; }

@media (max-width: 480px) {
    .shot-badge { width: 1.35rem; height: 1.35rem; font-size: .75rem; left: -1.6rem; }
    .shot-box { border-width: 2px; }
    .shot-mask { font-size: .6rem; }
}

/* Captures : taille réelle jusqu'à toute la largeur, agrandissement au clic */
.shot-zoom { display: block; max-width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.shot-zoom:focus-visible { outline: 3px solid var(--mark); outline-offset: 4px; border-radius: .9rem; }
.shot-frame { position: relative; display: inline-block; max-width: 100%; }
.shot-frame img { display: block; max-width: 100%; height: auto; border-radius: .75rem; border: 1px solid rgb(var(--fg) / .12); }
.shot-hint { margin-top: .4rem; font-size: .8rem; color: rgb(var(--fg) / .4); }
.shot-lightbox {
    position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
    padding: 2.5rem 1rem 1rem 3rem; background: rgb(0 0 0 / .82); cursor: zoom-out; overflow: auto;
}
.shot-lightbox-inner { margin: auto; }
.shot-lightbox-close {
    position: fixed; top: .8rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 999px;
    border: 0; background: #fff; color: #111; font-size: 1.1rem; font-weight: 700; cursor: pointer;
}

/* Captures de téléphone : largeur réduite pour rester lisibles sans faire défiler */
.shot-phone .shot-frame { max-width: 300px; }