/**
 * Blocs d'information éphéméride — EphemerideDuJour.com
 * Chaque rubrique dans un bloc visuellement délimité
 */

/* =========================================================
   BLOC GÉNÉRIQUE
   ========================================================= */

.ephemeride-bloc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.ephemeride-bloc:hover {
  box-shadow: var(--shadow-md);
}

.ephemeride-bloc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-main);
  border-bottom: 1px solid var(--color-border-light);
}

.ephemeride-bloc-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.ephemeride-bloc-content {
  padding: 16px 20px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-main);
}

.ephemeride-bloc-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   BLOCS PAR RUBRIQUE
   ========================================================= */

/* Saint du jour & Fêtes religieuses */
.ephemeride-bloc--saint {
  border-color: var(--color-bloc-saint-border);
}
.ephemeride-bloc--saint .ephemeride-bloc-header {
  background: var(--color-bloc-saint);
  border-bottom-color: var(--color-bloc-saint-border);
  color: #1a4a6e;
}

/* Événements historiques */
.ephemeride-bloc--histoire {
  border-color: var(--color-bloc-histoire-border);
}
.ephemeride-bloc--histoire .ephemeride-bloc-header {
  background: var(--color-bloc-histoire);
  border-bottom-color: var(--color-bloc-histoire-border);
  color: #7a1c2c;
}

/* Naissances célèbres */
.ephemeride-bloc--naissance {
  border-color: var(--color-bloc-naissance-border);
}
.ephemeride-bloc--naissance .ephemeride-bloc-header {
  background: var(--color-bloc-naissance);
  border-bottom-color: var(--color-bloc-naissance-border);
  color: #1e5c2a;
}

/* Citation / Inspirant */
.ephemeride-bloc--citation {
  border-color: var(--color-bloc-citation-border);
}
.ephemeride-bloc--citation .ephemeride-bloc-header {
  background: var(--color-bloc-citation);
  border-bottom-color: var(--color-bloc-citation-border);
  color: #7a6010;
}

.ephemeride-bloc--citation blockquote,
.ephemeride-bloc--citation .citation-texte {
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.6;
  border-left: 4px solid var(--color-secondary);
  padding-left: 16px;
  margin: 0 0 10px 0;
  color: var(--color-text-main);
}

.ephemeride-bloc--citation .citation-auteur {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Recettes & traditions */
.ephemeride-bloc--recette {
  border-color: var(--color-bloc-recette-border);
}
.ephemeride-bloc--recette .ephemeride-bloc-header {
  background: var(--color-bloc-recette);
  border-bottom-color: var(--color-bloc-recette-border);
  color: #8a4010;
}

/* Faits divers & anecdotes */
.ephemeride-bloc--faits {
  border-color: var(--color-bloc-faits-border);
}
.ephemeride-bloc--faits .ephemeride-bloc-header {
  background: var(--color-bloc-faits);
  border-bottom-color: var(--color-bloc-faits-border);
  color: #2a4560;
}

/* Phases de la lune */
.ephemeride-bloc--lune {
  border-color: var(--color-bloc-lune-border);
}
.ephemeride-bloc--lune .ephemeride-bloc-header {
  background: var(--color-bloc-lune);
  border-bottom-color: var(--color-bloc-lune-border);
  color: #1e2a60;
}

/* =========================================================
   EN-TÊTE DE DATE
   ========================================================= */

.edj-date-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.edj-date-header-icon {
  font-size: 32px;
  flex-shrink: 0;
  opacity: 0.9;
}

.edj-date-header-main {
  flex: 1;
}

.edj-date-header-day {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}

.edj-date-header-meta {
  font-size: var(--text-sm);
  opacity: 0.85;
  line-height: 1.5;
}


/* =========================================================
   NAVIGATION J-1 / J+1
   ========================================================= */

.edj-date-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.edj-date-navigation--bottom {
  margin-top: 20px;
  margin-bottom: 0;
}

.edj-date-nav-link {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-main);
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.edj-date-nav-link:hover {
  border-color: var(--color-primary);
  background: var(--color-bloc-saint);
  text-decoration: none;
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.edj-date-nav-link--prev {
  text-align: left;
}

.edj-date-nav-link--next {
  text-align: right;
  align-items: flex-end;
}

.edj-date-nav-direction {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}

.edj-date-nav-title {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-primary);
}

.edj-date-nav-saint {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* Arrow decorators */
.edj-date-nav-link--prev .edj-date-nav-direction::before {
  content: "← ";
}
.edj-date-nav-link--next .edj-date-nav-direction::after {
  content: " →";
}

/* =========================================================
   PHASES LUNAIRES — Bloc visuel
   ========================================================= */

.edj-phases-lunaires {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.edj-phase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  text-align: center;
}

.edj-phase-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.edj-phase-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.edj-phase-date {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-main);
}

.edj-phase-heure {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* =========================================================
   TABLE DES MATIÈRES
   ========================================================= */

.edj-toc {
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.edj-toc-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.edj-toc ol,
.edj-toc ul {
  margin: 0;
  padding-left: 20px;
}

.edj-toc li {
  margin-bottom: 4px;
}

.edj-toc a {
  color: var(--color-primary);
  font-size: var(--text-sm);
  text-decoration: none;
}

.edj-toc a:hover {
  text-decoration: underline;
}

/* =========================================================
   GRILLE CALENDRIER — Page catégorie mois
   ========================================================= */

.edj-calendrier {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.edj-calendrier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary);
  color: #fff;
  padding: 14px 20px;
}

.edj-calendrier-titre {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
}

.edj-calendrier-nav {
  display: flex;
  gap: 8px;
}

.edj-calendrier-nav a {
  color: #fff;
  background: rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-weight: 700;
  font-size: var(--text-md);
  text-decoration: none;
  transition: background var(--transition);
}

.edj-calendrier-nav a:hover {
  background: rgba(255,255,255,0.35);
}

.edj-calendrier-jours-semaine {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.85);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.edj-calendrier-jours-semaine span {
  padding: 6px 4px;
}

.edj-calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border-light);
  padding: 1px;
}

/* Cellule de base */
.edj-cal-jour {
  background: var(--color-bg-card);
  padding: 7px 6px 6px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  position: relative;  /* nécessaire pour le tooltip */
  overflow: visible;
}

.edj-cal-jour--vide {
  background: var(--color-bg-page);
  min-height: 110px;
}

.edj-cal-jour--inactif {
  background: var(--color-bg-page);
  opacity: 0.55;
}

.edj-cal-jour--actuel {
  background: #EBF7ED;
  outline: 2px solid var(--color-accent-green);
  outline-offset: -2px;
}

/* Ligne supérieure : numéro + icônes saison/lune */
.edj-cal-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}

.edj-cal-jour-num {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-main);
  line-height: 1;
}

.edj-cal-jour--actuel .edj-cal-jour-num {
  color: var(--color-accent-green);
}

.edj-cal-cell-icons {
  font-size: 12px;
  line-height: 1;
  opacity: 0.75;
  white-space: nowrap;
}

/* Saint du jour */
.edj-cal-jour-saint {
  font-size: 10px;
  color: var(--color-primary);
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
  margin-bottom: 3px;
}

/* Ligne inférieure : jour de l'année + semaine */
.edj-cal-cell-meta {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 3px;
  border-top: 1px solid var(--color-border-light);
}

.edj-cal-jour-annee,
.edj-cal-semaine {
  font-size: 9px;
  color: var(--color-text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Lien actif */
a.edj-cal-jour {
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

a.edj-cal-jour:hover {
  background: var(--color-bloc-saint);
  text-decoration: none;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(44,95,138,0.18);
}

a.edj-cal-jour:hover .edj-cal-jour-num {
  color: var(--color-primary);
}

/* =========================================================
   TOOLTIP résumé éphéméride (survol)
   ========================================================= */

.edj-cal-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: #1e3a5a;
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 100;
  pointer-events: none;
  text-align: left;
  font-weight: 400;
}

/* Petite flèche du tooltip */
.edj-cal-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e3a5a;
}

/* Afficher le tooltip au survol */
a.edj-cal-jour:hover .edj-cal-tooltip {
  display: block;
}

/* Ajustement si le tooltip dépasse à gauche (premières colonnes) */
.edj-calendrier-grille > :nth-child(7n+1) .edj-cal-tooltip,
.edj-calendrier-grille > :nth-child(7n+2) .edj-cal-tooltip {
  left: 0;
  transform: none;
}
.edj-calendrier-grille > :nth-child(7n+1) .edj-cal-tooltip::after,
.edj-calendrier-grille > :nth-child(7n+2) .edj-cal-tooltip::after {
  left: 24px;
}

/* Ajustement si le tooltip dépasse à droite (dernières colonnes) */
.edj-calendrier-grille > :nth-child(7n+6) .edj-cal-tooltip,
.edj-calendrier-grille > :nth-child(7n) .edj-cal-tooltip {
  left: auto;
  right: 0;
  transform: none;
}
.edj-calendrier-grille > :nth-child(7n+6) .edj-cal-tooltip::after,
.edj-calendrier-grille > :nth-child(7n) .edj-cal-tooltip::after {
  left: auto;
  right: 24px;
}

/* =========================================================
   BADGE MENU "CE MOIS-CI"
   ========================================================= */

.badge-mois-actuel {
  display: inline-block;
  background: var(--color-secondary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =========================================================
   RESPONSIVE BLOCS
   ========================================================= */

@media (max-width: 767px) {
  .edj-date-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .edj-date-header-clock {
    text-align: center;
  }

  .edj-date-navigation {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .edj-date-nav-link {
    padding: 10px 12px;
  }

  .edj-phases-lunaires {
    grid-template-columns: repeat(2, 1fr);
  }

  .edj-calendrier-grille {
    font-size: 11px;
  }

  .edj-cal-jour {
    min-height: 50px;
    padding: 4px 3px;
  }

  .edj-cal-jour-num {
    font-size: var(--text-sm);
  }

  .edj-cal-jour-saint {
    font-size: 10px;
    display: none; /* masqué sur très petit écran */
  }
}