@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* Print styles from HTML5 Boilerplate */
@media print { * { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; } }
/* --------------------------------------------------
 Composition helpers [fr] Aides a la composition  (c) 2010-2014 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net

----------------------------------------------------- */
/* Box model
[fr] http://blog.goetter.fr/post/27612618411/box-sizing-et-pourquoi-pas
[en] http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Blocks */
.block { display: block; margin-bottom: 1.5em; }

.inline { display: inline; }

.inline-block { display: inline-block; }

/* Positioning */
.left { float: left; }

.right { float: right; }

.center { margin-right: auto; margin-left: auto; }

/* Blocks spacer
[fr] Espaceur de blocs : http://romy.tetue.net/657 */
.clear { clear: both; }

br.clear { clear: both; margin: 0; padding: 0; border: 0; height: 0; line-height: 1px; font-size: 1px; }

hr.clear { visibility: hidden; }

/* clearfix : http://www.positioniseverything.net/easyclearing.html */
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; }

.clearfix { display: inline-table; }

/* Hides from IE-mac \*/
.clearfix { height: 1%; }

.clearfix { display: block; }

/* End hide from IE-mac */
/* Not visible */
.offscreen { position: absolute; left: -999em; height: 1%; }

.hidden { visibility: hidden; }

.none { display: none; }

/* debug */
.todo { opacity: 0.5; }

.todo:hover { opacity: 1; }

.blink { text-decoration: blink; }

/* --------------------------------------------------
 Typographical base  (c) 2010-2014 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net

----------------------------------------------------- */
html { font-size: 100.01%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

/* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/
et http://forum.alsacreations.com/topic-4-54377-1.html
[en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */
body { font-size: 1em; line-height: 1.5; }

/* Fonts */
.font1 { font-family: serif; }

.font2 { font-family: sans-serif; }

.font3 { font-family: monospace; }

.font4 { font-family: fantasy; }

/* Titraille / Intertitres */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { display: block; margin: 0; padding: 0; font-size: 100%; font-weight: bold; }

h1, .h1 { font-size: 2em; line-height: 1.5; margin-bottom: .75em; }

h2, .h2 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }

h3, .h3 { font-size: 1.25em; line-height: 1.2; margin-bottom: 1.2em; }

h4, .h4 { font-size: 1.1em; line-height: 1.364; margin-bottom: 1.364em; }

h5, .h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }

h6, .h6 { font-size: 1em; font-weight: bold; }

h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small { font-size: 60%; line-height: 0; }

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; margin: 1.5em 0; border: solid; border-width: 1px 0 0; }

/* Typographical enhancements */
em, i, .i { font-style: italic; }

strong, b, .b { font-weight: bold; }

mark, .mark { background: #ff0; color: #000; }

.smaller { font-size: 75%; }

small, .small { font-size: 80%; }

big, .big { font-size: 130%; }

.bigger { font-size: 175%; }

.biggest { font-size: 200%; }

abbr[title], acronym[title] { border-bottom: .1em dotted; cursor: help; }

@media print { abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; } }
dfn, .dfn { font-weight: bold; font-style: italic; }

s, strike, del, .del { opacity: .5; text-decoration: line-through; }

ins, .ins { background-color: rgba(255, 255, 204, 0.5); text-decoration: none; }

u, .u { text-decoration: underline; }

sup, .sup, sub, .sub { position: relative; font-size: 80%; font-variant: normal; line-height: 0; vertical-align: baseline; }

sup, .sup { top: -0.5em; }

sub, .sub { bottom: -0.25em; }

.lead { font-size: 120%; }

.caps { font-variant: small-caps; }

.quiet { color: #555555; }

/* Alignment */
.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }

.text-justify { text-align: justify; text-justify: newspaper; }

/* Lists */
ul { list-style-type: disc; }

ul ul { list-style-type: circle; }

ul ul ul { list-style-type: square; }

ol { list-style-type: decimal; }

ol ol { list-style-type: lower-alpha; }

ol ol ol { list-style-type: lower-greek; }

ul ul, ol ol, ul ol, ol ul { margin-top: 0; margin-bottom: 0; }

ol, ul { margin-left: 1.5em; -webkit-margin-before: 0; -webkit-margin-after: 0; }

dt { font-weight: bold; }

dd { margin-left: 1.5em; }

.list-none { margin-left: 0; list-style: none; }

.list-none li:before { content: ''; }

.list-square { margin-left: 1.5em; list-style: square; }

.list-square li:before { content: ''; }

.list-disc { margin-left: 1.5em; list-style: disc; }

.list-disc li:before { content: ''; }

.list-circle { margin-left: 1.5em; list-style: circle; }

.list-circle li:before { content: ''; }

.list-decimal { margin-left: 1.5em; list-style: decimal; }

.list-decimal li:before { content: ''; }

.list-inline { margin-left: 0; }

.list-inline li { display: inline-block; margin: 0; margin-right: 1em; }

.list-inline li:Last-Child { margin-right: 0; }

.list-inline.list-inline-sep li { margin-right: 0; }

.list-inline.list-inline-sep li:after { content: " | "; }

.list-inline.list-inline-sep li:Last-Child:after { content: ''; }

.list-inline.list-inline-dash li { margin-right: 0; }

.list-inline.list-inline-dash li:after { content: " - "; }

.list-inline.list-inline-dash li:Last-Child:after { content: ''; }

.list-inline.list-inline-comma li { margin-right: 0; }

.list-inline.list-inline-comma li:after { content: ", "; }

.list-inline.list-inline-comma li:Last-Child:after { content: ". "; }

.list-block li { display: block; margin-right: 0; }

/* Tables */
table { max-width: 100%; border-collapse: collapse; border-spacing: 0; }

.table { width: 100%; }

.table caption, .table th, .table td { padding: 0.375em; }

.table caption { font-weight: bold; text-align: left; border-bottom: 2px solid; }

.table th { font-weight: bold; }

.table th, .table td { border-bottom: 1px solid; }

.table thead th { vertical-align: bottom; }

.table tbody tr:hover td { background-color: rgba(34, 34, 34, 0.05); }

.table tfoot { font-style: italic; }

.table tfoot td { border-bottom: 0; vertical-align: top; }

@media (max-width: 640px) { .table-responsive { width: 100%; overflow-y: hidden; overflow-x: scroll; margin-bottom: 1.5em; }
  .table-responsive table { width: 100%; margin-bottom: 0; }
  .table-responsive thead, .table-responsive tbody, .table-responsive tfoot, .table-responsive tr, .table-responsive th, .table-responsive td { white-space: nowrap; } }
/* Quotes, code and poetry */
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

:lang(en) > q { quotes: "\201C" "\201D" "\2018" "\2019"; }

:lang(fr) > q { quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019"; }

:lang(es) > q { quotes: "\00AB" "\00BB" "\201C" "\201D"; }

:lang(it) > q { quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D"; }

:lang(de) > q { quotes: "\00BB" "\00AB" "\203A" "\2039"; }

:lang(no) > q { quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A"; }

/* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */
q:before { content: open-quote; }

q:after { content: close-quote; }

blockquote { position: relative; padding-left: 1.5em; border: solid rgba(34, 34, 34, 0.2); border-width: 0 0 0 5px; }

blockquote:before { z-index: -1; position: absolute; left: 0; top: 0; content: "\00AB"; line-height: 0; font-size: 10em; color: rgba(34, 34, 34, 0.1); }

cite, .cite { font-style: italic; }

address { font-style: italic; }

pre, code, kbd, samp, var, tt { font-family: monospace; font-size: 1em; }

pre { white-space: pre-wrap; word-break: break-all; word-wrap: break-word; }

kbd { white-space: nowrap; padding: .1em .3em; background-color: #eee; border: 1px solid #aaa; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset; color: #333; }

samp { font-weight: bold; }

var { font-style: italic; }

/* Box */
.box { display: block; margin-bottom: 1.5em; padding: 1.5em 1.5em; padding-bottom: .1em; border: 1px solid; }

@media print { .box { border: 1px solid !important; } }
@media (min-width: 640px) { .box.right { width: 33%; margin-left: 1.5em; }
  .box.left { width: 33%; margin-right: 1.5em; }
  .box.center { width: 75%; } }
/* Paragraphs */
p, .p, ul, ol, dl, dd, blockquote, address, pre, .table, fieldset { margin-bottom: 1.5em; }

/* Typography for small screens
[fr] http://www.alsacreations.com/astuce/lire/1177 */
@media (max-width: 640px) { /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
  img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { max-width: 100% !important; }
  /* gestion des mots longs */
  textarea, table, td, th, pre, code, samp { word-wrap: break-word; /* cesure forcee */ }
  pre, code, samp { white-space: pre-line; /* passage a la ligne specifique pour les elements a chasse fixe */ } }
/* orientation iOS5 font-size fix */
@media (orientation: landscape) and (max-device-width: 640px) { html, body { -webkit-text-size-adjust: 100%; } }
/* Print styles from HTML5 Boilerplate
Inlined to avoid required HTTP connection: h5bp.com/r */
@media print { pre, blockquote { page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }
/* --------------------------------------------------
 Hyperlinks  (c) 2010-2014 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net

----------------------------------------------------- */
/* Hyperlinks
[fr] Signalétique des hyperliens : http://letrainde13h37.fr/43/signaletique-hyperliens/ */
a { background: transparent; color: inherit; }

a:link { transition: .5s; }

a:visited { color: inherit; }

a:focus { outline: thin dotted; background: #222222 !important; border-color: #222222 !important; color: #f8f8f8 !important; text-shadow: none; }

a:hover { outline: 0; cursor: pointer; }

a:active { outline: 0; }

/* a { outline: none; }
[en] http://www.outlinenone.com
[fr] http://www.outlinenone.fr
*/
a:after, a:before, a small { font-size: 90%; opacity: .9; }

a[hreflang]:after { content: " [" attr(hreflang) "]"; }

/* External Links */
a.external:after { content: "\0000a0\279A"; }

a[hreflang].external:after { content: " [" attr(hreflang) "] ➚"; }

/* mailto / tel */
a.mailto:after { content: "\0000a0\2709"; }

a.tel:after { content: "\0000a0\2706"; }

/* Documents */
a.download:after { content: "\0000a0\21A7"; }

a[hreflang].download:after { content: " [" attr(hreflang) "] ↧"; }

a.audio:after { content: "\0000a0\266B"; }

a[hreflang].audio:after { content: " [" attr(hreflang) "] ♫"; }

/* Linked images */
a img { border: 0; }

a:focus img, a:active img { -moz-transform: translateY(1px); -webkit-transform: translateY(1px); -o-transform: translateY(1px); -ms-transform: translate(1px); transform: translateY(1px); }

@media print { a, a:visited { text-decoration: underline; }
  a:after { content: ''; }
  a[rel="external"]:after, a.external:after { content: " (" attr(href) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ''; }
  /* Don't show links for images, or javascript/internal links */ }
/* --------------------------------------------------
 Illustrations, images and albums  (c) 2010-2014 Tiny Typo v1.3 - MIT License - tinytypo.tetue.net

----------------------------------------------------- */
/* Make images responsive by default */
img, object, embed { max-width: 100%; height: auto; }

@media print { img { max-width: 100% !important; } }
img { vertical-align: middle; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* thumbnail */
.thumb, .thumb.left { margin: 0 10px 10px 0; }

.thumb.right { margin: 0 0 10px 10px; }

/* style effects */
img.round { border-radius: 5px; }

img.circle { border-radius: 50%; }

img.border { padding: 4px; background-color: #fff; border: 1px solid #bbb; }

img.shadow { box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7), -1px 2px 20px rgba(255, 255, 255, 0.6) inset; }

/* figure */
figure { margin: 0; margin-bottom: 0.75em; text-align: center; }

figure.center { margin-bottom: 1.5em; }

figure.left { margin-right: 1.5em; }

figure.right { margin-left: 1.5em; }

@media (max-width: 640px) { figure { margin-bottom: 1.5em; }
  figure.left { float: none; margin-right: 0; }
  figure.right { float: none; margin-left: 0; } }
/* album */
.album { margin-bottom: 1.5em; }

.album ul { overflow: hidden; margin: 0; list-style: none; }

.album li { float: left; margin: 0; margin: 0 10px 10px 0; }

.album .thumb { margin: 0; }

@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; src: local("Titillium"), local("Titillium Web"), local("TitilliumWeb-Regular"), url(./TitilliumWeb-Regular.woff) format("woff"), url(https://dascritch.net/themes/DSN13/fonts/TitilliumWeb-Regular.woff) format("woff"); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; src: local("Titillium Bold"), local("Titillium WebBold"), local("TitilliumWeb-Bold"), url(./TitilliumWeb-Bold.woff) format("woff"), url(https://dascritch.net/themes/DSN13/fonts/TitilliumWeb-Bold.woff) format("woff"); }
body { overflow-x: hidden; color: black; background: url(./graphy-light.png); font-family: 'Titillium Web','Ubuntu', sans-serif; font-size: 1.1em; }

section, article, h1, h2, h3, img, a, span, #carte { transition-property: opacity background color max-height transform; -moz-transition-property: opacity background color max-height transform; -webkit-transition-property: opacity background color max-height transform; transition-duration: 0.5s; -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; }

a, a:visited { color: #00F; text-decoration: none; }

a:hover, a.active { background: rgba(0, 0, 255, 0.2); text-decoration: underline; }

a img { border: 0; }

p { margin: 10px 0; }

section, aside, footer { margin: 50px 20px 10px; }

main { display: flex; flex-direction: column; width: 100vw; align-items: center; }

section { max-width: 1800px; padding: 28px 0px 6px; text-align: center; backdrop-filter: blur(2px); }

.no { display: none; }

menu { background: #fff; background: url(./graphy-blueprint.png); position: fixed; /* TODO : passage en propriété CSS3 semi fixe; */ position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0px; width: 100%; border-bottom: 1px #A2A2A2 solid; box-shadow: #ddd 0px 10px 5px 0px; box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px 0px; z-index: 10; padding: 0px; margin: 0px auto; text-align: center; }

menu li { display: inline-block; padding: 0px; margin: 0px; }

menu a, menu a:visited, menu a:hover, menu a:active { display: inline-block; border: none; padding: 3px 4px; color: white; }

.favicon { width: 16px; height: 16px; }

.fn strong { white-space: nowrap; }

.family-name { white-space: nowrap; }

#nightshot { width: 128px; height: 128px; margin: 0 20px 10px 0; display: inline-block; vertical-align: middle; }

#carte { width: 415px; /* 83mm x 52mm */ height: 260px; text-align: center; position: relative; float: right; border: 1px grey solid; box-shadow: #ddd 6px 10px 10px 5px; box-shadow: rgba(0, 0, 0, 0.3) 6px 10px 10px 5px; margin-bottom: -60px; margin-left: -20px; z-index: 10; /*  translateX was 40px, but incredibely hard to tune */ -moz-transform: rotate(10deg) translateX(5px) translateY(-100px); -o-transform: rotate(10deg) translateX(5px) translateY(-100px); -ms-transform: rotate(10deg) translateX(5px) translateY(-100px); -webkit-transform: rotate(10deg) translateX(5px) translateY(-100px); transform: rotate(10deg) translateX(5px) translateY(-100px); background-color: white; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.2, #e6e6e6), color-stop(0.6, #f5f5f5), color-stop(0.8, #fff)); background-image: -moz-linear-gradient(center bottom, #e6e6e6 20%, #f5f5f5 60%, #fff 80%); background-image: -o-linear-gradient(center bottom, #e6e6e6 20%, #f5f5f5 60%, #fff 80%); background-image: -ms-linear-gradient(center bottom, #e6e6e6 20%, #f5f5f5 60%, #fff 80%); background-image: gradient(linear, left bottom, left top, color-stop(0.2, #e6e6e6), color-stop(0.6, #f5f5f5), color-stop(0.8, #fff)); background-image: linear-gradient(center bottom, #e6e6e6 20%, #f5f5f5 60%, #fff 80%); }

#carte a { border: none; padding: 0; }

h1 { font-weight: normal; text-align: left; }

h2 { text-align: center; margin: 4px auto; }

#me, .describ { display: grid; max-width: 800px; place-items: center center; margin: auto; padding: 10px 10px; }

.chapeau { text-align: center; max-width: 800px; margin: 0 auto; }

article { clear: both; padding: 0; margin: 5px 5px; position: relative; border: 1px #A2A2A2 dashed; text-align: left; }

.bloc { display: block; background-color: rgba(255, 255, 255, 0.3); margin: 0; padding: 10px; }

a.bloc { color: #000; }

a.bloc h3 { color: #00F; }

p { text-align: left; }

#carte h2 { position: absolute; bottom: 120px; /* approx (415-36)÷2 */ width: 100%; font-size: 36px; }

#carte p { position: absolute; bottom: 5%; text-align: center; width: 100%; }

#carte p a { padding: 4px 8px; }

#rea article { margin: 10px auto; }

#rea header { display: flex; flex-direction: row; justify-content: center; position: relative; text-align: center; }

#rea img { flex: 0 0 600px; max-width: 600px; }

.teaser { flex: 0 0 600px; /*display : inline-block;*/ background: rgba(255, 255, 255, 0.4); padding: 6px; }

.level2 div, .level3 div { display: flex; justify-content: center; flex-wrap: wrap; flex-basis: 50%; }

.level2 article { display: grid; width: 45%; vertical-align: top; text-align: left; }

.level2 img { width: 200px; max-width: 50% !important; margin: 0 10px 10px 0; }

.level2 p { clear: both; }

.level3 { text-align: center; }

.level3 div { flex-basis: 33%; }

.level3 article { display: grid; width: 30%; vertical-align: top; text-align: left; }

.level3 img { max-width: 35% !important; margin: 0 0 10px  10px; }

footer { text-align: center; }

footer span { display: inline-block; }

@media all and (min-width: 1024px) { .level2 article, .level3 article { max-width: 800px; } }
@media all and (max-width: 1200px) { #rea header { display: block; }
  #rea article img { display: block; margin: 0 auto; width: 100%; } }
@media all and (max-width: 849px) { #carte { width: 375px; /* 415 - (4px de rognés × 2 × 5 <a> */ }
  #carte p a { padding: 4px; }
  #nightshot { width: 96px; height: 96px; margin-right: 10px; }
  h1 { font-size: 1.7em; }
  .level3 article { width: 45%; }
  #rea header { display: block; }
  #rea article img { display: block; margin: 0 auto; width: 100%; } }
@media all and (max-width: 720px) { #carte { position: relative; float: none; top: -90px; margin: 5px auto -60px; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); background-image: gradient(linear, left bottom, left top, color-stop(0.8, #e6e6e6), color-stop(0.4, #f5f5f5), color-stop(0.2, #fff)); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.8, #e6e6e6), color-stop(0.4, #f5f5f5), color-stop(0.2, #fff)); background-image: -moz-linear-gradient(center top, #e6e6e6 20%, #f5f5f5 60%, #fff 80%); }
  #nightshot { display: inline-block; vertical-align: middle; }
  #me p { clear: left; }
  .level2 article { display: block; width: auto; }
  .level3 article { width: 45%; } }
@media all and (max-width: 620px) { section, aside, footer { margin: 20px 0px 10px; }
  #rea article { width: 95%; vertical-align: middle; }
  #rea .teaser { position: relative; padding: 6px; width: auto; top: 0; left: 0; background: none; }
  .level3 div { display: block; }
  .level3 article { display: block; width: auto; } }
@media all and (max-width: 420px) { p { font-size: 0.9em; }
  #carte { width: 260px; top: -90px; left: -20px; margin: 5px auto -60px; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); background: black; background-image: gradient(linear, left bottom, left top, color-stop(0.8, #e6e6e6), color-stop(0.4, #f5f5f5), color-stop(0.2, #fff)); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.8, #e6e6e6), color-stop(0.4, #f5f5f5), color-stop(0.2, #fff)); background-image: -moz-linear-gradient(center top, #e6e6e6 20%, #f5f5f5 60%, #fff 80%); }
  #carte h2 { font-size: 24px; }
  #carte p span { display: none; }
  #carte p a { /*display : block;*/ padding: 4px; }
  #nightshot { width: 64px; height: 64px; margin: 0 10px 10px 0; }
  h1 { font-size: 1.5em; } }
#konami * { border: 1px #A2A2A2 dashed; }

#konami *:hover { border: 1px #A2A2A2 solid; }

@media (prefers-color-scheme: dark) { body, a.bloc { color: #ccc; }
  body { background: url(./graphy-dark.png); }
  a, a:visited, a.bloc h3 { color: #aaF; }
  a:hover, a.active { background: rgba(0, 0, 255, 0.2); }
  .bloc, .teaser { background-color: rgba(255, 255, 255, 0.1); }
  #carte { color: black; }
  #carte a { color: #007; } }

/*# sourceMappingURL=compressed.css.map */