/* Old cook responsive - accueil fr */
html, body, header, #centre, #droite, #gauche, nav, footer {margin: 0; padding: 0; border: 0; vertical-align: baseline;}

body {font-family: Arial, Helvetica, sans-serif; font-size: 115%; font-weight: normal; text-align: left; color: #000; text-decoration: none; background-image: none; background-color: #eed;}

/* ----------------------------- STRUCTURE ----------------------------- */
div, img {margin: 0; padding: 0; border: 0; visibility: visible;}

#assoc, #paix, #blog, #centre-txt, #cuisine, #decouv, #fb, #header, #histoire, #logo, #medieval, #rech {position: relative; visibility: visible; padding: 0.7em 3%;}
#centre, #droite, #gauche {position: relative; visibility: visible; display: inline-block; width: 33%; vertical-align: top;}
#assoc, #paix, #blog, #cuisine, #decouv, #histoire, #medieval {border: 1px solid #005;} /* bordure bleue */
#cadre {position: relative; visibility: visible; top: 0.3em; width: 95%; margin: 0 auto; padding: 0; text-align: center;}
#header {width: 98%; padding: 0.5em 1%;}
#histoire {background-color: #d3bbff;} /* bleu violet */
#logo {margin: 0 30%; padding: 0.2em 1%; background-color: #fff;}
#decouv, #assoc, #rech, #blog, #paix {margin: 1em 5%;}
#paix {background-color: #cef;} /* bleu */
#decouv {background-color: #af0;}
#medieval {background-color: #af0;} /* vert */
#cuisine {margin: 0.55em 0 0 0; background-color: #fc3;} /* orange */
#langues {position: absolute; visibility: visible; left: 75%; top: 0; width: 20%; text-align: right; margin: 0; padding: 0 0 1.1em 0;}
#blog {margin: 1em 0; padding: 1em 3%;}

/* ---------------------------- PAGE ---------------------------- */
h1, h2, p {margin: 0; padding: 0;}
h1 {font-size: 1.6em; font-weight: normal; text-align: center;}
h2 {font-size: 1em; font-weight: bold; margin: 1em 0 0.5em 0;}
#centre-txt h1, #centre-txt h2 {text-align: center;}
h2.c {text-align: center;}
p {text-align: left; font-size: 1em;}
p.copy {margin-top: 0.85em; font-size: 0.8em; text-align: right;}
#centre-txt p {padding-left: 0.85em;}
#decouv p {font-size: 0.8em;}
p.imc {font-size: 0.8em; text-align: center;}

ul, li {margin: 0; padding: 0; list-style: none;}
ul {margin: 0.6em 0 0 5%;}
li {list-style-image: url(../i/ca2.gif); padding: 0 0 0.6em 1.8%; text-align: left; font-size: 0.9em;} /* gris */

a {font-weight: bold; text-decoration: none;}
a.fd {font-weight: normal;}
a:link, a:visited {color: #005;} /* bleu sombre */
a:hover, a:active {color: #996;} /* gris */

img {display: block; height: auto; margin: 0 auto; background-color: #fff;}
#logo img {max-width: 358px;}
#langues img {display: inline-block; padding: 0 5%; max-width: 50px; background-color: #eed;}
img.drapit {display: block; max-width: 30px; margin: 0;}
img.nola {width: 25%; max-width: 120px;}

/* =============== STRUCTURE SELON RESOLUTION ================ */
@media screen and (max-width: 1099px) {
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
#centre, #droite, #gauche {display: block; width: 60%; margin: 0 auto;}
#assoc, #blog, #centre-txt, #cuisine, #decouv, #fb, #histoire, #rech, #medieval {margin: 1em 0; padding: 1em 3%;}
li {padding: 0 0 1em 1.8%; font-size: 1em;} /* gris */
#logo {margin: 0 30% 0 5%;}
#logo img {width: 90%;}
#langues img {width: 40%;}
}
@media (max-device-width: 768px) and (orientation: landscape) {
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
}

@media screen and (max-width: 439px) {
body {font-size: 80%;}
#centre, #droite, #gauche {width: 80%;}
}
@media screen and (min-width: 440px) and (max-width: 609px) {
body {font-size: 85%;}
#centre, #droite, #gauche {width: 70%;}
}
@media screen and (min-width: 610px) and (max-width: 819px) {
body {font-size: 90%;}
#centre, #droite, #gauche {width: 60%;}
}
@media screen and (min-width: 820px) and (max-width: 1099px) {
body {font-size: 100%;}
#centre, #droite, #gauche {display: block; width: 50%; margin: 0 auto;}
#assoc, #blog, #centre-txt, #cuisine, #decouv, #fb, #histoire, #rech, #medieval {margin: 1em 0; padding: 1em 3%;}
#langues img {width: 30%;}

@media screen and (min-width: 1100px) and (max-width: 1459px) {
body {font-size: 100%;}
}

@media screen and (min-width: 1960px) {
body {font-size: 140%;}
}