/* ============================================================
   MirallesElec — public site (server-rendered from the CMS)
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:84px;}
body{background:#0d0d0e;color:#ece9e3;font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
input,textarea,button{font-family:inherit;}
::selection{background:#d63b27;color:#fff;}

@keyframes rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* ---------- Interactions ---------- */
.nav-link{transition:color .2s;}
.nav-link:hover{color:#ece9e3;}
.btn-primary{transition:background .2s;}
.btn-primary:hover{background:#b8311f;}
.btn-ghost{transition:border-color .2s;}
.btn-ghost:hover{border-color:#d63b27;}
.lang-link{transition:color .2s;}
.lang-link:hover{color:#ece9e3;}
.contact-link{transition:color .2s;}
.contact-link:hover{color:#d63b27;}
.field{transition:border-color .2s;}
.field:focus{border-color:#d63b27;}
.service-row{transition:background .25s,padding .25s;}
.service-row:hover{background:#141417;padding-left:30px;}
.work-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity 1.1s ease;}
.work-card:hover img{transform:scale(1.05);}
.work-card.has-gallery{cursor:pointer;}
.work-card.has-gallery:focus-visible{outline:2px solid #d63b27;outline-offset:2px;}

/* ---------- Heroes ---------- */
.hero-cine{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-edit{min-height:100vh;display:grid;grid-template-columns:1.08fr 0.92fr;padding-top:72px;}
.hero-tech{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 6vw 80px;text-align:center;overflow:hidden;}

/* ---------- Grids ---------- */
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:start;}
.service-row{display:grid;grid-template-columns:84px 1fr;gap:24px;align-items:center;padding:30px 18px;border-bottom:1px solid rgba(255,255,255,0.1);}
.service-row-inner{display:grid;grid-template-columns:minmax(180px,0.7fr) 1.3fr;gap:24px;align-items:baseline;}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
.atelier-grid{display:grid;grid-template-columns:0.95fr 1.05fr;align-items:stretch;min-height:560px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.specs-row{display:flex;gap:44px;margin-top:64px;padding-top:30px;border-top:1px solid rgba(255,255,255,0.1);flex-wrap:wrap;}

/* ---------- Nav links ---------- */
.nav-links{display:none;align-items:center;gap:38px;font-size:12.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:#a6a39e;}
@media (min-width:920px){.nav-links{display:flex;}}

/* ---------- Missing-image fallback ---------- */
.img-fallback{background-image:repeating-linear-gradient(135deg,#1a1a1d 0 15px,#151517 15px 30px)!important;background-size:auto!important;}
.work-card .card-code-center{display:none;}
.work-card.is-placeholder .card-code-center{display:flex;}

/* ---------- Réalisations: rolling cards + full gallery overlay ---------- */
.work-slides{position:absolute;inset:0;}
.work-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
.work-slides img.is-active{opacity:1;}
.work-count{position:absolute;right:18px;top:16px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.1em;color:#e7e4de;background:rgba(13,13,14,0.55);backdrop-filter:blur(6px);padding:5px 9px;border:1px solid rgba(255,255,255,0.12);pointer-events:none;}

.work-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,8,9,0.96);display:flex;flex-direction:column;animation:overlay-in .25s ease both;}
.work-overlay[hidden]{display:none;}
@keyframes overlay-in{from{opacity:0;}to{opacity:1;}}
.work-overlay-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 6vw;border-bottom:1px solid rgba(255,255,255,0.1);background:rgba(8,8,9,0.85);backdrop-filter:blur(8px);}
.work-overlay-title{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,34px);color:#f1eee8;line-height:1;}
.work-overlay-meta{margin-top:6px;font-size:13px;color:#a6a39e;font-family:'Space Mono',monospace;}
.work-overlay-close{flex:none;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#ece9e3;background:transparent;border:1px solid rgba(255,255,255,0.25);padding:10px 14px;cursor:pointer;transition:border-color .2s,color .2s;}
.work-overlay-close:hover{border-color:#d63b27;color:#d63b27;}
.work-overlay-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:32px 6vw 80px;}
.work-overlay-scroll figure{max-width:1100px;margin:0 auto 28px;}
.work-overlay-scroll img{width:100%;height:auto;border:1px solid rgba(255,255,255,0.1);background:#121214;}
.work-overlay-scroll figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:10px;font-family:'Space Mono',monospace;font-size:12px;color:#a6a39e;}
.work-overlay-scroll figcaption .n{color:#d63b27;white-space:nowrap;}
body.overlay-open{overflow:hidden;}

/* ============================================================ Responsive */
@media (max-width:920px){
  .hero-edit{grid-template-columns:1fr;}
  .hero-edit .hero-media{min-height:52vh;order:-1;}
  .contact-grid{grid-template-columns:1fr;gap:40px;}
  .atelier-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:26px;}
  .work-grid{grid-template-columns:1fr;}
  .service-row{grid-template-columns:44px 1fr;gap:14px;padding:24px 14px;}
  .service-row:hover{padding-left:22px;}
  .service-row-inner{grid-template-columns:1fr;gap:8px;}
  .specs-row{gap:28px;margin-top:44px;}
}
@media (max-width:520px){
  .form-row{grid-template-columns:1fr;}
  .work-overlay-bar{padding:16px 16px;}
  .work-overlay-scroll{padding:16px 16px 60px;}
}