@font-face { font-family: 'Montserrat'; src: url(../fonts/Montserrat-Medium.woff2) format('woff2'), url(../fonts/Montserrat-Medium.woff) format('woff'); font-weight: normal; font-display: swap }
@font-face { font-family: 'Montserrat'; src: url(../fonts/Montserrat-Bold.woff2) format('woff2'), url(../fonts/Montserrat-Bold.woff) format('woff'); font-weight: bold; font-display: swap }
@font-face { font-family: 'Inter'; src: url(../fonts/Inter-Regular.woff2) format('woff2'), url(../fonts/Inter-Regular.woff) format('woff'); font-weight: normal; font-display: swap }
@font-face { font-family: 'Inter'; src: url(../fonts/Inter-SemiBold.woff2) format('woff2'), url(../fonts/Inter-SemiBold.woff) format('woff'); font-weight: bold; font-display: swap }
@font-face { font-family: 'fontello'; src: url(../fonts/fontello.woff2) format('woff2'), url(../fonts/fontello.woff) format('woff'); font-weight: normal; font-display: swap }
* { box-sizing: border-box }
ul { margin: 0; padding: 0 }
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
body { background: #FFF; font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0 }
a,
a:focus { outline: 0; cursor: pointer; text-decoration: none; color: #000; }
input,
textarea,
select { font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 14px }
.mobile { display: none }
.nocol { width: calc(100% - 290px) !important }
:-moz-focusring {
 outline: 0
}
textarea { resize: none }
/* HEADER */
header { position: fixed; background-color: #FFF; height: 100px; top: 0; left: 70px; right: 0; box-shadow: 0 1px 10px 0 rgba(0,0,0,.1); z-index: 9; transition: height 0.6s cubic-bezier(.23, 1, .32, 1) }
header .logo { float: left; height: 64px; margin: 18px 0 0 40px; transition: height 0.6s cubic-bezier(.23, 1, .32, 1), margin-top 0.6s cubic-bezier(.23, 1, .32, 1) }
header .logo img { height: 100% }
header nav { float: right; padding-right: 20px; font-size: 0 }
header nav a { display: inline-block; font-weight: bold; color: #004156; font-size: 18px; height: 100%; line-height: 100px; padding: 0 15px; transition: line-height 0.6s cubic-bezier(.23, 1, .32, 1) }
header nav a:hover { color: #00a2b3 }
header nav .actif { color: #00a2b3; -webkit-box-shadow: 0px -4px 0px #00a2b3 inset; -moz-box-shadow: 0px -4px 0px #00a2b3 inset; box-shadow: 0px -4px 0px #00a2b3 inset; }
.headernuit { background-color: #003d50; height: 70px }
.headernuit .logo { height: 56px; margin-top: 7px }
.headernuit nav a { height: 70px; color: #FFF; line-height: 70px }
.headernuit .navmobile a { color: #FFF }
.menu { display: none; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; position: fixed; z-index: 8; top: 100px; left: 70px; width: calc(100% - 70px); font-size: 0; padding: 32px 30px 40px 0px; background-color: #FFF; box-shadow: 0 1px 10px 0 rgba(0,0,0,.1); transition: top 0.6s cubic-bezier(.23, 1, .32, 1) }
.menu ul { display: inline-block; font-size: 16px; width: 25%; list-style: none; vertical-align: top }
.menu .smenu { border-right: 1px solid #00a2b3; padding: 0 40px }
.menu .smenu a { font-weight: bold; font-size: 18px; border-bottom: 1px solid #EEE; display: block; padding: 10px 0; color: #004156; position: relative }
.menu .smenu a:hover { color: #00a2b3 }
.menu .smenu a .fleche { display: none; font-family: 'fontello'; position: absolute; right: 0; top: 0; font-weight: normal; font-size: 20px; height: 42px; line-height: 42px; background-color: #FFF }
.menu ul:nth-child(2) a,
.menu ul:nth-child(3) a { font-size: 15px; font-family: Inter, Arial; padding: 8px 0 }
.menu ul:nth-child(2) a .fleche { font-size: 15px; height: 35px; line-height: 35px; background-color: #FFF }
.menu .ssmenu li,
.menu .sssmenu li { display: none }
.menu .sssmenu { border-right: none }
.menunuit { top: 70px }
.menu .encart { display: inline-block; font-size: 15px; width: 25% }
.menu .encart a { display: inline-block; color: #004156; font-family: Inter, Arial, sans-serif }
.menu .encart a img { display: inline-block; width: 100%; margin-bottom: 8px }
/* RECHERCHE */
.search { position: fixed; background-color: #004156; width: 70px; top: 0; left: 0; bottom: 0; z-index: 10 }
.search a { display: block; font-family: 'fontello'; width: 70px; height: 70px; line-height: 70px; font-size: 26px; color: #FFF; text-align: center }
.search a:active { background-color: #002e3c }
#search { list-style: none; position: fixed; background-color: #004156; color: #FFF; padding: 70px 100px 0 50px; left: calc((100% - 300px - 70px) * -1);
top: 0; bottom: 0; width: calc(100% - 300px); z-index: 9; transition: left 0.6s cubic-bezier(.23, 1, .32, 1); }
#search li { float: left; width: 100% }
#search .titre { font-size: 36px; font-weight: bold; text-transform: uppercase; padding-bottom: 20px }
#search .form { padding-bottom: 30px }
#search .form input { float: left; width: calc(100% - 200px); margin-right: 20px; border: 0; height: 52px; padding: 0 15px; font-size: 20px; font-weight: bold }
#search .form a { float: right; width: 180px; display: block; height: 52px; line-height: 52px; text-align: center; color: #FFF; background-color: #00a2b3; font-size: 18px; font-weight: bold; text-transform: uppercase }
#search .tags a { float: left; background-color: #93c01f; color: #FFF; font-weight: bold; display: inline-block; height: 44px; line-height: 44px; font-size: 18px; padding: 0 20px; margin: 0 10px 10px 0 }
.tools { position: fixed; right: 0; top: 70%; transform: translateY(-50%); width: 44px; z-index: 5 }
.tools a { display: block; width: 44px; height: 44px; line-height: 44px; font-size: 20px; text-align: center; font-family: fontello; color: #FFF; background-color: #00a2b3 }
.tools a:active { background-color: #004156 }
/* MAIN */
.main { margin: 100px 0 0 70px; width: calc(100% - 70px); float: left }
.main .left { float: left; width: 290px; background-color: #fafbfc; padding: 40px 30px }
.main .left .encart { display: block; position: relative; margin-bottom: 60px; height: 156px }
.main .left .encart h1 { position: absolute; z-index: 1; background-color: #00a2b3; color: #FFF; font-weight: normal; margin: 0; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 16px; text-transform: uppercase; text-align: center; padding: 6px 10px; width: calc(100% - 20px) }
.main .left .encart img { object-fit: cover; width: 100%; height: 100%; }
/* ALERTE */
.main .alerte { overflow: hidden; height: 40px; width: 100%; line-height: 40px; background-color: #f74c5b; font-size: 16px; padding-left: 20px; color: #FFF; font-weight: bold }
.main .alerte span { font-family: fontello; font-size: 20px; margin-right: 6px; font-weight: normal }
.main .alerte a { color: #FFF }
/* VOUS ETES */
.main .left .vousetes { list-style: none; margin-bottom: 50px; background-color: #93c01f; color: #FFF; padding: 20px }
.main .left .vousetes .titre { line-height: 26px; padding-bottom: 8px }
.main .left .vousetes .titre img { display: inline-block; height: 26px; margin-right: 3px; }
.main .left .vousetes .titre span { display: inline-block; font-weight: bold; font-size: 15px; vertical-align: top }
.main .left .vousetes .liste { padding-bottom: 12px }
.main .left .vousetes .liste label { display: block; font-size: 19px; margin-bottom: 4px }
.main .left .vousetes .liste select { width: 100%; border: 0; font-size: 15px; height: 30px; color: #004156; padding-left: 5px }
.main .left .vousetes .valider { text-align: center }
.main .left .vousetes .valider a { display: inline-block; color: #FFF; background-color: #004156; font-size: 15px; padding: 6px 8px; font-weight: bold; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }

/* SERVICES */
.main .left .services { list-style: none }
.main .left .services h2 { display: block; font-weight: bold; font-size: 24px; margin-bottom: 20px; color: #004156 }
.main .left .services .el a { display: block; margin-bottom: 25px; font-size: 0; position: relative }
.main .left .services .el a .picto { display: inline-block; height: 46px; width: 46px; border-radius: 46px; line-height: 46px; font-family: fontello; background-color: #00a2b3; color: #FFF; font-size: 24px; text-align: center; margin-right: 10px; vertical-align: top }
.main .left .services .el a .texte { position: absolute; top: 50%; transform: translateY(-50%); display: inline-block; line-height: 19px; font-size: 17px; width: calc(100% - 56px); vertical-align: top; color: #00232E; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-weight: bold }
.main .left .services .el a:hover .picto { background-color: #004156 }
.main .center { float: left; width: calc(100% - 580px); padding: 40px 60px }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ACCUEIL
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.home { width: 100%; background-color: #F2F6F9 }
.home ul { list-style: none }
.home .ligne1 { padding: 40px 40px; width: 100% }
.home .centered { font-size: 0; width: 100%; max-width: 1300px; margin: 0 auto }
.home .ligne1 .gauche,
.home .ligne1 .droite { display: inline-block; font-size: 15px; vertical-align: top; list-style: none; padding: 0 }
.home .ligne1 .gauche { width: 67%; margin-right: 4.5%; position: relative }
.home .ligne1 .icone { height: 40px; display: inline-block; margin-right: 15px }
.home .ligne1 h2 { display: inline-block; vertical-align: top; width: 67%; font-size: 40px; line-height: 40px; color: #004156; margin: 0 0 15px 0 }
.home .ligne1 .voir { display: inline-block; border: 2px solid #004156; height: 40px; line-height: 36px; padding: 0 25px; position: absolute; right: 0; font-size: 17px }
.home .ligne1 .voir:hover { color: #009bb3; border-color: #009bb3 }
.home .ligne1 .gauche ul { background-color: #FFF; padding: 15px; border-radius: 8px }
.home .ligne1 .gauche ul .img { display: block; position: relative; padding-top: 62.5% }
.home .ligne1 .gauche ul .img a { display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.home .ligne1 .gauche ul .titre a { font-size: 32px; font-weight: bold; color: #004156; display: block; margin: 30px 0 }
.home .ligne1 .gauche ul .titre a:hover { color: #009bb3; }
.home .ligne1 .gauche ul .intro a { font-size: 18px; color: #004156; display: block; line-height: 26px; margin-bottom: 50px }
.home .ligne1 .droite { width: calc(100% - 67% - 4.5%) }
.home .ligne1 .droite .vousetes { list-style: none; margin-bottom: 35px; background-color: #93c01f; color: #FFF; padding: 40px 40px; border-radius: 6px }
.home .ligne1 .droite .vousetes .titre { line-height: 26px; padding-bottom: 8px }
.home .ligne1 .droite .vousetes .titre img { display: inline-block; height: 26px; margin-right: 3px; }
.home .ligne1 .droite .vousetes .titre span { display: inline-block; font-weight: bold; font-size: 18px; vertical-align: top }
.home .ligne1 .droite .vousetes .liste { padding-bottom: 12px }
.home .ligne1 .droite .vousetes .liste label { display: block; font-size: 19px; margin-bottom: 4px }
.home .ligne1 .droite .vousetes .liste select { width: 100%; border: 0; font-size: 15px; height: 34px; color: #004156; padding-left: 5px }
.home .ligne1 .droite .vousetes .valider { text-align: center }
.home .ligne1 .droite .vousetes .valider a { display: inline-block; color: #FFF; background-color: #004156; font-size: 15px; padding: 8px 10px; font-weight: bold; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.home .ligne1 .droite .vousetesv2 { list-style: none; margin-bottom: 20px; background-color: #93c01f; color: #FFF; padding: 10px 40px; border-radius: 6px }
.home .ligne1 .droite .vousetesv2 .titre { line-height: 26px; padding-bottom: 8px }
.home .ligne1 .droite .vousetesv2 .titre img { display: inline-block; height: 26px; margin-right: 3px; }
.home .ligne1 .droite .vousetesv2 .titre span { display: inline-block; font-weight: bold; font-size: 18px; vertical-align: top }
.home .ligne1 .droite .vousetesv2 .liste { padding-bottom: 12px }
.home .ligne1 .droite .vousetesv2 .liste label { display: block; font-size: 19px; margin-bottom: 4px }
.home .ligne1 .droite .vousetesv2 .liste select { width: 100%; border: 0; font-size: 15px; height: 34px; color: #004156; padding-left: 5px }
.home .ligne1 .droite .vousetesv2 .valider { text-align: center }
.home .ligne1 .droite .vousetesv2 .valider a { display: inline-block; color: #FFF; background-color: #004156; font-size: 15px; padding: 8px 10px; font-weight: bold; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.home .ligne1 .droite .espaceepci { list-style: none; margin-bottom: 20px; background-color: #004156; padding: 10px 10px; border-radius: 6px }
.home .ligne1 .droite .espaceepci { background-image :url(../images/conseils-jaune.png); background-position: right 3px; background-size: contain; background-repeat: no-repeat; }
.home .ligne1 .droite .espaceepci a { text-transform: uppercase; color: #FFFF55; font-weight: bold; margin: 0 6px 6px 0; border-radius: 6px; }
.home .ligne1 .droite .espaceepci a .texte { font-size: 22px; line-height: 20px; }
.home .ligne1 .droite .espaceepci a:hover {  color: #ffffff; }

.home .ligne1 .droite .services { font-size: 0; margin-bottom: 40px }
.home .ligne1 .droite .services h2 { font-size: 22px; text-transform: uppercase; margin: 0 0 6px 0 }
.home .ligne1 .droite .services a { display: inline-block; background-color: #193F54; color: #FFF; font-weight: bold; margin: 0 6px 6px 0; border-radius: 6px; padding: 9px 10px }
.home .ligne1 .droite .services a .texte { font-size: 17px; line-height: 20px; }
.home .ligne1 .droite .services a:hover { background-color: #009bb3 }
.home .ligne1 .droite .newsletter { background-color: #FFF; padding: 30px 0px; text-align: center; border-radius: 6px }
.home .ligne1 .droite .newsletter h2 { font-size: 18px; line-height: 24px }
.home .ligne1 .droite .newsletter input { height: 38px; border: 1px solid #003d50; padding: 0 15px; width: calc(100% - 60px); margin-bottom: 15px; font-size: 16px; color: #193F54 }
.home .ligne1 .droite .newsletter a { display: inline-block; background-color: #193F54; color: #FFF; padding: 8px 25px; font-weight: bold }
.home .ligne1 .droite .newsletter a:hover { background-color: #009bb3 }
.home .ligne2 { padding: 40px 40px 20px 40px; width: 100% }
.home .ligne2 .icone { height: 40px; display: inline-block; margin-right: 15px }
.home .ligne2 h2 { display: inline-block; vertical-align: top; width: 67%; font-size: 40px; line-height: 40px; color: #004156; margin: 0 0 15px 0 }
.home .ligne3 { padding: 50px 40px; width: 100%; background-color: #00a2b3 }
.home .ligne3 .carousel-cell { position: relative; font-size: 16px; color: #004156; padding: 25px; width: calc((100% / 3) - 50px) !important; height: 370px !important; margin-right: 75px !important; background-color: #FFF; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; overflow: hidden; cursor: pointer }
.home .ligne3 .carousel-cell .date { font-size: 0 }
.home .ligne3 .carousel-cell .date span { display: inline-block; vertical-align: top; font-size: 16px; font-weight: bold; margin-bottom: 30px }
.home .ligne3 .carousel-cell .date span:first-child { text-align: center; width: 40% }
.home .ligne3 .carousel-cell .date span:first-child strong { font-size: 28px; line-height:28px; display: block; margin-bottom:3px }
.home .ligne3 .carousel-cell .date span:nth-child(2) { font-size: 17px; width: 60% }
.home .ligne3 .carousel-cell .intro { line-height: 24px }
.home .ligne3 .carousel-cell .voir { display: inline-block; background-color: #193F54; color: #FFF; padding: 8px 14px; position: absolute; bottom: 30px; right: 30px }
.home .ligne3 .flickity-button { background: #004156 !important; border: none !important; color: #FFF !important }
.home .ligne3 .flickity-prev-next-button .flickity-button-icon { position: absolute !important; left: 30%!important; top: 30%!important; width: 40%!important; height: 40%!important }
.home .ligne3 .flickity-prev-next-button.previous { left: -25px!important }
.home .ligne3 .flickity-prev-next-button.next { right: -25px!important }
.home .ligne4 { padding: 100px 40px; width: 100% }
.home .ligne4 .icone { height: 40px; display: inline-block; margin-right: 15px }
.home .ligne4 h2 { display: inline-block; vertical-align: top; width: 67%; font-size: 40px; line-height: 40px; color: #004156; margin: 0 0 40px 0 }
.home .ligne4 .video { background-color: #003d50; padding: 20px; background-image: url(../img/bg_video.jpg); background-repeat: no-repeat; background-position: bottom right }
.home .ligne4 .video .img { display: inline-block; vertical-align: top; position: relative; padding-top: 29%; width: 53%; margin-right: 30px; border: 4px solid #000 }
.home .ligne4 .video .img span { display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.home .ligne4 .video .desc { display: inline-block; vertical-align: top; width: calc(47% - 30px); padding-right: 50px }
.home .ligne4 .video .titre { color: #FFF }
.home .ligne4 .video .titre h3 { font-size: 22px; font-weight: normal; margin: 20px 0 30px 0 }
.home .ligne4 .video .description { color: #FFFF55; font-size: 16px; line-height: 22px }
.home .ligne4 .voir { text-align: right; margin-top: 30px }
.home .ligne4 .voir a { display: inline-block; border: 2px solid #004156; height: 40px; line-height: 36px; padding: 0 25px; font-size: 17px }
.home .ligne4 .voir a:hover { color: #009bb3; border-color: #009bb3 }
.home .ligne5 { padding: 0 40px; width: 100%; background-color: #0D2C3E; background-image: url(../img/bg_mag.jpg); background-repeat: no-repeat; background-position: bottom right; }
.home .ligne5 .centered { position: relative }
.home .ligne5 .couverture { position: absolute; width: 220px; top: -7%; left: 0px; left: 120px; transform: rotate(-4deg); }
.home .ligne5 .couverture img { box-shadow: -8px 8px 0 #5E7F9B; width: 100% }
.home .ligne5 .mag { color: #FFF; font-size: 16px; text-align: center; padding: 40px 0 50px 20% }
.home .ligne5 .mag h2 { font-size: 35px; margin-top: 0 }
.home .ligne5 .mag .mois { font-weight: bold; color: #FFFF55; font-size: 18px }
.home .ligne5 .mag h3 { font-size: 25px }
.home .ligne5 .mag a { font-size: 18px; font-weight: bold; color: #FFF }
.home .ligne5 .mag a:hover { text-decoration: underline }
.home .ligne6 { padding: 150px 40px; width: 100% }
.home .ligne6 .icone { height: 40px; display: inline-block; margin-right: 15px }
.home .ligne6 h2 { display: inline-block; vertical-align: top; width: 67%; font-size: 40px; line-height: 40px; color: #004156; margin: 0 0 40px 0 }
.home .ligne6 .carousel-cell { position: relative; font-size: 16px; color: #004156; padding: 25px; width: calc((100% / 3) - 50px) !important; height: 370px !important; margin-right: 75px !important; background-color: #FFF; overflow: hidden; cursor: pointer; background-size: cover; background-position: center }
.home .ligne6 .carousel-cell a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(26, 64, 85, 0.7); transition: background-color 0.3s ease }
.home .ligne6 .carousel-cell a:hover { background-color: rgb(26, 64, 85, 0.2); text-decoration: none }
.home .ligne6 .carousel-cell h4 { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; color: #FFF; margin: 0; font-size: 28px; padding: 0 40px; font-weight: normal }
.home .ligne6 .carousel-cell span { position: absolute; bottom: 30px; right: 30px; color: #FFFF55; font-size: 17px }
.home .ligne6 .flickity-button { background: #00a2b3 !important; border: none !important; color: #FFF !important }
.home .ligne6 .flickity-prev-next-button .flickity-button-icon { position: absolute !important; left: 30%!important; top: 30%!important; width: 40%!important; height: 40%!important }
.home .ligne6 .flickity-prev-next-button.previous { left: -25px!important }
.home .ligne6 .flickity-prev-next-button.next { right: -25px!important }
.home .pocket .couverture { width: 170px; left: 100px !important }
.home .ligne7 { padding: 150px 40px; width: 100% }
.home .ligne7 .icone { height: 40px; display: inline-block; margin-right: 15px }
.home .ligne7 h2 { display: inline-block; vertical-align: top; font-size: 34px; line-height: 40px; color: #004156; margin: 0 0 40px 0; width: calc(100% - 70px) }
.home .ligne7 .seino { position: relative; color: #004156; padding: 25px; width: calc((100% / 3) - 55px) !important; height: 370px !important; margin-right: 75px !important; background-color: #FFF; overflow: hidden; cursor: pointer; background-size: cover; background-position: center; display: inline-block }
.home .ligne7 .seino a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(26, 64, 85, 0.7); transition: background-color 0.3s ease }
.home .ligne7 .seino a:hover { background-color: rgb(26, 64, 85, 0.2); text-decoration: none }
.home .ligne7 .seino div { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 30px }
.home .ligne7 .seino div h4 { font-size: 24px; margin: 10px 0 0 0; color: #FFF }
.home .ligne7 .seino div .categorie { color: #FFFF55; font-weight: bold; font-size: 18px }
.home .ligne7 .seino div .date { color: #FFF; font-weight: bold; font-size: 18px }
.home .ligne7 .voir { text-align: right; margin-top: 30px }
.home .ligne7 .voir a { display: inline-block; border: 2px solid #004156; height: 40px; line-height: 36px; padding: 0 25px; font-size: 17px }
.home .ligne7 .voir a:hover { color: #009bb3; border-color: #009bb3 }
/* FOOTER */
footer { width: cacl(100% - 70px); margin-left: 70px; font-size: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
footer .gauche { padding: 30px 40px; width: 50%; display: inline-block; vertical-align: top; font-size: 13px; background-color: #cbd8dd; color: #004156; height: 200px }
footer .gauche img { display: inline-block; width: 100px; vertical-align: top; margin-right: 40px }
footer .gauche ul { display: inline-block; vertical-align: top; list-style: none; width: calc(100% - 150px); line-height: 20px }
footer .gauche .social { padding-top: 10px }
footer .gauche .social a { display: inline-block; height: 40px; line-height: 40px; font-family: fontello; color: #004258; font-size: 22px; margin-right: 20px }
footer .gauche .social a:hover { color: #00a2b3 }
footer .droite { padding: 30px 40px; width: 50%; display: inline-block; vertical-align: top; font-size: 13px; background-color: #004156; color: #FFF; font-weight: bold; text-transform: uppercase; list-style: none; height: 200px }
footer .droite a { color: #FFF; margin-bottom: 4px; display: inline-block }
footer .droite a:hover { text-decoration: underline }
/* RECHERCHER */
.recherche { width: calc(100% - 70px); max-width: 850px; margin: 100px auto 0 auto; padding-top: 50px; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.recherche h1 { margin: 0 0 30px 0; font-size: 35px; color: #00232E; font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.recherche h2 { font-size: 25px; margin: 30px 0 100px 0; font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.recherche .res { width: 100%; border-collapse: collapse; margin-bottom: 70px }
.recherche .res td { padding: 30px 0; border-bottom: 1px solid #EEE }
.recherche .res td a { color: #00A2B3; font-size: 19px; font-weight: bold; font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.recherche .res td a:hover { text-decoration: underline }
.recherche .res td a .type { font-family: Inter; font-weight: bold; display: inline-block; color: #93c01f; border: 1px solid #93c01f; font-size: 12px; vertical-align: top; padding: 0 3px; margin-top: 3px }
.recherche .res td .desc { font-size: 16px; line-height: 24px; display: block; margin: 10px 0 0 0; color: #00232E }
.recherche .res td .url { font-size: 12px; line-height: 18px; display: block; margin: 4px 0 0 0; color: #666 }
.recherche .res td .tags { padding-top: 10px; display: block }
.recherche .res td .tags a { display: inline-block; margin-right: 5px; margin-bottom: 5px; padding: 2px 3px; border: 1px solid #00a2b3; color: #00a2b3; font-size: 13px; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.recherche .res td .tags a:hover { background-color: #00A2B3; color: #FFF; text-decoration: none }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// PAGE
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.main .page { max-width: 760px; margin: 0 auto; }
.main .page .ariane { font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 14px; color: #004156 }
.main .page .ariane a { color: #004156 }
.main .page .ariane a:hover { text-decoration: underline }
.main .page h1 { color: #004156; font-size: 30px; margin: 20px 0 20px 0 }
.main .page .publication { font-family: Inter, Arial; font-size: 13px }
.main .page .addthis_inline_share_toolbox { margin-bottom: 29px }
.main .page .texte { font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #00232E; line-height: 24px; font-size: 16px; margin-top: 20px }
.main .page .texte p a { color: #004156; text-decoration: underline }
.main .page .texte p a:hover { color: #00232E; text-decoration: none }
/* .main .page .texte strong:first-child { font-size: 20px; margin: 20px 0 30px 0; display: block; line-height: 28px } MAJBD */
.texte a,
a:focus { outline: 0; cursor: pointer; text-decoration: underline; color: #004156; }
.texte a:hover { text-decoration: none; color: #000 }
.main .page .texte h2 { text-transform: uppercase; font-size: 26px; line-height: 34px; margin-top: 60px }
.main .page .texte h2,
.main .page .texte h3,
.main .page .texte h4 { color: #004156; font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif }
.main .page .texte ul { margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }
.main .page .texte .image { margin: 0 0 30px 0 }
.main .page .texte .image img { width: 100% !important; height: auto !important }
.main .page .texte .image figcaption { font-size: 13px; color: #00232E; font-style: italic }
.main .page .texte .encadre { display: block; padding: 30px; border: 2px dotted #00A2B3; margin-top: 40px; line-height: 20px }
.main .page .texte .encadre .gauche,
.main .page .texte .encadre .droite { display: inline-block; width: 48%; vertical-align: top; margin-right: 2% }
.main .page .texte .encadre h4 { margin: 0 0 10px 0; font-size: 18px; line-height: 23px }
.main .page .texte .accordeon { padding-left: 0; display: block; margin-top: 50px }
/* .main .page .texte .chapitre { list-style: none; margin-top: 15px; width: 100%; font-size: 16px !important; background-color: #004156; line-height: 40px; height: 40px; padding-left: 15px; border-radius: 7px } */
.main .page .texte .chapitre { list-style: none; margin-top: 15px; width: 100%; font-size: 16px !important; background-color: #004156; padding-left: 15px; border-radius: 7px; padding-top: 3px; padding-bottom: 3px; }
.main .page .texte .chapitre a { display: inline-block; color: #FFF; width: calc(100% - 40px) }
.main .page .texte .chapitre span { display: inline-block; cursor: pointer; font-family: 'fontello'; color: #FFF; width: 40px; text-align: center; vertical-align: top }
/* .main .page .texte .chapitre h3 { display: inline-block; font-size: 15px; margin: 0; color: #FFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 70px); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } */
.main .page .texte .chapitre h3 { display: inline-block; font-size: 15px; margin: 0; color: #FFF; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 70px); -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.main .page .texte .chapitretexte { display: none; list-style: none; background-color: #d9e3e6; padding: 30px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px }
.main .page .texte .chapitretexte ul { list-style-type: disc !important; list-style-position: inside !important; padding: 20px }
.main .page .texte .chapitretexte a { text-decoration: underline; color: #00a2b3 }
.main .page .texte .aretenir { display: block; margin-top: 50px; background-color: #004156 !important; border-radius: 6px; background-image: url(../img/a-retenir.svg); background-size: 24%; background-position: right bottom; background-repeat: no-repeat; color: #FFF; padding: 30px; font-weight: normal !important }
.main .page .texte .aretenir h3 { text-transform: uppercase; color: #FFF; display: block; font-size: 18px; font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0 0 10px 0; font-weight: bold }
.main .page .texte .aretenir a { color: #00B7BD; text-decoration: underline }
.main .page .texte .aretenir a:hover { color: #00B7BD; text-decoration: none }
.main .page .texte .liens { display: block }
.main .page .texte .liens h4 { margin: 30px 0 10px 0; text-transform: uppercase }
.main .page .texte .liens ul { margin: 0; list-style: none; margin-top: 0px; padding: 0 }
.main .page .texte .liens ul li { list-style: none !important; height: 44px; border: 2px dotted #00A2B3; line-height: 40px; padding: 0 10px; border-radius: 7px; margin-bottom: 10px; overflow: hidden }
.main .page .texte .liens ul a { color: #004156; float: left; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: calc(100% - 150px) }
.main .page .texte .liens ul span { display: inline-block; margin-left: 8px; float: right }
.main .page .texte .liens ul .icone { font-family: fontello; color: #00a2b3; font-size: 20px }
.main .page .texte .liens ul .ext { background-color: #004156; margin-top: 13px; color: #FFF; line-height: 16px; font-size: 10px; font-weight: bold; text-transform: uppercase; padding: 0 3px; border-radius: 5px }
.main .page .texte .liens ul .poids { color: #888888; font-size: 14px }
/*.main .page .texte iframe { width: 100% !important }*/
.main .sommaire { position: fixed; top: 140px; right: 30px; width: 260px; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; transition: top 0.6s cubic-bezier(.23, 1, .32, 1) }
.main .sommaire ul { margin-bottom: 30px; background-color: #fafbfc; font-size: 15px; width: 260px; list-style: none; padding: 30px; color: #00232E; }
.main .sommaire strong { margin-bottom: 20px; display: block }
.main .sommaire a { display: block; margin-bottom: 10px; }
.main .sommaire a:active { color: #00a2b3; text-decoration: underline }
.main .sommaire .lesaviezvous { background-color: #00a2b3; border-radius: 6px; background-image: url(../img/le-saviez-vous.svg); background-size: 24%; background-position: right bottom; background-repeat: no-repeat; font-size: 15px; width: 260px; color: #FFF; padding: 30px; }
.main .sommaire .lesaviezvous h3 { text-transform: uppercase; font-size: 18px; font-family: Montserrat, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0 0 10px 0; font-weight: bold }
.magliste { width: 100%; padding: 0; list-style: none }
.magliste li { border-bottom: 1px solid #004156 }
.magliste .ent span { background-color: #004156; font-size: 20px; color: #FFF; font-weight: bold; display: inline-block; padding: 2px 4px; text-transform: uppercase }
.magliste .art .vert { background-color: #93c01f; font-size: 14px; color: #FFF; font-weight: bold; display: inline-block; padding: 2px 4px; text-transform: uppercase }
.magliste .art a { display: block; width: 100%; color: #004156; font-size: 0 }
.magliste .art a span { display: inline-block; vertical-align: top }
.magliste .art a .titre { padding: 0; font-size: 15px; width: calc(100% - 20px) }
.magliste .art a .titre h2 { font-size: 18px; margin: 10px 0 }
.magliste .art a .titre .img { display: inline-block; width: 110px; height: 70px; margin-right: 10px; float: left; background-size: cover; background-position: center }
.magliste .art a .icone { font-size: 15px; font-family: fontello; width: 20px; text-align: right; margin-top: 16px }
.magliste .art a:hover .titre { text-decoration: underline }
.retourmag { text-decoration: none; line-height: 20px; margin-bottom: 20px; display: block }
.retourmag .retouricone { font-family: fontello; font-size: 20px; margin-right: 10px; color: #004156 }
.retourmag .retourtexte { background-color: #004156; color: #FFF; font-weight: bold; padding: 2px 4px; font-size: 20px; text-transform: uppercase }
.main .page .soustitre { display: inline-block; background-color: #93c01f; color: #FFF; font-weight: bold; padding: 4px 6px }
.main .sommaire .dautres { background-color: #004156; border-radius: 6px; font-size: 15px; width: 260px; color: #FFF; padding: 20px; }
.main .sommaire .dautres h3 { text-transform: uppercase; margin: 0; font-size: 15px; font-family: 'Montserrat', Arial }
.main .sommaire .dautres .autresarticles { display: inline-block; border: 1px solid #FFF; color: #FFF; font-weight: bold; font-size: 13px; margin: 4px 4px 4px 0; padding: 4px; text-transform: uppercase }
.main .sommaire .dautres .mag_savoirplus { display: block; border-top: 1px solid #FFF; padding: 10px 0 0 0; color: #FFF; font-weight: bold; margin-top: 20px }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// SOMMAIRE
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main .page .texte .chap { display: inline-block; vertical-align: top; width: calc(32% - 15px); margin-right: 30px; margin-top: 30px }
.main .page .texte .chap .thumb { display: block; height: 170px; margin-bottom: 15px }
.main .page .texte .chap .thumb img { object-fit: cover; width: 100%; height: 100% }
.main .page .texte .chap h2 { margin: 0; padding: 0; line-height: 22px; text-transform: none; font-size: 18px }
.main .page .texte .chap h2 a { color: #004156 }
.main .page .texte .chap h2 a:hover { color: #00a2b3 }
.main .page .texte .nomarge { margin-right: 0 !important }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// DIAPORAMA
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main .page .texte .diaporama { width: 100%; height: 533px; position: relative; margin: 0 0 40px 0; background-color: #fafbfc }
.main .page .texte .diaporama ul { height: 533px; padding: 0 !important; list-style: none !important; margin-top: 0 }
.main .page .texte .diaporama ul li { height: 533px; position: relative; background-size: contain; background-position: center; background-repeat: no-repeat }
.main .page .texte .diaporama .unslider-wrap.unslider-carousel>li { float: left; height: 533px; position: relative }
.main .page .texte .diaporama ul li .desc { position: absolute; background-color: #FFF; font-size: 13px; line-height: 13px; color: #78838a; bottom: 0; left: 0; width: 100%; padding: 10px 0; height: auto; font-weight: bold }
.main .page .texte .vertical,
.main .page .texte .vertical ul,
.main .page .texte .vertical .unslider-wrap.unslider-carousel>li { height: 700px }
.main .page .texte .unslider-arrow { color: #FFF !important; transform: translateY(-100%) !important; left: 30px !important; text-shadow: 2px 2px 2px rgba(0,0,0,0.6); }
.main .page .texte .unslider-arrow:hover { text-decoration: none !important }
.main .page .texte .unslider-arrow:active { color: #00a2b3 !important }
.main .page .texte .unslider-arrow.next { left: auto !important; right: 30px !important }
.unslider { overflow: auto; margin: 0; padding: 0; position: relative; z-index: 0 }
.unslider-wrap { position: relative; height: 100% }
.unslider-wrap.unslider-carousel>li { float: left; position: relative }
.unslider li,
.unslider ol,
.unslider ul { list-style: none; margin: 0; padding: 0; border: none; background-size: cover; background-position: center }
.unslider-nav ol { position: absolute; z-index: 1; bottom: 30px; transform: translateX(-50%); left: 50% }
.unslider-nav ol li { display: inline-block; width: 12px; height: 12px; margin: 0 7px; background: rgba(255,255,255,0.3); border-radius: 6px; overflow: hidden; text-indent: -999em; cursor: pointer }
.unslider-nav ol li:hover { background-color: #FFF }
.unslider-nav ol li.unslider-active { background: #00A2B3; cursor: default; border: none }
.unslider-arrow { position: absolute; top: 50%; transform: translateY(-100%); left: 40px; z-index: 2; cursor: pointer; font-family: 'fontello'; color: #FFF; font-size: 30px }
.unslider-arrow.next { left: auto; right: 40px }
.unslider-arrow:active { color: #000 }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// CONTACT
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.contactform { width: 100%; border: 2px dotted #00A2B3; padding: 40px; line-height: 18px }
.contactform li { width: 100%; padding-bottom: 10px; list-style: none }
.contactform li span { font-size: 12px; display: block; width: 100%; line-height: 13px; padding-bottom: 5px; font-weight: bold; text-transform: uppercase; color: #999 }
.contactform li input,
.contactform li textarea,
.contactform li select { padding: 12px 10px; width: 100%; margin-bottom: 10px; background-color: #F5F5F7; border: 1px solid #F5F5F7 }
.contactform li input:focus,
.contactform li textarea:focus,
.contactform li select:focus { border-color: #00a2b3; background-color: #FFF }
.contactform li textarea { height: 180px }
.contactform li .submit { font-weight: bold; display: inline-block; font-size: 16px; margin-top: 20px; background-color: #004156; border-radius: 6px; padding: 10px 15px; color: #FFF }
.contactform .aster { font-size: 13px }
.contactform .aster input { margin: 0 0px 0 0 }
.orientation { width: 100%; border: 2px dotted #00A2B3; padding: 40px; line-height: 18px }
.orientation li { width: 100%; padding-bottom: 10px; list-style: none }
.orientation span { display: block; padding-bottom: 12px; font-weight: bold }
.orientation input,
.orientation textarea,
.orientation select { padding: 12px 10px; width: 100%; background-color: #F5F5F7; border: 1px solid #F5F5F7 }
.orientation input:focus,
.orientation textarea:focus,
.orientation select:focus { border-color: #00a2b3; background-color: #FFF }
.orientation .sujets { padding-top: 30px; display: none }
.orientation .sujets a { display: block; border-radius: 5px; line-height: 22px; background-color: #f7feff; border: 1px solid #00a2b3; color: #00a2b3; padding: 12px; margin-bottom: 8px; text-decoration: none; font-weight: bold; font-size: 15px }
.orientation .sujets .active { background-color: #00a2b3; color: #FFF }
.orientation .resultats { display: none; margin-top: 30px; background-color: #fafbfc; padding: 40px; border-radius: 10px; /*display:none*/ }
.orientation .resultats h2 { text-transform: none !important; margin-top: 0 !important; font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; font-size: 26px !important }
.orientation .resultats .ctt { font-size: 15px; line-height: 19px; margin-bottom: 30px }
.orientation .resultats .ins { font-size: 14px; line-height: 17px; margin-top: 30px }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// APPELS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.appelsaprojets { width: calc(100% - 290px) !important }
.appelsaprojets .page { max-width: none !important }
.appelsaprojets .page .accordeon { margin-top: 10px !important }
.appelsaprojets .page .accordeon strong:first-child { margin: 0 !important }
.appelsaprojets .page .texte .chapitretexte ul { list-style: none !important }
.appelsaprojets .page .accordeon .dl li { padding-bottom: 5px }
.appelsaprojets .page .accordeon .dl .ti { font-weight: bold; text-transform: uppercase; padding-bottom: 10px }
.appelsaprojets .page .accordeon .dl a { text-transform: none; display: block; color: #000; font-size: 16px }
.appelsaprojets .page .accordeon .dl a:hover { text-decoration: underline }
.appelsaprojets .page .accordeon .dl span { font-size: 14px; color: #666 }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ACTUALITES
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.actualites { width: calc(100% - 290px) !important }
.actualites .home { max-width: none; }
.actualites .home .half { width: 260px; margin-right: 30px; margin-bottom: 20px }
#actualites .featured .intro { padding-bottom: 30px }
#actualites .half .title { padding: 20px 0 20px 0px }
.actualites .home .half .title h2 a { font-size: 18px; line-height: 20px }
.more { text-align: center; }
.more a { display: inline-block; font-size: 15px; margin-top: 20px; background-color: #004156; font-weight: bold; border-radius: 6px; padding: 10px 15px; color: #FFF; line-height: 25px }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// DIAPORAMA
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.diaporamas { width: calc(100% - 290px) !important }
.diaporamas .home { max-width: none; }
.diaporamas .home .half { width: 260px; margin-right: 30px; margin-bottom: 20px }
#diaporamas .featured .intro { padding-bottom: 30px }
#diaporamas .half .title { padding: 20px 0 20px 0px }
.diaporamas .home .half .title h2 a { font-size: 18px; line-height: 20px }
.diaporamas .rub { font-size: 20px; text-transform: uppercase; color: #CCC; margin-bottom: 30px; font-weight: bold }
.diaporamas .rub a { color: #CCC }
.diaporamas .rub a:hover,
.diaporamas .rub .actif { color: #00A2B3 }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ELUS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.elus table { width: 100%; border-collapse: collapse; font-family: 'Inter', Arial; font-size: 16px }
.elus table .rechercheelu { color: #FFF; height: 58px; padding: 0 }
.elus table .rechercheelu input { border: 1px solid #004156; padding: 0 10px; color: #000000; height: 40px; float: left; width: 250px }
.elus table .rechercheelu a { float: left; font-family: 'fontello'; background-color: #004156; text-align: center; font-weight: normal; color: #FFF; display: block; height: 40px; width: 40px; line-height: 40px }
.elus table .tri { background-color: #EEE; height: 40px }
.elus table .tri td { padding-left: 20px }
.elus table .tri a { color: #999; font-size: 14px }
.elus table .tri a:hover { text-decoration: underline }
.elus table .ligne td { border-bottom: 1px solid #EEE; padding: 15px 0 15px 0px }
.elus table .ligne .nomelu { line-height: 26px; width: 70% }
.elus table .ligne .nomelu a { color: #004156; font-weight: bold; font-size: 16px; text-transform: uppercase }
.elus table .ligne .nomelu a:hover { text-decoration: underline }
.elus table .ligne .commune { color: #999; font-size: 14px }
.elus .elu { display: inline-block; vertical-align: top; width: calc(50% - 15px); text-align: center; font-family: 'Inter', Arial; }
.elus .elu1 { margin-right: 20px }
.elus .elu h2 { margin: 30px 0 20px 0; text-transform: uppercase; font-size: 18px }
.elus .elu .img { width: 80%; height: 350px; background-size: cover; background-position: center; margin: 0 auto }
.elus .elu .coord { text-align: left; margin-top: 20px; line-height: 24px }
.elus .elu .coord b { display: block; font-weight: bold; margin-top: 20px }
.elus .canton { width: 100%; margin-top: 50px; line-height: 22px; font-size: 15px; font-family: 'Inter', Arial; }
.elus .canton h2 { margin: 0 0 20px 0 }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// RANDOS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.randos { margin-bottom: 50px }
.randos .texte { margin-bottom: 50px }
.randos h2 { text-transform: uppercase; font-size: 26px; font-family: 'Montserrat', Arial }
.randos .contactform { font-family: Inter, Arial }
.randos .contactform table { border-collapse: collapse; background-color: #FFF; width: 100%; font-size: 15px; font-weight: 100; margin-bottom: 40px }
.randos .contactform th { background-color: #00798C; color: #FFF; font-size: 14px; text-transform: uppercase; padding: 8px 8px }
.randos .contactform td { border-bottom: 1px solid #EEE; padding: 15px 8px }
.randos .contactform .fermee td { color: #CCC }
.randos .contactform .a { text-align: center; line-height: 14px }
.randos .contactform .complet { color: #CCC }
.randos .contactform .moreinfos { font-family: 'fontello'; cursor: pointer; font-size: 22px; color: #00A2B3; display: inline-block; width: auto }
.randos .contactform td .radiocheck { margin: 0 !important; padding: 0 !important; width: auto; display: inline-block }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// MAGAZINES
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.mags { width: 100%; border-collapse: collapse; font-family: 'Inter', Arial }
.mags td { border-top: 1px solid #EEE; padding: 20px 0; vertical-align: top }
.mags .apercu { width: 150px }
.mags .apercu a { background-color: #d9e3e6; display: block; width: 120px; height: 180px; background-repeat: no-repeat; background-size: cover; background-position: center }
.mags .infos .date { font-weight: bold; color: #00A2B3; font-size: 18px; text-transform: uppercase; margin-bottom: 5px }
.mags .infos .titre { font-weight: bold; font-size: 18px; padding-bottom: 10px }
.mags .infos .links { color: #666; font-size: 15px }
.mags .infos .links a:hover { text-decoration: underline }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// OFFRES / PRESSE / PUBLICATIONS
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.offres table { width: 100%; border-collapse: collapse; font-family: 'Inter', Arial; font-size: 15px }
.offres table .recherche { color: #FFF; height: 58px; padding: 0 }
.offres table .recherche input,
.offres table .recherche select { border: 1px solid #004156; padding: 0 10px; color: #000000; height: 40px; float: left; width: 250px }
.offres table .recherche a { float: left; font-family: 'fontello'; background-color: #004156; text-align: center; font-weight: normal; color: #FFF; display: block; height: 40px; width: 40px; line-height: 40px }
.offres table .int { background-color: #EEE; height: 40px }
.offres table .int td { padding-left: 15px; text-transform: uppercase }
.offres table .ligne td { border-bottom: 1px solid #EEE; padding: 15px 0 15px 15px; line-height: 18px }
.offres table .ligne .date { text-transform: uppercase; width: 18%; font-weight: bold }
.offres table .ligne .desc .picto { font-family: 'fontello'; color: #00A2B3; float: left; font-size: 22px; display: inline-block; height: 36px; width: 36px; margin-top: 6px }
.offres table .ligne .desc a { display: inline-block; width: calc(100% - 40px); line-height: 18px }
.offres table .ligne .desc .cat { color: #999; text-transform: uppercase; display: block }
.offres table .ligne .desc .txt { display: block; color: #004156 }
.offres table .ligne .secteur { color: #999 }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 404
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.page404 { text-align: center; color: #004156; height: calc(100% - 100px); top: 100px; position: absolute; width: calc(100% - 70px) !important }
.page404 div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }
.page404 div h1 { font-size: 200px; margin: 0; font-weight: bold; line-height: 240px }
.page404 div h2 { font-size: 22px; margin: 0; font-weight: bold; line-height: 50px }
.page404 div h2 a { color: #00a2b3; text-decoration: underline }
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// MODE NUIT
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.night { background-color: #004156; color: #FFF }
.night a,
.night .recherche h1,
.night .recherche .res td .desc,
.night .recherche .res td .url { color: #FFF }
.night .home { background-color: #004156; color: #FFF }
.night .home h2 { color: #FFF }
.night .home .icone { display: none }
.night .newsletter h2 { color: #004156 }
.night .home .ligne1 .droite .services a { background-color: #00a2b3 }
.night header { background-color: #003d50; box-shadow: 0 1px 10px 0 rgba(0,0,0,0.3); }
.night header nav a { color: #FFF }
.night .main .left,
.night .main .right { background-color: #002e3c; color: #FFF }
.night .menu,
.night .home .magazine { background-color: #002e3c }
.night .menu .smenu { border-right: 1px solid #00a2b3 }
.night .menu .smenu a { color: #FFF; border-bottom: 1px solid #00a2b3 }
.night .menu .encart a { color: #FFF }
.night .main .right .telex li .date,
.night .tools a,
.night #search .form a,
.night .home .featured .title span,
.night .home .seinoscope,
.night .left .services .el a .picto,
.night .left .encart h1 { background-color: #00829b }
.night header nav .actif { border-color: #00829b }
.night #search .tags a,
.night .home .newsletter,
.night .left .vousetes { background-color: #58830a }
.night .home .featured .intro,
.night .left .services h2,
.night .left .services .el a .texte { color: #FFF }
.night footer .gauche,
.night footer .droite { background-color: #003d50; color: #FFF }
.night footer .gauche .social a { color: #FFF }
.night .recherche .res td { border-color: #00a2b3 }
.night .main .center .ariane,
.night .main .center .ariane a,
.night .main .center h1,
.night .main .center .texte,
.night .main .center .texte .image figcaption,
.night .main .center .texte h2,
.night .main .center .texte h3,
.night .main .center .texte h4,
.night .main .center .texte .liens ul a,
.night .main .center .texte .annuaireliste .adresse .titre span,
.night .spiderres .item .itembandeau .spidertitre,
#spiderfavoris .item .itembandeau .spidertitre,
.night .spiderres .item .itembandeau .spiderselect,
#spiderfavoris .item .itembandeau .spiderselect,
.night .contactform li span,
.night .offres table .ligne .secteur,
.night .elus table .tri,
.night .elus table .ligne .nomelu a,
.night .elus table .ligne .commune,
.night .offres table .ligne .desc .cat,
.night .offres table .ligne .desc .txt,
.night .navmobile a { color: #FFF }
.night .main .center .texte p a,
.night .spiderres .item .spidertexte .spidercontact a,
#spiderfavoris .item .spidertexte .spidercontact a { color: #00a2b3 }
.night .main .center .texte .chapitre,
.night .main .sommaire .lesaviezvous,
.night .main .center .texte .aretenir { background-color: #00829b !important }
.night .main .sommaire ul,
.night .main .center .texte .chapitretexte { background-color: #002e3c; color: #FFF }
.night .main .center .texte .annuaireliste thead td a,
.night .more a { background-color: #FFF; color: #004156 }
.night .main .center .texte .googlemaps .cartosearch,
.night .main .center .texte .annuaireliste .adresse .informations,
.night .spiderres .item .spidertexte,
#spiderfavoris .item .spidertexte,
.night .spidercarto .spiderloc,
.night .contactform li .submit { background-color: #002e3c }
.night .main .page .texte .diaporama ul li .desc { background-color: #002e3c; color: #FFF; padding: 10px }
.night .contactform li span,
.night .home .featured .title h2 a,
.night .avousdevoir .gauche .somm .chapitre,
night .avousdevoir .droite .arbo,
.night .avousdevoir .droite .arbo a,
.night .avousdevoir .droite .line2 h3,
.night .avousdevoir .droite .line3 .res .spe .content a { color: #FFF }
.night .offres table .int,
.night .offres table .recherche a,
.night .elus table .rechercheelu a,
.night .elus table .tri { background-color: #002e3c }
.tooltipster-fall,
.tooltipster-grow.tooltipster-show { -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1); -moz-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); -ms-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); -o-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15) }
.tooltipster-base { display: flex; pointer-events: none; position: absolute }
.tooltipster-box { flex: 1 1 auto }
.tooltipster-content { box-sizing: border-box; max-height: 100%; max-width: 100%; overflow: auto }
.tooltipster-ruler { bottom: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; visibility: hidden }
.tooltipster-fade { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity }
.tooltipster-fade.tooltipster-show { opacity: 1 }
.tooltipster-grow { -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-backface-visibility: hidden }
.tooltipster-grow.tooltipster-show { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); transition-timing-function: cubic-bezier(.175, .885, .32, 1.15) }
.tooltipster-swing { opacity: 0; -webkit-transform: rotateZ(4deg); -moz-transform: rotateZ(4deg); -o-transform: rotateZ(4deg); -ms-transform: rotateZ(4deg); transform: rotateZ(4deg); -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform }
.tooltipster-swing.tooltipster-show { opacity: 1; -webkit-transform: rotateZ(0); -moz-transform: rotateZ(0); -o-transform: rotateZ(0); -ms-transform: rotateZ(0); transform: rotateZ(0); -webkit-transition-timing-function: cubic-bezier(.23, .635, .495, 1); -webkit-transition-timing-function: cubic-bezier(.23, .635, .495, 2.4); -moz-transition-timing-function: cubic-bezier(.23, .635, .495, 2.4); -ms-transition-timing-function: cubic-bezier(.23, .635, .495, 2.4); -o-transition-timing-function: cubic-bezier(.23, .635, .495, 2.4); transition-timing-function: cubic-bezier(.23, .635, .495, 2.4) }
.tooltipster-fall { -webkit-transition-property: top; -moz-transition-property: top; -o-transition-property: top; -ms-transition-property: top; transition-property: top; -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); transition-timing-function: cubic-bezier(.175, .885, .32, 1.15) }
.tooltipster-fall.tooltipster-initial { top: 0!important }
.tooltipster-fall.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; top: 0!important; opacity: 0 }
.tooltipster-slide { -webkit-transition-property: left; -moz-transition-property: left; -o-transition-property: left; -ms-transition-property: left; transition-property: left; -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1); -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); -moz-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); -ms-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); -o-transition-timing-function: cubic-bezier(.175, .885, .32, 1.15); transition-timing-function: cubic-bezier(.175, .885, .32, 1.15) }
.tooltipster-slide.tooltipster-initial { left: -40px!important }
.tooltipster-slide.tooltipster-dying { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; -ms-transition-property: all; transition-property: all; left: 0!important; opacity: 0 }
@keyframes tooltipster-fading {
0% {
opacity:0
}
100% {
opacity:1
}
}
.tooltipster-update-fade { animation: tooltipster-fading .4s }
@keyframes tooltipster-rotating {
25% {
transform:rotate(-2deg)
}
75% {
transform:rotate(2deg)
}
100% {
transform:rotate(0)
}
}
.tooltipster-update-rotate { animation: tooltipster-rotating .6s }
@keyframes tooltipster-scaling {
50% {
transform:scale(1.1)
}
100% {
transform:scale(1)
}
}
.tooltipster-update-scale { animation: tooltipster-scaling .6s }
.tooltipster-sidetip .tooltipster-box { background: #00a2b3; border-radius: 10px; text-align: left }
.tooltipster-sidetip.tooltipster-bottom .tooltipster-box { margin-top: 8px }
.tooltipster-sidetip.tooltipster-left .tooltipster-box { margin-right: 8px }
.tooltipster-sidetip.tooltipster-right .tooltipster-box { margin-left: 8px }
.tooltipster-sidetip.tooltipster-top .tooltipster-box { margin-bottom: 8px }
.tooltipster-sidetip .tooltipster-content { color: #FFF; line-height: 18px; padding: 10px; font-weight: bold; font-size: 13px; font-family: 'Inter' }
.tooltipster-sidetip .tooltipster-arrow { overflow: hidden; position: absolute }
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow { height: 10px; margin-left: -10px; top: 0; width: 20px }
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow { height: 20px; margin-top: -10px; right: 0; top: 0; width: 10px }
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow { height: 20px; margin-top: -10px; left: 0; top: 0; width: 10px }
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow { bottom: 0; height: 10px; margin-left: -10px; width: 20px }
.tooltipster-sidetip .tooltipster-arrow-background,
.tooltipster-sidetip .tooltipster-arrow-border { height: 0; position: absolute; width: 0 }
.tooltipster-sidetip .tooltipster-arrow-background { border: 10px solid transparent }
.tooltipster-sidetip .tooltipster-arrow-border { border: 10px solid transparent; left: 0; top: 0 }
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border { border-bottom-color: #00a2b3 }
.tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border { border-left-color: #00a2b3 }
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border { border-right-color: #00a2b3 }
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border { border-top-color: #00a2b3 }
.tooltipster-sidetip .tooltipster-arrow-uncropped { position: relative }
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped { top: -10px }
.tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped { left: -10px }
.magazine .center { width: calc(100% - 290px) }
.magazine .center .page { max-width: none }
.magazine .center h1 { font-size: 50px; width: calc(100% - 210px); display: inline-block }
.magazine .center select { border: 2px solid #004156; color: #004156 !important; font-size: 17px; padding: 8px 10px; display: inline-block; font-weight: 900; width: 200px }
.magazine .ligneart { font-size: 15px; width: 100% }
.magazine .ligneart a { display: inline-block; vertical-align: top; position: relative; width: calc(100% - 10px); margin-bottom: 10px; }
.magazine .ligneart a div { position: absolute; top: 20px; transition: padding 0.15s ease-in; width: 100% }
.magazine .ligneart a div .cat { background-color: #96C11F; color: #FFF; text-transform: uppercase; font-size: 14px; font-family: Inter, Arial; font-weight: 900; padding: 2px 8px }
.magazine .ligneart a div h2 { margin: 20px 0 0 0; font-size: 24px; line-height: 32px; color: #004156 }
.magazine .ligneart a div h2 span { background-color: #FFF; padding: 5px }
.navmag h2 { font-size: 16px; color: #004156 }
.navmag a { display: block; margin-bottom: 15px; color: #004156; font-size: 14px }
.navmag a:hover { text-decoration: underline }
.navmag select { border: 1px solid #004156; color: #004156; width: 100%; margin: 15px 0 25px 0; height: 28px }
.navmag .cover { display: block; text-align: center; height: 140px; background-size: contain; background-position: center; background-repeat: no-repeat; margin-bottom: 20px }
.navmag .end { border-top: 1px solid #004156; padding-top: 15px }
.navmag .end a { font-family: fontello; font-size: 36px; display: inline-block; width: 36px; line-height: 36px; text-align: center; margin-right: 15px }
.videodetector .remove-videodetector { display: none }
.videodetector { position: relative; display: block; width: 100%; height: 0; margin: auto; padding: 0% 0% 56.25%; overflow: hidden; }
.videodetector iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }
.aretenir iframe { width: 100% !important; height: 300px !important }