/* ==========================================================================
   DissidenceTV — page d'adhésion
   Reprend les jetons de la page « Hébergement Vidéo » pour que les deux pages
   se ressemblent. Tout est préfixé .dtv- : rien ne fuit sur le reste du site.
   ========================================================================== */

.dtv-recap,
.dtv-steps,
.dtv-reassure,
.dtv-hint,
.dtv-warning,
.dtv-field-toggle,
.dtv-mail-suggestion {
  --dtv-accent:     #cc0000;
  --dtv-accent-2:   #8f0000;
  --dtv-wash:       rgba(204, 0, 0, .07);
  --dtv-ink:        #101216;
  --dtv-ink-2:      #3b414d;
  --dtv-ink-3:      #6b7280;
  --dtv-paper:      #ffffff;
  --dtv-paper-2:    #f7f8fa;
  --dtv-line:       #e2e5ea;
  --dtv-radius:     16px;
}

/* Mode sombre : suit le sélecteur de thème du site, jamais l'OS. */
html.dtv-dark .dtv-recap,
html.dtv-dark .dtv-steps,
html.dtv-dark .dtv-reassure,
html.dtv-dark .dtv-hint,
html.dtv-dark .dtv-warning,
html.dtv-dark .dtv-field-toggle,
html.dtv-dark .dtv-mail-suggestion {
  --dtv-ink:     #f0f2f5;
  --dtv-ink-2:   #c2c8d2;
  --dtv-ink-3:   #8d95a3;
  --dtv-paper:   #101318;
  --dtv-paper-2: #171b22;
  --dtv-line:    #272d37;
}

/* --------------------------------------------------------------------------
   Médaillon récapitulatif
   -------------------------------------------------------------------------- */
.dtv-recap {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin: 0 0 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--dtv-line);
  border-radius: var(--dtv-radius);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--dtv-wash), transparent 60%),
    var(--dtv-paper);
  color: var(--dtv-ink-2);
  line-height: 1.6;
}
@media (max-width: 700px) { .dtv-recap { grid-template-columns: 1fr; } }

.dtv-recap p { margin: 0 0 .5em; }

.dtv-recap-eyebrow {
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dtv-accent);
}
.dtv-recap-volume { margin: 0 0 .1em !important; }
.dtv-recap-value {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  font-weight: 820;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--dtv-ink);
}
.dtv-recap-profile {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dtv-ink-3);
}
.dtv-recap-desc { font-size: .95rem; }

.dtv-recap-price {
  padding-left: clamp(0px, 2vw, 1.5rem);
  border-left: 1px solid var(--dtv-line);
}
@media (max-width: 700px) {
  .dtv-recap-price { padding-left: 0; padding-top: 1rem; border-left: 0; border-top: 1px solid var(--dtv-line); }
}
.dtv-recap-amount {
  display: flex;
  align-items: baseline;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 780;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--dtv-accent);
}
.dtv-recap-per { font-size: .42em; font-weight: 600; color: var(--dtv-ink-2); letter-spacing: 0; }
.dtv-recap-rate { font-size: .85rem; color: var(--dtv-ink-3); }

.dtv-recap-pills { margin: 1rem 0 0; padding: 0; list-style: none; }
.dtv-recap-pills li {
  position: relative;
  margin: 0 0 .35rem;
  padding-left: 1.35em;
  font-size: .85rem;
  color: var(--dtv-ink-2);
}
.dtv-recap-pills li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: .5em; height: .28em;
  border-left: 2px solid var(--dtv-accent);
  border-bottom: 2px solid var(--dtv-accent);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   « Ce qui se passe ensuite »
   -------------------------------------------------------------------------- */
.dtv-steps {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--dtv-radius);
  background: var(--dtv-paper-2);
  color: var(--dtv-ink-2);
}
.dtv-steps-title {
  margin: 0 0 .6rem !important;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dtv-ink-3);
}
.dtv-steps ol { margin: 0; padding-left: 1.25rem; }
.dtv-steps li { margin: 0 0 .4rem; font-size: .92rem; line-height: 1.55; }
.dtv-steps strong { color: var(--dtv-ink); }

/* --------------------------------------------------------------------------
   Champs ajoutés
   -------------------------------------------------------------------------- */
.dtv-hint {
  margin: .4rem 0 0 !important;
  font-size: .85rem;
  color: var(--dtv-ink-3);
}
.dtv-hint code {
  padding: .12em .45em;
  border-radius: 6px;
  background: var(--dtv-paper-2);
  font-size: .95em;
  color: var(--dtv-ink);
  word-break: break-all;
}

.dtv-field-toggle { margin: .9rem 0 .2rem; }
.dtv-field-toggle label {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .9rem;
  font-weight: 500;
  color: var(--dtv-ink-2);
  cursor: pointer;
}
.dtv-field-toggle input { margin: 0; }

#dtv-channel-field { margin-top: .75rem; }
#dtv-channel-field[hidden] { display: none; }

.dtv-warning {
  margin: 1rem 0 1.9rem !important;
  padding: .8em 1em;
  border-left: 3px solid var(--dtv-accent);
  border-radius: 0 8px 8px 0;
  background: var(--dtv-wash);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--dtv-ink-2);
}
.dtv-warning strong { color: var(--dtv-ink); }

.dtv-reassure {
  margin: 0 0 1rem !important;
  font-size: .88rem;
  color: var(--dtv-ink-3);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Suggestion de correction d'adresse
   -------------------------------------------------------------------------- */
.dtv-mail-suggestion {
  margin: .45rem 0 0 !important;
  font-size: .88rem;
  color: var(--dtv-ink-2);
}
.dtv-mail-suggestion[hidden] { display: none; }
/*
   VIDOREV habille TOUS les <button> du site :
       button:not([aria-controls]):not([aria-live]) { padding:12px 20px;
       color:#FFF; text-transform:uppercase; background:linear-gradient(...) }
   Cette règle vaut 0-2-1 en spécificité, davantage qu'une simple classe : sans
   protection, notre suggestion se transformait en pavé gris barré de blanc.
   Les !important ci-dessous sont délibérés et limités à ce seul élément.
*/
.dtv-mail-suggestion button.dtv-mail-fix {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--dtv-accent) !important;
  font: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: .15em;
  cursor: pointer;
}
.dtv-mail-suggestion button.dtv-mail-fix:hover,
.dtv-mail-suggestion button.dtv-mail-fix:focus {
  color: var(--dtv-accent-2) !important;
  background: none !important;
  background-color: transparent !important;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Disponibilité de l'identifiant, en temps réel
   -------------------------------------------------------------------------- */
.dtv-dispo {
  margin: .4rem 0 0 !important;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.45;
}
.dtv-dispo[hidden] { display: none; }
.dtv-dispo--libre { color: #17795e; }
.dtv-dispo--pris  { color: var(--dtv-accent, #cc0000); }
html.dtv-dark .dtv-dispo--libre { color: #4ade80; }
html.dtv-dark .dtv-dispo--pris  { color: #ff6b60; }