@font-face {
	font-family: 'Mulish';
	src: url('/fonts/Mulish-VariableFont_wght.ttf') format('truetype');
	font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Mulish';
	src: url('/fonts/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
	font-weight: 200 900; font-style: italic; font-display: swap;
}

@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; /* Regular weight */
	src: url('/fonts/CrimsonPro-Regular.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; /* SemiBold weight */
	src: url('/fonts/CrimsonPro-SemiBold.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}

/* FUNCTION ******************************************************************************************************/

.clear { clear: both; }

html { font-size:100%; box-sizing:border-box; }*,*:before,*:after { box-sizing:inherit; }
html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body { margin: 0; padding: 0; overflow-y: scroll; }

#to-the-top {
	width: 40px; height: 40px; display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 24px;
	border: none; outline: none; background-color: #000055; color: white; cursor: pointer; border-radius: 4px;
}

/* BKG ********************************************************************************/

.sea-bkg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -1; }

/* HOME PAGE *************************************************************************/

.home-under-banner { width: 100%; display: flex; flex-direction: row; }
.home-under-banner-left { width: 50%; margin: 0.6rem 1rem 0 1rem; }
.home-under-banner-right { width: 50%; margin: 0.6rem 1rem 0 1rem; }

.home-content { width: 100%; display: flex; flex-direction: row; }
.home-content-left { width: 50%; height: auto; padding: 1.5rem 1rem 1rem 1rem; }
.home-content-right { display: flex; flex-direction: column; width: 50%; padding: 1.5rem 1rem 1rem 1rem; }

.home-content-left-advertising-book { width: 34rem; height: auto; margin: auto; }

/* NEW ADVERTISING START *************************************************************************/

.home-advertising{
  width: 100%; aspect-ratio: 1417 / 3189; height: auto; display: flex; flex-direction: column; align-items: center; padding-top: 2rem;
  background-image: url("images/plr-advertising-bkg.png"); background-repeat: no-repeat; background-position: top center; background-size: 100% 100%;
  overflow: hidden;
}

/* Make all inner images responsive by default */
.home-advertising img{ display: block; height: auto; }

.home-advertising-title-a { width: 70%; }
.home-advertising-title-b { width: 60%; }
.home-advertising-title-c { width: 60%; }
.home-advertising-book { width: 50%; }
.home-advertising-description-a { width: 70%; }
.home-advertising-description-b { width: 65%; }
.home-advertising-description-c { width: 50%; }


.spacing-item { /*position: relative;*/ width: 100%; height: 1%; }
.spacing-item-1, .spacing-item-2, .spacing-item-3, .spacing-item-4, .spacing-item-5, .spacing-item-6, .spacing-item-7 { /*position: relative;*/ width: 100%; height: 1%; transition: height 0.2s ease; }

/* NEW ADVERTISING END  *************************************************************************/

.banner-read { width: 100%;}
.banner-read img { width: 100%;}

.banner-blog { width: 100%;}
.banner-blog img { width: 100%;}

/* BLOG FEED / ARTICLES PREVIEW  *************************************************************************/

.article-wrapper { display: flex; flex-direction: row; }
.article-image-wrapper { width: 16rem; height: 16rem; display: flex; align-items: flex-start; }
.article-image { width: 16rem; height: 16rem; object-fit: cover; }

.article-titre-and-extract-wrapper { display: flex; flex-direction: column; justify-content: flex-start;	background-color: rgba(0, 0, 125, 0.8); }
.article-titre-wrapper { height: 1.5rem; margin: 1.5rem 1.5rem 1.5rem 1.5rem; }
.article-titre { font-family: 'Mulish', sans-serif; letter-spacing: 0.06rem; font-size: 3rem; margin: 0;	text-align:justify; font-family: 'Mulish', sans-serif; font-style: bold; font-size: 1.2rem; color: #fff; text-decoration: none; }
.article-extract-wrapper { height: 9rem; margin: 0 3rem 0 1.5rem; }
.article-extract { font-family: 'Mulish', sans-serif; font-size: 0.8rem; line-height: 1.6rem; text-align:justify; font-family: 'Mulish', sans-serif; font-style: bold; font-size: 1.2rem; color: #fff; text-decoration: none; }
.continue-link-wrapper { height: 1.5rem; display:block; margin: 0 3rem 0 0.5rem; }
.article-link { font-family: 'Mulish', sans-serif; letter-spacing: 0.06rem; font-size: 1rem; color: #00ffff; display: block; bottom: 0; padding: 0 0 0.5rem 1rem; }

.articles-separator { width: 100%; height:4px; background-color: rgba(255,255,255,0.3); margin: 1.3rem 0 1.3rem 0; }

/* ROMAN CONTENT ******************************************************************************************/

.roman-container { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 20px; }
.roman-bkg-wrapper { width: 100%; height: auto; background-size: cover; background-repeat: no-repeat; background-position: center; transition: background-image 1.5s ease-in-out; }
.roman-content { flex: 1; text-align: center; }
.roman-content1 { margin: 0 0 0 0; }
.roman-content2 { margin: 0 0 0 2.7rem; padding: 1rem 2rem 2rem 2rem; background-color: rgba(0,0,125,0.7); text-align:justify; font-family: 'Mulish', sans-serif; font-style: bold; font-size: 1.2rem; color: #fff; text-decoration: none; }

/* Wrapper to position the iframe and the overlay image */
.iframe-wrapper { z-index: 1; width: 100%; height: 400px; position: relative; display: block; }
/* The iframe fully occupies the wrapper */
.iframe-wrapper iframe { z-index: 1; width: 100px; height: 100px; border: none; display: block; }

.lire-extrait { z-index: 1000; top: 0; left: 0; margin: 5px; width: 128px; height: auto; }

.instructions-3d { width: 450px; height: 25px; margin: 0.2rem auto 0 auto; text-align: center;}
.instructions-3d-text { float: left; margin: 0.1rem 0 0 0; font-family: 'Mulish', sans-serif; font-style: 500; font-size: 1rem; color: #000033; text-decoration: none; }
.instructions-3d-logo-rotate { float: left; margin: 0 2rem 0 0.2rem; }
.instructions-3d-logo-zoom { float: left; margin: 0 0 0 0.2rem; }

#book-container { width: 800px; height: 800px; margin-top: 50px; border:5px solid rgba(0, 0, 255, 0.3); background: transparent; display: block; }
.roman-book-name { width: 100%; text-align: center; }
.roman-book-title { font-family: 'Crimson Pro', serif; font-weight: 600; font-size: 3.5rem; color: #fff; letter-spacing: 0.03em; line-height: 4.5rem; text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);	}
.roman-book-subtitle { font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 1.6rem; color: #fff; letter-spacing: 0.06em; line-height: 2rem; }
.roman-text-commander-format { width: auto; text-align: center; font-family: 'Crimson Pro', serif; font-weight: 400; font-size: 1.3rem; color: #fff; letter-spacing: 0.06em; line-height: 2rem; }
.roman-text-commander { width: auto; text-align: center; margin: 1rem 0 0 0; font-family: 'Crimson Pro', serif; font-weight: 600; font-size: 1.5rem; color: #fff; letter-spacing: 0.06em; line-height: 2rem; }
.roman-separatior { width: 100%; height:4px; margin: 1.6rem auto 1.6rem auto; background-color: rgba(255,255,255,0.3); }
.roman-pitch {}

/* BIOGRAPHIE CONTENT ******************************************************************************************/

.biographie-container { width: 70%; display: flex; justify-content: space-between; margin: 1rem auto 1rem auto; padding: 1rem; }
.biographie-content { flex: 1; text-align: center; }
.biographie-content-left { width: 100%; height: auto; background-color: rgba(255,255,255,0.5);
	text-align:justify; font-family: 'Mulish', sans-serif; font-style: bold; font-size: 1rem; color: #333; text-decoration: none;
}
.biographie-content-right { width: 100%; height: auto; background-color: rgba(255,255,255,0.8);
	padding: 3rem; text-align:justify; font-family: 'Mulish', sans-serif; font-style: bold; font-size: 1rem; color: #333; text-decoration: none;
}


.biographie-image-wrapper-height { float:left; position: relative; width: calc(100% - 4rem); margin: 1rem 2rem 1rem 2rem; text-align: center; }
.biographie-image-wrapper-height:after { content: ""; display: block; padding-bottom: 100%; }
.biographie-image-height { position: absolute; height: 100%; width: auto; left: 50%; transform: translate(-50%,0); }

.biographie-image-wrapper-height-sourineige { float:left; position: relative; width: calc(100% - 4rem); margin: 1rem 2rem 1rem 2rem; text-align: center; }
.biographie-image-wrapper-height-sourineige:after { content: ""; display: block; padding-bottom: 75%; }
.biographie-image-height-sourineige { position: absolute; height: 100%; width: auto; left: 50%; transform: translate(-50%,0); }

.biographie-image-frame { border: 1px solid rgba(0, 0, 0, 0.4);}

/* MAGAZINE CONTENT ******************************************************************************************/

.magazine-container-mini { width:1296px; margin: 1rem auto 2rem auto; }
.magazine-image-mini { width:128px; height:auto; margin:6px; }
.magazine-container-pages { width:100%;}
.magazine-page-title {	width:auto; height:auto; margin: 4rem auto 1rem auto; font-family: 'Mulish', sans-serif; font-size: 1rem; color: #999; text-align: center; }
.magazine-page-old { display:block; margin:0 auto 3rem auto; clear:both; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4), 0 8px 22px 0 rgba(0, 0, 0, 0.39); }
.page-with-number { position: relative; width: 100%; max-width: 1000px; margin: 0 auto 4rem auto; }
.magazine-page { display: block; width: 100%; height: auto; object-fit: contain; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4), 0 8px 22px 0 rgba(0, 0, 0, 0.39); }
.page-number-left { position: absolute; bottom: 15px; left: 38px; font-size: 48px; font-weight: bold; color: white; text-shadow: 0 0 4px rgba(0, 0, 0, 1); padding: 5px 10px; z-index: 10; }
.page-number-right {	position: absolute; bottom: 15px; right: 38px; font-size: 48px; font-weight: bold; color: white; text-shadow: 0 0 4px rgba(0, 0, 0, 1); padding: 5px 10px; z-index: 10; }

/* ILLUSTRATIONS CONTENT ***************************************************************************************/

.illustrations-container-mini { width:1296px; margin: 1rem auto 2rem auto; }
.illustration-mini { width:128px; height:auto; margin:6px; }
.illustrations-container-maxi { width:100%;}
.illustration-title-maxi {	width:auto; height:auto; margin: 4rem auto 1rem auto; font-family: 'Mulish', sans-serif; font-size: 1rem; color: #999; text-align: center; }
.illustration-maxi { display:block; margin:0 auto 3rem auto; clear:both; box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4), 0 8px 22px 0 rgba(0, 0, 0, 0.39); }

/* VIDEOS CONTENT ***************************************************************************************/

.videos-container-big-images-wrapper { margin-bottom: 2rem; }
.videos-container-images-mini { width:1296px; margin: 1rem auto 2rem auto; text-align:center; }
.video-image-mini { width:128px; height:auto; margin:6px; }
.video-title {	width:auto; height:auto; margin: 4rem auto 1rem auto; font-family: 'Mulish', sans-serif; font-size: 1rem; color: #999; text-align: center; }
.video-wrapper-max-width { max-width: 1120px; margin: 0 auto 0 auto; }
.video-wrapper { position: relative; padding-bottom: 56.25%; /* This is the ration 16:9 */ height: 0; margin-left: 2%; margin-right: 2%; }

/* PRESSE CONTENT **************************************************************************************/

.press-container { flex-direction: column; background-image: none !important; }
.press-content { width: 100%; margin: 0 0 1rem 0; }
.press-content-left { width: 100%; border-right: none; }
.press-content-left-inside { width: 100%; margin: 0; padding: 0 2rem 0 2rem; }
.press-content-right { width: 100%; border-left: none; }
.press-content-right-inside { width: 100%; margin: 0; padding: 0 2rem 0 2rem; }