@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-RegularItalic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-BoldItalic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-BlackItalic.woff') format('woff');
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-Book.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-BookItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "Messina Sans";
	src: url('fonts/MessinaSans-SemiBoldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
}



body{
	cursor: crosshair;
	opacity: 0;
		transition: all 1s ease;
/*	animation: fadeInAnimation ease 1s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;*/
}

/*@keyframes fadeInAnimation {
            0% {
                opacity: 0;

            }

            100% {
                opacity: 1;

            }
        }*/

*{
	transition: all 0.2s ease-out allow-discrete;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
	text-decoration: none;
	color: inherit;
	background: transparent;
}

.wrapper{
	margin: 13vh 1vw 13vh 15vw;
	max-width: 604px;
	min-width: 300px;
}


/*.grid{
	display: block;
	position: fixed;
	margin-left: -28px;
	margin-top: -28px;
	width: calc(56vw + 2px);
	height: calc(56vw + 2px);
	z-index: -9;
	background-size: 4vw 4vw;
	opacity: 0;
background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
linear-gradient(to bottom, lightgrey 1px, transparent 1px);

}

.grid:has(~ .project-card:hover) {
    opacity: 0.5;
}*/

.main{
	display: block;
	z-index: 1;
/*padding: 0 25vw 0 5vw;*/
/*margin: 14vh auto 32vh auto;*/
/*background-color: lightgray;*/
}

.intro{

}

h1{
	align-self: stretch;
	color: var(--700, #44403C);
	font-family: "Messina Sans";
	font-size: 52px;
	font-style: normal;
	font-weight: 900;
	line-height: 100%; /* 52px */
	letter-spacing: -1.04px;
}

h2{
	align-self: stretch;
	color: var(--700, #44403C);
	font-family: "Messina Sans";
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 28px */
	letter-spacing: -0.84px;
	margin-bottom: 32px;

}



.main .intro p:nth-of-type(1) {

	align-self: stretch;
	color: var(--700, #44403C);
	font-family: "Messina Sans";
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.84px;
	margin-bottom: 32px;
	    text-wrap: pretty;
}

.main .intro p:nth-of-type(2), .main .intro p:nth-of-type(3) {
	color: var(--500, #78716C);
	font-family: "Messina Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 137%;
	margin-bottom: 32px;
	    text-wrap: pretty;
}

.intro p a.gleamer{
color: #57534E;
    font-weight: 600;
    padding: 1px 8px 1px 6px;
    border-radius: 88px;
    background: #eceae9;
    font-size: 14px;
    /* line-height: normal; */
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
    box-shadow: 0px 0px 0px 0px #eceae9;
    transition: 0.08s ease;
} 

.intro p a.gleamer:hover{
/*		background: var(--200, #E7E5E4);*/
/*	background: #dee0ff;*/
	color: #001d99;
	  transform-origin: center; /* L'origine de l'animation vient du centre */
		transform: translate(0px, 0) scale(0.88);
		box-shadow: 0px 0px 0px 2px #c8cbff;
		  animation: animateBg 1.85s linear infinite;
  background-image: linear-gradient(90deg, #E9EEFD, #FCFDFF, #EDEAFF, #E9EEFD, #FCFDFF, #EDEAFF,#E9EEFD, #FCFDFF);
  background-size: 900% 100%;
	transition: 0.135s ease;
}

.intro p a.gleamer span{
    overflow: hidden;
    letter-spacing: -0.3px;
    line-height: 24px;
}

@keyframes infiniteRotate {
    0% {
        transform: scale(0.85) rotate(180deg);
    }
    100% {
        transform: scale(0.85) rotate(540deg); /* 360deg ajouté aux 180deg initiaux */
    }
}

.intro p a.gleamer:hover img {
    transform: scale(0.85) rotate(180deg);
    transition: opacity 0.5s ease, transform 0.5s ease;
        animation: infiniteRotate 1.8s linear infinite;
    animation-delay: 0.135s; /* Ajout du délai pour l'animation */
}

.intro p a.gleamer img{
	align-self: center;
	transition: 0.3s ease;
}

.stage:hover {


}
@keyframes animateBg {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}




.main ul{
	margin-top: 32px;
	display: flex;
	padding: 16px 0px;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
	flex-direction: column;
}

.main ul li{
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	background: var(--s50, #FAFAF9);
	cursor: pointer;
}


.main ul li a{
	color: var(--500, #78716C);
	font-family: "Messina Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 100%; /* 20px */
	letter-spacing: -0.8px;
	min-width: 16px;

		padding: 5px;
}

.copy::after {
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 8C5 6.34315 6.34315 5 8 5H12.6667C14.3235 5 15.6667 6.34315 15.6667 8V12.6667C15.6667 14.3235 14.3235 15.6667 12.6667 15.6667H8C6.34315 15.6667 5 14.3235 5 12.6667V8ZM8 7C7.44772 7 7 7.44772 7 8V12.6667C7 13.219 7.44772 13.6667 8 13.6667H12.6667C13.219 13.6667 13.6667 13.219 13.6667 12.6667V8C13.6667 7.44772 13.219 7 12.6667 7H8Z' fill='%2378716C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.66732 2.33398C2.48322 2.33398 2.33398 2.48322 2.33398 2.66732V8.66732C2.33398 8.85141 2.48322 9.00065 2.66732 9.00065H3.33398C3.88627 9.00065 4.33398 9.44837 4.33398 10.0007C4.33398 10.5529 3.88627 11.0007 3.33398 11.0007H2.66732C1.37865 11.0007 0.333984 9.95598 0.333984 8.66732V2.66732C0.333984 1.37865 1.37865 0.333984 2.66732 0.333984H8.66732C9.95598 0.333984 11.0007 1.37865 11.0007 2.66732V3.33398C11.0007 3.88627 10.5529 4.33398 10.0007 4.33398C9.44837 4.33398 9.00065 3.88627 9.00065 3.33398V2.66732C9.00065 2.48322 8.85141 2.33398 8.66732 2.33398H2.66732Z' fill='%2378716C'/%3E%3C/svg%3E%0A");
  width: 16px;
  height: 16px;
    /* margin-left: 8px; */
    background: var(--s50, #FAFAF9);
    border-radius: 4px;
    margin-right: 5px;
}

.copy:hover::after {
/*	background: #57534E;*/
background: none;
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 8C5 6.34315 6.34315 5 8 5H12.6667C14.3235 5 15.6667 6.34315 15.6667 8V12.6667C15.6667 14.3235 14.3235 15.6667 12.6667 15.6667H8C6.34315 15.6667 5 14.3235 5 12.6667V8ZM8 7C7.44772 7 7 7.44772 7 8V12.6667C7 13.219 7.44772 13.6667 8 13.6667H12.6667C13.219 13.6667 13.6667 13.219 13.6667 12.6667V8C13.6667 7.44772 13.219 7 12.6667 7H8Z' fill='%231C1917'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.66732 2.33398C2.48322 2.33398 2.33398 2.48322 2.33398 2.66732V8.66732C2.33398 8.85141 2.48322 9.00065 2.66732 9.00065H3.33398C3.88627 9.00065 4.33398 9.44837 4.33398 10.0007C4.33398 10.5529 3.88627 11.0007 3.33398 11.0007H2.66732C1.37865 11.0007 0.333984 9.95598 0.333984 8.66732V2.66732C0.333984 1.37865 1.37865 0.333984 2.66732 0.333984H8.66732C9.95598 0.333984 11.0007 1.37865 11.0007 2.66732V3.33398C11.0007 3.88627 10.5529 4.33398 10.0007 4.33398C9.44837 4.33398 9.00065 3.88627 9.00065 3.33398V2.66732C9.00065 2.48322 8.85141 2.33398 8.66732 2.33398H2.66732Z' fill='%231C1917'/%3E%3C/svg%3E%0A");

}

.copied::after{

}

.copy.copied::after {
	  content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.13046 12.9994C5.88896 12.9994 5.65796 12.9044 5.49258 12.7369L1.23746 8.421C0.905834 8.08599 0.924209 7.55849 1.27596 7.24348C1.62858 6.92848 2.18246 6.94515 2.51233 7.28015L6.12171 10.9394L12.5481 4.21492C12.8754 3.87408 13.4284 3.85158 13.7854 4.16159C14.1415 4.47159 14.166 4.99909 13.8405 5.33827L6.77621 12.7277C6.61258 12.8994 6.37983 12.9977 6.13658 12.9994H6.13046Z' fill='%231C1917' stroke='%231C1917' stroke-width='0.5'/%3E%3C/svg%3E%0A");
	  opacity: 0;
	  transition: 1200ms linear;
}

.main ul li:hover{
	background: var(--200, #E7E5E4);
	transition: 30ms linear;
}
.status{
	padding: 3px 7px;
	border-radius: 4px;
	font-family: "Messina Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 137%;
letter-spacing: -0.3px;
	background-image: linear-gradient(45deg, #AFF8AF, transparent);
    color: #01561D;
}

.cta{
	cursor: cell;
	font-weight: 600;
	color: #44403C;
}

.cta:hover{
	color: #000;
}

.card-list{
	display: flex;
	flex-direction: column;
	gap: 28px;
		margin-top: 72px;
	margin-bottom: 104px;
}

.project-card{
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;

	border-radius: 10px;
	border: 1px solid var(--200, #E7E5E4);
	background: var(--s0, #FFF);
	cursor: pointer;
}


.project-card, .details, .facts, .intro a{
	 -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


.details{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: 1 0 0;
	color: var(--700, #44403C);
	font-family: "Messina Sans";
	font-size: 16px;
	letter-spacing: -0.015em;
	line-height: normal;
	text-transform: uppercase;
}


.title{
	color: var(--700, #44403C);

font-family: "Messina Sans";
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: 100%;
}

.role{
margin-top: 4px;
}

.role, .timeline{
color: var(--500, #78716C);

font-family: "Messina Sans";
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 100%;
letter-spacing: 0.05px;
font-variant-numeric: lining-nums tabular-nums;


}

/*.title span::before{
	content: " • ";
}*/

.card-header{
	display: flex;
	padding: 32px 44px 16px 44px;
	align-items: center;
	gap: 32px;
	align-self: stretch;
}

.card-header *{

}

.timeline{

}


.apple-label{

	height: 44px;
	display: block;
}


.project-card .apple-label svg{
	overflow: visible;
}

.project-card .apple-label svg g, .project-card:hover .apple-label svg g {
	transform-origin: center;

    transition-delay: 0.05s;
}

.project-card .apple-label svg g{
	    transition: 0.4s ease;
}

.project-card:hover .apple-label svg g{
transition: 0.8s ease;
}



.project-card:hover .apple-label svg g:nth-child(1) {
    transform: translate(-3px , -6px) rotate(-6deg); /* Example translation */
    

}

.project-card:hover .apple-label svg g:nth-child(2) {
    transform: translate(3px , -6px) rotate(6deg); /* Example translation */
}

.article {
    display: flex;
    margin: 8px 16px 16px 16px;
    flex-direction: row;
    align-items: stretch;
    gap: 38px;
    align-self: stretch;
    padding: 24px 28px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    background: rgba(250, 250, 249, 0.90);
    overflow: hidden;
    position: relative;
}

.circle {
    width: 320px; /* Ajustez selon vos besoins */
    height: 140px; /* Ajustez selon vos besoins */
    background-color: rgba(255, 255, 255, 1); /* Ajustez la couleur */
    border-radius: 50%;
    position: absolute; /* Pour pouvoir le déplacer */
    pointer-events: none; /* Pour que le cercle n'interfère pas avec les événements de souris */
    transition: opacity 0.5s ease; /* Pour une transition douce */
    filter: blur(55px);
    margin-top: 25px;
    opacity: 0;
}

.circle.active {
    opacity: 1;
    transition: opacity 0.5s ease; /* Pour une transition douce */
}

.project-card:hover .article{
	background: #EBEAEA;
	transition: 30ms linear;
}

.project-card:hover .article *{
	color: var(--800, #292524);
}

.project-card:hover{
	transform: translate(0px, -8px);
	box-shadow: 0px 12px 44px 0px rgba(0, 0, 0, 0.08);
}

.project-card:hover .card-header svg{
	transform: translate(0px, -6px);
}

.project-card .source svg{
	transition: 100ms ease-in;
}

.project-card:hover .source svg{
/*transform: translate(2px, 0px);*/
transition: 100ms ease-in;
}

.article p{
	color: var(--600, #57534E);
	font-feature-settings: 'salt' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss04' on, 'ss05' on, 'ss06' on, 'ss07' on, 'ss08' on, 'ss09' on, 'ss10' on, 'ss11' on, 'ss12' on, 'ss13' on, 'ss14' on, 'ss15' on;
	font-family: "Messina Sans";
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	z-index: 5;


}

.source{
	display: flex;
	padding: 6px 4px 6px 8px;
	justify-content: flex-end;
	align-items: center;
	gap: 2px;
	border-radius: 6px;


	color: var(--500, #78716C);
	font-feature-settings: 'salt' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss04' on, 'ss05' on, 'ss06' on, 'ss07' on, 'ss08' on, 'ss09' on, 'ss10' on, 'ss11' on, 'ss12' on, 'ss13' on, 'ss14' on, 'ss15' on;
	font-family: "Messina Sans";
	font-size: 10px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	z-index: 5;
}


/*generator*/


#about-title {
    opacity: 1; /* Initialement visible */
    transition: opacity 0.180s ease, transform 0.180s ease !important;
    transform: translateX(0) rotate(0); /* Position de base */
}

#about-title.hidden {
    opacity: 0; /* Rendre invisible */
    transform: translateX(20px) rotate(0deg); /* Faire bouger le titre avec une légère rotation */
    transition: opacity 0.15s ease, transform 0.180s ease !important;
}

.portrait {
  position: absolute;
  left: 16px;
  top: -35px;
  border-radius: 37px;
  background: url('img/portrait.png') no-repeat center center;
  background-size: cover;
  box-shadow: 2px 4px 20px 0px rgba(68, 64, 60, 0.30);
  width: 103px;
  height: 103px;
  transform: translateX(-27px) translateY(5px) rotate(-10deg);
  background-color: white;
  opacity: 0;
}

#change-fact {
    transition: transform 0.08s; /* Transition pour un effet de mise à l'échelle fluide */
}

.snap {
position: absolute;
    top: -20px;
    left: 130px;
    width: 80px;
    height: 80px;
    background: url(img/snap.png) no-repeat center center;
    background-size: cover;
    opacity: 0;
    transform: scale(0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform-origin: center;
/*    will-change: transform, opacity;*/
}

/* Classe pour déclencher le bounce et l'apparition */
.snap.visible {
  opacity: 1;
  animation: bounceIn 0.3s ease forwards, fadeOutAndScale 0.150s 1.5s ease forwards; /* Fade out après 2s */
will-change: transform, opacity;
}

.snap.hide {
    opacity: 0;
    transform: scale(0.2); /* Retour à une petite taille en disparaissant */
will-change: transform, opacity;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-35deg);
    
  }
  50% {
    transform: scale(1.4) rotate(0deg);

  }
  80% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);

  }
}

@keyframes fadeOutAndScale {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

.portrait.visible {
    opacity: 1; /* S'assurer qu'elle est visible */
    z-index: 1; /* Au-dessus du contenu lorsqu'elle est visible */
    transform: translateX(0) translateY(-5px) rotate(8deg); /* L'effet d'animation */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Ajout d'une transition */
}


.container {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 80%;
	gap: 0px;
		position: relative;
}

.facts, .links {
	padding: 20px;
}

.facts {
	display: flex;          
	flex-direction: column; 
	justify-content: flex-start;         
}

button {
width: fit-content;
    cursor: pointer;
    display: flex;
    padding: 10px 16px;
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--200, #E7E5E4);
    background: var(--s50, #FAFAF9);
    color: var(--700, #44403C);
    font-family: "Messina Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.4px;
    transition: background-color 0.3s ease;
}

button:hover {
	background-color: #ddd;
}

#fact-text {
	height: 112px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color: var(--600, #57534E);
	font-family: "Messina Sans";
	font-size: 19px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	letter-spacing: -0.6px;
	transform-origin: left center; /* L'origine de la rotation est fixée au centre gauche */

	transition: transform 0.2s ease, opacity 0.2s ease;

}


.hidden {
	transform: translateY(-10%) translateX(-1%) rotate(-5deg); /* Fait tourner de 15° en sortant */
	opacity: 0;
}

.visible {
	transform: translateY(0) translateX(0) rotate(0deg); /* Réinitialise la rotation */
	opacity: 1;
}



@media only screen and (max-width: 768px) {


	.wrapper{
		margin: 12vh 8vw;
	}

	.main{

	}


/*.main ul{
	margin-top: 32px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
padding: 16px 0px;
align-items: flex-start;
gap: 12px;
align-self: stretch;
}

.main ul li{
display: flex;
padding: 8px;
justify-content: center;
align-items: center;

}


.main ul li a{
font-size: 16px;
}*/

.project-card{
	width: 100%;
}



.project-card:hover .card-header svg{
	transform: translate(0px, 0px);
}

.card-header{
	text-align: center;
	gap: 16px;
	flex-direction: column;
}


.details{
	align-items: center;
}

.article{
	gap: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.source{
	padding: 6px 4px 0px 8px;
}

.main .intro p:nth-of-type(1) {

	font-size: 28px;
	font-style: normal;
	margin-bottom: 40px;
}

.container{
	flex-direction: column;
	gap: 96px;
	width: 100%;

}
.facts{
	flex-direction: column;
}

button{

flex-direction: row;
    width: 100%;
    justify-content: center;
    padding: 16px;
}

.facts , .links{
	padding: 0;
	width: 100%;
}

#fact-text{
	width: 100%;
	font-size: 26px;
	height: 132px;
}

.portrait {
    position: absolute;
    left: 0px;
    top: -64px;
    }

    .snap{
    	top: -48px;
    }

/*	.title{

    flex-direction: column;
	}

    .title span::before{
	content: "";}

*/


}

h2{

	margin-bottom: 48px;
}

.main .intro p:nth-of-type(2), .main .intro p:nth-of-type(3) {
    font-size: 22px;
    font-style: normal;
    letter-spacing: -0.3px;
}

} /*fin breakpoint*/