html { height:100%; width:100%; margin:0; padding:0; font-size:100%; }
body { width:100%; box-sizing: border-box; min-height:100vh; margin:0; padding:0; background-color:#eee; /*background-image:url('interface/bg01.svg'); */ font-family:Helvetica,Arial,sans-serif; color:#444; 
display:flex; flex-direction:column; }
a { color:#a52; }
a:hover, a:focus { color:#831; text-decoration:underline; }
a:active { color:#2a9; }
img { border:0; max-width:100%; }
video, iframe { max-width:100%; }
h1, h2, h3, h4 { font-family: Garamond,serif; }
.red { color:#C00; }
.erreur { color:#C00; }
.erreur input {border:1px solid #E00;}
.center { text-align:center; }
h2 { font-size:3rem; margin-bottom:0.25em; }
h3 { font-size:2rem; margin-bottom:0.25em; }
h4 { font-size:1.5rem; margin-bottom:0.25em; }
i { color:#666; }
.statut0 { opacity:0.6; }
section { background-color:#fff; padding:1rem; margin:1rem 0; border-radius:0.5rem;  }
section h3 { margin-top:0;}

/* FORMULAIRES */
textarea { padding:0.5em; font-size:1rem; }
input { padding:0.5em; font-size:1rem; }
label { display:block; margin:1em 0 0.5em 0; font-weight:bold; }
input.case { display:none;  }
input.case+label { border:1px solid #888; color:#888; display:inline-block; padding:0.25em 0.5em; margin:0 0.5em 0.5em 0; cursor:pointer; border-radius:4px; }
input.case:checked+label { background-color:#fff; border:1px solid #333; color:#333; }
input.case+label:hover,input.case+label:focus { border:1px solid #831; color:#831;  }
input.case+label:active { background-color:#2a9;  }

/* HEADER */
#header { padding:2em; margin:1.5rem 0; /*border-bottom:1px solid #048;*/ text-align:center; }
#header h1 { font-size:4rem; margin:0;}
#header h1 a { text-decoration:none; color:inherit; }
#header span { font-size:1.5rem; color:#666;}


/* NAV */
nav { display:flex; flex-wrap:wrap; justify-content:center; margin:0.5rem 0;}
nav a { padding:0.25em 0.5em; color:#333; text-decoration:none;  }
nav a.ici { text-decoration:underline;  }
nav a:hover, #navtop a:focus { text-decoration:underline; color:#222; }
nav a:active { color:#b64;  }

/* MAIN */
#main { max-width:960px; margin:0 auto; padding:0 2%; flex:1; }
#content { max-width:720px; margin:0 auto; }
.article {  padding:20px; margin-bottom:30px; border:1px solid #DDD; border-radius:8px; background-color:#fff; text-align:left; }
.article a { color:#444; text-decoration:none; /*display:block;*/ }
.article a.icone { display:inline-block;}
.article a.icone:hover, .article a.icone:focus { opacity:0.8;}
.article a.icone:active, .article a.icone:focus { opacity:0.6;}
.article a:hover, .article a:focus { color:#224; text-decoration:underline;}
.article a:active { color:#44F; text-decoration:none;}
.article h2 { margin:0; border-bottom:1px dotted #ddd; padding-bottom:0.25em; margin-bottom:0.25em;}
.article h2.titre_small { font-size:1.75rem;}
.article .content { text-align:justify; line-height:1.5; overflow:hidden;}
.article .content.col1 { column-count:1; }
.article.grand .content { column-count:1; }
.article .lasuite {text-align:right; font-style:italic; margin:0;}
.article .lasuite a {display:block; text-decoration:underline; padding:1em 0;}
.article .lasuite a:hover, .article .lasuite a:focus {color:#224; font-weight:bold;}
.article .lasuite a:active {color:#44f;}
.article .date { text-align:right; font-size:0.875rem; margin:0;}

.commentaires { width:80%; margin:5em auto 1em auto; font-size:0.875rem; }
.com { margin:1em 0; border-top:1px dotted #444; }
.com .by { text-align:right; font-style:italic;}
.com .repondre { margin-left:0.5rem; }
.com .repondre { text-align:right; font-size:0.875rem; text-decoration:underline; cursor:pointer; }
.com .repondre:hover, .com .repondre:focus { color:#06c;  }
.com .repondre:active { color:#039; }


.okko {float:left; margin-right:1em;}
.art .okko {display:inline-block; float:none; }

/* FORMULAIRES*/
#main textarea { width:calc(100% - 1.25rem); }
#main fieldset { margin:2em 0 1em 0; }
#main legend { font-weight:bold; }
#editeur_texte {
    height: 200px; 
    border: 1px solid black; 
		border-radius:3px;
    padding: 5px; 
}

/* FOOTER */
#footer { background-color:#444; border-top:1px solid #333; padding:1.5rem; color:#fff; text-align:center; }
#footer_content { max-width:960px; margin:0 auto; }
#footer a { color:#fff; text-decoration:none; }
#footer a:hover, #footer a:focus { text-decoration:underline; }
#footer a:active { color:#2a9 }

/* mobiles ou pas */
.nomobile { display:block; }
.yesmobile { display:none; }

/* COMMENTAIRES */
.commentaire { display:flex; margin:0.5rem; gap:0.5rem; }
.commentaire .tibouton { cursor:pointer; color:#fff; width:24px; height:24px; border:1px solid #444; background-color:#888; border-radius:4px; text-align:center; line-height:22px; user-select:none; 
}
.commentaire .tibouton.yes.statut { background-color:#3a3; cursor:default; }
.commentaire .tibouton.no.statut { background-color:#d33; cursor:default; }
.commentaire .tibouton:hover { border-color:#444; background-color:#222; }
.commentaire .tibouton:active { border-color:#222; background-color:#ddd; }
.commentaire p { margin:0; }

/* MEDIA */
@media screen and (max-width: 1024px) {
	.nomobile { display:none; }
	.yesmobile { display:block; }
	#main { width:auto; }
	#nav { width:auto; overflow:hidden; transition:0.5s; height:auto;}
	#content {width:auto; }
	#footer_content { width:auto;}
}
@media screen and (max-width: 640px) {
	#header h1 { font-size:3rem;}
	h2 { font-size:2rem; }
	h3 { font-size:1.5rem; } 
	h4, .article h3.titre_small { font-size:1.25rem; }
	#header span { font-size:1.5rem;}
	.article .content { column-count:1; }
}
@media screen and (max-width: 480px) {
	#header h1 { font-size:2rem;}
	h2 { font-size:1.5rem; }
	h3 { font-size:1.25rem; }
	h4, .article h3.titre_small { font-size:1.125rem; }
	#header span { font-size:1.25rem;}
}