/* BLOG (live_pages/blog/). Charge APRES sport.css, dont il reprend la nav (.sp-nav) et l'eyebrow.
   Tout est prefixe .bl- : ces pages partagent leur CSS avec la vitrine et les pages sport, un
   selecteur generique baverait dans les deux sens (voir CLAUDE.md, piege landing.css). */

/* ---- Entete de l'index -------------------------------------------------------------------- */
.bl-tete{background:var(--surface);border-bottom:1px solid var(--border);padding:52px 0 44px;}
.bl-tete h1{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(28px,5vw,44px);
  line-height:1.08;margin:0 0 16px;color:var(--text);}
.bl-tete-txt{font-size:16px;line-height:1.6;color:var(--muted);max-width:62ch;margin:0;}

/* ---- Liste des articles ------------------------------------------------------------------- */
.bl-liste{display:grid;gap:18px;padding:44px 24px 64px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.bl-carte{display:flex;flex-direction:column;gap:10px;padding:22px;text-decoration:none;
  background:var(--bg);border:1px solid var(--border);border-radius:14px;transition:border-color .15s;}
.bl-carte:hover{border-color:var(--flag);}
.bl-rub{font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--flag);}
.bl-carte h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:19px;line-height:1.2;
  margin:0;color:var(--text);}
.bl-carte p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;flex:1;}
.bl-carte-pied{font-size:12.5px;color:var(--muted-soft);}

/* ---- Article ------------------------------------------------------------------------------ */
.bl-art-in{max-width:760px;padding:36px 24px 72px;}
.bl-fil{font-size:13px;color:var(--muted);margin:0 0 18px;}
.bl-fil a{color:var(--flag);text-decoration:none;}
.bl-fil span{margin:0 6px;color:var(--muted-soft);}
.bl-art h1{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:clamp(26px,4.6vw,40px);
  line-height:1.1;margin:0 0 18px;color:var(--text);}
.bl-chapo{font-size:18px;line-height:1.55;color:var(--text);margin:0 0 14px;}
.bl-meta{font-size:13px;color:var(--muted-soft);margin:0 0 30px;
  padding-bottom:22px;border-bottom:1px solid var(--border);}

/* Sommaire */
.bl-somm{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:18px 22px;margin:0 0 34px;}
.bl-somm p{font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.bl-somm ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.bl-somm a{font-size:14.5px;color:var(--text);text-decoration:none;}
.bl-somm a:hover{color:var(--flag);}

/* Corps : c'est la partie qui se lit longtemps, elle prime sur tout le reste. */
.bl-corps{font-size:16.5px;line-height:1.7;color:var(--text);}
.bl-corps h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:24px;line-height:1.2;
  margin:44px 0 16px;color:var(--text);scroll-margin-top:80px;}
.bl-corps h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:18px;
  margin:30px 0 10px;color:var(--text);scroll-margin-top:80px;}
.bl-corps p{margin:0 0 18px;}
.bl-corps ul,.bl-corps ol{margin:0 0 20px;padding-left:22px;display:flex;flex-direction:column;gap:9px;}
.bl-corps li{line-height:1.65;}
.bl-corps a{color:var(--flag);}
.bl-note{background:var(--surface);border-left:3px solid var(--flag);border-radius:0 10px 10px 0;
  padding:16px 20px;margin:0 0 22px;font-size:15.5px;line-height:1.6;color:var(--text);}
.bl-cite{border-left:3px solid var(--border);margin:0 0 22px;padding:4px 0 4px 20px;
  font-style:italic;color:var(--muted);}

/* Questions frequentes */
.bl-faq{margin:52px 0 0;padding-top:34px;border-top:1px solid var(--border);}
.bl-faq h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:24px;margin:0 0 22px;
  color:var(--text);scroll-margin-top:80px;}
.bl-qa{margin:0 0 22px;}
.bl-qa h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:16px;margin:0 0 8px;
  color:var(--text);}
.bl-qa p{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0;}
.bl-qa a{color:var(--flag);}

.bl-sports{font-size:14px;color:var(--muted);margin:34px 0 0;}
.bl-sports a{color:var(--flag);text-decoration:none;}
.bl-sports a:hover{text-decoration:underline;}

/* A lire ensuite */
.bl-suite{margin:48px 0 0;padding-top:32px;border-top:1px solid var(--border);}
.bl-suite h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:20px;margin:0 0 18px;
  color:var(--text);}
.bl-suite-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.bl-suite-c{display:flex;flex-direction:column;gap:6px;padding:16px 18px;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color .15s;}
.bl-suite-c:hover{border-color:var(--flag);}
.bl-suite-c span{font-family:'Oswald',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--flag);}
.bl-suite-c b{font-size:15px;line-height:1.3;color:var(--text);font-weight:600;}

/* Appel a l'action : sombre, comme les bandes de la vitrine. */
.bl-cta{margin:48px 0 0;padding:34px 30px;border-radius:16px;background:var(--ink);text-align:center;}
.bl-cta h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:22px;margin:0 0 12px;
  color:#fff;}
.bl-cta p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 auto 22px;max-width:52ch;}
.bl-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---- Pied ---------------------------------------------------------------------------------- */
.bl-pied{background:var(--surface);border-top:1px solid var(--border);padding:34px 0;}
.bl-pied-in{max-width:760px;padding:0 24px;}
.bl-pied p{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 12px;}
.bl-pied a{color:var(--flag);text-decoration:none;}
.bl-pied-liens{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;margin:0;}

@media (min-width:760px){
  .bl-art-in{padding:48px 24px 84px;}
  .bl-corps{font-size:17px;}
}

/* ---- Images (ajoutees 19.08) ---------------------------------------------------------------
   width/height sont declares dans le HTML pour que la page ne saute pas au chargement (c'est ce
   que mesure le Cumulative Layout Shift) ; le CSS reprend la main sur la taille affichee. */
.bl-hero{width:100%;height:auto;display:block;border-radius:14px;margin:0 0 30px;
  background:var(--surface);}

/* La carte n'a plus de padding : l'image occupe toute sa largeur, le texte a son propre bloc. */
.bl-carte{padding:0;overflow:hidden;gap:0;}
.bl-vign{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  background:var(--surface);}
.bl-carte-txt{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1;}

/* Document a copier (modele d'autorisation) : aspect papier, pas citation. */
.bl-doc{background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:26px 28px;margin:0 0 24px;font-size:15px;line-height:1.75;color:var(--text);}
.bl-doc b{display:inline-block;margin-top:2px;}