/* ============================================================
   GUIDE CONCOURS & DOCS — Styles Frontend
   Auteur : Cherif Diouck | rifxalima.sn
   ============================================================ */
:root {
  --guide-green:    #00853F;
  --guide-green-dk: #006830;
  --guide-yellow:   #FDEF42;
  --guide-red:      #E31B23;
  --guide-text:     #111827;
  --guide-soft:     #6b7280;
  --guide-border:   #e5e7eb;
  --guide-bg:       #f9fafb;
  --guide-card:     #ffffff;
  --guide-radius:   12px;
  --guide-shadow:   0 1px 3px rgba(0,0,0,.07),0 4px 14px rgba(0,0,0,.05);
  --guide-shadow-lg:0 6px 24px rgba(0,0,0,.12);
  --guide-ease:     .22s cubic-bezier(.4,0,.2,1);
}
.guide-wrap *,.guide-wrap *::before,.guide-wrap *::after{box-sizing:border-box}
.guide-wrap{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--guide-text);max-width:1100px;margin:0 auto}

/* ── Onglets de navigation ─────────────────────────────── */
.guide-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.guide-nav-btn{background:#fff;border:1.5px solid var(--guide-border);border-radius:50px;padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--guide-ease);color:var(--guide-soft)}
.guide-nav-btn:hover{border-color:var(--guide-green);color:var(--guide-green);background:#e8f5e9}
.guide-nav-btn.active{background:var(--guide-green);color:#fff;border-color:var(--guide-green)}

/* ── Recherche ────────────────────────────────────────── */
.guide-search-bar{margin-bottom:1.25rem}
.guide-search-inner{display:flex;align-items:center;gap:.6rem;background:#fff;border:2px solid var(--guide-border);border-radius:50px;padding:.6rem 1.2rem;transition:border-color var(--guide-ease)}
.guide-search-inner:focus-within{border-color:var(--guide-green);box-shadow:0 0 0 4px rgba(0,133,63,.1)}
.guide-search-icon{color:var(--guide-soft);flex-shrink:0}
.guide-search-field{flex:1;border:none;outline:none;font-size:.95rem;color:var(--guide-text);background:transparent}
.guide-search-field::placeholder{color:var(--guide-soft)}

/* ── Compteur ─────────────────────────────────────────── */
.guide-count{font-size:.82rem;color:var(--guide-soft);margin-bottom:1rem}
.guide-count strong{color:var(--guide-text)}

/* ── Boutons ──────────────────────────────────────────── */
.guide-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.83rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:all var(--guide-ease);text-decoration:none;background:var(--guide-green);color:#fff}
.guide-btn:hover{background:var(--guide-green-dk);color:#fff;transform:translateY(-1px)}
.guide-btn-ghost{background:none;color:var(--guide-soft);border:1.5px solid var(--guide-border)}
.guide-btn-ghost:hover{background:var(--guide-bg);color:var(--guide-text)}
.guide-btn-share{background:#1877f2;color:#fff}

/* ── Badge ────────────────────────────────────────────── */
.guide-badge{display:inline-block;padding:.2rem .65rem;border-radius:20px;font-size:.73rem;font-weight:700;background:#e8f5e9;color:#065f46}
.guide-badge-concours{background:#dbeafe;color:#1e40af}
.guide-badge-doc     {background:#f3f4f6;color:#374151}
.guide-badge-bourse  {background:#fef3c7;color:#92400e}

/* ── Carte guide ──────────────────────────────────────── */
.guide-card{background:var(--guide-card);border:1px solid var(--guide-border);border-radius:var(--guide-radius);box-shadow:var(--guide-shadow);overflow:hidden;transition:all var(--guide-ease);margin-bottom:0}
.guide-card:hover{box-shadow:var(--guide-shadow-lg)}
.guide-list{display:flex;flex-direction:column;gap:.75rem}

/* ── En-tête accordéon ────────────────────────────────── */
.guide-card-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:1.1rem 1.25rem;background:none;border:none;cursor:pointer;text-align:left;gap:1rem;transition:background var(--guide-ease)}
.guide-card-header:hover{background:rgba(0,133,63,.025)}
.guide-card-left{display:flex;align-items:flex-start;gap:.85rem;flex:1}
.guide-card-icon-wrap{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#e8f5e9;color:var(--guide-green)}
.guide-card-title{font-size:1rem;font-weight:700;color:var(--guide-text);margin:0 0 .3rem;line-height:1.35}
.guide-card-meta{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.guide-toggle-icon{flex-shrink:0;transition:transform .3s;color:var(--guide-soft)}
.guide-card.open .guide-toggle-icon{transform:rotate(180deg)}

/* ── Panneau accordéon ────────────────────────────────── */
.guide-panel{border-top:1px solid var(--guide-border);padding:1.25rem;display:none;animation:guide-slide .22s ease}
.guide-panel.open{display:block}
@keyframes guide-slide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.guide-panel-desc{font-size:.875rem;color:var(--guide-soft);line-height:1.65;margin-bottom:1.1rem}

/* ── Sections ─────────────────────────────────────────── */
.guide-section{margin-bottom:1.1rem}
.guide-section-title{font-size:.875rem;font-weight:700;color:var(--guide-text);margin-bottom:.65rem;padding-bottom:.35rem;border-bottom:2px solid var(--guide-border)}

/* ── Étapes ───────────────────────────────────────────── */
.guide-etapes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.guide-etape{display:flex;align-items:flex-start;gap:.7rem;padding:.55rem .75rem;background:var(--guide-bg);border-radius:8px;border:1px solid var(--guide-border)}
.guide-etape-num{background:var(--guide-green);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0;margin-top:.1rem}
.guide-etape-text{font-size:.85rem;color:var(--guide-soft);line-height:1.5}

/* ── Checklist documents ─────────────────────────────── */
.guide-checklist{display:flex;flex-direction:column;gap:.35rem}
.guide-doc-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;background:var(--guide-bg);border-radius:8px;cursor:pointer;transition:background var(--guide-ease);border:1px solid var(--guide-border)}
.guide-doc-item:hover{background:#e8f5e9}
.guide-doc-item:has(input:checked){background:#e8f5e9;border-color:#a7f3d0}
.guide-checkbox{width:16px;height:16px;flex-shrink:0;accent-color:var(--guide-green);cursor:pointer}
.guide-doc-name{flex:1;font-size:.85rem;color:var(--guide-text)}
.guide-doc-badge{font-size:.68rem;font-weight:700;padding:.15rem .45rem;border-radius:12px;flex-shrink:0}
.guide-doc-badge.obligatoire{background:#fee2e2;color:#dc2626}
.guide-doc-badge.optionnel   {background:#dbeafe;color:#1e40af}

/* ── Barre de progression ─────────────────────────────── */
.guide-progress{background:rgba(0,0,0,.03);border-radius:8px;padding:.75rem;margin-top:.75rem}
.guide-progress-header{display:flex;justify-content:space-between;font-size:.78rem;color:var(--guide-soft);margin-bottom:.4rem}
.guide-progress-bar{background:var(--guide-border);border-radius:100px;height:8px;overflow:hidden}
.guide-progress-fill{background:linear-gradient(90deg,var(--guide-green),#FDEF42);border-radius:100px;height:100%;transition:width .4s ease}

/* ── Actions panel ────────────────────────────────────── */
.guide-panel-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--guide-border)}

/* ── Vide ─────────────────────────────────────────────── */
.guide-empty{text-align:center;padding:3rem;color:var(--guide-soft);display:flex;flex-direction:column;align-items:center;gap:.75rem}

/* ── Impression ────────────────────────────────────────── */
@media print{
  .guide-nav,.guide-search-bar,.guide-panel-actions,.guide-toggle-icon{display:none!important}
  .guide-card{box-shadow:none;border:1px solid #e0e0e0;page-break-inside:avoid}
  .guide-panel{display:block!important}
}

@media(max-width:600px){
  .guide-card-left{flex-direction:column;gap:.5rem}
}