:root {
  --bg-dark:            #191c22;
  --text-light:         #f2f6ff;
  --accent-blue:        #45c7ff;
  --accent-light-blue:  #a4e4ff;
  --txt-muted:          #ccc;
  --shadow-light:       rgba(69,199,255,0.8);
  --shadow-soft:        rgba(255,255,255,0.1);
  --fs-base:            1rem;
  --fs-small:           0.9rem;
  --fs-large:           2rem;
  --lh-base:            1.4;
  --gap:                1rem;
  --radius:             8px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
  font-family: 'Inter', sans-serif;
  text-align: center;
  color: var(--text-light);
  background: var(--bg-dark) url('../img/background.png') no-repeat center center fixed;
  background-size: cover;
}

main {
  padding: 1.5rem;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.85);
  padding: 1rem;
}

.logo-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo {
  width: 42px;
  height: auto;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent-blue);
  text-shadow:
    0 0 12px var(--accent-blue),
    0 0 18px rgba(69,199,255,0.8),
    0 0 30px rgba(69,199,255,0.6);
  animation: neon-slide 2.5s ease-out forwards;
}

@keyframes neon-slide {
  0%   { opacity: 0; transform: translateY(20px); }
  50%  { opacity: 0.6; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-blue);
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.8), 
    0 0 8px var(--accent-blue),
    0 0 12px rgba(69,199,255,0.5),
    0 0 20px rgba(164,228,255,0.3);
}

/* ——— NAVBAR ——— */
#navbar-container > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(25, 28, 34, 0.85);
  padding: 1rem 1.5rem;
  position: relative;
  z-index: 1000;
  flex-wrap: nowrap;
}

#navbar-container > header .navbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#navbar-container > header .navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Logo */
#navbar-container > header .logo {
  width: clamp(30px, 8vw, 42px);
  height: auto;
}

/* Titre */
#navbar-container > header .site-title {
  font-weight: 900;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: var(--accent-blue);
  text-shadow: 0 0 8px var(--accent-blue), 0 0 16px var(--accent-blue);
  animation: neon-slide 2s ease-out forwards;
}

.language-selector select{
  width: 120px;                 /* largeur compacte */
  appearance: none;
  background-color: #111;
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;           /* centre Chrome */
  text-align-last: center;      /* centre Firefox/Edge */

  /* espace pour l'icône à gauche */
  padding: 0.45rem 0.75rem 0.45rem 2.25rem;

  /* Icône globe (SVG) à gauche */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345c7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2c3 4 3 16 0 20M12 2c-3 4-3 16 0 20'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 18px 18px;
}

.language-selector select:focus{
  box-shadow: 0 0 0 3px rgba(69,199,255,.25);
  outline: none;
}

/* Hamburger */
.hamburger {
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--accent-blue);
  padding: 0.5rem;
  cursor: pointer;
  display: block;
}

/* Menu mobile (par défaut masqué) */
#mobileMenu.mobile-menu {
  position: absolute;
  top: 64px;
  right: 1rem;
  width: 180px;
  background-color: var(--bg-dark);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition: opacity 0.2s ease;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}

#mobileMenu.mobile-menu:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

#mobileMenu.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobileMenu.mobile-menu li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

#mobileMenu.mobile-menu li:last-child {
  border-bottom: none;
}

#mobileMenu.mobile-menu ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-light);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

#mobileMenu.mobile-menu ul li a:hover,
#mobileMenu.mobile-menu ul li a:focus {
  color: var(--accent-light-blue);
}

#mobileMenu.mobile-menu .language-selector {
  display: flex;
  justify-content: center;
}

/* ——— VERSION DESKTOP ——— */
@media (min-width: 768px) {
  .hamburger {
    display: none;
  }

  #mobileMenu.mobile-menu {
    all: unset;
    display: block;
  }

  #mobileMenu.mobile-menu ul {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: flex-end;
    align-items: center;
  }

  #mobileMenu.mobile-menu li {
    border-bottom: none;
  }

  #mobileMenu.mobile-menu ul li a {
    padding: 0.25rem 0;
    color: var(--accent-blue);
    font-weight: 600;
    text-shadow: none;
  }

  #mobileMenu.mobile-menu .language-selector {
    margin-top: 0;
    margin-left: 1rem;
    width: auto;
  }

  .language-selector select {
    width: auto;
  }
}

/* ——— Fireball & Iceball positions ——— */
.fireball-cloud,
.iceball-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: 2rem;
  padding-bottom: 2rem;
}

.fireball-wrapper,
.iceball-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  text-align: center;
}

.fireball-number {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translate(-50%, 10%);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text-light);
  text-shadow: 0 0 6px #000, 0 0 3px #f80;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  white-space: nowrap;
}

.iceball-number {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--text-light);
  text-shadow: 0 0 6px #000, 0 0 4px #00ccff;
  pointer-events: none;
  z-index: 2;
  line-height: 1;
  white-space: nowrap;
}

.fireball-gif { width: 170px; height: 170px; }
.iceball-gif { width: 80px; height: 80px; }

/* ——— Responsive adjustments ——— */
@media (max-width: 480px) {
  .fireball-wrapper,
  .iceball-wrapper {
    width: 72px;
    height: 100px;
  }

  /* GIFs réduits */
  .fireball-gif {
    width: 95px;
    height: 95px;
  }
  .iceball-gif {
    width: 50px;
    height: 50px;
  }

  /* Numéro boule de feu */
  .fireball-number {
    top: 69px;             /* placement mobile corrigé */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
  }

  /* Numéro boule de glace */
  .iceball-number {
    top: 26px;             /* placement mobile corrigé */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
  }

  /* Légende sous chaque boule */
  .fireball-count,
  .iceball-count {
    font-size: 0.9rem;
  }
}

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

/* 2. Base layout & typographie */
.welcome {
  padding: 2rem 1rem;
}

h1, h2, h3, h4 {
  margin: 0.5em 0;
  font-weight: 800;
  text-shadow:     
    0 0 12px var(--accent-blue),
    0 0 18px rgba(69,199,255,0.6),
    0 0 30px rgba(164,228,255,0.4);
}

h1 {
  font-size: 2.5rem;
  color: var(--accent-blue);
}

h2 {
  font-size: var(--fs-large);
  color: var(--accent-blue);
}

h3 {
  font-size: 1.4rem;
  color: var(--accent-light-blue);
}

.highlight {
  color: var(--accent-light-blue);
  font-weight: bold;
}

p {
  margin: var(--gap) 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-light);
}

ul li {
  margin: 0.5rem 0;
}

.cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  background-color: var(--text-light);
  color: var(--bg-dark);
  border-radius: var(--radius);
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.cta:hover {
  transform: scale(1.05);
}

/* 3.1. Grilles flexibles */
.grid,
.lottery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  gap: var(--gap);
  padding: 0 1rem;
}

.pair-grid,
.triplet-grid,
.parity-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

/* Grille spécifique pour Écart */
.ecart-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

/* 3.2. Carte de loterie */
.lottery-card {
  background: transparent;
  border: none;
  padding: 1.2rem;
  margin: 1rem auto;
  max-width: 90%;
  text-align: center;
}

.lottery-card img {
  width: 64px;
  margin-bottom: 0.6rem;
  filter: drop-shadow(0 0 16px var(--accent-blue)88) brightness(1.1);
  animation: levitate 3.2s ease-in-out infinite alternate;
}

.lottery-card span {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-light);
  text-shadow: 0 0 6px var(--accent-blue)33;
}

/* 3.3. Bouton principal */
.lottery-btn {
  background: linear-gradient(135deg, var(--accent-blue), #1e90ff);
  color: var(--text-light);
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 24px;
  font-weight: bold;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:
    0 0 12px var(--accent-blue)88,
    0 0 24px #1e90ff44;
}

.lottery-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 18px var(--accent-blue)aa,
    0 0 32px #1e90ff88;
}

/* 3.4. Animation « levitate » */
@keyframes levitate {
  from { transform: translateY(-8px); }
  to   { transform: translateY(0); }
}

/* Container de chaque section */
.accordion-section {
  margin: var(--gap) 0;
}

/* Titre cliquable */
.accordion-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
}

/* Flèche animée */
.accordion-toggle .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Contenu masqué */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* État ouvert */
.accordion-section.open .accordion-content {
  max-height: none;
  opacity: 1;
}

.accordion-section.open .accordion-toggle .arrow {
  transform: rotate(180deg);
}

@media (min-width: 769px) {
  .accordion-section {
    max-width: 800px;     /* ou la largeur max de ton choix */
    margin: var(--gap) auto;
    padding: 0 1rem;
  }
}

/* ——— Paires fréquentes ——— */
.pair-card {
  position: relative;
  display: inline-block;
  width: 150px;
  margin: 10px;
}

.pair-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.overlay span {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px black;
}
.overlay span.rouge {
  font-size: 14px;
  font-weight: bold;
  color: black;
}
/* PAIR 1 */
.pair-1 .bleu.gauche { top: 21%; left: 26%; }
.pair-1 .bleu.droite { top: 61%; left: 71%; }
.pair-1 .rouge { top: 47%; left: 50%; transform: translateX(-50%); color: black; }

/* PAIR 2 */
.pair-2 .bleu.gauche { top: 67%; left: 20%; }
.pair-2 .bleu.droite { top: 50%; left: 68%; }
.pair-2 .rouge { top: 20%; left: 32%; transform: translateX(-50%); color: black; }

/* PAIR 3 */
.pair-3 .bleu.gauche { top: 27%; left: 18%; }
.pair-3 .bleu.droite { top: 48%; left: 65%; }
.pair-3 .rouge { top: 55%; left: 47%; transform: translateX(-50%); color: black; }

/* PAIR 4 */
.pair-4 .bleu.gauche { top: 56%; left: 24%; }
.pair-4 .bleu.droite { top: 56%; left: 64%; }
.pair-4 .rouge { top: 31%; left: 50%; transform: translateX(-50%); color: black; }

/* PAIR 5 */
.pair-5 .bleu.gauche { top: 42%; left: 17%; }
.pair-5 .bleu.droite { top: 42%; left: 70%; }
.pair-5 .rouge { top: 44%; left: 50%; transform: translateX(-50%); color: black; }

/* PAIR 6 */
.pair-6 .bleu.gauche { top: 28%; left: 25%; }
.pair-6 .bleu.droite { top: 28%; left: 66%; }
.pair-6 .rouge { top: 55%; left: 51%; transform: translateX(-50%); color: black; }

/* PAIR 7 */
.pair-7 .bleu.gauche { top: 65%; left: 17%; }
.pair-7 .bleu.droite { top: 51%; left: 69%; }
.pair-7 .rouge { top: 18%; left: 44%; transform: translateX(-50%); color: black; }

/* PAIR 8 */
.pair-8 .bleu.gauche { top: 71%; left: 18%; }
.pair-8 .bleu.droite { top: 57%; left: 68%; }
.pair-8 .rouge { top: 16%; left: 33%; transform: translateX(-50%); color: black; }

/* PAIR 9 */
.pair-9 .bleu.gauche { top: 36%; left: 21%; }
.pair-9 .bleu.droite { top: 35%; left: 67%; }
.pair-9 .rouge { top: 52%; left: 50%; transform: translateX(-50%); color: black; }

/* PAIR 10 */
.pair-10 .bleu.gauche { top: 53%; left: 25%; }
.pair-10 .bleu.droite { top: 28%; left: 66%; }
.pair-10 .rouge { top: 43%; left: 51%; transform: translateX(-50%); color: black; }

/* ——— Triplets fréquents ——— */
.triplet-card {
  position: relative;
  display: inline-block;
  width: 150px;
  margin: 10px;
}

.triplet-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.overlay span {
  position: absolute;
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px black;
}
.overlay span.rouge {
  font-size: 14px;
  font-weight: bold;
  color: black;
}

/* TRIPLET 1 */
.triplet-1 .bleu.gauche { top: 45%; left: 17%; }
.triplet-1 .bleu.centre { top: 76%; left: 69%; transform: translate(-50%, -50%); }
.triplet-1 .bleu.droite { top: 14%; left: 59%; }
.triplet-1 .rouge { top: 48%; left: 49%; transform: translateX(-50%); }

/* TRIPLET 2 */
.triplet-2 .bleu.gauche { top: 43%; left: 15%; }
.triplet-2 .bleu.centre { top: 70%; left: 43%; }
.triplet-2 .bleu.droite { top: 50%; left: 71%; }
.triplet-2 .rouge { top: 14%; left: 50%; transform: translateX(-50%); }

/* TRIPLET 3 */
.triplet-3 .bleu.gauche { top: 46%; left: 21%; }
.triplet-3 .bleu.centre { top: 64%; left: 43%; }
.triplet-3 .bleu.droite { top: 46%; left: 70%; }
.triplet-3 .rouge { top: 17%; left: 50%; transform: translateX(-50%); }

/* TRIPLET 4 */
.triplet-4 .bleu.gauche { top: 72%; left: 45%; }
.triplet-4 .bleu.centre { top: 12%; left: 46%; }
.triplet-4 .bleu.droite { top: 60%; left: 69%; }
.triplet-4 .rouge { top: 56%; left: 25%; transform: translateX(-50%); }

/* TRIPLET 5 */
.triplet-5 .bleu.gauche { top: 22%; left: 13%; }
.triplet-5 .bleu.centre { top: 20%; left: 66%; }
.triplet-5 .bleu.droite { top: 63%; left: 73%; }
.triplet-5 .rouge { top: 39%; left: 48%; transform: translateX(-50%); }
/* TRIPLET 6 */
.triplet-6 .bleu.gauche { top: 64%; left: 16%; }
.triplet-6 .bleu.centre { top: 13%; left: 43%; }
.triplet-6 .bleu.droite { top: 64%; left: 70%; }
.triplet-6 .rouge { top: 48%; left: 50%; transform: translateX(-50%); }
/* TRIPLET 7 */
.triplet-7 .bleu.gauche { top: 57%; left: 19%; }
.triplet-7 .bleu.centre { top: 73%; left: 43%; }
.triplet-7 .bleu.droite { top: 11%; left: 43%; }
.triplet-7 .rouge { top: 63%; left: 71%; transform: translateX(-50%); }
/* TRIPLET 8 */
.triplet-8 .bleu.gauche { top: 23%; left: 19%; }
.triplet-8 .bleu.centre { top: 35%; left: 76%; }
.triplet-8 .bleu.droite { top: 62%; left: 59%; }
.triplet-8 .rouge { top: 48%; left: 46%; transform: translateX(-50%); }
/* TRIPLET 9 */
.triplet-9 .bleu.gauche { top: 23%; left: 19%; }
.triplet-9 .bleu.centre { top: 55%; left: 69%; }
.triplet-9 .bleu.droite { top: 63%; left: 36%; }
.triplet-9 .rouge { top: 16%; left: 69%; transform: translateX(-50%); }
/* TRIPLET 10 */
.triplet-10 .bleu.gauche { top: 15%; left: 23%; }
.triplet-10 .bleu.centre { top: 41%; left: 70%; }
.triplet-10 .bleu.droite { top: 74%; left: 53%; }
.triplet-10 .rouge { top: 57%; left: 36%; transform: translateX(-50%); }

/* ——— Écart de sortie maximum & moyen ——— */

/* 1) Styles de base (mobile-first) */
.ecart-section {
  background: transparent;
  color: #e0e0ff;
  padding: 1.5rem 1rem;
  text-align: center;
}

.ecart-section .stat-description {
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  color: #aaa;
}

.ecart-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem;
  margin-top: 1rem;
}

.ecart-card {
  /* mobile : flex-basis 100px, pas de grow */
  flex: 0 1 100px;
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 0.6rem;
  text-align: center;
  position: relative;
  overflow: visible;
}

.ecart-card .number {
  width: 36px;
  height: 36px;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #8eeaf9, #60a5fa, #a78bfa);
  color: #fff;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  box-shadow:
    0 0 8px rgba(255,255,255,0.2),
    0 0 14px rgba(138,180,255,0.3),
    inset 0 0 6px rgba(255,255,255,0.1);
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.4),
    -1px -1px 2px rgba(255,255,255,0.2);
  position: relative;
  z-index: 1;
}

.ecart-card p {
  font-size: 0.85rem;
  color: #ccc;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* 2) Desktop (≥601px) : flex-basis fluide, toujours sans grow */
@media (min-width: 601px) {
  .ecart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
  }

  .ecart-card {
    /* basis entre 140px et 280px selon la largeur, pas de grow */
    flex: 1 1 clamp(140px, 20vw, 280px);
    padding: clamp(0.8rem, 1vw, 2rem);
  }

  .ecart-card .number {
    width: clamp(60px, 8vw, 70px);
    height: clamp(60px, 8vw, 70px);
    font-size: clamp(1.5rem, 2.5vw, 3rem);
  }

  .ecart-section .stat-description {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .ecart-card p {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
  }
}


/* Séquence d’icônes paire / impaire */
.combo-sequence {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot.pair {
  background-color: #00ccff;
}

.dot.impair {
  background-color: #ff66cc;
}

/* Mobile small screens */
@media (max-width: 480px) {
  /* Grilles plus serrées */
  .grid,
  .pair-grid,
  .triplet-grid,
  .ecart-grid,
  .parity-grid {
    gap: 0.5rem;
  }

  /* Boules */
  .fireball-wrapper,
  .iceball-wrapper {
    width: 72px;
    height: 100px;
  }
  .fireball-number,
  .iceball-number {
    font-size: var(--fs-small);
  }

  /* Écart-card plus compact */
  .ecart-card {
    width: 100px;
    padding: 0.6rem;
  }
  .ecart-card .number {
    font-size: 0.95rem;
  }
  .ecart-card p {
    font-size: 0.85rem;
  }
}

/* Cible tous tes logos de loterie */
img.lottery-logo {
  /* largeur fluide entre 80px et 140px selon la largeur de l’écran */
  width: clamp(80px, 15vw, 140px);
  height: auto;
  max-width: 100%;
}

/* ——— Préchargement magique (Zoltar) ——— */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* fond noir */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
  padding: 1rem;
  box-sizing: border-box;
}

#preloader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#preloader img {
  width: 80%;
  max-width: 400px;
  height: auto;
}

h1, h2, h3, h4,
.site-title,
.section-title,
.accordion-toggle {
  color: var(--accent-blue);
  /* Léger contour noir + halo néon doux */
  text-shadow:
    /* contour sombre pour délimiter le texte */
    1px 1px 2px rgba(0, 0, 0, 0.8),
    /* halo intérieur (petit) */
    0 0 6px rgba(69, 199, 255, 0.4),
    /* halo externe (plus diffus) */
    0 0 12px rgba(69, 199, 255, 0.2);
  font-weight: 800;
}

/* Cartes spécifiques à la section Pairs / Impairs */
.parity-card {
  flex: 1 1 45%;
  min-width: 220px;
  padding: 1rem;
  background: rgba(25,28,34,0.8);
  border-radius: var(--radius);
  text-align: center;
}

.parity-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

.parity-card .frequency {
  font-size: 1rem;
  line-height: 1.4;
}

#parity {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

/* Corrige les conflits d’animation lors du changement de langue */
#prefix {
  transition: opacity 0.3s ease-in-out;
  animation: none !important;
}