/* Outil · Crop factor : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : cp-
   À gauche : les deux capteurs à l'échelle (zone fixe), l'équivalent en grand (toucher = copier), l'info, Copier.
   À droite : ton objectif (focale, ouverture, fait pour), ton boîtier, la taille perso (grisée hors de Perso), puis ton objectif
   sur chaque capteur (9 lignes fixes). */
.cp .outil-fixe { align-items: stretch; }
.cp-zone { position: relative; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--filet-doux); background: rgba(242, 240, 235, .02); }
.cp-svg { width: 100%; height: auto; aspect-ratio: 480 / 320; display: block; }
.cp-masque { fill: rgba(12, 10, 9, .62); }
.cp-cadre-tien { fill: none; stroke: rgba(255, 90, 31, .9); stroke-width: 1.5; }
.cp-cadre-autre { fill: none; stroke: rgba(242, 240, 235, .75); stroke-width: 1.2; stroke-dasharray: 5 4; }
.cp-coin { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; }
.cp-etiq { font: 600 11px var(--mono); letter-spacing: .03em; fill: var(--papier); paint-order: stroke; stroke: rgba(12, 10, 9, .75); stroke-width: 3.5px; stroke-linejoin: round; }
.cp-etiq2 { font-weight: 500; fill: rgba(242, 240, 235, .78); }
.cp-etiq-tien { fill: #ffd2b8; }
/* Les deux boîtiers, bien distincts : le tien (orange), l'autre (pointillés), comme sur le schéma */
.cp-bloc { display: flex; flex-direction: column; gap: 10px; }
.cp-boitier .groupe { display: flex; align-items: center; gap: 8px; }
.cp-marque { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.cp-le-tien .cp-marque { box-shadow: inset 0 0 0 1.5px var(--orange); background: rgba(255, 90, 31, .18); }
.cp-le-tien .groupe { color: var(--papier); }
.cp-resultat { display: flex; flex-direction: column; gap: 6px; }
.cp-grand { height: 44px; border: 0; background: none; padding: 0; text-align: left; cursor: copy; font: 700 32px/1 var(--display); letter-spacing: -.02em; color: var(--peche);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.cp-actions { display: flex; justify-content: center; }
.cp-actions .pastille { cursor: pointer; }
.cp-actions .pastille:hover { translate: none; }
.cp-actions .pastille:disabled { opacity: .3; cursor: default; }
.cp-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-eteint { opacity: .3; pointer-events: none; transition: opacity .4s var(--courbe); }
.cp-rangee { cursor: default; height: 58px; }   /* hauteur fixe : une valeur sur 2 lignes au plus */
.cp-rangee .val { white-space: normal; text-align: right; font-variant-numeric: tabular-nums; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 959px) { .cp .outil-defile > div:nth-child(-n+2) { order: -1; } }   /* téléphone : l'objectif et le boîtier d'abord */

/* Objectif fait pour : le format et les gammes qui l'indiquent ; le cercle d'image sur le schéma */
.cp-sous { margin-top: 4px; }
.cp-couv { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; padding-top: 7px; padding-bottom: 7px; line-height: 1.1; }
.cp-couv b { font-weight: 600; }
.cp-couv i { font-style: normal; font-size: 10px; opacity: .65; }
.cp-cercle { fill: none; stroke: rgba(242, 240, 235, .3); stroke-width: 1; stroke-dasharray: 2 5; }   /* repère discret : le vrai bord est le fondu */

/* Ton objectif sur chaque capteur : 9 lignes fixes, ton boîtier en orange ; toucher une ligne la choisit */
.cp-ligne { height: 44px; }
.cp-ligne .val { font-variant-numeric: tabular-nums; }
.cp-ligne.actuelle .nom { color: var(--papier); }
.cp-ligne.actuelle .val { color: var(--peche); }
.cp-liens { display: flex; margin-top: -8px; }