/* Font style */
/* @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400&display=swap");
	@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");
 */@font-face {
    font-family: MyriadProRegular;
    src: url('{{assets('fonts/MyriadPro-Regular.otf')}}');
}


/* Color style */
:root {
	--var-bgcolor: #e1dcc6;
	--var-action: #e2680f;
	--var-racine: #744528;
	--var-method: #7abd5b;
	--var-ressource: #5571a8;
	--var-text: #915721;
}
/* Theme color by theme */
#fiche-action{--var-fichecolor: var(--var-action);}
#fiche-racine{--var-fichecolor: var(--var-racine);}
#fiche-method{--var-fichecolor: var(--var-method);}
#fiche-ressource{--var-fichecolor: var(--var-ressource);}
.fiche-color {
	color: var(--var-fichecolor);
}
.bg-fiche, .bg-fiche h5 {
	background: var(--var-fichecolor);
}
.border-fiche {
	border-color: var(--var-fichecolor);
} 
/* base style */
html,
body,
.font-sans {
	font-family: "MyriadProRegular", sans-serif !important;
}
body{
}
.text-iteraction {
	--tw-text-opacity: 1;
	color: var(--var-fichecolor);
	opacity:var(--tw-text-opacity));
}
/* Font */
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 {
	font-family: "MyriadProRegular", sans-serif !important;
	line-height: 115%;
}
.container h1 p,
.container h2 p,
.container h3 p,
.container h4 p,
.container h5 p,
.container h6 p {
	font-family: "MyriadProRegular", sans-serif !important;
}
.conclu-block h1,
.conclu-block h2,
.conclu-block h3,
.conclu-block h4,
.conclu-block h5,
.conclu-block h6,
.exemple-block h1,
.exemple-block h2,
.exemple-block h3,
.exemple-block h4,
.exemple-block h5,
.exemple-block h6,
.undertitle-block h1,
.undertitle-block h2,
.undertitle-block h3,
.undertitle-block h4,
.undertitle-block h5,
.undertitle-block h6{font-family: "MyriadProRegular", sans-serif !important;}
.container h1 {
	font-size: 3.5rem;
}
.container h2 {
	font-size: 3rem;
}
.container h3 {
	font-size: 2.5rem;
}
.container h4 {
	font-size: 1.6rem;
}
.container h5 {
	font-size: 1.5rem;
}
.container h6 {
	font-size: 1rem;
}
.container h1 p{
	font-size: 3.5rem;
}
.container h2 p{
	font-size: 3rem;
}
.container h3 p{
	font-size: 2.5rem;
}
.container h4 p{
	font-size: 1.6rem;
}
.container h5 p{
	font-size: 1.5rem;
}
.container h6 p{
	font-size: 1rem;
}
/* logo */
img.logo {
	transition: all 0.5s ease-out;
}
.dark img.logo {
	filter: brightness(8);
}
/* Logo animation */
.scrolled img.logo {
	width: 5rem;
	transition: all 0.5s ease-in;
}
#header {
	overflow:hidden;
}
/* ajustement anim scroll menu */
#menu{
	transition: all 0.5s ease-out;
}
.scrolled #menu{
	margin-right:96px;
	transition: all 0.5s ease-in;
}
@media (max-width: 1536px){
#menu li.-mt-6 {
    margin-top: -1.5rem;
	transition: all 0.5s ease-out;
}
.scrolled #menu li.-mt-6 {
    margin-top: -2.5rem;
	transition: all 0.5s ease-in;
}
}

@media (min-width: 1536px){
#header:not(.scrolled) #menu li.lg\:mt-2 {
    margin-top: 1.5rem;
	transition: all 0.5s ease-out;
}
#nav-toggle2 {
	display:none;
}
#header.scrolled #menu li.lg\:mt-2 {
	transition: all 0.5s ease-in;
}
body{
	padding-top: 50px;
}
}
/* burger menu style */
button#nav-toggle {
	transition: all 0.5s ease-out;
}
.scrolled button#nav-toggle {
	padding: 0.5rem 1rem;
	transition: all 0.5s ease-in;
}
.hover\:border-iteraction:hover {
	--tw-border-opacity: 1;
	border-color: var(--var-fichecolor);
	opacity:var(--tw-border-opacity));
}
border-iteraction {
	--tw-border-opacity: 1;
	border-color: var(--var-fichecolor);
	opacity:var(--tw-border-opacity));
}
/* Presentation fiche style */
.card-block {
	border-top: 0.3rem solid var(--var-fichecolor);
}
/* footer fiche style */
footer {
	border-bottom: 0.5rem solid var(--var-fichecolor);
}
.card-block,
.blockquote-block blockquote {
	background: var(--var-bgcolor);
	color: var(--var-text);
}
footer{
	color: var(--var-text);
}
/* blockquote style */
.blockquote-block blockquote {
	position: relative;
	margin-left: 0rem;
}
.blockquote-block blockquote:before {
	font-family: "MyriadProRegular", sans-serif !important;
	font-style: normal;
	content: " ❝ ";
	position: absolute;
	transform: rotate(180deg) scalex(-1);
	left: 0rem;
	top: -5rem;
	font-size: 4rem;
	display: block;
	width: 4rem;
	height: 4rem;
	color: var(--var-bgcolor);
}
.dark .blockquote-block blockquote:before {
	color: var(--var-text);
}
.dark .card-block,
.dark footer,
.dark .blockquote-block blockquote {
	background: var(--var-text);
	color: var(--var-bgcolor);
}

/* Mise en form du block exemple */
.exemple-block p {
	position: relative;
	margin-left: 0.5rem;
	padding: 0.5rem 0;
}
.exemple-block>div>p:before {
	content: "●";
	position: absolute;
	font-size: 2.5rem;
	left: -1.8rem;
	top: -0.5rem;
	color: var(--var-fichecolor);
}

/* block Liste  style */
.list-block {
	margin-left: 1rem;
}
.list-block p {
	font-size: 1.250rem;
	line-height: 2rem;
}
/*
.list-block ul li::before,
.list-block ol li::before {
	color: var(--var-fichecolor);
	font-weight: bold;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	font-size: 2rem;
	margin-left: 0.5rem;
	vertical-align: text-top;
} */
/* .list-block ol {
	list-style: none;
	counter-reset: li;
}
.list-block ol li::before {
	content: counter(li);
	counter-increment: li;
	font-weight: normal;
	font-size: 1.4rem;
}
.list-block ul li,
.list-block ol li {
	display: block;
	line-height: 1.5rem;
	padding-bottom: 1rem;
}

/* element visible en help mode */
.help section {
	outline: 1px solid silver;
	position: relative;
}
.help section:before {
	content: attr(id);
	color: black;
	position: absolute;
	font-size: 0.75rem;
	bottom: 0;
	left: 0;
	transform: rotate(-90deg);
	transform-origin: bottom left;
	background: silver;
	padding: 1px 4px;
	z-index:-1;
}
.dark.help section:before{background: gray;}
.dark.help section {outline: 1px solid gray;}
.help section:hover:before {
	background: tomato;
	color: white;
	z-index:1;
}
.help section:hover {
	outline: 1px dashed tomato;
}
.help .help\:block {
    display: inline-block;
		height: 16px;
    line-height: 1;
    position: relative;
    width: 32px;
    vertical-align: baseline;
}
.help .help\:hidden {
    display: none;
}
/*Modal tweek */
.overlay{display:none}
.modal-open .overlay{display:flex;}

.LockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color:rgba(243, 244, 246);
    vertical-align:bottom;
    padding-top: 65%; 
    opacity: 1; 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    transition:0.5s;
    pointer-events: none;
}
.CardLockOn {
    display: block;
    visibility: visible;
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color:rgba(243, 244, 246);
    vertical-align:bottom;
    opacity: 1; 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    transition:0.5s;
    pointer-events: none;
    text-align: center;
}

.my-loader{
	margin:auto;
  	animation: spin 2s linear infinite;
	}
	@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.container a {
	color:dodgerblue;
	text-decoration:underline;
}



.ck.ck-balloon-panel{
	z-index:50;
}

.demi-para-block p, .exemple-block p {
    font-size: 1.125rem;
}

.lettrine-container {
  display:inline;
}
.lettrine-letter, .lettrine-letter p {
  float:left;
  margin-right:0.1em;
  color:var(--var-fichecolor);
}
.lettrine-size, .lettrine-size p {
  font-size:300%!important;
}
.lettrine-size.ressource, .lettrine-size.ressource p {
  font-size:200%!important;
}
.lettrine-size.racine, .lettrine-size.racine p {
  font-size:200%!important;
}
.lettrine-text, .lettrine-text p {
text-align:justify;
 font-size: 1.125rem;
}
#img-block img {
	margin:auto!important;
}
.buttons-block{
	margin-top:12px;
	margin-bottom:4px;
}

#buttons-bar a {
	text-decoration:none;
	color:black;
	
}