/**
 * Voici une feuille de style type, bien entendu vous pouvez ajouter
 * ou supprimer des propriétés CSS en fonction de vos besoins.
 */

/*
Éléments principaux
 
Blue:#4285F4
Vert:#34A853
Orange:#FF9F11

initiale 
--main-primary-color:#4285F4;
--main-secondary-color:#34A853;
--main-third-color:#FF9F11;

*/



/***********************/
/****** TEMP ***********/

/* VARIABLES   */
:root {
	/*color-scheme: light dark;*/
	--main-primary-color:#306aaf;
  	--main-secondary-color:#5788b9;
  	--main-third-color:#FF9F11;
	--main-bgcolor:#FF9F11;	
	--main-grey:#7a7a7a;
	--main-lightGrey:#f6f6f6;
    --main-darkGrey:#555555;
	--main-lightColor:#FFFFFF;
	--main-box-shadow: 3px 3px 15px -4px rgba(0,0,0,0.3);
	
	--bg-color: transparent;
	--text-color: #212223; 
	--text-color-fixe:#212223;
}
/* to use variables, do : background-color:var(--main-third-color); */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #2C2C2C;
    --text-color: #F2F2F2;
  }
}
*/

/***********************/
  
body{  
  	line-height: 1.6em;
	background-color: var(--bg-color);
	color:var(--text-color);
}

  
div#contentSite.col8 {
    padding-top: 0;
}

/* 
* Grille du site
* Barres et page
*/
#contentLeft {
}
#contentRight {
}
#contentSite {
}

/* Bannière */
header {
}

/* Titre de la bannière */
header span {
}

/* Menu */
nav {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	-webkit-box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.3);
	-o-box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 3px 11px 0px rgba(0,0,0,0.3);
	z-index: 100;
}

nav #burgerText {
    	margin-top: 20px;  
	}
  
#burgerText {  	
  	/*
  	background-image: url(../file/source/banniere/bluetous-consulting-logo.png);  
  background-size: calc(100% - 20px);
  	*/
    margin-top: 20px;
}

#backHome_{
	background-image: url(../file/source/banniere/bluetous-consulting-2024.png);
	background-repeat: no-repeat;	
  	background-size: contain;
  	background-position: 20px center;
	background-color:transparent;  
	color: transparent !important;
    width: 200px;
}

#backHome img{
    width: 120px;
}


@media (max-width: 768px)
  {	
	#burgerText a{
    	background-position: 5px center;
	}
}

@media screen and (min-width:765px) and (max-width:920px){
   #burgerText a{
		font-size: 10px;
	}
}
  

#site{
	overflow: unset;
	background-color: var(--bg-color);
}

/* Items du menu */
nav a {
}

/* Items au survol du menu */
nav a:hover {
}

/* Item courant du menu */
nav a.active {
  color:var(--main-secondary-color);
}

/* Menu latéral */
/* aspect des puces */
ul #menuSide  {
} 
/* Block menu à droite */
#menuSideRight {
}
/* Block menu à gauche */
#menuSideLeft {
}


/* Bas de page */
footer {
}

footer #footersite, #footerbody {
}

/* Liens du bas de page */
footer #footersite, #footerbody a {
}

/* footer bloc gauche */
footer #footersiteLeft, #footerbodyLeft, #footerText  {
	margin-right:10px
}

/* footer bloc central */
footer #footersiteCenter, #footerbodyCenter {
}

/* footer bloc droite */
footer #footersiteRight, #footerbodyRight {
}

footer #footerZwiiCMS{
  /*display:none;*/
}


/**
 * Éléments de contenu
 */

/* Contenu de la page */
section {
    line-height: 1.6em;
  	padding-left:20px;
  	padding-right:20px;
    min-height: calc(100vh - 112px);
}
  
@media (min-width: 769px)
	{
	section {
    	padding: 40px;
	}
}


/* Titres */
h1,
h2,
h3,
h4 {
  line-height: 1.6em;
}

h1 {
  /*color:var(--main-third-color);*/
  color:var(--main-primary-color);
}

h2 {
  color:var(--main-darkGrey);
}

h2:first-letter{
  /*color:var(--main-third-color);*/
  color:var(--main-primary-color);
  font-size: xxx-large;
}

.bgfocus > h2:first-letter{
	color: var(--main-lightColor);
}

/*
.flexList > li h2:first-letter, 
.flexList > li h3:first-letter, 
.box > .item h2:first-letter,
.box > .item h3:first-letter
  {
    color: var(--main-third-color);
    font-size: xxx-large;
} 
*/

/* Liens */
a {
	color:var(--main-primary-color);
  	position:relative;
	z-index: 10;
}

/* Liens au survol */
a:hover {
  color:var(--main-secondary-color);
}

/* Liens au clic */
a:active {
}

/* Boutons */
button {
  color:#FFFFFF !important;
  font-weight: bold;
}

.button,
button[type='submit'],
.pagination a {
}

/* Boutons au survol */
.button:hover,
button[type='submit']:hover,
.pagination a:hover {
}

/* Boutons au clic */
.button:active,
button[type='submit']:active,
.pagination a:active {
}

/* Cases à cocher */
input[type='checkbox']:checked + label:before {
}

/* Cases à cocher au survol */
input[type='checkbox']:not(:active):checked:hover + label:before,
input[type='checkbox']:active + label:before {
}

/* Champs de formulaire */
input[type='text'],
input[type='password'],
.inputFile,
select,
textarea {
}

/* Champs de formulaire au survol */
input[type='text']:hover,
input[type='password']:hover,
.inputFile:hover,
select:hover,
textarea:hover {
}

/* Modules News et Blog */

.blogDate {
}

.blogPicture {
}

.blogPicture img {
}

.blogComment {
}

.blogTitle {
}

.blogContent {
}

.newsTitle {
    /*background-color: grey;*/
}

.newsContent {
}

.newsSignature {
    color: 	#404040;
}

/**************/
/* CUSTOM ACH */
/**************/

/* News / Actualité  */
hr{border:0; padding:20px;}

.newsSignature{display:none;}


.newsTitle {
	background-color: var(--main-lightGrey);
	padding: 10px 20px 0 20px !important;
	margin:  10px  5px 0  5px !important;
	border-radius: 5px 5px 0 0;
}


.newsContent {
	clear: left;
	margin: 0px 5px;
	background-color: var(--main-lightGrey);
	padding: 5px 20px 20px 20px;
	border-radius: 0 0 5px 5px;
}


.newsContent img {
	-moz-box-shadow: var(--main-box-shadow);
    -webkit-box-shadow: var(--main-box-shadow);
    -o-box-shadow: var(--main-box-shadow);
    box-shadow: var(--main-box-shadow);

}



/* Calage des ancres avec le sticky menu */
section #sectionTitle,
h1,h2,h3,
.anchor{
	padding-top: 80px !important; 
  	margin-top: -80px !important;
}

/* Card */

.box {
	/*background-color: #c1c6c7; */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    padding: 0px;
    margin: auto 0px;
    justify-content: space-between;
    /*align-items: center;*/
	}

.row.box div[class^="col"]{
	color:var(--text-color-fixe);
	background-color:var(--main-lightGrey);
	border-radius: 5px;
	flex:1;
    margin: 20px;
	box-shadow: var(--main-box-shadow);
}

.promoted > .row.box div[class^="col"]{
	background-color: var(--main-lightColor);
	-moz-box-shadow: var(--main-box-shadow);
	-webkit-box-shadow: var(--main-box-shadow);
	-o-box-shadow: var(--main-box-shadow);
	box-shadow: var(--main-box-shadow);
}

.box > .item{
	background-color:var(--main-lightGrey);
	color:var(--text-color-fixe);
    margin: 20px;
    padding: 15px;
    min-width: 250px;
    flex: 1 1 400px;
    /*
  	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  	*/
    /*min-height: 200px;*/
  	border-radius: 5px;
	
	-moz-box-shadow: var(--main-box-shadow);
	-webkit-box-shadow: var(--main-box-shadow);
	-o-box-shadow: var(--main-box-shadow);
	box-shadow: var(--main-box-shadow);
}

.promoted > .box > .item{
	background-color: var(--main-lightColor);
}

.row.box div[class^="col"]:hover,
.box > .item:hover {
	-moz-box-shadow: var(--main-box-shadow);
	-webkit-box-shadow: var(--main-box-shadow);
	-o-box-shadow: var(--main-box-shadow);
	box-shadow: var(--main-box-shadow);
	/*transform: scale(1.01);*/
}


.box > .item > p.cell {
	display:table-cell;
	vertical-align:middle;
	height:75px;
	}

/** End Card **/


/* Flex List */
ul.flexList {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    padding: 0px;
    margin: auto 0px;
    justify-content: space-between;
}

ul.flexList > li {
    background-color: var(--main-lightGrey);
    padding: 15px;
    text-align: left;
    border-radius: 5px;
    flex: 1 1 400px;
    margin: 20px;
    display: block;
	position: relative;
	
	background-color: var(--main-lightColor);
	-moz-box-shadow: var(--main-box-shadow);
	-webkit-box-shadow: var(--main-box-shadow);
	-o-box-shadow: var(--main-box-shadow);
	box-shadow: var(--main-box-shadow);
}

.promoted > ul.flexList > li {
	background-color: var(--main-lightColor);
}



/* End Flex List */
 
 
/* Flex button link */

ul.flexButtonList{
	/*
  	background-color: yellow;
  	border: 1px solid aqua;
  	*/
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    margin: auto 0px;
    justify-content: space-between;
  	justify-content: center;
    padding: 5px 0;
}

ul.flexButtonList > li{
	/*
	border: 1px solid green;
	background-color: #C0C0C0;
	*/
	padding: 10px;
    min-height: 150px;
    flex: 1 1 150px;    
    display: flex;
	max-width: 210px;

}

ul.flexButtonList > li > .itemButton{
    /*border: 1px solid red;*/
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

ul.flexButtonList > li > .itemButton > a{
	/*border: 1px solid black;*/
	background-color: var(--main-primary-color); 
    color:var(--main-lightColor);
    font-weight: bold;    
    padding: 5px;
    text-align: center;
    font-size: 1.25em;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;	
}

ul.flexButtonList > li > .itemButton > a:hover{
 	-moz-box-shadow: var(--main-box-shadow);
	-webkit-box-shadow: var(--main-box-shadow);
	-o-box-shadow: var(--main-box-shadow);
	box-shadow: var(--main-box-shadow);
  	text-decoration:none;
  	background-color: var(--main-secondary-color);
}

/* End Flex button link */

 
/** Call To Action **/ 
.cta > .item,
.cta > .item:hover
{
	background-color:transparent;
	box-shadow: unset;
  	font-weight: bold;
}

.cta > .item.button{ 
    text-align: right;
    max-width: 50px;
}
  
p.cta { 
  	/*height: 100px;*/
    line-height: 100px;
    text-align: center; 
}

/** End Call To Action **/


/** Readmore link / action button **/
.readmore
	{
	color:var(--main-lightColor);
    background-color: var(--main-secondary-color);
    border-radius: 15px;
    padding: 1px 15px;
    font-weight: bold;
    font-size: smaller;
    text-decoration: none !important;
    display:inline-block;
   	/*   
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
     */
	}
.readmore:hover{
	color:var(--main-lightColor);
  	background-color: var(--main-secondary-color);
	-moz-box-shadow: var(--main-box-shadow);
	-webkit-box-shadow: var(--main-box-shadow);
	-o-box-shadow: var(--main-box-shadow);
	box-shadow: var(--main-box-shadow);
	transform: scale(1.01); 
}
  
.readmore.cta{
    font-size: xxx-large;
    /*display: unset;*/
}

.aspointer{
 	cursor: pointer;
}
/** Readmore link / action button **/


/** Block color **/
.promoted{
  	background-color:var(--main-lightGrey); 
	color:var(--text-color-fixe);
    margin: 20px 5px;
  	padding:20px;
  	border-radius: 5px;
}


.focus{
  	color:var(--main-darkGrey);
	line-height: 2.1em;
    font-size: 1.3em;
    font-weight: bold;
}

.teaser{
	background-color:var(--main-darkGrey);
	color:var(--main-lightColor);
	text-align:center;
}

.bgblue{
 	background-color:var(--main-primary-color) !important;  	
	color:var(--main-lightColor);  
}

.bgtous{	
  	background-color:var(--main-secondary-color) !important;
	color:var(--main-lightColor);  
}
  
.bgfocus{
	background-color:var(--main-third-color) !important;
  	color:var(--main-lightColor);
}

.bgblue h2,
.bgblue h3,
.bgtous h2,
.bgtous h3,
.bgfocus h1,
.bgfocus h2,
.bgfocus h3
  {color:var(--main-lightColor);}

/** End Block color **/
 

/** Blockquote **/ 
/*
blockquote{
	border-radius: 0 5px 5px 0;
  	border-left: 5px solid var(--main-third-color) ;
	font-size: 1.25em ;
	font-style: italic;
	line-height: 1.8em;
	padding: 1em 2em;
	background-color: var(--main-lightGrey);
  }
*/


blockquote{
  	color:var(--text-color-fixe);
	font-style: italic;
  	border-radius: 0 5px 5px 0;
  	font-size: 1.25em ;
	font-style: italic;
    width:90%;
    margin:40px auto;
    padding:1.2em 30px 1.2em 75px;
    border-left:8px solid var(--main-third-color) ;
    line-height:1.6;
    position: relative;
    background-color: var(--main-lightGrey);
}

blockquote::before{
  font-family:Arial;
  content: "\201C";
  color:var(--main-third-color);
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}
/*
blockquote cite{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}
*/


/*
blockquote::before {
  content: open-quote;
  margin-left: -1.5em;
}

blockquote::after {
  content: close-quote; 
}

blockquote{	
quotes : "« " " »" '"' '"';
}
*/

  
blockquote > footer{background-color:unset;text-align:right; color:var(--main-darkGrey);} 
blockquote > footer a{ color:var(--main-primary-color);}
blockquote > footer a:hover{ color:var(--main-secondary-color); }  

blockquote > cite {
    text-align: right;
    display: block;
    color: var(--main-darkGrey);
    font-weight: bold;
    font-size: smaller;
}
  
q { 
  quotes : "« " " »" '"' '"';
}

@media (min-width: 769px)
	{
    .fullwidth {
    	margin-left: -40px;
		margin-right: -40px;
      	padding-left: 45px;
    	padding-right: 45px;
    	border-radius: 0;
	}
}

/** Blockquote **/ 



/***** Contact form ****/
.contact h3{ margin-bottom: 0;}
.contact h3.adresse {
	background-image: url(../file/source/icones/adresse.png);
	background-repeat: no-repeat;
	background-size: 100%;
  	/*background-position: 20px 0px;*/	
}
.contact h3.telephone {
	background-image: url(../file/source/icones/telephone.png);
	background-repeat: no-repeat;
	background-size: 100%;
  	/*background-position: 20px 0px;*/	
}
.contact h3.mail{
	background-image: url(../file/source/icones/mail.png);
	background-repeat: no-repeat;
	background-size: 100%;
  	/*background-position: 20px 0px;*/	
}

.contact p{ margin-top: 0;}
  
/*** End Contact form ****/

/** Global **/
.bottom{
	
}
/** End Global **/ 



/**** Search form ***/

/**** End Search form ***/