@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, a:hover, a:active {
    color: white;
    text-decoration: none;
}

    /* Le contour n'est retire qu'au clic ou au toucher : au clavier, :focus-visible
       le garde, sans quoi on ne voit plus ou l'on se trouve (WCAG 2.4.7). */
    *:focus:not(:focus-visible) {
        outline: none;
    }

    :focus-visible {
        outline: 2px solid #B79CF0;
        outline-offset: 3px;
    }

    /* Elements qui ne prennent le focus que par le code (tabindex="-1") : le h1 que
       FocusOnNavigate cible a chaque navigation, la modale video. Au chargement, Chrome
       juge ce focus "visible" et l'encadrerait ; on ne l'atteint pas au clavier, il
       n'a donc pas besoin de contour. */
    [tabindex="-1"]:focus {
        outline: none;
    }

button {
    background: none;
    border: none;
    cursor: pointer;
}

body {
    height: 100vh;
}

.left-block::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background: linear-gradient( 180deg, #7D3CD5 47.6%, rgba(153, 153, 153, 0.00) 100% );
    background-size: 100% 100%;
}

/* ==================================================================
   Animations d'apparition au scroll

   Volontairement global (et non en CSS isole) : le CSS isole Blazor porte un
   attribut de scope par composant, donc des regles definies dans
   Index.razor.scss ne s'appliqueraient pas aux .reveal rendus par
   StepCarousel.

   L'etat masque est conditionne a .js-reveal, classe posee sur <html> par le
   script inline de App.razor. Sans JS (ou si le runtime ne demarre pas), rien
   n'est masque et le contenu reste lisible.
   ================================================================== */

.js-reveal .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

    .js-reveal .reveal.in-view {
        opacity: 1;
        transform: none;
    }

.js-reveal .reveal-delay-1.in-view {
    transition-delay: 0.12s;
}

.js-reveal .reveal-delay-2.in-view {
    transition-delay: 0.24s;
}

.js-reveal .reveal-delay-3.in-view {
    transition-delay: 0.36s;
}

.js-reveal .reveal-delay-4.in-view {
    transition-delay: 0.48s;
}

.js-reveal .reveal-delay-5.in-view {
    transition-delay: 0.60s;
}

.js-reveal .reveal-delay-6.in-view {
    transition-delay: 0.72s;
}

/* Barre de defilement de <main> : la piste demarre sous le bandeau fixe. */
main::-webkit-scrollbar {
    width: 10px;
}

main::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

main::-webkit-scrollbar-track {
    margin-top: 80px;
    background: transparent;
}

@media (max-width: 850px) {
    main::-webkit-scrollbar-track {
        margin-top: 60px;
    }
}

/* ==================================================================
   Boutons de telechargement (stores)

   Seul composant du blog a vivre ici, et pour une raison precise : la landing
   ET le corps des articles l'utilisent. Une feuille isolee ne traverse pas
   d'un composant a l'autre, il faudrait donc l'ecrire deux fois. Tout le
   reste des blocs d'article (.game-item, .article-cta...) est dans
   Post.razor.scss.

   SPECIFICITE — a ne pas simplifier.
   Les feuilles isolees Blazor suffixent leurs selecteurs d'un attribut :
   .post-content a devient .post-content[b-xyz] a, soit 0-1-1, et elles sont
   chargees APRES ce fichier. Un simple .btn-store-google (0-1-0) perdrait
   contre la regle "a" du corps d'article, qui souligne et colore les liens en
   violet. D'ou le prefixe .btns-container partout : on passe a 0-2-1 minimum.
   ================================================================== */

.btns-container {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
}

    /* Dans un article, les boutons sont centres sous l'encart de fin. */
    .article-cta .btns-container,
    .btns-container.is-centered {
        justify-content: center;
    }

    .btns-container a.btn-store-google,
    .btns-container a.btn-store-apple {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        height: 50px;
        /* min-width et non width : le libelle est en nowrap, une largeur figee le
       faisait deborder des que la traduction depassait "Google Play". */
        min-width: 200px;
        padding: 10px 20px;
        border: solid 2px #733EBB;
        border-radius: 8px;
        background-color: rgba(115, 62, 187, 0.13);
        text-decoration: none;
        /* La typographie est posee sur le lien lui-meme et non seulement sur
           le <span> : le HTML des articles (CMS) ne l entoure pas toujours d un
           span, et le libelle heritait alors des 18px du corps d article, avec
           retour a la ligne. Quelle que soit la balise, le texte herite d ici. */
        font-family: Lato, sans-serif;
        font-size: 20px;
        color: white;
        white-space: nowrap;
        transition: background-color 0.3s ease;
    }

        .btns-container a.btn-store-google:hover,
        .btns-container a.btn-store-apple:hover {
            background-color: rgba(115, 62, 187, 0.6);
            text-decoration: none;
        }

        .btns-container a.btn-store-google:focus-visible,
        .btns-container a.btn-store-apple:focus-visible {
            outline: 2px solid #B79CF0;
            outline-offset: 3px;
        }

        .btns-container a.btn-store-google span,
        .btns-container a.btn-store-apple span {
            font-family: 'Lato', sans-serif;
            font-weight: 400;
            font-size: 20px;
            color: white;
            text-decoration: none;
            white-space: nowrap;
        }

    /* Les logos sont des pictogrammes, pas des illustrations : ils doivent
   echapper aux marges et a l'arrondi que le corps d'article applique a
   toutes les images. */
    .btns-container .btn-icon img {
        width: 30px;
        height: auto;
        margin: 0;
        border-radius: 0;
        flex: 0 0 auto;
    }

/* Une seule bascule au lieu des trois paliers precedents (900, 769-1100, 600),
   qui se chevauchaient et s'annulaient entre 769 et 900. Les boutons ne
   s'etirent que sur un ecran vraiment etroit ; au-dessus ils gardent leur
   largeur naturelle. Le min-width doit etre leve ici, sinon il les empeche de
   retrecir et ils repassent a la ligne. */
@media (max-width: 768px) {
    .btns-container {
        gap: 12px;
        flex-wrap: nowrap;
    }

        .btns-container a.btn-store-google,
        .btns-container a.btn-store-apple {
            flex: 1 1 0;
            min-width: 0;
            max-width: 200px;
            height: 46px;
            gap: 8px;
            padding: 8px 14px;
            font-size: 13px;
        }

            .btns-container a.btn-store-google span,
            .btns-container a.btn-store-apple span {
                font-size: 13px;
            }

        .btns-container .btn-icon img {
            width: 22px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btns-container a.btn-store-google,
    .btns-container a.btn-store-apple {
        transition: none;
    }
}