/* ==========================================================================
   TRANSITIONS DE PAGE (iris) ET CURSEUR
   ========================================================================== */

/* --- View Transitions entre documents (Chrome, Edge, Safari 18.2+) ---------
   Comme l'iris du logo : il se ferme sur la page courante, puis s'ouvre sur la
   page suivante, depuis le point de clic. Le fond révélé entre les deux est le
   décor de la page d'arrivée (--fond, porté par html[data-decor]) : noir pour
   l'accueil, le portfolio ou les services (fermeture au noir), crème pour la
   location, jaune pour le devis. Les cercles sont
   animés par head.js (événement pagereveal) ; ces règles donnent un résultat
   centré correct si ce script ne tourne pas. */
@view-transition {
    navigation: auto;
}

::view-transition {
    background-color: var(--fond, var(--c-jaune));
}

::view-transition-group(root) {
    animation-duration: var(--dur-cine);
}

::view-transition-old(root) {
    animation: iris-fermeture calc(var(--dur-cine) * 0.45) var(--ease-sortie) both;
}

::view-transition-new(root) {
    animation: iris-ouverture calc(var(--dur-cine) * 0.6) var(--ease-entree) calc(var(--dur-cine) * 0.4) both;
}

@keyframes iris-fermeture {
    from {
        clip-path: circle(75% at 50% 50%);
    }
    to {
        clip-path: circle(0% at 50% 50%);
    }
}

@keyframes iris-ouverture {
    from {
        clip-path: circle(0% at 50% 50%);
    }
    to {
        clip-path: circle(75% at 50% 50%);
    }
}

/* L'en-tête reste en place pendant la transition. */
::view-transition-group(entete) {
    animation-duration: var(--dur-standard);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition {
        background-color: transparent;
    }
    ::view-transition-group(root) {
        animation-duration: var(--dur-rapide);
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: fondu var(--dur-rapide) linear both;
    }
    ::view-transition-old(root) {
        animation-direction: reverse;
    }
}

@keyframes fondu {
    from {
        opacity: 0;
    }
}

/* --- Repli JS (navigateurs sans View Transitions entre documents) ----------
   Un disque (couleur du décor de la page visée) s'agrandit depuis le clic, la page suivante s'ouvre en le
   réduisant. Seulement transform et opacity. */
.rideau {
    position: fixed;
    inset: 0;
    z-index: var(--z-rideau);
    pointer-events: none;
    overflow: hidden;
}

.rideau__disque {
    position: absolute;
    width: var(--diametre, 300vmax);
    height: var(--diametre, 300vmax);
    left: 0;
    top: 0;
    border-radius: 50%;
    background: var(--iris, var(--fond, var(--c-jaune)));
    transform: translate(-50%, -50%) scale(0);
}

/* Page qui arrive après un rideau : couverte dès le premier rendu (head.js). */
.rideau-entrant body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-rideau);
    background: var(--fond, var(--c-jaune));
    pointer-events: none;
    animation: secours-rideau var(--dur-standard) linear 2s forwards;
}

.rideau-entrant.rideau-pret body::before {
    display: none;
}

@keyframes secours-rideau {
    to {
        opacity: 0;
    }
}

/* --- Curseur personnalisé (souris uniquement) ----------------------------- */
.curseur {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-curseur);
    pointer-events: none;
    display: none;
}

.a-curseur .curseur {
    display: block;
}

/* On masque le curseur système uniquement quand le nôtre est actif,
   et jamais dans les champs de saisie. */
.a-curseur,
.a-curseur a,
.a-curseur button,
.a-curseur [role="button"] {
    cursor: none;
}

.a-curseur input,
.a-curseur textarea,
.a-curseur select {
    cursor: auto;
}

.curseur__point,
.curseur__anneau {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    will-change: transform;
}

.curseur__point {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--c-jaune);
    mix-blend-mode: difference;
}

.curseur__anneau {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 1.5px solid var(--c-jaune);
    mix-blend-mode: difference;
    transition:
        scale var(--dur-rapide) var(--ease-entree),
        opacity var(--dur-rapide) linear;
}

.curseur__libelle {
    font-family: var(--f-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-encre);
    opacity: 0;
    scale: 0.6;
    transition:
        opacity var(--dur-rapide) linear,
        scale var(--dur-rapide) var(--ease-entree);
}

/* Survol d'un lien ou d'un bouton : l'anneau grossit, le point s'efface. */
.curseur.est-lien .curseur__anneau {
    scale: 1.45;
}

.curseur.est-lien .curseur__point {
    opacity: 0;
}

/* États avec libellé : disque plein jaune, texte encre. */
.curseur.a-libelle .curseur__anneau {
    scale: 2.1;
    background: var(--c-jaune);
    mix-blend-mode: normal;
}

.curseur.a-libelle .curseur__libelle {
    opacity: 1;
    scale: calc(1 / 2.1);
}

.curseur.a-libelle .curseur__point {
    opacity: 0;
}

.curseur.sur-jaune .curseur__point {
    background: var(--c-encre);
    mix-blend-mode: normal;
}

.curseur.sur-jaune .curseur__anneau {
    border-color: var(--c-encre);
    mix-blend-mode: normal;
}

.curseur.sur-jaune.a-libelle .curseur__anneau {
    background: var(--c-encre);
}

.curseur.sur-jaune .curseur__libelle {
    color: var(--c-jaune);
}

/* Scène concert : bâton lumineux rose (seul halo du site, propre au néon). */
.curseur.est-baton .curseur__anneau {
    width: 12px;
    height: 46px;
    margin: -40px 0 0 -6px;
    border: 0;
    border-radius: 6px;
    background: var(--c-neon);
    box-shadow: 0 0 18px var(--c-neon);
    mix-blend-mode: normal;
    rotate: -18deg;
}

.curseur.est-baton .curseur__point {
    opacity: 0;
}

.curseur.est-presse .curseur__anneau {
    scale: 0.8;
}

.curseur.est-cache .curseur__anneau,
.curseur.est-cache .curseur__point {
    opacity: 0;
}