/* ==========================================================================
   Vinifort — base et composants du front
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--vf-noir);
  color: var(--vf-creme);
  font-family: var(--vf-corps);
  font-size: var(--vf-fs-corps);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--vf-titre);
  font-weight: 400;
  letter-spacing: var(--vf-ls-titre);
  text-transform: uppercase;
  color: var(--vf-or-clair);
  line-height: 1.2;
}

a { color: var(--vf-or-clair); text-decoration: none; transition: color var(--vf-transition); }
a:hover { color: var(--vf-creme); }
img { max-width: 100%; height: auto; display: block; }

/* Accessibilité : un lien d'évitement, et un focus toujours visible. */
:focus-visible { outline: 2px solid var(--vf-or-clair); outline-offset: 3px; }
.vf-skip {
  position: absolute; left: -9999px;
  background: var(--vf-anthracite); color: var(--vf-creme); padding: 12px 20px; z-index: 100;
}
.vf-skip:focus { left: 12px; top: 12px; }

.vf-conteneur { width: min(100% - 2.5rem, var(--vf-largeur)); margin-inline: auto; }
.vf-section { padding-block: var(--vf-esp-xl); border-bottom: var(--vf-bordure); }
.vf-section__titre { font-size: var(--vf-fs-h2); margin-bottom: var(--vf-esp-m); }
.vf-slogan { font-family: var(--vf-slogan); font-style: italic; font-size: 1.5rem; color: var(--vf-or); }

/* --- En-tête --- */
.vf-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vf-esp-s);
  padding: var(--vf-esp-s) clamp(1rem, 4vw, 3rem);
  background: rgba(12, 12, 7, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: var(--vf-bordure);
}
.vf-logo {
  font-family: var(--vf-titre); font-size: 1.25rem;
  letter-spacing: var(--vf-ls-titre); text-transform: uppercase; color: var(--vf-or-clair);
}
.vf-nav { display: flex; gap: var(--vf-esp-m); align-items: center; }
.vf-nav a { font-size: var(--vf-fs-petit); text-transform: uppercase; letter-spacing: 0.1em; }

/* --- Hero --- */
.vf-hero {
  min-height: 88vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--vf-esp-m);
  padding: var(--vf-esp-xl) var(--vf-esp-s);
  background:
    radial-gradient(ellipse at center, rgba(87, 74, 48, 0.28), transparent 65%),
    var(--vf-noir);
  border-bottom: var(--vf-bordure);
}
.vf-hero__titre { font-size: var(--vf-fs-hero); margin: 0; }
.vf-hero__piliers {
  display: flex; gap: var(--vf-esp-m); flex-wrap: wrap; justify-content: center;
  font-family: var(--vf-titre); text-transform: uppercase;
  letter-spacing: var(--vf-ls-titre); font-size: var(--vf-fs-petit); color: var(--vf-or);
}
.vf-hero__piliers span::before { content: "· "; color: var(--vf-or-profond); }
.vf-hero__piliers span:first-child::before { content: ""; }

/* --- Boutons --- */
.vf-btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  border: 1px solid var(--vf-or);
  border-radius: var(--vf-r);
  color: var(--vf-or-clair);
  font-size: var(--vf-fs-petit);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all var(--vf-transition);
}
.vf-btn:hover { background: var(--vf-or); color: var(--vf-noir); }
.vf-btn--plein { background: var(--vf-or); color: var(--vf-noir); }
.vf-btn--plein:hover { background: var(--vf-or-clair); color: var(--vf-noir); }

/* --- Grilles de contenu --- */
.vf-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--vf-esp-m);
}
.vf-bloc {
  padding: var(--vf-esp-m);
  background: var(--vf-anthracite);
  border: var(--vf-bordure);
  border-radius: var(--vf-r);
}
.vf-bloc h3 { font-size: 1rem; margin-top: 0; }
.vf-chiffre {
  font-family: var(--vf-titre);
  font-size: 2.4rem;
  color: var(--vf-or-clair);
  display: block;
  line-height: 1;
  margin-bottom: var(--vf-esp-xs);
}

/* --- Pied de page --- */
.vf-footer {
  padding: var(--vf-esp-l) var(--vf-esp-s);
  text-align: center;
  color: var(--vf-or);
  font-size: var(--vf-fs-petit);
}

/* --- Respect des préférences système --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}