/**
 * SOS IT Student - Custom Styles for Landing Page "sosit" (ID 8086)
 * Palette "Urgence Sereine" : Bleu Nuit + Vert Menthe + Orange Signalétique
 * Scope: .page-id-8086 pour isoler les styles
 */

/* ==========================================================================
   VARIABLES & PALETTE
   ========================================================================== */
.page-id-8086 {
    --lucas-bg-dark: #0D1B2A;          /* Bleu Nuit Profond */
    --lucas-bg-medium: #1B263B;        /* Bleu Nuit Medium */
    --lucas-bg-light: #415A77;         /* Bleu Gris */
    --lucas-accent-green: #2EC4B6;     /* Vert Menthe (Sécurité) */
    --lucas-accent-orange: #FF6B35;    /* Orange Signalétique (Urgence) */
    --lucas-text-light: #E0E1DD;       /* Texte clair */
    --lucas-text-white: #FFFFFF;
    --lucas-text-muted: #778DA9;       /* Texte secondaire */
    --lucas-success: #06D6A0;          /* Vert Succès */
    --lucas-danger: #EF476F;           /* Rouge Alerte (pour les douleurs) */
}

/* ==========================================================================
   GLOBAL PAGE OVERRIDES
   ========================================================================== */
.page-id-8086 .bt-content-holder,
.page-id-8086 .elementor {
    background-color: var(--lucas-bg-dark) !important;
}

.page-id-8086 .elementor-section {
    background-color: var(--lucas-bg-dark) !important;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.page-id-8086 .elementor-element-2142392c {
    background: linear-gradient(135deg, var(--lucas-bg-dark) 0%, var(--lucas-bg-medium) 100%) !important;
    position: relative;
}

.page-id-8086 .elementor-element-2142392c::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90" opacity="0.03">{"}'</text></svg>') repeat;
    pointer-events: none;
}

/* ==========================================================================
   TYPOGRAPHY - HEADINGS
   ========================================================================== */
.page-id-8086 .elementor-heading-title {
    color: var(--lucas-text-white) !important;
}

.page-id-8086 h1.elementor-heading-title,
.page-id-8086 .elementor-widget-heading h1 {
    color: var(--lucas-text-white) !important;
    text-shadow: 0 2px 20px rgba(46, 196, 182, 0.3);
}

.page-id-8086 h2.elementor-heading-title {
    color: var(--lucas-accent-green) !important;
}

.page-id-8086 h3.elementor-heading-title {
    color: var(--lucas-text-light) !important;
}

/* ==========================================================================
   TYPOGRAPHY - TEXT
   ========================================================================== */
.page-id-8086 .elementor-widget-text-editor,
.page-id-8086 .elementor-widget-text-editor p,
.page-id-8086 .elementor-text-editor {
    color: var(--lucas-text-light) !important;
}

.page-id-8086 .elementor-widget-text-editor strong {
    color: var(--lucas-accent-orange) !important;
    font-weight: 700;
}

/* ==========================================================================
   BUTTONS - CTA PRINCIPAL
   ========================================================================== */
.page-id-8086 .elementor-button {
    background: linear-gradient(135deg, var(--lucas-accent-green) 0%, #1FAA9C 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 18px 40px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 20px rgba(46, 196, 182, 0.4) !important;
    transition: all 0.3s ease !important;
}

.page-id-8086 .elementor-button:hover {
    background: linear-gradient(135deg, var(--lucas-accent-orange) 0%, #E55A2B 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.5) !important;
}

.page-id-8086 .elementor-button-text {
    color: var(--lucas-text-white) !important;
    font-size: 16px !important;
}

/* Pulse animation pour urgence */
.page-id-8086 .elementor-button {
    animation: pulse-lucas 2s infinite;
}

@keyframes pulse-lucas {
    0% { box-shadow: 0 4px 20px rgba(46, 196, 182, 0.4); }
    50% { box-shadow: 0 4px 30px rgba(46, 196, 182, 0.7); }
    100% { box-shadow: 0 4px 20px rgba(46, 196, 182, 0.4); }
}

/* ==========================================================================
   ICON BOXES - DOULEURS & BÉNÉFICES
   ========================================================================== */
.page-id-8086 .elementor-widget-icon-box {
    background: var(--lucas-bg-medium) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    border-left: 4px solid var(--lucas-accent-green) !important;
    transition: all 0.3s ease !important;
}

.page-id-8086 .elementor-widget-icon-box:hover {
    transform: translateX(5px);
    border-left-color: var(--lucas-accent-orange) !important;
}

.page-id-8086 .elementor-icon-box-title {
    color: var(--lucas-text-white) !important;
}

.page-id-8086 .elementor-icon-box-description {
    color: var(--lucas-text-muted) !important;
}

.page-id-8086 .elementor-icon-box-icon .elementor-icon {
    color: var(--lucas-accent-green) !important;
}

/* Style spécial pour les "douleurs" - Rouge alerte */
.page-id-8086 .elementor-element-bb77ee6 .elementor-widget-icon-box,
.page-id-8086 .elementor-element-6930db06 .elementor-widget-icon-box,
.page-id-8086 .elementor-element-3e137ec8 .elementor-widget-icon-box {
    border-left-color: var(--lucas-danger) !important;
}

.page-id-8086 .elementor-element-bb77ee6 .elementor-icon,
.page-id-8086 .elementor-element-6930db06 .elementor-icon,
.page-id-8086 .elementor-element-3e137ec8 .elementor-icon {
    color: var(--lucas-danger) !important;
}

/* ==========================================================================
   IMAGE BOXES
   ========================================================================== */
.page-id-8086 .elementor-widget-image-box {
    background: rgba(27, 38, 59, 0.8) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

.page-id-8086 .elementor-image-box-title {
    color: var(--lucas-text-white) !important;
}

.page-id-8086 .elementor-image-box-description {
    color: var(--lucas-text-muted) !important;
}

/* ==========================================================================
   DIVIDERS
   ========================================================================== */
.page-id-8086 .elementor-divider-separator {
    border-color: var(--lucas-accent-green) !important;
    opacity: 0.5;
}

/* ==========================================================================
   ICON LISTS
   ========================================================================== */
.page-id-8086 .elementor-icon-list-icon i {
    color: var(--lucas-accent-green) !important;
}

.page-id-8086 .elementor-icon-list-text {
    color: var(--lucas-text-light) !important;
}

/* ==========================================================================
   CALENDLY WIDGET - MISE EN VALEUR
   ========================================================================== */
.page-id-8086 #calendly,
.page-id-8086 [id="calendly"] {
    background: linear-gradient(180deg, var(--lucas-bg-medium) 0%, var(--lucas-bg-dark) 100%) !important;
    padding: 40px 20px !important;
    border-radius: 20px !important;
    margin: 30px auto !important;
    max-width: 900px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid var(--lucas-accent-green) !important;
}

.page-id-8086 .calendly-inline-widget {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Titre au-dessus du Calendly */
.page-id-8086 .elementor-element-108b740c {
    position: relative;
}

/* ==========================================================================
   SECTIONS BACKGROUNDS ALTERNÉS
   ========================================================================== */
.page-id-8086 .elementor-section:nth-child(even) {
    background: var(--lucas-bg-medium) !important;
}

.page-id-8086 .elementor-section:nth-child(odd) {
    background: var(--lucas-bg-dark) !important;
}

/* ==========================================================================
   GARANTIE BOX - STYLE SPÉCIAL
   ========================================================================== */
.page-id-8086 .garantie-box,
.page-id-8086 [class*="garantie"] {
    background: linear-gradient(135deg, rgba(46, 196, 182, 0.1) 0%, rgba(6, 214, 160, 0.1) 100%) !important;
    border: 2px solid var(--lucas-success) !important;
    border-radius: 16px !important;
    padding: 30px !important;
}

/* ==========================================================================
   FOOTER OVERRIDE
   ========================================================================== */
.page-id-8086 .elementor-element-6ac9ce97 {
    background: var(--lucas-bg-dark) !important;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .page-id-8086 .elementor-button {
        padding: 15px 30px !important;
        font-size: 14px !important;
    }
    
    .page-id-8086 .elementor-widget-icon-box {
        padding: 20px !important;
    }
    
    .page-id-8086 #calendly {
        padding: 20px 10px !important;
        margin: 20px 10px !important;
    }
}

/* ==========================================================================
   URGENCE BADGE (À ajouter via Elementor HTML widget)
   ========================================================================== */
.page-id-8086 .urgence-badge {
    display: inline-block;
    background: var(--lucas-accent-orange);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: shake 0.5s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* ==========================================================================
   TRUST INDICATORS
   ========================================================================== */
.page-id-8086 .trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--lucas-text-muted);
    font-size: 14px;
}

.page-id-8086 .trust-badge i {
    color: var(--lucas-success);
}