/* ============================================================
   Voyance Authentic — Refonte v3
   Brand book : Violet nuit immersif · Or solaire · Rose lavande
   Style : Dark cinema + aurora blobs + glassmorphism subtil
   Cible : femmes CSP+ qui cherchent un moment de réconfort
   ============================================================ */

:root{
  /* Brand book strict */
  --violet-nuit:    #5a3d5a;
  --violet-deep:    #3a2440;
  --violet-deeper:  #2a1830;
  --violet-fumee:   #6a4662;
  --violet-doux:    #8a6485;
  --rose-lavande:   #d29ea4;
  --rose-soft:      #e9c4c8;
  --or-solaire:     #dbaa6a;
  --or-clair:       #ecc789;
  --sable-chaud:    #e5ceba;
  --creme-lumiere:  #f9f2eb;

  --ink-light:      #f6ecdd;
  --ink-mute:       rgba(246,236,221,.68);
  --ink-mute-2:     rgba(246,236,221,.45);
  --line-dark:      rgba(246,236,221,.12);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand:  "Caveat", cursive;

  --radius: 16px;
  --ease:   cubic-bezier(.16,1,.3,1);
  --bg-mountain: url('https://499221a6.delivery.rocketcdn.me/wp-content/uploads/2026/08/va-landing-1.jpg');
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga","kern";
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--violet-deeper);
  color:var(--ink-light);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s var(--ease)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--or-solaire);color:var(--violet-nuit)}

/* Accessibility — réduction du mouvement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.container{max-width:1240px;margin:0 auto;padding:0 32px}
@media (max-width:680px){.container{padding:0 22px}}

/* ============================================================
   Typo system
   ============================================================ */
h1,h2,h3,h4,h5{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.005em;
  margin:0;
  color:var(--creme-lumiere);
}
h1{font-size:clamp(3rem,7vw,5.6rem);font-weight:300}
h2{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:400}
h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400}

.eyebrow{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--or-solaire);
}

/* Liens et boutons (un seul style de bouton clé, un secondaire) */
.btn-primary{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 32px;
  background:linear-gradient(135deg, var(--or-solaire), var(--or-clair));
  color:var(--violet-nuit);
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.04em;
  border-radius:999px;
  box-shadow:0 12px 36px -10px rgba(219,170,106,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  cursor:pointer;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 48px -10px rgba(219,170,106,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary .arrow{
  width:18px;height:1px;background:currentColor;position:relative;
  transition:width .3s var(--ease);
}
.btn-primary .arrow::after{
  content:"";position:absolute;right:0;top:-3px;
  width:7px;height:7px;
  border-right:1px solid currentColor;
  border-top:1px solid currentColor;
  transform:rotate(45deg);
}
.btn-primary:hover .arrow{width:24px}

.btn-ghost{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 22px;
  color:var(--ink-light);
  font-family:var(--sans);
  font-size:.84rem;
  font-weight:500;
  letter-spacing:.04em;
  border:1px solid var(--line-dark);
  border-radius:999px;
  background:rgba(246,236,221,.02);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.btn-ghost:hover{background:rgba(246,236,221,.06);border-color:rgba(246,236,221,.28)}

.link-or{
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.08em;
  color:var(--or-solaire);
  padding-bottom:3px;
  border-bottom:1px solid rgba(219,170,106,.4);
}
.link-or:hover{border-bottom-color:var(--or-solaire)}

/* Ambient blobs — aurora animée très lente */
.aurora{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.45;
  will-change:transform;
}
.blob.b1{
  width:600px;height:600px;
  background:radial-gradient(circle, var(--violet-fumee), transparent 70%);
  top:-150px;left:-200px;
  animation:drift1 28s var(--ease) infinite alternate;
}
.blob.b2{
  width:500px;height:500px;
  background:radial-gradient(circle, var(--rose-lavande), transparent 70%);
  bottom:-100px;right:-150px;
  opacity:.22;
  animation:drift2 32s var(--ease) infinite alternate;
}
.blob.b3{
  width:400px;height:400px;
  background:radial-gradient(circle, var(--or-solaire), transparent 70%);
  top:40%;left:50%;
  opacity:.10;
  animation:drift3 36s var(--ease) infinite alternate;
}
@keyframes drift1{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(180px,120px) scale(1.15)}
}
@keyframes drift2{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-150px,-100px) scale(1.1)}
}
@keyframes drift3{
  from{transform:translate(-50%,-50%) scale(1)}
  to{transform:translate(-30%,-65%) scale(1.2)}
}

/* ============================================================
   Boussole — symbole de guidance, accent classe et discret
   ============================================================ */
.boussole{
  display:inline-block;
  width:32px;height:32px;
  color:var(--or-solaire);
  vertical-align:middle;
  line-height:0;
}
.boussole svg{width:100%;height:100%;display:block}
.boussole.spin svg{animation:rotate-slow 90s linear infinite}
@keyframes rotate-slow{to{transform:rotate(360deg)}}

.section-divider{
  display:flex;align-items:center;justify-content:center;
  gap:24px;
  padding:24px 0;
}
.section-divider .line{
  height:1px;width:80px;
  background:linear-gradient(to right, transparent, var(--or-solaire), transparent);
  opacity:.6;
}
.section-divider .boussole{width:28px;height:28px;opacity:.9}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  padding:44px 0 22px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding:14px 0;
  background:rgba(58,36,64,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--line-dark);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{
  display:flex;align-items:center;gap:14px;
  color:var(--creme-lumiere);
}
.logo-mark{
  height:38px;
  display:grid;place-items:center;
  flex-shrink:0;
}
.logo-mark svg,.logo-mark img{width:auto;height:100%;display:block}
.logo-text{
  font-family:var(--serif);
  font-size:1rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:400;
  line-height:1;
}
.logo-text small{
  display:block;
  font-size:.6rem;
  letter-spacing:.5em;
  margin-top:4px;
  color:var(--or-solaire);
  font-weight:500;
}
.nav-links{
  display:flex;align-items:center;gap:36px;
  list-style:none;padding:0;margin:0;
}
.nav-links a{
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink-mute);
}
.nav-links a:hover{color:var(--or-solaire)}

.nav-cta{
  display:flex;align-items:center;gap:14px;
}
.nav-cta .login{
  font-family:var(--sans);
  font-size:.84rem;
  color:var(--ink-mute);
  letter-spacing:.04em;
}
.nav-cta .login:hover{color:var(--or-solaire)}
.nav-cta .signup{
  padding:11px 22px;
  background:var(--or-solaire);
  color:var(--violet-nuit);
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  border-radius:999px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta .signup:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(219,170,106,.5)}

.nav-burger{display:none;width:42px;height:42px;color:var(--creme-lumiere)}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-cta .login{display:none}
  .nav-burger{display:grid;place-items:center}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  padding:180px 0 100px;
  background:
    linear-gradient(180deg, var(--violet-deep) 0%, var(--violet-nuit) 60%, var(--violet-deeper) 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
/* Vraie photo de montagne ensoleillée — sommet, lumière, ascension */
.hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  /* Vraie photo de Damian Markutt (Unsplash) : alpiniste au sommet face au lever du soleil.
     Pré-traitée en duotone violet nuit pour matcher le brand book. */
  background:
    /* Overlay haut + bas pour fondre dans nav et section suivante, centre laissé respirer */
    linear-gradient(180deg, rgba(58,36,64,.45) 0%, rgba(90,61,90,.05) 35%, rgba(90,61,90,.12) 65%, rgba(42,24,48,.88) 100%),
    /* Halo or solaire renforcé autour du soleil de la photo */
    radial-gradient(ellipse 50% 40% at 22% 28%, rgba(219,170,106,.28), transparent 60%),
    var(--bg-mountain) center 35%/cover no-repeat;
  pointer-events:none;
}
.hero-inner{position:relative;z-index:3;max-width:1160px;margin:0 auto}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:40px;
  font-weight:500;
}
.hero-eyebrow .star{
  width:10px;height:10px;
  display:inline-block;
  position:relative;
}
.hero-eyebrow .star svg{width:100%;height:100%;fill:var(--or-solaire)}

.hero-grid{
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:80px;
  align-items:end;
  margin-bottom:72px;
}
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:48px;align-items:start;margin-bottom:48px}
}

h1.hero-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3.2rem,7.5vw,6.6rem);
  line-height:1;
  letter-spacing:-.015em;
  color:var(--creme-lumiere);
  margin:0 0 28px;
  text-shadow:0 4px 40px rgba(42,24,48,.6), 0 2px 8px rgba(42,24,48,.4);
}
h1.hero-title .it{
  font-style:italic;
  font-weight:400;
  color:var(--or-clair);
}

.hero-sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.15rem,1.7vw,1.4rem);
  font-weight:300;
  color:var(--creme-lumiere);
  opacity:.92;
  max-width:500px;
  margin:0 0 40px;
  line-height:1.5;
  text-shadow:0 2px 20px rgba(42,24,48,.7);
}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  justify-content:flex-start;
  margin-bottom:40px;
}

.hero-meta{
  font-family:var(--sans);
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:500;
}
.hero-meta b{color:var(--or-solaire);font-weight:600}

.hero-aside{
  padding:32px 32px 36px;
  background:rgba(58,36,64,.42);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
@media (max-width:880px){
  .hero-aside{padding:28px;backdrop-filter:blur(14px)}
}
.hero-aside .label{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--or-solaire);
  display:block;
  margin-bottom:20px;
}
.hero-aside p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  font-weight:300;
  line-height:1.65;
  color:var(--ink-mute);
  margin:0 0 18px;
}
.hero-aside p:last-of-type{
  margin-bottom:26px;
  color:var(--ink-light);
}
.hero-aside .lien-edito{
  display:inline-block;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--or-solaire);
  font-weight:500;
  padding-bottom:4px;
  border-bottom:1px solid rgba(219,170,106,.4);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.hero-aside .lien-edito:hover{border-bottom-color:var(--or-solaire);color:var(--or-clair)}

.hero-social{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px;
  flex-wrap:wrap;
  padding-top:48px;
  border-top:1px solid var(--line-dark);
}
@media (max-width:680px){.hero-social{justify-content:center}}
.hero-social-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:500;
}
.hero-social-item .num{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  font-style:italic;
  color:var(--or-solaire);
  text-transform:none;
  letter-spacing:.01em;
}

/* Floating handwritten badge */
.hero-badge{
  position:absolute;
  top:24%;right:8%;
  z-index:4;
  transform:rotate(8deg);
  font-family:var(--hand);
  color:var(--or-solaire);
  font-size:1.8rem;
  line-height:1.05;
  text-align:center;
  pointer-events:none;
  opacity:.85;
}
.hero-badge::before{
  content:"";
  position:absolute;
  inset:-14px -22px;
  border:1.5px solid var(--or-solaire);
  border-radius:50%;
  transform:rotate(-6deg);
  opacity:.6;
}
.hero-badge{display:none}
@media (max-width:880px){.hero-badge{display:none}}

/* Mountain silhouette - subtle, like in brand book cover */
.mountains{
  position:absolute;
  left:0;right:0;bottom:0;
  height:32%;
  z-index:1;
  opacity:.22;
  pointer-events:none;
}

/* Scroll hint */
.scroll-hint{
  position:absolute;
  bottom:32px;left:50%;
  transform:translateX(-50%);
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-mute-2);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  animation:bob 3s ease-in-out infinite;
}
.scroll-hint .line{
  width:1px;height:32px;
  background:linear-gradient(to bottom, var(--or-solaire), transparent);
}
@keyframes bob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(8px)}
}

/* ============================================================
   STORYTELLING : "À vous"
   ============================================================ */
.intime{
  position:relative;
  padding:140px 0;
  background:var(--violet-deep);
  overflow:hidden;
}
.intime-inner{
  position:relative;z-index:2;
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.intime .eyebrow{margin-bottom:36px;display:inline-block}
.intime p{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  font-weight:300;
  line-height:1.45;
  color:var(--creme-lumiere);
  margin:0 0 28px;
}
.intime p.it{font-style:italic;color:var(--or-clair)}
.intime .sep{
  width:60px;height:1px;
  background:var(--or-solaire);
  margin:48px auto;
  opacity:.5;
}
.intime .quiet{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:var(--ink-mute);
  font-weight:400;
}

/* ============================================================
   FONDATRICE — Victoria-Victoire
   ============================================================ */
.fondatrice{
  padding:140px 0;
  background:
    radial-gradient(ellipse 80% 100% at 100% 50%, rgba(106,70,98,.55), transparent 60%),
    var(--violet-nuit);
  position:relative;
  overflow:hidden;
}
.fond-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  align-items:center;
  position:relative;z-index:2;
}
@media (max-width:880px){.fond-grid{grid-template-columns:1fr;gap:48px}}

.fond-portrait{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(219,170,106,.2), transparent 60%),
    linear-gradient(135deg, var(--violet-fumee) 0%, var(--violet-nuit) 100%);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.4);
}
.fond-portrait::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(58,36,64,.55), transparent 50%);
}
.fond-portrait .initial{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:14rem;
  color:rgba(246,236,221,.18);
  line-height:1;
}
.fond-portrait .name-overlay{
  position:absolute;
  left:24px;right:24px;bottom:24px;
  padding:18px 22px;
  background:rgba(58,36,64,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-dark);
  border-radius:12px;
  z-index:2;
}
.fond-portrait .name-overlay .qui{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.5rem;
  font-weight:400;
  color:var(--creme-lumiere);
  line-height:1.1;
}
.fond-portrait .name-overlay .quoi{
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--or-solaire);
  margin-top:6px;
  font-weight:500;
}

.fond-body .eyebrow{margin-bottom:24px;display:inline-block}
.fond-body h2{margin-bottom:32px;max-width:14ch}
.fond-body h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}
.fond-body p{
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.7;
  color:var(--ink-mute);
  margin:0 0 20px;
  max-width:560px;
  font-weight:300;
}
.fond-body p strong{color:var(--creme-lumiere);font-weight:500}
.fond-body .signe{
  margin-top:40px;
  font-family:var(--hand);
  font-size:2.4rem;
  color:var(--or-solaire);
  line-height:1;
  display:inline-block;
  transform:rotate(-3deg);
}

/* ============================================================
   COMMENT ÇA SE PASSE — narratif, pas grid SaaS
   ============================================================ */
.passage{
  padding:140px 0 100px;
  background:var(--violet-deeper);
  position:relative;
}
.passage-head{
  text-align:center;
  margin-bottom:80px;
  max-width:680px;
  margin-inline:auto;
}
.passage-head .eyebrow{margin-bottom:24px;display:inline-block}
.passage-head h2{margin-bottom:24px}
.passage-head h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}
.passage-head p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.18rem;
  color:var(--ink-mute);
  line-height:1.55;
}

.passage-steps{
  max-width:880px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:0;
}
.step{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:48px;
  padding:48px 0;
  border-top:1px solid var(--line-dark);
  align-items:center;
  position:relative;
}
.step:last-child{border-bottom:1px solid var(--line-dark)}
@media (max-width:680px){.step{grid-template-columns:1fr;gap:18px;padding:36px 0}}@media (max-width:1024px){.passage-steps{display:flex!important;flex-direction:column!important;align-items:center!important;max-width:560px;margin:0 auto}.step{display:flex!important;flex-direction:column!important;align-items:center!important;grid-template-columns:1fr!important;text-align:center!important;padding:26px 0;gap:6px}.step-num{justify-content:center!important;font-size:3.2rem}.step h3{text-align:center!important;font-size:1.45rem;margin-bottom:8px}.step p{text-align:center!important;max-width:none;margin-left:auto;margin-right:auto}}

.step-num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:5rem;
  color:var(--or-solaire);
  line-height:.9;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.step-num span{font-size:1rem;color:var(--ink-mute-2);font-style:normal;letter-spacing:.2em;text-transform:uppercase;font-weight:500;font-family:var(--sans)}
.step h3{
  font-size:1.8rem;
  color:var(--creme-lumiere);
  margin-bottom:14px;
  font-weight:400;
}
.step p{
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:300;
  line-height:1.6;
  color:var(--ink-mute);
  margin:0;
  max-width:46ch;
}

.audiotel{
  margin-top:80px;
  padding:40px;
  background:rgba(246,236,221,.03);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  text-align:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.audiotel .eyebrow{margin-bottom:14px;color:var(--rose-lavande);display:inline-block}
.audiotel h4{
  font-size:1.3rem;
  margin-bottom:10px;
  font-weight:400;
}
.audiotel p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--ink-mute);
  margin:0 0 24px;
}
.audiotel-list{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.tel{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;
  background:rgba(246,236,221,.05);
  border:1px solid var(--line-dark);
  border-radius:999px;
  font-family:var(--sans);
  font-size:.84rem;
  color:var(--ink-light);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.tel:hover{background:rgba(219,170,106,.1);border-color:var(--or-solaire);color:var(--or-solaire)}
.tel .price{font-size:.7rem;color:var(--or-solaire);opacity:.85}

/* ============================================================
   MEDIUMS — Carte humaine, photos en grand
   ============================================================ */
.mediums{
  padding:140px 0;
  background:var(--violet-nuit);
  position:relative;
  overflow:hidden;
}
.mediums-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  margin-bottom:64px;
  flex-wrap:wrap;
}
.mediums-head .left{max-width:620px}
.mediums-head .eyebrow{margin-bottom:24px;display:inline-block}
.mediums-head h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}
.mediums-head p{
  margin-top:20px;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.18rem;
  color:var(--ink-mute);
  line-height:1.55;
  max-width:520px;
}

.mediums-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  position:relative;z-index:2;
}
@media (max-width:980px){.mediums-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.mediums-grid{grid-template-columns:1fr}}

.medium-card{
  position:relative;
  background:rgba(246,236,221,.03);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  display:flex;
  flex-direction:column;
}
.medium-card:hover{
  transform:translateY(-4px);
  background:rgba(246,236,221,.06);
  border-color:rgba(219,170,106,.32);
}
.medium-photo{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--violet-fumee);
}
.medium-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) contrast(1.02);
  transition:transform .6s var(--ease);
}
.medium-card:hover .medium-photo img{transform:scale(1.04)}
.medium-photo::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(58,36,64,.7), transparent 50%);
  pointer-events:none;
}
.medium-status{
  position:absolute;
  top:14px;left:14px;
  padding:5px 11px;
  background:rgba(58,36,64,.7);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-dark);
  border-radius:999px;
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rose-soft);
  font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.medium-status .dot{
  width:5px;height:5px;
  border-radius:50%;
  background:var(--rose-lavande);
}
.medium-info{padding:22px 22px 26px}
.medium-info h3{
  font-family:var(--serif);
  font-size:1.6rem;
  font-weight:400;
  margin:0 0 4px;
  color:var(--creme-lumiere);
}
.medium-info .spec{
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or-solaire);
  font-weight:600;
  margin-bottom:16px;
}
.medium-info .bio{
  font-family:var(--serif);
  font-style:italic;
  font-size:.95rem;
  font-weight:400;
  line-height:1.55;
  color:var(--ink-mute);
  margin:0 0 18px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.medium-info .stats{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:14px;
  border-top:1px solid var(--line-dark);
  font-family:var(--sans);
  font-size:.74rem;
  color:var(--ink-mute);
  letter-spacing:.06em;
}
.medium-info .stats b{
  color:var(--or-solaire);
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1rem;
  letter-spacing:0;
}

.mediums-foot{
  margin-top:56px;
  text-align:center;
}

/* ============================================================
   LETTRES — témoignages immersifs
   ============================================================ */
.lettres{
  padding:140px 0;
  background:var(--violet-deeper);
  position:relative;
  overflow:hidden;
}
.lettres-head{
  text-align:center;
  margin-bottom:80px;
  max-width:720px;
  margin-inline:auto;
}
.lettres-head .eyebrow{margin-bottom:24px;display:inline-block}
.lettres-head h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}
.lettres-head .trust{
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:8px 18px;
  background:rgba(246,236,221,.04);
  border:1px solid var(--line-dark);
  border-radius:999px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--sans);
  font-size:.82rem;
  color:var(--ink-mute);
}
.lettres-head .trust .score{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--or-solaire);
  font-weight:500;
  letter-spacing:.01em;
}

.lettres-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  position:relative;z-index:2;
}
@media (max-width:880px){.lettres-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

.lettre{
  padding:36px 32px;
  background:rgba(246,236,221,.03);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  transition:background .35s var(--ease), border-color .35s var(--ease);
  display:flex;
  flex-direction:column;
}
.lettre:hover{
  background:rgba(246,236,221,.06);
  border-color:rgba(219,170,106,.22);
}
.lettre .open-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:4rem;
  font-weight:400;
  color:var(--or-solaire);
  line-height:.5;
  margin-bottom:18px;
  opacity:.7;
}
.lettre p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.12rem;
  font-weight:300;
  line-height:1.6;
  color:var(--creme-lumiere);
  margin:0 0 28px;
  flex:1;
}
.lettre .foot{
  padding-top:18px;
  border-top:1px solid var(--line-dark);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.lettre .who{
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:500;
  color:var(--or-solaire);
  font-style:normal;
}
.lettre .when{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-mute-2);
  font-weight:500;
}

/* ============================================================
   OUTILS — calculateurs et rituels (lead magnets)
   ============================================================ */
.outils{
  padding:140px 0;
  background:var(--violet-deep);
  position:relative;
  overflow:hidden;
}
.outils-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 64px;
}
.outils-head .eyebrow{margin-bottom:24px;display:inline-block}
.outils-head h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}
.outils-head p{
  margin-top:20px;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.18rem;
  color:var(--ink-mute);
  line-height:1.55;
}
.outils-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
  position:relative;z-index:2;
  max-width:1240px;
  margin:0 auto;
}
@media (max-width:520px){.outils-grid{grid-template-columns:1fr}}

.outil{
  position:relative;
  padding:36px 28px 32px;
  background:rgba(246,236,221,.03);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  display:flex;
  flex-direction:column;
}
.outil:hover{
  transform:translateY(-4px);
  background:rgba(246,236,221,.06);
  border-color:rgba(219,170,106,.3);
}
.outil .outil-icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(219,170,106,.1);
  border:1px solid rgba(219,170,106,.3);
  color:var(--or-solaire);
  margin-bottom:24px;
}
.outil .outil-icon svg{width:24px;height:24px}
.outil h3{
  font-family:var(--serif);
  font-size:1.4rem;
  margin-bottom:10px;
  color:var(--creme-lumiere);
  font-weight:500;
}
.outil p{
  font-family:var(--serif);
  font-style:italic;
  font-size:.98rem;
  color:var(--ink-mute);
  margin:0 0 22px;
  line-height:1.55;
  flex:1;
}
.outil .outil-cta{
  font-family:var(--sans);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--or-solaire);
  padding-bottom:3px;
  border-bottom:1px solid rgba(219,170,106,.4);
  display:inline-block;
  align-self:flex-start;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.outil:hover .outil-cta{color:var(--or-clair);border-bottom-color:var(--or-clair)}
.outil-tag{
  position:absolute;
  top:14px;right:14px;
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose-soft);
  background:rgba(210,158,164,.15);
  border:1px solid rgba(210,158,164,.25);
  padding:4px 9px;
  border-radius:999px;
  font-weight:600;
}
.outil-tag.soon{color:var(--ink-mute-2);background:rgba(246,236,221,.06);border-color:var(--line-dark)}

.outils-foot{
  margin-top:56px;
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink-mute);
  max-width:580px;
  margin-inline:auto;
}

/* ============================================================
   FORFAITS — Tarifs chaleureux, pas SaaS
   ============================================================ */
.forfaits{
  padding:140px 0;
  background:var(--violet-nuit);
  position:relative;
}
.forfaits-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 64px;
}
.forfaits-head .eyebrow{margin-bottom:24px;display:inline-block}
.forfaits-head h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}
.forfaits-head p{
  margin-top:20px;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.18rem;
  color:var(--ink-mute);
  line-height:1.55;
}

.forfaits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:1100px;
  margin:0 auto;
}
@media (max-width:880px){.forfaits-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.forfaits-grid{grid-template-columns:1fr}}

.forfait{
  position:relative;
  padding:34px 30px;
  background:rgba(246,236,221,.03);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  display:flex;
  flex-direction:column;
}
.forfait:hover{
  background:rgba(246,236,221,.06);
  border-color:rgba(219,170,106,.32);
  transform:translateY(-4px);
}
.forfait.feat{
  background:linear-gradient(165deg, rgba(219,170,106,.13), rgba(106,70,98,.18));
  border-color:rgba(219,170,106,.4);
}
.forfait-tag{
  position:absolute;
  top:-1px;left:50%;
  transform:translateX(-50%) translateY(-50%);
  padding:6px 16px;
  background:var(--or-solaire);
  color:var(--violet-nuit);
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:700;
  border-radius:999px;
}
.forfait .nom{
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:500;
  margin-bottom:8px;
  color:var(--creme-lumiere);
}
.forfait .desc{
  font-family:var(--serif);
  font-style:italic;
  font-size:.95rem;
  color:var(--ink-mute);
  margin-bottom:28px;
  line-height:1.5;
}
.forfait .prix{
  font-family:var(--serif);
  font-size:3rem;
  font-weight:400;
  line-height:1;
  color:var(--or-solaire);
  margin-bottom:6px;
  display:flex;align-items:baseline;gap:8px;
}
.forfait .prix .par{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute-2);
  font-weight:500;
}
.forfait .unite{
  font-family:var(--sans);
  font-size:.74rem;
  color:var(--ink-mute);
  margin-bottom:28px;
  letter-spacing:.04em;
}
.forfait ul{
  list-style:none;padding:0;margin:0 0 32px;
  flex:1;
}
.forfait ul li{
  padding:7px 0;
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--sans);
  font-size:.85rem;
  color:var(--ink-mute);
  line-height:1.5;
}
.forfait ul li::before{
  content:"";
  width:14px;height:14px;
  flex-shrink:0;margin-top:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbaa6a' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/contain;
}
.forfait .cta{
  display:block;
  text-align:center;
  padding:14px;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  border-radius:999px;
  background:transparent;
  border:1px solid var(--line-dark);
  color:var(--ink-light);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.forfait .cta:hover{background:var(--or-solaire);color:var(--violet-nuit);border-color:var(--or-solaire)}
.forfait.feat .cta{background:var(--or-solaire);color:var(--violet-nuit);border-color:var(--or-solaire);box-shadow:0 12px 32px -10px rgba(219,170,106,.4)}
.forfait.feat .cta:hover{transform:translateY(-1px);box-shadow:0 16px 40px -10px rgba(219,170,106,.55)}

.forfaits-note{
  margin-top:48px;text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:.95rem;
  color:var(--ink-mute);
}
.forfaits-note b{
  color:var(--or-solaire);font-style:normal;font-family:var(--sans);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
}

/* ============================================================
   4 PILIERS — UX engagements
   ============================================================ */
.piliers{
  padding:140px 0;
  background:var(--violet-deep);
  position:relative;
  overflow:hidden;
}
.piliers-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 64px;
}
.piliers-head .eyebrow{margin-bottom:24px;display:inline-block}
.piliers-head h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}

.piliers-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;z-index:2;
}
@media (max-width:980px){.piliers-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.piliers-grid{grid-template-columns:1fr}}

.pilier{
  text-align:center;
  padding:36px 24px;
  position:relative;
}
.pilier .icon{
  width:54px;height:54px;
  margin:0 auto 24px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(219,170,106,.1);
  border:1px solid rgba(219,170,106,.3);
  color:var(--or-solaire);
}
.pilier .icon svg{width:24px;height:24px}
.pilier h3{
  font-family:var(--serif);
  font-size:1.5rem;
  margin-bottom:14px;
  color:var(--creme-lumiere);
  font-weight:400;
}
.pilier p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-mute);
  margin:0;
  font-weight:300;
}

/* ============================================================
   FAQ
   ============================================================ */
.questions{
  padding:140px 0;
  background:var(--violet-nuit);
}
.questions-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 64px;
}
.questions-head .eyebrow{margin-bottom:24px;display:inline-block}
.questions-head h2 .it{font-style:italic;color:var(--or-clair);font-weight:300}

.qa{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.qa-item{
  background:rgba(246,236,221,.03);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.qa-item[open]{
  background:rgba(246,236,221,.06);
  border-color:rgba(219,170,106,.28);
}
.qa-item summary{
  list-style:none;
  cursor:pointer;
  padding:24px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:400;
  color:var(--creme-lumiere);
}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::after{
  content:"";
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(219,170,106,.1);
  border:1px solid rgba(219,170,106,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dbaa6a' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px;
  transition:transform .3s var(--ease), background-color .3s var(--ease);
}
.qa-item[open] summary::after{
  transform:rotate(45deg);
  background-color:var(--or-solaire);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23301d31' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.qa-item .reponse{
  padding:0 28px 28px;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:300;
  line-height:1.7;
  color:var(--ink-mute);
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{
  padding:180px 0;
  background:
    /* Overlay très marqué pour préserver la lisibilité, photo en clair-obscur */
    linear-gradient(180deg, rgba(42,24,48,.92) 0%, rgba(90,61,90,.78) 40%, rgba(90,61,90,.85) 75%, rgba(42,24,48,.95) 100%),
    /* Halo or solaire en accent autour du titre */
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(219,170,106,.18), transparent 65%),
    var(--bg-mountain) center 50%/cover no-repeat fixed;
  position:relative;
  overflow:hidden;
  text-align:center;
}
@media (max-width:880px){.final{background-attachment:scroll}}
.final-inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.final .eyebrow{margin-bottom:36px;display:inline-block}
.final h2{
  font-size:clamp(2.6rem,5.4vw,4.4rem);
  font-weight:300;
  margin-bottom:32px;
  letter-spacing:-.015em;
}
.final h2 .it{font-style:italic;color:var(--or-clair);font-weight:400}
.final p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  color:var(--ink-mute);
  margin-bottom:48px;
  max-width:520px;
  margin-inline:auto;
  line-height:1.5;
  font-weight:300;
}
.final-ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--violet-deeper);
  color:var(--ink-mute);
  padding:80px 0 32px;
  border-top:1px solid var(--line-dark);
  font-family:var(--sans);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:56px;
}
@media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}@media (max-width:600px){.foot-grid{grid-template-columns:1fr 1fr!important;gap:26px 22px!important}.foot-brand{grid-column:1 / -1!important}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .logo{margin-bottom:18px;display:block}
.logo-foot-img{height:auto;width:120px;display:block;opacity:.92}
.foot-brand p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-mute);
  max-width:320px;
  margin:0 0 20px;
}
.foot-socials{display:flex;gap:10px;margin-top:16px}
.foot-socials a{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(246,236,221,.05);
  color:var(--ink-mute);
  border:1px solid var(--line-dark);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.foot-socials a:hover{background:var(--or-solaire);color:var(--violet-nuit);border-color:var(--or-solaire)}
.foot-col h5{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--or-solaire);
  margin:0 0 18px;
  font-weight:600;
}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:.86rem;color:var(--ink-mute)}
.foot-col a:hover{color:var(--or-solaire)}
.foot-bottom{
  padding-top:32px;
  border-top:1px solid var(--line-dark);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  font-size:.78rem;
  color:var(--ink-mute-2);
}
.foot-bottom .links{display:flex;gap:24px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--or-solaire)}

/* ============================================================
   Reveal anim
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease);animation:vaReveal .7s var(--ease) .3s both}@keyframes vaReveal{to{opacity:1;transform:none}}
.reveal.in{opacity:1;transform:none;animation:none}

/* Hero stagger entrance */
.hero-anim>*{opacity:0;transform:translateY(20px);animation:up 1s var(--ease) forwards}
.hero-anim>*:nth-child(1){animation-delay:.15s}
.hero-anim>*:nth-child(2){animation-delay:.3s}
.hero-anim>*:nth-child(3){animation-delay:.45s}
.hero-anim>*:nth-child(4){animation-delay:.6s}
.hero-anim>*:nth-child(5){animation-delay:.75s}
@keyframes up{to{opacity:1;transform:none}}

.logo,.logo:hover,.logo:hover *,.logo *{color:var(--creme-lumiere)!important}.logo-text small,.logo:hover .logo-text small{color:var(--or-solaire)!important}
.newsletter-section{padding:100px 0;background:linear-gradient(180deg,var(--violet-deep),var(--violet-deeper));position:relative;overflow:hidden}
.newsletter-section .aurora{position:absolute;inset:0;pointer-events:none}
.newsletter-section .aurora .blob{position:absolute;border-radius:50%;filter:blur(80px)}
.newsletter-section .aurora .b1{width:520px;height:520px;background:radial-gradient(circle,var(--rose-lavande),transparent 70%);top:-100px;right:-120px}
.newsletter-card{position:relative;z-index:1;max-width:680px;margin:0 auto;text-align:center;padding:60px 50px;background:rgba(246,236,221,.04);border:1px solid var(--line-dark);border-radius:24px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.newsletter-card .eyebrow{margin-bottom:14px;display:block}
.newsletter-card h3{font-family:var(--serif);font-size:2.2rem;color:var(--creme-lumiere);margin:0 0 16px;font-weight:400;line-height:1.15}
.newsletter-card h3 em{color:var(--or-clair);font-style:italic}
.newsletter-card>p{color:var(--ink-mute);margin:0 0 30px;line-height:1.65;font-family:var(--serif);font-style:italic;font-size:1.05rem}
.newsletter-card form{display:flex;gap:12px;max-width:520px;margin:0 auto;align-items:stretch}
.newsletter-card input{flex:1;padding:15px 22px;background:rgba(21,9,26,.45);border:1px solid var(--line-dark);border-radius:999px;color:var(--ink-light);font-family:var(--sans);font-size:.95rem;transition:border-color .25s var(--ease)}
.newsletter-card input::placeholder{color:var(--ink-mute-2)}
.newsletter-card input:focus{outline:none;border-color:var(--or-solaire);background:rgba(21,9,26,.6)}
.newsletter-card form button{white-space:nowrap}
.newsletter-card .newsletter-trust{font-size:.72rem;letter-spacing:.06em;color:var(--ink-mute-2);margin-top:22px;font-family:var(--sans);font-style:normal}
@media (max-width:580px){.newsletter-card{padding:42px 26px}.newsletter-card h3{font-size:1.7rem}.newsletter-card form{flex-direction:column}}
.field select{width:100%;padding:14px 16px;background:rgba(21,9,26,.45);border:1px solid var(--line-dark);border-radius:12px;color:var(--ink-light);font-family:var(--sans);font-size:.95rem;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23dbaa6a' stroke-width='1.5' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field select:focus{outline:none;border-color:var(--or-solaire)}
.field label{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or-solaire);font-weight:600;margin-bottom:8px}