/* Agenda Inter-Sangha — reprend les variables du thème Moment Présent
   et se rabat sur des valeurs équivalentes si un autre thème est actif. */

.mpa{
  --mpa-ink:  var(--mp-ink, #221F1D);
  --mpa-ink2: var(--mp-ink-2, #5F5853);
  --mpa-muted:var(--mp-muted, #7D766F);
  --mpa-line: var(--mp-line, #EEE3D6);
  --mpa-line2:var(--mp-line-2, #E4D7C8);
  --mpa-cream:var(--mp-cream, #FAF3EC);
  --mpa-paper:var(--mp-paper, #FFFDFA);
  --mpa-brown:var(--mp-brown, #8A5A32);
  --mpa-serif:var(--mp-serif, 'Cormorant Garamond', Georgia, serif);
  --mpa-sans: var(--mp-sans, 'Mulish', 'Segoe UI', system-ui, sans-serif);

  font-family:var(--mpa-sans);
  color:var(--mpa-ink);
}

/* ===========================================================================
   LA PALETTE — une couleur par sangha
   ===========================================================================
   C'est le seul endroit du site où ces couleurs sont écrites. Pour changer la
   palette, remplacez les valeurs ci-dessous : la grille du mois, les
   filtres, les cartouches et les liens « En savoir plus » suivront seuls.

   Le nom court à gauche (ardoise, vert…) est celui que l'on choisit dans le
   champ « Couleur sur le site » de chaque fiche calendrier. Il ne décrit plus
   la teinte : il désigne un emplacement dans la palette.
   ------------------------------------------------------------------------ */

.mpa{
  --mpa-c-ardoise:#0072B2;   /* bleu   — Le Lotus Bleu    */
  --mpa-c-vert:   #007E56;   /* vert   — Graines de Paix  */
  --mpa-c-prune:  #A35481;   /* rose   — CZPC Liège       */
  --mpa-c-brun:   #BD4A00;   /* orange — Inter Sangha     */

  --mpa-c-sable:  #644600;   /* bronze — Sangha des Tilleuls */

  /* En réserve, pour une sixième sangha. Valeur provisoire : son écart avec
     les cinq autres n'a pas été vérifié en vision daltonienne. */
  --mpa-c-fonce:  #5B4B8A;   /* violet */
}

.mpa .mpa-c-ardoise{ --mpa-couleur:var(--mpa-c-ardoise); }
.mpa .mpa-c-vert   { --mpa-couleur:var(--mpa-c-vert);    }
.mpa .mpa-c-prune  { --mpa-couleur:var(--mpa-c-prune);   }
.mpa .mpa-c-brun   { --mpa-couleur:var(--mpa-c-brun);    }
.mpa .mpa-c-fonce  { --mpa-couleur:var(--mpa-c-fonce);   }
.mpa .mpa-c-sable  { --mpa-couleur:var(--mpa-c-sable);   }

/* Le cartouche : le nom de la sangha dans un rectangle de sa couleur.
   Il remplace la pastille ronde, qui ne subsiste que dans la grille du mois,
   où il n'y a pas la place d'écrire. */
.mpa .mpa-cartouche{
  display:inline-block; padding:6px 12px;
  background:var(--mpa-couleur, var(--mpa-brown)); color:#fff;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  line-height:1.4;
}

.mpa *{ box-sizing:border-box; }
.mpa [hidden]{ display:none !important; }
.mpa .mpa-desc{ margin:0; }
.mpa .mpa-desc[open]{ display:flex; flex-direction:column; }
.mpa .mpa-desc > summary{ display:block; cursor:pointer; list-style:none; }
.mpa .mpa-desc > summary::-webkit-details-marker{ display:none; }
.mpa .mpa-desc > summary::after{ content:'En savoir plus ⌄'; display:block; margin-top:6px; font-size:12.5px; letter-spacing:.04em; text-decoration:underline; text-underline-offset:3px; color:var(--mpa-brown); }
.mpa .mpa-desc[open] > .mpa-desc-corps{ order:1; }
.mpa .mpa-desc[open] > summary{ order:2; font-size:0; line-height:0; }
.mpa .mpa-desc[open] > summary::after{ content:'Réduire ⌃'; margin-top:6px; }

/* ---------------------------------------------------------------------------
   L'agenda s'affiche à l'intérieur du contenu éditorial du thème, dont les
   règles visent les mêmes éléments (h2, h3, p) avec la même force. On reprend
   la main avec deux classes plutôt qu'une.
   --------------------------------------------------------------------------- */

.mpa .mpa-mois,
.mpa .mpa-titre,
.mpa .mpa-evt p{
  margin:0; padding:0;
}
.mpa .mpa-mois{ margin:44px 0 4px; padding-bottom:12px; }
.mpa .mpa-mois:first-child{ margin-top:0; }


/* ------------------------------------------------------------ filtres --- */

/* La barre n'est plus une légende — chaque événement porte désormais le nom de
   sa sangha en clair. C'est un sélecteur : on choisit qui l'on veut voir. */

.mpa-filtres{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-bottom:28px; }

.mpa .mpa-filtres-titre{
  margin-right:6px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--mpa-muted);
}

.mpa-chip{
  display:inline-flex; align-items:center;
  min-height:40px; padding:0 14px;
  border:1px solid var(--mpa-couleur, var(--mpa-brown));
  background:var(--mpa-paper); color:var(--mpa-couleur, var(--mpa-brown));
  font-family:inherit; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  cursor:pointer; border-radius:0;
}
.mpa-chip:hover{ background:var(--mpa-cream); }
.mpa-chip.is-on{ background:var(--mpa-couleur, var(--mpa-brown)); color:#fff; }

.mpa-pastille{ width:7px; height:7px; border-radius:50%; display:inline-block; background:var(--mpa-couleur, var(--mpa-brown)); flex-shrink:0; }

/* --------------------------------------------------------------- mois --- */

.mpa .mpa-mois{
  font-family:var(--mpa-serif); font-weight:500; font-size:30px; line-height:1.2;
  color:var(--mpa-ink); margin:44px 0 4px; padding-bottom:12px;
  border-bottom:1px solid var(--mpa-line2);
  text-transform:capitalize;
}
/* ---------------------------------------------------------- événement --- */

.mpa-evt{
  display:grid; gap:14px;
  padding:24px 0; border-bottom:1px solid var(--mpa-line);
}
@media (min-width:760px){
  .mpa-evt{ grid-template-columns:118px minmax(0,1fr) auto; gap:28px; align-items:start; }
}

.mpa-date{ display:flex; flex-direction:column; gap:2px; }

/* Le quantième et le mois sur une même ligne de base. L'intertitre « Septembre
   2026 » sort de l'écran dès qu'on fait défiler la liste : sans le mois ici,
   « 9 mercredi » ne situe plus rien. */
.mpa .mpa-jour{ display:flex; align-items:baseline; gap:7px; }
.mpa .mpa-jour b{
  font-family:var(--mpa-serif); font-size:38px; line-height:1; font-weight:500;
  color:var(--mpa-ink);
}
.mpa .mpa-mois-court{
  font-size:13px; letter-spacing:.06em; font-weight:700; color:var(--mpa-ink2);
  white-space:nowrap;
}
/* Le jour de la semaine reste neutre : la couleur de la sangha est déjà portée
   par le cartouche, juste à côté. La répéter ici n'ajoute aucune information. */
.mpa .mpa-jsem{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--mpa-ink2);
}
.mpa .mpa-heure{ font-size:12.5px; color:var(--mpa-muted); font-variant-numeric:tabular-nums; }

.mpa-corps{ display:flex; flex-direction:column; gap:7px; }
.mpa .mpa-source{ display:flex; margin:0 0 1px; }
.mpa .mpa-titre{
  font-family:var(--mpa-serif); font-weight:500; font-style:italic; font-size:25px;
  line-height:1.25; color:var(--mpa-ink); margin:0;
}
.mpa .mpa-lieu{ font-size:14px; color:var(--mpa-ink); font-weight:600; margin:0; }
.mpa .mpa-desc{ font-size:14.5px; line-height:1.75; color:var(--mpa-ink2); font-weight:300; margin:0; max-width:68ch; }

/* La mise en forme saisie dans Google Calendar — paragraphes, gras, liens,
   listes — est conservée telle quelle. Ces règles lui donnent les respirations
   du site plutôt que celles du navigateur. */
.mpa .mpa-evt .mpa-desc-corps > *:first-child{ margin-top:0; }
.mpa .mpa-evt .mpa-desc-corps > *:last-child{ margin-bottom:0; }
.mpa .mpa-evt .mpa-desc-corps p{ margin:0 0 .85em; }
.mpa .mpa-evt .mpa-desc-corps ul,
.mpa .mpa-evt .mpa-desc-corps ol{ margin:.5em 0 .85em; padding-left:1.4em; }
.mpa .mpa-evt .mpa-desc-corps li{ margin:0 0 .3em; }
.mpa .mpa-evt .mpa-desc-corps strong,
.mpa .mpa-evt .mpa-desc-corps b{ font-weight:600; color:var(--mpa-ink); }
.mpa .mpa-evt .mpa-desc-corps a{ color:var(--mpa-brown); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.mpa .mpa-evt .mpa-desc-corps img{ max-width:100%; height:auto; }

/* Certaines descriptions contiennent des tableaux (horaires, tarifs). Sans
   cadre ni largeur maîtrisée, ils débordent sur mobile. */
.mpa .mpa-evt .mpa-desc-corps{ overflow-x:auto; }
.mpa .mpa-evt .mpa-desc-corps table{ width:100%; border-collapse:collapse; margin:.5em 0 .85em; font-size:13.5px; }
.mpa .mpa-evt .mpa-desc-corps th,
.mpa .mpa-evt .mpa-desc-corps td{ border:1px solid var(--mpa-line2); padding:6px 9px; text-align:left; vertical-align:top; }
.mpa .mpa-evt .mpa-desc-corps th{ font-weight:600; color:var(--mpa-ink); background:var(--mpa-cream); }





/* Les pièces jointes attachées à l'événement dans Google Calendar. */
.mpa .mpa-pieces{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.mpa .mpa-pieces li{ margin:0; }
.mpa .mpa-pieces a{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border:1px solid var(--mpa-line2); background:var(--mpa-paper);
  font-size:12.5px; color:var(--mpa-brown); text-decoration:none;
  max-width:100%; overflow-wrap:anywhere;
}
.mpa .mpa-pieces a::before{ content:'↓'; font-size:13px; line-height:1; flex:none; }
.mpa .mpa-pieces a:hover{ border-color:var(--mpa-brown); background:var(--mpa-cream); }

.mpa-cote{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }

.mpa-prix{
  display:inline-block; padding:6px 12px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  white-space:nowrap;
}
.mpa-prix--dana   { background:#E4EDF6; color:#2C5C8A; }
.mpa-prix--gratuit{ background:#EDF1EB; color:#4C5F49; }
.mpa-prix--payant { background:#F6EEDF; color:#8A5A32; }

.mpa-prive{
  display:inline-block; padding:6px 12px; background:#F3E9DE; color:#6E4626;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}

.mpa-vide{
  padding:28px; border:1px dashed var(--mpa-line2);
  font-size:15px; color:var(--mpa-muted); text-align:center;
}

/* ==========================================================================
   Vue « mois » : la grille à gauche, les rendez-vous à droite
   ========================================================================== */

.mpa-deux{ display:grid; gap:40px; }
@media (min-width:1000px){
  .mpa-deux{ grid-template-columns:4fr 8fr; gap:56px; align-items:start; }
}
.mpa-colonne{ display:flex; flex-direction:column; gap:24px; min-width:0; }

.mpa-cal{ border:1px solid var(--mpa-line2); background:var(--mpa-paper); padding:22px; }

.mpa-cal-tete{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; }
.mpa .mpa-cal-tete h3{
  font-family:var(--mpa-serif); font-weight:500; font-size:25px; margin:0;
  color:var(--mpa-ink); text-transform:capitalize;
}
.mpa-cal-fleche{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; font-size:22px; line-height:1;
  color:var(--mpa-brown); text-decoration:none; border:1px solid transparent;
}
.mpa-cal-fleche:hover{ border-color:var(--mpa-line2); color:var(--mpa-brown); }

.mpa-cal-grille{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
.mpa-cal-dow{
  text-align:center; font-size:11px; font-weight:700; color:var(--mpa-sand, #B2A79C);
  padding-bottom:8px;
}
.mpa-cal-jour{
  aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:13px; color:var(--mpa-ink2); font-weight:400;
}
.mpa-cal-vide{ visibility:hidden; }
.mpa-cal-jour.a-des-evts{ background:var(--mpa-cream); font-weight:700; color:var(--mpa-ink); }
.mpa-cal-jour.est-aujourdhui{ outline:1px solid var(--mpa-brown); outline-offset:-1px; }
.mpa-cal-n{ line-height:1; }
.mpa-cal-points{ display:flex; gap:3px; min-height:7px; }

/* Dans la vue « mois », la grille n'affiche que des points : eux ont encore
   besoin d'une clé de lecture. Ailleurs, le cartouche de chaque événement
   suffit et cette légende ne s'affiche pas. */
.mpa-legende{ display:flex; flex-direction:column; gap:10px; }
.mpa .mpa-legende-titre{
  margin:0;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:var(--mpa-muted);
}
.mpa-legende-liste{ display:flex; flex-wrap:wrap; gap:6px; }

.mpa-ical{ background:var(--mpa-cream); border:1px solid var(--mpa-line); padding:20px; }
.mpa .mpa-ical h4{
  font-family:var(--mpa-serif); font-weight:500; font-size:20px; margin:0 0 8px;
  color:var(--mpa-ink);
}
.mpa .mpa-ical p{ font-size:13.5px; line-height:1.7; color:var(--mpa-ink2); font-weight:300; margin:0; }

/* ------------------------------------------------------ bandeau démo --- */

.mpa .mpa-demo{
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  background:var(--mpa-cream-2, #F3E9DE); border-left:2px solid var(--mpa-brown);
  padding:14px 18px; margin:0 0 32px;
  font-size:13.5px; line-height:1.7; color:#6E4626; font-weight:300;
}
.mpa .mpa-demo strong{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--mpa-brown);
}