/* les CSS m'angoissent */


/* https://ateliers.esad-pyrenees.fr/web/pages/ressources/css/reset/ */
/* Réinitialiser le “modèle de boite”, afin que `padding` et `border` soient contenus dans le `width` d’un élément */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Autoriser des hauteurs en pourcentage dans le site ; adapté pour les sites “application” */
html, body { height: 100%; }

/* Hauteur de ligne et amélioration du rendu typographique */
body { line-height: 1.45; -webkit-font-smoothing: antialiased; }

/* Amélioration des comportement par défaut des médias */
img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; }

/* Suppressions des margin et padding ; implique que toutes les marges “naturelles” des éléments soient redéfinies */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

/* Suppression des différences de corps et de graisse sur les titres */
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

/* Réinitalisation des propriétés typographiques sur les éléments de formulaire */
input, button, textarea, select { font: inherit; margin: 0; }

/* suppression des bordures sur les iframes */
iframe { border: 0; }



:root {
    --background-color-1: white;
    --background-color-2: #eee;
    --text-color-1: black;
    --link-color-1: blue; /* link */
    --link-color-2: #c00; /* hover, active */
    --link-color-3: #7D457D; /* visited */
    --link-underline-color: #707070;
    --border-color: #c0c0c0;
    --max-width: 40em;
}

html {
    scroll-padding-top: 7rem;
}

body {
    margin: 0;
    padding: .5rem;
font-family: sans-serif; /* pour plus tard : https://modernfontstacks.com/ */
font-weight: normal;

    line-height: 1.9;
    background-color: var(--background-color-1);
    color: var(--text-color-1);
    max-width: var(--max-width);
    margin: 0 auto;
}

main > * {
  margin-top: 1rem;
}


header, main, footer {
    max-width: var(--max-width);
    /*margin: 0 auto 2rem auto;*/
    margin-bottom: 1rem;

}

/* links */

a:link, a:visited {
    color: var(--link-color-1) ; /* var(--link-color-1); */
    text-decoration: none;
    border-bottom: 1px var(--link-underline-color) solid;
    text-decoration-color: var(--link-color-1); /*var(--link-underline-color);*/
}

a:hover {
    color: var(--link-color-2);
    border-bottom: 1px var(--link-underline-color) solid;
}
a:active {
    color: var(--link-color-2);
    border-bottom: 1px var(--link-color-2) solid;
}


/* header */

header {
    /*position: sticky;
    top: 0;*/
    background-color: var(--background-color-1);
    padding: 0 0 1rem 0;
    border-bottom: solid 1px;
    line-height: 1.5;
}

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

header a:active {
    color: var(--link-color-2);
    text-decoration-color: var(--link-color-2);
}

/*
header nav ul {
    padding: 0 0 .5rem 0 ;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
}
header nav ul li:first-child {
    font-weight: bold;
}
*/

/* footer */

footer {
    border-top: solid 1px;
    line-height: 1.5;
    padding: 1rem 0;
}

/* pre et code */

pre, code, kbd {
    background-color: var(--background-color-2);
    font-family: monospace;
}
pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

code, kbd {
    padding: 0 0.3rem;
    font-size: .8rem;
}


a code {
    padding: 0;
    background-color: var(--background-color-1);
}
pre code {
    display: block;
    line-height:1.3;
    padding: .5rem;
    border: 1px solid var(--border-color);
}
/* vrac */

h1, h2, h3,h4 {
  font-weight: bold;
  line-height: 1.2;
}
h1 {
  font-size: 1.4rem;
  margin-top: 1rem;
}
h1 + * {
  margin-top: 2rem;
}
h2 {
  font-size: 1.2rem;
  margin: 2.5rem 0 1.5rem 0;
}
h3 {
  font-size: 1rem;
  margin: 2.5rem 0 1.5rem 0;
}
h4 {
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
}

#meta-haut-post {
    font-style: italic;
    padding-bottom: 1rem;
}

blockquote {
    border-left: 2px solid var(--border-color);
    padding-left: 1rem;
    margin: 2rem;
}

ul  {
    margin-left: 1rem;
}
li p {
    margin: 0;
    padding: 0;
}

figure {
    text-align: center;
}
figcaption {
    font-style: italic;
    font-size: small;
    text-indent: 0;
}

img {
   max-width: 100%;
   border: 1px solid var(--border-color);
}
article + article {
    border-top: solid 1px;
}

p#single-meta {
    font-style: italic;
    margin-bottom: 2rem;
}

.liste-section time::after {
    content: " · " ;
}