/* -------------------------------------------------------
   STYLE FINAL — css/style.css
   Objectif : cohérence, robustesse responsive, esthétique festive
   Inclut styles pour FAQ et bloc covoiturage
------------------------------------------------------- */

:root{
  --color-bg:#F7F3EE;
  --color-dark:#0B1E3A;
  --color-accent:#3A7BFF;
  --color-accent-2:#FF6F61;
  --color-accent-light:#E8F0FF;
  --color-white:#FFFFFF;
  --color-muted:#6A7A90;

  --radius:14px;
  --shadow:0 10px 30px rgba(11,30,58,0.08);
  --glass: rgba(255,255,255,0.6);

  --font-main:"Poppins",sans-serif;
  --font-script:"Dancing Script",cursive;

  --transition: 220ms cubic-bezier(.2,.9,.3,1);
}

/* GLOBAL */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-main);
  background:linear-gradient(180deg,var(--color-bg),#FBF9F7);
  color:var(--color-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}

.container{
  width:min(1100px,94%);
  margin:0 auto;
}

/* Utilities */
.muted{color:var(--color-muted)}
.section-title{
  font-size:2.2rem;
  font-weight:700;
  margin:36px 0 28px; /* espace constant au-dessus et en-dessous */
  text-align:center;
}
.card-title{font-size:1.05rem;margin:0 0 8px}

/* HERO */
.hero-modern{
  position:relative;
  padding:96px 0 64px;
  overflow:hidden;
  border-bottom-left-radius:40px;
  border-bottom-right-radius:40px;
  box-shadow:0 8px 40px rgba(11,30,58,0.06);
  background:linear-gradient(135deg,#0B1E3A,#10294F);
  color:var(--color-white);
}

.hero-modern::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(11,30,58,0.92), rgba(16,41,79,0.86));
  z-index:0;
}

.hero-photo{
  width:420px;height:280px;border-radius:18px;
  background-image:url('../images/hero-photo.jpg');
  background-size:cover;background-position:center;
  box-shadow:0 18px 50px rgba(11,30,58,0.28);
  transform:translateY(0);
  transition:transform var(--transition);
  flex:0 0 420px;
  z-index:1;
  filter:contrast(1.02) saturate(1.05);
}

.hero-inner{
  position:relative;
  z-index:2;
  display:flex;
  gap:36px;
  align-items:center;
  justify-content:space-between;
}

.hero-text{max-width:60%}
.hero-title{
  font-size:2.6rem;
  font-weight:800;
  margin:0 0 8px;
  line-height:1.02;
  color:var(--color-white);
}
.accent-name{
  display:inline-block;
  font-family:var(--font-script);
  font-size:2.8rem;
  color:var(--color-accent);
  margin-left:6px;
}
.hero-subtitle{
  margin:0 0 22px;color:rgba(255,255,255,0.95);font-weight:600;
}

/* Actions */
.hero-actions{display:flex;gap:14px}
.btn-primary,.btn-outline{
  padding:12px 22px;border-radius:12px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:0;
  justify-content:center; /* assure centrage du texte */
  text-align:center;
}
.btn-primary{
  background:linear-gradient(90deg,var(--color-accent),#2E6BFF);
  color:var(--color-white);
  box-shadow:0 12px 30px rgba(58,123,255,0.18);
}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(58,123,255,0.22)}
.btn-outline{
  background:transparent;color:var(--color-white);border:2px solid rgba(255,255,255,0.14)
}
.btn-outline:hover{background:var(--glass);color:var(--color-white)}

/* CARDS GRID */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-top:18px;
}

.card{
  background:var(--color-white);
  padding:20px;border-radius:12px;
  box-shadow:var(--shadow);
  transition:transform var(--transition),box-shadow var(--transition);
  text-align:center; /* centre titres et paragraphes */
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(11,30,58,0.10)}
.map-wrap iframe{width:100%;height:180px;border:0;border-radius:8px}

/* FAQ grid */
.faq-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;
  margin-top:12px;
}

/* ACTIVITIES */
.activities-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:12px;
}
.activity .activity-media{
  height:110px;border-radius:10px;background:linear-gradient(135deg,var(--color-accent-light),#FFF);margin-bottom:12px;box-shadow:inset 0 -6px 18px rgba(0,0,0,0.03)
}
.activity{ text-align:center }

/* COUNTDOWN - robust */
.countdown-container{
  display:flex;
  flex-wrap:wrap;            /* autorise le retour à la ligne si nécessaire */
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-weight:800;
  color:var(--color-accent);
  font-size:1.05rem;
  justify-content:center;    /* centre le countdown dans la carte */
  max-width:100%;
  overflow:hidden;
}

.count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;            /* réduit la largeur minimale pour tenir */
  padding:8px 10px;
  border-radius:10px;
  background:linear-gradient(180deg,#fff,#f3f7ff);
  color:var(--color-dark);
  box-shadow:0 6px 18px rgba(11,30,58,0.06);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

.count-label{margin-left:6px;color:var(--color-muted);font-weight:600}
.sep{opacity:0.6;margin:0 6px;color:var(--color-muted)}
.countdown-container.finished .count{background:linear-gradient(90deg,#fff,#f7f7f7);color:var(--color-dark)}

/* FORM */
.form-modern{
  display:grid;gap:16px;max-width:680px;margin:0 auto;padding-top:6px;
}
.form-modern label{display:flex;flex-direction:column;font-weight:700;color:var(--color-dark);text-align:left}
.form-modern input,.form-modern select,.form-modern textarea{
  margin-top:8px;padding:12px;border-radius:10px;border:1px solid #E6E9F0;background:#fff;font-size:1rem;transition:box-shadow var(--transition),border-color var(--transition)
}
.form-modern input:focus,.form-modern select:focus,.form-modern textarea:focus{
  outline:none;border-color:var(--color-accent);box-shadow:0 6px 20px rgba(58,123,255,0.12)
}

/* Centrage visuel du formulaire (titres) mais champs alignés à gauche pour lisibilité */
#rsvp .section-title, .form-modern { text-align:center; }
.form-modern label { text-align:left; }

.consent{display:flex;align-items:center;gap:12px;font-weight:600}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;justify-content:center}
.form-feedback{margin-top:8px;font-weight:700}

/* Mailto visible on light background */
.form-actions .btn-outline{
  border:2px solid var(--color-accent);
  color:var(--color-accent);
  background:transparent;
  box-shadow:none;
}
.form-actions .btn-outline:hover{
  background:var(--color-accent);
  color:var(--color-white);
  transform:translateY(-3px);
}

/* Covoiturage specific */
fieldset.card{border:1px solid #EEF2FF;padding:14px;margin:0;border-radius:10px;text-align:left}
.carpool-options{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}
.carpool-options label{font-weight:600;display:inline-flex;align-items:center;gap:8px}

/* FOOTER */
.footer{background:var(--color-dark);color:var(--color-white);padding:48px 0;text-align:center;border-top-left-radius:20px;border-top-right-radius:20px;margin-top:40px}
.footer a{color:var(--color-accent);font-weight:700;text-decoration:none}

/* RESPONSIVE - robust across breakpoints */
@media (max-width:980px){
  .hero-inner{flex-direction:column;align-items:center;text-align:center;padding:0 8px}
  .hero-text{max-width:100%}
  .hero-photo{width:320px;height:220px}
  .accent-name{font-size:2.2rem}
}

/* Ensure hero title and buttons remain centered between 641px and 980px */
@media (min-width:641px) and (max-width:980px){
  .hero-inner{
    flex-direction:column;        /* stack hero text and photo vertically */
    align-items:center;
    justify-content:center;
    gap:20px;
    text-align:center;
  }
  .hero-text{
    max-width:820px;              /* allow comfortable wrapping */
    margin:0 auto;
    text-align:center;            /* center the title and subtitle */
  }
  .hero-actions{
    justify-content:center;       /* center the buttons group */
    width:auto;
    display:flex;
    gap:14px;
    margin-top:8px;
  }
  .hero-photo{
    order:2;                      /* keep photo below text for balanced layout */
    flex:0 0 320px;
    margin:0;
  }
}

/* Mobile adjustments */
@media (max-width:640px){
  .hero-photo{display:none}
  .hero-title{font-size:1.8rem}
  .section-title{font-size:1.6rem}
  .cards-grid{gap:14px}
  .form-actions{flex-direction:column}
  .btn-primary,.btn-outline{
    width:100%;
    justify-content:center; /* assure centrage du texte */
    text-align:center;
  }
  .count{min-width:34px;padding:6px 8px;font-size:0.95rem}
  .count-label{display:none} /* économise de l'espace si nécessaire */
}

/* Tweak around 568px to avoid overflow */
@media (max-width:600px) and (min-width:569px){
  .countdown-container{justify-content:flex-start;gap:6px}
  .count{min-width:36px;padding:6px 8px}
}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}