/* ============================================================
   chapitre-index.css — Page d'accueil d'un chapitre
   /styles/chapitre-index.css
   ============================================================ */

/* ── Reset & base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
  color:#333;
  background:#f0f4f8;
  min-height:100vh;
}

.container {
  max-width:1100px;
  margin:0 auto;
  padding:30px 20px 60px;
}

/* ── Header ── */
.chapter-header {
  background:linear-gradient(135deg,#2C7DA0 0%,#1a5276 100%);
  color:white;
  padding:45px 40px 35px;
  border-radius:20px;
  margin-bottom:30px;
  box-shadow:0 8px 30px rgba(44,125,160,.3);
}

.chapter-breadcrumb {
  font-size:.82rem;
  color:rgba(255,255,255,.75);
  margin-bottom:1rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
}
.chapter-breadcrumb a { color:rgba(255,255,255,.85); text-decoration:none; }
.chapter-breadcrumb a:hover { text-decoration:underline; }
.chapter-breadcrumb .sep { opacity:.5; }

.chapter-theme-badge {
  display:inline-block;
  background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.25rem .9rem;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.8rem;
}

.chapter-number {
  font-size:1rem;
  font-weight:700;
  opacity:.85;
  margin-bottom:.4rem;
}

.chapter-header h1 {
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900;
  margin-bottom:.6rem;
  line-height:1.2;
}

.chapter-description {
  font-size:1rem;
  opacity:.88;
  max-width:700px;
}

/* ── Navigation rapide ── */
.quick-nav {
  display:flex;
  gap:20px;
  margin:0 0 30px;
  align-items:stretch;
}

.nav-card {
  background:white;
  border-radius:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.07);
  transition:all .25s ease;
  text-decoration:none;
  color:inherit;
  border-left:5px solid #2C7DA0;
}

.nav-card-large {
  flex:1;
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.nav-card-large:hover {
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.nav-card-large .nav-icon { font-size:56px; margin-bottom:10px; }
.nav-card-large h3 { font-size:1.5rem; margin:10px 0 8px; color:#2C7DA0; }
.nav-card-large p  { font-size:.9rem; color:#666; line-height:1.5; max-width:240px; }

/* Badge "Nouveau" */
.nav-badge {
  display:inline-block;
  background:#e07b2a;
  color:white;
  font-size:.65rem;
  font-weight:800;
  text-transform:uppercase;
  padding:.15rem .5rem;
  border-radius:999px;
  margin-bottom:.4rem;
}

/* Couleurs accent par page */
.nav-card-activite { border-left-color:#e07b2a; }
.nav-card-activite h3 { color:#e07b2a; }
.nav-card-activite:hover { box-shadow:0 12px 30px rgba(224,123,42,.2); }

.nav-card-cours    { border-left-color:#2C7DA0; }
.nav-card-exercices{ border-left-color:#1e8a4a; }
.nav-card-exercices h3 { color:#1e8a4a; }
.nav-card-exercices:hover { box-shadow:0 12px 30px rgba(30,138,74,.15); }

/* Bloc outils */
.nav-card-tools {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:22px 18px;
  min-width:220px;
}
.tools-header {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  border-bottom:2px solid #f0f0f0;
  padding-bottom:14px;
}
.tools-header .nav-icon { font-size:40px; }
.tools-header h3 { font-size:1.3rem; margin:0; color:#2C7DA0; }
.tools-header p  { font-size:.8rem; color:#888; margin:2px 0 0; }

.tools-list {
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.tool-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 13px;
  background:#f8f9fa;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  transition:all .2s ease;
  border-left:3px solid transparent;
  cursor:pointer;
}
.tool-item:hover {
  background:#e9f3f8;
  transform:translateX(4px);
  border-left-color:#2C7DA0;
}
.tool-icon { font-size:28px; min-width:36px; text-align:center; }
.tool-content strong {
  display:block;
  font-size:1rem;
  margin-bottom:3px;
  color:#2C7DA0;
}
.tool-content span { font-size:.8rem; color:#666; line-height:1.3; }

/* ── Sections contenu ── */
.content-section {
  background:white;
  border-radius:16px;
  padding:30px;
  margin-bottom:24px;
  box-shadow:0 3px 14px rgba(0,0,0,.06);
}
.content-section h2 {
  font-size:1.35rem;
  color:#2C7DA0;
  margin-bottom:1.2rem;
  padding-bottom:.7rem;
  border-bottom:2px solid #e8f4f9;
}

/* Items grid */
.items-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:18px;
}
.item-card {
  background:#f8f9fa;
  border-radius:14px;
  padding:18px;
  border-left:5px solid #2C7DA0;
  transition:transform .2s, box-shadow .2s;
}
.item-card:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(0,0,0,.1);
}
.item-header {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.item-code {
  font-size:1rem;
  font-weight:bold;
  color:#1F5E7A;
  background:#e3f2fd;
  padding:3px 10px;
  border-radius:20px;
}
.item-badge {
  background:#ff9800;
  color:white;
  padding:3px 10px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:bold;
}
.item-card h3 { color:#2C7DA0; margin:0 0 8px; font-size:1rem; }
.item-details {
  font-size:.85rem;
  color:#555;
  list-style:disc;
  padding-left:16px;
  line-height:1.7;
}

/* Points clés */
.key-points {
  background:#e8f5e9;
  border-radius:14px;
  padding:10px 20px;
}
.key-points li {
  list-style:none;
  padding:.45rem 0;
  font-size:.97rem;
  border-bottom:1px solid rgba(30,138,74,.1);
}
.key-points li:last-child { border-bottom:none; }

/* Objectifs */
.objectifs-list { list-style:none; padding:0; }
.objectifs-list li {
  padding:.4rem 0 .4rem 2rem;
  position:relative;
  border-bottom:1px solid #f0f0f0;
  font-size:.97rem;
}
.objectifs-list li:last-child { border-bottom:none; }
.objectifs-list li::before { content:"📘"; position:absolute; left:0; }

/* Bouton retour */
.back-button {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:#2C7DA0;
  color:white;
  padding:11px 24px;
  border-radius:30px;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  margin-top:10px;
  transition:background .25s, transform .2s;
}
.back-button:hover { background:#1F5E7A; transform:translateX(-4px); }

/* Loading */
.chap-loading {
  text-align:center;
  padding:4rem 2rem;
  color:#888;
}
.chap-loading .spinner {
  width:2.5rem; height:2.5rem;
  border:3px solid #e0e0e0;
  border-top-color:#2C7DA0;
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:0 auto 1rem;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Responsive ── */
@media(max-width:800px) {
  .quick-nav { flex-direction:column; }
  .chapter-header { padding:30px 20px; }
  .items-grid { grid-template-columns:1fr; }
}