@font-face {
    font-family: "Public sans";
    src: url("PublicSans-Regular.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Public sans";
    src: url("PublicSans-Italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Public sans";
    src: url("PublicSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Public sans";
    src: url("PublicSans-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
}

:root {
    font-size: 100%;
    /* couleurs */
    --fond: #a12862;
    --fond-2: #cf4889;
    --fond-3: #80b719;
    --fond-4: #1d74cf;
    --fond-5: #114f4a;
    --contraste-1: #cc4165;
    --contraste-2: #e4734f;
    --contraste-3: #cedad2;
    --pale-1: #dddff1;
    --pale-2: #fdf5f3;
    --ombre: 234deg 16% 56%;
    --text-fc: #111;
    --text-ff: #fff;
    /* dimensions */
    --aeration: 1rem;
    --acote: 17ch;
    --justification: 75ch;
}

body:has(.fiche) {
    --justification: 90ch;
}

/* base un peu radicale */
*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

sup,
sub {
    vertical-align: baseline;
    position: relative;
    top: -0.45em;
}

sub {
    top: 0.4em;
}

img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

html,
body {
    min-height: 100vh;
}

body {
    font-family: "Public sans";
    background-color: var(--pale-1);
}

/* mise en page (en gros)*/

body {
    --utile: calc(var(--acote) + var(--aeration) + var(--justification));
    --maxmarge: calc(calc(100vw - var(--utile)) / 2);
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(var(--aeration), var(--maxmarge)) 1fr minmax(
            var(--aeration),
            var(--maxmarge)
        );

    & > :is(nav, footer) {
        grid-column: 1 / 4;
    }

    & > footer {
        margin-block-start: var(--aeration);
        padding-block-start: var(--aeration);
        padding-block-end: calc(2 * var(--aeration));
        background-color: var(--fond);
        color: var(--text-ff);
    }

    & > .empagement {
        grid-column: 2 / 3;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        column-gap: calc(2 * var(--aeration));

        & > header {
            flex-basis: var(--acote);
            flex-grow: 1;

            & img {
                width: 100%;
                height: auto;
                object-fit: contain;
                margin-block-end: var(--aeration);
            }
        }

        & > main {
            flex-basis: 0;
            flex-grow: 9999;
            min-inline-size: calc(var(--acote) * 3);
        }
    }
}

/* nabigations  */
nav {
    font-size: 0.85rem;
    line-height: 1rem;

    &[aria-label="fil d’Ariane"] {
        text-transform: lowercase;
        background-color: #fff;
        --bordure: 3px;
        padding-inline: var(--aeration);
        padding-block-start: calc((2rem - 1cap) / 2);
        padding-block-end: calc(((2rem - 1cap) / 2) - var(--bordure));
        border-block-end: var(--bordure) solid var(--fond);
        margin-block-end: var(--aeration);

        & li + li::before {
            content: ">";
            margin-inline: 0.33ch;
        }
    }

    & a {
        color: inherit;
    }

    & a[aria-current] {
        text-decoration: none;
    }

    & a:hover {
        text-decoration-color: var(--fond);
    }

    & a:active {
        text-decoration-color: var(--fond-2);
    }

    & ul,
    & ol {
        list-style-type: "";
        display: flex;
        flex-wrap: wrap;
    }

    &[aria-label="secondaire"] ul {
        justify-content: space-evenly;
    }

    & menu {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: var(--aeration);

        & > ul {
            & :first-child {
                border-radius: 0 var(--aeration) 0 0;
            }

            & :last-child {
                border-radius: 0 0 var(--aeration) var(--aeration);
            }
        }

        & li {
            flex-basis: var(--acote);
            flex-grow: 1;
            line-height: 1rem;
            padding-block: calc(calc(2rem - 1cap) / 2);
            padding-inline: 1ch;
            text-align: center;
            background-color: #fff;

            &:has(:hover) {
                border-inline-end: 1ch solid var(--fond);
                padding-inline-end: 0;
            }

            &:has(:active) {
                border-inline-end: 1ch solid var(--fond-2);
                padding-inline-end: 0;
            }

            &:has([aria-current]) {
                border-inline-end: 1ch solid var(--fond-4);
                padding-inline-end: 0;
                background-color: var(--pale-2);
            }
        }

        & a {
            text-transform: uppercase;
        }
    }
}

menu[aria-label="Pages filles"] {
    display: flex;
    justify-content: flex-end;
    list-style-type: "";
    list-style-position: inside;
    margin-block-end: var(--aeration);
    font-size: 0.6rem;
    text-transform: uppercase;
    background-color: #fff;

    &::before {
        content: attr(aria-label) " :\a0";
    }
    & li:not(:first-child) {
        list-style-type: " | ";
    }
}

/* zone principale */
main {
    & > header {
        margin-block-end: var(--aeration);
    }

    & h1 {
        color: var(--fond-5);
    }

    & h2 + .articles {
        margin-block-start: var(--aeration);
    }

    &.article {
        border-image: conic-gradient(var(--pale-2) 0 0) fill 0 / 0 0 0 0 / 0 0
            100vh 0;
        padding: var(--aeration);
    }

    &.article h1 {
        color: #fff;
        background-color: var(--fond-4);
        width: fit-content;

        --f: var(--aeration);
        /* control the folded part*/
        --r: calc(var(--aeration) / 1.33);

        position: relative;
        left: calc(-2 * var(--f));
        padding-block: calc((2rem - 1cap) / 2) 0.25em;
        padding-inline: calc(1.75 * var(--aeration))
            calc(0.77 * var(--aeration));
        line-height: 2rem;
        border-bottom: var(--f) solid #0005;
        border-right: var(--r) solid #0000;
        clip-path: polygon(
            calc(100% - var(--r)) 0,
            0 0,
            0 calc(100% - var(--f)),
            var(--f) 100%,
            var(--f) calc(100% - var(--f)),
            calc(100% - var(--r)) calc(100% - var(--f)),
            100% calc(50% - var(--f) / 2)
        );
    }

    & :is(h3, h5) {
        color: var(--fond-3);
    }

    & :is(h2, h4, h6) {
        color: var(--fond-2);
    }
}

main.article {
    & :is(h3, h4, h5, h6) {
        margin-block-start: calc(calc(3rem - 1cap) / 2);
    }

    & :is(ul, p, ol) {
        line-height: 1.45rem;

        & + :is(ul, p, ol) {
            margin-block-start: calc(var(--aeration) * 0.5);
        }

        &:has(+ h2) {
            margin-block-end: var(--aeration);
        }
    }

    & a {
        color: var(--fond-4);
    }
}

/* fiche */
li:has(.fiche) {
    list-style-type: none;
    margin-block-end: calc(1.75 * var(--aeration));
}

.fiche {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--fond);
    border-radius: 3px;
    box-shadow:
        1px 2px 3px hsl(var(--ombre) / 0.34),
        2px 4px 4px hsl(var(--ombre) / 0.34),
        3px 6px 6px hsl(var(--ombre) / 0.34);

    & > :first-child {
        flex-basis: calc(var(--acote) * 2);
        flex-grow: 1;
        overflow: hidden;
        aspect-ratio: 16/10;

        &:not(:has(img)) {
            padding: var(--aeration);
            padding-inline-end: 0;
            aspect-ratio: auto;
        }

        & img {
            min-height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: 50% 50%;
        }
    }

    & > :nth-child(2) {
        position: relative;
        overflow: hidden;
        flex-basis: 0;
        flex-grow: 9999;
        min-inline-size: 50%;
        padding: var(--aeration);
        align-self: stretch;

        & p:not([class]) {
            font-size: 0.9rem;
            line-height: 1.25rem;
            margin-block-start: calc((1.25rem - 1cap) / 2);

            & + p {
                margin-block-start: calc((1.25rem - 1cap) / 2);
            }
        }

        &:has(a:last-child) {
            padding-bottom: 3rem;
        }
    }

    & .quandou {
        background-color: var(--fond-4);
        padding-inline: var(--aeration) calc(var(--aeration) / 2);
        padding-block: calc((1rem - 1cap) / 2);
        margin-inline-start: calc(var(--aeration) * -1);
        margin-block: calc(var(--aeration) / 2);
        color: var(--text-ff);
        font-size: 0.8rem;
        width: fit-content;
    }

    & div > a {
        --respi: calc((1rem - 1cap) / 2);
        color: var(--fond-5);
        display: block;
        position: absolute;
        width: fit-content;
        background-color: var(--pale-2);
        bottom: var(--aeration);
        right: var(--aeration);
        font-size: 0.8rem;
        text-transform: lowercase;
        text-decoration: none;
        padding: var(--respi);
        border: 1px solid currentColor;
        border-radius: var(--respi);

        &:hover {
            color: var(--fond);
        }

        &:active {
            color: var(--fond-2);
        }

        &::before {
            content: "▸";
            margin-inline-end: 1ex;
        }
    }

    & h3 {
        color: var(--fond);
    }

    & h4 {
        width: fit-content;
        background-color: var(--pale-2);
        display: flex;
        place-content: center;
        margin-block: calc(var(--aeration) / 3) calc(var(--aeration) / 2);
        padding: 3px 5px;
        color: var(--fond-5);
        font-weight: normal;
        font-size: 0.75rem;
        text-transform: uppercase;
        border: 10px solid;
        border-image-source: linear-gradient(
            to left,
            var(--fond-2),
            var(--contraste-2)
        );
        border-image-slice: 1;
        border-width: 3px;
        clip-path: inset(0 round 3px);
    }
}

/* formulaire  */
main {
    & .requiredHint {
        color: var(--fond-2);
    }

    & > form {
        background-color: var(--pale-2);
        padding: var(--aeration);
        margin-block-start: var(--aeration);
        border-radius: 3px;

        & label:has(+ .inputwrapper) {
            display: block;
            border-inline-start: solid var(--fond-3) var(--aeration);
            margin-inline-start: calc(var(--aeration) * -1);
            padding-inline-start: 0.25ch;
            color: var(--fond);
            margin-block-end: 0.8ch;
        }

        & fieldset {
            border: none;
            margin-block-end: var(--aeration);
            border-block-end: 1px solid var(--fond-5);
            padding-block-end: calc(var(--aeration) / 2);
        }

        & > div {
            & + * {
                margin-block-start: var(--aeration);
            }
        }

        & input {
            font-size: 1rem;
            line-height: 1.5;

            & + label {
                margin-inline-start: 1ch;
                text-transform: lowercase;
                font-style: italic;
            }
        }

        & button {
            background: var(--pale-1);
            color: var(--text-fc);
            text-transform: uppercase;
            font-size: 0.75rem;
            padding-block: calc((1.5rem - 1cap) / 2);
            padding-inline: calc((1.5rem - 1cap) / 1.8);
            border-radius: 1.5rem;
            border: 2px solid;
            border-color: var(--fond-5);
            margin-block: var(--aeration);

            &:hover {
                color: var(--fond);
                border-color: currentColor;
                background: white;
            }

            &:active {
                color: var(--fond-2);
            }
        }
    }
}

/* accueil : édito  */
h2:has(+ article.edito) {
    background-color: var(--pale-2);
    width: fit-content;
    padding-block-start: calc(var(--aeration) / 2);
    padding-inline: var(--aeration) calc(var(--aeration) * 1.5);
    clip-path: polygon(0 0, calc(100% - var(--aeration)) 0, 100% 100%, 0 100%);
    border-top-left-radius: 3px;
}

.edito {
    background-color: var(--pale-2);
    padding: var(--aeration);
    border-radius: 0 3px 3px 3px;
    margin-block-end: var(--aeration);

    & * {
        color: var(--text-fc);
    }
}

/* galerie */

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10ch, 1fr));
    gap: calc(3 * var(--aeration));
    margin-block-start: calc(var(--aeration) * 3);

    & > li {
        background: #fff;
        list-style-type: "";
        border-radius: 2rem 0 0 0;
        padding: calc(var(--aeration) / 2);
        border: 1px solid var(--contraste-3);
    }

    & article :not(b, strong) {
        font-weight: normal;
    }

    & article h2 {
        font-size: 1rem;
    }

    & article h3 {
        font-size: 0.9rem;
        text-transform: lowercase;
        font-style: italic;
        color: var(--fond-5);
        padding-block-end: calc(((var(--aeration) * 2) - 1lh) / 2);
        margin: 0;
    }

    & article p {
        font-size: 0.8rem;
    }

    & img {
        --medaillon: 128px;
        --offsetx: calc(var(--aeration) * -3);
        --offsety: calc(var(--aeration) * -2.5);
        --orx: calc((var(--medaillon) / 2) + var(--offsetx) / 2);
        --ory: calc((var(--medaillon) / 2) + var(--offsety));
        display: block;
        margin: 0;
        width: var(--medaillon);
        height: var(--medaillon);
        background: var(--contraste-3);
        border: 0.75ch solid var(--contraste-3);
        border-radius: 50%;
        shape-outside: circle(50% at var(--orx) var(--ory)) border-box;
        object-fit: fill;
        float: left;
        position: relative;
        top: var(--offsetx);
        left: var(--offsety);
        box-shadow: 4px 4px 8px -4px hsl(var(--ombre) / 0.34);
    }
}