/** Style de l'espace e-learning
 * Beta version
 * Non-minimisée
 * Non SaSS
**/

#contenu h2 {margin-top:5rem;margin-bottom:2rem}
#contenu h3 {margin-top:2rem;margin-bottom:0.5rem}

.attendance-tracking {
  display   : flex;
  flex-wrap : wrap;
  padding   : 0 0 1rem;
}

/*********************************** Espace apprenant */
	/* Parcours pédagogique */
	#parcours .figure, #parcours .next-step {
		width: 155px;
		min-width: 155px;
		max-width: 155px;
	}
	#parcours .next-step.--done {
		opacity:.25
	}
	@media (max-width:736px) {
		#parcours .next-step {margin: 30px auto;}
	}


/*********************************** Espace elearning */
#courses-form {
	display: inline-flex;
	justify-content: center;
	align-content: center;
	margin-top: 10px;
	max-width: 100%;
}
#courses-form--submit {
	position: relative;
    left: 5px;
	font-family:'Krona One', sans-serif;
	cursor:pointer;
	border: 2px solid #c3c8c9;
	color:#102228;
}
@media all and (max-width:999px) {
	#courses-form {
	  flex-wrap: wrap;
	}
	#courses-form--submit {
		margin:15px auto
	}
}

#sommaire {
	padding-bottom:30px;
}

#contenu p:not(img, video), #contenu h2:not(:last-child), #contenu h3, #contenu ol, #contenu ul, #contenu blockquote {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

#pagination {
	width:100%
}

#contenu iframe {
    width: 100%;
    height: 40vh;
    min-height: 800px;
}

#contenu img, #contenu video {
  max-width: 100%;
  height: auto !important;
}

.wp-caption {
  margin-left: auto;
  margin-right: auto;	
}

main :not(.pictogramme, .next-step) > img:not(.alignnone, .profile), #contenu video, .wp-caption {
  display: block;
  margin-top: 3em;
  margin-bottom: 2em;
}

#exercice {width:96%}
#solution {width:100%}

#contenu blockquote /* Messages d'alertes */ {
  box-shadow: 2px 2px 3px rgba(0,0,0,0.05);
  background-color: #FDFDFD;
  border: 0 !important;
  margin-bottom: 4em !important;
  padding: 2%;
  color: #FF6B93;
}

#contenu em {
	font-style: normal;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.24);
	background-color: #102228;
	border: 0 !important;
	padding: 3px 6px;
	color: #ADE28A;
	display: inline-block;
	font-weight: 900;
	text-transform: uppercase;
	font-size: 11px;
	border-radius: 2px;
}

section.faq--container {
  padding-bottom : 4%;
}

.home-faq {
  background-color : transparent;
  padding          : 0;
}

.home-faq p,
.home-faq li,
.home-faq span {
  color : #fff !important; /* specificity problem! */
}

/* ACCORDION */
.ac {
  background-color : transparent;
  box-sizing       : border-box;
  margin-bottom    : 3rem;
}

.ac-header {

  /* appearance */
  background-color : #ade28a;

  /* positioning */
  align-items     : center;
  cursor          : pointer;
  display         : flex;
  justify-content : space-between;

  /* text */
  color       : #102228;
  font-family : 'Krona One', sans-serif;

  /* size*/
  padding : 2% 3%;
}

.ac-header::after {
  content    : url('https://www.rstartr.academy/wp-content/uploads/2022/10/chevrondown.svg');
  transform  : scale(0.7);
  transition : transform .4s ease-in-out;
}

.ac[open] > .ac-header::after {
  content    : url('https://www.rstartr.academy/wp-content/uploads/2022/10/chevrondown.svg');
  transform  : scale(0.7) rotate(-180deg);
  transition : transform .4s ease-in-out;
}

.ac-panel {
  padding : 2% 4% 4%
}

@keyframes open {
  0% {opacity : 0; height : 0}
  30% {opacity : 1;}
  100% {opacity : 1; height : 100%}
}

@media (prefers-reduced-motion : no-preference) {
  .ac:not([open]) > .ac-panel {
    animation : none;
  }

  .ac[open] > .ac-panel {
    animation : open .6s ease-in-out;
  }
}