/* TCS•LED — site.css
   Mise en page propre au site, chargée après tcsled-tokens.css et tcsled-components.css.
   Ne redéfinit aucune couleur ni police : celles-ci viennent du design system (var(--…)).
   Largeurs : bureau ≥ 1024px (maquettes à 1440px), tablette 600–1023px, mobile < 600px. */

/* ---------- Page ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
.site-contenu { flex: 1 0 auto; width: 100%; }   /* le pied reste en bas des pages courtes */
.site-entete, .site-onglets { width: 100%; }
img { max-width: 100%; }
a { color: var(--brand-ink); }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.site-entete,
.site-onglets,
.site-contenu,
.site-annonce__in,
.site-pied__in { max-width: 1440px; margin: 0 auto; padding-left: 64px; padding-right: 64px; }

/* ---------- Barre d'annonce ---------- */
.site-annonce { background: var(--dark); color: var(--on-dark); font: 400 12px/1.4 var(--font-sans); }
.site-annonce__in { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; }
.site-annonce a { color: var(--on-dark); white-space: nowrap; }
.site-annonce a:hover { color: var(--brand); }

/* ---------- En-tête ---------- */
.site-entete { height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.site-entete .tcs-wordmark { justify-self: start; }
.site-menu { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 400 14px/1 var(--font-sans); color: var(--ink); }
.site-menu a { color: var(--ink); text-decoration: none; }
.site-menu a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Onglets de gamme ---------- */
.site-onglets .tcs-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-onglets .tcs-tabs::-webkit-scrollbar { display: none; }
.site-onglets .tcs-tab { flex: none; white-space: nowrap; }
.site-onglets .tcs-tab:hover { background: var(--g-pale); }

/* ---------- Rail d'index : fixe à droite, masqué sous 1024px ---------- */
.tcs-rail { position: fixed; top: max(16px, min(300px, calc(100vh - 480px))); z-index: 10; }
.tcs-rail__item:hover { width: 44px; }

/* ---------- Contenu ---------- */
.site-contenu { padding-bottom: 64px; }
.site-contenu > .lead { margin: 48px 0; }

/* ---------- Pied de page ---------- */
.site-pied { border-top: 1px solid var(--line); background: var(--surface-200); }
.site-pied__in { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; font: 400 13px/1.5 var(--font-sans); color: var(--ink-muted); }
.site-pied__in p { margin: 0; }
.site-pied__in a:not(.tcs-wordmark) { color: var(--ink-muted); }
.site-pied__in .tcs-wordmark { margin-right: auto; }

/* ---------- Page gamme : héros ---------- */
.site-heros { display: flex; height: 220px; margin: 40px 0 32px; border-radius: var(--radius-lg); overflow: hidden; }
.site-heros__texte { width: 50%; padding: 36px 40px; background: var(--g-pale); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.site-heros--seul .site-heros__texte { width: 100%; }
.site-heros__ligne { font: 400 12px/1.4 var(--font-mono); color: var(--ink); }
.site-heros__nom { margin: 0; font: 800 64px/0.95 var(--font-display); letter-spacing: -0.045em; color: var(--ink); }
.site-heros__photo { display: block; width: 50%; height: 100%; object-fit: cover; }

/* ---------- Page gamme : grille de cartes ---------- */
.site-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.site-vide { margin: 0 0 24px; font: 400 15px/1.55 var(--font-sans); color: var(--ink-muted); }
.tcs-pcard { position: relative; }
.site-carte-lien { color: inherit; text-decoration: none; }
.site-carte-lien::after { content: ""; position: absolute; inset: 0; }   /* toute la carte mène à la fiche */
.tcs-pcard:hover .site-carte-lien { text-decoration: underline; text-underline-offset: 3px; }
.tcs-custom .tcs-btn { align-self: stretch; }

/* ---------- Fiche produit ---------- */
.site-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 18px 0 14px; font: 400 12px/1.4 var(--font-mono); color: var(--ink-muted); }
.site-ariane a { color: var(--ink-muted); text-decoration: none; }
.site-ariane a:hover { color: var(--ink); text-decoration: underline; }
.site-ariane__ici { color: var(--g); font-weight: 500; }

.site-etiquette { cursor: default; font-size: 13px; }

.site-fiche { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 32px; }
.site-fiche__col { display: flex; flex-direction: column; gap: 24px; }
.site-fiche__col + .site-fiche__col { gap: 28px; padding-top: 4px; }

.site-visuel { height: 300px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-200); }
.site-visuel--detoure { display: flex; align-items: center; justify-content: center; }
.site-visuel--detoure img { max-height: 86%; max-width: 66%; object-fit: contain; }
.site-visuel--cadre img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* La note prolonge le filet des sections, sans écart. */
.site-bloc--sections + .site-bloc--note { margin-top: -24px; padding-top: 12px; }

.site-schema { margin: 0; padding: 20px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.site-schema img { height: 195px; object-fit: contain; }
.site-schema figcaption { font: 400 11px/1.4 var(--font-mono); color: var(--ink-muted); text-align: center; }

.site-leds { display: flex; flex-direction: column; gap: 9px; padding: 32px 0 8px; }
.site-leds .tcs-section { color: var(--ink); }

/* ---------- Page introuvable ---------- */
.site-introuvable { padding: 48px 0 16px; }
.site-introuvable__titre { margin: 0 0 8px; font: 800 48px/1 var(--font-display); letter-spacing: -0.045em; }
.site-introuvable__gammes { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 560px; }
.site-introuvable__gammes a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 400 16px/1.3 var(--font-sans); }
.site-introuvable__gammes a:hover { background: var(--g-pale); }
.site-introuvable__n { font: 400 12px/1 var(--font-mono); color: var(--ink-muted); }

/* ---------- Tablette et mobile : une colonne, blocs 1 → 9 ---------- */
@media (max-width: 1023px) {
  .site-entete,
  .site-onglets,
  .site-contenu,
  .site-annonce__in,
  .site-pied__in { padding-left: 24px; padding-right: 24px; }

  .tcs-rail { display: none; }

  .site-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-fiche { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .site-fiche__col { display: contents; }
  .site-bloc--visuel { order: 3; }
  .site-bloc--references { order: 4; }
  .site-bloc--sections { order: 5; }
  .site-bloc--avantages { order: 6; }
  .site-bloc--schema { order: 7; }
  .site-bloc--note { order: 8; }
  .site-bloc--sections + .site-bloc--note { margin-top: 0; padding-top: 0; }
}

@media (max-width: 599px) {
  .site-entete,
  .site-onglets,
  .site-contenu,
  .site-annonce__in,
  .site-pied__in { padding-left: 16px; padding-right: 16px; }

  .site-annonce__in { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .site-entete { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; padding-bottom: 16px; }

  .site-heros { flex-direction: column; height: auto; margin-top: 24px; }
  .site-heros__texte { width: 100%; padding: 24px; }
  .site-heros__nom { font-size: 40px; }
  .site-heros__photo { width: 100%; height: 160px; }

  .site-grille { grid-template-columns: minmax(0, 1fr); }

  /* Bandeau de série : 260px au moins, chips puis étiquette puis bandeaux, sans chevauchement */
  .site-bandeau { height: auto; min-height: 260px; display: flex; flex-direction: column; }
  .site-bandeau .tcs-series__chips,
  .site-bandeau .tcs-series__actions,
  .site-bandeau .tcs-series__foot { position: relative; inset: auto; }
  .site-bandeau .tcs-series__chips { order: 1; padding: 10px; }
  .site-bandeau .tcs-series__actions { order: 2; margin: auto 10px 10px; align-self: flex-end; }
  .site-bandeau .tcs-series__foot { order: 3; }
  .site-bandeau .tcs-series__title { font-size: 24px; }

  .site-visuel { height: 240px; }
  .site-introuvable__titre { font-size: 36px; }
}