/*!
Theme Name: Lama El Charif v5 - 2025 Design
Theme URI: http://underscores.me/
Author: Michel Ravey
Author URI: http://www.michelravey.com/
Description: Lama El Charif's Official Portfolio 
Version: 5.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lamaelcharif
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

lamaElCharif is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body { margin:0; }

body.blue { background-color:#E2E7F7; }
body.green { background-color:#D8FCE7; }

::-webkit-scrollbar { display:none; }
div { 
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border:solid 0px lightgrey;
}
.clear { clear:both; }
a { 
	text-decoration: none; 
	transition:all 0.2s ease-in;
	-webkit-transition:all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
}
a:link, a:visited { color:#666; }
a:hover, a:active { color:#000; }




/* FONTS


Degular

font-family: "degular", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "degular", sans-serif;
font-weight: 400;
font-style: italic;

font-family: "degular", sans-serif;
font-weight: 700;
font-style: normal;

font-family: "degular", sans-serif;
font-weight: 700;
font-style: italic;

Roc Grotesk Wide

font-family: "roc-grotesk-wide", sans-serif;
font-weight: 500;
font-style: normal;


font-family: "parisplus-clair", sans-serif;
font-weight: 400;
font-style: normal;


ParisPlus

font-family: "parisplus-std", sans-serif;
font-weight: 400;
font-style: normal;


font-family: "parisplus-std", sans-serif;
font-weight: 400;
font-style: italic;


font-family: "parisplus-std", sans-serif;
font-weight: 700;
font-style: normal;


font-family: "parisplus-std", sans-serif;
font-weight: 700;
font-style: italic;


.titre {
	font-family: "parisplus-std", sans-serif;
	font-size:64px;
	font-weight: 700;
	font-style: normal;

}

.chapitre {
	font-family: "parisplus-std", sans-serif;
	font-size:40px;
	font-weight: 400;
	font-style: normal;

}
.usherwood_book {
	font-family: 'Usherwood-Book';
	font-size:40px;
}
.usherwood_medium {
	font-family: 'Usherwood-Medium';
	font-size:40px;
}
.usherwood_bold {
	font-family: 'Usherwood-Bold';
	font-size:40px;
}
.usherwood_black {
	font-family: 'Usherwood-Black';
	font-size:40px;
}
.lisbeth {
	font-family: 'lisbeth-display', sans-serif;
	font-weight:400;
	font-size:40px;
}

.parisine {
	font-family: "parisplus-clair", sans-serif;
	font-weight: 400;
	font-style: normal;
}
*/


#nav {
	position:absolute;
	top:0;left:0;
	width:100%;
	height:auto;
	padding:14px 36px 0px 36px;
	z-index:10000;
}
#logotype {
	position:relative;
	display:inline-block;
	font-family: 'Usherwood-Bold';
	font-size:23px;
	color:#444;
	cursor:pointer;
}
.logotype-separateur {
	position:relative;
	display: inline-block;
	width:40px;
	background-image: tomato;
}

#nav-elements {
	position:relative;
	display:inline-block;
	margin-left:50px;
	font-size:16px;
	/*
	font-family: "parisplus-clair",sans-serif;
	font-weight: 700;
	font-style: normal;
	*/
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#444;
}
.nav-element { 
	position:relative;
	display: inline-block;  
	margin-right:20px;
	top:31px;
}
.nav-element a:link, a:visited { color:#444; }
.nav-element a:hover, a:active { color:#376BF9; }





#nav-lang {
	position:absolute;
	top:29px;
	right:0;
	margin-left:40px;
	font-size:16px;
	/* 
	font-family: "parisplus-clair",sans-serif;
	font-weight: 700;
	font-style: normal;*/
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#444;
	

}
.nav-lang { 
	position:relative;
	display: inline-block;  
	margin-right:20px;
	list-style-type:none
}
.nav-lang li { display: inline-block;margin-right:20px; }

.nav-lang li.lang-item {
	/* font-family: "parisplus-clair",sans-serif; */
	font-family: "degular", sans-serif;
	
}
.nav-lang li.lang-item:nth-child(3) {
	font-family: 'LyonArabicSlantedText-Bold';
}

#menu-smartphone .nav-lang { display:block; }
#menu-smartphone .nav-lang li { display:block;padding-bottom:15px; }



#menu-hamburger {
	position:fixed;
	right:20px;top:20px;
	width:18px;height:18px;
	background:transparent;
	background-image:url(imgs/burger.svg);
	background-size:contain;
	background-repeat: no-repeat;
	background-position:center center;
	z-index:30000;
	display:none;
	
}
#menu-hamburger::selection {
	color:#fff;
}
#menu-hamburger:hover { background-image:url(imgs/burger-hover.svg); }
#menu-close {
	position:fixed;
	right:20px;top:20px;
	width:18px;height:18px;
	background:transparent;
	background-size:contain;
	background-repeat: no-repeat;
	background-position:center center;
	z-index:30000;
	display:none;
	
}
#menu-close { border:solid 0px green;background-image:url(imgs/boutons/close1.svg); }
#menu-close:hover { border:solid 0px green;background-image:url(imgs/boutons/close2.svg); }
#menu-smartphone {
	position:fixed;
	overflow-y:auto;
	display:none;
	padding-top:150px;
	top:0;
	width:100%;height:100%;
	background-color:#fff;
	z-index:2000;
	font-size:16px;
	/*
	font-family: "parisplus-clair",sans-serif;
	font-weight: 700;
	font-style: normal;
	*/
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#444;
}



/* Tous les elements du menu principal */
#primary-menu li { 
	margin-left:0px;list-style-type: none;
	display: inline-block;  
	margin-right:20px; 
}
#menu-smartphone #primary-menu li { 
	display:block;
	margin-bottom:15px;
}

/* Tous les liens du menu principal */
#primary-menu li.menu-item a {
	text-decoration:none;
	transition:all 0.2s ease-in;
	-webkit-transition:all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	font-size:16px;
	/*
	font-family: "parisplus-clair",sans-serif;
	font-weight: 700;
	font-style: normal; */
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#444;
}
#primary-menu .menu-item a:link, #primary-menu .menu-item a:visited { color:#666; }
#primary-menu .menu-item a:hover, #primary-menu .menu-item a:active { color:#376BF9; }

/* Les liens actifs (current, en cours) du menu principal */
#primary-menu li.current-menu-item a, 
#primary-menu li.current_page_item a, 
#primary-menu li.current-lang a {
	text-decoration:none;
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:16px;
	/*
	font-family: "parisplus-clair",sans-serif;
	font-weight: 700;
	font-style: normal;
	*/
	color:#444;
	/*
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: -3.5px;
	text-underline-position: under;
	*/
}
li.current-lang a {
	text-decoration:none;
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:16px;
	/*
	font-family: "parisplus-clair",sans-serif;
	font-weight: 700;
	font-style: normal;
	*/
	color:#376BF9;
	
	/*
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: -1px;
	text-underline-position: under;
	*/
}
#primary-menu .current-menu-item a:link, 
#primary-menu .current-menu-item a:visited { color:#376BF9; }
#primary-menu .current-menu-item a:hover, 
#primary-menu .current-menu-item a:active  { color:#376BF9; }

/* SMARTPHONE */
#menu-smartphone #primary-menu li.menu-item a { font-size:18px; }
#menu-smartphone #primary-menu li.current-menu-item a { font-size:18px; }







/* CHARACTERS */

#characters-container { 
	/*
	position:fixed;top:0px;left:120px;width:250px;height:100%;
	*/
	position:fixed;
	left:67px;top:67px;width:300px;height:calc(100% - 180px);
	font-family: 'lisbeth-display', sans-serif;
	font-weight:400;
	font-size:53px;
	
	z-index:50000;
	overflow-y:auto;
	/* background-color:#fff; */
	display: none;
	
}
#characters-container::-webkit-scrollbar { display:none; }
.character-close {
	position:fixed;float:left;
	top:72px;left:40px;
	width:18px;height:18px;
	background-image:url(imgs/boutons/close1.svg);
	background-position:center center;
	background-repeat: no-repeat;
	background-size:contain;
	cursor: pointer;
	z-index:21000;
}
.character {
	position:relative;float:left;width:100%;
	/* margin:0 30px 0px 0; */
	transition:all 0.2s ease-in;
	-webkit-transition:all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	color:#7FCBF8;
}
.character:hover { color:#000;cursor: pointer; }


#character-name {
	position:absolute;
	top:-10px;
	left:68px;width:220px;height:90px;
	/*
	background-image:url(imgs/joud.svg);
	background-position:center center;
	background-repeat: no-repeat;
	background-size:contain;
	*/
	font-family: 'lisbeth-display', sans-serif;
	font-weight:400;
	font-size:53px;
	color:#7FCBF8;
	z-index:20000;
	transition:all 0.2s ease-in;
	-webkit-transition:all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
}
#character-name:hover { color:#000;cursor: pointer; }

.project-bg {
	position:fixed;
	z-index:1000;
	top:0;left:0;width:100%;height:100%;
	background-position:center center;
	background-repeat: no-repeat;
	background-size:cover;
}
#project1 { background-image:url(imgs/1.jpg); }
#project2 { background-image:url(imgs/2.jpg); }
#project3 { background-image:url(imgs/3.jpg); }
#project4 { background-image:url(imgs/4.jpg); }

.project-nav {
	position:absolute;
	z-index:5000;
	top:50%;left:50%;
	width:180px;height:18px;
	margin-left:-90px;margin-top:-9px;
	display:flex;
	justify-content: space-between;
}
.project-nav-prev {
	width:18px;height:18px;
	background-image:url(imgs/boutons/prev1.svg);
	background-position:center center;
	background-repeat: no-repeat;
	background-size:contain;
	cursor: pointer;
}
.project-nav-next {
	width:18px;height:18px;
	background-image:url(imgs/boutons/next1.svg);
	background-position:center center;
	background-repeat: no-repeat;
	background-size:contain;
	cursor: pointer;
}
.project-nav-more {
	width:18px;height:18px;
	background-image:url(imgs/boutons/more1.svg);
	background-position:center center;
	background-repeat: no-repeat;
	background-size:contain;
	cursor: pointer;

}
.project-nav-close {
	width:18px;height:18px;
	background-image:url(imgs/boutons/close1.svg);
	background-position:center center;
	background-repeat: no-repeat;
	background-size:contain;
	cursor: pointer;
	
}

.project-details {
	position:absolute;
	width:800px;height:500px;
	top:50%;left:50%;
	margin-left:-400px;margin-top:-250px;
	background-color:#fff;
	z-index:10000;
	display:none;
	overflow:hidden;
	cursor:grab;
}
.project-details-nav { z-index:500;position:absolute;top:0;left:0;display:flex;flex-direction:row;justify-content:flex-start;  }
.project-details-nav div { margin-right:10px;  }

.ecran {
	position:fixed;
	top:0;left:0;
	width:100%;height:100%;
	/*display:flex;
	justify-content: center;
	align-items:center;*/
	display:none;

	background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;
}
.ecran video {
	width:100%;height:100%;
	object-fit: cover;
}
.project-details-text-fixed {
	z-index:100;
	position:absolute;top:0;left:0;
	padding:40px 30px 30px 30px;
	margin-right:40px;
	height:calc(100%);width:230px;
	background-color:#fff;
	overflow-y:auto;
}
.project-details-text-fixed::-webkit-scrollbar { display:none; }

.project-details-scroll {
	position:absolute;
	border:solid 0px blue;
	top:20px;left:0;width:100%;height:calc(100% - 20px);
	padding:0 70px 40px 70px;
	overflow-x:auto;
}
.project-details-scroll::-webkit-scrollbar { display:none; }
.project-details-container {
	position:absolute;
	width:fit-content;
	border:solid 0px red;
	height:100px;

	overflow-x:auto;
}

.project-content {
	position:absolute;
	width:fit-content;
	height:calc(100% - 24px);
	/* padding:15px 0px 0 15px; */
	top:16px;left:0;
	display:flex;
	flex-direction: row;
	flex-wrap:nowrap;
	justify-content: flex-start;
	align-items:flex-end;
	padding-left:230px;

}
.project-item {
	position:relative;
	
	margin-right:30px;
	border:solid 0px yellow;
	height:100%;width:fit-content;
	cursor:pointer;
}
.project-item img { height:100%;width:auto; }



#project-sheet {
	position:absolute;
	border:solid 0px blue;
	top:140px;left:0;width:100%;height:calc(100% - 140px);
	padding:0 70px 40px 70px;
	overflow-x:auto;
	
}
#project-sheet::-webkit-scrollbar { display:none; }
#project-sheet-scroll-container {
	position:relative;height:100%;
	width:fit-content;
	border:solid 0px green;
	
	padding:0 70px 40px 70px;
}
#project-sheet-scroll {
	position:relative;height:100%;
	width:fit-content;
	border:solid 0px red;
	display: flex;
	flex-wrap:nowrap;
	padding-left:330px;
	justify-content: flex-start;
	align-items:flex-end;
}
.project-sheet-text {
	position:relative;margin-right:100px;height:100%;min-width:230px;
}
.project-sheet-text-fixed {
	z-index:100;
	position:fixed;top:140px;left:10px;
	margin-right:100px;height:calc(100% - 180px);width:300px;
	padding:0 30px;
	background-color:#fff;
	overflow-x:auto;
	display:block;
}

.project-sheet-text-resp {
	z-index:100;
	position:relative;float:left;
	height:auto;width:300px;
	padding:0 30px;
	background-color:#fff;
	overflow-x:auto;
	border:solid 0px blue;
	display:none;
}

.project-sheet-text-fixed::-webkit-scrollbar { display:none; }

.project-sheet-title {
	/*font-family: "parisplus-std", sans-serif;
	font-size:14px;
	font-weight: 600;
	font-style: normal;*/
	font-family: 'Usherwood-Black';
	font-size:16px;
	color:#444;
}
.project-sheet-infos {
	/*
	font-family: "parisplus-std", sans-serif;
	
	font-weight: 400;
	font-style: italic;
	*/
	font-size:14px;
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: italic;
	padding-top:10px;
}

.project-sheet-description {
	/*
	font-family: "parisplus-clair",sans-serif;
	font-size:14px;
	font-weight: 700;
	*/
	font-size:14px;
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height:1.1em;
	font-style: normal;
}
.project-sheet-infos p:first-child, .project-sheet-description p:first-child {
	margin-top:0;
}

.project-description { margin-top:40px; }



/* INDEX */

#index-filters {
	position:relative;
	margin:90px auto 0 auto;
	width:calc(60% - 80px);

	
	/*
	font-family: 'lisbeth-display', sans-serif;
	font-weight:400;
	*/

	font-family: "roc-grotesk-wide", sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height:1.4em;
	
	font-size:14.5px;
}
.index-filters-group {
	position:relative;display:flex;flex-flow:row wrap;
	justify-content: center;
}
.index-filter:hover { cursor: pointer; }
.index-filter-head { padding-left:60px; }
.index-filter { padding-right:4px; }
.index-current-filter { 
	color:black;
	background:white;
	/*
	text-decoration:underline; 
	text-decoration-thickness: 5px;
	*/
}
#index-content {
	position:relative;
	width: calc(100% - 80px);
	margin:40px auto 0 auto;
	padding-bottom:50px;
	-webkit-columns: 6 200px;
     -moz-columns: 6 200px;
          columns: 6 200px;
	font-size:14px;
	/*font-family: "parisplus-std",sans-serif;
	
	font-weight: 400;
	font-style: normal;*/
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height:1.4em;
}
#index-content div { cursor: pointer; }
.index-close {
	position:relative;float:left;
	width:18px;height:18px;
	background-image:url(imgs/boutons/close1.svg);
	background-position:center center;
	background-repeat: no-repeat;
	background-size:contain;
	cursor: pointer;
	z-index:21000;
	display:none;
	margin-left:-30px;
	margin-top:-17px;
}



#page {
	position:relative;
	width:100%;
	max-width:700px;
	padding:100px 30px 100px 30px;
	border:solid 0px red;
	/*
	font-family: "parisplus-std",sans-serif;
	font-weight: 300;
	font-style: normal;
	*/
	font-family: "degular", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size:15px;
	
	color:#444;

}


/* INDEX 3D */

#msg {
	position:absolute;
	top: 1.5rem;right: 1.5rem;width: 400px;height: 100px;
	border: solid 0px lightBlue;
	font-size: 3vw;
	text-align: right;
	color:lightBlue;
	display:none;
}

#index-label {
	position:fixed;
	width:150px;height:40px;
	top:50%;left:50%;
	margin-left:-75px;margin-top:-20px;
	z-index:100000;
	cursor: pointer;
	display:none;
}