/* bleu clair : #67b1de   rgba(103, 177, 222, 1)  */
/* bleu foncé : #009de0   rgba(0, 157, 224, 1)    */
/* vert       : #74bc7a   rgba(116, 188, 122, 1)  */
/* orange     : #f07b5f   rgba(240, 123, 95, 1)   */
/* jaune      : #f0c95f   rgba(240, 201, 95, 1)   */


/* FONTS
------------------------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../../../__project/_ressources/_fonts/Inter-Light.woff2') format('woff2'),
       url('../../../__project/_ressources/_fonts/Inter-Light.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../../../__project/_ressources/_fonts/Inter-Medium.woff2') format('woff2'),
       url('../../../__project/_ressources/_fonts/Inter-Medium.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../../../__project/_ressources/_fonts/Inter-SemiBold.woff2') format('woff2'),
       url('../../../__project/_ressources/_fonts/Inter-SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('../../../__project/_ressources/_fonts/Inter-Black.woff2') format('woff2'),
       url('../../../__project/_ressources/_fonts/Inter-Black.woff') format('woff');
}




/* GENERAL
------------------------------------------------------------------------------------------- */

body,
input,
textarea
{
font-family: 'Inter', sans-serif;
font-weight: 300;
line-height: 24px;
color: #434343;
}

html {
position: relative;
background-color: #fff;
}

body.menu_opened {
height: 100vh;
overflow: hidden;
}

a {
color: #434343;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: #434343;
background-color: transparent;
text-decoration: underline;
}


.eff_links a {
position: relative;
}

.eff_links a::after {
content: ' ';
position: absolute;
bottom: -5px;
left: 0;
display: block;
width: 0%;
border-bottom: 1px solid #fff;
transition: all .3s;
}

.eff_links a:hover::after {
width: 100%;
}



/* STRUCTURE
------------------------------------------------------------------------------------------- */

div#str-wrapper {
height: 100vh;
display: grid;
grid-template-areas : 'header' 'main' 'footer';
grid-template-rows: min-content 1fr min-content;
}

#fw_notices {
display: none;
}

div#str-corps {
position: relative;
}

div.str-container {
position: relative;
margin: 0 auto;
width: 1200px;
}



/* HEADER
------------------------------------------------------------------------------------------- */

header {
grid-area: header;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100vw;
height: 155px;
background: #fff;
}

header .logo {
position: absolute;
z-index: 1002;
top: 35px;
left: 45px;
display: block;
width: 200px;
height: 85px;
background: transparent url(str-logo.svg) no-repeat 0 0;
background-size: contain;
}

header .str-panel-toggle.open {
position: absolute;
z-index: 1002;
top: 60px;
right: 45px;
font-weight: 500;
text-transform: uppercase;
}

.str-panel-toggle span.ico {
display: inline-block;
vertical-align: middle;
margin-top: -5px;
margin-left: 15px;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
background: transparent linear-gradient(136deg, #67b1de 0%, #009de0 100%) 0% 0% no-repeat padding-box;
}

.str-panel-toggle:hover span.ico {
background: linear-gradient(136deg, #009de0, #74bc7a, #f07b5f, #f0c95f);
background-size: 400% 400%;
animation: gradient 5s ease infinite;
}

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

.str-panel-toggle span.ico i {
display: block;
width: 60px;
height: 60px;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
}

.str-panel-toggle.open span.ico i  {  background-image: url(ico-menu-open.svg);   }
.str-panel-toggle.close span.ico i {  background-image: url(ico-menu-close.svg);  }



/* MENU TOP
------------------------------------------------------------------------------------------- */

div#str-menu_top {
position: absolute;
z-index: 1001;
top: 0;
left: 0;
padding: 75px 250px 0 250px;
width: 100%;
}

div#str-menu_top ul {
list-style: none;
text-align: center;
}

div#str-menu_top li {
display: inline-block;
padding: 0 20px 0 16px;
border-right: 1px solid #ccc;
}

div#str-menu_top li.last {
border-right: 0;
}

div#str-menu_top a {
font-weight: 900;
}

div#str-menu_top li.active a,
div#str-menu_top a:hover {
text-decoration: none;
background: -webkit-gradient(linear, left top, right top, from(#67b1de), to(#009de0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

div#str-menu_top li#menu1_pag_13.active a,
div#str-menu_top li#menu1_pag_13 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#67b1de), to(#009de0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

div#str-menu_top li#menu1_pag_14.active a,
div#str-menu_top li#menu1_pag_14 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#009de0), to(#74bc7a));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

div#str-menu_top li#menu1_pag_15.active a,
div#str-menu_top li#menu1_pag_15 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#009de0), to(#f07b5f));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

div#str-menu_top li#menu1_pag_16.active a,
div#str-menu_top li#menu1_pag_16 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#009de0), to(#f0c95f));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


/* PANEL
------------------------------------------------------------------------------------------- */

div#str-panel {
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}

div#str-panel .overlay {
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(67, 67, 67, .3);
}

div#str-panel .container {
position: absolute;
z-index: 2001;
top: 0;
right: -400px;
display: grid;
grid-template-rows: 1fr min-content;
padding: 120px 45px 45px 45px;
width: 400px;
height: 100vh;
background: #fff;
overflow-y: scroll;
transition: all .5s;
}

body.menu_opened div#str-panel .container {
right: 0;
}

div#str-panel .str-panel-toggle.close {
position: absolute;
z-index: 2001;
top: 60px;
right: 45px;
font-weight: 500;
text-transform: uppercase;
}

div#str-panel ul {
list-style: none;
}

div#str-panel a {
text-decoration: none;
}

nav#fw_str_menu-panel li.niv1_li {
padding-top: 30px;
}

nav#fw_str_menu-panel a.niv1_a {
font-weight: 900;
}

nav#fw_str_menu-panel a.niv2_a {
font-weight: 500;
}

nav#fw_str_menu-panel a:hover {
text-decoration: none;
background: -webkit-gradient(linear, left top, right top, from(#67b1de), to(#009de0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

nav#fw_str_menu-panel li#panel_pag_13 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#67b1de), to(#009de0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

nav#fw_str_menu-panel li#panel_pag_14 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#009de0), to(#74bc7a));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

nav#fw_str_menu-panel li#panel_pag_15 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#009de0), to(#f07b5f));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

nav#fw_str_menu-panel li#panel_pag_16 a:hover {
background: -webkit-gradient(linear, left top, right top, from(#009de0), to(#f0c95f));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

nav#fw_str_menu-menu2 {
position: relative;
margin-top: 30px;
padding: 20px 0 60px 0;
}

nav#fw_str_menu-menu2:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: transparent linear-gradient(90deg, rgba(116, 188, 122, 1) 0%, rgba(74, 155, 218, 1) 49%, rgba(225, 101, 77, 1) 100%) 0% 0% no-repeat padding-box;
}

nav#fw_str_menu-menu2 li {
padding-top: 10px;
}

nav#fw_str_menu-menu2 a {
position: relative;
}

nav#fw_str_menu-menu2 a::after {
content: ' ';
position: absolute;
bottom: -5px;
left: 0;
display: block;
width: 0%;
border-bottom: 1px solid #434343;
transition: all .3s;
}

nav#fw_str_menu-menu2 a:hover::after {
width: 100%;
}



/* MAIN
------------------------------------------------------------------------------------------- */

main {
grid-area: main;
padding-top: 155px;
}



/* FOOTER
------------------------------------------------------------------------------------------- */

footer {
grid-area: footer;
}

footer ul {
list-style: none;
}

footer .footer1 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}

footer .blk {
margin: 45px 0;
padding: 0 45px;
border-right: 1px solid rgba(255, 255, 255, .5);
}

footer .footer1 {
color: #fff;
}

footer .footer1 h3 {
padding-top: 20px;
font-weight: 500;
}

footer .footer1 h3.adr {
padding-top: 0;
}

footer .footer1 a {
color: #fff
}

footer .footer1 a:hover {
text-decoration: none;
}

footer .footer1 nav li {
padding-bottom: 25px;
}

footer .footer1 nav li.last {
padding-bottom: 0;
}

footer .footer1 nav a {
font-size: 18px;
line-height: 21px;
font-weight: 500;
color: #fff;
}

footer .footer1 nav a:hover {
text-decoration: none;
}

footer .footer1 .blk.raccourcis {
border-right: 0;
}

footer .footer2 {
position: relative;
border-top: 1px solid rgba(255, 255, 255, .5);
display: grid;
grid-template-columns: repeat(2, 1fr);
}

footer .footer2 li {
padding-top: 15px;
}

footer .footer2 .blk.horaires {
color: #fff;
}

footer .footer2 .blk.menu4 {
border-right: 0;
}

footer .footer2 li a {
font-size: 12px;
line-height: 12px;
font-weight: 500;
color: #fff;
text-transform: uppercase;
}

footer .footer2 li a:hover {
text-decoration: none;
}

footer .footer2 a.ccll {
position: absolute;
top: 45px;
right: 45px;
display: block;
width: 120px;
height: 90px;
background: transparent;
background-repeat: no-repeat;
background-position:  right bottom;
background-image: url(str-logo-ccll1.png);
background-size: contain;
}

footer .footer2 a.ccll:hover {
background-image: url(str-logo-ccll2.png);
}

.eff_links a.ccll::after {
display: none;
}


/* RACCOURCIS
------------------------------------------------------------------------------------------- */

div.str-raccourcis ul {
list-style: none;
text-align: right;
}

div.str-raccourcis li {
padding-bottom: 10px;
}

div.str-raccourcis li.last {
padding-bottom: 0;
}

div.str-raccourcis a {
display: inline-block;
height: 44px;
border-radius: 22px;
background: #fff;
overflow: hidden;
white-space: nowrap;
}

div.str-raccourcis a:hover {
text-decoration: none;
}

div.str-raccourcis a span {
display: inline-block;
vertical-align: top;
height: 44px;
}

div.str-raccourcis a span.ico {
width: 44px;
text-align: center;
background-color: transparent;
background-repeat: no-repeat;
background-position:  center center;
}

div.str-raccourcis a span.txt {
padding: 0 10px 0 25px;
font-weight: 500;
line-height: 44px;
}

div.str-raccourcis.main {
position: fixed;
z-index: 1900;
bottom: 45px;
right: 45px;
transition: all .5s;
}

div.str-raccourcis.main.str-hidden {
right: -500px;
}

div.str-raccourcis.main a span.txt {
padding: 0;
width: 0;
opacity: 0;
transition: all 0s;
}

div.str-raccourcis.main a:hover span.txt {
padding: 0 10px 0 20px;
width: auto;
opacity: 1;
transition: all .3s;
}


div.str-raccourcis.main a {
background: transparent linear-gradient(103deg, rgba(246, 246, 246, 1) 0%, rgba(234, 234, 234, 1) 100%) 0% 0% no-repeat padding-box;
}

div.str-raccourcis.main li.pg_7 a span.ico {  background-image: url(ico-noir-compte.svg);    }
div.str-raccourcis.main li.pg_8 a span.ico {  background-image: url(ico-noir-contact.svg);   }
div.str-raccourcis.main li.pg_9 a span.ico {  background-image: url(ico-noir-download.svg);  }
div.str-raccourcis.main li.pg_6 a span.ico {  background-image: url(ico-noir-carte.svg);     }
div.str-raccourcis.main li.pg_34 a span.ico {  background-image: url(ico-noir-form.svg);   background-size: 50%; }

div.str-raccourcis.main a:hover span.txt {
padding: 0 20px 0 30px;
transition: all .3s;
}



div.str-raccourcis.panel {
padding-bottom: 45px;
}

div.str-raccourcis.panel a {
background: transparent linear-gradient(103deg, rgba(246, 246, 246, 1) 0%, rgba(234, 234, 234, 1) 100%) 0% 0% no-repeat padding-box;
}

div.str-raccourcis.panel li.pg_7 a span.ico {  background-image: url(ico-noir-compte.svg);    }
div.str-raccourcis.panel li.pg_8 a span.ico {  background-image: url(ico-noir-contact.svg);   }
div.str-raccourcis.panel li.pg_9 a span.ico {  background-image: url(ico-noir-download.svg);  }
div.str-raccourcis.panel li.pg_6 a span.ico {  background-image: url(ico-noir-carte.svg);     }
div.str-raccourcis.panel li.pg_34 a span.ico {  background-image: url(ico-noir-form.svg);  background-size: 50%;    }

div.str-raccourcis.panel a:hover span.txt {
padding: 0 20px 0 30px;
transition: all .3s;
}

div.str-raccourcis.footer a:hover span.txt {
padding: 0 20px 0 30px;
transition: all .3s;
}


/* SLIDER
------------------------------------------------------------------------------------------- */

section#sec-slider {
position: relative;
}

div#str-slider {
width: 100%;
background: #fff;
}

div#str-slider .fw_slider_item p {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
display: grid;
align-items: center;
justify-items: center;
width: 100vw;
height: calc(100vh - 155px);
color: #fff;
font-size: 60px;
line-height: 72px;
text-align: center;
letter-spacing: 1px;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 1);
}

div#str-slider .fw_slider_item p span.t1 {
font-weight: 600;
}

div#str-slider .fw_slider_item p span.t2 {
}

div#str-slider .fw_slider_bullets ul {
background-color: transparent;
}

div#str-slider .fw_slider_bullets li {
width: 20px;
}



/* ALERTE
------------------------------------------------------------------------------------------- */

div#str-alerte {
position: fixed;
z-index: 1900;
bottom: 45px;
left: -300px;
width: 435px;
transition: all .5s;
}

div#str-alerte.str-hidden {
left: -435px;
}

div#str-alerte:hover {
left: 0;
}

div#str-alerte .container {
display: grid;
grid-template-columns: 300px 135px;
min-height: 135px;
color: #fff;
align-items: end;
}

div#str-alerte .container .links {
padding: 15px;
background: transparent linear-gradient(122deg, #4A9BDA 0%, #f07b5f 100%) 0% 0% no-repeat padding-box;
}

div#str-alerte-ico .travaux {
padding: 15px 0;
border-left: 2px solid #fff;
background: #f07b5f;
}

div#str-alerte-ico span.ico_img {
display: block;
width: 135px;
height: 70px;
background: transparent url(ico-alerte.svg) no-repeat center center;
}

div#str-alerte-ico span.ico_txt {
display: block;
width: 135px;
text-align: center;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}

div#str-alerte .content {
display: block;
text-decoration: none;
}

div#str-alerte .content.more {
position: relative;
padding-top: 30px;
}

div#str-alerte .content.more::before {
content: '';
position: absolute;
top: 15px;
left: 0;
width: 30px;
height: 1px;
background: #fff;
}

div#str-alerte .content span {
display: block;
color: #fff;
}

div#str-alerte .content span.sstitre {
font-size: 18px;
line-height: 22px;
}

div#str-alerte .content span.titre {
font-size: 18px;
line-height: 22px;
font-weight: 900;
}

div#str-alerte:hover .container:after {
animation: shake .3s ease infinite;
transform-origin: center center;
}

@keyframes shake {
0%   {  transform: rotate(0);      }
25%  {  transform: rotate(-5deg);  }
50%  {  transform: rotate(0);      }
75%  {  transform: rotate(5deg);   }
100% {  transform: rotate(0);      }
}


/* BANDEAU
------------------------------------------------------------------------------------------- */

div#str-bandeau {
position: relative;
}



/* TITRE
------------------------------------------------------------------------------------------- */

div#str-titre {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 450px;
display: grid;
align-items: center;
justify-items: center;
}

div#str-titre h1 {
text-align: center;
font-size: 45px;
line-height: 50px;
color: #fff;
font-size: 60px;
line-height: 72px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 6px;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
}



/* BOUSSOLE
------------------------------------------------------------------------------------------- */

div#str-boussole {
padding: 60px 0 30px 15px;
line-height: 12px;
}

div#str-boussole ul {
list-style: none;
}

div#str-boussole li {
display: inline-block;
color: #999;
}

div#str-boussole li:after {
content: '>';
font-size: 13px;
}

div#str-boussole a {
padding: 0 6px 0 3px;
font-size: 12px;
color: #999;
}

div#str-boussole li:last-child:after {
content: '';
}

div#str-boussole li:last-child a {
padding-right: 0;
}

div#str-boussole a:hover {
color: #000;
text-decoration: none;
}



/* CONTENU
------------------------------------------------------------------------------------------- */

section#sec-blocs {
padding-bottom: 100px;
}



/* LISTES
------------------------------------------------------------------------------------------- */

div.str-liste ul {
display: grid;
grid-template-columns: 360px 458px 360px;
gap: 40px 0;
list-style: none;
justify-content: center;
}

div.str-liste li {
display: grid;
padding: 0 90px;
background: #fff;
border-right: 1px solid #eee;
}

div.str-liste li.num_0 {
padding-left: 0;
}

div.str-liste li.num_2 {
padding-right: 0;
border: 0;
}

div.str-liste li a {
display: grid;
align-items: stretch;
grid-template-rows: 70px 150px min-content 1fr 60px;
text-decoration: none;
}

div.str-liste li a:hover {
color: #434343;
text-decoration: none;
}

div.str-liste li a span.img {
position: relative;
overflow: hidden;
}

div.str-liste li a span.img:after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 150px;
background: transparent;
transition: all .3s;
}

div.str-liste li span.novisuel {
display: block;
width: 100%;
height: 150px;
background: #ececec url(str-logo2.png) no-repeat center center;
background-size: 20%;
}

div.str-liste li span.sstitre {
align-self: center;
}

div.str-liste li span.titre {
padding: 15px 0;
font-size: 24px;
line-height: 30px;
font-weight: 900;
}

div.str-liste li span.resume {
font-weight: 500;
}

div.str-liste li span.suite {
text-align: right;
}

div.str-liste li span.suite span {
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: #f2f2f2 url(ico-noir-arrow-right.svg) no-repeat center center;
background-size: 30%;
}

div.str-liste li a:hover span.suite span {
background-color: #009de0;
background-image: url(ico-blanc-arrow-right.svg);
}



/* COMMUNS
------------------------------------------------------------------------------------------- */

.str-btn,
.fw_form .fw_btn_submit {
display: inline-block;
padding: 10px 25px;
color: #fff !important;
border-radius: 0;
text-shadow: none;
text-decoration: none !important;
background: #434343;
}

.fw_form .fw_btn_cancel {
border-radius: 0;
}




/* SOMMAIRE
------------------------------------------------------------------------------------------- */

div.blo_sommaire ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 20px;
list-style: none;
}

div.blo_sommaire li {
height: 270px;
}

div.blo_sommaire li a {
position: relative;
display: block;
width: 100%;
height: 270px;
text-decoration: none;
}

div.blo_sommaire li a:hover {
text-decoration: none;
}

div.blo_sommaire li a span.img {
display: block;
height: 270px;
overflow: hidden;
}

div.blo_sommaire li a span.img:after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 380px;
height: 270px;
background: transparent;
transition: all .3s;
}

div.blo_sommaire li span.novisuel {
display: block;
width: 100%;
height: 270px;
background: #ececec url(str-logo2.png) no-repeat center center;
background-size: 30%;
}

div.blo_sommaire li a:hover span.novisuel {
background-color: #eee;
}

div.blo_sommaire li span.titre {
position: absolute;
top: 0;
left: 0;
display: grid;
align-items: center;
padding: 0 20px;
width: 100%;
height: 270px;
color: #fff;
font-size: 30px;
line-height: 40px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
}

div.blo_sommaire li span.resume {
display: none;
}




/* BLO_SITEMAP
------------------------------------------------------------------------------------------- */

div.blo_sitemap {
text-align: center;
}

div.blo_sitemap ul {
list-style: none;
}

div.blo_sitemap li {
padding-bottom: 20px;
}

div.blo_sitemap li li {
padding-bottom: 0;
}

div.blo_sitemap a {
text-decoration: none;
}

div.blo_sitemap a.niv1_a {
font-weight: 500;
}



/* BLO_CONTACT
------------------------------------------------------------------------------------------- */

div.blo_contact .abo {
margin: 20px 60px 0 300px;
padding: 0 20px 20px 20px;
background: #fafafa;
}

div.blo_contact .abo_txt1 {
padding-left: 4px;
}

div.blo_contact .abo_txt2 {
display: block;
padding-left: 20px;
color: #999;
font-size: 12px;
}

div.blo_contact .privacy {
display: block;
padding-left: 20px;
color: #999;
font-size: 12px;
}

div.blo_contact .privacy a {
color: #999;
text-decoration: none;
}

div.blo_contact .privacy a:hover {
color: #333;
}



/* BLO_DOCUMENTS
------------------------------------------------------------------------------------------- */

div.blo_documents h3 {
padding-top: 50px;
border-bottom: 1px solid #ddd;
}

div.blo_documents .doc a {
display: grid;
grid-template-columns: 1fr 50px 80px;
gap: 0 20px;
padding: 20px;
text-decoration: none;
border-bottom: 1px solid #ddd;
}

div.blo_documents .doc a span.titre {
display: block;
font-weight: 600;
}

div.blo_documents .doc a span.resume {
display: block;
padding-top: 5px;
font-size: 15px;
line-height: 20px;
}

div.blo_documents .doc a span.ext {
font-size: 14px;
line-height: 14px;
text-transform: uppercase;
text-align: right;
}

div.blo_documents .doc a span.poids {
font-size: 14px;
line-height: 14px;
text-align: right;
}

div.blo_documents .doc a span.ext span,
div.blo_documents .doc a span.poids span {
display: inline-block;
padding: 5px;
background: #67b1de;
color: #fff;
font-weight: 500;
}

div.blo_documents .doc a:hover {
background: #67b1de;
}

div.blo_documents .doc a:hover * {
color: #fff;
}

div.blo_documents .doc a:hover span.ext span,
div.blo_documents .doc a:hover span.poids span {
background: #fff;
color: #67b1de;
}



/* BLO_MEDIATHEQUE
------------------------------------------------------------------------------------------- */

div.blo_mediatheque h3 {
padding-top: 50px;
border-bottom: 1px solid #ddd;
}

div.blo_mediatheque .media {
display: grid;
grid-template-columns: 300px 1fr;
gap: 0 20px;
padding: 20px;
text-decoration: none;
border-bottom: 1px solid #ddd;
}

div.blo_mediatheque .media span.titre {
display: block;
font-weight: 600;
}

div.blo_mediatheque .media span.resume {
display: block;
padding-top: 5px;
font-size: 15px;
line-height: 20px;
}

div.blo_mediatheque .media:hover {
background: #67b1de;
}

div.blo_mediatheque .media:hover * {
color: #fff;
}



/* BLO_CARTO
------------------------------------------------------------------------------------------- */

div#blo_carto {
position: relative;
}

div#blo_carto .map {
background: #fff url(blo_carto.jpg) no-repeat 0 0;
background-size: contain;
}

div#blo_carto li {
position: absolute;
list-style: none;
}

div#blo_carto li a {
display: block;
width: 100%;
}

.blo_carto-commune p.adresse {
padding-top: 15px;
}

.blo_carto-commune p.tel {
padding-top: 15px;
}

.blo_carto-commune p.mail {
padding-top: 15px;
}

.blo_carto-commune p.ico {
display: grid;
grid-template-columns: 30px 1fr;
}

.blo_carto-commune p.ico i {
padding-top: 4px;
}

.blo_carto-commune p.vide {
font-style: italic;
font-size: 14px;
}




/* BLO_FAQ
------------------------------------------------------------------------------------------- */

div.blo_faq h3 {
padding-top: 50px;
border-bottom: 1px solid #ddd;
}

div.blo_faq .faq span.infos {
display: block;
padding: 20px;
border-bottom: 1px solid #ddd;
}

div.blo_faq .faq span.question {
display: block;
font-weight: 600;
}

div.blo_faq .faq span.reponse {
display: block;
padding-top: 5px;
font-size: 15px;
line-height: 20px;
}




/* BLO_GLOSSAIRE
------------------------------------------------------------------------------------------- */

div.blo_glossaire h3 {
padding-top: 50px;
border-bottom: 1px solid #ddd;
}

div.blo_glossaire div.rech {
display: flex;
column-gap: 5px;
padding-bottom: 40px;
}

div.blo_glossaire div.rech a {
display: block;
width: 30px;
height: 30px;
padding-top: 3px;
border-radius: 50%;
color: #fff;
font-weight: 700;
text-align: center;
background: #2da2df;
text-decoration: none;
}

div.blo_glossaire div.rech a:hover {
background: linear-gradient(136deg, #009de0, #74bc7a, #f07b5f, #f0c95f);
}

div.blo_glossaire div.rech span {
display: block;
width: 30px;
height: 30px;
padding-top: 3px;
border-radius: 50%;
color: #fff;
font-weight: 700;
text-align: center;
background: #eee;
}

div.blo_glossaire div.mots {
display: grid;
grid-template-columns: 40px 1fr;
column-gap: 20px;
}

div.blo_glossaire div.mots .lettre {
display: inline-block;
vertical-align: middle;
margin-top: 15px;
width: 40px;
height: 40px;
padding-top: 8px;
border-radius: 50%;
background: linear-gradient(136deg, #009de0, #74bc7a, #f07b5f, #f0c95f);
color: #fff;
font-weight: 700;
text-align: center;
}


div.blo_glossaire .glossaire span.infos {
display: block;
padding: 20px;
border-bottom: 1px solid #ddd;
}

div.blo_glossaire .glossaire span.mot {
display: block;
font-weight: 600;
}

div.blo_glossaire .glossaire span.definition {
display: block;
padding-top: 5px;
font-size: 15px;
line-height: 20px;
}




/* UNE
------------------------------------------------------------------------------------------- */

div#str-une {
position: relative;
padding-bottom: 100px;
}

div#str-une .str-container {
width: 1180px;
}

div#str-une h2 {
position: relative;
padding-bottom: 60px;
font-size: 30px;
font-weight: 600;
}

div#str-une h2:after {
content: '';
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
height: 2px;
background: transparent linear-gradient(90deg, rgba(116, 188, 122, 1) 0%, rgba(74, 155, 218, 1) 49%, rgba(225, 101, 77, 1) 100%) 0% 0% no-repeat padding-box;
}

div#str-une a.btn_all {
position: absolute;
top: 15px;
right: 0;
display: inline-block;
padding-right: 20px;
text-transform: uppercase;
font-size: 12px;
line-height: 12px;
font-weight: 600;
background: transparent url(ico-noir-arrow-right.svg) no-repeat right center;
}

div#str-une a.btn_all:hover {
color: #009de0;
text-decoration: none;
}



/* CARTO
------------------------------------------------------------------------------------------- */

div#str-carto {
margin: 0 auto 100px auto;
width: 800px;
height: 320px;
background: transparent url(str-carto.svg) no-repeat left center;
}

div#str-carto a {
display: block;
padding-left: 450px;
width: 750px;
height: 320px;
}

div#str-carto a:hover {
text-decoration: none;
}

div#str-carto a span {
display: block;
}

div#str-carto a span.titre {
padding: 60px 0 30px 0;
font-size: 60px;
line-height: 72px;
}

div#str-carto a span.texte {
font-size: 12px;
line-height: 16px;
font-weight: 600;
text-transform: uppercase;
}




/* COMPTEUR
------------------------------------------------------------------------------------------- */

div.str-compteur-liste ul {
text-align: right;
list-style: none;
}

div.str-compteur-liste li {
display: inline-block;
}

div.str-compteur-liste li a {
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
background: #ddd;
}

div.str-compteur-liste li a.active {
background: #434343;
color: #fff;
}

div.str-compteur-liste li a:hover {
background: #aaa;
color: #fff;
text-decoration: none;
}

div.str-compteur-fiche {
padding: 80px 0;
}

div.str-compteur-fiche ul {
display: block;
text-align: center;
list-style: none;
}

div.str-compteur-fiche li {
display: inline-block;
vertical-align: middle;
}

div.str-compteur-fiche li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
background: #ec693b;
}

div.str-compteur-fiche li a:hover {
text-decoration: none;
color: #fff;
background: #664193;
}


/* SOCIALS
------------------------------------------------------------------------------------------- */

div.fw_socials ul {
margin: 0;
list-style: none;
}

div.fw_socials li {
padding: 0;
}

div.fw_socials button {
display: block;
}

div.fw_socials button i {
font-size: 20px !important;
background: transparent !important;
border: 0 !important;
}

div.fw_socials button:hover i {
opacity: 1 !important;
}

footer div.fw_socials button i {
color: #1b1b1b !important;
}

footer div.fw_socials button:hover i {
color: #999 !important;
}


/* FORM COORDONNEES
------------------------------------------------------------------------------------------- */

div#str-form_coordonnees h3 {
padding-top: 45px;
}

div#str-form_coordonnees .blks {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}

div#str-form_coordonnees .fw_field_label {
width: 300px;
}

div#str-form_coordonnees .cases {
margin: 45px 0;
padding: 30px;
background: #eee;
}

div#str-form_coordonnees .cases p.collecte {
padding: 25px 0 5px 0;
color: #777;
}

div#str-form_coordonnees p.ok {
padding: 30px;
}



/* THEMES
------------------------------------------------------------------------------------------- */

div#str-wrapper.bleu footer,
div#str-wrapper.bleu div.blo_sommaire li a:hover span.img:after,
div#str-wrapper.bleu .str-btn:hover,
div#str-wrapper.bleu .fw_form .fw_btn_submit:hover,
div#str-wrapper.bleu .fw_form .fw_btn_cancel:hover {
background: transparent linear-gradient(113deg, #67b1de 0%, #009de0 100%) 0% 0% no-repeat padding-box;
}

div#str-wrapper.bleu div.str-raccourcis.footer li a span.txt {  color: #009de0;  }
div#str-wrapper.bleu div.str-raccourcis.footer li.pg_7 a span.ico {  background-image: url(ico-bleu-compte.svg);    }
div#str-wrapper.bleu div.str-raccourcis.footer li.pg_8 a span.ico {  background-image: url(ico-bleu-contact.svg);   }
div#str-wrapper.bleu div.str-raccourcis.footer li.pg_9 a span.ico {  background-image: url(ico-bleu-download.svg);  }
div#str-wrapper.bleu div.str-raccourcis.footer li.pg_6 a span.ico {  background-image: url(ico-bleu-carte.svg);     }
div#str-wrapper.bleu div.str-raccourcis.footer li.pg_34 a span.ico {  background-image: url(ico-bleu-form.svg);   background-size: 50%;  }


div#str-wrapper.vert footer,
div#str-wrapper.vert div.blo_sommaire li a:hover span.img:after,
div#str-wrapper.vert .str-btn:hover,
div#str-wrapper.vert .fw_form .fw_btn_submit:hover,
div#str-wrapper.vert .fw_form .fw_btn_cancel:hover {
background: transparent linear-gradient(113deg, #009de0 0%, #74bc7a 100%) 0% 0% no-repeat padding-box;
}

div#str-wrapper.vert div.str-raccourcis.footer li a span.txt {  color: #74bc7a;  }
div#str-wrapper.vert div.str-raccourcis.footer li.pg_7 a span.ico {  background-image: url(ico-vert-compte.svg);    }
div#str-wrapper.vert div.str-raccourcis.footer li.pg_8 a span.ico {  background-image: url(ico-vert-contact.svg);   }
div#str-wrapper.vert div.str-raccourcis.footer li.pg_9 a span.ico {  background-image: url(ico-vert-download.svg);  }
div#str-wrapper.vert div.str-raccourcis.footer li.pg_6 a span.ico {  background-image: url(ico-vert-carte.svg);     }
div#str-wrapper.vert div.str-raccourcis.footer li.pg_34 a span.ico {  background-image: url(ico-vert-form.svg);    background-size: 50%;   }


div#str-wrapper.orange footer,
div#str-wrapper.orange div.blo_sommaire li a:hover span.img:after,
div#str-wrapper.orange .str-btn:hover,
div#str-wrapper.orange .fw_form .fw_btn_submit:hover,
div#str-wrapper.orange .fw_form .fw_btn_cancel:hover {
background: transparent linear-gradient(113deg, #009de0 0%, #f07b5f 100%) 0% 0% no-repeat padding-box;
}

div#str-wrapper.orange div.str-raccourcis.footer li a span.txt {  color: #f07b5f;  }
div#str-wrapper.orange div.str-raccourcis.footer li.pg_7 a span.ico {  background-image: url(ico-orange-compte.svg);    }
div#str-wrapper.orange div.str-raccourcis.footer li.pg_8 a span.ico {  background-image: url(ico-orange-contact.svg);   }
div#str-wrapper.orange div.str-raccourcis.footer li.pg_9 a span.ico {  background-image: url(ico-orange-download.svg);  }
div#str-wrapper.orange div.str-raccourcis.footer li.pg_6 a span.ico {  background-image: url(ico-orange-carte.svg);     }
div#str-wrapper.orange div.str-raccourcis.footer li.pg_34 a span.ico {  background-image: url(ico-orange-form.svg);   background-size: 50%;    }


div#str-wrapper.jaune footer,
div#str-wrapper.jaune div.blo_sommaire li a:hover span.img:after,
div#str-wrapper.jaune .str-btn:hover,
div#str-wrapper.jaune .fw_form .fw_btn_submit:hover,
div#str-wrapper.jaune .fw_form .fw_btn_cancel:hover {
background: transparent linear-gradient(113deg, #009de0 0%, #f0c95f 100%) 0% 0% no-repeat padding-box;
}

div#str-wrapper.jaune div.str-raccourcis.footer li a span.txt {  color: #f0c95f;  }
div#str-wrapper.jaune div.str-raccourcis.footer li.pg_7 a span.ico {  background-image: url(ico-jaune-compte.svg);    }
div#str-wrapper.jaune div.str-raccourcis.footer li.pg_8 a span.ico {  background-image: url(ico-jaune-contact.svg);   }
div#str-wrapper.jaune div.str-raccourcis.footer li.pg_9 a span.ico {  background-image: url(ico-jaune-download.svg);  }
div#str-wrapper.jaune div.str-raccourcis.footer li.pg_6 a span.ico {  background-image: url(ico-jaune-carte.svg);     }
div#str-wrapper.jaune div.str-raccourcis.footer li.pg_34 a span.ico {  background-image: url(ico-jaune-form.svg);    background-size: 50%;   }