#showcase {
  max-width: 640px;
  margin: 0 auto;
}


#page-header {
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding: 1em 0;
  border-top: 3px solid #E94C2C;
  border-bottom: 3px solid #E94C2C;
}

#page-header h1 {
  font-family: "Montserrat-Medium";
  font-size: 2.5em;
  color: #364575;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin: 0;
}

#page-header p {
  font-size: 1em;
  color: #5D5D5D;
  font-style: italic;
  margin-top: 0.5em;
  letter-spacing: 0.05em;
}

.header-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 0.9em;
  margin-bottom: 4em;
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
}
.header-cta:hover {
  opacity: 0.7;
}

.header-cta .icon-linkedin {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}


.titre-section {
  position: relative;
  text-align: center;
  margin: 3em auto 3em auto;
}

.titre-section:before {
  position: absolute;
  display: block;
  top: 50%;
  width: 100%;
  height: 3px;
  background-color: #E94C2C;
  content: " ";
}

#project-title {
  font-size: 2em;        /* plus grand que les h3 */
  text-transform: uppercase;
  text-align: center;
  font-family: "Montserrat-Medium";
}

#showcase h2,
#showcase h3 {
  position: relative;
  display: inline-block;
  font-family: "Montserrat-Medium";
  color: #5D5D5D;
  background-color: #fff;
  padding: 0 1em;
  margin: 0;
  z-index: 1;
}

#showcase h3 {
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: normal;
}


.thumb {
  width: 200px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
}

.thumb img {
  width: 100%;
  height: 125px;
  object-fit: cover;
  display: block;
}

.thumb span {
  display: block;
  font-size: 13px;
  text-align: center;
  padding: 3px 2px;
  color: white;
  background-color: #333; /* fond sombre pour voir les angles arrondis */
}

.thumb:hover,
.thumb.active {
  opacity: 1;
  border-color: #fff;
}

#project-thumbnails {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 2em;
}


#showcase h2#project-title {
  color: #E94C2C;
}


.titre-section:has(h2):before {
  background-color: #364575;
}
.titre-section:has(h2) {
  margin-bottom: 2.5em;
}




#player-container-main{
	margin-bottom: 1.5em;
}

 #player-container-secondary {
	margin-bottom: 0.65em;
}

#project-credits {
  display: flex;
  align-items: center;  /* aligne verticalement */
  gap: 8px;             /* espace entre le nom et l'icône */
  font-size: 0.9em; /* réduit le texte */
  margin-bottom: 1.4em;
}

.optional-link {
  display: flex;
  align-items: center;
}

#credits-name {
  cursor: pointer;
}


.instaportfolio,
.icon-artstation,
.icon-linkedin {
  width: 1.4em;
  height: 1.4em;
}


.instaportfolio {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 24 24' height='512' viewBox='0 0 24 24' width='512' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3ClinearGradient id='SVGID_1_' gradientTransform='matrix(0 -1.982 -1.844 0 -132.522 -51.077)' gradientUnits='userSpaceOnUse' x1='-37.106' x2='-26.555' y1='-72.705' y2='-84.047'%3E%3Cstop offset='0' stop-color='%23fd5'/%3E%3Cstop offset='.5' stop-color='%23ff543e'/%3E%3Cstop offset='1' stop-color='%23c837ab'/%3E%3C/linearGradient%3E%3Cpath d='m1.5 1.633c-1.886 1.959-1.5 4.04-1.5 10.362 0 5.25-.916 10.513 3.878 11.752 1.497.385 14.761.385 16.256-.002 1.996-.515 3.62-2.134 3.842-4.957.031-.394.031-13.185-.001-13.587-.236-3.007-2.087-4.74-4.526-5.091-.559-.081-.671-.105-3.539-.11-10.173.005-12.403-.448-14.41 1.633z' fill='url(%23SVGID_1_)'/%3E%3Cpath d='m11.998 3.139c-3.631 0-7.079-.323-8.396 3.057-.544 1.396-.465 3.209-.465 5.805 0 2.278-.073 4.419.465 5.804 1.314 3.382 4.79 3.058 8.394 3.058 3.477 0 7.062.362 8.395-3.058.545-1.41.465-3.196.465-5.804 0-3.462.191-5.697-1.488-7.375-1.7-1.7-3.999-1.487-7.374-1.487zm-.794 1.597c7.574-.012 8.538-.854 8.006 10.843-.189 4.137-3.339 3.683-7.211 3.683-7.06 0-7.263-.202-7.263-7.265 0-7.145.56-7.257 6.468-7.263zm5.524 1.471c-.587 0-1.063.476-1.063 1.063s.476 1.063 1.063 1.063 1.063-.476 1.063-1.063-.476-1.063-1.063-1.063zm-4.73 1.243c-2.513 0-4.55 2.038-4.55 4.551s2.037 4.55 4.55 4.55 4.549-2.037 4.549-4.55-2.036-4.551-4.549-4.551zm0 1.597c3.905 0 3.91 5.908 0 5.908-3.904 0-3.91-5.908 0-5.908z' fill='%23fff'/%3E%3C/svg%3E");
}

.icon-artstation {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("https://cdn.simpleicons.org/artstation")
}

.icon-linkedin {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg height='512' viewBox='0 0 176 176' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='linkedin'%3E%3Crect id='background' fill='%230077b5' height='176' rx='24' width='176'/%3E%3Cg id='icon' fill='%23fff'%3E%3Cpath d='m63.4 48a15 15 0 1 1 -15-15 15 15 0 0 1 15 15z'/%3E%3Cpath d='m60 73v66.27a3.71 3.71 0 0 1 -3.71 3.73h-15.81a3.71 3.71 0 0 1 -3.72-3.72v-66.28a3.72 3.72 0 0 1 3.72-3.72h15.81a3.72 3.72 0 0 1 3.71 3.72z'/%3E%3Cpath d='m142.64 107.5v32.08a3.41 3.41 0 0 1 -3.42 3.42h-17a3.41 3.41 0 0 1 -3.42-3.42v-31.09c0-4.64 1.36-20.32-12.13-20.32-10.45 0-12.58 10.73-13 15.55v35.86a3.42 3.42 0 0 1 -3.37 3.42h-16.42a3.41 3.41 0 0 1 -3.41-3.42v-66.87a3.41 3.41 0 0 1 3.41-3.42h16.42a3.42 3.42 0 0 1 3.42 3.42v5.78c3.88-5.82 9.63-10.31 21.9-10.31 27.18 0 27.02 25.38 27.02 39.32z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#player-guide {
	text-align: center;
}
.ptextdescription{
  margin-bottom: 0;
}
.textdescription{
  color: #5D5D5D;
  font-size: 14px;
  font-style: italic;
}
.guide-item {
  display: flex;
  flex-direction: row;    /* icône et texte côte à côte */
  align-items: center;
  gap: 10px;
  color: black;           /* page blanche donc texte noir */
  font-size: 14px;
}

#player-guide-icons {
  display: flex;
  flex-direction: row;
  gap: 40px;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 50px;
}

.icon-speed {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22playback%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eplayback%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M48%2C28V20l-4.7-1.18a20.16%2C20.16%2C0%2C0%2C0-2-4.81l2.49-4.15L38.14%2C4.2%2C34%2C6.69a20.16%2C20.16%2C0%2C0%2C0-4.81-2L28%2C0H20L18.82%2C4.7A20.16%2C20.16%2C0%2C0%2C0%2C14%2C6.7L9.86%2C4.2%2C4.2%2C9.86%2C6.69%2C14a20.16%2C20.16%2C0%2C0%2C0-2%2C4.81L0%2C20v8l4.7%2C1.18A20.16%2C20.16%2C0%2C0%2C0%2C6.7%2C34L4.2%2C38.14%2C9.86%2C43.8%2C14%2C41.31a20.16%2C20.16%2C0%2C0%2C0%2C4.81%2C2L20%2C48h8l1.18-4.7a20.16%2C20.16%2C0%2C0%2C0%2C4.81-2l4.15%2C2.49%2C5.66-5.66L41.31%2C34a20.16%2C20.16%2C0%2C0%2C0%2C2-4.81ZM24%2C38A14%2C14%2C0%2C1%2C1%2C38%2C24%2C14%2C14%2C0%2C0%2C1%2C24%2C38Z%22%2F%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2234%2024%2018%2033%2018%2015%2034%2024%2034%2024%22%2F%3E%3C%2Fsvg%3E");
}

.icon-animations {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eanimations%3C%2Ftitle%3E%3Cg%20id%3D%22animations%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M12%2C45V43.22a6.39%2C6.39%2C0%2C0%2C0%2C.63-.81%2C27.83%2C27.83%2C0%2C0%2C1%2C3.79-4.16c.93-.84%2C2.06-1.88%2C2.86-2.71a13.83%2C13.83%2C0%2C0%2C0%2C1.53-1.9l3.9-5.24c1-1.17.95-1.1%2C2.11%2C0l3%2C2.24a4%2C4%2C0%2C0%2C0-2.29%2C2.38c-1.37%2C3-2.39%2C4-2.68%2C4.22l-.23.18c-.54.39-1.81%2C1-1.7%2C1.54l.8%2C1.49a4.5%2C4.5%2C0%2C0%2C1%2C.39%2C1l.57%2C2.15a.69.69%2C0%2C0%2C0%2C.58.48c.47.08%2C1%2C.5%2C1.33.53%2C1.29.1%2C1.79%2C0%2C1.42-.54L26.7%2C42.72a.86.86%2C0%2C0%2C1-.2-.24%2C3.64%2C3.64%2C0%2C0%2C1-.42-2.2A5.39%2C5.39%2C0%2C0%2C1%2C26.61%2C39c1.84-2%2C6.74-6.36%2C6.74-6.36%2C1.71-1.81%2C1.4-2.52.81-3.84a27.38%2C27.38%2C0%2C0%2C0-2-3c-.41-.61-2.08-2.38-2.85-3.28-.43-.5.38-2.08.87-2.82.18-.12-.41.05%2C1.72.07a23.32%2C23.32%2C0%2C0%2C0%2C3.56-.19l1.63.61c.28%2C0%2C1.18-.09%2C1.31-.35l.12-.78c.18-.39.31-1.56-.05-1.75l-.6-.52a2.28%2C2.28%2C0%2C0%2C0-1.61.07l-.2.44c-.14.15-.52.37-.71.29l-2.24%2C0c-.5.12-1.18-.42-1.81-.73L32.05%2C15a8%2C8%2C0%2C0%2C0%2C.8-3.92%2C1.22%2C1.22%2C0%2C0%2C0-.28-.82%2C7.87%2C7.87%2C0%2C0%2C0-1.15-1.06l.11-.73c-.12-.49%2C1-.82%2C1.52-.82l.76-.33c.32%2C0%2C.68-.89.78-1.21L34.94%2C4a11.26%2C11.26%2C0%2C0%2C0%2C0-1.61C34.57.08%2C30.06-1.42%2C28.78%2C2c-.14.38-.62.77.34%2C3.21a1.55%2C1.55%2C0%2C0%2C1-.3%2C1.2L28.4%2C7a4%2C4%2C0%2C0%2C1-1.19.49c-.79%2C0-1.59-.75-4%2C.54C21%2C9.16%2C18.59%2C13%2C17.7%2C14.22a3.21%2C3.21%2C0%2C0%2C0-.61%2C1.58c-.05%2C1.16.7%2C3.74.87%2C5.75.13%2C1.53.21%2C2.52.72%2C3.06%2C1.07%2C1.14%2C2.1-.18%2C2.61-1a2.74%2C2.74%2C0%2C0%2C0-.14-1.86l-.74-.1c-.15-.15-.4-.42-.39-.64-.05-3.48-.22-3.14-.18-5.39%2C1.74-1.46%2C2.4-2.45%2C2.3-2-.2%2C1.15.28%2C2.83.09%2C4.35a6.46%2C6.46%2C0%2C0%2C1-.7%2C2.58s-2.11%2C4.22-2.14%2C4.27l-1.26%2C5.6-.7%2C1.44s-.71.54-1.59%2C1.21a9.67%2C9.67%2C0%2C0%2C0-2.27%2C3.18%2C20.16%2C20.16%2C0%2C0%2C1-1.42%2C2.83l-.87%2C1.31a1.72%2C1.72%2C0%2C0%2C1-.6.61l-1.83%2C1.1a1.39%2C1.39%2C0%2C0%2C0-.16.93l.68%2C1.71a4.07%2C4.07%2C0%2C0%2C1%2C.27%2C1.07l.17%2C1.56a.75.75%2C0%2C0%2C0%2C.71.59%2C18.13%2C18.13%2C0%2C0%2C0%2C3.26-.5c.27-.09-.29-.78-.53-1s-.45-.36-.45-.36A12.78%2C12.78%2C0%2C0%2C1%2C12%2C45Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon-settings {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Esettings%3C%2Ftitle%3E%3Cg%20id%3D%22settings%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M40%2C3H8A5%2C5%2C0%2C0%2C0%2C3%2C8V40a5%2C5%2C0%2C0%2C0%2C5%2C5H40a5%2C5%2C0%2C0%2C0%2C5-5V8A5%2C5%2C0%2C0%2C0%2C40%2C3ZM16%2C40H9V33h7Zm0-12H9V21h7Zm0-12H9V9h7ZM39%2C38H20V35H39Zm0-12H20V23H39Zm0-12H20V11H39Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon-skins {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Eskins%3C%2Ftitle%3E%3Cg%20id%3D%22skins%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M36%2C12.54l-6.92%2C1-.79%2C1.2c-1%2C.25-2-.62-3-.55V12.33a1.35%2C1.35%2C0%2C0%2C1%2C.55-1.07c3-2.24%2C3.28-3.75%2C3.28-5.34A5.06%2C5.06%2C0%2C0%2C0%2C24%2C.76c-2.54%2C0-4.38.71-5.49%2C2.13a5.74%2C5.74%2C0%2C0%2C0-.9%2C4.57l2.48-.61a3.17%2C3.17%2C0%2C0%2C1%2C.45-2.4c.6-.75%2C1.75-1.13%2C3.42-1.13%2C2.56%2C0%2C2.56%2C1.24%2C2.56%2C2.56%2C0%2C.92%2C0%2C1.65-2.26%2C3.34a3.92%2C3.92%2C0%2C0%2C0-1.58%2C3.12v1.86c-1-.07-2%2C.8-3%2C.55l-.79-1.2-6.92-1c-2.25%2C0-4.35%2C2.09-5.64%2C3.93L1%2C24c3.83%2C5.11%2C10.22%2C5.11%2C10.22%2C5.11V41.93c0%2C2.34%2C2.68%2C3.88%2C5.59%2C4.86a22.59%2C22.59%2C0%2C0%2C0%2C14.37%2C0c2.91-1%2C5.59-2.52%2C5.59-4.86V29.15S43.17%2C29.15%2C47%2C24l-5.33-7.57C40.38%2C14.63%2C38.27%2C12.54%2C36%2C12.54ZM23.32%2C20.09%2C21%2C17l1.8-.6a3.79%2C3.79%2C0%2C0%2C1%2C2.4%2C0L27%2C17l-2.32%2C3.09A.85.85%2C0%2C0%2C1%2C23.32%2C20.09Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  filter: invert(1);
}

.icon-speed,
.icon-animations,
.icon-settings {
  filter: invert(1); /* transforme le blanc en noir */
}



#project-making-of{
	margin-bottom: 2em;
}

.mo-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 0.8em;
}

.mo-tools-label {
  font-size: 1.1em;
  color: #5D5D5D;
  font-style: italic;
}

.mo-tool-icon {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.mo-tool-icon[alt="Spine"] {
  width: 19.3px;
  height: 19.3px;
}

#making-of-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 2.2em;
}

#making-of-images .mo-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
}

#making-of-images .mo-item img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

#making-of-images .mo-item:hover img {
  transform: scale(1.05);
}

#making-of-images .mo-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  text-align: center;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

#making-of-images .mo-item:hover .mo-overlay {
  opacity: 1;
}

.mo-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5em;
  color: white;
  background-color: rgba(0, 0, 0, 0.45);
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.1em;
  padding-left: 0.05em;
  pointer-events: none;
  z-index: 1;
}

#lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#lightbox.active {
  display: flex;
}

#lightbox img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 6px;
  object-fit: contain;
}


#lightbox-video {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#lightbox-video.active {
  display: flex;
}

#lightbox-video iframe {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

#lightbox-video-btn {
  position: fixed;
  top: 40px;
  right: 120px;
  font-size: 2em;
  color: white;
  cursor: pointer;
  z-index: 10000;
  line-height: 1;
}

#lightbox-video-btn:hover {
  opacity: 0.7;
}







@media screen and (max-width: 640px) {
	
.titre-section {
  margin: 1.8em auto 1.8em auto;
}
.titre-section:has(h2) {
    margin-bottom: 1.2em;
  }

#project-title {
    font-size: 1.4em; /* réduit légèrement */
  }

#showcase h3 {
    font-size: 1.1em; /* réduit légèrement */
  }

#showcase {
    padding: 0 12px; /* respire un peu sur mobile */
  }

#page-header {
  padding: 0.9em 0; /* espace égal au dessus et en dessous */
  margin-top: 0.35em;
  margin-bottom: 0.5em;
}

#page-header h1 {
    font-size: 1.6em;
	margin: 0;
  }

#page-header p {
  margin-top: 0.3em;
  margin-bottom: 0.35em;
}
.header-break {
    display: none;
  }
  #page-header p span:last-child::before {
    content: "\A";
    white-space: pre;
  }
#project-thumbnails {
	margin-top: 0.5em;
    margin-bottom: 1.8em; /* plus d'espace avant le titre projet */
  }
  
.thumb[data-project="totem"] span {
    font-size: 0; /* cache le texte actuel */
  }
  
.thumb[data-project="totem"] span::after {
    content: "Totem";
    font-size: 13px;
  }

.thumb {
    width: 28vw; /* s'adapte à la largeur */
	border-radius: 6px; /* force le maintien des arrondis */
  }

.thumb img {
    height: 18vw;
  }

#player-container-main {
    width: 100% !important;
    height: 75vw !important; /* garde le ratio approximatif */
	margin-top: 1.8em;
	margin-bottom: 0.3em;
  }
  #player-container-secondary {
    width: 100% !important;
    height: 75vw !important;
	margin-top: 1.2em;
	margin-bottom: 0.3em;
  }

#project-credits {
    font-size: 0.75em;
	margin-bottom: 2.4em;
  }
  
.instaportfolio,
  .icon-artstation,
  .icon-linkedin {
    width: 1em;
    height: 1em;
  }
  
#player-guide-icons {
    gap: 20px;
	margin-bottom: 1.8em;
  }
  
 #project-video {
  margin-top: -0.42em;
  margin-bottom: 0;
}

#project-video iframe {
    width: 100%;
    height: 56vw;
  }
.titre-section:has(h3) {
  margin-top: 1em;
}
#making-of-images {
    grid-template-columns: repeat(2, 1fr);
  }
  
  #lightbox-video-btn {
    right: 35px;
}
}




@media screen and (min-width: 1440px) {
  #showcase {
    transform: scale(1.15);
    transform-origin: top center;
    margin-bottom: calc((1.15 - 1) * 190%);
  }
}
@media screen and (min-width: 1920px) {
  #showcase {
    transform: scale(1.25);
    transform-origin: top center;
    margin-bottom: calc((1.25 - 1) * 145%);
  }
}
@media screen and (min-width: 2560px) {
  #showcase {
    transform: scale(1.35);
    transform-origin: top center;
    margin-bottom: calc((1.35 - 1) * 145%);
  }
}
@media screen and (min-width: 3840px) {
  #showcase {
    transform: scale(1.45);
    transform-origin: top center;
    margin-bottom: calc((1.45 - 1) * 145%);
  }
}