* {margin: 0;
padding: 0;}

body {width: 100%;
margin: auto;
min-width: 320px;
font: 1em/1.4 "Helvetica Neue", Helvetica, "Lucida Grande";
color: #4c4b4b;
background-color: #fdfdfd;}

#corps {width: 100%;
margin: auto;
margin-bottom: 3em;}

#chemin {width: 90%;
padding: 0.5em 0.7em 0.5em 1em;
margin: auto;
margin-top: 6em;
margin-bottom: 4em;
text-align: left;
font: 1em, Helvetica;
color:#827f7f;
background-repeat: repeat-x;
border: 1px solid #dddddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

#chemin a {color: #237b9a;}

.hr {width: 85%;
margin-left: 4.5em;
border: 0 none #c7c2c2;
border-top: 1px solid #ddd;
clear: both;
margin-bottom: 1em;}

.separation
{margin:auto;
margin-top:8em;
margin-bottom:8em;
border: 0 none #c7c2c2;
border-top: 1px solid #ddd;
clear: both;
width:35%;}

.separations
{margin:1.9em 2.5em 1.9em 0.6em;
width:200px;
color:#c7c2c2;
float: left;}

/* Menu */

.topnav {overflow: hidden;
background-color: #333;}

.topnav a {float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;}

.topnav a:hover {background-color: #848484;
color: black;}

.topnav a.active {background-color: #484848;
color: white;}

.topnav .icon {display: none;}

#recherche h2 {font: 195%/100% "Helvetica Neue", Helvetica;
text-align: center;
font-size: 1.5em;
margin: 1em 0 1.5em 0;
color: #464646;}

#recherche {width: 85%;
padding-top: 4em;
padding-bottom: 3em;
margin: auto;}

/* Fin menu */

/* Texte */

h1 {font: 195%/100% "Lucida Grande","Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
margin-top: 2em;
margin-left: 1.8em;
margin-right: 1.8em;
margin-bottom: 1em;
color: #6d6b6b;
font-size: 2.5em;}

.typewriter-container div {width: 88%;margin:4.5em;}

.typewriter h1 {
  font-family: "Lucida Grande"; /* Web-safe typewriter-like font = monospace */
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  margin: 0; /* Gives that scrolling effect as the typing happens */
  border-right: .15em solid #237b9a; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blinking-cursor .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width:100% }
}

/* The typewriter cursor effect */
@keyframes blinking-cursor {
  from, to { border-color: transparent }
  50% { border-color: #237b9a; }
}

h2 {font: 195%/100% "Lucida Grande","Helvetica Neue", Helvetica;
position: relative;
font-size: 1.8em;
margin: 2.8em 1.9em 0.8em 2.4em;
color: #797878;}

h3 {margin: 2.4em 1.8em 1em 3.2em;
color: #b5b1b1;
font: 195%/100% "Lucida Grande","Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.4em;}

h4, h5 {margin: 1.8em 0 0.9em 3.6em;
color: #3d3c3c;
font: 195%/100% "Lucida Grande","Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.3em;}

p {font: 1.1em/1.4 Helvetica;
text-align: justify;
padding: 0.8em 4em 0 4em;
font-size: 1.1em;
color: #4c4b4b;}

.p-haut {font: 1.1em/1.4 Helvetica;
text-align: justify;
padding: 0.8em 4em 0 4em;
margin-top: 2.5em;
font-size: 1.1em;
color: #4c4b4b;}

.p-t-haut {font: 1.1em/1.4 Helvetica;
text-align: justify;
padding: 0.8em 4em 0 4em;
margin-top: 6em;
font-size: 1.1em;
color: #4c4b4b;}

.p-centre {text-align: center;
padding: 0.6em 6em 0.6em 6.2em;
font-size: 1.1em;
color: #4c4b4b;}

.p-bas {text-align: justify;
padding: 0.8em 4em 0 4em;
font-size: 1.1em;
color: #4c4b4b;
margin-bottom: 3.5em;}

.p-liens {text-align: justify;
padding: 0 6em 0 5.5em;
font-size: 1.1em;
color: #4c4b4b;
margin-top: 3em;
margin-bottom: 4em;}

#intro {text-align: justify;
font-weight:bold;
font-size:1.2em;
font-style: Georgia;
padding: 1.25em 3.6em 4em 3.8em;
color: #2e2e2e;}

.lettrine {padding-right: 0.1em;
padding-top: 0.15em;
line-height: 0.7em;
color: #a6a2a2;
font-size: 6em;
float: left;
margin-right: 0.1em;
margin-bottom: 0.1em;}

.cadre-milieu {width: 60em;
height: 20em;
margin: auto;
float: center;
font-size: 0.8em;
overflow:scroll;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-agn: justify;
padding: 0.8em 1em 0.8em 1em;
margin-top: 4.1em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre-mieu p {text-agn: justify;
padding: 0.8em 1em 0.8em 1em;
font-size: 1.1em;
color: #4c4b4b;}

.cadre-dr-lg {width: 25em;
float: right;
font-size: 0.8em;
border: 1px sod #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-agn: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 2em;
margin-right: 5.7em;
margin-top: 3.1em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre-dr-lg p {text-agn: justify;
padding: 0.8em 1em 0.8em 1em;
font-size: 1.1em;
color: #4c4b4b;}

.cadre-g-lg {width: 25em;
float: left;
overflow:scroll;
height:auto;
font-size: 0.8em;
border: 1px sod #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 5.5em;
margin-right: 2em;
margin-top: 2.1em;
margin-bottom: 2em;
color: #4c4b4b;}

.cadre-g-lg p {text-align: justify;
padding: 0.8em 1em 0.8em 1em;
font-weight: 90;
font-size: 1.1em;
color: #4c4b4b;}

.cadre-dr {width: 13em;
float: right;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 2em;
margin-right: 5.7em;
margin-top: 1.5em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre-dr p {text-align: justify;
padding: 0.6em;
font-weight: 90;
font-size: 1.1em;
color: #4c4b4b;}

.cadre {width: 15em;
float: left;
overflow:scroll;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: left;
padding: 0.8em 1em 0.8em 1em;
margin-left: 5.5em;
margin-right: 2em;
margin-top: 1.5em;
margin-bottom: 1em;
color: #4c4b4b;}

.cadre p {text-align: justify;
padding: 0.6em;
font-weight: 90;
font-size: 1.1em;
color: #4c4b4b;}

.cadre .liste {margin-top: 1em;
margin-left: 2em;
margin-right: 1em;}

.suite {padding: 0 6.2em 0 6.2em;
margin-top: 6.2em;}

.img-suite {width: 6.2em;
height: 2.6em;}

.consigne {margin: 0 2em 1em 0em;
font: 1.1em/1.4 Trebuchet, Arial;
color: #4c4b4b;}

ul {margin-top: 1em;
margin-left: 5em;
margin-right: 5em;
font: 1.1em/1.4 Helvetica;
color: #4c4b4b;}

.liste-ordo {list-style:decimal;
margin-top: 1em;
margin-left: 6.2em;
margin-right: 5em;
font: 1.1em/1.4 Helvetica;
color: #4c4b4b;}

.liste-mots {width: 35em;
margin-left: 7em;
margin-top: 2em;
-moz-column-width: 15em;
-webkit-column-width: 15em;
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;}

.piqures {width: 780px;;
margin: auto;}

.gros {font: bold 1.1em/1.4 Helvetica;
color: #4c4b4b;}

.indent {text-indent: 1.2em;}

.intro, .exemple {margin-left:0.5em;
font-style: italic;}

.exemple {margin:1.9em;
font-style: italic;}

.alinea {margin-left:1.9em;}

.consignes {font-family: Helvetica;
font-size: 1em;
text-align: justify;
margin: 2em 3.1em 2em 2em;}

.citation {padding-left: 5em;
margin: 2.5em;
font: 1em/1.4 Helvetica;}

.bordure_2 {width: 85%;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0.3em;
margin: 1.9em 4em 1.9em 4em;
text-align: left;}

.encadre {border: solid;
border-width: 1px;
padding: 0.3em;
margin: 1.9em 5em 1.9em 5em;
text-align: justify;}

.rouge {color: rgb(255, 12, 24);}

.vert {color: rgb(11, 126, 7);}

.bleu {color: #1b79b4;}

.italic {font-style:italic;}

.italicr {color: rgb(255, 12, 24);
font-style:italic;}

.gras {font-weight: bold;}

.souligne {text-decoration: underline;}

.notes {margin-top:3.1em;
margin-left: 1.1em;
font-size:0.9em;}

.point {font-size:0.8em;}

.notes-bas-page {font-size:0.9em;
margin-bottom: 1em;
margin-left: 1.1em;
margin-right: 1.1em;}

.classe {text-align:center;
margin-top:10em;
margin-bottom: 10em;
font-size:0.9em;}

ol {padding: 0 6.25em 0 8.1em;}

.table-matiere ul {padding: 0;
list-style:none;}

.table-matiere li {margin-top: 0.4em;
margin-bottom: 0.4em;
list-style:none;}

.table-matiere h2 {margin: 2.1em 3.75em 0.8em 3.7em;
color: #3d3c3c;
font-family:"Helvetica Neue", Helvetica;
font-size: 1.2em;}

#tables-sequences {padding: 0 5em 0 6.5em;}

#tables-sequences li {margin-bottom: 0.6em;}

#tables-sequences ul {margin-bottom: 1.9em;}

.dictee {margin: 1.9em 5.6em 5.6em 6.25em}

.conjugaison {border-collapse: collapse;
margin-top: 1.9em;
margin-bottom: 1.3em;
margin-left: 10em;
width: 43em;}

.conjugaison td, tr {border-collapse: collapse;
text-align: left;
line-height:1.5em;}

.conjugaison th {border-collapse: collapse;
text-align: left;
line-height:1.5em;}

.verbe {border-collapse: collapse; 
font-family: "Helvetica Neue", Helvetica;
width:48em;
margin-top: 6em;
margin-left: 7em}

.verbe td, th {border: 1px solid black;
padding: 0.4em;
text-align: center;}

.numero {width: 0.9em;}

#colonne {
width: 700px;
margin-left: 7em;
-moz-column-width: 20.6em;
-webkit-column-width: 13.1em;
-moz-column-count:3;
-webkit-column-count:3;
-o-column-count:3;
column-count:3;
-moz-column-gap:0.5em;
-webkit-column-gap:0.5em;
-o-column-gap:0.5em;
column-gap:0.5em;}

.cadrechiffres {margin: 3.1em;
text-align: left;
float: left;
width: 120px;
height: 150px;}

/* Fin texte */

/* Citation */

blockquote {text-align: center;
font-size:4em;
margin: 2em 7em 2em 7em;
font-size: 1.5em;
line-height: 1.6em;
color: #b5b1b1;
font-family: "Helvetica Neue", Arial, sans-serif;}

.has-pullquote:before {
/* Reset metrics. */
border: none;
/* Content */
content: attr(data-pullquote);
/* Pull out to the right, modular scale based margins. */
float: right;
width: 14em;
margin: 0.7em 0em 1.8em 2.2em;
/* Baseline correction */
position: relative;
top: 0.3em;
/* Typography (30px line-height equals 25% incremental leading) */
font-size: 1.5em;
color: #05191f;}

.pullquote-left:before {float: left;
margin: 12px 31px 24px -102px;
width: 14em;}

.pullquote-adelle:before {font-family: "Helvetica Neue", "adelle-1", "adelle-2";
font-weight: 100;
top: 0.62em !important;}

.pullquote-helvetica:before {font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 0.438em !important;}

.pullquote-facit:before {font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 0.438em !important;}

/* Fin citation */

/* Tableau avec trait */

.tabletrait {border-collapse: collapse; 
margin-top: 1.5em;
margin: auto;
width:44em;
margin-top: 2em;
margin-bottom: 2em;}

/* Tableau plus petit que le précédent */
.tabletraitpt {border-collapse: collapse; 
margin-top: 1.5em;
margin: auto;
width:34em;
margin-top: 2em;
margin-bottom: 2em;}

.tabletrait #center
{text-align: center;
font-weight: bold;}

.tabletrait #verb
{font-size: 0.8em;}

.tabletrait td, th
{border: 1px solid black;
padding: 0.4em;}

.tabletraitpt td, th
{border: 1px solid black;
text-align: center;
padding: 0.4em;}

.tabledieu {border-collapse: collapse;
margin: auto;
width:45em;
margin-top: 2em;
margin-bottom: 2em;}

.tabledieu td, th
{border: 1px solid black;
padding: 0.4em;}

.table1 {border-collapse: collapse;
width: 600px;
margin: auto;}

.table2 {border-collapse: collapse;
width: 730px;
margin: auto;
padding: 7px;
line-height: 20px;
text-align: justify;}

/* Fin tableau avec trait*/

/* Menu Dictées */

.ringMenu ul , li {
  margin: 0;
  padding: 0;
}

.ringMenu {
  width: 100px;
  margin: 150px auto;
}

.ringMenu:hover {}

.ringMenu ul {
  list-style: none;
  position: relative;
  width: 100px;
  color: white;
}
.ringMenu ul a {
  color: white;
}
.ringMenu ul li {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(97, 95, 95, 0.7);
  text-align: center;
  line-height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
.ringMenu ul li a:hover {
  background: #008cb4;
}

.ringMenu ul li:not(.main) {
  -webkit-transform: rotate(-180deg) scale(0);
  -moz-transform: rotate(-180deg) scale(0);
  -o-transform: rotate(-180deg) scale(0);
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 50% 152px;
  position: absolute;
  top: -102px;
  left: 0;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -102px;
  left: 0;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 0px;
  right: -102px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 0;
  left: -102px;
}

/* Fin menu Dictées */

/* Liens */

a {color: #2582a3;
text-decoration: none;
outline: none;}

a:hover, a:active {text-decoration: underline;}

/*Fin liens*/

/* Images */

.images-dictees-gif {text-align: center;
margin-top: 3.3em;
margin-bottom: 2.5em;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}

.images-dictees {width:47em;
margin:0 auto;
margin-top: 3.3em;
margin-bottom: 2.5em;
display:block;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.illustration-simple {float:left;
margin: 2em;
border-style: none;}

.ill-droite {float:right;
margin:0.35em 0 0.3em 1em;
border-style: none;}

.illustration {float:left;
margin: 0.4em 0.9em 0 0;
border-style: none;}

.chevalier {float:right;
margin:4em 5em 0.3em 2em;
border-style: solid;
border-width:1.3px;}

.tableaux {text-align: center;
margin-top: 3.3em;
margin-bottom: 2.5em;}

#image-legende {float: left; width: 50em; margin-left: 20em; margin-top: 1.2em; margin-bottom: 3.9em;}

#legende-image {float: right; margin-right: 25em;}

#legende-image-1 {float: right; margin-right: 18.7em;}

#titre-legende-image{margin-left: 0em;}

.imgvalid {margin:0 0.3em -0.6em 0;}

.amazon {width:234px;
margin:auto;}

.google {padding: 0 2.5em 0 0.6em;}

.niveau {border-style: none;
margin:0 0.6em -0.3em 0;}

.attention {margin-right:0.6em;}

.liens {float:left;
margin:38px 13px 0.6em 4.4em;}

.nath {text-align: center;}

.bonneannee {margin:auto;width: 800px;height: 400px;margin-bottom: 8em;}

img {max-width: 100%;
width:auto;
height: auto;}

/* Fin images */

/* Images avec légende */
.ill-legende {float:right;
margin-top: 1em;
margin-left: 0.6em;
margin-right: 6em;
border-style: none;}

/* l'image réduite doit être de 250px */
.legende-image {float:right;
width: 18em;
text-align: center;
font-size: 0.8em;
margin-right: -24em;
margin-left: 0.6em;
margin-top: 30em;}

/* l'image doit être placée dans <section> Possibilité d'ajouter une légende. */
.legende-left {float:left;
text-align: center;
font-size: 0.9em;
margin-right: 2.5em;
margin-left: 6em;
margin-top: 1em;
margin-bottom: 2em;}

/* l'image doit être placée dans <section> Possibilité d'ajouter une légende. */
.legende-right {float:right;
text-align: center;
font-size: 0.8em;
margin-right: 7em;
margin-left: 2em;
margin-top: 1.5em;
margin-bottom: 2em;}

/* Images des acteurs du Médecin volant */
.portraitcadre {width: 80%;
min-width: 860px;
margin: auto;
margin-top: 3em;}

.portraitcadre2 {width: 80%;
min-width: 860px;
margin: auto;
margin-top: 5em;
margin-bottom: 55em;}

.portraitcadre3 {width: 80%;
min-width: 860px;
margin: auto;
margin-bottom: 80em;}

.portrait {float: left;
margin-bottom: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 1em;}

.legende-medecin {font-size: 0.8em;
text-align: center;}

.instagram {margin:auto;
margin-top: 5em;
margin-bottom: 5em;
max-width:658px;}

.niveaux {text-align: center;
width: 60%;
margin-top: 3.3em;
margin-bottom: 2.5em;}

/* Fin images des acteurs du Médecin volant */

/* Images Commedia dell'arte */

.perso-commedia
{width: 95%;
min-width: 860px;
margin-left: 0em;
-moz-column-width: 6em;
-webkit-column-width: 6em;
-moz-column-count:4;
-webkit-column-count:4;
-o-column-count:4;
column-count:4;
-moz-column-gap:0em;
-webkit-column-gap:0em;
-o-column-gap:0em;
column-gap:0em;}

.perso-commedia-suite
{width: 60%;
margin-left: 0em;
-moz-column-width: 5em;
-webkit-column-width: 5em;
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
column-count:2;
-moz-column-gap:0em;
-webkit-column-gap:0em;
-o-column-gap:0em;
column-gap:0em;}

.perso-commedia-legende
 {font-size: 0.8em;
margin-left: 4em;
text-align: center;}
 
/* Fin images Commedia dell'arte */

/* Fin images */

/* Vidéos */

.video-1280 {margin:auto;
margin-top: 5em;
margin-bottom: 5em;
width:1280px;}

.video-960 {margin:auto;
margin-top: 5em;
margin-bottom: 5em;
width:960px;}

.video-980 {margin:auto;
margin-top: 5em;
margin-bottom: 5em;
width:980px;}

.video-930 {margin:auto;
margin-top: 5em;
margin-bottom: 2.5em;
width:930px;}

.video-853 {margin:auto;
margin-top: 5em;
margin-bottom: 3em;
width:853px;}

.video-manuel {width: 853px;
margin-left: 4.6em;
margin-top: 2.9em;
margin-bottom: 5em;}

.video-640 {margin:auto;
margin-top: 3em;
margin-bottom: 3.5em;
width:640px;}

.video-560 {margin-top:2.5em;
margin:auto;
width:560px;}

.video-480 {margin:auto;
margin-top: 2.5em;
margin-bottom: 2.5em;
width:480px;}

.video-460 {margin:auto;
margin-top: 2.5em;
margin-bottom: 2.5em;
width:460px;}

.video-425 {margin-top: 2.5em;
margin:auto;
width:425px;}

.video-420 {margin-top: 2.5em;
margin-bottom: 2.5em;
margin:auto;
width:420px;}

.video-320 {margin-top: 5em;
margin:auto;
width:320px;}

.video-metaphore {width: 320px;
margin: auto;
padding: 5em;}

.video {margin-top: 5em;
margin-bottom: 3em;
width:853px;
height:auto;}

/* All video HTML5 (must be 640px) */

video {margin-top: 3em;}

/* Fin vidéos */


/* Audio */

audio {padding-left: 4.8em;
padding-top: 1.3em;
padding-bottom: 1.5em;}

.soundclound {padding-left: 6em;
padding-top: 1.2em;
padding-bottom: 3em;}

.audio-cadre {width: 14em;
float: left;
font-size: 0.8em;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(to bottom, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
text-align: justify;
padding: 0.8em 1em 0.8em 1em;
margin-left: 6.5em;
margin-right: 2em;
margin-top: 1.5em;
margin-bottom: 1em;
color: #4c4b4b;}

/* Fin audio */

/* Dictée*/

#expand {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand1 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand1 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand2 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand2 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand3 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand3 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand4 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand4 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand5 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand5 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand6 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand6 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand7 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand7 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand8 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand8 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}

#expand9 {background-color: #EDEDEC;
display: none;
width: 57.69%;
margin-left: 4.7em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#expand9 div {
padding: 0.4em;
width: 90%;
margin-left:1em;
margin-right:1em;}
             
.expandInfo {background-color: #EDEDEC;
padding: 0.91em;
width: 55.3%;
margin-left: 4.28em;
margin-top: 2em;
font-weight: bold;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
        
#expand a {color: #2367A1;
text-decoration: none;}

#corps-dictee {background-color: azure3;}
        
/* Fin dictée */

/* Plan du site */

#plan {width: 50em;
margin-left: 5em;
margin-top: 4em;
-moz-column-width: 15.6em;
-webkit-column-width: 15.6em;
-moz-column-count:3;
-webkit-column-count:3;
-o-column-count:3;
column-count:3;
-moz-column-gap:0.6em;
-webkit-column-gap:0.6em;
-o-column-gap:0.6em;
column-gap:0.6em;}

#plan > h2:first-of-type {font-family: "Helvetica Neue", Helvetica;
text-align: left;
font-size: 1.1em;
margin-left: 0em;
margin-top: 0;
margin-bottom: 0.9em;}

#plan h2 {font-family: "Helvetica Neue", Helvetica;
text-align: left;
font-size: 1.1em;
margin-left: 0em;
margin-bottom: 0.9em;}

#plan li {list-style:none;margin-left:-5em;}

#plan ul {height: 15.6em;}

#plan-hr {width: 45em;
margin-left: 7em;
border: 0 none #c7c2c2;
border-top: 1px solid #c7c2c2;
clear: both;
margin-top: 3em;
margin-bottom: 3em;}

/* Plan du site */

/* Liens */
ol {
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 1em; 'Helvetica';
    padding: 0;
    margin-bottom: 4em;
    margin-top: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    width: 70%;
    margin-left: 5.5em;
}

ol ol {margin: 0; /* Add some left margin for inner lists */}

.rounded-list a{position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #ddd;
color: #626060;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: .3em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;}

.rounded-list a:hover{background: #eee;}

.rounded-list a:hover:before{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);}

.rounded-list a:before{
content: counter(li);
counter-increment: li;
position: absolute;	
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #49aace;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;}

/* Fin liens */

/* Page consacrée aux manuels */

.manuel-banniere {margin: auto;
margin-top: 6em;
margin-bottom: 3em;
width:700px;
height:510px;}

/* Fin page consacrée aux manuels */

/* Publicité & bannières */

.publicite {text-align:center;
margin:auto;
padding-top: 6em;
padding-bottom: 6em;
margin-top: 6em;}

.publicite1 {text-align:center;
margin:auto;}

.publicite2 {text-align:center;
margin:auto;
padding-top: 6em;
padding-bottom:12em;
margin-bottom:12em;}

.banniere {text-align:center;
margin:auto;
margin-top: 5em;
margin-bottom: 2em;}

.publicite-amazon{margin:auto;
width:728px;
margin-top: 140px;
margin-bottom: 140px;}

/* Fin publicité & bannières */

/* Bas de page */

#tweets {width: 35em;
margin: auto;
margin-top: 3em;
margin-bottom: 3em;}

.partager {width: 25%;
float: left;
text-align: left;
padding-top: 1em;
padding-bottom: 1.5em;
margin-top: 5em;
margin-bottom: 4em;
margin-left: 14%;
border: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;}

.partager ul {margin-left: 1em;}

.partager li {list-style: none;
margin-left: 1em;
margin-bottom: 0.6em;}

.partager h2 {font: 195%/100% "Helvetica Neue", Helvetica;
position: relative;
font-size: 1.5em;
margin: 0.5em 0 1em 1.3em;
color: #4f4e4e;}

.egalement h2 {font: 195%/100% "Helvetica Neue", Helvetica;
position: relative;
font-size: 1.5em;
margin: 1em 0 1em 1em;
color: #4f4e4e;}

.egalement {border: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
width: 45%;
font-size: 1.1em;
text-align: left;
margin-left: 2em;
margin-top: 4.5em;
margin-bottom: 4em;
float: left;}
 
.egalement ul {padding-bottom: 0.8em;
list-style:none;}

.egalement li {margin: 0.4em 0 0.4em -4em;
color: #4c4b4b;
font-family: "Helvetica Neue", Helvetica;
font-size: 0.9em;}

.contact {margin-left: 4em;
margin-bottom: 3em;}

/* Fin de bas de page */

/* Manuel sur page d’accueil */

#manuel {width:40%;
padding: 0.8em;
margin-top: 5em;
margin-bottom: 4em;
margin-left: 1.8em;
float: left;
text-align: left;
font: 1em/1.2 "Helvetica Neue", Helvetica;
border: 1px solid #ddd;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
overflow: hidden;}

#manuel h2 {font: 195%/100% "Helvetica Neue", Helvetica;
position: relative;
font-size: 1.5em;
margin: 0.5em 0 0.5em 0;
color: #464646;}

#manuel .illustration {float:left;
margin: 0.2em 0.9em 0 0;
border-style: none;}

#manuel p {text-align: justify;
color: #4c4b4b;}

#ibook {margin-top: 1.2em;
margin-bottom: 2.5em;}

.legende {font: 0.8em/1.4 "Helvetica Neue", Helvetica;margin-top: 2em;}

/* Fin manuel */

/* footer */

footer {width: 80%;
font-size: 0.8em;
margin-top: 5em;
margin-bottom: 5em;
margin-left: 2em;}

/* Fin du footer */

/* Page exercice Pendu */

#header {margin-top: 4em;
margin-bottom: 1em;}

#nav {list-style: none;
overflow: hidden;
width: 90%;
min-width: 320px;
max-width: 1100px;
background: -webkit-linear-gradient( #555, #686767);
background: -moz-linear-gradient( #555, #686767);
background: -ms-linear-gradient( #555, #686767);
background: -o-linear-gradient( #555, #686767);
background: linear-gradient( #555, #686767);
margin: auto;
margin-bottom: 5em;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}

#footer {width: 80%;
font-size: 0.8em;
margin-bottom: 5em;
margin-left: 5.7em;}

#footer p {padding: 1em 1em 2em 0;}

/* Fin page exercice Pendu */

/* Media queries */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
		
	.tableaux img {margin: auto;
	width:50%;}
	
	img {max-width: 100%;
	width:auto;
    height: auto;}
	
	.ill-droite {width:40%;}
	
	.illustration {width:40%;}
	
	.instagram {margin:auto;
	width:20%;}
	
    .video {margin-left:5em; margin-top: 2em; width: 70%;height: auto;}

	.video-853 iframe {width:85%;
	margin-left:4.5em;
	margin-top: 1em;
	margin-bottom: 3em;
    float: left;}
    
    .video-640 iframe {width: 85%;margin-left: 2em;}

	.expandInfo {width: 54.9%;margin-left: 4em;}
	
	#expand {width: 59%;margin-left: 4.4em;}
	
	#expand div {width: 59%;}
	
	#expand1 {width: 59%;margin-left: 4.4em;}
	
	#expand1 div {width: 59%;}
	
	#expand2 {width: 59%;margin-left: 4.4em;}
	
	#expand2 div {width: 59%;}
	
	#expand3 {width: 59%;margin-left: 4.4em;}
	
	#expand3 div {width: 59%;}
	
	#expand4 {width: 59%;margin-left: 4.4em;}
	
	#expand4 div {width: 59%;}
	
	#expand5 {width: 59%;margin-left: 4.4em;}
	
	#expand5 div {width: 59%;}
	
	#expand6 {width: 59%;margin-left: 4.4em;}
	
	#expand6 div {width: 59%;}
	
	#expand7 {width: 59%;margin-left: 4.4em;}
	
	#expand7 div {width: 59%;}
	
	#expand8 {width: 59%;margin-left: 4.4em;}
	
	#expand8 div {width: 59%;}
	
	.typewriter h1 {font-size:1.8em;
	letter-spacing: .165em;}

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{
	#menu {width:90%;}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {

	body {font-size: 0.9em;}
	
	#chemin {margin-top:2.5em;margin-bottom:2em;}
	
	h1 {margin-left: 1em;margin-top:1em;}

	h2 {margin-left: 1.5em;}
		
	.typewriter h1 {font-size:1.6em;
	letter-spacing: .12em;}
	
	p {padding: 0.8em 2em 0 2em;}
	
	.p-haut {padding: 0.8em 2em 0 2em;}

	.p-t-haut {padding: 0.8em 2em 0 2em;}

	.p-centre {padding: 0.6em 4em 0.6em 4.2em;}

	.p-bas {padding: 0.8em 2em 0 2em;}
	
	.typewriter-container {width: 88%;margin-top:2.2em;margin-left:1.9em;}
	
	.typewriter h1 {font-size:1.5em;
	letter-spacing: .10em;}
	
	.images-dictees{width:40%;margin:auto;}
	
	.video-853 iframe {width: 65%;
	margin-left:4em;
	margin-top: 3em;
	margin-bottom: 2em;}

    .video-640 iframe {width: 45%;margin-left: 2em;}
    
    .video {margin-left:5em; margin-top: 2em; width: 70%;height: auto;}
    
    .tableaux img {margin: auto;
	width: 60%;}

	img {max-width: 100%;
    height: auto;}
    
    #plan {width: 50em;
margin-left: 3em;}

#plan ul {height: 14em;margin-top:1em;margin-bottom:2em;}
    
}


@media screen and (max-width: 640px)
{
	
	#corps {margin-bottom: 1em;}
			
	#chemin {width: 80%;
	margin: auto;
	font-size: 1em;
	padding-right: 0.5em;
	margin-bottom: 3em;
	margin-top: 1em;}
		
	h1 {font-size: 2em;
	text-align: left;
	margin-left: 1em;
	margin-top: 1em;
	margin-bottom: 1em;}
	
	.typewriter h1 {font-size:1.3em;
	letter-spacing: .10em;}
	
	.typewriter-container {width: 82%;margin-top:2em;margin-bottom:3em;margin-left: 2em;}
	
	h2 {font-size: 1.7em;
	text-align: left;
	margin-left: 1.2em;
	margin-top: 1.9em;
	margin-bottom: 0.8em;}
	
	h3 {text-align: left;
	margin-left: 1.6em;
	margin-top: 1em;
	margin-bottom: 0;
	font-size: 1.4em;}

	.partager {width:80%;
	margin: auto;
	margin-top: 2em;
	margin-left: 2.3em;
	margin-bottom: 1em;}
	
	.partager h2 {font-size: 1.5em;
	margin: 0.5em 0 1em 1.3em;}
	
	.egalement {width:80%;
	margin-top: 1.5em;
	margin-left: 2em;
	margin-bottom: 2em;}
	
	.egalement ul {
	margin-left: 5em;}
	
	#manuel h2 {margin:0.5em 0 0.5em 0;}

	#manuel {width:72%;
	margin: auto;
	margin-top: 2em;
	margin-left: 2.3em;
	margin-bottom: 2em;}
	
	#ibook {padding-top: 2em;
	padding-left: 0;}
	
	.hr {width:85%;margin:auto;}
	
	footer {width: 100%;
	margin: auto;
	font-size: 1em;
	margin-bottom: 5em;}
	
	.tableaux img {margin: auto;
	width: 85%;}
	
	.images-dictees {
	width: 78%;
	display:block;
	position:relative;
	margin-top: 2em;
	margin-bottom:2em;}
	
	.images-dictees img {width:28%;margin:auto;}
	
	.images-dictees-gif {margin: auto;
	margin-top: 3em;
	width: 65%;}
	
	.ill-droite {float: none;
	margin: auto;
	margin-top:2em;
	margin-bottom: 3em;
	display: block;
	width:60%;}
	
	.illustration {float: none;
	margin: auto;
	margin-top:2em;
	margin-bottom: 3em;
	display: block;
	width:40%;}
	
	.ill-legende {float:left;
	display: block;
	width: 60%;
	margin-top: 1em;
	margin-left: 2.4em;
	margin-right: 4em;}
	
	.legende-image {float:left;
	width: 65%;
	font-size: 0.8em;
	margin-right: 3em;
	margin-left: 1.5em;
	margin-bottom: 2em;
	margin-top: 2em;}
	
	.tabledieu {width:10em;
	margin: auto;}
	
	.tabletrait {width:auto;
	margin: auto;
	margin-top: 1.5em;
	margin-left: 3em;
	margin-right: 2em;}
	
	.tabletrait td, th, tr {font-size: 0.6em;}
	
	.tabletraitpt {width:20em;
	margin: auto;
	margin-top: 2em;}
	
	.table1 {width:20em;margin-left: 5em;}
	
	.table2 {width:30em;margin-left: 5em;}
	
	.conjugaison {width:30em;margin-left: 5em;}
	
	.verbe {width:30em;margin-left: 5em;}
	
	.expandInfo {width: 289px;
	margin-left: 2.2em;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand1 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand1 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand2 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand2 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand3 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand3 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand4 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand4 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand5 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand5 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand6 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand6 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand7 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand7 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	#expand8 {width: 321px;margin-left: 2.41em;-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;}
	
	#expand8 div {width: 280px;font-size:0.9em;margin-left:1em;margin-right:1em;}
	
	.liste-ordo {margin-left: 3.4em;}
    
    .video-1280 iframe {width: 30%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-960 iframe {width: 30%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
     .video-930 iframe {width: 30%;
	margin-left:2.4em;
	margin-top: 0.5em;
	margin-bottom: 3em;
    float: left;}
    
    .video-853 iframe {width:34%;
    height: 34%;
    float: left;
	margin-left: 2.5em;
	margin-top: 0.5em;
	margin-bottom: 3em;}
    
    .video-640 iframe {
    margin-left: 2em;
    height:50%;
    width:50%;}
    
    .video-560 iframe {width:50%;
	margin-left:2.5em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-480 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-460 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-425 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-420 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-320 iframe {width: 60%;
	margin-left:3em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-manuel iframe {width: 28%;
	margin-left:0em;
	margin-top: 2em;
	margin-bottom: 3em;
    float: left;}
    
    .video-metaphore {width: 320px;
	margin: auto;
	padding: 0;}
    
    .video {margin-left:5em;
	margin-top: 2em;
	width: 70%;
	height: auto;}
    
    video {width: 20em;height: auto;}
    
    .cadre-milieu {width: 60em;
	height: 20em;}

	.cadre-dr-lg {width: 20em;margin-bottom: 2em;float: left;margin-left: 3.2em;}

	.cadre-g-lg {width: 20em;margin-left: 3.2em;}

	.cadre-dr {width: 18em;float:left;margin-left: 5em; margin-bottom: 2.2em;margin-top: 2em;margin-right: 2em;}

	.cadre {width: 20em;float: left;margin-left: 4em;margin-bottom: 2em;}
	
	.has-pullquote:before {
	float: left;
	width: 10em;
	margin: 0.7em 0em 1.8em 0.8em;}

	.bordure_2 {width: 82%;margin-left: 1.8em; margin-top: 1em;margin-bottom: 1em;}

	p {padding: 0.8em 1.8em 0 1.8em;}

	.p-haut {padding: 0.8em 1.8em 0 1.8em;margin-top: 1em;}

	.p-centre {padding: 0.6em 4em 0.6em 4.2em;}

	.p-bas {padding: 0.8em 1.8em 0 1.8em;
	margin-bottom: 3.5em;}

	.p-liens {padding: 0 4em 0 3.5em;
	margin-top: 3em;
	margin-bottom: 4em;}

	#intro {padding: 1.25em 2em 3.7em 2em;}

	.citation {padding-left: 1em;}
	
	blockquote {margin: 2em 4em 2em 4em;}

	.point {font-size:0.6em;}

	iframe {max-width: 100%;}
	
	.liste-manuel {
	margin-top: 0.9em;
	margin-left: 4em;}

	#plan {width: 80%;margin: auto;margin-left: 5em;margin-right: 5em;margin-top: 0em;}
	
	#plan ul {height:auto;margin-top:1em;margin-bottom:2em;}
	
	#plan > h2:first-of-type {margin-left:-1.6em;}

	#plan h2 {margin-top: 0;margin-left: -1.7em;}

	.manuel-banniere {display: none;}
	
	.publicite {display: none;}
	
	.publicite2 {
	padding-top:2em;
	padding-bottom:30em;
	margin-top: 5em;
	margin-bottom:5em;}

	.audio-cadre {margin-left: 3.4em;}

	.table-matiere ul {padding: 0 2.5em 0 0;list-style: none;}

	.table-matiere li {margin-top: 0.4em;
	margin-bottom: 0.4em;
	list-style:none;}

	.table-matiere h2 {margin: 2.1em 0.5em 0.8em 1.8em;
	font-size: 1.1em;}

	ol {width: 70%;
    margin: auto;
    margin-top: 2.5em;}
    
    ul {margin-top: 1em;
    margin-left:3.3em;
	margin-right:0.5em;}

	#liste {margin-left: 3em;}

	#tweets {width: 15em;}
	
	audio {padding-left: 2.5em;}

	.soundclound {padding-left: 4em;}
	
	.separation {margin-top:2em;
	margin-bottom:2em;}

	img {max-width: 100%;
    height: auto;}
    
    .contact {margin-left:1.2em;}

}

@media (prefers-color-scheme: dark) {

body { background: black; color:  white; }
  
a {color: #30a9d4;}
  
#recherche h2 {color: white;}
  
p {color: white;}
  
.p-haut {color: white;}
  
.p-t-haut {color: white;}
  
.p-centre {color: white;}
  
.p-bas {color: white;}
  
.p-liens {color: white;}
  
#intro {color: white;}

.lettrine {color: white;}

.cadre-milieu {color: white;}

.cadre-mieu p {color: white;}

.cadre-dr-lg {color: white;}

.cadre-dr-lg p {color: white;}

.cadre-g-lg {color: white;}

.cadre-g-lg p {color: white;}

.cadre-dr {color: white;}

.cadre-dr p {color: white;}

.cadre {color: white;}

.cadre p {color: white;}

.consigne {color: white;}

ul {color: white;}

.liste-ordo {color: white;}

.gros {color: white;}

.bordure_2 {color: white;}

.table-matiere h2 {color: white;}

.verbe td, th {color: white;}

blockquote {color: white;}
  
h1, h2, h3, h4, h5 {color: white;}

table, tr, td {border: 1px solid white;}
  
.tabletrait td, th {border: 1px solid white;}

.tabletraitpt {border: 1px solid white;}

.tabletraitpt td, th {border: 1px solid white;}

.tabledieu td, th {border: 1px solid white;}

.partager {border: 1px solid #fff;}

.partager h2 {color: white;}

.egalement {border: 1px solid #fff;}

.egalement li {color: white;}

.egalement h2 {color: white;}

.hr {color: white;}

.separation {color: white;}

.separations {color: white;}

#manuel {border: 1px solid #fff;}

#manuel h2 {color: white;}

#manuel p {color: white;}

#chemin {color:white;
border: 1px solid #fff}

.rounded-list a{background: #2c2c2c;
color: white;}

.rounded-list a:hover{background: #5f5f5f;}

#expand {background-color: #5f5f5f;}

#expand1 {background-color: #5f5f5f;}

#expand2 {background-color: #5f5f5f;}

#expand3 {background-color: #5f5f5f;}

#expand4 {background-color: #5f5f5f;}

#expand5 {background-color: #5f5f5f;}

#expand6 {background-color: #5f5f5f;}

#expand7 {background-color: #5f5f5f;}

#expand8 {background-color: #5f5f5f;}

#expand9 {background-color: #5f5f5f;}
             
.expandInfo {background-color: #5f5f5f;}

#expand a {color:white;}

}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}