/* Ouverture en mosaique — Institut de Champel, Gynecologie. */
.intro {
  position: fixed; inset: 0; z-index: 100; visibility: visible; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 3.2vh, 32px); padding: 24px;
  background: #050506; color: #FCFAF6;
}
.intro-logo { position: relative; transform-origin: 50% 30%; }
.intro-tuile { position: absolute; background-repeat: no-repeat; will-change: transform, opacity; box-shadow: inset 0 0 0 .6px rgba(204,165,78,.6); }
.intro-logo.soude .intro-tuile { box-shadow: inset 0 0 0 0 rgba(204,165,78,0); transition: box-shadow .7s ease; }
.intro-masque { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.intro-eclat { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, rgba(255,236,190,0) 38%, rgba(255,236,190,.5) 50%, rgba(255,236,190,0) 62%); transform: translateX(-130%); mix-blend-mode: soft-light; }
.intro-texte { min-height: 3.6em; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.intro-ligne1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(.82rem, 1.6vw, 1.12rem); letter-spacing: .24em; text-transform: uppercase; color: #E3C47D; }
.intro-ligne2 { font-family: system-ui, "Segoe UI", sans-serif; font-size: clamp(.8rem, 1.3vw, .95rem); letter-spacing: .1em; color: rgba(252,250,246,.72); }
.intro-curseur { display: inline-block; width: 1px; height: 1em; margin-left: 4px; vertical-align: -.12em; background: #E3C47D; animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.intro-passer {
  position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  background: transparent; color: rgba(252,250,246,.85); border: 1px solid rgba(252,250,246,.4); border-radius: 40px;
  padding: 8px 20px; font: inherit; font-size: .85rem; letter-spacing: .04em; cursor: pointer;
}
.intro-passer:hover, .intro-passer:focus-visible { border-color: #FCFAF6; color: #FCFAF6; outline: none; }
@media (prefers-reduced-motion: reduce) { .intro-curseur { animation: none; } }