/* CSS Document */
/* Elements de base */
html { width: 100%; height: 100%; }
body { margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 20px; line-height: normal; color: #4c4c4e; height: 100%; width: 100%; background: #fff; }
table { margin: 0px; padding: 0px; }
tr, thead, tbody { margin: 0px; padding: 0px; }
td { margin: 0px; padding: 0px; vertical-align: top; }
th { margin: 0px; padding: 0px; vertical-align: top; }
p { margin: 0px; padding: 0px; margin-bottom: 8px; height: auto; }
ul, ol { margin: 12px 0px; padding: 0; padding-left: 40px; }
li { margin-top: 0px; margin-bottom: 4px; list-style-image: url(/img/front/bull-li3.png); line-height: 1.2em; }
img { border: none; vertical-align: top; pointer-events: none; }
a > img { pointer-events: all; }
input, button { vertical-align: middle; margin: 1px 0 0 0; padding: 2px 4px; border: 1px solid #aaa; font-size: 13px; color: #000; box-sizing: border-box; border-radius: 2px; }
input[type=file] { border: none; }
input[type=checkbox] { margin-top: -2px; border: none; }
input[type=radio] { margin-top: -3px; border: none; }
input[type=submit] { background: #eee; padding: 3px 8px; border: 1px solid #888; color: #666; cursor: pointer; }
textarea { margin: 0px; border: 1px solid #888; padding: 4px 6px; font-size: 14px; color: #000; resize: none; font-family: Arial, sans-serif; outline-width: 0; }
select { margin: 0px; border: 1px solid #888; padding: 4px 6px; font-size: 14px; color: #000; font-family: Arial, sans-serif; outline-width: 0; }
select option { background: #fff !important; color: #4c4c4e !important; padding: 3px 5px; }
div { position: relative; }
hr { color: #999; background-color: #999; height: 1px; border: none; }
strong { font-weight: 600; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; }
* { box-sizing: border-box; }
/* Liens et classes associées */
a, a:link, a:visited { text-decoration: none; color: #F7CD1C; }
a:hover { text-decoration: none; }
a.actif { font-weight: bold; }
li a { text-decoration: none; color: #d97700; }
/* Titres */
h1 { position: relative; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 24px; line-height: 32px; margin: 0; padding: 5px 0px; text-transform: uppercase; letter-spacing: 3px; }
h2 { position: relative; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 26px; line-height: 32px; margin: 0; padding: 15px 0 5px 0px; }
h3 { position: relative; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 28px; line-height: 34px; margin: 0; padding: 5px 0px; text-transform: uppercase; letter-spacing: 8px; }
h4 { position: relative; font-family: 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; color: #777; margin: 0 0 8px 0; line-height: 16px; }
/* Classes de style */
.nodisp { display: none; }
.clear { display: block; clear: both; }
.noselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.erreur { font-size: 13px; font-style: italic; color: #F00; background: url(/img/admin/erreur.png) no-repeat left; padding-left: 22px; font-weight: 500; }
.alerte { display: inline-block; font-size: 11px; font-style: normal; color: #ffae00; background: url(/img/admin/erreur.png) no-repeat left top; padding-left: 20px; font-weight: normal; }
.info { font-size: 11px; font-style: italic; background: url(/img/admin/information.png) no-repeat left; padding-left: 22px; font-weight: 500; color: #369; }
.gros { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 8px; }
.petit { font-size: 11px; font-style: normal; }
.surligne { background: #FF0; color: #036; font-style: normal; font-weight: bold; }
.hr { border-top: 1px solid #777; height: 1px; font-size: 0px; }
.ombre { -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
.tombre { text-shadow: 0px 0px 4px #000; -moz-text-shadow: 0px 0px 4px #000; -webkit-text-shadow: 0px 0px 4px #000; }
.outline { font-weight: bold; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; color: #fff; }
.espace { height: 0; font-size: 0px; margin: 0 0 12px 0; overflow: hidden; }
.icone { width: 16px; height: 16px; }
.contenu { left: 50%; width: 1280px; margin-left: -640px; } .contenu > .padding { padding: 0px; }
.inline { display: inline-block; }
.nbart { font-size: 9px; }
.fright { float: right; }
.aright { text-align: right; } .aleft { text-align: left; } .acenter { text-align: center; }
.disabled { color: #d7d7d7; }
.trait { display: inline-block; width: 380px; height: 6px; overflow: hidden; background-color: #666; margin: 24px 0; border-radius: 3px; }
.br { height: 0; overflow: hidden; }
.grand { font-size: 24px; }
.big { font-size: 32px; }
.vbig { font-size: 48px; }
.vvbig { font-size: 64px; font-weight: 700; vertical-align: top; }
.rond-coul { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background-color: #4d1c5e; }
.marge-fmax { margin: 0 6px; }
.marge2-fmax { display: inline-block; margin: 8px 55px 0 38px; width: 4px; height: 46px; line-height: 64px; background: rgba(255,255,255,0.4); vertical-align: middle; }
.filet { height: 14px; font-size: 0; background: url(/img/front/filet-orange.png) no-repeat center; margin: 32px 0; }
/* Couleurs */
.blanc { color: #fff; }
.gris { color: #666; }
.grisc { color: #aaa !important; }
.grisc a { color: #aaa !important; border-color: #aaa !important; }
a .grisc { color: #aaa !important; border-color: #aaa !important; }
.bg-gris { background-color: #eee; color: #666; }
.adherents { color: #666; }
.css-bgc { color: #09f; padding: 12px 20px 14px 20px; background: rgba(0,100,180,0.1); margin: 24px 0; border-radius: 16px; box-shadow: 0 0 16px rgba(0,100,180,0.3) inset; font-size: 16px; }
/* .css-bgc a, .cnt-bgcoul a:link, .cnt-bgcoul a:visited { color: #fff; } */
.cnt-bgris { background: #eee; padding: 24px 0; }
.pg-blanc { background: #fff; }
.pg-gris { background: #eee; }
.pg-orange { background: #f8d3b450; }
.pg-violet { background: #dec5e050; }
.txt-coul { color: #1B94F7; }
/* Contenu centré */
.content { width: 1200px; margin: 0 auto; padding: 0 12px; }
/* Effet d'affichage au scroll */
.affconten { perspective: 1200px; perspective-origin: center; }
.affscroll { -webkit-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); opacity: 0; transition: all 1s ease-in-out; }
.affscroll.affvisible { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }
/* Entete */
#entete { position: relative; background: #666 linear-gradient(to bottom right, rgba(0,0,0,0.1), rgba(0,0,0,0.7)); color: #fff; }
/* Menus */
#menu { position: relative; background: #666; text-align: left; z-index: 19; line-height: 26px; color: #fff; overflow: hidden; }
#menu a { display: inline-block; position: relative; width: auto; color: #fff; text-decoration: none; font-size: 18px; font-weight: 400; transition: all 0.15s ease-in-out;
vertical-align: top; padding: 4px 12px; text-transform: uppercase; letter-spacing: -1px; line-height: 34px; text-shadow: 0 0 4px rgba(0,0,0,0.3); border-right: 1px dotted #000; }
#menu a:hover { color: #F7CD1C; text-decoration: none; background: rgba(220,255,255,0.1); }
#menu a.actif { text-decoration: none; font-weight: 700; color: #333; background: #fff; border-radius: 4px 4px 0 0; text-shadow: none; margin-top: 4px; padding: 2px 12px; }
#smenu { position: relative; }
#smenu .smenu { display: none; }
#smenu .smenu.actif { display: block; }
#smenu .smenu > a { font-size: 16px; padding: 5px 12px; }
#smenu .smenu > a:hover { color: #f9ff39; }
#smenu .smenu > a.actif { color: #f9ff39; font-weight: 700; }
#menu #btn-menmob { display: none; }
#menu #cnt-menmob { display: none; }
/* Conteneur des contenus */
#content { position: relative; }
/* Pied de page */
#pied { position: relative; text-align: center; font-size: 12px; background: #666; color: #fff; padding: 12px 0; }
#pied a { margin-left: 12px; padding-left: 12px; border-left: 1px dotted #fff; }
/* Fenetre en surimpression */
#fader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); text-align: center; z-index: 99; }
#fader #fenetre { position: relative; display: inline-block; top: 50%; max-height: 90%; max-width: 100%; background: #fff; padding: 8px 12px; box-shadow: 0 0 16px rgba(0,0,0,0.7);
-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 13px; }
#fader #fenetre .espace { margin: 0 0 6px 0; }
/* Spécificités pour certaines rubriques */
#content[data-url="references"] .content .contenu .texte img { margin: 0; box-shadow: 0 0 64px #000; border: 10px solid #fff; }
#content[data-url="mutualiser"] .content .contenu .texte a > img:hover { transform: none; box-shadow: none; animation: .3s ease-in-out 0s both shake; }
@keyframes shake { 0% { transform: none; }
20% { transform: translateX(-30px) rotateZ(-3deg); }
40% { transform: translateX(20px) rotateZ(2deg); }
60% { transform: translateX(-10px) rotateZ(-1deg); }
80% { transform: translateX(5px) rotateZ(1deg); }
100% { transform: none; } }
/* Navigation */
.navrub { position: absolute; background: rgba(255,255,255,0.2); background-position: center; background-repeat: no-repeat; opacity: 0; transition: all .3s ease-in-out; }
@media (hover: hover) { .navrub:hover { opacity: 0.5; height: 64px !important; } }
.navcnt { position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0; transition: all .3s ease-in-out; }
@media (hover: hover) { .navcnt:hover { opacity: 0.5 !important; background-color: rgba(255,255,255,0.2); width: 96px !important; } }
#nav-top { left: 0px; right: 0px; height: 32px; top: 36px; background-image: url(/img/front/rubrique-prec.png); }
#nav-bot { left: 0px; right: 0px; height: 32px; bottom: 0; background-image: url(/img/front/rubrique-suiv.png); }
#nav-lft { left: 0px; width: 48px; top: 50%; height: 150px; margin-top: -75px; background-image: url(/img/front/contenu-prec.png); border-radius: 0 16px 16px 0; opacity: 0; }
#nav-rgt { right: 0px; width: 48px; top: 50%; height: 150px; margin-top: -75px; background-image: url(/img/front/contenu-suiv.png); border-radius: 16px 0 0 16px; opacity: 0; }
/* Animation contenu pour changement de rubrique */
#loading { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; transition: all .3s ease-in-out; background: #000; }
#loading > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 8px #000; color: #fff;
background: url(/img/front/loading.gif) no-repeat center bottom; background-size: 64px auto; padding: 0 0 96px 0; white-space: nowrap; }
#loading.ani-out-nav-top { transform: translateY(100%); }
#loading.ani-out-nav-bot { transform: translateY(-100%); }
#loading.ani-in-nav-top { transform: translateY(-100%); }
#loading.ani-in-nav-bot { transform: translateY(100%); }
#loading.off { display: none; transition: none; opacity: 0; }
#content { transition: all .3s ease-in-out; }
#content.ani-pre-nav-top { transform: translateY(32px); }
#content.ani-pre-nav-bot { transform: translateY(-32px); }
#content.ani-no-nav-top { display: none; transition: none; }
#content.ani-no-nav-bot { display: none; transition: none; }
#content.ani-out-nav-top { transform: translateY(100%); }
#content.ani-out-nav-bot { transform: translateY(-100%); }
#content.ani-in-nav-top { transform: translateY(-100%); }
#content.ani-in-nav-bot { transform: translateY(100%); }
#lcontent { transition: bottom .3s ease-in-out; }
#lcontent.ani-pre-nav-top { bottom: 8px; }
#lcontent.ani-pre-nav-bot { bottom: 72px; }
/* Animation des contenus */
.paused { -webkit-animation-play-state: paused !important; -moz-animation-play-state: paused !important; -o-animation-play-state: paused !important; animation-play-state: paused !important; }
.fondu, .fondu-flou, .dep-gauche, .dep-droite, .dep-haut, .dep-bas, .echelle-petit, .echelle-grand, .spin, .bounce { opacity: 0; }
.content.actif .titre.fondu { animation: .5s ease-in-out .5s both fondu; }
.content.actif .col1.fondu { animation: .5s ease-in-out 1s both fondu; }
.content.actif .col2.fondu { animation: .5s ease-in-out 1.5s both fondu; }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
.content.actif .titre.fondu-flou { animation: .5s ease-in-out .5s both fonduFlou; }
.content.actif .col1.fondu-flou { animation: .5s ease-in-out 1s both fonduFlou; }
.content.actif .col2.fondu-flou { animation: .5s ease-in-out 1.5s both fonduFlou; }
@keyframes fonduFlou { 0% { opacity: 0; filter: blur(3px); transform: scale(1); }
50% { opacity: 1; filter: blur(8px); transform: scale(1.05); }
100% { opacity: 1; filter: blur(0px); transform: scale(1); } }
.content.actif .titre.dep-gauche { animation: .5s ease-in-out .5s both depGauche; }
.content.actif .col1.dep-gauche { animation: .5s ease-in-out 1s both depGauche; }
.content.actif .col2.dep-gauche { animation: .5s ease-in-out 1.5s both depGauche; }
@keyframes depGauche { from { transform: translateX(-1000px); opacity: 0; } to { transform: translateX(0px); opacity: 1; } }
.content.actif .titre.dep-droite { animation: .5s ease-in-out .5s both depDroite; }
.content.actif .col1.dep-droite { animation: .5s ease-in-out 1s both depDroite; }
.content.actif .col2.dep-droite { animation: .5s ease-in-out 1.5s both depDroite; }
@keyframes depDroite { from { transform: translateX(1000px); opacity: 0; } to { transform: translateX(0px); opacity: 1; } }
.content.actif .titre.dep-haut { animation: .5s ease-in-out .5s both depHaut; }
.content.actif .col1.dep-haut { animation: .5s ease-in-out 1s both depHaut; }
.content.actif .col2.dep-haut { animation: .5s ease-in-out 1.5s both depHaut; }
@keyframes depHaut { from { transform: translateY(-1000px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } }
.content.actif .titre.dep-bas { animation: .5s ease-in-out .5s both depBas; }
.content.actif .col1.dep-bas { animation: .5s ease-in-out 1s both depBas; }
.content.actif .col2.dep-bas { animation: .5s ease-in-out 1.5s both depBas; }
@keyframes depBas { from { transform: translateY(1000px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } }
.content.actif .titre.echelle-petit { animation: .5s ease-in-out .5s both echellePetit; }
.content.actif .col1.echelle-petit { animation: .5s ease-in-out 1s both echellePetit; }
.content.actif .col2.echelle-petit { animation: .5s ease-in-out 1.5s both echellePetit; }
@keyframes echellePetit { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.content.actif .titre.echelle-grand { animation: .5s ease-in-out .5s both echelleGrand; }
.content.actif .col1.echelle-grand { animation: .5s ease-in-out 1s both echelleGrand; }
.content.actif .col2.echelle-grand { animation: .5s ease-in-out 1.5s both echelleGrand; }
@keyframes echelleGrand { from { transform: scale(10); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.content.actif .titre.spin { animation: .5s ease-in-out .5s both spin; }
.content.actif .col1.spin { animation: .5s ease-in-out 1s both spin; }
.content.actif .col2.spin { animation: .5s ease-in-out 1.5s both spin; }
@keyframes spin { 0% { transform: rotateY(-360deg) rotateZ(15deg); opacity: 0; }
10% { opacity: 1; }
100% { transform: rotateY(360deg); opacity: 1; } }
.content.actif .titre.bounce { animation: 1s ease-in-out .5s both bounce; }
.content.actif .col1.bounce { animation: 1s ease-in-out 1s both bounce; }
.content.actif .col2.bounce { animation: 1s ease-in-out 1.5s both bounce; }
@keyframes bounce { 0% { transform: translateY(-1000px); opacity: 0; }
20% { transform: translateY(100px); opacity: 1; }
40% { transform: translateY(-75px); opacity: 1; }
60% { transform: translateY(50px); opacity: 1; }
80% { transform: translateY(-25px); opacity: 1; }
100% { transform: translateY(0px); opacity: 1; } }
/* Erreurs */
#bigErreur { color: #f7f7f7; font-size: 300px; font-weight: bold; text-align: center; text-shadow: 0px 0px 32px rgba(0,0,0,0.17); }
/* =======================================================
Media queries
======================================================= */
#irmax { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: block; }
#ir1340 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; }
#ir1120 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; }
#ir900 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; }
#ir600 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; }
#ir400 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; }
#ir320 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; }
/* ------------------------------------------------ */
/* Format PC/tablettes < 1480px */
@media handheld, only screen and (max-width: 1480px), only screen and (max-device-width: 1480px) {
body { font-size: 18px; }
h2 { font-size: 24px; line-height: 30px; }
.css-bgc { font-size: 15px; }
.content .contenu .col1 { margin-left: 2%; }
.content .contenu .col2 { margin-right: 2%; }
.content .contenu .titre { margin: 0 2% 12px 2%; font-size: 26px; line-height: 30px; }
.content .contenu .pied { margin: 0 2% 12px 2%; }
}
/* ------------------------------------------------ */
/* Format PC/tablettes < 1340px */
@media handheld, only screen and (max-width: 1340px), only screen and (max-device-width: 1340px) {
#irmax { display: none; }
#ir1340 { display: block; }
body { font-size: 16px; }
h2 { font-size: 22px; line-height: 28px; }
.css-bgc { font-size: 14px; }
.contenu { width: 1080px; margin-left: -540px; }
#menu a { font-size: 20px; }
#nav-lft { width: 32px; }
#nav-rgt { width: 32px; }
.content .contenu .titre { font-size: 24px; line-height: 28px; }
.content .contenu .texte img { max-height: 350px; }
.refcli { height: 320px; }
.osm { height: 350px; }
.tjs { height: 350px; }
}
/* ------------------------------------------------ */
/* Format PC/tablettes < 1120px */
@media handheld, only screen and (max-width: 1120px), only screen and (max-device-width: 1120px) {
#ir1340 { display: none; }
#ir1120 { display: block; }
body { font-size: 15px; }
h2 { font-size: 20px; line-height: 26px; }
h1 { font-size: 22px; line-height: 30px; }
h3 { font-size: 22px; line-height: 38px; }
h4 { font-size: 18px; }
.css-bgc { font-size: 13px; }
.contenu { width: auto; left: auto; margin-left: 0px; }
#menu { text-align: left; padding: 0 0 0 16px; }
#menu a { font-size: 18px; }
.content .contenu .titre { font-size: 22px; line-height: 26px; }
.content .contenu .texte img { max-height: 350px; }
#content[data-url="artisan"] .content .contenu .texte a > img { max-width: 170px; }
#content[data-url="references"] .content .contenu .texte img { margin: 20px 0 0 0; }
.refcli { height: 300px; }
.osm { height: 350px; }
.tjs { height: 320px; }
}
/* ------------------------------------------------ */
/* Format < 900px */
@media handheld, only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
#ir1120 { display: none; }
#ir900 { display: block; }
body { font-size: 14px; }
h2 { font-size: 18px; line-height: 24px; }
h1 { font-size: 20px; line-height: 26px; letter-spacing: 2px; }
h3 { font-size: 18px; line-height: 24px; letter-spacing: 5px; }
h4 { font-size: 16px; letter-spacing: 3px; }
.css-bgc { font-size: 12px; }
#menu a { font-size: 14px; padding: 4px 6px; }
.content .contenu .titre { font-size: 20px; line-height: 24px; margin: 0 20px 12px 20px; }
.content .contenu .col1 { margin: 0 20px; width: auto; height: auto; float: none; }
.content .contenu .col2 { margin: 0 20px; width: auto; height: auto; float: none; }
.content .contenu .texte img { max-height: 350px; }
#content[data-url="competences"] .content .contenu .col1 .texte img { width: 128px; }
#content[data-url="competences"] .content .contenu .col2 .texte img { width: 180px; }
#content[data-url="references"] .content .contenu .texte img { max-width: 380px; }
#content[data-url="contact"] .content .contenu .texte img { width: 128px; }
#content[data-url="contact"] .content .contenu .titre { text-align: center; }
#content[data-url="contact"] .content .contenu .col2 { text-align: center; }
.refcli { height: 360px; max-width: 600px; }
}
/* ------------------------------------------------ */
/* Format mobiles < 660px */
@media handheld, only screen and (max-width: 660px), only screen and (max-device-width: 660px) {
#ir900 { display: none; }
#ir600 { display: block; }
body { font-size: 13px; }
h2 { font-size: 16px; line-height: 22px; }
h1 { font-size: 18px; line-height: 24px; letter-spacing: 1px; }
h3 { font-size: 16px; line-height: 22px; letter-spacing: 3px; }
h4 { font-size: 14px; letter-spacing: 2px; }
#menu { padding: 0; }
#menu a { display: none; }
#menu #cur-menu { display: none; }
#menu #btn-menmob { display: block; height: 36px; width: 68px; background: url(/img/front/menu-mobile.png) no-repeat center; }
#menu #cnt-menmob { display: block; height: 0; opacity: 0; transition: all .2s ease-in-out; background: rgba(0,0,0,0.7); }
#menu #cnt-menmob.actif { height: 144px; line-height: 24px; opacity: 1; }
#menu #cnt-menmob > a { display: block; text-align: center; padding: 0; line-height: 24px; }
#menu #cnt-menmob > a:hover { background: #fff; color: #333; }
.content .contenu .titre { margin: 0 0 12px 0; }
.content .contenu .col1 { margin: 0; }
.content .contenu .col2 { margin: 0; }
.content .contenu .col2 .texte { margin: 0; }
#content[data-url="references"] .content .contenu .texte img { margin: 0; }
@media handheld, only screen and (max-width: 564px), only screen and (max-device-width: 564px) {
.refcli { height: 320px; }
}
#cnt-logo { width: 64px; height: 64px; }
#pied { font-size: 11px; }
}
/* ------------------------------------------------ */
/* Format mobiles < 480px */
@media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
#ir600 { display: none; }
#ir400 { display: block; }
body { font-size: 12px; }
h2 { font-size: 15px; line-height: 20px; }
img { max-width: 100%; }
ul, ol { padding-left: 20px; }
#lcontent .lnkcnt { margin: 0 5px; }
#nav-lft { width: 24px; height: 100px; }
#nav-rgt { width: 24px; height: 100px; }
.navcnt:hover { width: 32px; }
.content { padding: 68px 20px 100px 20px; }
.content .btn-botcnt { left: 20px; right: 20px; }
.content .btn-topcnt { left: 20px; right: 20px; }
#content[data-url="artisan"] .content .contenu .texte img { max-width: 128px; }
#content[data-url="artisan"] .content .contenu .texte a > img { max-width: 120px; }
#content[data-url="competences"] .content .contenu .col1 .texte img { width: 96px; }
#content[data-url="references"] .content .contenu .texte img { max-width: 240px; }
#content[data-url="references"] .content .contenu .col2 .texte p { margin: 0; }
#content[data-url="contact"] .content .contenu .texte img { max-width: 64px; }
#content[data-url="contact"] .content .contenu .texte p { margin: 0 0 2px 0; }
.osm { height: 240px; }
.tjs { height: 280px; }
.refcli { height: 284px; }
#pied { font-size: 10px; }
#pied > span { display: none; }
#pied > a { border: none; padding: 0; margin: 0; }
}
/* ------------------------------------------------ */
/* Format mobiles < 320px */
@media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
#ir400 { display: none; }
#ir320 { display: block; }
.cnt-paragr .cnt-image { max-width: 100%; float: none !important; margin: 0 0 20px 0 !important; text-align: center; }
}