.journal-or {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 2.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  padding-bottom: 10px;
  border: none;

}


.journal-or {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.5em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  border: none;

  padding-bottom: 10px;
}









    body { font-family: Arial, sans-serif;
    margin:20px;
background-image: url('images/body.jpg');
background-repeat: repeat;
background-position: center;
  width: 100%; 
   color: #fff;
  padding: 15px 0px;
  color: #fff;

    }
   



/* ===========================
   HEADER
=========================== */
header {
  background-image: url('images/photo-1586252999747-9c4393922b69.jpeg'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 100%; 
  color: #fff;
  padding: 15px 0px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* colonnes flexibles */
  grid-template-areas: 
    "logo trad nav" 
    "title title title" 
    "timeline-nav timeline-nav timeline-nav"
}

/* Zones de grille */
.logo { grid-area: logo; } 

.gtranslate_wrapper {
  grid-area: trad;
  text-align: center;   
  justify-self: center; /* centre le bloc dans sa colonne */

}

nav { 
  grid-area: nav; 
  justify-self: start;  /* aligne à gauche dans sa colonne */
  margin-left: 20px;    /* décale légèrement vers la gauche */
}

h1 { 
  grid-area: title; 
  text-align: center;
  font-size: clamp(1.2rem, 3vw, 1.9rem); /* taille fluide */
  margin: 10px 0;
  word-wrap: break-word;
  padding: 0 10px;      /* évite que le texte colle aux bords */
}


/* Timeline nav en version desktop */
nav.timeline-nav {   
  grid-area: timeline-nav;   /* correspond exactement au nom défini */
  justify-self: center;
  text-align: center;
  padding: 0 10px;
  margin: 20px 0;
  width: 100%;               /* occupe toute la largeur */
}

.timeline-nav h4 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.timeline-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.timeline-nav ul li a { color: #fff; text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 4px; transition: background 0.3s ease; display: flex; /* active flexbox */ justify-content: center; /* centre horizontalement */ align-items: center; /* centre verticalement */ }
.timeline-nav ul li a:hover {
  background: #444;
  color: #FDD496;
}



.vertical-centre{ 
 display: flex; /* active flexbox */ justify-content: center; /* centre horizontalement */ align-items: center; /* centre verticalement */ 
}





/* Logo */
header .logo img {
  height: 100px;
}

/* Bouton menu */
.menu-toggle {
  padding: 15px 30px;
  background: none;
  border: none;
  font-size: 36px;
  color: #FDD496;
  cursor: pointer;
  z-index: 1003;
}

/* Menu off-canvas : uniquement pour le nav principal */
header nav:not(.timeline-nav) ul {
  list-style: none;
  margin: 10px;
  padding: 20px;
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 300px;
  /* Image de fond */
  border: 2px solid #f3b700;   /* bordure dorée */
    border-radius: 10px;
background: #333 url("https://memorancy.com/images/body.jpg");
  background-size: cover;       /* L'image couvre tout le panneau */
  background-position: center;  /* Centrée */
  background-repeat: repeat; /* Pas de répétition */  flex-direction: column;

  flex-direction: column;
  gap: 15px;
  transform: scale(0.95);
  opacity: 0;
  transition: right 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
  z-index: 1001;
}

header nav:not(.timeline-nav) ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px;
  display: block;
}

header nav:not(.timeline-nav) ul li a:hover {
  background: #444;
  color: #FDD496;
}

header nav.open ul {
  right: 0;
  transform: scale(1);
  opacity: 1;
}

/* Overlay */
.menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

header nav.open ~ .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* ===========================
   HEADER
=========================== */
header {
  background-image: url('images/photo-1586252999747-9c4393922b69.jpeg'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 100%; 
  color: #fff;
  padding: 15px 0px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* colonnes flexibles */
  grid-template-areas: 
    "logo trad nav" 
    "title title title" 
    "timeline-nav timeline-nav timeline-nav"
}

/* Zones de grille */
.logo { grid-area: logo; } 

.gtranslate_wrapper {
  grid-area: trad;
  text-align: center;   
  justify-self: center; /* centre le bloc dans sa colonne */

}

nav { 
  grid-area: nav; 
  justify-self: start;  /* aligne à gauche dans sa colonne */
  margin-left: 20px;    /* décale légèrement vers la gauche */
}

h1 { 
  grid-area: title; 
  text-align: center;
  font-size: clamp(1.2rem, 3vw, 1.9rem); /* taille fluide */
  margin: 10px 0;
  word-wrap: break-word;
  padding: 0 10px;      /* évite que le texte colle aux bords */
}


/* Timeline nav en version desktop */
nav.timeline-nav {   
  grid-area: timeline-nav;   /* correspond exactement au nom défini */
  justify-self: center;
  text-align: center;
  padding: 0 10px;
  margin: 20px 0;
  width: 100%;               /* occupe toute la largeur */
}

.timeline-nav h4 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.timeline-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.timeline-nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.timeline-nav ul li a:hover {
  background: #444;
  color: #FDD496;
}

/* Logo */
header .logo img {
  height: 100px;
}

/* Bouton menu */
.menu-toggle {
  padding: 15px 30px;
  background: none;
  border: none;
  font-size: 36px;
  color: #FDD496;
  cursor: pointer;
  z-index: 1003;
}


 
/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 600px) {
  header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "trad"
      "nav"
      "title"
      "subtitle"
      "timeline-nav";
  }

  nav {
    justify-self: center; /* menu centré sur mobile */
    margin-left: 0;
  }

  header h1 {
    font-size: 1.5rem; 
    padding: 0 10px;   
  }

  header p.visiteurs {
    font-size: 1rem;
    padding: 0 10px;
  }

 


  .timeline-nav h4 {
    font-size: 1rem;          /* réduit le titre */
  }

  .timeline-nav ul li a {
    font-size: 0.95rem;       /* réduit la taille du texte */
    width: 100%;              /* chaque lien prend toute la largeur */
    text-align: center;       /* texte centré */
  }
}

.image-bas-header {
  grid-column: 1 / -1;   /* occupe toute la largeur de la grille */
  justify-self: center; /* centre horizontalement */
  margin-top: 10px;     /* petit espace au-dessus */
}

.image-bas-header img {
  max-width: 100%;       /* largeur max de l’image */
  height: auto;         /* proportions respectées */
  display: block;
}




/* ===========================
   FIN HEADER
=========================== */





/* ============================================================
   4. FOOTER
============================================================ */

footer {
  background-image: url('images/footer.jpg'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 100%; 
   color: #fff;
  padding: 15px 0px;

text-align: center;
  font-size: 1rem;
 
}


.image-haut-footer {
  justify-self: center;
  margin-bottom: 10px; /* ✔ correct */
}

.image-haut-footer img {
  max-width: 100%;       /* largeur max de l’image */
  height: auto;         /* proportions respectées */
  display: block;
}





/* Conteneur des liens */
footer .footer-links {
  display: flex;
  flex-wrap: wrap;          /* ❤️ Permet 1 ou 2 lignes automatiquement */
  justify-content: center;
  gap: 12px 22px;           /* espace horizontal + vertical */
  
  margin: 0 auto 10px auto;
}

/* Liens */
footer .footer-links a {
  color: #FDD496;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 4px 2px;
  transition: all 0.35s ease;
}

/* Soulignement animé */
footer .footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: #FDD496;
  transition: width 0.35s ease;
}

/* Hover premium */
footer .footer-links a:hover {
  color: #fff;
  text-shadow: 0 0 8px #FDD496;
}

footer .footer-links a:hover::after {
  width: 100%;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 600px) {
  header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "trad"
      "nav"
      "title"
      "subtitle"
      "timeline-nav";
  }

  nav {
    justify-self: center; /* menu centré sur mobile */
    margin-left: 0;
  }

  header h1 {
    font-size: 1.5rem; 
    padding: 0 10px;   
  }

  header p.visiteurs {
    font-size: 1rem;
    padding: 0 10px;
  }

  .timeline-nav ul {
    display: grid; /* passe en grille */
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 10px; /* espace réduit */
    justify-items: center; /* centre les liens dans chaque colonne */
  }



  .timeline-nav h4 {
    font-size: 1rem;          /* réduit le titre */
  }

  .timeline-nav ul li a {
    font-size: 0.95rem;       /* réduit la taille du texte */
    width: 100%;              /* chaque lien prend toute la largeur */
    text-align: center;       /* texte centré */
  }
}



/* ===========================
   FIN HEADER
=========================== */





/* ============================================================
   4. FOOTER
============================================================ */

footer {
  background-image: url('images/footer.jpg'); 
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 100%; 
   color: #fff;
  padding: 15px 0px;

text-align: center;
  font-size: 1rem;
 
}

/* Conteneur des liens */
footer .footer-links {
  display: flex;
  flex-wrap: wrap;          /* ❤️ Permet 1 ou 2 lignes automatiquement */
  justify-content: center;
  gap: 12px 22px;           /* espace horizontal + vertical */
  
  margin: 0 auto 10px auto;
}

/* Liens */
footer .footer-links a {
  color: #FDD496;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 4px 2px;
  transition: all 0.35s ease;
}

/* Soulignement animé */
footer .footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: #FDD496;
  transition: width 0.35s ease;
}

/* Hover premium */
footer .footer-links a:hover {
  color: #fff;
  text-shadow: 0 0 8px #FDD496;
}

footer .footer-links a:hover::after {
  width: 100%;
}

/* Texte du bas */
footer .footer-bottom {
  margin-top: 12px;
  opacity: 0.8;
  font-size: 0.85rem;
}


/* ===========================
   Pour Liste
=========================== */
 .list {
      display: flex;
      justify-content: center;   /* centrer horizontalement */
      align-items: center;       /* centrer verticalement */
    }

.styled-select {
      background-color: #565355;   /* fond */
      color: #ffffff;              /* texte lisible */
      border: 2px solid #a06406;   /* bordure dorée */
 text-decoration: none;
  font-weight: 600;
      padding: 8px 12px;
      font-size: 15px;
      font-family: Arial, sans-serif;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 10px;
      appearance: none;            /* supprime le style natif */
      text-align: center;          /* centre le texte */
      width: 250px;                /* largeur fixe identique */
text-align: center; /* centre horizontalement */
    }

    .styled-select:hover {
      background: #444;
  color: #FDD496;

    }















/* ===========================
   Style du bouton vers haut
=========================== */



  #scrollTopBtn {
    cursor: pointer;
    position: fixed;
    right: 20px;
    bottom: 120px;
    z-index: 1000;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: rgb(253, 212, 150);
    opacity: 0;
    transition: opacity 0.4s ease; /* animation fade */
    box-shadow: rgba(128, 128, 128, 0.8) 5px 5px 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #scrollTopBtn img {
    width: 64px;
    height: 64px;
  }
  /* Visible */
  #scrollTopBtn.show {
    opacity: 0.8;
  }
  #scrollTopBtn:hover {
    opacity: 1;
  }




section {
  text-align: center;
  padding: 10px 10px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url('https://memorancy.com/images/photo-1586252999747-9c4393922b69.jpeg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
  width: 100%;
}

.hero-text {
  display: flex;
  flex-direction: column; /* force h2 et h4 à s’empiler */
}
.titre { margin-bottom: 0; /* enlève l’espace sous le h2 */   
text-align:right;}
 


.sous-titre {
  margin-top: 0px; /* enlève l’espace au-dessus du h4 */ 
  text-align:right;}


.hero h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgb(253, 212, 150);
  text-shadow: rgba(0,0,0,0.3) 1px 1px 2px;
  margin: 10px;
}

.hero img {
  max-width: 300px;
  height: auto;
  margin: 20px;
  border-radius: 8px;
}

/* Responsive : sur mobile, on remet en colonne */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
  .hero h2 {
    margin-bottom: 10px;
  }
}

h2 {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgb(253, 212, 150);
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px;

  margin: 20px auto 10px;
  padding-bottom: 6px;
  line-height: 1.2;
}

h4 {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: rgb(253, 212, 150);
  margin: 10px 0 6px;
}

p {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.container {
  width: 95%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0;
}

.card {
  border: 2px solid #fdd496;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
              rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
              rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10px;
  background-color: #404040;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    margin: 10px auto 10px;

}

.card svg {
  width: 64px;
  height: 64px;
  fill: rgb(253, 212, 150);
  margin: 10px 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* --- Responsive design --- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  header h2 { font-size: 2rem; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  h2 { font-size: 1.5rem; }
  h4 { font-size: 1.1rem; }
  p { font-size: 0.95rem; }
}


/* ===========================
   BOUTON général 
=========================== */




.btn-photo {
     background-color: #565355;   /* couleur de fond */
      color: #f5f5f5;              /* texte lisible */
      border: 2px solid #a06406;   /* bordure */
      padding: 6px 14px;           /* bouton plus petit */
      font-size: 14px;             /* texte plus petit */
      font-family: Arial, sans-serif;
      cursor: pointer;
      border-radius: 6px;
      transition: all 0.3s ease;   /* animation fluide */
      margin: 10px;                /* espace de 10px entre les boutons */
  vertical-align: middle;

    }

    .btn-photo:hover {
      background-color: #6d6b69;   /* couleur plus discrète au survol */
      color: #FDD496;
      transform: scale(1.05);      /* léger zoom */
      box-shadow: 0 0 6px #a06406; /* ombre plus douce */
    }

.link-btn {
  display: inline-flex;       /* active Flexbox */
  align-items: center;        /* aligne verticalement icônes et texte */
  gap: 8px;                   /* espace automatique entre les éléments */
  padding: 6px 12px;
  background: #eee;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
}

.icon, .icon2 {
  width: 20px;
  height: 20px;
}


#select-pays {
  background-image: url('images/play-bas.png'), url('images/play-bas.png');
  background-repeat: no-repeat, no-repeat;
  background-position: 8px center, calc(100% - 8px) center; /* gauche et droite */
  background-size: 20px 20px, 20px 20px;
  padding: 15px 30px; /* espace à gauche et à droite pour ne pas cacher le texte */
}

#select-ville {
  background-image: url('images/play-bas.png'), url('images/play-bas.png');
  background-repeat: no-repeat, no-repeat;
  background-position: 8px center, calc(100% - 8px) center;
  background-size: 20px 20px, 20px 20px;
  padding: 15px 30px;
}
/* ===========================
   TITRE JOURNAL
=========================== */
.journal-or {
  text-align: center;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.5em;   /* ✅ taille unique */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fdd496;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  margin: 20px 0;
  padding-bottom: 10px;
  border: none;
}

/* ===========================
   BODY
=========================== */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background: url('images/body.jpg') repeat center;
  width: 100%;
  color: #fff;
  padding: 15px 0;
}

/* ===========================
   HEADER
=========================== */
header {
  background: url('images/photo-1586252999747-9c4393922b69.jpeg') no-repeat center/cover;
  width: 100%;
  color: #fff;
  padding: 15px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo trad nav"
    "title title title"
    "timeline-nav timeline-nav timeline-nav";
}

.logo { grid-area: logo; }
.gtranslate_wrapper { grid-area: trad; text-align: center; justify-self: center; }
nav { grid-area: nav; justify-self: start; margin-left: 20px; }
h1 {
  grid-area: title;
  text-align: center;
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  margin: 10px 0;
  word-wrap: break-word;
  padding: 0 10px;
}

/* Timeline nav */
nav.timeline-nav {
  grid-area: timeline-nav;
  justify-self: center;
  text-align: center;
  padding: 0 10px;
  margin: 20px 0;
  width: 100%;
}
.timeline-nav h4 { margin-bottom: 10px; font-size: 1.2rem; }
.timeline-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.timeline-nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.timeline-nav ul li a:hover { background: #444; color: #FDD496; }

/* Logo */
header .logo img { height: 100px; }

/* Bouton menu */
.menu-toggle {
  padding: 15px 30px;
  background: none;
  border: none;
  font-size: 36px;
  color: #FDD496;
  cursor: pointer;
  z-index: 1003;
}

/* Menu off-canvas */
header nav:not(.timeline-nav) ul {
  list-style: none;
  margin: 10px;
  padding: 20px;
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 300px;
  border: 2px solid #f3b700;
  border-radius: 10px;
  background: #333 url("https://memorancy.com/images/body.jpg") center/cover repeat;
  flex-direction: column;
  gap: 15px;
  transform: scale(0.95);
  opacity: 0;
  transition: right 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
  z-index: 1001;
}
header nav:not(.timeline-nav) ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px;
  display: block;
}
header nav:not(.timeline-nav) ul li a:hover { background: #444; color: #FDD496; }
header nav.open ul { right: 0; transform: scale(1); opacity: 1; }

/* Overlay */
.menu-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}
header nav.open ~ .menu-overlay { opacity: 1; pointer-events: auto; }

/* ===========================
   FOOTER
=========================== */
footer {
  background: url('images/footer.jpg') no-repeat center/cover;
  width: 100%;
  color: #fff;
  padding: 15px 0;
  text-align: center;
  font-size: 1rem;
}
footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  margin: 0 auto 10px;
}
footer .footer-links a {
  color: #FDD496;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 4px 2px;
  transition: all 0.35s ease;
}
footer .footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: #FDD496;
  transition: width 0.35s ease;
}
footer .footer-links a:hover { color: #fff; text-shadow: 0 0 8px #FDD496; }
footer .footer-links a:hover::after { width: 100%; }
footer .footer-bottom { margin-top: 12px; opacity: 0.8; font-size: 0.85rem; }


/* Utilitaires d’alignement */
.vertical-centre {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image bas du header */
.image-bas-header {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 10px;
}
.image-bas-header img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image haut du footer */
.image-haut-footer {
  justify-self: center;
  margin-bottom: 10px;
}
.image-haut-footer img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Listes et sélecteurs */
.list {
  display: flex;
  justify-content: center;
  align-items: center;
}
.styled-select {
  background-color: #565355;
  color: #ffffff;
  border: 2px solid #a06406;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  font-size: 15px;
  font-family: Arial, sans-serif;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 10px;
  appearance: none;
  text-align: center;
  width: 250px;
}
.styled-select:hover {
  background: #444;
  color: #FDD496;
}

/* Bouton retour en haut */
#scrollTopBtn {
  cursor: pointer;
  position: fixed;
  right: 20px;
  bottom: 120px;
  z-index: 1000;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgb(253, 212, 150);
  opacity: 0;
  transition: opacity 0.4s ease;
  box-shadow: rgba(128, 128, 128, 0.8) 5px 5px 20px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#scrollTopBtn img { width: 64px; height: 64px; }
#scrollTopBtn.show { opacity: 0.8; }
#scrollTopBtn:hover { opacity: 1; }

/* Section générique */
section { text-align: center; padding: 10px 10px; }

/* Bloc héros */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-image: url('https://memorancy.com/images/photo-1586252999747-9c4393922b69.jpeg');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  padding: 20px;
  margin: 20px auto;
  width: 100%;
}
.hero-text { display: flex; flex-direction: column; }
.titre { margin-bottom: 0; text-align: right; }
.sous-titre { margin-top: 0; text-align: right; }
.hero h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgb(253, 212, 150);
  text-shadow: rgba(0,0,0,0.3) 1px 1px 2px;
  margin: 10px;
}
.hero img {
  max-width: 300px;
  height: auto;
  margin: 20px;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .hero { flex-direction: column; text-align: center; }
  .hero h2 { margin-bottom: 10px; }
}

/* Typo globale */
h2 {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgb(253, 212, 150);
  text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px;
  margin: 20px auto 10px;
  padding-bottom: 6px;
  line-height: 1.2;
}
h4 {
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: rgb(253, 212, 150);
  margin: 10px 0 6px;
}
p {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

/* Grilles et cartes */
.container {
  width: 95%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0;
}
.card {
  border: 2px solid #fdd496;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
              rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
              rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10px;
  background-color: #404040;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
}
.card svg {
  width: 64px;
  height: 64px;
  fill: rgb(253, 212, 150);
  margin: 10px 0;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* Responsive grilles */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  header h2 { font-size: 2rem; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  h2 { font-size: 1.5rem; }
  h4 { font-size: 1.1rem; }
  p { font-size: 0.95rem; }
}

/* Boutons et liens */
.btn-photo {
  background-color: #565355;
  color: #f5f5f5;
  border: 2px solid #a06406;
  padding: 6px 14px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.3s ease;
  margin: 10px;
  vertical-align: middle;
}
.btn-photo:hover {
  background-color: #6d6b69;
  color: #FDD496;
  transform: scale(1.05);
  box-shadow: 0 0 6px #a06406;
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #eee;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
}
.icon, .icon2 { width: 20px; height: 20px; }

/* Sélecteurs avec icônes */
#select-pays,
#select-ville {
  background-image: url('images/play-bas.png'), url('images/play-bas.png');
  background-repeat: no-repeat, no-repeat;
  background-position: 8px center, calc(100% - 8px) center;
  background-size: 20px 20px, 20px 20px;
  padding: 15px 30px;
}




/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 600px) {
  header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "trad"
      "nav"
      "title"
      "subtitle"
      "timeline-nav";
  }
  nav { justify-self: center; margin-left: 0; }
  header h1 { font-size: 1.5rem; padding: 0 10px; }
  header p.visiteurs { font-size: 1rem; padding: 0 10px; }
  .timeline-nav h4 { font-size: 1rem; }
  .timeline-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-items: center;
  }
  .timeline-nav ul li a {
    font-size: 0.95rem;
    width: 100%;
    text-align: center;
  }
}