/**
 * Emplacements publicitaires — Le Kiosque Le Journal / Pixim.
 *
 * Reprend les jetons du design system du journal (mêmes valeurs que les
 * variables LESS du style white-darkblue) plutôt que des couleurs inventées.
 */

.pixim-ad {
    --pixim-ad-ground: #f6f9fc;
    --pixim-ad-line: #e3e8ef;
    --pixim-ad-dash: #cbd5e1;
    --pixim-ad-ghost: #94a3b8;
    --pixim-ad-muted: #64748b;
    --pixim-ad-ink: #1e3a54;
    --pixim-ad-accent: #03bccf;
}

/* — Mention légale ————————————————————————————————— */

.pixim-ad__label {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pixim-ad-ghost);
    margin-bottom: 8px;
}

/* — Le cadre : c'est lui qui réserve la place ————————— */

.pixim-ad__box {
    position: relative;
    overflow: hidden;

    /* La réserve de hauteur vient des variables posées en style inline par le
       rendu. Sans elles (format natif) la règle est inerte : max-width:none et
       aucun ratio imposé. */
    max-width: var(--pixim-ad-w, none);
    aspect-ratio: var(--pixim-ad-ar, auto);
}

.pixim-ad__box > img,
.pixim-ad__box > a > img,
.pixim-ad__box iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.pixim-ad__box > img,
.pixim-ad__box > a > img {
    object-fit: contain;
}

/* Gabarit pointillé tant que le slot Google n'a rien reçu — c'est la vue
   d'édition dans le Builder, et le repère visuel en recette. */
.pixim-ad__box[data-pixim-ad-unit]:empty::after {
    content: attr(data-pixim-ad-size);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--pixim-ad-dash);
    background: var(--pixim-ad-ground);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--pixim-ad-ghost);
}

/* — Alignements ————————————————————————————————————— */

.pixim-ad--align-center .pixim-ad__box {
    margin-inline: auto;
}

.pixim-ad--align-center .pixim-ad__label {
    text-align: center;
}

.pixim-ad--align-right .pixim-ad__box {
    margin-inline-start: auto;
}

.pixim-ad--align-right .pixim-ad__label {
    text-align: right;
}

/* — Encart natif ———————————————————————————————————— */

.pixim-ad__native {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--pixim-ad-line);
    border-radius: 8px;
    background: #fff;
}

.pixim-ad__native-visual {
    flex: 0 0 auto;
    width: 70px;
}

.pixim-ad__native-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.pixim-ad__native-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.pixim-ad__native-title {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: var(--pixim-ad-ink);
}

.pixim-ad__native-text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--pixim-ad-muted);
}

.pixim-ad__native-cta {
    align-self: flex-start;
    margin-top: 3px;
}

/* — Sous le point de bascule des colonnes, le rail passe pleine largeur :
     on garde les encarts centrés et on borne la demi-page. ————————— */

@media (max-width: 1023px) {
    .pixim-ad__box {
        margin-inline: auto;

        /* Quand une taille mobile est déclarée, c'est elle qui commande la
           réserve : sinon on garderait le ratio d'un 970 × 250 pour y afficher
           un 320 × 100, et la mention flotterait au-dessus d'un grand vide.
           Le repli sur les variables desktop garde le comportement d'origine
           pour les emplacements sans taille mobile. */
        max-width: var(--pixim-ad-w-m, var(--pixim-ad-w, none));
        aspect-ratio: var(--pixim-ad-ar-m, var(--pixim-ad-ar, auto));
    }

    .pixim-ad--half_page .pixim-ad__box {
        max-width: 300px;
    }
}

/* — Google AdSense (2026-10-22) ————————————————————————
     Le bloc <ins> occupe le cadre ; quand Google n'a rien à servir, il pose
     data-ad-status="unfilled" : l'emplacement est replié, mention comprise,
     comme un emplacement Ad Manager vide. */

.pixim-ad__box > ins.adsbygoogle {
    display: block;
    width: 100%;
    height: 100%;
}

.pixim-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
    display: none;
}