/************************************************************
 * 1) Styles généraux
 ************************************************************/

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 16px;
  color: #111827;
}

h2 {
  margin: 0 0 16px;
}

/************************************************************
 * 2) Calendrier mensuel (table .cal-cal)
 ************************************************************/

.cal-cal {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 30px;
}

.cal-cal th,
.cal-cal td {
  border: 1px solid #e5e7eb;
  padding: 4px;
  vertical-align: top;
  height: 100px;
  font-size: 13px;
}

/* En-tête de jours + bandeaux de mois (couleur commune) */
.cal-head th,
.mois-section > h3 {
  background-color: #facc15; /* jaune doré */
  color: #111827;
  text-align: center;
  font-weight: 600;
}

.cal-head th {
  border-bottom-width: 2px;
}

.jour {
  width: 14.28%;
}

/************************************************************
 * 3) Index de mois (utilisé par calendrier et listings)
 ************************************************************/

.menu-mois {
  text-align: center;
  margin: 12px 0 20px;
  line-height: 2.2;
}

.mois-link {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  text-decoration: none;
  margin: 4px 6px;
  font-size: 13px;
  color: #1e293b;
  background-color: #f9fafb;
}

.mois-link:hover {
  background: #eef2ff;
  text-decoration: underline;
}

/************************************************************
 * 4) Popover sur les pastilles du calendrier
 ************************************************************/

/* La cellule sert de référence à la position absolue */
.cal-cal td { position: relative;  overflow: visible; }

/* Conteneur de la pastille (calendrier) */
.nav {
  display: block;          /* AU LIEU DE inline-block */
  width: 100%;
  margin: 2px 0;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
  
  position: relative;
  z-index: 1;
}

.nav a {
  text-decoration: none;
}

/* Pastille avec popover (au survol / focus) */
.nav.has-popover {
  position: relative;
}

/* Popover : fiche détaillée */
.popover {
  position: absolute;
  z-index: 1001;
  top: 22px;
  left: 0;
  min-width: 260px;
  max-width: 360px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  padding: 10px 12px;
  display: none;
  color: #1f2933;     /* texte foncé lisible dans la fiche */
}

.popover-left {
  left: auto;
  right: 0;
}

.nav.has-popover:hover .popover,
.nav.has-popover:focus-within .popover {
  display: block;
}

.nav.has-popover:hover,
.nav.has-popover:focus-within {
  z-index: 1000;
}

.popover h4 {
  margin: 0 0 6px;
  font-size: 14px;
}

.popover dl {
  margin: 0;
}

.popover dt {
  font-weight: 600;
  display: inline;
}

.popover dd {
  display: inline;
  margin: 0 0 6px 4px;
}

.popover .desc {
  margin-top: 6px;
  max-height: 160px;
  overflow: auto;
  line-height: 1.35;
  color: #111827;
  font-size: 12px;
}

.popover .muted {
  color: #64748b;
  font-size: 12px;
  margin-top: 6px;
  display: block;
}

/* Liens à l’intérieur du popover (ex. « Cliquer pour s’inscrire ») */
.popover a {
  color: #1d4ed8;
  text-decoration: none;
}
.popover a:hover {
  text-decoration: underline;
}

/* Le lien d'inscription dans le popover doit rester bleu lisible,
   même si la pastille est rouge/bleue, etc. */
.nav.has-popover .popover .cta-inscription {
  color: #2563eb !important;
}

/* Garder le popover ouvert tant que la souris est dans la cellule (supprimé pour concentrer le popover sur la pastille nav plutôt que sur la case calendrier)
.cal-cal td:hover .popover {
  display: block;
}*/

/* Éviter le trou entre la pastille et la fiche */
.nav.has-popover {
  padding-bottom: 20px;       /* ajuste si besoin */
}


/* Même hauteur visuelle pour les titres de mois (vignettes) et la ligne des jours (calendrier)*/
.cal-head th {
  padding: 8px 10px;
  height: 32px;
}

.mois-section > h3 {
  padding: 8px 10px;
  height: 32px;
  display: block;
  width: 100%;         /* bandeau sur toute la largeur */
  box-sizing: border-box;
}
/* ============================================================
 * 4bis) Badge "COMPLET" (popover + vignettes)
 * ============================================================ */

/* Badge simple (rouge + blanc gras) */
.badge-complet {
  display: inline-block;
  font-weight: 800;
  color: #ffffff;
  background: #b91c1c;      /* rouge */
  padding: 3px 8px;
  border-radius: 999px;     /* pill */
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.2;
}
/* Popover complet : réserve un coin pour le ruban */
.popover.complet {
  position: absolute; /* déjà le cas, mais on le rappelle */
  overflow: hidden;   /* pour couper le ruban */
  padding-top: 18px;  /* laisse un peu d'air sous le ruban */
}

/* Ruban diagonal (option) : uniquement si .popover.complet */
.popover.complet .ruban-complet {
  position: absolute;
  top: 10px;
  right: -44px;               /* décale pour l'angle */
  transform: rotate(35deg);
  width: 160px;
  text-align: center;
  font-weight: 900;
  color: #ffffff;
  background: #b91c1c;
  padding: 4px 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
/* Le ruban ne doit pas capturer les clics */
.ruban-complet {
  pointer-events: none;
}

/************************************************************
 * 5) Vue vignettes (cartes par mois)
 ************************************************************/

/* Section de mois : même bandeau que le calendrier (cf. plus haut) */
.mois-section {
  margin: 18px 0 28px;
}

.mois-section > h3 {
  padding: 8px 10px;
  height: 32px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  background-color: #facc15;  /* ou la même couleur que tes th */
  color: #111827;
  border-radius: 8px;
  margin: 0 0 8px 0;
}


/* Grille de vignettes */
.mois-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

/* Carte pour une navigation */
.nav-card {
  width: 240px;
  min-height: 120px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px 10px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  font-size: 13px;
}

/* Bandeau bateau dans la vignette (la couleur vient des classes bateau-*) */
.nav-card .boat {
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  display: block;
  margin-bottom: 4px;
}

.nav-card .boat a {
  text-decoration: none;
}

/* Dates et description dans la carte */
.nav-card .dates {
  font-size: 12px;
  color: #475569;
}

.nav-card .desc {
  margin-top: 4px;
  font-size: 12px;
  color: #111827;
}

.nav-card .cta {
  margin-top: 6px;
  font-size: 12px;
}

/* Vignette complète : badge en haut à droite */
.nav-card.complet {
  position: relative;
  overflow: hidden;
}

.nav-card.complet .badge-complet {
  position: absolute;
  top: 10px;
  right: 10px;
}
/* Ruban diagonal dans la vignette (option) */
.nav-card.complet .ruban-complet {
  position: absolute;
  top: 14px;
  right: -54px;
  transform: rotate(35deg);
  width: 190px;
  text-align: center;
  font-weight: 900;
  color: #ffffff;
  background: #b91c1c;
  padding: 5px 0;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.cta-complet {
  font-weight: 800;
  color: #b91c1c;
  text-transform: uppercase;
}
/* Le ruban ne doit pas capturer les clics */
.ruban-complet {
  pointer-events: none;
}

/************************************************************
 * 6) Couleurs par bateau (définies UNE seule fois)
 *    – utilisées à la fois pour les pastilles du calendrier (.nav)
 *      et pour les bandeaux des vignettes (.nav-card .boat)
 ************************************************************/

/* Joshua : fond rouge assez vif + texte blanc */
.nav.bateau-joshua,
.nav-card.bateau-joshua .boat {
  background-color: #e52321;
  color: #ffffff;
}

.nav.bateau-joshua a,
.nav-card.bateau-joshua .boat a {
  color: #ffffff;
}

/* Damien : fond bleu clair + texte foncé */
.nav.bateau-damien,
.nav-card.bateau-damien .boat {
  background-color: #5671b6;
  color: #ffffff;
}

.nav.bateau-damien a,
.nav-card.bateau-damien .boat a {
  color: #ffffff;
}

/* Autres bateaux : gris bleuté + texte foncé */
.nav.bateau-autre,
.nav-card.bateau-autre .boat {
  background-color: #94a3b8;
  color: #111827;
}

.nav.bateau-autre a,
.nav-card.bateau-autre .boat a {
  color: #111827;
}