/* =====================================================
   RESET & VARS
===================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
    font-family: 'bumerang'; /* Le nom que vous voulez lui donner */
    src: url('BumerangDemoVersionRegular-nRwZY.otf') format('opentype'); /* Le chemin vers votre fichier */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Permet d'afficher une police de secours le temps du chargement */
}

@font-face {
    font-family: 'made_saonara'; /* Le nom que vous voulez lui donner */
    /* src: url('MADE_SAONARA_PERSONAL_USE.otf') format('opentype'); /* Le chemin vers votre fichier */
	src: url('made_saonara.woff2') format('opentype');    
	font-weight: normal;
    font-style: normal;
    font-display: swap; /* Permet d'afficher une police de secours le temps du chargement */
}

:root {
  /* --- POLICES --- */
/*  --font-title: "Playfair", cursive;
  --font-text: "Playfair", cursive; */
/* --- POLICES --- */
  --font-title: 'bumerang', sans-serif;
  --font-text: 'made_saonara', sans-serif;
  /* ... */


  /* --- ÉPAISSEUR DU TEXTE --- */
  --fw-text: 700;  

  /* --- TYPOGRAPHIE RESPONSIVE --- */
  --fs-h1: clamp(3rem, 9vw, 8rem);
  --fs-h2: clamp(2.8rem, 3.2vw, 3.2rem); /* Réduit le minimum pour éviter le débordement mobile */
  --fs-h3: 1.8rem;
  
  --fs-text: 1.25rem; 
  --fs-small: 1.125rem;
  --fs-nav: 0.3rem; 
  
  --line-height: 1.4;
  --nav-height: 60px;
  --vh: 1vh;
  
  /* --- COULEURS --- */
  --color-gold: #5C4B3B;
  --color-theme: #F4F1EB;
  
  /* Fond transparent (Accordéons + Image Lieu) */
  --bg-overlay: #1B3022; 
}

/* Application globale de la police */
input, textarea, select, button { 
    font-family: var(--font-text); 
    font-size: var(--fs-text); 
    font-weight: var(--fw-text);
}

/* Éviter le zoom automatique sur iPhone au clic sur un champ */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* =====================================================
   BASE
===================================================== */

.cover-photo {
    width: 200px; /* Largeur de la photo (ajustez selon vos goûts) */
    height: 200px; /* Hauteur de la photo */
    object-fit: cover; /* Empêche l'image d'être déformée */
    margin-bottom: 15vh; /* Espace entre la photo et le texte "Bienvenue" */
}


/* --- LOADER --- */
#loader-screen {
    position: fixed; inset: 0; 
    z-index: 100000; 
    
    background-color: #000000;
    display: flex; justify-content: center; align-items: center;
    color: white; font-family: var(--font-title); font-size: 1.5rem;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

body.loaded #loader-screen { opacity: 0; visibility: hidden; pointer-events: none; }

body {
  font-family: var(--font-text);
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  line-height: var(--line-height);
	letter-spacing: 0.03em;
  overflow: hidden;
  background-color: var(--color-theme); 
  color: #000000; 
  -webkit-font-smoothing: antialiased; /* Lisse les polices sur Chrome, Safari et Edge */
  -moz-osx-font-smoothing: grayscale; /* Affine le rendu sur Firefox (Mac) */
  text-rendering: auto; /* Améliore la lisibilité globale et gère mieux l'espacement */
  -webkit-text-size-adjust: 100%; /* Empêche Chrome Android/iOS de zoomer le texte tout seul */
  text-size-adjust: 100%;


}
body:not(.unlocked) #main-nav,
body:not(.unlocked) #sections { pointer-events: none;}

/* --- BACKGROUND FIXE (Correction Chrome iOS & Safari + Stabilité Clavier) --- */
body::before {
  content: "";
  position: fixed; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100vh; /* On garde 100vh fixe pour éviter le saut au clic clavier */
  
  background-image: url('background_livre.jpeg'); 
  background-size: auto 100vh; 
  background-position: center center; 
  background-repeat: no-repeat;
  z-index: -9999; pointer-events: none;
  
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.section-inner p, .location-text, .info-text { text-align: justify; }
strong, b { font-weight: 800; } /*color: var(--color-gold); }*/

h1, h2, h3 { font-family: var(--font-title); letter-spacing: 0.05em; }

h1 { 
    font-size: var(--fs-h1); 
    color: var(--color-gold); 
    line-height: 1.1; 
    white-space: nowrap; 
}

h2 { 
    font-size: var(--fs-h2); 
    margin-bottom: 20px;
    white-space: nowrap; /* Force une seule ligne pour la date/lieu */
}
.intro-logo {
    display: block;
    margin: 0 auto 40px auto; /* Centre l'image et met 40px d'espace en bas */
    width: auto; /* Taille par défaut sur ordinateur */
    max-width: 300px; /* Sécurité pour ne pas qu'elle soit géante sur PC */
    height: auto;
}

/* =====================================================
   HERO (HEADER)
===================================================== */

.hero-logo {
    display: block;
    margin: 0 auto 15px auto; /* Centre l'image et ajoute un petit espace en dessous */
    width: auto; 
    max-width: 400px; /* Taille de sécurité pour l'ordinateur */
    height: auto;
}

#hero {
  position: fixed; inset: 0; z-index: 900;
  text-align: center; overflow: hidden;
  transition: opacity 2s ease, visibility 2s ease, transform 4s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #000000; 
}

#hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}

#hero-content {
  position: absolute; inset: 0; padding-top: 12vh; z-index: 10;
  opacity: 0; transition: opacity 2s ease;
  width: 100%; padding-left: 20px; padding-right: 20px; 
  box-sizing: border-box;
}
body.media-active #hero-content { opacity: 1; transition-delay: 1.5s; }

#cover-group {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 50; 
  cursor: pointer; overflow: hidden;
  transition: opacity 0.5s ease; transition-delay: 1.5s;
}

.cover-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 200%; 
  background-size: cover; background-position: top center;
  transform: translateY(0%);
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.cover-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  color: #000000; 
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 1s;
}

@keyframes pulseBlink {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

.click-instruction {
    font-size: 3rem; 
    font-weight: var(--fw-text);
	font-family: var(--font-title);         
    letter-spacing: 2px;      
    margin-top: 15px;         
    animation: pulseBlink 2s infinite ease-in-out; 
}

body.media-active .cover-bg { transform: translateY(-50%); }
body.media-active .cover-text { transform: translateY(-100%); opacity: 0; }
body.media-active #cover-group { pointer-events: none; opacity: 0; }
#hero.hide { opacity: 0; visibility: hidden; pointer-events: none; }
body.unlocked #hero { transform: scale(1.5); opacity: 0; visibility: hidden; }


/* =====================================================
   COMPTE À REBOURS (Aligné sur le texte)
===================================================== */
#countdown {
    background-color: var(--bg-overlay); /* Le même fond que l'image */
    border: 5px solid rgba(255, 255, 255, 0.4); /* Le même contour blanc transparent */
    border-radius: 8px; /* Les coins arrondis */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* La même petite ombre */
    padding: 10px 10px; /* J'ai ajusté le padding pour donner de l'air à l'intérieur de la boîte */

    display: flex;
    flex-wrap: nowrap;
    justify-content: center; /* Centre le bloc globalement */
    align-items: flex-start;
    
    /* 1. On limite la largeur à celle du texte (540px max) */
    width: 100%;
    max-width: 500px; 
    
    /* 2. Marges automatiques pour centrer le bloc */
    margin: 20px auto 20px auto;
    
    /* 3. On réduit l'écart pour que tout rentre */
    gap: clamp(5px, 2vw, 15px);
    
    font-family: var(--font-text);
    color: #F2EFDE;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    
    /* Sécurité anti-débordement */
    box-sizing: border-box;
}

.time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* Répartition équitable */
    min-width: 0; /* Permet de rétrécir si besoin */
}

.time-box span {
    /* Police réduite pour tenir dans les 500px max */
    font-size: clamp(1.2rem, 4.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
}

.time-box small {
    /* Texte en dessous ajusté */
    font-size: clamp(0.2rem, 0.7vw, 0.7rem);
    margin-top: 4px;
    opacity: 0.9;
    letter-spacing: 0.5px;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sep {
    /* Les deux points */
    font-size: clamp(1.2rem, 4.5vw, 2rem);
    font-weight: 700;
    line-height: 0.9;
    opacity: 0.8;
    margin-top: 2px;
}

/* Ajustement spécifique mobile très étroit */
@media (max-width: 380px) {
    #countdown { gap: 2px; padding: 0; }
    .time-box span { font-size: 1.1rem; }
}


/* =====================================================
   NAVIGATION & STRUCTURE
===================================================== */
#main-nav {
  position: fixed; top: 0; width: 100%; height: var(--nav-height);
  
  background-color: transparent;
  
  z-index: 1000;
  display: flex; justify-content: center; align-items: center;
  opacity: 0; transform: translateY(-100%); transition: transform 0.8s, opacity 0.8s; pointer-events: none;
  border-bottom: 1px solid rgba(255,255,255,0.2); 
}
body.unlocked #main-nav { opacity: 1; transform: translateY(0); pointer-events: auto; }

#main-nav ul { list-style: none; display: flex; gap: 30px; }
#main-nav a { 
    color: #000000; text-decoration: none; opacity: 0.7; transition: 0.4s; 
    font-weight: var(--fw-text); 
}
#main-nav a.active { 
    opacity: 1; font-weight: var(--fw-text); border-bottom: 1px solid #000000; 
}

#sections {
  position: absolute; width: 100%; top: 0; height: calc(var(--vh) * 100 * 4);
  transition: transform 1s cubic-bezier(0.77,0,0.175,1); background: transparent;
}

.section {
  min-height: 100vh; 
  min-height: 100dvh;
  width: 100%;
  display: flex; justify-content: center; align-items: center; 
  text-align: center;
  padding-top: var(--nav-height); padding-bottom: 20px;
  overflow: hidden;
}

/* --- PHOTO COUPLE & LÉGENDE --- */
.couple-photo-container {
    margin-top: 15px; 
    width: 100%;
    display: flex; flex-direction: column; align-items: center;
}

.couple-img {
    width: 100%; max-width: 300px; height: auto;
    border-radius: 15px; 
    border: 3px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    
    transition: transform 0.3s ease;
}

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

.photo-caption {
    margin-top: 15px; font-size: var(--fs-small); color: #1B3022; 
    font-weight: var(--fw-text); text-align: center !important; width: 100%;
}

/* --- CARTE COMMUNE --- */
.section-inner { 
    width: 94vw; max-width: 540px; margin: auto; 
    display: flex; flex-direction: column; align-items: center;
    
    background-color: color-mix(in srgb, var(--color-theme), transparent 10%);
    color: #1B3022;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);    
    border: 3px solid var(--color-gold) ; border-radius: 20px;                    
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    
    max-height: 80vh; 
    max-height: 80dvh; 
    margin-top: 10px;
    
    overflow-y: auto; -webkit-overflow-scrolling: touch; 
    padding: 35px 20px; 

    scrollbar-width: thin; scrollbar-color: var(--color-gold) transparent; 
}

/* --- GOOGLE MAPS --- */
.map-wrapper { 
    width: 100%; height: 350px; margin: 20px 0; border-radius: 15px; overflow: hidden; 
    border: 3px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.map-wrapper iframe { width: 100%; height: 100%; border: 0; }

.location-divider-img {
    display: block; margin: 15px auto; max-width: 100%; height: auto;        
    background-color: var(--bg-overlay); padding: 15px; border-radius: 8px; box-sizing: border-box; 
    border: 5px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* --- FORMULAIRE --- */
#contact form { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.form-group { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.form-group label { 
    font-size: var(--fs-text); font-weight: var(--fw-text); 
    color: #1B3022; text-align: center; 
}

input, textarea, select { 
    width: 100%; padding: 12px; border-radius: 8px; 
    border: 3px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    
    background: #1B3022; color: var(--color-theme); 
    font-size: var(--fs-text); font-weight: var(--fw-text);
}

input[type="text"], textarea { text-align: center; }

select {
    cursor: pointer; border: 3px solid rgba(255, 255, 255, 0.4); 
    background-color: #1B3022;
    text-align: center !important; text-align-last: center !important; -moz-text-align-last: center;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C4B3B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; padding-right: 30px;
    transition: all 0.3s ease;
}
select:hover { border-color: var(--color-gold); background-color: #1B3022; transform: translateY(-2px); }
select option { text-align: center; }

#msg-regret { color: var(--color-gold); font-weight: var(--fw-text); text-align: center; padding: 10px; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.btn-envoyer { 
    padding: 15px 40px; border-radius: 999px; 
    background: var(--color-gold); color: var(--color-theme); 
    border: 3px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    cursor: pointer; transition: transform 0.2s; 
    font-size: 1.3rem; letter-spacing: 1px; 
    font-family: var(--font-text); font-weight: var(--fw-text);
}
.btn-envoyer:active { transform: scale(0.95); }

#logic-group > div { margin-bottom: 20px; } 
#logic-group > div:last-child { margin-bottom: 0; }

.guest-card {
    display: flex; flex-direction: column; gap: 15px; 
    margin-bottom: 30px; padding-bottom: 30px;
    border-bottom: 1px dashed rgba(85, 0, 0, 0.2); 
}
.guest-card:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* --- BOUTONS --- */
.child-toggle {
    display: inline-block; padding: 12px 25px !important; font-size: 1.1rem;
    font-weight: var(--fw-text) !important;
    border: 2px solid var(--color-gold) !important; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    background: transparent !important;
    color: var(--color-gold) !important; border-radius: 999px; cursor: pointer;
    transition: all 0.3s ease; margin: 10px auto; min-width: 160px;
}
.child-toggle.active { background-color: var(--color-gold) !important; color: var(--color-theme) !important; }

.toggle-buttons-container { display: flex; justify-content: center; gap: 15px; margin-top: 5px; }
.help-toggle {
    flex: 1; padding: 12px 10px; font-size: 1.1rem; font-weight: var(--fw-text);
    border: 2px solid var(--color-gold); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    background: transparent; color: var(--color-gold);
    border-radius: 999px; cursor: pointer; transition: all 0.3s ease; text-align: center;
}
.help-toggle.active { background-color: var(--color-gold) ; color: var(--color-theme) ; }

.success-photo {
    display: block; margin: 20px auto; width: 100%; max-width: 350px; 
    height: auto; border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    animation: slideUpFade 1.2s ease-out forwards;
}
@keyframes slideUpFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* --- ACCORDÉON --- */
.accordion { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.accordion-item { 
    background: var(--bg-overlay); border-radius: 8px; overflow: hidden;
    border: 3px solid var(--color-gold); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.accordion-header { padding: 10px 15px; cursor: pointer; display: flex; align-items: center; justify-content: flex-start; }
.accordion-img { width: 100px; height: 100px; object-fit: contain; margin-right: 15px; flex-shrink: 0; }
.accordion-header .info-title { flex: 1; text-align: left; font-size: 2rem; margin-left: 5px; font-family: var(--font-title); color: var(--color-theme); }
.accordion-header .icon { font-weight: bold; color: var(--color-theme); font-size: 3rem; margin-left: 10px; }

.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.accordion-content .info-text { 
    padding: 15px; text-align: justify; 
    font-size: var(--fs-text); font-weight: var(--fw-text); color: var(--color-theme);
}

/* --- UI COMPONENTS --- */
#mute-btn { position: fixed; bottom: 20px; right: 20px; z-index: 2000; background: rgba(255, 255, 255, 0.8); border: 1px solid #ccc; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; }

#side-nav { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1000; opacity: 0; transition: 0.6s; pointer-events: none; }
body.unlocked #side-nav { opacity: 1; pointer-events: auto; }
#side-nav ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
#side-nav li { 
    width: 10px; height: 10px; border-radius: 50%; 
    background: rgba(255, 255, 255, 0.3); border: 1px solid var(--color-gold); 
    cursor: pointer; transition: 0.3s; 
}
#side-nav li.active { 
    background: var(--color-gold); border-color: var(--color-gold); transform: scale(1.6); 
}

/* =====================================================
   RESPONSIVE
===================================================== */
.welcome-surtitle { font-size: clamp(1.8rem, 10vw, 3rem); white-space: nowrap; font-family: var(--font-title); }

@media (max-width: 768px) {
  :root { --fs-h1: 10vw; --fs-h2: 1.5rem; }
  h1 { margin-top: -5vh; overflow: visible; }
  
.intro-logo { width: 80vw; }

    .hero-logo {
        width: 80vw; /* L'image prend 60% de la largeur de l'écran */
        margin-top: -5vh; /* Remonte légèrement l'image, comme l'ancien titre */
    }

  #main-nav { height: 48px; } #main-nav ul { gap: 10px; } #main-nav a { font-size: 0.8rem; }
  
  .section-inner { 
      width: 92vw; 
      margin: 15px auto; 
      padding: 25px 15px; 
  }
  
  #side-nav { 
      display: block !important; 
      right: 2px; 
  }
  #side-nav li { width: 8px; height: 8px; }

  .map-wrapper { height: 250px; margin: 15px 0; }
  .accordion-img { width: 55px; height: 55px; margin-right: 10px;}
  .accordion-header .info-title { font-size: 1.6rem; margin-left: 0; }
  
  #hero-content {
      padding-left: 20px; padding-right: 20px;
      width: 100%; box-sizing: border-box;
  }
  
  .click-instruction { font-size: 2rem; }
}

@media (max-width: 400px) {
    .toggle-buttons-container { flex-direction: column; }
}

/* =====================================================
   SÉLECTEUR DE LANGUE (INTRO)
===================================================== */
#language-screen {
    position: fixed; inset: 0; 
    z-index: 99999; 
    
    background-image: url('ciel_etoile_full.png'); 
    background-position: top center; 
    background-size: auto 200vh; 

    background-repeat: no-repeat;
    
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#language-screen::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    z-index: -1;
}

.lang-content {
    text-align: center;
    animation: fadeIn 1s ease;
}

.lang-content h2 {
    font-family: var(--font-title);
    font-size: clamp(2.5rem, 6vw, 4rem); 
    letter-spacing: 0.07em;
    color: var(--color-gold);
    margin-bottom: 40px; 
    line-height: 1.2;
}

.lang-buttons {
    display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
}

.btn-lang {
    padding: 15px 40px; 
    border-radius: 999px;
    border: 2px solid var(--color-gold);
    background: rgba(255, 255, 255, 0.5); 
    color: var(--color-gold);
    
    font-family: var(--font-text); 
    font-weight: 600; 
    font-size: 1.2rem;
    letter-spacing: 0.09em;
    cursor: pointer; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(128, 0, 32, 0.1);
}

.btn-lang:hover {
    background: var(--color-gold); 
    color: white; 
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(128, 0, 32, 0.3);
}

/* =====================================================
   LOGIQUE D'AFFICHAGE DES LANGUES
===================================================== */
.content-es { display: none !important; }

body.lang-es .content-fr { display: none !important; }
body.lang-es .content-es { display: inline !important; }

body.lang-es h1 .content-es,
body.lang-es h2 .content-es,
body.lang-es p .content-es,
body.lang-es .btn-envoyer .content-es {
    display: block !important; 
}

p .content-fr, p .content-es, 
label .content-fr, label .content-es,
button .content-fr, button .content-es {
    display: inline;
}
body.lang-es p .content-fr { display: none !important; }

body.lang-es #grp-brunch {
    display: none !important;
}

/* =====================================================
   FORCE SCROLLBAR (ASCENSEUR VISIBLE)
===================================================== */
.section-inner::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px; 
    display: block; 
}

.section-inner::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); 
    margin: 20px 0; 
    border-radius: 10px;
}

.section-inner::-webkit-scrollbar-thumb {
    background-color: var(--color-gold) !important; 
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.5); 
}

.section-inner {
    scrollbar-width: thin; 
    scrollbar-color: var(--color-gold) rgba(0, 0, 0, 0.05);
}