:root{
  --bg:#fff;
  --dark:#111;
  --gray:#4a4a4a;
  --light:#e6e6e6;
  --border:#eee;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Montserrat", Arial, sans-serif;
  background:var(--bg);
  color:var(--dark);
  line-height:1.6;
}

a{text-decoration:none;color:inherit}

/* CONTAINER (tu l'utilises dans tes pages) */
.container{
  max-width:1100px;
  margin:auto;
  padding:0 20px;
}

/* =========================
   HEADER
   ========================= */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid var(--border);
  z-index:1000;
}

.nav{
  padding:14px 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}

.brand{
  font-family:"Times New Roman", serif;
  font-size:20px;
  line-height:1.1;
  display:inline-flex;
  flex-direction:column;
}

.links{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:14px 20px;
  padding-top:2px;
}

.links a{
  font-size:14px;
  color:#222;
  transition:opacity .2s ease;
  white-space:nowrap;
}

.links a:hover{ opacity:.65; }

/* =========================
   BASE PAGES (évite que le titre passe sous le menu)
   ========================= */
/* À utiliser dans tes pages si tu veux : <main class="container page"> */
.page{
  padding-top:96px; /* compense le header fixed */
  padding-bottom:40px;
}

.page-title{
  padding:18px 0 18px;
}

.kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#777;
  margin-bottom:10px;
}

.page-title h1{
  font-family:"Times New Roman", serif;
  font-size:34px;
  font-weight:400;
  line-height:1.1;
}

.content{
  padding-top:14px;
}

.muted{
  color:var(--gray);
  font-size:15px;
  line-height:1.9;
  max-width:760px;
}

/* =========================
   ORIGINALS / GALLERY GRID (propre)
   ========================= */
.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  margin-top:18px;
}

.card{
  border-radius:14px;
  overflow:hidden;
  background:#f6f6f6;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.card img{
  display:block;
  width:100%;
  height:320px;      /* look galerie, propre */
  object-fit:cover;  /* recadrage élégant */
}

/* spans desktop */
.span4{ grid-column:span 4; }
.span6{ grid-column:span 6; }

/* =========================
   HERO (HOME)
   ========================= */
.hero{
  min-height:100vh;
  background:url("images/11.png") center/contain no-repeat #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:96px; /* compense le header fixed */
}

.hero-text{
  font-family:"Times New Roman", serif;
  font-size:50px;
  text-align:center;
  line-height:1.5;
  animation:zoom 1.6s ease-out forwards;
  transform-origin:center center;
}


@keyframes zoom{
  from{transform:scale(.92);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* INTRO (HOME) */
.intro-text{
  text-align:center;
  padding:120px 20px;
}

.artist-name{
  font-family:"Times New Roman", serif;
  font-size:25px;
  margin-bottom:10px;
}

.subtitle{
  font-size:15px;
  color:var(--gray);
  margin-bottom:30px;
}

.quote{
  font-size:15px;
  color:var(--gray);
  line-height:1.8;
}

/* IMAGE BAND */
.image-band img{
  width:100%;
  display:block;
}

/* GALLERY BLOCK */
.gallery-block{
  background:#3e3d4c;
  padding:140px 20px;
}

.gallery-inner{
  max-width:1100px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

.gallery-text h2{
  font-family:"Times New Roman", serif;
  font-size:30px;
  line-height:1.6;
  color:#fff;
}

.gallery-box{
  background:rgba(255,255,255,.06);
  padding:70px 60px;
  text-align:center;
}

.gallery-box p{
  color:var(--light);
  margin-bottom:40px;
  line-height:1.9;
}

/* Bouton noir (réutilisé ailleurs) */
.gallery-button{
  display:inline-block;
  background:#111;
  color:#fff;
  padding:16px 48px;
  letter-spacing:.18em;
  font-size:13px;
  text-transform:uppercase;
  transition:transform .25s ease, background .25s ease, opacity .25s ease;
}

.gallery-button:hover{
  background:#000;
  transform:translateY(-2px);
}

/* =========================
   CONTACT (plus stylé)
   ========================= */
.contact-hero{
  min-height:calc(100vh - 96px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:96px 20px 80px;
  background:#fff;
}

.contact-inner{
  width:100%;
  max-width:820px;
  text-align:center;
  padding:72px 60px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.contact-eyebrow{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#777;
  margin-bottom:22px;
}

.contact-title{
  font-family:"Times New Roman", serif;
  font-size:30px;
  letter-spacing:.08em;
  font-weight:400;
  color:#111;
  margin-bottom:28px;
}

.contact-rule{
  width:72px;
  height:1px;
  background:#cfcfcf;
  margin:0 auto 28px;
}

.contact-subtitle{
  font-size:15px;
  line-height:1.9;
  color:var(--gray);
  margin-bottom:42px;
}

/* bouton carré noir type "Subscribe" (premium) */
.contact-button{
  display:inline-block;
  background:#111;
  color:#fff;
  padding:16px 56px;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid #111;
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.contact-button:hover{
  background:#000;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}

.contact-small{
  margin-top:28px;
  font-size:13px;
  color:#777;
}

.contact-email{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* FOOTER */
footer{
  text-align:center;
  padding:40px;
  font-size:13px;
  color:#777;
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:900px){
  .gallery-inner{grid-template-columns:1fr;gap:60px}
  .hero-text{font-size:36px}
  .page-title h1{font-size:30px}

  /* galerie */
  .span4{ grid-column:span 6; }
  .span6{ grid-column:span 12; }
  .card img{ height:300px; }

  /* menu */
  .nav{align-items:flex-start}
}

@media(max-width:620px){
  /* contact */
  .contact-inner{ padding:56px 22px; }
  .contact-title{ font-size:28px; }

  /* pages */
  .page{ padding-top:106px; } /* menu peut faire 2 lignes */
  .page-title h1{ font-size:28px; }

  /* galerie mobile */
  .grid{ grid-template-columns:1fr; }
  .span4, .span6{ grid-column:span 1; }
  .card img{ height:260px; }
}
/* ===== Signature (PNG transparent) ===== */
.signature{
  margin-top:16px;
  max-width:220px;   /* petite, élégante */
}

.signature img{
  display:block;
  width:100%;
  height:auto;
  background:transparent;
  object-fit:contain;
}
/* ===== Instagram footer ===== */
.footer-instagram a{
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#111;
  transition:opacity .25s ease;
}

.footer-instagram a:hover{
  opacity:.6;
}

.silk-image{
  display:flex;
  justify-content:center;
  margin:40px 0;
}

.silk-image img{
  width:100%;
  max-width:720px;   /* taille idéale image centrale */
  height:auto;
  display:block;
}