/* ==========================================================================
   SPORTIGO — hero de la landing page, code en HTML/CSS (sportigo.html)
   --------------------------------------------------------------------------
   Reproduction de la maquette Figma (Page > Section – Hero + Navigation,
   1280 x 832). La scene garde ses dimensions de maquette et est mise a
   l'echelle de son cadre par script-case.js (--mock-scale) : toutes les
   cotes ci-dessous sont donc celles de Figma, en px.
   Polices : Switzer (Fontshare) et Inter (Google Fonts), chargees dans le
   <head> de la page.
   ========================================================================== */

/* ---------- Cadre et mise a l'echelle ---------- */

.case-mock {
    position: relative;
    aspect-ratio: 1280 / 832;
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 1px 2px -1px rgba(0, 0, 0, 0.06),
        0 2px 4px 0 rgba(0, 0, 0, 0.04);
}

.sg-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 832px;
    transform: scale(var(--mock-scale, 1));
    transform-origin: 0 0;
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
    color: #0d0e14;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
}

.sg-stage img {
    display: block;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
}

.sg-stage p {
    margin: 0;
}

/* Figma rogne les lignes de ces textes a la hauteur des capitales
   (text-box-trim) : sans ca, chaque libelle prend quelques px de trop.
   Navigateurs sans support : leger decalage vertical, sans casse. */
.sg-trim {
    text-box: trim-both cap alphabetic;
}

/* Comme dans la maquette (shrink-0) : les blocs gardent leur taille et
   debordent des cartes, rognees par overflow. */
.sg-card > *,
.sg-card-head > *,
.sg-list > * {
    flex-shrink: 0;
}

/* ---------- Carte du hero ---------- */

.sg-hero {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    height: 800px;
    overflow: hidden;
    border-radius: 16px;
    background-image:
        linear-gradient(180deg, #fff 11.375%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(147.79deg, #5e7bf6 35.124%, #3749f6 68.44%);
    /* Fonds poses sous la bordure : sinon les degrades se repetent et leur
       bas bleu reapparait en filet le long du bord haut. */
    background-origin: border-box;
}

/* Contour peint par-dessus le contenu, comme un trait interieur Figma. Une
   vraie bordure laissait une bande d'1px sous le tableau de bord (coupe au
   bord interieur) ou l'on voyait le fond bleu et le bas des cartes. Sans
   bordure, les positions ci-dessous gagnent 1px pour rester celles de Figma. */
.sg-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(13, 14, 20, 0.06);
    border-radius: inherit;
    pointer-events: none;
}

.sg-tag {
    position: absolute;
    top: calc(50% - 215.5px);
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 9.821px 12.821px;
    border: 0.821px solid rgba(55, 73, 246, 0.1);
    border-radius: 99px;
    background: rgba(55, 73, 246, 0.1);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #3749f6;
    white-space: nowrap;
}

.sg-intro {
    position: absolute;
    top: 223px;
    left: calc(50% + 0.5px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.sg-title {
    font-size: 56px;
    line-height: 1;
    letter-spacing: -1.12px;
    text-align: center;
    white-space: nowrap;
}

.sg-lead {
    width: 448px;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: rgba(13, 14, 20, 0.6);
    text-align: center;
}

.sg-actions {
    display: flex;
    gap: 8px;
}

.sg-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px 9px 18px;
    border-radius: 12px;
    background: #f8f8f8;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 22.5px;
    letter-spacing: -0.2344px;
    color: #0d0e14;
    white-space: nowrap;
}

.sg-btn--primary {
    background-image: linear-gradient(187.09deg, #3749f6 39.381%, #5e7bf6 98.542%, #3749f6 147.54%);
    color: #f7fafc;
}

/* Fondu bas de la carte, sous le tableau de bord. */
.sg-hero-fade {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 928px;
    height: 94px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f9f9f9 75.481%);
}

/* ---------- Tableau de bord ---------- */

.sg-dash {
    position: absolute;
    top: 519px;
    left: calc(50% - 0.1px);
    transform: translateX(-50%);
    display: flex;
    border: 1.224px solid #f3f3f5;
    border-radius: 16px;
    background: #f3f3f5;
}

.sg-aside {
    width: 191.804px;
    padding: 24px 12px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sg-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 31.87px;
    padding: 3.934px;
}

.sg-brand-logo {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid rgba(13, 14, 20, 0.06);
    border-radius: 8px;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.90505 -5.0476 1.4325 -0.35064 18.829 40.478)'><stop stop-color='rgba(232,237,156,1)' offset='0'/><stop stop-color='rgba(235,245,125,1)' offset='0.5'/><stop stop-color='rgba(237,252,93,1)' offset='1'/></radialGradient></defs></svg>");
}

.sg-brand-logo img {
    position: absolute;
    top: calc(50% + 0.57px);
    left: calc(50% + 0.07px);
    width: 20px;
    height: 7px;
    transform: translate(-50%, -50%);
}

.sg-brand-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 0.9;
}

.sg-brand-name {
    font-size: 14px;
    letter-spacing: -0.42px;
}

.sg-brand-plan {
    font-size: 12px;
    letter-spacing: -0.36px;
    color: rgba(13, 14, 20, 0.5);
}

.sg-nav {
    display: flex;
    flex-direction: column;
    gap: 1.967px;
}

.sg-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.36px;
    color: rgba(13, 14, 20, 0.6);
}

.sg-nav-item.is-active {
    border-radius: 8px;
    background: #fff;
    color: #0d0e14;
}

.sg-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sg-nav-link img {
    width: 11.803px;
    height: 11.803px;
}

.sg-nav-chevron {
    width: 11.803px;
    height: 11.803px;
    transform: rotate(180deg);
}

.sg-main {
    width: 736px;
    padding: 4px;
}

.sg-main-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(13, 14, 20, 0.06);
    border-radius: 12px;
    background: #fff;
}

.sg-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
}

.sg-topbar-title {
    font-size: 24px;
    line-height: 0.9;
    letter-spacing: -0.72px;
}

.sg-topbar-actions {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 16px;
}

.sg-topbar-actions > img:first-child {
    width: 15.738px;
    height: 15.738px;
}

/* Filet vertical : la ligne horizontale de la maquette, tournee de 90deg. */
.sg-topbar-divider {
    display: block;
    width: 0.984px;
    height: 32px;
    position: relative;
}

.sg-topbar-divider img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 0.984px;
    transform: translate(-50%, -50%) rotate(90deg);
}

.sg-user {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sg-user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 0.9;
    letter-spacing: -0.36px;
}

.sg-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid rgba(13, 14, 20, 0.06);
    border-radius: 8px;
}

/* Photo deja recadree sur le visage (64 px pour les ecrans Retina). */
.sg-avatar img {
    width: 100%;
    height: 100%;
}

.sg-user-caret {
    width: 11.803px;
    height: 11.803px;
    transform: rotate(90deg);
}

.sg-content {
    display: flex;
    gap: 12px;
    height: 287.689px;
}

.sg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    overflow: hidden;
    border: 1.103px solid rgba(13, 14, 20, 0.06);
    border-radius: 12px;
    background: #fff;
}

.sg-card--revenue {
    flex: 1 0 0;
    min-width: 0;
    height: 100%;
}

.sg-card-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sg-card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sg-card--email .sg-card-row {
    align-items: flex-end;
}

.sg-label {
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.36px;
    color: rgba(13, 14, 20, 0.6);
    white-space: nowrap;
}

.sg-divider {
    width: 100%;
    height: 1px;
}

.sg-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 6px;
    border: 1px solid rgba(52, 211, 145, 0.1);
    border-radius: 4px;
    background: rgba(52, 211, 145, 0.1);
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.36px;
    color: #34d391;
    white-space: nowrap;
}

.sg-badge--pending {
    border-color: rgba(13, 14, 20, 0.1);
    background: rgba(13, 14, 20, 0.1);
    color: #0d0e14;
}

.sg-badge--blue {
    border-color: rgba(55, 73, 246, 0.1);
    background: rgba(55, 73, 246, 0.1);
    color: #3749f6;
}

/* Fleche diagonale de l'asset, redressee a la verticale comme dans Figma. */
.sg-badge-arrow {
    width: 4.6px;
    height: 4.6px;
    margin: 0.32px;
    transform: rotate(-45deg);
}

.sg-value {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    line-height: 0.9;
    white-space: nowrap;
}

.sg-value-main {
    font-size: 32px;
    letter-spacing: -0.96px;
}

.sg-value-total {
    font-size: 16px;
    letter-spacing: -0.48px;
    color: rgba(13, 14, 20, 0.4);
}

.sg-progress {
    height: 16px;
    overflow: hidden;
    border-radius: 99px;
    background: #f2f2f2;
}

.sg-progress span {
    display: block;
    width: 175.911px;
    height: 100%;
    border-radius: 10.08px;
    background-image: linear-gradient(183.14deg, #3749f6 39.381%, #5e7bf6 98.542%, #3749f6 147.54%);
}

.sg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sg-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 8px 12px;
    border: 1.103px solid rgba(0, 4, 43, 0.06);
    border-radius: 12px;
    background: #f3f3f5;
}

.sg-list-item .sg-label {
    color: rgba(1, 8, 20, 0.6);
}

.sg-card-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
}

.sg-card-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.sg-card-group-top {
    display: flex;
    gap: 12px;
}

.sg-card--email {
    width: 234px;
    flex-shrink: 0;
}

.sg-metrics {
    display: flex;
    gap: 8px;
}

.sg-metric {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sg-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 16px;
    padding-right: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: #f2f2f2;
    font-size: 8px;
    line-height: 0.9;
    letter-spacing: -0.32px;
    color: rgba(13, 14, 20, 0.6);
}

.sg-meter-fill {
    height: 100%;
    border-radius: 99px;
    background-image: linear-gradient(192.39deg, #3749f6 39.381%, #5e7bf6 98.542%, #3749f6 147.54%);
}

.sg-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1.103px solid rgba(13, 14, 20, 0.06);
    border-radius: 12px;
    background: #fff;
}

.sg-select img {
    width: 2.81px;
    height: 4.89px;
    transform: rotate(90deg);
}

.sg-card--members {
    width: 181px;
    flex-shrink: 0;
}

.sg-card--members .sg-value-main {
    line-height: 0.9;
}

.sg-card--activity {
    flex: 1 0 0;
    min-height: 0;
}

.sg-card--activity .sg-card-fade {
    width: 450px;
}

.sg-activity-item {
    height: 32.738px;
    align-items: flex-start;
}

.sg-user-chip {
    display: flex;
    align-items: center;
    gap: 5.902px;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.36px;
    color: #0d0e14;
}

.sg-user-chip img {
    width: 15.738px;
    height: 15.738px;
}

/* ---------- Barre de navigation (par-dessus la carte) ---------- */

.sg-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 95px;
    padding-top: 16px;
    display: flex;
    justify-content: center;
}

.sg-navbar-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sg-navbar-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1248px;
    height: 79px;
    padding: 0 40px;
}

.sg-navbar-left,
.sg-navbar-links,
.sg-navbar-right {
    display: flex;
    align-items: center;
}

.sg-navbar-left,
.sg-navbar-links {
    gap: 32px;
}

.sg-navbar-right {
    gap: 16px;
}

.sg-navbar-links,
.sg-navbar-lang {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: rgba(13, 14, 20, 0.8);
    white-space: nowrap;
}

.sg-navbar-phone {
    width: 15.2px;
    height: 15.2px;
    margin: -0.6px;
}

/* ==========================================================================
   SECTIONS FONCTIONNALITES (1280 x 1166) ET TABLEAU DE BORD (1280 x 832)
   Meme principe que le hero : cotes Figma, scene mise a l'echelle.
   ========================================================================== */

.case-mock--features {
    aspect-ratio: 1280 / 1166;
}

.case-mock--features .sg-stage {
    height: 1166px;
}

/* ---------- Commun : titres de section, cartes, fleches ---------- */

.sg-section-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 882px;
    text-align: center;
}

.sg-h2 {
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.96px;
}

.sg-section-lead {
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: rgba(13, 14, 20, 0.6);
}

.sg-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 240px;
    padding: 32px;
    overflow: hidden;
    border-radius: 16px;
    background: #f3f3f5;
}

.sg-feature-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sg-feature-title {
    padding-top: 0.5px;
    font-weight: 500;
    font-size: 20px;
    line-height: 0.85;
    letter-spacing: -0.6px;
    white-space: nowrap;
}

.sg-feature-text {
    position: relative;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: rgba(13, 14, 20, 0.6);
}

.sg-feature--blue,
.sg-feature--dark,
.sg-feature--photo {
    color: #fff;
}

.sg-feature--blue .sg-feature-text,
.sg-feature--dark .sg-feature-text,
.sg-feature--photo .sg-feature-text {
    color: rgba(255, 255, 255, 0.8);
}

.sg-feature--blue {
    background-image: linear-gradient(202.36deg, #3749f6 39.381%, #5e7bf6 98.542%, #3749f6 147.54%);
}

.sg-feature--lime {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 352.5 240' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-9.9697 -37.857 15.78 -2.6298 207.41 303.59)'><stop stop-color='rgba(232,237,156,1)' offset='0'/><stop stop-color='rgba(235,245,125,1)' offset='0.5'/><stop stop-color='rgba(237,252,93,1)' offset='1'/></radialGradient></defs></svg>");
}

.sg-feature--dark {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 536 240' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-21.171 -43.94 64.738 -21.661 375.5 364.42)'><stop stop-color='rgba(45,47,55,1)' offset='0'/><stop stop-color='rgba(30,31,38,1)' offset='0.5'/><stop stop-color='rgba(14,15,21,1)' offset='1'/></radialGradient></defs></svg>");
}

/* Photo en fond, assombrie vers le bas pour le texte blanc. */
.sg-feature--photo {
    width: 100%;
}

.sg-feature-photo,
.sg-feature-photo-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

.sg-stage .sg-feature-photo {
    object-fit: cover;
}

.sg-feature-photo-shade {
    background: linear-gradient(0deg, rgba(14, 15, 21, 0.7) 16.222%, rgba(14, 15, 21, 0) 80.288%);
}

.sg-feature--photo .sg-feature-text {
    max-width: 290px;
    white-space: nowrap;
}

/* Fleche dans un carre : fichier complet (30 px) ou vecteur centre. */
.sg-arrow {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.sg-arrow--box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
}

.sg-arrow--box-dark {
    border-color: rgba(13, 14, 20, 0.1);
    background: rgba(13, 14, 20, 0.05);
}

.sg-arrow--box img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7.875px;
    height: 7.875px;
    transform: translate(-50%, -50%);
}

/* ---------- Grille des fonctionnalites ---------- */

.sg-features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    padding: 96px;
}

.sg-features-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 1088px;
}

.sg-features-row {
    display: flex;
    gap: 16px;
}

.sg-features-col {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sg-features-row > .sg-feature,
.sg-features-col .sg-features-row > .sg-feature {
    flex: 1 0 0;
    min-width: 0;
}

.sg-features-row > .sg-feature--tall {
    flex: 0 0 351px;
    width: 351px;
    height: auto;
}

/* Mini-cartes d'interface posees dans les fonctionnalites. */
.sg-widget {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    border: 1.103px solid rgba(13, 14, 20, 0.04);
    border-radius: 12px;
    background: #fff;
    color: #0d0e14;
}

.sg-widget-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sg-widget-fade {
    width: 200px;
    border: 1.103px solid transparent;
    border-radius: 12px;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 37%);
    /* Degrade pose sous la bordure transparente : sinon il se repete dessous
       et son bord blanc dessine un trait sur le cote. */
    background-origin: border-box;
    opacity: 0.5;
}

.sg-widget-fade--flip {
    transform: rotate(180deg) scaleY(-1);
}

.sg-widget-fade--dark {
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 37%);
    border-color: rgba(255, 255, 255, 0);
    opacity: 0.2;
}

/* "Encaissez sans effort" : le groupe Figma est centre dans la carte, ses
   elements sont places dans son repere (646 x 238). */
.sg-paid-group {
    position: absolute;
    top: calc(50% - 6px);
    left: calc(50% + 0.5px);
    width: 646px;
    height: 238px;
    transform: translate(-50%, -50%);
}

.sg-paid-group > * {
    position: absolute;
}

.sg-paid-group .sg-widget {
    top: 51px;
    left: 216px;
    height: 137px;
    justify-content: space-between;
    gap: 0;
}

.sg-paid-group .sg-widget-fade {
    top: 0;
    left: 446px;
    height: 137px;
    border-radius: 16px;
}

.sg-paid-group .sg-widget-fade--flip {
    top: 101px;
    left: 0;
    transform: rotate(180deg);
}

.sg-paid-figures {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sg-paid-counts {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    line-height: 0.9;
    white-space: nowrap;
}

.sg-paid-count {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.sg-paid-count-label {
    font-size: 8px;
    letter-spacing: -0.32px;
    color: rgba(13, 14, 20, 0.6);
}

/* Widgets en bas a droite (retention) ou flottant (croissance) : la mini-
   carte au centre, deux fondus de 200 px de part et d'autre. */
.sg-widget-strip {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.sg-widget-strip > .sg-widget,
.sg-widget-strip > .sg-widget-fade {
    flex-shrink: 0;
}

.sg-widget-strip > .sg-widget-fade {
    align-self: stretch;
}

.sg-widget-strip--retention {
    right: 32px;
    bottom: 16px;
    width: 200px;
}

.sg-widget-strip--growth {
    top: 88px;
    left: 289px;
    width: 175px;
}

.sg-widget-strip--growth .sg-widget {
    width: 175px;
}

.sg-trend {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sg-trend .sg-badge {
    width: 42px;
}

/* ---------- Tableau de bord (liste des modules) ---------- */

.sg-board {
    position: absolute;
    top: 19px;
    left: 16px;
    width: 1248px;
    height: 797px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    overflow: hidden;
    border-radius: 16px;
}

.sg-board-body {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: 516px;
}

.sg-board-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 302px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-weight: 500;
    font-size: 20px;
    line-height: 0.85;
    letter-spacing: -0.6px;
    color: rgba(13, 14, 20, 0.3);
    white-space: nowrap;
}

.sg-board-nav-current {
    position: relative;
    padding-top: 16px;
    width: 216px;
    color: rgba(13, 14, 20, 0.8);
}

/* Rail vertical a gauche du menu, avec le segment bleu de l'element actif. */
.sg-board-rail {
    position: absolute;
    top: 0;
    left: -24px;
    width: 1px;
    height: 500px;
    background: linear-gradient(180deg, rgba(13, 14, 20, 0.15), rgba(13, 14, 20, 0));
}

.sg-board-rail::before {
    content: '';
    position: absolute;
    top: -0.2px;
    left: 0;
    width: 1px;
    height: 64px;
    background: linear-gradient(180deg, rgba(62, 96, 237, 0), #3e60ed 50%, rgba(62, 96, 237, 0));
}

.sg-board-list {
    position: absolute;
    top: 0;
    left: 326px;
    width: 865px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sg-module {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 49px;
    overflow: hidden;
    border: 1px solid #d9e0ec;
    border-radius: 12px;
    background: #f3f3f5;
}

.sg-module--active {
    background-image: linear-gradient(186.57deg, #3749f6 39.381%, #5e7bf6 98.542%, #3749f6 147.54%);
    color: #fff;
}

.sg-module-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sg-module-title {
    font-size: 32px;
    line-height: 0.85;
    letter-spacing: -0.96px;
    white-space: nowrap;
}

.sg-module-text {
    width: 528px;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: rgba(13, 14, 20, 0.6);
}

.sg-module--active .sg-module-text {
    color: rgba(255, 255, 255, 0.8);
}

.sg-board-fade {
    position: absolute;
    bottom: -0.7px;
    left: -1px;
    width: 1248px;
    height: 94px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0.324%, rgba(249, 249, 249, 0.5) 75.56%);
}

/* Contour en degrade (Tableau de bord, Disciplines) : comme dans Figma, le
   trait est invisible en haut et s'affirme jusqu'en bas. Une bordure CSS ne
   peut pas etre degradee : un pseudo-element la porte, masque en degrade.
   Le bloc coupe son contenu (overflow: hidden) au bord interieur de sa
   bordure : on retire donc la bordure, on ajoute 1px au padding a la place,
   et le trait est dessine dans ce pixel. Geometrie identique a la maquette. */
.sg-board,
.sg-disc {
    border: 0;
}

.sg-board {
    padding: 81px 33px;
}

.sg-disc {
    padding: 81px 33px 33px;
}

.sg-board::after,
.sg-disc::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(13, 14, 20, 0.06);
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000);
    mask-image: linear-gradient(180deg, transparent, #000);
    pointer-events: none;
}

/* Le fondu bas etait place par rapport au bord interieur de la bordure. */
.sg-board .sg-board-fade,
.sg-disc .sg-board-fade {
    left: 0;
    bottom: 0.3px;
}

/* ---------- Disciplines (1280 x 832) ---------- */

.sg-disc {
    position: absolute;
    top: 19.3px;
    left: 16px;
    width: 1248px;
    height: 797px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    overflow: hidden;
    border-radius: 16px;
}

/* Meme fondu bas que le tableau de bord, place sous les cartes. */
.sg-disc > .sg-board-fade {
    z-index: 0;
}

.sg-disc-grid {
    position: relative;
    flex: 1 0 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.sg-disc-row {
    flex: 1 0 0;
    min-height: 0;
    display: flex;
    gap: 16px;
}

.sg-disc-card {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 21px;
    overflow: hidden;
    border: 1px solid #f3f3f5;
    border-radius: 16px;
    background: #f3f3f5;
}

.sg-disc-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.sg-disc-name {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sg-disc-title {
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.08px;
    white-space: nowrap;
}

.sg-disc-tag {
    padding: 4px 6px;
    border: 1px solid rgba(13, 14, 20, 0.1);
    border-radius: 4px;
    background: rgba(13, 14, 20, 0.1);
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: -0.36px;
    white-space: nowrap;
}

.sg-disc-text {
    position: relative;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: rgba(13, 14, 20, 0.6);
}

.sg-disc-card--lime {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 284 231.5' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-8.0323 -36.516 12.713 -2.5367 167.11 292.84)'><stop stop-color='rgba(232,237,156,1)' offset='0'/><stop stop-color='rgba(235,245,125,1)' offset='0.5'/><stop stop-color='rgba(237,252,93,1)' offset='1'/></radialGradient></defs></svg>");
}

.sg-disc-card--blue {
    background-image: linear-gradient(206.22deg, #3749f6 39.381%, #5e7bf6 98.542%, #3749f6 147.54%);
}

.sg-disc-card--blue,
.sg-disc-card--photo {
    color: #fff;
}

.sg-disc-card--blue .sg-disc-text,
.sg-disc-card--photo .sg-disc-text {
    color: rgba(255, 255, 255, 0.6);
}

.sg-disc-card--blue .sg-disc-tag {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
}

/* Boxe : photo assombrie vers le bas, curseur "main" de la maquette. */
.sg-disc-photo,
.sg-disc-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

.sg-stage .sg-disc-photo {
    object-fit: cover;
}

.sg-disc-shade {
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.sg-stage .sg-disc-hand {
    position: absolute;
    top: 86.8px;
    left: 215.8px;
    width: 24px;
    height: 26.719px;
    transform: rotate(-4deg);
}

/* ==========================================================================
   PLANCHE D'OUVERTURE (charte, 1920 x 1080) : logo sur degrade cobalt
   ========================================================================== */

.case-mock--wide {
    aspect-ratio: 16 / 9;
}

.case-mock--wide .sg-stage {
    width: 1920px;
    height: 1080px;
}

.sg-cover {
    position: absolute;
    inset: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(13, 14, 20, 0.06);
    border-radius: 16px;
    background-image:
        linear-gradient(180deg, #fff 11.375%, rgba(255, 255, 255, 0) 100%),
        url("data:image/svg+xml;utf8,<svg viewBox='0 0 1872 1032' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-88.95 -81.5 133.54 -145.75 1549.5 815)'><stop stop-color='rgba(94,123,246,1)' offset='0'/><stop stop-color='rgba(75,98,246,1)' offset='0.5'/><stop stop-color='rgba(55,73,246,1)' offset='1'/></radialGradient></defs></svg>"),
        linear-gradient(151.55deg, #5e7bf6 35.124%, #3749f6 68.44%);
    background-origin: border-box;
}

.sg-stage .sg-cover-logo {
    width: 466.083px;
    height: 119px;
}

.sg-cover-tagline {
    position: absolute;
    top: 957px;
    left: 935px;
    transform: translateX(-50%);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.48px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    /* Le logo se pose (fondu + leger zoom arriere), puis la signature monte. */
    .case-reveal.is-in .sg-cover-logo {
        animation: sg-settle 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
    }

    .case-reveal.is-in .sg-cover-tagline {
        animation: sg-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
    }
}

@keyframes sg-settle {
    from { opacity: 0; scale: 1.08; filter: blur(6px); }
}

/* ==========================================================================
   APPEL A L'ACTION + LOGOS PARTENAIRES (1280 x 574.64 : maquette 558.64
   + 16 px d'air sous les logos)
   ========================================================================== */

.case-mock--cta {
    aspect-ratio: 1280 / 574.64;
}

.case-mock--cta .sg-stage {
    height: 574.64px;
}

.sg-cta-wrap {
    padding: 16px;
}

.sg-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 457.64px;
    padding: 96px;
    overflow: hidden;
    border-radius: 24px;
}

/* Photo exportee de Figma en 2x, voile sombre deja inclus, recadree au
   format exact de la carte (1248 x 457.64) : elle la remplit sans deformation. */
.sg-cta-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
}

.sg-stage .sg-cta-photo {
    object-fit: cover;
}

.sg-cta-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sg-cta-tag {
    padding: 9.821px 14.821px;
    border: 0.821px solid rgba(243, 243, 245, 0.1);
    border-radius: 99px;
    background: rgba(243, 243, 245, 0.1);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

/* Espaceurs de la maquette : 32 px au-dessus, 16 + 32 px en dessous.
   (.sg-stage devant : sinon `.sg-stage p { margin: 0 }` les annule.) */
.sg-stage .sg-cta-title {
    margin-top: 32px;
    margin-bottom: 48px;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -1.68px;
    color: #fff;
}

/* Bandeau de logos : la bande defile en continu (deux fois la meme suite),
   fondue sur les cotes par un degrade blanc. */
.sg-logos {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 69px;
    margin-bottom: 16px;
    padding: 24px;
    overflow: hidden;
}

.sg-logos-slider {
    position: relative;
    flex-shrink: 0;
    width: 1248px;
    height: 56px;
}

.sg-logos-track {
    position: absolute;
    top: 5.5px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 40px;
}

.sg-logos-track > * {
    flex-shrink: 0;
}

/* EGYM : logo detoure par un masque, cale comme dans Figma. */
.sg-logo-egym {
    width: 89.055px;
    height: 44.8px;
}

.sg-logo-egym span {
    display: block;
    width: 67.261px;
    height: 24.061px;
    margin: 10.345px 0 0 10.896px;
    -webkit-mask: url("images/sportigo/sections/logo-egym-mask.svg") -10.896px -10.345px / 89.055px 44.8px no-repeat;
    mask: url("images/sportigo/sections/logo-egym-mask.svg") -10.896px -10.345px / 89.055px 44.8px no-repeat;
}

.sg-logo-egym img {
    width: 100%;
    height: 100%;
}

.sg-logos-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff 10%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, #fff 90%);
}

/* ==========================================================================
   MICRO-ANIMATIONS
   --------------------------------------------------------------------------
   Elles demarrent quand le cadre apparait (.case-reveal.is-in, pose par
   script-case.js), en meme temps que son fondu d'entree. Les boucles sont
   lentes et de faible amplitude. Rien si le visiteur reduit les animations.
   Les elements qui ont deja un transform (centrage) sont animes via la
   propriete `translate`, qui s'ajoute au transform sans l'ecraser.
   Les chiffres qui defilent (data-count) sont geres par script-case.js.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    /* ---------- Entrees (une fois) ---------- */

    .case-reveal.is-in .sg-tag,
    .case-reveal.is-in .sg-intro > *,
    .case-reveal.is-in .sg-section-intro > * {
        animation: sg-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .case-reveal.is-in .sg-tag { animation-delay: 0.15s; }
    .case-reveal.is-in .sg-intro > :nth-child(1),
    .case-reveal.is-in .sg-section-intro > :nth-child(1) { animation-delay: 0.25s; }
    .case-reveal.is-in .sg-intro > :nth-child(2),
    .case-reveal.is-in .sg-section-intro > :nth-child(2) { animation-delay: 0.35s; }
    .case-reveal.is-in .sg-intro > :nth-child(3) { animation-delay: 0.45s; }

    /* Le tableau de bord monte depuis le bas de la carte. */
    .case-reveal.is-in .sg-dash {
        animation: sg-rise-far 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
    }

    /* Jauges qui se remplissent, de gauche a droite. */
    .case-reveal.is-in .sg-progress span,
    .case-reveal.is-in .sg-meter-fill {
        animation: sg-fill 1.2s cubic-bezier(0.65, 0, 0.35, 1) 1s both;
    }

    .case-reveal.is-in .sg-meter + .sg-meter .sg-meter-fill,
    .case-reveal.is-in .sg-metric + .sg-metric .sg-meter-fill {
        animation-delay: 1.15s;
    }

    /* Lignes de liste qui arrivent l'une apres l'autre. */
    .case-reveal.is-in .sg-dash .sg-list > * {
        animation: sg-rise-near 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .case-reveal.is-in .sg-dash .sg-list > :nth-child(1) { animation-delay: 1.1s; }
    .case-reveal.is-in .sg-dash .sg-list > :nth-child(2) { animation-delay: 1.18s; }
    .case-reveal.is-in .sg-dash .sg-list > :nth-child(3) { animation-delay: 1.26s; }
    .case-reveal.is-in .sg-dash .sg-list > :nth-child(4) { animation-delay: 1.34s; }
    .case-reveal.is-in .sg-dash .sg-list > :nth-child(5) { animation-delay: 1.42s; }

    /* Pastilles vertes / bleues : petit rebond a l'arrivee. */
    .case-reveal.is-in .sg-card-row .sg-badge,
    .case-reveal.is-in .sg-trend .sg-badge {
        animation: sg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
    }

    /* Cartes des grilles : apparition en cascade. */
    .case-reveal.is-in .sg-features-grid .sg-feature,
    .case-reveal.is-in .sg-disc-card,
    .case-reveal.is-in .sg-module {
        animation: sg-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .case-reveal.is-in .sg-features-col .sg-features-row > :nth-child(1) { animation-delay: 0.45s; }
    .case-reveal.is-in .sg-features-col .sg-features-row > :nth-child(2) { animation-delay: 0.53s; }
    .case-reveal.is-in .sg-feature--tall { animation-delay: 0.61s; }
    .case-reveal.is-in .sg-feature--photo { animation-delay: 0.69s; }
    .case-reveal.is-in .sg-features-grid > .sg-features-row + .sg-features-row > :nth-child(1) { animation-delay: 0.77s; }
    .case-reveal.is-in .sg-features-grid > .sg-features-row + .sg-features-row > :nth-child(2) { animation-delay: 0.85s; }

    .case-reveal.is-in .sg-disc-row > :nth-child(1) { animation-delay: 0.45s; }
    .case-reveal.is-in .sg-disc-row > :nth-child(2) { animation-delay: 0.52s; }
    .case-reveal.is-in .sg-disc-row > :nth-child(3) { animation-delay: 0.59s; }
    .case-reveal.is-in .sg-disc-row > :nth-child(4) { animation-delay: 0.66s; }
    .case-reveal.is-in .sg-disc-row + .sg-disc-row > :nth-child(1) { animation-delay: 0.6s; }
    .case-reveal.is-in .sg-disc-row + .sg-disc-row > :nth-child(2) { animation-delay: 0.67s; }
    .case-reveal.is-in .sg-disc-row + .sg-disc-row > :nth-child(3) { animation-delay: 0.74s; }
    .case-reveal.is-in .sg-disc-row + .sg-disc-row > :nth-child(4) { animation-delay: 0.81s; }

    /* Modules du tableau de bord : glissent depuis la droite. */
    .case-reveal.is-in .sg-module {
        animation-name: sg-slide;
    }

    .case-reveal.is-in .sg-module:nth-child(1) { animation-delay: 0.5s; }
    .case-reveal.is-in .sg-module:nth-child(2) { animation-delay: 0.62s; }
    .case-reveal.is-in .sg-module:nth-child(3) { animation-delay: 0.74s; }

    /* Menu des modules : entree en cascade, puis le segment bleu du rail
       remonte se poser sur l'element actif. */
    .case-reveal.is-in .sg-board-nav > * {
        animation: sg-rise-near 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .case-reveal.is-in .sg-board-nav > :nth-child(1) { animation-delay: 0.5s; }
    .case-reveal.is-in .sg-board-nav > :nth-child(2) { animation-delay: 0.56s; }
    .case-reveal.is-in .sg-board-nav > :nth-child(3) { animation-delay: 0.62s; }
    .case-reveal.is-in .sg-board-nav > :nth-child(4) { animation-delay: 0.68s; }
    .case-reveal.is-in .sg-board-nav > :nth-child(5) { animation-delay: 0.74s; }
    .case-reveal.is-in .sg-board-nav > :nth-child(6) { animation-delay: 0.8s; }

    .case-reveal.is-in .sg-board-rail::before {
        animation: sg-rail 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.6s both;
    }

    /* ---------- Boucles (discretes) ---------- */

    /* Mini-cartes qui flottent doucement, chacune a son rythme. */
    .case-reveal.is-in .sg-paid-group .sg-widget,
    .case-reveal.is-in .sg-widget-strip > .sg-widget {
        animation: sg-float 5s ease-in-out 1.2s infinite alternate;
    }

    .case-reveal.is-in .sg-widget-strip--retention > .sg-widget { animation-delay: 1.8s; }
    .case-reveal.is-in .sg-widget-strip--growth > .sg-widget { animation-delay: 2.4s; }

    /* Photos : zoom tres lent, facon plan de cinema. */
    .case-reveal.is-in .sg-feature-photo,
    .case-reveal.is-in .sg-disc-photo {
        animation: sg-zoom 14s ease-in-out infinite alternate;
    }

    /* Le curseur "main" de la carte Boxe clique de temps en temps. */
    .case-reveal.is-in .sg-disc-hand {
        animation: sg-tap 3.2s ease-in-out 1.4s infinite;
    }

    /* Pastilles "Top Choice" et "New" : respiration legere. */
    .case-reveal.is-in .sg-disc-tag {
        animation: sg-breathe 2.8s ease-in-out 1s infinite;
    }

    /* Appel a l'action : tag, titre et bouton montent ; photo en zoom lent ;
       logos en defilement continu (une suite = 1114.98 px + 40 px d'ecart). */
    .case-reveal.is-in .sg-cta-content > * {
        animation: sg-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .case-reveal.is-in .sg-cta-content > :nth-child(1) { animation-delay: 0.25s; }
    .case-reveal.is-in .sg-cta-content > :nth-child(2) { animation-delay: 0.35s; }
    .case-reveal.is-in .sg-cta-content > :nth-child(3) { animation-delay: 0.45s; }

    .case-reveal.is-in .sg-cta-photo {
        animation: sg-zoom 14s ease-in-out infinite alternate;
    }

    .case-reveal.is-in .sg-logos-track {
        animation: sg-marquee 32s linear infinite;
    }

    /* Reflet qui traverse le bouton principal du hero. */
    .sg-btn--primary {
        position: relative;
        overflow: hidden;
    }

    .case-reveal.is-in .sg-btn--primary::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -40%;
        width: 40%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
        animation: sg-shine 4.5s ease-in-out 2s infinite;
    }
}

@keyframes sg-rise {
    from { opacity: 0; translate: 0 16px; }
}

@keyframes sg-rise-near {
    from { opacity: 0; translate: 0 8px; }
}

@keyframes sg-rise-far {
    from { opacity: 0; translate: 0 48px; }
}

@keyframes sg-slide {
    from { opacity: 0; translate: 32px 0; }
}

@keyframes sg-fill {
    from { clip-path: inset(0 100% 0 0 round 99px); }
    to { clip-path: inset(0 0 0 0 round 99px); }
}

@keyframes sg-pop {
    from { opacity: 0; scale: 0.6; }
}

@keyframes sg-rail {
    from { translate: 0 220px; opacity: 0; }
    30% { opacity: 1; }
}

@keyframes sg-float {
    from { translate: 0 0; }
    to { translate: 0 -6px; }
}

@keyframes sg-zoom {
    from { scale: 1; }
    to { scale: 1.08; }
}

@keyframes sg-tap {
    0%, 70%, 100% { translate: 0 0; scale: 1; }
    40% { translate: -10px -6px; scale: 1; }
    52% { translate: -10px -6px; scale: 0.82; }
    60% { translate: -10px -6px; scale: 1; }
}

@keyframes sg-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes sg-marquee {
    to { translate: -1154.98px 0; }
}

@keyframes sg-shine {
    0% { left: -40%; }
    35%, 100% { left: 120%; }
}

/* ---------- Survol des boutons et liens (souris uniquement) ----------
   Charte Sportigo : le bouton gris fonce d'un cran, le bouton bleu garde
   son degrade et s'assombrit d'un voile encre (#0d0e14) ; les liens de la
   barre passent de l'encre a 80 % a l'encre pleine. La scene est inerte :
   seuls les boutons et liens recoivent le pointeur. */

.sg-btn,
.sg-navbar-links > span {
    pointer-events: auto;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .sg-btn:hover {
        background-color: #eeeeef;
    }

    .sg-btn--primary:hover {
        box-shadow: inset 0 0 0 100px rgba(13, 14, 20, 0.12);
    }

    .sg-navbar-links > span:hover {
        color: #0d0e14;
    }
}