<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/**
 * style.css - Feuille de style principale
 * Application de cartographie interactive des bombardements atomiques
 * Développé par l'équipe M2 SIGAT - Université Rennes 2
 * LU CONG SANG Kévin.
 */

/* ----- NORMALISATION &amp; BASE ----- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

:root {
  /* Palette de couleurs principale */
  --primary: #AF0D1D;         /* Rouge principal - couleur de l'explosion */
  --primary-light: #D73C4E;   /* Rouge clair */
  --primary-dark: #7D0914;    /* Rouge foncé */
  
  /* Couleurs secondaires */
  --secondary: #1A1A1A;       /* Gris très foncé - presque noir */
  --secondary-light: #333;    /* Gris foncé */
  --secondary-lighter: #666;  /* Gris moyen */
  
  /* Couleurs de fond */
  --background: #FFFFFF;      /* Blanc */
  --background-alt: #F6F6F6;  /* Gris très clair */
  
  /* Couleurs de texte */
  --text: #1A1A1A;            /* Noir pour le texte principal */
  --text-light: #666;         /* Gris pour le texte secondaire */
  --text-lighter: #999;       /* Gris clair pour les légendes */
  --text-white: #FFF;         /* Blanc pour le texte sur fond sombre */
  
  /* Couleurs fonctionnelles */
  --success: #f39c9e;         /* Rose pour les zones sauvées */
  --warning: #ea504c;         /* Rouge clair pour les zones endommagées */
  --danger: #af0d1d;          /* Rouge foncé pour les zones détruites */
  
  /* Z-index layers */
  --z-back: 1;
  --z-normal: 2;
  --z-front: 3;
  --z-overlay: 10;
  --z-modal: 20;
  --z-extreme: 100;
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-normal: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.16), 0 6px 10px rgba(0,0,0,0.1);
  --shadow-xl: 0 15px 35px rgba(0,0,0,0.18), 0 10px 25px rgba(0,0,0,0.1);
}

/* Application des styles de base */
html, body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 16px;
  background-color: var(--background);
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: none; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  position: relative;
}

/* Typographie de base */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.8rem;
}

p {
  margin-bottom: 1em;
  line-height: 1.6;
}

/* ----- LIENS ----- */
a {
  color: var(--primary);
  text-decoration: underline;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.source-link {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.source-link:hover {
  color: var(--primary);
}

/* ----- LOADER ----- */
#loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--secondary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal);
  opacity: 1;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#loading-indicator.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-circle {
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 20px;
}

#loading-indicator p {
  color: var(--text-white);
  font-size: 1rem;
  letter-spacing: 1px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ----- BARRE DE PROGRESSION GLOBALE ----- */
#progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: var(--z-overlay);
}

#progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: var(--primary);
  transition: width 0.05s linear;
}

#progress-indicator {
  position: absolute;
  top: -2px;
  right: 0;
  width: 12px;
  height: 9px;
  background: var(--primary);
  border-radius: 6px;
  transform: translateX(0);
  box-shadow: 0 0 8px rgba(175, 13, 29, 0.8);
}

/* ----- CONTENEUR DE CARTE ----- */
#map-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-back);
  overflow: hidden;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1;
}

/* ----- CONTENEUR DE DÉFILEMENT ----- */
#scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-normal);
  overflow-y: scroll;
  overflow-x: hidden;
  background: transparent;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

#scroll-container::-webkit-scrollbar {
  display: none;
}

.scroller {
  position: relative;
  width: 100%;
}

.step {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: block;
}

/* ----- BADGE DE SECTION ----- */
.section-badge {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 15px;
  transform: translateY(0);
  transition: transform 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.sticky-content:hover .section-badge {
  transform: translateY(-3px);
}

/* ----- SECTION INTRO ----- */
.intro-background {
  background: var(--secondary);
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background: rgba(0, 0, 0, 0.1);
}

.intro-content {
  width: 80%;
  max-width: 900px;
  background: rgba(0, 0, 0, 0.7);
  padding: 50px;
  border-left: 6px solid var(--primary);
  box-shadow: var(--shadow-xl);
  position: relative;
  animation: fadeInUp 1.2s ease-out;
  transform: translateY(0);
  transition: transform 0.4s ease-out;
}

.intro-content:hover {
  transform: translateY(-5px);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-badge {
  position: absolute;
  top: -25px;
  left: -25px;
  background: var(--primary);
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px 15px;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: rotate(-5deg);
  z-index: 3;
}

.pulse-effect {
  animation: pulse-badge 3s infinite alternate;
}

@keyframes pulse-badge {
  0% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  100% {
    box-shadow: 0 4px 20px rgba(175, 13, 29, 0.8);
  }
}

.intro-title {
  text-align: center;
  font-size: 5rem;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.1;
  margin: 0;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.intro-line {
  display: block;
  margin-bottom: 5px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

.intro-content:hover .intro-line {
  transform: translateY(-3px);
}

.intro-line-highlight {
  display: block;
  color: var(--primary);
  font-size: 130%;
  margin: -5px 0;
  position: relative;
  z-index: 2;
  font-weight: 900;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}

.intro-separator {
  width: 80px;
  height: 4px;
  background: var(--primary);
  margin: 25px auto;
}

.intro-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 0.9rem;
  letter-spacing: 1px;
  max-width: 550px;
  margin: 25px auto 0;
}

.meta-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.meta-date, .byline {
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 3px;
  border-bottom: 2px solid rgba(175, 13, 29, 0.7);
}

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* ----- SECTION PACIFIC COMBINED ----- */
.pacific-combined {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: #F6F6F6;
}

.pacific-container {
  display: flex;
  width: 100%;
  min-height: 90vh;
  background-color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  max-width: 1800px;
}

/* Partie carte */
.pacific-map-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  overflow: hidden;
  padding: 0;
}

.pacific-map-side img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Partie texte */
.pacific-text-side {
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow-y: auto;
}

.pacific-badge {
  display: inline-block;
  background: #AF0D1D;
  color: white;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.pacific-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
  line-height: 1.2;
  color: #1A1A1A;
}

.pacific-content {
  color: #333;
}

.pacific-content p {
  margin-bottom: 20px;
  line-height: 1.6;
  text-align: justify;
  font-size: 16px;
}

.pacific-quote {
  margin: 30px 0;
  padding: 20px 30px;
  font-style: italic;
  font-size: 20px;
  border-left: 4px solid #AF0D1D;
  border-right: 4px solid #AF0D1D;
  background: #F6F6F6;
  position: relative;
  color: #333;
  text-align: center;
}

.pacific-quote::before {
  content: '"';
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 60px;
  color: #AF0D1D;
  opacity: 0.2;
  line-height: 1;
}

.pacific-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

/* ----- TIMELINE SECTION ----- */
#timeline {
  background-color: var(--background-alt);
  padding: 80px 0 120px;
  position: relative;
  overflow: hidden;
}

.timeline-header {
  text-align: center;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

.timeline-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 60px;
}

/* Container global de la timeline */
.timeline {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* Ligne verticale centrale */
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: linear-gradient(to bottom, 
    var(--primary-dark),
    var(--primary),
    var(--primary-light),
    var(--primary));
  transform: translateX(-50%);
  z-index: 0;
  border-radius: 3px;
  box-shadow: var(--shadow-md);
}

/* Style de chaque élément (bloc événement) */
.timeline-item {
  position: relative;
  width: 100%;
  margin-bottom: 70px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenu textuel et image des cartes */
.timeline-content,
.timeline-image {
  width: 42%;
  position: relative;
  z-index: 1;
}

.timeline-content {
  background: white;
  border: none;
  border-radius: 8px;
  padding: 25px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  overflow: hidden;
  transform: translateY(0);
}

.timeline-content:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.timeline-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  border: 3px solid white;
}

.timeline-image img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* Positionnement gauche-droite */
.timeline-content.left,
.timeline-image.left {
  margin-right: 8%;
  text-align: right;
}

.timeline-content.right,
.timeline-image.right {
  margin-left: 8%;
  text-align: left;
}

.timeline-caption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-light);
  margin-top: 8px;
  font-style: italic;
}

/* Bandeau coloré sur le côté */
.timeline-content::after {
  content: '';
  position: absolute;
  top: 0;
  width: 5px;
  height: 100%;
  background: var(--primary);
}

.timeline-content.left::after {
  right: 0;
}

.timeline-content.right::after {
  left: 0;
}

/* Animation au scroll */
.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Élément central final */
.timeline-item.center {
  width: 80%;
  margin-left: 10%;
  flex-direction: column;
  text-align: center;
  padding: 0;
  z-index: 2;
  margin-top: 30px;
}

.timeline-item.center .timeline-content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--primary);
  text-align: center;
}

.timeline-item.center .timeline-content::after {
  display: none;
}

/* Titres */
.timeline-title {
  font-size: 1.3rem;
  margin: 0 0 12px;
  color: var(--secondary);
  font-weight: 700;
  position: relative;
  padding-bottom: 10px;
}

.timeline-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 3px;
  background-color: var(--primary);
}

.timeline-content.left .timeline-title::after {
  right: 0;
}

.timeline-content.right .timeline-title::after {
  left: 0;
}

.timeline-item.center .timeline-title::after {
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
}

/* Mise en forme de la date */
.timeline-date {
  display: inline-block;
  font-weight: bold;
  color: white;
  margin-bottom: 15px;
  font-size: 0.95rem;
  background-color: var(--primary);
  padding: 6px 12px;
  border-radius: 30px;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
}

.timeline-item.center .timeline-date {
  background-color: var(--primary);
  font-size: 1.1rem;
  padding: 8px 15px;
}

.timeline-content p {
  margin: 0;
  line-height: 1.6;
  color: var(--text);
  font-size: 1rem;
}

/* Points sur la ligne */
.timeline-item::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  width: 20px;
  height: 20px;
  background: white;
  border: 4px solid var(--primary);
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 0 0 4px rgba(175, 13, 29, 0.3);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* Animation de pulsation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(175, 13, 29, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(175, 13, 29, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(175, 13, 29, 0);
  }
}

.timeline-item.visible::after {
  animation: pulse 2s infinite;
}

/* Style pour l'élément central (Heure H) */
.timeline-item.center::after {
  top: 10px;
  width: 30px;
  height: 30px;
  background: var(--primary);
  border: 4px solid white;
}

/* Horloge pour "Heure H" */
.timeline-clock {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.clock-face {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
  position: relative;
  border: 3px solid var(--primary);
  box-shadow: var(--shadow-md);
}

.clock-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 3px;
  background: var(--primary);
  transform-origin: 0 50%;
  transform: rotate(60deg);
}

.clock-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ----- SECTIONS D'ARTICLES ----- */
#lorem-section,
#post-infographie-section {
  background: white;
  color: var(--text);
  min-height: 60vh;
  padding: 80px 0;
}

.article-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.content-wrapper {
  padding: 0 20px;
  text-align: center;
}

.article-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1A1A1A;
  line-height: 1.2;
  text-align: center;
}

.article-content {
  color: #333;
  line-height: 1.6;
  max-width: 650px;
  margin: 0 auto;
}

/* Texte justifié */
.article-content p {
  text-align: justify;
  hyphens: auto;
}

.lead-paragraph {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
  color: #1A1A1A;
}

.article-quote {
  margin: 30px auto;
  padding: 20px 30px;
  font-style: italic;
  font-size: 20px;
  border-left: 4px solid #AF0D1D;
  border-right: 4px solid #AF0D1D;
  background: #F6F6F6;
  position: relative;
  color: #333;
  max-width: 550px;
  text-align: center;
}

.article-quote::before {
  content: '"';
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 60px;
  color: #AF0D1D;
  opacity: 0.2;
  line-height: 1;
}

.article-quote cite {
  display: block;
  margin-top: 10px;
  font-size: 16px;
}

/* ----- CONTENEURS STICKY (HIROSHIMA, NAGASAKI, RENNES) ----- */
.sticky-container {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 40px;
  z-index: var(--z-normal);
}

.sticky-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 35px;
  max-width: 550px;
  margin: 20px;
  box-shadow: var(--shadow-lg);
  border-radius: 8px;
  border-left: 5px solid var(--primary);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sticky-content:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

/* ----- CONTENEUR DE TEXTE &amp; CONTENU ----- */
.text-container {
  background: white;
  color: var(--text);
  padding: 30px;
}

.text-container h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: var(--secondary);
}

.intro-paragraph {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1.5em;
  color: var(--secondary);
}

/* Points d'impact */
.impact-legend {
  list-style: none;
  margin: 20px 0;
}

/* Ajoute les deux-points avec espaces insécables après les balises strong */
.impact-legend li strong::after {
  content: "\00A0:\00A0";
}

/* Empêche le retour à la ligne dans les éléments de légende */
.impact-legend li {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}

/* Assure que le texte strong ne se rétrécit pas */
.impact-legend li strong {
  flex-shrink: 0;
  white-space: nowrap;
}

/* S'assure que le point de couleur reste aligné */
.impact-legend .impact-dot {
  flex-shrink: 0;
  margin-right: 10px;
  margin-top: 4px;
}

.impact-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.impact-dot.destruction {
  background: var(--danger);
}

.impact-dot.partial, .impact-dot.fire {
  background: var(--warning);
}

.impact-dot.spared {
  background: var(--success);
}

/* Conteneur de statistiques */
.stat-container {
  display: flex;
  gap: 20px;
  margin: 30px 0;
}

.stat-item {
  flex: 1;
  background: var(--background-alt);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  border-bottom: 3px solid var(--primary);
  transition: transform 0.2s ease;
}

.stat-item:hover {
  transform: translateY(-3px);
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary);
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* ----- SECTIONS HIROSHIMA, NAGASAKI ET RENNES IMPACT ----- */
#hiroshima,
#nagasaki,
#rennes-impact {
  min-height: 200vh;
}

/* ----- SECTION INFOGRAPHIE ----- */
#infographie-hiroshima {
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 60px 0;
}

.infographie-container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 40px;
  gap: 40px;
}

.infographie-text {
  flex: 0 0 40%;
  background: white;
  padding: 30px;
  color: var(--text);
  box-shadow: var(--shadow-md);
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.infographie-text:hover {
  transform: translateY(-5px);
}

.infographie-tabs {
  display: flex;
  margin: 25px 0 15px;
  border-bottom: 2px solid var(--background-alt);
}

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  font-weight: bold;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tab-btn:hover {
  color: var(--primary);
}

.tab-btn.active {
  color: var(--primary);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
}

.tab-content {
  display: none;
  padding: 20px 0;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.data-list {
  list-style: none;
}

.data-list li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--background-alt);
}

.data-list li:last-child {
  border-bottom: none;
}

.data-list li strong {
  color: var(--secondary);
}

/* Partie interactive de l'infographie */
.infographie-image {
  flex: 0 0 60%;
}

.infographie-interactive {
  background: var(--secondary-light);
  padding: 30px;
  border-radius: 8px;
  color: white;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Affichage des bombes */
.bomb-display {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
}

.bomb-display img {
  max-height: 300px;
  max-width: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.bomb-display img:hover {
  transform: translateY(-10px);
}

.bomb-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  text-align: center;
  border-radius: 0 0 8px 8px;
}

.bomb-info span {
  font-weight: bold;
  font-size: 1.2rem;
}

.bomb-info .bomb-power {
  color: var(--primary-light);
  margin-left: 10px;
}

/* Animations pour les bombes */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-bomb {
  animation: fadeInScale 0.5s ease forwards;
}

/* ----- SECTION CONCLUSION ----- */
#conclusion {
  background: white;
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 80px;
}

/* Style pour le bandeau pleine largeur */
.full-width-banner {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  height: 620px;
}

.full-width-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.full-width-banner .image-credit {
  position: absolute;
  bottom: 15px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
}

/* ----- LÉGENDE FIXES ----- */
#fixed-legend {
  position: fixed !important;
  top: 20px !important;
  left: 20px !important;
  z-index: var(--z-overlay) !important;
}

.fixed-legend-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-md);
  border: none;
  border-left: 4px solid var(--primary);
  transform: translateY(0);
  transition: transform 0.3s ease;
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.fixed-legend-content:hover {
  transform: translateY(-3px);
}

.legend-title {
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--secondary);
}

.toggle-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #eee;
  border-radius: 30px;
  cursor: pointer;
  padding: 8px 12px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 8px;
}

.toggle-btn:hover {
  background: white;
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.toggle-btn.inactive {
  opacity: 0.5;
}

.toggle-btn svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.toggle-label {
  font-size: 0.85em;
  color: var(--text);
}

/* ----- FOOTER ----- */
#footer {
  background: #292929;
  color: #e0e0e0;
  padding: 60px 0;
}

.footer-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

/* HEADER SECTION */
.footer-header {
  margin-bottom: 60px;
  border-bottom: 1px solid #404040;
  padding-bottom: 40px;
}

.footer-logo {
  text-align: center;
}

.footer-brand-img {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 30px;
}

.footer-logo-img {
  height: 50px;
  transition: transform 0.3s ease;
}

.footer-logo-img:hover {
  transform: translateY(-3px);
}

.footer-logo h2 {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.footer-logo-img[src*="sigat"] {
  height: 80px !important;
}

/* MAIN CONTENT - GRID */
.footer-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 60px;
}

.footer-column h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 10px;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: #af0d1d;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 10px;
}

/* BIBLIOGRAPHY SECTION */
.bibliography-toggle {
  width: 100%;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #404040;
}

.bibliography-toggle h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.toggle-icon {
  transition: transform 0.3s ease;
}

.bibliography-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

.bibliography-content {
  display: none;
  animation: slideDown 0.5s ease forwards;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.bibliography-content[aria-hidden="false"] {
  display: block;
  animation: slideDown 0.5s ease forwards;
}

.bibliography-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
}

.bibliography-group {
  background: rgba(255, 255, 255, 0.02);
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #404040;
}

.bibliography-group h4 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #404040;
}

.bibliography-item {
  margin-bottom: 20px;
  position: relative;
  padding: 15px;
  background: rgba(255, 255, 255, 0.01);
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
}

.bibliography-item:hover {
  border-left-color: #af0d1d;
  background: rgba(255, 255, 255, 0.03);
}

.bibliography-item p {
  margin: 0;
  line-height: 1.6;
}

.bibliography-category {
  display: inline-block;
  background: #af0d1d;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-top: 8px;
}

/* COPYRIGHT BAR */
.footer-copyright {
  border-top: 1px solid #404040;
  padding-top: 30px;
  margin-top: 60px;
}

.copyright-container {
  text-align: center;
}

/* Animation pour la bibliographie */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.bibliography-content.closing {
  animation: slideUp 0.5s ease forwards;
}

/* Style pour la ligne avec séparateurs */
.additional-credit {
  margin-top: 8px;
  font-size: 0.85em;
  text-align: center;
  position: relative;
  padding-top: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.additional-credit:before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.dev-tag {
  color: rgba(255, 255, 255, 0.5);
  margin-right: 5px;
}

.dev-names a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.dev-names a:hover {
  color: #fff;
  text-shadow: 0 0 5px rgba(175, 13, 29, 0.5);
}

/* ----- ANIMATIONS GÉNÉRALES ----- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- STYLES POUR LES INFOGRAPHIES DE BOMBES ----- */
.infographie-interactive {
  height: 600px !important;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bomb-container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bomb-container img {
  max-height: 450px;
  width: auto;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.bomb-container img:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.5));
}

.bomb-title {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  width: 100%;
  padding: 10px 15px;
  text-align: center;
  border-radius: 4px;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bomb-name {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Comparaison des bombes */
.bombs-comparison {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ----- RESPONSIVE DESIGN ----- */
@media (max-width: 1200px) {
  .intro-title {
    font-size: 4rem;
  }
  
  .intro-content {
    width: 90%;
    padding: 40px;
  }
  
  .infographie-container {
    flex-direction: column;
    align-items: center;
  }
  
  .infographie-text,
  .infographie-image {
    flex: 0 0 100%;
    max-width: 700px;
    width: 100%;
    margin-bottom: 30px;
  }
  
  .sticky-container {
    justify-content: center;
    padding-right: 0;
  }
  
  .sticky-content {
    max-width: 90%;
  }
  
  #conclusion .article-container {
    max-width: 90%;
  }
  
  /* Responsive pour la timeline */
  .timeline-item {
    flex-direction: column;
    align-items: center;
  }
  
  .timeline-content, .timeline-image {
    width: 80%;
    margin: 0 0 20px 0 !important;
    text-align: center !important;
  }
  
  .timeline-content.left .timeline-title::after,
  .timeline-content.right .timeline-title::after {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
  }
  
  /* Responsive pour la section Pacific */
  .pacific-container {
    flex-direction: column;
  }
  
  .pacific-map-side, .pacific-text-side {
    flex: none;
    width: 100%;
  }
  
  .pacific-map-side {
    height: 50vh;
  }
  
  .pacific-text-side {
    padding: 30px;
  }
  
  /* Responsive pour les bombes */
  .bombs-comparison {
    flex-direction: column;
    gap: 30px;
  }
  
  .bomb-container {
    width: 100%;
  }
  
  .bomb-container img {
    max-height: 300px;
  }
}

@media (max-width: 900px) {
  h1 {
    font-size: 2.8rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .intro-title {
    font-size: 3.2rem;
  }
  
  .intro-badge {
    font-size: 1rem;
    top: -20px;
    left: -15px;
  }
  
  .intro-content {
    padding: 30px;
  }
  
  #fixed-legend {
    left: 10px;
    bottom: 10px;
    top: auto;
  }
  
  .fixed-legend-content {
    max-width: calc(100vw - 20px);
  }
  
  .infographie-interactive {
    height: auto;
    padding: 20px;
  }
  
  .bomb-display {
    height: auto;
    margin-bottom: 40px;
  }
  
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .full-width-banner {
    height: 300px;
  }
  
  .article-title {
    font-size: 24px;
  }
  
  .lead-paragraph {
    font-size: 16px;
  }
  
  .article-quote {
    font-size: 18px;
    padding: 15px 20px;
  }
  
  .content-container {
    padding: 0 15px;
  }
}

@media (max-width: 768px) {
  .footer-content {
    padding: 40px 20px;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-brand-img {
    flex-direction: column;
    gap: 20px;
  }
  
  .bibliography-grid {
    grid-template-columns: 1fr;
  }
  
  /* Ajustement pour l'affichage mobile */
  html, body {
    overflow: auto !important;
    height: auto !important;
    position: static !important;
  }
  
  #scroll-container {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .sticky-container {
    position: relative !important;
    height: auto !important;
    top: auto !important;
  }
  
  #map-container {
    position: relative !important;
    height: 50vh !important;
    margin-bottom: 20px !important;
  }
  
  #fixed-legend {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1000 !important;
  }
}

@media (max-width: 600px) {
  body {
    cursor: auto;
  }
  
  .intro-title {
    font-size: 2.5rem;
  }
  
  .intro-line-highlight {
    font-size: 120%;
  }
  
  .intro-meta {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .timeline::before {
    left: 20px;
  }
  
  /* Adaptation responsive pour la timeline */
  .timeline {
    width: 95%;
  }
  
  .timeline-item {
    width: 100%;
    padding-left: 50px;
    padding-right: 15px;
    left: 0 !important;
    text-align: left !important;
    margin-bottom: 40px;
  }
  
  .timeline-content, .timeline-image {
    width: 100% !important;
  }
  
  .timeline-item::after {
    left: 12px;
    right: auto;
  }
  
  .timeline-content.left::after,
  .timeline-content.right::after {
    left: 0;
    right: auto;
  }
  
  .sticky-content {
    max-width: 100%;
    margin: 10px;
    padding: 20px;
  }
  
  .stat-container {
    flex-direction: column;
    gap: 10px;
  }
  
  .tab-btn {
    padding: 10px;
    font-size: 0.9rem;
  }
  
  .full-width-banner {
    height: 200px;
  }
  
  #conclusion .article-quote {
    padding: 15px;
    font-size: 16px;
  }
  
  #progress-container {
    height: 4px;
  }
  
  /* Rendre les légendes adaptées au mobile */
  #fixed-legend {
    width: calc(100% - 20px);
    text-align: center;
  }
  
  .fixed-legend-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .toggle-btn {
    margin: 5px;
  }
  
  .lead-paragraph {
    font-size: 1.1rem;
  }
  
  .clock-face {
    width: 60px;
    height: 60px;
  }
  
  .clock-hand {
    width: 25px;
  }
  
  /* Ajustements pour les liens dans le footer */
  .additional-credit {
    font-size: 0.75em;
  }
  
  .dev-names {
    display: block;
    margin-top: 5px;
  }
  
  /* Ajustements pour les bombes */
  .infographie-interactive {
    height: auto !important;
    min-height: 500px;
  }
  
  .bomb-container img {
    max-height: 250px;
  }
  
  .bomb-name {
    font-size: 1.2rem;
  }
}

.mobile-hidden {
  display: none !important;
}
#mobile-blocker, #mobile-blocker * {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace !important;
}

#mobile-blocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  color: white;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Times New Roman', Times, serif;
  overflow: hidden;
}

/* Particules aléatoires */
#mobile-blocker::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: particle1 12s infinite ease-in-out;
  box-shadow: 
    23vw 4vh 1px 0px rgba(255,255,255,0.6),
    67vw 12vh 0px 1px rgba(255,255,255,0.4),
    15vw 33vh 1px 0px rgba(255,255,255,0.8),
    78vw 23vh 0px 1px rgba(255,255,255,0.3),
    45vw 67vh 1px 1px rgba(255,255,255,0.7),
    90vw 45vh 0px 0px rgba(255,255,255,0.5),
    12vw 78vh 1px 0px rgba(255,255,255,0.4),
    56vw 89vh 0px 1px rgba(255,255,255,0.6),
    34vw 56vh 1px 1px rgba(255,255,255,0.3),
    89vw 78vh 0px 0px rgba(255,255,255,0.8);
}

#mobile-blocker::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  animation: particle2 18s infinite ease-in-out;
  animation-delay: -6s;
  box-shadow: 
    31vw 18vh 0px 1px rgba(255,255,255,0.4),
    84vw 6vh 1px 0px rgba(255,255,255,0.6),
    8vw 47vh 0px 1px rgba(255,255,255,0.3),
    63vw 82vh 1px 0px rgba(255,255,255,0.7),
    19vw 39vh 0px 0px rgba(255,255,255,0.5),
    97vw 63vh 1px 1px rgba(255,255,255,0.4),
    27vw 91vh 0px 0px rgba(255,255,255,0.8),
    71vw 27vh 1px 0px rgba(255,255,255,0.3),
    46vw 74vh 0px 1px rgba(255,255,255,0.6),
    2vw 15vh 1px 0px rgba(255,255,255,0.5);
}

@keyframes particle1 {
  0%, 100% { 
    transform: translateY(100vh) translateX(0px) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(-10px) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(-10vh) translateX(10px) scale(1);
  }
}

@keyframes particle2 {
  0%, 100% { 
    transform: translateY(100vh) translateX(0px) rotate(0deg) scale(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translateY(85vh) translateX(15px) rotate(90deg) scale(1);
  }
  85% {
    opacity: 1;
    transform: translateY(-15vh) translateX(-15px) rotate(360deg) scale(1);
  }
}

.blocker-wrapper {
  text-align: center;
  max-width: 400px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.blocker-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.8;
}

.blocker-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.blocker-text {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
  opacity: 0.9;
}

.blocker-footer {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

.highlight {
  background: #FEFF99;
  color: black;
  padding: 2px 4px;
}
</pre></body></html>