/* Cadre de contenu */

article {
position: relative;
display: table-cell;
padding-top: 20px;
padding-bottom: 50px;
padding-left: 20px;
padding-right: 20px;
vertical-align: top;
background-color: white;
}

body#index article {
padding-left: 0;
padding-right: 0;
}

body.public article {
width: 1040px;
}

body.admin article {
min-width: 1040px;
padding: 20px;
}

body#exercices_random article {
padding-bottom: 100px;
}

/* Titre et sous-titres */

h1 {
margin-top: 0;
margin-bottom: 20px;
text-align: left;
font-family: Open Sans Condensed;
font-size: 2em;
font-weight: normal;
color: #005DA8;
}

body.admin h1 {
font-family: Roboto;
font-weight: 700;
font-size: 1.8rem;
}

h2 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.5em;
font-weight: normal;
color: #C2131D;
font-family: Open Sans Condensed;
text-align: left;
}

body#exercices h2 {
margin-top: 0;
max-width: 80%;
}

h3, h4, h5, h6 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1em;
font-weight: bold;
color: #F8B333;
}

article p {
text-align: justify;
}

/* Liens du cadre de contenu */

article a {
color: #005DA8;
text-decoration: none;
}

article a:hover, article a:active {
color: #F8B333;
}

/* Formatage */

pre {
max-width: 90%;
word-wrap: break-word;
background-color: yellow;
}

address {
max-width: 90%;
background-color: pink;
}

/* Page d'accueil */

#home-slogan {
position : absolute;
right: 13px;
top: 28px;
width: 205px;
font-size: 1.5em;
font-family: Open Sans Condensed;
text-align: center;
display: none;
}

#home-slogan span {
display: block;
color: white;
}

#home-slogan span:first-child {
margin-bottom: 50px;
font-size: 1.5em;
}

#home-slogan span img {
display: block;
margin-top: 0;
margin-left: 60px;
}


body#index article .container_12 {
margin-top: 30px;
margin-bottom: 30px;
}

body#index article [class*="grid"], body[id*="espace_"] article .grid_4 {
position: relative;
margin-top: 0;
margin-bottom: 0;
}

body#index article [class*="grid_3"] {
height: 50px;
}

body#index article [class*="grid_4"] {
height: 230px;
}

body[id*="espace_"] article .grid_4 {
height: 70px;
}

body#index article [class*="grid"] p, body[id*="espace_"] article .grid_4 p {
text-align: center;
}

body#index article [class*="grid"] a, body[id*="espace_"] article .grid_4 a {
position: absolute;
display: block;
bottom: 0;
margin: 0;
padding: 5px;
padding-top: 12px;
padding-bottom: 10px;
width: 283px;
height: 28px;
color: white;
font-size: 1.5em;
background-color: #005da8;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
text-decoration: none;
opacity: 0.9;
}

body#index article [class*="entreprise"] a {
	background-color: #c50c1f;
}

body#index article [class*="particulier"] a {
	background-color: #f29400;
}

body#index article [class*="anthologie"] a {
	background-color: #f29400;
}

body#index article [class*="francais"] a {
	background-color: #f29400;
}

body#index article [class*="communication"] a {
	background-color: #f29400;
}

body#index article [class*="culture"] a {
	background-color: #f29400;
}

body#index article [class*="anciennes"] a {
	background-color: #f29400;
}

body#index article [class*="auxiliaire"] a {
	background-color: #c50c1f;
}

body#index article [class*="grid_3"] a {
width: 180px;
height: 7.3em;
font-size: 1.2em;
padding: 0;
}

body#choix_domaine article img {
    /* margin-left: -19px; */
}

body#exercices article img {
    /* margin-left: -19px; */
}

#choix_domaine .grid_3 p, #exercices .grid_3 p {
text-align: center;
}

.situation-connexe img {
    padding: 5px 5px 5px 5px;
}

body[id*="espace_"] article .grid_4 a {
font-size: 1.2em;
}

body#index article [class*="grid"] a:hover, body[id*="espace_"] article .grid_4 a:hover {
background-color: #C2131D;
}

body#index article [class*="entreprise"] a:hover, body[id*="espace_"] article .grid_4 a:hover {
background-color: #ad0a1b;
}

body#index article [class*="auxiliaire"] a:hover, body[id*="espace_"] article .grid_4 a:hover {
background-color: #ad0a1b;
}

body#index article [class*="professeur"] a:hover, body[id*="espace_"] article .grid_4 a:hover {
background-color: #005090;
}

body#index article [class*="exercices"] a:hover, body[id*="espace_"] article .grid_4 a:hover {
background-color: #005090;
}

body#index article [class*="particulier"] a:hover, body[id*="espace_"] article .grid_4 a:hover {
background-color: #de8800;
}

body#index article [class*="anthologie"] a:hover, body[id*="espace_"] article .grid_4 a:hover {
background-color: #de8800;
}


body#index article .francais {
background: url(../images/azfrancais.png) no-repeat;
background-size: 100%;
}

body#index article .communication {
background: url(../images/azcommunication.png) no-repeat;
background-size: 100%;
}

body#index article .culture {
background: url(../images/azculture.png) no-repeat;
background-size: 100%;
}

body#index article .anciennes {
background: url(../images/azanciennes.png) no-repeat;
background-size: 100%;
}

body#index article .professeur {
background: url(../images/professeur.jpg) no-repeat;
background-size: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

body#index article .entreprise {
background: url(../images/entreprise.jpg) no-repeat;
background-size: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

body#index article .particulier {
background: url(../images/particulier.jpg) no-repeat;
background-size: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

body#index article .auxiliaire {
background: url(../images/auxiliaire.jpg) no-repeat;
background-size: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

body#index article .exercices {
background: url(../images/exercices.jpg) no-repeat;
background-size: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

body#index article .anthologie {
background: url(../images/anthologie.jpg) no-repeat;
background-size: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.questions {
margin-top: 30px;
margin-bottom: 30px;
height: 120px;
padding: 10px;
padding-left: 310px;
background: url(../images/formation-liste.jpg) no-repeat;
background-size: 250px;
background-color: #E0E1DB;
}

.questions p {
margin: 10px;
margin-top: 35px;
font-size: 2em;
}

/* Abonnement utilisateur */

.tr-abo {
background-color: #d2f4d3;
}

.invit-abo {
width: 1190px;
margin: auto;
background-color: #F8B333;
font-style: italic;
text-align: center;
padding: 5px;
}

.invit-no-abo {
color: white;
background-color: red;
font-style: italic;
text-align: center;
padding: 5px;
}

.invit-abo a {
margin-left: 20px;
color: black;
}

.invit-no-abo a {
color: white;
}

/* Chapitre situation */

.situation-detail {
width: 100%;
}

.situation-detail th, .situation-detail td {
vertical-align: top;
}

.situation-detail th {
width: 250px;
height: 30px;
}

/* Test d'orthographe */

div[id*="phrase"] {
display: none;
}

.consigne-ok {
display: none;
color: #CF3422;
}

.consigne-ok:hover {
cursor: pointer;
text-decoration: underline;
}

.diag-result {
padding: 20px;
background-color: #E0E1DB;
}

/* Moteurs de recherche */

body[id*="exercices"] .exercice-suivant + .container_12 {
    display: block;
}

.req-results {
position: relative;
padding: 10px;
padding-bottom: 5px;
margin-bottom: 20px;
border: solid 2px #ffffff;
border-radius: 2px;
border-left-color: #666;
border-bottom-color: #666;
border-top-color: #666;
border-right-color: #666;
max-width: 95%;
}

body#gestion_devoir .req-results {
min-height: 200px;
}

body#gestion_devoir .req-results .exercice-suivant {
bottom: 50px;
}

body.admin .req-results a {
    margin-left: 0px;
}

@media screen and (max-device-width:1366px) {
body#gestion_situation .req-results {
min-height: 130px;
width: 1145px;
}

body#gestion_question .req-results {
min-height: 160px;
width: 1145px;
}

body#gestion_phrase .req-results {
min-height: 160px;
width: 1145px;
}

body#gestion_exercice .req-results {
min-height: 320px;
width: 1145px;
}

body#gestion_devoir .req-results {
width: 1145px;
}
}

.req-results [class*="cadre-situation"] {
width: 80%;
text-align: left;
margin-top: 0;
margin-left: 149px;
color: #4caf4f;
background-color: white;
border: dashed 3px #4caf4f;
border-radius: 5px;
}

.req-results details {
padding: 15px;
box-sizing: border-box;
}

.req-results p {
width: 80%;
text-align: left;
margin-top: 0;
margin-left: 149px;
font-family: Open Sans Condensed;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
}

body#devoir_detail .req-results p {
margin-left: 10px;
}

.action-exo {
position: absolute;
left: 45px;
}

.req-results .action-exo img {
margin-bottom: -75px;
cursor: pointer;
width: 64px;
}

body.admin .req-results span {
margin-left: -68px;
}

.req-results span {
margin-left: -62px;
cursor: pointer;
text-decoration: none;
color: #c50c1f;
}

p.cadre-situation {
color: #4caf4f;
background-color: white;
border: dashed 3px #4caf4f;
border-radius: 5px;
margin-bottom: 40px;
}

p.cadre-phrase {
background-color: #EEEEEE;
}

p.lvl {
    background-color: white;
    color: #f9b536;
}

body#gestion_question .req-results p:first-child, body#gestion_phrase .req-results p:first-child, body#gestion_exercice .req-results p:first-child, body#devoir_detail .req-results p:first-child {
width: 80%;
}

.req-results + form {
margin-top: 20px;
}

.req-results .req-approuve {
position: absolute;
top: 10px;
right: 10px;
}

body.admin .req-results .result-ordre {
background-color: #005DA8;
border-radius: 50%;
margin: 0px 3px;
margin-right: 15px;
color: white;
width: 32px;
height: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
cursor: initial;
}

body.admin .req-results .exercice-suivant {
position: absolute;
bottom: 121px;
left: 27px;
width: 50px;
}

body#devoir_detail .req-results .exercice-suivant {
position: absolute;
width: 50px;
bottom: 20px;
right: 70px;
}

.req-results .exercice-suivant a {
    width: 80px;
}

.req-createur {
position: absolute;
bottom: 10px;
left: 10px;
font-size: 0.7em;
}

/* Phrases */

tr[class*="j_phrase_auteur"], tr[class*="j_phrase_oeuvre"] {
display: none;
}

/* Exercices */

body#exercices_random #section-intro {
margin: 0;
}

.exercice-id {
position: absolute;
top: 0;
right: 0;
}

tr[class*="add_j_exercice_auteur"] {
display: none;
}

tr[class*="add_j_exercice_type"] {
display: none;
}

tr[class="add_j_exercice_type"] {
display: table-row;
}

tr[class*="add_j_exercice_cplt_reponse"] {
display: none;
}

.exercice-login {
position: absolute;
top: 290px;
right: 0px;
width: 300px;
text-align: center;
}

.phrase-libelle {
padding: 10px;
font-size: 1.1em;
font-family: Open Sans Condensed;
background-color: #EEEEEE;
border-radius: 5px;
}

.phrase-libelle input {
margin-left: 3px;
margin-right: 3px;
}

.phrase-auteur {
font-size: 0.9em;
text-align: right;
margin-top: -10px;
}

.reponse-ok, .reponse-nok {
font-family: Open Sans Condensed;
font-size: 1.2em;
padding: 10px;
padding-left: 50px;
}

.reponse-ok {
background: url(../icones/exo_ok.png) no-repeat;
background-position: left center;
}

.reponse-nok {
background: url(../icones/exo_nok.png) no-repeat;
background-position: left center;
}

.reponse-affiche span[class*="reponse-finale"] {
display: block;
margin-top: 10px;
font-family: Open Sans Condensed;
font-size: 1.1em;
}

.faute {
color: red;
}

.situation-connexe {
background: url(../images/more.png) no-repeat;
background-size: 64px;
padding-left: 90px;
margin-top: 40px;
color: #4caf50;
border:dotted 5px #4caf4f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.situation-connexe p:first-child {
font-family: Open Sans Condensed;
font-size: 1.1em;
}

.exercice-approuve {
position: absolute;
bottom: 50px;
right: 0;
}

.exercice-approuve span[id] {
cursor: pointer;
color: #005DA8;
background: url(../icones/exo_ok) no-repeat;
padding-left: 30px;
}

.exercice-approuve span[id]:hover {
color: #F8B333;
}

.exercice-ajout {
position: absolute;
top: 10px;
right: 10px;
}

.exercice-suivant a {
display: block;
width: 150px;
margin: auto;
margin-top: 45px;
padding: 10px;
text-decoration: none;
text-align: center;
color: white;
background-color: #005DA8;
border:none 5px #005ca8;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
border-radius: 17px;
}

.exercice-suivant a:hover {
text-decoration: none;
color: black;
background-color: #F8B333;
}

body#exercices .exercice-suivant a {
width: 600px;
}

body#exercices_random #pagination {
margin-top: 0;
margin-bottom: 20px;
text-align: left;
font-family: Open Sans Condensed;
font-size: 1.8em;
font-weight: normal;
color: #005DA8;
position: absolute;
top: 35px;
left: 20px;
}

body#exercices_random h1 {
width: 70%;
font-size: 1.6rem;
}

body#exercices_random .question-cplt {
width: 85%;
}

body#exercices_random .question-complement {
font-size: 1.4rem;
}

body[id*="exercices"] article .container_12 {
margin-top: 30px;
margin-bottom: 30px;
display: none;
}

body[id*="exercices"] article .domaines {
margin-top: 30px;
margin-bottom: 30px;
display: block;
}

[class*="add_exos_devoir_"] {
margin-bottom: 10px;
}

.table-devoir th input {
margin-bottom: 10px;
}

/* Détail des groupes */

body#groupe_detail h1 {
display: inline;
}

body#groupe_detail #lien_j_classe_bouton {
margin-left: 10px;
margin-bottom: 10px;
font-size: 11px;
}

body#groupe_detail #lien_j_classe_texte {
display: none;
}

/* Gestion des devoirs */

body#add_devoir .add_j_devoir_eleve {
display: none;
}

body#add_devoir div.eleve, body#modif_devoir div.eleve {
margin-right: 4px;
margin-left: 3px;
}

body#add_devoir div.entete_classe, body#modif_devoir div.entete_classe {
font-size: 12px;
border-bottom: 1px solid black;
}

body#devoir_detail h1, body#devoir_resultats h1 {
margin-bottom: 10px;
display: inline-block;
margin-right: 20px;
}

body#devoir_detail div.date_devoir, body#devoir_resultats div.date_devoir {
display: inline-block;
font-size: 13px;
}

body#devoir_detail #lien_resultat_bouton {
float: right;
position: relative;
right: 20px;
}

body[id*="devoir_detail"] div#ordre {
position: absolute;
right: 20px;
}

body#devoir_resultats table.result_devoir {
border: 1px solid black;
width: 100%;
margin: auto;
border: 1px solid black;
border-collapse: collapse;
}

body#devoir_resultats table.result_devoir th {
height: 40px;
border: 1px solid black;
}

body#devoir_resultats table.result_devoir td {
text-align: center;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
height: 40px;
}

body#devoir_resultats table.result_devoir td:first-child, body#devoir_resultats table.result_devoir td:first-child + td + td {
text-align: left;
}

body#devoir_resultats div.detail_resultats {
padding-top: 20px;
width: 100%;
margin: auto;
display: none;
}

body#devoir_resultats div.detail_resultats p.question, body#devoir div.detail_resultats p.question {
font-weight: bold;
}

body#devoir h1, body#devoir div.exercice-bareme {
display: inline-block;
margin-right: 10px;
}

/* Optimisation d'affichage */

.aff-nb-exo {
position: absolute;
display: block;
text-align: center;
bottom: 10px;
right: 10px;
padding: 5px;
width: 150px;
color: #005DA8;
border-right: 1px solid #005DA8;
border-bottom: 1px solid #005DA8;
}

tr.req_j_exercice_regle td, tr.req_j_exercice_situation_visible td, tr.req_j_exercice_situation_connexe td, body[id*="exercice"] tr[class*="_situation"] td, body[id*="_exercice"] tr[class*="_regle"] td, tr.add_j_situation_regle td, tr.mod_j_situation_regle td, tr.mod_pub_j_devoir_passe td {
position: relative;
}

.contain-situation {
position: absolute;
top: 20px;
left: 540px;
padding: 5px;
font-size: 0.8em;
background-color: #F2F2F2;
z-index: 998;
}

tr.mod_pub_j_devoir_passe .contain-situation {
width: max-content;
left: 400px;
}

body[id*="_exercice"] [class*="_type_situation_liste"] td .contain-situation {
top: auto;
bottom: 20px;
}

/*===================================
=====================================
            Page formations
=====================================
===================================*/

#wrapper-panier a{
    color: #3498db;
   text-decoration: none;
   font-size: 12px;
}

#wrapper-panier p{
    padding:5px 10px 10px 10px;
    font-size: 12px;
}

.blocpannier img {
    cursor: pointer;
}

.commander{
    background-color: #2d2d2d;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.81);
    padding:10px 10px 10px 10px;
    cursor: pointer;
    transition: background-color 0.5s ease-in-out;
    margin-bottom: 30px;
    position: relative;
    left: 50%;
    margin-left: -66px;
}

.commander:hover{
    background-color:grey;
    color:rgba(189, 195, 199,1.0)!important;
}

.acheter{
    background-color: #2d2d2d;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.81);
    padding:10px 10px 10px 10px;
    cursor: pointer;
    transition: background-color 0.5s ease-in-out;
    margin-bottom: 30px;
    position: relative;
    left: 50%;
    margin-left: -400px;
    margin-top: 20px;
}

.acheter:hover{
    background-color:grey;
    color:rgba(189, 195, 199,1.0)!important;
}

.cp{
    opacity: 5;
    background-color: #2d2d2d; 
}

.cp img a:hover{
    cursor: pointer;
    background-color:#FFFFFF;
    color:rgba(127, 140, 141,1.0)!important;
}

.above-block{
    width: 293px;
    height: 293px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    position:absolute;
    opacity:0;
    transition: 0.4s;

}


.above-block:hover{
    opacity: 6;
    cursor:pointer;
    transition: 0.4s;
}

.above-block h3{
    padding-top: 30px;
    padding-bottom:20px;
}

.above-block p{
    line-height: 20px;
}

.inner-product{
    width:293px;
    height: 293px;
    display: inline-block;
}

.inner-product1{
    width:920px;
    height: 316px;
    display: inline-block;
}

.above-block1{
    width: 920px;
    height: 273px;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    position:absolute;
    opacity:0;
    transition: 0.4s;

}

.above-block1:hover{
    opacity: 6;
    cursor:pointer;
    transition: 0.4s;
}

.exercice-suivant.bouton-haut a {
    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
}

body#espace_professeur .grid_4 {
    display: block;
}

body#gestion_situation .cadre-situation a[href*="situation_detail_ext"] {
color: #4caf4f;
}

.question-complement {
font-weight: bold;
color: #F8B333;
}

.question {
color: #005DA8;
font-size: 1.1em;
font-weight: bold;
}

.green {
color: #4CAF50;
}

/* Scroll horizontal */

.outer {
position: relative;
width: 100%;
}

.inner {
overflow-x: scroll;
overflow-y: visible;
width: 1200px;
}

.outer table {
table-layout: fixed;
}

/**/

summary:focus {
outline: none;
}

#add_j_situation_regle, #mod_j_situation_regle {
height: 600px;
}

input[type="checkbox"] {
zoom: 2;
position: relative;
top: -2px;
}

.btn.stripe {
display: flex;
justify-content: center;
align-items: center;
background-color: #005DA8;
color: white;
padding: 10px 25px;
border-radius: 4px;
width: 150px;
cursor: pointer;
}

.btn.stripe:hover {
background-color: #F8B333;
}