:root {
    --fond: #fff;
    --text: #000;
    --link: #a98467;
    
    --fontMenu: #dde5b6;
    --textMenu: #6c584c;
    
    --cadre: #a98467;
}

html {
    height: 100%;
}

body {
    margin:0 auto 0 auto;
    width:100%;
    font-family:Verdana;
    font-size: 13px;
    line-height: 2em;
	cursor : default;
	color :var(--text);
    position: relative;
    min-height: 100%;
    background-color: beige;
}

a:link, a:visited, a:active {
	color :var(--link);
	text-decoration : none;
	cursor : pointer;
}

a:hover {
	color :var(--link);
	text-decoration : underline;
	cursor : pointer;
}

header {
    text-align: center;
    vertical-align:middle;
    font-size:15px;
    top:0;
    left: 0;
    right: 0;
    line-height: 3em;
    z-index: 99;
    background-color:var(--fontMenu);
    padding: 5px;
    color:var(--textMenu);
}
header a:link, header a:visited, header a:active, header a:hover {
    margin: 5px;
    padding: 5px;
    border-width: 1px;
    border-style:solid;
    border-radius: 10px;
    color:var(--textMenu);
	text-decoration : none;
}


h1 {
	font-size : 17px;
	text-align:center;
}

h2 {
	font-size : 15px;
	text-align: left;
}

h3 {
	font-size : 13px;
	text-align: left;
}

.cadre_site {
    width: 90%;
    
	margin : 0px auto 0px auto;
}

.posts {
    text-align: center;
    margin: 15px 0;
}

.post {
    margin: -20px 0 10px 0;
    padding: 10px 20px;

    box-shadow: 0px 0px 5px #CCC;
    background-color: #fff;
    border-radius: 10px;
}

.polaroid {
    display:inline-block;
    margin:15px;
    padding:20px;
    text-align:center;
    width: min-content;
    box-shadow: 0px 0px 5px #CCC;
    background-color: #fff;
}

figcaption {
    font-family: 'Nanum Brush Script', cursive;
    font-size: 22px;
    color: darkgreen;
}
figcaption a:hover {
	color :darkgreen;
	text-decoration :dashed;
	cursor : pointer;
}

p {text-align: justify;}

.cadrePhoto {
    border-width: 1px;
    border-style: solid;
    border-color:#ccc;
}

.photo {
    max-width:90vw;
    max-height:90vh;
}

.zoom:active {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5); 
}
.twAudessus {
    width:100%;
    height:100%;
    position:fixed;
    z-index:100000;
    top:0;
    left:0;
    display:none;
    background:rgba(0,0,0,0.1);
    backdrop-filter: blur(1px);
}
.twAudessus a {
  display:table-cell; 
  vertical-align:middle; 
  text-align:center;
}
.twAudessus img {
    max-width:90vw;
    width: auto;
    max-height:90vh;
    text-align:center;
    background:white;
}
/* Slecteur « target pour afficher l’image » */
.twAudessus:target {display: table;}


.cadre_droite {
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	border-left: solid 1px #009900;
	background-color: #DBFFD8;
}

.cadre_gauche {
	padding : 5px 5px 5px 5px;
}

.cadre_cadre_haut {
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	border-top: solid 2px #009900;
	border-left: solid 2px #009900;
	border-right: solid 2px #009900;
	background-color: #B3FFB1;
	font-size: 14px;
}

.cadre_cadre_bas {
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	border-bottom: solid 1px #009900;
	border-left: solid 1px #009900;
	border-right: solid 1px #009900;
	background-color: #B3FFB1;
	font-size: 13px;
}

.fond_titre_active {
	background-color: #75D96A;
}

footer {
    text-align: center;
    margin: 0;
    z-index: 99;
    padding: 5px;
    left: 0;
    right: 0;
    bottom: 0;
    color:var(--textMenu);
}
footer a:link, footer a:visited, footer a:active, footer a:hover {
    color:var(--textMenu);
	text-decoration : none;
}


@media all and (max-width:768px) /* MOBILE */
{
    .photo {
        max-width:200px;
        max-height:200px;
    }
}

@media all and (min-width:768px) /* ORDINATEUR */
{
    .photo {
        max-width:250px;
        max-height:250px;
    }
}