/* ═══════════════════════════════════
   BLOC HERO — DIGITAL SCREEN
═══════════════════════════════════ */

.hero-scrolly-block {
    position: relative;
}

.hero-container {
    height: 280vh;
}

.btn-demo-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    background: var(--color-secondary);
    color: var(--color-white);
    box-shadow: 0 10px 30px var(--color-glow);
    transition: var(--transition-vibrant);
    border: 2px solid var(--color-secondary);
}

.btn-demo-hero:hover {
    transform: translateY(-5px) scale(1.05);
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(14, 3, 56, 0.2);
}

/* SCROLLY ARCHITECTURE */
.scrolly-container {
    position: relative;
}

.sticky-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--color-bg);
    display: flex;
    align-items: center;
}

#global-dark-bg {
    position: absolute;
    inset: 0;
    background: var(--color-navy);
    opacity: 0;
    z-index: 40;
    will-change: opacity;
    pointer-events: none;
}

.vibrant-blob {
    position: absolute;
    top: -10%;
    right: -5%;
    width: 50%;
    height: 70%;
    /* Remplace medias/img/vibrant_shape.png — 663 Kio, le plus gros fichier de la
       page — par un dégradé CSS de 0 octet. L'élément est rendu à `opacity: .3`
       sous un `filter: blur(40px)` : aucun détail du PNG n'était perceptible, une
       forme radiale est visuellement équivalente.
       Bonus : le dégradé suit `--color-accent`, donc le blob se recolore
       automatiquement en mode ProTrot — ce que l'image fixe ne faisait pas. */
    background:
        radial-gradient(closest-side at 35% 30%, var(--color-lime) 0%, transparent 72%),
        radial-gradient(closest-side at 72% 62%, var(--color-accent) 0%, transparent 72%);
    opacity: 0.3;
    z-index: 2;
    filter: blur(40px);
    animation: pulseBlob 10s ease-in-out infinite alternate;
    /* `pulseBlob` anime transform, pas opacity : c'est transform qu'il faut
       annoncer pour que le compositeur promeuve le calque. */
    will-change: transform;
    pointer-events: none;
}

@keyframes pulseBlob {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1.1) rotate(5deg);
    }
}

.hero-text {
    width: 45%;
    height: 100%;
    padding: 0 60px;
    pointer-events: auto;
    will-change: transform, opacity;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-text h1 {
    font-family: var(--font-display);
    font-size: clamp(36px, 3.5vw, 48px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-text h1 span {
    color: var(--color-accent);
    font-style: italic;
    transition: color 0.4s;
}

.hero-text p {
    font-size: 17px;
    color: var(--color-text-2);
    margin-bottom: 35px;
    max-width: 520px;
    line-height: 1.6;
}

.hero-device-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.tableau-absolute {
    position: absolute;
    right: 3%;
    /* Point de départ */
    top: 50%;
    transform: translateY(-50%);
    width: 52%;
    height: 65vh;
    perspective: 2000px;
    z-index: 5;
    will-change: opacity, right, transform;
    /* Ajout de right et transform pour la fluidité */
    transition: opacity 0.1s linear;
}

/* Centered advantage image — perfectly centered vertically & horizontally */
.hero-adv-center-image {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46%;
    max-height: 72vh;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: visible; /* permet l'affichage du badge de confiance en dehors des bords */
    opacity: 0;
    z-index: 6;
    will-change: opacity;
    border: 8px solid #1a1a1a;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.35);
}

.hero-adv-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 16px; /* correspond à l'arrondi intérieur (24px - 8px de bordure) */
}

.tableau-screen {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.25), 0 0 50px var(--color-glow);
    border: 10px solid #1a1a1a;
    overflow: hidden;
    position: relative;
    transform-origin: center center;
    will-change: transform, border-radius, border-width;
}

.tableau-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.dark-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(14, 3, 56, 0.2) 0%, rgba(14, 3, 56, 0.98) 85%);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Suppression du glow et de l'overlay pour l'image centrale avantages */
#hero-adv-center-image .dark-overlay {
    display: none !important;
}

#hero-adv-center-image {
    /* État initial : cachée jusqu'au scroll */
    display: none;
    opacity: 0;
    transition: none !important;
    /* Ombre portée propre, sans glow coloré */
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
    /* Le centrage vertical (top:50% + transform) est défini dans .hero-adv-center-image */
}

.glass-badge {
    position: absolute;
    top: 10%;
    left: -20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid white;
    z-index: 10;
    will-change: opacity;
    transition: color 0.4s;
}

/* 2. Désactivation des transitions sur la tablette pour un masquage immédiat */
#tableau-absolute {
    transition: none !important;
}

.glass-badge p {
    color: var(--color-accent) !important;
}

/* Grille d'avantages — centrée verticalement et horizontalement dans le viewport */
.hero-adv-grid {
    position: absolute;
    inset: 0; /* Occupe tout le viewport pour un centrage parfait */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 30px 50vw; /* Espace entre cartes gauche/droite, séparées par la zone centrale */
    padding: 0 4%;
    pointer-events: none;
    z-index: 50;
    place-content: center; /* Centre verticalement ET horizontalement */
    align-items: start;    /* Chaque carte garde sa propre hauteur naturelle */
}

.adv-overlay {
    opacity: 0;
    pointer-events: none;
    width: 100%;
    max-width: 21vw;
    min-width: 250px;
    will-change: transform, opacity;
    display: flex;
    justify-content: center;
    align-self: start; /* ✅ MODIF : empêche l'étirement à la hauteur du voisin */
}

/* Distribution dans la grille (Dynamique) */
.adv-overlay:nth-child(odd) {
    grid-column: 1;
    justify-self: start;
}

.adv-overlay:nth-child(even) {
    grid-column: 2;
    justify-self: end;
}

/* Border-radius uniforme — identique aux pwa-list-card */

.adv-card {
    width: 100%;
    background: white;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 16px 24px;
    color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    animation: none;
    position: relative;
    overflow: visible; /* nécessaire pour la flèche ::after */
    border: 2px solid transparent;
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.adv-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 8px;
}

.adv-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.adv-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    border-color: var(--color-secondary);
}

/* ─── ÉTAT ACTIF : identique au pwa-list-card.is-selected ─── */
.adv-card.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 15px 50px rgba(14, 3, 56, 0.35);
    transform: none;
}

/* Icône en mode actif : glass blanc */
.adv-card.is-active .icon-glow {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Titre en mode actif : blanc */
.adv-card.is-active h2 {
    color: white;
}

/* Sous-titre en mode actif : blanc atténué */
.adv-card.is-active .adv-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ─── FLÈCHE DIRECTIONNELLE vers le centre ─── */
.adv-card.is-active::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Cartes gauches (odd) : flèche à droite pointant vers le centre */
.adv-overlay:nth-child(odd) .adv-card.is-active {
    transform: translateX(20px) !important;
}

.adv-overlay:nth-child(odd) .adv-card.is-active::after {
    right: -14px;
    transform: translateY(-50%);
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent var(--color-primary);
}

/* Cartes droites (even) : flèche à gauche pointant vers le centre */
.adv-overlay:nth-child(even) .adv-card.is-active {
    transform: translateX(-20px) !important;
}

.adv-overlay:nth-child(even) .adv-card.is-active::after {
    left: -14px;
    transform: translateY(-50%);
    border-width: 10px 14px 10px 0;
    border-color: transparent var(--color-primary) transparent transparent;
}

/* ─── MODE PROTROT ─── */
.mode-protrot .adv-card.is-active {
    background: var(--color-protrot-primary);
    border-color: var(--color-protrot-primary);
    box-shadow: 0 15px 50px rgba(25, 130, 108, 0.35);
}

.mode-protrot .adv-overlay:nth-child(odd) .adv-card.is-active::after {
    border-color: transparent transparent transparent var(--color-protrot-primary);
}

.mode-protrot .adv-overlay:nth-child(even) .adv-card.is-active::after {
    border-color: transparent var(--color-protrot-primary) transparent transparent;
}

@keyframes floatCard {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.icon-glow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    position: relative;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: none;
}

.adv-card:hover .icon-glow {
    transform: rotate(10deg);
}

.icon-glow svg,
.icon-glow ion-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icône active : override couleur icône SVG/ion-icon vers blanc */
.adv-card.is-active .icon-glow ion-icon,
.adv-card.is-active .icon-glow svg {
    color: white;
    fill: white;
    filter: none;
}

.adv-card h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--color-primary);
    transition: color 0.3s;
}

.adv-card-desc {
    font-size: 13px;
    color: var(--color-text-2);
    opacity: 1;
    margin: 0; /* Alignement à gauche sans retrait */
    line-height: 1.5;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

/* Icône info à droite */
.adv-info-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(14, 3, 56, 0.05);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    opacity: 0.5;
}

.adv-info-btn ion-icon,
.adv-info-btn svg {
    font-size: 18px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adv-card:hover .adv-info-btn {
    opacity: 1;
    background: var(--color-secondary);
    color: white;
}

.adv-card.is-active .adv-info-btn {
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.mode-protrot .adv-card:hover .adv-info-btn {
    background: var(--color-protrot-secondary);
}

/* RESPONSIVE */
@media (max-width: 1023px) {
    .hero-adv-grid {
        inset: 100px 0 120px 0;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 20px;
        padding: 0 20px;
    }

    #adv-1,
    #adv-2,
    #adv-3,
    #adv-4 {
        grid-column: 1;
        justify-self: center;
    }

    .adv-overlay {
        max-width: 100%;
    }

    .adv-card {
        padding: 20px;
        text-align: center;
        align-items: center;
    }
}

/* Trust Elements */
.hero-actions-group {
    display: flex;
    align-items: center;
    gap: 25px;
}

.hero-reassurance {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-2);
}

.hero-reassurance ion-icon {
    font-size: 18px;
    color: var(--color-accent);
}

.hero-stats {
    font-size: 13px;
    color: var(--color-text-2);
    opacity: 0.8;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.glass-badge-stat {
    display: none;
}

/* Hide old badges */

.hero-dashboard-stats-wrap {
    position: absolute;
    bottom: 25px;
    left: 25px;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    z-index: 10;
    transition: opacity 0.4s ease;
}

.dashboard-stat-badge {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid white;
    color: var(--color-primary);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-15px);
    animation: statBadgeAppear 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes statBadgeAppear {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Delay for one-by-one appearance (Left to Right) */
/* Visual order (L-R) is Badge 3, 2, 1 because of row-reverse */
.dashboard-stat-badge:nth-child(3) {
    animation-delay: 0.2s;
}

.dashboard-stat-badge:nth-child(2) {
    animation-delay: 0.4s;
}

.dashboard-stat-badge:nth-child(1) {
    animation-delay: 0.6s;
}

.dashboard-stat-badge .stat-value {
    font-size: 18px;
    font-weight: 800;
    font-family: var(--font-display);
    line-height: 1;
}

.dashboard-stat-badge .stat-symbol {
    font-size: 14px;
    color: var(--color-accent);
    font-weight: 800;
}

.dashboard-stat-badge .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.8;
}

.stat-part-international {
    background: var(--color-primary);
    color: white;
    border: none;
}

.mode-protrot .stat-part-international {
    background: var(--color-protrot-primary);
}

.stat-part-international .stat-text {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.full-screen-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
    max-width: 1000px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    color: white;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    /* Subtle darken behind text for legibility */
    background: radial-gradient(circle at center, rgba(14, 3, 56, 0.4) 0%, transparent 80%);
    padding: 60px;
}

.fs-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    font-family: var(--font-display);
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.5px;
}

.fs-subtitle {
    font-size: 20px;
    opacity: 0.95;
    max-width: 750px;
    margin: 0 auto;
    font-weight: 500;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1023px) {
    .fs-title {
        font-size: 28px;
    }

    .fs-subtitle {
        font-size: 14px;
    }
}

.french-badge {
    position: absolute;
    bottom: -20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid white;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 15;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.french-badge .flag {
    font-size: 16px;
}

/* Hero Trust Elements */
.hero-trust-stats {
    display: flex;
    gap: 40px;
    border-top: 1px solid rgba(14, 3, 56, 0.1);
    padding-top: 30px;
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number-wrap {
    display: flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--color-primary);
    line-height: 1;
}

.stat-plus {
    color: var(--color-accent);
    font-size: 20px;
    margin-left: 2px;
}

.hero-stat-item .stat-label-text {
    font-size: 11px;
    color: var(--color-text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
    font-weight: 600;
}

/* Ils nous font confiance section */

.hero-partners-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid rgba(14, 3, 56, 0.08);
    padding-top: 30px;
    margin-top: 35px !important;
}

/* ═══ NOTCH TOGGLE : Sport (prostables) ↔ Courses (protrot) ═══ */
.hero-partners-protrot { display: none; }
.mode-protrot .hero-partners-prostables { display: none; }
.mode-protrot .hero-partners-protrot { display: flex; }

.partners-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary);
    opacity: 0.5;
    font-weight: 700;
    margin-bottom: 5px;
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 0;
    /* Gap managed by negative margin for face-pile */
}

.partner-logo {
    margin-left: -12px;
    transition: var(--transition-vibrant);
    position: relative;
    z-index: 1;
}

.partner-logo:first-child {
    margin-left: 0;
}

.partner-logo:hover {
    z-index: 10;
    transform: translateY(-5px) scale(1.1);
}

.partner-logo img {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-primary);
    /* Primary Brand Blue (#0E0338) */
    box-shadow: 0 4px 15px rgba(14, 3, 56, 0.15);
    /* Subtle Midnight Shadow */
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.mode-protrot .partner-logo img {
    border-color: var(--color-protrot-primary);
    box-shadow: 0 4px 15px rgba(25, 130, 108, 0.15);
}

.partner-logo:hover img {
    border-color: var(--color-accent);
    /* Golden/Green Accent on Hover */
    box-shadow: 0 10px 25px var(--color-accent-glow);
}

.more-count-circle {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--color-primary);
    /* Matches other avatars */
    box-shadow: 0 4px 15px rgba(14, 3, 56, 0.15);
    font-size: 14px;
    font-weight: 700;
}

.mode-protrot .more-count-circle {
    background: var(--color-protrot-primary);
    border-color: var(--color-protrot-primary);
    box-shadow: 0 4px 15px rgba(25, 130, 108, 0.15);
}

.partner-logo.more-avatars:hover .more-count-circle {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 10px 25px var(--color-accent-glow);
}

.btn-demo-hero.has-subtext {
    padding: 10px 35px;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
}

.btn-text-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.btn-label {
    font-size: 16px;
    font-weight: 700;
}

.btn-sublabel {
    font-size: 10px;
    opacity: 0.85;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Smart Callback Component */
.smart-callback-wrapper {
    --sc-main-color: var(--color-primary);
    position: relative;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--sc-main-color);
    border-radius: 100px;
    background: transparent;
    color: var(--sc-main-color);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    min-width: 250px;
}

/* Mode ProTrot Support */
.mode-protrot .smart-callback-wrapper {
    --sc-main-color: var(--color-protrot-primary);
}

.smart-callback-wrapper:hover {
    background: rgba(14, 3, 56, 0.05);
}

.mode-protrot .smart-callback-wrapper:hover {
    background: rgba(25, 130, 108, 0.05);
}

.smart-callback-wrapper.is-active {
    background: white;
    border-color: var(--color-accent);
    cursor: default;
    box-shadow: 0 10px 30px rgba(184, 157, 125, 0.15);
}

.mode-protrot .smart-callback-wrapper.is-active {
    box-shadow: 0 10px 30px rgba(36, 187, 155, 0.15);
}

.smart-callback-wrapper.is-success {
    border-color: #27ae60;
    background: rgba(39, 174, 96, 0.05);
    pointer-events: none;
}

.smart-callback-wrapper.is-error {
    border-color: #e74c3c;
    animation: shakeError 0.4s ease-in-out;
}

@keyframes shakeError {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.sc-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
}

.sc-default {
    font-size: 16px;
    font-weight: 700;
    color: var(--sc-main-color);
    opacity: 1;
    transform: translateY(0);
}

.smart-callback-wrapper:not(.is-active):not(.is-success) .sc-default {
    opacity: 1;
    pointer-events: auto;
}

.smart-callback-wrapper.is-active .sc-default,
.smart-callback-wrapper.is-success .sc-default {
    transform: translateY(-15px);
    opacity: 0;
}

.smart-callback-wrapper.is-active .sc-input {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    width: 100%;
    height: 100%;
}

.smart-callback-wrapper.is-success .sc-success {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#sc-phone {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--sc-main-color);
    padding: 0 50px 0 20px;
}

#sc-phone::placeholder {
    color: rgba(14, 3, 56, 0.4);
    font-weight: 600;
}

#sc-submit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    color: white;
    font-size: 22px;
}

#sc-submit:hover {
    transform: translateY(-50%) scale(1.05);
    filter: brightness(1.1);
}

/* État chargement : trois points pulsés à la place de la flèche */
#sc-submit .sc-submit-spinner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#sc-submit .sc-submit-spinner span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    animation: scDotPulse 1s ease-in-out infinite;
}

#sc-submit .sc-submit-spinner span:nth-child(2) {
    animation-delay: 0.15s;
}

#sc-submit .sc-submit-spinner span:nth-child(3) {
    animation-delay: 0.3s;
}

#sc-submit.is-loading {
    cursor: wait;
}

#sc-submit.is-loading:hover {
    transform: translateY(-50%);
    filter: none;
}

#sc-submit.is-loading .sc-submit-arrow {
    display: none;
}

#sc-submit.is-loading .sc-submit-spinner {
    display: flex;
}

@keyframes scDotPulse {

    0%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.sc-success {
    color: #27ae60;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
}

.sc-success ion-icon {
    font-size: 18px;
}


@media (max-width: 1023px) {
    .hero-container {
        height: auto !important;
    }

    .sticky-viewport {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 80px 16px 40px !important; /* ✅ MODIF : était 100px 20px 40px */
        align-items: center !important;
        text-align: center !important;
    }

    .hero-text-container {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        pointer-events: auto !important;
        z-index: 3 !important;
    }

    .hero-text {
        width: 100% !important;
        padding: 0 !important;
        align-items: center !important;
        text-align: center !important;
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 40px !important;
    }

    .hero-text h1 {
        font-size: 32px !important;
    }

    .hero-text p {
        margin: 0 auto 30px !important;
    }

    .hero-actions-group {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .smart-callback-wrapper {
        width: 100% !important;
        max-width: 320px !important;
    }

    .hero-device-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 760px !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        margin: 0 auto 0 !important;
        z-index: 5 !important;
        display: block !important;
    }

    /* Sur mobile (y compris paysage) on n'affiche QU'UNE image dans le hero.
       Quand une image avantage existe, on masque le tableau de bord pour éviter
       les deux images empilées et ne garder que l'image avantage (synchronisée
       avec les cartes ci-dessous). !important pour écraser tout style inline
       laissé par le JS lors d'un changement d'orientation.
       Si aucune image avantage n'est rendue, le tableau de bord reste visible. */
    .hero-device-wrapper:has(#hero-adv-center-image) .tableau-absolute {
        display: none !important;
    }

    .tableau-absolute {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        max-width: none !important;
        opacity: 1 !important;
        z-index: 5 !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
    }

    #hero-adv-center-image {
        /* Toujours visible sur mobile, indépendamment du scroll/JS */
        display: block !important;
        opacity: 1 !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        max-width: none !important;
        z-index: 6 !important;
        border: 4px solid #1a1a1a !important;
        border-radius: 16px !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
        overflow: visible !important;
    }

    #hero-adv-center-image .hero-adv-img {
        border-radius: 12px !important;
    }

    .tableau-screen {
        border-radius: 16px !important;
        transform: none !important;
        border-width: 4px !important;
    }

    .hero-adv-grid {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;             
        width: 100% !important;
        max-width: 760px !important;        
        margin: 40px auto 0 !important;     
        padding: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    @media (max-width: 767px) {
        .hero-adv-grid {
            grid-template-columns: 1fr !important;
        }
    }

    .adv-overlay {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-column: auto !important;
        justify-self: center !important;
    }

    .adv-card {
        animation: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px !important;
        padding: 16px 20px !important;
    }

    /* Désactivation des déplacements et flèches sur mobile (identique au bloc PWA) */
    .adv-overlay:nth-child(odd) .adv-card.is-active,
    .adv-overlay:nth-child(even) .adv-card.is-active {
        transform: none !important;
    }

    .adv-card.is-active::after {
        display: none !important;
    }

    .adv-card-content {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important;
        gap: 6px !important;
    }

    .adv-card-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .adv-card .icon-glow {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    .adv-card .icon-glow svg,
    .adv-card .icon-glow ion-icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
    }

    .adv-card h2 {
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .adv-card-desc {
        font-size: 12px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }

    .adv-info-btn {
        width: 28px !important;
        height: 28px !important;
        opacity: 0.7 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .adv-info-btn ion-icon,
    .adv-info-btn svg {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
    }

    .hero-dashboard-stats-wrap {
        display: none !important;
    }

    #global-dark-bg {
        display: none !important;
    }

    .dark-overlay {
        display: none !important;
    }

    .hero-trust-stats {
        justify-content: center;
        gap: 20px;
    }

    .hero-partners-group {
        align-items: center;
    }

    .partners-logos {
        justify-content: center;
    }
}


#hero-adv-center-image {
    background: transparent !important;
}

/* 2. On s'assure qu'aucun filtre ou dégradé résiduel ne s'applique sur l'image elle-même */
#hero-adv-center-image ::before,
#hero-adv-center-image ::after {
    display: none !important;
    background: none !important;
}

/* 3. On garantit que l'image interne est totalement nette et lumineuse */
.hero-adv-img {
    filter: none !important;
    opacity: 1 !important;
}

/* ═══ PROTROT MODE — Advantage Cards Color Override ═══ */
.mode-protrot .hero-adv-grid {
    --color-primary: var(--color-protrot-primary);
    --color-secondary: var(--color-protrot-secondary);
    --color-glow: var(--color-protrot-glow, rgba(25, 130, 108, 0.3));
}

.mode-protrot .adv-card:hover {
    border-color: var(--color-protrot-secondary);
    box-shadow: 0 25px 50px rgba(25, 130, 108, 0.15);
}