/* === base.css — jetons, typographie, primitives de mise en page === */

:root {
  /* --- surfaces --- */
  --hvc-page:        #FCFBF8;
  --hvc-card:        #FFFFFF;
  --hvc-sage:        #EDF0EA;
  --hvc-linen:       #F4EFE7;

  /* --- vert (interactif) --- */
  --hvc-green-deep:  #43503C;
  --hvc-green:       #5A6E52;
  --hvc-green-light: #8C9C83;
  --hvc-green-wash:  #EDF0EA;

  /* --- brun (éditorial) --- */
  --hvc-brown-deep:  #4A3B2E;
  --hvc-brown:       #6E5844;
  --hvc-brown-light: #A08C74;
  --hvc-brown-wash:  #F4EFE7;

  /* --- texte --- */
  --hvc-ink:         #241E18;
  --hvc-ink-2:       #5C544A;
  --hvc-ink-3:       #948A7C;

  /* --- filets & ombres --- */
  --hvc-hairline:        rgba(36, 30, 24, .12);
  --hvc-hairline-strong: rgba(36, 30, 24, .24);
  --hvc-shadow:          0 1px 2px rgba(36, 30, 24, .05);

  /* --- échelle d'espacement --- */
  --hvc-s1: 4px;
  --hvc-s2: 8px;
  --hvc-s3: 16px;
  --hvc-s4: 24px;
  --hvc-s5: 40px;
  --hvc-s6: 64px;
  --hvc-s7: 96px;
  --hvc-s8: 140px;
  --hvc-s9: 200px;

  /* --- typographie --- */
  --hvc-serif: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --hvc-sans:  "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --hvc-t-xl: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  --hvc-t-l:  clamp(2.05rem, 1.4rem + 2.6vw, 3.5rem);
  --hvc-t-m:  clamp(1.6rem, 1.25rem + 1.4vw, 2.35rem);
  --hvc-t-s:  clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --hvc-t-body: 1.0625rem;
  --hvc-t-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --hvc-t-petit: .875rem;
  --hvc-t-micro: .68rem;

  /* --- formes & mouvement --- */
  --hvc-radius:    2px;
  --hvc-radius-ui: 3px;
  --hvc-ease:      260ms cubic-bezier(.4, 0, .2, 1);

  /* --- gabarit --- */
  --hvc-shell-max:   1240px;
  --hvc-shell-pad:   clamp(20px, 5vw, 64px);
  --hvc-header-h:    76px;
}

/* --- corps de page --- */
.hvc-page {
  background-color: var(--hvc-page);
  color: var(--hvc-ink);
  font-family: var(--hvc-sans);
  font-size: var(--hvc-t-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* --- primitives de mise en page --- */
.hvc-shell {
  width: 100%;
  max-width: var(--hvc-shell-max);
  margin-inline: auto;
  padding-inline: var(--hvc-shell-pad);
}

.hvc-shell--etroit { max-width: 860px; }

.hvc-section {
  padding-block: clamp(72px, 9vw, 140px);
}

.hvc-section--serre { padding-block: clamp(56px, 6vw, 96px); }

.hvc-section--sage {
  background-color: var(--hvc-sage);
}

.hvc-section--linen {
  background-color: var(--hvc-linen);
}

.hvc-section--filet {
  border-top: 1px solid var(--hvc-hairline);
}

.hvc-main {
  display: block;
  padding-top: var(--hvc-header-h);
}

/* --- micro-libellé en petites capitales brunes --- */
.hvc-label {
  display: block;
  font-family: var(--hvc-sans);
  font-size: var(--hvc-t-micro);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hvc-brown);
  margin-bottom: var(--hvc-s4);
}

.hvc-label--vert { color: var(--hvc-green-deep); }

/* --- titres --- */
.hvc-titre {
  font-family: var(--hvc-serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--hvc-ink);
}

.hvc-titre--xl { font-size: var(--hvc-t-xl); }
.hvc-titre--l  { font-size: var(--hvc-t-l); }
.hvc-titre--m  { font-size: var(--hvc-t-m); }
.hvc-titre--s  { font-size: var(--hvc-t-s); }

/* --- textes --- */
.hvc-texte {
  color: var(--hvc-ink-2);
  max-width: 66ch;
}

.hvc-texte--lead {
  font-size: var(--hvc-t-lead);
  line-height: 1.6;
  color: var(--hvc-ink);
}

.hvc-texte--muted { color: var(--hvc-ink-3); }

.hvc-texte--petit {
  font-size: var(--hvc-t-petit);
  line-height: 1.65;
}

.hvc-texte--serre { max-width: 52ch; }

.hvc-espace {
  margin-top: var(--hvc-s4);
}

.hvc-espace--large { margin-top: var(--hvc-s5); }

/* --- filet horizontal --- */
.hvc-filet {
  height: 1px;
  background-color: var(--hvc-hairline);
  margin-block: var(--hvc-s6);
}

.hvc-filet--brun { background-color: var(--hvc-brown-light); opacity: .5; }

/* --- boutons --- */
.hvc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--hvc-s2);
  padding: 14px 26px;
  border-radius: var(--hvc-radius-ui);
  font-size: var(--hvc-t-petit);
  font-weight: 500;
  letter-spacing: .02em;
  transition: background-color var(--hvc-ease), color var(--hvc-ease), border-color var(--hvc-ease);
}

.hvc-btn--primaire {
  background-color: var(--hvc-green);
  color: #FFFFFF;
}

.hvc-btn--primaire:hover { background-color: var(--hvc-green-deep); }

.hvc-btn--fantome {
  border: 1px solid var(--hvc-hairline-strong);
  color: var(--hvc-ink);
}

.hvc-btn--fantome:hover {
  border-color: var(--hvc-green);
  color: var(--hvc-green-deep);
}

.hvc-btn--lien {
  padding: 0;
  color: var(--hvc-green-deep);
  border-bottom: 1px solid var(--hvc-green-light);
  border-radius: 0;
}

.hvc-btn--lien:hover { border-bottom-color: var(--hvc-green-deep); }

.hvc-btn[disabled],
.hvc-btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}

/* --- icônes --- */
.hvc-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
  transition: color var(--hvc-ease);
}

.hvc-icon--large { width: 24px; height: 24px; }

/* --- lien d'évitement --- */
.hvc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background-color: var(--hvc-green);
  color: #FFFFFF;
  font-size: var(--hvc-t-petit);
}

.hvc-skip:focus { left: 0; }

/* --- focus visible --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--hvc-green);
  outline-offset: 3px;
}

/* --- apparition au défilement --- */
.hvc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(.4, 0, .2, 1), transform 700ms cubic-bezier(.4, 0, .2, 1);
}

.hvc-reveal--is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hvc-reveal { opacity: 1; transform: none; }
}

/* --- utilitaire d'accessibilité --- */
.hvc-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- sprite d'icônes intégré --- */
.hvc-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}