@charset "UTF-8";
/*!
 * -----------------------------------------------------------------------------
 * www.lafilacroche.com - may 2019 - author: Isabelle Lepage Licence CC BY.
 * Based on www.knacss.com v7.1.1 (december, 10 2018):
 *   @author: Alsacreations, Raphael Goetter  Licence WTFPL http://www.wtfpl.net
 * Modified - fev 2023 - author: Pirogh <pierre.saramito@imag.fr>
 *   web: https://pirogh.artliba.org 
 *   for changes, see the "Pirogh" marks in this file
 * Modified - jan 2024 - author: Pirogh <pierre.saramito@imag.fr>
 *   web: https://pirogh.artliba.org 
 *   colors as css variables, please includes color.css before this file
 * -----------------------------------------------------------------------------
 */

/*= Reboot - basic reset*/
*,
*::before,
*::after {
          box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/*
@-ms-viewport {
  width: device-width;
} 

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}
*/

article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-default);
  text-align: left;
  background-color: var(--color-white);
}

hr {
    box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

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

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

dt {
  font-weight: 700;
}

dd {
  margin-bottom: .5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bold;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  color:            var(--color-text-link-over);
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: var(--color-text-link-over);
  text-decoration: underline;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

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

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

a {
    touch-action: manipulation;
}

/table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: var(--color-text-caption);
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

/*Fonts*/
@font-face {
    font-family: 'PTRootUIWebRegular';
    src: url('../fonts/PTRootUI_Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =Base - basic styles */

/* switching to border-box model for all elements */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
  /* avoid min-width: auto on flex and grid children */
  min-width: 0;
  min-height: 0;
}

html {
  /* set base font-size to equiv "10px", which is adapted to rem unit */
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  font-size: calc(1em * 0.625);
}

body {
  margin: 0;
  font-size: 2.2rem;
  background: var(--color-page-background);
  color: var(--color-text-default);
  font-family: 'PTRootUIWebRegular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  line-height: 1.6;
}

/* Links */
a {
  color: var(--color-text-default);
  text-decoration: none;
  border-bottom: thick solid var(--color-underscore-hyperref);
}

a:focus, a:hover, a:active {
  color:      var(--color-text-default);
  background: var(--color-text-background-link-over);
  text-decoration: none;
}

/* Headings */
h1, .h1-like {
  font-size: 4.8rem; /* increased by Pirogh */
}

h2, .h2-like {
  font-size: 3.6rem; /* increased by Pirogh */
  background: var(--color-text-background-selection);
}

h3, .h3-like {
  font-size: 2.4rem;
  background: var(--color-text-background-title-h3);
}

h4, .h4-like {
  font-size: 2.3rem;
  background: var(--color-text-background-title-h4);
}

h5, .h5-like {
  font-size: 2.25rem;
  background: var(--color-text-background-title-h5);
}

h6, .h6-like {
  font-size: 2.2rem;
  background: var(--color-text-background-title-h6);
}

/* Vertical rythm */
h1 {
  margin: 0;
  text-align: center;
  font-weight: bold;
}

h2,
h3,
h4,
h5,
h6,
dd {
  margin-top: 6rem;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: bold;
}

p,
address,
ol,
ul,
dl,
blockquote,
pre {
  margin-top: 0;
  margin-bottom: 3rem;
}

/* Avoid margins on nested elements */
li p,
li .p-like,
li ul,
li ol,
ol ol,
ul ul {
  margin-top: 0;
  margin-bottom: 3rem;
}

/* Max values */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video,
svg {
  max-width: 100%;
}

/* Styling elements */
ul,
ol {
  padding-left: 2em;
}

img,
video {
  vertical-align: middle;
  display: block;
  margin: auto;
  height: auto;
}

em,
.italic,
address,
cite,
i,
var {
  font-style: italic;
}

code,
kbd,
mark {
  border-radius: 2px;
}

kbd {
  padding: 0 2px;
  border: 1px solid var(--color-grey-light);
}

pre {
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
}

code {
  padding: 2px 4px;
  color:      var(--color-text-code);
  background: rgba(0, 0, 0, 0.04);
}

pre code {
  padding: 0;
  background: none;
  color: inherit;
  border-radius: 0;
}

mark {
  padding: 2px 4px;
}

sup,
sub {
  vertical-align: 0;
}

sup {
  bottom: 1ex;
}

sub {
  top: 0.5ex;
}

blockquote {
  position: relative;
  padding-left: 4rem;
  min-height: 4rem;
  background: var(--color-text-background-title-entry);
}

blockquote::before {
  content: "\00AB";
  position: absolute;
  left: 1rem;
  top: 0;
  font-size: 3.6rem;
  line-height: .9;
  color: var(--color-text-subtitle);
}

q {
  font-style: normal;
}

q,
.q {
  quotes: "“" "”" "‘" "’";
}

q:lang(fr),
.q:lang(fr) {
  quotes: "«\00a0" "\00a0»" "“" "”";
}

hr {
  display: block;
  clear: both;
  height: 2px;
  margin: 2rem 10rem 4rem;
  padding: 0;
  border: 0;
  color:            var(--color-text-background-title-h6);
  background-color: var(--color-text-background-title-h6);
}

blockquote,
figure {
  margin-left: 0;
  margin-right: 0;
}

figure {
  padding-bottom: 2rem;
}

code,
pre,
samp,
kbd {
  white-space: pre-wrap;
  font-family: hack, consolas, courier, monospace;
  line-height: normal;
}

::selection {
    background: var(--color-text-background-selection);
}

/* =Print - quick print reset*/

@media print {
  * {
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important;
  }
  body {
    width: auto;
    margin: auto;
    font-family: serif;
    font-size: 12pt;
  }
  p,
  .p-like,
  h1,
  .h1-like,
  h2,
  .h2-like,
  h3,
  .h3-like,
  h4,
  .h4-like,
  h5,
  .h5-like,
  h6,
  .h6-like,
  blockquote,
  label,
  ul,
  ol {
    color: var(--color-black);
    margin: auto;
  }
  .print {
    display: block;
  }
  .no-print {
    display: none;
  }
  /* no orphans, no widows */
  p,
  .p-like,
  blockquote {
    orphans: 3;
    widows: 3;
  }
  /* no breaks inside these elements */
  blockquote,
  ul,
  ol {
    page-break-inside: avoid;
  }
  /* page break before main headers
  h1,
  .h1-like {
    page-break-before: always;
  }
  */
  /* no breaks after these elements */
  h1,
  .h1-like,
  h2,
  .h2-like,
  h3,
  .h3-like,
  caption {
    page-break-after: avoid;
  }
  a {
    color: var(--color-black);
  }
  /* displaying URLs
  a[href]::after {
    content: " (" attr(href) ")";
  }
  */
  a[href^="javascript:"]::after,
  a[href^="#"]::after {
    content: "";
  }
}

/* =Tables*/
table,
.table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  vertical-align: top;
  margin-bottom: 2rem;
}

.table {
  display: table;
  border: 1px solid var(--color-table-border);
  background: transparent;
}

.table--zebra tbody tr:nth-child(odd) {
  background: var(--color-table-background-zebra);
}

.table caption {
  caption-side: bottom;
  padding: 1rem;
  color: var(--color-grey);
  font-style: italic;
  text-align: right;
}

.table td,
.table th {
  padding: 0.3rem 0.6rem;
  min-width: 2rem;
  vertical-align: top;
  border: 1px var(--color-table-border) dotted;
  text-align: left;
  cursor: default;
}

.table thead {
  color: var(--color-text-default);
  background: transparent;
}

.table--auto {
  table-layout: auto;
}

/* -----------------------------------------------------------------------------
 * Lafilacroche: mes ajouts
 * -----------------------------------------------------------------------------
 */

.pagep {
  max-width: 97vw; /* changed by Pirorgh, was 80rem, then 140rem, now dynamic */
  margin: auto;
}

header {
    text-align: center;
    background: var(--color-top-header-background-top);
}

header a {
    text-decoration: none;
    color: var(--color-text-default);
    font-weight: bold;
}

.logo {
    transition:transform .1s;
    padding-top: 1rem;
}

.logo:hover{
    /* when the mosse is over the logo: it rotates */
    transform: rotate(540deg);
}

.sitetitle {
    font-size: 4rem;
    margin: auto;
    background: var(--color-top-header-text-background);
    max-width: 40rem;
    border-radius: 5rem;
}

.baseline {
    margin: auto;
    background: var(--color-top-header-text-background);
    max-width: 70rem;
    border-radius: 2rem;
}

.menu {
    background: var(--color-top-header-menu-background);
    font-size: 2.7rem;
    list-style: none;
}

.menu ul {
    padding: 1rem 0;
    text-align: center;
    list-style: none;
}

.menu a {
    border: none;
    color: var(--color-white);
    font-weight: bold;
    text-decoration: none;
}

.menu li:focus, .menu li:hover, .menu li:active {
    background: var(--color-top-header-background-top);
}

.menu a:focus, .menu a:hover, .menu a:active {
    background: none;
}

@media (min-width: 576px) {
    .menu ul {
        padding: 0;
    }
    .menu li {
        display: inline-block;
        padding: 0.3rem 2rem;
    }
}

.entrytitle {
    padding: 1rem 3.5rem;
    background: var(--color-text-background-title-entry);
}

.entrytitle a {
    text-decoration: none;
    color: var(--color-text-default);
}

.entrycontent {
  padding: 3.5rem 3.5rem 15rem 3.5rem;
  /* png filename changed by Pirogh */
  background: url('../img/entry_foooter.png') right bottom no-repeat;
}

.entrycontent a img {
    cursor: zoom-in;
}

.hentry {
    padding-top: 2rem;
    background: var(--color-white);
    margin-bottom: 3rem;
}

figcaption {
    text-align: center;
    color: var(--color-text-subtitle);
}

.postinfo {
    text-align: center;
    font-size: 2rem;
    color: var(--color-text-subtitle);
    background: var(--color-white);
}

.postinfo a {
    color: var(--color-text-subtitle);
    text-decoration: none;
    border-bottom: thin solid var(--color-underscore-hyperref);
}

.readmore {
    color: var(--color-text-subtitle);
    border: none;
    text-decoration: underline;
}

.readmore::after {
    content: "\2728";
    position: absolute;
    padding-left: 0.5rem;
}

.postnav {
    background: var(--color-text-background-title-entry);
    padding: 2rem 2rem 10rem;
    font-size: 1.8rem;
}

.postnav a {
    border: none;
    color: var(--color-top-header-background-top);
    text-decoration: underline;
}

.postprev {
    float: left;
    width: 45%;
    text-align: left;
    position: relative;
    padding-left: 2rem;
}

.postprev::before {
    content: "\00AB";
    position: absolute;
    left: 0;
}

.postnext {
    float: right;
    width: 45%;
    text-align: right;
    position: relative;
    padding-right: 2rem;
}

.postnext::after {
    content: "\00BB";
    position: absolute;
    right: 0;
}

.taglist {
    list-style: none;
    text-align: center;
    color: var(--color-text-subtitle);
}

.taglist a{
    border: none;
    text-decoration: underline;
}

.pagenav {
    background: var(--color-text-background-title-entry);
    /* padding: increased by Pirogh, was 2rem
     * the double-nav "Older+First" 
     * renders in two lines on mobile phones
     */
    padding: 3.5rem;
    text-align:center;
    margin-bottom: 2rem;
}

.pagenav a {
    border: none;
    color: var(--color-top-header-background-top);
    text-decoration: underline;
}

.pageprev {
    float: left;
    text-align: left;
    position: relative;
    padding-left: 2rem;
}

/* removed by Pirogh:
.pageprev::before {
    content: "\00AB";
    position: absolute;
    left: 0;
}
*/

.pagenext {
    float: right;
    text-align: right;
    position: relative;
    padding-right: 2rem;
}

/* removed by Pirogh:
.pagenext::after {
    content: "\00BB";
    position: absolute;
    right: 0;
}
*/

.pagenum {
    position: relative;
}

footer {
    padding: 2rem;
    text-align: center;
    background: var(--color-text-default);
    list-style: none;
}

.footermenu ul {
    padding: 0;
}

.footermenu a {
    color: var(--color-text-background-link-over);
    text-decoration: underline;
    border-bottom: none;
    padding: 1rem;
}

.footermenu a:hover {
    color: var(--color-text-default);
}

.footermenu:active {
    color: var(--color-text-default);
}

@media (min-width: 576px) {
    .footermenu li {
        display: inline-block;
    }
}

.feedlink a {
    color: var(--color-text-background-selection);
}

.sociallink {
    padding: 2.5rem 0;
}

.sociallink a {
    color: var(--color-text-social-menu);
}

.about {
    color: var(--color-text-background-title-h3);
    padding-top: 2.5rem;
}

.about a {
    color: var(--color-text-background-title-h4orange);
    padding: 0;
}

.active {
    background: var(--color-text-background-link-over);
}

.active a {
    color: var(--color-text-default);
}

.active a:hover {
    color: var(--color-white);
}

.archive li {
    color: var(--color-top-header-menu-background);
    list-style: none;
    line-height: 3;
    border-bottom: 0.1rem dashed var(--color-text-background-title-entry);
}

.archive a {
    border: none;
    text-decoration: underline;
}

/*highlights for pygment*/

/* Dracula Theme v1.2.5
 *
 * https://github.com/zenorocha/dracula-theme
 *
 * Copyright 2016, All rights reserved
 *
 * Code licensed under the MIT license
 * http://zenorocha.mit-license.org
 *
 * @author Rob G <wowmotty@gmail.com>
 * @author Chris Bracco <chris@cbracco.me>
 * @author Zeno Rocha <hi@zenorocha.com>
 */

 .highlight .hll { background-color: var(--color-pygment-yellow) }
 .highlight  { background: var(--color-pygment-background); color: var(--color-pygment-foreground); padding: 1rem }
 .highlight .c, .ch, .cm, .cpf, .c1, .cs { color: var(--color-pygment-comment) }
 .highlight .err, .g, .l, .n, .x, .p, .gr, .gp, .gs, .gt, .ld, .no, .nd, .ni, .ne, .nn, .nx, .py, .w { color: var(--color-pygment-foreground) }
 .highlight .k, .o, .cp, .kc, .kn, .kp, .kr, .nt, .ow { color: var(--color-pygment-pink) }
 .highlight .gd { color: var(--color-pygment-red) }
 .highlight .ge { color: var(--color-pygment-foreground); text-decoration: underline }
 .highlight .gh, .gi, .gu { color: var(--color-pygment-foreground); font-weight: bold }
 .highlight .go { color: var(--color-pygment-current-line) }
 .highlight .kd, .nb, .nl, .nv, .vc, .vg, .vi, .vm { color: var(--color-pygment-cyan); font-style: italic }
 .highlight .kt { color: var(--color-pygment-cyan) }
 .highlight .m, .mb, .mf, .mh, .mi, .mo, .il { color: var(--color-pygment-purple) }
 .highlight .s { color: var(--color-pygment-yellow) }
 .highlight .na, .nc, .nf { color: var(--color-pygment-green) }
 .highlight .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss { color: var(--color-pygment-yellow) }
 .highlight .bp { color: var(--color-pygment-foreground); font-style: italic }
 .highlight .fm { color: var(--color-pygment-green) }

/* -----------------------------------------------------------------------------
 * Pirogh: my additions
 * -----------------------------------------------------------------------------
 */

/* all images was defined with display: block
 * but inlined images, e.g. emoticons in the text
 * should have "inline-something"
 */
.inlineimage {
  display: inline-block;
}

/* center, for convenience */
.center {text-align: center;}

.entrycontentnopagefooter {
  padding: 3.5rem 3.5rem 15rem 3.5rem;
}