@charset "utf-8";
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;}
        body { font-family: 'Inter', system-ui, sans-serif; line-height: 1.6; color: #392258; background-color: #fff;}
        .header { position: sticky; top: 0; padding: 1rem 2rem; background-color: #fff; z-index: 1000; box-shadow: 0 5px 20px #f4ecf5;}
.cv_photo {display: block; width: 200px; opacity: 1; text-align: left; margin: 20px 20% -40px 20%;}
.contact_photo {display: block; width: 450px; text-align: center; margin: 80px auto 100px auto;}

.menu__mobile {background-color: #392258; width: 100%; height: 190px; display: none; padding: 5px 0;}
.mobile__list li { text-align: center; height: 50px;}
.mobile__link { width: 80%; text-decoration: none; color: #392258; background-color: #fff; padding: 10px; border: 2px solid #392258; border-radius: 25px; margin: 5px auto 10px auto; text-align: center; display: block; }
.mobile__link:hover {background-color: #d9bfdc; color: #392258;}

        
.center {display: block; width: 300px; margin: 50px auto 10px auto; text-align: center;}
		.nav { display: flex; justify-content: space-between; align-items: center; max-width: 1300px; margin: 0 auto; }
        .nav__logo-container { display: flex; align-items: center; gap: 1rem; text-decoration: none;}
        .nav__logo-image { width: 60px; height: 60px;}
        .nav__text-container { display: flex; flex-direction: column;}
        .nav__logo-text { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #392258;}
        .nav__subtitle { font-size: 1.15rem; color: #392258; opacity: 0.8; }
        .nav__menu {display: flex; gap: 2rem; list-style: none; }

        .nav__link { text-decoration: none; color: #392258; transition: color 0.3s; background-color: #fff; padding: 0.5rem 1.5rem;  				border: 2px solid #392258; border-radius: 25px; margin: 0 5px;}
        .nav__link_active { text-decoration: none; color: #fff; background-color: #392258; padding: 0.5rem 1.5rem; border: 2px solid #392258;  						border-radius: 25px; margin: 0 5px;}
        .nav__link:hover { background-color: #d9bfdc; color: #392258;}

        .accueil {width: 90%; max-width: 1000px; margin: 0 auto; padding: 100px 0;}

		.portfolio {max-width: 1400px; margin: 2rem auto; padding: 0 2rem; min-height: 600px;}
		.portfolio p { display: block; padding: 0 auto; text-align: left; margin: 45px 0;}
		.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 2rem; padding: 20px 0 0 0;}

		.contact {max-width: 1200px; height: auto; margin: 2rem auto; padding: 30px 2rem 60px 2rem;}
		.contact h2{ text-align: center; margin: 40px auto 40px auto;}

		.description {max-width: 1200px; height: auto; margin: 2rem auto; padding: 0 2rem;}
		.description h3{ text-align: center; margin: 60px auto 20px auto; color: #392258; font-size: 1.5em;}
		.description h2{ text-align: center; margin: 50px auto 2px auto; font-size: 1.3em;}
		.description p{ text-align: left; margin: 60px auto 20px auto; color: #392258;}
		.description img{ display: block; text-align: center; width: 80%; max-width: 1200px; margin: 0 auto;}

		.cv-grid p { text-align: left; margin: 20px 0 50px 0; padding: 0 20%; }
.cv-grid h2 { text-align: left; margin: 50px 0 20px 0; padding: 0 20%; }

		h3 { line-height: 140%; color: #fff;}

        .project-card { position: relative; border-radius: 25px 25px 0 0; overflow: hidden; transition: transform 0.1s; box-shadow: 0 -8px 8px 0 #f4ecf5;}
        .project-card:hover { transform: translateY(-15px); box-shadow: 0 0 0 4px #392258;}

        .project-card__image {width: 100%; height: 100%;}
		.project-card__overlay {position: absolute; bottom: 0; left: 0; right: 0; padding: 100px 1rem 1rem 1rem; background: linear-gradient(transparent, rgba(74, 43, 92, 1));  						color: #fff; opacity: 0; }
        .project-card:hover .project-card__overlay { opacity: 1;}
        .project-card__tag { position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.75rem; background-color: #fff; color: #392258; border-radius: 15px; font-size: 1rem; box-shadow: 0 0 0 2px #392258;}

        .footer { background-color: #392258; color: #fff; padding: 20px 0 20px 0;}
        .footer__content { text-align: center; padding: 0 auto;}
        .footer__section {text-align: center; width: auto; display: inline-block;}
		.footer__list {text-align: center; width: auto; list-style: none;}
        .footer__list li { text-align: center; padding: 0 auto; margin: 0 20px; height: 40px;}
        .footer__link {text-decoration: none; color: #392258; transition: color 0.3s; background-color: #d9bfdc; margin: 0 5px; padding: 0.5rem 1.5rem; border-radius: 25px; box-shadow: 0 5px 10px 5px #321e4d; }
        .footer__link:hover {background-color: #fff; box-shadow: 0px 2px 5px 5px #9666;}
        .footer__social {display: flex; gap: 1rem;}
        .footer__bottom {margin-top: 10px; padding-top: 20px; border-top: 1px solid #d9bfdc; text-align: center; font-size: 0.9rem; opacity: 0.8;}

		.myIframe {position: relative; width: 70%; margin-left:15%; padding-bottom: 38%; padding-top: 25px; height: 0; border: solid black 1px; box-shadow: 0 5px 10px #aaa;}
		.myIframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.myIframe_s {position: relative; width: 50%; margin-left:25%; padding-bottom: 28%; padding-top: 25px; height: 0; border: solid black 1px; box-shadow: 0 5px 10px #aaa;}
.myIframe_s iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

		.myIframe_vimeo {position: relative; width: 70%; margin-left:15%; padding-bottom: 54%; padding-top: 25px; height: 0; border: solid black 1px; box-shadow: 0 5px 10px #aaa;}
		.myIframe_vimeo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

        .filters { max-width: 1400px; margin: 5px auto 25px auto; padding: 0 5px; display: flex; gap: 50px; justify-content: center;}
        .filter-btn { padding: 15px 25px; border: 2px solid #392258; border-radius: 25px; background: #FFF; color: #392258; font-size: .9rem;}	
		.filter-btn:hover {background: #d9bfdc; border-color: #392258; color: #392258;}
        .filter-btn.active { background: #392258; color: #FFF;}
		.filter-btn.active:hover { background: #392258; color: #FFF;}

        @media (max-width: 768px) {
			.contact_photo {display: block; width: 100%; text-align: center; margin: 10px auto 30px auto;}
			.filters { max-width: 1400px; margin: 5px auto 25px auto; padding: 0 5%; display: flex; gap: 2%; justify-content: center;}
        .filter-btn { padding: 15px 20px; border: 2px solid #392258; border-radius: 25px; background: #FFF; color: #392258; font-size: .9rem;}
			
			.cv-grid p { text-align: left; margin: 30px 0; padding: 0 10%; }
			.header { padding: 20px auto; box-shadow: 0 0 25px #f4ecf5;}
			.myIframe {position: relative; width: 110%; margin-left:-5%; padding-bottom: 50%; }
			
			.myIframe_vimeo {position: relative; width: 110%; margin-left:-5%; padding-bottom: 74%; padding-top: 25px; height: 0; border: solid black 1px; box-shadow: 0 5px 10px #aaa;}
		.myIframe_vimeo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
			
			.menu__mobile {display: block;}
			.myIframe_s {position: relative; width: 100%; margin-left:0; padding-bottom: 48%; padding-top: 25px; height: 0; border: solid black 1px; box-shadow: 0 5px 10px #aaa;}
			.nav__menu {display: none;}
            .nav__text-container {align-items: flex-start;}
			
			.contact {max-width: 1200px; height: auto; min-height: 0px; margin: 2rem auto; padding: 0 2rem;}
			.cv_photo {display: block; width: 200px; opacity: 1; text-align: center; margin: 10px auto -50px auto;}
			.cv-grid h2 { text-align: center; margin: 50px 0 20px 0; padding: 0 auto; }

			
			.description {max-width: 100%; padding: 0 auto ; margin: 0 0 50px 0}
			.description h3{ text-align: center; margin: 40px auto 0 auto; font-size: 1.2em;}
			.description h2{ text-align: center; margin: 50px auto 2px auto; font-size: 1.3em;}
			.description p{ text-align: left; margin: 10px auto 10px auto;}
			.description img{ width: 100%; max-width: 100%;}

			.projects-grid { display: grid  ; grid-template-columns: 100%; gap: 50px; padding: 0 2%;}
			
        .project-card:hover { transform: translateY(0px); box-shadow: 0 0 0 4px #392258;}

        project-card__image {width: 300px; height: 300px;}
		.project-card__overlay {opacity: 1; }
        .project-card:hover { opacity: 1;}
        .project-card__tag { position: absolute; top: 1rem; right: 1rem; padding: 0.25rem 0.75rem; background-color: #392258; color: #fff; border-radius: 15px; font-size: 0.875rem; box-shadow: 0 0 20px 0 #f4ecf5;}
			

		.footer__list {text-align: center; width: auto; list-style: none;}
        .footer__list li { text-align: center; padding: 0 auto; height: 45px;}
        .footer__link {text-decoration: none; color: #392258; transition: none; background-color: #d9bfdc; margin: 10px 5px; padding: 10px 20px; border-radius: 25px; box-shadow: 0 5px 10px 5px #321e4d; }
        .footer__social {display: inline-block; gap: 10; margin: 0;}
        .footer__bottom {margin-top: 5px; padding-top: 20px; border-top: 1px solid #d9bfdc; text-align: center; font-size: 0.9rem; opacity: 0.8;}
        }