/* Fichier fabriqué par tools/pages.mjs depuis css/style.css (les figures des leçons, comme dans le jeu) :
   modifiez css/style.css, pas ce fichier. */
.fig { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--f); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.fig .f-v { fill: none; stroke: #1f2340; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fig .f-v.fin { stroke: #6b6f96; stroke-width: 1.1; stroke-dasharray: 4 4; }
.fig .f-v.hl { stroke: #2f6bff; stroke-width: 2.8; }
.fig .f-angle, .fig .f-angle.hl, .fig .f-code { stroke: #c2263e; stroke-width: 1.7; }
.fig .f-fill { fill: rgba(194, 38, 62, .13); stroke: none; }
.fig .f-fill-cercle { fill: rgba(47, 107, 255, .14); }
.fig .f-croix { fill: none; stroke: #1f2340; stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.fig .f-pt { font: 700 13.5px var(--f); fill: #1f2340; text-anchor: middle; pointer-events: none; }
.fig .f-nom { font: italic 600 12px var(--f); fill: #3b3f6b; text-anchor: middle; pointer-events: none; }
.fig .f-nom.hl { fill: #2f6bff; }
.fig .f-o { cursor: pointer; }
.fig .f-hit { fill: none; stroke: transparent; stroke-width: 24; stroke-linecap: round; pointer-events: stroke; }
.fig .f-hit.zone { fill: transparent; stroke-width: 4; pointer-events: all; }
.fig .f-o.ok .f-v { stroke: #13a35a; stroke-width: 3.4; }
.fig .f-o.ok .f-hit.zone { fill: rgba(34, 197, 94, .28); }
.fig .f-o.ko .f-v { stroke: #e0344c; stroke-width: 3; }
.fig .f-o.ko .f-hit.zone { fill: rgba(239, 68, 68, .25); }
.fig .f-o.montre .f-v { animation: f-blink .45s ease-in-out 6 alternate; }
.fig .f-o.montre .f-hit.zone { animation: f-blink-zone .45s ease-in-out 6 alternate; }
.fig .f-rapporteur { pointer-events: none; }
.fig .rp-body { fill: rgba(120, 190, 255, .2); stroke: #3b7be0; stroke-width: 1.2; }
.fig .rp-tick { stroke: #2a4c8f; stroke-width: .8; }
.fig .rp-out { font: 700 8.5px var(--f); fill: #1b3a8a; text-anchor: middle; }
.fig .rp-in { font: 650 7px var(--f); fill: #c2263e; text-anchor: middle; }
.fig .rp-centre { fill: #c2263e; }
.ang { position: relative; display: inline-block; font-style: normal; }
.ang::before { content: ""; position: absolute; left: 8%; right: 8%; top: -.2em; height: .3em; pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(50% - .065em), currentColor calc(50% - .045em), currentColor calc(50% + .045em), transparent calc(50% + .065em)) left / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - .065em), currentColor calc(50% - .045em), currentColor calc(50% + .045em), transparent calc(50% + .065em)) right / 50% 100% no-repeat; }
.fig .rp-mobile { transform-box: view-box; transform-origin: 0 0; cursor: grab; touch-action: none; }
.fig .rp-mobile.tenu { cursor: grabbing; }
.fig .rp-mobile.anim { transition: transform .7s cubic-bezier(.2, .9, .25, 1); }
.fig .rp-mobile .f-rapporteur { pointer-events: auto; }
.fig .rp-mobile .rp-tick, .fig .rp-mobile .rp-out, .fig .rp-mobile .rp-in { pointer-events: none; }
.fig .rp-mobile .rp-body { fill: rgba(120, 190, 255, .26); filter: drop-shadow(0 3px 5px rgba(20, 40, 90, .25)); transition: stroke .2s; }
.fig .rp-mobile.centre .rp-centre { fill: #13a35a; }
.fig .rp-mobile.pose .rp-body { stroke: #13a35a; stroke-width: 2.2; }
.fig .rp-tourne { cursor: alias; }
.fig .rp-tourne .rp-zone { fill: transparent; }
.fig .rp-tourne .rp-btn { fill: #fff; stroke: #3b7be0; stroke-width: 1.6; }
.fig .rp-tourne path { fill: none; stroke: #3b7be0; stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.fig .rp-tourne:hover .rp-btn { fill: #e6f0ff; }
.fig .f-o.trouve .f-v { stroke: #e0344c; stroke-width: 3.4; }
.fig .f-o.trouve .f-hit:not(.zone) { stroke: rgba(239, 68, 68, .2); }
.fig .f-o.trouve .f-hit.zone { fill: rgba(239, 68, 68, .22); stroke: #e0344c; stroke-width: 2; }
.fig .f-o.juste .f-v { stroke: #2f6bff; stroke-width: 3.2; }
.fig .f-o.juste .f-hit.zone { fill: rgba(47, 107, 255, .22); }
.fig .f-dot { fill: #1f2340; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .1em; font-size: .8em; line-height: 1.02; font-variant-numeric: lining-nums; }
.frac > span { display: block; padding: 0 .14em; }
.frac > span:first-child { border-bottom: .085em solid currentColor; padding-bottom: .06em; }
.frac > span:last-child { padding-top: .06em; }
.nd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nd-axe { fill: none; stroke: #1f2340; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nd-trait { stroke: #1f2340; stroke-width: 1.1; }
.nd-trait.long { stroke-width: 1.8; }
.nd-nb { font: 700 13px var(--fd); fill: #1f2340; text-anchor: middle; }
.nd-croix { fill: none; stroke: #c2263e; stroke-width: 2.4; stroke-linecap: round; }
.nd-pt { font: 800 16px var(--fd); fill: #c2263e; text-anchor: middle; }
.pt-svg { display: block; width: 100%; height: auto; max-height: min(52vh, 26rem); overflow: visible; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pt-part { fill: #fffdf6; stroke: #1f2340; stroke-width: 2; stroke-linejoin: round; transition: fill .2s; }
.pt-part.on { fill: #ff6fa5; }
.pt-pizza .pt-part { fill: #ffe7a6; stroke: #b9822f; }
.pt-pizza .pt-part.on { fill: #e8553d; }
.pt-croute { fill: #e2a54f; stroke: #b9822f; stroke-width: 2; }
.pt-fond { fill: #d6ad55; stroke: #a87f2c; stroke-width: 2; }
.pt-tablette .pt-part { fill: #ece6da; stroke: #8a6a52; stroke-width: 1.5; }
.pt-tablette .pt-part.on { fill: #7a4526; stroke: #3d1f0c; }
.pt-part.montre { animation: ptMontre .45s ease-in-out 6 alternate; }
.pt-haut { grid-area: haut; align-self: end; }
.pt-bas { grid-area: bas; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.pt-fig { grid-area: fig; padding: 1.2rem; }
.pt-compte { margin: 0; min-height: 1.4em; font: 700 1.05rem var(--f); color: var(--ink2); }
.qd-svg { display: block; width: 100%; height: auto; max-height: min(56vh, 30rem); overflow: visible; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.qd-case { fill: #fffdf6; stroke: #a9b8da; stroke-width: 1; transition: fill .15s; }
.qd-case.donne { fill: #5fa8ff; stroke: #3c63c9; }
.qd-case.on { fill: #ff6fa5; stroke: #c2265e; }
.qd-case.on.juste { fill: #3fbf7f; stroke: #1d7a4f; }
.qd-case.on.faux { fill: #c2263e; stroke: #7d0f22; }
.qd-case.montre { animation: qdMontre .45s ease-in-out 6 alternate; }
.qd-poly { fill: rgba(95, 168, 255, .55); stroke: #1f4f9a; stroke-width: 2.5; stroke-linejoin: round; }
.qd-axe { stroke: #c2263e; stroke-width: 3.5; stroke-linecap: round; }
.qd-nom { font: 800 16px var(--fd); fill: #c2263e; text-anchor: middle; paint-order: stroke; stroke: #fffdf6; stroke-width: 4px; stroke-linejoin: round; }
.tb-prop { border-collapse: collapse; margin: 0 auto; background: #fffdf6; color: #1f2340; font: 700 clamp(1.05rem, 1.7vw, 1.4rem) var(--f); font-variant-numeric: tabular-nums; }
.tb-prop th, .tb-prop td { border: 2px solid #1f2340; padding: .45em .75em; text-align: center; }
.tb-prop th { background: #e6edfb; font-size: .85em; text-align: left; }
.tb-prop td { min-width: 2.4em; }
.tb-q { background: #ffe9a8; color: #c2263e; font-weight: 800; }