/* Discover Kyokushin — compléments à /styles.css (aucune variable redéfinie,
   aucun header/footer concurrent : on réutilise le système graphique du site). */

/* fil d'Ariane */
.crumbs{font-size:.72rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.crumbs a{color:#bcb6ae}
.crumbs a:hover{color:var(--red)}
.crumbs .sep{margin:0 .15rem;color:#5d5952}
.crumbs [aria-current]{color:#e7e2da}

/* corps d'article */
.article-shell{max-width:52rem;margin:0 auto;padding:4rem 1.4rem 5rem}
.article-shell h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:3rem 0 .9rem}
.article-shell h2 .n{color:var(--red);font-size:.68em;margin-right:.55rem}
.article-shell h3{font-size:1.4rem;margin:2rem 0 .6rem}
.article-shell p{color:#d2cdc6;font-size:1.02rem;line-height:1.85;margin-bottom:1.05rem}
/* styles.css remet toutes les marges à zéro (*{margin:0}) : sans cette règle,
   les paragraphes d'article se collent les uns aux autres. */
.article-shell .answer-box p,.article-shell .caveat p{margin-bottom:0}
.article-shell ul,.article-shell ol{color:#d2cdc6;line-height:1.8;padding-left:1.3rem;margin:.6rem 0}
.article-shell li{margin:.45rem 0}
.article-shell a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(225,6,0,.65)}
.article-shell a:hover{color:var(--red)}
.article-shell .btn{text-decoration:none;color:#fff}
.article-shell .btn-primary:hover{color:#0c0c0c}

/* encadré « réponse courte » */
.answer-box{background:linear-gradient(135deg,#181818,#111);border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:0 14px 14px 0;padding:1.3rem 1.5rem;margin:1.2rem 0 2rem}
.answer-box strong{color:#fff}

/* encadré d'appel (CTA en cours d'article) */
.article-cta{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem 1.9rem;margin:3rem 0 0}
.article-cta h2{margin-top:0}
.article-cta p{margin-bottom:1.2rem}

/* liens connexes */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.related a{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;
  color:#fff;font-size:.95rem;line-height:1.45;text-decoration:none;transition:.25s}
.related a:hover{border-color:var(--red);transform:translateY(-3px);color:#fff}

/* listes de guides sur les hubs de cluster */
.guide-list{list-style:none;display:grid;gap:.7rem;padding:0;margin:0}
.guide-list li{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:0 12px 12px 0;transition:.22s}
.guide-list li:hover{border-color:var(--red);transform:translateX(4px)}
.guide-list a{display:block;padding:1rem 1.3rem;color:#fff}
.guide-list a:hover{color:#fff}
.guide-list .resume{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem;line-height:1.5}

/* pastille d'état sur le hub principal */
.pillar.a-venir{opacity:.55}
.pillar .statut{display:inline-block;margin-top:.8rem;font-size:.7rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem}

/* NOTE : les styles du footer à 4 colonnes (.footer-grid-4 / .footer-links) sont
   dans /styles.css, car le footer enrichi apparaît aussi sur les pages officielles
   qui ne chargent pas cette feuille. */

@media(max-width:900px){.related{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.related{grid-template-columns:1fr}.article-shell{padding:2.5rem 1.4rem 3.5rem}}

/* ───────── ajouts pilote 2 ───────── */

/* encadré « ce que l'on ne sait pas » — limites, lacunes, incertitude assumée.
   Volontairement distinct de .answer-box : gris froid, pas de rouge. */
.caveat{background:#141414;border:1px solid var(--line);border-left:4px solid #5d5952;
  border-radius:0 14px 14px 0;padding:1.2rem 1.5rem;margin:1.6rem 0}
.caveat p{margin:0;color:#b9b4ad;font-size:.97rem}
.caveat strong{color:#e7e2da}

/* bloc de chiffres vérifiés (volume d'une séance, exigences de passage de grade) */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0}
.figures div{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1.2rem 1.1rem;text-align:center}
.figures b{display:block;font-family:'Bebas Neue',sans-serif;font-size:2.1rem;
  line-height:1;color:var(--red);letter-spacing:1px}
.figures span{display:block;margin-top:.5rem;color:var(--muted);font-size:.86rem;line-height:1.45}

@media(max-width:600px){.figures{grid-template-columns:1fr}}


/* ── v3 · Mots longs dans les titres d'affichage ───────────────────────────
   Mesuré au navigateur : à 390 px, le H1 « Le conditionnement du corps »
   débordait de 119 px, le débordement tenant entièrement à un mot que rien
   ne peut couper. Le français en compte beaucoup — conditionnement,
   perfectionnement, personnelle — et le problème reviendra à chaque nouvel
   article. La césure de dernier recours le règle une fois pour toutes, dans
   les deux langues. Rien d'autre n'est touché. */
.page-hero h1,
.article-shell h2,
.section-title{overflow-wrap:break-word}