/**
 * Articles Styles - Desktop uniquement
 *
 * Styles pour le modèle de colonne "Derniers articles" et les article loop items.
 * Inclut le rail de défilement vertical et les cartes d'articles.
 *
 * Extrait de sections.css v0.0.101 lors du split Phase 5.
 *
 * @package     UneAutreVoix
 * @author      Horizon Signature
 * @copyright   2026 Horizon Signature
 * @license     Proprietary
 * @version     0.1.0
 *
 * @changelog
 * 0.1.0 — Passage en preprod
 * 0.0.16 - Suppression violations opacity (règle no-opacity)
 *         - .archive-cat-item:not(:last-child)::after : opacity: 0.4 supprimée (décoratif)
 *         - .archive-nav-label : opacity: 0.5 → color: var(--color-text-light)
 *         - .author-social-link:hover : opacity: 0.6 supprimée + transition opacity supprimée
 * 0.0.15 - Phase 1 refacto : valeurs hardcodées → variables CSS
 *           - text-underline-offset 0.25vh → var(--border-normal)
 *           - margin-left 0.5vh → var(--spacing-2xs)
 *           - text-decoration-thickness 0.15vh → var(--border-thin)
 *           - text-underline-offset 0.5vh → var(--border-thick)
 * 0.0.14 - .archive-articles-section : layout row (bandeau + rangée articles)
 *           - .archive-articles-bandeau : 61.6vh, column-model-bandeau-anime
 *           - .archive-articles-section .archive-articles-row : padding-left xl
 * 0.0.13 - .archive-articles-row élément unique : pas de zigzag + centrage vertical
 * 0.0.12 - .archive-count-anchor : liens "XX livres" / "XX points de vue" dans .archive-count-label
 *          Soulignés par défaut, soulignement supprimé au survol
 * 0.0.11 - .author-social-links : liens réseaux sociaux sur la page auteur (icône + nom)
 * 0.0.10 - .author-page-quote : font-size 2vh → var(--text-size-l) (respect système typographique)
 * 0.0.9 - .author-page-quote : citation page auteur, même mise en forme que .uav-avis-contenu
 * 0.0.8 - Gap .article-loop-link et .article-loop-top : --spacing-xs → --spacing-sm (1vh → 2vh)
 * 0.0.7 - Couleur icône plume et graisse texte auteur
 *        - Variable --article-color sur chaque classe .article-loop-color-*
 *        - .article-loop-author-icon : fill var(--article-color)
 *        - .article-loop-author-text : font-weight 500
 * 0.0.6 - Archive : style H4 sur .archive-count, "publications" au lieu d'"articles"
 * 0.0.5 - Archive articles : layout horizontal en zigzag
 *       - .archive-articles-row : flex row, gap var(--spacing-lg), padding xl
 *       - .article-loop-item en contexte archive : width 33.33vh, margin 0
 *       - Zigzag via nth-child odd/even (translateY ±var(--spacing-lg))
 *       - Hover : +1vh supplémentaire dans la direction du zigzag
 *       - .archive-nav-card : 15vh de large, flex column centré
 *       - Typographie nav : label (CTA), flèche (H2), texte (CTA)
 *       - .archive-articles-section : padding-top/bottom 0
 * 0.0.4 - Augmentation gap .article-loop-top (desktop)
 *       - gap: var(--spacing-2xs) → var(--spacing-xs) (0.5vh → 1vh)
 *       - Meilleur espacement entre image et titre
 * 0.0.3 - Refactoring pour carousel mobile
 *       - Ajout .derniers-articles-desktop (grid 2 colonnes, scroll vertical)
 *       - Ajout .derniers-articles-mobile (display: none sur desktop)
 *       - Tous les sélecteurs mis à jour (.derniers-articles-desktop au lieu de .column-model-derniers-articles-homepage)
 *       - Conservation du comportement desktop existant (grid + scroll vertical)
 * 0.0.2 - Ajout gap sur .article-loop-link (desktop)
 *       - gap: var(--spacing-xs) = 1vh
 *       - Espacement vertical entre image, titre, extrait et bottom section
 *       - Réduction padding horizontal catégorie : var(--spacing-sm) → var(--spacing-xs) (2vh → 1vh)
 * 0.0.1 - Extraction depuis sections.css (v0.0.101)
 *       - Column model derniers-articles-homepage
 *       - Article loop items (image, titre, extrait, auteur, catégorie)
 *       - Couleurs par catégorie (green, blue, pink, gold)
 *       - Rail de défilement vertical avec optimisations GPU
 */

/* ============================================================================
   Articles - Desktop uniquement (≥1201px)
   ========================================================================== */

@media (min-width: 1201px) {

    /* ===========================
       Modèle de colonne : Derniers articles - homepage
       =========================== */

    /* Section single.php : contenu plein bord (annule padding 8vh des sections) */
    html.uav-horizontal-enabled .derniers-articles-section {
        padding-top: 0;
        padding-bottom: 0;
    }

    .column-model-derniers-articles-homepage {
        display: block;
        height: 100%;
    }

    /* Desktop : Grid 2 colonnes avec scroll vertical */
    .derniers-articles-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
        padding-left: 10vh;
        height: 100%;
    }

    /* Mobile : Carousel masqué sur desktop */
    .derniers-articles-mobile {
        display: none;
    }

    .derniers-articles-desktop .derniers-articles-column {
        overflow: hidden;
        display: block;
        height: 100%;
        min-height: 100%;
        position: relative;
        padding: 0;
        margin: 0;

        /* Optimisations GPU */
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-mask-image: linear-gradient(to bottom, black, black);
        mask-image: linear-gradient(to bottom, black, black);
    }

    /* Le Rail de défilement */
    .derniers-articles-desktop .vertical-track {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        will-change: transform;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Wrapper des items dupliqués */
    .derniers-articles-desktop .track-item-wrapper {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /* Optimisation des images pour l'animation */
    .derniers-articles-desktop .track-item-wrapper img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -webkit-perspective: 1000;
        perspective: 1000;
    }

    .derniers-articles-desktop .derniers-articles-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* ===========================
       Article Loop Item
       =========================== */

    .article-loop-item {
        display: flex;
        flex-direction: column;
        margin: calc(var(--spacing-xs) * 1.5) 0;
        padding: 0;
        gap: 0;
        border: var(--border-thick) solid var(--color-text);
    }

    /* Lien couvrant toute la case */
    .article-loop-link {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--spacing-sm);
        height: 100%;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    /* Couleur selon la catégorie */
    .article-loop-color-green { --article-color: var(--color-green); }
    .article-loop-color-blue  { --article-color: var(--color-blue); }
    .article-loop-color-pink  { --article-color: var(--color-pink); }
    .article-loop-color-gold  { --article-color: var(--color-gold); }

    /* Bordure colorée selon la catégorie */
    .article-loop-item.article-loop-color-green {
        border-color: var(--color-green);
    }

    .article-loop-item.article-loop-color-blue {
        border-color: var(--color-blue);
    }

    .article-loop-item.article-loop-color-pink {
        border-color: var(--color-pink);
    }

    .article-loop-item.article-loop-color-gold {
        border-color: var(--color-gold);
    }

    /* Conteneur du haut */
    .article-loop-top {
        display: flex;
        flex-direction: column;
        padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs) var(--spacing-xs);
        gap: var(--spacing-sm);
    }

    /* Image à la une */
    .article-loop-image {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        display: flex;
    }

    /* Support des balises <picture> d'Imagify */
    .article-loop-image picture {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .article-loop-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transition: transform var(--transition-smooth) var(--ease-smooth);
        will-change: transform;
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    /* Effet de zoom sur l'image au survol */
    .article-loop-item:hover .article-loop-image img {
        transform: scale(1.1);
    }

    /* Titre de l'article - Style H4 */
    .article-loop-title {
        font-family: var(--font-h4-family);
        font-size: var(--font-h4-size);
        font-weight: var(--font-h4-weight);
        line-height: var(--font-h4-line-height);
        color: var(--color-text);
        margin: 0;
    }

    /* Extrait - Style Small Text */
    .article-loop-excerpt {
        color: var(--color-text);
        margin: 0;
    }

    .article-loop-excerpt p {
        font-family: var(--font-small-text-family);
        font-size: var(--font-small-text-size);
        font-weight: var(--font-small-text-weight);
        line-height: var(--font-small-text-line-height);
        margin: 0;
    }

    /* Conteneur du bas */
    .article-loop-bottom {
        display: flex;
        flex-direction: column;
        padding: 0;
        gap: 0;
    }

    /* Auteur - Style Small Text Italic */
    .article-loop-author {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: var(--spacing-xs);
        padding: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
        font-family: var(--font-small-text-italic-family);
        font-size: var(--font-small-text-size);
        font-weight: var(--font-small-text-italic-weight);
        font-style: var(--font-small-text-italic-style);
        line-height: var(--font-small-text-italic-line-height);
        color: var(--color-text);
    }

    .article-loop-author-icon {
        width: 1.5vh;
        height: 1.5vh;
        flex-shrink: 0;
        fill: var(--article-color);
    }

    .article-loop-author-text {
        font-weight: 500;
    }

    /* Catégorie avec fond coloré - Style Small Text Accent */
    .article-loop-category {
        padding: calc((var(--spacing-xs) + var(--spacing-2xs)) / 2) var(--spacing-xs) calc(var(--spacing-2xs) / 2) var(--spacing-xs);
        font-family: var(--font-small-text-accent-family);
        font-size: var(--font-small-text-accent-size);
        font-weight: var(--font-small-text-accent-weight);
        text-transform: var(--font-small-text-accent-text-transform);
        line-height: var(--font-small-text-accent-line-height);
        color: var(--color-text);
        background-color: var(--color-text);
        margin-bottom: -1px; /* intentionnel : compense l'arrondi px des valeurs vh */
    }

    .article-loop-category-child {
        font-style: italic;
        text-transform: none;
    }

    /* Fond coloré selon la catégorie */
    .article-loop-color-green .article-loop-category {
        background-color: var(--color-green);
    }

    .article-loop-color-blue .article-loop-category {
        background-color: var(--color-blue);
    }

    .article-loop-color-pink .article-loop-category {
        background-color: var(--color-pink);
    }

    .article-loop-color-gold .article-loop-category {
        background-color: var(--color-gold);
    }

    /* ===========================
       Archive - Section demi (en-tête)
       =========================== */

    .archive-header {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-2xs);
    }

    .archive-count {
        font-family: var(--font-h4-family);
        font-size: var(--font-h4-size);
        font-weight: var(--font-h4-weight);
        line-height: var(--line-height-medium);
        color: var(--color-text);
    }

    /* Navigation par catégories */
    .archive-cat-nav {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        margin: var(--spacing-md) 0;
    }

    .archive-cat-nav-title {
        font-family: var(--font-h4-family);
        font-size: var(--font-h4-size);
        font-weight: var(--font-h4-weight);
        line-height: var(--line-height-medium);
        color: var(--color-text);
    }

    .archive-cat-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .archive-cat-item {
        display: flex;
        align-items: center;
        font-family: var(--font-cta-family);
        font-size: var(--text-size-cta);
        font-weight: var(--font-cta-weight);
        color: var(--color-text);
    }

    .archive-cat-item a {
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        text-decoration: underline;
        text-decoration-thickness: var(--border-thin);
        text-underline-offset: var(--border-normal);
    }

    .archive-cat-item a:hover {
        text-decoration: none;
    }

    .archive-cat-count {
        font-weight: 400;
        margin-left: var(--spacing-2xs);
    }

    /* Séparateur entre items */
    .archive-cat-item:not(:last-child)::after {
        content: "";
        display: inline-block;
        width: var(--border-thin);
        height: 1em;
        background-color: var(--color-text);
        margin: 0 var(--spacing-xs);
    }

    /* ===========================
       Archive articles - Layout horizontal en zigzag
       =========================== */

    /* Annule le padding de section pour que le contenu aille bord à bord */
    html.uav-horizontal-enabled .archive-articles-section {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
    }

    /* Bandeau section articles (image dernier article) */
    .archive-articles-section .archive-articles-bandeau {
        width: 30vh;
        min-width: 30vh;
    }

    /* Décalage de la rangée après le bandeau */
    .archive-articles-section .archive-articles-row {
        padding-left: var(--spacing-xl);
    }

    /* Rangée principale : flex row nowrap */
    .archive-articles-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--spacing-xl);
        padding: var(--spacing-xl) 0;
    }

    /* Cartes articles : largeur fixe, margin reset */
    .archive-articles-row .article-loop-item {
        flex: 0 0 auto;
        width: 33.33vh;
        margin: 0;
        transition: transform var(--transition-normal) var(--ease-standard);
    }

    /* Zigzag uniquement sur les articles (nth-child of S, CSS Selectors Level 4)
       Le comptage ignore les nav cards → le 1er article est toujours en haut */
    .archive-articles-row > .article-loop-item:nth-child(odd of .article-loop-item) {
        transform: translateY(calc(-1 * var(--spacing-lg)));
    }
    .archive-articles-row > .article-loop-item:nth-child(even of .article-loop-item) {
        transform: translateY(var(--spacing-lg));
    }

    /* Hover */
    .archive-articles-row > .article-loop-item:nth-child(odd of .article-loop-item):hover {
        transform: translateY(calc(-1 * var(--spacing-lg) - 1vh));
    }
    .archive-articles-row > .article-loop-item:nth-child(even of .article-loop-item):hover {
        transform: translateY(calc(var(--spacing-lg) - 1vh));
    }

    /* Élément unique : pas de zigzag + centrage vertical */
    .archive-articles-row > .article-loop-item:nth-child(1 of .article-loop-item):nth-last-child(1 of .article-loop-item) {
        transform: none;
    }

    .archive-articles-row > .article-loop-item:nth-child(1 of .article-loop-item):nth-last-child(1 of .article-loop-item):hover {
        transform: translateY(-1vh);
    }

    .archive-articles-row:has(> .article-loop-item:nth-child(1 of .article-loop-item):nth-last-child(1 of .article-loop-item)) {
        align-items: center;
    }

    /* Cartes navigation pagination */
    .archive-nav-card {
        flex: 0 0 15vh;
        width: 15vh;
        transition: transform var(--transition-normal) var(--ease-standard);
    }

    .archive-nav-card a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2xs);
        text-decoration: none;
        color: var(--color-text);
    }

    .archive-nav-card:hover {
        transform: translateY(-1vh);
    }

    .archive-nav-label {
        font-family: var(--font-cta-family);
        font-size: var(--text-size-cta);
        font-weight: var(--font-cta-weight);
        text-transform: var(--font-cta-text-transform);
        color: var(--color-text-light);
    }

    .archive-nav-arrow {
        font-size: var(--text-size-h2);
        font-weight: 700;
        line-height: 1;
    }

    .archive-nav-text {
        font-family: var(--font-cta-family);
        font-size: var(--text-size-cta);
        font-weight: var(--font-cta-weight);
        text-transform: var(--font-cta-text-transform);
    }

}

/* ==========================================================================
   PAGE AUTEUR — Compteur (liens d'ancrage)
   ========================================================================== */

.archive-count-anchor {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: var(--border-thin);
    text-underline-offset: var(--border-thick);
}

.archive-count-anchor:hover {
    text-decoration: none;
}

/* ==========================================================================
   PAGE AUTEUR — Citation
   ========================================================================== */

/* Même mise en forme que .uav-avis-contenu (products.css) */
.author-page-quote {
    font-family: var(--font-heading);
    font-size: var(--text-size-l);
    font-style: italic;
    line-height: 1.8em;
    color: var(--color-text);
}

.author-page-quote p {
    font-family: var(--font-heading);
    font-size: var(--text-size-l);
    font-style: italic;
    line-height: 1.8em;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.author-page-quote p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   PAGE AUTEUR — Réseaux sociaux
   ========================================================================== */

.author-social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.author-social-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-cta-family);
    font-size: var(--font-cta-size);
    font-weight: var(--font-cta-weight);
    line-height: var(--line-height-medium);
    text-transform: var(--font-cta-text-transform);
    color: var(--color-text);
    text-decoration: none;
}

.author-social-link:hover {
    text-decoration: none;
}

.author-social-icon {
    width: var(--text-size-l);
    height: var(--text-size-l);
    flex-shrink: 0;
}