/* TiboPhoto — feuille de style principale */
:root{
  --ink:#111111; --ink-2:#3D3A35; --muted:#6B665E; --line:#DDD8D0;
  --cream:#F3F1ED; --cream-2:#E9E5DE; --card:#F8F6F2;
  --red:#D7141C; --red-dark:#B3121A; --red-soft:#F2555B; --band:#6E1418;
  --dark:#111111; --dark-2:#0E0E0E; --dark-line:#2E2C29;
  --head:'Archivo',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --pad:48px; --max:1280px; --header:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);line-height:1.5}
img,video{max-width:100%;display:block}
a{color:inherit}
a:hover{color:var(--red-dark)}
button{font:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto}
.pad{padding-left:var(--pad);padding-right:var(--pad)}
section[id]{scroll-margin-top:calc(var(--header) + 8px)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px}

/* ---------- type ---------- */
.eyebrow{margin:0;font:600 13px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--red-dark)}
.dark .eyebrow{color:var(--red-soft)}
.h1{margin:0;font:900 clamp(52px,7.4vw,104px)/.92 var(--head);letter-spacing:-.02em;text-transform:uppercase}
.h2{margin:0;font:800 clamp(38px,4.4vw,56px)/1 var(--head);text-transform:uppercase;letter-spacing:-.01em}
.lead{margin:0;font-size:18px;line-height:1.65;color:var(--ink-2)}
.dark .lead{color:#C9C4BC}
.more{font-weight:600;font-size:16px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font:600 15px var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .2s ease,background .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark);color:#fff}
.btn-dark{background:var(--ink);color:var(--cream)}.btn-dark:hover{color:#fff;background:#000}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{color:var(--ink)}
.btn-line{border:1.5px solid currentColor;background:transparent}
.btn-line-light{border:1.5px solid rgba(243,241,237,.6);color:var(--cream);background:transparent}.btn-line-light:hover{color:#fff;border-color:#fff}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(243,241,237,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header nav{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a.nl{font:500 15px var(--body);text-decoration:none;color:var(--ink)}
.nav-links a.nl.active,.nav-links a.nl.hot{color:var(--red-dark);font-weight:600}
.menu-btn{display:none;width:48px;height:48px;border:0;background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.page-dark .site-header{background:rgba(14,14,14,.88);border-bottom-color:#2A2826}
.page-dark .nav-links a.nl,.page-dark .menu-btn{color:var(--cream)}
.page-dark .nav-links a.nl.active{color:var(--red-soft)}
.page-dark .btn-dark{background:var(--cream);color:var(--ink)}
.mobile-menu{display:none}

/* ---------- hero ---------- */
.hero{position:relative;height:calc(min(100svh,860px)*3);background:var(--dark-2);margin-top:calc(var(--header)*-1 - 1px);view-timeline-name:--hero}
.hero-stage{position:sticky;top:0;height:min(100svh,860px);overflow:hidden}
.reveal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:0 24px;text-align:center;color:var(--cream)}
.reveal img{width:min(460px,72vw);height:auto}
.reveal .eyebrow{color:var(--red-soft);letter-spacing:.24em}
.half{position:absolute;inset:0}
.half-l{clip-path:inset(0 50% 0 0)}
.half-r{clip-path:inset(0 0 0 50%)}
.track{display:flex;gap:12px;height:100%;width:max-content;animation:marquee 52s linear infinite}
.slide{flex:0 0 auto;width:min(40vw,560px);height:100%;background:#1C1C1C}
.slide img{width:100%;height:100%;object-fit:cover}
.intro{position:absolute;left:0;right:0;bottom:0;padding-top:160px;padding-bottom:56px;color:var(--cream);background:linear-gradient(to top,rgba(10,10,10,.8),rgba(10,10,10,0));pointer-events:none}
.intro .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.intro .eyebrow{color:var(--red-soft)}
.scroll-hint{font:500 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#CFCAC2}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes openL{to{transform:translateX(-55%)}}
@keyframes openR{to{transform:translateX(55%)}}
@keyframes revealIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-48px)}}
@supports (animation-timeline: view()){
  .half-l{animation:openL linear both;animation-timeline:--hero;animation-range:contain 18% contain 72%}
  .half-r{animation:openR linear both;animation-timeline:--hero;animation-range:contain 18% contain 72%}
  .reveal{animation:revealIn linear both;animation-timeline:--hero;animation-range:contain 35% contain 80%}
  .intro{animation:fadeOut linear both;animation-timeline:--hero;animation-range:contain 0% contain 20%}
}
/* Navigateurs sans animation au défilement : version JS (classe .js-scroll) ou statique */
.hero.no-sda{height:auto}
.hero.no-sda .hero-stage{position:relative}
.hero.js-scroll .half-l{transform:translateX(calc(var(--p,0)*-55%))}
.hero.js-scroll .half-r{transform:translateX(calc(var(--p,0)*55%))}
.hero.js-scroll .reveal{opacity:var(--r,0);transform:scale(calc(.82 + var(--r,0)*.18))}
.hero.js-scroll .intro{opacity:calc(1 - var(--i,0));transform:translateY(calc(var(--i,0)*-48px))}

/* ---------- sections ---------- */
.section{padding-top:112px;padding-bottom:112px}
.dark{background:var(--dark);color:var(--cream)}
.split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px 40px}
.stack{display:flex;flex-direction:column;gap:20px}

/* photobooth */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #3A3733;font:500 14px var(--body);color:#E6E1D9}
.price{font-size:15px;color:#B8B2A8}
.price strong{font:800 28px var(--head);color:var(--cream)}
.ring-dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:3px solid var(--red);vertical-align:-1px;margin-right:10px}
.pb-visual{position:relative;margin-top:64px}
.pb-photo{width:calc(100% - 230px);height:560px;border-radius:24px;overflow:hidden;background:#1C1C1C}
.pb-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.pb-booth{position:absolute;right:40px;bottom:0;height:660px;width:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(255,255,255,.25))}
.included{display:flex;flex-wrap:wrap;gap:16px 36px;margin:0;padding:28px 0 0;list-style:none;border-top:1px solid var(--dark-line);font:600 17px var(--body)}
.included li{display:flex;align-items:center;gap:10px}

/* à propos */
.about{display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.about-photo{flex:1 1 420px;height:480px;border-radius:20px;overflow:hidden;background:#2B2926}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about-text{flex:1 1 480px}

/* réalisations */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.project{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:14px}
.project .ph{aspect-ratio:4/3.6;border-radius:16px;overflow:hidden;background:#1C1C1C}
.project img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.project:hover img{transform:scale(1.04)}
.project .meta{display:flex;justify-content:space-between;gap:8px}
.project strong{font:700 19px var(--head)}
.project span{font-size:14px;color:var(--muted)}

/* services */
.services-bg{background:var(--cream-2)}
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc{background:var(--card);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:20px;transition:background .3s ease,transform .3s ease,color .3s ease}
.svc *{transition:color .3s ease,border-color .3s ease}
.svc h3{margin:0;font:800 26px var(--head);text-transform:uppercase}
.svc .from{margin:0;font-size:14px;color:var(--muted)}
.svc .from strong{display:block;margin-top:4px;font:800 34px var(--head);color:var(--ink)}
.svc ul{margin:0;padding:20px 0 0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-2);border-top:1px solid var(--line)}
.svc:hover{background:var(--ink);transform:translateY(-4px)}
.svc:hover,.svc:hover *{color:var(--cream)!important}
.svc:hover ul{border-color:#3A3733}

/* étapes */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.step{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--ink);padding-top:24px}
.step span{font:800 15px var(--head);color:var(--red-dark)}
.step h3{margin:0;font:700 22px var(--head)}
.step p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* témoignages */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.quote{margin:0;background:#fff;border-radius:20px;padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.quote blockquote{margin:0;font:500 20px/1.5 var(--body)}
.quote figcaption{font-size:14px;color:var(--muted)}
.quote figcaption strong{color:var(--ink)}
.logos{display:flex;flex-wrap:wrap;gap:40px;align-items:center;color:var(--muted);font:800 22px var(--head);letter-spacing:.08em}

/* CTA */
.cta{position:relative;overflow:hidden;background:var(--band);color:#fff}
.cta .ring{position:absolute;right:-140px;top:50%;width:520px;height:520px;margin-top:-260px;border-radius:50%;border:90px solid var(--red);opacity:.9}
.cta .split{position:relative}
.cta-actions{display:flex;flex-direction:column;gap:16px;flex:0 1 340px}

/* footer */
.site-footer{background:var(--dark);color:#B8B2A8;padding-top:56px;padding-bottom:40px}
.site-footer .top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px}
.site-footer img{height:52px;width:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:24px 28px;font-size:15px}
.site-footer nav a{color:#D6D1C9;text-decoration:none}.site-footer nav a:hover{color:#fff}
.site-footer .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:13px;border-top:1px solid var(--dark-line);padding-top:24px;margin-top:40px}
.page-dark .site-footer{background:#000;border-top:1px solid #1F1D1B}

/* ---------- pages projet / galerie ---------- */
.page-head{padding-top:48px;padding-bottom:40px}
.back{font-size:15px;font-weight:600;text-decoration:none}
.proj-desc{flex:0 1 440px;display:flex;flex-direction:column;gap:14px}
.proj-desc p{margin:0}
.client{font-size:14px;color:var(--muted)}.client strong{color:var(--ink)}
.page-dark .client{color:#8F8980}.page-dark .client strong{color:var(--cream)}
.badge{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--body)}
.badge i{width:10px;height:10px;border-radius:50%;border:2.5px solid var(--red)}
.zoom{display:block;width:100%;border:0;padding:0;margin:0 0 14px;cursor:zoom-in;break-inside:avoid;background:#1C1C1C;border-radius:14px;overflow:hidden}
.zoom img{width:100%;height:auto;transition:transform .5s ease}
.zoom:hover img{transform:scale(1.03)}
.cover{height:min(72vh,720px);border-radius:24px;margin:0}
.cover img{height:100%;object-fit:cover}
.masonry{columns:3 300px;column-gap:14px}
.next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;border-top:2px solid var(--ink);padding-top:40px}
.next a.np{text-decoration:none;display:flex;align-items:center;gap:24px}
.next a.np img{width:140px;height:96px;object-fit:cover;border-radius:12px}
.next small{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.next b{display:block;font:800 clamp(24px,3vw,36px) var(--head);text-transform:uppercase}
.page-dark{background:var(--dark-2);color:var(--cream)}
.page-dark .lead{color:#C9C4BC}
.page-dark .next{border-top:1px solid var(--dark-line)}
.page-dark .next small{color:#8F8980}
.page-dark .zoom{background:#000}
.page-dark a:hover{color:var(--red-soft)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{min-height:44px;padding:0 20px;border-radius:999px;font:600 14px var(--body);cursor:pointer;background:transparent;color:var(--ink);border:1.5px solid #CFC9C0}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.zoom[hidden]{display:none}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,10,10,.96);display:flex;align-items:center;justify-content:center;padding:72px 88px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(243,241,237,.4);background:rgba(17,17,17,.6);color:var(--cream);cursor:pointer;z-index:2}
.lb-btn:hover{background:var(--red);border-color:var(--red)}
.lb-close{top:18px;right:18px}.lb-prev{left:18px;top:50%;margin-top:-26px}.lb-next{right:18px;top:50%;margin-top:-26px}
.lb-count{position:absolute;bottom:24px;left:0;right:0;text-align:center;font:500 14px var(--body);color:#B8B2A8}

/* ---------- popup ---------- */
.popup{position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.popup[hidden]{display:none}
.popup-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}
.popup-video{height:min(72vh,640px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#0B6B3A;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.popup-video video{width:100%;height:100%;object-fit:cover}
.popup-close{position:absolute;top:-14px;right:-14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.popup-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* ---------- contact ---------- */
.contact{display:flex;flex-wrap:wrap;gap:72px}
.contact-info{flex:1 1 420px;display:flex;flex-direction:column;gap:28px}
.info-list{border-top:1px solid #D6D1C9;margin-top:12px}
.info-list div{display:flex;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid #D6D1C9}
.info-list span{font-size:14px;color:var(--muted)}
.form{flex:1 1 520px;background:#fff;border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:600 13px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{font:400 16px var(--body);color:var(--ink);background:#fff;border:1.5px solid #D6D1C9;border-radius:12px;padding:14px 16px;min-height:48px;width:100%}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red-dark);outline-offset:1px;border-color:var(--red-dark)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:15px;font-weight:600}
.form-status.ok{color:#1E7A3C}.form-status.err{color:var(--red-dark)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-links .nl{display:none}
  .menu-btn{display:inline-flex}
  .mobile-menu{position:fixed;inset:var(--header) 0 0 0;z-index:39;background:var(--cream);padding:24px var(--pad);flex-direction:column;gap:6px}
  .mobile-menu.open{display:flex}
  .mobile-menu a{font:800 32px var(--head);text-transform:uppercase;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .page-dark .mobile-menu{background:var(--dark-2)}
  .page-dark .mobile-menu a{color:var(--cream);border-color:#2A2826}
  .pb-photo{width:100%}
  .pb-booth{display:none}
  .steps{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--pad:20px;--header:68px}
  .logo img{height:36px}
  .nav-links .btn{min-height:42px;padding:0 18px;font-size:14px}
  .section{padding-top:80px;padding-bottom:80px}
  .projects,.services,.grid2{grid-template-columns:1fr}
  .pb-photo{height:380px}
  .about-photo{height:360px}
  .form{padding:24px}
  .lightbox{padding:64px 12px}
  .lb-prev,.lb-next{top:auto;bottom:14px;margin-top:0}
  .slide{width:72vw}
  .cta .ring{width:320px;height:320px;margin-top:-160px;border-width:56px;right:-160px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation:none}
}