/* =============================================================================
   Encart d'annonce — shortcode [dtv_annonce]
   -----------------------------------------------------------------------------
   Entièrement autonome : aucune dépendance à hebergement-video.css, ni à quoi
   que ce soit du thème. Il doit pouvoir vivre dans une page, dans une barre
   latérale, dans un widget de pied de page, sans rien casser autour de lui.

   Le dimensionnement passe par une container query et non par une media query :
   ce qui compte n'est pas la largeur de l'écran mais celle de l'emplacement où
   l'encart est posé. Le même bloc doit se replier proprement dans une colonne
   de 300 px sur un écran de 1920.

   Piège VIDOREV traité : le thème habille agressivement les liens et les
   boutons. Toutes nos règles de lien portent donc un !important ciblé.
   ============================================================================= */

.dtv-annonce {
  --dtva-rouge: #cc0000;
  --dtva-rouge-clair: #ff2b2b;
  --dtva-encre: #f4f4f5;
  --dtva-gris: #a1a1aa;
  --dtva-fond: #101216;
  --dtva-carte: #191c22;
  --dtva-trait: #2a2e37;

  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 32px 0;
  padding: 34px 32px 28px;
  border-radius: 18px;
  background: var(--dtva-fond);
  border: 1px solid var(--dtva-trait);
  color: var(--dtva-encre);
  font-family: inherit;
  line-height: 1.6;

  container-type: inline-size;
  container-name: dtva;
}

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

/* La lueur rouge en haut à droite : discrète, elle donne la profondeur sans
   coûter une image. */
.dtv-annonce-lueur {
  position: absolute;
  top: -160px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 0, 0, .32) 0%, rgba(204, 0, 0, 0) 68%);
  pointer-events: none;
}

.dtv-annonce-tete { position: relative; max-width: 640px; }

/* --------------------------------------------------------------- le macaron */

.dtv-annonce-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(204, 0, 0, .14);
  border: 1px solid rgba(204, 0, 0, .38);
  color: #ff8a8a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dtv-annonce-point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dtva-rouge-clair);
  box-shadow: 0 0 0 0 rgba(255, 43, 43, .7);
  animation: dtva-pulse 2.4s ease-out infinite;
}

@keyframes dtva-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 43, 43, .65); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 43, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 43, 43, 0); }
}

/* Une pastille qui clignote sans fin est un irritant pour qui y est
   sensible — et une gêne réelle pour les troubles vestibulaires. */
@media (prefers-reduced-motion: reduce) {
  .dtv-annonce-point { animation: none; }
  .dtv-annonce-offre { transition: none !important; }
}

/* --------------------------------------------------------------- le titre */

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

.dtv-annonce .dtv-annonce-accroche {
  margin: 0 0 26px !important;
  font-size: 16px !important;
  color: var(--dtva-gris) !important;
}

/* --------------------------------------------------------------- les offres */

.dtv-annonce-offres {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dtv-annonce .dtv-annonce-offre {
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: 13px;
  background: var(--dtva-carte);
  border: 1px solid var(--dtva-trait);
  text-decoration: none !important;
  color: var(--dtva-encre) !important;
  box-shadow: none !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.dtv-annonce .dtv-annonce-offre:hover,
.dtv-annonce .dtv-annonce-offre:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(204, 0, 0, .55);
  background: #1d2028;
}

.dtv-annonce .dtv-annonce-offre:focus-visible {
  outline: 2px solid var(--dtva-rouge-clair);
  outline-offset: 3px;
}

.dtv-annonce-offre--vedette {
  background: linear-gradient(160deg, #24161a 0%, #191c22 62%) !important;
  border-color: rgba(204, 0, 0, .42) !important;
}

.dtv-annonce-prix {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dtva-rouge-clair);
}

.dtv-annonce .dtv-annonce-offre h3 {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--dtva-encre) !important;
}

.dtv-annonce .dtv-annonce-offre p {
  margin: 0 0 18px !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--dtva-gris) !important;
  flex: 1 1 auto;
}

.dtv-annonce-appel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dtva-rouge-clair);
}

.dtv-annonce-appel svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.dtv-annonce .dtv-annonce-offre:hover .dtv-annonce-appel svg { transform: translateX(4px); }

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

.dtv-annonce-pied {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--dtva-trait);
}

.dtv-annonce .dtv-annonce-pied a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dtva-encre) !important;
  text-decoration: none !important;
}
.dtv-annonce .dtv-annonce-pied a:hover { color: var(--dtva-rouge-clair) !important; }

.dtv-annonce-pied svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--dtva-rouge-clair);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dtv-annonce-note {
  font-size: 13px;
  color: var(--dtva-gris);
  max-width: 380px;
}

/* --------------------------------------------------------------- étroit
   Container query : c'est la largeur de l'EMPLACEMENT qui décide, pas celle
   de l'écran. Une barre latérale de 300 px sur un grand écran se replie donc
   correctement.                                                            */

@container dtva (max-width: 620px) {
  .dtv-annonce { padding: 26px 20px 22px; }
  .dtv-annonce .dtv-annonce-titre { font-size: 24px !important; }
  .dtv-annonce .dtv-annonce-accroche { font-size: 15px !important; margin-bottom: 20px !important; }
  .dtv-annonce-offres { grid-template-columns: 1fr; }
  .dtv-annonce-pied { flex-direction: column; align-items: flex-start; }
  .dtv-annonce-note { max-width: none; }
}

/* Repli pour les navigateurs sans container queries : on vise l'écran. */
@supports not (container-type: inline-size) {
  @media (max-width: 782px) {
    .dtv-annonce-offres { grid-template-columns: 1fr; }
    .dtv-annonce .dtv-annonce-titre { font-size: 24px !important; }
  }
}

/* --------------------------------------------------------------- compact */

.dtv-annonce--compact { padding: 24px 20px 20px; }
.dtv-annonce--compact .dtv-annonce-titre { font-size: 22px !important; }
.dtv-annonce--compact .dtv-annonce-accroche { font-size: 14.5px !important; margin-bottom: 18px !important; }
.dtv-annonce--compact .dtv-annonce-offres { grid-template-columns: 1fr; gap: 12px; }
.dtv-annonce--compact .dtv-annonce-offre { padding: 16px; }
.dtv-annonce--compact .dtv-annonce-offre h3 { font-size: 17px !important; }
.dtv-annonce--compact .dtv-annonce-offre p { font-size: 14px !important; margin-bottom: 14px !important; }
.dtv-annonce--compact .dtv-annonce-pied { flex-direction: column; align-items: flex-start; }
.dtv-annonce--compact .dtv-annonce-note { max-width: none; }

/* --------------------------------------------------------------- clair
   L'encart est sombre par construction — c'est ce qui le fait ressortir sur
   une page claire. En mode sombre du site, on éclaircit très légèrement les
   bordures pour qu'il ne se fonde pas dans le fond de la page.             */

html[data-theme="dark"] .dtv-annonce,
html.dtv-dark .dtv-annonce,
body.dtv-dark .dtv-annonce {
  --dtva-fond: #16181d;
  --dtva-carte: #1e222a;
  --dtva-trait: #343943;
}