/*
Theme Name: KomaK
Theme URI: https://komak.example
Author: Association KomaK
Description: Thème sur mesure pour l'association KomaK (Jeunesse & Insertion / Culturel & Convivial).
Version: 1.0
Text Domain: komak
*/

:root{
  --wine:#6B1F2A;
  --wine-dark:#4A1319;
  --gold:#C9A15A;
  --cream:#F6F0E4;
  --ink:#2B2320;
  --paper:#FBF8F2;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
}

h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  margin:0 0 .4em 0;
  color:var(--wine-dark);
}

a{ color:var(--wine); }

.frame-top{
  height:10px; width:100%;
  background:
    repeating-linear-gradient(135deg, var(--gold) 0 8px, transparent 8px 16px),
    var(--wine);
  background-size: 22px 10px, 100% 10px;
}

.site-header{
  padding:28px 6vw 18px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  border-bottom:1px solid rgba(43,35,32,.15);
}
.site-logo{ font-family:'Fraunces', serif; font-size:1.6rem; font-weight:600; color:var(--wine-dark); text-decoration:none; }
.site-logo span{ color:var(--gold); }

.site-nav ul{ list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.site-nav a{ text-decoration:none; color:var(--ink); font-size:.95rem; }
.site-nav a:hover{ color:var(--wine); }

.site-main{ max-width:820px; margin:0 auto; padding:60px 6vw 100px; }

.eyebrow{
  color:var(--wine); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:600; margin-bottom:10px;
}

.cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
@media(max-width:600px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:var(--paper); border:1px solid rgba(107,31,42,.15);
  padding:28px 24px; position:relative; overflow:hidden; text-decoration:none; display:block;
  transition:.2s;
}
.card:hover{ border-color:var(--wine); transform:translateY(-2px); box-shadow:0 10px 24px rgba(43,35,32,.08); }
.card::before{ content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--gold); }
.card h3{ font-size:1.15rem; }
.card p{ margin:8px 0 0; font-size:.92rem; color:#5c5148; }

.btn{
  display:inline-block; margin-top:22px; padding:13px 30px;
  background:var(--wine); color:var(--paper); text-decoration:none;
  font-family:'Jost', Arial, sans-serif; font-weight:500; letter-spacing:.03em; font-size:.92rem;
  border:none; cursor:pointer; border-radius:1px; transition:.2s;
}
.btn:hover{ background:var(--wine-dark); color:var(--paper); }

.support-strip{
  margin-top:44px; padding:22px 26px; background:var(--wine-dark); color:var(--cream);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.support-strip .btn{ background:var(--gold); color:var(--wine-dark); }
.support-strip .btn:hover{ background:#dab472; }

form.komak-form{ margin-top:30px; display:grid; gap:16px; max-width:440px; }
form.komak-form label{ font-size:.82rem; color:#5c5148; display:block; margin-bottom:5px; }
form.komak-form input,
form.komak-form select,
form.komak-form textarea{
  width:100%; padding:11px 12px; border:1px solid rgba(43,35,32,.25); background:var(--paper);
  font-family:'Jost', Arial, sans-serif; font-size:.95rem;
}
form.komak-form textarea{ resize:vertical; min-height:90px; }

.komak-confirm{
  margin-top:20px; padding:16px 18px; background:#eef4ea; border:1px solid #b9d3ac; color:#33511f; font-size:.9rem;
}
.komak-error{
  margin-top:20px; padding:16px 18px; background:#f8eaea; border:1px solid #d9b3b3; color:#7a2626; font-size:.9rem;
}

.agenda-item{ display:flex; gap:20px; padding:18px 0; border-bottom:1px solid rgba(43,35,32,.12); }
.agenda-date{ font-family:'Fraunces', serif; font-weight:600; color:var(--wine); min-width:110px; font-size:1.05rem; }
.agenda-desc h4{ margin:0 0 4px; font-size:1rem; font-family:'Jost', Arial, sans-serif; font-weight:600; color:var(--ink); }
.agenda-desc p{ margin:0; font-size:.9rem; color:#5c5148; }

.site-footer{ text-align:center; padding:30px; color:#8a7d70; font-size:.8rem; }