/* ═══════════════════════════════════════════════════════
   MÉMOIRE DE FER — feuille de style principale
   ═══════════════════════════════════════════════════════ */

/* ─── POLICES ─────────────────────────────────────────── */
/* Déclarées dans css/fonts.css, chargé avant cette feuille par
   chaque page. Fichier séparé parce que les deux formulaires,
   qui ont leur propre CSS en ligne, s'en servent aussi.
   Toutes hébergées localement : aucune requête vers Google. */

/* ─── VARIABLES ───────────────────────────────────────── */
:root {
  --ink:        #18160f;
  /* Ancien : #100e09, soit 1,07:1 avec --ink — un écart que l'œil
     ne perçoit pas. On ne peut pas descendre plus bas sans buter sur
     le noir, donc la bande alternée passe au-dessus de --ink plutôt
     qu'en dessous. 1,15:1 : perceptible, jamais tapageur. */
  --ink-deep:   #262318;
  --ink-black:  #0d0b07;
  --parchment:  #f3efe6;
  --warm-mid:   #c4b48e;   /* or chaud — accent principal */
  --gold-light: #d9c9a3;   /* or clair — liens et état actif du menu */
  /* --accent et --muted servent aux petits textes (étiquettes,
     légendes, sélecteur de langue). Aux tailles concernées, les
     anciennes valeurs (#8b6340 et #6b6254) tombaient à 3,4:1 et
     3,0:1 sur le fond --ink, sous le seuil WCAG AA de 4,5:1 :
     lisibles pour un œil reposé sur bon écran, pas pour les autres.
     Éclaircies au strict nécessaire, teinte et saturation
     inchangées, pour atteindre 4,6:1. */
  --accent:     #a6774d;
  --muted:      #8b7f6d;
  /* --red retiré : plus utilisé nulle part depuis que l'état actif
     du menu est passé à l'or clair. Il tombait à 1,8:1 de toute
     façon, soit illisible. */

  --font-title: 'IM Fell DW Pica', Georgia, serif;
  --font-body:  'Cormorant Garamond', Georgia, serif;
  --font-mono:  'DM Mono', 'Courier New', monospace;

  --site-max: 1440px;
  --site-pad: clamp(1.25rem, 4vw, 3.5rem);
  --site-gutter: max(var(--site-pad), calc((100vw - var(--site-max)) / 2 + var(--site-pad)));
}

/* ─── BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  font-weight: 300;
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* ─── NAVIGATION ──────────────────────────────────────── */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.4rem var(--site-gutter);
  border-bottom: 1px solid rgba(196, 180, 142, 0.15);
  position: sticky;
  top: 0;
  background: var(--ink);
  z-index: 100;
}

.nav__brand {
  font-family: var(--font-title);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}
.nav__brand:hover { color: var(--parchment); }

.nav__menu { display: flex; gap: 2rem; list-style: none; align-items: center; }

.nav__link {
  font-family: var(--font-title);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parchment);
  text-decoration: none;
  transition: color 0.25s;
  white-space: nowrap;
}
.nav__link:hover { color: var(--gold-light); }
/* État actif : or clair (remplace l'ancien rouge) */
.nav__link--active { color: var(--gold-light); }

.nav__item { position: relative; }
.nav__submenu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 0.9rem;
  background: #211d13;
  border: 1px solid rgba(196, 180, 142, 0.18);
  list-style: none;
  padding: 0.4rem 0;
  min-width: 230px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.nav__item:hover .nav__submenu,
.nav__item:focus-within .nav__submenu { opacity: 1; visibility: visible; }

.nav__submenu a {
  display: block;
  padding: 0.5rem 1.2rem;
  font-family: var(--font-title);
  font-size: 0.82rem;
  color: var(--warm-mid);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav__submenu a:hover { color: var(--parchment); background: rgba(196, 180, 142, 0.07); }

/* Sélecteur de langue */
.nav__lang {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
.nav__lang a { color: var(--muted); text-decoration: none; transition: color 0.2s; }
.nav__lang a:hover { color: var(--parchment); }
.nav__lang a.is-current { color: var(--gold-light); }
.nav__lang span { color: rgba(107, 98, 84, 0.6); }

.nav__toggle {
  display: none;
  background: none; border: none;
  color: var(--warm-mid);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
}

/* ─── PIED DE PAGE ────────────────────────────────────── */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem var(--site-gutter);
  border-top: 1px solid rgba(196, 180, 142, 0.12);
  margin-top: auto;
}
.footer__brand {
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--warm-mid);
  text-decoration: none;
  transition: color 0.25s;
}
.footer__brand:hover { color: var(--parchment); }
.footer__socials { display: flex; gap: 0.9rem; }
.footer__socials a {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(196, 180, 142, 0.3);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, background 0.25s;
}
.footer__socials a:hover { border-color: var(--warm-mid); background: rgba(196, 180, 142, 0.08); }
.footer__socials svg { width: 15px; height: 15px; fill: var(--warm-mid); }

/* ═══════════════════════════════════════════════════════
   ACCUEIL — bandeau
   ═══════════════════════════════════════════════════════ */

.hero {
  position: relative;
  width: 100%;
  margin-top: 2rem;          /* dégage le menu collant */
  background: var(--ink-black);
  overflow: hidden;
}

.hero__media { position: relative; }

.hero__img {
  width: 100%;
  height: clamp(440px, 64vh, 700px);
  object-fit: cover;
  object-position: center;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(18, 16, 10, 0.93) 0%,
    rgba(18, 16, 10, 0.74) 38%,
    rgba(18, 16, 10, 0.30) 62%,
    rgba(18, 16, 10, 0.06) 80%,
    transparent 100%
  );
}

/* Colonne texte plus large qu'avant (1.35fr contre 1fr) */
.hero__inner {
  position: absolute;
  inset: 0;
  padding: 2.5rem var(--site-gutter) 3.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.hero__text p {
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  line-height: 1.72;
  font-style: italic;
  color: var(--parchment);
  margin-bottom: 1rem;
  max-width: 58ch;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.hero__signature {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--warm-mid);
  text-align: right;
  max-width: 58ch;
  margin-top: 1.4rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.hero__titleblock {
  align-self: start;
  justify-self: end;
  text-align: right;
  padding-top: 0.5rem;
}
/* Le titre n'est plus un lien */
.hero__title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--parchment);
  display: inline-block;
  border-bottom: 2px solid var(--parchment);
  padding-bottom: 0.1em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
.hero__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.95rem, 1.4vw, 1.3rem);
  color: var(--parchment);
  margin-top: 1rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}

/* La légende devient le lien vers la fiche de la pièce */
.hero__caption {
  position: absolute;
  bottom: 1.1rem;
  right: var(--site-gutter);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  color: var(--gold-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 201, 163, 0.35);
  padding-bottom: 0.25em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95);
  transition: color 0.25s, border-color 0.25s;
}
.hero__caption:hover { color: var(--parchment); border-color: var(--parchment); }

/* ═══════════════════════════════════════════════════════
   RÉALISATIONS — blocs pleine largeur
   ═══════════════════════════════════════════════════════ */

.piece {
  position: relative;
  width: 100%;
  margin-bottom: 2.5rem;
  background: var(--ink-black);
  overflow: hidden;
}
.piece:first-of-type { margin-top: 2rem; }   /* dégage le menu collant */
.piece:last-of-type  { margin-bottom: 0; }

.piece__media { position: relative; }

.piece__img {
  width: 100%;
  height: clamp(400px, 56vh, 600px);
  object-fit: cover;
}

.piece__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(18, 16, 10, 0.92) 0%,
    rgba(18, 16, 10, 0.70) 40%,
    rgba(18, 16, 10, 0.24) 62%,
    transparent 82%
  );
}

/* Bloc texte élargi */
.piece__body {
  position: absolute;
  inset: 0;
  padding: 2.5rem var(--site-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 900px;
}

.piece__title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 400;
  color: var(--parchment);
  text-decoration: none;
  display: inline-block;
  align-self: flex-start;
  border-bottom: 2px solid var(--parchment);
  padding-bottom: 0.08em;
  margin-bottom: 0.7rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  transition: color 0.25s, border-color 0.25s;
}
a.piece__title:hover { color: var(--gold-light); border-color: var(--gold-light); }

.piece__subtitle {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--warm-mid);
  margin-bottom: 1.2rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.piece__text {
  font-size: clamp(0.92rem, 1.15vw, 1.06rem);
  line-height: 1.75;
  color: var(--parchment);
  max-width: 64ch;
  margin-bottom: 1rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.piece__materials {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
  max-width: 64ch;
  line-height: 1.7;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* ═══════════════════════════════════════════════════════
   PAGES INTÉRIEURES
   ═══════════════════════════════════════════════════════ */

.page-header {
  padding: 3.5rem var(--site-gutter) 2.5rem;
  border-bottom: 1px solid rgba(196, 180, 142, 0.12);
}
.page-header__title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  color: var(--parchment);
}

.section { padding: 3.5rem var(--site-gutter); }
.section--deep { background: var(--ink-deep); }

.section__title {
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 400;
  color: var(--parchment);
  margin-bottom: 1.4rem;
}

.prose { max-width: 70ch; }
.prose p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(243, 239, 230, 0.8);
  margin-bottom: 1rem;
}
.prose ul { list-style: none; margin-bottom: 1rem; }
.prose li {
  font-size: 1.02rem;
  line-height: 1.8;
  color: rgba(243, 239, 230, 0.8);
  margin-bottom: 0.85rem;
  padding-left: 1.1rem;
  position: relative;
}
.prose li::before { content: '–'; position: absolute; left: 0; color: var(--accent); }
.prose a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--parchment); }
.prose strong { color: var(--parchment); font-weight: 400; }

.rule {
  height: 1px;
  background: rgba(196, 180, 142, 0.12);
  margin: 2.5rem 0;
  max-width: 70ch;
}

.layout-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 4rem;
  align-items: start;
  padding: 3.5rem var(--site-gutter);
}

/* À côté du cartouche, le texte occupe toute sa colonne.
   Sans cela, le plafond de 70ch hérité de .prose l'arrête à 534 px
   et laisse plus de 500 px de vide avant l'encadré « Commander ».
   Le trait de séparation (.rule) porte le même plafond : il faut le
   lever aussi, sinon il s'arrête au milieu du paragraphe.
   Uniquement en deux colonnes : en dessous de 901 px la mise en page
   passe sur une seule colonne et le plafond redevient utile. */
@media (min-width: 901px) {
  .layout-aside .prose,
  .layout-aside .rule { max-width: none; }
}

/* ─── Bouton « Commander » avec sa flèche ─────────────── */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid var(--warm-mid);
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.cta:hover { background: var(--warm-mid); color: var(--ink); border-color: var(--warm-mid); }

.cta__arrow { width: 46px; height: 10px; flex-shrink: 0; overflow: visible; }
.cta__arrow * { stroke: currentColor; fill: none; stroke-width: 1.1; }
.cta__arrow circle { fill: currentColor; stroke: none; }
.cta__arrow .shaft { transition: transform 0.3s ease; transform-origin: left center; }
.cta:hover .cta__arrow .shaft { transform: scaleX(1.18); }
.cta__arrow .tip { transition: transform 0.3s ease; }
.cta:hover .cta__arrow .tip { transform: translateX(5px); }

.cta--inline {
  display: inline-flex;
  margin-top: 1.5rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}

.aside__cta { margin-bottom: 2rem; }

.aside__block {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(196, 180, 142, 0.12);
}
.aside__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.aside__value {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--warm-mid);
}

.form-embed {
  width: 100%;
  border: none;
  min-height: 780px;
  display: block;
}

.empty-state { padding: 5rem var(--site-gutter); text-align: center; }
.empty-state__title {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--warm-mid);
  margin-bottom: 1rem;
}
.empty-state__text { font-size: 1.1rem; font-style: italic; color: var(--muted); }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* Tablette : le texte reprend toute la largeur */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; }
  .hero__text p { max-width: none; }
  .piece__body { max-width: none; padding-right: 28%; }
  .piece__text, .piece__materials { max-width: none; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE
   Le texte revient SUR l'image, mais le bloc ne peut plus
   déborder : la hauteur est pilotée par le contenu
   (min-height + image en fond), donc si le texte s'allonge
   c'est l'image qui s'étire, pas le texte qui dépasse.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Bandeau d'accueil ── */
  .hero {
    margin-top: 0;
    position: relative;
    min-height: 100svh;
    background: var(--ink);
  }

  /* L'image passe en fond et couvre toute la hauteur du bloc */
  .hero__media { position: absolute; inset: 0; }
  .hero__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

  /* Sombre en haut (titre) et en bas (texte), clair au milieu (la lame) */
  .hero__gradient {
    background: linear-gradient(to bottom,
      rgba(18, 16, 10, 0.82) 0%,
      rgba(18, 16, 10, 0.48) 18%,
      rgba(18, 16, 10, 0.28) 34%,
      rgba(18, 16, 10, 0.62) 55%,
      rgba(18, 16, 10, 0.90) 72%,
      rgba(18, 16, 10, 0.97) 100%);
  }

  /* Le texte redevient un flux vertical : titre en haut, prose en bas */
  .hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100svh;
    margin-top: 0;
    padding: 2rem var(--site-gutter) 4rem;
    gap: 1.5rem;
  }

  .hero__titleblock {
    order: -1;                /* le titre repasse en premier */
    justify-self: start;
    text-align: left;
    padding-top: 0;
  }
  .hero__title { font-size: clamp(2.1rem, 9.5vw, 2.9rem); }
  .hero__subtitle { font-size: 1rem; margin-top: 0.7rem; }

  .hero__text p {
    font-size: 0.92rem;
    line-height: 1.65;
    max-width: none;
    margin-bottom: 0.8rem;
  }
  .hero__signature { text-align: left; max-width: none; margin-top: 1rem; }

  /* La légende disparaît sur mobile : elle mange de la place et la pièce
     reste accessible juste en dessous, dans « Dernières Réalisations ». */
  .hero__caption { display: none; }

  /* ── Blocs pièce ── */
  .piece {
    margin-bottom: 2rem;
    position: relative;
    min-height: 86svh;
    background: var(--ink);
  }
  .piece:first-of-type { margin-top: 0; }

  .piece__media { position: absolute; inset: 0; }
  .piece__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

  .piece__gradient {
    background: linear-gradient(to bottom,
      rgba(18, 16, 10, 0.28) 0%,
      rgba(18, 16, 10, 0.20) 26%,
      rgba(18, 16, 10, 0.60) 48%,
      rgba(18, 16, 10, 0.90) 70%,
      rgba(18, 16, 10, 0.97) 100%);
  }

  .piece__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 86svh;
    max-width: none;
    margin-top: 0;
    padding: 2rem var(--site-gutter) 2.4rem;
  }

  .piece__title { font-size: clamp(1.7rem, 7.5vw, 2.2rem); margin-bottom: 0.6rem; }
  .piece__subtitle { font-size: 0.9rem; margin-bottom: 1rem; }
  .piece__text { font-size: 0.93rem; line-height: 1.68; max-width: none; }
  .piece__materials { max-width: none; font-size: 0.68rem; }

  /* ── Reste ── */
  .layout-aside { grid-template-columns: 1fr; gap: 2.5rem; }
  .latest { padding-top: 3rem; padding-bottom: 3.5rem; }
  .latest__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.9rem; }
  .latest__overlay { opacity: 1; }
  .latest__name { font-size: 1rem; transform: none; }
  .latest__meta { font-size: 0.55rem; transform: none; }

  .section, .page-header { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .form-embed { min-height: 900px; }
}

/* Menu mobile */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .nav__toggle { display: block; order: 2; }
  .nav__lang { order: 1; margin-left: auto; margin-right: 1rem; }
  .nav__menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    order: 3;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(196, 180, 142, 0.12);
    margin-top: 0.9rem;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu > li { width: 100%; }
  .nav__link { display: block; padding: 0.75rem 0; font-size: 0.85rem; }

  .nav__submenu {
    position: static;
    transform: none;
    opacity: 1; visibility: visible;
    background: none;
    border: none;
    border-left: 1px solid rgba(196, 180, 142, 0.2);
    margin: 0 0 0.6rem 0.6rem;
    padding: 0;
    min-width: 0;
  }
  .nav__submenu a { text-align: left; padding: 0.5rem 1rem; font-size: 0.8rem; }

  .footer { justify-content: center; text-align: center; }
}

/* ─── Accessibilité ───────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--warm-mid);
  color: var(--ink);
  padding: 0.7rem 1.2rem;
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════
   PLANCHES — remplacement de la grille « Dernières Réalisations »
   ═══════════════════════════════════════════════════════

   Ce que l'ancienne version faisait, et pourquoi on l'abandonne :

   1. repeat(auto-fit, minmax(240px, 1fr)) — trois colonnes égales.
      Chaque pièce reçoit exactement le même poids visuel. C'est
      neutre, donc muet : rien ne dit ce qu'il faut regarder.

   2. Le titre n'apparaissait qu'au survol. Sur téléphone, le survol
      n'existe pas : la moitié des visiteurs ne voyait jamais le nom
      des pièces. Une information utile ne doit pas être cachée
      derrière un geste que l'appareil ne sait pas faire.

   3. Toutes les images forcées au même format 3/4. Une photo de
      lame est horizontale par nature ; la recadrer en portrait la
      dessert.

   Ici : une planche majeure, deux mineures, légendes toujours
   visibles, numéros de planche comme dans un catalogue de musée.
   La hiérarchie est franche — c'est ce qui distingue une mise en
   page décidée d'une grille automatique.
   ═══════════════════════════════════════════════════════ */

.plates { padding: 5rem var(--site-gutter) 6rem; }

/* Titre, filet, mention — le filet occupe l'espace restant, ce qui
   donne une ligne de tête d'ouvrage plutôt qu'un titre centré. */
.plates__head {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.plates__title {
  font-family: var(--font-title);
  font-size: 2.6rem;          /* taille choisie, pas un clamp() */
  font-weight: 400;
  line-height: 1;
  color: var(--parchment);
  white-space: nowrap;
}
.plates__rule {
  flex: 1;
  height: 1px;
  background: rgba(196, 180, 142, 0.28);
}
.plates__count {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Colonnes délibérément inégales (≈ 1,62 : 1).
   La planche majeure occupe les deux rangées de gauche. */
.plates__grid {
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  column-gap: 3.5rem;
  row-gap: 3rem;
  align-items: start;
}
.plate--major { grid-column: 1; grid-row: 1 / span 2; }
.plate--minor { grid-column: 2; }

.plate__link { display: block; overflow: hidden; background: var(--ink-black); }
.plate__link img {
  width: 100%;
  display: block;
  transition: transform 0.7s ease;
}
/* Chaque photo garde un format qui lui convient. */
.plate--major .plate__link img { aspect-ratio: 3 / 2;  object-fit: cover; }
.plate--minor .plate__link img { aspect-ratio: 4 / 5;  object-fit: cover; }

.plate__link:hover img,
.plate__link:focus-visible img { transform: scale(1.03); }

/* Légende toujours lisible, jamais au survol.
   Numéro de planche en retrait, comme dans la marge d'un ouvrage. */
.plate__caption {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 1rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(196, 180, 142, 0.2);
}
.plate__num {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 0.42em;
}
.plate__text { display: flex; flex-direction: column; gap: 0.35rem; }

.plate__title {
  font-family: var(--font-title);
  color: var(--parchment);
  text-decoration: none;
  line-height: 1.15;
  transition: color 0.25s;
}
.plate--major .plate__title { font-size: 1.9rem; }
.plate--minor .plate__title { font-size: 1.2rem; }
.plate__title:hover { color: var(--gold-light); }

.plate__meta {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(243, 239, 230, 0.72);
}
.plate--minor .plate__meta { font-size: 0.88rem; }

.plate__mat {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  color: var(--warm-mid);
  margin-top: 0.3rem;
}

/* Sous 900 px : une seule colonne, la majeure d'abord.
   L'ordre de lecture reste le même, la hiérarchie aussi. */
@media (max-width: 900px) {
  .plates { padding-top: 3.5rem; padding-bottom: 4rem; }
  .plates__grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .plate--major, .plate--minor { grid-column: 1; grid-row: auto; }
  .plates__title { font-size: 1.9rem; }
  .plates__count { display: none; }
  .plate--major .plate__title { font-size: 1.5rem; }
  .plate__caption { grid-template-columns: 2.8rem 1fr; }
}


/* ─── Vignettage au survol ─────────────────────────────
   L'ancienne grille assombrissait l'image pour révéler le texte.
   Le texte est maintenant à l'extérieur, mais la sensation de
   « quelque chose répond » était bonne : on la garde sous forme de
   vignettage, qui resserre le regard vers le centre de l'image au
   lieu de la masquer. */
.plate__link { position: relative; }
.plate__link::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(13, 11, 7, 0) 40%,
    rgba(13, 11, 7, 0.30) 78%,
    rgba(13, 11, 7, 0.62) 100%);
  opacity: 0;
  transition: opacity 0.55s ease;
}
.plate__link:hover::after,
.plate__link:focus-visible::after { opacity: 1; }

/* Le filet de la légende s'éclaire en même temps : le lien et sa
   légende réagissent ensemble, comme un seul objet. */
.plate:hover .plate__caption { border-top-color: rgba(196, 180, 142, 0.45); }
.plate__caption { transition: border-color 0.55s ease; }


/* ═══════════════════════════════════════════════════════
   CONTACT — le formulaire d'abord
   ═══════════════════════════════════════════════════════
   Avant : cinq sections de texte, puis le formulaire tout en bas,
   avec un bouton « Commander » en haut pour sauter par-dessus.
   Le bouton était le symptôme : on ne contourne pas une page bien
   ordonnée. Le formulaire passe donc en premier, et le texte
   devient ce qu'il aurait toujours dû être — de la documentation
   que l'on consulte si on en a besoin.

   Le cartouche des délais reste à côté du formulaire : « quand
   aurai-je une réponse ? » est précisément la question qu'on se
   pose en train de le remplir. */

.commande { padding: 3rem var(--site-gutter) 4rem; }

.commande__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 4rem;
  align-items: start;
}

.commande__lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(243, 239, 230, 0.82);
  max-width: 60ch;
  margin-bottom: 2rem;
}

/* Le cartouche suit la lecture pendant qu'on remplit le formulaire. */
.commande__aside { position: sticky; top: 7rem; }

.commande__note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 1.4rem;
}

@media (max-width: 900px) {
  .commande { padding-top: 2rem; }
  .commande__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Sur mobile le cartouche passe AVANT le formulaire : les délais
     tiennent en trois lignes et répondent à la question d'entrée. */
  .commande__aside { position: static; order: -1; }
  .commande__lead { font-size: 1.05rem; margin-bottom: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════
   BANDEAU — variante « frontispice »  (.hero--plate)
   ═══════════════════════════════════════════════════════
   Le bandeau actuel pose le texte sur la photo derrière un
   dégradé. C'est la solution universelle au problème « du texte
   sur une image » — donc celle qu'on voit partout.

   Ici, pas de dégradé : un panneau plein à bord franc, posé sur
   la photo comme une étiquette collée sur une planche. Le bord
   net est une décision ; un dégradé est un évitement.

   Et la signature devient un vrai bloc. C'était la ligne la plus
   humaine du site, en petit et en gris, en bas à droite.
   ═══════════════════════════════════════════════════════ */

.hero--plate { background: var(--ink-black); }
.hero--plate .hero__media { position: absolute; inset: 0; }
/* Image inversée horizontalement : la lame se trouve du côté
   gauche de la photo, donc masquée par le panneau. Le miroir la
   ramène dans la partie visible. À noter — la pièce apparaît
   inversée ; sans conséquence sur un poignard quasi symétrique,
   mais à vérifier avant d'appliquer le même traitement à une
   pièce nettement asymétrique. */
.hero--plate .hero__img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 38% center;
  transform: scaleX(-1);
}

.hero--plate .hero__panel {
  position: relative;
  z-index: 2;
  width: min(50%, 620px);
  min-height: clamp(520px, 72vh, 760px);
  margin-left: var(--site-gutter);
  padding: 3.2rem 3rem 2.6rem;
  background: rgba(24, 22, 15, 0.94);
  border-right: 1px solid rgba(196, 180, 142, 0.22);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.8rem;
}

.hero--plate .hero__title {
  font-size: 3.4rem;              /* taille choisie */
  border-bottom: none;
  text-shadow: none;
  line-height: 1;
}
.hero--plate .hero__subtitle {
  margin-top: 0.7rem; text-shadow: none;
  font-size: 1.1rem; color: var(--warm-mid);
}
.hero--plate .hero__titleblock { text-align: left; padding: 0; }

.hero--plate .hero__text p {
  font-size: 1rem; line-height: 1.75; max-width: none;
  text-shadow: none; margin-bottom: 0.9rem;
}

/* La signature : un bloc, pas une note de bas de page. */
.hero--plate .hero__sign { display: flex; flex-direction: column; gap: 0.25rem; }
.hero--plate .hero__signrule {
  width: 46px; height: 1px; background: var(--warm-mid); margin-bottom: 0.9rem;
}
.hero--plate .hero__signname {
  font-family: var(--font-title); font-size: 1.45rem; color: var(--parchment);
}
/* La mention est plus longue qu'avant : crénage resserré et pas de
   capitales forcées, sinon elle passe à la ligne et perd son allure
   de mention manuscrite en bas de lettre. */
.hero--plate .hero__signplace {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--accent);
}

.hero--plate .hero__caption { bottom: 1.2rem; right: var(--site-gutter); }

@media (max-width: 900px) {
  .hero--plate .hero__panel {
    width: auto; margin: 0; min-height: 100svh;
    border-right: none; padding: 2.4rem var(--site-gutter) 3.5rem;
    background: rgba(24, 22, 15, 0.90);
  }
  .hero--plate .hero__title { font-size: 2.3rem; }
  .hero--plate .hero__caption { display: none; }
}

/* ─── Retour au formulaire ───────────────────────────── */
.retour { text-align: center; padding-top: 2.5rem; padding-bottom: 4.5rem; }
.retour__texte {
  font-family: var(--font-body); font-style: italic; font-size: 1.05rem;
  color: rgba(243, 239, 230, 0.7); max-width: 46ch;
  margin: 0 auto 1.6rem; line-height: 1.7;
}


/* ─── Corrections bandeau ───────────────────────────────
   Le panneau était décalé de la gouttière, ce qui laissait une
   bande de photo inutile à sa gauche et repoussait la lame sous
   le texte. Il vient maintenant au bord, et la photo occupe tout
   ce qui reste — la lame est visible en entier. */
/* Deux pieges ici.

   1) padding-left vaut --site-gutter pour que le texte s'aligne sur
      le reste du site. Mais cette gouttiere grandit avec l'ecran
      (296 px a 1920) : a largeur de panneau fixe, elle mangeait le
      texte de l'interieur et faisait passer le titre sur deux lignes
      sur les grands ecrans. La largeur inclut donc la gouttiere, ce
      qui donne une colonne de texte constante quelle que soit la
      taille de l'ecran.

   2) Cette regle doit rester dans une requete min-width, sinon,
      placee en fin de feuille, elle repasse devant la version
      mobile definie plus haut et le panneau se retrouve a 175 px
      de large sur telephone. */
@media (min-width: 901px) {
  /* Retrait unique, servant a la fois de marge (bande de photo a
     gauche) et de padding interne (air avant le texte).

     Pourquoi plafonne : au-dela de 1440 px la gouttiere du site
     grandit, parce que le contenu est centre dans une largeur
     maximale. Aligner le texte du bandeau sur cette gouttiere
     donnait 246 px de vide a l'interieur du panneau a 1920 px.
     Or le bandeau est pleine largeur : il n'a pas a suivre la
     colonne centree du reste du site.

     Effet de bord heureux : tant que la gouttiere reste sous
     96 px — donc jusqu'a environ 1440 — marge + padding valent
     exactement la gouttiere, et le titre reste aligne sur
     MEMOIRE DE FER dans la navigation. Au-dela, le panneau reste
     colle a gauche et la photo prend toute la place gagnee. */
  .hero--plate .hero__panel {
    --hero-inset: min(calc(var(--site-gutter) * 0.5), 3rem);
    margin-left: var(--hero-inset);
    padding-left: var(--hero-inset);
    width: min(58%, calc(var(--hero-inset) + clamp(360px, 34vw, 440px) + 3rem));
    border-left: 1px solid rgba(196, 180, 142, 0.22);
  }
  .hero--plate .hero__title { font-size: 3.2rem; }
}
}
.hero--plate .hero__img { object-position: 30% center; }

/* La légende était trop discrète pour être lue. Plus grande,
   graisse 400 au lieu de 300, et un fond sombre qui la décolle
   de la photo au lieu de compter sur une ombre portée. */
.hero--plate .hero__caption {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--parchment);
  background: rgba(13, 11, 7, 0.72);
  padding: 0.5em 0.9em;
  border-bottom: none;
  bottom: 1.5rem;
}
.hero--plate .hero__caption:hover { color: var(--gold-light); background: rgba(13, 11, 7, 0.88); }

/* ─── Légendes des pièces, sans numérotation ────────────
   « Pl. » suppose une planche dans un ouvrage publié. Ce sont des
   pièces, pas des planches : la colonne de numéro disparaît et la
   légende part au fil du texte. */
.plate__caption { grid-template-columns: 1fr; gap: 0; }

/* ─── Marque dans le pied de page ───────────────────────
   Un seul endroit, en grand : une marque de forgeron signe
   l'ensemble, elle ne se répète pas à chaque objet. */
.footer__mark { display: flex; align-items: center; margin-right: 1rem; }
.footer__marksvg, .footer__mark svg {
  width: 36px; height: auto; color: var(--warm-mid);
  opacity: 0.85;
  transition: opacity 0.3s ease, color 0.3s ease, transform 0.45s ease;
}
/* Le survol etait trop discret pour se remarquer : la marque
   s'eclaire franchement et grandit un peu, comme un poincon qu'on
   approche de la lumiere. */
.footer:hover .footer__mark svg {
  opacity: 1; color: var(--parchment); transform: scale(1.12);
}
@media (max-width: 860px) {
  .footer__mark { margin-right: 0; margin-bottom: 0.4rem; width: 100%; justify-content: center; }
}


/* ─── Cadrage des trois photos ──────────────────────────
   Les sources : poignard 2400x1600 (3:2), truelle et dague
   1000x1500 (2:3). Chaque photo a donc besoin d'un traitement
   different, et les forcer au meme cadre est ce qui produisait
   les defauts.

   POIGNARD — affiche exactement a son ratio natif : rien n'etait
   rogne, l'objet flottait au milieu du cadre. Agrandi de 12 %
   pour resserrer sur la lame.

   TRUELLE — source en 2:3 affichee en 4:5 : la difference etait
   prise en haut et en bas, et coupait la pointe du fourreau. Le
   cadre revient au ratio natif, plus rien n'est rogne.

   DAGUE — meme source, mais ici le rognage est utile : il retire
   le mur en haut de l'image. On garde donc le 4:5 et on decale le
   cadrage vers le bas. */

/* Le zoom de base et celui du survol se composent, sinon le
   survol annulerait le cadrage. */
.plate__link img { --zoom: 1; transform: scale(var(--zoom)); }
.plate__link:hover img,
.plate__link:focus-visible img { transform: scale(calc(var(--zoom) * 1.03)); }

.plate--major .plate__link img { --zoom: 1.12; object-position: center 45%; }

.plate--truelle .plate__link img { aspect-ratio: 2 / 3; }

.plate--dague .plate__link img { object-position: center 72%; }