@charset "utf-8";
.controls button.active {
    background-color: #28a745; 
    color: white;
    font-weight: bold;
}
.formule .mjx-math {
    font-family: "Fira Sans", "Helvetica", sans-serif !important;
}
.dialogue {
  text-indent: -1.2em;     
  padding-left: 1.2em;     
}

#bobouton {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gabouton  {
float:left;
width: 85%;
margin-right:auto;
text-align: left;
}
#drbouton {
width: 15%;
float:right;
text-align: right;
margin-left:auto;
background-color: #ffffff;
}
#bobouton2 {
display: flex;
with: 100%;
margin:auto;
}
#gabouton2  {
float:left;
width: 80%;
margin-right:auto;
text-align: left;
}
#drbouton2 {
width: 20%;
float:right;
text-align: right;
margin-left:auto;
}
#bo22 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga22  {
float:left;
width: 65%;
margin:auto;
text-align: left;
padding-right: 10px;
}
#dr22 {
vertical-align:middle;
width: 35%;
float:right;
text-align: center;
margin:auto;
background-color: #ffffff;
}
#bo2 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga2  {
float:left;
width: 71%;
margin-right:auto;
text-align: left;
padding-right: 10px;
}
#dr2 {
vertical-align:middle;
width: 29%;
float:right;
text-align: center;
margin:auto;
}
#bo7 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga7  {
float:left;
width: 65%;
margin-right:auto;
text-align: left;
padding-right: 10px;
}
#dr7 {
vertical-align:top;
width: 35%;
float:right;
text-align: center;
margin-top:10px;
background-color: #ffffff;
}
#bo3 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga3  {
float:left;
width: 55%;
margin-right:auto;
text-align: left;
padding-right: 10px;
}
#dr3 {
vertical-align:middle;
width: 45%;
float:right;
text-align: center;
margin:auto;
background-color: #ffffff;
}
#bo4 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga4  {
float:left;
width: 80%;
margin-right:auto;
text-align: left;
padding-right: 10px;
}
#dr4 {
vertical-align:middle;
width: 20%;
float:right;
text-align: center;
margin:auto;
background-color: #ffffff;
}
#bo5 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga5  {
float:left;
width: 33%;
margin-right:auto;
text-align: left;
padding-right: 10px;
}
#dr5 {
vertical-align:middle;
width: 67%;
float:right;
text-align: center;
margin:auto;
background-color: #ffffff;
}
#bo6 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga6  {
float:left;
width: 40%;
margin-right:auto;
text-align: left;
padding-right: 10px;
}
#dr6 {
vertical-align:middle;
width: 60%;
float:right;
text-align: right;
margin:auto;
background-color: #ffffff;
}
#bo12 {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga12  {
float:left;
width: 65%;
text-align: center;
padding-right: 10px;
}
#dr12 {
vertical-align:middle;
width: 35%;
float:right;
text-align: left;
background-color: #ffffff;
}
#bodemi {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gademi  {
float:left;
width: 50%;
margin-right:auto;
text-align: left;
padding-right: 10px;
}
#drdemi {
vertical-align:middle;
width: 50%;
float:right;
text-align: center;
margin:auto;
background-color: #ffffff;
}
#bocinquante {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gacinquante {
float:left;
width: 50%;
margin-right:auto;
text-align: left;
padding-right: 5px;
}
#drcinquante {
float:right;
width: 50%;
margin-right:auto;
text-align: left;
padding-right: 5px;
}
.vecteur0
{
  position: relative;
  display:inline-block;
}
.vecteur0:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size: 1.2em;
  top:-0.8em;
  left:-0.0em;
}
.vecteur
{
  position: relative;
  display:inline-block;
}
.vecteur:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size: 1.2em;
  top:-0.8em;
  left:-0.2em;
}
.vecteurdeux
{
  position: relative;
  display:inline-block;
}
.vecteurdeux:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size: 1.2em;
  top:-0.8em;
  left:+0.2em;
}
.vecteur1
{
  position: relative;
  display:inline-block;
}
.vecteur1:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size: 1.2em;
  top:-0.8em;
  left:+0.1em;
}
.vecteur3
{
  position: relative;
  display:inline-block;
}
.vecteur3:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size: 1.5em;
  top:-0.7em;
  left:+0.6em;
}
.vecteurone
{
  position: relative;
  display:inline-block;
}
.vecteurone:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size: 1.2em;
  top:-0.8em;
  left:-0.3em;
}
.vecteurminus
{
  position: relative;
  display:inline-block;
}
.vecteurminus:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size: 0.6em;
  top:-0.5em;
  left:-0.2em;
}

.video-responsive { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}
.video-responsive iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}
.button{
border:1px solid #466D7D;
border-radius: 5px;
  color: #466D7D;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-family:Verdana, Geneva, sans-serif;
  font-size:0.6em;
  text-decoration:none;
}
.button:hover{
  border:2px solid #e60;
  color: #466D7D;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-family:Verdana, Geneva, sans-serif;
  font-size:0.6em;
  text-decoration:none;
}
.button:focus{
  outline: 0;
}
.buttonb {
  border-radius: 10px;
  background-color: #52A3D8;
  border: none;
  color: #fff;
  text-align: center;
  font-size: 0.6em;
  font-weight: bold;
  padding: 8px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
}

.buttonb{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.buttonb:after {
  content: '↓';
  position: absolute;
  opacity: 0;  
  top: 7px;
  right: -15px;
  transition: 0.5s;
}
.buttonb:hover{
  padding-right: 24px;
  padding-left:8px;
}
.buttonb:hover:after {
  opacity: 1;
  right: 10px;
}
.buttonc {
  background-color: white;
  border-radius: 10px;
  border:1px solid #466D7D;
  color: #466D7D;
  text-align: center;
  font-size: 0.6em;
  font-weight: bold;
  padding: 8px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
}
.buttonc{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonc:after {
  content: '↓';
  font-weight: bold;
  position: absolute;
  opacity: 0;  
  top: 7px;
  right: -15px;
  transition: 0.5s;
}
.buttonc:hover{
border:1px solid #466D7D;
  padding-right: 24px;
  padding-left:8px;
}
.buttonc:hover:after {
  opacity: 1;
  right: 10px;
}

.btn {
  background-color: white;
  border-radius: 10px;
  border:1px solid #466D7D;
  color: #466D7D;
  text-align: center;
  font-size: 0.6em;
  font-weight: bold;
  padding: 8px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
}
.btn{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.btn:after {
  content: '↓';
  font-weight: bold;
  position: absolute;
  opacity: 0;  
  top: 7px;
  right: -15px;
  transition: 0.5s;
}
.btn:hover{
border:1px solid #466D7D;
  padding-right: 24px;
  padding-left:8px;
}
.btn:hover:after {
  opacity: 1;
  right: 10px;
}
.btn.active {
	background-color: #ff7 !important;
}

.buttond {
  border-radius: 10px;
  background-color: #9BA8DB;
  border: none;
  color: #fff;
  text-align: center;
  font-size: 0.6em;
  font-weight: bold;
  padding: 8px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
}
.buttond{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.buttond:after {
  content: '↓';
  position: absolute;
  opacity: 0;  
  top: 7px;
  right: -15px;
  transition: 0.5s;
}
.buttond:hover{
  padding-right: 24px;
  padding-left:8px;
}
.buttond:hover:after {
  opacity: 1;
  right: 10px;
}
.buttone {
  background-color: white;
  border-radius: 8px;
  border:1px solid #2DAAFD;
  color: #2DAAFD;
  text-align: center;
  font-size: 0.5em;
  font-weight: bold;
  padding: 6px;
  transition: all 0.5s;
  cursor: pointer;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
}
.buttone{
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttone:after {
  content: '↓';
  font-weight: bold;
  position: absolute;
  opacity: 0;  
  top: 5px;
  right: -15px;
  transition: 0.5s;
}
.buttone:hover{
border:1px solid #2DAAFD;
  padding-right: 23px;
  padding-left:6px;
}
.buttone:hover:after {
  opacity: 1;
  right: 10px;
}
button{
  border:none;
  background-color: #9BA8DB;
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}
button:focus{
  outline: 0;
}
#bovideo {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gavideo  {
float:left;
width: 57%;
margin:auto;
}
#drvideo {
width: 43%;
float:right;
text-align: right;
background-color: #ffffff;
}
#bobouton {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gabouton  {
float:left;
width: 57%;
margin-right:auto;
text-align: left;
}
#drbouton {
width: 43%;
float:right;
text-align: right;
margin-left:auto;
background-color: #ffffff;
}
#boite {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gauche  {
float:left;
width: 40%;
margin:auto;
}
#droite {
width: 60%;
float:right;
text-align: right;
background-color: #ffffff;
margin:auto;
}
#boiteinv {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gaucheinv  {
float:left;
width: 30%;
margin:auto;
}
#droiteinv {
width: 70%;
float:right;
text-align: left;
background-color: #ffffff;
margin:auto;
}
.encadrerrougedoux{ 
color:#f44c31;
border: 1px solid #f44c31; 
border-radius:10px;
padding: 8px;
background: #FDE1DF;
}
.encadrervertdoux{ 
color:#6eb3ae;
border: 1px solid #6eb3ae; 
border-radius:10px;
padding: 8px;
background: #E3F0EF;
}
#centrer {
text-align: center;
margin: auto;
}
.parent {
  display: flex; /* contexte sur le parent */
  float: left;
}
.enfant {
  margin: auto;
}
.cerclebleu{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#ffffff;
	border:3px solid #016087;
    height:25px;
    text-align:center;
    border-radius:25px;
    line-height: 25px;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #016087;
    font-weight: bold;
}
.annonce {
	width: 1250px;
	margin: auto;
	text-align: center;
	height: auto;
	}
.exemple { 
width: 100%;
margin:auto;
background-color: #eee;
border: 1px solid #000; 
border-radius:18px;
padding: 8px;
}
@media screen and (max-width : 1300px){
.annonce {
	width: 100%;
	text-align: center;
	height: auto;
	}
}
.cercleorange{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#ffffff;
	border:3px solid #CF5003;
    height:25px;
    text-align:center;
    border-radius:25px;
    line-height: 25px;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #CF5003;
    font-weight: bold;
}
.cerclevert{
	margin: auto;
	margin-right: 10px;
    width:25px;
    background:#ffffff;
	border:3px solid #008000;
    height:25px;
    text-align:center;
    border-radius:25px;
    line-height: 25px;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #008000;
    font-weight: bold;
}
.titre {
	width: 100%;
	text-align: center;
	background-color:#030;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.8em;
    color: #FFF;
    font-weight: bold;
	padding: 50px;
	margin-bottom: 40px;
}
.chapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.6em;
    color: #030;
    font-weight: bold;
	margin-top: 15px;
	margin-bottom: 0px;
}
.schapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.4em;
    color: #040;
    font-weight: bold;
	margin-top: 15px;
	margin-bottom: 0px;
}
.sschapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 0.9em;
    color: #050;
    margin-top: 15px;
	margin-bottom: 0px;
}
.conclusionc {
	width: 900px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.2em;
    color: #152988;
	background: #EDF1F8;
    font-weight: bold;
	border: 3px solid #FF3300;
	border-radius:18px;
	padding: 40px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.conclusionl {
	width: 900px;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.2em;
    color: #152988;
	background: #EDF1F8;
    font-weight: bold;
	border: 3px solid #FF3300;
	border-radius:18px;
	padding: 40px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.conclusionla {
	width: 1000px;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.2em;
    color: #152988;
	background: #EDF1F8;
    font-weight: bold;
	border: 3px solid #FF3300;
	border-radius:18px;
	padding: 40px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.definition {
	box-sizing: border-box;
	width: 98%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.2em;
    color: #2f4956;
	background: #faf8f2;
    font-weight: bold;
	border: 1px solid #2f4956;
	border-radius:18px;
	padding: 40px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.definitionp {
	box-sizing: border-box;
	width: 98%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.1em;
    color: #2f4956;
	background: #faf8f2;
    font-weight: bold;
	border: 1px solid #2f4956;
	border-radius:18px;
	padding: 30px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.concmoitie {
	box-sizing: border-box;
	width: 98%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.1em;
    color: #152988;
	background: #E1E6F2;
    font-weight: bold;
	border: 2px solid #FF3300;
	border-radius:18px;
	padding: 20px;
	margin-top: 10px;
	margin-bottom: 15px;
}
#i{
  font-style: italic; 
}
#b{
font-weight: bold; 
}
#s{
text-decoration: underline;
}
#red {
color: #FF3300;
}
#base {
color: #009;
}
#vert {
color: #080;
}
#or {
color: #FF6600;
}
#rs{
color: #FF3300;
text-decoration: underline #FF3300;
}
#sortir {
clear:both;
}
.sortir {
clear:both;
}
#rfs{
color: #FF3300;
font-weight: bold;
text-decoration: underline #FF3300;
}
#blue {
color: #152988;
}
#bf {
color: #152988;
font-weight: bold;
}
#rf2 {
color: #6f0000;
font-weight: bold;
}
#bclairf {
color: #0066ff;
font-weight: bold;
}
#bs{
color: #152988;
text-decoration: underline #152988;
}
#bfs{
color: #2f4956;
font-weight: bold;
text-decoration: underline #2f4956;
}
#bfsclair{
color: #558599;
font-weight: bold;
text-decoration: underline #558599;
}
#rfs2{
color: #6F0000;
font-weight: bold;
text-decoration: underline #6F0000;
}
#rfsclair{
color: #EC0202;
font-weight: bold;
text-decoration: underline #EC0202;
}
#sr{
text-decoration: underline #fab70e;
}
#sv{
text-decoration: underline #009900;
}
#sb{
text-decoration: underline #152988;
}
#bleu {
color: #0099ff;
font-weight: bold;
}
/*sections*/
.container {
color:#666;
width: 1350px;
margin: auto;
font-size: 1.5em;
text-align: left;
}
.texte{
padding-left: 30px;
}
#chimie {
margin: auto;
padding: 10px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
width: 200px;
background: #F39D1D;
border-radius: 10px;
color: FFF;
font-weight:bold;
font-size: 1.2em;
text-align:center;
}
h0 {
padding:0px;
color: #fff;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.1em;
}
h1 {
padding-bottom:0px;
color: #E00;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 1em;
}
h2 {
padding-bottom:1px;
color: #F46200;
text-align: left;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.9em;
}
h21 {
padding-bottom:1px;
color: #F46200;
text-align: left;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.7em;
}
h3 {
padding: 0px;
margin: 0px;
color: #F46200;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.01em;
}
h4 {
color: #008800;
font-weight: normal;
text-align: left;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: 0.9em;
}
h5 {
padding-bottom:0px;
color: #E00;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
font-size: .2em;
}
@media screen and (max-width : 1280px){
#droite {
text-align: center;
}
.container {
width: 99%;
padding-left: 5px;
margin: auto;
font-size: 1.3em;
margin-top: 0px;
}
}
@media screen and (max-width : 1110px){
.container {
width: 99%;
padding-left: 5px;
margin: auto;
font-size: 1.2em;
margin-top: 0px;
}
#boiteinv {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gaucheinv  {
float:left;
width: 50%;
margin:auto;
}
#droiteinv {
width: 50%;
float:right;
text-align: left;
background-color: #ffffff;
margin:auto;
}
#droite {
text-align: center;
}
.titre {
	width: 100%;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.1em;
    color: #FFF;
    font-weight: bold;
	padding: 30px;
	margin-top: 25px;
	margin-bottom: 25px;
}
.chapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.1em;
    color: #030;
    font-weight: bold;
	margin-top: 20px;
	margin-bottom: 15px;
}
.schapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.0em;
    color: #040;
    font-weight: bold;
	margin-top: 15px;
	margin-bottom: 0px;
}
.sschapitre{
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 0.9em;
    color: #050;
	margin-top: 15px;
	margin-bottom: 0px;
}
.conclusionc {
	width: 650px;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #152988;
	background: #E1E6F2;
    font-weight: bold;
	border: 2px solid #FF3300;
	border-radius:18px;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.conclusionl {
	width: 650px;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #152988;
	background: #E1E6F2;
    font-weight: bold;
	border: 2px solid #FF3300;
	border-radius:18px;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.conclusionla {
	width: 650px;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #152988;
	background: #E1E6F2;
    font-weight: bold;
	border: 2px solid #FF3300;
	border-radius:18px;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.definition{
	width: 98%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #2f4956;;
	background: #faf8f2;
    font-weight: bold;
	border: 1px solid #2f4956;;
	border-radius:18px;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
#chimie {
margin: auto;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px
position: relative;
width: 180px;
background: #F39D1D;
border-radius: 10px;
color: FFF;
font-weight:bold;
font-size: 1em;
text-align:center;
}
h1{
margin: auto;
font-size: 0.9em;
width: 100%;
}
}
@media screen and (max-width : 800px){
#bodemi{
flex-direction: column;
}
#bovideo {
flex-direction: column;
}
#gavideo {
margin: auto;
}
#drvideo {
margin: auto;
}
#bo2 {
flex-direction: column;
}
#ga2 {
width: 100%;
margin: auto;
}
#dr2 {
width: 100%;
margin: auto;
}
#bo7 {
flex-direction: column;
}
#ga7 {
width: 100%;
margin: auto;
}
#dr7 {
width: 100%;
margin: auto;
}
#bo3 {
flex-direction: column;
}
#ga3 {
width: 100%;
margin: auto;
}
#dr3 {
width: 100%;
margin: auto;
}
#bo5 {
flex-direction: column;
}
#ga5 {
width: 100%;
margin: auto;
}
#dr5 {
width: 100%;
margin: auto;
}
#bo6 {
flex-direction: column;
}
#ga6 {
width: 100%;
margin: auto;
}
#dr6 {
width: 100%;
margin: auto;
}
.container {
width: 99%;
padding-left: 5px;
margin: auto;
font-size: 1em;
margin-top: 0px;
}
}
/*********************************/
/* Menu vertical (items flottants) */
/*********************************/
#cinq {
width: 650px;
list-style: none ;
margin: 0 ;
padding: 0 ;
}
#cinq li {
width: 650px;
border: 2px solid #E3D6BE;
border-radius: 20px;
margin-bottom: 5px;
}
#cinq li a {
display: block ;
background-color: #FCF9E0;
background-image: url(images/trait_rose.png);
background-repeat: no-repeat; 
background-origin: border-box;
background-position-x: 40px;
border-radius: 20px;
color: #000 ;
font: 1em 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
line-height: 1em ;
padding: 5px;
padding-left: 10px;
text-align: left;
text-decoration: none ;
}
#cinq li a.bilan {
color: #E00 ;
font-weight:bold;
text-transform: uppercase;
}
#cinq li a:hover, #cinq li a:focus, #cinq li a:active, #cinq li a.bilan:hover{
background-color: #DE1818;
color: #fff ;
}
@media screen and (max-width : 1250px){
#cinq {
width: 505px;
}
#cinq li {
width: 505px;
}
#cinq li a {
background-position-x: 31px;
}
}
@media screen and (max-width : 1000px){
#bo4 {
flex-direction: column;
}
#bovideo {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gavideo  {
float:left;
width: 41%;
margin:auto;
}
#drvideo {
width: 59%;
float:right;
text-align: right;
background-color: #ffffff;
}
#cinq {
width: 316px;
}
#cinq li {
width: 316px;
}
#cinq li a {
background-position-x: 23px;
font-size: 0.8em;
padding-left: 5px;
}
}
@media screen and (max-width : 768px){
.conclusionc {
	width: 85%;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
	font-size: 1em;
    color: #152988;
	background: #E1E6F2;
    font-weight: normal;
	border: 1px solid #FF3300;
	border-radius:18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.conclusionl {
	width: 85%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #152988;
	background: #E1E6F2;
    font-weight: normal;
	border: 1px solid #FF3300;
	border-radius:18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.conclusionla {
	width: 85%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #152988;
	background: #E1E6F2;
    font-weight: normal;
	border: 1px solid #FF3300;
	border-radius:18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.definition {
	width: 94%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1em;
    color: #2f4956;
	background: #faf8f2;
    font-weight: bold;
	border: 1px solid #2f4956;
	border-radius:18px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 8px;
	margin-bottom: 10px;
}
.titre {
	width: 100%;
	margin: auto;
	text-align: center;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.1em;
    color: #FFF;
    font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 25px;
	padding-bottom: 25px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#boite {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#gauche  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#droite {
width:99%;
text-align: center;
}
#boiteinv {
display: flex;
with: 99%;
margin:auto;
flex-direction: column;;
align-items: center;
}
#gaucheinv  {
width:99%;
text-align: center;
}
#droiteinv {
width: 99%;
padding-left: 0px;
padding-top: 0px;
}
}
/* fin du mpedia */
#reci {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 0px;
margin-top: 0px;
}
#bat  {
float:left;
width: 50%;
margin:auto;
}
#rie {
width: 50%;
float:right;
text-align: left;
margin:auto;
}
#bo {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#ga  {
float:left;
width: 50%;
margin:auto;
}
#dr {
width: 50%;
float:right;
text-align: right;
margin:auto;
}
#boi {
display: flex;
with: 100%;
margin:auto;
margin-bottom: 5px;
margin-top: 0px;
}
#gau  {
float:left;
width: 50%;
margin:auto;
}
#dro {
width: 50%;
float:right;
text-align: left;
margin:auto;
}
#gautext {
width: 50%;
float:left;
text-align: left;
background-color: #ffffff;
margin-bottom: 0;
padding-bottom: 0;
}
#drotext {
width: 50%;
float:right;
text-align: left;
background-color: #ffffff;
margin-bottom: 0;
padding-bottom: 0;
}
@media screen and (max-width : 1250px){
#dr {
text-align: center;
}
}
@media screen and (max-width : 768px){
#bovideo {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#gavideo  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#drvideo {
width:99%;
text-align: center;
}
#bo {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#ga  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#dr {
width:99%;
text-align: center;
}
#boi {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#gau  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#dro {
width:99%;
text-align: left;
}
#gautext {
width: 95%;
float:column;
text-align: left;
}
#drotext {
width: 95%;
float:column;
text-align: left;
}
#reci {
width: 99%;
display: flex;
margin: auto;
flex-direction: column;
align-items: center;
}
#bat  {
width:99%;
padding-left: 0px;
padding-top: 0px;
}
#rie {
width:99%;
text-align: left;
}
}
a.viewpicgr {
  color:#C54343; 
  font-weight: bold;
  position:relative;
  border-bottom:1px dashed #444;
  text-decoration: none;
}
a:hover.viewpicgr {
  text-decoration: none;
  background: none;
}
a.viewpicgr span {display: none;}

a:hover.viewpicgr span {
	color:#0055ff;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline;
  position: absolute;
  top: -90px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}
a.viewpic {
color:#666;
  position:relative;
  border-bottom:1px dashed #666;
  text-decoration: none;
}
a:hover.viewpic {
	text-decoration: none;
  background: none;
  
}
a.viewpic > span {
  display: none;
}

a:hover.viewpic > span {
	color:#0055ff;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline-block;
  position: absolute;
  top: -100px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}
a.viewpicgris {
color:#888;
  position:relative;
  border-bottom:1px dashed #888;
  text-decoration: none;
}
a:hover.viewpicgris {
  text-decoration: none;
  background: none;
}
a.viewpicgris span {display: none;}

a:hover.viewpicgris span {
	color:#0055ff;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline;
  position: absolute;
  top: -90px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}
a.viewpicor {
color:#e35700;
  position:relative;
  border-bottom:1px dashed #f60;
  text-decoration: none;
}
a:hover.viewpicor {
  text-decoration: none;
  background: none;
}
a.viewpicor span {display: none;}

a:hover.viewpicor span {
	color:#0055ff;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline-block;
  position: absolute;
  top: -100px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}
a.viewpicorb {
color:#f60;
font-weight:bold;
  position:relative;
  border-bottom:1px dashed #f60;
  text-decoration: none;
}
a:hover.viewpicorb {
  text-decoration: none;
  background: none;
}
a.viewpicorb span {display: none;}

a:hover.viewpicorb span {
	color:#0055ff;
	font-weight:normal;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline;
  position: absolute;
  top: -100px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}
a.viewpicrougedoux {
color: #f44c31;
  position:relative;
  border-bottom:1px dashed #f44c31;
  text-decoration: none;
}
a:hover.viewpicrougedoux {
  text-decoration: none;
  background: none;
}
a.viewpicrougedoux span {display: none;}

a:hover.viewpicrougedoux span {
	color:#0055ff;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline;
  position: absolute;
  top: -100px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}

a.viewpicvertdoux {
color: #6eb3ae;
  position:relative;
  border-bottom:1px dashed #6eb3ae;
  text-decoration: none;
}
a:hover.viewpicvertdoux {
  text-decoration: none;
  background: none;
}
a.viewpicvertdoux span {display: none;}

a:hover.viewpicvertdoux span {
	color:#0055ff;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline;
  position: absolute;
  top: -100px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}

a.viewpicdef {
color: #2f4956;
  position:relative;
  border-bottom:1px dashed #2f4956;
  text-decoration: none;
}
a:hover.viewpicdef {
  text-decoration: none;
  background: none;
}
a.viewpicdef span {display: none;}

a:hover.viewpicdef span {
	color:#0055ff;
	border: 2px solid #0055ff; 
	border-radius:10px;
	background: #efe;
  display: inline;
  position: absolute;
  top: -100px;
  left: -30px;
  line-height: 1.2em;
  z-index: 20;
  padding:8px;
}
#co {
display: flex;
justify-content: space-between;
}
#co2 {
display: flex;
justify-content: space-around;
}
.co3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  grid-auto-rows: minmax(300px, auto);
  gap: 10px;
}
table {
margin: auto;
}
td {
padding-left: 6px;
}
#bomi {
display: flex;
with: 100%;
margin:auto;
}
#gami  {
float:left;
width: 50%;
margin:auto;
vertical-align: middle; 
}
#drmi {
width: 50%;
float:right;
margin:auto;
}
#bomiPresque {
display: flex;
with: 100%;
margin:auto;
}
#gamiPresque  {
float:left;
width: 61%;
margin:auto;
vertical-align: middle; 
}
#drmiPresque {
width: 39%;
float:right;
margin:auto;
}

#bomiPresque2 {
display: flex;
with: 100%;
margin:auto;
}
#gamiPresque2  {
float:left;
width: 50%;
margin:auto;
vertical-align: middle; 
}
#drmiPresque2 {
width: 50%;
float:right;
margin:auto;
}


#bomid {
display: flex;
with: 100%;
margin:auto;
}
#gamid  {
float:left;
width: 50%;
margin-top: 0px;
}
#drmid {
width: 50%;
float:right;
margin-top: 0px;
}
.ecran{
padding: 4px;
background: #BFD5BF;
display: inline-block;
}
.encadrer{ 
color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 8px;
background: #faf8f2;
display: inline-block;
}
.cadre-centre {
  text-align: center; /* centre le bloc .encadrer */
}
.encadrerFormule{ 
color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 16px;
padding-top: 24px;
padding-bottom: 24px;
background: #faf8f2;
}
.encadrerSansFond{ 
color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 8px;
}
.exo{
	border-radius: 10px;
	border:none;
	font-size:0.9em;
	margin: auto;
	margin-top: 10px;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
	background-color:#E7FAFA;
	padding: 10px;
}
.anim {
    border: 1px solid #97E8E8;
    border-radius: 10px;
    background: transparent;
}
.fond{ 
	margin: auto;
	margin-top: 0px;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    color: #2f4956;
	background: #faf8f2;
	padding: 10px;
}
.encadrerpeu{ 
color:#222;
border: 1px solid #222; 
border-radius:10px;
padding: 10px;
}
.encadrer-jaune{ 
color:#F60;
border: 2px solid #f60; 
border-radius:10px;
background-color: #FFE7C4;
padding: 6px;
}
.encadrer-bleu{ 
color:#09F;
border: 2px solid #09F; 
border-radius:10px;
background-color:#DFF3FF;
padding: 6px;
font-weight: normal;
display: inline-block;
}
.encadrer-vert{ 
color:#090;
border: 2px solid #090; 
border-radius:10px;
background-color:#cfc;
padding: 6px;
}
.encadrer-fin{ 
color:#2f49561;
border: 1px solid #2f4956; 
border-radius:18px;
background-color:#faf8f2;
padding: 35px;
padding-top: 42px;
font-weight: bold;
}
.encadrer-fin2{ 
color:#2f49561;
border: 2px solid #666; 
border-radius:18px;
background-color:#faf8f2;
padding: 35px;
padding-top: 39px;
font-weight: bold;
}
.definitionvecteur {
	box-sizing: border-box;
	width: 98%;
	margin: auto;
	text-align: left;
	font-family: 'Century Gothic', CenturyGothic, AppleGothic, Verdana, Calibri, sans-serif;
    font-size: 1.2em;
    color: #2f4956;
	background: #faf8f2;
    font-weight: bold;
	border: 2px solid #2f4956;
	border-radius:18px;
	padding: 40px;
	padding-top: 20px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.exemple2 { 
width: 90%;
margin:auto;
background-color: #fff;
border: 2px solid #2f4956; 
border-radius:18px;
padding: 8px;
}
.exemple3 { 
width: 100%;
margin:auto;
background-color: #ddd;
border: 1px solid #000; 
border-radius:18px;
padding: 8px;
}
table, td, th {
font-size:1.0em;	
width: 100%;
border-collapse: collapse;
}
td {
width: 10%;
vertical-align: top;
font-weight:normal;
padding: 5px;
border: 1px solid black;
text-align: center;
}
th {
width: 20%;
vertical-align: top;
font-weight:normal;
padding: 5px;
border: 1px solid black;
text-align: center;
}
@media screen and (max-width : 1250px){
td {
font-size: 1em;
padding: 6px;
}
#dr2 {
text-align: center;
}
}
@media screen and (max-width : 1000px){
#co {
display: flex;
flex-direction: column;
}
#co2 {
display: flex;
flex-direction: column;
}	
}
@media screen and (max-width : 800px){
td {
font-size: 0.9em;
padding: 4px;
}
}
@media screen and (max-width : 500px){
td {
font-size: 0.8em;
padding: 1px;
}
}
@media screen and (max-width : 400px){
.encadrer-fin{ 
color:#2f49561;
border: 1px solid #2f4956; 
border-radius:10px;
background-color:#faf8f2;
padding: 18px;
padding-top: 28px;
font-weight: normal;
}
td {
font-size: 0.7em;
padding: 1px;
}
}

#bcp {
border-right: 1px solid #999;
float:left;
width: 310px;
text-align: left;
}
#peu {
width: 940px;
float:right;
text-align: left;
background-color: #ffffff;
}
#dyng {
float:left;
width: 1100px;
text-align: left;
}
#dynd {
width: 150px;
float:right;
text-align: right;
}
.flotte {
float:left;
padding-left: 15px;
}
.flottedr {
float:right;
}
.bouton {
	color:#ff3300;
	font-size:0.8em;
	cursor:pointer;
	line-height:1.5em;
}
.bouton:hover {
	text-decoration:underline;
}
.texte {
	color:#0066ff;
}
@media screen and (max-width: 768px) {
#dyng {
width: 90%;
}
#dynd {
width: 90%;
text-align: center;
}
#bcp {
width: 90%;
text-align: center;
}
#peu {
width: 90%;
}
}
@media screen and (max-width: 780px) {
#bcp {
border: none;
}
}
.encadrer1 {color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 10px;
background: #faf8f2;
}
.encadrer2 {color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 8px;
background: #faf8f2;
}
.encadrerSansFond1 {color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 8px;
}
.encadrerSansFond2 {color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 8px;
}
.encadrerSansFond3 {color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 8px;
}
.encadrerSansFond4 {color:#2f4956;
border: 1px solid #2f4956; 
border-radius:10px;
padding: 8px;
}