/* =========================================================
   /css/guide.css — Styles partagés pour les pages "Guide"
   Utilisé par : guide_evc.html + guide_evc_2026.html
   Doit être chargé APRÈS /styles.css ET /css/theme-elegance.css
   ========================================================= */

/* ── LAYOUT PRINCIPAL ───────────────────────────────────── */
.guide-wrapper {
  margin: 0 auto;
}

/* ── TABLE DES MATIÈRES ─────────────────────────────────── */
.toc-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(26, 47, 79, 0.06);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.toc-card h2 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #c89b6e;                  /* accent chaud (élégance) */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 24px;
}
.toc-grid a {
  color: #1a2f4f;                  /* navy */
  text-decoration: none;
  font-size: 0.95rem;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  display: block;
}
.toc-grid a:hover {
  color: #2c4a6e;                  /* navy soft */
  border-bottom-color: #2c4a6e;
}

/* ── SECTIONS ───────────────────────────────────────────── */
.section {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(26, 47, 79, 0.06);
  padding: 30px 36px;
  margin-bottom: 20px;
  scroll-margin-top: 24px;
}
.section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0f0f0;
}
.section-number {
  background: linear-gradient(135deg, #1a2f4f 0%, #2c4a6e 45%, #4a5d8f 100%);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.section h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a2332;
  margin: 0;
}

/* ── TYPO INTERNE (tailles héritées du global) ──────────── */
.section p {
  margin-bottom: 12px;
}
.section p:last-child { margin-bottom: 0; }

.section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2f4f;                  /* navy (avant : violet) */
  margin: 20px 0 8px;
}
.section h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #c89b6e;                  /* accent chaud (avant : violet) */
  margin: 16px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.section ul,
.section ol {
  padding-left: 22px;
  margin: 8px 0 12px;
}
.section li {
  margin-bottom: 6px;
  font-size: inherit;
  line-height: 1.6;
}

/* ── ÉTAPES ─────────────────────────────────────────────── */
.step-block {
  border-left: 4px solid #1a2f4f;  /* navy */
  padding: 14px 18px;
  margin: 14px 0;
  background: #f6f7fb;             /* surface neutre */
  border-radius: 0 8px 8px 0;
  font-size: inherit;
  line-height: 1.6;
}
.step-block strong { color: #1a2f4f; }

/* ── CALLOUTS ───────────────────────────────────────────── */
.callout {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 14px 0;
}
.callout-content {
  flex: 1;
  font-size: inherit;
  line-height: 1.6;
}
.callout-content p {
  margin-bottom: 6px;
  font-size: inherit;
}
.callout-content p:last-child { margin-bottom: 0; }
.callout-green  { background: #f0faf4; border-left: 4px solid #4caf50; }
.callout-orange { background: #fff8f0; border-left: 4px solid #ff9800; }
.callout-red    { background: #fff0f0; border-left: 4px solid #f44336; }
.callout-gray   { background: #f6f7fb; border-left: 4px solid #999; }
.callout-blue   { background: #f0f4ff; border-left: 4px solid #4a90e2; }
.callout-yellow { background: #fffde7; border-left: 4px solid #ffc107; }
.callout .icon  { font-size: 1.2rem; flex-shrink: 0; line-height: 1.6; }

/* ── ACCORDION ──────────────────────────────────────────── */
details.section-detail {
  border: 1px solid #e8eaef;
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
}
details.section-detail summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  color: #1a2332;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f7fb;
  transition: background 0.2s;
  font-size: inherit;
  line-height: 1.6;
}
details.section-detail summary:hover { background: #eef0f5; }
details.section-detail summary::-webkit-details-marker { display: none; }
details.section-detail summary::after {
  content: '▸';
  color: #1a2f4f;
  transition: transform 0.2s;
  flex-shrink: 0;
}
details.section-detail[open] summary::after { transform: rotate(90deg); }
details.section-detail .detail-content {
  padding: 16px 18px;
  border-top: 1px solid #e8eaef;
  font-size: inherit;
  line-height: 1.6;
}
details.section-detail .detail-content p { font-size: inherit; }
details.section-detail .detail-content li { font-size: inherit; }

/* ── BADGE NUMÉRO DE SECTION (utilisé dans guide_evc) ──── */
.section-number-badge {
  display: inline-block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* brand */
  color: #ffffff;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-right: 8px;
}

/* ── CTA BLOC FINAL ─────────────────────────────────────── */
.cta-block {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* brand */
  color: #ffffff;
  padding: 40px 24px;
  border-radius: 12px;
  margin-top: 32px;
  text-align: center;
}
.cta-block h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #ffffff;
}
.cta-block p {
  opacity: 0.92;
  margin-bottom: 22px;
  color: #ffffff;
}
.cta-block .cta-button {
  font-size: 1rem;
  padding: 14px 30px;
}

/* ── BLOCKQUOTE ─────────────────────────────────────────── */
.section blockquote {
  border-left: 3px solid #1a2f4f;
  padding: 10px 16px;
  margin: 14px 0;
  color: #5a6478;
  font-style: italic;
  background: #f6f7fb;
  border-radius: 0 6px 6px 0;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media screen and (max-width: 1200px) {
  .section,
  .toc-card { font-size: 1rem; }
}

@media screen and (max-width: 768px) {
  .section,
  .toc-card {
    font-size: 0.95rem;
    padding: 22px 18px;
  }
  .section h2 { font-size: 1.1rem; }
  .section h3 { font-size: 1rem; }
  .section h4 { font-size: 0.85rem; }
  .toc-card   { padding: 20px 18px; }
  .section-number { width: 34px; height: 34px; font-size: 0.9rem; }
  .toc-grid   { grid-template-columns: 1fr 1fr; }
  .cta-block h2 { font-size: 1.3rem; }
  details.section-detail summary { padding: 12px 14px; }
  details.section-detail .detail-content { padding: 12px 14px; }
  .callout { padding: 12px 14px; }
  .step-block { padding: 12px 14px; }
}

@media screen and (max-width: 480px) {
  .section,
  .toc-card { font-size: 0.85rem; }
  .guide-wrapper { padding: 0 12px 32px; }
  .section { padding: 16px 12px; }
  .toc-grid { grid-template-columns: 1fr; }
  .cta-block { padding: 28px 16px; }
  .section h2 { font-size: 1rem; }
  .section h3 { font-size: 0.95rem; }
  details.section-detail summary { padding: 10px 12px; }
  details.section-detail .detail-content { padding: 10px 12px; }
  .callout { padding: 10px 12px; gap: 8px; }
  .step-block { padding: 10px 12px; }
}