/*
Theme Name: Sento Ink
Theme URI: https://sentoink.com
Author: Sento Ink
Description: Black & Grey Realism Tattoo Artist Calgary — Thème custom pour Sento Ink
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: sento-ink
*/

/* ============================================================
   RESET & VARIABLES
============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#080808;
  --ink2:#0f0f0f;
  --ink3:#161616;
  --ink4:#1e1e1e;
  --silver:#c8c8c8;
  --silver-light:#e8e8e8;
  --silver-dim:#888;
  --silver-dark:#555;
  --white:#f4f2ef;
  --muted:#6a6a6a;
}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--white);font-family:'Tenor Sans',sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ============================================================
   NAV
============================================================ */
nav{
  position:fixed;top:0;width:100%;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.2rem 3rem;
  background:rgba(8,8,8,0.93);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(200,200,200,0.06);
  transition:padding 0.3s;
}
.nav-logo img{height:40px;width:auto;object-fit:contain;display:block}
.nav-links{display:flex;gap:1.8rem;list-style:none;align-items:center}
.nav-links a{font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--silver-dim);transition:color 0.3s;white-space:nowrap}
.nav-links a:hover{color:var(--silver-light)}
.lang-btn{
  font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;
  border:1px solid var(--silver-dark);color:var(--silver-dim);
  padding:0.35rem 0.8rem;cursor:pointer;background:transparent;
  transition:all 0.3s;font-family:'Tenor Sans',sans-serif;
}
.lang-btn:hover{border-color:var(--silver);color:var(--silver)}
.nav-book{
  font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;
  border:1px solid rgba(200,200,200,0.5);color:var(--silver);
  padding:0.5rem 1.2rem;transition:all 0.3s;white-space:nowrap;
  display:inline-block;
}
.nav-book:hover{background:var(--silver);color:var(--ink)}

/* ============================================================
   FLOATING BOOK BTN
============================================================ */
.float-book{
  position:fixed;bottom:2rem;right:2rem;z-index:999;
  background:var(--silver);color:var(--ink);
  font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;
  padding:0.85rem 1.8rem;
  box-shadow:0 4px 30px rgba(0,0,0,0.6);
  transition:all 0.3s;cursor:pointer;font-family:'Tenor Sans',sans-serif;border:none;
}
.float-book:hover{background:var(--silver-light);transform:translateY(-2px)}

/* ============================================================
   HERO
============================================================ */
.hero{
  height:100vh;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:flex-start;
}
.hero-img{
  position:absolute;inset:0;
  background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 50%,#0d0d0d 100%);
}
.hero-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(8,8,8,0.45) 30%,rgba(8,8,8,0.05) 100%);
}
.hero-content{
  position:relative;z-index:2;
  padding:0 3rem;max-width:700px;
}
.hero-eyebrow{
  font-size:0.58rem;letter-spacing:0.28em;text-transform:uppercase;
  color:var(--silver-dim);margin-bottom:1.8rem;
}
.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,7vw,5.5rem);
  font-weight:300;line-height:1.05;
  color:var(--white);margin-bottom:1.5rem;
}
.hero-title em{font-style:italic;color:var(--silver)}
.hero-sub{
  font-size:0.72rem;letter-spacing:0.12em;color:var(--silver-dim);
  line-height:1.8;margin-bottom:2.5rem;max-width:420px;
}
.hero-cta{
  display:inline-block;
  font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  border:1px solid rgba(200,200,200,0.6);color:var(--silver);
  padding:0.9rem 2.2rem;transition:all 0.35s;
}
.hero-cta:hover{background:var(--silver);color:var(--ink)}
.hero-scroll{
  position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  font-size:0.5rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--silver-dark);
}
.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,transparent,var(--silver-dark));animation:scrollPulse 2s infinite}
@keyframes scrollPulse{0%,100%{opacity:0.3}50%{opacity:1}}

/* ============================================================
   SECTIONS COMMUNES
============================================================ */
.section-label{
  font-size:0.52rem;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--silver-dark);margin-bottom:1rem;
}
.section-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,4vw,3rem);font-weight:300;
  color:var(--white);line-height:1.1;
}
.section-title em{font-style:italic;color:var(--silver)}

/* ============================================================
   WORK / PORTFOLIO
============================================================ */
#work{padding:8rem 3rem;background:var(--ink2)}
.work-header{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:4rem;
  border-bottom:1px solid rgba(200,200,200,0.06);
  padding-bottom:2rem;
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.work-item{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4}
.work-item img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s ease;display:block}
.work-item:hover img{transform:scale(1.04)}
.work-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,0.9) 0%,transparent 50%);
  opacity:0;transition:opacity 0.4s;
  display:flex;align-items:flex-end;padding:1.5rem;
}
.work-item:hover .work-overlay{opacity:1}
.work-overlay-text{font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--silver)}

/* ============================================================
   ABOUT
============================================================ */
#about{
  padding:10rem 3rem;
  display:grid;grid-template-columns:1fr 1fr;gap:8rem;
  align-items:center;background:var(--ink);
}
.about-img-wrap{position:relative}
.about-img-wrap img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.about-img-accent{
  position:absolute;top:-1.5rem;left:-1.5rem;
  width:60%;height:60%;
  border:1px solid rgba(200,200,200,0.1);
  pointer-events:none;
}
.about-text .section-label{margin-bottom:2rem}
.about-text .section-title{margin-bottom:2rem}
.about-body{
  font-size:0.8rem;line-height:2;color:var(--silver-dim);
  margin-bottom:2rem;
}
.about-signature{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;font-size:1.8rem;
  color:var(--silver);margin-top:1.5rem;
}

/* ============================================================
   PROCESS
============================================================ */
#process{padding:8rem 3rem;background:var(--ink3)}
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:3rem;margin-top:4rem;
}
.process-step{border-top:1px solid rgba(200,200,200,0.1);padding-top:2rem}
.process-num{
  font-family:'Cormorant Garamond',serif;
  font-size:3rem;font-weight:300;
  color:rgba(200,200,200,0.15);
  line-height:1;margin-bottom:1.5rem;
}
.process-title{
  font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--silver);margin-bottom:1rem;
}
.process-body{font-size:0.75rem;line-height:1.9;color:var(--silver-dark)}

/* ============================================================
   BOOKING / FORMULAIRE
============================================================ */
#booking{
  padding:10rem 3rem;
  display:grid;grid-template-columns:1fr 1fr;gap:8rem;
  background:var(--ink);
}
.booking-info .section-title{margin-bottom:1.5rem}
.booking-body{font-size:0.78rem;line-height:2;color:var(--silver-dim);margin-bottom:2rem}
.booking-note{
  font-size:0.65rem;letter-spacing:0.1em;color:var(--muted);
  border-left:1px solid var(--silver-dark);padding-left:1rem;
  line-height:1.8;
}
/* Formulaire */
.booking-form{display:flex;flex-direction:column;gap:1.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form-group{display:flex;flex-direction:column;gap:0.5rem}
.form-group label{
  font-size:0.52rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--silver-dark)
}
.form-group input,
.form-group select,
.form-group textarea{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(200,200,200,0.1);
  color:var(--white);padding:0.85rem 1rem;
  font-family:'Tenor Sans',sans-serif;font-size:0.75rem;
  transition:border-color 0.3s;outline:none;width:100%;
}
.form-group input:focus,
.form-group select,
.form-group textarea:focus{border-color:rgba(200,200,200,0.4)}
.form-group select option{background:var(--ink3)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group input[type="file"]{cursor:pointer}
.submit-btn{
  background:transparent;border:1px solid rgba(200,200,200,0.5);
  color:var(--silver);padding:1rem 2rem;cursor:pointer;
  font-family:'Tenor Sans',sans-serif;font-size:0.6rem;
  letter-spacing:0.22em;text-transform:uppercase;
  transition:all 0.3s;align-self:flex-start;margin-top:0.5rem;
}
.submit-btn:hover{background:var(--silver);color:var(--ink)}
#successMsg{
  display:none;text-align:center;padding:3rem;
  border:1px solid rgba(200,200,200,0.15);
}
#successMsg h3{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:300;color:var(--silver);margin-bottom:1rem;
}
#successMsg p{font-size:0.75rem;color:var(--silver-dim);line-height:1.8}

/* ============================================================
   EVENTS
============================================================ */
#events{padding:8rem 3rem;background:var(--ink2)}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem}
.event-card{
  border:1px solid rgba(200,200,200,0.06);
  padding:2rem;transition:border-color 0.3s;
}
.event-card:hover{border-color:rgba(200,200,200,0.2)}
.event-date{
  font-family:'Cormorant Garamond',serif;
  font-size:2.5rem;font-weight:300;color:var(--silver-dark);
  line-height:1;margin-bottom:0.3rem;
}
.event-month{font-size:0.55rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--silver-dark);margin-bottom:1.5rem}
.event-title{font-size:0.75rem;letter-spacing:0.08em;color:var(--silver);margin-bottom:0.8rem}
.event-location{font-size:0.65rem;color:var(--muted)}

/* ============================================================
   FOOTER
============================================================ */
footer{padding:5rem 3rem 2rem;background:var(--ink2);border-top:1px solid rgba(200,200,200,0.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.footer-logo img{height:35px;margin-bottom:1.5rem;display:block}
.footer-tagline{font-size:0.7rem;color:var(--muted);line-height:1.8;max-width:280px;margin-bottom:2rem}
.footer-social{display:flex;gap:1.2rem}
.social-link{width:36px;height:36px;border:1px solid rgba(200,200,200,0.1);display:flex;align-items:center;justify-content:center;transition:border-color 0.3s}
.social-link:hover{border-color:rgba(200,200,200,0.4)}
.social-link svg{width:14px;height:14px;fill:var(--silver-dim)}
.footer-col-title{font-size:0.52rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--silver-dark);margin-bottom:1.5rem}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.8rem}
.footer-links a{font-size:0.7rem;color:var(--muted);transition:color 0.3s}
.footer-links a:hover{color:var(--silver)}
.footer-info{font-size:0.7rem;color:var(--muted);line-height:2}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid rgba(200,200,200,0.06)}
.footer-copy{font-size:0.6rem;color:var(--muted)}
.footer-seo{font-size:0.55rem;color:rgba(106,106,106,0.5);max-width:500px;text-align:right}

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:900px){
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  .hero-content{padding:0 1.5rem}
  .work-grid{grid-template-columns:1fr 1fr}
  #about,#booking{grid-template-columns:1fr;gap:4rem;padding:5rem 1.5rem}
  .process-grid{grid-template-columns:1fr 1fr}
  .events-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  #work,#process,#events{padding:5rem 1.5rem}
  footer{padding:3rem 1.5rem 2rem}
}
@media(max-width:600px){
  .work-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
  .footer-seo{text-align:center}
}