/* ============================================================
   atelier ALTO — design tokens
   ============================================================ */
:root{
  --ink:        #121212;
  --paper:      #ffffff;
  --paper-soft: #fafafa;
  --line:       #e3e3e3;
  --gray-mid:   #8a8a8a;
  --gray-dark:  #4a4a4a;

  --font-display: 'Hanken Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --unit: 8px;
  --gutter: 32px;
  --margin-desktop: 64px;
  --margin-mobile: 20px;
  --container-max: 1440px;

  --header-h: 84px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
#portfolio, #services, #vision, #contact{ scroll-margin-top:var(--header-h); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-0.02em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  html{ scroll-behavior:auto; }
}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gray-dark);
}

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
#splash{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-logo-wrap{
  position:relative;
  width:clamp(293px, 48.8vw, 659px);
  height:clamp(293px, 48.8vw, 659px);
}
.splash-logo{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;
  transform:scale(.82) rotate(-16deg);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.splash-logo.in{ opacity:1; transform:scale(1) rotate(0deg); }

/* ============================================================
   HEADER
   ============================================================ */
#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 var(--margin-desktop);
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
#siteHeader.scrolled{
  border-bottom-color:var(--line);
}
.header-logo{
  display:flex; align-items:center;
  justify-self:start;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events:none;
}
.header-logo img{
  height:30px; width:auto;
}
#siteHeader.scrolled .header-logo{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.header-nav{
  display:flex; gap:40px;
}
.header-nav a{
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  position:relative;
  padding-bottom:4px;
}
.header-nav a::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.header-nav a:hover::after{ transform:scaleX(1); }

.nav-toggle{
  display:none;
  justify-self:end;
  width:32px; height:32px;
  background:none; border:none;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav-toggle span{
  width:22px; height:1px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}

/* ============================================================
   HERO
   ============================================================ */
#hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 40px) var(--margin-desktop) 80px;
  max-width:var(--container-max);
  margin:0 auto;
  position:relative;
  text-align:center;
}
.hero-lockup{
  margin-top:24px;
  width:clamp(293px, 48.8vw, 659px);
}
.hero-lockup-svg{
  display:block;
  width:100%;
  height:auto;
}
.hero-name-link{
  cursor:pointer;
  transition:opacity .2s var(--ease);
}
.hero-name-link:hover{ opacity:0.6; }
.hero-sub{
  margin-top:40px;
  max-width:none;
  margin-left:auto; margin-right:auto;
  font-size:clamp(14px, 1.9vw, 18px);
  color:var(--gray-dark);
  white-space:nowrap;
}
.scroll-cue{
  position:absolute; bottom:40px; left:50%;
  transform:translateX(-50%);
  width:1px; height:56px; background:var(--line);
  overflow:hidden;
}
.scroll-cue span{
  position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--ink);
  animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ top:-100%; }
  50%{ top:0; }
  100%{ top:100%; }
}

/* ============================================================
   SECTION HEAD (shared)
   ============================================================ */
.section-head{
  padding:120px var(--margin-desktop) 56px;
  max-width:var(--container-max);
  margin:0 auto;
}
.section-head h2{
  margin-top:16px;
  font-size:clamp(28px, 3.4vw, 40px);
  max-width:640px;
}

/* ============================================================
   PORTFOLIO
   Une photo de couverture par projet, légende dessous.
   Le clic ouvre le lightbox avec toutes les photos du projet.
   ============================================================ */
#portfolio{ padding-bottom:40px; }
#portfolioGrid{
  padding:0 var(--margin-desktop);
  max-width:var(--container-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:0.5mm;
  row-gap:64px;
  background:var(--paper);
}
.project-card{
  display:flex; flex-direction:column;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.project-card.in-view{
  opacity:1;
  transform:translateY(0);
}
.project-cover{
  aspect-ratio:1 / 1;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  background:var(--paper-soft);
  border:none;
  padding:0;
  width:100%;
}
.project-cover img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.02);
  transform:scale(1.001);
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
.project-cover:hover img{
  transform:scale(1.045);
  filter:grayscale(0) contrast(1.02);
}
.project-cover.placeholder{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(135deg, var(--paper) 0 12px, var(--paper-soft) 12px 24px);
  border:1px solid var(--line);
}
.placeholder-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gray-mid);
  text-align:center;
  padding:0 16px;
}
.project-caption{
  margin-top:20px;
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-mono);
}
.cap-num{ font-size:13px; color:var(--gray-mid); }
.cap-title{
  font-family:var(--font-display); font-weight:600; font-size:16px;
  letter-spacing:-0.01em; color:var(--ink); text-transform:none;
}
.cap-tag{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-mid);
}

/* ============================================================
   STUDIO
   ============================================================ */
#studio{ padding:120px var(--margin-desktop); max-width:var(--container-max); margin:0 auto; }
.studio-grid{
  display:block;
}
.studio-label{
  border-bottom:2px solid var(--ink);
  padding-bottom:16px;
  margin-bottom:32px;
}
.studio-label h2{ margin-top:0; font-size:clamp(20px,2.2vw,28px); line-height:0.8; max-width:none; }
.studio-text{
  columns:3;
  column-gap:32px;
  column-rule:1px solid var(--line);
  font-size:18px; color:var(--gray-dark); max-width:none;
}
.studio-text h3{ font-size:22px; color:var(--ink); margin-top:0; margin-bottom:12px; break-inside:avoid; break-after:avoid; }
.studio-text p{
  font-size:16px; line-height:1.7; text-align:left; margin:0 0 20px;
  hyphens:none; -webkit-hyphens:none; -ms-hyphens:none;
}
.studio-pull{
  width:100%;
  margin:32px 0;
  padding:20px 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  font-size:20px;
  line-height:1.5;
  color:var(--ink);
  font-style:italic;
  text-align:center;
}
.studio-pull::before{ content:"« "; }
.studio-pull::after{ content:" »"; }
.section-modal-panel.vision-panel{
  max-width:1200px;
}

/* ============================================================
   ÉMISSION RADIO
   ============================================================ */
.radio-episode{
  max-width:560px;
}
.radio-intro{
  font-size:16px;
  line-height:1.7;
  color:var(--gray-dark);
  margin-bottom:32px;
  white-space:nowrap;
}
.radio-intro a{
  color:var(--ink);
  text-decoration:underline;
}
.radio-episode-title{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:20px;
}
.radio-player{
  width:100%;
}
.radio-episode-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.radio-episode-item .radio-episode-title{
  margin-bottom:12px;
}

/* ============================================================
   ÉQUIPE (Vincent & Thomas)
   ============================================================ */
.team-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gutter);
}
.team-bio h3{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.team-bio p{
  font-size:16px;
  line-height:1.7;
  color:var(--gray-dark);
  text-align:left;
}
.team-bio p + p{ margin-top:20px; }

/* ============================================================
   SERVICES
   ============================================================ */
#services{ background:var(--paper-soft); padding-bottom:120px; }
.services-list{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--margin-desktop);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gutter);
}
.service{
  border-top:1px solid var(--line);
  padding-top:24px;
}
.service-num{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--gray-mid);
}
.service h3{
  margin-top:16px; font-size:22px;
}
.service p{
  margin-top:16px; color:var(--gray-dark); font-size:15px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, auto);
  grid-auto-flow:column;
  column-gap:32px;
  row-gap:40px;
}
.service-block:nth-child(n+4){
  border-left:1px solid var(--line);
  padding-left:31px;
}
.service-block h3{
  display:flex;
  align-items:flex-end;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  min-height:51px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:16px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.service-items{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.service-items li{
  color:var(--gray-dark);
  font-size:15px;
}

/* ============================================================
   CONTACT
   ============================================================ */
#contact{ padding:120px var(--margin-desktop) 100px; max-width:var(--container-max); margin:0 auto; }
.contact-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:var(--gutter);
}
.contact-info h2{ margin-top:16px; font-size:clamp(28px,3.4vw,40px); max-width:420px; }
.contact-details{ margin-top:40px; display:flex; flex-direction:column; gap:18px; }
.contact-details li{
  display:flex; flex-direction:column; gap:2px;
  border-top:1px solid var(--line);
  padding-top:12px;
}
.contact-details span{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-mid);
}
.contact-details a{ font-size:16px; }
.contact-details a:hover{ text-decoration:underline; }

.contact-map{
  margin-top:56px;
  width:100%;
  border:1px solid var(--line);
  line-height:0;
}
.contact-map iframe{
  display:block;
  width:100%;
  height:320px;
  border:none;
  filter:grayscale(1) contrast(1.05);
}

.contact-form{ display:flex; flex-direction:column; gap:28px; max-width:520px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-mid);
}
.field input, .field textarea{
  border:none; border-bottom:2px solid var(--line);
  background:transparent;
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  padding:8px 0;
  resize:vertical;
  transition:border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus{
  outline:none; border-bottom-color:var(--ink);
}
.btn-primary{
  align-self:flex-start;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink);
  padding:14px 32px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.btn-primary:hover{ background:var(--paper); color:var(--ink); }
.form-note{ font-size:12px; color:var(--gray-mid); }

/* ============================================================
   FOOTER
   ============================================================ */
#siteFooter{
  border-top:1px solid var(--line);
  padding:56px var(--margin-desktop) 40px;
  display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center;
}
.footer-mark{ width:36px; height:36px; }
.footer-nav{ display:flex; gap:32px; }
.footer-nav a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
}
.footer-nav a:hover{ text-decoration:underline; }
.footer-legal{ font-size:12px; color:var(--gray-mid); }

/* ============================================================
   FENÊTRES MODALES (Services / Notre vision / Contact)
   ============================================================ */
.section-modal{
  position:fixed; inset:0; z-index:300;
  background:rgba(18,18,18,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:40px var(--margin-desktop);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.section-modal.open{ opacity:1; visibility:visible; }
.section-modal-panel{
  position:relative;
  background:var(--paper);
  width:100%; max-width:960px; max-height:85vh;
  overflow-y:auto;
  padding:var(--margin-mobile);
}
.section-modal .section-head,
.section-modal .studio-grid,
.section-modal .contact-grid,
.section-modal .services-list{
  padding-left:0; padding-right:0; max-width:none; margin-left:0; margin-right:0;
}
.section-modal .section-head{ padding-top:0; padding-bottom:40px; }
.section-modal-close{
  position:absolute; top:2px; left:2px;
  width:18px; height:18px;
  background:none; border:none;
  font-size:16px; line-height:1; color:var(--ink);
}
.section-modal-panel.photo-modal-panel{
  max-width:560px;
  width:auto;
  max-height:88vh;
  overflow:hidden;
  box-sizing:border-box;
  padding:20px;
}
.photo-modal-img{
  display:block;
  width:100%;
  max-height:82vh;
  object-fit:cover;
}
.section-modal-close.photo-modal-close{
  top:2px; left:2px; right:auto;
  width:18px; height:18px;
  font-size:16px;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(18,18,18,0.55);
  display:flex; align-items:center; justify-content:center;
  padding:40px 0;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lb-outer{
  width:100%;
  max-width:var(--container-max);
  padding:0 var(--margin-desktop);
  margin:0 auto;
  box-sizing:border-box;
}
.lb-panel{
  position:relative;
  width:100%;
  display:flex; align-items:center; justify-content:center;
}
.lb-frame{
  position:relative;
  width:min(100%, calc(78vh * 3 / 2)); /* largeur plafonnée pour que la hauteur ne dépasse jamais 78vh, tout en gardant le ratio 3:2 */
  aspect-ratio:3 / 2; /* format fixe pour toutes les photos — à garder cohérent une fois les images recadrées */
  line-height:0;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
.lb-stage{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  touch-action:pan-y;
  user-select:none;
}
.lb-stage img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.lb-stage .placeholder-slide{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  background:repeating-linear-gradient(135deg, rgba(0,0,0,0.03) 0 12px, transparent 12px 24px);
}
.lb-stage .placeholder-slide span{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray-mid);
}

/* SLIDE TEXTE (fond blanc, avant les photos) */
.lb-text-slide{
  position:relative;
  width:100%; height:100%;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  padding:48px 64px;
  box-sizing:border-box;
  overflow:hidden;
}
.lb-stage .lb-text-slide-mark{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:32%; height:auto; max-width:240px;
  object-fit:contain;
  opacity:0.40;
  filter:invert(1) brightness(2);
  pointer-events:none;
}
.lb-text-slide p{
  position:relative; z-index:1;
  max-width:640px;
  font-family:var(--font-body); font-size:18px; line-height:1.6;
  color:var(--paper);
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
  text-align:left;
  margin:0;
}

/* SLIDER AVANT / APRÈS (comparaison de deux photos superposées) */
.lb-compare{
  position:relative; width:100%; height:100%;
  cursor:ew-resize; user-select:none; touch-action:none;
}
.lb-compare img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
  display:block;
}
.lb-compare-before{
  clip-path:inset(0 calc(100% - var(--cmp-pos, 50%)) 0 0);
}
.lb-compare-handle{
  position:absolute; top:0; bottom:0;
  left:var(--cmp-pos, 50%);
  width:2px;
  background:var(--paper);
  transform:translateX(-50%);
  pointer-events:none;
}
.lb-compare-handle::before{
  content:'';
  position:absolute; top:50%; left:50%;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--paper);
  transform:translate(-50%,-50%);
  box-shadow:0 1px 6px rgba(0,0,0,0.35);
}
.lb-compare-handle::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:20px; height:20px;
  transform:translate(-50%,-50%);
  background-image:url('assets/logo-alto-wordmark.svg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}
.lb-compare-label{
  position:absolute; bottom:12px; z-index:2;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--paper);
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
  pointer-events:none;
}
.lb-compare-label.before{ left:12px; }
.lb-compare-label.after{ right:12px; }
.lb-close{
  position:absolute; top:8px; left:8px; z-index:2;
  width:18px; height:18px;
  background:none; border:none; color:var(--paper);
  font-size:16px; line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.lb-arrow{
  position:absolute; top:50%; z-index:2; transform:translateY(-50%);
  background:none; border:none; color:var(--paper);
  font-size:96px; line-height:1; padding:12px 18px;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
  transition:opacity .2s var(--ease);
}
.lb-arrow:hover{ opacity:0.6; }
.lb-prev{ left:8px; }
.lb-next{ right:8px; }
.lb-caption{
  position:absolute; bottom:0; left:0; right:0;
  padding:24px 16px 14px;
  text-align:center;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.85);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  :root{ --margin-desktop:20px; }
  .header-nav{
    position:fixed; top:var(--header-h); left:0; right:0;
    background:var(--paper);
    flex-direction:column; gap:0;
    border-top:1px solid var(--line);
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
  }
  .header-nav.open{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .header-nav a{
    padding:18px 20px; border-bottom:1px solid var(--line);
  }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav-toggle.open span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

  .hero-sub{ font-size:clamp(11px, 3.3vw, 18px); }

  #portfolioGrid{ grid-template-columns:1fr; row-gap:48px; }
  .project-cover{ aspect-ratio:1 / 1; }

  .contact-grid, .team-grid{ grid-template-columns:1fr; gap:40px; }
  .studio-text{ columns:1; }
  .services-grid{ grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row; }
  .service-block:nth-child(n+4){ border-left:none; padding-left:0; }
  .services-list{ grid-template-columns:1fr; gap:56px; }

  .lb-arrow{ font-size:68px; padding:8px 10px; }
}

@media (max-width:360px){
  /* sécurité anti-débordement sur très petits écrans */
  .hero-sub{ white-space:normal; }
}