/* ══════════════════════════════════════════════════════════════
   SMCL — Zones publicitaires latérales v2
   Stratégie responsive :
   ≥ 768px  → grille 3 colonnes [pub | contenu fixe 310px | pub]
             les colonnes pub prennent tout l'espace restant (1fr)
   < 768px  → colonne unique centrée, marges gauche + droite = 3/5
              des annonces images → popup si admin l'active
══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --smcl-ad-radius:      14px;
    --smcl-ad-shadow:      0 4px 16px rgba(0,0,0,.10);
    --smcl-ad-shadow-hov:  0 12px 32px rgba(0,0,0,.22);
    --smcl-ad-gap:         24px;
    /* Contenu central élargi pour plus de confort de lecture */
    --smcl-content-width:  520px;
    --smcl-sidebar-bg:     linear-gradient(160deg, #f8f4ff 0%, #eef2ff 100%);
    --smcl-sidebar-border: rgba(139,124,246,.12);
    --smcl-transition:     .32s cubic-bezier(.34,1.56,.64,1);
    /* Mobile : marges légères pour maximiser le contenu */
    --smcl-mobile-margin:  12px;
    /* Couleur de séparation Vert Palme entre annonces et contenu */
    --smcl-palm-green:     #4caf7d;
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP & TABLETTE (≥ 768px) — 3 colonnes
══════════════════════════════════════════════════════════════ */
.smcl-page-wrapper {
    display: grid;
    grid-template-columns: 1fr var(--smcl-content-width) 1fr;
    grid-template-areas: "adleft content adright";
    gap: 0 var(--smcl-ad-gap);
    align-items: start;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.smcl-page-wrapper .smcl-gift-container {
    grid-area: content;
    margin: 0;
    width: 100%;
    min-width: 0;
}

.smcl-ad-zone--left  { grid-area: adleft;  }
.smcl-ad-zone--right { grid-area: adright; }

/* ── Fond décoratif des colonnes latérales ──────────────────── */
.smcl-ad-zone--left,
.smcl-ad-zone--right {
    background: var(--smcl-sidebar-bg);
    border: 1px solid var(--smcl-sidebar-border);
    border-radius: 18px;
    padding: 16px 10px;
    min-height: 120px;
}

/* ── Zone pub commune ─────────────────────────────────────── */
.smcl-ad-zone {
    position: sticky;
    top: 80px;
    align-self: start;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Slide — conteneur de chaque annonce ─────────────────── */
.smcl-ad-slide {
    display: none;
}
.smcl-ad-slide--visible {
    display: block;
    animation: smclAdFadeIn .3s ease;
}
@keyframes smclAdFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Désactiver les animations hover sur mobile — économie CPU */
@media (hover: none) {
    .smcl-ad-slide--visible:hover > *:not(.smcl-ad-badge):not(.smcl-ad-link),
    .smcl-ad-link:hover,
    .smcl-ad-slide--visible:hover img,
    .smcl-ad-slide--visible:hover iframe {
        transform: none !important;
        box-shadow: var(--smcl-ad-shadow) !important;
        filter: none !important;
    }
}

/* ── Carte publicitaire ───────────────────────────────────── */
.smcl-ad-slide > *:not(.smcl-ad-badge):not(.smcl-ad-link) {
    border-radius: var(--smcl-ad-radius);
    box-shadow: var(--smcl-ad-shadow);
    transition:
        transform     var(--smcl-transition),
        box-shadow    var(--smcl-transition),
        filter        var(--smcl-transition);
    will-change: transform;
    max-width: 100%;
    overflow: hidden;
    display: block;
}
.smcl-ad-slide--visible:hover > *:not(.smcl-ad-badge):not(.smcl-ad-link) {
    transform: scale(1.045) rotate(-1deg);
    box-shadow: var(--smcl-ad-shadow-hov);
    filter: brightness(1.03);
}

/* ── Lien cliquable ─────────────────────────────────────── */
.smcl-ad-link {
    display: block;
    text-decoration: none;
    border-radius: var(--smcl-ad-radius);
    box-shadow: var(--smcl-ad-shadow);
    overflow: hidden;
    transition:
        transform     var(--smcl-transition),
        box-shadow    var(--smcl-transition),
        filter        var(--smcl-transition);
    will-change: transform;
}
.smcl-ad-link:hover {
    transform: scale(1.045) rotate(-1deg);
    box-shadow: var(--smcl-ad-shadow-hov);
    filter: brightness(1.03);
}

/* ── Images dans la zone pub ─────────────────────────────── */
.smcl-ad-zone img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--smcl-ad-radius);
    box-shadow: var(--smcl-ad-shadow);
    transition: transform var(--smcl-transition), box-shadow var(--smcl-transition);
}
.smcl-ad-slide--visible:hover img {
    transform: scale(1.045) rotate(-1deg);
    box-shadow: var(--smcl-ad-shadow-hov);
}

/* ── iFrames ─────────────────────────────────────────────── */
.smcl-ad-zone iframe {
    max-width: 100%;
    width: 100%;
    border: none;
    border-radius: var(--smcl-ad-radius);
    box-shadow: var(--smcl-ad-shadow);
    display: block;
    transition: transform var(--smcl-transition), box-shadow var(--smcl-transition);
}
.smcl-ad-slide--visible:hover iframe {
    transform: scale(1.03) rotate(-.5deg);
    box-shadow: var(--smcl-ad-shadow-hov);
}

/* ── Badge CNIL ──────────────────────────────────────────── */
.smcl-ad-badge {
    display: block;
    text-align: center;
    font-size: .58em;
    color: #b0a8cc;
    margin-top: 5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-family: sans-serif;
}

/* ── Dots de rotation ────────────────────────────────────── */
.smcl-ad-dots {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
}
.smcl-ad-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.smcl-ad-dot--active {
    background: #8B7CF6;
    transform: scale(1.4);
}

/* ── Ciblage appareil ────────────────────────────────────── */
@media (min-width: 1025px) {
    .smcl-ad--mobile-only  { display: none !important; }
}
@media (max-width: 1024px) {
    .smcl-ad--desktop-only { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (< 768px) — colonne unique, marges gauche + droite = 3/5
   Ordre grille : pub-gauche → contenu → pub-droite
   Les annonces image passent en popup (si activé par l'admin)
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .smcl-page-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--smcl-ad-gap);
        /* Marges légères sur mobile — contenu principal occupe toute la largeur */
        padding: 0 var(--smcl-mobile-margin);
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Ordre mobile : contenu d'abord, puis annonces */
    .smcl-ad-zone--left  { order: 2; }
    .smcl-gift-container { order: 1; }
    .smcl-ad-zone--right { order: 3; }

    /* Supprimer la bordure Vert Palme sur mobile (pas nécessaire) */
    .smcl-page-wrapper .smcl-gift-container {
        border-left: none;
        border-right: none;
        box-shadow: none;
    }

    /* Fond décoratif pleine largeur */
    .smcl-ad-zone--left,
    .smcl-ad-zone--right {
        border-radius: 14px;
        padding: 12px;
        width: 100%;
    }

    .smcl-ad-zone {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
    }

    .smcl-ad-slide--visible {
        display: inline-flex;
        justify-content: center;
        max-width: 100%;
    }

    .smcl-ad-dots { display: none; }

    .smcl-ad-zone img  { max-height: 160px; width: auto; margin: 0 auto; }
    .smcl-ad-zone iframe { max-height: 180px; }

    /* Hover désactivé sur mobile */
    .smcl-ad-slide--visible:hover > *:not(.smcl-ad-badge):not(.smcl-ad-link),
    .smcl-ad-link:hover,
    .smcl-ad-slide--visible:hover img,
    .smcl-ad-slide--visible:hover iframe {
        transform: none;
        box-shadow: var(--smcl-ad-shadow);
        filter: none;
    }

    .smcl-page-wrapper * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ══════════════════════════════════════════════════════════════
   POPUP PUBLICITAIRE MOBILE — annonces image
   Activé via l'option admin smcl_ads_popup_mobile = 1
══════════════════════════════════════════════════════════════ */

/* Overlay sombre derrière le popup */
.smcl-ad-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 99998;
    backdrop-filter: blur(2px);
    animation: smclOverlayIn .25s ease;
}
@keyframes smclOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.smcl-ad-popup-overlay.smcl-popup--open {
    display: block;
}

/* Popup card */
/* ── Popup card — Android fix ────────────────────────────────
   Sur Android Chrome, position:fixed + transform:translate(-50%,-50%)
   provoque un décalage au scroll/clavier. On utilise à la place
   inset:0 + margin:auto + width/height explicite.
   Android supplémentaire : env(safe-area-inset-*) pour les encochres
─────────────────────────────────────────────────────────── */
.smcl-ad-popup {
    display: none;
    position: fixed;
    /* Marges auto de tous les côtés = centrage natif Android-safe */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background: linear-gradient(145deg, #ff4e8a 0%, #ff1f6d 100%);
    border-radius: 20px;
    padding: 28px 20px 24px;
    /* Largeur contrainte pour éviter tout débordement */
    width: min(92vw, 340px);
    max-width: calc(100vw - 32px);
    height: auto;
    max-height: min(85vh, 600px);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    box-shadow: 0 24px 60px rgba(255,30,109,.40), 0 4px 20px rgba(0,0,0,.20);
    opacity: 0;
    transition: opacity .22s ease;
    /* Android scroll fluide */
    -webkit-overflow-scrolling: touch;
    /* Empêche le débordement horizontal sur Android */
    box-sizing: border-box;
}
.smcl-ad-popup.smcl-popup--open {
    display: block;
    opacity: 1;
    /* Animation sans scale pour éviter le bug Android de centrage */
    animation: smclPopupIn .25s ease-out forwards;
}
@keyframes smclPopupIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Corrections mobiles supplémentaires pour le popup */
@media (max-width: 480px) {
    .smcl-ad-popup {
        width: min(96vw, 320px);
        padding: 22px 16px 20px;
        border-radius: 16px;
        max-height: 80vh;
    }
}

/* Emoji décoratif en haut */
.smcl-ad-popup-emoji {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
    animation: smclBounce 1.8s ease-in-out infinite;
}
@keyframes smclBounce {
    0%,100% { transform: translateX(-50%) translateY(0);    }
    50%      { transform: translateX(-50%) translateY(-8px); }
}

/* Titre du popup */
.smcl-ad-popup-title {
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin: 20px 0 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
}

/* Ticket blanc — image + label */
.smcl-ad-popup-ticket {
    background: #fff;
    border-radius: 18px;
    padding: 16px 12px 12px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
    position: relative;
    /* découpes latérales façon ticket */
    overflow: visible;
}
.smcl-ad-popup-ticket::before,
.smcl-ad-popup-ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff4e8a, #ff1f6d);
    transform: translateY(-50%);
}
.smcl-ad-popup-ticket::before { left: -10px; }
.smcl-ad-popup-ticket::after  { right: -10px; }

/* Séparateur pointillé dans le ticket */
.smcl-ad-popup-divider {
    border: none;
    border-top: 2px dashed #eee;
    margin: 10px 0;
}

/* Image dans le ticket */
.smcl-ad-popup-ticket img {
    max-width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

/* Label sous l'image */
.smcl-ad-popup-label {
    font-size: .82rem;
    color: #555;
    margin-top: 8px;
    font-style: italic;
}

/* Bouton CTA */
.smcl-ad-popup-cta {
    display: block;
    background: linear-gradient(135deg, #ffe04b 0%, #ffc800 100%);
    color: #333;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: .04em;
    border: none;
    border-radius: 50px;
    /* Grand bouton tactile — min 52px height */
    padding: 16px 28px;
    min-height: 52px;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255,180,0,.40);
    transition: transform .15s, box-shadow .15s;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.smcl-ad-popup-cta:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 28px rgba(255,180,0,.55);
}
.smcl-ad-popup-cta:active { transform: scale(.97); }

/* Minuteur d'expiration */
.smcl-ad-popup-expire {
    font-size: .78rem;
    color: rgba(255,255,255,.85);
    font-weight: 600;
    letter-spacing: .02em;
}
.smcl-ad-popup-expire span {
    font-family: monospace;
    background: rgba(0,0,0,.18);
    border-radius: 4px;
    padding: 1px 5px;
}

/* Bouton fermeture × */
.smcl-ad-popup-close {
    position: absolute;
    top: 10px; right: 12px;
    background: rgba(255,255,255,.25);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 1.1rem;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.smcl-ad-popup-close:hover { background: rgba(255,255,255,.40); }