/* =========================================================================
   VELOLOD — Reset, typographie de base, utilitaires de mise en page
   ========================================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--lh-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--vl-ink-900);
  text-wrap: balance;
}
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--vl-red-500); color: #fff; }

/* ---------- Titrage éditorial ------------------------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  /* Filet de sécurité : un titre saisi plus long ne doit jamais être rogné. */
  overflow-wrap: break-word;
}
.display--xl { font-size: var(--step-7); }
.display--lg { font-size: var(--step-6); }
.display--md { font-size: var(--step-5); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: ""; width: 36px; height: 3px; background: var(--accent); flex: none;
}
.eyebrow--light { color: rgba(255,255,255,.9); }

.section-title { font-size: var(--step-4); }
.lede { font-size: var(--step-1); color: var(--text-muted); max-width: 56ch; }

/* ---------- Conteneurs et grille --------------------------------------- */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - (var(--gutter) * 2), var(--container-narrow)); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--subtle { background: var(--bg-subtle); }
/* Sable : la respiration chaude entre deux blocs produits. Alterner
   blanc / sable / graphite empêche la page de virer au blanc uniforme. */
.section--warm { background: var(--bg-warm); }
.section--ink { background: var(--bg-inverse); color: var(--text-inverse); }
.section--ink h2, .section--ink h3 { color: #fff; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.section-head p { margin: var(--space-2) 0 0; color: var(--text-muted); max-width: 60ch; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* Grille catalogue : plus dense qu'un site vitrine. Cinq colonnes sur un
   grand écran, jamais moins de deux sur mobile. */
.grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { .grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); }
.grid--6 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.stack > * + * { margin-top: var(--space-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast);
  background: var(--vl-ink-900); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm); font-weight: 700;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Révélation au défilement ------------------------------------ */
/*
 * L'état masqué n'existe que si JavaScript s'est exécuté (classe « vl-js »
 * posée en tête de <head>). Sans JS — script bloqué, erreur, cache partiel —
 * le contenu reste visible : une page blanche n'est jamais un état acceptable.
 *
 * Deux noms de classe cohabitent dans le thème : app.js pose « is-in », une
 * version antérieure posait « is-visible ». Les deux sont acceptés ici ; la
 * divergence entre le JS et le CSS rendait toute la page invisible.
 */
.reveal {
  transition: opacity var(--dur-reveal) var(--ease-out);
}
/*
 * Le glissement vertical de 22 px a ete retire : c'etait une animation qui
 * deplace le texte pendant la lecture, et sur un defilement rapide les
 * sections apparaissaient vides le temps du mouvement. Il reste un fondu,
 * qui ne bouge rien.
 */
.vl-js .reveal { opacity: 0; }
.vl-js .reveal.is-visible,
.vl-js .reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vl-js .reveal { opacity: 1; transform: none; }
}