/*
Theme Name: Save the Date — Mariage Élégant
Theme URI: https://example.com
Author: Vous
Description: Thème WordPress une page pour un save-the-date de mariage élégant, avec compte à rebours, formulaire RSVP et espace invités protégé par code d'accès. Toutes les informations (prénoms, date, lieu, email, code) se règlent dans Apparence > Personnaliser.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mariage-save-the-date
*/

:root{
  --ivory:#FBF6EF;
  --ivory-deep:#F3EADC;
  --wine:#5C2A3A;
  --wine-deep:#401E29;
  --gold:#B08D57;
  --gold-light:#D9C2A0;
  --charcoal:#2E2620;
  --line: rgba(176,141,87,0.35);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:'Jost', sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

::selection{background:var(--gold-light);color:var(--wine-deep);}

h1,h2,h3,.serif{
  font-family:'Cormorant Garamond', serif;
  font-weight:400;
  letter-spacing:0.01em;
}

.eyebrow{
  font-family:'Jost', sans-serif;
  font-size:0.72rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--wine);
  font-weight:500;
}

a{color:inherit;text-decoration:none;}

img,svg{display:block;max-width:100%;}

/* ---------- top nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.4rem clamp(1.5rem,5vw,4rem);
  z-index:50;
  mix-blend-mode:difference;
  color:#fff;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.nav a{opacity:0.85;transition:opacity .3s;}
.nav a:hover{opacity:1;}
.nav .links{display:flex;gap:clamp(1rem,3vw,2.4rem);}
.nav .links a:focus-visible, a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6rem 1.5rem 4rem;
  background:
    radial-gradient(ellipse at 50% -10%, #6b3245 0%, var(--wine) 42%, var(--wine-deep) 100%);
  color:var(--ivory);
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}

.wreath{
  width:min(78vw, 460px);
  margin-bottom:0.5rem;
  animation:draw 2.6s ease forwards;
}
.wreath path, .wreath circle{
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  animation:draw 2.4s ease forwards;
}
@keyframes draw{ to { stroke-dashoffset:0; } }

.hero .eyebrow-top{
  color:var(--gold-light);
  margin-bottom:1.1rem;
  opacity:0;
  animation:fadeUp .9s ease .4s forwards;
}

.hero h1{
  font-size:clamp(2.8rem, 9vw, 6.4rem);
  line-height:0.95;
  font-weight:400;
  opacity:0;
  animation:fadeUp 1s ease .6s forwards;
}

.hero .amp{
  font-family:'Tangerine', cursive;
  font-size:clamp(3.6rem, 11vw, 8rem);
  color:var(--gold);
  display:block;
  line-height:0.7;
  margin:0.1em 0;
}

.hero .date-line{
  margin-top:1.8rem;
  font-size:clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ivory);
  opacity:0;
  animation:fadeUp 1s ease .85s forwards;
}
.hero .date-line strong{color:var(--gold-light);font-weight:500;}

.hero .place-line{
  margin-top:0.6rem;
  font-size:0.95rem;
  color:rgba(251,246,239,0.7);
  opacity:0;
  animation:fadeUp 1s ease 1.05s forwards;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}

.scroll-cue{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  width:1px;height:46px;
  background:linear-gradient(to bottom, transparent, var(--gold-light) 40%, transparent);
  opacity:0.7;
}
.scroll-cue::after{
  content:"";
  position:absolute;top:0;left:-2px;
  width:5px;height:5px;border-radius:50%;
  background:var(--gold-light);
  animation:slide 2.2s ease-in-out infinite;
}
@keyframes slide{
  0%{top:0;opacity:0;}
  20%{opacity:1;}
  80%{opacity:1;}
  100%{top:100%;opacity:0;}
}

/* ---------- countdown ---------- */
.countdown-section{
  padding:5rem 1.5rem;
  text-align:center;
  background:var(--ivory);
}
.countdown{
  display:flex;
  justify-content:center;
  gap:clamp(1rem,4vw,3rem);
  margin-top:2.2rem;
  flex-wrap:wrap;
}
.countdown .unit{min-width:84px;}
.countdown .num{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.4rem,6vw,3.6rem);
  color:var(--wine);
  line-height:1;
}
.countdown .label{
  margin-top:0.5rem;
  font-size:0.68rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--charcoal);
  opacity:0.6;
}
.divider{width:1px;height:38px;background:var(--line);align-self:center;}

/* ---------- section shared ---------- */
section{position:relative;}
.section-inner{max-width:920px;margin:0 auto;padding:5.5rem 1.5rem;}
.center{text-align:center;}
.rule{width:64px;height:1px;background:var(--gold);margin:1.4rem auto 0;}

/* ---------- message ---------- */
.message{background:var(--ivory-deep);}
.message p{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  line-height:1.6;
  color:var(--wine-deep);
  max-width:640px;
  margin:1.6rem auto 0;
}

/* ---------- details ---------- */
.details-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:2.6rem;
  margin-top:3rem;
  text-align:left;
}
.detail-card{
  padding:2rem 1.8rem;
  border:1px solid var(--line);
  border-radius:2px;
  background:#fff;
  position:relative;
}
.detail-card .icon{
  width:30px;height:30px;
  margin-bottom:1rem;
  stroke:var(--wine);
  fill:none;
  stroke-width:1.2;
}
.detail-card h3{font-size:1.35rem;color:var(--wine-deep);margin-bottom:0.5rem;}
.detail-card p{font-size:0.92rem;line-height:1.6;color:var(--charcoal);opacity:0.85;}

/* ---------- rsvp form ---------- */
.rsvp-form{
  max-width:560px;
  margin:3rem auto 0;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}
.form-row-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}
@media (max-width:520px){
  .form-row-pair{grid-template-columns:1fr;}
}
.conditional-field{
  padding:1.2rem 1.2rem 0.2rem;
  margin:-0.5rem 0 0;
  border-left:2px solid var(--gold-light);
  background:var(--ivory-deep);
}
.conditional-field[hidden]{display:none;}
.form-error{
  color:#8a2d2d;
  font-size:0.82rem;
  text-align:center;
  min-height:1.2em;
}
.btn-solid[disabled]{opacity:0.55;cursor:default;}
.form-row{display:flex;flex-direction:column;gap:0.55rem;text-align:left;}
.form-row label{
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--wine);
  font-weight:500;
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row textarea{
  font-family:'Jost', sans-serif;
  font-size:0.95rem;
  color:var(--charcoal);
  padding:0.8rem 1rem;
  border:1px solid var(--line);
  background:#fff;
  border-radius:2px;
  resize:vertical;
}
.form-row input:focus,
.form-row textarea:focus{outline:2px solid var(--gold);outline-offset:1px;}
.radio-group{display:flex;flex-direction:column;gap:0.6rem;}
.radio-option{display:flex;align-items:center;gap:0.6rem;font-size:0.92rem;color:var(--charcoal);cursor:pointer;}
.radio-option input{accent-color:var(--wine);width:16px;height:16px;}

.btn-solid{
  align-self:center;
  margin-top:0.6rem;
  background:var(--wine);
  color:var(--ivory);
  border-color:var(--wine);
}
.btn-solid:hover{background:var(--wine-deep);border-color:var(--wine-deep);color:var(--ivory);}

.rsvp-confirm{max-width:560px;margin:3rem auto 0;text-align:center;display:none;}
.rsvp-confirm.visible{display:block;}
.rsvp-confirm .check{width:40px;height:40px;margin:0 auto 1rem;stroke:var(--wine);fill:none;stroke-width:1.3;}
.rsvp-confirm p{font-family:'Cormorant Garamond', serif;font-size:1.3rem;color:var(--wine-deep);}

/* ---------- rsvp banner / password gate ---------- */
.rsvp{
  background:linear-gradient(180deg, var(--wine-deep), var(--wine));
  color:var(--ivory);
  text-align:center;
}
.rsvp .eyebrow{color:var(--gold-light);}
.rsvp h2{font-size:clamp(2rem,4.4vw,2.8rem);margin-top:0.6rem;}
.rsvp p.lead{
  max-width:520px;margin:1.1rem auto 0;
  font-size:0.98rem;line-height:1.7;
  color:rgba(251,246,239,0.75);
}

.btn{
  display:inline-block;
  margin-top:2.4rem;
  padding:0.95rem 2.6rem;
  border:1px solid var(--gold);
  color:var(--ivory);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  background:transparent;
  cursor:pointer;
  transition:background .35s ease, color .35s ease;
}
.btn:hover{background:var(--gold);color:var(--wine-deep);}

/* modal */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(46,38,32,0.55);
  backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  z-index:100;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.modal-overlay.open{opacity:1;pointer-events:auto;}

.modal{
  background:var(--ivory);
  max-width:420px;width:100%;
  padding:2.6rem 2.2rem;
  border-radius:3px;
  text-align:center;
  position:relative;
  transform:translateY(14px);
  transition:transform .35s ease;
  box-shadow:0 30px 60px rgba(0,0,0,0.3);
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal h3{font-size:1.6rem;color:var(--wine-deep);}
.modal p{font-size:0.88rem;color:var(--charcoal);opacity:0.75;margin-top:0.6rem;line-height:1.6;}
.modal input[type="password"]{
  width:100%;margin-top:1.6rem;padding:0.85rem 1rem;
  border:1px solid var(--line);background:#fff;
  font-family:'Jost',sans-serif;font-size:0.95rem;letter-spacing:0.08em;
  text-align:center;color:var(--charcoal);
}
.modal input[type="password"]:focus{outline:2px solid var(--gold);outline-offset:2px;}
.modal .error-msg{color:#8a2d2d;font-size:0.78rem;margin-top:0.7rem;min-height:1em;}
.modal .modal-actions{display:flex;gap:0.7rem;margin-top:1.6rem;}
.modal .btn{margin-top:0;flex:1;border-color:var(--wine);color:var(--wine-deep);}
.modal .btn:hover{background:var(--wine);color:var(--ivory);}
.modal .btn.ghost{border-color:var(--line);color:var(--charcoal);opacity:0.7;}
.modal .btn.ghost:hover{background:transparent;color:var(--charcoal);opacity:1;}

.close-x{
  position:absolute;top:0.9rem;right:1rem;
  background:none;border:none;
  font-size:1.3rem;color:var(--charcoal);
  cursor:pointer;opacity:0.5;
  font-family:'Jost',sans-serif;
}
.close-x:hover{opacity:1;}

.shake{animation:shake .4s;}
@keyframes shake{
  20%,60%{transform:translateX(-6px);}
  40%,80%{transform:translateX(6px);}
}

/* ---------- guest area (revealed) ---------- */
#guest-area{display:none;background:var(--ivory-deep);border-top:1px solid var(--line);}
#guest-area.visible{display:block;}
#guest-area .badge{
  display:inline-block;
  font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--wine);
  border:1px solid var(--gold);
  padding:0.35rem 0.9rem;
  border-radius:20px;
  margin-bottom:1.2rem;
}

/* ---------- guest area subsections (hébergement / transport) ---------- */
.guest-subsection{
  max-width:760px;
  margin:0 auto;
  text-align:left;
}
.guest-subsection-intro{
  font-size:0.94rem;
  line-height:1.7;
  color:var(--charcoal);
  opacity:0.85;
  margin-top:0.8rem;
  max-width:560px;
}
.lodging-list{
  list-style:none;
  margin-top:1.6rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.lodging-list li{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  padding:1rem 1.3rem;
  background:#fff;
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:2px;
}
.lodging-name{
  font-family:'Cormorant Garamond', serif;
  font-size:1.2rem;
  color:var(--wine-deep);
}
.lodging-meta{
  font-size:0.82rem;
  color:var(--charcoal);
  opacity:0.65;
}
.guest-subsection-note{
  font-size:0.8rem;
  color:var(--charcoal);
  opacity:0.55;
  margin-top:1rem;
  font-style:italic;
}

/* ---------- footer ---------- */
footer.site-footer{
  padding:3.5rem 1.5rem 2.5rem;
  text-align:center;
  background:var(--wine-deep);
  color:rgba(251,246,239,0.55);
  font-size:0.78rem;
  letter-spacing:0.08em;
}
footer.site-footer .amp-small{
  font-family:'Tangerine',cursive;
  font-size:2.2rem;
  color:var(--gold-light);
  display:block;
  margin-bottom:0.6rem;
}

/* ---------- WordPress defaults reset (au cas où le thème parent en ajoute) ---------- */
.wp-site-blocks, #page{overflow-x:hidden;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}