/* site_web/assets/css/a-propos.css */

/* ============ Typing hero ============ */
.typing-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
  padding: 7rem 0 4rem;
}

.typing-hero__halo {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translateY(-50%);
  width: 400px;
  height: 400px;
  background: rgba(212, 160, 23, 0.05);
  border-radius: 999px;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

.typing-hero__inner { position: relative; z-index: 10; width: 100%; }
.typing-hero__col { max-width: 48rem; }

.typing-hero__eyebrow {
  color: var(--gold);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
}
@media (min-width: 640px) { .typing-hero__eyebrow { font-size: 0.75rem; } }

.typing-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #bdb6b6;
  font-size: 2rem;
}
@media (min-width: 640px) { .typing-hero__title { font-size: 3rem; } }
@media (min-width: 768px) { .typing-hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .typing-hero__title { font-size: 4.5rem; } }

.typing-hero__typed-line {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--gold);
  font-size: 2rem;
  min-height: 1.2em;
}
@media (min-width: 640px) { .typing-hero__typed-line { font-size: 3rem; } }
@media (min-width: 768px) { .typing-hero__typed-line { font-size: 3.75rem; } }
@media (min-width: 1024px) { .typing-hero__typed-line { font-size: 4.5rem; } }

.typing-hero__typed { display: inline-block; min-height: 1em; }

.typing-hero__cursor {
  display: inline-block;
  width: 3px;
  height: 0.8em;
  margin-left: 0.4rem;
  background: var(--gold);
  animation: caauri-cursor-blink 1s step-end infinite;
}
@media (min-width: 640px) { .typing-hero__cursor { width: 5px; margin-left: 0.6rem; } }

.typing-hero__cta-wrap { margin-top: 2.5rem; }
@media (min-width: 640px) { .typing-hero__cta-wrap { margin-top: 3.5rem; } }

.typing-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #bdb6b6;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.2s;
}
.typing-hero__cta:hover { color: var(--gold); }
.typing-hero__cta-arrow { color: var(--gold); }

.typing-hero__follow {
  display: none;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
@media (min-width: 768px) { .typing-hero__follow { display: flex; align-items: center; } }
.typing-hero__follow span {
  color: rgba(189, 182, 182, 0.5);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ============ Mystère / à propos ============ */
.mystery {
  position: relative;
  overflow: hidden;
  background: #000;
  padding-block: 5rem;
}
@media (min-width: 768px) { .mystery { padding-block: 8rem; } }

.mystery__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: rgba(212, 160, 23, 0.05);
  border-radius: 999px;
  filter: blur(120px);
  pointer-events: none;
}

.mystery__grid {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) { .mystery__grid { grid-template-columns: repeat(2, 1fr); gap: 5rem; } }

.mystery__visual { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; }

.mystery__label { display: inline-block; padding: 0.5rem 1.25rem; background: var(--gold); margin-bottom: 2rem; }
.mystery__label-text {
  font-family: var(--font-display);
  font-weight: 900;
  color: #000;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}
@media (min-width: 768px) { .mystery__label-text { font-size: 2.25rem; } }

.mystery__cauris { position: relative; width: 100%; height: 16rem; }
@media (min-width: 768px) { .mystery__cauris { height: 20rem; } }

/* Cauris flottants — position/taille/durée pilotées par variables CSS par instance */
.cauri-float {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  animation: caauri-float var(--dur, 12s) ease-in-out infinite;
}
.cauri-float:hover { opacity: 1; transform: scale(1.5); }
.cauri-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(212, 160, 23, 0.2));
  transition: filter 0.7s;
}
.cauri-float:hover img { filter: drop-shadow(0 0 24px rgba(212, 160, 23, 0.85)); }

.mystery__text { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 1.5rem; }
.mystery__text p {
  color: #fff;
  font-size: 1rem;
  line-height: 1.7;
  text-align: justify;
}
@media (min-width: 768px) { .mystery__text p { font-size: 1.125rem; } }

/* ============ Stats (grille identique à l'accueil, sans marquee) ============ */
.section-stats {
  position: relative;
  background: #000;
  padding-block: 5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
@media (min-width: 768px) { .section-stats { padding-block: 7rem; } }

/* ============ CTA de clôture ============ */
.mystery-cta {
  position: relative;
  background: #000;
  padding-block: 5rem;
  text-align: center;
}
.mystery-cta__inner { max-width: 48rem; margin-inline: auto; padding-inline: 1rem; }
.mystery-cta__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .mystery-cta__label { font-size: 1.5rem; } }