/* CSS Document */

/******
ancien smartphone.css
********/


@media screen and (max-width: 625px) {
    .nosmartphone {
        display: none
    }
    .zoneAlerteSmartphone {
        display: inline-block;
        padding: 5px 10px
    }
    .newRegionA .newInner1 .zonePhotoPrincipale {
        width: 100%
    }
    .newRegionA .newInner1 .zoneResumePrincipal {
        width: 100%;
        margin-top: 10px;
        padding-left: 0
    }
    .newRegionA .newInner1 .zonePhotoPrincipalePro {
        width: 100%
    }
    .newRegionA .newInner1 .zoneResumePrincipalPro {
        width: 100%;
        margin-top: 10px;
        padding-left: 0
    }
    .newRegionA .newInner1 .zoneCaracteristique {
        width: 100%;
        padding: 0
    }
    .newRegionA .newInner1 .zoneCaracteristique .caracteristique {
        width: 100%;
    }
    .newRegionA .newInner1 .zoneCaracteristique .label {
        width: 42%;
        text-align: left
    }
    .newRegionA .newInner1 .zoneCaracteristique .valeur {
        width: 58%;
        text-align: left;
        padding-left: 3px;
        line-height: 25px;
        margin-top: 0;
    }
    .newRegionA .newInner1 .photo_31 {
        width: 100%;
        margin: 0
    }
    .newRegionA .newInner1 .zoneContenuNiveau1 .texte_31 {
        width: 100%
    }
    .newRegionA .newInner1 .ligneboutons2 {
        width: 100%;
        padding-left: 0
    }
    .newRegionA .newInner1 .ligneboutons2Pro {
        width: 100%;
        padding-left: 0
    }
    /* bandeau haut */
    .bandeau_haut {
        display: none
    }
    .bandeau_logo {
        width: 100%;
        height: 50px;
        margin-top: 0;
    }
    .bandeau_logo .nom_site {
        width: 100%;
        max-width: 80%;
        padding-top: 5px;
        text-align: center;
    }
    .headerPub {
        display: none
    }
    .bandeauPays {
        display: none
    }
    #habillagepub {
        display: none
    }
    .bandeau_logo .login {
        display: none
    }
    .cadreImage4photo {
        float: left;
        width: calc(50% - 5px);
        width: -moz-calc(50% - 5px);
        width: -webkit-calc(50% - 5px);
        margin-right: 10px;
        margin-top: 10px;
    }
    .cadreImage4photo:nth-child(2n) {
        margin-right: 0;
    }
    .cadreImage:nth-child(2n+1) {
        margin-left: 2%
    }
    .cadreImage {
        float: left;
        width: 49%;
        margin-bottom: 10px;
        margin-right: 0;
        margin-top: 0
    }
    .cadreVideo:nth-child(2n) {
        margin-left: 2%
    }
    .cadreVideo {
        float: left;
        width: 49%;
        margin-bottom: 10px;
        margin-right: 0;
        margin-top: 0
    }
    /* menu */
    .menu {
        display: none
    }
    .menuResponsive {
        display: inline-block;
        width: 100%;
        text-align: center;
        background: #5685B5
    }
    .menuResponsive * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    .menuResponsive .toggler {
        padding: 13px;
        display: block;
        color: white;
        font-size: 1.35em;
        text-align: center;
        cursor: pointer;
        outline: none;
        width: 50px;
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        background: #333;
        z-index: 10000;
    }
    .menuResponsive ul {
        display: none;
        width: 100%;
        margin: 0;
        padding-left: 0;
        top: 50px;
        position: absolute;
        left: 0;
        z-index: 100
    }
    .menuResponsive ul li {
        background-color: #333;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding: 3px 10px;
        text-align: center;
        width: 100%;
        display: inline-block;
        line-height: 35px;
        text-decoration: none;
        text-transform: uppercase;
        list-style: none;
    }
    .menuResponsive ul li a {
        color: #fff;
    }
    .menuliselectionne {
        font-weight: normal;
        font-size: 13px;
        color: #3e3c38;
    }
    /* contenu */
    .contenu {
        width: 100%
    }
    /* colonne gauche */
    .colonne_gauche {
        width: 100%;
        margin-left: 0;
        margin-top: 0
    }
    .contenu .colonne_gauche {
        width: 100%;
        margin-left: 0;
        margin-top: 0
    }
    .contenu_large .colonne_gauche {
        width: 100%;
        margin-left: 0;
        margin-top: 0
    }
    .contenu_large .inner_transparent2020 {
        padding: 0
    }
    /* pagination */
    .pagination .pageprec {
        display: none
    }
    .pagination .pagesuiv {
        display: none
    }
    /* listes */
    .liste .photo {
        width: 100%
    }
    .liste .titre {
        width: 100%;
        padding-left: 0;
        margin-top: 10px
    }
    .liste .titre .pourcent {
        padding: 1px 5px;
        font-size: 12px;
    }
    .liste .caracteristique {
        width: 100%;
        padding-left: 0
    }
    .liste .caracteristique .label {
        width: 40%;
    }
    .liste .caracteristique .valeur {
        width: 60%;
    }
    .liste .texte {
        width: 100%;
        padding-left: 0
    }
    .liste .ligneboutons {
        width: 100%;
        padding-left: 0
    }
    /* pagination */
    .pagination .pageprec {
        display: none
    }
    .pagination .pagesuiv {
        display: none
    }
    /* formulaire */
    .longDemi {
        width: 100%
    }
    .formulaire .saisie_1 input[type=text] {
        width: 100%
    }
    .formulaire .saisie_1 input[type=password] {
        width: 100%
    }
    .formulaire .saisie_1 input[type=email] {
        width: 100%
    }
    .formulaire .saisie_1 select {
        width: 100%
    }
    .formulaire .saisie_1 .alertForumlaireT1 {
        max-width: none;
        margin-top: 5px;
        margin-left: 0
    }
    .formulaire .saisie_3 input[type=text] {
        width: 100%
    }
    .formulaire .saisie_3 input[type=password] {
        width: 100%
    }
    .formulaire .saisie_3 input[type=email] {
        width: 100%
    }
    /* accueil */
    .bandeauMilieuSup_leclub {
        margin-top: 10px;
        padding: 30px 10px;
    }
    .bandeauMilieuSupDroite {
        width: 100%;
    }
    .BandeauMilieuInfDroite {
        width: 100%;
    }
    .bandeauInfDroite {
        width: 100%;
    }
    #pAccueil {
        margin-top: 0
    }
    /* colonne droite */
    .colonne_droite {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        background-color: white
    }
    #blocD0 iframe {
        width: 100%;
        height: 100%
    }
    /*#blocD1{display:none}*/
    #blocD3 {
        display: none
    }
    #blocD4 {
        display: none
    }
    #blocD2a {
        display: none
    }
    #forumBlocDernieresDiscussions {
        display: none
    }
    #blocTrouverUnGuide {
        display: none
    }
    #blocD12 {
        display: none;
        position: fixed;
        left: 0;
        bottom: 0;
        background-color: white;
        margin-bottom: 0
    }
    #blocD5 {
        display: none;
    }
    .blocAvecMargeType1 {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        margin-right: 0;
        padding-right: 0;
    }
    .blocAvecMargeType1 .titrePrincipalBlocAvecMarge {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%
    }
    .blocAvecMargeType1 .zoneContenuBlocAvecMarge {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%
    }
    .video {
        float: left;
        width: 100%;
        margin-bottom: 5px;
    }
    .photo {
        float: left;
        width: 100%;
        margin-bottom: 5px;
    }
    /* page Cr�er un compte */
    #pInscription .inscription_libelle .label {
        width: 100%;
        margin-right: 0;
        text-align: left;
    }
    #pInscription .alertForumlaireT1 {
        margin-left: 0;
        margin-top: 5px
    }
    /* vue Commune */
    #annonce3 {
        display: none;
    }
    .communeEntete .resume {
        display: none;
    }
    #tableauProchainesMarees {
        display: none
    }
    .pCommune002G {
        width: 100%;
        margin-bottom: 0;
    }
    .pCommune002G .sectionCadreInferieur {
        width: 94%;
        padding-left: 3%;
        padding-right: 3%
    }
    .pCommune002G .sectionArticle {
        margin-top: 0
    }
    .pCommune002G .sectionArticleImage {
        float: left;
        width: 40%;
        display: block;
    }
    .pCommune002G .sectionArticleTitre {
        float: left;
        width: 50%;
        margin-left: 3%;
        display: block;
    }
    .pCommune002D {
        float: left;
        width: 94%;
        padding-left: 3%
    }
    .pCommune002D .sectionCadreInferieur {
        width: 100%;
        padding: 0
    }
    .pCommune002D .sectionArticle {
        margin-top: 0
    }
    .pCommune002D .sectionArticleImage {
        width: 100%;
        margin: 0
    }
    .pCommune002D .sectionArticleTitre {
        width: 100%;
        margin: 5px 0 0 0
    }
    .pCommune002D .sectionArticleContenu {
        width: 100%;
        margin: 0
    }
    .pCommune002G .voirTous {
        margin: 0
    }
    .comListeEspece {
        width: 33.33333%
    }
    .comListeEspece .sectionSousTitre {
        display: none
    }
    .listeespececom .titre {
        float: left;
        font-size: 15px;
        color: #004A7F
    }
    /*.listeespececom .comListeEspece:last-child{width:100%}*/
    .listeespececom .comListeEspece:last-child .bouton_commune:last-child {
        line-height: initial;
    }
    .comListeEspeceDeux {
        width: 49%
    }
    .listeespececom .comListeEspeceDeux:last-child {
        width: 100%
    }
    .listeespececom .comListeEspeceDeux:last-child .bouton_commune:last-child {
        line-height: initial;
    }
    .comListeEspece {
        margin-right: 20px;
        width: calc(50% - 10px);
    }
    .comListeEspece:nth-child(2) {
        margin-right: 0;
    }
    .blocspot {
        text-align: center
    }
    .comForum {
        width: 100%
    }
    .commSousTitre2 {
        width: 100%
    }
    .graphImage {
        width: 100%;
    }
    .legendeGraphImage {
        width: 100%;
        padding-left: 0
    }
    .commListe {
        width: 49%;
        height: 265px
    }
    .commListe:nth-child(2n) {
        float: right
    }
    .commListe .sectionArticleImagePub {
        padding: calc(50% - 30px) 3px;
        padding: -webkit-calc(50% - 30px) 3px;
        padding: -moz-calc(50% - 30px) 3px
    }
    .publiciteSeReference {
        width: 100%;
        padding: 10px 0
    }
    .comListePhoto {
        width: 100%
    }
    .comListeAnnonce {
        width: 100%
    }
    .comLieuDit {
        width: 100%
    }
    .comLienUtile {
        width: 100%
    }
    .comSeReferencer {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }
    .carteImage {
        width: 100%;
    }
    .legendeCarteImage {
        width: 100%;
        padding-left: 0
    }
    #s_ind_peche .bouton_1 {
        margin-right: 0;
    }
    #s_ind_peche .bouton_2 {
        margin-bottom: 10px;
    }
    .ZoneDePeche #carte {
        width: 100%;
    }
    .ZoneDePeche .asidecarte {
        width: 100%;
        margin-left: 0;
        margin-top: 10px
    }
    .comm_prev {
        width: 100%;
    }
    .comm_prev:first-child {
        height: 206px
    }
    .bloc_spot_commune {
        width: 100%
    }
    .bloc_spot_left {
        width: 100%;
        padding-right: 0
    }
    .bloc_spot_left:nth-child(n) {
        width: 100%;
        padding-right: 0
    }
    .bloc_spot_left:nth-child(2n+1) {
        width: 100%;
        padding-right: 0
    }
    .bloc_spot_right {
        width: 100%;
        padding-left: 0
    }
    .bloc_on_a_essaye_left {
        width: 100%;
        padding-right: 0
    }
    .bloc_on_a_essaye_right {
        width: 100%;
        padding-left: 0;
        margin-left: 0;
        margin-top: 160px;
        padding-top: 10px
    }
    .com_enc_espece {
        width: 100%
    }
    .com_enc_prev {
        width: 100%;
        padding-left: 0;
        margin-top: 10px
    }
    /* vue Liste Complete Commune */
    /* sur le fil */
    .b_slf_gauche {
        position: absolute;
        top: 0;
        float: left;
        display: none;
        padding: 5px;
        border: 1px solid lightgrey;
        width: calc(100% - 20px);
        left: 10px;
        z-index: 6000
    }
    .b_slf_droite {
        float: left;
        width: 100%;
        max-width: none;
        padding: 0;
    }
    .b_slf_droite_2 {
        float: left;
        width: 100%;
        max-width: none;
        padding: 0;
        margin-top: 10px
    }
    .maphotoprofil {
        display: none
    }
    .menu_filtre_slf {
        display: block
    }
    /* articles */
    #blocH1 {
        display: none
    }
    #blocArbo {
        display: none
    }
    #annonce8 {
        display: none
    }
    .region_1 {
        width: 90%;
        padding-left: 5%;
        padding-right: 5%
    }
    .region_1 .photo_4 {
        width: 100%;
    }
    .region_1 .photo_4 img {
        width: 100%;
    }
    .region_1 .contenu_4 {
        width: 100%;
        margin-left: 0
    }
    .region_1 .titre_3 {
        width: 100%;
        padding-top: 0
    }
    .region_1 .contenu_3 {
        width: 100%;
    }
    #pArticle #email {
        width: 100%;
    }
    #pArticle #pseudo {
        width: 100%;
    }
    #pArticle #divTitreArticle {
        float: none;
        display: table-row-group
    }
    #pArticle #divResumeArticle {
        float: none;
        display: table-header-group;
    }
    #pArticle #divResumeArticle .resumeArticle {
        margin-bottom: 20px
    }
    #pArticle #caracteristiqueArticle {
        margin-top: 10px;
        margin-bottom: 10px;
        color: rgb(128, 128, 128);
        border-bottom: 1px solid rgb(211, 211, 211);
        border-top: 1px solid rgb(211, 211, 211);
        padding-top: 10px;
        padding-bottom: 10px
    }
    #pArticle .video {
        width: 100%;
    }
    #pArticle .video iframe {
        width: 100%;
    }
    #pArticle .titre_3 {
        padding-top: 10px;
    }
    #pArticle .contenu_3 p {
        text-align: left;
    }
    #pArticle .resumeArticle p {
        text-align: left;
    }
    /*#annonces */
    #listeAnnonces .nouvelleAnnonce {
        margin-top: 10px;
        margin-bottom: 10px
    }
    #listeAnnonces .sectionArticleResume {
        width: 100%
    }
    #listeAnnonces .sectionArticleImage {
        width: 100%
    }
    #publierUneAnnonce .annonce_libelle .label {
        width: 100%;
        margin-right: 0;
        text-align: left;
    }
    #publierUneAnnonce .alertForumlaireT1 {
        margin-left: 0;
        margin-top: 5px
    }
    #pAnnonce .contenuAnnonce {
        width: 100%
    }
    #pAnnonce .asideContenuAnnonce {
        width: 100%
    }
    /* page rechercher */
    #pRechercher .search {
        FLOAT: left;
        WIDTH: 100%;
        text-align: left;
        display: block
    }
    #pRechercher .search .zone_saisie {
        width: 100%;
    }
    #pRechercher .search .bouton_ok {
        FLOAT: left;
        WIDTH: 40%;
        margin-top: 5px;
        text-align: center;
    }
    /* Page Trouver un guide */
    #pRechercherUnGuide .label {
        float: left;
        width: 100%;
    }
    #pRechercherUnGuide .input_1 {
        float: left;
        width: 99%;
        height: 30px;
        padding-left: 1%;
        margin-bottom: 10px
    }
    #pRechercherUnGuide textarea {
        float: left;
        width: 64.3%;
        font-size: 13px;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 5px;
        margin-bottom: 10px
    }
    #pRechercherUnGuide .lien {
        font-weight: bold;
        font-variant: small-caps;
        font-size: 12pt;
        color: rgb(59, 77, 86);
    }
    #pRechercherUnGuide .divArticle {
        float: left;
        width: 100%;
        margin-top: 10px
    }
    #pRechercherUnGuide .divArticle .divCheckBox {
        float: left;
        width: 100%;
        margin-right: 1%
    }
    #pRechercherUnGuide .divArticle .divEncart {
        float: right;
        width: 100%
    }
    #pRechercherUnGuide .divArticle .divEncart img {
        float: left;
        width: 50%
    }
    #pRechercherUnGuide .divArticle .divEncart .contenu {
        float: right;
        width: 48%;
    }
    #pRechercherUnGuide textarea {
        float: left;
        width: 99%;
    }
    #pRechercherUnGuide .divSubmit {
        width: 100%;
    }
    #pRechercherUnGuide .divSubmit .boutonPosterCommentaire {
        width: 100%;
    }
    /* Page Club */
    .titreclub1 {
        font-size: 20px;
    }
    .soustitreclub1 {
        font-size: 18px;
    }
    .sliderclubparent {
        height: 480px;
    }
    .sliderclub {
        height: 460px;
    }
    .sliderclub .texte {
        height: 27%;
    }
    .prezclubinner {
        padding: 0
    }
    .prezclubinner .text1 {
        line-height: 30px;
    }
    .prezclubinner .separ {
        padding: 10px 10px 10px 10px
    }
    .prezclubinner .spotclub {
        height: auto
    }
    .prezclubinner .btnclubfin {
        padding: 10px;
        font-size: 16px
    }
    /*.abonnement_cl{height:500px;}*/
    .abonnement_cl .abonnement_cl_inner {
        padding: 10px;
    }
    .o_cg {
        width: 100%;
    }
    .o_cm {
        width: 100%;
    }
    .o_cd {
        width: 100%;
    }
    /*.tableau_pres_club .description{}*/
    /*************************************************/
    /********************* Blocs *********************/
    /*************************************************/
    /* articles li�s */
    .articlesLies .photo {
        width: 100%;
        display: table-footer-group;
    }
    .articlesLies .titre {
        width: 100%;
        display: table-header-group;
        margin-left: 0;
    }
    .articlesLies .titre a {
        font-size: 1.5em
    }
    .articlesLies .resume {
        width: 100%;
        display: table-footer-group;
    }
    .articlesLies .resume p {
        margin-top: 5px;
    }
    .articlesLies {
        display: table
    }
    /* blocPub */
    .blocAnnonce9 {
        display: none
    }
    /* Trouver un guide */
    #blocTrouverUnGuide input[type="text"] {
        float: left;
        width: 65%;
        margin-left: 4%;
        font-size: 11pt
    }
    #blocTrouverUnGuide input[type="submit"] {
        float: right;
        margin-right: 5%;
        width: 50px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* Divers */
    .iTexteType2 {
        padding: 0;
        width: 100%
    }
    .iTextarea2 {
        padding: 0;
        width: 100%
    }
    /* blocSansMarge */
    /* Footer */
    footer {
        width: 100%
    }
    .bandeauFooter .categorie {
        width: calc(50% - 10px);
        width: -moz-calc(50% - 10px);
        width: -webkit-calc(50% - 10px)
    }
    /* Footer popup */
    #footerpop .innerfooterpop {
        float: left;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        font-size: 15px;
        width: 100%;
        align-items: center;
        -webkit-align-items: center
    }
    #footerpop .innerfooterpop .colgauche {
        display: none
    }
    #footerpop .innerfooterpop .coldroite {
        display: none
    }
    #footerpop .innerfooterpop .colgauche_smart {
        float: left;
        display: block;
        width: 70%;
        line-height: 1.4;
        max-height: 36px;
        padding: 10px 2px
    }
    #footerpop .innerfooterpop .coldroite_smart {
        float: left;
        display: block;
        width: 30%;
        padding-right: 3px
    }
    #footerpop .innerfooterpop .close {
        top: -15px;
        height: 30px;
        width: 30px;
        border: 1px solid black
    }
    /* modifications page club */
    .col__7 {
        width: 100%;
        clear: both;
    }
    .col__3 {
        width: 100%;
        clear: both;
    }
    .pdl__10 {
        padding-left: 0;
    }
    .pdt__10 {
        padding-top: 10px;
    }
    .sliderclub .entetederoulant {
        font-size: 30px
    }
    .souphotoclub1 {
        line-height: 25px;
        font-size: 17px;
    }
    .sousphotoclub2 {
        line-height: 25px;
        font-size: 15px;
        margin-top: 10px
    }
    .questionoperateur {
        text-align: center;
        padding-left: 0
    }
    .club__border__bottom {
        border-bottom: 0
    }
    .bloc_square_prez {
        padding: 10px 0;
        width: 100%;
        border-bottom: 5px solid orange
    }
    .bloc_square_prez_last {
        border-bottom: 0
    }
    /* .bloc_square_prez:last-child{border-bottom:0} */
    /* .bloc_square_prez h2{font-weight:bold; margin-bottom:10px; font-size:18px} */
    /* .bloc_square_prez p{line-height:20px} */
    .bloc_square_prez_0 {
        border-right: 0;
    }
    .bloc_square_prez_1 {
        padding-left: 0;
    }
    .bloc_square_prez_2 {
        border-right: 0;
    }
    .bloc_square_prez_3 {
        padding-left: 0
    }
    .servicesplus {
        border-top: 5px solid orange;
        display: none
    }
    .cadre_prez_club {
        padding: 10px
    }
    .pub_cl_com {
        margin-top: 10px
    }
    .bloc1 .courbe_n1 {
        overflow-y: hidden
    }
    .bloc1 .courbe_n1 .courbe_n2 {
        overflow-y: auto;
        position: relative;
        height: 300px
    }
    .bloc1 .courbe_n1 .courbe_n2 .jqplot {
        position: absolute;
        width: 500px
    }
    .bloc1 .courbe_n1 .courbe_n2 .jqplotpeche {
        position: absolute;
        width: 500px
    }
    .bloc1 .courbe_n1 .courbe_n2 .cont_tab_meteo {
        position: absolute;
        width: 650px
    }
    .bloc1 .titre_sous {
        width: 58%;
    }
    .bloc1 .btn_esp {
        max-width: 37%;
        margin-right: 0;
        margin-top: 5px;
    }
    .tab_mar {
        width: 49%;
    }
    .tab_mar tr:nth-child(3) {
        font-size: 11px;
    }
    .tab_mar th {
        font-size: 10px;
    }
    .tab_pec {
        font-size: 10px;
    }
    .tab_pec td {
        font-size: 11px;
    }
    .tab_pec th {
        font-size: 10px;
    }
    .classtaillecourte {
        float: right;
        width: 47%
    }
    .classtaillelarge {
        float: right;
        width: 49%
    }
    .tab_met {
        width: 75%;
    }
    .tab_met tr:nth-child(3) {
        font-size: 11px;
    }
    .tab_met th {
        font-size: 10px;
    }
    .tab_bou {
        width: 24%;
    }
    .poster_picto .titre_poster {
        display: none
    }
    .poster_picto ul li img {
        height: 40px;
        width: 40px
    }
    .ficheconseil .liste {
        margin-top: 0;
        margin-bottom: 20px;
        width: 100%;
        margin-right: 0;
        height: 200px;
        border-bottom: 0;
        padding-bottom: 0
    }
    .closefiltre {
        display: block
    }
    .bloc_prez_club_slf_droite {
        display: none
    }
    .titre_poster_tel {
        display: block
    }
    .slf_nonconnecte {
        padding: 10px;
    }
    .slf_nonconnecte .bloclisteprez img {
        width: 15%;
    }
    .slf_nonconnecte .bloclisteprez div {
        width: 85%;
    }
    #slfnc .slf_headerphoto {
        height: 100%
    }
    #slfnc .bandeau50G {
        padding: 10px;
        width: 100%;
        margin: 0
    }
    #slfnc .bandeau50D {
        padding: 10px;
        width: 100%;
        margin: 0
    }
    .slf_headerphoto .newTitreNiveau1 {
        padding-top: 30px
    }
    .menu_ico_comm {
        display: block
    }
    .connexion_modale {
        height: 100vh;
        overflow-y: auto;
        width: 100vw;
        padding: 0;
        position: relative
    }
    .popup_connect {
        top: 0;
        left: 0;
        padding: 0;
    }
    .popup_connect article {
        margin-bottom: 0;
        z-index: 99999
    }
    .connexion_modale>.bandeau100:first-child {
        margin-top: 15px
    }
    .pc {
        display: none
    }
    .smartphone {
        display: block
    }
    .publicite__produit {
        width: 50%;
    }
    #pageCommune #quepecher {
        height: auto;
        width: 100%
    }
    .headercommune {
        height: auto;
        width: 100%
    }
    .headercommune h1 {
        font-size: 24px;
        padding: 0 0 0 30px;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }
    .headercommune h2 {
        font-size: 5vw;
        padding: 10px 0 0 30px;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    }
    .headercommune .baseline {
        display: none;
    }
    #pageCommune .liste_prise_membre {
        display: none;
    }
    #pageCommune .innerblanc {
        padding: 10px;
        background: white;
        border: 0;
        box-shadow: none
    }
    #pageCommune .bloc1 {
        background: transparent
    }
    #pageCommune .bloc1 .titre_sous {
        width: 100%
    }
    #pageCommune #oupecher .bloc1 .titre_sous {
        width: 100%;
        line-height: 25px;
        margin-top: 10px 0
    }
    #pageCommune .bloc1 .btn_esp {
        float: left;
        width: 100%;
        max-width: 100%;
        padding: 10px 0;
        margin-top: 10px
    }
    #pageCommune #quisommenous {
        display: none;
    }
    #pageCommune .bandeauDeuxTiersD {
        width: 100%;
        margin: 10px 0 0 0
    }
    #pageCommune .bandeauDeuxTiersG {
        width: 100%;
        margin: 10px 0 0 0
    }
    #pageCommune .bandeau50G {
        width: 100%;
        margin: 10px 0 0 0
    }
    #pageCommune .bandeau50D {
        width: 100%;
        margin: 10px 0 0 0
    }
    #pageCommune #quandpecher {
        height: auto
    }
    #pageCommune #maree {
        height: auto
    }
    #pageCommune #meteo {
        height: auto
    }
    #pageCommune #avecquipecher {
        width: 100%;
    }
    #pageCommune #avecquipecher .s_sortie_club:first-child {
        margin: 10px 0 0 0
    }
    #pageCommune #avecquipecher .s_sortie_club:last-child {
        margin: 10px 0 0 0
    }
    #pageCommune #avecquipecher .c_last_sorties {
        float: left;
        width: calc(50% - 5px);
        margin-left: 5px
    }
    #pageCommune #avecquipecher .c_last_sorties:nth-child(2) {
        margin-left: 0
    }
    #pageCommune #avecquipecher .c_last_sorties:nth-child(3) {
        display: none
    }
    #pageCommune #avecquipecher2 {
        display: none
    }
    .cta__article {
        padding: 10px;
    }
    #pageCommune .bandeauUnTiersD {
        width: 100%;
        margin: 0
    }
    .alerte_commune {
        line-height: 25px;
        font-size: 15px;
        padding: 0
    }
    .b_slf_droite_2 {
        width: 100%
    }
    .uniquement_pc {
        display: none
    }
    .pricing__card--cta.--comm a {
        font-size: 14px;
    }
    .pageMagasin .b_slf_gauche.hidden_smartphone {
        display: none
    }
}

/******
ancien ipad.css
********/


/* CSS Document */
@media screen and (min-width: 626px) and (max-width: 1199px){

    body{font-size:90%; background-image:none}
    .bandeau_haut .inner {margin-left:0; margin-right:0; width:100%}
    .bandeau_haut .se_loguer {padding-right:10px}
    .bandeau_haut .administrer {padding-right:10px}
    .bandeau_logo {margin-left:0; margin-right:0; margin-top:0; width:100%}
    .bandeau_logo .nom_site {padding-left:10px;}
    .bandeau_logo .search {padding-right:10px;}
    .menu {margin-left:0; margin-right:0; width:100%}
    .menu ul li a{margin: 0 5px}
    .menu .zone_saisie{width:150px;}
    .contenu {margin-left:0; margin-right:0; width:100%}
    /*.colonne_gauche {margin-top:5px; width:69.7%; margin-left:0;}*/
    .contenu .colonne_gauche {margin-top:5px; width:calc(100% - 310px); margin-left:0;}
    .contenu_large .colonne_gauche {margin-top:5px; width:calc(100% - 300px); margin-left:0;}
    .colonne_droite{margin-top:5px; /*max-width:300px; width:32%; margin-left:1%*/}
    .region_1{width:94%; padding-left:3%; padding-right:3%;}
    #habillagepub{display:none}
    .uniquement_pc{display: none}
    
    h1 {font-size:192%}
    h2 {font-size:130%}
    table .horodate {font-size:90%}
    table .texte {font-size:90%}
    textarea {font-size:84.61538462%}
    .fileUpload input.upload {font-size:153.8461538%}
    .boutonPosterCommentaire {padding:5px; height:auto}
    
    /* titres */
    .titreBloc{font-size:161.5384615%}
    .titreType2 {font-size:130.7692308%}
    .titreType3{font-size:107.6923077%}
    .lienType1{font-size:107.6923077%}
    .lienType1:hover{font-size:107.6923077%}
    .lienType3 {font-size:130.7692308%}
    .lienType4{font-size:169.2307692%}
    .resumeType1{font-size:120%}
    .legendeType1{font-size:90%}
    .indiceType1{font-size:107.6923077%}
    .inputType1{font-size:130.7692308%}
    
    
    /* page Accueil */
    .slider .cadre #legende_1{width: 80%;}
    .slider .cadre .bullet {padding-right: 10px;}
    .pAccueil002G .sectionArticleContenu{width: 53%;}
    .pAccueil002D .sectionArticleContenu{width: 53%;}
    
    /* page Commune */
    .communeEntete .titre h1{padding-top:0; font-size:120%}
    #tableauProchainesMarees {display:none}
    .pCommune002G .sectionTitre .titreType2 {font-size:140%}
    .pCommune002G   .sectionArticleTitre .lienType1 {font-size:120%}
    .pCommune002G   .sectionArticleTitre .pourcentage{font-size:120%}
    .pCommune002G .sectionArticleContenu  .sectionArticleResume {font-size:100%}
    .pCommune002G .sectionArticleContenu  .sectionArticleResume  a {font-size:120%}
    .voirTous {font-size:120%}
    .pCommune002D .sectionCadreInferieur {margin-bottom:5px; padding-bottom:0;}
    .pCommune002D .sectionTitre .titreType2 {font-size:140%}
    .pCommune002D .sectionSousTitre .titreType2  {font-size:120%}
    .pCommune002D .sectionArticleTitre .lienType1 {font-size:120%}
    .pCommune002D .sectionArticleContenu  .sectionArticleResume  a  {font-size:120%}
    .pCommune002D  .bouton  a  {font-size:120%}
    .pCommune002D  .bouton  span  {font-size:120%}
    #communePubVideo{height:150px}
    #communeCommentaireEmail{width:60%;}
    #communeCommentairePseudo{width:60%;}
    #communeCommentaireTitre{width:95%;}
    
    /* page rechercher */
    #pRechercher .search {display:none}
    
    /* page Cr�er un compte */
    #pInscription .label {width:100%; text-align:left}
    #pInscription .iTexteType1 {width:50%;}
    #pInscription .alertForumlaireT1{max-width: 38%;}
    #pInscription .iSelectType2{margin-left:5px}
    #pInscription .iSelectType3{margin-left:5px}
    #pInscription .birthday{width:auto}
    
    /* page Cr�er une annonce */
    #publierUneAnnonce .label {width:100%; text-align:left}
    #publierUneAnnonce .iTexteType1 {width:50%;}
    #publierUneAnnonce .alertForumlaireT1{max-width: 38%;}
    #publierUneAnnonce .iSelectType2{margin-left:5px}
    #publierUneAnnonce .iSelectType3{margin-left:5px}
    
    /* blocPub */
    .blocAnnonce9 {display:none}
    #annonce3{display:none}
    #blocD0 iframe{width:100%; height:100%}
    #blocD1{display:block}
    #blocD5{display:block}
    #blocD12 {display:none}
    
    /* autres blocs */
    .blocSansMarge{width:100%;}
    .blocSansMarge img {width:100%}
    /*#pageCommune #quepecher{height:290px}*/
    #pageCommune #quepecher .comListeEspece{float: left; margin-top: 10px; margin-right: 15px; width: calc(33.3333% - 10px);}
    #pageCommune #quepecher .comListeEspece:nth-child(3){margin-right: 0;}
    #pageCommune #quepecher .comListeEspece:last-child{display:none}
    /*#pageCommune .liste_prise_membre{height:290px}*/
    #pageCommune .liste_prise_membre .btn_poster_prise{width:100%}
    #pageCommune .liste_prise_membre .listing a{height:60px}
    #pageCommune .liste_prise_membre .listing a:nth-child(3){display:none}
    #pageCommune #oupecher .bloc1 .titre_sous{margin-top:10px}
    #pageCommune #quandpecher{width:100%}
    #pageCommune #quandpecher .bandeauDeuxTiersG{width:100%; margin:0 }
    #pageCommune #quandpecher .bandeauUnTiersD{width:100%; margin:0 }
    #pageCommune #meteo{width:100%; margin-left: 0; height:auto}
    #pageCommune #maree{width:100%; margin-right: 0; height:auto}
    #pageCommune #quisommenous{display:none}
    #pageCommune #avecquipecher {height:356px; }
    #pageCommune #avecquipecher .c_last_sorties_bg{height:100px; }
    #pageCommune #avecquipecher2 {height:356px; }
    #pageCommune #avecquipecher2 .innerdiv{line-height:30px; font-size:25px; margin-top: 0}
    #pageCommune #questioncommunaute{display:none; }
    #pageCommune #pubHomologuer{display:none}
    .slf_nonconnecte{padding: 2% 10%}
    .b_slf_gauche{float:left; width:20%}
    .b_slf_droite{float:left; width:60%; max-width: none}
    .b_slf_droite_2{float:left; width:20%}
    }

/******
ancien style.css
********/


/* Retire la croix des inputs type search */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.buttons-social {
    position: fixed;
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    /* display: none; */
}

.buttons-social>a {
    width: 45px;
    height: 45px;
}

.buttons-social>a:hover {
    opacity: .8;
}

.buttons-social>a:first-of-type {
    border-top-right-radius: 6px;
}

.buttons-social>a:last-child {
    border-bottom-right-radius: 6px;
}

@media screen and (max-width: 1120px) {
    .buttons-social {
        position: sticky;
        top: 70px;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: center;
        transform: none;
    }
    .buttons-social>a {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        margin: 4px;
    }
}



.text__blue {
    color: #2e4770;
}

.tag_tarif_special {
    font-family: 'Open Sans', sans-serif;
    background: #1db954;
    float: left;
    padding: 5px;
    border-radius: 5px;
    color: white;
    font-size: 13px;
    font-weight: bold;
}

.text__orange {
    color: #ef7d00;
}


/* end Grid Normalize */

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

div.content {
    overflow: hidden;
}

.scrollpoint {
    opacity: 0;
}

.scrollpoint.active {
    opacity: 1 \0;
}

.hanging-phone {
    position: absolute;
    right: 0;
    z-index: 0;
    bottom: -70px;
}

.section-heading {
    margin: 60px 0 80px;
    text-align: center;
    float: left;
    width: 100%;
}

.section-heading h1 {
    display: inline-block;
    font-size: 55px;
    font-weight: 300;
    margin-bottom: 0;
}

.section-heading p {
    font-size: 25px;
    color: #999999;
    text-align: center;
    font-weight: 300;
}

.section-heading .divider:after {
    content: "";
    position: relative;
    height: 4px;
    width: 60px;
    display: block;
    text-align: center;
    margin: 13px auto;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    -ms-border-radius: 5em;
    -o-border-radius: 5em;
    border-radius: 5em;
}

.section-heading.inverse h1,
.section-heading.inverse p {
    color: #ffffff;
    text-align: center;
}

.section-heading.inverse .divider:after {
    background: #ffffff;
}

.section-heading.inverse .divider.divider-orange:after {
    background-color: #ef7d00
}

section#about {
    position: relative;
    width: 100%;
    float: left;
    z-index: 3;
    padding: 40px 0;
}

section#about .about-item {
    text-align: center;
    font-size: 17px;
    line-height: 25px;
    color: #999999;
}

section#about .about-item i.fa {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    padding: 35px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    width: 104px;
}

section#features {
    width: 100%;
    float: left;
    z-index: 3;
    padding: 40px 0;
}

section#features .media i.fa {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    padding: 20px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    width: 2.6em;
    text-align: center;
}

section#features .media .media-heading {
    padding-top: 10px;
    font-weight: 300;
}

section#features .media .media-body {
    color: #999999;
}

section#features .media.feature {
    margin-top: 25px;
}

section#features .media.feature:first-child {
    margin-top: 0;
}

section#features img {
    display: inherit;
    margin: 0 auto 20px;
}

#features .dl-app {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
section#reviews {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    float: left;
    z-index: 3;
    padding: 40px 0;
    overflow: hidden;
}

section#reviews .review-filtering {
    margin: 20px 0 100px 0;
}

section#reviews .review-filtering .review .review-person {
    width: 100%;
}

section#reviews .review-filtering .review .review-person img {
    width: 110px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: 10px auto;
}

section#reviews .review-filtering .review .review-comment {
    width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    padding: 5px 40px 20px;
    position: relative;
}

section#reviews .review-filtering .review .review-comment h3 {
    margin-bottom: 15px;
}

section#reviews .review-filtering .review .review-comment p {
    font-size: 16px;
    color: #999999;
}

section#reviews .review-filtering .review .review-comment p span {
    margin-left: 10px;
}

section#reviews .review-filtering .review .review-comment:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-width: 15px;
    margin-top: -10px;
}

section#reviews .review-filtering .review .review-person,
section#reviews .review-filtering .review .review-comment {
    float: left;
}

section#reviews .review-filtering .slick-dots {
    bottom: -80px;
}

section#reviews .review-filtering .slick-dots li button {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

section#reviews .review-filtering .slick-dots li button:before {
    display: none;
}


/*
section#screens .slider {
  margin: 50px 0;
  width: 100%;
  float: left;
  z-index: 3;
  padding: 40px 0;
}

section#screens .slider div img {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  padding: 10px;
  display: inline;
}

section#screens .slider div h4 {
  text-align: center;
  margin-top: 40px;
  font-size: 16px;
}

section#screens .slider .slick-dots li button {
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
  -ms-border-radius: 5em;
  -o-border-radius: 5em;
  border-radius: 5em;
}

section#screens .slick-prev,
section#screens .slick-next {
  width: 50px;
  height: 50px;
  top: 44%;
}

section#screens .slick-slide {
  text-align: center;
}

section#screens .slick-prev:before {
  content: "\f104";
}

section#screens .slick-next:before {
  content: "\f105";
}

section#screens .slick-prev:before,
section#screens .slick-next:before {
  font-size: 34px;
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
  -ms-border-radius: 5em;
  -o-border-radius: 5em;
  border-radius: 5em;
  line-height: 45px;
  color: #CCC;
  border: 2px solid #CCC;
  width: 50px;
  display: inline-block;
  height: 50px;
  text-align: center;
}

section#screens .filter {
  text-align: center;
}

section#screens .filter a {
  display: inline-block;
  padding: 7px 20px;
  text-decoration: none;
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
  -ms-border-radius: 5em;
  -o-border-radius: 5em;
  border-radius: 5em;
  margin: 10px 5px;
  text-transform: uppercase;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
*/


/* demo video Section
section#demo {
width: 100%;
float: left;
z-index: 3;
padding: 40px 0;
}
section#demo .video-container {
  padding: 20px;
  border: 1px solid #b3b3b3;
  min-height: 450px;
  overflow: hidden;
}

section#demo iframe {
  width: 100%;
  height: 100%;
  border: none;
}
*/


/* Get app Section */

section#getApp {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 70px 0;
    float: left;
    width: 100%;
    overflow: hidden;
}

section#getApp .platforms {
    margin: 5px auto 120px auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

section#getApp .platforms .btn {
    margin-right: 10px;
    margin-bottom: 20px;
}


/* support bache */

section#bache {
    padding: 30px 0 50px 0;
    float: left;
    width: 100%;
}


/* support section */

section#support {
    padding: 0 0 150px 0;
    float: left;
    width: 100%;
}

section#support .media {
    margin-bottom: 10px;
}

section#support .media i.fa {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    padding: 10px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    width: 1.9em;
    text-align: center;
}

section#support .media .media-heading {
    padding-top: 15px;
    font-weight: 300;
}

section#support .media .media-heading a {
    font-weight: 400;
}



/* Common style for pseudo-elements */

.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

.tp-caption {
    font-family: 'Lato', Arial !important;
    -webkit-font-smoothing: antialiased;
}

.tp-caption.large_white_bold {
    color: #ffffff;
    font-size: 65px;
    font-weight: 400;
}

.tp-caption.large_white_light {
    color: #ffffff;
    font-size: 65px;
    font-weight: 400;
    font-weight: 300;
}

.btn {
    -webkit-border-radius: 3em;
    -moz-border-radius: 3em;
    -ms-border-radius: 3em;
    -o-border-radius: 3em;
    border-radius: 3em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 5px 25px;
}

.btn.btn-primary {
    border: 2px solid #ffffff;
    background: none;
    color: #ffffff;
}

.btn.btn-primary:hover {
    color: #ffffff;
}

.btn.btn-default {
    border: none;
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
    /* IE10+ */
    background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#cccccc, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.btn.btn-lg {
    padding: 10px 25px;
}

.btn:hover {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

form .form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    -ms-border-radius: 5em;
    -o-border-radius: 5em;
    border-radius: 5em;
    height: 40px;
    line-height: 40px;
    padding: 10px 20px;
    color: #cfcfcf;
    border: 2px solid #cccccc;
    font-weight: 300;
}

form textarea.form-control {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    height: auto;
    line-height: normal;
}

.contact__tel .carre {
    position: fixed;
    top: 80%;
    right: 0;
    z-index: 10001;
    width: 162px;
    height: 100px;
    background-color: #ef7d00
}

.contact__tel .txt {
    color: white;
    padding: 10px 0 10px 10px;
    font-size: 15px;
    line-height: 25px;
    text-align: left
}

.contact__tel .arrondi {
    position: fixed;
    top: 80%;
    right: 116px;
    z-index: 10000;
}

.contact__tel a {
    color: white
}

.contact__offre .__bouton {
    position: fixed;
    right: 10px;
    top: 380px;
    border-radius: 50%;
    background-color: orange;
    color: white;
    padding: 25px 25px;
    z-index: 1001;
    text-align: center;
    font-size: 16px
}

@media screen and (max-width: 640px) {
    .contact__offre .__bouton {
        top: 80%;
        right: 0;
        width: 100px;
        border-radius: 0;
        padding: 28px 10px;
        border-left: 2px solid white
    }
    .contact__tel .carre {
        top: 80%;
        right: 0;
    }
    .contact__tel .arrondi {
        top: 80%;
        right: 100px;
    }
    .slick-next {
        right: 0;
    }
    .slick-prev {
        left: 0;
    }
    .contact-details {
        margin-top: 20px;
    }
}

.pre-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: none;
}

.pre-loader .load-con {
    margin: 20% auto;
    position: relative;
    text-align: center;
}

.spinner {
    margin: 50px auto 0;
    width: 70px;
    text-align: center;
}

.spinner>div {
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
    }
}

@keyframes bouncedelay {
    0%,
    80%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    40% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

section .section-heading .divider:after {
    background: #2e4770;
}

section#about .about-item i.fa {
    border: 2px solid #2e4770;
    color: #2e4770;
}

section#about .about-item:hover i.fa {
    color: #ffffff;
    background: #2e4770;
}

section#about .about-item:hover h3 {
    color: #2e4770;
}

section#features {
    background: #f7f7f7;
}

section#features header h1:after {
    background: #2e4770;
}

section#features .media i.fa {
    border: 2px solid #2e4770;
    color: #2e4770;
}

section#features .media:hover i.fa {
    color: #ffffff;
    background: #2e4770;
}

section#features .media:hover h3 {
    color: #2e4770;
}

section#features .media.active i.fa {
    color: #ffffff;
    background: #2e4770;
}

section#features .media.active .media-heading {
    color: #2e4770;
}

section#reviews header {
    color: #ffffff;
}

section#reviews header h1:after {
    background: #ffffff;
}

section#reviews .review-filtering .review .review-person img {
    border: 3px solid #ffffff;
}

section#reviews .review-filtering .review .review-comment {
    background: #ffffff;
}

section#reviews .review-filtering .review .review-comment h3 {
    color: #2e4770;
}

section#reviews .review-filtering .review .review-comment p span i {
    color: #2e4770;
}

section#reviews .review-filtering .review .review-comment:after {
    border-right-color: #ffffff;
}

section#reviews .review-filtering .slick-dots li button {
    background: #ffffff;
    border: 2px solid #ffffff;
}

section#reviews .review-filtering .slick-dots li.slick-active button {
    background: #2e4770;
}


/* demo video Section */

section#demo {
    background-color: #f0eded;
    /*background: #f6f6f6;*/
}

section#demo header h1:after {
    background-color: #f0eded;
    /*background: #2e4770;*/
}


/* Get app Section */

@media screen and (max-width: 1000px) {
    section#getApp {
        background-position: right;
    }
}

section#getApp header {
    color: #ffffff;
}

section#getApp header h1:after {
    background: #ffffff;
}

section#getApp .platforms .media {
    border: 2px solid #ffffff;
    color: #ffffff;
}

section#getApp .platforms .media a i {
    color: #ffffff;
}

section#getApp .platforms .media a div.media-body {
    color: #ffffff;
}

section#getApp .platforms .media:hover {
    background: #ffffff;
}

section#getApp .platforms .media:hover a i,
section#getApp .platforms .media:hover a div.media-body {
    color: #2e4770;
}


/* support section */

section#support {
    background: #f7f7f7;
}

section#support header h1:after {
    background: #2e4770;
}

section#support .media i.fa {
    border: 2px solid #2e4770;
    color: #2e4770;
}

section#support .media a {
    color: #2e4770;
}

section#support .media:hover i.fa {
    color: #ffffff;
    background: #2e4770;
}

section#support .media:hover h3 {
    color: #2e4770;
}

.btn.btn-primary {
    color: #2e4770;
    border-color: #2e4770;
}

.btn.btn-primary:hover {
    color: #ffffff;
    background: #2e4770;
    border-color: #2e4770;
}

.btn.btn-primary.inverse {
    color: #ffffff;
    border-color: #ffffff;
}

.btn.btn-primary.inverse:hover {
    color: #ffffff;
    background: #2e4770;
    border-color: #2e4770;
}

form .form-control:focus {
    border-color: #66cdcc;
    color: #999999;
}

.pre-loader {
    background: #336799;
}

.row-mg-top {
    margin-top: 3%;
}


/*Pricing table*/

#generic_price_table {
    background-color: #f0eded;
}


/*PRICE COLOR CODE START*/

#generic_price_table .generic_content {
    background-color: #fff;
}

#generic_price_table .generic_content .generic_head_price {
    background-color: #f6f6f6;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg {
    background: #e4e4e4;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span {
    color: #525252;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign {
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency {
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent {
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month {
    color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li {
    color: #a7a7a7;
}

#generic_price_table .generic_content .generic_feature_list ul li span {
    color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li:hover {
    background-color: #E4E4E4;
    border-left: 5px solid #2e4770;
}

#generic_price_table .generic_content .generic_price_btn input {
    border: 1px solid #2e4770;
    color: #2e4770;
}

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg {
    background: #2e4770;
    color: #fff;
}

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,
#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span {
    color: #fff;
}

#generic_price_table .generic_content:hover .generic_price_btn input,
#generic_price_table .generic_content.active .generic_price_btn input {
    background-color: #2e4770;
    color: #fff;
}

#generic_price_table {
    font-family: 'Lato', sans-serif;
}

.row .table {
    padding: 28px 0;
}


/*PRICE BODY CODE START*/

#generic_price_table .generic_content {
    overflow: hidden;
    position: relative;
    text-align: center;
}

#generic_price_table .generic_content .generic_head_price {
    margin: 0 0 20px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content {
    margin: 0 0 20px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head {
    padding-top: 30px;
    padding-bottom: 30px;
    position: relative;
    z-index: 1;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span {
    font-family: "Raleway", sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag {
    padding: 0 0 20px;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price {
    display: block;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign {
    display: inline-block;
    font-family: "Lato", sans-serif;
    font-size: 28px;
    font-weight: 400;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency {
    font-family: "Lato", sans-serif;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 60px;
    padding: 0;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent {
    display: inline-block;
    font-family: "Lato", sans-serif;
    font-size: 24px;
    font-weight: 400;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month {
    font-family: "Lato", sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_feature_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#generic_price_table .generic_content .generic_feature_list ul li {
    font-family: "Lato", sans-serif;
    font-size: 18px;
    padding: 10px;
    transition: all 0.3s ease-in-out 0s;
}

#generic_price_table .generic_content .generic_feature_list ul li:hover {
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}

#generic_price_table .generic_content .generic_feature_list ul li .fa {
    padding: 0 10px;
}

#generic_price_table .generic_content .generic_price_btn {
    margin: 20px 0 32px;
}

#generic_price_table .generic_content .generic_price_btn input {
    border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    -webkit-border-radius: 50px;
    display: inline-block;
    font-family: "Lato", sans-serif;
    font-size: 18px;
    outline: medium none;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
}

#generic_price_table .generic_content,
#generic_price_table .generic_content:hover,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content .price,
#generic_price_table .generic_content:hover .price,
#generic_price_table .generic_content .generic_price_btn input,
#generic_price_table .generic_content:hover .generic_price_btn input {
    transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
}

@media (max-width: 320px) {}

@media (max-width: 767px) {
    #generic_price_table .generic_content {
        margin-bottom: 75px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #generic_price_table .col-md-3 {
        float: left;
        width: 50%;
    }
    #generic_price_table .col-md-4 {
        float: left;
        width: 50%;
    }
    #generic_price_table .generic_content {
        margin-bottom: 75px;
    }
}

.text-center h1,
.text-center h1 a {
    color: #7885CB;
    font-size: 30px;
    font-weight: 300;
    text-decoration: none;
}

.head__bg--secondary {
    background-color: #ef7d00 !important;
    border-color: #ef7d00 !important;
}

.--bgwhite {
    background: white;
}

.medias_heading {
    margin-bottom: 30px;
}

.logo_gallery {
    margin-top: 15px;
}

.logo_gallery img {
    max-width: 100%;
}


/* Slider Avis */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: inherit;
    touch-action: inherit;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    z-index: 5;
    width: 100%;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    zoom: 1;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}


/* Dots */

.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -45px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0px;
    width: 100%;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0px 5px;
    padding: 0px;
    cursor: pointer;
}

.slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    height: 20px;
    width: 20px;
    outline: none;
    line-height: 0;
    font-size: 0;
    color: transparent;
    padding: 5px;
    cursor: pointer;
    outline: none;
}

.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "\2022";
    width: 20px;
    height: 20px;
    font-family: FontAwesome;
    font-size: 6px;
    line-height: 20px;
    text-align: center;
    color: black;
    opacity: 0.25;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: 0.75;
}

section#header .container {
    padding: 60px 0;
}

section#header * h1 {
    font-weight: bold;
    color: white;
}

section#header * h2 {
    font-weight: bold;
    color: white;
}

@media screen and (max-width: 1000px) {
    .hanging-phone {
        display: none;
    }
}


/* url background à changer */

section#reviews .container {
    position: relative;
    z-index: 3;
}

section#reviews .bg-reviews {
    background: url("/static/photo_site/bg-avis.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    z-index: 1;
    filter: blur(5px);
}

section#getApp .container-fluid {
    position: relative;
    z-index: 3;
}

section#getApp .bg-getApp {
    background: url("/static/photo_site/bg-dlapp.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    z-index: 1;
    filter: blur(5px);
}

section#header {
    background: url("/static/photo_site/bg_header.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 0;
}

@media screen and (max-width: 768px) {
    section#features .dl-app img {
        width: 150px;
        max-width: 40%;
    }
}

@media screen and (max-width: 480px) {
    .section-heading {
        margin: 0 0 40px;
    }
    .section-heading h1 {
        font-size: 38px;
    }
    .about-item {
        margin-bottom: 20px;
    }
    section#demo .video-container {
        min-height: 250px;
    }
    section#reviews .review-filtering .review .review-comment h3 {
        font-size: 18px;
    }
    section#reviews .review-filtering .review .review-comment {
        padding: 5px 10px 15px;
    }
    #generic_price_table .generic_content {
        margin-bottom: 30px;
    }
    section#getApp .platforms {
        margin-bottom: 0;
    }
    section#support {
        padding-bottom: 90px;
    }
    h4.media-heading {
        font-size: 14px;
    }
}


/*  pêche collaborative */

.logo_gallery {
    margin-bottom: 15px;
}

section#header__collab {
    background: url("/static/photo_site/bg__collaborative.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-bottom: 0;
}

section#header__collab .container {
    padding: 0 0 30px;
}

section#header__collab * h1 {
    font-weight: bold;
    color: white;
}

section#header__collab * h2 {
    font-weight: bold;
    color: white;
}

section#derniereSor {
    position: relative;
    background: #f6f6f6;
}

section#derniereSor .about-item {
    text-align: center;
    font-size: 17px;
    line-height: 25px;
    color: #999999;
}

section#derniereSor .about-item i.fa {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    padding: 35px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    width: 104px;
}

.collab__catchphrase {
    margin: 60px 0 60px;
}

.collab__catchphrase h1 {
    color: #2e4770;
}

.collab__link {
    text-align: center;
    margin-top: 80px;
}

.collab__button {
    border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    -webkit-border-radius: 50px;
    display: inline-block;
    font-family: "Lato", sans-serif;
    font-size: 18px;
    outline: medium none;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #2e4770;
    color: #fff;
    transition: 0.25s all ease;
}

.collab__button:link {
    text-decoration: none;
}

.collab__button:visited {
    text-decoration: none;
}

.collab__button:hover {
    text-decoration: none;
    color: white;
    background: #3F629B;
}

.collab__button:active {
    text-decoration: none;
}

#chercher_sortie {
    padding-bottom: 0;
}

.collab__form {
    width: 100%;
    margin: 60px 0 60px;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
}

.collab__form input {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-left: 15px;
    border-bottom: 2px solid #a7a7a7;
    transition: 0.25s all ease;
    color: #2e4770;
}

.collab__form input:focus {
    outline: none;
    border-bottom: 4px solid #2e4770;
}

.collab__form input::-webkit-input-placeholder {
    color: orange;
}

.collab__form label {
    font-weight: 500;
}

.collab__form * {
    display: inline-block;
}

.collab__submit {
    font-size: 20px;
    margin-left: 30px;
    background: #2e4770;
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    color: white;
    transition: 0.25s all ease;
}

.collab__submit:hover {
    background: #3F629B;
}

.sortie-item {
    margin-bottom: 30px;
}

.sortie__image {
    float: left;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

.sortie__image img {
    max-width: 100%;
}

.sortie__header {
    padding: 10px;
    float: left;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: white;
}

.sortie__header--avatar {
    height: 70px;
    width: 70px;
    overflow: hidden;
    border-radius: 100%;
    float: left;
}

.sortie__header--avatar>img {
    max-height: 70px;
    display: block;
}

.sortie__header--titre {
    float: left;
    width: calc(100% - 70px);
    width: -webkit-calc(100% - 70px);
}

.sortie__header--titre>h3 {
    margin: 0;
    font-size: 20px;
    padding: 10px;
}

.sortie__details {
    float: left;
    width: 100%;
    padding: 20px 10px;
    background: white;
}

.sortie__profileLink {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.58;
    color: #2e4770;
    margin-top: 12px;
    text-decoration: underline;
}

.sortie__type {
    float: left;
    width: calc(20% - 10px);
    width: -webkit-calc(20% - 10px);
    text-align: center;
}

.sortie__materiel {
    float: left;
    width: 80%;
}

.sortie__materiel>h3 {
    margin: 0;
    font-size: 1.2em;
    margin: 0.8em;
    text-align: center;
}

.sortie__footer {
    float: left;
    width: 100%;
    background: white;
}

.sortie__prix {
    float: left;
    width: 20%;
    text-align: center;
    background: #2e4770;
    padding: 20px;
    color: white;
}

.sortie__prix p {
    margin: 0;
    font-size: 1.2em;
}

.sortie__link {
    float: left;
    width: 80%;
    text-align: center;
    padding: 20px;
}

.sortie__link a {
    font-size: 1.2em;
}

#header .section-heading {
    margin: 50px 0 70px;
}

#header__collab .section-heading {
    margin: 50px 0 70px;
}


/* sortie card */

.sortie-card {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    border-radius: 3px;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
    margin-top: 20px;
}

.sortie-card {
    background-size: cover;
}

.sortie-card .color-overlay {
    background: rgba(84, 104, 110, 0.4);
    width: 100%;
    height: 250px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: 0.25s all ease;
}

.sortie-card .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.sortie-card:hover .color-overlay {
    background: rgba(84, 104, 110, 0.7);
}

.title-content {
    text-align: center;
    padding: 70px 0 0 0;
    position: relative;
    z-index: 20;
    width: 100%;
    top: 0;
    left: 0;
    transition: 0.5s all ease;
}

.title-content p {
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    margin-bottom: 0;
}

.title-content h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    margin-bottom: 0;
}

.title-content hr {
    width: 50px;
    height: 3px;
    margin: 20px auto;
    border: 0;
    background: #D0BB57;
}

.intro {
    width: 170px;
    margin: 0 auto;
    color: #DCE3E7;
    font-family: 'Droid Serif', serif;
    font-size: 13px;
    font-style: italic;
    line-height: 18px;
}

.card__prix {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: white;
    z-index: 20;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    margin: 0;
}

.card__type {
    position: absolute;
    left: 15px;
    top: 15px;
    color: white;
    z-index: 20;
    margin-right: 15px;
}

.sortie-card {
    cursor: pointer;
}


/* sortie end */

.collab__header--info {
    font-size: 18px
}

@media screen and (max-width: 1680px) {
    .section-heading {
        margin: 0 0 40px;
    }
    .section-heading h1 {
        font-size: 38px;
    }
    .collab__link {
        margin-top: 40px;
    }
    .collab__form {
        margin: 30px 0 30px;
        font-size: 24px;
    }
}

@media screen and (max-width: 768px) {
    .collab__link {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .collab__header--info {
        font-size: 14px;
    }
}

@media screen and (max-width: 990px) {
    .collab__form {
        font-size: 24px;
    }
}

@media screen and (max-width: 673px) {
    .collab__submit {
        margin-top: 30px;
        margin-left: 0;
    }
}

@media screen and (max-width: 478px) {
    .collab__form input {
        margin-top: 30px;
    }
    .collab__header--info {
        display: none;
    }
    .hide-mb-small {
        display: none;
    }
}

.popup_block.hide-on-mobile {
    display: flex;
}

.section-heading.text-align-left {
    text-align: left;
}

.section-heading.text-align-left .divider:after {
    text-align: left;
    margin: 15px 2px;
}

.container__offredec {
    padding-top: 60px;
    padding-bottom: 60px;
    background-image: url('https://static.pexels.com/photos/65615/sunset-sea-angler-sun-65615.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
}

.offre__dec--overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    background: white;
    top: 0;
    left: 0;
    opacity: 0.8;
}

@media screen and (max-width: 1200px) {
    .sidebar--mgt {
        margin-top: 20px;
    }
}

@media screen and (max-width: 768px) {
    .container__offredec {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .section-heading.text-align-left {
        margin-top: 0;
    }
    .offre__header h1 {
        font-size: 26px
    }
    .offre__header h2 {
        font-size: 24px;
    }
}

#offre-decathlon {
    background: #f7f7f7;
    padding-top: 45px;
}

.material__shadow {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}




/* FAQ */

.wrapper__faq {
    padding: 30px 20px;
    width: 100%;
    background: #efefef;
    float: left;
    position: relative;
}

.wrapper__faq * {
    box-sizing: border-box;
}

.faqArticle {
    float: left;
    width: 100%;
    background: white;
    -webkit-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
}

.wrapper__faq .faqArticle {
    margin-top: 30px;
}

.faqArticle img {
    display: block;
    width: 100%;
}

.faqArticle__header {
    max-height: 350px;
    width: 100%;
    overflow: hidden;
}

.faqArticle__header img {
    width: 100%;
}

.faqArticle__header iframe {
    height: 500px;
}

@media screen and (max-width: 800px) {
    .faqArticle__header iframe {
        height: 300px;
    }
}

.faqArticle__content {
    box-sizing: border-box;
    padding: 50px;
    width: 65%;
    float: left;
}

.faqArticle__content video {
    float: left;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.faqArticle__content h1 {
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 0;
}

.faqArticle__content h2 {
    font-size: 22px;
    margin-top: 32px;
    font-weight: 700;
    color: #2e4770;
}

.faqArticle__content h3 {
    color: #1b1b1b;
    margin-bottom: 12px;
    margin-top: 22px;
    font-size: 20px;
    letter-spacing: normal;
}

.faqArticle__content p {
    font-size: 16px;
    margin: auto;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.667;
}

.faqArticle__content img {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
}

.faq__sidebar {
    background: white;
    width: 100%;
    float: left;
    -webkit-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
}

.faq__sidebar .button__outline {
    width: 80%;
}

.faq__sidebar--head {
    width: 100%;
    float: left;
}

.faq__sidebar--head h3 {
    padding: 15px;
    margin: 0;
    color: #ffffff;
    letter-spacing: normal;
    background: #ef7d00;
    font-size: 20px;
}

.faqArticle__btnRow {
    float: left;
    width: 100%;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .faqArticle__btnRow a.button__blue,
    .faqArticle__btnRow a.button__orange {
        float: left;
        width: 100%;
        margin: 7.5px 0;
    }
}

.faq__serviceList {
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.faq__serviceList li {
    width: 100%;
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.faq__serviceList li:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq__serviceList li a {
    display: block;
    padding: 15px;
    font-size: 16px;
    color: #666;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.faq__serviceList li a:hover {
    color: #2e4770;
    background: #ececec;
}

.faq__serviceList li a.current {
    color: #2e4770;
    background: #ececec;
}

.faq__serviceList li a.current i {
    display: inline-block;
}

.sidebar {
    padding-right: 15px;
    padding-left: 15px;
}

.sticky__sidebar--90 {
    position: sticky;
    position: -webkit-sticky;
    top: 90px;
}

@media screen and (max-width: 1680px) {
    .faqArticle__content {
        width: 80%;
    }
}

@media screen and (max-width: 1200px) {
    .faqArticle__content {
        padding: 30px;
        width: 90%;
        float: left;
    }
}

@media screen and (max-width: 625px) {
    .sticky__sidebar--90 {
        position: relative;
        top: 0;
        padding: 0;
    }
    .faqArticle__header {
        height: auto;
    }
}

.faq__retourClub {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.button__icon {
    padding: 10px 20px;
    text-align: center;
    background: #ef7d00;
    font-size: 20px;
    color: white;
    border-radius: 3px;
    transition: 0.25s all ease;
    margin-left: 0;
}

.button__icon .fa {
    transition: 0.25s all ease;
    display: inline-block;
}

.button__icon:hover {
    background: #ff9623;
    box-shadow: 0 0px 3px 3px rgba(0, 0, 0, 0.1);
}

.button__icon:hover>.fa {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.button__outline {
    text-decoration: none;
    padding: 10px 20px;
    text-align: center;
    border: 2px solid #ef7d00;
    color: #ef7d00;
    text-align: center;
    display: inline-block;
    border-radius: 20px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.button__outline--white {
    border: 2px solid #fff;
    color: #fff;
}

.button__outline--black {
    background: transparent;
    border: 2px solid #1b1b1b;
    color: #1b1b1b;
    cursor: pointer;
}

.button__process {
    text-align: center;
    width: 100%;
}

.button__process a {
    display: inline-block;
    padding: 15px 20px;
    text-transform: uppercase;
}

.button__outline:hover {
    background: #ef7d00;
    color: white;
    text-decoration: none;
}

.button__outline--white:hover {
    background: #fff;
    color: #2e4770;
    text-decoration: none;
}

.button__outline--black:hover {
    background: #1b1b1b;
    cursor: pointer;
}

.process__contact {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 10px;
}


/* Recherche commune */





@media screen and (max-width: 625px) {
    .wrapper__faq {
        padding: 15px;
    }
    .faqArticle__content {
        width: 100%;
        padding: 15px;
    }
}

/* suppression cadre video */

.video-container iframe,
.video-container object,
.video-container embed {
    border: none;
}


/* Le mag */

.une__card {
    background: blue;
    width: 100%;
    height: 400px;
}

.follow__us {
    background: white;
    border-top: 4px solid #2e4770;
    height: 80px;
    margin-top: 20px;
}

.follow__us span {
    font: 14px/80px 'Lato', sans-serif;
    font-weight: 700;
    color: #1b1b1b;
    display: inline-block;
    text-transform: uppercase;
    padding: 0 14px;
}

.follow__us ul {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 0;
    list-style-type: none;
}

.follow__us ul li {
    float: left;
    margin-right: 14px;
}

.follow__us ul li a {
    display: block;
    width: 35px;
    height: 35px;
}

.follow__us ul li a.follow__fb {
    background-image: url("https://image.flaticon.com/icons/svg/145/145802.svg");
}

.follow__us ul li a.follow__gplus {
    background-image: url("https://image.flaticon.com/icons/svg/145/145804.svg");
}

.follow__us ul li a.follow__twitter {
    background-image: url("https://image.flaticon.com/icons/svg/145/145812.svg");
}

.follow__us ul li a.follow__rss {
    background-image: url("https://image.flaticon.com/icons/svg/179/179336.svg");
}

.dernieresprises {
    width: 100%;
    height: 420px;
    margin-top: 20px;
}


@media screen and (max-width: 1679px) {
    /*
.lemag__une > .xl-2:last-child {
  display: none;
}*/
    .hide__1680 {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .hide__1200 {
        display: none;
    }
    .pad0__1200 {
        padding: 0;
    }
}

.dl__app {
    background: white;
    border-top: 4px solid #2e4770;
    height: 80px;
    margin-top: 20px;
}

.dl__app span {
    font: 14px/80px 'Lato', sans-serif;
    font-weight: 700;
    color: #1b1b1b;
    display: inline-block;
    text-transform: uppercase;
    padding: 0 14px;
}

.dl__app ul {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 0;
    list-style-type: none;
}

.dl__app ul li {
    float: left;
    margin-right: 30px;
}

.dl__app ul li a {
    display: block;
    width: 35px;
    height: 35px;
}

.dl__app ul li a.appli__playstore {
    background-image: url("https://image.flaticon.com/icons/svg/300/300218.svg");
}

.dl__app ul li a.appli__applestore {
    background-image: url("https://image.flaticon.com/icons/svg/152/152752.svg");
}

.inscription__newsletter {
    background: white;
    border-top: 4px solid #2e4770;
    height: 80px;
    margin-top: 20px;
}

.inscription__newsletter span {
    width: 100%;
    font-weight: 700;
    font-size: 14px;
    color: #1b1b1b;
    display: block;
    text-transform: uppercase;
    padding: 8px;
    text-align: center;
}

.inscription__newsletter #nl-btn {
    width: 15%;
    background: #ef7d00;
    height: 30px;
    box-shadow: none;
    border: none;
    color: white;
    font-family: 'Lato', sans-serif;
}

.inscription__newsletter #nl-btn:hover {
    background: #ff9623;
}

@media screen and (max-width: 1450px) {
    .follow__us span {
        font: 12px/80px 'Lato', sans-serif;
        font-weight: 700;
        padding: 0 7px;
    }
    .follow__us ul li {
        margin-right: 10px;
    }
    .follow__us ul li a {
        width: 30px;
        height: 30px;
    }
    .dl__app {
        background: white;
        border-top: 4px solid #2e4770;
        height: 80px;
        margin-top: 20px;
    }
    .dl__app span {
        font: 12px/80px 'Lato', sans-serif;
        font-weight: 700;
        padding: 0 7px;
    }
    .dl__app ul li {
        margin-right: 15px;
    }
    .dl__app ul li a {
        width: 30px;
        height: 30px;
    }
    .inscription__newsletter span {
        font-size: 12px;
    }
}

@media screen and (max-width: 768px) {
    .follow__us span {
        padding: 0 14px;
    }
    .follow__us ul li {
        margin-right: 15px;
    }
    .follow__us ul li a {
        width: 30px;
        height: 30px;
    }
    .dl__app {
        background: white;
        border-top: 4px solid #2e4770;
        height: 80px;
        margin-top: 20px;
    }
    .dl__app span {
        font: 14px/80px 'Lato', sans-serif;
        font-weight: 700;
        padding: 0 14px;
    }
    .dl__app ul li {
        margin-right: 15px;
    }
    .dl__app ul li a {
        width: 30px;
        height: 30px;
    }
    .inscription__newsletter span {
        font-size: 12px;
    }
}

.separator__blue {
    width: 100%;
    height: 4px;
    background: #2e4770;
    margin: 20px 0;
}


.follow__us.follow__us--sidebar {
    float: left;
    width: 100%;
    margin: 10px 0;
    height: auto;
    padding: 0 14px;
}

.follow__us.follow__us--sidebar span {
    text-align: left;
    line-height: 34px;
    padding: 0;
}

.derniers__articles {
    background: white;
    width: 100%;
    float: left;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

.derniers__articles--head {
    width: 100%;
    float: left;
}

.derniers__articles--head h3 {
    padding: 20px 30px;
    margin: 0;
    color: #ffffff;
    letter-spacing: normal;
    background: #2e4770;
}

.derniers__articles--list {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
    margin-bottom: 0px;
}

.derniers__articles--list li {
    width: 100%;
    display: block;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.derniers__articles--list li a {
    width: 100%;
    display: block;
    padding: 20px 30px;
    font-size: 16px;
    color: #666;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.derniers__articles--list li a span {
    font-size: 12px;
    width: 100%;
    float: left;
    display: block;
}

.derniers__articles--list li a p {
    margin: 0;
}

.derniers__articles--list li a:hover p {
    color: #2e4770;
}

.sidebar__cta {
    width: 100%;
    text-align: center;
    background: white;
    margin: 10px 0;
    float: left;
}

@media screen and (max-width: 350px) {
    .menuF__logo {
        max-width: 40px;
        overflow: hidden;
    }
}

.sidebar__cta>img {
    width: 100%;
}

.sidebar__cta a {
    margin: 15px 0;
}

.after__article {
    position: relative;
    width: 100%;
    float: left;
    margin-top: 50px;
}

.espece__techniques.espece__dossier a {
    white-space: normal;
}

.espece__infos {
    width: 25%;
    padding: 0 30px;
    margin-top: 50px;
    float: right;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.espece__infos--30 {
    width: 30%;
    position: sticky;
    top: 120px;
}

@media screen and (max-width: 1500px) {
    .espece__infos {
        width: 35%;
        padding: 0 30px;
        margin-top: 50px;
        float: right;
        border-left: 1px solid rgba(0, 0, 0, 0.2);
    }
}

.espece__infos--small {
    display: none;
    width: 100%;
    padding: 0;
    float: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.espece__infos--small .espece__info {
    width: 33.33333334%;
    float: left;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px 30px;
    border-top: none;
    margin-bottom: 0;
}

.espece__infos--small .espece__info p {
    font-size: 16px;
}

.espece__infos--small .espece__info:last-child {
    border-right: none;
}

.ligneboutons2Pro.show-mobile {
    display: none;
    float: left;
    visibility: hidden;
}

@media screen and (max-width: 1200px) {
    .espece__infos {
        display: none;
    }
    .ligneboutons2Pro.show-mobile {
        display: block;
        visibility: visible;
    }
    .espece__infos--small {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
}

.espece__info {
    margin-bottom: 20px;
}

.espece__info span {
    font-size: 12px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #2e4770;
}

.espece__info p {
    font-size: 18px;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #aaa;
}

.espece__techniques {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.espece__techniques a {
    width: 100%;
    display: inline-block;
    font-size: 16px;
    color: #2e4770;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    margin: 3px 0;
}



/* technique card */

.technique-card {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    border-radius: 3px;
    box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.technique-card .title-content {
    text-align: center;
    margin: 70px 0 0 0;
    position: absolute;
    z-index: 20;
    width: 100%;
    padding: 0 15px;
    top: 0;
    left: 0;
    transition: 0.5s all ease;
}

.technique-card .title-content h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    margin-bottom: 0;
}

.technique-card .title-content hr {
    width: 50px;
    height: 3px;
    margin: 20px auto;
    border: 0;
    background: #ef7d00;
}

.technique-card .card-info {
    width: 100%;
    position: absolute;
    bottom: 100px;
    left: 0;
    margin: 0 auto;
    padding: 0 50px;
    color: #DCE3E7;
    font-family: 'Open Sans', sans-serif;
    font-style: 16px;
    line-height: 24px;
    z-index: 20;
    opacity: 0;
    transform: translateY(20%);
    transition: bottom 0.3s, all 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.technique-card .card-info p {
    text-align: center;
}

.technique-card .card__link {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    display: block;
    color: #ef7d00;
    text-decoration: none;
    font-size: 16px;
    z-index: 99;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    transition: all .35s ease-in-out;
    transform: translateY(50%);
    opacity: 0;
    letter-spacing: 2px;
}

.technique-card .color-overlay {
    background: rgba(84, 104, 110, 0.4);
    width: 100%;
    height: 350px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.technique-card .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    width: 100%;
    height: 350px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.technique-card:hover .color-overlay {
    background: rgba(23, 23, 23, 0.7);
}

.technique-card {
    transition: 0.5s all ease;
    cursor: pointer;
}

.technique-card:hover {
    background-position: 10% 10%;
    transform: scale(1.05);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}

.technique-card:hover .title-content {
    transform: translateY(-30%);
}

.technique-card:hover .card-info {
    opacity: 1;
    transform: translateY(0%);
}

.technique-card:hover .card__link {
    opacity: 1;
    transform: translateY(0%);
}


/* une card */

.une__card {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 3px;
    box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.une__card--details {
    position: relative;
    padding: 30px;
    z-index: 99;
}


.une__card .title-content {
    text-align: left;
    margin: 70px 0 0 0;
    position: absolute;
    z-index: 20;
    width: 70%;
    padding: 0;
    bottom: 0;
    left: 0;
    transition: 0.5s all ease;
}

.une__card .title-content h2 {
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    padding: 30px;
}

.une__card .color-overlay {
    background: rgba(84, 104, 110, 0.4);
    width: 100%;
    height: 400px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.une__card .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    width: 100%;
    height: 400px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.une__card:hover .color-overlay {
    background: rgba(23, 23, 23, 0.7);
}

@media screen and (max-width: 1680px) {
    .une__card .title-content {
        width: 90%;
    }
}

.une__card {
    transition: 0.5s all ease;
    cursor: pointer;
}

.une__card:hover {
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}


/* top card */

.top__card {
    margin-top: 20px;
    height: 70px;
    width: 100%;
    background: white;
    transition: 0.25s all ease;
}

.top__card--img {
    width: 25%;
    float: left;
    height: 100%;
    overflow: hidden;
}

.top__card--img img {
    display: block;
    width: 100%;
}

.top__card--title {
    width: 75%;
    float: left;
    padding-left: 30px;
    white-space: nowrap;
    overflow: hidden;
}

.top__card--title h2 {
    line-height: 70px;
    margin: 0;
    transition: 0.25s all ease;
}

.top__card:hover {
    -webkit-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
}

.top__card:hover h2 {
    color: #2e4770;
}

@media screen and (max-width: 1000px) {
    .top__card--title {
        padding-left: 15px;
    }
    .top__card--title h2 {
        font-size: 18px;
    }
}

@media screen and (max-width: 768px) {
    .top__card--title h2 {
        font-size: 16px;
    }
}


/* espece card */

.pub {
    background: orange;
}

.pub .color-overlay {
    display: none;
}

.espece-card {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 3px;
    box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
    background-size: cover !important;
}

.espece-card .title-content {
    padding: 0 15px;
}

.espece-card .title-content h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    margin-bottom: 0;
}

.espece-card .title-content hr {
    width: 50px;
    height: 3px;
    margin: 20px auto;
    border: 0;
    background: #ef7d00;
}

.espece-card .color-overlay {
    background: rgba(84, 104, 110, 0.4);
    width: 100%;
    height: 200px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: all 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.espece-card .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -moz-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: -o-linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    background-image: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.6) 21%);
    width: 100%;
    height: 200px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.espece-card img,
.technique-card img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.espece-card:hover .color-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.title-content {
    text-align: center;
    margin: 70px 0 0 0;
    position: absolute;
    z-index: 20;
    width: 100%;
    padding: 0;
    top: 0;
    left: 0;
    transition: 0.5s all ease;
}

.espece-card hr {
    width: 50px;
    height: 3px;
    margin: 20px auto;
    border: 0;
    background: #ef7d00;
}

.espece-card {
    transition: 0.5s all ease;
    cursor: pointer;
}

.espece-card:hover {
    background-position: 10% 10%;
    transform: scale(1.02);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
}

.espece-card h3 {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    margin-bottom: 0
}

.espece-card:hover .title-content {
    transform: translateY(-30%);
}

.espece-card-une {
    height: 250px;
}

.espece-card-une .color-overlay {
    height: 250px;
}


/* single */

.article {
    float: left;
    width: 100%;
    background: white;
    -webkit-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.article__header {
    width: 100%;
    overflow: hidden;
}

.article__header img {
    width: 100%;
    object-fit: cover;
    max-height: 50vh;
}

.article__content {
    padding: 50px;
    width: 65%;
    float: left;
}

.article__content h1 {
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 32px;
}

.article__content h2 {
    font-size: 22px;
    margin: 32px 0 18px 0;
    font-weight: 700;
    color: #2e4770;
}

.article__content h3 {
    color: #1b1b1b;
    margin: 22px 0 18px 0;
    font-size: 20px;
    letter-spacing: normal;
}

.article__content p {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.article__content img {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
}

.article__content iframe {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
}

.article__commentaires {
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
    border-radius: 4px;
}

.article__commentaire-poster {
    width: 100%;
    padding: 30px;
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
    border-radius: 4px;
    float: left;
    background: white;
    margin: 24px 0;
}

.article__commentaires-titre {
    padding: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.article__commentaires h2 {
    font-size: 22px;
    font-weight: 700;
    color: #2e4770;
    margin: 0;
}

.article__commentaire {
    padding-left: 30px;
    padding-right: 30px;
}

.article__commentaires p,
.article__commentaires-poster p {
    font-size: 16px;
    color: #666;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.article__commentaire-poster textarea {
    width: 100%;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

@media screen and (max-width: 1200px) {
    .article__content {
        padding: 30px;
        width: 90%;
        float: left;
    }
}

@media screen and (max-width: 768px) {
    .article__content {
        padding: 20px;
        width: 100%;
        float: left;
    }
}

.espece__infos h2 {
    margin: 1em 0;
}


/* paiement */

.wrapper__paiement {
    position: relative;
    width: 100%;
    min-height: 100vh;
    float: left;
    overflow: hidden;
    background: white;
}


/* inscription  OLD */

.inscription__background {
    background: url('/static/photo_site/Fotolia_177790969_Subscription_Monthly_M.jpg') center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.inscription--overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.8;
}


/* header */

.process__header {
    float: left;
    width: 100%;
    padding: 50px 30px;
    background-image: url('/static/photo_site/home_header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media screen and (max-width: 1000px) {
    .process__header {
        background-image: url('/static/photo_site/home_header-mobile.jpg');
    }
}

.process__header--overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #2e4770;
    z-index: 1;
    opacity: 0.4;
}

.process__header h1 {
    position: relative;
    text-align: center;
    z-index: 2;
    font-size: 36px;
    line-height: 50px;
    color: white;
    font-weight: 700;
    font-family: 'lato', sans-serif;
}

.process__header h2 {
    position: relative;
    text-align: center;
    z-index: 2;
    font-size: 26px;
    color: white;
    font-weight: 700;
    line-height: 32px;
    font-family: 'lato', sans-serif;
    margin: 15px 0;
}

.process__header ul {
    position: relative;
    z-index: 2;
    padding: 0;
    list-style-type: none;
    margin: 0;
    width: 70%;
    display: flex;
    justify-content: space-between;
}

.process__header ul li {
    display: inline-block;
    font-size: 16px;
    text-align: center;
    padding: 0 10px;
    font-weight: 700;
    color: white;
}

@media screen and (max-width: 1650px) {
    .process__header ul {
        width: 90%;
    }
    .process__header h1 {
        font-size: 30px;
        line-height: 40px;
    }
    .process__header h2 {
        font-size: 24px;
        margin: 10px 0;
    }
}

@media screen and (max-width: 1300px) {
    .process__header h1 {
        font-size: 26px;
        line-height: 32px;
    }
    .process__header h2 {
        font-size: 20px;
        margin: 10px 0;
    }
    .process__header ul {
        display: none;
    }
    .process__header ul li {
        text-align: center;
        font-size: 16px;
        line-height: 1.8;
    }
}

@media screen and (max-width: 1024px) {
    .process__header ul {
        display: none
    }
}

@media screen and (max-width: 768px) {
    .process__header h1 {
        font-size: 20px;
        line-height: 30px;
    }
    .process__header {
        display: none;
    }
}


/* fin header */


/* steps */

ul.steps {
    padding: 0;
    margin: 15px 0;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

ul.steps:after {
    border-bottom: 1px solid #e8e8e8;
    content: "";
    height: 22px;
    left: 45px;
    position: absolute;
    right: 45px;
    z-index: 1;
}

li.step {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 2;
}

.step__circle {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: inline-block;
    float: none;
    border: 1px solid #ededed;
    background: white;
    font-style: normal;
    height: 45px;
    margin-bottom: 0;
    font-size: 0;
    text-align: center;
    width: 45px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.step__circle .fa {
    font-size: 16px;
    color: #a8a8a8;
    line-height: 45px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.step__name {
    font-size: 13px;
    color: #a8a8a8;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 8px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

@media screen and (max-width: 680px) {
    .step__name {
        font-size: 12px;
    }
}

@media screen and (max-width: 380px) {
    .step__name {
        font-size: 10px;
    }
}


/* active step */

li.step.active .fa {
    color: #2e4770;
}

li.step.active .step__name {
    color: #2e4770;
}

li.step.active .step__circle {
    border: 1px solid #2e4770;
}


/* fin steps */


/* Button */

.button__orange.btn--continue {
    height: 48px;
    color: white;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    padding: 15px 20px;
    margin: 12px 0 0 0;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    display: inline-block;
}
#dlAppLogin {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: flex-start;
    padding: 0 32px;
}
#dlAppLogin svg {
    margin-right: 12px;
    width: 26px;
    height: 26px;
}
.button__orange.orange--secondary {
    background: #fff;
    color: #ef7d00;
    border: 1px solid #ef7d00;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}
.button__orange:hover {
    background: #ff9623;
}
.button__orange.orange--secondary:hover {
    background: #ef7d00;
    color: #fff;
}
.button__green {
    background: #20a720;
    color: white;
    font-size: 16px;
    border-radius: 50px;
    font-weight: 700;
    padding: 15px 20px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    display: inline-block;
}

.button__green:hover {
    background: #1f8b1f;
}

.commune__magasin a .button__green {
    color: white;
    padding: 8px 10px 10px 10px;
    margin-top: 10px;
}


/* Fin Button */


/* Séparateur */

.process__sepa {
    float: left;
    position: relative;
    width: 100%;
    height: 20px;
    text-align: center;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process__sepa span {
    background: white;
    padding: 0 5px;
    font-size: 14px;
    color: #6d6d6d;
    font-weight: 700;
    position: relative;
    z-index: 2;
    text-transform: lowercase;
}

.process__sepa::after {
    position: absolute;
    border-bottom: 1px solid #e8e8e8;
    content: "";
    height: calc(50% - 0.5px);
    left: 0;
    top: 0;
    right: 0;
    z-index: 1;
}


/* Fin séparateur */

.process__text {
    z-index: 2;
    float: left;
    position: relative;
    text-align: center;
    width: 100%;
    color: #1b1b1b;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
}

.process__text a {
    color: #ef7d00;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    text-decoration: underline;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
}

.process__text a:hover {
    color: #ff9623;
}

h2.process__text {
    font-size: 16px;
    font-weight: 700;
}


/* process form */

.inscription fieldset {
    float: left;
    width: 100%;
    border: none;
    padding: 0;
}


/*
#inscriptionMail {
margin-top: 10px;
}
*/

.inscription fieldset input[type=email],
.inscription fieldset input[type=text],
.inscription fieldset input[type=password],
.inscription fieldset textarea {
    float: left;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 400;
    color: #1b1b1b;
    border-radius: 3px;
    height: 46px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
    transition: .1s all ease;
}

.inscription__form fieldset input[type=email],
.inscription__form fieldset input[type=text],
.inscription__form fieldset input[type=password],
.inscription__form fieldset textarea,
.inscription #vueAccueilConnexion fieldset input[type=email],
.inscription #vueAccueilConnexion fieldset input[type=text],
.inscription #vueAccueilConnexion fieldset input[type=password],
.inscription #vueAccueilConnexion fieldset textarea {
    background: #e8f0fe;
}

.inscription fieldset input[type=email]::placeholder,
.inscription fieldset input[type=text]::placeholder,
.inscription fieldset input[type=password]::placeholder,
.inscription fieldset textarea::placeholder,
.inscription #vueAccueilConnexion fieldset input[type=email]::placeholder,
.inscription #vueAccueilConnexion fieldset input[type=text]::placeholder,
.inscription #vueAccueilConnexion fieldset input[type=password]::placeholder,
.inscription #vueAccueilConnexion fieldset textarea::placeholder {
    color: #6d6d6d;
}

.inscription fieldset input[type=text].carte__expiration {
    clear: none;
}

.inscription fieldset input[type=email]:focus,
.inscription fieldset input[type=text]:focus,
.inscription fieldset input[type=password]:focus,
.inscription fieldset textarea:focus {
    outline: 0;
    border-color: #ef7d00;
    background: white;
}

.inscription .box__inscription {
    position: relative;
    z-index: 5;
    display: flex;
}

.process__formItem {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

#cvcItem {
    width: calc(50% - 10px);
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.process__formItem span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #1b1b1b;
    font-weight: 400;
    font-size: 13px;
}


/* fin process form */


/* résumé offre */

.process__resume {
    float: left;
    width: 100%;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.process__resume h2 {
    font-size: 16px;
    color: #ef7d00;
    font-weight: 700;
}

.process__resume p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 5px;
    color: #6d6d6d;
}

.process__resume p span {
    font-weight: 700;
    color: #1b1b1b;
}

.process__resume p a {
    color: #2e4770;
    font-weight: 700;
}


/* fin resume */


/* tooltip */

.tooltip {
    text-align: left;
    display: inline-block;
    position: relative;
}

.tooltip .trigger {
    display: inline-block;
    height: 45px;
    width: 45px;
    border-radius: 45px;
    text-align: center;
    z-index: 1;
    text-decoration: none;
    color: #a8a8a8;
    cursor: help;
    border: 1px solid #ededed;
    margin-left: 15px;
}

.tooltip .trigger .fa {
    font-size: 16px;
    color: #2e4770;
    line-height: 45px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.tooltip .trigger::before {
    content: '';
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    transition: all 150ms ease-in-out;
}

.tooltip .content {
    display: inline-block;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: white;
    box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.2);
    color: #1b1b1b;
    padding: 1em;
    border-radius: 5px;
    width: 280px;
    font-size: 14px;
    transition: all 150ms ease-in-out;
    overflow: visible;
}

.tooltip .content::before {
    content: '';
    width: 14px;
    height: 14px;
    background: white;
    position: absolute;
    bottom: -7px;
    left: calc(50% - 7px);
    transform: rotate(45deg);
    box-shadow: 2px 2px 2px -1px rgba(0, 0, 0, 0.1);
}

.tooltip .trigger::before {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-bottom-color: white;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.tooltip .content {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.tooltip .trigger::before {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.tooltip .content {
    top: 100%;
    left: 0;
}

.tooltip.right .trigger::before {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: white;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.tooltip.right .content {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.tooltip.right .trigger::before {
    border-left: none;
    top: 50%;
    transform: translateY(-50%);
    left: 100%;
}

.tooltip.right .content {
    left: -62px;
    bottom: 50px;
    width: 200px;
}

.tooltip:hover .trigger::before {
    opacity: 1;
    visibility: visible;
}

.tooltip:hover .content {
    opacity: 1;
    visibility: visible;
}

.tooltip .trigger:focus::before {
    opacity: 1;
    visibility: visible;
}

.tooltip .trigger:focus+.content {
    opacity: 1;
    visibility: visible;
}


/* fin tooltip */


/* services list */

.processServices ul {
    padding: 0;
    list-style-type: none;
    display: none;
}

.processServices ul.active {
    display: block;
}

.processServices ul li {
    font-size: 12px;
    color: #1b1b1b;
    margin: 15px 0;
    line-height: 20px;
}

.processServices ul li:last-child {
    margin-bottom: 0;
}

.processServices .circle__tick {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    border: 1px solid #26BB3F;
    text-align: center;
}

.processServices .circle__tick .fa {
    color: #26BB3F;
    line-height: 20px;
    font-size: 11px;
}

#servicesToggle {
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
    display: block;
    color: #2e4770;
    cursor: pointer;
}

#servicesToggle i.fa {
    font-weight: 700;
    float: right;
    font-size: 16px;
    line-height: 19px;
}

#servicesToggle.active i.fa {
    transform: rotate(180deg);
}

.processServices h2 {
    color: #1b1b1b;
    font-weight: 700;
    font-size: 16px;
}

.processServices ul {
    padding: 0;
    list-style-type: none;
    display: none;
}

.processServices ul.active {
    display: block;
}

.processServices ul li {
    font-size: 12px;
    color: #1b1b1b;
    margin: 15px 0;
    line-height: 20px;
}

.processServices ul li:last-child {
    margin-bottom: 0;
}

.processServices .circle__tick {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    border: 1px solid #26BB3F;
    text-align: center;
}

.processServices .circle__tick .fa {
    color: #26BB3F;
    line-height: 20px;
    font-size: 11px;
}

#servicesToggle {
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
    display: block;
    color: #2e4770;
    cursor: pointer;
}

#servicesToggle i.fa {
    font-weight: 700;
    float: right;
    font-size: 16px;
    line-height: 19px;
}

#servicesToggle.active i.fa {
    transform: rotate(180deg);
}


/*
.processServices {
display: none;
}
@media screen and (max-width: 768px) {
.processServices {
  display: block;
}
}
*/


/* services list end*/

.ligne_legal {
    float: left;
    border-bottom: 1px solid #e8e8e8;
    height: 1px;
    width: 100%;
    margin-bottom: 10px
}

.legals {
    font-size: 12px;
    color: #a8a8a8;
    float: left;
    padding: 10px 0;
    padding-bottom: 0;
    text-align: left;
}

.legals.text-center {
    font-family: 'Open sans', sans-serif;
    text-align: center;
    line-height: 1.58;
}

.legals a {
    color: #2f2e2e;
    font-weight: 700;
    text-decoration: underline;
}

/* validation */

#inscriptionEtapeFinale {
    width: 100%;
}

#inscriptionEtapeFinale h2 {
    text-align: center;
    font-weight: 700;
    color: #1b1b1b;
    margin: 20px 0;
}

#inscriptionEtapeFinale p {
    text-align: center;
    font-size: 14px;
}


/* fin validation */

.inscription {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.inscription h3 {
    text-align: left
}

.inscription__header {
    min-width: 100%;
    float: left;
    z-index: 4;
    position: relative;
    margin-top: 40px;
}

.inscription__header h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #1b1b1b;
    font-size: 42px;
    margin-top: 10px;
    margin-bottom: 0;
}

.inscription__header h3 {
    font-family: 'Lato', sans-serif;
    color: #6d6d6d;
    font-size: 20px;
    margin-bottom: 0;
}

.inscription__header p {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    margin-top: 5px;
}

.inscription__header--etape {
    width: 100%;
    display: flex;
    align-items: center;
}

.inscription__header--etape .left-line {
    width: 10%;
    height: 2px;
    background: #ef7d00;
    display: inline-block;
}

.inscription__header--etape .right-line {
    width: 25%;
    height: 2px;
    background: #ef7d00;
    display: inline-block;
}

.inscription__header--etape .etapenumero {
    color: #1b1b1b;
    display: inline-block;
    width: 80px;
    margin-left: 15px;
    margin-right: 15px;
    text-transform: Uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
}

.button__accent {
    position: relative;
    z-index: 4;
    cursor: pointer;
    width: 100%;
    text-align: center;
    background: #ef7d00;
    font-size: 22px;
    margin-top: 24px;
    color: white;
    transition: 0.25s all ease;
    margin-left: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 0;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
}

.button__accent>.l_p {
    font-size: 14px;
}

.offreTable.offreTableOptions {
    background: white;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
}


/* end inscription */

.offre__header {
    width: 100%;
    float: left;
    margin: 30px 0 15px 0;
}

.offre {
    float: left;
    text-align: center;
    background: #2e4770;
    margin-left: 1%;
}

.offre:first-child {
    margin-left: 46%;
}

.offre:last-child {
    float: right;
}

.offre h3 {
    color: white;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.offre__liste {
    width: 100%;
    float: left;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
    font-size: 14px;
}

.offre__liste p {
    margin: 0;
}

.offre__service {
    float: left;
    width: 100%;
    font-family: 'Lato', sans-serif;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.offre__service * .fa {
    font-size: 1.2em;
}

.offre__service--desc {
    color: #1b1b1b;
    width: 46%;
    float: left;
    padding: 10px;
}

.offre__service--desc.offre__detail {
    padding-left: 30px
}

.col__essentiel {
    width: 25%;
    float: left;
    padding: 10px;
    text-align: center;
    color: #666;
}

.col__premium {
    width: 25%;
    float: right;
    margin-left: 1%;
    padding: 10px;
    text-align: center;
    color: #666;
}

.bg__grey {
    background: #cecece;
}

@media screen and (max-width: 625px) {
    .offre__service--desc {
        width: 100%;
        text-align: center;
    }
    .offre__service--desc.offre__detail {
        padding-left: 0
    }
    .col__essentiel {
        width: 50%;
        margin: 0;
    }
    .col__premium {
        width: 50%;
        margin: 0;
    }
    .offre {
        margin: 0;
        width: 48%;
        float: left;
    }
    .offre:last-child {
        width: 48%;
        margin-left: 4%;
    }
    .offre:first-child {
        margin: 0;
    }
}

.offre__service.option__spots {
    padding: 10px;
    text-align: right;
}

#oGex {
    float: left;
    margin-top: 5px;
}

.styled-checkbox {
    position: absolute;
    opacity: 0;
}

.styled-checkbox+label {
    position: relative;
    cursor: pointer;
    padding: 0;
}

.styled-checkbox+label:after {
    content: '';
    margin-left: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: #cecece;
}

.styled-checkbox:hover+label:after {
    background: #2e4770;
}

.styled-checkbox:focus+label:after {
    -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.styled-checkbox:checked+label:after {
    background: #2e4770;
}

.styled-checkbox:disabled+label {
    color: #b8b8b8;
    cursor: auto;
}

.styled-checkbox:disabled+label:after {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #ddd;
}

.styled-checkbox:checked+label:before {
    content: '';
    position: absolute;
    right: 14px;
    top: 10px;
    background: white;
    width: 2px;
    height: 2px;
    -webkit-box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.styled-checkbox+label a {
    color: #2e4770;
    font-weight: 700;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.styled-checkbox+label a:hover {
    color: #96aed4;
}

.inscription__header {
    width: 100%;
    float: left;
    z-index: 4;
    position: relative;
    margin-top: 40px;
}

.inscription__header--etape {
    width: 100%;
    display: flex;
    align-items: center;
}

.inscription__header--etape .left-line {
    width: 10%;
    height: 2px;
    background: #ef7d00;
    display: inline-block;
}

.inscription__header--etape .right-line {
    width: 25%;
    height: 2px;
    background: #ef7d00;
    display: inline-block;
}

.inscription__header--etape .etapenumero {
    color: #1b1b1b;
    display: inline-block;
    width: 80px;
    margin-left: 15px;
    margin-right: 15px;
    text-transform: Uppercase;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
}

.inscription__form {
    position: relative;
    float: left;
    z-index: 4;
    width: 100%;
    min-width: 300px;
    margin-top: 15px;
}

.inscription__form h3 {
    text-align: center;
    font-weight: 700;
    color: #1b1b1b;
}

.inscription--overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.8;
}

.input {
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.input__field {
    position: relative;
    display: block;
    float: right;
    padding: 0.8em;
    width: 60%;
    border: none;
    border-radius: 0;
    background: #f0f0f0;
    color: #aaa;
    font-weight: bold;
    font-family: "Lato", sans-serif;
    -webkit-appearance: none;
    /* for box shadows to show on iOS */
}

.input__field:focus {
    outline: none;
}

.input__label {
    display: block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #666666;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.input__label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
}

.input--inscription {
    margin-top: 24px;
}

.input__field--inscription {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 100;
    display: block;
    padding: 0 0.55em;
    width: calc(100% - 8px);
    height: calc(100% - 8px) !important;
    background: #f0f0f0;
    color: #1b1b1b;
    opacity: 0;
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
}

.input__label--inscription {
    width: 100%;
    text-align: left;
    cursor: text;
}

.input__label--inscription::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__label-content--inscription {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.input__field--inscription:focus,
.input--filled .input__field--inscription {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.first-input {
    transition: 0.27s all ease;
}

.first-input.input--filled {
    margin-top: 40px;
}

.input__field--inscription:focus+.input__label--inscription,
.input--filled .input__label--inscription {
    cursor: default;
    pointer-events: none;
}

.input__field--inscription:focus+.input__label--inscription::before,
.input--filled .input__label--inscription::before {
    -webkit-transform: scale3d(1, 1.5, 1);
    transform: scale3d(1, 1.5, 1);
}

.etape_saisie .input__field--inscription:focus+.input__label--inscription::before,
.etape_saisie .input--filled .input__label--inscription::before {
    -webkit-transform: none;
    transform: none;
}

.input__field--inscription:focus+.input__label--inscription .input__label-content--inscription,
.input--filled .input__label-content--inscription {
    -webkit-transform: translate3d(0, -3.15em, 0) scale3d(0.8, 0.8, 1);
    transform: translate3d(0, -3.15em, 0) scale3d(0.8, 0.8, 1) translateZ(1px);
}

.inscription__form .button__outline--black {
    width: 100%;
    margin-top: 20px;
    text-transform: uppercase;
    padding: 15px 20px;
    border-radius: 50px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}

.button__accent:hover {
    background: #ff9623;
}

.box__offre {
    float: left;
    width: 100%;
    font-family: 'Lato', sans-serif;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
    padding: 30px;
    margin-top: 50px;
}

.box__offre--mgt- {
    margin-top: 30px;
}

.box__offre h2 {
    font-weight: 700;
    margin: 0 0 15px;
    color: #1b1b1b;
    font-size: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 15px;
}

.box__offre h3 {
    color: #2e4770;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 16px;
}

.box__offre p {
    font-size: 15px;
}

.box__offre ul {
    font-size: 15px;
    line-height: 1.4;
}


/* paiement */

.box__paiement {
    float: left;
    width: 100%;
    background: white;
    position: relative;
    z-index: 4;
    font-family: 'Lato', sans-serif;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}

.box__paiement--header {
    padding: 30px 30px 0;
}

.cardHeader__icon {
    float: left;
    margin: 0;
    text-align: center;
    margin-right: 15px;
}

.cardHeader__icon i {
    line-height: 24px;
    font-size: 18px;
    color: #2e4770;
}

.box__paiement--header h2 {
    color: #8d8d8d;
    margin: 0;
    font-size: 20px;
    line-height: 20px;
}

.box__paiement--contenu {
    width: 100%;
    float: left;
    padding: 20px 30px;
}

#SecureBy {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 10px;
}

.box__paiement--contenu img {
    width: 30%;
    margin-top: 15px;
    float: left;
    margin-left: 35%;
}

.box__paiement--form {
    background: white;
    width: 100%;
    float: left;
}

.box_paiement--form input {
    width: 100%;
    height: 40px;
    padding-left: 50px;
}

.paiement__cgv {
    width: 100%;
    margin-top: 20px;
    z-index: 14;
    float: left;
    position: relative;
}

.input__carte {
    position: relative;
    padding: 0;
}

.input__carte input {
    background: #ececec;
    border: none;
    width: 100%;
    height: 40px;
    clear: none;
}

.input__icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    margin-left: 0;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    color: #2e4770;
}

.input__icon i {
    line-height: 40px;
}

.input__carte .carte__numero {
    width: 100%;
    padding-left: 50px;
}

.input__carte {
    margin-top: 10px;
    margin-bottom: 10px;
}

.input__carte p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    color: #2e4770;
    font-weight: 700;
    margin-bottom: 5px;
}

.carte__expiration {
    float: left;
    height: 40px;
}

.carte__cvc {
    height: 40px;
    padding: 5px;
}

.blocOffre-select {
    height: 46px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding-left: 12px;
    padding-right: 32px;
    font-size: 16px;
    color: #1b1b1b;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M14.985%2025.166L2.997%2013.178q-.46-.46-.46-1.11t.46-1.094%201.11-.444%201.094.444l10.784%2010.8%2010.99-10.99q.46-.444%201.11-.444t1.093.444.444%201.094-.443%201.094L17.19%2024.96q-.604.603-1.206.603t-1-.396z%22%20fill%3D%22%23919496%22%20/%3E%3C/svg%3E');
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.blocOffre-select:focus {
    box-shadow: none;
    outline: 0;
    border-color: #ef7d00;
}

#expirationMois {
    margin-right: 10px;
}

.process__formItem #expirationMois,
.process__formItem #expirationAnnee {
    padding-top: 0;
    padding-bottom: 0;
}

.process__formItem #expirationMois,
.process__formItem #expirationAnnee,
.process__formItem #cvc {
    width: calc(50% - 5px);
}

.process__formItem #cvc {
    width: calc(100% - 40px);
}

.process__formItem span.cvc_what i.fa {
    color: #6d6d6d;
}

.blocCb__total {
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.blocCb__total h2,
.blocCb__total .blocCb__total-price span {
    font-size: 1.2rem;
    color: #1b1b1b;
    font-family: 'Open Sans', sans-serif;
}

.blocCb__total h2 {
    font-weight: 700;
}

.blocCb__total .blocCb__total-price {
    font-size: 1.2rem;
    color: #1db954;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}

.blocCb__total .blocCb__total-price span {
    text-decoration: line-through;
}

#debloquerProcess {
    font-size: 14px;
}

#continuerGratuitProcess {
    font-size: 14px;
    background-color: #9d9d9d;
}

#continuerGratuitProcess:hover {
    background-color: #7d7d7d;
}

.button__accent a {
    width: 100%;
    height: 100%;
    display: block;
    padding: .75rem 25.33333333px;
    text-decoration: none;
    color: white;
}

.process__map {
    width: 100%;
    background: white;
    float: left;
    z-index: 5;
    position: relative;
    margin-top: 90px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.process__map--header {
    width: 100%;
    float: left;
    padding: 20px;
}

.process__map--header h2 {
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    margin: 0;
    color: #1b1b1b;
    text-align: center;
}

.type__paiement {
    text-align: center;
    padding: 0;
}

.type__paiement label {
    padding: 20px;
    cursor: pointer;
    width: 100%;
    display: block;
}

.type__paiement h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #1b1b1b;
}

.type__paiement p {
    text-align: center;
    margin: 10px 0;
    font-size: 16px;
    font-weight: 400;
    color: #6d6d6d;
}

.type__paiement a {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #2e4770;
    color: #2e4770;
    font-weight: 700;
    margin-top: 20px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.type__paiement a:hover {
    color: white;
    background: #2e4770;
}

.type__paiement--annuel {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 480px) {
    .type__paiement--annuel {
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        border-left: none;
    }
}

.type__paiement--mensuel h3 {
    color: #2e4770;
}

.type__paiement--annuel h3 {
    color: #ef7d00;
}

.type__paiement--annuel a {
    color: #ef7d00;
    border: 2px solid #ef7d00;
}

.type__paiement--annuel a:hover {
    color: white;
    background: #ef7d00;
}


/* .type__paiement--mensuel p {
margin: 19px 0;
} */

.button__essai {
    background: #6d6d6d;
}

.button__essai:hover {
    background: #9d9d9d;
}


/* fin paiement */

.sticky__bandeau {
    background: #ef7d00;
    background-size: 100%;
    position: relative;
    z-index: 10011;
    border-bottom: 1px solid rgba(255, 255, 255, 0.42);
    padding: 0 15%;
    z-index: 10009;
    height: 70px;
    text-align: center;
}

.sticky__bandeau h3 {
    margin: 0;
    padding: 0;
    line-height: 70px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    color: white;
    display: inline;
}

.sticky__bandeau a {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: white;
    padding: 7px 15px;
    border: 2px solid white;
    border-radius: 35px;
    text-decoration: none;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
}

#sous__menu {
    top: 60px;
}

.section__map {
    position: sticky;
    top: 60px;
    height: 400px;
    margin: 0;
    padding: 0;
}

.sb__mobile {
    display: none;
}

@media screen and (max-width: 1367px) {
    .sticky__bandeau {
        padding: 0 10%;
        height: 50px;
    }
    .sticky__bandeau h3 {
        line-height: 50px;
        font-size: 18px;
    }
    .sticky__bandeau a {
        font-size: 16px;
        padding: 4px 15px;
    }
    .section__map {
        top: 60px;
        height: calc(100vh - 60px);
    }
}

@media screen and (max-width: 991px) {
    .sticky__bandeau {
        padding: 0 5%;
        height: 50px;
    }
    .sticky__bandeau h3 {
        line-height: 50px;
        font-size: 16px;
    }
    .sticky__bandeau a {
        font-size: 14px;
        padding: 6px 15px;
        right: 5%;
    }
}

@media screen and (max-width: 991px) {
    .sb__big {
        display: none;
    }
    .sticky__bandeau.sb__mobile {
        height: 70px;
        display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
    }
    .sticky__bandeau.sb__mobile h3 {
        font-size: 16px;
        line-height: 18px;
        width: 60%;
        text-align: left;
    }
    .sticky__bandeau.sb__mobile a {
        padding: 7px 10px;
        right: 5%;
        font-size: 16px;
        position: absolute;
    }
}

.menu__top {
    top: 0;
}


/* page april marine */

.wrapper__april {
    padding: 30px;
    font-family: 'Lato', sans-serif;
    float: left;
    background: white;
    position: relative;
}

.header__april {
    width: 100%;
    float: left;
    text-align: center;
    text-transform: uppercase;
    padding: 70px 0;
    background: linear-gradient(-45deg, #ef7d00, #ffc931, #ef7d00);
    background-size: 400% 400%;
    -webkit-animation: Gradient 30s cubic-bezier(0.35, 0.36, 0.65, 0.74) infinite;
    -moz-animation: Gradient 30s cubic-bezier(0.35, 0.36, 0.65, 0.74) infinite;
    animation: Gradient 30s cubic-bezier(0.35, 0.36, 0.65, 0.74) infinite;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    100% {
        background-position: 0% 50%
    }
}

.header__april h1,
.header__april p,
.header__april a {
    color: white;
    text-decoration: none;
    text-align: center;
}

.header__april span {
    color: #1b1b1b;
    background: white;
    padding: 5px 10px;
    font-size: 16px;
}

.header__april h1 {
    font-weight: 300;
    font-size: 42px;
    margin: 10px 0;
}

.header__april p {
    font-size: 18px;
}

.header__april a {
    padding: 20px 35px;
    border: 2px solid white;
    border-radius: 45px;
    font-size: 18px;
    display: inline-block;
    margin-top: 20px;
    transition: 0.25s all ease;
}

.header__april a:hover {
    background: white;
    color: #ef7d00;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
}

.offre__april {
    width: 100%;
    float: left;
    background: #f7f7f7;
    padding: 20px 0 50px 0;
}

.offre__april--avantages {
    width: 100%;
    float: left;
    background: #ececec;
    padding: 20px 0 50px 0;
}

.offre__april--header {
    width: 100%;
    float: left;
    text-align: center;
    padding: 30px 0;
    text-transform: uppercase;
}

.offre__april--header span {
    color: #9d9d9d;
    font-size: 16px;
}

.offre__april--acces {
    position: relative;
    width: 100%;
    float: left;
    background: url("/static/photo_site/Fotolia_177790969_Subscription_Monthly_M.jpg") center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 50px 0;
}

.offre__april--acces .offre__april--header {
    z-index: 2;
    position: relative;
}

.offre__april--inscription {
    position: relative;
    float: left;
    width: 100%;
    background: #f7f7f7;
    padding: 50px 0;
}

.april__acces--overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.8;
}

.offre__april .april__subt {
    color: #ef7d00;
    margin-top: 0;
}

.offre__april--inscription .april__subt {
    color: #ef7d00;
    margin-top: 0;
}

.april__subt {
    font-weight: 300;
    font-size: 36px;
    margin: 10px 0;
}

.offre__april--header p {
    text-align: center;
    text-transform: none;
}

.april__cadeau {
    text-align: center;
}

.april__cadeau i {
    color: #2e4770;
    font-size: 4em;
}

.april__cadeau h3 {
    text-transform: uppercase;
    color: #6d6d6d;
    font-size: 20px;
}

.april__cadeau p {
    font-size: 16px;
    color: #6d6d6d;
    text-align: center;
}

.april__cadeaux {
    float: left;
    width: 100%;
    margin: 50px 0 70px 0;
}

.april__gabarit {
    display: block;
    width: 100%;
    margin-bottom: 50px;
    box-shadow: 0 0 70px 0 rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 1680px) {
    .april__gabarit {
        width: 70%;
        margin-left: 15%;
    }
}

.white-card {
    background: white;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 2;
    padding: 30px;
    margin-bottom: 35px;
}

.offre__april--acces .white-card h2 {
    color: #2e4770;
    font-weight: 700;
    font-size: 28px;
}

.offre__april--acces .white-card ul li {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    list-style-type: square;
}

.april__enPlus {
    width: 100%;
    float: left;
    z-index: 2;
    position: relative;
    text-align: center;
    padding: 30px 0;
}

.april__enPlus h2 {
    text-transform: uppercase;
    color: #ef7d00;
    font-size: 28px;
    font-weight: 300;
    margin-top: 0;
}

.april__enPlus p {
    font-size: 18px;
    color: #2b2b2b;
    text-align: center;
}

.april__enPlus span {
    font-size: 14px;
    color: #6d6d6d;
}

.offre__april--acces .offre__april--header span {
    text-transform: initial;
    font-size: 18px;
}

.offre__april--header span.text__blue {
    color: #2e4770;
}

.offre__april--header span.text__orange {
    color: #ef7d00;
}


.inscription__april--left {
    position: relative;
    float: left;
    width: 50%;
    padding: 60px;
}

.inscription__april--right {
    position: relative;
    float: left;
    width: 50%;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v33/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format("woff2");
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

fieldset .input-holder {
    margin: 5px 0;
    float: left;
    width: 100%;
}

#inscription__april {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    overflow: hidden;
}

#inscription__april .input-holder {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 16px;
    float: left;
}

#inscription__april .input-holder:first-child {
    margin-top: 0;
}

#inscription__april input.input-area {
    position: relative;
    float: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    border: none;
    background: transparent;
    border-bottom: 2px solid #cecece;
    transition: all 0.3s ease;
    height: auto;
}

#inscription__april textarea.input-area {
    position: relative;
    float: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    border: none;
    background: transparent;
    border-bottom: 2px solid #cecece;
    transition: all 0.3s ease;
    height: auto;
}

#inscription__april .after {
    position: absolute;
    width: 0;
    z-index: 2;
    height: 2px;
    top: 94%;
    left: 0;
    background: #ef7d00;
    transition: all 0.3s;
}

#inscription__april input.input-area:focus {
    outline: none;
}

#inscription__april textarea.input-area:focus {
    outline: none;
}

#inscription__april label {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 20%;
    color: #6d6d6d;
    font-size: 18px;
    transition: all 0.3s ease;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    left: 0;
}

#inscription__april input.input-area:focus+label {
    top: -12px;
    font-size: 12px;
    color: #ef7d00;
}

#inscription__april input.input-area:focus~.after {
    width: 100%;
}

#inscription__april input.input-area.has-value+label {
    top: -10%;
    font-size: 12px;
    color: #ef7d00;
}

#inscription__april input.input-area.has-value~.after {
    width: 100%;
}

#inscription__april textarea.input-area {
    resize: none;
}

#inscription__april textarea.input-area:focus+label {
    top: -12px;
    font-size: 12px;
    color: #ef7d00;
}

#inscription__april textarea.input-area~.after {
    top: 98%;
}

#inscription__april textarea.input-area:focus~.after {
    width: 100%;
}

#inscription__april textarea.input-area.has-value+label {
    top: -10%;
    font-size: 12px;
    color: #ef7d00;
}

#inscription__april textarea.input-area.has-value~.after {
    width: 100%;
}

#inscription__april .checkbox {
    cursor: pointer;
    position: relative;
    width: 0;
    height: 0;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: 0.2s ease-in;
    float: left;
    margin: 0;
}

#inscription__april .checkbox:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: #F5F5F5;
    border: solid 2px #616161;
    border-radius: 2px;
    transition: 0.2s ease-in;
}

#inscription__april .checkbox:after {
    font-family: 'Material Icons';
    content: 'check';
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    top: 2px;
    left: 2px;
    color: #F5F5F5;
    transform: scale(0);
    transition: 0.2s ease-in;
    margin: 0;
}

#inscription__april .checkbox:checked:after {
    transform: scale(1);
}

#inscription__april .checkbox:checked:before {
    border-color: #ef7d00;
    background-color: #ef7d00;
}

#inscription__april .checkbox-group {
    position: relative;
    width: 100%;
    float: left;
    margin-top: 20px;
    cursor: pointer;
}

#inscription__april .checkbox-group label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    float: left;
}

.inscription__map--indication {
    position: relative;
    width: 100%;
    z-index: 2;
}

.inscription__map--indication h2 {
    margin: 0;
    color: #ef7d00;
    font-size: 14px;
}

.button__april {
    text-align: center;
    margin-top: 30px;
}

.button__april .button__outline,
.button__april .button__orange {
    padding: 20px 30px;
    font-size: 18px;
    text-decoration: none;
    border-radius: 40px;
    width: auto;
    margin: 0;
}

@media screen and (max-width: 1679px) {
    .wrapper__april {
        padding: 15px;
    }
    .offre__april--acces {
        padding: 30px 0;
    }
    #inscription__april input.input-area {
        font-size: 16px;
    }
    #inscription__april label {
        font-size: 16px;
    }
    .inscription__april--left {
        padding: 30px;
    }
}

@media screen and (max-width: 600px) {
    .wrapper__april {
        padding: 0;
    }
    .header__april {
        padding: 30px 15px;
    }
    .header__april h1 {
        font-size: 24px;
    }
    .header__april a {
        padding: 12px 35px;
        font-size: 14px;
    }
    .april__subt {
        font-size: 20px;
    }
    .offre__april--header span {
        font-size: 12px;
    }
    .april__enPlus {
        padding: 30px 15px;
    }
    .april__cadeaux {
        margin: 30px 0 30px 0;
    }
    .april__gabarit {
        margin-top: 20px;
    }
    .offre__april--inscription,
    .offre__april--acces {
        padding: 30px 0;
    }
    .inscription__april--left {
        width: 100%;
        padding: 20px;
    }
    .inscription__april--right {
        width: 100%;
    }
    #inscription__april {
        display: block;
    }
}

.wrapper__april * p {
    margin: 12px 0;
}

.inscription__map--indication input.input__map {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #aaa;
    font-weight: 700;
    padding: 10px;
    width: 100%;
    height: 55px;
    border: none;
    box-shadow: 0 0px 2px 0px rgba(0, 0, 0, 0.1);
    transition: 0.25s all ease;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    outline: none;
}

.inscription__map--indication input.input__map:focus {
    border-bottom: 3px solid #ef7d00;
}

.header__april p.header__april--avantages {
    font-size: 28px;
    width: 100%;
    margin-top: 50px;
    color: #2e4770;
}

.header__april--plus {
    color: white;
    width: 3%;
    font-size: 40px;
}

.header__april--30 {
    display: inline-block;
    width: 30%;
    font-weight: normal;
}

.header__april--34 {
    display: inline-block;
    width: 34%;
    font-weight: normal;
}

@media screen and (max-width: 600px) {
    .header__april p.header__april--avantages {
        font-size: 20px;
        margin-top: 30px;
    }
    .header__april--plus {
        width: 100%;
        font-size: 30px;
    }
    .header__april--30 {
        width: 100%;
    }
    .header__april--34 {
        width: 100%;
    }
}


/* FICHE PRODUIT */

.produit__left {
    width: 25%;
    padding: 30px;
    float: left;
    border-left: none;
}

.article__content.produit__right .produit__title h1 {
    margin-bottom: 0;
}

.produit__title {
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0 0 15px 0;
}

.article__content .produit__title p {
    font-size: 14px;
}

.produit__title * a {
    color: #2e4770;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.article__content.produit__right .produit__title * p {
    font-size: 14px;
}

.produit__title * a:hover {
    color: #355282;
}

.produit__boutique {
    width: 100%;
    float: left;
    background: #ececec;
    padding: 30px;
    position: relative;
}

.produit__boutique--title {
    margin-top: 15px;
}

.produit__boutique--title h3 {
    margin: 10px 0 5px 0;
}

.produit__boutique--title span {
    text-transform: uppercase;
    font-size: 10px;
    color: #2e4770;
    font-weight: 700;
}

.produit__boutique--title a {
    margin-top: 20px;
    border-top-left-radius: 0;
}

@media screen and (max-width: 1500px) {
    .produit__left {
        width: 35%;
    }
}

@media screen and (max-width: 1200px) {
    .produit__left {
        width: 33%;
        padding: 30px;
    }
}

@media screen and (max-width: 768px) {
    .produit__left {
        width: 100%;
        padding: 10px 60px;
    }
    .produit__boutique {
        padding: 20px 5px;
    }
    .produit__boutique--title {
        font-size: 16px;
    }
}

.experience__card {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.15s cubic-bezier(0.21, 0.49, 0.39, 0.84);
    margin: 20px 0;
    animation: appear-card 0.3s forwards;
}

.experience__card:hover {
    transform: scale(1.02);
}

.experience__card .color-overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.experience__card .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 15;
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.experience__card:hover .gradient-overlay {
    opacity: 0.5;
}

.experience__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.experience__card:hover .experience__bg {
    filter: blur(3px);
}

.experience__card--header {
    width: 100%;
    float: left;
    position: relative;
    z-index: 20;
    font-family: 'Lato', sans-serif;
    padding: 20px;
}

.experience__category {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    color: white;
    padding: 5px;
}

.experience__card--header .experience__name {
    color: white;
    margin: 10px 0 0 0;
    font-size: 20px;
}

.experience__place {
    color: white;
    margin: 0;
    font-size: 16px;
}

.experience__card--link {
    position: absolute;
    z-index: 20;
    bottom: 15px;
    right: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
}

.experience__card--link p {
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 14px;
    font-family: 'Lato', sans-serif;
    display: inline-block;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    position: absolute;
    right: 30%;
    margin: 0 10px 0 0;
}

.experience__card--link .line {
    display: inline-block;
    width: 30%;
    height: 1px;
    background: white;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    position: absolute;
    right: 0;
}

.experience__card:hover .experience__card--link p {
    transform: translateX(15px);
}

.experience__card:hover .experience__card--link .line {
    transform: translateX(15px);
}

.experience__card--a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 21;
}

.category--magasin_p {
    background: #3820a7;
}

.category--distrib_m {
    background: #291212;
    /* modifier couleur */
}

.category--camping {
    background: #20a720;
}

.category--guide {
    background: #4a54c0;
}

.category--loueur {
    background: #4a54c0;
}

.category--concessionnaire {
    background: #2e4770;
}

.category--club {
    background: #2e4770;
}

.category--sortie {
    background: #ef7d00;
}

.category--evenement {
    background: #d61a1a;
}

.titre__commune {
    margin-top: 20px;
}

.titre__commune h2 {
    font-size: 18px;
    line-height: 18px;
}

h2.titre__experience {
    font-size: 28px;
    font-weight: 700;
    line-height: 28px;
    color: #2e4770;
    font-family: 'Lato', sans-serif;
    margin-top: 15px;
    text-align: center;
    text-transform: uppercase;
}

h2.titre__experience span {
    color: #ef7d00;
}

p.sub__experience {
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    color: #6d6d6d;
    margin-top: 5px;
    text-align: center;
}

@keyframes appear-card {
    0% {
        opacity: 0;
        transform: translateY(30%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.plusderesultats {
    float: right;
    padding: 10px 0;
    font-size: 15px;
    cursor: pointer;
    color: #2e4770;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.plusderesultats:hover {
    color: #355282;
}

@media screen and (max-width: 1500px) {
    .experience__card {
        height: 250px;
    }
    .experience__card--header .experience__name {
        font-size: 16px;
    }
    .experience__card--header .experience__place {
        font-size: 13px;
    }
    .experience__card--header {
        padding: 14px 10px;
    }
    .experience__card--link p {
        width: 50%;
    }
}


/* Pricing cards NEW */

#offreCards {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing__cards {
    width: 100%;
    float: left;
    z-index: 3;
    padding: 55px 0;
    position: relative;
}

.pricing__cards--overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.8;
}

.pricing__card {
    width: 100%;
    float: left;
    position: relative;
    z-index: 2;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin: 10px 0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #fff;
    padding: 0;
}

.pricing__card:hover {
    box-shadow: 0 0px 15px 10px rgba(0, 0, 0, 0.1);
}

.pricing__card--header {
    text-align: center;
    height: 140px;
    position: relative;
    z-index: 4;
    padding: 15px 10px;
    background: #ef7d00;
}

.pricing__card--header.--dec {
    background: #969595;
}

.pricing__card--header.--lib {
    background: #2e4770;
}

.pricing__card--header h2 {
    font-size: 20px;
    margin: 0;
    margin-top: 5px;
    font-weight: 700;
    color: #fff;
}

.pricing__card--header p {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    margin-bottom: 0;
    margin-top: 12px;
}

.pricing__card--header span.red__tag {
    background: red;
    padding: 5px;
    border-radius: 5px;
    color: white;
    display: inline-block;
    width: auto;
    margin-top: 12px;
}

.pricing__card--header span {
    color: #fff;
}

.pricing__card--header p span {
    font-size: 40px;
    color: #1b1b1b;
    font-weight: 700;
    line-height: 1
}

.pricing__card--header p span.digits {
    font-size: 18px;
}

.pricing__card--content {
    padding: 15px;
    z-index: 4;
    position: relative;
    float: left;
    width: 100%;
}

.pricing__card--content .freeDays {
    height: 30px;
}

.pricing__card--content .freeDays p {
    text-align: center;
}

.pricing__card .pricing__card--service {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 30px;
}

.pricing__card--service i {
    font-size: 16px;
    color: #1b1b1b;
}

.pricing__card--service p {
    display: inline-block;
    font-size: 14px;
    color: #1b1b1b;
    margin: 0;
}

.service--none {
    text-decoration: line-through;
    color: #aaaaaa;
}

.service--none p {
    text-decoration: line-through;
    color: #aaaaaa;
}

.service--none i {
    text-decoration: line-through;
    color: #aaaaaa;
}

.pricing__card--cta {
    text-align: center;
    z-index: 4;
    position: relative;
    float: left;
    width: 100%;
}

.pricing__card--cta a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background: #ef7d00;
    transition: 0.5s;
    border-radius: 50px;
    padding: 1em 2em;
    margin-top: 20px;
    display: block;
    font-size: 15px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    transform: scale(0.95)
}

.pricing__card--cta a:hover {
    background-position: right center;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    transform: scale(1);
    color: white;
    text-decoration: none;
}

.pricing__cgv {
    width: 100%;
    margin-top: 20px;
    z-index: 14;
    float: left;
    position: relative;
    font-family: 'Open sans', sans-serif;
    color: #6d6d6d;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
}

.radio-offre {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
    opacity: 0;
    position: absolute;
}

.radio-offre-label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-offre-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #bbb;
    border-radius: 50%;
    content: '';
    background: #fff;
    border: 2px solid #969595;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    padding: 2px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-offre:checked+.radio-offre-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: #ef7d00;
    color: #fff;
    border: none;
}

.arrow-offre {
    border-radius: 50%;
    background: #fff;
    border: 2px solid #969595;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    padding: 2px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6d6d6d;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.arrow-offre:before {
    content: "\f105";
    font-family: 'FontAwesome';
    border: none;
    font-size: 18px;
}

.pricing__card a.offreLink {
    float: left;
    width: 100%;
    cursor: pointer;
}

.pricing__card a.offreLink:hover .arrow-offre {
    background: #ef7d00;
    border-color: #ef7d00;
    color: white;
    transform: scale(1.15);
}

.price-flex {
    float: left;
    width: 100%;
    display: flex;
    /* align-items: center; */
}

.price-left {
    float: left;
    width: calc(100% - 50px);
}

.price-right {
    float: left;
    margin-top: 20px;
}

.pricing__cta-row {
    grid-column: span 6;
    grid-column-start: 4;
    grid-column-end: 10;
}

.grid-offres .button__green {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
}

.grid-offres .button__green:hover {
    color: white;
    text-decoration: none;
}

.grid-offres .button__green span {
    font-size: 14px;
}

.grid-offres .button__green.decouverte span {
    display: none;
}

.pricing__cta-row p {
    margin-top: 10px;
    color: #1b1b1b;
    text-align: center;
    font-weight: 700;
}

.pricing__cta-row p span {
    background: hsla(0, 0%, 100%, 0.7686274509803922);
    padding: 0 10px;
    border-radius: 3px;
    padding: 2px 4px;
}


/* NEW CLUB */

.header__club {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.header__club .wrapper__video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.header__club .wrapper__photo {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}

.header__club .button__gradient {
    margin-top: 47px;
    font-size: 18px;
    margin-right: 10px;
    border: 2px solid transparent;
    text-transform: none;
}

.header__club .button__gradient.btn__entrerClub {
    background: #ef7d00;
}

.header__club .button__gradient.btn__lireVideo {
    color: #fff;
    background: #2e4770;
    cursor: pointer;
}

.header__club .button__gradient.btn__lireVideo.video__image {
    height: auto;
    position: relative;
    overflow: visible;
    width: auto;
    float: none;
}

.header__club .button__gradient.btn__lireVideo .fa {
    margin-right: 10px;
}

.header__club .button__gradient.button__gradient--blue {
    margin-right: 0px;
    margin-left: 10px;
    background: none;
    color: #2e4770;
    box-shadow: none;
    border: 2px solid #2e4770;
}

.header__club .button__gradient.button__gradient--blue:hover {
    background: #2e4770;
    color: white;
}

.header__club--title {
    position: relative;
    z-index: 3;
    font-family: 'Lato', sans-serif;
    padding: 70px 50px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .header__club .wrapper__video {
        display: none;
    }
    .header__club .wrapper__photo {
        display: block;
    }
    .header__club .button__gradient {
        margin-right: 0px;
        font-size: 16px;
        margin-top: 20px;
    }
    .header__club .button__gradient.button__gradient--blue {
        margin-left: 0px;
    }
    .header__club--title {
        padding: 60px 30px 60px 30px;
    }
    .sticky__cta .btn__lireVideo {
        display: none;
    }
}

.header__club--title h1 {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 40px;
    color: #1b1b1b;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    margin: 0;
    line-height: 1.25;
}

.header__club--title h1 span {
    font-weight: 900;
}

.header__club--title h2 {
    color: #1b1b1b;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 900;
    margin-top: 10px;
    line-height: 1.58;
}

.header__club--overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    top: 0;
    left: 0;
    opacity: 0.5;
    /* modifier selon video */
    z-index: 2;
}

.button__gradient {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(45deg, #f6d365 0%, #ef7d00 51%, #f6d365 100%);
    background-size: 200% auto;
    background-position: left center;
    border-radius: 50px;
    padding: 1em 2em;
    margin-top: 10px;
    display: inline-block;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.4);
}

.commune__title a.button__gradient--mute {
    background: white;
    display: inline-block;
    text-align: center;
    box-shadow: none;
    color: rgba(239, 125, 0, 0.7);
    border: 1px solid rgba(239, 125, 0, 0.7);
    font-size: 13px;
    margin-top: 20px
}

.commune__title a.button__gradient--mute:hover {
    color: white;
    background: rgba(239, 125, 0, 0.7);
    box-shadow: 0 0 40px 2px rgba(239, 125, 0, 0.32);
}

article.commune__villes_alentours {
    float: left;
    display: block;
    padding-bottom: 12px;
}

article.commune__villes_alentours a.ville-alentour {
    float: left;
    display: block;
    font-size: 14px;
    color: #2e4770;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    line-height: 1;
    background: #fff;
    margin: 0 8px 8px 0;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

article.commune__villes_alentours a.ville-alentour:hover {
    background: #f7f7f7;
    border: 2px solid #2e4770;
}

.button__gradient--blue {
    background-image: linear-gradient(70deg, #2e4770 0%, #337ab7 70%);
}

.button__gradient:hover {
    background-position: right center;
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.6);
    transform: scale(1.05);
    color: white;
    text-decoration: none;
}

.formPrise__right {
    /* padding: 15px; */
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.concoursPrise__img {
    display: block;
    width: 100%;
}

.section-title {
    text-align: center;
    margin: 0 0 70px 0;
}

.section-title h1 {
    font-family: 'Lato', sans-serif;
    font-size: 34px;
    color: #666666;
    font-weight: 400;
    margin-bottom: 0;
}

.section-title p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #6d6d6d;
    font-size: 20px;
}

.section-title h1 span {
    font-weight: 700;
    color: #1b1b1b;
}

.service-item {
    font-family: 'Lato', sans-serif;
    text-align: center;
    margin: 20px 0;
}

.service-item h3 {
    font-size: 24px;
    color: #1b1b1b;
    font-weight: 400;
    margin-top: 0;
}

.service-item h3 span {
    font-weight: 700;
}

.service-item p {
    color: #6d6d6d;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin: 10px 0;
    text-align: center;
}

.service-item a {
    text-decoration: none;
    font-weight: 700;
    color: #2e4770;
}

.service-item a:hover {
    color: #5c62ca;
    text-decoration: none;
}

.service-item img {
    height: 100px;
    margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
    .section-title h1 {
        font-size: 26px;
    }
}


/* pricing cards */

.grid-offres {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 8px;
    width: 1200px;
    max-width: 80%;
}

.pricing__card-services {
    grid-column: span 3;
    width: 100%;
    float: left;
    background: #2e4770;
    margin: 10px 0;
    height: fit-content;
    height: -moz-fit-content;
    border-radius: 6px;
    overflow: hidden;
}

.pricing__card-services .pricing__card--header {
    text-align: left;
    color: white;
    font-size: 29px;
    font-weight: 700;
}

.pricing__card-services .pricing__card--service p {
    color: white;
    line-height: 30px;
    font-size: 16px
}

.pricing__card .pricing__card--service p {
    font-weight: 700;
}

.pricing__card--service p.pricing__card-spots {
    color: #20a720;
}

.pricing__card p.pricing__card-pay-in {
    float: left;
    width: 100%;
    margin-top: 10px;
    color: #ee7d33;
}

@media screen and (max-width: 1080px) {
    .pricing__card-services .pricing__card--service p {
        font-size: 15px
    }
}

@media screen and (max-width: 1024px) {
    .pricing__card-services .pricing__card--service p {
        font-size: 14px;
    }
    .pricing__card-services .pricing__card--header {
        font-size: 24px;
    }
}

@media screen and (max-width: 925px) {
    .pricing__card-services .pricing__card--service p {
        font-size: 13px;
        font-size: 13px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
    }
}

.pricing__card--service p .fa-check {
    color: #20a720;
}

.pricing__card--service p .fa-close {
    color: #d61a1a;
}

.pricing__cards {
    width: 100%;
    float: left;
    z-index: 3;
    padding: 50px 0 50px 0;
    background: url(/static/photo_site/header_coindepeche.webp) center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.pricing__cards--overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.8;
}

.pricing__card {
    width: 100%;
    float: left;
    position: relative;
    z-index: 2;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin: 10px 0;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #fff;
    grid-column: span 2;
}

.pricing__card:hover {
    box-shadow: 0 0px 15px 10px rgba(0, 0, 0, 0.1);
    transform: scale(1.01);
}

.pricing__card--header {
    text-align: center;
    height: 140px;
    position: relative;
    z-index: 4;
    float: left;
    width: 100%;
}

.pricing__card--header .pricing__eco {
    font-size: 20px;
}

.pricing__card--price p {
    font-size: 15px;
    color: #1a1a1a;
    margin: 5px 0;
    font-family: 'Open Sans', sans-serif;
}

.pricing__card--price p.mb-10 {
    margin-bottom: 10px;
}

.pricing__card--price p span {
    font-size: 40px;
    color: #1b1b1b;
    font-weight: 700;
    line-height: 1
}

.pricing__card--price p span.digits {
    font-size: 18px;
}

.pricing__card--content {
    padding: 15px;
    z-index: 4;
    position: relative;
}

.pricing__card--service i {
    font-size: 16px;
    color: #1b1b1b;
}

.service--none {
    text-decoration: line-through;
    color: #6d6d6d;
}

.service--none p {
    text-decoration: line-through;
    color: #6d6d6d;
}

.service--none i {
    text-decoration: line-through;
    color: #6d6d6d;
}

.pricing__card--cta {
    text-align: center;
    z-index: 4;
    position: relative;
}

.pricing__card--cta a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background: #ef7d00;
    transition: 0.5s;
    border-radius: 50px;
    padding: 1em 2em;
    margin-top: 20px;
    display: block;
    font-size: 15px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    transform: scale(0.95)
}

.pricing__card--cta a:hover {
    background-position: right center;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    transform: scale(1);
}

.pricing__cgv {
    width: 100%;
    margin-top: 20px;
    z-index: 14;
    float: left;
    position: relative;
    font-family: 'Open sans', sans-serif;
    color: #6d6d6d;
    font-weight: 500;
    font-size: 13px;
    text-align: center;
}

#servicesList {
    padding: 15px 0 50px 0;
    background: #f7f7f7;
}

.cdp__medias * img {
    max-width: 100%;
    display: block;
    float: left;
}

.cdp__medias {
    padding: 30px 0 30px;
    float: left;
    width: 100%;
    position: relative;
    background: #f7f7f7;
}

.cdp__medias .section-title h1 {
    margin-bottom: 30px;
}

.cdp__medias * .btn__icon {
    margin: 50px 0 30px;
    font-size: 14px;
}

.btn__icon i {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 2px solid white;
}

.club__videos {
    margin-bottom: 50px;
    padding: 0;
}

.video__container-club {
    display: block;
    position: relative;
    float: left;
    width: 28%;
    margin-top: 25px;
    cursor: pointer;
}

.video__container-club.video__big {
    width: 36%;
    margin: 0 3%;
    vertical-align: middle;
    display: inline-block;
}

.video__image {
    height: 200px;
    position: relative;
    overflow: hidden;
    width: 100%;
    float: left;
}

.video__big .video__image {
    height: 250px;
}

.video__image .video__bg--img {
    position: absolute;
    width: auto;
    height: 120%;
    max-width: none;
    transition: 1s all ease;
    top: -5%;
    left: -5%;
}

.video__container-club p {
    font-family: 'Lato', sans-serif;
    color: #1b1b1b;
    font-weight: 700;
    display: inline-block;
    margin-top: 5px;
    text-align: center;
}

.video__container-club:hover .video__image .video__bg--img {
    transform: scale(1.1);
}

@media screen and (max-width: 768px) {
    .video__container-club {
        width: 100%;
    }
    .video__container-club.video__big {
        width: 100%;
        margin: 0;
    }
    .video__image .video__bg--img {
        min-width: 100%;
        min-height: 100%;
        height: auto;
    }
    .separator--app path {
        fill: white;
    }
}

.video__image img.video__image--play {
    height: 70px;
    width: 70px;
    position: absolute;
    bottom: 5%;
    left: 5%;
    z-index: 2;
}

.container-services {
    width: 100%;
    padding: 0 15px;
}

.logos__presse {
    margin: 15px 0;
    width: 100%;
}

.wrapper__club.bgWhite {
    background: #fff;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1200px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1200px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1200px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1200px),
only screen and ( min-resolution: 192dpi) and (min-width: 1200px),
only screen and ( min-resolution: 2dppx) and (min-width: 1200px) {
    .wrapper__club {
        padding: 30px;
    }
}

@media screen and (min-width: 1024px) and (min-width: 1323px) {
    .wrapper__club {
        padding: 15px;
    }
}

@media screen and (min-width: 1324px) {
    .wrapper__club {
        padding: 30px;
    }
}

@media screen and (max-width: 768px) {
    .header__club--title h1 {
        font-size: 38px;
    }
    .box__logos-presse {
        flex-wrap: wrap;
    }
    .box__logos-presse img {
        max-width: 30%;
    }
}

@media screen and (max-width: 600px) {
    .header__club--title h1 {
        font-size: 28px;
    }
    .header__club--title h2 {
        font-size: 16px;
    }
}

.box__logos-presse {
    float: left;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.box__logos-presse img {
    min-width: 40px;
}


/* Accueil */

.section-title {
    text-align: center;
    margin: 0;
}

.section-title h2 {
    font-family: 'Lato', sans-serif;
    font-size: 34px;
    color: #666666;
    font-weight: 400;
    margin-bottom: 0;
}

.section-title h2 span {
    font-weight: 700;
    color: #1b1b1b;
}


.outil__content {
    position: relative;
    z-index: 3;
    width: 90%;
}

.outil__title {
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 22px;
    margin-top: 12px;
}

.outil__desc {
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin-top: 12px;
}

.outil__line {
    display: block;
    height: 4px;
    background: white;
    transition: 0.25s all ease;
}

.outil__line--f {
    width: 50px;
}

.outil__line--l {
    position: absolute;
    z-index: 3;
    width: 4px;
    right: 18px;
    bottom: 18px;
    transition: 0.25s all ease;
}

.outil__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: black;
    opacity: 0.5;
}

.outil__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.video-card {
    position: relative;
    height: 280px;
    width: 100%;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    transition: 0.25s all ease;
    padding: 15px;
}

.video-card--small {
    height: 180px;
    margin: 30px 0;
}

.video-card a {
    text-decoration: none;
}

.video-card__play {
    position: absolute;
    z-index: 3;
    right: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
}

.video-card--small .video-card__play {
    width: 30px;
    height: 30px;
}

.video-card__desc {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 80%;
}

.video-card__author {
    position: relative;
    z-index: 3;
    color: white;
    text-decoration: none;
    margin: 0;
    font-size: 14px;
}

.video-card__title {
    position: relative;
    z-index: 3;
    color: white;
    text-decoration: none;
    margin: 0;
    font-size: 18px;
}

.video-card__meta {
    position: relative;
    z-index: 3;
    color: white;
    text-decoration: none;
    font-size: 16px;
}

.video-card--small .video-card__author {
    font-size: 10px;
}

.video-card--small .video-card__title {
    font-size: 13px;
}

.video-card--small .video-card__meta {
    font-size: 12px;
}

.video-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
    transition: 0.25s all ease;
}

.video-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: 0.25s all ease;
}

.video-card:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.video-card:hover .video-card__bg {
    filter: blur(3px);
}



.pad__none {
    padding: 0;
}


.video-card {
    margin: 15px 0;
}

.video-card--small {
    margin: 15px 0;
}


@media screen and (max-width: 991px) {
    .section-title h2 {
        font-size: 28px;
    }
    .formPrise__right {
        /* padding: 15px; */
        border-left: none;
    }
}

@media screen and (max-width: 680px) {
    .section-title h2 {
        font-size: 24px;
    }
    .video-card .video-card__author {
        font-size: 10px;
    }
    .video-card .video-card__title {
        font-size: 13px;
    }
    .video-card .video-card__meta {
        font-size: 12px;
    }
    .video-card {
        height: 180px;
    }
    .video-card .video-card__play {
        width: 30px;
        height: 30px;
    }
}

.separator {
    width: 100%;
    float: left;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

.sideCta {
    position: relative;
    background: white;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    padding: 30px 20px 20px 20px;
    width: 100%;
    float: left;
    position: relative;
    z-index: 2;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border-radius: 3px;
    position: relative;
    background: linear-gradient(70deg, #ef7d00 0%, #f6d365 70%);
}

.sideCta:after {
    content: " ";
    position: absolute;
    top: 10px;
    left: 0px;
    width: 100%;
    height: calc(100% - 10px);
    background-color: white;
    z-index: 1;
}

.sideCta h2 {
    padding: 0 0 25px 0;
    margin: 0;
    font-size: 1.1vw;
    z-index: 2;
    position: relative;
    color: #ef7d00;
    font-weight: 700;
    font-family: 'Open sans', sans serif;
}

.sideCta a {
    z-index: 2;
    position: relative;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(45deg, #f6d365 0%, #ef7d00 51%, #f6d365 100%);
    transition: 0.5s;
    background-size: 200% auto;
    padding: 1em 2em;
    margin-top: 0;
    display: inline-block;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    width: 100%;
    text-align: center;
}

.sideCta a:hover {
    background-position: right center;
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
    color: white;
    text-decoration: none;
}

.articleCta {
    position: relative;
    background: white;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    padding: 30px;
    width: 100%;
    float: left;
    position: relative;
    z-index: 2;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border-radius: 3px;
    position: relative;
}

.wrapper__text .articleCta h2 {
    margin: 0;
    font-size: 24px;
    z-index: 2;
    position: relative;
    color: #2e4770;
}

.articleCta p {
    position: relative;
    z-index: 2;
}

.articleCta a {
    z-index: 2;
    position: relative;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(45deg, #2e4770 0%, #337ab7 51%, #2e4770 100%);
    transition: 0.5s;
    background-size: 200% auto;
    padding: 1em 2em;
    margin-top: 20px;
    display: inline-block;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.articleCta a:hover {
    background-position: right center;
    color: white;
    text-decoration: none;
}

h2.titre__experience {
    font-size: 28px;
    line-height: 28px;
    color: #2e4770;
    font-family: 'Lato', sans-serif;
    margin-top: 15px;
    margin-bottom: 0;
}

p.sub__experience {
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    color: #6d6d6d;
    margin-top: 5px;
    margin-bottom: 0;
}

.title__caps {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 40px;
    color: #1b1b1b;
    margin: 0;
}

.title__caps span {
    font-weight: 900;
}

.experience__search {
    font-family: 'Lato', sans-serif;
    color: #aaa;
    font-weight: 700;
    float: left;
    width: 100%;
    height: 60px;
    margin-top: 15px;
    margin-bottom: 30px;
    box-shadow: 0 0px 10px 3px rgba(0, 0, 0, 0.1);
    transition: 0.25s all ease;
}

.experience__search input[type="text"] {
    height: 60px;
    z-index: 10;
    position: relative;
    display: block;
    float: left;
    width: 85%;
    padding: 15px;
    border: none;
    font-family: 'Lato', sans-serif;
    color: #aaa;
    font-weight: 700;
    border: none;
    margin-top: 0;
}

.experience__search input[type="submit"] {
    color: white;
    height: 60px;
    width: 15%;
    margin: 0;
    text-decoration: none;
    background: #ef7d00;
    transition: 0.5s;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    cursor: pointer;
}

.experience__search input[type="submit"]:hover {
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.3);
    background: #ff9623;
    text-decoration: none;
}


/** Custom Select **/

.custom-select-wrapper {
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
    height: 60px;
    width: 20%;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.custom-select-wrapper select {
    display: none;
}

.custom-select {
    position: relative;
    display: block;
    float: left;
    height: 100%;
    width: 100%;
}

.custom-select-trigger {
    position: relative;
    display: block;
    color: #aaa;
    cursor: pointer;
    background: white;
    line-height: 60px;
    padding: 0 15px;
    z-index: 10;
}

.custom-select-trigger:after {
    position: absolute;
    display: block;
    content: '';
    width: 10px;
    height: 10px;
    top: 50%;
    right: 25px;
    margin-top: -3px;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
    transform: rotate(45deg) translateY(-50%);
    transition: all .4s ease-in-out;
    transform-origin: 50% 0;
}

.custom-select.opened .custom-select-trigger:after {
    margin-top: 3px;
    transform: rotate(-135deg) translateY(-50%);
}

.custom-options {
    position: absolute;
    z-index: 9;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 100%;
    box-sizing: border-box;
    background: #fff;
    transition: all .4s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
    box-shadow: 0 0px 10px 3px rgba(0, 0, 0, 0.1);
}

.custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.option-hover:before {
    background: #f9f9f9;
}

.custom-option {
    position: relative;
    display: block;
    padding: 0 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 600;
    color: #1b1b1b;
    line-height: 47px;
    cursor: pointer;
    transition: all .4s ease-in-out;
}

.custom-option:hover,
.custom-option.selection {
    background: #f1f1f1;
}

.row__experience {
    margin: 30px 0;
}

.section__left {
    background: #efefef;
    padding: 50px;
    box-shadow: 6px 0px 7px 1px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

#experienceMap {
    /*height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.25s all ease;*/
    width: 100%;
    height: 400px;
    margin: 30px 0;
}

.commune__main #experienceMap {
    width: 100%;
    float: left;
    height: calc(100vh - 245px);
}

#experienceMap.open {
    filter: blur(3px);
}

#content_expe {
    position: absolute;
    left: 50%;
    top: 50%;
    background: white;
    width: 65%;
    max-width: 350px;
    opacity: 0;
    transform: translate(-50%, -35%);
    display: block;
    overflow: hidden;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
    transition: 0.25s all ease;
}

#content_expe.open {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.expeMap__header {
    width: 100%;
    float: left;
    max-height: 170px;
    overflow: hidden;
}

.expeMap__header img {
    width: 100%;
}

.closeExpe {
    height: 30px;
    width: 30px;
    position: absolute;
    z-index: 4;
    right: 8px;
    top: 8px;
    line-height: 20px;
    background: white;
    text-align: center;
    border-radius: 30px;
    cursor: pointer;
}

.closeExpe span {
    line-height: 30px;
    font-size: 18px;
    color: #1b1b1b;
}

.closeExpe span:hover {
    color: #ef7d00;
}

.button__gradient.button__gradient--map {
    display: none;
    position: absolute;
    z-index: 2;
    padding: 0.75em 2em;
    font-size: 14px;
    left: 50%;
    transform: translateX(-50%);
    background-image: linear-gradient(70deg, #2e4770 0%, #337ab7 70%);
}

.button__gradient.button__gradient--mobile {
    position: fixed;
    font-size: 14px;
    bottom: 30px;
    right: 30px;
    z-index: 50;
    background-image: linear-gradient(70deg, #2e4770 0%, #337ab7 70%);
    display: none;
}

@media screen and (min-width: 1600px) {
    .button__gradient--map.button__gradient--map {
        padding: 1em 2em;
        font-size: 14px;
    }
}

@media screen and (max-width: 1600px) {
    .section__left {
        padding: 50px 15px;
    }
    .experience__search input[type="text"] {
        width: 55%;
    }
    .custom-select-wrapper {
        width: 30%
    }
}

@media screen and (max-width: 1240px) {
    .button__gradient--map.button__gradient--map {
        transform: translateX(-27%);
    }
}

@media screen and (max-width: 1200px) {
    .experience__search input[type="text"] {
        font-size: 13px;
        width: 50%;
    }
    .experience__search input[type="submit"] {
        width: 20%;
    }
    .custom-select-wrapper {
        font-size: 12px;
    }
    .custom-option {
        font-size: 12px;
    }
}

@media screen and (max-width: 991px) {
    .button__gradient.button__gradient--mobile {
        display: block;
    }
    .section__map {
        display: none;
    }
}

@media screen and (max-width: 680px) {
    .experience__search {
        height: 50px;
    }
    .experience__search input[type="text"] {
        width: 70%;
        height: 50px;
    }
    .custom-select-wrapper {
        width: 30%;
        height: 50px;
    }
    .custom-select-trigger {
        line-height: 50px;
    }
    .experience__search input[type="submit"] {
        width: 20%;
        height: auto;
        margin-top: 16px;
    }
    .custom-select-trigger {
        padding: 0 30px 0 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .custom-select-trigger:after {
        right: 15px;
    }
    .experience__search input[type="text"] {
        padding: 0 15px;
    }
    .experience__search input[type="submit"] {
        width: 100%;
    }
    .custom-options {
        left: auto;
        width: 250%;
    }
    .hide__m {
        display: none;
    }
    .section__left {
        padding: 30px 0;
    }
    .title__caps {
        font-size: 28px;
    }
    .button__gradient.button__gradient--mobile {
        bottom: 15px;
        right: 15px;
        font-size: 11px;
        padding: 1.2em 2.4em;
    }
}

.expeMap__content {
    text-align: center;
    float: left;
    width: 100%;
    padding: 15px;
    font-family: 'Lato', sans-serif;
}

.expeMap__title {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.expeMap__content h3 {
    color: #1b1b1b;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

.expeMap__content h1 {
    font-size: 16px;
    color: #6d6d6d;
}

.expeMap__content p {
    margin: 10px 0;
}

.expeMap__content a {
    color: #337ab7;
    font-weight: 700;
}

.expeMap__content a:hover {
    color: #2e4770;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
}

.swiper-slide>.experience__card {
    height: 250px;
    margin: 0 auto;
}

.hide {
    display: none;
}

.toggleFonds {
    display:none;
    position: absolute;
    left: 10px;
    top: 10px;
    background: white;
    padding: 7px;
    color: #4e4e4e;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.toggleFonds:hover {
    background: rgb(235, 235, 235);
}

#toggleFonds__square {
    height: 10px;
    width: 10px;
    display: inline-block;
    background: white;
    border: 1px solid #4e4e4e;
    margin-right: 10px;
    border-radius: 1px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.toggleFonds.active {
    color: #2e4770;
}

.toggleFonds.active #toggleFonds__square {
    background: #2e4770;
}

#spotsMap .eventAlert {
    top: auto;
    left: auto;
    left: 15px;
    bottom: 71px;
    float: left;
    border-radius: 4px;
    overflow: hidden;
}
#spotsMap .eventAlert__content {
    background: white;
}
#spotsMap .eventAlert__content p {
    color: #1B1B1B;
}
#spotsMap .leaflet-top {
    top: 50%;
    transform: translateY(-50%);
}
.unlockSpots {
    position: absolute;
    left: 50%;
    top: 10px;
    font-size: 17px;
    background: #ef7d00;
    padding: 10px 15px;
    color: white;
    cursor: pointer;
    transform: translateX(-50%);
    border-radius: 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    text-align: center;
}

.unlockSpots:hover {
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4);
    background: #ff9623;
}

.unlockSpots__oupecher {
    z-index: 9;
    /*  animation-duration: 1s;
animation-name: shaker;
animation-delay: 3s;
animation-iteration-count: infinite; */
    background-image: linear-gradient(45deg, #f6d365 0%, #ef7d00 51%, #f6d365 100%);
    transition: 0.5s;
    background-size: 200% auto;
}

.unlockSpots__oupecher:hover {
    background-image: linear-gradient(45deg, #f6d365 0%, #ef7d00 51%, #f6d365 100%);
    background-position: right center;
    background-size: 200% auto;
}

@keyframes shaker {
    0% {
        transform: rotate(0deg);
    }
    29% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(1deg);
    }
    31% {
        transform: rotate(2deg);
    }
    33% {
        transform: rotate(1deg);
    }
    35% {
        transform: rotate(0deg);
    }
    37% {
        transform: rotate(-1deg);
    }
    39% {
        transform: rotate(-2deg);
    }
    41% {
        transform: rotate(-1deg);
    }
    43% {
        transform: rotate(0deg);
    }
    45% {
        transform: rotate(1deg);
    }
    47% {
        transform: rotate(2deg);
    }
    49% {
        transform: rotate(1deg);
    }
    51% {
        transform: rotate(0deg);
    }
    53% {
        transform: rotate(-1deg);
    }
    55% {
        transform: rotate(-2deg);
    }
    57% {
        transform: rotate(-1deg);
    }
    59% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@media screen and (max-width: 1367px) {
    .unlockSpots {
        font-size: 14px;
    }
}

@media screen and (max-width: 800px) {
    .unlockSpots {
        margin-top: 50px;
    }
    #spotsMap .unlockSpots {
        margin-top: 0;
    }
}

.buttonEssai__faq {
    position: fixed;
    right: 0;
    top: 50%;
    background: #ef7d00;
    padding: 35px 30px;
    z-index: 2;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-weight: 700;
}

.buttonEssai__faq:hover {
    background: #ff9623;
}

.buttonEssai__faq span {
    width: 50px;
    transition: 0.15s all ease-out;
}

.buttonEssai__faq span::before {
    display: block;
    transition: 0.25s all ease-out;
}

.buttonEssai__faq:hover span::before {
    transform: translateX(30%)
}

@media screen and (max-width: 1200px) {
    .buttonEssai__faq {
        position: fixed;
        right: 0;
        top: 50%;
        background: #ef7d00;
        padding: 45px 20px;
        z-index: 2;
        transform: translateY(-50%);
        color: white;
        font-size: 18px;
        font-family: 'Lato', sans-serif;
        transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
        font-weight: 700;
    }
}

@media screen and (max-width: 680px) {
    .buttonEssai__faq {
        position: fixed;
        right: 0;
        top: 80%;
        background: #ef7d00;
        padding: 35px 20px;
        z-index: 2;
        color: white;
        font-size: 18px;
        font-family: 'Lato', sans-serif;
        transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
        font-weight: 700;
    }
}


/* Concours */

.card__concours--banner {
    width: 100%;
    margin: 0;
    float: left;
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 100%;
    background: #2e4770;
}

.card__concours--banner img {
    width: 100%;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.card__concours--title {
    float: left;
    width: 100%;
    padding: 15px;
    padding-bottom: 0;
}

.card__concours--title h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #1b1b1b;
    margin: 0;
}

.card__concours--statut {
    color: white;
    display: inline-block;
    margin: 5px 0 0 0;
    padding: 5px;
    border-radius: 3px;
    font-size: 15px;
    transition: 0.25s all ease;
}

.card__concours--open {
    background: #20a720;
}

.card__concours--end {
    background: #d61a1a;
}

.card__concours--soon {
    background: #f9d411;
}

.card__concours--close {
    background: #306bc9;
}

.card__concours--details {
    float: left;
    width: 100%;
    padding: 15px 15px;
    position: relative;
    display: block;
}

.concours__detail {
    float: left;
    font-size: 14px;
    color: #6d6d6d;
    width: 100%;
}

.concours__detail .fa {
    width: 20px;
    text-align: center;
    color: #2e4770;
}

.card__concours:hover .card__concours--banner img {
    filter: blur(3px);
}

.card__concours--list {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    float: left;
    width: 100%;
}

.card__concours--list.concours__lies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 16px;
    margin: 7.5px 0;
}

.card__concours {
    position: relative;
    background: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    box-shadow: 10px 10px 16px rgba(55, 84, 170, 0.05), -10px -10px 18px #f1f1f1;
    float: left;
    border-radius: 4px;
    overflow: hidden;
}
.card__concours .tag-orga {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: white;
    border-radius: 3px;
    padding: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1b1b1b;
}
.card__concours--list .card__concours {
    background: #fff;
    vertical-align: top;
    float: none;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
    -webkit-box-flex: 1;
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
    min-width: 300px;
    max-width: 50%;
    margin: 16px;
}

.card__concours .button__orange {
    display: inline-block;
    margin-bottom: 0;
    width: auto;
}

.card__concours--list.concours__lies .card__concours {
    margin: 0;
}

@media screen and (max-width: 991px) {
    .card__concours--list .card__concours {
        max-width: 100%;
    }
}

.concours__container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    padding-top: 10px;
}

.concours__container .concours__main {
    max-width: 1300px;
}

.concours__bannerInner {
    width: 100%;
    height: 230px;
    background: #2e4770;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 32px;
    height: 100%;
    background: transparent;
    min-height: 230 px;
    position: absolute;
}
.concours__bannerInner p {
    color: white;
    font-size: 28px;
    text-align: center;
}

.card__concours--banner.TAC {
    background-image: url(/static/photo_site/tac-header.jpeg);
    background-size: cover;
    background-position: bottom right;
}
.card__concours:hover .card__concours--banner.TAC img,
.card__concours:hover .card__concours--banner.FFPS img {
    filter: blur(0);
}
.card__concours--banner.TAC .tac-inner {
    background: rgb(6 6 6 / 18%);
    padding: 12px;
    backdrop-filter: blur(4px);
    border-radius: 4px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: .15s all ease;
}
.card__concours:hover .card__concours--banner.TAC .tac-inner {
    transform: scale(1.02);
}
.card__concours--banner.TAC .concours__bannerInner img {
    max-height: 100px;
    width: auto;
}

.card__concours--banner.TAC .concours__bannerInner p {
    font-size: 18px;
    font-weight: 700;
    color: white;
}
.card__concours--banner.TAC .tac-inner span.tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    background: #0d56c2;
    color: white;
    margin-top: 6px;
    font-size: 12px;
}
.card__concours--banner.FFPS {
    background-image: url(/static/photo_site/bg-ffps.jpg);
    background-position: bottom right;
    background-size: cover;
}
.card__concours--banner.FFPS .concours__bannerInner .ffps-inner { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card__concours--banner.FFPS .concours__bannerInner img {
    max-height: 100px;
    width: auto;
    margin-bottom: 24px;
}

.card__concours--banner.FFPS .concours__bannerInner .ffps-inner p {
    font-size: 18px;
    font-weight: 700;
}

.card__concours--banner.Decathlon{
    background: #1164a6;
}

.card__concours--banner.Decathlon,
.card__concours--banner.TAC,
.card__concours--banner.FFPS {
    height: 0;
    padding-bottom: 100%;
}
.card__concours--banner.Decathlon .concours__bannerInner,
.card__concours--banner.TAC .concours__bannerInner,
.card__concours--banner.FFPS .concours__bannerInner {
    height: 100%;
    background: transparent;
    min-height: 230px;
    position: absolute;
}
.card__concours--banner.Decathlon .concours__bannerInner p {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

.concours-orga {
    font-size: 14px;
    font-weight: 500;
}
.concours__inscription--mode .button__orange {
    margin-top: 10px;
}



.concours__main {
    float: left;
    width: 100%;
}

.concours__retourListe {
    position: absolute;
    top: 30px;
    left: 30px;
    color: white;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5em 1.2em;
    font-size: 16px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.concours__retourListe .fa {
    width: 20px;
    font-size: 14px;
}

.concours__retourListe:hover {
    background: rgba(0, 0, 0, 0.2);
}

.concours__retourListe .fa:before {
    margin-left: 5px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.concours__retourListe:hover .fa:before {
    margin-left: 0;
}


.concours__thumb {
    float: left;
    width: 120px;
    transition: 0.25s all ease;
}

.concours__thumb img {
    max-width: 100%;
}

.concours__title {
    float: left;
    padding: 15px 30px;
}

.concours__title h1 {
    margin: 0;
    color: #1b1b1b;
    font-family: 'Lato', sans-serif;
    font-size: 32px;
    transition: 0.25s all ease;
}

.concours__title .concours--details {
    margin-bottom: 15px;
    float: left;
    width: 100%;
    transition: 0.25s all ease;
}

.concours__title .concours__detail {
    width: auto;
    margin-right: 15px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    transition: 0.25s all ease;
}

.concours__inscription {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(45deg, #f6d365 0%, #ef7d00 51%, #f6d365 100%);
    transition: 0.5s;
    background-size: 200% auto;
    border-radius: 50px;
    padding: 1em 2em;
    display: inline-block;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    margin: 0;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.concours__inscription:hover {
    text-decoration: none;
    color: white;
    background-position: right center;
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%);
}

.concours__subtitle {
    display: inline-block;
    font-family: 'Lato', sans-serif;
    color: #666666;
    font-size: 22px;
    margin-top: 0;
    line-height: 24px;
    margin-bottom: 10px;
}

.concours__subtitle span {
    font-weight: 700;
    color: #1b1b1b;
}

.concours__desc p {
    margin: 1em 0;
}

.concours__desc h3 {
    margin-top: 18px;
    margin-bottom: 8px;
}

.concours__sub {
    background: #ececec;
}

.concours__rLink {
    float: right;
    color: #2e4770;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    align-items: center;
}

.concours__rLink .fa {
    margin-left: 4px;
}

.concours__nav {
    padding: 0;
    list-style-type: none;
    margin: 0;
}

.concours__nav--item {
    font-size: 16px;
    font-weight: 700;
}

.concours__nav--item a {
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    color: #2b2b2b;
}

.concours__nav--item a:hover {
    color: #355282;
}

.concours__nav--item .fa {
    margin-right: 8px;
}

.concours__nav--item a:hover .fa {
    color: #355282;
}

.concours__download {
    background: #20a720;
    padding: 1em 2em;
    color: white;
    font-weight: 700;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    display: inline-block;
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concours__download .fa {
    margin-right: 15px;
}

.concours__download:hover {
    text-decoration: none;
    color: white;
    background: #187c18;
}

.concours__sub .gallery {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}


.concours__inscription--box {
    font-family: 'Lato', sans-serif;
    clear: both;
    padding: 30px;
    width: 50%;
    float: left;
    margin-left: 25%;
    background: white;
    box-shadow: 0px 1px 11px rgba(0, 0, 0, 0.2);
}

.concours__inscription--box h1 {
    margin: 0;
    color: #ef7d00;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.concours__inscription--box h2 {
    font-size: 22px;
    margin: 0;
    color: #6d6d6d;
    padding-bottom: 15px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.concours__inscription--box p {
    margin: 10px 0;
}

.concours__inscription--mode {
    margin: 10px 0;
    float: left;
    width: 100%;
}

.concours__inscription--mode .button__gradient {
    font-size: 14px;
    margin-top: 0;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.1);
    text-transform: none;
    border-radius: 0;
}

.concours__inscription--mode .button__gradient:hover {
    transform: none;
}

#PostPriseConcours h2 {
    margin-bottom: 0;
}

#PostPriseConcours .concours__priseInput:first-child {
    margin-top: 0;
}

#PostPriseConcours .button__orange {
    text-align: center;
}

#PostPriseConcours .button__blue {
    width: 100%;
}

input[type=text].concours__priseInput,
textarea.concours__priseInput {
    width: 100%;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    border: 1px solid #cecece;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-align: left;
    margin: 10px 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

textarea.concours__priseInput {
    resize: vertical;
}

input[type=text].concours__priseInput:focus,
textarea.concours__priseInput:focus {
    outline: none;
    border: 1px solid #2e4770;
}

.button__gradient--prise {
    width: 100%;
    text-align: center;
    padding: 0.7em;
    margin: 10px 0;
    box-shadow: none;
    border-radius: 0;
}

.button__gradient--prise:hover {
    background-position: right center;
    box-shadow: none;
    transform: none;
    text-decoration: none;
}

.concours__validePrise {
    font-family: 'Lato', sans-serif;
    line-height: 24px;
    background: #20a720;
    color: white;
    padding: 15px;
    font-size: 16px;
}

@media screen and (max-width: 1500px) {
    .card__concours--title h2 {
        font-size: 16px;
    }
    .concours__inscription {
        font-size: 15px;
    }
    .concours__nav--item {
        font-size: 14px;
    }
}

@media screen and (max-width: 1024px) {
    .concours__inscription--box {
        width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 767px) {
    .md-12.commune__title {
        float: left;
    }
    .concours__nav--item {
        margin-bottom: 5px;
        font-weight: 700;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 0;
    }
    .concours__inscription {
        position: fixed;
        bottom: 30px;
        right: 30px;
        transform: none;
        top: auto;
        z-index: 4;
    }
    .concours__subtitle {
        float: left;
        width: 100%;
        margin-bottom: 0;
    }
    .concours__rLink {
        float: left;
        margin-bottom: 15px;
    }
}

@media screen and (min-width: 768px) {
    .card__concours--list {
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
    .concours__lies .card__concours {
        margin: 13px 0;
    }
}

.box__pad {
    padding: 30px;
}


.concours__classement {
    float: left;
    width: 100%;
    background: white;
}

.concoursClassement__row {
    float: left;
    width: 100%;
    display: flex;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    background: white;
}

.concoursClassement__rang {
    float: left;
    width: 80px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.concoursClassement__nom {
    float: left;
    width: calc(50% - 40px);
    font-size: 16px;
    padding: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.concoursClassement__nom p {
    font-size: 16px;
    margin: 0;
    color: #313131;
    font-weight: 700;
}

.concoursClassement__nom .concoursClassement__team {
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
}

.concoursClassement__sponsors {
    font-size: 14px;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
}

.concoursClassement__score {
    float: left;
    width: calc(50% - 40px);
    text-transform: uppercase;
    padding: 10px;
    text-align: right;
    display: flex;
    align-items: center;
}

.concoursClassement__score p {
    text-align: right;
    width: 100%;
    font-size: 15px;
}

.concoursClassement__menu {
    background: #2e4770;
    float: left;
    width: 100%;
}

.concoursClassement__menu a {
    color: white;
    font: 400 16px/1.2 'Open Sans';
    padding: 15px;
    float: left;
    display: block;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.concoursClassement__menu a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.concoursClassement__menu a.selected {
    background: rgba(255, 255, 255, 0.1);
}

.concoursClassement__header .concoursClassement__rang {
    background: #313131;
    color: white;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    text-transform: none;
    font-size: 15px;
}

.concoursClassement__header .concoursClassement__nom {
    background: #313131;
    color: white;
    text-transform: none;
    font-size: 15px;
}

.concoursClassement__header .concoursClassement__score {
    background: #313131;
    color: white;
    text-transform: none;
}

.concoursClassement__header .concoursClassement__score p {
    margin: 0;
    font-size: 15px;
}

.concoursClassement__header .concoursClassement__prise,
.concoursClassement__header .concoursClassement__taille,
.concoursClassement__header .concoursClassement__points {
    background: #313131;
    color: white;
    text-transform: none;
    font-size: 15px;
    padding: 15px 8px;
    float: left;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.concoursClassement__prise,
.concoursClassement__taille,
.concoursClassement__points {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox, Chrome, Opera */
    -webkit-align-items: center;
    /* Safari 7.0+ */
    align-items: center;
}

.concoursClassement__prise {
    width: 60%;
    background: #ececec;
}

.concoursClassement__prise a {
    float: left;
    display: block;
    width: 35%;
}

.concoursClassement__prise img {
    width: 100%;
    display: block;
    float: left;
}

.concoursClassement__prise p {
    display: block;
    float: left;
    width: 65%;
    padding-left: 15px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #313131;
}

.concoursClassement__prise p .concoursClassement__prise--date {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

.concoursClassement__taille {
    width: 20%;
    padding-left: 8px;
    background: #f7f7f7;
}

.concoursClassement__taille p {
    text-align: right;
    width: 100%;
    padding: 0 15px;
}

.concoursClassement__points {
    width: 20%;
    padding-left: 8px;
    background: #f7f7f7;
}

.concoursClassement__points p {
    text-align: right;
    width: 100%;
    padding: 0 15px;
}

.concoursClassement__link {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #313131;
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.concoursClassement__link:hover {
    opacity: 0.05;
}

@media screen and (max-width: 1368px) {
    .concoursClassement__nom p {
        font-size: 14px;
    }
    .concoursClassement__nom .concoursClassement__team {
        font-size: 12px;
    }
    .concoursClassement__score p {
        font-size: 14px;
    }
    .concoursClassement__sponsors {
        font-size: 12px;
    }
    .concoursClassement__prise p {
        font-size: 14px;
    }
    .concoursClassement__taille p {
        font-size: 14px;
    }
    .concoursClassement__points p {
        font-size: 14px;
    }
    .concoursClassement__prise p .concoursClassement__prise--date {
        font-size: 12px;
    }
}

@media screen and (max-width: 680px) {
    .concoursClassement__row .concoursClassement__header {
        display: none;
    }
    .concoursClassement__header .concoursClassement__taille {
        display: none;
    }
    .concoursClassement__header .concoursClassement__points {
        display: none;
    }
    .concoursClassement__row.concoursDetail__prise {
        display: block;
    }
    .concoursClassement__prise {
        display: block;
        width: 100%;
        background: white;
    }
    .concoursClassement__prise a {
        width: 100%;
    }
    .concoursClassement__prise p {
        font-size: 18px;
        width: 100%;
        padding: 15px;
    }
    .concoursClassement__taille {
        padding-left: 0;
        width: 100%;
        background: white;
    }
    .concoursClassement__taille p {
        font-size: 16px;
        text-align: left;
    }
    .concoursClassement__points {
        padding-left: 0;
        width: 100%;
        padding-bottom: 15px;
        background: white;
    }
    .concoursClassement__points p {
        font-size: 16px;
        text-align: left;
    }
    .concoursClassement__prise p .concoursClassement__prise--date {
        font-size: 14px;
    }
}

.sponsors {
    display: flex;
    flex-direction: column;
    align-items: center;
    float: left;
    width: 100%;
    padding: 0;
    list-style-type: none;
}

.sponsor img {
    float: left;
    display: block;
}

.expeMap__content a.button__reservation {
    display: block;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(45deg, #2e4770 0%, #678ece 51%, #2e4770 100%);
    transition: 0.5s;
    background-size: 200% auto;
    border-radius: 50px;
    padding: 0.7em 2em;
    font-size: 12px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    margin: 15px 0;
    text-align: center;
}

.expeMap__content a.button__reservation:hover {
    color: white;
    background-position: right center;
}

#countdown {
    color: #ef7d00;
    font-weight: 700;
}


/* Communes */

.button__gradient--commune {
    color: white;
    width: 100%;
    padding: 1em 2em;
    margin: 0;
    margin-top: 15px;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(45deg, #f6d365 0%, #ef7d00 51%, #f6d365 100%);
    transition: 0.5s;
    background-size: 200% auto;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

.button__gradient--commune:hover {
    background-position: right center;
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

.commune__main {
    width: 100%;
    float: left;
    position: relative;
}

.commune__main .flex-container {
    display: flex;
    justify-content: center;
}

.commune__sidebar {
    width: 24.4285714286em;
    position: -webkit-sticky;
    position: sticky;
    float: left;
    top: 60px;
    height: calc(100vh - 60px);
    margin: 0;
    padding: 40px;
    background: #efefef;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.commune__sidebar h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 700;
}

.commune__sidebar--search {
    font-family: 'Lato', sans-serif;
    color: #aaa;
    font-weight: 700;
    padding: 15px 10px;
    width: 100%;
    border: none;
    margin-top: 10px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.commune__sidebar--overlay {
    display: none;
}

.commune__content {
    float: left;
    width: calc(100% - 24.4285714286em);
    position: relative;
}

.commune__introduction {
    padding: 0 20px 20px 20px;
    font-size: 1.0rem;
    text-align: justify;
}

#mapCommune {
    width: 100%;
    float: left;
    height: 50vh;
}


.commune__title h2 {
    font-size: 24px;
    text-transform: uppercase;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    color: #6d6d6d;
}

.commune__title h2 span {
    font-weight: 700;
    color: #1b1b1b;
}

.commune__title h3 {
    color: #6d6d6d;
    font-size: 20px;
    margin-top: 20px;
    letter-spacing: 1px;
}

.commune__title p {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    margin: 0 0 15px 0;
}

.commune__title a {
    font-size: 22px;
    margin: 30px 0 0;
    display: block;
    text-align: right;
    text-decoration: none;
    color: #2e4770;
}

.now-indice {
    float: left;
    width: 100%;
    height: 350px;
    background: blue;
    margin: 15px 0;
}

.now-meteo {
    float: left;
    width: 100%;
    height: 350px;
    background: blue;
    margin: 15px 0;
}

.now-maree {
    float: left;
    width: 100%;
    height: 350px;
    background: blue;
    margin: 15px 0;
}

.commune-que-pecher {
    float: left;
    width: 100%;
    position: relative;
}

.commune-que-pecher .espece-card {
    margin: 7.5px 0;
}

.slide-espece {
    /*margin: 0 7.5px;*/
    margin-right: 12px;
}

.slide-espece:last-child {
    margin-right: 0;
}

.slide-espece .espece-card,
.slide-espece .espece-card:hover {
    box-shadow: none;
}

.slide-materiel,
.slide-boat,
.slide-fisher,
.swiper-prises {
    margin: 0;
}

.swiper-fishers {
    position: relative;
}

.swiper-fishers,
.swiper-espece,
.swiper-boats,
.swiper-prises,
.swiper-materiel,
.swiper-techniques {
    overflow: hidden;
}

.b_slf_droite_2 .swiper-wrapper {
    height: auto !important;
}

.sorties .swiper-button-next,
.sorties .swiper-button-prev {
    margin-top: -56px;
}

.espece__classement {
    position: absolute;
    top: 15px;
    left: 15px;
    color: white;
    font-size: 16px;
    z-index: 11;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.commune__membres {
    float: left;
    /* -ms-flex: 1 1 calc(50% - 32px);
-webkit-flex: 1 1 calc(50% - 32px);
flex: 1 1 calc(50% - 32px);
min-width: calc(50% - 32px);
max-width: calc(50% - 32px); */
    margin: 16px;
    background: #efefef;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.commune__membres--content {
    padding: 15px;
    float: left;
    width: 100%;
}

.commune__membres.full__size {
    float: left;
    -ms-flex: 1 1 calc(100% - 32px);
    -webkit-flex: 1 1 calc(100% - 32px);
    flex: 1 1 calc(100% - 32px);
    min-width: calc(100% - 32px);
    max-width: calc(100% - 32px);
}

.commune__membres h3 {
    color: #666;
    letter-spacing: normal;
    margin: 0;
    font-size: 14px;
    padding: 15px 20px 10px 20px;
    color: #1b1b1b;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.commune__membres p {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    color: #6d6d6d;
    margin: 0;
    margin-left: 10px;
}

.commune__membres--list {
    float: left;
    width: 100%;
}

.flex-col {
    -ms-flex: 1 1 250px;
    -webkit-flex: 1 1 250px;
    flex: 1 1 250px;
    min-width: 250px;
    max-width: 100%;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.indice__explication {
    -ms-flex: 1 1 250px;
    -webkit-flex: 1 1 250px;
    flex: 1 1 250px;
    min-width: 250px;
    max-width: 100%;
    margin-left: 16px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.indice__explication .stats__overview--header {
    padding: 20px 20px 0 20px;
}

.indice__explication .stats__overview--header h2 {
    font-size: 14px;
    text-transform: none;
    padding: 0;
}

.indice__explication .stats__overview--header h2 span {
    font-size: 13px;
    text-transform: none;
}

.indice__explication .stats__overview--header p {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.indice__explication .stats__overview--content {
    padding: 0 20px;
}

.indice__explication .stats__overview--content p {
    margin: 10px 0;
}

.indice__explication .stats__overview--content .button__gradient--commune {
    width: auto;
    background-image: linear-gradient(70deg, #2e4770 0%, #337ab7 70%);
    margin-top: 0;
    margin-bottom: 20px;
}

.communeAdd img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.commune__membre {
    width: 100%;
    flex: 1 1 50px;
    min-width: 50px;
    max-width: 100%;
    margin: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.commune__membre a {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    float: left;
    display: block;
    padding: 15px;
    background: transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.1);
}

.commune__membre a:hover {
    background: rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.commune__membre a img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    float: left;
    margin-bottom: 10px;
}

.commune__membre a p {
    display: inline-block;
    color: white;
    font-size: 13px;
    text-align: center;
    margin: 0;
}

.commune__membre--plus a {
    text-shadow: 0px 0px #c16704, 1px 1px #c16704, 2px 2px #c16704, 3px 3px #c16704, 4px 4px #c16704, 5px 5px #c16704, 6px 6px #c16704, 7px 7px #c16704, 8px 8px #c16704, 9px 9px #c16704, 10px 10px #c16704, 11px 11px #c16704, 12px 12px #c16704, 13px 13px #c16704, 14px 14px #c16704, 15px 15px #c16704, 16px 16px #c16704, 17px 17px #c16704, 18px 18px #c16704, 19px 19px #c16704, 20px 20px #c16704, 21px 21px #c16704, 22px 22px #c16704, 23px 23px #c16704, 24px 24px #c16704, 25px 25px #c16704, 26px 26px #c16704, 27px 27px #c16704, 28px 28px #c16704, 29px 29px #c16704, 30px 30px #c16704, 31px 31px #c16704, 32px 32px #c16704, 33px 33px #c16704, 34px 34px #c16704, 35px 35px #c16704, 36px 36px #c16704, 37px 37px #c16704, 38px 38px #c16704, 39px 39px #c16704, 40px 40px #c16704, 41px 41px #c16704, 42px 42px #c16704, 43px 43px #c16704, 44px 44px #c16704, 45px 45px #c16704, 46px 46px #c16704, 47px 47px #c16704, 48px 48px #c16704, 49px 49px #c16704, 50px 50px #c16704, 51px 51px #c16704, 52px 52px #c16704, 53px 53px #c16704, 54px 54px #c16704, 55px 55px #c16704, 56px 56px #c16704, 57px 57px #c16704, 58px 58px #c16704, 59px 59px #c16704, 60px 60px #c16704, 61px 61px #c16704, 62px 62px #c16704, 63px 63px #c16704, 64px 64px #c16704, 65px 65px #c16704, 66px 66px #c16704, 67px 67px #c16704, 68px 68px #c16704, 69px 69px #c16704, 70px 70px #c16704, 71px 71px #c16704, 72px 72px #c16704, 73px 73px #c16704, 74px 74px #c16704, 75px 75px #c16704, 76px 76px #c16704, 77px 77px #c16704, 78px 78px #c16704, 79px 79px #c16704, 80px 80px #c16704, 81px 81px #c16704, 82px 82px #c16704, 83px 83px #c16704, 84px 84px #c16704, 85px 85px #c16704, 86px 86px #c16704, 87px 87px #c16704, 88px 88px #c16704, 89px 89px #c16704, 90px 90px #c16704, 91px 91px #c16704, 92px 92px #c16704, 93px 93px #c16704, 94px 94px #c16704, 95px 95px #c16704, 96px 96px #c16704, 97px 97px #c16704, 98px 98px #c16704, 99px 99px #c16704, 100px 100px #c16704, 101px 101px #c16704, 102px 102px #c16704, 103px 103px #c16704, 104px 104px #c16704, 105px 105px #c16704, 106px 106px #c16704, 107px 107px #c16704, 108px 108px #c16704, 109px 109px #c16704, 110px 110px #c16704, 111px 111px #c16704, 112px 112px #c16704, 113px 113px #c16704, 114px 114px #c16704, 115px 115px #c16704, 116px 116px #c16704, 117px 117px #c16704, 118px 118px #c16704, 119px 119px #c16704, 120px 120px #c16704, 121px 121px #c16704, 122px 122px #c16704, 123px 123px #c16704, 124px 124px #c16704, 125px 125px #c16704, 126px 126px #c16704, 127px 127px #c16704, 128px 128px #c16704, 129px 129px #c16704, 130px 130px #c16704, 131px 131px #c16704, 132px 132px #c16704, 133px 133px #c16704, 134px 134px #c16704, 135px 135px #c16704, 136px 136px #c16704, 137px 137px #c16704, 138px 138px #c16704, 139px 139px #c16704, 140px 140px #c16704, 141px 141px #c16704, 142px 142px #c16704, 143px 143px #c16704, 144px 144px #c16704, 145px 145px #c16704, 146px 146px #c16704, 147px 147px #c16704, 148px 148px #c16704, 149px 149px #c16704, 150px 150px #c16704, 151px 151px #c16704, 152px 152px #c16704, 153px 153px #c16704, 154px 154px #c16704, 155px 155px #c16704, 156px 156px #c16704, 157px 157px #c16704, 158px 158px #c16704, 159px 159px #c16704, 160px 160px #c16704, 161px 161px #c16704, 162px 162px #c16704, 163px 163px #c16704, 164px 164px #c16704, 165px 165px #c16704, 166px 166px #c16704, 167px 167px #c16704, 168px 168px #c16704, 169px 169px #c16704, 170px 170px #c16704, 171px 171px #c16704, 172px 172px #c16704, 173px 173px #c16704, 174px 174px #c16704, 175px 175px #c16704, 176px 176px #c16704, 177px 177px #c16704, 178px 178px #c16704, 179px 179px #c16704, 180px 180px #c16704, 181px 181px #c16704, 182px 182px #c16704, 183px 183px #c16704, 184px 184px #c16704, 185px 185px #c16704, 186px 186px #c16704, 187px 187px #c16704, 188px 188px #c16704, 189px 189px #c16704, 190px 190px #c16704, 191px 191px #c16704, 192px 192px #c16704, 193px 193px #c16704, 194px 194px #c16704, 195px 195px #c16704, 196px 196px #c16704, 197px 197px #c16704, 198px 198px #c16704, 199px 199px #c16704, 200px 200px #c16704;
}

.commune__membre--plus a h2 {
    font-size: 40px;
    color: white;
}

.commune__membre--plus a p {
    font-size: 15px;
}

.commune__membre--plus a {
    background: rgba(0, 0, 0, 0.1);
}

.commune__membre--plus a:hover {
    background: rgba(0, 0, 0, 0);
}

.commune__membre--plus .profile__card--bg {
    background: #ef7d00;
    filter: blur(0px);
}

.commune__membre--cta {
    text-align: center;
    float: left;
    width: calc(100% - 20px);
    margin: 10px;
    border-radius: 25px;
    border: 1px solid #ef7d00;
}

.commune__membre--cta a {
    background: transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.commune__membre--cta a:hover {
    background: #ef7d00;
}

.commune__membre--cta a:hover p {
    color: white;
}

.commune__membre--cta a p {
    font-weight: 700;
    color: #ef7d00;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 15px;
}


/* Expériences commune */

#mapCommuneExpe {
    width: 100%;
    float: left;
    height: calc(100vh - 245px);
}

.openSpotsExp {
    padding: 1em 1em;
    float: left;
    text-transform: uppercase;
    font-weight: 700;
    color: #ef7d00;
    text-align: center;
    background-color: transparent;
    border: 1px solid #ef7d00;
    border-radius: 3px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 12px;
    padding: 1em;
    margin: 5px;
    line-height: 20px;
    cursor: pointer;
}

.openSpotsExp:hover {
    text-decoration: none;
    background: #ef7d00;
    color: white;
}

.communeExpe__nav {
    float: left;
    width: 100%;
    padding: 0 70px;
    position: sticky;
    top: 60px;
    height: 175px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: white;
    z-index: 8;
    transition: 0.25s all ease;
}

.communeExpe__nav--sorties {
    flex-direction: row;
    justify-content: unset;
    height: 70px;
}

.communeExpe__nav--sorties .concours__title {
    padding: 0;
}

.communeExpe__nav--sorties .button__gradient {
    margin: 0;
    color: white;
    border-radius: 50px;
    position: absolute;
    right: 30px;
}

.communeExpe__nav--sorties .button__gradient:hover {
    background-position: right center;
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.6);
    transform: scale(1.05);
    color: white;
    text-decoration: none;
    background-image: linear-gradient(45deg, #f6d365 0%, #ef7d00 51%, #f6d365 100%);
}

.communeExpe__nav .commune__title {
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.communeExpe__nav--list {
    display: block;
    width: 100%;
    float: left;
}

.communeExpe__nav a {
    margin-right: 12px;
    padding: 1em;
    float: left;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin-top: 20px;
    font-size: 12px;
}

.communeExpe__nav a:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05);
}

.communeExpe__nav.shrink {
    height: 70px;
}

.communeExpe__nav.shrink .commune__title {
    opacity: 0;
    height: 0;
}

.communeExpe__nav.shrink .commune__title h2 {
    line-height: 0;
}

.communeExpe__nav.shrink a {
    margin-top: 0;
}

.commune__title--center {
    text-align: center;
}

.commune__title--center h2 {
    text-align: center;
}

.commune__sortiesMap {
    position: relative;
    float: left;
    width: 100%;
}

.commune__magasin {
    position: relative;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin: 0 0 15px 0;
}

.b_slf_gauche .commune__magasin {
    border: none;
}

.commune__magasin a {
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.commune__magasin a div {
    padding: 15px;
    background: white;
}

.commune__magasin a p {
    font-size: 18px;
    font-weight: 700;
    color: #6d6d6d;
    margin: 0;
}

.commune__magasin a span {
    font-size: 14px;
    font-weight: 700;
    color: #2e4770;
}

.commune__magasin a .experience__category {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
}

.commune__magasin img {
    float: left;
    width: 100%;
}

.commune__magasin:hover {
    background: rgba(0, 0, 0, 0.05);
}


/* commune spots */


/* carte spots */

#MapUserContent {
    width: 100%;
    float: left;
    height: calc(100vh - 245px);
}

.spot__card {
    float: left;
    width: 100%;
    background: white;
    margin: 20px 0;
    cursor: auto;
}

.spot__card--title {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.spot__card--info {
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    float: left;
}

.spot__card.card__item.card__prise {
    max-width: 50%;
    border-radius: 4px;
    overflow: hidden;
}

.card__prise .spot__card--info {
    padding: 15px 20px;
}

.spot__card--info a {
    color: #3c81bb;
    text-align: right;
    float: right
}

.spot__card--info a:hover {
    color: #448fce;
}

.spot__card--footer {
    padding: 0 10px 10px 10px;
    float: left;
    width: 100%;
}

.spot__card h3 {
    margin: 0;
    letter-spacing: normal;
    color: #6d6d6d;
    font-weight: 700;
    font-size: 16px;
}

.spot__card h2 {
    margin: 0;
    font-size: 18px;
    color: #1b1b1b;
}

.spot__card p {
    margin-top: 5px;
    margin-bottom: 0;
}


/* matériel */

.pad__0 {
    padding: 0;
}

.materiel__magasin {
    float: left;
    padding: 0 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.materiel__magasin h2 {
    font-weight: 400;
    margin: 1em 0;
}

.materiel__magasin h2 a {
    font-weight: 700;
}

.materiel__list {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

.materiel__list .materiel__item {
    background: #fff;
    vertical-align: top;
    cursor: pointer;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 225px;
    flex: 1 1 225px;
    min-width: 25%;
    max-width: 50%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
}

.materiel__list .materiel__item--magasin {
    width: 100%;
    float: left;
    margin-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px 20px 0 20px;
    position: relative;
    z-index: 4;
}

.materiel__list .materiel__item--magasin p {
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

.materiel__list .materiel__item--magasin a {
    font-size: 16px;
    font-weight: 700;
    color: #2e4770;
}

.materiel__list .materiel__item--magasin a:hover {
    text-decoration: none;
    color: #4469a6;
}

.materiel__list .materiel__item--prix {
    padding: 0.5em 1em;
    background-image: linear-gradient(-45deg, #f6d365 0%, #ef7d00 100%);
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    z-index: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.materiel__list .materiel__item--link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.materiel__list .materiel__item--link:hover {
    background: rgba(0, 0, 0, 0.02);
}

.materiel__list .materiel__item--header {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}

.materiel__list .materiel__item--header img {
    width: 60%;
    float: left;
    margin-left: 20%;
}

.materiel__list .materiel__item--desc {
    width: 100%;
    float: left;
    text-align: center;
}

.materiel__list .materiel__item--desc h2 {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 18px;
    margin: 0;
}

.materiel__list .materiel__item--desc p {
    text-align: center;
    font-size: 16px;
    margin: 5px 0;
}

.card__item {
    background: #fff;
    vertical-align: top;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    -ms-flex: 1 1 300px;
    -webkit-flex: 1 1 300px;
    flex: 1 1 300px;
    min-width: 200px;
    max-width: 100%;
    margin: 16px;
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: none;
}

#essaiPourvous .card__item {
    margin-top: 0;
}

.card__item.card__item--espece {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card__item--header {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
}

.card__item--header img {
    object-fit: cover;
    width: 100%;
    height: 190px;
}

.card__item--info {
    width: 100%;
    float: left;
    padding: 6px 16px;
}

.card__item--info p {
    margin: 0;
    font-size: 16px;
    color: #6d6d6d;
    font-family: 'Open Sans', sans-serif;
}

.card__item--info p span {
    font-weight: 700;
    color: #1b1b1b;
}

.card__item--info p img {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 2px;
}

.card__item--info a {
    float: right;
    color: #2e4770;
    font-size: 16px;
    font-weight: 700;
    padding: 10px;
}

.card__item--info a svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: #2e4770;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.card__item--info a:hover {
    text-decoration: none;
    color: #4469a6;
}

.card__item--info a:hover svg {
    stroke: #4469a6;
    transform: translateX(0);
}

.card__item--desc {
    width: 100%;
    float: left;
    padding: 16px;
}

.card__item--desc h2 {
    font-size: 18px;
    color: #1b1b1b;
    margin: 0;
}

.card__item--desc h2 span {
    color: #ef7d00;
}

.card__item--desc p {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    margin: 5px 0;
    overflow: hidden;
    line-height: 18px;
    height: 54px;
}

.card__item--percent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.card__item--percent .percent {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 15px;
    color: #1b1b1b;
}

.card__item--percent .tooltip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    z-index: 5;
    font-size: 14px;
    color: #6d6d6d;
    font-family: 'Open Sans', sans-serif;
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(100%);
    opacity: 0;
    transition: 0.25s all ease;
}

.card__item--test .card__item--header img {
    height: auto;
}

.card__item--percent:hover .tooltip {
    transform: translateY(0);
    opacity: 1;
}

.experience__card.experience__card--commune {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 100%;
    margin: 7.5px 16px;
}

#slf_contenu .card__item--desc {
    padding: 10px;
}

#slf_contenu .card__item--desc h2 {
    font-size: 16px;
    color: #1b1b1b;
    margin: 0;
    font-weight: 700;
    font-family: 'Open Sans';
}

#slf_contenu .card__item--desc p {
    font: 400 16px/1.5 'Lato';
    margin-top: 7.5px;
    margin-bottom: 0;
}


/* meteo */

.meteo {
    width: 100%;
    margin: 16px 0;
    float: left;
    background: #2e4770;
    overflow: hidden;
}

.meteo .date {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.meteo h2 {
    color: white;
    padding: 20px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
}

.meteo__content {
    width: 100%;
    overflow-x: scroll;
    margin-top: 10px;
}

.meteo__container {
    float: left;
    width: 2400px;
}

.meteo__item {
    width: 100px;
    float: left;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px;
}

.meteo__temp {
    width: 100%;
    float: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
}

.meteo__tempContainer {
    width: 100%;
    float: left;
    max-height: 100px;
    height: 40px;
}

.meteo__temperature {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.meteo__temperature p {
    font-family: 'Lato', sans-serif;
    font-size: 1.2rem;
    color: white;
    margin: 0;
    margin-bottom: 5px;
}

.meteo__temperature .point {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: white;
}

.meteo__icon {
    padding: 13px;
    max-width: 100%;
    margin: 6px auto;
}

.meteo__vent {
    float: left;
    width: 100%;
    padding: 10px 0;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.8); */
}

.meteo__vent p {
    text-align: center;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    margin: 5px 0;
}

.meteo__houle {
    float: left;
    width: 100%;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
}

.meteo__houle p {
    text-align: center;
    color: white;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    margin: 5px 0;
}

.meteo__vent h4,
.meteo__houle h4 {
    text-align: center;
    color: white;
    text-transform: uppercase;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.meteo__heure {
    float: left;
    width: 100%;
    text-align: center;
    margin: 0;
    font-size: 14px;
    color: white;
}

.stats__overview {
    width: 100%;
    float: left;
    background: white;
    /* margin-bottom: 20px; */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.stats__overview--header {
    float: left;
    width: 100%;
}

.stats__overview--header--info {
    font-size: 16px;
    padding: 6px 10px;
    border: 1px solid transparent
}

.stats__overview--header--info:hover {
    border: 1px solid lightgrey
}

.stats__overview--header .date {
    display: block;
    font-size: 12px;
}

.stats__overview--header h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 22px;
    margin: 0;
    text-decoration: none;
    padding: 20px;
    /* commenté par ludo le 25/11/19 */
    /* text-transform: uppercase; */
    color: #1b1b1b;
}

.stats__overview--header h2 span {
    font-weight: 700;
    font-size: 21px;
}

.stats__overview--content {
    float: left;
    width: 100%;
    padding: 20px;
}

#source__maree {
    margin: 5px 0 0 0;
    font-size: 15px;
    color: #e08746;
    display: block;
    text-transform: none;
    letter-spacing: 0.5px;
    font-weight: bold;
}

#sub__indice {
    margin: 5px 0 0 0;
    font-size: 15px;
    color: #e08746;
    display: block;
    text-transform: none;
    letter-spacing: 0.5px;
    font-weight: bold;
}

#sub__indice.white {
    color: #ffffff;
}


/* blocs prévisions actuels */

.prev__actu {
    background: -webkit-linear-gradient(bottom, #3c81bb 0%, #448fce 100%);
    background: -o-linear-gradient(bottom, #3c81bb 0%, #448fce 100%);
    background: linear-gradient(to top, #3c81bb 0%, #448fce 100%);
    overflow: hidden;
    -ms-flex: 1 1 25%;
    -webkit-flex: 1 1 25%;
    flex: 1 1 25%;
    min-width: calc(25% - 32px);
    max-width: calc(25% - 32px);
    margin: 16px;
    padding: 20px;
    position: relative;
    height: 300px;
}

.prev__actu--prev {
    -ms-flex: 1 1 calc(33.33% - 32px);
    -webkit-flex: 1 1 calc(33.33% - 32px);
    flex: 1 1 calc(33.33% - 32px);
}

.prev__actu--header {
    width: 100%;
    float: left;
    padding: 0px 0 10px 0;
    border-bottom: 1px solid white;
}

.prev__actu--header h2 {
    display: inline-block;
    color: white;
    font-size: 18px;
    font-family: 'Lato', sans-serif;
    margin: 0;
    line-height: 30px;
}

.prev__actu--indiceInfo {
    background: #ef7d00;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    float: right;
    cursor: pointer;
    z-index: 3;
    position: relative;
    border: 1px solid white;
}

.prev__actu--first {
    display: block;
    float: left;
    width: 100%;
}

.prev__actu--first img {
    display: block;
    float: left;
    height: 25px;
}

.prev__actu--first p {
    display: block;
    float: left;
    color: white;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    font-size: 14px;
    line-height: 25px;
    margin-left: 5px;
}

.prev__actu--temp {
    width: 50%;
    float: left;
}

.prev__actu--temperature {
    color: white;
    font-size: 52px;
    font-weight: 300;
    line-height: 52px;
    display: block;
    float: left;
}

.prev__actu--vent {
    width: 50%;
    float: left;
    padding: 0 0 0 20px;
    display: flex;
    align-items: baseline;
}

.prev__actu--vent img {
    height: 50px;
    float: left;
}

.prev__actu--vent .vent__infos {
    float: left;
}

.prev__actu--vent .vent__infos p {
    display: block;
    width: 100%;
    float: left;
    color: white;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    line-height: 1;
    font-size: 14px;
    margin-left: 5px;
    margin-top: 5px;
}

.prev__actu--content {
    width: 100%;
    float: left;
    border-bottom: 1px solid white;
}

.prev__actu--indice {
    color: white;
    font-size: 52px;
    font-weight: 300;
    margin: 0;
    line-height: 120px;
    border-bottom: 1px solid white;
}

.prev__actu--indiceDesc {
    color: white;
    text-align: left;
    font-size: 14px;
    margin: 0;
    padding: 15px 0;
    font-weight: bold;
}

.prev__actu--houle {
    width: 100%;
    float: left;
    margin: 0;
    height: 120px;
    padding: 7px;
    border-top: 1px solid white;
    position: relative;
}

.prev__actu--houle h3 {
    color: white;
    text-transform: uppercase;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
    margin: 0;
}

.prev__actu--houle p,
.prev__actu--houle span {
    color: white;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    font-size: 14px;
}

.prev__actu--footer {
    color: white;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    text-align: right;
    position: absolute;
    bottom: 5px;
    right: 10px;
    padding: 5px;
}

.prev__actu--footer:hover {
    color: white;
    text-decoration: underline;
}

.prev__actu--link {
    font-family: 'Lato', sans-serif;
    color: white;
    text-align: right;
    float: right;
    line-height: 30px;
    font-size: 14px;
}

.prev__actu--link:hover {
    color: white;
}

.prev__actu.weather {
    padding: 0;
}

.prev__actu.weather .prev__actu--header {
    padding: 20px 20px 10px 20px;
}

.prev__actu.weather .prev__actu--content {
    padding: 20px;
    height: 120px;
}

.prev__actu.weather .prev__actu--houle {
    height: 120px;
}

.weatherNoHoule .prev__actu--content.weather {
    height: 240px;
}

#weatherHoule {
    top: 75%;
    left: -117%;
    top: 50px;
    left: -44%;
    width: 600px;
    height: 625px;
    background-color: #2e4770;
    opacity: 0.6;
    position: absolute;
    border-radius: 40%;
}

@keyframes weatherHoule {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.chart-card {
    margin-top: 30px;
    float: left;
    position: relative;
    background: white;
    width: 100%;
    display: block;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

#indiceChart {
    padding: 20px;
}

.chart-card .about {
    height: 100px;
    box-sizing: border-box;
    padding: 30px;
}

.chart-card .about h3,
.chart-card .about .lead {
    font-weight: 400;
    margin: 0;
    color: #1b1b1b;
    letter-spacing: normal;
}

.chart-card .about h3 {
    font-size: 24px;
}

.chart-card .about .lead {
    color: #aaa;
}

.chart-card .info {
    float: left;
    padding: 10px 30px 10px 0;
}

.chart-card .info p {
    font-size: 13px;
    color: #666;
    font-weight: 400;
}

.axis {
    position: absolute;
    color: #fff;
    z-index: 1;
    text-transform: uppercase;
    display: flex;
    width: 100%;
    bottom: 0;
    padding: 0 9%;
}

.axis .tick {
    flex: 1;
    position: relative;
    overflow: hidden;
    opacity: 0.9;
    /* opacity: 0.5; */
    font-size: 13px;
    text-align: center;
    line-height: 40px;
    padding-top: 150px;
}

.axis .tick:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.axis .tick.selectedTick {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
}

.axis .tick .value {
    transition: 0.3s all;
    position: absolute;
    bottom: 40px;
    color: #fff;
    border-radius: 2px;
    width: 100%;
    line-height: 20px;
    opacity: 1;
    display: block;
}

.axis .tick:hover .value.value--this {
    transform: translateY(0);
    display: block;
    opacity: 1;
}

#houleDir {
    z-index: 2;
    position: relative;
}

#houleHeight {
    z-index: 2;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

#houleTime {
    z-index: 2;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
}

.prev__actu--content.weather {
    padding: 25px 0;
    display: flex;
    align-items: baseline;
}

.indice__infos {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ef7d00;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    z-index: 2;
    transition: 0.35s all ease;
}

.indice__infos--desc {
    opacity: 0;
    position: absolute;
    left: 0;
    padding: 0 20px;
    top: 25px;
    transition: 0.45s all ease;
    visibility: hidden;
}

.indice__infos--desc h3 {
    margin: 0;
    letter-spacing: normal;
    font-size: 14px;
    color: white;
}

.indice__infos--desc p {
    color: white;
    font-size: 14px;
}

.indice__infos--desc ul li {
    font-size: 14px;
    color: white;
}

.indice__infos--desc a {
    padding: 0.5em 1em;
    background: white;
    margin-top: 10px;
    display: inline-block;
    color: #2e4770;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.indice__infos--desc a:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.8);
}

.indice__infos.active {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    border-radius: 0;
}

.indice__infos--desc.active {
    opacity: 1;
    z-index: 2;
    transition-delay: 0s !important;
    visibility: visible;
    border-bottom: none;
}

.icone__direction {
    height: 12px !important;
    padding: 2px;
    position: relative;
    z-index: 2;
    margin-left: 0;
}

.prev__maree {
    background: white;
    overflow: hidden;
    -ms-flex: 1 1 calc(50% - 32px);
    -webkit-flex: 1 1 calc(50% - 32px);
    flex: 1 1 calc(50% - 32px);
    min-width: calc(50% - 32px);
    max-width: calc(50% - 32px);
    margin: 16px;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.prev__maree--header {
    float: left;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 10px 20px 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.prev__maree--header h2 {
    margin: 0;
    letter-spacing: normal;
    font-size: 18px;
    display: inline-block;
    color: #1b1b1b;
}

.prev__maree--header a {
    float: right;
    font-family: 'Lato', sans-serif;
    color: #2e4770;
    font-weight: 700;
}

.prev__maree--table {
    width: 100%;
    float: left;
}

.prev__maree--content {
    float: left;
    width: 100%;
    position: relative;
    z-index: 2;
}

.prev__maree--items {
    width: 70%;
    float: left;
}

.prev__maree--item {
    float: left;
    width: 25%;
    padding-right: 40px;
}

.prev__maree--item h3 {
    letter-spacing: normal;
    color: #1b1b1b;
    text-transform: uppercase;
    font-size: 18px;
    margin: 10px 0;
}

.prev__maree--item p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.4;
    color: #6d6d6d;
}


/* .prev__maree--gm {
float: right;
padding: 20px 20px 0 0;
z-index: 4;
position: relative;
} */

.prev__maree--gm {
    padding: 10px;
    z-index: 4;
    position: relative;
    background: #ef7d00;
    float: left;
    width: 100%;
}

.prev__maree--gm h3 {
    letter-spacing: normal;
    /* color: #1b1b1b; */
    font-size: 14px;
    margin: 0;
    color: white;
    display: inline;
}

.prev__maree--gm p {
    font-size: 14px;
    /* color: #6d6d6d; */
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin: 5px 0 0 0;
    color: white;
    display: inline;
}

#meteoActuBg {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    opacity: 0.1;
}

.flex-row {
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
}

#communeFirstAdd {
    overflow: hidden;
    -ms-flex: 1 1 25%;
    -webkit-flex: 1 1 25%;
    flex: 1 1 calc(25% - 32px);
    min-width: calc(25% - 32px);
    max-width: calc(25% - 32px);
    margin: 16px;
    position: relative;
}

#communeFirstAdd img {
    object-fit: cover;
    width: 100%;
}

#communeSecAdd {
    overflow: hidden;
    -ms-flex: 1 1 25%;
    -webkit-flex: 1 1 25%;
    flex: 1 1 calc(25% - 32px);
    min-width: calc(25% - 32px);
    max-width: calc(25% - 32px);
    margin: 16px;
    position: relative;
}

#communeSecAdd img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.alertCopecheurs-container {
    position: absolute;
    top: 90px;
    height: 100%;
}

.eventAlert {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    margin: 0;
    width: 340px;
    z-index: 50;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.eventAlert.alertCopecheurs {
    position: sticky;
    top: 150px;
    display: block;
}

.eventAlert__header {
    background: #2e4770;
    text-align: left;
}

.eventAlert__header h2 {
    color: white;
    margin: 0;
    text-transform: uppercase;
    padding: 15px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

.eventAlert__content {
    background: #e01018;
    padding: 15px;
    text-align: left;
}

.eventAlert__content p {
    margin: 0;
    color: white;
    font-family: 'Open Sans', sans-serif;
}

.eventAlert__content a {
    display: inline-block;
    margin-top: 10px;
    background: #ffffff;
    color: #2e4770;
    padding: 4px 7px;
    font-size: 13px;
}

.eventAlert.close {
    opacity: 0;
    display: none;
}

.eventClose {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
    opacity: 0.7;
    cursor: pointer;
}

.eventClose:hover {
    opacity: 0.3;
}

.eventClose:before,
.eventClose:after {
    position: absolute;
    left: 11px;
    content: ' ';
    height: 24px;
    width: 2px;
    background-color: white;
}

.eventClose:before {
    transform: rotate(45deg);
}

.eventClose:after {
    transform: rotate(-45deg);
}

.commune__sidebar--toggle {
    display: none;
}

#indiceCourbe {
    flex: 1 1 60%;
    min-width: 350px;
    max-width: 100%;
    margin: 15px 0 0 0;
}

#mareeCourbe {
    -webkit-flex: 1 1 60%;
    -ms-flex: 1 1 60%;
    flex: 1 1 60%;
    min-width: 350px;
    max-width: 100%;
    margin: 0 0 15px 0;
}

#mareeTable {
    float: left;
    margin: 0;
    background: white;
    margin: 15px 0 15px 0;
    border: none;
}

#mareeTable .prev__maree--tableRow {
    width: 100%;
    float: left;
    padding: 7px 0;
    border-bottom: 1px solid rgba(157, 192, 221, 0.5);
    font-size: 13px;
}

#mareeTable .prev__maree--tableRow.table__head {
    font-weight: 700;
}

#mareeTable .prev__maree--tableRow:nth-child(odd) {
    background: rgba(86, 133, 181, 0.38);
}

#mareeTable .prev__maree--tableCell1,
#mareeTable .prev__maree--tableCell2,
#mareeTable .prev__maree--tableCell3 {
    float: left;
    text-align: center;
}

#mareeTable .prev__maree--tableCell1 {
    width: 15%;
}

#mareeTable .prev__maree--tableCell2 {
    width: 25%;
}

#mareeTable .prev__maree--tableCell3 {
    width: 35%;
}

.table--mg-left {
    margin-left: 15%;
}

#mareeCourbe .stats__overview--content {
    display: flex;
}

#mareeCourbe .overview__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 220px);
    padding: 10px;
}

#mareeCourbe .overview__container.overview__container--jfe {
    justify-content: flex-end;
}

#nextGm {
    float: left;
    width: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #ef7d00;
}

#nextGm .prev__maree--header {
    padding: 15px;
}

#nextGm .prev__maree--header h2 {
    color: #fff;
    font: 700 14px/1.2 'Open Sans';
}

.prevRow {
    display: block;
    float: left;
    width: 100%;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.prevRow span {
    color: white;
    margin-right: 10px;
    font: 400 13px/1 'Open Sans';
}

.prevRow span.prevRow__statut {
    font-weight: 700;
}

.grande__maree {
    float: left;
    width: 100%;
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.grande__maree p {
    font-size: 13px;
    font-weight: 400;
    color: white;
}

.grande__maree p span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.mareeActu__container {
    float: left;
    width: 100%;
    position: relative;
    margin-top: 80px;
}

#mareeActu {
    height: 170px !important;
}

.previsions__nav {
    background: white;
    padding: 0 0;
    position: relative;
    z-index: 6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 24px 0;
}

.previsions__nav h1 {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    display: block;
    float: left;
}

.previsions__nav h1 span {
    font-weight: 700;
    font-size: 20px;
    color: #1b1b1b;
}

.previsions__nav--list {
    float: right;
    margin-top: 12px;
}

.previsions__nav--item {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin: 0 5px 5px 0;
    display: block;
    line-height: 40px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 700;
    float: left;
    color: rgba(0, 0, 0, 0.6);
    background-color: transparent;
    cursor: pointer;
}

.previsions__nav--item:hover {
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05);
}

.previsions__nav--item.current {
    background: linear-gradient(to top, #89a1b5 0%, #9cb6ca 100%);
    color: white;
}

.flex-col .prev__actu {
    max-width: 100%;
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    height: auto;
}

.indice__legende {
    -ms-flex: 1 1 100%;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    min-width: calc(25% - 32px);
    max-width: 100%;
    margin: 16px;
    padding: 20px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.indice__legende p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1b1b1b;
}

a.espece__priseRecente {
    background: #2e4770;
    color: white;
    background-size: 200% auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    width: 100%;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
}

a.espece__priseRecente:hover {
    background: #355282;
    color: white;
}

@media screen and (max-width: 1780px) {
    .prev__actu--header h2 {
        font-size: 16px;
    }
    .prev__actu--link {
        font-size: 13px;
    }
    .prev__actu--temperature {
        font-size: 32px;
        line-height: 32px;
    }
    .prev__actu--first img {
        height: 20px;
    }
    .prev__actu--first p {
        font-size: 12px;
        line-height: 20px;
    }
    .prev__actu--vent img {
        height: 40px;
        float: left;
    }
    .prev__actu--vent .vent__infos p {
        font-size: 12px;
    }
    .prev__actu.weather .prev__actu--content {
        padding: 20px;
        height: 100px;
    }
    .prev__actu.weather .prev__actu--houle {
        height: 100px;
    }
    .weatherNoHoule .prev__actu--content.weather {
        height: 200px;
    }
    .prev__actu--houle h3 {
        font-size: 14px;
    }
    .prev__actu--houle p,
    .prev__actu--houle span {
        font-size: 12px;
    }
    #weatherHoule {
        top: 45px;
        width: 500px;
        height: 525px;
    }
    .prev__actu--indice {
        font-size: 46px;
        line-height: 100px;
    }
    .prev__actu--indiceDesc {
        font-size: 14px;
        padding: 10px 0;
    }
    .prev__actu--footer {
        font-size: 11px;
    }
    .prev__actu {
        height: 260px;
    }
}

@media screen and (max-width: 1600px) {
    a.espece__priseRecente {
        font-size: 12px;
        padding: 7px 5px;
    }
    .commune__sidebar {
        padding: 30px;
        width: 20.4285714286em;
    }
    .commune__content {
        width: calc(100% - 20.4285714286em);
    }
    .commune__magasin a p {
        font-size: 14px;
    }
    .commune__magasin a span {
        font-size: 12px;
    }
    .prev__actu--header h2 {
        font-size: 14px;
    }
    .card__item {
        -ms-flex: 1 1 220px;
        -webkit-flex: 1 1 220px;
        flex: 1 1 220px;
        min-width: 220px;
        max-width: 100%;
    }
    .spot__card.card__item {
        -ms-flex: 1 1 225px;
        -webkit-flex: 1 1 225px;
        flex: 1 1 225px;
        min-width: 225px;
        max-width: 100%;
        margin: 12px;
    }
    .spot__card.card__item img {
        width: 100%;
    }
    .card__item--header img {
        height: 150px;
    }
    .card__item--desc {
        padding: 16px;
    }
    .card__item--desc h2 {
        font-size: 14px;
    }
    .card__item--desc p {
        font-size: 12px;
    }
    .card__item--info p {
        font-size: 12px;
    }
    .card__item--info p img {
        height: 14px;
        width: 14px;
    }
    .card__item--percent .tooltip {
        font-size: 11px;
    }
    .prev__maree--content {
        margin-bottom: 0;
    }
    .prev__maree--item h3 {
        font-size: 14px;
    }
    .prev__maree--item p {
        font-size: 12px;
    }
    .prev__maree--gm span {
        font-size: 12px;
    }
    .prev__maree--gm h3 {
        font-size: 14px;
    }
    .prev__maree--gm p {
        /* font-size: 11px; */
        font-size: 13px;
    }
}

@media screen and (max-width: 1500px) {
    .previsions__nav h1 {
        font-size: 16px;
    }
    .previsions__nav h1 span {
        font-size: 16px;
    }
    .prev__actu--indiceDesc {
        font-size: 13px;
        padding: 10px 0;
    }
    .prev__actu--prev .prev__actu--indice {
        font-size: 7em;
    }
    .commune__title a {
        font-size: 16px;
    }
    .mareeActu__container {
        margin-top: 60px;
    }
    .prev__actu {
        padding: 10px;
    }
    .prev__actu--indice {
        font-size: 46px;
        line-height: 85px;
    }
    .indice__infos {
        top: 10px;
        right: 10px;
    }
    .indice__infos--desc ul li {
        font-size: 13px;
    }
    .prev__actu--header {
        padding: 0;
    }
    .prev__actu.weather .prev__actu--header {
        padding: 10px 10px 0px 10px;
    }
    .prev__actu {
        height: 230px;
    }
    .prev__actu--indiceInfo {
        width: 20px;
        height: 20px;
    }
    .indice__infos {
        width: 20px;
        height: 20px;
    }
    .prev__actu--footer {
        font-size: 13px;
    }
    .prev__actu--temperature {
        font-size: 32px;
        line-height: 32px;
    }
    .prev__actu--first img {
        height: 20px;
    }
    .prev__actu--first p {
        font-size: 12px;
        line-height: 20px;
    }
    .prev__actu.weather .prev__actu--content {
        padding: 15px;
        height: 85px;
    }
    .prev__actu.weather .prev__actu--houle {
        height: 105px;
    }
    .weatherNoHoule .prev__actu--content.weather {
        height: 190px;
    }
    .commune__membres h3 {
        font-size: 14px;
    }
    .commune__membre {
        -webkit-flex: 1 1 50px;
        -ms-flex: 1 1 50px;
        flex: 1 1 50px;
        min-width: 50px;
        max-width: 100%;
    }
    .commune__membre a p {
        font-size: 13px;
    }
    .commune__membre--plus a p {
        font-size: 14px;
    }
    .commune__membre a {
        padding: 10px;
    }
    .prev__maree--header h2 {
        font-size: 14px;
    }
    .axis .tick .value {
        line-height: 18px;
        font-size: 12px;
        font-weight: 700;
    }
    .button__gradient--commune {
        font-size: 12px;
    }
    .meteo__vent h4,
    .meteo__houle h4 {
        font-size: 12px;
    }
    .meteo__vent p {
        font-size: 12px;
        margin: 0;
    }
    .meteo__houle p {
        font-size: 12px;
        margin: 0;
    }
}

@media screen and (max-width: 1400px) {
    .modal__btn {
        font-size: 14px;
    }
    .pricing__card--cta a {
        font-size: 13px;
    }
    a.espece__priseRecente {
        font-size: 10px;
    }
    html.fts a.espece__priseRecente {
        font-size: 14px;
    }
    .commune__membre--cta a p {
        font-size: 13px;
    }
    .prev__actu--header h2 {
        font-size: 12px;
    }
    .prev__actu--indice {
        line-height: 75px;
    }
    .prev__actu--temperature {
        line-height: 40px;
    }
    .prev__actu {
        height: 210px;
    }
    .indice__infos--desc p {
        font-size: 12px;
    }
    .indice__infos--desc ul li {
        font-size: 12px;
    }
    .indice__infos--desc a {
        margin-top: 0;
        font-size: 12px;
    }
    .prev__actu--temperature {
        font-size: 26px;
        line-height: 26px;
    }
    .prev__actu--first img {
        height: 20px;
    }
    .prev__actu--first p {
        font-size: 10px;
        line-height: 20px;
    }
    .prev__actu--vent img {
        height: 40px;
        float: left;
    }
    .prev__actu--vent .vent__infos p {
        font-size: 10px;
    }
    .prev__actu.weather .prev__actu--content {
        padding: 10px;
        height: 75px;
    }
    .prev__actu.weather .prev__actu--houle {
        height: 95px;
    }
    .weatherNoHoule .prev__actu--content.weather {
        height: 170px;
    }
    .prev__actu--houle h3 {
        font-size: 12px;
    }
    .prev__actu--houle p,
    .prev__actu--houle span {
        font-size: 10px;
    }
    .previsions__nav--item {
        font-size: 12px;
    }
    #weatherHoule {
        top: 35px;
        width: 500px;
        height: 525px;
    }
    .commune__membres--content {
        padding: 10px;
    }
    .materiel__list .materiel__item--desc h2 {
        font-size: 14px;
    }
    .materiel__list .materiel__item--desc p {
        font-size: 12px;
    }
    .materiel__list .materiel__item--prix {
        font-size: 12px;
    }
    .commune__membre a p {
        font-size: 12px;
    }
    .prev__actu--indiceDesc {
        font-weight: 400;
    }
    .commune__membre--plus a p {
        font-size: 15px;
    }
    .mareeActu__container {
        margin-top: 55px;
    }
    .grande__maree p {
        font-size: 12px;
    }
    .prevRow span {
        font-size: 12px;
    }
}

@media screen and (max-width: 1300px) {
    .prev__actu--prev {
        -ms-flex: 1 1 350px;
        -webkit-flex: 1 1 350px;
        flex: 1 1 350px;
    }
    .communeExpe__nav {
        padding: 0 16px;
    }
    .communeExpe__nav a {
        padding: 1em;
        margin: 5px;
        margin-left: 0;
    }
    .prev__actu.weather .prev__actu--header {
        padding: 10px 10px 5px 10px;
    }
    .prev__actu--header h2 {
        line-height: 20px;
    }
    .prev__actu--link {
        line-height: 18px;
        font-size: 9px;
    }
    .prev__actu--first img {
        height: 15px;
    }
    .prev__actu--first p {
        font-size: 10px;
        line-height: 20px;
    }
    .prev__actu--vent img {
        display: none;
    }
    .prev__actu.weather .prev__actu--content {
        padding: 10px;
        height: 85px;
    }
    .prev__actu.weather .prev__actu--houle {
        height: 85px;
    }
    .weatherNoHoule .prev__actu--content.weather {
        height: 175px;
    }
    #weatherHoule {
        top: 35px;
        width: 400px;
        height: 425px;
    }
    .commune__membre a img {
        width: 75px;
        height: 75px;
    }
    .previsions__nav {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        border: none;
        margin: 0;
    }
}

@media screen and (min-width: 1101px) {
    .commune__sidebar.only-mobile {
        display: none;
    }
}

@media screen and (max-width: 1100px) {
    .commune__content {
        width: 100%;
    }
    .commune__content {
        transition: 0.25s all ease-out;
    }
    .materiel__magasin {
        padding: 0 30px;
    }
}

@media screen and (max-width: 1024px) {
    .prev__actu {
        flex: 1 1 33.33%;
        min-width: calc(33.33% - 32px);
        max-width: calc(33.33% - 32px);
    }
    #communeFirstAdd {
        flex: 1 1 calc(33.33% - 32px);
        min-width: calc(33.33% - 32px);
        max-width: calc(33.33% - 32px);
    }
    #communeSecAdd {
        flex: 1 1 calc(33.33% - 32px);
        min-width: calc(33.33% - 32px);
        max-width: calc(33.33% - 32px);
    }
    .prev__maree {
        flex: 1 1 calc(66.66% - 32px);
        min-width: calc(66.66% - 32px);
        max-width: calc(66.66% - 32px);
    }
    .commune__membres {
        flex: 1 1 calc(100% - 32px);
        min-width: calc(100% - 32px);
        max-width: calc(100% - 32px);
    }
    .prev__actu.weather .prev__actu--header {
        padding: 10px 10px 5px 10px;
    }
    .prev__actu--header h2 {
        line-height: 12px;
    }
    .prev__actu--link {
        line-height: 18px;
        font-size: 9px;
    }
    .prev__actu--first img {
        height: 15px;
    }
    .prev__actu--first p {
        font-size: 10px;
        line-height: 20px;
    }
    .prev__actu--vent img {
        display: block;
    }
    .prev__actu.weather .prev__actu--content {
        padding: 10px;
        height: 85px;
    }
    .prev__actu.weather .prev__actu--houle {
        height: 85px;
    }
    .weatherNoHoule .prev__actu--content.weather {
        height: 176px;
    }
    #weatherHoule {
        top: 35px;
        width: 600px;
        height: 625px;
        left: -50%;
    }
}

@media screen and (max-width: 960px) {
    #weatherHoule {
        width: 500px;
        height: 525px;
        left: -60%;
    }
    .commune__membre a img {
        width: 85px;
        height: 85px;
    }
    .mareeActu__container {
        margin-top: 45px;
    }
}

@media screen and (max-width: 768px) {
    .commune__title h2 {
        font-size: 18px;
    }
    .mareeActu__container {
        margin-top: 35px;
    }
    .materiel__magasin h2 {
        font-size: 14px;
    }
    .materiel__list .materiel__item {
        min-width: 50%;
        max-width: 100%;
    }
    .previsions__nav--list {
        float: left;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .previsions__nav--item {
        width: calc(25% - 5px);
        text-align: center;
        line-height: 1.5;
        padding: 5px 10px;
        margin: 0;
        margin-right: 5px;
    }
    #indiceCourbe {
        min-width: 30%;
        max-width: 100%;
        /* margin: 16px; */
    }
    #mareeCourbe {
        min-width: 30%;
        max-width: 100%;
        /* margin: 16px; */
        margin-top: 16px
    }
    .stats__overview--content {
        overflow: scroll;
    }
    .stats__overview--content.no-scroll {
        overflow: hidden;
    }
    .courbe__container {
        float: left;
        width: 600px !important;
        position: relative;
        height: 230px;
    }
    .stats__overview--header h2 {
        font-size: 16px;
    }
    .stats__overview--header h2 span {
        font-size: 15px;
    }
    .stats__overview--content {
        padding: 5px;
    }
    .meteo__content {
        margin-top: 0;
    }
    .meteo__tempContainer {
        height: 80px;
    }
    .communeExpe__nav {
        position: relative;
        top: 0;
        height: auto;
        padding: 30px 16px;
    }
    .eventAlert {
        top: auto;
        width: 100%;
    }
    .commune__title a {
        text-align: left;
        margin-top: 0;
    }
    .commune__membres {
        min-width: 250px;
    }
    .prev__actu {
        flex: 1 1 50%;
        min-width: calc(50% - 32px);
        max-width: calc(50% - 32px);
    }
    #communeFirstAdd {
        flex: 1 1 calc(50% - 32px);
        min-width: calc(50% - 32px);
        max-width: calc(50% - 32px);
    }
    #communeSecAdd {
        flex: 1 1 calc(50% - 32px);
        min-width: calc(50% - 32px);
        max-width: calc(50% - 32px);
    }
    .prev__maree {
        flex: 1 1 calc(100% - 32px);
        min-width: calc(100% - 32px);
        max-width: calc(100% - 32px);
    }
    #weatherHoule {
        width: 600px;
        height: 625px;
        left: -45%;
    }
}

@media screen and (max-width: 560px) {
    .commune__sidebar {
        padding: 15px;
    }
    .button__gradient--commune {
        font-size: 14px;
        margin: 0;
    }
    #mareeActu {
        height: 150px !important;
    }
    .axis .tick .value {
        bottom: 40px;
    }
    .commune__sidebar--search {
        margin: 5px 0;
    }
    .prev__maree--item {
        width: 25%;
        margin-bottom: 20px;
    }
    .prev__maree--content {
        margin-bottom: 0;
    }
    .prev__maree--items {
        width: 100%;
    }
    .prev__actu {
        flex: 1 1 100%;
        min-width: calc(100% - 32px);
        max-width: calc(100% - 32px);
    }
    #weatherHoule {
        top: 40px;
        width: 180vw;
        height: calc(180vw + 25px);
        left: -50%;
    }
}


/* Membre card */

.profile__card {
    position: relative;
    float: left;
    width: 100%;
    background: white;
    transition: 0.25s all ease;
    overflow: hidden;
    margin: 20px 0;
}

.profile__card a {
    text-decoration: none;
}

.profile__card--bg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    filter: blur(5px);
    z-index: 0;
    background-position: center center;
}

.profile__card--overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: 0.25s all ease;
}

.slf__communeService.inactive .slf__communeService-link h2 {
    color: rgba(255, 255, 255, 0.6);
}

.slf__communeService.inactive .profile__card--overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
}

.slf__communeService.inactive:hover .profile__card--overlay {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}

.profile__card--header {
    text-align: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.profile__card--header-viewProfile {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    text-align: left;
    padding: 0 10px;
    color: white;
    width: 100%;
    text-transform: uppercase;
    font-size: 14px;
    background: linear-gradient(45deg, #2e4770, rgba(255, 255, 255, 0.4));
    line-height: 35px;
}

.profile__card--headerTags {
    position: absolute;
    bottom: 35px;
    left: 0;
    width: 100%;
    padding: 10px;
}

.profile__card--headerTags span {
    z-index: 3;
    position: relative;
    font-size: 12px;
    color: white;
    font-weight: 700;
    line-height: 1;
    width: 45px;
    height: 45px;
    background: #2e4770;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    float: left;
    margin-right: 10px;
}

.profile__card--header a {
    float: left;
    width: 100%;
}

.profile__card--header img {
    display: block;
    width: 100%;
    min-height: 100%;
}

.profile__card--header h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    color: white;
    margin-top: 0;
    margin-bottom: 20px;
    z-index: 3;
}

.profile__card--headerIcons {
    position: absolute;
    z-index: 12;
    left: 10px;
    top: 10px;
}

.profile__card--headerIcon {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2e4770;
}

.profile__card--headerIcon:nth-child(2) {
    margin-left: 5px;
}

.profile__card--headerIcon img {
    height: 50%;
    width: auto;
    min-height: 0;
}

.profile__card--infos {
    display: flex;
    position: relative;
    z-index: 2;
}

.profile__card--points {
    float: left;
    width: 50%;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.profile__card--points div {
    margin: 10px 0;
}

.profile__card--points span {
    color: #6d6d6d;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.profile__card--points p {
    text-align: center;
    margin: 0;
    color: #aaa;
}

.profile__card--rang {
    float: left;
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile__card--rang p {
    color: #6d6d6d;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

.profile__card:hover {
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.2);
}

.profile__picture {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%;
    margin: 30px 0 15px 0;
    z-index: 3;
}

.wrapper__concours #MapUserContent {
    height: 400px;
    position: relative;
}

#communeOuPecher #MapUserContent {
    height: 65vh;
}

.wrapper__concours .spot_btn {
    cursor: pointer;
    display: inline-block;
    background-color: #ee7d34;
    text-align: center;
    padding: 5px 20px;
    color: white;
    line-height: 20px;
    font-size: 13px;
}

.wrapper__concours .spot_btn_selected {
    color: #ee7d34;
}

.wrapper__concours #MapUserContent.open {
    filter: blur(3px);
}

.wrapper__concours .expeMap__content {
    max-width: 50%;
    max-height: none;
}

.wrapper__concours .expeMap__content h1 {
    color: #ef7d00;
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

.wrapper__concours .expeMap__header {
    max-width: 50%;
    max-height: none;
}

.wrapper__concours .gm-style-iw {
    overflow: visible !important;
}

.wrapper__concours #contentStringCommune {
    float: left;
    width: 453px;
}

@media screen and (max-width: 625px) {
    .wrapper__concours #MapUserContent {
        height: 70vh;
    }
    .wrapper__concours .expeMap__content {
        max-width: none;
    }
    .wrapper__concours .expeMap__header {
        max-width: none;
    }
    .wrapper__concours .gm-style-iw {
        overflow: auto !important;
    }
    .wrapper__concours #contentStringCommune {
        float: left;
        width: 100%;
    }
}

.commune__membres.full__size .commune__membre:not(.commune__membre--cta) a {
    padding: 40px 0;
}

.commune__membres.full__size .commune__membre:not(.commune__membre--cta) a img {
    height: 90px;
    width: 90px;
}

.bandeau_pub_commune {
    float: left;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    margin: 15px 0;
}


.weatherNoHoule .prev__actu--houle {
    display: none;
}

.weatherNoHoule .prev__actu--content.weather {
    display: flex;
    align-items: center;
}

.spotsCta__container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100vh - 60px);
    overflow: hidden;
}

.spotsCta__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-animation: animate-move-bg 120s infinite;
    animation: animate-move-bg 120s infinite;
    animation-delay: 0.5s;
}

.spotsCta__box {
    max-width: 300px;
    z-index: 2;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    padding: 30px;
    /* margin: 10px 0; */
    border-radius: 3px;
    position: relative;
    box-shadow: 0 0px 15px 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 20px;
    top: 20px;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.spotsCta__box h2 {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    font-family: 'Open Sans';
}

.spotsCta__box .line {
    height: 3px;
    width: 100px;
    background: #333;
    margin: 15px 0;
}

.spotsCta__box p {
    font-size: 14px;
    font-family: 'Open Sans';
    text-align: center;
    font-weight: 600;
    color: #6d6d6d;
    margin-bottom: 15px;
}

.spotsCta__box p span {
    color: #1b1b1b;
}

.modal__btn {
    color: white;
    text-decoration: none;
    background: #ef7d00;
    transition: 0.15s;
    border-radius: 50px;
    padding: 1em 2em;
    margin-top: 10px;
    display: block;
    font-size: 15px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    transform: scale(0.95);
    text-align: center;
}

.modal__btn:hover {
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    transform: scale(1);
}

@-webkit-keyframes animate-move-bg {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-100%) translateY(100vh);
        transform: translateY(-100%) translateY(100vh);
    }
}

@keyframes animate-move-bg {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-100%) translateY(100vh);
        transform: translateY(-100%) translateY(100vh);
    }
}

.previsions__cta {
    position: relative;
    float: left;
    width: 100%;
    float: left;
    width: 100%;
    padding: 30px;
    text-align: center;
    overflow: hidden;
}

.previsions__cta h2 {
    color: white;
    font-weight: 700;
    font-size: 2vw;
    position: relative;
    z-index: 3;
}

.previsions__cta p {
    color: white;
    font-size: 16px;
    text-align: center;
    position: relative;
    z-index: 3;
}

.previsions__cta a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    background-image: #ef7d00;
    transition: 0.5s;
    background-size: 200% auto;
    border: 6px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding: 1em 2em;
    margin-top: 10px;
    display: block;
    font-size: 15px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    transform: scale(0.95);
    text-align: center;
    display: inline-block;
    position: relative;
    z-index: 3;
}

.previsions__cta--overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
}

.previsions__cta--bg {
    background-image: url('https://images.unsplash.com/photo-1441829266145-6d4bfbd38eb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2c5fee8410b4ef77be8cd5191f13f9f2&auto=format&fit=crop&w=1402&q=80');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    filter: blur(1px);
    transition: 0.5s all ease;
}

.previsions__cta:hover .previsions__cta--bg {
    filter: blur(6px);
}

.previsions__cta a:hover {
    background-position: right center;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
    transform: scale(1);
}

.footer__dlApp {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px;
    z-index: 40;
    transition: 0.5s all ease;
    transform: translateY(45vh);
    background-color: #fff;
    color: #2e4770;
    font-weight: 700;
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    width: 100%;
}

.footer__dlApp img {
    float: left;
    width: 30px;
}

.footer__dlApp span {
    float: left;
    width: calc(100% - 40px);
    margin-left: 10px;
    line-height: 30px;
}

.footer__dlApp.active {
    opacity: 1;
    transform: translateY(0);
}


/* Classes orientation vent/houle */

.orientation_n {
    transform: rotate(-90deg);
}

.orientation_nne {
    transform: rotate(-67.5deg);
}

.orientation_ne {
    transform: rotate(-45deg);
}

.orientation_ene {
    transform: rotate(-22.5deg);
}

.orientation_e {
    transform: rotate(0deg);
}

.orientation_ese {
    transform: rotate(22.5deg);
}

.orientation_se {
    transform: rotate(45deg);
}

.orientation_sse {
    transform: rotate(67.5deg);
}

.orientation_s {
    transform: rotate(90deg);
}

.orientation_sso {
    transform: rotate(112.5deg);
}

.orientation_so {
    transform: rotate(135deg);
}

.orientation_oso {
    transform: rotate(157.5deg);
}

.orientation_o {
    transform: rotate(180deg);
}

.orientation_ono {
    transform: rotate(202.5deg);
}

.orientation_no {
    transform: rotate(225deg);
}

.orientation_nno {
    transform: rotate(257.5deg);
}

.commune__menu--catch {
    position: absolute;
    width: 100%;
    line-height: 21px;
    text-transform: none;
    font-size: 13px;
    bottom: 0;
    left: 0;
    border-top-right-radius: 45%;
    padding: 20px;
    text-align: left;
    font-size: 12.5px;
    padding-top: 28px;
    background: linear-gradient(-45deg, #2e4770 0%, #336799 100%);
}

.commune__menu--catch p {
    color: white;
    font-weight: 700;
    font-size: 0.9vw;
}

@media screen and (max-width: 1099px) {
    .commune__menu--catch p {
        font-size: 1.1vw;
    }
}

@media screen and (max-width: 1200px) {
    .spot__card.card__item.card__prise {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .commune__menu--catch {
        display: none;
        visibility: hidden;
    }
    .commune__menu--catch p {
        font-size: 14px;
    }
    .spot__card.card__item.card__prise {
        max-width: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .previsions__cta h2 {
        font-size: 26px;
    }
    .previsions__cta p {
        font-size: 14px;
    }
    .eventAlert {
        display: none !important;
        visibility: hidden !important;
    }
    .eventAlert.alertCopecheurs {
        display: block !important;
        visibility: visible !important;
        top: auto;
        position: fixed;
        bottom: 20px;
        left: 20px;
    }
}

@media screen and (max-width: 768px) {
    .previsions__cta h2 {
        font-size: 22px;
    }
    .spotsCta__box {
        position: relative;
        width: 100%;
        max-width: none;
        float: left;
        margin: 0;
        left: 0;
        right: 0;
        top: 0;
    }
    .eventAlert {
        left: 0;
        right: 0;
        top: 0;
    }
    .eventAlert.alertCopecheurs {
        right: 20px;
        width: calc(100% - 40px);
    }
}

@media screen and (max-width: 580px) {
    .previsions__cta {
        padding: 15px;
    }
    .previsions__cta h2 {
        font-size: 17px;
    }
    .previsions__cta p {
        font-size: 12px;
    }
    .previsions__cta a {
        font-size: 10px;
    }
}

.slfBloc__commune {
    padding-top: 80px;
    padding-bottom: 80px;
    background: url("/static/photo_site/bg_slfBloc_commune.jpg") center center;
    background-size: cover;
}

.box {
    padding: 30px;
    margin: 16px;
    background: white;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.box h2 {
    font-size: 42px;
    line-height: 42px;
    font-weight: 700;
    color: #1b1b1b;
}

.box span {
    color: #ef7d00;
    font-size: 40px;
}

.box h3 {
    font-size: 18px;
    color: #484848;
}

.box p {
    font-size: 16px;
    margin-bottom: 10px;
}

.box a {
    font-size: 14px;
}

#slfButton {
    opacity: 0;
    transform: translateY(50%);
    transition: 0.5s all ease;
}

#slfButton.active {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 1680px) {
    .box h2 {
        font-size: 36px;
        line-height: 36px;
    }
}

@media screen and (max-width: 1500px) {
    .box h2 {
        font-size: 30px;
        line-height: 30px;
    }
    .box h3 {
        font-size: 14px;
        color: #484848;
    }
    .box p {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .box a {
        font-size: 13px;
    }
}

@media screen and (max-width: 1400px) {
    .box h3 {
        font-size: 14px;
        color: #484848;
    }
    .box p {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .box a {
        font-size: 12px;
    }
}



/* bugfix prises abonné */

.listePrises__slf article.card__prise .slf__card--header {
    display: block;
    height: auto;
}

.ht__container {
    width: 70px;
    float: left;
    padding: 10px
}



/* panier */

.article__shop {
    padding-top: 0;
    padding-bottom: 0;
}

.product__item {
    margin: 7.5px 0;
    padding: 0 10px;
    float: left;
    width: 100%;
    background: white;
    overflow: hidden;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.product__item:hover {
    box-shadow: 0 0px 10px 2px rgba(0, 0, 0, 0.1);
}

.product__item--header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    float: left;
    width: 100%;
    padding: 4px 0px;
}

#pTiers .entete__prix {
    float: left;
    width: 100%;
    font-size: 16px;
    padding: 15px;
    margin-bottom: 20px;
    background: #ef7d00;
    color: white;
}

#pTiers .product__item--title {
    float: left;
    line-height: 40px;
    font-weight: 700;
    color: #306088;
}

#pTiers .tarif {
    line-height: 40px;
    text-align: right;
    float: right;
    font-weight: 700;
    color: #6d6d6d;
}

#pTiers .product__item--content {
    padding: 10px 0;
    float: left;
    width: 100%;
}

#pTiers .product__item .col__droite .select {
    float: right;
    position: relative;
    display: block;
    width: 60px;
    height: 32px;
    background: white;
    overflow: hidden;
    margin: 0 auto;
    font-size: 14px;
    border-radius: 3px;
    cursor: pointer;
}

#pTiers .product__item .col__droite select {
    float: left;
    line-height: 30px;
    height: 32px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    /* border: 0 !important; */
    background: white;
    background-image: none;
    color: #6d6d6d;
    border-radius: 0;
    font-size: 14px;
    width: 60px;
    border: 2px solid #cecece;
}

#pTiers .product__item .col__droite select:focus-within {
    border: 2px solid #3d89c1;
}

#pTiers .product__item .col__droite .select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 7px 4px 4px 4px;
    /* background: #ef7d00; */
    pointer-events: none;
    color: #3d89c1;
}

.article__content a.submit {
    float: left;
    padding: 10px 15px;
    margin-top: 20px;
    background-image: linear-gradient(45deg, #188e2c 0%, #40b547 51%, #188e2c 100%);
    background-size: 200% auto;
    color: white;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    cursor: pointer;
    border-radius: 30px;
}

.article__content a.submit:hover {
    background-position: center right;
}

.article__shop h2 {
    margin: 0;
    float: left;
    padding: 10px 0;
}

.sidebar__profile {
    padding: 0;
    background: white;
    box-shadow: 0 0px 5px 0px rgba(0, 0, 0, 0.1);
}

.sidebar__profile--content {
    width: 100%;
    float: left;
    padding: 20px;
    margin-top: 0;
}

input[type=email].product__item--input,
input[type=text].product__item--input {
    float: left;
    clear: none;
    border: none;
    background: #efefef;
    border-radius: 3px;
    width: 100%;
    margin: 10px 0;
}

input[type=text].product__item--input.expiration {
    width: calc(50% - 5px);
    margin-right: 5px;
}

input[type=text].product__item--input.jjmmaa {
    width: calc(33.3333333% - 5px);
    margin-right: 5px;
}

.tarif__form {
    line-height: 40px;
}

.box--panier {
    width: 100%;
    float: left;
    background: white;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    margin: 16px 0;
    padding: 15px;
}

.tarif__form {
    float: right;
    margin-right: 20px;
    line-height: 60px;
    font-weight: bold;
    font-size: 14px;
}

.input__carte--panier p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    color: #2e4770;
    font-weight: 700;
    margin-bottom: 5px;
}

.input__carte.input__carte--panier {
    padding-left: 15px;
    padding-right: 15px;
}

.article__shop .stats__overview--header .date {
    display: inline-block;
    margin-right: 10px;
}


.slf__commenter--send {
    border: none;
    display: block;
    float: left;
    width: 40px;
    height: 40px;
    background: #2e4770;
    color: white;
}

.slf__commenter--send:hover {
    background: #3d5e94;
}

.comment__header {
    float: left;
    width: 100%;
}

.comment__content {
    float: left;
    width: 100%;
    padding-left: 70px;
    padding-right: 30px;
    padding-bottom: 15px;
}

.comment__content p {
    margin: 0;
}

.ht__container {
    width: 70px;
    float: left;
    padding: 10px;
}

.header-rang {
    float: right;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 20%;
    height: 70px;
    padding: 17px 0;
}

.header-rang p {
    margin: 0;
    font-size: 16px;
    color: #666;
    font-weight: 700;
    line-height: 1;
}

.header-rang span {
    color: #aaa;
    font-size: 12px;
}

.slf__like,
.slf__comment {
    float: right;
    margin-right: 20px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 12px;
}

.slf__like i,
.slf__comment i {
    font-size: 18px;
    color: #666;
}

.slf__like>i {
    line-height: 40px;
}

.slf__comment>i {
    line-height: 38px;
}

.slf__like:hover>i {
    color: #ef7d00;
}

.slf__comment:hover>i {
    color: #2e4770;
}


.slf__poster {
    background: white;
    float: left;
    width: 100%;
    margin: 0 0 24px 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 10px 10px 16px rgba(55, 84, 170, 0.05), -10px -10px 18px #f1f1f1;
}

.modal-content .slf__poster {
    margin-bottom: 0;
    box-shadow: none;
}

.modal-content .slf__commune {
    margin-bottom: 6px;
}

#modalChoixCommunes.active {
    display: block;
}

#modalChoixCommunes .select-communes {
    min-height: 0;
    padding: 10px;
}

.slf__send-container {
    display: none;
}

.slf__poster.active .slf__send-container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.slf__send-container .slf__commune span {
    font-size: 13px;
    font-family: 'Lato', sans-serif;
}

.tag-comm-concernees {
    margin-right: 8px;
}


@media screen and (max-width: 768px) {
    .slf__poster.active .slf__send-container {
        display: block;
    }
    .slf__poster.active .slf__send-container .tag-comm-concernees {
        float: left;
        width: 100%;
    }
    .slf__commune {
        margin: 5px 0;
    }
    .slf__post--send {
        width: 100%;
    }
}

.slf__poster--location {
    padding: 20px 0 20px 20px;
    font-size: 16px;
    display: inline-block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #666;
}

.slf__poster form {
    background: white;
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 0;
}

#modalPosterMessage .slf__poster form {
    height: 100%;
}

.slf__poster form textarea {
    width: calc(100% - 70px);
    resize: none;
    padding: 15px;
    padding-right: 25px;
    padding-top: 25px;
    font-family: 'Open Sans';
    color: #1b1b1b;
    font-size: 14px;
    border: none;
}

.slf__poster form textarea:focus {
    outline: none;
}

.slf__poster--footer {
    width: 100%;
    padding: 10px;
    float: left;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.slf__poster--send {
    border: none;
    background: #2e4770;
    color: white;
    float: right;
    width: 80px;
    height: 80px;
    border-radius: 47%;
    transform: translateX(10%);
    margin-top: -15px;
    font-size: 18px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.slf__poster--send:hover {
    background: #3d5e94;
    width: 85px;
}

.slf__posterImg--container {
    float: left;
}

.slf__posterVid--container {
    float: left;
    display: none;
    width: 100%
}

.slf__location--input {
    border: none;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #2e4770;
    padding: 5px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    text-decoration: underline;
}

.slf__location--input:focus {
    outline: none;
    color: #96aed4;
}

.slf__poster--media {
    padding: 10px;
    padding-top: 0;
    border-top: none;
    float: left;
}

.slf__commune {
    position: relative;
    float: left;
    text-align: center;
    overflow: hidden;
    background: #efefef;
    margin-right: 8px;
    padding: 5px 10px;
    height: auto;
    border-radius: 70px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 2px solid transparent;
}

.slf__commune:hover {
    background: #f7f7f7;
}

.slf__commune:hover span {
    color: #3d5e94;
}

.slf__commune span {
    font-size: 16px;
    color: #2e4770;
    font-weight: 700;
}

.slf__pic--input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.slf__postType {
    display: flex;
    align-items: center;
    position: relative;
    color: #2e4770;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 13px;
    padding: 10px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    background: rgba(0, 0, 0, 0.04);
    background: #ef7d00;
    color: white;
    border-radius: 40px;
    margin-right: 8px;
    text-align: center;
}

.slf__postType img {
    height: 16px;
    margin-right: 5px;
}

.slf__postType .fa {
    margin-right: 5px;
    font-size: 16px;
}

.slf__postType:hover {
    text-decoration: none;
    background: #ff9623;
}

.slf__postType--link {
    padding: 0 20px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    height: 50px;
    line-height: 50px;
}

.slf__send-container {
    justify-content: flex-end;
    float: left;
    width: 100%;
    padding: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.btn__editer {
    background-image: none;
    background: #f7f7f7;
    float: left;
    width: auto;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    color: #2e4770;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.btn__editer:hover {
    background: #efefef;
}

@media screen and (max-width: 767px) {
    .slf__prise {
        font-size: 12px;
        padding: 0 5px;
    }
    .slf__poster--send {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-top: 2.5px;
        font-size: 14px;
        transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
        margin-right: 10px;
    }
    .slf__poster--send:hover {
        width: 45px;
    }
}

.img-inv {
    display: none;
}

.img-visible {
    display: block;
    width: 100%;
    display: block;
    float: left;
}

.discussion__sub {
    padding: 15px 70px;
    background: #efefef;
}

.concours__inputDiscussion {
    width: 100%;
    position: sticky;
    top: calc(100vh - 70px);
    display: block;
    bottom: 0;
    background: white;
}

.concours__inputDiscussion .slf__commenter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 70px;
}

.concours__inputDiscussion input {
    font-size: 14px;
    min-height: 40px;
    height: auto;
    resize: none;
    border-radius: 40px;
    background: #efefef;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border: 1px solid transparent;
    box-shadow: none;
    padding: 10px 30px 10px 15px;
    line-height: 1.42857143;
    text-align: left;
    margin-right: 10px;
}

.concours__inputDiscussion input:focus,
.concours__inputDiscussion input:focus-within {
    outline: none;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.concours__inputDiscussion--send {
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    cursor: pointer;
    border: none;
    background: linear-gradient(45deg, #2e4770 0%, #448fce 100%);
}

.concours__inputDiscussion--send:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 1200px) {
    .discussion__sub {
        padding: 15px 40px;
    }
}

@media screen and (min-width: 768px) {
    .visible_768 {
        display: none;
    }
    .invisible_768 {
        display: flex;
    }
}

@media screen and (max-width: 768px) {
    .visible_768 {
        display: block;
    }
    .invisible_768 {
        display: none;
    }
    .concours__inputDiscussion {
        position: fixed;
        bottom: 0;
        left: 0;
        top: auto;
    }
    .discussion__sub {
        padding: 15px 0;
    }
}

.allPrev__link {
    float: right;
    margin: 28px 16px;
    color: white;
    padding: 10px;
    width: auto;
    background-image: linear-gradient(70deg, #2e4770 0%, #337ab7 70%);
    background-size: 200% auto;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.allPrev__link:hover {
    background-position: right center;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

.allPrev__link--pc {
    display: block;
}

.allPrev__link--mobile {
    display: none;
}

@media screen and (max-width: 1400px) {
    .allPrev__link {
        font-size: 12px;
    }
}

@media screen and (max-width: 1330px) {
    .allPrev__link--pc {
        display: none;
    }
    .allPrev__link--mobile {
        display: block;
        float: left;
        margin: 0;
        text-align: center;
        width: 100%;
    }
}

.spots__legende {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: white;
    padding: 15px;
    max-width: 180px;
    box-shadow: 0 0px 9px 2px rgba(0, 0, 0, 0.1);
}

.spots__legende h3 {
    text-align: left;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
}

.spots__legende--item {
    line-height: 20px;
    float: left;
    width: 100%;
    text-align: left;
    font-weight: 700;
    color: #666;
    margin: 3px 0;
}

.spots__legende--item img {
    float: left;
    height: 20px;
}

.experienceCommune__cta .experience__card--header {
    position: absolute;
    bottom: 0;
}

.experienceCommune__cta .experience__card--header .experience__name {
    color: white;
    font-weight: 700;
    font-size: 21px;
}

.experienceCommune__cta .experience__card--header a {
    display: inline-block;
    margin-top: 10px;
    background: #ef7d00;
    padding: 0.5em 1em;
    font-size: 16px;
    color: white;
    border-radius: 25px;
}


#previsions__modal--container {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 24;
    top: 0;
    left: 0;
    background: rgba(20, 20, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.previsions__modal {
    z-index: 2;
    background: white;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Lato', sans-serif;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    padding: 0;
    border-radius: 3px;
    position: relative;
    box-shadow: 0 0px 15px 10px rgba(0, 0, 0, 0.1);
    height: auto;
    top: auto;
    right: auto;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 90%;
    overflow: hidden;
    max-width: 450px;
}

.previsions__modal .modal__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    float: left;
    flex: 1 1 60%;
    min-width: 200px;
    max-width: 100%;
    padding: 30px;
}

.previsions__modal .modal__left.hide-on-mobile {
    /* display: flex !important; */
    display: none;
}

.previsions__modal .modal__right {
    background: #2e4770;
    flex: 1 1 33%;
    min-width: 200px;
    max-width: 100%;
    padding: 30px;
}

.previsions__modal .modal__right h3 {
    color: white;
    margin-bottom: 10px;
}

.previsions__modal .modal__right p {
    text-align: left;
    color: white;
    font-size: 13px;
    font-weight: 400;
}

.popup_block .collab__modal {
    max-width: 400px;
}

.commune__content.--disabled {
    overflow: hidden;
    height: 70vh;
}

.commune__content.--disabled .previsions__nav {
    top: 0;
}

.cta__spotEspece {
    padding: 20px;
    background: #efefef;
    margin-bottom: 20px;
    border-radius: 7px;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.cta__spotEspece--img {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.cta__spotEspece--content {
    margin-top: 0;
    position: relative;
    float: left;
    background: #30496e;
    padding: 30px;
    border-radius: 3px;
    width: 50%;
    z-index: 2;
}

.cta__spotEspece--content h3 {
    font-size: 20px;
    font-weight: bold;
    color: white;
    margin-bottom: 15px;
}

.wrapper__text .cta__spotEspece--content p {
    line-height: 30px;
    color: white;
    font-size: 16px;
    margin-bottom: 20px;
}

.cta__spotEspece--content a {
    font-size: 16px;
    background: #e08245;
    padding: 10px 20px;
    border-radius: 3px;
    left: 30px;
    color: white;
    display: inline-block;
}

.cta__spotEspece h2 {
    margin-top: 0;
}

.cta__spotEspece--links {
    margin-top: 10px;
}

.fonds--lire {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #ef7d00;
    box-shadow: 0 0px 9px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.fonds--lire a {
    text-align: left;
    display: inline-block;
    color: white;
    font-weight: 700;
    font-size: 15px;
    padding: 12px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.fonds--lire:hover {
    background: #ef7d00;
    box-shadow: 0 0px 15px 4px rgba(0, 0, 0, 0.1);
}

.fonds--lire:hover a {
    color: white;
}

.spot__type {
    width: 100%;
    margin: 10px 0;
    float: left;
    display: flex;
}

.spot__type--left {
    width: 40%;
}

.spot__type--right {
    width: 60%;
    float: left;
    padding: 20px;
}

img.spot__type--img {
    margin: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 625px) {
    .spot__type {
        flex-direction: column;
    }
    .spot__type--left {
        width: 100%;
    }
    .spot__type--right {
        width: 100%;
    }
    .spot__type--title h3 {
        font-size: 16px;
    }
    .slf__poster--media {
        display: block;
        float: left;
    }
    .slf__postType {
        font-size: 12px;
        display: inline-block;
        margin: 2.5px;
    }
    .slf__postType .fa {
        font-size: 12px;
    }
    .slf__postType img {
        height: 12px;
    }
}

.spot__type--title {
    float: left;
    width: 100%;
    padding-bottom: 15px;
}

.spot__type--title img {
    width: auto;
    float: left;
    height: 35px;
    margin: 0;
    padding-right: 10px;
}

.faqArticle__content.commentutiliser .spot__type--title h3 {
    margin: 0;
    line-height: 35px;
    float: left;
    font-weight: 600;
    color: #2e4770;
    font-size: 18px;
}

.spot__type--content {
    float: left;
    width: 100%;
}

.spot__type--content p {
    float: left;
}

.faqArticle__content.commentutiliser h1 {
    margin-bottom: 20px
}

.faqArticle__content.commentutiliser h2 {
    margin-top: 0;
    margin-bottom: 22px;
}

.faqArticle__content.commentutiliser h3 {
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    font-size: 22px;
    margin-left: -1.63px;
    line-height: 1.22;
    letter-spacing: -.012em;
    color: #2e4770;
}

.faqArticle__content.commentutiliser i {
    font-size: 16px;
}

.slf__communeService {
    position: relative;
    float: left;
    width: 100%;
    background: white;
    transition: 0.25s all ease;
    overflow: hidden;
    margin: 20px 0;
}

.slf__communeService:hover {
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.slf__communeService.inactive:hover .slf__communeService-link h2 {
    color: white;
}

.slf__communeService-link {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 74;
    overflow: hidden;
    background: #2e4770;
    padding: 30px 16px;
}

.slf__communeService-link {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 74;
    overflow: hidden;
    background: #2e4770;
    padding: 30px 16px;
    height: 120px;
}

.slf__communeService-link h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: white;
    margin: 0;
    z-index: 3;
    font-size: 20px;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    transition: 0.25s all ease;
}

.slf__communeService:hover h2 {
    transform: scale(1.02);
}


.stat {
    width: 20%;
    margin: 10px 0;
    float: left
}

.stat__name {
    letter-spacing: normal;
    color: #2e4770;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    margin: 0
}

.stat__number {
    margin: 0;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 20px
}

.stat__rank {
    margin: 0;
    color: #ef7d00
}

.stat__bar {
    width: 80%;
    margin-top: 5px;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 5px
}

.stat__bar--progress {
    height: 6px;
    float: left;
    width: 58%;
    background: #2e4770
}

#classement__stats {
    margin-top: 0
}

.button__more {
    border: 2px solid #666;
    color: #666;
    font-size: 18px;
    font-weight: 700;
    border-radius: 100%;
    height: 50px;
    width: 50px;
    line-height: 50px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.button__more i {
    color: #666;
    font-size: 26px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.button__more:hover {
    color: #ef7d00;
    border: 2px solid #ef7d00;
}

.button__more:hover i {
    color: #ef7d00;
}

@media screen and (max-width: 768px) {
    .stat {
        width: 50%;
    }
    .slf__communeService-link h2 {
        font-size: 18px;
    }
    .communeExpe__nav--sorties {
        display: block;
    }
    .communeExpe__nav--sorties .concours__title {
        float: left;
        width: 100%;
    }
    .communeExpe__nav--sorties .button__gradient {
        position: relative;
        right: 0;
        margin-top: 15px;
    }
}

@media screen and (max-width: 684px) {
    .indice__explication {
        margin-left: 0;
        margin-top: 16px;
    }
}

.input__collab {
    background-color: white;
    padding: 1.6em 1em;
}

.input__collab p {
    display: block;
    float: left;
    font-weight: 700;
    line-height: 24px;
}

.switch {
    position: relative;
    display: block;
    float: right;
}

.switch-input {
    display: none;
}

.switch-label {
    display: block;
    width: 48px;
    height: 24px;
    text-indent: -150%;
    clip: rect(0 0 0 0);
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.switch-label:before,
.switch-label:after {
    content: "";
    display: block;
    position: absolute;
    cursor: pointer;
}

.switch-label:before {
    width: 100%;
    height: 100%;
    background-color: #d61a1a;
    border-radius: 9999em;
    transition: background-color 0.25s ease;
}

.switch-label:after {
    top: 2px;
    left: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    transition: left 0.25s ease;
}

.switch-h3 .switch-label {
    display: block;
    width: 38px;
    height: 19px;
}

.switch-h3 .switch-label:after {
    width: 15px;
    height: 15px;
}

.switch-input:checked+.switch-label:before {
    background-color: #89c12d;
}

.switch-input:checked+.switch-label:after {
    left: 27px;
}

.switch-h3 .switch-input:checked+.switch-label:after {
    left: 21px;
}

.commune__sidebar.sidebar--monCompte {
    background: white;
    padding: 30px 0;
}

.commune__sidebar.sidebar--monCompte.sidebar--messagerie {
    padding: 0;
    height: calc(100vh - 60px);
    width: 300px;
}

.commune__content.main--messagerie {
    width: calc(100% - 300px);
}

.messagerie__header {
    float: left;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: white;
    box-shadow: 10px 10px 16px rgba(55, 84, 170, 0.05), -10px -10px 18px #f1f1f1;
}


/* Custom scrollbar webkkit (chrome, edge, safari) */

.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul {
    height: calc(100% - 68px);
    overflow-y: scroll;
}

.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul::-webkit-scrollbar-track,
.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul::-webkit-scrollbar {
    width: 6px;
}

.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul::-webkit-scrollbar-track,
.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 10px;
    width: 6px;
}

.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.0);
    border-radius: 10px;
}

.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul {
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}

.commune__sidebar.sidebar--monCompte.sidebar--messagerie ul:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.commune__sidebar.sidebar--monCompte h1 {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    padding-left: 30px;
}

.monCompte__nav {
    padding: 0;
    list-style-type: none;
}

.monCompte__nav--item a {
    width: 100%;
    padding-left: 23px;
    padding-top: 9px;
    padding-bottom: 9px;
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    border-left: 7px solid transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.monCompte__nav--item a:hover {
    color: #2e4770;
}

.monCompte__nav--item.selectedmenu a {
    border-left: 7px solid #2e4770;
    color: #2e4770;
}

.monCompte__nav--item.selected .estNonLu {
    color: white;
}

.monCompte__main {
    padding: 32px 20px;
    min-height: calc(100vh - 60px);
}


#monCompteCollab {
    transition: 0.25s all ease;
}

#monCompteCollab .collabnone {
    display: none;
}

.menuMonCompteCollab.collabnone {
    display: none;
}

#CollabBoat {
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

#CollabBoat.collabnone {
    display: none;
}

.monCompte__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
}

.monCompte__input {
    position: relative;
    overflow: hidden;
}

.monCompte__input--container {
    position: relative;
    float: left;
    width: 100%;
}

.monCompte__input p,
.monCompte__input input[type="text"].p,
.monCompte__input input[type="password"].p,
.monCompte__input input[type="number"].p,
.monCompte__input input[type="datetime"].p {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    background: #ebebeb;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}

.monCompte__input input[type="text"].p:focus,
.monCompte__input input[type="password"].p:focus,
.monCompte__input input[type="number"].p:focus,
.monCompte__input input[type="datetime"].p:focus {
    border: 1px solid #ef7d00;
}

.monCompte__input input[type="text"],
.monCompte__input input[type="password"],
.monCompte__input input[type="number"],
.monCompte__input input[type="datetime"] {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #2b2b2b;
    padding: 19px 10px;
    background: white;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    animation-name: bg;
    animation-duration: 0.15s;
    animation-fill-mode: forwards;
    outline: none;
    height: 38px;
}

.monCompte__input button {
    position: absolute;
    right: 7px;
    top: 6px;
    height: 30px;
    width: 30px;
    text-align: center;
    padding: 0;
    border-radius: 30px;
    line-height: 30px;
    background: #89c12d;
    border: none;
    color: white;
    animation-name: savebtn;
    animation-duration: 0.15s;
    animation-delay: 0.15s;
    animation-fill-mode: backwards;
}

@keyframes savebtn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes bg {
    from {
        background: #ebebeb;
    }
    to {
        background: white;
    }
}

.monCompte__input--button {
    position: absolute;
    top: 6px;
    right: 7px;
    animation-name: savebtn;
    animation-duration: 0.15s;
    animation-delay: 0.15s;
    animation-fill-mode: backwards;
}

.monCompte__input--button .fa {
    height: 30px;
    width: 30px;
    background: #2e4770;
    display: block;
    color: white;
    text-align: center;
    line-height: 30px;
    border-radius: 50px;
    cursor: pointer;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.image__modifier {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.image__modifier span {
    float: left;
    width: 50%;
    padding: 5px;
}

.image__modifier .fa {
    height: 30px;
    width: 30px;
    border-radius: 30px;
    display: block;
    color: white;
    text-align: center;
    line-height: 30px;
    background: rgba(0, 0, 0, 0.7);
}

#image_preview img {
    width: 100%;
}


/* Form Radio */

.form-radio {
    display: inline-flex;
    align-items: flex-start;
    cursor: pointer;
}

.form-radio__input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.form-radio__icon {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 1px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    box-sizing: border-box;
    transition: border-color 200ms linear;
}

.form-radio__icon:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: box-shadow 200ms ease-in;
}

.form-radio:hover .form-radio__input:enabled+.form-radio__icon {
    border-color: #6d6d6d;
}

.form-radio__input:enabled:focus+.form-radio__icon {
    border-color: #2b2b2b;
    box-shadow: 0 0 3px rgba(169, 169, 169, 0.5);
}

.form-radio__input:checked+.form-radio__icon:before {
    box-shadow: inset 0 0 0 5px #2e4770;
}

.form-radio__label {
    padding: 0 5px;
    line-height: 18px;
    font: 16px/1 'Lato';
}


/* Checkboxes */

.checkbox__collab .checkbox-group {
    font: 16px/1.4 'Lato';
    position: relative;
}

.checkbox__collab input[type=checkbox] {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 4;
    cursor: pointer;
    opacity: 0;
    margin: 0;
}

.checkbox__collab input[type=checkbox]+label {
    position: relative;
    display: flex;
    margin: 0.6em 0;
    align-items: center;
    color: #6d6d6d;
    transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);
}

.checkbox__collab .nokill input[type=checkbox]+label {
    margin: 0;
}

.checkbox__collab input[type=checkbox]+label>ins {
    position: absolute;
    display: block;
    bottom: 0;
    left: 1.5em;
    height: 0;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: height 300ms cubic-bezier(0.4, 0, 0.23, 1);
}

.checkbox__collab input[type=checkbox]+label>ins>i {
    position: absolute;
    bottom: 0;
    font-style: normal;
    color: #2e4770;
}

.checkbox__collab input[type=checkbox]+label>span {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5em;
    width: 1em;
    height: 1em;
    background: transparent;
    border: 2px solid #9E9E9E;
    border-radius: 2px;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);
}

.modal__row.checkbox__collab input[type=checkbox]+label>span,
.modal__row .checkbox__collab input[type=checkbox]+label>span,
.filtre__sortie .filter__tab .checkbox__collab input[type=checkbox]+label>span {
    border: 2px solid #ef7d00;
}

.checkbox__collab input[type=checkbox]+label:hover,
.checkbox__collab input[type=checkbox]:focus+label {
    color: #2e4770;
}

.checkbox__collab input[type=checkbox]+label:hover>span,
.checkbox__collab input[type=checkbox]:focus+label>span {
    background: rgba(255, 255, 255, 0.1);
}

.checkbox__collab input[type=checkbox]:checked+label>ins {
    height: 100%;
}

.checkbox__collab input[type=checkbox]:checked+label>span,
.filtre__sortie .filter__tab .checkbox__collab input[type=checkbox]:checked+label>span {
    border: 0.5em solid #ef7d00;
    animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);
}

.checkbox__collab input[type=checkbox]:checked+label>span:before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0.1em;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    transform: rotate(45deg);
    transform-origin: 0% 100%;
    animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;
}

.checkbox__collab .nokill {
    float: left;
    margin-right: 1em;
}

.pad520 {
    padding: 5px 20px
}

.monCompte__input textarea {
    border: none;
    outline: none;
    float: left;
    width: 100%;
    resize: none;
    height: 135px;
    font: 14px/1.2 'Lato';
    color: #666;
    font-weight: 700;
    padding: 20px;
    border-bottom: 5px solid transparent;
    transition: 0.25s all ease;
}

.monCompte__input textarea:focus {
    color: #2b2b2b;
    border-bottom: 5px solid #2e4770;
}

.collab__commune {
    position: relative;
    padding: 0 10px;
    background: #d8d8d8;
    border-radius: 5px;
    width: 100%;
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
}

.collab__commune span {
    color: #2b2b2b;
    font-weight: 700;
}

.collab__commune .monCompte__input--button .fa {
    color: #d61a1a;
    background: none;
    font-size: 1.5em;
    transition: 0.25s all ease;
}

.collab__commune .monCompte__input--button .fa:hover {
    transform: scale(1.2);
}

.collab__save {
    position: relative;
    display: block;
    overflow: hidden;
    float: left;
    width: 100%;
    margin: 10px 0;
    padding: 0;
    height: 3.5em;
    text-transform: uppercase;
    font: 700 1em/3.5em 'Open Sans', sans-serif;
    text-align: center;
    text-decoration: none;
    letter-spacing: .08em;
    color: #fff;
    background: #20a720;
    -moz-transition: ease 0.35s all;
    -o-transition: ease 0.35s all;
    -webkit-transition: ease 0.35s all;
    transition: ease 0.35s all;
    cursor: pointer;
}

.collab__save:hover {
    background: #1f8b1f;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
}

.collab__save:before {
    content: attr(data-text);
    color: #fff;
    position: absolute;
    top: -2.75em;
}

.collab__save.btn--blue {
    background: #2e4770;
}

.collab__save.btn--blue:hover {
    background: #1f304c;
}

@keyframes shrink-bounce {
    0% {
        transform: scale(1);
    }
    33% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes checkbox-check {
    0% {
        width: 0;
        height: 0;
        border-color: #fff;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }
    33% {
        width: 0.2em;
        height: 0;
        transform: translate3d(0, 0, 0) rotate(45deg);
    }
    100% {
        width: 0.2em;
        height: 0.5em;
        border-color: #fff;
        transform: translate3d(0, -0.5em, 0) rotate(45deg);
    }
}

.natural__language--text {
    display: block;
    float: left;
    line-height: 30px;
    text-transform: none;
    font-size: 14px;
    border-bottom: 1px solid transparent;
}

.natural__language--input {
    display: inline-block;
    height: 30px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    margin-left: 10px;
    color: #2e4770;
    margin: 0;
    padding: 0;
    border-bottom: 1px dotted;
    clear: none;
}

.natural__language--input:focus {
    outline: none;
}

.monCompte__input input[type="text"].collab__input,
.monCompte__input input[type="email"].collab__input,
.monCompte__input input[type="tel"].collab__input {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    background: #ebebeb;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    animation: none;
    color: #555;
}

.monCompte__input input[type="email"].collab__input,
.monCompte__input input[type="tel"].collab__input {
    width: 100%;
}

.monCompte__input input[type="text"].collab__input.collab__input--onlyborder {
    background: white;
}

.monCompte__input input[type="text"].collab__input:focus,
.monCompte__input input[type="email"].collab__input:focus,
.monCompte__input input[type="tel"].collab__input:focus {
    font-weight: 700;
    color: #2b2b2b;
    background: white;
    outline: none;
}

#noCollabYet p {
    font: 600 15px/1.4 'Open Sans';
}

#date.collab__input {
    background: white;
}

.header-price {
    position: absolute;
    right: 10px;
    color: white;
    background: #2e4770;
    font: 700 14px/1.2 'Open Sans';
    border-radius: 30px;
    padding: 5px 12px;
}

.bloc-boat {
    padding: 10px;
    margin: 0 0 24px 0;
}


.collab__profile-card {
    margin: 7.5px 0;
}

.collab__profile-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

.profile__card.collab__profile-card .profile__card--bg {
    filter: blur(0);
}

.collab__profile--name {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: -32px;
    padding-left: 10px;
}

.collab__profile--name .profile__picture {
    height: 60px;
    width: 60px;
    border: 2px solid white;
    float: left;
    margin: 0;
}

.collab__profile--name .profile__picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.collab__profile--pseudo {
    float: left;
    position: relative;
    z-index: 5;
    padding: 0 5px;
}

.collab__profile--name h2 {
    margin-bottom: 5px;
    color: white;
    font: 700 16px/1.4 'Lato';
    height: 22.4px;
}

.collab__profile--name p {
    color: #6d6d6d;
    position: relative;
    z-index: 4;
    font: 400 13px/1.4 'Open Sans';
}

.collab__profile--infos {
    padding: 10px;
    padding-top: 10px;
    float: left;
    width: 100%;
    height: 50px;
}

.collab__profile--infos .collab__commune {
    height: 25px;
    line-height: 25px;
}

.collab__profile--info {
    margin-bottom: 10px;
    float: left;
    margin-right: 5px;
    font-size: 11px;
    border-radius: 21px;
    padding: 5px 10px;
    float: left;
    margin-right: 5px;
    text-transform: uppercase;
    background: #ececec;
}

.collab__profile--info i {
    font-weight: 700;
}

.collab__profile--infos.--listeCommune {
    padding-bottom: 0;
    overflow: hidden;
}

.collab__profile--info.--genderM i {
    color: #2e4770;
}

.collab__profile--info.--genderF i {
    color: #ef7d00;
}

.collab__profile--info.--nokill i {
    color: #20a720;
    font-weight: 700;
}

.collab__profile--pres h2 {
    color: #2b2b2b;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    margin: 0px 0px 12px 0px;
}

.collab__profile--pres h3 {
    color: #6d6d6d;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    margin: 12px 0px 6px 0px;
}

.collab__profile--pres p {
    font: 400 16px/1.2 'Lato';
    color: #6d6d6d;
}

.profil__gridImg {
    float: left;
    width: 100%;
    padding: 7.5px;
    display: flex;
    /* align-items: center; */
    height: 150px;
}

.gridImg {
    padding: 7.5px;
}

.gridImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pic__boat {
    float: left;
    width: 100%;
}

.pic__boat img {
    width: 100%;
}

.bateau__propriete {
    text-align: left;
    width: 50%;
    float: left;
    padding: 5px;
}

.bateau__propriete span {
    text-transform: uppercase;
    color: #ef7d00;
    font: 700 14px/1.4 'Lato';
}

.bateau__propriete p {
    font: 400 14px/1.4 'Open Sans';
}

.collab__btn--off {
    background: none;
    border: 2px solid #ef7d00;
    color: #ef7d00;
    padding: 0.5em 1em;
    float: left;
    border-radius: 30px;
    font: 400 16px/1.4 'Lato';
    transition: 0.25s all ease;
    margin-top: 15px;
}

.collab__btn--off:hover {
    background: #ef7d00;
    color: white;
}

.sortieCollab__delete-button {
    background: #d61a1a;
    float: left;
    width: auto;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.sortieCollab__delete-button:hover {
    background: #a81414;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset;
}

.collab__profile--topBar {
    position: relative;
    width: 100%;
    float: left;
    background: white;
    margin-bottom: 24px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.collab__profile--topBar .topRetour,
.collab__profile--topBar h1 {
    line-height: 1.4;
    padding: 1em;
    font-size: 16px;
    display: block;
    float: left;
}

.collab__profile--topBar .topRetour {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    cursor: pointer;
}

.collab__profile--topBar .topRetour i {
    margin-right: 10px;
    font-weight: 700;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.collab__profile--topBar .topRetour:hover {
    background: #f5f4f4;
}

.collab__profile--topBar .topRetour:hover i {
    transform: translateX(-50%);
}

.collab__profile--topBar h1 {
    font-weight: 700;
    font-family: 'Lato';
}

.collab__profile--topBar .follow__btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #20a720;
    font: 400 14px/16px 'Open Sans';
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.5em 1em;
    border: 2px solid #20a720;
    border-radius: 50px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.collab__profile--topBar .follow__btn:hover {
    color: white;
    background: #20a720;
}

.collab__profile--topBar .follow__btn.active {
    color: white;
    background: #20a720;
}

.collab__profile--topBar .follow__btn.active:hover {
    background: #d61a1a;
    border: 2px solid #d61a1a;
}

.spotsCta__box a.collabDejaCompte {
    background: none;
    color: #2e4770;
    padding: 0;
    border: none;
    text-transform: none;
    transform: scale(1);
    margin-top: 15px;
}

.spotsCta__box a.collabDejaCompte:hover {
    box-shadow: none;
}

.card__prise--concours {
    float: left;
    width: 100%;
    background: white;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    margin: 7.5px 0;
}

.card__prise--photo {
    float: left;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card__prise--infos {
    padding: 15px;
    width: 100%;
    float: left;
}

.card__prise--infos h2 {
    font: 700 16px/1.4 'Open Sans';
    color: #1b1b1b;
}

.card__prise--infos a h2 {
    color: #2e4770;
}

.card__prise--infos a h2:hover {
    color: #355282;
}

.card__prise--infos h3 {
    font: 700 14px/1.4 'Lato';
    color: #6d6d6d;
    margin: 0;
}

.concours__stat--accueil {
    margin: 7.5px 0;
}

.concours__stat--accueil:first-child {
    margin-top: 0;
}

.concours__stat--accueil h4 {
    font: 700 14px/1.4 'Lato';
    text-transform: uppercase;
    color: #2e4770;
    font-weight: 700;
}

.concours__stat--accueil p {
    font: 700 14px/1.4 'Open Sans';
    color: #1b1b1b;
}

.concours__stats--accueil .button__blue {
    display: inline-block;
}

.dernieresPrises:nth-child(4) {
    display: none;
}

#listePrises .dernieresPrises:nth-child(4) {
    display: block;
}


@media screen and (max-width: 1100px) {
    .sidebar--monCompte {
        position: relative;
        float: left;
        width: 100%;
        height: auto;
        top: 0;
        box-shadow: none;
        z-index: 2;
    }
}

@media screen and (max-width: 992px) {
    .monCompte__main {
        padding: 15px 0px;
    }
    .collab__profile--name p {
        font: 400 12px/1.4 'Open Sans';
    }
    .collab__profile--infos .collab__commune {
        line-height: auto;
        height: auto;
        font-size: 12px;
    }
    .bateau__propriete span,
    .bateau__propriete p {
        font-size: 12px;
    }
    .collab__profile--infos {
        padding: 10px;
    }
    .dernieresPrises:nth-child(4) {
        display: block;
    }
}

article.article .bestfisher {
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.4);
}


.bloc__sr .your div {
    background: #ececec;
}

.bloc__sr .my {
    float: left;
}

.bloc__sr .my div {
    float: left;
}

.bloc__sr img {
    border-radius: 50%;
}

.toggle-messagerie {
    display: none;
}

@media screen and (max-width: 991px) {
    .commune__sidebar.sidebar--monCompte.sidebar--messagerie {
        width: 250px;
    }
    .commune__content.main--messagerie {
        width: calc(100% - 250px);
    }
    .commune__content.main--messagerie .my,
    .commune__content.main--messagerie .your {
        width: 85%;
        font-size: 13px;
    }
    .commune__content.main--messagerie .my div,
    .commune__content.main--messagerie .your div {
        padding: 8px;
    }
}

@media screen and (max-width: 600px) {
    .commune__sidebar.sidebar--monCompte.sidebar--messagerie {
        width: 280px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        opacity: 1;
        height: 100%;
        transition: 0.5s all ease;
        transform: translateX(-280px);
        border-right: none;
    }
    .commune__sidebar.sidebar--monCompte.sidebar--messagerie.active {
        z-index: 100;
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    .commune__content.main--messagerie {
        width: 100%;
        transition: 0.5s all ease;
    }
    .commune__content.main--messagerie.inactive {
        transform: translateX(280px);
    }
    .commune__content.main--messagerie:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.0);
        transition: .5s all ease;
        pointer-events: none;
        z-index: 3;
    }
    .commune__content.main--messagerie.inactive:after {
        background: rgba(0, 0, 0, 0.5);
    }
    .commune__content.main--messagerie.inactive .notifications__container a {
        pointer-events: none;
    }
    .container__messagerie {
        overflow: hidden;
    }
    .toggle-messagerie {
        position: relative;
        display: inline-block;
        width: 45px;
        height: 45px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: .1s all ease;
    }
    .toggle-messagerie:hover {
        background: #efefef;
    }
    .commune__content.main--messagerie .messagerie__title {
        display: flex;
        align-items: center;
        padding: 0 15px;
        z-index: 2;
    }
    .notifications__container .messagerie__title {
        position: sticky;
        top: 0;
    }
}

.stats__overview--carnet {
    background: white;
    box-shadow: 10px 10px 16px rgba(55, 84, 170, 0.05), -10px -10px 18px #f1f1f1;
    margin: 0 0 24px 0;
    border-radius: 4px;
    border: none;
}

.stats__overview--carnet .stats__overview--header h2 {
    font-size: 18px;
}

.stats__overview--carnet .stat {
    width: 25%;
}

.stats__overview--carnet .stats__overview--content {
    padding: 12px;
}

.slf__filtres {
    float: left;
    width: 100%;
    background: white;
    margin-bottom: 12px;
    z-index: 3;
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.06);
}

.slf__filtres ul {
    padding: 0;
}

.slf__filtres ul li {
    display: block;
    float: left;
}

.slf__filtres ul li a {
    display: block;
    float: left;
    width: 100%;
    text-align: center;
    color: #2e4770;
    font: 700 14px/1.2 'Lato';
    padding: 16px 0 12px 0;
    float: left;
    border-bottom: 4px solid transparent;
}

.slf__filtres ul li a:hover {
    text-decoration: none;
    color: #96aed4;
}

.slf__filtres ul li a.active {
    border-bottom: 4px solid #2e4770;
}

.slf__filtres ul li a.active:hover {
    color: #2e4770;
}

.slf__filtres ul li a.filterSelected {
    border-bottom: 4px solid #2e4770;
}

.slf__filtres ul li a.filterSelected:hover {
    color: #2e4770;
}

.slf__menu {
    position: sticky;
    top: 60px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: stretch;
    float: left;
    width: 100%;
    background: white;
    z-index: 99;
    box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.06);
    margin: 7.5px 0 15px 0;
}

.slf__currentLocation {
    height: 100%;
    background: #2e4770;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px 12px 16px;
    color: white;
}

.slf__currentLocation h2 {
    font: 400 14px/20px 'Lato';
    display: block;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.slf__currentLocation h2 .fa {
    margin-right: 4px;
}

.slf__currentLocation h2 span {
    font-weight: 700;
}

.slf__menu .slf__menu--items {
    padding: 0;
    display: flex;
    flex: 1;
}

.slf__menu .slf__menu--items li {
    flex: 1;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.slf__menu .slf__menu--items li a {
    display: block;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e4770;
    font: 700 14px/20px 'Lato';
    float: left;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    padding: 0px 16px 0 16px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    height: 50px;
}

.slf__menu .slf__menu--items li.menu__profileLink {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    max-width: 180px;
    padding: 0 10px;
}

.slf__menu .slf__menu--items li.menu__profileLink a {
    color: white;
    border: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    background: #2e4770;
    border-radius: 50px;
    padding: 4px 14px 4px 4px;
    height: auto;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slf__menu .slf__menu--items li.menu__profileLink a .header-thumbnail {
    margin-right: 7.5px;
    max-width: 30px;
    max-height: 30px;
}

.slf__menu .slf__menu--items li.menu__profileLink a:hover {
    background: #355282;
    color: white;
}

.slf__menu .slf__menu--items li.menu__profileLink a span {
    display: block;
    max-width: calc(100% - 37.5px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.slf__menu .slf__menu--items li a svg {
    width: 20px;
    height: auto;
    margin-right: 4px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.slf__menu .slf__menu--items li a .fa {
    margin-right: 8px;
    font-size: 18px;
}

.slf__menu .slf__menu--items li a:hover {
    text-decoration: none;
    color: #ef7d00;
    border-bottom-color: #ef7d00;
}

.slf__menu .slf__menu--items li a:hover svg path,
.slf__menu .slf__menu--items li.slfmenuSorties a:hover svg circle {
    fill: #ef7d00;
}

.slf__menu .slf__menu--items li a.active {
    border-bottom: 4px solid #ef7d00;
    color: #ef7d00;
}

.slf__menu .slf__menu--items li a.active svg path,
.slf__menu .slf__menu--items li.slfmenuSorties a.active svg circle {
    fill: #ef7d00;
}

.slf__menu .slf__menu--items li a.active:hover {
    color: #ef7d00;
}

.slf__menu .slf__menu--items li a.filterSelected {
    border-bottom: 4px solid #ef7d00;
}

.slf__menu .slf__menu--items li a.filterSelected:hover {
    color: #ef7d00;
}

.magasin__menu {
    display: flex;
    align-items: baseline;
    justify-content: space-evenly;
}

.listePrises__slf .spot__card.card__item.card__prise {
    cursor: default;
}

.propriete__espece {
    margin-bottom: 10px;
}

.propriete__espece span {
    text-transform: uppercase;
    font: 700 12px/1.2 'Lato';
    color: #6d6d6d;
}

.propriete__espece h2 {
    font: 700 20px/1 'Open Sans';
    color: #2b2b2b;
}

.propriete__espece p {
    font: 700 16px/1 'Open Sans';
    color: #2b2b2b;
}

.detail__prise--block {
    float: left;
    width: 100%;
}

.profile__gallery {
    margin-top: 7.5px;
    margin-bottom: 7.5px;
}

.profile__gallery a {
    width: 100%;
}

.profile__gallery img {
    width: 100%;
    height: 125px;
    object-fit: cover;
}

.profile__gallery--pic {
    margin: 10px 0;
}

.slf__post--delete {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 9;
}

.slf__post--delete .sortieCollab__delete-button {
    height: 2em;
    font: 700 12px/2em 'Open Sans', sans-serif;
}

.slf__p {
    font: 400 16px/1.5 'Lato';
    color: #6d6d6d;
    overflow-wrap: break-word;
}

.slf__p iframe {
    width: 100%;
}

.slf__p b {
    color: #1b1b1b;
}

.slf__vid embed {
    width: 100%;
    float: left;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 0;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.post__imgContainer {
    overflow: hidden;
    position: relative;
    float: left;
    width: 100%;
}


.fb__shareImg {
    position: absolute;
    right: 15px;
    bottom: 15px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.fb__shareImg a {
    display: block;
}

.fb__shareImg .fbbtn {
    font: 700 15px/1.2 'Open Sans';
}


.priseDetail__link {
    color: #2e4770;
    font: 700 13px/1.2 'Open Sans';
    margin-top: 10px;
    display: block;
    float: left;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    float: right;
}

.priseDetail__link:hover {
    color: #96aed4;
}

.button__gradient.slf__add {
    box-shadow: none;
}

.button__gradient.slf__add:hover {
    transform: none;
}

.button__orange.slf__add--sortie {
    border-radius: 0;
    width: 100%;
    text-align: center;
    float: left;
    margin: 10px 0;
    font-size: 18px;
}

.button__gradient--blue.clubCollabModal {
    box-shadow: none;
    font-size: 12px;
}

.button__gradient--blue.clubCollabModal:hover {
    transform: none;
}

.communeExpe__nav a.edit__spot--btn {
    margin-right: 0;
    padding: 1em 2em;
    float: left;
    text-transform: uppercase;
    font-weight: 700;
    color: #6d6d6d;
    text-align: center;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 12px;
    margin-top: 0;
    background: #ececec;
}

.communeExpe__nav a.edit__spot--btn:hover {
    background: #cecece;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0, 0.08);
}


.spot__zone {
    float: left;
    width: 100%;
    margin-bottom: 12px;
}

.avis__stars {
    font-size: 16px;
    margin-bottom: 7.5px;
}

.starSelected {
    color: #FF912C;
}

.starUnSelected {
    color: #cbcbcb;
}
.avis__stars--donner {
    margin-bottom: 12px;
    color: #cbcbcb;
}

.avis__stars--donner .star {
    cursor: pointer;
    font-size: 24px;
}

.star.selected {
    color: #FF912C;
}

.button__gradient--sm {
    box-shadow: none;
    font-size: 12px;
}

.button__gradient--sm:hover {
    transform: none;
    box-shadow: none;
}

.spot__reglementation {
    padding: 10px 0;
    font: 400 15px/25px 'Open Sans';
    color: #6d6d6d;
}

.btn__map--leftB {
    position: absolute;
    z-index: 2;
    bottom: 60px;
    left: 10px;
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.5);
}

.boatAnnonce__card {
    position: relative;
    float: left;
    width: 100%;
    transition: 0.35s all ease;
    border-radius: 4px;
    overflow: hidden;
    border: 3px solid transparent;
}

.boatAnnonce__card:hover {
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);
    border: 3px solid #2e4770;
}

.boatAnnonce__pic {
    float: left;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.boatAnnonce__pic img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    float: left;
    transition: 0.5s all ease;
    border-radius: 3px;
}

.boatAnnonce__card:hover img {
    transform: scale(1.02);
}

.slide-boat .boatAnnonce__pic {
    height: 120px;
}

.slide-boat .boatAnnonce__pic img {
    height: 120px;
}

.boatAnnonce__detail {
    float: left;
    width: 100%;
    padding: 15px;
}

.boatAnnonce__detail {
    font-size: 14px;
}

.boatAnnonce__detail h2 {
    font: 700 18px/1.2 'Open Sans', sans-serif;
    color: #2b2b2b;
    margin-bottom: 5px;
    height: 20px;
    overflow: hidden;
}

.boatAnnonce__new {
    text-transform: uppercase;
    color: #ef7d00;
    font: 700 12px/1.2 'Open Sans', sans-serif;
}

.boatAnnonce__tags {
    padding: 6px 0;
    margin: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.boatAnnonce__tags span {
    margin-right: 5px;
}

.boatAnnonce__prix {
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.boatAnnonce__prix p {
    text-align: right;
    font-size: 12px;
}

.boatAnnonce__prix p span {
    color: #2e4770;
    font: 700 15px/1.2 'Lato';
}

.form__contactVendeur {
    border: 3px solid #2e4770;
}

.form__contactVendeur .monCompte__input textarea {
    background: #ebebeb;
    border-radius: 5px;
    border: 2px solid #ebebeb;
    padding: 10px;
}

.form__contactVendeur .monCompte__input textarea:focus {
    font-weight: 700;
    color: #2b2b2b;
    background: white;
}

.btn__contactVendeur {
    width: 100%;
}

.button__gradient--blue.clubCollabModal.btn__contactVendeur {
    margin: 7.5px 0;
}

.btn__contactVendeur .fa {
    margin-right: 5px;
}

.monCompte__input input[type="tel"].collab__input {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    background: #ebebeb;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    animation: none;
    color: #555;
}

.nomVendeur {
    font: 700 18px/1.2 'Open Sans';
    color: #2b2b2b;
}

.villeVendeur {
    font: 400 16px/1.2 'Lato';
    color: #6d6d6d;
}

.article__boatPic {
    width: 100%;
    float: left;
}

.article__boatHeader {
    padding: 15px;
    float: left;
    width: 100%;
}

.article__boatHeader--left {
    float: left;
    width: 70%;
}

.article__boatHeader--right {
    float: left;
    width: 30%;
    margin-top: 11px;
}

.boatAnnonce__etat {
    text-transform: uppercase;
    color: #ef7d00;
    font: 700 12px/14px 'Open Sans';
}

h1.boatAnnonce__title {
    font: 700 26px/30px 'Open Sans';
    color: #2b2b2b;
}

.boatAnnonce__date {
    font: 700 16px/18px 'Lato';
    color: #6d6d6d;
}

.boatAnnonce__locationLink {
    font: 700 16px/18px 'Lato';
    color: #6d6d6d;
}

.article__boatApartir {
    text-align: right;
    font: 400 14px/18px 'Lato';
    color: #6d6d6d;
}

.article__boatHeader .article__boatPrice {
    text-align: right;
    font: 700 20px/22px 'Open Sans';
    color: #2b2b2b;
}

.article__boat .monCompte__box--content h2 {
    font-size: 18px;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #2b2b2b;
    margin-bottom: 10px;
}

.article__boat .monCompte__box--content p {
    font: 400 15px/25px 'Open Sans';
    color: #6d6d6d;
}

.article__boat .monCompte__box--content p span {
    font-weight: 700;
}

.boatAnnonce__row {
    float: left;
    width: 100%;
    padding: 15px 0;
}

.boatAnnonce__proprietes .bateau__propriete {
    text-align: left;
    margin: 5px;
    background: #ececec;
    padding: 5px;
    -ms-flex: 1 1 275px;
    -webkit-flex: 1 1 275px;
    flex: 1 1 150px;
    min-width: 150px;
    max-width: 100%;
}

.boatAnnonce__proprietes .bateau__propriete span {
    font-weight: 400;
    color: #6d6d6d;
}

.boatAnnonce__proprietes .bateau__propriete p {
    font-weight: 700;
    color: #2b2b2b;
}

.boatAnnonce__desc {
    margin: 0 5px;
}

.boatAnnonce__descPrix {
    font: 700 22px/30px 'Open Sans';
    color: #2b2b2b;
    margin: 0 5px;
}

.boatAnnonce__descPrix span {
    font: 600 14px/22px 'Open Sans';
    color: #6d6d6d;
}

.boatAnnonce_vendeurCard img {
    float: left;
    width: 180px;
    height: 180px;
    object-fit: cover;
}

.boatAnnonce_vendeurCard img.boat__pic {
    float: left;
    width: 240px;
    height: 240px;
    object-fit: cover;
}

.boatAnnonce_vendeurCard--desc {
    float: left;
    width: calc(100% - 180px);
    padding: 15px;
}

.boatAnnonce_vendeurCard--desc2 {
    float: left;
    width: calc(100% - 240px);
    padding: 15px;
}

.boatAnnonce_vendeurCard--desc .header-misc,
.boatAnnonce_vendeurCard--desc2 .header-misc {
    width: 100%;
    padding-top: 0;
}

.boatAnnonce_vendeurCard--desc .btn__contactVendeur,
.boatAnnonce_vendeurCard--desc2 .btn__contactVendeur {
    width: auto;
}

swiper-container {
    width: 100%;
    height: 300px;
    margin: 20px auto;
}

.swiper-slide-container {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    max-width: 600px;
    margin: auto;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.gallery-top {
    height: 80%;
    width: 100%;
}

.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.gallery-thumbs .swiper-slide {
    width: 20%;
    height: 100%;
    opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
    opacity: 1;
}

.title__boats,
.newRegionA h2.title__boats {
    float: left;
    font-size: 24px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #2b2b2b;
    padding-bottom: 8px;
    margin-top: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}

#pres__pro h2 {
    margin: 30px 0 10px 0;
    border-bottom: none;
}

#pres__pro h1 {
    font-size: 20px;
    margin: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #2b2b2b;
    padding-bottom: 8px;
}

#pres__pro img {
    margin-bottom: 10px;
}

#pres__pro p br:nth-child(2n+2) {
    display: none;
}

​ .allBoats__title {
    font: 700 32px/1.2 'Open Sans';
    color: #2b2b2b;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.boatAnnonce__tagCity {
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;
    color: white;
    background: #2e4770;
    padding: 5px 8px;
    font-size: 15px;
    border-radius: 15px;
}

#BateauxTT h2 {
    display: inline-block;
    font: 700 18px/24px'Lato';
}

#BateauxTT a {
    float: right;
    font: 700 14px/24px 'Open Sans';
    color: #2e4770;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

#BateauxTT a:hover {
    color: #96aed4;
}

input[type=text].modif__spot--name {
    font-family: 'Lato', sans-serif;
    color: #2b2b2b;
    font-weight: 700;
    padding: 15px;
    border: none;
    margin-top: 0;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    height: 50px;
    width: 100%;
}

.onglet {
    display: block;
    float: left;
    text-align: center;
    background: white;
    color: #2e4770;
    font: 700 14px/1.2 'Lato';
    padding: 15px;
    padding-top: 17px;
    float: left;
    border-bottom: 2px solid transparent;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.onglet.selected {
    border-bottom: 2px solid #2e4770;
}

.onglet_newzone.onglet {
    background: transparent;
    margin-left: 15px;
    color: #20a720;
    font: 400 14px/46px 'Lato';
    letter-spacing: 0.5px;
    padding: 0 1em;
    border: 2px solid #20a720;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.onglet_newzone.onglet:hover {
    background: #20a720;
    color: white;
}

.onglet_newzone.onglet.selected {
    background: #20a720;
    color: white;
}

.spot__save,
.communeExpe__nav a.spot__save {
    position: relative;
    display: block;
    overflow: hidden;
    float: left;
    margin: 10px 0;
    padding: 0 1em;
    height: 3em;
    text-transform: uppercase;
    font: 700 1em/3em 'Open Sans', sans-serif;
    text-align: center;
    text-decoration: none;
    letter-spacing: .08em;
    color: #fff;
    background: #20a720;
    -moz-transition: ease 0.35s all;
    -o-transition: ease 0.35s all;
    -webkit-transition: ease 0.35s all;
    transition: ease 0.35s all;
    cursor: pointer;
}

.spot__save:hover {
    background: #1f8b1f;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
}

input[type="radio"].radioSpot {
    display: none;
}

input[type="radio"].radioSpot+label {
    display: block;
    background: #cecece;
    float: left;
    padding: 0.5em 1em;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: .15s;
    font: 400 14px/1.2 'Open Sans'
}

input[type="radio"].radioSpot:checked+label {
    background: #2e4770;
    color: white;
}

.leaflet-container {
    z-index: 0
}

.leaflet-container .leaflet-popup-content a {
    color: white
}

.leaflet-popup-content-wrapper {
    float: left;
}

.leaflet-popup-content {
    float: left;
    text-align: center;
}

.leaflet-popup-content #content p {
    margin: auto
}

.gm-style-iw #secondHeading.button__gradient--sm,
.leaflet-popup-content #secondHeading.button__gradient--sm {
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    .leaflet-popup-content {
        max-width: 70vw;
    }
}

.card__monCarnet .header-misc h2 {
    color: #2e4770;
}

.card__monCarnet:hover .header-misc h2 {
    color: #96aed4;
}

.slf__actions {
    float: left;
    width: 100%;
}

.slf__actions ul li a {
    padding: 10px;
    float: left;
    width: 100%;
    border-left: 4px solid transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.slf__actions ul li a.filtreActionSelected {
    background: none;
    border-left: 4px solid #2e4770;
    background: none;
}

.slf__actions ul li a img {
    float: left;
}

.slf__actions ul li a span {
    margin-left: 5px;
    float: left;
    font: 700 14px/22px 'Open Sans';
    color: #2e4770;
}

.slf__actions ul li a:hover {
    border-left: 4px solid #2e4770;
}

.slf__actions ul li a:hover span {
    color: #96aed4;
}

.slf__actions ul li a.filterActionSelected {
    border-left: 4px solid #2e4770;
    background: white;
}

.slf__actions ul li a.filterActionSelected span {
    color: #96aed4;
}

input[type=datetime].collab__input,
input[type=number].collab__input {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    background: #ebebeb;
    border-radius: 5px;
    border: 2px solid #ebebeb;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    animation: none;
    color: #555;
}

input[type=datetime].collab__input:focus,
input[type=number].collab__input:focus {
    font-weight: 700;
    color: #2b2b2b;
    background: white;
    outline: none;
}

.formComment__prise {
    font-size: 15px;
    font-weight: 700;
    color: #2b2b2b;
    background: white;
    outline: none;
    border: 2px;
    border-radius: 5px;
    border: 2px solid #ebebeb;
}

.alerte.eventAlert__content:last-of-type {
    margin-bottom: 15px;
}

.slf__action--full.button__gradient {
    float: left;
    width: 100%;
    margin-top: 0;
    margin-bottom: 7.5px;
    text-align: center;
    border-radius: 0;
    box-shadow: none;
}

.slf__action--full.button__gradient:hover {
    transform: none;
    box-shadow: none;
}

.collab__profile--suivis {
    float: left;
    width: 100%;
    margin-top: 7.5px;
}

.collab__profile--suivis a {
    font: 400 12px/17px 'Open Sans';
    color: #6d6d6d;
    display: block;
    float: left;
}

.collab__profile--suivis a span {
    font: 700 14px/16px 'Open Sans';
    color: #2b2b2b;
    display: block;
    float: left;
}

.collab__profile--suivis a:hover {
    color: #96aed4;
}

.collab__profile--suivis a:hover span {
    color: #96aed4;
}

.comparateur__item {
    position: relative;
    float: left;
    width: 100%;
    background-color: white;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin: 7.5px 0;
    transition: 0.20s all ease;
}

.comparateur__item:hover {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

.comparateur__item a {
    /* height: 100%; */
    float: left;
    width: 100%;
}

.comparateur__item--img {
    height: 210px;
    float: left;
    width: 100%;
    object-fit: contain;
    padding: 15px;
    transition: 0.2s all ease;
}


/*
.comparateur__itemList:hover .comparateur__item .comparateur__item--img  {
filter: blur(3px);
}
*/

.comparateur__itemList .comparateur__item:hover .comparateur__item--img {
    transform: scale(0.95);
}

.comparateur__itemList.itemsList--mag {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}

.comparateur__itemList.itemsList--mag .idm {
    display: flex;
}

.comparateur__item--content {
    float: left;
    width: 100%;
    padding: 15px;
}

.comparateur__item--content h2 {
    color: #2b2b2b;
    font: 700 16px/1.2 'Open Sans';
}

.comparateur__item--desc {
    margin: 7.5px 0;
    font: 400 14px/1.2 'Lato';
    color: #6d6d6d;
    display: block;
    display: -webkit-box;
    max-width: 100%;
    height: 60px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comparateur__item--note {
    width: 50%;
    float: left;
}

.comparateur__item--noteBar {
    float: left;
    width: 60%;
    height: 8px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
}

.comparateur__item--noteBar .red {
    width: 100%;
    position: absolute;
    height: 100%;
    background: #d61a1a;
    z-index: 1;
}

.comparateur__item--noteBar .green {
    width: 85%;
    position: absolute;
    height: 100%;
    background: #20a720;
    z-index: 2;
}

.comparateur__item--avis {
    display: block;
    float: left;
    width: 100%;
    margin-top: 7px;
    color: #6d6d6d;
    font: 400 13px/1.2 'Lato';
}

.comparateur__item--vote {
    float: left;
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.comparateur__item--voteBloc {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.comparateur__item--vote .vote {
    float: left;
}

.comparateur__item--voteBloc.vote--up .vote {
    color: #2e4770;
}

.comparateur__item--voteBloc.vote--down .vote {
    color: #ef7d00;
}

.comparateur__item--voteBloc.vote--up:hover {
    background: #2e4770;
    color: white;
}

.comparateur__item--voteBloc.vote--up:hover .vote {
    color: white;
}

.comparateur__item--voteBloc.vote--down:hover {
    background: #ef7d00;
    color: white;
}

.comparateur__item--voteBloc.vote--down:hover .vote {
    color: white;
}

.comparateur__item--voteBloc.vote--up.voted,
.comparateur__item--voteBloc.vote--up.voted .vote {
    color: white;
    background: #2e4770
}

.comparateur__item--voteBloc.vote--down.voted,
.comparateur__item--voteBloc.vote--down.voted .vote {
    color: white;
    background: #ef7d00;
}

.vote--note {
    font-size: 12px;
    font-weight: 700;
    margin-left: 5px;
}

.comparateur__item--prix {
    font: 700 18px/1 'Open Sans';
    color: #ef7d00;
}

.comparateur__item--small {
    margin: 0;
    padding: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.comparateur__item--small .comparateur__item--img {
    height: 130px;
}

.comparateur__item--small .comparateur__item--prix {
    font: 700 14px/1 'Open Sans';
    text-align: left;
}

.comparateur__item--small .comparateur__item--content h2 {
    font: 700 14px/1.2 'Open Sans';
    text-align: left;
}

.fisher-i .collab__profile-card {
    margin: 0;
    margin-right: 5px;
}

.fisher-i:nth-child(4) .collab__profile-card {
    border-right: 0;
}

.materiel-i:nth-child(5) .comparateur__item.comparateur__item--small {
    border-right: 0;
}

@media screen and (max-width: 1199px) {
    .materiel-i:nth-child(2) .comparateur__item.comparateur__item--small {
        border-right: 0;
    }
    .boat-i:nth-child(2) .boatAnnonce__card {
        border-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .boat-i:nth-child(2) .boatAnnonce__card {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
}

.comparateur__tri {
    float: right;
    width: 20%;
    padding: 0;
}

#ComparateurTri {
    width: 100%;
    background: white;
    border: none;
    color: #6d6d6d;
    font-weight: 400;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    font: 400 14px/1.2 'Lato';
}

.comparateur__title {
    float: left;
    line-height: 40px;
}

.comparateur__filters--actifsTop {
    float: left;
    width: 80%;
}

.filter__top {
    padding: 0 10px;
    display: block;
    float: left;
    font: 700 14px/40px 'Lato';
    color: #2e4770;
    background: white;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    margin-right: 7.5px;
    cursor: pointer;
}

.filter__top:hover {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}

.filter__tab {
    float: left;
    width: 100%;
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.filter__tab .filter-city {
    display: flex;
}

.filter__tab .filter-city input[type=text] {
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 400;
    color: #1b1b1b;
    border-radius: 3px;
    height: 46px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 16px;
    margin-right: 10px;
}

.filter__tab .filter-city input[type=submit] {
    background: #ef7d00;
    color: white;
    border-radius: 3px;
}

.filter__title,
.filter__toggle {
    float: left;
    width: 100%;
    padding: 15px;
}

.filter__title {
    cursor: pointer;
}

.filter__toggle {
    padding: 0 15px;
    display: none;
}

.filter__tab.opened .filter__toggle {
    display: block;
}

.filter__title h2 {
    display: inline-block;
    font: 400 18px/1.2 'Open Sans';
}

.filter__title .fa {
    font-size: 18px;
    line-height: 1.2;
    padding: 0 10px;
    text-align: right;
    float: right;
    transition: 0.4s all ease;
}

.filter__tab.opened .filter__title .fa {
    transform: rotate(180deg);
}

.filter__tags {
    padding: 0;
    list-style: none;
    margin: 0;
    float: left;
    width: 100%;
}

.sidebar__comparateur {
    width: 100%;
    float: left;
    margin-top: 7.5px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.sidebar__comparateur #filters {
    margin: 0;
}

.breadcrumbs {
    float: left;
    width: auto;
    background: white;
    padding: 10px 15px;
    margin: 0;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.breadcrumbs * {
    display: block;
    float: left;
    line-height: 20px;
}

.breadcrumbs .fa {
    margin: 0 10px;
    color: #6d6d6d;
}

.breadcrumb {
    color: #2e4770;
}

.breadcrumb:hover {
    color: #96aed4;
}

.product__picture img {
    width: 100%;
}

.product__header {
    float: left;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.product__header h1 {
    color: #2b2b2b;
    font: 700 22px/1.4 'Open Sans';
    margin-bottom: 15px;
}

.product__desc {
    float: left;
    width: 100%;
    padding: 15px 0;
}

.product__desc p {
    font: 400 16px/1.4 'Lato';
    color: #6d6d6d;
}

.product__offers {
    float: left;
    width: 100%;
}

.product__offers h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font: 700 18px/1.2 'Open Sans';
    color: #333;
}

.product__offer {
    float: left;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.product__offer .button__gradient {
    margin-top: 0;
    float: right;
}

.product__prix {
    font: 700 18px/40px 'Open Sans';
    color: #2b2b2b;
    margin-right: 5px;
}

.product__vendeur {
    font: 400 15px/40px 'Lato';
    color: #6d6d6d;
}

.product__offer:last-of-type {
    border-bottom: none;
}

.product__sheet {
    float: left;
    width: 100%;
    margin-top: 20px;
}

.product__sheet--row {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    float: left;
    width: 100%;
}

.product__sheet h2 {
    font: 700 23px/1.2 'Open Sans';
    color: #333;
}

.product__sheet--row h3 {
    font: 700 16px/1.2 'Open Sans';
    color: #2b2b2b;
    padding-top: 10px;
}

.product__sheet--key {
    width: 30%;
    float: left;
    font: 400 14px/1.2 'Lato';
    color: #6d6d6d;
    display: block;
}

.product__sheet--value {
    width: 70%;
    float: left;
    font: 400 14px/1.2 'Lato';
    color: #111;
    display: block;
}

@media screen and (max-width: 768px) {
    .product__sheet--key,
    .product__sheet--value {
        width: 50%;
    }
    .product__offer .button__gradient {
        padding: 1em 1em;
    }
    .product__prix {
        font-size: 15px;
    }
}

.comparateur__item--cat .comparateur__item--img {
    height: 150px;
}

.comparateur__item--cat .comparateur__item--content h2 {
    text-align: center;
}

.header--materiel h1,
.header--materiel h2 {
    text-align: left;
    width: 100%;
    color: white;
    text-transform: none;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}

.header--materiel h1 {
    font-size: 40px;
}

.header--materiel h2 {
    font-weight: 400;
}


@media screen and (max-width: 1199px) {
    .header--materiel h1 {
        font-size: 32px;
    }
}

@media screen and (max-width: 1024px) {
    .comparateur__item--cat .comparateur__item--content {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


.presentation_pro h2 {
    color: #2b2b2b;
    font-size: 22px;
    font-weight: 700;
    line-height: 26px;
    margin: 18px 0px 12px 0px;
}

.presentation_pro p {
    font: 400 16px/1.2 'Lato';
    color: #6d6d6d;
    margin: 10px 0;
}

.presentation_pro p br:nth-child(2n+2) {
    display: none;
}

​ .presentation_pro img {
    width: 100%;
}


@media screen and (max-width: 1000px) {
    .communeExpe__nav--list {
        display: none;
    }
}

.pro__event {
    float: left;
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
    padding: 5px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.pro__event--card {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pro__event:hover {
    background: #efefef;
}

.pro__event--date {
    font: 400 16px/1.4 'Open Sans';
}

.pro__event--title {
    font: 700 16px/1.4 'Open Sans';
    color: #1b1b1b;
}

.pro__event--time {
    font: 400 14px/1.4 'Open Sans';
    color: #6d6d6d;
}

.pro__event--content {
    float: left;
    width: calc(100% - 90px);
}

.pro__event--name {
    font: 700 15px/1.2 'Open Sans';
    color: #1b1b1b;
}

.pro-event-p {
    font: 400 15px/1.2 'Open Sans';
    color: #6d6d6d;
}

.pro__event--venue {
    font: 400 14px/1.4 'Lato';
    color: #6d6d6d;
}

.widget__carteDePeche,
.cart {
    float: left;
    width: 100%;
    margin: 6px 0;
    background: white;
}

.cartedepeche__item,
.cart__item {
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
    background: white;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.cartedepeche__item--desc {
    float: left;
    width: calc(100% - 40px);
}

.cartedepeche__item--desc h3 {
    color: #1b1b1b;
    font: 700 14px/1.2 'Open Sans';
    text-align: left;
    position: relative;
}

.cartedepeche__item--desc p {
    text-align: left;
    color: #20a720;
    font: 700 15px/1 'Open Sans';
}

.btn__plus {
    position: relative;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 2px solid #20a720;
    color: #20a720;
    border-radius: 40px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.btn__plus--cross {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font: 400 1.5rem/30px 'Open Sans';
}

.cartedepeche__item:hover {
    transform: scale(1.02);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.cartedepeche__item:hover .btn__plus {
    background: #20a720;
    color: white;
    transform: scale(1.5);
}

.cartedepeche__item {
    margin: 0;
    float: right;
}

.profile__card.collab__profile-card.profile__card--pro .profile__card--header {
    height: auto;
}

.profile__card.collab__profile-card.profile__card--pro .collab__profile--name {
    padding-bottom: 20px;
}

#slf_contenu .article__content {
    width: 100%;
    padding: 0;
}

.bestfisher {
    background-image: linear-gradient(to bottom, #2e4770 0%, #0072A4 50%, #2E689A 100%);
    padding: 0;
    margin: 0 0 7.5px 0;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.bestfisher .titrepal {
    line-height: 20px;
    padding: 13px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    text-align: center;
    color: white;
    font-weight: 700;
    background: #ef7d00;
    width: 240px;
    max-width: 100%;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 20px;
}

.bestfisher .titrepal:before {
    content: "";
    position: absolute;
    bottom: -20px;
    border-left: 120px solid #ef7d00;
    border-right: 120px solid #ef7d00;
    border-bottom: 20px solid transparent;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.bestfisher .titrepal:after {
    content: "";
    position: absolute;
    bottom: -25px;
    border-left: 110px solid #bc5e00;
    border-right: 110px solid #bc5e00;
    border-bottom: 25px solid transparent;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.bestfisher .titrepal img {
    width: auto;
    height: 35px;
    margin-top: 10px;
}

.bestfisher .titre_sec {
    float: left;
    width: 100%;
    line-height: 25px;
    padding: 10px 10px 10px 0;
    color: #fff;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.bestfisher .titre_sec:before {
    content: "";
    position: relative;
    border-left: 15px solid #ef7d00;
    border-top: 15px solid #ef7d00;
    border-right: 15px solid transparent;
    margin-right: 8px;
}

.bestfisher ul {
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.bestfisher ul li {
    padding: 10px;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    position: relative;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.bestfisher ul li:hover {
    background: rgba(0, 0, 0, 0.1);
}

.bestfisher ul li:nth-child(2) {
    border-left: 1px dashed white;
    border-right: 1px dashed white;
}

.bestfisher ul li .trophee {
    font-size: 15px;
    font-weight: 700;
}

.bestfisher ul li img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
}

.bestfisher ul li .abonne {
    float: left;
}

.bestfisher .button__orange {
    display: inline-block;
    width: auto;
}

.slf__searchMember {
    padding: 15px;
}

.slf__searchMember h3 {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
}

.slf__sidebarPros {
    float: left;
    width: 100%;
    background: #3a5178;
    padding: 15px;
    position: relative;
    margin: 7.5px 0;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
}

.slf__sidebarPros:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 100%;
    background: #2e4770;
    z-index: 1;
}

.slf__sidebarPros .pro__tag {
    position: relative;
    color: white;
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
    z-index: 2;
}

.slf__sidebarPros .pro__tag.--guides {
    background: #20a720;
}

.slf__sidebarPros .pro__tag.--store {
    background: #0fafff;
}

.slf__sidebarPros .pro__tag.--hebergement {
    background: #d61a1a;
}

.pro__thumbnails {
    position: relative;
    float: left;
    width: 100%;
    margin: 15px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    z-index: 2;
}

.pro-thumbnail-container {
    display: flex;
    justify-content: center
}

.pro-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    overflow: hidden;
}

.pro-thumbnail img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.slf__sidebarPros a {
    position: relative;
    display: block;
    float: left;
    padding: 0 5px;
    background: white;
    color: #1b1b1b;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 20px;
    transform: translateX(-15px);
    z-index: 2;
}

.slf__sidebarPros a:after {
    content: "";
    position: absolute;
    right: -20px;
    border-top: 20px solid #fff;
    border-right: 20px solid transparent;
}

@media screen and (max-width: 1170px) {
    .slf__sidebarPros a {
        font-size: 8px;
    }
}

.map__nonMembre {
    height: 350px;
    width: 100%;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 7.5px 0 0 0;
}

.map__nonMembre .spotsCta__box {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: #2e4770;
    border-radius: 0;
    padding: 0;
}

.map__nonMembre .spotsCta__box .spotsCta__box--content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 10px 10px 10px;
}

.map__nonMembre .spotsCta__box .spotsCta__box--content h2 {
    font: 400 22px/1.2 'Open Sans';
    color: #fff;
}

.map__nonMembre .spotsCta__box .spotsCta__box--content p {
    font: 400 16px/1.4 'Lato';
    color: #fff;
}

.map__nonMembre .spotsCta__box .spotsCta__box--content .line {
    background: rgba(0, 0, 0, 0.1);
}

.map__nonMembreContainer--overlay {
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.map__nonMembreContainer--base {
    filter: blur(7px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.spotsCta__lock {
    width: 120px;
    height: 80px;
    background: #2e4770;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -30px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

.spotsCta__lock img {
    height: 48px;
    width: 48px;
}


/* photo gallery */

.m-p-g {
    max-width: 100%;
    margin: 0 auto;
}

.m-p-g__thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    grid-gap: 12px;
}

.m-p-g__thumbs-img {
    margin: 0;
    float: left;
    vertical-align: bottom;
    cursor: pointer;
    z-index: 1;
    position: relative;
    opacity: 0;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: opacity, transform;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.m-p-g__thumbs-img.active {
    z-index: 50;
}

.m-p-g__thumbs-img.layout-completed {
    opacity: 1;
    width: 100% !important;
    border-radius: 6px;
    max-height: 250px !important;
    object-fit: cover;
}

.m-p-g__thumbs-img.hide {
    opacity: 0;
}

.m-p-g__thumbs-img:hover {
    -webkit-filter: brightness(110%);
    filter: brightness(110%);
}

.m-p-g__fullscreen {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0);
    visibility: hidden;
    transition: background 0.25s ease-out, visibility 0.01s 0.5s linear;
    will-change: background, visibility;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.m-p-g__fullscreen.active {
    transition: background .25s ease-out, visibility .01s 0s linear;
    visibility: visible;
    background: rgba(0, 0, 0, 0.95);
}

.m-p-g__fullscreen-img {
    pointer-events: none;
    position: absolute;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    top: 50%;
    left: 50%;
    max-height: 100vh;
    max-width: 100%;
    visibility: hidden;
    will-change: visibility;
    transition: opacity 0.5s ease-out;
}

.m-p-g__fullscreen-img.active {
    visibility: visible;
    opacity: 1 !important;
    transition: opacity 0.5s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease-out;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.m-p-g__fullscreen-img.almost-active {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

.m-p-g__controls {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100000;
    height: 20vh;
    background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.m-p-g__controls.active {
    opacity: 1;
    visibility: visible;
}

.m-p-g__controls-close,
.m-p-g__controls-arrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: none;
}

.m-p-g__controls-close:focus,
.m-p-g__controls-arrow:focus {
    outline: none;
}

.m-p-g__controls-arrow {
    position: absolute;
    z-index: 1;
    top: 0;
    width: 20%;
    height: 100vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    opacity: 0;
}

.m-p-g__controls-arrow:hover {
    opacity: 1;
}

.m-p-g__controls-arrow--prev {
    left: 0;
    padding-left: 3vw;
    justify-content: flex-start;
}

.m-p-g__controls-arrow--next {
    right: 0;
    padding-right: 3vw;
    justify-content: flex-end;
}

.m-p-g__controls-close {
    position: absolute;
    top: 3vh;
    right: 3vw;
    z-index: 5;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.m-p-g__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    transition: all .25s ease-out;
}

.m-p-g__btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.m-p-g__alertBox {
    position: fixed;
    z-index: 999;
    max-width: 700px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px;
    border-radius: 3px;
    text-align: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
    color: grey;
}

.m-p-g__alertBox h2 {
    color: #d61a1a;
}

@media screen and (max-width: 600px) {
    .m-p-g__thumbs-img.layout-completed {
        max-height: 150px !important;
    }
}

@keyframes gradients {
    0% {
        background-position: 0 0;
    }
    25% {
        background-position: 50% 0;
    }
    50% {
        background-position: 90% 0;
    }
    60% {
        background-position: 60%;
    }
    75% {
        background-position: 40%;
    }
    100% {
        background-position: 0 0;
    }
}

@media screen and (min-width: 1101px) {
    .spot__action {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
    }
}

.communeExpe__nav.communeExpe__nav--sorties.nav__spot {
    padding: 0 30px;
    position: relative;
    top: 0;
}

@media screen and (max-width: 1100px) {
    .communeExpe__nav.communeExpe__nav--sorties.nav__spot {
        padding: 15px;
        height: auto;
        float: left;
        display: block;
    }
    .communeExpe__nav.communeExpe__nav--sorties.nav__spot .concours__title {
        float: left;
        width: 100%;
    }
    .spot__action {
        position: relative;
        float: left;
        width: 100%;
    }
}

.stats__overview--header a,
.stats__overview--header a.unlockSpots,
.stats__overview--header a.button__gradient.button__gradient--sm,
.stats__overview--header a.btn-orange {
    float: right;
    line-height: 20px;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin-right: 20px;
    margin-top: 0;
}

.stats__overview--headerFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#oupecher .monCompte__box {
    margin: 0;
}

.overview__container {
    float: left;
    width: 75%;
}

.nextGm__container {
    display: flex;
    float: left;
    width: 220px;
    padding: 10px;
}

#mareeCourbe {
    border: none;
}


@media screen and (max-width: 1300px) {
    .hide-1300 {
        display: none;
    }
}

@media screen and (min-width: 1001px) {
    .hide-1000 {
        display: block;
        visibility: visible;
    }
    .show-1000 {
        display: none !important;
        visibility: hidden !important;
    }
}

@media screen and (max-width: 1000px) {
    .hide-1000 {
        display: none !important;
        visibility: hidden !important;
    }
    .show-1000 {
        display: block;
        visibility: visible;
    }
    #mareeCourbe .overview__container {
        width: 100%;
    }
    .overview__container {
        width: 100%;
    }
    .nextGm__container {
        width: 100%;
    }
    #mareeCourbe .stats__overview--content {
        flex-direction: column;
    }
    .nextGm__container #nextGm .grande__maree {
        width: 50%;
    }
    .btn__row--mobile {
        position: sticky;
        top: calc(100% - 80px);
        width: 100%;
        overflow: hidden;
        z-index: 9;
    }
    .btn__row--mobile .swiper-slide {
        background: transparent;
    }
    .btn__row--mobile .btn-orange {
        font-size: 16px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    }
    .btn__row-next {
        right: 10px;
        left: auto;
        position: absolute;
        top: 50%;
        width: 27px;
        height: 44px;
        margin-top: -22px;
        z-index: 10;
        cursor: pointer;
        background-size: 27px 44px;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .btn__row-prev {
        left: 10px;
        right: auto;
        position: absolute;
        top: 50%;
        width: 27px;
        height: 44px;
        margin-top: -22px;
        z-index: 10;
        cursor: pointer;
        background-size: 27px 44px;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .btn__row-prev:after {
        content: "\f104";
        font-family: 'fontAwesome';
        color: #1b1b1b;
        font-size: 20px;
        font-weight: 700;
    }
    .btn__row-next:after {
        content: "\f105";
        font-family: 'fontAwesome';
        color: #1b1b1b;
        font-size: 20px;
        font-weight: 700;
    }
}

@media screen and (min-width: 991px) {
    .hide-991 {
        display: block;
        visibility: visible;
    }
    .show-991 {
        display: none !important;
        visibility: hidden !important;
    }
}

@media screen and (max-width: 990px) {
    .show-991 {
        display: block !important;
        visibility: visible !important;
    }
}



/*
.b_slf_gauche {
position: sticky;
top: 70px;
}
*/

.b_slf_gauche .collab__profile--infos {
    height: auto;
}


.closefiltre {
    position: absolute;
    z-index: 2;
    right: 20px;
    top: 20px;
}

.closefiltre i.fa {
    color: #ffffff;
    font-size: 18px;
}

.b_slf_droite_2.--sticky {
    position: sticky;
    top: 84px;
}

@media screen and (max-width: 1330px) {
    .b_slf_gauche,
    .pageMagasin .b_slf_gauche {
        float: left;
        display: block;
        width: 25%;
        padding: 0;
        max-width: none;
    }
    .b_slf_droite,
    .pageMagasin .b_slf_droite {
        float: left;
        display: block;
        width: calc(75% - 300px);
        padding: 0;
        padding: 0 24px;
        max-width: none;
    }
    .b_slf_droite_2,
    .pageMagasin .b_slf_droite_2 {
        float: right;
        display: block;
        width: 300px;
        padding: 0;
        padding-left: 0;
        max-width: none;
    }
    .pro__event {
        height: auto;
    }
    .slf__filtres ul li a {
        font: 700 12px/1.2 'Lato';
    }
}

@media screen and (max-width: 1100px) {
    .bestfisher ul li .abonne {
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width: 1024px) {
    .slf__filtres ul {
        min-width: 500px;
        max-width: 700px;
    }
    .slf__filtres {
        overflow-y: scroll;
    }
}

@media screen and (max-width:930px) {
    .b_slf_gauche,
    .pageMagasin .b_slf_gauche {
        width: 33%;
    }
    .b_slf_droite,
    .pageMagasin .b_slf_droite {
        width: 67%;
    }
    .b_slf_droite_2,
    .pageMagasin .b_slf_droite_2 {
        width: 67%;
    }
    .b_slf_droite,
    .pageMagasin .b_slf_droite {
        padding-right: 0;
    }
    .slf__filtres ul {
        min-width: 500px;
        max-width: 700px;
    }
    .slf__filtres {
        overflow-y: scroll;
    }
}

@media screen and (max-width: 625px) {
    .b_slf_droite,
    .b_slf_droite_2 {
        width: 100%;
        float: left;
        display: block;
        position: relative;
        padding: 0 10px;
    }
    .b_slf_gauche {
        left: 0;
        border: none;
        background: white;
        position: absolute;
        top: 0;
        left: 0;
        float: left;
        display: none;
        background-color: transparent;
        padding: 5px 10px;
        width: 100%;
        left: 0;
        z-index: 6000;
    }
    .pageMagasin .b_slf_gauche,
    .pageMagasin .b_slf_droite,
    .pageMagasin .b_slf_droite_2 {
        width: 100%;
        max-width: 100%;
        float: left;
        display: block;
        position: relative;
        padding: 0;
    }
    .pageMagasin .b_slf_gauche {
        left: 0;
        border: none;
        background: none;
    }
    .concours__main .collab__profile--topBar {
        display: flex;
        align-items: center;
    }
    .concours__main .collab__profile--topBar .topRetour,
    .concours__main .collab__profile--topBar h1 {
        font-size: 12px;
        display: flex;
        align-items: center;
    }
    .concours__main .collab__profile--topBar .topRetour {
        width: 140px;
    }
    .concours__main .collab__profile--topBar h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 140px);
    }
    #MainConcoursButton {
        position: fixed;
        z-index: 10;
        left: 15px;
        bottom: 15px;
        right: 15px;
        width: calc(100% - 30px);
        margin: 0;
    }
    .concours__desc--header {
        width: 100%;
        float: left;
        display: block;
    }
    .concours__desc--header {
        display: none;
    }
}

@media screen and (min-width: 625px) {
    .b_slf_droite #slf_entete {
        position: sticky;
        top: 60px;
        z-index: 3;
    }
    .concours__desc--header {
        width: 100%;
        float: left;
        display: block;
    }
}

.modal__app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background: #2e4770;
    background: #efefef;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;
}

.modal__app img.roundedLogo {
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
}

.modal__app--image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: none;
}

.modal__app h2 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #1b1b1b;
    position: relative;
    z-index: 2;
}

.modal__app p {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.modal__app .appDl {
    letter-spacing: 1.5px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.modal__app span.btn_close {
    margin-top: 15px;
    color: #2e4770;
    font-weight: 700;
    position: absolute;
    bottom: 20px;
}

.modal__bgBLue {
    background: -moz-linear-gradient(to top, #2e4770 0%, #2e6acc 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, bottom, top, color-stop(0%, #2e4770), color-stop(100%, #2e6acc));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(to top, #2e4770 0%, #2e6acc 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(to top, #2e4770 0%, #2e6acc 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(to top, #2e4770 0%, #2e6acc 100%);
    /* IE10+ */
    background: linear-gradient(to top, #2e4770 0%, #2e6acc 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#2e4770, endColorstr=#2e6acc, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.modal__app.modal__bgBLue img {
    width: auto;
    height: auto;
    border-radius: 0;
    overflow: auto;
    margin-bottom: 0;
}

.modal__app.modal__bgBLue img.modal-bg-bottom {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    z-index: 1;
}

.modal__app.modal__bgBLue h2 {
    font-weight: 400;
}

.modal__app.modal__bgBLue h2 span {
    font-weight: 700;
}

.modal__app.modal__bgBLue h2,
.modal__app.modal__bgBLue p {
    color: white;
}

.slfConnexion--left {
    padding: 40px;
    background: #ffffff;
    position: relative;
}

.slf__leftInner {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.slfConnexion--left,
.slfConnexion--right {
    height: calc(100vh - 60px);
    overflow: hidden;
}

@media screen and (max-width: 1200px) {
    .slfConnexion--right {
        display: none;
    }
}

.header__slfConnexion {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.header__slfConnexion h2 {
    color: #1b1b1b;
    margin: 0;
    line-height: 1.6;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
}

.header__slfConnexion p {
    color: #6d6d6d;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

.header__slfConnexion p a {
    color: #2e4770;
    font-weight: 700;
    text-decoration: none;
    ;
}

.form__slfConnexion {
    float: left;
    width: 100%;
    max-width: 350px;
}

.form__slfConnexion input,
.form__slfConnexion select {
    float: left;
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    border: none;
    font-size: 16px;
    color: #6d6d6d;
    font-weight: 700;
    text-align-last: center;
}

.form__slfConnexion select {
    padding: 0;
}

.form__slfConnexion input.slf__login {
    position: relative;
    display: block;
    overflow: hidden;
    float: left;
    width: 100%;
    margin: 10px 0;
    padding: 0;
    height: 3.5em;
    text-transform: uppercase;
    font: 700 1em/3.5em 'Open Sans', sans-serif;
    text-align: center;
    text-decoration: none;
    letter-spacing: .08em;
    color: #fff;
    background: #20a720;
    -moz-transition: ease 0.35s all;
    -o-transition: ease 0.35s all;
    -webkit-transition: ease 0.35s all;
    transition: ease 0.35s all;
    cursor: pointer;
}

.form__slfConnexion input.slf__login:hover {
    background: #1f8b1f;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
}

.form__slfConnexion .mdpO {
    text-align: center;
    float: left;
    width: 100%;
    color: #2e4770;
    font-weight: 700;
    text-decoration: none;
    margin-top: 10px;
}

.slfConnexion__separateur {
    float: left;
    width: 100%;
    text-align: center;
    position: relative;
    margin: 15px 0;
}

.slfConnexion__separateur span {
    color: #6d6d6d;
    font-size: 16px;
    line-height: 1;
    padding: 0 10px;
    position: relative;
    z-index: 2;
    background: #efefef;
}

.slfConnexion__separateur .line {
    width: 100%;
    height: 1px;
    background: #cecece;
    position: absolute;
    top: calc(50% - 0.5px);
    left: 0;
    z-index: 1;
}

.slfPres__slider.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: #efefef
}

.slfPres__slider .swiper-slide {
    overflow: hidden;
}

.slfPres__slider .swiper-slide .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.slfPres__slider .swiper-slide .bg--overlay {
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.slfPres__slider .swiper-slide .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: imgScale 15s ease-in-out infinite alternate;
}

@keyframes imgScale {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.slfPres__slider .swiper-slide .content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
    text-align: center;
}

.slfPres__slider .swiper-slide .content h2 {
    color: white;
    font-size: 3vw;
    font-weight: 400;
    margin-bottom: 0;
}

.slfPres__slider .swiper-slide .content p {
    color: white;
    text-align: center;
}

.slf__mdpOublie,
.slf__connexion,
.slf__createAccount {
    transition: 0.3s;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.slf__connexion.inactive {
    transform: translate(-100%, -50%);
    opacity: 0;
    pointer-events: none;
}

.slf__createAccount.inactive {
    transform: translate(0, -50%);
    opacity: 0;
    pointer-events: none;
}

.slf__mdpOublie.inactive {
    transform: translate(0, -50%);
    opacity: 0;
    pointer-events: none;
}

@media screen and (max-width: 1500px) {
    .form__slfConnexion input,
    .form__slfConnexion select {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .slf__leftInner {
        width: 80%;
    }
}


/* Nouveaux styles articles */

.article__mag {
    float: left;
    width: 100%;
    background: white;
}

@media screen and (min-width: 1121px) {
    .article__mag {
        padding: 0 50px;
    }
}

.article__mag .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 2rem;
}

.article__mag .row .post__content {
    float: left;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 1rem;
    padding-bottom: 3em;
}

.article__mag .row .post__content .wrapper__text,
.article__mag .row .post__content .wrapper__title,
.article__mag .row .post__content .wrapper__dossierSpe,
.article__mag .row .post__content .wrapper__especePechee,
.article__mag .row .post__content .wrapper__media {
    width: 100%;
    float: left;
    padding: 0 200px 0 0;
    margin: 0;
}

.article__mag .row .post__content .wrapper__especePechee,
.article__mag .row .post__content .wrapper__media {
    margin: 15px 0;
}

.post__content .wrapper__media .swiper-materiel {
    overflow: hidden;
}

.article__mag .row .post__content .post__main,
.full__left {
    width: calc(100% - 300px);
    padding: 0 1rem;
    padding-left: 0;
    float: left;
}

.wrapper__text.arborescence {
    line-height: 1;
    font-family: 'Open Sans', sans-serif;
    margin: 20px 0;
    float: left;
    margin-left: 0;
    color: #cecece;
    font-size: 14px;
    font-weight: normal;
    width: 100%;
    padding: 0;
}

.article__mag .row .post__content .wrapper__title h1 {
    float: left;
    width: 100%;
    color: #333333;
    font-size: 30px;
    margin: 10px 0 0 0;
    text-transform: uppercase;
    font-weight: bold;
}

.article__mag .row .post__content .wrapper__title p.chapeau {
    font-size: 14px;
    width: 100%;
    float: left;
    margin-top: 10px;
    color: #333333;
    line-height: 28px;
}

.article__mag .row .post__content img {
    float: left;
    width: 100%;
}


.article__mag .row .post__content .post__main > img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article__mag .row .post__content .post__main > img ~ img  {
    aspect-ratio: initial;
}



.wrapper__especeInfos .espece__info p {
    font-size: 1rem;
    color: white;
    text-transform: lowercase;
}

.wrapper__especeInfos .espece__info span {
    color: white;
    letter-spacing: 1px;
    line-height: 20px;
    font-size: 13px
}

.wrapper__especeInfos {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1.5rem;
    background: #30496e;
    padding: 5px;
}

.wrapper__especeInfos .espece__info {
    margin-bottom: 0;
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.wrapper__especeInfos .espece__info .star {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper__text h2,
.wrapper__media h2 {
    font-family: 'Lato', sans-serif;
    font-size: 1.4rem;
    color: #2e4770;
    margin: 2rem 0 1rem;
    font-weight: 700;
}

.wrapper__media h2 {
    margin-top: 0;
}

.videos__row,
.pics__row {
    margin: 0 -10px;
}

.pics__row .article__pic {
    float: left;
    width: 25%;
    padding: 10px;
}

.videos__row .video {
    float: left;
    width: 50%;
    padding: 10px;
}

.videos__row .video iframe {
    width: 100%;
}

.wrapper__text p {
    font-size: 1rem;
    line-height: 1.58;
    color: rgba(0, 0, 0, 0.8);
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    margin: 1rem 0;
}

.wrapper__text .articleCta h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.wrapper__text .articleCta p {
    margin-bottom: 0;
}

.wrapper__text.arborescence span {
    color: #1b1b1b;
}


/* fil d'ariane */

ul.article__breadcrumbs {
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.2;
}

.article__breadcrumbs li {
    float: left;
    display: block;
    position: relative;
    padding-right: 2em;
    margin: 0;
    transition: 0.3s all ease;
}

.article__breadcrumbs li:last-child {
    font-weight: 700;
    padding-right: 0;
    text-decoration: none;
    display: inline-block;
    color: #333;
    white-space: nowrap;
}

.article__breadcrumbs li:after {
    content: '/';
    position: absolute;
    display: inline-block;
    right: 0;
    width: 2em;
    text-align: center;
}

.article__breadcrumbs li:last-child:after {
    content: '';
}

.article__breadcrumbs li a {
    text-decoration: none;
    display: inline-block;
    color: #6d6d6d;
    white-space: nowrap;
}

.article__breadcrumbs a:hover {
    color: #2e4770;
}

.article__breadcrumbs li {
    overflow: hidden;
}


/* fin fil d'ariane */

.article__mag .article__header--img {
    width: 100%;
}

.article__mag .article__header--img img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.article__mag .row .post__content .wrapper__text img {
    width: 100%;
    margin: 15px 0;
}

.article__mag .row .post__content aside.pub__column,
.full__right {
    position: relative;
    min-height: 1px;
    width: 100%;
    float: right;
    flex: 0 0 300px;
    width: 300px;
}

.article__mag .row .post__content aside.pub__cdp {
    width: 100%;
    float: left;
    flex: 0 0 200px;
    max-width: 200px;
}

.wrapper__especePechee .especePechee {
    padding: 1rem;
    background: #efefef;
    width: 100%;
}

.star_white {
    color: white
}

.star_grey {
    color: grey
}

.article__mag--similaires .commune__section {
    padding: 0;
    border-bottom: 0;
    margin-top: 20px;
    padding: 0;
}

@media screen and (max-width: 1600px) {
    .article__mag .row .post__content .wrapper__title p.chapeau,
    .wrapper__text p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 1024px) {
    .article__mag--similaires .commune__section {
        padding: 0;
    }
    .article__mag .row .post__content .wrapper__text,
    .article__mag .row .post__content .wrapper__title,
    .article__mag .row .post__content .wrapper__dossierSpe,
    .article__mag .row .post__content .wrapper__especePechee,
    .article__mag .row .post__content .wrapper__media {
        width: 100%;
        float: left;
        padding: 0;
        margin: 0;
    }
    .article__mag .row .post__content p.chapeau {
        padding: 0;
    }
    .article__mag .row .post__content aside.pub__cdp {
        flex: 0 0 calc(100% - 300px);
        max-width: calc(100% - 300px);
        padding: 0 1rem;
    }
    .article__magMateriel {
        padding: 0 1rem;
    }
}

@media screen and (min-width: 1266px) {
    .cta__spotEspece--imgMobile {
        display: none;
    }
}

@media screen and (max-width: 1265px) {
    .cta__spotEspece--imgMobile {
        display: block;
        width: 100%;
        float: left;
    }
    .cta__spotEspece {
        height: auto;
    }
    .cta__spotEspece--content {
        width: 100%;
    }
    .cta__spotEspece--img {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .article__mag .row .post__content .wrapper__title h1 {
        font-size: 22px;
    }
    .article__mag .row .post__content .post__main {
        width: 100%
    }
    .article__mag .row .post__content .wrapper__text,
    .article__mag .row .post__content .wrapper__title,
    .article__mag .row .post__content .wrapper__dossierSpe,
    .article__mag .row .post__content .wrapper__especePechee,
    .article__mag .row .post__content .wrapper__media {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        padding: 0;
    }
    .article__mag .row .post__content aside.pub__cdp {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 1rem;
    }
    .article__magMateriel {
        padding: 0 1rem;
    }
    .article__mag .row .post__content aside.pub__column {
        display: block;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 1rem;
        width: 100%;
    }
    .wrapper__title .wrapper__especeInfos {
        padding: 0;
    }
    .wrapper__especeInfos .espece__info {
        height: 70px;
    }
    .wrapper__title .wrapper__especeInfos .espece__info:last-child {
        border-right: none;
    }
    .wrapper__especeInfos .espece__info p {
        font-size: 12px;
    }
}

.pad15t0 {
    padding: 15px;
    padding-top: 0;
}

.minMax {
    float: left;
    width: 50%;
    position: relative;
}

.minMax__label {
    float: left;
    width: 100%;
}

.minMax span {
    display: block;
    float: left;
    line-height: 30px;
    width: 30%;
    font-size: 12px;
}

input[type=text].input__filter {
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    clear: none;
    height: 30px;
    float: left;
    display: block;
    width: 100%;
    font-size: 12px;
}

.minMax input[type=text].input__filter {
    width: 70%;
    padding-right: 20px;
}

.minMax span.euro {
    position: absolute;
    right: 10px;
    z-index: 2;
    width: auto;
    color: #333;
    font-size: 12px;
}

.checkboxes__container {
    float: left;
    width: 100%;
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 10px;
    margin: 15px 0;
    background: #f7f7f7;
}

.filter__toggle h3 {
    margin-top: 15px;
    display: block;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.filters__toggleButton {
    display: none;
}

.sidebar__comparateur .filter__search {
    float: left;
    width: 100%;
    padding: 15px;
    background: white;
    position: sticky;
    bottom: 0;
}

.sidebar__comparateur .filter__search .collab__button {
    width: 100%;
    cursor: pointer;
    font-size: 14px;
}

.wrapper__boats {
    background: #f1f1f1;
}

.filter__cities {
    padding: 0;
    margin-top: 10px;
    margin-bottom: 0;
    float: left;
    width: 100%;
    list-style-type: none;
}

.filter__city {
    font-size: 14px;
    font-weight: 400;
    padding: 5px 8px;
    border-radius: 3px;
    display: inline-block;
    background: #2e4770;
    color: #fff;
    cursor: pointer;
    margin: 5px 2.5px;
}

.filter__city .fa {
    color: #fff;
    margin-left: 5px;
}

.filter__city:hover {
    background: #355282;
}

.mobile__filterHeader {
    display: none;
}

@media (max-width: 991px) {
    .sidebar__comparateur.sidebar__comparateur--mobile {
        z-index: 9999999;
        opacity: 0;
        position: fixed;
        user-select: none;
        transform: translateX(100%);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        height: 100%;
        background: white;
        margin: 0;
        overflow-y: scroll;
        padding: 15px;
        transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    }
    .sidebar__comparateur.sidebar__comparateur--mobile.active {
        transform: translateX(0);
        opacity: 1;
        user-select: auto;
    }
    .filter__toggle {
        display: block;
    }
    .wrapper__mag.wrapper__boats {
        padding: 15px 0;
    }
    .mobile__filterHeader {
        position: fixed;
        top: 0;
        left: 0;
        height: 50px;
        width: 100vw;
        background: white;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
        text-align: center;
        display: flex;
        font-size: 18px;
        font-weight: 700;
        z-index: 10;
        padding: 0;
    }
    .mobile__filterHeader .fa {
        position: absolute;
        top: 0;
        left: 0;
        height: 50px;
        width: 50px;
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        color: #333;
    }
    .mobile__filterHeader h2 {
        width: 100%;
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        height: 50px;
        font-size: 20px;
        color: #333;
    }
    .sidebar__comparateur.sidebar__comparateur--mobile .filter__search {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        padding: 15px;
        background: white;
        box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .filters__toggleButton {
        display: block;
        float: right;
        background: white;
        cursor: pointer;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        color: #2e4770;
        border-radius: 3px;
        padding: 0.8em 1em;
        margin: 10px 0;
        font-weight: 700;
    }
    .filter__title .fa {
        display: none;
    }
    .filters__toggleButton .fa {
        margin-right: 5px;
    }
    .allBoats__title {
        font: 700 22px/1.2 'Open Sans';
    }
    .sidebar__comparateur #filters {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 15px;
        padding-top: 50px;
        padding-bottom: 85px;
        overflow: hidden;
        overflow-y: scroll;
    }
    #ui-id-1 {
        z-index: 99999999999999999999;
    }
}


/*
.headercommune .land-aappma__header {
height: 100%
}
.headercommune .land-aappma__header h1 {
text-align: center;
padding: 0;
}
.headercommune .land-aappma__header h2 {
color: white;
text-align:center;
font-size: 26px;
padding:0;
}
.headercommune .land-aappma__header p {
font-size: 22px;
font-weight: 700;
margin: 20px 0;
}
*/


#btnHeaderCom {
    background: #1db954;
    text-transform: uppercase;
    line-height: 26px;
    font-size: 18px;
    padding: 0.8em 2em;
    margin-top: 30px;
    font-family: 'Open sans', sans-serif;
    letter-spacing: 1px;
}

#btnHeaderCom span {
    font-size: 22px;
}

.comm__ctaSection {
    padding: 20px 110px;
    width: 100%;
    float: left;
}

.comm__ctaSection h2 {
    font-weight: 700;
    font-size: 20px;
}


/* .comm__ctaSection .baseline h2 {
font-weight: normal;
font-size: 20px;
}
.comm__ctaSection .baseline h2 span{
font-weight: bold;
} */

.comm__ctaSection h2 span {
    font-weight: 400;
}

@media screen and (max-width: 1400px) {
    .comm__ctaSection {
        padding: 20px 30px;
    }
}

@media screen and (max-width: 768px) {
    .comm__ctaSection {
        padding: 20px 10px;
    }
    .comm__ctaSection h2 {
        font-size: 16px;
    }
    #btnHeaderCom {
        font-size: 16px;
    }
}

.header__listServices {
    font-weight: 400;
}

html.user-agent-robot .popup__accueil {
    display: none !important;
}

.popupAccueil__Header h2 br {
    display: none;
}

.popup__bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url('/static/photo_site/popupBG.jpg');
    background-size: cover;
}

.popup__link {
    top: 0;
    left: 0;
    width: 100%;
}

.popup__content {
    position: relative;
    float: left;
    width: 100%;
    z-index: 2;
    padding: 30px;
}

.popup__content h2 {
    color: white;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 26px;
    line-height: 1.2;
}

.popup__content .btn-orange {
    display: inline-block;
    padding: 0.4em 1em;
}

.popup__content p {
    color: white;
    margin-top: 20px;
    text-align: center;
}

.newPopup {
    background: white;
    overflow: hidden;
    position: relative;
    display: none !important;
}

.newPopup__content {
    float: left;
    width: 600px;
    padding: 30px;
    position: relative;
    z-index: 2;
}

.newPopup__content h2 {
    font-size: 36px;
    color: #1b1b1b;
    font-weight: 700;
    margin-bottom: 20px;
}

.newPopup__content p {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 700;
}

.newPopup__content .btn-orange {
    font-size: 18px;
    display: inline-block;
    box-shadow: none;
}

.newPopup__bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/static/photo_site/popup12.png');
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
}

#modalDesktopBtn {
    float: left;
}

.pubs__deca a {
    float: left;
    width: 100%;
}

.pubs__deca a img {
    float: left;
    width: 100%;
}

.pub__deca--xs,
.pub__deca--md,
.pub__deca--lg {
    display: none;
}

.articlePub {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
}

.article__mag .row .post__content .articlePub img {
    float: left;
    width: 30%
}

.articlePub__content {
    float: left;
    width: 70%;
    padding: 15px;
}

.articlePub__content h2 {
    font-size: 18px;
    color: #1b1b1b;
    line-height: 22px;
}

.articlePub__content p {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 10px 0;
}

.articlePub__content-button {
    float: left;
    padding: 10px;
    background: #2e4770;
    color: white;
}

@media screen and (max-width: 1200px) {
    .articlePub {
        flex-direction: column;
    }
    .article__mag .row .post__content .articlePub img {
        width: 100%;
    }
    .articlePub__content {
        width: 100%;
        padding: 15px 0;
    }
}

@media screen and (max-width: 600px) {
    .pub__deca--xs {
        display: block;
    }
}

@media screen and (min-width: 601px) and (max-width: 992px) {
    .pub__deca--md {
        display: block;
    }
}

@media screen and (min-width: 993px) {
    .pub__deca--lg {
        display: block;
    }
}

#ChoixModePaiement p {
    margin-top: 10px;
    margin-bottom: 0;
}

#ChoixModePaiement .choixModePaiement-title {
    margin-bottom: 10px;
    margin-top: 0;
    color: #1b1b1b;
    font-weight: 700;
}

#ChoixModePaiement .form-radio {
    margin: 10px 0;
}

.cta__aappma {
    position: fixed;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
    bottom: 0;
    left: 0;
    width: 100vw;
    background: white;
    padding: 20px;
    z-index: 10000;
}

.cta__aappma p {
    color: #1b1b1b;
    text-align: center;
    font-size: 20px;
    line-height: 1.5;
}

.cta__aappma span {
    font-size: 20px;
    text-align: center;
}

.pub_aappma {
    color: white;
    background: #ef7d00;
    padding: 5px 10px;
    display: block;
    margin-top: 10px;
    border-radius: 30px;
    cursor: pointer;
}

.demande_email {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 300px;
    border-radius: 3px;
    background: #fff;
    padding: 15px;
    z-index: 100001;
}

.demande_email p {
    float: left;
    width: 100%;
    padding: 10px 0;
    color: #1b1b1b;
    font-size: 22px;
    text-align: center;
}

.cta__aappma--overlay {
    display: none;
    background: rgba(0, 0, 0, 0.8);
    width: 100vw;
    height: 200vh;
    z-index: 100000;
    position: fixed;
    top: -100px;
    left: 0;
}

.aappma__email {
    float: left;
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    color: #1b1b1b;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.aappma__send {
    float: left;
    width: 100%;
    margin-top: 10px;
    background: #ef7d00;
    padding: 10px;
    font-size: 16px;
    color: white;
    border-radius: 3px;
}

.aappma__contact h3 {
    display: block;
    float: left;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #1b1b1b;
    margin-bottom: 10px;
    width: 100%;
}

.aappma__contact {
    background: white;
}

.btn__contact--Aappma {
    background: #ef7d00;
    padding: 10px 15px;
    color: white;
    background: #ef7d00;
    border-radius: 30px;
    display: block;
    float: left;
    font-size: 16px;
    font-weight: 700;
    margin: 5px 0;
    text-align: left;
}

.btn__contact--Aappma:last-child {
    margin-left: 10px;
}

.btn__contact--Aappma p {
    display: inline-block;
    font-size: 15px;
}

.btn__contact--Aappma .fa {
    margin-right: 7px;
}

@media screen and (max-width: 680px) {
    .aappma__contact {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin-bottom: 0;
        height: 60px;
    }
    .aappma__contact h3 {
        margin: 0;
        padding: 10px;
        width: auto;
    }
    .btn__contact--Aappma {
        margin: 0;
        border-radius: 0;
        height: 60px;
        width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn__contact--Aappma .fa {
        margin-right: 0;
        font-size: 22px;
    }
    .btn__contact--Aappma:last-child {
        margin-left: 0;
        border-left: 1px solid rgba(0, 0, 0, 0.2);
    }
    .btn__contact--Aappma p {
        display: none;
    }
}

.indice__header {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    float: left;
}

.circle__chart {
    position: relative;
}

.circle-chart {
    margin: 10px 0;
}

.circle-chart__circle,
#circle-chart-synthese {
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 1s ease;
}

@keyframes circle-chart-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.circle-chart__info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.circle-chart__info p {
    color: white;
}

.circle-chart__percent {
    font-size: 22px;
    line-height: 1;
}

.circle-chart__subline {
    font-size: 14px;
}

.prev__chart {
    width: 100%;
    height: 270px;
    position: relative;
}

.prev__chart--container {
    width: 100%;
    position: relative;
    float: left;
}

.prev__chart--hours {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 6;
    pointer-events: none;
}

.prev__chart--hour {
    float: left;
    width: calc(100% / 6);
    text-align: center;
    color: white;
    font-size: 12px;
    padding: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.prev__chart--yAxis {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    pointer-events: none;
    z-index: 6;
}

.prev__chart--yAxis .yAxis__row {
    width: 100%;
    height: 25%;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.prev__chart--yAxis .yAxis__row--medium {
    height: 50%;
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

.prev__chart--yAxis .yAxis__row p {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-left: 15px;
}

.prev__chart--yAxis .yAxis__row--marees {
    height: 50%;
}

.prev__chart--yAxis .yAxis__row--marees:first-child {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
}

.prev__chart canvas {
    width: 100%;
    height: 100% !important;
    position: absolute;
    bottom: 0;
    z-index: 4;
}

.prev__indice--phrase {
    font-weight: 700;
    color: white;
    font-size: 18px;
    text-align: center;
}

.indice__dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.indice__dates .previsions__nav--item {
    margin: 0;
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.datesList {
    display: flex;
    justify-content: flex-end;
}

.datesList .button__orange {
    margin-right: 15px;
    max-width: 220px;
    text-align: center;
    display: block;
}

.surlefil .datesList .button__orange {
    font-size: 14px;
}

.indice__dates .prev__commune {
    color: white;
    font: 400 14px/1.2 'Open Sans';
    padding-left: 15px;
}

@media screen and (min-width: 800px) {
    .indice__header {
        flex-direction: row;
    }
    .prev__indice--phrase {
        text-align: left;
        margin-left: 15px;
    }
}

@media screen and (max-width: 1230px) {
    #mareeCourbe .indice__dates {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 15px;
    }
    #mareeCourbe .indice__dates .prev__commune {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    #mareeCourbe .datesList {
        width: 100%;
    }
    #mareeCourbe .indice__dates .previsions__nav--item {
        margin: 0;
        background: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        width: 25%;
        text-align: center;
    }
}

@media screen and (max-width: 991px) {
    .indice__dates {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 15px;
    }
    .indice__dates .prev__commune {
        width: 100%;
        text-align: center;
        padding: 10px;
    }
    .datesList {
        width: 100%;
    }
    .indice__dates .button__orange {
        margin-right: 0;
    }
    .indice__dates .previsions__nav--item {
        margin: 0;
        background: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        width: 25%;
        padding: 10px 0;
        text-align: center;
    }
}

@media screen and (max-width: 680px) {
    #mareeCourbe .prev__chart {
        height: 230px;
    }
    .prev__chart--hour {
        font-size: 10px;
        padding: 10px 5px;
    }
}

#indiceCourbe,
#mareeCourbe {
    background: #2e4770;
    border: none;
}

@media screen and (max-width: 1220px) {
    .mgt-1220 {
        margin-top: 10px !important;
    }
}

.header__landing {
    position: relative;
    float: left;
    width: 100%;
    padding: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    padding: 0;
}

#titleHeaderDometic {
    position: relative;
    color: #1b1b1b;
    text-align: center;
    font-weight: 700;
    font-size: 34px;
}

#landingDometicContent {
    padding-top: 20px;
    float: left;
    width: 100%;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#landingDometicContent img {
    width: 50%;
}

#landingDometicContent h3 {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
    color: #111;
    float: left;
    width: 100%;
    max-width: 100%;
}

#landingDometicContent h2 {
    margin-top: 20px;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #ef7d00;
    float: left;
    width: 100%;
}

#landingDometicLogos {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    min-height: 1px;
}

.inscription fieldset.dometicLandingFields input[type=email],
.inscription fieldset.dometicLandingFields input[type=text],
.inscription fieldset.dometicLandingFields input[type=password],
.inscription fieldset.dometicLandingFields input[type=tel],
.inscription fieldset.dometicLandingFields input[type=file],
.inscription fieldset.dometicLandingFields select {
    float: left;
    width: 100%;
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin: 7px 0;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    color: #1b1b1b;
    height: 45px;
}

.inscription fieldset.dometicLandingFields input[type=tel]::placeholder,
.inscription fieldset.dometicLandingFields input[type=file]::placeholder {
    color: #a8a8a8;
}

.inscription fieldset.dometicLandingFields select {
    padding: 0;
    color: #6d6d6d;
    background: none;
}

.inscription fieldset.dometicLandingFields input[type=file] {
    height: auto;
    padding: 10px;
}

@media screen and (max-width: 1600px) {
    #titleHeaderDometic {
        font-size: 30px;
    }
    #landingDometicContent h3 {
        font-size: 18px;
    }
}

@media screen and (max-width: 1200px) {
    #titleHeaderDometic {
        font-size: 24px;
    }
    #landingDometicContent h3 {
        font-size: 16px;
    }
    #landingDometicLogos {
        width: 100%;
    }
    .header__landing {
        min-height: 0;
        padding: 50px 20px;
    }
}


.secure-space {
    padding: 10px 15px;
    background: #2e4770;
    float: left;
    width: 100%;
    color: white;
}

.secure-space i {
    display: inline-block;
    margin-right: 5px;
}

#SecureBy {
    text-align: left;
    margin-top: 0;
    background: #f8f8f8;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
}

#SecureBy img {
    padding: 10px 15px;
}

#SecureBy .secure-space {
    background: none;
    color: #6d6d6d;
    padding-bottom: 0;
}

.sidebar__inscription {
    width: 100%;
    margin-top: 20px;
}

.secure-space--2 {
    margin-top: 15px;
    border-radius: 3px;
}

.inscription__sidebarBox {
    float: left;
    width: 100%;
    margin-bottom: 15px;
    background: #f8f8f8;
    padding: 15px;
    border-radius: 5px;
}

.inscription__sidebarBox h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.inscription__sidebarBox .pricing__card--header h2 {
    font-weight: 400;
}

.inscription__sidebarBox.pricing__card {
    margin-top: 0;
}

.inscription__question p {
    font-size: 14px;
}

.inscription__question .button__orange {
    display: inline-block;
    width: auto;
    padding: 8px 10px;
    margin-bottom: 0;
}

.inscription__question .button__orange i.fa {
    margin-right: 8px;
}

.inscription__sidebarBox .processServices {
    position: relative;
    z-index: 2;
}

.inscription__sidebarBox .processServices ul {
    display: block;
}

.inscription__sidebarBox .processServices ul li {
    color: #6d6d6d;
    font-size: 14px;
}

.inscription__sidebarBox .processServices .circle__tick {
    margin-right: 5px;
}

.inscription__sidebarBox .padL5 {
    padding: 0 5px;
}

.inscription__sidebarBox .logos__presse {
    margin-bottom: 0;
}

@media screen and (max-width: 1480px) {
    .inscription__sidebarBox h2 {
        font-size: 15px;
    }
    .inscription__sidebarBox .processServices ul li {
        font-size: 12.5px;
    }
    #SecureBy .secure-space {
        font-size: 12px;
    }
}

@media screen and (max-width: 767px) {
    #secure2 {
        display: block;
        font-size: 14px;
    }
    #services1 {
        display: none;
    }
    #SecureBy {
        display: none;
    }
}

@media screen and (max-width: 430px) {
    #secure2 {
        font-size: 11px;
    }
}

.paiement__cgv {
    display: none;
}

#interSecure {
    display: none;
}

#sidebarInscription {
    display: block;
}

#annul2 {
    display: none;
}

.BM_PM {
    float: left;
    width: 100%;
    position: relative;
    padding: 15px 0;
    display: flex;
}

.BM_PM-item {
    display: flex;
    flex-direction: column;
    width: auto;
    position: absolute;
    text-align: center;
    color: white;
    margin-bottom: 10px;
    transform: translateX(-50%);
    background: #2e4771;
    z-index: 10;
    padding-bottom: 10px
}

#mareeCourbe .prev__chart--container {
    margin-top: 15px;
}

@media screen and (min-width: 1025px) {
    .indice__dates.hide-m-t {
        display: flex;
    }
}


@media screen and (max-width: 992px) {
    .swiper-slide.slide-fisher {
        width: 60%;
    }
    .swiper-slide.slide-fisher .collab__profile--infos.--listeCommune {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    #CommuneLeft {
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
    .swiper-slide.slide-fisher {
        width: 85%;
    }
    .swiper-slide.slide-fisher .collab__profile--name .profile__picture {
        display: none;
    }
    .swiper-slide.slide-fisher .collab__profile--name {
        margin-top: -25px;
        padding-left: 5px;
    }
    .swiper-slide.slide-fisher .collab__profile--infos p {
        font-size: 12px;
    }
}

.show-400 {
    display: none;
}


@media screen and (max-width: 400px) {
    .show-400 {
        display: block;
    }
}

.newClub__pricing .pricing__card {
    background: #fff;
}

.newClub__pricing .pricing__card--cta a {
    background-image: none;
    background: #ef7d00;
    border: none;
}

.newClub__wrapper {
    padding: 0;
}

.services__list {
    background: #2e4770;
    float: left;
}

.services__list-container {
    background: #2e4770;
}

.services__list .section-title h2 {
    color: #fff;
}

.service__card a {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    height: 175px;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 8px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin-bottom: 40px;
}

.service__card a:hover {
    background: white;
    transform: translate(-5px, 5px);
}

.service__card a .fa {
    position: absolute;
    right: 15px;
    bottom: 15px;
    color: #ef7d00;
    font-size: 16px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.service__card a:hover .fa {
    transform: translateX(5px);
}

.service__card-img {
    background: #ef7d00;
    padding: 10px;
    width: 125px;
    float: left;
    position: relative;
    border-radius: 6px;
    transform: translateY(-40px);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.service__card-img img {
    width: 100%;
}

.service__card-img:after {
    content: '';
    position: absolute;
    bottom: -37px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 62.5px solid transparent;
    border-right: 62.5px solid transparent;
    border-top: 40px solid #ef7d00;
    border-radius: 6px;
}

.service__card--content {
    float: left;
    width: calc(100% - 140px);
    margin-left: 15px;
}

.service__card--content {
    text-align: center;
}

.service__card--content p {
    text-align: center;
    color: #1b1b1b;
    font-size: 16px;
}

.service__card--content h3 {
    margin-top: 0;
    color: #1b1b1b;
    font-weight: 700;
}

.service__card--content h3 span {
    display: block;
    font-size: 14px;
    font-weight: 400;
}

@media screen and (max-width: 1199px) {
    .service__card-img {
        width: 85px;
    }
    .service__card-img:after {
        bottom: -27px;
        border-left: 42.5px solid transparent;
        border-right: 42.5px solid transparent;
        border-top: 30px solid #ef7d00;
    }
    .service__card--content {
        width: calc(100% - 100px);
    }
}

@media screen and (max-width: 991px) {
    .service__card a {
        height: auto;
    }
}

#spotsMap a.unlockSpots.accederSpots {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    display: block;
    border-top: none;
    background: #ef7d00;
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    margin-right: 0;
}

#spotsMap a.unlockSpots.accederSpots.--communes {
    position: relative;
    width: 100%;
    float: left;
    transform: initial;
    left: 0;
    border-radius: 0;
    padding: 7px;
    text-align: right;
    padding: 12px;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 350px;
}

#spotsMap a.unlockSpots.accederSpots.--communes svg {
    margin-right: 8px;
    width: 24px;
    height: 24px;
}


/* Shake animation bouton spot
@-webkit-keyframes shakeBtn {
from,
to {
  -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
  transform: matrix(1, 0, 0, 1, 0, 0);
}

10%,
30%,
50%,
70%,
90% {
  -webkit-transform: matrix(1, 0, 0, 1, -7, 0);
  transform: matrix(1, 0, 0, 1, -7, 0);
}

20%,
40%,
60%,
80% {
  -webkit-transform: matrix(1.0, 0, 0, 1, 7, 0);
  transform: matrix(1, 0, 0, 1, 7, 0);
}
}

@keyframes shakeBtn {
from,
to {
  -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
  transform: matrix(1, 0, 0, 1, 0, 0);
}

10%,
30%,
50%,
70%,
90% {
  -webkit-transform: matrix(1, 0, 0, 1, -7, 0);
  transform: matrix(1, 0, 0, 1, -7, 0);
}

20%,
40%,
60%,
80% {
  -webkit-transform: matrix(1, 0, 0, 1, 7, 0);
  transform: matrix(1, 0, 0, 1, 7, 0);
}
}
*/

@keyframes shakeBtn {
    from,
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.01);
        transform: scale(1.01);
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: scale(.99);
        transform: scale(.99);
    }
}

#spotsMap a.unlockSpots.accederSpots.--communes.shake {
    -webkit-animation-name: shakeBtn;
    animation-name: shakeBtn;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-fill-mode: both;
}


/* fin Shake */

.bloc__headerFlex a.toSpotList {
    top: auto;
    left: auto;
    right: 0;
    transform: none;
}

.bloc__headerFlex #sub__indice {
    color: #666666;
    font-weight: normal;
    letter-spacing: normal;
    font-size: 16px
}


/*
.stats__overview--header a.unlockSpots.accederSpots i {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
}
*/

.b_slf_droite_2 .stats__overview--header#spotsMap a.unlockSpots.accederSpots {
    font-size: 14px;
    transform: translate(-50%, -50%);
    padding: 10px;
    margin: 0;
    min-width: 55%;
}

.b_slf_droite_2 .stats__overview--header#spotsMap a.unlockSpots.accederSpots br {
    display: none;
    visibility: hidden;
}

.b_slf_droite_2 .stats__overview--header#spotsMap a.unlockSpots.accederSpots i {
    top: 0;
    transform: none;
    right: 0;
    position: relative;
}

.materiel__grid {
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 15px;
    margin: 7.5px 0;
}

.materiel__grid .comparateur__item {
    margin: 0;
}

.materiel__grid .comparateur__item a {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 10px;
}

.materiel__grid .comparateur__item--img {
    height: 150px;
}

.materiel__grid .comparateur__item--content {
    padding: 0;
    margin-top: 7.5px;
}

.materiel__grid .comparateur__item--content h2 {
    font-size: 14px;
}

.materiel__grid .spot__save {
    font-size: 12px;
    margin-top: 7.5px;
    margin-bottom: 0;
}

@media screen and (max-width: 1000px) {
    .stats__overview--header a.unlockSpots.accederSpots.accederSpots {
        width: 80%;
    }
}

.inscription .pricing__card--dec {
    background: #2e4770;
}

.inscription .pricing__card--dec .pricing__card--cta a {
    background: #2e4770;
}

.inscription .pricing__card--prem {
    background: #ef7d00;
}

.inscription .pricing__card--prem .pricing__card--cta a {
    background: #ef7d00;
}

.inscription .pricing__card--cta a {
    border: none;
}

#promoPacificPeche {
    background: #fdcb2a;
    text-align: center;
    float: left;
    width: 100%;
    padding: 30px 15px;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

#promoPacificPeche h2 {
    color: #0e2255;
    font-weight: 700;
}

.sidebar__inscription #promoPacificPeche {
    margin-bottom: 15px;
}

#promoPacificPeche .fa-gift {
    font-size: 90px;
    position: absolute;
    z-index: 1;
    bottom: 50%;
    transform: translateY(50%);
    left: 10px;
    color: rgba(255, 255, 255, 0.5);
}

#promoPacificPeche h2 {
    font-size: 18px;
    line-height: 1.6;
    position: relative;
    z-index: 3;
}

@media screen and (max-width: 1600px) {
    #promoPacificPeche h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 767px) {
    #promoPacificPeche {
        padding: 15px;
    }
    .inscription .pricing__card .pricing__card--cta h2 {
        font-weight: 700;
        text-align: left;
        margin-top: 10px;
        font-size: 4.2vw;
    }
    .inscription .pricing__card .pricing__card--cta h2 i.fa {
        margin-right: 10px;
    }
    .inscription .pricing__card--prem .pricing__card--cta h2 {
        color: #ef7d00;
    }
    .inscription .pricing__card--dec .pricing__card--cta h2 {
        color: #2e4770;
    }
    #promoPacificPeche h2 {
        font-size: 15px;
    }
    #promoPacificPeche .fa-gift {
        font-size: 22vw;
    }
    .inscription .pricing__card .pricing__card--header h2 {
        font-size: 18px;
    }
    .inscription .pricing__card .pricing__card--header p.text__orange {
        color: #ef7d00;
        font-weight: 700;
        font-size: 4.5vw;
        margin: 0;
    }
    .inscription .pricing__card .fa-angle-right {
        font-size: 20px;
        color: #1b1b1b;
        position: absolute;
        bottom: 15px;
        right: 15px;
        z-index: 10;
        font-weight: 700;
    }
    .blocOffre {
        float: left;
        width: 100%;
        padding: 0 10px;
    }
}

.inscription .pricing__card .pricing__card--header p.text__orange {
    font-size: 18px;
}

.inscription .pricing__card {
    padding: 15px;
}

.inscription .pricing__card--header {
    height: auto;
}

.blocOffre .pricing__card p {
    font-size: 14px;
}

.blocOffre .pricing__card p span {
    font-size: 14px;
}

.blocOffre--pc h2 {
    color: #ef7d00;
    font-weight: 700;
    text-transform: uppercase;
}

.blocOffre--pc p {
    color: #1b1b1b;
    font-size: 16px;
    margin: 10px 0;
}

.blocOffre--pc h2,
.blocOffre--pc p {
    text-align: center;
}

.blocOffre--pc img {
    width: 100%;
    margin: 10px 0;
}


/* nouvelle page meilleurs spots */

.button__red {
    color: white;
    font-weight: 400;
    padding: 0.8em;
    background: #e01018;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.button__red:hover {
    background: #f9474e;
}

.sticky__cta {
    float: left;
    width: 100%;
    padding: 15px;
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 10;
}

.sticky__cta a {
    display: inline-block;
}
a.btn-orange.appDl {
    font-size: 16px;
}
.faq__header {
    position: relative;
    float: left;
    width: 100%;
}

.faq__header img {
    width: 100%;
}

.faq__header h2 {
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 28px;
    position: absolute;
    top: 8%;
    left: 20px;
    font-weight: 700;
}

.faq__header .btn_row {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-around;
    z-index: 7;
}

.faq__header .btn_row .btn-orange {
    font-size: 16px;
    padding: 0.6em 2em;
}

.post__main .btn_row {
    position: sticky;
    width: 100%;
    top: 140px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 10;
    height: 80px;
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-100%);
}

.post__main .btn_row .btn-orange {
    font-size: 18px;
    padding: 0.75em 1.25em;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28.33%;
    overflow: hidden;
}

.faq__header .btn_row,
.faq__header h2 {
    text-transform: uppercase;
}

.faqArticle__content.newFaq h2 {
    float: left;
    width: 100%;
    color: #ef7d00;
    font-size: 28px;
    display: block;
    text-transform: uppercase;
}

.faqArticle__content.newFaq ul li {
    font-size: 18px;
    color: #1b1b1b;
}

.faqArticle__content.newFaq .button__outline {
    float: left;
    display: block;
    font-size: 18px;
}

.faqArticle__content.newFaq h1 {
    font-size: 24px;
    font-weight: 700;
    color: #1b1b1b;
}

.faqArticle__content.newFaq h1 span {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #ef7d00;
}

.faqArticle__content.newFaq h3 {
    font-size: 18px;
    color: #1b1b1b;
    font-weight: 700;
    display: block;
    float: left;
    margin: 10px 0;
    width: 100%;
}

.faqArticle__content.newFaq p {
    font-size: 16px;
    color: #1b1b1b;
    margin: 15px 0;
    display: block;
    float: left;
    width: 100%;
}

.faqArticle__content.newFaq p a {
    color: #ef7d00;
    font-weight: 700;
}

.faqArticle__content.newFaq .newFaq__subtitle {
    position: relative;
    margin-bottom: 20px;
    float: left;
}

.faqArticle__content.newFaq .newFaq__subtitle h2 {
    color: #ef7d00;
    font-size: 24px;
    display: inline-block;
    padding-bottom: 5px;
}

.faqArticle__content.newFaq .newFaq__subtitle h2 span {
    font-size: 32px;
}

.faqArticle__content.newFaq .newFaq__subtitle .line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 250px;
    max-width: 100%;
    background: #ef7d00;
}

.faqArticle__content.newFaq .spot__type {
    position: relative;
    margin: 30px 0;
}

.faqArticle__content.newFaq .spot__type .faq__phone {
    width: auto;
    position: absolute;
    margin: 0;
    height: 130%;
    top: -15%;
    left: 0;
    transform: translateX(-50%);
}

.faqArticle__content.newFaq .spot__type h3 {
    color: #2e4770;
    font-size: 14px;
    font-weight: 700;
}

.faqArticle__content.newFaq .spot__type--left {
    width: 50%;
}

.faqArticle__content.newFaq .spot__type--right {
    width: 50%;
    padding: 15px;
    position: relative;
    background: #efefef;
}

.faqArticle__content.newFaq .spot__type--content ul {
    margin: 0;
    padding-left: 20px;
}

.faqArticle__content.newFaq .spot__type--content ul li {
    color: #1b1b1b;
    font-size: 13px;
    margin: 10px 0;
}

.faqArticle__content.newFaq .spot__type--content ul li span {
    display: block;
    text-transform: uppercase;
    font-weight: 700;
}

.faqArticle__content.newFaq .spot__type--content ul.sharedspots li {
    font-size: 15px;
    font-weight: 700;
}

@media screen and (max-width: 1400px) {
    .faqArticle__content.newFaq .spot__type--content ul.sharedspots li {
        font-size: 14px;
    }
}

.faqArticle__content.newFaq .footer__spot--type {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 20px;
}

.faqArticle__content.newFaq .footer__spot--type .button__blue,
.faqArticle__content.newFaq .footer__spot--type .button__red,
.faqArticle__content.newFaq .footer__spot--type .button__orange {
    font-size: 16px;
    display: inline-block;
    width: 100%;
}

.faqArticle__content.newFaq .faqPerks {
    float: left;
    width: 100%;
    background: #2e4770;
    color: white;
    font-size: 15px;
    font-weight: 400;
    padding: 10px;
    margin: 15px 0;
}

.faqArticle__content.newFaq .faqPerks--red {
    background: #e01018;
}

.faqPerks span.fakeButton {
    background: #20a720;
    padding: 2px 7px;
    border-radius: 50px;
}

.spot__type--desc {
    width: 75%;
    float: right;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#sidebarServices {
    margin-top: 30px;
}

.faq__citation {
    float: left;
    padding: 15px;
    margin: 15px 0;
    position: relative;
    max-width: 80%;
    display: flex;
    align-items: center;
    margin-left: 10%;
}

.faq__citation span {
    font-family: 'Lato', serif;
}

.faqArticle__content.newFaq .faq__citation p {
    color: #1b1b1b;
    margin: 0;
    padding: 15px;
    float: left;
    width: calc(100% - 250px);
    font-size: 16px;
    background: #efefef;
    position: relative;
}

.faqArticle__content.newFaq .faq__citation p::before {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    left: -150px;
    width: 150px;
    background: #efefef;
}

.faqArticle__content .citation__thumb {
    position: relative;
    width: 250px;
    height: 250px;
    float: left;
    z-index: 2;
    border-radius: 250px;
}

.faqArticle__content img.citation__guillemet {
    height: 45px;
    width: auto;
    position: absolute;
    right: 10px;
    top: -30px;
    margin: 0;
}

@media screen and (max-width: 1500px) {
    .faq__citation {
        max-width: 90%;
        margin-left: 5%;
    }
    .faqArticle__content.newFaq .faq__citation p {
        font-size: 14px;
    }
    .post__main .btn_row .btn-orange {
        font-size: 16px;
    }
}

@media screen and (max-width: 1070px) {
    .faq__citation {
        max-width: 100%;
        margin-left: 0;
    }
}

@media screen and (max-width: 1000px) {
    .post__main .btn_row .btn-orange {
        max-width: 45%;
    }
}

@media screen and (max-width: 930px) {
    .post__main .btn_row {
        top: 130px;
    }
}

@media screen and (max-width: 768px) {
    .faq__citation {
        flex-direction: column;
        margin-top: -50px;
    }
    .faqArticle__content.newFaq .faq__citation p {
        width: 100%;
        padding-top: 60px;
    }
    .faqArticle__content.newFaq .faq__citation p::before {
        display: none;
    }
    .faqArticle__content .citation__thumb {
        height: 100px;
        width: 100px;
        margin: 0;
        transform: translateY(50px);
    }
    .post__main .btn_row .btn-orange {
        padding: 1em;
    }
    .post__main .btn_row {
        top: calc(100vh - 80px);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        transform: translateY(0%);
        background: none;
    }
}

@media screen and (max-width: 478px) {
    .post__main .btn_row .btn-orange {
        max-width: 90%;
    }
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
}

.embed-container iframe {
    margin: 15px 0;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.faq__box {
    float: left;
    width: 100%;
    padding: 30px 50px;
    background: #efefef;
    margin-top: 15px;
}

.faqArticle__content.newFaq .faq__box p {
    margin-top: 0;
}

.faqArticle__content.newFaq .faq__box input {
    margin-bottom: 0;
}

.flex__images {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 100%;
}

.faqArticle__content .flex__images img {
    width: 50%;
}

.pc_header .prev__chart {
    height: 200px;
}

@media screen and (max-width: 1680px) {
    .faqArticle__content.newFaq .newFaq__subtitle h2 {
        font-size: 22px;
    }
    .faqArticle__content.newFaq .newFaq__subtitle h2 span {
        font-size: 28px;
    }
}

@media screen and (max-width: 1400px) {
    .faq__header .btn_row .btn-orange {
        font-size: 13px;
    }
}

@media screen and (max-width: 1300px) {
    .spot__type {
        display: block;
    }
    .faqArticle__content.newFaq .spot__type--left {
        width: 100%;
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
    }
    .faqArticle__content.newFaq .spot__type--right {
        width: 100%;
        float: left;
        padding: 20px;
    }
    .faqArticle__content.newFaq .spot__type .faq__phone {
        left: 0;
        transform: translateX(-25%);
    }
    img.spot__type--img {
        margin: 0;
        height: 300px;
        width: 300px;
        object-fit: cover;
        border-radius: 300px;
        padding-right: 0;
    }
    img.spot__type--img.pad-r {
        padding: 0;
    }
    .pc_header .indice__header {
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .faqArticle__content.newFaq .newFaq__subtitle h2 {
        font-size: 20px;
    }
    .faqArticle__content.newFaq h1 {
        font-size: 20px;
    }
    .faqArticle__content.newFaq h1 span {
        font-size: 32px;
    }
    .faqArticle__content.newFaq h2 {
        font-size: 20px;
    }
    .faqArticle__content.newFaq ul li {
        font-size: 16px;
    }
    .faq__box {
        padding: 30px 30px;
    }
}

@media screen and (max-width: 1070px) {
    .faq__header h2 {
        font-size: 20px;
    }
    .faqArticle {
        margin-top: 0;
    }
    #sidebarServices {
        position: fixed;
        top: 90px;
        left: 0;
        right: 0;
        padding: 0;
        z-index: 2;
        width: 100%;
        margin-top: 0;
    }
    #sidebarServices .faq__sidebar--head {
        display: none;
    }
    #sidebarServices .faq__serviceList {
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-appearance: none;
        margin: 0;
        height: 50px;
    }
    #sidebarServices .faq__serviceList li {
        width: auto;
        display: inline-block;
        border-top: none;
    }
    #sidebarServices .faq__serviceList li a {
        display: block;
        padding: 0;
        font-size: 16px;
        color: #666;
        text-decoration: none;
        transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
        height: 50px;
        /* line-height: 50px; */
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-bottom: 4px solid transparent;
    }
    #sidebarServices .faq__serviceList li a.current {
        border-bottom: 4px solid #ef7d00;
        background: none;
        color: #1b1b1b;
    }
    #sidebarServices .faq__retourClub {
        display: none;
    }
    #sidebarServices iframe {
        display: none;
    }
    .w100--1070 {
        width: 100%;
    }
    .mbMg-5 {
        margin-left: 5px;
    }
    .padT0-1070 {
        padding-top: 0;
    }
    .faq__header {
        margin-top: 70px;
    }
    .header__article.faq__header {
        margin-top: 0;
    }
    .faq__header .btn_row .btn-orange {
        font-size: 12px;
        padding: 0.6em 1.5em;
    }
}

@media screen and (max-width: 980px) {
    .faq__header .btn_row .btn-orange {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .faq__header h2 {
        width: 100%;
        text-align: center;
        font-size: 20px;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 15px;
    }
    .faq__header.pc_header img {
        height: 220px;
        object-fit: cover;
    }
    .faq__header.pc_header h2 {
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    }
    .pc_header .prev__chart {
        height: 110px;
    }
    .pc_header .prev__chart--yAxis .yAxis__row p {
        display: none;
    }
    .spot__type--desc {
        width: 70%;
    }
}

@media screen and (max-width: 700px) {
    .faqArticle__content.newFaq .spot__type .faq__phone {
        display: none;
    }
    .spot__type--desc {
        width: 100%;
        float: left;
    }
    .faqArticle__content.newFaq .newFaq__subtitle h2 {
        font-size: 18px;
        padding-bottom: 10px;
    }
    .spot__type--title {
        padding-bottom: 0;
    }
    .faq__box {
        padding: 20px 20px;
    }
}

@media screen and (max-width: 625px) {
    .spot__type {
        flex-direction: column;
    }
    .spot__type--left {
        width: 100%;
    }
    .spot__type--right {
        width: 100%;
    }
    .spot__type--title h3 {
        font-size: 16px;
    }
    .pad0__625 {
        padding: 0;
    }
    #sidebarServices .faq__serviceList li a {
        font-size: 12px;
        padding: 0 10px;
    }
}

.padT0 {
    padding-top: 0;
}

#facteursMarees p span {
    color: #2e4770;
    font-weight: 700;
}

.faqArticle__content.newFaq .spot__type--right.carnet__dlApp {
    background: #2e4770;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.spot__type--right.carnet__dlApp h2,
.spot__type--right.carnet__dlApp p {
    color: white;
    text-align: center;
    text-transform: none;
}

.spot__type--right.carnet__dlApp h2 {
    font-size: 32px;
    font-weight: 700;
    margin-top: 0;
}

.spot__type--right.carnet__dlApp p {
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
}

.spot__type--right.carnet__dlApp .line {
    height: 6px;
    width: 15%;
    background: white;
    margin: 15px 0;
}

.spot__type--right.carnet__dlApp .dl__buttons a {
    padding: 10px;
    border: 2px solid white;
    border-radius: 3px;
    margin: 5px;
    display: inline-block;
    color: white;
    width: 50%;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.spot__type--right.carnet__dlApp .dl__buttons a:hover {
    background: rgba(255, 255, 255, 0.2);
}

.spot__type--right.carnet__dlApp .dl__buttons a .fa {
    float: left;
    font-size: 30px;
}

.spot__type--right.carnet__dlApp .dl__buttons a span {
    float: left;
    width: 80%;
    text-align: center;
    font-size: 13px;
}

.spot__type--right.carnet__dlApp .dl__buttons {
    width: 70%;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 768px) {
    .cp_header img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
}

@media screen and (max-width: 600px) {
    .spot__type--right.carnet__dlApp .dl__buttons {
        width: 100%;
    }
    .spot__type--right.carnet__dlApp .dl__buttons a .fa {
        font-size: 20px;
        line-height: 30px;
    }
    .spot__type--right.carnet__dlApp .dl__buttons a span {
        font-size: 12px;
    }
}


/* Pour tests offres PP */

#promoPacificPeche.PP3 {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
}

.sidebar__inscription #promoPacificPeche h2 {
    font-size: 15px;
}

.bandeau100 .col-50 {
    float: left;
    width: 50%;
    background: #efefef
}

.col-50 img {
    float: left;
    width: 100%;
    margin: 0;
}

.col-50 .spot__type--desc {
    padding: 15px 0;
}

.col-50 .spot__type--desc .spot__type--content {
    padding: 0 30px;
}

.col-50 .spot__type--desc .spot__type--content.bd-l {
    border-left: 1px solid rgba(0, 0, 0, 0.2)
}

.gallery__grid {
    float: left;
    width: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 768px) {
    .gallery__grid {
        grid-gap: 5px;
    }
}

.gallery__gridItem img {
    width: 100%;
    margin: 0;
}

.gabarit__howto {
    display: flex;
}

.esp-concours {
    margin-top: 20px;
    border-top: 10px solid #ef7d00;
    display: flex;
}

@media screen and (max-width: 767px) {
    .bandeau100 .col-50 {
        width: 100%;
    }
    .esp-concours,
    .gabarit__howto {
        flex-direction: column;
    }
}

.card__CTA .card__item--desc p {
    height: auto;
    font-size: 16px;
    line-height: 1.58;
}

.card__CTA .card__item--desc h2 {
    font-size: 16px;
}

.card__CTA .card__item--desc h4 {
    font-size: 16px;
    margin: 10px 0;
}

.card__CTA .card__item--desc .btn-orange {
    display: inline-block;
    padding: 5px 15px;
    box-shadow: none;
    font-size: 18px;
    margin-top: 10px;
}

.bd-sticky {
    position: sticky;
    top: 135px;
    z-index: 20;
}

.bd-sticky-125 {
    top: 125px;
}

@media screen and (max-width: 992px) {
    .bd-sticky {
        position: relative;
        top: 0;
    }
}

@media screen and (max-width: 1300px) {
    .bd-boutons {
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
}

.header__article {
    float: left;
    width: 100%;
}

.header__article h1 {
    float: left;
    width: 100%;
    color: #333333;
    font-size: 42px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.header__articleImg {
    position: relative;
    float: left;
    width: 100%;
}

.header__articleImg img {
    float: left;
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}

.wrapper__especeInfos.wrapper__especeInfos--header {
    background: #ef7d00;
    position: absolute;
    top: 0;
    left: calc(8.33333333% + 1rem);
    width: 230px;
    flex-direction: column;
    padding: 15px;
}

.wrapper__especeInfos.wrapper__especeInfos--header:before {
    content: "";
    position: absolute;
    bottom: -40px;
    left: -1px;
    width: 0;
    height: 0;
    border-top: 40px solid #ef7d00;
    border-right: 115px solid transparent;
}

.wrapper__especeInfos.wrapper__especeInfos--header:after {
    content: "";
    position: absolute;
    bottom: -40px;
    right: -1px;
    width: 0;
    height: 0;
    border-top: 40px solid #ef7d00;
    border-left: 115px solid transparent;
}

.wrapper__especeInfos .espece__info.espece__info--mid {
    margin: 15px 0;
}

.wrapper__especeInfos.wrapper__especeInfos--header .espece__info span {
    text-transform: uppercase;
    font-size: 20px;
}

.wrapper__especeInfos.wrapper__especeInfos--header .espece__info .star {
    height: 26px;
}

.wrapper__especeInfos.wrapper__especeInfos--header .espece__info .star_grey {
    color: rgba(255, 255, 255, 0.4);
}

.wrapper__especeInfos.wrapper__especeInfos--header .espece__info p {
    font-weight: 400;
    font-size: 18px;
    text-align: center;
}

.wrapper__especePechee .especePechee {
    float: left;
    width: auto;
    padding: 0;
    display: flex;
    align-items: center;
    background: transparent;
}

.wrapper__especePechee .especePechee p {
    float: left;
    font-size: 14px;
    font-weight: 700;
    color: #1b1b1b;
    padding: 15px;
    position: relative;
    background: #efefef;
    height: 70px;
    display: flex;
    align-items: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.wrapper__especePechee .especePechee p:after {
    content: "";
    position: absolute;
    display: block;
    bottom: 50%;
    transform: translateY(50%);
    right: -9px;
    border-left-width: 10px;
    border-right-color: transparent;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #efefef;
}

.wrapper__especePechee .especePechee span {
    float: left;
    padding: 15px;
    font-size: 14px;
    background: #2e4770;
    color: white;
    text-decoration: none;
    cursor: pointer;
    height: 70px;
    display: flex;
    align-items: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.espece__dossier {
    max-width: 700px;
    border-radius: 8px;
    background: #2e4770;
    color: white;
    margin: 15px 0;
    padding: 15px;
    float: left;
    border-top: none;
}

.espece__dossier h2 {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.espece__dossier span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
    width: 100%;
    font-size: 16px;
}

.espece__dossier span div {
    line-height: 30px;
}

.article__mag .row .post__content .espece__dossier img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.espece__dossier .button__orange {
    color: white;
    display: inline-block;
    width: auto;
    padding: 5px 15px;
}

.article__mag .row .post__content .wrapper__text,
.article__mag .row .post__content .wrapper__title,
.article__mag .row .post__content .wrapper__dossierSpe,
.article__mag .row .post__content .wrapper__especePechee,
.article__mag .row .post__content .wrapper__media {
    padding: 0 50px 0 0;
}

.article__mag .row .post__content .post__main,
.full__left {
    width: calc(100% - 300px);
}

.wrapper__text h2 {
    font-size: 1.8rem;
    color: #ef7d00;
}

.wrapper__text iframe {
    max-width: 100%;
}

.article__mag .row .post__content .wrapper__title p.chapeau,
.wrapper__text p {
    font-size: 1.1rem;
    color: #1b1b1b;
}

.header__article.faq__header .btn_row .btn-orange {
    font-size: 14px;
    padding: 0.5em 1em;
}

@media screen and (max-width: 1400px) {
    .header__article h1 {
        font-size: 36px;
    }
    .article__mag .row .post__content .wrapper__text,
    .article__mag .row .post__content .wrapper__title,
    .article__mag .row .post__content .wrapper__dossierSpe,
    .article__mag .row .post__content .wrapper__especePechee,
    .article__mag .row .post__content .wrapper__media,
    .post__content .article__mag--similaires {
        padding: 0 50px 0 0;
        padding: 0;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header .espece__info span {
        font-size: 14px;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header .espece__info p {
        font-size: 16px;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header {
        width: 200px;
    }
    .wrapper__especeInfos .espece__info.espece__info--mid {
        margin: 10px 0;
    }
    .wrapper__especePechee .especePechee p,
    .wrapper__especePechee .especePechee span {
        font-size: 12px;
        padding: 10px;
    }
}

@media screen and (max-width: 1100px) {
    .wrapper__especeInfos.wrapper__especeInfos--header {
        width: auto;
        left: 16px;
        padding: 10px;
        max-width: 200px;
    }
    .wrapper__especeInfos .espece__info.espece__info--mid {
        margin: 5px 0;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header .espece__info span {
        font-size: 12px;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header .espece__info p {
        font-size: 12px;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header:after {
        bottom: -20px;
        border-top: 20px solid #ef7d00;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header:before {
        bottom: -20px;
        border-top: 20px solid #ef7d00;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header .espece__info .star {
        height: 16px;
    }
}

@media screen and (max-width: 992px) {
    .wrapper__text h2 {
        font-size: 1.6rem;
    }
    .espece__techniques.espece__dossier a {
        font-size: 14px;
        margin-top: 10px;
    }
    .espece__dossier h2 {
        font-size: 22px;
        margin: 1rem 0;
        margin-top: 0;
    }
    .header__article h1 {
        font-size: 32px;
    }
    .wrapper__text h2,
    .wrapper__media h2 {
        margin: 1rem 0;
    }
    .wrapper__especePechee .especePechee p {
        width: 100%;
    }
    .wrapper__especePechee .especePechee {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .wrapper__especePechee .especePechee p br {
        display: none;
    }
    .wrapper__especePechee .especePechee p,
    .wrapper__especePechee .especePechee span {
        font-size: 14px;
        width: 100%;
        justify-content: center;
        border-radius: 0;
        font-size: 14px;
        width: 100%;
        justify-content: center;
        border-radius: 0;
        padding: 15px;
        height: auto;
    }
    .especePecheeInput {
        width: 100%;
    }
    .wrapper__especePechee .especePechee p:after {
        bottom: -9px;
        transform: translateX(50%);
        right: 50%;
        border-left-width: 10px;
        border-right-color: transparent;
        border-top: 10px solid #efefef;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: none;
    }
    #pubGabaritMagasin {
        display: none;
    }
}

@media screen and (max-width: 850px) {
    .espece__dossier span {
        font-size: 14px;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media screen and (min-width: 768px) {
    .article__mag .row .post__content .wrapper__especePechee.avec_marge_negative {
        margin-top: -40px;
    }
}

@media screen and (max-width: 767px) {
    .header__article h1 {
        font-size: 24px;
    }
    .article__mag .row .post__content .post__main,
    .full__left {
        width: 100%;
        padding-right: 0;
    }
    .full__right {
        width: 100%;
    }
    #blocD1 {
        display: grid;
        grid-template-columns: 2;
        grid-template-columns: calc(50% - 7.5px) 0 calc(50% - 7.5px);
        grid-template-rows: 1;
        grid-column-gap: 7.5px;
        grid-row-gap: 7.5px;
    }
    .article__mag .row .post__content .wrapper__title p.chapeau,
    .wrapper__text p {
        font-size: 1rem;
    }
    .espece__dossier h2 {
        font-size: 18px;
    }
}

@media screen and (max-width: 600px) {
    .wrapper__especeInfos.wrapper__especeInfos--header {
        width: 100%;
        max-width: 100%;
        left: 0;
        position: relative;
        margin: 0;
    }
    .wrapper__especeInfos.wrapper__especeInfos--header:before,
    .wrapper__especeInfos.wrapper__especeInfos--header:after {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    #blocD1 {
        grid-template-columns: 100%;
    }
    .espece__dossier span div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .espece__dossier span {
        display: flex;
        align-items: center;
        text-align: center;
    }
}

.pricing__card--etapeOffre {
    margin-top: 20px;
}

.pricing__card--etapeOffre ul li {
    font-size: 14px;
}

@media screen and (max-width: 365px) {
    .pricing__card--etapeOffre ul li {
        font-size: 13px;
    }
    .inscription .pricing__card .pricing__card--header p.text__orange {
        font-size: 14px;
    }
}

.slf__logCta {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
    background: #1db954;
    text-transform: uppercase;
    line-height: 26px;
    font-size: 18px;
    padding: 0.8em 2em;
    font-family: 'Open sans', sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

.slf__logCta:hover {
    background: #21b254;
}

.swiper-social .socialProof {
    border: 1px solid rgba(0, 0, 0, 0.1);
    float: left;
    width: 100%;
    /* background: #2e4770; */
    border-radius: 6px;
    padding: 10px 0;
    margin-bottom: 15px;
    margin-right: 5px;
}

.swiper-social .socialProof p {
    font-size: 12px;
}

.swiper-social .socialProof h3 {
    font-size: 13px;
    margin-bottom: 10px;
}


/* auto complete style */

#ui-id-1,
#ui-id-2 {
    border: none;
    box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.1);
}

.ui-menu .ui-menu-item {
    border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
}

#ui-id-2.ui-menu .ui-menu-item {
    padding: 0;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper {
    padding: 10px;
}

.ui-menu .ui-menu-item .ui-menu-item-wrapper:hover,
#ui-id-2.ui-menu .ui-menu-item .ui-menu-item-wrapper:hover {
    background: #efefef;
    border: none;
    color: #1b1b1b;
}

#singleArticle .row .post__content .wrapper__text,
#singleArticle .row .post__content .wrapper__title,
#singleArticle .row .post__content .wrapper__dossierSpe,
#singleArticle .row .post__content .wrapper__especePechee,
#singleArticle .row .post__content .wrapper__media {
    padding-right: 200px;
}

@media screen and (max-width: 1000px) {
    #singleArticle .row .post__content .wrapper__text,
    #singleArticle .row .post__content .wrapper__title,
    #singleArticle .row .post__content .wrapper__dossierSpe,
    #singleArticle .row .post__content .wrapper__especePechee,
    #singleArticle .row .post__content .wrapper__media {
        padding-right: 0px;
    }
}

.listepriseauto {
    width: 100%;
}


/* bugfix Safari sur mobile (guillaume) */

div#popup_name.popup_block div.spotsCta__box.previsions__modal.show-on-mobile {
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
}

div#popup_name.popup_block div.spotsCta__box.previsions__modal.show-on-mobile div {
    padding: 1rem;
}


/* modifs sur le fil */


/*
.b_slf_droite {
max-width: 600px;
}
*/

.b_slf_droite .swiper-container,
.b_slf_droite2 .swiper-container,
.b_slf_droite .swiper-wrapper,
.b_slf_droite2 .swiper-wrapper {
    height: auto;
}

.slf__filtres ul li a.filtreSelected {
    border-bottom: 4px solid #2e4770;
}

.slf__commenter {
    position: relative;
    margin-bottom: 0;
}

.formular.slf__commenter .saisie_2 {
    margin-top: 0;
    float: left;
    width: calc(100% - 150px);
    margin-left: 10px;
}

.formular.slf__commenter .saisie_2 textarea {
    padding: 10px 30px 10px 15px;
    line-height: 1.42857143;
}

.slf__commenter textarea,
.slf__commenter .emojionearea,
.emojionearea.form-control {
    font-size: 14px;
    min-height: 40px;
    height: auto;
    resize: none;
    border-radius: 40px;
    background: #efefef;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border: 1px solid transparent;
    box-shadow: none;
}

.slf__commenter .emojionearea .emojionearea-editor {
    min-height: 40px;
    padding-right: 90px;
    padding: 10px 90px 10px 15px;
}

.slf__commenter .header-thumbnail {
    max-width: 40px;
    max-height: 40px;
}

.slf__commenter textarea:focus,
.slf__commenter .emojionearea.focused {
    outline: none;
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

.slf__commenter .send {
    position: relative;
    height: 40px;
    border-radius: 43px;
    background: #2e4770;
    color: white;
    padding: 0 20px;
    line-height: 30px;
    font-size: 14px;
    float: right;
    width: 90px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border: none;
}

.slf__commenter .send:hover {
    background: #355282;
}

.like {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.like .fa {
    margin-right: 5px;
}

.like .fa:hover {
    color: #ef7d00;
}

.like .disabled .fa {
    color: #ef7d00;
}

.plusposition {
    display: flex;
}

.slf-post-radio:checked+label {
    border: 2px solid #2e4770;
}

.card__monCarnet--header {
    position: relative;
    background: #2e4770;
    float: left;
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.inscription h3.choix-mode-term {
    width: 100%;
    display: block;
    float: left;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    color: #1b1b1b;
    margin-top: 15px;
}

#adhesionA .radio-card input[type="radio"]:checked+label {
    border: 4px solid #ef7d00;
}

.radio-card label {
    margin: 15px 0;
    height: 230px;
    background: #efefef;
    border-radius: 10px;
    border: 4px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card__monCarnet--header .ht__container {
    width: auto;
}

.card__monCarnet--header .header-thumbnail {
    height: 200px;
    width: 200px;
    max-height: 200px;
    max-width: 200px;
}

.card__monCarnet--header h2 {
    color: white;
    font-size: 1.1rem;
    font-weight: 400;
    text-align: center;
}

.card__monCarnet--header p {
    color: white;
    font-size: 0.8rem;
    font-weight: 400;
    margin-bottom: 10px;
}

@media screen and (max-width: 991px) {
    .card__monCarnet--header .header-thumbnail {
        height: 150px;
        width: 150px;
        max-height: 150px;
        max-width: 150px;
    }
    .card__monCarnet--header h2 {
        font-size: 1rem;
    }
}

.card__monCarnet--links {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px;
}

.card__monCarnet--links a {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Open sans', sans-serif;
    font-size: 13px;
}

.card__monCarnet--links a .link-pic span {
    color: white;
    position: absolute;
    height: 14px;
    width: 14px;
    font-size: 10px;
    background: red;
    border-radius: 14px;
    top: -5px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__monCarnet--links a .link-pic {
    position: relative;
    margin-right: 5px;
}

.card__monCarnet--links a .fa {
    color: white;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.card__monCarnet--links a:hover {
    color: white;
}

.card__monCarnet--links a:hover .fa {
    transform: rotate(15deg);
}

.monCarnet__profileLinks {
    width: 100%;
    display: flex;
    align-items: center;
}

.monCarnet__profileLinks a {
    width: 100%;
    text-align: center;
    padding: 10px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 13px;
    color: #6d6d6d;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.monCarnet__profileLinks a:nth-child(2) {
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.monCarnet__profileLinks a:hover {
    background: rgba(0, 0, 0, 0.05);
}


/* emoji area */

.emojionearea-standalone {
    float: right;
}

.slf__commenter .emojionearea .emojionearea-editor:empty:before {
    color: #6d6d6d;
}

.slf__poster form .emojionearea,
.emojionearea.form-control {
    float: left;
    width: calc(100% - 60px);
    resize: none;
    padding: 15px;
    padding-right: 25px;
    padding-top: 25px;
    font-family: 'Open Sans';
    color: #1b1b1b;
    font-size: 14px;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.slf__poster form .emojionearea {
    padding: 0;
}

.slf__poster .emojionearea .emojionearea-picker .emojionearea-wrapper {
    width: 100%;
}

.slf__poster form .emojionearea .emojionearea-editor {
    min-height: 80px;
    padding: 15px;
    padding-right: 25px;
    padding-top: 25px;
}

.slf__poster .emojionearea .emojionearea-picker {
    width: 210px;
}

.slf__poster .emojionearea .emojionearea-button.active+.emojionearea-picker-position-right {
    margin-right: -210px;
}

.slf__commenter .emojionearea .emojionearea-button {
    top: 9px;
    right: 10px;
}

@media screen and (max-width: 1024px) {
    .emojionearea .emojionearea-button {
        display: none;
    }
    .divOutside {
        display: none;
    }
}

.monCarnet__badges {
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 40px);
    grid-gap: 4px;
    padding: 10px;
    padding-top: 0;
}

.monCarnet__badges img {
    max-width: 40px;
}

@media screen and (max-width: 800px) {
    .monCarnet__badges img {
        max-width: 30px;
    }
}

.fa.modifierProfil {
    color: white;
    text-align: right;
    position: absolute;
    top: 10px;
    right: 10px;
    height: 40px;
    width: 40px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

@media screen and (max-width: 625px) {
    .fa.modifierProfil {
        top: auto;
        right: auto;
        bottom: -30px;
        left: calc(50% - 20px);
    }
}

.fa.modifierProfil:hover {
    background: rgba(255, 255, 255, 0.05);
}

.slf__post--send {
    background: #2e4770;
    color: white;
    border: none;
    display: block;
    float: left;
    font-size: 16px;
    border-radius: 50px;
    padding: 8px 15px;
    cursor: pointer;
}

.slf__post--send:hover {
    background: #3d5e94;
}


/* bloc pas encore posté */

.no-post h2 {
    font-size: 20px;
    color: #2e4770;
    font-weight: 700;
    margin-bottom: 10px;
}

.no-post h2 span {
    color: #6d6d6d;
    font-weight: 400;
}

.no-post h3 {
    font: 400 16px/1.5 'Lato';
    color: #6d6d6d;
    margin-bottom: 10px;
}

.no-post p {
    font-size: 16px;
}

.no-post .button__orange {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    padding: 8px 15px;
    font-size: 16px;
    line-height: 1.2;
    font-family: 'Open Sans', sans-serif;
}


/* Résout le bug  causé par la position sticky de la colonne de gauche */

.b_slf_gauche {
    z-index: 10;
}


/* modal selection communes */

.select-communes {
    float: left;
    width: 100%;
    padding: 20px;
    min-height: 320px;
    overflow: hidden;
}

.select-communes.modal__row h3 {
    margin-top: 0;
    font-family: 'Lato', sans-serif;
}

.select-communes form {
    position: relative;
}

.select-communes .input-communes,
.input-text-modal {
    float: left;
    width: 100%;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ebebeb;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
}

.select-communes .input-communes:focus,
.input-text-modal:focus {
    outline: none;
    border: 1px solid #ef7d00;
    border-radius: 0;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.select-communes .input-communes.success {
    border-color: #20a720;
}

.select-communes p {
    font-size: 14px;
    margin-bottom: 15px;
}

.select-communes ul {
    float: left;
    width: 100%;
    margin: 0;
}

.select-communes ul li {
    float: left;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #2e4770;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    line-height: 1;
    background: #efefef;
    margin: 0 8px 8px 0;
    padding: 8px 10px;
    border-radius: 40px;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.select-communes ul li:hover {
    background: #f7f7f7;
    padding-right: 30px;
}

.select-communes ul li .favorite {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 10px;
    transform: translateX(-15px);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.select-communes ul li .favorite .fa {
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    color: #2e4770;
    font-size: 14px;
}

.select-communes ul li:hover>.favorite {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.select-communes ul li .favorite:hover .fa {
    color: #ef7d00;
}

.select-communes ul li.favorited {
    padding-right: 30px;
}

.select-communes ul li.favorited .favorite {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.select-communes ul li.favorited .favorite .fa {
    position: relative;
    color: #ef7d00;
}

.select-communes ul li .favorite[data-tooltip] {
    z-index: 2;
    cursor: pointer;
}

.select-communes ul li .favorite[data-tooltip]:before,
.select-communes ul li .favorite[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

.select-communes ul li .favorite[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: #2e4770;
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
}


/* Triangle hack to make tooltip look like a speech bubble */

.select-communes ul li .favorite[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}


/* Show tooltip content on hover */

.select-communes ul li .favorite[data-tooltip]:hover:before,
.select-communes ul li .favorite[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.select-communes h3 {
    color: #1b1b1b;
    font-weight: 700;
    margin: 15px 0;
    display: block;
    float: left;
    width: 100%;
    font-size: 14px;
}

.modal__row textarea {
    border: none;
    outline: none;
    float: left;
    width: 100%;
    resize: none;
    min-height: 100px;
    font: 14px/1.2 'Lato';
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    font-weight: 700;
    padding: 10px;
    transition: 0.25s all ease;
}

#posterCenterCol .select-communes .results {
    z-index: 10;
}

#modifProfil .modal-content {
    max-height: 650px;
}

.commune__remove {
    height: 10px;
    width: 10px;
    margin-right: 4px;
    fill: #d61a1a;
}

.profil__input textarea:focus {
    border-color: #2e4770;
}

.radio-card label h2 {
    font-size: 22px;
    color: #1b1b1b;
}

.radio-card label h4 {
    font-size: 18px;
    color: #1b1b1b;
    font-weight: 700;
}

.radio-card label p {
    font-size: 18px;
    color: #1b1b1b;
}

.radio-card label span {
    font-size: 12px;
    color: #6d6d6d;
    text-align: center;
}

.radio-card input {
    display: none;
}

#adhesionB {
    display: none;
}

#adhesionB .radio-card input[type="radio"]:checked+label {
    border: 4px solid #ef7d00;
}

#adhesionB .radio-card label {
    background: #2e4770;
}

#adhesionB .radio-card label h2 {
    color: #fff;
}

#adhesionB .radio-card label h4 {
    color: #fff;
}

#adhesionB .radio-card label p {
    color: #fff;
}

#adhesionB .radio-card label span {
    color: #fff;
}

.popup_mer_douce {
    position: fixed;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("/static/photo_site/pop_up-mer-douce.jpg");
    background-size: cover;
    background-position: center center;
    padding: 40px;
    max-width: 800px;
    width: 100%;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup_mer_douce h2 {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 52px;
    color: #1b1b1b;
    margin-bottom: 15px;
    line-height: 1.2;
    font-weight: 400;
}

.popup_mer_douce h2 span {
    font-weight: 400;
    text-transform: none;
}

.popup_mer_douce .btn-orange {
    display: inline-block;
    margin: 15px;
}

.popup_mer_douce-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 800px) {
    .popup_mer_douce {
        max-width: 90%;
        padding: 15px;
    }
    .popup_mer_douce h2 {
        font-size: 36px;
    }
}

@media screen and (max-width: 625px) {
    .popup_mer_douce {
        bottom: 0;
        top: auto;
        transform: none;
        left: 5%;
        min-height: 80%;
    }
}

@media screen and (max-width: 400px) {
    .popup_mer_douce h2 {
        font-size: 24px;
    }
    .popup_mer_douce .btn-orange {
        font-size: 16px;
    }
}

h3.admin-section {
    font-weight: bold;
    float: left;
    margin-top: 1rem;
}


.profile__progress {
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
}

.profile__progress--left {
    float: left;
    width: 83.33%;
    height: 30px;
    background: -moz-linear-gradient(-45deg, #00d9e8 0%, #0067fe 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #00d9e8), color-stop(100%, #0067fe));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #00d9e8 0%, #0067fe 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #00d9e8 0%, #0067fe 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #00d9e8 0%, #0067fe 100%);
    /* IE10+ */
    background: linear-gradient(-45deg, #00d9e8 0%, #0067fe 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00d9e8, endColorstr=#0067fe, GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.profile__progress--premium {
    position: relative;
    float: left;
    width: 16.67%;
    height: 30px;
    margin-bottom: 15px;
}

.profile__progress--premium .profile__progress--bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: grey;
}

.profile__progress--premium.active .profile__progress--bg {
    background: linear-gradient(-45deg, #ef7d00, #ffc931);
    width: calc(100% - 16px);
}

.profile__progress--cell {
    position: relative;
    float: left;
    width: 25%;
    height: 30px;
    border-right: 3px solid #ffffff;
    background: #b3b3b3;
}

.profile__progress--cell p,
.profile__progress--premium p {
    text-align: center;
    color: white;
    width: 100%;
    position: absolute;
    line-height: 30px;
    left: 0;
    top: 0;
    z-index: 2;
    font-size: 12px;
    user-select: none;
}

.profile__progress--premium.active p {
    padding-right: 13px;
}

.profile__progress--cell.active {
    background: transparent;
}

.profile__progress img {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 32px;
    top: calc(50% - 16px);
    right: -16px;
    z-index: 1;
}

.profile__progress.profile__progress--premium img {
    right: 0;
}

.tooltip .trigger {
    width: 100%;
    height: 100%;
    border-radius: 0;
    margin-left: 0;
    border: none;
}

.tooltip .trigger::before {
    left: 10px;
    transform: none;
}

.tooltip .content {
    top: calc(100% + 3px);
}

.tooltip .content::before {
    left: 10px;
    top: -7px;
    box-shadow: -2px -2px 2px -1px rgba(0, 0, 0, 0.1);
}

.onboarding__current {
    float: left;
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.onboarding__current h3 {
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 700;
    color: #1b1b1b;
}

.onboarding__current p {
    font: 400 16px/1.5 'Lato';
}

.onboarding__footer {
    float: left;
    width: 100%;
}

.onboarding__footer .button__orange {
    float: right;
}

.modal__row {
    float: left;
    width: 100%;
    padding: 15px 10px;
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modal__row .btn-orange {
    display: inline-block;
    font-size: 14px;
    box-shadow: none;
    cursor: pointer;
    margin-top: 10px;
}

.profil__select select {
    width: 100%;
    height: 40px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #6d6d6d;
    width: auto;
    display: inline-block;
    border-radius: 3px;
    padding: 0 5px;
}

.profil__select select:focus {
    border-radius: 0;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.profil__select .profil__label {
    display: block;
    float: left;
    line-height: 40px;
    padding-right: 10px;
    font-size: 15px;
}

.thumbnail-addPic {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    float: left;
    position: relative;
}

.thumbnail-addPic span.fa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.thumbnail-addPic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal__row h3 {
    font-size: 16px;
    color: #2e4770;
    font-weight: 700;
}

.modal__row.checkbox__collab {
    padding: 0;
    background: #f7f7f7;
}

.modal__row .modal-checkbox {
    width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0 10px;
}

.modal__row .modal-checkbox:hover {
    background: white;
}

.onboarding-steps {
    position: relative;
    float: left;
    display: flex;
    height: auto;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.onboarding-step.swiper-slide {
    display: block;
    text-align: left;
}

.onboarding-steps-nav {
    position: relative;
    margin-top: 10px;
    z-index: 1;
}

.onboarding-steps-nav .onboarding-steps-prev,
.onboarding-steps-nav .onboarding-steps-next {
    background-image: none;
    background: #f7f7f7;
    float: left;
    width: auto;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    color: #2e4770;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.onboarding-steps-prev {
    margin-right: 10px;
}

.onboarding-steps-prev:hover,
.onboarding-steps-next:hover {
    background: #efefef;
}

.onboarding-steps-prev.swiper-button-disabled,
.onboarding-steps-next.swiper-button-disabled {
    opacity: 0.35;
}

#profilTechToggle,
#profilCatToggle {
    cursor: pointer;
}

#profilTechToggle h3,
#profilCatToggle h3 {
    display: flex;
    justify-content: space-between;
}

.profile__favList {
    height: 0px;
    transition: height 0.15s linear 0s;
    overflow: hidden;
    border: none;
}

.profile__favList.active {
    /* height: 200px; */
    height: auto;
    overflow: hidden;
}

#profilTechToggle .fa,
#profilCatToggle .fa {
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

#profilTechToggle.active .fa,
#profilCatToggle.active .fa {
    transform: rotate(-180deg);
}

#modalPosterSortie .or {
    float: left;
    margin: 10px 0 0 0;
}

#modalPosterSortie .checkbox__collab .nokill {
    margin: 0 1em 8px 0;
}

#AjouterUnePrise .priseStep1 .button__blue,
#AjouterUnePrise .priseStep1 .button__orange {
    float: none;
    display: inline-block;
    text-transform: none;
    font-size: 14px;
    font-weight: 400;
}

#AjouterUnePrise input[type="datetime"] {
    width: auto;
}

.b_nouveaubateau .input-text-modal {
    margin-top: 10px;
}

.use_gabarit #catchSize {
    display: none;
    visibility: hidden;
}

@media screen and (max-height: 1000px) and (min-width: 769px) {
    #modifProfil .modal {
        max-height: none;
    }
    #modifProfil .modal-content {
        max-height: calc(80vh - 70px);
    }
}

@media screen and (max-width: 1100px) {
    .profile__progress--cell p,
    .profile__progress--premium p {
        display: none;
    }
    .tooltip .trigger {
        display: none;
    }
    .tooltip .content {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .mgb-991 {
        margin-bottom: 15px;
    }
    .description_homologation_prise img {
        margin-top: 15px;
    }
}

@media screen and (min-width: 769px) {
    #modalPosterSortie .modal,
    #AjouterUnePrise.modal-container .modal {
        max-height: 80vh;
    }
}

@media screen and (max-width: 768px),
screen and (max-height: 700px) {
    .onboarding-steps-nav {
        position: relative;
    }
    #modalPosterSortie .modal {
        max-height: 100vh;
    }
    #modalPosterMessage .slf__poster,
    #modalPosterMessage {
        border-radius: 0;
    }
}

@media screen and (max-width: 600px) {
    #modalPosterSortie .form-radio {
        margin: 8px 0;
    }
    #modifProfil .modal__row,
    #modalPosterSortie .modal__row {
        padding: 10px 0;
    }
    #modifProfil .modal__row.profile__favList {
        padding: 0;
    }
}

@media screen and (max-width: 400px) {
    .modal__row h3 {
        font-size: 13px;
    }
    #AjouterUnePrise .priseStep1 .button__blue,
    #AjouterUnePrise .priseStep1 .button__orange {
        font-size: 13px;
    }
}

.hasABoat {
    border-left: 7px solid #20a720;
}

.priseStep2,
.priseStep3,
.priseStep4 {
    display: none;
    margin: 0;
}

.btn-participer-sortie.voirsorties {
    display: none;
}

.btn-participer-sortie {
    background-image: none;
    background: #ef7d00;
    float: left;
    width: auto;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.btn-participer-sortie:hover {
    background: #ff9623;
}

.sorties-grid .btn-participer-sortie.clubCollabModal {
    display: none !important;
}

.sorties-grid .btn-participer-sortie.voirsorties {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
}

.pro-tags h3 {
    font-size: 16px;
    color: #1b1b1b;
    margin-top: 15px;
    display: flex;
    align-items: center;
}

.pro-tags h3 a {
    display: flex;
    align-items: center;
}

.pro-tags h3 img {
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.pro-tags h3 a:hover,
.pro-tags p a:hover {
    color: #2e4770;
}

.pro-tags p {
    padding-left: 20px;
    margin: 5px 0;
    font: 16px/1.4 'Lato', sans-serif;
}

.pro-tags .button__orange {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    border-radius: 4px;
    margin-top: 5px;
}

.pagePro__title {
    background: #ef7d00;
    float: left;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pagePro__title h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    letter-spacing: 0.25px;
    color: #fff;
    text-align: center;
}

.pagePro__title h2 i {
    font-size: 22px;
    line-height: 1;
    margin-right: 10px;
}

.pagePro__linkAll {
    float: left;
    width: 100%;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    font: 16px/1.4 'Lato', sans-serif;
}

.pagePro__linkAll .fa {
    margin-left: 4px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.pagePro__linkAll:hover {
    color: #2e4770;
    background: #f9f9f9;
}

.pagePro__linkAll:hover .fa {
    transform: translateX(4px);
}

#pres__pro img.card_header {
    width: 100%;
    display: block;
    float: left;
    margin: 0;
}

.pagePro#listPrises {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.pagePro#listPrises .dernieresPrises {
    background: white;
}


/* fix bug décalage 1px liste prises concours sur page magasin */

@media screen and (min-width: 993px) {
    .pagePro#listPrises .dernieresPrises:nth-child(3) .comparateur__item--small,
    .pagePro#listPrises .dernieresPrises:nth-child(3n+4) .comparateur__item--small {
        border-right: none;
    }
}

@media screen and (max-width: 992px) {
    .pagePro#listPrises {
        grid-template-columns: 1fr 1fr;
    }
    .pagePro#listPrises .dernieresPrises:nth-child(even) .comparateur__item--small {
        border-right: none;
    }
}

.pro-event .post__imgContainer {
    margin-bottom: 15px;
}

.pro-event .fa-close {
    color: white;
    line-height: 65px;
}

.b_slf_droite #indiceCourbe,
.b_slf_droite #mareeCourbe,
.b_slf_droite .meteo {
    /* margin: 7.5px 0; */
    margin: 0 0 7.5px 0;
    position: relative;
}

.b_slf_droite .stats__overview--header h2 {
    padding: 10px;
}

.b_slf_droite .stats__overview--header h2,
.b_slf_droite .stats__overview--header h2 span {
    color: #1b1b1b;
    font-size: 18px;
    padding: 12px;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}

.b_slf_droite .stats__overview--header .date {
    font-size: 12px;
}

.b_slf_droite #sub__indice {
    font-size: 12px;
    margin-top: 0;
}

.b_slf_droite #mareeCourbe .nextGm__container {
    display: none;
}

.b_slf_droite #mareeCourbe .overview__container {
    width: 100%;
}

.b_slf_droite .stats__overview--header a,
.b_slf_droite .stats__overview--header a.unlockSpots,
.b_slf_droite .stats__overview--header a.button__gradient.button__gradient--sm,
.b_slf_droite .stats__overview--header a.btn-orange {
    font-size: 14px;
    margin-right: 10px;
}

.b_slf_droite .stats__overview--header#spotsMap a.unlockSpots.accederSpots.--communes {
    z-index: 5;
    display: block;
    border-top: none;
    background: #ef7d00;
    color: white;
    text-align: center;
    left: auto;
    width: auto;
    position: absolute;
    float: left;
    right: 10px;
    top: 10px;
}

.b_slf_droite .previsions__nav--item {
    padding: 5px 10px;
    line-height: 1.2;
    font-size: 13px;
}

.slf-header-commune {
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
    padding: 15px 10px;
    margin-bottom: 7.5px;
    background: #ef7d00;
}

.slf-header-commune svg {
    height: 20px;
    width: auto;
    margin-right: 4px;
}

.slf-header-commune h2 {
    display: inline-block;
    font-size: 16px;
    color: #fff;
}

.header--blue {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2e4770;
    float: left;
    width: 100%;
    padding: 10px;
}

.header--orange {
    display: flex;
    align-items: center;
    background: #ef7d00;
    float: left;
    width: 100%;
    padding: 10px;
}

.header--blue h2,
.header--orange h2 {
    display: inline-block;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}

.b_slf_droite_2 .header--orange h2 {
    line-height: 1.5;
}

.header--blue .vedette {
    position: relative;
    background: #ef7d00;
    height: 30px;
    width: 20px;
    transform: translateY(-10px);
    display: block;
    float: left;
    margin-right: 8px;
}

.header--blue .vedette:before {
    content: "";
    position: absolute;
    bottom: -10px;
    border-left: 10px solid #ef7d00;
    border-right: 10px solid #ef7d00;
    border-bottom: 10px solid transparent;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.header--blue svg {
    height: 20px;
    width: auto;
    margin-right: 8px;
}

.lastCatch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

.bestCatch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.lastCatch-grid img,
.bestCatch-grid img {
    width: 100%;
    border-radius: 4px;
}

.lastCatch-grid img {
    height: 120px;
    object-fit: cover;
}

.bestCatch-grid img {
    height: 200px;
    object-fit: cover;
}

.lastCatch-grid a,
.bestCatch-grid a {
    position: relative;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    overflow: hidden;
    border-radius: 4px;
}

.lastCatch-grid a::before,
.bestCatch-grid a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.lastCatch-grid a:hover::before,
.bestCatch-grid a:hover::before {
    background: rgba(0, 0, 0, 0.4);
}

.b_slf_droite .prev__chart {
    height: 200px;
}

.CTA-blue {
    float: left;
    width: 100%;
    background: #2e4770;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 4px;
    margin: 7.5px 0;
}

.CTA-blue.CTA-sorties {
    margin-bottom: 15px;
}

.CTA-blue .CTA-blue--title {
    font: 700 18px/1.4 'Open Sans';
    text-align: center;
    color: white;
}

.CTA-blue p {
    font: 400 16px/1.4 'Lato';
    text-align: center;
    color: white;
    margin: 10px 0;
}

.CTA-blue .button__orange {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 0;
    width: auto;
}

.b_slf_droite_2 .espece-card {
    height: 150px;
    box-shadow: none;
}

.b_slf_droite_2 .espece-card:nth-child(2) {
    margin: 15px 0;
}

.slf__blocMeteo {
    float: left;
    width: 100%;
    background-image: linear-gradient(to top, #3ec9bf 0%, #008ca4 50%, #00728b 100%);
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.slf__blocMeteo:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 100%;
    background-image: linear-gradient(to top, #3ec9bf 0%, #008ca4 50%, #00728b 70%);
    z-index: 1;
}

.blocMeteo__container {
    float: left;
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 3;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
    margin: 6px 0;
}

.blocMeteo__header {
    float: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    position: relative;
    margin-bottom: 8px;
}

.blocMeteo__date {
    float: left;
}

.blocMeteo__date .hour,
.blocMeteo__date .day,
.blocMeteo__date .date {
    text-transform: uppercase;
    color: white;
    text-align: left;
}

.blocMeteo__date .hour,
.blocMeteo__date .day {
    font: 700 16px/1.2 'Open Sans';
}

.blocMeteo__date .date {
    font: 400 12px/1.2 'Open Sans';
}

.blocMeteo__temps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.blocMeteo__temps img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.blocMeteo__temps p {
    margin-top: 8px;
    color: white;
    text-transform: uppercase;
    font: 400 12px/1.2 'Open Sans';
}

.blocMeteo__temperature {
    float: left;
    display: flex;
    flex-direction: column;
}

.blocMeteo__temperature .highLow,
.blocMeteo__temperature .temperature {
    color: white;
    text-align: left;
}

.blocMeteo__temperature .highLow .high,
.blocMeteo__temperature .highLow .low {
    font: 400 12px/1 'Open Sans';
    display: inline-block;
}

.blocMeteo__temperature .highLow .high .fa,
.blocMeteo__temperature .highLow .low .fa {
    font-size: 12px;
}

.blocMeteo__temperature .temperature {
    font: 700 35px/1 'Open Sans';
}

.blocMeteo__data {
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
    margin: 12px 0;
    z-index: 2;
    position: relative;
}

.blocMeteo__data p {
    color: white;
    text-align: left;
    font: 400 13px/1.2 'Open Sans';
}

.blocMeteo__indice {
    float: left;
    width: 100%;
    margin-top: 12px;
}

.blocMeteo__indice .circle-chart {
    margin: 0;
}

.blocMeteo__indice .indice__header {
    justify-content: space-between;
}

.blocMeteo__indice p {
    color: white;
    font: 400 14px/1.3 'Open Sans';
}

.blocMeteo__indice .prev__indice--phrase {
    margin-left: 0;
    margin-right: 12px;
}

.blocMeteo__indice .prev__indice--phrase span {
    font-size: 12px;
}

.blocMeteo__indice p span {
    font-weight: 700;
}

.blocMeteo__indice .indice__header h3 {
    font-size: 13px;
}

.blocMeteo__grandeMarees {
    float: left;
    width: 100%;
    margin-top: 8px;
    z-index: 2;
    position: relative;
}

.blocMeteo__grandeMarees h2,
.blocMeteo__grandeMarees .blocMeteo__grandeMaree {
    color: white;
    text-align: left;
}

.blocMeteo__grandeMarees h2 {
    font: 700 12px/1.2 'Open Sans';
}

.blocMeteo__grandeMarees .blocMeteo__grandeMaree {
    font: 400 12px/1.2 'Open Sans';
    margin-top: 8px;
}

.slf__blocMeteo a.link__weather,
a.link__weather {
    position: relative;
    z-index: 2;
    float: left;
    text-align: center;
    width: 100%;
    color: white;
    font: 400 16px/1.2 'Open Sans';
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border: 1px solid white;
    border-radius: 4px;
    margin: 6px 0 12px 0;
}

.slf__blocMeteo a .fa {
    font-size: 20px;
    margin-left: 8px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.slf__blocConcours {
    float: left;
    width: 100%;
    background-image: linear-gradient(to bottom, #2e4770 0%, #0072A4 50%, #2E689A 100%);
    padding: 15px;
    text-align: left;
}

.slf__blocConcours .card__concours--title,
.slf__blocConcours .card__concours--details {
    padding: 0;
}

.slf__blocConcours .card__concours--title {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slf__blocConcours svg {
    height: auto;
    width: 120px;
    margin-right: 8px;
}

.slf__blocConcours .card__concours--title h2 {
    font-size: 16px;
}

.slf__blocConcours .card__concours--statut {
    font-size: 13px;
    padding: 2px 5px;
}

.slf__blocConcours .concours__detail {
    margin: 4px 0;
    font-size: 13px;
}

.slf__blocConcours .concours__detail .fa {
    font-size: 16px;
}

.slf__blocConcours .card__concours--title h2,
.slf__blocConcours .concours__detail,
.slf__blocConcours .concours__detail .fa {
    color: white;
}

.slf__blocConcours--end {
    float: left;
    width: 100%;
    margin-top: 8px;
}

.slf__blocConcours--end p {
    color: white;
    font: 400 13px/1.2 'Open Sans';
}

.article__grid {
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    grid-gap: 15px;
    margin: 7.5px 0;
}

.article__grid .card__item {
    margin: 0;
    min-width: auto;
}

.article__grid .card__item--desc {
    padding: 10px;
}

.article__grid .card__item--desc h2 {
    font-size: 16px;
}

.article__grid .card__item--desc p {
    font-size: 14px;
}

.fullBlue__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
    width: 100%;
    background: #2e4770;
    color: white;
    padding: 8px 10px 10px 10px;
    font: 400 16px/1.2 'Lato';
    border-radius: 6px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin: 7.5px 0;
}

.fullBlue__link:hover {
    background: #355282;
}

.b_slf_droite .previsions {
    margin-top: 15px;
}



.menu_commune_slf {
    width: calc(100% - 200px);
    /* overflow: hidden;
overflow-x: scroll; */
    margin-right: 10px;
}

.menu_commune_slf .bouton_menu {
    float: left;
    height: 50px;
    position: relative;
    background: white;
    color: #2e4770;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin-right: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.menu_commune_slf .bouton_menu .fa {
    display: none;
    visibility: hidden;
    margin-right: 4px;
    font-size: 16px;
}

.menu_commune_slf .bouton_menu:hover {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.menu_commune_slf .bouton_menu.active {
    font-weight: bold;
    background: #2e4770;
    color: white;
}

.menu_commune_slf .bouton_menu.active .fa {
    display: inline-block;
    visibility: visible;
}

.menu_commune_slf .bouton_menu:first-child {
    margin-left: 0
}

.filtresSorties {
    position: sticky;
    top: 112px;
    z-index: 98;
    display: block;
    float: left;
    width: 100%;
    background: #2e4770;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
    margin: 7.5px 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.surlefil .filtresSorties {
    top: 60px;
}

.filtre__sortie {
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.6);
    flex: auto;
}

.filtre__sortie .filter__title {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filtre__sortie:last-child {
    border-right: none;
}

.filtre__sortie.opened {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    background: #355282
}

.filtre__sortie .filter__title h2,
.filtre__sortie .filter__title .fa {
    font-size: 14px;
    color: white;
}

.filtre__sortie .filter__tab {
    position: absolute;
    top: 50px;
    left: 0;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: auto;
    min-width: 100%;
    padding: 10px;
    display: none;
    white-space: nowrap;
}

.filtre__sortie:last-child .filter__tab {
    left: auto;
    right: 0;
}

.filtre__sortie.opened .filter__tab {
    display: block;
}

.filtre__sortie.opened .filter__title .fa {
    transform: rotate(180deg);
}

.filtre__sortie .filter__tab .checkbox__collab .checkbox-group,
.filtre__sortie .filter__tab .checkbox__collab .form-radio {
    float: left;
    width: 100%;
    margin: 4px 0;
}

.filtresSortiesToggle {
    width: 100%;
    float: left;
    background: #2e4770;
    color: white;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
    display: none;
}

.filtresSortiesToggle h2 {
    color: white;
}

.bloc__poster {
    float: left;
    width: 100%;
    background: white;
    margin: 7.5px 0;
    padding: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}

.bloc__poster .button__outline {
    display: inline-block;
    margin: 0;
    margin-left: 7.5px;
    text-align: center;
    font-size: 16px;
    font-family: 'Open Sans';
    font-weight: 400;
    border-radius: 50px;
}

@media screen and (max-width: 1300px) {
    .filtre__sortie .filter__title h2,
    .filtre__sortie .filter__title .fa {
        font-size: 13px;
    }
}

@media screen and (max-width: 1200px) {
    .header--blue h2,
    .header--orange h2 {
        font-size: 14px;
    }
    .filtre__sortie .filter__title {
        padding: 7.5px;
    }
    .filtre__sortie .filter__title .fa {
        display: inline-block;
    }
    .article__grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media screen and (max-width: 1020px) {
    .filtresSortiesToggle {
        display: flex;
    }
    .filtresSorties {
        flex-direction: column;
        position: fixed;
        top: 60px;
        margin: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
        background: white;
    }
    .filtresSorties.active {
        opacity: 1;
        pointer-events: all;
        overflow-y: scroll;
        height: calc(100vh - 60px);
    }
    .filtresSorties .filtresSortiesToggle {
        padding: 15px 10px;
        position: sticky;
        top: 0;
        z-index: 15;
    }
    .filtresSorties .filtresSortiesToggle h2 {
        font-size: 16px;
        font-weight: 700;
    }
    .filtre__sortie {
        float: left;
        width: 100%;
    }
    .filtre__sortie .filter__tab {
        position: relative;
        top: 0;
        float: left;
        min-width: 100%;
        display: block;
        box-shadow: none;
    }
    .filtre__sortie .filter__title h2 {
        color: #1b1b1b;
        font-weight: 700;
    }
    .filtre__sortie .filter__title .fa {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .slf__menu {
        flex-direction: column;
    }
    .slf__currentLocation {
        width: 100%;
        border-radius: 0;
    }
    .slf__menu .slf__menu--items li a {
        font-size: 12px;
    }
    .slf__menu .slf__menu--items li a svg {
        width: 16px;
    }
    .slf__menu .slf__menu--items {
        margin-left: 0;
    }
    .lastCatch-grid img {
        height: 120px;
        object-fit: cover;
    }
    .bestCatch-grid img {
        height: 170px;
        object-fit: cover;
    }
    .slf__currentLocation h2,
    .slf__menu .slf__menu--items li a {
        font-size: 13px;
    }
    .slf__currentLocation,
    .slf__menu .slf__menu--items li a {
        padding: 12px 12px 10px 12px;
    }
}

@media screen and (max-width: 625px) {
    .slf__menu .slf__menu--items li.menu__profileLink {
        max-width: 50px;
    }
    .slf__menu .slf__menu--items li.menu__profileLink a {
        padding: 0;
        background: transparent;
    }
    .slf__menu .slf__menu--items li.menu__profileLink a .header-thumbnail {
        margin-right: 0;
    }
    .slf__menu .slf__menu--items li.menu__profileLink a span {
        display: none;
    }
    .menu_commune_slf .bouton_menu {
        height: 40px;
        padding: 0px 7.5px;
        margin-bottom: 0;
    }
    .header--blue {
        align-items: flex-start;
        flex-direction: column;
    }
    .header--blue h2,
    .header--orange h2 {
        line-height: 1.5;
    }
    .header--blue .button__outline {
        margin-top: 10px;
    }
    .slf__menu .slf__menu--items {
        width: 100%;
        display: flex;
        overflow-x: scroll;
    }
    .slf__commenter .emojionearea .emojionearea-editor {
        min-height: 40px;
        padding: 10px;
    }
    .formular.slf__commenter .saisie_2 textarea {
        padding: 10px;
    }
    .bestCatch-grid img {
        height: 130px;
    }
    .lastCatch-grid img {
        height: 80px;
    }
}

.loader {
    width: 45px;
    height: 45px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 5px solid;
    border-top-color: rgb(255, 147, 24);
    border-bottom-color: rgba(136, 136, 136, 0.3);
    border-left-color: rgba(255, 147, 24);
    border-right-color: rgba(136, 136, 136, 0.3);
    animation: loader 1s ease-in-out infinite;
    margin: 0 calc(100%/2 - 45px);
}

@keyframes loader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.weather__content {
    position: relative;
    overflow: hidden;
}

.weather__container {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    overflow-x: scroll;
    position: relative;
}

.weather__full .weather__item {
    float: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    padding: 7.5px;
    display: grid;
    grid-template-rows: repeat(11, auto);
    grid-gap: 7.5px;
}

.weather__item.weather__desc {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    background: #29436d;
    z-index: 2;
    position: sticky;
    left: 0;
    width: 120px;
}

.weather__full .weather__cell {
    height: 25px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.weather__cell p {
    font: 400 12px/1 'Open Sans';
}

.weather__desc .weather__cell p {
    font-weight: 700;
}

.weather__item.weather__desc .weather__cell {
    width: auto;
    justify-content: flex-start;
}

.weather__cell.weather__title {
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
    padding-top: 7.5px;
}

.weather__cell.weather__title h4 {
    font: 700 14px/20px 'Open Sans';
    color: white;
}

.weather__full .weather__cell .weather__icon {
    height: 25px;
    width: auto;
    margin: 0;
}

.weather__cell.tag {
    background: white;
}

.weather__cell.tag p {
    color: #1b1b1b;
}

.weather__full .weather__cell.cell__dir {
    height: 40px;
}

.weather__item--hourly .weather__cell.cell__dir {
    flex-direction: column;
}

.weather__item--hourly .weather__cell.cell__dir img {
    width: 15px;
}

.weather__item--hourly .weather__cell.cell__dir p {
    margin-top: 5px;
}

.weather-nav {
    position: absolute;
    top: 22px;
    right: 15px;
}

.weather-button-left {
    display: none;
}

.weather-button-left,
.weather-button-right {
    cursor: pointer;
    padding: 5px 10px;
    border-width: 1px;
}

.slf__posterImg--rotate {
    display: flex;
    justify-content: center;
    width: 100%;
    top: 10px;
    position: absolute;
}

.slf__posterImg--rotate button {
    height: 35px;
    width: 35px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
    color: white;
    background-color: #333;
    border: none;
}

.slf__posterImg--rotate button img {
    width: 16px;
}

.slf__posterImg--container canvas {
    max-width: 100%;
}

.b_slf_droite>div:first-child {
    margin-top: 0;
}

.slf-sortie:first-child {
    margin-top: 0;
}

.b_slf_droite .CTA-blue {
    margin-bottom: 24px;
}


/* cta commune slf v1 */

#CTACommuneSlf {
    position: relative;
    float: left;
    width: 100%;
    background: white;
    padding: 20px;
    background: #ef7d00;
    /* background-image: url('/static/photo_site/banner_commune_mail.jpg'); */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#CTACommuneSlf .cta__signup {
    float: left;
    display: flex;
    justify-content: stretch;
    align-items: center;
    max-width: 100%;
}

#CTACommuneSlf .cta__headline {
    display: flex;
    align-items: center;
    justify-content: center;
}

#CTACommuneSlf .cta__headline img {
    margin-right: 8px;
    height: 40px;
    width: auto;
}

#CTACommuneSlf .cta__signup .cta__signup--email {
    font: 400 14px/1.2 'Lato';
    color: #fff;
    padding: 7.5px 15px;
    float: left;
    width: 370px;
    height: 40px;
    border: none;
    box-shadow: 0 0px 10px 3px rgba(0, 0, 0, 0.1);
    transition: 0.25s all ease;
    border-radius: 3px;
    flex: 1;
    margin-right: 15px;
}

#CTACommuneSlf .cta__signup .cta__signup--send {
    background: transparent;
    border: 2px solid white;
    height: 40px;
    padding: 10px;
    color: white;
    font: 700 14px/1.2 'Lato';
    border-radius: 3px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    cursor: pointer;
}

#CTACommuneSlf .cta__signup .cta__signup--send:hover {
    background: white;
    color: #2e4770;
}

#CTACommuneSlf .cta__signup--content h2 {
    font: 700 20px/1 'Open Sans';
    color: #fff;
    margin: 0;
    text-align: center;
}

#CTACommuneSlf .cta__signup--content p {
    font: 400 16px/1.5 'Lato';
    color: #fff;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}

@media screen and (max-width: 767px) {
    #CTACommuneSlf .cta__signup--content h2 {
        font-size: 18px;
        line-height: 1.2;
    }
}

@media screen and (max-width: 500px) {
    #CTACommuneSlf .cta__headline {
        flex-direction: column;
    }
    #CTACommuneSlf .cta__signup--content h2 {
        margin-top: 10px;
    }
}

.inscription-offre {
    float: left;
    width: 100%;
    display: block;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    display: none;
    margin-bottom: 24px;
}

.inscription-offre a {
    color: #616161;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
}

.inscription-offre a:hover {
    color: #1b1b1b;
}

.blocOffre__choisie {
    float: left;
    width: 100%;
    background: #f8f8f8;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 16px;
    font-weight: 400;
    font-size: 16px;
    border-radius: 5px;
    margin: 8px 0 20px 0;
}

.blocOffre__choisie h2 {
    font-family: 'Open sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #1b1b1b;
    float: left;
    width: 100%;
}

.blocOffre__pricing {
    font-family: 'Open sans', sans-serif;
    font-size: 14px;
    color: #1b1b1b;
    float: left;
    width: 100%;
    margin-top: 5px;
}

.blocOffre__pricing strong {
    font-size: 18px;
}

.blocOffre__annule {
    margin: 12px 0 4px 0;
    font-size: 12px;
    color: #1b1b1b;
    float: left;
    width: 100%;
}

.blocOffre__annule a {
    text-decoration: underline;
}

.lastMembers {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.lastMember-count {
    color: #ffffff;
    background: #ef7d00;
    font-weight: 700;
    text-align: center;
    width: 100%;
    display: inline-block;
    border: 2px solid #ef7d00;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
}

.lastMembers-pics {
    float: left;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    display: none;
    visibility: hidden;
}

.lastMembers-pics .header-thumbnail {
    max-width: 45px;
    max-height: 45px;
}

.onboard .lastMembers-pics {
    display: flex;
    align-items: center;
    justify-content: space-between;
    visibility: visible;
    margin-bottom: 10px;
}

.onboard .lastMembers-pics .header-thumbnail {
    max-width: 40px;
    max-height: 40px;
    margin-right: 4px;
}

@media screen and (max-width: 500px) {
    .lastMembers-pics .header-thumbnail:first-child,
    .lastMembers-pics .header-thumbnail:nth-child(2) {
        display: none;
    }
}

.blocCb {
    float: left;
    width: 100%;
    position: relative;
    background: #FFF;
    border: none;
    border-radius: 3px;
    margin-bottom: 24px;
    padding: 20px 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
}

.blocCb__header {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.blocCb__header h2 {
    color: #1b1b1b;
    font-size: 1.29rem;
}

.blocCb__header h3 {
    font-size: 14px;
    color: #1b1b1b;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

.blocCb__header p {
    float: left;
    width: 100%;
    font-size: 14px;
    margin: 0;
}

.blocCb .button__process a {
    margin-bottom: 0;
    font-size: 16px;
}

.blocCb img {
    /* display: block; */
    float: left;
    height: 22px;
    width: auto;
    margin-bottom: 20px;
}

.blocCb .legals {
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    color: #2f2e2e;
    text-align: left;
    padding: 0;
    margin: .5em 0 1em 0;
}

.blocCb .legals a {
    font-size: 12px;
    font-weight: 400;
    line-height: 21px;
    color: #2f2e2e;
    text-align: left;
    padding: 0;
    margin: .5em 0 1em 0;
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: auto;
}

.paiement__header {
    background: #2e4770;
    float: left;
    width: 100%;
    padding: 20px;
    background-image: url('/static/photo_site/bg_process.jpg');
    background-size: cover;
    background-position: top right;
}

.paiement__header h1 {
    font-size: 28px;
    position: relative;
    text-align: left;
    z-index: 2;
    color: #fff;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}

.paiement__header--checkmarks {
    padding: 0;
}

.paiement__header--checkmarks li {
    display: block;
    color: #fff;
    font-size: 17px;
    margin: 8px 0;
}

@media screen and (min-width: 768px) {
    .paiement__header {
        padding: 65px 20px 65px 20px;
        text-align: center;
    }
    .paiement__header h1 {
        font-size: 2.8vw;
        text-align: center;
    }
    .paiement__header--checkmarks {
        padding: 0;
        margin: 16px 0 4px;
    }
    .paiement__header--checkmarks li {
        margin: 8px 16px;
        display: inline-block;
    }
}

@media screen and (max-width: 420px) {
    .paiement__header h1 {
        font-size: 18px;
    }
    .paiement__header--checkmarks li {
        font-size: 14px;
    }
    .blocCb__header h2 {
        font-size: 16px;
    }
    .blocCb {
        padding: 12px;
        border-radius: 12px;
    }
}


.blocOffre__choisie.blocOffre__abo {
    background: white;
    box-shadow: 0 3px 5px 0 rgba(24, 24, 24, 0.1);
    padding: 0;
    margin: 10px 0;
}

.blocOffre__abo--content {
    float: left;
    padding: 16px;
}

.blocOffre__abo--content .blocOffre__abo--desc {
    color: #1b1b1b;
    float: left;
    font-size: 16px;
    margin-top: 5px;
    font-family: 'Open Sans', sans-serif;
}


/*
.blocOffre__abo--content .blocOffre__annule {
margin-top: 0;
}
*/

.blocOffre__abo--action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    position: relative;
}

.blocOffre__abo--action span {
    color: #1b1b1b;
    font-size: 13px;
}

.blocOffre__abo--action span strong {
    font-size: 16px;
}

.blocOffre__abo--action span.blocOffre__or {
    background: white;
    padding: 0 5px;
    font-size: 14px;
    color: #6d6d6d;
    font-weight: 700;
    z-index: 2;
    line-height: 18px;
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: 'Open Sans', sans-serif;
}

.blocOffre__abo--action .btn-orange,
.blocOffre__abo--action .button__outline {
    display: none;
    border: none;
    font-size: 12px;
    padding: 7px 15px;
    box-shadow: none;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 40px;
}

.blocOffre__abo--action .button__outline {
    background: transparent;
    border: 2px solid #6d6d6d;
    color: #6d6d6d;
}

.blocOffre__abo--action .button__outline span {
    text-transform: lowercase;
    color: #6d6d6d;
    font-weight: 400;
    transition: .15s all ease;
}

.blocOffre__abo--action .button__outline:hover {
    background: #6d6d6d;
    color: white;
}

.blocOffre__abo--action .button__outline:hover span {
    color: white;
}

@media (min-width: 992px) {
    .blocOffre__abo--action .btn-orange,
    .blocOffre__abo--action .button__outline {
        display: inline-block;
    }
    .blocOffre__abo--action svg {
        display: none;
    }
}

.bloc__headerFlex {
    display: flex;
    align-items: center;
    padding: 15px 0;
}

.bloc__headerFlex img {
    height: 60px;
    width: auto;
    margin-right: 10px;
    display: none;
    visibility: hidden;
}

.bloc__headerFlex h2 {
    font: 400 24px/1.4 'Open Sans';
    color: #1b1b1b;
}

.bloc__headerFlex h2 span {
    font-weight: 700;
    font-weight: normal;
}

.blocIndice__info {
    position: relative;
    margin-left: 20px;
    width: calc(100% - 40px);
    padding: 10px;
    border-radius: 5px;
    background: #ef7d00;
    color: white;
    font-size: 16px;
    transform: translateY(-15px);
    z-index: 9;
}

.blocIndice__info .openIndiceExp,
.blocIndice__info .openSpotsExp {
    font-size: 12px;
    position: absolute;
    right: 10px;
    color: #ef7d00;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ef7d00;
    background: #ffffff;
    bottom: -30px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    cursor: pointer;
    margin: 0;
    text-transform: none;
    font-weight: 700;
}

.blocIndice__info .openIndiceExp:hover,
.blocIndice__info .openSpotsExp:hover {
    background: #ef7d00;
    color: white;
}

.blocComm__btn {
    position: relative;
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 15px;
}

.blocComm__btn a.button__outline,
.blocComm__btn a.button__orange {
    position: relative;
    border-radius: 3px;
    font-size: 18px;
    width: auto;
    margin: 0;
    text-align: center;
}

.blocComm__btn a:nth-child(2) {
    margin-left: 8px;
}

.surlefil .bloc__headerFlex h2 {
    font-size: 16px;
    display: inline-block;
}

.surlefil .blocIndice__info .openIndiceExp {
    font-size: 14px;
}

.ast {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    padding: 12px 12px 0 12px;
}

.ast p {
    font: 400 14px/1.2 'Lato', sans-serif;
    color: #6d6d6d;
}

.subMobile {
    display: none;
}

@media screen and (max-width: 1024px) {
    .bloc__headerFlex h2 {
        font-size: 18px;
    }
    .bloc__headerFlex img {
        height: 40px;
    }
    .blocIndice__info .openIndiceExp,
    .blocIndice__info .openSpotsExp  {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .blocComm__btn a.button__outline,
    .blocComm__btn a.button__orange {
        font-size: 16px;
    }
    #spotsMap a.unlockSpots.accederSpots {
        font-size: 16px;
        min-width: 60%;
        max-width: 80%;
    }
    #spotsMap a.unlockSpots.accederSpots.--communes {
        font-size: 16px;
    }
}

@media screen and (max-width: 600px) {
    .bloc__headerFlex #sub__indice {
        display: none;
    }
    .subMobile {
        display: block;
        float: left;
        width: 100%;
        color: #666666;
        font-weight: normal;
        letter-spacing: normal;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .blocIndice__info {
        font-size: 13px;
    }
}

@media screen and (max-width: 340px) {
    #spotsMap a.unlockSpots.accederSpots.--communes {
        max-width: 250px;
    }
}

.bpq {
    float: left;
    width: 100%;
    background: white;
    display: flex;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.2);
}

.s-left,
.s-right {
    float: left;
}

.s-left {
    width: 30%;
}

.s-right {
    width: 70%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

.s-right h2 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
}

.s-right a {
    color: #3c81bb;
    font-weight: 700;
    font-size: 16px;
    margin-top: 10px;
    transition: 0.2s all ease;
}

.s-right a:hover {
    color: #2e4770;
}

.s-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1080px) {
    .s-right h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 625px) {
    .bpq {
        display: block;
    }
    .s-right,
    .s-left {
        width: 100%;
    }
    .s-right a {
        font-size: 14px;
    }
}

.cta__clubAccueil {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.cta__clubAccueil h2 {
    font-size: 34px;
}

.cta__clubAccueil .button__blue {
    margin: 20px 0;
    font-size: 22px;
    border-radius: 6px;
    padding: 0.8em 1.2em;
}

.link__sub {
    color: #6d6d6d;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: underline;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.link__sub:hover {
    color: #1b1b1b;
}

.mail__submit,
input[type=submit].mail__submit {
    background: #ef7d00;
    font-size: 14px;
    color: white;
    text-align: center;
    width: 100%;
    height: 40px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border-radius: 5px;
    font-weight: bold;
    margin: 15px 0;
}

.connexion_modale {
    text-align: center;
    max-width: 420px;
    background: white;
    padding: 0;
}

.connexion_modale article {
    float: left;
    width: 100%;
    padding: 24px;
}

@media screen and (max-width: 600px) {
    .connexion_modale article {
        padding: 12px;
    }
}

.sorties-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    grid-gap: 16px;
}

.sorties-grid .monCompte__box {
    margin: 0;
    min-width: 0;
    padding: 0 0 45px 0;
}

.headerPic__sortie {
    display: none;
    visibility: hidden;
    float: left;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.sorties-grid .headerPic__sortie {
    display: block;
    visibility: visible;
}

.sorties-grid .ht__container {
    display: none;
    visibility: hidden;
}

.sorties__liste.sorties-grid .filtresSorties,
.sorties__liste.sorties-grid .filtresSortiesToggle {
    grid-column: span 2;
    background: white;
}

.sorties__liste.sorties-grid .filtresSorties .filtre__sortie.opened {
    background: #f7f7f7;
}

.sorties__liste.sorties-grid .filtre__sortie.opened .filter__title h2,
.sorties__liste.sorties-grid .filtre__sortie.opened .filter__title .fa {
    color: #2e4770;
}

.sorties__liste.sorties-grid .filtre__sortie .filter__title h2,
.sorties__liste.sorties-grid .filtre__sortie .filter__title .fa {
    color: #1b1b1b;
    padding: 0;
}

.sorties__liste.sorties-grid .filtre__sortie {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sorties__liste.sorties-grid .filtre__sortie:last-child {
    border: none;
}

.sorties__liste.sorties-grid .filtresSorties {
    top: 60px;
    margin: 0;
}

@media screen and (max-width: 768px) {
    .sorties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 550px) {
    .sorties-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.wrapper.accueilSorties {
    background: white;
}

.wrapper.listeSorties {
    background: #f7f7f7;
}

.accueilSorties .container-fluid,
.listeSorties .container-fluid {
    max-width: 1170px;
    margin: 0 auto;
    clear: both;
}

.accueilSorties .container-fluid section,
.listeSorties .container-fluid section {
    padding: 20px 0;
    clear: both;
}

.sortiesGrid__accueil {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 16px;
    width: 100%;
    margin: 30px 0;
}

.sortiesGrid-item a {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    float: left;
    transition: 0.2s all ease;
}

.sortiesGrid-item a img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    transition: 0.2s all ease;
}

.sortiesGrid-item a:hover {
    transform: scale(1.02);
}

.sortiesGrid-item a:hover img {
    transform: scale(1.05);
}

.sortiesGrid-item a h2 {
    position: absolute;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    color: white;
    text-shadow: 0 0px 6px rgb(0, 0, 0);
}

.sortiesGrid__accueil#sortiesRegions .sortiesGrid-item:nth-child(4),
.sortiesGrid__accueil#sortiesRegions .sortiesGrid-item:nth-child(10) {
    grid-column: span 2;
}

.sortiesGrid__accueil#typesExperiences .sortiesGrid-item:first-child,
.sortiesGrid__accueil#typesExperiences .sortiesGrid-item:last-child {
    grid-column: span 2;
}

.sortiesList_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    grid-gap: 30px;
}

.sortiesList_grid .sorties__liste {
    grid-column: span 2;
}

.sortiesList_grid #experienceMap {
    position: sticky !important;
    top: 80px;
    height: 70vh;
    margin-top: 0;
}

.sorties__ctaProposer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sorties__ctaProposer h3 {
    font: 400 24px/1.5 'Lato', sans-serif;
    margin-bottom: 0;
    color: #1b1b1b;
    margin-top: 20px;
}

.sorties__ctaProposer h3 span {
    font-weight: 700;
}

.sorties__ctaProposer__button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 80px;
    z-index: 10;
    margin-bottom: 20px;
}

.sorties__ctaProposer__button .button__blue {
    font-size: 18px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

.sortiesList_grid .sorties-col-right #experienceMap {
    top: 150px;
}

.header__sorties {
    padding: 30px 0 10px 0;
}

.header__sorties h1 {
    color: #1b1b1b;
    text-transform: none;
}

@media screen and (max-width: 1170px) {
    .sortiesList_grid {
        grid-gap: 16px;
    }
    .sorties-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
    .sortiesGrid-item a img {
        height: 250px;
    }
}

@media screen and (max-width: 850px) {
    .sortiesList_grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .sortiesGrid-item a h2 {
        font-size: 16px;
    }
    .sortiesList_grid .sorties-col-right .button__blue {
        position: fixed;
        bottom: 20px;
    }
}

@media screen and (max-width: 768px) {
    .sortiesGrid__accueil {
        grid-template-columns: repeat(2, 1fr);
    }
    .sortiesGrid__accueil#sortiesRegions .sortiesGrid-item:nth-child(4),
    .sortiesGrid__accueil#sortiesRegions .sortiesGrid-item:nth-child(10) {
        grid-column: span 1;
    }
    .sortiesGrid__accueil#sortiesRegions .sortiesGrid-item:nth-child(3),
    .sortiesGrid__accueil#sortiesRegions .sortiesGrid-item:nth-child(8),
    .sortiesGrid__accueil#sortiesRegions .sortiesGrid-item:nth-child(13) {
        grid-column: span 2;
    }
    .sortiesGrid-item a h2 {
        bottom: 10px;
        left: 10px;
    }
    .sortiesGrid-item a img {
        height: 180px;
    }
    h2.titre__experience {
        font-size: 20px;
    }
    p.sub__experience {
        font-size: 16px;
    }
}

@media screen and (max-width: 1199px) {
    section#offreCards .sm-4 {
        padding: 0 7px;
    }
}

.surlefil .b_slf_droite_2,
.surlefil .b_slf_gauche {
    float: left;
    width: 300px;
}

@media screen and (max-width: 930px) {
    .surlefil .b_slf_droite_2 {
        width: 100%;
        padding: 12px 0 0 24px;
    }
}

@media screen and (max-width: 625px) {
    .surlefil .b_slf_droite_2,
    .surlefil .b_slf_gauche {
        width: 100%;
        float: left;
        padding: 0;
    }
}

.surlefil .slf__right {
    width: calc(100% - 300px);
    float: left;
}

.surlefil .slf__right .slf__menu {
    margin-top: 0;
}

.surlefil .b_slf_droite {
    float: left;
    width: calc(100% - 300px);
    padding: 0 24px;
    max-width: none;
}

.blocServices {
    text-align: left;
}

.blocServices .button__orange {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    padding: 8px 15px;
    font-size: 16px;
    line-height: 1.2;
    font-family: 'Open Sans', sans-serif;
}

.profil__card--small .header-thumbnail {
    max-width: 40px;
    max-height: 40px;
}

.profil__card--small .thumb-container {
    width: 100%;
}

.profil__card--small .header-misc {
    padding: 10px 0;
}

.profil__card--small .ht__container {
    padding: 5px;
}

.profil__card--small a {
    padding: 0 10px 0 5px;
    display: flex;
    align-items: center;
    width: 100%;
}

.profil__card--small .header-misc h2 {
    color: #2e4770;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 13px;
    font-family: 'Lato', sans-serif;
    padding: 0 5px;
    white-space: nowrap;
}

.profil__card--small:hover .header-misc h2 {
    color: #ef7d00;
}

#communesFavSide header {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#communesFavSide h2 {
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 700;
    color: #1b1b1b;
}

#communesFavSide .communesFavList {
    float: left;
    width: 100%;
}

#communesFavSide .communesFavList a {
    display: block;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    float: left;
    width: 100%;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#communesFavSide .communesFavList a p {
    color: #6d6d6d;
    font-size: 13px;
    font-weight: 400;
    margin-top: 4px;
    line-height: 1.58;
}

#communesFavSide .communesFavList a .inner {
    font-size: 16px;
    font-weight: 700;
    color: #1b1b1b;
}

#communesFavSide .communesFavList a .fa {
    display: none;
    margin-right: 10px;
}

#communesFavSide .communesFavList a:hover {
    background: #f9f9f9;
}

#communesFavSide .communesFavList a.active {
    background: #f9f9f9;
}

#communesFavSide .communesFavList a.active .inner {
    color: #2e4770;
}

#communesFavSide .communesFavList a.active .fa {
    display: inline-block;
}

#communesFavSide .chercherCommune {
    float: left;
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 700;
    color: #2e4770;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    cursor: pointer;
}

#communesFavSide .chercherCommune:hover {
    color: #ef7d00;
}

.headerSlf-commune {
    background: #2e4770;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 0;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 4px;
}

.headerSlf-commune.headerSlf--france {
    padding-bottom: 25px;
    height: auto;
}

.headerSlf-commune h2,
.headerSlf-commune.headerSlf--france h1 {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

.headerSlf-commune h3,
.headerSlf-commune.headerSlf--france h2 {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}

.headerSlf-commune .sepa {
    height: 1px;
    width: 30px;
    background: white;
    margin: 15px 0;
}

.headerSlf-commune h3 {
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
    text-align: center;
}

.headerSlf-commune h3.bloc_left_service {
    font-weight: 700;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 6px 0;
    font-size: 18px;
}

.headerSlf-commune h3.bloc_left_service span {
    font-weight: 400;
    margin-left: 4px;
}

.headerSlf-commune h3.bloc_left_service img {
    height: 35px;
    margin-right: 12px;
}

.headerSlf-commune .slf__blocMeteo {
    background: none;
    padding: 0;
}

.headerSlf-commune .slf__blocMeteo:before {
    display: none;
}

.b_slf_gauche .slf__menu .slf__menu--items {
    flex-direction: column;
}

.b_slf_gauche .slf__menu .slf__menu--items li a {
    border-top: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    justify-content: space-between;
}

.b_slf_gauche .slf__menu .slf__menu--items li a.active {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 4px solid #ef7d00;
}

.b_slf_gauche .slf__menu .slf__menu--items li a span {
    display: flex;
    align-items: center;
}

.b_slf_gauche .slf__menu .slf__menu--items li a span svg {
    margin-right: 8px;
}

.slf__topBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.menu_commune_slf .innerShadow {
    display: none;
}

.b_slf_droite .previsions .onglet {
    display: none;
}

.b_slf_droite .previsions .courbe .bloc__headerFlex {
    display: none;
}

.surlefil .slf__menu {
    margin-top: 0;
}

@media screen and (max-height: 800px) {
    .headerSlf-commune h3 {
        font-size: 14px;
    }
}

@media screen and (min-height: 720px) {
    .surlefil .b_slf_gauche {
        position: sticky;
        top: 140px;
    }
    .surlefil#abonneCarnet .b_slf_gauche {
        top: 144px;
    }
}

@media screen and (max-width: 1330px) {
    .slf__topBar {
        padding: 0 5px;
    }
}

@media screen and (max-width: 991px) {
    .surlefil .b_slf_droite {
        width: 100%;
        max-width: none;
        padding-right: 0;
    }
    .surlefil .slf__menu {
        overflow: hidden;
        overflow-x: scroll;
    }
}

@media screen and (max-width: 768px) {
    .surlefil .slf__right {
        width: 100%;
        padding: 0;
    }
    .surlefil .b_slf_droite {
        padding-right: 0;
        padding-left: 0;
    }
    .surlefil .b_slf_gauche {
        position: relative;
        width: 100%;
        float: left;
        display: block;
        top: 0;
    }
    .surlefil#abonneCarnet .b_slf_gauche {
        top: 0;
    }
    .b_slf_gauche .slf__menu {
        margin-bottom: 7.5px;
    }
    .slf__topBar {
        margin-top: 0;
        margin-bottom: 5px;
        background: white;
        display: flex;
        align-items: center;
        padding: 0;
    }
    .menu_commune_slf {
        position: relative;
        display: flex;
        overflow: hidden;
        overflow-x: scroll;
        margin: 0;
        padding: 0 5px;
        width: calc(100% - 50px);
        height: 50px;
        align-items: center;
    }
    .slf__topBar .innerShadow {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 50px);
        height: 50px;
        z-index: 2;
        pointer-events: none;
        box-shadow: inset -4px 0 5px 0px rgba(0, 0, 0, .2);
    }
    .profil__card--small .header-misc {
        display: none;
    }
    .profil__card--small a {
        padding: 0;
    }
    .b_slf_gauche .slf__menu .slf__menu--items {
        flex-direction: row;
    }
    .slf__menu .slf__menu--items li a .fa {
        display: none;
        visibility: hidden;
    }
    .slf__menu .slf__menu--items li {
        border-bottom: none;
    }
    .b_slf_gauche .slf__menu .slf__menu--items li a.active {
        border-left: none;
        border-bottom: 4px solid #ef7d00;
    }
}

.openPopupSpots {
    display: none;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px;
    border-top: none;
    background: #ef7d00;
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-family: 'Lato', sans-serif;
}

.stats__overview--header .openPopupSpots i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}

.maree_tab {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
    background: white;
    animation: appear_opacity 0.2s linear forwards;
}

@keyframes appear_opacity {
    from {
        opacity: 0
    }
    to {
        opacity: 1;
    }
}

.maree_tab__header {
    display: flex;
    font-size: 16px;
    background: #2e4770;
    color: white;
    text-transform: uppercase;
    justify-content: space-between;
    width: 100%;
    padding: 15px 30px;
    font-weight: bold;
}

.maree_tab__content {
    background: white;
    line-height: 1.8;
    font-size: 1.2em;
}

.maree_tab__content__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 30px;
}

.maree_tab__header>*,
.maree_tab__content__info>* {
    width: calc(100%/5);
    text-align: left;
}

.maree_tab__content__info>div>span {
    display: inline-block;
    width: 100%;
    text-align: left;
}

.maree_tab__content__info--date span {
    display: inline-block;
}

.maree_tab__content__info--pleinemer {
    color: #4c7bc1;
    font-weight: bold;
}

.maree_tab__content__info--date {
    font-size: 1em;
    display: flex;
    text-transform: uppercase;
    text-align: left;
    flex-direction: column-reverse;
    align-items: baseline;
}

.maree_tab__content>*:nth-child(even) {
    background: #eeeeee;
}

.maree_tab__month {
    font-size: 1.6em;
    text-align: center;
    margin: 5px 0;
}

.-coef {
    color: white;
    background: #2e4770;
    border-radius: 50%;
    width: 36px !important;
    height: 36px;
    line-height: 2.3rem;
    text-align: center !important;
}

.--estBonCoef {
    background: #ed7f00;
}

.maree_search {
    width: 100%;
    margin: 0 auto;
    min-height: 50px;
}

.maree_search #select_mois {
    cursor: pointer;
    background: #2e4770;
    color: white;
    border: none;
    border-radius: 4px;
    box-shadow: 0px 1px 2px #2e4770;
    transition: .3s;
}

.maree_search #select_mois:hover,
.maree_search #select_mois:active {
    background: #4570ac;
}

.maree_search .back_button {
    background: #2e4770;
    color: white;
    border-radius: 4px;
    box-shadow: 0px 1px 2px #2e4770;
    min-width: 40px;
    min-height: 40px;
    text-align: center;
    line-height: 2.5rem;
    margin: 0 10px;
    cursor: pointer;
    transition: .3s;
}

.maree_search .back_button:hover {
    background: #4570ac;
}

@media screen and (max-width: 1200px) {
    .maree_tab__content__info,
    .maree_tab__header {
        padding: 5px 10px;
        font-size: 0.9rem;
    }
    .maree_tab__content__info--date span {
        display: none;
        visibility: hidden;
    }
}

.pricing__card--price .line {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    float: left;
    margin: 10px 0 5px;
}

#BtnHeaderClubM {
    display: none;
}

@media screen and (max-width: 1450px) {
    .radio-offre-label:before {
        width: 40px;
        height: 40px;
    }
    .price-left {
        width: calc(100% - 40px);
    }
    .grid-offres {
        max-width: calc(100% - 30px);
    }
}

@media screen and (max-width: 991px) {
    .pricing__card--header {
        padding: 10px;
    }
    .pricing__card--content {
        padding: 10px;
    }
    .pricing__card--header h2 {
        font-size: 16px;
    }
    .pricing__card--header p,
    .pricing__card--header span {
        font-size: 13px;
    }
    .pricing__card--content .freeDays p {
        font-size: 13px;
    }
    .pricing__card--price p span {
        font-size: 30px;
    }
    .pricing__card--price p span.digits {
        font-size: 16px;
    }
    .price-left {
        width: 100%;
    }
}

@media screen and (max-width: 850px) {
    .price-flex {
        flex-direction: column;
    }
}

.pricing__cards--mobile#offreCardsM {
    display: none;
}

@media screen and (max-width: 768px) {
    .pricing__cards#offreCards {
        display: none;
    }
    .pricing__cards--mobile#offreCardsM {
        display: block;
    }
    .mobile__offres {
        float: left;
        width: 100%;
    }
    .pricing__mobileHeader {
        padding: 24px;
    }
    .pricing__mobileHeader h2 {
        font-size: 2rem;
        margin: 0;
        text-align: center;
    }
    .pricing__mobileHeader p {
        margin-bottom: 0;
    }
    .mobile__offres main {
        position: relative;
        float: left;
        width: 100%;
    }
    .mobile__offresRow.--header {
        position: sticky;
        top: 60px;
        background: white;
        padding: 2.5px;
        padding-bottom: 0;
        margin-bottom: 20px;
        z-index: 2;
    }
    .mobile__offres .radio-offreM {
        position: fixed;
        bottom: 0;
        left: 0;
        display: none;
    }
    .mobile__offresRow {
        display: flex;
        float: left;
        width: 100%;
        align-items: center;
        justify-content: space-around;
        padding: 0 2.5px;
    }
    .mobile__offresRow.--border {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .mobile__offresRow:last-child {
        padding-bottom: 10px;
    }
    label.mobile__offreCase {
        position: relative;
        width: 100%;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 10px;
        text-align: center;
        margin: 0 2.5px;
    }
    label.mobile__offreCase.o-tarif {
        flex-direction: row;
        align-items: baseline;
    }
    .mobile__offresRow h3 {
        font-size: 14px;
        color: #333;
        margin: 10px 0 10px 0;
        font-weight: bold;
    }
    label.mobile__offreCase[data=tarif] span {
        color: #333;
        font-size: 14px;
    }
    label.mobile__offreCase[data=tarif] span.digits-l {
        font-size: 34px;
    }
    label.mobile__offreCase[data=tarif] span.digits-s {
        font-size: 12px;
    }
    label.mobile__offreCase span {
        color: #aaa;
        font-size: 14px;
    }
    label.mobile__offreCase span.o-eco {
        position: absolute;
        top: -10px;
        z-index: -1;
        width: 100%;
        text-align: center;
        padding: 3px;
        color: #333333;
        font-size: 12px;
    }
    #offreAnn:checked~main label.mobile__offreCase.o-ann span.o-eco {
        color: #333333;
    }
    label.mobile__offreCase span.o-new {
        font-size: 11px;
        background: red;
        border-radius: 3px;
        padding: 3px;
        color: white;
        margin-top: 10px;
    }
    label.mobile__offreCase span .fa {
        font-size: 20px;
        margin-left: 5px;
    }
    .mobileOffre___header-c {
        padding: 0 10px;
        height: 100px;
        display: flex;
        flex: 1;
    }
    label.mobile__offreCase.--header {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4px;
        position: relative;
        margin: 0;
    }
    label.mobile__offreCase.--header::after {
        content: '';
        display: block;
        border: 0 solid transparent;
        border-top-color: #969595;
        position: absolute;
        top: 100%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    label.mobile__offreCase.--header h2 {
        color: white;
        text-transform: uppercase;
        font-weight: 700;
        margin: 0;
        font-size: 16px;
    }
    label.mobile__offreCase.--header p {
        color: white;
        text-align: center;
        margin-bottom: 0;
        margin-top: 6px;
        font-size: 13px;
        font-weight: 700;
    }
    label.mobile__offreCase.--header.o-dec {
        background: #969595;
    }
    label.mobile__offreCase.--header.o-lib {
        background: #2e4770;
    }
    label.mobile__offreCase.--header.o-ann {
        background: #ef7d00;
    }
    /* Checked */
    #offreDec:checked~main label.mobile__offreCase.--header.o-dec::after {
        border-width: 10px;
        border-bottom-width: 0;
    }
    #offreLib:checked~main label.mobile__offreCase.--header.o-lib::after {
        border-width: 10px;
        border-bottom-width: 0;
        border-top-color: #2e4770;
    }
    #offreAnn:checked~main label.mobile__offreCase.--header.o-ann::after {
        border-width: 10px;
        border-bottom-width: 0;
        border-top-color: #ef7d00;
    }
    #offreDec:checked~main label.mobile__offreCase.o-dec span {
        color: #ef7d00;
    }
    #offreLib:checked~main label.mobile__offreCase.o-lib span {
        color: #ef7d00;
    }
    #offreAnn:checked~main label.mobile__offreCase.o-ann span {
        color: #ef7d00;
    }
    .mobile__offres-btn {
        float: left;
        width: 100%;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .mobile__offres-btn .button__green {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        text-align: center;
        margin-bottom: 10px;
        font-size: 14px;
    }
    /* .mobile__offres-btn #offreMobile {
  display: none;
} */
    #BtnHeaderClub {
        display: none;
    }
    #BtnHeaderClubM {
        display: inline-block;
    }
    .mobile__offres-btn p {
        font-size: 11px;
    }
    .mobile__offres-btn h2 {
        margin-top: 5px;
        font-size: 14px;
        color: #ef7d00;
        display: block;
        font-weight: 700;
    }
    .mobile__offres-btn h3 {
        font-weight: 700;
        margin: 0 0 10px 0;
        font-size: 14px;
        text-align: center;
    }
    .mobile__offres-btn .button__green:hover {
        text-decoration: none;
        color: white;
    }
}

@media screen and (max-width: 815px) {
    .pricing__card--header .pricing__eco {
        font-size: 16px;
        line-height: 1.2;
    }
}

@media screen and (max-width: 430px) {
    .mobileOffre___header-c {
        padding: 0 2.5px;
    }
    label.mobile__offreCase.--header h2 {
        font-size: 16px;
    }
}

@media screen and (max-width: 354px) {
    label.mobile__offreCase span.o-new {
        font-size: 10px;
    }
}

@media screen and (max-width: 350px) {
    label.mobile__offreCase.--header h2 {
        font-size: 14px;
    }
    label.mobile__offreCase[data=tarif] span.digits-l {
        font-size: 24px;
    }
    label.mobile__offreCase span.o-eco {
        position: absolute;
        z-index: -1;
        padding: 3px;
        color: #333333;
        font-size: 11px;
    }
    label.mobile__offreCase span.o-eco {
        right: 0;
    }
}




/*fixbug tip popup leaftlet*/

.leaflet-popup-tip-container {
    bottom: -20px;
}


/* Pages liste et map */

.wrapper__list-m {
    background: white;
}

.list-m__rating span {
    color: #6d6d6d;
}


.list-m__tarif {
    background: #ef7d00;
    padding: 4px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 4px;
}

.list-m__tarif,
.list-m__tarif span {
    color: white;
    font-size: 14px;
}

section.list-m__list {
    float: left;
    width: 100%;
    max-width: 840px;
    background: white;
    padding: 0 24px;
    min-height: calc(100vh - 60px);
}

.list-m__map {
    float: left;
    width: calc(100% - 840px);
    position: sticky;
    top: 60px;
}

.list-m__map #MapUserContent {
    height: calc(100vh - 60px);
}

.list-m__list .i_proposer.button__orange {
    font-size: 16px;
    display: inline-block;
    position: sticky;
    top: 120px;
    z-index: 3;
    margin: 15px 0;
    width: 100%;
    border-radius: 0
}

.wrapper__list-m.--commune section.list-m__list {
    min-height: calc(100vh - 120px);
}

.wrapper__list-m.--commune .list-m__map {
    top: 120px;
}

.wrapper__list-m.--commune .list-m__map #MapUserContent {
    height: calc(100vh - 120px);
}

.list-m__tr {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-m__tr.flex-start {
    justify-content: flex-start;
}

.header__list-m {
    float: left;
    width: 100%;
    padding: 30px 0;
}

.header__list-m h1 {
    font-size: 22px;
    line-height: 1.58;
    color: #1b1b1b;
    font-weight: 700;
}

.header__list-m p {
    font-size: 16px;
    line-height: 1.58;
    margin-bottom: 1rem;
}

.header__list-m h2 {
    font-size: 16px;
    line-height: 1.58;
    clear: both;
}

.noResults .gotLake {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.noResults h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 12px 0 6px 0;
    color: #333;
}

.noResults .gotLake p {
    font-size: 16px;
    margin: 0 0 12px 0;
    color: #6d6d6d;
}

.noResults a.header__list-m-link {
    color: #2e4770;
    font-weight: 700;
    font-size: 16px;
    margin: 12px 0;
    display: inline-block;
}

.noResults .button__orange {
    display: inline-block;
    width: fit-content;
    width: -moz-fit-content;
}

.search__form {
    position: relative;
    float: left;
    width: 100%;
    max-width: 450px;
    margin-bottom: 0;
}

.search__form input[type="text"] {
    height: 40px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding-left: 40px;
}

.search__form svg {
    position: absolute;
    top: calc(50% - 9px);
    left: 15px;
}

.list-m__filters {
    position: sticky;
    top: 100px;
    float: left;
    width: 100%;
    padding: 6px 24px;
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.list-m__list .list-m__filters {
    padding: 6px 0;
}

.list-m__filters.filters--voyages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.list-m__filters.filters--voyages .header__list-m {
    width: auto;
    padding: 0;
}

@media screen and (max-width: 991px) {
    .list-m__filters.filters--voyages {
        position: relative;
        top: 0;
    }
}

.list-m__list .list-m__filters .list-m__checks {
    margin: 0;
}

.header__list-m .button__blue {
    display: inline-block;
    padding: 0 0.8em;
    line-height: 38px;
    margin-top: 10px;
}

.list-m__checks {
    float: left;
    margin: 0 16px;
}

.list-m__check {
    display: inline-block;
    margin: 0 4px;
    position: relative;
}

.list-m__check input[type=checkbox] {
    display: none;
}

.list-m__check input[type=checkbox]+label {
    display: inline-block;
    position: relative;
    border-radius: 40px;
    padding: 0 12px;
    background: #fff;
    color: #1b1b1b;
    cursor: pointer;
    line-height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 13px;
    font-family: "Open sans", sans-serif;
}

.list-m__check input[type=checkbox]+label:hover {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #2e4770;
}

.list-m__check input[type=checkbox]:checked+label {
    border: 1px solid #2e4770;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0px 0px 0px 1px #2e4770;
    color: #2e4770;
}

.exotique__tarif {
    font-size: 1rem;
    color: #1b1b1b;
    margin-top: 1rem;
    display: inline-block;
}

.exotique__country {
    font-weight: 700;
    text-transform: uppercase;
    color: #2e4770;
}

.megamenu__section ul.listeTechniques {
    margin: 0;
}

.list-m__check .listeTechniques input[type=checkbox]+label {
    position: relative;
    display: flex;
    margin: 0.6em 0;
    align-items: center;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    line-height: 1.4;
}

.listeTechniques .checkbox__collab .nokill {
    position: relative;
    width: 100%;
}

.list-m__check .listeTechniques input[type=checkbox]:checked+label {
    box-shadow: none;
    color: #2e4770;
}

.list-m__list .slf-sortie {
    padding: 0;
    margin: 0;
    box-shadow: 10px 10px 16px rgba(55, 84, 170, 0.05), -10px -10px 18px #f1f1f1;
    border-radius: 6px;
    overflow: hidden;
    margin: 0.8rem 0;
    display: flex;
}

.list-m__list .slf-sortie .headerPic__sortie {
    display: none;
    visibility: visible;
    float: left;
    width: 300px;
    height: auto;
    object-fit: cover;
}

.list-m__list .btn-participer-sortie {
    display: none;
    visibility: hidden;
}

.wrapper--sorties .dualButton {
    display: none;
    margin: 8px 8px 8px 0;
    float: left;
}

.dualButton .toggleMapList {
    display: flex;
    align-items: center;
    font-weight: 700;
    position: relative;
    border-radius: 40px;
    padding: 0 12px;
    background: #fff;
    color: #1b1b1b;
    cursor: pointer;
    line-height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    float: right;
    outline: none;
    overflow: hidden;
}

.dualButton .toggleMapList:active,
.dualButton .toggleMapList:focus {
    outline: none;
}

.dualButton .toggleMapList:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 8px;
}

.dualButton .toggleMapList:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 8px;
    border-left: none;
}

.dualButton .toggleMapList.active {
    background: rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 1400px) {
    .wrapper--sorties .search__form {
        max-width: 250px;
    }
}

@media screen and (max-width: 1120px) {
    .wrapper--sorties section.list-m__list {
        max-width: 750px;
    }
    .wrapper--sorties .list-m__map {
        float: left;
        width: calc(100% - 750px);
    }
}

@media screen and (max-width: 1024px) {
    section.list-m__list {
        max-width: 650px;
    }
    .list-m__map {
        width: calc(100% - 650px);
    }
}

@media screen and (max-width: 991px) {
    .wrapper--sorties .dualButton {
        display: flex;
    }
    .list-m__list .i_proposer.button__blue {
        position: fixed;
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    .list-m__list .i_proposer.button__blue.ecriretous {
        position: sticky;
        bottom: auto;
        top: 120px;
    }
    .list-m__list .i_proposer.button__blue#proposerSortie {
        margin: 0;
    }
    .wrapper--sorties section.list-m__list {
        max-width: 100%;
        min-height: auto;
    }
    .wrapper--sorties .list-m__map {
        float: left;
        width: 100%;
    }
    .list-m__filters {
        padding: 0;
        transition: 0.4s all ease;
    }
    .list-m__filters.translate {
        transform: translateY(-100%);
    }
    .search__form {
        max-width: 100%;
        padding: 8px 24px;
    }
    .search__form svg {
        left: 36px;
    }
    .list-m__checks {
        width: 100%;
        margin: 0;
        padding: 8px 24px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        /* overflow-y: scroll; /*fixme for cédric : visible or scroll */
        transition: 0.2s all ease;
    }
    .list-m__list .list-m__filters .list-m__checks {
        padding: 0;
        border-top: none;
    }
    .list-m__check input[type=checkbox]+label {
        line-height: 32px;
    }
    .check__container {
        max-width: 2000px;
        white-space: nowrap;
    }
    .wrapper--sorties .list-m__list .slf-sortie {
        flex-direction: column;
        margin: 0;
    }
    .wrapper--sorties .list-m__list .slf-sortie .headerPic__sortie {
        display: block;
        width: 100%;
        height: 200px;
    }
    .wrapper--sorties section.list-m__list {
        padding: 0 24px 24px 24px;
    }
}

@media screen and (max-width: 768px) {
    section.list-m__list {
        max-width: 100%;
    }
    .list-m__map {
        float: left;
        width: 100%;
    }
}

@media screen and (max-width: 430px) {
    .header__list-m h1 {
        font-size: 18px;
    }
}


/* Nouvelle section offres */

.clubPlans {
    width: 100%;
    float: left;
    z-index: 3;
    padding: 50px 0 50px 0;
    position: relative;
    background: #f7f7f7;
    padding: 20px 0;
}

.clubPlans__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    background: url(/static/photo_site/header_coindepeche.webp) center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.clubPlans__content {
    position: relative;
    z-index: 2;
}

.clubPlans__title {
    text-align: center;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 34px;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.95);
}

.clubPlans__container {
    width: 960px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
}

.clubPlan {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.clubPlan:hover {
    transform: scale(1.02);
}

.clubPlan__header {
    position: relative;
    background: #F7F7F7;
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3rem 1rem;
}

.clubPlan__header h2 {
    font-family: 'Open Sans', sans-serif;
    color: #1B1B1B;
    margin: 0;
    font-size: 28px;
    margin-bottom: 6px;
    font-weight: 700;
}

.clubPlan__header span {
    font-size: 16px;
}

.clubPlan__header .tag-eco {
    color: white;
    background: #ef7d00;
    padding: 0 .4rem;
    border-radius: 3px;
    line-height: 24px;
    position: absolute;
    bottom: -12px;
}

.clubPlan__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 2rem 1rem 1rem 1rem;
}

.clubPlan__cta .try {
    font-size: 16px;
    font-weight: 700;
}

.clubPlan__cta .pricing {
    font-size: 13px;
    font-weight: 400;
    color: #6d6d6d;
}

.clubPlan__cta .pricing .price {
    font-size: 26px;
}

.clubPlan__cta .enga {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 1rem;
}

.clubPlan__cta .cta {
    font-size: 16px;
    font-weight: 400;
    background: transparent;
    border: 2px solid #2e4770;
    color: #2e4770;
    font-weight: 700;
    border-radius: 6px;
    padding: .8rem 2rem;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.clubPlan__cta .cta:hover {
    background: #2e4770;
    color: white;
}

.clubPlan__cta .cta.--lib {
    background: #2e4770;
    color: white;
}

.clubPlan__cta .cta.--lib:hover {
    background: #3d5e94;
    border-color: #3d5e94;
}

.clubPlan__cta .cta.--ann {
    background: transparent;
    color: #ef7d00;
    border-color: #ef7d00;
}

.clubPlan__cta .cta.--ann:hover {
    background: #ff9623;
    border-color: #ff9623;
    color: white;
}

.clubPlan__cta .cta.--ann2 {
    background: #ef7d00;
    color: white;
    border-color: #ef7d00;
}

.clubPlan__cta .cta.--ann2:hover {
    background: #ff9623;
    border-color: #ff9623;
}

.clubPlan__services {
    padding: 0 1rem 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.clubPlan__services p {
    font-size: 16px;
    color: #333333;
    margin: 0;
    line-height: 2;
    text-align: center;
}

.clubPlan__services p .fa {
    color: #20a720;
}

@media screen and (max-width: 1600px) {
    .clubPlan__header {
        padding: 2rem 1rem;
    }
    .clubPlan__services p,
    .clubPlan__cta .enga,
    .clubPlan__cta .try {
        font-size: 15px;
    }
    .clubPlan__header h2 {
        font-size: 24px;
    }
    .clubPlans__title h2 {
        font-size: 24px;
    }
    .clubPlan__cta .pricing .price {
        font-size: 24px;
    }
}

@media screen and (max-width: 1200px) {
    .clubPlan__services p,
    .clubPlan__cta .enga,
    .clubPlan__cta .try {
        font-size: 14px;
    }
    .clubPlan__header h2 {
        font-size: 22px;
    }
    .clubPlans__title {
        font-size: 24px;
    }
}

@media screen and (min-width: 701px) and (max-width: 991px) {
    .clubPlans__container {
        grid-template-columns: repeat(4, 1fr);
        padding: 15px;
    }
    .clubPlan {
        grid-column: span 2;
    }
    .clubPlan:last-child {
        grid-column-start: 3;
        grid-column-end: 5;
    }
    .clubPlans__bg {
        height: 100%;
    }
}

@media screen and (max-width: 700px) {
    .clubPlans__container {
        grid-template-columns: repeat(1, 1fr);
        padding: 15px;
    }
    .clubPlans__bg {
        height: 100%;
    }
    .clubPlan.dec .try {
        display: none;
    }
}

.list-m__check .dropdown {
    position: absolute;
    background: #FFFFFF;
    top: calc(100% + 10px);
    min-width: 315px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 6px;
    left: calc(50% - 150px);
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    pointer-events: none;
}

.list-m__check .dropdown.open {
    opacity: 1;
    pointer-events: all;
}

.list-m__check .dropdown-content {
    padding: 6px 0;
}

.list-m__check .dropdown-content .form-radio {
    float: left;
    width: 100%;
    padding: 0.3rem 0;
}

.list-m__check .dropdown-footer {
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.list-m__check .dropdown-footer button {
    float: right;
    margin: 0;
    background: #2e4770;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-family: 'Lato', sans-serif;
}

.list-m__check .dropdown-footer button:hover {
    background: #385482;
}

.list-m__check .dropdown input[type=checkbox]+label {
    margin: 4px 0;
}

.list-m__filters .filter {
    display: inline-block;
    position: relative;
    border-radius: 40px;
    padding: 0 12px;
    background: #fff;
    color: #1b1b1b;
    cursor: pointer;
    line-height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    font-size: 13px;
    font-family: "Open sans", sans-serif;
    outline: none;
}

.list-m__filters .filter:hover {
    background: rgba(0, 0, 0, 0.05);
}

.list-m__filters .filter:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

.list-m__filters .filter.activeFilter {
    border: 1px solid #2e4770;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0px 0px 0px 1px #2e4770;
    color: #2e4770;
    outline: none;
}

.list-m__check:first-child .dropdown {
    left: 0;
}

.list-m__check:last-child .dropdown {
    left: auto;
    right: 0;
}

@media screen and (max-width: 991px) {
    .list-m__filters .filter {
        line-height: 32px;
    }
}

.toggleFiltersMobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .list-m__checks {
        overflow-y: scroll;
        display: none;
    }
    .list-m__filters.filters--voyages .list-m__checks {
        display: block;
        width: auto;
    }
    .list-m__checks.opened {
        display: block;
    }
    .list-m__check .dropdown {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 10;
        width: 100%;
        height: calc(100vh - 60px);
        box-shadow: none;
        border: none;
    }
    .wrapper--sorties .check__container {
        max-width: 100%;
        white-space: initial;
        float: left;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        width: 100%;
        background: white;
    }
    .wrapper--sorties .list-m__filters.translate {
        transform: translateY(0);
    }
    .wrapper--sorties .list-m__checks {
        padding: 0;
        height: calc(100vh - 116px);
    }
    .wrapper--sorties .list-m__check {
        float: left;
        margin: 0;
        position: relative;
        width: 100%;
        /* padding: 10px 0; */
    }
    .wrapper--sorties .list-m__check.--location {
        width: auto;
        margin: 12px;
    }
    .wrapper--sorties .list-m__filters .filter {
        border: none;
        border-radius: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        width: 100%;
        text-align: left;
    }
    .wrapper--sorties .list-m__filters .filter.toggleFilters {
        pointer-events: none;
        line-height: 40px;
        font-weight: 700;
    }
    .wrapper--sorties .list-m__filters .list-m__check:first-child .filter {
        border-top: none;
    }
    .wrapper--sorties .list-m__check .dropdown-content {
        padding: 6px 0;
        width: 100%;
        float: left;
    }
    .wrapper--sorties .list-m__check .dropdown-content input[type=checkbox]+label {
        margin: 4px;
    }
    .wrapper--sorties .list-m__check .dropdown {
        position: relative;
        top: auto;
        left: 0;
        right: 0;
        z-index: 10;
        width: 100%;
        height: auto;
        box-shadow: none;
        border: none;
        pointer-events: all;
        opacity: 1;
    }
    .wrapper--sorties .dropdown-content .list-m__check {
        width: auto;
    }
    .toggleFiltersMobile {
        font-size: 14px;
        display: flex;
        align-items: center;
        font-weight: 700;
        position: relative;
        border-radius: 6px;
        padding: 0 12px;
        background: #fff;
        color: #1b1b1b;
        cursor: pointer;
        line-height: 36px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
        margin: 0 8px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
    }
    .toggleFiltersMobile .fa {
        margin-left: 6px;
    }
    .toggleFiltersMobile:focus {
        background: rgba(0, 0, 0, 0.05);
        outline: none;
    }
    .toggleFiltersMobile.activeFilter {
        border: 1px solid #2e4770;
        background: rgba(0, 0, 0, 0.05);
        box-shadow: inset 0px 0px 0px 1px #2e4770;
        color: #2e4770;
    }
    .wrapper--sorties .search__form {
        padding: 0px 10px;
        max-width: calc(100% - 190px);
    }
    .wrapper--sorties .search__form input[type="text"] {
        padding-left: 30px;
    }
    .wrapper--sorties .search__form svg {
        left: 17.5px;
    }
}

@media screen and (max-width: 991px) {
    .toggleFiltersMobile {
        margin: 8px;
    }
    .wrapper--sorties .search__form {
        padding: 8px 10px;
    }
}

.sortiesInfo {
    float: left;
    width: 100%;
    background: #2e4770;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 12px;
}

.sortiesInfo .fa {
    color: white;
    margin-right: 4px;
}

.sortiesInfo p {
    color: white;
    font-size: 16px;
    margin: 0;
}

.wrapper--sorties .header__list-m {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#WrapperSortiesCollab {
    background: #f7f7f7;
}

#WrapperSortiesCollab .list-m__map {
    top: 60px;
}

#WrapperSortiesCollab .list-m__map #MapUserContent {
    height: calc(100vh - 60px);
}

#WrapperSortiesCollab.--commune .list-m__map {
    top: 120px;
}

#WrapperSortiesCollab.--commune .list-m__map #MapUserContent {
    height: calc(100vh - 120px);
}

#WrapperSortiesCollab section.list-m__list {
    padding: 0;
}

#WrapperSortiesCollab .header__list-m {
    padding: 24px 24px 12px 24px;
    border: none;
}

#WrapperSortiesCollab .sortiesList {
    float: left;
    width: 100%;
}

.wrapper--sorties#WrapperSortiesCollab .search__form {
    max-width: 100%;
    padding: 0 7px 7px 7px;
}

#WrapperSortiesCollab .list-m__list .list-m__filters {
    padding: 6px 24px;
    background: transparent;
    border-bottom: none;
    float: left;
    width: auto;
}

#WrapperSortiesCollab .header__list-m h1 {
    margin-bottom: 12px;
    font-size: 28px;
}

@media screen and (max-width: 991px) {
    #WrapperSortiesCollab .toggleFiltersMobile {
        margin: 0 0 0 6px;
    }
    #WrapperSortiesCollab .list-m__list .list-m__filters {
        padding: 12px;
    }
}

.blocSortie {
    width: 100%;
    float: left;
    background: white;
    padding: 0;
    margin: 0;
    /* box-shadow: 10px 10px 16px rgba(55, 84, 170, 0.05), -10px -10px 18px #f1f1f1; */
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 0.8rem;
    border-radius: 6px;
}

.blocSortie .sortie__detail {
    float: left;
    margin: 4px;
    width: auto;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #6d6d6d;
}

.blocSortie .sortie__detail img {
    margin-right: 4px;
    height: 20px;
    width: auto;
}

.blocSortie--content {
    width: 100%;
    float: left;
    padding: 10px;
}

.blocSortie h3 {
    color: #1b1b1b;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.blocSortie--content p {
    font: 400 16px/1.2 'Lato';
    color: #6d6d6d;
}

.sortiesCollab-sorties {
    float: left;
    width: 100%;
    padding-left: 0;
    transition: 0.2s all ease;
    margin-bottom: 12px;
}

.nbSorties {
    width: auto;
    text-align: center;
    /* margin-right: 70px; */
    font-size: 14px;
    background: transparent;
    color: #2e4770;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid;
}

@media screen and (max-width: 991px) {
    .nbSorties {
        margin-right: 32px;
    }
}

@media screen and (max-width: 600px) {
    .header__list-m {
        padding: 24px 0;
    }
    .list-m__filters.filters--voyages {
        z-index: 2;
    }
    .list-m__filters.filters--voyages .list-m__checks {
        display: none;
        width: auto;
    }
    .list-m__filters.--voyagesMobile .list-m__checks {
        display: block;
    }
    .--voyagesMobile .list-m__check .dropdown.open {
        height: calc(100vh - 112px);
        bottom: 0;
        top: 112px;
    }
    .--voyagesMobile .list-m__check .dropdown.open .list-m__check {
        position: relative;
        display: block;
        float: left;
    }
}

@media screen and (min-width: 601px) {
    .list-m__filters.--voyagesMobile {
        display: none;
    }
}

.box__inscription.services .slf__service svg {
    width: 70px;
}

.box__inscription.services .slf__service .slf__service--content {
    margin-left: 8px;
    width: calc(100% - 78px);
}

.box__inscription.services .onboarding__current h3 {
    font-size: 18px;
}

.box__inscription.services .onboarding__current p {
    margin-top: 15px;
}

.box__inscription.services .onboarding__current p b {
    color: #1b1b1b;
}

.box__inscription.services .slf__service.allServices.onboarding__current p {
    margin-top: 5px;
}

.box__inscription.services .slf__service .slf__service--content span {
    display: inline-block;
    margin-top: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #2e4770;
}

.box__inscription.services .slf__service.allServices:hover .slf__service--content span {
    color: #ef7d00;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.box__inscription.services .slf__service .slf__service--content span a:hover {
    color: #ef7d00;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.box__inscription.services .slf__service:hover .onboarding__current h3 {
    color: #2e4770;
}

.box__inscription.services .slf__service .slf__service--content ul {
    font: 400 16px/1.5 'Lato';
}

.box__inscription.services .slf__service .flex__images img {
    width: 50%;
}

.title__service {
    text-align: center;
    padding: 20px;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 1.8vw;
    line-height: 1.58;
    max-width: 768px;
}

.title__service span {
    color: #ef7d00;
}

@media screen and (max-width: 1400px) {
    .box__inscription.services .onboarding__current h3 {
        font-size: 17px;
    }
}

@media screen and (max-width: 1250px) {
    .title__service {
        font-size: 22px;
    }
}

@media screen and (max-width: 900px) {
    .box__inscription.services .slf__service .slf__service--content span {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .title__service {
        font-size: 18px;
        padding: 24px 12px 24px 12px;
    }
}


.exo--date {
    font-size: 16px;
    color: #6d6d6d;
}


.header--tags {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
}

.box__success {
    background: white;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
    padding: 0;
    border-radius: 6px;
}

.succes__page {
    min-height: 50vh;
    display: flex;
    align-items: center;
    position: relative;
    float: left;
    width: 100%;
    background: #f7f7f7;
    padding: 50px 0;
}

.box__success h1 {
    color: #20a720;
    font-weight: 700;
}

.box__success p {
    font-size: 16px;
    line-height: 1.58;
    color: #1b1b1b;
}


/* Pour page accueil */



.com-prise:hover {
    transform: scale(1.02);
    z-index: 2;
}

.meteo-small {
    background: #2e4770;
    color: white;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.meteo-small img {
    height: 19px;
    width: auto;
    margin-right: 4px;
}


#SortiesCommunes .d__link {
    display: flex;
    align-items: center;
}

#SortiesCommunes .d__link .button__orange,
#EtangsCommune .d__link .button__orange {
    margin: 0;
}

.favCom {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    height: 35px;
    width: 35px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.favCom .fa {
    color: rgba(0, 0, 0, 0.25);
    font-size: 16px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.favCom:hover {
    transform: scale(1.1)
}

.favCom:hover .fa {
    color: #ef7d00;
}

.grid__prises {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    width: 100%;
}

.grid__prises .monCompte__box {
    margin: 0;
}



@media screen and (max-width: 1150px) {
    #SortiesCommunes .d__link {
        flex-direction: column;
        align-items: flex-start;
    }
    #SortiesCommunes .d__link .button__orange,
    #EtangsCommune .d__link .button__orange {
        margin-left: 0;
        margin-top: 10px;
    }
    .grid__prises {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(250px, 1fr));
        grid-gap: 12px;
        width: 100%;
    }
}


@media screen and (max-width: 768px) {
    #SortiesCommunes.commune__section.wrapper__bloc .d__categories-container,
    #EtangsCommune.commune__section.wrapper__bloc .d__categories-container {
        margin: 0;
        padding: 0;
    }
}



.tag.pechabilite {
    display: inline-block;
    background: #2e4770;
    color: white;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

.tag.pechabilite .fa {
    position: relative;
    color: white;
    bottom: auto;
    font-size: 14px;
    transform: none;
    right: auto;
    opacity: 1;
    margin-right: 6px;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    /* START TOOLTIP STYLES */
    [tooltip] {
        position: relative;
        /* opinion 1 */
    }
    /* Applies to all tooltips */
    [tooltip]::before,
    [tooltip]::after {
        text-transform: none;
        /* opinion 2 */
        font-size: .9em;
        /* opinion 3 */
        line-height: 1;
        user-select: none;
        pointer-events: none;
        position: absolute;
        display: none;
        opacity: 0;
    }
    [tooltip]::before {
        content: '';
        border: 5px solid transparent;
        /* opinion 4 */
        z-index: 1001;
        /* absurdity 1 */
    }
    [tooltip]::after {
        content: attr(tooltip);
        font-family: 'Lato', sans-serif;
        text-align: center;
        min-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 6px;
        border-radius: 3px;
        box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
        background: #fff;
        color: #1b1b1b;
        z-index: 1000;
        font-size: 15px;
        line-height: 1.2;
        text-align: left;
    }
    /* Make the tooltips respond to hover */
    [tooltip]:hover::before,
    [tooltip]:hover::after {
        display: block;
    }
    /* don't show empty tooltips */
    [tooltip='']::before,
    [tooltip='']::after {
        display: none !important;
    }
    /* FLOW: UP */
    [tooltip]:not([flow])::before,
    [tooltip][flow^="up"]::before {
        bottom: 100%;
        border-bottom-width: 0;
        border-top-color: #fff;
    }
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::after {
        bottom: calc(100% + 5px);
    }
    [tooltip]:not([flow])::before,
    [tooltip]:not([flow])::after,
    [tooltip][flow^="up"]::before,
    [tooltip][flow^="up"]::after {
        left: 50%;
        transform: translate(-50%, -.5em);
    }
    /* FLOW: DOWN */
    [tooltip][flow^="down"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #fff;
    }
    [tooltip][flow^="down"]::after {
        top: calc(100% + 5px);
    }
    [tooltip][flow^="down"]::before,
    [tooltip][flow^="down"]::after {
        left: 50%;
        transform: translate(-50%, .5em);
    }
    /* FLOW: LEFT */
    [tooltip][flow^="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #fff;
        left: calc(0em - 5px);
        transform: translate(-.5em, -50%);
    }
    [tooltip][flow^="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-.5em, -50%);
    }
    /* FLOW: RIGHT */
    [tooltip][flow^="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #fff;
        right: calc(0em - 5px);
        transform: translate(.5em, -50%);
    }
    [tooltip][flow^="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(.5em, -50%);
    }
    /* KEYFRAMES */
    @keyframes tooltips-vert {
        to {
            opacity: 1;
            transform: translate(-50%, 0);
        }
    }
    @keyframes tooltips-horz {
        to {
            opacity: 1;
            transform: translate(0, -50%);
        }
    }
    /* FX All The Things */
    [tooltip]:not([flow]):hover::before,
    [tooltip]:not([flow]):hover::after,
    [tooltip][flow^="up"]:hover::before,
    [tooltip][flow^="up"]:hover::after,
    [tooltip][flow^="down"]:hover::before,
    [tooltip][flow^="down"]:hover::after {
        animation: tooltips-vert 300ms ease-out forwards;
    }
    [tooltip][flow^="left"]:hover::before,
    [tooltip][flow^="left"]:hover::after,
    [tooltip][flow^="right"]:hover::before,
    [tooltip][flow^="right"]:hover::after {
        animation: tooltips-horz 300ms ease-out forwards;
    }
}

#popup_like {
    z-index: 99999;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
}

#popup_like.active {
    pointer-events: all;
}

.filter_selected {
    float: left;
    padding: 0 24px;
    margin: 10px 0;
    font-weight: 700;
    float: left;
    width: 100%;
}

span.filtered__tag {
    padding: 4px;
    background: #2e4770;
    border-radius: 3px;
    color: white;
    font-size: 13px;
    margin: 4px;
    display: inline-block;
    font-weight: 400;
}

.filtered__tag * {
    padding: 0 !important;
    margin: 0 !important;
}

@media screen and (max-width: 1130px) {
    [tooltip]::after {
        min-width: 150px;
        font-size: 14px;
    }
}


#DestinationsList {
    max-height: 250px;
    overflow-y: scroll;
    /* Custom scrollbar firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}


/* Custom scrollbar webkkit (chrome, edge, safari) */

#DestinationsList::-webkit-scrollbar,
.megamenu__section ul::-webkit-scrollbar {
    width: 6px;
}

#DestinationsList::-webkit-scrollbar-track,
.megamenu__section ul::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 6px;
}

#DestinationsList::-webkit-scrollbar-thumb,
.megamenu__section ul::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.megamenu__section ul {
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}

.modal__offre-etang {
    position: fixed;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
    width: 350px;
    max-width: calc(100% - 20px);
    background: white;
    padding: 24px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    z-index: 7;
    display: none;
}

.modal__offre-overlay {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    display: none;
}

.modal__offre-etang input[type="text"],
.modal__offre-etang select {
    margin: 5px 0;
    width: 100%;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: white;
}

.modal__offre-etang select {
    padding: 0 5px 0 5px;
}

.modal__offre-etang input[type="text"]:focus,
.modal__offre-etang select:focus {
    outline: none;
    border-color: #ef7d00;
}

.modal__offre-etang h2 {
    font-size: 16px;
    color: #1b1b1b;
    font-weight: 700;
    margin-bottom: 10px;
}

.button__modal,
input[type=submit].button__modal,
.addOffre {
    padding: .5rem 1rem;
    color: white;
    text-align: center;
    border-radius: 3px;
    transition: .15s all ease;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    margin-top: 5px;
    float: right;
    cursor: pointer;
}

.button__modal.--valid,
.addOffre {
    background: #2e4770;
    border: 1px solid #2e4770;
}

.button__modal.--valid:hover,
.addOffre:hover {
    background: #355282;
}

.button__modal.--cancel {
    margin-right: 10px;
    color: #ef7d00;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.button__modal.--cancel:hover {
    background: rgba(0, 0, 0, 0.05);
}

.addOffre {
    float: left;
    margin: 0;
}

.bloc__tarifs {
    width: 100%;
    float: left;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 12px 0;
    position: relative;
}

.tarif__gr1 {
    float: left;
    width: 100%;
    color: #1b1b1b;
    font-weight: 700;
    padding: 10px;
    border: none;
    background: #f1f1f1;
    transition: .15s all ease;
}

.tarif__gr2 {
    float: left;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-left: none;
    border-right: none;
    padding: 10px;
    background: #f7f7f7;
    transition: .15s all ease;
}

.tarif__gr2:focus {
    outline: none;
    border-bottom-color: #ef7d00;
    background: #fff;
}

.tarif__gr1:focus {
    outline: none;
    box-shadow: inset 0 -1px #ef7d00;
    background: #fff;
}

.tarif__offre {
    float: left;
    width: 100%;
    padding: 0 10px 10px 10px;
}

.listeOffre--row {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 8px;
}

.listeOffre--cat {
    grid-column: span 2;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    display: block;
    padding: .2rem 0;
    width: 100%;
    margin: 2px 0;
}

.listeOffre--details {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 8px;
}

.listeOffre--grid2 {
    float: left;
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.listeOffre--dispo {
    color: green;
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 6px;
    justify-content: center;
}

.removeduree,
.addduree {
    display: inline-block;
    padding: .2rem .5rem;
    text-align: center;
    border-radius: 3px;
    transition: .15s all ease;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    color: #ef7d00;
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin: 2px 0;
}

.offre--detail {
    display: block;
    padding: .2rem 0;
    width: 100%;
    margin: 2px 0;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
}

.addduree {
    color: #2e4770;
}

.removeduree:hover,
.addduree:hover {
    background: rgba(0, 0, 0, 0.05);
}

.quantity {
    display: flex;
    margin: 2px 0;
}

.input-number {
    width: 40px;
    padding: 0 12px;
    vertical-align: top;
    text-align: center;
    outline: none;
}

input[type=text].input-number,
.input-number-decrement,
.input-number-increment {
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 26px;
    user-select: none;
}

.input-number-decrement,
.input-number-increment {
    display: inline-block;
    width: 26px;
    line-height: 26px;
    background: #f1f1f1;
    color: #1b1b1b;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-number-decrement:hover,
.input-number-increment:hover {
    background: #f7f7f7;
}

.input-number-decrement:active,
.input-number-increment:active {
    background: #ddd;
}

.input-number-decrement {
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.input-number-increment {
    border-left: none;
    border-radius: 0 4px 4px 0;
}

.cart__item {
    justify-content: space-between;
}

.cart__item--desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 36px);
}

.cart__item--desc h3,
.cart__item h3 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 14px;
}

.cart__item--desc h3 span {
    color: #6d6d6d;
}

.cart__item--desc p {
    width: 100%;
    text-align: left;
    color: #1b1b1b;
}

.btn__trash {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 26px;
    background: #f1f1f1;
    font-size: 14px;
    color: #6d6d6d;
    cursor: pointer;
    border: 1px solid transparent;
    transition: .15s all ease;
}

.btn__trash:hover {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f7f7f7;
    color: #8d8d8d;
}

.cart__item.--total h3 {
    width: auto;
}

.cart__item.--total .button__green {
    padding: 0.5rem 1rem;
    border-radius: 3px;
    text-decoration: none;
}

.cart__toggle {
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 10;
    height: 50px;
    width: 50px;
    border-radius: 40px;
    color: white;
    background: #20a720;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    display: none;
}

.cart__toggle:hover {
    background: #1f8b1f;
}

@media screen and (max-width: 930px) {
    .cart__toggle {
        display: flex;
    }
    .cart {
        position: fixed;
        bottom: 0;
        left: 0;
        max-width: 100%;
        margin: 0;
        z-index: 12;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        overflow: hidden;
        max-height: 70vh;
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
        transition: .3s all ease;
    }
    .cart__content {
        max-height: 40vh;
        display: flex;
        width: 100%;
        flex-direction: column;
        overflow: hidden;
        overflow-y: scroll;
    }
    .cart .monCompte__box--title {
        background: white;
    }
    .cart__overlay {
        content: '';
        background: rgba(0, 0, 0, 0.2);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
        opacity: 0;
        pointer-events: none;
        transition: .3s all ease;
    }
    .cart__item.--total {
        box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.1);
        z-index: 2;
        position: relative;
    }
    .cart__overlay.active {
        pointer-events: all;
        opacity: 1;
    }
    .cart.active {
        pointer-events: all;
        opacity: 1;
        transform: translateY(0);
        z-index: 99999;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 500px) {
    .removeduree,
    .addduree {
        font-size: 11px;
    }
    .listeOffre--details,
    .listeOffre--cat {
        grid-column: span 6;
    }
    .listeOffre--row.--head {
        display: none;
    }
}

.btn__reservation {
    width: 100%;
    color: white;
    background: #20a720;
    line-height: auto;
    padding: 16px 10px;
    float: left;
    text-transform: normal;
    font-size: 16px;
    font-weight: bold;
    position: sticky;
    top: 70px;
    z-index: 2;
}


.grid__especes {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    margin-top: 24px;
}

.grid__especes .card__item.card__item--espece {
    margin: 0;
    min-width: auto;
    width: 100%;
    background: #fff;
    vertical-align: top;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: none;
}

.grid__especes .card__item.card__item--espece:hover {
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 5%), 0 16px 35px 0 rgb(0 0 0 / 3%);
    transform: scale(1.02);
}


.favComsList {
    width: 100%;
    margin-top: 6px;
}

.favComsList .bouton_menu {
    float: left;
    display: block;
    font-size: 14px;
    color: #2e4770;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
    line-height: 1;
    background: #f7f7f7;
    margin: 0 8px 8px 0;
    padding: 0.5rem .75rem;
    border-radius: 2rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.favComsList .bouton_menu .fa {
    margin-right: 4px;
    color: #2e4770;
}

.favComsList .bouton_menu:hover {
    background: #ececec
}

@media screen and (max-width: 1600px) {
    .grid__especes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .ctaComMobile {
        position: fixed;
        text-align: center;
        width: auto;
        z-index: 4;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }
}

@media screen and (max-width: 650px) {
    .grid__especes {
        grid-template-columns: repeat(1, 1fr);
    }
}

#especeSelect .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
}

#especeSelect .select2-container .select2-selection--single {
    height: 40px;
    border: 1px solid #cecece;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

#especeSelect .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 5px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    line-height: 24px;
    text-align: left;
    background: transparent;
    padding: 4px 8px;
}

.select2-results__option {
    font-size: 14px;
    line-height: 1.58;
}

#popupMailCatch span {
    color: #ef7d00;
}

#vueAccueilConnexion .button__outline--black {
    margin-top: 20px;
    width: 100%;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

#vueAccueilConnexion .button__orange {
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
}

#vueAccueilConnexion h2.process__text {
    font-weight: 700;
    color: #1b1b1b;
}

@media screen and (max-width: 500px) {
    #vueAccueilConnexion .button__orange {
        font-size: 14px;
    }
}

.header__login-modal {
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 20px 30px;
}

.header__login-modal img {
    max-width: 250px;
}

.cvc_what {
    padding: 10px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #6d6d6d;
}

.process__formItem span.cvc_what {
    margin-bottom: 0;
    padding: 0;
    justify-content: center;
}

.process__formItem.nb {
    position: relative;
}

.process__formItem.nb span {
    position: absolute;
    top: 0;
    right: 10px;
}

.process__formItem.nb span i.fa {
    line-height: 46px;
}

.inscription__container .bloc_register-form {
    float: left;
    width: 364px;
}

.inscription__container .bloc_register-form .inscription__form {
    margin-top: 0;
}

.bloc_register-form .box__inscription {
    float: left;
    max-width: 390px;
}

.mail__left {
    float: left;
    width: 100%;
    position: relative;
}

.mail__left-image {
    width: 100%;
    display: none;
}

.mail__left-image img {
    width: 100%;
    border-radius: 15px;
}

.mail__left-phone img {
    width: 100%;
    position: relative;
    margin: 0;
}

.etape__cb {
    display: flex;
    justify-content: center;
    padding: 12px;
}

.etape__cb-left {
    padding: 20px 30px 20px 0;
    max-width: 530px;
}

.etape__cb-leftHeader {
    padding: 0 0 20px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.etape__cb-leftHeader h1 {
    color: #ef7d00;
    font-family: 'Open sans', sans-serif;
    font-size: 1.2rem;
}

.etape__cb-leftHeader h2 {
    color: #1b1b1b;
    font-weight: 700;
    font-family: 'Open sans', sans-serif;
    font-size: 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.etape__cb-leftContent h3,
.etape__cb-leftContent p,
.etape__cb-leftContent li {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.58;
    color: #6d6d6d;
}

.etape__cb-leftContent h3 {
    font-weight: 700;
    color: #1b1b1b;
    margin: 8px 0 12px 0;
}

.inscription-col {
    width: 420px;
    max-width: 100%;
}

.etape__cb .inscription-col {
    margin-top: 20px;
    min-width: 350px;
}

.etape__cb-offers {
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.etape__cb-offers a {
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.58;
    text-decoration: underline;
}

.etape__cb-offers i.fa {
    margin-right: 8px;
}

.connect-form {
    width: 500px;
    max-width: 95%;
    padding: 50px 30px 30px 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: auto;
}

.connect-logo {
    height: 45px;
    transform: translateY(26.5px);
    background: white;
    padding: 0 10px;
}

.button__process .button__orange,
.button__process input[type=submit].button__orange {
    height: 48px;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
}

.inscription__container {
    float: left;
    display: flex;
    padding: 24px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    width: 768px;
}

.create_acc-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 6px;
    margin-top: 24px;
}

.create_acc-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    width: 100%;
}

@media screen and (max-width: 1250px) {
    .inscription__container .mail__left-image {
        display: none;
    }
    .inscription__container {
        padding: 12px;
    }
    .inscription__container .inscription__form {
        margin-top: 0;
    }
    .bloc_register-form {
        width: 390px;
    }
    .inscription__container .mail__left-phone img {
        position: relative;
        transform: none;
        top: 0;
        width: 100%;
    }
    .blocCb .button__process .button__orange,
    .blocCb .button__process input[type=submit].button__orange {
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    .slfConnexion--left {
        padding: 24px;
        height: auto;
    }
    .connect-form {
        max-width: 100%;
    }
    .slf__connexion.slf__leftInner.inscription {
        width: 100%;
        position: relative;
        float: left;
        top: auto;
        left: auto;
        transform: none;
    }
    .connect-form {
        padding: 24px 12px;
    }
    .bloc_register-form {
        max-width: 100%;
    }
    .inscription__container {
        width: 420px;
        flex-direction: column-reverse;
        padding: 15px;
    }
    .mail__left {
        width: 100%;
        margin-top: 24px;
    }
    .inscription__container .mail__left-image {
        display: block;
    }
    .inscription__container .mail__left-phone img {
        display: none;
    }
    .menuF__bar.--club .menuF__logo a img, .menuF__bar.--club .menuF__logo a object {
        height: auto;
        width: 80vw;
        max-height: 60px;
    }
    .menuF.--club {
        height: 90px;
    }
}

.box__inscription .etape__cb-leftHeader,
.hashLink {
    display: none;
}

.etape__cb-popup-footer {
    display: none;
}

.etape__cb-overlay {
    display: none;
}

@media screen and (max-width: 767px) {
    .etape__cb {
        flex-direction: column-reverse;
        align-items: center;
    }
    .etape__cb-left {
        padding: 0;
        max-width: 420px;
    }
    .etape__cb-offers {
        display: none;
    }
    .etape__cb .inscription-col {
        min-width: auto;
        margin-top: 0;
    }
    .box__inscription .etape__cb-leftHeader {
        display: block;
        margin-bottom: 0;
        border-bottom: 0;
    }
    .inscription-offre {
        display: flex;
        justify-content: flex-end;
    }
    .etape__cb-left .etape__cb-leftHeader {
        display: none;
    }
    .hashLink {
        display: inline-block;
        color: #2e4770;
        font-weight: 700;
        font-size: 16px;
        background: #2e4770;
        color: white;
        padding: 6px 12px;
        border-radius: 32px;
    }
    h2 .hashLink {
        background: transparent;
        color: #2e4770;
        padding: 0;
        font-weight: 400;
        font-size: 14px;
    }
    .etape__cb-leftContent {
        position: fixed;
        width: calc(100% - 24px);
        top: calc(50%);
        transform: translateY(-50%);
        left: 12px;
        z-index: 99999999;
        background: white;
        max-height: calc(100vh - 24px);
        overflow-y: scroll;
        border-radius: 6px;
        padding: 0 0 0 0;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        pointer-events: none;
        opacity: 0;
        transition: 0.3s all ease;
    }
    .etape__cb-leftContent * {
        padding: 0 12px;
    }
    .etape__cb-overlay {
        content: '';
        position: fixed;
        z-index: 99999998;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        display: block;
        pointer-events: none;
        opacity: 0;
        transition: 0.3s all ease;
    }
    .etape__cb-popup-footer {
        position: sticky;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        margin-top: 12px;
    }
    .etape__cb-popup-footer .hashLink {
        min-width: 50%;
        text-align: center;
        padding: 6px 12px;
    }
    .etape__cb-leftContent.active,
    .etape__cb-overlay.active {
        pointer-events: all;
        opacity: 1;
    }
}

@media screen and (max-width: 500px) {
    .blocOffre__abo--action {
        padding: 24px 12px;
    }
    .connect-logo {
        height: 35px;
    }
    .button__process .button__orange,
    .button__process input[type=submit].button__orange {
        height: 48px;
        font-size: 14px;
    }
}

@media screen and (max-width: 380px) {
    .blocOffre__abo--action span strong {
        font-size: 14px;
    }
}

.blocOffre-select {
    color: #6d6d6d;
}

.blocOffre-select option {
    color: #1b1b1b;
}

.blocOffre-select option:first-child {
    color: #6d6d6d;
}


.dualButtons {
    display: none;
}

@media screen and (max-width: 991px) {
    .dualButtons {
        display: flex;
        align-items: center;
        position: sticky;
        float: right;
        top: 112px;
        margin-top: 12px;
        right: 18px;
        z-index: 4;
        background: white;
        border-radius: 6px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
        cursor: pointer;
        width: fit-content;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    #RightMap .dualButtons {
        position: absolute;
        top: 0;
        right: 18px;
    }
    .dualButtons span {
        font-size: 14px;
        font-weight: 700;
        color: #1b1b1b;
        padding: 0 1rem;
        line-height: 36px;
        display: block;
    }
    .dualButtons span.active {
        color: #ef7d00;
    }
    .dualButtons span:first-child {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }
    #RightMap {
        opacity: 1;
        height: 100vh;
    }
    #LeftList {
        opacity: 1;
        height: auto;
    }
    #RightMap.inactive {
        opacity: 0;
        height: 0;
    }
    #LeftList.inactive {
        opacity: 0;
        height: 0;
        display: none;
    }
    #WrapperSortiesCollab .header__list-m {
        padding: 12px 12px 0 12px;
    }
}

.box__paiement--contenu img.card-types {
    margin-left: 0;
    display: block;
    float: left;
    height: 22px;
    width: auto;
    margin-bottom: 20px;
}

.swiper-boat .swiper-button-next,
.swiper-boat .swiper-button-prev {
    background: white;
    height: 30px;
    width: 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    opacity: 0 !important;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.swiper-boat .swiper-button-next:after {
    content: "\f105";
    font-family: 'fontAwesome';
    color: #1b1b1b;
    font-size: 16px;
    font-weight: 700;
}

.swiper-boat .swiper-button-prev:after {
    content: "\f104";
    font-family: 'fontAwesome';
    color: #1b1b1b;
    font-size: 16px;
    font-weight: 700;
}

.swiper-boat:hover .swiper-button-next,
.swiper-boat:hover .swiper-button-prev {
    opacity: 1 !important;
}

.swiper-boat:hover .swiper-button-next.swiper-button-disabled,
.swiper-boat:hover .swiper-button-prev.swiper-button-disabled {
    opacity: 0.5 !important;
}



.wrapper__messagerie {
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #efefef;
}

.container__messagerie {
    width: 100%;
    max-width: 1440px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
}


.messagerie__title {
    position: relative;
    float: left;
    width: 100%;
    padding: 0 24px;
    background: white;
    box-shadow: 0 10px 16px rgba(55, 84, 170, 0.05);
}

.messagerie__title a {
    display: flex;
    align-items: center;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
}

.messagerie__title a h2,
.messagerie__title h2 {
    color: #1b1b1b;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 68px;
}

.messagerie__title a:hover h2 {
    color: #2e4770;
}

.messagerie__title a img {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    overflow: hidden;
    object-fit: cover;
    margin-right: 12px;
}

.messagerie__content {
    float: left;
    width: 100%;
    height: calc(100vh - 189px);
    padding: 24px;
    background: #fff;
    overflow-y: scroll;
}

.messagerie__send {
    position: relative;
    float: left;
    width: 100%;
    background: white;
    box-shadow: 0 -10px 16px rgba(55, 84, 170, 0.05);
    ;
    text-align: right;
    padding: 11.11px 24px;
}

.notifications__container {
    float: left;
    width: 100%;
    height: calc(100vh - 60px);
    overflow-y: scroll;
}

.notifications__container::-webkit-scrollbar-track,
.notifications__container::-webkit-scrollbar,
.messagerie__content::-webkit-scrollbar-track,
.messagerie__content::-webkit-scrollbar {
    width: 6px;
}

.notifications__container::-webkit-scrollbar-track,
.messagerie__content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    border-radius: 10px;
    width: 6px;
}

.notifications__container::-webkit-scrollbar-thumb,
.messagerie__content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.0);
    border-radius: 10px;
}

.messagerie__content,
.notifications__container {
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
    scrollbar-width: thin;
}

.notifications__container:hover::-webkit-scrollbar-thumb,
.messagerie__content:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

.notifications__container .bloc_notification {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInBottom;
    box-shadow: none;
}

@keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.my {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInRight;
}

.your {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInLeft;
}

.commune__content.main--messagerie.--noMessage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.commune__content.main--messagerie.--noMessage h2 {
    font-weight: 700;
    font-size: 28px;
    color: #1b1b1b;
}

.commune__content.main--messagerie.--noMessage p {
    font-weight: 400;
    font-size: 18px;
    color: #6d6d6d;
    margin-top: 12px;
}

.menu-profile__container {
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.menu-profile {
    padding: 6px 12px 6px 6px;
    background: #efefef;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.menu-profile img {
    width: 28px;
    height: 28px;
    object-fit: conver;
    border-radius: 24px;
    margin-right: 6px;
}

.menu-profile span {
    font-size: 14px;
    font-weight: 700;
    color: #4c6691;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-profile:hover {
    background: #dfe0e5;
}

.menu-profile:hover span {
    color: #2e4770;
}

@media screen and (max-width: 768px) {
    .menu-profile {
        display: none;
    }
}

.tooltip-content {
    width: 100%;
    padding: 12px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-size: 16px;
    color: #6d6d6d;
    line-height: 1.58;
}

.tooltip-content .button__blue {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    margin-top: 12px;
}



.cta-left-commune {
    float: left;
    width: 100%;
    color: #6d6d6d;
    background: #fff;
    padding: 12px;
    border-radius: 4px;
}

.cta-left-commune h2 {
    color: #1b1b1b;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.58;
    font-weight: 700;
}

.cta-left-commune p {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.58;
}

.cta-left-commune a {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
    background: #ef7d00;
    color: #fff;
}

.cta-left-commune a:hover {
    background: #ff9623;
}

.grid-prises {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12px;
    margin: 24px 0;
}

.grid-prises .espece-card {
    margin: 0;
}


@media screen and (min-width: 1101px) and (max-width: 1350px) {
    .grid-prises {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 991px) {
    .grid-prises {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .grid-prises {
        display: none !important;
    }
}

@media screen and (max-width: 400px) {
    #menu-toggle {
        margin-left: 0;
    }
    .list-m__list .bouton_sticky_proposer_inner a.i_proposer.button__orange.loggedIn {
        display: none;
    }
}

@media screen and (max-height: 850px) {
    .blocMeteo__indice .circle-chart {
        margin: 0;
        height: 50px;
        width: 50px;
    }
    .blocMeteo__indice p {
        font-size: 14px;
    }
    .headerSlf-commune h1 {
        margin: 0;
    }
    .headerSlf-commune .sepa {
        margin: 12px 0;
    }
    .cta-left-commune h2 {
        font-size: 16px;
        margin-bottom: 6px;
    }
    .cta-left-commune p {
        font-size: 14px;
    }
    .blocMeteo__temperature .temperature {
        font: 700 26px/1 'Open Sans';
    }
    .blocMeteo__temps img {
        width: 25px;
        height: 25px;
    }
    .blocMeteo__temps p {
        margin-top: 4px;
    }
    .blocMeteo__date .hour,
    .blocMeteo__date .day {
        font-size: 14px;
    }
    .blocMeteo__header {
        margin-bottom: 4px;
    }
}

.toast {
    text-align: left;
    padding: 21px 0;
    background-color: #fff;
    border-radius: 4px;
    width: 440px;
    max-width: calc(100% - 24px);
    position: relative;
    box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.3);
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 999999999;
    transform: translateX(-50%);
}

.toast:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.toast__icon {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    padding: 7px;
    border-radius: 50%;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.toast__svg {
    fill: #fff;
    width: 38px;
    height: auto;
}

.toast__content {
    padding-left: 70px;
    padding-right: 60px;
}

.toast__title {
    color: #333333;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
}

.toast__message {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    color: #878787;
}

.toast__close {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    cursor: pointer;
    height: 14px;
    fill: #878787;
    transform: translateY(-50%);
}

.toast--green:before {
    background-color: #20a720;
}

.toast--green .toast__icon {
    background-color: #20a720;
}

.toast--red:before {
    background-color: #e01018;
}

.toast--red .toast__icon {
    background-color: #e01018;
}

.toast.toast--red {
    background: #e01018;
}

.toast.toast--red .toast__title,
.toast.toast--red .toast__message {
    color: white;
}

.toast.toast--red .toast__close {
    fill: white;
}

.toast--red .toast__icon {
    background: white;
}

.toast__svg {
    fill: #e01018;
}

@media screen and (max-width: 450px) {
    .toast {
        top: auto;
        bottom: 12px;
    }
}

#modalPosterMessage .slf__postType.--hideModal {
    display: none;
}

#modalPosterMessage .modal-container .modal {
    width: 550px;
    max-width: calc(100% - 24px);
}

#modalPosterMessage .slf__send-container {
    display: flex;
    align-items: center;
}

#modalPosterMessage .modal-content .slf__commune {
    margin-bottom: 0;
}

#modalPosterMessage .select-communes .results {
    position: relative;
    top: 0;
}

.stats__overview.commune__section.wrapper__bloc {
    background: white;
    padding: 12px;
    box-shadow: 10px 10px 16px rgba(55, 84, 170, 0.05), -10px -10px 18px #f1f1f1;
    margin: 0 0 24px 0;
    border-radius: 4px;
    border: none;
}

.stats__overview.wrapper__bloc .bloc__headerFlex {
    padding-top: 0;
    padding-bottom: 0;
}

.stats__overview.wrapper__bloc .bloc__headerFlex h2 {
    color: #1b1b1b;
    margin-top: 0;
    font-size: 18px;
    font-weight: 700;
}

.stats__overview.commune__section.wrapper__bloc .bloc__headerFlex h2 span {
    font-weight: 700;
}

.stats__overview.commune__section.wrapper__bloc .bloc__headerFlex #sub__indice {
    font-weight: 400;
}

.stats__overview.commune__section.wrapper__bloc .survol_souligner {
    color: #2e4770;
    margin-bottom: 12px;
    display: inline-block;
}

.stats__overview.commune__section.wrapper__bloc .stats__overview--content {
    padding: 0;
}

.commune-materiel__grid {
    background: white;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.boatsBloc-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12px;
}

.cart.wrapper__bloc .cart__item.--total {
    border: none;
    background: transparent;
}

.cart.wrapper__bloc .cart__item:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.container-panierRecap {
    margin-right: auto;
    margin-left: auto;
    padding: 48px 0;
    width: 960px;
    max-width: calc(100% - 24px);
}

.container-cbEtang {
    margin-right: auto;
    margin-left: auto;
    padding: 48px 0;
    width: 480px;
    max-width: calc(100% - 24px);
}

#panierRecap .cart__item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 12px;
    margin: 12px 0;
    float: none;
}

.cart__item .dot {
    display: inline-block;
    margin-right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 9px;
    background: #efefef;
}

.cart__item .dot.dot--valide {
    background-color: #20a720;
}

#panierRecap .cart__item.--total {
    padding: 0;
    border: none;
    margin: 24px 0 0 0;
    box-shadow: none;
}

#panierRecap .cart__item.--total h3 {
    font-size: 18px;
}

#panierRecap .cart__item--desc h3 span {
    font-size: 16px;
    color: #1b1b1b;
}

#panierRecap .cart__item--desc p {
    font-size: 14px;
    color: #6d6d6d;
}

#panierRecap .cart__item--details {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 12px;
    grid-gap: 12px;
}

#panierRecap .cart__item--desc {
    width: 100%;
}

#panierRecap .cart__item--details .cart__item--option {
    display: flex;
    flex-direction: column;
}

#panierRecap .cart__item--details .cart__item--option {
    font-size: 14px;
    color: #1b1b1b;
    font-weight: 700;
}

#panierRecap .cart__item--details .cart__item--option span {
    font-weight: 400;
    font-size: 12px;
    color: #a3a3a3;
    text-transform: uppercase;
}

.panier-subtitle {
    margin-top: 24px;
}

#paiement-etang .card-logos {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#paiement-etang .card-logos img {
    max-height: 30px;
}

.actions__commandes {
    display: flex;
    align-items: center;
    position: absolute;
    top: 12px;
    right: 12px;
}

.action__commande {
    height: 26px;
    width: 26px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s all ease-in-out;
}

.action__commande:first-child {
    margin-right: 6px;
}

.action__commande.--green {
    background: #20a720;
}

.action__commande.--red {
    background: #e01018;
}

.action__commande svg {
    height: 14px;
    width: 14px;
    fill: #fff;
}

.action__commande:after {
    position: absolute;
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 30px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    transform: scale(0);
    transition: .2s all ease-in-out;
}

.action__commande.--green:after {
    border: 2px solid #20a720;
}

.action__commande.--red:after {
    border: 2px solid #e01018;
}

.action__commande:hover {
    transform: scale(.8);
}

.action__commande:hover::after {
    transform: scale(1);
}

.action__commande.--red svg {
    height: 10px;
    width: 10px;
}

#panierRecap .tabcontent .cart__item--desc h3 {
    line-height: 26px;
    max-width: calc(100% - 60px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (max-width: 1600px) {
    .boatsBloc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1300px) {
    .commune-materiel__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 960px) {
    .container-panierRecap,
    .container-cbEtang {
        padding: 24px 0;
    }
    .wrapper__bloc#panierRecap {
        padding: 12px;
    }
    #panierRecap .cart__item--details {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .commune-materiel__grid {
        display: block;
    }
    .boatsBloc-grid .boatAnnonce__pic img,
    .boatsBloc-grid .boatAnnonce__pic {
        height: 150px;
    }
    .boatsBloc-grid .boatAnnonce__detail {
        padding: 6px;
    }
    .container-panierRecap,
    .container-cbEtang {
        padding: 0;
    }
    #panierRecap .lieu .cart__item--details {
        grid-template-columns: repeat(1, 1fr);
    }
    #panierRecap .cart__item.--total h3 {
        font-size: 14px;
    }
    #panierRecap .cart__item.--total .button__green {
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
    #panierRecap .cart__item.--total {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        padding: 12px;
        border-radius: 0;
        z-index: 99999;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
    }
    .stats__overview--content .circle-chart {
        width: 70px;
        height: 70px;
    }
    .stats__overview--content .circle-chart__percent {
        font-size: 18px;
    }
    .stats__overview--content .prev__indice--phrase {
        font-size: 16px;
    }
    .stats__overview--content .prev__chart {
        height: 200px;
    }
}

.commune__detail {
    display: flex;
    align-items: baseline;
    margin: 6px 0;
}

.commune__detail img {
    height: auto;
    width: 35px;
    margin-right: 6px;
    align-self: center;
}

.commune__detail h4 {
    font-size: 24px;
    font-family: 'Open Sans', sans-serif;
    color: #2e4770;
    font-weight: 700;
}

.commune__detail h4 span {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    color: #111;
}

.commune__detail a {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    color: #2e4770;
    font-weight: 700;
    margin-left: 6px;
}

.col-300 {
    width: 300px;
}

.col-300 h2 {
    font-size: 24px;
    color: #111;
    margin-bottom: 12px;
}

.video-proof-container {
    max-width: 1170px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 12px;
    padding: 0 6px;
    width: 100%;
}

.cdp__medias .video-proof-container {
    width: 100%;
    max-width: 100%;
}

.video-proof-container .video__container-club {
    width: 100%;
    margin: 0 0 12px 0;
}

.video-proof-container .video__container-club .video__image,
.video-proof-container .video__container-club .video__big .video__image {
    height: 0;
    padding-top: 56.25%;
}

.video-proof-container .video__image .video__bg--img {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100%;
    max-height: 100%;
    max-width: none;
    transition: 1s all ease;
    top: 0;
    left: 0;
    object-fit: cover;
}

.social-proof-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 24px 0;
}

.social-proof-wrapper h2 {
    color: #1B1B1B;
    margin-bottom: 24px;
    margin-top: 36px;
    font-size: 24px;
}

.social-proof-wrapper h2:after {
    content: "";
    position: relative;
    height: 2px;
    width: 100px;
    display: block;
    text-align: center;
    margin: 18px auto;
    background: rgba(0, 0, 0, 0.1);
}

.social-proof-container {
    max-width: 1170px;
    display: flex;
    flex-direction: column;
    max-width: 300px;
}

.social-proof h2 {
    color: #1B1B1B;
    font-size: 16px;
    margin-bottom: 12px;
}

.social-proof-container .socialProof {
    border: 1px solid rgba(0, 0, 0, 0.1);
    float: left;
    width: 100%;
    /* background: #2e4770; */
    border-radius: 6px;
    padding: 10px 0;
    margin: 6px 0;
}

.social-proof-container .socialProof p {
    font-size: 12px;
}

.social-proof-container .socialProof h3 {
    font-size: 13px;
    margin-bottom: 10px;
}

.corporate-proof-container {
    max-width: 1170px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 12px;
    padding: 0 6px;
}

.corporate-proof-container img {
    width: 100%;
}

.col-300 .video__image .video__bg--img {
    position: absolute;
    width: auto;
    height: 120%;
    max-width: none;
    transition: 1s all ease;
    top: -5%;
    left: -5%;
    width: 110%;
    object-fit: cover;
}

h2.catch_popup {
    font-size: 30px;
    margin: 36px 0 12px 0;
    font-weight: 400;
}

h3.catch_popup svg {
    height: 20px;
}

.catch_popup {
    text-align: left;
    color: #111;
    font-family: 'Open Sans';
    width: 100%;
    font-weight: 700;
    margin-bottom: 6px;
}

.d__concoursList {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 12px;
}

#CtaConcours {
    border-radius: 4px;
    grid-column: span 4;
}

@media screen and (max-width: 1300px) {
    .d__concoursList {
        grid-template-columns: repeat(3, 1fr);
    }
    #CtaConcours {
        grid-column: span 3;
    }
}

.catch__popup span {
    color: #ef7d00;
}


@media screen and (max-width: 1200px) {
    .commune__detail h4 {
        font-size: 18px;
    }
    .commune__detail h4 span,
    .commune__detail a {
        font-size: 14px;
    }
    .commune__detail img {
        display: none;
    }
    .col-300 {
        width: calc((100% - 428px) / 2);
    }
    .create_acc-wrapper,
    .social-proof-wrapper {
        padding: 0 18px;
    }
}

@media screen and (max-width: 1199px) {
    .club__videos {
        padding: 0 16px;
    }
}

@media screen and (max-width: 991px) {
    .corporate-proof-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .d__concoursList {
        grid-template-columns: repeat(2, 1fr);
    }
    #CtaConcours {
        grid-column: span 2;
    }
    .video-proof-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .d__concoursList {
        padding: 20px 24px;
    }
    .catch_popup {
        font-size: 18px;
    }
    p.firstInF {
        margin-bottom: 12px;
    }
    .social-proof-container {
        display: grid;
        grid-template-columns: repeat(3, 270px);
        grid-gap: 12px;
        width: 100%;
        overflow: hidden;
        overflow-x: scroll;
        max-width: 100%;
    }
    .social-proof-container .socialProof h3 {
        font-size: 12px;
    }
    .social-proof-container .socialProof p span .fa {
        font-size: 12px;
    }
    .social-proof {
        display: none;
        width: 100%;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: 12px;
    }
    .video-proof-container {
        grid-template-columns: repeat(6, 200px);
        width: 100%;
        overflow-x: scroll;
    }
}

@media screen and (max-height: 600px) {
    .catch_popup {
        font-size: 16px;
    }
}

@media screen and (max-width: 600px) {
    .d__concoursList {
        grid-template-columns: repeat(1, 1fr);
    }
    #CtaConcours {
        grid-column: span 1;
        padding: 0;
    }
    .create_acc-container {
        flex-direction: column;
    }
    .col-300 {
        width: 100%;
    }
    .col-300 .video__container-club {
        width: 33%;
        padding: 3px;
    }
    .inscription__container {
        width: 100%;
        /*max-width:100%;*/
        max-width: 364px;
        padding: 12px;
        border-radius: 12px;
    }
    .inscription__container .bloc_register-form {
        width: 100%;
    }
    .bloc_register-form .box__inscription {
        width: 100%;
        max-width: 100%;
    }
    .create_acc-wrapper,
    .social-proof-wrapper {
        padding: 0 6px;
    }
    .mail__left-phone {
        display: none;
    }
    .col-300 h2 {
        font-size: 16px;
    }
    .social-proof-wrapper h2 {
        font-size: 16px;
        margin-top: 12px;
        margin-bottom: 0;
    }
    .mail__left {
        margin: 0;
    }
    .social-proof-wrapper {
        margin: 12px 0;
    }
    .social-proof-container {
        flex-direction: column;
    }
    .social-proof-container .socialProof {
        margin: 6px 0;
    }
    .col-300 .video__container-club .video__image,
    .col-300 .video__container-club .video__big .video__image {
        height: 100px;
    }
    .col-300 .video__image img.video__image--play {
        height: 30px;
        width: 30px;
        bottom: 10px;
        left: 10px;
    }
    .corporate-proof-container {
        grid-template-columns: repeat(4, 1fr);
    }
    .inscription__form {
        min-width: auto;
    }
    .title__service {
        font-size: 16px;
        padding: 12px;
    }
    .title__service br {
        display: none;
    }
    .create_acc-wrapper {
        margin-top: 12px;
    }
}

.patch-pic {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patch-pic img {
    width: 600px;
    max-width: 100%;
}

@media screen and (max-width: 625px) {
    .patch-pic img {
        width: 300px;
        max-width: 100%;
        max-height: 60vh;
        object-fit: contain;
    }
}


/* cacher ancien menu sur mobile */

@media screen and (max-width: 1000px) {
    .hideOnMobile {
        display: none;
        visibility: hidden;
    }
}

.banner__etang {
    width: 100%;
}

.banner__etang img {
    display: block;
    float: left;
    width: 100%;
}


/* panier */

.wrapper.wrapper-panier#eshop {
    background: white;
    padding: 32px 32px 64px 32px;
}

#eshop .grid-panier {
    display: grid;
    grid-template-columns: 1fr 270px;
    grid-gap: 24px;
    max-width: 1200px;
}

#eshop .grid-panier .panier-recap h2 {
    font: 700 32px/1.2 'Open Sans', sans-serif;
    color: #1b1b1b;
    margin: 32px 0 16px 0;
}

#eshop .grid-panier .panier-recap .panier-section:first-child h2 {
    margin-top: 0;
}

#eshop .grid-panier .product__buy {
    grid-column: auto;
    position: sticky;
    top: 84px;
    height: fit-content;
    height: -moz-fit-content;
}

#eshop .grid-panier .product__buy h2 {
    font: 700 18px/1.2 'Open Sans', sans-serif;
    color: #1b1b1b;
    margin-bottom: 12px;
}

#eshop .grid-panier .product__buy .inscription fieldset {
    margin: 8px 0 0 0;
}

#eshop .grid-panier .product__buy .inscription fieldset .process__formItem {
    margin-bottom: 12px;
    position: relative;
}

#eshop .process__formItem #cvc {
    width: 100%;
}

#cvcIcon {
    position: absolute;
    height: 20px;
    width: auto;
    right: 6px;
    top: calc(50% - 10px);
    user-select: none;
    pointer-events: none;
}

#eshop .panier-recap-row {
    padding: 8px 0;
    align-items: flex-end;
}

#eshop .panier-recap-row .totalProduits-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#eshop #TotalPort.free {
    color: #20a720;
    text-transform: uppercase
}

#eshop .panier-recap-row:last-child h4 {
    color: #6d6d6d;
}

#eshop .panier-recap-row:last-child p {
    color: #1b1b1b;
}

#eshop .button__paiement {
    padding: 0 12px;
    background: #20a720;
    font: 700 14px/42px 'Open Sans', sans-serif;
    color: white;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
    transition: .15s all ease;
    margin-bottom: 0;
}

#eshop .button__paiement:hover {
    background: #1f8b1f;
}

#eshop .grid-adresse {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
}

#eshop .grid-adresse input.--full {
    grid-column: span 2;
    margin-bottom: 0;
}

#eshop .grid-adresse input.--half {
    grid-column: span 1;
    margin-bottom: 0;
}

#eshop .mg-t {
    float: left;
    width: 100%;
    margin-top: 12px;
}

#eshop .checkbox__collab .checkbox-group {
    margin: 0;
}

#eshop .checkbox__collab input[type=checkbox]+label>span {
    height: 16px;
    width: 16px;
    min-width: 16px;
}

#eshop .checkbox__collab input[type=checkbox]:checked+label>span:before {
    top: calc(50% - 3px);
    left: 2px;
}

#eshop .panier-item-col.--panierItemPrix,
#eshop .panier-item-col.--panieritemTotal {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@supports not (grid-gap: 12px) {
    #eshop .grid-panier .product__buy {
        margin-left: 24px;
    }
    #eshop .grid-adresse input.--full,
    #eshop .grid-adresse input.--half {
        margin-bottom: 12px;
    }
    #eshop .grid-adresse input.--half {
        grid-column: span 2;
    }
}

@supports not (display: grid) {
    #eshop .grid-adresse input.--full,
    #eshop .grid-adresse input.--half {
        width: 100%;
        margin-bottom: 12px;
    }
}

#eshop .panier_cards {
    margin-top: 12px;
}

.wrapper.wrapper-panier#eshop {
    background: white;
}

#TotalProduits {
    display: inline;
}

#TotalProduits.with-reduction {
    color: #ef7d00;
    font-size: 16px;
}

@media screen and (max-width: 991px) {
    .wrapper.wrapper-panier#eshop {
        padding: 16px 16px 48px 16px;
    }
    #eshop .grid-panier .panier-recap h2 {
        font-size: 18px;
        margin: 24px 0 12px 0;
    }
    #eshop .grid-panier {
        grid-gap: 12px;
    }
}

@media screen and (max-width: 768px) {
    #eshop .grid-panier {
        grid-template-columns: 1fr;
    }
    #eshop .grid-panier .product__buy h2 {
        margin-top: 24px;
    }
    @supports not (grid-gap: 12px) {
        #eshop .grid-panier .product__buy {
            margin-left: 0;
        }
    }
}


/* */

.wrapper.wrapper-panier {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.grid-panier {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 24px;
    max-width: 1140px;
}

.grid-panier .panier-left {
    grid-column: span 9;
    background: white;
    padding: 24px;
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
    border-radius: 4px;
}

.grid-panier .pub-tac {
    background: white;
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
    border-radius: 8px;
    float: left;
    width: 100%;
    margin-bottom: 16px;
    overflow: hidden;
}

.grid-panier .pub-tac img {
    width: 100%;
    display: block;
}

.grid-panier .panier-right {
    grid-column: span 3;
    position: sticky;
    top: 70px;
    background: white;
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
    border-radius: 4px;
    padding: 24px;
    height: fit-content;
    height: -moz-fit-content;
}

.grid-panier .panier-right.--tac {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.grid-panier .panier-right.--tac .panier-right-bloc {
    float: left;
    border-radius: 8px;
    ;
    background: white;
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
    border: 1px solid #edf4ff;
    padding: 24px;
    width: 100%;
}

.panier-right-item {
    float: left;
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.panier-right-item:last-child {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.panier-right-item svg {
    height: 50px;
    width: auto;
    margin-bottom: 12px;
}

.panier-right-item svg * {
    fill: #20A720;
}

.panier-right-item h2 {
    font: 700 14px/1.2 'Open Sans', sans-serif;
    color: #1b1b1b;
    text-align: center;
}

.panier-right.--tac .panier-right-item {
    flex-direction: row;
}

.panier-right.--tac .panier-right-item svg {
    width: 32px;
    min-width: 32px;
    height: auto;
    margin-bottom: 0;
}

.panier-right.--tac .panier-right-item svg * {
    fill: #29c467;
}

.panier-right.--tac .panier-right-item h2 {
    text-align: left;
    margin-left: 8px;
}

.panier-section {
    float: left;
    width: 100%;
    margin-bottom: 12px;
}

.panier-section:last-child {
    margin-bottom: 0;
}

.panier-section .panier-subtitle {
    float: left;
    width: 100%;
    background: #f7f7f7;
    border-radius: 3px;
    padding: 12px;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panier-section .panier-subtitle .fa {
    font-size: 18px;
    color: #333;
}

.panier-section .panier-subtitle h2 {
    font-family: 'Open Sans', sans-serif;
    color: #1b1b1b;
    font-size: 20px;
    margin-bottom: 0;
}

.panier-content {
    float: left;
    width: 100%;
}

.panier-item {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.panier-item-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.panier-item-col.--panierItemImg {
    grid-column: span 2;
}

.panier-item-col.--panierItemName {
    grid-column: span 4;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 8px;
}

.panier-item-col.--panierItemName h3 {
    font-family: 'Open Sans', sans-serif;
    color: #1b1b1b;
    font-size: 14px;
    font-weight: 700;
}

.panier-item-col.--panierItemName p {
    font-family: 'Lato', sans-serif;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 400;
}

.panier-item-col.--panierItemPrix,
.panier-item-col.--panierItemQt,
.panier-item-col.--panieritemTotal {
    grid-column: span 2;
}

.panier-item-col.--panieritemTotal {
    justify-content: flex-end;
}

.panier-item-col.--panierItemImg img {
    display: block;
    width: 100%;
    cursor: pointer;
}

.panier-item-col.--panierItemQt input {
    max-width: 80%;
    margin: 0;
}

.panier-item.--titles {
    padding: 12px;
    font-family: 'Open Sans', sans-serif;
    color: #1b1b1b;
    font-size: 12px;
    font-weight: 600;
    gap: 24px;
}

.panier-item.--titles .panier-item-col.--panierItemName {
    grid-column: span 6;
}

.panier-item-col.--panierItemPrix,
.panier-item-col.--panieritemTotal {
    grid-column: span 2;
}

.panier-item-col.--panierItemPrix span,
.panier-item-col.--panieritemTotal span {
    font-family: 'Open Sans', sans-serif;
    color: #2e4770;
    font-size: 14px;
    font-weight: 700;
}

.--panierItemPrix span.crossedout,
.--panieritemTotal span.crossedTotal,
#totalCrossedOut {
    font: 400 14px/1.5 'Open Sans', sans-serif;
    color: #6d6d6d;
    text-decoration: line-through;
}

#totalCrossedOut {
    line-height: 1.2;
}

.panier-item.--item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    padding: 12px;
    gap: 24px;
}

.panier-item .item-variant {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    grid-column: span 12;
}

.livraison {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    padding: 12px;
    border-radius: 0;
    cursor: pointer;
}

.livraison:nth-last-child(2) {
    /* border-top: none; */
    border-bottom: none;
}

.livraison:first-child {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-bottom: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1)
}

.livraison:last-child {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.livraison-radio {
    grid-column: span 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panierSimplifie .livraison-radio input {
    margin: 0;
}

.livraison-livreur {
    grid-column: span 5;
    display: flex;
    align-items: center;
}

.livraison-livreur img {
    width: 70px;
}

.livraison-livreur h3 {
    font: 700 14px/1.2 'Open Sans', sans-serif;
    color: #6d6d6d;
    margin-left: 12px;
}

.livraison-livreur p {
    font-family: 'Lato', sans-serif;
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 400;
    margin-left: 12px;
}

.livraison-date {
    grid-column: span 4;
    display: flex;
    align-items: center;
}

.livraison-prix {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.livraison-date p,
.livraison-prix p {
    font: 400 12px/1.2 'Open Sans', sans-serif;
}

.livraison-date p span,
.livraison-prix p span {
    font-weight: 700;
}

.livraison-prix p span {
    font-size: 14px;
    color: #2e4770;
}

.livraison-recPoint {
    margin-top: 12px;
    grid-column: span 12;
    display: none;
}

.livraison-recPoint.active {
    display: block;
}

.panierSimplifie .livraison-recPoint input {
    margin: 0;
    height: 42px;
}

.actualiserlivraison {
    display: block;
    float: left;
    border-radius: 3px;
    background: #2e4770;
    color: white;
    padding: 0 12px;
    font: 400 14px/42px 'Open Sans', sans-serif;
    margin-left: 12px;
    cursor: pointer;
}

.point-livraison-container {
    padding: 12px;
    height: 300px;
    overflow-y: scroll;
    margin-top: 12px;
    float: left;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.point-livraison {
    float: left;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.point-livraison:last-child {
    margin-bottom: 0;
    border: none;
}

.point-livraison-nom {
    font: 700 14px/1.2 'Open Sans', sans-serif;
    margin: 0;
    color: #1b1b1b;
}

.point-livraison-horaires h3 {
    font: 700 14px/1.2 'Open Sans', sans-serif;
    margin: 0;
    color: #333;
}

.buttons_choix,
.point-livraison-horaires,
.point-livraison-adresse,
.point-livraison-villecp,
.point-livraison-nom {
    display: block;
    float: left;
    width: 100%;
}

.buttons_choix {
    margin-top: 12px;
}

.buttons_choix .button__blue {
    display: block;
    float: left;
    margin-right: 12px;
}

.buttons_choix .button__blue.--outline {
    background: transparent;
    border: 2px solid #2e4770;
    color: #2e4770;
}

.point-livraison-choisi {
    float: left;
    width: 100%;
    display: block;
    border-radius: 3px;
    background: #eff8ed;
    padding: 12px;
    margin-top: 12px;
}

.point-livraison-choisi h2 {
    font: 700 12px/1.2 'Open Sans', sans-serif;
    margin-bottom: 12px;
    color: #20a720;
}

.point-livraison-choisi h3 {
    font: 700 14px/1.2 'Open Sans', sans-serif;
    margin: 0;
    color: #20a720;
}

.point-livraison-choisi p {
    font: 400 14px/1.2 'Open Sans', sans-serif;
    margin: 0;
    color: #20a720;
}

.panierSimplifie input {
    margin-bottom: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-width: 0;
}

.panierSimplifie input:last-child {
    margin-bottom: 0;
}

.panierSimplifie .groupe_input {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
}

.panierSimplifie .button__paiement {
    padding: 0 12px;
    background: #20a720;
    font: 700 14px/42px 'Open Sans', sans-serif;
    color: white;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
    transition: .15s all ease;
    margin-bottom: 0;
}

.button__paiement:hover {
    background: #1f8b1f;
}

.livraison-france {
    float: left;
    margin-top: 12px;
    font: 700 12px/1.2 'Open Sans', sans-serif;
    display: block;
}

.panier-recap-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.panier-recap-row h4 {
    font: 400 14px/1.2 'Open Sans';
    color: #6d6d6d;
}

.panier-recap-row p {
    font: 700 14px/1.2 'Open Sans';
    color: #1b1b1b;
}

.panier-recap-row:last-child h4,
.panier-recap-row:last-child p {
    color: #20a720;
}

.panier-recap-row:last-child p {
    font-size: 16px;
}

.panierSimplifie .inscription fieldset {
    margin: 0;
}

.panierSimplifie .inscription fieldset .process__formItem {
    margin-bottom: 12px;
}

.panierSimplifie .inscription fieldset .process__formItem #cvc {
    width: 100%;
}

.panier-item .tag.stock {
    color: #e01018;
    font: 700 13px/1.2 'Open Sans', sans-serif;
    margin-top: 6px;
}

.secure-payment {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 0 0;
}

.secure-payment svg {
    margin-right: 6px;
    height: 18px;
    width: auto;
}

.secure-payment span {
    color: #1b1b1b;
    font: 400 14px/1.2 'Open Sans', sans-serif;
}

@media screen and (max-width: 768px) {
    .grid-panier .panier-left {
        grid-column: span 12;
    }
    .livraison-livreur {
        grid-column: span 11;
    }
    .livraison-date,
    .livraison-prix {
        margin-top: 12px;
    }
    .livraison-date {
        grid-column: span 8;
    }
    .livraison-prix {
        grid-column: span 4;
    }
    .grid-panier .panier-right {
        grid-column: span 12;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 12px;
    }
    .panier-right-item {
        border: none;
        padding: 0;
        margin: 0;
    }
}

.hidden-variants {
    display: none;
}

.hidden-variants.active {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
    grid-column: span 12;
    gap: 24px;
}

.more-variants {
    cursor: pointer;
    float: left;
    display: block;
    margin-top: 12px;
    width: 100%;
    padding: 12px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    font: 700 14px/1.2 'Open sans', sans-serif;
    color: #2e4770;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.more-variants:hover {
    background: rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 600px) {
    .wrapper.wrapper-panier,
    .grid-panier .panier-left,
    .grid-panier .panier-right {
        padding: 12px;
    }
    .panier-section .panier-subtitle h2 {
        font-size: 16px;
    }
    .panier-item-col.--panierItemImg {
        grid-column: span 3;
    }
    .panier-item-col.--panierItemName {
        grid-column: span 9;
    }
    .panier-item.--titles .panier-item-col.--panierItemName,
    .panier-item.--titles .panier-item-col.--panierItemImg {
        display: none;
    }
    .panier-item-col.--panierItemPrix,
    .panier-item-col.--panierItemQt,
    .panier-item-col.--panieritemTotal {
        grid-column: span 4;
        justify-content: center;
    }
    .panierSimplifie .livraison-recPoint input {
        width: 100%;
        margin-bottom: 12px;
    }
    .actualiserlivraison {
        width: 100%;
        margin: 0;
        text-align: center;
    }
}

@media screen and (max-width: 550px) {
    .grid-panier .panier-right {
        grid-template-columns: repeat(2, 1fr)
    }
    .panier-right-item {
        border: none;
        padding: 0;
        margin: 0;
    }
    .panier-right-item svg {
        height: 50px;
    }
}

#widget-eshop {
    overflow: hidden;
    border-bottom: none;
    padding: 0;
}

#widget-eshop .ventes__item a .tag.red {
    left: auto;
    right: 16px;
}

.ventes__item.swiper-slide {
    max-width: 227.5px;
}

.ventes__item .promo {
    background: #ef7d00;
    color: white;
    font-size: 14px;
    padding: 4px 40px;
    position: absolute;
    top: 16px;
    left: -40px;
    z-index: 2;
    transform: rotate(-45deg);
}

#CommuneFull .commune__section.wrapper__bloc#widget-eshop {
    padding: 0;
}

#widget-eshop .bloc__headerFlex {
    padding: 12px 12px 0 12px;
    justify-content: space-between;
    align-items: flex-start;
}

#widget-eshop .bloc__headerFlex .link__blue {
    font: 700 14px/24px 'Open Sans';
    color: #2e4770;
    min-width: 130px;
    text-align: right;
}

.widget-reassur {
    background: #ef7d00;
    padding: 12px;
    color: white;
    text-align: center;
    font: 700 16px/1.2 'Open Sans';
}

#widget-eshop .bloc__headerFlex .link__blue:hover {
    color: #355282;
}

#widget-eshop .reassurance {
    margin: 0 0 24px 0;
}

#widget-eshop .grid-produits {
    padding: 24px 12px;
    position: relative;
}

#widget-eshop .widget-produit {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: center;
    padding: 12px 6px;
    border-radius: 4px;
    transition: .3s all ease;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#widget-eshop .grid-produits .ventes__item-title h2 {
    font-size: 14px;
    margin: 0;
    line-height: 1.25;
}

#widget-eshop .grid-produits .ventes__item-price .crossedout {
    font-size: 12px;
}

#widget-eshop .grid-produits .ventes__item-price .currentPrice {
    font-size: 14px;
}

#widget-eshop .d__link {
    margin-top: 0;
}

#widget-eshop .widget-produit:hover {
    transform: scale(1.02);
    z-index: 2;
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
}

#widget-eshop .widget-produit h3 {
    font-weight: 700;
    font-size: 14px;
    color: #111;
    text-align: center;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

#widget-eshop .widget-produit p {
    color: #6d6d6d;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 12px;
    text-align: center;
}

#widget-eshop .widget-produit span {
    text-align: center;
    color: #20a720;
    font-weight: 700;
    font-size: 16px;
}

#widget-eshop .widget-produit img {
    width: 130px;
    max-width: 100%;
    height: 90px;
    object-fit: contain;
    margin-bottom: 12px;
}

#widget-eshop .button__orange {
    margin: 0;
}

#widget-eshop .swiper-button-next,
#widget-eshop .swiper-button-prev {
    background: #111;
    height: 36px;
    width: 36px;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0 !important;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    box-shadow: 10px 10px 16px rgb(55 84 170 / 5%), -10px -10px 18px #f1f1f1;
}

#widget-eshop .swiper-button-next:after {
    content: "\f105";
    font-family: 'fontAwesome';
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

#widget-eshop .swiper-button-prev:after {
    content: "\f104";
    font-family: 'fontAwesome';
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

#widget-eshop:hover .swiper-button-next,
#widget-eshop:hover .swiper-button-prev {
    opacity: 1 !important;
}

#widget-eshop:hover .swiper-button-next.swiper-button-disabled,
#widget-eshop:hover .swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important;
}

@media screen and (max-width: 600px) {
    #widget-eshop .bloc__headerFlex #sub__indice {
        display: block;
    }
    .ventes__item .promo {
        font-size: 12px;
        top: 14px;
    }
    #widget-eshop .ventes__item a .tag.red {
        left: auto;
        right: 8px;
        top: 8px;
    }
}

@media screen and (max-width: 550px) {
    #widget-eshop .bloc__headerFlex {
        flex-direction: column;
    }
    #widget-eshop .bloc__headerFlex .link__blue {
        width: auto;
        text-align: left;
        min-width: none;
    }
    .widget-reassur {
        font-size: 14px;
    }
}


/* popup Lowrance */

#popupOnScroll {
    background: rgba(0, 0, 0, 0.7);
}

#popupOnScroll.scrollPopup__mail--container.modal-active {
    border-radius: 0;
}

#popupOnScroll img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    #popupOnScroll.scrollPopup__mail--container.modal-active {
        position: fixed;
        height: 100%;
    }
}


/* eshop */

.ventes__wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.ventes__container {
    width: 1200px;
    max-width: calc(100% - 32px);
}

.ventes__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 75px 0;
    background: url('/static/photo_site/ventes__header2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
}

.ventes__header h1 {
    font: 700 48px/1.2 'Open Sans';
    margin: 0 0 16px 0;
    color: white;
}

.ventes__header h2 {
    font: 400 18px/1.2 'Open Sans';
    margin: 0;
    color: white;
}

.ventes__nav {
    height: auto;
    float: left;
    width: 100%;
    box-shadow: 0px 0 5px 0px rgba(0, 0, 0, 0.05), 0px 16px 35px 0px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 60px;
    background: white;
    z-index: 9999;
    display: flex;
    justify-content: center;
}

.ventes__links {
    float: left;
    border-bottom: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    max-width: calc(100% - 32px);
}

.ventes__link {
    display: block;
    float: left;
    margin: 0;
    font: 700 16px 'Open Sans';
    list-style-type: none;
}

.ventes__link a {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    line-height: 40px;
    color: #6d6d6d;
    text-decoration: none;
    border-bottom: 4px solid transparent;
    border-radius: 6px;
    padding: 0 12px;
    margin: 8px 8px 9px 0;
    transition: .15s all ease-in-out;
    text-decoration: none;
}

.ventes__link a:hover {
    color: #4c6691;
    background: #efefef;
}

.ventes__link a.active {
    color: #2e4770;
    border-bottom: 3px solid #2e4770;
    border-radius: 0;
    margin-bottom: 0;
    padding-bottom: 9px;
}

.ventes__link a.active {
    color: #4c6691;
    background: transparent;
}

.ventes__link--panier {
    height: 100%;
    list-style-type: none;
}

.ventes__link--panier a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    height: 100%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    font: 700 16px 'Open Sans';
    transition: .15s eall ease;
    width: max-content;
}

.ventes__link--panier a:hover {
    background: #f7f7f7;
    color: #1b1b1b;
}

.ventes__link--panier a:hover .ventes__link--panier-cart svg path {
    fill: #1b1b1b;
}

.ventes__link--panier-cart {
    position: relative;
}

.ventes__link--panier-cart svg {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.ventes__link--panier-cart svg path {
    fill: #6d6d6d;
    transition: .15s all ease;
}

.ventes__link--panier-cart .ventes__panier-nb {
    background: #ef7d00;
    height: 20px;
    width: 20px;
    border-radius: 20px;
    color: white;
    font-weight: 400;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -3px;
    right: 3px;
}

.ventes__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
    padding: 64px 0;
}

.ventes__item a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 16px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    transition: 0.15s all ease-in-out;
    overflow: hidden;
}

.ventes__item a .tag.red {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: #e01018;
    color: white;
    border-radius: 4px;
    font: 400 14px/1.2 'Open Sans', sans-serif;
    padding: 4px 8px;
    display: inline-block;
    letter-spacing: 0.2px;
}

.ventes__item-header {
    width: 100%;
}

.ventes__item-aspect-ratio {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 100%;
    margin-bottom: 16px;
}

.ventes__item-aspect-ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .3s all ease-in-out;
    border-radius: 4px;
}

.ventes__item-title {
    width: 100%;
    text-align: left;
}

.ventes__item-title img {
    width: 70px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.ventes__item-title span {
    font: 400 12px/1.5 'Open Sans', sans-serif;
    text-transform: uppercase;
    color: #6d6d6d;
}

.ventes__item-title h2 {
    font: 700 18px/1.5 'Open Sans', sans-serif;
    letter-spacing: 0.5px;
    color: #1b1b1b;
    text-align: left;
}

.ventes__item-price {
    width: 100%;
    margin-bottom: 8px;
    text-align: left;
}

.ventes__item-price .crossedout {
    font: 400 14px/1.5 'Open Sans', sans-serif;
    color: #6d6d6d;
    text-decoration: line-through;
}

.ventes__item-price .currentPrice {
    font: 700 16px/1.5 'Open Sans', sans-serif;
    color: #20A720;
}

.ventes__item p {
    font: 400 16px/1.7 'Open Sans', sans-serif;
    color: #6d6d6d;
    margin-bottom: 16px;
}

.ventes__item .flex {
    display: flex;
}

.ventes__item .space-between {
    justify-content: space-between;
}

.ventes__item-variants {
    font: 400 12px/1.5 'Open Sans', sans-serif;
    color: #6d6d6d;
}

.grid-product-head .stock,
.ventes__item .stock {
    font: 400 12px/1.5 'Open Sans', sans-serif;
    text-transform: uppercase;
    color: #6d6d6d;
    display: flex;
    align-items: center;
}

.grid-product-head .stock svg,
.ventes__item .stock svg {
    margin-right: 4px;
    width: 18px;
    height: 18px;
}

.grid-product-head .stock.stock--y,
.ventes__item .stock.stock--y {
    color: #20A720;
}

.grid-product-head .stock.stock--y svg path,
.ventes__item .stock.stock--y svg path {
    stroke: #20A720;
}

.grid-product-head .stock.stock--n,
.ventes__item .stock.stock--n {
    color: #e01018;
}

.grid-product-head .stock.stock--n svg path,
.ventes__item .stock.stock--n svg path {
    fill: #e01018;
}

.grid-product-head .stock {
    margin-top: 4px;
}

.ventes__item a:hover {
    box-shadow: 0px 0 5px 0px rgba(0, 0, 0, 0.05), 0px 16px 35px 0px rgba(0, 0, 0, 0.03);
    transform: scale(1.02);
}

.ventes__item a:hover .ventes__item-title h2 {
    color: #2e4770;
}

.ventes__item a:hover .ventes__item-aspect-ratio img {
    -webkit-transform: scale(1.08);
    /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
    -moz-transform: scale(1.08);
    /* Fx 3.5-15 */
    -ms-transform: scale(1.08);
    /* IE 9 */
    -o-transform: scale(1.08);
    /* Op 10.5-12 */
    transform: scale(1.08);
    /* Fx 16+, IE 10+ */
}


/* product page */

.ventes__wrapper.--product {
    background: white;
}

.products__suggestions {
    background: #f7f7f7;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

.products__suggestions h2 {
    font: 700 18px/1.2 'Open Sans', sans-serif;
    color: #1B1B1B;
    margin-bottom: 16px;
}

.products__suggestions .ventes__container .ventes__item h2 {
    margin-bottom: 0;
}

.products__suggestions .ventes__container {
    width: 1200px;
}

.products__suggestions .ventes__grid {
    padding: 0;
    grid-template-columns: repeat(4, 1fr);
}

.grid-product-head {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 32px;
    padding: 64px 0;
}

.grid-product-head .product-img {
    width: max-content;
    max-width: 100%;
    grid-column: span 3;
    /* si sticky */
    position: sticky;
    top: 120px;
    width: 100%;
    object-fit: contain;
    max-height: 100%;
    border-radius: 4px;
}

.product__info {
    grid-column: span 3;
}

.product__info-marque {
    font: 400 18px/1.2 'Open Sans', sans-serif;
    color: #6d6d6d;
    text-transform: uppercase;
}

.product__info-marque img {
    height: 50px;
    width: 100px;
    object-fit: contain;
    display: block;
    object-position: left;
}

.product__info-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.product__info-header h1 {
    font: 700 32px/1.2 'Open Sans', sans-serif;
    color: #1b1b1b;
}

.product__info-header .crossedout {
    font-size: 18px;
    line-height: 32px;
    margin: 0 8px;
}

.product__info-header .currentPrice {
    font-size: 24px;
    line-height: 32px;
}

.product__info-header .reductionPercent {
    font-size: 24px;
    font-weight: 700;
    color: #e01018;
    line-height: 32px;
}

.product__info-header p {
    font: 400 16px/1.58 'Open Sans', sans-serif;
    color: #6d6d6d;
    margin-bottom: 16px;
}

.product__info-header p b {
    color: #1b1b1b;
}

.product__info-header a {
    display: inline-block;
    color: #2e4770;
    font: 400 14px/1.58 'Open Sans', sans-serif;
    margin-bottom: 16px;
}

.product__info-header a:hover {
    text-decoration: underline;
}

.product__form {
    margin-top: 16px;
}

.product__form-title {
    display: block;
    font: 700 16px/1.2 'Open Sans', sans-serif;
    color: #1b1b1b;
    margin-bottom: 8px;
}

.product__variants {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.product__variant {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 8px;
    font: 700 14px/1.2 'Open Sans', sans-serif;
    color: #1b1b1b;
    user-select: none;
    cursor: pointer;
    margin: 0 8px 8px 0;
    transition: .15s all ease;
}

.product__variant img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.product__variant::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    opacity: 0;
    transition: .15s all ease;
}

.product__variant:hover::after {
    opacity: 1;
    box-shadow: 0px 0 5px 0px rgba(0, 0, 0, 0.05), 0px 16px 35px 0px rgba(0, 0, 0, 0.03);
}

.product__variant.active {
    border-color: #2e4770;
    box-shadow: 0px 0 5px 0px rgba(0, 0, 0, 0.05), 0px 16px 35px 0px rgba(0, 0, 0, 0.03);
}

.product__variant.active:hover {
    cursor: default;
}

.product__variant.active:hover::after {
    opacity: 0;
}

.product__form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    border: 0 !important;
    background: #fff;
    background-image: none;
}

.product__form select::-ms-expand {
    display: none;
}

.product__form .select-product {
    position: relative;
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #fff;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 4px;
}

.product__form select {
    flex: 1;
    padding: 0 .5em;
    color: #1b1b1b;
    line-height: 40px;
    cursor: pointer;
}

.product__form .select-product .select-arrow {
    position: absolute;
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    background: #f7f7f7;
    cursor: pointer;
    pointer-events: none;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
}

.product__form .select-product:hover .select-arrow {
    background: #ececec;
}

.product__addToCart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #ef7d00;
    color: #fff;
    border-radius: 6px;
    outline: none;
    border: none;
    font: 700 14px/1.2 'Open Sans', sans-serif;
    letter-spacing: .5px;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
    margin-top: 16px;
}

.product__addToCart svg {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    transition: transform 0.15s ease, opacity 0.15s ease;
    will-change: transform, opacity;
}

.product__addToCart:hover {
    box-shadow: 0px 0 5px 0px rgb(0 0 0 / 15%), 0px 16px 35px 0px rgb(0 0 0 / 10%);
}

.product__addToCart:hover svg {
    transform: rotate(-15deg) scale(1.1);
}

.ventes__item .product__addToCart {
    padding: 8px;
    font-weight: 400;
}

.reassurance {
    float: left;
    width: 100%;
    margin: 32px 0 0 0;
}

.reassur-item {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 8px 0;
}

.reassur-item:first-child {
    margin-top: 0;
}

.reassur-item:last-child {
    margin-bottom: 0;
}

.reassur-item h3 {
    font: 400 14px/1.2 'Open Sans', sans-serif;
    color: #6d6d6d;
    margin-left: 8px;
}

.reassur-item h3 span {
    color: #20a720;
    font-weight: 700;
}

.reassur-item svg {
    width: 14px;
    height: 14px;
}

.reassur-item svg * {
    fill: #20a720;
}

.ventes__container.--product {
    width: 1200px;
    margin-bottom: 80px;
}

.grid-desc {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 32px;
}

.grid-desc h2 {
    font: 700 18px/1.2 'Open Sans', sans-serif;
    color: #1B1B1B;
    margin-bottom: 16px;
}

.grid-desc p {
    font: 400 16px/1.58 'Open Sans', sans-serif;
    color: #6d6d6d;
}

.product__video {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 64px;
}

.product__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

#overlayAddCart {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    z-index: 99999;
    inset: 0px;
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: .2s fadeIn forwards ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#modalAddCart {
    width: 570px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    z-index: 11000;
    background: white;
    padding: 24px;
    box-shadow: 0px 0 5px 0px rgb(0 0 0 / 5%), 0px 16px 35px 0px rgb(0 0 0 / 3%);
    border-radius: 6px;
    animation: .8s bounceIn forwards ease-in-out;
}

@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.05, 1.05, 1.05);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

#modalAddCart h4 {
    font: 700 20px/1.2 'Open Sans', sans-serif;
    color: #20A720;
}

#modalAddCart .panier-item {
    margin: 24px 0;
    min-height: inherit;
}

#modalAddCart .panier-item-col.--panierItemImg {
    grid-column: span 3;
}

#modalAddCart .panier-item-col.--panierItemImg img {
    max-width: 100px;
    cursor: default;
    border-radius: 2px;
}

#modalAddCart .panier-item-col.--panierItemName {
    grid-column: span 9;
}

#modalAddCart .button__outline,
#modalAddCart .button__orange {
    text-align: center;
    width: 100%;
    font: 400 16px/1.2 'Open Sans', sans-serif;
    margin: 0;
}

#modalAddCart button:focus {
    outline: none;
}

#modalAddCart .btn_close {
    border: none;
    top: 12px;
    right: 12px;
}

#modalAddCart .btn_close:focus {
    border: none;
    outline: none;
}

.addToCart-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.zoomWindow {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}


/* Nouvelle version produits  */

.grid-product-head {
    padding: 64px 0 128px;
}

.product__buy {
    height: fit-content;
    grid-column: span 2;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.product__buy .currentPrice {
    font-size: 22px;
}

.product__buy .reductionPercent {
    font-size: 22px;
    font-weight: 700;
    color: #e01018;
    line-height: 32px;
    display: block;
}

.product__buy .ventes__item-price .crossedout {
    font-size: 16px;
    margin-left: 8px;
}

.product__info-header h1 {
    margin-bottom: 16px;
}

@media screen and (max-width: 1600px) {
    .ventes__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1100px) {
    .ventes__grid,
    .products__suggestions .ventes__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .ventes__item-title h2 {
        font-size: 16px;
    }
    .ventes__item p {
        font-size: 14px;
    }
    .products__suggestions .ventes__grid .ventes__item:nth-child(4) {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .ventes__grid,
    .products__suggestions {
        padding: 32px 0;
    }
    .product__info-header h1 {
        font-size: 24px;
    }
    .product__info-marque {
        font-size: 16px;
    }
    .product__info-header .crossedout {
        font-size: 16px;
    }
    .product__info-header .currentPrice,
    .product__info-header .reductionPercent {
        font-size: 18px;
    }
    /* Nouvelle version produits */
    .grid-product-head .product-img {
        grid-column: span 2;
    }
    .product__buy {
        grid-column: span 3;
    }
}

@media screen and (max-width: 768px) {
    .grid-product-head {
        padding: 32px 0;
    }
    .ventes__grid,
    .products__suggestions .ventes__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .products__suggestions .ventes__grid {
        padding: 0;
    }
    .products__suggestions .ventes__grid .ventes__item:nth-child(4) {
        display: initial;
    }
    .grid-desc {
        grid-template-columns: repeat(1, 1fr);
    }
    .product__info,
    .grid-product-head .product-img,
    .product__buy {
        grid-column: span 8;
    }
    .product__buy {
        padding: 0;
        border: none;
    }
    .product__buy .reassurance {
        margin-top: 16px;
    }
    .product__variants {
        margin-bottom: 0;
    }
    /* Nouvelle version produit */
    .product__info-marque img {
        height: 20px;
        width: 58px;
    }
    .product__info-header h1 {
        font-size: 20px;
        margin-bottom: 0;
    }
    .ventes__item-price.show-on-mobile {
        padding: 16px 0;
        margin: 16px 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .ventes__item-price.show-on-mobile .crossedout,
    .ventes__item-price.show-on-mobile .currentPrice {
        line-height: 1;
    }
    .ventes__item-price.show-on-mobile .reductionPercent {
        font-size: 22px;
        font-weight: 700;
        color: #e01018;
        line-height: 1;
        display: block;
        margin-top: 8px;
    }
    .grid-product-head .product-img {
        position: relative;
        top: auto;
    }
}

@media screen and (max-width: 600px) {
    .ventes__links-items {
        overflow-x: scroll;
    }
    .ventes__links-container {
        max-width: 230px;
        /* Changer cette ligne si plus de catégories */
        width: 310px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .ventes__links {
        max-width: 100%;
    }
    #modalAddCart {
        overflow-y: scroll;
    }
}

@media screen and (max-width: 500px) {
    .addToCart-buttons {
        display: flex;
        flex-direction: column;
        position: sticky;
        bottom: 0;
        background: white;
    }
}

@media screen and (max-width: 450px) {
    .ventes__header {
        padding: 32px 16px;
    }
    .ventes__header h1 {
        font-size: 24px;
        margin-bottom: 8px;
    }
    .ventes__grid {
        padding: 8px 0;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 8px;
    }
    .ventes__container {
        max-width: calc(100% - 16px);
    }
    .ventes__container.--product {
        max-width: calc(100% - 32px);
    }
    .ventes__item a {
        padding: 8px;
    }
    .ventes__item-title h2,
    .ventes__item-price .currentPrice {
        font-size: 14px;
    }
    .ventes__item-title span,
    .ventes__item-price .crossedout {
        font-size: 12px;
    }
    .ventes__item p {
        font-size: 12px;
        margin-bottom: 8px;
    }
    .ventes__item .flex.space-between {
        flex-direction: column;
    }
    .product__info-header .crossedout {
        font-size: 14px;
    }
    .product__info-header .currentPrice,
    .product__info-header .reductionPercent {
        font-size: 16px;
    }
    .grid-product-head {
        padding: 16px 0 32px 0;
        grid-gap: 16px;
    }
    .product__video {
        margin-top: 32px;
    }
    .ventes__container.--product {
        margin-bottom: 32px;
    }
    .product__variants-container {
        width: calc(100% + 32px);
        overflow-x: scroll;
        margin-left: -16px;
        padding: 0 16px;
    }
    .product__variants-container .product__variants {
        flex-wrap: nowrap;
        width: max-content;
    }
    .product__variants-container .product__variant:last-child {
        margin-right: 16px;
    }
    .addToCart-container {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 5;
        padding: 16px;
        background: white;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        box-shadow: 0px 0 5px 0px rgb(0 0 0 / 15%), 0px 16px 35px 0px rgb(0 0 0 / 10%);
    }
    .product__addToCart {
        margin-top: 0;
    }
    .ventes__item .product__addToCart {
        margin-top: 16px;
        font-size: 12px;
    }
    .products__suggestions {
        padding: 32px 0 16px 0;
    }
    .product__addToCart svg {
        width: 14px;
        height: 14px;
        margin-right: 8px;
    }
    .products__suggestions .ventes__container {
        max-width: 100%;
    }
    .products__suggestions .ventes__container h2 {
        padding: 0 16px;
        margin-bottom: 0;
    }
    .products__suggestions .ventes__items-wrapper {
        overflow-y: scroll;
        padding: 16px;
    }
    .products__suggestions .ventes__grid {
        display: flex;
        width: max-content;
    }
    .products__suggestions .ventes__grid .ventes__item {
        width: 180px;
    }
    .products__suggestions .ventes__container .ventes__item h2 {
        padding: 0;
    }
    .products__suggestions .ventes__grid .ventes__item:last-child {
        margin-right: 16px;
    }
    #modalAddCart .panier-item {
        grid-template-columns: repeat(1, 1fr);
        padding: 12px;
    }
    #modalAddCart .panier-item-col.--panierItemImg {
        grid-column: span 1;
    }
    #modalAddCart .panier-item-col.--panierItemImg img {
        max-width: 100%;
        max-height: 100px;
        object-fit: contain;
    }
    #modalAddCart .panier-item-col.--panierItemName {
        grid-column: span 1;
        padding: 0;
    }
    #modalAddCart h4 {
        font-size: 16px;
    }
}

.vp-link {
    display: block;
    float: left;
    width: 100%;
}

.vp-link img {
    display: block;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .vp-link img.vp-link-pc {
        display: none;
    }
    .vp-link img.vp-link-mobile {
        display: block;
    }
}

@media screen and (min-width: 769px) {
    .vp-link img.vp-link-pc {
        display: block;
    }
    .vp-link img.vp-link-mobile {
        display: none;
    }
}
.liste-cannes img.noel {
    width: 100%;
}
.liste-cannes .swiper-slide a {
    flex: 1;
}

.sac {
    overflow: hidden;
    margin-top: 0;
}

.sac img {
    display: block;
    width: 100%;
}

.sac h2 {
    color: #1b1b1b;
    font: 700 18px/1.58 'Open Sans';
}

.sac p {
    font: 400 16px/1.58 'Open Sans';
    margin: 12px 0;
    color: #6D6D6D;
}

.sac .button__blue {
    display: inline-block;
    font-size: 16px;
    margin-top: 12px;
}

@media screen and (min-width: 1441px) {
    .sac {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .sac img {
        height: 100%;
        object-fit: cover;
    }
}


/* UK specific */

.fishingthespot-uk .commune-headerBloc {
    padding: 48px;
}

.fishingthespot-uk .commune-headerBloc h3 {
    max-width: 600px;
}

.fishingthespot-uk #CommuneFull #oupecher {
    margin-top: 12px;
}

#PrevisionPage .content-md {
    background: #f7f7f7;
}

#PrevisionPage .chart-container {
    position: relative !important;
    width: 100%;
}

#PrevisionPage canvas {
    touch-action: auto !important;
    max-height: 30vh;
    min-height: 30vh;
    max-width: 100%;
}

#PrevisionPage .prevision__top {
    position: sticky;
    top: 60px;
    z-index: 11;
    float: left;
    width: 100%;
    margin-bottom: 12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0px 10px 0 rgb(0 0 0 / 7%);
}

#PrevisionPage .prevision__top .scroll-zoom-wrapper {
    display: flex;
}

#PrevisionPage .menu_scroll {
    width: 100%;
    z-index: 11;
    color: #2b2b2b;
    background: #ffffff;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03);
    float: left;
}

#PrevisionPage .menu__item {
    display: flex;
    justify-content: center;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    padding: 12px 0;
    width: 25%;
    color: #2b2b2b;
    background: #ffffff;
    border: none;
    border-bottom: 4px solid transparent;
}

#PrevisionPage .menu__item .month {
    font-weight: 700;
    text-transform: capitalize;
}

#PrevisionPage .menu__item__actif {
    padding: 12px 0 10px;
    font-weight: bold;
}

#PrevisionPage .menu__item__actif {
    color: #1B1B1B;
    border-bottom: 4px solid #2e4770;
}

#PrevisionPage .select--commune {
    min-height: 36px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    padding: 0 6px;
}

#PrevisionPage .select--commune {
    background: #ffffff;
}

#PrevisionPage .select--commune .change {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    margin: 0;
}

#PrevisionPage .select--commune .change {
    color: #2e4770;
}

#PrevisionPage .prevision__header {
    min-height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#PrevisionPage .prevision__header {
    background: #2e4770;
}

#PrevisionPage .prevision__header h1 {
    margin: 0;
}

#PrevisionPage .prevision__header h1 {
    background: #ffffff;
}

#PrevisionPage .prevision__content {
    position: relative;
    padding-bottom: 60px;
}

#PrevisionPage .content--box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.07);
}

#PrevisionPage .content--box {
    background: #ffffff;
}

#PrevisionPage .content--box .text-muted {
    background: #cecece;
}

#PrevisionPage .content--box .content--head {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
}

#PrevisionPage .content--box .content--head .heading {
    display: flex;
    width: auto;
    gap: 6px;
    align-items: center;
}

#PrevisionPage .content--box .content--head .heading img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

#PrevisionPage .content--box .content--head .heading .text {
    display: flex;
    flex-direction: column;
}

#PrevisionPage .content--box .content--head .heading .text h4 {
    font-size: 16px;
    font-weight: 700;
}

#PrevisionPage .content--box .content--head .heading .text h4 {
    color: #1B1B1B;
}

#PrevisionPage .content--box .content--head .heading .text h5 {
    font-size: 16px;
    font-weight: bold;
    color: #1B1B1B;
    margin: 0;
}

#PrevisionPage .content--box .content--head .heading .text span {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
}

#PrevisionPage .content--box .content--head .heading .text span {
    color: #6d6d6d;
}

#PrevisionPage .content--box .content--head .info-grid {
    display: flex;
    width: auto;
    gap: 6px;
    justify-content: flex-end;
    grid-gap: 6px;
}

#PrevisionPage .content--box .content--head .info-grid .info {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    font-size: 11px;
}

#PrevisionPage .content--box .content--head .info-grid .info {
    color: #2b2b2b;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 6px;
    gap: 6px;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail.--w100 {
    width: 100%;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail p:first-child {
    display: flex;
    align-items: center;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail>* {
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 400;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail>* {
    color: #2b2b2b;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .badge {
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 600;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .badge {
    color: #ffffff;
    background: #1B1B1B;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .badge.--min {
    background: #2062CC;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .badge.--max {
    background: #E35353;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .badge.--info {
    background: #ef7d00;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .badge.--fts {
    background: #2e4770;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .info--icon {
    font-size: 18px;
    margin-right: 4px;
    width: auto;
    font-weight: bold;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .info--icon svg {
    height: 20px;
    width: 20px;
}

#PrevisionPage .content--box .content--head .info-grid .info .info--detail .info--icon svg.arrow {
    height: 14px;
    width: 14px;
}

#PrevisionPage .content--box.--nopad {
    padding: 0;
}

#PrevisionPage .content--box.--nopad .content--head {
    padding: 12px 12px 0 12px;
}

#PrevisionPage .content--box.--nopad .scroll-content {
    padding: 12px 0 0 0;
}

#PrevisionPage .content--box.--nopad .scroll-zoom-wrapper {
    width: 100%;
    overflow: hidden;
}

#PrevisionPage .swiper-container-horizontal {
    padding: 12px;
    cursor: grab;
}

#PrevisionPage .content--box.--nopad .weather-hourly .weather-hour:last-child {
    margin-right: 12px;
}

#PrevisionPage .content--box.--nopad canvas {
    margin: 0 12px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
}

#PrevisionPage .separator {
    margin: 12px 0 0 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
}

#PrevisionPage .meteo--scroll {
    float: left;
    width: 100%;
}

#PrevisionPage .meteo--scroll .scroll-content {
    padding: 12px;
    padding-left: 0;
}

#PrevisionPage .weather-hourly>* {
    margin-right: 12px;
}

#PrevisionPage .weather-hourly.--actual .weather-hour:first-child {
    background: #2e4770;
}

#PrevisionPage .weather-hourly.--actual .weather-hour:first-child .weather-hour__grey,
#PrevisionPage .weather-hourly.--actual .weather-hour:first-child .weather-hour__black {
    font-weight: 700;
    opacity: 1;
    font-size: 14px;
}

#PrevisionPage .weather-hourly.--actual .weather-hour:first-child .weather-hour__grey,
#PrevisionPage .weather-hourly.--actual .weather-hour:first-child .weather-hour__black {
    color: #ffffff;
}

#PrevisionPage .weather-hourly .weather-hour.--max {
    background: #2e4770;
}

#PrevisionPage .weather-hourly .weather-hour.--max .weather-hour__grey,
#PrevisionPage .weather-hourly .weather-hour.--max .weather-hour__black {
    font-weight: bold;
    opacity: 1;
}

#PrevisionPage .weather-hourly .weather-hour.--max .weather-hour__grey,
#PrevisionPage .weather-hourly .weather-hour.--max .weather-hour__black {
    color: #ffffff;
}

#PrevisionPage .weather-hourly .weather-hour.--max img {
    filter: brightness(30);
}

#PrevisionPage .weather-hourly .weather-hour {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 18px;
    min-width: 78px;
    max-width: 78px;
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.07);
    justify-content: space-around;
    min-height: 104px;
    border-radius: 6px;
}

#PrevisionPage .weather-hourly .weather-hour {
    background: #ffffff;
}

#PrevisionPage .weather-hourly .weather-hour .weather-hour__grey,
#PrevisionPage .weather-hourly .weather-hour .weather-hour__black {
    font-size: 14px;
    font-weight: 700;
}

#PrevisionPage .weather-hourly .weather-hour .weather-hour__grey,
#PrevisionPage .weather-hourly .weather-hour .weather-hour__black {
    color: #1B1B1B;
}

#PrevisionPage .weather-hourly .weather-hour .weather-hour__grey {
    color: #6d6d6d;
    font-weight: 400;
}

#PrevisionPage .weather-hourly .weather-hour__icon {
    width: 30px;
    height: auto;
}

#PrevisionPage .weather-hourly .weather-hour__icon.--wind {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-left: 0;
}

#PrevisionPage .cta {
    float: left;
    width: 100%;
    background: #ef7d00;
    -webkit-box-shadow: 0px 10px 20px rgb(0 0 0 / 3%);
    box-shadow: 0px 10px 20px rgb(0 0 0 / 3%);
    border-radius: 6px;
    margin: 0 0 12px 0;
    padding: 24px;
}

#PrevisionPage .cta h2 {
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 12px;
    color: white;
}

#PrevisionPage .cta h2 span {
    font-weight: 400;
}

#PrevisionPage .cta .btn--borderLight {
    color: #ffffff;
}

#PrevisionPage .d__link .button__orange {
    margin: 0;
}

#PrevisionPage .openIndiceExp {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-weight: 700;
    color: #2e4770;
    margin-left: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

#PrevisionPage .openIndiceExp:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #2e4770;
}

#appCta {
    padding: 0;
}



@media screen and (max-width: 768px) {
    .commune__main {
        overflow: unset;
    }
}

@media screen and (max-width: 370px) {
    #PrevisionPage #marees.content--box .content--head {
        flex-direction: column;
    }
    #PrevisionPage #marees.content--box .content--head .info-grid {
        margin-top: 12px;
        width: 100%;
    }
}

@media screen and (max-width: 330px) {
    #PrevisionPage .content--box .content--head {
        flex-direction: column;
    }
    #PrevisionPage .content--box .content--head .info-grid {
        margin-top: 12px;
        width: 100%;
    }
}

@supports not (grid-gap: 6px) {
    #PrevisionPage .content--head .info-grid .info .info--detail p {
        margin-left: 6px;
    }
}