/* ===========================================================
   Phil and the Neighbors — feuille de style
   Palette vintage rockabilly inspirée du flyer "STEAMER"
   =========================================================== */

:root{
  --paper:      #f4ecd6;   /* fond papier crème */
  --paper-dark: #e9dec0;   /* fond papier nuancé */
  --mustard:    #e8a72c;   /* jaune moutarde     */
  --mustard-dk: #d2901a;
  --sage:       #84b4a1;   /* vert sauge / menthe */
  --sage-dk:    #5f9683;
  --ink:        #211c16;   /* noir chaud         */
  --ink-soft:   #4a4036;
  --red:        #c0492f;   /* rouge brique accent */
  --paper-line: rgba(33,28,22,.12);

  --font-script:  'Kaushan Script', cursive;
  --font-hand:    'Caveat', cursive;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1080px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--paper);
  /* léger grain papier */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,.03) 0, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,.03) 0, transparent 55%);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:var(--red); }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.4rem;
}

/* ----------------------------- Header / nav ----------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:4px solid var(--mustard);
}
.nav{
  display:flex; align-items:center; justify-content:flex-start;
  gap:1rem; padding:.6rem 1.4rem;
  max-width:var(--maxw); margin:0 auto;
}
.brand{
  display:flex; flex-direction:column; line-height:.82;
  text-decoration:none; color:var(--paper);
  margin-right:auto; /* repousse menu + drapeaux à droite */
}
.brand .b1{ font-family:var(--font-script); font-size:1.7rem; color:var(--mustard); }
.brand .b2{ font-family:var(--font-hand); font-size:1.05rem; color:var(--sage); margin-top:.15rem; }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  color:var(--paper); font-size:1.6rem; line-height:1;
}

.nav-links{
  display:flex; gap:.4rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  display:block; text-decoration:none;
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.08em; font-weight:500; font-size:.92rem;
  color:var(--paper); padding:.5rem .85rem; border-radius:3px;
  transition:background .15s, color .15s;
}
.nav-links a:hover{ background:var(--mustard); color:var(--ink); }
.nav-links a.active{ color:var(--mustard); }
.nav-links a.active:hover{ color:var(--ink); }

/* Sélecteur de langue (drapeaux) */
.lang-switch{ display:flex; align-items:center; gap:.15rem; }
.lang-switch .flag{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.2rem; line-height:1; text-decoration:none;
  padding:.2rem .3rem; border-radius:4px;
  border:1px solid transparent;
  filter:grayscale(.55) opacity(.6);
  transition:filter .15s, border-color .15s, transform .12s;
}
.lang-switch .flag:hover{ filter:none; transform:translateY(-1px); }
.lang-switch .flag.active{
  filter:none; border-color:var(--mustard);
  background:rgba(232,167,44,.16);
}

/* ----------------------------- Hero (accueil) ----------------------------- */
.home-hero{
  background:var(--paper);
  overflow:hidden;
  padding: 3.4rem 0 0 0;
}
.home-hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) 1fr;
  align-items:center;
  gap:1.5rem;
}
.home-hero-photo{
  width:100%; height:auto; align-self:end;
  filter:drop-shadow(4px 12px 18px rgba(0,0,0,.28));
}
.home-hero-text{ padding:2.4rem 0; }
.home-hero .eyebrow{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.35em; color:var(--sage-dk); font-size:.95rem; margin:0 0 .2rem;
}
.home-hero h1{ margin:0; line-height:.9; }
.home-hero h1 .n1{
  display:block; font-family:var(--font-script);
  color:var(--mustard); font-size:clamp(3rem,8vw,6rem);
  text-shadow:3px 4px 0 rgba(0,0,0,.18);
}
.home-hero h1 .n2{
  display:block; font-family:var(--font-hand); font-weight:700;
  color:var(--ink); font-size:clamp(1.5rem,4.5vw,2.8rem);
  margin-top:-.1rem; text-shadow:2px 2px 0 rgba(255,255,255,.6);
}
.home-hero .tags{
  margin:1.4rem 0 0; display:flex; gap:.5rem 1rem; flex-wrap:wrap;
}
.home-hero .tags span{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.12em; font-size:.8rem; color:var(--ink);
  background:var(--mustard); padding:.3rem .8rem; border-radius:2px;
  transform:rotate(-1.5deg); box-shadow:2px 2px 0 rgba(33,28,22,.22);
}

/* Intro accueil (texte + boutons) */
.home-intro{ max-width:680px; }
.home-intro .section-lead{ font-size:1.12rem; margin-top:0; }

/* ----------------------------- Generic page header ----------------------------- */
.page-head{
  background:var(--mustard);
  border-bottom:4px solid var(--ink);
  padding:2.4rem 0 2.1rem;
  text-align:center;
}
.page-head h1{
  margin:0; font-family:var(--font-script); color:var(--ink);
  font-size:clamp(2.4rem,7vw,4rem); line-height:1;
}
.page-head p{
  margin:.4rem 0 0; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.25em; font-size:.85rem; color:var(--ink-soft);
}

/* ----------------------------- Sections ----------------------------- */
section{ padding:3.4rem 0; }
.section-alt{ background:var(--paper-dark); }

.section-title{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.06em; font-size:1.9rem; font-weight:600;
  margin:0 0 .3rem; color:var(--ink);
}
.section-title .accent{ color:var(--red); }
.section-lead{ font-size:1.12rem; max-width:62ch; color:var(--ink-soft); }

.divider{
  width:90px; height:4px; background:var(--sage);
  margin:1.1rem 0 1.8rem; border:0;
}
.center{ text-align:center; }
.center .divider{ margin-left:auto; margin-right:auto; }

/* ----------------------------- Intro band block (home) ----------------------------- */
.split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2.6rem; align-items:center;
}
.split img{
  width:100%; height:100%; object-fit:cover; border-radius:4px;
  border:6px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,.18);
  filter:sepia(.05);
}
.frame-img{
  border:6px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,.18); border-radius:4px;
}
.split img.photo-cutout{
  height:auto; object-fit:unset;
  border:none; box-shadow:none; border-radius:0;
  filter:drop-shadow(4px 12px 18px rgba(0,0,0,.28));
}

/* CTA buttons */
.btn{
  display:inline-block; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  text-decoration:none; cursor:pointer;
  padding:.8rem 1.6rem; border-radius:3px; border:0;
  background:var(--ink); color:var(--paper);
  transition:transform .12s, background .15s;
}
.btn:hover{ background:var(--red); transform:translateY(-2px); }
.btn-mustard{ background:var(--mustard); color:var(--ink); }
.btn-mustard:hover{ background:var(--mustard-dk); }
.btn-row{ margin-top:1.6rem; display:flex; gap:.8rem; flex-wrap:wrap; }

/* ----------------------------- Members (bio) ----------------------------- */
.members{
  display:flex; flex-direction:column; gap:2.2rem; margin-top:1.6rem;
}
.member{
  background-color:var(--paper); border:2px solid var(--ink);
  border-radius:5px;
  box-shadow:6px 6px 0 rgba(33,28,22,.85);
  display:flex; align-items:stretch; gap:0;
}
.member:nth-child(2){ background-color:var(--sage); }
.member-text{
  flex:1 1 auto; min-width:0; align-self:center;
  padding:1.8rem 2rem;
}
.member-photo{
  flex:0 0 42%; align-self:flex-end;
  width:42%; max-width:430px; height:auto;
  object-fit:contain; display:block;
  filter:drop-shadow(4px 12px 18px rgba(0,0,0,.28));
}
/* photo de Dave (1re carte) réduite de 40% */
.member:nth-child(1) .member-photo{
  flex-basis:25%; width:25%; max-width:258px;
}
.member h3{
  font-family:var(--font-script); font-size:2.4rem; margin:0 0 .2rem; color:var(--ink);
}
.member .role{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.14em; font-size:.82rem; color:var(--ink-soft); margin:0 0 .8rem;
}
.member p{ margin:0; font-size:1.02rem; max-width:60ch; }

/* ----------------------------- Tour dates ----------------------------- */
.tour-block{ margin-bottom:2.6rem; }
.tour-list{ list-style:none; margin:0; padding:0; }
.gig{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:1.2rem; align-items:center;
  padding:1.1rem .4rem;
  border-bottom:2px dashed var(--paper-line);
}
.gig .date{
  font-family:var(--font-display); text-align:center;
  background:var(--ink); color:var(--paper); border-radius:4px; padding:.5rem;
}
.gig .date .day{ display:block; font-size:1.7rem; font-weight:600; line-height:1; }
.gig .date .mon{ display:block; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--mustard); }
.gig .info h3{ margin:0; font-size:1.15rem; }
.gig .info .place{ margin:.15rem 0 0; color:var(--ink-soft); font-size:.95rem; }
.gig .cta{ text-align:right; }
.tag-soon{
  display:inline-block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; background:var(--sage);
  color:var(--ink); padding:.3rem .7rem; border-radius:2px;
}
.gig.past{ opacity:.62; }
.gig.past .date{ background:var(--ink-soft); }

/* ----------------------------- Contact ----------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.6rem; }
.contact-info p{ margin:.2rem 0 1.1rem; }
.contact-info .label{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; color:var(--red); display:block; margin-bottom:.1rem;
}
.contact-info a{ color:var(--ink); text-decoration:none; font-weight:700; }
.contact-info a:hover{ color:var(--red); }

form label{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.1em; font-size:.78rem; margin:.9rem 0 .25rem; color:var(--ink-soft);
}
form input, form textarea{
  width:100%; font-family:var(--font-body); font-size:1rem;
  padding:.7rem .8rem; border:2px solid var(--ink); border-radius:4px;
  background:#fff; color:var(--ink);
}
form input:focus, form textarea:focus{ outline:3px solid var(--sage); outline-offset:0; }

.flash-msg{
  padding:.9rem 1.1rem; border-radius:5px; margin-bottom:1.2rem;
  font-weight:700; border:2px solid var(--ink);
}
.flash-msg.ok{ background:var(--sage); color:var(--ink); }
.flash-msg.err{ background:#e8b4a8; color:var(--ink); border-color:var(--red); }

.socials{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.4rem; }
.socials a{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.82rem; text-decoration:none; color:var(--ink);
  border:2px solid var(--ink); padding:.45rem .9rem; border-radius:3px;
}
.socials a:hover{ background:var(--ink); color:var(--paper); }

/* ----------------------------- Footer ----------------------------- */
.site-footer{
  background:var(--ink); color:var(--paper-dark);
  padding:2.4rem 0; text-align:center; border-top:4px solid var(--sage);
}
.site-footer .f-name{ font-family:var(--font-script); color:var(--mustard); font-size:2rem; }
.site-footer a{ color:var(--sage); }
.site-footer .small{ font-size:.82rem; color:#9a9183; margin-top:.6rem; }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width:820px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--ink);
    border-bottom:4px solid var(--mustard); padding:.4rem 1rem 1rem;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:.8rem .6rem; }
  .home-hero-inner{ grid-template-columns:1fr; text-align:center; gap:.5rem; }
  .home-hero-photo{ max-width:320px; margin:0 auto; order:-1; }
  .home-hero-text{ padding:1.4rem 0 .5rem; }
  .home-hero .tags{ justify-content:center; }
  .home-intro{ text-align:center; }
  .home-intro .section-lead{ margin-left:auto; margin-right:auto; }
  .home-intro .btn-row{ justify-content:center; }
  .split{ grid-template-columns:1fr; }
  .member,
  .member:nth-child(even){ flex-direction:column; gap:0; }
  .member-text{ padding:1.5rem 1.4rem .6rem; align-self:stretch; }
  .member-photo{ flex:0 0 auto; width:72%; max-width:300px; align-self:center; }
  .member:nth-child(1) .member-photo{ width:44%; max-width:180px; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  .gig{ grid-template-columns:70px 1fr; }
  .gig .cta{ grid-column:2; text-align:left; margin-top:.2rem; }
}