:root 
{
    --font-sans: Arial,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-serif: 'Times',serif;
    --white: #FFF;
    --pk-50: #FAFAFA;
    --pk-100: #F4F4F5;
    --pk-200: #E4E4E7;
    --pk-300: #D4D4D8;
    --pk-400: #A1A1AA;
    --pk-500: #71717A;
    --pk-600: #525252;
    --pk-700: #3F3F46;
    --pk-800: #262626;
    --pk-900: #18181B;

    --error-light:#ffb2c8;
    --error: #FF0000;


    --yellow-light: #FFEAB6;
    --yellow-dark: #6B2613;
    --purple-light: #EDE2FE;
    --purple-dark: #280B42;
    --blue-light: #D0F0FD;
    --blue-dark: #04283F;
    --turquoize-light: #C2F5E9;
    --turquoize-dark: #012524;
    --green-light: #D1F7C4;
    --green-dark: #0B1D05;
    --ratio: 1.5;
    --space-xs: calc(var(--space-base) / var(--ratio));
    --space-sm: calc(var(--space-base) / 1.25);
    --space-base: 0.9375rem;
    --space-lg: calc(var(--space-base) * var(--ratio));
    --space-xl: calc(var(--space-lg) * var(--ratio));
    --space-2xl: calc(var(--space-xl) * var(--ratio));
    --space-3xl: calc(var(--space-2xl) * var(--ratio));
    --space-4xl: calc(var(--space-3xl) * var(--ratio));
    --container-padding-x: clamp(var(--space-base), 3.5vw, var(--space-xl));
    --container-padding-y: clamp(var(--space-3xl), 15vw, var(--space-4xl));
    --container-padding: var(--container-padding-y) var(--container-padding-x);

    --pk-orange:#EEAB39;
    --pk-rouge:#FF3964;
    --pk-jaune:#FAE244;
    --pk-rose:#DD89D6;
    --pk-bleu:#03AFFF;
    --pk-black:#000000;
}

/*** BASE ***/

html {
    scroll-behavior: smooth;
    font-size: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    font-family: var(--font-sans,sans-serif);
    font-size: .9375rem;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    font-variant-ligatures: common-ligatures;
    -moz-font-feature-settings: "liga","clig";
    -webkit-font-feature-settings: "liga","clig";
    font-feature-settings: "liga","clig";
    color: var(--pk-900);
    background-color: var(--white);
    margin:0;
}

*, ::after, ::before {box-sizing: border-box;}

blockquote, body, dd, dl, figcaption, figure, h1, h2, h3, h4, h5, li, p, ul[class] ol[class] {margin: 0;}

ol, ul {margin: 0;}
.pl-0, ol, ul {padding-left: 0;}

a {color:var(--pk-rose);text-decoration:underline;}
.footnote-backref:hover, a {text-decoration: none;}
a.skip-main {left: -999px;position: absolute;top: auto;width: 1px;height: 1px;overflow: hidden;z-index: -999;}
a:hover {color:var(--pk-rouge);}



p {max-width: 34.1333333333em;}
p+* {margin-top: 1.5em;}
.free-text p+* {margin-top:0em!important;}


.first-letter::first-letter 
{
  font-size:var(--space-3xl);
  line-height:var(--space-2xl);
  height:var(--space-2xl);
  /*font-weight: bold;*/
  font-family:var(--font-serif);
  width:100px;
  float:left;
  padding-right:10px;
  padding-top:10px;
  color:var(--pk-400);
}

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

/** HEADER PRINCIPAL **/

#header
{
    position: fixed;
    width:100vw;
    height: clamp(calc(var(--space-2xl) - 1px),11.7vw,var(--space-3xl));
    padding-top: 0;
    padding-bottom: 0;
    z-index:100;
    background-color:var(--white);
}

#header a {display: inline-block;}
#header a, .card a {
    text-decoration: none;
}

#header a[aria-current=page]:after {
    content: "";
    display: block;
    position: absolute;
    bottom: calc(-1em + 1px);
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--pk-900);
}

/*#header a[aria-current=page]:after {
    content: "";
    display: block;
    position: absolute;
    bottom: calc(-1em + 1px);
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--pk-900);
}*/

#header a:not([aria-current=page]), .footnote-backref, .footnote-ref {
    color: var(--pk-500);
}

#header #logo {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header #logo img {height:100%;padding:5px;}

#header>div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/** FOOTER **/
footer {padding-top: var(--space-xl);padding-bottom: var(--space-xl);}
#footer {padding-top: var(--space-xl);padding-bottom: var(--space-xl);}
#footer>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-lg);
}

.pk-container
{
    position: relative;
    padding: var(--container-padding);
}

.pk-container>* {margin-left: auto;margin-right: auto;max-width: 80rem;}


/** SHORT CUT HELPER **/
.border-b {border-bottom: 1px solid var(--pk-300);}
.no-underline {text-decoration: none;}
.no-margin {margin:0;}
.list-none {list-style-type: none;}
.relative {position: relative;}
.border {border: 1px solid var(--pk-300);}
.visually-hidden {
    position: absolute!important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    white-space: nowrap;
}

.cinemascope {aspect-ratio: 16 / 9!important;}
.max-w-full {max-width: 100%;}

/** TEXTE **/
.font-normal, body {font-weight: 400;}
.font-serif, .h1-like, h1 {font-family: var(--font-serif);}

h1, h2, h3, h4, h5 {position: relative;}

.prose blockquote, .prose details, .prose figure:not(.w-full), .prose h2, .prose h3, .prose h4, .prose ol, .prose p, .prose table:not(.w-full), .prose ul {
    max-width: 48rem;
}

.prose figure:first-child {margin-top:0;}


.prose h2, .prose h3, .prose h4 {
    font-family: var(--font-sans);
    margin-top: 2.25em;
    scroll-margin-top: 2.25em;
}

.flow>*+* {
    margin-top: var(--flow,1.5em);
}


.h1-like, h1 {font-weight: 400;font-size: 22.5rem;font-size: clamp(var(--space-lg),7vw,var(--space-3xl));line-height: 1.2;letter-spacing: -.01em;max-width: 30ch;color:var(--pk-bleu);}
.h2-like, h2 {font-weight: 700;font-size: var(--space-xl);line-height: 1.25;}
.h3-like, h3 {font-weight: 700;font-size: var(--space-lg);line-height: 1.3333;}

.text-base {font-size: .75rem;font-size: clamp(var(--space-sm),2.333vw,var(--space-base));}
.text-lg {
    font-size: .9375rem;
    font-size: clamp(var(--space-base),3.5vw,var(--space-lg));
}

.text-sm {}

[data-template=article] h1 {
    max-width: 30ch;
}

.link, a[href^=mailto], a[href^=http]:not([href*="pottiok.com"]):not([href*=localhost]) {
    border-bottom: 1px solid var(--pk-300);
}

.link--after::after, .link--before::before, a[href^=http]:not([href*="pottiok.com"]):not([href*=localhost])::after {
    content: "→";
    font-weight: 200;
    display: inline-block;
    padding-left: 0.25em;
    color: var(--zinc-500);
    background-color: var(--white);
}

a[href^=mailto], a[href^=http]:not([href*="pottiok.com"]):not([href*=localhost])::after {
    content: "↗";
    padding-left: 1px;
}

.link--full::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.py-base {padding-top: var(--space-base);padding-bottom: var(--space-base);}

.prose strong {font-size: 95%;}
.prose details summary, .prose strong, .prose table {font-family: var(--font-sans);}
.prose figure, .prose table {margin: var(--space-3xl) 0;}


.footnotes ol>li::before, .prose ol>li::before, .prose ul>li::before {
    content: "—";
    counter-increment: list;
    color: var(--zinc-500);
    position: absolute;
    left: 0;
}

.bg-yellow-light {background-color: var(--yellow-light);}

caption, figcaption
{
    font-size: var(--space-base);
    font-family: var(--font-sans);
    color: var(--zinc-500);
    margin-top: 1.5em;
    text-align: left;
}

caption::before, figcaption::before
{
    content: "↑";
    font-weight: 200;
    display: inline-block;
    padding-right: 0.25em;
    color: var(--zinc-500);
}





.link-full {border-bottom:none!important;}
.link-full::after
{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}



/** NOTES BAS DE PAGE **/
.footnotes {font-size: var(--space-base);}
.footnotes ol>li>p {max-width: 64ch;}
.footnotes ol {max-width: 100%;}
.footnotes ol, .prose ol, .prose ul {padding-left: 1.5em;list-style: none;counter-reset: list;}
.footnotes ol>li::before {counter-increment: footnotes;content: counter(footnotes) ".";}

.prose .grid {padding-left:0;}
.prose .grid img {width:100%;height:auto;}


/** MARGIN **/
.mb-lg {margin-bottom: var(--space-lg);}
.mb-2xl {margin-bottom: var(--space-2xl);}
.mb-4xl {margin-bottom: var(--space-4xl);}
.mb-xs {margin-bottom: var(--space-xs);}

.mt-lg {margin-top: var(--space-lg);}
.mt-2xl {margin-top: var(--space-2xl);}
.mt-4xl {margin-top: var(--space-4xl);}
.mt-xs {margin-top: var(--space-xs);}

/** WIDTH **/
.max-w-3xl {max-width: 48rem;}



/** MENU **/
.menu__item {margin: 0 2vw;height: 100%;}
.menu, .menu__item, .menu__list {display: flex;position: relative;}
.menu__list {margin: 0;padding: 0;}

/**** COULEUR ***/
.color-pk-500 { color: var(--pk-500)!important;}
.color-pk-orange {color: var(--pk-orange);}
.color-pk-bleu {color: var(--pk-bleu);}
.color-pk-rose {color: var(--pk-rose);}

.bg-color-100 {background-color:var(--pk-100);}
.bg-color-pk-rose {background-color:var(--pk-rose);}



/** TABLE DES MATIERES **/
.toc, .info {
    background: var(--white,#fff);
    border-top: 1px solid var(--pk-300);
    padding: 3em 0;
    margin-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--pk-300);
}

/** GRILLE **/
.grid {
    flex-direction: column;
    gap: var(--space-2xl);
}

.grid, picture {display: flex;}

.gridx4 {}

/** CARD **/
.card {position: relative;gap: var(--space-base);padding: 0;margin: 0;}
.card, .card>* {display: flex;flex-direction: column;}
.card__title {position: initial;}
.card__cover, .card__meta {order: -1;margin-top: 0;}
.card__cover img, .rounded-sm, img {border-radius: 0.125rem;}
.card__cover img {
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: var(--aspect-ratio);
    object-fit: var(--object-fit,cover);
    object-position: var(--object-position,center);
}

/** TAGS **/
.tag {
    display: inline-block;border-radius:3px;padding: 5px var(--space-xs);color:var(--white);
    line-height:100%;margin-top:var(--space-xs);
}
.pk-tag {display:inline-block; padding:0 0 var(--space-xs);}


/** BREADCRUMP **/
.nav-breadcrumb {display:none;}
.nav-breadcrumb > * {max-width:30%;}

/** LISTE **/
.list ul
.list__row {}
.list__cell {}
.list__cell--fileicon {padding-right:.5em;padding-left:.5em;}
.list__cell--filetext {padding-right:.5em;padding-left:.5em;}

.icon
{
    font: 0/0 a;
    color: transparent;
    display: inline-block;
    min-width: 32px;
    min-height: 32px;
    vertical-align: middle;
    background-position: 50%;
    background-color: transparent;
    border: 0 none;
}

.icon__list_dir
{
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2221%22%20viewBox%3D%220%200%2026%2021%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M24%202H12c-1.1%200-1.625-.125-2.5-1C8.828.328%208.1%200%207%200H2C.9%200%200%20.9%200%202v17c0%201.1.9%202%202%202h22c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2z%22%2F%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M24%202H12c-1.1%200-1.625-.125-2.5-1C8.828.328%208.1%200%207%200H2C.9%200%200%20.9%200%202v17c0%201.1.9%202%202%202h22c1.1%200%202-.9%202-2V4c0-1.1-.9-2-2-2zm1%2017c0%20.55-.45%201-1%201H2c-.55%200-1-.45-1-1V7h24v12zm0-13H1V2c0-.55.45-1%201-1h5c.805%200%201.383.383%202%201%20.75.75%201.7%201%203%201h12c.55%200%201%20.45%201%201v2z%22%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
}

.icon__arrow_left {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2014%22%3E%3Cpath%20d%3D%22M3%206h17v2H3z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M8%201L2%207l6%206%22%2F%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h20v14H0z%22%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
}

.icon__arrow_right {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2014%22%3E%3Cpath%20d%3D%22M0%206h17v2H0z%22%2F%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M12%201l6%206-6%206%22%2F%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h20v14H0z%22%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
}

.album__navigation
{
    border-bottom: 1px solid var(--pk-300);border-top: 1px solid var(--pk-300);
    height:auto;display:block;width:100%;text-align:right;
}

.album__navigation a, .album_navigation span {
    display: inline-block;
    padding-left:10px;
    padding-right:10px;
    /*height: 30px;
    line-height: 30px;*/
}

.resources__list-item>* {
    flex: 1 1 0;
}
.resources__list-item
{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--space-xs);
}

.fixed-width {flex:0 0 8em;}



@media (min-width: 32rem)
{
    #header #logo abbr
    {
        display: inline-block;
        visibility: hidden;
        font-size: 0;
    }

    #header #logo abbr::after {
        content: attr(title);
        visibility: initial;
        font-size: .9375rem;
        font-size: clamp(var(--space-base),3.5vw,var(--space-lg));
    }
}

@media (min-width: 60rem)
{
    .page__body, .page__intro {--span: 2;}
    .grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: var(--space-2xl);
        align-items: var(--items,flex-start);
    }

    .col4
    {
        grid-template-columns: repeat(4,1fr);
        grid-gap: var(--space-xs);
    }

    .col5
    {
        grid-template-columns: repeat(5,1fr);
        grid-gap: var(--space-xs);
    }


    .grid>* {grid-column-end: span var(--span);margin-top: 0;}
    .col5>* {grid-column-end: span 1;}

    .card--featured .card__body {grid-column-end: span 2;}
    [data-template=article] .page__body {grid-row-start: 2;}

    .card--featured {
        --span: 3;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: auto;
        grid-gap: var(--space-2xl);
    }

    .card--featured .card__title {font-size: var(--space-2xl);line-height: 1.25;}
    .card--featured .card__cover {order: 1;}

    .nav-breadcrumb {display:block;}

    .resources__list-item
    {
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-2xl);
    }
}

@media (min-width: 80rem)
{
    .toc, .info {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        max-width: calc((100% - var(--space-2xl) * 2)/ 3);
        padding: 0;
        margin-top: 0.63333rem;
        border: none;
    }
}