






.skf-oeuvres-hero {
	margin-top: 0;
}

.skf-oeuvres-hero:first-child {
	margin-block-start: 0;
}








.skf-oeuvres-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(520px, calc(100svh - var(--skf-entete-bas, 400px)));
	padding: 60px var(--skf-marge) 44px;
	background: var(--skf-fond);
}


.skf-oeuvres-hero__corps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.skf-oeuvres-hero__lame-1 {
	top: 140px;
	right: 16px;
	height: 340px;
	background: var(--skf-magenta);
}

.skf-oeuvres-hero__lame-2 {
	top: 225px;
	right: 32px;
	height: 195px;
	background: var(--skf-jaune);
}

.skf-oeuvres-hero__lame-3 {
	top: 290px;
	right: 48px;
	height: 110px;
	background: var(--skf-vert);
}



.skf-oeuvres-hero__sourcil {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	font: 600 12px Archivo, sans-serif;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--skf-gris);
}

.skf-oeuvres-hero__sourcil::before {
	content: "";
	flex: 0 0 26px;
	width: 26px;
	height: 6px;
	background: var(--skf-magenta);
}



.skf-oeuvres-hero__titre {
	max-width: 14em;
	width: 100%;
	margin: 0 0 24px;
	font: 600 96px/1 Archivo, sans-serif;
	font-size: min(96px, 13svh);
	letter-spacing: -0.04em;
	color: var(--skf-encre);
	text-wrap: pretty;
}

.skf-oeuvres-hero__chapo {
	max-width: 40em;
	margin: 0;
	font: 300 19px/1.74 Archivo, sans-serif;
	font-size: min(19px, 2.4svh);
	color: var(--skf-texte-doux);
	text-wrap: pretty;
}



.skf-oeuvres-hero__ancre {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	gap: 16px;
	margin-top: min(52px, 4svh);
	color: var(--skf-magenta);
	text-decoration: none;
}

.skf-oeuvres-hero__ancre-barre {
	display: block;
	width: 34px;
	height: 6px;
	background: var(--skf-magenta);
}

.skf-oeuvres-hero__ancre-mot {
	font: 500 13px Archivo, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}






.skf-oeuvres-bandes__sourcil {
	margin: 0 var(--skf-marge) 20px;
	padding-top: 26px;
	border-top: 1px solid var(--skf-filet);
	scroll-margin-top: 96px;
}

.skf-oeuvres-bandes__sourcil-mot {
	font: 500 11px Archivo, sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--skf-gris);
}






.skf-oeuvres-bandes {
	counter-reset: skf-bande;
}


.skf-oeuvres-bandes#collections {
	scroll-margin-top: 96px;
}


.skf-oeuvres-bande {
	counter-increment: skf-bande;
	position: relative;
	display: block;
	height: 620px;
	margin-bottom: 0;
	padding-top: 9px;
	overflow: hidden;
	background: var(--skf-fond);
	color: inherit;
	text-decoration: none;
}


.skf-oeuvres-bande:last-of-type {
	margin-bottom: 90px;
}


.skf-oeuvres-bande__bandeau {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: 2;
	display: block;
	height: 9px;
	background: var(--skf-collection, var(--skf-magenta));
}

.skf-oeuvres-bande__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.skf-oeuvres-bande__voile {
	position: absolute;
	top: 9px;
	bottom: 0;
	left: 0;
	width: 56%;
	background: linear-gradient(90deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .86) 34%, rgba(10, 10, 10, .66) 62%, rgba(10, 10, 10, .3) 84%, rgba(10, 10, 10, 0) 100%);
}

.skf-oeuvres-bande__cartel {
	position: absolute;
	left: var(--skf-marge);
	top: 50%;
	transform: translateY(-50%);
	max-width: 30em;
}

.skf-oeuvres-bande__surtitre {
	margin: 0 0 14px;
	font: 500 11px Archivo, sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}


.skf-oeuvres-bande__surtitre::before {
	content: counter(skf-bande, decimal-leading-zero) " · ";
}

.skf-oeuvres-bande__cartel h2 {
	margin: 0 0 18px;
	font: 600 74px/1 Archivo, sans-serif;
	letter-spacing: -0.04em;
	color: #fff;
}

.skf-oeuvres-bande__intro {
	margin: 0 0 22px;
	font: 300 19px/1.7 Archivo, sans-serif;
	color: rgba(255, 255, 255, .93);
	text-wrap: pretty;
}



.skf-oeuvres-bande__voir {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 500 12px Archivo, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--skf-collection, var(--skf-magenta));
}



.skf-oeuvres-bande__mot {
	position: relative;
	display: inline-block;
}



.skf-oeuvres-bande__mot::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	height: 2px;
	background: var(--skf-collection, var(--skf-magenta));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 650ms cubic-bezier(0.33, 0.02, 0.35, 1);
}



.skf-oeuvres-bande__fleche {
	display: inline-block;
}





.skf-oeuvres-bande__image {
	transition: transform 700ms cubic-bezier(.22, .61, .36, 1);
}



.skf-oeuvres-bande__bandeau {
	transition: height 400ms cubic-bezier(.22, .61, .36, 1);
}

.skf-oeuvres-bande__fleche {
	transition: transform 500ms cubic-bezier(0.33, 0.02, 0.35, 1);
}

.skf-oeuvres-bande:hover .skf-oeuvres-bande__image,
.skf-oeuvres-bande:focus-visible .skf-oeuvres-bande__image {
	transform: scale(1.05);
}

.skf-oeuvres-bande:hover .skf-oeuvres-bande__bandeau,
.skf-oeuvres-bande:focus-visible .skf-oeuvres-bande__bandeau {
	height: 18px;
}

.skf-oeuvres-bande:hover .skf-oeuvres-bande__fleche,
.skf-oeuvres-bande:focus-visible .skf-oeuvres-bande__fleche {
	transform: translateX(6px);
}



.skf-oeuvres-bande__voir:hover .skf-oeuvres-bande__mot::after,
.skf-oeuvres-bande:focus-visible .skf-oeuvres-bande__mot::after {
	transform: scaleX(1);
}

.skf-oeuvres-bande__voir:hover .skf-oeuvres-bande__fleche {
	transform: translateX(12px);
}


.skf-oeuvres-bande:nth-of-type(even) .skf-oeuvres-bande__voile {
	left: auto;
	right: 0;
	background: linear-gradient(270deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .86) 34%, rgba(10, 10, 10, .66) 62%, rgba(10, 10, 10, .3) 84%, rgba(10, 10, 10, 0) 100%);
}

.skf-oeuvres-bande:nth-of-type(even) .skf-oeuvres-bande__cartel {
	left: auto;
	right: var(--skf-marge);
	text-align: right;
}








.skf-oeuvres-constantes {
	position: relative;
	padding: 0 var(--skf-marge) 110px;
}

.skf-oeuvres-constantes__lame-1 {
	top: 50%;
	right: 16px;
	height: 260px;
	transform: translateY(-50%);
	background: var(--skf-magenta);
}

.skf-oeuvres-constantes__lame-2 {
	top: 50%;
	right: 32px;
	height: 170px;
	transform: translateY(-50%);
	background: var(--skf-vert);
}

.skf-oeuvres-constantes__sourcil {
	margin: 0 0 44px;
	padding-top: 26px;
	border-top: 1px solid var(--skf-filet);
}

.skf-oeuvres-constantes__sourcil-mot {
	font: 500 11px Archivo, sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--skf-gris);
}



.skf-oeuvres-constantes__corps {
	display: grid;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
	column-gap: 80px;
	align-items: start;
}

.skf-oeuvres-constantes__corps h2 {
	grid-column: 1;
	grid-row: 1;
	margin: 0 0 20px;
	font: 600 46px/1.06 Archivo, sans-serif;
	letter-spacing: -0.035em;
	color: var(--skf-encre);
	text-wrap: pretty;
}

.skf-oeuvres-constantes__corps > p {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font: 300 18px/1.72 Archivo, sans-serif;
	color: var(--skf-texte-doux);
	text-wrap: pretty;
}



.skf-oeuvres-constantes__liste {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-width: 0;
}

.skf-oeuvres-constante {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	margin-bottom: 26px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--skf-filet);
}



.skf-oeuvres-constante:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.skf-oeuvres-constante__lame {
	flex: 0 0 auto;
	display: block;
	width: 6px;
	height: 52px;
	background: var(--skf-vert);
}

.skf-oeuvres-constante__mot {
	min-width: 0;
}

.skf-oeuvres-constante__mot h3 {
	margin: 0 0 8px;
	font: 600 21px Archivo, sans-serif;
	letter-spacing: -0.02em;
	color: var(--skf-encre);
}

.skf-oeuvres-constante__mot p {
	margin: 0;
	font: 300 17px/1.68 Archivo, sans-serif;
	color: var(--skf-texte-doux);
	text-wrap: pretty;
}



.skf-oeuvres-constante:nth-child(4n + 2) .skf-oeuvres-constante__lame {
	background: var(--skf-magenta);
}

.skf-oeuvres-constante:nth-child(4n + 3) .skf-oeuvres-constante__lame {
	background: var(--skf-jaune);
}

.skf-oeuvres-constante:nth-child(4n + 4) .skf-oeuvres-constante__lame {
	background: var(--skf-rouge);
}






.skf-oeuvres-cloture {
	position: relative;
	padding: 0 var(--skf-marge) 140px;
}



.skf-oeuvres-cloture__corps {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 26px;
	border-top: 1px solid var(--skf-filet);
	text-align: center;
}



.skf-oeuvres-cloture__corps .skf-oeuvres-cloture__sourcil {
	margin: 0 0 56px;
	font: 500 11px Archivo, sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--skf-gris);
}

.skf-oeuvres-cloture__corps h2 {
	max-width: 15em;
	margin: 0 0 26px;
	font: 600 52px/1.06 Archivo, sans-serif;
	letter-spacing: -0.035em;
	color: var(--skf-encre);
	text-wrap: pretty;
}

.skf-oeuvres-cloture__corps p {
	max-width: 38em;
	margin: 0 0 40px;
	font: 300 20px/1.72 Archivo, sans-serif;
	color: var(--skf-texte-doux);
	text-wrap: pretty;
}



.skf-oeuvres-cloture__corps .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	--gws-cta: #E5007E;
	--gws-cta-sur: #fff;
}

.skf-oeuvres-cloture__corps .skf-oeuvres-cloture__second {
	--gws-cta: #00B3A4;
	--gws-cta-sur: #fff;
}

.skf-oeuvres-cloture__corps .wp-block-button__link {
	font: 500 16px/1.2 Archivo, sans-serif;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.skf-oeuvres-cloture__lame-1 { position: absolute; left: 16px;  top: 60px;  height: 300px; background: #00B3A4; }
.skf-oeuvres-cloture__lame-2 { position: absolute; left: 32px;  top: 130px; height: 190px; background: #E5007E; }
.skf-oeuvres-cloture__lame-3 { position: absolute; left: 48px;  top: 210px; height: 120px; background: #FFC000; }
.skf-oeuvres-cloture__lame-4 { position: absolute; right: 16px; top: 180px; height: 280px; background: #E63329; }
.skf-oeuvres-cloture__lame-5 { position: absolute; right: 32px; top: 270px; height: 150px; background: #3C9E4F; }






@media (max-width: 1079.98px) {

	.skf-oeuvres-constantes__corps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 44px;
	}

	.skf-oeuvres-constantes__corps h2,
	.skf-oeuvres-constantes__corps > p {
		grid-column: 1;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.skf-oeuvres-constantes__corps h2 {
		grid-row: 1;
	}

	.skf-oeuvres-constantes__corps > p {
		grid-row: 2;
	}

	.skf-oeuvres-constantes__liste {
		grid-column: 1;
		grid-row: 3;
	}

	.skf-oeuvres-constantes__sourcil {
		text-align: center;
	}
}

@media (max-width: 1000px) {
	.skf-oeuvres-hero__titre {
		font-size: 60px;
	}

	.skf-oeuvres-constantes__corps h2 {
		font-size: 40px;
	}

	.skf-oeuvres-cloture__corps h2 {
		font-size: 40px;
	}

	.skf-oeuvres-bande {
		height: 460px;
	}



	.skf-oeuvres-bande__voile {
		width: max(56%, 470px);
	}

	.skf-oeuvres-bande__cartel {
		max-width: 22em;
	}

	.skf-oeuvres-bande__cartel h2 {
		font-size: 52px;
	}
}

@media (max-width: 700px) {
	.skf-oeuvres-hero {
		min-height: 0;
	}

	.skf-oeuvres-hero__titre {
		font-size: 38px;
	}

	.skf-oeuvres-hero__ancre {
		margin-top: 40px;
		padding-top: 0;
	}

	.skf-oeuvres-constantes__corps h2,
	.skf-oeuvres-cloture__corps h2 {
		font-size: 32px;
	}



	.skf-oeuvres-bande {
		--skf-bande-image: 460px;
		--skf-bande-couture: 2px;
		height: 660px;
		background: var(--skf-encre);
	}

	.skf-oeuvres-bande__image {
		height: var(--skf-bande-image);
	}



	.skf-oeuvres-bande__voile,
	.skf-oeuvres-bande:nth-of-type(even) .skf-oeuvres-bande__voile {
		top: auto;
		bottom: calc(100% - 9px - var(--skf-bande-image) - var(--skf-bande-couture));
		left: 0;
		right: 0;
		width: auto;
		height: calc(var(--skf-bande-image) * .58 + var(--skf-bande-couture));
		background: linear-gradient(0deg, var(--skf-encre) 0%, rgba(10, 10, 10, .86) 30%, rgba(10, 10, 10, .6) 62%, rgba(10, 10, 10, 0) 100%);
	}

	.skf-oeuvres-bande__cartel,
	.skf-oeuvres-bande:nth-of-type(even) .skf-oeuvres-bande__cartel {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		max-width: none;
		padding: 0 var(--skf-marge) 34px;
		transform: none;
		text-align: left;
	}

	.skf-oeuvres-bande__cartel h2 {
		font-size: 36px;
	}
}






.editor-styles-wrapper .skf-oeuvres-hero__corps .skf-oeuvres-hero__titre {
	max-width: 14em;
}

.editor-styles-wrapper .skf-oeuvres-hero__corps .skf-oeuvres-hero__chapo {
	max-width: 40em;
}

.editor-styles-wrapper .skf-oeuvres-bande__cartel .skf-oeuvres-bande__surtitre,
.editor-styles-wrapper .skf-oeuvres-bande__cartel .skf-oeuvres-bande__intro {
	max-width: none;
}

.editor-styles-wrapper .skf-oeuvres-cloture__corps h2 {
	max-width: 15em;
}

.editor-styles-wrapper .skf-oeuvres-cloture__corps p {
	max-width: 38em;
}



