/* ============================================
   SECONDE GUERRE MONDIALE 1939-1945 - STYLES
   Guide complet pour retrouver vos ancêtres
   ============================================ */

/* ————— Variables et Reset ————— */
:root {
  --guide-primary: #8b4513;
  --guide-primary-light: #a0522d;
  --guide-accent: #d4a373;
  --guide-success: #2d7a3e;
  --guide-warning: #d97706;
  --guide-error: #dc2626;
  --guide-info: #2563eb;

  --guide-bg-section: #f9fafb;
  --guide-bg-card: #ffffff;
  --guide-border: #e5e7eb;
  --guide-text: #1f2937;
  --guide-text-muted: #6b7280;
  --guide-shadow: rgba(0, 0, 0, 0.1);

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
}

/* ————— Container Global ————— */
.guide-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ————— Section Introduction ————— */
.guide-intro {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--guide-bg-section) 100%);
}

.intro-content h2 {
  font-size: 2rem;
  color: var(--guide-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.intro-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--guide-text);
  margin-bottom: var(--spacing-md);
}

.intro-text strong {
  color: var(--guide-primary);
  font-weight: 600;
}

/* ————— Sommaire (Table of Contents) ————— */
.guide-toc {
  padding: var(--spacing-xl) 0;
  background: var(--guide-bg-card);
  border-top: 1px solid var(--guide-border);
  border-bottom: 1px solid var(--guide-border);
}

.guide-toc h2 {
  font-size: 1.75rem;
  color: var(--guide-primary);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.toc-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.toc-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--guide-bg-section);
  border: 2px solid var(--guide-border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--guide-text);
  transition: all 0.3s ease;
}

.toc-item:hover {
  border-color: var(--guide-primary);
  background: var(--guide-bg-card);
  transform: translateX(8px);
  box-shadow: 0 4px 12px var(--guide-shadow);
}

.toc-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--guide-primary);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.toc-title {
  font-weight: 600;
  font-size: 1rem;
}

/* ————— Sections du Guide ————— */
.guide-section {
  padding: var(--spacing-2xl) 0;
}

.guide-section.alt-bg {
  background: var(--guide-bg-section);
}

.section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 3px solid var(--guide-primary);
}

.section-icon {
  font-size: 3rem;
  line-height: 1;
}

.section-header h2 {
  font-size: 2rem;
  color: var(--guide-primary);
  font-weight: 700;
  margin: 0;
}

.section-content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--guide-text);
}

.section-intro {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--guide-text);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--guide-bg-card);
  border-left: 4px solid var(--guide-primary);
  border-radius: 8px;
}

.section-content h3 {
  font-size: 1.5rem;
  color: var(--guide-primary-light);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
}

.section-content h4 {
  font-size: 1.25rem;
  color: var(--guide-text);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.mt-section {
  margin-top: var(--spacing-2xl) !important;
}

.mt-2 {
  margin-top: var(--spacing-sm);
}

.mt-3 {
  margin-top: var(--spacing-md);
}

/* ————— Listes ————— */
.section-content ul,
.section-content ol {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
}

.section-content li {
  margin-bottom: var(--spacing-xs);
  line-height: 1.75;
}

.checklist {
  list-style: none;
  padding-left: 0;
}

.checklist li {
  position: relative;
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--guide-success);
  font-weight: 700;
  font-size: 1.25rem;
}

/* ————— Boxes de Contenu ————— */
.tip-box,
.important-box,
.success-box,
.danger-box,
.info-box,
.cta-box {
  padding: var(--spacing-lg);
  border-radius: 12px;
  margin: var(--spacing-xl) 0;
  border-left: 6px solid;
}

.tip-box {
  background: #eff6ff;
  border-color: var(--guide-info);
}

.tip-box h3 {
  color: var(--guide-info) !important;
  margin-top: 0 !important;
}

.important-box {
  background: #fef3c7;
  border-color: var(--guide-warning);
}

.important-box h3 {
  color: var(--guide-warning) !important;
  margin-top: 0 !important;
}

.success-box {
  background: #d1fae5;
  border-color: var(--guide-success);
}

.success-box h3 {
  color: var(--guide-success) !important;
  margin-top: 0 !important;
}

.danger-box {
  background: #fee2e2;
  border-color: var(--guide-error);
}

.danger-box h3 {
  color: var(--guide-error) !important;
  margin-top: 0 !important;
}

.info-box {
  background: #eff6ff;
  border-color: var(--guide-info);
}

.info-box h3 {
  color: var(--guide-info) !important;
  margin-top: 0 !important;
}

.cta-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-color: var(--guide-primary);
  text-align: center;
}

.cta-box h4 {
  color: var(--guide-primary) !important;
  margin-top: 0 !important;
  font-size: 1.5rem;
}

.cta-box a {
  color: var(--guide-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* ————— Grilles de Cartes ————— */
.documents-grid,
.sources-grid,
.platforms-grid,
.info-cards,
.database-cards,
.resource-cards,
.archives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.document-card,
.source-card,
.platform-card,
.info-card,
.database-card,
.resource-card,
.archive-card {
  padding: var(--spacing-lg);
  background: var(--guide-bg-card);
  border: 2px solid var(--guide-border);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.document-card:hover,
.source-card:hover,
.platform-card:hover,
.info-card:hover,
.database-card:hover,
.resource-card:hover,
.archive-card:hover {
  border-color: var(--guide-primary);
  box-shadow: 0 8px 24px var(--guide-shadow);
  transform: translateY(-4px);
}

.doc-icon,
.card-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--spacing-sm);
}

.document-card h4,
.source-card h4,
.platform-card h4,
.info-card h4,
.database-card h4,
.resource-card h4,
.archive-card h4 {
  color: var(--guide-primary);
  margin-top: 0 !important;
  margin-bottom: var(--spacing-sm) !important;
  font-size: 1.125rem !important;
}

.document-card p,
.source-card p,
.info-card p,
.database-card p,
.resource-card p,
.archive-card p {
  color: var(--guide-text-muted);
  margin: 0;
  font-size: 0.9375rem;
}

/* ————— Cartes Plateformes ————— */
.platform-type {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--guide-primary);
  color: white;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.platform-desc {
  color: var(--guide-text);
  line-height: 1.6;
  margin: var(--spacing-sm) 0;
}

.platform-link,
.source-link,
.card-link {
  display: inline-block;
  margin-top: var(--spacing-sm);
  color: var(--guide-primary);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.platform-link:hover,
.source-link:hover,
.card-link:hover {
  color: var(--guide-primary-light);
  text-decoration: underline;
}

/* ————— Tableau de Comparaison ————— */
.comparison-table {
  margin: var(--spacing-lg) 0;
  overflow-x: auto;
}

.comparison-table h4 {
  margin-bottom: var(--spacing-md) !important;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--guide-bg-card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--guide-shadow);
}

.comparison-table thead {
  background: var(--guide-primary);
  color: white;
}

.comparison-table th,
.comparison-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--guide-border);
}

.comparison-table th {
  font-weight: 600;
  font-size: 1rem;
}

.comparison-table td {
  font-size: 0.9375rem;
}

.comparison-table tbody tr:hover {
  background: var(--guide-bg-section);
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* ————— Timeline ————— */
.timeline-box {
  margin: var(--spacing-lg) 0;
}

.timeline-item {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 75px;
  top: 60px;
  bottom: -32px;
  width: 2px;
  background: var(--guide-primary);
  opacity: 0.3;
}

.timeline-date {
  flex-shrink: 0;
  width: 140px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--guide-primary);
  color: white;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  height: fit-content;
}

.timeline-content {
  flex: 1;
  padding: var(--spacing-md);
  background: var(--guide-bg-card);
  border: 2px solid var(--guide-border);
  border-radius: 12px;
}

.timeline-content h4 {
  margin-top: 0 !important;
  color: var(--guide-primary) !important;
}

.timeline-content p {
  margin: var(--spacing-sm) 0 0;
}

/* ————— Tutoriel Étapes ————— */
.tutorial-steps,
.step-by-step {
  margin: var(--spacing-lg) 0;
}

.step-item {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.step-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 70px;
  bottom: -24px;
  width: 3px;
  background: linear-gradient(180deg, var(--guide-primary) 0%, var(--guide-accent) 100%);
}

.step-number {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--guide-primary) 0%, var(--guide-primary-light) 100%);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px var(--guide-shadow);
}

.step-content {
  flex: 1;
  padding: var(--spacing-lg);
  background: var(--guide-bg-card);
  border: 2px solid var(--guide-border);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.step-content:hover {
  border-color: var(--guide-primary);
  box-shadow: 0 8px 24px var(--guide-shadow);
}

.step-content h4 {
  margin-top: 0 !important;
  color: var(--guide-primary) !important;
  font-size: 1.375rem !important;
}

.step-content p {
  margin: var(--spacing-sm) 0;
}

.step-content ul {
  margin: var(--spacing-sm) 0;
}

.step-content a {
  color: var(--guide-primary);
  font-weight: 600;
}

/* ————— Tool Highlight (Outils Utilisateur) ————— */
.tool-highlight {
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border: 3px solid var(--guide-primary);
  border-radius: 12px;
  margin: var(--spacing-xl) 0;
}

.tool-highlight h3 {
  color: var(--guide-primary) !important;
  margin-top: 0 !important;
  text-align: center;
  font-size: 1.75rem !important;
}

.tool-highlight p {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.tool-link {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--guide-primary);
  color: white !important;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.0625rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px var(--guide-shadow);
}

.tool-link:hover {
  background: var(--guide-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--guide-shadow);
}

/* ————— Glossary Box ————— */
.glossary-box {
  padding: var(--spacing-lg);
  background: var(--guide-bg-card);
  border: 3px solid var(--guide-primary);
  border-radius: 12px;
  margin: var(--spacing-lg) 0;
}

.glossary-box h4 {
  margin-top: 0 !important;
  color: var(--guide-primary) !important;
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.glossary-term {
  padding: var(--spacing-md);
  background: var(--guide-bg-section);
  border-radius: 8px;
}

.glossary-term strong {
  color: var(--guide-primary);
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: 1.0625rem;
}

/* ————— Synthesis Box ————— */
.synthesis-box {
  padding: var(--spacing-xl);
  background: var(--guide-bg-card);
  border: 3px solid var(--guide-primary);
  border-radius: 12px;
  margin: var(--spacing-xl) 0;
}

.synthesis-box h3 {
  color: var(--guide-primary) !important;
  margin-top: 0 !important;
  text-align: center;
}

.chain-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}

.chain-step {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--guide-bg-section);
  border-radius: 8px;
  border-left: 4px solid var(--guide-primary);
}

.chain-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--guide-primary);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
}

/* ————— Organisation Fichiers ————— */
.file-organization {
  margin: var(--spacing-lg) 0;
}

.file-organization h4 {
  margin-bottom: var(--spacing-md) !important;
}

.file-organization pre {
  background: #1f2937;
  color: #f3f4f6;
  padding: var(--spacing-lg);
  border-radius: 12px;
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.file-organization code {
  color: #f3f4f6;
}

code {
  background: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--guide-primary);
}

/* ————— Pièges à Éviter ————— */
.pitfalls-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.pitfall-card {
  padding: var(--spacing-lg);
  background: var(--guide-bg-card);
  border: 2px solid var(--guide-border);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.pitfall-card.error {
  border-left: 6px solid var(--guide-error);
}

.pitfall-card:hover {
  box-shadow: 0 8px 24px var(--guide-shadow);
  transform: translateY(-4px);
}

.pitfall-icon {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
}

.pitfall-card h4 {
  color: var(--guide-error) !important;
  margin-top: 0 !important;
}

.pitfall-solution {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: #d1fae5;
  border-radius: 8px;
  border-left: 4px solid var(--guide-success);
}

.pitfall-solution strong {
  color: var(--guide-success);
}

/* ————— Règles d'Or ————— */
.best-practices {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-radius: 12px;
  border: 3px solid var(--guide-primary);
}

.best-practices h3 {
  color: var(--guide-primary) !important;
  margin-top: 0 !important;
  text-align: center;
  font-size: 1.75rem !important;
}

.golden-rules {
  counter-reset: rule-counter;
  list-style: none;
  padding-left: 0;
}

.golden-rules li {
  counter-increment: rule-counter;
  position: relative;
  padding: var(--spacing-md);
  padding-left: 4rem;
  margin-bottom: var(--spacing-md);
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--guide-shadow);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.golden-rules li::before {
  content: counter(rule-counter);
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--guide-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
}

/* ————— Communauté ————— */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.community-card {
  padding: var(--spacing-lg);
  background: var(--guide-bg-card);
  border: 2px solid var(--guide-border);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.community-card:hover {
  border-color: var(--guide-primary);
  box-shadow: 0 8px 24px var(--guide-shadow);
}

.community-card h4 {
  color: var(--guide-primary) !important;
  margin-top: 0 !important;
}

.community-card a {
  color: var(--guide-primary);
  font-weight: 600;
}

/* ————— Conclusion ————— */
.guide-conclusion {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(180deg, var(--guide-bg-section) 0%, #ffffff 100%);
}

.conclusion-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.conclusion-content h2 {
  font-size: 2.25rem;
  color: var(--guide-primary);
  margin-bottom: var(--spacing-lg);
}

.conclusion-content p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--guide-text);
  margin-bottom: var(--spacing-md);
}

.final-cta {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: var(--guide-bg-card);
  border: 2px solid var(--guide-border);
  border-radius: 12px;
}

.final-cta h3 {
  color: var(--guide-primary) !important;
  margin-top: 0 !important;
  margin-bottom: var(--spacing-lg) !important;
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--spacing-lg) 0;
}

.btn-primary-large,
.btn-secondary-large {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px var(--guide-shadow);
}

.btn-primary-large {
  background: var(--guide-primary);
  color: white;
}

.btn-primary-large:hover {
  background: var(--guide-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--guide-shadow);
}

.btn-secondary-large {
  background: white;
  color: var(--guide-primary);
  border: 2px solid var(--guide-primary);
}

.btn-secondary-large:hover {
  background: var(--guide-bg-section);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--guide-shadow);
}

.cta-note {
  margin-top: var(--spacing-lg);
  font-size: 0.9375rem;
  color: var(--guide-text-muted);
}

.cta-note a {
  color: var(--guide-primary);
  font-weight: 600;
}

/* ————————————————————————————————
   THÈME SOMBRE (Dark Mode)
   ———————————————————————————————— */
:root.theme-dark {
  --guide-bg-section: #1a1a1a;
  --guide-bg-card: #2a2a2a;
  --guide-border: #3a3a3a;
  --guide-text: #e5e7eb;
  --guide-text-muted: #9ca3af;
  --guide-shadow: rgba(0, 0, 0, 0.3);
}

:root.theme-dark .guide-intro {
  background: linear-gradient(180deg, #0f0f0f 0%, var(--guide-bg-section) 100%);
}

:root.theme-dark .intro-text strong {
  color: var(--guide-accent);
}

:root.theme-dark .guide-toc {
  background: var(--guide-bg-card);
  border-color: var(--guide-border);
}

:root.theme-dark .toc-item {
  background: var(--guide-bg-section);
  color: var(--guide-text);
  border-color: var(--guide-border);
}

:root.theme-dark .toc-item:hover {
  background: var(--guide-bg-card);
}

:root.theme-dark .section-intro {
  background: var(--guide-bg-card);
  color: var(--guide-text);
}

:root.theme-dark .tip-box {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--guide-info);
}

:root.theme-dark .important-box {
  background: rgba(217, 119, 6, 0.15);
  border-color: var(--guide-warning);
}

:root.theme-dark .success-box {
  background: rgba(45, 122, 62, 0.15);
  border-color: var(--guide-success);
}

:root.theme-dark .danger-box {
  background: rgba(220, 38, 38, 0.15);
  border-color: var(--guide-error);
}

:root.theme-dark .info-box {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--guide-info);
}

:root.theme-dark .cta-box,
:root.theme-dark .tool-highlight {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.1) 0%, rgba(254, 215, 170, 0.1) 100%);
}

:root.theme-dark .document-card,
:root.theme-dark .source-card,
:root.theme-dark .platform-card,
:root.theme-dark .info-card,
:root.theme-dark .database-card,
:root.theme-dark .resource-card,
:root.theme-dark .archive-card,
:root.theme-dark .community-card,
:root.theme-dark .pitfall-card,
:root.theme-dark .timeline-content,
:root.theme-dark .step-content,
:root.theme-dark .glossary-box,
:root.theme-dark .synthesis-box,
:root.theme-dark .final-cta {
  background: var(--guide-bg-card);
  border-color: var(--guide-border);
}

:root.theme-dark .document-card p,
:root.theme-dark .source-card p,
:root.theme-dark .info-card p,
:root.theme-dark .database-card p,
:root.theme-dark .resource-card p,
:root.theme-dark .archive-card p {
  color: var(--guide-text-muted);
}

:root.theme-dark .platform-desc,
:root.theme-dark .section-content {
  color: var(--guide-text);
}

:root.theme-dark .comparison-table table {
  background: var(--guide-bg-card);
}

:root.theme-dark .comparison-table tbody tr:hover {
  background: var(--guide-bg-section);
}

:root.theme-dark .glossary-term,
:root.theme-dark .chain-step {
  background: var(--guide-bg-section);
}

:root.theme-dark .file-organization pre {
  background: #0f0f0f;
  color: #e5e7eb;
}

:root.theme-dark code {
  background: var(--guide-bg-section);
  color: var(--guide-accent);
}

:root.theme-dark .pitfall-solution {
  background: rgba(45, 122, 62, 0.15);
}

:root.theme-dark .best-practices {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.1) 0%, rgba(254, 215, 170, 0.1) 100%);
}

:root.theme-dark .golden-rules li {
  background: var(--guide-bg-card);
}

:root.theme-dark .guide-conclusion {
  background: linear-gradient(180deg, var(--guide-bg-section) 0%, #0f0f0f 100%);
}

:root.theme-dark .btn-secondary-large {
  background: var(--guide-bg-card);
  color: var(--guide-accent);
  border-color: var(--guide-accent);
}

:root.theme-dark .btn-secondary-large:hover {
  background: var(--guide-bg-section);
}

/* ————————————————————————————————
   RESPONSIVE - Tablettes
   ———————————————————————————————— */
@media (max-width: 768px) {
  .guide-container {
    padding: 0 1.5rem;
  }

  .intro-content h2,
  .section-header h2 {
    font-size: 1.75rem;
  }

  .section-icon {
    font-size: 2.5rem;
  }

  .intro-text,
  .section-intro {
    font-size: 1.0625rem;
  }

  .toc-nav {
    grid-template-columns: 1fr;
  }

  .documents-grid,
  .sources-grid,
  .platforms-grid,
  .info-cards,
  .database-cards,
  .resource-cards,
  .archives-grid,
  .pitfalls-grid,
  .community-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .timeline-item::before {
    display: none;
  }

  .timeline-date {
    width: 100%;
  }

  .comparison-table {
    font-size: 0.875rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--spacing-sm);
  }

  .step-item {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .step-item::before {
    display: none;
  }

  .step-number {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .glossary-grid {
    grid-template-columns: 1fr;
  }

  .golden-rules li {
    padding-left: 3.5rem;
    font-size: 1rem;
  }

  .golden-rules li::before {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary-large,
  .btn-secondary-large {
    text-align: center;
  }
}

/* ————————————————————————————————
   RESPONSIVE - Mobiles
   ———————————————————————————————— */
@media (max-width: 480px) {
  .guide-container {
    padding: 0 1rem;
  }

  .guide-intro,
  .guide-section {
    padding: var(--spacing-lg) 0;
  }

  .intro-content h2,
  .section-header h2 {
    font-size: 1.5rem;
  }

  .section-icon {
    font-size: 2rem;
  }

  .section-header {
    gap: var(--spacing-sm);
  }

  .intro-text,
  .section-intro {
    font-size: 1rem;
  }

  .section-content {
    font-size: 1rem;
  }

  .section-content h3 {
    font-size: 1.25rem;
  }

  .section-content h4 {
    font-size: 1.125rem;
  }

  .toc-number {
    width: 36px;
    height: 36px;
    font-size: 1.125rem;
  }

  .toc-title {
    font-size: 0.9375rem;
  }

  .tip-box,
  .important-box,
  .success-box,
  .danger-box,
  .info-box,
  .cta-box {
    padding: var(--spacing-md);
  }

  .document-card,
  .source-card,
  .platform-card,
  .info-card,
  .database-card,
  .resource-card,
  .archive-card,
  .community-card,
  .pitfall-card {
    padding: var(--spacing-md);
  }

  .timeline-content,
  .step-content {
    padding: var(--spacing-md);
  }

  .comparison-table {
    font-size: 0.8125rem;
  }

  .file-organization pre {
    padding: var(--spacing-md);
    font-size: 0.8125rem;
  }

  .glossary-box,
  .synthesis-box,
  .tool-highlight,
  .best-practices {
    padding: var(--spacing-md);
  }

  .golden-rules li {
    padding: var(--spacing-sm);
    padding-left: 3rem;
    font-size: 0.9375rem;
  }

  .golden-rules li::before {
    width: 32px;
    height: 32px;
    font-size: 0.9375rem;
    left: var(--spacing-sm);
  }

  .conclusion-content h2 {
    font-size: 1.75rem;
  }

  .conclusion-content p {
    font-size: 1rem;
  }

  .final-cta {
    padding: var(--spacing-md);
  }

  .btn-primary-large,
  .btn-secondary-large {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
  }
}

/* ————— Animations ————— */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.guide-intro,
.guide-toc,
.guide-section {
  animation: fadeInUp 0.6s ease-out;
}

/* ————— Scroll Smooth ————— */
html {
  scroll-behavior: smooth;
}

/* ————————————————————————————————————————————————————————————————————————————
   Link Styling - Orange links matching site color scheme
—————————————————————————————————————————————————————————————————————————————— */

.guide-section a,
.section-content a,
.section-intro a,
.tip-box a,
.important-box a,
.success-box a,
.danger-box a,
.info-box a,
.platform-desc a,
.step-content a,
.documents-grid a,
.platforms-grid a,
.info-cards a,
.database-cards a,
.resource-cards a,
.archives-grid a,
.comparison-table a,
.resource-item a,
.glossary-box a,
.synthesis-box a,
.best-practices a,
.pitfalls-grid a {
  color: #a76107;
  text-decoration: none;
  transition: color 0.2s ease;
}

.guide-section a:hover,
.section-content a:hover,
.section-intro a:hover,
.tip-box a:hover,
.important-box a:hover,
.success-box a:hover,
.danger-box a:hover,
.info-box a:hover,
.platform-desc a:hover,
.step-content a:hover,
.documents-grid a:hover,
.platforms-grid a:hover,
.info-cards a:hover,
.database-cards a:hover,
.resource-cards a:hover,
.archives-grid a:hover,
.comparison-table a:hover,
.resource-item a:hover,
.glossary-box a:hover,
.synthesis-box a:hover,
.best-practices a:hover,
.pitfalls-grid a:hover {
  color: #d4822a;
}

/* Dark mode link colors */
:root.theme-dark .guide-section a,
:root.theme-dark .section-content a,
:root.theme-dark .section-intro a,
:root.theme-dark .tip-box a,
:root.theme-dark .important-box a,
:root.theme-dark .success-box a,
:root.theme-dark .danger-box a,
:root.theme-dark .info-box a,
:root.theme-dark .platform-desc a,
:root.theme-dark .step-content a,
:root.theme-dark .documents-grid a,
:root.theme-dark .platforms-grid a,
:root.theme-dark .info-cards a,
:root.theme-dark .database-cards a,
:root.theme-dark .resource-cards a,
:root.theme-dark .archives-grid a,
:root.theme-dark .comparison-table a,
:root.theme-dark .resource-item a,
:root.theme-dark .glossary-box a,
:root.theme-dark .synthesis-box a,
:root.theme-dark .best-practices a,
:root.theme-dark .pitfalls-grid a {
  color: #d4822a;
}

:root.theme-dark .guide-section a:hover,
:root.theme-dark .section-content a:hover,
:root.theme-dark .section-intro a:hover,
:root.theme-dark .tip-box a:hover,
:root.theme-dark .important-box a:hover,
:root.theme-dark .success-box a:hover,
:root.theme-dark .danger-box a:hover,
:root.theme-dark .info-box a:hover,
:root.theme-dark .platform-desc a:hover,
:root.theme-dark .step-content a:hover,
:root.theme-dark .documents-grid a:hover,
:root.theme-dark .platforms-grid a:hover,
:root.theme-dark .info-cards a:hover,
:root.theme-dark .database-cards a:hover,
:root.theme-dark .resource-cards a:hover,
:root.theme-dark .archives-grid a:hover,
:root.theme-dark .comparison-table a:hover,
:root.theme-dark .resource-item a:hover,
:root.theme-dark .glossary-box a:hover,
:root.theme-dark .synthesis-box a:hover,
:root.theme-dark .best-practices a:hover,
:root.theme-dark .pitfalls-grid a:hover {
  color: #f59e0b;
}

/* ————————————————————————————————————————————————————————————————————————————
   Print Styles
—————————————————————————————————————————————————————————————————————————————— */

@media print {
  .guide-container {
    max-width: 100%;
  }

  .toc-item,
  .btn-primary-large,
  .btn-secondary-large {
    page-break-inside: avoid;
  }

  .guide-section {
    page-break-inside: avoid;
  }
}