/*
** @author :
* A. Librairies (CSS reset...)
* B. Styles generaux (declarations defaut des Hx, strong)
* C. Styles helpers (margins, paddings, txtX)
* D. Structure principal (#page, #main, #menu, #nav...)
* E. Contenus (listes ul.listPuce, .mea, dataArray...)
* F. Blocs conteneurs + structure contenu (line, unit, .block, .blockSimple....)
* G. Custom (blocks spécifiques, contenus vraiment spécifiques à une page, non reutilisable ailleurs)
* H. Fixs class for navigators (corners)
* I. Classes spécifiques (lecteurs d'écran, javascript...)
*/
/****
* A. Librairies (CSS reset...)
****/
a { text-decoration:none;}
html,body,span, applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, dd,dl,dt,li,ol,ul, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;line-height:1.3em;font-family:inherit;text-align:inherit;vertical-align:baseline;}
a img,:link img,:visited img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
q:before,q:after, blockquote:before,blockquote:after{content:"";}
strong,h1,h2,h3,h4,h5,h6 {font-weight:bold;}
em{font-style:italic;}
input, textarea, select {font-size:99%}
/****
* B. Styles generaux (declarations defaut des Hx, strong, a (liens) )
****/
body {font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#343434;}
hauteur du font-size est de 16px sur IE et FF, pour avoir un font-size relatif, il suffit de faire une division et indiquer le pourcentage correspondant */
a { cursor:pointer;}
h2 {font-size:26px; color:#002D61; font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
h2.dispatch {font-size:20px; color:#002D61; font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
h2 strong {font-size:22px; color:#68c1e4; font-weight:100; font-style:italic;}
h3 {font-size:12px; color:#406786; font-weight:normal;}
h3.dispatch {font-size:14px; color:#002D61; font-family: Arial, Helvetica, sans-serif; font-weight:bold;}
h4 {font-size:11px; color:#668798;}
h4 strong {color:#68c1e4; }
h5 {font-size:15px; color:#68c1e4; font-weight:bold; font-style:italic;}
h6 {font-size:14px; font-weight:bold; color:#68C1E4;}
p {margin:4px 0;}
.italic{font-style:italic;}
/* contenus et separateurs */
.highLight {color:#A45255;}
.bold {font-weight:bold;}
.mentionsLegales {font-style:italic; }
.mentionsLegales .mentionsContent {overflow:hidden; width:100%}
.noBrd {border:0 !important}
.sep {border-top:1px solid #ccc}
.sepV {border-left:1px solid #ccc}
.centered {margin-left:auto; margin-right:auto}
/****
* C. Styles helpers (margins, paddings, txtX)
****/
/* alignement (vertical-align, text-align */
.txtL{text-align:left !important;}
.txtC{text-align:center !important;}
.txtR{text-align:right !important;}
.txtT{vertical-align:top !important;}
.txtM{vertical-align:middle !important;}
.txtB{vertical-align:bottom !important;}
/* positionnement flottant */
.floatL{float:left;}
.floatR{float:right;}
.clear {clear:both;}
.context {overflow:hidden; _overflow:visible; zoom:1}
.contextSpecial { zoom:1}
.contextSpecial:after {content:" "; clear:both; height:0;}
.center{margin:0 auto;}
/* fullWidth (force une image ou un flash à prendre toute la largeur de son conteneur, cela evite de devoir calculer au pixel près la largeur d'une image. Utilisation : ) */
.fullImg img {width:100%; display:block;}
.mediaSplit img, .mediaSplit object, .mediaSplit embed{width:100%; display:block; vertical-align:top;}
/* marges des blocs */
.Vspace, .Tspace {margin-top:7px !important}
.Vspace, .Bspace {margin-bottom:7px !important}
.Mspace {margin:7px 10px 50px 0;}
.MspaceOnly {margin:7px 10px 0px 20px;}
.MBspace {margin-bottom:50px;}
.home .block .Vspace, .home .block .Tspace {margin-top:6px !important}
.home .block .Vspace, .home .block .Bspace {margin-bottom:6px !important}
/* margins pour les contenus */
.marginSm {margin:5px !important}
.margin{margin:10px !important}
.marginLg {margin:20px !important}
.VmarginSm, .TmarginSm {margin-top:5px !important} .VmarginSm, .BmarginSm {margin-bottom:5px !important} .HmarginSm, .LmarginSm {margin-left:5px !important} .HmarginSm, .RmarginSm {margin-right:5px !important}
.Vmargin, .Tmargin {margin-top:10px !important} .Vmargin, .Bmargin {margin-bottom:10px !important} .Hmargin, .Lmargin {margin-left:10px !important} .Hmargin, .Rmargin {margin-right:10px !important}
.VmarginLg, .TmarginLg {margin-top:20px !important} .VmarginLg, .BmarginLg {margin-bottom:20px !important} .HmarginLg, .LmarginLg {margin-left:20px !important} .HmarginLg, .RmarginLg {margin-right:20px !important}
.LmarginxLg {margin-left:40px !important}
/* paddings pour les contenus */
.paddingSm {padding:5px !important}
.padding{padding:10px !important}
.paddingLg {padding:20px !important}
.VpaddingSm, .TpaddingSm {padding-top:5px !important} .VpaddingSm, .BpaddingSm {padding-bottom:5px !important} .HpaddingSm, .LpaddingSm {padding-left:5px !important} .HpaddingSm, .RpaddingSm {padding-right:5px !important}
.Vpadding, .Tpadding {padding-top:10px !important} .Vpadding, .Bpadding {padding-bottom:10px !important} .Hpadding, .Lpadding {padding-left:10px !important} .Hpadding,
.Rpadding {padding-right:10px !important}
.VpaddingLg, .TpaddingLg {padding-top:20px !important} .VpaddingLg, .BpaddingLg {padding-bottom:20px !important} .HpaddingLg, .LpaddingLg {padding-left:20px !important} .HpaddingLg, .RpaddingLg {padding-right:20px !important}
.NOpadding {padding:0 !important;}
/*****
D. Structure principal (#page, #main, #menu, #nav...)
****/
#page {width:839px; margin:5px auto; text-align:left;zoom:1;position:relative; }
#main {text-align:left; overflow:hidden; _overflow:visible; zoom:1; position:relative;}
#body {zoom:1; overflow:auto;position:relative; font-size:11px; font-weight:normal; height:551px;background:#fff url(../img/fond_home.jpg) top left repeat-y;}
#bodyInterne {zoom:1; overflow:auto;position:relative; font-size:11px; font-weight:normal; height:490px; background-color:#FFF; padding:30px 15px; border-bottom:4px solid #F20675;}
#header{overflow:hidden; _overflow:visible; zoom:1;background:#fff url(../img/head_illus.png); position:relative; height:131px;}
#foot{margin:5px auto; width:839px; text-align:right;}
#foot li{list-style:none; margin-top:8px; padding-left:6px; padding-right:6px; display:inline; border-left:1px solid #FFFFFF; }
#foot li a{ color:#fff;}
.navN1{margin:5px auto; width:839px; text-align:left; position:absolute; top:109px; left:6px;}
.navN1 li{list-style:none; margin-top:8px; padding-left:6px; padding-right:6px; display:inline; border-left:1px solid #FFFFFF; }
.navN1 li a{ color:#fff;}
.navN1 li.Noborder{border:0;}
/* nav */
#nav {position:absolute; top:75px; width:839px;}
#nav li a{zoom:1; display:block;}
#nav li{display:block; margin-top:74px;}
#nav li a.illus{ background:url(../img/illustration.png) no-repeat top left; height:60px; text-indent:-5000px;}
#nav li a.web{ background:url(../img/web_design.png) no-repeat top left; height:60px; text-indent:-5000px;}
#nav li a.print{ background:url(../img/print.png) no-repeat top left; height:60px; text-indent:-5000px;}
#nav li a.illus:hover { background:url(../img/illustration_roll.png) no-repeat top left !important; height:60px; text-indent:-5000px;}
#nav li a.web:hover{ background:url(../img/web_design_roll.png) no-repeat top left !important; height:60px; text-indent:-5000px;}
#nav li a.print:hover{ background:url(../img/print_roll.png) no-repeat top left !important; height:60px; text-indent:-5000px;}
.bigImage{ text-align:center;}
.bigImage img{ margin-bottom:15px;}
/****
* B. Btn
ceci est un bouton
****/
.btn, .btn strong {display:-moz-inline-box; display:inline-block; background:url(skin/blocks/btn_fonce.png) no-repeat left top;vertical-align:middle;cursor:pointer;}
.btn {_width:1%;white-space:nowrap;padding-left:6px;color:#fff;}
.btn strong {display:block;background-position:right top;padding-right:6px; line-height:16px; height:16px; font-size:10px;}
.btn strong input{font-family:Verdana; font-size:1em; border:0; overflow:visible; padding:0; background:none;color:#fff;line-height:14px; vertical-align:middle; font-weight:bold;cursor:pointer;}
button.empty {border:0;padding:0;background:none;cursor:pointer;}
.btnClair, .btnClair strong {background-image:url(skin/blocks/btn_clair.png); line-height:13px; font-size:0.95em;}
.btnClair strong {line-height:16px;}
.btnPlatClair, .btnPlatClair strong {background-image:url(skin/blocks/btn_blue.png);line-height:14px;height:14px; }
.btnPlatFonce, .btnPlatFonce strong {background-image:url(skin/blocks/btn_plat_fonce.png);line-height:14px;height:14px;}
.btnArrowW, .btnArrowW strong {background-image:url(skin/blocks/btn_arrow_white.png); color:#002D61; line-height:13px;}
.btnArrowB, .btnArrowB strong {background-image:url(skin/blocks/btn_arrow_blue.png);line-height:12px;height:14px;}
.btnBlanc, .btnBlanc strong {background-image:url(skin/blocks/btn_blanc.png); color:#002D61; line-height:14px; }
.btnNav, .btnNav strong {background-image:url(skin/default/btn_nav.png); color:#67AECF; text-transform:uppercase; }
.btn2lines, .btn2lines strong {background-image:url(skin/blocks/btn_fonce_deu_ligne.png); line-height:1.1em;}
.btn2lines strong {height:31px;padding-top:4px; }
.btnClair2lines, .btnClair2lines strong {background-image:url(skin/btn_clair_deux_lignes.png); line-height:32px; font-size:0.95em;}
.btnClair2lines strong {line-height:16px;}
.btnPlatClair2lines, .btnPlatClair2lines strong {background-image:url(skin/btn_blue_deux_lignes.png);line-height:14px;height:32px; text-transform:uppercase;}
.btnPlatFonce2lines, .btnPlatFonce2lines strong {background-image:url(skin/btn_plat_fonce_deux_lignes.png);line-height:14px;height:32px;}
.btnArrowW2lines, .btnArrowW2lines strong {background-image:url(skin/btn_arrow_white_deux_lignes.png); color:#002D61; line-height:13px; height:32px;}
.btnArrowB2lines, .btnArrowB2lines strong {background-image:url(skin/btn_arrow_blue_deux_lignes.png);line-height:12px;height:32px;}
.btnBlanc2lines, .btnBlanc2lines strong {background-image:url(skin/btn_blanc_deux_lignes.png); color:#002D61; line-height:32px; }
.btnBlock {display:block; width:auto;}
/****
* F. Blocs conteneurs + structure contenu (line, unit, .block, .blockSimple....)
****/
/* line, unit */
.line, .lastunit {overflow: hidden; _overflow: visible; zoom:1; margin:0; padding:0; display:block; }
.unit{float:left;margin-right:10px; zoom:1;}
.size1on1{float:none !important;margin-right:0; width:auto}
.sizeEnbref{width:60%!important;}
.sizeLaMarque{width:76%!important;}
.size1on2{width:49%!important;}
.sizeForm{ width:47%!important;}
.size1on3{width:32.3%!important;}
.size2on3{width:66%!important;}
.size1on4{width:23.8%!important;}
.size3on4{width:74.8%!important;}
.size1on5{width:18.8%!important;}
.size2on5{width:39%!important;}
.size3on5{width:58%!important;}
.size4on5{width:78%!important;}
.sizeDesigner{width:38%!important;}
.sizeRetail{float:none; width:32.3%!important;}
.lastunit {float:none;width:auto !important; margin-right:0; _margin-right:-3px; _position:relative; _left:-3px;}
/****
* B. Blocks
****/
/* ** block structure -- */
.block{overflow:hidden; zoom:1; position:relative;}
.blockInside{position:relative; zoom:1; background:#fff; clear:both;}
.body, .foot {overflow:hidden; _overflow:visible; zoom:1;}
.head {overflow:hidden; _overflow:visible; zoom:1; margin:0; background-color:#E2007A; min-height:10px; _height:10px; padding:5px 15px; font-size:14px; font-weight:bold; color:#fff;}
.headBis {overflow:hidden; _overflow:visible; zoom:1; margin:0; background-color:#fff; min-height:25px; padding:10px 0 0 15px; font-size:14px; font-weight:bold; color:#000;}
.headBig {overflow:hidden; _overflow:visible; zoom:1; margin:0; background-color:#E2007A; min-height:25px; padding:10px 0 10px ; font-size:14px; font-weight:bold; color:#fff;}
.headBlue {overflow:hidden; _overflow:visible; zoom:1; margin:0; background-color:#48c6ed; min-height:25px; padding:10px 0 0 15px; font-size:14px; font-weight:bold; color:#fff;}
.headBlueBig {overflow:hidden; _overflow:visible; zoom:1; margin:0; background-color:#48c6ed; min-height:25px; padding:10px 0 10px 0; font-size:14px; font-weight:bold; color:#fff;}
/*
Corners (coins arrondis) :
Les coins sont generes avant et apres blockInside, ils sont contenus dans .topCorners et .bottomCorners
Ensuite il faut utiliser une marge negative (bottom ou top) pour les mettre par dessus le blocs (une position:relative + z-index les aidant a passer par dessus
*/
b.tl, b.tr, b.bl, b.br{background-repeat:no-repeat; height:0; width:0; font-size:1%; overflow:hidden;position:relative; z-index:10;}
b.tl{background-position: left top;float:left;}
b.tr{background-position: right top;float:right;}
b.bl{background-position: left bottom; float:left;}
b.br{background-position: right bottom; float:right;}
.topCorners, .bottomCorners {display:block;}
/* sides (cotes)
Les sites sont utilisés par les blocs qui ont des cotés avec ombre
*/
.sideT, .sideB {position:relative; z-index:11;background:no-repeat left top; overflow:hidden; _overflow:visible; zoom:1; font-size:1%;display:block;clear:both;}
.sideT .cornerRight, .sideB .cornerRight {float:right;font-size:1%:}
.sideT .cornerRight {background-position:right top;}
.sideB {background-position:left bottom;}
.sideB .cornerRight {background-position:right bottom;}
.sideL, .sideR {float:left; height:32000px; margin-bottom:-32000px;background:repeat-y left top;position:relative; z-index:10;font-size:1px;overflow:hidden;}
.sideR {float:right; background-position:right top;}
/* blockSimple */
.blockSimple .blockInside {border:1px solid #E2007A;}
.blockSimple .tl, .blockSimple .tr, .blockSimple .bl, .blockSimple .br{ background-image:url(skin/blocks/simple_corners.png); height:12px; width:12px;}
.blockSimple .tl,.blockSimple .tr {margin-bottom:-12px;}
.blockSimple .bl,.blockSimple .br {margin-top:-12px;}
.mustHave{ width:200px;}
/****
* toutes les sortes de listes
****/
.vignette{ padding-top:30px;}
.vignette li{ display:-moz-inline-box;display:inline-block;}
.vignette li a{margin-right:3px;display:block;padding:1px;}
.vignette li a:hover{border:1px solid red;padding:0;}
.vignette li a.fleche:hover{border:none;}
