/* ============================================================
   GABARIT « ARTICLE (BLOCS) » — article-blocs.php
   Layout : Hero + Article avec produits + Sidebar ToC sticky
   Namespace : #article-main / .article-*
   ============================================================ */


/* ── Page wrapper ────────────────────────────────────────── */
#article-main {
    background: var(--background);
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}


/* ══════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════ */
#article-main #nav-breadcrumb .section-container {
    background: var(--white);
    padding: var(--space-m) var(--space-s);
}


/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
#article-hero .section-container {
    background: var(--white);
    padding: 0 var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.article-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.article-hero__text h1 {
    margin: 0;
    line-height: 1.2;
    text-wrap: balance;
}

/* Le badge teste du hero est habille dans global.css, avec les trois autres
   gabarits : quatre copies de la meme regle avaient fini par diverger. */

/* Image featured */
.article-hero__image {
    margin: 0;
    border-radius: var(--radius-img);
    overflow: hidden;
    box-shadow: var(--soft-shadow-white);
    height: 200px;
    flex-shrink: 0;
}

.article-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Meta bar */
.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px var(--space-s);
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--background-deep);
    border-bottom: 1px solid var(--background-deep);
}

.article-meta__item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--grey);
    font-size: 13px;
    font-weight: 500;
}

.article-meta__item i {
    color: var(--secondary-brown);
    font-size: 14px;
}

.article-meta__updated {
    color: var(--green-dark);
}


/* ══════════════════════════════════════════════════════════
   CORPS DE L'ARTICLE (article + sidebar)
   ══════════════════════════════════════════════════════════ */
#article-body .section-container {
    background: var(--white);
    padding: var(--space-m) var(--space-s) var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}


/* ── Contenu editorial ───────────────────────────────────── */
/* Tout l'article partage une seule largeur, celle du conteneur : texte,
   sommaire et table de synthese s'alignent sur les memes bords. */
.article-content {
    width: 100%;
    min-width: 0;
}

/* Hierarchie titres */
.article-content h2 {
    font-size: 22px;
    color: var(--title-color);
    margin: var(--space-l) 0 var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 3px solid var(--background);
    position: relative;
    text-wrap: initial;
    scroll-margin-top: 90px;
}

.article-content h2:first-child {
    margin-top: 0;
}

.article-content h2::before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--secondary-brown);
    border-radius: 2px;
}

.article-content h2 i {
    color: var(--secondary-brown);
    margin-right: 4px;
}

.article-content h4 {
    font-size: 15px;
    color: var(--title-color);
    margin: var(--space-s) 0 4px;
}

/* Paragraphes */
.article-content p {
    margin-top: var(--space-xs);
    line-height: 1.75;
    text-align: justify;
}

.article-content p:first-child {
    margin-top: 0;
}

/* Listes
   Trois origines possibles : le wrapper .text du rendu ACF (gabarits
   historiques, via ce meme fichier extrait), les listes de l'editeur de
   blocs, injectees par the_content() en enfants directs de .article-content
   sans wrapper, et la description d'une fiche produit dans
   .article-produit__texte, qui n'est pas un enfant direct de
   .article-content. Un selecteur groupe couvre les trois sans dupliquer les
   proprietes partagees. */
.article-content > .text ul,
.article-content > .text ol,
.article-content > ul,
.article-content > ol,
.article-produit__texte ul,
.article-produit__texte ol {
    padding-left: var(--space-s);
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: var(--space-xs) 0;
}

.article-content > .text ol,
.article-content > ol,
.article-produit__texte ol {
    list-style: decimal;
}

.article-content > .text li,
.article-content > ul li,
.article-content > ol li,
.article-produit__texte li {
    line-height: 1.65;
}

/* Emphases */
.article-content strong,
.article-content b {
    font-weight: 700;
    color: var(--green-dark);
}

/* Liens dans le corps */
.article-content p a,
.article-content li a {
    display: inline;
    color: var(--secondary-brown);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    width: auto;
}

.article-content p a:hover,
.article-content li a:hover {
    color: var(--brown-deep);
}

/* Images dans l'article */
.article-content img {
    border-radius: var(--radius-img);
    box-shadow: var(--soft-shadow-white-sm);
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--space-s) auto;
}

/* Légende d'image (core/image avec figcaption) */
.article-content figcaption {
    margin-top: var(--space-xs);
    text-align: center;
    font-size: 13px;
    color: var(--grey);
}

/* Citation (core/quote) — meme vocabulaire que .def-product-verdict :
   filet colore a gauche, fond doux. */
.article-content blockquote {
    margin: var(--space-m) 0;
    padding: var(--space-s) var(--space-m);
    border-left: 4px solid var(--secondary-brown);
    background: var(--tertiary-bg);
    border-radius: 0 var(--medium-radius) var(--medium-radius) 0;
}

.article-content blockquote p {
    margin: 0;
    text-align: left;
    font-style: italic;
    color: var(--text-color);
}

.article-content blockquote p + p {
    margin-top: var(--space-xs);
}

.article-content blockquote cite {
    display: block;
    margin-top: var(--space-xs);
    font-style: normal;
    font-size: 13px;
    color: var(--grey);
}

/* Séparateur (core/separator) */
.article-content hr {
    margin: var(--space-l) 0;
    border: none;
    border-top: 1px solid var(--background-deep);
}

/* Helpers float */
.article-content .floatl,
.article-content img.floatl {
    float: left;
    margin: 4px var(--space-s) var(--space-s) 0;
    max-width: 45%;
}

.article-content .floatr,
.article-content img.floatr {
    float: right;
    margin: 4px 0 var(--space-s) var(--space-s);
    max-width: 45%;
}

/* Clearfix */
.article-content .text::after {
    content: '';
    display: table;
    clear: both;
}

/* Transition text */
.article-transition {
    margin: var(--space-m) 0;
}


/* ══════════════════════════════════════════════════════════
   ARTICLES CONNEXES
   ══════════════════════════════════════════════════════════ */
#article-related .section-container {
    background: var(--white);
    padding: var(--space-l) var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.article-related__block {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.article-related__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}

.article-related__header h2 {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 20px;
    color: var(--title-color);
    margin: 0;
    border: none;
    padding: 0;
}

.article-related__header h2::before {
    display: none;
}

.article-related__header h2 i {
    color: var(--secondary-brown);
    font-size: 20px;
}

.article-related__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    white-space: nowrap;
    width: auto;
    flex-shrink: 0;
    line-height: 1;
    padding: 10px 20px;
    border-radius: var(--radius-button);
    background: linear-gradient(135deg, var(--brown), var(--secondary-brown));
    box-shadow: 0 6px 20px rgba(181, 91, 47, 0.25);
    transition: all var(--transition);
}

.article-related__more:hover {
    box-shadow: 0 10px 28px rgba(181, 91, 47, 0.35);
    transform: translateY(-2px);
    color: var(--white);
}


/* ══════════════════════════════════════════════════════════
   TABLETTE (768px+)
   ══════════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) {

    #article-main {
        padding-top: var(--space-xl);
        padding-bottom: var(--space-xl);
    }

    /* Breadcrumb */
    #article-main #nav-breadcrumb .section-container {
        padding: var(--space-m) var(--space-xl);
    }

    /* Hero */
    #article-hero .section-container {
        padding: 0 var(--space-xl);
        gap: var(--space-l);
    }

    .article-hero__image {
        height: 260px;
    }

    /* Corps */
    #article-body .section-container {
        padding: var(--space-l) var(--space-xl) var(--space-xl);
    }

    .article-content h2 {
        font-size: 24px;
    }

    /* Articles connexes */
    #article-related .section-container {
        padding: var(--space-xl) var(--space-xl);
    }

    .article-related__header h2 {
        font-size: 22px;
    }
}


/* ══════════════════════════════════════════════════════════
   DESKTOP (992px+)
   ══════════════════════════════════════════════════════════ */
@media screen and (min-width: 992px) {

    #article-main {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    /* Harmonisation largeur fond blanc */
    #article-main .section-container {
        max-width: calc(var(--max-width) - 96px);
    }

    /* Bordures rondes haut du container blanc */
    #article-main #nav-breadcrumb .section-container {
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        padding: var(--space-l) var(--space-xl);
    }

    /* Bordures rondes bas du container blanc */
    #article-related .section-container {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        padding: var(--space-xl) var(--space-xl) var(--space-2xl);
    }

    /* Hero */
    #article-hero .section-container {
        padding: 0 var(--space-xl);
        gap: var(--space-xl);
    }

    .article-hero__image {
        height: 400px;
        border-radius: var(--radius-card);
    }

    .article-hero__text h1 {
        font-size: clamp(28px, 2.5vw, 38px);
    }

    #article-body .section-container {
        padding: var(--space-l) var(--space-xl) var(--space-2xl);
    }

    .article-content h2 {
        font-size: 26px;
    }

    .article-related__header h2 {
        font-size: 24px;
    }
}


/* ── Fiches produit en prose ─────────────────────────────── */
.article-produits {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    margin-top: var(--space-l);
}

/* Le corps d'article est blanc : une carte blanche ne s'en détachait que par
   son filet. La fiche reprend le fond du tableau comparatif, si bien que les
   deux composants produits se lisent comme une même famille au fil de la
   page. */
.article-produit {
    background: var(--tertiary-bg);
    border: 1px solid var(--background);
    border-radius: var(--radius-card);
    padding: var(--space-m);
    box-shadow: var(--soft-shadow-white);
}

/* Le visuel se pose au-dessus du texte sur mobile, à côté dès que la largeur
   le permet. Sans lui, .article-produit__corps occupe seul la carte et rien
   ne change pour les produits dépourvus d'image. */
.article-produit__media {
    margin-bottom: var(--space-s);
}

.article-produit__photo {
    display: block;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--radius-img);
    background: var(--white);
}

/* `.article-content img` (0,1,1) régit toutes les images du corps d'article et
   dépasse la classe seule (0,1,0) : ni l'ombre retirée ni la taille posée
   plus haut ne s'appliquaient. Ce qui doit s'en écarter se déclare ici.

   La carte porte déjà son ombre — une seconde sous la photo empilait deux
   reliefs au même endroit. Et la photo tient 200px de côté au lieu de
   s'étirer sur toute la largeur de la carte. */
.article-content .article-produit__photo {
    box-shadow: none;
    max-width: 200px;
    /* Sans reprise, la marge verticale des images d'article décalait la photo
       vers le bas, désalignée du titre qui lui fait face. Le centrage
       horizontal, lui, est conservé. */
    margin: 0 auto;
}

.article-produit__texte {
    margin-top: var(--space-s);
}

/* Le bouton est centré sous l'image, sur mobile comme dans sa colonne. */
.article-produit__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--space-m);
}

/* Même traitement que .art-product-disclaimer sur les gabarits historiques :
   l'icône brune signale la mention, là où le gris la laissait se fondre dans
   le texte qu'elle accompagne.

   Sur mobile, la mention court sur trois lignes : l'icône se pose sur la ligne
   de base de la première, un centrage la ferait flotter au milieu du bloc,
   loin du mot qu'elle annonce. Elle repasse au centre dès que la mention tient
   sur une ligne. */
.article-produit__disclaimer {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-top: var(--space-s);
    font-size: 13px;
    line-height: 1.5;
    color: var(--grey);
}

.article-produit__disclaimer i {
    flex-shrink: 0;
    color: var(--secondary-brown);
    font-size: 14px;
}

/* `_base.css` donne `width: max-content` à tout lien : sans reprise, le bouton
   déborde de sa colonne. Le libellé tient sur une ligne — la colonne est
   dimensionnée pour l'accueillir entier. */
.article-produit__cta a {
    max-width: 100%;
    white-space: nowrap;
}

@media screen and (min-width: 768px) {

    /* Deux colonnes, deux lignes : l'image et son bouton à gauche, le texte et
       sa mention à droite. Le balisage, lui, garde bouton puis mention en
       dernier — c'est ce qui donne sur mobile la lecture image → texte → achat
       → mention, plutôt qu'un appel à l'achat avant la présentation.

       La colonne fait 200px pour que le libellé du bouton tienne sur une seule
       ligne : « Voir sur Amazon » et son icône occupent 197px. */
    .article-produit {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--space-m);
        align-items: start;
    }

    .article-produit__media {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }

    .article-produit__corps {
        grid-column: 2;
        grid-row: 1;
    }

    .article-produit__cta {
        grid-column: 1;
        grid-row: 2;
        /* L'écart entre l'image et le bouton vient du gap de la grille. */
        margin-top: 0;
    }

    .article-produit__disclaimer {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
        align-items: center;
    }

}

/* ══════════════════════════════════════════════════════════
   Mention d'affiliation de fin d'article.
   Même traitement que .def-disclaimer et .art-disclaimer sur les gabarits
   historiques : la mention ferme la lecture de la même manière partout.
   ══════════════════════════════════════════════════════════ */
.article-disclaimer {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
    margin-top: var(--space-xl);
    padding: var(--space-m);
    border: 2px dashed var(--brown);
    border-radius: var(--radius-card);
    background: var(--tertiary-bg);
}

.article-disclaimer > i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 24px;
    color: var(--secondary-brown);
}

.article-disclaimer strong {
    color: var(--title-color);
}

.article-disclaimer p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    text-align: left;
    color: var(--text-color);
}