/* ================================================================
   IncideX — Shared Ad Slot Placeholders
   One class set, reused everywhere (homepage, à propos, bone pages).
   Each slot reserves its final layout space now, so dropping a real
   ad network snippet into a .ad-slot div later causes zero layout
   shift and requires no CSS/structural changes anywhere else.
================================================================ */

/* ============================================================
   📍 AD POSITION CONFIG (default — used as fallback only; à propos
   and bone pages actually auto-center themselves via JS, so this
   mainly matters if you remove that JS logic later).
   Homepage has its OWN separate copy of this block in index.html
   so you can move homepage rails without affecting the other pages.
============================================================ */
:root {
  --rail-left:  3%;     /* rail distance from the LEFT edge of the screen.  Try: 50px, 5%, 10% */
  --rail-right: 3%;     /* rail distance from the RIGHT edge of the screen. Try: 50px, 5%, 10% */
  --rail-top:   140px;  /* rail distance from the TOP of the screen */
  --rail-w:     160px;  /* rail width — fallback only; à propos/bone pages set this via JS */
}

.ad-slot {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  justify-self: start;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(253, 216, 53, 0.22);
  border-radius: 10px;
  color: rgba(240, 240, 240, 0.28);
  font-family: 'Poppins', system-ui, Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}
.ad-slot::before { content: "Publicité"; }

/* Once a real ad has been inserted into a slot, add this class (via JS,
   after the ad network confirms fill) to hide the placeholder label.
   Not wired up to anything yet — this is prep for when real AdSense
   code goes in. */
.ad-slot--loaded::before { content: none; }

/* ---- In-content banner: sits inline between sections ---- */
.ad-slot--incontent {
  min-height: 100px;
  margin: 28px auto;
  max-width: 1000px;
}
@media (min-width: 900px) {
  .ad-slot--incontent { min-height: 120px; }
}

/* ---- Footer banner: end-of-content leaderboard ---- */
.ad-slot--footer {
  min-height: 100px;
  margin: 24px auto 8px;
  max-width: 1000px;
}

/* ---- Anchor: fixed bottom bar, ALL screen sizes, user-closable ----
   Google rolled out "dynamic anchor ads" to desktop (>1000px) on
   May 21, 2026 — previously this format was mobile-only. Same bar,
   same behavior, on every screen size now: highest-viewability slot
   there is (always in view, CPM-friendly), so keep it everywhere. */
.ad-slot--anchor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  min-height: 72px;
  max-height: 110px;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(253, 216, 53, 0.25);
  background: #141414;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45);
  padding-right: 36px;
}

.ad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(253, 216, 53, 0.12);
  border: 1px solid rgba(253, 216, 53, 0.45);
  color: #fdd835;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  transition: background 0.15s, color 0.15s;
}
.ad-close:hover,
.ad-close:active {
  background: rgba(253, 216, 53, 0.24);
  color: #fff5cc;
}

/* ---- Rail (skyscraper): fixed in the empty side gutters on wide screens only.
   Position comes from the --rail-left / --rail-right / --rail-top
   variables in the CONFIG block at the top of this file. Width comes
   from --rail-w here (homepage only — à propos/bone pages compute and
   set width via JS instead, since they know their real content width).
   Height is likewise set here as a pre-JS fallback (600px, the
   standard skyscraper/half-page height); JS on every page stretches it
   taller on tall screens, up to 1050px (IAB Portrait/Filmstrip), while
   keeping clear of the anchor bar at the bottom. ---- */
.ad-slot--rail {
  display: none;
  position: fixed;
  top: var(--rail-top);
  width: var(--rail-w, 160px);
  height: 600px;
  min-height: 600px;
  max-height: 1050px;
  z-index: 10;
  writing-mode: vertical-rl;
}
.ad-slot--rail-left  { left:  var(--rail-left); }
.ad-slot--rail-right { right: var(--rail-right); }

/* writing-mode: vertical-rl above rotates the "PUBLICITÉ" placeholder
   text to fit the narrow bar — intentional. But it's inherited by any
   real child element too, which would rotate a real AdSense <ins>/
   iframe sideways once one is dropped in here. This rule pre-empts
   that: it only targets actual DOM children (not the ::before label),
   so it does nothing right now (rail divs are empty) but auto-fixes
   the sideways-ad risk the moment real ad markup is inserted — no
   need to remember to add this by hand later. */
.ad-slot--rail > * {
  writing-mode: horizontal-tb;
}

/* Rails only appear on screens THIS WIDE or wider (the "compact vs
   wide" switch). This gate is what actually controls rail visibility
   on the HOMEPAGE (hand-positioned, no JS visibility logic). On à
   propos and bone pages, JS sets display directly based on measured
   gutter room and overrides this regardless — so changing this number
   only affects the homepage. Lower it further to show homepage rails
   on smaller screens too, but check for overlap with the skeleton/text
   content as you go (DevTools, ~1600–1900px range). This rule must
   stay AFTER .ad-slot--rail above, or the display:none up there wins. */
@media (min-width: 1700px) {
  .ad-slot--rail { display: flex; }
}