/* =============================================================================
   QUPIDON Pages conseils (hub + articles SEO)
   Se charge APRÈS style.css : réutilise ses variables, son header, son footer
   et le champ d'étincelles. Ce fichier n'ajoute que la mise en page de lecture.
============================================================================= */

/* ------------------------------- EN-TÊTE --------------------------------- */

#nav-menu a[aria-current="page"]:not(.nav-cta-alt) {
    color: var(--or);
}

.article-hero {
    position: relative;
    padding: 8.5rem 1.5rem 3.5rem;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 110% 80% at 50% 0%, rgba(96, 48, 192, 0.55), transparent 60%),
        linear-gradient(165deg, var(--prune) 0%, var(--prune-dark) 60%, var(--prune-deep) 100%);
}

.article-hero > *:not(.starfield) {
    position: relative;
    z-index: 2;
}

/* La règle générique `nav` de style.css (barre de navigation : flex, padding,
   largeur max) s'applique aussi au fil d'Ariane et au sommaire, qui sont des
   <nav> : on la neutralise ici, sinon le sommaire se met en ligne sur mobile. */
.breadcrumb,
.toc {
    display: block;
    max-width: none;
}

.breadcrumb {
    padding: 0;
    margin-bottom: 1.4rem;
    font-size: 0.85rem;
    color: var(--text-faint);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    list-style: none;
}

.breadcrumb li + li::before {
    content: "›";
    margin-right: 0.4rem;
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--or);
}

.article-hero h1 {
    font-size: clamp(2rem, 5.5vw, 3.3rem);
    max-width: 22ch;
    margin: 0 auto 1.2rem;
}

.article-hero .lede {
    margin-bottom: 1.4rem;
}

.article-meta {
    font-size: 0.85rem;
    color: var(--text-faint);
    letter-spacing: 0.03em;
}

/* ------------------------------- LECTURE --------------------------------- */

.article-body {
    background: linear-gradient(180deg, var(--prune-deep) 0%, var(--prune-dark) 100%);
}

.prose {
    max-width: 72ch;
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
    font-size: 1.06rem;
}

.prose > * + * {
    margin-top: 1.1rem;
}

.prose h2 {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    max-width: none;
    margin-top: 3rem;
    margin-bottom: 0;
}

.prose h3 {
    font-size: 1.2rem;
    color: var(--or);
    margin-top: 2rem;
}

.prose p,
.prose li {
    color: var(--text-muted);
}

.prose strong {
    color: var(--creme);
}

.prose ul,
.prose ol {
    padding-left: 1.3rem;
}

.prose li + li {
    margin-top: 0.45rem;
}

.prose li::marker {
    color: var(--or);
}

.prose a {
    color: var(--or);
    text-underline-offset: 3px;
}

.prose a:hover {
    color: #E8C87E;
}

/* Les boutons gardent leurs couleurs : sans ça, `.prose a` peignait le texte
   du bouton principal en or… sur fond or (bouton vide en fin d'article). */
.prose .btn {
    text-decoration: none;
}

.prose .btn-primary,
.prose .btn-primary:hover {
    color: var(--prune-deep);
}

.prose .sources {
    font-size: 0.85rem;
    color: var(--text-faint);
}

.prose .sources a {
    color: var(--text-muted);
    word-break: break-word;
}

/* Sommaire de l'article. */
.toc {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
}

.toc p {
    font-weight: 700;
    color: var(--creme);
    margin-bottom: 0.5rem;
}

.toc ol {
    margin: 0;
}

.toc a {
    color: var(--text-muted);
    text-decoration: none;
}

.toc a:hover {
    color: var(--or);
}

/* Encadré à retenir. */
.callout {
    background: rgba(200, 152, 64, 0.08);
    border: 1px solid rgba(200, 152, 64, 0.35);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
}

.callout p {
    color: var(--creme);
}

/* Chiffres clés. */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius);
    padding: 1.3rem 1.4rem;
}

.stat strong {
    display: block;
    font-size: 2.1rem;
    line-height: 1.1;
    color: var(--or);
    margin-bottom: 0.3rem;
}

.stat span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Deux colonnes Green Flags / Red Flags. */
.flag-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

.flag-col {
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.flag-col h3 {
    margin-top: 0;
    margin-bottom: 0.9rem;
}

.flag-col ul {
    margin: 0;
}

.flag-green {
    background: rgba(66, 163, 110, 0.1);
    border-color: rgba(66, 163, 110, 0.4);
}

.flag-green h3 { color: #7FD3A5; }
.flag-green li::marker { color: #7FD3A5; }

.flag-red {
    background: rgba(224, 36, 94, 0.08);
    border-color: rgba(224, 36, 94, 0.4);
}

.flag-red h3 { color: #F5809F; }
.flag-red li::marker { color: #F5809F; }

/* Appel à l'action en fin d'article. */
.cta-box {
    margin-top: 3.5rem !important;
    text-align: center;
    background:
        radial-gradient(ellipse 90% 90% at 50% 100%, rgba(96, 48, 192, 0.55), transparent 70%),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(200, 152, 64, 0.35);
    border-radius: var(--radius-lg);
    padding: 2.4rem 1.6rem;
}

.cta-box h2 {
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.cta-box p {
    margin-bottom: 1.6rem;
}

/* ------------------------ CARTES D'ARTICLES (HUB) ------------------------ */

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

.article-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.7rem;
    color: var(--creme);
    text-decoration: none;
    transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
}

.article-card:hover {
    transform: translateY(-6px);
    border-color: rgba(200, 152, 64, 0.45);
    background: rgba(255, 255, 255, 0.08);
}

.article-card .tag {
    align-self: flex-start;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--or);
    background: rgba(200, 152, 64, 0.14);
    border-radius: 50px;
    padding: 0.28rem 0.8rem;
    margin-bottom: 1rem;
}

/* Page conseils : les cartes portent des h2 (hiérarchie SEO) stylés comme des h3. */
.article-card h2,
.article-card h3 {
    font-size: 1.25rem;
    color: var(--creme);
    margin: 0 0 0.6rem;
}

.article-card p {
    color: var(--text-muted);
    font-size: 0.97rem;
    flex: 1;
}

.article-card .more {
    margin-top: 1.2rem;
    color: var(--or);
    font-weight: 700;
    font-size: 0.95rem;
}

.related {
    margin-top: 3.5rem !important;
}

.related h2 {
    margin-bottom: 1.4rem;
}

.hub-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
}

@media (min-width: 640px) {
    .stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .flag-grid,
    .article-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}