/* ba-pub.css — externalisé de pub-system.php getPubCSS() (cap Dove 21/08/2026) */
/* ══ pub-system.php v3.0 CSS ══════════════════════════════════ */

.pub-wrap{position:relative;font-family:"DM Sans",sans-serif;box-sizing:border-box}
.pub-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af!important;-webkit-text-fill-color:#9ca3af!important;display:block;text-align:center;margin-bottom:4px}
.pub-inner{border-radius:12px;overflow:hidden;position:relative;cursor:pointer;text-decoration:none;display:block;transition:transform .2s,box-shadow .2s}
.pub-inner:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.18)}
.pub-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.18)}
.pub-progress-fill{height:100%;border-radius:0 2px 2px 0;background:rgba(255,255,255,.65);width:0%;transition:width .5s linear}
.pub-dots{display:flex;justify-content:center;gap:5px;margin-top:7px}
.pub-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.18);border:none;padding:0;cursor:pointer;transition:all .25s}
.pub-dot.active{background:#0891B2;width:16px;border-radius:4px}
.pub-sponsor{position:absolute;top:7px;right:10px;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.45;font-family:"DM Sans",sans-serif}

.pub-ldb{width:100%;margin-bottom:16px}
.pub-ldb .pub-inner{height:90px;display:flex;align-items:center;padding:0 28px;gap:18px}
.pub-ldb .pub-logo-wrap{width:52px;height:52px;background:#fff;padding:7px;box-shadow:0 1px 3px rgba(0,0,0,.14);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.pub-ldb .pub-logo-wrap img{width:36px;height:36px;object-fit:contain}
.pub-ldb .pub-body{flex:1;min-width:0}
.pub-ldb .pub-marque{font-family:"Sora",sans-serif;font-size:16px;font-weight:900;line-height:1.1;margin-bottom:2px}
.pub-ldb .pub-slogan{font-size:12.5px;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub-ldb .pub-cta{padding:10px 22px;border-radius:24px;font-family:"Sora",sans-serif;font-size:12px;font-weight:900;white-space:nowrap;flex-shrink:0;display:inline-block;transition:transform .15s}
.pub-ldb .pub-cta:hover{transform:scale(1.04)}

.pub-sky{width:300px;flex-shrink:0}
.pub-sky .pub-inner{min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;gap:18px;text-align:center}
.pub-sky .pub-badge{font-size:48px}
.pub-sky .pub-marque{font-family:"Sora",sans-serif;font-size:24px;font-weight:900;letter-spacing:-.02em}
.pub-sky .pub-sep{width:44px;height:2px;border-radius:2px;background:currentColor;opacity:.28}
.pub-sky .pub-slogan{font-size:14px;opacity:.88;line-height:1.6;max-width:220px}
.pub-sky .pub-cta{padding:12px 24px;border-radius:26px;font-family:"Sora",sans-serif;font-size:13px;font-weight:900;display:inline-block;transition:transform .15s}
.pub-sky .pub-cta:hover{transform:scale(1.04)}
.pub-sky .pub-logo-wrap{width:64px;height:64px;background:#fff;padding:7px;box-shadow:0 1px 3px rgba(0,0,0,.14);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pub-sky .pub-logo-wrap img{width:48px;height:48px;object-fit:contain}

.pub-rect{width:300px;max-width:100%}
.pub-rect .pub-inner{height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:10px;text-align:center}
.pub-rect .pub-badge{font-size:34px}
.pub-rect .pub-marque{font-family:"Sora",sans-serif;font-size:20px;font-weight:900}
.pub-rect .pub-slogan{font-size:12.5px;opacity:.88;line-height:1.5;max-width:200px}
.pub-rect .pub-cta{padding:9px 20px;border-radius:20px;font-family:"Sora",sans-serif;font-size:12px;font-weight:900;display:inline-block;margin-top:4px;transition:transform .15s}
.pub-rect .pub-cta:hover{transform:scale(1.04)}

.pub-inl{width:100%;margin:10px 0}
.pub-inl .pub-inner{height:100px;display:flex;align-items:center;padding:0 18px;gap:14px}
.pub-inl .pub-logo-wrap{width:50px;height:50px;background:#fff;padding:7px;box-shadow:0 1px 3px rgba(0,0,0,.14);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.pub-inl .pub-logo-wrap img{width:36px;height:36px;object-fit:contain}
.pub-inl .pub-body{flex:1;min-width:0}
.pub-inl .pub-marque{font-family:"Sora",sans-serif;font-size:14px;font-weight:900;line-height:1.2;margin-bottom:3px}
.pub-inl .pub-slogan{font-size:12px;opacity:.88;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pub-inl .pub-cta{padding:9px 16px;border-radius:18px;font-family:"Sora",sans-serif;font-size:11.5px;font-weight:900;white-space:nowrap;flex-shrink:0;display:inline-block;transition:transform .15s}
.pub-inl .pub-cta:hover{transform:scale(1.04)}

.pub-strip{width:100%;margin:8px 0}
.pub-strip .pub-inner{height:44px;display:flex;align-items:center;padding:0 16px;gap:10px;border-radius:8px}
.pub-strip .pub-marque{font-family:"Sora",sans-serif;font-size:13px;font-weight:900;flex-shrink:0;white-space:nowrap}
.pub-strip .pub-slogan{font-size:12px;opacity:.88;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-strip .pub-cta{font-size:11px;font-weight:900;padding:6px 14px;border-radius:12px;white-space:nowrap;flex-shrink:0;display:inline-block;font-family:"Sora",sans-serif;transition:transform .15s}
.pub-strip .pub-cta:hover{transform:scale(1.04)}

.pub-hero{width:100%;margin:20px 0}
.pub-hero .pub-inner{height:220px;display:flex;align-items:center;padding:0 48px;gap:32px}
.pub-hero .pub-logo-wrap{width:80px;height:80px;background:#fff;padding:7px;box-shadow:0 1px 3px rgba(0,0,0,.14);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.pub-hero .pub-logo-wrap img{width:60px;height:60px;object-fit:contain}
.pub-hero .pub-body{flex:1;min-width:0}
.pub-hero .pub-badge-big{font-size:48px;margin-bottom:6px;display:block}
.pub-hero .pub-marque{font-family:"Sora",sans-serif;font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.1;margin-bottom:6px}
.pub-hero .pub-slogan{font-size:15px;opacity:.9;line-height:1.55;max-width:460px}
.pub-hero .pub-cta-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.pub-hero .pub-cta{padding:14px 28px;border-radius:30px;font-family:"Sora",sans-serif;font-size:14px;font-weight:900;white-space:nowrap;display:inline-block;transition:transform .15s;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.pub-hero .pub-cta:hover{transform:scale(1.04)}
.pub-hero .pub-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.6;text-align:right}

.pub-mob{width:100%;margin:8px 0}
.pub-mob .pub-inner{height:60px;display:flex;align-items:center;padding:0 14px;gap:10px;border-radius:10px}
.pub-mob .pub-emoji{font-size:22px;flex-shrink:0}
.pub-mob .pub-body{flex:1;min-width:0}
.pub-mob .pub-marque{font-family:"Sora",sans-serif;font-size:13px;font-weight:900}
.pub-mob .pub-slogan{font-size:11px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-mob .pub-cta{padding:7px 14px;border-radius:14px;font-family:"Sora",sans-serif;font-size:11px;font-weight:900;white-space:nowrap;flex-shrink:0;display:inline-block;transition:transform .15s}
.pub-mob .pub-cta:hover{transform:scale(1.04)}

/* ══ v3.2 (27/05/2026 PM) cap Dove CAP 4 : homepage_hero LAVE-GLACE uniforme ══
   AVANT : chaque annonceur avait son fond couleur de marque (style['background']
           injecte cote JS via getPubInner). Du coup le banner top variait :
           mauve / orange / rouge selon advertiser. Visuellement disparate.
   APRES : on FORCE le fond .pub-hero .pub-inner en lave-glace (cap Dove "fond
           lave-glace partout, plus de mauve"). Les titres en blanc + accent
           vert BA #00b044 sur le CTA pour identite BonneAnnonce. Pour battre
           le style inline injecte, on utilise !important sur tous les overrides. */
.pub-hero .pub-inner {
    background: linear-gradient(135deg, #42A5F5 0%, #1E88E5 50%, #1565C0 100%) !important;
    color: #ffffff !important;
}
.pub-hero .pub-marque,
.pub-hero .pub-slogan,
.pub-hero .pub-badge-big,
.pub-hero .pub-tag {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
/* CTA accent vert BA brand pour signature BonneAnnonce */
.pub-hero .pub-cta {
    background: #ffffff !important;
    color: #0e7490 !important;
    -webkit-text-fill-color: #0e7490 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.60) !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
}
.pub-hero .pub-cta:hover {
    background: #e6f6fa !important;
    transform: scale(1.04) !important;
}
/* Logo wrap : verre translucide blanc sur le bleu lave-glace */
.pub-hero .pub-logo-wrap {
    background: rgba(255,255,255,0.22) !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Progress fill aligne couleur BA */
.pub-hero ~ .pub-dots .pub-dot.active,
.pub-hero .pub-progress-fill {
    background: #0891B2 !important;
}

.ba-pub-layout{display:flex;gap:24px;align-items:flex-start;max-width:1440px;margin:0 auto}
.ba-pub-sidebar-left,.ba-pub-sidebar-right{width:300px;flex-shrink:0;position:sticky;top:88px}
.ba-pub-main{flex:1;min-width:0}
.ba-pub-sidebar-slot{margin-bottom:20px}

/* ── cap Dove 22/08/2026 — SPONSORS MOBILE-FIRST ─────────────────────────
   AVANT : sous 1024px les 2 sidebars = display:none, et .pub-sky
   force-masque sous 768px  ->  AUCUN sponsor en mobile (perte de revenu
   sur le trafic majoritaire, alors qu'on a acte "mobile first").
   HYPOTHESE (documentee, reversible) : on veut le sponsor VISIBLE en
   mobile mais SOUS le contenu (content-first), en carte compacte.
   -> layout flex-column, contenu en 1er (order:1), rails empiles dessous ;
      le skyscraper 600px est degrade en carte auto-height sur telephone.
   Retirer ce bloc restaure exactement l'ancien comportement.
   NB : le "vrai" format mobile du moteur reste mobile_banner (pub-mob) ;
        quand annonce-v10.php emettra un slot mobile_banner en haut de flux,
        il s'affichera par-dessus, ce bloc ne le gene pas.                  */
@media(max-width:1300px){.ba-pub-sidebar-right{display:none}}
@media(max-width:1024px){
  .ba-pub-layout{display:flex;flex-direction:column;gap:16px}
  .ba-pub-main{width:100%;order:1;min-width:0}
  .ba-pub-sidebar-left{order:2}
  .ba-pub-sidebar-right{order:3;display:block}
  .ba-pub-sidebar-left,.ba-pub-sidebar-right{width:100%;position:static;top:auto}
  .ba-pub-sidebar-slot{margin:0 auto 16px;max-width:560px}
  .pub-sky{width:100%}
  .pub-sky .pub-inner{min-height:auto}
  /* cap Dove 22/08/2026 : masque le pill de pagination (dont l'actif vert #00b044)
     sous les cartes sponsors en mobile — faisait "gros bouton vert" + heurtait la
     regle palette (pas de vert plein en bouton). Rotation auto 10s conservee. */
  .ba-pub-sidebar-left .pub-dots,.ba-pub-sidebar-right .pub-dots{display:none}
}
@media(max-width:768px){
  .pub-ldb{display:none!important}
  /* .pub-sky reste visible (retrait du display:none) -> carte compacte */
  .pub-sky .pub-inner{min-height:auto!important;padding:24px 20px;gap:14px}
  .pub-sky .pub-badge{font-size:40px}
  .pub-sky .pub-marque{font-size:21px}
  .pub-sky .pub-slogan{font-size:13px}
  .pub-hero .pub-logo-wrap{display:none}
  .pub-hero .pub-body .pub-badge-big{font-size:32px}
  .pub-hero .pub-marque{font-size:20px}
  .pub-hero .pub-slogan{font-size:13px}
  .pub-hero .pub-cta-wrap{display:none}
  .pub-hero{height:auto}
  .pub-hero .pub-inner{padding:20px;gap:14px;height:auto}
}
@media(min-width:769px){.pub-mob{display:none!important}}