/* ===================================
   Police / base
=================================== */
:root{
  --bg-dark: #000;
  --text: #fff;

  /* mêmes marges que tes autres pages */
  --page-x: clamp(16px, 3vw, 56px);
  --max-width: 1200px;

  /* glass system */
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.10);
  --shadow: 0 18px 40px rgba(0,0,0,0.45);

  --gradient-primary: linear-gradient(135deg,
    rgba(70,72,255,0.95),
    rgba(255,114,98,0.85),
    rgba(255,174,165,0.65)
  );

  --font: 'Epilogue', Arial, sans-serif;

  /* === Réglages du background responsive ===
     Tu ajustes ici si tu veux : */
  --bg-pos-x: calc(50% + clamp(0px, 38vw, 300px));
  --bg-pos-y: clamp(-190px, -14vw, 0px);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{
  min-height: 100%;
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
}

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

/* ===================================
   Background responsive (image + overlay)
   -> image en ::before (cover, responsive)
   -> overlay en ::after
=================================== */
body{
  position: relative;
  background: var(--bg-dark);
}

/* Image de fond responsive */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("./Ressources/Photo-moi-sur-cam.png");
  background-repeat: no-repeat;

  /* IMPORTANT: cover = responsive sans déformation */
  background-size: cover;

  /* Position adaptable via variables */
  background-position: var(--bg-pos-x) var(--bg-pos-y);

  /* petit boost visuel léger (optionnel) */
  filter: saturate(1.02) contrast(1.02);
  transform: translateZ(0);
}

/* Overlay style “pages suivantes” */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(circle at 20% 15%, rgba(70,72,255,0.18), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(255,114,98,0.14), transparent 45%),
    radial-gradient(circle at 55% 85%, rgba(255,174,165,0.12), transparent 50%),
    linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,1));
}

/* Tout passe au-dessus */
body > *{
  position: relative;
  z-index: 2;
}

/* Focus clavier cohérent */
a:focus-visible{
  outline: 3px solid rgba(70,72,255,0.45);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ===================================
   Layout
=================================== */
main{
  padding-inline: var(--page-x);
}

main .container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 !important;
}

/* ===================================
   HERO
=================================== */
.hero{
  padding: 3.5rem 0 1.25rem 0;
}

.hero-inner{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.hero-content{
  max-width: 70ch;
}

.hero h1{
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
  text-align: left;
}

.hero p{
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
}

.hero p strong{
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===================================
   GRID PROJETS (cards glass)
=================================== */
.main-project{
  padding: 1.5rem 0 4rem 0;
  margin-top: -0.5rem;
}

.projects-grid{
  display: grid;
  gap: 1.25rem;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 250px;
  grid-template-areas:
    "p1 p2 p3 p4"
    "p5 p5 p6 p7";
}

.projects-grid a{
  display: block;
  position: relative;
  overflow: hidden;

  border-radius: 1.25rem;
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.projects-grid a:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.075);
}

.projects-grid img,
.projects-grid video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 1.25rem;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.projects-grid a:hover img,
.projects-grid a:hover video{
  transform: scale(1.06);
  filter: brightness(1.02);
}

.projects-grid a:nth-child(1){ grid-area: p1; }
.projects-grid a:nth-child(2){ grid-area: p2; }
.projects-grid a:nth-child(3){ grid-area: p3; }
.projects-grid a:nth-child(4){ grid-area: p4; }
.projects-grid a:nth-child(5){ grid-area: p5; }
.projects-grid a:nth-child(6){ grid-area: p6; }
.projects-grid a:nth-child(7){ grid-area: p7; }

/* ===================================
   Responsive (grille + position fond)
=================================== */

/* Tablettes: recentre un peu l'image */
@media (max-width: 1024px){
  :root{
    --bg-pos-x: 60%;
    --bg-pos-y: 10%;
  }

  .projects-grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 180px 200px;
    grid-template-areas:
      "p1 p2 p3"
      "p4 p5 p6"
      "p7 p7 p7";
  }
}

/* Mobile: on centre clairement l'image */
@media (max-width: 768px){
  :root{
    --bg-pos-x: 50%;
    --bg-pos-y: 15%;
  }

  .hero{
    padding: 3rem 0 1rem 0;
  }

  .hero-content{
    max-width: 100%;
  }

  .projects-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 160px 200px 200px 200px;
    grid-template-areas:
      "p1 p2"
      "p3 p4"
      "p5 p6"
      "p7 p7";
  }
}

/* Très petit: grille 1 colonne + fond plus “haut” */
@media (max-width: 480px){
  :root{
    --bg-pos-x: 50%;
    --bg-pos-y: 5%;
  }

  .projects-grid{
    grid-template-columns: 1fr;
    grid-template-rows: 120px repeat(6, 180px);
    grid-template-areas:
      "p1" "p2" "p3" "p4" "p5" "p6" "p7";
  }
}

/* Perf / accessibilité */
@media (max-width: 640px){
  .projects-grid a{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 12px 26px rgba(0,0,0,0.45);
  }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
  .projects-grid a:hover{ transform: none; }
  .projects-grid a:hover img,
  .projects-grid a:hover video{ transform: none; }
}