/* ==================================================================
   ACCUEIL — Le seuil-portail et les trois portes
   ================================================================== */

/* === Indication "Choisissez la porte..." === */
.doors-reveal__hint {
  display: inline-block;
  margin-top: 0.3rem;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

/* === Section "Pour méditer" — distincte des 3 portes === */
.meditate-section {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  text-align: center;
}
.meditate-divider {
  font-family: 'Cormorant Garamond', serif;
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 1.5em;
  opacity: 0.5;
  text-indent: 1.5em;
  margin-bottom: 1rem;
}
.meditate-intro {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-mute);
  letter-spacing: .04em;
  margin-bottom: var(--space-lg);
}
.meditate-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 720px;
  margin: 0 auto;
}
.meditate-card {
  display: block;
  background: linear-gradient(180deg, rgba(120, 140, 130, 0.09), rgba(120, 140, 130, 0.04));
  border: 1px solid rgba(120, 140, 130, 0.28);
  border-radius: var(--radius-lg);
  padding: calc(var(--space-md) + 0.3rem) var(--space-md);
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
  position: relative;
  /* liseré intérieur — signe d'enluminure */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.meditate-card::after {
  /* ornement médaillon discret */
  content: "✦";
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  font-size: 0.7rem;
  color: rgba(120, 140, 130, 0.45);
  letter-spacing: 0;
}
.meditate-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 8px 22px rgba(120, 140, 130, 0.18);
  border-color: rgba(120, 140, 130, 0.55);
}
.meditate-card__ar {
  font-family: 'Amiri', serif;
  font-size: clamp(2rem, 5.5vw, 2.7rem);
  color: rgba(90, 110, 100, 0.95);
  line-height: 1.4;
  margin-bottom: 0.6rem;
  direction: rtl;
  font-weight: 400;
}
.meditate-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink-title, #1B2A4E);
  font-weight: 500;
  margin: 0 0 0.4rem;
}
.meditate-card__desc {
  font-family: 'Source Serif 4', serif;
  font-size: 0.92rem;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 600px) {
  .meditate-cards { grid-template-columns: 1fr; }
  .meditate-section { margin-top: var(--space-xl); }
}

/* === Espacements du hero === */
.hero--contemplative {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-md) !important;
}
.hero__quote {
  margin-bottom: 0.6rem !important;  /* citation rapprochée du bouton Entrer */
}
.hero__library {
  margin-top: var(--space-2xl) !important;  /* bibliothèque poussée plus bas */
  margin-bottom: 0 !important;
}
@media (max-width: 760px) {
  .hero--contemplative {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-sm) !important;
  }
  .hero__title { font-size: clamp(2rem, 8vw, 2.6rem) !important; margin-bottom: 0.4rem !important; }
  .hero__lede { font-size: 0.95rem !important; margin-bottom: 1rem !important; }
  .hero__quote {
    font-size: 1rem !important;
    margin-top: 1rem !important;
    margin-bottom: 0.4rem !important;  /* encore plus proche du bouton sur mobile */
  }
  .hero__library {
    margin-top: var(--space-xl) !important;  /* écart aéré sur mobile aussi */
    font-size: .92rem;
  }
}

/* === Le portail ambiant ===
   Une lumière chaude qui irradie depuis le centre, derrière tout le hero. */
.hero--contemplative {
  position: relative;
  overflow: hidden;
}
.hero--contemplative::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(184, 134, 11, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(166, 90, 74, 0.04) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: ambientBreath 8s ease-in-out infinite;
}
@keyframes ambientBreath {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.hero--contemplative > .container {
  position: relative;
  z-index: 1;
}

/* === Le seuil — mandala calligraphique à 6 anneaux === */
.seuil {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* La zone des anneaux — c'est la scène calligraphique */
.seuil-stage {
  position: relative;
  width: clamp(300px, 60vw, 520px);
  height: clamp(300px, 60vw, 520px);
  display: block;
}

/* === Les 6 anneaux concentriques ===
   Sélecteur volontairement spécifique pour neutraliser .seuil svg de components.css */
.seuil .cal-ring {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  pointer-events: none;
  overflow: visible;
  filter: none;
  color: var(--gold);
}
.seuil .cal-ring text {
  font-family: 'Amiri', serif;
  font-weight: 400;
  fill: var(--gold);
}

/* Sens et vitesses alternés, opacités graduées */
.cal-ring--r1 { animation: spin-cw  100s linear infinite; opacity: .50; }
.cal-ring--r2 { animation: spin-ccw  80s linear infinite; opacity: .45; }
.cal-ring--r3 { animation: spin-cw   65s linear infinite; opacity: .42; }
.cal-ring--r4 { animation: spin-ccw  50s linear infinite; opacity: .50; }
.cal-ring--r5 { animation: spin-cw   38s linear infinite; opacity: .55; }
.cal-ring--r6 { animation: spin-ccw  28s linear infinite; opacity: .65; }

.cal-ring--r1 text { font-size: 14px; letter-spacing: .15em; }
.cal-ring--r2 text { font-size: 13px; letter-spacing: .14em; }
.cal-ring--r3 text { font-size: 12px; letter-spacing: .13em; }
.cal-ring--r4 text { font-size: 11px; letter-spacing: .14em; }
.cal-ring--r5 text { font-size: 10px; letter-spacing: .14em; }
.cal-ring--r6 text { font-size: 9px;  letter-spacing: .16em; }

@keyframes spin-cw  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Hover : tout s'éveille un peu */
.seuil:hover .cal-ring { opacity: 0.85; }

/* Tailles sur mobile */
@media (max-width: 760px) {
  .cal-ring--r1 text { font-size: 10px; }
  .cal-ring--r2 text { font-size: 9px; }
  .cal-ring--r3 text { font-size: 9px; }
  .cal-ring--r4 text { font-size: 8px; }
  .cal-ring--r5 text { font-size: 8px; }
  .cal-ring--r6 text { font-size: 7px; }
}
@media (max-width: 480px) {
  .seuil-stage { width: 300px; height: 300px; }
  .cal-ring--r1 text { font-size: 8px; }
  .cal-ring--r2 text { font-size: 8px; }
  .cal-ring--r3 text { font-size: 7px; }
  .cal-ring--r4 text { font-size: 7px; }
  .cal-ring--r5 text { font-size: 6px; }
  .cal-ring--r6 text { font-size: 6px; }
}

/* État ouvert : on réduit le seuil et on ralentit les anneaux */
.seuil.is-open {
  transform: scale(0.55);
  opacity: 0.7;
  margin-bottom: var(--space-md);
}
.seuil.is-open .cal-ring {
  animation-play-state: paused;
  opacity: 0.3;
}

/* === Label « Entrer » avec shimmer doré === */
.seuil__label {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.7rem !important;
  letter-spacing: 0.2em !important;
  opacity: 1 !important;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0;
  padding: .5rem 1.4rem;
  transition: letter-spacing 0.5s ease;
  /* Shimmer : dégradé qui défile sur le texte */
  background: linear-gradient(90deg,
    var(--gold) 0%, var(--gold) 40%,
    #fff5d6 50%,
    var(--gold) 60%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: -100% 0; }
}
.seuil:hover .seuil__label { letter-spacing: 0.26em !important; }

/* Ornements orientaux à gauche et droite — losange à 4 branches */
.seuil__label::before,
.seuil__label::after {
  content: '❖';
  color: var(--gold);
  font-size: 1rem;
  opacity: 0.7;
  font-style: normal;
  background: none;
  -webkit-text-fill-color: var(--gold);
  letter-spacing: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.seuil:hover .seuil__label::before { transform: rotate(-45deg); opacity: 1; }
.seuil:hover .seuil__label::after { transform: rotate(45deg); opacity: 1; }

.seuil.is-open .seuil__label {
  font-size: 1.1rem !important;
  letter-spacing: 0.18em !important;
}

.seuil__invite {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-top: 0.7rem;
  opacity: 0;
  animation: inviteFadeIn 1.5s ease-out 1.2s forwards;
}
.seuil__invite::before,
.seuil__invite::after {
  content: '';
  width: 28px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.seuil.is-open .seuil__invite { display: none; }
@keyframes inviteFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.95; transform: translateY(0); }
}

/* Point doré pulsant — signal interactif universel */
.seuil__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 0.5rem;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.5);
  animation: dotPulse 1.8s ease-out infinite;
}
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.6); }
  70%  { box-shadow: 0 0 0 14px rgba(184, 134, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0); }
}

/* === Citation au-dessus du portail === */
.seuil-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-mute);
  text-align: center;
  margin: 0 auto var(--space-md);
  max-width: 520px;
  line-height: 1.6;
}
.seuil-quote::before, .seuil-quote::after {
  content: '✦';
  display: inline-block;
  color: var(--gold);
  font-size: 0.85em;
  margin: 0 0.7rem;
  opacity: 0.6;
}

/* ==================================================================
   LES TROIS PORTES — chacune avec sa calligraphie arabe
   ================================================================== */

.door {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-md) !important;
  overflow: hidden;
}
.door::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.door:hover::before { width: 80%; }
.door:hover { transform: translateY(-6px) !important; box-shadow: 0 14px 30px rgba(15, 24, 48, 0.10) !important; }

.door__ar {
  font-family: 'Amiri', serif;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  color: var(--gold);
  line-height: 1.3;
  direction: rtl;
  margin-bottom: 0.5rem;
  transition: filter 0.5s ease, transform 0.5s ease;
  text-shadow: 0 2px 12px rgba(184, 134, 11, 0.15);
}
.door:hover .door__ar {
  filter: drop-shadow(0 0 12px rgba(184, 134, 11, 0.4));
  transform: scale(1.04);
}
.door__tr {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  margin-bottom: 0.7rem;
}
.door__separator {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  margin: 0 auto 0.8rem;
  transition: width 0.5s ease, opacity 0.5s ease;
}
.door:hover .door__separator { width: 80px; opacity: 1; }

.door__title {
  font-size: 1.55rem !important;
  margin-bottom: 0.4rem !important;
  letter-spacing: 0.01em;
}
.door__desc { font-size: 0.92rem !important; }

.door__icon {
  margin-top: var(--space-md) !important;
  width: 28px !important;
  height: 28px !important;
  opacity: 0.45;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.door:hover .door__icon {
  opacity: 0.85;
  transform: scale(1.1);
}

/* === Responsive === */
@media (max-width: 760px) {
  .seuil__label { font-size: 1.18rem !important; }
  .seuil-quote { font-size: 1.02rem; }
  .door__ar { font-size: 2.2rem; }
  .door__title { font-size: 1.3rem !important; }
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero--contemplative::before,
  .cal-ring,
  .seuil__dot { animation: none !important; }
}

/* === Arabe au-dessus du titre — بَاطِنُ البَاطِن === */
.hero__title-ar {
  font-family: 'Amiri', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--gold, #B8860B);
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .hero__title-ar { font-size: 1.4rem; margin-bottom: 0.3rem; }
}

/* Les noms dorés dans la lede : Secret et Invité */
.hero__lede em {
  color: var(--gold, #B8860B);
  font-style: italic;
  font-weight: 500;
}

/* === Newsletter — encart sobre en bas de page === */
.newsletter {
  padding: 3rem 1.5rem 2.5rem !important;
  text-align: center !important;
  background: linear-gradient(180deg, transparent 0%, rgba(184, 134, 11, 0.05) 50%, transparent 100%);
  border-top: 1px solid rgba(184, 134, 11, 0.15);
  border-bottom: 1px solid rgba(184, 134, 11, 0.15);
  margin-top: 3rem;
}
.newsletter > .container,
.newsletter > .container--narrow {
  text-align: center !important;
}
.newsletter .newsletter__ornament,
.newsletter .newsletter__intro,
.newsletter .newsletter__form,
.newsletter .newsletter__hint {
  text-align: center !important;
}

.newsletter__ornament {
  font-family: 'Cormorant Garamond', serif;
  color: #B8860B;
  font-size: 1.6rem;
  opacity: 0.55;
  margin: 0 auto 1rem !important;
  letter-spacing: 0.2em;
  line-height: 1;
  display: block !important;
}

.newsletter__intro {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.2rem, 3.2vw, 1.45rem);
  color: #1B2A4E;
  line-height: 1.5;
  margin: 0 auto 1.8rem !important;
  max-width: 480px;
  display: block;
}

.newsletter__form {
  display: flex !important;
  gap: 0.6rem;
  max-width: 480px;
  margin: 0 auto 1rem !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: stretch;
}

.newsletter__form input[type="email"] {
  flex: 1 1 240px;
  min-width: 0;
  padding: 0.85rem 1.2rem !important;
  font-family: 'Source Serif 4', serif !important;
  font-size: 1rem !important;
  color: #0F1830 !important;
  background: #fff !important;
  border: 1px solid rgba(184, 134, 11, 0.3) !important;
  border-radius: 999px !important;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}
.newsletter__form input[type="email"]:focus {
  border-color: #B8860B !important;
  box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.12) !important;
}

.newsletter__form button[type="submit"] {
  padding: 0.85rem 1.6rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  color: #fff !important;
  background: #B8860B !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.newsletter__form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(184, 134, 11, 0.3);
  background: #a37809 !important;
}
.newsletter__form button[type="submit"]:active {
  transform: translateY(0);
}

.newsletter__hint {
  font-family: 'Source Serif 4', serif !important;
  font-size: 0.88rem !important;
  color: #6b6a65 !important;
  margin: 0 auto !important;
  max-width: 420px;
  line-height: 1.55;
  font-style: italic;
}
.newsletter__hint em {
  font-style: italic;
  color: #6b6a65 !important;
}

@media (max-width: 600px) {
  .newsletter { padding: 2.5rem 1rem 2rem !important; }
  .newsletter__intro { font-size: 1.15rem; }
  .newsletter__form { flex-direction: column; gap: 0.7rem; }
  .newsletter__form input[type="email"] { flex: 1 1 100%; width: 100%; }
  .newsletter__form button[type="submit"] { flex: 1 1 100%; width: 100%; }
}