/*
Theme Name: MEC-UNACOIS Keur Massar
Theme URI: https://mecunacois-km.com
Author: MEC-UNACOIS Keur Massar
Description: Thème WordPress sur mesure pour la Mutuelle d'Épargne et de Crédit UNACOIS de Keur Massar. Reproduit la charte graphique officielle : bleu institutionnel, accents dorés, mise en avant des services (Épargne, Crédit, Transfert d'argent, Accompagnement), chiffres clés et réseau d'agences.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mec-unacois
*/

/* =========================================================
   0. VARIABLES / TOKENS
   ========================================================= */
:root{
  --mu-blue-dark: #0b3d78;
  --mu-blue: #0d4b96;
  --mu-blue-mid: #1560b8;
  --mu-blue-light: #eaf1fb;
  --mu-gold: #c68a3f;
  --mu-gold-dark: #b47a2e;
  --mu-ink: #16233a;
  --mu-gray: #5a6b81;
  --mu-gray-light: #f4f6fa;
  --mu-white: #ffffff;
  --mu-green-wa: #2ea948;
  --mu-radius-s: 8px;
  --mu-radius-m: 14px;
  --mu-radius-l: 28px;
  --mu-shadow: 0 12px 30px rgba(11,61,120,0.12);
  --mu-font-display: 'Poppins', 'Segoe UI', sans-serif;
  --mu-font-body: 'Inter', 'Segoe UI', sans-serif;
  --mu-max: 1180px;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--mu-font-body);
  color: var(--mu-ink);
  background: var(--mu-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--mu-font-display); margin:0; line-height:1.2; }
button{ font-family: inherit; cursor:pointer; }
.mu-container{ max-width: var(--mu-max); margin:0 auto; padding:0 24px; }
:focus-visible{ outline: 3px solid var(--mu-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* =========================================================
   2. TOP BAR
   ========================================================= */
.mu-topbar{
  background: var(--mu-blue-dark);
  color: var(--mu-white);
  font-size: 13.5px;
}
.mu-topbar .mu-container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:8px;
}
.mu-topbar-left{ display:flex; align-items:center; gap:8px; opacity:.95; }
.mu-topbar-right{ display:flex; align-items:center; gap:18px; }
.mu-topbar-phone{ display:flex; align-items:center; gap:8px; font-weight:600; }
.mu-social-row{ display:flex; gap:10px; }
.mu-social-row a{
  width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.mu-social-row a:hover{ background: var(--mu-gold); transform: translateY(-2px); }
.mu-social-row svg{ width:15px; height:15px; fill:#fff; }

/* =========================================================
   3. HEADER / NAV
   ========================================================= */
.mu-header{
  background:#fff;
  border-bottom:1px solid #eef1f6;
  position: sticky; top:0; z-index: 100;
}
.mu-header .mu-container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:24px;
}
.mu-brand{ display:flex; align-items:center; gap:14px; }
.mu-brand-logo{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; max-height:64px;
}
.mu-brand-logo img{ max-height:64px; width:auto; }
.mu-brand-text .mu-brand-name{
  font-size:22px; font-weight:800; color: var(--mu-blue); letter-spacing:.3px;
}
.mu-brand-text .mu-brand-sub{
  font-size:13px; font-weight:700; color: var(--mu-ink); letter-spacing:1px; margin-top:-2px;
}
.mu-brand-text .mu-brand-tag{
  font-size:12px; color: var(--mu-gold-dark); font-style:italic; margin-top:2px;
}
.mu-nav{ display:flex; align-items:center; gap:30px; }
.mu-nav ul{ display:flex; gap:26px; }
.mu-nav a{
  font-size:14.5px; font-weight:600; color: var(--mu-ink);
  padding:8px 2px; position:relative;
}
.mu-nav a.mu-current, .mu-nav a:hover{ color: var(--mu-blue); }
.mu-nav a.mu-current::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--mu-gold); border-radius:2px;
}
.mu-nav .mu-has-children{ display:flex; align-items:center; gap:4px; }
.mu-btn-membre{
  background: var(--mu-blue); color:#fff; font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:8px; display:flex; align-items:center; gap:8px;
  border:none; white-space:nowrap; transition:background .2s ease;
}
.mu-btn-membre:hover{ background: var(--mu-blue-dark); }
.mu-burger{ display:none; background:none; border:none; }

/* =========================================================
   4. HERO
   ========================================================= */
.mu-hero{ padding: 56px 0 70px; overflow:hidden; }
.mu-hero .mu-container{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:48px; align-items:center;
}
.mu-eyebrow{
  color: var(--mu-gold-dark); font-weight:700; letter-spacing:1.5px;
  font-size:13px; text-transform:uppercase; margin-bottom:14px; display:block;
}
.mu-hero h1{
  font-size: clamp(32px, 4vw, 46px); font-weight:800; color: var(--mu-blue-dark);
  margin-bottom:18px;
}
.mu-hero h1 .mu-accent{ color: var(--mu-gold-dark); }
.mu-hero p{ color: var(--mu-gray); font-size:16px; max-width:480px; margin-bottom:28px; }
.mu-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.mu-cta{
  display:flex; align-items:center; gap:12px; padding:12px 18px;
  border-radius:10px; font-weight:700; font-size:14.5px; border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mu-cta:hover{ transform: translateY(-3px); box-shadow: var(--mu-shadow); }
.mu-cta small{ display:block; font-weight:500; font-size:12px; opacity:.85; margin-top:2px; }
.mu-cta-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.mu-cta-icon svg{ width:18px; height:18px; }
.mu-cta.primary{ background: var(--mu-blue); color:#fff; }
.mu-cta.primary .mu-cta-icon{ background: rgba(255,255,255,.18); }
.mu-cta.gold{ background: var(--mu-gold); color:#fff; }
.mu-cta.gold .mu-cta-icon{ background: rgba(255,255,255,.22); }
.mu-cta.outline{ background:#fff; color: var(--mu-blue-dark); border-color:#e3e8f0; }
.mu-cta.outline .mu-cta-icon{ background: var(--mu-blue-light); color: var(--mu-blue); }

.mu-hero-media{
  position:relative; border-radius: var(--mu-radius-l);
  overflow:hidden; aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--mu-blue) 0%, var(--mu-blue-mid) 55%, var(--mu-gold) 130%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--mu-shadow);
}
.mu-hero-media img{ border-radius: var(--mu-radius-l); }
.mu-hero-media .mu-media-note{
  color:#fff; text-align:center; padding:24px; font-size:14px; opacity:.9;
}
.mu-hero-media .mu-media-note svg{ width:52px; height:52px; margin:0 auto 12px; opacity:.9; }

/* =========================================================
   5. SERVICES
   ========================================================= */
.mu-section{ padding:70px 0; }
.mu-section-head{ text-align:center; max-width:680px; margin:0 auto 48px; }
.mu-section-head .mu-eyebrow-line{
  display:flex; align-items:center; justify-content:center; gap:12px;
  color: var(--mu-blue); font-weight:700; letter-spacing:1.5px; font-size:13px;
  text-transform:uppercase; margin-bottom:14px;
}
.mu-section-head .mu-eyebrow-line::before,
.mu-section-head .mu-eyebrow-line::after{
  content:""; width:32px; height:2px; background: var(--mu-gold);
}
.mu-section-head h2{ font-size: clamp(24px,3vw,32px); color: var(--mu-ink); font-weight:800; }

.mu-services-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:26px;
}
.mu-service-card{
  border:1px solid #eef1f6; border-radius: var(--mu-radius-m);
  padding:34px 26px; text-align:center; transition: transform .2s ease, box-shadow .2s ease;
}
.mu-service-card:hover{ transform: translateY(-6px); box-shadow: var(--mu-shadow); }
.mu-service-icon{
  width:74px; height:74px; border-radius:50%; background: var(--mu-blue);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.mu-service-icon svg{ width:32px; height:32px; fill:#fff; }
.mu-service-card h3{ font-size:17px; font-weight:800; color: var(--mu-blue-dark); margin-bottom:10px; letter-spacing:.3px; }
.mu-service-card p{ font-size:14px; color: var(--mu-gray); margin-bottom:16px; }
.mu-service-link{ font-size:13.5px; font-weight:700; color: var(--mu-blue); display:inline-flex; align-items:center; gap:6px; }
.mu-service-link svg{ width:14px; height:14px; transition: transform .2s ease; }
.mu-service-card:hover .mu-service-link svg{ transform: translateX(4px); }

/* =========================================================
   6. CHIFFRES CLÉS
   ========================================================= */
.mu-stats{
  background: linear-gradient(120deg, var(--mu-blue-dark), var(--mu-blue));
  border-radius: var(--mu-radius-l);
  padding:44px 20px;
}
.mu-stats-grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  text-align:center;
}
.mu-stat{ position:relative; padding:0 16px; color:#fff; }
.mu-stat:not(:last-child)::after{
  content:""; position:absolute; right:0; top:8px; bottom:8px; width:1px;
  background: rgba(255,255,255,.18);
}
.mu-stat-icon{
  width:56px; height:56px; border-radius:50%; background: rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
}
.mu-stat-icon svg{ width:26px; height:26px; fill: var(--mu-gold); }
.mu-stat-num{ font-size: clamp(24px,3vw,32px); font-weight:800; margin-bottom:4px; }
.mu-stat-label{ font-size:13.5px; opacity:.9; }

/* =========================================================
   7. AGENCES
   ========================================================= */
.mu-agences-grid{
  display:grid; grid-template-columns: repeat(6,1fr); gap:18px;
}
.mu-agence-card{
  border-radius: var(--mu-radius-m); overflow:hidden; border:1px solid #eef1f6;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mu-agence-card:hover{ transform: translateY(-5px); box-shadow: var(--mu-shadow); }
.mu-agence-photo{
  aspect-ratio: 4/3; background: var(--mu-blue-light);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.mu-agence-photo svg{ width:30px; height:30px; opacity:.55; }
.mu-agence-pin{
  position:absolute; left:12px; bottom:-14px; width:30px; height:30px; border-radius:50%;
  background: var(--mu-blue); display:flex; align-items:center; justify-content:center;
  border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.mu-agence-pin svg{ width:14px; height:14px; fill:#fff; opacity:1; }
.mu-agence-info{ padding:22px 14px 16px; text-align:center; }
.mu-agence-info .mu-agence-name{ font-weight:800; font-size:14.5px; color: var(--mu-ink); }
.mu-agence-info .mu-agence-tag{ font-size:12px; color: var(--mu-gold-dark); font-weight:700; margin:2px 0; }
.mu-agence-info .mu-agence-loc{ font-size:12.5px; color: var(--mu-gray); }
.mu-agences-cta{ text-align:center; margin-top:36px; }
.mu-btn-outline-blue{
  display:inline-flex; align-items:center; gap:10px; background: var(--mu-blue); color:#fff;
  font-weight:700; padding:14px 26px; border-radius:8px; font-size:14.5px;
  transition: background .2s ease;
}
.mu-btn-outline-blue:hover{ background: var(--mu-blue-dark); }

/* =========================================================
   8. BANDEAU CTA VALEURS
   ========================================================= */
.mu-values{
  background: var(--mu-blue-light); border-radius: var(--mu-radius-l);
  padding:40px; display:grid; grid-template-columns: 1.2fr 1.4fr 0.9fr; gap:30px; align-items:center;
}
.mu-values h3{ font-size:22px; color: var(--mu-blue-dark); font-weight:800; margin-bottom:8px; }
.mu-values .mu-values-sub{ color: var(--mu-gold-dark); font-weight:700; font-size:15px; }
.mu-values-list{ display:flex; gap:26px; flex-wrap:wrap; }
.mu-value-item{ display:flex; align-items:flex-start; gap:12px; }
.mu-value-icon{
  width:44px; height:44px; border-radius:50%; border:2px solid var(--mu-blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff;
}
.mu-value-icon svg{ width:20px; height:20px; fill: var(--mu-blue); }
.mu-value-item strong{ display:block; font-size:14.5px; color: var(--mu-ink); }
.mu-value-item span{ font-size:12.5px; color: var(--mu-gray); }
.mu-values-media{
  border-radius: var(--mu-radius-m); aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--mu-gold), var(--mu-blue));
  display:flex; align-items:center; justify-content:center;
}
.mu-values-media svg{ width:34px; height:34px; fill:#fff; opacity:.9; }

/* =========================================================
   9. FOOTER
   ========================================================= */
.mu-footer{ background: var(--mu-blue-dark); color:#dce6f5; padding:64px 0 0; margin-top:70px; }
.mu-footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr 1.1fr; gap:30px;
  padding-bottom:40px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.mu-footer-brand{ display:flex; gap:14px; }
.mu-footer-brand .mu-brand-logo{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.mu-footer h4{ color:#fff; font-size:15px; font-weight:800; margin-bottom:16px; }
.mu-footer p{ font-size:13.5px; line-height:1.7; color:#b9c8e2; }
.mu-footer ul li{ margin-bottom:10px; }
.mu-footer ul a{ font-size:13.5px; color:#cfdcf0; transition: color .2s ease; }
.mu-footer ul a:hover{ color: var(--mu-gold); }
.mu-footer-contact li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#cfdcf0; margin-bottom:14px; }
.mu-footer-contact svg{ width:16px; height:16px; fill: var(--mu-gold); flex-shrink:0; margin-top:2px; }
.mu-newsletter-form{ display:flex; margin-top:14px; border-radius:8px; overflow:hidden; }
.mu-newsletter-form input{
  flex:1; border:none; padding:12px 14px; font-size:13.5px; font-family:inherit;
}
.mu-newsletter-form button{ background: var(--mu-gold); border:none; padding:0 18px; }
.mu-newsletter-form button svg{ width:16px; height:16px; fill:#fff; }
.mu-footer-whatsapp{
  margin-top:18px; background: var(--mu-green-wa); border-radius:8px; padding:12px 16px;
  display:flex; align-items:center; gap:10px;
}
.mu-footer-whatsapp svg{ width:26px; height:26px; fill:#fff; }
.mu-footer-whatsapp span{ display:block; font-size:11.5px; color:#eafff0; }
.mu-footer-whatsapp strong{ font-size:15px; color:#fff; }
.mu-footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding:22px 0; flex-wrap:wrap; gap:10px;
  font-size:12.5px; color:#a9bcda;
}
.mu-footer-bottom ul{ display:flex; gap:22px; }
.mu-footer-bottom a:hover{ color:#fff; }

/* =========================================================
   10. RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .mu-services-grid{ grid-template-columns: repeat(2,1fr); }
  .mu-agences-grid{ grid-template-columns: repeat(3,1fr); }
  .mu-footer-grid{ grid-template-columns: 1fr 1fr; }
  .mu-values{ grid-template-columns: 1fr; text-align:center; }
  .mu-values-list{ justify-content:center; }
  .mu-value-item{ text-align:left; }
}
@media (max-width: 900px){
  .mu-hero .mu-container{ grid-template-columns:1fr; }
  .mu-hero-media{ order:-1; }
  .mu-stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:28px; }
  .mu-stat:nth-child(2)::after{ display:none; }
}
@media (max-width: 760px){
  .mu-nav{ display:none; }
  .mu-burger{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; }
  .mu-topbar-left span{ display:none; }
  .mu-services-grid{ grid-template-columns:1fr; }
  .mu-agences-grid{ grid-template-columns: repeat(2,1fr); }
  .mu-footer-grid{ grid-template-columns:1fr; }
  .mu-footer-bottom{ flex-direction:column; text-align:center; }
}