/* Le bandeau 3TOON (entete.js), en haut des pages du site. */
/* Sa place, réservée avant qu'il arrive (aussi haut que lui : 138 pixels à 1280 de large et plus,
   moins en dessous) : la page ne saute pas. */
#entete {
  display: block;
  height: min(138px, calc(100vw * 138 / 1280));
  background: #080808;
}
@media (max-width: 649.98px) {
  #entete {
    height: calc(min(76px, (100vw - 24px) / 4.7712) + 12px);
  }
}
/* Au-dessus de la page, ses éléments agrandis compris ; sous les fenêtres qui s'ouvrent par-dessus
   elle (confidentialité, partage : 20 ; les mots de la page : 10). */
.entete3toon {
  position: relative;
  z-index: 5;
  width: 100%;
  background: #080808;
  overflow: visible;
}
.entete-rangee {
  position: absolute;
  top: 0;
  width: 1280px;
  height: 138px;
  transform-origin: 0 0;
}
/* Les cases des éléments : rien au large (la rangée les place), la file sur un téléphone. */
.entete-cellule {
  display: contents;
}
.entete-item {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
  will-change: transform;
  text-decoration: none;
  outline-offset: 3px;
}
.entete-face {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 7px;
  background: #080808;
}
.entete-face video,
.entete-face img,
.entete-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entete-film {
  position: relative;
}
.entete-film canvas {
  pointer-events: none;
}
/* Le logo : son film sans fond, posé sur ce qu'il y a dessous (le bandeau, la page). */
.entete-logo .entete-face {
  border-radius: 0;
  background: transparent;
}
/* L'onglet des vignettes (E-LEARNING…) : collé à droite de la vidéo, un peu plus court. */
.entete-onglet {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 94%;
  display: block;
}
/* Un élément agrandi : une ombre pour le détacher de la page dessous. */
.entete-grand .entete-face {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
.entete-logo.entete-grand .entete-face {
  box-shadow: none;
}
/* Sur un téléphone (entete.js, NARROW) : en haut le logo, « Film personnalisé » et le devis ; le
   reste dans un second bandeau tout en bas ; centrés, sans défiler. */
.entete-mobile .entete-rangee {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 6px;
  box-sizing: border-box;
  overflow: hidden;
}
.entete-mobile .entete-cellule {
  display: block;
  position: relative;
  flex: none;
}
.entete-mobile .entete-grand .entete-face {
  box-shadow: none;
}
.entete-bas {
  margin-top: 12px;
}
.entete-bas[hidden] {
  display: none;
}