/* Bavisco — sections (design Proposition 1c « Encre ») */

.content { position: relative; z-index: 1; }

/* — Rythme des sections — */
.section { padding-block: var(--bv-space-3xl); scroll-margin-top: 84px; }
/* La 1re section suit directement le fondu du héros (même crème) : le fondu fait déjà la
   séparation, donc on resserre son haut — sinon un grand vide crème traîne sous le héros. */
.content > .section:first-child { padding-top: var(--bv-space-lg); }
.section--surface { background-color: var(--bv-surface); }
.section--encre {
  background-color: var(--bv-encre);
  background-image: var(--bv-grain);
  background-blend-mode: soft-light;
  color: var(--bv-texte-inverse);
}
.section--encre .eyebrow,
.section--encre .section__lead { color: rgba(242, 234, 214, .72); }

/* — En-têtes de section — */
.section__head { margin-bottom: var(--bv-space-xl); }
.section__title {
  font-family: var(--bv-font-cta);   /* Staatliches : même « affiche » que le bouton Réserver / le portrait */
  font-size: var(--bv-display-md);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin-top: var(--bv-space-2xs);
}
.section__lead {
  max-width: 46ch;
  margin-top: var(--bv-space-sm);
  font-size: var(--bv-text-md);
  color: var(--bv-texte-doux);
}
/* En-tête centré (galerie, réservation) : titre + accroche alignés au milieu. */
.section__head--center { text-align: center; max-width: 620px; margin-inline: auto; }
.section__head--center .section__lead { margin-inline: auto; }

/* — Header collant : le vrai logo, révélé au scroll (sur le contenu kraft) — */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background-color: var(--bv-encre);   /* header sombre : le logo néon y brille */
  background-image: var(--bv-grain);
  background-blend-mode: soft-light;
  border-bottom: var(--bv-border-hair) solid rgba(244, 230, 200, .12);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .38s var(--bv-ease), opacity .38s var(--bv-ease);
}
.site-header.is-visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bv-space-md);
  padding-block: var(--bv-space-2xs);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.site-header__brand img {
  height: 46px;
  width: auto;
  display: block;
}
/* Navigation (masquée en mobile : le header s'y réduit à logo + Réserver). */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.site-header__link {
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-xs);
  letter-spacing: var(--bv-tracking-wider);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bv-kraft-clair) 78%, transparent);
  transition: color var(--bv-dur) var(--bv-ease);
}
.site-header__link:hover { color: var(--bv-kraft-clair); }
.site-header__cta { flex: none; }
/* Tampon compact dans le header (le format plein vit dans les sections). */
.site-header .stamp {
  padding: var(--bv-space-2xs) var(--bv-space-md);
  font-size: 1.1rem;
}

/* Ajout hors pipeline héros : topbar mobile par-dessus la scène */
.hero__topbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  padding-top: calc(18px + env(safe-area-inset-top, 0px));
  pointer-events: none;
}
.hero__topbar img { height: 34px; width: auto; }
.hero__topbar-label {
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-2xs);
  letter-spacing: var(--bv-tracking-wider);
  text-transform: uppercase;
  color: rgba(246, 234, 210, .72);   /* littéral nuit héros (cf. .hero__hint) */
}

/* — Galerie : embeds Instagram (lecteurs natifs, son au clic) — */
/* embed.js remplace le <blockquote> par un <iframe> qui garde class="instagram-media" :
   nos !important battent ses styles inline, et le border-radius rogne l'iframe. */
.ig-embeds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  justify-content: center;
  gap: var(--bv-space-md);
}
.ig-embeds .instagram-media {
  width: 100%;
  max-width: 340px !important;
  min-width: 326px !important;          /* plancher imposé par Instagram */
  margin: 0 !important;
  border: var(--bv-border) solid var(--bv-trait) !important;
  border-radius: var(--bv-wobble-1) !important;
  box-shadow: var(--bv-stamp-shadow) !important;
}
.ig-embeds .instagram-media:nth-child(even) { border-radius: var(--bv-wobble-2) !important; }

/* — À propos : portrait plein cadre + bio (« voici le barbier ») — */
.apropos {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 72px;
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
}
/* Portrait : cadre encré (trait + bord irrégulier + aplat décalé), nom en capitales
   Staatliches posé en bas sur un dégradé nuit pour la lisibilité. */
.portrait {
  position: relative;
  margin: 0;
  max-width: 440px;
  border: var(--bv-border) solid var(--bv-trait);
  border-radius: var(--bv-wobble-1);
  box-shadow: var(--bv-stamp-shadow);
  overflow: hidden;
}
.portrait picture { display: block; }
.portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1085 / 1450;
  object-fit: cover;
}
.portrait__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
      color-mix(in srgb, var(--bv-nuit) 92%, transparent) 0%,
      color-mix(in srgb, var(--bv-nuit) 45%, transparent) 38%,
      transparent 64%);
}
.portrait__name {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  margin: 0;
  font-family: var(--bv-font-cta);   /* Staatliches : capitales condensées « affiche » */
  font-size: var(--bv-display-md);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--bv-kraft-clair);
}
.apropos__title {
  margin-top: var(--bv-space-2xs);
  font-family: var(--bv-font-script);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1.1;
}
.apropos__text {
  margin-top: var(--bv-space-md);
  font-size: var(--bv-text-lg);
  line-height: var(--bv-leading-normal);
  color: var(--bv-encre-clair);
  max-width: 52ch;
}
.apropos__cta { margin-top: 2rem; }

/* — Réservation : cadre encré autour de l'embed Cal.com — */
/* Bord pointillé + aplat kraft. PAS d'overflow:hidden : l'iframe Cal.com s'auto-dimensionne,
   le cadre doit grandir avec lui, jamais le rogner. */
.reserver__frame {
  border: var(--bv-border) dashed var(--bv-vermillon-fonce);
  border-radius: var(--bv-wobble-3);
  background-color: var(--bv-kraft);
  padding: var(--bv-space-2xl) var(--bv-space-lg);
}
/* Point de montage de l'embed Cal.com : le widget gère sa propre hauteur ;
   min-height évite l'effondrement de la section avant le chargement du script. */
.cal-embed { width: 100%; min-height: 560px; }

/* — Contact — */
.contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  align-items: start;
}
.contact dt {
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-2xs);
  letter-spacing: var(--bv-tracking-wider);
  text-transform: uppercase;
  color: rgba(242, 234, 214, .6);
  margin-bottom: var(--bv-space-3xs);
}
.contact dd { font-size: var(--bv-text-lg); }
/* lien social : souligné discret au repos, accent vermillon au survol */
.contact a {
  text-decoration: underline;
  text-decoration-color: rgba(242, 234, 214, .3);
  text-underline-offset: 3px;
  transition: color var(--bv-dur) var(--bv-ease),
              text-decoration-color var(--bv-dur) var(--bv-ease);
}
.contact a:hover { color: var(--bv-vermillon); text-decoration-color: var(--bv-vermillon); }

/* — Footer — */
.footer {
  padding-block: var(--bv-space-lg);
  text-align: center;
  background-color: var(--bv-encre);   /* sombre : prolonge la section contact, le néon brille */
  background-image: var(--bv-grain);
  background-blend-mode: soft-light;
  color: var(--bv-texte-inverse);
}
.footer__logo {
  width: min(320px, 70%);              /* signature néon « Bavisco HC » */
  height: auto;
  margin: 0 auto var(--bv-space-2xs);  /* copyright resserré sous le logo */
  display: block;
}
.footer__copy {
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-xs);
  color: rgba(242, 234, 214, .55);
}

/* — Responsive : un seul point de bascule pour les mises en page — */
@media (max-width: 720px) {
  .section { padding-block: var(--bv-space-xl); }
  .section__title { font-size: var(--bv-display-sm); }

  /* header mobile = logo + Réserver seulement */
  .site-header__link { display: none; }

  /* topbar héros : visible uniquement en mobile, par-dessus la scène */
  .hero__topbar { display: flex; }

  .ig-embeds { grid-template-columns: minmax(0, 340px); }

  .apropos { grid-template-columns: 1fr; gap: var(--bv-space-md); }
  .portrait { max-width: none; }
  .portrait img { aspect-ratio: 1085 / 1150; object-position: center 20%; }
  .portrait__name { font-size: var(--bv-display-sm); left: 22px; right: 22px; bottom: 20px; }
  .apropos__cta { width: 100%; justify-content: center; }

  .reserver__frame { padding: var(--bv-space-lg) var(--bv-space-md); }

  .contact { grid-template-columns: 1fr; gap: var(--bv-space-md); }
}

/* — Header : logo resserré sur très petit écran — */
@media (max-width: 520px) {
  .site-header__brand img { height: 38px; }
}