/*

  == Styles spécifiques à Vigicrues (par dessus Bootstrap et SB Admin 2)

  * @contributors: Ph. Vayssière (Alsacréations)
  * @date-created: 2016-08-01
  * @last-update: 2016-08-01

*/
@media screen and (max-width: 767px) {
}

@media (min-width: 768px) {
}

@media (min-width: 768px) {
}

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

@media (min-width: 768px) {
}

@media (max-width: 767px) {
}

@media (max-width: 767px) {
}

@media (max-width: 640px)
{
  
}

/* 
  Actimage carto dynamique
*/
#static-map{
  transform-origin:top left;
}
#dynamic-map
{
  transform-origin:top left;
}
/* latin */
@font-face {
  font-family: 'Marianne';
  font-style: normal;
  font-weight: 200;
  src: local('Marianne Light'), local('Marianne-Light'), url(fonts/Marianne-Light.woff2) format('woff2'), url(fonts/Marianne-Light.woff) format('woff');
}
/* latin */
@font-face {
  font-family: 'Marianne';
  font-style: normal;
  font-weight: normal;
  src: local('Marianne'), local('Marianne-Regular'), url(fonts/Marianne-Regular.woff2) format('woff2'), url(fonts/Marianne-Regular.woff) format('woff');
}
/* latin */
@font-face {
  font-family: 'Marianne';
  font-style: normal;
  font-weight: bold;
  src: local('Marianne Bold'), local('Marianne-Bold'), url(fonts/Marianne-Bold.woff2) format('woff2'), url(fonts/Marianne-Bold.woff) format('woff');
}
/* latin */
@font-face {
  font-family: 'Marianne';
  font-style: normal;
  font-weight: 800;
  src: local('Marianne ExtraBold'), local('Marianne-ExtraBold'), url(fonts/Marianne-ExtraBold.woff2) format('woff2'), url(fonts/Marianne-ExtraBold.woff) format('woff');
}
html {
  font-family: 'Marianne';
}
.header {
  padding-top: 20px;
}
.container-logos {
  padding: 10px 0;
}
/*
  fin de changement d'Actimage
*/


.container-vigi:before,
.container-vigi:after {
  display: table;
  content: ' ';
}

.container-vigi:after {
  clear: both;
}
/* Variables LESS utilisées pour ajouter outline ou couleurs de fond à des éléments pour déboguer.
   Pour cela, la ou les déclarer à true */
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted;
}

@supports (text-decoration: underline dotted) {
  abbr[title] {
    text-decoration: underline dotted;
    border-bottom: 0;
  }
}
/*
 * Mixins
 *
 */
/* Icône créée via CSS et non dans le code HTML (liste UL simple, dropdown).
   À utiliser pour un :pseudo
   Voir fonts-icons.less pour le code du caractère '\e9xx' de contenu généré à ajouter */
/**
 * Custom grid
 *
 * Container is fluid up to a certain breakpoint and then fixed-width on wide desktop.
 * It behaves like .container-fluid in the former case and then like .container in the latter case
 * Created with the same method and mixin then BS3 uses in grid.less
 */
.container-vigi {
  margin-right: auto;
  margin-left: auto;
  margin-top: 15px;
  padding-right: 15px;
  padding-left: 15px;
}
.container-vigi.container-logos {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 1280px) {
  .container-vigi {
    width: 1260px;
  }
  .container-vigi.container-logos {
    width: 1260px;
  }
}/*
@media (min-width: 960px) and (max-width: 1289px) {
  .container-vigi.container-logos {
    width: 960px;
  }
}
@media (min-width: 760px) and (max-width: 960px) {
  .container-vigi.container-logos {
    width: 760px;
  }
}*/
/**
 * Utils
 */
/* Donne le Block Formatting Context (BFC) à un élément http://www.cssmojo.com/block-formatting-contexts/ */
.bfc {
  overflow: hidden;
}
/* Appliqué dans la Légende de la carte métropole sur le texte lors du survol d'un '(?)' */
.js-border-bottom-dots
{
    border-bottom: 1px dotted #5d5b58 !important;
}
/* Header */
.header-wrapper
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-flow: column nowrap;

            flex-flow: column nowrap;
}
/**
 * Liens d'accès rapide (bloc accessibilité)
 * (code HTML proche de celui d'ACAI => pas les mêmes conventions de nommage)
 * Caché sur mobile via la classe Bootstrap .hidden-xs
 */
.accessibilite .inline_access
{
    position: relative;
}
.accessibilite .contenu_accessibilite
{
    position: absolute;
    top: 0;
    left: 0;

    margin: .7rem 0 0 0;
}
@media (max-width: 1279px)
{
    .accessibilite .contenu_accessibilite
    {
        font-size: 1.2rem;

        position: static;
    }
}
.accessibilite .contenu_accessibilite > a
{
    position: relative;
    z-index: 1;

    text-decoration: underline;

    color: #036;
}
.header-min
{
    background-color: #036;

    -webkit-box-ordinal-group: 0;

        -ms-flex-order: -1;

            order: -1;
}
.header-min .header-min-link
{
    font-size: 1.2rem;

    vertical-align: 3px;
    text-decoration: underline;

    color: white;
}
/**
 * Logos RF+Min avec lien vers le Ministère puis logo Vigicrues et lien retour à l'accueil
 *
 * Préfixe .banner-logos
 * Préfixe .banner-tagline
 *
 * Les 3 logos sont en SVG, remaniés le 15/12/2016 (pas de bordure SVG autour de la Marianne/RF et du MinEÉM)
 *
 */
.banner-logos-wrapper {
  font-size: .2rem;
}

.banner-logos-wrapper:before,
.banner-logos-wrapper:after {
  display: table;
  content: ' ';
}

.banner-logos-wrapper:after {
  clear: both;
}

.banner-logos-wrapper:before,
.banner-logos-wrapper:after {
  display: table;
  content: ' ';
}

.banner-logos-wrapper:after {
  clear: both;
}

.banner-logos-wrapper:focus,
.banner-logos-wrapper:active,
.banner-logos-wrapper:hover {
  text-decoration: none;
}

.banner-logos-wrapper .banner-logos-rfmin {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 148px;
  vertical-align: top;
}

.banner-logos-wrapper .banner-logos-min-img {
  border-left-width: 0;
}

.banner-logos-wrapper .banner-logos-vigicrues {
  display: inline-block;
  vertical-align: top;
}

@media (max-width: 1279px) {
  .banner-logos-wrapper .banner-logos-rfmin {
    float: left;
    height: 135px;
  }

  .banner-logos-wrapper .banner-logos-vigicrues {
    display: block;
    overflow: hidden;
    padding-top: 0;
    text-align: center;
  }

  .banner-logos-wrapper .banner-logos-vigicrues-img {
    max-width: 100%;
  }
}

@media (max-width: 991px) {
  /*.banner-logos-wrapper .banner-logos-rfmin {
    height: 68px;
  }*/

  .banner-logos-wrapper .banner-logos-vigicrues-img {
    width: 300px;
  }
  .banner-logos-wrapper .banner-logos-rf-img {
    height: 110px;
  }
}

@media (max-width: 767px) {
  .banner-logos {
    position: relative;
    z-index: 1;
  }

  .banner-logos-wrapper {
    display: inline-block;
  }

  .banner-logos-wrapper .banner-logos-rfmin {
    display: inline-block;
  }

  .banner-logos-wrapper .banner-logos-rf-img,
    .banner-logos-wrapper .banner-logos-min-img {
  }

  .banner-logos-wrapper .banner-logos-min-img {
    border-width: 0 1px 1px 1px;
  }

  .banner-logos-wrapper .banner-logos-vigicrues-img {
    width: 225px;
  }
  .banner-logos-wrapper .banner-logos-rf-img {
    height: 85px;
  }
}

@media (max-width: 590px) {
  .banner-logos-wrapper {
    display: inline-block;
    width: auto;
    vertical-align: top;
  }

  .banner-logos-wrapper .banner-logos-vigicrues {
    display: inline-block;
    float: none;
    margin: 0 0 0 .7rem;
    padding: 0;
    text-align: center;
  }

  .banner-logos-wrapper .banner-logos-vigicrues-img {
    max-width: 100%;
  }
}

@media (min-width: 320px) and (max-width: 390px) {
  .banner-logos {
    padding-bottom: 1rem;
  }
}

.banner-tagline {
  line-height: 1.2;
  clear: left;
  padding-top: 5px;
}

@media (max-width: 767px) {
  .container-logos {
    margin: 0;
    padding: 0;
  }
  .header {
    padding-top: 3px;
  }
  .banner-tagline {
    display: inline-block;
    margin: 0;
    text-align: center;
    vertical-align: top;
    font-size: 1.1rem;
  }

  .banner-tagline br {
    display: none;
  }
}

@media (max-width: 590px) {
  .banner-tagline {
    font-size: 1rem;
    position: relative;
    display: block;
    max-width: 225px;
    padding: 0;
    text-align: center;
  }

  .banner-tagline br {
    display: initial;
  }
}

@media (min-width: 320px) and (max-width: 390px) {
  .banner-tagline {
    font-size: 1rem;
  }
}

@media (max-width: 345px) {
  .banner-tagline br {
    display: none;
  }
}

@media (max-width: 590px) {
  .banner-logos-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .banner-logos-wrapper::before,
    .banner-logos-wrapper::after {
    content: normal;
  }

  .banner-tagline {
    max-width: none;
    margin-left: 0;
  }
}
/**
 * Navigation principale
 *
 * Composant .navbar restylé
 */
/* Résolution ciblée : Wide Desktop */
/* 5 items */
.navigation {
  border-width: 0 0 2px 0;
  background-color: transparent;
}

.navigation .navbar-collapse {
  padding-right: 0;
  padding-left: 0;
    /* nav pleine largeur */
}

.navbar-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
    /* nav pleine largeur */
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.navbar-nav:before,
.navbar-nav:after {
  content: normal;
}

.navbar-nav > li {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}

.navbar-nav > li:not(:first-child) {
  position: relative;
  padding-left: 1px;
}

.navbar-nav > li:not(:first-child):before {
  position: absolute;
  top: 8px;
  bottom: 6px;
  left: 0;
  display: block;
  content: '';
  border-left: 1px solid #036;
}

.navbar-nav > li:first-child > a {
  padding-left: 0;
}

.navbar-nav > li > a {
  font-weight: bold;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom: 2px solid transparent;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.navbar-nav > li > a:focus,
.navbar-nav > li > a:active,
.navbar-nav > li > a:hover {
  border-bottom-color: #036;
}

.navbar-nav > li > a:focus .navbar-link-txt,
.navbar-nav > li > a:active .navbar-link-txt,
.navbar-nav > li > a:hover .navbar-link-txt {
  text-decoration: underline;
}

.navbar-item .navbar-link-logo {
  font-size: 4.44444444rem;
  width: 4.44444444rem;
  vertical-align: middle;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.navbar-item .navbar-link-txt {
  font-size: 1.6rem;
  padding-left: 2rem;
  text-transform: uppercase;
  font-family: 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.navbar-item .icon-arrow {
  width: 1.5rem;
  margin-left: auto;
  -webkit-transition: .2s ease opacity, .2s ease transform;
  transition: .2s ease opacity, .2s ease transform;
  text-align: center;
}

.navbar-item .icon-dash {
  position: absolute;
  top: 50%;
  right: .8rem;
  width: 1.5rem;
  margin-top: -1.1rem;
  -webkit-transition: .2s ease opacity, .2s ease transform;
  transition: .2s ease opacity, .2s ease transform;
  text-align: center;
}

.navbar-item .icon-dash {
  width: 2.2rem;
  height: 1.5rem;
  -webkit-transform: translateY(.3rem) rotate(90deg);
          transform: translateY(.3rem) rotate(90deg);
}

.navbar-item:last-child .navbar-link-txt {
  padding-right: 2.3rem;
}

.open.navbar-item .icon-arrow {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.open.navbar-item .icon-dash {
  -webkit-transform: translateX(-.3rem) rotate(0deg);
          transform: translateX(-.3rem) rotate(0deg);
}

.open.navbar-item .icon-arrow,
.navbar-item .icon-dash {
  opacity: 0;
}

.navbar-item .icon-arrow,
.open.navbar-item .icon-dash {
  opacity: 1;
}

.container > .navbar-logo {
  font-size: 4.44444444rem;
}
/* Sous-menus */
.navbar-nav .dropdown-menu {
  font-size: 1.4rem;
  right: -1px;
  border-color: #036;
  box-shadow: none;
}

.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu > li > span {
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: .7rem;
  padding-bottom: .7rem;
  padding-left: 2.8rem;
  white-space: normal;
}

.navbar-nav .dropdown-menu > li > span {
  font-style: italic;
  line-height: 1.46666667;
  display: block;
  clear: both;
  padding-right: 2rem;
  white-space: nowrap;
  color: #5d5b58;
}

.navbar-nav .dropdown-menu > li > a {
  color: #036;
}

.navbar-nav .dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu > li > a:active,
.navbar-nav .dropdown-menu > li > a:hover {
  font-weight: bold;
  padding-right: 1.4rem;
  padding-left: 3.6rem;
  border-left: 2px solid #036;
  background: transparent;
}

.navbar-nav .dropdown:first-child .dropdown-menu {
  left: -10px;
}

.navigation .navbar-nav > .open > a {
  border-bottom: none;
}

.navbar-nav .open .dropdown-menu {
  margin-top: -.8rem;
  padding-top: calc(.8rem + 5px);
  border-top: none;
}

.navbar-nav .open:first-child .dropdown-menu:before {
  position: absolute;
  top: 0;
  left: -1px;
  display: block;
  height: .8rem;
  content: '';
  border-left: 1px solid white;
}

.navbar-nav .open:last-child > a:after {
  position: absolute;
  top: 8px;
  right: -1px;
  bottom: 6px;
  display: block;
  content: '';
  border-right: 1px solid #036;
}

@media (max-width: 1279px) {
  .navbar-nav li a {
    padding-right: 1.0rem;
    padding-left: 1.0rem;
  }

  .navbar-item .navbar-link-logo {
    font-size: 3.5rem;
    width: 3.5rem;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  .navbar-item .navbar-link-txt,
    .navbar-item:last-child .navbar-link-txt {
    font-size: 1.4rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    min-width: 0;
  }

  .navbar-nav li {
    -ms-flex-negative: 1;
        flex-shrink: 1;
  }

  .navbar-nav li a {
    padding-left: 1.2rem;
  }

  .navbar-item .navbar-link-logo {
    font-size: 3rem;
    width: 3rem;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  .navbar-item .navbar-link-txt,
    .navbar-item:last-child .navbar-link-txt {
    font-size: 1.3rem;
    line-height: 1.3;
  }
}

@media (max-width: 767px) {
  .navigation {
    min-height: 0;
    border-bottom: none;
  }

  .navbar-header {
    position: relative;
    margin-right: -15px;
    margin-left: -15px;
    margin-top: -50px;
    text-align: right;
    border-bottom: 1px solid #bdbdbd;
  }

  .navbar-header > .navbar-toggle {
    position: absolute;
    top: -8.2rem;
    right: 0;
    padding: 9px 8px 5px 8px;
    color: #fff;
    border: none;
    background-color: #036;
  }

  .navbar-header > .navbar-toggle:hover,
    .navbar-header > .navbar-toggle:active,
    .navbar-header > .navbar-toggle:focus {
    color: #fff;
    background-color: #036;
  }

  .navbar-header > .navbar-toggle .icon {
    font-size: 4rem;
    display: block;
    margin: -1.4rem 0 -2rem 0;
  }

  .navbar-header > .navbar-toggle[aria-expanded='false'] .icon-menu-close,
    .navbar-header > .navbar-toggle[aria-expanded='true'] .icon-menu-open {
    display: none;
  }

  .navbar-header > .navbar-toggle .navbar-toggle-text {
    font-weight: bold;
    text-transform: uppercase;
  }

  .navigation .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
    border: none;
  }

  .navbar-collapse.in {
    overflow-x: hidden;
  }

  .navbar-nav {
    display: block;
        /* (nav pleine largeur) on annule flexbox desktop */
    margin-top: 0;
    margin-left: 0;
    padding-top: 7px;
    background-color: #f6f6f6;
  }

  .nav .navbar-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .nav .navbar-link .navbar-link-txt {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }

  .nav .navbar-link .icon-arrow,
    .nav .navbar-link .icon-dash {
    -webkit-box-flex: 0;
        -ms-flex: 0;
            flex: 0;
  }

  .navbar-nav > li > a {
    padding-right: 2rem;
    padding-left: 2rem;
    border-bottom: 1px solid #036;
  }

  .navbar-nav > li:first-child > a {
    padding-left: 2rem;
  }

  .navbar-nav > li:not(:first-child)::before {
    content: normal;
  }

  .navbar-item .icon-dash {
    right: 1.2rem;
  }

  .navbar-item .navbar-link-logo {
    font-size: 4.44444444rem;
    width: 4.44444444rem;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  .navbar-item .navbar-link-txt,
    .navbar-item:last-child .navbar-link-txt {
    font-size: 1.4rem;
    line-height: 22px;
    padding-left: 2rem;
  }

  .navbar-item:last-child .navbar-link-txt {
    padding-right: 3.5rem;
  }

  .navbar-item:last-child .icon-arrow {
    right: 1.5rem;
  }
    /* Sous-menus */
  .navbar-nav .dropdown-menu {
    font-size: 1em;
    min-width: 100%;
    padding-top: 0;
    border: none;
  }

  .navbar-nav .open .dropdown-menu > li > a {
    padding: 1.5rem 2.8rem 1.4rem 2.8rem;
    border-bottom: 1px solid white;
  }

  .navbar-nav .open .dropdown-menu > li > a:before {
    font-family: 'vigicrues-icons';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    position: relative;
    float: right;
    content: '\e900';
    -webkit-transition: .25s ease left;
    transition: .25s ease left;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    text-transform: none;
    speak: none;
        /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .navbar-nav .open .dropdown-menu > li > a:focus:before {
    left: 3px;
  }

  .navbar-nav .open .dropdown-menu > li > a:focus,
    .navbar-nav .open .dropdown-menu > li > a:active,
    .navbar-nav .open .dropdown-menu > li > a:hover {
    font-weight: normal;
    border-left: none;
  }

  .navigation .navbar-nav .open .dropdown-menu > li > a {
    color: #fff;
    background-color: #036;
  }
}

@media (max-width: 767px) and (max-width: 341px) {
  .navbar-header > .navbar-toggle {
    top: -10.3rem;
  }
}
/**
 * Message de service (bandeaux d'alerte nationale)
 * Utilise le composant Alert de Bootstrap 3 et, conformément à ACAI, des icônes de font-awesome
 *   Différences :
 *     Couleurs de bordure et de fond des variantes
 *     Texte en gras (élément strong) de couleur différente que BS3
 *     L'icône (issue de font-awesome comme le demande ACAI) est restylée (taille, couleur, positionnement)
 *
 *   3 variantes possibles : .alert-warning, .alert-danger et .alert-info
 */
.message-service .alert {
  padding-bottom: .8rem;
  padding-left: 1.8rem;
  border-width: 2px;
}

.message-service .fa:first-child {
  font-size: 4.4rem;
  float: left;
  margin-top: .4rem;
}

.message-service .message-service-content {
  overflow: hidden;
  padding-left: 2rem;
}

.message-service .alert-warning {
  border-color: #f9eedc;
  background-color: #fdf6e6;
}

.message-service .alert-warning .fa:first-child {
  margin-top: .7rem;
  color: #f0ad4e;
}

.message-service .alert-warning strong {
  color: #5d5b58;
}

.message-service .alert-danger {
  border-color: #fbcace;
  background-color: #fde0e2;
}

.message-service .alert-danger .fa:first-child,
.message-service .alert-danger strong {
  color: #f00;
}

.message-service .alert-info {
  border-color: #cfd6de;
  background-color: #edf0f5;
}

.message-service .alert-info .fa:first-child,
.message-service .alert-info strong {
  color: #036;
}
/**
 * DESKTOP LAYOUT (LARGE)
 */
.home-container1 > .row > .col-xs-12 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
/* Home uniquement : après avoir réordonné, le résultat est .main-title-wrapper et .map-france-instructions avant .home-vigilance et .geoloc-bulletin */
/* Note : la carte métropole est déplacée verticalement par gain de place et parce que la forme hexagonale le permet
          (2017-12 : la presqu'île du Cotentin est 40px à droite du lien vers le bulletin d'info) */
.home .home-vigilance {
  position: relative;
  z-index: 3;
  margin-top: 1.1rem;
  margin-bottom: 2.5rem;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.home .geoloc-bulletin {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 15px;
  width: 408px;
}

.home .bulletin-link {
  position: relative;
  z-index: 3;
  width: 408px;
}

.home .map-france-instructions {
  margin-top: .4rem;
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
}

.home-container2 > .row > .col-xs-12 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: -16.5rem;
}

.home-legend-wrapper {
  width: 216px;
  margin: 12rem 0 14.3rem 0;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.map-france {
  position: relative;
  z-index: 2;
  display: block;
}
/* Niveau 2 - Bassin / .basin-* */
.basin-container1 {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.basin-container1 .basin-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.basin-container2 > .row > .col-xs-12 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
/**
 * TABLET LAYOUT (MEDIUM)
 */
@media (max-width: 1279px) {
    /* Home */
  .home-container2 > .row > .col-xs-12 {
    margin-top: -10.5rem;
  }

  .map-france {
    margin-right: 6rem;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
  }

  .link-lists .report-infos {
    margin-left: 0;
  }

  .basin {
    position: relative;
    z-index: 1;
  }
}
/**
 * MOBILE LAYOUT (SMALL)
 */
@media (max-width: 991px) {
  .home-container1 > .row > .col-xs-12 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  .home-container1 .main-title-wrapper {
    position: absolute;
  }

  .home-container1 .map-france-instructions {
    width: 100%;
  }

  .home-container1 .home-vigilance {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
  }

  .home-container1 .home-vigilance-max {
    position: static;
  }

  .home-container1 .geoloc-bulletin {
    position: static;
    width: auto;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 43.4%;
            flex: 1 1 43.4%;
  }

  .home-container1 .geoloc-bulletin-title {
    padding-left: 4rem;
  }

  .home-container1 .map-france-instructions {
    margin: 1rem 0;
  }

  .home-container1 .bulletin-link {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .home-container2 > .row > .col-xs-12 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-flow: column-reverse nowrap;
            flex-flow: column-reverse nowrap;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  .home-container2 .home-legend-wrapper {
    width: auto;
    margin: 3rem 0 2.5rem 0;
  }
    /* Footer */
  .pied_logo {
    display: none;
  }
    /* Margins and paddings */
  .map-france {
    margin: 0 3rem;
  }

  .home .home-vigilance,
    .link-lists .report-infos {
    margin: 0;
  }
    /* Niveau 2 - Bassin / .basin-* */
  .basin-container1 > .row > .col-xs-12 {
    position: relative;
  }

  .basin-container1 .basin-main {
    display: block;
  }

  .basin-container1 .basin-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .basin-container1 .bulletin-link {
    position: absolute;
    right: 0;
  }

  .basin-container2 > .row > .col-xs-12 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }

  .basin-container2 .basin-details-map {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
/**
 * NARROW MOBILE LAYOUT (XS)
 */
@media (max-width: 767px) {
  .home-container1 > .row > .col-xs-12 {
    display: block;
  }

  .home-container1 .map-france-instructions {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }

  .home-container1 .home-vigilance {
    margin: 0 0 3.3rem 0;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
  }

  .home-container1 .bulletin-link {
    width: auto;
    margin-bottom: 3rem;
  }

  .home-container1 .geoloc-bulletin {
    min-width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
  }
    /* Margins and paddings */
  .map-france {
    margin: 0;
  }
    /* Niveau 2 - Bassin / .basin-* */
  .map-france-instructions {
    display: none;
  }

  .basin-container1 {
    padding-right: 0;
    padding-left: 0;
  }

  .basin-container1 > .row {
    margin-right: 0;
    margin-left: 0;
  }

  .basin-container1 .col-xs-12 {
    padding-right: 0;
    padding-left: 0;
  }

  .basin-container1 .basin-left {
    position: static;
    width: auto;
  }

  .basin-container1 .bulletin-link {
    position: static;
    margin: 0 15px;
  }

  .basin-container1 .basin {
    width: 100%;
    margin-top: 2rem;
    border-right: none;
    border-left: none;
  }

  .basin-container1 .basin-main {
    width: auto;
  }

  .basin-container1 .basin .basin-header-hi,
    .basin-container1 .basin .basin-item-hi {
    display: none;
  }

  .basin-container2 .basin-details-map {
    margin-right: -15px;
    margin-left: -15px;
  }
}
/**
 * TYPOGRAPHY
 */
/* Titres : souligné horizontal bleu de 40px de large ferré à gauche */
h1,
.h1,
h2,
.h2 {
  position: relative;
}

h1:after,
.h1:after,
h2:after,
.h2:after {
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 4rem;
  content: '';
  border-bottom: 1px solid currentColor;
}
/* Liens pointant vers des sites externes (càd dont l'URL ne contient pas "vigicrues.gouv.fr" @TODO et vigicrues.dev et n'étant pas # en dev)
   Sont considérés comme externes :
     - les liens portant la classe .external
   Note :
     - l'icône ajoutée n'est pas le caractère \e605 de la font icon mais un SVG séparé
   Contrainte :
     - l'icône ajoutée est bleue et sa couleur n'est pas modifiable (c'est un SVG et IE/Edge ne supporte pas les CSS filters).
       Une solution alternative aurait été d'utiliser la font icon mais cela aurait nécessité de parfaitement maîtriser le _whitespace_ à la fin de l'intitulé du lien ("intitulé </a>" et "intitulé</a>" n'auraient pas le même rendu avec un écart resp. de 11 et 7px)
 */
a.external:after {
  line-height: 1;
  display: inline-block;
  width: 2.1rem;
  padding-left: .7rem;
  content: url('../img/icons-svg/external-blue.svg');
  -webkit-transition: .25s ease transform;
  transition: .25s ease transform;
  vertical-align: -2px;
}

a.external:focus:after,
a.external:active:after,
a.external:hover:after {
  content: url('../img/icons-svg/external-black.svg');
}

a.external:focus:after,
a.external:active:after {
  -webkit-transform: translateX(1px);
          transform: translateX(1px);
}
/* @TOPROD Bootstrap ne souligne aucun lien par défaut. Ajouter cette classe sur une zone / un bloc est un moyen d'obtenir des liens soulignés, ce qui est une bonne pratique d'accessibilité lorsque les liens sont environnés par du texte (de labeur) */
.vigicrues-content a {
  text-decoration: underline;
}

.vigicrues-content a:focus,
.vigicrues-content a:active,
.vigicrues-content a:hover {
  color: #036;
}
/* Sélection du texte par l'utilisateur */
::-moz-selection
{
    color: white;
    background-color: rgba(0, 51, 102, .99);
}
::selection
{
    color: white;
    background-color: rgba(0, 51, 102, .99);
}
.header-min *::-moz-selection,
.bulletin-link-pubdate *::-moz-selection,
.footer-min *::-moz-selection
{
    color: #036;
    background-color: rgba(255, 255, 255, .99);
}
.header-min *::selection,
.bulletin-link-pubdate *::selection,
.footer-min *::selection
{
    color: #036;
    background-color: rgba(255, 255, 255, .99);
}
/*
 * Listes
 *
 */
/* Liste non ordonnée / à puce - Ajouter la classe .vigicrues à l'élément "ul" pour styler 3 niveaux de (sous-)liste */
ul.vigicrues {
  padding-left: 10px;
  border-left: 1px solid #3c3c3c;
}

ul.vigicrues li {
  margin-top: 11px;
  margin-bottom: 11px;
  list-style-type: none;
    /* 2e niveau d'imbrication */
}
ul.vigicrues li > ul
{
    margin-left: -11px;
    padding-left: 2px;

    border-left: 11px solid white;
}
ul.vigicrues li > ul > li
{
    -webkit-transform: translateX(21px);
            transform: translateX(21px);
    /* 3e niveau d'imbrication */
}

ul.vigicrues li > ul > li:before {
  font-family: 'vigicrues-icons';
  font-size: 1.4rem;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  position: absolute;
  padding-right: 5px;
  content: '\e903';
  -webkit-transform: translate(-21px, 4px);
          transform: translate(-21px, 4px);
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul.vigicrues li > ul > li:first-child {
  margin-top: 0;
  padding-top: 11px;
}

ul.vigicrues li > ul > li:last-child {
  margin-bottom: 0;
}

ul.vigicrues li > ul > li > ul {
  padding-left: 21px;
  border-left: none;
}

ul.vigicrues li > ul > li > ul > li:before {
  font-family: 'vigicrues-icons';
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  padding-right: 5px;
  content: '\e904';
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Liste ordonnée - Ajouter la classe .vigicrues à l'élément "ol" pour styler interligne et marges de part et d'autre de la numérotation */
ol.vigicrues li {
  margin-top: 11px;
  margin-bottom: 11px;
  padding-left: 12px;
}

ol.vigicrues li li ol {
  padding-left: 30px;
}

ol.vigicrues ol {
  padding-left: 8px;
}
/**
 * Composants Bootstrap 3 restylés
 *
 * Voir en 1er lieu variables.less
 */
/**
 * Breadcrumb / fil d'Ariane
 */
.breadcrumb
{
    padding: 0;
}
.breadcrumb > li + li::before
{
    padding: 0;
}
@media (max-width: 767px)
{
    .breadcrumb > li
    {
        font-size: 1.4rem;

        display: inline;
    }
}
/**
 * Buttons
 */
/* un nouveau .btn-border est défini (avec la même mixin que ceux de BS3 dans buttons.less)
    .btn-default {
      .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
    }
  Caractéristiques : bordure bleue (de 2px), fond blanc et texte gris
 */
.btn-border
{
    padding: 5px 12px;

    color: #036;
    border-width: 2px;
    border-color: #369;
    background-color: #fff;
}
.btn-border:focus,
.btn-border.focus
{
    color: #036;
    border-color: #132639;
    background-color: #e6e6e6;
}
.btn-border:hover
{
    color: #036;
    border-color: #24476b;
    background-color: #e6e6e6;
}
.btn-border:active,
.btn-border.active,
.open > .dropdown-toggle.btn-border
{
    color: #036;
    border-color: #24476b;
    background-color: #e6e6e6;
}
.btn-border:active:hover,
.btn-border.active:hover,
.open > .dropdown-toggle.btn-border:hover,
.btn-border:active:focus,
.btn-border.active:focus,
.open > .dropdown-toggle.btn-border:focus,
.btn-border:active.focus,
.btn-border.active.focus,
.open > .dropdown-toggle.btn-border.focus
{
    color: #036;
    border-color: #132639;
    background-color: #d4d4d4;
}
.btn-border:active,
.btn-border.active,
.open > .dropdown-toggle.btn-border
{
    background-image: none;
}
.btn-border.disabled:hover,
.btn-border[disabled]:hover,
fieldset[disabled] .btn-border:hover,
.btn-border.disabled:focus,
.btn-border[disabled]:focus,
fieldset[disabled] .btn-border:focus,
.btn-border.disabled.focus,
.btn-border[disabled].focus,
fieldset[disabled] .btn-border.focus
{
    border-color: #369;
    background-color: #fff;
}
.btn-border .badge
{
    color: #fff;
    background-color: #036;
}
.btn-border:focus,
.btn-border.focus,
.btn-border:hover,
.btn-border:active,
.btn-border.active,
.btn-border:hover:active
{
    -webkit-transition: .25s ease color, .25s ease background-color;
    transition: .25s ease color, .25s ease background-color;

    color: #fff;
    background-color: #036;
}
.btn-border.btn-lg
{
    padding: 9px 16px;
}
.btn-border.btn-sm
{
    padding: 4px 10px;
}
.btn-border.btn-xs
{
    padding: 0 5px;
}
/**
 * Labels
 *   Voir labels.less de Bootstrap
 */
.label
{
    font-size: 1em;

    padding: 0 .3em .15em .3em;

    border-radius: 0;
}
.label-red,
.label-orange,
.label-yellow,
.label-green
{
    color: #5d5b58;
}
.label-red
{
    color: white;
    background-color: #f00;
}
.label-red[href]:hover,
.label-red[href]:focus
{
    background-color: #c00;
}
.label-orange
{
    background-color: #fa0;
}
.label-orange[href]:hover,
.label-orange[href]:focus
{
    background-color: #c80;
}
.label-yellow
{
    background-color: #ff0;
}
.label-yellow[href]:hover,
.label-yellow[href]:focus
{
    background-color: #cc0;
}
.label-green
{
    background-color: #28d761;
}
.label-green[href]:hover,
.label-green[href]:focus
{
    background-color: #20ac4e;
}
/**
 * Pagination
 */
.pagination
{
    font-size: 1.2rem;
}
.pagination > li > a,
.pagination > li > span
{
    margin-left: 0;
    padding: 5px 11px;
}
.pagination > li > a:focus,
.pagination > li > span:focus,
.pagination > li > a:active,
.pagination > li > span:active,
.pagination > li > a:hover,
.pagination > li > span:hover
{
    border-color: #036;
    background-color: #036;
}
.pagination > .previous > a
{
    margin-right: 1.8rem;

    border: 1px solid #bdbdbd;
    background-color: #f6f6f6;
    /* @ALSA à annuler quand LI est disabled */
}
.pagination > .previous a:focus:before,
.pagination > .previous a:active:before,
.pagination > .previous a:hover:before
{
    color: #fff;
}
.pagination > .next > a
{
    margin-left: 1.8rem;

    border: 1px solid #bdbdbd;
    background-color: #f6f6f6;
    /* @ALSA à annuler quand LI est disabled */
}
.pagination > .next a:focus:after,
.pagination > .next a:active:after,
.pagination > .next a:hover:after
{
    color: #fff;
}
.pagination > .disabled.previous a,
.pagination > .disabled.next a
{
    border: none;
    background-color: transparent;
}
.pagination > .disabled.previous a:before,
.pagination > .disabled.next a:after
{
    color: inherit;
}
@media (max-width: 767px)
{
    .pagination
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        margin-right: 1rem !important;
        margin-left: 1rem !important;

        -webkit-box-pack: justify;

            -ms-flex-pack: justify;

                justify-content: space-between;
    }
    .pagination > li:not(.previous):not(.next)
    {
        display: none;
    }
}
/**
 * Tableaux
 */
.table-vigicrues
{
    border-bottom: 1px solid #bdbdbd;
}
@media (min-width: 768px)
{
    .table-vigicrues
    {
        table-layout: fixed;
    }
}
.table-vigicrues > thead th,
.table-vigicrues > tbody th
{
    font-size: 1.2rem;
    font-weight: normal;
}
.table-vigicrues td
{
    font-size: 1.4rem;
}
.table-vigicrues > thead > tr > th
{
    border-bottom-width: 1px;
}
.table-vigicrues > tbody > tr > th,
.table-vigicrues > tbody > tr > td
{
    border-top-width: 0;
}
.table-vigicrues thead > tr,
.table-vigicrues tbody > tr:nth-of-type(even)
{
    background-color: #f6f6f6;
}
.table-header-primary th
{
    font-weight: normal;

    color: #036;
}
/* Plus de padding horizontal (vu dans le bulletin de tronçon). Le sélecteur pour TH doit écraser ".table > thead > tr > th"
  Exception : les cellules "vigilance" avec une couleur de fond sur toute la hauteur et leur entête */
@media (min-width: 768px)
{
    .table-padding-big-sm-plus.table th:not(.table-header-vigilance),
    .table-padding-big-sm-plus td:not(.table-cell-vigilance)
    {
        padding-right: 30px;
        padding-left: 30px;
    }
}
/* Pour TH: Une colonne beaucoup plus large que les autres, comme celle avec beaucoup de texte. Conséquence : le texte des autres colonnes tient sur 1 ligne s'il y a de la place (on évite le mot-clé "large" qui dans Bootstrap est un breakpoint / point de rupture) */
.table-cell-wide {
  width: 63%;
}
/* Cellule avec vigilance indiquée donc couleur de fond devant occuper toute la hauteur (et la largeur) */
.table-cell-vigilance {
  font-style: italic;
  text-align: center;
}

.table-cell-vigilance > strong {
  font-weight: normal;
}

.table-cell-vigilance.red {
  color: white;
  background-color: #f00;
}

.table-cell-vigilance.orange {
  background-color: #fa0;
}

.table-cell-vigilance.yellow {
  background-color: #ff0;
}

.table-cell-vigilance.green {
  background-color: #28d761;
}
/* Bulletin tronçons et .table-troncon : Responsive Table en "transposant" th et td via data-th (2 colonnes avec data-th à gauche, répété à chaque ligne et td à droite)
    Technique de C. Coyer (CSS tricks) mieux décrite ici : https://elvery.net/demo/responsive-tables/#no-more-tables (pour le code HTML) */
@media (max-width: 640px) {
  .table-troncon {
    table-layout: fixed;
  }

  .table-troncon tbody tr {
    border-bottom: 1px solid #bdbdbd;
  }

  .table-troncon th {
    display: none;
  }

  .table-troncon td {
    display: block;
    clear: left;
    text-align: left;
  }

  .table-troncon td > *:not(.btn-border) {
    padding-left: 1rem;
  }

  .table-troncon td > .btn-border {
    margin-left: 1rem;
  }

  .table-troncon.table-troncon td {
    border: none;
  }

  .table-troncon td:before {
    font-weight: bold;
    font-style: normal;
    float: left;
    width: 25%;
    height: 100%;
    margin-top: -9px;
    margin-left: -12px;
    padding: 9px 12px 10px 12px;
    content: attr(data-th);
    text-align: left;
    color: #036;
  }

  .table-troncon td:nth-child(2):before {
    background-color: white;
  }
}

@media (max-width: 470px) {
  .table-troncon td:before {
    width: 108px;
  }
}
/* Onglets / Tabs */
.nav-tabs {
  border-bottom-width: 2px;
}

.nav-tabs > li {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.nav-tabs > li > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border-bottom-width: 2px;
  text-decoration: none !important;
}

.nav-tabs > li a:hover {
  text-decoration: underline !important;
  border-bottom-color: #036;
  background-color: #f6f6f6;
}

.nav-tabs > .active a:hover {
  text-decoration: none;
}

.nav-tabs a {
  text-decoration: none;
  background-color: #f6f6f6;
}
/**
 * Elements de formulaire
 */
/* Checkbox */
.checkbox {
  position: relative;
  display: block;
}

.checkbox label {
  padding-left: 2.2rem;
  cursor: default;
}

.checkbox label:before {
  position: absolute;
  z-index: 5;
  top: 4px;
  left: 1px;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 1rem;
  content: '';
  border: 2px solid white;
  background: #fff;
  box-shadow: 0 0 0 1px #036;
}

.checkbox input[type='checkbox']:focus + label:before {
  outline: #036 dotted 1px;
}

.checkbox input[type='checkbox']:checked + label:before {
  background-color: #036;
  background-position: 3px 4px;
}

.checkbox input[type='checkbox'] {
  position: absolute;
  top: 4px;
  left: 1px;
  margin: 0;
}
/* Radio */
.radio input[type='radio'] {
  top: 0;
  left: 0;
  margin-left: 0;
  outline: 0;
}

@-moz-document url-prefix() {
  .radio input[type='radio'] {
    top: .1rem;
    left: .1rem;
  }
}

.radio label {
  padding-left: 2.2rem;
}

.radio label::before {
  position: absolute;
  top: .4rem;
  left: 0;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  content: '';
  border: 2px solid white;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 0 0 1px #036;
}

.radio input[type='radio']:not(:checked) + label {
  cursor: pointer;
}

.radio input[type='radio']:focus + label::before {
  outline: #036 dotted 1px;
}

.radio input[type='radio']:checked + label::before {
  background-color: #036;
}
/* Dropdown */
.dropdown .dropdown-toggle:focus,
.dropdown .dropdown-toggle:hover,
.dropdown .dropdown-toggle:active {
  text-decoration: none;
}

.dropdown-menu {
  padding-bottom: 10px;
}

.dropdown-menu > li > a {
  line-height: 1.6;
  margin-top: 4px;
  margin-bottom: 5px;
  text-decoration: none;
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:active {
  font-weight: bold;
  padding-right: 1.2rem;
  padding-left: 2.8rem;
  border-left: 2px solid #036;
}

.dropdown-menu > li:last-child > a {
  margin-bottom: 0;
  padding-bottom: 13px;
}
/**
 * CUSTOM BLOCKS
 */
/*
/* #1 */
.main-title {
  margin-top: 15px;
  margin-bottom: 1rem;
}

@media (max-width: 991px) {
  .main-title {
    margin-top: -6px;
  }
}
/* Instructions */
.map-france-instructions-txt {
  font-style: italic;
}

.map-france-instructions-txt br {
  display: none;
}

@media (max-width: 767px) {
  .map-france-instructions-txt {
    text-align: center;
  }

  .map-france-instructions-txt br {
    display: block;
  }
}
/* #3 */
.geoloc-bulletin {
  margin-top: .6rem;
  text-align: right;
}

.geoloc-bulletin .geoloc-bulletin-title {
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0;
  padding-bottom: 1.1rem;
}

.geoloc-bulletin .geoloc-bulletin-title:after {
  content: normal;
}

.geoloc-bulletin .geoloc-bulletin-title .geoloc-bulletin-text {
  padding-bottom: .5rem;
}

.geoloc-bulletin .btn {
  font-size: 1.4rem;
  padding: 1px 24px 0 24px;
}

.geoloc-bulletin .btn:focus,
.geoloc-bulletin .btn:hover,
.geoloc-bulletin .btn:focus:active,
.geoloc-bulletin .btn:hover:active {
  -webkit-transition: .25s ease color, .25s ease background-color;
  transition: .25s ease color, .25s ease background-color;
}

.geoloc-bulletin .icon {
  font-size: 2.4rem;
  padding-right: 1rem;
  vertical-align: middle;
}

.geoloc-bulletin-title {
  display: -ms-inline-grid;
  text-align: center;
  -ms-grid-columns: min-content;
}

.geoloc-bulletin-title .btn {
  -ms-grid-row: 2;
}

@supports (grid-area: auto) {
    @media (min-width: 768px) {
    .geoloc-bulletin-title
        {
            display: -ms-inline-grid;
            display: inline-grid;
    -ms-grid-columns: min-content;
        grid-template-columns: min-content;
  }
}
}

@media (max-width: 991px) {
  .geoloc-bulletin {
    margin-top: 0;
    text-align: right;
  }

  .geoloc-bulletin .geoloc-bulletin-text {
    width: auto;
  }
}

@media (max-width: 767px) {
  .geoloc-bulletin .geoloc-bulletin-title {
    display: block;
    padding: 0 0 1.8rem 0;
    text-align: center;
  }

  .geoloc-bulletin .geoloc-bulletin-text {
    display: none;
  }

  .geoloc-bulletin .geoloc-bulletin-text br {
    display: none;
  }

  .geoloc-bulletin .btn {
    display: block;
    width: 100%;
  }
}
/* Bulletin d'info remonté (niveaux 1 et 2) */
.bulletin-link
{
    font-size: 1.4rem;

    margin-bottom: 2rem;
    color: white;
    background-color: #036;
    display: inline-block;
    padding: 1.3rem 1.3rem 1.3rem 1.3rem;
}
.div-glyphiconTerritoire{
    width: 18%;
    display: inline-block;
    text-align: center;
}
.bulletin-link .btn-inverse
{
    font-size: 1.4rem;
    width: 380px;
    color: #036;
    background-color: white;
    display: inline-block;
}
.bulletin-link .bulletin-link-pubdate
{
    margin: .5rem 0;
}
@media (max-width: 991px)
{
    .bulletin-link
    {
        margin-top: 1rem;
    }
}
@media (max-width: 767px)
{
    .bulletin-link
    {
        border-bottom: 1px solid transparent;
    }
    .bulletin-link .btn-inverse
    {
        white-space: normal;
    }
}
/* #2 */
.home-vigilance-max
{
    width: 408px;
    padding: 1.7rem 0 1rem 0;

    border: 1px solid #bdbdbd;
    border-width: 1px 0;
}
.home-vigilance-max .home-vigilance-max-content
{
    display: table;

    padding-left: 1.3rem;
}
.home-vigilance-max .home-vigilance-max-title
{
    font-size: 15px;
    line-height: 1.2;

    margin: 0;

    color: #5d5b58;
}
.home-vigilance-max .home-vigilance-max-title:after
{
    content: normal;
}
.home-vigilance-max .home-vigilance-max-state
{
    line-height: 1.3;

    display: inline-block;

    padding: 0 .4rem;
}
.home-vigilance-max.jaune .home-vigilance-max-state
{
    background-color: yellow;
}
.home-vigilance-max .home-vigilance-max-details
{
    font-style: italic;

    margin-top: .6rem;

    color: #c3251b;
}
@media (max-width: 991px)
{
    .home-vigilance
    {
        margin: 0 0 2rem 0;
    }
    .home-vigilance-max
    {
        float: none !important;

        padding: 0;

        border: none;
    }
    .home-vigilance-max-details
    {
        margin-bottom: 0;
    }
}
@media (max-width: 767px)
{
    .home-vigilance-max
    {
        width: auto;
    }
}
@media (max-width: 479px)
{
    .home-vigilance
    {
        margin: 28px 0 1rem 0;
    }
}
/*

  == Bloc Légende de la vigilance (cartes nationale + niveau 2 et liste niveau 2)
       Rouge, orange, jaune et vert
       Besoin particulier : 3 layouts différents à des résolutions différentes selon la page niveau 1 ou 2...

  * @contributors: Ph. Vayssière (Alsacréations)
  * @date-created: 2016-10-01
  * @last-update: 2016-10-26


      Résolution         XS         767-8    small    991      medium    1230 ou 60    large / desktop
    ----------------------------------------------------------------------------------------------------
 NOPE Layout Home       R2C2          |       R1C4     |        R4C1                       R4C1
 NOPE    tooltip          w100                  w50               right                      right
 NOPE Layout Niveau 2   R2C2 / R1C4   |       R2C2              R2C2                       R2C2
 NOPE    tooltip          w100                  w50               right                      right

 new     Layout Home       R2C2          |       R1C4     |        R4C1                       R4C1
 new        tooltip          w100                  w50               right                      right
 new     Layout Niveau 2   R2C2          |       R1C4              R2C2                       R2C2
 new        tooltip          w100                  w50               right                      right

*/
/*
 * == DEBUG
 *
 */
/*
 * PARTIES COMMUNES À TOUTES LES PAGES, TOUTES LES RESOLUTIONS
 *
 * Tooltip et flèches : voir en fin de fichier
 *
 */
.vigilance-map-legend .vigilance-map-legend-title
{
    margin-top: 11px;
    margin-bottom: 22px;
}
.vigilance-map-legend .vigilance-map-legend-unit
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    min-height: 5.1rem;
}
.vigilance-map-legend .vigilance-map-legend-rect
{
    font-weight: bold;
    line-height: 1;

    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin-bottom: 1rem;
    padding: .2rem .3rem 1rem .3rem;

    text-align: center;
    vertical-align: top;

    color: #fff;
}
.vigilance-map-legend .vigilance-map-legend-rect::before
{
    position: absolute;
    z-index: -1;
    top: 1px;
    left: 0;

    width: 9px;
    height: 30px;

    content: '';

    background-color: black;
}
.vigilance-map-legend .vigilance-map-legend-rect > img
{
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    height: 100%;
}
.vigilance-map-legend .yellow .vigilance-map-legend-rect
{
    color: #5d5b58;
}
.vigilance-map-legend .vigilance-map-legend-details
{
    font-size: .8em;
    line-height: 1.16666667;

    margin-bottom: 0;
    padding-left: 1rem;

    color: black;
}
.vigilance-map-legend .vigilance-map-legend-details .vigilance-map-legend-txt
{
    vertical-align: middle;

    border-bottom: 1px solid transparent;
}
.vigilance-map-legend .vigilance-map-legend-details .btn
{
    font-size: 1.2rem;
    line-height: 1.16666667;

    display: inline-block;

    padding: 0;

    color: #036;
    border: none;
    background-color: transparent;
}
.vigilance-map-legend .vigilance-map-legend-details .btn:focus,
.vigilance-map-legend .vigilance-map-legend-details .btn:active,
.vigilance-map-legend .vigilance-map-legend-details .btn:hover
{
    color: #000d1a;
}
.vigilance-map-legend .vigilance-map-legend-details .btn-txt
{
    text-decoration: underline;
}
.vigilance-map-legend .vigilance-map-legend-details .round
{
    font-size: .8rem;

    display: inline-block;

    min-width: 1rem;
    min-height: 1rem;

    vertical-align: middle;

    color: white;
    border-radius: 50%;
    background-color: #036;
}
.vigilance-map-legend .vigilance-map-legend-details .round:focus,
.vigilance-map-legend .vigilance-map-legend-details .round:active,
.vigilance-map-legend .vigilance-map-legend-details .round:hover
{
    background-color: #000d1a;
}
.vigilance-map-legend .vigilance-map-legend-name
{
    font-size: .83333333em;

    border: 1px solid transparent;
}
/* R4C1 */
.home-container2 .vigilance-map-legend
{
    position: relative;
    z-index: 3;

    padding: 0 1.5rem .7rem 1.8rem;

    border: 1px solid #bdbdbd;
}
.home-container2 .vigilance-map-legend .vigilance-map-legend-details
{
    margin-bottom: 1rem;
}
@media (max-width: 991px)
{
    .home-container2 .vigilance-map-legend
    {
        padding: 1rem;

        border: 1px solid #bdbdbd;

        -webkit-box-flex: 0;

            -ms-flex: 0;

                flex: 0;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
        -ms-flex-item-align: stretch;
            -ms-grid-row-align: stretch;
            align-self: stretch;
    }
    .home-container2 .vigilance-map-legend .vigilance-map-legend-content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

            -ms-flex-flow: row wrap;

                flex-flow: row wrap;
    }
    .home-container2 .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: 25%;
        padding-right: 1rem;
    }
}
@media (max-width: 767px)
{
    .home-container2 .vigilance-map-legend
    {
        padding: 1rem;

        border: 1px solid #bdbdbd;
        border-width: 1px 0 0 0;
    }
    .home-container2 .vigilance-map-legend .vigilance-map-legend-content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

            -ms-flex-flow: row wrap;

                flex-flow: row wrap;
    }
    .home-container2 .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: 50%;
        padding-right: 1rem;

        -ms-flex-wrap: wrap;

            flex-wrap: wrap;
    }
    .home-container2 .vigilance-map-legend .vigilance-map-legend-details
    {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 calc(100% - 2rem);
                flex: 0 1 calc(100% - 2rem);
    }
}
@media (min-width: 992px)
{
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend
    {
        width: 408px;
        margin-right: 3rem;
        padding: 1rem;

        border: 1px solid #bdbdbd;
    }
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend .vigilance-map-legend-content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

            -ms-flex-flow: row wrap;

                flex-flow: row wrap;
    }
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: 50%;
        padding-right: 1rem;

        -ms-flex-wrap: wrap;

            flex-wrap: wrap;
    }
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend .vigilance-map-legend-details
    {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 calc(100% - 2rem);
                flex: 0 1 calc(100% - 2rem);
    }
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend .vigilance-map-legend-content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

            -ms-flex-flow: row wrap;

                flex-flow: row wrap;
    }
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: 50%;
        padding-right: 1rem;

        -ms-flex-wrap: wrap;

            flex-wrap: wrap;
    }
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend .vigilance-map-legend-details
    {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 calc(100% - 2rem);
                flex: 0 1 calc(100% - 2rem);
    }
    .basin-container2:not(.has-no-detail-map) .vigilance-map-legend .vigilance-map-legend-tooltip-wrapper1
    {
        width: 100%;
        height: 1rem;
    }
}
@media (min-width: 992px)
{
    .basin-container2.has-no-detail-map .vigilance-map-legend
    {
        max-width: 80rem;
        padding: 1rem;

        border: 1px solid #bdbdbd;

        -webkit-box-flex: 0;

            -ms-flex: 0;

                flex: 0;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
        -ms-flex-item-align: stretch;
            -ms-grid-row-align: stretch;
            align-self: stretch;
    }
    .basin-container2.has-no-detail-map .vigilance-map-legend .vigilance-map-legend-content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

            -ms-flex-flow: row wrap;

                flex-flow: row wrap;
    }
    .basin-container2.has-no-detail-map .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: 25%;
        padding-right: 1rem;
    }
    .basin-container2.has-no-detail-map .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: calc(27%);
    }
    .basin-container2.has-no-detail-map .vigilance-map-legend .vigilance-map-legend-unit.red
    {
        width: calc(19%);
    }
}
@media (max-width: 991px)
{
    .basin-container2 .vigilance-map-legend
    {
        margin-top: 3rem;
        margin-bottom: 3rem;
        padding: 1rem;

        border: 1px solid #bdbdbd;

        -webkit-box-flex: 0;

            -ms-flex: 0;

                flex: 0;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
        -ms-flex-item-align: stretch;
            -ms-grid-row-align: stretch;
            align-self: stretch;
    }
    .basin-container2 .vigilance-map-legend .vigilance-map-legend-content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

            -ms-flex-flow: row wrap;

                flex-flow: row wrap;
    }
    .basin-container2 .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: 25%;
        padding-right: 1rem;
    }
}
@media (max-width: 767px)
{
    .basin-container2 .vigilance-map-legend
    {
        padding: 1rem;
        padding: 0;

        border: 1px solid #bdbdbd;
        border: none;
    }
    .basin-container2 .vigilance-map-legend .vigilance-map-legend-content
    {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

            -ms-flex-flow: row wrap;

                flex-flow: row wrap;
    }
    .basin-container2 .vigilance-map-legend .vigilance-map-legend-unit
    {
        width: 50%;
        padding-right: 1rem;

        -ms-flex-wrap: wrap;

            flex-wrap: wrap;
    }
    .basin-container2 .vigilance-map-legend .vigilance-map-legend-details
    {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 calc(100% - 2rem);
                flex: 0 1 calc(100% - 2rem);
    }
}
/* Les 3 tooltips explicatives */
.vigilance-map-legend .tooltip
{
    font-size: 1.3rem;
    line-height: calc(1.07692308);
}
.vigilance-map-legend .tooltip.in
{
    opacity: 1;
}
.tooltip-inner
{
    min-width: 18rem;
    padding: .6rem .8rem 1rem .9rem;

    text-align: left;
}
@media (min-width: 768px) and (max-width: 991px)
{
    [class^='vigilance-map-legend-tooltip-wrapper']
    {
        width: 50%;

        -webkit-box-ordinal-group: 2;

            -ms-flex-order: 1;

                order: 1;
    }
}
@media (max-width: 767px)
{
    [class^='vigilance-map-legend-tooltip-wrapper']
    {
        width: 100%;

        -webkit-box-ordinal-group: 1;

            -ms-flex-order: 0;

                order: 0;
    }
    .vigilance-map-legend-tooltip-wrapper1:empty
    {
        height: 1rem;
    }
}
@media (max-width: 991px)
{
    .tooltip
    {
        position: static !important;

        margin: 0 0 11px 0;
        padding: 0;
    }
    .tooltip .tooltip-arrow
    {
        position: relative;
        left: 24px !important;
    }
    .tooltip .tooltip-inner
    {
        line-height: 1.2;

        max-width: none;
    }
    .vigilance-map-legend-tooltip-wrapper3 .tooltip-arrow
    {
        right: calc(-100% + 24px) !important;
        left: auto !important;
    }
}
@media (max-width: 767px)
{
    .tooltip .tooltip-arrow
    {
        left: 24px !important;
    }
    .tooltip.top
    {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;

        margin: 11px 0 0 0;

        -webkit-box-orient: vertical;

        -webkit-box-direction: reverse;

            -ms-flex-flow: column-reverse nowrap;

                flex-flow: column-reverse nowrap;
    }
    .vigilance-map-legend-tooltip-wrapper2 .tooltip .tooltip-arrow
    {
        right: calc(-100% + 24px) !important;
        left: auto !important;
    }
}
#hovered
{
    display: inline-block;

    -webkit-transform-origin: left top;

            transform-origin: left top;
}
.map-france-map,
.map-france-img1
{
    display: block;
}
@media (max-width: 1279px)
{
    .map-france-img1
    {
        margin: 0;
    }
}
/**
 * Bulletins, liens et Meteofrance sur 3 colonnes
 */
.link-lists
{
    margin-top: 5rem;

    background-color: #f6f6f6;
}
.home .link-lists
{
    margin-top: 5rem;
}
.page-bassin .link-lists
{
    margin-top: 4rem;
}
.page-bulletin .link-lists
{
    margin-top: 1rem;
}
.link-lists > .container-vigi > .row > .col-xs-12
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-flex: 0;

        -ms-flex: none;

            flex: none;
}
.link-lists .link-list-wrapper
{
    padding-bottom: 3rem;
}
.link-lists .small
{
    font-style: italic;
}
.report-infos
{
    width: 398px;
}
.report-infos:first-child
{
    margin: -33px 15px 0 0;
    padding: 33px 15px 0 15px;

    color: white;
    background-color: #036;
}
.report-infos:first-child .report-infos-title
{
    color: inherit;
}
.report-infos:first-child .icon
{
    color: #369;
}
.report-infos .report-infos-list
{
    margin-bottom: 11px;
}
.report-infos .report-infos-term
{
    clear: left;
}
.report-infos .report-infos-def:not(:last-child)
{
    margin-bottom: 11px;
}
.report-infos .icon
{
    font-size: 4rem;

    float: left;

    margin-right: 11px;
}
.report-infos .report-infos-list + p
{
    clear: left;
}
.report-infos .btn
{
    width: 100%;
    margin: 22px 0;
    padding: 9px 30px 8px 20px;

    border-color: #fff;
    background-color: white;
}
.report-infos .btn:focus,
.report-infos .btn:hover,
.report-infos .btn:focus:active,
.report-infos .btn:hover:active
{
    -webkit-transition: .25s ease color, .25s ease background-color;
    transition: .25s ease color, .25s ease background-color;

    color: #fff;
    background-color: #036;
}
.other-links
{
    width: 430px;
    padding-right: 3rem;
}
.other-links .other-links-list
{
    padding-left: 2rem;

    border-left: 1px solid #3c3c3c;
}
.other-links .other-links-item
{
    margin-bottom: 11px;

    list-style-type: none;

    color: #010101;
}
.other-links a
{
    text-decoration: underline;
}
.other-links .btn
{
    text-decoration: none;
}
.other-vigilances
{
    width: 383px;
}
.other-vigilances .other-vigilances-list
{
    padding-left: 0;
}
.other-vigilances .other-vigilances-item
{
    padding-bottom: 11px;
    padding-left: 2rem;

    list-style-type: none;

    color: #010101;
    border-left: 1px solid #3c3c3c;
}
.other-vigilances .other-vigilances-item-meteofrance
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding-bottom: 22px;
    padding-left: 0;

    border-left: none;
}
.other-vigilances .other-vigilances-item-meteofrance .other-vigilances-content .other-vigilances-text
{
    display: inline-block;

    -webkit-hyphens: none;

        -ms-hyphens: none;

            hyphens: none;
}
.other-vigilances .other-vigilances-link
{
    text-decoration: underline;
}
.other-vigilances img
{
    margin-right: 11px;
}
@media (max-width: 991px)
{
    .link-lists.link-lists
    {
        margin-top: 0;
    }
    .link-lists.link-lists > .container-vigi > .row > .col-xs-12
    {
        display: block;
    }
    .link-list-wrapper,
    .link-list-wrapper:last-child
    {
        width: auto;
    }
    .link-lists .link-list-wrapper
    {
        padding-bottom: 0;
    }
    .link-lists .link-list-wrapper:before,
    .link-lists .link-list-wrapper:after
    {
        display: table;

        content: ' ';
    }
    .link-lists .link-list-wrapper:after
    {
        clear: both;
    }
    .link-lists .link-list-wrapper:before,
    .link-lists .link-list-wrapper:after
    {
        display: table;

        content: ' ';
    }
    .link-lists .link-list-wrapper:after
    {
        clear: both;
    }
    .link-lists .report-infos
    {
        margin-top: 0;
        margin-right: -15px;
        margin-left: -15px;
        padding-top: 1px;
        padding-right: 15px;
        padding-left: 15px;
    }
    .report-infos-readmore
    {
        margin: 0;
        padding: 11px 0 22px 0;
    }
    .report-infos .btn
    {
        display: block;

        margin: 0;
    }
    .other-links .other-links-list
    {
        margin-bottom: 2.7rem;
    }
    .other-vigilances
    {
        margin-right: -15px;
        margin-left: -15px;
        padding-right: 15px;
        padding-left: 15px;
    }
    aside:last-child:not(:nth-child(n-2)) .other-vigilances
    {
        background: white;
    }
    .other-vigilances .other-vigilances-title
    {
        margin-top: 0;
        padding-top: 2.7rem ;
    }
    .other-vigilances .other-vigilances-list
    {
        margin-bottom: 0;
        padding-bottom: 2.7rem;
    }
}
@media (max-width: 767px)
{
    .other-links
    {
        padding-right: 0;
    }
}
/**
 * FOOTER
 *
 * Préfixe .footer-
 *   + .pied_logo
 *
 */
.footer-primary
{
    padding: 2.7rem 0;

    text-transform: uppercase;

    color: white;
    background-color: #369;
}
.footer-primary .footer-primary-list
{
    margin-bottom: 0;
}
.footer-primary .footer-primary-item
{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;

    padding: 0;
}
.footer-primary .footer-primary-item:not(:first-child)
{
    border-left: 1px solid white;
}
.footer-primary .footer-primary-link
{
    display: inline-block;

    padding: 0 2.7rem;

    color: white;
}
.pied_logo
{
    padding: 2.2rem 0 2.6rem 0;
}
.footer-partner-item:not(:first-child) .footer-partner-link
{
    margin-left: 2rem;
}
.footer-secondary
{
    margin-bottom: 0;
    padding: 2.4rem 0;

    border-top: 1px solid #bdbdbd;
}
.footer-secondary .footer-secondary-list
{
    margin-bottom: 0;
}
.footer-secondary .footer-secondary-item
{
    padding: 0;
}
.footer-secondary .footer-secondary-item:not(:first-child)
{
    border-left: 1px solid #bdbdbd;
}
.footer-secondary .footer-secondary-item br
{
    display: none;
}
.footer-secondary .footer-secondary-link
{
    line-height: 1.2;

    display: inline-block;

    margin: 0 1rem;

    text-decoration: underline;

    color: #5d5b58;
}
.footer-min
{
    text-align: center;

    background-color: #036;
}
.footer-min:before,
.footer-min:after
{
    display: table;

    content: ' ';
}
.footer-min:after
{
    clear: both;
}
.footer-min:before,
.footer-min:after
{
    display: table;

    content: ' ';
}
.footer-min:after
{
    clear: both;
}
.footer-min .footer-min-txt
{
    font-size: 1.2rem;

    margin-bottom: 0;
    padding: .4rem 0 .6rem 0;

    color: white;
}
@media (max-width: 991px)
{
    .footer-primary
    {
        margin-bottom: 0;
        padding: 16px 15px;
    }
    .footer-primary .footer-primary-item
    {
        font-size: 1.4rem;
    }
    .footer-primary .footer-primary-link
    {
        padding: 0 1.2rem;
    }
    /* .pied_logo (contenant les logos) est caché dans le Layout mobile */
    .footer-secondary
    {
        border-top: none;
    }
    .footer-secondary .footer-secondary-item
    {
        margin-bottom: 22px;

        text-align: left;
        vertical-align: top;
    }
    .footer-secondary .footer-secondary-item br
    {
        display: inline;
    }
    .footer-min .footer-min-txt
    {
        max-width: 71%;
        margin: 0 auto;
    }
}
/**
 * Niveau 2 - liste des bassins
 *
 * Utilise le composant dropdown de BS3
 */
.basin-main
{
    position: relative;
}
.basin-main .basin-main-map-parent
{
    margin-left: 3rem;
}
.basin-main .basin-main-map,
.basin-main .basin-main-img
{
    display: block;

    height: auto;
}
.basin-left
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    width: 408px;
}
.basin-left .basin
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    border: 1px solid #bdbdbd;
    background-color: #f6f6f6;
}
.basin-left .basin-wrapper
{
    overflow-y: auto;
}
.basin-left .basin-title
{
    margin-top: 0;
    margin-left: 3rem;
    padding-top: 2rem;
}
.basin-left .basin-header
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.basin-left .basin-header-hi,
.basin-left .basin-header-name,
.basin-left .basin-header-vigilance,
.basin-left .basin-header-rss
{
    line-height: 1.2;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    color: #036;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;
}
.basin-left .basin-header-hi
{
    /* width: 9rem;
    padding-right: 2rem;
    padding-left: 2rem; */
    width: 7rem;
    padding-right: 1rem;
    padding-left: 0.7rem;
}
.basin-left .basin-header-name
{
    /* width: 18.2rem; */
    width: 21rem;
}
.basin-left .basin-header-vigilance
{
    width: 7.4rem;
}
.basin-left .basin-header-rss
{
    width: 4.3rem;
}
.basin-list
{
    margin-bottom: 0;
    padding: 0;
}
.basin-list .basin-item
{
    font-size: 1.4rem;

    list-style-type: none;

    color: #444240;
}
.basin-list .basin-item:nth-child(odd)
{
    background-color: white;
}
.basin-list .basin-item:first-child::before
{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

    content: '';

    background-color: #036;
}
.basin-list .basin-item > .dropdown
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    min-height: 3rem;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

        -ms-flex-flow: row wrap;

            flex-flow: row wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.basin-list .basin-item > .dropdown.open
{
    color: white;
}
.basin-list .basin-item-hi,
.basin-list .basin-item-vigilance,
.basin-list .basin-item-rss
{
    font-size: 2rem;

    margin: 0;

    text-align: center;

    -webkit-box-flex: 0;

        -ms-flex: none;

            flex: none;
}
.basin-list .basin-item-hi
{
    width: 5.8rem;
    padding-right: 1.5rem;

    text-align: right;
    text-decoration: none;
}
.basin-list .basin-item-hi [class*='icon-target']
{
    font-size: 2.4rem;
}
.basin-list .dropdown-toggle
{
    font-size: inherit;
    /* width: 19.4rem;  */
    width: 17.4rem; 
    min-height: 3.9rem;

    text-align: left;
    white-space: normal;

    color: inherit;
    border: none;
    background-color: transparent;

    -webkit-box-flex: 0;

        -ms-flex: none;

            flex: none;
}
.basin-list .button-inner
{
    position: relative;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    width: 100%;
    padding-right: 1.4rem;

    -webkit-box-flex: 0;

        -ms-flex: none;

            flex: none;
}
.basin-list .basin-item-vigilance
{
    font-size: inherit;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    width: 7.4rem;

    text-decoration: none;

    color: #444240;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.basin-list .basin-item-vigilance.red
{
    color: white;
    background-color: #f00;
}
.basin-list .basin-item-vigilance.orange
{
    background-color: #fa0;
}
.basin-list .basin-item-vigilance.yellow
{
    background-color: #ff0;
}
.basin-list .basin-item-vigilance.green
{
    background-color: #28d761;
}
.basin-list .basin-item-vigilance .basin-item-vigilance-txt
{
    text-decoration: underline;
}
.basin-list .basin-item-vigilance .icon-information-sign
{
    font-size: 1.8rem;

    position: relative;
    top: .2rem;

    padding-left: .4rem;
}
.basin-list:first-child .open > .basin-item-vigilance
{
    position: relative;
    z-index: 2;
    top: 0;
}
.basin-list .basin-item-rss
{
    width: 4.3rem;

    -ms-flex-item-align: center;

        -ms-grid-row-align: center;

        align-self: center;
}
.basin-list .basin-item-rss:focus,
.basin-list .basin-item-rss:active,
.basin-list .basin-item-rss:hover
{
    text-decoration: none;
}
.basin-list .open > .basin-item-hi,
.basin-list .open > .basin-item-rss
{
    color: inherit;
}
.basin-list .open.dropdown
{
    color: inherit;
    background-color: #036;
}
.basin-list .open > .dropdown-toggle.btn-default
{
    color: inherit;
    background-color: transparent;
}
.basin-list .open .dropdown-menu
{
    position: static;

    width: 100%;
    margin-top: 0;
    padding: 0;

    color: inherit;
    border: none;
    background-color: #369;
    box-shadow: none;
}
.basin-list .open .dropdown-menu > li > a
{
    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    margin: 0;
    padding: .7rem 3.5rem .7rem 9.4rem;

    white-space: normal;

    color: inherit;
}
.basin-list .open .dropdown-menu > li > a:after
{
    font-family: 'vigicrues-icons';
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

    position: absolute;
    right: 1.5rem;

    /* content: '\e900'; */
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    text-transform: none;

    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.basin-list .open .dropdown-menu > li > a:focus,
.basin-list .open .dropdown-menu > li > a:hover,
.basin-list .open .dropdown-menu > li > a:active
{
    font-weight: normal;

    padding-right: 1.7rem;
    padding-left: 9.4rem;

    border-left: none;
}
.basin-list .open .dropdown-menu > li:not(:first-child) > a
{
    border-top: 1px solid white;
}
.basin-list .open .dropdown-menu [class*='basin-evol']
{
    display: inline-block;

    width: 3rem;
}
.basin-list .open .dropdown-menu [class*='basin-evol'] .icon
{
    position: absolute;

    display: inline-block;
}
.basin-list .open .dropdown-menu .basin-evol-up .icon-arrow
{
    -webkit-transform: rotate(-135deg) translate(1px, 3px);
            transform: rotate(-135deg) translate(1px, 3px);

    color: #f4f034;
}
.basin-list .open .dropdown-menu .basin-evol-down .icon-arrow
{
    -webkit-transform: rotate(-45deg) translate(2px, 1px);
            transform: rotate(-45deg) translate(2px, 1px);

    color: white;
}
.basin-list .open .dropdown-menu .basin-evol-flat .dot
{
    display: inline-block;

    margin: 0 0 2px 7px;

    border: 2px solid white;
    border-radius: 50%;
}
.basin-list .dropdown .button-inner
{
    position: relative;
}
.basin-list .dropdown .button-inner:before,
.basin-list .dropdown .button-inner:after
{
    line-height: 1;

    position: absolute;
    top: 50%;
    right: 0;

    width: 1.5rem;

    content: '';

    border-top: 1px solid #036;
}
.basin-list .dropdown .button-inner:after
{
    -webkit-transition: .2s ease transform;
    transition: .2s ease transform;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}
.basin-list .dropdown.open .button-inner:before,
.basin-list .dropdown.open .button-inner:after
{
    border-color: white;
}
.basin-list .dropdown.open .button-inner:after
{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}
@media (max-width: 1279px)
{
    .basin-main .basin-main-map-parent
    {
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
    }
}
@media (max-width: 991px)
{
    .basin-main,
    .basin-main .basin-main-map-parent
    {
        margin-left: 0;
    }
    .basin-main .basin-main-map,
    .basin-main .basin-main-map-parent .basin-main-map,
    .basin-main .basin-main-img,
    .basin-main .basin-main-map-parent .basin-main-img
    {
        margin-left: 0;

        vertical-align: top;
    }
}
@media (min-width: 768px) and (max-width: 991px)
{
  .js-open > .basin-toggle-btn
    {
        left: 418px !important;
    }
    .basin > .basin-toggle-btn
    {
        position: relative;
        z-index: 1;
        top: -1px;
        left: 600px;

        padding: 8px 30px 4px 30px;

        -webkit-transform: translateX(5rem);

                transform: translateX(5rem);
        white-space: nowrap;

        border: 2px solid #369;
        background-color: white;

        -ms-flex-item-align: start;

            align-self: flex-start;
    }
    .basin-toggle-btn:focus,
    .basin-toggle-btn:active,
    .basin-toggle-btn:hover,
    .basin-toggle-btn:active:hover,
    .basin-toggle-btn:focus:active,
    .basin-toggle-btn:focus:hover
    {
        border-color: #369;
        background-color: white;
    }
    .js-open > .basin-toggle-btn
    {
        -webkit-transform: translateX(-100%) translateX(-1rem);
                transform: translateX(-100%) translateX(-1rem);
    }
    .basin-toggle-btn > .icon
    {
        font-size: 2rem;

        padding-right: .6rem;

        vertical-align: middle;
    }
    .basin
    {
        overflow: initial !important;

        -webkit-transition: -webkit-transform .25s ease-out;

        transition: -webkit-transform .25s ease-out;

        transition: transform .25s ease-out;

        transition: transform .25s ease-out, -webkit-transform .25s ease-out;
        -webkit-transform: translateX(-100%) translateX(-3rem);
                transform: translateX(-100%) translateX(-3rem);
    }
    .basin.js-open
    {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    .basin .basin-title
    {
        padding-top: 2.6rem;
    }
}
@media (max-width: 767px)
{
    .basin
    {
        max-height: 100%;

        border-top-color: #036;
        /* Nouveau (PHV/Alsa 10/2017) La liste des stations sur mobile (XS et small) est dans un toggle (composant Bootstrap "collapse") et c'est un bouton qui permet de masquer/afficher cette liste (et le "header" qui la précède).
     * En résolutions XS et small, on n'affiche qu'aux lecteurs d'écran le titre qui la précède et on le cache visuellement
     * Inversement le bouton n'est visible qu'en XS et en small
    */
    }
    .basin .basin-title
    {
        position: absolute;

        overflow: hidden;
        clip: rect(0, 0, 0, 0);

        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;

        border: 0;
    }
    .basin .basin-collapse-cmd
    {
        font-size: 18px;
        line-height: 1.1;

        position: relative;

        padding: 1.4rem 4rem 1.8rem 1.2rem;

        text-align: left;
        white-space: normal;

        border-bottom: 1px solid #036;
        background-color: #fff;
    }
    .basin .basin-collapse-cmd:focus,
    .basin .basin-collapse-cmd:hover
    {
        text-decoration: none;
    }
    .basin .basin-collapse-cmd .icon-arrow
    {
        position: absolute;
        right: 1.4rem;

        display: inline-block;

        -webkit-transition: .25s ease transform;

        transition: .25s ease transform;
    }
    .basin .basin-collapse-cmd[aria-expanded='true'] .icon-arrow
    {
        -webkit-transform: rotate(-180deg);
                transform: rotate(-180deg);
    }
    .basin .basin-header
    {
        margin-top: 1.5rem;
    }
    .basin .basin-header-name
    {
        margin-left: 1.2rem;

        -webkit-box-flex: 3;

            -ms-flex: 3 1 15rem;

                flex: 3 1 15rem;
    }
    .basin .basin-header-vigilance,
    .basin .basin-header-rss
    {
        text-align: center;

        -webkit-box-flex: 0;

            -ms-flex: 0 1 auto;

                flex: 0 1 auto;
    }
    .basin-list .dropdown-toggle
    {
        -webkit-box-flex: 3;
            -ms-flex: 3 1 15rem;
                flex: 3 1 15rem;
    }
    .basin-list .basin-item-vigilance,
    .basin-list .basin-item-rss
    {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
                flex: 0 1 auto;
    }
    .basin-list .open .dropdown-menu > li > a
    {
        margin-top: 0;
        margin-bottom: 0;
        padding: .8rem 1.7rem .8rem 2rem;
    }
    .basin-list .open .dropdown-menu > li > a:focus,
    .basin-list .open .dropdown-menu > li > a:hover,
    .basin-list .open .dropdown-menu > li > a:active
    {
        padding-left: 2rem;
    }
    .basin-list .open .dropdown-menu [class*='basin-evol']
    {
        margin: 0 .5rem 0 -.5rem;
    }
}
/* Miniatures optionnelles sous la carte du bassin */
.basin-details-map .basin-detail-map
{
    position: relative;

    display: inline-block;

    border: 1px solid #036;
}
.basin-details-map .basin-detail-map:not(:last-child)
{
    margin-right: 1.4rem;
}
.basin-details-map .basin-detail-map-no
{
    position: absolute;
    right: 0;
    bottom: 0;

    padding: 1px 8px;

    color: white;
    background-color: #036;
}
.basin-details-map .basin-detail-map-img
{
    display: inline-block;

    vertical-align: top;
}
@media (max-width: 991px)
{
    .basin-details-map
    {
        margin-top: 3rem;
    }
    .basin-details-map .basin-detail-map
    {
        position: absolute;
        top: 3rem;

        -webkit-transform-origin: 0 0;

                transform-origin: 0 0;
    }
    .basin-details-map .basin-detail-map:not(:last-child)
    {
        margin-right: 0 !important;
    }
    .basin-details-map .basin-detail-map:nth-child(2)
    {
        left: calc((100% + 15px) / 3);
    }
    .basin-details-map .basin-detail-map:nth-child(3)
    {
        right: 15px;

        -webkit-transform-origin: 100% 0;

                transform-origin: 100% 0;
    }
    .basin-details-map .basin-detail-map-img
    {
        height: auto;
    }
}
@media (max-width: 767px)
{
    .basin-details-map .basin-detail-map:nth-child(2)
    {
        left: 33.33333333%;
    }
    .basin-details-map .basin-detail-map:nth-child(3)
    {
        right: 0;
    }
}
/**
 * Niveau 3 - Station
 *
 * Utilise le composant Tabs de BS3
 */
/* Commentaires à la station - avant les onglets */
.station-comment
{
    display: table;

    margin-bottom: 2.5rem;
}
.station-comment .station-comment-img
{
    display: table-cell;

    margin: .5rem 1.3rem 0 0;
}
.station-comment .station-comment-content
{
    display: table-cell;

    vertical-align: middle;
}
.station-comment-warning .station-comment-type
{
    color: #d8202a;
}
.station-comment-info .station-comment-type
{
    color: #036;
}
/* Onglets : on doit écraser des CSS jQuery UI (beaucoup). Pas d'autre .nav-tabs en vue dans cette page */
.page-station .nav-tabs {
  margin: 0;
  padding: 0;
}

.page-station .nav-tabs > li {
  margin-right: 0;
  border: none;
  background-color: transparent;
}

.page-station .nav-tabs > li:hover {
  border: none;
}

.page-station .nav-tabs .ui-tabs-anchor {
  padding: 10px 15px;
}
/* Onglet n°1 - contenu : Graphique */
@media (max-width: 767px) {
  .station-graph .station-graph-title {
    margin-bottom: 1rem;
  }
}

@media (max-width: 1279px) {
  .station-graph .station-graph-title,
    .station-graph #legendeHauteurDiv {
    margin-right: 15px;
    margin-left: 15px;
  }
}

.station-graph .station-graph-tools {
  margin-bottom: 1rem;
  text-align: right;
}

@media (min-width: 768px) {
  .station-graph .station-graph-tools {
    float: right;
  }
}

.station-graph .station-graph-tools > .dropdown {
  display: inline-block;
}

.station-graph .station-graph-tools > .dropdown > .dropdown-menu {
  right: 0;
  left: auto;
}

@media (max-width: 767px) {
  .station-graph .station-graph-duration-title {
    display: block;
    margin-bottom: .5rem;
  }

  .station-graph .station-graph-duration-title ~ .btn {
    margin-bottom: .5rem;
  }
}
/* Onglets n°2 et 3 - tableaux */
.station-table {
  width: auto !important;
    /* @ALSA Largeur du tableau onglet №2 Observation. Écraser styles en ligne ici et ci-dessous sur les TH */
  margin-bottom: 1.5rem;
    /* @ALSA Entêtes : bleu et icône de tri collée au texte sur sa gauche, pas à droite toute  */
}

.station-table.dataTable {
  margin-top: 1.1rem !important;
}

.station-table th:not(:first-child),
.station-table td:not(:first-child) {
  text-align: center;
}

.station-table th {
  width: auto !important;
  color: #036;
}

.station-table.dataTable thead .sorting::after,
.station-table.dataTable thead .sorting_asc::after,
.station-table.dataTable thead .sorting_desc::after,
.station-table.dataTable thead .sorting_desc_disabled::after,
.station-table.dataTable thead .sorting_asc_disabled::after {
  position: static;
  display: inline;
  float: left;
  margin-right: .8rem;
  -webkit-transform: translateY(1px);
          transform: translateY(1px);
  opacity: .8;
}

@media (min-width: 768px) {
  .station-table {
    width: auto;
  }

  .station-table th:not(:first-child) {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }

  .station-table th:first-child,
    .station-table td:first-child {
    padding-right: 7.5rem;
    padding-left: 2.5rem;
  }
}

.station-pagination .pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin: 1.5rem 0 1rem 0;
  padding-bottom: .5rem;
  text-align: center;
  border-bottom: 1px solid #bdbdbd;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.station-pagination li:first-child {
  margin-right: auto;
}

.station-pagination li:last-child {
  margin-left: auto;
}
/* Onglet n°2 - contenu : Hauteurs */
.station-height .station-height-options {
  padding-top: 1rem;
}

.station-height .station-height-wrapper,
.station-forecast .station-forecast-wrapper {
  display: inline-block;
  width: auto;
}

@media (max-width: 767px) {
  .station-height .station-height-wrapper,
    .station-forecast .station-forecast-wrapper {
    overflow-x: auto;
    width: 100%;
  }
}

.station-height .station-height-wrapper label {
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 0;
  padding-left: 2.5rem;
  vertical-align: middle;
  color: #5d5b58;
}

.station-height .station-height-wrapper select {
  width: 5rem;
  height: auto;
  margin: 0 .2rem;
  padding: 3px 0 6px 4px;
  color: inherit;
}

.station-height .station-height-tot,
.station-forecast .station-forecast-tot {
  font-size: 1.2rem;
  text-align: center;
}

.station-height .station-height-tot > span,
.station-forecast .station-forecast-tot > span {
  color: #036;
}
/* Onglet n°3 - contenu : Prévisions */
.station-forecast .station-forecast-title {
  font-size: 1.5rem;
  display: inline-block;
  margin-top: 1.1rem;
  margin-bottom: 1.3rem;
  padding: 1rem 2rem 1.1rem 1.5rem;
  background-color: transparent;
}

.station-forecast .station-forecast-title:after {
  content: normal;
}

.station-forecast .station-forecast-title .icon-clock:before {
  font-size: 2.4rem;
  margin-right: .6rem;
  vertical-align: -5px;
}

.station-forecast .station-forecast-options {
  padding-top: 2rem;
  border-top: 1px solid #bdbdbd;
}
/* Onglet n°4 - contenu : Stations */
@media (max-width: 1279px) {
  .station-stations {
    padding: 0 15px;
  }
}

.station-stations .station-stations-unit:nth-child(2n+1) {
  clear: left;
}

.station-stations .station-stations-img {
  line-height: 40px;
  float: left;
  min-height: 60px;
  margin: 0 1.5rem 1.5rem 0;
  color: #036;
  background-color: #f6f6f6;
}

@media (max-width: 330px) {
  .station-stations .station-stations-img {
    max-width: calc(100vw - 3rem);
  }
}

.station-stations .station-stations-infos {
  overflow: hidden;
  min-width: 190px;
}

.station-stations .station-stations-data > dt {
  font-weight: normal;
  float: left;
  margin-bottom: 1rem;
  padding-right: .4rem;
  color: #036;
}

.station-stations .station-stations-data > dd {
  margin-bottom: 1rem;
}

.station-stations .station-stations-comm {
  clear: left;
}

.station-stations .station-stations-comm > span {
  color: #036;
}

.station-stations .station-stations-related {
  border-top: 1px solid #bdbdbd;
}
/* Après les onglets - légende mise en garde */
.station-warning-legend {
  font-size: 86%;
}
/* Après les onglets - éléments de formulaire */
.station-opts .station-opts-title {
  margin-bottom: 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid #036;
}

.station-opts .station-opts-title:after {
  content: normal;
}

.station-opts legend {
  border-bottom: none;
}

.station-opts label {
  font-weight: normal;
  line-height: 1.3;
  vertical-align: top;
}

.station-opts label > span {
  font-size: 1.2rem;
  font-weight: bold;
  display: block;
}

.station-opts label > strong {
  font-weight: normal;
  white-space: nowrap;
  color: red;
}

.station-opts label + a {
  font-size: 1.2rem;
  display: block;
  margin-left: 2.5rem;
}

.station-opts label + a > .icon-arrow:before {
  display: inline-block;
  -webkit-transform: rotate(-90deg) translate(-1px, 6px);
          transform: rotate(-90deg) translate(-1px, 6px);
}

.station-opts p:not(.station-opts-hist-all) {
  margin-bottom: 2rem;
}

.station-opts .station-opts-type {
  margin-top: .4rem;
}

.station-opts .station-opts-hist-all {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #bdbdbd;
}

.station-opts .station-opts-related legend {
  margin-top: 1.5rem;
}

@media (min-width: 591px) {
  .station-opts #divListeStationsOptions {
    -webkit-columns: 2;
       -moz-columns: 2;
            columns: 2;
  }

  .station-opts #divListeStationsOptions .checkbox {
    overflow: hidden;
  }
}

.station-opts .station-opts-search {
  margin-top: 1.4rem;
}

.station-opts .station-opts-search label {
  display: block;
  margin-right: 1.3rem;
  margin-bottom: 1rem;
  color: #036;
}

.station-opts .station-opts-search .station-opts-search-group {
  position: relative;
}

.station-opts .station-opts-search .station-opts-search-group .station-opts-search-icon {
  font-size: 2rem;
  position: absolute;
  top: -.3rem;
  left: .8rem;
  pointer-events: none;
  color: #036;
}

.station-opts .station-opts-search .station-opts-search-group .station-opts-search-input {
  font-size: 1.5rem;
  width: 100%;
  padding: 8px 16px 8px 4.3rem;
  color: #5d5b58;
  border: 2px solid #036;
}

@media (min-width: 768px) and (max-width: 991px) {
  .station-opts .station-opts-search .station-opts-search-group .station-opts-search-input {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .station-opts .station-opts-search .form-group {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  .station-opts .station-opts-search label {
    margin-bottom: 1rem;
  }
}

@media (max-width: 767px) {
  .nav-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .nav-tabs.nav-tabs > li {
    display: inline-block;
    float: none;
    vertical-align: bottom;
  }
}
/**
 * (custom et hybride) "Collapsible Tabs" (en accordéon donc Tabs sur desktop et Accordion en mobile)
 *
 * Utilise les composants Tabs et Accordions de BS3 (et du JS pour transformer l'un en l'autre. Pas un composant BS natif)
 * Utilisé pour la FAQ
 * @source https://github.com/flatlogic/bootstrap-tabcollapse
 */
/* On écrase quelques styles de Tabs (déjà utilisé dans Niveau 3) */
.tabs-accordion {
  margin-top: 2rem;
  margin-bottom: 44px;
  border-bottom: none;
}

.tabs-accordion > li {
  width: 100%;
  border-bottom: 2px solid white;
}

.tabs-accordion > li a:focus,
.tabs-accordion > li a:hover {
  font-weight: bold;
  padding-left: 4.5rem;
  text-decoration: none;
  color: #036;
  border-bottom-color: transparent;
  border-left: 2px solid #036;
}

.tabs-accordion > li .icon {
  float: right;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.tabs-accordion > li.active .icon {
  color: transparent;
}

.tabs-accordion.is-accordion {
  margin-right: -15px;
  margin-bottom: 22px;
  margin-left: -15px;
  white-space: normal;
}

.tabs-accordion.is-accordion > .panel {
  border: none;
  box-shadow: none;
}

.tabs-accordion.is-accordion > .panel + .panel {
  margin-top: .2rem;
}

.tabs-accordion.is-accordion > .panel > .panel-heading > .panel-title:after {
  content: normal;
}

.tabs-accordion.is-accordion .panel-group {
  margin-bottom: 0;
}

.tabs-accordion.is-accordion .js-tabcollapse-panel-heading {
  padding: 1.4rem 2.7rem 1.4rem 1.2rem;
  background-color: #f6f6f6;
}

.tabs-accordion.is-accordion .js-tabcollapse-panel-heading .icon {
  right: 1.5rem;
}

.tabs-accordion.is-accordion .js-tabcollapse-panel-heading:not(.collapsed) {
  color: white;
  background-color: #036;
}

.tabs-accordion.is-accordion .js-tabcollapse-panel-heading:not(.collapsed) .icon:before {
  content: normal;
}

.tabs-accordion.is-accordion .panel:first-child .panel-title > .js-tabcollapse-panel-heading {
  padding-top: 1.4rem;
}

.tabs-accordion-content .panel-group {
  margin-bottom: 44px;
}

.tabs-accordion-content .panel-group .panel {
  border-width: 0 0 1px 0;
  border-color: #5c5c5c;
  box-shadow: none;
}

.tabs-accordion-content .panel-group .panel + .panel {
  margin-top: 0;
}

.tabs-accordion-content .panel-group .panel-heading + .panel-collapse > .panel-body {
  border: none;
}

.tabs-accordion-content .panel-default > .panel-heading {
  border-color: #bdbdbd;
  background-color: transparent;
}

.tabs-accordion-content .panel-heading {
  padding: 0;
}

.tabs-accordion-content .panel-title {
  font-weight: normal;
}

.tabs-accordion-content .panel-title > a {
  position: relative;
  display: block;
  padding: 1.7rem 4rem 1.7rem 0;
  color: #036;
}

.tabs-accordion-content .panel-title .icon {
  position: absolute;
  top: 1.7rem;
  right: .5rem;
  -webkit-transition: -webkit-transform .25s;
  transition: -webkit-transform .25s;
  transition: transform .25s;
  transition: transform .25s, -webkit-transform .25s;
}

.tabs-accordion-content .panel-title .icon-arrow {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.tabs-accordion-content .panel-title [aria-expanded='true'] > .icon-arrow {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.tabs-accordion-content .panel-title .icon-dash {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.tabs-accordion-content .panel-title [aria-expanded='true'] > .icon-dash {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.tabs-accordion-content .panel-title [aria-expanded='true'] > .icon-arrow,
.tabs-accordion-content .panel-title [aria-expanded='false'] > .icon-dash {
  opacity: 0;
}

.tabs-accordion-content .panel-title [aria-expanded='false'] > .icon-arrow,
.tabs-accordion-content .panel-title [aria-expanded='true'] > .icon-dash {
  opacity: 1;
}

.tabs-accordion-content .panel:first-child .panel-title > a {
  padding-top: .2rem;
}

.tabs-accordion-content .panel:first-child .panel-title .icon {
  top: .2rem;
}

.tabs-accordion-content .panel:first-child .panel-title .js-tabcollapse-panel-heading .icon {
  top: 1.7rem;
}

.tabs-accordion-content .panel-body {
  padding: 0 1.5rem 1.5rem 0;
}

.tabs-accordion-content .panel-body > p:last-child {
  margin-bottom: 0;
}

.tabs-accordion-content.is-accordion .panel-group {
  padding-left: 1.2rem;
}

.tabs-accordion-content.is-accordion .panel-heading + .panel-collapse {
  margin-bottom: 1.3rem;
}

.tabs-accordion-content.is-accordion .panel-heading + .panel-collapse > .panel-body {
  border-top: none;
}

.tabs-accordion-content.is-accordion .panel .panel-collapse .panel .panel-title > a {
  padding-top: 1.4rem;
}

.tabs-accordion-content.is-accordion .panel .panel-collapse .panel .panel-title .icon {
  top: 2rem;
  right: -.1rem;
}

.tabs-accordion-content.is-accordion .panel .panel-collapse .panel:first-child .panel-title > a {
  padding-top: 2.1rem;
}

.tabs-accordion-content.is-accordion .panel .panel-collapse .panel:first-child .panel-title .icon {
  top: 2.6rem;
}
/**
 * Bulletin(s)
 *
 */
.page-bulletin main {
  margin-bottom: 3rem;
}

.bulletin-producer {
  margin-top: 2rem;
}
/*
              <div class="bulletin-vigilance">
                <div class="bulletin-vigilance-max orange">
                  <img class="pull-left" src="assets/img/indice/vigilance-crue-max-orange.svg" width="57" alt="">
                  <div class="bulletin-vigilance-max-content">
                    <p class="bulletin-vigilance-max-title">L'état maximum de la vigilance crues métropolitaine est <strong class="label label-orange">orange</strong>.</p>
                  </div>
                </div>
              </div>
*/
.bulletin-vigilance .bulletin-vigilance-max
{
    margin-bottom: 22px;
    padding: 2rem 3rem 2.3rem 3rem;

    background: white;
}
.bulletin-vigilance .bulletin-vigilance-max-content
{
    display: table;

    padding-left: 1.3rem;
}
.bulletin-vigilance .bulletin-vigilance-link
{
    text-align: center;
}
@media (max-width: 991px)
{
    .bulletin-vigilance
    {
        max-width: 50%;
    }
}
@media (max-width: 767px)
{
    .bulletin-vigilance
    {
        max-width: none;
    }
    .bulletin-vigilance .bulletin-vigilance-max
    {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}
@media (max-width: 600px)
{
    .bulletin-vigilance .bulletin-vigilance-link
    {
        padding-left: 0;
    }
    .bulletin-vigilance .bulletin-vigilance-link .btn
    {
        width: 100%;
    }
}
/**
 * Effets d'animations
 *
 */
/* Ligne de tableau / ancre ciblée par un lien du niveau 2. Couleur de fond correspondant à la vigilance de ce tronçon (en plus clair) avec fade in rapide / fade out lent */
@-webkit-keyframes vic-link-target {
  from {
    background-color: transparent;
  }

  25% {
    background-color: #cce5ff;
  }

  to {
    background-color: transparent;
  }
}
@keyframes vic-link-target {
  from {
    background-color: transparent;
  }

  25% {
    background-color: #cce5ff;
  }

  to {
    background-color: transparent;
  }
}

.vic-link-target:target {
  -webkit-animation: vic-link-target 2.5s 1 ease-in-out;
          animation: vic-link-target 2.5s 1 ease-in-out;
}
/**
 * DEBUG
 */
/*[class*="container"] > */

/*# sourceMappingURL=maps/styles.css.map */

/* Ajouts actimage #38762 */

.btn-connexion-header{
  margin: .7rem 0 0 0;
  float: right;
  text-align: right;
}

.btn-contenu-header{
  margin: .7rem 0 0 0;
}

.imgAbonnement{
  height: 25px;
  margin-left: 10px;
}

.imgAvertissement{
  height: 25px;
  margin: 6px;
  margin-top: 9px;
}

.align-buttons{
  display:inline-block;
}

.linkStation:after{
  content: '\e900';
}

.linkStation{
  width: 90%;
  display: inline-block !important;
}

.linkAvertissementTroncon{
  width: 3.3rem !important;
}

.basin-list .open .dropdown-menu > li > a.linkAvertissementStation{
  font-size: 2.1rem;
  width: 10%;
  display: inline-block;
  padding: 0;
}

.div-btn-bulletin{
  width: 80%;
  display: inline-block;
  text-align: center;
}

.div-glyphiconTerritoire{
  width: 18%;
  display: inline-block;
  text-align: center;
}

.glyphiconTerritoire{
  font-size: 2rem;
  color: white;
  top: 4px !important;
  margin-right: 5%;
  margin-left: 5%;
}

.glyphiconTerritoire:hover{
  color: white;
}

.glyphiconBulletin{
  font-size: 2rem !important;
  margin-left: 12px;
  width:10%;
  color:#036;
  top: 4px !important;
}

.glyphiconBulletin:hover{
  color: white;
}

.title-bulletin{
  display: inline-block;
}

.btn-bulletin-glyphicon{
  color: white;
  float: right;
  padding: 0;
  margin-right: 20px;
}

.btn-bulletin-glyphicon > a{
  margin: 5px 12px;
  font-size: 15px !important;
  text-decoration: none;
}

.btn-bulletin-glyphicon:hover > a{
  color: white !important;
  text-decoration: none;
}

.glyphiconButtonBulletin > i{
  margin-right: 10px;
  top: 3px;
}

.btn-avertissement-station {
  float: right;
  margin-right: 20px;
  text-decoration: none !important;
  padding: 0 10px 0 10px;

}

.btn-avertissement-station:hover, .btn-avertissement-station:active, .btn-avertissement-station:focus{
  color: white !important;
  text-decoration: none !important;
}

.div-compte-link {
  text-align: right; 
  width: 100%;
  padding-right: 0.7em;
}


/* Fin Ajouts actimage #38762 */

.form-select-zi {
  width: 70%;
}

.btn-telecharger {
  margin: 5px;
}

#descriptionZoneInondable {
  text-align: justify;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}