@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%;
																							  font:inherit; vertical-align:baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section		{ display:block; }
body																						{ line-height:1; }
ol, ul																						{ list-style:none; }
blockquote, q																				{ quotes:none; }
blockquote:before, blockquote:after, q:before, q:after										{ content:''; content:none; }
table																						{ border-collapse:collapse; border-spacing:0; }

body			{ background:#FFF; margin:8px; font-family:arial, sans-serif; }

/* Initialisation du frame */
#cont			{ width:100%; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; }
#gauche			{ width:auto; height:auto; margin:0; padding:0; }
#droite			{ width:auto; height:auto; padding-bottom:10px; }
#gauchemob		{ width:auto; height:auto; margin:0; padding:10px 0 0 0; }
#baniere		{ width:100%; border-bottom:1px solid #999; margin-bottom:10px; }
.mess			{ padding:8px; margin:0 0 25px 0; background-color:#FFFFFF; border:1px solid #CCCCCC; font-size:0.90rem; line-height:1.25rem; }
.error			{ padding:8px; margin:0 0 25px 0; background-color:#FFF3F3; border:1px solid #DF3F3F; font-size:0.90rem; line-height:1.25rem; }
.valid			{ padding:8px; margin:0 0 25px 0; background-color:#F1F7EA; border:1px solid #8db863; font-size:0.90rem; line-height:1.25rem; }
p .form			{ font-size:0.90rem; line-height:1.25rem; font-weight:bold; }
.surligne		{ background-color:#FF9; }
input, textarea, select, option { padding:3px; border:1px solid #F5C5C5; border-radius:5px; box-shadow:1px 1px 2px #C0C0C0 inset; font-size:0.90rem; }
select							{ margin-top:0; }
input[type=submit]				{ width:100px; margin-left:5px; box-shadow:1px 1px 1px #D83F3D; cursor:pointer; font-size:1rem; }
a				{ text-decoration:none; }
a:link			{ color:#009; text-decoration:none; }
a:visited		{ color:#009; text-decoration:none; }
a:active		{ color:#000; text-decoration:none; }
a:hover			{ color:#F00; text-decoration:none; }
.ga				{ text-align: left ; }
.dr 			{ text-align:right ; }
.ce 			{ text-align:center ; }
.ju 			{ text-align:justify ; }
.top 			{ vertical-align:top ; }
.mid 			{ vertical-align:middle ; }
.bot 			{ vertical-align:bottom ; }
.bb-gr 			{ border-bottom:1px solid #F2F2F2 ; }
.bd-gr 			{ border-right:1px solid #F2F2F2 ; }
.bh-gr 			{ border-top:1px solid #F2F2F2 ; }
.bg-gr 			{ border-left:1px solid #F2F2F2 ; }
.bb-gf 			{ border-bottom:1px solid #666666 ; }
.bd-gf 			{ border-right:1px solid #666666 ; }
.bh-gf 			{ border-top:1px solid #666666 ; }
.bg-gf 			{ border-left:1px solid #666666 ; }
.ro 			{ color:#F00 ; }
.bol			{ font-weight:bold ; }
tr:hover.hover	{ background-color:#F9F9F9; }

/*######################################## MODE DÉVELOPPEMENT ########################################*/
#surf 			{ height:40px; width:100%; text-align:center; font-weight:bold; color:red; font-size:1.5rem; }
#surf p::after	{ content:"Jusque 320px de large"; }

/* iPhone 4 and 4S Portrait et paysage */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)
{
  #surf p::after { content:"iPhone 4 et 4s"; }
}

/* iPhone 4 and 4S Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)
{
  #surf p::after { content:"iPhone 4 et 4s portrait"; }
}

/* iPhone 4 and 4S Paysage */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)
{
  #surf p::after { content:"iPhone 4 et 4s paysage"; }
}

/* iPhone 5 and 5S Portrait et paysage */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)
{
  #surf p::after { content:"iPhone 5 et 5s"; }
}

/* iPhone 5 and 5S Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)
{
  #surf p::after { content:"iPhone 5 et 5s portrait"; }
}

/* iPhone 5 and 5S Paysage */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)
{
  #surf p::after { content:"iPhone 5 et 5s paysage"; }
}

/* Galaxy S3 Portrait et paysage */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)
{
  #surf p::after { content:"Galaxy S3"; }
}

/* Galaxy S3 Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)
{
  #surf p::after { content:"Galaxy S3 portrait"; }
}

/* Galaxy S3 Paysage */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)
{
  #surf p::after { content:"Galaxy S3 paysage"; }
}

/* Galaxy S4 Portrait et paysage */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
{
  #surf p::after { content:"Galaxy S4"; }
}

/* Galaxy S4 Portrait */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)
{
  #surf p::after { content:"Galaxy S4 portrait"; }
}

/* Galaxy S4 Paysage */
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)
{
  #surf p::after { content:"Galaxy S4 paysage"; }
}

/* Écran 320 à 480 pix */
@media only screen and (min-width:320px)
{
  #cont			{ width:100%; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; }
  #gauche		{ display:none; }
  #droite		{ height:auto; padding:0; display:block; border-bottom:1px solid #E3EDD5; }
  #gauchemob	{ width:auto; height:auto; margin:0; padding:10px 0 0 0; display:block; }
  #droite_pt	{ display:block; }
  #droite_pm	{ display:none; }
  #droite_my	{ display:none; }
  #droite_gd	{ display:none; }

  #surf p::after { content:"320 to 480px";}
}

/* Galaxy S5 Portrait et paysage */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
{
  #surf p::after { content:"Galaxy S5 et HTC One"; }
}

/* Galaxy S5 Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)
{
  #surf p::after { content:"Galaxy S5 et HTC One portrait"; }
}

/* Galaxy S5 Paysage */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)
{
  #surf p::after { content:"Galaxy S5 et HTC One paysage"; }
}

/* iPhone 6 Portrait et paysage */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2)
{
  #surf p::after { content:"iPhone 6 et 6s"; }
}

/* iPhone 6 Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)
{
  #surf p::after { content:"iPhone 6 et 6s portrait"; }
}

/* iPhone 6 Paysage */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)
{
  #surf p::after { content:"iPhone 6 et 6s paysage"; }
}

/* iPhone 6+ Portrait et paysage */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)
{
  #surf p::after { content:"iPhone 6 plus"; }
}

/* iPhone 6+ Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)
{
  #surf p::after { content:"iPhone 6 plus portrait"; }
}

/* iPhone 6+ Paysage */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape)
{
  #surf p::after { content:"iPhone 6 plus paysage"; }
}

/* Écran 480 à 768 pix */
@media only screen and (min-width:480px)
{
  #cont			{ width:100%; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; }
  #gauche		{ display:none; }
  #droite		{ height:auto; padding:0; display:block; border-bottom:1px solid #E3EDD5; }
  #gauchemob	{ width:auto; height:auto; margin:0; padding:10px 0 0 0; display:block; }
  #droite_pt	{ display:none; }
  #droite_pm	{ display:block; }
  #droite_my	{ display:none; }
  #droite_gd	{ display:none; }

  #surf p::after { content:"480 to 768px"; }
}

/* Asus Nexus 7 Portrait et paysage */
@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)
{
  #surf p::after { content:"Asus Nexus 7"; }
}

/* Asus Nexus 7 Portrait */
@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: portrait)
{
  #surf p::after { content:"Asus Nexus 7 portrait"; }
}

/* Asus Nexus 7 Paysage */
@media screen and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) and (orientation: landscape)
{
  #surf p::after { content:"Asus Nexus 7 paysage"; }
}

/* iPad mini, iPad 1 et 2 Portrait et paysage */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)
{
  #surf p::after { content:"iPad mini, 1 et 2"; }
}

/* iPad mini, iPad 1 et 2 Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)
{
  #surf p::after { content:"iPad mini, 1 et 2 portrait"; }
}

/* iPad mini, iPad 1 et 2 Paysage */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1)
{
  #surf p::after { content:"iPad mini, 1 et 2 paysage"; }
}

/* iPad 3 et 4 Portrait et paysage */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
{
  #surf p::after { content:"iPad 3 et 4"; }
}

/* iPad 3 et 4 Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)
{
  #surf p::after { content:"iPad 3 et 4 portrait"; }
}

/* iPad 3 et 4 Paysage */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)
{
  #surf p::after { content:"iPad 3 et 4 paysage"; }
}

/* Écran 768 à 980 pix */
@media only screen and (min-width:768px)
{
  #cont			{ width:100%; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; }
  #gauche		{ width:305px; height:auto; float:left; margin:0; padding:0 5px 0 0; display:block; }
  #droite		{ height:auto; overflow:hidden; padding:0 10px 0 10px; display:block; border-bottom:none; }
  #gauchemob	{ display:none; }
  #droite_pt	{ display:none; }
  #droite_pm	{ display:none; }
  #droite_my	{ display:block; }
  #droite_gd	{ display:none; }

  #surf p::after { content:"768 to 980px"; }
}

/* Galaxy Tab 10.1 Portrait and Landscape */
@media (min-device-width: 800px) and (max-device-width: 1280px)
{
  #surf p::after { content:"Galaxy Tab 10.1"; }
}

/* Galaxy Tab 10.1 Portrait */
@media (max-device-width: 800px) and (orientation: portrait)
{
  #cont			{ width:100%; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; }
  #gauche		{ display:none; }
  #droite		{ height:auto; padding:0; border-bottom:1px solid #E3EDD5; display:block; }
  #gauchemob	{ width:auto; height:auto; margin:0; padding:10px 0 0 0; display:block; }
  #droite_pt	{ display:none; }
  #droite_pm	{ display:block; }
  #droite_my	{ display:none; }
  #droite_gd	{ display:none; }

  #surf p::after { content:"Galaxy Tab 10.1 portrait";}
}

/* Kindle Fire HD 7" Portrait et paysage */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5)
{
  #surf p::after { content:"Kindle Fire HD 7"; }
}

/* Kindle Fire HD 7" Portrait */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait)
{
  #surf p::after { content:"Kindle Fire HD 7 portrait"; }
}

/* Kindle Fire HD 7" Paysage */
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape)
{
  #surf p::after { content:"Kindle Fire HD 7 paysage"; }
}

/* Écran 980 à 1024 pix */
@media only screen and (min-width:980px)
{
  #cont			{ width:960px; min-height:250px; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; display:block; }
  #gauche		{ width:305px; height:auto; float:left; margin:0; padding:0 5px 0 0; display:block; }
  #droite		{ height:auto; overflow:hidden; padding:0 10px 0 10px; display:block; border-bottom:none; }
  #gauchemob	{ display:none; }
  #droite_pt	{ display:none; }
  #droite_pm	{ display:none; }
  #droite_my	{ display:none; }
  #droite_gd	{ display:block; }

  #surf p::after { content:"980 to 1024px"; }
}

/* Écran plus de 1024 pix */
@media only screen and (min-width:1024px)
{
  #cont			{ width:960px; min-height:250px; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; display:block; }
  #gauche		{ width:305px; height:auto; float:left; margin:0; padding-right:5px; display:block; }
  #droite		{ height:auto; overflow:hidden; padding:0 0 0 10px; display:block; border-bottom:none; }
  #gauchemob	{ display:none; }
  #droite_pt	{ display:none; }
  #droite_pm	{ display:none; }
  #droite_my	{ display:none; }
  #droite_gd	{ display:block; }

  #surf p::after { content:"1024px et plus"; }
}

/* Kindle Fire HD 8.9" Portrait et paysage */
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5)
{
  #surf p::after { content:"Kindle Fire HD 8,9"; }
}

/* Kindle Fire HD 8.9" Portrait */
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: portrait)
{
  #surf p::after { content:"Kindle Fire HD 8,9 portrait"; }
}

/* Kindle Fire HD 8.9" Paysage */
@media only screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation: landscape)
{
  #surf p::after { content:"Kindle Fire HD 8,9 paysage"; }
}

/* ----------- Écrans non Retina ----------- MacBook */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1)
{
  #cont			{ width:960px; min-height:250px; margin:0 auto; padding:0; overflow:hidden; background-color:#FFF; display:block; }
  #gauche		{ width:305px; height:auto; float:left; margin:0; padding:0 5px 0 0; display:block; }
  #droite		{ height:auto; overflow:hidden; padding:0 0 0 10px; display:block; border-bottom:none; }
  #gauchemob	{ display:none; }
  #droite_pt	{ display:none; }
  #droite_pm	{ display:none; }
  #droite_my	{ display:none; }
  #droite_gd	{ display:block; }

  #surf p::after { content:"Ecrans non Retina"; }
}

/* ----------- Écrans Retina ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)
{
  #surf p::after { content:"Ecrans Retina"; }
}

/* Galaxy Tab 10.1 Landscape */
@media (max-device-width: 1280px) and (orientation: landscape)
{
  surf p::after { content:"Galaxy Tab 10.1 paysage"; }
}