@charset "utf-8";
/* ==========================================================================
   Atelier Sfumato - feuille de style unique
   Fusion des 6 fichiers fragmentés d'origine (CMSMS) :
   Accessibility and cross-browser tools, Sfu_DropdownMenu, Sfu_Layout,
   Sfu_Accueil, Background et Couleurs, contactForm
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. ACCESSIBILITE ET OUTILS CROSS-BROWSER
   -------------------------------------------------------------------------- */

span.accesskey {
	text-decoration: none;
}

/* les blocs d'accessibilité sont cachés par défaut (texte pour lecteurs d'écran) */
.accessibility, hr {
	position: absolute;
	top: -999em;
	left: -999em;
}

/* dfn est aussi utilisé pour les libellés de menu cachés visuellement */
dfn {
	position: absolute;
	left: -1000px;
	top: -1000px;
	width: 0;
	height: 0;
	overflow: hidden;
	display: inline;
}

/* clearfix pour les divs contenant des éléments flottants */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html>body .clearfix {
	display: inline-block;
	width: 100%;
}
* html .clearfix {
	height: 1%;
}


/* --------------------------------------------------------------------------
   2. RESET ET MISE EN PAGE DE BASE (toutes les pages)
   -------------------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: Calibri, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	background-image: url(../imgCss/bg_body.gif);
	background-color: #DE961B;
	background-repeat: repeat-y;
	background-position: center top;
	color: #000;
}

div {
	font-size: 1em;
}

img {
	border: 0;
}

a,
a:link,
a:active {
	text-decoration: underline;
}

a:visited {
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/* centrage du contenu, largeur min/max */
div#pagewrapper {
	width: 1022px;
	margin: 0 auto;
	padding-top: 0;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
}

div#header {
	height: 180px;
}

div#header h1 a {
	display: block;
	height: 100px;
	text-indent: -999em;
	text-decoration: none;
	background: transparent url(../imgCss/logoSfuJaune.png) no-repeat left bottom;
	margin-left: 2em;
	width: 325px;
}

div#header h1 a:hover {
	background-image: url(../imgCss/logoSfuRouge.png);
}

#header .titrePage, #header p.titre.page {
	color: #DE961B;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
	letter-spacing: 1px;
	width: 350px;
	height: 26px;
	float: right;
	display: block;
	padding-top: 55px;
	margin: 0 66px 0 0;
}

div#main {
	width: auto;
	margin: 40px auto;
	padding-inline:3em;
}

#main #colGauche, #main #colDroite {
	width: 380px;
	display: block;
	text-align: justify;
	padding-bottom: 55px;
}

#main #colDroite {
	margin-left: 440px;
}

#main #colGauche {
	float: left;
}

div#footer {
	clear: both;
}

div#footer p {
	font-size: 0.8em;
	padding: 1.5em;
	text-align: center;
	margin: 0;
}

/* hr recréé via div pour l'accessibilité */
div.hr {
	height: 1px;
	padding: 1em;
	border-bottom: 1px dotted black;
	margin: 1em;
}

/* liens relationnels (précédent/suivant) sous le contenu */
div.left49 {
	width: 49%;
}

div.right49 {
	float: right;
	width: 49%;
	text-align: right;
}

#main .pageNav {
	font-size: 0.8em;
	line-height: 2em;
	clear: both;
	margin-bottom: 1em;
	background: transparent url(../imgCss/iconeMenu/bg_liHover.png) repeat top left;
	padding: 0 1em;
	color: #AE4517;
}

/* --- titres --- */
div#main h1 {
	font-size: 1.75em;
	margin: 0;
	padding-bottom: 0.85em;
}
div#main h2 {
	font-size: 1.5em;
	line-height: 1.5em;
	text-align: left;
	padding-left: 0.5em;
	padding-bottom: 1px;
}
div#main .titreContenu {
	margin: 1em;
	color: #666;
}
div#main h3 {
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 0 0 0.5em 0;
}
div#main h4 {
	font-size: 1.2em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}
div#main h5 {
	font-size: 1.1em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}
div#main h6 {
	font-size: 1em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}

/* --- texte --- */
p {
	font-size: 1em;
	margin: 0 0 1.5em 0;
	line-height: 1.4em;
	padding: 0;
}

blockquote {
	margin-left: 10px;
	padding: 1em;
	font-style: italic;
	font-size: 2em;
	font-family: Bodoni, Garamond, "Minion Web", "ITC Stone Serif", "MS Georgia", georgia, times, serif;
	line-height: 1em;
}

strong, b {
	font-weight: bold;
}
em, i {
	font-style: italic;
}

code, pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}

pre {
	border: 1px solid #000;
	background-color: #ddd;
	margin: 0 1em 1em 1em;
	padding: 0.5em;
	line-height: 1.5em;
	font-size: 90%;
}

/* --- listes --- */
div#main ul,
div#main ol,
div#main dl {
	font-size: 1em;
	line-height: 1.4em;
	margin: 0 0 1.5em 0;
}

div#main ul li,
div#main ol li {
	margin: 0 0 0.25em 3em;
}

div#main dl dt {
	font-weight: bold;
	margin: 0 0 0 1em;
}
div#main dl dd {
	margin: 0 0 1em 1em;
}
div#main dl {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid #c0c0c0;
}

/* --- images et légendes --- */
img.left {
	float: left;
	padding: 0.75em;
}
img.right {
	float: right;
	margin: 0.75em;
}
.legende {
	font-size: 0.65em;
	margin: 0;
	padding: 0;
	text-align: right;
}
.legende_titre {
	color: #fff;
}

#menuApproche ul {
	list-style-type: none;
	width: 290px;
}
#menuApproche ul li img {
	padding-left: 25px;
	transition: opacity 0.2s;
}
#menuApproche ul li img:hover {
	opacity: 0.66;
}


/* --------------------------------------------------------------------------
   3. MENU DEROULANT (pages intérieures - #navmenu)
   Racine = horizontal, secondaire = vertical
   -------------------------------------------------------------------------- */

#menuwrapper {
	margin-right: 40px;
	height: 75px;
	float: right;
}
#menuwrapper #navmenu dfn {
	display: none;
}

ul#navmenu {
	margin: 0;
	border: 0 none;
	padding: 0;
	list-style: none;
	height: 24px;
	text-align: right;
}
ul#navmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	display: inline;
	list-style: none;
	position: relative;
}

ul#navmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 120px;
	list-style: none;
	display: none;
	position: absolute;
	top: 80px;
	left: 0;
}

ul#navmenu ul:after {
	clear: both;
	display: block;
	font: 1px/0px serif;
	content: ".";
	height: 0;
	visibility: hidden;
}

ul#navmenu ul li {
	width: 120px;
	float: left;
	display: block !important;
	display: inline;
}

ul#navmenu a {
	padding: 0 6px;
	float: none !important;
	float: left;
	display: block;
	color: #222;
	font: bold 9px/22px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	height: auto !important;
	height: 1%;
	padding-right: 1em;
}

ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
	color: #FFF;
}

ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
	float: none;
	background: #EEE;
	color: #666;
}

ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
	background: #CCC;
	color: #FFF;
}

ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
	background: #EEE;
	color: #666;
}

ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
	background: #CCC;
	color: #FFF;
}

ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
	background: #EEE;
	color: #666;
}

ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
	background: #CCC;
	color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 160px;
}

/* icônes du menu racine */
ul#navmenu li#sfumenu_accueil {
	text-align: center;
}
ul#navmenu li#sfumenu_accueil a {
	background: url(../imgCss/iconeMenu/1accueil.png) bottom center no-repeat;
	padding-bottom: 60px;
}
ul#navmenu li#sfumenu_accueil a:hover {
	background-image: url(../imgCss/iconeMenu/1accueil_hov.png);
}

/* sous-menus sans fond spécifique */
ul#navmenu ul li#sfumenu_historique a,
ul#navmenu ul li#sfumenu_les-animateurs a,
ul#navmenu ul li#sfumenu_participants a,
ul#navmenu ul li#sfumenu_processus-createur a,
ul#navmenu ul li#sfumenu_approche-sfumato a,
ul#navmenu ul li#sfumenu_moyens a,
ul#navmenu ul li#sfumenu_freins a,
ul#navmenu ul li#sfumenu_calendrier a {
	background: transparent url(../imgCss/iconeMenu/bg_liHover.png) repeat top left;
	padding: 3px;
	padding-left: 30px;
	text-align: left;
	line-height: 1.5em;
}

/* Qui sommes-nous */
ul#navmenu li#sfumenu_qui-sommes-nous {
	text-align: center;
}
ul#navmenu li#sfumenu_qui-sommes-nous a {
	background: url(../imgCss/iconeMenu/2present.png) bottom center no-repeat;
	padding-bottom: 60px;
}
ul#navmenu li#sfumenu_qui-sommes-nous a:hover {
	background-image: url(../imgCss/iconeMenu/2present_hov.png);
}
ul#navmenu li#sfumenu_qui-sommes-nous li#sfumenu_historique a:hover,
ul#navmenu li#sfumenu_les-animateurs a:hover,
ul#navmenu li#sfumenu_participants a:hover {
	background: #333 url(../imgCss/iconeMenu/2bHover.png) left center no-repeat;
	padding-left: 30px;
}

/* Démarche */
ul#navmenu li#sfumenu_demarche {
	text-align: center;
}
ul#navmenu li#sfumenu_demarche a {
	background: url(../imgCss/iconeMenu/3demarche.png) bottom center no-repeat;
	padding-bottom: 60px;
}
ul#navmenu li#sfumenu_demarche a:hover {
	background-image: url(../imgCss/iconeMenu/3demarche_hov.png);
}
ul#navmenu ul li#sfumenu_processus-createur a:hover,
ul#navmenu ul li#sfumenu_approche-sfumato a:hover,
ul#navmenu ul li#sfumenu_moyens a:hover,
ul#navmenu ul li#sfumenu_freins a:hover {
	background: #333 url(../imgCss/iconeMenu/3bHover.png) left center no-repeat;
	padding-left: 30px;
}

/* Tarifs */
ul#navmenu li#sfumenu_tarifs {
	text-align: center;
}
ul#navmenu li#sfumenu_tarifs a {
	background: url(../imgCss/iconeMenu/4atelier.png) bottom center no-repeat;
	padding-bottom: 60px;
	width: 55px;
}
ul#navmenu li#sfumenu_tarifs a:hover {
	background-image: url(../imgCss/iconeMenu/4atelier_hov.png);
}
ul#navmenu ul li#sfumenu_calendrier a:hover {
	background: #333 url(../imgCss/iconeMenu/4bHover.png) left center no-repeat;
	padding-left: 30px;
}

/* Galerie */
ul#navmenu li#sfumenu_Galerie {
	text-align: center;
}
ul#navmenu li#sfumenu_Galerie a {
	background: url(../imgCss/iconeMenu/5galerie.png) bottom center no-repeat;
	padding-bottom: 60px;
	width: 55px;
}
ul#navmenu li#sfumenu_Galerie a:hover {
	background-image: url(../imgCss/iconeMenu/5galerie_hov.png);
}

/* Éphémères */
ul#navmenu li#sfumenu_ephemeres {
	text-align: center;
}
ul#navmenu li#sfumenu_ephemeres a {
	background: url(../imgCss/iconeMenu/6ephe.png) bottom center no-repeat;
	padding-bottom: 60px;
}
ul#navmenu li#sfumenu_ephemeres a:hover {
	background-image: url(../imgCss/iconeMenu/6ephe_hov.png);
}
ul#navmenu li#sfumenu_ephemeres ul {
	display: none;
}

/* Contact */
ul#navmenu li#sfumenu_contactez-nous {
	text-align: center;
}
ul#navmenu li#sfumenu_contactez-nous a {
	background: url(../imgCss/iconeMenu/7contact.png) bottom center no-repeat;
	padding-bottom: 60px;
	width: 55px;
}
ul#navmenu li#sfumenu_contactez-nous a:hover {
	background-image: url(../imgCss/iconeMenu/7contact_hov.png);
}

/* doit rester avant display:block pour Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
	display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
	display: block;
}


/* --------------------------------------------------------------------------
   4. PAGE D'ACCUEIL (body.accueil - menu #frontMenu)
   -------------------------------------------------------------------------- */

.accueil {
	color: #ccc;
}

.accueil #pagewrapper {
	background: #000000 url(../imgCss/bg_pageWrapAccueil.jpg) top center no-repeat;
}

.accueil #pagewrapper #content #main {
	margin-right: 45px;
	padding: 45px 0px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
}

.accueil #footer {
	text-align: center;
	font-size: 0.8em;
	color: #333333;
	padding: 25px;
	clear: both;
}
.accueil #footer p {
	padding: 25px;
}

#frontMenu dfn {
	display: none;
}

ul#frontMenu {
	margin: 0;
	border: 0 none;
	padding: 0;
	list-style: none;
	text-align: right;
}

ul#frontMenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: none;
	list-style: none;
	position: relative;
	height: 90px;
}

ul#frontMenu li a {
	padding: 0 6px;
	float: none !important;
	display: block;
	color: #D88900;
	font: bold 18px/22px Calibri, Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	height: 40px !important;
	height: 1%;
	padding-right: 85px;
	text-indent: 999em;
	padding-top: 45px;
	cursor: pointer;
}

ul#frontMenu a:hover,
ul#frontMenu li:hover a,
ul#frontMenu li.iehover a {
	color: #FFF;
}

ul#frontMenu li.fm1 a { background: transparent url(../imgCss/accueilMenu/fm1.png) center right no-repeat; }
ul#frontMenu li.fm1 a:hover { background: transparent url(../imgCss/accueilMenu/fm1h.png) center right no-repeat; }

ul#frontMenu li.fm2 a { background: transparent url(../imgCss/accueilMenu/fm2.png) center right no-repeat; }
ul#frontMenu li.fm2 a:hover { background: transparent url(../imgCss/accueilMenu/fm2h.png) center right no-repeat; }

ul#frontMenu li.fm3 a { background: transparent url(../imgCss/accueilMenu/fm3.png) center right no-repeat; }
ul#frontMenu li.fm3 a:hover { background: transparent url(../imgCss/accueilMenu/fm3h.png) center right no-repeat; }

ul#frontMenu li.fm4 a { background: transparent url(../imgCss/accueilMenu/fm4.png) center right no-repeat; }
ul#frontMenu li.fm4 a:hover { background: transparent url(../imgCss/accueilMenu/fm4h.png) center right no-repeat; }

ul#frontMenu li.fm5 a { background: transparent url(../imgCss/accueilMenu/fm5.png) center right no-repeat; }
ul#frontMenu li.fm5 a:hover { background: transparent url(../imgCss/accueilMenu/fm5h.png) center right no-repeat; }

ul#frontMenu li.fm6 a { background: transparent url(../imgCss/accueilMenu/fm6.png) center right no-repeat; }
ul#frontMenu li.fm6 a:hover { background: transparent url(../imgCss/accueilMenu/fm6h.png) center right no-repeat; }

ul#frontMenu li.fm7 a { background: transparent url(../imgCss/accueilMenu/fm7.png) center right no-repeat; }
ul#frontMenu li.fm7 a:hover { background: transparent url(../imgCss/accueilMenu/fm7h.png) center right no-repeat; }


/* --------------------------------------------------------------------------
   5. FONDS ET COULEURS PAR SECTION
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, a {
	color: #DE961B;
}

/* démarche */
.demarche #pagewrapper {
	background: #e6c76b url(../imgCss/bgWrap/bgDemarche.jpg) top center no-repeat;
}
.demarche h1, .demarche h2, .demarche h3, .demarche h4, .demarche h5, .demarche h6 {
	color: #ae4517;
}
.demarche div#header h1 a {
	background: transparent url(../imgCss/logoSfuRouge.png) no-repeat left bottom;
}
.demarche div#header h1 a:hover {
	background-image: url(../imgCss/logoSfuJaune.png);
}
.demarche div#header p.titrePage, .demarche a {
	color: #925436;
}

/* tarifs */
.tarifs #pagewrapper {
	background: #a68d21 url(../imgCss/bgWrap/bgTarifs.gif) top center no-repeat;
}
.tarifs h1, .tarifs h2, .tarifs h3, .tarifs h4, .tarifs h5, .tarifs h6, .tarifs a {
	color: #fb9f01;
}

/* présentation (qui sommes-nous) */
.qui-sommes-nous #pagewrapper {
	background: #a7561c url(../imgCss/bgWrap/bgPresentation.jpg) top center no-repeat;
}

/* éphémères */
.ephemeres #pagewrapper {
	background: #5C3015 url(../imgCss/bgWrap/bgEphemeres.jpg) top center no-repeat;
}
.ephemeres a {
	color: #DE961B;
}

/* contact */
.contactez-nous #pagewrapper {
	background: #B8632D url(../imgCss/bgWrap/bgContact.jpg) top center no-repeat;
}

/* navigation bas de page (menu approche Sfumato) */
.approchePage {
	font-size: 0.75em;
	padding: 3px;
	text-align: left;
}
.approchePage p {
	padding: 0;
	margin: 0;
	padding-top: 4px;
	border-top: 1px solid #000;
}
.approchePage ul li {
	display: inline;
}
.approchePage a {
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}
.approchePage a:hover {
	color: #222;
	border-bottom: none;
}


/* --------------------------------------------------------------------------
   6. FORMULAIRE DE CONTACT
   -------------------------------------------------------------------------- */

.contactform {
	color: #DE961B;
}
.contactform legend {
	font-size: 1.25em;
	display: block;
	background: #fff;
	padding: 4px;
}
.contactez-nous #pagewrapper .contactform fieldset {
	background-color: transparent;
	border: 3px solid #000;
}
.contactform input {
	color: #773A1B;
	line-height: 1.5em;
	border: 1px dotted #DE961B;
	height: 1.5em;
}
.contactform textarea {
	color: #773A1B;
	line-height: 1.5em;
	width: 300px;
}
.contactform div.required label {
	color: #DE961B;
}
.contactform input.fbsubmit {
	font-weight: bold;
	padding: 0.5em;
	height: 2.5em;
}