.logo-container {

    background-color: #fff;
    padding: 16px;
    border-radius: 0px 100px 100px 0px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}




@media only screen and (min-width: 1190px){
           .logo-container {
    position: absolute;
        top: 26px;
    left: 0;
}
}

@media only screen and (min-width: 768px){
    .slogan {
    padding-left: 41px;
}
}






        /* Reset et styles de base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f5f8fb;
            color: #333;
            line-height: 1.6;
            padding-bottom: 70px; /* Espace pour la barre fixe en bas */
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* Header */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            margin-bottom: 20px;
        }
        
        .logo-container {
            display: flex;
            align-items: center;
            max-width: 250px;

        }
        
        .logo-container img {
            margin-right: 15px;
            width: 90%;
        }
        
        .slogan {
            color: #0074d9;
            font-size: 36px;
            font-weight: 500;
            margin: 0px auto !important;
        }
        
        .slogan strong {
            color: #ffb700;
        }
        
        /* Titre principal avec compteur - MAINTENANT AU DÉBUT */
        .main-title {
            text-align: center;
            margin-bottom: 25px;
            background: linear-gradient(to right, #f0f7ff, #e8f4ff);
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .main-title h1 {
            color: #0074d9;
            font-size: 2.3rem;
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .main-title p {
            color: #555;
            font-size: 1.25rem;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* Expert Box - Version compacte */
        .expert-box {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            border-left: 4px solid #0074d9;
        }
        
        .expert-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 20px;
            border: 3px solid #0074d9;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
        
        .expert-content {
            flex: 1;
        }
        
        .expert-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .expert-title {
            color: #0074d9;
            font-size: 19px;
            font-weight: 600;
            margin-right: 15px;
        }
        
        .expert-badge {
            background: #e8f4ff;
            border-radius: 30px;
            padding: 4px 12px;
            font-size: 15px;
            color: #0074d9;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .expert-desc {
            color: #555;
            font-size: 15px;
            line-height: 1.5;
        }
        
        /* Section du formulaire */
        .form-section {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            padding: 30px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            border: 1px solid #e8eef5;
        }
        
        /* Ruban */
        .ribbon {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
            overflow: hidden;
            width: 150px;
            height: 150px;
        }
        
        .ribbon-content {
    position: absolute;
    top: 36px;
    right: -47px;
    transform: rotate(45deg);
    width: 200px;
    background: #ff6b6b;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 8px 0;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 1px;
        }
        
        /* Zone de formulaire */
        .form-container {
            margin: 20px 0 30px;
            position: relative;
        }
        
        .form-header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        .form-header h2 {
            color: #0074d9;
            font-size: 1.6rem;
            margin-bottom: 10px;
        }
        
        .form-header p {
            color: #666;
            max-width: 600px;
            margin: 0 auto;
            font-size: 0.95rem;
        }
        
        /* Cette partie représente le formulaire existant à conserver */
        .existing-form {
            background: #f8fafd;
            border-radius: 12px;
            padding: 25px;
            margin-bottom: 25px;
            border: 1px solid #e8eef5;
            display: grid;
                margin-left: 20px;
    margin-right: 20px;
        }
        
        .form-row {
            display: flex;
            gap: 25px;
            margin-bottom: 25px;
        }
        
        .form-col {
            flex: 1;
        }
        
        .form-label {
            color: #0074d9;
            font-weight: 500;
            margin-bottom: 10px;
            display: block;
            font-size: 1rem;
        }
        
        .form-select {
            width: 100%;
            padding: 14px;
            border: 1px solid #d0e0f2;
            border-radius: 10px;
            background-color: #fff;
            color: #555;
            font-size: 1rem;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230074d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            padding-right: 40px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
            transition: all 0.3s;
        }
        
        .form-select:hover, .form-select:focus {
            border-color: #0074d9;
            box-shadow: 0 3px 10px rgba(0,116,217,0.1);
        }
        
        .action-button-container {
            text-align: center;
            position: relative;
            margin-top: 20px;
        }
        
        /* Animation pour le bouton */
        @keyframes pulse-button {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 159, 26, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(255, 159, 26, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 159, 26, 0);
            }
        }
        
        .action-button {
            display: inline-block;
            width: 100%;
            max-width: 400px;
            background: linear-gradient(to right, #ff9f1a, #ff8400);
            color: white;
            border: none;
            padding: 16px 30px;
            font-size: 1.1rem;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 5px 15px rgba(255, 159, 26, 0.4);
            transition: all 0.3s ease;
            animation: pulse-button 2s infinite;
            position: relative;
            overflow: hidden;
        }
        
        .action-button:hover {
            background: linear-gradient(to right, #ff8400, #ff7600);
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(255, 159, 26, 0.5);
        }
        
        .action-button:before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255,255,255,0.1);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% {
                left: -50%;
                top: -50%;
            }
            100% {
                left: 100%;
                top: 100%;
            }
        }
        
        /* Trust badges */
        .trust-badges {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 25px 0 15px;
            flex-wrap: wrap;
        }
        
        .badge {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #f8fafd;
            padding: 8px 16px;
            border-radius: 40px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .badge-icon {
            font-size: 1.5rem;
            color: #0074d9;
        }
        
        .badge-text {
            font-weight: 600;
            color: #555;
            font-size: 0.9rem;
        }
        
        /* Testimonial */
        .testimonial {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin-top: 25px;
            text-align: center;
            border: 1px solid #e0e9f5;
        }
        
        .testimonial-quote {
            font-style: italic;
            color: #555;
            font-size: 0.95rem;
            line-height: 1.4;
            position: relative;
            padding: 0 15px;
            margin-bottom: 15px;
        }
        
        .testimonial-quote:before,
        .testimonial-quote:after {
            content: '"';
            font-size: 1.5rem;
            color: #0074d9;
            opacity: 0.3;
            position: absolute;
        }
        
        .testimonial-quote:before {
            left: -5px;
            top: -5px;
        }
        
        .testimonial-quote:after {
            right: -5px;
            bottom: -15px;
        }
        
        .testimonial-author {
            font-weight: 600;
            color: #0074d9;
            font-size: 0.95rem;
        }
        
        /* Barre fixe en bas avec chrono et compteur */
        .fixed-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to right, #002a51, #004080);
            color: white;
            padding: 10px 20px;
            z-index: 100;
            box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .fixed-bar-container {
            width: 100%;
            max-width: 1200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .counter-section {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .live-pulse {
            width: 10px;
            height: 10px;
            background: #0f0;
            border-radius: 50%;
            position: relative;
        }
        
        .live-pulse:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 255, 0, 0.6);
            border-radius: 50%;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.7;
            }
            70% {
                transform: scale(2.5);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 0;
            }
        }
        
        .counter-text {
            font-weight: 500;
            font-size: 19px;
        }
        
        .counter-text strong {
            color: #ffb700;
        }
        
        .timer-section {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .timer-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 19px;
        }
        
        .timer-label svg {
            color: #ff6b6b;
        }
        
        .timer-units {
            display: flex;
            gap: 6px;
        }
        
        .timer-unit {
            background: rgba(0, 0, 0, 0.3);
            color: white;
            width: 35px;
            height: 46px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 19px;
            font-weight: bold;
        }
        
        .timer-unit-label {
            font-size: 12px;
            text-transform: uppercase;
            opacity: 0.7;
            margin-top: -5px;
        }
        
        /* Media queries pour responsivité */
        @media (max-width: 992px) {
            .fixed-bar-container {
                flex-direction: column;
                gap: 8px;
            }
            
            .counter-section, .timer-section {
                width: 100%;
                justify-content: center;
            }
            
            body {
                padding-bottom: 90px;
            }
        }
        
        @media (max-width: 768px) {

.logo-container {
    top: 0px;
}

            .form-row {
                flex-direction: column;
                gap: 15px;
            }
            
            .header {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
            
            .trust-badges {
                flex-direction: column;
                align-items: center;
                gap: 12px;
            }
            
            .main-title h1 {
                font-size: 1.7rem;
            }
            
            .expert-box {
                flex-direction: column;
                text-align: center;
                padding: 15px;
            }
            
            .expert-image {
                margin-right: 0;
                margin-bottom: 15px;
            }
            
            .expert-header {
                flex-direction: column;
                gap: 10px;
            }
            
            .expert-badge {
                margin: 0 auto;
            }
        }





        /* Styles responsive pour mobile */
@media (max-width: 767px) {

.counter-text {
    font-size: 16px !important;
}

    .timer-label {
        font-size: 15px !important;
    }

    .timer-unit {
        font-size: 15px !important;
    }

    .timer-unit-label {
        font-size: 12px !important;
    }
.expert-badge {
    font-size: 14px !important;
}

    /* Ajustements généraux */
    .container {
        padding: 15px 10px;
    }
    
    /* Header et logo */
    .header {
        flex-direction: column;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .logo-container {
        position: relative;
        left: auto;
        border-radius: 50px;
        padding: 10px;
        margin-bottom: 15px;
        justify-content: center;
        width: 100%;
    }
    
    .slogan {
        font-size: 1.5rem;
        text-align: center;
        margin-top: 10px;
    }
    
    /* Expert box */
    .expert-box {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .expert-image {
        margin: 0 auto 15px;
        width: 70px;
        height: 70px;
    }
    
    .expert-header {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    
    .expert-title {
        margin-right: 0;
    }
    
    .expert-badge {
        margin: 0 auto;
    }
    
    /* Formulaire */
    .form-section {
        padding: 20px 15px;
    }
    
    .ribbon-content {
        font-size: 0.8rem;
        top: 30px;
        right: -45px;
    }
    
    .form-row {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .form-label {
        margin-bottom: 8px;
    }
    
    .form-select {
        padding: 12px;
    }
    
    .form-header h2 {
        font-size: 1.4rem;
    }
    
    /* Badges et témoignage */
    .trust-badges {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .badge {
        width: 100%;
        justify-content: center;
    }
    
    /* Barre fixe en bas */
    .fixed-bar {
        padding: 10px 5px;
    }
    
    .fixed-bar-container {
        flex-direction: column;
        gap: 10px;
    }
    
    .counter-section, .timer-section {
        width: 100%;
        justify-content: center;
    }
    
    .counter-text {
        font-size: 0.9rem;
    }
    
    .timer-label {
        font-size: 0.9rem;
    }
    
    .timer-unit {
        width: 30px;
        height: 40px;
        font-size: 1rem;
    }
    
    .timer-unit-label {
        font-size: 0.6rem;
    }
    
    /* Ajustement pour la barre en bas */
    body {
        padding-bottom: 110px;
    }
    
    /* Bouton d'action */
    .action-button {
        font-size: 1rem;
        padding: 14px 20px;
    }
}

/* Ajustements pour très petits écrans */
@media (max-width: 359px) {
    .slogan {
        font-size: 1.3rem;
    }
    
    .timer-unit {
        width: 25px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .timer-label, .counter-text {
        font-size: 0.8rem;
    }
    
    .form-header h2 {
        font-size: 1.2rem;
    }
}







/*------modif page ---------*/
.dropdown{
    font-weight: 400;
    color: #232323 !important;
    padding: 14px;
    border: 1px solid #d0e0f2;
    border-radius: 10px;
    background-color: #fff;
    color: #555;
    cursor: pointer;
    appearance: none;
    padding-right: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.3s;
}

.select2 {
    height: 5.3rem;
    }


    .niveaux_step .dropdown .dropdown-menu li {
    color: #232323;
}


input#date_naissance, input#email, label.cqcedj, input#nom, input#prenom, input#geocomplete, input#cp, input#telephone {
    font-weight: 400;
    color: #232323;
    padding: 14px;
    border: 1px solid #d0e0f2;
    border-radius: 10px;
    background-color: #fff;
    color: #555;
    cursor: pointer;
    appearance: none;
    padding-right: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: all 0.3s;
}


.radioselect label {
    margin: 7px 0px;
}


label.cqcedj {
    line-height: 1;
}



.input-select-titre {
    font-size: 19px;
    text-align: left;
    display: block;
    padding: 0px 0px 10px 0px;
    font-weight: 600;
}


button {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    background: linear-gradient(to right, #ff9f1a, #ff8400);
    color: white;
    border: none;
    padding: 16px 30px;
    font-size: 1.1rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(255, 159, 26, 0.4);
    transition: all 0.3s ease;
    animation: pulse-button 2s infinite;
    position: relative;
    overflow: hidden;
}


/*----modif page responsive --------*/

/* Corrections pour l'affichage mobile avec !important */
@media (max-width: 767px) {
    /* Ajustements généraux pour le formulaire */

        .ribbon-content {
        font-size: 14px !important;

    }
    .form-container {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Correction des espaces dans le formulaire */
    .existing-form {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 15px !important;
    }
    
    /* Correction de la taille des champs */
    .dropdown, 
    input#date_naissance, 
    input#email, 
    label.cqcedj, 
    input#nom, 
    input#prenom, 
    input#geocomplete, 
    input#cp, 
    input#telephone {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 10px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Correction des labels et titres */
    .input-select-titre {
        text-align: left !important;
        font-size: 16px !important;
        padding-left: 5px !important;
    }
    
    .cdIzeb {
        font-size: 20px !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Correction de la disposition des colonnes */
    .col-6 {
        width: 100% !important;
        float: none !important;
        padding-bottom: 15px !important;
    }
    
    /* Correction des boutons radio */
    .radioselect {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .radioselect label {
        width: 45% !important;
        margin: 5px !important;
        font-size: 16px !important;
        height: auto !important;
        line-height: normal !important;
        padding: 10px 5px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Correction pour les sélecteurs déroulants */
    .select2 {
        height: auto !important;
        width: 100% !important;
    }
    
    .select2 .select {
        height: auto !important;
        line-height: normal !important;
        padding: 10px !important;
    }
    
    .dropdown .select {
        height: auto !important;
        line-height: normal !important;
        padding-left: 10px !important;
    }
    
    /* Correction des boutons */
    button {
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    /* Correction pour l'expert-box */
    .expert-box {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .expert-image {
        margin: 0 auto 10px !important;
    }
    
    .expert-content {
        text-align: center !important;
    }
    
    /* Correction pour la carte de consultant */
    .rappel-form-container .consultant-card {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .rappel-form-container .consultant-image {
        margin: 0 auto 10px !important;
    }
    
    /* Correction pour la barre fixe en bas */
    .fixed-bar-container {
        padding: 5px !important;
    }
    
    /* Correction pour les indicateurs de flèche */
    .cwFnMx {
        margin: 0 5px !important;
    }
    
    /* Correction pour les boîtes à cocher */
    .box_checkbox {
        margin-left: 0 !important;
    }
    
    /* Correction des champs de date spécifiques */
    input#date_naissance_enfant_1,
    input#date_naissance_enfant_2,
    input#date_naissance_enfant_3,
    input#date_naissance_enfant_4,
    input#date_naissance_enfant_5,
    input#date_naissance_conjoint,
    input#date_effet {
        width: 100% !important;
        font-size: 16px !important;
        padding: 10px !important;
    }
    
    /* Ajustement pour le header et logo */
    .header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 10px 0 !important;
    }
    
    .logo-container {
        position: relative !important;
        left: auto !important;
        width: 100% !important;
        border-radius: 0 !important;
        display: flex !important;
        justify-content: center !important;
        box-shadow: none !important;
        padding: 10px !important;
    }
    
    .slogan {
        font-size: 1.8rem !important;
        margin-top: 10px !important;
        text-align: center !important;
    }
    
    /* Corrections pour les formulaires existants */
    .base-select {
        width: 100% !important;
    }
    
    .input-and-error-wrapper {
        max-width: 100% !important;
    }
    
    .BaseFormInput__Input-mg6i7x-0.eGxvan.base-input,
    .BaseFormInput__Input-mg6i7x-0.eGxvan.base-select {
        display: block !important;
        width: 100% !important;
    }
    
    .dropdown-menu {
        width: 100% !important;
    }
    
    /* Correction pour les étapes du formulaire */
    .step {
        padding: 0 !important;
    }
    
    fieldset {
        padding: 0 !important;
    }
    
    .slideform-group {
        padding: 0 !important;
    }
    
    /* Amélioration des marges pour les boutons d'action */
    #step_1, #step_2, #step_3, #step_4, #step_5, #step_6, #step_7, #step_8, #step_9, #step_10, #step_date, #btn_envoie {
        margin: 15px auto !important;
    }
    
    /* Correction pour les boutons de navigation (flèches) */
    .buttons.Icon-sc-11duc5q-0.fWRFLH.IconButton-sc-1mju9a1-0.dwNXAw {
        position: absolute !important;
        z-index: 10 !important;
    }
    
    /* Correction pour la div de contenu */
    .animation-child.animation-child-form-content {
        width: 100% !important;
    }
    
    /* Fix pour les boutons submit */
    .ActionButton__StyledButton-sc-6yqjya-0.fwhIwe {
        margin: 15px auto !important;
        display: block !important;
    }
    
    /* Amélioration pour les sections du formulaire */
    .div_conjoint, 
    .colDateEnfant,
    .col_autre_profession {
        width: 100% !important;
        margin: 10px 0 !important;
    }
}

/* Corrections spécifiques pour très petits écrans */
@media (max-width: 359px) {
    .radioselect label {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    .cdIzeb {
        font-size: 18px !important;
    }
    
    .input-select-titre {
        font-size: 14px !important;
    }
    
    /* Réduire la taille des textes pour très petits écrans */
    .expert-title {
        font-size: 16px !important;
    }
    
    .expert-desc {
        font-size: 14px !important;
    }
    
    .expert-badge {
        font-size: 12px !important;
    }
}














/*---------horloge-----------*/