/* ============================================================
   AU FIL DE NATH — Header
   Deux états : expanded (top) → sticky (scroll)
   Figma node 53:2 (desktop) | 679:707 (mobile)
   ============================================================ */


/* ----------------------------------------------------------
   STRUCTURE GÉNÉRALE
---------------------------------------------------------- */

/* Le fond écru vit sur le body (.page-wrapper) — voir plus bas.
   Le header lui-même est transparent pour laisser passer la broderie. */
.site-header {
  position: relative;
  width: 100%;
  background-color: transparent;
  z-index: 100;
  --scroll-progress: 0;  /* 0 au top, 1 quand le sticky est pleinement déployé */
}

/* Conteneur centré 1280px */
.site-header__inner {
  max-width: var(--content-width);   /* 1280px */
  margin: 0 auto;
  padding: 0 var(--page-padding-x);  /* 0 80px */
  display: flex;
  align-items: center;
}


/* ----------------------------------------------------------
   BARRE NAV — affichée en permanence
   Au top : nav seule, centrée. Au sticky : logo + nav + CTA
---------------------------------------------------------- */

.site-header__nav-bar {
  width: 100%;
  padding: 20px 0;
  transition: box-shadow var(--transition-base),
              background-color var(--transition-base);
}

/* Mode STICKY — déclenché par JS (.is-sticky sur #site-header) */
.site-header.is-sticky .site-header__nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-ecru);
  box-shadow: 0 1px 0 rgba(47, 58, 68, 0.1);
  padding: 14px 0;
  z-index: 200;
}

/* Inner de la nav bar : passage en GRID 3 colonnes (1fr | auto | 1fr).
   La nav (col 2) reste centrée visuellement quel que soit l'état :
   - Au top : logo et CTA sont display:none → leurs colonnes vides
     (1fr de chaque côté) gardent la nav exactement au centre.
   - Au sticky : logo apparaît en col 1, CTA en col 3, nav inchangée au centre.
   Pas de saut horizontal sur les liens nav entre les deux états. */
.site-header__nav-bar .site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
}


/* ----------------------------------------------------------
   LOGO STICKY
   Caché au top, révélé au sticky
---------------------------------------------------------- */

/* Logo sticky : caché au top, apparaît + grandit progressivement au scroll.
   Taille pilotée en width directement (proportions auto via height: auto).
   Desktop : 180px → 260px de large (interpolation continue via --scroll-progress). */
.site-header__logo-sticky {
  display: none;
  flex-shrink: 0;
  opacity: var(--scroll-progress);
  /* Position dans la grille : col 1, alignée au début (gauche) */
  grid-column: 1;
  justify-self: start;
  align-items: center;
  /* Pas de transform scale : la taille est gérée via width sur l'img directement,
     ce qui donne des proportions natives propres sans déformation. */
}

.site-header__logo-sticky img {
  display: block;
  height: auto;
  width: calc(180px + 80px * var(--scroll-progress));   /* 180 → 260 */
}

.site-header.is-sticky .site-header__logo-sticky {
  display: flex;
}


/* ----------------------------------------------------------
   NAVIGATION PRINCIPALE
---------------------------------------------------------- */

/* La nav vit dans la col 2 (auto) de la grille parent, centrée. */
.site-header__nav {
  grid-column: 2;
  justify-self: center;
}

.site-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;  /* Espacement visuel entre liens — à affiner selon Figma */
}

.site-header__nav-link {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: var(--weight-medium);    /* 500 */
  color: var(--color-marine);           /* #2F3A44 */
  text-decoration: none;
  letter-spacing: 0;
  line-height: 1;
  position: relative;

  /* Soulignement au hover */
  transition: opacity var(--transition-base);
}

.site-header__nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background-color: var(--color-marine);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.site-header__nav-link:hover { opacity: 0.75; }
.site-header__nav-link:hover::after { transform: scaleX(1); }

/* Lien actif */
.site-header__nav-link.is-active::after { transform: scaleX(1); }


/* ----------------------------------------------------------
   CTA STICKY
   "Parler de mon projet" — caché au top, visible au sticky
---------------------------------------------------------- */

/* CTA sticky : caché au top, monte (translateY) + fade-in progressivement.
   Piloté par --scroll-progress (0 → 1). */
.site-header__cta-sticky {
  display: none;
  opacity: var(--scroll-progress);
  /* Part 14px plus bas, remonte à 0 au fur et à mesure du scroll */
  transform: translateY(calc((1 - var(--scroll-progress)) * 14px));
  flex-shrink: 0;
  /* Position dans la grille : col 3, alignée à droite */
  grid-column: 3;
  justify-self: end;
}

.site-header.is-sticky .site-header__cta-sticky {
  display: flex;
}


/* ----------------------------------------------------------
   BOUTONS (réutilisables sur tout le site)
---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: var(--radius-btn);     /* 100px — pill */
  font-family: var(--font-sans);
  font-size: var(--text-btn);           /* 16px */
  font-weight: var(--weight-regular);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              filter var(--transition-base),
              transform var(--transition-base);
  white-space: nowrap;
}

/* Léger scale au hover sur TOUS les CTAs — micro-interaction tactile commune */
.btn:hover {
  transform: scale(1.02);
}

.btn--outline {
  background-color: var(--color-violet);   /* #E3DDF0 — violet clair */
  border: var(--border-btn) solid var(--color-marine);
  color: var(--color-marine);
}

.btn--outline:hover {
  background-color: var(--color-marine);
  color: var(--color-ecru);
}

.btn--primary {
  background-color: var(--color-marine);
  border: var(--border-btn) solid var(--color-marine);
  color: var(--color-ecru);
}

/* Hover : on assombrit légèrement le marine, on garde le texte écru.
   Effet sobre, juste un appui sur l'action. */
.btn--primary:hover {
  background-color: var(--color-marine-darker);
  border-color: var(--color-marine-darker);
  color: var(--color-ecru);
}


/* Variante GRADIENT — utilisée pour le CTA "Parler de mon projet"
   dans le menu mobile. Fond pastel triphase + stroke fin marine. */
.btn--gradient {
  background-image: var(--gradient-pastel);
  background-color: var(--color-violet);   /* fallback */
  border: var(--border-btn-fine) solid var(--color-marine);   /* 0.5px */
  color: var(--color-marine);
}

/* Hover : on intensifie le gradient (saturation + assombrissement léger)
   plutôt que de basculer en marine. Le texte marine reste lisible. */
.btn--gradient:hover {
  filter: saturate(1.55) brightness(0.95);
}


/* ----------------------------------------------------------
   BLOC LOGO HERO
   Grand logo, visible uniquement au top de page
   Se cache quand le header devient sticky
---------------------------------------------------------- */

.site-header__logo-block {
  padding: 0 0 var(--logo-padding) 0;   /* 40px en bas */
  transition: opacity var(--transition-slow),
              max-height var(--transition-slow);
  overflow: hidden;
}

/* Le logo hero est rapproché du bord gauche pour cadrer plus près de la broderie.
   La valeur (60px) garantit que la broderie (left 16 + width 32 = ends à 48) ne
   passe pas sous le logo : on garde 12px de gap visuel. Surcharge le 80px par défaut.
   Override responsive plus bas pour tablette et mobile. */
.site-header__logo-block .site-header__inner {
  padding-left: 60px;
}

.site-header__logo-hero {
  display: inline-block;
  text-decoration: none;
}

.site-header__logo-hero img {
  display: block;
  /* Supprimer le fond écru embarqué dans le SVG */
  width: 420px;
  height: auto;
}

/* Masquer le bloc logo hero une fois sticky */
.site-header.is-sticky .site-header__logo-block {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  padding: 0;
}


/* ----------------------------------------------------------
   LIEN "← RETOUR" (pages intérieures)
---------------------------------------------------------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-back);        /* 14px */
  font-weight: var(--weight-regular);
  color: var(--color-marine);
  text-decoration: none;
  margin-bottom: 12px;
  transition: opacity var(--transition-base);
}

.back-link:hover { opacity: 0.65; }

/* Pages intérieures : inner en colonne pour back + logo */
.site-header--inner .site-header__logo-block .site-header__inner {
  flex-direction: column;
  align-items: flex-start;
}


/* ----------------------------------------------------------
   HAMBURGER (mobile)
---------------------------------------------------------- */

.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  /* Position dans la grille : col 3 (à la place du CTA sur mobile) */
  grid-column: 3;
  justify-self: end;
}

.site-header__hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-marine);
  border-radius: 2px;
  transition: transform var(--transition-base),
              opacity var(--transition-base);
}

/* État ouvert */
.site-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ----------------------------------------------------------
   MENU MOBILE — overlay sous le header
   Fidèle au design Figma mobile (Pages figma/Menu mobile.png)
   Le header (logo + tagline + hamburger) reste visible en haut.
   Le menu se positionne JUSTE EN-DESSOUS et descend jusqu'en bas du viewport.
---------------------------------------------------------- */

.site-header__mobile-menu {
  display: none;
  position: fixed;
  top: 64px;                              /* sous le header mobile */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-ecru);
  z-index: 300;
  overflow-y: auto;
  flex-direction: column;
  padding-top: 24px;
  padding-bottom: 32px;
}

.site-header__mobile-menu.is-open {
  display: flex;
}

/* Zone de contenu centrée */
.site-header__mobile-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32px 24px;
  flex: 1;
  gap: 0;
}

/* Séparateur du menu : utilise assets/Séparateur menu.png (visuel dédié).
   width 85% du menu, height auto via aspect-ratio (PNG 1400×128 ≈ 11:1)
   → le visuel occupe vraiment 85% de la width du menu sans déformation. */
.site-header__mobile-menu__sep {
  width: 85%;
  max-width: 90%;
  aspect-ratio: 1400 / 128;
  height: auto;
  border: none;
  margin: 0 auto 32px;
  flex-shrink: 0;
  background: url("assets/S%C3%A9parateur%20menu.webp") center/100% 100% no-repeat;
  opacity: 0.95;
  display: block;
}

/* Liens de navigation — grands, centrés, Playfair */
.site-header__mobile-menu nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
}

.site-header__mobile-menu nav a {
  font-family: var(--font-serif);
  /* Responsive proportionnel : 26px mini, 8vw idéal, 44px max */
  font-size: clamp(26px, 8vw, 44px);
  font-weight: var(--weight-medium);
  color: var(--color-marine);
  text-decoration: none;
  line-height: 1;
  text-align: center;
  display: block;
  transition: opacity var(--transition-base);
}

.site-header__mobile-menu nav a:hover {
  opacity: 0.85;       /* atténué (était 0.65) — effet plus subtil */
}

/* CTA "Parler de mon projet" dans le menu — responsive */
.site-header__mobile-menu .btn {
  margin-top: clamp(28px, 6vw, 48px);
  padding: clamp(10px, 2.5vw, 14px) clamp(22px, 6vw, 32px);
  font-size: clamp(13px, 3.6vw, 16px);
}

/* Texte sous le CTA */
.site-header__mobile-menu__tagline {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--weight-light);
  color: var(--color-text);
  text-align: center;
  line-height: 1.6;
  opacity: 0.75;
}

/* Séparateur bas du menu */
.site-header__mobile-menu__sep--bottom {
  margin: 40px auto 0;
}


/* ----------------------------------------------------------
   SÉPARATEUR — ligne pointillée sous le header
---------------------------------------------------------- */

.separator {
  border: none;
  border-top: 2px dashed var(--color-rose);
  max-width: calc(var(--content-width) - var(--chainette-width) * 2);
  margin: 0 auto;
  opacity: 0.7;
}

.separator--rose   { border-color: var(--color-rose); }
.separator--violet { border-color: var(--color-violet); }
.separator--bleu   { border-color: var(--color-bleu-pastel); }


/* ----------------------------------------------------------
   MOTIF CHAINETTE — Bordures latérales
---------------------------------------------------------- */

/* Fond écru appliqué ici (body) : permet à la broderie (.page-wrapper::before,
   z-index 1) d'apparaître ENTRE le fond et le contenu des sections (qui sont
   maintenant transparentes). */
.page-wrapper {
  position: relative;
  overflow-x: hidden;
  background-color: var(--color-ecru);
}

/* Broderie décorative — UNIQUEMENT côté gauche.
   Toujours CENTRÉE dans la marge entre le bord viewport et le bord du contenu.
   Formule : broderie_centre = content_left / 2 (au milieu de la marge gauche).
   Donc broderie_left = content_left / 2 - broderie_w / 2.
   Min : 4px du bord viewport (sécurité petits écrans).
   Plus présente sur mobile, plus fine sur desktop. */
.page-wrapper {
  --broderie-w: 24px;   /* desktop */
}

.page-wrapper::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--broderie-w);
  /* "content_left" = max(padding-x viewport, (viewport-frame)/2 + padding-x frame).
     La broderie est centrée dans cette marge → left = content_left/2 - w/2. */
  /* Centre la broderie dans la marge gauche = (viewport - content) / 2.
     On utilise 50vw (width absolue) et non 50% qui sur fixed = idem mais
     la formule ajoutait à tort +page-padding-x sur grand écran. */
  left: max(
    4px,
    max(var(--page-padding-x), 50vw - var(--content-width) / 2) / 2
    - var(--broderie-w) / 2
  );
  background-image: url("assets/chainette.svg");
  background-repeat: repeat-y;
  background-size: var(--broderie-w) auto;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}


/* ----------------------------------------------------------
   RESPONSIVE — Tablette (≤ 1024px)
---------------------------------------------------------- */

@media (max-width: 1024px) {
  /* .site-header__inner utilise désormais var(--page-padding-x) = 40px via variables.css */

  .site-header__nav-list {
    gap: 24px;
  }

  .site-header__nav-link {
    font-size: 16px;
  }

  /* Broderie tablette : taille intermédiaire */
  .page-wrapper {
    --broderie-w: 22px;
  }

  /* Logo header tablette : reste proche de la broderie (broderie ends à 34) */
  .site-header__logo-block .site-header__inner {
    padding-left: 46px;
  }
}


/* ----------------------------------------------------------
   RESPONSIVE — Breakpoint hamburger (≤ 960px)
   Passe en menu hamburger dès que les liens risquent de se
   tronquer (logo + nav + CTA ne tiennent plus côte à côte).
---------------------------------------------------------- */

@media (max-width: 960px) {

  /* Cacher la nav desktop et le CTA */
  .site-header__nav,
  .site-header__cta-sticky {
    display: none !important;
  }

  /* Afficher le hamburger */
  .site-header__hamburger {
    display: flex;
  }
}


/* ----------------------------------------------------------
   RESPONSIVE — Mobile (≤ 768px)
---------------------------------------------------------- */

@media (max-width: 768px) {

  /* Logo sticky mobile — width-based 110px → 160px (proportionnel au desktop 180→260) */
  .site-header__logo-sticky img {
    width: calc(110px + 50px * var(--scroll-progress));
    height: auto;
  }

  /* Broderie mobile : plus présente (centrée dans une marge plus fine) */
  .page-wrapper {
    --broderie-w: 18px;
  }

  /* Logo header mobile : adapté à la broderie réduite (broderie ends à 22) */
  .site-header__logo-block .site-header__inner {
    padding-left: 32px;
  }

  /* Logo hero réduit */
  .site-header__logo-hero img {
    width: 260px;
  }

  .site-header__inner {
    padding: 0 var(--page-padding-x);  /* 20px sur mobile via variable */
  }

  .site-header__logo-block {
    padding-bottom: 24px;
  }
}