@import url('https://fonts.googleapis.com/css2?family=Share&family=Share+Tech&family=Share+Tech+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --dark_teal: #17312c;
    --white: #fbfbfb;
    --black: #040404;
    --light_green: #56b77e;
    --dark_green: #2c6443;
    --orange: #f2735b;
    --content-width: 50em;
    --title-size: 3em;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--white);
    color: var(--black);
    font: normal 400 100% "Share", Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-flow: column;
}

/* Entête */

header {
    background-color: var(--dark_teal);
    color: var(--white);
    width: 100vw;

    & div {
        display: flex;
        flex-flow: row wrap;
        gap: 1em;
        align-items: center;
    }

    &>div {
        width: calc(100vw - 2em);
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 0 1em;

        & img#logo {
            height: 8em;
            margin: 1em auto 1em 0;
        }

        & h1 {
            margin: 0;
            flex: 1;
            font-family: "Share Tech", Verdana, sans-serif;
            font-size: var(--title-size);
            text-align: right;
        }

        & div {
            flex: 1;
        }
    }
}

/* Barre de navigation */

nav {
    position: sticky;
    top: 0;
    width: 100vw;
    background-color: var(--dark_teal);
    color: var(--white);
    font-family: "Share Tech", Verdana, sans-serif;

    & ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
        flex-flow: column nowrap;
    }

    & li {
        white-space: nowrap;

        & ul {
            display: none;
        }

        &:hover>ul {
            display: inline-flex;
            position: absolute;
        }
    }

    & a {
        background-color: var(--dark_teal);
        color: var(--white);
        text-decoration: none;
        display: inline-block;
        padding: 1em;

        &:hover {
            background-color: var(--light_green);
            color: var(--black);
        }
    }

    &>ul {
        flex-flow: row wrap;
        justify-content: center;
        width: calc(100vw - 2em);
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 0 1em;

        &>li:hover>ul {
            display: flex;
        }
    }

    &.home,
    &.home * {
        position: inherit;
        background-color: var(--white);
        color: var(--black);

        & ul {
            flex-flow: row wrap;
            justify-content: space-evenly;
            align-items: stretch;

            & li {
                min-width: 50%;

                &:hover {
                    background-color: var(--light_green);
                }

                & a {
                    width: calc(100% - 2em);
                    background-color: none;
                    font-size: xx-large;
                }
            }
        }
    }
}

a.puce {
    padding: 0 auto;

    &::before {
        display: inline-block;
        vertical-align: sub;
        height: 1em;
        width: 1em;
        padding-right: 0.5em;
    }

    &#home::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2735b' stroke-width='2' stroke-linecap='square' stroke-linejoin='mittel' class='feather feather-home'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
    }

    &#posts::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2735b' stroke-width='2' stroke-linecap='square' stroke-linejoin='mittel' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E%0A");
    }

    &#tarifs::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2735b' stroke-width='2' stroke-linecap='square' stroke-linejoin='mittel' class='feather feather-credit-card'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
    }

    &#prestations::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2735b' stroke-width='2' stroke-linecap='square' stroke-linejoin='mittel' class='feather feather-tool'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'%3E%3C/path%3E%3C/svg%3E%0A");
    }

    &#contact::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2735b' stroke-width='2' stroke-linecap='square' stroke-linejoin='mittel' class='feather feather-phone'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E%0A");
    }
}

/* Contenu */

main {
    flex: 1;
    width: calc(100vw - 2em);
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 1em;

    & table {
        margin: 0 auto;
    }

    & img {
        max-width: 100%;
        float: left;
        margin: auto 1em 1em auto;
    }

    & a {
        color: var(--dark_green);
        text-decoration: underline;

        &[href^="http"]::after {
            display: inline-block;
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f2735b' stroke-width='2' stroke-linecap='square' stroke-linejoin='mittel' class='feather feather-external-link'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
            vertical-align: sub;
        }
    }

    & ul {
        list-style: none;
        padding: 0;
        margin: 1em 0;
    }

    & li {
        padding-left: 1em;

        &::before {
            content: "▪";
            color: var(--orange);
            padding-right: 0.5em;
        }

        &.post {

            &::before,
            & a {
                font-size: large;
            }

            & li.post {
                margin-top: 1em;
                margin-left: 0.5em;
            }
        }
    }

    & blockquote {
        margin: 0;
        padding: 0 2em;
        border-left: 2px solid var(--orange);
        border-right: 2px solid var(--orange);
    }

    &.home div {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 1em;
        margin-top: 1em;

        & img {
            float: none;
            margin: 0;
        }
    }
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "Share Tech", Verdana, sans-serif;
    clear: both;
}

h2 {
    border-bottom: 2px solid var(--orange);
    font-size: xx-large;
}

h3 {
    font-size: x-large;
}

h4 {
    font-size: large;
}

ol.footnotes-list li::before {
    content: none;
}

/* Formulaire de contact */

label,
button {
    display: block;
}

label+* {
    margin-bottom: 1em;
}

input,
textarea {
    padding: 0.5em;
    border: none;
    background-color: #dddddd;
    width: calc(100% - 1em);
}

input {
    font: normal 400 100% "Share Tech", Verdana, sans-serif;
}

textarea {
    font: normal 400 100% "Share Tech Mono", "Lucida Console", monospace;
}

div#buttons {
    display: flex;
    flex-flow: row-reverse nowrap;
    gap: 1em;
    margin-bottom: 1em;
}

button {
    padding: 0.5em;
    border: none;
    font: normal 400 100% "Share Tech", Verdana, sans-serif;

    &#submit {
        background-color: var(--light_green);
    }

    &#cancel {
        background-color: var(--orange);
    }
}

/* Pied de page */

footer {
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100vw;
    background-color: var(--dark_teal);
    color: var(--white);

    &>p {
        width: calc(100vw - 2em);
        max-width: var(--content-width);
        margin: 0 auto;
        padding: 1em;
        text-align: center;
    }

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

        &::after {
            content: none;
        }
    }
}