
:root{
  --fontStyle: 'Roboto', sans-serif;
	--fontSize: 1em; 
  --borderGradient: 0%;
  --borderWidth: 1.5px;
	--contentBG: white;
	--contentFG: black;
	--contentEmp: black;
	--accentDarkBG: #0A8297;
	--accentDarkBGalpha: #0A8297;
	--accentDarkFG: white;
	--accentLightBG: #0A8297;
	--accentLightBGalpha: #e0ecec60;
	--accentLightFG: black;
  --pBkOthers: #005F6D;
  --pBkOthersLight: white;
  --pBkWarning: #D51921;
  --pBkWarningLight: #D5192150;
  --pBkBasic: #9F590E;
  --pBkBasicLight: #9F590E50;
	--footerBG: #f2f2f2;
	--footerFG: black;
	--maxWidth: 1300px;
	--menuWidth: 300px;
}
@media (max-width: 1800px) {
	.default .scroller, .sco .scroller, 
  .default .zen_true .scroller, .sco .zen_true .scroller{
		padding:1em;
	}
}

@media (max-width: 800px) {
    .default #navigation {
        background-image: none;
    }
}

/*******************************************HOME*******************************************/
/*Fond + banniere */
html[dir='ltr'] .home #root {
    background: white url('../img/Banniereecriplus.jpg') no-repeat;
    background-size: auto 6em;
    background-position: center bottom 1em;
    display: flex;
}
  
/*Encadré*/
.home section.article {
    width: 100vw;
    padding: 5em 10% 6.5em 10%;
    box-shadow: none;
    position: relative;
    border-radius: 0;
    font-family: "Open Sans";
}
  
.home #content {
    flex-direction: column;
}

/*Sous-titre*/
.home section.article .centered-heading--home, 
.sco section.article .centered-heading--home {
    text-align: center;
    font-size: 1.8em;
    font-weight: bold; 
    color: white;
}

/*Bouton*/
.home #navigation a {
    padding-inline-start: 20px;
    box-shadow: none;
    font-size: 1.5em; 
    border-radius: 0.5em;
}

.home #navigation a::after {
    content: ' ';
    height: 40px;
    width: 40px;
    background: url(../img/Bouton_suivant.svg) no-repeat right;
    background-size: 40px 40px;
    margin-inline-start: 0.5em;
}
/*survol bouton*/
  .home #navigation a:hover {
    background: #EC9329;
    color : black;
}

/*survol flèche suivant en noir*/
.home #navigation a:hover::after {
    filter: brightness(0);
}
  
/*******************************************HEADER/FOOTER*************************************************/
/*couleur + sans image grise*/
html[dir='ltr'] body.default:not(.emeraude) #header,
body.sco #header {
    background: url('../img/logoecriplus.png') no-repeat 1em 0.7em / auto 3em;
}
  
html[dir='ltr'] body.default:not(.emeraude, .rubis) #root {
    background-image: none;
    background-color: var(--accentDarkFG);
}

/*Sous-titre */
.default #header .centered-heading--header,
.sco #header .centered-heading--header {
  text-align: end;
  display: flex;
  justify-content: flex-end;
  padding-inline-end: 1em;
  padding-top: 0.1em;
  font-size: 1.3em;
  font-weight: bold;
}

/*couleur TITRE h1 + sous-titre, */ 
.default #header h1, .sco #header h1, .centered-heading--header,
.sco #header .centered-heading--header {
  color: var(--accentDarkBGalpha);
  font-family: "Open Sans";
}

/**********************************BOUTONS*********************************/
/*Bouton HOME : none*/
.default #tools li {
  display: none;
}
  
/*bouton CONTENU : none*/
.default #tools .anc_yes .lbl {
  display: none;
}

/* none boutons : contenu, menu, navigation, outils*/ 
ul#accessibility {
    display: none;
}

.default #navigation a {
    background: url(../img/ButtonsRL.svg) no-repeat top;
    background-color: var(--accentDarkBGalpha);
    border-radius: 50%;
} 
  
.default #navigation a.btnNav.prev {
    background-position: center -6px;
}

.default #navigation a.btnNav.next {
    background-position: -2px -55px;
}

.default .zen_true #navigation a.btnZen {
    background-position: -4px -128px;
}

.default #navigation a.btnZen {
    background-position: -5px -96px;
}

/*Survol*/
.default #navigation a:hover {
  background: url(../img/ButtonsRLhover.svg) no-repeat top;
  background-color: #EC9329;
  border-radius: 50%;
}

.default .zen_true #navigation a.btnZen:hover {
    background-position: -4px -128px;
}

.default #navigation a.btnZen:hover {
    background-position: -5px -96px;
}

/*********************************************CORPS***********************************************/   
/*police titres*/
section.article>.hBk_ti, .sco section.article>.mainContent_ti {
  font-family: "Open Sans";
}

/*sans ligne sous le titre*/
html[dir='ltr'] section>.hBk_ti, html[dir='ltr'] .sco section>.mainContent_ti {
    background-image: none;
}

/*icones : conseil.... supprimer****/
.cBk_ti i.type, *:not(.typed) > .pBk_ti i.type {
    background-image: none;
}

.cBk_ti i.type, .pBk_ti i.type {
    color: transparent;
    flex: 0 0 auto;
    height: 0px;
}

/*color text magenta et bleu*/
sup {
    top: 0em;
    color: #ac008d;
}

sub {
    bottom: 0em;
    color: #0a8297;
}

sub, sup {
    font-size: 100%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

/*Survol*/
a:hover {
  background-color: #EC9329;
}
  
/*Focus*/
a:focus, input:focus, video:focus, button:focus, 
[type="checkbox"]:checked:focus+label:before, 
[type="checkbox"]:not(:checked):focus+label:before {
  outline: 3px solid #005F6D;
  transition: outline .25s ease-in-out;
}
  
/*Taille blocks*/
.advice.pBk {
  block-size: auto
}

/*Taille max images*/
img.illusDeco {
    max-block-size: 80px; 
    width: auto;          
    display: block;       
}

/**********************************icones TITRE************************************/
/* Icones à gauche du TITRE*/
html[dir='ltr'] .module .hBk>h2.hBk_ti:before, 
html[dir='ltr'] .sco .mainContent>h2.mainContent_ti:before {
    float: left;
}

/* Icone (INTRO) à droite du TITRE*/
html[dir='ltr'] .module .intro>h2.hBk_ti:before, 
html[dir='ltr'] .sco .mainContent>h2.mainContent_ti:before {
    float: right;
}

/*icones*/
.module .hBk > h2.hBk_ti::before {
    content: "";
    display: inline-block;
    background-image: var(--icon-image);
    background-size: contain;
}
/*icone intro*/
.module .intro>h2.hBk_ti:before, .sco .intro>h2.mainContent_ti:before {
  background: none;
}
/**********************************icones MENU************************************/
.default #menu .mnu .item{
  background-repeat:no-repeat;
  background-position:left -5%;
  display: flex;
  align-items: center;
  height: 50px;
  padding-inline-start: 50px;
}

/*contenu*/
.default #menu .mnu #SOUVENEZ-VOUS\.html .item{
  background-image: url(../img/Icones/Noir/1.svg);
  background-position:left -10%;         
}

.default #menu .mnu #UNE_QUESTION_DE_METHODE\.html .item{
  background-image: url(../img/Icones/Noir/2.svg); 
}

.default #menu .mnu #DAUTRES_ONT_REPONDU\.html .item{
  background-image: url(../img/Icones/Noir/3.svg); 
}

.default #menu .mnu #NOTRE_METHODE_EN_VIDEO\.html .item{
  background-image: url(../img/Icones/Noir/4.svg); 
}

.default #menu .mnu #POUR_ALLER_PLUS_LOIN\.html .item{
  background-image: url(../img/Icones/Noir/5.svg); 
}

.default #menu .mnu #Credits\.html .item{
  background-image: url(../img/Icones/Noir/6.svg); 
}

/*lien actif*/
.default #menu .mnu li.sel_yes > #SOUVENEZ-VOUS\.html > .item {
  background-image: url(../img/Icones/Bleu/1.svg);
  background-position: left -10%;
  background-repeat: no-repeat;
}

.default #menu .mnu li.sel_yes > #UNE_QUESTION_DE_METHODE\.html .item{
  background-image: url(../img/Icones/Bleu/2.svg); 
}

.default #menu .mnu li.sel_yes > #DAUTRES_ONT_REPONDU\.html .item{
  background-image: url(../img/Icones/Bleu/3.svg); 
}

.default #menu .mnu li.sel_yes > #NOTRE_METHODE_EN_VIDEO\.html .item{
  background-image: url(../img/Icones/Bleu/4.svg); 
}

.default #menu .mnu li.sel_yes > #POUR_ALLER_PLUS_LOIN\.html .item{
  background-image: url(../img/Icones/Bleu/5.svg); 
}

.default #menu .mnu li.sel_yes > #Credits\.html .item{
  background-image: url(../img/Icones/Bleu/6.svg); 
}

/**********************************MENU************************************/
/*Menu sans padding*/
.default #menu .mnu .lbl{
  padding-inline:0;
}

/*Sans image*/
.default #menu .mnuSrlUpBtn, .default #menu .mnuSrlDwnBtn {
    background-image: none;
}

/*taille, couleur, position*/
.default #toolbox {
	flex: 0 0 15em;
  background-color: #0A8297;
	position: relative;
	inset-inline-start: auto;
}

/*couleur texte*/
.default #menu .mnu .item > span{ 
  font-weight: bold ;
  color : Black; 
  font-family: "Open Sans";
}

/*survol*/
   a.item:hover {
  background-color: #EC9329;
   border-radius: 5px;
}

/*lien actif*/
.default #menu .mnu .sel_yes>.lbl .item {
  background-color: white;
  border-radius: 5px; 
}

.default #menu .mnu .sel_yes>.lbl .item > span{
  background-color:transparent;
  color:  #0A8297;
}
