/*********** Mise en page générale ***********/
html, body {
    height: 100%;
}

html.demo {
    width: 640px !important;
    height: 800px !important;
    border: 1px solid red;
    box-sizing: content-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

/*********** Bandeau de navigation + Logo LACMÉ ***********/
nav .brand-logo {
    height: 60%
}
nav .brand-logo > img {
    height: 100%;
    vertical-align: middle;
}
nav.small {
    height: 48px;
    line-height: 48px;
}
nav.small .nav-wrapper {
    float: left;
    width: 20%;
    min-height: 48px;
    height: 100%;
    position: static;
}
nav.small .nav-wrapper > div {
    height: 100%;
}
nav.small .nav-content {
    float: right;
    width: 80%;
    position: static;
    line-height: 48px;
    font-size: 10px;
}
nav.small .brand-logo {
    width: 48px;
    position: relative;
    height: 20px;
    margin: 0 auto;
}
nav.small .brand-logo > img {
    vertical-align: unset;
}
nav #logo-small-container,
nav.small #logo-container {
    display: none;
}

nav.small #logo-small-container,
nav #logo-container {
    display: inline-block;
}

/*********** Slider d'images sur la page d'accueil ***********/
.slider-presentation { height: 300px; }

/*********** Carousels horizontal/vertical ***********/
.swiper-h, .swiper-v {
    height: 100% !important;
    width: 100% !important;
    overflow: hidden;
}
/* Positionnement et dimension des boutons de navigation pour le carousel vertical */
.swiper-v .swiper-button-prev,
.swiper-v .swiper-button-next {
    left: 50%;
    margin-top: 0;
    margin-left: -11px;
    transform: rotate(90deg) scale(0.7);
}
.swiper-v .swiper-button-prev {
    top: 0;
    bottom: auto;
}
.swiper-v .swiper-button-next {
    bottom: 0;
    top: auto;
}
/* On enlève le cadre sur le focus (comportement par défaut du navigateur) */
.swiper-v .swiper-button-prev:focus,
.swiper-v .swiper-button-next:focus {
    outline: none;
}
/* Pagination du carousel vertical, qu'on grossit un peu */
.swiper-v .swiper-pagination-bullet {
	width: 18px;
	height: 18px;
}

/*********** Contenu des carousels ***********/
.slider-container:not(.a-propos):not(.tutos) {
    position: absolute;
    top: 50%;
    width: 80%;
    /*height: calc(100% - 80px);*/
    overflow: hidden;
    /*margin: 40px 10%;*/
    margin: 0 10%;
    -ms-transform: translateY(calc(-50% - 50px));
    transform: translateY(calc(-50% - 50px));
}
.slider-container.a-propos {
    width: 80%;
    padding: 20px 10% 5px;
    height: calc(100% - 70px);
    overflow-y: auto;
}
.slider-container.tutos {
    width: 90%;
    padding: 20px 5% 5px;
    height: calc(100% - 25px);
    overflow-y: auto;
}
/* Slider horizontal */
/* Présentation - Wrapper pour gérer le scroll */
.presentation-wrapper {
    height: 100%;
    overflow-y: auto;
}
/* Titre de la page présentation */
#slide-presentation h2 {
    font-size: 32px;
    line-height: 42px;
    font-weight: 500;
}
/* Configuration - Pas d'overflow vertical pour faciliter le défilement du slider vertical */
#slide-configurateur {
    overflow-y: hidden;
}

/*********** Page tutoriaux ***********/
/*.tuto {
    height: .08%;
    overflow:hidden;
}
.tuto.ouvert {
    height: auto;
    overflow: visible;
}*/
.tuto {
    font-size: 0;
    margin-bottom: 5px;
}
.tuto-titre {
    width: 100%;
}
.tuto-contenu {
    display:none;
}

/*********** Citation ***********/
blockquote {
    border-left-color: #0057A6;
}

/*********** Mise en page du lien d'affichage des résultats ***********/
a#btnResultats {
    position: absolute;
    z-index: 10;
    bottom: -3px;
    left: 25%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    
    padding: 1.5% 4%;
    font-size: 1.5em;
    text-transform: capitalize;
    border: 1px solid #1d68aa;
    background-color: white !important;
    color: #1d68aa;
    text-align: center;
}
a#btnResultats .loading-wrapper {
    height: 100%;
    background-color: #fff;
    display: none;
}
#btnResultats.disabled {
    border-color: #9F9F9F;
}
#btnResultats.pulse::before {
    animation-duration: 0.25s !important;
    animation-iteration-count: 6 !important;
}

/*********** Mise en page de la fenêtre modale (Materialize) des résultats ***********/
.row.no-margin {
    margin: 0;
}
#modalResultats {
    max-height: 100%;
    height: 100%;
    overflow-y: auto !important;
}
#btnFermerResultats {
    position: sticky;
    top: 40px;
    z-index: 10;
    cursor: pointer;
}
#modalResultats .alignement-vertical {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#modalResultats blockquote {
    font-size: 0.9em;
}
#modalResultats .img-essentiel {
    height: 100%;
    width: 100%;
    object-fit: contain;
    max-height: 64px;
    max-width: 80px;
}
#modalResultats .img-thumbnail {
    height: 100%;
    width: 100%;
    object-fit: contain;
    max-height: 80px;
    max-width: 100px;
}
#modalResultats #mail {
    display: none;
}
#modalResultats .spinner-envoi-mail {
    display: none;
}
#modalResultats .mail-envoye {
    display: none;
    font-weight: bolder;
}
#modalResultats #essentiel-pile,
#modalResultats #essentiel-batterie {
    display: flex;
}
#modalResultats #mail .input-field {
    margin: 0;
}
#modalResultats #poste {
    padding-top: 0;
}
#modalResultats #poste h5 {
    margin-top: 0;
}
#modalResultats #poste .intitule {
    margin-top: 20px;
    font-size: 0.9em;
    white-space: nowrap;
}
#modalResultats .nom-poste-elec {
    margin-top: 5px;
    margin-left: 25px;
    font-weight: bolder;
}
#essentiel .row {
    margin-bottom: 0;
}
#essentiel .row, #accessoires .row {
    position: relative;
}
.interet-selection {
    font-size: 0.85em;
}

#electrificateur .row {
    position: relative;
}

.selection-accessoires {
    width: 49%;
    padding: 0 1%;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #fafafa;
}
#recommendations-quantites .input-field {
    margin: 0 0 0 10px;
    width: 60px;
}
#recommendations-quantites .row {
    margin-bottom: 0;
}
.texte-recommendations-quantites {
    margin-bottom: 10px;
}
#selection1.avec-bordure-laterale,
#selection3.avec-bordure-laterale {
    border-right-color: #e0e0e0;
}
#selection2.avec-bordure-laterale,
#selection4.avec-bordure-laterale {
    border-left-color: #e0e0e0;
}
#selection3, #selection4 {
    border-top-color: #e0e0e0;
}
.bandeau-selection:after {
    content: "";
    display: table;
    clear: both;
}
.selection-accessoires .row:last-child .divider,
.selection-accessoires .btn-fermer-selection,
.btn-fermer-electrificateur {
    display:none;
}
.selection-accessoires.selectionne .btn-fermer-selection, 
.selection-electrificateur.selectionne .btn-fermer-electrificateur {
    display: block;
    cursor: pointer;
}
.selection-accessoires .titre-categorie {
    text-align: right;
    font-size: 0.9em;
    font-weight: bold;
    background-image: linear-gradient(225deg, #0057a6, #0057a6 120px, transparent 10px, transparent);
    color: white;
}
/* Pour affichage du contour au survol des div d'électrificateurs */
.electrificateur-selectionnable {
    border: 1px solid #fafafa;
}
.selection-selectionnable:hover,
.electrificateur-selectionnable:hover {
    border-color: #0057a6 !important;
    cursor: pointer;
}
.electrificateur-selectionnable:hover .divider {
    background-color: transparent;
}
.selection-accessoires.selectionne {
    margin: 0 50%;
    transform: translateX(-50%);
    border: none !important;
}
.selection-electrificateur.selectionne {
    transform: translateY(50%);
    border: none !important;
}
.quantite-selection input[type=number]::-webkit-inner-spin-button,
.quantite-selection input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.quantite-selection input[type=number] {
    -moz-appearance: textfield;
}
.quantite-selection input {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    color: inherit;
    pointer-events: none;
}
.quantite-selection input:focus {
    outline: 0;
}
.quantite-selection .quantite-bouton {
    cursor: pointer;
    text-align: center;
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    
    /*transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    color: #333;
    font-size: 13px;
    font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    line-height: 1.7;
    border-left: 1px solid #eee;
    width: 20px;
    position: relative;*/
}
.selection-accessoires:not(.selectionne) .quantite-bouton {
    display: none;
}

/*********** Redéfinition de la couleur de fond de tous les boutons ***********/
.btn, .btn-large, .btn-small, .btn-floating {
    background-color: #0057A6 !important;
    color: white;
}
.btn:hover, .btn-large:hover, .btn-small:hover {
    background-color: #1D68AA !important;
    color: white;
}

/*********** Redéfinition de la couleur des inputs ***********/
input:not([type]):focus:not([readonly]), 
input[type=text]:not(.browser-default):focus:not([readonly]), 
input[type=password]:not(.browser-default):focus:not([readonly]), 
input[type=email]:not(.browser-default):focus:not([readonly]), 
input[type=url]:not(.browser-default):focus:not([readonly]), 
input[type=time]:not(.browser-default):focus:not([readonly]), 
input[type=date]:not(.browser-default):focus:not([readonly]), 
input[type=datetime]:not(.browser-default):focus:not([readonly]), 
input[type=datetime-local]:not(.browser-default):focus:not([readonly]), 
input[type=tel]:not(.browser-default):focus:not([readonly]), 
input[type=number]:not(.browser-default):focus:not([readonly]), 
input[type=search]:not(.browser-default):focus:not([readonly]), 
textarea.materialize-textarea:focus:not([readonly]) {
    border-color: #0057A6 !important;
    box-shadow: 0 1px 0 0 #0057A6 !important;
}
input:not([type]):focus:not([readonly]) + label, 
input[type=text]:not(.browser-default):focus:not([readonly]) + label, 
input[type=password]:not(.browser-default):focus:not([readonly]) + label, 
input[type=email]:not(.browser-default):focus:not([readonly]) + label, 
input[type=url]:not(.browser-default):focus:not([readonly]) + label, 
input[type=time]:not(.browser-default):focus:not([readonly]) + label, 
input[type=date]:not(.browser-default):focus:not([readonly]) + label, 
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label, 
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label, 
input[type=tel]:not(.browser-default):focus:not([readonly]) + label, 
input[type=number]:not(.browser-default):focus:not([readonly]) + label, 
input[type=search]:not(.browser-default):focus:not([readonly]) + label, 
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: #0057A6 !important;
}

/*********** Boutons de sélection de choix ***********/
.btn-animaux .btn-large, 
.btn-alim .btn-large, 
.btn-type-alim .btn-large, 
.btn-mobilite .btn-large, 
.btn-piquet .btn-large, 
.btn-vegetation .btn-large, 
.btn-perimetre .btn-large {
    width: 100%;
    line-height: 19.5px;
    font-size: 18px;
    height: auto;
    padding: 15px 0 10px;
}
.btn-animaux .btn-large {
    padding: 10px 0 !important;
}
.btn-animaux img {
    width: 100%;
    height: 55px;
    object-fit: contain;
    vertical-align: middle;
}
/* Réduit l'espace entre les boutons */
.btn-animaux > .section, 
.btn-alim > .section, 
.btn-type-alim > .section, 
.btn-mobilite > .section, 
.btn-piquet > .section, 
.btn-vegetation > .section, 
.btn-perimetre > .section {
    padding-bottom: 0;
}
/* Le "vrai" input (type radio) est caché */
.btn-animaux input, 
.btn-alim input, 
.btn-type-alim input, 
.btn-mobilite input, 
.btn-piquet input, 
.btn-vegetation input, 
.btn-perimetre input {
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
/* L'interaction avec l'input radio se fait via le label */
.btn-animaux > label, 
.btn-alim > label, 
.btn-type-alim > label, 
.btn-mobilite > label, 
.btn-piquet > label, 
.btn-vegetation > label, 
.btn-perimetre > label {
    color: white !important;
    cursor:pointer;
    display:inline-block;
    width:100%;
}
/* Mise en évidence lors du passage de la souris */
.btn-animaux > label:hover, 
.btn-alim > label:hover, 
.btn-type-alim > label:hover, 
.btn-mobilite > label:hover, 
.btn-piquet > label:hover, 
.btn-vegetation > label:hover,
.btn-perimetre > label:hover {
    -webkit-filter: brightness(1.2);
       -moz-filter: brightness(1.2);
            filter: brightness(1.2);
}
/* Un élément span existe dans chaque bouton pour affiche du texte supplémentaire,
affiché avec une police plus petite */
.btn-animaux label .btn-large span, 
.btn-alim label .btn-large span, 
.btn-type-alim label .btn-large span, 
.btn-mobilite label .btn-large span, 
.btn-piquet label .btn-large span, 
.btn-vegetation label .btn-large span, 
.btn-perimetre label .btn-large span {
    display: block;
    line-height: 1.1em;
    font-size: 13px;
    margin-top: 2px;
}
/* Style des boutons non sélectionnés */
.btn-animaux input:not(:checked):not(:indeterminate) + label .btn-large,
.btn-alim input:not(:checked):not(:indeterminate) + label .btn-large,
.btn-type-alim input:not(:checked):not(:indeterminate) + label .btn-large,
.btn-mobilite input:not(:checked):not(:indeterminate) + label .btn-large,
.btn-piquet input:not(:checked):not(:indeterminate) + label .btn-large,
.btn-vegetation input:not(:checked):not(:indeterminate) + label .btn-large,
.btn-perimetre input:not(:checked):not(:indeterminate) + label .btn-large {
    background-color: white !important;
    color: rgba(0, 0, 0, 0.87) !important;
    box-shadow: none !important;
}
/* Option cachée lorsqu'on arrive sur la catégorie */
#choix-type-alim {
    display: none;
}

/*********** Exception pour les .row du critère Terrain, pour gagner de la place ************/
#config-terrain .row {
    margin-bottom: 0;
}
/*********** Panneau de choix Terrain (objet Materialize Collapsible) ************/
#config-terrain .collapsible-body {
    padding: 1rem;
}


/*********** Menu principal (objet Materialize Navbar) ************/
.tabs .tab a.active {
    color: #3D7AAF !important;
    opacity: 1 !important;
}
.tabs .tab a {
    color: #3D7AAF !important;
    opacity: 0.7 !important;
    font-size: inherit !important;
}
.tabs .indicator {
    background-color: #0057A6 !important;
}
.tabs .tab a:focus, .tabs .tab a:focus.active {
    background-color: rgba(0, 87, 166, 0.2) !important;
}

/* Bulles de rappel des critères sélectionnés (objet Materialize Chips) */
.chip:focus {
    background-color: #1D68AA;
}

/*********** Page "A Propos" ************/
.footer-copyright {
    padding: 5px 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
}
.a-propos li .material-icons {
    margin: 0 5px 0 10px;
    vertical-align: middle;
}

/*********** Fenêtre modale d'aide contextuelle ************/
#modalHelp {
    max-height: 85%;
}
#modalHelp .section {
    display: none;
}
#help-animaux .materialboxed {
    margin: 0 auto;
}
#help-terrain .collection-item span {
    font-size: 0.8em;
}

/* Bulles de rappel de critères choisis
	S'affiche sur une ligne avec scroll auto sur petit écran 
	S'affiche en bloc qui grandit de gauche à droite et de bas en haut sur grand écran */
#main-chips {
    position: absolute;
    bottom: 65px;
    left: 10px;
    z-index: 10;
    margin: 0;
    padding: 0 5px;
    border-bottom: none;
    width: calc(100% - 30px);
}
/* Bulles de rappel sur la fenêtre de résultats */
#resultats-chips {
    border-bottom: none;
    width: calc(100% - 30px);
    min-height: 0;
    margin: 0;
}
/* Le contrôle Chip de Materialize a normalement un input pour faire de l'autocomplétion, qu'on masque */
.chips .input {
    display: none;
}

/* Bouton d'ajout au panier */
.btn-cart {
    display: none;
}
/* règle css pour affichage correct du bouton de mise au panier */
#electrificateur {
    position: relative;
}
.cart-electrificateur {
    position: absolute;
    left: 5%;
    top: 20%;
}
.cart-selection {
    position: absolute;
    top: 3%;
    right: 10%;
}
/* Chip d'informations d'ajout au panier */
.chip-infos-display {
    display: none;
}