/* =====================================================================
   DAMREMURS — « le laiton dans la pierre »
   Refonte design : plaque de laiton haussmannienne, encre & pierre.
   Typo : Marcellus (capitales inscriptionnelles) + Albert Sans.
   ===================================================================== */

@font-face {
  font-family: "Marcellus";
  src: url("/assets/fonts/marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("/assets/fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Pierre (fond) — calcaire neutre, hors bande « crème » */
  --pierre: #e8e6e0;
  --pierre-haute: #f1efe9;   /* surface levée : plaque, panneaux */
  --pierre-basse: #ddd9d0;   /* bandeau, séparations */
  /* Encre */
  --encre: #1b1712;
  --encre-2: #23201a;        /* sections sombres */
  --encre-doux: #4a443a;     /* texte secondaire (AA sur pierre) */
  --encre-faible: #6c6459;   /* mentions fines */
  /* Laiton (accent métal unique) */
  --laiton: #967641;         /* décoratif : filets, cadres */
  --laiton-texte: #71562d;   /* laiton pour texte (AA sur les trois fonds pierre) */
  --laiton-clair: #d9be89;   /* reflet */
  --laiton-profond: #5b4626; /* gravure, patine */
  /* Hairlines */
  --regle: rgba(27, 23, 18, 0.14);
  --regle-claire: rgba(27, 23, 18, 0.08);
  --regle-laiton: rgba(150, 118, 65, 0.4);

  --display: "Marcellus", "Times New Roman", Georgia, serif;
  --texte: "Albert Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --maxw: 1140px;
  --mesure: 68ch;
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--texte);
  font-weight: 400;
  background: var(--pierre);
  color: var(--encre);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
a { color: var(--laiton-texte); text-underline-offset: 3px; }
img { max-width: 100%; }
::selection { background: var(--laiton); color: var(--pierre-haute); }

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute; left: 14px; top: -60px; z-index: 100;
  background: var(--encre); color: var(--pierre-haute);
  font-family: var(--texte); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-decoration: none;
  padding: 11px 18px; border-radius: 1px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--laiton); outline-offset: 2px; }

/* Filet-motif de marque : court trait de laiton (remplace l'eyebrow) */
.mark {
  display: block; width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--laiton), var(--laiton-clair));
  margin-bottom: 22px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--pierre) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--regle);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.wordmark {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.3em;
  text-decoration: none;
  color: var(--encre);
}
.main-nav { display: flex; gap: 30px; align-items: center; }
.main-nav a {
  font-family: var(--texte);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-doux);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.main-nav a:hover { color: var(--encre); border-bottom-color: var(--laiton); }
.lang-switch {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  border: 1px solid var(--regle); padding: 6px 11px !important;
  color: var(--encre) !important; border-radius: 1px;
}
.lang-switch:hover { border-color: var(--laiton) !important; }
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--regle); border-radius: 1px;
  font-family: var(--texte); font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--encre-doux);
  padding: 8px 13px; cursor: pointer;
}

/* ---------- Hero : la plaque de laiton ---------- */
.hero {
  position: relative;
  padding: clamp(72px, 12vh, 128px) 28px clamp(56px, 9vh, 96px);
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 32%, rgba(255, 252, 245, 0.9), transparent 70%);
  pointer-events: none;
}
.plaque {
  position: relative;
  display: inline-block;
  padding: clamp(34px, 5vw, 52px) clamp(40px, 7vw, 78px);
  background:
    linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.6) 46%, transparent 58%) no-repeat,
    linear-gradient(158deg, #f5f2ec 0%, #ece7dc 52%, #f2eee5 100%);
  background-size: 240% 100%, 100% 100%;
  background-position: 175% 0, 0 0;
  border-radius: 2px;
  /* cadre laiton double + biseau */
  box-shadow:
    0 0 0 1px var(--laiton-profond),
    0 0 0 4px var(--pierre-haute),
    0 0 0 5px var(--laiton),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 26px 50px -28px rgba(27, 23, 18, 0.5);
  animation: plaque-in 1s var(--ease) both, plaque-sheen 1.5s 0.55s var(--ease) both;
}
/* rivets d'angle */
.plaque::before, .plaque::after {
  content: ""; position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--laiton-clair), var(--laiton-profond));
  box-shadow: 0 0 0 1px rgba(91, 70, 38, 0.4);
}
.plaque::before { top: 13px; left: 13px; }
.plaque::after { bottom: 13px; right: 13px; }
.plaque-sub {
  font-family: var(--texte);
  font-size: clamp(9.5px, 1.4vw, 11px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--laiton-texte);
}
.plaque h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--encre);
  line-height: 1;
  margin: 6px 0;
  /* gravure */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
.plaque .rule {
  height: 1px; width: 64px; margin: 14px auto;
  background: linear-gradient(90deg, transparent, var(--laiton), transparent);
  transform-origin: center;
  animation: rule-in 0.9s 0.45s var(--ease) both;
}
.hero-baseline {
  max-width: 46ch;
  margin: clamp(30px, 5vh, 44px) auto 0;
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  line-height: 1.6;
  color: var(--encre-doux);
  text-wrap: balance;
}
.hero-actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@keyframes plaque-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes plaque-sheen { from { background-position: 175% 0, 0 0; } to { background-position: -55% 0, 0 0; } }
@keyframes rule-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--texte);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 1px; cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn-primary { background: var(--encre); color: var(--pierre-haute); border: 1px solid var(--encre); }
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--encre); border: 1px solid var(--laiton); }
.btn-ghost:hover { background: var(--pierre-haute); border-color: var(--laiton-profond); }

/* ---------- Bandeau registre (faits, façon inscription) ---------- */
.facts {
  border-top: 1px solid var(--regle);
  border-bottom: 1px solid var(--regle);
  background: var(--pierre-basse);
}
.facts .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 52px);
  padding: 26px 28px;
}
.fact { text-align: center; position: relative; }
.fact + .fact::before {
  content: ""; position: absolute; left: calc(-1 * clamp(10px, 2vw, 26px));
  top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--laiton);
}
.fact strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 400;
  color: var(--encre);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.fact small {
  font-family: var(--texte);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--laiton-texte);
}

/* ---------- Sections ---------- */
section.block { padding: clamp(64px, 11vh, 116px) 0; }
section.block.tinted { background: var(--pierre-haute); border-top: 1px solid var(--regle-claire); border-bottom: 1px solid var(--regle-claire); }
.block h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 400;
  color: var(--encre);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin-bottom: 20px;
  text-wrap: balance;
}
.block .lead {
  max-width: var(--mesure);
  color: var(--encre-doux);
  font-size: 1.06rem;
  margin-bottom: 48px;
  text-wrap: pretty;
}

/* Révélation au scroll — SÛRE : contenu visible par défaut, l'animation
   ne fait que rejouer une entrée sur un élément déjà visible. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal.in { animation: rise 0.7s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Timeline registre ---------- */
.registre { border-top: 1px solid var(--regle); max-width: 880px; }
.registre-row {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: clamp(18px, 4vw, 40px);
  padding: 24px 2px;
  border-bottom: 1px solid var(--regle);
  align-items: baseline;
}
.registre-row .an {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--laiton-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.registre-row h3 { font-family: var(--texte); font-size: 1.02rem; font-weight: 600; color: var(--encre); margin-bottom: 4px; }
.registre-row p { color: var(--encre-doux); font-size: 0.98rem; max-width: 60ch; }

/* ---------- Activités (deux colonnes éditoriales, pas de cartes) ---------- */
.volets {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.volet { position: relative; }
.volet + .volet { position: relative; }
.volet h3 {
  font-family: var(--display); font-size: 1.5rem; font-weight: 400;
  color: var(--encre); margin-bottom: 8px;
}
.volet > p { color: var(--encre-doux); font-size: 1.02rem; }
.volet .note {
  font-family: var(--texte);
  font-size: 0.9rem;
  color: var(--encre-doux);
  background: var(--pierre-basse);
  padding: 16px 18px;
  border-top: 2px solid var(--laiton);
  margin-top: 22px;
  border-radius: 1px;
}
section.tinted .volet .note { background: var(--pierre); }
.services { list-style: none; margin-top: 18px; border-top: 1px solid var(--regle); }
.services li {
  padding: 11px 0 11px 26px;
  border-bottom: 1px solid var(--regle-claire);
  font-size: 1rem; color: var(--encre);
  position: relative;
}
.services li::before {
  content: ""; position: absolute; left: 4px; top: 20px;
  width: 8px; height: 1px; background: var(--laiton);
}
.services li em { color: var(--encre-faible); font-style: italic; }

/* ---------- Paiement ---------- */
.pay-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 52px); align-items: start; }
.pay-card {
  background: var(--pierre-haute);
  border: 1px solid var(--regle);
  border-radius: 2px;
  padding: clamp(26px, 4vw, 36px);
  box-shadow: 0 18px 40px -34px rgba(27, 23, 18, 0.6);
}
section.tinted .pay-card { background: var(--pierre); }
.pay-card h3 { font-family: var(--display); font-size: 1.35rem; font-weight: 400; color: var(--encre); margin-bottom: 8px; }
.pay-card > p { color: var(--encre-doux); font-size: 0.98rem; }
.pay-aside { display: grid; gap: 20px; }
.pay-aside .pay-card { box-shadow: none; }

.field { margin-top: 20px; }
.field label {
  display: block;
  font-family: var(--texte);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--laiton-texte);
  margin-bottom: 7px;
}
.field input {
  width: 100%;
  font-family: var(--texte); font-size: 16px;
  color: var(--encre); background: transparent;
  border: none; border-bottom: 1px solid var(--laiton);
  padding: 9px 2px; border-radius: 0;
  transition: border-color 0.2s var(--ease);
}
.field input::placeholder { color: var(--encre-faible); }
.field input:focus { outline: none; border-bottom-color: var(--encre); }
.form-msg {
  margin-top: 16px;
  font-family: var(--texte); font-size: 0.86rem;
  padding: 11px 15px; border-radius: 1px;
  display: none;
}
.form-msg.err { display: block; background: #efe0d7; color: #7a3b22; }
.form-msg.ok { display: block; background: #e2e8da; color: #3c4a30; }
.pay-note {
  margin-top: 44px;
  font-family: var(--texte); font-size: 0.84rem;
  color: var(--encre-doux);
  border-top: 1px solid var(--regle); padding-top: 20px;
  max-width: var(--mesure);
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 56px); }
.contact-card p { margin-bottom: 12px; color: var(--encre-doux); }
.contact-card .adr { font-style: normal; color: var(--encre); font-size: 1.05rem; line-height: 1.7; }
.contact-card a { font-weight: 500; }

/* ---------- Footer (moment sombre : plaque inversée) ---------- */
.site-footer {
  background: var(--encre);
  color: var(--pierre-basse);
  padding: 56px 0 40px;
  font-size: 0.9rem;
}
.site-footer .wrap { display: grid; gap: 20px; }
.site-footer .wordmark { color: var(--pierre-haute); font-size: 17px; letter-spacing: 0.3em; }
.site-footer .legal-line { color: var(--pierre-basse); opacity: 0.72; line-height: 1.7; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; padding: 6px 0; border-top: 1px solid rgba(216, 210, 196, 0.16); }
.site-footer nav { padding-top: 20px; }
.site-footer a { color: var(--laiton-clair); text-decoration: none; font-size: 0.86rem; letter-spacing: 0.02em; }
.site-footer a:hover { color: #fff; }

/* ---------- Pages légales ---------- */
.legal-page { padding: clamp(48px, 8vh, 80px) 0 90px; }
.legal-page .eyebrow {
  font-family: var(--texte); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--laiton-texte);
  display: block; margin-bottom: 14px;
}
.legal-page h1 { font-family: var(--display); font-weight: 400; color: var(--encre); font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: 10px; }
.legal-page > .wrap > p:first-of-type { color: var(--encre-doux); }
.legal-page h2 {
  font-family: var(--display); font-weight: 400; color: var(--encre); font-size: 1.6rem;
  margin: 54px 0 16px; padding-top: 28px; border-top: 1px solid var(--regle);
}
.legal-page h3 { font-family: var(--texte); font-size: 1.02rem; font-weight: 600; color: var(--encre); margin: 24px 0 6px; }
.legal-page p, .legal-page li { color: var(--encre-doux); font-size: 0.98rem; margin-bottom: 10px; max-width: var(--mesure); }
.legal-page ul { padding-left: 24px; }
.legal-page a { font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .volets, .pay-grid, .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--pierre-haute);
    border-bottom: 1px solid var(--regle);
    flex-direction: column; align-items: flex-start;
    padding: 20px 28px; gap: 18px;
  }
  .main-nav.open { display: flex; }
  .registre-row { grid-template-columns: 64px 1fr; }
  .registre-row .an { font-size: 1.2rem; }
  .facts .wrap { gap: 16px 24px; }
  /* Plaque : éviter tout débordement sur petit écran */
  .plaque { max-width: 100%; padding: 30px 22px; }
  .plaque h1 { font-size: clamp(1.7rem, 10.5vw, 2.7rem); letter-spacing: 0.1em; text-indent: 0.1em; }
  .plaque-sub { font-size: 9px; letter-spacing: 0.16em; line-height: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plaque, .plaque .rule { animation: none; }
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}
:focus-visible { outline: 2px solid var(--laiton-profond); outline-offset: 3px; }