/*
Theme Name: Inspiro Child
Template: inspiro
Version: 12.0 (Mobile Height Fix + Desktop Clean)
*/

/* --- 1. CLEANUP --- */
#masthead, .site-header, .site-branding-wrap, .navigation-top, 
.site-content-contain > header, #framer-nav-wrapper + .site-content-contain > header {
    display: none !important; height: 0 !important; overflow: hidden !important;
}
.site-content-contain { padding-top: 0 !important; margin-top: 0 !important; }

/* --- 2. WRAPPER --- */
#framer-nav-wrapper {
    position: fixed !important; top: 30px !important; left: 0; width: 100%;
    z-index: 999999 !important; display: flex; justify-content: center; pointer-events: none;
}

/* --- 3. LA PILULE (BASE) --- */
.framer-pill {
    background: #0f0f0f !important;
    border-radius: 60px;
    pointer-events: auto !important; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden; 
    box-sizing: border-box;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; position: relative;
    /* Hauteur initiale Desktop */
    height: 54px; padding: 6px;
}

/* LOGO & TEXTE */
.framer-logo img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.pill-head-row { display: flex; align-items: center; width: 100%; }
.left-group { display: flex; align-items: center; gap: 10px; padding-left: 6px; }

/* Texte "Available" */
.status-text-group {
    display: flex; align-items: center; gap: 8px; 
    color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; white-space: nowrap;
    /* Transition rapide pour éviter le chevauchement */
    transition: max-width 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
    overflow: hidden;
}
.status-dot { width: 8px; height: 8px; background: #2ecc71; border-radius: 50%; box-shadow: 0 0 5px #2ecc71; }

/* MENU */
.pill-menu-items {
    display: flex; align-items: center; gap: 20px;
    overflow: hidden; transition: all 0.5s ease;
}
.framer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
.framer-nav a { color: #bbb; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; white-space: nowrap; }
.framer-nav a:hover { color: #fff; }
.framer-cta {
    background: #fff; color: #000 !important; padding: 10px 24px;
    border-radius: 40px; font-weight: 600; text-decoration: none; font-size: 14px; white-space: nowrap;
}


/* ========================================================= */
/* --- DESKTOP LOGIC (> 900px) --- */
/* ========================================================= */
@media (min-width: 901px) {
    .mobile-trigger { display: none !important; }

    /* --- OUVERT (Par défaut ou Hover) --- */
    .framer-pill:not(.scrolled),
    .framer-pill.scrolled:hover {
        max-width: 700px;
    }
    
    /* On cache le texte agressivement pour éviter le décalage */
    .framer-pill:not(.scrolled) .status-text-group,
    .framer-pill.scrolled:hover .status-text-group {
        max-width: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important;
    }
    
    /* On montre le menu */
    .framer-pill:not(.scrolled) .pill-menu-items,
    .framer-pill.scrolled:hover .pill-menu-items {
        max-width: 600px; opacity: 1; margin-left: 10px; margin-right: 6px;
    }

    /* --- FERMÉ (Seulement si scrollé et souris dehors) --- */
    .framer-pill.scrolled {
        max-width: 260px;
    }
    .framer-pill.scrolled .status-text-group {
        max-width: 200px; opacity: 1; margin-right: 15px;
    }
    .framer-pill.scrolled .pill-menu-items {
        max-width: 0; opacity: 0; margin: 0;
    }
}


/* ========================================================= */
/* --- MOBILE LOGIC (<= 900px) --- */
/* ========================================================= */
@media (max-width: 900px) {
    .pill-menu-items { display: none; } 

    /* ETAT FERMÉ */
    .framer-pill {
        flex-direction: column; width: auto !important; max-width: 90% !important; 
        min-width: 140px; /* Un peu plus large pour être sûr */
        justify-content: space-between; padding: 5px; height: 54px;
    }
    
    .pill-head-row { justify-content: space-between; padding-right: 5px; }
    .status-text-group { font-size: 13px; margin-right: 5px; }

    /* TRIGGER (Bouton Vert) */
    .mobile-trigger { 
        display: flex; flex-direction: column; justify-content: center; align-items: center;
        width: 42px; height: 42px; background: #5e67e6; border-radius: 50%;
        cursor: pointer; z-index: 20; transition: transform 0.3s ease;
    }
    .icon-bar { width: 16px; height: 2px; background: #000; margin: 2px 0; border-radius: 2px; transition: 0.3s; }

    /* --- ETAT OUVERT (Carte) --- */
    .framer-pill.active {
        width: 300px !important; 
        /* CORRECTION HAUTEUR : Auto pour ne pas couper le contenu */
        height: auto !important; 
        min-height: 350px;
        padding: 25px !important; 
        padding-bottom: 35px !important; /* Marge en bas pour le bouton Contact */
        border-radius: 30px;
        justify-content: flex-start;
    }

    /* CORRECTION CROIX : Positionnement ajusté vers l'intérieur */
    .framer-pill.active .mobile-trigger {
        position: absolute; 
        top: 25px; /* Plus bas */
        right: 25px; /* Plus à gauche */
        background: #fff; transform: rotate(180deg);
    }
    .framer-pill.active .icon-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .framer-pill.active .icon-bar:nth-child(2) { opacity: 0; }

    /* Contenu interne */
    .framer-pill.active .pill-head-row {
        align-items: flex-start; /* Logo en haut à gauche */
    }
    .framer-pill.active .status-text-group { display: none; } 
    
    .framer-pill.active .pill-menu-items {
        display: flex !important; flex-direction: column;
        width: 100%; opacity: 1; 
        margin-top: 20px; /* Espace après le logo */
    }
    .framer-pill.active .framer-nav ul { flex-direction: column; gap: 25px; width: 100%; text-align: center; }
    .framer-pill.active .framer-nav a { font-size: 24px; color: #fff; }
    .framer-pill.active .framer-cta {
        margin-top: 30px; background: #5e67e6; width: 100%; text-align: center; padding: 15px; font-size: 18px;
    }
}