/* Skin-specific CSS code. */


@font-face{
font-display:swap;
font-family:Marianne;
font-style:normal;
font-weight:300;
src:url(res/fonts/Marianne-Light.woff2) format("woff2"),url(res/fonts/Marianne-Light.woff) format("woff")}
@font-face{font-display:swap;
font-family:Marianne;
font-style:italic;
font-weight:300;
src:url(res/fonts/Marianne-Light_Italic.woff2) format("woff2"),url(res/fonts/Marianne-Light_Italic.woff) format("woff")}
@font-face{font-display:swap;
font-family:Marianne;
font-style:normal;
font-weight:400;
src:url(res/fonts/Marianne-Regular.woff2) format("woff2"),url(res/fonts/Marianne-Regular.woff) format("woff")}
@font-face{font-display:swap;
font-family:Marianne;
font-style:italic;
font-weight:400;
src:url(res/fonts/Marianne-Regular_Italic.woff2) format("woff2"),url(res/fonts/Marianne-Regular_Italic.woff) format("woff")}
@font-face{font-display:swap;
font-family:Marianne;
font-style:normal;
font-weight:500;
src:url(res/fonts/Marianne-Medium.woff2) format("woff2"),url(res/fonts/Marianne-Medium.woff) format("woff")}
@font-face{font-display:swap;
font-family:Marianne;
font-style:italic;
font-weight:500;
src:url(res/fonts/Marianne-Medium_Italic.woff2) format("woff2"),url(res/fonts/Marianne-Medium_Italic.woff) format("woff")}
@font-face{font-display:swap;
font-family:Marianne;
font-style:normal;
font-weight:700;
src:url(res/fonts/Marianne-Bold.woff2) format("woff2"),url(res/fonts/Marianne-Bold.woff) format("woff")}
@font-face{font-display:swap;
font-family:Marianne;
font-style:italic;
font-weight:700;
src:url(res/fonts/Marianne-Bold_Italic.woff2) format("woff2"),url(res/fonts/Marianne-Bold_Italic.woff) format("woff")}
@font-face{font-display:swap;
font-family:Spectral;
font-style:normal;
font-weight:400;
src:url(res/fonts/Spectral-Regular.woff2) format("woff2"),url(res/fonts/Spectral-Regular.woff) format("woff")}
@font-face{font-display:swap;
font-family:Spectral;
font-style:normal;
font-weight:900;
src:url(res/fonts/Spectral-ExtraBold.woff2) format("woff2"),url(res/fonts/Spectral-ExtraBold.woff) format("woff")}



:root{
	--fontSize: .9em;
	--fontStyle: 'Marianne','Roboto';
	--accentColor:#000091;
	--accentColorAlpha:#FFFFFF;
	--accentDarkFG: #FFFFFF;
	--accentLight: #FFFFFF;
	--contentBG: #FFF;
	--contentFG: #000;
  --blockWarning: #FF3434;
  --blockWarningLight: #ff343417;
  --blockAdvice: #8c750e;
  --blockTip: #7CB342;
  --blockExample: #1976D2;
  --blockNote: #b34000;
  --blockNoteLight: #ff660026;
  --blockLegal: #18753c;
  --blockComplement: #795548;
  --blockComplementLight: #79554821;
  --blockObjectives: #000091;
  --blockObjectivesLight: #f5f5fe;
  --blockAgenda: #000091;
	--evalAccentColor: #00838F;
	--evalAccentLight: #E0F7FA;
  --bleuMarianne:#000091;
   --bleuMarianneHover:#1a12ff;
  --alert:#ce0500;
  --success:#18753c;
  --info:#0063cb;
  --warning:#b34000;
    --menuWidth: 200px;
}

h2.slideBk_ti{
  padding-top : 0.4em;
  paddong-bottom : 0.3em;
  text-align: left;
  color: black;
}
h1.home_ti::before {
  content:"";
  background : url("res/img/racad.png");
  background-size: 165px 83px;
  background-repeat: no-repeat;
  width : var(--menuWidth);
  height : 83px;
  vertical-align: middle;
  position: absolute;
  left: 10px;
  top: 10px;
}
h2.slideBk_ti::before {
  content:"";
  background : url("res/img/racad.png");
  background-size: 165px 83px;
  background-repeat: no-repeat;
  width : var(--menuWidth);
  height : 83px;
  vertical-align: middle;
    display: inline-block;

}

button, #home > div > nav > button, #root > .tools button
{
  background-color: var(--bleuMarianne);
  color: white;
}

button:hover, #home > div > nav > button:hover, #root > .tools button:hover
{
  background-color: var(--bleuMarianneHover);
  color : white;
}


.warning.bloc_sp{
  background: transparent;
  border: 1px solid var(--alert);
  border-left: 1.5em solid var(--alert);
}

.warning.bloc_sp::before{
  background-color: var(--alert);
  left: -1.5em;
}

.legal.bloc_sp{
  background: transparent;
  border: 1px solid var(--success);
  border-left: 1.5em solid var(--success);
}

.legal.bloc_sp::before{
  background-color: var(--success);
  left: -1.5em;
}

.note.bloc_sp{
  background: transparent;
  border: 1px solid var(--warning);
  border-left: 1.5em solid var(--warning);
}

.note.bloc_sp::before{
  background-color: var(--warning);
  left: -1.5em;
}

.example.bloc_sp{
  background: #eeeeee;
  border-left: 4px solid var(--info);
  padding-left: 2.5em;
    padding-top: 2.5em;
}
.example.bloc_sp::before{
  background-color: transparent;
  color:gray;
  left: 5px;
}

.tip.bloc_sp{
  background: #eeeeee;
  border-left: 4px solid var(--success);
  padding-left: 2.5em;
  padding-top: 2.5em;
}
.tip.bloc_sp::before{
  background-color: transparent;
  color:gray;
  left: 5px;
}

.advice.bloc_sp{
  background: #eeeeee;
  border-left: 4px solid var(--alert);
  padding-left: 2.5em;
  padding-top: 2.5em;
}
.advice.bloc_sp::before{
  background-color: transparent;
  color:gray;
  left: 5px;
}

.complement.bloc_sp{
  background: #eeeeee;
  border-left: 4px solid var(--warning);
  padding-left: 2.5em;
  padding-top: 2.5em;
}
.complement.bbloc_splock ::before{
  background-color: transparent;
  color:gray;
  left: 5px;
}

.complement_co.block_co{
  display: inline!important;
}

#toc  li{
  padding-left : 0.5em;
}
#toc li a {
  padding-left : 1em;
}
#toc a.selected{
  background-color : transparent;
  border-right:  none;
  border-left : 2px solid var(--bleuMarianne);
}
#toc a.selected > span{
  color: var(--bleuMarianne);
}

.progCount{
  background-image: none;
}