/* ============================================================
   STYLE DES PAGES « Les convives » et « Message vidéo »
   (mêmes couleurs et polices que la page d'accueil)
   ============================================================ */
:root{
  --creme:#fdfbf6;
  --beige:#f5efe4;
  --beige-fonce:#ece3d2;
  --sauge:#8a9b7d;
  --sauge-clair:#b5c2a8;
  --sauge-fonce:#5e6f52;
  --dore:#bfa46f;
  --encre:#4c4a42;
  --encre-douce:#6f6d63;
  --blanc:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Jost',sans-serif;font-weight:300;
  color:var(--encre);background:var(--creme);
  line-height:1.7;min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1;}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;}
a{color:inherit;}

/* ============ MENU ============ */
.barre{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 2rem;
  background:rgba(253,251,246,.96);backdrop-filter:blur(8px);
  box-shadow:0 2px 20px rgba(76,74,66,.08);
}
.barre .logo{
  font-family:'Great Vibes',cursive;font-size:1.7rem;
  color:var(--sauge-fonce);text-decoration:none;white-space:nowrap;
}
.barre ul{display:flex;gap:1.6rem;list-style:none;flex-wrap:wrap;justify-content:center;}
.barre ul a{
  text-decoration:none;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.barre ul a:hover{color:var(--dore);border-color:var(--dore);}
.barre ul a.actif{color:var(--sauge-fonce);border-color:var(--sauge);font-weight:400;}
@media(max-width:760px){
  .barre{flex-direction:column;gap:.2rem;padding:.6rem 1rem .7rem;}
  .barre .logo{font-size:1.5rem;}
  .barre ul{gap:.35rem 1rem;}
  .barre ul a{font-size:.7rem;letter-spacing:.08em;}
}

/* ============ BANDEAU EN HAUT DE PAGE ============ */
.bandeau{
  position:relative;min-height:clamp(230px, 36vh, 340px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--blanc);padding:3rem 1.5rem;
  background:url('photos/couple-hero.jpg') center 30%/cover no-repeat;
}
.bandeau::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(60,62,50,.45), rgba(60,62,50,.6));
}
.bandeau > div{position:relative;z-index:2;}
.bandeau .sur-titre{
  font-family:'Great Vibes',cursive;font-size:clamp(1.6rem, 4vw, 2.2rem);
  color:#efe3c4;display:block;
}
.bandeau h1{
  font-size:clamp(1.9rem, 5vw, 2.8rem);letter-spacing:.22em;
  text-transform:uppercase;line-height:1.2;
}
.bandeau p{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(1.05rem, 2.4vw, 1.25rem);margin-top:.6rem;opacity:.95;
}

/* ============ CONTENU ============ */
.contenu{width:100%;max-width:1050px;margin:0 auto;padding:3.5rem 1.5rem 4.5rem;animation:apparait .7s ease;}
@keyframes apparait{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.intro{
  text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.2rem;color:var(--encre-douce);max-width:620px;margin:0 auto 2.2rem;
}
.vide{
  text-align:center;color:var(--encre-douce);background:var(--blanc);
  border-radius:14px;padding:2.5rem 1.5rem;font-style:italic;
  box-shadow:0 8px 24px rgba(76,74,66,.08);
}
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:400;
  font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;
  padding:1rem 2.4rem;border-radius:50px;border:none;
  background:var(--sauge-fonce);color:var(--blanc);
  transition:transform .3s, box-shadow .3s, opacity .3s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(94,111,82,.4);}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;}

/* ============ PAGE « LES CONVIVES » ============ */
.stats{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.2rem;}
.stat{
  background:var(--blanc);border-radius:14px;padding:1rem 1.6rem;text-align:center;
  box-shadow:0 8px 24px rgba(76,74,66,.08);min-width:125px;
}
.stat .nombre{font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--sauge-fonce);line-height:1;}
.stat .libelle{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-douce);margin-top:.4rem;}
@media(max-width:560px){
  .stats{gap:.6rem;flex-wrap:nowrap;}
  .stat{flex:1;min-width:0;padding:.9rem .4rem;}
  .stat .libelle{font-size:.62rem;letter-spacing:.08em;}
}

.recherche{
  display:block;width:100%;max-width:420px;margin:0 auto 2rem;
  padding:.8rem 1.1rem;border:1px solid var(--beige-fonce);border-radius:50px;
  font-family:'Jost',sans-serif;font-size:1rem;color:var(--encre);background:var(--blanc);
}
.recherche:focus{outline:none;border-color:var(--sauge);box-shadow:0 0 0 3px rgba(138,155,125,.15);}

.grille-convives{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));gap:1.2rem;
}
.carte{
  background:var(--blanc);border-radius:14px;padding:1.4rem 1.5rem 1.3rem;
  box-shadow:0 10px 30px rgba(76,74,66,.08);border-top:3px solid var(--sauge-clair);
}
.carte h3{font-size:1.45rem;color:var(--sauge-fonce);line-height:1.2;}
.carte .mail{
  display:inline-block;font-size:.88rem;color:var(--encre-douce);
  margin-top:.25rem;word-break:break-all;text-decoration:none;
}
.carte .mail:hover{color:var(--sauge-fonce);text-decoration:underline;}
.carte ul{list-style:none;margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--beige);}
.carte li{font-size:.93rem;margin-bottom:.3rem;}
.badge{
  display:inline-block;background:var(--beige);border-radius:20px;
  padding:.05rem .6rem;font-size:.72rem;color:var(--sauge-fonce);margin-right:.35rem;
}
.aucun-resultat{display:none;text-align:center;color:var(--encre-douce);font-style:italic;margin-top:1rem;}

/* ============ PAGE « MESSAGE VIDÉO » ============ */
.boite{
  background:var(--blanc);max-width:620px;margin:0 auto;
  border-radius:18px;padding:2.6rem clamp(1.3rem,5vw,3rem);
  box-shadow:0 18px 55px rgba(76,74,66,.14);border-top:4px solid var(--sauge-clair);
}
.boite label.champ{display:block;font-size:.9rem;margin-bottom:.35rem;}
.boite input[type=email], .boite input[type=text]{
  width:100%;padding:.8rem 1rem;margin-bottom:.5rem;
  border:1px solid var(--beige-fonce);border-radius:10px;
  font-family:'Jost',sans-serif;font-size:1rem;color:var(--encre);background:var(--creme);
}
.boite input[type=email]:focus, .boite input[type=text]:focus{outline:none;border-color:var(--sauge);box-shadow:0 0 0 3px rgba(138,155,125,.15);}
.aide{font-size:.8rem;color:var(--encre-douce);margin-bottom:1.4rem;}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Zone de choix du fichier */
.zone-fichier{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  border:1.5px dashed var(--sauge);border-radius:14px;background:var(--creme);
  padding:1.8rem 1rem;text-align:center;cursor:pointer;margin-bottom:.6rem;position:relative;
  transition:background .3s, border-color .3s;
}
.zone-fichier:hover, .zone-fichier.survol{background:rgba(138,155,125,.08);border-color:var(--sauge-fonce);}
.zone-fichier .icone{font-size:2rem;line-height:1;}
.zone-fichier strong{font-weight:400;color:var(--sauge-fonce);letter-spacing:.05em;}
.zone-fichier span{font-size:.82rem;color:var(--encre-douce);}
.zone-fichier input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.zone-fichier.choisi{border-style:solid;background:rgba(138,155,125,.08);}

.boite .btn{width:100%;margin-top:.6rem;}

/* Barre de progression */
.progression{display:none;margin-top:1.4rem;}
.progression.visible{display:block;}
.piste{height:12px;background:var(--beige);border-radius:20px;overflow:hidden;}
.remplissage{height:100%;width:0;background:linear-gradient(90deg, var(--sauge), var(--sauge-fonce));border-radius:20px;transition:width .3s ease;}
.progression p{text-align:center;font-size:.88rem;color:var(--encre-douce);margin-top:.5rem;}

.message{display:none;margin-top:1.2rem;padding:1rem 1.1rem;border-radius:10px;font-size:.92rem;text-align:center;}
.message.visible{display:block;}
.message.erreur{background:#faf0ec;color:#9c5b45;}

/* Écran de remerciement */
.merci{display:none;text-align:center;}
.merci.visible{display:block;animation:apparait .7s ease;}
.merci .coeur{font-size:2.2rem;display:block;margin-bottom:.6rem;}
.merci h2{font-size:clamp(1.9rem,5vw,2.5rem);letter-spacing:.18em;color:var(--sauge-fonce);margin-bottom:.8rem;}
.merci p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.2rem;color:var(--encre-douce);margin-bottom:.8rem;}
.merci .btn{margin-top:1rem;width:auto;}

/* ============ PIED DE PAGE ============ */
footer{background:var(--sauge-fonce);color:rgba(255,255,255,.9);text-align:center;padding:2.6rem 1.5rem;}
footer .prenoms{font-family:'Great Vibes',cursive;font-size:2.1rem;margin-bottom:.3rem;}
footer .date{letter-spacing:.3em;font-size:.82rem;opacity:.85;}

@media (prefers-reduced-motion: reduce){
  .contenu, .merci.visible{animation:none;}
}