/*
@autor : Lewo https://miaouw.info
@date  : 2026
/* -------------------------------------------------------- GLOBAL */
@font-face {
 font-family: "boheme";
 src: url("fonts/boheme.woff2") format("woff2"),
  url("fonts/boheme.woff") format("woff");
 font-weight: normal;
 font-style: normal;
}
* {
 margin: 0;
 padding: 0;
 border: 0;
 text-decoration: none;
}
body {
 font-family: "boheme", monospace;
 font-size: 12pt;
 color: #31373a;
 background-color: #fffdf9;
}
span,
p,
ul,
ol,
table,
td,
th,
hr,
blockquote,
input,
textarea {
 margin-bottom: 1.2em;
 line-height: 1.5em;
}
img {
 max-width: 100%;
 height: auto;
}
em {
 color: #666;
}

h1,
h2,
h3,
h4 {
 font-size: 12pt;
 font-weight: normal;
}
a {
 text-decoration: none;
 color: #186e89;
}

a:hover {
 text-decoration: none;
 color: #888;
}

a:active {
 text-decoration: none;
 color: #888;
}

/* ---------------------------------------------------------- MAIN */
main {
 margin: 0 auto;
 max-width: 800px;
 width: 90%;
 padding-bottom: 3em;
 margin-top: 0.6em;
 margin-bottom: 2em;
}

/* -------------------------------------------------------- HEADER */
header.rat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .6em;
  margin-bottom: .5em;
}
header.rat a {
 color: #31373a;
}
header.rat a:hover {
 color: #186e89;
}
.cat {
 display: inline-block;
}
.cat h1 {
	color : #F9F9F9;
	display:none;
}
.cat h1 a:hover{
	color : #EEE;
}
.dog {
  float: none;
  clear: none;
}
.dog a { 
 color: #31373a;
}
.dog a:hover { 
 color: #186e89;
}
h3 {
 margin: 2em 0 1em 0;
 font-weight: bold;
}
h3:before {
 content: ":: ";
}

/* ---------------------------------------------------------- MENU */
nav ul {
 text-align: right;
 clear: both;
}
nav li {
 display: inline;
 list-style: none;
 color: #186e89;
}
nav li.be:before {
 margin-right: 7px;
 content: "/";
 position: relative;
 top: 0.1em;
 display: inline;
}
nav li.be:after {
 content: "";
 position: relative;
 top: 0.1em;
 display: inline;
}

/* ------------------------------------------------------- ARTICLE */
article {
    margin :0;
}

/* ---------------------------------------------------------- DATE */
.date {
 width: auto;
 color: #888;
}
.date h2 {
 font-size: 12pt;
}
.date h2:first-letter {
 text-transform: uppercase;
}
.heure {
 font-size: 11pt;
 color: #888;
}
.heure:before {
 content: " - ";
}
.heure_title {
 color: #888;
}
.heure_title:before {
 content: " - ";
}
/* --------------------------------------------------------- MINOU */
.minou {
 margin-left: 1.25em;
 margin-top: 0.95em;
 margin-bottom: 3em;
}
.readmore {
 text-transform: lowercase;
 text-align: right;
}
/* ---------------------------------------------------- PAGINATION */
.pagination {
 padding-top: 1em;
 text-align: center;
 font-size: 10pt;
}
.pagination a {
 color: #257725;
}
.pagination a:hover {
 color: #888;
}
.pagesur {
 color: #666;
}
.pnewer a:after {
 content: " -";
 color: #666;
}
.polder a:before {
 content: "- ";
 color: #666;
}
/* ----------------------------------------- Pagination +/- recent */
.paging {
 font-size: 10pt;
 text-align: center;
 color: #666;
}
.paging a {
 color: #408080;
}
.paging a:hover {
 color: #888;
}
/* -------------------------------------------------------- FOOTER */
footer {
 clear: both;
 border-top: 1px dashed #444;
 margin-top: 1.5em;
 color: #888;
 font-size: 0.9em;
 text-align: right;
 margin-bottom: 1em;
 padding-top: 0.3em;
 /*font-variant-caps: all-small-caps;*/
}
footer a {
 color: #186e89;
}
footer a:hover {
 color: #5e6f8e;
}

/* ------------------------------------------------------ ARCHIVES */
.archi {
 margin-left: 1.25em;
 margin-top: 0.50em;
 margin-bottom: 1.5em;
}
.archi li {
 list-style-type: none;
}
.archi li:before {
 content: "~ ";
}
.archititle {
 text-transform: lowercase;
}
.toto {
 text-align: right;
 clear: both;
}
.toto span {
 float: left;
}

/* ------------------------- mail */
.inv_mail {
 unicode-bidi: bidi-override;
 direction: rtl;
 color: #876445;
}
.arobaze {
 font-family : monospace;
 font-size : 12.5pt;
font-weight : bold;
font-style : italic;
}
.arobaze:before {
 content: "ofni.wuoaim";
 color: #876445;
 padding-left: 0.2em;
}
.arobaze:after {
 content: "tac";
 color: #876445;
 padding-right: 0.2em;
}

/* ------------------------------------------- Mise en Page divers */
.rond img {
 border-radius: 3%;
}

.noir {
 color: #101010;
}
.gris {
 color: #666;
}
.justify {
 text-align: justify;
}
.left {
 float: left;
 padding: 0.5em 1.5em 0.5em 0em;
}
.leftmo {
 float: left;
 padding: 0.5em 0.9em 0.5em 0em;

}
.right {
 float: right;
 padding: 0.5em 0em 0.5em 1.5em;
}
.rightmo {
 float: right;
 padding: 0.5em 0 0.5em 0;

}
.center {
 text-align: center;
}
.adroite {
 text-align: right;
}
.bold {
 font-weight: bold;
}
.ital {
 font-style: italic;
}
.aparte {
 font-style: italic;
 color: #888;
}
.legend {
 font-style: italic;
 color: #666;
 font-size: 0.8em;
}
.small {
 font-size: 0.8em;
}
.serif {
 font-family: serif;
}
.mono {
 font: normal 1.1em monospace;
}
.code {
 display: block;
 margin: 0 0 0 0.5em;
 text-align: left;
 color: #777;
 font: normal 0.9em monospace;
}
.author {
 font-variant: small-caps;
}
.latin {
 font: italic 1.2em "Times New Roman", Times, serif;
}
.strike {
 text-decoration: line-through;
 color: #9e9e9f;
}
.cite {
 display: block;
 margin: 0 20px 0 10px;
 padding: 0 0 0 12px;
 border-left: 10px solid #333;
 font-style: italic;
}
.imgcite {
 text-align: center;
 font: italic 0.8em sans-serif;
 color: #be0c0c;
}
.sep {
 margin: 0 auto;
}
.marge-gauche {
 margin-left: 250px;
}
.clear {
 visibility: hidden;
 clear: both;
 margin: 0;
 padding: 0;
}
.smallgris {
 font-size: 0.8em;
 color: #666;
}
.flux {
 font-size: 0.8em;
 color: #880000;
}
.smallr {
 font-size: 0.8em;
 color: #666;
}
.erase {
 background: #fffdf9 url(erase.png) repeat-x center;
 text-decoration: line-through;
}
.souligne {
 background: #fffdf9 url(souligne.png) repeat-x bottom;
}
pre {
 word-break: break-all;
 word-wrap: break-word;
 white-space: pre;
 white-space: -moz-pre-wrap;
 white-space: pre-wrap;
}
.groar {
 position: relative;
 bottom: 0.1em;
 display: inline;
}
.groarr {
 position: relative;
 top: 0.1em;
 display: inline;
}
a:hover .hu {
 position: relative;
 top: 0.1em;
 display: inline;
}
a:hover .ho {
 position: relative;
 bottom: 0.1em;
 display: inline;
}
.inclineb {
 transform: rotate(+1.5deg);
}
.inclinea {
 transform: rotate(-1.5deg);
}
/*----------------------------------------------------------- ZOOM */
.zoom {
 display: inline-block;
 width: auto;
 margin: 3px;
 padding: 3px;
 border: 1px dotted #999;
 border-radius: 5px;
 text-align: center;
}
.zoom img {
 margin: auto;
 padding: 0;
 border: none;
 opacity: 1;
 background: #666;
 filter: alpha(opacity=100);
}
.zoom a {
 text-decoration: none;
 color: #666;
}
div.zoom:hover {
 border: 1px dotted #bbb;
 background: #bbb;
}
div.zoom:hover img {
 opacity: 0.6;
 filter: alpha(opacity=50);
}
span.zoomomie:hover img {
 opacity: 0.4;
 filter: alpha(opacity=40);
}
.con a {
 border: 0px;
}
/*-------------------------------------------------- Centrer img : */
/* exemple : ![Title](/your-image-url/image.png#center) */
img[src$="#center"] {
 display: block;
 margin: 0.5em auto;
 max-width: 100%;
 height: auto;
}
img[src$="#right"] {
 display: block;
 float: right;
 max-width: 100%;
 height: auto;
}
img[src$="#left"] {
 display: block;
 float: left;
 max-width: 100%;
 height: auto;
}
/* ---------------------------------------------------- Impression */
@media print {
 main ul,
 li {
  display: none;
 }
 footer {
  display: none;
 }
 .cat h1 a[href]:after {
  content: " https://miaouw.info";
 }
}
.marron {
 color: #876445;
}
/* -------------------------------------------------------- Mentat */
.mentat {font-size:9.5pt; font-family: monospace; } 
.mentat ul, li { list-style: none; padding-left: 3pt ; }
.mentat details > summary { 
cursor: pointer; 
text-align : right;
}
.mentat details summary::marker {
  content: "+ ";
  color: #186e89;
  font-weight: bold;
}

.mentat details[open] summary::marker{
  content: "− ";
  color: #880000;
  font-weight: bold;
}
.remarque {
color : #666;
font-size:9pt;
font-style : italic;
}
.offline {
color : #d23137;
animation: offline 3s linear infinite;
}
@keyframes offline {
  0% { opacity: 0.30; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0.30; }
}
.offtxt {
  color : #888;
}
.maj {
color : #00aa00;

}
.imgsup {
color : #999000;

}
.encours {
color : #000999;
}
















/* =================== Modale de base =================== */
.miwbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);

  display: flex;
  justify-content: center;       /* centre horizontal */
  align-items: center;           /* centre vertical si possible */
  flex-direction: column;        /* pour scroll vertical si nécessaire */

  overflow-y: auto;              /* scroll si contenu trop grand */
  -webkit-overflow-scrolling: touch;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  padding: 5vh 0;                /* espace haut/bas pour scroll */
}

/* =================== Modale active =================== */
.miwbox:target {
  opacity: 1;
  pointer-events: auto;
}

/* =================== Overlay cliquable =================== */
.miwbox .overlay {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}

/* =================== Image =================== */
.miwbox img {
  max-width: 95vw;
  max-height: 95vh;              /* limite sur PC */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;

  transform: scale(0.9);
  transform-origin: center;
  will-change: transform, opacity;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  position: relative;
  z-index: 1;
}

/* Image active */
.miwbox:target img {
  transform: scale(1);
  opacity: 1;
}

/* =================== Bouton fermer =================== */
.miwbox .close {
  position: absolute;
  top: 0.5em;
  right: 0.8em;
  font-size: 2em;
  color: white;
  text-decoration: none;
  font-family: sans-serif;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}

.miwbox .close:hover {
  color: #ff5555;       /* change couleur au survol */
  transform: scale(1.2); /* agrandit légèrement le bouton */
}