/*
Theme Name:   Kadence Child - Mang'Actu
Theme URI:    https://mang-actu.com
Description:  Thème enfant Kadence pour Mang'Actu
Author:       Mang'Actu
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-child
*/

/* =============================================
   VARIABLES GLOBALES
   ============================================= */
:root {
  --rouge: #E24B4A;
  --rouge-h: #c93a39;
  --fond: #f4f3f0;
  --blanc: #ffffff;
  --texte: #1c1c1c;
  --doux: #666666;
  --bordure: #e2e0d8;
  --sombre: #12122a;
  --r: 10px;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--fond);
  color: var(--texte);
}

/* =============================================
   HEADER KADENCE
   ============================================= */
.site-header,
.header-wrap {
  background: var(--blanc) !important;
  border-bottom: 2.5px solid var(--rouge) !important;
  box-shadow: none !important;
}

.header-navigation .nav-menu > li > a,
.header-navigation .nav-menu > li > .dropdown-nav-toggle {
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--doux) !important;
}

.header-navigation .nav-menu > li > a:hover,
.header-navigation .nav-menu > li.current-menu-item > a {
  color: var(--rouge) !important;
}

/* =============================================
   PAGE D'ACCUEIL — LAYOUT PRINCIPAL
   ============================================= */
.ma-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px;
}

.ma-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ma-section-titre {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.ma-section-titre::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--rouge);
  border-radius: 2px;
  flex-shrink: 0;
}

.ma-voir-tout {
  font-size: 12px;
  font-weight: 500;
  color: var(--rouge);
  text-decoration: none;
}

.ma-voir-tout:hover { opacity: 0.75; }

/* ── Hero ── */
.ma-hero {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 14px;
  margin-bottom: 36px;
}

.ma-hero-label {
  display: inline-flex;
  align-items: center;
  background: #FCEBEB;
  color: #A32D2D;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ma-hero-main {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.2s;
  text-decoration: none;
  display: block;
}

.ma-hero-main:hover { border-color: var(--rouge); }

.ma-hero-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  background: #d5d3cc;
  display: block;
}

.ma-hero-body { padding: 14px; }

.ma-hero-cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rouge);
  margin-bottom: 5px;
}

.ma-hero-titre {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 7px;
  color: var(--texte);
}

.ma-hero-meta { font-size: 11px; color: var(--doux); }

.ma-hero-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ma-hero-small {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  display: flex;
  gap: 10px;
  padding: 11px;
  transition: border-color 0.2s;
  flex: 1;
  text-decoration: none;
}

.ma-hero-small:hover { border-color: var(--rouge); }

.ma-hero-small-img {
  width: 60px;
  height: 60px;
  border-radius: 7px;
  object-fit: cover;
  background: #d5d3cc;
  flex-shrink: 0;
  border: 1px solid var(--bordure);
}

.ma-hero-small-cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #185FA5;
  margin-bottom: 3px;
}

.ma-hero-small-titre {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--texte);
}

.ma-hero-small-meta { font-size: 10px; color: var(--doux); margin-top: 3px; }

/* ── Cartes actualités ── */
.ma-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}

.ma-card {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.ma-card:hover { border-color: var(--rouge); transform: translateY(-2px); }

.ma-card-img-wrap { position: relative; overflow: hidden; }

.ma-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #d5d3cc;
  transition: transform 0.3s;
  display: block;
}

.ma-card:hover .ma-card-img { transform: scale(1.03); }

/* ── Badges catégories ── */
.ma-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ba  { background: #E1F5EE; color: #0F6E56; }
.bm  { background: #EEEDFE; color: #534AB7; }
.bmh { background: #FEF3EE; color: #9A3D1A; }
.bt  { background: #FAEEDA; color: #854F0B; }
.bc  { background: #FCEBEB; color: #A32D2D; }
.bf  { background: #E6F1FB; color: #185FA5; }
.bj  { background: #EAF3DE; color: #3B6D11; }
.bln { background: #F4F0FE; color: #534AB7; }
.bla { background: #FFF0F0; color: #A32D2D; }

.ma-card-body {
  padding: 11px 13px;
  border-top: 1px solid var(--bordure);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.ma-card-titre {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--texte);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ma-card-meta { font-size: 11px; color: var(--doux); }

/* ── Classements ── */
.ma-classements-section {
  background: #eeecea;
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 36px;
}

.ma-classements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ma-classement-card {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition: border-color 0.2s;
  text-decoration: none;
}

.ma-classement-card:hover { border-color: var(--rouge); }

.ma-classement-rang {
  background: var(--rouge);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ma-classement-rang.gris { background: #999; }

.ma-classement-img {
  width: 52px;
  height: 68px;
  object-fit: cover;
  background: #d5d3cc;
  flex-shrink: 0;
  align-self: center;
  margin: 8px 8px 8px 0;
  border-radius: 5px;
}

.ma-classement-body { padding: 9px 10px; flex: 1; min-width: 0; }
.ma-classement-label { font-size: 10px; color: var(--doux); margin-bottom: 2px; }
.ma-classement-titre { font-size: 12px; font-weight: 500; color: var(--texte); line-height: 1.35; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Fiches ── */
.ma-fiches-section { margin-bottom: 36px; }

.ma-fiches-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.ma-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--bordure);
  background: var(--blanc);
  color: var(--doux);
  cursor: pointer;
  transition: all 0.15s;
}

.ma-tab.active,
.ma-tab:hover { background: var(--rouge); border-color: var(--rouge); color: #fff; }

.ma-fiches-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.ma-fiche-card {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
  text-align: center;
  text-decoration: none;
  display: block;
}

.ma-fiche-card:hover { border-color: var(--rouge); transform: translateY(-3px); }

.ma-fiche-img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: #d5d3cc;
  display: block;
}

.ma-fiche-body {
  padding: 9px 8px;
  border-top: 1px solid var(--bordure);
}

.ma-fiche-titre { font-size: 12px; font-weight: 500; color: var(--texte); line-height: 1.3; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-fiche-auteur { font-size: 10px; color: var(--doux); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ma-fiche-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Newsletter ── */
.ma-newsletter {
  background: var(--sombre);
  border-radius: 16px;
  padding: 44px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 36px;
}

.ma-nl-tag {
  display: inline-block;
  background: var(--rouge);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ma-nl-titre {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 9px;
}

.ma-nl-desc { font-size: 13px; color: #8888aa; line-height: 1.65; margin: 0; }

/* Override MailPoet dans newsletter */
.ma-newsletter .mailpoet_form input[type="email"],
.ma-newsletter .mailpoet_form input[type="text"] {
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  padding: 11px 15px !important;
  font-size: 13px !important;
  color: #fff !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

.ma-newsletter .mailpoet_form input::placeholder { color: #5555aa !important; }

.ma-newsletter .mailpoet_submit,
.ma-newsletter button[type="submit"] {
  background: var(--rouge) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
  width: 100% !important;
  cursor: pointer !important;
}

/* =============================================
   PAGE ARTICLE SINGLE — avec sidebar
   ============================================= */
.single .content-area,
.page .content-area {
  max-width: 100%;
}

.single .entry-title,
.page .entry-title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--texte);
}

.single .entry-meta,
.single .post-meta {
  font-size: 12px;
  color: var(--doux);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bordure);
}

.single .entry-content p,
.single .entry-content li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--texte);
  margin-bottom: 16px;
}

.single .entry-content h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 28px 0 12px;
  color: var(--texte);
}

.single .entry-content h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 22px 0 10px;
  color: var(--texte);
}

.single .entry-content img {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

.single .entry-content a {
  color: var(--rouge);
  text-decoration: underline;
}

/* Image à la une de l'article */
.single .post-thumbnail img,
.single .featured-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* ── Sidebar ── */
.widget-area .widget {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 20px;
}

.widget-area .widget-title,
.widget-area .widgettitle {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--texte) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--rouge) !important;
}

/* Articles récents sidebar */
.widget_recent_entries ul { list-style: none; padding: 0; }
.widget_recent_entries ul li {
  padding: 8px 0;
  border-bottom: 1px solid var(--bordure);
  font-size: 13px;
}
.widget_recent_entries ul li:last-child { border-bottom: none; }
.widget_recent_entries ul li a { color: var(--texte); text-decoration: none; font-weight: 500; }
.widget_recent_entries ul li a:hover { color: var(--rouge); }
.widget_recent_entries ul li .post-date { font-size: 11px; color: var(--doux); display: block; margin-top: 2px; }

/* Catégories sidebar */
.widget_categories ul { list-style: none; padding: 0; }
.widget_categories ul li { padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.widget_categories ul li:last-child { border-bottom: none; }
.widget_categories ul li a { color: var(--texte); text-decoration: none; font-size: 13px; font-weight: 500; }
.widget_categories ul li a:hover { color: var(--rouge); }

/* =============================================
   FOOTER KADENCE
   ============================================= */
.site-footer,
.footer-wrap {
  background: var(--blanc) !important;
  border-top: 2px solid var(--bordure) !important;
}

.site-footer a { color: var(--doux) !important; font-size: 12px !important; }
.site-footer a:hover { color: var(--rouge) !important; }
.site-footer .footer-copy { font-size: 12px; color: #aaa; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .ma-hero { grid-template-columns: 1fr; }
  .ma-hero-img { height: 220px; }
  .ma-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-classements-grid { grid-template-columns: 1fr; }
  .ma-fiches-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ma-newsletter { grid-template-columns: 1fr; padding: 28px 20px; gap: 24px; }
}

@media (max-width: 600px) {
  .ma-main { padding: 20px 14px; }
  .ma-hero-img { height: 180px; }
  .ma-cards-grid { grid-template-columns: 1fr; }
  .ma-fiches-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-newsletter { padding: 24px 16px; }
  .ma-nl-titre { font-size: 20px; }
}

/* Accessibilité */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Placeholder image */
.ma-img-placeholder { background: #d5d3cc; }