/* Outil · Mire : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : mire- */

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : aperçu, infos, export, puis les réglages. Ordinateur : aperçu et export à gauche, réglages à droite. */
.mire .outil-fixe { align-items: center; }

/* Aperçu : la mire à l'échelle, sans contour */
.mire-zone { width: 100%; height: clamp(180px, 32vh, 300px); display: grid; place-items: center; }
@media (min-width: 960px) { .mire-zone { height: min(52vh, 520px); } }
.mire-apercu { display: block; border-radius: 4px; }

/* Infos et export */
.mire-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mire-actions .pastille:hover { translate: none; }

/* Plein écran : la mire seule, la plus grande possible, sur noir, sans curseur */
.mire-voile { position: fixed; inset: 0; z-index: 1000; background: #000; display: grid; place-items: center; cursor: none; }
.mire-voile canvas { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Réglages (un réglage masqué reste masqué, même s'il a un display propre) */
.mire [hidden] { display: none !important; }
/* Usage de la mire choisie : tous superposés dans la même case (hauteur de la plus longue, rien ne saute) */
.mire-usages { display: grid; margin-top: var(--dans-groupe); }
.mire-aplats { margin-top: var(--dans-groupe); }
.mire-usage { grid-area: 1 / 1; margin: 0; visibility: hidden; font-size: 13px; line-height: 1.55; color: var(--texte2); }
.mire-usage.actif { visibility: visible; }
/* Largeur × Hauteur (.dims, app/kit.css), sous les puces de résolution */
.mire-dims { margin-top: var(--dans-groupe); }
.mire-bascules { display: flex; flex-direction: column; margin-block: -6px; }   /* étiquettes et bloc d'infos, serrés l'un sous l'autre */
.mire-bascules:not(:has(.bascule:not([hidden]))) { display: none; }
.mire-importer { margin-top: var(--dans-groupe); cursor: pointer; }
.mire-importer:hover { translate: none; }
/* Projet et date côte à côte, infos en dessous ; compteur de caractères à droite du titre */
.mire-textes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--dans-groupe) 10px; }
.mire-textes label { display: block; }
.mire-champ-infos { grid-column: 1 / -1; }
.mire-textes .groupe { display: flex; justify-content: space-between; }
.mire-textes .groupe i { font-style: normal; color: var(--texte2); opacity: .7; }
.mire-champ-date { display: block; }
.mire-date { color-scheme: dark; }                              /* le calendrier du système, en sombre */
.mire-lien { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; color: var(--texte2); cursor: pointer; }
.mire-lien:hover { color: var(--papier); }
.mire-conseil { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--texte2); }