html, body {
margin-top: 0px; margin-left:0px; margin-right:0px; margin-bottom:0px ; height: 100%; width:100% ; font-size : 100%; 
}
table iframe{ width:100%; height:100% }

a.grisouille{ color:#A1A1A1 }
p.grisouille{ color:#A1A1A1 }
p.grisouillemini{ color:#A1A1A1 ; font-size: 0.8rem; font-style:italic }
a.noirot{ color:#000 }
a.violet{ color:#982AB1 }
p.violet{ color:#982AB1; font-size: 0.95rem; font-weight:600 }
a.violet_sslien{ color:#982AB1; text-decoration:none }
a.violet_sslien:hover{ color:#982AB1; text-decoration:underline; }
p.noirot{ color:#000 }
p.noirot_l{ color:#000; font-size:1.1rem; font-weight:bold }
a.white{ color:#FFF }
p.white{ color:#FFF }
.index_txt{ font-size:1.1rem;; font-weight:600; display:inline; color:#999999}
p.recherche{ font-size:15px; font-weight:600; display:inline; color:#000000}
p.ann{ font-size:1rem; font-weight:600; display:inline; color:#666 }
p.red{ color:#FF0000 }
.ui-widget {font-size: 1rem;}
p.grostitre{  font-size: 1.3rem; font-weight:bold ; color:#514E99 }
.msg_err{ background-color:#FFDFDF; padding:15; width:90%; max-width: 500 }
.msg_ok{ background-color:#DDFFDD; padding:15; width:90%; max-width: 500 }
.msg_avt{ background-color:#FFDDBB; padding:15; width:90%; max-width: 500 }
a.grisouille_sslien { color:#A1A1A1; text-decoration:none }
a.white_sslien { color:#FFF; text-decoration:none }
a.grisouille_sslien:hover { color:#A1A1A1; text-decoration:underline }
a.noirot_sslien{ color:#000; text-decoration:none }
a.noirot_sslien:hover{ color:#514E99; text-decoration:underline }
a.barre:hover{ text-decoration:underline; }
a.bleu_sslien{ color:#514E99; text-decoration:none }
a.bleu_sslien:hover{ color:#514E99; text-decoration:underline; }
a.anntot_ligne{ color:#514E99; text-decoration:none; font-weight:bold;font-size:1.2rem; margin:0 }
a.anntot_ligne:hover{ color:#514E99; text-decoration:underline; font-weight:bold;font-size:1.2rem; margin:0 }
a.butt{ color:#FFF; background-color:#999; text-decoration:none; padding:2; border-radius:4px; font-size:0.8rem }
a.butt:hover{ color:#FFF; background-color:#666; text-decoration:none; padding:2; border-radius:4px; font-size:0.8rem }
a.bleu_sslien_l{ color:#514E99; text-decoration:none; font-size: 1.1rem }
a.bleu_sslien_l:hover{ color:#514E99; text-decoration:underline; font-size: 1.1rem }
.butt_xl_tdb{ border: none; background-color:#F5F5F5; text-align:left; font-weight:bold; color:#514E99; padding: 0px 0px; font-size: 1.3rem; cursor: pointer  }

.butt_l_b{ background-color: #514E99; border: none; color: white; padding: 12px 16px; font-size: 1.1rem; cursor: pointer; text-decoration:none; }
.butt_l_b:hover{ background-color: #999; border: none; color: white; padding: 12px 16px; font-size: 1.1rem; cursor: pointer; text-decoration:none; }
.butt_s_b{ background-color: #514E99; border: none; color: white; padding: 8px 12px; font-size: 0.9rem; cursor: pointer; text-decoration:none; width:100% }
.butt_s_b:hover{ background-color: #999; border: none; color: white; padding: 8px 12px; font-size: 0.9rem; cursor: pointer; text-decoration:none; width:100%; }
.butt_s_o{ background-color:#ff8d31; border: none; color: white; padding: 8px 12px; font-size: 0.9rem; cursor: pointer; text-decoration:none; width:100% }
.butt_s_o:hover{ background-color: #999; border: none; color: white; padding: 8px 12px; font-size: 0.9rem; cursor: pointer; text-decoration:none; width:100%; }
.butt_xs_b{ background-color: #514E99; border: none; color: white; padding: 6px 10px; font-size: 0.8rem; cursor: pointer; text-decoration:none; width:100% }
.butt_xs_b:hover{ background-color: #999; border: none; color: white; padding: 6px 10px; font-size: 0.8rem; cursor: pointer; text-decoration:none; width:100%; }

.butt_rg_on{background-color:transparent; border:0; cursor:pointer; font-size:1.1rem; font-weight:bold; background-color:#F2DFF7; border-radius:10px; padding:4 }
.butt_rg_of{background-color:transparent; border:0; cursor:pointer; }

a.blue{ color:#514E99; text-decoration:none; font-size:0.95rem; padding:5}
a.blue:hover{ color:#514E99; text-decoration:underline; font-size:0.95rem; ; padding:5 }
h3 { font-size:0.95rem; font-weight:normal }
p,input,textarea,select,td,button { font-family: 'Lato', sans-serif; font-size:0.95rem; }
.tdb { padding:15; background-color:#F5F5F5; min-height:425; margin-left:5; margin-right:5 }

.hauteur{ min-height:500;}

/* Menu ------------------------- */
.topnav { background-color: #982AB1; overflow: hidden; }
/* Style the links inside the navigation bar */
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 12px 16px; text-decoration: none; font-size: 17px; }
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon { display: none; }
/* Dropdown container - needed to position the dropdown content */
.dropdown { float: left; overflow: hidden; }
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 12px 16px; background-color: inherit; font-family: inherit; margin: 0; }
/* Style the dropdown content (hidden by default) */
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; }
/* Style the links inside the dropdown */
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn { background-color: #999; color: white;}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover { background-color: #ddd; color: black; }
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content { display: block; }
/* ------------------------- */

@media screen and (min-width:1000px) and (max-width:1200px) {
.small { font-size:0.75rem; font-weight:normal }
.bloc1, .bloc2 { max-width:1000px ; margin-left:auto; margin-right:auto ;}
.index { width:100% ; height:500 ; margin-left:auto; margin-right:auto; }
.index_cat { width:13.3%; height:125; padding:9; background-color:#FFF; margin:7; float:left; }
.chp1 { width:410px }
.bloc_rech { width:900px }
.chp1bis { width:300px }
.anntot { font-size:1.5rem; display:inline }
.bloc5 { width:163px; }
.bloc6 { margin-left:15px ; width:615 }
.blocmobile {display:none} 
#col1 { float: left; width:20%; margin-top:5;}
#col2 { float: left; width:40% ; margin-left:20; margin-top:5;}
#col3 { float: left; width:36% ; margin-left:15}
#colb1 { float: left; width:63%; padding:5  }
#colb2 { float: left; width:30% ; margin-left:20; border-left:#CCC dotted; padding:15}
.img_anntot { height:300; width:200; border-radius:5px }
.img_anntot_s { height:250; width:180; margin-right:20 ; border-radius:5px }
.img_anntot_l { height:190; width:155; border-radius:5px }
.img_index { height:225 }
.col_item { float: left; width:20% ; height:130; padding:10; margin:14; margin-bottom:20; margin-top:10; border-radius:5px }
.col_ccm1 { float: left; width:39% ; height:220; padding:15; margin-right:15; margin-top:15; margin-bottom:15; background-color:#F5F5F5; border-radius:15px }
.col_ccm2 { float: left; width:53% ; height:220; padding:15; margin-top:15; margin-bottom:15; background-color:#F5F5F5; border-radius:15px }
.barre{ color:#FFFFFF; text-decoration:none; font-size: 1.1rem; display:inline-table; padding:7; margin-top:15; font-family: 'Lato', sans-serif; }
#col1_banniere { float: left; width:28%; margin-top:15; height:40 }
#col2_banniere { float: left; width:72%; text-align:right }
#col1_planning { float: left; width:45%; margin-top:20; margin-left:10; margin-bottom:40; }
#col2_planning { float: left; width:54%; margin-top:40; }
.bottom{ float:left; width:55% ; text-align:left }
.bottom_col2{ float:left; width:40% ; text-align:left; }
.bottomfull{ width:100%; background-color:#383838; height:200; margin:0 }
.anntotl1{ float:left; width:19%; height:100%; padding:10; }
.anntotl2{ float:left; width:51%; padding:10; min-height:170 }
.anntotl3{ float:left; width:21%; padding:10; vertical-align:top }

}
@media screen and (min-width:1200px) {
.small { font-size:0.75rem; font-weight:normal }
.bloc1, .bloc2 { width:1200px; margin-left:auto; margin-right:auto ;}
.index { height:250; margin-left:auto; margin-right:auto; max-width:2000; width:100%; }
.index_cat { width:13.6%; height:125; padding:10; background-color:#FFF; margin:8; float:left; }
.anntot { font-size:1.5rem; display:inline; }
.chp1 { width:410px }
.bloc_rech { width:900px }
.chp1bis { width:300px }
.bloc5 { width:195px; }
.bloc6 { margin-left:30px; width:715; margin-bottom:12 }
.blocmobile {display:none} 
#col1 { float: left; width:19%; margin-top:5; }
#col2 { float: left; width:42% ; margin-left:15; margin-top:5;}
#col3 { float: left; width:36% ; margin-left:15}
#colb1 { float: left; width:65%; padding:5  }
#colb2 { float: left; width:29% ; margin-left:20; border-left:#CCC dotted; padding:15}
.img_anntot { height:325; width:225; ; border-radius:5px }
.img_anntot_s { height:250; width:180; margin-right:45 ; border-radius:5px ; }
.img_anntot_l { height:190; width:155; border-radius:5px }
.img_index { height:225 }
.col_item { float: left; width:20% ; height:115; padding:10; margin:15; margin-bottom:20; margin-top:10; border-radius:5px }
.col_ccm1 { float: left; width:40% ; height:220; padding:15; margin-right:15; margin-top:15; margin-bottom:15; background-color:#F5F5F5; border-radius:15px }
.col_ccm2 { float: left; width:53% ; height:220; padding:15; margin-top:15; margin-bottom:15; background-color:#F5F5F5; border-radius:15px }
.barre{ color:#FFFFFF; text-decoration:none; font-size: 1.1rem; display:inline-block; padding:7; margin-top:15; font-family: 'Lato', sans-serif; }
#col1_banniere { float: left; width:32%; margin-top:15; height:40;}
#col2_banniere { float: left; width:68%; text-align:right }
#col1_planning { float: left; width:38%; margin-top:20; margin-left:10; margin-bottom:40; }
#col2_planning { float: left; width:61%; margin-top:40; }
.bottom{ float:left; width:55% ; text-align:left }
.bottom_col2{ float:left; width:40% ; text-align:left; }
.bottomfull{ width:100%; background-color:#383838; height:200; margin:0 }
.anntotl1{ float:left; width:15%; height:100%; padding:10; }
.anntotl2{ float:left; width:56%; padding:10; min-height:170; }
.anntotl3{ float:left; width:22%; padding:10; vertical-align:top }

}
@media screen and (max-width:1000px) {
.small { font-size:0.75rem; font-weight:normal }
.bloc2, .bloc6 { display:none ; margin-left:auto; margin-right:auto }
.index { width:100% ; height:515; margin-left:auto; margin-right:auto;}
.index_cat { width:21%; height:125; padding:1%; background-color:#FFF; margin:1%; float:left; }
.anntot { font-size:1.2rem; display:inline;}
.bloc1 { width:100%;}
#col1 { width:98%; }
#col2 { width:95%; margin-bottom:25; }
#col3 { width:98%; }
#colb1 { width:95%; margin:15 ; padding-bottom:40 }
#colb2 { width:95% ; margin:15; border-top:#CCC dotted ; padding-top:30;}
.img_anntot { height:275; width:200; ; border-radius:5px }
.img_anntot_s { height:200; margin-bottom:10; width:150; border-radius:5px }
.img_anntot_l { height:170; width:115; border-radius:5px }
.img_index { height:155; width:125 }
#col1_banniere { float: left; width:31%; margin-top:15; height:40 }
#col2_banniere { float: left; width:67%; margin-top:15; margin-right:5; text-align:right }
#col1_planning { float: left; width:95%; margin-left:10; margin-top:20; margin-right:10 }
#col2_planning { float: left; width:95%; margin-left:10; margin-top:20; margin-right:10 }
.bloc4 { display:none }
.bloc_rech { width:410px }
.chp1 { width:380px }
.chp1bis { width:250px }
.chp1bbis { width:120px }
.col_item { float: left; width:21% ; height:160; padding:10; margin:5; margin-bottom:10; margin-top:10; border-radius:5px }
.col_ccm1 { width:90%; max-width:750 ; padding:15; margin-top:15; margin-bottom:15; background-color:#F5F5F5; border-radius:15px }
.col_ccm2 { width:90%; max-width:750 ; padding:15; margin-top:15; background-color:#F5F5F5; border-radius:15px }
.barre{ color:#FFFFFF; text-decoration:none; font-size: 1rem; display:inline-table; padding:5; font-family: 'Lato', sans-serif; }
.bottom{ float:left; width:100% ; text-align:center }
.bottom_col2{ float:left; width:100% ; text-align:center }
.bottomfull{ width:100%; background-color:#383838; height:300; margin:0 }
.anntotl1{ float:left; width:13%; height:100%; padding:10; }
.anntotl2{ float:left; width:54%; padding:10; min-height:180; }
.anntotl3{ float:left; width:24%; padding:10; vertical-align:top }

}

@media screen and (max-width:800px) {
.small { font-size:0.8rem; font-weight:normal }
.index { width:100% ; height:520; margin-left:auto; margin-right:auto;}
.index_cat { width:40%; height:125; padding:2%; background-color:#FFF; margin:3%; float:left; }
#logo_ban { width:180; margin-top:3}
.col_item { width:90% ; height:70; padding:10; margin-bottom:10; margin-top:10; margin-left:5 }
.img_anntot { height:225; width:150; ; border-radius:5px }
.img_anntot_s { height:165; margin-bottom:10; width:125; border-radius:5px; }
.img_anntot_l { height:170; width:138; border-radius:5px }
.img_index { height:100; width:65 }
.chp1 { width:90%; max-width:400px }
.chp1bis { width:85%; max-width:400px }
.chp1bbis { width:85%; max-width:400px }
.anntotl1{ width:97%; padding:5 }
.anntotl2{ width:97%; min-height:100;}
.anntotl3{ width:97%; padding-top:10; }
.bloc_rech { width:385px }
.tdb { padding:15; background-color:#F5F5F5; min-height:575; margin-left:5; margin-right:5 }
.hauteur{ min-height:675}


 /* Menu ------------------------- */
/* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
.topnav a:not(:first-child), .dropdown .dropbtn { display: none; }
.topnav a.icon { float: right; display: block; }
.topnav.responsive {position: relative;}
.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }
.topnav.responsive a { float: none; display: block; text-align: left; }
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {display: block; width: 100%; text-align: left; }
}