/* =====================================================
   YAKTU — Dark Glass System
   ADN :
   - analyse
   - distance
   - lisibilité
   - futur proche
   ===================================================== */


/* =====================================================
   1. DESIGN TOKENS
   ===================================================== */

:root {
    /* Fonds */
    --bg-global: radial-gradient(
        circle at top left,
        #1a2238,
        #0b0f1a 60%
    );
    --bg-glass: rgba(255, 255, 255, 0.06);
    --bg-glass-strong: rgba(255, 255, 255, 0.10);

    /* Texte */
    --text-main: #e6ebf2;
    --text-soft: #cfd6e6;
    --text-muted: #9aa4bf;

    /* Marque */
    --color-primary: #0e1628;
    --color-accent: #2da3e0;

    /* Types */
    --yak-blue: #5c6bc0;
    --chiffre-blue: #4fc3f7;
    --gold: #d4af37;
    --silver: #b0bec5;
    --bronze: #cd7f32;

    /* Effets */
    --blur-glass: blur(14px);
    --border-glass: 1px solid rgba(255, 255, 255, 0.12);

    /* Rayons */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Ombres */
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.5);

    /* Layout */
    --header-height: 64px;
    --content-max-width: 1100px;

    /* Transitions */
    --t-fast: 0.15s ease;
    --t-base: 0.3s ease;
}


/* =====================================================
   2. RESET & BASE
   ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { font-size: 16px; }

body {
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Ubuntu, sans-serif;
    background: var(--bg-global);
    color: var(--text-main);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}


/* =====================================================
   3. LIENS
   ===================================================== */

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: #7ecbff;
}


/* =====================================================
   4. HEADER
   ===================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    backdrop-filter: blur(10px);
    background: rgba(14, 22, 40, 0.65);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    padding: 0 1.5rem;
}

.header-logo { height: 36px; }


/* =====================================================
   5. LAYOUT
   ===================================================== */

.site-main {
    width: 100%;
    padding: 2rem 1.5rem;
}

.layout { display: block; }

@media (min-width: 1024px) {
    .layout {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}

.content-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
}


/* =====================================================
   6. TYPOGRAPHIE
   ===================================================== */

h1 { font-size: 2rem; margin-bottom: 1rem; }
h2 { font-size: 1.4rem; margin-bottom: 1rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }

p {
    color: var(--text-soft);
    margin-bottom: 1rem;
}

.text-muted {
    color: var(--text-muted);
    font-size: 0.9rem;
}


/* =====================================================
   7. HERO
   ===================================================== */

.hero {
    position: relative;
    width: 100%;
    background-image: url("/static/img/hero_cover.png");
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 4rem 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 12, 25, 0.65),
        rgba(8, 12, 25, 0.9)
    );
}

.hero > * { position: relative; z-index: 1; }

.hero-subtitle {
    max-width: 42rem;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-soft);
}


/* =====================================================
   8. INTRO MÉDIANALYSE
   ===================================================== */

.medianalyse-intro {
    background: var(--bg-glass);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    font-size: 1.05rem;
}


/* =====================================================
   9. CARDS — STRUCTURE COMMUNE
   ===================================================== */

.articles-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.card {
    position: relative;
    background: var(--bg-glass);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    transition: transform var(--t-base), box-shadow var(--t-base);
    cursor: pointer;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.card-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Contenu visible mais non cliquable (clic sur toute la carte) */
.card > *:not(.card-link) {
    position: relative;
    z-index: 2;
    pointer-events: none;
}


/* =====================================================
   9.1 TYPE + DATE (ligne prioritaire)
   ===================================================== */

.card-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}


/* =====================================================
   9.2 RUBRIQUE (MEDIANALYSE / PEPITES selon home.html)
   ===================================================== */

.card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}


/* =====================================================
   9.3 TITRE & EXCERPT
   ===================================================== */

.card-title {
    color: var(--text-main);
    transition: color var(--t-fast);
}

.card:hover .card-title {
    color: var(--color-accent);
}

.card-excerpt {
    font-size: 0.95rem;
    color: var(--text-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =====================================================
   9.4 CHIFFRE DU JOUR
   ===================================================== */

.card-chiffre-value {
    font-size: 3.2rem;
    font-weight: 600;
    text-align: center;
    color: var(--chiffre-blue);
}


/* =====================================================
   10. TYPES DE CARDS — MATIÈRE & COULEUR
   ===================================================== */

/* Médianalyse */
.card-medianalyse {
    border-left: 4px solid var(--color-accent);
}

/* Chronique du Yak */
.card-yak {
    background: linear-gradient(
        135deg,
        rgba(92, 107, 192, 0.18),
        rgba(255, 255, 255, 0.04)
    );
    border-left: 4px solid var(--yak-blue);
}

/* Chiffre du jour */
.card-chiffre {
    background: linear-gradient(
        135deg,
        rgba(79, 195, 247, 0.22),
        rgba(255, 255, 255, 0.04)
    );
    border-left: 4px solid var(--chiffre-blue);
}

/* Pépites */
.card-pepite_or {
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.25),
        rgba(255, 255, 255, 0.05)
    );
    border-left: 4px solid var(--gold);
}

.card-pepite_argent {
    background: linear-gradient(
        135deg,
        rgba(176, 190, 197, 0.25),
        rgba(255, 255, 255, 0.05)
    );
    border-left: 4px solid var(--silver);
}

.card-pepite_bronze {
    background: linear-gradient(
        135deg,
        rgba(205, 127, 50, 0.25),
        rgba(255, 255, 255, 0.05)
    );
    border-left: 4px solid var(--bronze);
}


/* =====================================================
   11. BOUTONS
   ===================================================== */

.button {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
}

.button:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-accent);
}


/* =====================================================
   12. FOOTER
   ===================================================== */

.site-footer {
    margin-top: 4rem;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}


/* =====================================================
   13. MOBILE
   ===================================================== */

@media (max-width: 768px) {
    .site-main { padding: 1.25rem; }
    .content-inner { max-width: 100%; }

    /* Le problème venait bien de l’image : on force un centrage visuel */
    .hero {
        background-position: center top;
    }
}


/* =====================================================
   14. AJUSTEMENTS SPRINT 4.1
   (ajouts ciblés – sans modifier l’existant)
   ===================================================== */

/* ---------- Icône Yak (Chronique) ---------- */
.card-yak-icon {
    width: 18px;
    height: 18px;
    margin-right: 0.4rem;
    opacity: 0.75;
    filter: drop-shadow(0 0 6px rgba(92, 107, 192, 0.4));
}

/* Aligner icône + type (si icône présente dans la ligne) */
.card-meta-top {
    gap: 0.5rem;
}

/* ---------- Chiffre du jour : centrage renforcé ---------- */
.card-chiffre-value {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
}

/* ---------- Bouton "Voir plus d’articles" centré ---------- */
.section-center {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}


/* =====================================================
   15. BACKGROUND VIVANT — HALOS FUTURISTES
   (inspiré du modèle, très subtil)
   ===================================================== */

body::before,
body::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background-repeat: no-repeat;
    opacity: 0.35;
    animation: bg-drift 60s linear infinite;
}

/* Halo bleu YAKTU */
body::before {
    background-image:
        radial-gradient(
            600px 600px at 20% 30%,
            rgba(45, 163, 224, 0.18),
            transparent 70%
        );
}

/* Halo violet Yak */
body::after {
    background-image:
        radial-gradient(
            500px 500px at 80% 70%,
            rgba(92, 107, 192, 0.18),
            transparent 70%
        );
    animation-duration: 90s;
}

@keyframes bg-drift {
    0% { transform: translate(0, 0); }
    50% { transform: translate(3%, -2%); }
    100% { transform: translate(0, 0); }
}

/* Désactivation sur mobile pour performance */
@media (max-width: 768px) {
    body::before,
    body::after {
        display: none;
    }
}


/* =====================================================
   16. SPRINT 5 — LECTURE LONGUE (ARTICLE DETAIL)
   ===================================================== */

/* Conteneur */
.article-full {
    max-width: 780px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.article-section-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 1.1rem;
}

/* Header */
.article-header {
    margin-bottom: 2.75rem;
}

.article-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

/* Titre principal */
.article-header h1 {
    font-size: 2.2rem;
    line-height: 1.25;
    margin-bottom: 0.9rem;
    color: var(--text-main);
}

/* Chapeau : italique, respiration */
.article-chapeau {
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-soft);
    margin-bottom: 0;
}

/* Contenu */
.article-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-soft);
}

/* Paragraphes */
.article-content p {
    margin-bottom: 1.35rem;
}

/* Titres dans la prose */
.article-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    color: var(--text-main);
}

.article-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-size: 1.15rem;
    color: var(--text-main);
}

/* Listes */
.article-content ul,
.article-content ol {
    margin: 1rem 0 1.5rem 1.25rem;
}

.article-content li {
    margin: 0.35rem 0;
}

/* =====================================================
   SPRINT 5 — CITATIONS DU YAK
   ===================================================== */

/* Bloc citation – uniquement dans le contenu principal */
.article-content blockquote {
    position: relative;

    margin: 2.5rem 0;
    padding: 1.25rem 1.5rem 1.5rem 1.75rem;

    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.8;

    color: var(--text-soft);

    background: rgba(92, 107, 192, 0.08);
    border-left: 4px solid var(--yak-blue);
    border-radius: var(--radius-sm);
}

/* Paragraphes internes */
.article-content blockquote p {
    margin: 0;
}

/* Guillemets visuels */
.article-content blockquote::before {
    content: "“";
    position: absolute;
    top: -0.6rem;
    left: 0.6rem;

    font-size: 3rem;
    line-height: 1;
    color: var(--yak-blue);
    opacity: 0.35;
}

/* Signature Yak (bas droite) */
.article-content blockquote::after {
    content: "Le Yak";
    display: block;

    margin-top: 1rem;
    text-align: right;

    font-size: 0.75rem;
    font-style: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: var(--text-muted);

    background-image: url("/static/img/yaktu_logo_transparent.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 18px 18px;

    padding-right: 1.6rem;
    opacity: 0.75;
}


/* Encadré "Ce qu’il faut retenir" (aside injecté dans content_html) */
.article-content aside {
    background: var(--bg-glass-strong);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin: 2.75rem 0;
}

.article-content aside h3 {
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.article-actions {
    display: flex;
    gap: 1rem;
    margin: 3rem 0 2.5rem;
}

/* Boutons neutres */
.article-actions button {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.article-actions button:hover {
    opacity: 1;
    transform: translateY(-1px);
}

/* Icônes */
.action-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--text-soft);
    stroke-width: 1.6;
}

/* Bouton neutre */
.action-yak {
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.action-yak img {
    width: 26px;
    height: auto;
    display: block;
}

/* Yak positif = normal */
.action-positive img {
    transform: rotate(0deg);
}

/* Yak négatif = inversé */
.action-negative img {
    transform: rotate(180deg);
}

/* Hover discret */
.action-yak:hover {
    opacity: 1;
    transform: scale(1.05);
}

.article-support {
    margin-top: 2.25rem;
}

/* Sources (section dédiée du template) */
.article-sources {
    margin-top: 3rem;
    background: var(--bg-glass);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
}

.article-sources h2 {
    margin-bottom: 1rem;
    font-size: 1.15rem;
}

.article-sources ol {
    margin-left: 1.25rem;
}

.article-sources li {
    margin: 0.6rem 0;
    color: var(--text-soft);
}

.article-sources strong {
    color: var(--text-main);
}

/* Footer */
.article-footer {
    margin-top: 2.5rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.article-footer a {
    color: var(--color-accent);
}

/* Mobile lecture longue */
@media (max-width: 768px) {
    .article-full {
        padding: 0 0 2.5rem;
        max-width: 100%;
    }

    .article-header h1 {
        font-size: 1.85rem;
    }

    .article-content {
        font-size: 1.02rem;
        line-height: 1.85;
    }

    .article-sources {
        padding: 1.1rem 1.25rem;
    }
}

/* =====================================================
   SPRINT 5 — SOURCES REPLIABLES
   ===================================================== */

.article-sources details {
    border: none;
}

.article-sources summary {
    list-style: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);

    user-select: none;
}

/* Supprime le triangle natif */
.article-sources summary::-webkit-details-marker {
    display: none;
}

/* Chevron discret */
.article-sources .chevron {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.25s ease;
}

/* Rotation quand ouvert */
.article-sources details[open] .chevron {
    transform: rotate(180deg);
}

/* Contenu sources */
.article-sources ol {
    margin-top: 1rem;
    margin-left: 1.25rem;
}

/* Respiration à l’ouverture */
.article-sources details[open] {
    margin-top: 0.75rem;
}

/* =====================================================
   SPRINT 5 — TAGS EN MINI-CARDS
   ===================================================== */

.article-tags {
    margin-top: 3rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tag-list li {
    margin: 0;
}

.tag-list a {
    display: inline-block;
    padding: 0.35rem 0.7rem;

    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;

    color: var(--text-soft);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);

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

.tag-list a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-accent);
}


/* =====================================================
   SPRINT 5 — ARTICLES CONNEXES (MINI CARDS)
   ===================================================== */

.article-related {
    margin-top: 3rem;
}

.related-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.related-card {
    position: relative;
    background: var(--bg-glass);
    backdrop-filter: var(--blur-glass);
    border: var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    transition: background var(--t-fast);
}

.related-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

.related-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Meta */
.related-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    letter-spacing: 0.04em;
}

/* Titre */
.related-title {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-main);
}