/* ==========================================================
   CALENDRIER — pistes paralleles partageant les memes lignes
   ==========================================================
   Le calendrier n'est pas une grille 7x5 mais une liste de jours
   en lignes, traversee par quatre pistes verticales : evenement
   long, jour, raids, evenement quotidien.

   Hauteur de ligne FIXE (58px) : c'est ce qui garde l'alignement
   lisible d'un bout a l'autre du mois. Tout le dimensionnement
   ci-dessous en decoule et ne doit pas etre modifie isolement.

   Le calcul, a 360px de large :
     360 - 24 (padding .pokemon-app) = 336 utiles
     336 - 6 (trois gouttieres) = 330
     330 - 36 (colonne Jour, la DEUXIEME) = 294, soit 98px par piste
   L'ordre des colonnes est : Evenement, Jour, Raids, Quotidien. Seule
   la deuxieme est etroite ; les trois autres sont a egalite.
     98 - 8 (padding) - 4 (gouttieres) = 86, soit 28px par sprite
   Trois sprites de 28px rentrent donc exactement sur une ligne.

   La piste Raids empile deux rangees (legendaires puis megas). Ses
   sprites n'ont PAS de taille fixe : le script calcule celle qui remplit
   au mieux chaque segment, bornee par deux contraintes.
     - La largeur : trois sprites cote a cote plafonnent a 28px, deux a
       44px, un seul a 56px.
     - La hauteur : un segment de D jours offre 60*D-2 pixels, moins
       10px d'ecart entre rangees et 4px de marges, le tout divise par
       deux rangees, soit 30*D-13.
   Une rotation d'un seul jour est donc limitee a 22px, une de deux
   jours atteint 44px, une de sept jours 56px. C'est ce qui evite les
   grands vides sur les longues rotations.

   Les trois pistes de contenu sont en minmax(0, 1fr) et NON en 1fr :
   sans le 0, une colonne ne descend jamais sous la largeur minimale de
   son contenu. Les pistes a sprites ont un plancher de 96px et poussent,
   tandis que la piste Evenement, qui ne contient que du texte repliable,
   absorbe tout l'ecrasement.
   ========================================================== */

/* --- Navigation entre les mois --- */

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 14px;
}

.cal-nav button {
  background: var(--bg-carte);
  color: var(--text-principal);
  border: 1px solid var(--border-carte);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 14px;
  cursor: pointer;
}

.cal-nav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cal-nav-mois {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-principal);
  min-width: 170px;
  text-align: center;
}

/* --- Notes generales du mois --- */

.cal-notes {
  background: var(--bg-bandeau-tache);
  border-left: 4px solid var(--accent-or);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 0 14px;
}

.cal-notes p {
  margin: 0 0 3px;
  font-size: 0.78rem;
  color: var(--text-secondaire);
}

.cal-notes p:last-child { margin-bottom: 0; }

/* Invite de clic. Elle est en dur dans le HTML et non dans le panneau :
   le panneau flotte et n'existe qu'une fois qu'on a clique, donc il ne
   peut plus porter l'indication qui apprend justement a cliquer. */
.cal-astuce {
  font-size: 0.8rem;
  color: var(--text-astuce);
  text-align: center;
  margin: 0 0 14px;
}

/* Sur l'accueil, la meme ligne ne sert pas a apprendre le clic mais a
   renvoyer vers le mois entier. Elle y est plus discrete : c'est un
   renvoi, pas une consigne, et elle suit immediatement la grille. Le
   selecteur d'adjacence evite d'avoir a poser une classe de plus dans
   index.html. */
.cal-astuce a { color: var(--accent-bleu); }

.cal-compact + .cal-astuce {
  font-size: 0.68rem;
  margin: 0;
}

/* --- La grille --- */

.cal-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 58px;
  gap: 2px;
  margin-bottom: 18px;
}

/* Les en-tetes reprennent la couleur de leur piste quand celle-ci en a
   une seule. La piste Quotidien est multicolore par nature : lui donner
   une teinte laisserait croire qu'elle designe une categorie precise,
   donc elle reste neutre, encadree comme les pastilles de jour. */
.cal-entete {
  font-size: 0.7rem;
  text-align: center;
  align-self: end;
  padding: 3px 4px;
  margin-bottom: 3px;
  border-radius: 6px;
  overflow: hidden;
}

.cal-entete-evenements { background: var(--cal-evt-bg);   color: var(--cal-evt-txt); }
.cal-entete-raids      { background: var(--cal-raids-bg); color: var(--cal-raids-txt); }

.cal-entete-quotidien {
  background: var(--bg-carte);
  border: 1px solid var(--border-carte);
  color: var(--text-secondaire);
}

/* Colonne 2 : le jour. Le numero porte la lecture. */
/* La colonne des jours est une pastille encadree, ni vide ni pleine :
   un fond de carte et un filet suffisent a la faire ressortir entre
   deux pistes aux aplats francs, sans lui voler leur lisibilite. */
.cal-jour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-carte);
  border: 1px solid var(--border-carte);
  border-radius: 8px;
  color: var(--text-principal);
}

/* L'abreviation reste discrete au-dessus, le numero porte la lecture.
   A 0.6rem, "mar" occupe environ 18px : ca tient dans les 36px de la
   colonne sans avoir a l'elargir au detriment des pistes a sprites,
   qui ont besoin de leurs 96px pour trois sprites de 28px. */
.cal-jour-lettre {
  font-size: 0.6rem;
  line-height: 1;
  color: var(--text-muet);
  margin-bottom: 2px;
}

.cal-jour-num {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}

/* Seul le samedi est mis en avant : c'est le jour ou tombent les
   evenements. Le dimanche reste un jour comme les autres. */
.cal-jour-samedi {
  background: var(--bg-bandeau-tache);
}

.cal-jour-samedi .cal-jour-num,
.cal-jour-samedi .cal-jour-lettre { color: var(--accent-bleu); }

.cal-jour-aujourdhui {
  border: 2px solid var(--accent-bleu);
}

/* --- Blocs colores (pistes 1 et 4) --- */

.cal-bloc {
  border-radius: 6px;
  padding: 3px 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Piste 1 : evenement long. Pas de sprite possible, du texte,
   centre verticalement sur toute la duree de l'evenement. */
.cal-evt-nom {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* Piste 4 : libelle au-dessus, sprites en dessous. Le libelle fait une
   ou deux lignes selon la categorie ; c'est lui qui a impose de passer
   la hauteur de ligne de 53 a 58px, deux lignes de texte plus un sprite
   de 28px ne tenant pas dans 53 sans devenir illisibles. */
.cal-libelle {
  font-size: 0.6rem;
  line-height: 1.15;
  margin-bottom: 2px;
  text-align: center;
}

.cal-sprites {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
}

.cal-sprites img {
  width: 28px;
  height: 28px;
  display: block;
}

/* Tailles calculees par le script pour la piste Raids. Ces regles
   ciblent .cal-sprites : tout <img> de la piste doit donc etre place
   dans un conteneur .cal-sprites, y compris en rangee fusionnee, sinon
   il s'affiche a sa taille native de 512px. */
.cal-sp-16 .cal-sprites img { width: 16px; height: 16px; }
.cal-sp-22 .cal-sprites img { width: 22px; height: 22px; }
.cal-sp-28 .cal-sprites img { width: 28px; height: 28px; }
.cal-sp-36 .cal-sprites img { width: 36px; height: 36px; }
.cal-sp-44 .cal-sprites img { width: 44px; height: 44px; }
.cal-sp-56 .cal-sprites img { width: 56px; height: 56px; }

/* Repli quand le sprite n'existe pas encore dans Images/ */
.cal-repli {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* --- Piste 3 : les raids --- */
/* Rectangle plein, au meme titre que les autres pistes : sans fond, on
   ne voyait pas ou une rotation commencait ni ou elle finissait. Sa
   teinte lui est propre (--cal-raids-*) pour ne pas etre confondue avec
   le gris de la categorie Go Fest, en piste 4. */

.cal-raids {
  background: var(--cal-raids-bg);
  color: var(--cal-raids-txt);
  border-radius: 6px;
  padding: 2px 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Les megas sont decroches des legendaires : sans ecart, les deux
   rangees se lisaient comme un seul groupe. L'ecart grandit avec la
   duree du segment, qui a d'autant plus de hauteur a occuper. Classe
   posee par le script. */
.cal-ec-4  .cal-raids-megas { margin-top: 4px; }
.cal-ec-10 .cal-raids-megas { margin-top: 10px; }
.cal-ec-16 .cal-raids-megas { margin-top: 16px; }
.cal-ec-24 .cal-raids-megas { margin-top: 24px; }
.cal-ec-32 .cal-raids-megas { margin-top: 32px; }
.cal-ec-40 .cal-raids-megas { margin-top: 40px; }


/* Rotation regionalisee : un libelle de zone au-dessus de chaque
   Pokemon, empiles. N'apparait que si le JSON porte des regions. */
.cal-raids-region {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cal-raids-region + .cal-raids-region {
  margin-top: 6px;
}


.cal-raids-zone {
  font-size: 0.55rem;
  line-height: 1.1;
  margin-bottom: 1px;
}

.cal-raids .cal-repli {
  font-size: 0.6rem;
}

/* --- Couleurs de categorie --- */

.cal-cat-evenement     { background: var(--cal-evt-bg);      color: var(--cal-evt-txt); }
.cal-cat-heure-raid    { background: var(--cal-raid-bg);     color: var(--cal-raid-txt); }
.cal-cat-journee-raids { background: var(--cal-journee-bg);  color: var(--cal-journee-txt); }
.cal-cat-dynamax       { background: var(--cal-dynamax-bg);  color: var(--cal-dynamax-txt); }
.cal-cat-heure-vedette { background: var(--cal-vedette-bg);  color: var(--cal-vedette-txt); }
.cal-cat-community-day { background: var(--cal-cd-bg);       color: var(--cal-cd-txt); }
.cal-cat-gofest        { background: var(--cal-gofest-bg);   color: var(--cal-gofest-txt); }
.cal-cat-maitrise      { background: var(--cal-maitrise-bg); color: var(--cal-maitrise-txt); }
.cal-cat-saison        { background: var(--cal-saison-bg);   color: var(--cal-saison-txt); }

/* --- Panneau de detail, ouvert au clic --- */
/* Il flotte au-dessus du calendrier plutot que de s'inserer dans le
   flux : la grille reste visible derriere, et le panneau ne bouge plus
   au defilement. Ancre en bas sur mobile, ou le pouce arrive, et pose
   en bas a droite sur grand ecran.

   z-index 9999 : il faut depasser le bouton "retour en haut" (9998,
   pose par la section 13 de script.js), qui occupe le meme coin. Le
   menu mobile deroule reste au-dessus, a 10000. */

.cal-detail {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  background: var(--bg-carte);
  border: 1px solid var(--border-carte);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  padding: 14px 40px 14px 16px;
  max-height: 55vh;
  overflow-y: auto;
  display: none;
}

.cal-detail-ouvert {
  display: block;
}

.cal-detail-fermer {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--bg-bandeau-tache);
  color: var(--text-principal);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cal-detail h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--text-principal);
}

.cal-detail-heures {
  font-size: 0.85rem;
  color: var(--accent-bleu);
  margin: 0 0 8px;
}

.cal-detail p {
  margin: 0 0 6px;
  font-size: 0.88rem;
  color: var(--text-secondaire);
}

/* Les noms de Pokemon sont en gras ; leur couleur vient de pokemon.css,
   qui met en vert ceux qui figurent dans un Top. On ne redefinit donc
   PAS la couleur ici, sous peine de doubler cette source de verite.
   font-size en inherit : .pokemon-name est dimensionne pour les cartes,
   pas pour un paragraphe. */
/* .pokemon-name est un conteneur flex centre avec min-height 3.2em dans
   global.css, calibre pour les cartes. Dans un paragraphe il faut tout
   neutraliser, sinon chaque nom part sur sa propre ligne, centre et
   espace. On ne touche PAS a color : c'est pokemon.css qui la porte,
   avec la meme specificite que cette regle. */
.cal-detail .pokemon-name {
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-align: inherit;
}

.cal-forme {
  font-style: italic;
}

.cal-detail a { color: var(--accent-bleu); }

/* --- Variante compacte : apercu de sept jours sur l'accueil --- */
/* Meme grille, memes pistes, meme moteur : seule la hauteur de ligne
   descend a 44px. Le script le sait (constante PAS de la section 19, qui
   vaut 46 = 44 + 2 de gouttiere) et calcule les sprites de la piste Raids
   en consequence. Les deux valeurs ne doivent jamais bouger l'une sans
   l'autre, sinon les sprites debordent ou laissent un vide.

   A 44px il ne reste que 38px sous les marges, la ou deux lignes de texte
   plus un sprite en reclament 45 : la piste Quotidien n'affiche donc
   qu'UNE ligne dans cette variante (le script s'en charge) et ses sprites
   tombent a 22px.

   La regle des sprites vise .cal-bloc et non .cal-sprites tout court :
   sans ca elle ecraserait les .cal-sp-NN de la piste Raids, qui ont la
   meme specificite mais sont declarees plus haut dans le fichier. */

/* grid-template-rows neutralise : la page reserve sa premiere ligne aux
   en-tetes de pistes, que l'apercu n'affiche pas. Sans ca, le premier jour
   se dimensionnerait sur son contenu au lieu de suivre les autres. */
.cal-compact {
  grid-template-rows: none;
  grid-auto-rows: 44px;

  /* Un cadre fin ferme l'apercu. Sur sept lignes, les trous de la piste
     Evenements — les jours sans evenement long — donnaient une grille qui
     flotte au milieu de la page ; le filet lui rend un bord.

     Le padding lateral coute de la largeur de piste, et cette largeur est
     connue du script : 336px utiles a l'accueil, moins 2px de bordure,
     moins 8px de padding, moins 6px de gouttieres, moins 36px pour la
     colonne des jours = 284px pour trois pistes, soit 94px chacune.
     C'est la constante LARGEUR de la section 19, qui en deduit la taille
     des sprites de la piste Raids. Les deux ne doivent jamais bouger
     l'une sans l'autre. */
  border: 1px solid var(--border-carte);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 6px;
}

.cal-compact .cal-jour-num    { font-size: 1.2rem; }
.cal-compact .cal-jour-lettre { font-size: 0.55rem; margin-bottom: 1px; }
.cal-compact .cal-evt-nom     { font-size: 0.66rem; line-height: 1.2; }
.cal-compact .cal-libelle     { font-size: 0.55rem; margin-bottom: 1px; }
.cal-compact .cal-repli       { font-size: 0.6rem; }
.cal-compact .cal-bloc .cal-sprites img { width: 22px; height: 22px; }

/* --- Desktop : tout respire, les sprites grandissent --- */

@media (min-width: 769px) {
  .cal-grille {
    grid-template-columns: minmax(0, 1fr) 70px repeat(2, minmax(0, 1fr));
    grid-auto-rows: 76px;
    gap: 4px;
  }

  .cal-sprites img { width: 40px; height: 40px; }
  .cal-libelle { font-size: 0.78rem; margin-bottom: 4px; }
  .cal-evt-nom { font-size: 0.9rem; }
  .cal-repli { font-size: 0.82rem; }
  /* Sur grand ecran le panneau se pose en bas a droite : il ne barre
     plus toute la largeur pour trois lignes de texte. */
  .cal-detail {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: 380px;
    max-height: 60vh;
  }

  .cal-entete { font-size: 0.85rem; }
  .cal-jour-num { font-size: 1.9rem; }
  .cal-jour-lettre { font-size: 0.8rem; margin-bottom: 3px; }

  /* L'apercu compact respire aussi, en gardant un cran de moins que la
     page. Le script, lui, continue de calculer ses sprites de Raids sur
     le pas mobile : cale pour le plus petit, il ne deborde jamais sur le
     plus grand. C'est deja la regle de la page. */
  .cal-compact { grid-auto-rows: 58px; }
  .cal-compact .cal-jour-num { font-size: 1.45rem; }
  .cal-compact .cal-jour-lettre { font-size: 0.7rem; }
  .cal-compact .cal-libelle { font-size: 0.68rem; margin-bottom: 2px; }
  .cal-compact .cal-evt-nom { font-size: 0.8rem; }
  .cal-compact .cal-repli { font-size: 0.72rem; }
  .cal-compact .cal-bloc .cal-sprites img { width: 32px; height: 32px; }
}