/*
 * Fondations du design system. Variables --ts-* reprises telles quelles du thème PrestaShop de
 * shop.technishine.fr (lues dans themes/TechniShine/assets/css/main.css), pour la continuité
 * visuelle entre les deux sites exigée par CLAUDE.md.
 *
 * La boutique n'utilise aucune police web (uniquement la pile système) : ce site fait de même,
 * par continuité. Le jour où une police de marque serait adoptée sur les deux sites, elle devra
 * être auto-hébergée en woff2 avec font-display: swap, jamais chargée depuis un service tiers.
 *
 * Points de rupture du site (768px / 1024px) — cf. CLAUDE.md.
 */

:root {
  /* Couleurs principales */
  --ts-red: #D91E2B;
  --ts-red-hover: #B91825;
  --ts-red-light: rgba(217, 30, 43, 0.1);

  /* Texte */
  --ts-text: #0F172A;
  --ts-text-light: #64748B;
  --ts-gray: #94A3B8;

  /* Bordures */
  --ts-border: #E5E7EB;

  /* Fonds */
  --ts-bg: #FFFFFF;
  --ts-bg-secondary: #F9FAFB;
  /* Même teinte que --ts-text, nommée séparément : usage en fond (pied de page), pas en texte. */
  --ts-fond-sombre: #0F172A;

  /* Ombres et transitions (mêmes noms que le thème boutique) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  /* Typographie : pile système, comme la boutique */
  --ts-police: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ts-police);
  color: var(--ts-text);
  background: var(--ts-bg);
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin: 0 0 0.5em;
}

p {
  margin: 0 0 1em;
}

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

a:hover {
  color: var(--ts-red-hover);
  text-decoration: underline;
}

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

.ts-conteneur {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .ts-conteneur {
    padding-inline: 1.5rem;
  }
}