/* ═══════════════════════════════════════════════════════════════════════════
   PAGES TATOUAGE — feuille partagée par les pages « contenu » du studio
   (tatouages-albi.html, tatouages-cover-up.html, tarifs-tatouage.html)

   Dépend de style.css pour : les variables de palette, .s-head/.s-title/
   .s-eyebrow/.s-num, .btn, .price-note, .faq-item, .tear, .text-band,
   .section-nav, nav, footer, .action-bar.

   Ici : uniquement les blocs propres à ces pages, pour ne pas gonfler
   style.css ni dupliquer 40 lignes de balisage dans chaque fichier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── En-tête de page ─────────────────────────────────────────────────────── */
.tat-page-header {
  padding: calc(var(--nav-h, 80px) + clamp(18px, 4vw, 42px)) var(--sec-pad-x, 6vw) clamp(28px, 5vw, 52px);
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.tat-page-header .s-eyebrow { justify-content: center; }
.tat-page-header .s-title { text-align: center; }

.tat-back {
  display: inline-block;
  margin-bottom: 22px;
  font-family: var(--raw);
  font-size: .72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.tat-back:hover { color: var(--gold); border-bottom-color: var(--gold); }

.tat-intro {
  max-width: 68ch;
  margin: 26px auto 0;
  color: var(--cream-50);
  font-size: var(--fs-body);
  line-height: 1.75;
}
.tat-intro strong { color: var(--cream); font-weight: 600; }
.tat-intro em { color: var(--gold); font-style: normal; }

.tat-splat {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* ── Bandeau d'ancrage local ─────────────────────────────────────────────── */
.tat-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 30px auto 0;
  max-width: 900px;
  padding: 0;
  list-style: none;
}
.tat-facts li {
  font-family: var(--raw);
  font-size: .7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-50);
  border: 1px solid var(--gold-line);
  background: rgba(212, 168, 37, .03);
  padding: 7px 13px;
}
.tat-facts li b { color: var(--gold); font-weight: 400; }

/* ── Grille de cartes générique ──────────────────────────────────────────── */
.tat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(286px, 1fr));
  gap: clamp(20px, 3vw, 34px);
  max-width: 1180px;
  margin: 0 auto;
}

.tat-card {
  border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(212, 168, 37, .035), rgba(0, 0, 0, .22));
  padding: clamp(22px, 3vw, 32px);
  position: relative;
  transition: border-color .35s, transform .35s;
}
.tat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 42px; height: 2px;
  background: var(--gold);
  opacity: .55;
}
.tat-card:hover { border-color: rgba(212, 168, 37, .38); transform: translateY(-3px); }

.tat-card-tag {
  font-family: var(--raw);
  font-size: .64rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.tat-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--white);
  margin: 0 0 12px;
  letter-spacing: .5px;
}
.tat-card p {
  color: var(--ash);
  font-size: var(--fs-body);
  line-height: 1.68;
  margin: 0;
}
.tat-card p + p { margin-top: 12px; }
.tat-card em { color: var(--cream-50); font-style: italic; }
.tat-card strong { color: var(--cream); font-weight: 600; }

/* ── Styles de tatouage : carte avec visuel ──────────────────────────────── */
.tat-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  max-width: 1180px;
  margin: 0 auto;
}

.tat-style {
  border: 1px solid var(--gold-line);
  background: rgba(0, 0, 0, .28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .35s;
}
.tat-style:hover { border-color: rgba(212, 168, 37, .38); }

.tat-style figure {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0a0a;
}
.tat-style img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.32) contrast(1.06);
  transition: filter .5s, transform .6s;
}
.tat-style:hover img { filter: grayscale(0) contrast(1.1); transform: scale(1.03); }

.tat-style figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(0, 0, 0, .88), transparent);
  font-family: var(--raw);
  font-size: .64rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream-50);
}

.tat-style-body { padding: clamp(20px, 2.6vw, 28px); flex: 1; }
.tat-style-body h3 {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--white);
  margin: 0 0 11px;
}
.tat-style-body p {
  color: var(--ash);
  font-size: var(--fs-body);
  line-height: 1.68;
  margin: 0;
}
.tat-style-body p + p { margin-top: 11px; }
.tat-style-body strong { color: var(--cream); font-weight: 600; }

/* ── Liste à puces sobre ─────────────────────────────────────────────────── */
.tat-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  max-width: 74ch;
}
.tat-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  color: var(--ash);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.tat-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: .1em;
  color: var(--gold);
  opacity: .6;
  font-size: .68rem;
}
.tat-list li strong { color: var(--cream); font-weight: 600; }
.tat-list li em { color: var(--cream-50); font-style: italic; }

/* ── Encart « à retenir » ────────────────────────────────────────────────── */
.tat-callout {
  max-width: 860px;
  margin: 0 auto;
  border-left: 2px solid var(--gold);
  background: rgba(212, 168, 37, .045);
  padding: clamp(20px, 3vw, 30px) clamp(22px, 3vw, 36px);
}
.tat-callout h3 {
  font-family: var(--raw);
  font-size: .7rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.tat-callout p {
  color: var(--cream-50);
  font-size: var(--fs-body);
  line-height: 1.72;
  margin: 0;
}
.tat-callout p + p { margin-top: 12px; }
.tat-callout strong { color: var(--cream); font-weight: 600; }

/* ── Grille tarifaire (réutilise le motif de la page piercings) ──────────── */
.tat-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
  max-width: 1080px;
  margin: 0 auto;
}
.tat-price-col {
  border: 1px solid var(--gold-line);
  background: rgba(0, 0, 0, .26);
  padding: clamp(20px, 2.6vw, 28px);
}
.tat-price-col h3 {
  font-family: var(--raw);
  font-size: .72rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.tat-price-col .tat-price-note {
  color: var(--ash);
  font-size: .84rem;
  margin: 0 0 16px;
  line-height: 1.55;
}
.tat-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(212, 168, 37, .12);
  font-size: var(--fs-body);
}
.tat-price-row:last-child { border-bottom: none; }
.tat-price-row .tp-name { color: var(--cream); }
.tat-price-row .tp-dots { flex: 1; border-bottom: 1px dotted rgba(212, 168, 37, .2); transform: translateY(-4px); }
.tat-price-row .tp-val { color: var(--gold); font-family: var(--raw); font-size: .86rem; letter-spacing: 1px; }

/* ── Étapes numérotées (cover-up, déroulé de séance) ─────────────────────── */
.tat-steps { max-width: 900px; margin: 0 auto; position: relative; }
.tat-steps::before {
  content: '';
  position: absolute;
  top: 0; left: 34px;
  width: 2px; height: 100%;
  background: repeating-linear-gradient(180deg, var(--gold) 0, var(--gold) 6px, transparent 6px, transparent 12px);
  opacity: .12;
}
.tat-step {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin-bottom: 52px;
  position: relative;
}
.tat-step:last-child { margin-bottom: 0; }
.tat-step-n {
  width: 68px;
  min-width: 68px;
  text-align: center;
  font-family: var(--gothic);
  font-size: 1.9rem;
  color: var(--gold);
  position: relative;
  z-index: 2;
  line-height: 1;
}
.tat-step-body { padding-top: 2px; }
.tat-step-t {
  font-family: var(--raw);
  font-size: 1rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.tat-step-d {
  color: var(--ash);
  font-size: var(--fs-body);
  line-height: 1.68;
  max-width: 62ch;
}
.tat-step-d strong { color: var(--cream); font-weight: 600; }

/* ── FAQ (réutilise .faq-item de style.css, on ne fait qu'espacer) ───────── */
.tat-faq-list { max-width: 860px; margin: 0 auto; }

/* ── Infos pratiques + CTA final ─────────────────────────────────────────── */
.tat-infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 32px);
  max-width: 1000px;
  margin: 0 auto;
}
.tat-info-block {
  border: 1px solid var(--gold-line);
  background: rgba(0, 0, 0, .26);
  padding: clamp(20px, 2.6vw, 28px);
}
.tat-info-eyebrow {
  font-family: var(--raw);
  font-size: .64rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 8px;
}
.tat-info-title {
  font-family: var(--gothic);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--white);
  margin-bottom: 14px;
}
.tat-info-block p {
  color: var(--cream-50);
  font-size: var(--fs-body);
  line-height: 1.68;
  margin: 0;
}
.tat-info-block a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212, 168, 37, .3); }
.tat-info-block a:hover { border-bottom-color: var(--gold); }
.tat-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(212, 168, 37, .12);
  font-size: var(--fs-body);
  color: var(--cream-50);
}
.tat-hours-row:last-child { border-bottom: none; }
.tat-hours-row.is-closed { color: var(--ash); opacity: .72; }

.tat-cta {
  text-align: center;
  margin-top: clamp(38px, 6vw, 64px);
}
.tat-cta h2 {
  font-family: var(--gothic);
  font-size: clamp(1.9rem, 5vw, 3rem);
  color: var(--white);
  margin: 0 0 18px;
  text-shadow: 3px 3px 0 rgba(212, 168, 37, .06);
}
.tat-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ── Stabilisation typographique (CLS de substitution de police) ─────────── */

/* `.s-title` n'avait aucune `line-height` : elle héritait du `1.7` du body, soit
   une boîte de ligne de ~163 px pour un titre de 96 px. La hauteur de cette boîte
   dépendait donc des métriques de la police — et changeait au moment où la police
   gothique remplaçait le repli, poussant tout le contenu de la page vers le bas.
   Mesuré sur Piercings en 390 px : CLS 0,28 dont une partie venait de là.
   Une hauteur de ligne explicite rend la boîte indépendante de la police. */
.s-title { line-height: 1.05; }

/* Avec `font-display: block`, le titre est masqué tant que la police gothique
   n'est pas arrivée : sa boîte se réduisait alors à zéro et tout ce qui suit
   remontait, avant de redescendre au chargement de la police. On réserve donc la
   hauteur d'une ligne (1,05 × la taille du titre, plafonnée à 6rem comme la
   police) pour que la substitution ne déplace plus rien. */
.s-title { min-height: calc(1.05 * clamp(3rem, 8vw, 6rem)); }

/* Même raison pour les gros titres de ces pages. */
.bb-title,
.tat-cta h2,
.tat-info-title { line-height: 1.1; }

/* ── Lien contextuel dans une carte d'avis (index) ───────────────────────── */
/* .rm-text porte flex:1, ce qui pousse tout ce qui suit vers le bas de la
   carte : le lien doit donc se placer ENTRE le texte et .rm-author, et retirer
   la marge basse du texte pour que l'écart ne soit pas doublé. */
.rm-text:has(+ .rm-link) { margin-bottom: 8px; }
.rm-link {
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}
.rm-link a {
  font-family: var(--raw);
  font-size: .68rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dashed rgba(212, 168, 37, .45);
  transition: color .3s, border-color .3s;
}
.rm-link a:hover { color: var(--gold-hot); border-bottom-color: var(--gold-hot); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tat-steps::before { left: 26px; }
  .tat-step { gap: 20px; margin-bottom: 42px; }
  .tat-step-n { width: 52px; min-width: 52px; font-size: 1.55rem; }
  .tat-facts { gap: 8px; }
  .tat-facts li { font-size: .62rem; letter-spacing: 1.4px; padding: 6px 10px; }
  .tat-cta-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tat-card, .tat-style, .tat-style img { transition: none; }
  .tat-card:hover { transform: none; }
  .tat-style:hover img { transform: none; }
}