/* Effets graphiques de l'accueil de Montpellier Plage (29/09/2026) : le
   sillage sur la photo du bassin, la phrase en vague et les vagues du bandeau
   final. Sources des scripts : www/shared/effets-src. Règles communes : un
   canevas ne reçoit jamais de clic, ne se montre qu'une fois dessiné, et la
   page reste entière sans lui. */

/* Sillage : le canevas se pose sur la photo du bassin, sous l'étiquette, et
   suit le zoom de survol de la photo qu'il recouvre. Il ne reçoit aucun clic :
   le lien vers l'espace aquatique reste intact. */
.effet-sillage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s var(--ease-out, ease-out), transform .7s var(--ease-out, ease-out);
}
.effet-sillage.est-pret { opacity: 1; }
.v2-compo-images figure:hover .effet-sillage { transform: scale(1.03); }

/* Vagues : fond du bandeau final, sous un voile qui garde le texte lisible.
   Le voile reprend l'encre du site, plus dense au centre : le blanc y
   reste au-dessus de 4,5:1 même sur la crête la plus claire. */
.cta-final[data-effet="vagues"] > .effet-vagues {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s var(--ease-out, ease-out);
}
.cta-final[data-effet="vagues"] > .effet-vagues.est-pret { opacity: 1; }
.cta-final[data-effet="vagues"]::after {
    content: '';
    position: absolute;
    inset: 0;
    /* dense derrière le texte, léger sur les bords où les vagues se voient */
    background: radial-gradient(ellipse 56% 70% at 50% 54%, rgba(20, 48, 61, .74) 40%, rgba(20, 48, 61, .16));
    pointer-events: none;
}
/* Sur téléphone, le texte prend toute la largeur et sortait de la zone dense
   du voile (paragraphe mesuré à 3,6:1) : voile uniforme. */
@media (max-width: 700px) {
    .cta-final[data-effet="vagues"]::after { background: rgba(20, 48, 61, .66); }
}
.cta-final[data-effet="vagues"] .container { z-index: 2; }
/* Le bouton à contour n'a pas de fond : sur une crête claire, son libellé
   blanc passait sous 4:1. Un fond d'encre le garde lisible partout. */
.cta-final[data-effet="vagues"] .btn-outline { background: rgba(20, 48, 61, .6); }

/* Texte en vague : la phrase est un paragraphe ; le SVG la redessine sur
   une houle et le paragraphe passe alors en lecture seule pour les
   lecteurs d'écran. Sans script, la phrase reste lisible, sur une ligne. */
.effet-texte-vague {
    position: relative;
    padding: 18px 0 30px;
    overflow: hidden;
    color: var(--v2-encre, #14303d);
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.effet-texte-vague.en-main { cursor: grabbing; }
.texte-vague-texte {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 20px;
    font-family: var(--font-heading, serif);
    font-style: italic;
    font-size: clamp(1.3rem, 3vw, 2rem);
    text-align: center;
}
.effet-texte-vague.est-pret .texte-vague-texte {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.texte-vague-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-heading, serif);
    font-style: italic;
    fill: currentColor;
    pointer-events: none;
}
.texte-vague-mesure { visibility: hidden; }
/* Avant la mesure, le SVG est en place mais invisible et hors du flux : un
   SVG en display: none renverrait une longueur de texte nulle. */
.effet-texte-vague:not(.est-pret) .texte-vague-svg {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}