/* =============================================================
   CHANTE-MOI — Landing V3
   Palette aquarelle épurée · Fraunces / Caveat / Inter
   (Extrait du <style> inline de la refonte V3)
   ============================================================= */

:root{
  --cream:#FBF8F3;
  --white:#FFFFFF;
  --sage:#A8B5A0;
  --blue:#9CB4C4;
  --teal:#3E8DA0;
  --teal-deep:#2F7385;
  --ink:#3D3530;
  --ink-soft:#6B625A;

  --display:'Fraunces',Georgia,serif;
  --script:'Caveat',cursive;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  --maxw:1080px;
  --pad:clamp(20px,5vw,40px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Lavis aquarelle ambiants (périphériques, très pâles) ---------- */
.wash{position:absolute;border-radius:50%;filter:blur(60px);opacity:.18;pointer-events:none;z-index:0}
.wash--sage{background:radial-gradient(circle,var(--sage),transparent 70%)}
.wash--blue{background:radial-gradient(circle,var(--blue),transparent 70%)}
.wash--accent{background:radial-gradient(circle,var(--teal),transparent 70%)}

/* ---------- Layout de base ---------- */
section{position:relative;z-index:1}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- Hero ---------- */
.hero{
  min-height:92vh;
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;
  padding:80px var(--pad) 60px;
  position:relative;
}
.hero .wash--sage{width:520px;height:520px;top:-120px;left:-140px}
.hero .wash--blue{width:460px;height:460px;top:30%;right:-160px}
.hero .wash--accent{width:300px;height:300px;bottom:-60px;left:30%;opacity:.10}

.eyebrow{
  font-family:var(--script);
  font-size:clamp(1.5rem,4vw,2rem);
  color:var(--teal);
  font-weight:600;
  margin-bottom:.4em;
  line-height:1;
}
.hero h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.3rem,6.5vw,4.2rem);
  line-height:1.08;
  letter-spacing:-.01em;
  max-width:14ch;
  margin:0 auto .5em;
  color:var(--ink);
}
.hero .lead{
  font-size:clamp(1.05rem,2.4vw,1.3rem);
  color:var(--ink-soft);
  font-weight:400;
  max-width:34ch;
  margin:0 auto 2.4em;
}

/* ---------- Mockup hero ---------- */
.hero-visual{
  width:100%;max-width:560px;margin:0 auto 2.6em;
  border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(61,53,48,.35);
}
.hero-visual img{width:100%;height:auto;display:block}

/* ---------- Formulaire ---------- */
.signup{max-width:440px;margin:0 auto;width:100%}
.signup form{display:flex;gap:10px;flex-wrap:wrap}
.signup input[type=email]{
  flex:1;min-width:200px;
  padding:16px 20px;
  border:1.5px solid #E3DCD2;
  border-radius:12px;
  font-family:var(--body);font-size:1rem;
  background:var(--white);color:var(--ink);
  transition:border-color .2s;
}
.signup input[type=email]:focus{outline:none;border-color:var(--sage)}
.signup button{
  padding:16px 28px;
  background:var(--teal);color:#fff;
  border:none;border-radius:12px;
  font-family:var(--body);font-size:1rem;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background .2s,transform .1s;
}
.signup button:hover{background:var(--teal-deep)}
.signup button:active{transform:scale(.98)}
.signup .reassure{
  font-size:.85rem;color:var(--ink-soft);
  margin-top:12px;text-align:center;
}

/* ---------- Séparateur aquarelle organique ---------- */
.divider{height:60px;width:100%;display:block;opacity:.5}

/* ---------- Sections de contenu ---------- */
.section{padding:clamp(70px,11vw,120px) 0;position:relative}
.section h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,4.5vw,2.8rem);
  line-height:1.15;text-align:center;
  color:var(--teal);
  max-width:18ch;margin:0 auto .9em;
}
.section .sub{
  text-align:center;color:var(--ink-soft);
  font-size:clamp(1rem,2vw,1.15rem);
  max-width:42ch;margin:0 auto 3em;
}

/* ---------- Les 3 composantes ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.trio .card{text-align:center}
/* Vignettes rondes : vrais mockups produit, cadrés en cercle doux,
   liseré blanc + ombre tendre pour rester cohérent avec l'aquarelle épurée. */
.trio .ic{
  width:112px;height:112px;margin:0 auto 22px;
  border-radius:50%;overflow:hidden;
  background:var(--white);
  border:5px solid var(--white);
  box-shadow:0 14px 34px -14px rgba(61,53,48,.30);
}
.trio .ic img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Vignette QR : fond crème identique au QR (cercle homogène), léger padding
   intérieur pour faire respirer le code, et affichage entier (contain). */
.trio .ic--qr{background:var(--cream);padding:14px}
.trio .ic--qr img{object-fit:contain}
.trio h3{
  font-family:var(--display);font-weight:500;
  font-size:1.25rem;margin-bottom:.5em;
}
.trio p{color:var(--ink-soft);font-size:.98rem}

/* ---------- Bloc objection écran (encadré doux) ---------- */
.note{
  background:var(--white);
  border-radius:24px;
  padding:clamp(36px,6vw,64px);
  text-align:center;
  max-width:680px;margin:0 auto;
  box-shadow:0 24px 60px -34px rgba(61,53,48,.3);
  position:relative;overflow:hidden;
}
.note .wash--blue{width:340px;height:340px;top:-120px;right:-120px;opacity:.14}
.note h2{margin-bottom:.6em}
.note p{color:var(--ink-soft);max-width:40ch;margin:0 auto;position:relative;z-index:1}

/* ---------- Section émotion ---------- */
.emotion{text-align:center}
.emotion .big{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.6vw,2.3rem);
  font-weight:400;font-style:italic;
  line-height:1.4;max-width:24ch;margin:0 auto;
  color:var(--ink);
}
.emotion .occasions{
  margin-top:1.6em;color:var(--ink-soft);
  font-size:1.05rem;max-width:38ch;margin-left:auto;margin-right:auto;
}

/* ---------- Section pré-lancement (CTA final) ---------- */
.prelaunch{
  text-align:center;
  background:linear-gradient(180deg,transparent,rgba(168,181,160,.10));
}
.prelaunch h2{margin-bottom:.5em}
.prelaunch .sub{margin-bottom:2.2em}

/* ---------- Footer ---------- */
footer{
  text-align:center;padding:48px var(--pad);
  color:var(--ink-soft);font-size:.85rem;
}
footer .logo{font-family:var(--script);font-size:1.6rem;color:var(--teal);margin-bottom:.3em}

/* ---------- Reveal au scroll (signature : lavis qui se diffuse) ----------
   Progressive enhancement : le contenu est visible par défaut.
   Seulement si JS actif (classe .js sur <html>), on cache puis on révèle. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}
.reveal-wash{
  position:absolute;z-index:0;border-radius:50%;
  filter:blur(50px);opacity:.20;
  transform:scale(1);
  pointer-events:none;
}
.js .reveal-wash{
  opacity:0;transform:scale(.4);
  transition:opacity 1.6s ease,transform 1.8s ease;
}
.js .reveal-wash.in{opacity:.20;transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-wash{transition:none;opacity:1;transform:none}
  .reveal-wash{opacity:.18}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media(max-width:720px){
  .trio{grid-template-columns:1fr;gap:36px;max-width:340px;margin:0 auto}
  .signup form{flex-direction:column}
  .signup button{width:100%}
}