/**
 * Moteur V4 — base.css
 *
 * EXTRAIT de medson-clinical, prive de ses regles .med-* : ce fichier habille
 * la MECANIQUE des blocs et du chrome, jamais une identite.
 *
 * Réinitialisation courte, typographie, conteneur. Rien de spécifique à une
 * page : ce qui est propre à l'en-tête ou au pied vit dans `layout.css`, les
 * éléments réutilisables dans `components.css`.
 *
 * 🔴 LES BLOCS V4 NE SONT PAS STYLÉS ICI.
 * `V4BlockHero`, `V4BlockCategoryGrid`, `V4BlockProductPick`… émettent leurs
 * styles EN LIGNE, dérivés des variables de `tokens.css`
 * (`--color-surface`, `--font-family-heading`, `--container-max-width`…).
 * Les re-styler ici créerait un second vocabulaire concurrent, et la moindre
 * correction du socle cesserait de s'appliquer à ce thème.
 */

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

/**
 * 🔴 `html` REMIS À 16px — NE PAS RETIRER.
 *
 * `bootstrap.min.css`, chargé par le header avant cette feuille, pose
 * `html{font-size:10px}`. Or les blocs V4 écrivent leurs tailles EN LIGNE en
 * `rem` (11 valeurs distinctes : `.72rem`, `.82rem`, `1.05rem`…). Sous une
 * racine à 10px, `.82rem` vaut 8.2px : la bande de réassurance sortait à
 * 8.2px / 7.2px, illisible (mesuré au rendu réel, accueil chez-km).
 *
 * Corriger chaque taille une par une demanderait un `!important` par règle, et
 * il en manquerait à chaque bloc ajouté au moteur. Remettre la racine à sa
 * valeur normale répare les 11 d'un coup.
 *
 * Sans risque pour Bootstrap 3 : il est ÉCRIT ENTIÈREMENT EN PIXELS — vérifié,
 * `bootstrap.min.css` ne contient aucune valeur en `rem`. Le 10px n'y sert que
 * de base à des `rem` que ses propres règles n'utilisent jamais.
 */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Aucune page ne doit déborder horizontalement, quelle que soit la largeur. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  color: var(--color-primary-dark);
  letter-spacing: var(--letter-spacing-heading, -0.015em);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1em; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover,
a:focus { color: var(--color-primary-dark); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Visibilité du focus : jamais supprimée, seulement mise à la charte. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/**
 * Conteneur central. Défini ICI et pas dans layout.css parce que les gabarits
 * partagés du socle (`_common/`, checkout, panier) l'utilisent aussi : c'est
 * une primitive, pas un élément de mise en page de ce thème.
 */
.sws-container {
  width: 100%;
  max-width: var(--container-max-width, 1240px);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (max-width: 640px) {
  /* 16px de gouttière sur mobile — sous cette valeur le texte touche le bord. */
  .sws-container { padding-inline: 16px; }
}

/* Retour en haut de page — fourni par uitotop.js, stylé à la charte. */
.sws-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 900;
}
.sws-to-top:hover { background: var(--color-primary-dark); color: #fff; }

/* Respect des préférences système : aucune animation imposée. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}