/* =========================================================
   iGalerie 3 - custom.css nettoyé et commenté
   Objectif :
   - rapprocher le rendu d’un site WordPress moderne
   - éclaircir la galerie
   - transformer les albums en cartes
   - alléger le bas de page
   ========================================================= */

/* =========================================================
   1) Base générale
   Fond gris clair autour de la galerie, texte plus doux.
   ========================================================= */
body.bg {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* Grand conteneur principal centré */
#gallery.small {
  background: #ffffff !important;
  max-width: 1180px !important;
  margin: 30px auto !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

/* =========================================================
   2) Header
   Header blanc, plus respirant, plus proche d’un site éditorial.
   ========================================================= */
header.banner {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding-bottom: 12px !important;
}

#header_top {
  padding: 28px 42px 14px 42px !important;
}

#title h1 a {
  color: #111827 !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* =========================================================
   3) Menu principal
   Menu blanc, discret, avec accent bleu au survol et sur l’élément actif.
   ========================================================= */
#menu {
  background: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 10px 24px !important;
}

#menu a {
  color: #4b5563 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

#menu li.current a,
#menu a:hover {
  color: #2563eb !important;
}

/* =========================================================
   4) Zone de contenu
   Padding harmonisé pour éviter les écarts contradictoires.
   ========================================================= */
#content {
  padding: 26px 28px 10px 28px !important;
}

/* Description de catégorie / album */
#cat_desc {
  font-size: 1.08rem !important;
  color: #374151 !important;
  margin-bottom: 24px !important;
}

/* =========================================================
   5) Albums en cartes
   Donne un aspect plus moderne aux blocs d’albums.
   ========================================================= */
#thumbs_cat dl {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#thumbs_cat dl:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14) !important;
}

/* Réinitialise les marges autour de l’image */
#thumbs_cat dt {
  margin: 0 !important;
}

#thumbs_cat dt a {
  display: block !important;
  overflow: hidden !important;
}

#thumbs_cat img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* Zone texte de la carte */
#thumbs_cat dd {
  padding: 14px 14px 16px 14px !important;
}

/* Titre d’album */
#thumbs_cat .title a {
  color: #111827 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

#thumbs_cat .title a:hover {
  color: #2563eb !important;
}

/* Statistiques sous les albums */
#thumbs_cat ul.stats li {
  color: #6b7280 !important;
  font-size: 0.95rem !important;
}

/* =========================================================
   6) Bloc du bas : statistiques + liens
   Fusion propre des anciennes règles redondantes.
   ========================================================= */
#bottom {
  display: flex !important;
  gap: 56px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-top: 34px !important;
  padding: 22px 42px 18px 42px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e5e7eb !important;
}

#bottom_stats,
#bottom_links {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

#bottom h3 {
  margin: 0 0 10px 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
}

#bottom ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#bottom li {
  margin: 0 0 8px 0 !important;
  color: #6b7280 !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

#bottom a {
  color: #2563eb !important;
  text-decoration: none !important;
}

#bottom a:hover {
  text-decoration: underline !important;
}

/* =========================================================
   7) Footer
   Footer compact et discret, sans logo parasite.
   ========================================================= */
footer {
  margin-top: 14px !important;
  padding-top: 10px !important;
  color: #6b7280 !important;
  font-size: 0.9rem !important;
}

#footer_text {
  margin-top: 0 !important;
}

#footer_system {
  opacity: 0.75;
}

/* Masque les éventuelles images résiduelles du footer */
footer img,
#footer img,
#footer_text img,
#footer_system img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  opacity: 0 !important;
}
/* ==============================
   Icônes propres à côté de "Galerie"
   ============================== */

/* On neutralise les anciennes icônes IcoMoon du menu / sélecteur */
.breadcrumbtools a,
.breadcrumbtools button {
  font-family: inherit !important;
}

/* Le premier bouton : menu (icône ☰) */
.breadcrumbtools a:first-of-type,
.breadcrumbtools button:first-of-type {
  font-size: 0 !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  color: #4b5563 !important;
}

/* Icône du menu */
.breadcrumbtools a:first-of-type::before,
.breadcrumbtools button:first-of-type::before {
  content: "☰" !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Le second bouton : sélecteur d’albums (petite flèche ▾) */
.breadcrumbtools a:nth-of-type(2),
.breadcrumbtools button:nth-of-type(2) {
  font-size: 0 !important;
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  color: #4b5563 !important;
}

/* Icône du sélecteur */
.breadcrumbtools a:nth-of-type(2)::before,
.breadcrumbtools button:nth-of-type(2)::before {
  content: "▾" !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Hover plus visible */
.breadcrumbtools a:hover,
.breadcrumbtools button:hover {
  color: #2563eb !important;
}
/* Icône propre pour le bouton #menu_home_icon */

/* On neutralise l'ancienne icône (IcoMoon ou texte) */
#menu_home_icon > a:nth-child(1) {
  font-family: inherit !important;
  font-size: 0 !important;              /* cache le contenu existant */
  width: 26px !important;
  height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  color: #4b5563 !important;
}

/* On affiche une nouvelle icône Unicode (maison) */
#menu_home_icon > a:nth-child(1)::before {
  content: "⌂" !important;             /* ou "🏠" si tu préfères */
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Hover plus visible */
#menu_home_icon > a:nth-child(1):hover {
  color: #2563eb !important;
}
/* Icône propre pour le lien Accueil dans la barre de la galerie */

/* On cible le lien qui contient le span avec le symbole "" */
a[title="Accueil"] > span {
  font-family: inherit !important;   /* on sort d'IcoMoon */
  font-size: 0 !important;          /* on cache le caractère "" */
  display: inline-flex !important;
  width: 24px !important;
  height: 24px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* On insère une nouvelle icône maison */
a[title="Accueil"] > span::before {
  content: "⌂" !important;          /* tu peux mettre "🏠" si tu préfères */
  font-size: 18px !important;
  line-height: 1 !important;
  color: #4b5563 !important;
}

/* Effet hover */
a[title="Accueil"]:hover > span::before {
  color: #2563eb !important;
}