/*
Theme Name:   Astra Child — KC Chautagne
Theme URI:    https://kc-chautagne.fr
Description:  Thème enfant Astra pour le Karaté Club de Chautagne
Author:       KC Chautagne
Template:     astra
Version:      1.0.0
*/

/* ─── VARIABLES ─────────────────────────────────────── */
:root {
  --ink:     #15120F;
  --charcoal:#241F1B;
  --chalk:   #F6F2EA;
  --accent:  #1E5FD8;
  --stone:   #8C8478;
  --line:    rgba(246,242,234,0.14);
  --line-light: #ddd6c8;
}

/* ─── RESET & BASE ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--chalk);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.kc-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── EYEBROW ────────────────────────────────────────── */
.kc-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 12px;
}

/* ─── NAV ASTRA — surcharge ──────────────────────────── */
.ast-primary-header-bar,
#masthead {
  background: var(--ink) !important;
  border-bottom: 1px solid var(--line) !important;
}

.site-title a,
.ast-header-logo-anchor {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.4rem !important;
  color: var(--chalk) !important;
  letter-spacing: 0.03em !important;
}

.main-navigation a,
.ast-primary-nav > li > a {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--chalk) !important;
  opacity: 0.75;
  transition: opacity .2s;
}

.main-navigation a:hover,
.ast-primary-nav > li > a:hover,
.main-navigation .current-menu-item > a {
  opacity: 1;
  color: var(--accent) !important;
}

/* ─── PAGE HEADER (pages intérieures) ───────────────── */
.kc-page-header {
  background: var(--ink);
  color: var(--chalk);
  padding: 60px 0 48px;
}

.kc-page-header h1 {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  color: var(--chalk);
  margin-bottom: 12px;
}

.kc-page-header .lede {
  color: var(--stone);
  font-size: 0.95rem;
  max-width: 480px;
  margin-top: 12px;
}

/* ─── HERO ACCUEIL ───────────────────────────────────── */
.kc-hero {
  background: var(--ink);
  color: var(--chalk);
  padding: 60px 0 0;
  position: relative;
  overflow: hidden;
}

.kc-hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.kc-hero h1 {
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--chalk);
  margin-bottom: 18px;
}

.kc-hero .lede {
  color: var(--stone);
  font-size: 0.95rem;
  max-width: 420px;
  margin-bottom: 28px;
  line-height: 1.65;
}

.kc-hero-logo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(30,95,216,0.35);
}

.kc-hero-logo img { width: 100%; height: 100%; object-fit: cover; }

.kc-strike {
  height: 52px;
  width: 100%;
  background: var(--accent);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  margin-top: 44px;
}

.kc-link-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ─── STATS STRIP ────────────────────────────────────── */
.kc-stats {
  background: var(--charcoal);
  color: var(--chalk);
  padding: 28px 0;
}

.kc-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.kc-stat {
  border-left: 1px solid var(--line);
  padding: 0 24px;
}

.kc-stat:first-child { border-left: none; padding-left: 0; }

.kc-stat b {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--accent);
  display: block;
}

.kc-stat span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--stone);
}

/* ─── SECTIONS GÉNÉRIQUES ────────────────────────────── */
.kc-section { padding: 60px 0; }
.kc-section-dark {
  background: var(--ink);
  color: var(--chalk);
  padding: 60px 0;
}

.kc-section h2, .kc-section-dark h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 28px;
}

.kc-section-dark h2 { color: var(--chalk); }

/* ─── GRILLE TEXTE ───────────────────────────────────── */
.kc-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}

.kc-text-grid p { color: #4a443d; font-size: 0.95rem; line-height: 1.7; }

/* ─── GRILLE PHOTOS ──────────────────────────────────── */
.kc-photo-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.kc-photo-grid .kc-photo-main { aspect-ratio: 4/3; }
.kc-photo-col { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }

.kc-photo-placeholder {
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--stone);
  letter-spacing: 0.08em;
  min-height: 140px;
}

.kc-photo-grid img,
.kc-photo-placeholder { width: 100%; height: 100%; object-fit: cover; }

/* ─── TARIFS ─────────────────────────────────────────── */
.kc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 32px;
}

.kc-card { background: var(--ink); padding: 28px; }
.kc-card h3 { font-size: 1.8rem; color: var(--chalk); margin-bottom: 4px; }

.kc-age {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  display: block;
}

.kc-sched {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: #cfc9be;
}

.kc-sched:last-of-type { border-bottom: none; }

.kc-price {
  margin-top: 18px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: var(--chalk);
}

.kc-price span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: var(--stone);
}

/* ─── INFOS PRATIQUES ────────────────────────────────── */
.kc-infos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.kc-info-box { border: 1px solid var(--line-light); padding: 22px; }
.kc-info-box .kc-eyebrow { color: var(--accent); margin-bottom: 10px; }
.kc-info-box p { color: #4a443d; font-size: 0.88rem; line-height: 1.55; }

/* ─── CONTACT ROW ────────────────────────────────────── */
.kc-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--line-light);
  margin-top: 40px;
  padding-top: 32px;
}

.kc-contact-row p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: #4a443d;
  line-height: 1.7;
}

/* ─── CTA BUTTON ─────────────────────────────────────── */
.kc-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--chalk);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 22px;
  text-decoration: none;
  transition: background .2s;
  border: none;
  cursor: pointer;
}

.kc-btn:hover { background: #1748ab; color: var(--chalk); text-decoration: none; }

/* ─── CTA BANNER ─────────────────────────────────────── */
.kc-cta-banner {
  background: var(--ink);
  color: var(--chalk);
  padding: 44px 0;
  display: flex;
  align-items: center;
}

.kc-cta-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.kc-cta-banner p { color: var(--stone); font-size: 0.95rem; margin-top: 4px; }

/* ─── INSTRUCTEURS ───────────────────────────────────── */
.kc-instr-list {
  border: 1px solid var(--line);
}

.kc-instr-card {
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.kc-instr-card:last-child { border-bottom: none; }

.kc-instr-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
}

.kc-instr-photo {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  overflow: hidden;
  background: #1c1815;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.55rem;
  color: var(--stone);
}

.kc-instr-photo img { width: 100%; height: 100%; object-fit: cover; }

.kc-instr-meta { flex: 1; }

.kc-instr-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem;
  color: var(--chalk);
  line-height: 1;
  margin-bottom: 6px;
}

.kc-instr-role { color: var(--stone); font-size: 0.82rem; }

.kc-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--chalk);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  text-transform: uppercase;
  margin-right: 8px;
}

.kc-badge-outline {
  display: inline-block;
  border: 1px solid rgba(246,242,234,0.3);
  color: var(--stone);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  text-transform: uppercase;
  margin-right: 8px;
}

.kc-instr-toggle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--accent);
  transition: transform .25s;
}

.kc-instr-bio {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 24px;
}

.kc-instr-bio.open {
  max-height: 300px;
  padding: 0 24px 24px;
}

.kc-instr-bio p {
  color: var(--stone);
  font-size: 0.88rem;
  line-height: 1.7;
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

/* ─── BUREAU ─────────────────────────────────────────── */
.kc-bureau-list { border-top: 1px solid var(--line-light); }

.kc-bureau-row {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-light);
  gap: 24px;
}

.kc-bureau-role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 120px;
  flex-shrink: 0;
}

.kc-bureau-name { font-size: 1.05rem; font-weight: 600; }

/* ─── ACTUALITÉS ─────────────────────────────────────── */
.kc-actu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  margin-top: 16px;
}

.kc-actu-card { background: var(--chalk); }

.kc-actu-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d5cfc6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: var(--stone);
}

.kc-actu-img img { width: 100%; height: 100%; object-fit: cover; }

.kc-actu-body { padding: 20px; }

.kc-actu-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}

.kc-actu-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.05;
}

.kc-actu-title a { color: var(--ink); }
.kc-actu-title a:hover { color: var(--accent); text-decoration: none; }

.kc-actu-excerpt { font-size: 0.85rem; color: #4a443d; line-height: 1.6; margin-bottom: 14px; }

.kc-actu-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: var(--stone);
}

/* ─── ARTICLE SEUL ───────────────────────────────────── */
.kc-article-header {
  background: var(--ink);
  color: var(--chalk);
  padding: 52px 0 44px;
}

.kc-article-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--chalk);
  margin-bottom: 14px;
}

.kc-article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px 32px;
  font-size: 1rem;
  line-height: 1.75;
  color: #2a2520;
}

.kc-article-body p { margin-bottom: 1.2rem; }
.kc-article-body h2 { font-size: 2rem; margin: 2rem 0 1rem; }
.kc-article-body img { margin: 2rem 0; }

.kc-article-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 10px 16px;
  text-transform: uppercase;
}

.kc-article-link:hover { background: var(--accent); color: var(--chalk); text-decoration: none; }

/* ─── FOOTER ─────────────────────────────────────────── */
#colophon, .site-footer {
  background: var(--charcoal) !important;
  color: var(--stone) !important;
  padding: 32px 0 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 0.75rem !important;
}

.kc-footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 820px) {
  .kc-text-grid,
  .kc-cards,
  .kc-infos-grid,
  .kc-actu-grid { grid-template-columns: 1fr; }

  .kc-stats-grid { grid-template-columns: 1fr 1fr; row-gap: 20px; }

  .kc-photo-grid { grid-template-columns: 1fr; }
  .kc-photo-col { grid-template-rows: auto; }

  .kc-hero-logo { display: none; }

  .kc-cta-banner-inner { flex-direction: column; align-items: flex-start; }
}
/* ─── DERNIÈRE ACTU ──────────────────────────────────── */
.kc-last-actu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 24px;
}
.kc-last-actu-img { aspect-ratio: 16/9; overflow: hidden; }
.kc-last-actu-img img { width: 100%; height: 100%; object-fit: cover; }
.kc-last-actu-body h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem; color: var(--chalk);
  margin-bottom: 14px; line-height: 1;
}
.kc-last-actu-body h3 a { color: var(--chalk); }
.kc-last-actu-body h3 a:hover { color: var(--accent); text-decoration: none; }
.kc-last-actu-body p { color: var(--stone); font-size: 0.95rem; line-height: 1.65; margin-bottom: 20px; }
@media (max-width: 820px) { .kc-last-actu { grid-template-columns: 1fr; } }