/* #Primary
================================================== */

.navbar {
    max-width: 1440px; /* meme largeur que les filtres et la grille des cartes */
    margin: auto;

  }

body{
	min-height: 100vh;
	max-width: 1440px; /* laisse tenir 5 cartes de 16rem sur grand ecran */
	margin: 0 auto;
	align-items: center;
  }

  /* Applique un fond global au container fixed-template */
.fixed-template {
  position: relative;
  overflow-x: visible; /* Permet de ne pas couper le contenu horizontalement */
  /* background-color: var(--gris-fond-neutre); /* Fond général pour éviter les fuites de contenu */
  padding-bottom: 20px;  /* Espacement sous restrict-copy */
  z-index: 999; /* Assure que le container ne couvre pas les éléments sticky */
}


/* Barre des filtres (pays, puis bandeau des categories), collee en haut au
   defilement. Meme largeur maximale et memes marges laterales que la grille
   des cartes : pays, premier onglet et premiere carte partagent le meme bord
   gauche. Sur mobile, le pays passe au-dessus du bandeau. */
.event-filters {
  position: sticky;
  top: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1440px;
  margin: 20px auto 0;
  padding: 10px 16px;
  background-color: #ffffff;
}

#filter-country {
  flex: 0 0 auto;
}

#restrict-copy {
  flex: 1 1 auto;
  min-width: 0; /* le bandeau peut retrecir et defiler au lieu de deborder */
}

@media screen and (max-width: 576px) {
  .event-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
}

/* Autre éléments internes doivent avoir un z-index moindre pour éviter de recouvrir sticky */
.card-container {
  position: relative;
  
  z-index: 1; /* Assure que cela est derrière filter-country et restrict-copy */
}


.filtercountry {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ba9966;
    font-weight: bold;
}


.filtercountry p {
    display: flex;
    align-items: center;
    margin: 0;
}

.filtercountry label {
    margin-right: 5px; /* Espacement entre le label et l'input */
}

.filtercountry input[type="text"],
.filtercountry select {
    flex-grow: 1; /* Pour que les champs prennent l'espace disponible */
}

.filtercountry select {
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid #d9c8ad;
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--gris-texte-fort);
    font-weight: normal;
    cursor: pointer;
}

.filtercountry select:focus {
    outline: none;
    border-color: #ba9966;
    box-shadow: 0 0 0 3px rgba(186, 153, 102, 0.25);
}








.tabs-box {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap; /* ou wrap si tu veux qu’ils aillent à la ligne */
  align-items: center;
}

.tabs-box li {
  margin-right: 10px; /* espace entre les onglets */
}







/* Ajoutez cette classe pour élargir le dropdown */
.wide-dropdown select {
	width: auto; /* Permet au dropdown de s'élargir automatiquement */
}


.form-group {
    display: flex;
    align-items: center;
}

.form-group p {
    margin: 0;
    margin-right: 20px; /* Ajustez cet espace selon vos besoins */
    display: flex;
    align-items: center;
}

.restrict-copy {
  user-select: none;
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
}


    .card-title {
        color: #ba9966;
		font-size: 17px;
		font-weight: 600;
    }
	.card-eventtype {
		font-size: 16px;;

	}

    .card-city {
        color: #833C0C;
        font-size: 13px;

    }

    hr {
    margin: 24px auto;
    width: 80px;
    border-top: 2px solid #ba9966;
	
    }



.wrapper {
	padding: 4px 0; /* aucun retrait : le premier onglet s'aligne sur le pays et les cartes */
	position: relative;
	overflow-x: hidden;
	overflow-y: hidden; /* meme raison que .tabs-box */
	max-width: auto;
	background: #ffffff;
}

.wrapper .icon{
	position: absolute;
	top: 0;
	height: 100%;
	width: 50px;
	display: flex;
	align-items: center;
	display: flex;
	align-items: center;
}

.icon:first-child{
	left: 0;
	display: none;
	background: linear-gradient(90deg, #fff 5%, transparent);
}
.icon:last-child{
	right:0;
	justify-content: flex-end;
	background: linear-gradient(-90deg, #fff 5%, transparent);
}

.icon i {
	/* Rond et chevron SVG centre (auparavant police Font Awesome) */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	cursor: pointer;
	font-size: 0.6rem;
	border-radius: 50%;
	background: #ba9966;
	color:#fafafa;
}
.icon i:hover {
	background: var(--gris-marque);
	color:#fafafa;
}

.icon:first-child i {
	margin-left: 5px;
}
.icon:last-child i {
	margin-right: 5px;
}
.wrapper .tabs-box {
	display: flex;
	gap: 5px;
	list-style: none;
	/* Defilement horizontal possible au doigt et au pave tactile, barre
	   masquee : les fleches et le glissement suffisent a l'indiquer */
	overflow-x: auto;
	scrollbar-width: none;
	/* Sans cela, overflow-x passe overflow-y a auto : les onglets
	   depassant de 3 px en hauteur, une barre de defilement verticale (fleches
	   haut et bas) apparaissait a la place de la fleche de droite sur petit
	   ecran, dans les navigateurs a barres classiques (Windows). */
	overflow-y: hidden;
	scroll-behavior: smooth;
}


.wrapper .tabs-box::-webkit-scrollbar {
	display: none; /* Chrome, Edge, Brave, Safari */
}

.tabs-box .tab{
	cursor: pointer;
	font-size: 16px;
	white-space: nowrap;
	padding: 5px 5px;
	text-decoration: none;
	color: var(--gris-secondaire);
	margin-bottom: 5px;
}
.tabs-box .tab:hover {
	color: #ba9966;
	font-weight: bold;
}


.tab.active {
	color: #ba9966;
	font-weight: bold;
	
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 80px;
    z-index: 99;
    font-size: 25px;
    border: none;
    outline: none;
    background-color: #ba9966;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%; /* Appliquer une forme ronde */
    width: 50px; /* Ajustez la largeur pour rendre le bouton circulaire */
    height: 50px; /* Ajustez la hauteur pour rendre le bouton circulaire */
}
  
  #myBtn:hover {
	background-color: var(--gris-secondaire);
  }
  
  footer {
    font-size: 13px;
}

@media screen and (max-width: 390px) {
	select {
		font-size: 12px; /* Ajuste la taille de police si nécessaire */
		padding: 5px; /* Ajuste le padding pour une meilleure apparence */
	}
  .container{
	max-width: 90%;
	margin-left: auto; /* Centrer la carte horizontalement */
    margin-right: auto; /* Centrer la carte horizontalement */
  }
}


/* #Grille des annonces
================================================== */

/* Autant de colonnes que la largeur le permet, cartes de 16rem minimum :
   1 sur mobile, 4 sur un portable de 1366 px, 5 sur grand ecran. */
.card-container {
  max-width: 1440px;
  margin: 16px auto 0;
  padding: 0 16px 20px;
}

.event-grid {
  display: grid;
  /* min(16rem, 100%) : sur un ecran plus etroit que 16rem, la colonne prend
     toute la largeur au lieu de deborder */
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 24px;
}

.event-card {
  min-width: 0; /* une carte peut retrecir sous la largeur de son contenu */
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Cadre d'image de format fixe. L'image de l'hote y est entiere, a ses
   proportions d'origine (contain) : ni deformee ni rognee. Le fond reprend
   la meme image, floutee et assombrie, pour ne pas laisser de bandes vides. */
.event-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #2b2b2b;
}

.event-card__media::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: var(--event-image);
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(0.6);
}

.event-card__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Photo et titre cliquables : ils menent a la fiche, comme le bouton */
.event-card__media-link {
  display: block;
  cursor: pointer;
}

.event-card__media-link:hover .event-card__img {
  transform: scale(1.04);
}

.event-card__title-link {
  color: inherit;
  text-decoration: none;
}

.event-card__title-link:hover,
.event-card__title-link:focus {
  color: #9c7d4d;
  text-decoration: underline;
}

.event-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gris-fond);
  color: var(--gris-secondaire);
  font-size: 14px;
}

.event-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
  /* Zone grise du survol : quart d'ellipse (bord courbe convexe) dans un coin de la
     partie texte (--veil-corner : 100% 100% en bas a droite, 0% 100% en bas a gauche),
     qui s'agrandit depuis ce coin */
  --veil-corner: 100% 100%;
  background-image: radial-gradient(farthest-side at var(--veil-corner), #ececec 98%, transparent 100%);
  background-repeat: no-repeat;
  background-position: var(--veil-corner);
  background-size: 0 0;
  transition: background-size 0.3s ease;
}

/* Survol de la case : gris sur une partie du texte (la photo, elle, est zoomee) */
.event-card:hover .card-body {
  background-size: 75% 75%;
}

/* Page qui tourne : la partie texte (recto) pivote autour de son bord gauche et
   decouvre « Ce que comprend l'accueil » (verso, dessous). Classe is-turned posee
   par static/js/pages/eventlist.js. */
.event-card__pages {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  perspective: 1400px;
}

.event-card .event-card__front {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  transform-origin: left center;
  backface-visibility: hidden;
  transition: background-size 0.3s ease, transform 0.6s ease, box-shadow 0.6s ease;
}

.event-card__front[data-turn] {
  cursor: pointer;
}

.event-card__front[data-turn] a {
  cursor: pointer;
}

.event-card.is-turned .event-card__front {
  transform: rotateY(-180deg);
  box-shadow: 8px 0 18px rgba(0, 0, 0, 0.15);
}

.event-card__back {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-y: auto;
  padding: 16px 16px 18px;
  background-color: var(--gris-fond);
  font-size: 0.95em;
  line-height: 1.5;
  cursor: pointer;
}

.event-card__back-title {
  margin-bottom: 8px;
  color: #9c7d4d;
  font-weight: bold;
}

.event-card__back-text {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .event-card .event-card__front {
    transition: none;
  }
}

.event-card .card-title {
  margin-bottom: 4px;
}

.event-card .card-city {
  margin-bottom: 0;
}

.event-card hr {
  margin: 12px 0;
  width: 60px;
}

.event-card__info {
  font-size: 14px;
  color: var(--gris-texte-fort);
}

.event-card__dates-label {
  margin: 4px 0 6px;
  font-size: 14px;
}

/* Dates en pastilles, sur une ou deux lignes */
.event-card__dates {
  display: flex;
  flex-direction: row; /* navbar.css met toutes les listes (ul) en colonne */
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.event-card__dates li {
  padding: 3px 9px;
  border: 1px solid #e6d8c1;
  border-radius: 12px;
  background-color: var(--gris-fond);
  color: #7a5c2e;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Bouton pleine largeur, toujours aligne en bas de la carte */
.event-card__btn {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background-color: #ba9966;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.2s ease;
}

/* Survol de la photo : le bouton grossit en meme temps qu'elle */
.event-card:has(.event-card__media-link:hover) .event-card__btn {
  transform: scale(1.04);
}

.event-card__btn:hover,
.event-card__btn:focus {
  background-color: #9c7d4d;
  color: #ffffff;
}
/* Aucune annonce pour ces filtres */
.event-grid__empty {
  grid-column: 1 / -1;
  padding: 48px 16px;
  text-align: center;
  color: var(--gris-marque);
}

/* Pagination : « Voir plus » (ajoute la page suivante) et page precedente */
.event-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 32px 0 48px;
}

.event-pager__more {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 8px;
  background: #ba9966;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s;
}

.event-pager__more:hover,
.event-pager__more:focus-visible {
  background: var(--gris-texte-fort);
  color: #fff;
}

.event-pager__more[aria-busy="true"] {
  opacity: .6;
  pointer-events: none;
}

.event-pager__prev {
  color: var(--gris-marque);
  font-weight: 600;
}

/* Titre principal de la liste (suit les filtres) : discret, aligne sur les filtres */
.event-list__title {
  max-width: 1440px;
  margin: 24px auto 0;
  padding: 0 16px;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gris-texte-fort);
}

/* Pages « evenement (+ pays, + ville) » : introduction sous le titre */
.event-list__intro {
  max-width: 1440px;
  margin: 8px auto 0;
  padding: 0 16px;
  color: var(--gris-marque);
  line-height: 1.6;
}

.event-list__intro:empty {
  display: none;
}

/* « Ou admirer ... » : liens vers les autres villes du meme evenement */
.event-places {
  max-width: 1440px;
  margin: 0 auto 48px;
  padding: 24px 16px 0;
  border-top: 1px solid var(--gris-bordure);
}

.event-places__title {
  margin-bottom: 12px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gris-texte-fort);
}

.event-places ul {
  display: flex;
  flex-direction: row;      /* navbar.css met toutes les listes en colonne */
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-places a {
  color: #ba9966;
  font-weight: 600;
}

.event-places span {
  color: var(--gris-secondaire);
}

/* En-tete des pages « evenement » : photo de presentation reduite a gauche, titre,
   texte et autres villes a droite (grand ecran) ; empiles sur mobile */
.event-landing {
  max-width: 1440px;
  margin: 24px auto 0;
  padding: 0 16px;
}

.event-landing .event-list__title,
.event-landing .event-list__intro {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

.event-landing .event-list__title {
  margin-top: 0;
}

.event-landing__photo {
  margin: 0 0 16px;
}

.event-landing__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 12px;
}

/* « Ou admirer » : sous le texte, discret */
.event-landing .event-places {
  max-width: none;
  margin: 16px 0 0;
  padding: 12px 0 0;
}

.event-landing .event-places__title {
  margin-bottom: 8px;
  font-size: 1rem;
}

@media (min-width: 992px) {
  .event-landing--photo {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .event-landing__photo {
    margin: 0;
  }

  .event-landing__photo img {
    max-height: none;
  }
}

/* Pages « evenement » : faits chiffres sous le texte, questions frequentes en bas */
.event-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	flex-direction: row;
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	font-size: 0.9rem;
	color: var(--gris-marque);
}
.event-faq {
	max-width: 760px;
	margin: 40px auto 24px;
	padding: 0 16px;
}
.event-faq__title {
	font-size: 1.3rem;
	margin-bottom: 12px;
}
.event-faq__question {
	font-size: 1rem;
	font-weight: 700;
	margin: 16px 0 4px;
}
.event-faq__answer {
	margin: 0;
	line-height: 1.55;
}
.event-faq__more {
	margin-top: 14px;
}
.event-faq__more a {
	color: #ba9966;
	font-weight: 600;
}

/* Mention « Structure verifiee » sur la carte (event/compliance.py) */
.structure-badge--card {
    display: inline-block;
    margin: 4px 0 0;
    padding: 1px 10px;
    border: 1px solid #b7d7b0;
    border-radius: 999px;
    background: #eef7ec;
    color: #2f6b28;
    font-size: 0.8em;
}

/* Parametres de classement des annonces, sous la liste */
.event-ranking {
    margin: 18px auto 0;
    max-width: 900px;
    color: #6a6a6a;
    font-size: 13px;
    text-align: center;
}