/**
 * ================================================================
 * FICHIER : Article.css
 * EMPLACEMENT : 2027_B2B/pages/Article/Article.css
 * SHORT_DESC : Styles d'un article du Journal (lecture confortable, sommaire, CTA, FAQ, liés)
 * DESCRIPTION : Colonne de lecture de 65 à 75 caractères, Instrument Sans pour le texte,
 *               Syne pour les titres, jetons de theme.css uniquement, rayons 0 à 2 px.
 *
 * SOMMAIRE :
 *   - PROGRESSION
 *   - ENTETE_ARTICLE
 *   - VISUEL_ARTICLE
 *   - CORPS_ARTICLE
 *   - SOMMAIRE
 *   - CTA_ARTICLE
 *   - FAQ_ARTICLE
 *   - PARTAGE
 *   - ARTICLES_LIES
 *   - OUTILS_ARTICLE (n° 529)
 *   - RESPONSIVE
 *   - ARTICLE_NUANCIER (n° 541)
 *   - ARTICLE_VERSIONS_PUBLIQUES (n° 586)
 *   - ARTICLE_RICHE_ANIME (n° 564)
 *   - ARTICLE_MODIFIER_GOD (n° 558)
 *   - ARTICLE_GALERIE (n° 560, 562, 585)
 *
 * MODIFICATIONS :
 *   - 10/10/2026 07:10 : Section ARTICLE_GALERIE : diaporama horizontal d'exemples réels (bande défilante, boutons ‹ ›, images
 *                        de hauteur égale, légende créditée) (Dialogue n° 560, 562 et 585, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 07:06 : Rayons codés en dur passés aux jetons du thème (--rayon_carte, --rayon_bouton, --rayon_input, --rayon_badge, --rayon_p), ancienne valeur en commentaire ; ronds à 50 % conservés (Dialogue n° 599, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 06:57 : Section ARTICLE_MODIFIER_GOD : lien « Modifier » (crayon) de l'en-tête, visible du seul GOD, dans le style
 *                        des boutons Versions / Partage (Dialogue n° 558, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 06:36 : Sections ARTICLE_VERSIONS_PUBLIQUES (date et heure dans le sélecteur de versions, Dialogue n° 586) et
 *                        ARTICLE_RICHE_ANIME (lettrine, filet des titres, citations, encadrés, apparition au défilement, cascades,
 *                        chiffres clés, curseur du sommaire, Dialogue n° 564), Claude — A VALIDER PAR JaxX
 *   - 10/10/2026 04:46 : Diaporama : cadre centré en colonne pour le zoom et le déplacement de l'image (module
 *                        _theme/lightbox_zoom.js, Dialogue n° 559, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 04:23 : Section ARTICLE_NUANCIER : grille de nuanciers lisible sur téléphone (4 colonnes, 2 sous 640 px)
 *                        (Dialogue n° 541, Claude MONSTERJaxX #3) — A VALIDER PAR JaxX
 *   - 10/10/2026 03:56 : Section OUTILS_ARTICLE : versions, bandeau d'archive, menu de partage à icônes de marque
 *                        (Dialogue n° 529, Claude MONSTERJaxX #3) — A VALIDER PAR JaxX
 *   - 09/10/2026 22:42 : Vidéo intégrée .article_video, 16/9 (Dialogue n° 393) — A VALIDER PAR JaxX
 *   - 09/10/2026 03:30 : Bandeau d'aperçu GOD / admin .article_bandeau_apercu (Dialogue n° 172) — A VALIDER PAR JaxX
 *   - 06/10/2026 13:40 : Création — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* PROGRESSION ========================================================= */
/* Sur un article, la barre de lecture (mesurée sur le corps du texte) remplace la barre globale du socle,
   au même emplacement et avec le même dessin, pour n'afficher qu'un seul indicateur. */
.page_Article .scroll_progress_bar
{
    display: none;
}

.article_progression
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1002;
    background: transparent;
    pointer-events: none;
}

.article_progression_valeur
{
    --article_progression: 0;
    width: 100%;
    height: 100%;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(var(--article_progression));
    transition: transform 80ms linear;
}
/* PROGRESSION ========================================================= */

/* APERCU_GOD ========================================================== */
/* 09/10/2026 03:30 (Claude, Dialogue n° 172 de JaxX) : bandeau d'aperçu GOD / admin d'un article brouillon ou programmé — A VALIDER PAR JaxX */
.article_bandeau_apercu
{
    position: relative;
    z-index: 5;
    padding: var(--espace_2, 12px) 0;
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--fond, #ffffff));
    color: var(--encre, inherit);
    font-size: var(--texte_s, 0.95rem);
    text-align: center;
}

.article_bandeau_apercu strong
{
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* APERCU_GOD ========================================================== */

/* ENTETE_ARTICLE ====================================================== */
.article_entete
{
    padding: var(--espace_4) 0 var(--espace_4);
}

.article_entete .page_width_wrapper
{
    max-width: calc(var(--largeur_page) * 0.72);
}

.article_fil
{
    margin-bottom: var(--espace_4);
}

.article_fil_liste
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    letter-spacing: 0.03em;
    color: var(--encre_attenuee);
}

.article_fil_liste li + li::before
{
    content: "/";
    margin-right: 10px;
    opacity: 0.6;
}

.article_fil_liste a
{
    color: var(--encre_second);
}

.article_fil_liste a:hover
{
    color: var(--accent);
}

.article_meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 var(--espace_3);
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre_attenuee);
}

.article_categorie
{
    color: var(--accent);
    text-decoration: none;
}

.article_titre
{
    margin: 0 0 var(--espace_3);
    font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.article_chapo
{
    margin: 0 0 var(--espace_3);
    font-size: var(--texte_l);
    line-height: 1.5;
    color: var(--encre_second);
}

.article_auteur
{
    margin: 0;
    font-size: var(--texte_s);
    color: var(--encre_attenuee);
}

.article_auteur_nom
{
    font-weight: 600;
    color: var(--encre);
}

.article_auteur_sep
{
    margin: 0 6px;
}
/* ENTETE_ARTICLE ====================================================== */

/* VISUEL_ARTICLE ====================================================== */
.article_visuel
{
    margin: 0 0 var(--espace_5);
}

.article_visuel img
{
    width: 100%;
    height: auto;
    aspect-ratio: 1376 / 768;
    object-fit: cover;
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    background: var(--surface);
}

.article_visuel_legende
{
    margin-top: var(--espace_2);
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}
/* VISUEL_ARTICLE ====================================================== */

/* CORPS_ARTICLE ======================================================= */
.article_grille
{
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--espace_5);
    align-items: start;
}

.article_colonne
{
    min-width: 0;
    max-width: 70ch;
}

.article_corps
{
    font-family: var(--police_texte);
    font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    line-height: 1.65;
}

.article_corps > p
{
    margin: 0 0 1.4em;
}

.article_corps h2
{
    margin: var(--espace_5) 0 var(--espace_3);
    font-size: var(--texte_xl);
    line-height: 1.15;
    scroll-margin-top: calc(var(--hauteur_header) + 24px);
}

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

.article_corps h3
{
    margin: var(--espace_4) 0 var(--espace_2);
    font-size: var(--texte_l);
    line-height: 1.25;
}

.article_corps ul,
.article_corps ol
{
    margin: 0 0 1.4em;
    padding-left: 1.4em;
}

.article_corps ul
{
    list-style: disc;
}

.article_corps ol
{
    list-style: decimal;
}

.article_corps li
{
    margin-bottom: 0.5em;
    padding-left: 0.2em;
}

.article_corps li::marker
{
    color: var(--accent);
}

.article_corps strong
{
    font-weight: 600;
    color: var(--encre);
}

.article_corps em
{
    font-style: italic;
}

.article_corps a
{
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Encadré « À retenir » */
.article_retenir
{
    margin: var(--espace_5) 0;
    padding: var(--espace_3) var(--espace_4);
    background: var(--surface);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--rayon_carte, 2px) var(--rayon_carte, 2px) 0; /* ancien (n° 599) : 0 2px 2px 0 */
}

.article_retenir h2
{
    margin: 0 0 var(--espace_2);
    font-size: var(--texte_l);
}

.article_retenir ul
{
    margin: 0;
}

.article_retenir li:last-child
{
    margin-bottom: 0;
}

.article_mention
{
    margin: var(--espace_4) 0 0;
    padding-top: var(--espace_3);
    border-top: 1px solid var(--ligne);
    font-size: var(--texte_s);
    line-height: 1.5;
    color: var(--encre_attenuee);
}
/* CORPS_ARTICLE ======================================================= */

/* SOMMAIRE ============================================================ */
.article_sommaire
{
    position: sticky;
    top: calc(var(--hauteur_header) + 24px);
    min-width: 0;
}

.article_sommaire_titre
{
    margin: 0 0 var(--espace_2);
}

.article_sommaire_liste
{
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--ligne);
}

.article_sommaire_lien
{
    display: block;
    padding: 8px 0 8px 14px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    font-size: var(--texte_s);
    line-height: 1.35;
    color: var(--encre_second);
    text-decoration: none;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}

.article_sommaire_lien:hover,
.article_sommaire_lien:focus-visible
{
    color: var(--encre);
}

.article_sommaire_lien.article_sommaire_actif
{
    color: var(--accent);
    border-left-color: var(--accent);
}
/* SOMMAIRE ============================================================ */

/* CTA_ARTICLE ========================================================= */
.article_cta
{
    margin: var(--espace_5) 0;
    padding: var(--espace_4);
    background: var(--surface_carte);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
}

.article_cta_texte
{
    margin: var(--espace_2) 0 var(--espace_3);
    font-size: var(--texte_m);
    line-height: 1.5;
    color: var(--encre_second);
}

.article_cta_actions
{
    margin: 0;
}
/* CTA_ARTICLE ========================================================= */

/* FAQ_ARTICLE ========================================================= */
.article_faq
{
    margin: var(--espace_5) 0;
}

.article_faq_titre
{
    margin: 0 0 var(--espace_3);
    font-size: var(--texte_xl);
    line-height: 1.15;
}

.article_faq_item
{
    border-top: 1px solid var(--ligne);
}

.article_faq_item:last-child
{
    border-bottom: 1px solid var(--ligne);
}

.article_faq_question
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace_3);
    min-height: 56px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--police_titres);
    font-size: var(--texte_m);
    font-weight: 600;
    line-height: 1.3;
    color: var(--encre);
}

.article_faq_question::-webkit-details-marker
{
    display: none;
}

.article_faq_question::after
{
    content: "+";
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    font-family: var(--police_mono);
    font-weight: 400;
    color: var(--encre_second);
    transition: transform var(--duree) var(--easing), color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}

.article_faq_item[open] .article_faq_question::after
{
    content: "−";
    color: var(--accent);
    border-color: var(--accent);
}

.article_faq_question:hover::after
{
    border-color: var(--accent);
}

.article_faq_question:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.article_faq_reponse
{
    padding: 0 0 var(--espace_3);
    font-size: var(--texte_m);
    line-height: 1.6;
    color: var(--encre_second);
    max-width: 65ch;
}

.article_faq_reponse p
{
    margin: 0;
}
/* FAQ_ARTICLE ========================================================= */

/* PARTAGE ============================================================= */
.article_partage
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace_2) var(--espace_3);
    margin: var(--espace_4) 0 var(--espace_5);
    padding-top: var(--espace_3);
    border-top: 1px solid var(--ligne);
}

.article_partage_libelle
{
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre_attenuee);
}

.article_partage_liste
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace_1);
}

.article_partage_lien
{
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_bouton, 2px); /* ancien (n° 599) : 2px */
    font-size: var(--texte_s);
    font-weight: 500;
    color: var(--encre_second);
    text-decoration: none;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}

.article_partage_lien:hover,
.article_partage_lien:focus-visible
{
    color: var(--encre);
    border-color: var(--ligne_forte);
}
/* PARTAGE ============================================================= */

/* OUTILS_ARTICLE ====================================================== */
/* 10/10/2026 03:56 (Claude, Dialogue n° 529 de JaxX) : versions de l'article, bandeau d'archive et menu de partage minimaliste
   à icônes de marque (Simple Icons, CC0) dans leur couleur officielle ; icônes de fonction Lucide (ISC) — A VALIDER PAR JaxX */
.article_outils
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace_1) var(--espace_2);
    margin-top: var(--espace_3);
}

.article_partage_svg
{
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
}

/* Bandeau d'archive (?version=N) */
.article_bandeau_version
{
    position: relative;
    z-index: 5;
    padding: var(--espace_2, 12px) 0;
    border-top: 1px solid var(--ligne_forte);
    border-bottom: 1px solid var(--ligne_forte);
    background: color-mix(in srgb, var(--accent) 8%, var(--fond, #ffffff));
    color: var(--encre, inherit);
    font-size: var(--texte_s, 0.95rem);
    text-align: center;
}

.article_bandeau_version strong
{
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.article_bandeau_version a
{
    margin-left: var(--espace_1);
    color: var(--encre);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Sélecteur de versions */
.article_versions
{
    position: relative;
}

.article_versions_resume,
.article_partage_bouton
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_bouton, 2px); /* ancien (n° 599) : 2px */
    background: transparent;
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre_second);
    cursor: pointer;
    list-style: none;
    transition: color var(--duree) var(--easing), border-color var(--duree) var(--easing);
}

.article_versions_resume::-webkit-details-marker
{
    display: none;
}

.article_versions_resume:hover,
.article_versions_resume:focus-visible,
.article_versions[open] .article_versions_resume,
.article_partage_bouton:hover,
.article_partage_bouton:focus-visible,
.article_partage_bouton[aria-expanded="true"]
{
    color: var(--encre);
    border-color: var(--ligne_forte);
}

.article_versions_liste
{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: grid;
    gap: 2px;
    min-width: 260px;
    max-width: calc(100vw - 32px);
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    background: var(--surface_carte, var(--fond, #ffffff));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    list-style: none;
}

.article_versions_lien
{
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    color: var(--encre_second);
    text-decoration: none;
}

.article_versions_lien:hover,
.article_versions_lien:focus-visible
{
    background: var(--accent_halo, rgba(0, 0, 0, 0.05));
    color: var(--encre);
}

.article_versions_lien_active
{
    color: var(--encre);
    box-shadow: inset 2px 0 0 var(--accent);
}

.article_versions_numero
{
    font-size: var(--texte_s);
    font-weight: 600;
}

.article_versions_date
{
    font-size: var(--texte_xs);
    color: var(--encre_attenuee);
}

/* Menu de partage */
.article_partage_menu
{
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace_1);
}

.article_partage_bouton
{
    display: none;
}

.article_partage_panneau
{
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article_partage_menu_entete[data-article-partage-actif] .article_partage_bouton
{
    display: inline-flex;
}

.article_partage_menu_entete[data-article-partage-actif] .article_partage_panneau
{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: none;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 6px;
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    background: var(--surface_carte, var(--fond, #ffffff));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.article_partage_menu_entete[data-article-partage-ouvert] .article_partage_panneau
{
    display: flex;
}

.article_partage_reseau
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_bouton, 2px); /* ancien (n° 599) : 2px */
    background: transparent;
    color: var(--encre_second);
    cursor: pointer;
    transition: background-color var(--duree) var(--easing), border-color var(--duree) var(--easing), transform var(--duree) var(--easing);
}

.article_partage_reseau:hover,
.article_partage_reseau:focus-visible
{
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
    transform: translateY(-1px);
}

.article_partage_reseau_linkedin
{
    color: #0A66C2;
}

.article_partage_reseau_whatsapp
{
    color: #25D366;
}

.article_partage_reseau_facebook
{
    color: #0866FF;
}

.article_partage_reseau_x
{
    color: var(--encre);
}

.article_partage_reseau_bluesky
{
    color: #1185FE;
}

.article_partage_reseau_telegram
{
    color: #26A5E4;
}

.article_partage_reseau_copier .article_partage_svg + .article_partage_svg,
.article_partage_reseau_copier[data-copie] .article_partage_svg:first-child
{
    display: none;
}

.article_partage_reseau_copier[data-copie]
{
    color: var(--succes, #1f8a4c);
}

.article_partage_reseau_copier[data-copie] .article_partage_svg + .article_partage_svg
{
    display: block;
}

.article_partage_retour
{
    font-size: var(--texte_xs);
    color: var(--succes, #1f8a4c);
}

.article_partage_retour:empty
{
    display: none;
}

.article_partage_retour_journal
{
    margin-left: auto;
}

.article_partage_zone_copie
{
    position: fixed;
    top: 0;
    left: -9999px;
    opacity: 0;
}

@media (max-width: 640px)
{
    .article_partage_retour_journal
    {
        margin-left: 0;
    }

    .article_versions_liste,
    .article_partage_menu_entete[data-article-partage-actif] .article_partage_panneau
    {
        position: fixed;
        top: auto;
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .article_partage_reseau
    {
        transition: none;
    }

    .article_partage_reseau:hover,
    .article_partage_reseau:focus-visible
    {
        transform: none;
    }
}
/* OUTILS_ARTICLE ====================================================== */

/* ARTICLES_LIES ======================================================= */
.article_lies
{
    padding: var(--espace_5) 0 var(--espace_6);
    background: var(--fond_second);
    border-top: 1px solid var(--ligne);
}

.article_lies_titre
{
    margin: var(--espace_2) 0 var(--espace_4);
    font-size: var(--texte_xl);
}

.article_lies_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--gouttiere_grille);
}

.article_lie
{
    min-width: 0;
    background: var(--surface_carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}

.article_lie:hover,
.article_lie:focus-within
{
    border-color: var(--ligne_forte);
    box-shadow: var(--ombre);
}

.article_lie_lien
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_2);
    height: 100%;
    padding-bottom: var(--espace_3);
    color: inherit;
    text-decoration: none;
}

.article_lie_lien:hover
{
    color: inherit;
}

.article_lie_lien:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.article_lie_visuel
{
    margin: 0;
    aspect-ratio: 1376 / 768;
    overflow: hidden;
    background: var(--surface);
}

.article_lie_visuel img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article_lie_meta
{
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0 var(--espace_3);
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--encre_attenuee);
}

.article_lie_categorie
{
    color: var(--accent);
}

.article_lie_titre
{
    margin: 0;
    padding: 0 var(--espace_3);
    font-size: var(--texte_m);
    line-height: 1.25;
    text-wrap: balance;
}
/* ARTICLES_LIES ======================================================= */

/* RESPONSIVE ========================================================== */
@media (max-width: 1024px)
{
    .article_grille
    {
        grid-template-columns: 1fr;
        gap: var(--espace_4);
    }

    .article_sommaire
    {
        position: static;
        max-width: 70ch;
        padding: var(--espace_3);
        background: var(--surface);
        border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    }

    .article_sommaire_liste
    {
        border-left: 0;
    }

    .article_sommaire_lien
    {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 640px)
{
    .article_entete
    {
        padding-top: var(--espace_3);
    }

    .article_cta_actions .bouton_principal,
    .article_cta_actions .bouton_secondaire
    {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .article_partage_liste
    {
        width: 100%;
    }

    .article_partage_lien
    {
        flex: 1 1 auto;
        justify-content: center;
    }
}
/* RESPONSIVE ========================================================== */


/* ARTICLE_RICHE ======================================================= */
/* 09/10/2026 01:55 (Claude, Dialogue n° 146 de JaxX) : schémas SVG, tableaux, code et encart d'avertissement des
   articles didactiques (jetons du thème, clair et sombre, rayons de 2 px, défilement horizontal des tableaux sur téléphone) */
.article_corps .article_schema
{
    margin: 2rem 0;
    padding: 1.25rem;
    border: 1px solid var(--ligne_forte, rgba(127, 127, 127, 0.35));
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    color: var(--encre, currentColor);
}

.article_corps .article_schema figcaption
{
    margin-top: 0.75rem;
    font-size: 0.9rem;
    text-align: center;
    opacity: 0.8;
}

.article_corps table
{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.article_corps th,
.article_corps td
{
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ligne_forte, rgba(127, 127, 127, 0.35));
    text-align: left;
    vertical-align: top;
}

.article_corps th
{
    background: color-mix(in srgb, var(--accent, #c9a227) 14%, transparent);
    font-weight: 700;
}

.article_corps code
{
    padding: 0.1em 0.35em;
    border-radius: min(var(--rayon_p, 2px), 6px); /* ancien (n° 599) : 2px */
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-family: var(--police_mono, monospace);
    font-size: 0.88em;
}

.article_corps .article_avertissement
{
    margin: 0 0 2rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--erreur, #d64545);
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    background: color-mix(in srgb, var(--erreur, #d64545) 10%, transparent);
}

/* 09/10/2026 22:42 (Claude, Dialogue n° 393 de JaxX : article du live) : vidéo intégrée au corps d'un article, au format 16/9 — A VALIDER PAR JaxX */
.article_corps .article_video
{
    position: relative;
    margin: 0 0 2rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    overflow: hidden;
    background: #000;
}

.article_corps .article_video iframe
{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ARTICLE_RICHE ======================================================= */

/* ARTICLE_DIAPORAMA =================================================== */
/* 09/10/2026 02:28 (Claude, Dialogue n° 157 de JaxX) : images cliquables et diaporama plein écran (précédent / suivant,
   compteur, légende), cibles de 48 px, jetons du thème, rayons de 2 px, sans animation si le visiteur la refuse */
.article_image_diaporama
{
    cursor: zoom-in;
}

.article_image_diaporama:focus-visible
{
    outline: 3px solid var(--accent, #c9a227);
    outline-offset: 3px;
}

.article_corps figure img
{
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--ligne_forte, rgba(127, 127, 127, 0.35));
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
}

.article_corps figure
{
    margin: 2rem 0;
}

.article_corps figure figcaption
{
    margin-top: 0.6rem;
    font-size: 0.9rem;
    text-align: center;
    opacity: 0.8;
}

html.article_diaporama_ouvert
{
    overflow: hidden;
}

.article_diaporama
{
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 64px;
    align-items: center;
    padding: 56px 8px 48px;
    background: rgba(8, 8, 10, 0.94);
}

.article_diaporama[hidden]
{
    display: none;
}

.article_diaporama_cadre
{
    grid-column: 2;
    margin: 0;
    text-align: center;
    /* 10/10/2026 04:46 (n° 559) : image centrée en colonne, le cadre du zoom (_theme/lightbox_zoom.js) épouse la largeur de l'image */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.article_diaporama_image
{
    max-width: 100%;
    max-height: calc(100dvh - 160px);
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    object-fit: contain;
}

.article_diaporama_legende
{
    margin-top: 0.75rem;
    color: #f2f2f2;
    font-size: 0.95rem;
}

.article_diaporama_nav,
.article_diaporama_fermer
{
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--rayon_bouton, 2px); /* ancien (n° 599) : 2px */
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.article_diaporama_nav:hover,
.article_diaporama_nav:focus-visible,
.article_diaporama_fermer:hover,
.article_diaporama_fermer:focus-visible
{
    border-color: var(--accent, #c9a227);
    outline: none;
}

.article_diaporama_precedent
{
    grid-column: 1;
    justify-self: center;
}

.article_diaporama_suivant
{
    grid-column: 3;
    justify-self: center;
}

.article_diaporama_fermer
{
    position: absolute;
    top: 8px;
    right: 8px;
}

.article_diaporama_compteur
{
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: 0;
    color: #f2f2f2;
    font-size: 0.9rem;
    text-align: center;
}

/* 10/10/2026 04:46 (n° 559) : compteur lisible au-dessus d'une image zoomée claire */
.lightbox_zoom_plein_ecran .article_diaporama_compteur
{
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
}

@media (max-width: 600px)
{
    .article_diaporama
    {
        grid-template-columns: 0 minmax(0, 1fr) 0;
        padding-inline: 4px;
    }

    .article_diaporama_nav
    {
        position: absolute;
        bottom: 6px;
    }

    .article_diaporama_precedent
    {
        left: 12px;
    }

    .article_diaporama_suivant
    {
        right: 12px;
    }
}
/* ARTICLE_DIAPORAMA =================================================== */
/* ARTICLE_NUANCIER ==================================================== */
/* 10/10/2026 04:23 (Claude MONSTERJaxX #3, Dialogue n° 541 de JaxX) : nuanciers d'un article didactique ; pastilles en petits
   SVG (couleur portée par l'attribut fill, aucun style en ligne), noms et codes en HTML pour rester lisibles sur téléphone
   — A VALIDER PAR JaxX */
.article_corps .article_nuancier_titre
{
    margin: 0 0 0.75rem;
    font-family: var(--police_titres, inherit);
    font-size: 1rem;
    font-weight: 700;
}

.article_corps .article_nuancier
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.article_corps .article_nuancier li
{
    margin: 0;
    padding: 0;
}

.article_corps .article_nuancier li::before
{
    content: none;
}

.article_corps .article_nuancier svg
{
    display: block;
    width: 100%;
    height: 64px;
    margin-bottom: 0.5rem;
    border: 1px solid var(--ligne_forte, rgba(127, 127, 127, 0.35));
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
}

.article_corps .article_nuancier strong
{
    display: block;
    font-size: 0.9rem;
    line-height: 1.3;
}

.article_corps .article_nuancier code
{
    display: block;
    margin-top: 0.15rem;
    padding: 0;
    background: none;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

@media (max-width: 640px)
{
    .article_corps .article_nuancier
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ARTICLE_NUANCIER ==================================================== */

/* ARTICLE_VERSIONS_PUBLIQUES ========================================== */
/* 10/10/2026 06:36 (Claude, Dialogue n° 586 de JaxX) : versions visibles de tous ; date et heure de la version affichée dans le
   bouton, note quand l'article n'a encore qu'une version — A VALIDER PAR JaxX */
.article_versions_resume
{
    flex-wrap: wrap;
    row-gap: 2px;
}

.article_versions_resume_date
{
    color: var(--encre_attenuee);
    letter-spacing: 0.02em;
    text-transform: none;
}

.article_versions_resume_date::before
{
    content: "·";
    margin-right: 8px;
}

/* Panneau opaque : --surface_carte est translucide en mode sombre, le texte de la page transparaissait (surtout en
   feuille fixe sur mobile) ; ancien (n° 586) : background: var(--surface_carte, var(--fond, #ffffff)) */
.article_versions_liste
{
    background: var(--surface, var(--fond, #ffffff));
}

.article_versions_note
{
    padding: 8px 10px 4px;
    border-top: 1px solid var(--ligne);
    font-size: var(--texte_xs);
    line-height: 1.45;
    color: var(--encre_attenuee);
}
/* ARTICLE_VERSIONS_PUBLIQUES ========================================== */

/* ARTICLE_RICHE_ANIME ================================================= */
/* 10/10/2026 06:36 (Claude, Dialogue n° 564 de JaxX : « du HTML riche avec des effets et animations subtils mais remarquables pour
   l'ensemble des articles de blog ») : amélioration progressive appliquée à tous les articles sans toucher leur contenu.
   - Toujours actif (sans JavaScript) : lettrine, filet d'accent sous les titres, citations, encadrés, survol des tableaux.
   - Avec Article.js (classe html.article_riche_actif, jamais posée si le visiteur refuse les animations) : apparition des
     blocs au défilement, cascade des listes, lignes de tableau et nuanciers, filet des titres qui se dessine, chiffres qui
     comptent, curseur du sommaire qui glisse. Sans cette classe, tout le contenu reste visible.
   Jetons du thème uniquement (clair, sombre, thèmes graphiques) — A VALIDER PAR JaxX */

/* Lettrine du premier paragraphe */
.article_corps > p:first-child::first-letter
{
    float: left;
    margin: 0.08em 0.12em 0 0;
    padding: 0;
    font-family: var(--police_titres);
    font-size: 3.5em;
    font-weight: 700;
    line-height: 0.82;
    color: var(--accent);
}

/* Filet d'accent sous les titres de section */
.article_corps > h2::after
{
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 0.5em;
    background: var(--accent);
    transform-origin: left center;
}

/* Liens du corps : soulignement qui s'épaissit au survol */
.article_corps a
{
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness var(--duree) var(--easing), text-underline-offset var(--duree) var(--easing);
}

.article_corps a:hover,
.article_corps a:focus-visible
{
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
}

/* Citations */
.article_corps blockquote
{
    position: relative;
    margin: var(--espace_5) 0;
    padding: var(--espace_3) var(--espace_3) var(--espace_3) var(--espace_5);
    border-left: 2px solid var(--accent);
    font-family: var(--police_titres);
    font-size: 1.12em;
    line-height: 1.45;
    color: var(--encre);
}

.article_corps blockquote::before
{
    content: "«";
    position: absolute;
    top: 0.05em;
    left: 0.25em;
    font-size: 3em;
    line-height: 1;
    color: var(--accent);
    opacity: 0.45;
}

.article_corps blockquote p
{
    margin: 0 0 0.6em;
}

.article_corps blockquote p:last-child
{
    margin-bottom: 0;
}

.article_corps blockquote cite,
.article_corps blockquote footer
{
    display: block;
    margin-top: var(--espace_2);
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    font-style: normal;
    letter-spacing: 0.04em;
    color: var(--encre_attenuee);
}

/* Encadré « À retenir » : léger halo d'accent */
.article_corps .article_retenir
{
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 55%);
}

/* Tableaux : ligne survolée mise en valeur */
.article_corps tbody tr td
{
    transition: background-color var(--duree) var(--easing);
}

.article_corps tbody tr:hover td
{
    background-color: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Figures : très léger zoom de l'image au survol */
@media (hover: hover) and (pointer: fine)
{
    .article_corps figure img
    {
        transition: transform 0.6s var(--easing), box-shadow 0.6s var(--easing);
    }

    .article_corps figure:hover img
    {
        transform: scale(1.012);
        box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.45);
    }

    .article_corps .article_nuancier li svg
    {
        transition: transform var(--duree) var(--easing);
    }

    .article_corps .article_nuancier li:hover svg
    {
        transform: translateY(-2px);
    }
}

/* Chiffres clés animés (posés par Article.js) */
.article_compteur
{
    font-variant-numeric: tabular-nums;
}

strong.article_compteur,
b.article_compteur
{
    display: inline-block;
}

.article_barre
{
    display: block;
    height: 3px;
    margin-top: 6px;
    background: var(--ligne);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    overflow: hidden;
}

.article_barre_valeur
{
    display: block;
    height: 100%;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(var(--article_barre, 0));
    transition: transform 1.1s var(--easing);
}

/* Curseur du sommaire (posé par Article.js, ordinateur seulement) */
.article_sommaire_liste
{
    position: relative;
}

.article_sommaire_curseur
{
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 0;
    margin: 0;
    padding: 0;
    background: var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s var(--easing), height 0.45s var(--easing), opacity var(--duree) var(--easing);
}

.article_sommaire_liste[data-curseur] .article_sommaire_lien.article_sommaire_actif
{
    border-left-color: transparent;
}

.article_sommaire_liste[data-curseur] .article_sommaire_curseur[data-visible]
{
    opacity: 1;
}

/* Apparition au défilement (seulement sous html.article_riche_actif) */
html.article_riche_actif .article_bloc
{
    transition: opacity 0.7s var(--easing), transform 0.7s var(--easing);
}

html.article_riche_actif .article_bloc:not(.article_vu)
{
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}

html.article_riche_actif .article_corps > h2::after
{
    transition: transform 0.9s var(--easing) 0.2s;
}

html.article_riche_actif .article_corps > h2:not(.article_vu)::after
{
    transform: scaleX(0);
}

/* Cascades : éléments de liste, lignes de tableau, pastilles des nuanciers */
html.article_riche_actif .article_bloc_cascade > li,
html.article_riche_actif .article_bloc tbody > tr,
html.article_riche_actif .article_bloc .article_nuancier > li
{
    transition: opacity 0.55s var(--easing) calc(var(--article_rang, 0) * 70ms), transform 0.55s var(--easing) calc(var(--article_rang, 0) * 70ms);
}

html.article_riche_actif .article_bloc_cascade:not(.article_vu) > li
{
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
}

html.article_riche_actif .article_bloc:not(.article_vu) tbody > tr
{
    opacity: 0;
}

html.article_riche_actif .article_bloc:not(.article_vu) .article_nuancier > li
{
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.96);
}

@media (max-width: 1024px)
{
    .article_sommaire_curseur
    {
        display: none;
    }
}

@media print
{
    html.article_riche_actif .article_bloc,
    html.article_riche_actif .article_bloc_cascade > li,
    html.article_riche_actif .article_bloc tbody > tr,
    html.article_riche_actif .article_bloc .article_nuancier > li
    {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .article_corps a,
    .article_corps tbody tr td,
    .article_corps figure img,
    .article_corps .article_nuancier li svg,
    .article_barre_valeur,
    .article_sommaire_curseur
    {
        transition: none;
    }

    .article_corps figure:hover img,
    .article_corps .article_nuancier li:hover svg
    {
        transform: none;
    }
}
/* ARTICLE_RICHE_ANIME ================================================= */

/* ARTICLE_MODIFIER_GOD ================================================ */
/* 10/10/2026 06:57 (Claude, Dialogue n° 558 de JaxX) : lien « Modifier » vers la fiche d'édition (_adm_Article/{slug}), affiché
   pour GOD seulement dans .article_outils ; même gabarit que les boutons Versions / Partage, accent au survol — A VALIDER PAR JaxX */
.article_modifier
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px dashed var(--ligne_forte);
    border-radius: var(--rayon_bouton, 2px); /* ancien (n° 599) : 2px */
    background: transparent;
    font-family: var(--police_mono);
    font-size: var(--texte_xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--encre_second);
    transition: color var(--duree, 0.2s) var(--easing, ease), border-color var(--duree, 0.2s) var(--easing, ease), background-color var(--duree, 0.2s) var(--easing, ease);
}

.article_modifier:hover,
.article_modifier:focus-visible
{
    color: var(--accent_texte, #ffffff);
    border-color: var(--accent);
    border-style: solid;
    background: var(--accent);
}

.article_modifier_icone
{
    display: block;
    flex: none;
}

@media print
{
    .article_modifier
    {
        display: none;
    }
}
/* ARTICLE_MODIFIER_GOD ================================================ */

/* ARTICLE_GALERIE ===================================================== */
/* 10/10/2026 07:10 (Claude, Dialogue n° 560, 562 et 585 de JaxX : « des captures d'écran de site tendance [...] proposer des
   diaporamas avec plusieurs images recadrer sur certains détails ») : bande défilante d'exemples réels par style (vue d'ensemble
   puis détails recadrés), accrochage image par image, boutons ‹ › ajoutés par Article.js ; un clic ouvre le diaporama plein
   écran existant (n° 157) — A VALIDER PAR JaxX */
.article_corps .article_galerie
{
    margin: 1.5rem 0 2.25rem;
}

.article_corps .article_galerie_entete
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace_2, 0.5rem);
    margin-bottom: 0.75rem;
}

.article_corps .article_galerie_titre
{
    margin: 0;
}

.article_corps .article_galerie_aide
{
    font-size: 0.85rem;
    color: var(--encre_second, inherit);
}

.article_corps .article_galerie_boutons
{
    display: flex;
    gap: var(--espace_2, 0.5rem);
    flex-shrink: 0;
}

.article_corps .article_galerie_bouton
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    background-color: var(--surface_carte, transparent);
    border: 1px solid var(--ligne_forte, rgba(127, 127, 127, 0.35));
    border-radius: var(--rayon_bouton, 2px);
    cursor: pointer;
    transition: color var(--duree, 0.2s) var(--easing, ease), border-color var(--duree, 0.2s) var(--easing, ease);
}

.article_corps .article_galerie_bouton:hover,
.article_corps .article_galerie_bouton:focus-visible
{
    color: var(--accent, #c9a227);
    border-color: var(--accent, #c9a227);
}

.article_corps .article_galerie_bouton:disabled
{
    opacity: 0.35;
    cursor: default;
}

.article_corps .article_galerie_piste
{
    display: flex;
    gap: var(--espace_3, 1rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
}

.article_corps .article_galerie_piste:focus-visible
{
    outline: 2px solid var(--accent, #c9a227);
    outline-offset: 4px;
}

.article_corps .article_galerie_figure
{
    flex: 0 0 min(86%, 660px);
    margin: 0;
    scroll-snap-align: start;
}

.article_corps .article_galerie_figure img
{
    width: 100%;
    height: clamp(210px, 36vw, 400px);
    object-fit: contain;
    background-color: var(--surface_carte, rgba(127, 127, 127, 0.08));
}

.article_corps .article_galerie_figure figcaption
{
    text-align: left;
}

.article_corps .article_galerie_source
{
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine)
{
    .article_corps .article_galerie_figure:hover img
    {
        transform: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .article_corps .article_galerie_piste
    {
        scroll-behavior: auto;
    }
}
/* ARTICLE_GALERIE ===================================================== */