/* macklos.com — intro vidéo de l'accueil et point orange qui rebondit de titre en titre (assets/intro.js) */

/* Fente du point au bout des titres. Sans JavaScript, elle affiche un point orange fixe. */
.point-fente { display: inline-block; position: relative; width: max(.3em, 11px); height: 0; vertical-align: baseline; }
.point-fente::before { content: ""; position: absolute; left: .05em; bottom: 0; width: clamp(8px, .2em, 16px); height: clamp(8px, .2em, 16px); border-radius: 50%; background: var(--brique); }
.point-actif .point-fente::before { visibility: hidden; }
.point-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Le point qui se déplace, et l'onde quand il se pose */
.point-volant { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--brique); pointer-events: none; z-index: 15; opacity: 0; will-change: transform; }
.point-onde { position: absolute; left: 0; top: 0; box-sizing: border-box; border: 2px solid var(--brique); border-radius: 50%; pointer-events: none; z-index: 14; opacity: 0; }

/* Accueil pendant et après l'intro : plein écran, texte centré verticalement */
.intro-joue .hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--entete, 67px)); min-height: calc(100svh - var(--entete, 67px)); }
.intro-en-cours .hero-int { opacity: 0; animation: intro-secours .4s 20s forwards; }
@keyframes intro-secours { to { opacity: 1; } }
/* Onglet en arrière-plan : pas de délai de secours tant que la page n'est pas affichée (assets/intro.js) */
.intro-attente .hero-int { animation: none; }

/* La vidéo se fond dans le fond de la page : son fond est un peu plus sombre (thème sombre) ou plus clair (thème clair) */
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 0; transition: opacity .3s ease; z-index: 1; }
.intro-video.sombre { mix-blend-mode: lighten; }
.intro-video.clair { mix-blend-mode: darken; }
.intro-video.visible { opacity: 1; }

.point-actif .hero { position: relative; }
.point-actif .hero-int { transition: opacity .35s ease; }
.intro-passer { position: absolute; right: 20px; top: 12px; z-index: 2; min-height: 44px; padding: 8px 18px; font: inherit; font-size: .82rem; color: var(--discret); background: none; border: 1px solid var(--trait); border-radius: 999px; cursor: pointer; }
.intro-passer:hover { color: var(--encre); border-color: var(--discret); }
.intro-passer:focus-visible { outline: 2px solid var(--brique); outline-offset: 3px; }

/* Petit bouton pour revoir l'animation, dans le coin de l'accueil */
.intro-rejouer { position: absolute; right: 20px; top: 12px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 0 2px; color: var(--discret); background: none; border: 1px solid var(--trait); border-radius: 50%; cursor: pointer; opacity: .7; transition: opacity .2s, color .2s, border-color .2s; }
.intro-rejouer:hover, .intro-rejouer:focus-visible { opacity: 1; color: var(--brique); border-color: var(--brique); }
.intro-rejouer:focus-visible { outline: 2px solid var(--brique); outline-offset: 3px; }
.intro-en-cours .intro-rejouer { opacity: 0; visibility: hidden; }

/* Téléphone : boutons plus petits, au-dessus du surtitre de l'accueil */
@media (max-width: 560px) {
  .intro-passer { top: 6px; right: 12px; min-height: 36px; padding: 6px 14px; }
  .intro-rejouer { top: 6px; right: 12px; width: 36px; height: 36px; }
}