/* =============================================================
   Publicités — styles frontend
   ============================================================= */

.habari-ad-zone {
    display: block;
    width: 100%;
    overflow: hidden;
}

.habari-ad__link {
    display: block;
    line-height: 0; /* Supprime l'espace sous l'image */
}

.habari-ad__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Portrait 3:4 — le conteneur force le ratio, l'image le remplit */
.habari-ad--portrait {
    aspect-ratio: 3 / 4;
}

.habari-ad--portrait .habari-ad__img {
    height: 100%;
    object-fit: cover;
}

/* Carré 1:1 */
.habari-ad--square {
    aspect-ratio: 1 / 1;
}

.habari-ad--square .habari-ad__img {
    height: 100%;
    object-fit: cover;
}

/* Paysage 3:1 */
.habari-ad--landscape {
    aspect-ratio: 3 / 1;
}

.habari-ad--landscape .habari-ad__img {
    height: 100%;
    object-fit: cover;
}

/* =============================================================
   Home Grid — Card publicitaire
   Hérite du flex-sizing de .habari-article-card (breakpoints.css)
   ============================================================= */

.habari-article-card--ad {
    position: relative;
}

/* L'image portrait remplit toute la largeur de la card via aspect-ratio */
.habari-article-card--ad .habari-ad-zone {
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--habari-dark-off);
    overflow: hidden;
}

.habari-article-card--ad .habari-ad-disclaimer {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--habari-dark-pale);
    line-height: 1.6;
}

.habari-article-card--ad .habari-ad__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================
   Proverbes Grid — Card publicitaire
   UIkit étire les cellules flex à la hauteur de la plus grande ;
   la zone doit remplir toute la hauteur de la card (height:100%)
   plutôt que de maintenir un ratio fixe qui laisserait du blanc.
   ============================================================= */

.proverbe-suggested-card-wrap--ad {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* flex:1 pour remplir toute la hauteur de la cellule UIkit */
.proverbe-suggested-card-wrap--ad .habari-ad-zone {
    flex: 1;
    min-height: 160px;
    overflow: hidden;
}

.proverbe-suggested-card-wrap--ad .habari-ad__img,
.proverbe-suggested-card-wrap--ad .habari-ad-zone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =============================================================
   Dashboard publicités — page frontend /habari-ads/
   ============================================================= */

.habari-ads-dashboard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--habari-secondary-navy);
}

.habari-ads-dashboard__title {
    font-family: var(--habari-font-heading);
    font-size: 1.75rem;
    color: var(--habari-secondary-navy);
    margin: 0;
}

.habari-ads-dashboard__export {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: var(--habari-secondary-navy);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.habari-ads-dashboard__export:hover {
    background: var(--habari-primary-brand);
    color: #fff;
}

.habari-ads-dashboard__section-title {
    font-family: var(--habari-font-heading);
    font-size: 1.15rem;
    color: var(--habari-secondary-navy);
    margin: 2rem 0 1rem;
}

.habari-ads-dashboard__section-title--warning {
    color: var(--habari-primary-brand);
}

.habari-ads-dashboard__table-wrap {
    overflow-x: auto;
    margin-bottom: 2rem;
}

.habari-ads-dashboard__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.habari-ads-dashboard__table th,
.habari-ads-dashboard__table td {
    padding: 0.65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--habari-dark-off);
}

.habari-ads-dashboard__table thead th {
    background: var(--habari-secondary-navy);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.habari-ads-dashboard__table tbody tr:nth-child(even) td {
    background: var(--habari-dark-off);
}

.habari-ads-dashboard__badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.habari-ads-dashboard__badge--premium {
    background: var(--habari-secondary-navy);
    color: #fff;
}

.habari-ads-dashboard__badge--standard {
    background: var(--habari-dark-off);
    color: var(--habari-secondary-navy);
}

.habari-ads-dashboard__empty {
    color: var(--habari-dark-pale);
}

.habari-ads-dashboard__date--warning {
    color: var(--habari-primary-brand);
    font-weight: 700;
}

.habari-ads-dashboard__action {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--habari-secondary-navy);
    color: var(--habari-secondary-navy);
    font-size: 0.8rem;
    text-decoration: none;
}

.habari-ads-dashboard__action:hover {
    background: var(--habari-secondary-navy);
    color: #fff;
}

.habari-ads-dashboard__ok {
    color: var(--habari-success-default, #46b450);
    font-weight: 600;
}

/* =============================================================
   Placeholder « Votre publicité ici » — zone d'article sans pub
   Conserve le ratio du format pour ne pas casser la mise en page.
   ============================================================= */
.habari-ad-placeholder {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    border: 1px dashed var(--habari-dark-pale);
    background: var(--habari-dark-off);
    color: var(--habari-dark-pale);
    transition: border-color 0.15s, color 0.15s;
}

.habari-ad-placeholder:hover,
.habari-ad-placeholder:focus-visible {
    border-color: var(--habari-secondary-navy);
    color: var(--habari-secondary-navy);
}

.habari-ad-placeholder__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.habari-ad-placeholder__cta {
    font-family: var(--habari-font-heading);
    font-size: 0.95rem;
    line-height: 1.3;
}

.habari-ad-placeholder__dims {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.habari-ad-placeholder--portrait  { aspect-ratio: 3 / 4; }
.habari-ad-placeholder--square    { aspect-ratio: 1 / 1; }
.habari-ad-placeholder--landscape { aspect-ratio: 3 / 1; }

/* Sous le ratio paysage très large, garantir une hauteur lisible sur petit écran */
@media screen and (max-width: 480px) {
    .habari-ad-placeholder--landscape {
        aspect-ratio: auto;
        min-height: 96px;
    }
}

/* =============================================================
   Proverbe — Sidebar sponsor (single-proverbe.php)
   Grille 2 colonnes : article + colonne pub sticky (desktop ≥960px),
   empilée sous le contenu en mobile/tablette (comportement UIkit @m).
   ============================================================= */
.proverbe-single-sidebar__inner {
    position: sticky;
    top: calc(var(--habari-navbar-height, 70px) + 1rem);
}

.proverbe-sponsor {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--habari-dark-off);
    background: #fff;
    padding: 1rem;
}

.proverbe-sponsor__title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--habari-dark-pale);
    margin: 0 0 0.25rem;
}

.proverbe-sponsor__note {
    font-size: 0.85rem;
    color: var(--habari-dark-pale);
    line-height: 1.5;
    margin: 0 0 1rem;
}

/* Visuel carré nativement 300×300 : on borne la largeur et on centre */
.proverbe-sponsor__slot {
    max-width: 300px;
    margin: 0 auto;
}

/* Sous le breakpoint desktop : pas de sticky, encart pleine largeur centré */
@media screen and (max-width: 959px) {
    .proverbe-single-sidebar__inner {
        position: static;
    }
    .proverbe-single-sidebar {
        margin-top: 1.5rem;
    }
}

/* Badge "Pub" — positionné en haut à droite de la card */
.habari-ad-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 0;
    pointer-events: none;
    line-height: 1.6;
}