/* ============================================================
   TULIPE PALETTES - BASE
   Styles de base partagés par toutes les sections : typographie
   par défaut, liens, focus visible, classes utilitaires communes.
   ============================================================ */
html {
  /* Ancres (#section) : ne pas glisser sous le header collant */
  scroll-padding-top: 130px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-cream);
  color: var(--color-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.has-locked-scroll {
  overflow: hidden;
}

h1, h2, h3 {
  font-family: var(--font-serif);
}

/* --- Focus visible générique (accessibilité) ---
   Certaines sections affinent cette règle avec leur propre couleur
   d'accent ou un rayon de bordure spécifique (voir leur fichier CSS) ;
   ceci sert de valeur par défaut partout ailleurs. */
a:focus-visible,
button:focus-visible,
input:is([type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"]):focus-visible {
  outline: 2px solid var(--color-forest);
  outline-offset: 2px;
}

/* Champs de saisie (texte, e-mail, tél., nombre, zone de texte, liste) : AUCUN contour décalé.
   Le focus se lit sur la bordure du champ elle-même : elle passe en sapin et s'épaissit d'1 px (box-shadow
   collé à la bordure, sans espace). :where() ramène la spécificité à celle de :focus-visible, donc un
   champ qui a son propre état (.form-field__control, erreur, recherche du header…) garde la main.
   Les cases à cocher, boutons radio et sélecteurs de fichier, eux, n'ont pas de bordure à colorer :
   ils gardent le contour de la règle ci-dessus. */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="hidden"]), textarea, select):focus-visible {
  outline: none;
  border-color: var(--color-forest);
  box-shadow: 0 0 0 1px var(--color-forest);
}

/* --- Conteneur générique ---
   Chaque section peut définir sa propre largeur max locale
   (--container-max-width) ; .container applique le motif commun. */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

/* --- Masquage accessible (contenu lu par les lecteurs d'écran,
   invisible à l'écran) --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* --- Lien d'évitement (accessibilité clavier) : visible uniquement au focus --- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--color-forest);
  color: var(--color-paper);
  border-radius: var(--r-control);
  font-weight: 600;
  transition: top 160ms ease;
}
.skip-link:focus { top: 12px; }

/* Pages dont le contenu arrive par JS (panier, fiche produit, tunnel de commande…) : le footer est désormais
   déjà dans le HTML. On garde le contenu au moins aussi haut que l'écran, avant ET après chargement :
   le footer reste sous la ligne de flottaison (aucun saut quand le contenu arrive) et, sur un panier vide,
   il reste en bas de l'écran au lieu de remonter en plein milieu. */
main[data-state] { min-height: calc(100vh - 160px); }

/* --- Mobile / tactile : pas de révélation au scroll ---------------------------
   Sur petit écran les sections sont hautes : un bloc masqué tant qu'il n'a pas
   franchi un seuil de visibilité (IntersectionObserver) donne l'impression d'une
   page vide ou lente. La visibilité du contenu prime sur l'animation : tout est
   affiché d'emblée. Les animations de révélation restent actives sur ordinateur.
   !important : cette règle doit l'emporter sur les ~10 feuilles de section qui
   posent chacune leur propre état « caché » (opacity: 0), quel que soit l'ordre
   de chargement. Seuls les états de révélation sont ciblés (pas les menus ni les
   réponses FAQ repliées, qui sont cachés pour une autre raison). */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  [data-reveal],
  .reveal,
  .winter-reveal,
  .reassurance__item,
  .brand-story__content > *,
  .brand-story__media,
  .engagement__badge,
  .engagement__title,
  .engagement__description,
  .stats-list__item,
  .testimonials__intro,
  .testimonials__item {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}