/*  ===========  Disposition par défaut, mobile first ================*/
 
/*  ===============  Polices ==================*/
body {	font-size:1em;
}
@font-face {
    font-family: 'Babas Neue';
    src: url('webfonts/BebasNeue-Regular.eot');
    src: url('webfonts/BebasNeue-Regular.eot?#iefix') format('embedded-opentype'),
         url('webfonts/BebasNeue-Regular.woff2') format('woff2'),
         url('webfonts/BebasNeue-Regular.woff') format('woff'),
         url('webfonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
* {font-family: Arial, Helvetica, sansserif;  }
p.topo { font-family : arial;}
h1, h2 {font-family: 'Babas Neue';}
 p.topo:first-letter {font-family: 'Babas Neue';}
img{max-width : 100%;}
/* ====================== couleurs ===============
rose 1819 pipette : #c5aabc
vert 1819 pipette : #5c7f74
*/
/*  ===========structure / composition ============     */
#contenu{ 
	width : 90%;	
	margin:auto;margin-top: 15px; margin-bottom: 15px;
	padding:10px 25px;
	Background-Color: #c5aabc;   /*fond rose  */
}
.break {	clear:both;}
.footer {
	width:96%;
	margin: 0 auto;
	text-align: center; /*  
	border-top-style : solid;
	border-width: thin;*/
	font-size:0.8em;
}
.banner {
	margin: -20 15px 0 0;
	padding: 0 ;
	background-repeat: repeat-x;
	width: 97%;
}
/*   .menu {text-align:right;}    background-image: url(images/AT-Dax3.gif);  img.logo{max-width : 100%;}

*/
#logo {	 width: 25%;
	height:120px;
	background-repeat: no-repeat;
	background-position: left;
	margin: 2px;
	padding: 0px;
	float: left;
}
/* .menu{ 	float: right; }*/
.suitedelogos{
margin : auto;
}
/*  liens verts
A:LINK{Color: #c5aabc;Text-Decoration: none;}
A:VISITED{Color: #c5aabc;Text-Decoration: none;}
A:HOVER{Color: #c5aabc;Text-Decoration: underline;}
A:ACTIVE{Color: #0080C0;}*/
ul#menu li a {	text-decoration:none;border-bottom:6px solid #5c7f74;	color: #000;}
#illustr a, #generique a{text-decoration : none; border-bottom-style : dotted;border-width :2px;} 
/*     menu   */
ul#menu {
	padding: 0px;
	list-style-type: none;
	text-align: right;
	margin : 0 auto;
	line-height: 25px;
}
ul#menu li{
	letter-spacing: 1px;
	text-decoration:none;
	font-size:0.9em;
	color: #000;
	padding-right: 1px;
	display: inline;	
}
ul#menu li a {
	text-decoration:none;border-bottom:6px solid #5c7f74;
	color: #000;
}
ul#menu li a:hover{
	text-decoration: none;
	
	font-weight: normal;
}
ul#menu li a:active {
	color: #2F60A3; 
}
#menu  #en-cours a{
	border : 2px solid #f7941d;
	border-bottom:0px solid #2cbbe1;
	border-top-left-radius:0.5em;
	border-top-right-radius:0.5em;
	padding:0 0.2em  ;
	color: #000;
	font-variant : small-caps;
}
#menu  #en-cours a {display : none;}
/*        box           */
#box{ /* background: #dda; */
  z-index: 3;
   position: relative;
  width: 98%; 
 /* -moz-border-radius: 4px;  border-radius: 4px;*/
  padding: 0.2em 0.5em;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #ffa;
  line-height: 1.5;
  margin: 3px auto;
}
#box:before,  #box:after{
  z-index: -1;
  position: absolute;
  content: "";
 bottom: 15px;
  left: 15px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
#box:after{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 15px;
  left: auto;
}
.arrondie {/* 
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;*/
}
/*  ======================= textes ==========p {text-align: justify;}==========     */
p,h1 ,h2, td{ padding: 0; margin : 0;}
em {font-style : italic;}
h1 {
	margin : 5px 0 15px 0;
	font-size: 1.5em;
	text-align: center;
	text-transform: uppercase;
}
h2 {
	margin : 6px 0 3px 0;
	font-size: 1.1em;
	color: #5c7f74;
	text-align: center;
}
.petit {font-size : 0.8em}
.barré {text-decoration : line-through;}
.it {font-style : italic;}
.pcap {font-variant : small-caps}
.rouge {color : red}
.genre{font-variant : small-caps ;color:#43266c; font-weight : bold}
p{	/*  font-family : Georgia;  */
	font-variant-ligatures: discretionary-ligatures; 
	font-variant-numeric: oldstyle-nums;
	-moz-font-feature-settings : "liga=1","clig=1","dlig=1","hlig=1","rlig=1","hist=1", "onum=1",,"calt=1","frac=1";
	-moz-font-feature-settings: "swsh=2";
	font-variant-numeric: ordinal;
	-moz-font-feature-settings: "ordn=1";
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
	
}
.topo , .p1 {  

	background-color:white;
	text-decoration: none;
	font-weight: lighter;
	padding: 10px;
	font-family : Georgia; font-family: Arial, Helvetica, sans-serif;
	text-indent: 0px;
	line-height: normal;
	text-align: justify;
	border:  1px  #FFCC33;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
	margin-bottom: 0 0 6px 0;
}

p1:first-letter, p.topo:first-letter {		/* La première lettre de chaque paragraphe */
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	font-size: 3.6em; /* Ecrit 3x gros que la normale            */
	font-size-adjust: none;
	font-stretch: normal;
	-x-system-font: none;
	color:  #43266c;
	float: left;
	padding-right: 10px;
	padding-top : -5px;
	margin-top: 0; /*La première lettre de chaque paragraphe */
}
.car-icon {color:#43266c; 
font-size : 3em;
font-weight:bolder;
font-stretch:expanded;}
.citation ,p.citation{ 	
	font-family: Georgia,"Times New Roman", Times, serif; 
	font-size: 1em; 
	text-align:right ; 
	font-style:italic; 
	margin-left : 20;
}
.citation:before , .citation:after{
 content: "\201C\0020"; 
 color : #5c7f74;
 font-size: 1.6em;
 font-weight: bold;
 font-family: Georgia, Times, "Times New Roman", serif;
}
.citation:after { content: "\201D"; font-size: 1.1em;}
/* =============================   Disposition par défaut, mobile first =================================*/
#illustr{
	float: none ;
	width: auto;
	margin: 2px;
	text-align: right;
}
#illustr p{ margin-right:10px;text-align:center;}
#generique{
	width:auto;
	text-align : right;
	margin: 2 px;
	padding:10px;
	Font-Style: italic;
	Font-Size: 0.9em; 
}
/* ======================== media queries ===================================================      */
/* max-width pour faibles ,résolutions     */
@media screen and (max-width: 480px) {
#logo {	width: 70px;height:60px;}
}
@media only screen and (max-device-width:640px) {
 body { font-size:1.2em;} 
}
/* min-width  pour écrans plus larges */
@media screen and (min-width: 640px) {
	#generique {width:auto;margin-left: 0px;}
	#illustr {float : left; 	width:420px;}
	#illustr p{ text-align:right;}
	h1 {font-size :2.5em; }
	h2 {font-size :1.8em;}

}
@media screen and (min-width: 800px) {
	#generique p{margin-left: 440px;width:auto;}
	.columns {
	  -webkit-columns: 2;
	  -moz-columns: 2;
	  columns: 2;
	  -webkit-column-gap: 1em;
	  -moz-column-gap: 1em;
	  column-gap: 1em;
	  -webkit-column-rule: 0.1em solid #777;
	  -moz-column-rule: 0.1em solid #777;
	  column-rule: 0.1em solid #777;
	}	
}
 @media screen and (min-width:1000px)  {
 body {width : 960px;margin:auto;}
}
 @media print  {
 #box:before,  #box:after {display : none;}
}