@charset "utf-8";
/* CSS Document */
/* HHP Grids Layout */

/* ----------------------------------------------- */
/* HHP GRIDS & DESIGN */
/* ----------------------------------------------- */
/* _ Grilles _ */
/* ----------------------------------------------- */
/* __ RESPONSIVE 2cols 75/25 PAGE + COL Dte !!__ */
.col2-75 {margin-top:1.2em;margin-bottom:1em;border-top:8px solid #2a4e98;padding-top:1em;}
	/* Blocs */
		.col2-75 .ui-block-a {width: 100%;float: left;}
		.col2-75 .ui-block-b {width: 100%;float: left;}
	/* Border none on Desk */
		.col2-75 > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col2-75 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-75 .ui-body {min-height: 14em;}
		.col2-75 .ui-block-a {float:left;width:100%;} /* page full width, pas de col */
		.col2-75 .ui-block-b {display:none !important;} /* colonne invisible */
/* 		.col2-75 .ui-block-b {float:left;width:100%;} */
		.col2-75 .ui-block-b p {font-size: .9em;}
		.col2-75 > div + div .ui-body {border-top-width: 1px;}
		.col2-75 > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-75 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float A 75%,Float B 25% */
	@media all and (min-width: 60em) {
		.col2-75 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-75 .ui-body {min-height: 14em;}
		.col2-75 .ui-block-a {float: left;width: 74.875%;}
		.col2-75 .ui-block-b {display:block !important;float: left;width: 24.925%;}
		.col2-75 .ui-block-b p {font-size: 1.1em;}
		.col2-75 > div + div .ui-body {border-top-width: 1px;}
		.col2-75 > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-75 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 2 - Wide screen - Float B, leave A full width on top */
	@media all and (min-width: 100em) {
		.col2-75 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-75 .ui-body {min-height: 14em;}
		.col2-75 .ui-block-a {float: left;width: 74.875%;}
		.col2-75 .ui-block-b {display:block !important;float: left;width: 24.925%;}
		.col2-75 .ui-block-b p {font-size: 1.1em;}
		.col2-75 > div + div .ui-body {border-top-width: 1px;}
		.col2-75 > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-75 > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID 75/25 //// */

/* __ RESPONSIVE 2cols 75/25 Spécial Main PAGE Content __ */
.col2-main {}
	/* Blocs */
		.col2-main .ui-block-a {width: 100%;float: left;}
		.col2-main .ui-block-b {width: 100%;float: left;}
	/* Border none on Desk */
		.col2-main > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col2-main {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-main .ui-body {min-height: 14em;}
		.col2-main .ui-block-a,
		.col2-main .ui-block-b {display:block !important;float:left;width:100%;} /* page full width, pas de col */
		.col2-main .ui-block-b p {font-size: .9em;}
		.col2-main > div + div .ui-body {border-top-width: 1px;}
		.col2-main > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-main > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float A 75%,Float B 25% */
	@media all and (min-width: 30em) {
		.col2-main {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-main .ui-body {min-height: 14em;}
		.col2-main .ui-block-a {float: left;width: 74.875%;}
		.col2-main .ui-block-b {display:block !important;float: left;width: 24.925%;}
		.col2-main .ui-block-b p {font-size: .8em;}
		.col2-main > div + div .ui-body {border-top-width: 1px;}
		.col2-main > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-main > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 2 - Wide screen - Float B, leave A full width on top */
	@media all and (min-width: 100em) {
		.col2-main {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-main .ui-body {min-height: 14em;}
		.col2-main .ui-block-a {float: left;width: 74.875%;}
		.col2-main .ui-block-b {display:block !important;float: left;width: 24.925%;}
		.col2-main .ui-block-b p {font-size: .8em;}
		.col2-main > div + div .ui-body {border-top-width: 1px;}
		.col2-main > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-main > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID Main PAGE Content 75/25 //// */

/* __ RESPONSIVE 2cols 25/75 Spécial Main BLOC ENTITY __ */
.col2-entity {}
	/* Blocs */
		.col2-entity .ui-block-a {width: 100%;float: left;}
		.col2-entity .ui-block-b {width: 100%;float: left;}
	/* Border none on Desk */
		.col2-entity > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col2-entity {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-entity .ui-body {min-height: 14em;}
		.col2-entity .ui-block-a {display:block !important;float:left;width:100%;} /* page full width, pas de col */
		.col2-entity .ui-block-b {display:block !important;float:left;width:100%;} /* page full width, pas de col */
		.col2-entity .ui-block-b p {font-size: .9em;}
		.col2-entity > div + div .ui-body {border-top-width: 1px;}
		.col2-entity > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-entity > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float A 75%,Float B 25% */
	@media all and (min-width: 30em) {
		.col2-entity {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-entity .ui-body {min-height: 14em;}
		.col2-entity .ui-block-a {float: left;width: 24.925%;margin-top:8%;}
		.col2-entity .ui-block-b {display:block !important;float: left;width: 74.875%;}
		.col2-entity .ui-block-b p {font-size: .8em;}
		.col2-entity > div + div .ui-body {border-top-width: 1px;}
		.col2-entity > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-entity > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 2 - Wide screen - Float B, leave A full width on top */
	@media all and (min-width: 48em) {
		.col2-entity {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-entity .ui-body {min-height: 14em;}
		.col2-entity .ui-block-a {float: left;width: 24.925%;margin-top:2%;}
		.col2-entity .ui-block-b {display:block !important;float: left;width: 74.875%;}
		.col2-entity .ui-block-b p {font-size: .8em;}
		.col2-entity > div + div .ui-body {border-top-width: 1px;}
		.col2-entity > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-entity > div:last-child .ui-body {border-left-width: 0;}	}
	@media all and (min-width: 60em) {
		.col2-entity .ui-block-a {margin-top:1%;} }
		
/* //// FIN RESPONSIVE GRID Main PAGE Content Entity 25/75 //// */

/* __ RESPONSIVE 2cols 50/50 __ */
.col2-50 {}
	/* Blocs */
		.col2-50 .ui-block-a {width: 100%;float: left;}
		.col2-50 .ui-block-b {width: 100%;float: left;}
	/* Border none on Desk */
		.col2-50 > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col2-50 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-50 .ui-body {min-height: 14em;}
		.col2-50 .ui-block-a {float:left;width:100%;} /* page full width, pas de col */
		.col2-50 .ui-block-b {float:left;width:100%;} /* colonne dessous */
		.col2-50 .ui-block-a,
		.col2-50 .ui-block-b p {font-size: .9em;}
		.col2-50 > div + div .ui-body {border-top-width: 1px;}
		.col2-50 > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-50 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float A 100%,Float B 100% */
	@media all and (min-width: 48em) {
		.col2-50 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-50 .ui-body {min-height: 14em;}
		.col2-50 .ui-block-a {float: left;width: 100%;}
		.col2-50 .ui-block-b {float: left;width: 100%;}
		.col2-50 .ui-block-a,
		.col2-50 .ui-block-b p {font-size: .8em;}
		.col2-50 > div + div .ui-body {border-top-width: 1px;}
		.col2-50 > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-50 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 2 - Desktop - Float 50% */
	@media all and (min-width: 70em) {
		.col2-50 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-50 .ui-body {min-height: 14em;}
		.col2-50 .ui-block-a {float: left;width: 49.95%;}
		.col2-50 .ui-block-b {float: left;width: 49.95%;}
		.col2-50 .ui-block-a p,
		.col2-50 .ui-block-b p {font-size: .8em;}
		.col2-50 > div + div .ui-body {border-top-width: 1px;}
		.col2-50 > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-50 > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID 50/50 //// */

/* __ RESPONSIVE 3cols 50/25/25 __ */
.col3-50 {}
	/* Stack all blocks to start */
	.col3-50 .ui-block-a,
	.col3-50 .ui-block-b,
	.col3-50 .ui-block-c {width: 100%;float: none;}
	/* Collapsing borders */
	.col3-50 > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col3-50 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col3-50 .ui-body {min-height: 14em;}
		.col3-50 .ui-block-a {float:left;width:100%;} /* page full width, pas de col */
		.col3-50 .ui-block-b {float: left;width: 100%;} /* full width, glisse dessous */
		.col3-50 .ui-block-c {display:none !important;} /* 3°col Invisible */
/*		.col3-50 .ui-block-c {float: left;width: 100%;} */
		.col3-50 .ui-block-b p,
		.col3-50 .ui-block-c p {font-size: .8em;}
		.col3-50 > div + div .ui-body {border-top-width: 1px;}
		.col3-50 > div:first-child .ui-body {border-bottom-width: 0;}
		.col3-50 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float A 100%,Float B 50%,Float C 50% */
	@media all and (min-width: 60em) {
		.col3-50 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col3-50 .ui-body {min-height: 14em;}
		.col3-50 .ui-block-a {float:left;width:100%;} /* page full width, pas de col */
		.col3-50 .ui-block-b,
		.col3-50 .ui-block-c {float: left;width: 49.95%;} /* glissent dessous côte à côte */
		.col3-50 .ui-block-b p,
		.col3-50 .ui-block-c p {font-size: .8em;}
		.col3-50 > div + div .ui-body {border-top-width: 1px;}
		.col3-50 > div:first-child .ui-body {border-bottom-width: 0;}
		.col3-50 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage/Laptop - Float A 50%,Float B 25%,Float C 25% */
	@media all and (min-width: 70em) {
		.col3-50 .ui-body {min-height: 18em;}
		.col3-50 .ui-block-a {float: left;width: 49.95%;}
		.col3-50 .ui-block-b,
		.col3-50 .ui-block-c {float: left;width: 24.925%;}
		.col3-50 > div:first-child .ui-body {border-bottom-width: 1px;}
		.col3-50 > div + div .ui-body {border-left-width: 0;}
		.col3-50 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 2 - Wide screen */
	@media all and (min-width: 100em) {
		.col3-50 .ui-body {font-size: 125%;}
		.col3-50 .ui-block-a {float: left;width: 49.95%;}
		.col3-50 .ui-block-b,
		.col3-50 .ui-block-c {float: left;width: 24.925%;}
		.col3-50 > div:first-child .ui-body {border-bottom-width: 1px;}
		.col3-50 > div + div .ui-body {border-left-width: 0;}
		.col3-50 > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID 50/25/25 //// */

/* __ RESPONSIVE 2cols 25/75 SPECIAL DISPLAY POST !! __ */
.col2-post {}
	/* Stack all blocks to start */
	.col2-post .ui-block-a,
	.col2-post .ui-block-b {width: 100%;float: none;}
	/* Collapsing borders */
	.col2-post > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col2-post {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-post .ui-body {min-height: 14em;}
		.col2-post .ui-block-a {display:block !important;float:left;width: 24.925%;} /* 25 */
		.col2-post .ui-block-b {display:block !important;float: left;width: 74.875%;} /* 75 */
		.col2-post .ui-block-a p,
		.col2-post .ui-block-b p {font-size: .8em;}
		.col2-post > div + div .ui-body {border-top-width: 1px;}
		.col2-post > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-post > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float 25%,Float B 75% */
	@media all and (min-width: 60em) {
		.col2-post {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col2-post .ui-body {min-height: 14em;}
		.col2-post .ui-block-a {float:left;width: 24.925%;} /* 25 */
		.col2-post .ui-block-b {float: left;width: 74.875%;} /* 75 */
		.col2-post .ui-block-a p,
		.col2-post .ui-block-b p {font-size: .8em;}
		.col2-post > div + div .ui-body {border-top-width: 1px;}
		.col2-post > div:first-child .ui-body {border-bottom-width: 0;}
		.col2-post > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID SPECIAL DISPLAY POST 25/25/50 //// */

/* __ RESPONSIVE 4cols 25/25/25/25 __ */
.col4-25 {}
	/* Stack all blocks to start */
	.col4-25 .ui-block-a,
	.col4-25 .ui-block-b,
	.col4-25 .ui-block-c,
	.col4-25 .ui-block-d {width: 100%;float: none;}
	/* Collapsing borders */
	.col4-25 > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col4-25 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col4-25 .ui-body {min-height: 14em;}
		.col4-25 .ui-block-a,
		.col4-25 .ui-block-b, 
		.col4-25 .ui-block-c,
		.col4-25 .ui-block-d {float: left;width: 100%;} /* full width, glissent dessous */		
		.col4-25 .ui-block-a p,
		.col4-25 .ui-block-b p,
		.col4-25 .ui-block-c p,
		.col4-25 .ui-block-d p {font-size: .8em;}
		.col4-25 > div + div .ui-body {border-top-width: 1px;}
		.col4-25 > div:first-child .ui-body {border-bottom-width: 0;}
		.col4-25 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float 50% */
	@media all and (min-width: 30em) {
		.col4-25 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col4-25 .ui-body {min-height: 14em;}
		.col4-25 .ui-block-a,
		.col4-25 .ui-block-b,
		.col4-25 .ui-block-c,
		.col4-25 .ui-block-d {float: left;width: 49.95%;} /* glissent dessous côte à côte */
		.col4-25 .ui-block-a p,
		.col4-25 .ui-block-b p,
		.col4-25 .ui-block-c p,
		.col4-25 .ui-block-d p {font-size: .8em;}
		.col4-25 > div + div .ui-body {border-top-width: 1px;}
		.col4-25 > div:first-child .ui-body {border-bottom-width: 0;}
		.col4-25 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 2 - Paysage/Laptop - Float 25% */
	@media all and (min-width: 48em) {
		.col4-25 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col4-25 .ui-body {min-height: 14em;}
		.col4-25 .ui-block-a,
		.col4-25 .ui-block-b,
		.col4-25 .ui-block-c,
		.col4-25 .ui-block-d {float: left;width: 24.925%;} /* glissent dessous côte à côte */
		.col4-25 .ui-block-a p,
		.col4-25 .ui-block-b p,
		.col4-25 .ui-block-c p,
		.col4-25 .ui-block-d p {font-size: .8em;}
		.col4-25 > div + div .ui-body {border-top-width: 1px;}
		.col4-25 > div:first-child .ui-body {border-bottom-width: 0;}
		.col4-25 > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID 25/25/25/25 //// */

/* __ RESPONSIVE 4cols 25/25/25/25 SPECIAL MENU NAV !! __ */
.col4-menu {}
	/* Stack all blocks to start */
	.col4-menu .ui-block-a,
	.col4-menu .ui-block-b,
	.col4-menu .ui-block-c,
	.col4-menu .ui-block-d {width: 100%;float: none;}
	/* Collapsing borders */
	.col4-menu > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col4-menu {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col4-menu .ui-body {min-height: 14em;}
		.col4-menu .ui-block-a,
		.col4-menu .ui-block-b, 
		.col4-menu .ui-block-c,
		.col4-menu .ui-block-d {float: left;width: 50%;} /* full width, glissent dessous */		
		.col4-menu .ui-block-a p,
		.col4-menu .ui-block-b p,
		.col4-menu .ui-block-c p,
		.col4-menu .ui-block-d p {font-size: .8em;}
		.col4-menu > div + div .ui-body {border-top-width: 1px;}
		.col4-menu > div:first-child .ui-body {border-bottom-width: 0;}
		.col4-menu > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float 50% */
	@media all and (min-width: 30em) {
		.col4-menu {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col4-menu .ui-body {min-height: 14em;}
		.col4-menu .ui-block-a,
		.col4-menu .ui-block-b,
		.col4-menu .ui-block-c,
		.col4-menu .ui-block-d {float: left;width: 49.95%;} /* glissent dessous côte à côte */
		.col4-menu .ui-block-a p,
		.col4-menu .ui-block-b p,
		.col4-menu .ui-block-c p,
		.col4-menu .ui-block-d p {font-size: .8em;}
		.col4-menu > div + div .ui-body {border-top-width: 1px;}
		.col4-menu > div:first-child .ui-body {border-bottom-width: 0;}
		.col4-menu > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 2 - Paysage/Laptop - Float 25% */
	@media all and (min-width: 48em) {
		.col4-menu {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col4-menu .ui-body {min-height: 14em;}
		.col4-menu .ui-block-a,
		.col4-menu .ui-block-b,
		.col4-menu .ui-block-c,
		.col4-menu .ui-block-d {float: left;width: 24.925%;} /* glissent dessous côte à côte */
		.col4-menu .ui-block-a p,
		.col4-menu .ui-block-b p,
		.col4-menu .ui-block-c p,
		.col4-menu .ui-block-d p {font-size: .8em;}
		.col4-menu > div + div .ui-body {border-top-width: 1px;}
		.col4-menu > div:first-child .ui-body {border-bottom-width: 0;}
		.col4-menu > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID menu 25/25/25/25 //// */

/* __ RESPONSIVE 5cols 20/20/20/20/20 __ */
.col5-20 {}
	/* Stack all blocks to start */
	.col5-20 .ui-block-a,
	.col5-20 .ui-block-b,
	.col5-20 .ui-block-c,
	.col5-20 .ui-block-d,
	.col5-20 .ui-block-e {width: 100%;float: none;}
	/* Collapsing borders */
	.col5-20 > div + div .ui-body {border-top-width: 0;}
	/* BASE MIN - mob & tabl Portrait */
	@media all and (min-width: 20em) {
		.col5-20 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col5-20 .ui-body {min-height: 14em;}
		.col5-20 .ui-block-a,
		.col5-20 .ui-block-b, 
		.col5-20 .ui-block-c,
		.col5-20 .ui-block-d,
		.col5-20 .ui-block-e {float: left;width: 24.925%;} /* côte à côte par 2 */		
		.col5-20 .ui-block-a p,
		.col5-20 .ui-block-b p,
		.col5-20 .ui-block-c p,
		.col5-20 .ui-block-d p,
		.col5-20 .ui-block-e p {font-size: .8em;}
		.col5-20 > div + div .ui-body {border-top-width: 1px;}
		.col5-20 > div:first-child .ui-body {border-bottom-width: 0;}
		.col5-20 > div:last-child .ui-body {border-left-width: 0;}	}
		
	/* RUPT 1 - Paysage - Float 20% */
	@media all and (min-width: 40em) {
		.col5-20 {overflow: hidden; /* Use this or a "clearfix" to give the container height */}
		.col5-20 .ui-body {min-height: 14em;}
		.col5-20 .ui-block-a,
		.col5-20 .ui-block-b,
		.col5-20 .ui-block-c,
		.col5-20 .ui-block-d,
		.col5-20 .ui-block-e {float: left;width: 19.95%;} /* glissent dessous côte à côte */
		.col5-20 .ui-block-a p,
		.col5-20 .ui-block-b p,
		.col5-20 .ui-block-c p,
		.col5-20 .ui-block-d p,
		.col5-20 .ui-block-e p {font-size: .8em;}
		.col5-20 > div + div .ui-body {border-top-width: 1px;}
		.col5-20 > div:first-child .ui-body {border-bottom-width: 0;}
		.col5-20 > div:last-child .ui-body {border-left-width: 0;}	}
		
/* //// FIN RESPONSIVE GRID 20/20/20/20/20 //// */