/**
 * @file
 * EDSbase : Feuille de styles dédiée à l'affichage d'un cartouche.
 * NB : Ajouter la classe 'cartouche' aux lignes de la vue (.views-row)
 */

.views-row.cartouche {
  position: relative;
  box-shadow: 0 0 15px -4px rgba(100,100,100,.3);
}
.views-row.cartouche:hover {
  box-shadow: 0 0 25px -4px rgba(100,100,100,.4);
}
body.planetarium .views-row.cartouche,
body.curieux-astronomie .views-row.cartouche {
  box-shadow: none;
}
.views-row.cartouche a {
  text-decoration: none;
}
.views-row.cartouche .lien-voir {
  display: block;
  position: relative;
  overflow: hidden;
  height: 550px;
}
.views-row .lien-voir {
  background-color: #fff;
}
body.planetarium .views-row .lien-voir,
body.curieux-astronomie .views-row .lien-voir {
  background-color: #77bde8;
}
.views-row.cartouche .image {
  overflow: hidden;
}
.views-row.cartouche .image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 250ms ease;
}
.views-row.cartouche a.lien-voir:hover .image img {
  transform: scale(1.1);
}
.views-row.cartouche .texte {
  padding: 20px 25px 25px 25px;
}
.views-row.cartouche .texte .type {
  font-family: 'soleil-light';
  font-size: 1.15em;
}
.views-row.cartouche .texte .dates {
  font-family: 'soleil-semibold';
  font-size: 1.15em;
}
.views-row.cartouche .texte .titre {
  display: inline-block;
  margin-top: 25px;
  margin-bottom: 10px;
  font-family: 'soleil-extrabold';
  font-size: 2em;
}
.views-row.cartouche .texte .titre span {
  /* you can change these variables to control the border */
  --border-color: #232425;
  --border-width: 3px;
  --bottom-distance: 0px; /* you can increase this */
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-size: 0% var(--border-width);
  background-repeat: no-repeat;
  transition: background-size 0.2s;
  background-position: 50% calc(100% - var(--bottom-distance))
}
.views-row.cartouche a.lien-voir:hover .texte .titre span {
  background-size: 100% var(--border-width);
}
.views-row.cartouche .texte .accroche {
  margin-bottom: 30px;
  font-family: 'georgia-italic';
  font-size: 1.25em;
}

/*--------- <= 1300px ---------*/

@media only screen and (max-width: 1300px) {

  .views-row.cartouche .pastille div {
    height: 65px;
    width: 65px;
    font-size: .7em;
  }

}