@font-face {
	font-family: 'Computer Modern Sans';
	src: url('cmunss.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Computer Modern Sans';
	src: url('cmunsx.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

html{box-sizing:border-box;}
*,*:before,*:after{box-sizing:inherit;}
/* normalize.css by Nicolas Gallagher and Jonathan Neal */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}@page{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

html,body{font-family:'Computer Modern Sans';font-size:16px;line-height:1.5;counter-reset:exo;background-color: #f5f5f5;}
.katex { font-size: 1em !important; } 
h1{font-size:2.25em}h2{font-size:1.875em}h3{font-size:1.5em}h4{font-size:1.25em}h5{font-size:1.125em}h6{font-size:1em}

h1,h2,h3,h4,h5,h6{font-weight:400;margin:0.25em 0}

p{margin:0px;}
.smallskip{margin-bottom:0.25em;}
.medskip{margin-bottom:0.5em;}
.bigskip{margin-bottom:1em;}

ul,ol {
  margin:0;
  margin-left: 1.25em;
  padding-left: 0;
}

ol ol{list-style-type: lower-alpha;}

img{vertical-align:middle;max-width:100%;border-style:none;}

.fbox{border:0.1em solid black;padding:0.15em;}
.underline{text-decoration:underline;}
.center{text-align:center;}
.right-align{text-align:right;}
.bold{font-weight:bold;}
.ulbold{text-decoration:underline;font-weight:bold;} /* gras souligné */

.hide{display:none!important;}
.offscreen{position:absolute;left:-9999px;visibility:hidden;}

.footer{background-color:#222;color:white;padding:2em 5%;margin-top:1em;}

.horizontal-list{display: flex;justify-content:space-evenly;}

/* Système de positionnement absolu */
.xy{position:absolute;display:inline-block;}
.xy.N{transform:translate(-50%,0%);}
.xy.NW{transform:translate(0%,0%);}
.xy.NE{transform:translate(-100%,0%);}
.xy.S{transform:translate(-50%,-100%)}
.xy.SW{transform:translate(0%,-100%);}
.xy.SE{transform:translate(-100%,-100%);}
.xy.W{transform:translate(0%,-50%);}
.xy.E{transform:translate(-100%,-50%);}
.xy.M{transform:translate(-50%,-50%);}

/* Attention .overlay existe dans katex */
.overlay-page{
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	background-color:#8888;
	z-index:10000;
	overflow:auto;
}

/* Page sans diaporama content-left */
.content-left{max-width:980px;padding:0 2.5%;position:relative;}


/* Style pour mise en page youtube-like */
.ytl-container {
  display: flex;
  align-items:flex-start;
  padding: 20px;
  gap:20px;
  max-width:1280px;
  margin:auto;
}

.ytl-container h1{
	font-size:1.8em;
	font-weight:700;
	line-height:2.4em;
}

.ytl-gauche {
  flex: 1;
  max-width: calc(90vh * 16 / 9);
  position: relative;
}
.ytl-droite {
  width: 380px;
  padding: 20px;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  background-color:#e5e5ff;
  border-radius:0.5em;
}
.ytl-a{
	display:inline-block;
	width:160px;
	height:90px;
	text-decoration:none;
	color:inherit;
	vertical-align:middle;
}
.ytl-a.diapo,.ytl-a.pdf{
	background-size:100% 100%;
	display:inline-flex;
	align-items:center;
	flex-direction:column;
	justify-content:center;
	align-items: center;
	font-weight:bold;
	font-size:0.75em;
	color:blue;
}

.ytl-a.diapo{background-image:url(blackboardv.svg);}
.ytl-a.diapo>span{display:inline-block;width:90%;text-align:center;}

.ytl-a.pdf{background-image:url(../css/pdf-paysage.svg);}
.ytl-a.pdf>span{display:inline-block;color:blue;font-size:1.2em;background-color:rgba(255,255,255,0.66);border-radius:2px;padding:2px;}

.ytl-diapo30{
	position:relative;
	display:inline-block;
	background-image:url(blackboardv.svg);
	background-size:100% 100%;
	width:32%;
	height:0px;
	padding-bottom:18.75%;
	margin-right:1%;
	margin-bottom:1%;
}

@media (max-width: 980px) {
  .ytl-container {
    flex-direction: column;
    height: auto;
  }
  
  .ytl-diapo30{
	width:48%;
	padding-bottom:27%;
  }
  .ytl-droite,.ytl-gauche{width: 100%;}
}

@media (max-width: 330px) {

.ytl-diapo30{
	width:100%;
	padding-bottom:56.25%;
  }
 }
/* Fin style pour youtube-like */

/* logo */
.logo{font-size:2.5em;font-weight:900;}
.logo>span{color:red;}
.logo>span+span{color:#29a723;}
/* Fin logo */

/* Boutons */
button,.button{
	text-decoration:none;
	border-style: none;
	text-align: center;
	font-weight: 700;
	padding:0.25em 0.75em;
	border-radius:0.5em;
	color:black;
	background:lightgrey;
	margin-right:0.5em;
	cursor:pointer;
}

button.white,.button.white{
	background-color:white;
	opacity:0.8;
}

button:hover,.button:hover{
	color:white;
	background:black;
}

button.blue,.button.blue{color:black;background-color:#ccf;border:0.15em blue solid;}
button.blue:hover,.button.blue:hover{background:#bbf;}

button.red,.button.red{color:black;background-color:#fcc;border:0.15em red solid;}
button.red:hover,.button.red:hover{background-color:#fbb;}

button.green,.button.green{color:black;background-color:#cfc;border:0.15em green solid;}
button.green:hover,.button.green:hover{background-color:#bfb;}
/* Fin boutons */
 
/* Boutons d'accès direct aux exercices */
[data-goto]{
	display:inline-block;
	width:2.5em;
	background-color:blue;
	text-align:center;
	padding:0.2em;
	font-weight:bold;
	color:white;
	border-radius:0.25em;
}
/* Fin boutons accès */ 
 
/* Elements visibles/invisibles */
*[data-state=off]{
	visibility:hidden;
	opacity:0;
}

/* Fin éléments visibles/invisibles */
 

/* Board - Diaporamas */
.board2{
	position:relative;
	width:100%;
	height:0px;
	padding-bottom: 56.25%;
	overflow:hidden;
	line-height:1.25em;
	background-image:url(blackboard.svg);
	background-size:100% 100%;
	outline:none;
}

.board2 .frame{
	position:absolute;
	top:1.25em;
	bottom:2.25em;
	right:2.25em;
	left:2.25em;
	visibility:hidden;
	width:auto;
	height:auto;
	padding:0.5em 0.5em;
	overflow:hidden;
}

.board2 * {user-select: none;}

.frame-on{visibility:visible!important;}

.flex-scroll{
	display:flex;
	flex-direction:column;
	max-height:100%;
	justify-content:flex-end;
}


.btn-fullscreen{
	position:absolute;
	cursor:pointer;
	z-index:1000;
	left:96%;
	width:4%;
	bottom:2.5%;
}

.btn-next{
	position:absolute;
	cursor:pointer;
	right:0.1em;
	top:50%;
	width:2.25em;
	transform:translate(0%,-50%);
}

.btn-prev{
	position:absolute;
	cursor:pointer;
	left:0.1em;
	top:50%;
	width:2.2em;
	transform:translate(0%,-50%);
}

/* Beamer like */
.block-title{
	background-color:#262686;
	color:white;
	padding:0.25em;	
}
.block{
	background-color:#eaeaf3;
	padding:0.25em;	
}

.block-color{
	padding:0.5em;
	margin:0.5em 0;
	border:0.05em solid #CCCCCC;
	border-left-width:0.25em; 
}
.block-color.green{border-color:green;background:#C9F3C9;color:black;}
.block-color.blue{border-color:#1c1cff;background-color:#DDDDFF;color:black;}
.block-color.yellow{border-color:gray;background-color:#FFFFAA;color:black;}
.block-color.red{border-color:red;background-color:#fbb;color:black;}

/* Question mark : blanc sur fond bleu */
.qmark{background-color:#1c1cff;color:white;padding:0 0.25em;}
.qmark::before{content:'?';}

/* Tableaux */
table{border-collapse:collapse;margin:0.5em auto;}

.table-simple td,.table-simple th{border:1px solid black;}
.table-simple td{padding:0.25em;}

/* Tableaux de décomposition */
.table-decompo td{padding:0 0.25em;}
.table-decompo td:first-child{border-right:0.1em solid black;text-align:right;}

/* Tableaux de propriétés */
.table-prop{margin:0}
.table-prop td:first-child{text-align:right;font-weight:bold;}

/* Tableaux de signes et de variations */
.table-tsv tr{border:0.1em solid black;}
.table-tsv td{padding:0.25em;text-align:center;}
.table-tsv td:first-child{border-right:0.1em solid black;}
.table-tsv .signe,.table-tsv .vari{display:inline-block;width:4em;text-align:center;}

.vari>img{
	width:4em;
}

.table-tr-vari{
	border-top:0px!important;
	border-bottom:0px!important;
}

.table-tr-vari td{
	padding:0em!important;
}

.table-tr-top-vari{
	border-bottom:0px!important;
}

.table-tr-top-vari td{
	padding-bottom:0px!important;
}

.table-tr-bottom-vari{
	border-top:0px!important;
}

.table-tr-bottom-vari td{
	padding-top:0px!important;
}

/* flashcards */
	.card-verso{visibility:hidden;}

/* Timer : gauge barre horizontale */
.timer{
	position:relative;
	width: 100%;
	height: 1em;
	border:0.1em solid black;
	border-radius:0.2em;
	padding:0.1em;
	background-color: #ddd;
}

.timer-bar {
	position: absolute;
	right:0.1em; /*aligné à droite */
	height:calc(100% - 0.2em);
	width:calc(100% - 0.2em);
	background-color: #4caf50;
	/* transition: width 0.1s linear;*/
}