/* =============================================================================
   QUICKCUT — SITE
   Les couleurs et mesures viennent de tokens.css, recopié depuis l'application
   par scripts/sync-design-tokens.mjs. Une seule source, donc pas de dérive.
   ============================================================================= */

/* -- Polices, les mêmes que dans l'application ------------------------------ */
@font-face { font-family:'Barlow'; src:url('assets/barlow-400.woff2') format('woff2'); font-weight:400; font-display:swap }
@font-face { font-family:'Barlow'; src:url('assets/barlow-500.woff2') format('woff2'); font-weight:500; font-display:swap }
@font-face { font-family:'Barlow'; src:url('assets/barlow-700.woff2') format('woff2'); font-weight:700; font-display:swap }
@font-face { font-family:'Barlow Semi Condensed'; src:url('assets/barlow-semicondensed-500.woff2') format('woff2'); font-weight:500; font-display:swap }
@font-face { font-family:'Barlow Semi Condensed'; src:url('assets/barlow-semicondensed-600.woff2') format('woff2'); font-weight:600; font-display:swap }
@font-face { font-family:'Barlow Condensed'; src:url('assets/barlow-condensed-600.woff2') format('woff2'); font-weight:600; font-display:swap }

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

html { scroll-behavior: smooth }

body {
  font-family: var(--font-ui);
  background: var(--rack-body);
  color: var(--legend);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Le site est une salle de régie : on ne propose pas de thème clair ici.
   L'application, elle, en a un, parce qu'on y passe des heures. */
:root { color-scheme: dark }

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

a { color: inherit }

::selection { background: var(--tally-soft); color: var(--legend) }

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

.plate {
  display: inline-block;
  font-family: var(--font-plate);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legend-faint);
}

/* -- Mire ------------------------------------------------------------------- */
.bars { display: flex; height: 4px }
.bars span { flex: 1 }

/* -- Barre supérieure ------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: rgba(20, 24, 27, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: var(--line) solid var(--rack-engrave);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-plate);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.topnav { display: flex; align-items: center; gap: var(--s5) }

.topnav a {
  font-family: var(--font-legend);
  font-size: 14px;
  font-weight: 500;
  color: var(--legend-dim);
  text-decoration: none;
  transition: color 120ms ease;
}
.topnav a:hover { color: var(--legend) }

/* -- Sélecteur de langue ----------------------------------------------------
   Quatre libellés séparés par des filets, dans la même famille condensée que
   les légendes sérigraphiées de la baie. Chaque langue est écrite DANS sa
   langue — « Español », « 中文 » — parce qu'un visiteur cherche le mot qu'il
   sait lire, pas la traduction du sien.

   Pas de menu déroulant : à quatre entrées, il coûterait un clic de plus et
   cacherait précisément ce que la personne cherche. */
.langpick {
  display: inline-flex;
  align-items: center;
  border: var(--line) solid var(--rack-hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.topnav .langpick-item {
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
  border-left: var(--line) solid var(--rack-hairline);
}
.topnav .langpick-item:first-child { border-left: 0 }
.topnav .langpick-item:hover { background: var(--rack-panel-hi) }

/* La langue courante est un état, pas une action : posée en creux, sans le
   rouge tally qui reste réservé à l'achat et au direct. */
.topnav .langpick-item.is-current {
  color: var(--legend);
  background: var(--rack-well);
  cursor: default;
}


/* -- La mire fondue --------------------------------------------------------
   Le canevas du dégradé animé (gradient.js). Il est posé DERRIÈRE le contenu
   du premier écran, sans jamais l'intercepter : c'est un fond, pas une
   surface. Le flou est intrinsèque au motif, d'où le rendu au tiers de la
   résolution puis l'étirement — invisible à l'œil, neuf fois moins de calcul.

   `opacity` reste ici et non dans le shader : un réglage visible dans la
   feuille de style se retrouve, une constante enfouie dans du GLSL, non. */
.hero-gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  height: 100%;
  pointer-events: none;
  /* Débordement jusqu'aux bords de la page. Limité à la largeur du bloc, la
     lueur s'arrêtait net sur une ligne verticale au milieu de l'écran : le
     rectangle se voyait, et une lueur à bord franc n'est plus une lueur.

     La position et la largeur sont posées en pixels par gradient.js, pas ici.
     `width: 100vw` semblait plus simple mais compte la barre de défilement
     verticale : le canevas dépassait de 5 px et faisait apparaître une barre
     horizontale sur toute la page. Mesuré. */
  left: 0;
  width: 100%;
  /* Le canevas apparaît en fondu : allumé d'un coup à la fin du chargement,
     il ferait un clignotement au moment précis où l'on lit le titre. */
  animation: hero-gradient-in 1200ms ease both;
}

@keyframes hero-gradient-in {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gradient { animation: none }
}

/* -- Boutons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px var(--s5);
  border: var(--line) solid var(--rack-hairline);
  border-radius: var(--r-sm);
  background: var(--rack-panel-hi);
  color: var(--legend);
  font-family: var(--font-legend);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, transform 160ms var(--ease-detent);
}
.btn:active { transform: translateY(1px) }
.btn-lg { padding: 13px var(--s5); font-size: 16px }
.btn-block { display: flex; width: 100% }

/* Le rouge tally est réservé à l'achat : c'est l'action qui engage. */
.btn-buy { background: var(--tally); border-color: var(--tally); color: #fff }
.btn-buy:hover { background: var(--tally-deep); border-color: var(--tally-deep) }

.btn-ghost { background: transparent; border-color: var(--rack-hairline); color: var(--legend-dim) }
.btn-ghost:hover { background: var(--rack-panel-hi); color: var(--legend) }

.topnav .btn-buy { padding: 6px var(--s4); font-size: 14px }

/* -- Titres ----------------------------------------------------------------- */
h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
  text-wrap: balance;
}

h3 { font-size: 17px; font-weight: 600; margin-bottom: var(--s1) }

.lede, .section-lede {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--legend-dim);
  max-width: 62ch;
  line-height: 1.65;
}

.section-lede { margin-bottom: var(--s6) }

/* -- Premier écran ---------------------------------------------------------- */
.hero {
  /* `relative` + `isolation` : le canevas du dégradé (gradient.js) se pose en
     `z-index: -1` DANS ce contexte d'empilement, donc derrière le contenu du
     premier écran sans jamais passer derrière la page entière. */
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s7);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s6);
}

.hero-text .lede { margin-top: var(--s4) }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}

.hero-note {
  margin-top: var(--s3);
  font-size: 13px;
  color: var(--legend-faint);
}

/* -- Moniteur --------------------------------------------------------------- */
/* La capture est encastrée dans un châssis : c'est un écran de contrôle monté
   dans la baie, pas une image qui flotte sur la page. */
.monitor { margin: 0 }

.monitor-screen {
  padding: var(--s2);
  background: var(--rack-well);
  border: var(--line) solid var(--rack-engrave);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}

.monitor-screen img {
  border: var(--line) solid var(--rack-void);
  border-radius: 1px;
}

.monitor-label {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: 13px;
  color: var(--legend-faint);
  flex-wrap: wrap;
}

/* -- Sections --------------------------------------------------------------- */
.band {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--s7) var(--s5);
  border-top: var(--line) solid var(--rack-engrave);
}

.band-quiet { background: var(--rack-panel); max-width: none }
.band-quiet > * { max-width: 1120px; margin-left: auto; margin-right: auto }

/* -- Le mécanisme ----------------------------------------------------------- */
.mech {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--s4);
  align-items: start;
}

.mech-step {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--rack-panel);
  border: var(--line) solid var(--rack-engrave);
  border-radius: var(--r-md);
}
.band-quiet .mech-step { background: var(--rack-body) }

.mech-step p { font-size: 14px; color: var(--legend-dim) }
.mech-step em { color: var(--legend); font-style: normal; font-weight: 600 }

.mech-arrow {
  align-self: center;
  color: var(--rack-hairline);
}

/* Le cadre schématique, dans le codage de la mire : jaune vidéo, magenta texte.
   Le même codage que dans l'application, pour que la page et le logiciel
   parlent la même langue. */
.slotbox {
  position: relative;
  width: 100%;
  background: var(--rack-void);
  border: var(--line) solid var(--rack-engrave);
  border-radius: 2px;
}
.slotbox-vert { aspect-ratio: 9 / 16; max-width: 150px }

.slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-plate);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0b0e10;
  overflow: hidden;
}
.slot-video { background: var(--bar-video) }
.slot-text  { background: var(--bar-text) }

.filelist { list-style: none; display: flex; flex-direction: column; gap: var(--s2) }
.filelist li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-legend);
  font-size: 13px;
  color: var(--legend);
  flex-wrap: wrap;
}
.filelist code {
  font-family: var(--font-legend);
  font-size: 12px;
  color: var(--legend-faint);
}

.dot { width: 9px; height: 9px; border-radius: 1px; flex: none }
.dot-video { background: var(--bar-video) }
.dot-text  { background: var(--bar-text) }

.renderbox {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--rack-void);
  border: var(--line) solid var(--rack-engrave);
  border-radius: 2px;
}
.tally {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tally); flex: none;
  box-shadow: 0 0 0 3px var(--tally-soft);
}
.renderbox-out {
  font-family: var(--font-legend);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--legend);
}

.mech-repeat {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--line) solid var(--rack-engrave);
  font-size: 15px;
  color: var(--legend-dim);
}

/* -- Deux colonnes ---------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s7);
  align-items: center;
}

.ticks { list-style: none; display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4) }
.ticks li {
  position: relative;
  padding-left: var(--s5);
  font-size: 15px;
  color: var(--legend-dim);
}
/* La coche est dessinée, pas un caractère : même trait que les icônes de
   l'application. */
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 11px;
  height: 6px;
  border-left: 1.5px solid var(--preview);
  border-bottom: 1.5px solid var(--preview);
  transform: rotate(-45deg);
}

/* -- Offres ----------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--rack-panel);
  border: var(--line) solid var(--rack-engrave);
  border-radius: var(--r-md);
}
.band-quiet .plan { background: var(--rack-body) }

.plan-lead {
  border-color: var(--tally);
  box-shadow: var(--shadow-lift);
}

.plate-lead { color: var(--tally) }

.plan-price { display: flex; align-items: baseline; gap: var(--s3) }

.plan-price .amount {
  font-family: var(--font-plate);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--legend);
}

/* Le prix de référence reste lisible : une remise qu'on ne peut pas vérifier
   n'est pas une remise. */
.plan-price .was {
  font-size: 22px;
  color: var(--legend-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.plan-sub { font-size: 14px; color: var(--legend-dim) }
.plan-note { font-size: 13px; color: var(--legend-faint); margin-top: auto }
.plan .ticks { margin-top: 0; margin-bottom: var(--s2) }

/* -- Limites ---------------------------------------------------------------- */
.limits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5);
}
.limits p { font-size: 14px; color: var(--legend-dim) }

/* -- Questions -------------------------------------------------------------- */
.faq {
  border: var(--line) solid var(--rack-engrave);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq details + details { border-top: var(--line) solid var(--rack-engrave) }

.faq summary {
  padding: var(--s3) var(--s4);
  background: var(--rack-panel);
  font-family: var(--font-legend);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background 120ms ease;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary:hover { background: var(--rack-panel-hi) }

.faq summary::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: var(--s3);
  border-right: 1.5px solid var(--legend-faint);
  border-bottom: 1.5px solid var(--legend-faint);
  transform: rotate(-45deg) translateY(-1px);
  transition: transform 160ms var(--ease-detent);
}
.faq details[open] summary::before {
  transform: rotate(45deg) translateY(-2px);
  border-color: var(--tally);
}

.faq p {
  padding: 0 var(--s4) var(--s4) calc(var(--s4) + 6px + var(--s3));
  background: var(--rack-panel-hi);
  font-size: 14px;
  color: var(--legend-dim);
  max-width: 70ch;
}

code {
  font-family: var(--font-legend);
  font-size: 0.92em;
  padding: 1px 5px;
  background: var(--rack-well);
  border-radius: 2px;
  color: var(--legend);
}

/* -- Pied ------------------------------------------------------------------- */
.foot {
  border-top: var(--line) solid var(--rack-engrave);
  background: var(--rack-void);
  padding: var(--s6) var(--s5) var(--s5);
}

.foot-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}

.foot p { font-size: 14px; color: var(--legend-faint); margin-top: var(--s1) }

.foot-links { display: flex; gap: var(--s5); flex-wrap: wrap }
.foot-links a {
  font-family: var(--font-legend);
  font-size: 14px;
  color: var(--legend-dim);
  text-decoration: none;
}
.foot-links a:hover { color: var(--legend); text-decoration: underline; text-underline-offset: 3px }

.foot-legal {
  max-width: 1120px;
  margin: var(--s5) auto 0;
  padding-top: var(--s4);
  border-top: var(--line) solid var(--rack-engrave);
  font-size: 13px;
  color: var(--legend-faint);
}

/* -- Écrans étroits --------------------------------------------------------- */
@media (max-width: 900px) {
  .hero, .split { grid-template-columns: 1fr; gap: var(--s5) }
  .mech { grid-template-columns: 1fr; gap: var(--s3) }
  .mech-arrow { justify-self: center; transform: rotate(90deg) }
  .slotbox-vert { max-width: 120px }
  .topnav { gap: var(--s3) }
  .topnav a:not(.btn) { display: none }
}

@media (max-width: 520px) {
  .band, .hero { padding-left: var(--s4); padding-right: var(--s4) }
  .hero-actions .btn { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition-duration: 0.01ms !important }
}