@media (min-width: 500px) {
    * {
        box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

div.fullWidth {
  width: 100%;
}

    blockquote,
    code,
    pre,
    textarea,
    input,
    object,
    embed,
    video {
    width: 100%;
    }
    
  img {
max-width:100%;
height:auto;
width:auto; /*ie8*/
}  /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

    .element1,
    .element2 {
        float: none;
        width: auto;
    }
    
    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }
}
@font-face {
font-family:'Dinot Condensed Black';
font-style:normal;
font-weight:bold;
src:url('dinot-condensed-black.ttf') format('truetype');
}

@font-face {
font-family: 'Dinot Condensed Bold';
font-style:normal;
font-weight:bold;
src:url('dinot-condensed-bold.ttf') format('truetype');
}

@font-face {
    font-family:'Dinot Condensed Medium';
    font-style:normal;
    font-weight:bold;
    src:url('dinot-condensed-medium.ttf') format('truetype');
}

@font-face {
    font-family:'Dinot Medium';
    font-style:normal;
    font-weight:bold;
    src:url('dinot-medium.ttf') format('truetype');
}

div#logo {text-align:center; background-color:#c0daef; margin:0 0 15px 0; height:150px;}
div#styleimg {margin:0px;display:block;padding:2px 2px; text-align:center;}
div#liste {display:block;padding:5px 0px;}
div#lestitres {font:1em "arial","sans-serif";text-transform:uppercase;color:#000000;font-size:14px;font-weight:bold;padding:0px 2px;}
div#civil {font:1em "arial","sans-serif";text-transform:none;color:#333333;font-size:12px;font-weight:bold;padding:0px 2px;}
div#textesmall {font:1em "arial","sans-serif";text-transform:none;color:#333333;font-size:13px;font-weight:none;padding:0px 2px;}
div#addtextesmall {font:1em "arial","sans-serif";text-transform:none;color:#333333;font-size:13px;font-weight:none;padding:0px 2px; margin: 0 0 0 15px;}
div#date {font:1em "arial","sans-serif";text-transform:none;color:#333333;font-size:14px;font-weight:bold;padding:0px 2px; margin:0 0 0 15px;}
div#tarif {font:1em "arial","sans-serif";text-transform:none;color:#333333;font-size:14px;font-weight:bold;padding:0px 2px; margin:0 0 0 15px;}
div#horaire {font:1em "arial","sans-serif";text-transform:none;color:#333333;font-size:14px;font-weight:bold;padding:0px 2px; margin:0 0 0 15px;}
div#titreblanc {font:1em "arial","sans-serif";text-transform:none;background-color:#507FA4;padding:2px 5px;color:#FFFFFF;font-size:22px;}
div#textenoir {font:1em "arial","sans-serif";text-transform:none;margin:0px;color:#000000;font-size:14px;font-weight:none;padding:0px 2px;}
div#null {font:1em "arial","sans-serif";text-transform:none;margin:0px;color:#000000;font-size:13px;font-weight:none;padding:5px 2px;}
div#rubrique{font:1em "arial","sans-serif";text-transform:none;color:#000000; font-size:14px;font-weight:bold;padding:0px 2px;}
div#defbg {font:1em "arial","sans-serif";margin:0px;padding:0px 0px;color:#FFFFFF;}
div#selectarr {display:block;padding:1em 10px; margin: 0 0 0 10px;}
div#stylepub {margin:0px;display:block;padding:2px 2px;}
div#cadredescription {text-decoration:none; font-family: Arial, Helvetica,sans-serif; text-transform: none; font-size:16px; color:#30323a; margin: 20px 15px 0 15px; }
div#clearboth { clear:both;	}
div#cadreerreurtexte { color:#660000; text-decoration:none; font-family: Arial, Helvetica,sans-serif; text-transform: none; font-size: 14px; clear:both; margin: 5px 15px 5px 15px; text-align:left;}
div#cadretexte { text-decoration:none; font-family: Arial, Helvetica,sans-serif; text-transform: none; font-size: 14px; clear:both; margin: 5px 15px 5px 15px; text-align:left;}
div#main{margin:0 10px 0 10px; text-align:left;}
div#listemain{margin:0 10px 0 10px;text-align:left;}
div#Home_player { position:relative; height:60px;padding:0px 3px;overflow: hidden; text-decoration: none; }
div#BoxHome_player { position:relative; height:85px;padding:0px 3px;overflow: hidden; text-decoration: none; }
div#Boxsmall {display: block; position:absolute;top:0; left:0px;padding:0px 2px;width:60px;cursor: pointer;text-decoration: none;}
div#BoxHome {display: block; position:absolute;top:0; left:0px;padding:0px 0px;width:70px;cursor: pointer;text-decoration: none;}
div#colHome {display: block;position: relative;top:-10px;left:40px;right: 0;cursor: pointer;text-decoration: none; text-align:left;}
div#col {display: block;position: relative;top:6px;left:65px;right: 0;cursor: pointer;text-decoration: none; text-align:left;}
div#separateur { border-top: 1px dotted #7f7f7f; height: 1px; margin:15px 0 15px 0; clear:both;}
div#txtsmallbox { padding:0 15px 0 0; text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#999999; }
div#marg15 { margin:0 0 0 15px; }
div#bgmenu { background-image:url(images/bg-menu.png); height:75px; margin:0 0 10px 0; }
h1#htitre  { padding:0 0 0 10px; margin:0; font-family: 'Dinot Condensed Medium', Aria, Verdana, Helvetica, sans-serif; font-size: 12px; color:#30323a; text-decoration:none; text-align:left; }
h2#titreh2  { padding:0 0 0 10px; margin:20px 0 5px 0; font-family: 'Dinot Condensed Medium', Aria, Verdana, Helvetica, sans-serif; font-size: 34px; color:#30323a; text-decoration:none;  text-align:left; }
h3#titreh3  { padding:0 0 0 15px; margin:20px 0 20px 0; font-family: 'Dinot Condensed Medium', Aria, Verdana, Helvetica, sans-serif; font-size: 22px; color:#30323a; text-decoration:none;  text-align:left; }
.titregrisH {color:#555555; font-family: 'Dinot Condensed Black', Arial Narrow, Verdana, Helvetica, sans-serif text-decoration:none; font-weight:bold; font-size:30px; }
.rougeM {color:#FF0000; font-family: Arial, Verdana, Helvetica, sans-serif; text-decoration:none;  font-size:14px; }
.txtrouge {font-family: Arial, Verdana, Helvetica, sans-serif;  font-size: 12px; color:#FF0000;}
.textecode {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial, Verdana, Helvetica, sans-serif; text-transform: none; font-size: 18px; color:#30323a;}
.smallnoir {text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color:#000000;}
.noirM {color:#000000; font-family: Arial, Verdana, Helvetica, sans-serif; text-decoration:none; font-size:16px; }
.smallred {text-decoration:none; font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 9px; color:#FF0000;}
.separator {height: 1px; margin-top:3px; margin-bottom:3px; }
.txtnoir {font-family: Arial, Verdana, Helvetica, sans-serif; text-decoration:none; font-size: 12px; color:#000000;}
.txtgris {color:#666666; font-family: Arial, Verdana, Helvetica, sans-serif; text-decoration:none; font-size:14px; }
.navrub{padding:1px;color:#000000;height:25px;}
.navrub a{font:1em "arial","sans-serif";text-transform:uppercase;color:#000000;display:block;float:left;margin:2px;padding:3px 3px;}
.navrub a:visited {	}
.navrub a:hover{color:#000000;}
.navrub a:active{color:#000000;}

.navgris{padding:1px;color:#666666;height:25px;}
.navgris a{font:1em "arial","sans-serif";color:#000000;display:block;float:left;}
.navgris a:visited {	}
.navgris a:hover{color:#666666;}
.navgris a:active{color:#666666;}
.navzoomfiche a:link {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#003872; font-size: 22px;}
.navzoomfiche a:visited {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#003872; font-size: 22px;}
.navzoomfiche a:hover {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#fcb904; font-size: 22px;}
.navzoomfiche a:active {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#003872; font-size: 22px;}

.navnoirsmall a:link {text-decoration:none; color:#000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }
.navnoirsmall a:visited {text-decoration:none; color:#000000; font-family: Arial, Verdana, AHelvetica, sans-serif; font-size: 12px; }
.navnoirsmall a:hover {text-decoration:underline; color:#000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }
.navnoirsmall a:active {text-decoration:none; color:#000000; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; }

.navundersalle a:link {text-decoration:underline; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#323c5a; font-size: 16px;}
.navundersalle a:visited {text-decoration:underline; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#323c5a; font-size: 16px;}
.navundersalle a:hover {text-decoration:underline; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#323c5a; font-size: 16px;}
.navundersalle a:active {text-decoration:underline; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif;  color:#323c5a; font-size: 16px;}

.navnoirM a:link {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#323c5a; font-size: 16px;}
.navnoirM a:visited {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#323c5a; font-size: 16px;}
.navnoirM a:hover {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif; color:#323c5a; font-size: 16px;}
.navnoirM a:active {text-decoration:none; font-family: 'Dinot Condensed Medium', Arial Narrow, Verdana, Helvetica, sans-serif;  color:#323c5a; font-size: 16px;}

.navunderbleu a:link {text-decoration: underline; font-size:14px; color: #003399;}
.navunderbleu a:visited {text-decoration: underline; font-size:14px color: #003399;}
.navunderbleu a:hover {text-decoration: underline; font-size:14px	color: #003399;}
.navunderbleu a:active {text-decoration: underline; font-size:14px color: #003399;}

div#navmenu{padding:0 0px 15px 0px; margin:15px 15px 15px 15px; background-color:#ffffff; text-align:center; font-size:16px; border-top: 1px dotted #7f7f7f; border-bottom: 1px dotted #7f7f7f;}
.navmenu a{font:1em "arial","sans-serif"; color:#000000;display:block; float:left; padding:5px 0px 15px 10px; text-decoration:none;}
.navmenu a:visited {	text-decoration:none;}
.navmenu a:hover{color:#000000;text-decoration:none;}
.navmenu a:active{color:#000000;text-decoration:none;}

div#navcat{padding:1px;color:#000000;height:25px;font-size:18px;}
.navcat a{font:1em "arial","sans-serif";text-decoration:none;text-transform:none; font-weight:none;color:#000000;display:block;float:left;margin:2px;padding:3px 3px;}
.navcat a:visited {	}
.navcat a:hover{color:#000000;}
.navcat a:active{color:#000000;}

div#navlieu{padding:1px;color:#000000;height:25px;font-size:14px; margin:0 0 0 15px;}
.navlieu a{font:1em "arial","sans-serif";text-decoration:underline;text-transform:uppercase;font-weight:bold;color:#000000;display:block;float:left;margin:0px;padding:0px 0px;}
.navlieu a:visited {	}
.navlieu a:hover{color:#000000;}
.navlieu a:active{color:#000000;}

div#cadreresa{padding:1px;color:#0000FF; margin:5px 0 5px 0; font-size:16px;clear:both;}
.resa a{font:1em "arial","sans-serif";text-decoration:underline;color:#0000FF;display:block;margin:0px;padding:0px 0px;}
.resa a:visited {	}
.resa a:hover{color:#0000FF;}
.resa a:active{color:#0000FF;}

div#defilpage{padding:1px;text-align:center;color:#3366CC;font-size:16px;padding:10px 3px;}
.defilpage a{font:1em "arial","sans-serif"; text-align:center;text-decoration:underline;text-transform:uppercase;font-weight:bold;color:#3366CC;float:center;margin:0px;}
.defilpage a:visited {text-align:center;}
.defilpage a:hover{color:#3366CC;text-align:center;}
.defilpage a:active{color:#3366CC;text-align:center;}

div#footernavcat{padding:1px;margin:0 0 0 15px;color:#000000;height:25px;font-size:14px;}
.footernavcat a{font:1em "arial","sans-serif";text-decoration:underline;text-transform:uppercase; font-weight:bold;color:#000000;display:block;float:left;margin:2px;padding:3px 3px;}
.footernavcat a:visited {	}
.footernavcat a:hover{color:#000000;}
.footernavcat a:active{color:#000000;}

div#navfooter{padding:1px; margin:0 15px 0 15px; background-color:#336699;color:#FFFFFF;height:25px; font-size:14px}
.navfooter a{font:1em "arial","sans-serif";text-transform:uppercase;color:#FFFFFF;display:block;float:left;margin:2px;padding:3px 3px;}
.navfooter a:visited {	}
.navfooter a:hover{color:#FFFFFF;}
.navfooter a:active{color:#FFFFFF;}

div#even-reso{ text-align:center; vertical-align:top; position:relative; margin:10px 0 10px 0; padding:0 0 0 15px; height:30px;}
div#even-reso-links{text-align:center; position:relative; float:left; width:auto; padding:2px; margin:0 0 0 0;}

div#defilagenda{text-align:center; margin:0 10px 0 10px; padding:0 0 0 0;}

.menu-header-fluid-links{ text-align:center; position: relative; width:100%; height:27px; font-size:18px; font-family: 'Dinot Condensed Bold', Arial Narrow, Verdana, Helvetica, sans-serif; 	padding:0 0 8px 6px; margin: 0 0 0 0; left: 0px; top: 5px; }
.menu-header-fluid-links-inner{width:auto; margin:0 auto;}
.menu-header-fluid-links-inner{padding:0px 0 0 0;}
.menu-header-fluid-links ul{text-align:center; margin:0px 0 0 0; padding:0px;}
.menu-header-fluid-links li{ border: solid #00111a 1px; background-color:#113d54; height:35px; text-align:center; display:block; float:left; padding:11px 0 0 0; margin:5px 0 0 5px; line-height:10px;}
.menu-header-fluid-links li.last{border: solid #00111a 1px; margin:5px 0 0 5px;}
.menu-header-fluid-links li a,.menu-header-fluid-links {margin:5px 0 0 0; height:40px; color:#FFFFFF; text-transform:uppercase; text-decoration:none; padding:0 8px 0 8px; }
.menu-header-fluid-links li a:hover{background-color:#113d54; color:#dfaa19; text-transform:uppercase; text-decoration:none; padding:0px 8px 3px 8px; }


.select-menu-links{ text-align:center; position: relative; width:100%; height:27px; font-size:18px; font-family: 'Dinot Condensed Bold', Arial Narrow, Verdana, Helvetica, sans-serif; 	padding:0 0 8px 6px; margin: 0 0 0 0; left: 0px; top: 5px; }
.select-menu-links-inner{width:auto; margin:0 auto;}
.select-menu-links-inner{padding:0px 0 0 0;}
.select-menu-links ul{text-align:center; margin:0px 0 0 0; padding:0px;}
.select-menu-links li{ border: solid #d09902 1px; background-color:#d09902; height:35px; text-align:center; display:block; float:left; padding:11px 0 0 0; margin:5px 0 0 5px; line-height:10px;}
.select-menu-links li.last{border: solid #d09902 1px; margin:5px 0 0 5px;}
.select-menu-links li a,.select-menu-links {margin:5px 0 0 0; height:40px; color:#FFFFFF; text-transform:uppercase; text-decoration:none; padding:0 8px 0 8px; }
.select-menu-links li a:hover{background-color:#d09902; color:#113d54; text-transform:uppercase; text-decoration:none; padding:0px 8px 3px 8px; }


.even-links{ vertical-align:top; width:270px; height:auto; padding:0 0 0 0; margin:50px auto 50px auto; text-align:left;}
.even-nuage1-links{position:relative; width:250px; margin:10px auto 25px auto;}
.stylefiltre200 {width:auto; height:470px; text-align:center; position:relative; padding:5px; border: solid 1px #e7e8e9; background-color:#f3f4f5;}
.styleopac200 {
	right:5px;
	width: 230px;
	height:230px;
	line-height: 135% !important;
	text-align:left;
	vertical-align:top;
	position:absolute;
	bottom:1px;
	padding:8px 5px 5px 5px;
}

div#padding2 { 
  text-align: left;
  padding:2px;
}
.even300-links{ vertical-align:top; width:335px; height:auto; padding:0 0 0 0; margin:50px auto 30px auto; text-align:left;}
.even300-nuage1-links{position:relative; width:315px;  margin:0 auto 25px auto;}
.style300filtre {width:auto; height:530px; position:relative; padding:5px; border: solid 1px #e7e8e9; background-color:#f3f4f5;}
.style300opac {
    right:5px;
	width: 295px;
	height:200px;
	line-height: 135% !important;
	text-align:left;
	vertical-align:top;
	position:absolute;
	bottom:0;
	padding:5px; 
}
div#pubrectangle { text-align:center; padding:0 0 0 0; margin:20px 15px 20px 15px;
	clear:both;
	}
div#resabtfnacdigi {
	position:relative;
	right:0px;
	top:0px;
	padding:0 0 10px 0;
	margin: 7px 15px 0 15px;
    border-bottom: 1px dotted #7f7f7f;
 }
 div#cadrecorps {
	margin: 0 15px 0 15px;
	text-align:left;
 }
 div#cadrebienvenu {
 text-align:center; padding:5px;
 }
 .styleabsolue {  height:90px; position:relative;}

.blokconnection {
	width:300px;
	background-color:#f4f4f4;
	border: 1px solid #e1e1e1;
	position:absolute;
	left: 149px;
	top: 5px;
}
div#formchamptext { text-align:left; padding:5px; margin:15px 0 15px 0; }
div#divpaddingleft { 
  text-align: left;
  padding:5px;
}
div#divpadding10left { 
  text-align: left;
  padding:10px;
}
div#bgtextecode { text-align:center; padding:10px; width:300px; background-color:#f3f3f3}
div#divcenter { 
  margin: 0 auto;
  border: 1px dashed silver; /* pour voir que ça marche */
  width: 100px;
  text-align: center;
  padding:5px;
}
div#paddingcenter5 { 
  text-align: center;
  padding:5px;
}
div#paddingcenter10 { 
  text-align: center;
  padding:10px;
}
div#textecopy { 
   text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; margin:30px 15px 30px 15px; font-size:14px; vertical-align:bottom;
}
div#txtcentre { 
  text-align: center;
}
 div#txtpaddingleft { 
  text-align: left; padding:0 3px 0 4px;
}
.separation {height: 1px; margin-top:10px; margin-bottom:10px; }