/*
Regles CSS utilisees dans les blocs
-----------------------------------
Seules les regles utilisee uniquement
dans des blocs sont definies ici

Si une regles est egalement utilisee
dans une page, alors elle doit etre
definie dans CSS globale citizena

Les blocs sont liste par ordre
alphabetique de nom
*/


/* !! Accueil - Onglets Actualités et Agenda !! */
div#custom-toggle-block {
  text-align: center;
  margin: 21px;
  font-size: 2rem;
  font-weight: 300;
}
div#custom-toggle-block a {
  margin: 12px;
  text-transform: uppercase;
	cursor: pointer;
}
div#custom-toggle-block a:hover {
  text-decoration: none;
  color: rgb(var(--menu));
}
.toggle-active {
  border-bottom: 2px solid rgb(var(--menu));
  color: rgb(var(--menu));
}
/* -- FIN -- Accueil - Onglets Actualités et Agenda -- */



/* !! Footer perso !! */
section#block-footerperso {
	width: 100%;
}
.menu-footer {
	border-left: 1px solid rgb(var(--darkblue));
	display: flow;
	list-style: none;
	margin-bottom: auto;
	height: 74px;
	float: right;
	padding-left: 10px;
	font-size: 14px;
}
.container.bg-blanc {
	/*background: #FFF;*/
	margin-right: auto;
	margin-left: auto;
}
.container.bg-blue {
	background: linear-gradient(to right, rgb(30, 84, 163), rgb(20, 185, 237));
	color: #fff;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	text-align: center;
}
#pied-page {
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
}
figure {
	margin: 0;
}
figure img {
	max-height: 80px;
}
@media screen and (max-width: 768px) {
	.menu-footer {
		float: left;
	}
	.container.bg-blue {
		font-size: 2.6vw;
	}
}
/* -- FIN -- Footer perso -- */



/* !! Motion design !! */
#block-citizena-themes-motiondesign-2 {
	margin: 30px 0;
}
.video-block {
  margin: 40px auto;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  min-height: 300px;
  border: 1px solid #e5e7eb;
}
.video-block .left-bubble {
  position: relative;
  flex: 1 1 50%;
  min-width: 200px;
  background-image: none;
  /* plus de vignette */
  background-color: black;
  /* ou une couleur neutre */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.video-block .left-bubble iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: none;
}
.video-block .right-text {
  flex: 1 1 50%;
  min-width: 250px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.video-block .right-text h3 {
  margin-top: 0;
}
.video-block .right-text p {
  line-height: 1.5;
  color: #333;
}
@media (max-width: 768px) {
  .video-block {
    flex-direction: column;
    min-height: auto;
  }
  .video-block .left-bubble,
  .video-block .right-text {
    flex: 1 1 100%;
    min-width: auto;
    padding: 0;
  }
  .video-block .left-bubble iframe {
    min-height: 200px;
  }
  .video-block .right-text {
    padding: 20px;
  }
}
/* -- FIN -- Motion design -- */