/* ─────────────────────────────────────────────────────────────
   POLISH LAYER — anti-template details
   Loaded after each page's inline <style>, overrides where needed.
   ───────────────────────────────────────────────────────────── */

/* ── Grain texture (paper-like) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Section transitions — soft seam, no harsh stripes ── */
section, .services, .contact, .showreel, .hero, .intro, .projets, .process, .cta-final, .filtres {
  position: relative;
}

/* ── Custom selection color ── */
::selection {
  background: rgba(255, 27, 64, 0.18);
  color: var(--dark);
}

/* ── Typo refinements — more character on heads ── */
.hero-title {
  letter-spacing: -0.015em;
}
.section-title,
.intro-left h2,
.projets-header h2,
.process h2,
.cta-final-text h3 {
  letter-spacing: -0.01em;
}

/* Soft underline under italic Playfair words */
.highlight-green,
.highlight-coral,
.highlight {
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 2px;
  padding-bottom: 0.05em;
  opacity: 1;
}

/* ── Hand-drawn asterisks scattered (decorative) ── */
.deco-asterisk {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--coral);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  font-size: 1.4rem;
  transform: rotate(-12deg);
  z-index: 1;
}

/* ── Eyebrow tags: slight wobble on hover ── */
.hero-eyebrow,
.section-tag,
.showreel-label,
.projet-client-type {
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.hero-eyebrow:hover,
.section-tag:hover {
  transform: rotate(-1.5deg) scale(1.02);
}

/* ── Service cards: hand-crafted feel ── */
.service-card {
  border: 1px solid rgba(0,0,0,0.04);
}
.service-card.motion {
  transform: rotate(-0.4deg);
}
.service-card.identite {
  transform: rotate(0.4deg);
}
.service-card:hover {
  transform: translateY(-6px) rotate(0deg) !important;
}

/* ── Buttons: micro-interaction ── */
.hero-cta,
.cta-final-btn,
.service-link {
  position: relative;
  overflow: hidden;
}
.hero-cta::before,
.cta-final-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.hero-cta:hover::before,
.cta-final-btn:hover::before {
  transform: translateX(100%);
}

/* ── Custom corner asymmetry on rounded cards ── */
.work-item,
.projet-thumb,
.projet-card {
  border-top-left-radius: 14px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 22px;
}

/* ── Decorative quote-mark — only on Playfair section titles ── */
.section-title::after {
  content: '·';
  display: inline-block;
  color: var(--coral);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  margin-left: 0.25em;
  opacity: 0.6;
}

/* ── Float badges — slightly tilted, more sticker-like ── */
.float-badge {
  border: 1.5px solid rgba(0,0,0,0.05);
  border-radius: 14px;
}
.float-badge-1 { transform: rotate(3deg); }
.float-badge-2 { transform: rotate(-4deg); }
.float-badge-3 { transform: rotate(2deg); }

/* ── Subtle dashed connector on services grid ── */
@media (min-width: 961px) {
  .services-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--coral) 0, var(--coral) 6px, transparent 6px, transparent 12px);
    transform: translate(-50%, -50%);
    opacity: 0.35;
  }
  .services-grid { position: relative; }
}

/* ── Footer signature ── */
footer::before {
  content: '☼';
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  font-size: 1.1rem;
  color: var(--cream);
  background: var(--dark);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}
footer { position: relative; }

/* ── Disabled grain on small screens (perf) ── */
@media (max-width: 540px) {
  body::after { opacity: 0.02; }
  .service-card.motion,
  .service-card.identite { transform: none; }
}

/* ── Mobile: tone down rotations everywhere ── */
@media (max-width: 540px) {
  .float-badge-1, .float-badge-2, .float-badge-3 { transform: none; }
}

/* ── Print-friendly fallback ── */
@media print {
  body::after { display: none; }
}


/* ─────────────────────────────────────────────────────────────
   UNIFIED CONTAINER PADDING — match homepage indentation
   Section backgrounds keep going edge-to-edge; only the inner
   content gets the same comfortable horizontal padding as the
   homepage hero.
   ───────────────────────────────────────────────────────────── */

/* Same horizontal rhythm on every full-width section */
.hero,
.showreel,
.services,
.contact,
.filtres,
.projets,
.intro,
.services-list,
.process,
.brief,
.contribs,
.gallery,
.result,
.prev-next,
.project-hero,
.breadcrumb,
.page,
footer {
  padding-left: clamp(1.5rem, 8vw, 6rem) !important;
  padding-right: clamp(1.5rem, 8vw, 6rem) !important;
}

/* Hero / project-hero / breadcrumb / contact page have no bg color,
   so we cap them at 1400px and center them. */
.hero,
.project-hero,
.breadcrumb,
.page {
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The CTA "card" already has its own outer margin: normalise */
.cta-final {
  margin-left: clamp(1.5rem, 8vw, 6rem) !important;
  margin-right: clamp(1.5rem, 8vw, 6rem) !important;
  margin-bottom: 4rem !important;
  max-width: calc(1400px - clamp(1.5rem, 8vw, 6rem) * 2);
}

/* Cap inner grids/content so they align with the hero's max-width */
.filtres,
.projets-grid,
.intro,
.brief-inner,
.contribs-inner,
.gallery-inner,
.result-inner,
.prev-next,
.process-steps {
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mobile */
@media (max-width: 960px) {
  .hero, .showreel, .services, .contact, .filtres, .projets,
  .intro, .services-list, .process, .brief, .contribs, .gallery,
  .result, .prev-next, .project-hero, .breadcrumb, .page, footer {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  .cta-final { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
}

@media (max-width: 540px) {
  .hero, .showreel, .services, .contact, .filtres, .projets,
  .intro, .services-list, .process, .brief, .contribs, .gallery,
  .result, .prev-next, .project-hero, .breadcrumb, .page, footer {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .cta-final { margin-left: 1.25rem !important; margin-right: 1.25rem !important; }
}