/* ==========================================================================
   Scroll Text Circle — SVG textPath scrolling along a curved path
   Adapted for C2S (PP Neue Montreal, no Inter)
   ========================================================================== */

.scroll-text-circle {
    position: relative;
    margin-bottom: -65vh;
}

.scroll-text-circle__track {
    height: 280vh;
}

.scroll-text-circle__viewport {
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.scroll-text-circle svg {
    width: 100%;
    height: auto;
    overflow: visible;
    transform: translate(0, 50%) scale(1.1, 1.1);
}

.scroll-text-circle textPath {
    fill: currentColor;
    font-size: 7vw;
    font-weight: 500;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

/* ==========================================================================
   Responsive — Mobile + Tablette (≤ 991px) — TRICHE CSS uniquement
   ==========================================================================
   On NE TOUCHE PAS au JS (texte-scroll-effect-circle.js : path length,
   textLen, ScrollTrigger pin/scrub, startOffset → finalOffset, etc.). On
   ne fait QUE :
     - bumper la font-size du textPath (7vw → 70vw, comme demandé)
     - élargir le track pour que le scroll-scrub accommode le texte
       beaucoup plus long (textLen × ~10 → track height × ~3)
     - scaler/remonter le SVG via transform CSS pour faire monter le texte
       plus haut dans le viewport (le SVG est translate(0,50%) en desktop,
       on passe à translate(0,-10%) en mobile)
     - laisser le viewport pin/scrub intact (.scroll-text-circle__viewport)
   Le JS continue de calculer textLen via canvas API, donc finalOffset se
   recalcule AUTOMATIQUEMENT en mobile grâce à la font-size accrue. Aucune
   modif JS nécessaire. ========================================================================== */
@media screen and (max-width: 991px) {
    /* Track scroll : on dimensionne PROPORTIONNELLEMENT à la font-size
       mobile. Desktop = 7vw → 280vh. Mobile = 32vw → 280 × (32/7) ≈ 1280vh
       en théorie, mais le JS recalcule textLen via canvas.measureText
       (cf. _stcGetTextWidth) donc on peut être plus serré : 400vh suffit
       pour que le scrub balaye la phrase entière sans la précipiter. */
    .scroll-text-circle__track {
        height: 400vh;
    }

    /* Margin-bottom du wrapper : moins négatif pour pas écraser la section
       suivante (.cseo-advantages "Ce que je fais mieux"). */
    .scroll-text-circle {
        margin-bottom: -30vh;
    }

    /* SVG agrandi + remonté : transform-origin par défaut (center) → on
       scale 2.5× puis on translate -10% pour faire monter le texte vers
       le haut du viewport (le user voulait "remonter plus haut"). */
    .scroll-text-circle svg {
        transform: translate(0, -10%) scale(2.5, 2.5);
    }

    /* Font-size 32vw : compromis entre l'original 7vw (illisible sur
       mobile) et 70vw (trop énorme, lettre par lettre). À 390px ça donne
       ~125px par lettre → texte vraiment impactant qui défile
       fluidement à mesure que l'user scrolle. */
    .scroll-text-circle textPath {
        font-size: 32vw;
    }
}