/* ============================================================
   🌌 Transition Digitale — Socle unifié "Temple Vivant"
   Fichier : css/main.css
   ============================================================ */

/* ---------- 0) RESET LÉGER & BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body {
  font-family: 'Julius Sans One', sans-serif;
  color: #f4f4f4;
  text-align: center;
  background: repeating-linear-gradient(145deg, #06233b, #01101b, #06233b, #01101b);
}

/* Titres sacrés */
h1, h2, h3, .section-title { font-family: 'Cinzel Decorative', serif; }

/* Liens */
a { color: inherit; text-decoration: none; }
a:hover { color: #d8b67e; }

/* ---------- 1) HEADER ---------- */
header { padding: 2em 1em; }
.logo { width: 50%; max-width: 300px; height: auto; }
.main-title {
  font-size: 1.2em; letter-spacing: 1px; margin: .4em 0 0 0; color: #f1e3be;
}

/* ---------- 2) NAV ---------- */
nav { background: transparent; margin-bottom: 2em; position: relative; z-index: 10; }

/* Bouton hamburger (caché par défaut en desktop) */
.menu-toggle {
  display: none;
  position: fixed; top: 18px; right: 18px;
  z-index: 1001; cursor: pointer;
}
.menu-toggle .bar {
  width: 28px; height: 3px; background: #d8c58a;
  margin: 5px 0; border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
}
.menu-toggle.open .bar:nth-child(1) { transform: rotate(45deg) translateY(8px); }
.menu-toggle.open .bar:nth-child(2) { opacity: 0; }
.menu-toggle.open .bar:nth-child(3) { transform: rotate(-45deg) translateY(-8px); }

/* Menu principal */
.nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; gap: 1.5em; flex-wrap: wrap;
  transition: all .3s ease;
}
.nav-menu li a { font-size: .95rem; transition: color .3s ease; }
.nav-menu li a:hover { color: #d8b67e; }

/* ---------- 3) REVEAL (apparitions douces) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.fade-in { opacity: 0; animation: fadeInOnce 1.2s ease forwards; }
@keyframes fadeInOnce { from { opacity: 0; transform: translateY(12px);} to { opacity:1; transform: translateY(0);} }

/* ---------- 4) FLECHE RETOUR HAUT ---------- */
.fleche-haut-button { margin: 2.2em 0 0 0; }
.fleche-haut-button img { width: 60px; height: auto; transition: transform .3s ease; }
.fleche-haut-button img:hover { transform: scale(1.08); }

/* ---------- 5) PRELOADER "VOILE DU TEMPLE" ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 50% 0%,
              rgba(240,210,150,.08), rgba(6,35,59,1) 60%);
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader .veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(250,235,200,0.12), rgba(6,35,59,1) 60%);
  transform-origin: top center;
  animation: curtain 1.2s ease both;
}
#preloader .sigil {
  position: relative; z-index: 1;
  font-family: 'Cinzel', serif; letter-spacing: .14em;
  color: #f1e3be; opacity: .9; font-size: 0.95rem;
}
@keyframes curtain {
  0% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
#preloader.hidden { opacity: 0; visibility: hidden; }

/* ============================================================
   PAGES SPÉCIFIQUES
   ============================================================ */

/* ---------- ACCUEIL ---------- */
.page-accueil .quote-box {
  max-width: 720px; margin: 1em auto; padding: 1em 2em;
  background: linear-gradient(90deg, #a99763, #faf3dc, #a99763);
  color: #03233e; font-family: 'Cinzel', serif; text-align: center;
}
.page-accueil .quote-title {
  font-style: italic; letter-spacing: 0.5px; margin-bottom: .5em; text-transform: uppercase; color: #03233e;
}
.page-accueil .quote-text { font-size: 1em; line-height: 1.5em; font-style: italic; color: #03233e; margin-bottom: .5em; }
.page-accueil .quote-author { font-size: 1em; color: #03233e; }

.page-accueil .welcoming-text {
  font-family: 'Julius Sans One', serif; font-size: 1em; line-height: 2.4em;
  background: linear-gradient(45deg, #f1e3be, #fffbf1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(0,0,0,.3);
  margin-top: 5em; margin-bottom: 2.5em;
}

.page-accueil .Flamme-img { width: auto; height: 130px; max-width: 40%; max-height: 130px; }

.page-accueil .orakia-channel { text-align: center; margin: 6em 0 4em; }
.page-accueil .orakia-channel-title {
  font-family:'Cinzel', serif; font-size: 1.1em; text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: .5em; color: #d8b67e;
}
.page-accueil .orakia-channel-subtitle { font-style: italic; color:#ccc; margin-bottom: 2em; }
.page-accueil .orakia-channel-text { max-width: 720px; margin: 0 auto; line-height: 2em; }

.page-accueil .instagram-icon {
  width: 80px; height: 80px; margin-top: 2em; border-radius: 50%;
  animation: pulse 2.8s ease-in-out infinite;
  transition: transform .3s ease, box-shadow .3s ease;
}
.page-accueil .instagram-icon:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,230,180,.5); }
@keyframes pulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.05);} }

.page-accueil .orakia-sceau img { width: 200px; height: auto; }

/* ---------- A PROPOS ---------- */
.page-a-propos .a-propos-section { padding: 2em 1em; }
.page-a-propos .blason-container { text-align: center; margin-bottom: 2em; }
.page-a-propos .blason { width: 80%; max-width: 400px; height: auto; transition: transform .4s ease; }
.page-a-propos .blason:hover { transform: scale(1.03); }

/* Encadré “rituel” — bordure dorée subtile sur les 4 côtés */
.page-a-propos .encadre-rituel {
  max-width: 800px; margin: 0 auto;
  background: rgba(255,255,255,0.03);
  padding: 2em 3em;
  border: 1.5px solid rgba(216,182,126,0.7);
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(216,182,126,0.08);
}
.page-a-propos .encadre-rituel p { line-height: 1.9em; text-align: justify; }
.page-a-propos .sous-titre { color: #d8b67e; font-family: 'Cinzel', serif; }

/* ---------- CONTACT ---------- */
.page-contact .temple-contact { position: relative; text-align: center; padding: 5em 2em; color: #f4f4f4; overflow: hidden; }
.page-contact .text-contact {
  position: relative; display:flex; align-items:center; justify-content:center;
  margin: 5em auto 3em; width: fit-content; min-width: 260px; height: 80px;
  padding: 1.2em 2em; border-radius: 10px;
  background-color: rgba(255,255,255,0.04); color:#fdf6e3; font-size:1.1em; letter-spacing:1px;
  box-shadow: 0 0 15px rgba(220,190,140,0.08);
  animation: templeBreath 6s ease-in-out infinite;
}
@keyframes templeBreath {
  0% { box-shadow: 0 0 8px rgba(220,190,140,.12), 0 0 30px rgba(220,190,140,.08), inset 0 0 12px rgba(220,190,140,.05); transform: scale(1); }
  50%{ box-shadow: 0 0 18px rgba(220,190,140,.25), 0 0 60px rgba(220,190,140,.15), inset 0 0 20px rgba(220,190,140,.10); transform: scale(1.02); }
  100%{ box-shadow: 0 0 8px rgba(220,190,140,.12), 0 0 30px rgba(220,190,140,.08), inset 0 0 12px rgba(220,190,140,.05); transform: scale(1); }
}
.page-contact .text-mail { font-family:'Cinzel', serif; font-size:1em; color:#d8b67e; margin-bottom:.6em; }
.feminin-sacre { display:inline-flex; align-items:center; justify-content:center; gap:.4em; white-space:nowrap; }
.feminin-sacre a { color:#f1e3be; font-style:italic; font-weight:500; transition: color .3s ease, text-shadow .3s ease; }
.feminin-sacre a:hover { color:#d8b67e; text-shadow: 0 0 8px rgba(255,240,200,.6); }

/* Sceau + halo diaphane */
.orakia-sceau { position: relative; display: inline-block; }
.orakia-sceau::before {
  content:""; position:absolute; top:50%; left:50%; width:260px; height:260px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,230,180,.09) 0%, rgba(255,230,180,.05) 25%, rgba(255,230,180,.02) 50%, transparent 80%);
  animation: auraBreath 10s ease-in-out infinite alternate; pointer-events:none; z-index:0;
}
@keyframes auraBreath {
  0% { opacity:.4; transform: translate(-50%,-50%) scale(.95) rotate(0deg); filter: blur(2px); }
  50%{ opacity:.6; transform: translate(-50%,-50%) scale(1) rotate(180deg); filter: blur(3px); }
  100%{ opacity:.5; transform: translate(-50%,-50%) scale(1.05) rotate(360deg); filter: blur(2.5px); }
}
.orakia-sceau img { position: relative; z-index:1; width:200px; height:auto; animation: glowSceau 6s ease-in-out infinite alternate; }
@keyframes glowSceau { 0%{ filter: drop-shadow(0 0 8px rgba(255,230,180,.25)); } 100%{ filter: drop-shadow(0 0 20px rgba(255,230,180,.4)); } }

/* ============================================================
   ✨ VOILE SACRÉ D’ASCENSION – EFFETS VISUELS
   ============================================================ */
#voile-sacré {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: radial-gradient(circle at 50% 80%, rgba(255, 230, 180, 0.1) 0%, #01101b 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  overflow: hidden;
  animation: voileFadeOut 1.2s ease-in-out 5s forwards;
}

/* --- Plume de lumière --- */
.plume-lumière {
  position: absolute;
  top: 35%;
  left: 55%;
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,230,180,0.1));
  border-radius: 50% 80% 30% 70%;
  transform: rotate(-45deg) scale(0);
  animation: plumeApparition 0.5s ease-out 0.8s forwards,
             plumeEcriture 3.5s cubic-bezier(0.77, 0, 0.175, 1) 1s forwards,
             plumeDissolution 1s ease-in 4.6s forwards;
  filter: blur(1px);
}

@keyframes plumeApparition {
  to { transform: rotate(-45deg) scale(1); opacity: 1; }
}
@keyframes plumeEcriture {
  0% { transform: rotate(-45deg) translateX(0); }
  100% { transform: rotate(-45deg) translateX(-220px) translateY(30px); opacity: 0.9; }
}
@keyframes plumeDissolution {
  to { opacity: 0; transform: scale(0.8) translateY(40px); }
}

/* --- Phrase dorée --- */
.phrase-orian {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.6em;
  color: #f1e3be;
  letter-spacing: 1.5px;
  opacity: 0;
  text-shadow: 0 0 8px rgba(255,240,200,0.6);
  animation: texteApparition 3.5s ease-in 1s forwards,
             goldBreath 4s ease-in-out infinite alternate,
             texteDisparition 1.2s ease-in-out 4.8s forwards;
}

/* Effet d’apparition progressive du texte */
@keyframes texteApparition {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

/* Scintillement respirant */
@keyframes goldBreath {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255,240,200,0.6),
                 0 0 15px rgba(255,230,180,0.4);
  }
  50% {
    text-shadow: 0 0 15px rgba(255,240,200,0.9),
                 0 0 30px rgba(255,230,180,0.8);
  }
}

/* Effacement de la phrase */
@keyframes texteDisparition {
  to { opacity: 0; filter: blur(5px); }
}

/* --- Ouverture du Voile (Ascension) --- */
@keyframes voileFadeOut {
  0% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    opacity: 1;
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0;
    visibility: hidden;
  }
}

/* --- Version mobile : ouverture verticale --- */
@media (max-width: 768px) {
  @keyframes voileFadeOut {
    0% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 0; }
  }

  .phrase-orian {
    font-size: 1.3em;
    text-align: center;
    padding: 0 1em;
  }
}

/* ---------- 6) RESPONSIVE ---------- */
@media (max-width: 850px) {
  .logo { width: 70%; max-width: 220px; }

  /* Menu mobile */
  .menu-toggle { display: flex; }
  .nav-menu { 
    position: fixed; top: 70px; left: 0; width: 100vw;
    flex-direction: column; align-items: flex-start;
    background: rgba(5,20,35,.98); padding: 20px; gap: 1em;
    display: none; border-top: 1px solid #c4aa70; max-height: 90vh; overflow-y: auto;
  }
  .nav-menu.active { display: flex; }
  .nav-menu a { font-size: 1em; color: #d8c58a; width: 100%; text-align: left; }

  .page-contact .text-contact { font-size: .95em; height: 70px; margin: 3em auto; padding: 1em 1.5em; }
  .orakia-sceau img { width: 160px; }
  .page-accueil .instagram-icon { width: 70px; height: 70px; margin-top: 1.5em; }
  .page-accueil .orakia-sceau img { width: 180px; }
}

/* Desktop reset to horizontal nav */
@media (min-width: 851px) {
  .nav-menu { display: flex !important; position: static; height: auto; max-height: none; opacity: 1; overflow: visible; }
  .menu-toggle { display: none; }
}

footer { margin-top: 3em; padding: 1em; font-size: .9em; background: rgba(255,255,255,.03); color: #888; }