/* ==========================================================================
   QORSEC — Lecteur de rapports DMARC (/outils/rapports-dmarc.html)
   Styles propres à l'outil. S'appuie sur les jetons de /assets/css/site.css.
   Couleurs : cyan = données (conformes), orange = signalisation (non conformes, alertes),
   jamais d'orange sur un bouton.
   ========================================================================== */

.tool-main > *, #tool-results, #tool-output, #dm-report { min-width: 0; }

/* ---------------------------------------------------------------- dépôt */
.dm-drop {
  display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 32px 18px; border: 2px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--paper-50); color: var(--fg-muted);
  transition: border-color var(--t-fast, .15s), background-color var(--t-fast, .15s);
}
.dm-drop svg { width: 34px; height: 34px; color: var(--cyan-700); margin-bottom: 4px; }
.dm-drop:hover, .dm-drop.is-over { border-color: var(--blue-600); background: rgba(29, 78, 216, .045); }
.dm-drop:focus-within { outline: 2px solid var(--focus, var(--blue-600)); outline-offset: 3px; }
.dm-drop__title { font-weight: 800; font-size: 1.08rem; color: var(--fg); }
.dm-drop__sub { font-size: .9rem; max-width: 46ch; }
.dm-actions { gap: 8px; }
.dm-option { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--white); }
.dm-option .check { font-weight: 700; }
.dm-option__help { margin: 6px 0 0 28px; font-size: .84rem; color: var(--fg-subtle); }
.dm-howto { margin-top: var(--s-5); }
.dm-howto p { font-size: .93rem; }
.dm-howto code, .dm-code { font-family: var(--mono); font-size: .85em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- fichiers lus */
#dm-files { margin-top: var(--s-4); }
.dm-files summary { font-weight: 700; }
.dm-files__warn { font-weight: 600; color: var(--orange-700); font-size: .88rem; }
.dm-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dm-file { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline; }
.dm-file code { font-family: var(--mono); font-size: .82rem; overflow-wrap: anywhere; min-width: 0; }
.dm-ok { color: var(--green-700); font-weight: 700; font-size: .85rem; }
.dm-ko { color: var(--orange-700); font-weight: 700; font-size: .85rem; }
.dm-issues { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--border); display: grid; gap: 4px; }
.dm-issue { font-size: .84rem; color: var(--fg-muted); overflow-wrap: anywhere; }
.dm-issue strong { font-weight: 800; margin-right: 4px; }
.dm-issue--error strong { color: var(--red-700); }
.dm-issue--warn strong { color: var(--orange-700); }
.dm-issue--info strong { color: var(--cyan-700); }
.dm-issue code { font-family: var(--mono); font-size: .95em; }

/* ---------------------------------------------------------------- rapport */
.dm-block { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--border); min-width: 0; }
.dm-block--first { padding-top: 0; margin-top: 0; border-top: 0; }
.dm-h2 { font-size: 1.35rem; margin: 0 0 14px; letter-spacing: -.02em; }
.dm-h { font-size: 1.12rem; margin: 0 0 6px; letter-spacing: -.01em; }
.dm-sub { margin: 0 0 14px; font-size: .9rem; color: var(--fg-subtle); }
.dm-note { margin: 10px 0 0; font-size: .86rem; color: var(--fg-subtle); }
.dm-note--signal { color: var(--orange-700); font-weight: 600; }
.dm-sample {
  margin: 0 0 14px; padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(14, 165, 233, .08); border: 1px dashed rgba(3, 105, 161, .35);
  color: var(--cyan-700); font-size: .85rem; font-weight: 600;
}
.dm-domain-filter { max-width: 340px; margin-bottom: 14px; }

.dm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-kpis .stat { padding: 18px 18px; background: var(--white); }
.dm-kpis .stat__value { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.dm-kpis .stat__label { font-size: .84rem; margin-top: 8px; }
@media (max-width: 760px) { .dm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dm-dl { display: grid; gap: 0; margin: 18px 0 0; }
.dm-dl > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.dm-dl > div:last-child { border-bottom: 0; }
.dm-dl dt { font-weight: 700; font-size: .9rem; color: var(--fg); }
.dm-dl dd { margin: 0; font-size: .92rem; color: var(--fg-muted); overflow-wrap: anywhere; min-width: 0; }
.dm-dl dd strong { color: var(--fg); }
.dm-dl .dm-note { display: block; margin-top: 4px; font-size: .8rem; }
@media (max-width: 640px) { .dm-dl > div { grid-template-columns: minmax(0, 1fr); } }

/* constats */
.dm-findings .check-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
.check-row--info .check-row__icon { font-style: normal; }
.dm-vol { font-weight: 800; font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--fg); white-space: nowrap; }
.dm-ips { margin-top: 6px; font-size: .82rem; color: var(--fg-subtle); overflow-wrap: anywhere; }
.dm-ips code { font-family: var(--mono); font-size: .95em; padding: 1px 5px; border-radius: 4px; background: var(--paper-50); border: 1px solid var(--border); }

/* graphique */
.dm-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 8px; font-size: .86rem; color: var(--fg-muted); }
.dm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dm-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.dm-sw--pass { background: var(--cyan-500); }
.dm-sw--fail { background: var(--orange-600); }
.dm-chart-wrap { position: relative; }
.dm-chart { display: block; width: 100%; height: auto; overflow: visible; }
.dm-chart .dm-grid { stroke: var(--line-200, #e4e9f2); stroke-width: 1; }
.dm-chart .dm-base { stroke: var(--border-strong); stroke-width: 1; }
.dm-chart .dm-axis { fill: var(--fg-subtle); font-size: 12px; font-family: inherit; font-variant-numeric: tabular-nums; }
.dm-chart .dm-pass { fill: var(--cyan-500); }
.dm-chart .dm-fail { fill: var(--orange-600); }
.dm-chart .dm-hit { fill: transparent; }
.dm-chart .dm-bar { cursor: default; outline: none; }
.dm-chart .dm-bar:hover .dm-hit, .dm-chart .dm-bar:focus .dm-hit { fill: rgba(29, 78, 216, .06); }
.dm-chart .dm-bar:focus-visible .dm-hit { stroke: var(--blue-600); stroke-width: 2; }
.dm-tip {
  position: absolute; top: -6px; transform: translate(-50%, -100%); z-index: 2; pointer-events: none;
  padding: 6px 10px; border-radius: var(--r-sm); background: var(--navy-800); color: #fff;
  font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: var(--sh-2);
}
.dm-chart-data { margin-top: 14px; }

/* tableau des IP */
.dm-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.dm-filters .btn[aria-pressed="true"] { --btn-bg: var(--navy-800); --btn-fg: #fff; --btn-bd: var(--navy-800); }
.dm-count { font-variant-numeric: tabular-nums; opacity: .8; }
.dm-table { font-size: .86rem; min-width: 1040px; }
.dm-table th, .dm-table td { padding: 10px 12px; }
.dm-table tbody th { white-space: nowrap; }
.dm-table tbody th code { font-family: var(--mono); font-size: .9em; font-weight: 700; }
.dm-table td.num { white-space: nowrap; }
.dm-doms { overflow-wrap: anywhere; min-width: 140px; max-width: 240px; }
.dm-lbl { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); }
.dm-ptr, .dm-svc, .dm-small, .dm-why { display: block; font-size: .78rem; color: var(--fg-subtle); font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
.dm-ptr { font-family: var(--mono); max-width: 220px; }
.dm-svc { color: var(--cyan-700); font-weight: 700; }
.dm-why { margin-top: 4px; max-width: 230px; }
.dm-cls-cell { min-width: 190px; }
.dm-res--ok { color: var(--green-700); }
.dm-res--ko { color: var(--orange-700); }
.dm-res .muted { color: var(--fg-subtle); }
.dm-cls { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 800; white-space: nowrap; border: 1px solid; }
.dm-cls span { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; font-size: .68rem; }
.dm-cls--legit { color: var(--green-700); border-color: rgba(21, 128, 61, .3); background: rgba(34, 197, 94, .08); }
.dm-cls--legit span { background: var(--green-700); }
.dm-cls--review { color: var(--orange-700); border-color: rgba(184, 77, 6, .3); background: rgba(220, 94, 9, .07); }
.dm-cls--review span { background: var(--orange-600); }
.dm-cls--fail { color: var(--red-700); border-color: rgba(185, 28, 28, .3); background: rgba(239, 68, 68, .07); }
.dm-cls--fail span { background: var(--red-700); }
#dm-show-all { margin-top: 10px; }
.dm-export-note { margin: 10px 0 0; font-size: .82rem; color: var(--fg-subtle); }

/* méthode */
.dm-method .card p { font-size: .93rem; }

/* ---------------------------------------------------------------- impression */
@media print {
  .dm-table { min-width: 0; font-size: 8pt; }
  .dm-table th, .dm-table td { padding: 4px 5px; }
  .dm-doms, .dm-ptr { max-width: none; }
  .dm-cls-cell, .dm-doms { min-width: 0; }
  .dm-cls { white-space: normal; font-size: 7pt; padding: 2px 6px; }
  .dm-table .dm-nw, .dm-table td.num { white-space: normal; }
  .dm-table { table-layout: fixed; width: 100%; }
  .dm-table thead th { white-space: normal; letter-spacing: 0; font-size: 6.5pt; text-transform: none; overflow-wrap: break-word; }
  .dm-table tbody th { white-space: normal; }
  .dm-table tbody th code { font-size: 7pt; overflow-wrap: anywhere; }
  .dm-table .dm-why, .dm-table .dm-small { font-size: 6.5pt; max-width: none; }
  .dm-table .dm-doms { font-size: 7pt; }
  /* largeurs indicatives A4 : la place va aux domaines, pas aux colonnes chiffrées */
  .dm-table th:nth-child(1) { width: 14%; } .dm-table th:nth-child(2) { width: 12%; }
  .dm-table th:nth-child(3), .dm-table th:nth-child(4) { width: 9%; } .dm-table th:nth-child(5) { width: 8%; }
  .dm-table th:nth-child(6) { width: 10%; } .dm-table th:nth-child(7) { width: 14%; }
  .dm-table th:nth-child(8) { width: 13%; } .dm-table th:nth-child(9) { width: 11%; }
  .dm-tip, .dm-filters, .dm-chart-data, #dm-files, .dm-domain-filter { display: none !important; }
  .dm-kpis .stat { padding: 10px; }
  .dm-block { break-inside: auto; }
  .dm-chart { max-height: 200px; }
  .dm-chart .dm-pass, .dm-sw--pass { fill: #0ea5e9; background: #0ea5e9; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .dm-chart .dm-fail, .dm-sw--fail { fill: #dc5e09; background: #dc5e09; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------------------------------------------------------------- tableau des IP en cartes (mobile)
   Sous 720 px, chaque IP devient une carte : l'intitulé de colonne (data-label) précède chaque valeur,
   le classement remonte juste sous l'adresse. Plus de défilement horizontal d'un tableau de 1 040 px. */
.dm-nw { white-space: nowrap; }
@media screen and (max-width: 720px) {
  .dm-table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .dm-table { min-width: 0; display: block; }
  .dm-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dm-table tbody { display: grid; gap: 10px; }
  .dm-table tbody tr { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); padding: 12px 14px; }
  .dm-table tbody tr:hover td { background: none; }
  .dm-table tbody th { order: -2; padding: 0 0 8px; border: 0; white-space: normal; }
  .dm-table tbody th code { font-size: 1rem; }
  .dm-table td { display: block; position: relative; min-height: 2.2em; padding: 7px 0 7px 124px; border: 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
  .dm-table td::before { content: attr(data-label); position: absolute; left: 0; top: 9px; width: 112px; font-size: .68rem; line-height: 1.3; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); }
  .dm-table td.num { text-align: left; }
  .dm-table td.dm-cls-cell { order: -1; border-top: 0; padding: 0 0 8px; min-height: 0; }
  .dm-table td.dm-cls-cell::before { content: none; }
  .dm-doms, .dm-why { min-width: 0; max-width: none; }
}