/* =============================================================================
   Scanner de chaîne Odysee — page /importer-ma-chaine-odysee/
   -----------------------------------------------------------------------------
   Mêmes tonalités que le reste du site : rouge #cc0000, encre sombre, cartes
   arrondies. Autonome, comme les autres blocs du pont.

   Le piège VIDOREV est traité partout où il mord : le thème habille
   agressivement boutons, liens et champs de formulaire.
   ============================================================================= */

.dtv-scan {
  --dtvs-rouge: #cc0000;
  --dtvs-rouge-clair: #ff2b2b;
  --dtvs-encre: #101216;
  --dtvs-gris: #6b7280;
  --dtvs-trait: #e5e7eb;
  --dtvs-fond: #ffffff;
  --dtvs-doux: #f9fafb;

  position: relative;
  color: var(--dtvs-encre);
  container-type: inline-size;
  container-name: dtvs;
}

.dtv-scan *, .dtv-scan *::before, .dtv-scan *::after { box-sizing: border-box; }

/* Le thème applique une marge basse à TOUS les champs de formulaire, ce qui
   décalait le texte vers le haut à l'intérieur de nos champs arrondis —
   l'arobase, qui n'est pas un champ, restait elle correctement centrée.
   Diagnostic de JoBo, et la règle est de lui. */
.dtv-scan input:not([type]),
.dtv-scan input[type="text"],
.dtv-scan input[type="email"],
.dtv-scan input[type="url"],
.dtv-scan input[type="password"],
.dtv-scan input[type="search"],
.dtv-scan input[type="number"],
.dtv-scan input[type="tel"],
.dtv-scan input[type="date"],
.dtv-scan input[type="time"],
.dtv-scan textarea,
.dtv-scan select {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------- recherche */

.dtv-scan-tete { margin-bottom: 28px; }

.dtv-scan .dtv-scan-titre {
  margin: 0 0 10px !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em;
}
.dtv-scan .dtv-scan-titre em { font-style: normal; color: var(--dtvs-rouge); }

.dtv-scan .dtv-scan-chapeau {
  margin: 0 0 22px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--dtvs-gris) !important;
  max-width: 640px;
}

.dtv-scan .dtv-scan-argument {
  margin: 0 0 22px !important;
  font-size: 16px !important;
  color: var(--dtvs-encre) !important;
}

.dtv-scan-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }

.dtv-scan-champ {
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  border: 1px solid var(--dtvs-trait);
  border-radius: 999px;
  background: var(--dtvs-fond);
  padding-left: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dtv-scan-champ:focus-within {
  border-color: var(--dtvs-rouge);
  box-shadow: 0 0 0 3px rgba(204, 0, 0, .12);
}

.dtv-scan-arobase { font-size: 17px; font-weight: 700; color: var(--dtvs-gris); }

.dtv-scan .dtv-scan-champ input {
  flex: 1 1 auto;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 16px 0 4px !important;
  font-size: 16px !important;
  color: var(--dtvs-encre) !important;
  /* Le thème impose sa propre hauteur de ligne aux champs, ce qui poussait le
     texte vers le haut alors que l'arobase, elle, restait centrée. On fixe
     donc une hauteur explicite et on aligne dessus. */
  height: 48px !important;
  line-height: 48px !important;
}

.dtv-scan .dtv-scan-bouton,
.dtv-scan button.dtv-scan-bouton,
.dtv-scan a.dtv-scan-bouton {
  display: inline-block !important;
  padding: 13px 26px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--dtvs-rouge) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: filter .15s ease;
}
.dtv-scan .dtv-scan-bouton:hover { filter: brightness(1.12); }
.dtv-scan .dtv-scan-bouton:disabled { opacity: .55; cursor: wait; }

.dtv-scan .dtv-scan-aide {
  margin: 12px 0 0 !important;
  font-size: 13.5px !important;
  color: var(--dtvs-gris) !important;
}
.dtv-scan .dtv-scan-aide code {
  background: var(--dtvs-doux);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* -------------------------------------------------------------- messages */

.dtv-scan-message {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.55;
}
.dtv-scan-message--info      { background: #eff6ff; color: #1d4ed8; }
.dtv-scan-message--attention { background: #fef3c7; color: #a16207; }
.dtv-scan-message--erreur    { background: #fdf2f2; color: #b91c1c; border-left: 3px solid var(--dtvs-rouge); }

/* ----------------------------------------------------------- progression */

.dtv-scan-progression { margin: 28px 0; }

.dtv-scan-barre {
  height: 8px;
  border-radius: 999px;
  background: var(--dtvs-trait);
  overflow: hidden;
}
.dtv-scan-barre-remplie {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--dtvs-rouge);
  transition: width .3s ease;
}
.dtv-scan .dtv-scan-avancement {
  margin: 10px 0 0 !important;
  font-size: 14px !important;
  color: var(--dtvs-gris) !important;
}

/* -------------------------------------------------------------- la chaîne */

.dtv-scan-chaine {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--dtvs-trait);
  border-radius: 14px;
  background: var(--dtvs-doux);
  margin-bottom: 18px;
}
.dtv-scan-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.dtv-scan .dtv-scan-chaine h3 { margin: 0 0 3px !important; font-size: 19px !important; font-weight: 700 !important; }
.dtv-scan .dtv-scan-chaine p  { margin: 0 !important; font-size: 14.5px !important; color: var(--dtvs-gris) !important; }

/* --------------------------------------------------------------- outils */

.dtv-scan-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.dtv-scan-recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  padding: 8px 14px;
  border: 1px solid var(--dtvs-trait);
  border-radius: 999px;
}
.dtv-scan-recherche svg {
  width: 17px; height: 17px; flex: 0 0 auto;
  fill: none; stroke: var(--dtvs-gris); stroke-width: 2; stroke-linecap: round;
}
.dtv-scan .dtv-scan-recherche input {
  flex: 1 1 auto;
  border: 0 !important; outline: 0 !important; background: transparent !important;
  box-shadow: none !important; padding: 0 !important; font-size: 14.5px !important;
  height: 26px !important;
  line-height: 26px !important;
  color: var(--dtvs-encre) !important;
}

.dtv-scan-actions, .dtv-scan-ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dtv-scan-ajuste { font-size: 14px; color: var(--dtvs-gris); }

.dtv-scan .dtv-scan-mini,
.dtv-scan button.dtv-scan-mini {
  /* Flex plutôt que du remplissage : le thème applique sa propre hauteur de
     ligne aux boutons, ce qui décalait « Tout décocher » vers le haut dès que
     le libellé passait sur deux lignes. Centré par flex, le texte tient quelle
     que soit sa longueur. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 16px !important;
  border: 1px solid var(--dtvs-trait) !important;
  border-radius: 999px !important;
  background: var(--dtvs-fond) !important;
  color: var(--dtvs-encre) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  cursor: pointer;
}
/* Les deux boutons « tout cocher / tout décocher » prennent la même largeur :
   deux pastilles de tailles différentes côte à côte se remarquent. */
.dtv-scan-actions .dtv-scan-mini { flex: 1 1 auto; min-width: 132px; }
.dtv-scan .dtv-scan-mini:hover { background: var(--dtvs-doux) !important; }
.dtv-scan .dtv-scan-mini--plein {
  background: var(--dtvs-encre) !important;
  border-color: var(--dtvs-encre) !important;
  color: #fff !important;
}

.dtv-scan .dtv-scan-ajuste select {
  padding: 7px 10px !important;
  border: 1px solid var(--dtvs-trait) !important;
  border-radius: 8px !important;
  background: var(--dtvs-fond) !important;
  color: var(--dtvs-encre) !important;
  font-size: 14px !important;
  font-weight: 600;
}

/* -------------------------------------------------------------- tableau */

.dtv-scan-tableau-cadre {
  border: 1px solid var(--dtvs-trait);
  border-radius: 14px;
  overflow: auto;          /* le tableau défile seul, jamais la page */
  max-height: 70vh;
}

.dtv-scan-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.dtv-scan-tableau thead th {
  position: sticky;        /* l'en-tête reste lisible sur 14 000 lignes */
  top: 0;
  z-index: 2;
  background: var(--dtvs-doux);
  border-bottom: 1px solid var(--dtvs-trait);
  padding: 12px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.dtv-scan-tableau th.triable { cursor: pointer; user-select: none; }
.dtv-scan-tableau th.triable:hover { color: var(--dtvs-rouge); }
.dtv-scan-tableau th.actif { color: var(--dtvs-rouge); }
.dtv-fleche { opacity: .55; font-size: 11px; }

.dtv-scan-tableau tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--dtvs-trait);
  vertical-align: middle;
}
.dtv-scan-tableau tbody tr:hover { background: var(--dtvs-doux); }

.dtv-col-case { width: 38px; }
.dtv-col-mini { width: 92px; }
.dtv-col-num  { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtv-scan-inconnu { color: var(--dtvs-gris); font-style: italic; }

.dtv-scan-mini {
  display: block;
  width: 76px;
  height: 43px;
  object-fit: cover;
  border-radius: 5px;
  background: var(--dtvs-trait);
}

/* Le titre n'est PLUS une balise <a> : son adresse ne doit pas exister dans le
   document. Il faut donc lui rendre à la main ce que le navigateur donnait
   gratuitement — l'apparence, le curseur, et l'accès au clavier (role="link"
   et tabindex sont posés par le script). */
.dtv-scan .dtv-scan-lien {
  color: var(--dtvs-encre) !important;
  text-decoration: none !important;
  font-weight: 500;
  cursor: pointer;
}
.dtv-scan .dtv-scan-lien:hover { color: var(--dtvs-rouge) !important; text-decoration: underline !important; }
.dtv-scan .dtv-scan-lien:focus-visible {
  outline: 2px solid var(--dtvs-rouge);
  outline-offset: 2px;
  border-radius: 3px;
}

.dtv-scan-vide { padding: 28px !important; text-align: center; color: var(--dtvs-gris); }

.dtv-scan .dtv-scan-avertissement {
  margin: 12px 0 0 !important;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fef3c7;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* -------------------------------------------- états des boutons d'action */

.dtv-inactif { opacity: .4; pointer-events: none; }
.dtv-attente { opacity: .6; pointer-events: none; }

/* ------------------------------------------- aperçu de miniature au survol
   Le tableau montre des vignettes de 76 px : illisibles pour décider quoi
   garder. Au survol, la miniature s'affiche en grand à côté du curseur.
   Fait à la main plutôt qu'avec Tippy : une bibliothèque de 25 Ko pour une
   seule infobulle sur une page publique n'en vaut pas le prix, et un fichier
   destiné à l'obfuscation a tout intérêt à ne dépendre de rien.            */

.dtv-scan-apercu {
  display: none;
  position: fixed;
  z-index: 90;
  padding: 6px;
  border-radius: 10px;
  background: #101216;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  pointer-events: none;   /* l'aperçu ne doit jamais voler le survol */
}
.dtv-scan-apercu img {
  display: block;
  width: 340px;
  max-width: 40vw;
  height: auto;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- pied */

.dtv-scan-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 20px;
  border-radius: 14px;
  background: var(--dtvs-doux);
  border: 1px solid var(--dtvs-trait);
}
.dtv-scan .dtv-scan-pied-total   { margin: 0 !important; font-size: 16px !important; }
.dtv-scan .dtv-scan-pied-formule { margin: 4px 0 0 !important; font-size: 14px !important; color: var(--dtvs-gris) !important; }

/* -------------------------------------------------------- explications */

.dtv-scan-explications {
  margin-top: 26px;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--dtvs-trait);
}
.dtv-scan .dtv-scan-explications h3 { margin: 0 0 14px !important; font-size: 18px !important; font-weight: 700 !important; }
.dtv-scan .dtv-scan-explications ol { margin: 0 0 14px !important; padding-left: 20px !important; }
.dtv-scan .dtv-scan-explications li { margin-bottom: 14px !important; line-height: 1.6 !important; }

/* L'amorce de chaque étape occupe sa propre ligne.
   Auparavant elle était suivie d'un simple retour à la ligne dans la source,
   qui aurait dû se lire comme une espace — mais la minification HTML du site
   le supprime, d'où le « réglez.Le bouton » collé. Un élément de bloc ne
   dépend d'aucune espace pour se séparer du texte suivant : le problème ne
   peut plus se reproduire, quel que soit le minificateur. */
.dtv-scan .dtv-scan-etape {
  display: block;
  margin-bottom: 3px;
}
.dtv-scan .dtv-scan-atout {
  display: block;
  margin-top: 8px;
  padding: 10px 13px;
  border-radius: 8px;
  background: rgba(204, 0, 0, .07);
  border-left: 3px solid var(--dtvs-rouge);
  font-size: 14.5px;
  line-height: 1.55;
}

.dtv-scan .dtv-scan-explications-note {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: var(--dtvs-gris) !important;
  line-height: 1.6 !important;
}

/* -------------------------------------------------------------- étroit */

@container dtvs (max-width: 560px) {
  .dtv-scan .dtv-scan-titre { font-size: 23px !important; }
  .dtv-col-mini, .dtv-scan-tableau thead th.dtv-col-mini { display: none; }
  .dtv-scan-outils { flex-direction: column; align-items: stretch; }
  .dtv-scan-pied { flex-direction: column; align-items: stretch; }
}

/* -------------------------------------------------------------- sombre */

html[data-theme="dark"] .dtv-scan,
html.dtv-dark .dtv-scan,
body.dtv-dark .dtv-scan {
  --dtvs-encre: #e8e8ea;
  --dtvs-gris: #9ca3af;
  --dtvs-trait: #2f3237;
  --dtvs-fond: #17191d;
  --dtvs-doux: #1f2228;
}
html[data-theme="dark"] .dtv-scan .dtv-scan-message--info,
html.dtv-dark .dtv-scan .dtv-scan-message--info,
body.dtv-dark .dtv-scan .dtv-scan-message--info { background: #16233a; color: #93c5fd; }

html[data-theme="dark"] .dtv-scan .dtv-scan-message--attention,
html.dtv-dark .dtv-scan .dtv-scan-message--attention,
body.dtv-dark .dtv-scan .dtv-scan-message--attention,
html[data-theme="dark"] .dtv-scan .dtv-scan-avertissement,
html.dtv-dark .dtv-scan .dtv-scan-avertissement,
body.dtv-dark .dtv-scan .dtv-scan-avertissement { background: #2b2410; color: #fde68a; }

html[data-theme="dark"] .dtv-scan .dtv-scan-message--erreur,
html.dtv-dark .dtv-scan .dtv-scan-message--erreur,
body.dtv-dark .dtv-scan .dtv-scan-message--erreur { background: #2a1616; color: #fecaca; }