/*
Theme Name: kadence-child
Template: kadence
Theme URI: https://www.whatthefit.fr
Description: Thème enfant personnalisé par Pau
Author: APIC
Author URI: https://www.pop-apic.com
Version: 1.0.0
/* ============================================================
   WTF Planning v2 — Style revu aux couleurs WTF
   À coller dans style.css du thème enfant (après l'en-tête)
   ============================================================ */

/* ── WRAPPER : marge 15% de chaque côté ─────────────────── */

#planning-desktop,
#planning-mobile {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#planning-mobile {
  display: none;
}

/* ── NAVIGATION MOIS ─────────────────────────────────────── */

.planning-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5em 0 1em;
}

.mois-actuel {
  font-family: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  font-weight: 800;
  font-size: 1.3em;
  letter-spacing: -0.03em;
  color: #0d0d0d;
  text-transform: capitalize;
}

.mois-nav {
  text-decoration: none;
  color: #0d0d0d;
  font-weight: 600;
  font-size: 0.9em;
  padding: 0.4rem 1rem;
  border: 1.5px solid #0d0d0d;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.mois-nav:hover {
  background: #0d0d0d;
  color: #c8f135;
  text-decoration: none;
}

/* ── GRILLE DESKTOP ──────────────────────────────────────── */

.planning-mensuel-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 8px;
  margin: 1em 0 2em;
}

.jour-cellule {
  background: #fdfdfd;
  padding: 8px;
  min-height: 160px;
  border-radius: 12px;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid #ebebeb;
  transition: border-color 0.2s;
}

.jour-cellule:hover {
  border-color: #c8f135;
}

.jour-titre {
  font-weight: 700;
  font-size: 0.78em;
  margin-bottom: 6px;
  color: #888;
  letter-spacing: 0.04em;
}

/* ── BLOCS COURS DESKTOP ─────────────────────────────────── */

.cours-bloc {
  padding: 8px 10px;
  margin-top: 5px;
  border-radius: 10px;
  text-align: left;
  font-size: 0.8em;
  line-height: 1.35em;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cours-bloc:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.cours-bloc a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.cours-bloc .lieu-event {
  font-size: 0.88em;
  font-weight: 600;
  margin-bottom: 3px;
}

.cours-bloc .heure {
  font-size: 0.82em;
  font-weight: 700;
  margin-bottom: 3px;
}

.cours-bloc .sous-titre {
  font-size: 0.82em;
  font-weight: 500;
  line-height: 1.2em;
}

.cours-bloc .intensite-label {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 0.9em;
}

.cours-bloc .animatrice {
  font-style: normal;
}

/* Fond pastel doux + bordure colorée vive */
.cours-bloc { border: 2px solid transparent; }
.cours-bloc .lieu-event,
.cours-bloc .heure,
.cours-bloc .sous-titre,
.cours-bloc .intensite-label,
.cours-bloc .animatrice { color: inherit !important; }

.cours-bloc.intensite-jaune  { background-color: #fffdf6 !important; border-color: #f5c842; color: #7a5800; }
.cours-bloc.intensite-rouge  { background-color: #fff8f6 !important; border-color: #f07855; color: #7a2e18; }
.cours-bloc.intensite-violet { background-color: #fcfaff !important; border-color: #b07be8; color: #4a2080; }
.cours-bloc.intensite-bleu   { background-color: #f7fbff !important; border-color: #7fc4f0; color: #1a4a70; }
.cours-bloc.intensite-vert   { background-color: #f7fff7 !important; border-color: #7de8a0; color: #1a5530; }
.cours-bloc.intensite-rose   { background-color: #fff6fc !important; border-color: #f5a0c8; color: #7a2050; }
.cours-bloc.intensite-gris   { background-color: #f4f4f4 !important; border-color: #bbb;    color: #666; }

/* Cours passés — désaturé */
.cours-bloc.passe {
  background-color: #efefef !important;
  border-color: #ccc !important;
  box-shadow: none;
}
.cours-bloc.passe .heure,
.cours-bloc.passe .sous-titre,
.cours-bloc.passe .intensite-label,
.cours-bloc.passe .lieu-event,
.cours-bloc.passe .animatrice { color: #bbb !important; }

/* ── MOBILE ──────────────────────────────────────────────── */

@media only screen and (max-width: 768px) {
  #planning-desktop {
    display: none !important;
  }
  #planning-mobile {
    display: block !important;
  }
  #planning-desktop,
  #planning-mobile {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.planning-nav-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1em 0 1.5em;
}

.nav-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  color: #0d0d0d;
  border: 1.5px solid #0d0d0d;
  border-radius: 50%;
  text-decoration: none;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.nav-mobile:hover {
  background: #0d0d0d;
  color: #c8f135;
}

.periode-mobile {
  font-weight: 700;
  font-size: 0.95em;
  color: #0d0d0d;
  letter-spacing: -0.01em;
}

.bloc-jour {
  margin-bottom: 2em;
}

.titre-jour {
  font-weight: 800;
  font-size: 0.9em;
  margin-bottom: 8px;
  color: #0d0d0d;
  text-transform: capitalize;
  letter-spacing: -0.01em;
  padding-bottom: 6px;
  border-bottom: 2px solid #0d0d0d;
}

.cours-bloc-lien {
  text-decoration: none !important;
  display: block;
  transition: transform 0.15s ease;
}

.cours-bloc-lien:hover {
  transform: translateX(4px);
}

.cours-bloc-mobile {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-left: 4px solid transparent;
}

.mobile-horaire {
  font-size: 0.82em;
  font-weight: 700;
  margin-bottom: 3px;
}

.mobile-intensite {
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.3em;
}

.mobile-intensite .intensite-label {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.message-aucun-cours {
  background: #f5f2eb;
  border: 1.5px dashed #ccc;
  padding: 1.2em;
  border-radius: 12px;
  text-align: center;
  color: #888;
  font-size: 0.9em;
  margin-top: 2em;
  font-style: italic;
}

/* Couleurs mobile — fond pastel + bordure vive */
.cours-bloc-mobile { border: 2px solid transparent; }
.cours-bloc-mobile .mobile-horaire,
.cours-bloc-mobile .mobile-intensite,
.cours-bloc-mobile .intensite-label { color: inherit !important; }

.cours-bloc-mobile.intensite-jaune  { background-color: #fffdf6; border-color: #f5c842; color: #7a5800; }
.cours-bloc-mobile.intensite-rouge  { background-color: #fff8f6; border-color: #f07855; color: #7a2e18; }
.cours-bloc-mobile.intensite-violet { background-color: #fcfaff; border-color: #b07be8; color: #4a2080; }
.cours-bloc-mobile.intensite-bleu   { background-color: #f7fbff; border-color: #7fc4f0; color: #1a4a70; }
.cours-bloc-mobile.intensite-rose   { background-color: #fff6fc; border-color: #f5a0c8; color: #7a2050; }
.cours-bloc-mobile.intensite-gris   { background-color: #f4f4f4; border-color: #bbb;    color: #666;    }
.cours-bloc-mobile.intensite-vert   { background-color: #f7fff7; border-color: #7de8a0; color: #1a5530; }

/* ============================================================
   WTF Planning Homepage — Fond dark, semaine en cours
   À coller dans style.css du thème enfant
   ============================================================ */

.wtf-home-planning {
  background: transparent;
  border-radius: 16px;
  padding: 0;
}

.wtf-home-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 12px;
}

.wtf-home-day-name {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebebeb;
}

.wtf-home-slots {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
}

/* Blocs cours */
.wtf-home-slot {
  display: block !important;
  width: auto !important;
  float: none !important;
  text-decoration: none !important;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wtf-home-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  color: inherit !important;
}

.wtf-home-slot:hover .wtf-slot-heure,
.wtf-home-slot:hover .wtf-slot-intensite,
.wtf-home-slot:hover .wtf-slot-lieu {
  color: inherit !important;
}

.wtf-slot-heure {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 3px;
}

.wtf-slot-intensite {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}

.wtf-slot-lieu {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.65;
}

/* Couleurs — identiques au planning complet
   fond pastel très doux + bordure colorée + texte foncé teinté */

.wtf-home-slot {
  border: 2px solid transparent;
}

.wtf-slot-heure,
.wtf-slot-intensite,
.wtf-slot-lieu { color: inherit; }

.wtf-slot-jaune  { background-color: #fffdf6; border-color: #f5c842; color: #7a5800; }
.wtf-slot-rouge  { background-color: #fff8f6; border-color: #f07855; color: #7a2e18; }
.wtf-slot-violet { background-color: #fcfaff; border-color: #b07be8; color: #4a2080; }
.wtf-slot-bleu   { background-color: #f7fbff; border-color: #7fc4f0; color: #1a4a70; }
.wtf-slot-vert   { background-color: #f7fff7; border-color: #7de8a0; color: #1a5530; }
.wtf-slot-rose   { background-color: #fff6fc; border-color: #f5a0c8; color: #7a2050; }
.wtf-slot-gris   { background-color: #f4f4f4; border-color: #bbb;    color: #666;    }

/* Cours annulé */
.wtf-slot-annule { background-color: #f4f4f4; border-color: #ccc; color: #aaa; }
.wtf-slot-annule .wtf-slot-heure,
.wtf-slot-annule .wtf-slot-intensite,
.wtf-slot-annule .wtf-slot-lieu { text-decoration: line-through; }

/* Cours passés */
.wtf-slot-passe { opacity: 0.4; }

/* ── MOBILE : liste par jour ─────────────────────────────── */
@media only screen and (max-width: 768px) {

  .wtf-home-planning {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .wtf-home-grid {
    display: block !important;
  }

  .wtf-home-col {
    margin-bottom: 1.5em;
  }

  .wtf-home-day-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: #F7FAFC;
    border-bottom: 2px solid #0d0d0d;
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  .wtf-home-slots {
    gap: 6px;
  }

  .wtf-home-slot {
    padding: 10px 14px;
    border-radius: 10px;
  }

  .wtf-slot-heure {
    font-size: 0.82rem;
  }

  .wtf-slot-intensite {
    font-size: 0.85rem;
  }

  .wtf-slot-lieu {
    font-size: 0.75rem;
  }

  /* Cours passés masqués sur mobile */
  .wtf-home-slot.wtf-slot-passe {
    display: none !important;
  }

  /* Colonnes sans cours à venir masquées sur mobile */
  .wtf-home-col-vide {
    display: none !important;
  }
}