/************************ Gestion du Responsive **********************************/
@-ms-viewport{width:device-width;}
 
/************************ Ecrans au-dessus de 360px ******************************/
@media screen and (max-width:360px) {
	h6 {font-size: 13px !important; letter-spacing: normal !important}
}
/************************ Ecrans en-dessous de 699px******************************/
@media screen and (max-width:699px) {
	/****** navigation ******/
	.menu-btn {height: 40px !important; padding: 10px 20px;}
	#boutonsRESEAUX a {font-size: 13px !important;}

	/****** structure ******/
	.one_half,  
	.one_third, .two_third, 
	.one_third.nogutter, .two_third.nogutter,
	.one_halfSomm, .one_halfSomm.nogutter,
	.one_quarter, .two_quarter, .three_quarter, 
	.one_fifth, .two_fifth, .three_fifth, .four_fifth {
		display: block; 
		float: none !important; 
		width: auto; 
		margin: 0 !important; }
	#container {max-width:95%; margin:0 auto;}
	#pleinelargeur, #colonneGch {margin: 0 auto;}
	#BarreDesBulles {display:none !important;}
	/* footer */
	#footer, #footer .texte {text-align:center !important;}
	#footer .formulaire_newsletter input.submit, 
	#footer .formulaire_newsletter input.text {width: 70%;}
	/****** textes et typos ******/
    /* Fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
	img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video,
	div.calameo-canvas iframe {
      max-width: 100% !important;
    }
    /* Gestion des mots longs */
    textarea,
    table,
    td,
    th,
    pre,
    code,
    samp {
      word-wrap: break-word;/* cesure forcee */
    }
	pre,
    code,
    samp {
      white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */
    }
	#sectionBleueAccueil p, 
	#sectionVerteAccueil p {font-size: 0.9em !important; margin-bottom: 0 !important;}
    h1,.h1 {font-size: 1.5em; line-height: 1;}
    h2,.h2 {font-size: 1.25em; line-height: 1;}
    h3,.h3 {font-size: 1.1em;line-height: 1;}
	#colonneDr h2 {margin:0;padding:0;}
	/* panoramique page d'accueil */
	.owl-carousel .owl-item img {object-fit: cover;	min-height: 150px;}
	/* panoramique pages intérieures */
	.ligne1b{height: 150px;}
	/* images et icones */
	.blocBlancColonne .sites_logos {width: 30%; margin: 0 2% 2% 0;}
    /* Logo Evenos par-dessus panoramiques*/
	#positionLogoEvenos {
        width: 180px;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 900;
    }
	.spip_documents_left,
	.spip_documents_right,
	.spip_documents, 
	.spip_logo_left, 
	.spip_logo_right { 
		float: none !important; 
		max-width: 100% !important;
	}
	/* exception sur page sommaire */
	#documents_portfolio li {
		display:inline-block; 
		float:left; 
		width:45%; 
		margin:0 10px 10px 0; 
		padding:0; 
		clear:none;}
    #trombinoscope li {width: 46% !important;}
	/* icônes d'accès rapide en page d'accueil */
    #contenantIconesAccesRapide {
		margin:1em auto;
	}
    .iconeAccesRapide {
        width: 30%;
        font-size: 10px;
    }
    .iconeAccesRapide span {
        width: 54px;
        height: 54px;
        font-size: 24px;
        padding: 15px 10px;
        margin-bottom: 0.5rem;
	}	
    /* éléments en grilles */
    .elementEn4colonnes, .elementDeGrille, .elementEn5colonnes, .elementEn6colonnes {width:46%;}
	/* boutons flottants COVID, WEVER, GENDARMERIE */
	#boutonGENDARMERIE, #boutonCOVID19 {display:none; }
	#boutonWEVER {
        top: 30px;
        width: 80px;
        height: 80px;
    }
	/* en responsive,  lineariser le tableau pour eviter les scrolls*/
	table.spip th, table.spip tr, table.spip td, tbody {display:block;	}
	table.spip thead th {border-bottom:none !important;	}
	table.spip thead th+th {border-top:none;}
	table.spip tr {border-bottom: 1px solid;}
	table.spip td {border-bottom:none;}
	/*tr { display: table; }
	td { display: table-row; background:#FFFFFF !important}*/
}

/*******Ecrans au-dessus de 700px*******/
/***************************************/
@media screen and (min-width:700px) {
	/* navigation */
	.menu-btn {height: 82px !important; padding:0px 20px;}
	.menu-btn::after {content: 'Menu';}
	/* structure */
	.ligne2{min-height: 300px;}
	#colonneDr {margin:0; padding:2% 0 0 1px;}
	#pleinelargeur {margin: 0 auto; }
	.article-pleinelargeur .texte  {padding-left: 8% !important;padding-right: 8% !important;}
	#BarreDesBulles {margin: -24px auto 40px; max-width: 1300px;} /* avant : 800px */
	#colonneGch .formulaire_recherche input.text { width: 96%;}
	#colonneGch {margin: -2.5rem 0 1rem 0; }
	/* footer */
	#footer .formulaire_newsletter input.submit, #footer .formulaire_newsletter input.text {width: 90%;}
	/* images et icones */
	/* Logo Evenos par-dessus panoramiques*/
    #positionLogoEvenos {
      width: 300px;
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 900;
    }
	a.logoEvenos {max-width:310px;}

	/* panoramique pages intérieures */
	.ligne1b{height: 200px;}
	.blocBlancColonne .sites_logo {width: 46%; margin: 0 2% 2% 0;}
	
	/* icônes d'accès rapide en page d'accueil */
    #contenantIconesAccesRapide {
        width: 100%; 
        margin:1em auto;
		display: flex;
    }
    .iconeAccesRapide {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        text-align: center;
        text-transform: uppercase;
        font-weight: bold;
        width: 25%; 
        float: left;
        font-size: 14px;
    }
    .iconeAccesRapide span {
        width: 4rem;
        height: 4rem;
        font-size: 30px;
        padding: 1.2rem 0.8rem 0.2rem 0.8rem;
        margin-bottom: 0.5rem;
    }
	
    /* éléments en grilles */
    .elementDeGrille {width: 32%;} 
	.elementEn4colonnes {width: 24% !important; padding: 0.5% 0.5% 1% 0.5%;} 
	.elementEn5colonnes {width: 19% !important; padding: 0.5% 0.5% 1% 0.5%;} 
	.elementEn6colonnes {width: 16% !important; padding: 0.5% 0.5% 1% 0.5%;}
	/* formulaires  */
	#formulaire_contact label {float: left; }
	#formulaire_contact input.text, #formulaire_contact select {width: 50%; float: right }
}
/*******Ecrans au-dessus de 1600px*******/
/***************************************/
@media screen and (min-width:1600px) {
	body {font-size:16px !important;}
}
/*******Divers************************/
/*************************************/
/* Orientation iOS5 font-size fix */
@media (orientation: landscape) and (max-device-width: 640px) {
  html,
  body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
 }
}	

/* ******************************************************************************************/
/* Gabarit d'impression
------------------------------------------ */
@media print {
    .wrapper,
    .content { width: auto; }
    .nav,
    .arbo,
    .aside,
    .footer,
	#colonneDr, 
	#colonneGch { display: none; }

	/*  Ne pas imprimer */
	.spip-admin,
	.spip-admin-float,
	.spip-previsu { display: none; }
	.repondre { display: none; }

	/* Souligner et expliciter les liens */
	a { color: #600; text-decoration: underline !important; }
	a.spip_out:after,
	a.spip_glossaire:after,
	a.spip_mail:after { display: inline; content: " [" attr(href) "]"; }
}