@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('AtkinsonHyperlegibleNext-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: bold;
  font-weight: 400;
  src: local(''),
       url('AtkinsonHyperlegibleNext-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('AtkinsonHyperlegibleMono-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

@font-face {
        font-family: "Wolf's bane II";
        font-style: normal;
        src: local(''),
        url('wolfsbane2ii.ttf') format('truetype'), 
}

@font-face {
        font-family: "Wolf's bane II Border";
        font-style: normal;
        src: local(''),
        url('wolfsbane2iiacad.ttf') format('truetype'), 
}
:root
{
        --font-size-normal: 1rem;
        --font-size-toc: 0.75rem;
        --font-size-tag: 0.85rem;
        --font-size-xs: 0.75rem;
        --font-size-mobile: 0.8rem;

        --width-content: 42rem;
        --width-toc: 20rem;
        --width-note: 12rem;
        --width-popover: 25rem;
        --nav-height: 5rem;

        --space-sm: 1rem;
        --space-3xs: 0.25rem;

        --border-size: 1px;
        --border-size-xl: 0.25rem;
        --border-radius: 0.25rem;
}
:root
{
    --light0: #eceff4;
    --light1: #d8dee9;
    --dark0:  #2e3440;
    --dark1:  #434c5e;
    --orange: #d16400;
    --red: #80261B;
    --green: #22CC80;

    --text: var(--dark0);
    --text2: var(--dark1);
    --text3: var(--light0);
    --background: var(--light0);
    --background2: var(--light1);

    --pagetitle-color: var(--red);
    --pagetitle-border: var(--green);

    --border: var(--red); 
    --link: var(--red);

    --selection-bg: var(--red);
    --selection-color: var(--light0);
}
* {
        box-sizing: border-box; /* pour que le padding ne casse pas la largeur 100% */
        line-height: 1.5;
}

body {
        font-size: var(--font-size-normal);
        font-family: "Atkinson Hyperlegible Next";
        /* font-family: "ACaslonPro-Regular.otf"; */
        background: var(--background);
        color: var(--text);

        margin: 0;
        padding: 0;

        border-bottom: var(--border-size-xl) solid var(--border);
        border-top: var(--border-size-xl) solid var(--border);
        display: flex;
        flex-direction: column;
        min-height: 100vh;
}

.content {
        flex: 1;
}

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

h1,
h2 {
        color: var(--text);
        line-height: normal;
        font-weight: normal;
}

a {
        color: var(--link);
        text-decoration: none;

        &:hover {
                text-decoration: underline;
        }
}

.tag {
        display: inline-flex;
        align-items: center;
        padding: 0 0.125rem;
        margin: 0.125rem 0;
        font-size: var(--font-size-tag);
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        border-radius: var(--border-radius);
        background-color: hsl(var(--tag-hue), 70%, 94%);
        color: hsl(var(--tag-hue), 60%, 25%);
        border: var(--border-size) solid hsl(var(--tag-hue), 40%, 80%);

        &:hover {
                transform: translateY(-0.25rem);
        }
}

.post-toc {
        position: sticky;
        float: left;
        width: var(--width-toc);
        top: 2rem;
        font-size: var(--font-size-toc);
        margin-left: calc(-1 * (var(--width-toc)));

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

#tagpage {
        margin-top: 0.625rem;
}

.container {
        margin: 0 auto;
        width: var(--width-content);
        padding: 0 1.25rem;
}

figure{
        display: flex;
        flex-direction: column;

        figcaption {
                color: var(--text2);
                text-align: center;
                margin: 0;
                font-size: var(--font-size-xs);
                line-height: 1.4;
                font-style: italic;

                p {
                        margin: 0;
                }
        }
}

.post {
        padding: 3rem 0;

        .post-info {
                width: 100%;
                height: 100%;
                color: var(--text2);
                margin-bottom: 1rem;

                .tags {
                        float: right;
                        text-align: right;
                        font-size: 1.04rem;
                        max-width: 60%;
                }
        }

        .post-title {
                font-family: "Wolf's bane II Border";
                /* font-size: 3rem; */
                font-size: 4rem;
                letter-spacing: 0.2rem;
                color: var(--pagetitle-color);
                /* -webkit-text-stroke: 0.003rem var(--pagetitle-border); */
                /* text-shadow: 0.1rem 0.1rem var(--pagetitle-border); */
                margin: 1rem 0;
                text-align: center;
        }

        .post-line {
                border-top: 0.4rem solid var(--border);
                /* display: block; */
                margin: 0 auto 2rem;
                width: 6rem;
        }

        p:has(img) {
                width: 100%;
                margin: 0 0 1rem;
                display: flex;

                align-items: flex-start;
                justify-content: center;
                gap: 0.625rem;
        }

        a:hover {
                text-decoration: underline;
        }

        img {
                margin: 0 auto 0.5rem;
                height: auto; /* conserve le ratio largeur * hauteur */
                flex: 1 1 auto; /* l'image prend toute la place dispo */
                max-width: 100%; /* ne dépasse pas taille du parent */
                min-width: 0; /* bypass la taille intrinsèque de l'image */
        }

        img + em {
                color: var(--light1);
                /* display: block; */
                font-size: 0.9rem;
                font-style: normal;
                text-align: center;
        }

        article {
                h1 {
                        font-family: "Wolf's bane II";
                        font-size: 2.5rem;
                        font-weight: normal;
                        letter-spacing: 0.2rem;
                        border-bottom: .2rem solid var(--border);

                        /* float: right; */
                        /* width: var(--width-toc); */
                        /* top: 2rem; */
                        /* font-size: var(--font-size-toc); */
                        /* /* font-size: 1rem; */ */
                        /* margin-right: calc(-1 * (var(--width-toc))); */
                        /* padding-left: 1rem; */
                }
        }

}
#preview-popover {
        border: var(--border-size) solid var(--border);
        border-radius: var(--border-radius);
        padding: 0 1.25rem 1.25rem 1.25rem;
        /* max-width: var(--width-popover); */
        width: calc((98vw - var(--width-content)) /2);

        color: var(--text); /* obligé de la forcer ici */

        /* Positionnement en haut à droite */
        margin: 0; /* évite le centrage automatique */
        top: 1.25rem;
        right: 1.25rem;
        left: auto; 

        overflow: visible; /* pour le cartouche */

        #popover-title {
                font-weight: bold;
                font-size: 0.85rem;
                text-transform: uppercase;
                color: var(--text);
                /* Style "Cartouche" */
                background: var(--background);
                padding: 0.125rem 0.5rem;
                border-radius: var(--border-radius);
                border: var(--border-size) solid var(--border);
                top: -0.9rem;
                position: relative;
                text-align: center;
        }

        #popover-content {
                font-size: var(--font-size-xs);
        }

        aside {
                visible: hidden;
        }

        p {
                margin: 0;
        }

        img {
                display: block;
                margin: 0 auto;
                max-width: 100%;
        }

        button {
                display: block;
                margin: 1rem auto 0 auto; 
        }
}

/* Animation d'entrée */
#preview-popover:popover-open {
        animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
        from {
                transform: translateX(100%);
                opacity: 0;
        }
        to {
                transform: translateX(0);
                opacity: 1;
        }
}
/* iphone */
@media (max-width: 900px) {
        * {
                overflow-wrap: break-word;
                word-wrap: break-word;
        }

        .nav {
                .container {
                        flex-direction: column;
                        text-align: left;
                }

                ul {
                        margin: 0 auto 1rem auto;
                }
        }

        .post {
                padding: 0;
        }

        #preview-popover {
                right: 1.25rem;
                left: 1.25rem; 
                width: 90%;
                margin: 2rem auto 0 auto;
        }

}


/* ipad */
@media (max-width: 1100px) {
        .container {
                margin: 1rem auto 0 auto;
                width: 100%;
                padding: 0 1rem;
        }
}