/* reset */
body, html, p, ul, li, h1, h2, h3, h4 { margin: 0; padding: 0; font-weight: normal; }
a img 			{ border: none; }
* { margin: 0; padding: 0;}
header, nav, footer, figure, section, figcaption, article, .site-content {
    display	: block;
	margin	: 0;
	padding	: 0;
	/*position: relative;*/
}

/************************************************/
/*				Sections génériques				*/
/************************************************/
.site-width { width : 900px; }
.pos-center { margin-left: auto; margin-right: auto; }

/* pour le maintient du pied de page en bas */
html, body { height: 100%; }
footer[role="contentinfo"] {
    height            : 50px;
    margin-top        : -50px;
    position          : relative;
}
.site-content {
    min-height  : calc(100% - 110px - 4.375rem - 4.375rem);
}
.site-content:last-child {
    padding-bottom: 50px;
}
/* pour la largeur max du site avec centrage des contenus */
body, footer[role="contentinfo"], .site-content  {
    text-align      :center;
}
header[role="banner"], .site-content > *, footer[role="contentinfo"] > * {
    max-width   : 970px;
    margin      : 0 auto;
    text-align  : justify;
}
header[role="banner"] { width: 970px; }


/* couleur de texte global sur le site */
body 		{ background-color: #fff; font-family : arial, sans-serif; }
body, a, .box-bubble 	{ color : #6a6a6b; }
a:hover 		{ text-decoration: underline; }
a 			{ color: #b3d4fc; text-decoration: none; transition : .3s; }

/* pour la police spécial Trade Gothic */
.home-page h1, .home-page header,
.global-page h1, .global-page header,
footer[role="contentinfo"] p, footer[role="contentinfo"] a,
.box-bubble,
.form article > header, .form label, .form .submit {
    font-family: "Trade Gothic W01 Bold";
}


/************************************************/
/*				Sections spécifiques			*/
/************************************************/
header[role="banner"] { display: table; }
header[role="banner"] > * { display: table-cell; vertical-align: middle; }
header[role="banner"] .logo {
	width			: 324px;
    height          : 82px;

}
footer[role="contentinfo"] {
    background-color  : #6a6a6b;
}
footer[role="contentinfo"] p, footer[role="contentinfo"] a {
	color		: #fff;
    font-size: .750rem;
    text-transform:uppercase;
    text-align: left;
}
footer[role="contentinfo"] a {
    display: inline-block;
    line-height: 50px;
}
footer[role="contentinfo"] a:hover {
    color: #b3d4fc;
    text-decoration: none;
}
footer[role="contentinfo"] .logo {
    width: 73px;
}
footer[role="contentinfo"] .logo img {
    position: absolute;
    top: 0;
}

.site-content > *:not(article):not(section),
.site-content > article > *:not(aside), .site-content > article > aside > *,
footer[role="contentinfo"] p > * {
    margin: 0 15px;
}

/* pour la zone centrale */
.site-content:not(.quickmode) {
    border-top   : 5px solid #b3d4fc;
    margin-top: 5px;
    padding-top: 4.375rem;
    padding-bottom: 4.375rem;
}

.home-page article, .global-page article {
    font-size: 1.875em;
    text-align: justify;
}
.home-page h1, .global-page header, .global-page h1 {
    font-size: 2.5rem;
}
.global-page article {
    font-size: .875rem;
}
.global-page header, .global-page h1, .global-page h2, .global-page h3 {
    border-bottom: 3px solid #b3d4fc;
    line-height: 3.5rem;
    margin-bottom: 2rem!important;
}
.global-page h2 {
    line-height: 2.5rem;
    margin-bottom: 1.5rem!important;
}
.global-page h3 {
    line-height: 1.5rem;
    margin-bottom: 1rem!important;
}
.global-page article p + p {
    margin-top: .50rem;
    margin-bottom: .50rem;
}

/* pour le design multi-colonnes */

.global-page .cols-2 article > div,
.form-page > section:not(.result) {
    /* pour le nombre de colonnes */
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    /* pour l'espace entre les colonnes */
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
    /* pour la largeur d'une colonne */
    -webkit-column-width: 455px;
    -moz-column-width: 455px;
    column-width: 455px;
}

/* page formulaire */
.form-page > article:first-child > * {
    display: table-cell;
    vertical-align: top;
    border: 15px solid white;
}
.form-page > article:first-child h1 {
    font-size: 2.5rem;
}
.form-page > article:first-child + section {
    margin-top: 40px;
}

/************************************************************/
/*		        	for bubble box							*/
/************************************************************/
.box-container {
    font-size: 0!important;
    letter-spacing: 0;
    word-spacing: 0;
    text-align:center!important;
}
.box-bubble {
    text-align: center;
    height: 370px;
    line-height: 370px;
    width: calc(50% - 30px); /* on essaye d'en afficher 2 moins les marges */
    font-size: 3.125rem;
    background-color: #b3d4fc;
    display:inline-block;
    position: relative;
    margin-top: 15px!important;
    margin-bottom: 70px!important;
    text-transform: uppercase;
    vertical-align: middle!important
}
.box-bubble:hover {
    color: #fff;
}
.box-bubble > * {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
.box-bubble.calc, .box-bubble.down {
    background-repeat: no-repeat;
    background-position: center;
}
.box-bubble.calc {
    background-image: url(../img/picto-calc.svg);
}
.box-bubble.down {
    background-image: url(../img/picto-down.svg);
}
.box-bubble:after {
    background: url(../img/picto-bubble-bottom-left.svg) no-repeat 33% bottom;
    content: "";
    width: 92px;
    height: 70px;
    position: absolute;
    bottom: -20px;
    right: 23%;
}
.box-bubble:nth-child(even):after {
    background-image: url(../img/picto-bubble-bottom-right.svg);
}

.box-bubble.small {
    width: 132px;
    height: 110px;
    line-height: 110px;
    font-size: .9rem;
    background-size: 38%;
    cursor: default;
}
.box-bubble.small:after {
    background-size:38%;
    right: 0%;
}
.box-bubble.center {
    margin-left: auto;
    margin-right: auto;
}

/************************************************************/
/*			for responsive design							*/
/************************************************************/
@media all and (max-width: 970px) {
    header[role="banner"], header[role="banner"] > * {
        display: block!important;
        text-align: center!important;
        margin: 0 auto!important;
        max-width: 100%;
    }
    header[role="banner"] .logo {
        padding-top: 15px;
    }
}

/* pour les iphones 4 (640px) */
@media all and (max-width: 700px) {
    .box-bubble {
        height: 300px;
        line-height: 300px;
        font-size: 2.2rem;
    }
}
/* pour les galaxy s2 */
@media all and (max-width: 480px) {
    .box-bubble {
        font-size: 1.5rem;
        background-size: 50%;
        height: 200px;
        line-height: 200px;
    }
    .home-page article, .global-page article {
        font-size: 1.575rem;
    }
}