/* CSS Document */


/*
/////////////////////////
-18 octobre 2016 - Jason Drouin-Bêty
		Réduction de l'entête dans l'accueil et modification de la barre de recherche.
-19 octobre 2016 - Jason Drouin-Bêty
		Mise en place des Sujet intéressants pour le test A/B ET ajustement de quelques CSS pour le mobile

/////////////////////
*/
@media screen and (max-width: 1014px) {
	#conteneur{
		width:auto;
	}
	#page, #page-int{
		width: auto;
		padding:0 20px;
	}
	
	#page-int #menuPrincipal{
		margin-top:20px;
	}
	
	#contenu{
		width:auto;
	}
	
	.sujet{
		margin-left: 1%;
	}
	 
	 .sujet-1{
		margin-left:inherit;
	}
}

@media only screen and (max-width: 1005px) {
	
	.entete img{
		max-width:100%;
		left: 36%;
	}
	
    #colonnePrincipale {
        width: 71%;
    }
    
	#colonneDroite.alt {
		width: 33%;
	}
	
	#colonneGauche {
		width: 64%;
	}
	
	.enVedette{
		width:94.68595%;
	}
	
	.enVedette img {
		max-width:100%;
	}
	
	#menuPrincipal, #page-int #menuPrincipal{
		z-index: 9999;
		
		margin-top: 10px;
		bottom: -4px;
		font-size: 1em;
	}
	
	#menuPrincipal li, #page-int #menuPrincipal li{
		padding-right:0.497512%;
	}
	
    #page-int #colonnePrincipale .bandeauContenu img{
        max-width: 100%;
       
    }
	
	.sujet{
		margin-left: 1.5%;
		width:22%;
		height: 200px;
	}
	 
	 .sujet-1{
		margin-left:inherit;
	}
	
	.titre-sujets-interessants{
		font-size:1.3em;
	}
	
	.description-sujets-interessants{
		font-size:1em;
	}
}

@media only screen and (max-width: 988px) {
	#colonnePrincipale{
		margin-left:3%;
	}
	
	.sujet{
		height: 196px;
	}
}

@media only screen and (max-width: 981px) {
	
	h1{
		font-size:2.65em;
	}
	
	h2{
		font-size:2.15em;
	}
	
	#menuPrincipal li a, #page-int #menuPrincipal li a{
		width: 219px;
	}
	#page-int #menuPrincipal li:first-child{
		margin-left:inherit;
	}
	#page-int #colonneDroite{
		width:100%;
	}
	
	.sujet{
		height: 193px;
	}
}

@media screen and ( max-width: 955px) {
	/*//////// LECTEUR VIDEO ET IMAGES ///////////*/
	
	#page-int #colonneGauche{
		width:25%;
	}
	
	#colonnePrincipale {
		width:75%;
		height: auto;
	}
	
	#colonnePrincipale .description{
		height:321px;
		width:227px;
	}
	
	#colonnePrincipale .lecteur-video{
		width:573px;
		max-width:inherit;
		margin-top:0;
		height:326px;
	}
	
	#colonnePrincipale  .lecteur-video .video{
		width:573px;
		height:auto;
	}
	
	#colonnePrincipale .lecteur-video .video embed, #colonnePrincipale .lecteur-video .video object{
		width:573px;
		height:290px;
	}
	
	#colonnePrincipale   .lecteur-video .controle{
		width:558px;
		height: 27px;
		padding-top: 4px;
	}
	
	#colonnePrincipale .btn-transcription{
		width:215px;
		margin-top: 325px;
		font-size:0.8em;
	}
	
	#colonnePrincipale .description p, #colonnePrincipale  h2{
		width:auto;
		clear:left;
	}
	
	#colonnePrincipale .description h2{
		font-size: 1.1em;
	}
	
	#colonnePrincipale .description p{
		font-size:0.8em;
	}
	#colonnePrincipale .image-slide{
		width:100%;
	}
	
	#colonnePrincipale {
		width: 573px;
	}
	
	#colonnePrincipale  .lecteur-video .sous-titre{
		width:563px;
	}
	
	#colonnePrincipale  .lecteur-video .sous-titre p{
		font-size:0.9em;
	}
	
	#colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .progression, #colonnePrincipale   .lecteur-video .controle .barre-progression, #colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .tampon{
		width:187px;
	}
	
	#menuPrincipal li a, #page-int #menuPrincipal li a{
		width: 200px;
	}
	
	.sujet{
		height: 193px;
	}
}

@media screen and ( max-width: 874px) {
	#menuPrincipal li a, #page-int #menuPrincipal li a{
		width: 184px;
	}
	
	.sujet{
		height: 172px;
	}
}

@media screen and ( max-width: 847px) {
	/*//////// LECTEUR VIDEO ET IMAGES ///////////*/
	
	#colonnePrincipale {
		width:740px;
		/*height: 300px;*/
	}
	
	#colonnePrincipale .description{
		height:300px;
		width:207px;
	}
	
	#colonnePrincipale .lecteur-video{
		width:533px;
		height:306px;
		max-width:inherit;
		margin-top:0;
		
	}
	
	#colonnePrincipale  .lecteur-video .video{
		width:533px;
		height:auto;
	}
	
	#colonnePrincipale .lecteur-video .video embed, #colonnePrincipale .lecteur-video .video object{
		width:533px;
		height:270px;
	}
	
	#colonnePrincipale   .lecteur-video .controle{
		width:518px;
		height: 27px;
		padding-top: 4px;
	}
	
	#colonnePrincipale .btn-transcription{
		width:196px;
		margin-top: 305px;
	}
	
	#colonnePrincipale .description p{
		width:190px;
	}
	
	#colonnePrincipale .description p{
	
		line-height:1.3em;
	}
	#colonnePrincipale .image-slide{
		width:100%;
	}
	
	#colonnePrincipale {
		width: 533px;
	}
	
	#colonnePrincipale  .lecteur-video .sous-titre{
		width:523px;
	}
	
	#colonnePrincipale  .lecteur-video .sous-titre p{
		font-size:0.8em;
		line-height:1.2em;
	}
	
	#colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .progression, #colonnePrincipale   .lecteur-video .controle .barre-progression, #colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .tampon{
		width:147px;
	}
	
	.sujet{
		height: 166px;
	}
}

@media only screen and ( max-width: 840px) {
	.accueil-deux-en-vedette #colonneDroite {
		margin-top:inherit;
	}
	#piv_entete { text-align: center; }
	#piv_entete img { width: 150px; height: 71px; }
	#piv_entete #bandeau { padding: 35px 0 0 0; }
	
	h1 { font-size:2.2em;}
	h2 {font-size:1.70em; font-weight: 500;}
	h2.commeH1{font-size:1.70em;}
	h3 {font-size:1.0625em; font-weight: 600; }
	h4 {font-size: 1.125em; padding: 13px 0px 0px; line-height: 1.5em;}
	
	html{
		font-size:0.95em;
	}
	
	#page-accueil{
		font-size:1.1em;
	}
	
	#page-int{
		padding:0 16px;
	}
	
	#page-int div.titre-portail {
		font-size:1.8em;
		color:#222222;
		padding: 0 0 11px 0;
		border-bottom: solid 1px #cbeaf7;
		float:none;
		border-left:0;
		margin:0;
	}
	
	#page-int .titre-portail .titre-portail-mieux-etre {
		 font-family: 'open_sansextrabold';
	}
	
	.entete{
		height:243px;
		overflow:hidden;
	}
	
	.entete img{
		
		right: -64px;
	}
	
	.entete .titre{
		width: 30%;
		bordeR:none;
		top:35px;
		left:0;
		z-index:999;
	}
	.entete .titre h1{
		font-size:2em;
		padding-bottom: 10px;
	}
	.entete .titre p{
		font-size:1em;
		
	}
	
	#menuPrincipal, #page-int #menuPrincipal{
		z-index:9999;
		margin-left:2.5%;
		margin-top:10px;
		bottom: -6px;
		font-size: 1em;

	}
	
	#menuPrincipal li, #page-int #menuPrincipal li{
		width:23%;
		padding-right: 0px;
	}
	
	#fil-ariane{
		width:inherit;
		font-size:0.9em;
		margin-top:8px;
	}
	
	.btn-imprimer{
		display:none;
	}
	
	#conteneur-col{
		float:left;
	}
	
	#conteneur .sous_menu_principal{
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 9998;
		background-color: white;
		height: 100%;
		margin:0;
		border:0;
		font-size:1.4em;
	}
	
	#conteneur .sous_menu_principal li{
		margin-bottom: 2px;
		width: 100%;
		border-left:none;
		bottom:inherit;
	}
	
	#conteneur .sous_menu_principal li:first-child{
		margin-left:0;
	}
	
	#conteneur .sous_menu_principal li a{
		background-color: #cbeaf7;
		padding: 10px 0px 10px 40px;
		display: block;
		height:inherit;
		border:none;
		text-align:left;
	}
	
	#conteneur .sous_menu_principal form#recherche{
		padding: 10px;
		background-color: #cbeaf7;
		margin-left:-40px;
	}
	
	#conteneur .sous_menu_principal form#recherche input#query{
		width: 40%;
		margin-left: 10%;
	}
	
	#contenu{
		width:auto;
		padding: 0 15px;
		border-left:none;
	}
	
	#contenu .container-img-droite{
		padding:inherit;
		clear:inherit;
		border:0;
		margin-left:inherit;
		text-align:inherit;
		position:relative;
		width:100%;
		margin-bottom:10px;
	}
	
	#contenu .container-img-droite img {
		float:left;
		max-width:60%;
	}
	
	#contenu .container-img-droite p.legende-img {
		margin:0;
		float:left;
		width:38%;
		display:table-cell;
		margin-left:2%;
	}
	
	#colonneDroite{
		position:inherit;
		float: left;
		clear: left;
		width:inherit;
	}
	
	#colonneDroite h2{
		margin-left:0;
	}
	
	#colonneDroite #contenuLier h2{
		height: 17px;
		padding-left: 27px;
		margin-top: 10px;
	}
	
	#colonneDroite #contenuLier h2:before{
		content: url(../img/deco-h2-mobile.jpg);
		left:0;
		width: 23px;
		height: 37px;
	}
	
	#colonneDroite ul li a, #contenuLier ul li a{
		margin-left:0;
	}
	
	#contenuLier{
		float:left;
		clear:both;
		margin-top:10px;
		width:100%
	}
	
	#colonneGauche, #page-int #colonneGauche{
		width:inherit;
	}
	
	#colonneGauche p img, #page-int #colonneGauche p img{
		width:100%;
	}
	
	#colonneGauche.alt, #colonneDroite.alt { 
		float: left;
		width: 100%;
		/*padding:0 2% 0 2%;*/
	}
	
	#page-int #colonneGauche{
		width: 30%
	}
	
	
	
	#page-int #colonneDroite {
		float:right;
		width:66%;
	}
	
	#sousMenu{
		margin-bottom:10px;
	}
	
	#menu-gabarit{
		background-color:white;
	}
	
	#menu-gabarit h1{
		font-size: 2em;
		line-height: 1.3em;
		border-top:solid 1px #d6e9f4;  border-bottom:solid 1px #d6e9f4; padding-bottom:10px; padding-right:19px; margin-bottom: 10px; position:relative;
		
	}
	
	#menu-gabarit h1:after{
		content:"";
		background-image:url(../img/arrow.png);
		background-size:contain;
		background-repeat:no-repeat;
		position:absolute;
		right: -20px;
		bottom:10px;
		width:24px;
		height:24px;
	}
	
	#menu-gabarit.fixed h1{
		padding-left: 30px;
		padding-right: 36px;
	}
	
	#menu-gabarit.fixed h1:after{
		right: 5px;
	}
	
	.menuFixed{
		overflow-y:scroll;
		overflow-x:hidden;
	}
	
	.fixed{
		position:fixed;
		top:0;
		z-index:998;
		left:0;
		width: 100%;
	}
	
	#colonnePrincipale{
		width: 65%;
		margin-left: 5%;
	}
	
	#page-int #colonneGauche.alt{
		margin-left:0;
		width:86%;
	}
	
	#page-int #colonneDroite.alt{
		float:left;
	}
	
	#contenu .note-basDePage{
		margin:0;
	}
	
	#menuBasDePage{
		margin-left:0;
		font-size: .8em;
	}
	
	#menuBasDePage li:first-child{
		margin-left: 0;
	}
	
	#piv_basDePage{
		margin: 10px 10px 95px 10px;
	}
	
	.enVedette { 
		width: 98%;
	}
	
	.enVedette img {
		width:100%;
	}
	.enVedette .texte_actualites ul{
		padding-left:3%;
	}
	
	.cacher-fleche:after{
		display:none;
	}
	
	/**** BOUTONS ****/
	div.bouton-ressource{
		height: 98px;
		width: 44%;
		padding: 1%;
		margin-right: 3%;
		margin-bottom: 3%;
		line-height: 95px;
	}
	
	div.bouton-ressource div{
		height:98px;
	}
	
	div.bouton-ressource a {
		width: 98%;
		font-size: .7em;
	}
	
	.sujet{
		height: 166px;
	}
}




/* Ipad 3 et 4 vertical*/
@media only screen and ( max-width: 796px) {
	/*//////// LECTEUR VIDEO ET IMAGES ///////////*/
	
	#colonnePrincipale .lecteur-video{
		width:413px;
		height:240px;
		max-width:inherit;
		margin-top:0;
		margin-left:0;
	}
	
	#colonnePrincipale  .lecteur-video .video{
		width:413px;
		height:auto;
	}
	
	#colonnePrincipale .lecteur-video .video embed, #colonnePrincipale .lecteur-video .video object{
		width:413px;
		height:209px;
	}
	
	#colonnePrincipale   .lecteur-video .controle{
		width:398px;
		height: 27px;
		padding-top: 4px;
	}
	
	#colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .progression, #colonnePrincipale   .lecteur-video .controle .barre-progression, #colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .tampon{
		width:46px;
	}
    
    #colonnePrincipale{
        height: auto;
       
    }
	
	#colonnePrincipale   .lecteur-video .controle .temps{
		width: 70px;
		font-size: 0.7em;
	}
	
	#colonnePrincipale .btn-transcription{
		width:195px;
		margin-top: 237px;
	}
	
	#menuPrincipal, #page-int #menuPrincipal{
        margin-left:0;
    }
    
    #menuPrincipal li, #page-int #menuPrincipal li{
        width: 23%;
        padding-right: 9px;
        margin-top: -5px;
    }
    #page-int #menuPrincipal li:last-child{
        padding-right: 0;
    }
    
    #page-int #colonnePrincipale .bandeauContenu img{
        max-width: 100%;
    }
	
	#page-int #menuPrincipal{
		height: 83px;
	}
	.sujet{
		height: 158px;
	}
}
@media only screen and (max-width: 640px) {

	.entete img{
		left: 26%;
		max-width: 96%;
	}
	
	/* RÉPERTOIRE RESSOURCES */
	.texte-normal{
		font-size:1.0em!important;
	}
	
	#recherche-RRSS form h2{
		
		height:31px!important;		
	}
	
	#recherche-RRSS{
		width:100%!important;
		float:none!important;	
	}
	
	#contenuLier {
    	width: 100%!important;
	}
	
	.onglets{float:none!important;width:auto!important;}
	.contenu_onglet{ 
		overflow:hidden;
	}
	.onglet { 
		display:none!important;
		/*margin-bottom:1px;*/
	}
	
	.titreTri{
		display:none!important;	
	}
	
	#criteres_recherche .onglets li, #territoire_recherche .onglets li{
		list-style-type:none;
		padding-bottom:1px;	
		display:inline;
	}
	#criteres_recherche .contenu_onglet, #territoire_recherche .contenu_onglet
	{
		/*width: 100%!important;*/ /* 77% avec les onglets */
		float:none!important;
	}
	
	#criteres_recherche.systeme_onglets, #territoire_recherche.systeme_onglets {
		width:auto!important;	
		background-color:#fff!important;
	}

	
	#contenu_onglet_service input, #contenu_onglet_type input {
		float: left;
		clear: left;
		width: 5%;
		padding-bottom:10px;
		margin-top:3px;
	}

	#contenu_onglet_service label, #contenu_onglet_type label {
/*		float: left;*/
		display:block;
		vertical-align: middle;

	}
	#criteres_recherche .contenu_onglet p{padding:0 0 0 5px !important;}
	#contenu_onglet_type .avec_retrait input { margin-left:20px; }
	#contenu_onglet_type .avec_retrait{margin:0;padding:0;clear:left;}
	#contenu_onglet_type .avec_retrait label {width:85%;}
	#contenu_onglet_type .avec_retrait br{clear:left;}

	
	#territoire_cp, #territoire_region{
		width:95%!important;
		float:none!important;	
	}

	#rayon-rech{
		float:none!important;

		margin-left:0!important;		
	}
	
	#bt_submitCode{
		padding:20px!important;	
	}
	
	.numPourEtape{
		display:block!important;
		background-image:url(../img/icone-etape-rech.jpg);
		background-repeat:no-repeat;
		padding-left:10px;
		padding-top:4px;
		width:25px;
		height:31px;
		float:left;
		font-weight:bold!important;		
	}
	.textePourEtape{
/*		display:block;*/
		float:right;
		padding-top:4px;
	}
	#bouton-soumettre-rrss{
		font-size:1.1em;
	}
	
	#horaire_recherche{
		margin-left:35px;
	}
	
	img.dansTexteAdroite + span.source{
		width :48%;
	}
	
	
	/* Accordeon */
	#accordeon-mobile-criteres a, #accordeon-mobile-territoires a{
		text-decoration:none;
		color:#594733;
	}
	.titrePourAccordeon{
		display:block!important;
		padding:10px!important;
		font-size:1em;
		background-color:#E4E2D6;
		margin-bottom:1px;
		cursor:pointer;	
	}
	
	#accordeon-mobile-criteres .titrePourAccordeon{
		background-color:#D4EDFC;/*#185F94;*/	
	}
	.titrePourAccordeon a{
		padding-left:11px;
	}
	
	.ui-accordion-header{
		border: 1px solid #E4E2D6;
		display:block;
		margin-left:10px;
		background-image:url(../img/fleche.gif);
		background-repeat:no-repeat;
		background-position:5px;
	}
	
	.ui-state-hover, .ui-state-active{
		border: 1px solid #594733;
	}
	
	.ui-accordion-content{
		margin-bottom:1px;
		background-color:#fff!important;
		border:1px solid #E4E2D6;
		margin-left:10px;	
	}
	

	
	/* Onglet dans les fiches ressources */
	#zone-details-infos .contenu_onglet{
		display:block!important;	
	}
	#zone-details-infos .onglet{
		display:none;
		max-width:25%!important;	
	}
	p.note-adroite{
		float:none!important;	
	}
	
	/*ajustement*/
	#colonneGauche.accueil-deux-en-vedette #actualite{
		width:auto;
	}
	
	.accueil-deux-en-vedette #colonneDroite{
		margin-top:inherit;
	}
	
	#accordeon .ouvert:after{
		content:"";
		background-image:url(../img/arrow.png);
		background-size:contain;
		background-repeat:no-repeat;
		position:absolute;
		right: 10px;
		width:24px;
		height:25px;	
	}
	
	#accordeon .fermer:after{
		content:"";
		background-image:url(../img/arrow-2.png);
		background-size:contain;
		background-repeat:no-repeat;
		position:absolute;
		right: 10px;
		top: 8px;
		width:24px;
		height:25px;
	}
	
	.accueil-deux-en-vedette .enVedette .contenu_actualites:first-child {
		border-bottom: solid 1px #1297cf;
	}
	
	.sujet{
		height: auto;
    width: 47%;
    max-height: inherit;
    float: left;
    min-height: 271px;
    margin-bottom: 1%;
    margin-left: inherit;
    margin-right: 1%;
		
	}
}

@media only screen and (max-width: 760px) {
	.entete img{
		left:35%;
		max-width:100%;
	}
	
	.sujet{
		height: auto;
    width: 46%;
    max-height: inherit;
    float: left;
    min-height: 271px;
    margin-bottom: 1%;
    margin-left: inherit;
    margin-right: 1%;
		
	}
}

@media only screen and (max-width: 701px) {
	.entete{
		height:94px;
	}
	
	#menuPrincipal, #page-int #menuPrincipal{
		position:fixed;
		bottom:0;
		z-index:9999;
		margin-left:0;
		font-size:0.87em;
		width: 102%;
		border:none;
		left:0;
		float: none;
		/*height: inherit;*/
		height: 71px;
	}
	#menuPrincipal li, #page-int #menuPrincipal li{
		padding:0;
		margin:0;
		float:left;
		border:solid 1px #97daf6;
		border-bottom:none;
		width:28%;
	}
	
	#page-int #menuPrincipal li{
		margin-bottom:inherit;
	}
	#page-int #menuPrincipal li.active{
		height:inherit;
	}
	#page-int #menuPrincipal li.active a{
		/*height:36px;*/
		height: 50px;
		font-weight:normal;
	}
	#page-int #menuPrincipal li:first-child {
		margin-left:inherit;
	}
	#menuPrincipal li a, #page-int #menuPrincipal li a{
		height: 46px;
		width: 100%;
		background-image: inherit;
		background-color: #c3e7f6;
		display: block;
		float: left;
		padding-top: 8px;
		font-size:1.5em;
	}

	
	#menuPrincipal li a:hover, #menuPrincipal li a.active, #menuPrincipal-int li a:hover, #menuPrincipal-int li a.active{
		height: 46px;
		color:white;
		font-weight:normal;
		background-color:#598208;
	}
	
	#page-int #menuPrincipal li a:hover, #page-int #menuPrincipal li a.active{
		/*height:36px;*/
		height: 50px;
		padding-top: 20px;
		color:white;
		font-weight:normal;
		background-color:#598208;
	}
	
	#menuPrincipal li#menu_plus{
		width: 13.4%;
		font-size: 2em;
	}
	
	#menuPrincipal li a,#menuPrincipal li a:hover, #page-int #menuPrincipal li a, #page-int #menuPrincipal li a:hover, #page-int #menuPrincipal li a.active, #menuPrincipal li a.active{
		font-size:inherit;
		/*height:36px;*/
		height: 50px;
		padding-top: 20px;
        font-size: 0.8em;
	}
}

@media only screen and (max-width: 670px) {
	
	.entete .titre {
		width: 32%;
	}
	
	.entete .titre h1 {
		font-size: 2em;
		top: 72px;
	}
	
	.entete .titre p {
		font-size: 0.8em;
	}
}
@media only screen and (max-width: 670px) {
.sujet{
		height: auto;
    min-height: 262px;
		
	}
}


@media only screen and (max-width: 575px) {

	#criteres_recherche .colonneGauche { width:100%!important; }
	#zone-accessibilite, .contenu_onglet { width:98% !important; }
	#zone-coordonnees { width: 93% !important; }
	#zone-accessibilite { margin: 0 0 15px 0 !important; }
	
	table.horaire { width: 100% !important; }
	#activationHoraireFerie{width: 100% !important; }
	p.note-adroite { position: static; float:left; width: 100%; }
	.map-resultat { float:none!important; width:99%!important; margin:0!important; }
	.colG { width: 100% !important; }
	
	.liste-etapes{
		padding-left:0;
	}
	
	.accueil-deux-en-vedette .enVedette{
		display:block;
	}
	
	.accueil-deux-en-vedette .enVedette .contenu_actualites{
		display:block;
		width:auto;
		border:none;
		position: relative;
	}
	.enVedette .texte_actualites ul{
		width:230px;;
	}
	
	.sujet{
		height: auto;
    min-height: 237px;
	}
	
}
@media only screen and ( max-width: 568px) {
	/*//////// LECTEUR VIDEO ET IMAGES ///////////*/
	
	#colonnePrincipale {
		width:525px;
		height: auto;
	}
	
	#colonnePrincipale .description{
		height:auto;
		width:auto;
		float:none;
		padding-left:15px;
		padding-bottom:15px;
		padding-right:15px;
	}
	
	#colonnePrincipale .lecteur-video{
		width:100%;
		height:auto;
		max-width:inherit;
		margin-top:0;
		margin-left:0;
	}
	
	#colonnePrincipale .lecteur-video .video{
		width:100%;
		
	}
	
	#colonnePrincipale .lecteur-video .video embed, #colonnePrincipale .lecteur-video .video object{
		width:100%;
		height:265px;
	}
	
	#colonnePrincipale   .lecteur-video .controle{
		width:100%;
		padding-left:inherit;
		
	}
	
	#colonnePrincipale #controle-video.controle .barre-progression-inactif, #colonnePrincipale #controle-video.controle .progression, #colonnePrincipale #controle-video.controle .barre-progression, #colonnePrincipale #controle-video.controle .barre-progression-inactif, #colonnePrincipale #controle-video.controle .tampon{
		width:150px;
	}
	
	#colonnePrincipale #controle-video.controle .play-pause{
		margin: 0 2px 0 17px;
	}
	
	#colonnePrincipale .btn-transcription{
		width:auto;
		position:inherit;
		left:inherit;
		right:inherit;
		bottom:inherit;
		margin-top:10px;
		background-color:hsla(198,25%,92%,1.00);
	}
	
	#colonnePrincipale .description p, #colonnePrincipale  h2{
		width:auto;
		margin:inherit;
	}
	
	#colonnePrincipale  h2{
		font-size:1.5em;
	}
	
	#colonnePrincipale .description p{
	
		line-height:1.5em;
		font-size:1em;
	}
	
	#colonnePrincipale {
		width: auto;;
		float:none;
	}
	
	#colonnePrincipale  .lecteur-video .sous-titre{
		width:98%;
	}
	
	#colonnePrincipale  .lecteur-video .sous-titre p{
		font-size:0.9em;
		line-height:1.3em;
	}
    
    #page-int .grid figure img{
        width: inherit;
        height: inherit;
        min-height: inherit;
        max-height: inherit;
       
    }
	
	.sujet{
		height: auto;
    	min-height: 176px;
		width:35%;
		margin-right: 2%;
	}
}

@media only screen and (max-width: 540px) {
	.entete .titre p {
		font-size: 0.75em;
	}
}
@media only screen and ( max-width: 530px) {
	
	/*// Recherche ////*/
	
	#recherche input.champ{
		width: 73%;
		margin-left: 15px;
	}
	
	#recherche input.bouton{
		width:20%;
	}
	
	#tailletexte{
		margin-right:20px;
	}
	
	/* autres */
	
	#contenu{
		margin-top:0;
	}
	
	/*//////// LECTEUR VIDEO ET IMAGES ///////////*/
	  
	  #colonnePrincipale .lecteur-video .video embed, #colonnePrincipale .lecteur-video .video object{
		width:100%;
		height:218px;
	}
	
	#colonnePrincipale {
		width:90%;
	}
	
	#colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .progression, #colonnePrincipale   .lecteur-video .controle .barre-progression, #colonnePrincipale   .lecteur-video .controle .barre-progression-inactif, #colonnePrincipale   .lecteur-video .controle .tampon{
		width:60px;
	}
	
	.sujet{
		
    	min-height: 156px;
    	width: 44%;
		
	}
	
	.grid figure {
		width: 48%;
	}
	
	#page-int .grid figure img {
    	width: 90%;
	}
	.grid figure figcaption h3 {
		width: 100%;
		padding: 19% 0%;
	}
	.grid figure figcaption {
		width: 100%;
	}
}

@media only screen and (max-width: 494px) {
	html{
		font-size:0.75em;
	}
	
	.entete{
		height:80px;
	}
	
	.entete img{
		left: 49%;
		max-width:80%;
	}
	
	.entete .titre{
		width: 50%;
		bordeR:none;
		top:35px;
		left:-3%;
		z-index:999;
	}
	.entete .titre h1{
		font-size:1.8626em;
		padding-bottom: 10px;
	}
	.entete .titre p{
		font-size:0.97em;
		
	}
	
	
	
	#conteneur .sous_menu_principal{
		font-size:1em;
		left: 0;
	}
	
	#conteneur .sous_menu_principal form#recherche{
		margin-left:inherit;
	}
	
	#page-int #colonneGauche.alt{
		width:inherit;
	}
	
	#page-int #colonneGauche table td img{
		width:100%;
	}
	
	#page-int #colonneDroite.alt, #page-int #colonneDroite{
		width:100%;
	}
	
	#colonnePrincipale{
		width:inherit;
		margin-left:inherit;
	}
	
	#page-int #colonnePrincipale h2:first-child{
		margin-top:inherit;
	}
	
	#retroaction_commentaires textarea{
		width:180px;
		height: 76px;
	}
	
	#f_sondage input {
		padding: 0 4px;
	}
	
	#retroaction_commentaires input {
		margin-bottom: 7px;
		margin-top: -11px;
	}
	
	.sujet{
		
    	min-height: 156px;
    	width: 43%;
		
	}
}