/* ------------------------------------------------------------------------- */
/*                       Règles générales pour la page                       */
/* ------------------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	}

body{
	margin: 0;								/* marge extérieure des éléments du corps de la page */
	font-size: 1em;								/* taille de base de la police */
	line-height: 1.20;								/* hauteur de ligne de texte */
	color: black;									/* couleur de base du texte */
	font-family: 'Helvetica', sans-serif;
	background: linear-gradient(to right, white,white, white, white);
	counter-reset: num_exo;							/* mise à zéro du compteur num_exo */
	}

/* ------------------------------------------------------------------------- */
/*                    Mise en forme des sélecteurs usuels                    */
/* ------------------------------------------------------------------------- */
p {
	margin: 15px 10px;
	text-align: justify;
	}
	
code {
	font-size: 1em;
	font-family: monospace, Courier New;
	font-weight: bold;
	}

pre>code {
	font-weight: normal;
	}

strong {
	text-decoration: none;
	font-weight: bold;
	color: black;
	}

em {
	font-style: italic;
	}

sub {
	font-size: 0.8em;
    vertical-align: -0.5em;
	}

sup {
	font-size: 0.8em;
    vertical-align: 0.5em;
	}

* {
    box-sizing: border-box;
}

/* Style the body */
body {


    font-family: Arial;
    margin: 0;
}
/* Header/logo Title */
.header {
    padding: 10px;
    text-align: left;
    background:linear-gradient (white,blue);
    color: white;
}
.left { float:left; margin:0 5px 0 5px; } 



/* Style the top navigation */
nav{
    width:100% ;
    background-color:#8d8f9a ;
}
/* on utilse  "">  "vpour n'utilser que  la  liste ul qui est  un efnat de nav */
nav >ul{
    margin: 25px  ;
    padding:  0px ;
}
/* on enlève les puces devant  devant tous les éléments li
 * devant apprtenant à notre élément nav */
nav  li{
    list-style-type:none ;
    } 
  /* pour aligner  tous les li   qui representent  les onglets  du menu */
     nav > ul > li{
       float:  left ;
       position: relative ;
    }
  /* un hack css clearfixe très connu */
  nav > ul::after{
    content:" " ;
    display: table ;
    clear: both ;
  }
    .submenu {
        display: none ;
    }
    /* on rend invisible  la case à cocher  */
    nav input[type=checkbox]{
        display:none ;
    }
    nav Label{
        display: none;
    }
    nav  a{
        display: inline-block ;
        text-decoration: none ;
    }
   nav > ul > li > a{
      padding: 20px  30px ;
      color: #FFF ;
   }
  /* modification du padding pourr  ajuster bordure sousmenu le menu avec la soutisµ  avec hover */
    /* on cache le bouton  menu mobile */
    nav >ul > li:hover  a{
      padding: 20px  30px  20px  30px ;
    }
    .menu-mobile {
                    display: none  ;
    }
    /* on s'occupe des sous menus , au passage de la souris le sous menus apparait avec hover
    * z index  elevé pour que le sous menu soit en dessus de la page */
    nav li:hover  .submenu{
      display:inline-block ;
      position:absolute ;
      top: 100% ;
      left: 0px ;
      padding: 0px ;
      z-index:  10000;
    }
 /* amélioration des sous onglets   avec une bordure*/
    .submenu li{
      border-bottom: 1px   solid  #CCC ;
    }
    /* mise en forme des liens en ajoutant un padding quichange  taille et  couleur du texte*/
     .submenu li a{
      padding: 20px  30px ;
      font-size:  15px ;
      color: white  ;
      width: 300px ;
    }
    .menu-html:hover{
      border-top: 5px  solid  #626f77;
      background-color: RGba(98,111,119);
       }
        .menu-css:hover{
      border-top: 5px  solid  #626f77;
      background-color: RGba(98,111,119);
       }
        .menu-js:hover{
      border-top: 5px  solid  #626F77;
      background-color: RGba(400,400,400,0.15);
       }
        .menu-contact:hover{
      border-top: 5px  solid  #626f77;
      background-color: RGba(400,400,400,0.15);
        }
     .menu-html   .submenu {
      background-color: #404142;
     }
     .menu-css    .submenu{
      background-color:#404142;
     }
     .menu-js     .submenu{
      background-color:#404142;
     }
     .submenu  li: a{
      color: #EEE ;
      
      }
      .menu-html  .submenu li:hover{
        background-color:RGB(210,77,60);
      }
       .menu-css  .submenu li:hover{
        background-color:RGB(000,11,200);
       }
       .menu-js .submenu li:hover{
        background-color: RGB(200,165,75);
       }
       /* lorsque la case est cochée le menu s'inscrit en entier */
       nav  input[type=checkbox]:checked ~ ul {
        display: block ;
       }
       /*on modifie le style du menu pour le responsive*/
@media screen and (max-width:780px ) {
          .menu-mobile {
          display:block ;
          color: #FFF ;
          background-color: #4F525E;
          image:center ;
          padding: 12px 0px ;
        }
        nav  ul{
          display: none ;
        }
         nav  ul  li , nav  ul  li  a{
              width:100% ;
              image: center ;
        }
        nav  ul  li  a, nav  ul  li:hover a{
               padding: 10px 0px 10px 0px;
        }
        nav  li:hover .submenu{
                display: block ;
                position: static ;
        }
}
a:link
{
text-decoration:none;
}
:/* Style  tableau  information */ 
table.tftable. {font-size:12px;
color:#333333;
width:100%;
border-width: 0px;
border-color: # white;
border-collapse:collapse;
}   
table.tftable  th {f
font-size:12px;
background-color:#B0C4DE;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
text-align:left;}
table.tftable tr {background-color:#ffffff;}
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
table.tftable tr .hover {background-color:#ffff99;}

/* Style tboite  les defis*/
 #corps{
    background:white;
}
#presentation{
	background-image:url("css/Images_css/index_pourqui.svg");
}

#bouton {
    color: purple;
    background-color: pink;
    border: 0px;
}
#bouton:hover {
    color: pink;
    background-color: purple;
}
#box{
    position: fixed;
	top: 220px;
	left: 0px;
	display: none;
	background: white;
	width: 440px;
	height: 500px;
	margin: 100px auto 0 auto;
}
#titre-box{
	position: absolute;
	width: 300px;
	height: 22px;
	color: black;
	font-size: 20px;
	background: #e0e0e0;
	margin: 20px 0 0 20px;
}
#croix{
	width: 19px;
	height: 19px;
	float: right;
	margin: 8px 12px 0 0;
	border: 0px;
	background: white;
}
#croix:hover{
	border: 0px;
	background: url(croix.png);
	cursor: pointer;
    background: #e0e0e0;
}
#image-box{
	position: absolute;
	width: 100px;
	height: 100px;
	margin: 70px 0 0 35px;
	background: white;
}
#texte1-box{
	position: absolute;
	width: 235px;
	height: 120px;
	margin: 70px 0 0 150px;
	background: #e0e0e0;
	float: right;
}
#loupe{
	width: 22px;
	height: 22px;
	margin: 176px 0 0 117px;
	border: 0px;
	background: white;
}
#loupe:hover{
	border: 0px;
	background: url(loupe.png);
	cursor: pointer;
    background: #e0e0e0;
}
#texte2-box{
	position: absolute;
	width: 365px;
	height: 70px;
	margin: 10px 0 0 35px;
	background: #e0e0e0;
}
/* Style the onglet bar links */
#tabbed_box 
{
    margin: 0px auto 0px auto;
    width:150px;
}            
        .tabbed_box h4 
{
    font-family:Arial, sans-serif;
    font-size:25px;
    color:#ffffff;
    letter-spacing:-1px;
    margin-bottom:10px;
}
.tabbed_box h4 small 
{
    color:#e3e9ec;
    font-weight:normal;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    position:relative;
    top:-4px;
    left:6px;
    letter-spacing:0px;
}
.tabbed_area 
{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}            
         ul.tabs 
{
    margin:0px; padding:0px;
}
 
ul.tabs li 
{
    list-style:none;
    display:inline;
}            
      ul.tabs li a 
{
    background-color:#464c54;
    color:#ffebb5;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #464c54;
}
 
ul.tabs li a:hover 
{
    background-color:#2f343a;
    border-color:#2f343a;
}
 
ul.tabs li a.active 
{
    background-color:#ffffff;
    color:#282e32;
    border:1px solid #464c54;
    border-bottom: 1px solid #ffffff;
}
.content 
{
    background-color:#ffffff;
    padding:10px;
    border:1px solid #464c54; 
}
 
#content_2, #content_3 ,#content_4{ display:none; }
ul.tabs 
{
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
/* Style tboite reponse  auw quatre exercices*/
#tabbed_box 

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
    display : inline
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
    display : inline;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 25%;
    background-color:#E6E6FA;
    padding: 20px;
}

/* Main column */
.main {
    flex: 75%;
    background-color: white;
    padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
    background-color: white;
    width: 100%;
    padding: 20px;
}
strong {
   font-weight: bold;
}
/* Footer */
.footer {
    padding: 5px;
    text-align: center;
    color:white;
    background: #424558;
    background-color:#424558;
    
}
/*   Executer   les programmes en python  */
div[class*="programme"] {
	margin: 15px;
	clear: both;
	}

div.a_executer{
	width:100% ;
	display: flex;
	flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
	}

button.runner{
	width:100%;
	padding-bottom: 0px;
	font-size: 1em;
	font-weight: bold ;
    color:#C0C0C0;
	background:#444647 ;
	border-radius: 0 0 0px 0px;
	cursor: pointer;
	}

div.execution{
	width:100% ;
	box-sizing : border-box;
	min-height: 100px;
	margin: 10px auto;
	background-color: #ffffff;
	border: 2px solid #e0e0e0;
	border-radius: 0px;
	box-shadow: 0 0 0px #010101;
	}

pre.sortie {
	font-family: monospace, Courier New;
	margin: 15px;
	}

div.tortue{
	margin-top: 20px;
	background-color: #ffffff;
	border-radius: 0 0 0px 0px;
	}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column;
    }
}


.bouton_submit{
 background-image:url(Images_css/essai.svg);
	width: 46px;
	height:29px;

}
// Le bandeau cookie
.cookie-banner {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  background-color ="black";
  &.active {
    display: block;
  }
}

// Overlay de la boite de dialogue
.cookie-inform-and-ask {
  background-color:#424558;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;

  &.active {
    display: block;
  }

  // La vraie boîte de dialogue
  .cookie-dialog {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
				background-color:#424558;
  }
}