.zone-cylindre{display:flex;justify-content:center}.scene-cylindre{position:relative;width:min(320px,100%);height:340px;perspective:1000px;touch-action:none}.scene-cylindre.tourne{cursor:grabbing}.scene-cylindre .monde-3d{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:transform 1.7s ease-in-out}.scene-cylindre.tourne .monde-3d{transition:none}.bande-3d{position:absolute;--trait:var(--blue-text);--trait-gauche:transparent;--trait-droit:transparent;box-shadow:inset 0 2px 0 var(--trait),inset 0 -2px 0 var(--trait),inset 2px 0 0 var(--trait-gauche),inset -2px 0 0 var(--trait-droit);background:color-mix(in srgb,var(--blue-transparent) 62%,var(--back));transform-style:preserve-3d;transform-origin:0 50%;transition:transform 1.7s ease-in-out}.monde-3d.roule .bande-3d{background:color-mix(in srgb,var(--blue-transparent) var(--teinte,62%),var(--back))}.bande-3d.premiere{--trait-gauche:var(--blue-text)}.bande-3d.derniere{--trait-droit:var(--blue-text)}.bande-3d.bout-ouvert.premiere{--trait-gauche:var(--red-text)}.bande-3d.bout-ouvert.derniere{--trait-droit:var(--red-text)}.bande-3d.deborde,.monde-3d.roule .bande-3d.deborde{--trait:var(--red-text);background:color-mix(in srgb,var(--red-transparent) 75%,var(--back))}.disque-3d{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--blue-transparent) 45%,var(--back));transition:transform 1.7s ease-in-out}.plateau .disque-3d svg{display:block;max-width:none;margin:0;overflow:visible}.disque-3d.disque-haut{transform-origin:50% 100%}.disque-3d.disque-bas{transform-origin:50% 0}.disque-3d .bord-disque{fill:none;stroke:currentColor;stroke-width:2}.disque-3d .rayon-disque{stroke:currentColor;stroke-width:1.5}.disque-3d .centre-disque{fill:currentColor}.plateau .disque-3d .legende-disque{font-size:12px}.rectangle-inconnu{position:absolute;box-sizing:border-box;border:2px dashed var(--blue-text)}.cote-hauteur,.cote-longueur{position:absolute;top:50%;white-space:nowrap;font-size:13px;transition:opacity .4s}.cote-hauteur{right:calc(100% + 6px);transform:translateY(-50%);color:var(--blue-text)}.cote-longueur{left:50%;transform:translate(-50%,-50%);color:var(--red-text);font-weight:700}.rectangle-inconnu .cote-longueur{color:var(--paragraph-color)}.monde-3d.roule .cote-hauteur,.monde-3d.roule .cote-longueur{opacity:0}.plateau .question-cylindre{margin:12px 0 6px;text-align:left}.plateau .saisie-cylindre{margin:6px 0 0}.monde-3d.roule .disque-3d .legende-disque{opacity:0}