/*
 * Menu custom kbane — style inspiré de villemorte.fr
 * Coller dans : Admin Gancio > Thème > Custom CSS
 *
 * Pour modifier les couleurs : changer les valeurs dans la section "Variables"
 * Pour modifier les liens : éditer menu-kbane.js
 * Pour ajuster la police : modifier font-size dans la section "Liens du menu"
 */

/* ─── Police Bebas Neue (auto-hébergée, OFL) ─────────────────────────────── */
@font-face {
  font-family: 'BebasNeue';
  src: url('/fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block; /* block = attend la police avant affichage, évite le FOUT sur le titre 4rem */
}

/* ─── Fond de page — blanc/épuré sur toute l'interface ───────────────────── */
/* Modifier #ffffff pour changer la couleur de fond                           */
body,
.v-application,
.v-application--wrap,
.v-application .v-main,
.v-main__wrap,
.theme--light.v-application,
nav,
#home,
.v-footer {
/* .v-application .v-sheet retiré : il blanche les snackbars, alerts et dialogs Vuetify */
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* ─── Police Bebas Neue sur titres et menus uniquement ───────────────────── */
/* Ajouter/retirer des sélecteurs ici pour affiner le périmètre               */
h1, h2, h3, h4, h5, h6,
#title,
a[href="/"],
.v-toolbar__title,
.v-tab,
.v-btn,
.v-list-item__title,
.v-card__title,
.v-chip__content,
.v-app-bar__title,
.event .title,
.event h3 {
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
}

/* ─── Masquer la nav native Gancio et le titre original ─────────────────── */
/* Ajouter ici d'autres sélecteurs si d'autres éléments natifs s'affichent  */
#navbar {
  display: none !important;
}

nav h1 {
  display: none !important;
}

/* Supprimer les bordures et ombres des éléments Vuetify natifs de Gancio   */
/* Ce trait noir sous le menu vient généralement de l'un de ces éléments    */
.v-app-bar,
.v-toolbar,
.v-toolbar__content,
.v-app-bar__content,
header.v-app-bar,
nav.v-app-bar {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* .v-divider global supprimé — il cassait les séparateurs admin/modales.   */
/* La règle scopée #events article .v-divider (plus bas) suffit.             */

/* Masquer tout border résiduel sur la nav HTML native                       */
nav {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ─── Bannière titre au-dessus du menu ───────────────────────────────────── */
/* Modifier padding/border pour ajuster la taille de la case                 */
/* position: relative permet au #vm-hamburger (enfant absolu) de se          */
/* positionner par rapport au titre et non par rapport au viewport           */
#vm-title-box {
  display: block !important;
  position: relative !important;
  text-align: center !important;
  padding: 24px 40px 16px !important;
  background: #ffffff !important;
}

#vm-title-text {
  display: block !important;
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 4rem !important;
  color: #000000 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

#vm-title-text:hover {
  color: #333333 !important;
  text-decoration: none !important;
}

#vm-title-subtitle {
  font-size: 0.85rem !important;
  color: #666666 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  margin-top: 6px !important;
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
}

/* ─── Pas de compensation nécessaire (menu en flux normal) ──────────────── */
/* overflow-x: hidden empêche la barre de scroll horizontale causée par     */
/* width: 110% + rotation du #vm-nav qui déborde légèrement le viewport     */
html {
  overflow-x: hidden !important;
}

body {
  padding-top: 0 !important;
  overflow-x: hidden !important;
}

/* ─── Conteneur principal du menu ────────────────────────────────────────── */
/* width: 110% + left: -5% créent le dépassement latéral de l'effet villemorte */
/* display: flex → la liste menu et les boutons cohabitent sans se chevaucher */
/* (ancien hack position:absolute + padding-right débordait dès que les       */
/* boutons grossissaient au zoom utilisateur ≥ 130% ou écran cramped)         */
#vm-nav {
  position: relative !important;
  top: 0 !important;
  left: -5% !important;
  width: 110% !important;
  margin-top: 40px !important;
  z-index: 9999 !important;
  background-color: #000000 !important;
  transform: rotate(-1.5deg) !important;
  transform-origin: center center !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
}

/* ─── Liste des items du menu ─────────────────────────────────────────────── */
/* flex: 1 → prend tout l'espace restant APRÈS les boutons #vm-nav-actions    */
/* justify-content: center → items centrés dans cet espace disponible         */
/* Plus de padding-right artificiel : les boutons occupent leur propre place  */
#vm-nav ul.vm-menu-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 70px !important;
}

#vm-nav ul.vm-menu-list > li {
  position: relative !important;
  display: block !important;
  height: 100% !important;
  float: none !important;
}

/* ─── Liens du menu ───────────────────────────────────────────────────────── */
/* Modifier font-size pour changer la taille (valeur actuelle : 2rem)         */
#vm-nav ul.vm-menu-list > li > a,
#vm-nav ul.vm-menu-list > li > span.vm-dropdown-trigger {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 22px !important;
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 2rem !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  background-color: transparent !important;
  transition: background-color 0.5s ease-in-out !important;
  border: none !important;
  line-height: 1 !important;
}

#vm-nav ul.vm-menu-list > li > a:hover,
#vm-nav ul.vm-menu-list > li > a:focus,
#vm-nav ul.vm-menu-list > li > span.vm-dropdown-trigger:hover,
#vm-nav ul.vm-menu-list > li.vm-has-dropdown:hover > span.vm-dropdown-trigger {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  outline: none !important;
}

/* ─── Indicateur dropdown "Lieux" ────────────────────────────────────────── */
#vm-nav span.vm-dropdown-trigger::after {
  content: ' ▾' !important;
  font-size: 1rem !important;
}

/* ─── Sous-menu Lieux (dropdown) ──────────────────────────────────────────── */
/* Le transform annule la rotation du parent pour que le dropdown soit droit  */
#vm-nav ul.vm-dropdown {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px !important;
  background-color: #111111 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10000 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  transform: rotate(1.5deg) !important;
  transform-origin: top left !important;
}

#vm-nav li.vm-has-dropdown:hover ul.vm-dropdown,
#vm-nav li.vm-has-dropdown:focus-within ul.vm-dropdown {
  display: block !important;
}

#vm-nav ul.vm-dropdown li {
  display: block !important;
}

#vm-nav ul.vm-dropdown li a {
  display: block !important;
  padding: 10px 18px !important;
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 1.3rem !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-decoration: none !important;
  letter-spacing: 0.03em !important;
  background-color: transparent !important;
  transition: background-color 0.3s ease !important;
}

#vm-nav ul.vm-dropdown li a:hover,
#vm-nav ul.vm-dropdown li a:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  outline: none !important;
}

/* ─── Boutons Ajouter / Partager dans la barre de menu ──────────────────── */
/* Flex item à droite (plus de position:absolute) — les boutons réservent     */
/* leur propre largeur dans le flux flex et ne peuvent plus chevaucher le     */
/* menu, quel que soit le niveau de zoom utilisateur                          */
/* Modifier margin-right pour ajuster l'écart avec le bord (7% compense -5%) */
#vm-nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  margin-right: 7% !important;
  z-index: 1 !important;
}

/* Style commun aux deux boutons — légèrement plus petits que les liens menu */
/* Modifier font-size pour ajuster la taille (actuellement 1.3rem vs 2rem)  */
.vm-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 16px !important;
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: normal !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  line-height: 1 !important;
}

/* Bouton plein blanc — "Ajouter un événement" */
/* Fond blanc, texte noir → contour blanc au survol                          */
.vm-menu-btn--solid {
  background-color: #ffffff !important;
  color: #000000 !important;
  /* transparent évite que le bouton "saute" de 2px au hover quand la        */
  /* bordure passe de invisible (blanc/blanc) à visible (blanc sur noir)     */
  border: 2px solid transparent !important;
}

.vm-menu-btn--solid:hover,
.vm-menu-btn--solid:focus {
  background-color: transparent !important;
  color: #ffffff !important;
  outline: none !important;
}

/* Bouton contour — "Partager" */
/* Transparent, bordure blanche → fond blanc au survol                       */
.vm-menu-btn--outline {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

.vm-menu-btn--outline:hover,
.vm-menu-btn--outline:focus {
  background-color: #ffffff !important;
  color: #000000 !important;
  outline: none !important;
}

/* ─── Bouton "Mon compte" — bouton natif Gancio relocalisé ──────────────── */
/* Le bouton .mr-0 natif Gancio est déplacé en JS dans #vm-nav-actions.     */
/* On le re-style ici : carré outline 40×40 avec icône utilisateur SVG.     */
/* Le SVG kebab natif est caché via visibility, l'icône user est dessinée   */
/* en background-image (data-URI inline → zéro requête tierce).             */
/* Pour changer l'icône : modifier les 2 data-URI ci-dessous (état normal   */
/* avec fill blanc, état hover avec fill noir).                              */
#vm-nav-actions .vm-account-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 60% 60% !important;
}

#vm-nav-actions .vm-account-btn:hover,
#vm-nav-actions .vm-account-btn:focus {
  background-color: #ffffff !important;
  outline: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'><path d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>") !important;
}

/* Cache le contenu Vuetify natif (SVG kebab) tout en gardant le bouton     */
/* cliquable : visibility:hidden réserve l'espace mais n'intercepte rien    */
#vm-nav-actions .vm-account-btn .v-btn__content {
  visibility: hidden !important;
}


/* Classe utilitaire pour masquer le fallback quand le kebab natif est là.  */
/* !important nécessaire pour battre `display: inline-flex !important` de   */
/* la règle .vm-account-btn ci-dessus.                                       */
#vm-nav-actions .vm-account-btn.vm-hidden {
  display: none !important;
}

/* Masquer le reste de la nav native Gancio (a propos, language, etc.).    */
/* Le bouton "compte" est déjà relocalisé dans notre top-menu ; le reste   */
/* fait double-emploi visuel. Pour la ré-afficher : commenter cette règle. */
nav > div.d-flex.pa-4 {
  display: none !important;
}

/* ─── Bouton hamburger (mobile uniquement, visible sous 900px) ────────────── */
/* Positionné en absolu dans #vm-title-box (position: relative)              */
/* top: 50% + translateY(-50%) centre le bouton verticalement dans le titre  */
#vm-hamburger {
  display: none !important;
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  transform: translateY(-50%) !important;
  z-index: 10010 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  padding: 8px 14px !important;
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 1.2rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

#vm-hamburger:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ─── Mode mobile (≤ 1100px) — bascule hamburger ─────────────────────────── */
/* Breakpoint relevé à 1100px : le menu desktop devenait cramped avant que    */
/* la grille passe en 2 colonnes (qui elle reste à 900px). Si on remonte      */
/* encore, vérifier qu'on perd pas trop d'écrans laptop standards.            */
@media only screen and (max-width: 1100px) {
  body {
    margin-top: 0 !important;
  }

  /* Bug 5 — titre réduit, ne déborde plus sur petits écrans                 */
  /* Modifier 2.2rem pour ajuster la taille sur mobile                       */
  #vm-title-text {
    font-size: 2.2rem !important;
  }
  /* padding-right: 80px réserve la place pour le bouton hamburger absolu    */
  /* qui est maintenant enfant de #vm-title-box                              */
  /* Modifier 80px si le bouton hamburger change de taille                   */
  #vm-title-box {
    padding: 16px 80px 12px 20px !important;
  }

  #vm-hamburger {
    display: block !important;
  }

  #vm-nav {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: rotate(0deg) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease-in-out !important;
    margin-top: 0 !important; /* Bug 6 — annule le margin-top: 40px desktop */
    /* Annule flex-direction: row desktop → menu et boutons empilés verticalement */
    /* dans le hamburger (ul au-dessus, #vm-nav-actions en bas)                  */
    flex-direction: column !important;
  }

  #vm-nav.vm-open {
    max-height: 100vh !important;
    overflow-y: auto !important;
  }

  #vm-nav ul.vm-menu-list {
    flex-direction: column !important;
    height: auto !important;
    padding: 50px 0 20px !important;
  }

  #vm-nav ul.vm-menu-list > li {
    width: 100% !important;
    height: auto !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  #vm-nav ul.vm-menu-list > li > a,
  #vm-nav ul.vm-menu-list > li > span.vm-dropdown-trigger {
    width: 100% !important;
    height: auto !important;
    padding: 14px 20px !important;
    font-size: 1.6rem !important;
    justify-content: center !important;
    /* Supprime le delai de 300ms et le surlignage natif au tap mobile        */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(255,255,255,0.15) !important;
    user-select: none !important;
  }

  /* Dropdowns : fermes par defaut + on neutralise hover/focus-within         */
  /* La regle hover a la specificite (1,3,2) donc on doit l'egaler ou battre */
  #vm-nav ul.vm-dropdown,
  #vm-nav li.vm-has-dropdown:hover > ul.vm-dropdown,
  #vm-nav li.vm-has-dropdown:focus-within > ul.vm-dropdown {
    display: none !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Specificite (1,3,2) pour battre les regles hover/focus ci-dessus        */
  /* Seule la classe JS .vm-dropdown-open ouvre le dropdown en mobile        */
  #vm-nav li.vm-has-dropdown.vm-dropdown-open > ul.vm-dropdown {
    display: block !important;
  }

  /* Petite rotation de la fleche quand le dropdown est ouvert (feedback)    */
  #vm-nav li.vm-dropdown-open > span.vm-dropdown-trigger::after {
    display: inline-block !important;
    transform: rotate(180deg) !important;
  }

  #vm-nav ul.vm-dropdown li a {
    text-align: center !important;
    padding: 10px 20px !important;
  }

  /* Boutons Ajouter / S'abonner : affiches dans le menu burger en mobile     */
  /* Modifier display a none pour les masquer en mobile                        */
  #vm-nav-actions {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 20px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .vm-menu-btn {
    justify-content: center !important;
    font-size: 1.3rem !important;
    padding: 10px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bouton compte en mobile : étiré comme les autres pour rester cliquable */
  /* Modifier height: 44px pour ajuster la hauteur du bouton dans le burger */
  #vm-nav-actions .vm-account-btn {
    width: 100% !important;
    height: 44px !important;
    min-width: 0 !important;
    background-size: 28px 28px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/*  GRILLE ÉVÉNEMENTS — style Ville Morte                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*
 * Transforme la liste native Gancio en grille 3 colonnes de cartes.
 *
 * Pour modifier le nombre de colonnes : chercher "repeat(3, 1fr)"
 * Pour modifier la hauteur des images : chercher "height: 180px"
 * Pour modifier l'espacement entre cartes : chercher "gap: 24px"
 * Pour désactiver sur la page principale et ne garder que les pages custom :
 *   remplacer "#events" par "#vm-agenda-grid #events"
 *
 * PRIX : Gancio 1.28.2 officiel n'a pas de champ price.
 *   Workaround : créer des tags prix dans Gancio (ex: "gratuit", "prix-libre",
 *   "5€", "10€-à-19€"). Le CSS les met en avant avec une couleur distincte.
 *   Un tag qui commence par un chiffre ou contient "€" = tag prix.
 *   (Le ciblage fin nécessite le JS — voir menu-kbane.js section PRIX)
 */

/* ─── Conteneur principal des événements → grille ────────────────────────── */
/*
 * Structure DOM confirmée par DevTools :
 *   #events  >  div.v-lazy  >  article  >  ...
 *
 * IMPORTANT — :has(article) limite l'application aux vues liste/grille.
 * Sans ça, le mode calendrier (qui utilise le même #events sans articles)
 * est cassé par le display: grid forcé.
 *
 * Si :has() n'est pas supporté par le navigateur cible (très vieux IE),
 * remplacer #events:has(article) par #events et accepter que le calendrier
 * soit désactivé.
 */
#events:has(article) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding: 28px 20px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  /* Annule le flex et l'alignement Vuetify */
  flex-wrap: unset !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* div.v-lazy doit aussi être en grid-item correct (pas de largeur forcée)   */
#events .v-lazy {
  min-width: 0 !important;
  width: 100% !important;
}

/* ─── Carte individuelle (article) ───────────────────────────────────────── */
/* max-width: none annule la limite imposée par Gancio sur chaque carte       */
/* Pour ajuster l'arrondi : modifier border-radius (12px = moyen, doux)      */
/* overflow: hidden assure que l'image suit l'arrondi des coins              */
#events article {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;            /* coins arrondis, look adouci  */
  box-shadow: none !important;               /* pas d'ombre                  */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-width: none !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, transform 0.15s ease !important;
}

/* Effet au survol : carte qui se décale légèrement + bordure plus marquée  */
/* Pour désactiver l'effet : commenter les deux lignes ci-dessous            */
#events article:hover {
  border-color: #999999 !important;
  transform: translateY(-2px) !important;
}

/* ─── Image en haut de la carte ──────────────────────────────────────────── */
/* Modifier height pour changer la hauteur de la photo (actuelle : 180px)    */
#events article .img,
#events article .img.thumb {
  width: 100% !important;
  height: 180px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

#events article .img img,
#events article .img.thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

#events article:hover .img img,
#events article:hover .img.thumb img {
  transform: scale(1.04) !important;
}

/* ─── Titre de la carte ───────────────────────────────────────────────────── */
/* Modifier font-size pour changer la taille du titre (actuelle : 1.5rem)    */
#events article .title,
#events article h3,
#events article .v-card__title {
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: normal !important;
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  line-height: 1.2 !important;
  padding: 14px 14px 6px !important;
  margin: 0 !important;
}

/* ─── Métadonnées (date, lieu) ────────────────────────────────────────────── */
/* Gancio fournit déjà ses propres icônes natives (calendrier, pin rouge).   */
/* On ne fait que styler la typo et l'espacement — pas d'icônes ajoutées ici */
#events article .date,
#events article time,
#events article .v-card__subtitle {
  font-size: 0.85rem !important;
  color: #444444 !important;
  padding: 2px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 5px !important;
  line-height: 1.4 !important;
}

#events article .place {
  font-size: 0.85rem !important;
  color: #444444 !important;
  padding: 2px 14px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 5px !important;
  line-height: 1.4 !important;
}

/* ─── Zone organisateur — injectée par le JS (div.vm-orga) ──────────────── */
/* Structure : span.vm-orga-label (gras) + span.vm-orga-value (normal)      */
/* Pour changer le label : modifier textContent dans menu-kbane.js section 6 */
#events article .vm-orga {
  padding: 2px 14px 2px 38px !important; /* 38px aligne avec le texte date/lieu */
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  line-height: 1.4 !important;
  font-size: 0.85rem !important;
  color: #444444 !important;
}

/* "Organisé par :" — poids normal, même gris que date/lieu */
#events article .vm-orga-label {
  font-weight: normal !important;
  color: #444444 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Nom de l'organisateur — reprend le style chip natif Vuetify (v-chip--outlined) */
/* Les classes Vuetify gèrent l'apparence ; on ne surcharge plus visuellement    */
/* Pour changer le style : modifier les classes injectées dans menu-kbane.js      */

/* ─── Zone prix — injectée par le JS (div.vm-prix) ───────────────────────── */
/* Structure : span.vm-prix-icon ($) + span.vm-prix-value (badge coloré)     */
/* Pour changer la couleur du badge : modifier background-color dans vm-prix-value */
/* Pour changer l'icône : modifier textContent dans menu-kbane.js section 5  */
#events article .vm-prix {
  padding: 2px 14px 2px 38px !important; /* 38px aligne avec le texte date/lieu */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.4 !important;
}

/* Icône prix — SVG pièce de monnaie 16×16 (mdi-currency-usd, même path que villemorte.fr) */
/* Le $ texte injecté par le JS est masqué via font-size: 0 ; l'icône est portée par ::before */
/* Pour changer la couleur : modifier le fill= dans la data URI (actuellement %23555555)      */
/* Pour changer la taille : modifier width/height ici ET dans le ::before ci-dessous          */
#events article .vm-prix-icon {
  font-size: 0 !important;           /* masque le texte $ injecté par le JS  */
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* SVG inline en data URI — pas de requête réseau, couleur pilotée par fill= */
#events article .vm-prix-icon::before {
  content: '' !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23555555' d='M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  flex-shrink: 0 !important;
}

/* Valeur du prix — même gris que date/lieu, sans fond                      */
#events article .vm-prix-value {
  font-size: 0.85rem !important;
  font-weight: normal !important;
  color: #444444 !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

/* ─── Zone tags (chips Vuetify) ───────────────────────────────────────────── */
/* margin-top: auto pousse les tags en bas de la carte                       */
#events article .tags,
#events article .v-card__actions {
  margin-top: auto !important;
  padding: 10px 14px 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Style chips/tags — fond gris clair, carrés                                */
/* Pour changer la couleur des tags : modifier background-color              */
#events article .v-chip,
#events article .tag,
#events article a[href*="/tag/"] {
  font-size: 0.75rem !important;
  height: auto !important;
  padding: 3px 10px !important;
  border-radius: 2px !important;
  background-color: #f0f0f0 !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

/* ─── Masquer les éléments Vuetify superflus ─────────────────────────────── */
#events article .v-divider {
  display: none !important;
}

/* ─── Responsive grille ──────────────────────────────────────────────────── */
/*                                                                            */
/* IMPORTANT — on utilise #events:has(article) (même sélecteur que la règle  */
/* de base) pour avoir une spécificité égale. Sans ça, la règle de base      */
/* (spécificité plus haute) l'emporte toujours, même avec !important,        */
/* et la grille reste à 3 colonnes sur tous les écrans.                      */
/*                                                                            */
/* > 900px  → 3 colonnes (desktop)                                           */
/* 769–900px → 2 colonnes (tablette)                                         */
/* ≤ 768px  → 1 colonne  (mobile)                                            */

/* ── Tablette : 2 colonnes ≤ 900px ────────────────────────────────────────  */
@media (max-width: 900px) {
  #events:has(article) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Adapter les éléments internes pour 2 colonnes (~270px de large)         */
  /* Modifier height: 140px pour ajuster la hauteur de l'image en tablette   */
  #events article .img,
  #events article .img.thumb {
    height: 140px !important;
  }

  #events article .title,
  #events article h3,
  #events article .v-card__title {
    font-size: 1.2rem !important;
    padding: 10px 12px 4px !important;
  }

  #events article .date,
  #events article time,
  #events article .v-card__subtitle,
  #events article .place {
    font-size: 0.78rem !important;
    padding: 2px 10px !important;
  }

  #events article .vm-orga,
  #events article .vm-prix {
    font-size: 0.78rem !important;
    padding-left: 28px !important;
    padding-right: 10px !important;
  }
}

/* ── Mobile : 1 colonne ≤ 768px ────────────────────────────────────────── */
/* Modifier 768px pour ajuster le seuil téléphone/tablette                   */
@media (max-width: 768px) {
  #events:has(article) {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }

  /* Restaurer des dimensions confortables pour la pleine largeur             */
  #events article .img,
  #events article .img.thumb {
    height: 180px !important;
  }

  #events article .title,
  #events article h3,
  #events article .v-card__title {
    font-size: 1.3rem !important;
    padding: 12px 14px 6px !important;
  }

  #events article .date,
  #events article time,
  #events article .v-card__subtitle,
  #events article .place {
    font-size: 0.85rem !important;
    padding: 2px 14px !important;
  }

  #events article .vm-orga,
  #events article .vm-prix {
    font-size: 0.85rem !important;
    padding-left: 38px !important;
    padding-right: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════ */
/*  PAGES CUSTOM (/p/slug) — mise en forme du contenu texte                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*
 * Cible : .container > .v-card > .v-card__text
 * Ce sélecteur atteint les pages custom sans toucher les cartes événements
 * (qui sont dans #events article, pas dans .v-card).
 *
 * Gancio rend partiellement le Markdown : **gras**, `code`, [liens] → OK
 * Mais pas : # titres, | tableaux |, ``` blocs ```, > citations, ---
 * Stratégie : un <p> dont le seul enfant est un <strong> = titre de section.
 *
 * Pour modifier la largeur de la colonne de texte : changer max-width
 * Pour modifier la taille des titres de section  : changer font-size dans
 *   .v-card__text p > strong:only-child
 */

/* ─── Conteneur général ──────────────────────────────────────────────────── */
.container > .v-card > .v-card__text {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 40px 32px !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #222222 !important;
}

/* ─── Paragraphes ────────────────────────────────────────────────────────── */
.container > .v-card > .v-card__text p {
  margin-bottom: 1em !important;
  margin-top: 0 !important;
}

/* ─── Titre de section : <p> dont l'unique contenu est du <strong> ──────── */
/* Astuce CSS : si le seul enfant d'un <p> est un <strong>, c'est un titre   */
/* Dans le guide, écrire une ligne avec uniquement **Texte en gras**         */
.container > .v-card > .v-card__text p > strong:only-child {
  display: block !important;
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #000000 !important;
  border-bottom: 2px solid #000000 !important;
  padding-bottom: 6px !important;
  margin-top: 2em !important;
}

/* Titre principal (premier de la page) — plus grand, sans marge haute       */
.container > .v-card > .v-card__text p:first-child > strong:only-child {
  font-size: 1.8rem !important;
  margin-top: 0 !important;
}

/* ─── Gras inline (au milieu d'un texte) ────────────────────────────────── */
.container > .v-card > .v-card__text strong {
  color: #000000 !important;
  font-weight: bold !important;
}

/* ─── Code inline ────────────────────────────────────────────────────────── */
/* Pour changer la couleur de fond : modifier background-color               */
.container > .v-card > .v-card__text code {
  background-color: #f4f4f4 !important;
  border: 1px solid #dddddd !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
  font-size: 0.88em !important;
  font-family: 'Courier New', Courier, monospace !important;
  color: #333333 !important;
  word-break: break-all !important;
}

/* ─── Liens ──────────────────────────────────────────────────────────────── */
.container > .v-card > .v-card__text a {
  color: #000000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.container > .v-card > .v-card__text a:hover {
  color: #555555 !important;
}

/* ─── Responsive mobile ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .container > .v-card > .v-card__text {
    padding: 24px 18px !important;
    font-size: 0.95rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  EMBEDS LECTEURS MUSIQUE — façades click-to-load et iframes chargés       */
/* ═══════════════════════════════════════════════════════════════════════════ */
/*
 * Stylise les façades injectées par le module embeds dans menu-kbane.js.
 *
 * Trois plateformes ciblées via [data-platform="..."] :
 *   - youtube    → vignette 16:9 fond sombre, accent rouge
 *   - soundcloud → bandeau 166px, accent orange (cohérent avec l'iframe SC)
 *   - bandcamp   → bloc compact, accent cyan (BC ouvre nouvel onglet)
 *
 * Pour ajouter une plateforme : copier un bloc [data-platform="X"] et
 * ajuster background/accent. Si responsive 16:9 nécessaire, ajouter
 * aspect-ratio: 16/9 comme pour YouTube.
 *
 * Pour modifier les couleurs accent : changer les codes hex ci-dessous.
 * Pour désactiver complètement le module : passer EMBED_ACTIF à false
 * dans menu-kbane.js (le CSS devient sans effet, aucun risque visuel).
 */

/* ─── Façade : conteneur commun à toutes les plateformes ────────────────── */
/* Position relative pour permettre l'absolu des enfants (logo, meta, btn)  */
.vm-embed-facade {
  display: block !important;
  position: relative !important;
  margin: 16px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #1a1a1a !important;
  color: #ffffff !important;
  cursor: default !important;
  user-select: none !important;
  font-family: inherit !important;
  /* Anti-Vuetify : on neutralise les styles texte hérités du conteneur     */
  text-decoration: none !important;
  line-height: 1.3 !important;
  /* Bug 10 — dans les cartes (#events article overflow: hidden),            */
  /* width: 100% assure que la façade ne dépasse pas les bords de la carte  */
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── Logo plateforme — coin haut-gauche ────────────────────────────────── */
/* Pour agrandir le logo : modifier width/height ci-dessous (et le @media)  */
.vm-embed-facade .vm-embed-logo {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: 36px !important;
  height: 36px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.vm-embed-facade .vm-embed-logo svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ─── Métadonnées (label + URL) — coin bas-gauche ───────────────────────── */
.vm-embed-facade .vm-embed-meta {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  right: 50% !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  pointer-events: none !important;
}
.vm-embed-facade .vm-embed-label {
  font-family: 'BebasNeue', 'Impact', 'Arial Black', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.1rem !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
}
.vm-embed-facade .vm-embed-url {
  font-size: 0.78rem !important;
  opacity: 0.65 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

/* ─── Bouton play — centré sur la vignette ─────────────────────────────── */
/* Pour ajuster la taille du bouton : modifier padding ci-dessous           */
.vm-embed-facade .vm-embed-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 24px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  text-decoration: none !important;
}
.vm-embed-facade .vm-embed-play:hover {
  transform: translate(-50%, -50%) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55) !important;
}
.vm-embed-facade .vm-embed-play:active {
  transform: translate(-50%, -50%) scale(0.98) !important;
}
.vm-embed-facade .vm-embed-play:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 3px !important;
}
.vm-embed-facade .vm-embed-play-icon {
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
}
.vm-embed-facade .vm-embed-play-icon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.vm-embed-facade .vm-embed-play-text {
  white-space: nowrap !important;
}

/* ─── Mention transparence privacy — coin bas-droite ───────────────────── */
/* Affichée seulement pour YT/SC (embed inline). Pour la masquer :          */
/* passer display: none ci-dessous.                                          */
.vm-embed-facade .vm-embed-notice {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  font-size: 0.68rem !important;
  font-style: italic !important;
  opacity: 0.55 !important;
  color: #ffffff !important;
  text-align: right !important;
  max-width: 45% !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
}

/* ─── Variantes spécifiques par plateforme ─────────────────────────────── */
/* Pour modifier la couleur d'accent : changer les codes hex ci-dessous     */

/* YouTube : façade compacte (140px), fond noir, bouton rouge YT.
   Format aligné sur Bandcamp/SoundCloud depuis qu'on ouvre YouTube
   en nouvel onglet (au lieu d'embarquer une iframe). Pour repasser
   en vignette vidéo 16:9 si l'embed redevient possible un jour,
   remplacer min-height par "aspect-ratio: 16 / 9 !important;". */
.vm-embed-facade[data-platform="youtube"] {
  background: #1a1a1a linear-gradient(135deg, rgba(255, 0, 0, 0.18), transparent 65%) !important;
  min-height: 140px !important;
}
.vm-embed-facade[data-platform="youtube"] .vm-embed-play {
  background: #ff0000 !important;
  color: #ffffff !important;
}

/* SoundCloud : hauteur ~166px (= iframe SC), fond sombre, bouton orange */
.vm-embed-facade[data-platform="soundcloud"] {
  background: #1a1a1a linear-gradient(135deg, rgba(255, 85, 0, 0.18), transparent 65%) !important;
  min-height: 166px !important;
}
.vm-embed-facade[data-platform="soundcloud"] .vm-embed-play {
  background: #ff5500 !important;
  color: #ffffff !important;
}

/* Bandcamp : bloc compact, accent cyan BC */
.vm-embed-facade[data-platform="bandcamp"] {
  background: #1a1a1a linear-gradient(135deg, rgba(98, 154, 169, 0.22), transparent 65%) !important;
  min-height: 140px !important;
}
.vm-embed-facade[data-platform="bandcamp"] .vm-embed-play {
  background: #629aa9 !important;
  color: #ffffff !important;
}

/* ─── Iframe / contenu chargé après clic ───────────────────────────────── */
/* Wrapper qui remplace la façade. Préserve le ratio par plateforme.        */
.vm-embed-loaded {
  display: block !important;
  margin: 16px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #000000 !important;
}
/* Note : pas de règle .vm-embed-loaded[data-platform="youtube"] car
   YouTube ouvre désormais dans un nouvel onglet (cf. JS).
   Pour réactiver l'iframe inline, restaurer les règles supprimées :
     .vm-embed-loaded[data-platform="youtube"] { aspect-ratio: 16 / 9 !important; }
     .vm-embed-loaded[data-platform="youtube"] iframe { width:100%; height:100%; border:0; display:block; } */
.vm-embed-loaded[data-platform="soundcloud"] iframe {
  width: 100% !important;
  height: 166px !important;
  border: 0 !important;
  display: block !important;
}

/* ─── Responsive mobile — réduit taille bouton et logo ──────────────────── */
@media (max-width: 600px) {
  /* Bug 11 — zone meta (label + URL) trop étroite sur iPhone SE (136px)    */
  /* On élargit la zone en réduisant la marge droite de 50% à 40%           */
  .vm-embed-facade .vm-embed-meta {
    right: 40% !important;
  }

  .vm-embed-facade .vm-embed-logo {
    width: 28px !important;
    height: 28px !important;
    top: 10px !important;
    left: 10px !important;
  }
  .vm-embed-facade .vm-embed-play {
    padding: 10px 18px !important;
    font-size: 0.85rem !important;
    gap: 8px !important;
  }
  .vm-embed-facade .vm-embed-play-icon {
    width: 16px !important;
    height: 16px !important;
  }
  .vm-embed-facade .vm-embed-label {
    font-size: 0.95rem !important;
  }
  .vm-embed-facade .vm-embed-url {
    font-size: 0.7rem !important;
  }
  .vm-embed-facade .vm-embed-notice {
    font-size: 0.62rem !important;
    max-width: 40% !important;
  }
  .vm-embed-facade[data-platform="youtube"] {
    /* Aligné sur Bandcamp en mobile (120px) — façade compacte qui
       annonce clairement qu'on va sortir du site au clic.
       Pour grossir : remonter à 140px ou plus. */
    min-height: 120px !important;
  }
  .vm-embed-facade[data-platform="soundcloud"] {
    min-height: 140px !important;
  }
  .vm-embed-facade[data-platform="bandcamp"] {
    min-height: 120px !important;
  }
}