/**
 * Les cinq outils — habillage.
 *
 * Chargé uniquement sur les pages d'outils. Il reprend les jetons du système
 * Norilo (site.css) : mêmes couleurs, même typographie, même trame. L'objectif
 * est qu'un outil ait l'air d'appartenir au site, pas d'un service tiers
 * encastré dans une page.
 *
 * Règle héritée du reste du projet : sur une surface sombre, aucune couleur ne
 * se laisse hériter — le thème repeint les éléments à la spécificité d'élément.
 */

/* --- ouverture d'une page d'outil ------------------------------------------
   Titre et outil dans la même section : l'interface est utilisable sans
   défiler, ce qui est la première chose qu'on attend d'un outil. Le padding
   d'ouverture est réduit d'autant. */
.nse-tool-open { padding-block: calc(var(--header-h) + clamp(28px, 4vw, 56px)) clamp(40px, 5vw, 72px); }
.nse-tool-intro { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 40px); }
.nse-tool-intro .nse-display { margin-bottom: .35em; }
.nse-tool-intro .nse-lead { margin: 0; }

/* --- l'atelier : le cadre commun ------------------------------------------ */
.nse-tool {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(20px, 2.6vw, 38px);
}
.nse-tool-panel { display: grid; gap: 16px; align-content: start; }
.nse-tool-panel h2 { font-size: var(--t-h3); margin: 0; }
.nse-tool-panel > p { margin: 0; font-size: var(--t-small); color: var(--muted); }

.nse-tool-field { display: grid; gap: 7px; }
.nse-tool-field > span { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nse-tool-field input,
.nse-tool-field select,
.nse-tool-field textarea {
  width: 100%;
  min-height: 48px;                 /* cible tactile confortable */
  padding: 12px 14px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;                  /* 16px : évite le zoom automatique iOS */
  border-radius: 0;
}
.nse-tool-field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.nse-tool-field input:focus-visible,
.nse-tool-field select:focus-visible,
.nse-tool-field textarea:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.nse-tool-field input[aria-invalid="true"] { border-color: var(--signal); }
.nse-tool-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; }
.nse-tool-check-inline { display: flex; align-items: flex-start; gap: 10px; font-size: var(--t-small); color: var(--body); }
.nse-tool-check-inline input { width: 24px; height: 24px; min-height: 24px; flex: none; margin-top: 1px; }

/* --- sortie ---------------------------------------------------------------- */
.nse-tool-output { min-height: 180px; display: grid; align-content: start; gap: 18px; }
.nse-tool-hint, .nse-tool-loading { margin: 0; font-size: var(--t-small); color: var(--muted); }
.nse-tool-loading::after { content: " …"; }
.nse-tool-error {
  margin: 0; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--signal) 34%, transparent);
  background: var(--signal-tint, rgba(142, 31, 47, .06));
  color: var(--signal);
  font-size: var(--t-small);
}
.nse-tool-warning {
  margin: 0; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--accent-tint);
  font-size: var(--t-small); color: var(--accent-deep);
}
.nse-tool-note { margin: 0; font-size: var(--t-label); line-height: 1.5; color: var(--muted); }

/* --- constats -------------------------------------------------------------- */
.nse-tool-score { display: flex; align-items: center; gap: 18px; }
.nse-tool-score-value {
  font-family: var(--font-mono); font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1; color: var(--accent-deep);
}
.nse-tool-score div { display: grid; gap: 3px; }
.nse-tool-score b { font-size: var(--t-small); color: var(--ink); }
.nse-tool-score span { font-size: var(--t-label); color: var(--muted); word-break: break-all; }

.nse-tool-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(120px, 45%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-tool-metrics > div { display: grid; gap: 3px; padding: 14px 16px; background: var(--paper); }
.nse-tool-metrics b { font-family: var(--font-mono); font-size: 1.35rem; color: var(--ink); }
.nse-tool-metrics span { font-size: var(--t-label); color: var(--muted); }

.nse-tool-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-tool-check { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 14px 16px; background: var(--paper); }
.nse-tool-check > div { display: grid; gap: 4px; }
.nse-tool-check b { font-size: var(--t-small); color: var(--ink); }
.nse-tool-check-found { font-size: var(--t-label); color: var(--body); word-break: break-word; }
.nse-tool-check-action { font-size: var(--t-label); line-height: 1.5; color: var(--muted); }
.nse-tool-check-tag {
  align-self: start; padding: 3px 8px;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .05em;
  border: 1px solid var(--line);
}
.nse-tool-check.is-error .nse-tool-check-tag { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); }
.nse-tool-check.is-warn .nse-tool-check-tag { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.nse-tool-check.is-ok .nse-tool-check-tag { color: var(--muted); }

/* --- QR code ---------------------------------------------------------------- */
.nse-tool-qr { display: grid; place-items: center; padding: clamp(14px, 2vw, 26px); border: 1px solid var(--line); background: #fff; }
.nse-tool-qr svg { width: min(100%, 320px); height: auto; }

/* --- optimiseur d'images ----------------------------------------------------- */
.nse-tool-drop {
  display: grid; place-items: center; gap: 8px;
  padding: clamp(26px, 4vw, 48px);
  border: 1px dashed var(--muted-soft);
  background: var(--paper);
  text-align: center;
  transition: border-color var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease);
}
.nse-tool-drop.is-over { border-color: var(--accent); background: var(--accent-tint); }
.nse-tool-drop b { font-size: var(--t-small); color: var(--ink); }
.nse-tool-drop span { font-size: var(--t-label); color: var(--muted); }
.nse-tool-files { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-tool-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 16px; background: var(--paper); }
.nse-tool-files b { grid-column: 1; font-size: var(--t-small); color: var(--ink); word-break: break-all; }
.nse-tool-files span { grid-column: 1; font-size: var(--t-label); color: var(--muted); }
.nse-tool-files .nse-btn { grid-column: 2; grid-row: 1 / span 2; }
.nse-tool-files li.is-error b { color: var(--signal); }

/* --- mentions légales --------------------------------------------------------- */
.nse-tool-legal { border: 1px solid var(--line); background: var(--paper); max-height: 460px; overflow: auto; }
.nse-tool-legal pre {
  margin: 0; padding: clamp(16px, 2vw, 24px);
  font-family: var(--font-mono); font-size: var(--t-label); line-height: 1.7;
  color: var(--body); white-space: pre-wrap; word-break: break-word;
}

.nse-tool-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- le hub -------------------------------------------------------------------- */
.nse-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nse-tools-grid > a {
  display: grid; gap: 8px; align-content: start;
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--paper);
  text-decoration: none;
  transition: background-color var(--d-micro) var(--ease);
}
.nse-tools-grid > a:hover { background: var(--paper-2); }
.nse-tools-grid .nse-num { color: var(--accent-deep); }
.nse-tools-grid h3 { margin: 0; font-size: var(--t-h3); }
.nse-tools-grid p { margin: 0; font-size: var(--t-small); color: var(--muted); }
.nse-tools-grid em { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label); color: var(--muted); }

/* --- mouvement ---------------------------------------------------------------
   Trois gestes, pas un catalogue d'effets. Chacun dit quelque chose de ce que
   l'outil vient de faire.

   1. Le balayage du QR — le code se révèle sous une ligne qui le traverse,
      comme un scanner le lirait. C'est la seule animation du site qui imite
      l'usage réel de l'objet produit.
   2. Les constats tombent dans l'ordre de gravité, pas tous ensemble : on lit
      d'abord ce qui est à corriger.
   3. Le score se compose au lieu d'apparaître : un chiffre qui s'installe se
      retient mieux qu'un chiffre qui surgit.

   Tout est neutralisé sous prefers-reduced-motion : le résultat reste complet,
   seule la mise en scène disparaît. */

.nse-tool-qr svg { animation: nse-qr-balayage 900ms var(--ease, cubic-bezier(.22,1,.36,1)) both; }
@keyframes nse-qr-balayage {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.nse-tool-qr { position: relative; overflow: hidden; }
.nse-tool-qr::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 2px;
  background: var(--accent);
  animation: nse-qr-ligne 900ms var(--ease, cubic-bezier(.22,1,.36,1)) both;
  pointer-events: none;
}
@keyframes nse-qr-ligne {
  from { top: 0; opacity: 1; }
  85%  { opacity: 1; }
  to   { top: 100%; opacity: 0; }
}

.nse-tool-checks .nse-tool-check {
  animation: nse-tool-constat 420ms var(--ease, cubic-bezier(.22,1,.36,1)) backwards;
}
.nse-tool-checks .nse-tool-check:nth-child(1) { animation-delay: 40ms; }
.nse-tool-checks .nse-tool-check:nth-child(2) { animation-delay: 90ms; }
.nse-tool-checks .nse-tool-check:nth-child(3) { animation-delay: 140ms; }
.nse-tool-checks .nse-tool-check:nth-child(4) { animation-delay: 190ms; }
.nse-tool-checks .nse-tool-check:nth-child(n+5) { animation-delay: 240ms; }
@keyframes nse-tool-constat {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.nse-tool-score-value { animation: nse-tool-score 620ms var(--ease, cubic-bezier(.22,1,.36,1)) both; }
@keyframes nse-tool-score {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.94); }
  to   { opacity: 1; transform: none; }
}

.nse-tool-metrics > div { animation: nse-tool-constat 420ms var(--ease, cubic-bezier(.22,1,.36,1)) backwards; }
.nse-tool-metrics > div:nth-child(2) { animation-delay: 60ms; }
.nse-tool-metrics > div:nth-child(3) { animation-delay: 120ms; }
.nse-tool-metrics > div:nth-child(4) { animation-delay: 180ms; }

/* Micro-interaction de saisie : le champ actif se distingue par son filet, pas
   par un halo coloré qui concurrencerait le focus clavier. */
.nse-tool-field input, .nse-tool-field select, .nse-tool-field textarea {
  transition: border-color var(--d-micro, 160ms) var(--ease, ease), background-color var(--d-micro, 160ms) var(--ease, ease);
}
.nse-tool-field input:hover, .nse-tool-field textarea:hover { border-color: var(--muted-soft); }

/* Attente : le bouton dit qu'il travaille, sans tourniquet animé coûteux. */
.nse-tool [aria-busy="true"] { opacity: .62; cursor: progress; }
.nse-tool-loading { animation: nse-tool-attente 1.4s ease-in-out infinite; }
@keyframes nse-tool-attente { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* --- responsive ------------------------------------------------------------------ */
@media (max-width: 980px) {
  .nse-tool { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* La colonne d'étiquette disparaît : à cette largeur elle réduirait le
     constat à deux mots par ligne. L'étiquette passe au-dessus. */
  .nse-tool-check { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nse-tool-files li { grid-template-columns: minmax(0, 1fr); }
  .nse-tool-files .nse-btn { grid-column: 1; grid-row: auto; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .nse-tool-drop { transition: none; }
  /* La version calme est complète, pas amputée : tous les résultats sont là,
     seule la mise en scène disparaît. */
  .nse-tool-qr svg,
  .nse-tool-checks .nse-tool-check,
  .nse-tool-score-value,
  .nse-tool-metrics > div,
  .nse-tool-loading { animation: none; clip-path: none; opacity: 1; transform: none; }
  .nse-tool-qr::after { display: none; }
  .nse-tool-field input, .nse-tool-field select, .nse-tool-field textarea { transition: none; }
}