/* Section actualités à la charte (05/08, GO client) : index du blog, puis
   rubriques et articles au fil des incréments de migration. Cette feuille
   complète agent.css (reset, header, palette :root) et listing.css
   (.page-hero), chargées avant elle par les vues. Les cartes descendent de
   la grammaire des actus de la home, densifiées en carte blanche complète
   (visuel, rubrique, chapo, méta) pour un listing paginé. */

  .blog-page { background: var(--bg); }

  /* ========== GRILLE DES ARTICLES ========== */
  .articles-zone { padding: 44px 40px 60px; }
  .articles-wrap { max-width: 1200px; margin: 0 auto; }

  .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .carte-article {
    display: flex; flex-direction: column;
    background: var(--white);
    border: 1px solid #eee; border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .carte-article:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(26, 26, 46, 0.10); }

  .ca-thumb { height: 180px; }
  .ca-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Repli des articles sans visuel : dégradé aux tons de la marque, jamais
     de cadre vide. */
  .ca-degrade { width: 100%; height: 100%; background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 55%, var(--coral) 130%); }

  .ca-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
  .ca-rubrique {
    align-self: flex-start;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--coral-dark); background: var(--coral-light);
    padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
  }
  .ca-titre { font-family: 'DM Sans', sans-serif; font-size: 1.02rem; font-weight: 700; color: var(--dark); line-height: 1.35; margin: 0 0 8px; }
  .ca-chapo { font-size: 0.85rem; color: var(--text-light); line-height: 1.55; flex: 1; margin: 0 0 14px; }
  .ca-meta { font-size: 0.72rem; color: var(--text-light); letter-spacing: 0.3px; }

  .articles-vide { color: var(--text-light); font-size: 0.95rem; }

  /* ========== PAGINATION ========== */
  /* Rendue par public/partials/pagination.blade.php ; invisible tant que la
     neuvième page d'articles n'existe pas ($paginator->hasPages()). */
  .pagination-charte { display: flex; justify-content: center; gap: 6px; margin-top: 36px; }
  .pg-btn {
    min-width: 38px; height: 38px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid #e5e5e5; background: var(--white);
    font-size: 0.82rem; font-weight: 600; color: var(--text);
    text-decoration: none; transition: border-color 0.15s, color 0.15s;
  }
  .pg-btn:hover { border-color: var(--coral); color: var(--coral-dark); }
  .pg-actif { background: var(--coral); border-color: var(--coral); color: var(--white); }
  .pg-inactif { opacity: 0.35; pointer-events: none; }
  .pg-points { border: none; background: none; }

  @media (max-width: 1024px) {
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .articles-zone { padding: 32px 20px 48px; }
    .articles-grid { grid-template-columns: 1fr; }
  }

  /* ========== PAGE ARTICLE (05/08) ==========
     L'article reprend la grammaire des guides (guide.css chargée avant) :
     hero sombre réduit au seul H1 (décision client) et sommaire collant,
     mais INVERSÉ, article à gauche et sommaire à droite. L'inversion est
     bornée au-dessus du breakpoint des guides : en dessous de 1024 px,
     guide.css repasse en une colonne et masque le sommaire. */
  @media (min-width: 1025px) {
    .blog-page .layout { grid-template-columns: 1fr 250px; }
  }
  /* Article sans chapitres : pas de sommaire, la colonne de lecture se
     centre seule. */
  .blog-page .layout-plein { display: block; }
  .blog-page .layout-plein .content { margin: 0 auto; }

  /* Images du WYSIWYG : l'import WordPress fixe width/height EN DUR (jusqu'à
     1024 px), plus large que la colonne : elles débordaient (constat client
     05/08 sur « Optimiser son PC »). Bornées à la colonne, hauteur
     recalculée, et le cadre des figures des guides pour les img posées nues
     dans la prose (guide.css ne couvre que .content figure img). */
  .blog-page .content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid #ececec;
    background: var(--white);
  }

  /* Même hauteur que le hero de souris-valorant (~320 px, la somme de ses
     éléments : fil d'Ariane, label, H1, lede, pastilles). L'article n'ayant
     que trois de ces éléments, le fil d'Ariane reste en tête et le bloc
     H1 + rubrique se centre dans l'espace restant. */
  .article-hero .hero-inner { min-height: 320px; display: flex; flex-direction: column; align-items: flex-start; }
  .article-hero h1 { font-size: 2.5rem; margin-bottom: 0; max-width: 900px; margin-top: auto; }
  .article-hero h1:last-child { margin-bottom: auto; }
  .article-hero .hero-rubrique { margin-bottom: auto; }

  /* La rubrique dans le hero : la grammaire des pastilles hero-meta des
     guides, le cercle de couleur remplaçant l'emoji (décision client 05/08). */
  .article-hero .hero-rubrique {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 8px;
    font-size: 0.7rem; font-weight: 600; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.55);
    text-decoration: none; margin-top: 20px; transition: color 0.2s, border-color 0.2s;
  }
  .article-hero .hero-rubrique:hover { color: rgba(255,255,255,0.9); border-color: rgba(232,99,126,0.5); }
  .hr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }

  .blog-page .content .article-chapo { font-size: 1.02rem; color: var(--text); line-height: 1.7; }
  .article-meta { font-size: 0.78rem; color: var(--text-light); margin-bottom: 22px; }

  /* FAQ de l'article : réponses visibles, sans accordéon, la doctrine des
     guides (décision client sur souris-valorant). */
  .blog-page .faq { display: grid; gap: 14px; margin-top: 20px; }
  .blog-page .qa { background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 22px 24px; transition: box-shadow 0.22s; }
  .blog-page .qa:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
  .blog-page .content .qa h3 { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.4; }

  /* Encart rédacteur E-E-A-T : version charte de l'ancien author-box
     Bootstrap. Les liens n'héritent pas du soulignement corail des liens
     de contenu. */
  .encart-auteur { display: flex; gap: 20px; align-items: flex-start; background: var(--white); border: 1px solid #ececec; border-radius: 14px; padding: 24px; margin-top: 40px; }
  .encart-auteur img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .ea-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-light); margin-bottom: 4px; }
  .ea-nom { font-size: 1rem; font-weight: 700; }
  .blog-page .content .ea-nom a { color: var(--dark); border-bottom: none; }
  .blog-page .content .ea-nom a:hover { color: var(--coral-dark); background: none; }
  .ea-fonction { color: var(--coral-dark); font-size: 0.78rem; font-weight: 600; margin-bottom: 8px; }
  .blog-page .content .ea-bio { font-size: 0.83rem; }
  .blog-page .content .ea-bio p { font-size: 0.83rem; line-height: 1.7; margin-bottom: 8px; }
  .ea-liens { display: flex; gap: 8px; margin-top: 10px; }
  .blog-page .content .ea-liens a { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e5e5e5; display: inline-flex; align-items: center; justify-content: center; color: var(--text-light); transition: all 0.2s; }
  .blog-page .content .ea-liens a:hover { color: var(--coral-dark); border-color: var(--coral); background: var(--coral-light); }

  /* « À lire aussi » : les cartes de l'index, sous la colonne de lecture. */
  .lire-aussi { padding-top: 0; }
  .lire-aussi-titre { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 1.5px; color: var(--dark); margin-bottom: 18px; }

  @media (max-width: 640px) {
    .article-hero h1 { font-size: 1.9rem; }
    .encart-auteur { flex-direction: column; align-items: center; text-align: center; }
    .ea-liens { justify-content: center; }
  }