/* élément html et body */
html, body {
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
/*font-style: normal;*/
font-size:18px;
color:black;
background-color:#F2F2F2;
}
/* élement main */
main {
background-color:#F2F2F2;
padding:1rem 0 5rem 0;
}
/* tous les éléments p */
p {
border-bottom: 2px dotted transparent;
font-size:0.83rem;
}
/* tous les éléments lit */
li {
font-size:0.83rem;
}
/* tous les éléments h1*/
h1 {
text-align:center;
font-weight: 700;
font-style: normal;
text-transform:uppercase;
font-size:1.4rem;
margin-bottom:1rem;
}
/* tous les éléments h2 */
h2 {
font-weight: 700;
font-style: normal;
text-transform:uppercase;
font-size:1.37rem;
}
/* tous les éléments h3 */
h3 {
font-weight: 400;
font-style: normal;
text-transform:uppercase;
font-size:1rem;
}
/* tous les éléments h4 */
h4 {
font-weight: 600;
font-style: normal;
text-transform:uppercase;
font-size:0.9rem;
vertical-align:middle;
margin-top:0;
margin-bottom:0;
padding-top:0;
padding-bottom:0;
}
/* tous les éléments h5 */
/* utilisé pour le noms de zones dans la liste des parkings (groupe) */
h5 {
text-align:center;
font-weight: 600;
font-style: normal;
text-transform:uppercase;
font-size:0.9rem;
vertical-align:middle;
margin-top:30;
margin-bottom:20;
padding-top:0;
padding-bottom:0;
}
/* tous les éléments a, a survolé, a en focus ou a actif */
a, a:hover, a:focus, a:active {
color:inherit;
text-decoration:none;
}
/* tous les éléments p d'un élément a survolé, p d'un élément a en focus ou a actif */
a:hover p, a:focus p, a:active p {
border-bottom-color: #C7C7C7;
transition: border-color .3s ease-in-out;
}
/* tous les éléments iframe */
iframe {
position: absolute;
max-height: 100%;
max-width: 100%;
width: 100%;
height: calc( 100% - 117px );
border:none;
top: 61px;
}
/* tous les éléments header */
header {
border-bottom:2px solid #E20717;
/* Pour enlever la barre rouge : */
/* border-bottom : 0p */
background-color:#ffffff;
}
/* tous les éléments div directement enfants des éléments avec la classe row eux même enfants de header */
header .row > div {
margin:0;
}
/* tous les éléments image enfant des éléments header */
/*header img {
width:75px;
height:auto;
}*/
/* tous les éléments div directement enfants des éléments avec la classe row eux même enfants des éléments avec la classe header-accueil */
.header-accueil .row > div {
margin-top:.64rem ;
margin-bottom:.64rem ;
}
/* tous les éléments image enfant des éléments header-accueil */
.header-accueil img {
width:300px;
height:auto;
}
/* tous les éléments avec la classe row directement enfants des éléments avec la classe container directement enfant avec les éléments header */
header > .container > .row {
height:100%;
}
/* élément avec l'id logo enfant de l'élément header et les éléments avec la classe col-8 directement frère de l'élément avec l'id logo enfant de l'élément header */
header #logo, header #logo + .col-8 {
display: flex;
align-items: center;
justify-content:center;
}
/* les éléments h1 enfant des éléments avec la classe col-8 directement frère de l'élément avec l'id logo enfant de l'élément header */
header #logo + .col-8 h1 {
margin-bottom:0
}
/* les éléments h3 enfant des éléments avec la classe col-8 directement frère de l'élément avec l'id logo enfant de l'élément header */
header #logo + .col-8 h3 {
margin-bottom:0;
}
/* les éléments image, enfant de l'élément avec l'id logo, enfant des éléments header */
header #logo img {
width:100%;
height:auto;
max-width:141px;
max-height:55px;
}
/* tous les éléments avec la classe nopadding */
.nopadding {
padding-left:0;
padding-right:0;
}
/* élément avec l'id map */
#map {
width: 100%;
height: calc( 100% - 50px ); /*100%;*/
}
/* tous les éléments avec la classe second-header */
.second-header {
background-color:#E4E4E4;
}
/* tous les éléments main, enfant de l'élément avec l'id transport2 */
#transport2 main {
background-color:white;
}
/* tous les éléments avec la classe card */
.card {
border:0;
margin:.5rem 0;
}
/* tous les éléments avec la classe card-header enfant de la classe card */
.card .card-header {
/*color:inherit;
text-decoration:none;*/
border:0;
}
/* tous les éléments avec la classe container-accueil */
.container-accueil {
padding-top:2rem;
}
/* tous les éléments p enfant des éléments avec la classe container-accueil ou tous les éléments p enfant des éléments avec la classe bloc-signalement */
.container-accueil p, .bloc-signalement p {
font-family: Arial, Helvetica, sans-serif;
font-size:1.8rem;
font-weight: 700;
font-style: normal;
text-transform:uppercase;
margin-bottom:0;
}
/* tous les éléments avec la classe bloc-signalement */
.bloc-signalement {
background-color:#F2F2F2;
padding-top:1rem;
padding-bottom:1.05rem;
}
/* tous les éléments p enfant des éléments avec la classe bloc-signalement */
.bloc-signalement p {
font-size:1.22rem;
color:#E20717;
margin-bottom:0;
}
/* tous les éléments avec la classe hr-accueil */
.hr-accueil {
border-color: #E20717;
border-width:5px;
width:55px;
margin-top:1.29rem;
margin-bottom:.9rem;
}
/* tous les éléments avec la classe hr-contenu ou tous les éléments avec la classe hr-contenu enfant de l'élément avec l'id transport2 */
.hr-contenu, #transport2 .hr-contenu {
border-color: #E20717;
border-width:1px;
width:55px;
margin-left:0;
margin-bottom:0;
margin-top:0;
}
/* tous les éléments avec la classe btn et focus ou tous les éléments avec la classe btn qui sont à l'état focus */
.btn.focus, .btn:focus {
box-shadow:none;
}
/* tous les éléments avec la classe btn-link ou tous les éléments avec la classe btn-link qui sont à l'état survol ou tous les éléments avec la classe btn-link qui sont à l'état focus */
.btn-link, .btn-link:hover, .btn-link:focus {
color:black;
}
/* tous les éléments avec la classe hr-contenu enfant de l'élément avec l'id transport2 */
#transport2 .hr-contenu {
border-color: #e4e4e4;
width:100%;
}
/* l'élément avec l'id btn-retour */
#btn-retour {
background-color:#D4D4D4;
}
/* l'élément avec l'id btn-menu */
#btn-menu {
background-color:#C4C4C4;
}
/* l'élément avec l'id nav-back*/
#nav-back {
margin-top:0;
margin-bottom:0;
}
/* tous les éléments div enfants de l'élément avec l'id nav-back */
#nav-back div {
width:100%;
height:100%;
}
/* tous les éléments image enfants de l'élément avec l'id nav-back */
#nav-back img {
width:.9rem;
/* padding-top:1.1rem; */
}
/* l'élément avec l'id logo */
#logo {
margin-top:0.5rem;
margin-bottom:0.5rem;
}
/* tous les éléments div où l'id commence par btn- */
div[id^="btn-"] {
padding-top:1rem;
padding-bottom:1rem;
text-align:center;
font-size:.83rem;
text-transform:uppercase;
font-weight: 700;
font-style: normal;
}
/* l'élément avec l'id breadcrumb */
#breadcrumb {
background-color:#E4E4E4;
padding-top:.3rem;
padding-bottom:.15rem;
text-transform:uppercase;
text-align:center;
}
/* tous les éléments p enfant de l'élément avec l'id breadcrumb */
#breadcrumb p{
margin-bottom:0;
font-weight: bold;
font-style: italic;
font-size:1.05rem;
border-bottom:0;
}
/* tous les éléments avec la classe info-supplementaire enfant des éléments avec la classe ligne enfant de tous les éléments div où l'id commence par list-lien- */
div[id^="liste-lien-"] .ligne .info-supplementaire {
justify-content:center;
}
/* tous les éléments avec la classe libelle enfant des éléments avec la classe ligne enfant de tous les éléments div où l'id commence par list-lien-
ou tous les éléments avec la classe info-supplementaire enfant des éléments avec la classe ligne enfant de tous les éléments div où l'id commence par list-lien-*/
div[id^="liste-lien-"] .ligne .libelle, div[id^="liste-lien-"] .ligne .info-supplementaire {
transition:background-color .3s ease-in-out;
padding-top:.5rem;
padding-bottom:.5rem;
}
/* même principe que les lignes précédentes mais selon les états survol, focus ou actif */
div[id^="liste-lien-"] .ligne .libelle:hover, div[id^="liste-lien-"] .ligne .libelle:focus, div[id^="liste-lien-"] .ligne .libelle:active,
div[id^="liste-lien-"] .ligne .info-supplementaire:hover, div[id^="liste-lien-"] .ligne .info-supplementaire:focus, div[id^="liste-lien-"] .ligne .info-supplementaire:active {
background-color:#FFFFFF !important;
cursor:pointer;
}
/* même principe que les lignes précédentes mais selon les états survol, focus ou actif */
div[id^="liste-lien-"] .ligne .info-supplementaire:hover, div[id^="liste-lien-"] .ligne .info-supplementaire:focus, div[id^="liste-lien-"] .ligne .info-supplementaire:active{
cursor:pointer;
}
/* tous les éléments a enfants des éléments avec la classe libelle (selon leur état actif, focus ou survol), enfant des éléments avec la classe ligne, enfants des éléments div où l'id commence par liste-lien- */
div[id^="liste-lien-"] .ligne .libelle:hover a, div[id^="liste-lien-"] .ligne .libelle:focus a, div[id^="liste-lien-"] .ligne .libelle:active a{
text-decoration:underline;
}
/* tous les éléments a enfants des éléments avec la classe ligne enfant des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .ligne a {
width:100%;
}
/* tous les éléments avec la classe picto enfants des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .picto {
display:inline-block;
width:55px !important;
/*height:55px;*/
height:auto;
margin-right:1rem;
line-height: 55px;
}
/* tous les éléments img enfants des éléments avec la classe picto enfants des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .picto img {
width:100% !important;;
/*height:100%;*/
height:auto;
}
/* tous les éléments avec la classe info-supplementaire ou libelle enfants des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .info-supplementaire, div[id^="liste-lien-"] .libelle {
display:flex;
align-items:center;
font-size:1.03rem;
padding-top:.5rem;
padding-bottom:.5rem;
}
/* tous les éléments avec la classe info-supplementaire enfants des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .info-supplementaire {
padding-top:0;
padding-bottom:.5rem;
}
/* tous les éléments img enfants des éléments avec la classe info-supplementaire enfants des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .info-supplementaire img {
width:30px;
height:30px;
margin-bottom:0;
transition: all .3s ease-in-out;
}
/* tous les éléments a enfants des éléments avec la classe info-supplementaire enfants des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .info-supplementaire a {
line-height:normal;
align-items:center;
justify-content:center;
}
/* tous les éléments avec la classe libelle enfants de l'élément avec l'id liste-lien-signalement */
#liste-lien-signalement .libelle {
margin-top:.1rem;
margin-bottom:.2rem;
}
/* tous les éléments avec la classe .picto-arrow */
.picto-arrow {
float:right;
}
/* tous les éléments avec la classe .picto-external-link */
.picto-external-link {
width:20px;
height:20px;
margin-left:.5rem;
}
/* tous les éléments avec la classe .logo-service */
.logo-service {
max-width:100%;
}
/* tous les éléments a enfants de l'élement avec l'id information-modal */
#information-modal a {
text-decoration:underline;
}
/* idem que la règle du dessus avec en plus l'état de l'élément */
#information-modal a:hover, #information-modal a:active, #information-modal a:focus {
color: black;
}
/* tous les éléments avec la classe close enfants des éléments avec la classe modal */
.modal .close {
font-size:2rem;
}
/* tous les éléments avec la classe modal-title */
.modal-title {
line-height:2.3;
font-size:.9rem;
}
/* tous les éléments avec la classe hr-contenu enfants des éléments avec la classe modal-body */
.modal-body .hr-contenu {
margin-left:15px;
}
/* tous les éléments h2 enfants des éléments avec la classe modal-body */
.modal-body h2 {
font-size:1rem;
}
/* tous les éléments avec la classe libelle enfants des éléments avec la classe ligne enfants des éléments avec la classe modal-body */
.modal-body .ligne .libelle {
font-size:1.1rem;
}
/* tous les éléments a enfant de l'élement avec l'id integration-contenu */
#integration-contenu a {
text-decoration:underline;
}
/* tous les éléments avec la classe ligne enfants de l'élement avec l'id liste-stationnement */
#liste-stationnement .ligne {
display:flex;
align-items:center;
}
/* tous les éléments avec la classe col-7 enfant de tous les éléments avec la classe ligne enfants de l'élement avec l'id liste-stationnement */
#liste-stationnement .ligne .col-7 {
padding-left:0;
}
/* tous les éléments avec la classe libelle enfants de l'élement avec l'id liste-stationnement */
#liste-stationnement .libelle {
background-color: rgba(0,0,0,.1);
padding: 0.3rem 0;
margin: 0.7rem 0 0.5rem 0;
}
/* tous les éléments h5 enfants de tous les éléments avec la classe libelle enfants de l'élement avec l'id liste-stationnement */
#liste-stationnement .libelle h5 {
margin-bottom:0;
}
/* tous les éléments footer */
footer {
background-color:#585857;
padding:.5rem 0;
position:fixed;
bottom:0;
width:100vw;
/* height : 55px; */
}
/* tous les éléments ul enfants de footer */
footer ul {
margin-bottom:0;
padding-left:0;
}
/* tous les éléments li enfants des éléments ul enfant des éléments footer */
footer ul li {
list-style-type:none;
display:inline-block;
font-size:.73rem;
color:#FFFFFF;
}
/* juste avant tous les éléments li enfants des éléments ul enfant des éléments footer SAUF le premier li */
footer ul li:not(:first-of-type):before {
content: "•";
padding:0 .5rem;
}
/* tous les éléments a enfants de footer */
footer a {
text-decoration:none;
color:inherit;
}
/* tous les éléments a enfants des éléments avec la classe forward enfants de footer */
footer .forward a{
font-weight:bold;
font-size:.89rem;
}
/* modification du background de progress-bar */
.progress {
background-color: #555;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Filtres de couleur, surtout pour les images SVG */
.filter-pale-grey{
filter: invert(97%) sepia(0%) saturate(5726%) hue-rotate(212deg) brightness(128%) contrast(90%);
}
/* #222222 */
.filter-dark-grey{
filter: invert(10%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(98%) contrast(92%);
}
/* #6cc108 */
.filter-parking-green{
filter: invert(60%) sepia(83%) saturate(1956%) hue-rotate(48deg) brightness(101%) contrast(94%);
}
/* #FF7E00 */
.filter-parking-orange{
filter: invert(49%) sepia(64%) saturate(2379%) hue-rotate(2deg) brightness(105%) contrast(104%);
}
/* #E41818*/
.filter-parking-red{
filter: invert(14%) sepia(94%) saturate(3556%) hue-rotate(351deg) brightness(108%) contrast(101%);
}
/* #2662FF */
.filter-parking-blue{
filter: invert(32%) sepia(98%) saturate(3853%) hue-rotate(220deg) brightness(101%) contrast(100%);
}
/* #222222 */
.filter-parking-black{
filter: invert(10%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(98%) contrast(92%);
}
/* style s'appliquant aux écrans de minimum 769px de large */
@media screen and (min-width: 769px){
/* tous les éléments image enfant des éléments header */
/*header img {
width:80px;
}*/
/* tous les éléments avec la classe container-accueil */
.container-accueil {
padding-top:2.5rem;
}
/* tous les éléments p enfants des éléments avec la classe container-accueil */
.container-accueil p {
font-size:1.7rem;
}
/* tous les éléments avec la classe hr-accueil */
.hr-accueil {
width:35px;
margin-top:.1rem;
margin-bottom:.7rem;
border-width:4px
}
/* tous les éléments footer */
footer {
padding:.7rem 0px;
}
}
/* style s'appliquant aux écrans de minimum 1200px de large */
@media screen and (min-width:1200px) {
/* tous les éléments avec la classe libelle ou info-supplementaire enfants des éléments div avec un id qui commence par liste-lien- */
div[id^="liste-lien-"] .info-supplementaire, div[id^="liste-lien-"] .libelle {
font-size:1.33rem;
}
}