/* Enfold impose ses propres règles avec une spécificité assez forte —
   !important quasi systématique ici pour être sûre de gagner à chaque
   fois, notamment sur les couleurs, marges et espacements. */

.nono-agenda-frame{
  --nono-agd-navy:#16345c;
  --nono-agd-navy-deep:#0d2038;
  --nono-agd-gold:#e8d68a;
  --nono-agd-gold-soft:#f3e6b8;
  --nono-agd-red:#c0392b;
  background:rgba(255,255,255,.2) !important;
  border-radius:16px !important;
  padding:20px !important;
  width:650px !important;
  max-width:650px !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
  /* Haut (navigation) et bas (téléchargement) toujours visibles, seule la
     zone du milieu (plan du jour / calendrier) défile si son contenu
     dépasse la hauteur disponible. */
  display:flex !important;
  flex-direction:column !important;
  max-height:min(860px, 85vh) !important;
}
.nono-agenda-frame *{ box-sizing:border-box !important; }
/* Plus de règle générale "toutes les svg à 100%" — chaque icône a
   désormais sa propre taille explicite ci-dessous. C'est justement cette
   règle générale, sans taille propre pour l'icône du bouton téléchargement,
   qui la faisait s'étirer sans limite (le gros visuel cassé signalé). */

/* Page autonome sur mobile : toute la largeur de l'ÉCRAN, pas seulement de
   la colonne de contenu du thème (souvent plus étroite avec ses propres
   marges) — technique qui fait sortir l'élément de cette colonne pour
   rejoindre les vrais bords de l'écran. */
@media (max-width:620px){
  .nono-agenda-frame{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:16px !important;
  }
}
/* Dans la lightbox sur mobile : même chose que sur la page autonome
   désormais — pleine largeur (demandé au départ, revu depuis qu'elle a vu
   le rendu du tiroir en usage réel). Cette règle explicite (même valeurs
   que la règle générale) garde volontairement une spécificité plus élevée
   que celle-ci, au cas où un réglage propre à ce contexte redevienne utile
   plus tard. */
@media (max-width:620px){
  .nono-lb-backdrop .nono-agenda-frame{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
  }
}

/* Sur mobile (page autonome ET lightbox) : la fiche se comporte comme un
   tiroir qui glisse depuis le bas de l'écran, collé au bord inférieur,
   plutôt qu'une carte centrée dans la page — même principe que la fiche
   du plan interactif. Plus expérimental que le reste, à bien tester. */
@media (max-width:620px){
  .nono-agenda-frame{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    margin-bottom:0 !important;
    border-radius:16px 16px 0 0 !important;
    animation:nono-agd-slide-up .35s ease;
    z-index:1;
  }
}
@keyframes nono-agd-slide-up{
  from{ transform:translateY(100%); }
  to{ transform:translateY(0); }
}

/* Petit onglet pour fermer la lightbox d'un geste vers le bas — QUE dans
   la lightbox sur mobile (rien à "fermer" sur la page autonome). Posé À
   L'INTÉRIEUR du cadre (pas à côté) pour suivre le même mouvement que lui
   pendant le glissement. */
.nono-agenda-drag-tab{ display:none; }
@media (max-width:620px){
  .nono-lb-backdrop .nono-agenda-drag-tab{
    display:flex !important; align-items:center !important; justify-content:center !important;
    position:absolute !important; left:50% !important; top:-22px !important; transform:translateX(-50%) !important;
    width:110px !important; height:22px !important; background:rgba(255,255,255,.2) !important;
    border:none !important;
    border-radius:10px 10px 0 0 !important; cursor:grab; touch-action:none;
  }
  .nono-agenda-drag-tab-bar{ width:32px !important; height:4px !important; border-radius:999px !important; background:rgba(255,255,255,.4) !important; }
}

.nono-agenda-topbar{ display:flex !important; align-items:center !important; justify-content:space-between !important; margin:0 0 40px !important; flex-shrink:0; }
.nono-agenda-nav-btn{
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:8px !important;
  width:32px !important; height:32px !important; padding:7px !important; margin:0 !important;
  color:var(--nono-agd-gold-soft) !important; cursor:pointer; flex-shrink:0; transition:background-color .15s ease, transform .15s ease;
}
.nono-agenda-nav-btn svg{ width:16px !important; height:16px !important; }
.nono-agenda-nav-btn:hover{ background:rgba(255,255,255,.18) !important; transform:scale(1.06); }
.nono-agenda-nav-btn.nono-agd-disabled{ opacity:.3 !important; pointer-events:none; transform:none; }
.nono-agenda-cal-toggle{
  background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:8px !important;
  padding:6px 14px !important; margin:0 !important; color:var(--nono-agd-gold-soft) !important; font-size:13px !important;
  display:flex !important; align-items:center !important; gap:6px; cursor:pointer; transition:background-color .15s ease;
}
.nono-agenda-cal-toggle:hover{ background:rgba(255,255,255,.18) !important; }
.nono-agenda-cal-toggle svg{ width:15px !important; height:15px !important; }

/* Zone du milieu : seule partie qui défile. */
/* Zone du milieu : seule partie qui défile. Barre de défilement fine et
   discrète, surtout visible sur desktop. */
.nono-agenda-scroll-zone{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:15px; margin-right:-15px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.35) transparent; }
.nono-agenda-scroll-zone::-webkit-scrollbar{ width:6px !important; }
.nono-agenda-scroll-zone::-webkit-scrollbar-track{ background:transparent !important; }
.nono-agenda-scroll-zone::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35) !important; border-radius:999px !important; }
.nono-agenda-scroll-zone::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.55) !important; }
.nono-agenda-slide-outer{ overflow:visible; }

.nono-agenda-cal{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:12px !important; padding:10px !important; margin:0 auto 14px !important; display:none; overflow:hidden; max-width:480px !important; }
/* Flèches de mois collées au nom du mois (20px de chaque côté, référence
   "novembre") plutôt qu'aux extrémités — gap fixe + centrage, au lieu
   d'écarter au maximum comme avant. */
.nono-agenda-cal-head{ display:flex !important; align-items:center !important; justify-content:center !important; gap:20px !important; margin:0 0 8px !important; }
.nono-agenda-cal-title{ color:var(--nono-agd-gold-soft) !important; font-family:'Berkshire Swash',cursive !important; font-size:16px !important; margin:0 !important; text-align:center !important; }

/* Le tableau du mini-calendrier hérite sinon du zébrage par défaut
   qu'Enfold applique à toutes les tables du site (lignes/colonnes
   colorées en alternance) — neutralisé explicitement ici. */
.nono-agenda-cal-table{ width:100% !important; border-collapse:collapse !important; table-layout:fixed !important; margin:0 !important; background:transparent !important; transition:transform .26s ease, opacity .26s ease; }
.nono-agenda-cal-table tr{ background:transparent !important; }
.nono-agenda-cal-table th,
.nono-agenda-cal-table td{ background:transparent !important; border:none !important; text-align:center !important; padding:2px 0 !important; margin:0 !important; }
.nono-agenda-cal-table th{ width:14.28% !important; font-size:10px !important; color:rgba(255,255,255,.5) !important; font-weight:400 !important; padding-bottom:4px !important; }
.nono-agd-day{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50% !important; font-size:11px !important; color:rgba(255,255,255,.25) !important;
  background:transparent !important; margin:0 !important; padding:0 !important; transition:background-color .15s ease, transform .15s ease;
}
.nono-agd-day.has-event{ color:var(--nono-agd-gold-soft) !important; background:rgba(232,214,138,.22) !important; cursor:pointer !important; }
.nono-agd-day.has-event:hover{ background:rgba(232,214,138,.4) !important; transform:scale(1.08); }
.nono-agd-day.is-current{ color:var(--nono-agd-navy) !important; background:var(--nono-agd-gold) !important; }
.nono-agd-day.is-current:hover{ background:var(--nono-agd-gold) !important; transform:none; }
.nono-agd-day-star{
  position:absolute !important; top:-4px !important; right:-4px !important; width:10px !important; height:10px !important;
  color:var(--nono-agd-gold); background:var(--nono-agd-navy); border-radius:50%;
}

/* Pas de fond derrière la fiche du jour — elle repose directement sur le
   fond étoilé du cadre. */
.nono-agenda-card{ background:none !important; border:none !important; padding:0 !important; margin:0 !important; text-align:center !important; transition:transform .28s ease, opacity .28s ease; }
.nono-agenda-loading{ color:rgba(255,255,255,.5) !important; font-size:13px !important; text-align:center !important; margin:0 !important; }

.nono-agd-head{ display:flex !important; align-items:center !important; gap:14px !important; margin:0 0 14px !important; text-align:left !important; }
.nono-agenda-sticky-date{ flex-shrink:0; margin:0 0 20px !important; justify-content:center !important; }
.nono-agd-bubble{
  width:52px; height:52px; border-radius:50% !important; border:2px solid var(--nono-agd-gold) !important; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:none !important; margin:0 !important; padding:0 !important;
}
.nono-agd-bubble img{ width:100%; height:100%; object-fit:cover; }
.nono-agd-date{ font-family:'Berkshire Swash',cursive !important; font-size:19px !important; color:var(--nono-agd-gold-soft) !important; margin:0 !important; }
.nono-agd-rule{ height:1px; background:linear-gradient(90deg, rgba(243,230,184,.6), transparent) !important; margin:6px 0 0 !important; }

.nono-agd-star-badge{
  display:inline-flex !important; align-items:center !important; gap:4px; background:rgba(232,214,138,.18) !important; color:var(--nono-agd-gold) !important;
  font-size:12px !important; padding:4px 10px !important; border-radius:999px !important; margin:0 0 8px !important;
}
.nono-agd-star-badge svg{ width:13px !important; height:13px !important; }
.nono-agd-image{
  border-radius:10px !important; overflow:hidden; margin:0 0 14px !important; aspect-ratio:16/10; background:var(--nono-agd-navy-deep) !important;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3) !important; font-size:12px !important; padding:0 !important;
}
.nono-agd-image img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease, transform .9s ease;
}
.nono-agd-image img.nono-agd-img-loaded{ opacity:1; }
.nono-agd-image:hover img.nono-agd-img-loaded{ transform:scale(1.08); }
.nono-agd-image.nono-agd-img-zoomed img.nono-agd-img-loaded{ transform:scale(1.08); }
.nono-agd-title{ font-family:'Berkshire Swash',cursive !important; font-size:1.1em !important; color:var(--nono-agd-gold-soft) !important; margin:0 0 8px !important; text-align:center !important; }
/* Description : police par défaut du site (jamais forcée ici), texte
   centré comme le reste de la fiche. */
.nono-agd-desc{ font-size:18px !important; line-height:24px !important; color:rgba(255,255,255,.85) !important; margin:0 0 12px !important; white-space:pre-line; text-align:center !important; }
.nono-agd-horaires{ display:flex !important; justify-content:center !important; gap:8px; flex-wrap:wrap; margin:0 !important; }
.nono-agd-horaire{ background:rgba(255,255,255,.1) !important; color:var(--nono-agd-gold-soft) !important; font-size:1.2em !important; font-family:'Berkshire Swash',cursive !important; padding:6px 14px !important; border-radius:8px !important; margin:0 !important; }
.nono-agd-sep{ height:1px; background:rgba(255,255,255,.12) !important; margin:14px 0 !important; }

.nono-agenda-footer{ text-align:center !important; margin:34px 0 0 !important; flex-shrink:0; }

/* Bouton de téléchargement : effet flip/flap uniquement tant qu'aucun PDF
   n'est renseigné (révèle "Bientôt disponible") — au survol sur desktop,
   au clic sur mobile (:hover n'existe pas vraiment au toucher). Quand un
   PDF est bien renseigné, c'est un simple lien, pas de flip. */
.nono-agenda-download-link{
  background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:999px !important;
  color:rgba(255,255,255,.85) !important; font-size:12px !important; padding:8px 18px !important;
  display:inline-flex !important; align-items:center !important; gap:6px; cursor:pointer; text-decoration:none !important;
  transition:background-color .15s ease;
}
.nono-agenda-download-link:hover{ background:rgba(255,255,255,.2) !important; }
.nono-agenda-download-link svg{ width:14px !important; height:14px !important; flex-shrink:0; }

/* Bouton de téléchargement (tant qu'aucun PDF n'est renseigné) : l'effet
   flip en 3D s'est révélé trop fragile (deux tentatives, jamais fiable) —
   remplacé par un simple fondu croisé entre les deux textes, beaucoup plus
   robuste, avec le même fond moderne que ci-dessus pour rester visible.
   Survol sur desktop, clic sur mobile (pas de vrai survol au doigt). */
/* Reprend exactement l'architecture éprouvée de l'agenda de l'été : le
   texte de devant reste dans le flux normal (c'est lui qui donne sa
   taille au bouton), le second texte est positionné EN SUPERPOSITION
   (absolute) par-dessus — jamais empilé l'un sous l'autre dans le flux
   normal comme dans mes tentatives précédentes, qui ne se découpaient
   jamais correctement pour cette raison précise. */
.nono-agenda-download-flip{
  position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.1) !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:999px !important;
  padding:8px 18px !important; cursor:pointer; transition:background-color .15s ease;
}
.nono-agenda-download-flip:hover{ background:rgba(255,255,255,.2) !important; }
.nono-agenda-download-face-front{
  display:inline-flex !important; align-items:center !important; gap:6px !important; font-size:12px !important;
  color:rgba(255,255,255,.85) !important; white-space:nowrap;
  transition:transform .25s ease, opacity .25s ease;
}
.nono-agenda-download-face-front svg{ width:14px !important; height:14px !important; flex-shrink:0; }
.nono-agenda-download-face-back{
  position:absolute !important; left:0 !important; right:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; font-size:12px !important;
  color:var(--nono-agd-gold) !important; white-space:nowrap;
  transform:translateY(120%) !important; opacity:0 !important;
  transition:transform .25s ease, opacity .25s ease;
}
.nono-agenda-download-flip:hover .nono-agenda-download-face-front,
.nono-agenda-download-flip.is-flipped .nono-agenda-download-face-front{
  transform:translateY(-120%) !important; opacity:0 !important;
}
.nono-agenda-download-flip:hover .nono-agenda-download-face-back,
.nono-agenda-download-flip.is-flipped .nono-agenda-download-face-back{
  transform:translateY(0) !important; opacity:1 !important;
}