:root {
    --color-bleu-gris: #1c8ba7;
    --color-brique: #ad3925;
    --color-blanc: #fff;
    --color-noir: #231f20;
    --color-gris: #f0f0f0;
    --color-gris-fonce: #867355;
    --color-gris-clair: #f2efeb;

    --breakpoint: 1024px;

    --border-radius: 1em;

    --header-color: var(--color-noir);
    --header-background-color: var(--color-gris);

    --menu-color: var(--color-noir);
    --menu-background-color: var(--color-gris);
    --menu-color-on: var(--color-blanc);
    --menu-background-color-on: var(--color-brique);

    --search-form-color: inherit;
    --search-form-background-color: var(--color-blanc);

    --main-color: inherit;
    --main-background-color: var(--color-bleu-gris);

    --hero-color: var(--main-color);
    --hero-background-color: var(--main-background-color);

    --container-color: inherit;
    --container-background-color: var(--color-blanc);

    --footer-color: var(--color-gris);
    --footer-background-color: var(--color-noir);

    --controls-dark-color: var(--color-brique);
    --controls-lite-color: var(--color-blanc);

    --button-color: var(--controls-lite-color);
    --button-background-color: var(--controls-dark-color);
    --button-border-color: var(--button-background-color);
    --button-color-on: var(--controls-dark-color);
    --button-background-color-on: var(--controls-lite-color);
    --button-border-color-on: var(--button-color-on);

    --input-color: var(--controls-dark-color);
    --input-background-color: var(--controls-lite-color);
    --input-border-color: var(--input-color);

    --card-color: inherit;
    --card-background-color: transparent;
    --card-border-color: rgb(from var(--color-brique) r g b / 0.5);

    --dialog-color: var(--color-blanc);
    --dialog-background-color: var(--color-brique);
    --dialog-backdrop-color: rgb(from var(--color-noir) r g b / 0.5);

    --comment-border-color: var(--color-bleu-gris);

    --icon-color: inherit;
    --icon-color-on: var(--color-brique);
}

a {
    color: inherit;
}

.menu-shortcode .menu-item,
.button,
[type="submit"] {
    color: var(--button-color);
    background-color: var(--button-background-color);
    border: thin solid var(--button-border-color);

    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: var(--border-radius);

    cursor: pointer;

    &:hover,
    &:focus {
        color: var(--button-color-on);
        background-color: var(--button-background-color-on);
        border: thin solid var(--button-border-color-on);
    }
}
textarea,
input:not([class]):not([type="submit"]) {
    color: var(--input-color);
    background-color: var(--input-background-color);
    padding: 0.5em 1em;
    border-radius: var(--border-radius);

    border: thin solid var(--input-border-color);
}

.m-0 {
    margin: 0;
}

/* body */
.wp-theme-tontonjc-theme {
    color: var(--color-noir);
    background-color: var(--color-blanc);

    display: flex;
    flex-direction: column;
}

.header {
    position: relative;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: end;

    color: var(--header-color);
    background-color: var(--header-background-color)
}

.header-section {
    flex-grow: 0;
}

.logo {
    margin: 0.5em;
}

.header-section--menu {
    flex-grow: 1;
}

.responsive-menu {
    color: var(--menu-color);
    background-color: var(--menu-background-color);
    font-weight: bold;
}

.responsive-menu__button {
    cursor: pointer;

    &::marker {
        content: '';
    }

    @media (max-width: 1024px) {
        text-align: right;
    }
    @media (min-width: 1024px) {
        display: none;
    }
}

.responsive-menu__container {
    @media (max-width: 1024px) {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        transform: translateY(100%);
        color: var(--menu-color);
        background-color: var(--menu-background-color);
    }
}

.menu-shortcode {
    color: var(--menu-color);
    background: transparent;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;

    @media (max-width: 1024px) {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    @media (min-width: 1024px) {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.menu--header {
    justify-content: center;

    @media (max-width: 1024px) {
        text-align: center;
    }
    @media (min-width: 1024px) {
    }

    .home-menu-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 0.5em;
    }

    .menu-item {
        margin-block: 0;
        padding: 0.5em 1em;
        border-bottom: 5px solid var(--menu-background-color);
    }

    .current-menu-item {
        border-color: var(--menu-background-color-on);
    }

    .menu-item:focus,
    .menu-item:hover {
        color: var(--menu-color-on);
        background-color: var(--menu-background-color-on);
        border-color: var(--menu-background-color-on);
    }
}

.menu-shortcode .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
}

.menu-item a {
    text-decoration: none;
}

.header-section--tools {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-right: 1em;
}

.header .bi {
    display: inline-block;
    width: auto;
    height: 48px;
}

.searchbox__button {
    cursor: pointer;

    &::marker {
        content: '';
    }
}

.search-form {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    padding: 1em;
    transform: translateY(100%);
    color: var(--sarch-form-color);
    background-color: var(--search-form-background-color);

    form>div {
        display: flex;
        gap: 1em;
    }
    
    input[type="text"] {
        flex-grow: 1;
    }
}

.hero {
    --hero-height: 0px;
    color: var(--hero-color);
    background-color: var(--hero-background-color);
    background-position: center center;
    background-repeat: no-repeat;
    @media (max-width: 1024px) {
        height: max(25vh, var(--hero-height));
        background-size: cover;
        background-position: center;
    }
    @media (min-width: 1024px) {
        /* height: min(50vh, var(--hero-height)); */
        height: min(50vh, var(--hero-height));
        /* background-size: auto max(100%, var(--hero-height)); */
        background-size: auto 100%;
        background-attachment: fixed;
    }
}

.container {
    @media (max-width: 1024px) {
        width: 100%;
    }

    @media (min-width: 1024px) {
        width: var(--breakpoint);
        margin: 0 auto;
    }
}

.main {
    color: var(--main-color);
    background-color: var(--main-background-color);
    flex-grow: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    .container {
        color: var(--container-color);
        background-color: var(--container-background-color);

        padding: 1em;
    }
}

.footer {
    padding: 1em;
    color: var(--footer-color);
    background-color: var(--footer-background-color);

    .container--footer {
        display: flex;
        
        @media (max-width: 1024px) {
            flex-direction: column;
            gap: 1em;
        }
        
        @media (min-width: 1024px) {
            flex-direction: row;
            justify-content: space-between;
            align-items: start:
        }
    }
}

.widgets {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    
    @media (max-width: 1024px) {
        flex-direction: column;
    }
    
    @media (min-width: 1024px) {
        flex-direction: row;
        align-items: start:
    }
}

.copyright {
    margin: 0;
}
.menu--footer .menu-item+.menu-item::before {
    @media (min-width: 1024px) {
        content: '-';
        margin: 0 0.5em;
    }
}

.widget_text p:first-child {
    margin-top: 0;
}

.fancy-shadows {
    box-shadow:
        0 1em 1em -1em currentColor inset,
        0 1em 1em -0.75em currentColor;
}

.fancy-shadows--mobile {
    @media (max-width: 1024px) {
        box-shadow:
            0 1em 1em -1em currentColor inset,
            0 1em 1em -0.75em currentColor;
    }
}

.cards {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    gap: 1em;
    flex-wrap: wrap;

    @media (max-width: 1024px) {
        flex-direction: column;
    }
    @media (min-width: 1024px) {
        flex-direction: row;
    }

    .js-open-dialog,
    a {
        cursor: pointer;
    }
}

.cards--search,
.cards--contents,
.cards--categories {
    @media (max-width: 1024px) {
        flex-direction: row;
    }
    @media (min-width: 1024px) {
        flex-direction: row;
    }
}

.cards--contents figure img {
    width: 100%;
}

.card {
    color: var(--card-color);
    background-color: var(--card-bckground-color);
    border-color: var(--card-border-color);
}

.card__caption {
    opacity: 0.7;
    transition: all 400ms;
}
.card__caption:focus,
.card__caption:hover {
    opacity: 1;
}
a .card__caption,
.card__caption a {
    text-decoration: none;
}

.card--post {
    border-width: 2px;
    border-style: solid;
    border-radius: var(--border-radius);
    padding: 1em;
    flex-basis: calc(100% / 2 - 1rem);

    a {
        text-decoration: none;
    }

    .card__figure {
        display: flex;
        flex-direction: row-reverse;
    }

    .card__image {
        flex: 1 1 calc(100% * 1 / 3);
        object-fit: cover;
    }

    .card__body {
        flex: 1 1 calc(100% * 2 / 3);
        padding-right: 1em;
    }

    .card__title {
        margin-top: 0;
    }
}

.card--category {
    @media (max-width: 1024px) {
        flex-basis: calc(100% / 2 - 1em);
    }
    @media (min-width: 1024px) {
        flex-basis: calc(100% / 4 - 1em);
    }

    .card__image {
        aspect-ratio: 1/1;
        width: 100%;
        height: 100%;
    }
}

.card--search,
.card--content {
    @media (max-width: 368px) {
        flex-basis: calc(100% / 1 - 1em);
    }
    @media (min-width: 368px) {
        flex-basis: calc(100% / 2 - 1em);
    }
    @media (min-width: 670px) {
        flex-basis: calc(100% / 3 - 1em);
    }
    @media (min-width: 1024px) {
        flex-basis: calc(100% / 4 - 1em);
    }
}

.card__link {
    display: block;
    transform: scale(1);
    transition: all 400ms;
}
.card__link:focus,
.card__link:hover {
    transform: scale(1.1);
}

.playable {
    position: relative;
    &::after {
        content: '▶';
        font-size: 7rem;
        color: var(--color-blanc);
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        opacity: 0.6;
        transform: translate(-50%, -50%);
    }
    img {
        display: block;
        margin: 0 auto;
    }
}

.lead {
    display: flex;
    gap: 1em;
    margin: 3em 0;

    @media (max-width: 1024px) {
        flex-direction: column;
        align-items: center;
    }
    @media (min-width: 1024px) {
    }

    .lead__image {
        flex-shrink: 0;
    }

    .lead__caption {
        flex-grow: 1;
        font-size: 1.2em;
        font-weight: bold;
    }
}
.lead--category {
    align-items: center;
}

.ratio-1x1 {
    aspect-ratio: 1 / 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.me-2 {
    margin-right: 0.5em;
}

.mb-3 {
    margin-bottom: 1em;
}

.dialog {
    border: none;
    color: var(--dialog-color);
    background-color: var(--dialog-background-color);
    position: relative;
    overflow: visible;
    &::backdrop {
        background-color: var(--dialog-backdrop-color);
    }
}
.button.js-close-dialog {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    transform: translate(50%, -50%); 
}

.comment-list,
.comment-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.comment-list li {
    margin-top: 2em;
    border-left: thick solid var(--comment-border-color);
    padding-left: 1em;
}

.icon {
    color: var(--icon-color);
    &:focus,
    &:hover {
        color: var(--icon-color-on);
    }
}

.single-thumbnail {
    img {
        display: block;
        margin: 0 auto;
        width: auto;
        max-height: 25vh;
    }
}