/*
Theme Name:  Distilleries de Provence TV
Description: Theme enfant de Distilleries de Provence
Author: Agence Myod
Author URI: https://www.myod.fr/
Template:  twentytwentyone
Version:  1.0
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

:root {
  --font-headings: "Montserrat", sans-serif;
  /* Colors */
  --global--color-primary: #000000; /* Body text color, site title, footer text color. */
  --global--color-background: #ffffff; /* Mint, default body background */
  --global--font-size-xxl: 44px;
  /* TV */
  --tv--color-primary: #979797; /* Body text color, site title, footer text color. */
  --tv--color-background: #40403f; /* Mint, default body background */
  --tv--color-secondary: #b52723; /* Trait sous h2 */
  --tv--heading--font-size-h2: 20px;
  --tv--container-width: 1170px;
  --tv--top-banner-height: 95px;
}

.site-main {
  padding: 0;
}

.post-thumbnail,
.entry-content .wp-audio-shortcode,
.entry-content
  > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*="inner-container"]
  > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
.default-max-width {
  max-width: initial;
}

/* TV PAGE */
.page-template-tv-template-detail,
.page-template-tv-template {
  background: var(--tv--color-background);
  color: var(--tv--color-primary);
}
.tv-page h1 {
  color: #ffffff;
  text-align: center;
  margin-bottom: 8px;
}
.tv-page h2 {
  font-size: var(--tv--heading--font-size-h2);
  text-align: center;
  position: relative;
  padding-bottom: 27px;
  margin-top: 0px !important;
  margin-bottom: 30px !important;
}
.tv-page h2:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 92px;
  height: 4px;
  background: var(--tv--color-secondary);
  margin-left: -46px;
}
.tv-page a {
  color: var(--tv--color-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
}
.tv-page .container {
  width: var(--tv--container-width);
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.tv-page #tv-page-fond {
  position: fixed;
  top: var(--tv--top-banner-height);
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.tv-page #top-banner {
  position: relative;
  width: 100%;
  height: var(--tv--top-banner-height);
  background: #ffffff;
  margin-top: 0;
  margin-bottom: 90px;
}

.tv-page #top-banner .entry-content {
  margin: 0 auto;
  position: relative;
}

.tv-page #top-banner .logo {
  position: absolute;
  top: 44px;
  left: 0;
}

.tv-page .language {
  position: absolute;
  right: 0;
  top: 45px;
  display: flex;
  align-items: flex-start;
}

.tv-page .language a {
  opacity: 0.6;
  transition: opacity 300ms ease;
}

.tv-page .language img {
  margin-left: 15px;
}

.tv-page .language a.active,
.tv-page .language a:hover {
  opacity: 1;
}

.tv-page #videos-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: top;
  margin: 0 -15px;
}

.tv-page .video-card {
  width: 33%;
  padding: 0 15px;
}

.tv-page .videos-container-1 .video-card {
  width: 60%;
}
.tv-page .videos-container-2 .video-card {
  width: 50%;
}

.tv-page .videos-container-3 .video-card,
.tv-page .videos-container-4 .video-card {
  width: 38%;
}

.tv-page .video-card img {
  width: 100%;
}

.tv-page .video-card .image {
  width: 100%;
  position: relative;
}

.tv-page .video-card .image:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 47px;
  height: 47px;
  margin-top: -23px;
  margin-left: -23px;
  background: url("./img/icon-play.png");
}

.page-template-tv-template-detail .video-card figcaption,
.tv-page .video-card figcaption {
  line-height: 19px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.tv-page #pied-de-page {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.page-id-58 .tv-page #top-banner img,
.page-id-107 .tv-page #top-banner img {
  top: 45px;
}

.page-template-tv-template-detail #top-banner .logo {
  top: 41px;
  width: 243px;
}
.page-template-tv-template-detail .tv-page #videos-container {
  margin-bottom: 137px;
}
.page-template-tv-template-detail .tv-page .video-card {
  width: 828px;
  padding: 0;
  height: 465px;
}