/* ===== HOME PAGE ===== */
/* Tout est sous .home-page pour éviter d’impacter la base */

/* HERO simple, sans bandeau coloré */
.home-page .home-logo{
  width: 96px; height: 96px; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
}

/* ===== APPS ===== */
.home-page .apps-section { padding: 2.5rem 0; }
.home-page .apps-card{
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 2.2rem 2rem;
  box-shadow: var(--shadow);
  border: none;
  max-width: 1000px;
  margin: 0 auto;
}

.home-page .section-header{ text-align:center; margin-bottom:1.6rem; }
.home-page .section-header i{ font-size:2.2rem; color:var(--primary-color); margin-bottom:.35rem; display:block; }
.home-page .section-header h2{ font-size:1.8rem; font-weight:700; color:var(--dark-text); margin-bottom:.15rem; }
.home-page .section-header p{ color:var(--muted-text); margin:0; }

/* Grille 2×2 (mobile: 1 col) */
.home-page .apps-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
  margin-bottom: 1.6rem;
}
@media (min-width: 768px){
  .home-page .apps-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.home-page .app-item{
  background: var(--white);
  border-radius: var(--border-radius);
  padding: 1.4rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-color);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.home-page .app-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); }

.home-page .app-icon{
  width:54px; height:54px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.9rem;
}
.home-page .app-icon i{ color:#fff; font-size:1.5rem; }
.home-page .app-icon.primary{ background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); }
.home-page .app-icon.success{ background: linear-gradient(135deg, var(--success-color), var(--success-dark)); }
.home-page .app-icon.warning{ background: linear-gradient(135deg, var(--warning-color), var(--warning-dark)); }
.home-page .app-icon.danger { background: linear-gradient(135deg, var(--danger-color),  #b71c1c); }

.home-page .app-content h3{ font-size:1.2rem; font-weight:600; color:var(--dark-text); margin-bottom:.4rem; }
.home-page .app-content p{ color:var(--muted-text); margin-bottom:.9rem; }

/* Boutons (propres à la page) */
.home-page .app-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:8px; text-decoration:none; font-weight:500; font-size:.95rem;
  color:#fff; transition: filter .2s ease, transform .2s ease;
}
.home-page .app-btn i{ font-size:.85rem; }
.home-page .app-btn:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.home-page .app-btn--primary{ background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); }
.home-page .app-btn--success{ background: linear-gradient(135deg, var(--success-color), var(--success-dark)); }
.home-page .app-btn--warning{ background: linear-gradient(135deg, var(--warning-color), var(--warning-dark)); }
.home-page .app-btn--danger { background: linear-gradient(135deg, var(--danger-color),  #b71c1c); }

/* ===== ROADMAP ===== */
.home-page .roadmap-section{ padding:2.5rem 0; background: var(--light-bg); }
.home-page .roadmap-card{ max-width: 900px; margin: 0 auto; }
.home-page .roadmap-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:1.4rem; }
.home-page .roadmap-item{
  background:var(--white); border-radius:var(--border-radius); padding:1.4rem;
  box-shadow: var(--shadow); border-left:4px solid var(--primary-color);
  display:flex; align-items:flex-start; gap:1rem; transition: transform .25s ease, box-shadow .25s ease;
}
.home-page .roadmap-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.home-page .roadmap-icon{
  width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color:#fff; flex-shrink:0;
}
.home-page .roadmap-content h4{ margin:0 0 .25rem; font-size:1.08rem; color:var(--dark-text); }
.home-page .roadmap-content p{ margin:0; color:var(--muted-text); }

/* ===== À PROPOS ===== */
.home-page .about-section{ padding:2.5rem 0; }
.home-page .about-card{ background:var(--white); border-radius:var(--border-radius); padding:2rem; box-shadow:var(--shadow); max-width:1000px; margin:0 auto; }
.home-page .about-content{ display:grid; grid-template-columns: 1fr 300px; gap:2rem; align-items:center; }
.home-page .about-text h2{ font-size:1.7rem; font-weight:700; margin-bottom:.85rem; }
.home-page .about-text p{ color:var(--muted-text); margin-bottom:.65rem; }
.home-page .about-text p:last-child{ margin-bottom:0; }
.home-page .about-image img{ width:100%; height:auto; border-radius:var(--border-radius); box-shadow: var(--shadow); }

@media (max-width: 992px){
  .home-page .about-content{ grid-template-columns: 1fr; text-align:center; }
  .home-page .about-image{ order:-1; }
  .home-page .about-image img{ max-width:260px; margin:0 auto; }
}