/* ==========================================================================
   Ambiances de la page Bien-être, réutilisables ailleurs :
   - Couverture « tl-vapeur » : de légers nuages de vapeur montent lentement.
   - Groupe « tl-respire » : ses paragraphes s'allument et s'éteignent tour à
     tour, au rythme d'une respiration (« Chaleur · Vapeur · Silence »).
   - Paragraphe « tl-pastille-texte » : une pastille arrondie dorée.
   Animations coupées si le visiteur a choisi de réduire les animations.
   ========================================================================== */

/* Vapeur. */
.wp-block-cover.tl-vapeur {
overflow: hidden;
}

.wp-block-cover.tl-vapeur::before,
.wp-block-cover.tl-vapeur::after {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
width: 18rem;
height: 13rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.13);
filter: blur(40px);
pointer-events: none;
animation: tl-vapeur 14s ease-in-out infinite;
}

.wp-block-cover.tl-vapeur::before {
left: 10%;
}

.wp-block-cover.tl-vapeur::after {
left: 38%;
animation-delay: 6s;
}

.wp-block-cover.tl-vapeur .wp-block-cover__inner-container {
position: relative;
z-index: 2;
}

@keyframes tl-vapeur {
0% { transform: translateY(40px) scale(0.9); opacity: 0; }
40% { opacity: 1; }
100% { transform: translateY(-180px) scale(1.3); opacity: 0; }
}

/* Mots qui respirent. */
.wp-block-group.tl-respire {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem 4rem;
}

.wp-block-group.tl-respire > p {
margin: 0;
font-family: 'Bodoni Moda', serif;
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-style: italic;
color: #8a6420;
animation: tl-respire 6s ease-in-out infinite;
}

.wp-block-group.tl-respire > p:nth-child(2) {
animation-delay: 2s;
}

.wp-block-group.tl-respire > p:nth-child(3) {
animation-delay: 4s;
}

@keyframes tl-respire {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}

/* Pastille de texte. */
p.tl-pastille-texte {
display: inline-block;
width: auto;
padding: 0.35rem 0.9rem;
border: 1px solid rgba(238, 198, 104, 0.7);
border-radius: 1.4rem;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #eec668;
}

@media (prefers-reduced-motion: reduce) {
.wp-block-cover.tl-vapeur::before,
.wp-block-cover.tl-vapeur::after,
.wp-block-group.tl-respire > p {
animation: none;
}

.wp-block-group.tl-respire > p {
opacity: 1;
}
}