/*
Theme Name: ConcoursSpace
Theme URI: https://concourspace.com/
Author: ConcoursSpace
Author URI: https://concourspace.com/
Description: Plateforme marocaine des concours, recrutements, écoles, instituts et facultés. Thème rapide, mobile-first et SEO-friendly pour ConcoursSpace.com.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: concourspace
Tags: education, blog, custom-menu, custom-logo, translation-ready, rtl-language-support
*/

/* =========================================================
   1. VARIABLES
   ========================================================= */
:root{
  --cs-bg: #ffffff;
  --cs-bg-alt: #f7f8fa;
  --cs-text: #14181f;
  --cs-text-muted: #5b6472;
  --cs-border: #e6e8ec;
  --cs-primary: #0f6e4f;
  --cs-primary-dark: #0b5a40;
  --cs-primary-light: #e7f4ee;
  --cs-accent: #b8862b;
  --cs-danger: #b3261e;
  --cs-warning: #a15c00;
  --cs-radius: 10px;
  --cs-radius-lg: 16px;
  --cs-shadow: 0 1px 2px rgba(20,24,31,.05), 0 1px 12px rgba(20,24,31,.04);
  --cs-max-width: 1180px;
  --cs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--cs-font);
  color: var(--cs-text);
  background: var(--cs-bg);
  line-height: 1.6;
  font-size: 16px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--cs-primary); text-decoration:none; }
a:hover{ text-decoration: underline; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ line-height:1.25; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; }
button, input, select, textarea{ font-family: inherit; font-size: 1rem; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--cs-primary); color:#fff;
  padding:.75em 1em; z-index:10000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* =========================================================
   3. LAYOUT
   ========================================================= */
.cs-container{ max-width: var(--cs-max-width); margin:0 auto; padding:0 20px; }
.cs-section{ padding: 40px 0; }
.cs-section-title{ font-size: 1.5rem; margin-bottom: 4px; }
.cs-section-sub{ color: var(--cs-text-muted); margin-bottom: 20px; font-size: .95rem; }
.cs-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px;
}
.cs-row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* =========================================================
   4. HEADER
   ========================================================= */
.cs-header{
  position: sticky; top:0; z-index: 500; background: var(--cs-bg);
  border-bottom: 1px solid var(--cs-border);
}
.cs-header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 12px 20px; max-width: var(--cs-max-width); margin:0 auto;
}
.cs-logo{ font-size:1.3rem; font-weight:800; color: var(--cs-text); letter-spacing:-.02em; }
.cs-logo span{ color: var(--cs-primary); }
.cs-primary-nav{ display:flex; gap: 4px; }
.cs-primary-nav ul{ display:flex; gap:2px; align-items:center; }
.cs-primary-nav a{
  display:block; padding: 10px 12px; color: var(--cs-text); border-radius: 8px; font-size:.95rem; font-weight:500;
}
.cs-primary-nav a:hover{ background: var(--cs-bg-alt); text-decoration:none; }
.cs-header-actions{ display:flex; align-items:center; gap:10px; }
.cs-header-search-form{ display:flex; align-items:center; }
.cs-header-search-form input[type="search"]{
  border:1px solid var(--cs-border); border-radius: 999px; padding: 8px 14px; width: 220px; background: var(--cs-bg-alt);
}
.cs-menu-toggle{
  display:none; background:none; border:1px solid var(--cs-border); border-radius:8px; padding:8px 10px; cursor:pointer;
}
.cs-menu-toggle .bar{ display:block; width:20px; height:2px; background: var(--cs-text); margin: 4px 0; }

@media (max-width: 880px){
  .cs-primary-nav, .cs-header-search-form{ display:none; }
  .cs-menu-toggle{ display:block; }
  .cs-header.is-open .cs-primary-nav{
    display:block; position:fixed; inset: 60px 0 0 0; background: var(--cs-bg); padding: 10px 20px; overflow:auto;
  }
  .cs-header.is-open .cs-primary-nav ul{ flex-direction:column; align-items:stretch; }
  .cs-header.is-open .cs-primary-nav a{ padding: 14px 10px; border-bottom:1px solid var(--cs-border); border-radius:0; }
  .cs-header.is-open .cs-header-search-form{
    display:flex; position:fixed; left:20px; right:20px; top: 60px; z-index:501;
  }
  .cs-header.is-open .cs-header-search-form input[type="search"]{ width:100%; }
}

/* =========================================================
   5. HERO
   ========================================================= */
.cs-hero{ background: var(--cs-bg-alt); padding: 56px 0 40px; text-align:center; }
.cs-hero h1{ font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 780px; margin: 0 auto .5em; }
.cs-hero p{ color: var(--cs-text-muted); max-width: 620px; margin: 0 auto 24px; }
.cs-hero-search{
  display:flex; max-width: 620px; margin: 0 auto; background:#fff; border:1px solid var(--cs-border);
  border-radius: 999px; box-shadow: var(--cs-shadow); overflow:hidden;
}
.cs-hero-search input[type="search"]{ flex:1; border:none; padding: 14px 18px; background:transparent; }
.cs-hero-search input[type="search"]:focus{ outline:none; }
.cs-hero-search button{
  border:none; background: var(--cs-primary); color:#fff; padding: 0 22px; cursor:pointer; font-weight:600;
}
.cs-hero-search button:hover{ background: var(--cs-primary-dark); }
.cs-city-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:20px; }
.cs-chip{
  background:#fff; border:1px solid var(--cs-border); border-radius:999px; padding:6px 14px; font-size:.85rem; color:var(--cs-text);
}
.cs-chip:hover{ border-color: var(--cs-primary); text-decoration:none; }

/* =========================================================
   6. CARDS
   ========================================================= */
.cs-card{
  background:#fff; border:1px solid var(--cs-border); border-radius: var(--cs-radius-lg);
  padding: 18px; box-shadow: var(--cs-shadow); display:flex; flex-direction:column; gap:8px;
}
.cs-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cs-badge{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  padding: 3px 9px; border-radius: 999px; background: var(--cs-bg-alt); color: var(--cs-text-muted);
}
.cs-badge--ouvert{ background: var(--cs-primary-light); color: var(--cs-primary-dark); }
.cs-badge--bientot{ background: #fff3e0; color: var(--cs-warning); }
.cs-badge--expire{ background:#fbeae9; color: var(--cs-danger); }
.cs-badge--resultats{ background:#e8eefc; color:#1a4fb4; }
.cs-badge--archive{ background:#eee; color:#666; }
.cs-card h3{ font-size: 1.05rem; margin:0; }
.cs-card h3 a{ color: var(--cs-text); }
.cs-card-meta{ font-size:.85rem; color: var(--cs-text-muted); display:flex; flex-wrap:wrap; gap: 4px 10px; }
.cs-card-desc{ font-size:.9rem; color: var(--cs-text-muted); flex:1; }
.cs-card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.cs-btn{
  display:inline-block; background: var(--cs-primary); color:#fff !important; padding: 9px 16px;
  border-radius: 8px; font-weight:600; font-size:.9rem; text-decoration:none !important;
}
.cs-btn:hover{ background: var(--cs-primary-dark); }
.cs-btn-outline{
  background:transparent; color: var(--cs-primary) !important; border: 1px solid var(--cs-primary);
}
.cs-btn-outline:hover{ background: var(--cs-primary-light); }
.cs-link-arrow{ font-weight:600; font-size:.9rem; }

/* =========================================================
   7. FILTERS
   ========================================================= */
.cs-filters{
  background:#fff; border:1px solid var(--cs-border); border-radius: var(--cs-radius-lg); padding: 16px;
  margin-bottom: 22px;
}
.cs-filters-toggle{
  display:none; width:100%; text-align:left; background:var(--cs-bg-alt); border:1px solid var(--cs-border);
  border-radius:8px; padding:10px 14px; font-weight:600; cursor:pointer;
}
.cs-filters-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; align-items:end; }
.cs-filters label{ display:block; font-size:.8rem; color: var(--cs-text-muted); margin-bottom:4px; }
.cs-filters select, .cs-filters input{
  width:100%; padding:9px 10px; border:1px solid var(--cs-border); border-radius:8px; background:#fff;
}
.cs-filters .cs-btn{ width:100%; text-align:center; padding:10px; border:none; cursor:pointer; }
@media (max-width: 700px){
  .cs-filters-toggle{ display:block; }
  .cs-filters-grid{ display:none; grid-template-columns: 1fr 1fr; margin-top:12px; }
  .cs-filters.is-open .cs-filters-grid{ display:grid; }
}

/* =========================================================
   8. SINGLE CONCOURS
   ========================================================= */
.cs-single-header{ background: var(--cs-bg-alt); padding: 32px 0; }
.cs-breadcrumbs{ font-size:.82rem; color: var(--cs-text-muted); margin-bottom:14px; }
.cs-breadcrumbs a{ color: var(--cs-text-muted); }
.cs-single-header h1{ font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom:12px; }
.cs-single-meta{ display:flex; flex-wrap:wrap; gap: 8px 18px; font-size:.9rem; color: var(--cs-text-muted); }
.cs-single-meta strong{ color: var(--cs-text); }
.cs-single-layout{ display:grid; grid-template-columns: 2fr 1fr; gap: 30px; padding: 30px 0 60px; align-items:start; }
@media (max-width: 900px){ .cs-single-layout{ grid-template-columns: 1fr; } }
.cs-single-content h2{ font-size: 1.2rem; margin-top: 1.6em; }
.cs-single-content h2:first-child{ margin-top:0; }
.cs-official-notice{
  background: #fff8e6; border:1px solid #f0dfa8; border-radius: var(--cs-radius); padding: 14px 16px; font-size:.88rem; margin: 18px 0;
}
.cs-sidebar-box{
  background:#fff; border:1px solid var(--cs-border); border-radius: var(--cs-radius-lg); padding: 18px; margin-bottom: 18px;
}
.cs-sidebar-box h3{ font-size:1rem; margin-bottom:10px; }
.cs-sidebar-list li{ display:flex; justify-content:space-between; gap:10px; padding: 6px 0; border-bottom: 1px dashed var(--cs-border); font-size:.88rem; }
.cs-sidebar-list li:last-child{ border-bottom:none; }
.cs-sidebar-list span:first-child{ color: var(--cs-text-muted); }
.cs-official-btn{ display:block; text-align:center; width:100%; padding: 12px; margin-top: 6px; }
.cs-ad-slot{
  border:1px dashed var(--cs-border); border-radius: var(--cs-radius); padding: 14px; text-align:center;
  color: var(--cs-text-muted); font-size:.8rem; background: var(--cs-bg-alt);
}

/* =========================================================
   9. NEWSLETTER
   ========================================================= */
.cs-newsletter{ background: var(--cs-primary); color:#fff; padding: 40px 0; text-align:center; }
.cs-newsletter h2{ color:#fff; }
.cs-newsletter-form{ display:flex; max-width:480px; margin: 18px auto 0; gap:8px; }
.cs-newsletter-form input[type="email"]{
  flex:1; padding: 12px 16px; border-radius:8px; border:none;
}
.cs-newsletter-form button{
  background:#fff; color: var(--cs-primary); border:none; border-radius:8px; padding: 0 20px; font-weight:700; cursor:pointer;
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.cs-footer{ background: var(--cs-text); color:#cfd3da; padding: 40px 0 20px; margin-top: 20px; }
.cs-footer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 24px; }
.cs-footer h4{ color:#fff; font-size:.95rem; margin-bottom:12px; }
.cs-footer a{ color:#cfd3da; }
.cs-footer ul li{ margin-bottom:8px; font-size:.88rem; }
.cs-footer-bottom{
  border-top:1px solid #333844; margin-top: 26px; padding-top: 16px; font-size:.8rem;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:#9198a3;
}

/* =========================================================
   11. RTL
   ========================================================= */
body.rtl .cs-header-search-form input,
body.rtl .cs-hero-search input{ text-align:right; }
body.rtl .cs-sidebar-list li{ flex-direction:row-reverse; }

/* =========================================================
   12. UTIL
   ========================================================= */
.cs-empty{ text-align:center; color: var(--cs-text-muted); padding: 40px 0; }
.cs-pagination{ display:flex; gap:6px; justify-content:center; margin-top: 30px; flex-wrap:wrap; }
.cs-pagination a, .cs-pagination span{
  padding: 8px 13px; border:1px solid var(--cs-border); border-radius:8px; font-size:.85rem; color: var(--cs-text);
}
.cs-pagination .current{ background: var(--cs-primary); color:#fff; border-color: var(--cs-primary); }