/*
Theme Name: L'Europe s'engage en France - Specifics FO styles for media displays (view-mode)
Author: ANCT
Author URI: https://agence-cohesion-territoires.gouv.fr/
Description: Theme de l'Europe s'engage en France basé sur le design system de l'Etat
License: LICENCE OUVERTE 2.0
License URI: https://github.com/etalab/licence-ouverte/blob/master/LO.md
*/

@charset "utf-8";

/******************************************************************************
  Transverse
*******************************************************************************/
.field--type-text-with-summary .media.align-center,
.field--widget-text-textarea .media.align-center {
  text-align: center;
}

.field--type-text-with-summary .media.accroche > div, 
.field--widget-text-textarea .media.accroche  > div {
  max-width: 100px;
  display: inline-block;
}
.field--type-text-with-summary .media.galerie > div, 
.field--widget-text-textarea .media.galerie  > div {
  max-width: 270px;
  display: inline-block;
}
.field--type-text-with-summary .media.galerie-big > div, 
.field--widget-text-textarea .media.galerie-big > div {
  max-width: 570px;
  display: inline-block;
}

.field--type-text-with-summary .media.image a, .field--widget-text-textarea .media.image a, 
.field--type-text-with-summary .media.video a, .field--widget-text-textarea .media.video a,
.field--type-text-with-summary .media.remote-video a, .field--widget-text-textarea .media.remote-video a
{
  display: inline-block;
}

/******************************************************************************
  Fichier
*******************************************************************************/
.media.fichier {
    display: block;
    text-align: center;
    margin: 1rem;
}
.media.fichier i {
    margin-bottom: 1rem;
}
.media.fichier .title {
    color: var(--grey-50);
    word-break: break-word;
}
.media.fichier .title:hover {
    color: var(--secondary-blue-paon);
}

/******************************************************************************
  Accroche
*******************************************************************************/
.media.remote-video.accroche .play-button {top: 0;}
.media.video.accroche .play-button {top: 10%;}

/******************************************************************************
  Video
*******************************************************************************/
.media.video .field--name-thumbnail {
    background-color: rgb(51 51 51 / 30%);
}

/******************************************************************************
  Lottie
*******************************************************************************/
.media.accroche {
  
}