/* Outil · Infos média (Media info) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : mi-

   Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : la zone (puis l'aperçu), le résumé, ce qu'il faut savoir, les boutons, puis le détail.
   Ordinateur : tout ça à gauche, le détail à droite. */
.mi .outil-fixe { align-items: stretch; }

/* La zone : vide, un cadre en pointillés à toucher ; ensuite, l'aperçu aux proportions du fichier */
.mi-zone { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 52vh; margin: 0 auto; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; background: #000; transition: border-color .3s var(--courbe), background .3s var(--courbe); }
.mi-zone.vide { aspect-ratio: 4 / 3; max-height: 46vh; background: transparent; border: 1.5px dashed var(--filet); cursor: pointer; }
@media (min-width: 960px) { .mi-zone, .mi-zone.vide { max-height: 58vh; } .mi-zone.vide { aspect-ratio: 16 / 10; } }
.mi-zone.vide:hover, .mi.survol .mi-zone { border-color: var(--papier); }
.mi.survol .mi-zone { background: rgba(242, 240, 235, .04); }
.mi-zone:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.mi-zone.mi-sans-image { aspect-ratio: 16 / 7; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }

.mi-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; text-align: center; }
.mi-vide[hidden] { display: none; }
.mi-vide svg { width: 30px; height: 30px; margin-bottom: 6px; fill: none; stroke: var(--papier); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mi-vide b { font: 600 17px/1.2 var(--corps); color: var(--papier); }
.mi-glisser { font: 400 14px/1.4 var(--corps); color: var(--texte2); }
.mi-types { margin-top: 10px; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); text-wrap: balance; }
@media (pointer: coarse) { .mi-glisser { display: none; } }

.mi-apercu { position: absolute; inset: 0; display: grid; place-items: center; }
.mi-apercu[hidden] { display: none; }
.mi-apercu img, .mi-apercu video { display: block; width: 100%; height: 100%; object-fit: contain; }
.mi-repli { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--texte2); font: var(--valeur); letter-spacing: .06em; }
.mi-repli svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.mi-lecture { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(18, 16, 14, .72); color: var(--papier);
  font: var(--valeur); letter-spacing: .06em; }
.mi-lecture[hidden] { display: none; }

.mi-ios { margin-top: -8px; }
.mi-ios[hidden] { display: none; }
.mi-erreur { text-align: center; }

/* Le résumé : le nom du fichier, la ligne forte (4K UHD · 25 i/s), puis les pastilles */
.mi-resume { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mi-resume[hidden] { display: none; }
.mi-nom { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/1.3 var(--mono); letter-spacing: .03em; color: var(--texte2); }
.mi-titre { margin: 0 0 4px; font: 700 clamp(26px, 7.5vw, 40px)/1.05 var(--display); letter-spacing: -.03em; color: var(--papier); text-wrap: balance; }
.mi-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-puces span { border-radius: 999px; padding: 8px 13px; box-shadow: inset 0 0 0 1px var(--filet); color: var(--papier);
  font: var(--valeur); line-height: 1; letter-spacing: .06em; }

/* À savoir : un point pêche devant chaque remarque */
.mi-alertes { display: flex; flex-direction: column; gap: 10px; }
.mi-alertes[hidden] { display: none; }
.mi-alertes .groupe { padding: 0; }
.mi-alertes p { position: relative; margin: 0; padding-left: 17px; font: 400 14px/1.5 var(--corps); color: var(--texte2); }
.mi-alertes p::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--peche); }
.mi-alertes strong { color: var(--papier); font-weight: 500; }

.mi-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mi-actions[hidden] { display: none; }
.mi-actions .pastille:hover { translate: none; }

/* Le détail : une ligne par info, touchée = copiée ; les valeurs longues passent à la ligne */
.mi-intro[hidden], .mi-complet[hidden] { display: none; }
.mi-ligne { align-items: baseline; }
.mi-ligne .nom { flex: none; color: var(--texte2); font-weight: 400; }
.mi-ligne .val { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: right; color: var(--papier); }
.mi-ligne:hover .nom { color: var(--texte2); }
.mi-ligne:hover .val { color: var(--peche); }

/* Le rapport complet de MediaInfo, tel quel */
.mi-complet { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.mi-rapport { margin: 0; max-height: 60vh; overflow: auto; padding: 14px; border-radius: 12px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet);
  font: 400 11px/1.55 var(--mono); color: var(--texte2); white-space: pre; -webkit-user-select: text; user-select: text; }
.mi-rapport[hidden] { display: none; }