/* Dimensions et métadonnées d'une image (/outils-seo/metadonnees-image/, /en/seo-tools/image-metadata/), Nemo Ciment
   Après styles.css, landing.css et outils.css, dont il reprend .outil, .champ, .source,
   .verdicts et .r-table. */

/* --- zone de dépôt --- */
.depot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 22px 18px; box-sizing: border-box; text-align: center; border: 1.5px dashed rgba(255,255,255,.22); border-radius: 14px; background: #0d0d0f; cursor: pointer; transition: border-color .2s, background .2s; }
.depot:hover, .depot.survol, .depot:focus-within { border-color: var(--pink); background: rgba(34,197,94,.06); }
.depot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.depot .depot-titre { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin: 0; }
.depot .depot-sous { font-size: 14px; color: var(--muted); margin: 0; }
.champ label.depot { display: flex; font-family: var(--font-body); font-size: 15px; margin: 0; }
.im-vide { font-size: 14px; color: var(--muted-2); margin: 8px 0 0; }
.outil .source.im-adresse { border-bottom: 0; border-top: 1px solid var(--line); margin: 0 0 22px; padding: 22px 0 0; }

/* --- résultats --- */
.resultats [hidden] { display: none; }
.im-tete { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 22px; align-items: start; margin: 14px 0 0; }
.im-apercu { margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px; }
/* image-orientation: from-image est la valeur initiale ; rappelée ici, l'aperçu montre l'image comme un navigateur l'affiche. */
.im-apercu img { display: block; max-width: 100%; max-height: 320px; margin: 0 auto; height: auto; image-orientation: from-image; }
.im-table { margin-top: 0; }
.im-table tbody th[scope] { width: 38%; color: var(--muted); }
.im-table td { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.im-table td a { color: var(--pink); font-style: italic; }

.resultats h3 { font-size: 19px; margin: 30px 0 8px; }
.im-alertes { list-style: none; margin: 8px 0 0; padding: 0; }
.im-alertes li { position: relative; margin: 0 0 10px; padding: 12px 14px 12px 34px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; line-height: 1.55; color: #d0d0d4; background: rgba(255,255,255,.02); }
.im-alertes li::before { content: ""; position: absolute; left: 14px; top: 1.2em; width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.im-alertes li.coupe { border-color: rgba(245,165,36,.35); }
.im-alertes li.coupe::before { background: #f5a524; }
.im-alertes li.ok::before { background: var(--pink); }
.im-alertes a { color: var(--pink); font-style: italic; white-space: nowrap; }

.im-nettoyer { margin: 26px 0 0; padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.im-nettoyer .btn:disabled { opacity: .5; cursor: not-allowed; }
.im-nettoyer p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 12px 0 0; }
.im-nettoyer p.im-rappel { color: #f5c264; }
.im-nettoyer .verdicts:empty { display: none; }
.im-section .r-note { margin-top: 4px; }

@media (max-width: 700px) {
  .im-tete { grid-template-columns: minmax(0, 1fr); }
  .im-apercu img { max-height: 260px; }
}
@media (max-width: 640px) {
  .im-table tr { grid-template-columns: minmax(0, 1fr); }
  .im-table tbody th[scope] { font-size: 13px; }
  .im-table td.r-detail { grid-column: auto; font-size: 15px; }
}