/* =============================================================================
 * tev-tool.css — Design-system partagé de tools.e-voir.fr
 * -----------------------------------------------------------------------------
 * SOURCE COMMUNE DE RÉFÉRENCE pour tous les outils du parc.
 *
 * Objectif : centraliser les composants les plus dupliqués (champs, radios,
 * boutons, cartes, skeletons, result boxes) dans UNE version de référence,
 * afin que les NOUVEAUX outils s'appuient dessus au lieu de re-déclarer leur
 * propre CSS inline dans chaque page.
 *
 * NON-RÉGRESSION : ce fichier est chargé AVANT tools.css / layout.css et avant
 * tout <style> inline d'outil. Ses règles ont donc la priorité la plus faible
 * (même spécificité, déclaré en premier) : là où un outil ou la CSS globale
 * redéclare déjà un composant, la valeur existante l'emporte — ce fichier est
 * alors un no-op visuel. Il ne fait qu'apporter une base commune là où rien
 * n'est défini (adoption progressive, sans casser l'existant).
 *
 * Les valeurs ci-dessous reproduisent fidèlement le rendu actuel constaté dans
 * assets/tools.css, assets/layout.css et les <style> inline des outils.
 * Accent thème : var(--ac) (défini par header.php par page).
 * ========================================================================== */

/* ── Champs de saisie pleine largeur ─────────────────────────────────────────
 * Idiome le plus dupliqué inline (evoir-smtp-tester, etc.). Référence commune. */
.lx-input-full {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #e2e8f0;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}
.lx-input-full:focus {
  border-color: color-mix(in srgb, var(--ac, #10b981) 45%, transparent);
  background: rgba(255,255,255,.07);
}
select.lx-input-full { cursor: pointer; }

/* ── Étiquettes radio / choix ────────────────────────────────────────────── */
.lx-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #94a3b8;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  transition: all .15s;
}
.lx-radio-label:hover { background: rgba(255,255,255,.04); }
/* accent-color piloté par le thème (chaque outil peut le surcharger) */
.lx-radio-label input[type=radio] { accent-color: var(--ac, #10b981); }

/* ── Boutons d'action (miroir de tools.css) ─────────────────────────────────
 * Fourni comme base pour les nouveaux outils ; no-op là où tools.css est chargé. */
.lx-btn {
  padding: 13px 22px;
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--ac, #10b981), color-mix(in srgb, var(--ac, #10b981) 75%, #000));
  color: #fff; font-size: 15px; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--ac, #10b981) 35%, transparent);
  transition: filter .15s; font-family: inherit; white-space: nowrap;
}
.lx-btn:hover { filter: brightness(1.10); }
.lx-btn:disabled { opacity: .55; cursor: default; }

/* ── Cartes (miroir de tools.css) ──────────────────────────────────────────
 * Base minimale ; l'apparence riche (::before/::after, ombres) reste dans
 * tools.css qui l'emporte lorsqu'il est chargé. */
.lx-card {
  border-radius: 20px;
  position: relative;
}

/* ── Result boxes (miroir de tools.css) ────────────────────────────────────
 * Cadres de résultat colorés selon l'état ok / warn / err / info. */
.lx-rbox { border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.lx-rbox-ok   { background: rgba(16,185,129,.07);  border: 1px solid rgba(16,185,129,.20); }
.lx-rbox-warn { background: rgba(245,158,11,.07);  border: 1px solid rgba(245,158,11,.20); }
.lx-rbox-err  { background: rgba(239,68,68,.08);   border: 1px solid rgba(239,68,68,.18); }
.lx-rbox-info { background: rgba(99,102,241,.07);  border: 1px solid rgba(99,102,241,.18); }
.lx-rbox-header { display: flex; align-items: center; gap: 12px; }
.lx-rbox-header > i { font-size: 22px; flex-shrink: 0; }
.lx-rbox-ok   .lx-rbox-header > i { color: #34d399; }
.lx-rbox-warn .lx-rbox-header > i { color: #fbbf24; }
.lx-rbox-err  .lx-rbox-header > i { color: #f87171; }
.lx-rbox-info .lx-rbox-header > i { color: #818cf8; }
.lx-rbox-title-en { font-size: 17px; font-weight: 800; color: #f1f5f9; letter-spacing: -.01em; }
.lx-rbox-title-fr { font-size: 13px; color: #6b7280; margin-top: 2px; font-style: italic; }
.lx-rbox-sub-en   { font-size: 14px; color: #94a3b8; margin-top: 4px; line-height: 1.55; }
.lx-rbox-sub-fr   { font-size: 13px; color: #4b7c6a; margin-top: 2px; font-style: italic; line-height: 1.5; }

/* ── Skeletons de chargement (miroir de layout.css) ────────────────────────*/
.lx-sk-wrap { display: flex; flex-direction: column; gap: 10px; padding: 20px 0; }
.lx-sk {
  height: 18px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.05) 75%);
  background-size: 200% 100%;
  animation: lx-sk-anim 1.5s ease-in-out infinite;
}
.lx-sk.lx-sk-m  { width: 75%; height: 14px; }
.lx-sk.lx-sk-sm { width: 45%; height: 12px; }
@keyframes lx-sk-anim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* =============================================================================
 * ACCESSIBILITÉ (#9) — additions transverses
 * ========================================================================== */

/* ── Lien d'évitement « Aller au contenu » ──────────────────────────────────
 * Masqué hors focus, révélé nettement au focus clavier. Contraste fort sur le
 * thème sombre. (Une copie critique minimale est aussi inline dans header.php
 * pour rester fonctionnel même si cette feuille n'est pas chargée.) */
.tev-skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #0a1a12;
  color: #ecfdf5;
  border: 2px solid var(--ac, #10b981);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  transition: top .15s ease;
}
.tev-skip-link:focus,
.tev-skip-link:focus-visible {
  top: 8px;
  outline: 3px solid #ecfdf5;
  outline-offset: 2px;
}

/* ── Focus visible net pour liens / boutons / champs ────────────────────────
 * N'affecte que la navigation clavier (:focus-visible), pas la souris.
 * L'outline ne modifie pas les bordures : coexiste avec les :focus existants. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ac, #10b981) 85%, #fff);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Cible de saut : conteneur de contenu principal (ajouté par header.php). */
#lx-main:focus { outline: none; }