@import url(global.css);
/*
=========================================================================
	Titres particuliers
 - H1 avec la bande photo
=========================================================================

*/
h1.titre-photo {
    background: #444 linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)) center top no-repeat;
    background-size: cover;
    padding: 40px 0 35px 0;
    color: #FFFFFF;
    font-size: 1.5em;
    text-align: center;
    margin: 0;
}
main.citoyens h1.titre-photo {
    border-bottom: 10px solid #108848;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/titres/citoyens/img-titre-citoyens.jpg);
}
main.gensaffaires h1.titre-photo {
    border-bottom: 10px solid #027AC5;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/titres/gens_affaires/img-titre-gens-affaires.jpg);
}
main.touristes h1.titre-photo {
    border-bottom: 10px solid #cd4c1d;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/titres/touristes/img-titre-touristes.jpg);
}
main.apropos h1.titre-photo {
    border-bottom: 10px solid #697697;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/titres/apropos/img-titre-apropos.jpg);
}
main.carte-interactive h1.titre-photo {
    border-bottom: 10px solid #697697;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/titres/carte-interactive/img-titre-carte-interactive.jpg);
}
@media (min-width: 767px) {
    h1.titre-photo {
        font-size: 3em;
        padding: 88px 0 73px 0;
    }
    main.citoyens h1.titre-photo {
        border-bottom: 30px solid #108b49;
    }
    main.gensaffaires h1.titre-photo {
        border-bottom: 30px solid #027ac5;
    }
    main.touristes h1.titre-photo {
        border-bottom: 30px solid #cd4c1d;
    }
    main.apropos h1.titre-photo {
        border-bottom: 30px solid #697697;
    }
    main.carte-interactive h1.titre-photo {
        border-bottom: 30px solid #144487;
        padding: 60px 0 45px 0;
    }
}
/* A valider si le cas dans tous les hub */
#bc_zone_capsules {
    display: none;
}
/* Zone promo */
.promo {
    margin: 0 auto !important;
    width: 100%;
    max-width: 800px;
    padding: 20px;
}
/*
=========================================================================
	Hub (menu section)
 - Styles pour les hubs
=========================================================================

*/
#menu-central {
    background-color: #f2f2f2;
    padding: 1em 15px;
    text-wrap: pretty;
}
@media (min-width: 315px) {
    #menu-central {
        background-color: #f2f2f2;
        padding: 1em 15px;
    }
}
main:not(.touristes) #menu-central a {
    background-color: white;
    display: block;
    min-height: 50px;
    padding: 1em 2em 1em 1em;
}
main:not(.touristes) #menu-central a p {
    display: none;
}
main:not(.touristes) #menu-central ul {
    list-style: none;
    margin: auto;
}
main:not(.touristes) #menu-central ul li {
    margin-top: 0.4em;
}
main:not(.touristes) #menu-central a {
    text-decoration: none;
}
@media (max-width: 766px) {
    main:not(.touristes) #menu-central ul li:first-child {
        margin-top: 0;
    }
    main:not(.touristes) #menu-central a h2 {
        font-size: 16px;
        margin: 0;
        transition: color 0.3s, opacity 0.3s;
    }
    main:not(.touristes) #menu-central a:focus h2, main:not(.touristes) #menu-central a:hover h2 {
        opacity: 0.5;
        color: #074b98;
    }
}
@media (min-width: 767px) {
    #menu-central {
        padding-left: 1em;
        padding-right: 1em;
    }
    main:not(.touristes) #menu-central ul {
        padding-top: 10px;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    main:not(.touristes) #menu-central ul li {
        -webkit-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 320px;
        position: relative;
        border: 20px solid transparent;
        border-bottom-width: 10px;
    }
    main:not(.touristes) #menu-central a {
        height: 235px;
        padding: 100px 16px;
        position: relative;
        box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0);
        transition: background-color 0.5s, box-shadow 0.5s;
    }
    main:not(.touristes) #menu-central > ul > li:before {
        background-image: linear-gradient(to bottom, rgba(7, 75, 152, 1) 100px, rgba(24, 109, 183, 1) 100%);
        content: " ";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    main:not(.touristes) #menu-central a:focus, main:not(.touristes) #menu-central a:hover {
        background: rgba(255, 255, 255, 0);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        transition: background-color 0.3s, box-shadow 0.3s;
    }
    main:not(.touristes) #menu-central a p {
        display: block;
        line-height: 18px;
    }
    main:not(.touristes) #menu-central a:focus p, main:not(.touristes) #menu-central a:hover p, main:not(.touristes) #menu-central a:focus h2, main:not(.touristes) #menu-central a:hover h2 {
        color: white;
        transition: color 0.3s;
    }
    main:not(.touristes) #menu-central a:active {
        box-shadow: none;
    }
    main:not(.touristes) #menu-central a:active p, #menu-central a:active h2 {
        opacity: 0.5;
    }
    main:not(.touristes) #menu-central h2, #menu-central p {
        transition: color 0.5s;
    }
    main:not(.touristes) #menu-central h2 {
        font-size: 16px;
        margin: 16px 0 5px 0;
    }
    main:not(.touristes) #menu-central p {
        color: black;
        font-size: 15px;
    }
    /* Image */
    main:not(.touristes) #menu-central a:before {
        position: absolute;
        width: 100%;
        height: 100px;
        max-height: 200px;
        content: "";
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: top;
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7));
        background-size: cover;
    }
}
/* Largeur de page */
main:not(.touristes) #menu-central ul, main.touristes #menu-central div.colonnes-3, main.touristes #menu-central h2 {
    max-width: 540px;
}
@media (min-width: 767px) {
    main:not(.touristes) #menu-central ul, main.touristes #menu-central div.colonnes-3, main.touristes #menu-central h2 {
        max-width: 640px;
    }
}
@media (min-width: 994px) {
    main:not(.touristes) #menu-central ul, main.touristes #menu-central div.colonnes-3, main.touristes #menu-central h2 {
        max-width: 960px;
    }
}
@media (min-width: 1210px) {
    main:not(.touristes) #menu-central ul, main.touristes #menu-central div.colonnes-3, main.touristes #menu-central h2 {
        max-width: 1200px;
    }
}
@media (min-width: 994px) {
    main:not(.touristes) #menu-central ul li {
        -webkit-flex: 0 0 33.33333333333333%;
        flex: 0 0 33.33333333333333%;
    }
}
@media (min-width: 1210px) {
    main:not(.touristes) #menu-central ul li {
        -webkit-flex: 0 0 25%;
        flex: 0 0 25%;
    }
}
@media all and (min-width: 1210px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    main:not(.touristes) #menu-central ul li {
        -webkit-flex: 0 0 21%;
        flex: 0 0 21%;
    }
}
/*
=========================================================================
	Images Citoyens (.citoyens)
=========================================================================
*/
.citoyens #menu-central a.accessibilite:before {
    background-image: url('/img/hub/citoyens/img-accessibilite.jpg');
}
.citoyens #menu-central a.aines:before {
    background-image: url('/img/hub/citoyens/img-aines.jpg');
}
.citoyens #menu-central a.animaux:before {
    background-image: url('/img/hub/citoyens/img-animaux.jpg');
}
.citoyens #menu-central a.arrondissements:before {
    background-image: url('/img/hub/citoyens/img-arrondissements.jpg');
}
.citoyens #menu-central a.art-culture:before {
    background-image: url('/img/hub/citoyens/img-art-culture.jpg');
}
.citoyens #menu-central a.bibliotheques:before {
    background-image: url('/img/hub/citoyens/img-bibliotheques.jpg');
}
.citoyens #menu-central a.cour-municipale:before {
    background-image: url('/img/hub/citoyens/img-cour-municipale.jpg');
}
.citoyens #menu-central a.deplacements:before {
    background-image: url('/img/hub/citoyens/img-deplacements.jpg');
}
.citoyens #menu-central a.deneigement:before {
    background-image: url('/img/hub/citoyens/img-deneigement.jpg');
}
.citoyens #menu-central a.environnement:before {
    background-image: url('/img/hub/citoyens/img-environnement.jpg');
}
.citoyens #menu-central a.immigrants:before {
    background-image: url('/img/hub/citoyens/img-nouveaux-arrivants.jpg');
}
.citoyens #menu-central a.gouvernance:before {
    background-image: url('/img/hub/apropos/img-gouvernance.jpg');
}
.citoyens #menu-central a.incendie:before {
    background-image: url('/img/hub/citoyens/img-incendie.jpg');
}
.citoyens #menu-central a.loisirs-et-sports:before {
    background-image: url('/img/hub/citoyens/img-loisirs-et-sports.jpg');
}
.citoyens #menu-central a.matieres-residuelles:before {
    background-image: url('/img/hub/citoyens/img-matieres-residuelles.jpg');
}
.citoyens #menu-central a.participation-citoyenne:before {
    background-image: url('/img/hub/apropos/img-participation-citoyenne.jpg');
}
.citoyens #menu-central a.patrimoine:before {
    background-image: url('/img/hub/citoyens/img-patrimoine.jpg');
}
.citoyens #menu-central a.police:before {
    background-image: url('/img/hub/citoyens/img-police.jpg');
}
.citoyens #menu-central a.propriete:before {
    background-image: url('/img/hub/citoyens/img-propriete.jpg');
}
.citoyens #menu-central a.reglementation-permis:before {
    background-image: url('/img/hub/citoyens/img-reglementation-permis.jpg');
}
.citoyens #menu-central a.stationnement:before {
    background-image: url('/img/hub/citoyens/img-stationnement.jpg');
}
.citoyens #menu-central a.taxes-evaluation:before {
    background-image: url('/img/hub/citoyens/img-taxes-evaluation.jpg');
}
.citoyens #menu-central a.securite-civile:before {
    background-image: url('/img/hub/citoyens/img-securite-civile.jpg');
}
.citoyens #menu-central a.travaux-entretien-rues:before {
    background-image: url('/img/hub/citoyens/img-travaux-entretien-rues.jpg');
}
.citoyens #menu-central a.vivre-ensemble:before {
    background-image: url('/img/hub/citoyens/img-vivre-ensemble.jpg');
}
/*
=========================================================================
	Gens d'affaires (.gensaffaires)
=========================================================================
*/
.gensaffaires #menu-central a.appels-offres:before {
    background-image: url('/img/hub/gens_affaires/img-appel-d-offres-et-contrats.jpg');
}
.gensaffaires #menu-central a.developper-entreprise:before {
    background-image: url('/img/hub/gens_affaires/img-creer-et-developper-une-entreprise.jpg');
}
.gensaffaires #menu-central a.financement:before {
    background-image: url('/img/hub/gens_affaires/img-financement.jpg');
}
.gensaffaires #menu-central a.immigration:before {
    background-image: url('/img/hub/gens_affaires/img-immigration.jpg');
}
.gensaffaires #menu-central a.fournisseurs:before {
    background-image: url('/img/hub/gens_affaires/img-fournisseurs.jpg');
}
.gensaffaires #menu-central a.implantation:before {
    background-image: url('/img/hub/gens_affaires/img-implantation-projets-immobiliers.jpg');
}
.gensaffaires #menu-central a.organiser-evenement:before {
    background-image: url('/img/hub/gens_affaires/img-organiser-un-evenement.jpg');
}
.gensaffaires #menu-central a.organismes:before {
    background-image: url('/img/hub/gens_affaires/img-organismes.jpg');
}
.gensaffaires #menu-central a.environnement:before {
    background-image: url('/img/hub/gens_affaires/img-environnement.jpg');
}
.gensaffaires #menu-central a.reglementation:before {
    background-image: url('/img/hub/gens_affaires/img-reglements-et-permis.jpg');
}
.gensaffaires #menu-central a.tournage:before {
    background-image: url('/img/hub/gens_affaires/img-tournage.jpg');
}
/*
=========================================================================
	Slogan votre succès notre adn
=========================================================================

*/
.gensaffaires .promo p.sloganADN {
    color: #024999;
    font-family: "proxima-nova", sans-serif;
    font-weight: bold;
    font-size: 25px;
    margin-top: 1em;
    text-transform: uppercase;
}
@media (min-width: 767px) {
    .gensaffaires .promo p.sloganADN {
        font-size: 30px;
        margin-top: 0.5em;
    }
}
@media (min-width: 994px) {
    .gensaffaires .promo p.sloganADN {
        font-size: 40px;
    }
}
@media (min-width: 1210px) {
    .gensaffaires .promo p.sloganADN {
        font-size: 42px;
    }
}
.gensaffaires .promo p.sloganADN span {
    color: #4895c9
}
.gensaffaires #menu-central .promo {
    max-width: 540px;
}
@media (min-width: 767px) {
    .gensaffaires #menu-central .promo {
        border-left: 20px solid transparent;
        max-width: 640px;
    }
}
@media (min-width: 994px) {
    .gensaffaires #menu-central .promo {
        max-width: 960px;
    }
}
@media (min-width: 1210px) {
    .gensaffaires #menu-central .promo {
        max-width: 1200px;
    }
}
/*
=========================================================================
	Touristes (.touristes)
=========================================================================
*/
.touristes #menu-central a.acces:before {
    background-image: url('/img/hub/touristes/img-acces.jpg');
}
.touristes #menu-central a.attraits:before {
    background-image: url('/img/hub/touristes/img-attraits.jpg');
}
.touristes #menu-central a.deplacements-commodites:before {
    background-image: url('/img/hub/touristes/img-deplacements.jpg');
}
.touristes #menu-central a.evenements:before {
    background-image: url('/img/hub/touristes/img-evenements.jpg');
}
.touristes #menu-central a.meteo:before {
    background-image: url('/img/hub/touristes/img-meteo.jpg');
}
main.touristes #menu-central div.colonnes-3 {
    margin: auto
}
@media (max-width: 819px) {
    #promo {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (min-width: 767px) {
    #promo {
        max-width: 535px;
        margin: auto;
    }
}
@media (min-width: 1200px) {
    #promo {
        max-width: 800px;
    }
}
main.touristes #menu-central h2 {
    margin: auto
}
main.touristes #menu-central h3 {
    font-size: 16px
}
@media (min-width: 767px) {main.touristes #menu-central h3 {
    font-size: 18px
}}



main.touristes #menu-central div.col.encadre {
    background-color: white;
    box-shadow: none;
    border-color: #f2f2f2
}
@media (min-width: 450px) {
    main.touristes #menu-central div.col.encadre figure {
        max-width: 320px;
    }
}
@media (min-width: 450px) {
    main.touristes #menu-central figure {
        max-width: 320px
    }
}
/*
=========================================================================
	À propos (.apropos )
=========================================================================
*/
.apropos #menu-central a.acces-information:before {
    background-image: url('/img/hub/apropos/img-acces-information.jpg');
}
.apropos #menu-central a.gouvernance:before {
    background-image: url('/img/hub/apropos/img-gouvernance.jpg');
}
.apropos #menu-central a.participation-citoyenne:before {
    background-image: url('/img/hub/apropos/img-participation-citoyenne.jpg');
}
.apropos #menu-central a.administration:before {
    background-image: url('/img/hub/apropos/img-administration.jpg');
}
.apropos #menu-central a.avis-publics:before {
    background-image: url('/img/hub/apropos/img-avis-publics.jpg');
}
.apropos #menu-central a.elections-municipales:before {
    background-image: url('/img/hub/apropos/img-elections.jpg');
}
.apropos #menu-central a.emplois:before {
    background-image: url('/img/hub/apropos/img-emplois.jpg');
}
.apropos #menu-central a.espace-presse:before {
    background-image: url('/img/hub/apropos/img-espace-presse.jpg');
}
.apropos #menu-central a.portrait:before {
    background-image: url('/img/hub/apropos/img-portrait.jpg');
}
.apropos #menu-central a.planification-orientations:before {
    background-image: url('/img/hub/apropos/img-planification-orientations.jpg');
}
.apropos #menu-central a.publications:before {
    background-image: url('/img/hub/apropos/img-publications.jpg');
}
.apropos #menu-central a.internationales:before {
    background-image: url('/img/hub/apropos/img-internationales.jpg');
}
.apropos #menu-central a.profil-financier:before {
    background-image: url('/img/hub/apropos/img-profil-financier.jpg');
}
.apropos #menu-central a.programmes-subventions:before {
    background-image: url('/img/hub/apropos/img-programmes-subventions.jpg');
}
/*
=========================================================================
	Images Carte interactive (.carte-interactive)
=========================================================================
*/
.carte-interactive h1 img {
    max-width: 350px
}
.carte-interactive #menu-central a.amenagement:before {
    background-image: url('/img/hub/citoyens/img-environnement.jpg');
}
.carte-interactive #menu-central a.culture:before {
    background-image: url('/img/hub/carte-interactive/img-culture-patrimoine.jpg');
}
.carte-interactive #menu-central a.demographie:before {
    background-image: url('/img/hub/citoyens/img-vivre-ensemble.jpg');
}
.carte-interactive #menu-central a.deneigement:before {
    background-image: url('/img/hub/citoyens/img-deneigement.jpg');
}
.carte-interactive #menu-central a.environnement:before {
    background-image: url('/img/hub/carte-interactive/img-environnement.jpg');
}
.carte-interactive #menu-central a.limites:before {
    background-image: url('/img/hub/citoyens/img-arrondissements.jpg');
}
.carte-interactive #menu-central a.loisirs-sports:before {
    background-image: url('/img/hub/carte-interactive/img-loisirs-sports.jpg');
}
/*.carte-interactive #menu-central a.mobilite:before {
	background-image: url('/img/hub/carte-interactive/img-mobilite-active.jpg');
}*/
.carte-interactive #menu-central a.matrice-graphique:before {
    background-image: url('/img/hub/citoyens/img-taxes-evaluation.jpg');
}
.carte-interactive #menu-central a.nettoyage-rues:before {
    background-image: url('/img/hub/citoyens/img-travaux-entretien-rues.jpg');
}
.carte-interactive #menu-central a.parcs:before {
    background-image: url('/img/hub/carte-interactive/img-parcs.jpg');
}
.carte-interactive #menu-central a.circulation:before {
    background-image: url('/img/hub/carte-interactive/img-reseaux-circulation.jpg');
}
/*
.carte-interactive #menu-central a.securite-routiere:before {
	background-image: url('/img/hub/carte-interactive/img-securite-routiere.jpg');
}*/
.carte-interactive #menu-central a.stationnement:before {
    background-image: url('/img/hub/citoyens/img-stationnement.jpg');
}
.carte-interactive #menu-central a.tramway:befinfore {
    background-image: url('/img/hub/carte-interactive/img-tramway.jpg');
}
.carte-interactive #menu-central a.travaux-routiers:before {
    background-image: url('/img/hub/carte-interactive/img-travaux-routiers.jpg');
}
/*
=========================================================================
	Introduction
 =========================================================================

*/
#intro p {
    font-size: 18px;
    line-height: 22px;
}
#intro {
    padding-top: 2.8em;
}
#intro > p:last-child, #intro > div:last-child {
    margin-bottom: calc(50px - 12px);
}
#intro + #texte {
    padding-top: 0;
    margin-top: -12px;
}
@media (max-width: 819px) {
    #intro {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (min-width: 767px) {
    #intro {
        max-width: 535px;
        margin: auto;
    }
}
@media (min-width: 1200px) {
    #intro {
        max-width: 800px;
    }
}
/* 

	menu-pictos 

*/
.menu-pictos {
    margin: 0 auto;
    max-width: 580px;
    padding: 30px 0 30px;
}
@media (max-width: 500px) {
    .menu-pictos {
        width: 86%;
    }
    .menu-pictos div.col {
        margin: 10px 0;
    }
}
/*
=========================================================================
Bas de page
 =========================================================================

*/
#bas-page {
    margin: auto;
    margin-top: 20px;
}
@media (min-width: 1200px) {
    #bas-page {
        max-width: 800px;
    }
}