/* Bille en Tete - bloc video de l'accueil.
   Largeur du contenu : le bloc herite du conteneur du theme, rien a forcer. */

/* ---------------------------------------------------------------------
   Typographie du bloc texte de l'accueil (#custom-text).
   Place ici faute d'acces a la CSS du theme : cette feuille n'est
   chargee que sur l'accueil, donc la portee est la bonne.

   Le theme met tous les paragraphes du bloc en 1.1em / graisse 100.
   On ramene tout a 16px en graisse normale.

   Attention : le theme declare `b, strong { font-weight: bolder }`,
   une valeur RELATIVE au parent. Avec un paragraphe en graisse 100,
   `bolder` valait 400 ; avec un paragraphe en 400 il monte a 700, ce
   qui rend les intertitres bleus trop gras. D'ou la valeur absolue
   ci-dessous. Pour ajuster : 400 = plus leger, 700 = gras franc.

   Le selecteur commence par `body` pour passer devant la regle du
   theme quel que soit l'ordre de chargement des feuilles.
   --------------------------------------------------------------------- */

body #custom-text p {
  font-size: 16px;
  font-weight: 400;
}

body #custom-text p strong,
body #custom-text p b,
body #custom-text [class*="col-md-"] > strong {
  font-weight: 500;
}

/* De l'air : au-dessus du titre, sous le chapeau, et sous le bouton
   (cette derniere via la marge haute du trait de separation). */

.btt-videos {
  margin: 2.25rem 0 2.5rem;
}

/* Titre et chapeau : memes valeurs que #custom-text h3 et #custom-text p,
   pour que le bloc se lise comme le reste de l'accueil. */

.btt-videos__title {
  margin: 0 0 .35rem;
  font-size: 1.5625rem;
  font-weight: 100;
  text-transform: uppercase;
  color: #414141;
  text-align: center;
}

.btt-videos__intro {
  margin: 0 0 2.25rem;
  font-size: 1.1em;
  font-weight: 100;
  color: #414141;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Grille des articles du blog (page CMS categorie).
   Le gabarit correspondant est themes/classic/templates/cms/category.tpl
   4 cartes par ligne sur ordinateur, 2 sur tablette, 1 sur telephone.
   --------------------------------------------------------------------- */

/* texte de presentation, au-dessus de la grille */
.btt-blog__intro {
  max-width: 70ch;
  margin: .5rem auto 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #414141;
  text-align: center;
}

.btt-blog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4.25rem = les 3rem precedents plus une ligne vide sous le trait */
  gap: 4.25rem 1.5rem;
  margin: 2.5rem 0 3rem;
}

/* chaque carte se termine par un trait, comme les sections du site */
.btt-blog__carte {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.btt-blog__vignette {
  display: block;
  overflow: hidden;
  background: #f6f6f6;
}

.btt-blog__vignette img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}

.btt-blog__vignette:hover img,
.btt-blog__vignette:focus img {
  transform: scale(1.04);
}

.btt-blog__titre {
  flex: 1 1 auto;
  margin: .9rem 0 .8rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #414141;
  text-transform: none;
}

.btt-blog__titre a {
  color: inherit;
}

.btt-blog__titre a:hover {
  color: #2fb5d2;
}

/* bouton centre, texte plus discret que celui des boutons du catalogue */
.btt-blog__action {
  margin-top: auto;
  text-align: center;
}

.btt-blog__action .btn {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
}

.btt-blog__sous-categories {
  margin: 1rem 0 2rem;
  padding-left: 1.2rem;
}

@media (max-width: 991px) {
  .btt-blog {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .btt-blog {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btt-blog__vignette img {
    transition: none;
  }
  .btt-blog__vignette:hover img {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Page « C'est quoi ? » seule (categorie CMS 4).
   Trois rubriques : trois colonnes, titre centre, pas de bouton.

   Le cloisonnement passe par la classe cms-id-4 que PrestaShop pose sur
   le <body>, presente dans les deux langues. Le blog porte cms-id-2 et
   n'est donc pas concerne ; les autres pages CMS n'utilisent pas ce
   gabarit du tout.

   Les regles pour petits ecrans sont cloisonnees elles aussi : sans ca,
   la regle a trois colonnes ci-dessous, plus specifique, l'emporterait
   meme sur telephone.
   --------------------------------------------------------------------- */

body.cms-id-4 .btt-blog {
  grid-template-columns: repeat(3, 1fr);
}

body.cms-id-4 .btt-blog__titre {
  text-align: center;
}

/* Pas de trait sous les cartes ici : la page n'a qu'une seule ligne, le
   trait se retrouverait tout en bas sans rien avoir a separer. */
body.cms-id-4 .btt-blog__carte {
  padding-bottom: 0;
  border-bottom: 0;
}

/* on garde trois colonnes sur tablette : a deux, une carte se
   retrouverait seule sur la ligne du dessous */
@media (max-width: 767px) {
  body.cms-id-4 .btt-blog {
    grid-template-columns: 1fr;
  }
}

/* --- le grand lecteur, en 16/9 --------------------------------------- */

.btt-videos__stage {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: #000;
}

.btt-videos__facade,
.btt-videos__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.btt-videos__facade {
  display: block;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;
}

.btt-videos__facade-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* le bouton lecture */
.btt-videos__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 2px solid #fff;
  transition: background .18s ease, transform .18s ease;
}

.btt-videos__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -8px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}

.btt-videos__facade:hover .btt-videos__play,
.btt-videos__facade:focus .btt-videos__play {
  background: #2fb5d2;
  transform: scale(1.06);
}

.btt-videos__stage-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2.5rem .9rem .8rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
}

/* --- la rangee de vignettes ------------------------------------------ */

.btt-videos__list {
  display: flex;
  gap: .6rem;
  margin: .6rem 0 0;
  padding: 0 0 .3rem;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.btt-videos__item {
  flex: 1 0 0;
  min-width: 148px;
}

.btt-videos__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.btt-videos__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid transparent;
  opacity: .68;
  transition: opacity .18s ease, border-color .18s ease;
}

.btt-videos__thumb:hover img,
.btt-videos__thumb:focus img {
  opacity: 1;
}

.btt-videos__thumb.is-active img {
  opacity: 1;
  border-color: #2fb5d2;
}

.btt-videos__label {
  display: block;
  padding: .4rem .1rem 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: #878787;
  text-align: center;
}

.btt-videos__thumb.is-active .btt-videos__label {
  color: #414141;
  font-weight: 600;
}

/* --- bouton vers la chaine, puis trait de separation ------------------ */

.btt-videos__more {
  margin: 1.25rem 0 0;
  text-align: center;
}

/* le <hr> reprend le trait du theme : 1px rgba(0,0,0,.1), marges de 16px.
   Sa marge haute fait l'air demande sous le bouton. */
.btt-videos hr {
  margin-top: 2.25rem;
}

/* --- petits ecrans ---------------------------------------------------- */

@media (max-width: 767px) {
  .btt-videos {
    margin: 1.5rem 0 1.75rem;
  }

  .btt-videos__title {
    font-size: 1.25rem;
  }

  .btt-videos__play {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
  }

  .btt-videos__play::after {
    margin: -10px 0 0 -6px;
    border-width: 10px 0 10px 17px;
  }

  .btt-videos__stage-label {
    font-size: .875rem;
    padding: 2rem .7rem .6rem;
  }

  /* les vignettes defilent horizontalement plutot que de s'ecraser */
  .btt-videos__item {
    flex: 0 0 44%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btt-videos__play,
  .btt-videos__thumb img {
    transition: none;
  }

  .btt-videos__facade:hover .btt-videos__play,
  .btt-videos__facade:focus .btt-videos__play {
    transform: none;
  }
}