/* ===========================================================
   HUGOCAILLAUD — site public · Liquid Glass (flottant, sans bordures)
   Typos : Syncopate (titres) · Inter (texte)
   =========================================================== */
:root{
  --bg:#08080a;
  --text:#f5f5f7;
  --muted:#b4b4bd;
  --dim:#7d7d87;
  --blue:#38a8ef;
  --blue-600:#1f93da;
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --glass-brd:rgba(255,255,255,.10);
  --glass-brd-2:rgba(255,255,255,.16);
  --shadow:0 16px 50px rgba(0,0,0,.45);
  --radius:22px;
  --radius-sm:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
svg{display:block}

/* --- Fond animé (aurora) --- */
.bg-aurora{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#0a0a0f}
.bg-aurora span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen;
  animation:aurora 24s ease-in-out infinite}
.bg-aurora .a{width:50vw;height:50vw;background:#00adef;top:-12%;left:-12%}
.bg-aurora .b{width:44vw;height:44vw;background:#7b61ff;bottom:-16%;right:-10%;animation-delay:-8s}
.bg-aurora .c{width:38vw;height:38vw;background:#0a97cf;top:24%;left:46%;animation-delay:-15s}
.bg-veil{position:fixed;inset:0;z-index:-2;background:rgba(8,8,10,.6)}
@keyframes aurora{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(7%,-9%) scale(1.15)}
  66%{transform:translate(-6%,7%) scale(.88)}
}
@media(prefers-reduced-motion:reduce){.bg-aurora span{animation:none}}

/* Surface verre réutilisable */
.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid var(--glass-brd);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.07)}

.wrapper{max-width:1220px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;
  padding:0 clamp(14px,3vw,28px);position:relative}

/* --- NAV flottante --- */
nav{
  position:sticky;top:16px;z-index:1000;margin:16px 0 0;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px clamp(18px,3vw,26px);
  background:var(--glass);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-brd);border-radius:999px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);
}
.nav-brand{font-family:'Syncopate',sans-serif;font-weight:700;letter-spacing:3px;font-size:.82rem;
  text-decoration:none;color:var(--text)}
.nav-links{display:flex;gap:8px;align-items:center}
.nav-links a{text-decoration:none;color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:2px;
  font-weight:500;padding:9px 14px;border-radius:999px;transition:color .25s,background .25s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.07)}
.nav-links a.cta{color:#031017;background:var(--blue);font-weight:700}
.nav-links a.cta:hover{background:var(--blue-600);color:#031017}
.back-link{text-decoration:none;color:var(--muted);font-size:.64rem;text-transform:uppercase;letter-spacing:2px;
  font-weight:600;transition:color .25s}
.back-link:hover{color:var(--text)}
.burger{display:none;cursor:pointer;width:26px;height:16px;position:relative;z-index:1100}
.burger span{display:block;width:100%;height:1.5px;background:var(--text);position:absolute;transition:.3s ease-in-out}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){bottom:0}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){transform:translateY(-7px) rotate(-45deg)}
.mobile-overlay{position:fixed;inset:0;height:100vh;background:rgba(8,8,10,.82);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;z-index:900;
  transform:translateY(-100%);transition:transform .5s cubic-bezier(.19,1,.22,1)}
.mobile-overlay.active{transform:translateY(0)}
.mobile-overlay a{font-family:'Syncopate',sans-serif;text-decoration:none;color:var(--text);
  font-size:1.3rem;text-transform:uppercase;letter-spacing:4px}
.mobile-overlay a.cta{color:var(--blue)}

/* --- ENTÊTE (hero flottant) --- */
header{padding:clamp(60px,13vh,150px) clamp(6px,2vw,24px)}
.meta-label{font-size:.55rem;text-transform:uppercase;letter-spacing:5px;color:var(--dim);
  margin-bottom:22px;display:block}
h1{font-family:'Syncopate',sans-serif;font-size:clamp(2.2rem,9vw,5.4rem);text-transform:uppercase;
  letter-spacing:-2px;line-height:.9;font-weight:700}
.intro{margin:clamp(22px,5vh,44px) 0 32px;max-width:600px;font-size:clamp(.98rem,2vw,1.1rem);
  font-weight:300;line-height:1.75;color:#cdcdd4}
.intro strong{font-weight:500;color:var(--text)}
.main-cta{display:inline-flex;align-items:center;padding:15px 30px;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-brd-2);color:var(--text);text-decoration:none;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:3px;transition:all .35s cubic-bezier(.19,1,.22,1)}
.main-cta:hover{background:rgba(255,255,255,.14);padding-right:40px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.btn-blue{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#031017;text-decoration:none;
  padding:15px 30px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  transition:filter .2s,transform .12s;box-shadow:0 10px 30px rgba(56,168,239,.28)}
.btn-blue:hover{filter:brightness(1.08)}
.btn-blue:active{transform:scale(.98)}
.btn-blue svg{width:16px;height:16px;fill:currentColor}

/* --- Titres de section --- */
.section-tag{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:3px;color:var(--dim);
  display:flex;align-items:center;gap:18px;margin-bottom:30px}
.section-tag::after{content:'';height:1px;flex-grow:1;background:rgba(255,255,255,.09)}

/* --- GRILLE PROJETS (cartes verre) --- */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:20px;
  padding:8px clamp(6px,2vw,24px) 40px;flex-grow:1}
.project-card{padding:34px 34px 30px;border-radius:var(--radius);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .3s var(--ease,ease),background .3s,border-color .3s}
.project-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:var(--glass-brd-2)}
.project-content h2{font-family:'Syncopate',sans-serif;font-size:1.25rem;margin-bottom:16px;letter-spacing:1px}
.project-content p{font-size:.95rem;font-weight:300;color:var(--muted);margin-bottom:32px}
.project-footer{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;
  display:flex;align-items:center;gap:10px;transition:gap .3s,color .3s}
.project-card:hover .project-footer{gap:18px;color:var(--blue)}
.project-card.soon{cursor:default}
.project-card.soon:hover{transform:none;background:var(--glass)}
.project-card.soon p{font-style:italic;color:var(--dim)}

/* --- JOURNAL --- */
.journal-container{flex-grow:1;padding:8px clamp(6px,2vw,24px) 40px;display:flex;flex-direction:column;gap:16px}
.article-item{display:block;padding:28px 30px;border-radius:var(--radius);text-decoration:none;color:inherit;
  background:var(--glass);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow);transition:transform .3s,background .3s}
.article-item:hover{transform:translateY(-3px);background:rgba(255,255,255,.09)}
.article-title{font-family:'Syncopate',sans-serif;font-size:1.15rem;letter-spacing:.5px;margin:10px 0 12px}
.article-excerpt{font-size:.95rem;font-weight:300;color:var(--muted);margin-bottom:16px}
.read-more{font-size:.65rem;text-transform:uppercase;letter-spacing:2px;font-weight:600;color:var(--muted)}
.article-item:hover .read-more{color:var(--blue)}

/* --- CONTACT centré --- */
.contact-center{flex-grow:1;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(50px,9vh,120px) clamp(6px,2vw,24px)}
.contact-center h1{margin-bottom:clamp(30px,5vh,50px)}
.contact-center form{width:100%;max-width:540px;text-align:left;padding:30px;border-radius:var(--radius);
  background:var(--glass);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.06)}
.contact-center .submit-btn{margin:6px auto 0;display:flex}
.contact-center #responseMsg{text-align:center}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(30px,6vh,52px)}
.socials a{display:inline-flex;align-items:center;padding:12px 22px;border-radius:999px;color:var(--text);
  text-decoration:none;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-brd);transition:background .25s,transform .12s}
.socials a:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

/* Champs de formulaire (verre) */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:.55rem;text-transform:uppercase;letter-spacing:2px;color:var(--muted);margin-bottom:8px}
.form-group input,.form-group textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-brd);
  color:var(--text);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:.95rem;
  transition:border-color .2s,box-shadow .2s,background .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);
  background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(56,168,239,.18)}
.form-group textarea{min-height:130px;resize:vertical}
.hp-field{position:absolute;left:-9999px}
.submit-btn{display:inline-flex;align-items:center;gap:12px;background:var(--blue);color:#031017;border:none;
  border-radius:999px;padding:15px 30px;font-family:inherit;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:2px;cursor:pointer;transition:filter .2s}
.submit-btn:hover{filter:brightness(1.08)}
.loader{width:14px;height:14px;border:2px solid rgba(3,16,23,.35);border-top-color:#031017;border-radius:50%;
  display:none;animation:spin .8s linear infinite}
.submit-btn.loading .loader{display:block}
.submit-btn.loading .btn-text{opacity:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- PAGE PROJET --- */
header.project-hero{padding:clamp(56px,10vh,100px) clamp(6px,2vw,24px) 30px}
.project-category{font-size:.6rem;text-transform:uppercase;letter-spacing:5px;color:var(--dim);margin-bottom:18px;display:block}
.video-container{width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);margin:0 clamp(6px,2vw,24px)}
.video-container{width:auto}
.video-container iframe{width:100%;height:100%;border:none}
.project-details{display:grid;grid-template-columns:1fr 2fr;gap:20px;padding:34px clamp(6px,2vw,24px)}
.specs-column{padding:30px;border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow);height:fit-content}
.description-column{padding:8px 10px}
.spec-item{margin-bottom:26px}
.spec-item:last-child{margin-bottom:0}
.spec-label{font-size:.55rem;text-transform:uppercase;letter-spacing:2px;color:var(--dim);display:block;margin-bottom:6px}
.spec-value{font-size:.9rem;font-weight:500;text-transform:uppercase}
.project-description{font-size:1.08rem;font-weight:300;color:#cdcdd4;max-width:700px}
.project-description p{margin-bottom:24px}
.project-description b{color:var(--text);font-weight:500}
.next-project{padding:70px clamp(6px,2vw,24px);text-align:center}
.next-link{font-family:'Syncopate',sans-serif;font-size:clamp(1.5rem,4vw,3rem);text-decoration:none;color:var(--text);
  text-transform:uppercase;letter-spacing:-1px;transition:opacity .3s}
.next-link:hover{opacity:.45}

/* --- MENTIONS --- */
.main-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:8px clamp(6px,2vw,24px) 40px;flex-grow:1}
.main-grid .column{padding:32px;border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow)}
.back-btn{display:inline-block;text-decoration:none;color:var(--muted);font-size:.65rem;text-transform:uppercase;
  letter-spacing:2px;font-weight:600;margin-bottom:24px}
.back-btn:hover{color:var(--text)}
.legal-text{margin-bottom:26px;font-size:.95rem;font-weight:300;color:var(--muted);line-height:1.7}
.legal-text:last-child{margin-bottom:0}
.legal-text strong{display:block;color:var(--text);font-weight:600;font-size:.8rem;text-transform:uppercase;
  letter-spacing:1px;margin-bottom:8px}
.legal-text a{color:var(--blue)}

/* --- FOOTER flottant --- */
footer{margin:20px 0;padding:26px clamp(18px,3vw,28px);display:flex;justify-content:space-between;align-items:center;
  font-size:.6rem;color:var(--dim);letter-spacing:2px;
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-brd);border-radius:var(--radius)}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--text)}

/* --- RESPONSIVE --- */
@media(max-width:900px){
  .projects-grid{grid-template-columns:1fr}
  .project-details{grid-template-columns:1fr}
  .main-grid{grid-template-columns:1fr}
}
@media(max-width:850px){
  .nav-links{display:none}
  .burger{display:block}
  footer{flex-direction:column;gap:14px;text-align:center}
}