/*
 * blog.css — Blogue et Vlog OFFGRID.QC (liste home.php + article single.php + commentaires)
 *
 * @package    OFFGRID.QC
 * @author     Danny Pilote
 * @copyright  2026 Danny Pilote — OFFGRID.QC. Tous droits réservés.
 * @version    1.1
 * @date       15 août 2026
 * @changelog  V1.1: Finitions post-test Bobby (2 trouvailles de Danny sur capture). (1) Badge auteur :
 *             « ⚡ OFFGRID.QC » doublait le nom d'affichage (qui EST OFFGRID.QC) → éclair seul + nom
 *             de l'auteur en vert accent. (2) Compagnon de comments.php V1.0 (nouveau template qui
 *             remplace le markup legacy theme-compat — les cartes .comment-list matchent désormais).
 *             Backup blog.css.bak.v1.
 * @changelog  V1.0: Création initiale — CHANTIER BLOGUE/VLOG. Namespace .blog- (déclaré avant
 *             codage, règle CLAUDE.md). Chargé UNIQUEMENT sur is_home + is_single (enqueue
 *             conditionnel functions.php V3.15.0 — Règle N°5 Lighthouse). Couvre : héro de la
 *             page Blogue, grille de cartes (image à la une, badge catégorie, extrait),
 *             pagination WP native, typographie d'article (titres, listes, tableaux, citations,
 *             images, iframes vidéo responsives pour le volet VLOG), navigation article
 *             précédent-suivant, et commentaires WordPress natifs (liste + réponses imbriquées
 *             + formulaire) au look du site. Glow néon statique recette accueil V14.28, zéro
 *             animation (Règle N°5). Avatars masqués aussi par CSS (ceinture + bretelles avec
 *             le réglage Discussion décoché — zéro requête Gravatar externe).
 */

/* ══════════════════════════════════════════════
   VARIABLES LOCALES
══════════════════════════════════════════════ */

:root {
    --blog-accent:      #00ff88;
    --blog-accent-dim:  rgba(0, 255, 136, 0.12);
    --blog-bg:          #0a0a0a;
    --blog-card:        #1a1a1a;
    --blog-border:      #2a2a2a;
    --blog-text:        #d0d0d0;
    --blog-muted:       #aaa;
    --blog-radius:      12px;
}

/* ══════════════════════════════════════════════
   SECTION DE BASE (partagée liste + article)
══════════════════════════════════════════════ */

.blog-section {
    background: var(--blog-bg);
    padding: 4rem 2rem;
}

.blog-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════
   HÉRO — page Blogue (liste)
══════════════════════════════════════════════ */

.blog-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.blog-hero-badge {
    display: inline-block;
    border: 1px solid var(--blog-accent);
    background: var(--blog-accent-dim);
    color: var(--blog-accent);
    border-radius: 100px;
    padding: 0.25rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.blog-hero-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 1rem;
    /* GLOW néon statique — recette accueil V14.28, zéro animation */
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.8),
      0 0 5px rgba(0, 255, 136, 0.35),
      0 0 10px rgba(0, 255, 136, 0.25),
      0 0 20px rgba(0, 255, 136, 0.12);
}

.blog-hero-intro {
    color: var(--blog-muted);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ══════════════════════════════════════════════
   GRILLE DE CARTES (liste des articles)
══════════════════════════════════════════════ */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.blog-card {
    background: var(--blog-card);
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.blog-card:hover {
    border-color: var(--blog-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 255, 136, 0.1);
}

.blog-card-thumb {
    display: block;
    line-height: 0;
}

.blog-card-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.blog-card-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    font-size: 3rem;
    background: linear-gradient(135deg, #101810 0%, #0a0a0a 100%);
    border-bottom: 1px solid var(--blog-border);
}

.blog-card-body {
    padding: 1.25rem 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.blog-cat-badge {
    display: inline-block;
    background: var(--blog-accent-dim);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: var(--blog-accent);
    border-radius: 100px;
    padding: 0.12rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blog-card-date {
    color: var(--blog-muted);
    font-size: 0.8rem;
}

.blog-card-title {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.blog-card-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-card-title a:hover {
    color: var(--blog-accent);
    text-decoration: none;
}

.blog-card-excerpt {
    color: var(--blog-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

.blog-card-more {
    color: var(--blog-accent);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    margin-top: 0.25rem;
}

.blog-card-more:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════
   PAGINATION (the_posts_pagination WP native)
══════════════════════════════════════════════ */

.blog-pagination {
    margin-top: 3rem;
    text-align: center;
}

.blog-pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.blog-pagination .page-numbers {
    display: inline-block;
    background: var(--blog-card);
    border: 1px solid var(--blog-border);
    color: var(--blog-muted);
    border-radius: 8px;
    padding: 0.5rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.blog-pagination a.page-numbers:hover {
    border-color: var(--blog-accent);
    color: var(--blog-accent);
    text-decoration: none;
}

.blog-pagination .page-numbers.current {
    background: var(--blog-accent-dim);
    border-color: var(--blog-accent);
    color: var(--blog-accent);
}

.blog-pagination .page-numbers.dots {
    border: none;
    background: none;
}

/* ══════════════════════════════════════════════
   ARTICLE (single.php)
══════════════════════════════════════════════ */

.blog-article {
    max-width: 820px;
    margin: 0 auto;
}

.blog-article-header {
    text-align: center;
    margin-bottom: 2.25rem;
}

.blog-article-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.blog-article-date {
    color: var(--blog-muted);
    font-size: 0.85rem;
}

.blog-article-title {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    /* GLOW néon statique — recette accueil V14.28, zéro animation */
    text-shadow:
      0 0 2px rgba(255, 255, 255, 0.8),
      0 0 5px rgba(0, 255, 136, 0.35),
      0 0 10px rgba(0, 255, 136, 0.25),
      0 0 20px rgba(0, 255, 136, 0.12);
}

.blog-article-thumb img {
    width: 100%;
    height: auto;
    border-radius: var(--blog-radius);
    display: block;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ── Typographie du contenu (blocs Gutenberg simples) ── */

.blog-article-content {
    color: var(--blog-text);
    font-size: 1rem;
    line-height: 1.75;
}

.blog-article-content p {
    margin: 0.9rem 0;
}

.blog-article-content h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(0, 255, 136, 0.35);
}

.blog-article-content h3 {
    color: var(--blog-accent);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 1.75rem 0 0.6rem;
}

.blog-article-content h4 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
}

.blog-article-content ul,
.blog-article-content ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

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

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

.blog-article-content strong {
    color: #fff;
}

.blog-article-content blockquote {
    background: var(--blog-card);
    border-left: 3px solid var(--blog-accent);
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    font-style: italic;
}

.blog-article-content blockquote p {
    margin: 0.4rem 0;
}

.blog-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.blog-article-content figure {
    margin: 1.5rem 0;
}

.blog-article-content figcaption {
    color: var(--blog-muted);
    font-size: 0.85rem;
    text-align: center;
    margin-top: 0.5rem;
}

.blog-article-content hr {
    border: none;
    border-top: 1px solid var(--blog-border);
    margin: 2.25rem 0;
}

.blog-article-content code {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-size: 0.88em;
    color: var(--blog-accent);
}

/* Tableaux (bloc Tableau Gutenberg = figure.wp-block-table > table) */
.blog-article-content .wp-block-table {
    overflow-x: auto;
}

.blog-article-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 420px;
}

.blog-article-content th {
    background: var(--blog-card);
    color: var(--blog-accent);
    text-align: left;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--blog-border);
    font-weight: 700;
}

.blog-article-content td {
    color: var(--blog-text);
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--blog-border);
}

/* Vidéos intégrées (volet VLOG — bloc Embed YouTube etc.) : responsive 16:9 */
.blog-article-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
}

.blog-article-content .wp-block-embed {
    margin: 1.5rem 0;
}

/* ── Navigation article précédent / suivant (the_post_navigation) ── */

.blog-post-nav {
    margin-top: 3rem;
}

.blog-post-nav .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.blog-post-nav .nav-previous a,
.blog-post-nav .nav-next a {
    display: inline-block;
    background: var(--blog-card);
    border: 1px solid var(--blog-border);
    border-radius: 8px;
    color: var(--blog-muted);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.7rem 1.1rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.blog-post-nav .nav-previous a:hover,
.blog-post-nav .nav-next a:hover {
    border-color: var(--blog-accent);
    color: var(--blog-accent);
    text-decoration: none;
}

/* ══════════════════════════════════════════════
   COMMENTAIRES (WordPress natif — wp_list_comments + comment_form)
══════════════════════════════════════════════ */

.blog-comments {
    max-width: 820px;
    margin: 3.5rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid var(--blog-border);
}

.blog-comments .comments-title,
.blog-comments .comment-reply-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 1.5rem;
}

.blog-comments .comment-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.blog-comments .comment-list .comment {
    background: var(--blog-card);
    border: 1px solid var(--blog-border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.9rem;
}

/* Réponses imbriquées (fils de discussion) */
.blog-comments .comment-list .children {
    list-style: none;
    margin: 0.9rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid rgba(0, 255, 136, 0.25);
}

/* Avatars désactivés dans Réglages Discussion — ceinture CSS en plus (zéro Gravatar externe) */
.blog-comments img.avatar {
    display: none;
}

.blog-comments .comment-author .fn {
    color: #fff;
    font-weight: 700;
    font-style: normal;
    font-size: 0.95rem;
}

.blog-comments .comment-metadata {
    margin-top: 0.1rem;
}

.blog-comments .comment-metadata a {
    color: var(--blog-muted);
    font-size: 0.78rem;
    text-decoration: none;
}

.blog-comments .comment-content {
    color: var(--blog-text);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-top: 0.5rem;
}

.blog-comments .comment-content p {
    margin: 0.5rem 0;
}

.blog-comments .comment-awaiting-moderation {
    color: #fbbf24;
    font-size: 0.82rem;
    font-style: italic;
}

.blog-comments .reply {
    margin-top: 0.5rem;
}

.blog-comments .reply a {
    color: var(--blog-accent);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.blog-comments .reply a:hover {
    text-decoration: underline;
}

/* Le badge « Auteur » (Danny) — WP pose la classe bypostauthor sur tes réponses.
   V1.1 : éclair seul — le nom d'affichage est déjà OFFGRID.QC (le texte doublait le nom). */
.blog-comments .bypostauthor > .comment-body .fn {
    color: var(--blog-accent);
}

.blog-comments .bypostauthor > .comment-body .fn::after {
    content: " ⚡";
}

/* ── Formulaire de commentaire ── */

.blog-comments .comment-respond {
    background: var(--blog-card);
    border: 1px solid var(--blog-border);
    border-radius: var(--blog-radius);
    padding: 1.5rem;
    margin-top: 2rem;
}

.blog-comments .comment-notes,
.blog-comments .logged-in-as {
    color: var(--blog-muted);
    font-size: 0.82rem;
    margin: 0 0 1rem;
}

.blog-comments .logged-in-as a {
    color: var(--blog-accent);
}

.blog-comments .comment-form label {
    display: block;
    color: var(--blog-muted);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.blog-comments .comment-form input[type="text"],
.blog-comments .comment-form input[type="email"],
.blog-comments .comment-form textarea {
    width: 100%;
    background: var(--blog-bg);
    border: 1px solid var(--blog-border);
    border-radius: 6px;
    color: #fff;
    font-size: 0.92rem;
    font-family: inherit;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

.blog-comments .comment-form input[type="text"]:focus,
.blog-comments .comment-form input[type="email"]:focus,
.blog-comments .comment-form textarea:focus {
    outline: none;
    border-color: var(--blog-accent);
}

.blog-comments .comment-form-cookies-consent {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.blog-comments .comment-form-cookies-consent input {
    flex-shrink: 0;
}

.blog-comments .comment-form-cookies-consent label {
    display: inline;
    font-weight: 400;
}

.blog-comments .form-submit {
    margin: 0.5rem 0 0;
}

.blog-comments .form-submit input[type="submit"] {
    background: var(--blog-accent);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 0.95rem;
    font-weight: 800;
    font-family: inherit;
    padding: 0.75rem 2rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.25);
}

.blog-comments .form-submit input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(0, 255, 136, 0.4);
}

/* Commentaires fermés (message WP) */
.blog-comments .no-comments {
    color: var(--blog-muted);
    font-size: 0.9rem;
    font-style: italic;
}

/* ══════════════════════════════════════════════
   MEDIA QUERIES — fin de fichier
══════════════════════════════════════════════ */

@media (max-width: 870px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .blog-section {
        padding: 3rem 1.25rem;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-post-nav .nav-links {
        flex-direction: column;
    }
    .blog-comments .comment-list .children {
        padding-left: 0.6rem;
    }
}

@media (max-width: 430px) {
    .blog-card-body {
        padding: 1rem 1rem 1.2rem;
    }
    .blog-comments .comment-respond {
        padding: 1.1rem;
    }
}