:root {
    --color-navy:        #0A1628;
    --color-navy-dark:   #060E1A;
    --color-blue:        #0066FF;
    --color-blue-hover:  #0052CC;
    --color-white:       #FFFFFF;
    --color-gray-light:  #F5F7FA;
    --color-gray-form:   #F4F6F9;
    --color-gray-medium: #6B7280;
    --color-green:       #22C55E;
    --color-red:         #EF4444;
    --color-border:      #E5E7EB;
    --color-blue-light:  #EFF6FF;

    --radius-btn:        8px;
    --radius-card:       12px;
    --shadow-card:       0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.14);
    --transition-base:   200ms ease;

    /* Fond décoratif landing */
    --flexible-bkg-top:          calc(580px + 80px + 200px + 5cm + 200px);
    --flexible-bkg-left:         280px;
    --flexible-bkg-fade-start:   55%;
    --flexible-bkg-fade-end:     70%;
}

.flexible-landing {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: var(--color-navy);
    overflow: clip;
    position: relative;
}

/*
 * Fond décoratif global de la landing.
 *
 * Ajustements disponibles dans :root ci-dessous :
 *   --flexible-bkg-top         : position verticale depuis le haut du template
 *                              (hero estimé ~580px + padding enjeux 80px + offset original 200px + 5cm)
 *                              → à retoucher si la hauteur du hero change
 *   --flexible-bkg-fade-start  : % à partir duquel le fondu diagonal commence
 *   --flexible-bkg-fade-end    : % auquel le fondu atteint la transparence totale
 */
.flexible-landing__bkg {
    position: absolute;
    left: var(--flexible-bkg-left);
    top: var(--flexible-bkg-top);
    width: 2067px;
    height: 1913px;
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    -webkit-mask-image: linear-gradient(
        to bottom right,
        black                        var(--flexible-bkg-fade-start),
        transparent                  var(--flexible-bkg-fade-end)
    );
    mask-image: linear-gradient(
        to bottom right,
        black                        var(--flexible-bkg-fade-start),
        transparent                  var(--flexible-bkg-fade-end)
    );
}

@media (max-width: 768px) {
    .flexible-landing__bkg {
        display: none;
    }
}