@charset "UTF-8";
/* CSS Document */

@viewport { width: device-width; zoom: 1; }

@media (max-width: 980px) {

.pied { width: auto; }

}
@media (max-width: 956px) {

.tete .menu li.opt,
#menuSites
{ display: none; }

.tete .logo {
	position: relative;
	top: 1px;
	margin: 0px auto;
	text-align: center;
}
.tete .logo h1 a {
	background-position: center top;
	background-size: 72%;
}
.tete .menu {
	left: 0px;
	top: -28px;
    margin: 0px auto 0px;
    padding-top: 12px;
    position: relative;
    width: 92%;
}
.tete .menu ul {
	display: block;
	width: 100%;
	height: 16px;
	text-align: center;
}
.tete .menu li, .menu li a:link, .menu li a:visited, .menu li a:hover {
	display: inline-block;
	float: none;
	width: 130px;
	margin: 0px;
}
.menu li a:link, .menu li a:visited, .menu li a:hover { padding: 11px 2px; }
.tete .addthis_toolbox {
	left: auto;
	right: 8%;
	top: 93px;
}

.corps { background: none; }

#zoom { left: 35%; }
#zoom img { height: auto; max-width: 480px; }

.liste { width: 100%; max-width: 100%; }
.liste div.portfolio, #compte div.portfolio {
	width: auto;
	min-width: 95px;
	max-width: 140px;
}
.liste div.pres {
	width: auto;
	min-width: 155px;
}
.liste div.localisation {
	max-width: 130px;
	width: auto;
}


/* === Pages === */

#oubli div.contenu, #confirmation .contenu, #cgu .contenu, #aPropos .contenu, #faq .contenu, #contact .contenu { width: auto; padding: 30px 15px 50px; }
#oubli .contenu h2, #confirmation .contenu h2, #cgu .contenu h2, #aPropos .contenu h2, #faq .contenu h2,  #contact .contenu h2 {
	position: relative;
	top: 0px; left: 0px; right: auto;
	margin: 0px 0px 12px;
	padding: 0px;
	font-size: 3em;
}

/* ------ formulaires d'ajout / modif. de sites ------ */
#inscription h2, #ajout h2, #modifier h2 { display: none; }
#inscription form.infos,
#modifier form.infos,
#ajout form.infos
{
	width: 100%;
	padding: 25px 0px;
}
#inscription form.infos .label,
#modifier form.infos .label,
#ajout form.infos .label
{ width: 153px; }
#inscription form.infos label.logo,
#modifier form.infos label.logo,
#ajout form.infos label.logo
{ left: 206px; width: 450px; }
#inscription form.infos input,
#modifier form.infos input,
#ajout form.infos input
{ width: 220px; }
#inscription form.infos select,
#modifier form.infos select,
#ajout form.infos select
{ width: 227px; }
#inscription form.infos div.activite label,
#modifier form.infos div.activite label,
#ajout form.infos div.activite label
{
	display: block;
	width: 200px;
	padding-left: 156px;
	margin: 0px 0px 8px;
	text-align: left;
}
#inscription form.infos .activite input, #inscription form.infos .option input,
#modifier form.infos .activite input, #modifier form.infos .option input,
#ajout form.infos .activite input, #ajout form.infos .option input
{ width: auto; }
#inscription .compte, #inscription .enreg,
#modifier .enreg,
#ajout .enreg
{ width: 100%; padding: 30px 0px 30px 0px; }
#inscription span.info,
#inscription form.infos .presentation .info, #inscription form.infos .contact .info,
#modifier span.info,
#modifier form.infos .presentation .info, #modifier form.infos .contact .info,
#ajout span.info,
#ajout form.infos .presentation .info, #ajout form.infos .contact .info
{
	display: inline-block;
	position: relative;
	top: -5px;
	margin-bottom: 12px;
	margin-left: 70px;
	width: 400px;
	/* typo */
	text-align: right;
}
#inscription form.infos .portfolio .info,
#modifier form.infos .portfolio .info,
#ajout form.infos .portfolio .info
{
	display: block;
	font-style: italic;
	margin: 0px 0px 25px 99px;
	position: relative;
	top: 0px;
	width: 443px;
}
#inscription form.infos .contact textarea,
#modifier form.infos .contact textarea,
#ajout form.infos .contact textarea
{ width: 221px; margin-left: 1px; }
#inscription form.infos span.info,
#modifier form.infos span.info,
#ajout form.infos span.info
{ display: block; }
#inscription form.infos .contact p.info,
#modifier form.infos .contact p.info,
#ajout form.infos .contact p.info
{ display: block; margin: 0px 0px 30px 243px; max-width: 300px; text-align: left; }
#inscription form.infos .option,
#modifier form.infos .option,
#ajout form.infos .option
{ margin-left: 239px; }
#inscription form.infos button,
#modifier form.infos button,
#ajout form.infos button
{
	display: block;
	margin: 30px 0px 20px;
	left: 239px;
}

	/* --- pages Ajouter et Modifier seulement --- */
#modifier img.logo,
#ajout img.logo
{ left: 244px; }
#modifier .groupe, #modifier .presentation textarea,
#ajout .groupe, #modifier .presentation textarea
{ width: 380px; }
#modifier label, #modifier .label, #modifier label.logo, #modifier .cgu,
#ajout label, #ajout .label, #ajout label.logo, #ajout .cgu
{ width: 470px; }
#modifier .enreg,
#ajout .enreg
{ padding-top: 43px; }
#modifier .portfolio label,
#ajout .portfolio label
{ width: auto; }
#modifier form.infos .contact .label,
#ajout form.infos .contact .label
{ width: 148px; margin-right: 16px; right: auto; }
#modifier div.carto,
#ajout div.carto
{ margin: 0px 0px 20px 242px; width: 324px; }
	/* --- pages Ajouter et Modifier seulement --- */
/* ------ / formulaires d'ajout / modif. de sites ------ */


#compte .liste div.localisation { min-width: 55px; }

#contact .partie { padding: 0px; }
#contact .corps h2,
#contact .contenu form {
	width: auto;
	position: relative;
	margin: 0px auto;
	padding: 0px;
	width: 90%;
	max-width: 450px;
}
#contact .contenu form { width: auto; font-size: 1.15em; line-height: 0.25em }
#contact .contenu form div { width: auto; }
#contact .contenu form input, #contact .contenu form textarea, #contact .contenu form #expediteur, #contact .contenu form p {
	width: 98%;
	margin: 0px auto;
	padding: 4px;
	position: relative;
	display: block;
}
#contact .contenu form p {
	padding: 4px 0px;
	line-height: 1.3em;
}
#contact .contenu form textarea { height: 300px; }
#contact .contenu form button { left: 0px; margin: 12px auto; }


#aPropos .contenu p { width: auto; }

#suppression .contenu { width: auto; }

}
@media (max-width: 805px) {

#zoom img { height: auto; max-width: 400px; }

}
@media (max-width: 685px) { /* === Mobiles === */

/* affichages */
.chapeau,
.tete .addthis_toolbox, .sup,
#menuGeneral,
.onglets,
.recherche .tri select:first-child,
#affOptions,
.liste .libelles, .liste .publication div.portfolio, .publication .modifier br
{ display: none; }
.tete .menu .opt { display: inline; }
.tete .menu li.opt, .tete .menu ul li.MenCarto, #menuGeneral.onMobile { display: block; }
/* affichages */

.tete { height: auto; }

.tete .connexion { top: 86px; right: 7%; }
.tete .connexion span {
	display: inline-block;
	max-width: 71px;
	overflow: hidden;
	vertical-align: text-bottom;
}
.tete .connexion input { width: 70px; }

/* Menu general */
#commandeMenu {
	display: block;
	margin: 1px 0px 0px;
	color: #fff;
	text-transform: uppercase;
}
#commandeMenu.off:after { content: "  ↓" }
#commandeMenu.on:after { content: "  ↑" }
#commandeMenu a {
	padding: 2px 3px;
	color: #fff;
	border-bottom: none;
}
#commandeMenu a:hover, #commandeMenu a:active {
	background-color: #fff;
	color: #000;
}

.tete .menu ul {
	display: block;
	height: auto;
	padding: 0 0 16px;
	position: relative;
	top: 27px;
}
.tete .menu li {
	display: list-item;
	width: 100%;
	min-width: 220px;
	text-align: left;
}
.tete .menu ul li a {
	background: none;
	border-bottom: 1px dashed #666;
	width: 90%;
	padding-left: 15px;
	padding-right: 15px;
	text-align: left;
}
.tete .menu li.on a:link, .tete .menu li.on a:visited { background: none; }
.tete .menu li.MenRech a:hover { background: #925; }
.tete .menu li.MenCarto a:hover { background: #8a2; }
.tete .menu li.MenAjout a:hover { background: #445666; }
.tete .menu li.MenCompte a:hover { background: #58a; }
.tete .menu ul li a:active { background: #a36 !important; background: #a88 !important; background: #28d !important; }
/* / Menu general */


/* Pied */
.pied ul { float: none; }
.pied .signature {
	text-align: left;
	margin: 30px 20px;
	padding-top: 30px;
	border-top: 1px solid #666;
}
/* / Pied */



/* ------ listes publications (page Recherche (= Accueil), Compte, A Propos) ------ */
div.liste {
	background: none;
	background-color: #99a8b9;
}
.liste #publications { display: block; }
.liste .publication {
	position: relative;
	background-color: #f4f3ef;
	display: block;
	border: none;
	margin: 9px auto;
	height: auto;
	min-height: 330px;
	overflow: hidden;
}
.liste div.publication:first-child { margin-top: 0px; }
.liste div.publication:last-child { margin-bottom: 0px; }

.liste .publication > div { display: inline-block; }
div.liste div.publication div.nom {
	display: block;
	position: absolute;
	border-bottom: none;
	height: 100%;
	background-color: #fff;
}
.liste .publication:hover div.nom { border: none; padding-right: 8px; }
.liste .nom .activite li { display: inline; line-height: 140%; }
.liste .nom .activite li:after { content: ", "; }
.liste .nom .activite ul li:last-child:after { content: ""; }
.liste .nom .activite li.statut { display: block; margin-bottom: 9px; }
.liste .nom .activite li.statut:after { content: ""; }
div.liste .pres {
	position: relative;
	left: 136px;
	min-width: 80px;
	max-width: 56%;
	border: none;
	padding-bottom: 25px;
}
.pres .portfolio, #compte .pres .portfolio {
	display: block;
	margin: 20px 0px 0px;
	width: auto;
	max-width: none;
	padding: 0px;
	text-align: left;
}
.pres .portfolio img { 	margin: 1px 1px 0px 0px; }
.liste div.localisation {
	display: block;
	border-top: 1px dashed #bbb;
	border-bottom: none;
	width: auto;
	max-width: none;
	/* typo */
	line-height: 40%;
	font-size: 0.92em;
}
.liste div.localisation > div {
	position: relative;
	left: 136px;
	max-width: 53%;
	line-height: 140%;
}
.liste div.localisation hr { margin: 8px auto; }
.liste div.localisation .cp, .liste div.localisation .ville {
	display: inline-block;
	margin: -6px 6px 0px 0px;
}

div.pub {
	display: block;
	width: 100%;
}
.pub > div { display: none; }
div.pub div.promo {
	display: block;
	position: absolute;
	background: #069 url('fonds/10-0037.jpg') no-repeat center center;
	width: 100%;
	border: none;
}
/* ------ / listes publications (page Recherche (= Accueil), Compte, A Propos) ------ */

/* ------ formulaires Inscription, Ajouter un enregistrement, Modifier un enregistrement ------ */
#inscription .alerte, #inscription p.mention,
#modifier .alerte, #modifier p.mention,
#ajout .alerte, #ajout p.mention
{ margin: 0px auto; }
#inscription form.infos h3,
#modifier form.infos h3,
#ajout form.infos h3
{
	display: block;
	width: auto;
	margin: 35px 0px 12px;
	border-bottom: 1px solid #458;
	padding: 2px 4px;
	/* typo */
	color: #458;
	color: #555;
	text-transform: uppercase;
	font-size: 1.15em;
	letter-spacing: 0.15em;
	text-align: left;
}
#inscription form.infos .compte, #inscription form.infos .enreg,
#modifier form.infos .compte, #modifier form.infos .enreg,
#ajout form.infos .compte, #ajout form.infos .enreg
{
	background: none;
	max-width: 285px;
	margin: 0px auto;
	padding: 15px 0px;
}
#inscription form.infos .groupe,
#modifier form.infos .groupe,
#ajout form.infos .groupe
{
	right: 0px;
	padding: 10px 0px 10px 15px;
	margin-bottom: 20px;
	width: auto;
}

#inscription form.infos .groupe.portfolio,
#modifier form.infos .groupe.portfolio,
#ajout form.infos .groupe.portfolio
{
	left: 0px;
	padding: 20px 0px 20px;
	width: auto;
}
#inscription form.infos .coord,
#modifier form.infos .coord,
#ajout form.infos .coord
{ margin-bottom: 20px; }
#inscription form.infos .option,
#modifier form.infos .option,
#ajout form.infos .option
{
	margin: 0px;
	padding: 0px;
	width: auto;
}

#inscription form.infos label, #inscription form.infos .cgu,
#modifier form.infos label, #modifier form.infos .cgu,
#ajout form.infos label, #ajout form.infos .cgu
{ width: 285px; }
#inscription form.infos label, #inscription form.infos .label,
#modifier form.infos label, #modifier form.infos .label,
#ajout form.infos label, #ajout form.infos .label
{
	right: 0px;
	text-align: left;
}
#inscription form.infos label.logo,
#modifier form.infos label.logo,
#ajout form.infos label.logo
{
	left: 0px;
	padding: 0px;
	margin-bottom: 0px;
	width: auto;
}
#inscription form.infos span.label.activite,
#modifier form.infos span.label.activite,
#ajout form.infos span.label.activite
{ margin-top: 20px; }
#inscription form.infos div.activite label,
#modifier form.infos div.activite label,
#ajout form.infos div.activite label
{ padding-left: 0px; }
#inscription form.infos .portfolio label,
#modifier form.infos .portfolio label,
#ajout form.infos .portfolio label
{
	display: block;
	position: relative;
	width: 100%;
	margin: 5px auto 0px auto;
}
#inscription form.infos input,
#modifier form.infos input,
#ajout form.infos input
{
	display: block;
	width: 275px;
	margin: 5px 0px;
	padding: 5px;
}
#inscription form.infos .activite input,
#modifier form.infos .activite input,
#ajout form.infos .activite input
{ display: inline-block; }
#inscription form.infos .logo input,
#modifier form.infos .logo input,
#ajout form.infos .logo input
{ width: 200px; }
#inscription form.infos .portfolio input,
#modifier form.infos .portfolio input,
#ajout form.infos .portfolio input
{
	display: inline-block;
	width: 217px;
	margin: 0px;
}
#inscription form.infos .coord input, #inscription form.infos .coord textarea,
#modifier form.infos .coord input, #modifier form.infos .coord textarea,
#ajout form.infos .coord input, #ajout form.infos .coord textarea
{ background-color: #fff; }
#inscription form.infos select,
#modifier form.infos select,
#ajout form.infos select
{ width: 210px; height: 25px; }
#inscription form.infos .coord select,
#modifier form.infos .coord select,
#ajout form.infos .coord select
{ display: block; width: 285px; margin: 5px 0px 0px; }
#inscription form.infos .presentation textarea, #inscription form.infos .coord textarea,
#modifier form.infos .presentation textarea, #modifier form.infos .coord textarea,
#ajout form.infos .presentation textarea, #ajout form.infos .coord textarea
{
	width: 274px;
	height: 160px;
	border: 1px solid #bbb;
	right: 0px;
	margin: 0px;
	padding: 5px;
}
#inscription form.infos .coord textarea,
#modifier form.infos .coord textarea
#ajout form.infos .coord textarea
{ height: 110px;}
#inscription form.infos .coord textarea,
#modifier form.infos .coord textarea
#ajout form.infos .coord textarea
{
	height: 110px;
	display: block;
	left: auto;
	margin: 0px auto;
}
#inscription form.infos .info,
#modifier form.infos .info,
#ajout form.infos .info
{
	width: 260px;
	padding: 0px;
	margin: 0px 0px 12px;
	text-align: left;
}
#inscription form.infos .presentation .info,
#modifier form.infos .presentation .info,
#ajout form.infos .presentation .info
{
	width: auto;
	margin: 10px auto 20px auto;
}
#inscription form.infos .groupe.portfolio .info,
#modifier form.infos .groupe.portfolio .info,
#ajout form.infos .groupe.portfolio .info
{
	margin: 5px 0px 10px;
	padding: 0px 0px 8px;
	width: auto;
}
#inscription form.infos .contact p.info,
#modifier form.infos .contact p.info,
#ajout form.infos .contact p.info
{
	width: auto;
	margin: 10px 0px 0px;
	padding: 0px;
}
#inscription form.infos .option input,
#modifier form.infos .option input,
#ajout form.infos .option input
{ display: inline-block; }
#inscription form.infos button,
#modifier form.infos button,
#ajout form.infos button
{
	display: block;
	left: auto;
	margin: 30px auto;
}

#modifier img.logo { left: 0px; }
#modifier form.infos .portfolio input { margin: 10px 0px; width: 155px; }
#modifier div.carto { margin: 0px 0px 20px; width: auto; }
/* ------ / formulaires Inscription, Ajouter un enregistrement, Modifier un enregistrement ------ */



/* --- Compte --- */
#compteConnexion .contenu form { max-width: 230px; margin: 0px auto; }
#compteConnexion .contenu input { width: 170px; margin: 6px 2px; }
#compteConnexion .contenu input:first-child { margin-top: 0px; }
#compteConnexion .contenu button { margin: 12px auto; }

#compte form.infos label { width:302px; }
#compte form.infos label span { display: none; }
#compte form.infos input { width: 160px; }

#compte .publication .modifier {
	position: relative;
	display: block;
	background: none;
	border: none;
	border-top: 1px dashed #bbb;
	left: 136px;
	margin: 0px;
	padding-top: 12px;
}
#compte .publication .modifier form { margin: 4px 0px; }
#compte .publication:hover .modifier { background: none; }
/* --- / Compte --- */

/* --- A Propos --- */
#aPropos .liste .pres { max-width: 49%; }
/* --- / A Propos --- */

}