html {
    font-family: verdana;
    font-size: 12px;
    min-height: 100%;
    border-left: 1px solid #BBB;
    border-right: 1px solid #BBB;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: none !important;
    height: 100% !important;
    weight: 100% !important;
}

body {
    min-height: 100%;
    width: 100%;
    margin: auto;
}

/* --- Mobile overflow fixes (iPhone white gap) --- */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, iframe, video { max-width: 100%; height: auto; }

/* Prevent long strings from forcing viewport wider */
body, #content, nav, .table, .intro, .introaccueil { word-break: break-word; overflow-wrap: anywhere; }

/* Search box must not overflow */
#flistsearch3 { max-width: 100%; box-sizing: border-box; }
#flistsearch3 #listsearch3 { width: 100%; }


/* Remove desktop ad blocks on mobile to avoid wide widths */
#adsheader, #adscontent { display: none !important; }

/* Inline lists: ensure rows wrap without exceeding 100% */
.ul2, .ul3 { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; }
.ul2 li, .ul3 li { width: calc(50% - 8px); margin: 0; }

/* Tables and map containers keep within viewport */
.table, .maptbl { max-width: 100%; overflow-x: auto; }

#accueilbody {
    background-image: url(/img/background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 110px;
    background-position: center top;
}

img {
    border: 0
}

a {
    color: #ABABAB;
    text-decoration: none;
}

header {
    padding-bottom: 20px;
}

#logo {
    width: 100%;
    height: 90px;
    display: inline-block;
}

#logo img {
    width: 100%;
    height: 90px
}

h1 {
    margin: 0 !important;
    letter-spacing: 1px;
    color: #000;
    font-size: 30px;
    border-bottom: 1px solid #DDD;
    text-shadow: 1px 2px 2px #999;
}

/* Ensure long titles do not overflow viewport */
h1, h1 * , #titreTaxi {
    display: block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

h2 {
    font-weight: normal;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin: 10px 0;
    padding: 10px 5px;
    background: #FFF;
    color: #135287;
    font-size: 16px;
    letter-spacing: -1px;
    height: 20px;
}

h3 {
    font-weight: normal;
    font-size: 16px;
    background: #135287;
    color: #FFF;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

nav {
    padding: 6px;
    background: none;
    font-size: 11px;
    letter-spacing: 1px;
    color: #000;
    text-shadow: 1px 2px 2px #999;
}

nav a {
    color: #000;
    text-decoration: none;
    text-shadow: 1px 1px 1px #999;
}

ul {
    margin-bottom: 0px;
}

.ul3 {
}

.ul2 li {
    width: 47%;
    margin-right: 10px;
    display: inline-block;
    margin-bottom: 5px;
    vertical-align: top;
}

.ul3 li {
    width: 41%;
    margin-right: 15px;
    display: inline-block;
    vertical-align: top;
}

.clear {
    clear: both
}

td {
    border: 0;
}

.adsintro {
    width: 300px;
    height: 250px;
    margin: 16px 16px 16px 0
}

.tblpage {
    width: 100%
}

.tblpage td {
    vertical-align: top
}

#flistsearch3 {
    border-radius: 5px;
    margin-right: 10px;
    margin-top: 5px;
    position: relative;
    display: inline-block;
    padding: 5px;
    background-color: #FFF;
    border: 2px solid #000;
}

#flistsearch3 #listsearch3 {
    width: 200px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    outline: none;
    background-color: #FFF;
}

.fleft {
    float: left
}

.ui-autocomplete-category {
    font-weight: bold;
    font-size: 1.2em;
    padding: .2em .4em;
    margin: 0 0 .2em;
    line-height: 1.5;
    border-bottom: 1px solid #c8c8c8;
    background: #F90
}

#imt, #imt2 {
    text-align: center;
    font-weight: bold;
    height: 15px;
    display: block;
}

#adsheader {
    float: left;
    width: 728px;
    height: 90px;
    margin: 10px auto
}

#adscontent {
    width: 728px;
    height: 90px;
    margin: 10px auto
}

.intro {
    width: auto;
    padding: 0px 10px 10px 10px;
    line-height: 1.5em;
    text-align: justify;
    margin-top: 10px;
    margin-bottom: 10px;
}

#divIntro {
    background: #FFF;
    margin: 5px;
    padding: 5px;
    border-radius: 5px;
}

.introaccueil {
    padding: 10px;
    color: #000;
    line-height: 1.5em;
    text-align: center;
    margin-top: 3px;
    font-size: 10px;
}

.horaire, .desole, .listedechetsintro, .access {
    padding: 10px;
    background: #EFEFEF;
    line-height: 1.5em;
}

#float {
}

.mr {
    margin-right: 20px;
}

.clear {
    clear: both
}

.table {
    width: 100%;
    padding: 5px;
    text-align: left;
}

.table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.table th {
    background: #EFEFEF;
    color: #939393;
    padding: 10px;
    width: 45%;
}

.fleche {
    width: 20px;
    text-align: right;
}

.grey {
    color: #AAA
}

.red {
    color: #F00
}

.imgintro {
    float: left;
    margin: 11px 21px 11px 1px
}

.mapimg {
    background-position: top left;
    background-repeat: no-repeat;
    float: left;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: block;
    margin-right: 10px;
}

.mapimg span {
    background: url(/img/map/point.png) no-repeat top left;
    width: 16px;
    height: 16px;
    position: absolute
}

.listedechets img {
    margin: 6px;
    list-style-type: none;
}

.tac {
    border-radius: 5px;
    text-align: center;
    background: #FFF;
    width: 100%;
    height: auto;
    box-shadow: 1px 3px 0px 0px rgba(150, 150, 150, 0.75);
}

.tac2 {
    border-radius: 5px;
    text-align: center;
    background: #FFF;
    width: 100%;
    height: auto;
    box-shadow: 1px 3px 0px 0px rgba(150, 150, 150, 0.75);
}

.tacsolo {
    border-radius: 5px;
    text-align: center;
    background: #FFF;
    width: 100%;
    height: auto;
    margin: auto;
    margin-bottom: 50px;
}

.big {
    font-size: 20px;
    padding-bottom: 10px
}

.big h2 {
    font-size: 22px;
    color: #000;
    text-align: center
}

.info_g {
    margin-top: 10px;
    padding: 10px;
    font-size: 30px;
    background: #BEEEBC;
    border: 1px solid #42BF31
}

.info_r {
    margin-top: 10px;
    padding: 10px;
    font-size: 30px;
    background: #FFF0AA;
    border: 1px solid #EFBC00
}

.info_n {
    margin-top: 10px;
    padding: 10px;
    font-size: 14px;
    background: #EFEFEF;
    border: 1px solid #CCC
}

.info_g span, .info_r span {
    font-size: 16px
}

#map {
    width: 100%;
    height: 350px
}

#mapdist {
    width: 100%;
}

#diradr {
    width: 300px
}

.maptbl {
    width: 100%
}

.maptbl tr {
    vertical-align: top
}

.maptbl td {
    width: 50%
}

.teldech_prix {
    font-size: 10px;
    color: #999
}

.supplement {
    display: inline-block;
    width: 200px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.adresse {
    display: block;
    width: 135px;
    float: left;
}

#marker_recherche {
    width: auto;
    height: 20px;
    position: relative;
    left: 20px
}

.iconeTitre {
    width: 25px;
    height: auto;
}

.griscote {
    background: #DDD;
    height: 18px;
    width: 100%;
}

.titreH2 {
    background: #FFF;
    padding-right: 10px;
    height: 10px
}

.formulaire {
    margin: 0px 0px 0px 0px;
    padding: 10px 5px;
    background: #135287;
    color: #FFF;
    font-size: 16px;
    letter-spacing: -1px;
    display: block;
    height: 100%;
}

.calculeTaxi {
    background: rgba(0, 0, 0, 0.5);
    padding-top: 10px;
    padding-left: 0px;
    padding-bottom: 10px;
    margin-bottom: 0px;
}

.imagemap {
    margin: 20px;
}

.divgris {
    background: #FFF;
    padding-bottom: 10px;
    padding-left: 10px;
}

.divcalcule {
    background: #FFF;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    min-height: 360px;
    margin-bottom: 10px;
}

.divbleu {
    background: #FFF;
    margin-top: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
    box-shadow: 1px 3px 0px 0px rgba(150, 150, 150, 0.75);
}

#numerotel {
    display: inline-block;
    font-size: 30px;
    color: #2491d4;
}

#divIntrotaxi {
    background: #FFF;
    padding-top: 10px;
    box-shadow: 1px 3px 0px 0px rgba(150, 150, 150, 0.75);
    display: inline-block;
}

.infoTaxi {
    display: inline-block;
    position: relative;
    top: 5px;
    background-color: #EFEFEF;
    box-shadow: 1px 3px 0px 0px rgba(150, 150, 150, 0.75);
}

.titreBleu {
    margin: initial;
    background: #135287;
    color: #FFF;
    font-size: 16px;
    letter-spacing: -1px;
    height: initial
}

.flecheInfo {
    position: relative;
    left: -30px;
}

.marker_goutte {
    height: 20px;
    position: relative;
    top: 5px;
    left: 5px;
    margin: 0px 40px 0px 0px;
}

.copyright {
    text-align: center;
    background: #135287;
    color: #6e98bc;
    padding: 5px;
}

.copyright a:link, .copyright a:visited {
    text-decoration: none;
    color: #6e98bc
}

.marker_goutteDroite {
    height: 20px;
    position: relative;
    top: 5px;
    left: 5px;
}

input[type="radio"] {
    display: inline-block;
    margin: 5px 14px 20px 5px;
}

input[type="radio"]:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #EFEFEF;
    border: 2px solid #EAEAEA;
    border-radius: 65px;
    position: relative;
    top: -5px;
    left: -2px
}

input[type="radio"]:hover:before {
    background-color: #135287;
}

input[type="radio"]:checked:before {
    background-color: #135287;
}

input[type="radio"]:disabled:before {
    background-color: #999;
    border: 2px solid #333;
}

select {
    color: #135287;
    background: #EFEFEF;
    width: 100px;
    border: 1px solid #939393;
    outline: none;
}

#boutonCalcule {
    background-color: #2491d4;
    color: #FFF;
    height: 40px;
    width: 150px;
    border: none;
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background: #FFFFFF;
}

input[type="text"] {
    width: 175px;
    font-size: 16px;
    background-color: #EFEFEF;
    outline: none;
    border: none
}

#lienGenerique {
    text-align: center;
    color: #135287;
    font-size: 14px;
    margin-top: 15px;
}

#lienGenerique a {
    text-decoration: none;
    color: #135287
}

#titreTaxi {
    color: #000;
    width: 620px;
    padding-left: 10px;
    display: inline-block;
}

.titreCentrer {
    text-align: center;
    color: #000;
    border: none;
    margin-top: 20px;
}

.fa-map-marker {
    color: #2491d4;
    font-size: 16px;
    position: relative;
    top: 2px;
}

.tarif {
    margin: 10px;
}

.fa-globe {
    color: #2491d4;
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 2px
}

.fa-arrow-circle-right {
    color: #135287;
    font-size: 16px;
    margin-right: 5px;
}

.fa-caret-right {
    color: #135287;
    font-size: 16px;
    margin-right: 5px;
}

.fa-arrow-right {
    color: #135287;
    font-size: 16px;
    position: relative;
    left: -30px;
    bottom: -5px
}

.uneligne {
    bottom: 3px
}

.fa-calculator {
    color: #2491d4;
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
}

.fa-mobile {
    color: #2491d4;
    font-size: 35px;
    margin-right: 10px
}

.fa-money {
    color: #135287;
    margin-right: 10px;
    font-size: 18px;
}

form .fa-map-marker {
    color: #135287;
    font-size: 18px;
    margin-bottom: 2px;
    margin-left: initial;
    padding-left: 5px;
    padding-right: 5px;
}

form .espace {
    margin-right: 47px;
}

.fa-university {
    color: #2491d4;
    font-size: 16px;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 2px;
}

.fa-taxi {
    color: #2491d4;
    margin-right: 5px;
    font-size: 16px;
}

.griscote .fa-university {
    font-size: initial
}

.coordonneeFleche {
    position: relative;
    right: 16px;
    top: 2px;
}

.griscote .fa-globe {
    font-size: initial;
    position: relative;
    top: -2px;
}

.griscote .fa-university {
    color: #135287;
}

.fa-location-arrow {
    color: #2491d4;
    font-size: 16px;
    margin-right: 5px;
}

.fontgris {
    background: #EFEFEF;
    display: inline-block;
    padding: 2px;
    margin-top: 20px;
    border: 1px solid #939393;
}

.inputDepart {
    background: #FFF;
    color: #AAA;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border: 2px solid #FFF;
    padding-bottom: 5px;
    width: 236px;
    margin: auto;
    text-align: center;
}

.inputDepart input[type="text"], .inputDepart input[type="text"]:focus {
    outline: none;
    border: none;
    width: 200px;
    font-size: 16px
}

.inputDepart .fa-map-marker {
    font-size: 28px;
}

.inputDepart:target {
    background-color: #109;
}

#lienCarte {
    background-color: #2491d4;
    color: #FFF;
    outline: none;
    border-radius: 5px;
    width: 200px;
    height: 39px;
    font-size: 18px;
    border: 0px;
    text-align: center;
}

#lienCarte:hover {
    cursor: pointer;
}

#carte {
    width: 450px;
    height: 350px;
    margin-top: 10px;
    margin-right: 10px
}

@media only screen and (max-width: 500px) {
    #carte {
        width: 100%;
    }
}

.ui-autocomplete-category {
    background: #135287;
}

.titresansbg {
    background: none
}

.divsupplement {
    display: inline-block;
    border-top: 2px solid #939393;
    color: #939393;
    width: 450px;
}

.supplementbas {
    border-bottom: 2px solid #939393;
    margin-bottom: 10px;
}

.info {
    font-size: 12px;
    color: #AEAEAE;
}

table {
    border-collapse: collapse;
}

.infobot {
    border-bottom: 2px solid #AEAEAE;
}

#personne4 {
    color: #939393;
}

.fondblanc {
    background-color: #FFF;
}

.donnee {
    background-color: #FFF;
}

.decalage12px {
    margin-left: 22px;
}

.calculeTaxi input[type="text"] {
    background-color: #FFF
}

#resultat {
    box-shadow: 1px 3px 0px 0px rgba(150, 150, 150, 0.75);
    background: #FFF;
    display: none;
    padding: 10px;
    padding-top: 0px;
    margin-bottom: 10px;
}

#detail {
    padding-left: 50px;
    display: inline-block;
}

.divlienCarte {
    text-align: center;
}

ul {
    list-style-type: none;
    -webkit-padding-start: 10px;
}

#listdepartement {
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -webkit-column-rule: 1px solid #135287;
    -moz-column-rule: 1px solid #135287;
    column-rule: 1px solid #135287;
}

#listdepartement .ul3 li {
    width: 100%
}

#prixcourse {
    font-size: 20px;
    color: #2491d4;
}

.header118 {
    margin-top: 20px;
    max-width:100%;
}

.tableTarif, .tableTarif th, .tableTarif td {
    border: 1px solid black;
    padding: 5px;
}

.tableTarif {
    margin-top: 10px;
}

/**
* CSS themes for simplePagination.js
* Author: Flavius Matis - http://flaviusmatis.github.com/
* URL: https://github.com/flaviusmatis/simplePagination.js
*/

ul.simple-pagination {
    list-style: none;
}

.simple-pagination {
    display: block;
    overflow: hidden;
    padding: 0 5px 5px 0;
    margin: 0;
}

.simple-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.simple-pagination li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
}

span.ellipse.clickable {
    cursor: pointer;
}

.ellipse input {
    width: 3em;
}

/*------------------------------------*\
	Compact Theme Styles
\*------------------------------------*/

.compact-theme a, .compact-theme span {
    float: left;
    color: #333;
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #AAA;
    border-left: none;
    min-width: 14px;
    padding: 0 7px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%, #efefef 100%); /* W3C */
}

.compact-theme a:hover {
    text-decoration: none;
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100%, #bbbbbb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* IE10+ */
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* W3C */
}

.compact-theme li:first-child a, .compact-theme li:first-child span {
    border-left: 1px solid #AAA;
    border-radius: 3px 0 0 3px;
}

.compact-theme li:last-child a, .compact-theme li:last-child span {
    border-radius: 0 3px 3px 0;
}

.compact-theme .current {
    background: #bbbbbb; /* Old browsers */
    background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbbbbb), color-stop(100%, #efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* IE10+ */
    background: linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* W3C */
    cursor: default;
}

.compact-theme .ellipse {
    background: #EAEAEA;
    padding: 0 10px;
    cursor: default;
}

/*------------------------------------*\
	Light Theme Styles
\*------------------------------------*/

.light-theme a, .light-theme span {
    float: left;
    color: #666;
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #BBB;
    min-width: 14px;
    padding: 0 7px;
    margin: 0 5px 0 0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%, #efefef 100%); /* W3C */
}

.light-theme a:hover {
    text-decoration: none;
    background: #FCFCFC;
}

.light-theme .current {
    background: #666;
    color: #FFF;
    border-color: #444;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
    cursor: default;
}

.light-theme .ellipse {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    cursor: default;
}

/*------------------------------------*\
	Dark Theme Styles
\*------------------------------------*/

.dark-theme a, .dark-theme span {
    float: left;
    color: #CCC;
    font-size: 14px;
    line-height: 24px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #222;
    min-width: 14px;
    padding: 0 7px;
    margin: 0 5px 0 0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background: #555; /* Old browsers */
    background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #333)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #555 0%, #333 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #555 0%, #333 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #555 0%, #333 100%); /* IE10+ */
    background: linear-gradient(top, #555 0%, #333 100%); /* W3C */
}

.dark-theme a:hover {
    text-decoration: none;
    background: #444;
}

.dark-theme .current {
    background: #222;
    color: #FFF;
    border-color: #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
    cursor: default;
}

.dark-theme .ellipse {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    cursor: default;
}