@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,600,300&subset=latin,latin-ext);

:root {
  --main-bg-color: #f0f0f0;
  --text-color: #333;
  --link-color: #0066cc;
  --border-color: #ccc;
  --font-family: 'Arial', sans-serif;
}


body
{
padding:0px;
margin:0px;
font-family:ubuntu, Arimo, calibri, DejaVu Sans, Trebuchet, Arial, Helvetica, sans-serif;
font-family:'Yanone Kaffeesatz'!important;
font-family:'Open Sans',Sans-Serif!important;
font-size:18px;
background-color:#fff;
background-image: url('images/fond2.jpg');

background-attachment:fixed;
text-align:justify;
color:#fff;
}

a img
{
border:0;
}

a, .a
{
cursor:pointer;
color:#68b;
text-decoration:none;

}

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



nav
{
min-height:60px;
//height:60px;
}

#menu
{
position:fixed;
position:static;
top:0px;

background-color: none;

margin-left:auto;
margin-right:auto;
margin-top:0px;
//width:950px;
max-width:950px;

text-align:justify;

width:100%;
//padding-top:20px;
}


#menu ul
{
margin:0px;
padding:0px;
text-align:center;
}

#menu li
{
list-style-type: none;
text-indent:0px;
margin:0px;
padding:0px;
display:inline;
}

#menu li a ,.submit
{
border:0;
font-family:ubuntu, Arimo, calibri, DejaVu Sans, Trebuchet, Arial, Helvetica, sans-serif;
font-family:'Yanone Kaffeesatz'!important;
font-family:'Open Sans',Sans-Serif!important;
font-size:17px;
text-decoration:none;
color:#fff;
display:inline-block;
margin:2px;
padding:4px;
min-width:90px;
font-weight:bold;
text-shadow:   0 0 3px #AD9187,   0 0 1px #007BC8;
background-color: #008888;
background-color:#555;
border:1px solid #fc0;
border-radius:4px;



box-shadow: 0px 0px 5px rgba(0,0,0,0.05);
//box-shadow: 1px 1px 0px rgba(0,0,0,0.2), 0px 0px 0px rgba(0,0,0,0.2), -0px -0px 1px rgba(0,0,0,0.2) inset,0px 15px 0px rgba(255,255,255,0.5) inset; 
  -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;


/**/
}


.jug
{
  -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}


.jug:hover
{
transform: scale(1.1);

text-shadow:    0 0 5px #ff0;
}






#menu li a:hover ,.submit:hover
{
background-color: #bbb;

box-shadow: 0px 0px 0px rgba(0,0,0,0.3), 0px 0px 3px rgba(0,0,0,0.3), -0px -0px 1px rgba(0,0,0,0.3) inset,0px 15px 0px rgba(255,255,255,0.3) inset; 
cursor:pointer;/**/

}








button, select
{
background-color: #CCC;
border-radius:3px;
box-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 0px rgba(0,0,0,0.3), -0px -0px 8px rgba(0,0,0,0.3) inset; 
border: 1px outset #888;
}

select
{
border: 1px inset #888;
}

button:active 
{
border: 1px inset #888;
}


#CONTROLSundefined, .wzCtrl
{
background-color: #ccc;
border-radius:4px;
box-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 0px rgba(0,0,0,0.3), -0px -0px 8px rgba(0,0,0,0.3) inset; 
border: 1px outset #ccc;
}


textarea, input, .ifr
{
border:0;
border:1px solid #bbb;
//background-color: rgba(255,255,255,0.03);
//background-color: #383838;
background-color:#fafafc;
box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
border-radius:2px;

font-family:Arimo;
font-size:16px;
}

textarea
{
height:300px;
width:100%;

}

textarea:hover, input:hover
{
//background-color: rgba(255,255,255,0.05);
background-color:#FFF;
//background-color: #444;

}




ul
{
text-align:justify;
}



#entete , header
{
margin:0px;
padding:0px;
}

#entete
{

margin-left:auto;
margin-right:auto;
margin-top:0px;
//width:950px;
max-width:950px;
padding:10px;
padding-top:40px;

text-align: right;
//background-color:#fff;
//background:url('images/logo2.png');
//background: url('images/fond.jpg');

//background-repeat:no-repeat;
margin-top:00px;
margin-bottom:00px;
padding-top:-20px;

}



#emh
{
background-color: #008888;
background-color:#333;
margin-top:0px;
max-width:100%;
height: 60px;
text-align:right;
font-size:0.6em;
}













#contenu 
{
margin:0px;
margin-left:auto;
margin-right:auto;

//width:950px;
max-width:950px;
//min-height:550px;
min-height:8000px;
padding:10px;
background-color:#FFF;
background-color:#333;
margin-bottom:80px;
//background-image: url('img/fond3.jpg');
background-repeat:no-repeat;
color:#fff;
}


#bas
{
margin-left:auto;
margin-right:auto;
margin-top:0px;
//width:950px;
max-width:950px;
min-height:100px;
//height:100px;

padding:10px;
}


#bas a
{

}

footer, #bas 
{


background-color:#B89978;
background-color:#dddddd;

background-color:#333;
color:#555;
}



p
{
//text-indent: 50px;


}

.partage
{
display:inline-block;
cursor:pointer;
margin-bottom:-5px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
  -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;
}

.partage:hover
{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}



#images
{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: rgba(0,0,0,0.5);
text-align:center;
vertical-align:middle;
display:none;

  -webkit-transition: all .1s ease-in;
    -moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    transition: all .1s ease-in;

}

#image
{
height:75%;
margin-top:5%;
vertical-align:middle;
box-shadow: 10px 10px 20px #000;
border: 5px solid #fff;
}

.tia
{
color:#D70;
}

.article
{
border-bottom:1px solid #000;
padding:5px;
}


#images2
{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: rgba(20,20,20,0.9);
text-align:center;
vertical-align:middle;
display:none;


}

#image2
{

height:35%;
margin-top:5%;
}

.adim
{
display:inline-block;
padding:4px;
height:150px;
//max-width:200px;
overflow:hidden;
}

.place
{

float:right;
height:40px;
width:40px;
border: 4px dashed #888;
margin-top:25px;
margin-left:8px;
cursor:pointer;

}

.tima
{
height:48px;
margin:1px;
}

.dosim
{
float:right;
width:300px;
padding:4px;
height:500px;
overflow:auto;
background-color: #fff;
text-align:justify;

}


.photos
{
height:140px;
border: 2px solid #fff;
	  -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
margin:0px;	
padding:0px;
cursor:pointer;
}

.photos:hover
{

-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
transform: scale(1.4);
//height:180px;
//margin:0px;
box-shadow: 1px 1px 4px #000;
}


.dim
{
display:inline-block;
margin:6px;
padding:4px;
height:190px;
background-color: #fff;
text-align:center;
box-shadow: 1px 1px 4px #000;
}

.adim a
{
color:#F00;
position:absolute;
font-weight:bold;
font-size:18px;
margin:1px;
margin-top:-1px;
text-shadow: 0 0 2px #050;
}

#retour
{
background-color:#000;
background-color: rgba(0,0,0,0.5);
//background-color:#000;
position:fixed;
bottom:0px;
right:0px;
padding:4px;
display:none;
font-size:12px;
}

#retour a
{
color:#FFF;
}

.vote
{
border-radius:24px;
cursor:pointer;
display:inline-block;
border:1px solid #bbb;
padding:4px;
margin:3px;
   transition: all .2s ease-in;
}
.vote:hover
{
transform: scale(1.05);
}

#don div
{
border-radius:10px;
box-shadow:  3px 3px 8px rgba(0,0,0,1) ; 
}

#don a
{
font-weight:bold;
}

.ijug
{
  -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
}



.ijug:hover
{
transform: scale(2);
}



@keyframes blink {
   0% { opacity: 0.85 }
   50% { opacity: 1 }
   100% { opacity: 0.85 }
   }



body {
  background-color: var(--main-bg-color);
  font-family: var(--font-family);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Simplification et modernisation des styles de texte */
h1, h2 {
  color: var(--text-color);
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Utilisation de flexbox pour le layout */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  max-width: 1200px;
}

/* Boutons et liens */
button, a.button {
  background-color: var(--link-color);
  color: white;
  border: none;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover, a.button:hover {
  background-color: darken(var(--link-color), 10%);
}

/* Tableaux */
table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid var(--border-color);
  padding: 8px;
  text-align: left;
}

th {
  background-color: rgba(0, 102, 204, 0.1);
}


@media screen and (max-width: 768px) {
  .container {
    padding: 0 15px;
  }
  
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr { 
    margin-bottom: 15px;
  }
  
  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  td:before {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(data-label);
    font-weight: bold;
  }
}


#entete h2
{
font-style:italic;
font-size:36px;
color:#fff;
}
#entete h3
{
font-size:20px;
margin-top:-10px;
color:#fff;
}


 h1, h2, h3
{
color:#fff;
}

.cprog
{
border: 3px double #c90;
text-align:center;
margin:8px;
height:50px;
vertical-align: middle;
padding:4px;
padding-top:10px;
background-color:#555;
border-radius:8px;
text-align:center;
display:inline-block;
width:480px;
max-width:45%;
 transition: all .2s ease-in;
}

.cprog:hover
{
transform: scale(1.08);
box-shadow: 0 0 20px #ff0;
}