:root{
  --gold: #F3C63B;
  --gold-deep: #C9891F;
  --cream: #FFFBF2;
  --ink: #211B12;
  --ember: #E24E2B;
  --denim: #4C7096;
  --paper-shadow: rgba(33,27,18,.18);
  --radius-blob: 255px 15px 225px 15px/15px 225px 15px 255px;
}

/* IMPORTANT : garantit que l'attribut HTML "hidden" cache toujours l'élément,
   même si une règle plus bas définit un display:flex/grid pour ce même élément. */
[hidden]{display:none !important;}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--gold);
  color:var(--ink);
  font-family:'Nunito',sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

button{font-family:inherit; cursor:pointer; border:none; background:none;}
input, select{font-family:inherit;}

.hand-title{
  font-family:'Caveat',cursive;
  font-weight:700;
  font-size:2.5rem;
  line-height:1.15;
  margin:0 0 .6em;
  color:var(--ink);
}

/* ---------------- Views ---------------- */
.view{
  position:fixed; inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.view.is-active{display:flex;}

/* ---------------- Intro ---------------- */
.view-intro{background:var(--gold); z-index:50;}
.intro-bg{
  position:absolute; inset:0;
  background:url('../assets/bg-mobile.svg') center/cover no-repeat;
  animation:intro-zoom 3.7s ease-out forwards;
}
@media (min-width:700px){
  .intro-bg{ background-image:url('../assets/bg-wide.svg'); }
}
@keyframes intro-zoom{
  0%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}
.intro-fade{
  position:absolute; inset:0;
  background:var(--cream);
  opacity:0;
  transition:opacity 1.4s ease;
}
.intro-fade.show{opacity:1;}

/* ---------------- Top bar ---------------- */
.topbar{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 0;
  z-index:40;
  pointer-events:none;
}
.topbar > *{pointer-events:auto;}
.topbar-brand{display:flex; align-items:center; gap:8px;}
.topbar-logo{width:38px; height:38px; border-radius:50%; object-fit:cover; box-shadow:0 2px 8px var(--paper-shadow); background:var(--cream); cursor:pointer;}
.topbar-insta{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--ink);
  box-shadow:0 2px 8px var(--paper-shadow);
}
.lang-toggle{
  margin-left:auto;
  background:var(--cream);
  color:var(--ink);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.03em;
  padding:8px 14px;
  border-radius:999px;
  box-shadow:0 2px 8px var(--paper-shadow);
}

/* ---------------- Home ---------------- */
/* Fond blanc : l'intro se termine sur un fondu vers --cream, l'accueil garde donc
   la même teinte pour que l'arrivée sur la page se fasse sans rupture. */
.view-home{
  background:var(--cream);
  justify-content:center;
  padding:90px 24px 48px;
  text-align:center;
}
.home-logo{width:120px; height:120px; object-fit:contain; margin-bottom:8px;}
.view-home .hand-title{font-size:2.6rem;}
.home-sub{margin:0 0 28px; opacity:.75; font-size:1rem;}

.home-choices{display:flex; flex-direction:column; gap:18px; width:100%; max-width:340px;}
.choice-btn{
  display:flex; align-items:center; gap:14px;
  padding:18px 24px;
  border-radius:var(--radius-blob);
  font-weight:800; font-size:1.15rem;
  text-decoration:none; color:var(--cream);
  box-shadow:0 6px 0 rgba(0,0,0,.12);
  transition:transform .15s ease;
}
.choice-btn:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.12);}
.choice-icon{font-size:1.5rem; width:32px; text-align:center;}
.choice-pro{background:var(--ink);}
.choice-homme{background:var(--denim);}
.choice-femme{background:var(--ember);}
.symbol-mars, .symbol-venus{font-family:'Nunito',sans-serif; font-weight:800;}

.home-lang-note{margin-top:34px; font-size:.9rem; opacity:.6;}

/* ---------------- Femme funnel shared ---------------- */
.view-femme{background:var(--cream);}
.step{
  position:relative;
  width:100%; min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:100px 24px 60px;
}
.step-inner{
  position:relative; z-index:2;
  width:100%; max-width:380px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.field-label{align-self:flex-start; font-weight:700; font-size:.9rem; margin-top:6px;}

.input-datetime, .text-input, .select-input{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:2px solid var(--gold-deep);
  background:#fff;
  font-size:1rem;
  color:var(--ink);
}
.name-row, .contact-row{display:flex; gap:10px; width:100%;}
.name-row .text-input{width:50%;}
.contact-row .select-input{flex:0 0 42%;}
.contact-row .text-input{flex:1;}

.age-check{
  display:flex; align-items:center; gap:10px;
  align-self:flex-start;
  font-weight:700; font-size:.95rem;
  margin-top:4px;
}
.age-check input{width:20px; height:20px; accent-color:var(--ember);}

.btn-tonight{
  background:var(--gold);
  border:2px solid var(--gold-deep);
  padding:10px 18px;
  border-radius:999px;
  font-weight:800;
}
.btn-next{
  margin-top:12px;
  width:100%;
  padding:16px;
  border-radius:var(--radius-blob);
  background:var(--ember);
  color:#fff;
  font-weight:800; font-size:1.05rem;
  box-shadow:0 6px 0 rgba(0,0,0,.12);
  transition:opacity .2s, transform .15s;
}
.btn-next:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.12);}
.btn-next:disabled{opacity:.4; box-shadow:none;}
.btn-secondary{
  background:#fff;
  color:var(--ink);
  border:2px solid var(--gold-deep);
  box-shadow:none;
  margin-top:10px;
}
.btn-secondary:active{transform:translateY(3px);}

.lieu-field{width:100%; text-align:left; margin-top:6px;}
.lieu-field .field-label{margin-top:0;}
.lieu-field.is-required #lieu-label::after{content:" *"; color:var(--ember);}
.lieu-hint{
  font-size:.82rem;
  color:var(--ember);
  font-weight:700;
  margin:6px 0 0;
}
/* Repli affiché après un clic sur "Ajouter à mon agenda" */
.cal-fallback{
  font-size:.82rem;
  color:var(--ink);
  opacity:.75;
  margin:10px 0 0;
  line-height:1.5;
}
.cal-google-link{
  color:var(--gold-deep);
  font-weight:800;
  text-decoration:underline;
  white-space:nowrap;
}
.form-error{
  width:100%; text-align:left;
  font-size:.85rem; font-weight:700;
  color:var(--ember);
  background:#fff3ec;
  border:2px solid var(--ember);
  border-radius:14px;
  padding:10px 14px;
  margin:4px 0 0;
}

/* ---- Step: Ask ---- */
#step-ask{overflow:hidden;}
.ask-buttons{margin:18px 0 40px;}
.btn-yes{
  padding:26px 54px;
  font-size:1.6rem; font-weight:800;
  color:#fff; background:var(--ember);
  border-radius:var(--radius-blob);
  box-shadow:0 8px 0 rgba(0,0,0,.15);
  transform:rotate(-2deg);
  transition:transform .15s;
}
.btn-yes:active{transform:translateY(4px) rotate(-2deg); box-shadow:0 4px 0 rgba(0,0,0,.15);}
.btn-no{
  position:fixed;
  padding:8px 16px;
  font-size:.85rem; font-weight:700;
  color:var(--ink); background:var(--cream);
  border:2px solid var(--gold-deep);
  border-radius:999px;
  z-index:5;
  transition:top .35s ease, left .35s ease;
}

/* floating hand-drawn hearts */
.hearts-field{
  position:absolute; inset:0; z-index:1;
  overflow:hidden; pointer-events:none;
}
.heart{
  position:absolute;
  bottom:-60px;
  width:34px; height:34px;
  opacity:.55;
  animation-name:heart-rise;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.heart svg{width:100%; height:100%; display:block; animation:heart-bob 1.4s ease-in-out infinite;}
@keyframes heart-rise{
  0%{ transform:translateY(0); opacity:0; }
  8%{ opacity:.6; }
  92%{ opacity:.5; }
  100%{ transform:translateY(-115vh); opacity:0; }
}
@keyframes heart-bob{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-14px) scale(.96); }
}

/* ---- Ideas grid ---- */
.ideas-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  width:100%; margin-bottom:6px;
}
.idea-card{
  padding:14px 10px;
  border-radius:20px;
  border:2px solid var(--gold-deep);
  background:#fff;
  font-weight:700; font-size:.88rem;
  line-height:1.25;
  text-align:center;
  transition:background .15s, color .15s, transform .1s;
}
.idea-card .idea-emoji{display:block; font-size:1.5rem; margin-bottom:4px;}
.idea-card.selected{
  background:var(--ember); color:#fff; border-color:var(--ember);
  transform:scale(1.03);
}

/* ---- Done ---- */
.done-icon{font-size:3rem;}

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(33,27,18,.45);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal-box{
  background:var(--cream);
  border-radius:26px;
  padding:30px 24px;
  max-width:320px; width:100%;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.modal-title{font-size:1.8rem; margin-bottom:20px;}
.modal-actions{display:flex; gap:14px; justify-content:center;}
.modal-yes, .modal-no{
  padding:12px 26px;
  border-radius:999px;
  font-weight:800;
}
.modal-yes{background:var(--ember); color:#fff;}
.modal-no{background:#fff; border:2px solid var(--gold-deep); color:var(--ink);}

/* ---------------- Page transition fade ---------------- */
.page-fade{
  position:fixed; inset:0; z-index:70;
  background:var(--cream);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.page-fade.show{opacity:1;}

/* small screens tweak */
@media (max-width:340px){
  .view-home .hand-title{font-size:2.2rem;}
  .btn-yes{padding:22px 40px; font-size:1.35rem;}
}

.lieu-hint{color:var(--ink); font-weight:600;}
.lieu-bypass{font-size:.82rem; margin:4px 0 0; opacity:.8;}
.lieu-bypass a, .form-error a{color:var(--ember); font-weight:800;}

.lieu-field{position:relative;}
.precision-label{margin-top:10px;}
.lieu-suggest{
  position:absolute; left:0; right:0; z-index:20;
  margin:4px 0 0; padding:4px; list-style:none;
  background:#fff; border:2px solid var(--gold-deep); border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  max-height:240px; overflow-y:auto;
}
.lieu-suggest li{
  padding:10px 12px; border-radius:12px; cursor:pointer; line-height:1.25;
}
.lieu-suggest li:active, .lieu-suggest li.is-active{background:var(--gold);}
.lieu-suggest .sg-title{font-weight:800; font-size:.95rem; display:block;}
.lieu-suggest .sg-sub{font-size:.8rem; opacity:.7; display:block;}

.contact-note{width:100%; text-align:left; margin:-4px 0 0; font-size:.85rem; font-weight:600; opacity:.8;}