/*
 * Le F2 — styles propres à la page Agenda (cartes événements du shortcode
 * [f2_agenda]). Chargé sur toutes les pages comme les autres page-*.css,
 * sans effet ailleurs puisque ses sélecteurs ne ciblent que des classes
 * .f2-agenda-* qui n'existent que sur cette page.
 */

.f2-agenda-list{margin-top:2.5rem;display:grid;gap:1.75rem;}

.f2-agenda-card{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:1.5rem;
  align-items:start;
  background:var(--f2-surface);
  color:var(--f2-text);
  border:1px solid var(--f2-surface-border);
  border-radius:var(--f2-radius);
  padding:1.75rem;
  transition:box-shadow .25s ease, transform .25s ease;
}
.f2-agenda-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.08);transform:translateY(-2px);}

/* Pastille date : jour en grand, mois en dessous, comme un vrai billet
   d'événement — le "+" après le mois signale un événement sur plusieurs
   jours (ex. "JUIL+") sans avoir à répéter toute la plage dans la pastille. */
.f2-agenda-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--f2-green-deep);color:var(--f2-cream);
  border-radius:calc(var(--f2-radius) - 4px);
  width:4.5rem;height:4.5rem;flex-shrink:0;
}
.f2-agenda-jour{font-family:'Cormorant Garamond',serif;font-size:1.9rem;line-height:1;font-weight:600;}
.f2-agenda-mois{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--f2-gold);margin-top:.2rem;}

.f2-agenda-image{
  width:5.5rem;height:5.5rem;object-fit:cover;border-radius:calc(var(--f2-radius) - 4px);flex-shrink:0;
}

.f2-agenda-body{min-width:0;}
.f2-agenda-quand{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--f2-gold-dark);font-weight:600;}
.f2-agenda-nom{font-family:'Cormorant Garamond',serif;font-size:1.5rem;margin-top:.3rem;}
.f2-agenda-texte{margin-top:.5rem;font-size:.92rem;opacity:.8;line-height:1.6;}
.f2-agenda-body .f2-link-row{margin-top:.8rem;}

/* Pastille "retournable" (mobile uniquement, voir media query plus bas) :
   la face avant montre la date, la face arrière montre la photo — l'espace
   manque pour les deux côte à côte sur un petit écran, donc on empile en
   profondeur plutôt qu'en largeur. Le bouton reste accessible (focusable,
   libellé), la photo n'est jamais vraiment cachée du DOM. */
.f2-agenda-date-flip{
  all:unset;cursor:pointer;
  width:4.5rem;height:4.5rem;flex-shrink:0;
  perspective:400px;
}
.f2-agenda-date-flip:focus-visible{outline:2px solid var(--f2-gold);outline-offset:2px;}
.f2-agenda-date-face{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:calc(var(--f2-radius) - 4px);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .7s cubic-bezier(.4,.1,.2,1);
  transform-style:preserve-3d;
}
.f2-agenda-date-front{background:var(--f2-green-deep);color:var(--f2-cream);transform:rotateY(0deg);}
.f2-agenda-date-front .f2-agenda-mois{color:var(--f2-gold);}
.f2-agenda-date-back{transform:rotateY(180deg);overflow:hidden;}
.f2-agenda-date-back img{width:100%;height:100%;object-fit:cover;}
.f2-agenda-date-flip.is-flipped .f2-agenda-date-front{transform:rotateY(-180deg);}
.f2-agenda-date-flip.is-flipped .f2-agenda-date-back{transform:rotateY(0deg);}
@media (prefers-reduced-motion:reduce){
  .f2-agenda-date-face{transition:none;}
}

/* Souris/trackpad (desktop) : survol = retournement direct, en CSS pur —
   pas besoin de JS ni de tap. Restreint à "hover:hover" (un vrai pointeur
   fin) pour ne jamais se déclencher au doigt sur tactile, où :hover reste
   collé après un tap et gênerait le clic explicite. */
@media (hover:hover) and (pointer:fine){
  .f2-agenda-date-flip:hover .f2-agenda-date-front{transform:rotateY(-180deg);}
  .f2-agenda-date-flip:hover .f2-agenda-date-back{transform:rotateY(0deg);}
}

@media (max-width:640px){
  .f2-agenda-card{grid-template-columns:auto 1fr;}
  .f2-agenda-image{display:none;} /* remplacée par la pastille retournable ci-dessus */
}
@media (min-width:641px){
  /* Sur desktop, la photo a déjà sa place normale à côté de la pastille :
     pas besoin du retournement, le bouton se comporte comme le simple
     bloc date d'origine (pas de photo cachée en double). */
  .f2-agenda-date-flip{pointer-events:none;}
  .f2-agenda-date-back{display:none;}
}