/* ============================
   GENERAL
============================ */
body {
    background: #ffffff;
    color: #000000;
    font-family: "Arial", Helvetica, sans-serif;
}
.marker-label {
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
   
    font-size: 10px!important;
    text-align: center;
}
.cover3 {
    width: 100% !important;
    height: 100vh !important; /* ou autre hauteur si tu veux */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* Mobile uniquement */
/* Mobile uniquement */
@media (max-width: 768px) {
  .cover3-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* texte en haut, logo en bas */
    align-items: center !important;
    height: 100vh !important; /* prend toute la hauteur de l'écran */
    padding: 0 !important;
  }
#mapStatus {
    color: #714A2C; /* marron foncé pour rester dans la charte */
    font-weight: bold; /* plus visible */
    font-size: 1.1rem; /* un peu plus grand */
}

#radiusValue {
    color: #714A2C;
    font-weight: bold;
}
  /* Texte "À Bientôt" collé tout en haut et plus grand */
  .text-bubble {
    order: 1 !important;
    margin-top: 10px !important; /* tout en haut */
    text-align: center !important;
    width: 100% !important;
  }

  #t32 {
    font-size: 3rem !important; /* taille plus grande */
    margin: 0 !important;
  }

  #kk2 {
    font-size: 1.2rem !important; /* ajuste la taille du texte */
    margin: 0 !important;
  }

  /* Logo collé tout en bas */
  #presentation32 {
    order: 2 !important;
    margin-bottom: 10px !important;
    max-width: 200px !important; /* ajuste si besoin */
  }
}


/* Mobile */
@media (max-width: 767px) {
    .cover3-content {
        padding-left: 10px;  /* espace intérieur pour éviter débordement */
     
        text-align: center;  /* centre le texte et l'image */
        overflow: hidden;    /* empêche tout débordement */
    }
/* Pour mobile */
@media (max-width: 767px) {
 =
    .cover3 {
        background-size: cover;
        background-position: center top; /* ajuste le focus sur le haut si nécessaire */
        min-height: auto; /* ajuste selon le contenu pour éviter trop de vide */
        padding: 20px 10px; /* espace intérieur pour que le contenu ne touche pas les bords */
    }
}
  @media (max-width: 768px) {
    .cover3 {
        background-size: cover;
        background-position: center top; /* ajuste le focus sur le haut si nécessaire */
        min-height: auto; /* ajuste selon le contenu pour éviter trop de vide */
        padding: 20px 10px; /* espace intérieur pour que le contenu ne touche pas les bords */
    }
}
  @media (max-width: 700px) {
    .cover3 {
        background-size: cover;
        background-position: center top; /* ajuste le focus sur le haut si nécessaire */
        min-height: auto; /* ajuste selon le contenu pour éviter trop de vide */
        padding: 20px 10px; /* espace intérieur pour que le contenu ne touche pas les bords */
    }
}
    #presentation32 {
        max-width: 80%;      /* réduit le logo par rapport à la largeur du parent */
        height: auto;
        display: block;
        margin: 0 auto;      /* centre horizontalement */
    }

    #t32 {
        white-space: nowrap; /* garde le titre sur une ligne */
        font-size: 2rem;     /* ajuste la taille pour mobile */
    }

    #kk2 {
        display: none;       /* cache le texte sur mobile */
    }
}


/* Pour mobile : écrans ≤ 576px */
@media (max-width: 576px) {
    #t37 {
        font-size: 28px; /* réduire légèrement le titre */
    }
    .form-container input {
        font-size: 16px; /* optionnel : ajuster un peu les champs */
    }
}
#t3 {
    white-space: nowrap; /* empêche le retour à la ligne */
}
#t37 {
   margin-left: 10px; 
    white-space: nowrap; /* empêche le retour à la ligne */
}

@media (max-width: 768px) {
    #t3 {
        font-size: 28px; /* réduit la taille sur mobile */
    }
}



@media (max-width: 767px) {
    #presentation32 {
        width: 80px!important;  /* réduit la taille du logo sur mobile */
        height: auto!important;
    }
}
h1, h2, h3 {
    color: #000000;
    letter-spacing: 1px;
}

.section {
    scroll-margin-top: 90px;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Marron de ton thème */
:root {
    --marron: #6b4026;
}

/* ============================
   PAGE DE COUVERTURE
============================ */
.cover {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

.cover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    padding: 1rem;
}

.cover-title {
    font-size: 48px;
    letter-spacing: 2px;
}
.cover2 {
  position: relative;
  width: 100%;
  height: 100vh; /* occupe toute la hauteur de l’écran */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
}

.cover3 {
    font-family: "Imperial Script", cursive;
  position: relative;
  width: 100%;
  height: 100vh; /* occupe toute la hauteur de l’écran */
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;  
     /* centre verticalement */
}
.cover3 {
    min-height: 100vh;              /* s'adapte au contenu */
    height: auto;                   /* évite le bug mobile */
}
@media (max-width: 700px) {
    .cover3 {
        min-height: 100dvh;        /* hauteur dynamique mobile */
        height: auto;
    }
}
.countdown-wrapper {
  display: flex;
  gap: 25px;

  padding: 20px 30px;
  border-radius: 10px;
}

/* ============================
   HERO + CARROUSEL
============================ */
.hero {
    min-height: 80vh;
    text-align: center;
}

.initials {
    font-size: 48px;
    color: var(--marron);
    font-weight: 700;
    margin-top: 10px;
}



@media (max-width: 768px) {
    .reduced-img {
        max-width: 40%; /* prend tout l’espace sur mobile */
    }
}
.reduced-img {
    width: 40%;        /* largeur relative au parent */
    max-width: 400px;  /* largeur max */
    height: auto;      /* conserve le ratio */
    display: block;
    margin: 20px auto; /* centre et ajoute un peu d'espace vertical */
  
}
.cover3-content {
    text-align: center; /* centre le contenu */
}


.reduced-img:hover {
 
}

@media (max-width: 768px) {
    .cover3 {
        background-position: center top; /* ajuste le focus du background */
    }
    .cover3 img {
        max-width: 95%;
    }
}
/* Responsive */
@media (max-width: 768px) {
    .reduced-img {
        width: 95%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .reduced-img {
        width: 100%;
        max-width: 250px;
    }
}

/* ============================
   NAVIGATION
============================ */
.navbar {
    background-color: #000 !important;
}
.full-screen-img {
    width: 100vw;       /* prend toute la largeur de l'écran */
    height: auto;       /* conserve les proportions */
    object-fit: cover;   /* supprime l'espace sous l'image */
}

.navbar-brand {
    color: var(--marron) !important;
    font-weight: bold;
    font-size: 22px;
}

/* Navbar transparente */
.custom-navbar {
    background-color: transparent !important;
    padding: 1rem 0;
}

/* Navbar Brand */
.custom-navbar .navbar-brand {
    color: #6b4026;
    font-weight: bold;
    font-size: 22px;
}

/* Navbar links centrés */
.custom-navbar .navbar-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Navbar links */
.custom-navbar .nav-link {
    color: #000;
    position: relative;
    border-radius: 10px;
    padding: 0.3rem 0.8rem 5px;
    transition: all 0.3s ease;
}

/* Ligne noire animée */
.custom-navbar .nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    left: 50%;
    bottom: 0;
    background-color: #000;
    border-radius: 5px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.custom-navbar .nav-link:hover::after {
    width: 100%;
}

/* Toggler */
.custom-navbar .navbar-toggler {
    border-color: #000;
}

.custom-navbar .navbar-toggler-icon {
    filter: invert(1);
}

#navbarMenu {
    text-align: center;
}

/* ============================
   SECTIONS
============================ */
#compte-a-rebours {
    font-size: 2em;
    font-weight: bold;
}

#programme ul {
    font-size: 18px;
}

#dresscode p {
    font-size: 20px;
    font-weight: bold;
    color: var(--marron);
}

#galerie img {
    border-radius: 6px;
}

/* ============================
   FORMULAIRE CONFIRMATION
============================ */
#confirmation input {
  
   
}

#confirmation button {
    background: #000;
    color: #fff;
   
    transition: 0.3s;
}

#confirmation button:hover {
    background: var(--marron);
}

/* Champs */
.transparent-input {
    background: transparent;
    border: none;
    outline: none;
    color: white;
    caret-color: white;
    font-size: 16px;
    display: block;
}

.transparent-input::placeholder {
    color: white;
}

.transparent-input:focus::placeholder {
    color: transparent;
}

#monBouton {
    font-family: "Cormorant", serif;
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 0;
    cursor: pointer;
    transition: 0.3s;
}

#monBouton:hover {
    background-color: rgba(255,255,255,0.1);
    
}

/* Polices */
#po1 {
    font-family: "Cormorant", serif;
    font-weight: 400;
}
#p{
     font-family: "Cormorant", serif;
}

#t1 {
    font-family: "Cormorant", serif;
    font-weight: 400;
    margin-top: 400px;
}
#t18 {
    color: black;
    font-family: "Cormorant", serif;
    font-weight: 200;
    font-size: 100px; 

}
#t182 {
    text-align: center;
    color: black;
    font-family: "Cinzel", serif;
    font-weight: 200;
    font-size: 100px; 

}
#centre{
   display: block;
  margin: 0 auto;   
}
#t20 {
    color: black;
    font-family: "Cinzel", serif;
    font-weight: 200;
    font-size: 80px; 

}
/* STYLE DES CHAMPS */
.champ-forme {
    width: 100%;
    padding: 12px;
    font-family: "Cormorant", serif;
    border: 2px solid #000;   /* contour noir */
    border-radius: 0;         /* carré */
    font-size: 16px;
    background: #fff;
    outline: none;
}

/* STYLE DU BOUTON ASSORTI */
.btn-submit {
    width: 100%;
    padding: 12px;
    background: #000;
    color: #fff;
    font-family: "Cormorant", serif;
    border-radius: 0;         /* carré */
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

/* Effet au survol */
.btn-submit:hover {
    background: #fff;
    color: #000;
}
#t17 {
    color:#a36b56;
    font-family: "Cinzel", serif;
    font-weight: 100;
    font-size: 50px; 


}
/* --- Version mobile (max-width 768px) --- */
@media (max-width: 768px) {
    /* Réduire un peu la taille des familles */
    #t17 {
        font-size: 24px; /* ajustable selon besoin */
        white-space: nowrap; /* force le texte sur une seule ligne */
    }

    /* Numéros de téléphone en noir, pas de bleu ni de surlignage, hover gris */
    .phone {
        color: #000 !important;
        text-decoration: none !important;
        background: none !important;
    }
    .phone:hover {
        color: #555;
        text-decoration: none;
        background: none;
    }

    /* Ajuster un peu la taille des numéros si nécessaire */
    #t16.phone {
        font-size: 20px;
    }
}
.phone {
    color: #000;
    text-decoration: none;
}


.marker-cluster div {
  color: #ffffff !important;  /* Texte blanc */
  font-weight: bold;
}
#t16 {
   color: black;
    font-family: "Cinzel", serif;
    font-weight: 200;
    font-size: 30px; 
  text-decoration: none!important;
}

#t1 { color: #fff; }
#t3 { font-family: "Cormorant", serif;
     color: black; }
#t37 { font-family: "Cormorant", serif;
  font-weight: 150;
    font-size: 10px;
     color: black; }
   /* Structure centrée mais décalée vers la droite */
.cover3-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;    /* important pour décaler */
    margin-left: 40%;           /* ton décalage */
    text-align: left;           /* cohérent avec align-items */
}

/* TITRE RESPONSIVE */
#t32 {
    color: white;
    padding-right: 200px;
    font-size: 150px;
    margin: 0;
 white-space: nowrap;       /* empêche le retour à la ligne */
        word-break: normal;        /* empêche de couper les mots à chaque lettre */
        overflow-wrap: normal;     /* sécurise le comportement sur certains navigateurs */
        text-align: center;        /* centre le texte */
        
    white-space: nowrap!important;       /* empêche le texte de passer à la ligne */
    word-break: normal!important;        /* ne coupe pas les mots à chaque lettre */
    overflow-wrap: normal!important;     /* compatibilité navigateur */
    text-align: center!important;        /* centre le texte */
    display: inline-block!important;     /* utile si c’est dans un flex container */

    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .cover3 {
        background-position: left center !important;
        background-size: cover; /* tu peux garder cover si tu veux un effet plein écran */
    }
}


/* PARAGRAPHE */
#kk {
    color: white;
    font-size: 24px;
    font-family: "Cormorant", serif;
    text-align: center;

    line-height: 1.4;
}
@media (max-width: 768px) {
    #kk2 {
        display: none;
    }
}
#kk2 {
    color: white;
    font-size: 24px;
    font-family: "Cormorant", serif;
    text-align: center;

    line-height: 1.4;
}
@media (max-width: 700px) {
    .text-bubble {
        padding: 25px 30px;
        border-radius: 25px; /* deviens ovale sur mobile */
    }
}
/* Bulle abstraite autour du texte */
.text-bubble2 {
      font-family: "Imperial Script", cursive;
    position: relative;
    padding: 40px 60px;
    border-radius: 50%;
    background: #27282b;
    backdrop-filter: blur(8px);
    text-align: center;
    z-index: 2;
    display: inline-block;
}
.text-bubble {
      font-family: "Imperial Script", cursive;
    position: relative;
    padding: 40px 60px;
    border-radius: 50%;
  
    text-align: center;
    z-index: 2;
    display: inline-block;
}
/* Assure que le contenu est bien au-dessus du reste */
.cover3-content {
    position: relative;
    z-index: 3;
}
/* LOGO */
#presentation32 {
    width: 170px;
       margin-left: 10%;
    margin-top: 10px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
    .cover3-content {
        margin-left: 20%;
    }

    #t32 {
        font-size: 70px;
    }

    #kk {
        font-size: 20px;
        font-family: "Cormorant", serif;
        text-align: center;
    }
}
@media (max-width: 768px) {
    .cover3-content {
        margin-left: auto !important;
        margin-right: 20px !important; /* Ajuste la valeur comme tu veux */
        align-items: flex-end !important;
        text-align: right !important;
    }

    .text-bubble {
        margin-left: auto !important;
        margin-right: 0 !important; /* garde-le bien collé à droite */
    }

    #t32, #kk {
        text-align: right !important;
    }
}
@media (max-width: 600px) {
    .cover3-content {
        margin-left: 5%;    /* sur mobile → centré presque */
        align-items: center;
        text-align: center;
    }

    #t32 {
        font-size: 38px;
    }

    #kk {
        font-size: 18px;
        font-family: "Cormorant", serif;
        text-align: center;
    }

    #presentation3 {
        width: 120px;
    }
}

     #t9{font-family: "Cormorant", serif;
         color:#a36b56}
#t4 { 
         margin-top: 50px;
        font-family: "Instrument Serif", serif;
     color: black; }
     #t5 { font-family: "Cormorant", serif;
        font-size: 30px; 
      color: black }
      #t6 { font-family: "Cormorant", serif;
        font-size: 20px; 
     color: black; }
.middle-col {
    position: relative;
}

/* Ligne gauche + droite plus petite */
.middle-col::before,
.middle-col::after {
    content: "";
    position: absolute;
    top: 20%;        /* hauteur de départ */
    bottom: 20%;     /* hauteur de fin */
    width: 2px;
    background-color: #000;
}

/* Ligne gauche */
.middle-col::before {
    left: 0;
}

/* Ligne droite */
.middle-col::after {
    right: 0;
}
#countdown { 
    font-size: 100px;
         margin-top: 50px;
        font-family: "Instrument Serif", serif;
     color: black; }
      .numbers {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 40px;
    margin-bottom: 10px;
  }
  #days, #seconds, #minutes, #hours  { 
     font-size: 8vw;
         margin-top: 20px;
        font-family: "Instrument Serif", serif;
     color: #fff; }
  /* Ligne des labels */
  #days2  { 
     font-size: 50px;
         margin-top: 20px;
        font-family: "Instrument Serif", serif;
     color: black; }
  /* Ligne des labels */
#baisse{
    
    margin-top: 100px;
}
.baisse{
    margin-top: 100px;
}
#compte-a-rebours{
    
    margin-top: 100px;

}
  .labels {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
   text-align: center;
  }
  #r2{
     margin-top: 30px;
  }
   #r3{
    background-color:white;
     margin-top: 30px;
   
  }
   #r32{
    background-color:black;
     margin-top: 30px;
   
  }
   #r4{
    background-color:white;
   width: 20%;
    display: block;
  margin: 0 auto; 
   }
#presentation{
    
    width: 40%;
      display: block;
  margin: 0 auto; /* centre horizontalement */
}
#presentation2{
    
    width: 70%;
      display: block;
  margin: 0 auto; /* centre horizontalement */
}
#left-image2 {
    max-width: 80%;   /* change la valeur : 80%, 60%, 40%… */

}
#left-image {
    max-width: 30%;   /* change la valeur : 80%, 60%, 40%… */

}
#presentation3{
    
    width: 20%;
  
     margin-left: 60%;
}
#dc{
    
    width: 100%;
      display: block;
  margin: 0 auto; /* centre horizontalement */
}
#t2 {
    font-family: "Cinzel", serif;
    font-size: 15px;
    font-weight: 100;
    color: #fff;
}

/* ============================
   FOOTER
============================ */
#bye img {
    max-width: 300px;
    border-radius: 10px;
}

/* ============================
   SLIDER INFINITE
============================ */
/* Container global responsive */
.countdown-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px; 
}

/* Un bloc = nombre + label */
.time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.num {
  font-size: 8vw;
  text-align: center;
   color: #fff;
}

.label {
    font-family: "Instrument Serif", serif;
  font-size: 3vw;
  color: #fff;
  text-align: center;
  margin-top: 4px;
}.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .gallery-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
  }

  .gallery-grid {
    column-count: 3; /* nombre de colonnes */
    column-gap: 20px; /* espace entre colonnes */
  }

  .gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .gallery-item img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s;
  }

  .gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
  }

  .gallery-item:hover img {
    transform: scale(1.05);
  }

  @media (max-width: 900px) {
    .gallery-grid {
      column-count: 2;
    }
  }

  @media (max-width: 600px) {
    .gallery-grid {
      column-count: 1;
    }
  }
  .gallery-item:hover img {
    transform: scale(1.05);
  }
/* Styles pour le formulaire */
.form-container {
    max-width: 400px; /* largeur max pour desktop et mobile */
    width: 90%;       /* largeur relative sur mobile */
    margin: 0 auto;   /* centre horizontalement */
}

.champ-forme {
    width: 100%;      /* prend toute la largeur du form-container */
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

.btn-submit {
    width: 100%;
    padding: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
}
@media (max-width: 768px) {
    #t32 {
        white-space: nowrap;
        font-size: 28px; /* tu peux ajuster la taille si besoin */
        text-align: center; /* pour le centrer */
    }
}
/* Ajustements spécifiques mobile */
@media (max-width: 768px) {
    #confirmation {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Les deux-points */
.colon {
  font-size: 3vw;
    color: #fff;
font-family: "Instrument Serif", serif;
}

  /* Ajustement mobile */
  @media (max-width: 500px) {
    .numbers {
      font-size: 10vw;
    }
    .labels {
      font-size: 2vw;
    }
    
  }