*{
margin:0;
padding:0;
}
img{
border:none;
}
html{
font-size:100%
}
.alignement{
vertical-align: top;
display:inline-block;
}
body{
font-family: arial;
color:black;
background-color:#CCC;
line-height: 160% !important;    
}
#global{
margin:0 auto;
width:1001px;
}
#site_global{
width:800px;
background-color:#ffffff;
}
#colonne_langue{
width:199px;
text-align:center;
padding-top:20px;
padding-bottom:20px;
background-color:#ffffff;
font-size:0.9em;
}
#colonne_langue a{
text-decoration:none;
color:#000000;
display:block;
margin-bottom:3px;
} 
#colonne_langue a:hover{
text-decoration:underline;
} 
#navigation_gauche{
width:800px;
margin-top:10px;
text-align:center;

}
#navigation_gauche a{
text-decoration: none;
color: #000000;
font-size: 13px;
font-weight: bold;
font-family: Verdana,Arial,Helvetica,sans-serif;
width:190px;
display:inline-block;
margin-bottom:10px;
}
#navigation_gauche a:hover{
color: #000000;
}
 
#centre{ 
width:800px;
border-left:1px solid#ccc;

}
#premier_bloc{
padding:10px 20px 10px 20px;
background-color:#000000;
}
#deuxieme_bloc{
padding:10px 20px 10px 20px;
background-color:#ffffff;
}
#troisieme_bloc{
padding:10px 20px 10px 20px;
background-color:#000000;
}
.calage{
width:150px;
margin-right:10px;
display:inline-block;
text-align:right;
padding-bottom:15px;
vertical-align:top;
}
label{
margin-top:5px;
font-size:0.7em;
margin-bottom:5px; 
}
input[type=text], input[type=email] {
padding:5px; 
border:2px solid #ccc; 
-webkit-border-radius: 5px;
border-radius: 5px;
width:315px !important;
}
input[type=text]:focus, input[type=email]:focus {
border-color:#333; 
}

input[type=submit] {
padding:5px 15px; 
background:#ccc; 
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px; 
}
input[type=submit]:hover{
background-color:#eade5a;
transition-duration:2s;
}
textarea {
padding:5px; 
border:2px solid #ccc; 
-webkit-border-radius: 5px;
border-radius: 5px;
width:315px !important;
}
textarea:focus {
border-color:#333; 
}


.petit_menu a{
background-color:white !important;
text-align:center !important;
color:#8B8B8B !important;
font-size:0.7em !important;
font-weight:normal !important;

} 
.petit_menu a:hover{
text-decoration:underline !important;
}
a.menu_petit_actuel{
color:#93AA50 !important;
text-decoration:underline; 
} 
#formulaire_contact{
margin-left:120px;
}
p{
    padding: 0;
    margin: 2px 0;
}
table tr td{
vertical-align:top;
} 

/* ---- Captcha maison (deux dés + addition) ---- */
#captcha_bloc{
margin-left:165px;
margin-top:5px;
margin-bottom:5px;
}
#captcha_img{
vertical-align:middle;
border:1px solid #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#captcha_refresh{
display:inline-block;
margin-left:8px;
padding:2px 8px;
font-size:1.4em;
line-height:1.2;
text-decoration:none;
color:#333;
background:#eee;
border-radius:5px;
vertical-align:middle;
cursor:pointer;
}
#captcha_refresh:hover{
background-color:#eade5a;
}
#captcha_reponse{
width:70px !important;
margin-top:8px;
margin-left:184px; /* place le champ juste sous la case vide de l'image */
text-align:center;
font-size:1.2em;
}
.champ_invalide{
border-color:#c00 !important;
}
/* Repli si GD n'est pas installé sur le serveur : les mêmes dés en HTML */
#captcha_des{
display:inline-block;
}
.captcha_de{
display:inline-block;
width:42px;
height:42px;
padding:3px;
margin:0 4px;
background:#fdfdfa;
border:2px solid #333;
border-radius:6px;
vertical-align:middle;
font-size:0;
}
.captcha_pip{
display:inline-block;
width:12px;
height:12px;
margin:1px;
border-radius:50%;
background:transparent;
}
.captcha_pip.plein{
background:#222;
}
.captcha_signe{
display:inline-block;
margin:0 8px;
font-size:1.6em;
vertical-align:middle;
color:#3c3c41;
}
.captcha_case{
display:inline-block;
width:38px;
height:38px;
margin-left:4px;
border:3px dashed #3c3c41;
vertical-align:middle;
}

/* ---- Pied de page : lien mentions légales / politique de confidentialité ---- */
/* Attention : #bandeau ci-dessus est l'image d'en-tête, à ne pas confondre
   avec #bandeau_cookies. */
/* Le pied de page reprend la composition du site : une colonne de 199px (la
   même largeur que #colonne_langue) puis 800px (la même que #site_global).
   Sans ce décalage, un simple text-align:center sur les 1001px de #global
   tomberait 100px à gauche du centre réel du contenu. */
#footer{
width:1001px;
margin:0 auto;
padding:15px 0 25px 0;
font-size:0.75em;
}
#footer_calage{
width:199px;
display:inline-block;
vertical-align:top;
}
#footer_lien{
width:800px;
display:inline-block;
vertical-align:top;
text-align:center;
}
#footer a{
color:#000;
text-decoration:none;
}
#footer a:hover{
text-decoration:underline;
}

/* ---- Bandeau de consentement aux cookies ---- */
/* Masqués par défaut : c'est le script de javascript.php qui décide lequel
   afficher selon le choix déjà enregistré. Évite le clignotement chez un
   visiteur qui a déjà répondu. */
#bandeau_cookies{
display:none;
position:fixed;
left:0;
right:0;
bottom:0;
z-index:9999;
background:#2b2b2b;
color:#f2f2f2;
padding:15px 20px;
font-size:0.8em;
line-height:1.5;
text-align:center;
box-shadow:0 -2px 8px rgba(0,0,0,0.25);
/* Indispensable : left:0 + right:0 donnent au bandeau la largeur de l'ecran,
   et le site n'a pas de box-sizing global (seulement *{margin:0;padding:0}).
   Sans cette ligne, le padding de 2x20px s'AJOUTE a cette largeur : le bandeau
   depasse de 40px, une barre de defilement horizontale apparait sur toutes les
   pages et la maquette centree se decale. */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#bandeau_cookies_texte{
display:inline-block;
max-width:700px;
vertical-align:middle;
text-align:left;
margin-right:20px;
}
#bandeau_cookies_texte a{
color:#eade5a;
text-decoration:underline;
white-space:nowrap;
}
#bandeau_cookies_boutons{
display:inline-block;
vertical-align:middle;
white-space:nowrap;
}
.cookie_bouton{
font-family:arial;
font-size:1em;
padding:8px 20px;
margin:4px 4px;
border:0 none;
cursor:pointer;
background:#ccc;
color:#222;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.cookie_bouton:hover{
background-color:#eade5a;
transition-duration:0.4s;
}
.cookie_bouton.cookie_oui{
background:#93aa50;
color:#fff;
font-weight:bold;
}
.cookie_bouton.cookie_oui:hover{
background:#a8c25c;
color:#222;
}

/* ---- Pastille de réouverture, en bas à droite ---- */
#cookies_pastille{
display:none;
position:fixed;
right:15px;
bottom:15px;
z-index:9998;
font-family:arial;
font-size:0.75em;
padding:6px 12px;
border:1px solid #999;
background:#fff;
color:#444;
cursor:pointer;
-webkit-border-radius: 15px;
border-radius: 15px;
box-shadow:0 1px 4px rgba(0,0,0,0.2);
opacity:0.85;
}
#cookies_pastille:hover{
opacity:1;
background:#eade5a;
}

/* ---- Vidéo externe bloquée tant que les cookies ne sont pas acceptés ----
   Le cadre reprend l'apparence du bandeau (même fond, même texte, mêmes
   boutons) mais en plus petit, posé à l'emplacement de la vidéo. */
.video_bloquee{
display:inline-block;
max-width:100%;
background:#2b2b2b;
color:#f2f2f2;
border:1px solid #444;
text-align:center;
vertical-align:middle;
padding:18px 16px;
font-size:0.75em;
line-height:1.5;
/* Indispensable : javascript.php fixe width et min-height à la taille exacte de
   la vidéo. Sans border-box, le padding (2x16) et la bordure (2x1) s'ajouteraient
   à cette largeur et le cadre déborderait de 34px sur la droite. */
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.video_bloquee_icone{
display:block;
font-size:1.8em;
color:#7d7d7d;
margin-bottom:8px;
}
.video_bloquee_texte{
display:block;
font-size:0.85em;
padding:0 30px;
margin:0 0 12px 0;
}
.video_bloquee_boutons{
display:block;
}
/* Un bouton par ligne, centré. display:table permet au bouton de rester à la
   largeur de son texte tout en acceptant margin:auto, ce que display:block ne
   fait pas (il s'étirerait sur toute la largeur du cadre). */
.video_bloquee .cookie_bouton{
display:table;
margin:6px auto;
font-size:0.95em;
padding:6px 18px;
}

/* ---- Page mentions légales ---- */
/* Le site remet toutes les marges a zero (*{margin:0;padding:0}) puis impose
   p{margin:2px 0}. Sans les regles ci-dessous, le texte legal arrive d'un seul
   bloc : titres colles aux paragraphes, puces sans retrait, et les h2/h3 du
   texte plus gros que le titre de la page (taille par defaut du navigateur,
   que la remise a zero ne touche pas).

   Les selecteurs partent de #mention_titre plutot que d'un conteneur ajoute au
   HTML : le texte est insere juste apres ce titre, donc ses elements en sont
   les freres. Cela repare aussi les pages mentions.php deja en ligne, sans
   avoir a les reecrire. La specificite d'un id l'emporte sur le p{} du site. */
#mention_titre{
font-size:1.6em;
line-height:1.3;
margin-bottom:25px;
padding-bottom:10px;
border-bottom:1px solid #ddd;
}
#mention_titre ~ h2{
font-size:1.2em;
line-height:1.3;
margin:35px 0 12px 0;
}
#mention_titre ~ h3{
font-size:1.05em;
line-height:1.3;
margin:22px 0 8px 0;
}
#mention_titre ~ p{
margin:0 0 14px 0;
}
#mention_titre ~ ul{
/* la remise a zero a supprime le retrait ET rejete les puces hors du cadre */
margin:0 0 18px 0;
padding-left:30px;
}
#mention_titre ~ ul li{
list-style:disc outside;
margin-bottom:6px;
}