/*
// ============================================================================
// GC online 
// ---------------------------------------------------------------------------- 
// gfc_css_main.css - CSS main rules 
// ---------------------------------------------------------------------------- 
*/
/* --- Generic --- */
:root {
	--clr-bg1: aliceblue; 
	--clr-bg2: #1a1a1a;
	--clr-bg3: #4a4a4a;
	--clr-font1: #1a1a1a; 
	--clr-font2: aliceblue; 
	--clr-font-high: maroon; 
	--clr-default: cadetblue;
	--clr-headings: darkslategrey;
	--clr-headers: burlywood; 
	--clr-brdr-random: #444; 
	--clr-jmcid: antiquewhite; /*bisque*/
	--clr-result: antiquewhite; /*bisque*/
	--clr-res-src: burlywood; 
	--clr-res-tbl: burlywood; 
	--clr-input: lightgray;
	--clr-input-highlight: white;
	--clr-button: cadetblue; 
	--clr-button-font: antiquewhite; 
	--clr-button-highlight: tomato; 
	--clr-brdr-img: darkslategrey; /*burlywood*/
	--clr-code: darkslategrey;
	--clr-link-highlight: cadetblue; 
	--clr-fnsrc: maroon;
	--clr-anchor: #5f9ea026; 
	--clr-aparte: slategray; 
	--clr-wng: maroon;
	--clr-fg-404: #d3c1b3;
}

/* to test (at body level): 
font: 100%/1.4 system-ui; 
*/

* {
	font-family: gcText, Arial, Helvetica, sans-serif; 
	font-size: inherit;
	line-height: 1.5; 
	color: inherit; 
}

h1, h2, h3, h4 {
	font-family: gcHeadings, Arial, Helvetica, sans-serif; 
	color: var(--clr-headings);
}
h1 {
	margin-top: 0; 
	font-size: 1.75em; 
}
h2 {
	font-size: 1.35em; 
}
h3 {
	font-size: 1.15em; 
}
p.heading {
	font-family: gcHeadings, Arial, Helvetica, sans-serif; 
	font-size: 1.35em; 
	color: var(--clr-headings);
	margin-bottom: 1em; 
}
pre, code {
	font-family: 'Lucida Console', monospace; 
	font-size: 0.9em; 
	overflow-wrap: break-word; 
}
code {
	color: var(--clr-code);
}
sup {
	font-size: x-small; 
}
em, 
span, 
strong, 
sup {
	font-family: inherit; 
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--clr-bg2); 
	color: var(--clr-font1); 
}

.gcwrap, header, #main, .content, footer, #errors {
	box-sizing: border-box; 
}

.gcwrap {
	width: 100%; 
	max-width: 1024px; 
	min-height: 100%; 
}

/* Page header */
header {
	position: fixed;
	top: 0; 
	left: 0;
	width: 100%; 
	max-width: 1024px; 
	background: linear-gradient(to bottom, var(--clr-bg2), var(--clr-bg3));
	border-bottom-right-radius: 12px; 
	z-index: 100; 
	display: flex;
	flex-direction: row; 
	justify-content: space-between;
	align-items: center;
	padding: 16px 36px;
}
header p {
	margin: 0;
	font-size: 0.8em; 
	line-height: initial;
	color: var(--clr-font2);
}
header .hdrr {
	font-size: smaller; 
}

/* Page footer */
footer {
	position: fixed; 
	left: 0; 
	bottom: 0; 
	width: 100%; 
	max-width: 1024px; 
	margin-top: 24px; 
	background: linear-gradient(to top, var(--clr-bg2), var(--clr-bg3));
	border-top-right-radius: 12px; 
	z-index: 100; 
	display: flex;
	flex-direction: row; 
	justify-content: space-between;
	align-items: baseline;
	padding: 2px 36px 8px 36px;
}
#ftrl {
	order: 1; 
}
#ftrc {
	order: 2; 
}
#ftrr {
	order: 3; 
}
#ftrl p, 
#ftrc p, 
#ftrr p {
	font-size: 0.8em; 
	color: var(--clr-font2);
}
#ftrl p, 
#ftrr p {
	font-style: italic; 
}
.license-text::before {
	content: 'Termes applicables\00A0: '; 
}

/* Page main container */
#main {
	width: 100%; 
	margin: 48px 0; 
	padding: 24px 24px 6px 24px;
}
.content {
	background-color: var(--clr-bg1); 
	opacity: 0.9; 
	border-top-right-radius: 6px; 
	border-bottom-right-radius: 6px; 
	padding: 24px;
}


input, textarea, select, button {
  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box;
}

.aparte {
	margin-top: 1em; 
	border-top: 1px dotted var(--clr-aparte); 
	border-bottom: 1px dotted var(--clr-aparte); 
	padding-bottom: 1em; 
	margin-bottom: 2em; 
	display: grid; 
	grid-template-columns: 3.5em 1fr; 
	gap: 1em; 
}
div.aparte-hdr {
	padding-left: 0.75em; 
}
div.aparte-hdr p {
	writing-mode: vertical-lr; /* sideways-lr not understood by chromium */
	font-variant: small-caps; 
	letter-spacing: 4px; 
	color: var(--clr-aparte); 
}
div.aparte-hdr p::before {
	content: '['; 
	color: var(--clr-aparte); 
}
div.aparte-hdr p::after {
	content: ']'; 
	color: var(--clr-aparte); 
}
div.aparte-data {
	font-size: 90%; 
}

.post-wrapper p, 
.post-wrapper li, 
.post-wrapper dt, 
.post-wrapper dd, 
.post-wrapper blockquote {
	text-align: justify; 
}

.post-wrapper .p-item {
	margin-top: 1em; 
}
.post-wrapper .p-item:before {
	content: '\25FC\00A0'; 
	color: var(--clr-headingsp); 
}


/* Blog main header */
#thoughts-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#thoughts-title h1 {
	margin-bottom: 0; 
}
#thoughts-title-comp {
	display: flex; 
	align-items: center; 
}
#thoughts-title-comp a {
	text-decoration: none; 
	border-bottom: 0;
}
#thoughts-title-comp a:hover {
	text-decoration: none; 
	border-bottom: 0;
}
.thoughts-rss {
	padding-left: 1em;
}
.thoughts-subtitle {
	font-size: small; 
}

/* Bloc actu */ 
#thoughts-news {
	margin-top: 2em;
	margin-bottom: 1em;
	padding: 0.25em 2em 0.75em 2em; 
	border: 1px solid var(--clr-brdr-img); 
	display: flex; 
	justify-content: flex-start; 
	align-items: baseline; 
	gap: 2em; 
}
#thoughts-news-header {
	flex: 1 0 10%; 
}
#thoughts-news-data {
	font-size: 90%; 
}
#thoughts-news h2 {
	margin: 0; 
}
#thoughts-news blockquote {
	margin-top: 0; 
}

/* Blog main content part */
#thoughts-body {
	/* margin-top: 2em; */
	margin-bottom: 1em;
}
#thoughts-body a {
	text-decoration: none; 
}

/* blog post nav menu */ 
.note-nav {
	display: flex; 
	justify-content: space-evenly;
	align-items: flex-start;
	font-size: small; 
	color: var(--clr-headings); 
}
p.note-nav-left {
	flex: 1 0 42%; 
	text-align: left;
}
.show-prev::before {
	content: '\22D8\00A0'; 
}
p.note-nav-center {
	flex: 1 1 16%; 
	text-align: center; 
}
p.note-nav-right {
	flex: 1 0 42%; 
	text-align: right; 
}
.show-next::after {
	content: '\00A0\22D9'; 
}
.note-nav a {
	text-decoration-line: none; 
}

/* blog post content */ 
.note-head {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
.note-head h1 { 
	margin-bottom: 0; 
}

.note-pubdate {
	font-size: small; 
}
.note-body {
	margin-bottom: 2em;
	margin-left: 2.75em;
	margin-right: 2.75em;
}

div.blog-item {
	margin-top: 3em;
}
div.blog-item-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: beige;
	border-radius: 3px; 
	padding: 6px 8px; 
	margin-bottom: 0.5em;
}
div.blog-item-head h2 {
	margin-top: 0;
	margin-bottom: 0;
}
p.blog-item-pubdate {
	text-align: right; 
	font-size: small; 
}
p.blog-item-desc {
	/*font-size: 0.8rem; */
	margin-left: 1.2em; 
}
div.parenthese {
	margin-left: 2em;
}

/* Blog search results */ 
.serp-res {
	margin-top: 1em; 
}
div.blog-item-title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1em;
}
.res-rank {
	/* credit: https://stackoverflow.com/a/60131877 */
	flex: 0 0 auto; 
	width: 24px;
	height: 24px;
	/* background-color: var(--clr-ref1); */
	border-radius: 50%;
	box-shadow: 2px 1px 2px darkgray; 
	font-size: smaller; 
	color: darkslategray;
	display: flex;
	justify-content: center;
	align-items: center;
}
.res-snippet {
	font-size: smaller; 
	overflow-wrap: break-word; 
}
.sql-match {
	color: var(--clr-font-high); 
}
.res-footer {
	margin-top: 2em; 
	text-align: center; 
}
.res-footer p::before {
	content: "[\00A0"; 
}
.res-footer p::after {
	content: "\00A0]"; 
}

/* Section des messages d'erreur */
#errors {
	width: 100%; 
	margin: 24px 0; 
	border-top: 1px dashed var(--clr-wng); 
	padding: 12px 0;
}
#err_msg h2 {
	margin: 0;
	color: var(--clr-wng); 
}
#err_msg p::before {
	content: '▲ '; 
	color: var(--clr-wng);
}

/* Section finale avant le footer */
#getmehome {
	margin-top: 2em;
}
.gotop {
	cursor: pointer;
	text-align: center; 
	font-size: smaller; 
	color: var(--clr-headings); 
}
.gotop:before {
	content: '\25B4  ';
}
.gotop:after {
	content: ' \25B4';
}

.img-series {
	display: flex; 
	flex-flow: row wrap; 
	gap: 1em; 
	justify-content: space-evenly; 
	align-items: center;
}
.img-series-2 {
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	align-items: start; 
	gap: 1em;
}
.img-series-3 {
	display: grid; 
	grid-template-columns: repeat(3,1fr); 
	align-items: start; 
	gap: 0.5em;
}
.img-series-4 {
	display:grid; 
	grid-template-columns: repeat(4,1fr); 
	align-items: start; 
	gap: 0.5em;
}

.post-wrapper ul.compact, 
.post-wrapper dl.compact {
	margin-top: 0.25em; 
	margin-bottom: 0; 
}
.post-wrapper ul.compact li, 
.post-wrapper dl.compact dd, 
.post-wrapper dl.compact dt {
	margin-top: 0.25em; 
	margin-bottom: 0; 
}
.post-wrapper center p, 
.post-wrapper p.center {
	text-align: center; 
}
.post-wrapper dt { 
	font-style: italic; 
	font-weight: 700; 
}

.topillcaption {
	margin-top: -1em; 
	margin-bottom:2em;
}
.topillcaption p {
	margin-top: 0; 
	text-align: right; 
	font-size:small;
}



/* Styles génériques */
.hotspot, 
.copiable {
	cursor: pointer; 
}
.center {
	text-align: center; 
}
.small {
	font-size: small; 
}
.smaller {
	font-size: smaller; 
}
.large {
	font-size: large; 
}
strong {
	color: var(--clr-headings); 
}
.italic {
	font-style: italic; 
}
.normal {
	font-style: normal; 
}
p {
	margin: 8px 0 0 0;
}
a {
	font: inherit;
	color: inherit;
	text-decoration-color: var(--clr-default);
}
a:hover {
	color: var(--clr-link-highlight);
}
header a, 
footer a, 
h1 a {
	text-decoration-line: none; 
}
a.extlink {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AYbEiQGTnDlhwAAAO1JREFUKM910LFKw3AUxeEvoZN0dBAVCoKDkzgIeQU3wUEHDaLwf4CAm75CcHLIGBx8A1ddRKqLbqIILsWliFg6WpcESkzvcrnnnh+XeyKNKot8Affo+V+juKmkIfvELt5bgG6nLPJ5XGEVEQZpyJKyyJ+w0iSissj72MAAYxziCKHlghibOE9D1ktDtoadWeYagFH18DJOWnwveJ0Goqr/4LFhvsM69vERNxL6xjHeKukSp7hJQ9ZH0hbrMxL00pAd4AJLdeSdxi81NMSwGucwqXcdfGG7LHL4neIm6GIRt9PAFq5xNiPJB+zVwx9WtzzPs6dvlAAAAABJRU5ErkJggg==') no-repeat right center; 
	padding-right: 15px;
}

/* ancres */ 
.post-wrapper a {
	font: inherit;
	color: inherit;
	text-decoration-color: var(--clr-default);
}
.post-wrapper a:hover {
	color: var(--clr-link-txt-highlight);
}
.post-wrapper section a {
	text-decoration: unset; 
	background-color: var(--clr-anchor); 
	padding-left: 2px; 
	padding-right: 2px; 
	border-radius: 3px; 
}
.post-wrapper section a.extlink {
	padding-right: 15px;
}
.post-wrapper section a:has(img) {
	text-decoration: unset; 
	background-color: unset; 
	padding-left: unset; 
	padding-right: unset;
}
.post-wrapper section a:hover {
	background-color: var(--clr-default); 
	color: white;
}
.post-wrapper section a:has(img):hover {
	background-color: unset; 
}

.afn, 
.fnref {
	cursor: pointer; 
	font-weight: 700; 
}
.afn {
	color: var(--clr-fnsrc); 
}
.fnref {
	display: inline-block; 
	margin-top: 0.3em; 
	color: var(--clr-headings); 
}
.afn::before {
	font-weight: 400; 
	content: '\202F['; 
}
.afn::after {
	font-weight: 400; 
	content: ']'; 
}
.fnref::before {
	font-weight: 400; 
	content: '[\2196'; 
}
.fnref::after {
	font-weight: 400; 
	content: ']'; 
}
.fncnt {
	margin-top: 4em;
}
p {
	transition: background-color 2s; 
}
@keyframes afnHighlight {
  from { background-color: antiquewhite; }
  to   { background-color: transparent; }
}

figure {
	margin: 2em 0;
	text-align: center;
}
figure.compact {
	margin: 1em 0; 
}
figure img {
	border: 1px solid var(--clr-brdr-img); 
	max-width: 98%;
	height: auto;
}
figure img.noborder {
	border: none; 
}
figcaption {
	/* font-style: italic;  */
	font-size: smaller; 
}

.imodal {
	cursor: zoom-in;
}
.caption-container {
	display: none; 
}

/* 404 page */ 
.misc-404 {
	padding-top: 2em; 
}
.misc-404 section {
	margin-top: 0; 
}
.misc-404 p {
	color: var(--clr-fg-404); 
}
.misc-404 figure {
	margin: 0; 
}
.misc-404 figure img {
	border-radius: 6px; 
}

/* Back-to-top button */
#topBtn {
    display: none;
    position: fixed;
    bottom: 48px; 
    right: 5%; 
	max-width: 32px;
    z-index: 50; 
    border: none;
    cursor: pointer;
	padding: 2px; 
}
#topBtn:hover {
    border: 2px solid white;
	border-radius: 4px;
	padding: 0; 
}
.backhome {
	cursor: pointer;
}