:root {--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--orangeclair: #fff8f0;--grisclair: #eee}
html{box-sizing:border-box;font-size:12px}
*, *::after, *::before {box-sizing:inherit}
* {margin:0}
body{font-family:var(--system-ui);line-height:1.3;font-weight:lighter}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font: inherit}
p,h1,h2,h3,h4{overflow-wrap:break-word}
/*	fin reset*/
h1,h2,h3,h4{text-transform:uppercase}
strong{font-weight:400}
/* icones */
i:not(#copyright *) {padding-right:0.5em}
.icon-int::after {font:var(--fa-font-solid);content:'\f105';padding-left:0.5em}
.icon-ext:after {font:var(--fa-font-light);content: '\f360';padding-left:.25em}
.icon-next::after {font:var(--fa-font-solid);content:'\f324';padding-left:0.5em}
.icon-prec::before {font:var(--fa-font-solid);content:'\f323';padding-right:0.5em}
.icon-tag::before {font:var(--fa-font-solid);content: '\f02c';padding-right: 0.5em}
.icon-notations::before {font:var(--fa-font-regular);content:'\f05a';padding-right:0.5em}
.icon-download::before{font:var(--fa-font-regular);content:'\f019';padding-right:0.5em}
.icon-quiz:before{font:var(--fa-font-thin);content: '\f14a';padding-right: 0.5em;}
/* liens et boutons*/
a {cursor:pointer;text-decoration:none}
.logo{position:relative;top:2rem;background:#09C;background:radial-gradient(ellipse at center, #51c3fa 0%,#09C 100%);font-size:2.6rem;font-weight:500;color:#333;border:3px solid #fff;border-radius:5px;box-shadow: 0 3px 12px rgba(0,0,0,.23),0 3px 12px rgba(0,0,0,.16);text-shadow: 1px 1px 1px rgba(255,255,255,0.5);transform:rotate(-30deg);transition:transform .5s;padding:0 1rem}		
.logo:hover {transform:rotate(0deg);color:#fff}
.button{position:relative;display:flex;justify-content:space-around;align-items:center;background:#09C;background:linear-gradient(to bottom,#51c3fa 0%,#09C 100%);border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.2);color:#fff;text-shadow:0 -1px 1px rgba(0,0,0,0.25);border-bottom:1px solid rgba(0,0,0,0.3);padding:6px 20px}	
.button:active {top:1px}
.youtube{display:flex;justify-content:center;align-items:center;max-width:200px;border-radius:1rem;background:var(--grisclair);border-bottom:1px solid rgba(0,0,0,0.3)}
.youtube:hover{background:#09C;background:linear-gradient(to bottom,#51c3fa 0%,#09C 100%);color:#fff}
.prec,.next{display:flex;flex-direction:column;justify-content:space-between;align-content:space-between;color:#333;border-radius:5px;font-size:.9rem;font-weight:lighter;border:3px solid #fff;width:19rem;min-height:4rem;padding:.5rem .4rem;margin:1.5rem 0;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}
.prec{align-items:flex-start}
.next{align-items:flex-end}
.prec:hover, .next:hover {background:#09C;background:linear-gradient(to bottom,#51c3fa 0%,#09C 100%);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);text-shadow:0 -1px 1px rgba(0,0,0,0.25)}
span.icon-prec,span.icon-next{text-transform: uppercase}
/* header */
header{display:flex;justify-content:space-around;align-items:center;width:100%;padding:.6rem;background:#ff9d00;border-bottom:.5rem solid #fff}
header h1 {color:#fff;font-weight:lighter;font-size:2rem}
header h1>strong {color:#333;text-shadow:1px 1px 1px rgba(255,255,255,0.5)}
/* main */
main{display:flex;flex-direction:column;justify-content:space-around;align-items:center;color:#333}		
#Apropos{width:100%;display:flex;flex-direction:column;justify-content:space-around;align-items:center;color:#fff;background:#09C;background:radial-gradient(ellipse at center, #51c3fa 0%,#09C 100%);padding:0 10px}
#Apropos > h2{width:100%;max-width:60rem;margin-top:2rem}
#Apropos > p{width:100%;max-width:60rem;font-weight:400;color:#333;margin-top:1rem}
#Apropos time{color:#fff;font-weight:200}
#Apropos p time:after{content:'|';color:#fff;padding:0 0.5em}
#Apropos > ul{width:100%;max-width:60rem;display:flex;flex-direction:column;justify-content:space-between;list-style:none;padding:0;font-size:.9rem;margin:1rem 0}
#Apropos ul li:first-child {min-width:25rem}
#Apropos p > a{color:#fff;padding:5px 0;transition:all .2s ease-in-out}
#Apropos p > a:hover {box-shadow:0px -2px 0px #fff inset}
#Apropos ul > li p{text-align:justify;margin:10px 0}
/*	navigation inter chapitres */
main > nav {width:100%;margin:1rem 0;display:flex;flex-direction:row;justify-content:space-around;align-items:center}
/*	article */
article{width:100%;max-width:60rem;display:flex;flex-direction:column;justify-content:flex-start;counter-reset:legendeTableau legende;padding:0 10px;quotes: "«\00A0" "\00A0»" "\2018""\2019"}
article > h2{color:#ff9d00;font-size:1.2rem;margin-top:2.4rem}
article > h3{color:#ff9d00;font-weight:normal;font-size:1rem;margin-top:2rem}
article p,article ul,article ol{text-align:justify;margin-top:.5rem}
/*article >p,article >ul,article >ol{margin-top:1rem}*/
article ul, article ol{list-style-position:inside;padding:0}
article ul > li{list-style-type: disc}
article li > ul{padding-left:20px}
article li ul > li{list-style-type:circle}
article dt{font-weight: normal}
article dl {margin:1rem 0 0 0;padding: 0}
article dd {margin: 0 0 1em 0;padding: 0}
article a{font-size:inherit;text-decoration:none;color:#09C;padding:3px 5px;border-radius:5px;transition:all .3s ease-in-out}
article a:hover{background:var(--grisclair);color:#333}
article blockquote {display:block;border-left:0.5rem solid var(--grisclair);margin:1rem 0;padding: 0 0 0 2rem;font-style: italic}		
article blockquote cite{display:block;font-size:0.8rem;text-align:left;padding:0;margin:.5rem 0 0 0;color:#09C;font-style:normal}
figcaption{font-size:.8rem;line-height: 1.2rem;font-style:oblique;text-align:justify}
caption{font-size:.8rem;line-height: 1.2rem;font-style:oblique;padding:12px}
figcaption::before {counter-increment: legende;content: "Fig. " counter(legende) "- ";color:#09C}
caption::before {counter-increment: legendeTableau;content: "Table. " counter(legendeTableau) "- ";font-weight: bold}	
table{color:#333;border-radius:5px;font-size:.8rem;border:3px solid #fff;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);background:var(--orangeclair);text-shadow: 1px 1px 1px rgba(255,255,255,0.5);border-collapse:separate;border-spacing:0}
th{font-weight:500;padding:10px;text-align:center}
td{padding:10px;text-align:center}		
.cadre{background-color:#ff9d00;margin-top:1rem;padding:0 1rem 1rem 1rem;color:#fff;border-radius:5px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}
.cadre h3{text-transform:none;margin:5px -12px 5px -12px;padding:0px 12px;font-weight:500}
.cadre h3::before {font:var(--fa-font-solid);content:'\f004';padding-right:0.5em}
.exemple{font-size:.85rem;border-radius:5px;padding:12px;margin-top:1rem;background:var(--orangeclair)}
.exemple h3{font-size:.85rem;font-weight:bold}
.remarque{font-size:.85rem;border-left:1px solid #09C;color:#09C;padding-left:12px}
.remarque h3{font-size:.85rem;text-transform:none}
.remarque > p{margin:0}
.exo,.exo-sans-solution {font-size:.85rem;border-left:1px solid #ff9d00;margin-top:1rem;padding-left:12px}
.exo h3,.exo-sans-solution h3{text-transform:none;font-size:.85rem;display:inline;color:#ff9d00}
.exo h3:after, .exo-sans-solution h3:after{content:' \2014 '}
.exo p, .exo-sans-solution p{display:inline}
.exo p:last-child {display:block}
.exo p:last-child::before {content:'Solution : '}
.iframe-container{display:flex;justify-content:center;padding-top:20px}
.center{display:flex;flex-direction:column;align-items:center;margin:1rem 0}
.center >:last-child {width:100%;margin-top:1rem}
.center > img{width:75%}
.center >:last-child img{margin:auto}
img{margin:auto}
.center100 > img{width:100%}
.pleine-page{width:100%;max-width:60rem;margin:1rem 0;display:flex;flex-flow:row wrap;justify-content:space-evenly;gap: 10px}
.pleine-page > figcaption{width:100%}
.tooltip {position:relative;display:inline;border:none;padding:0;border-bottom-color:inherit;cursor:help;background:transparent;border-bottom: 1px dotted;color:inherit}
.tooltip  .tooltiptext{visibility:hidden;width:50%;position:fixed;bottom:auto;top:10%;left:50%;transform:translate(-50%);padding:5px;color:#333;border-radius:5px;font-size:.85em;font-weight:200;background:var(--grisclair);text-align:justify;z-index:1;opacity:0;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);box-shadow: 0 3px 12px rgba(0,0,0,.23),0 3px 12px rgba(0,0,0,.16);border:3px solid #fff}
.tooltip .tooltiptext::after {display:none}
.tooltip:active .tooltiptext{visibility: visible;opacity: 1}
.tooltip:hover .tooltiptext{visibility: visible;opacity: 1}
.tooltip .tooltiptext img{display:block;width:60%;margin:auto}
.simu-center{display:flex;flex-direction:column;align-items:center;margin:1rem 0}
.simu-center canvas{margin:auto;}		
.simu-center >:last-child {width:100%;margin-top:1rem}		
.simu-pleine-page{width:100%;max-width:60rem;margin:1rem 0;display:flex;flex-flow:row wrap;justify-content:space-evenly;gap: 10px}
.simu-pleine-page > figcaption{width:100%}
.simu-pleine-page form{display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:0.85rem;width:100%}
form input[type="range"] {-webkit-appearance:none;overflow:hidden;background:#eee;text-align:center;font:inherit;border-radius:.5rem;box-shadow: 1px 1px 3px rgba(0,0,0,.5) inset;margin:12px}
form input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none;background:#09C;height:1rem;width:1rem;border-radius:50%;box-shadow: -1px -1px 5px rgba(0,0,0,.5) inset,-1px -1px 4px 3px #09C inset,1px 1px 3px rgba(0,0,0,.3),-199px 0 0 198px rgba(0, 153, 204, 0.2)}
form input{margin:12px}
form input[type="range"]:in-range {width:20rem}
form input[type="radio"] {opacity:0}
form input[type="radio"] + label{cursor:pointer;padding:4px 10px;border:1px solid #ccc;background:#eee;color:#aaa;border-radius:5px;text-shadow: 1px 1px 0 rgba(0,0,0,0)}
form input[type="radio"]:checked+label{background:#09C;text-shadow:1px 1px 0 rgba(0,0,0,0.4);color:white}
details{background:var(--grisclair);color:#333;margin-top:1rem;border-radius:5px;border:3px solid #fff;font-size:.85rem}
details summary{background:var(--grisclair);color:#09C;text-transform:uppercase;font-size:1rem;cursor: pointer;transition:all .2s ease-in-out;padding:0.5rem}
details > p{margin:.5rem}
details[open]{box-shadow: 0 3px 12px rgba(0,0,0,.23),0 3px 12px rgba(0,0,0,.16)}
#biblio{font-size:1rem;line-height:1.4em;overflow:hidden;margin-top:2rem;text-align:left;border-top: 5px solid var(--orangeclair)}
#biblio > h3{color:#09C;margin-top:1rem}
#biblio ol{list-style: none;counter-reset: item;margin-top:1rem}
#biblio li{font-size:1rem;padding:3px 0}		
#biblio ol li:before {content: "[" counter(item) "] ";counter-increment: item}		
#biblio .author{font-weight:500}
#biblio .author:after {content:", "}
#biblio .article:after {content:"\201D, "}
#biblio .article:before {content:"\201C"}
#biblio .ouvrage,#biblio .book{font-style:italic}
#biblio .ouvrage:after {content:", "}
#biblio .book:after {content:". "}
#biblio .site a{font: normal small-caps normal 1em Arial, sans-serif}	
#navArticle{width:100vw;position:fixed;bottom:0px;right:0px;background:var(--grisclair);color:#333;font-weight:lighter;margin:0;z-index:2;text-decoration:none;border-top:3px solid #fff;box-shadow: 0 3px 12px rgba(0,0,0,.23),0 3px 12px rgba(0,0,0,.16)}
#navArticle > h4{display:flex;justify-content:center;align-items:center;gap:2rem;background:var(--grisclair);text-align:center;color:#333;text-shadow: 1px 1px 1px rgba(255,255,255,0.5);font-size:1rem;padding:5px}
#navArticle  ul{display:flex;flex-direction:row;justify-content:center;gap:2rem;counter-reset:section;background:linear-gradient(to bottom,var(--grisclair) 0%,#fff 10%)}
#navArticle h3,#navArticle h2,#navArticle p{font-size:.85rem;padding:5px}
#navArticle  ul li{list-style:none;height:0px;transition:all 0.4s ease-in-out}
#navArticle:hover ul li{height:50vh;padding:1rem 0}
#navArticle  ul h2{counter-reset:ssection}
#navArticle  ul h3{font-weight:lighter}
#navArticle  ul h2:before {counter-increment: section;content: " "counter(section)". "}
#navArticle  ul h3:before {counter-increment: ssection;content: counter(section) "." counter(ssection)" "}
#navArticle  ul h2 a,#navArticle  ul h3 a{color:#ff9d00;background:transparent}
#navArticle  ul h2 a:hover, #navArticle  ul h3 a:hover {background:var(--grisclair);color:#333;text-shadow:#fff 0px 0px 10px}	
#navArticle  ul p a{color:#333;text-shadow:#fff 0px 0px 10px}	
#navArticle  ul p a:hover{background:var(--grisclair)}

/* footer */
footer{font-size:1rem;color:#fff;height:auto;width:100%;background-color:#333;box-shadow:inset 0 10px 5px -5px #000;margin:0;padding:1rem 0 2rem 0}
footer p{margin-bottom:1rem}
footer > p:last-child {font-size:.8rem;padding:.6rem 0;text-align:center;border-top:1px solid #fff;border-bottom:1px solid #fff;background:#2d2d2d}
footer a{color:#fff;background:transparent;padding:4px 0;transition:all .2s ease-in-out}
footer a:focus,footer a:hover {box-shadow:0px -2px 0px #fff inset;border-radius:0;text-shadow:none;background:transparent}
footer nav{font-variant:small-caps}
footer nav>div{padding:1rem}
footer ul{list-style-type:none;margin:0 0 0 .5rem;padding:0}
footer li{margin-bottom:1rem}
footer h3{font-size:1.2rem;margin-bottom:1rem;color:#ff9d00;text-shadow:2px 2px 2px rgba(0,0,0,.5)}
footer h4{font-size:1rem;margin-bottom:1rem;color:#ff9d00;font-weight:lighter}
footer .new{margin:0px 5px 0px 0px;color:#ff9d00;font-weight:lighter}
footer .standby{display:none}

@media screen and (min-width:640px) {
	#Apropos ul li:first-child{max-width:40rem}
	#Apropos > ul{flex-direction:row;gap:20px;justify-content:start}
	article >:not(.center):not(.simu-center):not(.center100):not(.pleine-page):not(.simu-pleine-page):not(#biblio):not(#navArticle) {width:67%;max-width:40rem}
	.tooltip .tooltiptext{position:absolute;width:20rem;bottom:120%;top:auto;margin-left:-10rem;transform:none}
	.center{flex-direction:row;justify-content:flex-start;align-items:flex-end;gap:1rem}
	.center >:first-child {width:67%;max-width:40rem}
	.center >:last-child {max-width:18rem;padding-left:1rem}
	.center > img{padding:0 5rem}
	.simu-center{flex-direction:row;justify-content:flex-start;align-items:flex-end;gap:1rem}
	.simu-center >:first-child {width:67%;max-width:40rem}
	.simu-center >:last-child {max-width:18rem;padding-left:1rem}
	footer nav{display:flex;align-items:flex-start;justify-content:center}
	#copyright:before {content:'sous licence Creative Commons '}	
}
@media screen and (min-width:784px) {html {font-size:14px}}
@media screen and (min-width:896px) {html {font-size:16px}}
@media screen and (min-width:896px) {html {font-size:16px;}}