/* CONVENTIONS D'ÉCRITURE
 *
 * Préfixes :
 *  p-		= page
 *	l- 		= layout
 *	o-		= objet	(ubjet immuable)
 *	c- 		= component
 *	u- 		= utility (objet immuable)
 *	t- 		= themes
 *	sp-		= specific (surclasse d'un tiers, ex : cms, iframe)
 *	is-		= etat
 * 	has-	= conditional
 *	js-		= javascript dependence
 *	dev-	= test development
 *	_		= hacks
 *
 *
 * Nomage :
 *	ComponentName
 *	ComponentName--modifierName
 *	ComponentName-descendantName
 *	ComponentName.is-stateOfComponent
 *
 */


/*! TYPOGRAPHIE */
/*-------------------------------------------------------*/

	html { 
		font-size: 62.5%; 
		font-size: -webkit-calc(0.625em);
		font-size: calc(0.625em);
	}
	
	
	body { 
		font-family: 'dinregular', sans-serif;
		font-size: 1.6em; 
	}
	
	b,
	strong { 
		font-family: 'dinmedium', sans-serif; 
		font-weight: normal;
		font-style: normal;
	}
	
	.c-btn { font-family: 'NewsGothCnBTBold', sans-serif; }
	
	.c-btn,
	.c-content-title,
	.c-content-subtitle { text-transform: uppercase; }

	.c-content-title { font-size: 1.4em; }
	.c-content-subtitle { font-size: 1em; }



/*! LAYOUT */
/*-------------------------------------------------------*/

	html,
	body { height: 100%; }

	body { background-color: #FFF; }

	body.p-home { background-color: transparent; }
	

	.l-container { 
		position: relative; 
		margin: 0 auto;
	}
	
	[id="header"] { 
		position: absolute; top: 0; right: 0; left: 0;  
		height: 50px;
		z-index: 3;
	}
	
	
	.l-content,
	.l-content-media  {
		overflow: hidden;
	}
	
		.l-content-body { 
			float: left; 
			width: 100%;
		}
		
		.l-content-media { width: 100%; }
		
		.js-small-media { display: block; }
		.js-large-media { display: none; }

	
	
@media screen and (min-width: 48.1em) {
	
	html, 
	body { 
		height: auto;
		background-color: transparent; 
	}
	
	.l-container { 
		width: 70%;
		margin-top: 8%;
	}
	.p-home .l-container {
		position: absolute; top: 50%; left: 50%; 
		margin-top: 0;
		-webkit-transition: all 0.3s ease-out;  
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	.p-home .l-container.js-moveLeft { margin-left: -260px; }
	
		[id="header"] { 
			position: relative; top: auto; right: auto; left: auto;
			height: auto;
		}
		
		.l-content-body { 
			width: 36.2%;
			min-width: 345px;
		}
		
		.l-content-media { 
			width: auto;
			padding-left: 5px;
		}
		
		.js-large-media { display: block; }
		.js-small-media { display: none; }

		
}	

@media screen and (min-width: 80em) {
	
	.l-container { 
		width: 60%;
		margin-top: 8%;
	}		
}

/*! COMPOSANTS */
/*-------------------------------------------------------*/

/* 	-- NAVIGATION */

	nav[role=navigation] {
		clear: both;
		-webkit-transition: all 0.3s ease-out;  
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
		overflow: hidden;
		max-height: 0;
		padding-top: 50px;
		z-index: 2;
	}
	nav[role=navigation].is-active {
		max-height: 45em;
	}
/* 		.c-menu { margin-top: 50px;  } */
				
    
@media screen and (min-width: 48.1em) {
    
	#btn_menu { display: none; }
	
	nav[role=navigation] { 
		width: 55%;
		min-width: 525px;
		max-height: none; 
		padding-top: 0;
	}
	.p-home nav[role=navigation] { 
		visibility: hidden; 
		-webkit-transition: all 0.9s ease-out;  
		-moz-transition: all 0.9s ease-out;
		-ms-transition: all 0.9s ease-out;
		-o-transition: all 0.9s ease-out;
		transition: all 0.9s ease-out;
	}
	.p-home nav[role=navigation].js-view { visibility: visible; }
	
		.c-menu {
			display: block;
			float: left;
			width: 33.3333%;
			min-width: 175px;
		}
			
			.c-menu-item { padding: 0 5px 5px 0; }
    
}


/* 	-- LOGO */

	.c-logo { 
		display: block;
		position: absolute; top: 0; left: 0; 
		width: 100%;
		height: 50px;
		font-size: 0;
		background-position: 16px 5px;
		background-repeat: no-repeat;
		background-image: url(../img/logo--sm.png);
	}
	.p-home .c-logo--index {
		top: 50%; left: 50%;
		width: 135px;
		height: 240px;
		margin-top: -120px;
		margin-left: -53px;
		background-image: none;
	}


/* 	-- BACKGROUND */	

	.c-bgimage {
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	
	.c-bgimage--inline {
		width: 100%;
		height: 0;
		padding-bottom: 62.5%;
		font-size: 0;
	}
	
	.c-bgimage--fullscreen {
		position: fixed; top: 0; right: 0; bottom: 0; left: 0; 
		height: auto;
		padding: 0;
		z-index: -1;
		display: none;
	}
	.p-home .c-bgimage--fullscreen { display: block; }
	
	.p-home					.c-bgimage { background-image: url(../img/bg/bg-accueil-reseau-imagerie-parisien-montrouge.jpg); }
	.p-radiologie-numerisee	.c-bgimage { background-image: url(../img/bg/bg-radilogie-numerisee-reseau-imagerie-parisien-montrouge.jpg); }
	.p-radiologie-dentaire 	.c-bgimage { background-image: url(../img/bg/bg-radiologie-dentaire-reseau-imagerie-parisien-montrouge.jpg); }
	.p-echographie-doppler 	.c-bgimage { background-image: url(../img/bg/bg-echographie-doppler-reseau-imagerie-parisien-montrouge.jpg); }
	.p-mammographies 		.c-bgimage { background-image: url(../img/bg/bg-mammographies-reseau-imagerie-parisien-montrouge.jpg); }
	.p-infiltrations 		.c-bgimage { background-image: url(../img/bg/bg-infiltrations-reseau-imagerie-parisien-montrouge.jpg); }
	.p-scanner-irm 			.c-bgimage { background-image: url(../img/bg/bg-scanner-irm-reseau-imagerie-parisien-montrouge.jpg); }
	.p-specialites 			.c-bgimage { background-image: url(../img/bg/bg-specialites-reseau-imagerie-parisien-montrouge.jpg); }
	.p-equipe-medicale 		.c-bgimage { background-image: url(../img/bg/bg-equipe-medicale-reseau-imagerie-parisien-montrouge.jpg); }
	.p-contact 				.c-bgimage { background-image: url(../img/bg/bg-acces-contact-reseau-imagerie-parisien-montrouge.jpg); }
	
	
/* 	-- ARTICLE */

	.c-content {
		padding: 1em 1em 1.4em;
		background-color: #FFF;
		margin-bottom: 2em;
	}
	

/* 	-- MAP */

	.c-map { padding-bottom: 426px; }
	
	

/* 	-- RWD */
	
@media screen and (min-width: 48.1em) {
	
	.c-logo { 
		left: -100px; 
		width: 90px;
		height: 90px;
		background-position: left top;
		background-image: url(../img/logo--md.png);
	}
	.p-home .c-logo { 
		height: 160px;
		margin-top: -68px;
		background-image: url(../img/logo--lg.png);
	}
	.p-home .c-logo--index { display: none; }
	
	.c-bgimage--inline { display: none; }
	.c-bgimage--fullscreen { display: block; }
	
}	
	
	
/* CAROUSSEL */

	.swiper-container {
        width: 100%;
        max-width: 420px;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
/*
        width: 100%;
        height: 0;
        padding-bottom: 119.047619%;
*/

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    


	
/*! ÉLÉMENTS */
/*-------------------------------------------------------*/


/* BOUTONS */

	.c-btn--menu-item:hover {
		background-color: #CCC;
		color: #FFF;
	}

	.c-btn--menu,
	.c-btn--menu-item { 
		display: block;
		height: 50px;
		line-height: 50px;
		background-color: #FFF; 
	}
	.c-btn--menu { 
		position: absolute; top: 0; right: 0;
		width: 50px;
		padding: 0;
		font-size: 2.4rem;
		text-align: center;
	}
	
		.c-btn--menu .fa-bars {
			-webkit-transition: all 0.3s ease-out;  
			-moz-transition: all 0.3s ease-out;
			-ms-transition: all 0.3s ease-out;
			-o-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}
		
		.c-btn--menu.is-active .fa-bars {
			-webkit-transform: rotate(90deg); 
			-moz-transform: rotate(90deg); 
			-o-transform: rotate(90deg);
			-ms-transform: rotate(90deg); 	
		}
		
	.c-btn--menu-item { 
		padding-left: 1em; 
		text-align: left; 
	}
	
	.c-btn--big { 
		float: left;
		min-width: 345px; 
		width: 65.8%;
	}

		
@media screen and (min-width: 48.1em) {		
	
		.c-btn--menu-item { 
			height: 2.2rem; 
			line-height: 2.6rem;
			padding-left: 5px; 
		}
		
    	.c-btn--stop {
	    	color: #FFF;
	    	background-color: #F19300;
    	}
    	.c-btn--start { 
	    	color: #F19300;
	    	background-color: #FFF;
	    }
}

/* COLLAPSE */

	.c-collapse,
	.c-collapse-toggle-icon {
		-webkit-transition: all 0.3s ease-out;  
		-moz-transition: all 0.3s ease-out;
		-ms-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	
	.c-collapse {
		overflow: hidden;
		max-height: 0;
	}
	.c-collapse.is-active { max-height: none; }
	
		.c-collapse-toggle { 
			cursor: pointer; 
			border-bottom: 1px solid #F19300;
			margin-top: 1em;
		}
		.c-collapse-toggle a { text-decoration: none; }
		.c-collapse-toggle-icon { float: right; }
		
		.is-active .c-collapse-toggle-icon { 
			-webkit-transform: rotate(90deg); 
			-moz-transform: rotate(90deg); 
			-o-transform: rotate(90deg);
			-ms-transform: rotate(90deg); 	
		}

		
/* CONTENU */

	h2 { 
		margin-top: 1.4em;
		margin-bottom: 0; 
	}
	.c-content h2:first-of-type { margin-top: .4em; }
	
	h2:before { 
		content: '•• ';
		font-size: .5em;
		
	}
	p { 
		position: relative; 
		padding: 0 .5em; 
		margin: .25em;
	}
	
	p:before {
		position: absolute; 
		content: '¬ ';
		left: -4px;
	}
	
@media screen and (min-width: 48.1em) {
	
	h1 { display: none; }
}	


/*! COULEURS */
/*-------------------------------------------------------*/	

	html,
	button,
	input,
	select,
	textarea   { color: #222; }
	
@media screen and (max-width: 48em) {
	
	[id="header"] { background-color: #F19300; }
}
	.c-content-title,
	.c-content-subtitle,
	a,
	a:hover {
		color: #F19300;
	}
	
	.c-btn--big,
	.c-btn--menu-item:hover,
	.c-btn--menu-item.is-active {
		background-color: #F19300; 
		color: white;
	}

	.c-btn--big:hover {
		background-color: #FFF;
		color: #F19300;
	}


/*! RWD */
/*-------------------------------------------------------*/	

body:before {
  content: 'small';
  display: none; 
}

@media (min-width: 48.1em) {
  body:before {
    content: "large";
  }
}


/* Style adjustments for retina devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
	

}