/*
|--------------------------------------------------------------------------
| Vert Caméléon Booking
| Front CSS - Dark Premium Theme
|--------------------------------------------------------------------------
*/


/* -------------------------------------------------
   VARIABLES + BASE
-------------------------------------------------- */


.vc-app {
	
	

    /* Nouvelle palette */

    --vc-title:#101c2d;
    --vc-text:#253449;
    --vc-border:#918978;

    --vc-bg:#ffffff;
    --vc-bg-alt:#fcfbf7;


    /* Bouton premium */

    --vc-button:
    linear-gradient(
        135deg,
        #f7ebc9 0%,
        #e3c989 25%,
        #caa65e 50%,
        #ddbf78 75%,
        #b98d43 100%
    );


    /* Etats */

--vc-error:#b42318;
--vc-error-bg:#fef3f2;


    /* Ombres */

    --vc-focus: rgba(202,166,94,.4);



    /* Type scale */

    --vc-text-xs:13.33px;
    --vc-text-sm:14.4px;
    --vc-text-base:16px;
    --vc-text-lg:19.2px;
    --vc-text-xl:23px;



    font-family:"Manrope", Arial, sans-serif;

    color:var(--vc-text);

    max-width:750px;

    margin:40px auto;

    padding:32px;

    box-sizing:border-box;

    background:var(--vc-bg);

    border:1px solid var(--vc-border);
	
	border-radius: 8px;
	
	

}



.vc-app *,
.vc-app *::before,
.vc-app *::after {

    box-sizing:border-box;

}







/* -------------------------------------------------
   PROGRESSION
-------------------------------------------------- */


.vc-progress {

    margin-bottom:30px;

}



.vc-progress-track {

    width:100%;

    height:8px;

    overflow:hidden;

    background:var(--vc-bg-alt);

    border:1px solid var(--vc-border);
	
	border-radius: 24px;

}



.vc-progress-fill {

    height:100%;

    width:25%;

    background:var(--vc-button);

    transition:.3s ease;

}



.vc-steps {

    display:flex;

    justify-content:space-between;

    margin-top:10px;

    font-size:var(--vc-text-xs);

    color:var(--vc-border);

}



.vc-steps span.active {

    color:var(--vc-title);

    font-weight:700;

}







/* -------------------------------------------------
   ETAPES
-------------------------------------------------- */


.vc-step {

    display:none;

}


.vc-step.active {

    display:block;

}





/* -------------------------------------------------
   CHAMPS FORMULAIRE
-------------------------------------------------- */


.vc-app label {

    display:block;

    margin:18px 0 7px;

    color:var(--vc-title);

    font-size:var(--vc-text-base);

    font-weight:700;

}



.vc-app input,
.vc-app select,
.vc-app textarea {


    width:100%;

    min-height:40px;


    padding:14px 16px;


    font-family:inherit;

    font-size:var(--vc-text-base);


    color:var(--vc-text);


    background-color:var(--vc-bg-alt);


    border:1px solid var(--vc-border);

border-radius:8px;

    appearance:none;

    -webkit-appearance:none;



    transition:.2s ease;


}



.vc-app textarea {

    min-height:140px;

    resize:vertical;

}



.vc-app input:focus,
.vc-app select:focus,
.vc-app textarea:focus {


    outline:none;


    border-color:#E8C98A;


    box-shadow:
        0 0 0 3px var(--vc-focus);

}




.vc-app input::placeholder,
.vc-app textarea::placeholder {

    color:var(--vc-border);

    opacity:.9;

}




/* -------------------------------------------------
   TABS
-------------------------------------------------- */


.vc-tabs {

    display:flex;

    overflow:hidden;

    margin-bottom:20px;

    border:1px solid var(--vc-border);
	
	border-radius:24px;

}



.vc-tab {

    flex:1;

    padding:13px;


    border:none;


    background:var(--vc-bg-alt);


    color:var(--vc-text);


    font-family:inherit;

    font-size:var(--vc-text-base);

    font-weight:700;


    cursor:pointer;

}


.vc-tab:first-child{

    border-radius:24px 0 0 24px;

}

.vc-tab:last-child{

    border-radius:0 24px 24px 0;

}


.vc-tab.active {

    background:var(--vc-button);

    color:#101c2d;

}







/* -------------------------------------------------
   GRILLES
-------------------------------------------------- */


.vc-grid {

    display:grid;

    width:100%;

    gap:16px;

}



.vc-grid > div {

    width:100%;

    min-width:0;

}



.vc-step .vc-grid {

    grid-template-columns:1fr 1fr;

}



.vc-contact-name,
.vc-contact-info {

    width:100%;

}



.vc-contact-name {

    grid-template-columns:1fr 2fr;

}



.vc-contact-info {

    grid-template-columns:1fr 2fr;

}







/* -------------------------------------------------
   PASSAGERS
-------------------------------------------------- */


.vc-counter {

    display:inline-flex;

    align-items:stretch;

    width:fit-content;

    border:1px solid var(--vc-border);
	
	border-radius:24px;
overflow:hidden;

}



.vc-counter input {

    width:44px;

    padding:0;

    text-align:center;


    border:none;

    background:var(--vc-bg-alt);


    color:var(--vc-title);

    font-size:16px;

    font-weight:700;

}



.vc-counter button {


    width:34px;

    padding:0;


    border:none;


    background:var(--vc-button);


    color:#0c1727;


    font-size:20px;

    line-height:1;


    cursor:pointer;

}







/* -------------------------------------------------
   TELEPHONE
-------------------------------------------------- */


.vc-phone {

    display:flex;

    align-items:center;

    overflow:hidden;


    background:var(--vc-bg-alt);


    border:1px solid var(--vc-border);
	
	border-radius:8px;

}



.vc-phone span {

    display:flex;

    align-items:center;


    padding:14px 12px;


    background:var(--vc-bg);


    color:var(--vc-title);


    font-weight:700;


    border-right:1px solid var(--vc-border);

}



.vc-phone input {

    border:none;

    background:var(--vc-bg-alt);

    color:var(--vc-text);

}






/* -------------------------------------------------
   NAVIGATION
-------------------------------------------------- */


.vc-nav {

    display:flex;

    justify-content:space-between;

    align-items:center;


    margin-top:30px;

}



.vc-nav button {

    padding:13px 22px;


    font-family:inherit;

    font-size:var(--vc-text-base);

    font-weight:700;


    cursor:pointer;

}



#vc-next,
#vc-submit {


    background:var(--vc-button);


    color:#101c2d;


    border:1px solid #fcfbf7;
	
	border-radius:24px;
	
	border-style: inset;
	
	box-shadow:
inset 0 0 0 1px rgba(255,255,255,.45);

}



#vc-prev {


    background:transparent;


    color:var(--vc-text);


    border:1px solid var(--vc-border);
	
	 border-radius:24px;

}



#vc-next:hover,
#vc-submit:hover {


    filter:brightness(1.08);

}







/* -------------------------------------------------
   ETATS
-------------------------------------------------- */


.vc-hidden {

    display:none!important;

}



.vc-honeypot {

    position:absolute;

    left:-9999px;

    opacity:0;

}



.vc-success {


    margin-top:20px;

    padding:15px;


    background:var(--vc-bg-alt);


    border:1px solid var(--vc-border);


    color:var(--vc-title);


    font-weight:700;

}







/* -------------------------------------------------
   ERREURS
-------------------------------------------------- */


.vc-app .vc-error {


    border-color:var(--vc-error)!important;


    background:var(--vc-error-bg);


}



.vc-error-message {


    margin-top:6px;


    color:var(--vc-error);


    font-size:14px;

    font-weight:600;

}







/* -------------------------------------------------
   DATE PICKER
-------------------------------------------------- */


.vc-app input[type="date"] {


}



.vc-app input[type="date"]::-webkit-calendar-picker-indicator {


    opacity:.7;

}







/* -------------------------------------------------
   MOBILE
-------------------------------------------------- */


@media(max-width:600px){


    .vc-app {

        margin:20px auto;

        padding:22px;

    }



    .vc-contact-name,
    .vc-contact-info,
    .vc-step .vc-grid {

        grid-template-columns:1fr;

    }



    .vc-nav button {

        padding:12px 15px;

    }


}


/* -------------------------------------------------
   SELECT DROPDOWN
-------------------------------------------------- */


.vc-app select {


    color:var(--vc-text);


    background-color:var(--vc-bg-alt);


    cursor:pointer;

}



.vc-app select option {


    color:var(--vc-text);


    background-color:var(--vc-bg-alt);

}



.vc-app select option:checked {


    background-color:#D2AF6A;

    color:#0c1727;

}


.vc-app input,
.vc-app textarea,
.vc-app select {

    color-scheme:dark;

}


/* -------------------------------------------------
   TEXTE SAISI DANS LES INPUTS
-------------------------------------------------- */

.vc-app input,
.vc-app textarea,
.vc-app select {

    color: var(--vc-text) !important;

}


/* Valeurs saisies */

.vc-app input[type="text"],
.vc-app input[type="email"],
.vc-app input[type="tel"],
.vc-app input[type="date"],
.vc-app input[type="time"],
.vc-app textarea {

    color: var(--vc-text) !important;

}


/* Autofill Chrome / navigateurs */

.vc-app input:-webkit-autofill,
.vc-app input:-webkit-autofill:hover,
.vc-app input:-webkit-autofill:focus {

    -webkit-text-fill-color: var(--vc-text) !important;

    -webkit-box-shadow:
        0 0 0px 1000px var(--vc-bg-alt) inset !important;

    transition:background-color 9999s ease-in-out 0s;

}



/* -------------------------------------------------
   COMPTEURS GENERIQUES (passagers / enfants / bagages / skis)
-------------------------------------------------- */


.vc-counter-group {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:10px;

}



.vc-counter-item {

    display:flex;

    flex-direction:column;

    gap:6px;

}



.vc-counter-label {

    font-size:var(--vc-text-xs);

    color:var(--vc-text);

    font-weight:600;

}



.vc-app select optgroup {

    color:var(--vc-title);

    font-weight:700;

    font-style:normal;

    background-color:var(--vc-bg-alt);

}



.vc-app select optgroup option {

    color:var(--vc-text);

    font-weight:400;

}



/* -------------------------------------------------
   TOGGLE SKIS / SNOWBOARDS
-------------------------------------------------- */


.vc-switch {

    position:relative;

    display:inline-block;

    width:56px;

    height:32px;

    cursor:pointer;

}



.vc-switch input {

    position:absolute;

    opacity:0;

    width:100%;

    height:100%;

    margin:0;

    cursor:pointer;

}



.vc-switch-slider {

    position:absolute;

    inset:0;

    background:var(--vc-bg-alt);

    border:1px solid var(--vc-border);

    transition:.2s ease;
	
	border-radius:24px;

}



.vc-switch-slider::before {

    content:"";

    position:absolute;

    top:3px;

    left:3px;

    width:24px;

    height:24px;

    background:var(--vc-text);

    transition:.2s ease;
	
	border-radius:50%;

}



.vc-switch input:checked + .vc-switch-slider {

    background:var(--vc-button);

    border-color:#D2AF6A;

}



.vc-switch input:checked + .vc-switch-slider::before {

    left:27px;

    background:#0c1727;

}



.vc-switch input:focus + .vc-switch-slider {

    box-shadow:0 0 0 3px var(--vc-focus);

}



#pickupAutre,
#destinationAutre,
#destinationReturnAutre {

    margin-bottom:10px;

}







/* -------------------------------------------------
   RECAPITULATIF
-------------------------------------------------- */


.vc-recap-section {

    margin-bottom:20px;

    padding-bottom:14px;

    border-bottom:1px solid var(--vc-border);

}



.vc-recap-section:last-child {

    border-bottom:none;

    margin-bottom:0;

}



.vc-recap-section h4 {

    margin:0 0 10px;

    color:var(--vc-title);

    font-size:var(--vc-text-lg);

}



.vc-recap-row {

    display:flex;

    justify-content:space-between;

    gap:12px;

    padding:6px 0;

    font-size:var(--vc-text-sm);

    border-bottom:1px dashed rgba(145,137,120,.25);

}



.vc-recap-row:last-child {

    border-bottom:none;

}



.vc-recap-key {

    color:var(--vc-border);

    font-weight:700;

    flex-shrink:0;

}



.vc-recap-value {

    color:var(--vc-text);

    text-align:right;

}







/* -------------------------------------------------
   MOBILE - COMPTEURS / RECAP
-------------------------------------------------- */


@media(max-width:600px){


    .vc-counter-group {

        gap:14px;

    }



    .vc-recap-row {

        flex-direction:column;

        gap:2px;

    }



    .vc-recap-value {

        text-align:left;

    }


}

/* -------------------------------------------------
   MESSAGE WHATSAPP
-------------------------------------------------- */

.vc-booking-note{
    margin-top: 24px !important;
	text-align: left;
    font-size: 14px;
    color: var(--vc-text, #666);
    opacity: .85;
}