/**
* C2S — Transitions CSS
* Styles pour le Side by Side Page Transition (Barba.js / Osmo)
*
* Structure HTML (conforme au boilerplate Osmo) :
*
* ← persistent, hors container
* …
* … ← persistent, hors container
*
*/
/* Chaque container Barba a un fond opaque pour que le fond
du body ne transparaisse pas à travers le contenu */
[data-barba="container"] {
background-color: var(--color-bg, #fff);
}
/* Wrapper temporaire créé par prepareForTransition() (ancien boilerplate) */
/* Supprimé pour l'instant */
.transition {
z-index: var(--z-transition);
pointer-events: none;
position: fixed;
inset: 0;
overflow: clip;
}
.transition__panel {
background-color: var(--darklighter);
justify-content: center;
align-items: center;
width: 100%;
height: 120%;
display: flex;
position: absolute;
top: 100%;
left: 0;
will-change: transform;
}
.transition__label {
color: var(--white);
text-transform: uppercase;
font-size: var(--34px-size);
letter-spacing: -0.02em;
position: absolute;
top: 70vh;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
}
/* ---------------------------------------------------------------
Mobile / tablette (≤ 991px)
Sur petite largeur, un label un peu long (« Acquisition de trafic »,
« Accompagnement SEO », « Stratégie digitale »…) wrappait sur 2
lignes : SplitText animait alors chaque ligne char-par-char →
rendu moche (mots cassés, retours à la ligne pendant l'anim).
Fix chirurgical :
- white-space: nowrap → SplitText voit 1 seule ligne, anim propre.
- font-size fluide (clamp) pour que ça tienne quand même.
- max-width: 92vw au cas où, .transition a déjà overflow: clip.
On ne touche RIEN du JS / SplitText / timeline GSAP.
--------------------------------------------------------------- */
@media screen and (max-width: 991px) {
.transition__label {
font-size: clamp(1.25rem, 6vw, 1.75rem);
white-space: nowrap;
max-width: 92vw;
}
}
/* Rounded-div curve technique (Dennis Snellenberg) */
.transition__rounded-wrap {
width: 100%;
position: absolute;
overflow: hidden;
height: 0;
z-index: 2;
will-change: height;
}
.transition__rounded-wrap.top {
top: 0;
transform: translateY(-99%) scaleY(-1);
}
.transition__rounded-wrap.bottom {
top: unset;
bottom: 0;
transform: translateY(99%);
}
.transition__rounded {
width: 150%;
display: block;
position: absolute;
background: var(--darklighter);
height: 745%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -86.666%);
z-index: 1;
}