/* Styles responsifs pour event.html */

/* Tablettes */
@media (max-width: 992px) {
  main {
    padding: 1.5rem;
  }
  
  .event-container {
    margin: 0 auto 2rem;
    gap: 1.5rem;
  }
  
  .event-title {
    font-size: 1.6rem;
  }
  
  .event-venue {
    font-size: 1.1rem;
  }
  
  .event-description {
    font-size: 0.95rem;
  }
  
  /* Section cette semaine */
  .this-week-section {
    padding: 1.5rem;
  }
  
  .ideas-section {
    padding: 1.5rem;
  }
  
  .smaller-card h3 {
    font-size: 0.7rem;
  }
  
  .smaller-card p {
    font-size: 0.75rem;
  }
}

/* Mobiles larges */
@media (max-width: 768px) {
  /* Menu de partage */
  .share-menu {
    width: 220px;
    right: -15px; /* Déplacer légèrement vers la gauche sur mobile */
  }
  
  .share-menu:before {
    right: 28px;
  }
  
  .share-item {
    padding: 10px 5px; /* Boutons plus grands pour toucher facilement */
  }
  
  .share-item i {
    font-size: 20px; /* Icônes plus grandes */
  }
  
  .share-item span {
    font-size: 11px; /* Texte plus grand sur mobile */
  }

  /* Contenu principal */
  main {
    padding: 1rem;
  }
  
  .event-container {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .event-image-container, 
  .event-content {
    width: 100%;
    min-width: 100%;
  }
  
  .event-image {
    height: 250px;
    object-fit: cover;
  }
  
  .event-navigation {
    padding: 0 1rem;
    margin-bottom: 0.8rem;
  }
  
  .back-to-map {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
  
  .event-container {
    margin-top: 0;
  }
  
  .event-title {
    font-size: 1.5rem;
  }
  
  .event-venue {
    font-size: 1rem;
  }
  
  .event-description {
    font-size: 0.9rem;
  }
  
  .event-date {
    font-size: 0.9rem;
  }
  
  .event-cta {
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
  }
  
  .btn-event-website {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  
  .btn-add-calendar {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    padding: 0.6rem 0.8rem;
  }
  
  .btn-add-calendar i {
    font-size: 0.85rem;
  }
  
  /* Section cette semaine */
  .this-week-section {
    padding: 1rem;
    margin: 1rem auto;
  }
  
  .this-week-section h2 {
    text-align: center;
    font-size: 1.3rem;
  }
  
  /* Section idées */
  .ideas-section {
    padding: 1rem;
    margin: 1rem auto;
  }
  
  .ideas-section h2 {
    font-size: 1.3rem;
    text-align: center;
  }
  
  .ideas-intro {
    text-align: center;
    font-size: 0.9rem;
  }
  
  .ideas-cards {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .smaller-card, 
  .bigger-card {
    width: 100%;
  }
  
  .smaller-card img, 
  .bigger-card img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
  }
  
  .smaller-card h3 {
    font-size: 0.8rem;
    text-align: center;
  }
  
  .smaller-card p {
    font-size: 0.75rem;
    text-align: center;
  }
  
  .ideas-cta {
    margin-top: 1.5rem;
    margin-right: 0;
    text-align: center;
  }
  
  /* Header */
  .header {
    padding: 1rem;
    margin-bottom: 2.5rem; /* Espace pour la barre de recherche */
  }
  
  /* Barre de recherche mobile */
  .search-wrapper {
    left: 0;
    right: 0;
    justify-content: center;
  }
}

/* Petits écrans mobiles */
@media (max-width: 576px) {
  /* Header */
  .header {
    padding: 1rem;
  }
  
  /* Header ajusté pour petits écrans */
  .header {
    margin-bottom: 2.5rem;
  }
  
  /* Main ajusté */
  main {
    padding: 1rem;
    margin-top: 0;
  }
  
  /* Bouton retour plus compact */
  .event-navigation {
    padding: 0 1rem;
    margin-bottom: 0.5rem;
  }
  
  .back-to-map {
    font-size: 0.8rem;
    padding: 0.5rem 0.9rem;
    display: inline-flex;
  }
  
  .event-container {
    margin-top: 0;
  }
  
  .back-arrow {
    font-size: 0.9rem;
    margin-right: 0.5rem;
  }
  
  /* Menu de partage sur petits écrans */
  .share-menu {
    width: 200px;
    padding: 8px;
    right: -8px;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .share-item {
    padding: 8px 5px;
    font-size: 13px;
    margin-bottom: 2px;
  }
  
  .share-item i {
    font-size: 16px;
  }
  
  .share-item span {
    font-size: 9px;
  }
  
  /* Augmenter la zone cliquable */
  .event-favorite-btn,
  .event-share-btn {
    width: 38px;
    height: 38px;
    margin-left: 8px;
  }
  
  /* Conteneur d'événement */
  .event-container {
    gap: 1rem;
  }
  
  .event-image {
    height: 200px;
  }
  
  .event-title {
    font-size: 1.3rem;
  }
  
  .event-venue {
    font-size: 0.9rem;
  }
  
  .event-description {
    font-size: 0.85rem;
  }
  
  .event-date {
    font-size: 0.85rem;
    margin: 0.8rem 0;
  }
  
  .btn-event-website {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
  
  .btn-add-calendar {
    padding: 0.55rem 1rem;
    font-size: 0.8rem;
  }
  
  /* Cette semaine - harmonisation avec main-responsive.css */
  .this-week-section h2 {
    font-size: 1.2rem;
    padding-left: 10px;
  }
  
  .this-week-cards {
    gap: 0.3rem;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-overflow-scrolling: touch;
  }
  
  .this-week-card {
    width: 165px;         /* harmonisation avec main-responsive.css */
    margin-right: 0.1rem;
  }
  
  /* Événements populaires - harmonisation avec main-responsive.css */
  .events-popular #popular-events-container {
    padding: 0 10px;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
  }
  
  .events-popular .vogue-item {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 10px;
  }
  
  .events-popular .vogue-item img {
    height: 180px;
    object-fit: cover;
    width: 100%;
  }
  
  .events-popular .vogue-item .event-info {
    padding: 10px;
  }
  
  .events-popular .vogue-item .event-location {
    font-weight: bold;
    margin-bottom: 4px;
    color: #ffffff;
  }
  
  .events-popular .vogue-item .event-date {
    font-size: 0.8rem;
    color: #777;
  }
  
  .events-popular h2,
  .events-popular p {
    padding-left: 10px;
  }
  
  /* Section idées */
  .ideas-section h2 {
    font-size: 1.2rem;
  }
  
  .ideas-intro {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }
  
  .btn-discover {
    padding: 0.6rem 1.2rem;
    font-size: 0.85rem;
  }
}

/* Très petits écrans */
@media (max-width: 360px) {
  /* Bouton retour minimal */
  .event-navigation {
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .back-to-map {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    width: auto;
  }
  
  .event-container {
    margin-top: 0;
  }
  
  .back-arrow {
    font-size: 0.8rem;
  }
  
  .event-title {
    font-size: 1.2rem;
  }
  
  /* Ajustements pour très petits écrans */
  
  .event-image {
    height: 180px;
  }
  
  .event-content {
    gap: 0.8rem;
  }
  
  /* Boutons adaptés aux petits écrans */
  .event-favorite-btn,
  .event-share-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    margin-left: 6px;
  }
  
  /* Menu de partage optimisé pour petits écrans */
  .share-menu {
    width: 180px;
    padding: 5px;
    right: -5px;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .share-item {
    padding: 7px 4px;
    font-size: 11px;
  }
  
  .share-item i {
    font-size: 14px;
    margin-bottom: 3px;
  }
  
  .share-item span {
    font-size: 8px;
    font-weight: 600;
  }
  
  .this-week-card {
    width: 165px;         /* harmonisation avec main-responsive.css */
    margin-right: 0.1rem;
  }
  
  .card-header h3 {
    font-size: 0.8rem;
  }
  
  .card-subtitle, 
  .card-date {
    font-size: 0.7rem;
  }
}