/*
 * _components/pz-page-header.css
 * Page header luxueux — capitonnage molletonné + losange ornementé.
 * Override progressif de .page-header (legacy _shell/pz.css) en héritant
 * du langage Luxe Granulé 2026.
 *
 * Couches visuelles (du fond vers la lumière) :
 *   1. Base : gradient brun profond → riche → mid (legacy preservé)
 *   2. Capitonnage : pattern losanges répétés en CSS gradients,
 *      simulant un capitonnage cuir/velours luxueux
 *   3. Grain doré subtil aux intersections (highlights molletonnés)
 *   4. Ornement central : losange agrandi avec frise SVG intérieure
 *   5. Frame ornemental : fleurons SVG aux 4 coins du titre
 *   6. Hairline doré : fil d'or filé en bas du header (legacy preservé)
 */

.page-header {
  /* Padding compact : nav + 12px = 84px exactement (= 1 tile capitonné).
   * Conserve l'alignement losange or sur capiton row 2 (centre y=126 au lieu
   * de y=210). Bottom 56px : sobre, lisible, sans avalanche d'espace.
   * Avant : 168/96. Maintenant : 84/56 → -120px de hauteur totale. */
  padding: calc(var(--pz-nav-h, 72px) + 12px) 0 56px;
}

/* ─── Capitonnage molletonné + éclairage (SVG pattern + spots) ──────────
 * Capitonné cuir/velours luxueux : diamants en relief + tufts ombrés
 * + 3 spots d'éclairage rasant fusionnés dans 1 SVG statique pour éviter
 * le "flash" causé par le compositing live des radial-gradients à load.
 *
 * Couches stables (sans animation, sans transition) :
 *   1. Spots éclairage SVG (1 image statique 3 sources)
 *   2. Wash radiale chaude (warmth, gold/red local)
 *   3. Pattern SVG capitonné
 *   4. Grain noir film
 *
 * GPU compositing forcé via will-change + translateZ pour stabilité visuelle. */
.page-header::before {
  /* Force le GPU à allouer une layer pour ::before dès le premier paint :
   * évite le re-render qui causait le "flash" des lampes au load. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-image:
    /* ÉCLAIRAGE — 1 SVG statique avec 3 spots fusionnés (centre + 25% + 75%).
     * Préférable aux 3 radial-gradients séparés : 1 layer composited, pas
     * de re-render à load → fix du "flash" signalé 2026-05-29.
     * width 1200 = largeur container nominal, height 360 = retombée plafonnier. */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='360' preserveAspectRatio='none'><defs><radialGradient id='c' cx='0.5' cy='0' r='0.5'><stop offset='0' stop-color='%23fff0d7' stop-opacity='0.22'/><stop offset='0.4' stop-color='%23fff0d7' stop-opacity='0.07'/><stop offset='1' stop-color='%23fff0d7' stop-opacity='0'/></radialGradient><radialGradient id='l' cx='0.5' cy='0' r='0.5'><stop offset='0' stop-color='%23fff0d7' stop-opacity='0.14'/><stop offset='0.4' stop-color='%23fff0d7' stop-opacity='0.04'/><stop offset='1' stop-color='%23fff0d7' stop-opacity='0'/></radialGradient></defs><ellipse cx='600' cy='-20' rx='360' ry='220' fill='url(%23c)'/><ellipse cx='300' cy='-20' rx='280' ry='180' fill='url(%23l)'/><ellipse cx='900' cy='-20' rx='280' ry='180' fill='url(%23l)'/></svg>"),
    /* Wash radiale chaude (gold/red, restée pour la chaleur globale) */
    radial-gradient(ellipse at 18% 60%, rgba(212, 180, 131, 0.08), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(196, 30, 58, 0.10), transparent 50%),
    /* Capitonnage SVG — losange 84×84 px, tuft central ombré + highlight */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84'><defs><radialGradient id='tuft' cx='0.5' cy='0.5' r='0.5'><stop offset='0' stop-color='%23000' stop-opacity='0.40'/><stop offset='0.5' stop-color='%23000' stop-opacity='0.18'/><stop offset='1' stop-color='%23000' stop-opacity='0'/></radialGradient><radialGradient id='shine' cx='0.5' cy='0.3' r='0.6'><stop offset='0' stop-color='%23c9a14a' stop-opacity='0.22'/><stop offset='0.6' stop-color='%23c9a14a' stop-opacity='0.06'/><stop offset='1' stop-color='%23c9a14a' stop-opacity='0'/></radialGradient></defs><g><path d='M42 0 L84 42 L42 84 L0 42 Z' fill='url(%23shine)' stroke='rgba(201,161,74,0.18)' stroke-width='0.6'/><circle cx='42' cy='42' r='4.5' fill='url(%23tuft)'/><circle cx='42' cy='42' r='1.0' fill='%23c9a14a' opacity='0.55'/></g></svg>"),
    /* Grain noir film */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:
    100% auto, 100% 100%, 100% 100%, 84px 84px, 240px 240px;
  background-repeat:
    no-repeat, no-repeat, no-repeat, repeat, repeat;
  /* Spots SVG ancrés en haut, capitonné centré horizontalement (50%). */
  background-position:
    50% 0, 18% 60%, 82% 78%, 50% 0, 0 0;
  opacity: 1;
  mix-blend-mode: normal;
}

/* ─── Hairline doré filé (legacy preservé, renforcé) ────────────────── */
.page-header::after {
  /* Largeur étendue + glow doré */
  width: 220px;
  background: linear-gradient(90deg,
    transparent,
    rgba(201, 161, 74, 0.4) 25%,
    var(--pz-gold, #c9a14a) 50%,
    rgba(201, 161, 74, 0.4) 75%,
    transparent);
  opacity: 0.78;
  box-shadow: 0 0 16px rgba(201, 161, 74, 0.35);
}

/* ─── Container : ornements ─────────────────────────────────────────── */
.page-header > .container {
  position: relative;
  z-index: 2;
}

/* ─── Losange ornementé (aligné précisément sur un capiton du fond) ─────
 *
 * Maths d'alignement (header compact 84/56) :
 *   - .page-header padding-top = nav(72px) + 12px = 84px exactement
 *   - bg tile = 84×84, background-position = 50% 0 (centré horizontalement)
 *   - Row 1 capitonné : y=0 à 84 (masqué partiellement par la nav)
 *   - Row 2 capitonné : y=84 à 168, centre y=126
 *   - H1 margin-top = 0 → H1 démarre à y=84
 *   - H1::before = 84×84 avec margin: 0 auto → top=84, centre y=126
 *   - Résultat : centre du losange or = centre du capiton row 2.
 *
 * Le SVG ornementé utilise viewBox 0 0 84 84 (mêmes coordonnées que le
 * tile du fond) pour que la silhouette des deux diamants coïncide.
 */
.page-header h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-family: var(--pz-font-display, 'Cormorant Garamond', Georgia, serif);
  font-weight: 500;
  line-height: 1.08;
  margin-top: 0;
  position: relative;
}

.page-header h1::before {
  content: '';
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 84' fill='none'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23e6c878'/><stop offset='0.5' stop-color='%23c9a14a'/><stop offset='1' stop-color='%23b78a32'/></linearGradient></defs><path d='M42 0 L84 42 L42 84 L0 42 Z' stroke='url(%23g)' stroke-width='1.6' fill='none'/><path d='M42 8 L76 42 L42 76 L8 42 Z' stroke='%23c9a14a' stroke-width='0.8' opacity='0.65' fill='none'/><circle cx='42' cy='42' r='3.4' fill='%23e6c878'/><path d='M42 16 L42 28 M42 56 L42 68 M16 42 L28 42 M56 42 L68 42' stroke='%23e6c878' stroke-width='0.8' stroke-linecap='round'/><path d='M30 30 Q 42 36 54 30 M30 54 Q 42 48 54 54' stroke='%23c9a14a' stroke-width='0.7' fill='none' opacity='0.85'/><circle cx='42' cy='4' r='1.4' fill='%23e6c878'/><circle cx='80' cy='42' r='1.4' fill='%23e6c878'/><circle cx='42' cy='80' r='1.4' fill='%23e6c878'/><circle cx='4' cy='42' r='1.4' fill='%23e6c878'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.6))
    drop-shadow(0 0 16px rgba(201, 161, 74, 0.35));
}

/* ─── Ornements latéraux : fleurons en accolades ────────────────────── */
.page-header h1::after {
  content: '';
  display: block;
  width: 200px;
  height: 12px;
  margin: 24px auto 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' fill='none' stroke='%23c9a14a' stroke-width='1.0' stroke-linecap='round'><path d='M2 6 L60 6'/><path d='M140 6 L198 6'/><circle cx='66' cy='6' r='1.2' fill='%23c9a14a'/><path d='M70 6 Q 75 2 80 6 Q 85 10 90 6 Q 95 2 100 6 Q 105 10 110 6 Q 115 2 120 6 Q 125 10 130 6' fill='none'/><circle cx='134' cy='6' r='1.2' fill='%23c9a14a'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.78;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

/* ─── Variant --with-image — image qui apparaît en fondu progressif ────
 * vers les 3/5 du header. La couche image vit dans .page-header__image
 * (élément dédié, évite conflit avec ::before / ::after déjà pris).
 * URL de l'image passée via custom-property --pz-page-image (inline style).
 *
 * Compositing (bottom-up) :
 *   1. page-header bg (brun gradient) — couche 0
 *   2. ::before capitonné + spots — couche 1
 *   3. page-header__image — couche 2, masquée linear-gradient → fondu progressif
 *   4. ::after hairline doré — couche 3
 *   5. container content (z=2) — couche 4
 */
.page-header--with-image {
  isolation: isolate;
}
.page-header__image {
  position: absolute;
  inset: 0;
  background-image: var(--pz-page-image, none);
  background-size: cover;
  /* Position bias TOP : l'image montre son haut (sujet centré-haut), pas
   * le bas. C'est le haut qui reste visible quand la transparence descend. */
  background-position: center 25%;
  /* Masque INVERSÉ : opaque en haut (2/3 hauteur image visible), transparent
   * en bas → on voit l'image dans le haut du header, le capitonné reprend
   * progressivement en bas. Effet "couvercle suspendu" : l'image flotte au
   * premier plan, le pattern resurgit sous elle. */
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.78) 35%,
    rgba(0, 0, 0, 0.50) 55%,
    rgba(0, 0, 0, 0.20) 72%,
    transparent 92%);
  mask-image: linear-gradient(180deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.78) 35%,
    rgba(0, 0, 0, 0.50) 55%,
    rgba(0, 0, 0, 0.20) 72%,
    transparent 92%);
  pointer-events: none;
  z-index: 1;
  /* Ombre portée comme si l'image était un calque flottant au premier plan :
   * shadow projeté vers le bas sur le pattern visible derrière. */
  filter: drop-shadow(0 18px 32px rgba(10, 9, 8, 0.55))
          drop-shadow(0 4px 8px rgba(10, 9, 8, 0.42));
  /* Inset bottom shadow pour ancrer l'image visuellement au pattern */
  box-shadow: inset 0 -32px 48px -16px rgba(10, 9, 8, 0.32);
}

/* L'éclairage rasant (spots en haut) reste au-dessus de l'image grâce à un
 * z-index supérieur sur ::before. Les spots éclairent maintenant l'image
 * directement, créant la sensation de "lampe plafonnière sur tableau". */
.page-header--with-image::before {
  /* Spots restent visibles par-dessus l'image (3 lampes ne sont pas masquées). */
  z-index: 2;
  /* Mix-blend : les spots se déposent en lumière pure sur l'image, pas en
   * surimpression alpha brute. */
  mix-blend-mode: screen;
}
/* Subtitle + breadcrumb doivent rester lisibles SUR l'image — overlay subtil */
.page-header--with-image > .container {
  position: relative;
  z-index: 3;  /* au-dessus image (z=1) + spots (z=2) */
}
.page-header--with-image h1 {
  /* Title sur image en haut : ombrage prononcé pour lisibilité + profondeur */
  text-shadow:
    0 2px 6px rgba(10, 9, 8, 0.65),
    0 8px 32px rgba(10, 9, 8, 0.45),
    0 1px 0 rgba(245, 233, 212, 0.10);
}
.page-header--with-image h1::before,
.page-header--with-image h1::after {
  /* Losange ornement + frise : drop-shadow pour qu'ils respirent sur l'image */
  filter: drop-shadow(0 2px 4px rgba(10, 9, 8, 0.55))
          drop-shadow(0 0 16px rgba(201, 161, 74, 0.35))
          drop-shadow(0 8px 20px rgba(10, 9, 8, 0.40));
}
.page-header--with-image p {
  /* Lisibilité renforcée sur fond image (haut) : text-shadow + halo doux */
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(10, 9, 8, 0.45);
}
.page-header--with-image .breadcrumb {
  /* Pill breadcrumb gagne un ombrage subtil pour décoller du pattern */
  box-shadow: 0 4px 16px rgba(10, 9, 8, 0.35);
}

/* ─── Eyebrow (voix de marque, AU-DESSUS du H1) ───────────────────────────
 * Doctrine heading-seo-keyword-eyebrow-charm : le H1 porte le mot-clé
 * searchable, l'eyebrow porte la voix de marque. Utilisé par avis/pizza/
 * reservation/blog mais jamais stylé jusqu'ici (rendait en span nu) — comblé
 * 2026-06-27. Mono doré champagne, espacé, posé au-dessus de l'ornement losange. */
.page-header__eyebrow {
  display: block;
  font-family: var(--pz-font-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pz-gold-3, #e6c878);
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(10, 9, 8, 0.55);
}

/* ─── Subtitle (le `<p>` après le h1) ────────────────────────────────── */
.page-header p {
  font-family: var(--pz-font-body, 'Inter', sans-serif);
  font-size: 1.02rem;
  font-weight: 400;
  font-style: italic;
  margin-top: 22px;
  margin-bottom: 16px;
  color: var(--pz-cream, #ede0c4);
  opacity: 0.92;
  letter-spacing: 0.01em;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* CTA téléphone inline dans le subtitle : highlight or, hover red */
.page-header__phone-cta {
  display: inline-block;
  font-style: normal;
  font-weight: 600;
  color: var(--pz-gold-3, #e6c878);
  text-decoration: none;
  padding: 2px 10px;
  margin: 0 2px;
  border: 1px solid rgba(201, 161, 74, 0.32);
  border-radius: var(--pz-radius-pill, 999px);
  background: rgba(201, 161, 74, 0.08);
  letter-spacing: 0.04em;
  transition:
    background var(--pz-t-quick, 180ms) var(--pz-ease-out),
    border-color var(--pz-t-quick, 180ms) var(--pz-ease-out),
    color var(--pz-t-quick, 180ms) var(--pz-ease-out);
}
.page-header__phone-cta:hover {
  background: var(--pz-gold, #c9a14a);
  border-color: var(--pz-gold, #c9a14a);
  color: var(--pz-ink, #0a0908);
}

/* ─── Breadcrumb : style luxe sobre ──────────────────────────────────── */
.page-header .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  margin-top: 14px;
  background: rgba(10, 9, 8, 0.32);
  border: 1px solid rgba(201, 161, 74, 0.22);
  border-radius: var(--pz-radius-pill, 999px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--pz-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.page-header .breadcrumb a {
  color: var(--pz-gold-3, #e6c878);
  text-decoration: none;
  transition: color var(--pz-t-quick, 180ms);
}
.page-header .breadcrumb a:hover {
  color: var(--pz-ivory, #fbf6ec);
}
.page-header .breadcrumb span {
  color: var(--pz-cream, #ede0c4);
  opacity: 0.6;
}

/* ─── Responsive : ajustement mobile ─────────────────────────────────── */
@media (max-width: 720px) {
  /* Mobile : padding réduit. On préserve l'alignement avec une taille
   * d'ornement = taille de tuile (84px) pour cohérence visuelle. */
  .page-header {
    padding: calc(var(--pz-nav-h, 72px) + 84px) 0 56px;
  }
  .page-header h1::before {
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
  }
  .page-header h1::after {
    width: 160px;
  }
  .page-header p {
    font-size: 0.92rem;
  }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-header h1::before {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  }
}