/**
 * Blog Avancé - ACMP-WEB
 * Styles front-office (compatible thème Classic PS 1.7 / 8 / 9, Bootstrap 4/5)
 *
 * @author Alexandre MERY - ACMP-WEB
 */

/* ---------- Page article ---------- */
.aw-blog-page {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.aw-blog-image {
    text-align: center;
    margin-bottom: 2rem;
}

.aw-blog-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

.aw-blog-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

/* ---------- Contenu RTE ---------- */
.aw-blog-text {
    line-height: 1.8;
    font-size: 1rem;
    color: #333;
}

.aw-blog-text h2,
.aw-blog-text h3,
.aw-blog-text h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.aw-blog-text h2 {
    font-size: 1.75rem;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: .5rem;
}

.aw-blog-text h3 { font-size: 1.5rem; }
.aw-blog-text h4 { font-size: 1.25rem; }

.aw-blog-text p { margin-bottom: 1.5rem; }

.aw-blog-text img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.aw-blog-text ul,
.aw-blog-text ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.aw-blog-text li { margin-bottom: .5rem; }

.aw-blog-text blockquote {
    border-left: 4px solid #f5c518;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #555;
}

.aw-blog-text code {
    background-color: #f5f5f5;
    padding: .2rem .4rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: .9em;
}

.aw-blog-text pre {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.aw-blog-text pre code {
    background-color: transparent;
    padding: 0;
}

/* ---------- Maillage interne ---------- */
.aw-blog-children {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.aw-blog-children-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.aw-blog-children ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
}

.aw-blog-children li a {
    display: inline-block;
    padding: .35rem 0;
    text-decoration: none;
}

.aw-blog-children li a:hover { text-decoration: underline; }

/* ---------- Liste / accueil du blog ---------- */
.aw-blog-list {
    margin-top: 2rem;
}

.aw-blog-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.aw-blog-card-img img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: .75rem;
}

.aw-blog-card-title {
    font-size: 1.15rem;
    margin: 0 0 .5rem;
}

.aw-blog-card-title a {
    color: inherit;
    text-decoration: none;
}

.aw-blog-card-title a:hover { text-decoration: underline; }

.aw-blog-card-excerpt {
    font-size: .9rem;
    color: #666;
    flex-grow: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .aw-blog-page { padding: 15px 0; }
    .aw-blog-text { font-size: .95rem; }
    .aw-blog-text h2 { font-size: 1.5rem; }
    .aw-blog-text h3 { font-size: 1.3rem; }
    .aw-blog-text h4 { font-size: 1.1rem; }
}

/* ---------- Mise en page : bandeau + 3 colonnes ---------- */
/* Desktop (≥ 992 px) : sommaire 3 | contenu 7 | produits 2.
   En dessous, tout s'empile dans l'ordre du DOM :
   titre, date, image, sommaire, texte, produits. */

.aw-blog-header {
    margin-bottom: 2rem;
}

.aw-blog-header .aw-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    font-size: .9rem;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.aw-blog-header .aw-blog-image {
    margin-bottom: 0;
}

.aw-blog-layout {
    display: flex;
    flex-wrap: wrap;
}

/* ---------- Colonne sommaire (3/12) ---------- */
.aw-blog-toc-col {
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    /* Le sommaire suit la lecture : utile sur des billets longs. */
    .aw-blog-toc-col .aw-blog-toc {
        position: sticky;
        top: 20px;
        overflow-y: auto;
    }
}

/* ---------- Colonne produits (3/12) ---------- */
/* ~270 px : la miniature du thème doit s'adapter à la largeur, mais sa
   typographie native reste lisible — aucune réduction nécessaire. */
.aw-blog-aside {
    margin-bottom: 0;
}

.aw-blog-aside-title {
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #e0e0e0;
}

.aw-blog-aside .aw-blog-product {
    margin-bottom: 1.25rem;
}

.aw-blog-aside .aw-blog-product:last-child {
    margin-bottom: 0;
}

.aw-blog-aside .product-miniature,
.aw-blog-aside .thumbnail-container,
.aw-blog-aside .product-miniature .thumbnail-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.aw-blog-aside .product-miniature img {
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    /* Les panneaux de survol du thème sont dimensionnés pour la grille du
       catalogue : ils débordent dans une colonne latérale. */
    .aw-blog-aside .highlighted-informations {
        display: none;
    }
}

/* ---------- Empilement sous 992 px ---------- */
@media (max-width: 991.98px) {
    .aw-blog-aside {
        margin-top: 2.5rem;
    }

    /* Deux produits par ligne : une pile de 4 serait interminable */
    .aw-blog-products {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -.5rem;
    }

    .aw-blog-aside .aw-blog-product {
        width: 50%;
        padding: 0 .5rem;
    }
}

@media (max-width: 575.98px) {
    .aw-blog-aside .aw-blog-product {
        width: 100%;
    }
}


/* ---------- Carte produit autonome (rendu « module ») ---------- */
.aw-blog-product-card {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    height: 100%;
    background: #fff;
}

.aw-blog-product-link {
    display: block;
    padding: .75rem;
    text-decoration: none;
    color: inherit;
}

.aw-blog-product-link:hover {
    text-decoration: none;
}

.aw-blog-product-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: .5rem;
}

.aw-blog-product-name {
    display: block;
    font-size: .95rem;
    line-height: 1.35;
    margin-bottom: .35rem;
}

.aw-blog-product-link:hover .aw-blog-product-name {
    text-decoration: underline;
}

.aw-blog-product-price {
    display: block;
    font-weight: 700;
}

.aw-blog-product-regular {
    font-weight: 400;
    opacity: .6;
    margin-right: .35rem;
}

/* ---------- CTA vers la fiche produit ---------- */
.aw-blog-product-cta {
    display: block;
    width: 100%;
    margin-top: .5rem;
    text-align: center;
    white-space: normal;
}

/* En rendu « carte du module », le bouton est dans la carte : on l'aligne
   sur le padding interne plutôt que de le coller aux bords. */
.aw-blog-product-card .aw-blog-product-cta {
    width: calc(100% - 1.5rem);
    margin: 0 .75rem .75rem;
}

/* ---------- Titre du billet ---------- */
.aw-blog-title {
    margin-bottom: 1.5rem;
    line-height: 1.25;
}

/* Dimensions intrinsèques posées sur l'image : on préserve le ratio en fluide */
.aw-blog-image img {
    height: auto;
}

/* ---------- Sommaire automatique ---------- */
.aw-blog-toc {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.aw-blog-toc-title {
    font-weight: 700;
    margin: 0 0 .5rem;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
}

.aw-blog-toc ol {
    margin: 0;
    padding-left: 1.1rem;
}

.aw-blog-toc li {
    margin-bottom: .3rem;
    line-height: 1.4;
}

.aw-blog-toc-h3 {
    margin-left: 1rem;
    font-size: .93rem;
    list-style-type: circle;
}

/* Ancres : évite que le titre ciblé passe sous un en-tête fixe */
.aw-blog-text h2[id],
.aw-blog-text h3[id] {
    scroll-margin-top: 90px;
}

.aw-blog-updated {
    font-style: italic;
}

/* ---------- Image de couverture en colonne latérale ---------- */
.aw-blog-toc-col .aw-blog-image {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.aw-blog-toc-col .aw-blog-image img {
    width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    .aw-blog-toc-col .aw-blog-image {
        margin-top: 1.5rem;
        max-width: 480px;
    }
}

/* ---------- Débordement horizontal : tableaux et contenus larges ---------- */
/* Cause du débordement en mobile : un élément large (tableau, <pre>, iframe)
   impose sa largeur à la colonne flex, qui accepte de s'élargir tant que
   min-width vaut auto. Les deux moitiés du correctif sont nécessaires. */

.aw-blog-layout > [class*="col-"],
.aw-blog-main,
.aw-blog-text,
.aw-blog-page {
    min-width: 0;
}

.aw-blog-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5rem;
}

.aw-blog-text table {
    max-width: 100%;
    border-collapse: collapse;
}

.aw-blog-text th,
.aw-blog-text td {
    padding: .5rem .75rem;
    border: 1px solid #e0e0e0;
    vertical-align: top;
}

.aw-blog-text th {
    background: #fafafa;
    text-align: left;
}

/* Filet de sécurité pour les autres contenus larges collés en WYSIWYG */
.aw-blog-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.aw-blog-text img,
.aw-blog-text iframe,
.aw-blog-text video,
.aw-blog-text embed,
.aw-blog-text object {
    max-width: 100%;
}

.aw-blog-text pre {
    max-width: 100%;
    overflow-x: auto;
}