@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;
    }
	
	.encadre.aligne-droite{float:none;display:inline-block;margin-left:0px;}
    .ph_aligne_droite, /* obsolète */ .ph-aligne-droite, .aligne-droite, .aligne_droite /* obsolète */ {
        float: right;
        margin-left: 1em;
    }
	.encadre.aligne-droite{margin-left:0px;}
}


/*
    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: #595959;
    font-size: 14px;
    line-height: 1.2em;
    margin-bottom: 16px;
    margin-top: 3px;
}
figcaption a {
    color: #074b98;
    text-decoration: underline;
}
figcaption a:focus,
figcaption a:hover {
    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;
    text-decoration: none;
}
[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]:focus .df-cercle,
[data-fancybox]:hover .df-cercle {
    opacity: 0.65;
    transition: opacity 0.4s;
}
[data-fancybox]:focus .zoom .df-cercle, 
[data-fancybox]:hover .zoom .df-cercle, 
[data-fancybox]:focus .zoom-video .df-cercle, 
[data-fancybox]:hover .zoom-video .df-cercle, 
[data-fancybox]:focus .zoom-objet360 .df-cercle, 
[data-fancybox]:hover .zoom-objet360 .df-cercle, 
[data-fancybox]:focus .zoom-photo360 .df-cercle, 
[data-fancybox]:hover .zoom-photo360 .df-cercle, 
[data-fancybox]:focus .zoom-galerie .df-cercle,
[data-fancybox]:hover .zoom-galerie .df-cercle {
    opacity: 1;
    transition: opacity 0.4s;
}
[data-fancybox]:focus .df-picto,
[data-fancybox]:hover .df-picto {
    opacity: 1;
    transition: opacity 0.4s;
}
[data-fancybox] .df-icon:focus .df-cercle,
[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 {
    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 {
        -webkit-filter: grayscale(18%);
        filter: grayscale(18%);
        opacity: 0.92;
        width: auto;
    }
}
.lien-video:focus,
.lien-video:hover {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%)
}
@media (min-width: 450px) {
    .lien-video figure {
        max-width: 260px;
    }
    .colonnes-3 .col .lien-video figure {
        max-width: 208px;
    }
}
.lien-video > img {
    width: 100%;
}
@media (min-width: 450px) {
    .lien-video > img, 
    .lien-video > figure > img {
        width: 260px;
        height: auto;
    }
    .colonnes-3 .col .lien-video > img, 
    .colonnes-3 .col .lien-video > figure > img {
        width: 208px;
    }
}
.lien-video .df-icon {
    position: absolute;
    width: 65px;
    height: 65px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.lien-video .df-icon img {
    position: absolute;
    top: 0
}
.lien-video .df-icon img.df-cercle {
    opacity: 0.75;
    transition: opacity 0.2s;
}
.lien-video:focus .df-icon img.df-cercle,
.lien-video:hover .df-icon img.df-cercle {
    opacity: 1;
    transition: opacity 0.4s;
}
body.accueil .lien-video {
    margin-bottom: 0;
}
/*-- Vidéo plus grand --*/
.lien-video.video-grand > figure,
.lien-video.video-grand > a[data-fancybox]{
    max-width: none;
    margin: 10px 0px;
}
@media (min-width: 450px) {
    .lien-video.video-grand > img, 
    .lien-video.video-grand > figure > img,
    .lien-video.video-grand > a[data-fancybox] > 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,
.lien-video.video-pleine-largeur > a[data-fancybox]{
    max-width: none;
    margin: 10px 0px;
}
.lien-video.video-pleine-largeur > img, 
.lien-video.video-pleine-largeur > figure > img,
.lien-video.video-pleine-largeur > a[data-fancybox] > img {
    width: 100%;
    height: auto;
}
.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%);
}

/*
=========================================================================
	Embed vidéo YouTube
=========================================================================
*/
div.video {
	margin-bottom: 12px;
	padding:56.25% 0 0 0;
	position:relative;
}
div.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
=========================================================================
    Vidéo YouTube dans un lightbox
=========================================================================
*/
/*  Format 16/9 pour le fancybox vidéo */

.fancybox-slide--iframe .fancybox-content {
    margin: 0!important;
    max-width: 100%;
    width: 100%;
    padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */
    height: 0 !important;
}
/* don't go full width on wide screens */
@media (min-width: 800px) {
    .fancybox-slide--iframe .fancybox-content {
        max-width: 70%;
        width: 70%;
        padding-top: 39.34%;  /* (9/16 * 70%) -- smaller aspect ratio in percents */
    }
}
.fancybox-slide--iframe .fancybox-iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
}

/*
=========================================================================
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;
}

@media (min-width: 767px) {
	/* Prend une image et la recadre au ratio vignette de 260 x 175 */
	figure.recadre > img,
	figure.recadre [data-fancybox] > img {
		object-fit: cover;
		width: 260px;
		height: 175px;
	}
	figure.centre {
		margin-left: auto;
		margin-right: auto;
	}
	figure.pousse-droite {
		margin-left: auto;
	}
	figure.tire-haut {
		margin-top: -1em;
	}
}