@font-face{
  font-family:'MADE Outer Sans';
  src:url('../assets/fonts/MadeOuterSans-Thin.otf') format('opentype');
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MADE Outer Sans';
  src:url('../assets/fonts/MadeOuterSans-Light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MADE Outer Sans';
  src:url('../assets/fonts/MadeOuterSans-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MADE Outer Sans';
  src:url('../assets/fonts/MadeOuterSans-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MADE Outer Sans';
  src:url('../assets/fonts/MadeOuterSans-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'MADE Outer Sans';
  src:url('../assets/fonts/MadeOuterSans-Black.otf') format('opentype');
  font-weight:900; font-style:normal; font-display:swap;
}

:root{
  --pink: #FA6168;
  --blue: #0C1626;
  --white: #FFFFFF;
  --font: 'MADE Outer Sans', 'Helvetica Neue', Arial, sans-serif;
}

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

html{
  scroll-behavior:smooth;
  scroll-snap-type: y mandatory;
}

.snap-section{
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

body{
  font-family: var(--font);
  background: var(--blue);
  color: var(--white);
  overflow-x:hidden;
  position:relative;
}

/* static grain texture, desaturated so it doesn't shift the pink/blue hues */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

.thin{ font-weight:200; }
.light{ font-weight:300; }
.bold{ font-weight:700; }
.black{ font-weight:900; }

/* ---------- INTRO LOADER ---------- */
.intro-loader{
  position:fixed;
  inset:0;
  z-index:10000;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:1;
  transition:opacity .6s ease;
}
.intro-loader.hide{ opacity:0; pointer-events:none; }
.intro-loader video{
  width:min(50vw, 380px);
  height:auto;
}

/* ---------- NAV ---------- */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 48px;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:300;
}
.site-nav .nav-inner{
  width:100%;
  max-width:1200px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.site-nav .nav-left{ text-align:right; padding-right:clamp(24px,6vw,90px); }
.site-nav .nav-right{ text-align:left; padding-left:clamp(24px,6vw,90px); }
.site-nav a:hover{ opacity:.7; }
.site-nav .logo-mark{ justify-self:center; width:34px; height:34px; }
.site-nav .logo-mark img{ width:100%; height:100%; object-fit:contain; }

body[data-page="contact"] .nav-contact,
body[data-page="projet"] .nav-contact{
  font-weight:700;
}

/* ---------- HERO / ACCUEIL ---------- */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.hero-wordmark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  position:relative;
  z-index:2;
}
.hero-wordmark .name{
  font-size:clamp(28px, 4vw, 56px);
  font-weight:900;
  letter-spacing:.02em;
}
.hero-wordmark .logo-mark{ width:clamp(90px,10vw,140px); height:auto; }
.hero-wordmark .logo-mark img{ width:100%; height:auto; display:block; }

.scroll-hint{
  position:absolute;
  bottom:32px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:.5; font-weight:300;
}

/* ---------- SHOWREEL ---------- */
.showreel{
  min-height:100vh;
  background:var(--blue);
  padding:18px;
  display:flex;
}
.showreel-card{
  flex:1;
  background:var(--pink);
  color:var(--white);
  border-radius:28px;
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:40px 5% 0;
}
/* Titre + vidéos centrés dans l'espace restant ; le pied (crédits) reste
   toujours ancré en bas au lieu de risquer d'être coupé par overflow:hidden
   si le contenu du milieu dépasse la hauteur de l'écran. */
.showreel-middle{
  margin:auto 0;
}
.showreel h1{
  font-size:clamp(48px, 12vw, 170px);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.01em;
  text-align:center;
}
.showreel-videos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:14px;
  margin:40px 0;
}
.showreel-videos video{
  width:100%; height:110px; object-fit:cover;
  border-radius:6px;
}
.showreel-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-bottom:40px;
  flex-shrink:0;
}
.showreel-footer .credits{
  font-size:11px; font-weight:200; letter-spacing:.08em; text-transform:uppercase; opacity:.85;
}
.showreel-footer .name{
  font-size:clamp(20px,3vw,32px); font-weight:700; margin-top:6px;
}

/* ---------- ABOUT ---------- */
.about{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  padding:120px 6% 40px;
  gap:6%;
  flex-wrap:wrap;
}
.about-text{ flex:1 1 480px; position:relative; z-index:2; }
.about-label{
  color:var(--pink);
  font-size:13px; letter-spacing:.15em; font-weight:300; text-transform:uppercase;
  margin-bottom:18px;
}
.about-body{
  font-size:clamp(18px,2.2vw,28px);
  font-weight:700;
  line-height:1.35;
  max-width:640px;
}
.about-photo{
  flex:1 1 320px;
  min-height:340px;
  background:var(--pink);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:20px;
  position:relative; z-index:2;
  border-radius:2px;
  overflow:hidden;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-contact{
  position:absolute; left:6%; bottom:32px; z-index:2;
  font-size:12px;
}
.about-contact .label{ color:var(--pink); font-weight:300; margin-bottom:4px; }
.about-contact .value{ font-weight:400; }

/* ---------- PROJETS GRID ---------- */
.projets-page{ padding:140px 6% 100px; min-height:100vh; }
.projets-title{ font-size:clamp(32px,5vw,60px); font-weight:900; margin-bottom:60px; }
.projets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:28px;
}
.projet-card{
  background:var(--pink);
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  border-radius:2px;
  display:flex;
  align-items:flex-end;
  padding:22px;
}
.projet-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.projet-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,36,60,.65), transparent 55%);
  z-index:1;
}
.projet-card span{ position:relative; z-index:2; font-weight:700; font-size:22px; }
.projets-empty{ opacity:.6; font-weight:300; }

/* ---------- PROJET DETAIL ---------- */
.projet-hero{
  min-height:100vh;
  background:var(--pink);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-bottom:48px;
}
.projet-hero .photo-wrap{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:60px 5% 0;
}
.projet-hero .photo-wrap img{ max-height:56vh; object-fit:cover; width:100%; border-radius:2px; }
.projet-hero .photo-wrap .placeholder{
  font-size:clamp(28px,5vw,64px); font-weight:700; color:var(--white);
}
.projet-hero .nom-projet{
  padding:0 6%;
  font-size:clamp(30px,5vw,56px);
  font-weight:900;
  color:var(--white);
}

.projet-meta{
  padding:100px 6% 60px;
}
.meta-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:40px;
}
.meta-col .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; font-weight:300; margin-bottom:6px; }
.meta-col .v{ font-size:18px; font-weight:700; }
.equipe-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
}
.equipe-col{ display:flex; flex-direction:column; gap:14px; }
.equipe-col .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; font-weight:300; }
.membre{ font-weight:700; font-size:15px; }
.membre sup{ font-weight:300; opacity:.6; margin-left:4px; font-size:10px; }

.projet-resume{
  padding:60px 8%;
  text-align:center;
}
.projet-resume p{
  font-size:clamp(16px,2vw,22px);
  font-weight:700;
  line-height:1.6;
  max-width:760px;
  margin:0 auto;
}

.projet-medias{
  padding:0 6% 100px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:20px;
}
.media-box{
  background:var(--pink);
  min-height:220px;
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:20px; color:var(--white);
  overflow:hidden;
  position:relative;
}
.media-box img, .media-box video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.media-box span{ position:relative; z-index:2; }

/* ---------- CONTACT ---------- */
.contact-hero{
  min-height:70vh;
  background:var(--pink);
  padding:120px 6% 60px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.contact-hero .photo-label{ font-size:clamp(30px,6vw,68px); font-weight:900; text-align:right; }
.contact-hero .cta{ font-size:clamp(30px,7vw,72px); font-weight:900; }
.contact-footer{
  padding:48px 6%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
}
.contact-footer .infos .label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.55; font-weight:300; }
.contact-footer .infos .phrase{ font-weight:700; margin:6px 0 2px; }
.contact-footer .infos .mail{ font-weight:300; opacity:.85; }
.contact-footer .infos .admin-link{ display:inline-block; margin-top:10px; font-size:11px; font-weight:200; opacity:.4; text-decoration:underline; text-underline-offset:3px; }
.contact-footer .infos .admin-link:hover{ opacity:.7; }
.contact-footer .back-link{ font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.contact-footer .logo-mark{ width:40px; height:40px; }
.contact-footer .logo-mark img{ width:100%; height:100%; object-fit:contain; }

/* ---------- ADMIN LOGIN ---------- */
.admin-login{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.admin-login-form{
  width:100%;
  max-width:340px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:32px;
  text-align:center;
}
.admin-login-form h2{ font-size:18px; font-weight:700; margin-bottom:20px; }
.admin-login-form input{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
  padding:12px 14px;
  color:var(--white);
  font-family:var(--font);
  font-size:14px;
  margin-bottom:16px;
}
.admin-login-form input:focus{ outline:none; border-color:var(--pink); }
.admin-login-form .btn{ width:100%; }
.login-error{
  display:none;
  color:var(--pink);
  font-size:12px;
  font-weight:300;
  margin-top:14px;
}
.login-error.show{ display:block; }

/* ---------- ADMIN ---------- */
.admin-wrap{ padding:60px 6% 100px; max-width:1000px; margin:0 auto; }
.admin-title{ font-size:32px; font-weight:900; margin-bottom:8px; }
.admin-sub{ opacity:.6; font-weight:300; margin-bottom:40px; font-size:14px; }
.admin-form{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:32px;
  margin-bottom:48px;
}
.admin-form h2{ font-size:18px; font-weight:700; margin-bottom:24px; }
.field-group{ margin-bottom:20px; }
.field-group label{ display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; opacity:.6; margin-bottom:8px; font-weight:300; }
.field-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
input[type="text"], input[type="number"], input[type="url"], input[type="email"], textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  border-radius:4px;
  padding:12px 14px;
  color:var(--white);
  font-family:var(--font);
  font-size:14px;
}
textarea{ min-height:90px; resize:vertical; }
input[type="file"]{ color:var(--white); font-size:13px; }
input:focus, textarea:focus{ outline:none; border-color:var(--pink); }

.equipe-fieldset{ border:1px dashed rgba(255,255,255,.15); border-radius:6px; padding:16px; margin-top:10px; }
.equipe-member-row{ display:grid; grid-template-columns:1fr 1fr auto; gap:12px; margin-bottom:10px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pink); color:var(--white);
  border:none; border-radius:4px;
  padding:12px 22px; font-family:var(--font); font-weight:700; font-size:13px;
  cursor:pointer; letter-spacing:.03em; text-transform:uppercase;
}
.btn:hover{ opacity:.85; }
.btn.secondary{ background:transparent; border:1px solid rgba(255,255,255,.3); }
.btn.danger{ background:transparent; border:1px solid var(--pink); color:var(--pink); padding:8px 14px; }
.btn.small{ padding:8px 14px; font-size:11px; }

.admin-list{ display:flex; flex-direction:column; gap:14px; }
.admin-project-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  padding:16px 20px;
  flex-wrap:wrap;
}
.admin-project-row .info{ display:flex; align-items:center; gap:16px; }
.admin-project-row .thumb{ width:56px; height:42px; border-radius:3px; background:var(--pink); object-fit:cover; flex-shrink:0; }
.admin-project-row .name{ font-weight:700; }
.admin-project-row .sub{ font-size:12px; opacity:.55; font-weight:300; }
.admin-actions{ display:flex; gap:8px; }
.toast{
  position:fixed; bottom:24px; right:24px; z-index:1000;
  background:var(--pink); color:var(--white);
  padding:14px 22px; border-radius:6px; font-weight:700; font-size:14px;
  opacity:0; pointer-events:none;
}
.toast.show{ opacity:1; }

@media (max-width:640px){
  .site-nav{ padding:20px 20px; }
  .about{ padding-top:140px; }
  .projet-medias{ grid-template-columns:1fr; }
}