/***************************
 * STYLE PERSONNALISÉ KIRBY
 * cms-et-co2.fr
 ***************************/
:root {
  --content-max-width: 1450px;
}
html:not([data-theme]), html[data-theme="dark"] {
  --palette-background: #000000;
  --palette-background-var: #0a0a0a;
  --palette-background-var2: #161616;
  --palette-background-quote: #ffffff;
  --palette-foreground: #dddddd;
  --palette-foreground-footer: #cccccc;
  --palette-foreground-footer-link: #bbbbbb;
  --palette-foreground-footer-hr: #333333;
  --palette-foreground-footer-copyright: #888888;
  --palette-background-code: #2c2c2c;
  --palette-linkcolor: rgb(246, 220, 27);
  --palette-fluo-jaune: rgb(139, 139, 42);
  --palette-fluo-vert: rgb(74, 136, 65);
  --palette-fluo-rose: rgb(160, 98, 156);
  --palette-fluo-bleu: rgb(91, 103, 159);
  --img-hover-filter: 120%;
  --img-back-to-top: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0xNSA3VjZoLTFWNWgtMVY0aC0xVjNoLTFWMmgtMVYxSDlWMEg3djFINnYxSDV2MUg0djFIM3YxSDJ2MUgxdjFIMHYzaDZ2Nmg0di02aDZWN3oiIGZpbGw9IiNmNWY1MDAiIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==");
}
html[data-theme="light"] {
  --palette-background: #ffffff;
  --palette-background-var: #f4f4f4;
  --palette-background-var2: #e4e4e4;
  --palette-background-quote: #000634;
  --palette-foreground: #222222;
  --palette-foreground-footer: #333333;
  --palette-foreground-footer-link: #444444;
  --palette-foreground-footer-hr: #bbbbbb;
  --palette-foreground-footer-copyright: #666666;
  --palette-background-code: #111111;
  --palette-linkcolor: rgb(186, 44, 1);
  --palette-fluo-jaune: rgb(245, 245, 135);
  --palette-fluo-vert: rgb(176, 255, 167);
  --palette-fluo-rose: rgb(246, 192, 242);
  --palette-fluo-bleu: rgb(190, 209, 253);
  --img-hover-filter: 90%;
  --img-back-to-top: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMTYiPjxwYXRoIGQ9Ik0xNSA3VjZoLTFWNWgtMVY0aC0xVjNoLTFWMmgtMVYxSDlWMEg3djFINnYxSDV2MUg0djFIM3YxSDJ2MUgxdjFIMHYzaDZ2Nmg0di02aDZWN3oiIGZpbGw9IiMwYjAzOTkiIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg==");
}

/*
 * CLASSES GENERIQUES
 */
.align-center {
	text-align: center;
	margin: 1rem auto 2rem;
}
.no-bold p, .no-bold li, .no-bold p > em, .no-bold li > em {
	font-weight: 400!important;
}
.margin-y-0 {
	margin-top: 0!important;
	margin-bottom: 0!important;
}
.margin-y-1 {
	margin-top: 1rem!important;
	margin-bottom: 1rem!important;
}
.margin-y-2 {
	margin-top: 2rem!important;
	margin-bottom: 2rem!important;
}
.margin-y-3 {
	margin-top: 3rem!important;
	margin-bottom: 3rem!important;
}
section.grid:has(div.column:nth-child(4)) > div.column > div.text:has(div) {
	box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
	border-radius: 24px;
	background: var(--palette-background-var2);
	padding: 0 10px;
}
section.grid:has(div.column:nth-child(4)) > div.column > div.text img {
	border-radius: 0;
	box-shadow: none;
	transition: all 0.5s;
}
section.grid:has(div.column:nth-child(4)) > div.column > div.text img:hover {
	filter: brightness(var(--img-hover-filter));
	transform: rotate(20deg);
}

/*
 * BOUTON
 */
div.bouton p > a {
	background: rgb(153, 68, 89);
	color: #fff;
	padding: 1rem 2rem;
	border-radius: 1rem;
	text-decoration: none;
	font-size: 110%;
	transition: all 0.5s;
	box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
}
div.bouton p > a:hover {
	background: rgb(184, 58, 89);
	border-radius: 2rem;
}
/*
 * SURCHARGES GLOBALES
 */
html {
	font-family: system-ui, sans-serif;
	background-color: var(--palette-background);
	color: var(--palette-foreground);
	font-size: 22px;
}
body {
	width: 90%;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 0 1rem;
	position: relative;
}
.header {
	align-items: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
main {
	padding: 0;
}
section.grid, article div.post {
	align-items: center;
	background-color: var(--palette-background-var);
	margin: 10px auto 20px;
	border-radius: 12px;
	padding: 20px 20px 0;
}
.text {
	line-height: 1.6;
}
button, a, img {
	transition: all 0.5s!important;
}
h1, .text h1, .h1, .intro {
	font-family: "Courier New", monospace;
	overflow-wrap: break-word;
	word-wrap: break-word;
	font-size: 3.5rem;
	line-height: 4rem;
	font-weight: 700;
}
h1>strong, .text h1>strong, .h1>strong {
	background-color: green;
	padding: 0 6px;
	font-weight: 700;
	border-radius: 9px;
}
h1>em, .text h1>em, .h1>em {
	font-size: 80%;
	opacity: 0.9;
	font-weight: 700;
	margin-right: 0.5rem;
}
h1 sub, .text h1 sub .h1 sub {
	font-size: 65%;
	line-height: 1;
}
h1::before {
	content: '<';
	font-size: 90%;
	color: teal;
	margin-right: 0.3rem;
}
h1::after {
	content: '/>';
	font-size: 90%;
	color: rgb(102, 39, 102);
	letter-spacing: -0.3rem;
}
div.main-title > h1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
h2, .text h2, .h2 {
	font-size: 1.8rem;
	line-height: 2.2rem;
}
h3, .text h3, .h3 {
	font-size: 1.4rem;
	line-height: 1.8rem;
}
h1 span.heading-space, h2 span.heading-space, h3 span.heading-space {
	font-size: 50%;
}
h1 span.ending-space, h2 span.ending-space, h3 span.ending-space {
	font-size: 5%;
}

.text div.list {
	margin-left: 1rem;
}
figure {
	text-align: center;
	margin: 0 auto;
}
figure img, figure span.video, figure span.video iframe {
	border-radius: 12px;
	box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
	transition: border-radius 1s;
	background: transparent;
}
figure img {
	max-width: 100%;
	width: auto;
	height: auto;
}
figure img:hover {
	border-radius: 75px;
}

section.list-right-hand ul>li, div.list-right-hand ul>li {
	padding-left: 0.6rem;
	list-style-type: "\1F449";
}
section.list-military-helmet ul>li, div.list-military-helmet ul>li {
	padding-left: 0.6rem;
	list-style-type: "\1FA96";
}
section.list-checked ul>li, div.list-checked ul>li {
	padding-left: 0.6rem;
	list-style-type: "\2705";
	margin-bottom: 0.25rem;
}

.text blockquote::before {
	position: absolute;
	content: '';
	width: 3rem;
	height: 3rem;
	background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMuNjkxIDYuMjkyQzUuMDk0IDQuNzcxIDcuMjE3IDQgMTAgNGgxdjIuODE5bC0uODA0LjE2MWMtMS4zNy4yNzQtMi4zMjMuODEzLTIuODMzIDEuNjA0QTIuOTAyIDIuOTAyIDAgMCAwIDYuOTI1IDEwSDEwYTEgMSAwIDAgMSAxIDF2N2MwIDEuMTAzLS44OTcgMi0yIDJIM2ExIDEgMCAwIDEtMS0xdi01bC4wMDMtMi45MTljLS4wMDktLjExMS0uMTk5LTIuNzQxIDEuNjg4LTQuNzg5ek0yMCAyMGgtNmExIDEgMCAwIDEtMS0xdi01bC4wMDMtMi45MTljLS4wMDktLjExMS0uMTk5LTIuNzQxIDEuNjg4LTQuNzg5QzE2LjA5NCA0Ljc3MSAxOC4yMTcgNCAyMSA0aDF2Mi44MTlsLS44MDQuMTYxYy0xLjM3LjI3NC0yLjMyMy44MTMtMi44MzMgMS42MDRBMi45MDIgMi45MDIgMCAwIDAgMTcuOTI1IDEwSDIxYTEgMSAwIDAgMSAxIDF2N2MwIDEuMTAzLS44OTcgMi0yIDJ6IiBmaWxsPSIjZjI4NTAwIiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=') center center/contain no-repeat;
	top: -2.6rem;
	left:0.6rem;
}
.text blockquote {
	position: relative;
	border-left-color: var(--palette-foreground-footer-hr);
	margin-top: 2.2rem;
}
.text pre, .text code {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/*
 * ELEMENTS CHIFFRÉS
 */
div.stat-multiplication {
	margin: 0 auto;
	text-align: center;
}
div.stat-multiplication h3 {
	font-family: "Courier New", monospace;
	font-weight: 700;
	font-size: 5rem;
	line-height: 5rem;
	padding: 0 0.5rem;
	color: green;
}
div.stat-multiplication h3::before {
	content: 'x';
	font-weight: 700;
	font-size: 3rem;
	margin-right: 1rem;
	font-family: system-ui, sans-serif;
	color: var(--palette-foreground-footer-link);
}
div.stat-commentaire {
	text-align: center;
}
div.stat-brand {
	margin-top: 1rem;
	text-align: center;
}
div.stat-brand p {
	font-family: "Courier New", monospace;
	font-weight: 700;
	font-size: 1.1rem;
	color: darkorange;
}
div.stat-brand p::before {
	content: '{';
	color: darkorange;
	margin-right: 0.5rem;
}
div.stat-brand p::after {
	content: '}';
	color: darkorange;
	margin-left: 0.5rem;
}

/*
 * ELEMENTS DU HEADER
 */
nav.menu-home {
	display: flex;
	align-items: center;
	padding: 0 0.5rem;
}
nav.menu-home .logo {
	padding: 0;
}

nav.menu {
	align-items: center;
}
nav a.menu-item {
	line-height: 30px;
	padding: 4px 10px 8px;
	margin: 0 6px;
}
nav a.menu-item:hover, nav a.menu-item[aria-current] {
	border-bottom: 1px solid var(--palette-foreground);
	filter: brightness(var(--img-hover-filter));
	text-decoration: none!important;
}

nav .main-pages {
    display: flex;
    justify-content: space-evenly;
	align-items: center;
}
nav label.main-burger, #toggle-burger {
	display: none;
}
nav label.main-burger::after {
	content: '☰';
	color: var(--palette-foreground);
}
@media all and (max-width: 740px)
{
    nav .main-pages {
        display: none;
		position: absolute;
		right: 2%;
		top: 72px;
		width: 96%;
        flex-direction: column;
        background: var(--palette-background-var2);
        height: calc(100vh - 112px);
		border-radius: 32px 0px 32px 32px;
		box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
		z-index: 999;
    }
    nav .main-pages a, nav .main-pages a[aria-current] {
		text-align: center;
		width: 98%;
		border-bottom: 0!important;
		font-size: 1.5rem;
		font-weight: 700;
	}
    nav .main-pages a:hover {
		border-bottom: 0;
	}
    nav label.main-burger {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
		margin: -6px 18px 0 12px;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }
    #toggle-burger:checked ~ div.main-pages {
        display: flex;
    }
	#toggle-burger:checked + label.main-burger::after {
		content: '×';
	}
	#social-bar {
		display: none;
	}
}
@media all and (max-width: 600px)
{
    nav .main-pages {
		top: 52px;
        height: calc(100vh - 92px);
	}
}



#site-logo > img {
	width: 60px;
	height: auto;
	padding-top: 6px;
	padding-bottom: 6px;
}
#site-logo img:hover {
	transform: rotate(360deg);
	filter: brightness(var(--img-hover-filter));
}
#theme-toggle img {
	width: 30px;
	height: auto;
	margin-right: 12px;
}
#theme-toggle:hover, #image-toggle:hover, #social-bar:hover {
	filter: brightness(var(--img-hover-filter));
}
#social-bar img {
	width: 24px;
	height: auto;
}
#image-toggle {
	margin-right: 10px;
	margin-top: 4px;
}
#image-toggle img {
	width: 28px;
	height: 28px;
}

/*
 * TAGLINE
 */
div.tagline {
	max-width: 520px;
	margin: 0 auto 12px;
}
div.tagline p {
	font-style: italic;
	text-align: center;
}

/*
 * BRANDS
 */
p.brands {
	text-align: center;
}
p.brands > img {
	width: auto;
	height: 60px;
}
p.brands > img:hover {
	transform: rotate(20deg);
	filter: brightness(var(--img-hover-filter));
}

/*
 * BLOG
 */
section.post-header > div.column {
	margin-bottom: 1rem;
}
section.post-header .post-title {
	text-align: center;
	margin: 0 auto;
}
article .post {
	max-width: var(--content-max-width);
	margin: 0 auto;
}
article div.post-block {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
ul.note-tags {
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
ul.note-tags > li a {
	background: #3e11bd;
	color: #fff;
	border-radius: 6px;
	transition: all 0.5s;
}
ul.note-tags > li a::before, h1 span.tag-filter-label::before {
	content: '#';
	font-weight: 700;
	font-style: italic;
	padding-right: 2px;
	color: #f7b63b;
}
ul.note-tags > li a:hover, h1 span.tag-filter-label {
	background: #5120d6;
	color: #fff;
	border-radius: 12px;
}
p.note-date {
	text-align: center;
	margin: 0 auto;
}
.post-block-image figure, .post-block-video figure {
	max-width: 768px;
	margin: 0 auto;
}
.post-block-image a.image-lightbox {
	cursor: zoom-in;
}
.basicLightbox--visible {
	cursor: zoom-out;
}

.note-date, .note-excerpt-date {
	color: var(--palette-foreground-footer-link);
	font-size: 0.85rem;
}
figcaption.img-caption, figcaption.video-caption {
	color: var(--palette-foreground-footer-link);
	text-align: center;
	font-style: italic;
	font-size: 0.85rem;
}
figcaption.img-caption {
	padding-top: 0;
}
figcaption.video-caption {
	padding-top: 8px;
}
.note-footer {
    padding: 1rem 0!important;
}
.post-block-code pre {
	border-radius: 12px;
	box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
	padding: 0.5rem;
	overflow: hidden;
	background-color: var(--palette-background-code);
}
.post-block-text p > a, .post-block-list li > a {
	font-weight: 700;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.1rem;
	text-decoration: var(--palette-linkcolor) wavy underline;
	transition: color 0.5s;
}
.post-block-text p > a[target="_blank"]::after, .post-block-list li > a[target="_blank"]::after, .post-block-text p > a[href^="tel:"]::after, .post-block-text p > a[href^="mailto:"]::after {
	content: '\25e5';
	font-size: 0.7rem;
	vertical-align: super;
	color: var(--palette-linkcolor);
}
.post-block-text p > a:hover, .post-block-list li > a:hover {
	color: var(--palette-linkcolor);
}
div.lettrine > p::first-letter {
	font-family: "Courier New", monospace;
    font-size: 4.2rem;
    line-height: 3rem;
    font-weight: 700;
    margin-right: 0.4rem;
    float: left;
	color: green;
}
div.post-block-text p > em, div.post-block-list li > em {
	color: var(--palette-background-quote);
	font-weight: 700;
}
div.fluo-jaune p > strong, div.fluo-jaune li > strong,
div.fluo-vert p > strong, div.fluo-vert li > strong,
div.fluo-rose p > strong, div.fluo-rose li > strong,
div.fluo-bleu p > strong, div.fluo-bleu li > strong {
	padding: 0 5px 2px;
	border-radius: 6px;
}
div.fluo-jaune p > strong, div.fluo-jaune li > strong {
	background-color: var(--palette-fluo-jaune);
}
div.fluo-vert p > strong, div.fluo-vert li > strong {
	background-color: var(--palette-fluo-vert);
}
div.fluo-rose p > strong, div.fluo-rose li > strong {
	background-color: var(--palette-fluo-rose);
}
div.fluo-bleu p > strong, div.fluo-bleu li > strong {
	background-color: var(--palette-fluo-bleu);
}

#postgrid li:nth-child(4n+1) div.note-excerpt-text > strong, #blog-nextpost div.note-excerpt-text > strong {
	padding: 0 5px 2px;
	border-radius: 6px;
	background-color: var(--palette-fluo-vert);	
}
#postgrid li:nth-child(4n+2) div.note-excerpt-text > strong {
	padding: 0 5px 2px;
	border-radius: 6px;
	background-color: var(--palette-fluo-jaune);	
}
#postgrid li:nth-child(4n+3) div.note-excerpt-text > strong, #blog-prevpost div.note-excerpt-text > strong {
	padding: 0 5px 2px;
	border-radius: 6px;
	background-color: var(--palette-fluo-bleu);	
}
#postgrid li:nth-child(4n) div.note-excerpt-text > strong {
	padding: 0 5px 2px;
	border-radius: 6px;
	background-color: var(--palette-fluo-rose);	
}

div.hanalei > h2, div.hanalei > h3, div.hanalei > h4 {
	font-family: "Courier New", monospace;
	font-weight: 700;
}
div.hanalei > h2 {
	font-size: 2.2rem;
	line-height: 2.5rem;
}
div.hanalei > h2 > strong {
	background-color: green;
	color: #fff;
	padding: 0 6px;
	font-weight: 700;
	border-radius: 9px;
}
div.hanalei > h2::before {
	content: '/*';
	font-size: 90%;
	color: rgb(107, 16, 16);
	margin-right: 0.5rem;
	letter-spacing: -0.3rem;
}
div.hanalei > h2::after {
	content: '*/';
	font-size: 90%;
	color: rgb(99, 150, 204);
	letter-spacing: -0.4rem;
	margin-left: 0.2rem;
}
div.hanalei > h3 {
	font-size: 1.8rem;
	line-height: 2.2rem;
}
div.hanalei > h3 > strong {
	background-color: purple;
	color: #fff;
	padding: 0 6px;
	margin: 0 6px 0 0;
	font-weight: 700;
	border-radius: 9px;
}
div.hanalei > h4 {
	font-size: 1.3rem;
	line-height: 1.6rem;
	color: darkorange;
}

/*
 * ARCHIVES TAGS
 */

h1.tag-filter > strong {
	display: inline-block;
}
h1 span.tag-filter-label {
	margin-left: 0.5rem;
	padding: 0 0.5rem;
}
h1 a.tag-filter-remove {
	display: inline-block;
	color: rgb(208, 0, 0);
	margin-left: 1rem;
	text-decoration: none;
}
h1 a.tag-filter-remove:hover {
	color: red;
	transform: rotate(90deg);
}

/*
 * BLOG SEARCH
 */
#blog-search {
	text-align: center;
}
#blog-search input {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid #888888;
	outline: 0;
	border-radius: 8px;
	font-size: 1rem;
	color: var(--palette-foreground);
	background: var(--palette-background-var2);
	box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
	transition: all 0.3s;
}
#blog-search input:focus {
	border-radius: 32px;
}
#blog-search-nofound {
	margin: 2rem;
	padding: 1rem;
}
/*
 * POST GRID
 */
#postgrid a, #postgrid a h2, #postgrid a time, #postgrid a div {
	text-decoration: none;
}
article.note-excerpt figure, ul.grid figure, ul.grid img {
	background: transparent;
}
article.note-excerpt figure:hover, ul.grid figure:hover, ul.grid img:hover {
	filter: brightness(110%);
}
ul.grid li {
	list-style: none;
}

/*
 * CONTACT
 */
aside.contact {
	padding: 1rem;
}
aside.contact h2 {
	margin-bottom: 1rem;
}
aside.contact h3 {
	display: flex;
	align-items: center;
	margin-bottom: 0.2rem;
}
aside.contact h3 img {
	width: 32px;
	height: auto;
	margin-right: 0.4rem;
}

aside.contact section.column  p {
	margin-left: 0.7rem;
	padding-left: 0.7rem;
	border-left: 2px solid gray;
}
aside.contact section.column  p > a {
	font-weight: normal;
}

/*
 * FOOTER
 */
footer.footer {
	padding: 2rem 2rem 1rem;
	line-height: 1.5em;
	background: var(--palette-background-var2);
	border-radius: 12px 12px 0 0;
}
footer.footer::before {
	display: none;
}
footer.footer div.column {
	margin-bottom: 1rem;
}
footer.footer h3 {
	font-family: "Courier New", monospace;
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--palette-foreground-footer-link);
}
footer.footer h3::before {
	content: '//';
	color: green;
	font-size: 90%;
	letter-spacing: -0.3rem;
	margin-right: 0.4rem;
}
footer.footer p {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
	max-width: 100%;
}
footer.footer p > span, footer.footer p > img, footer.footer p > a {
	color: var(--palette-foreground-footer);
	width: auto;
	margin-right: 0.4rem;
}
footer.footer p > a {
	color: var(--palette-foreground-footer-link);
	text-decoration-skip-ink: none;
	text-underline-offset: 0.1rem;
}
footer.footer p > a:hover, footer.footer li > a:hover {
	color: var(--palette-foreground-footer);
	text-decoration: underline;
}
#proudly-powered img.scale:hover, #cookie-free img.scale:hover, #rss-feed img.scale:hover {
	transform: scale(1.4);
	filter: brightness(var(--img-hover-filter));
}
#proudly-powered img.rotate:hover, #cookie-free img.rotate:hover, #rss-feed img.rotate:hover {
	transform: rotate(20deg);
	filter: brightness(var(--img-hover-filter));
}
#copyright {
	border-top: 1px solid var(--palette-foreground-footer-hr);
	display: block;
	margin: 0 auto;
	padding-top: 1rem;
}
#copyright p {
	color: var(--palette-foreground-footer-copyright);
	display: block;
	text-align: center;
}
#back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 40px;
	height: 40px;
	background: var(--img-back-to-top) center center/contain no-repeat;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	cursor: default;
	transition: opacity 500ms ease, visibility 0s ease 500ms;
}
#back-to-top.visible {
  opacity: 0.6;
  visibility: visible;
  cursor: pointer;
  transition: opacity 500ms ease, visibility 0s ease 0s, bottom 250ms linear;
}
#back-to-top:hover {
	bottom: 35px;
	opacity: 1;
}

/*
 * ANIMATIONS
 */
.text-cursor {
	animation: blinker 2s linear infinite;
	font-family: Serif;
	color: #888888;
	border-right: 4px solid #888888;
	font-size: 2rem;
	line-height: 2;
}
.text-arrow::before {
	content: '⇝';
	color: darkorange;
	font-size: 85%;
	margin-right: 0.2rem;
}
  
@keyframes blinker {
	0% { opacity: 1; }
	49% { opacity: 1; }
	50% { opacity: 0; }
   100% { opacity: 0; }
}

/*
 * IMAGES ASCII
 */
main.img-mode-ascii section.layout-img div.column {
	align-self: stretch;
}
main.img-mode-ascii section.layout-img div.column > div.text {
	height: 100%;
}

div.ascii-image, div.ascii-note {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	font-family: system-ui, sans-serif;
	font-style: italic;
	text-align: center;
	padding: 1rem 3rem;
	border-radius: 12px;
	color: #ddd;
	transition: all 1s;
	box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
	text-shadow: 5px 5px 10px #000000;
	background-size: 200% 200%!important;
	background-position:0% 50%!important;
	margin: 0 auto;
}
div.ascii-image {
	font-size: 1rem;
	width: 100%;
	max-width: 768px;
	height: 100%;
}
div.ascii-note {
	font-size: 1rem;
	width: 100%;
	height: 250px;
	margin-bottom: 6px;
}
div.ascii-image:hover, div.ascii-note:hover {
	border-radius: 75px;
	background-position:50% 0%!important;
}
.text a.ascii-lightbox {
	cursor: zoom-in;
	text-decoration: none;
}

/*
 * VIDEOS NO-COOKIE
 */
div.video-img-nocookie {
	width: 100%;
	height: auto;
	min-height: 180px;
	margin: 0 auto;
	border-radius: 12px;
	box-shadow: 0 0 10px 1px rgb(0 0 0 / .5);
	transition: all 0.5s;
}
div.video-img-nocookie:hover {
	border-radius: 75px;
}
div.video-img-nocookie a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	filter: grayscale(1);
	transition: all 0.5s;
}
div.video-img-nocookie a:hover {
	filter: grayscale(0);
}
div.video-img-nocookie img {
	width: 128px;
	height: auto;
	border-radius: 0;
	box-shadow:none;
}
div.video-img-nocookie img:hover {
	border-radius: 0;
}

.text a.video-nocookie {
	text-decoration: none;
}
.video-ascii-nocookie img {
	filter: grayscale(1);
	transition: all 0.5s;
}
.video-ascii-nocookie:hover img, .video-ascii-nocookie img:hover {
	filter: grayscale(0);
}


@media (max-width: 600px) {
	div.video-ascii-nocookie img, div.video-img-nocookie img {
		width: 92px;
	}
	div.video-ascii-nocookie {
		flex-direction: column;
	}
}

/*
 * MODE D'EMPLOI
 */
.titre-mode-emploi, .titre-mode-emploi-rotate, .titre-mode-emploi-brightness {
	font-family: "Courier New", monospace;
	text-align: center;
	margin: 0 auto!important;
}
.titre-mode-emploi + figure, .titre-mode-emploi-rotate + figure, .titre-mode-emploi-brightness + figure {
	margin: 0 auto!important;
}
.titre-mode-emploi + figure > img, .titre-mode-emploi-rotate + figure > img, .titre-mode-emploi-brightness + figure > img {
	box-shadow: none;
	border-radius: 0;
}
.titre-mode-emploi-rotate + figure > img, .titre-mode-emploi-brightness + figure > img {
	transition: all 0.5s;
}
.titre-mode-emploi-rotate + figure img:hover {
	transform: rotate(360deg);
	filter: brightness(var(--img-hover-filter));
	border-radius: 0;
}
.titre-mode-emploi-brightness + figure img:hover {
	filter: brightness(var(--img-hover-filter));
	border-radius: 0;
}

/*
 * RESPONSIVITÉ
 */
@media (max-width: 960px) {
	figure {
		text-align: center;
		margin: 0 auto;
	}
	figure img {
		max-width: 100%;
		width: auto;
		height: auto;
	}
}

@media (max-width: 600px) {
	html {
		font-size: 16px;
	}
	#site-logo > img {
		width: 40px;
	}
	#theme-toggle img {
		margin-right: 8px;
	}
	nav a.menu-item {
		padding: 4px 6px 8px;
	}
	section.post-header .post-title {
		text-align: left;
		margin: 0;
	}
	h1 {
		font-size: 3rem;
		line-height: 3.5rem;
	}
}