/* -- Styles BEIJI -- */

/* Couleurs
	Texte - vert foncé    : #193219
	Highlight - turquoise : #008080
 */

body {margin:0; padding:0; background-color:#f0f5f4; font-family:"Roboto", sans-serif; color:#193219;}
a {color:#008080;}
h1 {margin-top:0; padding-top:1em; font-size:3em; text-transform: uppercase;}
img {max-width:100%;}

@media screen and (max-width:800px) {
	h1 {font-size:2em;}
}

/* Header */
header {position:sticky; top:0;}
.header {background-color:#193219; color:#fff;}
	.header-wrapper {display:flex; justify-content:space-between; max-width:1200px; margin:auto; padding:1em 2em; }
	.header-main {display:flex; justify-content:space-between; width:100%; margin:auto;}
	.header a {color:#fff;}
	.header-logo {height:64px;}
		.header-logo img {height:100%;}
		
	.nav-menu .nav1 ul {display:flex; margin:0; padding:0;}
	.nav-menu .nav1 li {list-style-type:none; text-transform:uppercase; margin:1em; white-space:nowrap}
	.burger {display:none;}
	
@media screen and (max-width:800px) {
	/* Menu mobile*/
	.header-wrapper {flex-direction:column;}
	.burger {cursor:pointer; display:flex; justify-content:center; align-content:center; align-self:flex-end; margin-top:-2rem; background:0 0; border:0;}
		.burger-icon {display:flex; flex-shrink:0; width:2rem; height:2rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 18h18v-2H3v2zM3 8h18V6H3v2zm0 5h18v-2H3v2z' fill='white' fill-rule='evenodd'/%3E%3C/svg%3E"); background-position:center; background-size:contain; background-repeat:no-repeat;}
	.burger.active .burger-icon {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.657 12.071L5 6.414 6.414 5l5.657 5.657L17.728 5l1.414 1.414-5.657 5.657 5.657 5.657-1.414 1.414-5.657-5.657-5.657 5.657L5 17.728l5.657-5.657z' fill='white' fill-rule='evenodd'/%3E%3C/svg%3E");}
	nav {z-index:100; position:relative;}
	.menu-container {transition:left .2s cubic-bezier(.215,.61,.355,1); position:fixed; width:100vw; height:calc(100vh - 120px); overflow-y:scroll; left:-100vw; background-color:#f9f8f4;}
	.menu-container.active {display:flex; flex-direction:column; position:fixed; left:0; box-shadow:0 1em 1em -.5em #353430;}
		.menu-root {flex-direction:column; width:100%;}  
			.menu-root-item {border-bottom:1px solid #e5e4e0; padding:0;}
				.menu-root-item-label {position:relative; display:flex; justify-content:space-between; font-weight:bold; text-align:left;}
				.menu-root-item-link {display:block; padding:.5em;}
				.submenu-toggle {display:inline-block; width:3rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg' fill='%23656460'%3E%3Cpath d='M4 4V0h2v4h4v2H6v4H4V6H0V4h4z' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center;}
				.menu-root-item.active .menu-root-item-label .submenu-toggle, .menu-sub-item.active .submenu-toggle {background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='10' height='2' xmlns='http://www.w3.org/2000/svg' fill='%23656460'%3E%3Cpath d='M0 0h10v2H0z' fill-rule='evenodd'/%3E%3C/svg%3E");}
				.dropdown-container {display:none; padding-top:0;}
				.menu-root-item.active .dropdown-container {display:block; position:relative; pointer-events:initial; transform:scaleY(1); visibility:visible; opacity:1; transform-origin:50% 0; transition:height .4s ease-in-out,transform .1s ease,opacity .2s ease-in-out; z-index:100; margin-top:0; box-shadow:none!important;}
					.dropdown-container .menu-sub {height:auto; margin:0; padding:0; transition:250ms;}
				.menu-sub-item {border-top:1px solid #bdb49f; border-bottom:0;}
					.menu-sub-item-label {display:flex; justify-content:space-between;}
					.menu-sub-item-link {width:100%;}
					.menu-sub-item-link::after {content:none;}

					.menu-sub-item:hover {background-color:#bdb49f; color:#fff;}
					.menu-sub-item:hover .menu-sub-item-link, .menu-sub-item-link:hover {color:#fff;}
					.menu-sub-item-content {display:none!important;}
					.menu-sub-item.active .menu-sub-item-content {display:flex!important; position:relative; top:auto; left:auto; width:100%; height:auto; padding:.5em!important;}
						.menu-sub-item-overview {display:none;}
						.menu-sub-item-nav {margin-left:0; padding-left:0; border-left:0;}
						.menu-sub-item-nav li {margin:0;}
						.menu-sub-item-nav h3 {display:none;}
					.menu-sub-item.active .nav3 {display:block; padding-bottom:.6em;}
						.nav3-name {margin:0;}
						.nav3 a {color:#fff;}
						.nav3-name a {color:#656460;}
						.nav4 {padding-top:.4em; padding-bottom:.4em; border-bottom: 1px solid #fff;}
							.nav4 a {color:#656460;}
							.nav4 a:active {background-color:#06b; color:#fff;}

	.menu-container a  {color:#193219;}
	.menu-container ul {display:flex; flex-direction:column;}

}

/* Footer */
footer {border-top:3px solid #193219;}
.footer {max-width:1200px; margin:0 auto; padding:2em 1em;}
	.footer-sitemap {display:flex; justify-content:space-between; }
	.footer-sitemap ul {}
	.footer-sitemap li {}



/* Main - styles génériques */
.wrapper-main {background-color:#fff;}
.main {max-width:1200px; margin:auto; padding:0 2em;}
.flex {display:flex;}
.row {}
	.column {margin:1em;}
	.column:first-child {margin-left:0;}
	.column:last-child {margin-right:0;}
		.column img {max-width:400px;}
.radius {border-radius:3em;}


@media screen and (max-width:800px) {
	.main {padding:.5em;}
	.flex {flex-direction:column;}
	.column {margin:1em 0;}
		.column img {max-width:100%;}
}

/* Home */
.home-row .column:first-child {width:35%;}
.home-row .column:last-child {width:65%;}

.home-logo {display:flex; justify-content:center; align-items:center; margin:4em 0;}
.home-logo img {width:100%; max-width:320px;}
.home-content {display:flex; justify-content:center; align-items:center; margin-bottom:4em;}

        /* Conteneur principal de l'image */
        .screen-effect {width:95%; height:600px; max-width:800px; display:flex; justify-content:center; align-items:center; perspective:1000px; /* effet 3D */}

        /* Effet "photo d'écran" */
        .image {
            background-image: url('https://www.beiji.eu/images/beiji/CRT2-612x448.jpg'); background-size:contain; background-repeat:no-repeat;
            width:90%; height:90%;
            display:flex; justify-content:center;
            color: white;
            font-size: 20px;
            font-family: Arial, sans-serif;
            text-shadow: 0px 0px 2px black;

            /* Effets de déformation et pixels */
            filter: blur(1px) contrast(1.2) brightness(1.1);
            transform: rotateX(10deg) rotateY(-10deg) scale(1.05);
            position: relative;
            overflow: hidden;
        }

        /* Simulation de la matrice de pixels */
        .image::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 2%, transparent 2%);
            background-size: 4px 4px; /* taille de la grille */
            mix-blend-mode: overlay; /* pour superposer la grille sur l'image */
            opacity: 0.3; /* ajustez pour l'intensité */
        }
		
#text {margin:2em;}
		
@media screen and (max-width:1150px) {
	.home-row.flex {flex-direction:column;}
	.home-row .column {margin:1em 0;}
	.home-row .column:first-child, .home-row .column:last-child {width:100%;}

}