/* =========================================================================
   SAFA ad-engine — shared across both variants
   One <div class="ad-slot"> element, four renderings driven by a body class.
   ========================================================================= */

:root {
  --ad-zone-line:        #dc3545;   /* PPTX red dashed placeholder */
  --ad-zone-tint:        #fdecee;
  --ad-zone-sponsored:   #e8a200;   /* PPTX amber for « sponsorisé » */
  --ad-zone-sponsored-bg:#fdf7e3;
  --ad-skin-decor:       #6d28d9;   /* PPTX purple « habillage » */
  --ad-bar-bg:           #0f172a;
  --ad-bar-fg:           #e2e8f0;
  --ad-bar-accent:       #28a745;
}

/* ---- The slot box: size comes from data-format -------------------------- */
.ad-slot {
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Open Sans", system-ui, sans-serif;
  border-radius: 6px;
  overflow: hidden;
}
/* Token names are internal keys; the rendered shape is what matters:
   bandeau   = thin leaderboard strip (top / standard banner)
   banniere  = medium central banner (video-capable)
   encart-…  = half-page / medium rectangle (rail & cards) */
.ad-slot[data-format="bandeau-970x250"]  { max-width: 970px; aspect-ratio: 970/90;  }
.ad-slot[data-format="banniere-970x250"] { max-width: 970px; aspect-ratio: 970/170; }
.ad-slot[data-format="bandeau-728x90"]   { max-width: 728px; aspect-ratio: 728/90;  }
.ad-slot[data-format="encart-300x600"]   { max-width: 300px; aspect-ratio: 300/520; }
.ad-slot[data-format="encart-300x250"]   { max-width: 300px; aspect-ratio: 300/250; }
.ad-slot[data-format="ecran-sponsor"]    { max-width: 760px; aspect-ratio: 16/9;    }

/* The numbered badge from the PPTX (data-num) */
.ad-slot__num {
  position: absolute; top: 8px; left: 8px;
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--ad-zone-line); color: #fff;
  font: 700 12px/22px "Open Sans", sans-serif;
  display: none;
}
.ad-slot[data-sponsored] .ad-slot__num { background: var(--ad-zone-sponsored); }

/* ===== MODE: ZONES — dashed labelled placeholder (wireframe intent) ====== */
.ad-mode-zones .ad-slot {
  border: 2px dashed var(--ad-zone-line);
  background: var(--ad-zone-tint);
  color: var(--ad-zone-line);
  min-height: 54px;
}
.ad-mode-zones .ad-slot[data-sponsored] {
  border-color: var(--ad-zone-sponsored);
  background: var(--ad-zone-sponsored-bg);
  color: #9a6b00;
}
.ad-mode-zones .ad-slot__num { display: block; }
.ad-mode-zones .ad-slot__label {
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  padding: 6px 12px; line-height: 1.3;
}
.ad-mode-zones .ad-slot__dims {
  display: block; font-weight: 600; font-size: 11px; opacity: .75; margin-top: 2px;
}
.ad-mode-zones .ad-creative,
.ad-mode-zones .ad-slot__tag { display: none; }

/* ===== MODE: SAMPLE — realistic CSS-drawn demo creative ================== */
.ad-mode-sample .ad-slot,
.ad-mode-skin   .ad-slot {
  border: 1px solid #e5e7eb;
  background: #fff;
}
.ad-mode-sample .ad-slot__label,
.ad-mode-sample .ad-slot__num,
.ad-mode-skin   .ad-slot__label,
.ad-mode-skin   .ad-slot__num { display: none; }

.ad-creative {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 6px; padding: 14px 18px;
  color: #fff; text-align: left;
  background: var(--cr-bg, linear-gradient(135deg, #1e3a8a, #2563eb));
}
.ad-creative__brand { font: 800 15px/1.1 "Raleway", sans-serif; letter-spacing: .03em; }
.ad-creative__head  { font: 700 clamp(15px, 2.4vw, 24px)/1.15 "Raleway", sans-serif; }
.ad-creative__sub   { font: 400 12px/1.3 "Open Sans", sans-serif; opacity: .92; }
.ad-creative__cta {
  margin-top: 4px; align-self: flex-start;
  background: rgba(255,255,255,.95); color: #111;
  font: 700 11px/1 "Open Sans", sans-serif;
  padding: 7px 12px; border-radius: 999px;
}
.ad-creative--center { align-items: center; justify-content: center; text-align: center; }
.ad-creative--center .ad-creative__cta { align-self: center; }

/* Leaderboard / thin banners: one compact row, no sub-line (it would clip) */
.ad-slot[data-format="bandeau-970x250"] .ad-creative,
.ad-slot[data-format="bandeau-728x90"]  .ad-creative {
  flex-direction: row; align-items: center; justify-content: center;
  gap: 8px 18px; flex-wrap: wrap; padding: 8px 20px; text-align: center;
}
.ad-slot[data-format="bandeau-970x250"] .ad-creative__sub,
.ad-slot[data-format="bandeau-728x90"]  .ad-creative__sub { display: none; }
.ad-slot[data-format="bandeau-970x250"] .ad-creative__head,
.ad-slot[data-format="bandeau-728x90"]  .ad-creative__head { font-size: clamp(14px,1.9vw,19px); }
.ad-slot[data-format="bandeau-970x250"] .ad-creative__cta,
.ad-slot[data-format="bandeau-728x90"]  .ad-creative__cta { margin-top: 0; align-self: center; }

/* « Publicité » disclosure tag — always shown over real creatives */
.ad-slot__tag { display: none; }
.ad-mode-sample .ad-slot__tag,
.ad-mode-skin   .ad-slot__tag {
  display: block; position: absolute; top: 6px; right: 6px;
  background: rgba(15,23,42,.72); color: #fff;
  font: 600 9px/1 "Open Sans", sans-serif; letter-spacing: .08em;
  padding: 4px 7px; border-radius: 4px; text-transform: uppercase;
}

/* ===== MODE: CLEAN — no ads, pure site ================================== */
.ad-mode-clean .ad-slot { display: none !important; }
/* containers that exist only to hold an ad collapse cleanly */
.ad-mode-clean .ad-host--collapsible { display: none !important; }

/* ===== MODE: SKIN 24h — full takeover (PPTX slide 6) ==================== */
.ad-mode-skin {
  --skin-gutter: clamp(0px, calc((100vw - 1180px) / 2), 220px);
  /* reserve space so the fixed décor never paints over the content
     (PPTX slide 6: « Contenu du site (inchangé) » sits BETWEEN the décor) */
  padding-left: var(--skin-gutter);
  padding-right: var(--skin-gutter);
}
/* op banner spans the full width above the décor, not just the content */
.ad-mode-skin .skin-banner {
  margin-left: calc(-1 * var(--skin-gutter));
  margin-right: calc(-1 * var(--skin-gutter));
  position: relative; z-index: 12;
}
.skin-decor { display: none; }
.ad-mode-skin .skin-decor {
  display: block; position: fixed; top: 0; bottom: 0; width: var(--skin-gutter);
  z-index: 10; pointer-events: auto; cursor: pointer;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #4c1d95, #6d28d9 55%, #4c1d95);
  color: #fff;
}
.ad-mode-skin .skin-decor--left  { left: 0;  }
.ad-mode-skin .skin-decor--right { right: 0; }
.ad-mode-skin .skin-decor__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 800 20px/1 "Raleway", sans-serif; letter-spacing: .35em;
  text-transform: uppercase;
}
.ad-mode-skin .skin-decor--left .skin-decor__inner { transform: rotate(180deg); }

.skin-banner { display: none; }
.ad-mode-skin .skin-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #0b1220; color: var(--ad-zone-sponsored);
  font: 700 13px/1 "Open Sans", sans-serif; letter-spacing: .06em;
  padding: 10px 16px; text-align: center;
}
/* ===== Demo control bar ================================================= */
.ad-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: 4px;
  background: var(--ad-bar-bg); color: var(--ad-bar-fg);
  padding: 6px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  font-family: "Open Sans", system-ui, sans-serif;
}
.ad-bar__title {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; opacity: .65; padding: 0 12px 0 10px;
}
.ad-bar__btn {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--ad-bar-fg);
  font: 600 12px/1 "Open Sans", sans-serif;
  padding: 9px 14px; border-radius: 999px; transition: background .15s, color .15s;
}
.ad-bar__btn:hover { background: rgba(255,255,255,.10); }
.ad-bar__btn[aria-pressed="true"] {
  background: var(--ad-bar-accent); color: #fff;
}
.ad-bar__btn span { font-size: 14px; margin-right: 5px; }

@media (max-width: 640px) {
  .ad-bar { bottom: 8px; flex-wrap: wrap; max-width: 94vw; justify-content: center; }
  .ad-bar__title { display: none; }
  .ad-bar__btn { padding: 8px 11px; }
}

/* ===== Mobile sticky anchor (slide 5 · M0 320×50) ===================== */
.ad-anchor {
  display: none;                       /* desktop: hidden — mobile only */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
  height: 56px; background: #fff; border-top: 1px solid #e5e7eb;
  align-items: center; justify-content: center; padding: 4px 8px;
}
.ad-anchor .ad-slot {
  max-width: 360px; height: 48px; min-height: 48px !important;
  aspect-ratio: auto !important; overflow: hidden;
}
.ad-anchor .ad-slot__dims { display: none; }
.ad-anchor .ad-slot__label { font-size: 11px; padding: 0 8px; }
.ad-anchor .ad-creative {
  flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px;
}
.ad-anchor .ad-creative__sub { display: none; }
.ad-anchor .ad-creative__head { font-size: 12px; }
.ad-anchor .ad-creative__brand { font-size: 12px; }
.ad-anchor .ad-creative__cta { margin-top: 0; padding: 5px 9px; font-size: 10px; }
.ad-mode-clean .ad-anchor { display: none !important; }

/* leave room so the fixed bar never hides page footer content */
body { padding-bottom: 84px; }

/* ===== MOBILE ≤768px — slide-5 inventory (M0/M1/M2-4) ================= */
@media (max-width: 768px) {
  .ad-slot { max-width: 100% !important; aspect-ratio: auto !important; }
  /* M1 · large banner 320×100 (top bandeau) */
  .ad-slot[data-format="bandeau-970x250"]  { min-height: 92px; }
  /* M2/M3/M4 · in-feed 300×250 (banners & big side rail collapse in-feed) */
  .ad-slot[data-format="banniere-970x250"],
  .ad-slot[data-format="encart-300x600"]   { min-height: 230px; max-width: 320px !important; }
  .ad-slot[data-format="bandeau-728x90"]   { min-height: 80px;  }
  .ad-slot[data-format="encart-300x250"]   { min-height: 220px; max-width: 320px !important; }
  .ad-slot[data-format="ecran-sponsor"]    { min-height: 220px; }
  /* M0 · 320×50 sticky anchor, above the demo bar */
  .ad-anchor { display: flex; }
  .ad-bar { bottom: 64px; }
  body { padding-bottom: 134px; }
  /* skin gutters already collapse (clamp → 0) below 1180px */
}