/* -----------------------------
   Variables & polices
------------------------------ */
:root{
  --violet-1: #330073;
  --violet-2: #4800A5;
  --violet-3: #5B00D0;
  --neon: #A4FF2F;          /* vert/jaune néon de la maquette */
  --button-hover: #4F00C1;
  --card: rgba(86, 0, 255, 0.35);
  --card-hover: rgba(120, 20, 255, 0.55);
  --text: #e9e7ff;
  --muted: #bdb7ff;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --gap: 28px;
}

/* Police locale pour les gros titres (ta medium.woff2) */
@font-face{
  font-family: "CLMB-Medium";
  src: url("assets/fonts/medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);

  background:
    radial-gradient(circle at top center, var(--violet-3) 0%, transparent 70%),
    linear-gradient(180deg, var(--violet-2) 0%, var(--violet-1) 100%);

  background-attachment: fixed; /* optionnel : le dégradé reste fixe */
  overflow-x:hidden;
}

/* Filaire de fond (SVG) */
.site-bg{
  position: fixed;
  inset: 0;
  background-image: url("assets/wireframe.svg"); /* mets ici ton visuel filaire .svg */
  background-repeat: no-repeat;
  background-position: -3% 60%;
  background-size: 900px auto;
  opacity: 100;
  pointer-events: none;
  z-index: 0;
}

/* Accessibilité */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* -----------------------------
   Header
------------------------------ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 5;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px;
}

.brand img{
  height: 50px; width: auto; display:block;
}

.site-nav{ display:flex; gap:12px; }

.chip{
  display:inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--neon);
  color: #ffffff;
  text-decoration:none;
  font-weight: 600;
  letter-spacing:.5px;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
  background: var(--violet-2);
}
.chip:hover{
  background: var(--violet-3);
  color: var(--neon);
}
.chip--ghost{
  border: none;
  background: none;
}
.chip--ghost:hover {
  background: none;
}

.hide-on-mobile{ display:inline-block; }

/* -----------------------------
   Hero
------------------------------ */
.hero{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  min-height: clamp(70vh, 86vh, 92vh);
  padding: 48px 24px 24px;
  gap: 32px;
}

.hero__col--right{
  justify-self: end;
  width: min(560px, 95%);
  text-align: right;        /* ← aligné à droite */
}

.display-stack{
  list-style:none; margin:0 0 24px 0; padding:0;
  font-family: "CLMB-Medium", "Sora", sans-serif;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.75;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--neon);       /* ← texte vert */
}
.display-stack li + li{ margin-top: 10px; }

.cta{
  display:inline-block;
  margin-top: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--neon);
  color: #ffffff;
  text-decoration: none;
  background: var(--violet-2);
  font-weight: 800;
  letter-spacing: .6px;
  transition: transform .12s ease, filter .12s ease;
}
.cta:hover{ background: var(--button-hover); }

/* -----------------------------
   Sections & titres
------------------------------ */
.section{
  position: relative;
  z-index: 1;
  padding: 34px 20px 56px;
}

.display-title{
  font-family: "CLMB-Medium", "Sora", sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--neon);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin: 6px 0 20px;
}

/* -----------------------------
   Cards Réalisations
------------------------------ */
.realisations-container {
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 20px; /* pour un petit souffle sur mobile */
}
.cards{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  max-width: 1120px;
  margin-inline: auto;
}
.card{
  position: relative;
  display:flex; align-items:flex-end; justify-content:flex-start;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-2xl);
  overflow:hidden;
  /* border: 1px solid rgba(200,255,25,.25); */
  background: #1b1033;            /* couleur de secours si l’image tarde */
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease;
}
.card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;               /* remplit la tuile sans déformer */
  transform: scale(1); transition: transform .25s ease;
}
/* Voile pour lisibilité du titre */
.card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.45) 100%);
  pointer-events:none;
}
.card:hover{
  /* transform: translateY(-2px); */
  border: 2px solid var(--neon)
}
.card:hover img{
  transform: scale(1.03);
}
.card span{
  position: relative;              /* au-dessus du voile */
  z-index: 1;
  color:#e7dcff;
  font-weight: 700;
  letter-spacing:.3px;
  margin: 0 20px 20px;             /* padding intérieur bas/gauche */
}

/* -----------------------------
   Contact
------------------------------ */
.contact-container {
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 20px; /* pour un petit souffle sur mobile */
}
.section--contact{
  margin-top: 16px;
}
.form{
  max-width: 1120px; margin: 0 auto;
  padding: 18px;
  border: 2px solid var(--neon);
  border-radius: 22px;
  background: rgba(5,0,25,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column; /* garde les champs les uns sous les autres */
}
.form-row{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 12px;
}
input, textarea{
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid var(--violet-3);
  background: rgba(86,0,255,.25);
  color: var(--text);
  outline: none;
}
input::placeholder, textarea::placeholder{ color: #dbe1ffcc; }
textarea{ resize: vertical; min-height: 220px; }

.form-submit{
  margin-top: 14px;
}

.form .form-submit {
  align-self: flex-end; /* pousse le bouton à droite */
}
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap; /* permet de passer en colonne si l’espace est trop réduit */
}

.form-disclaimer {
  flex: 1; /* prend toute la place dispo */
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

.form-disclaimer a {
  color: var(--neon);
  text-decoration: underline;
}

/* -----------------------------
   Footer
------------------------------ */
.site-footer{
  position: relative; z-index: 1;
  padding: 40px 20px 80px;
  text-align:center;
}
.site-footer a{ color: var(--muted); text-decoration:none; }
.site-footer a:hover{ color: var(--text); }

/* -----------------------------
   Page Mentions légales
------------------------------ */
.page-legal .legal-container{
  position: relative; z-index: 1;
  max-width: 900px;
  margin: 40px auto 80px;
  padding: 0 20px;
}
.legal-block{ background: rgba(86,0,255,.22); border: 1px solid rgba(200,255,25,.25);
  padding: 16px 18px; border-radius: 16px; margin: 18px 0; }
.legal-container h1{ margin-bottom: 18px; }
.legal-block h2{ margin: 0 0 8px 0; font-size: 18px; color: var(--neon); }
.legal-bottom{ margin-top: 20px; }
.page-legal a {
  color: var(--neon);
  text-decoration: underline;
}

.page-legal a:hover {
  color: var(--neon);
  text-decoration: none;
}


/* --------- Pages Projets --------- */
.page-project .site-bg {
  display: none;
}

.container{
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}

.project-title{
  font-family: "CLMB-Medium","Sora",sans-serif;
  color: var(--neon);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: clamp(22px, 3vw, 28px);
  margin: 8px 0 10px;
}

.project-lead{
  max-width: 100%;
  color: #ffffff;
  line-height: 1.5;
  margin: 0 0 18px;
}

.project-text{
  color:#ffffff;
  font-weight: 100;
}

.project-hero{
  margin: 14px auto 24px;
  max-width: 1120px;
  padding-inline: 20px;
}
.project-hero img{
  width: 100%; height: auto; display: block;
  border-radius: 10px;
}

/* Sections et colonnes */
.project-section{ padding: 8px 0 22px; }
.project-columns{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: start;
}

.project-notes{
  border-radius: 10px;
  padding: 14px 16px;
}
.project-notes .h4{
  font-family: "CLMB-Medium","Sora",sans-serif;
  font-size: 18px; color: var(--neon); margin: 0 0 8px;
}
.project-notes .h5{
  font-size: 15px; color: var(--neon); margin: 14px 0 6px;
}
.project-notes ul{ margin: 0 0 10px 18px; }

/* Grilles d’images */
.project-grid{
  display: grid;
  gap: 16px;
}
.project-grid.grid-2{ grid-template-columns: repeat(2, 1fr); }
.project-grid.grid-3{ grid-template-columns: repeat(3, 1fr); }

.img-frame{
  margin:0; padding:0;
  border-radius: 10px; overflow: hidden;
  background: rgba(86,0,255,.25);
}
.img-frame img{ width:100%; height:auto; display:block; }

/* Grille 3 colonnes / 6 vignettes */
.project-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Vignettes au format 3:4 pour l’harmonie avec la home */
.thumbs-portrait .img-frame { aspect-ratio: 3 / 4; }

/* Images et vidéo couvrent la vignette */
.img-frame img,
.thumb-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Option : léger zoom au hover, comme les cards */
.img-frame:hover img{
  transform: scale(1.02);
  transition: transform .25s ease;
}

/* Nav bas de page */
.project-nav{ padding: 10px 0 40px; }
.project-nav__inner{ display:flex; justify-content: space-between; align-items:center; }

/* ===== Page 404 ===== */
.page-404 .site-bg{
  opacity: .22; /* un peu plus discret */
}

.notfound{
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 160px); /* header+footer */
  display: grid;
  place-items: center;
  padding: 32px 20px 48px;
}

.notfound__inner{
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
  padding: 24px 20px 28px;
  border-radius: 22px;
  background: rgba(5,0,25,.35);
  border: 1px solid rgba(200,255,25,.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.eyebrow{
  margin: 0 0 6px;
  color: var(--neon);
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 12px;
}

.notfound__title{
  margin: 0;
  font-family: "CLMB-Medium","Sora",sans-serif;
  font-size: clamp(72px, 16vw, 180px);
  line-height: 1;
  letter-spacing: 4px;
  color: transparent;
  -webkit-text-stroke: 2px var(--neon);
  -webkit-background-clip: text;
  background-clip: text;
}

.notfound__lead{
  margin: 12px 0 18px;
  color: var(--muted);
  line-height: 1.55;
}

.notfound__actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hidden-field {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

/* ===== Page Merci ===== */
.page-thanks .site-bg {
  opacity: .22;
}

.thanks {
  min-height: calc(100vh - 160px); /* header + footer */
  display: grid;
  place-items: center;
  padding: 32px 20px 48px;
}

.thanks__inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding: 32px 24px;
  border-radius: 22px;
  background: rgba(5,0,25,.35);
  border: 1px solid rgba(200,255,25,.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.thanks__title {
  margin: 0 0 12px;
  font-family: "CLMB-Medium","Sora",sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  color: var(--neon);
}

.thanks__lead {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.55;
}

.thanks__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}



/* -----------------------------
   Responsive
------------------------------ */
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero__col--right{ justify-self: start; }
  .cards{ grid-template-columns: repeat(3, 1fr); }
  .project-grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
  .project-columns{ grid-template-columns: 1fr; }
  .project-notes{ order: 2; }
}
@media (max-width: 680px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .hide-on-mobile{ display:none !important; } /* bouton RÉALISATIONS masqué en mobile */
  .form-row{ grid-template-columns: 1fr; }
  .brand img{ height: 35px; }
  .site-bg {
    background-size: 600px auto;       /* plus petit */
    background-position: center top 60px;   /* centré horizontalement */
  }
  .hero__col--right {
    margin-top: -75px;
  }
  .brand img { height: 60px; }
  .notfound__inner{ padding: 20px 16px 22px; }
  .notfound__title{ -webkit-text-stroke: 1.5px var(--neon); }
  .project-grid.grid-3 { grid-template-columns: 1fr; }
  .project-grid.grid-2{ grid-template-columns: 1fr; }
  .project-grid.grid-3{ grid-template-columns: 1fr; }
}
@media (max-width: 420px){
  .cards{ grid-template-columns: 1fr; }
}