/* =========================================================
   FEUILLE STYLE LEXIQUE
========================================================= */


/* =========================================================
   VARIABLES GLOBALES
========================================================= */
:root {
  --blue: #2196f3;
  --purple: #9c27b0;
  --orange: #ff9800;
  --green: #4caf50;
  --primary: #0077b6;
  --bg-page: #f9f9f9;
}

/* =========================================================
   BASE / GLOBAL
========================================================= */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg-page);
}

/* =========================================================
   HEADER
========================================================= */
header {
  background-color: var(--primary);
  color: white;
  text-align: center;
  padding: 1rem 0;
  font-size: 1.5rem;
  font-weight: bold;
}

/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */
.content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 1rem;
  margin-bottom: 60px; /* espace pour la nav mobile */
}

/* =========================================================
   SECTIONS DE LEXIQUE
========================================================= */
.section {
  background: #fafafa;
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  margin-bottom: 15px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 6px;
}

.section h2 i {
  font-size: 1.3rem;
}

/* Couleurs par catégorie */
.section.chiffres h2 { border-color: var(--blue); color: var(--blue); }
.section.dizaines h2 { border-color: var(--purple); color: var(--purple); }
.section.heures h2   { border-color: var(--orange); color: var(--orange); }
.section.jours h2    { border-color: var(--green); color: var(--green); }

/* =========================================================
   CARTES (LEXIQUE)
========================================================= */
.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-left: 4px solid var(--orange);
}

/* Texte dans les cartes */
.card .text {
  display: flex;
  flex-direction: column;
}

/* Espagnol (ligne principale) */
.card .text span {
  font-weight: 600;
  margin-bottom: 4px; /* séparation avec le français */
}

/* Français (ligne secondaire) */
.card .text span + * {
  font-size: 0.9rem;
  color: #555;
}

/* Barres colorées par section */
.section.chiffres .card { border-left: 4px solid var(--blue); }
.section.dizaines .card { border-left: 4px solid var(--purple); }
.section.heures .card   { border-left: 4px solid var(--orange); }
.section.jours .card    { border-left: 4px solid var(--green); }

/* =========================================================
   GRILLES ET LISTES
========================================================= */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* =========================================================
   ICÔNES PAGE D'ACCUEIL
========================================================= */
.icons-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem;
}

.icon-card {
  width: 100px;
  text-align: center;
  margin: 10px;
}

.icon-card a {
  text-decoration: none;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
}

.icon-card i {
  font-size: 2.5rem;
  margin-bottom: 0.3rem;
}

/* =========================================================
   BOUTON RETOUR (HUB)
========================================================= */
.icon-back {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.icon-back a {
  text-decoration: none;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
}

.icon-back i {
  font-size: 2.5rem;
  margin-bottom: 0.3rem;
}

/* =========================================================
   NAVIGATION MOBILE
========================================================= */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--primary);
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
  z-index: 100;
}

.mobile-nav a {
  color: white;
  text-align: center;
  font-size: 0.9rem;
  text-decoration: none;
  flex: 1;
}

.mobile-nav a i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.2rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 400px) {
  .numbers-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) {
  .content {
    padding: 2rem;
  }

  .icons-grid {
    justify-content: space-around;
  }
}