/* CSS temporaire qui devra etre compiled dans le CSS principal. */
/* FBTODO : Compiler */

/* Map triggers (filtres) */
.map-category-buttons-container .mapFilterTrigger {display: block; text-transform: none; color: #fff; overflow: hidden; }
.map-category-buttons-container .mapFilterTrigger .mapFilterTrigger__txt {padding-top: 3px; opacity: 0.6; text-transform: uppercase; }

    /* Hover */
    .map-category-buttons-container .mapFilterTrigger:hover {color: #fff;}

    /* Active */
    .map-category-buttons-container .mapFilterTrigger.active .mapFilterTrigger__icon {opacity: 1; }
    .map-category-buttons-container .mapFilterTrigger.active .mapFilterTrigger__txt {opacity: 1; }


/* ITINERAIRES */
.map-canvas-wrap {position: relative;overflow: hidden;}

    /* ZOOM buttons */
    .gm-zoom {font-size: 6rem;cursor: pointer;text-align: center;background-color: #ff6c32;width: 1em;height: 1em;margin-bottom: 2px;background-size: 0.3em;background-repeat: no-repeat;background-position: 50% 50%;}
    .gm-zoom:hover {background-color:hsla(17, 100%, 40%, 1);}

    /* Button sizes */
    @media (max-width:1199px) {
        .gm-zoom {font-size:5rem;}
    }
    
    @media (max-width:499px) {
        .gm-zoom {font-size:4rem;}
    }
    

.mapItineraire {display: none;}
.mapItineraire__head {position: absolute;z-index: 10003;width: 23em;top:0;right: 0;background-color: #86a63d;color: #fff;height: 3em;display: flex;align-items: center;}
.mapItineraire__btnMobile {position: absolute;z-index: 10001;display: none;bottom: 50px;left: 10px;}
.mapItineraire__panel {position: absolute;z-index: 10002;width: 23em;top: 0;bottom: 0;right: 0;background-color: #bedc7a;padding-top: 3em;border-bottom: 5px solid #86a63d;border-left: 3px solid #86a63d;transform: translateX(101%);transition: transform 0.5s;}
.pac-container {z-index: 10005;} /* GM Autocomplete results */
.mapItineraire__panelIntro {text-align: center;padding: 0 2em;position: absolute;top: 3em;bottom: 0;left: 0;right: 0;overflow: auto;}
.mapItineraire__panelDestinations {text-align: left; color: #000;}

    /* ACTIVATE module itineraire */
    .mapItineraire.active {display: block;}

    /* PANEL HEAD : Trigger link in the head of itineraire */
    .mapItineraire .mapItineraire__head a {display: block;flex: 1 1 auto;color: #fff;text-transform: uppercase;text-decoration: none;padding: 0.7em 1.7em;font-weight: bold;position: relative;transition:opacity 0.3s;}
    .mapItineraire .mapItineraire__head a:hover {color:#fff; opacity:0.5;}
    .mapItineraire .mapItineraire__head a::after {position: absolute;display: block;content: " ";width: 0;height: 0;top: 1em;right: 1em;border: 0.4em solid transparent;border-left-color: #fff;transform-origin: 25% 50%;transition: transform 0.5s;}

    /* PANEL INTRO : Styles particulier du panel d'introduction. */
    .mapItineraire__title {text-align: center;color: #000;font-weight: bold;margin-top: 4em;margin-bottom: 1em;}
    .mapItineraire__titleNote {color: red;text-transform: uppercase;display: block;font-size: 0.8em;}
    .mapItineraire__btnCommencer {margin-top: 2em;}
    .mapItineraire__panelIntro p {font-size: 0.9em;line-height: 1.4;color: #000;margin-bottom: 1em;}

    /* PANEL ITINERAIRE : Styles particulier du panel d'itineraire. */
    .mapItineraire__panelDestinations {display: flex;flex-direction: column;height: 100%;}
    .mapItineraire__panelDestinationsC1 {flex: 1 1 auto;overflow: auto;padding: 0 1em 0 1.5em;}
    .mapItineraire__panelDestinations p {font-size: 0.9em;line-height: 1.4;}
    .mapItineraire__panelDestinationsC2 {flex: 0 0 auto;background-color: #a8c662;padding: 0.5em; display: flex;}
    .mapItineraire .mapItineraire__panelDestinationsC2 .btn {display: block;flex: 1 1 auto;margin: 0.1em;}
    .mapItineraire .mapItineraire__panelDestinationsC2 .btn-map-itineraire-icon {flex: 0 0 auto; width: auto;}
    

    /* OPENED panels zone */

        /* Open on mobile. */
        @media (max-width:991px) {
            .mapItineraire.openedMobile { }
            .mapItineraire.openedMobile .mapItineraire__panel {transform: translateX(0%); }
            .mapItineraire.openedMobile .mapItineraire__head a::after {transform: rotate(90deg); }
        }

        /* Open on desktop. */
        @media (min-width:992px) {
            .mapItineraire.openedDesktop { }
            .mapItineraire.openedDesktop .mapItineraire__panel {transform: translateX(0%); }
            .mapItineraire.openedDesktop .mapItineraire__head a::after {transform: rotate(90deg); }
        }


    /* PANEL on */
    .mapItineraire__panelIntro {opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s; }
    .mapItineraire__panelIntro.on {opacity: 1; visibility: visible; pointer-events:auto; }
    .mapItineraire__panelDestinations {opacity: 0;visibility: hidden;pointer-events: none;transition: opacity 0.5s;}
    .mapItineraire__panelDestinations.on {opacity: 1; visibility: visible; pointer-events:auto; }

    /* MOBILE */
    @media (max-width:767px) {
        .mapItineraire__head {width: 100%;transform: translateX(101%);transition: transform 0.5s;}
        .mapItineraire__btnMobile {display: block;}
        .mapItineraire__panel {width: 100%;}
        .mapItineraire__title {margin-top: 1em;}

        /* Panel head : changer la fleche pour un "x". */
        .mapItineraire .mapItineraire__head a::after,
        .mapItineraire .mapItineraire__head a::before,
        .mapItineraire.openedMobile .mapItineraire__head a::after {position: absolute;display: block;content: " ";transform: rotate(45deg);border: none;transform-origin: 50% 50%;background: #fff;width: 1em;height: 0.1em;top: 50%;right: 1em;}
        .mapItineraire .mapItineraire__head a::before {transform: rotate(-45deg);}

        /* Opened panel, montrer le head du panel. */
        .mapItineraire.openedMobile .mapItineraire__head {transform: translateX(0%); }
    }


/* Buttons */
.mapItineraire a.btn-map-itineraire {color: #fff;background-color: #ff6c32;text-decoration: none;border: 1px solid #ff6c32;width:100%;text-transform: uppercase;font-weight: bold;font-size: 0.9em;padding: 0.7em;}
.mapItineraire a.btn-map-itineraire:hover {background-color: #fff; color: #ff6c32; }

.btn-detecter-localisation,
.btn-detecter-localisation:active,
.btn-detecter-localisation:focus {background: #86a63d url(/assets/front/images/assets/icon-location.png) no-repeat 97% center;background-size: 1.5em;color: #fff;text-transform: uppercase;font-weight: bold;font-size: 0.8em;padding: 0.5em 2.5em 0.5em 1em;margin-bottom: 0.5em;}
.btn-detecter-localisation:hover {color: #fff;background-color: hsla(78, 46%, 35%, 1);}

.btn-partager-email,
.btn-partager-email:active,
.btn-partager-email:focus {background: #6a8230 url(/assets/front/images/assets/icon-courriel.png) no-repeat 50% 50%;background-size: 1.7em;color: #fff;text-transform: uppercase;font-weight: bold;font-size: 0.8em;padding: 0.5em 1.7em;margin-bottom: 0.5em;}
.btn-partager-email:hover {color: #fff;background-color: #4b5d22;}

.mapItineraire a.btn.btn-itineraire {font-size: 0.95em;color: #fff;text-transform: uppercase;text-decoration: none;padding: 0.4em 2.3em;font-weight: bold;background-color: #86a63d;}

.btn-ajouter-a-itineraire {color: #fff;background-color: #ff6c32;text-decoration: none;border: 1px solid #ff6c32;width:auto; max-width:100%;text-transform: uppercase;font-weight: bold;font-size: 0.8em;padding: 0.7em;}
.btn-ajouter-a-itineraire:hover {background-color: #fff; color: #ff6c32; }

.mapItinerairePopup .btn-map-itineraire-popup, .mapItinerairePopup a.btn-map-itineraire-popup {color: #fff;background-color: #ff6c32;text-decoration: none;border: 1px solid #ff6c32;/* width:100%; */text-transform: uppercase;font-weight: bold;font-size: 0.9em;padding: 0.7em 1.5em;}
.mapItinerairePopup .btn-map-itineraire-popup:hover, .mapItinerairePopup a.btn-map-itineraire-popup:hover {background-color: #fff; color: #ff6c32; }



/* Folding section */
.sFolding {margin: 1em 0;}
.sFolding__head {position:relative;}
.sFolding .sFolding__head a {color: #000;font-weight: bold;text-transform: uppercase;text-decoration: none;display: block;transition:opacity 0.3s;}
.sFolding .sFolding__head a::before {position: absolute;display: block;content: " ";width: 0;height: 0;top: 0.25em;left: -0.9em;border: 0.4em solid transparent;border-left-color: #000;transform-origin: 25% 50%;transition: transform 0.5s;}
.sFolding__ctn {opacity: 0;visibility: hidden;height: 0;overflow: hidden;transition: opacity 0.3s;/* margin-bottom: 1em; */}
.sFolding__ctnTxt > *:last-child {margin-bottom: 0;}

    /* Hover */
    .sFolding .sFolding__head a:hover {color: #000; opacity:0.5;}

    /* Folding ON */
    .sFolding.on { }
    .sFolding.on .sFolding__head { }
    .sFolding.on .sFolding__head a::before {transform: rotate(90deg); }
    .sFolding.on .sFolding__ctn {opacity: 1; visibility: visible; height: auto; }


/* Form input dans le panel. */
.formInputMap {width: 100%;border: none;font-size: 0.9em;padding: 0.3em 0.6em;margin: 0.4em 0;}
.formInput {width: 100%;border: none;font-size: 1em;padding: 0.3em 0.6em;margin: 0.4em 0;border: 1px solid #517105;}


/* Liste de destinations. */
.listDestinations {list-style: none;margin: 0.7em 0;padding: 0; font-size: 0.9em; position: relative;}
.listDestinations li {margin: 0 0 -1px 0;padding: 0;border-top:1px solid #fff;border-bottom:1px solid #fff;position: relative;padding: 0.7em 2em 0.7em 2.2em;line-height: 1;min-height: 2.5em;}
.listDestinations li::before {display: none; }

.listDestinations__dragHandle {display: block;padding: 0.7em 0.5em;position: absolute;left: -0.4em;top: 0;width: 1.3em;box-sizing: content-box; cursor: move;}
.listDestinations .listDestinations__remove, 
.listDestinations a.listDestinations__remove {display: block;text-decoration: none;color: #000;font-weight: bold;padding: 0.7em 0.6em;position: absolute;right: -0.4em;top: 0; transition:opacity 0.3s;}

    /* Hover remove link */
    .listDestinations a.listDestinations__remove:hover {color:#000; opacity:0.5; }


/* Popup de directions + form pour partager par email. */
.mapItinerairePopup {position: relative;background: #fff;padding: 4em 3em 1em 3em;width: 90%;max-width: 80em;margin: 5vh auto;}
.mapItinerairePopup__mainTitle {font-size: 2em;line-height: 1;font-weight: bold;text-align: left;margin: 0 0 1em 0;font-family: 'Open Sans', sans-serif;color: #517105;font-style: normal;text-transform: uppercase;margin-left: -0.05em;}
.mapItinerairePopup__ctas {margin-bottom: 2em;margin-top:-2em;}
.mapItinerairePopup__partagerWrap {width: 100%;max-width: 35em;text-align: center; margin: 0 auto 2em auto;}
.mapItinerairePopup__partagerWrap .mapItinerairePopup__mainTitle {text-align: center;}
.mapItinerairePopup__partagerForm { }
.mapItinerairePopup__partagerForm > * + * {margin-top:1em;}
.mfp-bg {z-index: 10010; } /* jQuery Magnific popup */
.mfp-wrap {z-index: 10011;}

    /* Moins de marges sur mobile */
    @media (max-width:767px) {
        .mapItinerairePopup {width: 95%;padding: 7vw;font-size: 0.8em;}
        .mapItinerairePopup__ctas {margin-top:0; margin-bottom:1.5em;}
    }


/*  CHECKBOX & RADIO
	Custom style, c'est pour ca qu'il y a tant de class. */
	.formCheckboxW, .formRadioW {display: inline-block;margin-right: 2em;}
	.formCheckboxW:last-child, .formRadioW:last-child {margin-right:0; }

		/* Hide the default radio / checkbox, because we want to custom style it. */
		.formCheckboxI, .formRadioI {position: absolute; opacity: 0;}

		/* Label styles */
		.formCheckboxL, .formRadioL {cursor: pointer;font-weight: normal;}

		/* Les styles custom sont ici */
		.formCheckboxI + .formCheckboxL::before,
		.formRadioI + .formRadioL::before {content: '';background: #fff;background-position: 50% 50%;background-repeat: no-repeat;border: 1px solid #517105;border-radius: 0;display: inline-block;width: 1.3em;height: 1.3em;position: relative;top: 0;margin-right: 0.7em;vertical-align: top;cursor: pointer;text-align: center;transition: all 0.2s cubic-bezier(0, 0, 0.3, 1);}

			/* Active + focus */
			.formCheckboxI:active + .formCheckboxL::before,
			.formRadioI:active + .formRadioL::before { }

			/* Checked */
			.formCheckboxI:checked + .formCheckboxL::before,
			.formRadioI:checked + .formRadioL::before {background-color: #ff6c32; box-shadow: inset 0 0 0 0.2em #ffffff;}

			/* Focus: seulement si user utilise keyboard. */
			.formCheckboxI:focus + .formCheckboxL::before,
			.formRadioI:focus + .formRadioL::before {outline:1px solid #4d90fe;}

			/* Disabled */
			.formCheckboxI:disabled + .formCheckboxL,
			.formRadioI:disabled + .formRadioL {cursor: default;}
			.formCheckboxI:disabled + .formCheckboxL::before,
			.formRadioI:disabled + .formRadioL::before {background-color: #e8e8e8;opacity: 0.5;cursor: auto;}

			/* Empty (?) */
			.formCheckboxI + .formCheckboxL:empty::before,
			.formRadioI + .formRadioL:empty::before {margin-right: 0;}

		/* Radio mods */
		.formRadioI + .formRadioL::before {border-radius: 50%; }

/* Google Maps directions table */
.adp-directions {width: 100%;}


/* Directions panel instructions. */
.dirStep {color: #59524c;font-family: 'Open Sans', sans-serif;margin-bottom: 4em;}
.dirStep__head {margin: 0 0 1.5em 0;padding: 0;font-family: 'Open Sans', sans-serif;}
.dirStep__step {font-size: 0.9em;line-height: 1;font-weight: bold;text-align: left;margin: 0;color: #999;font-style: normal;text-transform: uppercase;}
.dirStep__stepIn {border-top: 3px solid #999;padding: 0.7em 0 0.5em 0;display: inline-block;}
.dirStep__title {font-size: 2em;line-height: 1;font-weight: bold;text-align: left;margin: 0;font-family: 'Open Sans', sans-serif;color: #517105;font-style: normal;text-transform: uppercase;margin-left: -0.05em;}
.dirStep__accentuer {font-size: 0.9em;line-height: 1.2;font-weight: bold;margin: 0;color: #999;font-style: normal;text-transform: uppercase;}
.dirStep__endEntrepriseName {font-size: 1.5em;line-height: 1;font-weight: bold;text-align: left;margin: 0;font-family: 'Open Sans', sans-serif;color: #517105;font-style: normal;text-transform: uppercase;}

.tblDirections {width: 100%;}
.tblDirections tr {border-top: 1px solid #ccc;}
.tblDirections td {vertical-align: top;padding: 0.5em 0.5em;}
.tblDirections td:first-child {padding-left:0;}
.tblDirections td:last-child {padding-right:0;}
.tblDirections .tblDirections__step { }
.tblDirections .tblDirections__text { }
.tblDirections .tblDirections__distance {white-space: nowrap;}


/* Helpers */
.msgWarning {color: #7f1100;}
.msgConfirm {color:#517105;}
.softHide {display: none;}



/* Google reCAPTCHA */
.grecaptcha-badge {display: none;}
.mapItinerairePopup__captcha {font-size: 0.8em;max-width: 32em;opacity: 0.6;margin: 0 auto;margin-top: 3em;}



/* Icon pour fromageries */
.icon-fromageries {background:url(/assets/front/images/assets/icon-fromageries.png) no-repeat center center;background-size:cover}


/* Logo de la region dans la page de details d'une entreprise. */
.regionLogo {border-top: 1px solid #86a63d;padding: 30px 0;}
.regionLogo__imgLink {width: 100%;max-width: 11em; display: block; transition: opacity 0.3s;}
a.regionLogo__imgLink:hover {opacity: 0.7;}


/* EMBED MAP COLORS */
.bodyEmbed--sherbrooke { }

    /* BTN + et - */
    .bodyEmbed--sherbrooke .gm-zoom {background-color: #324b26; }
    .bodyEmbed--sherbrooke .gm-zoom:hover {background-color: #1b2915; }

    /* BTN Votre itineraire */
    .bodyEmbed--sherbrooke .mapItineraire a.btn.btn-itineraire {background-color: #324b26; }
    .bodyEmbed--sherbrooke .mapItineraire a.btn.btn-itineraire:hover {background-color: #1b2915; }

    /* BTN Zoom a ma localisation */
    .bodyEmbed--sherbrooke .btn-orange, 
    .bodyEmbed--sherbrooke a.btn.btn-orange, 
    .bodyEmbed--sherbrooke .btn-orange:visited, 
    .bodyEmbed--sherbrooke a.btn.btn-orange:visited {background-color: #d3c87e; border-color: #d3c87e !important;}

    .bodyEmbed--sherbrooke .btn-orange:hover, 
    .bodyEmbed--sherbrooke a.btn.btn-orange:hover, 
    .bodyEmbed--sherbrooke .btn-orange:visited:hover, 
    .bodyEmbed--sherbrooke a.btn.btn-orange:visited:hover {background-color: #c6b758; border-color: #c6b758 !important; color: #fff !important;}

    /* BTN Ajouter a mon itineraire */
    .bodyEmbed--sherbrooke .btn-ajouter-a-itineraire {background-color: #324b26; border-color: #324b26;}
    .bodyEmbed--sherbrooke .btn-ajouter-a-itineraire:hover {background-color: #1b2915; border-color: #1b2915; color: #fff;}

    /* BTN Voir le trace */
    .bodyEmbed--sherbrooke .mapItineraire a.btn-map-itineraire {background-color: #324b26; border-color: #324b26;}
    .bodyEmbed--sherbrooke .mapItineraire a.btn-map-itineraire:hover {background-color: #1b2915; border-color: #1b2915; color: #fff;}

    /* Panel Votre itineraire */
    .bodyEmbed--sherbrooke .mapItineraire__head {background-color: #324b26;}

    /* BTN Imprimer */
    .bodyEmbed--sherbrooke .mapItinerairePopup .btn-map-itineraire-popup, 
    .bodyEmbed--sherbrooke .mapItinerairePopup a.btn-map-itineraire-popup {background-color: #324b26; border-color: #324b26;}

    .bodyEmbed--sherbrooke .mapItinerairePopup .btn-map-itineraire-popup:hover, 
    .bodyEmbed--sherbrooke .mapItinerairePopup a.btn-map-itineraire-popup:hover {background-color: #1b2915; border-color: #1b2915; color: #fff;}