/* Mise en page 2 colonnes pour articles avec poll (hero inclus) */

.article-with-poll-layout {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne sur mobile */
    gap: 2rem;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding-left: var(--theme-container-edge-spacing, 20px);
    padding-right: var(--theme-container-edge-spacing, 20px);
    box-sizing: border-box;
    align-items: start;
}

/* Ajustements pour desktop */
@media (min-width: 690px) {
    .article-with-poll-layout {
        padding-left: 60px;
        padding-right: 60px;
    }
}

/* Sur mobile, padding plus réduit */
@media (max-width: 690px) {
    .article-with-poll-layout {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* Desktop: 2 colonnes avec rapport 4fr 3fr (seulement à partir de 1000px) */
@media (min-width: 1000px) {
    .article-with-poll-layout {
        grid-template-columns: 4fr 3fr;
        gap: 3rem;
    }
}

/* Reset des styles Blocksy qui pourraient interférer */
.has-attached-poll .ct-container,
.has-attached-poll .ct-container-narrow,
.has-attached-poll .ct-container-full {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Colonne de contenu (gauche) */
.article-content-column {
    width: 100%;
    min-width: 0; /* Permet au contenu de se rétrécir si nécessaire */
}

/* Colonne du poll (droite) */
.article-poll-column {
    width: 100%;
    min-width: 0;
}

/* Style du poll dans la sidebar */
.publiconion-side-poll {
    position: sticky;
    top: 2rem; /* Le poll reste visible lors du scroll */
    background-color: #f8f9fa;
    box-sizing: border-box;
}

/* Ajustement de l'alignement du poll par rapport au hero header */
@media (min-width: 1000px) {
    .article-poll-column {
        padding-top: 0; /* Aligne avec le debut du contenu */
    }
    
    /* Si le hero header a une marge, on ajuste */
    .ct-hero-section + .ct-container .article-with-poll-layout .article-poll-column,
    .ct-hero-section + .ct-container-narrow .article-with-poll-layout .article-poll-column,
    .ct-hero-section + .ct-container-full .article-with-poll-layout .article-poll-column {
        padding-top: 1rem;
    }
}

.publiconion-side-poll .publiconion-poll {
    max-width: 100%;
    margin: 0;
}

/* En dessous de 1000px, le poll apparaît au-dessus du contenu */
@media (max-width: 999px) {
    .article-with-poll-layout {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        /* Reset des contraintes qui pourraient causer des problèmes */
        overflow: visible;
        position: relative;
    }
    
    .article-poll-column {
        order: 1; /* Poll en haut sur mobile/tablette */
        width: 100%;
        max-width: 100%;
    }
    
    .article-content-column {
        order: 2; /* Contenu en bas sur mobile/tablette */
        width: 100%;
        max-width: 100%;
    }
    
    .publiconion-side-poll {
        position: static !important; /* Pas de sticky sur mobile/tablette */
        margin-bottom: 1.5rem;
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* S'assurer que les containers Blocksy ne causent pas de problèmes */
    .has-attached-poll .ct-container,
    .has-attached-poll .ct-container-narrow,
    .has-attached-poll .ct-container-full {
        overflow: visible;
    }
}

/* Responsive design pour très petits écrans */
@media (max-width: 480px) {
    .article-with-poll-layout {
        gap: 1.5rem;
    }
}

/* Style pour les anciens polls inline (compatibilité) */
.publiconion-inline-poll {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-sizing: border-box;
}

.publiconion-inline-poll .publiconion-poll {
    max-width: 100%;
    margin: 0;
}