/* Outil · Exposition (Exposure) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : ex-
   À gauche : le triangle d'exposition (zone fixe) : trois roulettes aux coins (ouverture en haut, vitesse en bas à gauche,
   ISO en bas à droite), reliées par un triangle fin ; au centre l'IL et le ND ; sous chaque roulette la valeur de départ,
   l'écart en diaphs et ce que le réglage change (profondeur de champ, flou de bougé, bruit). Celle qui s'adapte : pêche, cadenas.
   Puis l'info, Copier, le lien Angle d'obturation. À droite : l'exposition de départ (3 curseurs), ce qui s'adapte, le ND. */
.ex .outil-fixe { align-items: stretch; }
/* Les aperçus : la même scène au départ et avec la nouvelle exposition */
.ex-apercus { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.ex-apercu { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ex .outil-fixe { gap: 14px; }
.ex-scene { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--filet); background: #12100e; }
.ex-grain { mix-blend-mode: overlay; pointer-events: none; }   /* neutre : ni plus clair ni plus sombre en moyenne */
.ex-apercu figcaption { display: flex; align-items: baseline; gap: 6px; font: 500 10.5px/1.25 var(--mono); letter-spacing: .03em; color: var(--texte2); min-width: 0; }
.ex-apercu figcaption b { color: var(--papier); font-weight: 600; }
.ex-apercu figcaption span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-apercu[data-apercu="n"] figcaption b { color: var(--peche); }
/* La légende des aperçus : ce que chaque partie de l'image montre */
.ex-cles { grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; height: 2.6em; align-content: flex-start;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .03em; color: var(--texte2); }
.ex-cles span { white-space: nowrap; }
.ex-cles b { color: var(--papier); font-weight: 600; }

.ex-triangle { position: relative; width: 100%; aspect-ratio: 480 / 290; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ex-lignes { position: absolute; inset: 0; width: 100%; height: 100%; }
.ex-lignes path { fill: rgba(242, 240, 235, .025); stroke: rgba(242, 240, 235, .16); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ex-centre { position: absolute; left: 50%; top: 57%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; }
.ex-centre span { font: 500 10px/1 var(--mono); letter-spacing: .06em; color: var(--texte2); }
.ex-centre b { font: 700 22px/1 var(--display); letter-spacing: -.01em; color: var(--papier); }
.ex-centre i { font: 600 11px/1 var(--mono); font-style: normal; color: var(--peche); height: 1em; }

/* Un coin : le nom (toucher = c'est lui qui s'adapte), la roulette, le départ et l'écart, l'effet sur l'image */
.ex-coin { position: absolute; width: 39%; display: flex; flex-direction: column; align-items: center; gap: 6px; translate: -50% 0; }
.ex-ouv { left: 50%; top: 10%; }   /* la roulette centrée sur la pointe, comme celles du bas sur leurs coins */
.ex-vit { left: 21.3%; top: 59%; }
.ex-iso { left: 78.7%; top: 59%; }
.ex-nom-roue { display: flex; align-items: center; gap: 6px; height: 20px; border: 0; background: none; padding: 0 4px; cursor: pointer; font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.ex-nom-roue i { display: none; width: 12px; height: 12px; }
.ex-nom-roue i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ex-nom-roue:hover { color: var(--papier); }
.ex-auto .ex-nom-roue { color: var(--peche); cursor: default; }
.ex-auto .ex-nom-roue i { display: inline-flex; }

.ex-roue { position: relative; width: 100%; height: 50px; border-radius: 14px; overflow: hidden; cursor: ew-resize; touch-action: none; outline: none;
  background: linear-gradient(to right, rgba(18, 16, 14, .95), rgba(42, 38, 34, .9) 50%, rgba(18, 16, 14, .95)); box-shadow: inset 0 0 0 1px var(--filet), inset 0 8px 14px rgba(0, 0, 0, .35), inset 0 -8px 14px rgba(0, 0, 0, .35); }
.ex-roue:focus-visible { box-shadow: inset 0 0 0 1.5px var(--orange); }
.ex-bande { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; transition: transform .22s var(--courbe); will-change: transform; }
.ex-roue.tenue .ex-bande { transition: transform .08s linear; }
.ex-bande span { flex: none; width: 64px; text-align: center; font: 500 11px/1 var(--mono); color: rgba(242, 240, 235, .38); white-space: nowrap; }
.ex-bande span::before { content: ''; display: block; width: 1px; height: 6px; margin: 0 auto 6px; background: rgba(242, 240, 235, .25); }
.ex-bande span.ex-hors { font-style: italic; color: rgba(242, 240, 235, .22); }
/* La valeur choisie, dans une fenêtre au centre de la roulette */
.ex-valeur { position: absolute; left: 50%; top: 50%; translate: -50% -50%; min-width: 46%; padding: 6px 10px; border-radius: 10px; text-align: center; pointer-events: none;
  background: #2b2723; box-shadow: 0 0 0 1px rgba(242, 240, 235, .3), 0 4px 14px rgba(0, 0, 0, .45); font: 700 15px/1.1 var(--display); letter-spacing: -.01em; color: var(--papier); white-space: nowrap; }
.ex-auto .ex-roue { cursor: default; }
.ex-auto .ex-valeur { color: var(--peche); box-shadow: 0 0 0 1.5px var(--peche), 0 4px 14px rgba(0, 0, 0, .45); }
.ex-hors-plage .ex-valeur { text-decoration: underline dotted var(--peche); text-underline-offset: 4px; }
.ex-sous { font: 500 11px/1.2 var(--mono); color: var(--papier); white-space: nowrap; height: 1.2em; }
.ex-effet { font: 500 10px/1.2 var(--mono); letter-spacing: .04em; color: var(--texte2); height: 1.2em; }

.ex-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.ex-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ex-actions .pastille { cursor: pointer; }
.ex-actions .pastille:hover { translate: none; }
.ex-groupe { display: flex; flex-direction: column; gap: 14px; }
.ex-titre { color: var(--papier); }
.ex-curseur b { min-width: 6.5em; text-align: right; }

/* Téléphone : des roulettes un peu plus larges, la vitesse et les ISO plus bas */
@media (max-width: 560px) {
  .ex-triangle { aspect-ratio: 360 / 360; }
  .ex-coin { width: 46%; }
  .ex-vit { left: 24%; top: 56%; }
  .ex-iso { left: 76%; top: 56%; }
  .ex-bande span { width: 54px; font-size: 10.5px; }
  .ex-valeur { font-size: 14px; padding: 5px 8px; }
  .ex-sous { font-size: 10.5px; }
}