@font-face {
  font-family: 'BRIGHTSTER';
  src: url('./fonts/BRIGHTSTER.ttf') format('truetype');
}

@font-face {
  font-family: 'DisketR';
  src: url('./fonts/DisketR.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  background: radial-gradient(circle at top, #0b0f1a, #020409);
  color: #e6faff;
  font-family: 'DisketR', sans-serif;
}

h2, h4 .subtitle {
  font-family: 'DisketR', sans-serif;
}

/* HEADER */
header {
  padding: 30px 60px 40px;
  text-align: center;
}

.header-main {
  padding-top: 40px;   /* réduit l’espace au-dessus */
  padding-bottom: 20px;
}

h1 {
  font-family: 'BRIGHTSTER' !important;
}

h1 {
  font-size: 100px;
  letter-spacing: 7px;
  color: #00ffe0;
}

.subtitle {
  margin-top: 50px;
  font-family: 'DisketR', sans-serif;
  font-size: 30px;
  color: #00ffe1a1;
}


/* SECTIONS */
section {
  max-width: 900px;
  margin: 0 auto 100px auto;
  padding: 0 40px;
}

h2 {
  font-size: 30px;
  margin-bottom: 20px;
  color: #00cfff;
  text-align: center;
}

h4 {
  font-size: 30px;
  margin-bottom: 50px;
  color: #00cfff;
  text-align: middle;
}

.subtitle2 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
  line-height: 1.5;
  color: #c9f7ff;
}
/* PROJECTS */
.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 150px;
}

.projects img {
  width: 100%;
  border-radius: 40px;
  box-shadow:
    0 0 15px rgba(29, 255, 240, 0.884),
    0 0 40px rgba(0, 251, 255, 0.2);
  transition: transform 0.33s, box-shadow 0.33s;
}

.projects img:hover {
  transform: scale(1.10);
  box-shadow:
    0 0 25px rgba(109, 204, 230, 0.8),
    0 0 60px rgba(4, 71, 123, 0.6);
}

/* LINKS */
a {
  color: #00ffe0;
  text-decoration: none;
  text-shadow: 0 0 6px #045444;
}

a:hover {
  color: #00cfff;
}

h3 {
  font-size: 70px;
  margin-bottom: 40px;
  margin-top: -50px;
  color: #00cfff;
}

.subtitle1 {
  font-size: 20px;
  margin-bottom: -100px;
  line-height: 1.5;
  color: #c9f7ff;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 50px;
  font-size: 14px;
  color: #6fdcff;
  opacity: 0.7;
}

video {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow:
    0 0 20px rgba(0, 255, 200, 0.5);
}

.video-card {
  width: 320px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 25px rgba(0, 255, 200, 0.4);
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-grid {
  display: grid;
  margin-top: -70px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 70px;
  justify-items: center;
}

.video-caption {
  margin-top: 15px;
  color: #7fffd4;
  font-size: 14px;
  opacity: 0.8;
}

.video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tools {
  margin-top: 120px;
  text-align: center;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 60px;
  margin-top: 60px;
  justify-items: center;
}

.tool img {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 0 10px rgba(0, 255, 200, 0.5));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.tool img:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 25px rgba(0, 255, 200, 0.9));
}

.tool p {
  margin-top: 15px;
  font-size: 14px;
  color: #7fffd4;
}

/* SCROLL ANIMATION */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  text-shadow: 0 0 10px rgba(0, 255, 200, 0.4);
  opacity: 1;
  transform: translateY(0);
}

.hidden-on-load {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease, transform 1s ease;
}

.hidden-on-load.visible {
  opacity: 1;
  transform: translateY(0);
}
.electric-divider {
  width: 320px;
  height: 5px;
  margin: 60px auto 120px auto;
  background: linear-gradient(
    90deg,
    transparent,
    #00ffe0,
    transparent
  );
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  box-shadow:
    0 0 10px #00ffe0,
    0 0 25px rgba(0, 255, 224, 0.6);
}

/* impulsion électrique */


section:first-of-type {
  margin-top: 130px;
}
.reveal {
  opacity: 0;
  transform: translateY(25px) scale(0.98);
  transition: 
    opacity 0.9s ease,
    transform 0.9s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}


@media (prefers-reduced-motion: reduce) { 
  * {
    animation: none !important;
    transition: none !important;
  }
}

header .electric-line {
  margin-bottom:24px;
}

.electric-line {
  position: relative;
  width: 320px;
  height: 2px;              
  margin: 40px auto;
}


.electric-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 185%;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.electric-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;           
  background: #00ffe0;
  border-radius: 2px;

  animation: electric-pulse 1.9s infinite;
}
@keyframes lineBreath {
  0%, 100% { transform: scaleX(0.8); }
  50% { transform: scaleX(0.9); }
}

.electric-line {
  animation: lineBreath 4.5s ease-in-out infinite;
  margin-bottom: 12px; /* AVANT le nom */
  margin-top: 0;
}
.name-image {
  margin-top: 0;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .header-main {
    padding-top: 24px;
  }

  .electric-line {
    margin-bottom: 8px;
  }
}
#particle-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}

@keyframes electric-pulse {
  0% {
    opacity: 0.3;
    filter: blur(0.2px);
    box-shadow: 0 0 4px #00ffe0;
  }

  12% {
    opacity: 0.9;
    filter: blur(0.5px);
    box-shadow:
      0 0 10px #ffffff,
      0 0 22px #00ffe0;
  }

  18% {
    opacity: 0.4;
    filter: blur(0.2px);
  }

  31% {
    opacity: 1;
    filter: blur(0.7px);
    box-shadow:
      0 0 6px #ffffff,
      0 0 30px rgba(0,255,224,0.9);
  }

  47% {
    opacity: 0.35;
    filter: blur(0.3px);
  }

  63% {
    opacity: 0.85;
    filter: blur(0.6px);
    box-shadow:
      0 0 14px #00ffe0,
      0 0 26px rgba(0,255,224,0.8);
  }

  78% {
    opacity: 0.45;
    filter: blur(0.2px);
  }

  100% {
    opacity: 0.35;
    filter: blur(0.25px);
    box-shadow: 0 0 6px #00ffe0;
  }
}
.electric-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.8);
  opacity: 0;
  mix-blend-mode: screen;
  animation: electric-glitch 4.8s infinite;
}

@keyframes electric-glitch {
  0%, 96%, 100% {
    opacity: 0;
  }

  97% {
    opacity: 0.9;
    transform: translateY(-50%) scaleX(1.02);
  }

  98% {
    opacity: 0.3;
    transform: translateY(-50%) scaleX(0.98);
  }
}

.electric-gif {
  mix-blend-mode: screen;
  opacity: 0.85;
}
.glitch-button {
  position: relative;
  display: inline-block;
  color: #00ffe0;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.glitch-button::after,
.glitch-button::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0.7;
  clip: rect(0, 0, 0, 0);
}

.glitch-button:hover {
  color: #00cfff;
  animation: glitchPulse 0.3s ease infinite;
}

@keyframes glitchPulse {
  0% { transform: translate(0,0) skew(0deg); }
  20% { transform: translate(-2px,2px) skew(-1deg); }
  40% { transform: translate(2px,-1px) skew(1deg); }
  60% { transform: translate(-1px,1px) skew(0deg); }
  80% { transform: translate(1px,-2px) skew(-1deg); }
  100% { transform: translate(0,0) skew(0deg); }
}
.cursor-ripple {
  position: absolute;
  border: 2px solid #00ffe0;
  border-radius: 50%;
  pointer-events: none;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.6s ease-out forwards;
}

@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}
.animated-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: letterPulse 0.6s forwards;
}

@keyframes letterPulse {
  0% { opacity: 0; transform: translateY(20px); }
  50% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}
#particle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 
  pointer-events: none;
  background: transparent;
}
@media (max-width: 768px) {
  h1 { font-size: 15vw; }
  .subtitle { font-size: 6vw; }
  .projects { gap: 3vw; }
  .projects img { border-radius: 20px; }
  section { padding: 0 5vw; }
}
.projects img, .electric-gif {
  width: 100%;
  height: auto;
  max-width: 100%;
}
/* OVERLAY TRANSITION */
#page-transition {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 224, 0.15) 0%,
    #020409 65%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* actif */
#page-transition.active {
  opacity: 1;
}

/* halo électrique doux */
#page-transition::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0, 255, 224, 0.35) 0%,
    transparent 55%
  );
  opacity: 0;
  animation: softFlash 1.2s ease;
}

@keyframes softFlash {
  0%   { opacity: 0; }
  30%  { opacity: 0.4; }
  70%  { opacity: 0.2; }
  100% { opacity: 0; }
}


/*POUR MOBILE*/

@media (max-width: 768px) {

  body {
    font-size: 82%;
  }

  header {
    padding: 40px 16px 32px;
  }

  h1 {
    font-size: 8vw;
    letter-spacing: 1.5px;
    line-height: 1.05;
  }

  .subtitle {
    font-size: 4.3vw;
    margin-top: 14px;
  }

  h2 {
    font-size: 5.2vw;
  }

  h4 {
    font-size: 4.8vw;
  }

  p {
    font-size: 3.8vw;
    line-height: 1.55;
  }

  .projects {
    gap: 5vw;
  }

  .tools-grid {
    gap: 6vw;
  }

  footer {
    font-size: 3.2vw;
  }
}

@media (max-width: 380px) {

  .animated-title {
    font-size: 10vw;          /* taille adaptée écran */
    letter-spacing: 3px;     /* énorme différence */
    line-height: 1.1;
    text-align: center;
  }
.animated-title {
  animation: fadeInMobile 0.8s ease forwards;
}

@keyframes fadeInMobile {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

}
.project-video {
  width: 100%;
  height: auto;
  border-radius: 40px;
  pointer-events: none;

  box-shadow:
    0 0 15px rgba(29, 255, 240, 0.884),
    0 0 40px rgba(0, 251, 255, 0.2);

  transition: transform 0.33s, box-shadow 0.33s;
}

.video-link:hover .project-video {
  transform: scale(1.10);
  box-shadow:
    0 0 25px rgba(109, 204, 230, 0.8),
    0 0 60px rgba(4, 71, 123, 0.6);
}
header,
section,
footer {
  position: relative;
  z-index: 2;
}
@media (max-width: 768px) {

  /* Texte sous "À propos" */
  section p {
    font-size: 14px;
    line-height: 1.6;
  }

  /* Titre "À propos" */
  h4 {
    font-size: 20px;
    margin-bottom: 20px;
  }
 /* Icônes logiciels */
  .tool img {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 0 4px rgba(0, 255, 200, 0.4));
  }

  /* Texte sous les icônes */
  .tool p {
    font-size: 11px;
  }

  /* Grille plus compacte */
  .tools-grid {
    gap: 28px;
  }
   .tool {
    min-height: 70px;
  }

  .tool img {
    width: 32px;
    height: 32px;
  }

  .tool p {
    margin-top: 8px;
    text-align: center;
    line-height: 1.2;
  }


}
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.tool img {
  display: block;
  object-fit: contain;
}
.name-image {
  display: block;
  margin: 50px auto;
  max-width: 820px;
  width: 100%;
  height: auto;
  z-index: 2;
}
@media (max-width: 768px) {
  .name-image {
    max-width: 280px;
    margin: 16px auto;
  }
}
.name-image {
  animation: softPulse 6s ease-in-out infinite;
}

@keyframes softPulse {
  0% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.01); opacity: 1; }
  100% { transform: scale(1); opacity: 0.95; }
}
.legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 100px 30px;
}

.legal-page h1 {
  margin-bottom: 60px;
}

.legal-page h2 {
  margin-top: 50px;
  margin-bottom: 20px;
}

.legal-page p {
  line-height: 1.7;
  margin-bottom: 20px;
}

.legal-page a {
  text-decoration: none;
}

.legal-back {
  margin-top: 60px;
}
/* =========================
   MOBILE - PAGES PROJETS
   ========================= */

@media (max-width: 768px) {

  /* Page entière */
  body {
    overflow-x: hidden;
  }

  /* Header des pages Animation 2D / 3D / FX etc. */
  header {
    padding: 50px 20px 30px;
  }

  h3 {
    font-size: 11vw;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .subtitle1 {
    font-size: 16px;
    margin-bottom: 0;
  }

  /* Sections */
  section {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 20px;
    margin-bottom: 70px;
  }

  section:first-of-type {
    margin-top: 50px;
  }

  /* Grille des vidéos */
  .video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 45px;
    margin-top: 0;
    width: 100%;
  }

  /* Carte vidéo */
  .video-item {
    width: 100%;
    max-width: 100%;
  }

  .video-card {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
  }

  .video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Texte sous les vidéos */
  .video-caption {
    width: 100%;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 12px;
  }

  /* Bouton retour */
  section a[href="index.html"] {
    display: block;
    text-align: center;
    font-size: 15px;
    margin-top: 20px;
  }

  /* Footer */
  footer {
    padding: 35px 20px;
    font-size: 12px;
    line-height: 1.6;
  }

}