/* ==============================
Code CSS du site : creationsdefans.org
Auteur : Alixe

Charte graphique :
================ */
p, h1, h2, h3, h4, h5, h6, td, div, span, a, ul, ol, li, header, div.col-7.h3, .h3, .h4
    {
--colorP1:#2B579A;
--colorP2:#4177CA;
--colorP3:#2B579A;
--colorP4:#779ED9;
--colorP5:;

--colorS1:#779ED9;
--colorS2:;
--colorS3:;
--colorS4:;
--colorS5:;

--colorGrisC: #bbbbbb; /*gris clair*/ 
--colorGrisF: #575757; /*gris foncé*/   
--colorBlanc: #FFFFFF; /*blanc*/ 
}


 ===============================*/
 

/*Couleurs communes à toutes les sections*/
--colorGrisC: #bbbbbb; /*gris clair*/ 
--colorGrisF: #575757; /*gris foncé*/   
--colorBlanc: #FFFFFF; /*blanc*/     


/*police du site*/
body{
		font-family:   candara, calibri, segoe, "segoe UI", optima, "Arial sans serif";

        }


/* Largeur du texte principal
===============================
La largeur du texte principal est réduite sur les grands écrans pour confort de lecture. 
Elle doit également prendre en compte la largeur de la barre verticale à gauche (250px) pour que celle-ci ne glisse pas au dessus
Par contre, la barre de sommaire à droite doit glisser au-dessus du <bd-content> si l'écran n'est plus assez large*/


/*Descendre le texte sous la barre de navigation bloquée en haut*/
.bd-layout{
        padding-top: 150px;
    }
	
	
/*largeur zone principale en fonction de l'écran (pas trop large, même si xxl*/

@media (min-width:768px) {
.container, .container-lg, .container-xl, .container-xxl {
	max-width: 750px;
    }
}

@media (min-width:992px) {
.container, .container-lg, .container-xl, .container-xxl {
	max-width: 900px;
    font-size:15px;
    }

}

@media (min-width:1200px) {
.container, .container-lg, .container-xl, .container-xxl {
	max-width: 1100px;
    }
}


/*BARRES NAVIGATION   ===========*/


/*Accès aux autres sections, fixée en haut
----------------------------------------------*/
@media (min-width: 768px){
    .navbar-expand-md {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
      flex-flow: row nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      flex-wrap: nowrap;

    }
}    
    
/*Couleur de la barre*/
.bd-navbar {

        background-image: url("../images/fond.jpg");
        background-repeat 	 : repeat-x;
        box-shadow:none;
        }


/*en colonne par défaut*/
.navbar-expand-md .navbar-nav {
  flex-direction: column;
}

/*en ligne pour grands écrans*/
@media (min-width: 768px){
    .navbar-expand-md .navbar-nav {
        flex-direction: row;
    }
}


/*marge extérieure des flèche de navigations pour petits écrans*/
.precSuiv {
        margin-left:30px;
        margin-right:30px;
}



/*Contenu de la section, fixée à gauche
----------------------------------------------*/

.navbar.fixed-left {
  top: 30;
  left: 0;
  right: 0;
  width: auto; /* Set the width of the sidebar */
  overflow-x: hidden; /* Disable horizontal scroll */
}


/*seulement pour écran >=992px*/
@media (min-width: 992px){
    .navbar.fixed-left {    
    position: sticky;
	display: block !important;
	width: 250px; 
    top: 10rem;    
    height: calc(100vh - 7rem);
    overflow-y: auto;
    }
    
    .bd-main { 
        display: grid;
        gap: inherit;
    }
    
    .precSuiv {
        margin-left:0px;
        margin-right:0px;
        }
    
   
div.d-inline-flex a {
        font-size: 0,9rem;  
        }
}

        
ul.list-unstyled li div.btn{
        text-align:left;
        }  


/*page active dans le contenu de la section*/

 .active a {
  font-weight: bold;
  font-size: 1.1rem;  
}

/*Pour le sommaire de la page*/   
div.bd-toc {
        padding-top: 50px;
        }

/*PARAGRAPHES DE BASE*/

p, form, div.col-7, div.col-5{
        color: var(--colorP1);
        }       



div.bd-intro p {
    padding-top: 1,2rem;
}

/*Partie intro*/   
     
div.bd-intro p {      
      font-size: 1.25rem;
      font-weight: 300;
      color : var(--colorGrisF);
      
}

.intro {
color : var(--colorS1);
text-align : center;
font-weight: 500;
}



/*TITRES==========================*/

h1, .h1  { color : var(--colorP3);}
h2, .h2  { color : var(--colorP2);}
h3, .h3  { color : var(--colorP3);}
h4, .h4  { color : var(--colorP2);}
h5, .h5  { color : var(--colorP3);}
h6, .h6  { color : var(--colorP2);}
  
h1{
		margin-top : 1em;
		font-weight :  bold;
		font-variant : small-caps;        
		text-align : center;
  		clear:both;
        }

h2{
        margin-top : 5%;
        margin-bottom : 2%;
        font-weight :  bold;
        font-size : 2em;
        font-variant : small-caps;      
        text-align : left;
        }

h3{
		margin-top : 5%;
		margin-left : 5%;        
		margin-bottom : 1% ;
		font-variant : small-caps;
		font-size : 20px;
		font-weight : bold;
	   }

h4{
		margin-top : 5%  ;
		margin-left : 7%;        
		margin-bottom : 1% ;
		font-size : 120%;
		}

h5{
		margin-top : 5%  ;
        margin-bottom : 1%;
        margin-left : 9%;
		font-style :  italic;
		font-size : 100%;	
		}
h6{
		margin-top : 5%  ;
        margin-bottom : 1%;
        margin-left : 11%;
		font-style :  italic;
		font-size : 100%;		
		}
        
     
 

/*  LIENS ================================*/
/*taille*/
a {font-size : 90%;}    
id a {padding-top:90px;} 

div a {font-size : 100%;} 

/*Couleur courante des liens*/
a:link	{color : var(--colorS1);}
a:visited 	{color : var(--colorS2);}
a:hover	{color : var(--colorS4) ;background : var(--colorS1);}
a:hover.transparent , a:link.transparent {background : transparent;}

/*couleur lien page active dans menu gauche*/
 .active a {
	   background: var(--colorS4);
}


/*Couleur lien dans barre top*/
a:link.navbar-brand, a:hover.navbar-brand, a:visited.navbar-brand,
.nav-link
 {
      color : #FFFFFF;;
      }	  
a:hover.nav-link {
        background :var(--colorP2);
        color : #FFFFFF;;
        }      


/*Couleur lien dans listes */
li a:link,dt a:link {color : var(--colorS2);}
li a:visited,dt a:visited {color : var(--colorS3);}
li a:hover,dt a:hover {color : var(--colorS1);background : var(--colorS4);}

/*Couleur lien dans listes titre*/
li.titre a:link,dt.titre a:link {color : var(--colorP1);}
li.titre a:visited,dt.titre a:visited {color : var(--colorP2);}
li.titre a:hover,dt.titre a:hover {color : var(--colorP1);background : var(--colorP4);}  

  
/*strong et caption*/
.strong a:link, .strong a:visited {color : var(color1);} 
caption a, caption a:visited {color : var(--colorP1);background : var(--colorP4);}


/*liens sans soulignement*/            
.list-unstyled a,  a.list-unstyled{
        text-decoration : none;
        font-size : 105%;
        }


/*lien des flèches de navigation
.nav-arrow {
background :var(--colorP5);
}      */
a:link.nav-arrow, a:hover.nav-arrow, a:visited.nav-arrow {
      color :none;
      background :white;
      }        


/*  IMAGES  ========================*/
/*image block et espacement*/
img{	                   
        display: block; 
        padding-top:0.5em; 
        padding-bottom:0.5em; } 
        
/*image en ligne sans espacement sur le côté*/
img.enligne{                
	   display: inline;
		vertical-align : top;
		padding:0em;
		}


/*liste PROCEDURE*/				
		
		.boite, .clavier, .context, .exercice, .ruban, .barre, .souris, .rapide, .regle {
			border :  solid ;	
			border-width	:2px;		
			margin-left: 2em;
			margin-bottom : 2em;
			padding : 1em;
			padding-left : 30px;
			padding-top : 35px;
			background-repeat : no-repeat;
            background-color : #FFFFFF;	
		}
	
	.clavier {color : var(--colorP2); background-image:url("../images/proc_touches.jpg");}

	.context {color : var(--colorP2); background-image:url("../images/proc_context.jpg");}		

	.boite { color : var(--colorP2); background-image:url("../images/proc_boite.jpg");}
        
        .ruban { color : var(--colorP2); background-image:url("../images/proc_ruban.jpg");}
        
        .barre { color : var(--colorP2); background-image:url("../images/proc_etat.jpg");}
        
        .souris { color : var(--colorP2); background-image:url("../images/proc_souris.jpg");}
        
        .rapide { color : var(--colorP2); background-image:url("../images/proc_rapide.jpg");}
        
        .regle { color : var(--colorP2); background-image:url("../images/proc_regle.jpg");}

        .exercice {font-family: "Courier New"; font-size : 95%;}

/*  LISTES  =======================*/


/*liste sans puce*/
.sans_puce {                         
 		list-style-type : none;
 		list-style-position : outside;
 		line-height : 1em;
 		padding-bottom : 0.1em;
 		padding-top : 0.1em;
}



/*Listes simples*/
ul, ol{
        margin-top: 0.5em; 
        margin-left : 10%;
        }
       
li      {margin-bottom : 0.5em;

        }
        
li hr   { margin:0;}

ul li, ol li {
        color : var(--colorP3);        
        }
      

li.titre {
		color:var(--colorS1);}
		

/*Listes dt-dd-dl*/



        
dl{
        border : 1px solid var(--colorS1);
        padding: 1em;        
        }
        
dt{
        font-weight :  bold;
		margin-top:0.5em	;
		}
        
dd{
        font-weight : normal;
		margin-top :0.5em	;
		margin-bottom :0.5em	;
		}        


dl.interview dd	{color : var(--colorS1);}

dl.interview hr{
border: 0.1em solid var(--colorS2);	}	

dl.interview dd	{color : var(--colorS1);}

dl.interview hr{
border: 0.1em solid var(--colorS2);}

        

/*MISE EN VALEUR  ===========================*/
/*A retirer : ex (special), nb(important), ff (q)*/

.centre, .centre p, div.text_center a	{text-align : center;}      /*groupe centré*/
.gras	{font-weight :  bold;}      /*groupe gras*/
.non_gras{font-weight: normal;}     /*non gras dans groupe gras*/
.it	{font-style : italic;}          /*groupe italique*/
.droite	{text-align : right; padding-right:0.5em;}  /*alignement à droite*/
.petit	{font-size : 90%;}          /*police plus petite*/
.retrait{margin-left:10%;}          /* retrait vers la gauche*/
.sans_retrait{margin-left:-10%;}    /*retrait négatif*/
.petit_retrait{margin-left:-11%;}   /*rerait négatif*/
.clair{clear:both;}                 /**/
.blanc{background :var(--colorBlanc);}        
.saute{padding-top:1em;}            /*padding au desus - comme si on saute une ligne*/
.espace{margin-top:2em;}            /*marge au dessus*/
.petit_espace{margin-top:0.5em;}    /*petite marge au dessus*/
.lien_discret a {text-decoration: none;}    /*lien sans souligné*/

        
.encadre{
        border : 1px solid var(--colorS1); 
        margin-bottom:1rem;    
        }

/*exemples et notes : police plus petite, marge gauche*/
.ex, .special {     
		font-size : 90%;
		margin-left : 15%;
		}

/*exemples et notes : marges quand sont dans des div */
div.ex, div.nb, div.special, div.important { 
		margin-bottom : 1em;
		margin-top : 1em;
		}
	
/*Pour éviter que les taille et mages s'ajoutent en cascade*/
div.ex p, span.ex, div.special p, span.special {
		margin-left : 0;
        color : var(--colorS1);
		}
        
ul.proc li, ol.proc li {
    color : var(--colorS3);
}       

/*quand on est dans un tableau, ne doit pas être réduit car la police dans un tableau l'est déjà*/
td.ex, td.special {	
		font-size : 100%;
		}
		
.ex, .special {color : var(--colorP2);}	

/*important : encadré et fond */
.nb, .important {	

		padding : 0.5em;
		margin-left : 6em;
		}

.nb, .important {	
		color : var(--colorP1);	
		border-left: solid  0.1em var(--colorS2);
		}	
            
/*pour les citations*/
quote, q {	
        quotes:none;
        font-size : 107%;
        color : var(--colorS2);
        font-weight :  bold;
        
		}


.strong, strong, .strong a:link, .strong a:visited {
		font-weight :  bold;
		font-size : 107%;
		}
.strong, strong,  {color : var(--colorP2);}		



        
/*LES TABLEAUX==============================*/

table{
		border-spacing : 0.5em;
        width:200px;
        margin-top : 1em;			
        border-collapse: collapse;
		text-align:left;
		}

th{
		font-weight : bold;
		text-align:center;
		}
	
td, th{
		empty-cell:show;
		border:solid;
		border-width : 0.1em;
		vertical-align:top;
		padding:0.2em;
  		}
        
caption, caption a, caption a:visited{
		margin-top : 1em;
		font-weight : bold;
  		text-decoration: none;
		}

table.petit{
		 width:90%;
		 font-size : 90%;
	 	}        
        
table, td, th{
        	border-color:var(--colorS2);
			}

table, td {
		background :var(--colorS5);
		}
	
td{
	color: var(--colorS1);	
	}

th{
	color: var(--colorS4);		
	background :var(--colorS1);
	}

        

    
/*SOMMAIRE*/

/*les caractéristiques des listes des sommaires*/
ul.sommaire, dl.interview , dl.sommaire {
      /*width:65%;*/
      }

dl.interview , dl.news{
      line-height : 1em;
      background : var(--colorBlanc);
      font-size : 90%;
      font-weight : bold;
      margin-top:0.5em;
      margin-left:5%;
      padding-bottom : 0.1em;
      padding-top : 0em;
      padding-left:2em;
      padding-right:0.5em;
      text-align:justify;		/*texte justifé*/
      list-style-type : none;
      list-style-position : outside;
      }
      

dl.interview, dl.news{width : 90%;}
		
dl.interview hr{
		margin-left:-2em;
		}

dt.strong{text-align:center;}




/*les caractéristiques des titres des sommaires et définitions*/
li.titre, dt.titre {
		margin-left:-1.7em;
		margin-right:-.4em;
		margin-top:0;
        text-align:center;
		font-size : 115%;
		line-height :1.3em;
		font-variant : small-caps;
		}
		
li.titre, dt.titre {
		background :var(--colorS3);
		color:var(--colorS1);}		
        
/*les caractéristiques des liens sous-titre des sommaires*/
ul.sommaire ul a {
		padding-left : 1em;
		font-weight : normal;
		}
        
/*TABLEAUX*/
.lg2
{width:50%;
}

.lg3
{width:33%;
}

.lg4
{width:25%;
}

.lg5
{width:20%;
}

.lg6
{width:16.66%;
}

.lg7
{width:75%;
}