/* ============================================================
   VANESSOR — REFONTE FLUIDE (couche de transformation globale)
   Objectif : passer de "blocs empilés encadrés" à un flux continu.
   Posée APRÈS style.css et premium.css, elle redéfinit l'apparence.
   ============================================================ */

/* ---- 1. Fond global : dégradé vertical continu, plus de répétition ---- */
body{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(74,85,120,.10), transparent 55%),
    linear-gradient(180deg, #fbf9f6 0%, #f6f1ea 40%, #f3eef7 100%) !important;
  background-attachment: fixed !important;
}

/* ---- 2. HERO immersif : scène nocturne en haut, pleine largeur ---- */
.hero.container{
  max-width:none !important;
  margin:0 !important;
  padding:4.5rem 1.6rem 5.5rem !important;
  position:relative;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(140% 95% at 50% -15%, #3a4773 0%, #232d4d 38%, #18203a 68%, #111830 100%);
  isolation:isolate;
}
/* ciel étoilé injecté en pseudo-élément (pas de JS requis pour le décor) */
.hero.container::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 40% 60%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 50%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 30% 80%, rgba(255,255,255,.45), transparent),
    radial-gradient(2px 2px at 60% 75%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 90% 85%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 10% 55%, rgba(255,255,255,.5), transparent);
  animation:starsTwinkle 6s ease-in-out infinite;
}
@keyframes starsTwinkle{0%,100%{opacity:.55}50%{opacity:.95}}
/* lune décor flottante en arrière-plan du hero */
.hero.container::after{
  content:"";position:absolute;top:6%;right:-70px;width:280px;height:280px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 38% 32%, #f0ece0, #cfc8b8 58%, #9a937f);
  box-shadow:0 0 120px rgba(224,196,165,.22), inset -28px -18px 55px rgba(13,19,38,.42);
  opacity:.8;animation:moonFloat 16s ease-in-out infinite;
}
@keyframes moonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
/* (transition gérée par dégradés de fond continus, pas d'inset) */

.hero.container h1{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  font-size:clamp(2rem,5.5vw,3.2rem) !important;
  line-height:1.18 !important;
  max-width:16ch;margin:0 auto .9em !important;
  text-wrap:balance;
  position:relative;z-index:1;
}
.hero-ornament{color:var(--or-clair,#e0c4a5) !important;position:relative;z-index:1}
.hero-rituel{color:#d9b9c6 !important;position:relative;z-index:1;max-width:36ch}
.hero-lede{color:#c7c1d6 !important;position:relative;z-index:1;font-family:var(--serif-corps) !important;font-style:italic}

/* ---- 3. CTA d'appel : rangée fluide intégrée dans la continuité nocturne ---- */
.cta-block{margin:0 auto !important;position:relative;z-index:1;max-width:680px !important;
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:2.4rem 0 3rem !important}
/* la section CTA prolonge le hero : MÊME fond sombre, aucune rupture */
section.container:has(.cta-block){
  max-width:none !important;margin:0 !important;padding:0 1.6rem !important;
  background:linear-gradient(180deg,#18203a,#141c33) !important;
}
.cta-card{
  border-radius:16px !important;backdrop-filter:blur(10px);
  min-height:auto !important;padding:1.1rem 1.3rem !important;
}
.cta-card-audiotel{background:linear-gradient(135deg,var(--or-clair,#e0c4a5),var(--or,#c9a17a)) !important}
.cta-card-cb{background:rgba(255,255,255,.08) !important;border:1px solid rgba(255,255,255,.18) !important}
.cta-card-cb .cta-card-label,.cta-card-cb .cta-card-num,.cta-card-cb .cta-card-tarif{color:#fff !important}

/* ---- 4. DIRECT : fondu dans la continuité nocturne, plus de carte isolée ---- */
.direct2.container{
  margin:0 auto !important;max-width:none !important;border-radius:0 !important;
  padding:2.5rem 1.6rem 3.5rem !important;
  box-shadow:none !important;
  background:linear-gradient(180deg,#141c33,#111830 60%,#0d1326) !important;
}
.direct2 .direct2-grid,.direct2 .direct2-head,.direct2 .direct2-foot{max-width:680px;margin-left:auto;margin-right:auto}
/* transition douce du nuit vers le clair après le Direct */
.direct2.container::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:80px;
  background:linear-gradient(180deg,transparent,#f3eef7);
}

/* ---- 5. Sections de contenu : flux aéré, sans cadres ni ombres ---- */
.reponse-rapide{
  background:transparent !important;border:none !important;border-left:3px solid var(--or,#c9a17a) !important;
  box-shadow:none !important;border-radius:0 !important;padding:.4rem 0 .4rem 1.4rem !important;
  margin:3rem auto !important;
}
.contenu.container-text{padding-top:1rem !important}
.contenu section{margin:2.6rem auto !important}
/* séparateurs : fins filets au lieu de bords de cartes */
.faq-section.container{
  background:transparent !important;
}

/* ---- 6. Maillage : grille fluide, cartes légères ---- */
.maillage{background:transparent !important;padding:3rem 0 !important}
.maillage-card{
  background:rgba(255,255,255,.6) !important;backdrop-filter:blur(6px);
  box-shadow:0 4px 20px rgba(42,53,86,.06) !important;
}

/* ---- 7. Message du jour & tirage : intégrés, fond translucide doux ---- */
.mdj2-card{
  background:radial-gradient(110% 130% at 50% 0%, rgba(235,229,242,.7), transparent 60%), rgba(255,255,255,.5) !important;
  backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(42,53,86,.06) !important;
}
.tirage2{padding-top:2rem !important}

/* ---- 8. Header : translucide, fondu sur la scène nocturne en haut ---- */
.site-header{
  background:rgba(20,28,51,.55) !important;backdrop-filter:blur(12px) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
.site-header .brand,.site-header .site-nav a{color:#fff !important}
.site-nav a:hover{color:var(--or-clair,#e0c4a5) !important}
/* au scroll, le header reste lisible ; on garde le texte clair */

/* ---- 9. Respect du mouvement réduit ---- */
@media(prefers-reduced-motion:reduce){
  .hero.container::before,.hero.container::after{animation:none}
}

/* ---- 10. Mobile : le hero respire, header lisible ---- */
@media(max-width:720px){
  .hero.container{padding:3.2rem 1.2rem 2.5rem !important}
  .hero.container::after{width:200px;height:200px;top:4%;right:-50px}
  .cta-block{grid-template-columns:1fr !important;gap:.7rem !important;padding:1.8rem 0 2.4rem !important}
  .cta-card{padding:0.9rem 1.1rem !important}
}

/* ============================================================
   AJUSTEMENTS : hero court (pages intérieures) + CTA fondues
   ============================================================ */

/* ---- CTA : fondre l'audiotel doré dans la scène (moins tranchant) ---- */
.cta-card-audiotel{
  background:linear-gradient(135deg, rgba(224,196,165,.92), rgba(201,161,122,.88)) !important;
  border:1px solid rgba(224,196,165,.5) !important;
  box-shadow:0 10px 30px rgba(201,161,122,.25) !important;
}
.cta-card-cb{
  box-shadow:0 10px 30px rgba(13,19,38,.3) !important;
}

/* ---- PAGES INTÉRIEURES : hero court, contenu remonté pour le SEO ---- */
.page-interieure .hero.container{
  padding:2.4rem 1.6rem 2.8rem !important;
  min-height:auto;
}
.page-interieure .hero.container::after{
  width:160px;height:160px;top:-30px;right:-40px;opacity:.6;
}
.page-interieure .hero.container h1{
  font-size:clamp(1.6rem,4.5vw,2.4rem) !important;
  margin-bottom:.5em !important;
}
/* sur page intérieure, pas de CTA géantes : on garde direct/contenu qui suit, fondu court */
.page-interieure section.container:has(.cta-block){
  background:linear-gradient(180deg,#141c33,#f3eef7 95%) !important;
}
.page-interieure .direct2.container{
  padding-top:1.8rem !important;
}
/* breadcrumb : il est AVANT le hero sur fond clair -> garder couleur sombre */
.page-interieure .breadcrumb.container{
  background:transparent;position:relative;z-index:2;
}

/* le breadcrumb de l'accueil et des pages : au-dessus de la scène */
.breadcrumb.container{position:relative;z-index:2}

/* ---- Fondu bas hero -> contenu, version sans CTA (pages sans cta-block) ---- */
.page-interieure .hero.container{
  box-shadow:none !important;
}

/* ============================================================
   ILLUSTRATIONS SVG ÉSOTÉRIQUES + IDENTITÉ
   ============================================================ */
.orn{display:block;margin:0 auto;color:var(--or,#c9a17a)}
.orn-sep{width:220px;height:22px;margin:2.5rem auto;opacity:.85}
.orn-lunes{width:280px;max-width:80%;height:auto;margin:1.6rem auto .4rem;opacity:.7}
.orn-soleil,.orn-oeil,.orn-arcane,.orn-pendule,.orn-etoile{margin:1.5rem auto}
.orn-soleil{width:64px}.orn-oeil{width:80px}.orn-arcane{width:54px}
.orn-pendule{width:46px}.orn-etoile{width:42px}
/* ornement de section : titre accompagné d'un petit motif */
.contenu .orn{opacity:.8}
/* sur le hero sombre, les ornements en doré clair */
.hero .orn,.hero-lunes .orn{color:var(--or-clair,#e0c4a5)}
.hero-lunes{position:relative;z-index:1}

/* identité : monogramme dans le header (remplace le cercle emoji) */
.brand-mark{
  background:none !important;box-shadow:none !important;
  width:38px !important;height:38px !important;
}
.brand-mark::after{content:none !important}
.brand-mark{
  background-image:url('/assets/logo.svg') !important;
  background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;
}
.orn-theme{text-align:center;margin:0 0 1.5rem}
.orn-theme .orn{margin:0 auto}

/* ---- Galerie de profils voyants ---- */
.profils-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin:2rem 0}
.profil-card{
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);
  border:1px solid var(--lavande-aube,#ebe5f2);border-radius:16px;
  padding:1.8rem 1.4rem;text-align:center;
  box-shadow:0 6px 24px rgba(42,53,86,.06);
  transition:transform .3s,box-shadow .3s;
}
.profil-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(42,53,86,.12)}
.profil-orn{height:70px;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem;color:var(--or,#c9a17a)}
.profil-orn .orn{margin:0;max-height:64px;width:auto}
.profil-titre{font-family:var(--serif-titre);font-weight:500;font-size:1.12rem;color:var(--bleu-nuit-doux);margin:0 0 .5rem}
.profil-desc{font-family:var(--serif-corps);font-size:.98rem;color:var(--texte-medium);line-height:1.5;margin:0}