@font-face {
    font-family: 'Asap';
    src: url('Asap-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'Asap';
    src: url('Asap-SemiBold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
	}

@font-face {
	font-family: 'Asap condensed';
	src: url('asapcondensed-semibold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}

@font-face {
	font-family: 'Ubuntu Condensed SemiBold';
	font-style: normal;
	font-weight: 400;
	src: url(UbuntuCondensed-SemiBold.ttf) format('truetype');
	}
	
@font-face {
	font-family: 'Ubuntu Condensed';
	font-style: normal;
	font-weight: 400;
	src: url(UBU.otf) format('opentype');
	}

@font-face {
    font-family: 'Gilroy';
    src: url('Gilroy-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'Gilroy-bold';
    src: url('gilroy-extrabold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	}


@font-face {
    font-family: 'JPHand-italic';
    src: url('JPHand-9.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'JPHand-regular';
    src: url('jp_handstraight-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'AvantGarde-book';
    src: url('AvantGardeBook.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'Fenice';
    src: url('fenice-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}

* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

body { 
	line-height: 1;
	-webkit-text-size-adjust: none; 
	font-size: 18px;
	font-family: Asap, sans-serif;
	color: #5a5c5b;
	background: url(../interface/iso1000.jpg);
	}

#page_wrapper { 
	position: relative;
	/*z-index:2;*/
	}
	
#main {
	padding: 0;
	padding-bottom:100px;
	}

	
.container {
	margin: 0 auto;
	background:#fff;
	box-shadow: -2px 1px 3px 0 rgba(0,0,0,0.4), 2px 1px 3px 0px rgba(0,0,0,0.4); 
	width: 1240px;
	max-width: 100%;
	padding:0 20px 0 20px;
	-webkit-tap-highlight-color: transparent;
	}

.footer {
	padding:20px;
	text-align:center;
	box-shadow: -4px 4px 3px -2px rgba(0,0,0,0.4), 4px 4px 3px -2px rgba(0,0,0,0.4);
	border-bottom-left-radius:13px;
	border-bottom-right-radius:13px;
	}

@media screen and (max-width: 1250px) {
	#main { padding-bottom:0; }
	.footer { border-radius:unset; }
	}


@media screen and (max-width: 980px) {
	.container { 
		width: 100%; 
		padding:0 15px 0 15px
		}
	}

@media screen and (max-width: 670px) {
	.container { 
		width: 100%; 
		padding:0 7px 0 7px;
		}
	}



h1, h2, h3, h4, .h1, .h2, .h3, .h4, .h6 {
	color: #222;
	font-weight: normal;
	margin:0 0 15px 0;
	line-height: 1.2em;
	display:block;
	text-align:left;
	}

.h6 { 
	display: -webkit-flex; 
	display: flex; 
	margin: 0; 
	height: 41px; 
	-webkit-justify-content: flex-start;  
	justify-content: flex-start; 
	text-align: left;
	-webkit-align-items: flex-start; 
	align-items: flex-start;
	color: #FFF;
	background-image:url(../interface/fond_bloc.jpg);
	}

.h6.h6-left { -webkit-justify-content: flex-start; justify-content: flex-start; text-align: left; }
.h6.h6-center {-webkit-justify-content: center;  justify-content: center; text-align: center;  }
.h6.h6-right {  -webkit-justify-content: flex-end;  justify-content: flex-end; text-align: right; }

.h6.h6-top { -webkit-align-items: flex-start; align-items: flex-start; }
.h6.h6-middle { -webkit-align-items: center;  align-items: center;  }
.h6.h6-bottom {  -webkit-align-items: flex-end;  align-items: flex-end; }



h1, .h1 {
	font-family: Ubuntu Condensed, Tahoma,  sans-serif;
	font-size:32px;
	color:#333;
	line-height:1.1em;
	}

h2, .h2{ 
	font-family: Ubuntu Condensed SemiBold, Tahoma,  sans-serif;
	color:#526597;
	font-size: 1.4em; 
	line-height: 1.2em;
	margin-bottom: 20px;
	}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child { margin-top:0; }
.h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child { margin-top:0; }
.h1:last-child, .h2:last-child, .h3:last-child, .h4:last-child, .h5:last-child { margin-bottom:0; }

h3, h4, .h3, .h4 { color: #222; }

.h3 { font-size: 1.1em; line-height: 1.3em; font-family: Asap, sans-serif;}

.h4 { font-size: 1em; line-height: 1.4em; font-family: Asap, sans-serif;}

p { margin:1em 0 1em 0; }

.conteneur { line-height: 1.4em; font-family: Asap, sans-serif; }

h5, .h5 {
	line-height:1.4em;
	display:block;
	clear:both;
	margin:1.5em 0 1.2em 0;
	background:#eee;
	border-radius:6px;
	padding:0.8em 1.2em ;
	box-shadow:0 0 6px 0 rgba(120,120,120,0.65); 
	color:#5f615f;
	}



b, .bold { font-weight:bold; }
i, .italic { font-style:italic; }
sup, .exposant{ vertical-align: super; font-size: .7em; line-height:1;}


/*liens	*/

a { 
	color:#2a7483;  
	outline: none; 
	}

a:hover { 
	color:#92306e; 
	}

.container-autresarticles{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	}

a.autresarticles {
	display:block;
	text-decoration:none;
	color:unset;
	}

a.autresarticles span{ 
	line-height:1.2em;
	display:block 
	}

a.autresarticles span:hover{
	color:#92306e;
	}


/*chevron à droite entre les liens pour remonter d'un niveau*/

.liencd::after{
	font-family:Asap;
	content:"\2002\2000";
	text-decoration:none;
	font-size:0.9em;
	font-weight:bold;
	}


.bouton-dico {
	width: 14.5%;
	border: 1px solid gray;
	font-weight: bold;
	text-align: center;
	background: #fff;
	text-decoration: none;
	margin:-1px -1px 0 0;
	display: inline-block;
	padding:4px 8px;
	}

/*boutons pour changer de série de page et pour change de mise en page*/

.boutonserie{
	font:normal 1.1em 'Ubuntu Condensed SemiBold', arial, sans-serif;
	text-align: center;
	border: 1px solid #999;
	display: block;
	margin: 0 0 5px -1px;
	text-decoration: none;
	padding: 4px 8px;
	transition: 0.2s ease;
	}


.boutonserie:hover{
	background-color: #b0d281;
	color: #333;
	}

.alg{ float: left; }
.ald{ float: right; }

.liste-grille, .liste-liste{
	height:31px;
	width:31px;
	background:url(../interface/liste-grille.png) center no-repeat;
	cursor:pointer;
	margin-left:14px;
	}

.liste-liste{ background-image:url(../interface/liste-liste.png); }

.liste-grille:hover{ background-image:url(../interface/liste-grille-hover.png); }

.liste-liste:hover{ background-image:url(../interface/liste-liste-hover.png); }
	
.choixserie{ background: #d5e284; color: #526597; }	


/*bannière*/

#banner { 
	position:relative;
	width: 100%; 
	text-align: center; 
	background-image:url(../interface/head5.jpg); 
	background-size:cover; 
	background-position: top; 
	height:230px;
	z-index:2;
	}

#image-menu { 
	display: none;
	}

	
#image-banner { 
	display: inline-block; 
	text-align: left; 
	width: 1240px; 
	max-width: 100%; 
	background-image:url(../interface/headlogo2.png);
	background-repeat:no-repeat; 
	background-position:30px 0; height:230px; 
	}
			
#scille { 
	float:right; 
	background-image:url(../interface/scille.png); 
	height:230px; 
	width: 267px; 
	}			

#papillon { 
	float:right; 
	background-image:url(../interface/os-et-papillon.png); 
	background-size:cover;
	height:190px; 
	width: 240px; 
	margin-right: 15px;
	}

/*menus*/

.container-menu { 
	width: 100%; 
	background:rgba(0, 0, 0, 0.3); 
	text-align: center; 
	height:41px; 
	position: absolute; 
	top: 190px; left : 0;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.5), 0 2px 3px 0px rgba(0,0,0,0.4); 
	border-bottom: 1px solid #000;
	transition:background-color 0.6s ease;
	z-index:3;
	}

.cm-reduit { 
	background:#1b2933; 
	position:fixed; 
	top: 0; 
	left: 0; 
	}

.cmenu { 
	display: inline-block; 
	text-align: left; 
	width: 1240px; 
	max-width: 100%; 
	height:41px; 
	white-space:nowrap; 
	position:relative;
	}

.menu{ 
	display: inline-block; 
	text-align: left; 
	width: 100%;  
	padding-left: 20px; 
	height:41px; 
	white-space:nowrap; 
	}

.menu a:first-letter { color: #96c902; }

.ttmenu{ 
	display: inline-block; 
	height: 37px; 
 	margin-top: 4px;
 	cursor: pointer;
 	position:relative;
 	}

.ttmenu a {
	display:inline-block;
	height: 37px; 
 	color: #fff; 
	font-family: Ubuntu Condensed SemiBold, arial, sans-serif; 
	font-size: 1.3em; 
	line-height: 37px;
	padding: 0 10px 0 10px;
	text-decoration: none;
	}

.ttmenu > a:hover{
	border-bottom: 4px solid #9ece20;
	}

.dd {
	position: absolute;
	top: 37px;
	left: 0;
	background: #37444d;
	opacity: 0;
	display: none;
	visibility: visible;
	padding:10px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	z-index:1;
	}

.ttmenu:hover > .dd, .dd:hover {
	visibility: visible;
	opacity: 1;
	display: block;
	}

.ttmenu a.ssmenu {
	height:unset;
	line-height:unset;
	cursor: pointer;
	display: block;
	padding: 10px 16px;
	border-radius: 9px;
	}

.ttmenu a.ssmenu:hover{ background: #1a2228; }

/*champ de recherche*/

.ttcherche { 
	width:160px; 
	height:41px; 
	position:absolute; 
	top:0; 
	right:0px; 
	}

.champ_cherche{ 
	display:inline-block;
	float:right; 
	width:115px; 
	overflow:hidden; 
	height:29px; 
	border-radius:20px; 
	background:rgba(0,0,0,0.3); 
	margin-top:7px; 
	border:1px solid rgba(255,255,255,0.3); 
	font-size:1.1em; 
	color:#ddd;  
	line-height: 29px;  
	padding:0 10px 0 10px;
	transition:0.5s ease; 
	outline: none;
	}

.champ_cherche:hover{ border:1px solid rgba(255,255,255,0.6);  }
.champ_cherche:first-letter { color:unset; }

.bouton_cherche { 
	float:right; 
	width:41px; 
	height:41px; 
	line-height: 41px; 
	color:#fff; 
	text-decoration:none;  
	cursor:pointer; 
	outline: none; 
	border: none; 
	background:url(../interface/loupe.png) center no-repeat; 
	background-size:50%;
	}

.bouton_cherche:hover { 
	color:#fff; 
	outline: none; 
	}

/* panneau latéral */

#pannel{
	text-align: left; 
	white-space:nowrap;
	display:none;
	}

#pannel a:first-letter { color: #96c902; }

.ttpanneau {
	width:100%;
	background-color:#2c363e;
	background: linear-gradient(to right, #2c363e 0%,#2c363e 98%,#1e242b 100%);
	border-bottom:1px solid #21282e;
	border-top:1px solid #414e56;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	}

.ttpanneau a {
	display:block;
	height:50px;
	line-height: 50px; 
 	color: #fff; 
	font-family: Ubuntu Condensed SemiBold, arial, sans-serif; 
	font-size: 1.3em; 
	padding: 0 10px 0 10px;
	text-decoration: none;
	cursor:pointer;
	}

.ttpanneau a:hover{
	border-bottom: 4px solid #9ece20;
	}

.ttpanneau .accordeon a{
	margin:0 15px 0 15px;
	}
.ttpanneau .accordeon a:last-child{
	margin:0 15px 15px 15px;
	}

.ttpanneau .accordeon a:hover{
	border:none;
	background:#1a2228;
	border-radius:8px;
	}


/*breaks*/

hr { 
	border-bottom:1px solid #bbb;
	height:7px;
	margin:0.5em 0 0.8em 0;
	width:100%;
	display:block;
	clear:both; 
	color: rgba(0,0,0,0);
	}

hr.break {
	border:none;
	height:10px;
	background:none;
	}


/*container pour les colonnes*/

.row {
	display: flex;
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-justify-content:center;
	justify-content:center;
	padding-top:2em;
	padding-bottom:1em;
	}

.row > * { 
	box-sizing: border-box; 
	line-height:1.4em;
	}


.row > .col-1-large, .row > .col-2-large, .row > .col-3-large, .row > .col-4-large, .row > .col-5-large,
	.row > .col-6-large, .row > .col-7-large, .row > .col-8-large, .row > .col-9-large, .row > .col-10-large,
	.row > .col-11-large, .row > .col-12-large  { 
		margin:0 1.1em 1.5em 1.1em; padding-bottom:0; 
		}


.row > .col-1-large { width: calc(23% - 2.2em); }
.row > .col-2-large { width: calc(25% - 2.2em); }
.row > .col-3-large {width: calc(30% - 2.2em); }
.row > .col-4-large {width: calc(33.33333% - 2.2em); }
.row > .col-5-large {width: calc(41.66667% - 2.2em); }
.row > .col-56-large {width: calc(45% - 2.2em); }
.row > .col-6-large {width: calc(50% - 2.2em); }
.row > .col-7-large {width: calc(58.33333% - 2.2em); }
.row > .col-8-large {width: calc(66.66667% - 2.2em); }
.row > .col-9-large {width: calc(75% - 2.2em);}
.row > .col-10-large {width: calc(77% - 2.2em); }
.row > .col-11-large {width: calc(91.66667% - 2.2em); }
.row > .col-12-large {width: calc(100% - 2.2em); }

.row > .box {
	background-color:white; 
	border-radius:5px; 
	padding:0.8em 1.2em ;  
	margin:1.1em 1.1em 1.1em 1.1em; 
	box-shadow:0 0 6px 0 rgba(120,120,120,0.65); 
	}




/*classes pour les images*/

.row img { width:100%; height:auto;  margin: 3px auto 1em auto; display:block; }

.row .round { border-radius:4px; }
/*.row .drop { box-shadow:1px 2px 5px -1px #000; }*/
.row .drop { filter: drop-shadow(1.6px 2.2px 3.2px rgba(0,0,0,0.36)) drop-shadow(1px 1px 1px rgba(0,0,0,0.52)); }
.row .frame { padding: 6px; background-color: #fff; box-shadow: 0 0 6px #999;  }
.row .grise { filter: drop-shadow(0 0 4px rgba(0,0,0,0.3)) drop-shadow(0 0 1px rgba(0,0,0,0.3));  }
.row .timbre { padding: 4px; background-color: #fff; box-shadow: 0 0 6px #888; border: 3px dashed #88888877  }
.row .bordure { border: 1px solid #444;  }
.row .pict { border-radius: 30px; }

.row .photoleft {  float: left; margin: 3px 26px 1em 0; }
.row .photoright {  float: right; margin: 3px 0 1em 26px; }
.row .photocenter { 
	margin-left: auto !important;
	margin-right: auto !important;
	}
.row .break {  
	display: block; 
	width:100%;
	margin-left: 0;
	margin-right: auto !important;
	}
.row .bright {  
	display: block; 
	width:100%;
	margin-right: 0;
	margin-left: auto !important;
	}

.row img.is_galerie { cursor:pointer; }


.row .imageconnex { margin:2em 0 0.7em 0; }
.row .app {  }
.row img.imageapp{ border-radius:12%}


.galerie {
	min-height:150px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;	
	flex-wrap: wrap;	
	margin:4px -4px 4px -4px;
	padding:1px;
	}


.galerie::after {
	content:"";
	-webkit-flex-grow: 30;
	flex-grow: 10;
	}

.img-holder {
	-webkit-flex-grow:1;
	flex-grow:1;
	margin: 4px;
	overflow: hidden;
	border-radius:4px;
	display:block;
	} 
	

.galerie .imagegalerie {
	display: block;
	position:relative;
	-webkit-flex-grow:1;
	flex-grow:1;
  	margin: 1px 1px 2px 2px;
  	/*border-radius:4px;*/
	width:auto;
	height: 250px;
	object-fit: cover;
 	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	cursor:pointer;
	max-width:100%;
	background-size: cover;
 	}

.galerie .imagegalerie:first-child {
	margin-top: 1px;
	}



.galerie .image-b{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height:250px;
	/*margin:14px;*/
	/*box-shadow:1px 2px 5px #555;*/
	}

/*images rondes ou carrées*/

.square-box{
	position: relative;
	width: 100%;
	/*overflow: hidden;*/
	background: none;
	margin:0.3em auto 1em auto;
	user-select:none;
	z-index:5;
	}
.square-box:before{
	content: "";
	display: block;
	padding-top: 100%;
	}
.square-content{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	padding:1px;
	}	

.square-content img {
	margin: 0px;
	padding: 0px; 
	border-radius: 600px; 
	-moz-outline-radius: 600px;
	height: 100%; 
	width:100%;
	object-fit: cover;
	}







/*styles pour les résumés*/

.row img.imageresume{
	width:200px;
	height:160px;
	margin-top:13px;
	margin-bottom:2.5em;
	object-fit:cover;
	transition: 0.2s ease;
	}

.row img.imageresume.imageresumeapp{
	height:unset;
	border-radius:12%;
	}

.container-resumes{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	}

.container-resumes-dico .container-autresarticles .autresarticles{
	width:30%;
	}

.liste-resume { clear:both; }

.resume{ width:30%; }

.marge-resume { margin-right:34.5%; } /*avant dernière colonne d'un ensemble de résumés*/

.fleche-resume { text-decoration:none; }

.titre-resume {
	margin: 0 0 1em 0;
	padding-left:230px;
	}

.lien-resume{
	display:block;
	padding:7px 0 3px 0;
	font:normal 1.2em 'Ubuntu Condensed SemiBold';
	text-decoration:none;
	line-height:1.3em;
	}

.sous-titre-resume {
	display:block;
	line-height: 1.4em;
	font-family: Asap;
	font-size: 1em;
	padding-bottom: 1em;
	}

.row .resume img {
	width:100%;
	margin-bottom: 1.2em;
	}

.row .resume div {
	width: 100%;
	}

.row .resume .sous-titre-resume {
	padding-top: 0.5em;
	}

.row .resume .lien-resume::before { content:""; }

.titre-connexe{ color:#666; }

.container-resumes-dico .titre-connexe{ color:#526597; }






/*classes pour certains paragraphes*/

/* blocs images */
.row .h6 {
	padding:0;
	width:100%;
	height:56px;
	background-image:url(../interface/fond_bloc.jpg) ;
	background-size: cover;
	background-position:center;
	position:relative;
	overflow:hidden;
	line-height:1em;
	margin-top:3px;
	margin-bottom:12px;
	color:white; 
	font-size:24px;
	line-height:1em;
	padding:15px;
	}

.row .h6.bloc-left { float: left; margin-left: 0px; margin-right: 0px; }
.row .h6.bloc-bleft { margin-left: 0px; margin-right: auto; clear: both;}
.row .h6.bloc-center { margin-left: auto; margin-right: auto; clear: both; }
.row .h6.bloc-bright { margin-left: auto; margin-right: 0; clear: both; }
.row .h6.bloc-right { float: right; margin-left: 0px; margin-right: 0px; }



/* accordéons */
	
.row .accordeon {
	display:block;
	padding:20px;
	background:#eee;
	border-radius:10px;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:1em auto 1em 0;
	}

.accord-contenu{
	display:block;
	margin:0;
	padding:0;
	transition:0.3s ease;
	overflow: hidden; 
	max-height: 0px;
	}

.accord-contenu::before {
	content: "\2002";
	display:block;
	width:100%;height:10px;
	}
	
.accord-title{
	margin:0;
	padding:0;
	font-size: 24px;
	display:block;
	cursor: pointer;
	}

.dico-h2:hover{
	color:#78ba23;
	}	
	
.act-ferme::before {
	content: "\2000\2002";
	font-family: Asap;
	}

.act-ouvert::before {
	content: "\2004\2002";
	font-family: Asap;
	}





/* boutons verts arrondis et blancs pour les formulaires */

.button {
	--hover-bgcolor: #61785d;
	--bgcolor: #8fc148;
	--hover-color:white;
	--color:white;
	transition:170ms ease;
	background-color: #8fc148;
	background-color:var(--bgcolor);
	border-radius:10px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	color:var(--color);
	font-size:21px;
	line-height:1.2em;
	padding:15px 15px 14px 20px; 
	margin:10px 0 0 0;
	text-decoration:none;
	font-family:Asap, sans-serif; 
	text-align:center;
	border:0;
	}

.button::after{
	font-family:Asap;
	content:"\2002\2003";
	}

form .button{
	--bgcolor: #e4e4e4;
	--color:#444;
	--hover-bgcolor: #777;
	--hover-color:#FFF;
	background-color:#e4e4e4; 
	background-color:var(--bgcolor);
	color:#444; 
	color:var(--color);
	padding:12px 15px 10px 20px; 
	}

.button:hover, .survol, form .button.survol {
	background-color: #61785d;
	background-color: var(--hover-bgcolor);
	color:#ffffff;
	color:var(--hover-color);
	}





/* types de colonnes et de blocs particuliers */



/* ***********************************************************************************************************************
FICHE : colonne avec bordure 1px, padding de 17px autour du texte, mais les images vont au bord du cadre et ne peuvent pas
être redimensionnées. Tout le reste est normal, y compris les cadres flottants. Les boutons sont gris-clair.
*********************************************************************************************************************** */
.row > .fiche { background:#fff; padding:0; outline:1px solid #bbb; margin:1em; }
.fiche > .conteneur { padding:17px; display:block;margin:0; }
.fiche .conteneur > img {  margin:10px -17px 15px -17px  !important;  width: calc(100% + 34px) !important; }
.fiche .conteneur > img:first-child {  margin:-17px -17px 15px -17px  !important;  }

.row > .fiche a.button{
	--color: #555;
	--bgcolor: #eee;
	--hover-color: #fff;
	--hover-bgcolor: #777;
	display:inline-block;
	background:var(--bgcolor);
	color:var(--color); 
	text-decoration:none; 
	padding:10px 15px 8px 15px; 
	border-radius:8px; 
	margin-top:10px; 
	margin-bottom:10px; 
	box-shadow:unset; 
	text-shadow:unset; 
	border:unset; 
	line-height:unset;
	font-family:AvantGarde-book;
	}

.row > .fiche a.button:hover{ 
	background-color:#777; 
	color:white; 
	background:var(--hover-bgcolor);
	color:var(--hover-color); 
	}


/* *************************************************************************************************************
CADRE : bloc flottant qui peut être redimensionné, avec diverses bordures, les images vont au bord du cadre et ne 
peuvent pas être redimensionnées. Le cadre peut avoir une image en haut ("fiche") ou sur le côté ("bandeau"). 
On peut coller un lien sur tout le cadre. Dans ce cas le texte devient bleu lagon, et tout span en gras devient orange.
************************************************************************************************************** */
.row .cadre { 
	padding: 10px;
	font-size:0.9em;
	line-height: 1.2em;
	border-radius: 4px;
	text-align:left;
	display:block;
	position:relative;
	float: left;
	margin: 3px 25px 15px 0;
	width:100%;
	}
	
.cadre img {
	width:calc(100% + 20px);
	min-width:calc(100% + 20px);
	margin:-10px -10px 10px -10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}

.cadre.photoleft { margin: 3px 25px 15px 0; float: left}
.cadre.photoright { margin: 3px 0 15px 25px; float: right}
.cadre.photocenter { margin : 3px auto 15px auto; float: none; }

.cadre img.photoleft, .cadre img.photoright, .cadre img.photocenter, .cadre img.break, .cadre img.bright {
	float: none; margin:-10px -10px 10px -10px; padding: 0; box-shadow: unset; 
	}

.cadre.simple { font-size:0.88889em; line-height: 1.2em; border: none; }
.cadre.bordure { font-size:0.88889em; line-height: 1.2em; border: 1px solid #ccc; }
.cadre.ombre { 
	background: #fff;
	font-size:0.88889em; 
	line-height: 1.2em; 
	border: none; 
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.4); 
	/*filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)); */
	}
.cadre.encadre { 
	font-size:0.9444em; 
	line-height: 1.3em; 
	padding: 18px; 
	box-shadow: 0 0 6px 0 rgba(120,120,120,0.65); 
	/*filter: drop-shadow(0 0 3.5px rgba(0,0,0,0.45)); */
	background: #eee; 
	border: none;
	}

.cadre.encadre img { 
	min-width:unset; 
	margin:0 0 14px 0;  
	width: 100%; 
	border-radius: 0px;
	}

.cadre.bandeau { min-width: 380px; padding:14px;  padding-left:220px; line-height: 1.3em;  }
.row a.cadre { font-size:1em; cursor: pointer;  text-decoration: none; font-family: Asap Condensed; color : #2e8392}
a.cadre:hover { color: #cd5317; }
a.cadre::after { font-family:Asap; content:"\2002\2003"; }
a.cadre span { display:block; margin-bottom:8px; color:#d05824; }


.cadre.bandeau img {
	width: 210px; 
	min-width:210px; 
	max-width:210px; 
	height: 100%;
	position: absolute; top: 0; left: 0;
	object-fit:cover;  
	margin:0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 5px;
	}

/* IFRAMES */

.containeriframe {
	width:100%;
	height:180px;
	margin:1em auto;
	/*clear:both;*/
	position:relative;
	overflow:hidden;
	/*box-shadow:0 1px 5px -1px rgba(0,0,0,0.9);*/
	border-radius:5px;
	}

.containeriframe.frame {
	box-shadow:0 1px 5px -1px rgba(0,0,0,0.9);
	padding: 0;
	}

.containeriframe.bloc-left {  float:left; margin: 3px 25px 15px 0; }
.containeriframe.bloc-bleft { margin: 3px auto 15px 0;  clear:both;}
.containeriframe.bloc-center { margin: 3px auto 15px auto; }
.containeriframe.bloc-bright { margin: 3px 0 15px auto; clear:both;}
.containeriframe.bloc-right { float: right; margin: 3px 0 15px 25px; }

	
iframe { 
	border: none;
	position:absolute;
	width:100.1%;
	height:100%;
	border-radius:4px;
	overflow:hidden;
	margin:0; 
	}

.ifr { display:none; }
	

/* FORMULAIRE */

.cahier, .cahierform {
	margin:1em 0 1em 0;
	padding:10px 0 20px 20px;
	border-radius: 8px;
	background-color:rgb(151,164,140);
	color:#555;
	min-height:50px;
	position:relative;
	display:block;
	clear:both;
	}
	
.cahiertexte {
	-webkit-appearance: none;
	background-color:#fff;
	line-height:50px;
	height:50px;
	width: calc(100% - 20px);
	border:none;
	border-radius:4px;
	padding-left:14px;
	margin: 10px 20px 10px 0px;
	color:inherit;
	}

.cahiertexte.cahiererreur { box-shadow:0 0 2px 2px #c22e73 }

textarea.cahiertexte {
	height:170px;
	resize: none;
	}

.cahieraction {
	display:none;
	}

.cahierlabel {
	margin:0;
	margin-right:20px;
	padding:0;
	display:block;
	color:#fff;
	line-height:1.2em;
	width:calc(100% - 20px);
	}

#cahierlog{
	display: inline-block;
	font-family:Asap, sans-serif;
	margin-top:20px;
	margin-left:15px;
	font-size:18px;
	}


/* PLAN DU SITE */

.titre-plan{ 
	display:inline-block; 
	color:#000000; 
	font-family: Ubuntu Condensed, Tahoma, sans-serif;  
	text-decoration:none; 
	font-size:1.9em; 
	line-height:normal; 
	margin-top:0px; 
	padding:0px; 
	font-weight:normal; 
	background-color:#FFFFFF; 
	text-align:left;
	}

.rubrique-plan{ 
	display:inline-block; 
	margin-bottom:15px; 
	color:#526597; 
	font-family: Ubuntu Condensed SemiBold,sans-serif;
	font-size:1.4em; 
	line-height:1.2em; 
	font-weight:normal; 
	display:inline-block; 
	margin:1em 0 0em 10px; 
	text-decoration:none; 
	vertical-align:-5%
	}
	
.sous-rubrique-plan {
	display:inline-block; 
	margin-top:5px; 
	margin-bottom:5px; 
	color:#526597; 
	font-family: Ubuntu Condensed SemiBold, Tahoma, sans-serif; 
	font-size:1.2em;
	}
	
/* TABLEAUX */
.rtable {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border: 1px solid #999;
	box-shadow: none;
	overflow: hidden;
	background: white;
	}

.table-table {
	display:block;
	width: 100%;
	border: 1px solid #999;
	box-shadow: none;
	overflow: hidden;
	background: white;
	}

.table-row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	}

.table-cell {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	text-align: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	border-right: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	line-height: 1.4em;
	margin:  0 -1px -1px 0;
	padding: 12px;
	}

.coins-arrondis { border-radius: 6px; }
.shadow { box-shadow: 0 0 6px #aaa; border: none; }

.row img.icone-table{ width: 168px; height:100%; object-fit: cover; margin:0 auto; border-top:1px solid white; }
.row img.icone-table-firstchild { border:none; }

.cell-commons { width: 45%; font-family: AvantGarde-book; font-size: 24px; color: rgb(255, 255, 255); }



/* ********************* MAX 980 tablettes *************************** */
@media screen and (max-width: 980px) {

html, body { overflow-x: hidden; }


.deplace{
	-moz-transform: translateX(240px);
	-webkit-transform: translateX(240px);
	-ms-transform: translateX(240px);
	transform: translateX(240px);
	}



#main { 
	-webkit-transition: all 400ms ease;
	transition: transform 400ms ease;
	}

#pannel{
	display:block;
	height:150vh;
	width:240px;
	position:absolute;
	top:0px;
	left:-240px;
	padding-top:230px;
	background-color:#37444d;
	overflow-y:none;
	color:#fff;
	-webkit-transition: all 400ms ease;
	transition: transform 400ms ease;
	}

.hamburger{
	height:41px;
	width:60px;
	position:absolute; 
	top:0; left:0;
	outline: 0;
	cursor:pointer;
	-webkit-tap-highlight-color: transparent;
	background-image: url(../interface/hamb.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:left;
	}

.row > .col-1-medium 		{ width: calc(23% - 2.2em); }
.row > .col-2-medium 		{ width: calc(25% - 2.2em); }
.row > .col-3-medium 		{ width: calc(30% - 2.2em); }
.row > .col-4-medium 		{ width: calc(33.33333% - 2.2em); }
.row > .col-5-medium 		{ width: calc(41.66667% - 2.2em); }
.row > .col-56-medium 	{ width: calc(45% - 2.2em); }
.row > .col-6-medium 		{ width: calc(50% - 2.2em); }
.row > .col-7-medium 		{ width: calc(58.33333% - 2.2em); }
.row > .col-8-medium 		{ width: calc(66.66667% - 2.2em); }
.row > .col-9-medium 		{ width: calc(75% - 2.2em); }
.row > .col-10-medium 	{ width: calc(77% - 2.2em); }
.row > .col-11-medium 	{ width: calc(91.66667% - 2.2em); }
.row > .col-12-medium 	{ width: calc(100% - 2.2em); }

.row div.galerie img { min-width: unset; }

.row > .box { margin:0.8em 1.9% 1.2em 1.9%;}

.resume{ width: 47%; clear:none; }

.marge-resume { margin-right:unset; }

.row .resume .imageresume {
	height: 240px;
	max-height:240px;
	}
	
a.autresarticles {
	width:47%;
	}

.row img.imageconnex{ 
	height:180px; 
	object-fit:cover; 
	}
	
.container-resumes-dico .container-autresarticles .autresarticles{
	width:47%;
	}
	

.row img.imageapp{ 
	width:60%; 
	height:auto; 
	max-height:unset; 
	margin-left:20%; 
	margin-bottom:1.3em; 
	}


.row .resume .imageresume.imageresumeapp{ 
	width:240px; 
	height:auto; 
	margin-left:calc((100% - 240px) / 2); 
	display:block;
	float:none;
	}
	
#dico, .menu { display: none; }

.footer { padding:20px;	}
}





/* ********************* MAX 670 mobile devices *************************** */
@media screen and (max-width: 670px) {

body{ font-size:16px;   }
.row > .col-1-small { width: calc(23% - 2.2em); }
.row > .col-2-small { width: 25%; }
.row > .col-3-small { width: 30%; }
.row > .col-4-small { width: 33.33333%; }
.row > .col-5-small { width: calc(41.66667% - 2.2em); }
.row > .col-56-small { width: calc(45% - 2.2em); }
.row > .col-6-small { width: calc(50% - 2.2em); }
.row > .col-7-small { width: 58.33333%; }
.row > .col-8-small { width: 66.66667%; }
.row > .col-9-small { width: 75%; }
.row > .col-10-small { width: calc(77% - 2.2em); }
.row > .col-11-small { width: calc(91.66667% - 2.2em); }
.row > .col-12-small { width: calc(100% - 2.2em); }

.row > .box { margin:0.8em 1.9% 1.2em 1.9%;}
.row .photoleft, .row .bleft, .row .photocenter, .row .bright, .row .photoright { min-width: 100%; margin-top:1.5em;margin-bottom:1.5em;}

#pannel{
	position: fixed;
	padding-top:61px;
	}
	
h1{ line-height:1.1em; font-size:1.7em; }
h2 { line-height:1.1em; font-size:1.5em; }
.container-resumes{
	display:block;
	}

#banner, .hamburger, .ttcherche{
	height:61px;
	}
.liste-liste, .liste-grille, #papillon, #image-banner{ display:none; }
.container-menu { top:0px; background:#1b2933; position:fixed; height:61px;}	

.champ_cherche { margin-top: 17px; width:90px; }
.bouton_cherche { margin-top: 10px; }
.resume {
	padding-left:unset;
	min-width:100%;
	}

#image-menu { 
	position: absolute;
	top: 2px; left: 55px;
	width: 170px; 
	height:61px;
	background-image:url(../interface/headlogo2.png); 
	background-size:cover; 
	background-position: center;
	display: block;
	}
	
.resume .titre_resume{ min-width: 100%; }

.row img {
	min-width: 86%;
	max-width:86%;
	/*margin:1em auto !important;*/
	padding:0 !important;
	float:none;
	}

.row .cadre img {
	min-width: calc(100% + 20px);
	max-width: calc(100% + 20px);
	margin:-10px -10px 1em -10px !important;
	padding:0 !important;
	float:none;
	}
	
.row .square-box { 
	margin: 0 auto 30px auto !important;
	width: 100%;
	min-width: 80%;
	max-width:450px;
	padding:0 !important;
	float:none;
	}

.row .square-box img {
	min-width: 100%;
	max-width: 100%;
	
	}


.row .cadre { min-width: 100%; padding:10px; line-height: 1.2em; font-size: 0.95em; }

.cadre.bandeau img {
	/*height: auto;*/
	min-width:calc(100% + 20px);
	max-width:calc(100% + 20px);
	
	position: relative;
	object-fit: unset;  
	margin: -10px -10px 10px -10px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 0;
	}
	
.cadre img{ 
	min-width:calc(100% + 20px);
	max-width:calc(100% + 20px);
	}

	
.row .icone {
	max-width:unset;
	min-width:unset;
	padding:0;
	}

.row img.imageresume{
	width:160px;
	max-height:120px;
	margin-bottom:8px;
	}

.row .resume .imageresume { 
	height: unset; 
	max-height:unset; 
	}

.row .resume .imageresume.imageresumeapp{ 
	display:block; 
	float:left; 
	width:160px; 	
	max-height:200px; 
	margin-left:0; 	
	}

	a.autresarticles { 
	width:100%; 
	}

.container-resumes-dico .container-autresarticles .autresarticles{
	width:100%;
	}

.row img.imageconnex{
	width:150px;
	height:120px;
	object-fit:cover;
	min-width:unset;
	float:left;
	margin:0 1.5em 1.5em 0;
	}


.row img.imageapp{ 
	width:150px; 
	height:auto; 
	max-height:unset;
	margin-bottom:1.5em; 
	}


.row .invisible { 
	visibility:hidden; 
	}

.footer { padding:20px; }

.rtable { display: block; }
.table-cell { display: block; min-width: 100%; border-right: none;border-bottom:none;}
.table-row{ display:block; }
.row img.icone-table{ margin:0px auto 20px auto; border-radius: 5px; box-shadow:  1px 2px 5px -1px #000; border:none; }
	
}

	




@media screen and (max-width: 600px) {
	#papillon{ display:none; }
	}

	
/****************************************************************************************/