/* /assets/pages/chroniques/css/chronique-classique.css
 * Base commune V1 + V2 (sans collisions)
 * Dépend de base.css (tokens) et cohabite avec gestion-images.css.
 */

/************************************************************
 * A) LAYOUT GÉNÉRAL (2 colonnes)
 ************************************************************/
.chronique-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) 1fr;
    column-gap: 2rem;
    align-items: start;

    max-width: 1120px;
    margin: 1.5rem auto 3rem;
    padding: 0; /* padding géré par .container parent */
}

.chronique-sidebar { font-size: 0.9rem; }
.chronique-main { min-width: 0; }

/* Sticky sidebar */
@media (min-width: 960px) {
    .chronique-sidebar { position: sticky; top: 120px; }
}

/* Mobile: 1 colonne */
@media (max-width: 960px) {
    .chronique-layout { display: block; padding: 0 1rem; }
    .chronique-sidebar { position: static; margin-bottom: 1.5rem; }
}

/************************************************************
 * B) HERO
 ************************************************************/
.chronique-hero { margin-bottom: 1.5rem; }
.chronique-hero-media { border-radius: var(--radius-lg); overflow: hidden; }
.chronique-hero-img { width: 100%; height: 260px; object-fit: cover; }
@media (min-width: 960px) { .chronique-hero-img { height: 320px; } }

/************************************************************
 * C) CARTE ARTICLE (V1)
 ************************************************************/
.chronique-classique {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem 2.25rem;
    box-shadow: 0 10px 30px var(--color-shadow);
    transition: background var(--transition-fast), color var(--transition-fast);
}

/************************************************************
 * D) HEADER ARTICLE / INTRO
 ************************************************************/
.article-header { margin-bottom: 1.8rem; }
.article-main .tags { margin-bottom: 0.9rem; }

.article-intro {
    margin: 0 0 1.2rem;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
}

/************************************************************
 * E) META AUTEUR (SIDEBAR)
 ************************************************************/
.article-meta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.article-avatar,
.v2-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;

    /* évite les bordures/blancs fixes du V2 */
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 10px var(--color-shadow);
}

.signature-nom { font-weight: 600; color: var(--color-text); }
.article-reading-time,
.article-author-role { font-size: 0.8rem; color: var(--color-text-subtle); }

/************************************************************
 * F) SOMMAIRE (TOC)
 ************************************************************/
.article-toc {
    margin-top: 0.5rem;
    padding: 1.2rem;
    border-radius: var(--radius-md);
    background: var(--color-brand-light);
    border: 1px solid var(--color-brand-border);
    font-size: 0.9rem;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.article-toc-title {
    font-weight: 700;
    margin: 0 0 0.8rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand);
    opacity: 0.95;
}

.article-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.article-toc li { margin: 0; line-height: 1.4; }

.article-toc a {
    display: block;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: 0.3rem 0 0.3rem 0.8rem;
    border-left: 2px solid transparent;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), padding var(--transition-fast);
}

.article-toc a:hover,
.article-toc a:focus-visible {
    color: var(--color-brand);
    border-left-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-bg-card) 55%, transparent);
    padding-left: 1rem;
    text-decoration: none;
}

/* Sous-titres (H3) : le JS ajoute margin-left inline */
.article-toc li[style*="margin-left"] { margin-top: 0.1rem; }
.article-toc li[style*="margin-left"] a {
    font-size: 0.9em;
    color: var(--color-text-subtle);
    padding-left: 1rem;
    border-left-width: 1px;
}
.article-toc li[style*="margin-left"] a:hover,
.article-toc li[style*="margin-left"] a:focus-visible {
    color: var(--color-brand-hover);
    border-left-color: var(--color-brand-hover);
    padding-left: 1.2rem;
}

/* Dark: aucune couleur “bloquante”, uniquement dérivés */
[data-theme="dark"] .article-toc {
    background: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-card));
    border-color: color-mix(in srgb, var(--color-brand) 24%, var(--color-border));
}
[data-theme="dark"] .article-toc a:hover,
[data-theme="dark"] .article-toc a:focus-visible {
    background: color-mix(in srgb, var(--color-bg-card) 35%, transparent);
}

/************************************************************
 * G) ACTIONS (TTS)
 ************************************************************/
.article-actions {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-tts {
    border: none;
    border-radius: var(--radius-full);
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--color-brand);
    color: var(--color-text-inverted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--color-brand) 45%, transparent);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background var(--transition-fast);
}
.btn-tts:hover,
.btn-tts:focus-visible {
    background: var(--color-brand-hover);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--color-brand) 60%, transparent);
}

/************************************************************
 * H) CONTENU (COMMUN V1 + V2)
 ************************************************************/
/* V1: .article-body ; V2: .v2-body */
:where(.article-body, .v2-body) {
    /* V1 conserve sa largeur “lecture”; V2 gère sa largeur via .article-v2 */
    color: var(--color-text);
}

/* Titres */
:where(.article-body, .v2-body) h2 {
    font-size: 1.35rem;
    margin-top: 2.1rem;
    margin-bottom: 0.6rem;
    color: var(--color-brand);
    font-family: var(--font-sans);
    font-weight: 800;
}
:where(.article-body, .v2-body) h3 {
    font-size: 1.15rem;
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-weight: 650;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid color-mix(in srgb, var(--color-brand) 18%, var(--color-bg-card));
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
[data-theme="dark"] :where(.article-body, .v2-body) h3 {
    border-bottom-color: color-mix(in srgb, var(--color-brand) 28%, var(--color-bg-card));
}

:where(.article-body, .v2-body) p { margin: 0.75rem 0; }
:where(.article-body, .v2-body) ul,
:where(.article-body, .v2-body) ol { margin: 0.7rem 0 0.9rem 1.2rem; }
:where(.article-body, .v2-body) li { margin: 0.25rem 0; }

/* V1: colonne de lecture confortable */
.article-body {
    max-width: 720px;
    margin: 0 auto;
}

/************************************************************
 * I) BLOCS MIS EN AVANT (COMMUN)
 ************************************************************/
:where(.article-body, .v2-body) .encadre,
:where(.article-body, .v2-body) .info-box {
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    margin: 1.5rem 0;
    border: 1px solid;
    color: var(--color-text-muted);
}

:where(.article-body, .v2-body) .encadre p:last-child,
:where(.article-body, .v2-body) .info-box p:last-child { margin-bottom: 0; }

/* Encadré “brand” */
:where(.article-body, .v2-body) .encadre {
    background: var(--color-brand-light);
    border-color: var(--color-brand-border);
}
[data-theme="dark"] :where(.article-body, .v2-body) .encadre {
    background: color-mix(in srgb, var(--color-brand) 14%, var(--color-bg-card));
    border-color: color-mix(in srgb, var(--color-brand) 34%, var(--color-border));
}

/* Info-box neutre */
:where(.article-body, .v2-body) .info-box {
    background: var(--color-bg-alt);
    border-color: var(--color-border-alt);
}

/* NOTE: styles image/figure => gérés par gestion-images.css (article-figure, media-box, etc.) */
:where(.article-body, .v2-body) figure:not(.article-figure) {
    margin: 1.6rem auto;
    text-align: center;
}
:where(.article-body, .v2-body) figure:not(.article-figure) figcaption {
    font-size: 0.8rem;
    color: var(--color-text-subtle);
    margin-top: 0.45rem;
}



/************************************************************
 * J) TABLES (NOUVEAU: wrapper + table)
 ************************************************************/
/* Wrapper scroll horizontal (si nécessaire) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    margin: 1.25rem 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    box-shadow: 0 6px 18px var(--color-shadow);
}

/* Table */
.article-table {
    width: 100%;
    min-width: 540px; /* force le scroll sur mobile si tableau dense */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

/* En-tête */
.article-table thead th {
    position: sticky; /* utile si wrapper scroll (reste en haut) */
    top: 0;
    z-index: 1;

    background: var(--color-bg-alt);
    color: var(--color-text);
    text-align: left;
    font-weight: 700;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* Cellules */
.article-table tbody td,
.article-table tbody th {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

/* Dernière ligne */
.article-table tbody tr:last-child td,
.article-table tbody tr:last-child th {
    border-bottom: 0;
}

/* Zébrage + hover (sans couleurs fixes) */
.article-table tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--color-bg-card) 92%, var(--color-bg-alt));
}
.article-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-card));
}

/* Coins arrondis */
.article-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.article-table thead th:last-child  { border-top-right-radius: var(--radius-md); }

/* Alignements utiles */
.article-table .is-num { text-align: right; white-space: nowrap; }
.article-table .is-center { text-align: center; }

/* Responsive: sur mobile, on réduit un peu la densité */
@media (max-width: 640px) {
    .article-table { min-width: 480px; font-size: 0.92rem; }
    .article-table thead th { padding: 0.75rem 0.8rem; }
    .article-table tbody td,
    .article-table tbody th { padding: 0.7rem 0.8rem; }
}

/* ==========================================================
 *   Chroniques – Table (theme-aware)
 *   ========================================================== */

:root{
    --ch-table-bg: var(--c-surface, #ffffff);
    --ch-table-text: var(--c-text, #111827);
    --ch-table-muted: var(--c-muted, #6b7280);
    --ch-table-border: var(--c-border, rgba(0,0,0,0.10));

    --ch-table-head-bg: rgba(0,0,0,0.04);
    --ch-table-row-alt: rgba(0,0,0,0.02);
    --ch-table-shadow: 0 4px 6px -1px rgba(0,0,0,0.10);
}

html[data-theme="dark"],
body[data-theme="dark"],
html[data-pd-theme="dark"],
body[data-pd-theme="dark"]{
    color-scheme: dark;

    --ch-table-bg: var(--c-surface, #0f172a);
    --ch-table-text: var(--c-text, rgba(243,244,246,.92));
    --ch-table-muted: var(--c-muted, rgba(203,213,225,.82));
    --ch-table-border: var(--c-border, rgba(255,255,255,0.12));

    --ch-table-head-bg: rgba(255,255,255,0.06);
    --ch-table-row-alt: rgba(255,255,255,0.04);
    --ch-table-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.ch-table-responsive{
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 8px;
    background: var(--ch-table-bg);
    border: 1px solid var(--ch-table-border);
    box-shadow: var(--ch-table-shadow);
}

.ch-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    font-size: 0.95rem;
    background: transparent;
    color: var(--ch-table-text);
}

.ch-table thead{
    background: var(--ch-table-head-bg);
}

.ch-table th{
    text-align: left;
    padding: 15px;
    font-weight: 700;
    color: var(--ch-table-text);
    border-bottom: 1px solid var(--ch-table-border);
}

.ch-table td{
    padding: 15px;
    vertical-align: top;
    color: var(--ch-table-text);
    border-bottom: 1px solid var(--ch-table-border);
}

.ch-table tbody tr:nth-child(even){
    background: var(--ch-table-row-alt);
}


/************************************************************
 * K) PARTAGE (COMMUN) – Nettoyé (sans !important)
 ************************************************************/
.share-block {
    margin: 1.8rem 0 1.4rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-alt);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.share-block h4 {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    color: var(--color-text);
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-alt);
    font-size: 0.8rem;

    /* par défaut: “neutre” (tokens) */
    color: var(--color-text-muted);

    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Couleurs “identité” plateformes (ok en dur) */
.share-button.sb-facebook  { color: #1877F2; }
.share-button.sb-twitter   { color: #1DA1F2; }
.share-button.sb-linkedin  { color: #0A66C2; }
.share-button.sb-instagram { color: #E4405F; }
.share-button.sb-whatsapp  { color: #25D366; }
.share-button.sb-email     { color: var(--color-text-subtle); }

.share-button:hover,
.share-button:focus-visible {
    color: var(--color-text-inverted);
    border-color: transparent;
    transform: scale(1.05);
    text-decoration: none;
}

/* Fond au survol (plateformes) */
.share-button.sb-facebook:hover,
.share-button.sb-facebook:focus-visible  { background: #1877F2; }
.share-button.sb-twitter:hover,
.share-button.sb-twitter:focus-visible   { background: #1DA1F2; }
.share-button.sb-linkedin:hover,
.share-button.sb-linkedin:focus-visible  { background: #0A66C2; }
.share-button.sb-instagram:hover,
.share-button.sb-instagram:focus-visible { background: #E4405F; }
.share-button.sb-whatsapp:hover,
.share-button.sb-whatsapp:focus-visible  { background: #25D366; }
.share-button.sb-email:hover,
.share-button.sb-email:focus-visible     { background: color-mix(in srgb, var(--color-text) 55%, var(--color-bg-card)); }

/************************************************************
 * L) BLOC “ÉCOUTER” (conserve couleurs locales mais dark-safe)
 ************************************************************/
.bloc-ecouter {
    --color-violet: #6c47ff;
    --color-violet-light: #f4f0ff;

    margin: 2rem 0 1.5rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    background: var(--color-violet-light);
    border: 1px solid var(--color-violet);
    display: flex;
    gap: 0.75rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ecouter-icon { font-size: 1.4rem; line-height: 1; margin-top: 0.1rem; color: var(--color-violet); }
.podcast-link { font-weight: 600; color: var(--color-violet); }
.podcast-link:hover { text-decoration-color: var(--color-violet); }

[data-theme="dark"] .bloc-ecouter {
    --color-violet: #a994ff;
    background: color-mix(in srgb, var(--color-violet) 12%, var(--color-bg-card));
    border-color: color-mix(in srgb, var(--color-violet) 35%, var(--color-border));
}

/************************************************************
 * M) SIGNATURE & BOUTONS
 ************************************************************/
.chronique-signature-section {
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.4rem;
    transition: border-color var(--transition-fast);
}

.signature-chronique {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.signature-photo {
    width: 60px;
    height: 60px;
    min-width: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 10px var(--color-shadow);
}

.signature-chronique > a {
    flex-shrink: 0;
    display: block;
}

.actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-all {
    background: var(--color-brand);
    color: var(--color-text-inverted);
    border-color: var(--color-brand);
}
.btn-all:hover,
.btn-all:focus-visible {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-text-inverted);
    text-decoration: none;
}

.btn-retour {
    background: var(--color-bg-card);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}
.btn-retour:hover,
.btn-retour:focus-visible {
    border-color: color-mix(in srgb, var(--color-text) 18%, var(--color-border));
    color: var(--color-text);
    text-decoration: none;
}

[data-theme="dark"] .btn-retour {
    background: var(--color-bg-alt);
    border-color: var(--color-border-alt);
}
[data-theme="dark"] .btn-retour:hover,
[data-theme="dark"] .btn-retour:focus-visible {
    border-color: color-mix(in srgb, var(--color-text) 28%, var(--color-border-alt));
}

/************************************************************
 * N) CORRECTIFS MOBILE (sans !important)
 ************************************************************/
@media (max-width: 768px) {
    .chronique-layout { padding-left: 0; padding-right: 0; }
    .chronique-classique { padding-left: 1rem; padding-right: 1rem; }
    .article-body { width: 100%; }
    .signature-photo { flex-shrink: 0; }
}

/************************************************************
 * O) BRIDGE TOKENS – BLOC COMMUNAUTÉ (sans toucher son fichier)
 * (Le composant définit des fallbacks en dur. On les aligne ici sur les tokens.)
 ************************************************************/
.bloc-communaute {
    --paper: var(--color-bg-card);
    --stroke: var(--color-border);
    --ink: var(--color-text);
    --brand: var(--color-brand);
}


/************************************************************
 * IMAGES / FIGURES (MODIFIÉS)
 ************************************************************/
.article-body figure {
    margin: 1.6rem auto; /* Centré */
    text-align: center; /* Centré */
}
.article-body figure img {
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 720px;
    margin: 0 auto; /* Assure centrage image */
}
.article-body figure figcaption {
    font-size: 0.8rem;
    color: var(--color-text-subtle);
    margin-top: 0.45rem;
    text-align: center; /* Assure centrage légende */
}
.article-body .img-left-1-3 {
    max-width: 260px;
    float: left;
    margin: 0 1rem 0.5rem 0;
    text-align: left; /* Rétablir pour l'image flottante */
}
/* La figcaption d'une image flottante doit rester alignée à gauche */
.article-body .img-left-1-3 figcaption {
    text-align: left;
}
/* Correction pour que l'image flottante dans un info-box fonctionne */
.article-body .info-box .img-left-1-3 {
    text-align: left;
}
.article-body .info-box .img-left-1-3 figcaption {
    text-align: left;
}