/* ==========================================================================
   CHERRY BLOSSOM TATTOO — surcouche
   --------------------------------------------------------------------------
   Même direction artistique que Darkside (nuit, or, hairlines, whitespace),
   mais une personnalité distincte :

   · TYPOGRAPHIE — Marcellus reprend les empattements évasés et les proportions
     romaines du blason peint sur la vitrine, mais en version fine et calme :
     une seule graisse, beaucoup d'air, aucune agressivité. Oswald en très
     maigre rappelle le lettrage condensé de la banderole « TATTOO SHOP ».
     Darkside garde Bodoni Moda + Inter.
   · COULEUR — l'encre est plus froide et plus profonde, le blanc tire vers
     l'os plutôt que vers le crème. L'or reste l'accent unique, commun aux
     deux maisons puisqu'il vient du blason.
   · RYTHME — pas de colonne collante ni de longue liste numérotée ici :
     une intro centrée, des thèmes en grille, et la galerie en pièce
     maîtresse.
   ========================================================================== */

.tattoo-site {
  /* Encre froide plutôt que noir chaud */
  --bg:        #08090b;
  --bg-2:      #0e1013;
  --bg-3:      #14171b;
  --ink:       #050608;

  /* Blanc d'os, légèrement plus froid que le crème de Darkside */
  --fg:        #eceae6;
  --fg-soft:   #bcbcb8;
  --muted:     #7d8085;

  --line:      rgba(236, 234, 230, 0.12);
  --line-soft: rgba(236, 234, 230, 0.06);

  /* Marcellus : la romaine gravée du blason, en plus doux. Oswald : la banderole. */
  --serif:     "Marcellus", Georgia, serif;
  --display:   "Marcellus", Georgia, serif;
  --display-sc:"Marcellus SC", "Marcellus", Georgia, serif;
  --label:     "Oswald", "Inter", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

/* Marcellus n'existe qu'en une graisse, plutôt légère : on peut resserrer
   l'interlignage et grandir sans jamais alourdir la page. */
.tattoo-site .editorial__title,
.tattoo-site .themes__title,
.tattoo-site .gallery__title,
.tattoo-site .manifesto__title,
.tattoo-site .contact__title,
.tattoo-site .steps__title,
.tattoo-site .intro__title,
.tattoo-site .scrub__beat-title {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.002em;
}
.tattoo-site .editorial__title em,
.tattoo-site .themes__title em,
.tattoo-site .gallery__title em,
.tattoo-site .manifesto__title em,
.tattoo-site .contact__title em,
.tattoo-site .scrub__beat-title em {
  font-style: normal;              /* Marcellus ne dessine pas d'italique */
  color: var(--accent);
}

/* Les petits labels reprennent la banderole du blason */
.tattoo-site .eyebrow,
.tattoo-site .nav__links a,
.tattoo-site .nav__cross,
.tattoo-site .btn,
.tattoo-site .filter,
.tattoo-site .meta,
.tattoo-site .footer__nav a,
.tattoo-site .footer__base,
.tattoo-site .shot figcaption,
.tattoo-site .contact__list dt {
  font-family: var(--label);
  font-weight: 300;
}
.tattoo-site .eyebrow { letter-spacing: 0.36em; font-weight: 300; }
.tattoo-site .btn { letter-spacing: 0.22em; font-weight: 300; }

.tattoo-site .nav__brand-mark {
  font-family: var(--display-sc);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.18em;
}
.tattoo-site .nav__brand-sub { font-family: var(--label); }

/* Le wordmark du hero, sur deux lignes */
.wordmark--cherry .wordmark__text {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 8.2vw, 124px);
  line-height: 1.04;
  letter-spacing: 0.06em;
}
.tattoo-site .scrub__tagline { font-family: var(--label); font-weight: 300; letter-spacing: 0.28em; }
.tattoo-site .footer__mark { font-family: var(--display-sc); letter-spacing: 0.12em; }

/* Les tatouages sont déjà en noir et gris : aucune désaturation ni sépia,
   on les montre tels qu'ils sortent de l'atelier. */
.tattoo-site .frame img,
.tattoo-site .shot img { filter: contrast(1.06) brightness(0.98); }
.tattoo-site .frame:hover img,
.tattoo-site .shot:hover img { filter: contrast(1.12) brightness(1.04); }

/* --------------------------------------------------------------------------
   Motifs d'encre flottants
   Injectés par assets/js/floaters.js. Purement ornemental : derrière tout le
   contenu, très peu opaque, et sans aucune interception du pointeur.
   -------------------------------------------------------------------------- */
.floaters {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
/* Le contenu des sections concernées doit passer devant la couche. */
.intro__inner,
.themes__inner,
.steps__inner,
.manifesto__inner,
.contact__inner { position: relative; z-index: 1; }

.floater {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2);
  color: var(--accent);
  opacity: 0.055;
  /* --px / --py viennent du pointeur, --dep de la profondeur du motif */
  transform:
    translate3d(calc(var(--px, 0) * var(--dep, 20px) * -1),
                calc(var(--py, 0) * var(--dep, 20px) * -1), 0)
    rotate(var(--r, 0deg));
  transition: opacity 0.8s var(--ease);
}
.floater svg { width: 100%; height: 100%; display: block; }

/* Dérive lente, propre à chaque motif via --delai / --duree */
.floater::before { content: none; }
.floater {
  animation: derive var(--duree, 22s) ease-in-out var(--delai, 0s) infinite alternate;
}
@keyframes derive {
  from { translate: 0 0; }
  to   { translate: 0 -22px; }
}

/* Curseur d'encre — voir assets/js/ink-cursor.js.
   Un seul canvas plein écran, au-dessus de tout, qui n'intercepte rien.
   Le curseur natif n'est masqué que si le script a effectivement démarré :
   en cas d'échec on garde une flèche, jamais un écran sans pointeur. */
.inkcursor {
  position: fixed; inset: 0; z-index: 400;
  pointer-events: none;
}
.ink-on, .ink-on * { cursor: none; }
/* On rend la main partout où le curseur natif porte une information :
   sélection de texte et champs de saisie. */
.ink-on input, .ink-on textarea { cursor: text; }

/* Profondeurs : plus le motif est « proche », plus il suit la souris */
.floater[data-depth="1"]   { --dep: 34px; }
.floater[data-depth="0.9"] { --dep: 30px; }
.floater[data-depth="0.8"] { --dep: 26px; }
.floater[data-depth="0.7"] { --dep: 22px; }
.floater[data-depth="0.5"] { --dep: 16px; }
.floater[data-depth="0.4"] { --dep: 12px; }

@media (max-width: 820px) {
  /* Sur mobile on garde deux motifs par section, plus petits : le reste
     encombrerait sans rien apporter. */
  .floater:nth-child(n + 3) { display: none; }
  .floater { width: calc(var(--s) * 0.7); height: calc(var(--s) * 0.7);
             margin: calc(var(--s) * -0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .floater { animation: none; transform: rotate(var(--r, 0deg)); }
  .inkcursor { display: none; }
}

/* --------------------------------------------------------------------------
   Intro centrée — remplace l'éditorial asymétrique de Darkside
   -------------------------------------------------------------------------- */
.intro {
  background: var(--bg);
  padding: clamp(110px, 16vh, 210px) var(--pad);
  text-align: center;
}
.intro__inner { max-width: 780px; margin: 0 auto; }
.intro__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.16;
}
.intro__title em { font-style: normal; color: var(--accent); }
.intro__copy {
  margin-top: 34px;
  font-size: var(--t-lede); line-height: 1.85; color: var(--fg-soft);
}
.intro__copy + .intro__copy { margin-top: 20px; }

.intro__rule {
  display: block; width: 1px; height: clamp(48px, 7vh, 84px);
  margin: clamp(38px, 5vh, 62px) auto 0;
  background: linear-gradient(var(--accent), transparent);
}

.intro__facts {
  margin-top: clamp(46px, 6vh, 76px);
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(24px, 5vw, 70px);
}
.intro__fact { display: flex; flex-direction: column; gap: 8px; }
.intro__fact b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px); color: var(--fg);
}
.intro__fact span {
  font-family: var(--label);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------------
   Thèmes en grille — là où Darkside empile une liste numérotée collante
   -------------------------------------------------------------------------- */
.themes { background: var(--bg-2); padding: var(--s-section) var(--pad); }
.themes__inner { max-width: var(--maxw); margin: 0 auto; }
.themes__head { max-width: 640px; margin-bottom: clamp(46px, 6vw, 80px); }
.themes__title {
  font-family: var(--display); font-size: var(--t-h2);
  font-weight: 400; line-height: 1.16;
}

.themes__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-soft);
}
.theme {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  padding: clamp(32px, 3.4vw, 50px) clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 14px;
  transition: background 0.7s var(--ease);
}
.theme::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 0%, rgba(199,164,78,0.10), rgba(199,164,78,0) 62%);
  opacity: 0; transition: opacity 0.7s var(--ease);
}
.theme:hover { background: var(--bg-3); }
.theme:hover::before { opacity: 1; }
.theme__index {
  position: relative;
  font-family: var(--label); font-size: 11px;
  letter-spacing: 0.24em; color: var(--accent);
}
.theme__name {
  position: relative;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.3;
}
.theme__desc {
  position: relative;
  font-size: 13.5px; color: var(--muted); line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Galerie — pièce maîtresse du site
   -------------------------------------------------------------------------- */
.tattoo-site .gallery { background: var(--ink); padding: var(--s-section) var(--pad); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 48px); }
.filter {
  background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0;
  padding: 11px 22px;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft);
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease), background 0.45s var(--ease);
}
.filter:hover { border-color: var(--line-gold); color: var(--fg); }
.filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.filter:active { transform: scale(0.97); }

/* Cadres à angles vifs : les planches de flash se lisent comme des estampes */
.tattoo-site .shot,
.tattoo-site .frame { border-radius: 0; }

.gallery__empty {
  padding: clamp(40px, 6vw, 70px) 0; text-align: center;
  color: var(--muted); font-size: 14px;
}
.gallery__more { margin-top: clamp(34px, 4vw, 54px); font-size: 14px; color: var(--muted); }
.gallery__more a { color: var(--accent); border-bottom: 1px solid var(--line-gold); }
.gallery__more a:hover { color: var(--accent-lite); }

/* --------------------------------------------------------------------------
   Manifeste — citation, pas prose centrée comme chez Darkside
   -------------------------------------------------------------------------- */
.tattoo-site .manifesto { background: var(--bg); text-align: left; }
.tattoo-site .manifesto__inner { max-width: 900px; }
.tattoo-site .manifesto__title { font-size: clamp(26px, 3.6vw, 50px); }
.creed {
  margin: 0; padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--line-gold);
}
.creed p { font-size: var(--t-lede); line-height: 1.9; color: var(--fg-soft); }
.creed p + p { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Comment ça se passe
   Le point commun des bons sites de tatoueurs : répondre avant qu'on demande.
   -------------------------------------------------------------------------- */
.steps { background: var(--bg); padding: var(--s-section) var(--pad); }
.steps__inner { max-width: var(--maxw); margin: 0 auto; }
.steps__head { max-width: 620px; margin-bottom: clamp(44px, 6vw, 76px); }
.steps__title {
  font-family: var(--display); font-size: var(--t-h2);
  font-weight: 400; line-height: 1.16;
}
.steps__title em { font-style: normal; color: var(--accent); }

.steps__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 60px);
}
.step2 {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 26px; border-top: 1px solid var(--line-gold);
}
.step2__index {
  font-family: var(--label); font-size: 11px;
  letter-spacing: 0.24em; color: var(--accent);
}
.step2__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.25;
}
.step2__desc { font-size: 14px; color: var(--muted); line-height: 1.75; max-width: 40ch; }

/* --------------------------------------------------------------------------
   Contact — le brief, puis les trois canaux
   -------------------------------------------------------------------------- */
.tattoo-site .contact { background: var(--bg-2); }
.tattoo-site .contact__inner {
  grid-template-columns: 1fr; max-width: 900px; gap: 0;
}
.tattoo-site .contact__pitch { margin-bottom: clamp(40px, 5vw, 64px); }

/* Le brief : ce qu'il faut écrire, listé noir sur blanc. */
.brief {
  border: 1px solid var(--line-gold);
  background: linear-gradient(160deg, rgba(199,164,78,0.05), rgba(199,164,78,0) 60%);
  padding: clamp(26px, 3.2vw, 44px);
}
.brief__label {
  font-family: var(--label);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px;
}
.brief__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 52px); }
.brief__list li {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 0; border-top: 1px solid var(--line-soft);
}
.brief__list b {
  font-family: var(--display); font-weight: 400;
  font-size: 16px; color: var(--fg);
}
.brief__list span { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

/* Les trois canaux, à parts égales — aucun n'est « le bon » */
.channels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-soft);
  margin-top: clamp(30px, 4vw, 48px);
}
.channel {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(24px, 2.8vw, 36px);
  background: var(--bg-2);
  transition: background 0.6s var(--ease);
}
.channel:hover { background: var(--bg-3); }
.channel__k {
  font-family: var(--label);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.channel__v {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.3;
  color: var(--fg); word-break: break-word;
  transition: color 0.5s var(--ease);
}
.channel:hover .channel__v { color: var(--accent-lite); }
.channel__note { font-size: 12px; color: var(--muted); }

.tattoo-site .contact__list {
  margin-top: clamp(34px, 4vw, 54px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px);
}
.tattoo-site .contact__list > div {
  display: flex; flex-direction: column; gap: 8px;
  grid-template-columns: none;
  padding: 20px 0 0; border-top: 1px solid var(--line-soft); border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .themes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .steps__list { grid-template-columns: 1fr; gap: 0; }
  .step2 { padding: 26px 0; border-top: 1px solid var(--line-soft); }
  .step2:first-child { border-top-color: var(--line-gold); }
  .channels { grid-template-columns: 1fr; }
  .tattoo-site .contact__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .themes__grid { grid-template-columns: 1fr; }
  .filters { gap: 8px; }
  .filter { padding: 10px 16px; font-size: 10px; letter-spacing: 0.12em; }
  .intro__facts { gap: 22px 34px; }
  .brief__list { grid-template-columns: 1fr; }
  .tattoo-site .contact__list { grid-template-columns: 1fr; }
}