/* Outil · Angle d'obturation (Shutter angle), id obturation : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ob-
   À gauche : l'obturateur rotatif (légende ouvert / fermé) et la comparaison figée (une roue à rayons à 360°, 180° et à ton angle, flou calculé) (zone fixe), le résultat en grand, l'info, Copier et le lien Ralenti.
   À droite : la cadence, le sens, puis seulement l'angle (curseur, valeurs) ou la vitesse (valeurs courantes, autre) :
   l'autre bloc est caché (demande du propriétaire), 5 lignes fixes. */
.ob .outil-fixe { align-items: stretch; }
.ob-dessin { display: grid; grid-template-columns: .8fr 1.6fr; gap: 18px; align-items: center; height: 210px; padding: 14px 18px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.ob-gauche { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ob-disque { width: 100%; max-height: 150px; }
.ob-legende { display: flex; align-items: center; gap: 5px; font: 500 10px/1 var(--mono); letter-spacing: .04em; color: var(--texte2); white-space: nowrap; }
.ob-legende i { width: 9px; height: 9px; border-radius: 2px; }
.ob-legende i + i, .ob-l-ferme { margin-left: 6px; }
.ob-l-ouvert { background: rgba(255, 163, 112, .75); }
.ob-l-ferme { background: #2a2622; box-shadow: inset 0 0 0 1px rgba(242, 240, 235, .35); }
.ob-fenetre { fill: rgba(255, 163, 112, .75); stroke: var(--filet); stroke-width: 1; }
.ob-pale { fill: #2a2622; stroke: rgba(242, 240, 235, .35); stroke-width: 1; }
.ob-axe { fill: var(--papier); }
.ob-tourne { animation: ob-tourne 2.4s linear infinite; transform-origin: 0 0; }
@keyframes ob-tourne { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ob-tourne { animation: none; } }
.ob-rendu { width: 100%; height: 160px; display: block; }
.ob-resultat { display: flex; align-items: baseline; gap: 12px; height: 40px; }
.ob-resultat b { font: 700 34px/1 var(--display); letter-spacing: -.02em; color: var(--peche); white-space: nowrap; }
.ob-resultat span { font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-info { flex: none; height: 3lh; margin: 0; overflow: hidden; }
.ob-trop b { color: var(--texte2); text-decoration: line-through; text-decoration-thickness: 2px; }
.ob-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ob-actions .pastille { cursor: pointer; }
.ob-actions .pastille:hover { translate: none; }
.ob-bloc { display: flex; flex-direction: column; gap: 12px; }
.ob-bloc[hidden] { display: none; }
.ob-perso { display: flex; align-items: center; gap: 8px; width: 160px; font: var(--valeur); color: var(--texte2); }
.ob-perso .saisie { flex: 1; min-width: 0; }
.ob-perso .saisie.actif { box-shadow: inset 0 0 0 1px var(--papier); }
.ob-eteint { opacity: .3; pointer-events: none; transition: opacity .4s var(--courbe); }
.ob-rangee { cursor: default; height: 46px; }
.ob-rangee.ob-ok .val { color: var(--papier); }
.ob-rangee.ob-risque .val { color: var(--peche); }
@media (max-width: 520px) { .ob-dessin { height: 250px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 12px; gap: 6px; } .ob-gauche { flex-direction: row; justify-content: center; } .ob-disque { width: 76px; height: 76px; } .ob-rendu { height: 140px; } }