@charset "utf-8";
/*
=========================================================================
Médias
- Alignement des images
- Taille et légende
- Image d'entête avec une légende
- Agrandissement et zoom sur les images
- Galeries photos
- Vidéos : Images vidéo qui pointent ensuite vers Youtube
- Sons
- Carte interactive

=========================================================================
*/
/*
==============================================================
 Alignement des images
    aligne-gauche (par défaut) ou aligne-droite
==============================================================carj
*/
@media (min-width: 450px) {
    .ph_aligne_gauche /* obsolète */ , .ph-aligne-gauche, .aligne-gauche, .aligne_gauche /* obsolète */ {
        float: left;
        margin-right: 1em;
    }
    .ph_aligne_droite, /* obsolète */ .ph-aligne-droite, .aligne-droite, .aligne_droite /* obsolète */ {
        float: right;
        margin-left: 1em;
    }
}
/*
    Forcer le responsive sur une image
*/
@media (max-width: 767px) {
    .responsive img, img.responsive {
        width: 100%;
        height: auto;
    }
}
/*
==============================================================
Image dans le contenu
		- Taille (?)
		- Légende (figcaption)

		.photo-verticale  : pour le moment ça change rien, mais au cas où on veuille réduire le format des photos verticales.
==============================================================
*/
figure {
    margin: 10px 0px;
    width: 100%
}
figure img {
    width: 100%;
    height: auto
}
@media (min-width: 450px) {
    figure {
        max-width: 260px;
        margin: 0px;
    }
    /* Grande image, sans float */
    figure.img-grand {
        max-width: 340px;
        margin: 0px;
    }
    /* Mini image dans une liste exemple horaire conférencier */
    figure.img-mini {
        max-width: 80px;
        margin: 0px;
        margin-right: 10px;
    }
    /* Image pleine largeur, sans float */
    figure.img-pleine-largeur {
        max-width: 100%;
        margin: 0px;
    }
}
/* Légende d'une image*/
figcaption, .figcaption {
    color: #767676;
    font-size: 14px;
    margin-bottom: 16px;
    margin-top: 3px;
}
figcaption a, a figcaption {
    color: #074b98
}
figcaption a:hover, a:hover figcaption {
    color: #107CC0
}
figcaption .note {
    font-size: 12px;
}
/* Image dans une liste */
.liste figure.aligne-droite:not(.photo-verticale), .liste figure.ph-aligne-droite:not(.photo-verticale) {
    max-width: 200px;
}
/* Image verticale dans une liste */
.liste figure.aligne-droite.photo-verticale, .liste figure.ph-aligne-droite.photo-verticale {
    max-width: 150px;
}
.liste figure.aligne-droite.photo-verticale img, .liste figure.ph-aligne-droite.photo-verticale img {
    width: 100%
}
/*

/* Image mini dans une liste */
.ligne-image-mini {
    clear: left
}
/*==============================================================
Image d'entête avec une légende
==============================================================

*/
h1 + figure {
    max-width: none;
    position: relative;
}
h1 + figure img {
    display: block;
}
h1 + figure figcaption {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    color: rgba(255, 255, 255, 0.9);
    font: normal 0.9em/1.3em 'proxima-nova-medium', sans-serif;
    margin: 0;
    padding: 0.75em 1.1em;
    position: absolute;
    width: 100%;
}
/*
	==============================================================
	Agrandissement et zoom sur les images
	==============================================================
*/
[data-fancybox] {
    position: relative;
    cursor: pointer;
}
[data-zoom] {
    cursor: pointer;
}
[data-fancybox] img {
    -ms-interpolation-mode: bicubic;
    display: block;
}
@media (min-width: 600px) {}
[data-fancybox] .df-icon {
    cursor: pointer;
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
[data-fancybox] .df-cercle {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0;
    transition: opacity 0.2s;
}
[data-fancybox] .zoom .df-cercle, [data-fancybox] .zoom-video .df-cercle, [data-fancybox] .zoom-objet360 .df-cercle, [data-fancybox] .zoom-photo360 .df-cercle, [data-fancybox] .zoom-galerie .df-cercle {
    opacity: 0.65;
}
[data-fancybox] .df-picto {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0;
    transition: opacity 0.2s;
}
[data-fancybox] .zoom .df-picto, [data-fancybox] .zoom-video .df-picto, [data-fancybox] .zoom-objet360 .df-picto, [data-fancybox] .zoom-photo360 .df-picto, [data-fancybox] .zoom-galerie .df-picto {
    opacity: 1;
}
[data-fancybox]:hover .df-cercle {
    opacity: 0.65;
    transition: opacity 0.4s;
}
[data-fancybox]:hover .zoom .df-cercle, [data-fancybox]:hover .zoom-video .df-cercle, [data-fancybox]:hover .zoom-objet360 .df-cercle, [data-fancybox]:hover .zoom-photo360 .df-cercle, [data-fancybox]:hover .zoom-galerie .df-cercle {
    opacity: 1;
    transition: opacity 0.4s;
}
[data-fancybox]:hover .df-picto {
    opacity: 1;
    transition: opacity 0.4s;
}
[data-fancybox] .df-icon:hover .df-cercle {
    opacity: 1;
    transition: opacity 0.3s;
}
.fancybox-svg {
    background-color: white;
    padding: 1em;
}
/*
=========================================================================
	Galerie photo
			Voir juiceboxgallery : /css/juicebox-gallery/theme.css
			Ce css est loadé via le javascript de la galerie + paramètre (themeURL) sur la création de la galerie.
=========================================================================
*/
#juicebox, #juicebox-container {
    margin: 1em 0 2em;
}
.galerie-photos {
    clear: both
}
/*
=========================================================================
	Images vidéo qui pointent ensuite vers Youtube
=========================================================================
*/
/* Début lien vidéo vers Youtube ou site externe */
.lien_video, /* obsolète */ .lien-video {
    visibility: hidden;
    display: inline-block;
    margin-bottom: 8px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s;
    width: 100%;
}
@media (min-width: 450px) {
    .lien_video, /* obsolète */ .lien-video {
        -webkit-filter: grayscale(18%);
        filter: grayscale(18%);
        opacity: 0.92;
        width: auto;
    }
}
.lien_video:hover, /* obsolète */ .lien-video:hover {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%)
}
@media (min-width: 450px) {
    .lien_video figure, /* obsolète */ .lien-video figure {
        max-width: 260px;
    }
}
.lien_video > img, /* obsolète */ .lien-video > img {
    width: 100%;
}
@media (min-width: 450px) {
    .lien_video > img, /* obsolète */ .lien_video > figure > img, /* obsolète */ .lien-video > img, .lien-video > figure > img {
        width: 260px;
        height: auto;
    }
}
.lien_video .df-icon, /* obsolète */ .lien-video .df-icon {
    position: absolute;
    width: 65px;
    height: 65px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
@media (min-width: 450px) {
    .lien_video .df-icon, /* obsolète */ .lien-video .df-icon {}
}
/*
@media (min-width: 450px) {
	.lien_video .df-icon,
	.lien-video .df-icon {
		top: 40px;
		left: 97.5px;
		-webkit-transform: translate(0,0);
		transform: translate(0,0);
	}
}*/
.lien_video .df-icon img, /* obsolète */ .lien-video .df-icon img {
    position: absolute;
    top: 0
}
.lien_video .df-icon img.df-cercle, /* obsolète */ .lien-video .df-icon img.df-cercle {
    opacity: 0.75;
    transition: opacity 0.2s;
}
.lien_video:hover .df-icon img.df-cercle, /* obsolète */ .lien-video:hover .df-icon img.df-cercle {
    opacity: 1;
    transition: opacity 0.4s;
}
body.accueil .lien_video, /* obsolète */ body.accueil .lien-video {
    margin-bottom: 0;
}
/*-- Vidéo plus grand --*/
.lien-video.video-grand > figure {
    max-width: none;
    margin: 10px 0px;
}
@media (min-width: 450px) {
    .lien-video.video-grand > img, .lien-video.video-grand > figure > img {
        width: 340px;
        height: auto;
    }
}
/*-- Vidéo pleine largeur --*/
.lien-video.video-pleine-largeur {
    margin: 0 0 20px;
}
.lien-video.video-pleine-largeur:last-child {
    margin: 0;
}
.lien-video.video-pleine-largeur > figure {
    max-width: none;
    margin: 10px 0px;
}
.lien_video.video-pleine-largeur > img, /* obsolète */ .lien_video.video-pleine-largeur > figure > img, /* obsolète */ .lien-video.video-pleine-largeur > img, .lien-video.video-pleine-largeur > figure > img {
    width: 100%;
    height: auto;
}
.lien_video.video-pleine-largeur .df-icon, /* obsolète */ .lien-video.video-pleine-largeur .df-icon {
    position: absolute;
    width: 65px;
    height: 65px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/*
=========================================================================
Sons
=========================================================================
*/
.son {
    width: 100%;
}
.mejs__container {
    width: 100% !important;
}
@media (min-width: 450px) {
    .son {
        width: 80%;
    }
}
/*
=========================================================================
Carte interactive

Voir aussi styles-onglets.css pour certains styles
=========================================================================
*/
div.carte-interactive {
    height: 300px;
    border: 1px solid #e6e6e6;
    width: 100%;
    margin: 10px 0px;
}
div.carte-interactive .contentPane p {
    font-size: 12px;
}
div.carte-interactive .contentPane p strong {
    font-size: 13.5px;
}
div.carte-interactive .contentPane ul {
    font-size: 12px;
}
/* Ce style est aussi défini dans applications.css -> Marché de mon secteur */
@media (min-width: 766px) {
    div.carte-interactive {
        height: 450px;
    }
    div.carte-interactive.carte-panoramique {
        height: 300px;
    }
}
/* Légende (utilisée carte des feux clignotants et carte nettoyage printanier)*/
div.carte-interactive-legende .h4 {
    margin-top: 0px
}
div.carte-interactive-legende .h5 {
    margin: 0px
}
div.carte-interactive-legende ul {
    list-style: none;
    margin-bottom: 0.8em;margin-left:0px;
}
div.carte-interactive-legende ul li {
    margin-left: 0px;
}
div.carte-interactive-legende img, div.carte-interactive-legende .img {width:20px;height:20px;
    margin-right: 10px;display:inline-block
}
/*
=========================================================================

Carte Google Maps

=========================================================================
*/
div.carte-google {
    overflow: hidden;
    padding-bottom: 70.25%;
    position: relative;
    height: 0;
}
div.carte-google iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}