/* =====================================================================
   ECOADS — habillage des emplacements publicitaires
   Chargée par includes/header.php après assets/css/style.css.
   - les rails occupent déjà la colonne .sidebar-left/.sidebar-right
     (largeur adaptable réservée par la grille de body) ;
   - les emplacements larges vivent dans le flux principal et
     s'affichent donc aussi sur téléphone.
   Propriétés logiques (inline-*) : compatible RTL sans doublon.
   ===================================================================== */

/* ---------- conteneur d'emplacement ---------- */
.ad-slot {
  position: relative;
  margin-block: 1.25rem;
}

.sidebar-left,
.sidebar-right {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  min-height: calc(100vh - 6rem);
  height: calc(100vh - 6rem);
  position: sticky;
  inset-block-start: 5rem;
  padding: .5rem .55rem;
  overflow: hidden;
}
.sidebar-left > .ad-slot,
.sidebar-right > .ad-slot {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.ad-rail {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.ad-rail .ad-kicker { flex: 0 0 auto; margin-block-end: 0; font-size: .7rem; letter-spacing: .1em; }
.ad-track {
  display: flex;
  gap: .75rem;
  min-width: 0;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sky, #0ea5e9) 50%, transparent) transparent;
  scroll-behavior: smooth;
  scroll-snap-type: both mandatory;
  overscroll-behavior: contain;
  overflow-anchor: none;
}
.ad-rail .ad-track {
  flex: 1 1 0;
  height: 0;
  max-height: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: .15rem .2rem .4rem;
  scroll-snap-type: y mandatory;
}
.ad-wide .ad-track {
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .25rem .25rem .65rem;
}
.ad-track > .ad-card { scroll-snap-align: center; }
.ad-controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: .22rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--sky, #0ea5e9));
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.ad-control {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.ad-control:hover { border-color: color-mix(in srgb, var(--ad-accent, #0ea5e9) 30%, transparent); background: var(--ad-accent, #0ea5e9); color: #fff; transform: translateY(-1px); }
.ad-control:focus-visible { outline: 2px solid var(--ad-accent, #0ea5e9); outline-offset: 2px; }
.ad-wide .ad-controls { justify-content: flex-end; margin-inline-start: auto; margin-inline-end: .25rem; }

.ad-kicker {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light, #64748b);
  margin-block-end: .45rem;
}
.ad-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .3;
}

/* ---------- carte ---------- */
.ad-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ad-card::before {
  /* liseré de couleur en haut de carte */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ad-accent), var(--ad-accent-2));
  z-index: 1;
}
.ad-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .55);
  border-color: color-mix(in srgb, var(--ad-accent) 45%, transparent);
}

.ad-text { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.ad-title {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: start;
  margin: 0;
  /* reserve la place du badge recycle en haut a droite : sans cela,
     la premiere ligne du titre passait dessous (visible sur les rails) */
  padding-inline-end: 1.9rem;
}
.ad-sub {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ad-accent);
  text-align: start;
  margin: 0;
}
.ad-desc {
  font-size: .8rem;
  line-height: 1.65;
  color: var(--text-light, #64748b);
  text-align: start;
  margin: 0;
}

/* ---------- médias : image, vidéo, couverture ---------- */
.ad-media-wrap {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  line-height: 0;
}

.ad-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  background: #0b1220;
}
/* le lecteur natif et la video incorporée gardent le cadre entier */
video.ad-media,
iframe.ad-media {
  object-fit: contain;
  background: #000;
}
iframe.ad-media { border: 1px solid var(--border, #e2e8f0); }

/* couverture cliquable (raccourci ou fournisseur non incorporable) */
a.ad-media-wrap { cursor: pointer; }
.ad-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  background: rgba(2, 8, 20, .44);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .85);
  pointer-events: none;
}
a.ad-media-wrap:hover .ad-play { background: rgba(2, 8, 20, .3); }

/* pastille de destination externe : "🔗 Facebook", "🔗 TikTok"... */
.ad-provider {
  align-self: flex-start;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  color: var(--text-light, #64748b);
  background: color-mix(in srgb, var(--ad-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--ad-accent) 24%, transparent);
}
a.ad-provider-link {
  color: var(--ad-accent);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
a.ad-provider-link:hover {
  background: color-mix(in srgb, var(--ad-accent) 18%, transparent);
  transform: translateY(-1px);
}

/* ---------- badge recyclage ---------- */
.ad-eco-badge {
  position: absolute;
  inset-block-start: .55rem;
  inset-inline-end: .55rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: .85rem;
  line-height: 1;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
}

.ad-eco-tag {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .18rem .5rem;
  border-radius: 999px;
  color: var(--ad-accent);
  background: color-mix(in srgb, var(--ad-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ad-accent) 32%, transparent);
}

/* ---------- bouton d'action ---------- */
.ad-cta {
  align-self: flex-start;
  margin-block-start: .35rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--ad-accent), var(--ad-accent-2));
  box-shadow: 0 8px 18px -12px var(--ad-accent);
  transition: filter .15s ease, transform .15s ease;
}
.ad-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ad-cta:focus-visible,
.ad-card:focus-within { outline: 2px solid var(--ad-accent); outline-offset: 2px; }

/* ---------- thèmes ---------- */
.ad-eco {
  --ad-accent: #059669;
  --ad-accent-2: #10b981;
  background:
    linear-gradient(150deg, color-mix(in srgb, #10b981 16%, var(--surface, #fff)), var(--surface, #fff) 62%);
}
.ad-ocean {
  --ad-accent: #0369a1;
  --ad-accent-2: #0ea5e9;
  background:
    linear-gradient(150deg, color-mix(in srgb, #0ea5e9 16%, var(--surface, #fff)), var(--surface, #fff) 62%);
}
.ad-sunrise {
  --ad-accent: #c2410c;
  --ad-accent-2: #f59e0b;
  background:
    linear-gradient(150deg, color-mix(in srgb, #f59e0b 18%, var(--surface, #fff)), var(--surface, #fff) 62%);
}
.ad-slate {
  --ad-accent: #475569;
  --ad-accent-2: #64748b;
  background:
    linear-gradient(150deg, color-mix(in srgb, #64748b 18%, var(--surface, #fff)), var(--surface, #fff) 62%);
}
.ad-custom {
  --ad-accent: #059669;
  --ad-accent-2: #10b981;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--ad-accent) 18%, var(--surface, #fff)), var(--surface, #fff) 62%);
}

/* ---------- rails latéraux (ordinateur) ---------- */
.ad-rail .ad-card {
  flex: 0 0 auto;
  min-width: 0;
  padding: .9rem .85rem;
  gap: .6rem;
  border-radius: 17px;
  box-shadow: 0 10px 24px -19px rgba(15, 23, 42, .65), 0 1px 3px rgba(15, 23, 42, .06);
  scroll-snap-align: start;
}
.ad-rail .ad-title { font-size: .9rem; }
.ad-rail .ad-sub   { font-size: .78rem; }
.ad-rail .ad-desc  { font-size: .76rem; line-height: 1.6; }
.ad-rail .ad-cta   { width: 100%; justify-content: center; font-size: .78rem; padding: .55rem .65rem; }
.ad-rail .ad-eco-badge { width: 22px; height: 22px; font-size: .72rem; }
.ad-rail .ad-media-wrap { width: 100%; }
.ad-rail .ad-media { aspect-ratio: 16 / 9; }
.ad-rail .ad-play { font-size: 1.15rem; }
.ad-rail .ad-card { width: 100%; }

/* ---------- espace admin : selecteur de type de media ---------- */
.ad-media-tab { position: relative; display: inline-flex; }
.ad-media-tab input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ad-media-tab span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .42rem .8rem;
  border-radius: 999px;
  border: 2px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-light, #64748b);
  pointer-events: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ad-media-tab:hover span { border-color: color-mix(in srgb, #10b981 55%, var(--border, #e2e8f0)); }
.ad-media-tab.is-on span {
  border-color: #10b981;
  background: color-mix(in srgb, #10b981 14%, transparent);
  color: inherit;
}
.ad-media-tab input:focus-visible + span {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* ---------- emplacements larges : mise en page horizontale ----------
   .ad-wide et .ad-card sont sur DEUX elements differents (le conteneur
   et l'article) : le separateur est donc obligatoire. */
.ad-slot.ad-wide .ad-track > .ad-card {
  flex: 0 0 min(78%, 680px);
  min-width: min(78%, 680px);
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
}
.ad-wide .ad-media-wrap {
  flex: 0 0 auto;
  width: clamp(140px, 26%, 260px);
}
.ad-wide .ad-media { aspect-ratio: 16 / 10; }
.ad-wide .ad-text { flex: 1 1 auto; }
.ad-wide .ad-cta { align-self: flex-start; }

/* le slot coupé au milieu de la grille reste sur toute la largeur */
.listings-grid > .ad-slot { grid-column: 1 / -1; margin-block: .25rem 1.5rem; }

/* ---------- bandeau compact (footer) ----------
   Le conseil eco peut aussi tomber dans un rail : on le contraint aux
   emplacements larges, sinon il passerait en ligne dans la colonne etroite. */
.ad-slot.ad-wide.ad-tip > .ad-card,
.ad-slot[data-ad-slot="footer_strip"] .ad-track > .ad-card {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.1rem;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--ad-accent) 20%, var(--surface, #fff)), var(--surface, #fff) 70%);
}
.ad-slot.ad-wide.ad-tip .ad-text,
.ad-slot[data-ad-slot="footer_strip"] .ad-text { flex: 1 1 auto; }
.ad-slot.ad-wide.ad-tip .ad-desc { font-size: .82rem; }

/* ---------- fiche annonce : encart resserré ---------- */
.ad-slot[data-ad-slot="listing_bottom"] .ad-track > .ad-card { padding: .85rem 1rem; }
.ad-slot[data-ad-slot="listing_bottom"] .ad-desc { -webkit-line-clamp: 2; }

/* =====================================================================
   RESPONSIVE — les rails disparaissent, les emplacements larges restent
   La grille de body bascule déjà en une colonne à 1024px et masque
   .sidebar-left/.sidebar-right ; on double la règle pour que le contenu
   suive si un rail est inséré ailleurs.
   ===================================================================== */
@media (max-width: 1024px) {
  .ad-rail { display: none !important; }
  .sidebar-left, .sidebar-right { display: none; }

  .ad-slot.ad-wide .ad-track > .ad-card { flex-basis: 88%; min-width: 88%; flex-direction: column; align-items: stretch; gap: .7rem; }
  .ad-slot.ad-wide .ad-media-wrap { width: 100%; }
  .ad-slot.ad-wide .ad-media { width: 100%; aspect-ratio: 16 / 9; }
  .ad-slot.ad-wide .ad-cta { align-self: flex-start; }

  .ad-slot[data-ad-slot="footer_strip"] .ad-track > .ad-card,
  .ad-slot.ad-wide.ad-tip .ad-track > .ad-card { flex-direction: column; align-items: stretch; }

  .ad-card { padding: .95rem; }
  .ad-title { font-size: .92rem; }
}

@media (max-width: 480px) {
  .ad-slot { margin-block: 1rem; }
  .ad-card { padding: .85rem; border-radius: 12px; }
  .ad-cta { width: 100%; justify-content: center; }
  .ad-kicker { font-size: .64rem; }
  .ad-slot.ad-wide .ad-track > .ad-card { flex-basis: 94%; min-width: 94%; }
}

/* ---------- thème clair : lisibilité du liseré ---------- */
@media (prefers-color-scheme: light) {
  .ad-card { box-shadow: 0 6px 18px -16px rgba(15, 23, 42, .6); }
}