/* CSS default values: https://www.w3schools.com/cssref/css_default_values.php */
/* Règles d'utilisation : les classes sont pour les caractéristiques (p. ex. "flex") et les id pour la fonction sur les éléments uniques (p. ex. "subtitle") et itemprop pour la fonction des éléments redondants (p. ex. "post-description") */
/* Couleurs sympa :  SteelBlue; SeaGreen; DarkOliveGreen */

/* BASIQUE */
html {
    --copyright: "(c) ALACRITIE 2025";
    /* Android replaces Times New Roman with its free alternative, which looks worse, so I have to trick it using font-face directly */
    font-family: freeserif, serif;
    /*font-family: freesans, sans;*/
    font-size: 18px;
	font-variant-numeric: slashed-zero oldstyle-nums;
    /*TODO: is this useful?? */
    /*height: 100%;*/
    min-height: 100%;
    color: black;
    --color-bg:         whitesmoke;
    --color-bg-darker:  lavender;
    --color-bg-lighter: white;
    /*
    --background-stripes: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 20px,
        var(--color-bg-darker) 20px, var(--color-bg-darker) 40px);
    --background-stripes-alt: repeating-linear-gradient(-45deg, var(--color-bg), var(--color-bg) 20px,
        var(--color-bg-darker) 20px, var(--color-bg-darker) 40px);
    --background-stripes-print: repeating-linear-gradient(45deg,
        white, white 20px, whitesmoke 20px, whitesmoke 40px);
    --background-stripes-print-alt: repeating-linear-gradient(-45deg,
        white, white 20px, whitesmoke 20px, whitesmoke 40px);
    background-image: var(--background-stripes);
    */
    background: url("/lune-lavender.png") right / contain no-repeat fixed;
    background-color: var(--color-bg);
}
body {
    margin: auto;
}
main {
    border: 1px solid black;
    box-shadow: 0 0 5px CadetBlue
}
body > * {
    padding: 1rem;
}
*, ::before, ::after, :before, :after {
    box-sizing: border-box;
}
a {
    color: black;
    /*background-color: var(--color-bg-darker);*/
    border-bottom: 1px dotted;
    text-decoration: none;
}
a:hover {
    background-color: var(--color-bg-darker);
}
h1, h2, h3, h4, h5 {
    font-family: freeserif;
    font-weight: bold;
    font-variant: small-caps;
    /*text-transform: uppercase;*/
    margin: .5rem 0;
    text-align: center;
}
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.67rem;
}
h3 {
    font-size: 1.5rem;
}
h4 {
    font-size: 1.25rem;
}
h5 {
    font-size: 1.1rem;
    text-align: start;
}
p {
    line-height: 1.15;
    text-align: justify;
    margin: .50rem 0;
}
i, em {
    font-style: italic;
}
img, figure, iframe {
    max-width: 100%; /* fill container if possible */
    break-inside: avoid;
    page-break-inside: avoid;
    margin: auto;
    padding: 1rem 0;
}
code, pre {
    font-family: monospace;
    font-variant-numeric: slashed-zero;
    line-height: 1.10;
    background-color: var(--color-bg-lighter);
}
pre {
    white-space: pre;
}
sup {
    vertical-align: super;
    font-size: smaller;
}
ul, ol {
    padding-left: 2rem;
    /*margin: .33em 0;*/
}
ul {
    list-style: "– ";
}
ol {
    list-style-type: decimal;
}
blockquote {
    font-style: italic;
    padding-left: 2rem;
}
textarea, input, button {
    resize: none;
    text-transform: lowercase;
    font: inherit
}
b, strong {
    font-weight: bold;
}
twitter-widget {
    margin: auto
}

/* CLASSES */

.decoration-none {
    text-decoration: none;
}
.decoration-underline {
    text-decoration: underline;
}
.decoration-overline {
    text-decoration: underline overline;
}
.align-center {
    text-align: center;
}
.align-end {
    text-align: end;
}
.font-monospace {
    font-family: monospace;
}
.font-normal {
    font-size: 18px;
}
/* NB: larger et smaller sont des tailles de police relatives à l'élément parent, pas des tailles fixes */
.font-bigger, .font-larger {
    font-size: larger;
}
.font-smaller {
    font-size: smaller;
}
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex > * {
    margin: .10rem .25rem;
}
.flex-space-evenly {
    justify-content: space-evenly;
}
.flex-wrap {
    flex-wrap: wrap;
}
.float-right {
    float: right
}
.lmargin-2rem {
    margin-left: 2rem;
}
.lmargin-4rem {
    margin-left: 4rem;
}
.link-undecorated {
    border: unset;
    background: unset;
    text-decoration: unset;
}
.encadre {
    padding: 1rem;
    border: 1px dashed black;
    /*border: 2px dashed var(--color-bg-darker);*/
}
.bandeau {
    margin: 1rem -1rem;
    padding: .25rem 1rem;
}

/* GÉNÉRALITÉS */
@media only screen and (max-width:750px) {
    html {
        font-size: 14px;
    }
    main {
        padding: .25rem;
    }
    main > *, .encadre {
        border-left: 0 !important;
        border-right:0 !important
    }
    section#posts-navigation {
        flex-direction: column;
    }
    section#posts-navigation > * {
        width: unset !important;
        padding: 16px 0;
    }
    header#site-header.flex {
        flex-direction: column;
    }
    footer.flex {
        flex-direction: column-reverse;
    }
    footer.flex > * {
        margin: 0 .50rem 1rem .50rem;
    }
}
#meta, #meta2 {
    font-style: italic
}
figcaption {
    text-align: center;
}
button {
    background-color: black;
    color: white
}
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::placeholder{
    color: #ccc !important /*TODO: does not work*/
}


/* FILETS */
/* Ornements typographiques :
1F65F : feuille de vigne couchée
    - pose souvent des problèmes d'affichage, pour l'afficher correctement utiliser GNU Unifont
2767 : feuille aldine couchée
2766 : grosse feuille aldine
273A : astérisme soleil
*/
hr {
	text-align: center;
	overflow: visible;
	border: none;
	height: 0;
    width: 67%;
    margin: 0 auto;
}
/* couillard de niveau 1, de base */
hr {
	border-top: 1px solid black;
	margin: 1em auto;
}
hr::after {
	color: black;
	background: var(--color-bg);
	font-size:1.5em;
	content: '\2766'; /* grosse feuille aldine */
	position: relative;
	top: -.5em;
}
/* astérisme, couillard de niveau 2 */
/* TODO: (filet de séparation avec les notes de bas de page) */
hr.asterisme, .footnotes hr {
    border-top: 3px double black;
    margin: 1rem auto;
    /* change tout! */
    rotate: 180deg;
}
hr.asterisme::after, .footnotes hr::after {
    color: #333;
    background: var(--color-bg);
    font-size: 1.5rem;
    position: relative;
    content: '\2042';
}
/* fiet, couillard de niveau 3 (soleil) */
hr.filet {
	height: 5px;
	/* 3 traits avec 2 bordures */
	border-top: 3px double black;
	border-bottom: 1px solid black;
	margin: 1.25em auto;
}
hr.filet::after {
	color: black;
	background: var(--color-bg);
	font-size:2em;
	content: '\273A'; /* soleil */
	position: relative;
	top: -.5em;
}

/* BODY */
body {
    margin: auto;
    max-width: 750px;
    min-height: 100%;
}

/* HEADER */
header#site-header a {
    border: unset;
    background-color: unset;
}
header#site-header img {
    max-height: 100px;
}
header#site-header h1 {
    font-style: italic;
    font-weight: bold;
    align-items: center;
    font-variant: none;
    text-transform: none;
}
header#site-header h1 .capital {
    font-size: 300%;
    font-weight: bold;
    font-style: italic;
}

/* MAIN */
main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 750px;
    width: 100%;
    padding: 1rem;
}
main section {
    margin: 1rem 0;
}
section#posts {
    min-width: 80%;
    padding: 16px 0;
}
section#posts p {
    font-size: 100%;
    margin: 4px 0;
}
section#posts .more {
    font-style: italic;
    text-align: right;
    padding: 16px 32px;
}
article#post-list-item {
    justify-content: center;
    align-items: baseline;
    padding: 8px 16px;
}
article#post-list-item h1 {
    font-size: 120%;
}
article#post-list-item p#time {
    width: 10em;
}
article#post-list-item > div {
    width: 100%
}
article#post-list-item div#post-author{
    font-size: 80%
}
article#post-list-item p#post-description {
    font-style: italic
}
section#meta > ul li {
    padding: 4px 12px 4px 0;
}
section#meta > ul li:before,
section#meta > ul li::before {
    content: "·  ";
    font-weight: bold
}
.font-oldstyle-nums, .oldstyle-nums {
    font-variant-numeric: oldstyle-nums;
}
.font-smallcaps, .smallcaps {
    font-variant-caps: small-caps;
}
p.lettrine::first-letter {
	font-family: "Elzevier";
	text-transform: uppercase;
	font-weight: normal;
    font-size: 500%;
    font-variant: normal;
	float: left;
}
p.lettrine {
    text-indent: unset !important;
}
.footnote-ref {
    font-weight: bold;
}
a.footnote-backref,
a.footnote-ref {
    border: none;
    background-color: unset;
}
#contenu {
    /*padding-top: 1rem;*/
}
/*
#contenu      >          p:nth-child(odd),
#contenu      > blockquote:nth-child(odd),
#contenu > ol >         li:nth-child(odd), 
#contenu > ul >         li:nth-child(odd), 
#contenu      >         h1:nth-child(odd),
#contenu      >         h2:nth-child(odd), 
#contenu      >         h3:nth-child(odd), 
#contenu      >         h4:nth-child(odd), 
#contenu      >         h5:nth-child(odd) {
    transform: rotate(.66deg);
}
#contenu      >          p:nth-child(even),
#contenu      > blockquote:nth-child(even),
#contenu > ol >         li:nth-child(even), 
#contenu > ul >         li:nth-child(even), 
#contenu      >         h1:nth-child(even),
#contenu      >         h2:nth-child(even), 
#contenu      >         h3:nth-child(even), 
#contenu      >         h4:nth-child(even), 
#contenu      >         h5:nth-child(even) {
    transform: rotate(-.66deg);
}
*/
#contenu p, #contenu li {
    line-height: 1.15;
    text-align: justify;
}
#contenu > p {
    text-indent: 1rem;
}
.img-container {
    padding: 0 2rem;
    break-inside: avoid;
}
#contenu img {
    display: block;
}
#contenu img#frontispice {
    padding: 2.50rem 1rem;
    
}
#contenu figcaption {
    font-size: smaller;
    font-style: italic;
    text-align: center;
    margin: .25rem;
}
#contenu .footnotes li {
    font-size: smaller;
    word-break: break-word;
}
.footnotes .footnote-backref {
    padding-left: .50rem
}

/* FOOTER */
footer a {
    font-weight:bold;
    border: unset;
}
footer > *, footer #links > * {
    margin: auto .5rem;
}
footer #links img {
    width: 20px;
    height: 20px;
}
form#newsletter input {
    /*background-color: var(--color-bg-darker);*/
    background-color: unset;
    border: inherit;
    border-bottom: 1px dotted;
    color:inherit;
}
form#newsletter input[type=text] {
    width: 8rem;
}

/* COMMENTS */
@media only screen and (max-width: 500px) {
    #post-comments #comments > div#author,
    #post-comments #comments > div#message {
        width: 100%;
    }
    #post-comments #comments > div#message {
        padding: 1em 1em 3em 1em;
        text-align: inherit !important
    }
    #post-comments #comments > div#author {
        text-align: center !important
    }
    #post-comments form > * {
        width: 90% !important
    }
}
section#post-comments {
    border: 1px solid black;
}
#comments > div {
    margin: 32px 0;
}
#comments div#author {
    min-width: 9em;
    padding: 0.5em;
    font-style: italic;
    text-align: right !important;
    border-right: 1px solid  black;
    border-bottom: 1px solid black;
}
#comments div#author * {
    text-align: inherit !important
}
#comments div#message {
    padding: 1em 2em 2em 2em;
}
#post-comments form {
    padding: 16px 16px;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
#post-comments form > * {
    padding: 1em;
    margin: 1em 0;
    width: 40%;
}
#post-comments form > textarea {
    width: 80%;
    height: 10em
}

/* IMPRESSION */
@media print {
    /* En-tête et pieds de page pour l'impression */
    /* NB: margins are NOT supported on Firefox */
    @page {
        font-size: smaller; /* taille pour les éléments @page uniquement */
        margin-bottom: 3em;
        @bottom-left {
            content: var(--copyright);
        }
        @bottom-right {
            content: counter(page) "/" counter(pages);
        }
        margin-top: 3em;
        @top-center { content: var(--print-header, ""); } /* variable CSS dynamique générée par javascript */
    }
    /* Pas d'en-tête sur la première page */
    @page :first { @top-center { content: unset; } }
    html, main {
        background: unset;
        border: unset;
        box-shadow: unset;
    }
    a {
        background-color: #eef;
    }
    code, pre {
        background-color: #eee;
    }
    html:after {
        float: right;
        font-style: italic;
        font-size: smaller;
        content: var(--copyright);
    }
    img {
        padding: 0 !important;
    }
    #frontispice {
        break-after: always;
    }
    #site-logo-link,
    nav,
    #imprimer,
    #tags,
    #meta2,
    iframe[title="YouTube Video"],
    .footnote-back,
    .footnote-backref,
    .footnote-return,
    #share,
    #posts-navigation,
    #post-comments,
    form,
    footer {
        display: none !important;
    }
    /* NB: the youtube shortcode div creates a huge padding empty zone that's CSS hardcoded */
    div:has(iframe[title="YouTube Video"])::before {
        content: "[Vidéo YouTube]";
    }
    header#site-header {
    }
    header#site-header a#site-title-link {
        display: block;
        margin: auto;
    }
    #contenu > *, #contenu > * > * {
        transform: unset !important;
    }
}

/* vim: tabstop=4:expandtab:sw=4
*/