/* ─── Pardits - photo treatment system ───────────────────────────────────────
   Audience-relevant photography presented with SVG image masks (organic shapes),
   brand-wine gradient overlays, a soft feTurbulence grain texture, and decorative
   gradient blobs. Pure CSS data-URIs, so it works on every static page with no
   inline SVG defs. Honors the site's OKLCH tokens and dark mode. */

:root{
  /* feTurbulence film grain (desaturated), tiled - gives photos a tactile feel. */
  --pf-grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* Organic SVG mask shapes (fill=white → kept). aspect-ratio matches each viewBox
   so mask-size:100% 100% never distorts the shape. */
.pf--arch{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'><path d='M0 120 L0 46 C0 20 22 0 50 0 C78 0 100 20 100 46 L100 120 Z' fill='white'/></svg>");
  aspect-ratio: 100 / 120;
}
.pf--blob{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M100 6 C146 4 184 34 192 78 C200 120 184 158 150 180 C118 200 74 202 44 180 C14 158 -4 120 6 80 C14 44 40 20 72 11 C81 8 90 7 100 6 Z' fill='white'/></svg>");
  aspect-ratio: 1 / 1;
}
.pf--squircle{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M0 100 C0 22 22 0 100 0 C178 0 200 22 200 100 C200 178 178 200 100 200 C22 200 0 178 0 100 Z' fill='white'/></svg>");
  aspect-ratio: 1 / 1;
}
.pf--leaf{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M8 96 C8 47 47 8 96 8 L192 8 L192 104 C192 153 153 192 104 192 L8 192 Z' fill='white'/></svg>");
  aspect-ratio: 1 / 1;
}
.pf--ticket{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240' preserveAspectRatio='none'><path d='M18 0 H182 V26 C158 29 158 61 182 64 V176 C158 179 158 211 182 214 V240 H18 V214 C42 211 42 179 18 176 V64 C42 61 42 29 18 26 Z' fill='white'/></svg>");
  aspect-ratio: 5 / 6;
}
.pf--wave{
  --pf-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'><path d='M5 40 C35 5 68 12 100 28 C136 46 165 4 195 22 V166 C164 198 130 180 98 166 C63 151 34 195 5 176 Z' fill='white'/></svg>");
  aspect-ratio: 1 / 1;
}

/* Wrapper holds the unclipped decorative gradient blob behind the masked photo. */
.pf-wrap{position:relative; margin:0; display:block;}
.pf-wrap::before{
  content:""; position:absolute; z-index:0; inset:-10% -12% -14% -8%;
  background:
    radial-gradient(60% 55% at 72% 22%, color-mix(in oklab, var(--gold) 60%, transparent), transparent 70%),
    radial-gradient(70% 70% at 28% 82%, color-mix(in oklab, var(--accent) 70%, transparent), transparent 72%);
  filter: blur(34px); opacity:.5; border-radius:50%;
  pointer-events:none;
}
html[data-theme="dark"] .pf-wrap::before{opacity:.42;}

/* The frame itself is NOT masked - it only carries the shape's aspect-ratio and
   the positioning context. Masking it would clip the caption inside it, which is
   exactly what used to cut "Barbiers", "Instituts et soins" and the kickers in
   half on the home gallery. */
.pf{
  position:relative; z-index:1; width:100%;
}

/* The masked layer: photo + tint + grain. drop-shadow follows the mask alpha, so
   the shadow still takes the organic shape. */
.pf__media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  -webkit-mask-image: var(--pf-mask); mask-image: var(--pf-mask);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  filter: drop-shadow(0 28px 42px color-mix(in oklab, var(--accent) 28%, transparent));
}
.pf__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  z-index:0; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pf-focus-left .pf__img{object-position:35% center;}
.pf-focus-right .pf__img{object-position:65% center;}
.pf-wrap:hover .pf__img{transform: scale(1.04);}

/* Brand-wine gradient tint - cohesion + lets captions sit on the photo. */
.pf__media::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(155deg, transparent 38%, color-mix(in oklab, var(--accent) 16%, transparent) 78%, color-mix(in oklab, var(--bg-deep) 55%, transparent) 100%);
  mix-blend-mode: multiply;
}
/* Grain texture overlay. */
.pf__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: var(--pf-grain); background-size:180px 180px;
  mix-blend-mode: overlay; opacity:.42;
}

/* Caption: a sibling of the masked layer, so it is never clipped. Each shape
   declares the inset of its own silhouette at the bottom edge, so the text still
   sits ON the photo rather than floating off the cut-out.
     --cap-x : side inset (the ticket's notches and the blob's curve pull in)
     --cap-y : lift off the bottom edge (curved bottoms rise toward the middle) */
.pf__cap{
  position:absolute; z-index:3;
  left: var(--cap-x, 0); right: var(--cap-x, 0); bottom: var(--cap-y, 0);
  padding:22px 22px 18px; color:#fff;
  display:flex; flex-direction:column; gap:4px;
  text-shadow:0 1px 14px color-mix(in oklab, var(--bg-deep) 80%, transparent);
}
/* Flat-bottomed shapes: the caption can sit right on the edge. */
.pf--arch, .pf--squircle, .pf--leaf{ --cap-x: 0px; --cap-y: 0px; }
/* Ticket: 9% side notches - keep the text clear of them. */
.pf--ticket{ --cap-x: 11%; --cap-y: 2%; }
/* Blob and wave: the bottom edge curves away, so lift and inset the caption. */
.pf--blob{ --cap-x: 12%; --cap-y: 7%; }
.pf--wave{ --cap-x: 9%; --cap-y: 12%; }
.pf__cap-kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; opacity:.92;
}
.pf__cap-title{font-family:'Instrument Serif',serif; font-size:22px; line-height:1.1; letter-spacing:-.01em;}

/* ─── Page layout: photo band (persona pages, after the hero) ──────────────── */
.photo-band{padding:0 0 8px;}
.photo-band__inner{
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
}
.photo-band__inner.is-reversed{grid-template-columns:1fr 1.05fr;}
.photo-band__inner.is-reversed .photo-band__media{order:2;}
.photo-band__copy .section-eyebrow{margin-bottom:14px;}
.photo-band__media{max-width:520px; width:100%; margin-inline:auto;}
.photo-band--narrow .photo-band__media{max-width:440px;}

/* ─── Home: audience gallery ──────────────────────────────────────────────── */
.metiers-gallery{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; margin-top:44px;
}
.metiers-gallery .pf-wrap{max-width:none;}
.metiers-gallery .pf__cap-title{font-size:19px;}
.metiers-gallery .gal-tall{margin-top:-28px;}
.metiers-gallery .gal-low{margin-top:28px;}

/* ─── Hero accent (a single masked photo beside hero copy) ─────────────────── */
.hero-photo{max-width:460px; width:100%; margin-inline:auto;}

@media (max-width: 960px){
  .photo-band__inner, .photo-band__inner.is-reversed{grid-template-columns:1fr; gap:32px;}
  .photo-band__inner.is-reversed .photo-band__media{order:0;}
  .photo-band__media, .photo-band--narrow .photo-band__media{max-width:440px;}
  .metiers-gallery{grid-template-columns:repeat(2, 1fr); gap:20px;}
  .metiers-gallery .gal-tall, .metiers-gallery .gal-low{margin-top:0;}
}
@media (max-width: 520px){
  .metiers-gallery{grid-template-columns:1fr 1fr; gap:14px;}
  .pf__cap{padding:14px 14px 12px;}
  .pf__cap-title{font-size:18px;}
  .metiers-gallery .pf__cap-kicker{font-size:9.5px;}
}

/* ─── Texturized backgrounds (imageLibrary) - gradients × textures × SVG masks ─
   Library photos are desaturated to luminance textures, then re-coloured by brand
   gradients and faded with a soft SVG mask so each band melts into the next. */
:root{
  --tex-paper:     url("/assets/img/textures/paper.webp?v=1.21-20260713");
  --tex-weave:     url("/assets/img/textures/weave.webp?v=1.21-20260713");
  --tex-waves:     url("/assets/img/textures/waves.webp?v=1.21-20260713");
  --tex-wood:      url("/assets/img/textures/wood.webp?v=1.21-20260713");
  --tex-gold:      url("/assets/img/textures/gold.webp?v=1.21-20260713");
  --tex-honeycomb: url("/assets/img/textures/honeycomb.webp?v=1.21-20260713");
  /* Soft top/bottom fade - texture blends seamlessly into adjacent sections. */
  --band-fade: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><linearGradient id='f' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='black'/><stop offset='0.15' stop-color='white'/><stop offset='0.85' stop-color='white'/><stop offset='1' stop-color='black'/></linearGradient><rect width='1' height='1' fill='url(%23f)'/></svg>");
}

/* Cards keep their OWN native surface so body text always has full contrast.
   A full-bleed texture behind card copy hurt readability both ways - it darkened
   light cards (dark text vanished) and lightened dark cards (light text vanished)
   - so it is no longer applied to cards of any kind.

   Only the métier cards carry a texture, because they always sit in a light
   section on a white surface with dark text. The texture lives in ::before at a
   very low opacity, behind the content, and each card gets a different image. */
.metier-card{ position: relative; isolation: isolate; }
.metier-card > *{ position: relative; z-index: 1; }
.metier-card::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius: inherit;
  background-image: var(--card-tex, var(--tex-paper));
  background-size: 300px 300px; background-repeat: repeat;
  opacity: .08;
}
.metier-grid > .metier-card:nth-child(6n+1){ --card-tex: var(--tex-weave); }
.metier-grid > .metier-card:nth-child(6n+2){ --card-tex: var(--tex-waves); }
.metier-grid > .metier-card:nth-child(6n+3){ --card-tex: var(--tex-honeycomb); }
.metier-grid > .metier-card:nth-child(6n+4){ --card-tex: var(--tex-wood); }
.metier-grid > .metier-card:nth-child(6n+5){ --card-tex: var(--tex-gold); }
.metier-grid > .metier-card:nth-child(6n){   --card-tex: var(--tex-paper); }
html[data-theme="dark"] .metier-card::before{ opacity: .05; }

/* Section texture bands - opt-in (.tex-band--*) plus the photo bands and the home
   audience gallery. The textured layer lives in ::before, content is lifted above. */
.tex-band, .photo-band, .metiers-gallery-band{ position:relative; isolation:isolate; }
.tex-band > *, .photo-band > *, .metiers-gallery-band > *{ position:relative; z-index:1; }
.tex-band::before, .photo-band::before, .metiers-gallery-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: var(--band-grad, none), var(--band-tex, none);
  background-repeat:no-repeat; background-size:cover; background-position:center;
  background-blend-mode: multiply, normal;
  -webkit-mask-image: var(--band-fade); mask-image: var(--band-fade);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity: var(--band-op, .5);
}
.tex-band--paper{ --band-tex:var(--tex-paper); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 8%, transparent), transparent 62%); --band-op:.55; }
.tex-band--waves{ --band-tex:var(--tex-waves); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 14%, white 86%), color-mix(in oklab,var(--gold) 9%, white 91%)); --band-op:.42; }
.tex-band--honeycomb{ --band-tex:var(--tex-honeycomb); --band-grad:linear-gradient(160deg, color-mix(in oklab,var(--accent) 10%, transparent), transparent 60%); --band-op:.42; }
.tex-band--wood{ --band-tex:var(--tex-wood); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 18%, transparent), color-mix(in oklab,var(--gold) 14%, transparent)); --band-op:.18; }
.tex-band--gold{ --band-tex:var(--tex-gold); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 50%, transparent), color-mix(in oklab,var(--gold) 32%, transparent)); --band-op:.18; }

/* Defaults for the bands I own. */
.photo-band{ --band-tex:var(--tex-paper); --band-grad:linear-gradient(120deg, color-mix(in oklab,var(--accent) 6%, transparent), transparent 64%); --band-op:.5; }
/* The band texture was loud enough to compete with the four métier photos, which
   are the point of this section. Pulled back so the photography leads. */
/* NOTE: the texture files are mislabelled - assets/img/textures/honeycomb.webp is
   actually a vintage PHOTOGRAPH of a laundry workshop (the real honeycomb is in
   waves.webp). This band used --tex-honeycomb, so a literal laundry was sitting
   behind the four métier photos and competing with them. Use the abstract relief
   instead, and keep it quiet so the photography leads. */
.metiers-gallery-band{ --band-tex:var(--tex-paper); --band-grad:linear-gradient(160deg, color-mix(in oklab,var(--accent) 10%, transparent), transparent 64%); --band-op:.18; }
.metiers-gallery-band::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(52vw,760px); height:72%; right:-8%; top:14%;
  background:
    linear-gradient(105deg, var(--surface) 4%, color-mix(in oklab,var(--surface) 22%,transparent) 62%, color-mix(in oklab,var(--accent) 28%,transparent)),
    url("/assets/img/photos/pardits-salon-interieur.webp?v=1.21-20260713") center/cover no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><radialGradient id='r'><stop offset='42%25' stop-color='white'/><stop offset='100%25' stop-color='black'/></radialGradient><rect width='100' height='100' fill='url(%23r)'/></svg>");
  mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><radialGradient id='r'><stop offset='42%25' stop-color='white'/><stop offset='100%25' stop-color='black'/></radialGradient><rect width='100' height='100' fill='url(%23r)'/></svg>");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  opacity:.14; filter:saturate(.72) contrast(1.05);
}
html[data-theme="dark"] .tex-band::before,
html[data-theme="dark"] .photo-band::before,
html[data-theme="dark"] .metiers-gallery-band::before{ background-blend-mode: screen, soft-light; opacity:.3; }
html[data-theme="dark"] .metiers-gallery-band::after{opacity:.1; mix-blend-mode:luminosity;}

@media (max-width: 720px){
  .metiers-gallery-band::after{width:100%; right:-30%; opacity:.08;}
}

/* ─── Métier cards: a photo strip that melts into the card ────────────────────
   The image is masked with a bottom fade so there is no hard edge against the
   card surface, and NO text ever sits on the photo - the copy keeps the card's
   own background, so contrast is untouched. */
.metier-card__media{
  position:relative; margin:-2px -2px 16px; height:132px; border-radius: inherit;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 58%, transparent 100%);
}
.metier-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
  filter: saturate(.9);
}
.metier-card__media::after{  /* brand tint so six different photos read as one set */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(150deg, transparent 42%, color-mix(in oklab, var(--accent) 22%, transparent) 100%);
  mix-blend-mode: multiply;
}
.metier-card:hover .metier-card__media img{ transform: scale(1.05); }
html[data-theme="dark"] .metier-card__media img{ filter: saturate(.8) brightness(.86); }

/* ─── Final CTA: warm photographic backdrop ───────────────────────────────────
   CRITICAL: this section prints DARK ink on the page's LIGHT background
   (.final-cta h2 = --ink, p = --ink-2). A dark scrim here destroys the contrast,
   so the veil must stay LIGHT: the photo only warms the outer edges, and the
   centre - where the heading, lede and buttons sit - stays on ~solid --bg. */
.final-cta{ position:relative; isolation:isolate; overflow:hidden; }
.final-cta > *{ position:relative; z-index:2; }
.final-cta::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: url("/assets/img/photos/pardits-coupe-detail.webp?v=1.21-20260713") center/cover no-repeat;
  /* keep the photo away from the text: visible only at the two outer edges */
  -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 26%, transparent 74%, black 100%);
  mask-image: linear-gradient(90deg, black 0%, transparent 26%, transparent 74%, black 100%);
  opacity:.22; filter: saturate(.8);
}
.final-cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* light veil: near-solid --bg over the middle 60%, so the dark type keeps
       its full contrast; only the outer edges let the photo through */
    radial-gradient(78% 88% at 50% 50%, var(--bg) 34%, color-mix(in oklab, var(--bg) 86%, transparent) 62%, color-mix(in oklab, var(--bg) 55%, transparent) 100%),
    radial-gradient(50% 60% at 8% 90%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(50% 60% at 94% 8%, color-mix(in oklab, var(--gold) 16%, transparent), transparent 70%),
    var(--pf-grain);
  background-size: auto, auto, auto, 180px 180px;
  background-blend-mode: normal, normal, normal, overlay;
  opacity:.94;
}
html[data-theme="dark"] .final-cta::before{ opacity:.14; }