@grid-float-breakpoint: 992px;
/* 
font-family: 'Source Sans Pro' - 300,400,400i,600,600i,700,700i

@media (min-width: 1200px) {}

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 991px) {}

@media (max-width: 767px) {}

#20A2A2	turquoise assez saturé
#272D51	bleu nuit
#2E6070	turquoise désaturé
#EEDEC7	chair
#DB9A3B	orange

 */

/* corr Bootstrap 5
html {font-size: 10px;} */

:root {--largecran: 100vw;}

:root {--bleucharte: rgb(42,85,105);}
:root {--bleuchartealpha: rgba(42,85,105,.7);}

:root {--coul-tit-fondclair: rgba(113,124,128,.9);}
:root {--coul-txt-fondclair: rgba(113,124,128,1);}
:root {--coul-lig-fondclair: rgba(113,124,128,.8);}
:root {--coul-tit-fondsombre: rgba(255,255,255,.7);}
:root {--coul-txt-fondsombre: rgba(255,255,255,.8);}
:root {--coul-lig-fondsombre: rgba(255,255,255,.6);}

:root {--orangeliens: #EB6909;}


html {background-color: var(--bleucharte);}

body {
overflow-x: hidden;
background: #8c9a9e url("images/fond2.png") repeat 0 0; 
font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/*  font-size: 14px corr Bootstrap 5; */
}

.overflow-hidden {overflow: hidden;}

a, a:link, a:visited {	
text-decoration: none; color: inherit; transition: color .5s; -webkit-transition: color .5s; -moz-transition: color .5s; -o-transition: color .5s;
}

.page_article .texte a, .page_article .texte a:link, .page_article .texte a:visited,
.page_article .chapo a, .page_article .chapo a:link, .page_article .chapo a:visited {text-decoration: underline var(--orangeliens);}

a:hover, a:focus, a:active, a.on,
#lien_foot a:hover, #lien_foot a:focus, #lien_foot a:active,
.gpetitre h2 a:hover, .gpetitre h2 a:focus, .gpetitre h2 a:active {color: var(--orangeliens) !important; text-decoration: none;}/* #de9133 */

.sep {margin: 0 10px;}
em {font-style: italic;}
.page_article hr.spip {clear: both;}
hr {margin-top: 1.5em; margin-bottom: 1.5em; border-color: #ccc;}
hr.invisible {visibility: hidden;}

/* --------------------------------------------------------------------------------------------                     CAROUSEL DE FOND */

/* ---------------------------------------------------------------------------------------------------------------------------      HEADER  */

body header.vegas-container {height: 740px; position: relative;}
header {background: #577A8C url("images/fond2.png") repeat 0 0;}

header .vegas-wrapper { /* ??????????????????? */
display: -ms-flexbox; display: -webkit-flex; display: flex;
-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;
-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;
-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;
-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;
}

/* DISTRIBUTION VERTICALE DES 3 BLOCS : nav_syst banner-txt logobarreaccueil */
.vegas-content {
height: 100%;
display: -ms-flexbox; display: -webkit-flex; display: flex;
-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;
-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;
-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
}
.nav_syst, .banner-txt, .logobarreaccueil {-webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;}




/* DISTRIBUTION HORIZONTALE DE LA BARRE nav_syst



 */
.nav_syst {
width: 100%;
margin: 0;
padding: 2em 2em 0 2em;  
display: -ms-flexbox; display: -webkit-flex; display: flex;
-webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
-webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
-webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}

.navbar-brand {-webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; float: none; margin: 0; height: inherit; padding: 0 1em 0 0x; line-height: 30px;}
.navbar-brand img {height: 51px;} /* Logo dans la navbarre  */ 

#menu_lang {-webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 1em 0 1%;} 
#menu_lang strong {display: none;}
#menu_lang a, #menu_lang a:link, #menu_lang a:visited {
text-decoration: none;
font-size: 3rem; 
color: #fff; 
font-weight: 300; 
border: 1px #fff solid; 
padding: .5rem 1rem;
background-color: rgba(255,255,255,0);
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s; 
}

#menu_lang a:hover, #menu_lang a:focus, #menu_lang a:active {background-color: rgba(255,255,255,.4);}






/* DISTRIBUTION HORIZONTALE DANS LE BLOC banner-txt :
.banner-txt
	#navbar.collapse.navbar-collapse
		h2		
		ul > li > a
	.banner_titres
		.home-heading-slider-slide.home-heading-slider-slide-NUMERO-BOUCLE
			a > h2
 */

.banner-txt {
display: flex; display: -ms-flexbox; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row; -ms-flex-direction: row;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;
justify-content: space-around; -webkit-justify-content: space-around;-ms-flex-pack: distribute;
align-content: center; -webkit-align-content: center; -ms-flex-line-pack: center;
}
.banner-txt {flex-grow: 1; align-items: stretch /* center */; width: 100%; padding: 0 6.5em;}

.banner-txt #navbar, .banner-txt .banner_titres {
position: relative;
display: flex; display: -ms-flexbox; display: -webkit-flex;
flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;
justify-content: space-around; -webkit-justify-content: space-around;-ms-flex-pack: distribute;
align-content: center; -webkit-align-content: center; -ms-flex-line-pack: center;
}

.banner-txt #navbar {flex: 1 1 60%; align-items: stretch /* center */; max-width: 60%; height: 100%;}
.banner-txt .banner_titres {flex: 1 1 40%; max-width: 40%;}
.banner-txt #navbar ul {
flex-grow: 1;
padding-block: 10%;
display: -ms-flexbox; display: -webkit-flex; display: flex;
-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;
-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;
-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;
}
.banner-txt #navbar ul li {flex: 1 1 auto;}


#navbar {color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); padding: 0;}
#navbar ul {list-style: none; margin: 0; padding: 0;}
#navbar h2, #navbar .h2, #navbar .h2 {
margin: 0;
font-size: 3rem;
font-weight: 300;
color: var(--orangeliens);
letter-spacing: .1rem;
text-align: left;
background-color: transparent;
background-image: none;
}

#navbar li a, #navbar li a:link, #navbar li a:visited { /* + communs ci dessous */
padding: 0;
font-size: 2.1rem;
font-weight: 300;
}

/* BOUTON HAMBURGER */
/* ANCIEN .navbar-toggle {border-radius: 0; border: 1px #fff solid; margin: 0; padding: 13px 9px 13px 9px;} */
/* Attention avec Bootstrap 5.2.3, la Class "icon-bar" est remplacée par ".navbar-toggler-icon" */
/* ANCIEN .navbar-toggle .icon-bar {border-color: transparent; height: 1px; background-color: #fff;}  */


/* ========================================================== MENU HAMBURGER =================================================================

/* BOUTON */
#menu-wrapper {overflow: hidden; max-width: 100%; cursor: pointer; z-index: 1000;}
#menu-wrapper #hamburger-menu {position: relative; width: 25px; height: 20px; margin: 15px;}
#menu-wrapper #hamburger-menu span {
opacity: 1;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: 10px;
color: black;
background-color: white;
position: absolute;
transform: rotate(0deg);
transition: .4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1) {top: 0;}
#menu-wrapper #hamburger-menu span:nth-child(2) {top: 9px;}
#menu-wrapper #hamburger-menu span:nth-child(3) {top: 18px;}
/* #menu-wrapper #hamburger-menu.open {position: fixed;} */
#menu-wrapper #hamburger-menu.open span:nth-child(1) {transform: translateY(9px) rotate(135deg);}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {opacity: 0; transform: translateX(-60px);}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {transform: translateY(-9px) rotate(-135deg);}

/* MENU */

#menu-container {
position: absolute;
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
height: 100%;
top: 0;
right: 100%;
padding: 5em 0 1em 0;
background: url("../vegas/overlays/04.png") var(--bleucharte) repeat 0 0;
color: #fff;
overflow-y: auto;
overflow-x: hidden;
z-index: 999;
}

#menu-container .menu-list {flex: 0 1 50%; margin: 0;}
.menu-list .bloc_menu {margin-bottom: 2%; padding: 2%; border: 1px rgba(255,255,255,.4) solid; transition: border-color .5s ease;}
.menu-list .bloc_menu a.menu-head {padding: 0 60px 0 0; font-weight: 300; letter-spacing: .3rem; font-size: 2.2rem;}
.menu-list .bloc_menu a.menu-head .glyphicon.glyphicon-th-large {font-size: .9em;}
.menu-list .bloc_menu > ul {margin: 1em 0; padding-left: 2em;}
.accordion-toggle a.menu-link {font-size: 1.8rem; letter-spacing: .1em; padding: 0 60px 0 0;}
#menu-container .menu-list ul.menu-submenu {padding: 0 0 0 3em;}
.menu-list .bloc_menu:last-of-type {margin-bottom: 0;}
.menu-list .bloc_menu:hover, .menu-list .bloc_menu:active, .menu-list .bloc_menu:focus {border-color: var(--orangeliens);}
.accordion-toggle, .accordion-content {cursor: pointer; position: relative; }
.accordion-content {display: none;}
.accordion-content a.head {font-size: 1.8rem; letter-spacing: .1em; font-style: italic; font-weight: normal;}



.accordion-toggle a::before, .accordion-toggle a::after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 30px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #fff;
transform-origin: 50% 50%;
transition: all 0.3s ease-out;
}
.accordion-toggle:hover a::before, .accordion-toggle:active a::before, .accordion-toggle:focus a::before  {background: var(--orangeliens) !important;}
.accordion-toggle:hover a::after, .accordion-toggle:active a::after, .accordion-toggle:focus a::after  {background: var(--orangeliens) !important;}
.accordion-toggle a.active::before {transform: rotate(0deg); background: var(--orangeliens) !important;}
.accordion-toggle a.active::after {transform: rotate(180deg); background: var(--orangeliens) !important; opacity: 0;}

/* LIENS RAPIDES ICONES */

ul.accesrapidesmenu {
display: flex; display: -ms-flexbox; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row; -ms-flex-direction: row;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;
justify-content: space-around; -webkit-justify-content: space-around;-ms-flex-pack: distribute;
align-content: center; -webkit-align-content: center; -ms-flex-line-pack: center;
}
ul.accesrapidesmenu li a {font-size: 2.2rem;}


 /* // NOUVEAU HAMBURGER */


/* -----------------   COMMUNS MENUS BANDEAU ET MENU HAMBURGER */


#navbar li a, #navbar li a:link, #navbar li a:visited, 
.menu-list .bloc_menu a.menu-head, .menu-list .bloc_menu a.menu-head:link, .menu-list .bloc_menu a.menu-head:visited,
.accordion-toggle a.menu-link, .accordion-toggle a.menu-link:link, .accordion-toggle a.menu-link:visited {
text-decoration: none; 
color: #fff; 
border-left-width: 0px;
border-color: var(--orangeliens);
border-style: solid;
transition: border-left-width 0.15s; -webkit-transition: border-left-width 0.15s; -moz-transition: border-left-width 0.15s; -o-transition: border-left-width 0.15s;
}

.accordion-toggle a::before {transform: rotate(-90deg); opacity: 1; z-index: 2;}
.accordion-toggle.active-tab {background: transparent; color: var(--orangeliens); transition: all 0.3s ease;}


#navbar li a:hover, #navbar li a:focus, #navbar li a:active,
.menu-list .bloc_menu a.menu-head:hover, .menu-list .bloc_menu a.menu-head:focus, .menu-list .bloc_menu a.menu-head:active,
.accordion-toggle a.menu-link:hover, .accordion-toggle a.menu-link:focus, .accordion-toggle a.menu-link:active {
text-decoration: none; 
border-left-width: 6px; 
}
#navbar li a:hover, #navbar li a:focus, #navbar li a:active {padding: 0 0 0 5px;}
.menu-list .bloc_menu a.menu-head:hover, .menu-list .bloc_menu a.menu-head:focus, .menu-list .bloc_menu a.menu-head:active,
.accordion-toggle a.menu-link:hover, .accordion-toggle a.menu-link:focus, .accordion-toggle a.menu-link:active {padding: 0 49px 0 5px;}


/* -----------------   BLOC TITRES SLIDES BANDEAU : */

.home-heading-slider-slide {
position: absolute;
width: auto;
align-self: center;
opacity: 0;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity = 0);
transition: opacity 5s; -webkit-transition: opacity 5s; -moz-transition: opacity 5s; -o-transition: opacity 5s;
}

.home-heading-slider-slide.active {/* opacite lorsque .active */
opacity: 1; -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity = 100);
}

.gpetitre {
position: relative;
align-self: flex-end;
padding: 2rem; 
border: 1px #fff solid;
transition: border-color 0.5s ease-in-out; -webkit-transition: border-color 0.5s ease-in-out; -moz-transition: border-color 0.5s ease-in-out; -o-transition: border-color 0.5s ease-in-out;
}

.home-heading-slider-slide a, .gpetitre h2 {margin: 0; padding: 0; color: #fff; font-size: calc(var(--largecran) * 0.025); text-align: center; background-image: none; background-color: transparent; text-transform: none; text-decoration: none;}

/* HOVER NE MARCHE PAS !!!?? */
.home-heading-slider-slide a:hover .gpetitre, .home-heading-slider-slide a:active .gpetitre, .home-heading-slider-slide a:focus .gpetitre {border-color: var(--orangeliens);}
.home-heading-slider-slide a:hover .gpetitre h2, .home-heading-slider-slide a:active .gpetitre h2, .home-heading-slider-slide a:focus .gpetitre h2 {color: var(--orangeliens);}


/* -----------------   BLOC LOGOS_WRAPPER - DISTRIBUTION HORIZONTALE : */

.logos_wrapper {
width: 100%;
background-color: rgba(255,255,255,.9); 
opacity: 0.7;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity = 70);
transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out;
z-index: 900;
}

.logos_wrapper:hover {/* opacite au survol */
opacity: 1; -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity = 100);
}

.logos_tutelles {
display: flex; display: -ms-flexbox; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row; -ms-flex-direction: row;
flex-wrap: nowrap; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
justify-content: space-around; -ms-flex-pack: distribute; -webkit-justify-content: space-around;
list-style: none;
width: 100%; 
margin: 0; 
padding: 10px 0;
}

.logos_tutelles li {margin: 0; padding: 0; flex: 0 0 auto; -ms-flex: 0 0 auto; -webkit-flex: 0 0 auto;}
.logos_tutelles li.interlogo {flex: 1 1 auto; -ms-flex: 1 1 auto; -webkit-flex: 1 1 auto;}
.logos_tutelles li img {height: 50px; width: auto; margin: 0; padding: 0;}




/* ==============================================================================     SECTIONS DE CONTENUS    =============================================================================  */
/* #717C80 = 113,124,128 = #8c9a9e en + sombre */

.chrono_content {position: relative;}


/* STYLES GENERAUX : */
section {padding: 3% 0; border-bottom: 1px #7D7D7D solid;}
section .container-fluid {margin: 0 2%; padding: 15px; border: 1px rgba(255,255,255,0.2) solid;}

/* ALTERNANCE DES COUL DE FOND DES SECTIONS ET DES BORDERS */
.chrono_content section:nth-child(2n+1) {background: #d6d6d6 url("images/fond2.png") repeat 0 0;}
.chrono_content section:nth-child(2n+1) .container-fluid {margin: 0 2%; padding: 15px; border: 1px rgba(113,124,128,.3) solid;}

section h2 {margin-top: 0; text-align: center; font-weight: 300; font-size: 4rem; letter-spacing: .3rem; text-transform: uppercase; padding: 1rem 0; color: var(--coul-tit-fondclair);}
section h3 {margin: 20px 15px 0 15px; color: var(--coul-tit-fondclair);}
.txt_ssrub_portail p {margin: 12px 0 0 0; padding: 0 15px; font-weight: 400; font-size: 14px; line-height: 16px; color: var(--coul-txt-fondclair); letter-spacing: 1px; text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;}
section hr {margin: 10px 15px 20px 15px; border-color: var(--coul-lig-fondclair);}

/* ============ SECTION EDITO > laisser APRES les SECTIONS	*/
#edito h2 {color: var(--coul-tit-fondclair);}
.txt_portail h2.spip {font-size: 2.5rem; margin-top: 20px; margin-bottom: 10px; font-weight: 400; line-height: 1.1; color: inherit; text-align: left;} /* SOUS-TITRES DE SECTION (devrait etre h3) */
.txt_portail p {padding: 0 15px 0 15px; font-size: 1.8rem; letter-spacing: .05em; color: var(--coul-txt-fondclair);}
.txt_portail .tab-page, .txt_portail .tab-page p {font-size: 1.8rem;}

/* -----
POUR LE TAB= "BOITE A ONGLETS" DE LA PAGE SOMMAIRE > VOIR + BAS
----- */


/* ============ */

/* ALTERNANCE DES COUL DES TIT-TXT-BARRES SECTIONS 2 / 4 / 6 etc. : */
.chrono_content section:nth-child(2n) h2 {color: var(--coul-tit-fondsombre);}
.chrono_content section:nth-child(2n) .txt_portail p, .chrono_content section:nth-child(2n) .txt_ssrub_portail p {color: var(--coul-txt-fondsombre);}
.chrono_content section:nth-child(2n) h3 {color: var(--coul-tit-fondsombre); border-color: var(--coul-lig-fondsombre);}
.chrono_content section:nth-child(2n) hr {border-color: var(--coul-lig-fondsombre);}

.row {margin: 0;}
/* .col-lg-4 {padding: 15px;} */

.thumbnail {
max-width: 380px;
margin: 2em 0;
/* margin-bottom: 0; */
padding: 0;
border: 0 none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background-color: #fbfbfb;
}

.thumbnail img {display: block; background-color: var(--bleucharte);}
.matricimg {position: relative;}

.overlay_block {
display: block; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: var(--bleuchartealpha) url("images/add.svg") no-repeat 50% 50%; 
opacity: 0;
transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out;
}
.thumbnail > a:hover .overlay_block {opacity: 1;}

/* COMMUNS ELEMENTS  - BORDER-RADIUS + BOX-SHADOW */
	.thumbnail, .thumbnail img, .overlay_block {border-top-left-radius: 8px; border-top-right-radius: 8px;}
	#btngo {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-top-left-radius: 0; border-top-right-radius: 0;}
	.thumbnail, #btngo {
		box-shadow: 3px 1px 1px 0px var(--bleucharte); -moz-box-shadow: 3px 1px 1px 0px var(--bleucharte); -webkit-box-shadow: 3px 1px 1px 0px var(--bleucharte); -o-box-shadow: 3px 1px 1px 0px var(--bleucharte);
		transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out;
	}
	.thumbnail:hover, .thumbnail:focus, .thumbnail:active, #btngo:hover, #btngo:focus, #btngo:active {
	box-shadow: 5px 1px 15px 0px var(--bleucharte); -moz-box-shadow: 5px 1px 15px 0px var(--bleucharte); -webkit-box-shadow: 5px 1px 15px 0px var(--bleucharte); -o-box-shadow: 5px 1px 15px 0px var(--bleucharte);
	}
/* --- */





.thumbnail .caption {
height: 160px; 
padding: 3%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.caption h4 {flex: 1 1 65px;}
.caption p {flex: 1 1 72px; display: flex; align-items: end; text-align: justify; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; overflow: hidden;}

.thumbnail a {text-decoration: none;}
.thumbnail h4 {margin: 0; min-height: 60px; font-size: 1.25em; line-height: 1em; font-weight: 700; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;}
.thumbnail h4, .thumbnail h4 a, a.liresuite {color: var(--bleucharte);}
.thumbnail .sstitre {font-size: 90%; font-style: italic; font-weight: 400;}
.thumbnail p {margin: 0; color: #6e6e6e; line-height: 17px;}
/* a.liresuite:link, a.liresuite:visited {text-decoration: underline;} */

.directlinkproj {
max-width: 380px; 
margin-bottom: 2em; 
margin-top: .2em;
}
.pbouton, .msg_attente {margin: 0; letter-spacing:.2rem; line-height: 1;}
.pbouton a, .msg_attente {font-size: 16px;}

.cartouche .msg_attente {text-align: left;} /* ???????????? */
.btn-lg {padding: 6px;}

#btngo, .msg_attente {
text-align: center; 
color: var(--bleucharte);
font-variant: all-small-caps;
}
#btngo {
padding: 9px 7px; 
background-color: #fbfbfb;
border-color: transparent;
font-weight: bold;
}
.msg_attente {padding: 9.4833px 7px;}


#btngo:hover, #btngo:focus, #btngo:active {
color: var(--orangeliens);
/* background-color: var(--bleuchartealpha); */
border-color: transparent;
}
@media (max-width: 1700px) {.thumbnail {margin: 1em 0;}}

@media (max-width: 1400px) {
	/* ACCUEIL BANNER */
	body header.vegas-container {height: calc(var(--largecran)/2.3);}
	.nav_syst {padding: 1em;}
	.navbar-brand {padding: .5em;}
	.navbar-brand img {height: 35px;}
	#menu_lang a, #menu_lang a:link, #menu_lang a:visited {font-size: 2.5rem;}

	#navbar h2, #navbar .h2 {font-size: 2.5rem; letter-spacing: .2rem; line-height: 1.5;}
	#navbar li a, #navbar li a:link, #navbar li a:visited {font-size: 1.8rem; line-height: 1.8; line-height: 1.8;}
	.logos_tutelles li img {height: 35px;}

	/* ACCUEIL textes */
	section h2 {font-size: 3.3rem; letter-spacing: .2rem;}
	.txt_portail h2.spip {font-size: 2rem;}
	h3, .h3 {font-size: 2.3rem;}
	.txt_portail p, .txt_portail .tab-page, .txt_portail .tab-page p {font-size: 1.7rem; letter-spacing: .03em; line-height: 2.1rem;}
}
@media (max-width: 1300px) {
	#menu-container .menu-list {flex: 0 1 70%;}
	#edito .container {width: 100%;}
	.banner-txt #navbar ul {padding-block: 6%;}
}

@media (max-width: 1100px) {
	.navbar-brand img {height: 25px;}
	#menu_lang a, #menu_lang a:link, #menu_lang a:visited {font-size: 2rem; padding: .3rem .8rem .5rem .8rem;}
	#navbar li a, #navbar li a:link, #navbar li a:visited {font-size: 1.6rem; line-height: 2;}
	.banner-txt #navbar ul {padding-block: 4%;}
	/* ACCUEIL textes */
	.txt_portail p, .txt_portail .tab-page, .txt_portail .tab-page p {font-size: 1.6rem; letter-spacing: .03em; line-height: 2.1rem;}
	section h2 {font-size: 3rem;}
	.txt_portail h2.spip {font-size: 1.8rem;}
	h3, .h3 {font-size: 2.1rem;}
	/* thumbnail accueil*/
	h4, .h4, .pbouton a, .msg_attente {font-size: 1.6rem;}
	.thumbnail .caption {height: 130px;}
	.caption h4 {flex: 1 1 65px;}
	.caption p {flex: 1 1 65px;}
}

@media (max-width: 1000px) {
	.banner-txt #navbar ul {padding-block: 3%;}
	.banner-txt #navbar ul li, #navbar h2, #navbar .h2, #navbar li a, #navbar li a:link, #navbar li a:visited {line-height: 1;}
	#navbar li a, #navbar li a:link, #navbar li a:visited {font-size: 1.4rem;}
}


@media (min-width: 991px) {}
@media (max-width: 990px) {
.banner-txt > #navbar {display: none;}
.banner-txt {justify-content: flex-end; -webkit-justify-content: flex-end;}
}

@media (max-width: 991px) {
/* Bouton hamburger */
	.navbar-brand {padding: .2em .5em;}
	.navbar-brand img {height: 30px;}
	header .nav_syst {padding: 1% 0 1% 0;}
	.gpetitre {padding: 1.5rem;}
	.gpetitre h2 {margin: 0; line-height: 1;}
	.gpetitre p {font-size: 1.5rem; line-height: 1.5rem;}
}

@media (max-width: 881px) {section h2 {font-size: 2.6rem;} h3, .h3 {font-size: 1.8rem;}}

@media (min-width: 768px) and (max-width: 991px) {
	#menu-container .menu-list {flex: 0 1 90%;}
	.logos_tutelles {padding: 8px 10px;}
	.logos_tutelles li img {height: 42px;}
}

@media (max-width: 767px) {
	#menu-container .menu-list {flex: 0 1 96%;}
	#menu-container .menu-submenu > li {padding: .5em 0;}
	.logos_wrapper.logobarreaccueil .container-fluid {padding: 0;}
	.logos_tutelles {padding: 5px;}
	.logos_tutelles li img {height: 35px;}
	section h2 {font-size: 2.2rem;} h3, .h3 {font-size: 1.5rem;}
}

@media (max-width: 600px) {
	.logos_tutelles li img {height: 30px;}
	section h2 {letter-spacing: 0;} h3, .h3 {font-size: 1.5rem;}
	.caption p {line-height: 1;}
}

@media (min-width: 451px) and (max-width: 767px) {
	header .nav_syst {padding: 5px 0 5px 0;}
	.navbar-brand img {height: 20px;}
	.pbouton a, .msg_attente {font-size: 14px; letter-spacing: 0;}
}

@media (max-width: 450px) {
	.container {padding: 0 5px;}
	.logos_wrapper .container {padding: 0;}
	header .nav_syst {background-color: rgba(0,0,0,.2); padding: 5px 0 5px 0;}
	#navbar h2, #navbar .h2 {margin: 1% 0 0 0; font-size: 2..5rem;}
	#navbar li a, #navbar li a:link, #navbar li a:visited {
		padding: 0 11px 0 0;
		font-size: 1.8rem;
		letter-spacing: .1rem; line-height: 27px;
	}
	.navbar-brand img {height: 20px;}
	.logos_tutelles {padding: 5px 10px;}
	.logos_tutelles li img {height: 35px;}
	.pbouton a, .msg_attente {font-size: 14px; letter-spacing: 0;}
}


/* =================================================================            ARTICLES               ===========================================================================  */

#img_fondarticle {position: fixed; width: 100%; height: auto; top: 0; left: 0; text-align: center; z-index: 1;}
#img_fondarticle img {width: 100%; height: auto; margin: 0; float: none;}

.page_article .page {
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}

.page .wrapper {margin-top: 6%;}

.arbo ul {margin: 0;}
.arbo li {display: inline-block;}
.arbo {margin-bottom: 10px; padding-left: 0;}

.arbo li, .arbo a {color: #fff;}
.art-freres {padding-left: 16px;}

#content {padding: 2rem; background-color: rgba(246,246,246,.5); border: 1px #7d7d7d solid; font-size: 16px;}
#content .row {padding: 2rem; background-color: rgba(246,246,246,.9);}

.cartouche .spip_logo {margin-left: 20px;}
#content h1 {font-size: 4rem; letter-spacing: 2px; font-weight: 600; color: #2d6ca2;}
.soustitre {color: #2d6ca2; font-size: 3rem; letter-spacing: 1px;}

.chapo {font-weight: 600; letter-spacing: 1px; text-align: justify;}
.chapo {color:#595959;}

.cartouche .pbouton {margin-top: 30px;}
.cartouche #btngo {
border-radius: 3px; 
box-shadow: none;
background-color: rgba(255,255,255,.3);
border-color: transparent;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.cartouche #btngo:hover {
color: var(--orangeliens);
background-color: var(--coul-tit-fondsombre);
box-shadow: 0 0 7px 0 rgb(207,207,207);
border-color: transparent;
}

/* PARTENARIATS DES ARTICLES VIA MOTS-CLES */

#partenariats {width: 100%; margin: 0; padding: 0;}

#partenariats a {
display: inline-block;
margin: 0 4px 13px 0;
text-decoration: none;

opacity: .8; -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity = 80);
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}

/* LOGOS PARTENARIATS = MAX 56px haut + 5px tournant */
#partenariats a:link img, #partenariats a:visited img {
max-height: 66px;
padding: 5px; 
background-color: #fff;
border-radius: 4px;
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
border: 0;
transition-duration: .2s;
}

#partenariats a:hover, #partenariats a:active, #partenariats a:focus {
opacity: 1; -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity = 100);
}

#partenariats a:hover img, #partenariats a:focus img {
-moz-box-shadow: 3px 5px 6px rgba(0,0,0,0.5);
-webkit-box-shadow: 3px 5px 6px rgba(0,0,0,0.5);
box-shadow: 3px 5px 6px rgba(0,0,0,0.5);
}

/* TEXTES DES ARTICLES */

.page_article h2, .page_article h3, .page_article h4, .page_article h5, .page_article h2, .page_article h6,
.page_article .h2, .page_article .h3, .page_article .h4, .page_article .h5, .page_article .h2, .page_article .h6 {clear: both; margin-top: 1em; margin-bottom: .5em;}
.page_article h2, .page_article .h2 {margin-top: 1.5em;}
.page_article h3, .page_article .h3 {margin-top: 1.2em;}

ul.spip {list-style-type: none;}
ul.spip, ol.spip {margin-left: 0; list-style-position: inside;}
li ul.spip {list-style-type: "·";}
li ul.spip li {margin: .7rem 0 0 1rem; padding-left: 1rem; line-height: 2rem;}


/* BOITES A ONGLETS - SURCHARGE tab.css */
#tab-pane- {margin: 1.5em 0;}
.dynamic-tab-pane-control .tab-page {padding: 1.5em 1.2em;}
.dynamic-tab-pane-control .tab-row .tab {padding: .4em .8em;}
.dynamic-tab-pane-control .tab-row .tab a:link, .dynamic-tab-pane-control .tab-row .tab a:visited {
margin: 0;
color: rgba(51,51,51,.5);
font-size: 1.5rem;
font-weight: 600;
line-height: 2rem;
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
font-style: italic;
letter-spacing: .2rem;
}
.dynamic-tab-pane-control .tab-row .tab.selected a,
.dynamic-tab-pane-control .tab-row .tab.selected a:link,
.dynamic-tab-pane-control .tab-row .tab.selected a:active {color: rgba(51,51,51,.8);}

/* BOITES A ONGLETS - PAGE SOMMAIRE (coul. différentes) SURCHARGE tab.css */
.txt_portail .dynamic-tab-pane-control .tab-row .tab, 
.txt_portail .dynamic-tab-pane-control .tab-row .tab.selected, 
.txt_portail .dynamic-tab-pane-control .tab-page {background-color: var(--coul-txt-fondclair);}

.txt_portail .dynamic-tab-pane-control .tab-row .tab a,
.txt_portail .dynamic-tab-pane-control .tab-row .tab a:link, 
.txt_portail .dynamic-tab-pane-control .tab-row .tab a:active {color: rgba(255,255,255,.5);}

.txt_portail .dynamic-tab-pane-control .tab-row .tab.selected a,
.txt_portail .dynamic-tab-pane-control .tab-row .tab.selected a:link, 
.txt_portail .dynamic-tab-pane-control .tab-row .tab.selected a:active {color: #fff;}

.txt_portail .dynamic-tab-pane-control .tab-page,
.txt_portail .dynamic-tab-pane-control .tab-page > *,
.txt_portail .dynamic-tab-pane-control .tab-page > * > * {color: rgba(255, 255, 255, 0.8);}

.txt_portail .dynamic-tab-pane-control .tab-page a, 
.txt_portail .dynamic-tab-pane-control .tab-page a:link, 
.txt_portail .dynamic-tab-pane-control .tab-page a:visited {text-decoration: underline dotted rgba(255, 255, 255, 0.6);}

@media (max-width: 600px) {
	.dynamic-tab-pane-control .tab-row .tab a:link, .dynamic-tab-pane-control .tab-row .tab a:active {font-size: 11px; line-height: 1; letter-spacing:0;}
	.dynamic-tab-pane-control .tab-row .tab {padding: .3em;}
	.dynamic-tab-pane-control .tab-page {padding: 1.5em .5em;}
}

@media (max-width: 695px) {
	.dynamic-tab-pane-control .tab-row .tab a:link, .dynamic-tab-pane-control .tab-row .tab a:active {font-size: 12px; line-height: 1;}
	.dynamic-tab-pane-control .tab-row .tab {padding: .3em .4em;}
	.dynamic-tab-pane-control .tab-page {padding: 1.5em .5em;}
}

@media (max-width: 767px) {
	.cartouche .spip_logo {max-width: 200px; height: auto;}
	#content {padding: 0.5rem; border: 1px #7d7d7d solid; font-size: 14px;}
	#content .row {padding: 1rem;}
}

@media (min-width: 768px) and (max-width: 991px) {
	.cartouche .spip_logo {max-width: 200px; height: auto;}
	#content {padding: 1rem; font-size: 15px;}
	#content .row {padding: 1.5rem;}

	.dynamic-tab-pane-control .tab-row .tab a:link,
	.dynamic-tab-pane-control .tab-row .tab a:visited,
	.dynamic-tab-pane-control .tab-row .tab a:active {font-size: 16px; line-height: 23px;}
}

@media (min-width: 992px) and (max-width: 1199px) {.cartouche .spip_logo {max-width: 350px; height: auto;}}

@media (min-width: 1200px) {}

/* =================================================================            FOOTER               ===========================================================================  */
footer {padding: 0; background-color: var(--bleucharte);}
.chrono_content footer {margin: 0;} /* QUE POUR LA PAGES ACCUEIL */
.page footer {margin-top: 7em;} /* QUE POUR LES PAGES ARTICLES */

footer .logos_wrapper {margin: 0;}/* (que pour les pages articles) */
footer .last-foot {
display: flex; display: -ms-flexbox; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row; -ms-flex-direction: row;
flex-wrap: nowrap; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap;
justify-content: space-between; -webkit-justify-content: space-between; -ms-flex-pack: justify;
/* align-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; */
align-items: center; -webkit-align-items: center; -ms-flex-align: center;
padding-top: 2em; 
padding-bottom: 2em;
}
footer .last-foot > a {flex: 1 1 20%; display: block;}
footer .btn-lg, footer .btn-default {padding: .5em .6em; color: rgba(255,255,255,1); background-color: transparent; border: 1px rgba(255,255,255,.5) solid; transition: all .3s ease;}
footer .btn-lg:hover, footer .btn-lg:focus, footer .btn-lg:active, 
footer .btn-default:hover, footer .btn-default:focus, footer .btn-default:active {background-color: transparent; color: var(--orangeliens); border-color: var(--orangeliens);}


footer .btn span .glyphicon {font-size: 1.5em;}

#lien_foot {flex: 1 1 80%; list-style: none; margin: 0; padding: 0;}
#lien_foot li {display: inline-block; font-size: 1.6rem; color: #fff; font-weight: 300; letter-spacing: .3rem;}
#lien_foot a:link, #lien_foot a:visited {color: rgba(255,255,255,.5);}


/* ###########################################################    FORMULAIRE DE CONTACT   +  PREVISUALISATION  => squelettes / article_149.html (local et serveur site) ################################################################## */

#formulaire_contact {margin-bottom: 2rem; letter-spacing: .1rem;}
#flex-form-contact {
margin:0;
display: flex; display: -ms-flexbox; display: -webkit-flex;
flex-direction: row; -webkit-flex-direction: row; -ms-flex-direction: row;
flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap;
justify-content: space-between; -webkit-justify-content: space-between; -ms-flex-pack: justify;
align-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start;
align-items: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start;
}

#formulaire_contact  legend {margin-bottom: 1.5rem; font-size : 1.5rem; line-height: 1.5rem; letter-spacing: 1px; font-weight: 300;}
#flex-form-contact label {font-size: 14px; font-style: italic; font-weight: 400;}

#flex-form-contact li {margin-top: .3rem;}
#flex-form-contact li.pour-destinataire,
#flex-form-contact li.saisie_sujet,
#flex-form-contact li.saisie_texte {
width: 100%;
flex: 1 0 auto; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto;
align-self: auto; -webkit-align-self: auto; -ms-flex-item-align: auto;
}

#flex-form-contact li.saisie_prenom, 
#flex-form-contact li.saisie_nom, 
#flex-form-contact li.saisie_organisation,
#flex-form-contact li.saisie_mail {
max-width: 48%;
flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto;
align-self: auto; -webkit-align-self: auto; -ms-flex-item-align: auto;
}

#flex-form-contact li.pour-destinataire label, #flex-form-contact li.pour-destinataire #destinataire {max-width: 48%; display: inline;}
#flex-form-contact li.pour-destinataire label {margin-right: 1em;}

#flex-form-contact li.saisie_prenom input, 
#flex-form-contact li.saisie_nom input, 
#flex-form-contact li.saisie_organisation input,
#flex-form-contact li.saisie_mail input, 
#flex-form-contact li.saisie_sujet input,
#flex-form-contact li textarea {
width: 100%;
margin-top: .1rem;
font-size: 16px;
line-height: 25px;
background-color: #F6F6F6; 
border: 0 none;
padding: 2px 6px 0 6px;
-moz-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.2);
-o-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.2);
filter:progid:DXImageTransform.Microsoft.Shadow(color=rgba(0,0,0,0.2), Direction=135, Strength=2);
}

#flex-form-contact li.saisie_texte p {text-align: right; font-size: 14px;}
#formulaire_contact .red {color: #c50a1d;}

/* Bloc Previsualisation */
#formulaire_contact fieldset.previsu {width: 100%; margin-top: 2rem; background-color: transparent; border: 1px #c50a1d dotted;}
#formulaire_contact fieldset.previsu ul, #formulaire_contact fieldset.previsu ul li, #formulaire_contact fieldset.previsu div, #formulaire_contact fieldset.previsu div p {max-width: 704px; }

#formulaire_contact fieldset.previsu legend {color: /* #383838 */ #c50a1d; margin: 0; padding: 1rem;}
#formulaire_contact fieldset.previsu ul {margin: 0 0 1rem 0; padding: 1em; background-color:rgba(255,255,255,.4);}