#SmartMenu ul li a,.actualites .text h2,.elem.actu h2,.internalHoverVid h1,.parcoursHover h2,.parcoursTitre {
    font-family: citrus-gothic,sans-serif
}

#MenuSmart,#corps,#entete .liens a,#temoignages,.actu,.actualites,.agenda.elem,.agenda.elem .agendaDetails,.article-intro .bloc,.article_agenda,.article_intro .bloc,.article_intro .imgPrincipale,.carrousel,.carrousel .elem,.elem.actu,.elem.actu.favoris,.fondAgenda,.home .txt.complet,.hoverVid,.internalHoverVid,.offset,.page,.page .txt.Contact,.page .txt.complet,.parcoursHover,.parcoursTitre,.reseau,.shortlink,.temoignages .temoignage,.txt,.txt.actualites .sBloc,.txt.article_galerie .sBloc,.txt.complet,.txt.complet.newsletter input,.txt.droite,.txt.gauche {
    box-sizing: border-box
}

#MenuSmart ul li a,#Pied .links li a,#SmartMenu .nolink a:hover,#SmartMenu ul li a,#entete .liens a,#formulaire a.link,.breadcrumb a,.download a,.filterActu select,.logotext a,.mentions a,.shortlink a,.topSocial p strong a,.topSocial ul li.newsletter a {
    text-decoration: none
}

#MenuSmart ul,#MenuSmart ul li {
    margin: 0;
    padding: 0
}

#MenuSmart ul li:after,.btn {
    height: 60px;
    line-height: 60px
}

#MenuSmart ul li a,.btn {
    font-weight: 500;
    color: #fff
}

#MenuSmart,#Pied p,#SmartMenu ul li,.article_agenda,.article_galerie,.btn,.carrousel .elem .imgSubBloc,.filterActu,.home .txt.complet p,.pageActu,.pageActu .article,.pied,.txt.calHoraires {
    text-align: center
}

#corps .breadcrumb,.breadcrumb a {
    font-weight: 600;
    color: var(--rouge)!important
}

#MenuSmart,#SmartMenu,#backToTop,#entete,.mini.switchAudio {
    position: fixed
}

.btn,.nextPage,.smartIcon {
    position: absolute
}

.article,.txt {
    max-width: 1360px
}

#formulaire,.calendar .mois {
    border-collapse: collapse;
    margin: auto
}

#entete .liens a,#formulaire a.link {
    padding: 4px 12px
}

#formulaire a.link,#formulaire a.link:hover {
    background-color: var(--text);
    background-position: 5px center
}

#corps .Error,#formulaire td a.BtnReset,#formulaire td a.BtnSubmit,.elem.actu:last-child {
    border-bottom: none
}

:root {
    --noir: #232424;
    --rouge: #BF1621;
    --marron: #7F241C;
    --text: #232424;
    --myradius: 4px
}

#MenuSmartphone,#smartinfos,.article_galerie .img img,.article_intro .img img,.galerie .galimg img,.smart {
    display: none
}

#MenuSmart ul li,#MenuSmart ul li a,#entete .liens,.actualite,.article_agenda,.article_galerie,.article_intro h5.showAllActus,.backNews,.btn,.diap,.download a,.home .txt.complet,.horText span,.img,.links,.links .pSubMenu ul,.logotext,.offset,.page .txt.complet,.pied,.txt .img.principale,.txt .imgPrincipale,.article_intro .bouton.showAllActus {
    display: inline-block
}

body.noScroll {
    overflow: hidden
}

.btn {
    cursor: pointer;
    border-radius: 16px 16px 0 0;
    left: -110px;
    top: 55px;
    font-size: 2.4em;
    width: 170px;
    transform: rotate(270deg);
    background-color: var(--orange2);
    transition: background-color .5s
}

.page .matomoConsent {
    background: #463f3f17;
    border-radius: 10px
}

#corps,.shortlinks::after {
    background-attachment: fixed
}

#MenuSmart,#slidepanels,#social2,.smart {
    display: none!important
}

#MenuSmart {
    height: auto;
    top: 60px;
    z-index: 999;
    background: var(--page_grey2);
    width: 100%;
    padding: 0 80px;
    float: left
}

#SmartMenu,.mediaParcours,.mediaPrincipal,.parcoursDiv {
    background-size: cover;
    background-position: center center
}

#MenuSmart ul,#Pied .links li a,#temoignages,.agenda.elem,.agenda.elem .head,.article_agenda,.backNews,.fondActu,.galerie,.galerie .galimg,.temoignage h6,.txt.complet.newsletter,.youtube {
    position: relative
}

#SmartMenu ul,.fondMap {
    margin-top: 60px
}

#MenuSmart ul li:after {
    content: '|';
    color: #ffffff55
}

#MenuSmart ul li:last-child:after {
    color: #ffffff00
}

#MenuSmart ul li a {
    height: 32px;
    line-height: 32px;
    padding: 0 8px;
    margin: 16px 0 12px -4px;
    font-size: .9em;
    transition: .2s;
    float: left;
    border-radius: 0
}

#MenuSmart ul li a:hover {
    background: var(--home);
    color: var(--page_grey)
}

.smartIcon {
    top: 0;
    right: 0;
    width: 61px;
    height: 61px;
    z-index: 999;
    display: block;
    cursor: pointer;
    transition: .3s
}

#MenuBtn img {
    width: 100%;
    height: auto;
    transition: .3s
}

#MenuBtn:hover img,#backToTop:hover,.mini.switchAudio:hover,.mini.switchParcours:hover,.mini.switchPrevious:hover,.nextPage img:hover {
    transform: scale(1.2)
}

#SmartMenu {
    width: 100%;
    height: 100%;
    background-image: url(/images/fond-menu2.jpg)
}

#SmartMenu ul {
    padding: 0;
    width: 100%
}

#SmartMenu ul li {
    margin-bottom: 24px
}

#SmartMenu ul li a {
    color: #fff;
    font-size: 1.7em
}

#Pied .links li a:hover,#SmartMenu .subMenu li a:hover,#SmartMenu ul li a:hover {
    text-decoration: underline
}

#SmartMenu .subMenu {
    margin: 12px 0 0
}

#SmartMenu .subMenu li a {
    font-family: Montserrat,arial;
    font-size: 1.4em;
    font-weight: 700
}

#SmartMenu .subMenu li {
    margin-bottom: 16px
}

.breadcrumb {
    display: block;
    margin-bottom: 30px;
    text-align: left
}

.breadcrumb img {
    width: auto!important;
    height: 20px!important;
    display: inline-block!important;
    margin-right: 6px!important;
    position: relative;
    top: 5px
}

.breadcrumb a {
    font-size: 1em;
    transition: .3s;
    border-bottom: 1px solid transparent
}

#entete,.entete,.nextPage img {
    transition: .5s
}

#corps .breadcrumb {
    font-size: .9em;
    text-align: left!important
}

.breadcrumb a:hover {
    border-bottom: 1px solid var(--marron);
    color: var(--marron)!important
}

#Pied *,.article_breadcrumb h5 a,.article_intro h5 a,.page .full .demi b,.page .full .demi h1,.page .full .demi h2,.page .full .demi h3,.page .full .demi h4,.page .full .demi strong,.article_breadcrumb .bouton a,.article_intro .bouton a {
    color: #fff!important
}

.nextPage {
    display: inline-block;
    width: 100%;
    height: 35px;
    text-align: center;
    bottom: 30px
}

.nextPage img {
    height: 35px;
    width: auto
}

#entete {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 0 100px 70px #2a1f03bf
}

.entete {
    height: auto;
    width: 100%;
    position: relative;
    max-height: 100dvh;
    overflow: hidden
}

.closeParcours img,.entete video {
    width: 100%;
    height: auto
}

.mini.switchAudio,.mini.switchParcours,.mini.switchPrevious {
    position: absolute;
    z-index: 9999;
    bottom: 30px;
    right: 30px;
    height: 56px;
    width: 56px;
    transition: .5s;
    cursor: pointer
}

.mini.switchParcours {
    right: 120px
}

.mini.switchPrevious {
    left: 30px;
    right: 0
}

.mini.switchAudio img,.mini.switchParcours img,.mini.switchPrevious img {
    width: 100%;
    height: 100%
}

.mediaParcours,.mediaPrincipal,.parcoursDiv {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat
}

.mediaParcours {
    height: 100vh
}

.mediaParcours img,.mediaPrincipal img {
    min-width: 100%;
    height: 100%
}

.mediaParcours.carnet img,.mediaParcours.lara img {
    width: auto!important;
    height: 90dvh;
    float: left
}

.mediaParcours.carnet,.mediaParcours.lara {
    position: absolute;
    bottom: 0;
    width: auto;
    height: auto
}

.mediaParcours.adroite {
    right: 5%
}

.mediaParcours.agauche {
    left: 5%
}

#scrollNextDiv0 .lara,#scrollNextDiv2 .lara {
    right: 7%
}

#scrollNextDiv1 .lara {
    left: 25%
}

#parcoursHover2,#scrollNextDiv3 .lara {
    left: 20%
}

#scrollNextDiv4 .lara {
    left: 15%
}

#parcoursHover0 {
    left: 30%
}

#parcoursHover1 {
    left: 55%
}

#parcoursHover3,#parcoursHover4 {
    left: 50%
}

@media screen and (max-width: 1280px) {
    #scrollNextDiv0 .lara {
        right:5%
    }

    #scrollNextDiv1 .lara {
        left: 20%
    }

    #scrollNextDiv2 .lara {
        right: 2%
    }

    #scrollNextDiv3 .lara,#scrollNextDiv4 .lara {
        left: 15%
    }

    #parcoursHover0 {
        left: 20%;
        width: 45%
    }

    #parcoursHover1,#parcoursHover3,#parcoursHover4 {
        left: 50%;
        width: 45%
    }

    #parcoursHover2 {
        left: 15%;
        width: 45%
    }
}

@media screen and (max-width: 960px) {
    #scrollNextDiv0 .lara,#scrollNextDiv2 .lara {
        right:0
    }

    #scrollNextDiv1 .lara,#scrollNextDiv3 .lara {
        left: 5%
    }

    #scrollNextDiv4 .lara {
        left: 15%
    }

    #parcoursHover0 {
        left: 10%;
        width: 55%
    }

    #parcoursHover1 {
        left: 45%;
        width: 50%
    }

    #parcoursHover2 {
        left: 10%;
        width: 50%
    }

    #parcoursHover3 {
        left: 40%;
        width: 55%
    }

    #parcoursHover4 {
        left: 50%;
        width: 45%
    }
}

@media screen and (max-width: 860px) {
    .mediaParcours {
        height:60dvh
    }

    .parcoursDiv {
        background-color: var(--marron);
        height: 100dvh
    }

    .parcoursHover {
        width: 90%!important;
        left: 5%!important;
        top: 45%!important;
        padding: 24px!important;
        transform: none!important;
        z-index: 99;
        box-sizing: border-box;
        background: #fff;
        border-radius: 64px
    }

    .parcoursHover * {
        font-size: 1em!important
    }

    .parcoursHover h2 {
        font-size: 1.6em!important
    }

    .closeParcours,.txt.bread {
        display: none
    }

    .parcoursTitre {
        bottom: 60px!important;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 20px!important;
        font-size: 1.4em!important;
        line-height: 1em;
        width: 66%!important
    }

    .mini.switchAudio,.mini.switchParcours,.mini.switchPrevious {
        bottom: 18px;
        right: 18px;
        height: 42px;
        width: 42px
    }

    .mini.switchPrevious {
        left: 18px;
        right: 0
    }

    .mediaParcours.carnet,.mediaParcours.lara {
        position: absolute;
        bottom: 40dvh;
        width: auto;
        height: auto
    }

    .mediaParcours.carnet img,.mediaParcours.lara img {
        max-height: 55vh
    }
}

#backToTop,.closeParcours {
    height: 40px;
    cursor: pointer
}

.parcoursHover h2,.parcoursTitre {
    color: var(--rouge);
    font-size: 2em
}

.hoverVid,.internalHoverVid,.parcoursHover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99;
    padding: 12px 24px;
    background: #fff;
    border-radius: 64px
}

.parcoursHover {
    left: 0;
    transform: translate(0,-50%);
    padding: 40px;
    width: 40%;
    border-radius: 32px;
    box-shadow: 0 10px 50px 10px rgb(38 25 6 / 50%)
}

.parcoursTitre,.parcoursTitre:after {
    left: 50%;
    transform: translateX(-50%);
    position: absolute
}

#Pied .pSocial ul,.hoverVid .text,.parcoursHover .text,h5.social ul,.bouton.social ul {
    display: inline-block;
    vertical-align: middle
}

.parcoursTitre {
    padding: 12px 30px;
    width: auto;
    border-radius: 64px;
    bottom: 60px;
    z-index: 99;
    background: #fff;
    text-align: center;
    transition: 1s cubic-bezier(.34, .49, 0, 1.43);
    cursor: pointer;
    box-shadow: 0 10px 30px 5px rgb(38 25 6 / 50%)
}

.parcoursTitre:after {
    content: '';
    width: 40px;
    height: 21px;
    background-image: url(/images/picto-chevron-blanc.svg);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -28px
}

#Pied,#corps .txt.complet.achatBillet,.shortlinks::after {
    background-image: url(/images/fond-rouille.jpg)
}

.parcoursTitre:hover {
    transform: translateX(-50%) scale(1.1)
}

.closeParcours {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    transition: .5s
}

.closeParcours:hover {
    transform: rotateZ(45deg)
}

.parcoursHover * {
    font-size: 115%
}

.hoverVid .text p a,.parcoursHover .text p a {
    color: var(--rouge)!important;
    text-decoration: none;
    font-size: 26px;
    font-family: citrus-gothic,sans-serif;
    position: relative;
    top: 3px
}

.hoverVid .chevron,.parcoursHover .chevron {
    height: 32px;
    width: auto;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle
}

.hoverVid .chevron img,.parcoursHover .chevron img {
    height: 100%;
    width: auto
}

.internalHoverVid,.noRedBackground .imgSubBloc::after {
    background: 0 0
}

.decouvrez .quart .img,.temoignage h6::after,.temoignage h6::before {
    background-size: contain
}

.internalHoverVid h1 {
    color: #fff;
    text-align: center;
    font-size: 4em;
    line-height: 1.1em;
    text-shadow: 0 5px 20px rgb(38 25 6 / 80%)
}

#entete .liens a,.shortlink {
    margin: 0 4px
}

.shortlinks {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 99;
    text-align: center
}

.shortlinks::after {
    content: '';
    background-size: cover;
    height: 10px;
    display: block;
    width: 100%
}

.shortlink {
    background: #fff;
    display: inline-block;
    border-radius: 16px 16px 0 0;
    padding: 14px 16px 10px;
    transition: .3s;
    cursor: pointer;
    height: 55px
}

.shortlink div {
    display: inline-block;
    text-align: left;
    color: var(--marron);
    font-weight: 700!important;
    vertical-align: top;
    font-size: inherit
}

.shortlink small {
    color: inherit;
    font-size: .8em
}

.shortlink a {
    color: var(--marron);
    font-weight: 700!important;
    font-size: 1em
}

.shortlink svg {
    width: auto;
    height: 28px;
    vertical-align: middle;
    margin: 0 3px
}

.shortlink.closed,.shortlink:hover {
    background: var(--marron)
}

.shortlink.closed a,.shortlink:hover a,.shortlink:hover div {
    color: #fff
}

.shortlink.closed svg path,.shortlink:hover svg path {
    fill: #ffffff
}

.topSocial {
    background: var(--orange2);
    width: 100%;
    height: 50px;
    text-align: center!important;
    transition: .5s
}

#corps,.img {
    background-size: cover
}

.article_intro.bandeau .img,.img,.txt.complet.newsletter,.txt.complet.newsletter::before {
    background-repeat: no-repeat;
    background-position: center center
}

.topSocial p {
    line-height: 50px;
    font-size: 1.4em;
    color: #000;
    display: inline-block;
    font-weight: 500;
    margin: 0 20px 0 0
}

.topSocial p a,.topSocial p strong a {
    color: inherit;
    font-weight: inherit
}

.agenda.elem .head h3 strong,.agenda.elem .head p {
    font-weight: 600;
    color: var(--marron)
}

.topSocial p strong {
    font-size: 130%;
    color: inherit;
    font-weight: 600;
    margin-left: 15px
}

.topSocial ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    top: -3px;
    position: relative
}

.topSocial ul li {
    height: 32px;
    width: 32px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 3px
}

.topSocial ul li a {
    height: 32px;
    width: 32px;
    display: block
}

.topSocial ul li svg {
    height: 100%;
    width: 100%;
    display: inline-block;
    fill: black
}

.topSocial ul li a:hover svg path {
    fill: black
}

.topSocial ul li.newsletter {
    width: auto;
    height: auto
}

.topSocial ul li.newsletter a {
    background: #f7f2e9;
    border-radius: 16px;
    font-size: .9em;
    padding: 0 16px;
    line-height: 32px;
    margin-right: 3px;
    text-transform: uppercase;
    color: var(--bleu);
    font-weight: 600!important;
    position: relative;
    transition: .5s;
    cursor: pointer;
    height: auto;
    width: auto;
    vertical-align: center
}

.topSocial ul li.newsletter a:hover {
    background: var(--orange)
}

#entete.reduce #BtnMenu,#entete.reduce .logo {
    top: 15px
}

#entete.reduce #menu {
    top: 110px
}

#entete.reduce .topSocial {
    height: 30px
}

#entete.reduce .topSocial p {
    line-height: 30px;
    font-size: 1.3em
}

#entete.reduce .topSocial p strong {
    font-size: 120%
}

#entete.reduce .entete {
    height: 115px
}

#entete.reduce::after {
    top: 140px
}

#corps {
    margin: 0 auto;
    width: 100%;
    transition: .5s;
    display: inline-block,;
    background-image: url(images/terre-de-dragons-background-map2.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    padding-bottom: 60px
}

.bloc,.blocNoPadding {
    width: calc(70% - 50px);
    display: inline-block
}

.article.left .bloc {
    margin-right: 50px;
    margin-left: 0
}

.droite .bloc {
    margin-right: 0;
    margin-left: 0
}

.blocNoPadding {
    padding: 0
}

@media screen and (max-width: 1080px) {
    #menu li a {
        letter-spacing:0!important;
        font-size: 1em!important
    }
}

.txt {
    text-align: left;
    margin: auto;
    padding: 30px
}

.article_intro.bandeau,.imgSubBloc {
    margin-bottom: 20px
}

#corps .noPadding *,.noPadding {
    padding: 0!important
}

.article_intro {
    width: 100%;
    max-width: 1280px
}

.article_galerie {
    margin-top: 30px!important;
    width: 100%
}

.txt.calHoraires .horText {
    display: inline-block!important;
    width: auto;
    margin: 0 20px;
    font-size: 1.1em;
    line-height: 26px
}

.horText span {
    width: 26px;
    height: 26px;
    vertical-align: middle;
    margin-right: 5px;
    border: 1px solid var(--marron)
}

.img,.imgSubBloc::after {
    width: 100%;
    border-radius: 10px;
    transition: 1s
}

#Pied,.article_agenda,.article_intro .imgPrincipale img,.img.logo,.pied {
    width: 100%
}

.imgSubBloc video {
    border-radius: 16px
}

.imgSubBloc {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1
}

.imgSubBloc::after {
    content: '';
    background: var(--rouge);
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    position: absolute;
    transform: rotateZ(2deg)
}

.imgSubBloc:hover::after {
    transform: rotateZ(3deg)
}

.img {
    height: 190px;
    margin: auto;
    transform: rotateZ(-2deg)
}

.imgSubBloc:hover .img {
    transform: rotateZ(-4deg)
}

#corps .txt.complet .imgSubBloc {
    margin-right: 30px
}

.macaron {
    position: absolute;
    top: -50px;
    left: -40px;
    width: 200px;
    height: auto
}

#corps .article_actu h2,#corps .article_intro.article_actu h5,#corps .txt.complet.article_actu,.agenda.elem .agendaDetails p,.article_intro.bandeau,.article_intro.bandeau .color,.logotext *,.page .txt.complet p,#corps .article_intro.article_actu .bouton {
    text-align: left!important
}

.article_intro.bandeau .color {
    padding: 20px!important
}

.article_intro.bandeau .img {
    height: 90px!important;
    width: 110px!important;
    vertical-align: middle;
    margin: 0 10px 0 0!important;
    padding: 0
}

.article_intro.bandeau h3 {
    text-transform: none;
    width: auto!important;
    display: inline-block!important;
    vertical-align: middle;
    font-size: 2.8em
}

#entete .liens a,.txt.chapeau p {
    font-size: 1.2em;
    text-align: center
}

.article_galerie .img {
    height: 140px!important;
    width: 100%!important;
    margin-bottom: 10px!important;
    background-size: contain!important;
    opacity: 0;
    animation: 2s forwards fadeIn
}

.actualite .img,.imgPrincipale .img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

.article_intro .imgSubBloc {
    width: 45%;
    display: inline-block;
    vertical-align: top
}

.agenda,.txt img.fun {
    display: block
}

.txt.complet,.txt.droite,.txt.gauche {
    text-align: center;
    position: relative;
    display: block;
    width: 100%;
    max-width: 1280px
}

#formulaire .date_radio,.demi .file,.file,.forced_col .file,.tiers .file,.txt.complet *,.txt.droite *,.txt.gauche * {
    text-align: left
}

p small,p sup {
    font-size: 12px;
    line-height: 1em;
    font-family: Montserrat
}

.txt.complet.article_breadcrumb,.txt.drote.article_breadcrumb,.txt.gauche.article_breadcrumb {
    padding: 30px 5%;
    border-radius: 0;
    width: 100%
}

.article-intro .bloc,.article_intro .bloc {
    width: 45%!important;
    display: inline-block;
    vertical-align: top
}

.txt .img.principale {
    width: 50%;
    vertical-align: top;
    transition: .5s;
    position: relative
}

.txt .imgPrincipale {
    width: 30%;
    transition: .5s;
    position: relative;
    vertical-align: middle
}

.article_intro .imgPrincipale {
    width: 50%;
    position: relative;
    top: 0;
    z-index: 1
}

.imgPrincipale .img {
    position: absolute;
    border-radius: 0;
    top: 2%;
    left: 2%;
    width: 96%!important;
    height: 96%!important;
    z-index: -1
}

.txt .img img {
    border-radius: 96px 4px 4px 96px
}

#entete .liens {
    padding-right: 70px;
    position: relative;
    z-index: 999
}

#entete .liens a {
    text-transform: uppercase;
    font-weight: 700;
    transition: .2s
}

#formulaire a.link,.galerie .galimg {
    transition: .2s ease-in;
    cursor: pointer
}

.citation img {
    width: 80px;
    height: auto
}

.citation:first-child img {
    margin-top: -10px
}

.agenda.elem .inscription,.citation:last-child img {
    margin-top: 10px
}

.txt.chapeau p {
    color: var(--violet);
    font-weight: 400;
    margin-bottom: 30px
}

.txt.chapeau p strong {
    color: var(--violet);
    font-weight: 700;
    font-size: inherit
}

.article_intro.actualites {
    margin-bottom: 40px
}

.actualites {
    width: 100%;
    padding: 0 60px;
    margin: auto;
    text-align: center
}

.article_intro.actualites .txt {
    max-width: 960px
}

.actualite {
    text-align: left;
    width: 320px;
    vertical-align: top;
    background: var(--bleu2);
    padding: 20px;
    margin: 10px;
    border-radius: 6px;
    transition: .5s;
    position: relative;
    animation: 2s forwards fadeIn
}

.actualite .img {
    width: calc(100% + 40px);
    height: 240px;
    position: relative;
    top: -20px;
    left: -20px;
    border-radius: 6px 6px 0 0
}

.actualite:hover {
    background: var(--bleu3)
}

.actualite h5 a,.actualite .bouton a {
    font-size: 1em;
    background: #fff;
    font-weight: 500
}

.agenda.elem .head h5.oeil,.download a,.img.logo,.newsBloc,.popEvenement h4,.slickshowSlides h5 a:hover,.temoignage h6::after,.temoignage h6::before,.agenda.elem .head .bouton.oeil,.slickshowSlides .bouton a:hover {
    background-repeat: no-repeat
}

#urge h5 a,.slickshowSlides h5 a,.slickshowSlides h5 a:hover,#urge .bouton a,.slickshowSlides .bouton a,.slickshowSlides .bouton a:hover {
    background-image: url(/images/picto-loupe.svg);
    background-size: 30px 30px
}

.popEvenement {
    z-index: 1;
    position: absolute;
    right: 0;
    top: 130px;
    padding: 30px;
    background-color: var(--violet);
    width: 135px;
    border-radius: 30px 0 0 30px;
    transition: .5s;
    cursor: pointer
}

.backNews,.offset {
    width: 45%
}

.popEvenement:hover {
    background-color: var(--bleu);
    width: 165px
}

.popEvenement h4 {
    background-image: url(/images/icon-ampoule.svg);
    background-size: 60px 60px;
    background-position: top left;
    padding-top: 70px;
    padding-bototm: 0;
    margin-bottom: 0;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5em
}

.article_agenda {
    max-width: 1280px;
    left: 50%;
    transform: translateX(-50%);
    padding: 40px 20px;
    margin: -30px 0 60px!important
}

.temoignage .img img,.temoignages {
    transform: translateY(-50%);
    position: relative
}

.privateAgenda .article_agenda {
    background: var(--bleuclair);
    padding: 10px
}

.center *,.decouvrez,.decouvrez p,.page .center *,.page .txt.complet.center *,.txt.complet.newsletter p,.txt.tel * {
    text-align: center!important
}

.agenda.elem,.agenda.elem .agendaDetails {
    background: #fff!important
}

.large {
    margin-bottom: 0;
    padding: 40px 0;
    text-align: center
}

.large .bloc.title {
    margin: 0 0 60px;
    padding: 0
}

.newsBloc {
    background-image: url(/images/backNews.svg)!important;
    background-color: #fff5ea;
    background-size: 45% 400px;
    background-position: 15% 80px;
    background-attachment: scroll
}

.newsBloc .blocs {
    width: 100%;
    max-width: 1360px;
    margin: auto
}

.backNews {
    vertical-align: top;
    height: 360px;
    background-position: center top
}

.offset {
    padding: 0 0 0 30px
}

.newsBloc .offset h4 {
    color: var(--bleu);
    font-weight: 700;
    font-size: 1.6em;
    margin-bottom: 3px
}

.newsBloc .offset h3 {
    color: var(--text);
    font-weight: 700;
    font-size: 2.5em;
    margin-bottom: 10px
}

.newsBloc .offset p,.temoignage h6 {
    font-size: 1.5em
}

#urge h5 a,.slickshowSlides h5 a,#urge .bouton a,.slickshowSlides .bouton a {
    background-repeat: no-repeat;
    background-position: 8px center;
    padding-left: 46px;
    border: none!important
}

.slickshowSlides h5 a:hover,.slickshowSlides .bouton a:hover {
    background-position: 14px center;
    padding-left: 52px
}

.agenda {
    margin: auto;
    max-width: 960px
}

.agenda.elem {
    width: 100%;
    margin-bottom: 8px;
    text-align: left;
    padding: 8px 16px;
    border-radius: 12px;
    line-height: 24px
}

#corps .article_intro.article_actu,#temoignages h3,.agenda.elem:last-child {
    margin-bottom: 0
}

.agenda.elem .head img {
    height: auto;
    width: 32px;
    margin-right: 12px!important
}

.agenda.elem .head {
    display: inline-block;
    width: 100%
}

.page hr,.pageActu .article .bloc,.pageActu .article .imgSubBloc {
    width: 100%!important
}

.agenda.elem .head h3,.agenda.elem .head h5,.agenda.elem .head img,.agenda.elem .head p,.agenda.elem .head .bouton {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0
}

.agenda.elem .head h3 {
    width: 65px;
    font-size: 1.5em;
    color: var(--text)
}

.agenda.elem .head p {
    width: calc(100% - 80px)!important;
    text-align: left!important;
    font-size: 1.3em;
    line-height: 1em
}

.agenda.elem .head h5,.agenda.elem .head .bouton {
    position: absolute;
    top: -2px;
    right: -10px
}

.agenda.elem .head h5 a,.agenda.elem .head .bouton a {
    font-size: 1.3em;
    height: 20px
}

.agenda.elem .head h5 a:hover,.agenda.item.home h5:last-child a.bord:hover,.agenda.elem .head .bouton a:hover,.agenda.item.home .bouton:last-child a.bord:hover {
    padding: 8px 20px!important
}

.agenda.elem .head h5.oeil,.agenda.elem .head .bouton.oeil {
    width: 24px;
    height: 24px;
    display: inline-block;
    border-radius: 4px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    background-image: url(/images/picto-plus2.svg);
    background-position: center center;
    background-size: 32px;
    transition: .3s;
    cursor: pointer
}

.agenda.elem .head h5.oeil.solo,.agenda.elem .head .bouton.oeil.solo {
    right: -10px
}

.agenda.elem .head h5.oeil:hover,.agenda.elem .head .bouton.oeil:hover {
    transform: rotate(90deg);
    background-image: url(/images/picto-plus.svg)
}

.agenda.elem .agendaDetails {
    padding: 20px 20px 30px
}

.agenda.elem .infos span {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid var(--rouge);
    margin: 0;
    padding: 4px 0;
    font-size: 1em;
    line-height: 1em
}

.agenda.elem .infos span strong {
    font-size: inherit;
    font-weight: 700!important;
    color: var(--marron)
}

.agenda.elem .infos .imgPreview,.agenda.elem .infos .offset {
    width: calc(50% - 5px);
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    height: auto
}

.agenda.elem .infos img {
    margin: 0!important;
    height: auto;
    width: 100%;
    border-radius: 10px;
    float: left
}

.agenda.elem .infos .offset {
    width: 50%!important;
    box-sizing: border-box!important;
    display: inline-block
}

.agenda.elem .agendaDetails h5,.agenda.elem .agendaDetails .bouton {
    margin-top: 15px
}

.agenda.elem .agendaDetails h5 a,.agenda.elem .agendaDetails .bouton a {
    font-size: 1em;
    background: var(--rouge);
    border: 1px solid var(--rouge);
    color: #fff;
    margin: 0;
    cursor: pointer
}

.agenda.elem .agendaDetails h5 a:hover,.agenda.elem .agendaDetails .bouton a:hover {
    background: #000;
    border: 1px solid #000
}

.agenda.elem .agendaDetails li,.agenda.elem .agendaDetails p {
    line-height: 1.1em;
    margin: 0 0 8px
}

.agenda.elem .agendaDetails span p {
    font-size: 1em
}

.agenda.elem .agendaDetails ul {
    margin: 0;
    padding-left: 20px
}

.agenda.elem .agendaDetails p strong {
    font-weight: 700;
    font-size: inherit;
    color: var(--marron)
}

.agenda.elem .agendaDetails p em {
    font-weight: inherit;
    font-size: inherit
}

.agenda.elem .agendaDetails iframe {
    border: 1px solid var(--gris);
    border-radius: 6px;
    width: 100%;
    min-height: 450px
}

.newsBloc,.temoignageBloc .title {
    margin-bottom: 30px!important
}

.temoignageBloc .bloc.txt h3 {
    text-align: center;
    font-size: 4em
}

.temoignageBloc .partenaires {
    margin-top: 60px!important;
    background: red
}

#temoignages {
    height: 180px;
    width: 100%;
    display: inline-block;
    text-align: center;
    margin-bottom: 60px
}

#temoignages img {
    width: 96px;
    height: auto
}

.temoignages {
    width: 55%;
    margin: auto;
    display: inline-block;
    top: 50%
}

.temoignages .temoignage {
    padding: 30px 80px;
    text-align: center!important;
    display: inline-block
}

.temoignage .img {
    height: 220px;
    width: 100%;
    overflow: hidden;
    margin: 0 0 10px;
    padding: 0;
    display: block
}

.temoignage .img img {
    top: 50%
}

.temoignage .stars {
    height: auto;
    width: 128px;
    margin: 8px auto 0
}

.temoignage h6 {
    font-style: italic;
    font-weight: 400;
    line-height: 1.4em;
    text-transform: none;
    margin-bottom: 15px;
    color: #000
}

.actu h2,.actu h4 {
    text-transform: uppercase
}

.temoignage h6::before {
    content: '';
    height: 20px;
    width: 30px;
    background-image: url(/images/topBla.svg);
    position: absolute;
    left: -24px;
    top: -16px
}

.temoignage h6::after {
    content: '';
    position: absolute;
    height: 20px;
    width: 30px;
    background-image: url(/images/bottomBla.svg);
    right: -4px;
    bottom: -16px
}

.temoignage p {
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text);
    text-align: center!important
}

.temoignage p strong {
    font-weight: 800;
    color: inherit
}

.slick-slide {
    height: auto
}

.txt.tel h2 {
    font-size: 3em;
    font-weight: 700
}

#formulaire,.txt.tel p {
    font-size: 1.4em
}

#corps .Error ul li b,#formulaire,.elem.actu h2 {
    font-weight: 400
}

.page {
    width: 100%;
    display: inline-block;
    text-align: center;
    padding-top: 30px
}

.carrousel {
    margin: 30px auto;
    max-width: calc(100% - 80px);
    display: block
}

.carrousel .elem {
    width: 300px;
    padding: 10px 30px;
    text-align: left;
    vertical-align: top
}

.carrousel .elem .imgSubBloc img {
    width: 100%;
    overflow: hidden;
    height: auto;
    display: inline-block;
    z-index: 100;
    border-radius: 12px
}

.pageActu .article {
    max-width: 720px
}

.pageActu .article .imgSubBloc {
    margin-bottom: 40px!important
}

.pageActu .article .img,.txt.complet.actualites .img {
    margin-right: 0!important
}

.pageActu .article .bloc {
    margin: auto!important;
    display: block!important
}

.home .txt.complet {
    width: 100%;
    padding: 0 10%;
    margin: 30px 0;
    text-align: center
}

.page .txt.complet {
    width: 70%!important;
    margin: 0 15%;
    padding: 20px
}

.page hr {
    height: 1px!important;
    border: none;
    border-top: 1px solid var(--bleu);
    margin-bottom: 15px!important;
    display: block!important
}

.txt.complet.newsletter {
    padding: 120px 0 60px;
    background-image: url(/images/background-newsletter.jpg);
    background-size: cover;
    background-attachment: fixed;
    margin-top: 100px;
    width: 100%
}

.contain .img,.page .complet.fond {
    background-size: contain!important
}

.txt.complet.newsletter::before {
    content: '';
    display: block;
    width: 180px;
    height: 180px;
    background-color: #fff;
    background-image: url(/obj/original_20230223164558_l-embarcadare-logo.svg);
    background-size: 75%;
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 200px
}

.txt.complet.newsletter input {
    width: 30%;
    min-width: 240px;
    padding: 6px 16px;
    border-radius: 32px;
    border: none;
    text-align: center;
    font-size: 1.2em;
    display: block;
    margin: 0 auto 10px
}

.txt.complet.newsletter input.btn {
    width: auto!important;
    padding: 6px 32px;
    min-width: auto;
    transition: .3s;
    border: 1px solid #fff;
    background: 0 0;
    color: #fff
}

.txt.complet.newsletter input.btn:hover {
    background: #fff;
    color: var(--blue)!important
}

.txt.complet.newsletter h5 a,.txt.complet.newsletter p,.txt.complet.newsletter .bouton a {
    color: #fff;
    margin-bottom: 15px
}

.txt.complet.newsletter h5 a,.txt.complet.newsletter .bouton a {
    border: 1px solid #fff;
    margin-top: 0
}

.page .complet.fond {
    position: relative!important;
    background-color: var(--dore)!important;
    background-image: url(/images/background-sellorstat.jpg)!important;
    background-repeat: no-repeat!important;
    background-position: bottom center!important;
    background-attachment: fixed!important;
    padding: 80px 10%!important;
    width: 100%
}

#corps .txt.complet.actualites .img.fullActu,.fondActu,.txt.article_galerie .slideshow {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: inline-block
}

.page .txt.complet.fond.head {
    padding: 30px 15%!important
}

.page .txt.Contact h5 a,.page .txt.complet.fond.head h5 a,.page .txt.Contact .bouton a,.page .txt.complet.fond.head .bouton a {
    background: var(--noir)!important;
    color: #fff!important
}

.page .complet.fond h5 a,.page .complet.fond .bouton a {
    background: #fff!important;
    color: var(--noir)!important
}

.page .txt.Contact {
    position: relative!important;
    padding: 20px 15% 60px!important;
    width: 100%
}

.page .txt.complet .img {
    margin-bottom: 0;
    display: none
}

.txt .elem {
    vertical-align: top;
    display: inline-block;
    width: 100%
}

.fondActu {
    width: 100%;
    padding: 0;
    text-align: center;
    background-image: url(/images/fond-croco-actu.jpg);
    margin: 60px 0;
    top: 0
}

.fondActu.accueil {
    margin: 0
}

.txt.actualites,.txt.article_galerie {
    width: 100%!important;
    max-width: 1280px!important;
    padding: 0!important;
    margin: auto!important;
    text-align: left;
    min-height: 380px!important
}

.txt.actualites .text,.txt.article_galerie .text {
    width: 50%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    margin-right: 30px;
    position: relative!important
}

.txt.actualites .text {
    position: absolute!important;
    top: calc(50% - 20px);
    transform: translateY(calc(-50% + 40px))
}

.actualites .text h2 {
    color: #fff;
    font-size: 6em;
    position: absolute;
    top: -40px;
    left: 40px
}

#formulaire select,.actualites .text h3,.reseau h2,.txt.article_galerie .text h3 {
    color: var(--rouge)
}

.txt.actualites .sBloc,.txt.article_galerie .sBloc {
    position: relative;
    z-index: 2;
    padding: 40px 50px;
    margin: 20px 0
}

.txt.actualites .text::after,.txt.article_galerie .text::after {
    content: '';
    background: #fff;
    position: absolute;
    z-index: 1;
    height: calc(90% - 40px);
    width: 90%;
    top: calc(5% + 20px);
    left: 5%;
    border-radius: 16px;
    transform: rotateZ(-2deg)
}

.calendar .mois .curDate::after,.calendar .mois .curDate::before {
    transform: translateX(-50%);
    height: 2px;
    width: 55%;
    background: var(--text)
}

#corps .txt.complet.actualites .img.fullActu,.txt.article_galerie .slideshow {
    width: 50%;
    height: 100%!important;
    position: absolute;
    vertical-align: middle;
    transform: rotateZ(0);
    border-radius: 0;
    right: 0
}

.fondAgenda {
    width: 100%;
    padding: 30px 60px;
    text-align: center;
    background-image: url(/images/fond-agenda.png);
    background-repeat: no-repeat;
    background-position: 5% center;
    background-size: auto 90%;
    display: inline-block;
    background-color: #fff
}

.txt.evenements {
    width: 100%!important;
    max-width: 960px!important;
    margin: auto!important;
    text-align: center
}

.reseau {
    border-radius: 16px;
    padding: 30px;
    background: #fefaf5ed
}

.reseau h2 {
    font-size: 3em;
    margin-bottom: 20px!important
}

.reseau h2 img {
    vertical-align: middle;
    max-height: 80px;
    width: auto;
    margin-right: 15px
}

.reseau h4 {
    margin-bottom: 3px
}

.txt.evenements .imgSubBloc {
    width: calc(40% - 30px)!important;
    vertical-align: middle;
    margin-right: 30px
}

.txt.evenements .img {
    height: 240px!important
}

.txt.evenements .sBloc {
    width: 55%;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    position: relative
}

h5.social,.bouton.social {
    border: 1px solid var(--marron);
    border-radius: 32px;
    color: var(--marron);
    font-size: 1em;
    padding: 6px 16px;
    display: inline-block;
    margin: 30px 0 0
}

#Pied .pSocial li,h5.social li,.bouton.social li {
    display: inline-block;
    margin: 0 0 0 5px;
    height: 30px
}

#Pied .pSocial li::before,h5.social li::before,.bouton.social li::before {
    content: none
}

#Pied .pSocial li a,h5.social li a,.bouton.social li a {
    background: 0 0;
    margin: 0;
    padding: 0
}

h5.social li a svg,.bouton.social li a svg {
    fill: var(--marron);
    width: 30px;
    height: auto
}

h5.social li a svg:hover,.bouton.social li a svg:hover {
    fill: var(--rouge)
}

.filterActu select {
    display: inline-block;
    padding: 8px 20px;
    background: var(--bleu);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 600;
    transition: .5s;
    border-radius: 12px;
    border: none;
    width: 200px;
    margin-right: 10px
}

.actu h2,.actu h3 {
    font-size: 1.4em!important
}

.article_intro h5.showAllActus a,.article_intro .bouton.showAllActus a {
    background-color: var(--bleu)!important;
    color: #fff!important;
    border: none!important
}

.article_intro h5.showAllActus a:hover,.article_intro .bouton.showAllActus a:hover {
    background-color: var(--text)!important
}

.elem.actu {
    width: 320px;
    display: inline-block;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 20px
}

.elem.actu:hover {
    background: #fff;
    border-radius: 12px
}

.elem.actu,.elem.actu.favoris {
    text-align: left!important;
    margin: 20px;
    position: relative
}

.elem.actu .img {
    height: 180px;
    margin-bottom: -10px!important;
    background-size: cover;
    width: 100%;
    display: inline-block;
    border-radius: 12px;
    position: relative
}

.actuimg img,.demi .img.temoignage {
    width: 300px;
    height: 200px!important
}

.elem.actu h2 {
    font-size: 1.6em!important;
    color: var(--noir);
    text-transform: none;
    color: var(--marron)
}

.elem.actu h3 {
    font-size: 1.1em!important;
    text-transform: none;
    margin-bottom: 5px!important;
    font-weight: 500;
    color: var(--rouge);
    font-family: Montserrat,arial
}

.elem.actu h4 {
    font-size: 1.1em!important;
    margin-top: 0
}

.elem.actu h5,.elem.actu .bouton {
    margin-top: 20px;
    text-align: left
}

.smallcol .elem.actu .img {
    width: 100%;
    height: 170px
}

.imgPrincipaleActu {
    max-width: 920px;
    width: 100%;
    margin-bottom: 30px!important;
    margin: auto;
    display: block
}

.imgPrincipaleActu img {
    border-radius: 32px!important
}

.actuliste {
    padding: 60px 15%;
    text-align: center;
    background: var(--ecru)
}

.actu {
    width: 360px;
    margin: 20px 10px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    transition: .5s;
    position: relative
}

.actubox::before {
    content: '';
    top: -15px;
    left: 0;
    position: absolute;
    background-image: url(/images/actu-fond-image.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%
}

.actubox {
    padding-left: 50px;
    padding-top: 35px
}

#corps .txt.complet,.demi,.squarelinks,.tiers {
    padding: 30px;
    box-sizing: border-box
}

.actubox h5,.leblog h5,.temoigne h5,.actubox .bouton,.leblog .bouton,.temoigne .bouton {
    text-align: left!important;
    margin: auto
}

.leblog .secondPlan {
    width: 50%;
    display: inline-block;
    position: absolute;
    z-index: 0;
    right: 0;
    top: -40px
}

.leblog .text {
    width: 55%;
    position: relative;
    z-index: 1
}

.actuimg img {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0!important;
    padding: 0!important;
    border-radius: 16px;
    border: 2px solid #fff
}

.video,.video video {
    height: 450px
}

.actu h2 {
    margin-bottom: 8px!important;
    font-weight: 600;
    letter-spacing: 0;
    font-family: inherit
}

.actu h3 {
    margin-bottom: 10px!important;
    margin-top: 5px
}

.actu h4 {
    font-weight: 500;
    font-size: .9em;
    margin: 10px 0 5px
}

.actu p {
    font-size: 1em;
    margin-bottom: 5px
}

.video {
    width: 100%;
    background: #4a4643;
    text-align: center
}

.g-recaptcha>div {
    width: 100%!important;
    height: 78px;
    transform: scale(.77);
    webkit-transform: scale(0.77);
    text-align: center;
    position: relative
}

#corps .txt.complet {
    max-width: 1280px;
    width: 100%;
    margin: auto auto 30px;
    display: block;
    position: relative;
    top: 0
}

.txt.complet.actualites {
    position: relative;
    top: 0
}

#corps .txt.complet.achatBillet {
    max-width: 100%;
    background-size: cover;
    background-attachment: fixed;
    margin-bottom: 0
}

.achatBillet h5 a,.achatBillet .bouton a {
    padding: 16px 24px;
    color: var(--marron)!important;
    background: #fff!important;
    font-size: 1.1em;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,.5)
}

.achatBillet h5 a:hover,.achatBillet .bouton a:hover {
    padding: 16px 24px;
    background: var(--rouge)!important;
    color: #fff!important
}

.achatBillet h5 a::before,.achatBillet .bouton a::before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    background-image: url(/images/billeterie-shortcut.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 32px;
    width: 32px;
    vertical-align: middle
}

.achatBillet h5 a:hover::before,.achatBillet .bouton a:hover::before {
    background-image: url(/images/billeterie-shortcut-white.svg)
}

.center .bloc {
    margin: 0;
    width: 100%
}

#corps .noMargin {
    margin: 0 auto!important
}

#corps .txt.complet.article_actu {
    max-width: 960px;
    padding: 0 30px 80px!important;
    margin: auto!important;
    display: inline-block
}

#corps .article_actu h2 {
    color: var(--noir);
    font-weight: 700
}

#corps .article_actu h4 {
    color: var(--orange2);
    font-weight: 600
}

#corps .article_intro.article_actu h3 {
    font-size: 4em;
    margin-bottom: 0
}

#corps .article_actu h3 {
    font-size: 1.9em;
    text-transform: none;
    margin-bottom: 5px;
    margin-top: 15px
}

#corps .article_intro.article_actu h5,#corps .article_intro.article_actu .bouton {
    text-align: right!important
}

#corps .article_intro.article_actu .img {
    width: 100%!important;
    max-width: 900px;
    height: 450px!important;
    margin: 30px auto auto;
    background-color: #fff;
    background-size: cover!important;
    border-radius: 32px;
    margin-bottom: 30px!important
}

#corps .txt.droite .offset,#corps .txt.gauche .offset {
    display: inline-block;
    box-sizing: border-box;
    width: 35%;
    vertical-align: top;
    margin-left: 30px
}

#corps .txt.droite .offset {
    display: inline-block;
    box-sizing: border-box;
    width: 35%;
    vertical-align: top;
    margin-left: 0;
    margin-right: 30px;
    direction: ltr
}

#corps .txt.complet .bloc,#corps .txt.droite .bloc,#corps .txt.gauche .bloc {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: calc(45% - 30px);
    margin-left: 30px;
    direction: ltr
}

#corps .txt.droite .bloc {
    margin-left: 0;
    margin-right: 30px
}

#corps .txt.droite {
    direction: rtl
}

#corps .txt.complet .img,#corps .txt.droite .img,#corps .txt.gauche .img {
    top: 0;
    opacity: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height: 300px!important;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    margin-right: 30px
}

#corps .txt.droite .img {
    margin-right: 0;
    margin-left: 30px
}

#corps .txt.complet .imgSubBloc,#corps .txt.droite .imgSubBloc,#corps .txt.gauche .imgSubBloc {
    width: 45%;
    display: inline-block!important;
    vertical-align: top
}

#calendar {
    box-sizing: border-box;
    padding: 60px 40px;
    width: 100%;
    display: block;
    overflow: hidden!important;
    background: #ffffffbf
}

.calendar {
    text-align: center!important;
    width: 280px!important;
    margin: 0;
    display: inline-block;
    vertical-align: top
}

.squareblocs,.squarelinks {
    width: 100%;
    display: block;
    text-align: center
}

.calendar h4 {
    color: var(--marron);
    display: inline-block;
    width: auto;
    padding: 0;
    margin: 0 0 5px
}

.calendar .mois td,.calendar .mois th {
    width: 30px;
    height: 30px;
    border: 1px solid var(--marron);
    color: var(--marron);
    font-weight: 700;
    font-size: 1em
}

.calendar .mois th {
    background: var(--marron);
    color: #fff
}

.calendar .mois .curDate {
    position: relative;
    color: var(--text);
    font-weight: 800
}

.calendar .mois .curDate::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%
}

.calendar .mois .curDate::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%
}

.squarelinks {
    max-width: 1360px;
    margin: auto
}

.pageActu .squarelinks {
    background: #ead2d2;
    margin-top: 60px;
    max-width: none
}

.pageActu .squarelinks h5,.pageActu .squarelinks .bouton {
    margin-top: 30px
}

.squareblocs {
    margin: 0 auto 40px;
    position: relative
}

.demi,.tiers {
    display: inline-block;
    position: relative
}

.demi {
    width: calc(50% - 60px);
    margin: 0 25px 30px
}

.tiers {
    max-width: 360px
}

.quart {
    max-width: 280px;
    position: relative;
    display: inline-table;
    box-sizing: border-box;
    margin: 0 20px 30px
}

.demi iframe {
    border-radius: 32px
}

.demi h5,.quart h5,.tiers h5,.demi .bouton,.quart .bouton,.tiers .bouton {
    bottom: 30px;
    width: 100%;
    left: 0
}

.demi,.deuxtiers,.quart,.tiers {
    vertical-align: top;
    transition: .5s
}

.demi.color,.quart.color,.tiers.color {
    border-radius: 4px 96px 96px 4px
}

.demi p:last-child,.quart p:last-child,.tiers p:last-child {
    margin-bottom: 0!important
}

.demi .img.temoignage {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: 0 auto 20px;
    padding: 0;
    border-radius: 16px;
    border: 2px solid #fff;
    text-align: center;
    position: relative
}

.temoigne::before {
    content: '';
    top: -15px;
    left: -30px;
    position: absolute;
    background-image: url(/images/ils-temoignent.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%
}

.temoigne {
    padding-top: 15px
}

.demi .img.temoignage img {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translateY(-50%) translateX(-50%)
}

.page .demi.picto .img,.page .quart.picto .img,.page .tiers.picto .img {
    height: 100px!important
}

.squarelinks .demi.picto .img,.squarelinks .quart.picto .img,.squarelinks .tiers.picto .img {
    margin-bottom: 10px;
    width: 100%;
    height: 100px;
    background-size: 90%!important;
    background-position: center center!important;
    background-repeat: no-repeat!important
}

.page .matomoConsent {
    width: 100%;
    border: none;
    background: #463f3f17;
    height: auto;
    border-radius: var(--myradius)
}

.galerie .galimg,.img.logo {
    background-position: center center
}

.partenaires.bloc.complet {
    width: 100%!important;
    margin: 50px 0 0!important
}

.galerie {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: block;
    margin-bottom: 50px
}

.galerie .galimg {
    display: inline-block;
    vertical-align: middle;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    margin: 15px;
    padding: 0
}

.home .galerie .galimg {
    height: 140px;
    width: auto;
    margin: 0 15px;
    border-radius: none;
    vertical-align: middle
}

.home .galerie img {
    width: 100%;
    height: auto;
    max-height: 90px;
    margin: 0!important;
    padding: 0!important;
    display: inline-block!important
}

.galerie .galimg:hover {
    opacity: .7
}

.googlemap {
    margin: 0 5%;
    width: 90%
}

.youtube {
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden
}

.youtube embed,.youtube iframe,.youtube object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0
}

.cnil input {
    float: left;
    margin-right: 5px
}

.cnil p,.cnil strong {
    text-align: justify;
    font-size: .8em
}

#formulaire {
    max-width: 600px!important
}

#formulaire td {
    padding: 5px
}

#formulaire td:first-child {
    width: 20%
}

#formulaire td p {
    font-weight: 500;
    color: var(--text);
    margin-top: 15px;
    font-size: 1.1em;
    text-align: center
}

#formulaire a.link {
    text-align: left;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--myradius);
    color: #fff;
    font-weight: 600
}

#formulaire a.link:hover {
    background-image: url(images/picto-doigt.svg);
    background-repeat: no-repeat;
    background-size: 26px auto;
    padding: 4px 12px 4px 38px
}

#formulaire input,#formulaire select,#formulaire textarea {
    padding: 4px 8px;
    box-sizing: border-box;
    border: 1px solid var(--rouge);
    border-radius: 4px;
    display: inline-block;
    font-size: 1em;
    width: 100%;
    transition: .3s linear
}

#formulaire input::placeholder,#formulaire textarea::placeholder {
    color: #9b9a9a
}

#formulaire input:focus::placeholder,#formulaire textarea:focus::placeholder {
    color: #999
}

#formulaire textarea {
    height: 110px;
    resize: vertical
}

#formulaire input.radio {
    width: auto;
    margin-right: 5px;
    margin-left: 20px;
    padding: 0
}

#formulaire input#datepicker {
    background-image: url(/images/calendar.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain
}

#formulaire input.Btn,a.Btn {
    width: auto;
    cursor: pointer;
    padding: 6px 36px;
    background: var(--text);
    color: #fff;
    font-weight: 600;
    font-size: 1em;
    border-radius: 32px;
    margin-bottom: 30px;
    transition: .3s linear;
    border: 1px solid var(--text)
}

#formulaire input.Btn:hover,a.Btn:hover {
    padding: 6px 46px;
    background: var(--rouge);
    border: 1px solid var(--rouge);
    color: #fff
}

a.Btn {
    text-align: center;
    float: none;
    padding: 3px 20px;
    margin: 0
}

#corps .Error {
    float: left;
    width: 100%
}

#corps .Error ul {
    padding: 10px;
    width: 90%;
    margin: auto;
    border-radius: var(--myradius);
    border: 1px solid #4a4643
}

#corps .Error ul li {
    list-style-type: none;
    font-weight: 300;
    margin-bottom: 3px
}

#Pied .links li a,.download a {
    font-weight: 500
}

.logotext a,.logotext h2 {
    font-weight: 700
}

#corps p.consent input {
    float: left;
    width: auto;
    height: auto;
    height: 10;
    line-height: auto;
    padding: 0;
    margin: 3px 3px 0 0
}

.cnil {
    width: 50%;
    margin: auto
}

.diaporama,.file {
    width: 100%;
    display: inline-block;
    text-align: center!important;
    margin: 60px 0 0
}

.demi .diaporama,.demi .file,.tiers .diaporama,.tiers .file {
    margin: 15px 0
}

.download {
    margin-bottom: 10px;
    display: bock;
    vertical-align: top
}

.demi .download,.forced_col .download,.tiers .download {
    display: block;
    margin: 0 0 20px
}

.download a {
    color: var(--text);
    padding: 8px 32px 8px 42px;
    text-transform: normal;
    font-size: 1.4em;
    transition: .2s;
    background-color: #fff;
    border: 2px solid var(--text);
    background-image: url(/images/picto-download.svg);
    background-position: 16px center;
    background-size: 18px 18px;
    border-radius: 4px 16px 16px 4px;
    box-sizing: border-box;
    text-transform: uppercase
}

.download a:hover {
    background-color: var(--rouge);
    background-image: url(/images/picto-download-white.svg);
    border: 2px solid var(--rouge);
    color: #fff!important
}

.diap {
    vertical-align: top;
    width: 150px;
    height: 150px;
    margin: 5px;
    transition: .32s;
    box-sizing: border-box
}

.diap img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block!important
}

.diap:hover {
    opacity: .75;
    transform: scale(1.05)
}

.partenairesBloc .img {
    background-size: contain;
    border-radius: 0
}

.partenairesBloc .diap .img {
    height: 140px!important;
    width: 140px!important;
    margin: 10px 20px
}

#backToTop {
    z-index: 999;
    bottom: 70px;
    right: 10px;
    width: 40px;
    transition: .3s linear
}

#Pied {
    background-size: cover;
    background-attachment: fixed
}

#Pied .partenaires .img {
    transform: none;
    max-width: 800px;
    width: 100%;
    height: 50px;
    margin-bottom: 30px;
    border-radius: 0
}

#Pied .pSocial {
    position: absolute;
    right: 30px
}

#Pied .pSocial li a svg {
    fill: white;
    width: 36px;
    height: auto
}

#Pied .pSocial li a svg:hover {
    fill: var(--rouge);
    width: 36px;
    height: auto
}

.pied {
    margin: auto;
    padding: 40px 0
}

.img.logo {
    height: 100px;
    background-size: contain;
    margin-bottom: 10px;
    transform: rotateZ(0)
}

.links,.logotext {
    vertical-align: top;
    margin: 0 30px 30px
}

.logotext h2 {
    font-size: 2.2em
}

#Pied .links ul {
    margin-top: 30px;
    padding-left: 0;
    columns: 2
}

#Pied .links .pSubMenu {
    margin-top: 10px;
    padding-left: 20px;
    columns: 1
}

#Pied .links li {
    list-style-type: none;
    margin-right: 10px
}

#Pied .links .pSubMenu li {
    list-style-type: disc
}

#Pied .links li a {
    font-size: inherit
}

#Pied p {
    color: #fff;
    line-height: 24px
}

#Pied h5 a,#Pied .bouton a {
    border: none;
    background: #fff
}

.mentions {
    color: #fff;
    font-size: .9em!important;
    margin-top: 0
}

.mentions a {
    color: #fff!important;
    font-size: inherit!important;
    font-weight: inherit!important
}

.mentions a:hover {
    color: var(--pepite)!important
}

@media screen and (max-width: 980px) {
    #menu li a {
        letter-spacing:0!important;
        font-size: 1em!important
    }

    #entete .baseline p {
        text-align: center;
        font-weight: 800;
        color: var(--bleu);
        font-size: 1.7em!important;
        line-height: 1em
    }
}

@media screen and (max-width: 920px) {
    .twoBlocs div {
        width:100%!important;
        margin: 0 0 20px
    }

    .twoBlocs .logText {
        margin: 0 0 20px!important
    }
}

@media screen and (max-width: 860px) {
    .actualites .titre,.agenda.elem .infos,.agenda.elem .infos .imgPreview {
        margin-bottom:20px
    }

    #imageprincipale,#slideshow,.actualite {
        animation: none
    }

    #SmartMenu ul li,.actualites,.actuliste,.galerie,.hoverVid {
        text-align: center
    }

    #imageprincipale,#slideshow,.actu h5,.galerie .galimg,.hoverVid,.actu .bouton {
        position: relative
    }

    .txt.intro .img,h5.social ul,.bouton.social ul {
        margin-top: 10px
    }

    #SmartMenu,#corps .txt.droite,#corps .txt.gauche,.actualite,.actualites,.actuliste,.full,.galerie .galimg,.hoverVid,.partenairesBloc.large,.slides li .text,.tel {
        box-sizing: border-box
    }

    .smart {
        display: block!important
    }

    .ordi,.papier::after,.papier::before,.papierSimple::after,.papierSimple::before {
        display: none!important
    }

    .article_agenda {
        margin: 20px 0!important;
        padding: 10px
    }

    #corps .txt.article.complet.withColor,.infosBox {
        margin-bottom: 20px!important
    }

    .agendaDetails {
        padding: 10px 0 0!important
    }

    .agenda.elem .infos .img {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px
    }

    .agenda.elem .head p {
        display: block;
        font-size: 1.2em!important
    }

    .agenda.elem .head img {
        height: 24px;
        width: auto;
        margin-right: 8px!important;
        margin-top: -3px
    }

    .agenda.elem .head h5.oeil,.agenda.elem .head .bouton.oeil {
        right: 0
    }

    .agenda.elem .head h5 a,.agenda.elem .head .bouton a {
        font-size: 1.2em;
        padding: 4px 16px
    }

    .agenda.elem .head h5 a:hover,.agenda.elem .head .bouton a:hover {
        padding: 4px 16px!important
    }

    .accueil .offset {
        width: 100%;
        display: block
    }

    #slideshow {
        width: 100%;
        border-radius: 0;
        display: inline-block
    }

    #slideshow .slides {
        position: relative;
        display: block
    }

    .slides li .text {
        width: 90%
    }

    .actuliste,.full {
        width: 100%;
        padding: 30px
    }

    .slick-next,.slick-prev {
        width: 25px;
        height: 100px
    }

    [dir=rtl] .slick-prev {
        right: -50px;
        left: auto
    }

    [dir=rtl] .slick-next {
        right: auto;
        left: -25px
    }

    #corps .txt.deuxtiers,#temoignages,.mapactu {
        padding: 20px
    }

    .actualites .inf,.article_intro.droite .imgPrincipale,.article_intro.papierOrange .imgPrincipale,.temoignage,.temoignages,.txt.evenements .sBloc {
        width: 100%
    }

    .temoignage h6 {
        font-size: 1.4em;
        line-height: 1.1em
    }

    #SmartMenu .subMenu li a,.temoignage p {
        font-size: 1.2em
    }

    #temoignages .illus,.breadcrumb,.page .full.squarlink::before {
        display: none
    }

    .temoignage h6::after,.temoignage h6::before {
        height: 16px;
        width: 16px
    }

    .slideshow {
        display: inline-block;
        width: 100%;
        height: 200px;
        margin: 20px 0
    }

    a.rslides_nav.next,a.rslides_nav.prev {
        position: absolute;
        right: 5px;
        width: 30px!important;
        background-image: url(/images/right.svg)
    }

    a.rslides_nav.prev {
        left: 5px;
        background-image: url(/images/left.svg)
    }

    .txt.intro .img {
        border: 1px solid var(--gris);
        width: 100%;
        background: 0 0!important;
        margin-bottom: 0
    }

    #corps .txt.droite.contain .img,#corps .txt.gauche.contain .img,.decouvrez .quart .img {
        background-size: contain!important
    }

    .page .full.squarlink {
        margin: 0!important;
        width: 100%!important
    }

    .page .full.squarlink .demi {
        margin: 0
    }

    .page .txt.Contact {
        padding: 15px!important
    }

    .page .complet.fond,.page .txt.complet {
        padding: 30px 15px!important
    }

    .home .txt.quart,.page .demi,.page .quart,.page .tiers,.page .txt.complet,.txt.actualites.demi {
        padding: 20px!important
    }

    .actualites .titre {
        width: 100%;
        writing-mode: lr;
        text-align: left;
        transform: none
    }

    .actualites .titre strong {
        font-weight: 800;
        font-size: inherit;
        color: inherit
    }

    #corps .accueil {
        background: var(--bleu2);
        min-height: auto;
        margin: 0 0 20px;
        overflow: none
    }

    #corps .accueil .article_intro {
        width: 100%!important;
        padding: 40px;
        animation: none
    }

    #imageprincipale {
        width: 100%;
        height: auto;
        border-radius: 0;
        float: right
    }

    #imageprincipale img,.shortlinks .closed {
        display: block
    }

    #imageprincipale .img {
        width: 100%;
        height: 100%;
        background: 0 0
    }

    .actualites {
        width: 100%;
        padding: 30px;
        margin: auto
    }

    .actu,.actualite,.galerie {
        width: 100%;
        margin: 0 0 30px
    }

    .hoverVid {
        top: -4px;
        left: 0;
        transform: none;
        z-index: 99;
        padding: 12px 24px;
        background: #fff;
        border-radius: 0;
        width: 100%
    }

    .hoverVid .text p a {
        font-size: 20px;
        top: 0
    }

    .hoverVid .chevron,.parcoursHover .chevron {
        height: 20px
    }

    #entete .logo {
        width: 160px!important;
        height: auto;
        top: 10px!important;
        left: 10px!important
    }

    #entete #BtnMenu {
        width: 50px!important;
        height: 50px!important;
        top: 10px!important;
        right: 10px!important
    }

    #SmartMenu {
        padding: 30px 30px 0
    }

    #SmartMenu ul {
        list-style-type: none;
        padding-left: 0!important;
        margin-left: 0!important
    }

    #SmartMenu ul li a {
        font-size: 1.5em
    }

    #SmartMenu ul li {
        margin-bottom: 18px
    }

    .galerie .galimg {
        height: auto;
        margin: 10px;
        transition: .2s ease-in;
        display: inline-block;
        vertical-align: top;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;
        border-radius: var(--myradius)
    }

    .actu {
        height: auto
    }

    .actu:last-child,.decouvrez .quart .img,.decouvrez .txt.quart,.page .txt {
        margin-bottom: 0
    }

    .actu h2 {
        margin-bottom: 0!important
    }

    .actu h5,.actu .bouton {
        top: 0
    }

    .actu .img {
        height: 160px!important
    }

    .demi,.home .txt.quart,.quart,.squarelinks,.tiers {
        width: 100%!important;
        margin: 0 0 20px!important;
        padding: 0!important;
        display: block!important;
        height: auto!important
    }

    .txt.demi {
        padding: 0 30px!important
    }

    .demi h5,.quart h5,.tiers h5,.demi .bouton,.quart .bouton,.tiers .bouton {
        position: relative!important;
        top: 0
    }

    .fondAgenda,.txt {
        padding: 0
    }

    .bloc {
        width: 100%;
        padding: 0;
        margin: 0
    }

    .agenda.elem .infos .imgPreview,.agenda.elem .infos .offset,.article-intro .bloc,.article_intro,.article_intro .bloc,.elem.archive {
        width: 100%!important
    }

    #Pied h5,.page .demi .img,.page .tiers .img,#Pied .bouton {
        margin-bottom: 10px
    }

    .offset,.page,.page .txt.complet {
        width: 100%!important;
        margin: 0!important;
        text-align: left!important;
        padding: 0
    }

    .shortlinks,h5.social,.bouton.social {
        text-align: center!important
    }

    .decouvrez,.thematique {
        padding: 15px
    }

    .squareblocs {
        margin: 0 auto
    }

    .article_intro {
        padding: 0!important;
        margin: 0!important
    }

    .article_intro.droite .bloc,.article_intro.papierOrange .bloc {
        width: 100%;
        margin-bottom: 30px
    }

    #corps .txt.droite .bloc,#corps .txt.gauche .bloc {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0!important
    }

    #corps .txt.droite .img,#corps .txt.gauche .img {
        width: 100%;
        height: 280px!important;
        margin-right: 0;
        border-radius: 16px;
        background-size: cover!important
    }

    .txt.details,.txt.intro {
        width: calc(100% - 40px)!important;
        margin: 0!important;
        padding: 20px
    }

    .page .article_intro,.squareblocs .txt.papier,.squareblocs .txt.papierOrange,.squareblocs .txt.papierSimple {
        padding: 30px!important
    }

    .page .squarlink {
        width: 100%!important;
        padding: 30px;
        margin: auto
    }

    .txt,.txt.home {
        width: 100%!important;
        margin: 10px 0 0;
        display: block
    }

    .partenairesBloc.large,.tel {
        margin: 0;
        padding: 15px
    }

    #corps .article_intro .imgPrincipale,.home .squarelinks,.introBloc .imgPrincipale {
        margin-top: 30px!important
    }

    .txt.home .img {
        height: 200px;
        width: 100%;
        margin-bottom: 0
    }

    .txt.home .img img {
        height: 100%;
        width: auto
    }

    .introBloc {
        padding: 30px
    }

    .mapAccueil,form {
        margin-bottom: 30px
    }

    .fondActu,h5.social,.bouton.social {
        margin: 30px 0 0
    }

    #corps .Contact {
        margin-bottom: 60px!important
    }

    #corps .full .demi {
        width: 100%!important;
        margin: 0 0 30px!important
    }

    .home .squarelinks {
        padding: 30px;
        margin: auto
    }

    #corps .imgPrincipale,#corps .page .txt .img.big,#corps .page .txt .img.big img {
        width: 100%;
        display: inline-block;
        float: none;
        margin: 0;
        padding: 0;
        transform: none
    }

    .actuAccueil .imgPrincipale {
        margin-right: 0;
        width: 250px;
        height: 270px;
        margin-bottom: 15px!important
    }

    #corps .page .txt .img.big img {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0
    }

    #corps .txt.complet .imgSubBloc,#corps .txt.droite .imgSubBloc,#corps .txt.gauche .imgSubBloc {
        width: 100%!important;
        margin-right: 0!important;
        margin-left: 0!important
    }

    .macaron {
        top: -80px;
        left: -20px;
        width: 180px
    }

    h5.social,.bouton.social {
        padding: 6px 16px;
        border-radius: 16px
    }

    h5.social li,.bouton.social li {
        height: 40px
    }

    h5.social li a svg,.bouton.social li a svg {
        width: 40px
    }

    .txt.actualites .text,.txt.article_galerie .text {
        width: 100%;
        display: inline-block;
        margin: 0;
        position: relative!important
    }

    .txt.actualites .text {
        position: relative!important;
        top: 0;
        transform: none
    }

    #corps .txt.complet.actualites .img.fullActu,.mediaPrincipal,.txt.article_galerie .slideshow {
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center
    }

    #corps .fondActu.accueil .text h2 {
        font-size: 3em!important;
        top: 0;
        left: 20px
    }

    .fondActu.accueil {
        padding-top: 20px
    }

    #corps .txt.complet.actualites .img.fullActu,.txt.article_galerie .slideshow {
        width: 100%;
        height: 360px!important;
        display: block;
        vertical-align: middle;
        transform: rotateZ(0);
        border-radius: 0;
        right: 0;
        margin: 0
    }

    #Pied .links ul {
        margin-top: 0;
        padding-left: 0;
        columns: 2
    }

    .mediaPrincipal {
        width: auto;
        height: 50vh;
        overflow: hidden;
        margin-bottom: 15px
    }

    .mediaPrincipal img {
        width: 100%;
        height: auto
    }

    .internalHoverVid h1 {
        font-size: 3em;
        line-height: 1em;
        margin-bottom: 0
    }

    .elem.actu {
        background: #fff;
        border-radius: 12px
    }

    .carrousel {
        margin: 20px auto
    }

    .carrousel .elem {
        padding: 10px
    }

    .slick-prev {
        left: -40px
    }

    .slick-next {
        right: -40px
    }

    .txt h1 {
        font-size: 2.4em!important
    }

    #corps .txt.actualites h2,.txt h2 {
        font-size: 2em!important
    }

    .reseau h2 {
        font-size: 1.5em!important
    }

    #corps .txt.actualites h3,.txt h3 {
        font-size: 1.8em!important
    }

    .reseau h2 img {
        max-height: 56px;
        margin-right: 10px
    }

    .reseau .sBloc * {
        font-size: .9em!important
    }

    .txt h4 {
        font-size: 1.6em!important
    }

    .txt.actualites .bigcol,.txt.actualites .smallcol {
        width: 100%!important;
        padding: 20px;
        margin-left: 0;
        border: none;
        box-sizing: border-box
    }

    .txt.actualites .smallcol {
        margin-top: -20px;
        border-top: 1px solid var(--bleu)
    }

    .txt.actualites .isColoured {
        padding: 0!important;
        width: 100%
    }

    .txt.actualites .horseries {
        font-size: 1.4em!important
    }

    #corps .txt.actualites h3 {
        line-height: 1em!important
    }

    #corps .txt.actualites h4 {
        font-size: 1.2em!important;
        margin-top: 10px
    }

    #corps .txt.actualites h5 a,#corps .txt.actualites .bouton a {
        font-size: 1.1em!important
    }

    #corps .txt.actualites .img {
        width: 100%;
        margin: 0
    }

    #formulaire {
        width: 90%;
        margin: 30px auto 0
    }

    #formulaire p,#formulaire td {
        text-align: left
    }

    .cnil p,.cnil strong {
        font-size: 12px!important
    }

    .cnil {
        width: 80%;
        margin-bottom: 1px
    }

    #corps .txt.complet,#corps .txt.droite,#corps .txt.gauche {
        margin-bottom: 15px;
        animation: none!important
    }

    #corps .txt.complet {
        border-radius: 0;
        padding: 30px
    }

    #corps .txt.droite,#corps .txt.gauche {
        padding: 30px;
        border-radius: 0;
        width: 100%!important;
        margin: 0 0 30px;
        animation: none!important
    }

    #corps .txt.demi,#corps .txt.tiers {
        width: 100%!important;
        margin-bottom: 30px;
        max-width: none;
        height: auto;
        padding: 0 30px 30px!important
    }

    .pepite.demi h5,.pepite.demi .bouton {
        margin: 30px 0!important
    }

    .home .tiers:hover .img {
        margin-top: 0;
        background: 0 0
    }

    #corps .txt.droite .img img,#corps .txt.gauche .img img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%
    }

    #Pied {
        margin-top: 0!important
    }

    .galerie .galimg {
        width: 42.5%
    }

    #carousel_box {
        width: calc(100% + 60px);
        margin-left: -30px
    }

    #entete.reduce .topSocial {
        height: 50px!important
    }

    .pied {
        margin-bottom: 110px
    }

    .shortlinks {
        position: fixed;
        bottom: -10px;
        width: 100%;
        z-index: 99;
        background: var(--marron)
    }
    .calendrier.shortlink{
        width: 100%;
margin:0;
border-radius:0;
padding:8px;
height:auto;
border-top:4px solid var(--marron);
border-bottom:1px dotted var(--marron);
    }
.shortlink svg {
    width: auto;
    height: 20px;
}

   .billeterieLink,.calendrierLink,.restoLink {
        width: calc(33% - 3px);
        display: inline-block;
        vertical-align: top;
        height: 65px; 
        box-sizing:border-box;
        border-radius:0;
        padding:8px;
        margin:0;
    }

    .shortlink .smart {
        display: block!important;
        margin: 3px auto auto!important;
        text-align:center!important;
    }

    .shortlink a {
        font-size: .75em;
        display: inline-block
    }
}

@media screen and (max-width: 640px) {
    .agenda.elem,.article.txt .bloc,.article_intro h5.showAllActus a,.introBloc,.temoignages .temoignage,.article_intro .bouton.showAllActus a {
        box-sizing:border-box;
        box-sizing: border-box
    }

    #Pied .links ul {
        margin-top: 0;
        padding-left: 0;
        columns: 1
    }

    .slickTheme {
        max-width: 100%;
        padding: 15px;
        margin: auto
    }

    .themeThumb .img {
        width: 100%;
        height: 160px;
        background-size: contain!important;
        border-radius: 16px;
        overflow: hidden
    }

    #slickshow {
        width: 100%!important;
        background-image: none;
        background-color: #f5ab5a
    }

    .slickshowSlides {
        width: 90%;
        margin: auto;
        display: inline-block;
        padding: 30px;
        position: relative;
        top: 0;
        transform: translateY(0)
    }

    .introBloc,.introSlide {
        display: inline-block;
        width: 100%;
        max-width: 1360px;
        position: relative;
        left: 0;
        transform: translateX(0)
    }

    .introBloc {
        width: 100%!important;
        display: block
    }

    .introBloc .imgPrincipale {
        width: 100%;
        margin-right: 0
    }

    .introBloc .offset {
        width: 100%
    }

    .demi.color,.deuxtiers.color,.quart.color,.tiers.color {
        border-radius: 0;
        height: auto!important;
        padding: 30px!important
    }

    .article.left .bloc,.droite .bloc {
        width: 100%;
        margin-right: 0;
        margin-left: 0
    }

    .article.txt .bloc {
        padding: 20px!important
    }

    .txt .img img {
        border-radius: 96px 0 0 96px
    }

    .img.fulllarge {
        margin-bottom: 40px
    }

    #Pied::before {
        display: none!important
    }

    #Pied .img.logo {
        margin: 50px auto 10px;
        position: relative;
        display: block!important;
        float: none
    }

    .logotext * {
        display: block;
        text-align: center!important
    }

    .bkgpied .partenaires {
        width: 100%;
        float: none;
        text-align: center!important
    }

    .bkgpied .partenaires .img {
        width: 190px;
        height: 125px;
        background-size: contain;
        background-position: left center;
        image-rendering: crisp-edges
    }

    .filterMenu {
        background: var(--vert);
        text-align: left;
        padding: 20px;
        margin-bottom: 30px
    }

    .filterMenu select {
        margin-bottom: 4px;
        width: 100%
    }

    .rSearch * {
        width: 100%;
        max-width: 1360px;
        padding: 0;
        margin: auto;
        text-align: center!important;
        font-size: 1.2em
    }

    .choixBloc .tiers {
        padding: 0 30px 30px!important
    }

    .large {
        margin-bottom: 0;
        padding: 20px 0;
        text-align: center
    }

    .large .bloc.title {
        margin: 0 0 20px;
        padding: 0
    }

    .agenda.elem {
        width: 100%;
        background: var(--orange);
        text-align: left;
        border-radius: 0!important;
        line-height: 32px;
        position: relative
    }

    .filterActu h5,.filterActu select,.filterActu .bouton {
        display: block;
        margin-bottom: 10px;
        width: 100%!important
    }

    .article_intro h5.showAllActus a,.article_intro .bouton.showAllActus a {
        width: 100%!important
    }

    .article_intro h5.showAllActus a:hover,.article_intro .bouton.showAllActus a:hover {
        padding: 8px 20px 8px 46px;
        background-position: 8px center
    }

    .filtresAgenda h5 a,.filtresAgenda input,.filtresAgenda select,.filtresAgenda .bouton a {
        display: block;
        padding: 8px 20px;
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
        text-align: left;
        box-sizing: border-box
    }

    .filtresAgenda h5,.filtresAgenda .bouton {
        display: block;
        width: 100%!important
    }

    #Pied .liens li {
        width: 100%;
        display: block;
        vertical-align: top;
        margin: 0;
        text-align: center
    }

    .temoignages .temoignage {
        padding: 30px;
        text-align: center!important;
        display: inline-block
    }

    #Pied .partenaires .img {
        transform: none;
        max-width: 800px;
        width: 90%;
        height: 20px;
        margin-bottom: 30px;
        border-radius: 0
    }
}

@media screen and (max-width: 480px) {
    .mediaParcours.carnet img,.mediaParcours.lara img {
        max-width:100vw;
        max-height: 120vw
    }

    .calendrier.shortlink {
        width: 100%;
        border-radius: 0;
        margin: 0 0 8px
    }

    #backToTop {
        bottom: 135px;
        right: 10px
    }
}