@charset "utf-8";

/* Dependency */
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:normal;font-weight:700;src:url("/media/kzsah2mm/foundersgrotesk-bold.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:italic;font-weight:700;src:url("/media/x3obewsd/foundersgrotesk-bolditalic.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:normal;font-weight:300;src:url("/media/gygp3mh0/foundersgrotesk-light.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:italic;font-weight:300;src:url("/media/mabbf1ow/foundersgrotesk-lightitalic.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:normal;font-weight:500;src:url("/media/n3rgjskz/foundersgrotesk-medium.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:italic;font-weight:500;src:url("/media/jvzcpmvn/foundersgrotesk-mediumitalic.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:normal;font-weight:400;src:url("/media/4hhdd1fp/foundersgrotesk-regular.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:italic;font-weight:400;src:url("/media/hlxffjox/foundersgrotesk-regularitalic.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:normal;font-weight:600;src:url("/media/irmcuy4j/foundersgrotesk-semibold.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGrotesk;font-style:italic;font-weight:600;src:url("/media/q04cgvus/foundersgrotesk-semibolditalic.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGroteskMono;font-style:normal;font-weight:300;src:url("/media/nfbn3bgm/foundersgroteskmono-light.woff2") format("woff2")}
@font-face{font-display:swap;font-family:FoundersGroteskMono;font-style:normal;font-weight:400;src:url("/media/vraddj3v/foundersgroteskmono-regular.woff2") format("woff2")}

/** Styles généraux **/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: FoundersGrotesk, Trade Gothic, Franklin Gothic, Helvetica, Arial, sans-serif;
}
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}
body {
    color: #1D1D1B;
    margin: 0
}
h1, h2, h3, h4, h5, h6 {
    font-family: FoundersGrotesk, Trade Gothic, Franklin Gothic, Helvetica, Arial, sans-serif;
}
h2, h3 {
    margin-bottom: 30px;
}
h4, h5 {
    margin-bottom: 20px;
}
h1 img {
    width: 100%;
}
h2 {
    font-size: 44px;
    font-weight: 700;
    position: relative;
}
h3 {
    font-size: 36px;
    font-weight: 700;
}
h4 {
    color: #009186;
    font-size: 24px;
}
h5 {
    font-size: 21px;
    font-weight: 500;
}
p, ul li {
    font-weight: 300;
    font-size: 21px;
    line-height: 1.5;
}
p {
    margin: 0 0 30px;
}
a {
    color: #1D1D1B;
    font-size: 21px;
    font-weight: 400;
    text-decoration: none;
}
a:focus, button:focus {
    outline: 2px solid #a63a8d;
    /*outline-offset: 2px;*/
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.8em;
    margin-bottom: 1.3em;
    width: 100%;
}
table td, table th {
    font-size: 18px;
}
table td.aligne-droite {
    text-align: right;
}
table td.gras {
    font-weight: 700;
}
table.m-table tr:first-child {
    border-bottom: 3px solid #009fa4;
}
.m-table thead th, .m-table tr:first-child td {
    font-size: 17px;
    padding-top: 0;
    vertical-align: bottom;
    font-weight: bold;
}
.m-table tbody tr {
    border-bottom: 1px solid #009fa4;
}
.m-table tr {
    border-top: 0 none!important;
    border-left: 0 none!important;
    border-right: 0 none!important;
}
.m-table td, .m-table th {
    padding: 1em;
}
nav ul {
    display: flex;
    align-items: center;
    margin: 0;
    width: 100%;
}
header nav ul {
    justify-content: flex-end;
}
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0
}

.sr.focusable {
    position: absolute;
    font-size: 18px;
    color: black;
    left: 10px;
    top: 5px;
    background: #eee;
    z-index: 20;
    padding: 0 5px
}
.sr.focusable:active,.sr.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    width: auto
}
.not-visible {
    visibility: hidden;
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
/** ---- Boutons ----- **/
.btn {
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    outline: 0 !important;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: normal;
    color: #08080d;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    padding: 15px 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
    text-transform: uppercase;
    z-index: 0    
}
.btn-inverse {
    border: 3px solid #fff;
    border-image-source: linear-gradient(#fff, #fff);
    border-image-slice: 2;
    color: #fff;
    -webkit-transition: color .25s ease;
    transition: color .25s ease;
}
.btn-couleur {
    color: #fff;
}
.btn:before {
    background: #fff;
    bottom: 3px;
    content: "";
    left: 3px;
    position: absolute;
    right: 3px;
    top: 3px;
    -webkit-transition: -webkit-transform .25s ease;
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: -1
}
.btn-inverse:before {
    background: linear-gradient(90deg, #0072B8, #72237A);
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
.btn-couleur:before {
    background: linear-gradient(90deg, #22366b, #72237A);
}
.btn::after {
    background: linear-gradient(90deg, #0072B8, #72237A);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -2
}
.btn-couleur:after {
    background: #fff;
}
.btn-inverse:after {
    background: transparent;
}
.btn:active, .btn:focus, .btn:hover {
    color: #fff;
}
.btn-couleur:active, .btn-couleur:focus, .btn-couleur:hover {
    color: #08080d;
}
.btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover {
    color: #fff;
    border-image-source: linear-gradient(90deg, #0072B8, #72237A)
}
.btn:active:before, .btn:focus:before, .btn:hover:before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}
.btn-inverse:active:before, .btn-inverse:focus:before, .btn-inverse:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1)
}
.btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65
}
.btn-inverse[disabled], fieldset[disabled] .btn-inverse {
    border-image-source: linear-gradient(#fff, #fff);
    color: #fff;
    cursor: not-allowed;
    opacity: .65
}
.btn[disabled]:active:before, .btn[disabled]:focus:before, .btn[disabled]:hover:before, fieldset[disabled] .btn:active:before, fieldset[disabled] .btn:focus:before, fieldset[disabled] .btn:hover:before {
    -webkit-transform: none;
    transform: none
}
.btn-inverse[disabled]:before, fieldset[disabled] .btn-inverse:before {
    -webkit-transform: scale(0);
    transform: scale(0)
}
.btn--block {
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 100%
}

/*  -------------------------------------
    Header
    ------------------------------------- */
header {
    display: block;
    min-height: 33vh;
    padding-bottom: 20px;
    position: relative;
}
h1.logo-espace400 {
    background-color: #fff;
    margin: 0;
    padding: 10px;
    position: absolute;
    width: 290px;
    z-index: 20;
}
header h1 a:active {
    outline: none;
}
header h1 a:active img {
    background-color: #EFEFEF;
}
.zone-header {
    background-color: #009186;
    background: no-repeat url("/media/e3hbwgug/accueil.jpg");
    background-position: center;
    background-size: cover;
    position: relative;
}
.zone-header::after {
    background: linear-gradient(174.62deg, #08080d, transparent), linear-gradient(135deg, #973fff, #009fa4);
    content: "";
    height: 100%;
    left: 0;
    opacity: .5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.nav-header {
    width: 100%;
    background: rgba(0, 145, 134, 0.75);
    border-bottom: #CAF500 solid 4px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}
/** ------------- Navigation principale -------------- **/
#navPrincipale {
    margin-left: auto;
    margin-right: 0;
    width: 100%;
}
#navPrincipale ul {
    color: #fff;
}
#navPrincipale ul.liste-nav li {
    border-left: solid 1px rgba(255, 255, 255, 0.4);
}
#navPrincipale ul li a.dropdown-btn {
    color: #fff;
    display: block;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 2px;
    padding: 15px 35px;
    text-align: center
}
#navPrincipale ul li a.dropdown-btn:hover, #navPrincipale ul li a.dropdown-btn:focus {
    background-color: #009186;
    text-decoration: none;
}
#menuBar {
    display: none;
    background: none;
    border: none;
    width: 48px;
    height: 48px;
    margin: 10px 20px;
}
.bar {
    height: 5px;
    width: 100%;
    background-color: #fff;
    display: block;
    border-radius: 5px;
    transition: 0.3s ease;
}
#bar1 {
    transform: translateY(-8px);
}
#bar3 {
    transform: translateY(8px);
}
/* Dropdown */
#navPrincipale .dropdown-btn::after {
    content: '';
    border: 4px solid transparent;
    border-top: 4px solid white;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}
#navPrincipale .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 360px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
#navPrincipale .dropdown-content.change {
    display: block;
}
#navPrincipale .dropdown-content ul {
    display: block;
    padding-left: 0;
}
#navPrincipale .dropdown-content ul li {
    border-left: none;
    height: auto;
}
#navPrincipale .dropdown-content ul li:last-child a {
    border: none;
}
#navPrincipale .dropdown-content ul li a {
    border-bottom: 1px solid #cacaca;
    color: #23356B;
    display: block;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: 0.9px;
    padding: 10px 20px;
    text-align: left;
    width: 100%;
}
#navPrincipale .dropdown-content ul li a:hover {
    background-color: #e4e4e4;
    text-decoration: none;
}
#navPrincipale .dropdown-content ul.sub-links li a {
    border-top: 1px solid #e4e4e4;
    font-weight: 300;
    padding-left: 40px;
    width: 100%;
}
#navPrincipale .dropdown:hover .dropdown-content, #navPrincipale .dropdown:focus .dropdown-content {
    display: block;
}
.last-dropdown {
    right: 0;
}
/** ------------- Champ recherche -------------- **/
#navPrincipale button {
    background: none;
    border: 0;
    padding: 14px 15px;
}
#navPrincipale button:hover, #navPrincipale button:focus {
    background-color: #009186;
}
#navPrincipale button .picto-loupe {
    width: 32px;
    height: 32px;
}
#navPrincipale form#rechercheChamp {
    display: none;
    position: absolute;
    right: 0;
    background-color: #009186;
    padding: 7px;
}
#navPrincipale form#rechercheChamp.change {
    display: block;
}
#navPrincipale form#rechercheChamp .zone-champ {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}
#navPrincipale form#rechercheChamp input {
    border: none;
    height: 60px;
    width: 350px;
    padding: 6px 15px;
}
#navPrincipale form#rechercheChamp input:focus {
    outline: 2px solid #a63a8d;
    outline-offset: -2px;
}
#navPrincipale form#rechercheChamp button:hover, #navPrincipale form#rechercheChamp button:focus {
    background-color: #CFCFCF;
    outline: none;
}
#navPrincipale form#rechercheChamp button:active {
    background-color: #888888;
}
#navPrincipale form#rechercheChamp button:active .picto-loupe::before {
    filter: invert(100%);
}
/** ------------- Menu secondaire -------------- **/
#navSecondaire {
    width: 100%;
    background: rgba(51, 51, 51, 0.85);
    z-index: 10;
}
#navSecondaire ul {
    color: #fff;
}
#navSecondaire ul li {
    padding: 0 10px 10px;
}
#navSecondaire ul li a {
    border-bottom: 2px solid #CAF500;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 10px;
}
#navSecondaire ul li a:hover {
    text-decoration: none;
    border: none;
}
#navSecondaire ul li.lien-langue a {
    border: none;
}
#navSecondaire a:focus, footer a:focus {
    outline-offset: 2px;
}
section.carousel-accueil {
    padding-bottom: 70px;
}
.btn-evenements {
    max-width: 1000px;
    position: relative;
    margin: auto;
    padding: 0 50px;
    text-align: center;
}
/** ------ Fin Header ------ **/
/*  -------------------------------------
    Sections de contenu
    ------------------------------------- */
section {
    position: relative;
    z-index: 2;
}
.contenu {
    display: block;
    max-width: 100%;
    padding: calc((5px + 3vw)) calc((-20px + 12.5vw));
    margin: 0 auto;
    width: 1440px;
}
.contenu p a {
    -webkit-box-shadow: inset 0 -2px 0 #B829CD;
    box-shadow: inset 0 -2px 0 #B829CD;
}
.contenu p a[href^="tel:"] {
    box-shadow: none;
}
.contenu ul:not([class]) > li {
    margin-bottom: 8px;
    padding-left: 25px;
    position: relative;
}
.contenu .line ul:not([class]) > li:before {
    color: #A43A8B;
    content: "\25A0";
    font-size: 14px;
    top: 5px;
    left: -15px;
    position: absolute;
    text-align: right;
    width: 30px;
}
.contenu ul:not([class]) > li a {
    -webkit-box-shadow: inset 0 -2px 0 #B829CD;
    box-shadow: inset 0 -2px 0 #B829CD;
}
.no-b-padding {
    padding-bottom: 0;
}
/** ------ Fin Contenu ------ **/
/*  -------------------------------------
    Fil d'ariane
    ------------------------------------- */
.nav-ariane {
    background-color: rgba(255, 255, 255, 0.80);
    width: 100%;
}
.nav-ariane li {
    font-size: 16px;
    font-weight: 500;
}
.nav-ariane a {
    color: #4D4D4D;
    font-size: 16px;
    text-decoration: underline;
}
.nav-ariane a:focus {
    outline: 2px solid #a63a8d;
    outline-offset: 2px;
}
.nav-ariane .picto-fleche-avance {
    width: 16px;
    height: 16px;
    margin: 0 10px;
}
.nav-ariane .picto-maison {
    width: 20px;
    height: 20px;
}
.nav-ariane .contenu {
    padding: 10px calc((-20px + 12.5vw));
}
.nav-ariane a:focus div, .medias-sociaux a:focus div {
    outline: 2px solid #a63a8d;
}
/** ------ Fin Fil d'ariane ------ **/
/*  -------------------------------------
    Bloc texte d'introduction
    ------------------------------------- */
h2.intro {
    padding-top: 20px;
    margin-top: 0;
}
h2.intro::before {
    background-color: #72237A;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    top: 0;
    width: 50px;
}
.img-intro {
    width: 40%;
    /*background-position: 50%;*/
    background-size: cover;
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
/** ------ Fin Bloc texte d'introduction ------ **/
/*  -------------------------------------
    Section avec fond foncé et bouton CTA
    ------------------------------------- */
section.cta-fonce {
    background-color: #72237A;
    color: #fff;
    background: no-repeat url("/media/2f3bp4ed/background-cta-fonce.jpg");
    background-position: center;
    position: relative;
}
section.cta-fonce::after {
    background: linear-gradient(174.62deg, #08080d, transparent), linear-gradient(135deg, #72237A, #23356B);
    content: "";
    height: 100%;
    left: 0;
    opacity: .9;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
section.cta-fonce .lastUnit {
    text-align: right;
}
/** ------ Fin Section CTA ------ **/
.image .img-contenu {
    background-size: cover;
    background-position: center;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    width: 30vw;
    height: 34vh;
    z-index: 2;
}
.image .fond-degrade {
    width: 43%;
    height: 34vh;
    bottom: 0;
    opacity: 0.9;
    position: absolute;
    top: calc((20px + 3vw));
    z-index: -1;
}
.contenu-image-droite .image .img-contenu {
    float: left;
}
.contenu-image-gauche .image {
    overflow: visible;
}
.contenu-image-gauche .image .img-contenu {
    float: right;
}
.contenu-image-droite .image {
    float: right;
    overflow: visible;
}
.contenu-image-droite .image .fond-degrade {
    background: linear-gradient(90deg, #0072B8, #6BB336);
    right: 0;
}
.contenu-image-gauche .image .fond-degrade {
    background: linear-gradient(90deg, #23356B, #72237A);
    left: 0;
}
.contenu-image-gauche .texte {
    padding-left: 30px;
}
.contenu-image-droite .unit {
    padding-right: 40px;
}
.fond-degrade {
    background: linear-gradient(135deg, rgba(63, 180, 171, 0.7), rgba(0, 114, 184, 0.7));
}
.contenu-trois-blocs .flex-line {
    column-gap: 20px;
    display: flex;
    justify-content: center;
}
.contenu-trois-blocs .flex-unit {
    background-color: #fff;
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 0;
}
.contenu-trois-blocs.fond-degrade .flex-unit {
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.contenu-trois-blocs .image {
    background-size: cover;
    background-position: 50%;
    border-bottom: 4px solid #72237A;
    border-image: linear-gradient(270deg, #0072B8, #72237A) 1;
    height: 18vh;
    width: 100%;
    margin-bottom: 20px;
}
.contenu-trois-blocs .texte, .contenu-trois-blocs .lien {
    font-size: 16px;
}
.contenu-trois-blocs.fond-degrade .image {
    margin-bottom: 20px;
}
.contenu-trois-blocs.fond-degrade .texte, .contenu-trois-blocs.fond-degrade .lien {
    padding: 0 20px 20px;
}
.contenu-trois-blocs .texte {
    flex-grow: 1;
}
.contenu-trois-blocs .lien {
    padding-top: 5px;
}
.contenu-trois-blocs a.lien-tuile:hover, .contenu-trois-blocs a.lien-tuile:active, .contenu-trois-blocs a.lien-tuile:focus {
    color: #1D1D1B;
    text-decoration: none;
}
.contenu-trois-blocs a.lien-tuile:hover div.lien {
    text-decoration: underline;
}
.contenu-trois-blocs .texte h3 {
    font-size: 18px;
    margin: 0 0 5px;
}
.contenu-trois-blocs .texte p {
    font-size: 16px;
    margin: 0 0 10px;
}
.contenu-trois-blocs .lien a, .contenu-trois-blocs a.lien-tuile div.lien {
    color: #0072B8;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.contenu-trois-blocs .lien span::before {
    width: 20px;
}
.contenu-trois-blocs .lien div[class*="picto-"] {
    display: inline-block;
    filter: hue-rotate(20deg) brightness(0.8);
    width: 41px;
    height: 9px;
}
/*  -------------------------------------
    Section détails
    ------------------------------------- */
section.details h4 {
	font-size: 21px;
}
section.details .unit {
	padding-left: 0;
	padding-right: 20px;
}
section.details .infos-pictos {
	display: flex;
	column-gap: 20px;
	margin-bottom: 20px;
}
section.details .infos-pictos .grand-picto {
	background-image: url("/media/bjmljez4/cerle-pictos.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
}
section.details .infos-pictos .infos p {
	margin-bottom: 5px;
	color: #666666;
	font-size: 18px;
	line-height: 18px;
}
section.details .infos-pictos .infos span {
	font-size: 28px;
	font-weight: 400;
	color: #A43A8B;
}
/*  -------------------------------------
    Footer
    ------------------------------------- */
footer a[class*="logo-"] {
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    height: 52px;
}
.logo-expocite {
    background-image: url('/media/ocmlznvm/expocite-villeqc-logo.png');
}
.logo-espace400-blanc {
    background-image: url('/media/zakjix2y/espace400-logo-blanc.png');
}
footer {
    background-color: #1D1D1B;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.4);
    color: #fff;
    width: 100%;
}
footer p {
    font-size: 14px;
    margin-bottom: 10px;
}
footer hr {
    background-color: #606060;
    height: 1px;
    border: none;
}
footer strong {
    color: #00E5D8;
    padding-left: 25px;
}
footer ul.liens-rapides {
    text-align: right;
}
footer ul.liens-rapides a {
    color: #CAF500;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
}
footer .logos {
    overflow: visible;
}
.footer-haut {
    border-top: 12px solid #72237A;
    border-image: linear-gradient(270deg, #23356B, #72237A) 1;
}
.footer-haut .adresse a, .footer-haut .horaire a {
    text-decoration: none;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
}
.footer-bas {
    background-color: rgba(35, 53, 107, 0.6);
}
.footer-bas .contenu {
    padding: 0 calc((-20px + 12.5vw));
}
.footer-bas .unit {
    overflow: visible;
    padding-top: 10px;
    padding-bottom: 10px;
}
.footer-bas a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}
.footer-bas p {
    color: #cacaca;
    font-size: 13px;
    text-align: center;
    margin: 0 0 4px;
}
.footer-bas ul {
    column-gap: 30px;
}
.footer-bas ul li {
    line-height: 1;
}
.footer-bas .medias-sociaux ul {
    justify-content: flex-end;
}
.footer-bas div[class*="picto-"] {
    width: 32px;
    height: 32px;
}
/** ------ Fin Footer ------ **/
/*  -------------------------------------
    PAGE d'accueil
    ------------------------------------- */
.accueil header {
    min-height: 15vh;
}
.accueil .section-carousel h2 {
    color: #fff;
    text-align: center;
    font-size: 36px;
    margin-bottom: 5px;
}
.accueil .contenu-trois-blocs {
    box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.2);
}
.image-banniere-accueil {
    background-image: url("../img/fonds/banniere-accueil.jpg");
    height: 50vh;
    background-size: cover;
    background-position: bottom 25% left;
}
/** ------ Fin PAGE d'accueil ------ **/

/*  -------------------------------------
    PAGE Evenements
    ------------------------------------- */
section.evenements {
    background: linear-gradient(180deg, rgba(202, 202, 202, 0.4), rgba(255, 255, 255, 0.2));
}
section.evenements ul.liste-evenements li a {
    background-color: #fff;
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    gap: 0px;
    margin-bottom: 20px;
}
section.evenements ul.liste-evenements li a:hover, section.evenements ul.liste-evenements li a:focus {
    text-decoration: none;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
}
section.evenements ul.liste-evenements li a:hover .date, section.evenements ul.liste-evenements li a:focus .date {
    background-color: #58195D;
}
section.evenements ul.liste-evenements li a .date {
    background-color: #73217a;
    color: #fff;
    font-weight: bold;
    flex-shrink: 0;
    padding: 30px 20px 20px;
    text-align: center;
    width: 170px;
}
section.evenements ul.liste-evenements li a .date span {
    font-size: 30px;
    font-weight: 300;
    text-transform: none;
}
section.evenements ul.liste-evenements li a.exposition .date {
    background-color: #73217a;
}
section.evenements ul.liste-evenements li a.banquet .date {
    background-color: #23356B;
}
section.evenements ul.liste-evenements li a .image {
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    width: 15%;
}
section.evenements ul.liste-evenements li a .texte {
    flex-grow: 2;
    padding: 30px 20px 20px;
    position: relative;
}
section.evenements ul.liste-evenements li a .type {
    background: linear-gradient(135deg, #72237A, #23356B);
    color: #fff;
    font-size: 16px;
    padding: 3px 20px;
    position: absolute;
    top: 0;
    right: 0;
}
section.evenements ul.liste-evenements li a h3 {
    font-size: 22px;
    margin: 5px 0;
}
section.evenements ul.liste-evenements li a.exposition .type {
    background: linear-gradient(135deg, #72237A, #23356B);
}
section.evenements ul.liste-evenements li a.banquet .type {
    background: linear-gradient(135deg, #3FB4AB, #0072B8);
}
section.evenements ul.liste-evenements li a .texte p {
    margin: 0 0 10px;
}
section.evenements ul.liste-evenements li a .fleche {
    width: 25px;
    flex-shrink: 0;
    background-color: #F0F0F0;
}
section.evenements .no-events p {
    text-align: center;
}
section.evenements .no-events .medias-sociaux div {
    height: 48px;
    width: 48px;
}
section.evenements .no-events ul {
    column-gap: 20px;
    display: flex;
    justify-content: center;
}
section.evenements .no-events ul li {
    list-style-type: none;
}
section.evenements table tr {
    border-bottom: 1px solid #ccc;
}
section.evenements table tr td, section.evenements table tr th {
    padding: 5px 10px;
}
.img-event {
    display: block;
    max-width: 100%;
    padding: 0 calc((-20px + 12.5vw));
    margin: 0 auto;
    width: 1440px;
}
.img-event .image {
    background-image: url("/media/i4cp5pxf/banniere-mois-multi.jpg");
    background-size: cover;
    height: 30vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.img-event .image .infos {
    box-shadow: 0px -2px 10px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
}
.img-event .image .infos .date, .img-event .image .infos .salle {
    padding: 10px 25px;
    color: #fff;
    font-size: 24px;
    font-weight: 300;
}
.img-event .image .infos .date {
    background-color: #73217a;
    font-weight: 500;
}
.img-event .image .infos .date sup {
    font-size: 14px;
}
.img-event .image .infos .salle {
    background-color: #23356B;
}
.img-event .image .type {
    background: linear-gradient(135deg, #72237A, #23356B);
    color: #fff;
    font-size: 24px;
    padding: 3px 20px;
    position: absolute;
    top: 0;
    right: 0;
}
.groupe-carres {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 40px;
}
.carre-info {
    background-color: #707070;
    background-size: cover;
    background-position: 50%;
    color: #fff;
    display: block;
    font-size: 24px;
    font-weight: 500;
    padding-top: 35px;
    position: relative;
    aspect-ratio: 1.5 / 1;
    width: 100%;
    max-height: 100%;
    text-align: center;
    text-transform: uppercase; 
    z-index: 1;
}
.carre-info span {
    background: rgba(0,0,0,0.6);
    box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.3);
    padding: 5px 15px;
}
.carre-info:hover, .carre-info:focus {
    color: #FFF;
    outline: none;
    border: none;
    text-decoration: none;
}
.carre-info:after {
    background: rgba(0,0,0,0.3);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.carre-info:hover:after, .carre-info:focus:after {
    background: rgba(100,100,100,0.3);
}
.carre-info.se-rendre {    
    background-color: #73217a;
    background-image: url('/media/2dbl5po3/se-rendre.jpg');    
}
.carre-info.hebergement {
    background-color: #22366b;
    background-image: url('/media/24ofh4u3/hebergement.jpg');   
}
.carre-info.ou-manger {
    background-color: #6bb536;
    background-image: url('/media/42mlweqf/ou-manger.jpg');   
}
.carre-info.stationnement {
    background-color: #009388;
    background-image: url('/media/jwnfiayi/stationnement.jpg');   
}
/** ------ Fin PAGE événements ------ **/

/*  -------------------------------------
    PAGE Installations
    ------------------------------------- */
section.plan-salles .contenu {
    padding-top: 0;
}
.table-superficie.m-table {
    margin: 0;
}
.table-superficie.m-table th {
    line-height: 1rem;
    font-weight: 500;
}
.table-superficie.m-table td, .table-superficie.m-table th {
    min-width: auto;
}
.table-superficie table th:not(:first-child), .table-superficie table td:not(:first-child) {
    padding-left:10px;
    text-align: center;
}
.table-superficie table th:first-child, .table-superficie table td:first-child {
    padding-left: 15px;
    max-width: 140px;
}
.table-superficie table th.pale {
    background-color: #FDEDFE;
}
.table-superficie table th.dark {
    background-color: #EBD3EE;
}
.table-superficie table th.section-title {
    font-weight: bold;
    padding: 10px 0 15px;
    vertical-align: middle;
}
.table-superficie tbody tr:nth-child(odd) {
  background-color: #e3e3e3;
}
@media screen {
    .m-table {
        display: block;
        letter-spacing: 1px;
        font-weight: 300;
        overflow-x: auto;
        margin-bottom: 24px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: scrollbar;
    }
    .m-table table {
        max-width: 100%;
        width: 100%;
    }
    .m-table td,
    .m-table th {
        padding: 0.5em 0;
        padding-right:0.5em;
        min-width: 140px;
        vertical-align: top;
    }
    .m-table td:last-child,
    .m-table th:last-child {
        padding-right: 0;
    }
    .m-table thead {
        border-bottom: 3px solid #72237A;
        font-weight: bolder;
    }
    .m-table tr {
        border-top: 0 none !important;
        border-left: 0 none !important;
        border-right: 0 none !important;
    }
    .m-table thead th {
        font-size: 17px;
        padding-top: 0;
        vertical-align: bottom;
        font-weight: bold;
    }
    .m-table tbody tr {
        border-bottom: 1px solid #72237A;
    }
    .m-table tbody tr:hover {
        background-color: rgba(0, 159, 164, 0.05);
    }
    .m-table tfoot {
        border-top: 3px solid #c1d82f;
    }
}
@media screen and (min-width: 768px) {
    .m-table td,
    .m-table th {
        padding: 0.5em 0;
        padding-right:0.5em;
    }
    .m-table td:last-child,
    .m-table th:last-child {
        padding-right: 0;
    }
    .desktop-show {
        display: block !important;
    }
    .mobile-show {
        display: none !important;
    }
}
@media print {
    .m-table table {
        width: 100%;
        border: 0 none !important;
    }
    .m-table td,
    .m-table th {
        border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        padding: 1em;
    }
    .m-table th {
        font-weight: bolder;
        text-align: left;
    }
}

/** ------ Fin PAGE Installations ------ **/


@media screen and (max-width: 960px) {
    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 26px;
    }
    p, a {
        font-size: 19px;
    }
    .filler {
        display: none;
    }
    .zone-header {
        background-size: cover;
    }
    .img-intro {
        display: none;
    }
    h1.logo-espace400 {
        position: relative;
    }
    .image .img-contenu {
        background-position: center;
        width: 40vw;
        height: 26vh;
    }
    .image .fond-degrade {
        width: 46vw;
        height: 26vh;
    }
    .contenu-trois-blocs .flex-line {
        flex-direction: column;
        row-gap: 20px;
    }
    .contenu-trois-blocs .image {
        height: 25vh;
    }
    .change {
        display: block !important;
    }
    .change-nav {
        display: flex !important;
    }
    .change #bar1 {
        transform: translateY(4px) rotateZ(-45deg);
    }
    .change #bar2 {
        opacity: 0;
    }
    .change #bar3 {
        transform: translateY(-6px) rotateZ(45deg);
    }
    .change-bg {
        width: 520px;
        height: 460px;
        transform: translate(-60%, -30%);
    }
    #menuBar {
        display: block;
    }
    .menu-mobile {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }
    #listesNav {
        display: none;
        flex-direction: column-reverse;
        width: 100%;
        justify-content: center;
        align-items: flex-start;
    }
    #navPrincipale {
        background-color: rgba(255, 255, 255, 0.8);
    }
    #navPrincipale ul li {
        width: 100%;
    }
    #navPrincipale ul li a.dropdown-btn {
        color: #23356B;
        font-weight: 700;
        text-align: left;
        padding: 15px 20px;
    }
    #navPrincipale ul, #navSecondaire ul {
        display: flex;
        position: relative;
        top: 0;
        left: 0;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: flex-start;
        transition: 0.3s ease;
    }
    #navPrincipale ul li a.dropdown-btn:hover, #navPrincipale ul li a.dropdown-btn:focus {
        background-color: #FFF;
    }
    #navPrincipale .btn-recherche {
        order: -1;
    }
    #navPrincipale button#menuRecherche {
        display: none;
    }
    #navPrincipale form#rechercheChamp {
        display: block;
        position: relative;
    }
    #navPrincipale form#rechercheChamp input {
        width: 100%;
    }
    #navPrincipale .dropdown-btn::after {
        border: none;
    }
    #navPrincipale .dropdown-content {
        display: block;
        box-shadow: none;
        position: relative;
        width: 100%;
    }
    #navPrincipale .dropdown-content ul li a {
        display: block;
        height: 48px;
        width: 100%;
    }
    .nav-ariane ul.liste-nav {
        flex-wrap: wrap;
    }
    .contenu-image-droite .image .img-contenu, .contenu-image-gauche .image .img-contenu {
        width: 100%;
        height: 23vh;
        min-height: 230px;
    }
    .contenu-image-droite .image .fond-degrade, .contenu-image-gauche .image .fond-degrade {
        width: 100%;
        height: 23vh;
        top: 0;
    }
    .contenu-image-gauche .texte {
        padding-left: 10px;
    }
    .contenu-image-droite .unit {
        padding-right: 10px;
    }
    .contenu-trois-blocs.fond-degrade .image {
        min-height: 200px;
    }
    section.evenements ul.liste-evenements li a {
        flex-direction: column;
    }
    section.evenements ul.liste-evenements li a .date {
        width: 100%;
    }
    section.evenements ul.liste-evenements li a .image {
        height: 24vh;
        min-height: 140px;
        width: 100%;
    }
    .groupe-carres {        
        flex-wrap: wrap;
    }
    .carre-info {
        flex: 1 0 43%;
        font-size: 22px;
        padding-top:80px;
    }
    .footer-bas .unit {
        width: 100%;
    }
    .footer-bas .unit ul {
        justify-content: center;
        column-gap: 30px;
    }
}
@media screen and (max-width: 640px) {
    section.introduction .btn {
		margin-bottom: 20px;
	}
    section.evenements ul.liste-evenements li a .image {
        display: none;
    }
    footer .logos hr {
        display: none;
    }
    footer .logos {
        display: flex;
        justify-content: space-between;
        column-gap: 20px;
        padding-bottom: 30px;
    }
    footer .logos a {
        width: 100%;
    }
    footer .adresse, footer .horaire {
        width: 50%;
    }
    .footer-haut .lastUnit {
        display: none;
    }
    .footer-bas div[class*="picto-"] {
        width: 48px;
        height: 48px;
        padding: 5px;
    }
    .image-banniere-accueil {
        height: 30vh;
    }
}
/** ----------------- Pictos ------------------ **/
[class*="picto-"] {
    position: relative;
}
i.picto-details:before {
	height: 100%;
	background-size: 55%;
}
[class*="picto-"]:before {
    display: block;
    content: " ";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
div[class*="picto-"]:before {    
    width: 100%;
    height: 100%;
    text-align: center;
}
strong[class*="picto-"]:before {
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 15px;
    height: 15px;
    position: absolute;
}
[class*="picto-"].p-blanc:before {
    filter: invert(100%);
}
[class*="picto-"].p-gris:before {
    filter: invert(40%);
}
[class*="picto-"].p-mauve:before {
    filter: invert(28%) sepia(86%) saturate(1156%) hue-rotate(280deg) brightness(87%) contrast(85%);
}
[class*="picto-"].p-mauve-fonce:before {
    filter: invert(18%) sepia(57%) saturate(3118%) hue-rotate(278deg) brightness(80%) contrast(91%);
}
[class*="picto-"].p-cyan:before {
    filter: invert(60%) sepia(83%) saturate(2232%) hue-rotate(133deg) brightness(103%) contrast(115%);
}
[class*="picto-"].p-bleu:before {
    filter: invert(28%) sepia(92%) saturate(1324%) hue-rotate(179deg) brightness(96%) contrast(101%);
}
.picto-facebook:before {
    background-image: url("/media/akvosa4m/picto-facebook.svg");
}
.picto-linkedin:before {
    background-image: url("/media/u0chvuif/picto-linkedin.svg");
}
.picto-youtube:before {
    background-image: url("/media/f1up5m5e/picto-youtube.svg");
}
.picto-loupe:before {
    background-image: url("/media/zdahmxk4/picto-loupe.svg");
}
.picto-fleche:before {
    background-image: url("/media/hx0gwv2c/picto-fleche.svg");
    filter: hue-rotate(10deg);
}
.picto-fleche-avance:before {
    background-image: url("/media/j25f33wk/picto-fleche-avance.svg");
}
.picto-maison:before {
    background-image: url("/media/5zsnyaow/picto-maison.svg");
}
.picto-marqueur:before {
    background-image: url("/media/lvchcxu4/picto-marqueur.svg");
}
.picto-telephone:before {
    background-image: url("/media/fkzpuazi/picto-telephone.svg");
}
.picto-lettre:before {
    background-image: url("/media/qawkkh3n/picto-lettre.svg");
}
.picto-calendrier:before {
    background-image: url("/media/moflr02d/picto-calendrier.svg");
}
.picto-superficie:before {
    background-image: url("/media/ucob1dga/picto-superficie.svg");
}
.picto-wifi:before {
    background-image: url("/media/0uwjbvf2/picto-wifi.svg");
}
.picto-soleil:before {
    background-image: url("/media/k2rldba4/picto-soleil.svg");
}
.picto-electricite:before {
    background-image: url("/media/41gjekk2/picto-electricite.svg");
}
.picto-niveau-rdc:before {
    background-image: url("/media/ervai33i/picto-niveau-rdc.svg");
}
.picto-niveau-1:before {
    background-image: url("/media/kyvo2b0q/picto-niveau-1.svg");
}
.picto-niveau-2:before {
    background-image: url("/media/qkjo11fu/picto-niveau-2.svg");
}
.picto-niveau-3:before {
    background-image: url("/media/14jdv3vd/picto-niveau-3.svg");
}
.picto-personnes:before {
    background-image: url("/media/bj0btnhz/picto-personnes.svg");
}
.picto-plafond:before {
    background-image: url("/media/3m1j5ajj/picto-plafond.svg");
}
.picto-carre-ouvert:before, .picto-planCarre:before {
    background-image: url("/media/3wknnbjg/picto-carre-ouvert.svg");
}
.picto-classe:before, .picto-planClasse:before {
    background-image: url("/media/ohffreit/picto-classe.svg");
}
.picto-cocktail:before, .picto-planCocktail:before {
    background-image: url("/media/pr2cuquk/picto-cocktail.svg");
}
.picto-exposition:before, .picto-planExposition:before {
    background-image: url("/media/orknztga/picto-exposition.svg");
}
.picto-banquet:before, .picto-planBanquet:before {
    background-image: url("/media/xuvprcaq/picto-banquet.svg");
}
.picto-theatre:before, .picto-planTheatre:before {
    background-image: url("/media/zwtbqhej/picto-theatre.svg");
}
.picto-salon:before, .picto-planSalon:before {
    background-image: url("/media/k4ajnt2i/picto-salon.svg");
}

/* Bande alerte comme sur ExpoCité */
@media screen{.o-alert{display:none;width:100%}.o-alert--show{display:block}.o-alert__inner{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#d9534f;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;padding:15px}.o-alert__text{margin:0;position:relative;padding-left:40px}.o-alert__text:before{background:url("/dist/atomic/organism/o-alert/info.svg?v=b26938") no-repeat 50%;background-size:contain;content:"";display:block;height:25px;left:0;position:absolute;top:calc(50% - 13px);width:25px}.o-alert__link,.o-alert__link:hover{color:#fff}.o-alert__close{background:transparent;border:none;border-radius:0;color:inherit;cursor:pointer;display:inline-block;margin:0;outline:0!important;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:normal;background:url("/media/p1zapgdf/fermer.svg") no-repeat 50%;background-size:contain;height:15px;margin-left:auto;width:15px}.o-alert--Alerte .o-alert__inner{background:#d9534f}.o-alert--Alerte .o-alert__text:before{background-image:url("/media/ltebvtwc/alerte.svg")}}@media print{.o-alert{display:none}}
.o-alert__text a{text-decoration:underline!important}