/* TissArt — feuille du site. N'utilise QUE les tokens de theme.css. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  overflow-x: hidden;
}

/* ─── le fond gravé : trame croisée + vignette dérivante ─── */
.hatch, .vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hatch {
  background-image:
    repeating-linear-gradient(45deg, var(--hatch) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 7px);
}
.vignette {
  background: radial-gradient(120% 90% at 50% 40%, transparent 38%, var(--vignette) 100%);
  animation: vignette-drift 28s ease-in-out infinite;
  will-change: transform;
}
@keyframes vignette-drift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%      { transform: scale(1.08) translate(1.5%, -1%); }
}

.page { position: relative; z-index: 1; }

.shell {
  width: min(100% - var(--space-4), 76rem);
  margin-inline: auto;
}

img { max-width: 100%; }

a { color: inherit; }

:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── langage typographique du cabinet ─── */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin: 0;
}

/* petites capitales gravées : surtitres, légendes, numéros */
.smallcaps {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
  margin: 0;
}

/* chiffre romain sérif — l'étiquette d'un spécimen */
.numeral {
  font-family: var(--font-display);
  font-weight: 400;
  font-variant-numeric: oldstyle-nums;
  color: var(--brand);
  letter-spacing: 0.08em;
}

/* filet orné mais retenu */
.rule {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-6) 0;
}

/* lien qui se dessine, comme tracé à la plume */
.link-draw {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 1px;
  transition: background-size var(--speed) ease, color var(--speed) ease;
}
.link-draw:hover, .link-draw:focus-visible {
  background-size: 100% 1px;
  color: var(--brand);
}

/* ─── boutons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  text-decoration: none;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  transition: background var(--speed) ease, color var(--speed) ease,
              translate var(--speed) ease;
}
.btn--solid { background: var(--brand); color: var(--on-brand); }
.btn--solid:hover, .btn--solid:focus-visible { translate: 0 -2px; }
.btn--ghost { background: transparent; color: var(--brand); }
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--brand);
  color: var(--on-brand);
  translate: 0 -2px;
}

/* ─── la planche de spécimen : double filet + légende numérotée ───
   Le composant signature du site. Réutilisé par le portfolio. */
.plate { margin: 0; }
.plate__frame {
  position: relative;
  border: 1px solid var(--border);
  padding: var(--plate-gap);
  background: var(--surface-alt);
}
.plate__frame::after {
  content: "";
  position: absolute;
  inset: var(--plate-gap);
  border: 1px solid var(--border);
  pointer-events: none;
  z-index: 1;
}
.plate__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.plate__caption {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.plate__caption .numeral { flex: none; }

/* coins de cadre : quatre équerres hairline autour d'une section */
.frame-corners { position: relative; }
.frame-corners::before,
.frame-corners::after {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
}
.frame-corners::before {
  top: 0; left: 0;
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
}
.frame-corners::after {
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
}

/* ─── navigation : logo centré, filets de part et d'autre ─── */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: var(--space-3);
  transition: padding var(--speed) ease, /* lint-ok: layout-transition — la condensation nav-morph EST un changement de padding ; le figer ferait sauter la barre au 80e pixel */
              background var(--speed) ease,
              box-shadow var(--speed) ease, backdrop-filter var(--speed) ease;
}
.nav.is-scrolled {
  padding-block: var(--space-1);
  background: var(--surface-veil);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
.nav__inner {
  width: min(100% - var(--space-4), 76rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
.nav__side {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.nav__side--right { justify-content: flex-end; }
.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--on-surface);
  white-space: nowrap;
}
.nav__logo:hover, .nav__logo:focus-visible { color: var(--brand); }
.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--on-surface);
  padding: var(--space-1);
  cursor: pointer;
  line-height: 0;
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .nav__close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__close { display: block; }
.nav__toggle[aria-expanded="true"] .nav__open { display: none; }

.nav__panel { display: none; }

@media (max-width: 60rem) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__side { display: none; }
  .nav__toggle { display: block; justify-self: end; }
  .nav__logo { justify-self: start; }

  .nav__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--speed) ease; /* lint-ok: layout-transition — repli du menu mobile, la seule alternative étant une hauteur fixe codée en dur */
  }
  .nav__panel[data-open="true"] { grid-template-rows: 1fr; }
  .nav__panel > div { overflow: hidden; }
  .nav__panel a {
    display: block;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
  }
  .nav__panel .nav__panel-inner {
    width: min(100% - var(--space-4), 76rem);
    margin-inline: auto;
    padding-block: var(--space-2) var(--space-3);
  }
  /* Menu ouvert : fond PLEIN. Un voile translucide laissait le titre du
     héros transparaître derrière les liens — illisible. */
  .nav.is-open {
    background: var(--surface);
    box-shadow: 0 1px 0 var(--border);
  }
}

/* ─── héros : la planche maîtresse, épinglée à droite ─── */
.hero {
  padding-block: calc(var(--space-12) + var(--space-6)) var(--space-12);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-8);
  align-items: center;
}
.hero__kicker { margin-bottom: var(--space-3); }
.hero__title {
  font-size: var(--text-hero);
  margin-bottom: var(--space-4);
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand);
}
.hero__lede {
  max-width: 40ch;
  color: var(--muted);
  margin: 0 0 var(--space-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  font-size: var(--text-sm);
  color: var(--muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  max-width: 46ch;
}
.hero__meta .sep { color: var(--border-strong); }

/* Les photos du portfolio sont verticales et de rapports très variables
   (celle-ci fait ~1:2,55 — un panneau de côtes entier). La planche épouse
   donc l'image plutôt que l'inverse : hauteur plafonnée, cadre au cordeau. */
.hero__plate { max-width: 26rem; margin-inline: auto; }
.hero__plate .plate__frame {
  width: fit-content;
  margin-inline: auto;
}
.hero__plate .plate__frame img {
  width: auto;
  height: auto;
  max-height: 60vh;
}
.hero__plate .plate__caption { max-width: 30ch; margin-inline: auto; }

@media (max-width: 60rem) {
  .hero { padding-block: var(--space-16) var(--space-8); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero__plate { max-width: 22rem; }
  .hero__plate .plate__frame img { max-height: 60vh; }
}

/* En colonne étroite les coordonnées s'empilent en colophon : la ligne
   se brisait en laissant un « · » orphelin en fin de ligne. */
@media (max-width: 30rem) {
  .hero__meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .hero__meta .sep { display: none; }
}

/* ─── rythme générique de section ─── */
.section { padding-block: var(--space-12); }
.section--alt { background: var(--surface-alt); color: var(--on-surface-alt); }
.section__head { max-width: 58ch; margin: 0 0 var(--space-8); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__kicker { margin-bottom: var(--space-2); }
.section__title { font-size: var(--text-2xl); margin: 0; }
.section__lede { color: var(--muted); max-width: 62ch; margin: var(--space-2) 0 0; }
.section__foot { margin-top: var(--space-6); }

/* ─── en-tête des pages intérieures : même signature que le héros, en réduit ─── */
.page-hero { padding-block: calc(var(--space-12) + var(--space-3)) var(--space-6); }
.page-hero__title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.page-hero__lede { color: var(--muted); max-width: 62ch; margin: 0; }

/* ─── mur du cabinet : columns masonry — la planche épouse l'image, jamais l'inverse ─── */
.wall {
  columns: 3 16rem;
  column-gap: var(--space-4);
}
.wall__item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  transition: translate var(--speed) ease, border-color var(--speed) ease;
}
.wall__item:hover { translate: 0 -4px; }
.wall__item:hover .plate__frame,
.wall__item:hover .plate__frame::after { border-color: var(--border-strong); }
@media (max-width: 60rem) { .wall { columns: 2 14rem; } }
@media (max-width: 30rem) { .wall { columns: 1; } }

/* ─── index gravé des spécialités : PAS de cartes, une liste numérotée ─── */
.specimens { list-style: none; margin: 0; padding: 0; }
.specimens__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}
.specimens__item:last-child { border-bottom: 1px solid var(--border); }
.specimens__num { font-size: var(--text-lg); }
.specimens__title { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.specimens__desc { margin: 0; color: var(--muted); max-width: 54ch; }
.specimens__price { font-family: var(--font-display); color: var(--brand); white-space: nowrap; }
@media (max-width: 40rem) {
  .specimens__item { grid-template-columns: auto 1fr; }
  .specimens__price { grid-column: 2; padding-top: var(--space-1); }
}

/* ─── bande dédiée (recouvrement) : équerres hairline, enfin utilisées ─── */
.band { background: var(--surface-alt); color: var(--on-surface-alt); padding-block: var(--space-12); }
.band__frame { padding: var(--space-6); }
.band__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: center; }
.band__media .plate__frame { max-width: 20rem; margin-inline: auto; }
@media (max-width: 60rem) {
  .band__grid { grid-template-columns: 1fr; }
  .band__media { order: -1; }
}

/* ─── portrait de l'artiste : planche + texte ─── */
.artiste__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: center; }
.artiste__media .plate__frame { max-width: 20rem; margin-inline: auto; }
.artiste__credentials { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.artiste__credentials li { display: flex; gap: var(--space-2); align-items: baseline; }
@media (max-width: 60rem) { .artiste__grid { grid-template-columns: 1fr; } }

/* ─── témoignages : avis Google réels, attribués ─── */
.reviews__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-6); }
.reviews__score { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); color: var(--brand); }
.reviews__score small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--muted); }
.reviews__stars { display: inline-flex; gap: 2px; }
.reviews__stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.reviews__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.reviews__card {
  margin: 0;
  border: 1px solid var(--border);
  padding: var(--space-4);
  transition: translate var(--speed) ease, border-color var(--speed) ease;
}
.reviews__card:hover { translate: 0 -4px; border-color: var(--border-strong); }
.reviews__quote { margin: 0 0 var(--space-3); color: var(--on-surface); }
.reviews__author { font-size: var(--text-sm); color: var(--muted); }
.reviews__link { display: inline-block; margin-top: var(--space-6); }
@media (max-width: 60rem) { .reviews__grid { grid-template-columns: 1fr; } }

/* ─── salon : horaires + coordonnées ─── */
.salon__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.salon__card { border: 1px solid var(--border); background: var(--surface-alt); padding: var(--space-6); }
.salon__cardhead { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.salon__icon { color: var(--brand); line-height: 0; }
.salon__icon svg { width: 20px; height: 20px; }
.salon__cardtitle { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.salon__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.salon__table td { padding: var(--space-1) 0; }
.salon__table tr + tr td { border-top: 1px solid var(--border); }
.salon__day { color: var(--on-surface-alt); }
.salon__time { text-align: right; color: var(--muted); }
.salon__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.salon__item { display: flex; gap: var(--space-2); align-items: flex-start; }
.salon__item svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 0.2em; }
.salon__value { color: var(--on-surface-alt); text-decoration: none; font-style: normal; }
.salon__value:hover { color: var(--brand); }
@media (max-width: 60rem) { .salon__grid { grid-template-columns: 1fr; } }

/* ─── pied de page ─── */
.site-footer { background: var(--surface-alt); color: var(--on-surface-alt); border-top: 1px solid var(--border); }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: var(--space-8); padding-block: var(--space-12) var(--space-6); }
.site-footer__brand { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.site-footer__about { margin: 0; max-width: 32ch; color: var(--muted); }
.site-footer__heading { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--muted); margin: 0 0 var(--space-3); }
.site-footer__nav, .site-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__nav a, .site-footer__contact a { color: var(--on-surface-alt); text-decoration: none; }
.site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--brand); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--muted);
}
.site-footer__legal a { color: var(--muted); text-decoration: none; }
.site-footer__legal a:hover { color: var(--brand); }
@media (max-width: 60rem) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ─── portfolio : groupes par univers ─── */
.portfolio__group { margin-bottom: var(--space-12); }
.portfolio__group:last-child { margin-bottom: 0; }
.portfolio__grouptitle { margin-bottom: var(--space-4); }

/* ─── recouvrement : le processus en trois temps ─── */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.process__step { border-top: 1px solid var(--border-strong); padding-top: var(--space-3); }
.process__num { display: block; margin-bottom: var(--space-2); }
.process__title { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.process__desc { margin: 0; color: var(--muted); }
@media (max-width: 60rem) { .process { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ─── carte d'attente : honnête, jamais une fausse preuve ─── */
.placeholder { border: 1px dashed var(--border-strong); padding: var(--space-8); text-align: center; }
.placeholder__title { font-family: var(--font-display); color: var(--on-surface); margin: 0 0 var(--space-2); }
.placeholder__text { margin: 0; color: var(--muted); }

/* ─── paire avant/après : les étiquettes sont déjà dans l'image ─── */
.coverup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 50rem) { .coverup-pair { grid-template-columns: 1fr; } }

/* ─── formulaire de réservation ─── */
.resa { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-8); align-items: start; }
.resa-form { display: flex; flex-direction: column; gap: var(--space-3); }
.resa-field { display: flex; flex-direction: column; gap: var(--space-1); }
.resa-field label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--muted);
}
.resa-field input, .resa-field select, .resa-field textarea {
  background: var(--surface-alt);
  color: var(--on-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
  font: inherit;
}
.resa-field input:focus-visible, .resa-field select:focus-visible, .resa-field textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-color: var(--brand);
}
.resa-radios { display: flex; gap: var(--space-4); padding-top: var(--space-1); }
.resa-radios label {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-base); color: var(--on-surface);
  text-transform: none; letter-spacing: normal;
}
.resa-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resa-submit { align-self: flex-start; margin-top: var(--space-2); cursor: pointer; }
.resa-submit[disabled] { opacity: 0.6; cursor: wait; }
.resa-status { margin: 0; }
.resa-status[data-state="error"] { border-inline-start: 3px solid var(--brand); padding-inline-start: 0.75em; }
.resa-status[data-state="sent"] { color: var(--brand); }
.resa-aside { border: 1px solid var(--border); background: var(--surface-alt); padding: var(--space-6); }
.resa-aside__title { font-family: var(--font-display); margin: 0 0 var(--space-3); }
.resa-aside__list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.resa-aside__list a { color: var(--brand); text-decoration: none; }
.resa-aside__note { font-size: var(--text-sm); color: var(--muted); margin: 0; }
@media (max-width: 60rem) { .resa { grid-template-columns: 1fr; } }

/* ─── confidentialité : page de texte simple ─── */
.legal { max-width: 68ch; }
.legal h2 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
.legal p, .legal li { color: var(--muted); }
.legal p { margin: 0 0 var(--space-3); }

/* ─── réduction du mouvement : tout se fige, rien ne disparaît ─── */
@media (prefers-reduced-motion: reduce) {
  .vignette { animation: none; }
  .nav, .btn, .link-draw { transition: none; }
  .nav__panel { transition: none; }
  .wall__item, .reviews__card { transition: none; }
}