/* MK Boost — feuille de style principale */
:root{
  --bg:#0f1115; --surface:#171a21; --surface-2:#1e222b; --line:#2a2f3a;
  --text:#eef1f6; --muted:#9aa3b2; --accent:#e63946; --accent-2:#ff6b6b;
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{color:var(--accent-2)}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,17,21,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; gap:20px; height:68px}
.logo{font-size:1.5rem; font-weight:800; letter-spacing:-.5px; white-space:nowrap}
.logo span{color:var(--accent)}
.main-nav{margin-left:auto; display:flex; gap:6px; align-items:center}
.main-nav a{
  padding:8px 12px; border-radius:8px; font-size:.95rem; color:var(--muted);
  transition:.15s;
}
.main-nav a:hover,.main-nav a.active{color:var(--text); background:var(--surface-2)}
.search-form{display:flex; align-items:center; gap:8px}
.search-form input{
  background:var(--surface-2); border:1px solid var(--line); color:var(--text);
  padding:9px 14px; border-radius:999px; width:200px; font-size:.9rem; outline:none;
}
.search-form input:focus{border-color:var(--accent)}
.search-form button{
  background:var(--accent); color:#fff; border:0; padding:9px 16px;
  border-radius:999px; cursor:pointer; font-weight:600; font-size:.9rem;
}
.search-form button:hover{background:var(--accent-2)}
.menu-toggle{display:none; background:none; border:0; color:var(--text); font-size:1.6rem; cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative; margin:26px 0 34px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.hero-link{display:block; position:relative}
.hero img{width:100%; height:460px; object-fit:cover}
.hero-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:10px; padding:38px;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.05) 100%);
}
.hero-overlay h1{font-size:2.3rem; line-height:1.2; margin:0; max-width:820px}
.hero-overlay p{margin:0; color:#d7dbe3; max-width:720px}
.hero-meta{font-size:.85rem; color:var(--muted)}

/* ---------- Badges / chips ---------- */
.badge{
  display:inline-block; background:var(--accent); color:#fff; font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  padding:4px 10px; border-radius:999px; width:fit-content;
}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px}
.chip{
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  padding:8px 16px; border-radius:999px; cursor:pointer; font-size:.88rem; transition:.15s;
}
.chip:hover{color:var(--text); border-color:var(--accent)}
.chip.active{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}

/* ---------- Sections ---------- */
.section-title{
  display:flex; align-items:center; gap:12px; margin:34px 0 20px;
  font-size:1.35rem; font-weight:700;
}
.section-title::before{content:""; width:5px; height:24px; background:var(--accent); border-radius:3px}

/* ---------- Grid / cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.2s;
}
.card:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow)}
.card-media{position:relative; display:block}
.card-media img{width:100%; height:190px; object-fit:cover}
.card-media .badge{position:absolute; top:12px; left:12px}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-title{margin:0; font-size:1.08rem; line-height:1.35}
.card-title a:hover{color:var(--accent-2)}
.card-resume{margin:0; color:var(--muted); font-size:.9rem; flex:1}
.card-meta{display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); border-top:1px solid var(--line); padding-top:10px}

/* ---------- Article ---------- */
.breadcrumb{font-size:.85rem; color:var(--muted); margin:24px 0 14px}
.article{max-width:820px; margin:0 auto}
.article h1{font-size:2.1rem; line-height:1.25; margin:14px 0 10px}
.article-meta{color:var(--muted); font-size:.88rem; margin-bottom:20px}
.article-img{width:100%; border-radius:var(--radius); margin-bottom:24px}
.article-lead{font-size:1.15rem; color:#cfd5df; font-weight:500; border-left:4px solid var(--accent); padding-left:16px}
.article p{font-size:1.03rem; color:#dde2ea}
.share{display:flex; align-items:center; gap:14px; margin:30px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.9rem}
.share a{color:var(--accent-2); font-weight:600}
.related{margin:44px 0}

/* ---------- Empty state ---------- */
.empty-state{text-align:center; padding:70px 20px; color:var(--muted)}
.empty-state h1,.empty-state h2{color:var(--text)}
.btn{display:inline-block; background:var(--accent); color:#fff; padding:11px 22px; border-radius:999px; font-weight:600; margin-top:10px}
.btn:hover{background:var(--accent-2); color:#fff}

/* ---------- Footer ---------- */
.site-footer{margin-top:60px; border-top:1px solid var(--line); background:var(--surface); padding:40px 0 26px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px}
.footer-grid h4{margin:0 0 12px; font-size:1rem}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.footer-grid a{color:var(--muted); font-size:.9rem}
.footer-grid a:hover{color:var(--accent-2)}
.footer-bottom{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:.85rem}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero img{height:340px}
  .hero-overlay{padding:24px}
  .hero-overlay h1{font-size:1.6rem}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .menu-toggle{display:block; margin-left:auto}
  .main-nav{
    position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--surface); border-bottom:1px solid var(--line); padding:12px;
    display:none;
  }
  .main-nav.open{display:flex}
  .search-form{order:3; width:100%; margin-top:8px}
  .search-form input{width:100%}
  .header-inner{flex-wrap:wrap; height:auto; padding:12px 0}
  .hero img{height:260px}
  .hero-overlay h1{font-size:1.3rem}
  .hero-overlay p{display:none}
  .grid{grid-template-columns:1fr}
  .article h1{font-size:1.5rem}
  .footer-grid{grid-template-columns:1fr}
}

/* ===== Contact page ===== */
.page-head { padding: 28px 0 8px; }
.page-head h1 { font-size: 2rem; margin: 0 0 10px; }
.page-intro { color: #555; max-width: 760px; line-height: 1.6; margin: 0 0 8px; }
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; padding: 18px 0 48px; align-items: start; }
.contact-card { background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.contact-card h2 { margin: 0 0 16px; font-size: 1.25rem; }
.contact-form .form-row { display: flex; flex-direction: column; margin-bottom: 14px; }
.contact-form label { font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.contact-form input, .contact-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; font: inherit; box-sizing: border-box; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #d9232e; box-shadow: 0 0 0 3px rgba(217,35,46,.12); }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { background: #d9232e; color: #fff; border: 0; border-radius: 6px; padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer; }
.contact-form button:hover { background: #b81c26; }
.form-status { margin-top: 12px; font-size: .92rem; }
.form-status.error { color: #c0392b; }
.form-status.success { color: #1e7e34; }
.contact-details { list-style: none; padding: 0; margin: 0; }
.contact-details li { padding: 10px 0; border-bottom: 1px solid #eee; line-height: 1.5; }
.contact-details li:last-child { border-bottom: 0; }
.contact-details strong { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: #888; margin-bottom: 2px; }
.contact-details a { color: #d9232e; text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }
@media (max-width: 760px) { .contact-layout { grid-template-columns: 1fr; } }

/* Contact page */
.contact-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start;margin:24px 0 48px}
.contact-card{background:#fff;border:1px solid #e6e8ec;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(16,24,40,.06)}
.contact-card h2{margin:0 0 16px;font-size:1.25rem}
.contact-form .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.contact-form label{font-weight:600;font-size:.9rem;color:#344054}
.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border:1px solid #d0d5dd;border-radius:8px;font:inherit;background:#fff;color:#101828}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#e63946;box-shadow:0 0 0 3px rgba(230,57,70,.15)}
.contact-form textarea{resize:vertical;min-height:120px}
.form-status{margin:12px 0 0;font-size:.9rem;min-height:1.2em}
.form-status.error{color:#b42318}
.form-status.success{color:#027a48}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;flex-direction:column;gap:2px}
.ci-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#667085;font-weight:700}
.contact-list a{color:#e63946;text-decoration:none;word-break:break-word}
.contact-list a:hover{text-decoration:underline}
.contact-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid #eaecf0}
.contact-social a{color:#344054;text-decoration:none;font-size:.9rem}
.contact-social a:hover{color:#e63946}
@media(max-width:820px){.contact-layout{grid-template-columns:1fr}}

/* XD: À propos page */
.about-section { padding: 22px 0; border-top: 1px solid #eee; }
.about-section h2 { font-size: 1.4rem; margin: 0 0 12px; }
.about-section p { color: #444; line-height: 1.7; max-width: 820px; margin: 0 0 12px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 8px; }
.team-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.team-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.team-role { color: #c0392b; font-weight: 600; font-size: .85rem; margin: 0 0 8px; }
.team-card p { margin: 0; color: #555; line-height: 1.6; font-size: .92rem; }
.values-list { list-style: none; padding: 0; margin: 8px 0 0; max-width: 820px; }
.values-list li { padding: 10px 0 10px 26px; position: relative; border-bottom: 1px solid #f2f2f2; color: #444; line-height: 1.6; }
.values-list li::before { content: "✓"; position: absolute; left: 0; color: #c0392b; font-weight: 700; }
.values-list li strong { color: #111; }