/* Design tokens issus de la maquette Figma "Home" (juillet 2026) */
:root {
    --fufy-ink: #1D1D1B;
    --fufy-teal: #00CDD8;
    --fufy-teal-light: #61E5DF;
    --fufy-pink: #F969A0;
    --fufy-lime: #C7DE00;
    --fufy-lime-light: #F0F769;
    --fufy-gold: #EDBF3E;
    --fufy-gold-light: #FFE7A4;
    --fufy-white: #FFFFFF;

    /* Vraies polices Figma, chargées via le kit Adobe Fonts (App.razor).
       Repli sur les équivalents Google Fonts si le kit met du temps à
       charger ou échoue. */
    --font-display: 'report-school', 'Baloo 2', sans-serif;
    --font-hand: 'chaloops', 'Short Stack', cursive;
}

/* Utilitaires responsive partagés par les sections de la home (breakpoint aligné sur les frames Figma 393px / 1728px) */
.mobile-only {
    display: block;
}

.desktop-only {
    display: none;
}

@media (min-width: 992px) {
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }
}

/* Révélation au scroll (voir wwwroot/js/scrollReveal.js, un IntersectionObserver
   qui ajoute .is-visible au premier passage dans le viewport, une seule fois).
   Tout dans @media (prefers-reduced-motion: no-preference) : si l'utilisateur
   préfère moins d'animations, le contenu reste simplement visible d'emblée
   (jamais masqué par opacity:0) plutôt que de désactiver l'animation en JS. */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transition: opacity 0.7s ease, transform 0.7s ease;
    }

    /* Par défaut : légère apparition depuis le haut. */
    .reveal-up {
        transform: translateY(2rem);
    }

    /* Pour les éléments qui se chevauchent côte à côte (ex. le zig-zag des
       milestones) : chacun arrive depuis le sens opposé à celui de l'autre,
       comme s'ils convergeaient l'un vers l'autre. */
    .reveal-from-left {
        transform: translateX(-2.5rem);
    }

    .reveal-from-right {
        transform: translateX(2.5rem);
    }

    .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

.btn-pill {
    position: relative;
    /* Isole le ::before (remplissage) dans son propre contexte d'empilement :
       le z-index négatif reste cantonné à ce bouton plutôt que de risquer de
       passer derrière d'autres éléments de la page. */
    isolation: isolate;
    overflow: hidden;
    font-family: var(--font-display);
    /* Le Figma est toujours en weight 400 (jamais 700), Report School est
       déjà visuellement épais à cette graisse. */
    font-weight: 400;
    /* Figma: 45px (mobile 393px) -> 65px (desktop 1728px). */
    font-size: clamp(2.813rem, 2.445rem + 1.498cqw, 4.063rem);
    line-height: 1.2;
    border-radius: 999px;
    padding: 0.95rem 2rem;
    /* Aucun des 2 boutons n'a de fond dans le Figma (fills: [{visible:false}]
       sur les 2 instances, vérifié dans les données brutes de l'API) —
       seul le contour est visible. La couleur du contour, elle, diffère par
       bouton sur mobile (teal / lime) et devient noire pour les 2 sur
       desktop, d'après les mêmes données. --btn-color porte cette couleur
       pour pouvoir la réutiliser comme fond au survol. */
    --btn-color: var(--fufy-ink, #1D1D1B);
    background: transparent;
    border: 3px solid var(--btn-color);
    color: var(--fufy-ink, #1D1D1B);
    cursor: pointer;
    text-align: center;
    transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-pill-primary {
    --btn-color: var(--fufy-teal, #00CDD8);
}

.btn-pill-outline {
    --btn-color: var(--fufy-lime, #C7DE00);
}

/* Remplissage en 3 taches d'encre (pas un cercle net, pas un aplat uniforme)
   dont la position/taille/forme/rotation sont tirées au sort à chaque survol
   par wwwroot/js/btnPillBlobs.js (injectées en custom properties --blob-*) —
   un aplat de couleur uniforme sur toute la surface, ou même 3 formes figées
   toujours identiques, avait l'air trop mécanique à côté du reste de la page
   (soulignements ondulés, crayon qui pivote). Le bouton lui-même reste
   transparent : ce sont ces formes, cachées derrière le texte (.btn-pill-label,
   z-index au-dessus), qui portent la couleur et le fondu. Nécessite 3 <span>
   réels dans le markup (pas juste ::before/::after, qui ne donnent que 2
   formes) — voir HeroSection.razor et Home.razor. Les valeurs par défaut
   ci-dessous ne servent qu'en repli si le JS n'a pas encore tourné (avant le
   tout premier survol, ou si JS est désactivé). Easing sans dépassement (pas
   de cubic-bezier "back") pour ne pas rebondir en fin de course. */
.btn-pill-label {
    position: relative;
    z-index: 1;
}

.btn-pill-blob {
    position: absolute;
    z-index: 0;
    top: var(--blob-top, -30%);
    left: var(--blob-left, 10%);
    width: var(--blob-w, 55%);
    height: var(--blob-h, 140%);
    border-radius: var(--blob-radius, 42% 58% 63% 37% / 46% 62% 38% 54%);
    background-color: var(--fufy-lime, #C7DE00);
    transform: scale(0) rotate(var(--blob-rotate, 0deg));
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.btn-pill-primary .btn-pill-blob {
    background-color: var(--fufy-teal, #00CDD8);
}

.btn-pill:hover,
.btn-pill:focus-visible {
    color: var(--fufy-ink, #1D1D1B);
    /* Léger "pop" + ombre douce en plus du remplissage. */
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 16px rgba(29, 29, 27, 0.18);
}

.btn-pill:hover .btn-pill-blob,
.btn-pill:focus-visible .btn-pill-blob {
    /* 2.6 (plutôt que ~2) : combiné aux plages de btnPillBlobs.js, garantit
       qu'une seule tache recouvre déjà tout le bouton quel que soit le
       tirage, pour ne jamais laisser un coin/bord découvert. */
    transform: scale(2.6) rotate(var(--blob-rotate, 0deg));
}

/* Délai décalé entre les 3 taches : même avec des positions aléatoires,
   les faire grossir toutes en même temps ferait un seul "pop" uniforme. */
.btn-pill:hover .btn-pill-blob-2,
.btn-pill:focus-visible .btn-pill-blob-2 {
    transition-delay: 0.07s;
}

.btn-pill:hover .btn-pill-blob-3,
.btn-pill:focus-visible .btn-pill-blob-3 {
    transition-delay: 0.14s;
}

.btn-pill:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 4px 8px rgba(29, 29, 27, 0.16);
}

@media (min-width: 992px) {
    .btn-pill {
        padding: 1.1rem 2.5rem;
        --btn-color: var(--fufy-ink, #1D1D1B);
    }
}

/* Mécanique partagée du lien "connexion/inscription" (soulignement animé au
   survol) — réutilisée par MarketingLayout (header) et CapableSection (CTA
   du bas), qui ne redéfinissent localement que leur propre font-size.
   Nommée "home-nav-link" (et pas juste "nav-link") : ce fichier est chargé
   globalement pour toute l'app, et ".nav-link" est déjà pris par Bootstrap
   et par NavMenu.razor (la sidebar) — le réutiliser ici faisait fuiter ce
   style (et le survol bleu par défaut de Bootstrap sur <a>) sur tous les
   nav-links de l'appli, pas seulement ceux de la home. */
.home-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display, sans-serif);
    font-weight: 400;
    color: var(--fufy-ink, #1D1D1B);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.2s ease;
}

.home-nav-link:hover,
.home-nav-link:focus-visible {
    color: var(--fufy-lime, #C7DE00);
}

.home-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.24em;
    height: 0.42em;
    background-image: url('/images/home/wave-underline.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: 0;
    transform: translateY(-0.4em);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.home-nav-link:hover::after,
.home-nav-link:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* Icônes en <span> + mask-image (pas <img>) : un <img src="*.svg"> a sa
   couleur figée dans le fichier et ignore le CSS, alors qu'un mask suit
   background-color: currentColor et donc la couleur du texte au survol. */
.home-nav-link-icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.home-nav-link-icon-login {
    /* icon-small-arrow.svg (33x36) : flèche vers une porte, icône "connexion". */
    -webkit-mask-image: url('/images/home/icon-small-arrow.svg');
    mask-image: url('/images/home/icon-small-arrow.svg');
    aspect-ratio: 33 / 36;
    transition: transform 0.25s ease;
}

/* La flèche de connexion se décale légèrement vers la droite au survol,
   comme si elle amorçait son mouvement vers la porte. */
.home-nav-link:hover .home-nav-link-icon-login,
.home-nav-link:focus-visible .home-nav-link-icon-login {
    transform: translateX(0.2em);
}

.home-nav-link-icon-register {
    /* icon-arrow.svg (36x49) : malgré son nom, c'est le crayon — icône "inscription". */
    -webkit-mask-image: url('/images/home/icon-arrow.svg');
    mask-image: url('/images/home/icon-arrow.svg');
    aspect-ratio: 36 / 49;
    transition: transform 0.25s ease;
}

/* Le crayon (inscription uniquement, pas la flèche de connexion) pivote
   légèrement au survol comme s'il pointait vers le mot "inscription". */
.home-nav-link:hover .home-nav-link-icon-register,
.home-nav-link:focus-visible .home-nav-link-icon-register {
    transform: rotate(60deg);
}