/* ==================================================
   STYLE.CSS - STYLES PRINCIPAUX DU SITE
   Fusion de style.css, compagnie.css, contact.css et calendrier.css
   Dernière mise à jour : 2025
================================================== */

/* ------------------------------------------------
   1. FONTS & IMPORT v1
------------------------------------------------ */
/* Playfair Display - Regular */
@font-face {
  font-family: 'Playfair Display';
  src: url('../polices/') format('woff2'),
       url('../polices/Playfair_Display/playfair-display-v14-latin-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Playfair Display - Bold */
@font-face {
  font-family: 'Playfair Display';
  src: url('../polices/Playfair_Display/PlayfairDisplay-Bold.woff2') format('woff2'),
       url('../polices/Playfair_Display/PlayfairDisplay-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Georgia Bold';
  src: url('../polices/georgia_bolt/Georgia-Bold.woff2') format('woff2'),
       url('../polices/georgia_bolt/Georgia-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*@font-face {
  font-family: 'montserrat';
  src: url('../polices/montserrat/AnyConv.com__Montserrat-Black.woff2') format('woff2'),
       url('../polices/montserrat/AnyConv.com__Montserrat-Black.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}*/
/* AJOUTEZ ICI LA POLICE BRITTANY SIGNATURE */
@font-face {
  font-family: 'Brittany Signature';
  src: url('../polices/BrittanySignatureRegular/BrittanySignatureRegular.woff2') format('woff2'),
       url('../polices/BrittanySignatureRegular/BrittanySignatureRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------
   2. RESET & BASE (Global à toutes les pages)
------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.6;
}

/* ------------------------------------------------
   3. LIENS (Global)
------------------------------------------------ */
a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: red;
}
.btn:hover {
  color: white !important;
}

/* ------------------------------------------------
   4. TITRES (Global)
------------------------------------------------ */
h1, h2, h3 {
  text-transform: uppercase;
  margin-bottom: 20px;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }

/* ------------------------------------------------
   5. COULEURS UTILITAIRES (Global)
------------------------------------------------ */
.red { color: red; }
.yellow { color: #f5c400; }
.violet { color: #9b5cff; }

/* ------------------------------------------------
   6. BOUTONS (Global)
------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 30px;
  background: red;
  color: white;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  background: #c40000;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ------------------------------------------------
   7. MENUS - STYLES COMMUNS (HAUT ET BAS)
------------------------------------------------ */

/* Liens des menus - style unique partagé */
.menu-link {
  text-transform: uppercase;
  font-size: 18px !important;
  color: #fff !important;
  transition: color 0.3s;
  font-family: 'Playfair Display', 'Georgia Bold', Georgia, serif, Arial, sans-serif !important;
  font-weight: normal;
  letter-spacing: normal;
  text-decoration: none;
}

.menu-link:hover {
  color: red !important;
}

.menu-link.active {
  color: red !important;
}

/* Navigation HAUT */
header {
  width: 100%;
  padding: 10px 40px 40px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Partie gauche (contient les drapeaux) */
.nav-left {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  padding-right: 60px;
}

/* Menu centré - structure avec puces supprimées */
.nav-menu {
  display: flex;
  gap: 40px;
  justify-content: center;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-menu li {
  list-style: none !important;
}

/* Partie droite (icônes sociales) */
.nav-right {
  flex: 1;
}

/* Language Switcher (Drapeaux) */
.language-switcher {
  display: flex;
  gap: 10px;
}

.language-switcher img {
  width: 30px;
  height: 20px;
  border-radius: 3px;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.language-switcher img:hover {
  transform: scale(1.1);
  border-color: red;
}

.language-switcher a.active img {
  border-color: white;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Navigation BAS */
.footer-nav {
  margin-bottom: 30px;
  width: 100%;
}

.footer-menu {
  display: flex;
  gap: 40px;
  justify-content: center;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-menu li {
  list-style: none !important;
}

.footer-copyright {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 20px;
  text-align: center;
}

/* ------------------------------------------------
   7.5 SOUS-MENU SPECTACLES
------------------------------------------------ */
.sub-nav {
  background-color: rgba(0, 0, 0, 0.9);
  border-bottom: 2px solid #ff0000;
  border-top: 1px solid #333;
  padding: 10px 0;
  margin-top: 0;
  width: 100%;
}

.sub-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none !important;
  margin: 0;
  padding: 0;
  gap: 40px;
  flex-wrap: wrap;
}

.sub-nav li {
  list-style: none !important;
  margin: 5px 0;
}

.sub-link {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Playfair Display', 'Georgia Bold', Georgia, serif, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
}

.sub-link:hover {
  color: #ff0000;
  border-bottom-color: #ff0000;
}

.sub-link.active-sub {
  color: #ff0000;
  border-bottom-color: #ff0000;
}

/* Responsive pour le sous-menu */
@media (max-width: 768px) {
  .sub-nav ul {
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 15px;
  }
  
  .sub-link {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .sub-nav ul {
    gap: 15px;
    flex-direction: column;
  }
  
  .sub-link {
    font-size: 1.1rem;
  }
}
/* ------------------------------------------------
   7.6 ICÔNES SOCIALES À DROITE (CORRIGÉ ALIGNEMENT)
------------------------------------------------ */
/* Ajustement de la structure existante */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Partie gauche (drapeaux) - taille fixe */
.nav-left {
  flex: 0 0 auto;
  display: flex;
  /* padding-right: 60px;  ← supprimez ou commentez cette ligne */
  padding-right: 0; /* ou mettez une petite valeur si vous voulez un espace minimal */
}

.nav-left .language-switcher {
  margin-left: auto;  /* pousse le contenu à droite */
  margin-right: 10px; /* ajustez cette valeur pour l'espace entre le drapeau et le menu */
}

/* Menu centré - prend tout l'espace disponible */
.nav-menu {
  display: flex;
  gap: 40px;
  justify-content: center;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1;
}

/* Partie droite (icônes) - taille fixe */
.nav-right {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
}

/* Style des icônes sociales */
.nav-right .social-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.nav-right .social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  line-height: 1;
}

/* Couleurs spécifiques pour chaque réseau */
.nav-right .social-icon.helloasso {
  background-color: #ff6b6b;
}

.nav-right .social-icon.facebook {
  background-color: #3b5998;
}

.nav-right .social-icon.instagram {
  background: linear-gradient(45deg, #f09433, #d62976, #962fbf, #4f5bd5);
}

.nav-right .social-icon.youtube {
  background-color: #ff0000;
}

/* Uniformisation de toutes les icônes */
.nav-right .social-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 8px;
  line-height: 1;
}

/* Ajustement spécifique pour l'icône HelloAsso (cœur) */
.nav-right .social-icon.helloasso {
  background-color: blanchedalmond;/*coukleur de fond pour HelloAsso*/
  margin: 0 !important;   /* ← C'EST ICI QU'IL FAUT L'AJOUTER */
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  padding: 0;
  /* le reste des propriétés */
}

.nav-right .social-icon:hover {
  opacity: 0.9;
  transform: scale(1.1);
  color: white !important;
}

/* ========== MODIFICATION RESPONSIVE POUR AFFICHER LES ICÔNES SUR MOBILE ========== */
/* Responsive pour mobile - Tablettes et petits écrans */
@media (max-width: 900px) {
  .navbar {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .nav-left {
    flex: 1 1 100%;
    justify-content: center;
    padding-right: 0;
  }
  
  .nav-menu {
    flex: 1 1 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  /* MODIFICATION 1: Afficher les icônes sur mobile (était display: none) */
  .nav-right {
    flex: 1 1 100%;
    display: flex; /* Changé de 'none' à 'flex' */
    justify-content: center;
    margin-top: 10px; /* Espacement sous le menu */
    order: 3; /* S'assure que les icônes apparaissent après le menu */
  }
  
  /* MODIFICATION 2: Centrer les icônes et ajuster l'espacement */
  .nav-right .social-icons {
    justify-content: center;
    gap: 15px; /* Plus d'espace entre les icônes sur mobile */
  }
  
  /* MODIFICATION 3: Agrandir les icônes pour meilleure accessibilité tactile */
  .nav-right .social-icon {
    width: 30px; /* Plus grand pour faciliter le clic sur mobile */
    height: 30px;
    font-size: 14px;
  }
  
  .nav-right .social-icon i {
    font-size: 14px;
  }
  
  /* Ajustement pour HelloAsso */
  .nav-right .social-icon.helloasso {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
  }
}

/* MODIFICATION 4: Ajustements supplémentaires pour très petits écrans */
@media (max-width: 600px) {
  .nav-right .social-icon {
    width: 25px; /* Légèrement plus petit mais toujours accessible */
    height: 25px;
    font-size: 12px;
  }
  
  .nav-right .social-icon i {
    font-size: 12px;
  }
  
  .nav-right .social-icon.helloasso {
    height: 25px;
    min-height: 25px;
    max-height: 25px;
  }
}

/* MODIFICATION 5: Pour très petits smartphones, garder une taille confortable */
@media (max-width: 400px) {
  .nav-right .social-icon {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
  
  .nav-right .social-icon i {
    font-size: 11px;
  }
}
/* ========== FIN DES MODIFICATIONS RESPONSIVE ========== */

/* ------------------------------------------------
   8. MAIN (Commun à toutes les pages)
------------------------------------------------ */
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* ------------------------------------------------
   9. FOOTER (Commun à toutes les pages)
------------------------------------------------ */
footer {
  padding: 40px 20px;
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
  margin-top: 40px;
}

/* Navigation BAS */
.footer-nav {
  margin-bottom: 30px;
  width: 100%;
}

.footer-menu {
  display: flex;
  gap: 40px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-copyright {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 20px;
  text-align: center;
}

/* ==================================================
   PAGES SPÉCIFIQUES
================================================== */

/* ------------------------------------------------
   10. PAGE ACCUEIL (HOME)
------------------------------------------------ */

/* Bannière */
.home-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-banner img {
  max-width: 450px;
  width: 100%;
}

.home-banner .slogan {
  font-size: 30px;
  letter-spacing: 1px;
  margin-bottom: 0px;
}

/* Slideshow / Diaporama */
.slideshow-wrapper {
  position: relative;
  width: 600px;
  margin: 80px auto 0;
}

.slideshow {
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 20px;
}

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fade 95s infinite;
}

.slideshow:hover img {
  animation-play-state: paused;
}

/* Badge sous le slideshow */
.slideshow-badge {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 5px;
  max-width: 120px;
}

/* Animation du slideshow */
.slides img:nth-child(1)  { animation-delay: 0s; }
.slides img:nth-child(2)  { animation-delay: 5s; }
.slides img:nth-child(3)  { animation-delay: 10s; }
.slides img:nth-child(4)  { animation-delay: 15s; }
.slides img:nth-child(5)  { animation-delay: 20s; }
.slides img:nth-child(6)  { animation-delay: 25s; }
.slides img:nth-child(7)  { animation-delay: 30s; }
.slides img:nth-child(8)  { animation-delay: 35s; }
.slides img:nth-child(9)  { animation-delay: 40s; }
.slides img:nth-child(10) { animation-delay: 45s; }
.slides img:nth-child(11) { animation-delay: 50s; }
.slides img:nth-child(12) { animation-delay: 55s; }
.slides img:nth-child(13) { animation-delay: 60s; }
.slides img:nth-child(14) { animation-delay: 65s; }
.slides img:nth-child(15) { animation-delay: 70s; }
.slides img:nth-child(16) { animation-delay: 75s; }
.slides img:nth-child(17) { animation-delay: 80s; }
.slides img:nth-child(18) { animation-delay: 85s; }
.slides img:nth-child(19) { animation-delay: 90s; }

@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
/* ===== ACCUEIL : titre principal ===== */
.home-title {
    font-size: 24px;
    text-align: center;
    margin-top: 100px;        /* espace au-dessus (sous le diaporama) */
    margin-bottom: 20px;      /* espace en dessous (avant la suite) */
    font-weight: normal;      /* (déjà ajouté) */
    text-transform: none;
}

@media (max-width: 900px) {
    .home-title {
        font-size: 22px;
        margin-top: 70px;
    }
}

@media (max-width: 600px) {
    .home-title {
        font-size: 20px;
        margin-top: 70px;
    }
}
/* ------------------------------------------------
   11. PAGE LA COMPAGNIE
------------------------------------------------ */

/* Section intro (Texte à gauche / Image à droite) */
.intro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  margin: 60px 0;
  padding: 40px 0;
}

.intro-text {
  flex: 1;
}

.intro-text h1 {
  color: red;
  margin-bottom: 30px;
  font-family: 'Playfair Display', serif;
}

.intro-text p {
  font-size: 20px;
  line-height: 1.6;
  text-align: justify;
}

.intro-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.intro-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.2);
}

/* Style pour la liste des pays */
.countries {
  font-size: 14px !important;
  margin-top: 1cm !important;
  color: #fffacd !important;
  line-height: 1.5;
}

.pdf-section {
  margin-top: 30px;
  text-align: right;
}

/* Section histoire (2 affiches à gauche / texte à droite) */
.history {
  display: grid;
  grid-template-columns: 20% 80%;
  gap: 60px;
  margin: 80px 0;
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.posters {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.posters img {
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(255, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.posters a:hover img {
  transform: scale(1.2) !important;
  transition: transform 0.3s;
}

.history-text p {
  font-size: 21px;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
}

.history-text strong {
  color: red;
  font-weight: 500;
}

/* Citation en boîte violette */
.quote-box {
  margin: 50px 0 30px 0;
  padding: 15px;
  background: rgba(155, 92, 255, 0.1);
  border-left: 4px solid #9b5cff;
  border-radius: 0 8px 8px 0;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  max-width: 600px;
}

.quote-text {
  display: block;
  color: white;
  font-size: 23px;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 10px;
  text-align: left;
}

.quote-author {
  display: block;
  color: white;
  font-size: 16px;
  font-style: normal;
  text-align: right;
  line-height: 1.4;
  opacity: 0.8;
}

/* Uniformisation de la taille des images de la galerie festivals */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
}

.gallery img {
  width: 400px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Réduction de l'image HelloAsso */
.helloasso {
  max-width: 200px;
  height: auto;
  display: block;
  margin: 70px auto 0;
}

/* ------------------------------------------------
   12. PAGE CONTACT
------------------------------------------------ */

/* En-tête de la page contact */
.contact-header {
  text-align: center;
  margin: 40px 0 60px 0;
}

.contact-header h1 {
  color: red;
  font-size: 42px;
  text-transform: uppercase;
}

/* Conteneur principal du contenu contact */
.contact-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Informations de contact */
.contact-info {
  text-align: center;
  margin-bottom: 50px;
  font-size: 20px;
  line-height: 1.8;
}

.contact-info strong {
  color: red;
}

.contact-info a {
  color: white;
}

.contact-info a:hover {
  color: red;
}

/* Formulaire de contact */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 600px;
  margin: 0 auto;
}

/* Champs qui prennent toute la largeur */
.contact-form .full-width {
  grid-column: span 2;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: white;
  font-family: 'Playfair Display', 'Georgia Bold', Georgia, serif, Arial, sans-serif;
  font-size: 20px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: red;
}

.contact-form textarea {
  min-height: 200px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
}

.contact-form button {
  background: red;
  color: white;
  border: none;
  padding: 20px 40px;
  border-radius: 40px;
  font-family: 'Playfair Display', 'Georgia Bold', Georgia, serif, Arial, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  width: 300px;
  grid-column: span 2;
  justify-self: center;
  margin-top: 30px;
  letter-spacing: 1px;
  font-weight: bold;
}

.contact-form button:hover {
  background: #c40000;
  transform: scale(1.05);
}

/* Cartes de contact (production, admin, technique) */
.contact-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 40px 0 60px;
}

.contact-card {
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid red;
  padding: 25px 30px;
  border-radius: 0 12px 12px 0;
  min-width: 250px;
  flex: 1;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

.contact-card h3 {
  color: red;
  font-size: 24px;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
}

.contact-card p {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.contact-card a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
  display: inline-block;
}

.contact-card a:hover {
  color: red;
}

.contact-card .phone {
  color: #f5c400;
  font-size: 20px;
  font-weight: bold;
  display: block;
  margin-top: 5px;
}

/* Responsive pour les cartes */
@media (max-width: 768px) {
  .contact-details {
    flex-direction: column;
    align-items: center;
  }
  .contact-card {
    width: 100%;
    max-width: 100%;
  }
}

/* ------------------------------------------------
   13. PAGE CALENDRIER
------------------------------------------------ */

/* Style général de la section tournée */
.tournee {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Titre de la tournée - Centré et jaune */
.tournee-title {
  text-align: center !important;
  color: #f5c400 !important;
  font-size: 32px !important;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

/* Ligne rouge sous le titre */
.tournee-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: red;
}

/* Liste du calendrier */
.calendrier-liste {
  text-align: left;
}

.calendrier-liste li {
  text-align: left;
  font-size: 16px;
  margin-bottom: 3px;
  padding: 3px 5px;
  line-height: 1.3;
}

/* Intro de la page calendrier - Version centrée par défaut */
.calendrier-intro .intro-text {
  text-align: center;
}

.calendrier-intro .intro-text h1 {
  color: red;
  text-align: center;
}

.calendrier-intro .intro-text p {
  font-size: 20px !important;
  text-align: center;
}

/* Légende du calendrier */
.calendrier-legende {
  font-size: 14px !important;
}

/* COULEURS DES SPECTACLES */
.cabaret {
  color: red !important;
  font-weight: bold;
}

.boucan {
  color: #9b5cff !important;
  font-weight: bold;
}

.djset {
  color: #f5c400 !important;
  font-weight: bold;
}

.interieur-cuir {
  color: #9b5cff !important;
  font-weight: bold;
}
.rollmops {
  color: #40e0d0!important;
  font-weight: bold;
}

.annulation {
  color: #ff8c00 !important;
  font-weight: bold;
  text-transform: uppercase;
}

.pays {
  color: #1e90ff !important;
  font-weight: 500;
}

/* Galerie d'images du calendrier - Version horizontale (ancienne, à supprimer si non utilisée) */
.calendrier-galerie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 60px 0 40px;
}

.calendrier-galerie-item {
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  text-align: center;
}

.calendrier-galerie-item img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 3px solid red;
  box-shadow: 0 15px 40px rgba(255, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.calendrier-galerie-item img:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(255, 0, 0, 0.5);
}

.calendrier-galerie-item p {
  margin-top: 10px;
  color: red;
  font-weight: bold;
  font-size: 20px;
  font-family: 'Playfair Display', serif;
}

/* Responsive pour la galerie horizontale */
@media (max-width: 768px) {
  .calendrier-galerie {
    gap: 20px;
  }
  .calendrier-galerie-item {
    min-width: 200px;
  }
}

@media (max-width: 480px) {
  .calendrier-galerie {
    flex-direction: column;
    align-items: center;
  }
  .calendrier-galerie-item {
    max-width: 100%;
    width: 100%;
  }
}

/* Galerie d'images du calendrier - Version verticale (avec responsive complet) */
.calendrier-galerie-verticale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  margin: 60px 0 50px;
}

.calendrier-galerie-verticale-item {
  width: 100%;
  max-width: 1200px;
  text-align: center;
}

.calendrier-galerie-verticale-item h3 {
  color: red;
  font-size: 36px;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.calendrier-galerie-verticale-item img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 4px solid red;
  box-shadow: 0 20px 50px rgba(255, 0, 0, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.calendrier-galerie-verticale-item img:hover {
  transform: scale(1.02);
  box-shadow: 0 30px 60px rgba(255, 0, 0, 0.6);
}

/* RESPONSIVE POUR TABLETTES ET IPHONE - Galerie verticale */

/* Grandes tablettes (écrans entre 901px et 1200px) */
@media (max-width: 1200px) and (min-width: 901px) {
  .calendrier-galerie-verticale-item {
    max-width: 900px;
  }
  .calendrier-galerie-verticale-item h3 {
    font-size: 32px;
  }
}

/* Tablettes (écrans entre 601px et 900px) */
@media (max-width: 900px) {
  .calendrier-galerie-verticale {
    gap: 50px;
    margin: 50px 0 40px;
  }
  .calendrier-galerie-verticale-item {
    max-width: 700px;
  }
  .calendrier-galerie-verticale-item h3 {
    font-size: 28px;
    margin-bottom: 15px;
  }
  .calendrier-galerie-verticale-item img {
    border-width: 3px;
    border-radius: 14px;
  }
}

/* Petites tablettes et grands smartphones (écrans entre 481px et 600px) */
@media (max-width: 600px) {
  .calendrier-galerie-verticale {
    gap: 40px;
    margin: 40px 0 30px;
  }
  .calendrier-galerie-verticale-item {
    max-width: 95%;
  }
  .calendrier-galerie-verticale-item h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .calendrier-galerie-verticale-item img {
    border-width: 3px;
    border-radius: 12px;
  }
}

/* Smartphones (écrans jusqu'à 480px) */
@media (max-width: 480px) {
  .calendrier-galerie-verticale {
    gap: 35px;
    margin: 30px 0 25px;
  }
  .calendrier-galerie-verticale-item {
    max-width: 100%;
  }
  .calendrier-galerie-verticale-item h3 {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .calendrier-galerie-verticale-item img {
    border-width: 2px;
    border-radius: 10px;
  }
}

/* Très petits smartphones (écrans jusqu'à 320px) */
@media (max-width: 320px) {
  .calendrier-galerie-verticale {
    gap: 30px;
  }
  .calendrier-galerie-verticale-item h3 {
    font-size: 20px;
  }
}

/* ------------------------------------------------
   14. PAGE SPECTACLES
------------------------------------------------ */

/* Conteneur principal */
.spectacle-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Titre du spectacle */
.spectacle-titre {
  text-align: center;
  color: red;
  margin-bottom: 40px;
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  text-transform: none !important;
  letter-spacing: 2px;
}

/* PREMIER BLOC : Image à gauche / Texte à droite */
.spectacle-intro {
  display: flex;
  gap: 60px;
  margin-bottom: 80px;
  align-items: flex-start;
}

.spectacle-image {
  flex: 1;
}

.spectacle-image img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(255, 0, 0, 0.3);
}

/* TEST POUR VOIR LA ZONE CLIQUABLE */
.spectacle-image a {
  display: block;
  cursor: pointer;
}

.spectacle-image a:hover img {
  opacity: 0.8;
  transform: scale(1.02);
  transition: all 0.3s;
}

.spectacle-description {
  flex: 2;
}

.spectacle-description p {
  font-size: 20px;
  line-height: 1.7;
  margin-bottom: 20px;
  text-align: justify;
}

.spectacle-description .intro-question {
  font-size: 24px;
  font-weight: bold;
  color: red;
  margin-bottom: 10px;
}

.spectacle-description .quote {
  font-style: italic;
  color: #f5c400;
  font-size: 24px;
  margin: 30px 0;
}

/* Vidéo entre les deux blocs - Vignette cliquable */
.spectacle-video {
  text-align: center;
  margin: 60px 0;
}

.spectacle-video h2 {
  color: red;
  font-size: 28px;
  margin-bottom: 30px;
  font-family: 'Playfair Display', serif;
}

.video-link {
  display: block;
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-decoration: none;
  border-radius: 20px;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: auto;
  display: block;
  border: 3px solid red;
  border-radius: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.video-link:hover .video-thumbnail {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(255, 0, 0, 0.3);
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 70px;
  color: white;
  background: rgba(255, 0, 0, 0.8);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  pointer-events: none;
  font-family: Arial, sans-serif;
  line-height: 1;
  border: 2px solid white;
}

.video-link:hover .play-button {
  background: red;
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Petit texte indicatif sous la vidéo */
.video-caption {
  margin-top: 10px;
  color: #999;
  font-size: 14px;
}

.video-caption a {
  color: red;
  text-decoration: underline;
}

.video-caption a:hover {
  color: #ff6666;
}

/* Responsive pour la vidéo */
@media (max-width: 600px) {
  .play-button {
    font-size: 50px;
    width: 70px;
    height: 70px;
  }
  .video-link {
    max-width: 100%;
  }
}

/* DEUXIEME BLOC : 3 colonnes */
.spectacle-bottom {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Colonne gauche - Crédits */
.spectacle-credits {
  flex: 1;
}

.spectacle-credits p strong,
.spectacle-credits li strong,
.spectacle-credits strong {
  color: red;
}


.spectacle-credits h3 {
  color: red;
  font-size: 24px;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

.credits-list {
  list-style: none;
  padding: 0;
}

.credits-list li {
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.6;
}

.credits-list .award {
  color: #f5c400;
  font-weight: bold;
  margin: 15px 0 5px 0;
}

.credits-list li a:hover {
  display: inline-block;
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Colonne centrale - Boutons PDF */
.spectacle-pdf {
  flex: 1;
}

.spectacle-pdf h3 {
  color: red;
  font-size: 24px;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

.pdf-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pdf-button {
  width: 100%;
  text-align: center;
}

/* Forcer la couleur des boutons au survol (spécifique aux PDF) */
.pdf-button:hover {
  color: white !important;
  background: red !important;
}

/* Colonne droite - Informations */
.spectacle-info {
  flex: 1;
}

.info-box {
  background: rgba(255, 255, 255, 0.05);
  border-left: 4px solid red;
  padding: 25px;
  border-radius: 0 12px 12px 0;
}

.info-box h3 {
  color: red;
  font-size: 24px;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

.info-box p {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.6;
}

.info-box strong {
  color: red;
}

/* Responsive pour la page spectacle */
@media (max-width: 900px) {
  .spectacle-intro,
  .spectacle-bottom {
    flex-direction: column;
    gap: 30px;
  }
  .spectacle-image {
    text-align: center;
  }
}
/* ------------------------------------------------
   TITRE LOGO POUR BOUCAN
------------------------------------------------ */
.spectacle-titre-logo {
    text-align: center;
    margin: 20px auto 40px auto;
    width: 100%;
    background: transparent;
}

.spectacle-titre-logo a {
    display: inline-block;
    max-width: 600px;
    width: 100%;
    background: transparent;
}

.spectacle-titre-logo img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    filter: none !important;
    -webkit-box-reflect: unset !important;
    transition: transform 0.3s ease;
    image-rendering: -webkit-optimize-contrast; /* Pour meilleur rendu Webkit */
    image-rendering: crisp-edges; /* Pour Firefox */
    image-rendering: pixelated; /* Optionnel */
}

.spectacle-titre-logo a:hover img {
    transform: scale(1.02);
}
/* ------------------------------------------------
   PAGE INTERIEUR CUIR (spécifique)
   Remplacer le rouge par du violet (#9b5cff)
------------------------------------------------ */
body.page-interieurcuir .menu-link:hover,
body.page-interieurcuir .menu-link.active {
  color: #9b5cff !important;
}

body.page-interieurcuir .sub-nav {
  border-bottom-color: #9b5cff;
}

body.page-interieurcuir .sub-link:hover,
body.page-interieurcuir .sub-link.active-sub {
  color: #9b5cff;
  border-bottom-color: #9b5cff;
}

body.page-interieurcuir .btn {
  background-color: #9b5cff;
}
body.page-interieurcuir .btn:hover {
  background-color: #5a2d8c !important; /* violet foncé */
}

body.page-interieurcuir .spectacle-image img {
  box-shadow: 0 15px 40px rgba(155, 92, 255, 0.3);
}

body.page-interieurcuir .info-box {
  border-left-color: #9b5cff;
}

body.page-interieurcuir .spectacle-credits h3,
body.page-interieurcuir .spectacle-credits strong,
body.page-interieurcuir .info-box h3,
body.page-interieurcuir .info-box strong {
  color: #9b5cff;
}

body.page-interieurcuir .video-caption a {
  color: #9b5cff;
}
body.page-interieurcuir .video-caption a:hover {
  color: #9b5cff;
}
body.page-interieurcuir .spectacle-video iframe {
  box-shadow: 0 10px 30px rgba(155, 92, 255, 0.3) !important;
}

/* ==================================================
   CORRECTIONS VIDÉOS YOUTUBE
================================================== */

/* Forcer l'affichage des iframes */
iframe {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 800px !important;
  height: 450px !important;
  margin: 0 auto !important;
  border: none !important;
  background: transparent !important;
}

/* S'assurer que le conteneur vidéo est visible */
.spectacle-video {
  text-align: center !important;
  margin: 60px 0 !important;
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 10 !important;
  min-height: 500px !important;
}

.spectacle-video iframe {
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3) !important;
}

/* Désactiver tout style qui pourrait cacher les vidéos */
.video-link, 
.video-thumbnail,
.play-button {
  /* Ces styles ne doivent pas affecter les iframes */
}
/* ------------------------------------------------
   PAGE ROLLMOPS (spécifique)
   Remplacer le rouge par du turquoise (#40e0d0)
------------------------------------------------ */
body.page-rollmops .menu-link:hover,
body.page-rollmops .menu-link.active {
  color: #40e0d0 !important;
}

body.page-rollmops .sub-nav {
  border-bottom-color: #40e0d0;
}

body.page-rollmops .sub-link:hover,
body.page-rollmops .sub-link.active-sub {
  color: #40e0d0;
  border-bottom-color: #40e0d0;
}

body.page-rollmops .btn {
  background-color: #40e0d0;
}
body.page-rollmops .btn:hover {
  background-color: #1e8f84 !important; /* turquoise foncé */
}

body.page-rollmops .spectacle-titre {
  color: #40e0d0 !important;
  font-family: 'Brittany Signature', cursive !important;
}

body.page-rollmops .spectacle-image img {
  box-shadow: 0 15px 40px rgba(64, 224, 208, 0.3);
}

body.page-rollmops .info-box {
  border-left-color: #40e0d0;
}

body.page-rollmops .spectacle-credits h3,
body.page-rollmops .spectacle-credits strong,
body.page-rollmops .spectacle-pdf h3,    /* AJOUT : cible le titre "Documents" */
body.page-rollmops .info-box h3,
body.page-rollmops .info-box strong {
  color: #40e0d0 !important;
}

body.page-rollmops .video-caption a {
  color: #40e0d0;
}
body.page-rollmops .video-caption a:hover {
  color: #40e0d0;
}
body.page-rollmops .spectacle-video iframe {
  box-shadow: 0 10px 30px rgba(64, 224, 208, 0.3) !important;
}

/* Style spécifique pour le logo Rollmops */
body.page-rollmops .spectacle-container > .spectacle-image {
  text-align: center;
  margin-bottom: 40px;
}

body.page-rollmops .spectacle-container > .spectacle-image img {
  max-width: 300px;
  box-shadow: none;
  border: 3px solid #40e0d0;
  border-radius: 50%;
  padding: 10px;
}
/* ------------------------------------------------
   POLICE BRITTANYSIGNATURE POUR PAGE ROLLMOPS
------------------------------------------------ */
/*body.page-rollmops {
  font-family: 'Brittany Signature', cursive !important;
}*/

/* Appliquer BrittanySignature uniquement au contenu principal*/
/*body.page-rollmops .spectacle-description,
body.page-rollmops .spectacle-description p,
body.page-rollmops .credits-list,
body.page-rollmops .info-box p {
  font-family: 'Brittany Signature', cursive !important;
}
*/

/* Ajuster la taille pour meilleure lisibilité 
body.page-rollmops .spectacle-description p {
  font-size: 24px !important;
  line-height: 1.5 !important;
}*/

/*body.page-rollmops .credits-list li,
body.page-rollmops .info-box p {
  font-size: 22px !important;
}*/

/* ------------------------------------------------
   PAGE TANK (spécifique)
   Couleur principale : #25430f (vert foncé)
------------------------------------------------ */
body.page-tank .menu-link:hover,
body.page-tank .menu-link.active {
  color: #25430f !important;
}

body.page-tank .sub-nav {
  border-bottom-color: #25430f;
}

body.page-tank .sub-link:hover,
body.page-tank .sub-link.active-sub {
  color: #25430f;
  border-bottom-color: #25430f;
}

body.page-tank .btn {
  background-color: #25430f;
}
body.page-tank .btn:hover {
  background-color: #1a2f0a !important; /* une teinte plus foncée pour le survol */
}

body.page-tank .spectacle-titre {
  color: #25430f !important;
}

body.page-tank .spectacle-image img {
  box-shadow: 0 15px 40px rgba(37, 67, 15, 0.3);
}

body.page-tank .info-box {
  border-left-color: #25430f;
}

body.page-tank .spectacle-credits h3,
body.page-tank .spectacle-credits strong,
body.page-tank .spectacle-pdf h3,
body.page-tank .info-box h3,
body.page-tank .info-box strong {
  color: #25430f !important;
}

body.page-tank .video-caption a {
  color: #25430f;
}
body.page-tank .video-caption a:hover {
  color: #25430f;
}
body.page-tank .spectacle-video iframe {
  box-shadow: 0 10px 30px rgba(37, 67, 15, 0.3) !important;
}

/* Couleur du trait au-dessus du footer */
body.page-tank .footer-sub-nav {
  border-top-color: #25430f !important;
}

body.page-tank .footer-sub-link:hover,
body.page-tank .footer-sub-link.active-sub {
  color: #25430f !important;
  border-bottom-color: #25430f !important;
}
/* ==================================================
   15. RESPONSIVE (Médias queries) - Global
================================================== */

/* Responsive pour le sous-menu (déjà inclus plus haut) */

/* Tablettes et petits écrans (max-width: 900px) */
@media (max-width: 900px) {

  /* Navigation */
  .navbar {
    flex-direction: column;
    gap: 20px;
  }

  .nav-left {
    justify-content: center;
    padding-right: 0;
  }
  
  .nav-menu,
  .footer-menu {
    flex-wrap: wrap;
    gap: 20px;
  }
  
  /* NOTE: Les icônes sociales sont maintenant gérées dans la section 7.6 */
  /* Ne pas ajouter de display:none ici */

  /* Slideshow */
  .slideshow-wrapper {
    width: 100%;
    max-width: 600px;
  }

  /* Titres */
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }

  /* Page Compagnie - Intro */
  .intro {
    flex-direction: column;
    gap: 40px;
  }

  /* Page Calendrier - Ajustements */
  .tournee-title {
    font-size: 28px !important;
  }

  /* Page Contact */
  .contact-content {
    max-width: 900px;
    padding: 0 30px;
  }
  
  .contact-form {
    max-width: 800px;
    gap: 20px;
  }
  
  .contact-form button {
    width: 250px;
    font-size: 22px;
  }

  /* ===== AJOUT POUR CENTRER LE TITRE CALENDRIER SUR 601px-900px ===== */
  .calendrier-intro .intro-text,
  .calendrier-intro .intro-text h1,
  .calendrier-intro .intro-text p {
    text-align: center !important;
  }
  /* ===== FIN DE L'AJOUT ===== */
}

/* Smartphones (max-width: 600px) */
@media (max-width: 600px) {
  
  /* Navigation */
  .navbar {
    flex-direction: column;
    gap: 15px;
    padding: 10px;
  }
  
  .nav-menu,
  .footer-menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 15px;
  }

  .nav-menu li,
  .footer-menu li {
    flex: 0 0 auto;
  }
  
  .menu-link {
    font-size: 16px;
  }

  /* Réduire l'espace sous le menu */
  header {
    padding: 10px 20px 0px;
  }
  
  /* Page Compagnie - Intro */
  .intro {
    flex-direction: column-reverse;
  }
  .intro-image img {
    max-width: 100%;
    height: auto;
  }
  
  /* Page Compagnie - Histoire */
  .history {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .posters {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  .posters img {
    max-width: 200px;
    width: 100%;
  }

  .history-text {
    width: 100%;
  }

  .history-text p {
    font-size: 18px;
  }

  /* Citation sur mobile */
  .quote-box {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Page Contact */
  .contact-header h1 {
    font-size: 32px;
  }
  
  .contact-info {
    font-size: 18px;
  }
  
  .contact-content {
    padding: 0 20px;
  }
  
  .contact-form {
    grid-template-columns: 1fr;
  }
  
  .contact-form .full-width {
    grid-column: span 1;
  }
  
  .contact-form button {
    width: 100%;
    grid-column: span 1;
    font-size: 20px;
    padding: 15px 30px;
  }
  
  .contact-form input,
  .contact-form textarea {
    padding: 15px;
    font-size: 18px;
  }

  /* Page Calendrier */
  .tournee {
    max-width: 100%;
    padding: 0 15px;
  }

  .tournee-title {
    font-size: 24px !important;
  }

  .calendrier-liste li {
    font-size: 14px;
  }

  .calendrier-intro .intro-text p {
    font-size: 18px !important;
  }

  /* CENTRAGE DU TITRE CALENDRIER SUR MOBILE */
  .calendrier-intro .intro-text,
  .calendrier-intro .intro-text h1,
  .calendrier-intro .intro-text p {
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Ajustement taille du titre sur très petits écrans (sera écrasé par la media query 400px si besoin) */
  .calendrier-intro .intro-text h1 {
    font-size: 28px;
  }
}

/* Très petits smartphones (max-width: 400px) */
@media (max-width: 400px) {
  .calendrier-intro .intro-text h1 {
    font-size: 24px !important;
  }
  .calendrier-intro .intro-text p {
    font-size: 16px !important;
  }
}
/* Sous-menu des spectacles : 2 colonnes sur mobile */
@media (max-width: 600px) {
  /* Sélecteur à adapter selon votre HTML */
  .sub-nav ul,
  nav.sub-menu ul,
  .menu-spectacles ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    list-style: none;
    padding: 0;
  }
  .sub-nav li,
  nav.sub-menu li,
  .menu-spectacles li {
    text-align: center;
  }
}
/* Forcer le centrage du titre Calendrier sur tous les écrans <= 900px */
@media (max-width: 900px) {
  .calendrier-intro .intro-text,
  .calendrier-intro .intro-text h1,
  .calendrier-intro .intro-text p {
    text-align: center !important;
  }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* Centrage des titres des cartes */
  .contact-card h3 {
    text-align: center;
  }
  /* Si vous avez un titre principal (h1) dans .contact-header */
  .contact-header h1 {
    text-align: center;
  }
}

/* ------------------------------------------------
   16. CORRECTIONS POUR LES IMAGES SUR ANDROID
------------------------------------------------ */

/* Forcer l'adaptation des images sur tous les mobiles */
@media (max-width: 600px) {
  
  /* Correction pour la galerie verticale - UNIQUEMENT calendrier */
  .calendrier-galerie-verticale {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
  
  .calendrier-galerie-verticale-item {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  
  .calendrier-galerie-verticale-item h3 {
    font-size: 24px !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    padding: 0 5px !important;
  }
  
  .calendrier-galerie-verticale-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-width: 2px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    box-shadow: 0 15px 30px rgba(255, 0, 0, 0.3) !important;
  }
  
  /* Supprimer les effets de zoom */
  .calendrier-galerie-verticale-item img:hover {
    transform: none !important;
  }
  
  /* UNIQUEMENT pour les conteneurs des pages concernées */
  .spectacle-container,
  .tournee {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }
}
/* ------------------------------------------------
   17. FOOTER AVEC SOUS-MENU (COMME LE HAUT MAIS INVERSÉ)
------------------------------------------------ */
.footer-with-submenu {
  margin-top: 80px;
}

/* Sous-menu des spectacles en bas */
.footer-sub-nav {
  background-color: #000;
  border-top: 2px solid #ff0000; /* Trait de couleur AU-DESSUS */
  border-bottom: 1px solid #333;  /* Trait fin EN-DESSOUS */
  padding: 10px 0;
  width: 100%;
}

.footer-sub-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none !important;
  margin: 0;
  padding: 0;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-sub-nav li {
  list-style: none !important;
  margin: 5px 0;
}

.footer-sub-link {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Georgia Bold', Georgia, serif, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  text-transform: uppercase;
}

.footer-sub-link:hover {
  color: #ff0000;
  border-bottom-color: #ff0000;
}

.footer-sub-link.active-sub {
  color: #ff0000;
  border-bottom-color: #ff0000;
}

/* Menu général en bas (sans bordure du haut) */
.footer-menu-container {
  background-color: #000;
  padding: 20px 0 40px;
}

.footer-menu {
  display: flex;
  gap: 40px;
  justify-content: center;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-menu li {
  list-style: none !important;
}

.footer-copyright {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 20px;
  text-align: center;
}

/* Couleurs spécifiques pour chaque page (bas de page) */
body.page-interieurcuir .footer-sub-nav {
  border-top-color: #9b5cff !important;
}

body.page-interieurcuir .footer-sub-link:hover,
body.page-interieurcuir .footer-sub-link.active-sub {
  color: #9b5cff !important;
  border-bottom-color: #9b5cff !important;
}

body.page-rollmops .footer-sub-nav {
  border-top-color: #40e0d0 !important;
}

body.page-rollmops .footer-sub-link:hover,
body.page-rollmops .footer-sub-link.active-sub {
  color: #40e0d0 !important;
  border-bottom-color: #40e0d0 !important;
}

body.page-boucan .footer-sub-nav {
  border-top-color: #f5c400 !important;
}

body.page-boucan .footer-sub-link:hover,
body.page-boucan .footer-sub-link.active-sub {
  color: #f5c400 !important;
  border-bottom-color: #f5c400 !important;
}

/* Responsive pour le footer */
@media (max-width: 768px) {
  .footer-sub-nav ul {
    gap: 20px;
  }
  
  .footer-menu {
    gap: 20px;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .footer-sub-nav ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    padding: 0 15px;
  }
  
  .footer-sub-nav li {
    text-align: center;
  }
  
  .footer-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .footer-menu li {
    flex: 0 0 auto;
  }
}
/* ------------------------------------------------
   GESTION DES POLICES - MENUS IDENTIQUES PARTOUT
------------------------------------------------ */

/* 1. POLICE DES MENUS - Identique pour TOUTES les pages */
.navbar, .nav-menu, .menu-link,
.sub-nav, .sub-link,
.footer-sub-nav, .footer-sub-link,
.footer-menu, .footer-menu-container,
.btn {
  font-family: 'Georgia Bold', Georgia, 'Times New Roman', serif !important;
  font-weight: normal !important;
}

/* 2. PAGES NORMALES (toutes sauf rollmops et interieurcuir) */
body:not(.page-rollmops):not(.page-interieurcuir) {
  font-family: 'Playfair Display', 'Georgia Bold', Georgia, 'Times New Roman', serif !important;
  font-weight: normal;
}

/* 3. PAGE ROLLMOPS - Contenu en Brittany Signature */
/*body.page-rollmops .spectacle-description,
body.page-rollmops .spectacle-description p,
body.page-rollmops .credits-list,
body.page-rollmops .info-box p {
  font-family: 'Brittany Signature', cursive !important;
}
*/
/* 4. PAGE INTERIEUR CUIR - Garde sa couleur mais police normale */
body.page-interieurcuir {
  font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif !important;
  font-weight: bold !important;
}

/* 5. Exceptions pour Playfair Display (titres spéciaux) */
.intro-text h1,
.calendrier-galerie-verticale-item h3,
.contact-card h3 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
}

/* 6. Ajustements pour les menus rollmops (garder la couleur turquoise) */
body.page-rollmops .menu-link:hover,
body.page-rollmops .menu-link.active,
body.page-rollmops .sub-link:hover,
body.page-rollmops .sub-link.active-sub,
body.page-rollmops .footer-sub-link:hover,
body.page-rollmops .footer-sub-link.active-sub {
  color: #40e0d0 !important;
}

/* 7. Ajustements pour les menus interieurcuir (garder la couleur violette) */
body.page-interieurcuir .menu-link:hover,
body.page-interieurcuir .menu-link.active,
body.page-interieurcuir .sub-link:hover,
body.page-interieurcuir .sub-link.active-sub,
body.page-interieurcuir .footer-sub-link:hover,
body.page-interieurcuir .footer-sub-link.active-sub {
  color: #9b5cff !important;
}
/* ==================================================
   FIN DU FICHIER STYLE.CSS
================================================== */