/* =====================================================================
   Calendrier du Jour Generator — Vue Mensuelle (style-mois.css)
   ===================================================================== */
/* --- Variables -------------------------------------------------------- */
.cdj-mois-wrapper {
  --cdj-font: 'Segoe UI', Roboto, Arial, sans-serif;
  --cdj-bg: #ffffff;
  --cdj-text: #2c3e50;
  --cdj-text-light: #6c757d;
  --cdj-border: #dee2e6;
  --cdj-accent: #1a73e8;
  --cdj-accent-light: #eef2f9;
  --cdj-shadow: 0 4px 28px rgba(0,0,0,.10);
  --cdj-radius: 14px;
  --cdj-today-bg: #1a73e8;
  --cdj-today-text: #ffffff;
  --cdj-fete-bg: #fff4e0;
  --cdj-fete-border: #f0a500;
  --cdj-we-bg: #f7f8fc;
  --cdj-we-text: #8e9aaf;
  --cdj-nav-bg: #1a73e8;
  --cdj-nav-text: #ffffff;
  --cdj-header-bg: #1a73e8;
  --cdj-header-text: #ffffff;
  --cdj-cell-hover: #f0f4fb;
  --cdj-tooltip-bg: #1e2a3a;
  --cdj-tooltip-text: #f0f4fb;
}
/* --- Thème sombre ----------------------------------------------------- */
.cdj-mois-wrapper.cdj-theme-sombre {
  --cdj-bg: #1e1e2e;
  --cdj-text: #cdd6f4;
  --cdj-text-light: #a6adc8;
  --cdj-border: #313244;
  --cdj-accent: #89b4fa;
  --cdj-accent-light: #1e1e3e;
  --cdj-shadow: 0 4px 28px rgba(0,0,0,.45);
  --cdj-today-bg: #89b4fa;
  --cdj-today-text: #1e1e2e;
  --cdj-fete-bg: #2a2010;
  --cdj-fete-border: #d4a017;
  --cdj-we-bg: #181825;
  --cdj-we-text: #6c7086;
  --cdj-nav-bg: #12122a;
  --cdj-nav-text: #cdd6f4;
  --cdj-header-bg: #12122a;
  --cdj-header-text: #cdd6f4;
  --cdj-cell-hover: #2a2a3e;
  --cdj-tooltip-bg: #11111b;
  --cdj-tooltip-text: #cdd6f4;
}
/* --- Animations ------------------------------------------------------- */
@keyframes cdj-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cdj-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes cdj-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(4px); }
}
/* --- Wrapper principal ------------------------------------------------
 * PAS de max-width fixe.
 * PAS de 100vw, left:50%, translateX(-50%).
 * width:100% = s'adapte au conteneur parent (colonne WP, widget, page).
 * overflow:visible = le tooltip ne sera jamais coupé.
 * --------------------------------------------------------------------- */
.cdj-mois-wrapper {
  font-family: var(--cdj-font);
  background: var(--cdj-bg);
  color: var(--cdj-text);
  border-radius: var(--cdj-radius);
  box-shadow: var(--cdj-shadow);
  border: 1px solid var(--cdj-border);
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  animation: cdj-fadein .35s ease both;
}
/* --- Navigation ------------------------------------------------------- */
.cdj-mois-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cdj-nav-bg);
  color: var(--cdj-nav-text);
  padding: .9rem 1.25rem;
  border-radius: var(--cdj-radius) var(--cdj-radius) 0 0;
}
.cdj-mois-titre {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: .04em;
  color: var(--cdj-nav-text);
}
.cdj-nav-btn {
  background: rgba(255,255,255,.15);
  border: none;
  color: var(--cdj-nav-text);
  font-size: 1.2rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .15s;
}
.cdj-nav-btn:hover {
  background: rgba(255,255,255,.28);
  transform: scale(1.08);
}
/* --- Grille -----------------------------------------------------------
 * minmax(0, 1fr) empêche les colonnes de déborder quand le contenu
 * est trop large. Sans ça, 1fr peut ignorer overflow des enfants.
 * --------------------------------------------------------------------- */
.cdj-mois-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--cdj-border);
  border-top: 1px solid var(--cdj-border);
  overflow: visible;
  position: relative;
}
/* --- En-têtes de colonnes -------------------------------------------- */
.cdj-grid-header {
  background: var(--cdj-header-bg);
  color: var(--cdj-header-text);
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .5rem 0;
}
.cdj-grid-header.cdj-weekend {
  background: rgba(0,0,0,.18);
}
/* --- Cellules --------------------------------------------------------- */
.cdj-grid-cell {
  background: var(--cdj-bg);
  min-height: 100px;
  padding: .4rem .45rem .35rem;
  position: relative;
  cursor: pointer;
  overflow: visible;
  z-index: 1;
  transition: background .2s;
}
.cdj-grid-cell:hover,
.cdj-grid-cell:focus {
  background: var(--cdj-cell-hover);
  z-index: 9999;
  outline: none;
}
.cdj-grid-vide {
  background: var(--cdj-we-bg);
  cursor: default;
  min-height: 100px;
}
.cdj-grid-cell.cdj-weekend {
  background: var(--cdj-we-bg);
  color: var(--cdj-we-text);
}
.cdj-grid-cell.cdj-weekend:hover {
  background: var(--cdj-cell-hover);
}
/* --- Aujourd'hui ------------------------------------------------------ */
.cdj-grid-cell.cdj-today {
  background: var(--cdj-accent-light);
  border-top: 3px solid var(--cdj-today-bg);
}
.cdj-grid-cell.cdj-today .cdj-cell-num {
  background: var(--cdj-today-bg);
  color: var(--cdj-today-text);
  border-radius: 50%;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* --- Jour férié / fête ------------------------------------------------ */
.cdj-grid-cell.cdj-has-fete {
  border-left: 3px solid var(--cdj-fete-border);
  background: var(--cdj-fete-bg);
}
/* --- Contenu des cellules --------------------------------------------- */
.cdj-cell-num {
  font-size: .95rem;
  font-weight: 700;
  color: var(--cdj-text);
  line-height: 1.7rem;
  width: 1.7rem;
  text-align: center;
  margin-bottom: .15rem;
}
.cdj-cell-lune {
  font-size: .85rem;
  position: absolute;
  top: .4rem;
  right: .4rem;
  line-height: 1;
}
.cdj-cell-saint {
  font-size: .68rem;
  color: var(--cdj-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: .1rem;
}
.cdj-cell-prenom {
  font-size: .65rem;
  color: var(--cdj-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: .1rem;
  font-weight: 600;
}
.cdj-cell-fete {
  font-size: .63rem;
  color: #b07800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: .15rem;
  font-weight: 600;
}
.cdj-theme-sombre .cdj-cell-fete {
  color: #d4a017;
}
/* --- État chargement -------------------------------------------------- */
.cdj-mois-wrapper.cdj-loading {
  opacity: .55;
  pointer-events: none;
  transition: opacity .2s;
}
/* =====================================================================
   TOOLTIP — Injecté dans <body> par JS, position: fixed
   N'est JAMAIS un enfant de .cdj-grid-cell.
   ===================================================================== */
.cdj-cell-tooltip {
  display: none;
  position: fixed;
  z-index: 2147483647;
  transform: translateZ(0);
  background: var(--cdj-tooltip-bg, #1e2a3a);
  color: var(--cdj-tooltip-text, #f0f4fb);
  border-radius: 8px;
  padding: .65rem .85rem;
  font-size: .78rem;
  min-width: 160px;
  max-width: 240px;
  box-shadow: 0 6px 24px rgba(0,0,0,.38);
  pointer-events: none;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  transition: opacity .15s ease;
  contain: layout style;
}
/* Neutralisation de toute activation CSS résiduelle */
.cdj-grid-cell:hover .cdj-cell-tooltip,
.cdj-grid-cell:focus .cdj-cell-tooltip {
  display: none !important;
  opacity: 0 !important;
}
.cdj-tt-ligne {
  display: flex;
  gap: .4rem;
  margin-top: .3rem;
  align-items: flex-start;
}
.cdj-tt-label {
  font-weight: 700;
  flex-shrink: 0;
  min-width: 55px;
}
/* =====================================================================
   LÉGENDE
   ===================================================================== */
.cdj-mois-legende {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .65rem 1.25rem;
  border-top: 1px solid var(--cdj-border);
  font-size: .75rem;
  color: var(--cdj-text-light);
}
.cdj-legende-item {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.cdj-legende-item::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cdj-legende-today::before {
  background: var(--cdj-today-bg);
}
.cdj-legende-fete::before {
  background: var(--cdj-fete-bg);
  border: 2px solid var(--cdj-fete-border);
}
.cdj-legende-we::before {
  background: var(--cdj-we-bg);
  border: 1px solid var(--cdj-border);
}
/* =====================================================================
   FOOTER
   ===================================================================== */
.cdj-mois-wrapper .cdj-footer {
  text-align: center;
  padding: .55rem 1rem;
  font-size: .72rem;
  color: var(--cdj-text-light);
  border-top: 1px solid var(--cdj-border);
  border-radius: 0 0 var(--cdj-radius) var(--cdj-radius);
}
.cdj-mois-wrapper .cdj-footer em {
  color: var(--cdj-accent);
  font-style: normal;
  font-weight: 600;
}
/* =====================================================================
   OVERLAY + PANNEAU MOBILE
   ===================================================================== */
.cdj-overlay-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(0,0,0,.50);
}
.cdj-overlay-mobile.cdj-overlay-visible {
  display: block;
}
.cdj-panneau-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: var(--cdj-tooltip-bg);
  color: var(--cdj-tooltip-text);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,.35);
  max-height: 60vh;
  flex-direction: column;
}
.cdj-panneau-mobile.cdj-panneau-visible {
  display: flex;
  animation: cdj-slide-up .25s ease both;
}
.cdj-panneau-mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
}
.cdj-panneau-mobile-date {
  font-weight: 700;
  font-size: 1rem;
}
.cdj-panneau-mobile-close {
  background: rgba(255,255,255,.15);
  border: none;
  color: var(--cdj-tooltip-text);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cdj-panneau-mobile-close:hover {
  background: rgba(255,255,255,.28);
}
.cdj-panneau-mobile-corps {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .75rem 1.25rem 2rem;
  flex: 1;
}
.cdj-panneau-mobile-corps::-webkit-scrollbar {
  width: 4px;
}
.cdj-panneau-mobile-corps::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
}
.cdj-panneau-mobile-corps::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 2px;
}
.cdj-panneau-ligne {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin-top: .75rem;
  font-size: .92rem;
  line-height: 1.5;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cdj-panneau-ligne:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.cdj-panneau-label {
  font-weight: 700;
  flex-shrink: 0;
  min-width: 70px;
  color: rgba(255,255,255,.6);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-top: .15rem;
}
.cdj-panneau-mobile-scroll-hint {
  text-align: center;
  font-size: .75rem;
  color: rgba(255,255,255,.35);
  padding: .25rem 0 .5rem;
  flex-shrink: 0;
  animation: cdj-bounce .9s infinite alternate ease-in-out;
}
/* =====================================================================
   BREAKPOINTS — UN SEUL bloc @media par palier
   ===================================================================== */
/* --- Tablette : 701px – 1024px --------------------------------------- */
@media (min-width: 701px) and (max-width: 1024px) {
  .cdj-grid-cell,
  .cdj-grid-vide {
    min-height: 75px;
  }
  .cdj-cell-saint,
  .cdj-cell-prenom {
    font-size: .6rem;
  }
  .cdj-cell-fete {
    font-size: .58rem;
  }
  .cdj-mois-titre {
    font-size: 1.1rem;
  }
}
/* --- Mobile : ≤ 700px ------------------------------------------------
 * Le CSS WordPress impose 100vw + left:50% + translateX(-50%) avec
 * !important sur .cdj-mois-wrapper quand il est dans .alignwide.
 * Ce bloc ne s'applique qu'aux calendriers hors .alignwide,
 * c'est-à-dire dans une colonne ou un widget.
 * Pour la page calendrier pleine largeur, le CSS WordPress prend le relais.
 * --------------------------------------------------------------------- */
@media (max-width: 700px) {
  .cdj-cell-tooltip {
    display: none !important;
    opacity: 0 !important;
  }
  /* Calendrier dans une colonne WP ou widget (pas dans .alignwide) */
  .wp-block-column .cdj-mois-wrapper,
  .widget .cdj-mois-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
  }
  .wp-block-column .cdj-mois-nav,
  .widget .cdj-mois-nav {
    border-radius: 0 !important;
  }
  .cdj-mois-grid {
    overflow: visible;
  }
  .cdj-grid-cell,
  .cdj-grid-vide {
    min-height: 52px;
    padding: .3rem .25rem;
  }
  .cdj-cell-saint,
  .cdj-cell-prenom,
  .cdj-cell-fete {
    display: none;
  }
  .cdj-cell-num {
    font-size: .82rem;
  }
  .cdj-cell-lune {
    font-size: .72rem;
  }
  .cdj-mois-titre {
    font-size: 1rem;
  }
  .cdj-nav-btn {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }
  .cdj-mois-legende {
    gap: .6rem;
    padding: .5rem 1rem;
    font-size: .7rem;
  }
}
/* --- Très petit : ≤ 420px -------------------------------------------- */
@media (max-width: 420px) {
  .cdj-grid-header {
    font-size: .6rem;
    padding: .35rem 0;
  }
  .cdj-grid-cell,
  .cdj-grid-vide {
    min-height: 40px;
  }
  .cdj-cell-lune {
    display: none;
  }
}