/* === text block == */
ul,
ol {
	margin-block: .3em;
	padding: 0 0 0 1em;
	list-style-position: outside;
}

p {
	text-align: left;
	margin-block: .5em;
	line-height: 1.3em;
}

.twoCol {
	display: grid;
	grid-auto-flow: column;
	gap: 1em;
}

.c1, .c2 {
	align-content: space-around;
}

@media (max-width: 30em) {
	.twoCol {
		display: block;
	}
}


table {
	border-collapse: collapse;
	width: 100%;
	margin: auto;
	border: 1px solid var(--borderColor);

	& caption {
		font-style: italic;
	}

	& td,
	& th {
		border: 1px solid var(--borderColor);
		padding: 0.5em;
	}

	& th {
		background-color: #0000002e;
	}

	& thead {
		border-block-end: 1px solid var(--borderColor);
	}

	& tfoot {
		border-block-start: 1px solid var(--borderColor);
	}
}

figure.img {
	margin-block: 1em;
	margin-inline: 0;
	text-align: center;

	& > sw-zoom > img {
		vertical-align: bottom;
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 25lh;
		border-radius: 1em;
	}
}

sw-zoom {
	cursor: zoom-in;
}

dialog.zoom {
	width: 100dvw;
	max-width: 100dvw;
	height: 100dvh;
	max-height: 100dvh;
	display: flex;
	margin: 0;
	border: none;
	padding: 0;
	align-items: flex-start;
	justify-content: center;
	border-color: var(--borderColor);
	cursor: zoom-out;

	& > img {
		margin: auto;
		width: 100dvw;
		max-width: 100dvw;
		height: auto;
	}
}

.zoomClose {
	position: fixed;
	top: 15px;
	right: 15px;
	appearance: none;
	border: none;
	width: 2rem;
	height: 2rem;
	background: url("img/close.svg") center / contain;
}

/* === text inline == */

.url {
	text-decoration: none;
	color: var(--accentColor);

	&:hover {
		color: var(--accentColorDark);
		text-decoration: underline;
	}

	& img {
		border-width: 0;
	}
}

/* === Blocks === */

.bk {
	margin-block: 1em;

	&.em {
		background-color: var(--menuBG);
		padding: .5em;
		border-radius: .5em;
	}
}

details {

	& > summary {
		cursor: pointer;
	}

	& > summary::marker {
		color: var(--borderColor);
	}

	& > .bk {
		margin-inline-start: .5em;
		padding-inline-start: .5em;
		border-inline-start: 1px solid var(--borderColor);
	}
}

.intertitle {
	margin-top: 3rem;
}

/* === Gallery === */
.gal {
	border: 1px solid var(--borderColor);
	border-radius: 1em;
	background-color: #fff8ee70;
	padding: .5em;
	margin-top: 3rem;
}

.galCtn {
	display: flex;
	flex-wrap: wrap; /*firefox*/
	flex-wrap: balance;
	justify-content: space-around;
}

.galItem {
	display: block;
	position: relative;
	margin-top: 2rem;
	margin-right: 1rem;
	border: 1px solid var(--borderColor);
	border-radius: 1em;
	background-color: #fff8ee70;
	padding: .5em;
	max-width: 20rem;

	&.medium {
		max-width: 15rem;
		padding: .3em;
	}

	&.small {
		max-width: 10rem;
		padding: .2em;
		font-size: .9em;
	}
}

.galItemTi {
	font-style: italic;
	text-align: center;
}


/* === Piece === */
article.piece {
	position: relative;
	margin-top: 3.5rem;
	margin-right: .8rem;
	border: 1px solid var(--borderColor);
	border-radius: 1em;
	background-color: #fff8ee70;
	padding: .5em;
}

a.pieceOpen {
	display: block;
	text-decoration: unset;
	color: unset;
}

.pieceTi {
	padding-inline-end: 8rem;
}

.illus {
	margin: .5em;
	text-align: center;

	& > img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 16lh;
		border-radius: 1em;

		&.small {
			max-height: 8lh;
		}

		&.medium {
			max-height: 12lh;
		}
	}

	& > figcaption {
		padding: .3em;
		font-style: italic;
	}
}


pc-tag {
	position: absolute;
	top: -3.1rem;
	right: -.8rem;
	width: 9rem;
	height: 7rem;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	&:not([piece-state=unavailable]):hover {
		zoom: 102%;
		filter: brightness(.98);
	}

	&[piece-state=available] {
		background-image: url(./img/philartAvail.svg);

		&:is(.small,.medium) {
			background-image: url(./img/philartAvailSmall.svg);
		}
	}

	&[piece-state=madeToOrder] {
		background-image: url(./img/philartMade.svg);

		&:is(.small,.medium) {
			background-image: url(./img/philartMadeSmall.svg);
		}
	}

	&[piece-state=unavailable] {
		display: none;
		/*background-image: url(./img/philartUnavail.svg);*/
	}

	&.medium {
		top: -2rem;
		right: -.7rem;
		width: 6rem;
		height: 3.7rem;
	}

	&.small {
		top: -2rem;
		right: -.7rem;
		width: 5rem;
		height: 3rem;
	}

}

.madeToOrder {
	background-image: url(./img/philartMade.svg);
}

.available {
	background-image: url(./img/philartAvail.svg);
}

/* Balises pédagogiques
.margin_co {
    & .bkBase_ti {
        font-weight: bold;
        color: var(--accentColor);
    }
    & .bkBase .bkBase_ti {
        border-block-end: none;
    }
}

div.bkBase {
    margin-block: 1em;
}
.bkBase_closed,
.bkBase_open {
    display: flex;
    align-items: baseline;
    column-gap: 0.2em;

    &::after {
        font-family: "fontello";
        font-size: 0.8em;
        width: 2em;
        line-height: 2em;
        display: inline-block;
        text-align: center;
        border-radius: 50em;
        background-color: var(--extraBG);
        color: var(--extraFG);
    }
    &:hover {
        text-decoration: none;

        &::after {
            background-color: color-mix(in oklab, var(--extraBG), #000 10%);
        }
    }
}
.bkBase_closed {
    border-block-end: none;

    &::after {
        content: "\E81E";
    }
}
.bkBase_open::after {content: "\E817";}

.bkEmphasis {
    padding: 1.5em;
    background-color: var(--emphasisBG);
    color: var(--emphasisFG);
    border-radius: var(--bkRadius);

    & a {
        color: var(--emphasisFG);

        &:hover {
            text-decoration: none;
            color: color-mix(in oklab, var(--emphasisFG), transparent 40%);
        }
        & > span {
            text-decoration: underline;
        }
    }

    & .bkBase_ti {
        color: var(--emphasisTitle);
        margin-block: 0 0.6em;
    }
}

.bkExtra {
    padding: 1em;
    border: 2px solid var(--extraFG);
    border-radius: var(--bkRadius);

    & .bkBase_ti {
        margin-block: 0;
        font-size: 1.3em;
        color: var(--extraFG);

        & > a span {
            color: var(--extraFG);
            flex: 1;
        }
    }
    & .collBlk_open {
        margin-block-start: 0.5em;
    }
}

.bkTyped {
    padding: 1em;
    border: 2px solid var(--extraFG);
    border-radius: var(--bkRadius);

    & .bkBase_ti {
        margin-block-start: 0;

        &:has(a.bkBase_closed) {
            margin-block-end:0;
        }
        & > * {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.1em;
        }
        & > a span {
            color: var(--extraFG);
        }
    }
    & i.type {
        order: 1;
        font-size: 0.9rem;
        font-style: normal;
        font-family: var(--textStyle);
        display: inline-flex;
        align-items: center;
        gap: 0.2em;
        padding: 0.2em 0.5em;
        background-color: var(--extraBG);
    }
    & .title {
        order: 2;
        flex: 1 80%;
        padding-inline-start: 0.1em;
    }
    & .bkBase_closed::after,
    & .bkBase_open::after {
        order: 3;
    }
}
*/