@charset "UTF-8";
/* CSS Document */

@import 'https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap';
	
	body, html {
		margin: 0;
		padding: 0;
	}
	
	.headroom {
    will-change: top;
    transition: top 200ms linear;
	}
	.headroom--pinned {
		top: 0;
	}
	.headroom--unpinned {
		top: calc(-60px - var(--phh)) !important;
	}
	
	section {
		position: relative;
		margin-bottom: 60px;
		font-family: 'Karla';
		-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
		color: #000;
		line-height: 1.6;
	}	
	
	.bloc-media {
		position: relative;
	}
	
	section img, section video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		
	}
	
	section.template-01 {
		
	}
	
	section.template-02 {
		padding: 0 10%;	
	}
	
	section.template-02 .template-title {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 6vw;
		line-height: 1;
		text-transform: uppercase;
		font-weight: bold;
		text-transform: uppercase;
	}
	
	section.template-02 .holder {
		display: flex;
		flex-wrap: wrap;
	}
	
	section.template-02 .bloc-media {
		width: 50%;
		padding: 10px;
		box-sizing: border-box;
	}
	
@media screen and (max-width: 750px) {
	
	section.template-02 {
		padding: 0;	
		height: 100vh;
	}
	
	section.template-02 .holder{
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		position: relative;
	}
	
	section.template-02 .template-title {
		font-size: 12vw;
		padding: 0 16px;
		box-sizing: border-box;
	}
	
	section.template-02 .bloc-media {
		width: 100%;
		height: 100vh;
		padding: 0;
		position: absolute;
		transform: translateY(100%);
		bottom: 0;
	}
	
	section.template-02 .bloc-media:nth-child(1) {
		position: relative;
		transform: translateY(0);
	}

}
	
	section.template-03.bis {
		padding: 0 10%;
	}
	
	section.template-03.bis .template-title{
		position: absolute;
		height: 6.6vw;
		display: flex;
		align-items: center;
		width: 100%;
		text-align: center;
		justify-content: center;
		bottom: 0;
		pointer-events: none;
	}	

	section.template-03 .holder {
		display: flex;
	}
	
	section.template-03 .bloc-media {
		width: 25%;
	}
	
	section.template-03.bis .holder {
		display: flex;
		flex-wrap: wrap;
	}
	
	section.template-03.bis .bloc-media:nth-child(3n) {
		margin-right: 0;
		padding-right: 0;
	}
	
	section.template-03.bis .bloc-media {
		width: calc(100% / 3);
		margin-bottom: 10px;
	}
	
	section.template-03 .bloc-media {
		padding-right: 10px;
		box-sizing: border-box;
	}
	
	section.template-03 .bloc-media:last-child {
		margin-right: 0;
		padding-right: 0;
	}
	
@media screen and (max-width: 750px) {
	section.template-03 .holder {
		flex-wrap: wrap;
	}
	
	section.template-03.bis {
		padding: 0;
	}
	
	section.template-03 .bloc-media, section.template-03.bis .bloc-media {
		width: 50%;
		padding-right: 0;
		margin-bottom: 8px;
	}
	
	section.template-03.bis .template-title {
		height: 13vw;
	}
	
	section.template-03 .bloc-media:nth-child(odd), section.template-03.bis .bloc-media:nth-child(odd) {
		padding-right: 8px;

	}
}
	
	section.template-04 .holder {
		display: flex;
		justify-content: center;

	}
	
	section.template-04 .template-title {
		text-align: center;
		margin: 20px 0;
	}


	
	section.template-04 .holder .bloc-media {
		width: 25%;
		padding-right: 10px;
		box-sizing: border-box;
	}
	
	section.template-04 .holder .bloc-media:last-child {
		padding-right: 0;
	}
	
@media screen and (max-width: 750px) {
	section.template-04 {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
	}
	
	section.template-04::-webkit-scrollbar {
  display: none;
}
	
	
	section.template-04 .template-title {
		position: sticky;
		width: 100%;
		left: 0;
	}
	
	
	section.template-04 .holder {
		display: inline-flex;
		justify-content: flex-start;
		max-width: none;
	}
	
	section.template-04 .holder .bloc-media {
		width: 75vw;
		padding-right: 8px;
	}

}
	
	section.template-text  {
		padding: 0 10%;
	}
	
	section.template-text .bloc-text {
		margin-left: auto;
		margin-right: auto;
	}
	
	section.template-text .holder.two-cols {
		display: flex;
		align-items: center;
	}
	
	section.template-text .holder.two-cols .bloc-text {
		width: 50%;
	}
	
	.bloc-text.title-01 {
		font-size: 24px;
		text-transform: uppercase;
		text-align: center;
		line-height: 1;
		margin: 0 auto 40px;
	}
	
	.bloc-text.title-02 {
		font-weight: bold;
		text-transform: uppercase;
		line-height: 0.7;
		letter-spacing: -1px;
		text-align: center;
	}
	
	.bloc-text.title-02 span{
		font-size: 120%;
		display: inline-block;
		transform: translateY(27%);
	}
	
	.bloc-text.title-02 div:nth-child(1) {
		font-size: 2.5vw;
	}
	
	.bloc-text.title-02 div:nth-child(2) {
		font-size: 4.5vw;
	}
	
	section.template-text .bloc-text.lettrine::first-letter {
		float: left;
		font-weight: bold;
		font-size: 89px;
		padding: 0 5px 0 0;
		line-height: 0.6;
		column-break-before: avoid;
	}
	
	
@media screen and (max-width: 750px) {
		section.template-text .holder.two-cols {
		display: flex;
		flex-wrap: wrap;
	}
	
	section.template-text .holder.two-cols .bloc-text {
		width: 100%;
	}
	
	section.template-text .holder.two-cols .bloc-text:nth-child(1) {
		margin-bottom: 40px;
	}
	}
	
	section.template-05 {
		padding: 0 10%;
	}
	
	section.template-05 .holder {
		display: flex;
		justify-content: space-between
	}
	
	section.template-05 .holder > div {
		width: 50%;
		text-align: right;
	}
	
	section.template-05 .holder > div:last-child {
		width: 36%;
		display: flex;
		flex-wrap: wrap;
align-content: center;
justify-content: flex-end;
	}
	
	@media screen and (max-width: 850px) {

		
		
		section.template-05 .holder > div{
		width: 45%;
	}
		
		
		section.template-05 .holder > div:last-child {
		width: 50%;
	}
	}
		
	section.template-05 .bloc-text.title-02 {
		text-align: right;
		margin-bottom: 60px;
	}
	
	section.template-05 .holder > div:first-child {
		padding-right: 10px;
	}
	
@media screen and (max-width: 750px) {
			section.template-05 {
			padding: 0;
		}
	
	
		section.template-05 .holder {
		display: flex;
		flex-wrap: wrap;
	}
	
	section.template-05 .holder > div {
		width: 100%;
	}
	
	section.template-05 .holder > div {
		width: 100%;
	}
	
	.bloc-text.title-02 div:nth-child(1) {
		font-size: 7vw;
	}
	.bloc-text.title-02 div:nth-child(2) {
		font-size: 14vw;
	}
	section.template-05 .holder > div:first-child {
		padding-right: 0;
	}
	
	section.template-05 .holder > div:last-child {
		width: 100%;
		padding: 0 10%;
	}
	
	section.template-05 .bloc-text.title-02 {
		margin-top: 40px;
		margin-bottom: 20px;
	}
	
	}
	
	@media screen and (min-width: 1440px) {
		section {
			font-size: 16px;
		}
		
		section.template-04 > .template-title {
			font-size: 18px;
		}
	}
	
	@media screen and (max-width: 1440px) {
		section {
			font-size: 14px;
		}
	

	}
	
	@media screen and (max-width: 1280px) {
		section {
			font-size: 12px;
		}
	
		section.template-04 > .template-title {
			font-size: 16px;
		}
	}
	
	@media screen and (max-width: 750px) {
		section {
			font-size: 12px;
			margin-bottom: 40px;
		}
		
	}
		
	.img-link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	a.pin {
		position: absolute;
		width: 20px;
		height: 20px;
		border: 1px solid #000;
		border-radius: 50%;
		overflow: visible;
		box-sizing: content-box;
	}
	
	a.pin.white {
		border: 1px solid #FFF;
	}
	
	a.pin.white:hover {
		background-color: #FFF;
	}
	
	a.pin.white:before {
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-white.svg');
	}
	
	a.pin.white:hover:before {
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-black.svg');
	}
	
	a.pin:hover {
		background-color: #000;
	}
	
	a.pin:before {
		content:'';
		width: 20px;
		height: 20px;
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-black.svg');
		background-size: 20px 20px;
		display: block;
	}
	
	a.pin:hover:before {
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-white.svg');
	}

	a.pin2 {
		position: absolute;
		width: 20px;
		height: 20px;
		border: 1px solid #000;
		border-radius: 50%;
		overflow: visible;
		box-sizing: content-box;
	}
	
	a.pin2.white {
		border: 1px solid #FFF;
	}
	
	a.pin2.white:hover {
		background-color: #FFF;
	}
	
	a.pin2.white:before {
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-white.svg');
	}
	
	a.pin2.white:hover:before {
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-black.svg');
	}
	
	a.pin2:hover {
		background-color: #000;
	}
	
	a.pin2:before {
		content:'';
		width: 20px;
		height: 20px;
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-black.svg');
		background-size: 20px 20px;
		display: block;
	}
	
	a.pin2:hover:before {
		background-image: url('https://www.comptoirdescotonniers.com/on/demandware.static/-/Library-Sites-CDCSharedLibrary/default/dwad83db64/PAGES-MAGALOGUE/magalogue_01/c142_jeans/img/pin-white.svg');
	}
	
	.template-cta {
		text-align: center;
		text-decoration: underline;
	}