/*
 * Base — variables de marque, reset, typographie de base.
 * Repris de la maquette Claude Design Accueil.dc.html (<helmet><style>).
 */

:root {
  --teal: #2F5562;
  --teal-dark: #1E3A44;
  --teal-deep: #16292F;
  --teal-light: #3D6B7A;
  --sage: #8FA299;
  --sage-light: #B8C9C2;
  --sage-wash: #EDF1EF;
  --cream: #F9F6F1;
  --cream-dark: #EDE9E2;
  --cream-warm: #E7DFD1;
  --beige: #DCC7B8;
  --ink: #1A2E35;
  --ink-light: #4A6570;
  --ink-muted: #7A9099;

  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

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

html {
  /* Sans ce fond, la barre d'outils translucide de Safari mobile (bas
     d'écran, réapparaît en dégradé flouté au scroll vers le haut) laisse
     voir le blanc par défaut de <html> au lieu du crème du site — body a
     déjà var(--cream), mais html reste transparent/blanc sous lui. */
  background: var(--cream);
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

/* Sections "plein écran" du récit (hero, savoir-faire, laboratoire, fabrication,
   conditionnement) : chacune s'aligne au scroll-snap comme un "chapitre". */
.bcc-page {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

/* Sous 860px, les piliers (cf. home.css) ne sont plus forcés à 100svh — leur
   hauteur dépend du contenu empilé, donc les repères de "chapitre" du
   scroll-snap ne correspondent plus à un écran. Le calage forcé devient un
   à-coup au doigt plutôt qu'un confort ; on le désactive sur cette plage.

   scroll-padding-top vit ICI et nulle part ailleurs : posé sans condition,
   il décale aussi le point de repos du scroll-snap desktop (même mécanisme
   CSS que pour un saut d'ancre) — chaque section calée par le snap se
   retrouvait ~76px trop bas, laissant un bandeau de la section précédente
   apparaître derrière la nav translucide. Comme le snap est désactivé ici,
   scroll-padding-top ne sert plus qu'aux sauts d'ancre (#laboratoire,
   #fabrication...), sans plus rien décaler : aucun conflit possible. */
@media (max-width: 860px) {
  html {
    scroll-snap-type: none;
    scroll-padding-top: 76px; /* hauteur de .bcc-nav__inner (fixe) */
  }
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--sage);
  color: #fff;
}

a {
  color: var(--teal);
  text-decoration: none;
}

a:hover {
  color: var(--teal-light);
}

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

@keyframes bccBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* Apparition au scroll (IntersectionObserver dans home.js ajoute .is-visible).
   État initial + transition en CSS plutôt qu'en style inline JS. */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}