:root {
  --orange: #ff6b2e;
  --blue: #3b82f6;
  --anchor-offset: 148px;
  --bg: #0e0e0f;
  --surface: #18181a;
  --surface-2: #1f1f21;
  --border: #2a2a2d;
  --text: #e6e6e8;
  --muted: #9a9aa0;
  --soft: #b0b0b3;
  --header-bg: rgba(14, 14, 15, 0.88);
  --shadow: rgba(0, 0, 0, 0.42);
  --grid: rgba(255, 255, 255, 0.025);
}

html[data-theme="light"] {
  --bg: #f2f1ef;
  --surface: #ffffff;
  --surface-2: #e9e8e6;
  --border: #d1d0cd;
  --text: #18181a;
  --muted: #64646a;
  --soft: #73737a;
  --header-bg: rgba(242, 241, 239, 0.9);
  --shadow: rgba(31, 31, 33, 0.12);
  --grid: rgba(0, 0, 0, 0.035);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 73% 18%, rgba(59,130,246,.055), transparent 26rem),
    var(--bg);
  font-family: "Segoe UI", "Arial Narrow", Arial, sans-serif;
  letter-spacing: .025em;
  transition: background .28s ease, color .28s ease;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  min-height: 102px;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px clamp(20px, 2.4vw, 72px);
  border-bottom: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.brand-logo-frame {
  display: grid;
  width: 172px;
  height: 92px;
  place-items: center;
  margin-right: 18px;
  flex: 0 0 auto;
  overflow: visible;
}

.brand-logo {
  display: block;
  width: 160px;
  height: auto;
  max-height: 88px;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
}

/* Logo 3D SOF (25/07) : la topbar charge la variante sombre par defaut ;
   en theme clair on permute vers la variante a baseline foncee.
   (Fallback : si `content` sur <img> n'est pas supporte, la variante sombre
   reste lisible sur fond clair, lettres chromees a lisere noir.) */
html[data-theme="light"] .brand-logo {
  content: url("assets/sof-logo-3d-light.png?v=20260815-screens");
  transform: none;
  filter: none;
}

.brand-name {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.brand-name strong,
.footer-brand strong {
  font-weight: 550;
  letter-spacing: .2em;
  white-space: nowrap;
}

/* Header branding: one natural line, fitted precisely inside the tagline width. */
.brand-name {
  width: max-content;
  overflow: visible;
}

.brand-name strong {
  display: inline-block;
  width: max-content;
  font-size: 19px;
  line-height: 1;
  letter-spacing: .11em;
  word-spacing: .16em;
  white-space: nowrap;
  transform-origin: left center;
}

.brand-name strong span,
.brand-name strong em {
  display: inline;
}

.brand-name em,
.footer-brand em {
  color: var(--orange);
  font-style: normal;
}

.brand-name small {
  display: block;
  width: max-content;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .265em;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 46px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
}

.main-nav a {
  position: relative;
  padding: 34px 0 31px;
  white-space: nowrap;
  transition: color .2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: 22px;
  left: 50%;
  height: 1px;
  background: var(--orange);
  transition: left .22s ease, right .22s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--text);
}

.main-nav a:hover::after,
.main-nav a.active::after {
  right: 0;
  left: 0;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.icon-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 9px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.icon-button svg,
.text-link svg,
.button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.account-link {
  display: inline-flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.account-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.account-link:hover,.account-link.active { color: var(--text); border-color: rgba(59,130,246,.42); background: rgba(59,130,246,.07); }

.cart-count {
  position: absolute;
  top: -3px;
  right: -2px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  font-size: 9px;
  font-weight: 700;
}

.lang-switch,
.theme-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.lang-option,
.theme-option {
  min-width: 68px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.lang-option.active,
.theme-option.active {
  color: var(--orange);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255,107,46,.2);
}

.menu-button {
  display: none;
}

.hero {
  position: relative;
  min-height: calc(100vh - 92px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .9fr);
  align-items: center;
  gap: 5vw;
  padding: clamp(70px, 8vw, 132px) clamp(24px, 7vw, 118px);
  border-bottom: 1px solid var(--border);
}

.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to right, black, transparent 70%);
}

.hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -130px;
  top: 3%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.08), transparent 68%);
  pointer-events: none;
}

.hero-copy,
.hero-visual {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .25em;
}

.eyebrow > span:first-child {
  flex: 0 0 32px;
  width: 32px;
  height: 1px;
  background: var(--orange);
}

/* ---- Featured in / presse ---- */
.featured-section {
  padding: clamp(48px, 6vw, 88px) clamp(24px, 7vw, 118px);
  border-top: 1px solid var(--border);
}
.featured-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  margin-top: 22px;
}
.featured-logo {
  display: inline-flex;
  align-items: center;
  opacity: .5;
  transition: opacity .25s ease;
}
.featured-logo:hover { opacity: 1; }
.featured-logo img { height: 38px; width: auto; display: block; }
.featured-logo .fl-light { display: none; }
[data-theme="light"] .featured-logo .fl-dark { display: none; }
[data-theme="light"] .featured-logo .fl-light { display: block; }
[data-theme="light"] .featured-logo .fl-mono { filter: brightness(0); }
/* silhouette monochrome : logo couleur ou blanc -> blanc sur sombre, noir sur clair */
.featured-logo .fl-sil { filter: brightness(0) invert(1); }
[data-theme="light"] .featured-logo .fl-sil { filter: brightness(0); }

h1 {
  max-width: 790px;
  margin: 0;
  font-size: clamp(60px, 7.2vw, 126px);
  line-height: .88;
  font-weight: 300;
  letter-spacing: -.055em;
}

h1 span {
  color: var(--orange);
}

.hero-description {
  max-width: 600px;
  margin: 38px 0 0;
  color: var(--soft);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.7;
  letter-spacing: .02em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 42px;
}

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 0 24px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .13em;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
  box-shadow: 0 12px 36px rgba(255,107,46,.14);
}

.button.secondary:hover {
  border-color: var(--blue);
}

.play-icon {
  color: var(--blue);
  font-size: 12px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 66px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .16em;
}

.hero-meta span {
  padding: 0 20px;
  border-right: 1px solid var(--border);
}

.hero-meta span:first-child {
  padding-left: 0;
}

.hero-meta span:last-child {
  border-right: 0;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.visual-panel {
  width: min(100%, 610px);
  aspect-ratio: 1.12;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 22px;
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 55%),
    var(--surface);
  box-shadow: 0 32px 100px var(--shadow);
}

.panel-top,
.panel-bottom {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
}

.orbital {
  position: relative;
  width: min(76%, 390px);
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
}

.orbit,
.core,
.particle {
  position: absolute;
  border-radius: 50%;
}

.orbit {
  inset: 0;
  border: 1px solid var(--border);
}

.orbit-a {
  inset: 7%;
  border-color: rgba(255,107,46,.55);
  border-left-color: transparent;
  transform: rotate(35deg);
  animation: spin 18s linear infinite;
}

.orbit-b {
  inset: 18%;
  border-color: rgba(59,130,246,.4);
  border-right-color: transparent;
  animation: spinReverse 14s linear infinite;
}

.orbit-c {
  inset: 29%;
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
  animation: spin 28s linear infinite;
}

.core {
  inset: 39%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #ff996d, var(--orange) 42%, #6e2411 70%);
  box-shadow:
    0 0 34px rgba(255,107,46,.34),
    0 0 90px rgba(255,107,46,.12);
}

.core-glow {
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  filter: blur(4px);
}

.particle {
  width: 5px;
  height: 5px;
  background: var(--blue);
  box-shadow: 0 0 12px var(--blue);
}

.p1 { top: 11%; left: 33%; }
.p2 { top: 36%; right: 4%; background: var(--orange); }
.p3 { bottom: 12%; left: 22%; }
.p4 { bottom: 23%; right: 18%; background: var(--orange); }

.panel-bottom {
  gap: 12px;
}

.panel-bottom div {
  flex: 1;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.panel-bottom small,
.panel-bottom strong {
  display: block;
}

.panel-bottom small {
  color: var(--muted);
  margin-bottom: 6px;
}

.panel-bottom strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}

.visual-caption {
  margin-top: 15px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .22em;
}

.products-section,
.manifesto {
  padding: clamp(78px, 8vw, 132px) clamp(24px, 7vw, 118px);
}

.products-section {
  background: var(--bg);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 46px;
}

h2 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 72px);
  line-height: .98;
  font-weight: 300;
  letter-spacing: -.025em;
}

.text-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.text-link:hover {
  color: var(--orange);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.product-group-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 4px 0 14px;
}

.product-group-heading[hidden] {
  display: none;
}

.product-group-heading-upcoming {
  margin-top: clamp(38px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--border);
}

.product-group-heading h3 {
  margin: 12px 0 0;
  font-size: clamp(27px, 3vw, 46px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.02em;
}

.product-group-heading > p {
  max-width: 390px;
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

.product-card {
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform .25s ease, border-color .25s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,107,46,.42);
}

.product-art {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--surface-2);
  background-size: 32px 32px;
}

.product-tag,
.product-code {
  position: absolute;
  z-index: 2;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.product-tag {
  top: 18px;
  left: 18px;
  padding: 8px 10px;
  border: 1px solid var(--border);
}

.product-code {
  bottom: 18px;
  right: 18px;
}

.mini-orb {
  position: absolute;
  inset: 50%;
  width: 145px;
  height: 145px;
  margin: -72px;
  border: 1px solid rgba(255,107,46,.55);
  border-radius: 50%;
  box-shadow: 0 0 65px rgba(255,107,46,.08);
}

.mini-orb::before,
.mini-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.mini-orb::before {
  inset: 17px;
  border: 1px dashed rgba(59,130,246,.5);
}

.mini-orb::after {
  inset: 50%;
  width: 38px;
  height: 38px;
  margin: -19px;
  background: var(--orange);
  box-shadow: 0 0 28px rgba(255,107,46,.5);
}

.chord-lines {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translate(-50%, -50%);
}

.chord-lines i {
  width: 3px;
  height: 80px;
  background: var(--blue);
  box-shadow: 0 0 12px rgba(59,130,246,.22);
}

.chord-lines i:nth-child(2),
.chord-lines i:nth-child(5) {
  height: 130px;
  background: var(--orange);
}

.chord-lines i:nth-child(3) { height: 180px; }
.chord-lines i:nth-child(4) { height: 105px; }

.wavefield {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translate(-50%, -50%);
}

.wavefield i {
  width: 11px;
  height: 90px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transform: rotate(24deg);
}

.wavefield i:nth-child(2),
.wavefield i:nth-child(7) { height: 140px; border-color: rgba(59,130,246,.65); }
.wavefield i:nth-child(3),
.wavefield i:nth-child(6) { height: 185px; }
.wavefield i:nth-child(4),
.wavefield i:nth-child(5) { height: 220px; border-color: rgba(255,107,46,.75); }

/* CHRISTA (a venir) : un "cristal" symetrique -- barres fines culminant au
   centre, ambre au sommet, bleu sur les flancs. Meme langage que le wavefield. */
.crystalfield {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
}
.crystalfield i {
  width: 11px;
  height: 78px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transform: rotate(-24deg);
}
.crystalfield i:nth-child(2),
.crystalfield i:nth-child(6) { height: 132px; border-color: rgba(59,130,246,.65); }
.crystalfield i:nth-child(3),
.crystalfield i:nth-child(5) { height: 188px; }
.crystalfield i:nth-child(4) { height: 232px; border-color: rgba(255,107,46,.78); }

/* DUBOX (a venir) : la boite dub -- une attaque ambre suivie de ses reprises,
   qui s'espacent et s'eteignent comme un delay a bande qui reboucle. Meme
   langage que le wavefield de GENATOR et le crystalfield de CHRISTA : traits
   fins de 11 px, ambre au plus fort, bleu sur les reprises proches. */
.echofield {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
}
.echofield i {
  width: 11px;
  height: 96px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transform: rotate(24deg);
}
/* L'extinction se lit par la HAUTEUR et l'ESPACEMENT, pas par l'opacite : un
   trait neutre du site plafonne deja a ~1,15 de contraste sur son fond, donc
   toute opacite en dessous de 1 le fait passer SOUS ce plancher et la reprise
   disparait (mesure du 24/08 : 1,04 en sombre, 1,06 en clair). */
.echofield i:nth-child(1) { height: 232px; border-color: rgba(255,107,46,.78); }
.echofield i:nth-child(2) { height: 188px; border-color: rgba(59,130,246,.65); margin-left: 4px; }
.echofield i:nth-child(3) { height: 150px; margin-left: 9px; }
.echofield i:nth-child(4) { height: 118px; border-color: rgba(59,130,246,.45); margin-left: 14px; }
.echofield i:nth-child(5) { height: 92px; margin-left: 20px; }
.echofield i:nth-child(6) { height: 70px; margin-left: 27px; }

.dron-card-screen,.nebuloos-card-screen,.dubass-card-screen,.euclid-card-screen,.grain-card-screen,.chordub-card-screen,.spec-card-screen,.choralis-card-screen,.retune-card-screen,.textu-card-screen,.micro-card-screen { position:absolute; top:50%; left:50%; width:calc(100% - 56px); max-height:245px; object-fit:contain; transform:translate(-50%,-50%); filter:drop-shadow(0 24px 32px rgba(0,0,0,.36)); transition:transform .35s ease,filter .35s ease; }
.product-card:hover .dron-card-screen,.product-card:hover .nebuloos-card-screen,.product-card:hover .dubass-card-screen,.product-card:hover .euclid-card-screen,.product-card:hover .grain-card-screen,.product-card:hover .chordub-card-screen,.product-card:hover .spec-card-screen,.choralis-card-screen,.product-card:hover .retune-card-screen,.product-card:hover .textu-card-screen,.product-card:hover .micro-card-screen { transform:translate(-50%,-50%) scale(1.025); filter:drop-shadow(0 28px 38px rgba(0,0,0,.44)); }
[data-theme="dark"] .dron-card-screen-light,[data-theme="light"] .dron-card-screen-dark,[data-theme="dark"] .nebuloos-card-screen-light,[data-theme="light"] .nebuloos-card-screen-dark,[data-theme="dark"] .dubass-card-screen-light,[data-theme="light"] .dubass-card-screen-dark,[data-theme="dark"] .euclid-card-screen-light,[data-theme="light"] .euclid-card-screen-dark,[data-theme="dark"] .grain-card-screen-light,[data-theme="light"] .grain-card-screen-dark,[data-theme="dark"] .chordub-card-screen-light,[data-theme="light"] .chordub-card-screen-dark,[data-theme="dark"] .spec-card-screen-light,[data-theme="light"] .spec-card-screen-dark,[data-theme="dark"] .choralis-card-screen-light,[data-theme="light"] .choralis-card-screen-dark,[data-theme="dark"] .retune-card-screen-light,[data-theme="light"] .retune-card-screen-dark,[data-theme="dark"] .textu-card-screen-light,[data-theme="light"] .textu-card-screen-dark,[data-theme="dark"] .micro-card-screen-light,[data-theme="light"] .micro-card-screen-dark { display:none; }

/* Badge GRATUIT / FREE sur la carte d'un plugin offert : pastille orange dans
   l'angle superieur droit du visuel, par-dessus la capture d'interface. */
.product-flag-free { position:absolute; top:16px; right:16px; z-index:2; background:var(--orange); color:#16181d; font-weight:700; font-size:11px; letter-spacing:.1em; padding:5px 12px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.3); }

.pending-card-art::before {
  content:""; position:absolute; inset:12% 10%; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(135deg,rgba(255,107,46,.08),transparent 55%),var(--surface);
  box-shadow:0 24px 60px var(--shadow);
}
.pending-card-art::after {
  content:""; position:absolute; left:50%; top:50%; width:160px; height:160px;
  border:1px solid rgba(255,107,46,.26); border-radius:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 70px rgba(255,107,46,.08);
}
.pending-card-name { position:absolute; inset:0; z-index:1; display:grid; place-content:center; gap:7px; text-align:center; }
.pending-card-name small,.pending-card-name span { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.24em; }
.pending-card-name strong { font-size:clamp(30px,4vw,50px); font-weight:400; letter-spacing:.08em; }

/* ---- Visuels de carte des produits a venir, meme langage que le wavefield de
   GENATOR : traits fins, ambre + bleu, sur la grille de fond. Un motif propre
   a chaque plugin plutot que le placeholder generique. ---- */

/* CHORDUB : un accord empile (barres verticales, pyramide) suivi de son echo
   dub -- une reprise plus petite et transparente, decalee comme un delay. */
.chord-visual {
  position:absolute; inset:50% auto auto 50%;
  display:flex; align-items:flex-end; gap:16px;
  transform:translate(-50%,-50%);
}
.chord-main,.chord-echo { display:flex; align-items:center; gap:9px; }
.chord-visual i { width:12px; border:1px solid var(--border); border-radius:999px; }
.chord-main i:nth-child(1){ height:104px; }
.chord-main i:nth-child(2){ height:166px; border-color:rgba(59,130,246,.65); }
.chord-main i:nth-child(3){ height:226px; border-color:rgba(255,107,46,.78); }
.chord-main i:nth-child(4){ height:166px; border-color:rgba(59,130,246,.65); }
.chord-main i:nth-child(5){ height:104px; }
.chord-echo { opacity:.34; transform:scale(.62); }
.chord-echo i:nth-child(1){ height:104px; }
.chord-echo i:nth-child(2){ height:166px; border-color:rgba(255,107,46,.78); }
.chord-echo i:nth-child(3){ height:104px; }
.product-card:hover .chord-echo { opacity:.5; }

/* TEXTU : des tranches horizontales decalees, facon texture glitchee. */
.glitch-visual {
  position:absolute; inset:50% auto auto 50%;
  display:flex; flex-direction:column; gap:13px;
  transform:translate(-50%,-50%);
}
.glitch-visual i { height:12px; border:1px solid var(--border); border-radius:999px; }
.glitch-visual i:nth-child(1){ width:120px; margin-left:52px; }
.glitch-visual i:nth-child(2){ width:210px; border-color:rgba(255,107,46,.78); }
.glitch-visual i:nth-child(3){ width:88px;  margin-left:-34px; border-color:rgba(59,130,246,.65); }
.glitch-visual i:nth-child(4){ width:174px; margin-left:70px; }
.glitch-visual i:nth-child(5){ width:132px; border-color:rgba(59,130,246,.65); }
.glitch-visual i:nth-child(6){ width:206px; margin-left:-22px; border-color:rgba(255,107,46,.78); }

.pending-product-visual {
  position:relative; min-height:clamp(360px,44vw,610px); overflow:hidden; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--surface-2);
  background-size:32px 32px; box-shadow:0 36px 110px var(--shadow);
}
.pending-product-visual::before { content:""; position:absolute; width:min(62%,430px); aspect-ratio:1; border:1px solid rgba(255,107,46,.3); border-radius:50%; box-shadow:0 0 100px rgba(255,107,46,.1); }
.pending-product-visual::after { content:""; position:absolute; width:min(38%,260px); aspect-ratio:1; border:1px dashed var(--border); border-radius:50%; }
.pending-product-visual-copy { position:relative; z-index:1; display:grid; gap:12px; max-width:420px; padding:32px; text-align:center; }
.pending-product-visual-copy small { color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.22em; }
.pending-product-visual-copy strong { font-size:clamp(34px,5vw,64px); font-weight:400; letter-spacing:.08em; }
.pending-product-visual-copy span { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.16em; line-height:1.7; }
.product-demo-placeholder.pending-demo-placeholder { background:linear-gradient(135deg,#08090c,#111318); }
.pending-demo-mark { display:grid; place-items:center; width:74px; height:74px; margin:0 auto 18px; border:1px solid rgba(255,107,46,.45); border-radius:50%; color:var(--orange); font-size:24px; font-style:normal; }

.product-info {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.product-info p {
  margin: 0 0 10px;
  color: var(--orange);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.product-info h3 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 450;
  letter-spacing: .09em;
}

.product-info span {
  display: block;
  max-width: 360px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.round-arrow {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.round-arrow:hover {
  color: var(--orange);
  border-color: var(--orange);
}

/* Marqueur "a venir" a la place de la fleche, sur les cartes upcoming
   (GENATOR, CHRISTA) : pastille non cliquable -- pas encore de page produit. */
.product-info .soon-badge {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: none;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
  cursor: default;
}
.product-info .soon-badge .soon-ico {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  opacity: .85;
}

.manifesto {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 8vw;
  align-items: end;
}

.manifesto h2 span {
  color: var(--orange);
}

.manifesto-grid > p {
  margin: 0;
  color: var(--soft);
  font-size: 17px;
  line-height: 1.8;
}

.manifesto-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(48px, 6vw, 88px);
  background: var(--border);
  border: 1px solid var(--border);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.4vw, 38px);
  background: var(--surface);
  transition: background .25s ease;
}

.pillar:hover {
  background: var(--surface-2);
}

.pillar-index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--orange);
}

.pillar h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.35;
  color: var(--text);
}

.pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .manifesto-pillars {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .manifesto-pillars {
    grid-template-columns: 1fr;
  }
}

.reviews-section,
.product-reviews-section {
  padding: clamp(78px, 8vw, 132px) clamp(24px, 7vw, 118px);
  background: var(--bg);
}

.product-reviews-section { border-top: 1px solid var(--border); background: var(--surface); }
.product-reviews-intro { max-width: 720px; margin: 24px 0 0; color: var(--soft); font-size: 16px; line-height: 1.75; }

.review-write-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-content: center;
  gap: 16px 14px;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.review-write-card > svg {
  width: 34px;
  height: 34px;
  grid-row: span 1;
  padding: 8px;
  border: 1px solid rgba(59,130,246,.34);
  border-radius: 50%;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.review-write-card > div { min-width: 0; }
.review-write-card strong { color: var(--text); font-size: 11px; letter-spacing: .1em; }
.review-write-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.review-write-card .button { grid-column: 1 / -1; justify-content: space-between; width: 100%; }

.reviews-heading {
  display: grid;
  grid-template-columns: 1fr minmax(280px, .65fr);
  align-items: end;
  gap: clamp(36px, 8vw, 120px);
}

.reviews-heading h2 {
  margin: 18px 0 0;
  font-size: clamp(46px, 6vw, 94px);
  line-height: .94;
}

.reviews-heading > p {
  max-width: 540px;
  margin: 0;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.75;
}

.reviews-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .65fr) 1.35fr;
  overflow: hidden;
  margin-top: clamp(42px, 5vw, 72px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 28px 90px var(--shadow);
}

.reviews-demo-frame { display: block; }

.reviews-demo-banner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,107,46,.32);
  background: rgba(255,107,46,.08);
  color: var(--soft);
  font-size: 8px;
  letter-spacing: .12em;
  line-height: 1.5;
}

.reviews-demo-banner > span {
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--orange);
  color: #090909;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .15em;
}

.reviews-demo-banner strong { font-weight: 700; }

.reviews-feed-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
}

.reviews-feed-bar > span { display: inline-flex; align-items: center; gap: 9px; color: var(--soft); }
.reviews-feed-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 11px rgba(59,130,246,.5); }
.reviews-feed-bar small { color: var(--muted); font-size: 7px; letter-spacing: .1em; text-align: right; }

.reviews-demo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--border);
}

.review-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 310px;
  padding: clamp(26px, 3vw, 42px);
  background: var(--surface);
  transition: background .25s ease, transform .25s ease;
}

.review-card:hover { background: var(--surface-2); }

.review-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.review-stars {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: .12em;
}

.review-demo-label {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}

.review-card blockquote {
  flex: 1;
  margin: 36px 0 42px;
  color: var(--text);
  font-size: clamp(17px, 1.35vw, 21px);
  font-style: normal;
  font-weight: 330;
  line-height: 1.65;
}

.review-author {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.review-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(59,130,246,.38);
  border-radius: 50%;
  background: rgba(59,130,246,.08);
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.review-author > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.review-author strong { color: var(--text); font-size: 10px; letter-spacing: .11em; }
.review-author small { overflow: hidden; color: var(--muted); font-size: 7px; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.review-author em { color: var(--muted); font-size: 7px; font-style: normal; letter-spacing: .12em; white-space: nowrap; }

.reviews-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .24;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}

.reviews-signal,
.reviews-message,
.reviews-status {
  position: relative;
  z-index: 1;
}

.reviews-signal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 300px;
  border-right: 1px solid var(--border);
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,.11), transparent 54%);
}

.reviews-signal span {
  width: 3px;
  height: 72px;
  border-radius: 3px;
  background: linear-gradient(to top, var(--blue), var(--orange));
  animation: reviews-signal 2.4s ease-in-out infinite;
}

.reviews-signal span:nth-child(2),
.reviews-signal span:nth-child(4) { height: 126px; animation-delay: -.55s; }
.reviews-signal span:nth-child(3) { height: 178px; animation-delay: -1.1s; }

.reviews-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(42px, 6vw, 88px);
}

.reviews-quote {
  height: 38px;
  color: var(--orange);
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
}

.reviews-message strong {
  max-width: 820px;
  color: var(--text);
  font-size: clamp(27px, 3vw, 48px);
  font-weight: 320;
  letter-spacing: .02em;
  line-height: 1.12;
}

.reviews-message p {
  max-width: 690px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.reviews-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}

.reviews-status > span { display: inline-flex; align-items: center; gap: 9px; }
.reviews-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(255,107,46,.48); }

@keyframes reviews-signal {
  0%,100% { transform: scaleY(.62); opacity: .55; }
  50% { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-signal span { animation: none; }
}

@media (max-width: 900px) {
  .reviews-heading { grid-template-columns: 1fr; }
  .reviews-frame { grid-template-columns: 1fr; }
  .reviews-demo-grid { grid-template-columns: 1fr; }
  .reviews-signal { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--border); }
}

@media (max-width: 520px) {
  .reviews-heading h2 { font-size: clamp(38px, 13vw, 58px); }
  .reviews-message { padding: 34px 24px; }
  .reviews-demo-banner { align-items: flex-start; flex-direction: column; }
  .reviews-feed-bar { align-items: flex-start; flex-direction: column; }
  .reviews-feed-bar small { text-align: left; }
  .review-card { min-height: 0; }
  .review-author { grid-template-columns: auto 1fr; }
  .review-author em { display: none; }
  .reviews-status { align-items: flex-start; flex-direction: column; }
  .review-write-card { grid-template-columns: 1fr; }
  .review-write-card > svg { grid-row: auto; }
}

.about-page-main { overflow:hidden; }

.about-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  align-items:center;
  gap:clamp(48px,7vw,120px);
  min-height:calc(100vh - 102px);
  padding:clamp(78px,8vw,132px) clamp(24px,7vw,118px);
  border-bottom:1px solid var(--border);
}
.about-grid-bg { position:absolute; inset:0; opacity:.58; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),radial-gradient(circle at 78% 48%,rgba(255,107,46,.09),transparent 27rem); background-size:72px 72px,72px 72px,auto; pointer-events:none; }
.about-hero-copy,.about-orbit-visual { position:relative; z-index:1; min-width:0; }
.about-hero h1 { margin:28px 0 0; font-size:clamp(54px,7vw,116px); line-height:.9; letter-spacing:-.045em; }
.about-hero h1 > span:first-child { color:var(--orange); }
.about-hero-lead { max-width:760px; margin:36px 0 0; color:var(--soft); font-size:clamp(17px,1.45vw,22px); line-height:1.75; }
.about-hero-meta { display:flex; flex-wrap:wrap; gap:0; margin-top:42px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.14em; }
.about-hero-meta span { padding:0 18px; border-right:1px solid var(--border); }
.about-hero-meta span:first-child { padding-left:0; }
.about-hero-meta span:last-child { border-right:0; }

.about-orbit-visual { aspect-ratio:1; max-width:640px; width:100%; justify-self:end; overflow:hidden; border:1px solid var(--border); background:radial-gradient(circle at center,rgba(255,107,46,.12),transparent 24%),var(--surface); box-shadow:0 36px 110px var(--shadow); }
.about-orbit-visual::before,.about-orbit-visual::after { content:""; position:absolute; background:var(--border); opacity:.75; }
.about-orbit-visual::before { top:50%; right:0; left:0; height:1px; }
.about-orbit-visual::after { top:0; bottom:0; left:50%; width:1px; }
.about-orbit-code { position:absolute; z-index:3; top:22px; left:24px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.16em; }
.about-orbit { position:absolute; z-index:1; top:50%; left:50%; border:1px solid rgba(255,107,46,.48); border-radius:50%; transform:translate(-50%,-50%); animation:about-orbit-spin 16s linear infinite; }
.about-orbit::after { content:""; position:absolute; top:50%; right:-4px; width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 16px rgba(255,107,46,.55); }
.about-orbit-a { width:74%; height:74%; }
.about-orbit-b { width:52%; height:52%; border-color:rgba(59,130,246,.52); animation-duration:12s; animation-direction:reverse; }
.about-orbit-c { width:31%; height:31%; animation-duration:8s; }
.about-orbit-core { position:absolute; z-index:2; top:50%; left:50%; display:grid; width:112px; height:112px; place-items:center; border:1px solid var(--border); border-radius:50%; background:var(--bg); transform:translate(-50%,-50%); box-shadow:0 0 46px rgba(255,107,46,.16); }
.about-orbit-core > span { color:var(--text); font-size:22px; font-weight:300; letter-spacing:.3em; transform:translateX(.15em); }
.about-orbit-core span span { color:var(--orange); }
.about-node { position:absolute; z-index:2; width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 16px rgba(59,130,246,.7); }
.node-a { top:22%; left:34%; }.node-b { right:19%; bottom:30%; }.node-c { bottom:17%; left:28%; background:var(--orange); }
@keyframes about-orbit-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

.about-company,.about-concept,.about-founder,.about-vision,.about-cta { padding:clamp(78px,8vw,132px) clamp(24px,7vw,118px); }
.about-company { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(48px,9vw,150px); background:var(--bg); }
.about-section-heading h2,.about-concept h2,.about-founder h2,.about-vision h2 { margin:0; font-size:clamp(40px,5vw,80px); line-height:.98; }
.about-section-heading h2 em,.about-founder h2 em,.about-vision h2 em { color:var(--orange); font-style:normal; }
.about-company-copy { align-self:end; color:var(--soft); font-size:17px; line-height:1.85; }
.about-company-copy p { margin:0; }
.about-company-copy p + p { margin-top:24px; }
.about-facts { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:8px; border:1px solid var(--border); background:var(--border); }
.about-facts span { min-width:0; padding:24px; background:var(--surface); color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.13em; text-align:center; }

.about-concept { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.about-concept-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.7fr); gap:clamp(38px,7vw,110px); align-items:end; }
.about-concept-head .product-kicker { grid-column:1/-1; }
.about-concept-head h2 span:first-child { color:var(--orange); }
.about-concept-head > p:last-child { margin:0; color:var(--soft); font-size:17px; line-height:1.8; }
.about-principles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:clamp(54px,6vw,90px); border:1px solid var(--border); background:var(--border); }
.about-principles article { min-width:0; min-height:250px; padding:clamp(24px,2.5vw,38px); background:var(--bg); transition:background .2s ease; }
.about-principles article:hover { background:var(--surface-2); }
.about-principles article > span { color:var(--orange); font-size:9px; font-weight:800; letter-spacing:.16em; }
.about-principles h3 { margin:34px 0 16px; font-size:16px; font-weight:550; letter-spacing:.08em; line-height:1.35; }
.about-principles p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }

.about-founder { display:grid; grid-template-columns:234px minmax(0,1fr); gap:clamp(28px,3vw,46px); align-items:start; background:var(--bg); }
.about-founder-visual { position:relative; width:100%; max-width:234px; margin-top:34px; aspect-ratio:588/644; align-self:start; justify-self:start; overflow:hidden; border:1px solid var(--border); background:var(--surface); }
.founder-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:contrast(1.03); }
.about-founder-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 62%,rgba(8,8,9,.24)); }
.founder-placeholder { position:absolute; inset:28px; display:grid; place-items:center; border:1px solid var(--border); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:42px 42px; }
.founder-placeholder > span { position:absolute; top:20px; left:22px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.15em; }
.founder-placeholder strong { color:var(--orange); font-size:clamp(90px,13vw,180px); font-weight:200; line-height:1; }
.founder-placeholder i { position:absolute; right:14%; bottom:12%; width:34%; aspect-ratio:1; border:1px solid rgba(59,130,246,.45); border-radius:50%; }
.founder-prototype-badge { position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%); padding:8px 11px; white-space:nowrap; background:var(--orange); color:#fff; font-size:7px; font-weight:800; letter-spacing:.14em; }
.about-founder-copy h3 { margin:40px 0 20px; color:var(--text); font-size:14px; font-weight:700; letter-spacing:.13em; }
.about-founder-copy > p { margin:0; color:var(--soft); font-size:16px; line-height:1.8; }
.about-founder-copy > p + p { margin-top:18px; }
.about-founder-copy > small { display:block; margin-top:28px; padding:16px 18px; border-left:2px solid var(--orange); background:var(--surface); color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.06em; line-height:1.65; }

.about-vision { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:radial-gradient(circle at 80% 45%,rgba(59,130,246,.08),transparent 30rem),var(--surface); }
.about-vision > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.72fr); gap:clamp(42px,8vw,130px); align-items:end; }
.about-vision > div > p { margin:0; color:var(--soft); font-size:17px; line-height:1.85; }
.about-cta { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:46px; align-items:end; overflow:hidden; background:var(--bg); }
.about-cta::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:linear-gradient(90deg,transparent,black); mask-image:linear-gradient(90deg,transparent,black); pointer-events:none; }
.about-cta > * { position:relative; z-index:1; }
.about-cta h2 { max-width:900px; margin:18px 0 20px; font-size:clamp(38px,5vw,76px); line-height:.98; }
.about-cta p:not(.product-kicker) { max-width:700px; margin:0; color:var(--soft); font-size:16px; line-height:1.75; }
.about-cta .button { min-width:210px; justify-content:space-between; }

@media (max-width:1180px) {
  .about-hero,.about-company,.about-founder { grid-template-columns:1fr; }
  .about-orbit-visual { justify-self:start; max-width:720px; }
  .about-facts { grid-column:auto; }
  .about-founder-visual { max-width:234px; width:100%; margin-top:34px; justify-self:start; }
  .about-cta { grid-template-columns:1fr; align-items:start; }
  .about-cta .button { justify-self:start; }
}
@media (max-width:820px) {
  .about-concept-head,.about-vision > div { grid-template-columns:1fr; }
  .about-principles,.about-facts { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .about-hero { min-height:0; padding-top:72px; }
  .about-hero h1 { font-size:clamp(48px,14vw,72px); }
  .about-hero-meta { display:grid; gap:12px; }
  .about-hero-meta span { padding:0; border-right:0; }
  .about-orbit-core { width:78px; height:78px; }
  .about-principles,.about-facts { grid-template-columns:1fr; }
  .about-founder-visual { aspect-ratio:588/644; }
}

.bundles-page-main { overflow:hidden; }
.bundles-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr); align-items:center; gap:clamp(48px,7vw,118px); min-height:calc(100vh - 102px); padding:clamp(78px,8vw,132px) clamp(24px,7vw,118px); border-bottom:1px solid var(--border); }
.bundles-grid-bg { position:absolute; inset:0; opacity:.62; pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),radial-gradient(circle at 77% 48%,rgba(59,130,246,.09),transparent 28rem); background-size:72px 72px,72px 72px,auto; }
.bundles-hero-copy,.bundle-stack-visual { position:relative; z-index:1; min-width:0; }
.bundles-hero h1 { margin:28px 0 0; font-size:clamp(54px,7vw,112px); line-height:.9; letter-spacing:-.045em; }
.bundles-hero h1 > span:first-child { color:var(--orange); }
.bundles-hero-lead { max-width:770px; margin:36px 0 0; color:var(--soft); font-size:clamp(17px,1.45vw,22px); line-height:1.75; }
.bundles-meta { display:flex; flex-wrap:wrap; margin-top:42px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.14em; }
.bundles-meta span { padding:0 18px; border-right:1px solid var(--border); }
.bundles-meta span:first-child { padding-left:0; }
.bundles-meta span:last-child { border-right:0; }

.bundle-stack-visual { aspect-ratio:1; width:100%; max-width:610px; justify-self:end; overflow:hidden; border:1px solid var(--border); background:radial-gradient(circle at 50% 48%,rgba(59,130,246,.1),transparent 44%),var(--surface); box-shadow:0 36px 110px var(--shadow); }
.bundle-stack-visual::before,.bundle-stack-visual::after { content:""; position:absolute; background:var(--border); opacity:.65; }
.bundle-stack-visual::before { top:50%; right:0; left:0; height:1px; }
.bundle-stack-visual::after { top:0; bottom:0; left:50%; width:1px; }
.bundle-stack-code { position:absolute; z-index:3; top:22px; left:24px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.16em; }
.bundle-stack-count { position:absolute; z-index:3; top:50%; left:50%; display:grid; place-items:center; width:148px; height:148px; border:1px solid var(--border); border-radius:50%; background:var(--bg); transform:translate(-50%,-50%); box-shadow:0 0 52px rgba(59,130,246,.13); }
.bundle-stack-count strong { color:var(--text); font-size:54px; font-weight:250; line-height:.9; }
.bundle-stack-count small { color:var(--muted); font-size:7px; font-weight:750; letter-spacing:.12em; }
.bundle-stack-lines { position:absolute; inset:16% 12%; }
.bundle-stack-lines i { position:absolute; top:calc(var(--i) * 7.2%); left:calc((var(--i) - 1) * 2%); width:calc(100% - (var(--i) - 1) * 4%); height:1px; background:linear-gradient(90deg,transparent,var(--blue),var(--orange),transparent); opacity:calc(.18 + var(--i) * .045); animation:bundle-line-pulse 3.8s ease-in-out infinite; animation-delay:calc(var(--i) * -.24s); }
.bundle-stack-status { position:absolute; z-index:3; right:22px; bottom:20px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:7px; font-weight:750; letter-spacing:.13em; }
.bundle-stack-status > i { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 14px rgba(255,107,46,.65); animation:bundle-status 1.8s ease-in-out infinite; }
@keyframes bundle-line-pulse { 0%,100% { transform:scaleX(.72); opacity:.2; } 50% { transform:scaleX(1); opacity:.75; } }
@keyframes bundle-status { 50% { opacity:.38; } }

.bundles-plan,.bundles-newsletter { padding:clamp(78px,8vw,132px) clamp(24px,7vw,118px); }
.bundles-plan { display:grid; grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr); gap:clamp(46px,8vw,130px); background:var(--bg); }
.bundles-plan-heading h2,.bundles-newsletter h2 { margin:0; font-size:clamp(40px,5vw,80px); line-height:.98; }
.bundles-plan-heading h2 em,.bundles-newsletter h2 em { color:var(--orange); font-style:normal; }
.bundles-plan-copy { align-self:end; color:var(--soft); font-size:17px; line-height:1.85; }
.bundles-plan-copy p { margin:0; }
.bundles-plan-copy p + p { margin-top:24px; }
.bundle-future-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:10px; border:1px solid var(--border); background:var(--border); }
.bundle-future-grid article { position:relative; min-height:320px; padding:clamp(34px,4vw,62px); overflow:hidden; background:var(--surface); }
.bundle-future-grid article::after { content:""; position:absolute; right:-74px; bottom:-74px; width:210px; height:210px; border:1px solid rgba(59,130,246,.18); border-radius:50%; }
.bundle-future-grid article > span { color:var(--orange); font-size:8px; font-weight:800; letter-spacing:.16em; }
.bundle-future-grid h3 { margin:70px 0 18px; font-size:clamp(26px,3vw,44px); font-weight:320; letter-spacing:.02em; }
.bundle-future-grid p { max-width:580px; margin:0; color:var(--soft); font-size:15px; line-height:1.75; }
.bundle-future-grid small { display:block; margin-top:32px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.14em; }
.bundle-category-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.bundle-category-tags b { padding:9px 12px; border:1px solid var(--border); color:var(--muted); font-size:8px; letter-spacing:.14em; }

.bundles-newsletter { display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.8fr); gap:clamp(48px,8vw,128px); align-items:center; border-top:1px solid var(--border); background:radial-gradient(circle at 83% 48%,rgba(255,107,46,.08),transparent 30rem),var(--surface); }
.bundles-newsletter > div > p:last-child { max-width:760px; margin:30px 0 0; color:var(--soft); font-size:17px; line-height:1.8; }
.bundle-newsletter-form { padding:clamp(30px,4vw,54px); border:1px solid var(--border); background:var(--bg); box-shadow:0 26px 80px var(--shadow); }
.bundle-newsletter-form label { display:block; margin-bottom:14px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.15em; }
.bundle-newsletter-form > div { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.bundle-newsletter-form input { min-width:0; height:54px; padding:0 18px; border:1px solid var(--border); border-right:0; outline:0; background:var(--surface); color:var(--text); font:inherit; font-size:13px; }
.bundle-newsletter-form input:focus { border-color:var(--blue); }
.bundle-newsletter-form button { min-width:150px; height:54px; padding:0 22px; border:0; background:var(--orange); color:#fff; font-size:9px; font-weight:800; letter-spacing:.13em; cursor:pointer; transition:filter .2s ease,transform .2s ease; }
.bundle-newsletter-form button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.bundle-newsletter-form > small { display:block; margin-top:14px; color:var(--muted); font-size:8px; line-height:1.6; letter-spacing:.06em; }
.bundle-newsletter-feedback { min-height:18px; margin:12px 0 0; color:var(--blue); font-size:9px; font-weight:700; letter-spacing:.08em; line-height:1.6; }

@media (max-width:1180px) {
  .bundles-hero,.bundles-plan,.bundles-newsletter { grid-template-columns:1fr; }
  .bundle-stack-visual { justify-self:start; max-width:680px; }
  .bundle-future-grid { grid-column:auto; }
  .bundle-newsletter-form { width:100%; max-width:720px; }
}
@media (max-width:760px) {
  .bundles-hero,.bundles-plan,.bundles-newsletter { padding-right:24px; padding-left:24px; }
  .bundles-hero { min-height:auto; padding-top:68px; padding-bottom:72px; }
  .bundles-hero h1 { font-size:clamp(48px,15vw,76px); }
  .bundles-meta { display:grid; gap:12px; }
  .bundles-meta span { padding:0; border-right:0; }
  .bundle-stack-count { width:112px; height:112px; }
  .bundle-stack-count strong { font-size:42px; }
  .bundle-future-grid { grid-template-columns:1fr; }
  .bundle-future-grid article { min-height:280px; }
  .bundle-newsletter-form > div { grid-template-columns:1fr; }
  .bundle-newsletter-form input { border-right:1px solid var(--border); }
  .bundle-newsletter-form button { width:100%; }
}

.account-page-main { min-height: calc(100vh - 102px); }

.account-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(440px,.78fr);
  align-items: center;
  gap: clamp(48px, 8vw, 130px);
  min-height: calc(100vh - 102px);
  overflow: hidden;
  padding: clamp(76px, 8vw, 132px) clamp(24px, 7vw, 118px);
  border-bottom: 1px solid var(--border);
}

/* Espace membre : une fois connecte, la colonne marketing de gauche n'a plus
   d'objet et la fiche produit a besoin de largeur -> passage en pleine page. */
.account-section.is-member {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: auto;
  padding: clamp(48px, 5vw, 84px) clamp(24px, 6vw, 96px);
}
.account-section.is-member .account-intro { display: none; }
.account-section.is-member .account-shell { width: 100%; }
/* Les reglages restent sur une colonne lisible ; les produits prennent tout. */
.account-section.is-member [data-member-form] { max-width: 720px; }
.member-products-grid {
  display: grid;
  /* min(...) evite tout debordement horizontal sous 330 px de large */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.member-products-grid .spec-tile { align-content: start; }
.account-section.is-member .account-tabs { max-width: 460px; }

.account-grid-bg {
  position: absolute;
  inset: 0;
  opacity: .52;
  background-image: linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),radial-gradient(circle at 78% 42%,rgba(59,130,246,.1),transparent 30rem);
  background-size: 72px 72px,72px 72px,auto;
  pointer-events: none;
}

.account-intro,.account-shell { position: relative; z-index: 1; min-width: 0; }
.account-intro h1 { margin: 24px 0 0; font-size: clamp(62px, 8vw, 124px); line-height: .86; }
.account-intro h1 > span:first-child { color: var(--orange); }
.account-lead { max-width: 690px; margin: 36px 0 0; color: var(--soft); font-size: clamp(17px,1.35vw,21px); line-height: 1.75; }

.account-benefits {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1px;
  max-width: 820px;
  margin-top: 52px;
  border: 1px solid var(--border);
  background: var(--border);
}

.account-benefits > div { min-width: 0; padding: 22px; background: var(--surface); }
.account-benefits span { color: var(--orange); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.account-benefits p { margin: 16px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

.account-shell { overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 36px 110px var(--shadow); }

.account-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--border); background:var(--bg); }
.account-tabs button { position:relative; padding:19px 16px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:9px; font-weight:800; letter-spacing:.13em; }
.account-tabs button + button { border-left:1px solid var(--border); }
.account-tabs button::after { content:""; position:absolute; right:50%; bottom:-1px; left:50%; height:2px; background:var(--orange); transition:left .2s ease,right .2s ease; }
.account-tabs button.active { color:var(--text); }
.account-tabs button.active::after { right:18px; left:18px; }

.account-form-wrap { padding:clamp(28px,3.2vw,48px); }
.account-form { display:grid; gap:20px; }
.account-form[hidden] { display:none; }
.account-form:not([hidden]) { animation:account-panel-in .24s ease both; }
@keyframes account-panel-in {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
.account-form-heading { margin-bottom:8px; }
.account-form-heading > span { color:var(--orange); font-size:8px; font-weight:800; letter-spacing:.16em; }
.account-form-heading h2 { margin:15px 0 0; font-size:clamp(26px,2.4vw,38px); line-height:1.08; }
.account-form-heading p { margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.65; }

.account-field { display:grid; gap:9px; }
.account-field > span { color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.14em; }
.account-field > small { color:var(--muted); font-size:8px; letter-spacing:.04em; line-height:1.5; }
.account-field input,
.account-field select { width:100%; height:50px; padding:0 15px; border:1px solid var(--border); border-radius:0; outline:0; background:var(--bg); color:var(--text); font:inherit; font-size:13px; transition:border-color .2s ease,box-shadow .2s ease; }
/* Les listes deroulantes gardaient le rendu natif clair du navigateur, illisible
   sur le theme sombre : on retire l'apparence systeme et on redessine la fleche. */
.account-field select { -webkit-appearance:none; appearance:none; padding-right:38px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.account-field select option { background:var(--bg); color:var(--text); }
.account-field input:focus,
.account-field select:focus { border-color:rgba(59,130,246,.55); box-shadow:0 0 0 3px rgba(59,130,246,.08); }
.account-field input::placeholder { color:var(--muted); opacity:.65; }
.account-form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.account-form-options { display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.1em; }
.account-form-options label,.account-consent { display:flex; align-items:flex-start; gap:9px; cursor:pointer; }
.account-form-options input,.account-consent input { margin:2px 0 0; accent-color:var(--orange); }
.account-form-options a:hover { color:var(--orange); }
.account-consent { color:var(--muted); font-size:9px; line-height:1.55; }
.account-product-alert { padding:14px 15px; border:1px solid var(--border); background:var(--bg); color:var(--soft); transition:border-color .2s ease,background .2s ease; }
.account-product-alert:hover { border-color:rgba(59,130,246,.45); background:var(--surface); }
.account-product-alert input:checked + span { color:var(--text); }
.account-submit { width:100%; justify-content:space-between; margin-top:4px; }
.account-feedback { min-height:0; margin-top:18px; color:var(--orange); font-size:9px; font-weight:700; letter-spacing:.1em; line-height:1.6; }
.account-feedback:empty { display:none; }

.account-prototype-note { display:flex; align-items:center; gap:9px; padding:15px 18px; border-top:1px solid var(--border); color:var(--muted); font-size:7px; font-weight:700; letter-spacing:.1em; line-height:1.55; }
.account-prototype-note i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--orange); }

@media (max-width: 1180px) {
  .account-section { grid-template-columns:1fr; }
  .account-shell { width:100%; max-width:760px; }
}

@media (max-width: 720px) {
  .account-section { min-height:0; padding-top:72px; }
  .account-intro h1 { font-size:clamp(54px,17vw,84px); }
  .account-benefits { grid-template-columns:1fr; }
}

@media (max-width: 520px) {
  .account-form-row { grid-template-columns:1fr; }
  .account-form-options { align-items:flex-start; flex-direction:column; }
  .account-tabs button { padding:16px 10px; font-size:8px; }
}

footer {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 46px clamp(24px, 7vw, 118px);
  color: var(--muted);
  font-size: 10px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-brand strong {
  color: var(--text);
  font-size: 13px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-link {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.social-link:hover {
  border-color: rgba(59,130,246,.5);
  color: var(--orange);
  transform: translateY(-2px);
}

.social-link svg {
  width: 17px;
  height: 17px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-link:first-child svg path { fill: currentColor; stroke: none; }
.social-link .social-dot { fill: currentColor; stroke: none; }

.footer-links {
  display: flex;
  gap: 28px;
  font-weight: 650;
  letter-spacing: .12em;
}

.footer-links a:hover {
  color: var(--orange);
}

@media (max-width:1180px) {
  footer { grid-template-columns:1fr auto; }
  .footer-links { grid-column:1/-1; }
}

.demo-toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 14px 60px var(--shadow);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.demo-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.demo-eq {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.demo-eq i {
  width: 2px;
  height: 7px;
  background: var(--orange);
  animation: eq .7s ease-in-out infinite alternate;
}

.demo-eq i:nth-child(2) { animation-delay: -.25s; height: 15px; }
.demo-eq i:nth-child(3) { animation-delay: -.45s; height: 11px; }
.demo-eq i:nth-child(4) { animation-delay: -.1s; height: 17px; }

@keyframes spin {
  to { transform: rotate(395deg); }
}

@keyframes spinReverse {
  to { transform: rotate(-360deg); }
}

@keyframes eq {
  to { transform: scaleY(.35); }
}

@media (max-width: 1380px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    position: fixed;
    top: 94px;
    right: 0;
    left: 0;
    display: none;
    padding: 15px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav a {
    padding: 18px 0;
  }

  .main-nav a::after {
    bottom: 10px;
  }

  .menu-button {
    display: flex;
    width: 42px;
    height: 42px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
  }

  .menu-button span {
    width: 100%;
    height: 1px;
    background: var(--text);
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-copy {
    padding-top: 30px;
  }

  .hero-visual {
    align-items: flex-start;
  }

  .product-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 720px) {
  :root { --anchor-offset: 114px; }

  .site-header {
    min-height: 82px;
    padding: 8px 16px;
  }

  .brand-logo-frame {
    width: 126px;
    height: 56px;
    margin-right: 12px;
    overflow: visible;
  }

  .brand-logo {
    width: 120px;
    height: 54px;
    transform: none;
  }

  .brand-name {
    width: auto;
  }

  .brand-name strong {
    font-size: 13px;
    letter-spacing: .11em !important;
    word-spacing: .18em;
  }

  .brand-name small {
    display: none;
  }

  .theme-switch,
  .cart-button {
    display: none;
  }

  .account-link { width: 42px; padding: 0; border-radius: 50%; }
  .account-link span { display: none; }

  .lang-switch {
    order: 1;
  }

  .main-nav {
    top: 82px;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  h1 {
    font-size: clamp(52px, 17vw, 78px);
  }

  .hero-description {
    font-size: 15px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-meta {
    gap: 14px 0;
    margin-top: 45px;
  }

  .hero-meta span {
    width: 50%;
    padding: 0 10px 0 0;
    border: 0;
  }

  .visual-panel {
    padding: 16px;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-art {
    min-height: 270px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-group-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .product-group-heading > p {
    max-width: none;
    text-align: left;
  }

  .manifesto-grid {
    grid-template-columns: 1fr;
  }

  footer {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .site-header { padding-right: 12px; padding-left: 12px; }
  .brand-logo-frame { width: 96px; margin-right: 8px; }
  .brand-logo { width: 92px; }
  .header-actions { gap: 6px; }
  .lang-option { min-width: 40px; padding: 9px 8px; }
  .account-link,.menu-button { width: 38px; height: 38px; }
}

@media (max-width: 420px) {
  .brand-name { display: none; }
}

.text-white { color: var(--text) !important; }


/* Dropdown PLUGINS */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 34px 0 31px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-size: 12px;
  font-weight: 600; letter-spacing: .13em;
}
.nav-dropdown-trigger svg { width: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .2s ease; }
.nav-dropdown.open .nav-dropdown-trigger,
.nav-dropdown:hover .nav-dropdown-trigger { color: var(--text); }
.nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% - 14px); left: 50%; min-width: 180px;
  padding: 9px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 20px 60px var(--shadow); opacity: 0; visibility: hidden;
  transform: translate(-50%, 8px); transition: .2s ease;
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-menu-entry { position: relative; }
.nav-menu-category { justify-content: space-between; gap: 18px; }
.nav-menu-arrow { color: var(--orange); font-size: 19px; font-weight: 400; line-height: 1; }
.nav-product-submenu {
  position: absolute;
  top: -10px;
  left: calc(100% - 1px);
  width: 210px;
  padding: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 20px 20px 60px var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.nav-menu-entry:hover > .nav-product-submenu,
.nav-menu-entry:focus-within > .nav-product-submenu { opacity: 1; visibility: visible; transform: translateX(0); }
.nav-product-submenu a { min-height: 36px; margin: 3px 0; padding: 9px 13px; }
.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 5px 0;
  padding: 0 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .16em;
  background: transparent;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.nav-dropdown-menu a::after {
  content: none !important;
  display: none !important;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: #ffffff;
  background: #3b82f6;
  border-color: #3b82f6;
  transform: translateX(2px);
  outline: none;
}
.product-card.is-hidden { display: none; }
.round-arrow { display: grid; place-items: center; }

/* Page produit */
.product-page-main { min-height: 100vh; }
.product-hero {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(500px,1.15fr);
  gap: 6vw; align-items: center;
  padding: clamp(72px,8vw,135px) clamp(24px,7vw,118px);
  border-bottom: 1px solid var(--border);
}
.product-hero::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:46px 46px; opacity:.55; pointer-events:none; }
.product-hero-copy,.plugin-ui-preview,.ui-compare { position:relative; z-index:1; }
.product-kicker { display:flex; align-items:center; gap:13px; margin:0 0 24px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.2em; }
.product-kicker::before { content:""; flex:0 0 32px; width:32px; height:1px; background:var(--orange); }
.product-version-kicker { color:var(--soft); }
.product-hero h1 { font-size:clamp(62px,8vw,128px); }
.product-hero h1 > .product-brand-mark { display:block; color:var(--text); font-size:.21em; letter-spacing:.34em; margin-bottom:18px; }
.product-hero h1 .product-brand-o { display:inline; color:var(--orange); font-size:1em; letter-spacing:inherit; margin:0; }
.product-lead { max-width:640px; margin:30px 0 0; color:var(--soft); font-size:clamp(17px,1.45vw,22px); line-height:1.65; }
.product-price-row { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:36px; }
.launch-pricing { display:flex; flex-direction:column; align-items:flex-start; gap:11px; min-width:250px; }
.launch-offer-badge { position:relative; display:inline-flex; align-items:center; gap:9px; overflow:hidden; padding:7px 11px; border:1px solid rgba(255,107,46,.38); border-radius:7px; background:rgba(255,107,46,.08); color:var(--soft); font-size:9px; font-weight:750; letter-spacing:.14em; }
.launch-offer-badge::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.17) 50%,transparent 75%); transform:translateX(-130%); animation:launch-sweep 4.8s ease-in-out infinite; pointer-events:none; }
.launch-pulse { width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(255,107,46,.45); animation:launch-pulse 1.9s ease-out infinite; }
.launch-price-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:11px; }
.product-price-old { color:var(--muted); font-size:19px; font-weight:450; letter-spacing:.04em; text-decoration:line-through; text-decoration-color:var(--orange); text-decoration-thickness:1px; }
.product-price { font-size:34px; font-weight:300; letter-spacing:.02em; }
.product-price-promo { color:var(--orange); font-size:42px; line-height:1; }
.product-price-pending { color:var(--muted); font-size:clamp(22px,2.4vw,34px); letter-spacing:.1em; }
.button:disabled,.button[aria-disabled="true"] { cursor:not-allowed; opacity:.48; filter:saturate(.35); }
.button[aria-disabled="true"] { pointer-events:none; }
.product-price small { color:var(--muted); font-size:10px; letter-spacing:.12em; }
.launch-saving { padding:5px 8px; border:1px solid rgba(59,130,246,.28); border-radius:6px; background:rgba(59,130,246,.08); color:var(--soft); font-size:8px; font-weight:700; letter-spacing:.12em; }
.launch-pricing.promo-expired .product-price-old,.launch-pricing.promo-expired .launch-saving { display:none; }
.launch-pricing.promo-expired .launch-offer-badge { border-color:var(--border); background:rgba(128,128,128,.08); color:var(--muted); }
.launch-pricing.promo-expired .launch-pulse { background:var(--muted); box-shadow:none; animation:none; }
.payment-trust { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; max-width:720px; margin-top:22px; }
.payment-security { display:inline-flex; align-items:center; gap:8px; min-width:0; color:var(--soft); font-size:8px; font-weight:750; letter-spacing:.13em; line-height:1.5; }
.payment-trust-icon { width:16px; height:16px; flex:0 0 16px; fill:none; stroke:var(--blue); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.payment-methods { display:flex; flex-wrap:wrap; gap:5px; }
.payment-methods > span { padding:5px 7px; border:1px solid var(--border); border-radius:5px; background:var(--surface); color:var(--muted); font-size:7px; font-weight:800; letter-spacing:.08em; line-height:1; }
.payment-availability { flex-basis:100%; color:var(--muted); font-size:8px; letter-spacing:.04em; line-height:1.5; }
@keyframes launch-pulse { 0% { box-shadow:0 0 0 0 rgba(255,107,46,.45); } 70%,100% { box-shadow:0 0 0 7px rgba(255,107,46,0); } }
@keyframes launch-sweep { 0%,58% { transform:translateX(-130%); } 82%,100% { transform:translateX(130%); } }
@media (prefers-reduced-motion:reduce) { .launch-offer-badge::after,.launch-pulse { animation:none; } }
.product-spec-strip { display:flex; flex-wrap:nowrap; gap:0; max-width:100%; margin-top:54px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.15em; }
.product-spec-strip span { flex:0 0 auto; padding:0 10px; border-right:1px solid var(--border); white-space:nowrap; }
.product-spec-strip span:first-child { padding-left:0; }
.plugin-ui-preview { border:1px solid var(--border); background:var(--surface); box-shadow:0 36px 110px var(--shadow); }
.preview-header { display:flex; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--border); color:var(--muted); font-size:8px; letter-spacing:.15em; }
.preview-screen { position:relative; min-height:460px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 48%,rgba(255,107,46,.1),transparent 32%),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),var(--surface-2); background-size:auto,30px 30px,30px 30px,auto; }
.preview-orb { position:relative; width:270px; aspect-ratio:1; border:1px solid rgba(255,107,46,.65); border-radius:50%; animation:spin 22s linear infinite; }
.preview-orb::before { content:""; position:absolute; inset:34px; border:1px dashed rgba(59,130,246,.5); border-radius:50%; }
.preview-orb::after { content:""; position:absolute; inset:50%; width:72px; height:72px; margin:-36px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffb08e,var(--orange) 48%,#681f0c 76%); box-shadow:0 0 48px rgba(255,107,46,.45); }
.preview-controls { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; padding:18px; border-top:1px solid var(--border); }
.preview-control { text-align:center; color:var(--muted); font-size:8px; letter-spacing:.1em; }
.preview-knob { width:34px; height:34px; margin:0 auto 7px; border:5px solid #111; border-top-color:var(--orange); border-radius:50%; background:var(--surface-2); }
/* Comparateur d'UI DARK / LIGHT (barre verticale glissante) */
.ui-compare {
  margin:0; width:100%;
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:var(--surface); box-shadow:0 36px 110px var(--shadow);
  user-select:none; touch-action:none; cursor:ew-resize;
}
/* L'image de base (en flux) impose la hauteur → le cadre épouse le ratio réel de la capture */
.ui-compare .ui-compare-base { position:relative; width:100%; height:auto; display:block; pointer-events:none; }
.ui-compare .ui-compare-top { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block; pointer-events:none; }
.ui-compare .ui-compare-top { clip-path:inset(0 0 0 var(--pos,50%)); }
.ui-compare-label {
  position:absolute; bottom:16px; z-index:3;
  padding:5px 11px; border-radius:7px;
  background:rgba(10,10,12,.5); color:#fff; backdrop-filter:blur(5px);
  font-size:10px; font-weight:700; letter-spacing:.2em; pointer-events:none;
}
.ui-compare-label-dark { left:16px; }
.ui-compare-label-light { right:16px; }
.ui-compare-divider {
  position:absolute; top:0; bottom:0; left:var(--pos,50%); z-index:4;
  width:2px; margin-left:-1px; background:var(--orange);
  cursor:ew-resize; touch-action:none;
}
.ui-compare-divider:focus-visible { outline:none; box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--orange); }
.ui-compare-handle {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--orange); color:#fff; display:grid; place-items:center;
  box-shadow:0 3px 14px rgba(0,0,0,.45);
}
.ui-compare-handle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Vidéo de démonstration produit */
.product-video-section { padding:clamp(68px,7vw,112px) clamp(24px,7vw,118px); border-bottom:1px solid var(--border); }
.product-video-section.has-audio-following { padding-bottom:clamp(38px,4vw,62px); border-bottom:0; }
.product-video-head { margin-bottom:clamp(28px,3.4vw,48px); }
.product-video-head h2 { margin:14px 0 0; font-size:clamp(32px,4.2vw,62px); font-weight:450; letter-spacing:.035em; }
.product-video-frame { position:relative; width:70%; margin-inline:auto; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:#050506; box-shadow:0 36px 110px var(--shadow); }
.product-video-badge { position:absolute; top:18px; right:18px; z-index:2; padding:7px 11px; border-radius:7px; background:rgba(10,10,12,.68); color:#fff; backdrop-filter:blur(6px); font-size:9px; font-weight:700; letter-spacing:.16em; pointer-events:none; }
.product-demo-video { display:block; width:100%; aspect-ratio:16/9; background:#050506; object-fit:cover; transform:scale(1.02); transform-origin:center center; accent-color:var(--orange); }
.dron-video-frame { aspect-ratio:1189/849; }
/* Video auto-detectee (pending-product-page.js) : le ratio vient de la capture
   d'interface du plugin, pose en --video-ratio. Aucune regle par produit. */
.product-video-frame.has-demo-video { aspect-ratio:var(--video-ratio,16/9); }
/* Le cadre prend le RATIO REEL de la video (--video-ratio). Les demos sont
   recadrees A LA SOURCE avec ffmpeg pour ne contenir QUE le plugin (cf.
   PROJECT-NOTES) : aucune transformation CSS n'est donc necessaire ici.
   ⚠️ Ne PAS revenir a un recadrage CSS : agrandir le <video> fait sortir sa barre
   de controles du cadre, elle est alors rognee (lecture, volume, plein ecran). */
.product-video-frame.has-demo-video { position:relative; overflow:hidden; aspect-ratio:var(--video-ratio,16/9); }
.product-video-frame.has-demo-video .product-demo-video {
  display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:contain; transform:none; }
.dron-demo-video { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center center; transform:none; }
.product-demo-placeholder { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:16/9; overflow:hidden; background:#050506; }
.product-demo-placeholder img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; filter:saturate(.65) brightness(.72); }
.product-demo-placeholder::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,5,6,.12),rgba(5,5,6,.72)); }
.product-demo-placeholder > span { position:relative; z-index:1; max-width:70%; padding:14px 18px; border:1px solid rgba(255,255,255,.18); border-radius:8px; background:rgba(5,5,6,.66); color:#fff; font-size:11px; font-weight:700; letter-spacing:.16em; line-height:1.6; text-align:center; backdrop-filter:blur(7px); }
.reviews-empty-frame { display:block; }
.reviews-empty-state { display:grid; place-items:center; min-height:220px; padding:42px; text-align:center; background:var(--surface); }
.reviews-empty-state strong { color:var(--text); font-size:clamp(18px,2vw,27px); font-weight:450; letter-spacing:.05em; }
.reviews-empty-state p { max-width:620px; margin:14px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }

/* Caractéristiques principales de la machine */
.product-specs { padding:clamp(64px,7vw,112px) clamp(24px,7vw,118px); border-bottom:1px solid var(--border); }
.specs-head { margin-bottom:clamp(34px,4vw,58px); }
.specs-head h2 { max-width:100%; margin:14px 0 0; font-size:clamp(30px,3.6vw,54px); }
.specs-head .eyebrow [data-i18n] { white-space:nowrap; }
.specs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid var(--border); background:var(--border); }
.spec-tile { display:flex; flex-direction:column; gap:12px; padding:clamp(26px,2.4vw,40px); background:var(--surface); transition:background .25s ease; }
.spec-tile:hover { background:var(--surface-2); }
.spec-index { font-size:12px; font-weight:600; letter-spacing:.18em; color:var(--orange); }
.spec-tile h3 { margin:0; font-size:18px; font-weight:600; letter-spacing:.02em; line-height:1.3; color:var(--text); }
.spec-tile p { margin:0; color:var(--muted); font-size:14px; line-height:1.65; }
@media (max-width:900px) { .specs-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) {
  .specs-head h2 { font-size:clamp(24px,6vw,28px); line-height:1.06; }
  .specs-grid { grid-template-columns:1fr; }
}

.product-content { padding:clamp(76px,8vw,130px) clamp(24px,7vw,118px); }
.product-intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:9vw; align-items:start; }
.product-intro-grid h2 { font-size:clamp(42px,5vw,80px); }
.product-intro-grid h2 em { color:var(--orange); font-style:normal; }
.product-copy { color:var(--soft); font-size:17px; line-height:1.85; }
.feature-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:70px; border:1px solid var(--border); background:var(--border); }
.feature-item { min-height:210px; padding:30px; background:var(--surface); }
.feature-number { color:var(--orange); font-size:9px; letter-spacing:.17em; }
.feature-item h3 { margin:24px 0 12px; font-size:22px; font-weight:450; letter-spacing:.06em; }
.feature-item p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.audio-demo-section { padding:0 clamp(24px,7vw,118px) clamp(76px,8vw,130px); }
.audio-demo-section.is-after-video { border-bottom:1px solid var(--border); }
.audio-demo-box { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; padding:34px; border:1px solid var(--border); background:var(--surface); }
.audio-wave { display:none; }
.sof-audio-player { position:relative; margin-top:-1px; padding:18px 24px 16px; border:1px solid var(--border); background:var(--bg); transition:opacity .25s ease,border-color .25s ease; }
.sof-audio-player.is-ready { border-color:color-mix(in srgb,var(--text) 18%,var(--border)); }
.sof-audio-player.is-waiting { opacity:.68; }
.audio-player-media { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.audio-player-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:0 0 14px; }
.audio-track-list { display:flex; flex:1 1 auto; flex-wrap:wrap; gap:6px; margin:0; }
.audio-track-choice { display:inline-flex; align-items:center; gap:8px; min-width:0; padding:8px 11px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; text-align:left; transition:border-color .2s ease,background .2s ease,color .2s ease; }
.audio-track-choice span { color:var(--text); font-size:10px; font-weight:700; letter-spacing:.12em; }
.audio-track-choice strong { overflow:hidden; font-size:8px; font-weight:700; letter-spacing:.14em; text-overflow:ellipsis; white-space:nowrap; }
.audio-track-choice:hover { border-color:var(--soft); color:var(--text); }
.audio-track-choice.active { border-color:var(--orange); background:rgba(255,107,46,.07); color:var(--orange); }
.audio-track-choice.active span { color:var(--orange); }
.audio-stats { display:flex; flex:0 0 auto; align-items:stretch; min-height:38px; border:1px solid var(--border); background:var(--surface); }
.audio-stat,.audio-like-button { display:flex; align-items:center; gap:10px; padding:7px 12px; }
.audio-stat { min-width:92px; border-right:1px solid var(--border); }
.audio-stat small,.audio-like-button small { display:block; color:var(--muted); font-size:7px; font-weight:700; letter-spacing:.15em; line-height:1.2; }
.audio-stat strong,.audio-like-button strong { display:block; margin-top:3px; color:var(--text); font-size:12px; font-weight:600; letter-spacing:.08em; line-height:1; }
.audio-like-button { min-width:98px; border:0; background:transparent; color:var(--muted); cursor:pointer; text-align:left; transition:background .2s ease,color .2s ease; }
.audio-like-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; transition:fill .2s ease,color .2s ease,transform .2s ease; }
.audio-like-button:hover { background:rgba(255,107,46,.06); color:var(--orange); }
.audio-like-button:hover svg { transform:scale(1.08); }
.audio-like-button.is-liked { color:var(--orange); }
.audio-like-button.is-liked svg { fill:var(--orange); }

/* VOLUME des demos audio, injecte par script.js dans la boite .audio-stats, il
   reprend donc ses bordures. Meme grammaire visuelle que LECTURES / J'AIME. */
.audio-volume { gap:8px; border-left:1px solid var(--border); }
.audio-volume span { display:block; }
.audio-volume-button { display:flex; align-items:center; padding:0; border:0; background:transparent;
  color:var(--muted); cursor:pointer; transition:color .2s ease; }
.audio-volume-button svg { width:19px; height:19px; fill:currentColor; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; }
.audio-volume-button svg path[data-audio-wave] { fill:none; transition:opacity .2s ease; }
.audio-volume-button:hover { color:var(--orange); }
.audio-volume-button.is-muted { color:var(--muted); opacity:.7; }
.audio-volume-slider { display:block; width:78px; height:3px; margin-top:6px; padding:0; border-radius:2px;
  background:var(--border); accent-color:var(--orange); cursor:pointer; -webkit-appearance:none; appearance:none; }
.audio-volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:11px; height:11px; border:0;
  border-radius:50%; background:var(--orange); cursor:pointer; }
.audio-volume-slider::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%;
  background:var(--orange); cursor:pointer; }

@media (max-width: 720px) {
  .audio-volume-slider { width:60px; }
}
.audio-player-track { --audio-progress:0%; position:relative; height:50px; overflow:hidden; cursor:pointer; }
.audio-player-track::after { content:""; position:absolute; z-index:1; top:4px; bottom:4px; left:var(--audio-progress); width:1px; background:var(--orange); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.sof-audio-player.is-ready .audio-player-track::after { opacity:.68; }
.audio-player-waveform { position:absolute; inset:0; display:flex; align-items:center; gap:3px; padding:6px 0; pointer-events:none; }
.audio-player-waveform i { flex:1 1 0; min-width:0; height:var(--wave-height,28%); background:color-mix(in srgb,var(--text) 24%,transparent); opacity:.72; transition:height .28s ease,background .16s linear,opacity .16s linear; }
.audio-player-waveform i.is-played { background:var(--orange); opacity:1; }
.sof-audio-player.is-waiting .audio-player-waveform i { opacity:.42; }
.audio-player-seek { --audio-progress:0%; position:absolute; z-index:2; inset:0; width:100%; height:100%; margin:0; appearance:none; -webkit-appearance:none; cursor:pointer; opacity:0; background:transparent; }
.audio-player-seek:disabled { cursor:not-allowed; }
.audio-player-seek::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(90deg,var(--orange) 0 var(--audio-progress),var(--border-strong) var(--audio-progress) 100%); }
.audio-player-seek::-moz-range-track { height:3px; border:0; border-radius:3px; background:linear-gradient(90deg,var(--orange) 0 var(--audio-progress),var(--border-strong) var(--audio-progress) 100%); }
.audio-player-seek::-webkit-slider-thumb { width:14px; height:14px; margin-top:-5.5px; appearance:none; -webkit-appearance:none; border:2px solid var(--surface); border-radius:50%; background:var(--orange); box-shadow:0 0 0 1px rgba(255,107,46,.45); }
.audio-player-seek::-moz-range-thumb { width:12px; height:12px; border:2px solid var(--surface); border-radius:50%; background:var(--orange); box-shadow:0 0 0 1px rgba(255,107,46,.45); }
.audio-player-seek:disabled::-webkit-slider-thumb { background:var(--muted); box-shadow:none; }
.audio-player-seek:disabled::-moz-range-thumb { background:var(--muted); box-shadow:none; }
.audio-player-meta { display:grid; grid-template-columns:56px 1fr 56px; align-items:center; gap:16px; margin-top:6px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.16em; }
.audio-player-meta strong { color:var(--soft); text-align:center; font-size:9px; font-weight:700; letter-spacing:.18em; }
.audio-player-meta span:last-child { text-align:right; }
.audio-demo-box .button:disabled { cursor:not-allowed; filter:saturate(.3); opacity:.55; transform:none; }
.system-section { padding:clamp(76px,8vw,130px) clamp(24px,7vw,118px); border-top:1px solid var(--border); background:var(--surface); }
.system-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.system-card { padding:26px; border:1px solid var(--border); background:var(--bg); }
.system-card small { color:var(--orange); letter-spacing:.15em; }
.system-card h3 { margin:14px 0 10px; font-size:18px; }
.system-card p { color:var(--muted); line-height:1.65; font-size:12px; }
.final-product-cta { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.85fr); align-items:end; gap:clamp(36px,6vw,96px); overflow:hidden; padding:clamp(76px,8vw,132px) clamp(24px,7vw,118px); border-top:1px solid var(--border); background:radial-gradient(circle at 82% 50%,rgba(255,107,46,.09),transparent 34%),var(--bg); }
.final-product-cta::before { content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:linear-gradient(90deg,transparent,black 35%,black); mask-image:linear-gradient(90deg,transparent,black 35%,black); pointer-events:none; }
.final-product-cta-copy,.final-product-cta-buy { position:relative; z-index:1; min-width:0; }
.final-product-cta-copy h2 { max-width:760px; margin:14px 0 20px; font-size:clamp(34px,4.8vw,72px); line-height:.98; word-break:normal; overflow-wrap:normal; }
.final-product-cta-meta { margin:0; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.15em; line-height:1.7; }
.final-product-cta-buy { display:flex; align-items:flex-end; justify-content:flex-end; flex-wrap:wrap; width:100%; gap:24px; }
.final-product-cta-buy .launch-pricing { min-width:0; }
.final-product-cta-buy .button { flex:0 0 auto; }
.payment-trust-final { flex:1 0 100%; justify-content:flex-end; width:100%; max-width:100%; margin-top:0; }
.payment-trust-final .payment-availability { text-align:right; }

@media (max-width:1380px) {
  .final-product-cta { grid-template-columns:minmax(0,1fr); align-items:start; }
  .final-product-cta-buy { justify-content:flex-start; }
  .payment-trust-final { justify-content:flex-start; }
  .payment-trust-final .payment-availability { text-align:left; }
}

@media (max-width:1240px) {
  .nav-dropdown-trigger { padding:18px 0; }
  .nav-dropdown-menu { position:static; display:none; min-width:0; margin-left:18px; opacity:1; visibility:visible; transform:none; box-shadow:none; }
  .nav-dropdown.open .nav-dropdown-menu { display:block; }
  .product-hero { grid-template-columns:1fr; }
  .plugin-ui-preview,.ui-compare { max-width:820px; }
}
@media (max-width:760px) {
  .product-intro-grid,.feature-list,.system-grid { grid-template-columns:1fr; }
  .final-product-cta-copy h2 { font-size:clamp(32px,9vw,48px); }
  .final-product-cta-buy { gap:18px; }
  .preview-controls { grid-template-columns:repeat(3,1fr); }
  .preview-screen { min-height:340px; }
  .preview-orb { width:210px; }
  .audio-demo-box { grid-template-columns:1fr; }
  .audio-demo-box .button { width:100%; }
  .sof-audio-player { padding:18px; }
  .audio-player-toolbar { flex-direction:column; gap:12px; }
  .audio-stats { align-self:flex-end; }
  .audio-player-track { height:44px; }
  .audio-player-waveform { gap:1px; }
  .audio-track-choice { padding:8px 10px; }
  .audio-player-meta { grid-template-columns:48px 1fr 48px; gap:8px; letter-spacing:.1em; }
  .audio-player-meta strong { font-size:8px; letter-spacing:.11em; }
}

/* Menu compact : panneau vertical contenu, sans chevauchement du sous-menu. */
@media (max-width:1380px) {
  .main-nav {
    position:fixed;
    z-index:51;
    top:102px;
    right:0;
    left:auto;
    display:none;
    width:min(370px,100vw);
    max-height:calc(100vh - 102px);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow-y:auto;
    padding:20px 28px 28px;
    border-right:0;
    border-bottom:1px solid var(--border);
    border-left:1px solid var(--border);
    background:var(--surface);
    box-shadow:0 28px 80px var(--shadow);
  }

  .main-nav.open { display:flex; }
  .main-nav > a { width:100%; padding:16px 0; }
  .main-nav > a::after { bottom:8px; }
  .nav-dropdown { width:100%; }
  .nav-dropdown-trigger { width:100%; justify-content:space-between; padding:16px 0; }
  .nav-dropdown-menu {
    position:static;
    display:none;
    min-width:0;
    margin:0;
    padding:5px 0 10px 14px;
    border:0;
    background:transparent;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .nav-dropdown.open .nav-dropdown-menu { display:grid; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; opacity:1; visibility:visible; transform:none; }
  .nav-dropdown-menu a { min-height:38px; padding:10px 12px; border:1px solid var(--border); background:var(--bg); }
  .nav-dropdown-menu a::after { display:none; }
  .nav-menu-entry { min-width:0; }
  .nav-menu-entry > .nav-menu-category { margin:0; }
  .nav-menu-arrow { display:none; }
  .nav-product-submenu { display:none; }
}

@media (max-width:720px) {
  .main-nav { top:82px; width:100%; max-height:calc(100vh - 82px); border-left:0; }
}

/* Réseaux sociaux : format plus lisible et couleurs officielles au survol. */
.social-link { width:42px; height:42px; }
.social-link svg { width:21px; height:21px; }
.social-link:nth-child(1):hover { border-color:#1877f2; background:#1877f2; color:#fff; }
.social-link:nth-child(2):hover { border-color:#000; background:#000; color:#fff; }
.social-link:nth-child(3):hover { border-color:#ff0033; background:#ff0033; color:#fff; }
.social-link:nth-child(4):hover { border-color:#ff5500; background:#ff5500; color:#fff; }
.social-link:nth-child(5):hover { border-color:transparent; background:radial-gradient(circle at 30% 107%,#fdf497 0 5%,#fd5949 34%,#d6249f 60%,#285aeb 90%); color:#fff; }

/* Commandes compactes : langue et thème superposés, compte puis panier à droite. */
@media (min-width:721px) {
  .header-actions {
    display:grid;
    grid-template-columns:auto auto auto auto auto;
    grid-template-rows:42px;
    align-items:center;
    justify-content:end;
    column-gap:12px;
  }
  .lang-switch { grid-column:1; grid-row:1; }
  .theme-switch { grid-column:2; grid-row:1; margin-left:4px; }
  .account-link { grid-column:3; grid-row:1; }
  .menu-button { grid-column:4; grid-row:1; }
  .cart-button { grid-column:5; grid-row:1; }
  .lang-switch,.theme-switch {
    height:42px;
    flex-direction:column-reverse;
    gap:2px;
    padding:2px;
    border-radius:5px;
  }
  .lang-option,.theme-option {
    min-width:40px;
    min-height:17px;
    flex:1 1 0;
    padding:2px 6px;
    border-radius:3px;
    font-size:7px;
    line-height:1;
    letter-spacing:.09em;
  }
}

/* Navigation de bureau regroupée à gauche, immédiatement après la marque. */
@media (min-width:1181px) {
  .site-header { grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(22px,2vw,38px); }
  .main-nav,.main-nav.open {
    position:static;
    display:flex;
    width:auto;
    max-height:none;
    align-items:center;
    justify-self:start;
    flex-direction:row;
    gap:clamp(13px,1.25vw,28px);
    overflow:visible;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .main-nav > a { width:auto; padding:34px 0 31px; }
  .main-nav > a::after { bottom:22px; }
  .main-nav,.nav-dropdown-trigger { font-size:10px; }
  .nav-dropdown { width:auto; }
  .nav-dropdown-trigger { width:auto; justify-content:flex-start; padding:34px 0 31px; }
  .nav-dropdown-menu {
    position:absolute;
    top:calc(100% - 14px);
    left:50%;
    display:block;
    min-width:180px;
    margin:0;
    padding:9px;
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:0 20px 60px var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,8px);
  }
  .nav-dropdown.open .nav-dropdown-menu { display:block; opacity:1; visibility:visible; transform:translate(-50%,0); }
  .nav-dropdown-menu a { min-height:42px; padding:12px 14px; border:1px solid transparent; background:transparent; }
  .nav-product-submenu { display:block; }
  .nav-product-submenu a { min-height:36px; margin:3px 0; padding:9px 13px; }
  .menu-button { display:none; }
}

/* =========================================================
   COMMUNAUTE, annuaire d'artistes (community.html)
   Le bandeau de demonstration et le libelle "PROFIL FICTIF"
   reutilisent .reviews-demo-banner / .review-demo-label.
   ========================================================= */

.community-page-main { display: block; }

.community-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 8vw, 128px) clamp(24px, 7vw, 118px) clamp(48px, 5vw, 76px);
  border-bottom: 1px solid var(--border);
}
.community-hero-copy { position: relative; z-index: 1; max-width: 780px; }
.community-hero h1 { margin: 0; font-size: clamp(48px, 7vw, 104px); line-height: 1.02; }
.community-hero-lead {
  max-width: 620px; margin: 26px 0 0;
  color: var(--soft); font-size: clamp(16px, 1.4vw, 21px); line-height: 1.65;
}

.community-directory { padding: clamp(56px, 6vw, 96px) clamp(24px, 7vw, 118px); }

.community-filters {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin: 30px 0 40px;
}
.community-filter {
  padding: 9px 15px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 600; letter-spacing: .11em;
  cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.community-filter:hover { color: var(--text); border-color: var(--orange); }
.community-filter.active { color: #fff; border-color: var(--orange); background: var(--orange); }

/* Bordure portee par chaque carte (et non par la grille) : le nombre de profils
   etant variable, la technique du gap de 1px laisserait des cellules vides
   visibles comme des rectangles gris en theme clair. */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 18px;
}
.artist-card {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background .25s ease, border-color .25s ease;
}
.artist-card:hover { border-color: var(--orange); }
.artist-card:hover { background: var(--surface-2); }
.artist-card[hidden] { display: none; }

.artist-demo-flag { position: absolute; top: 16px; right: 16px; }

.artist-head { display: flex; align-items: center; gap: 14px; padding-right: 86px; }
/* Avatar : photo ou logo si l'artiste en fournit un, sinon repli sur les
   initiales. object-fit: cover recadre proprement en carre quel que soit le
   format de l'image envoyee. */
.artist-avatar {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--orange);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
.artist-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.artist-identity { min-width: 0; }
.artist-identity h3 {
  margin: 0; color: var(--text);
  font-size: 17px; font-weight: 600; letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.artist-styles { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; }
.artist-styles span {
  color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.artist-styles span + span::before { content: "·"; margin-right: 6px; color: var(--border); }

.artist-bio { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.7; }

.artist-plugins { display: flex; flex-direction: column; gap: 10px; }
.artist-plugins small {
  color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .18em;
}
.plugin-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.plugin-chip {
  padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em;
}
.plugin-chip.is-favourite { border-color: var(--orange); color: var(--orange); }
.plugin-chip.is-favourite i { font-style: normal; }

.artist-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .13em;
  transition: color .2s ease;
}
.artist-link:hover { color: var(--orange); }
.artist-link-host { color: var(--muted); font-weight: 600; letter-spacing: .08em; }

.community-empty { margin: 34px 0 0; color: var(--muted); font-size: 14px; }
.community-empty[hidden] { display: none; }

.community-join {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
  padding: clamp(56px, 6vw, 92px) clamp(24px, 7vw, 118px);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.community-join h2 { margin: 0 0 18px; font-size: clamp(26px, 3vw, 42px); }
.community-join p { max-width: 720px; margin: 0; color: var(--soft); font-size: 16px; line-height: 1.75; }

@media (max-width: 860px) {
  .community-join { grid-template-columns: 1fr; }
}

/* ===== PAGE SUPPORT / INSTALLATION ===== */
.support-main { overflow-x:clip; }  /* clip et non hidden : hidden casserait le sommaire sticky */
.support-section, .support-contact { padding:clamp(70px,7vw,120px) clamp(24px,7vw,118px); border-bottom:1px solid var(--border); }

.support-hero { position:relative; padding:clamp(70px,7vw,118px) clamp(24px,7vw,118px) clamp(56px,5vw,84px); border-bottom:1px solid var(--border); }
.support-hero-copy { position:relative; z-index:1; min-width:0; }
.support-hero h1 { margin:28px 0 0; font-size:clamp(46px,6.4vw,104px); line-height:.9; letter-spacing:-.045em; }
.support-hero h1 > span:first-child { color:var(--orange); }
.support-hero-lead { max-width:720px; margin:32px 0 0; color:var(--soft); font-size:clamp(16px,1.35vw,21px); line-height:1.75; }
.support-hero-meta { display:flex; flex-wrap:wrap; margin-top:38px; color:var(--muted); font-size:8px; font-weight:750; letter-spacing:.14em; }
.support-hero-meta span { padding:0 18px; border-right:1px solid var(--border); }
.support-hero-meta span:first-child { padding-left:0; }
.support-hero-meta span:last-child { border-right:0; }

.support-toc { position:sticky; top:102px; z-index:5; display:flex; flex-wrap:wrap; gap:0; padding:0 clamp(24px,7vw,118px); background:var(--header-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.support-toc a { padding:17px 22px 15px; border-bottom:2px solid transparent; color:var(--muted); font-size:9px; font-weight:750; letter-spacing:.15em; text-decoration:none; transition:color .18s, border-color .18s; }
.support-toc a:hover { color:var(--text); border-bottom-color:var(--orange); }
.support-toc a:first-child { padding-left:0; }

.support-section { scroll-margin-top:var(--anchor-offset); background:var(--bg); }
.support-section .about-section-heading { max-width:900px; margin-bottom:clamp(44px,4vw,66px); }
.support-section .about-section-heading h2 { margin:0; font-size:clamp(34px,4.2vw,66px); line-height:.98; }
.support-section .about-section-heading h2 em { color:var(--orange); font-style:normal; }
.support-section .about-section-heading > p:not(.product-kicker) { max-width:720px; margin:24px 0 0; color:var(--soft); font-size:16px; line-height:1.8; }

/* -- etapes numerotees -- */
.support-steps { display:grid; gap:1px; margin:0; padding:0; list-style:none; border:1px solid var(--border); background:var(--border); }
.support-steps > li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,3vw,48px); padding:clamp(28px,3vw,44px); background:var(--surface); }
.support-step-num { color:var(--orange); font-size:clamp(30px,3.4vw,52px); font-weight:750; line-height:1; letter-spacing:-.03em; opacity:.55; }
.support-step-body { min-width:0; }
.support-step-body h3 { margin:0 0 14px; font-size:14px; font-weight:750; letter-spacing:.11em; }
.support-step-body p { max-width:760px; margin:0; color:var(--soft); font-size:15.5px; line-height:1.8; }
.support-step-note { margin-top:16px !important; padding-left:16px; border-left:2px solid var(--blue); color:var(--muted) !important; font-size:14px !important; }

.support-code, .support-path code { display:block; margin-top:16px; padding:13px 16px; overflow-x:auto; border:1px solid var(--border); border-radius:4px; background:var(--surface-2); color:var(--text); font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:13px; white-space:nowrap; }

.support-components { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:22px; }
.support-comp { padding:20px; border:1px solid var(--border); border-radius:5px; background:var(--surface-2); }
.support-comp strong { display:block; margin-bottom:9px; color:var(--orange); font-size:10px; font-weight:750; letter-spacing:.14em; }
.support-comp span { color:var(--muted); font-size:14px; line-height:1.7; }

/* -- encart avertissement Windows -- */
.support-alert-section { background:var(--surface); }
.support-alert { display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,3vw,44px); padding:clamp(30px,3.2vw,50px); border:1px solid var(--border); border-left:3px solid var(--orange); border-radius:6px; background:var(--bg); }
.support-alert-icon svg { width:44px; height:44px; fill:none; stroke:var(--orange); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.support-alert-body { min-width:0; }
.support-alert-body h2 { margin:0 0 22px; font-size:clamp(24px,2.7vw,40px); line-height:1.1; }
.support-alert-body p { max-width:840px; margin:0; color:var(--soft); font-size:15.5px; line-height:1.8; }
.support-alert-steps { margin-top:20px !important; padding:16px 18px; border-radius:5px; background:var(--surface-2); color:var(--text) !important; font-weight:600; }
.support-alert-foot { margin-top:18px !important; color:var(--muted) !important; font-size:14px !important; }

/* -- emplacements -- */
.support-paths { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px; border:1px solid var(--border); background:var(--border); }
.support-path { min-width:0; padding:clamp(24px,2.6vw,34px); background:var(--surface); }
.support-path strong { display:block; margin-bottom:4px; color:var(--orange); font-size:10px; font-weight:750; letter-spacing:.14em; }
.support-path code { margin-bottom:14px; font-size:12px; overflow-x:visible; white-space:normal; overflow-wrap:anywhere; line-height:1.6; }
.support-path span { color:var(--muted); font-size:14px; line-height:1.7; }

/* -- rescan par DAW -- */
/*  Page contact : le titre de section n'y est pas enveloppe dans
    .about-section-heading (contrairement a support.html), il n'a donc
    aucune marge basse et le cadre venait se coller dessous. On rend
    l'espacement de la maison, sans toucher a la taille du titre. */
.support-section > h2 + .support-daws { margin-top:clamp(44px,4vw,66px); }
.support-daws { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; border:1px solid var(--border); background:var(--border); }
.support-daws article { min-width:0; padding:clamp(24px,2.6vw,34px); background:var(--surface); }
.support-daws h3 { margin:0 0 12px; color:var(--text); font-size:11px; font-weight:750; letter-spacing:.15em; }
.support-daws p { margin:0; color:var(--soft); font-size:14.5px; line-height:1.75; }

/* -- accordeons depannage / faq -- */
.support-trouble { display:grid; gap:1px; border:1px solid var(--border); background:var(--border); }
.support-trouble details { background:var(--surface); }
.support-trouble summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px clamp(22px,2.4vw,32px); color:var(--text); font-size:15.5px; font-weight:600; cursor:pointer; list-style:none; transition:color .18s; }
.support-trouble summary::-webkit-details-marker { display:none; }
.support-trouble summary::after { content:"+"; flex:0 0 auto; color:var(--orange); font-size:21px; font-weight:400; line-height:1; transition:transform .22s; }
.support-trouble details[open] summary::after { transform:rotate(45deg); }
.support-trouble summary:hover { color:var(--orange); }
.support-trouble details > p, .support-trouble details > code { max-width:900px; margin:0 clamp(22px,2.4vw,32px) 26px; color:var(--soft); font-size:15px; line-height:1.85; }
.support-trouble details > code { margin-top:16px; }

/* -- contact -- */
.support-contact { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:46px; align-items:end; overflow:hidden; background:var(--bg); }
.support-contact::before { content:""; position:absolute; inset:0; opacity:.24; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:linear-gradient(90deg,transparent,black); mask-image:linear-gradient(90deg,transparent,black); pointer-events:none; }
.support-contact > * { position:relative; z-index:1; }
.support-contact h2 { max-width:900px; margin:18px 0 20px; font-size:clamp(32px,4.2vw,64px); line-height:.98; }
.support-contact p:not(.product-kicker) { max-width:720px; margin:0; color:var(--soft); font-size:16px; line-height:1.75; }
.support-contact .button { min-width:230px; justify-content:space-between; }

@media (max-width:900px) {
  .support-contact { grid-template-columns:1fr; align-items:start; }
  .support-steps > li, .support-alert { grid-template-columns:1fr; gap:18px; }
  .support-toc { top:0; overflow-x:auto; flex-wrap:nowrap; }
  .support-toc a { white-space:nowrap; }
}

/* ============================================================
   SELECTEUR DE LANGUE - menu deroulant 5 langues
   Remplace l'ancien commutateur FR/EN a 2 boutons.
   Les selecteurs [data-lang-switch] ont une specificite superieure
   a .lang-switch : ils neutralisent les regles responsive heritees
   (empilement en colonne) sans avoir a les modifier.
   ============================================================ */

.lang-switch[data-lang-switch] {
  position: relative;
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 999px;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 68px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  font-family: inherit;
  transition: color .18s ease, border-color .18s ease;
}

.lang-toggle:hover,
.lang-switch[data-lang-switch].open .lang-toggle {
  color: var(--orange);
  border-color: rgba(255,107,46,.45);
}

.lang-caret {
  width: 0;
  height: 0;
  margin-left: auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform .18s ease;
}

.lang-switch[data-lang-switch].open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.lang-switch[data-lang-switch].open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* flex et min-height sont remis a plat : les regles responsive de .lang-option
   (heritees du commutateur FR/EN d'origine) imposaient flex:1 1 0 et
   min-height:17px, ce qui ecrasait la boite sous ses propres marges et tassait
   les noms les uns sur les autres. */
.lang-menu .lang-option {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.lang-menu .lang-option:not(.active):hover { background: var(--surface-2); color: var(--text); }

/* La langue selectionnee est signalee par la seule couleur orange : ni fond ni
   cadre. Le fond et l'ombre sont neutralises explicitement car ils sont herites
   de la regle de base .lang-option.active, qu'on ne touche pas : elle habille
   aussi le commutateur de theme DARK/LIGHT, qui garde son cadre. */
.lang-menu .lang-option.active,
.lang-menu .lang-option.active:hover {
  color: var(--orange);
  background: transparent;
  box-shadow: none;
}

@media (max-width: 720px) {
  .lang-toggle { min-width: 54px; padding: 8px 10px; gap: 5px; }
  .lang-menu { min-width: 148px; }
}

/* =====================================================================
   PANIER MASQUE (21/08/2026)
   ---------------------------------------------------------------------
   L'achat se fait en DIRECT chez Lemon Squeezy, un produit a la fois :
   il n'y a plus de panier. Le compteur restait fige a 0 sur toutes les
   pages, il annoncait une fonction inexistante.

   Masque en CSS et non retire du HTML : l'icone est presente dans 11
   pages ET dans le generateur de fiches, et le header d'index la place
   par `grid-column`, la retirer decalerait toute la rangee. Une regle,
   reversible, aucun risque de mise en page.
   ===================================================================== */
.cart-button { display: none !important; }

/* =====================================================================
   PAGE LICENCES (21/08/2026), remplace le faux formulaire de compte.
   Le cadre vient de .account-shell ; ces regles habillent l'INTERIEUR,
   role que tenait .account-form-wrap, parti avec le formulaire.
   ===================================================================== */
.account-panel { padding: clamp(24px, 2.8vw, 40px); display: grid; gap: 14px;
                 justify-items: start; }
.account-panel + .account-panel { border-top: 1px solid var(--border); }
.account-panel h2 { margin: 0; color: var(--text);
                    font-size: clamp(15px, 1.5vw, 19px); font-weight: 500;
                    letter-spacing: .02em; }
.account-panel p { max-width: 62ch; margin: 0; color: var(--muted);
                   font-size: 13px; line-height: 1.75; }
.account-panel .button { margin-top: 6px; }
.account-panel .account-note { color: var(--muted); font-size: 11.5px;
                               opacity: .82; }

/* J'AIME MASQUE (21/08) : il renvoyait vers le compte factice, supprime
   depuis. Sans compte, le bouton menait a la page des licences ; et un
   compteur remis a zero a chaque rechargement ne mesure rien. */
.audio-like-button { display: none !important; }

/* Avertissement MIDI (21/08) : EUCLID et CHORALIS ne sonnent pas d'eux-memes.
   Place SOUS le lecteur, la ou l'acheteur ecoute, pas en bas de page. */
.audio-midi-note { margin: 14px 0 0; padding: 12px 16px;
  border-left: 2px solid var(--orange); background: rgba(232,131,58,.07);
  color: var(--muted); font-size: 12px; line-height: 1.7; }

/* ---- Page CONTACT (24/08) : bloc d'adresse sans formulaire ----
   Le site est statique et sans backend : le contact reste un e-mail, mais on
   corrige les deux defauts du simple lien mailto. (1) L'adresse n'est pas
   ecrite en clair dans le HTML, elle est assemblee au chargement, donc les
   robots a spam ne la trouvent pas. (2) Un bouton COPIER sert le visiteur qui
   passe par un webmail, chez qui un mailto n'ouvre rien du tout. */
.contact-box { margin-top: clamp(22px,2.4vw,30px); padding: clamp(24px,2.6vw,34px);
  border: 1px solid var(--border); background: var(--surface); }
.contact-address { display: block; color: var(--text);
  font-size: clamp(18px,2.2vw,26px); font-weight: 400; letter-spacing: .02em;
  overflow-wrap: anywhere; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(18px,2vw,24px); }
.contact-actions .button { cursor: pointer; }
.contact-note { max-width: 620px; margin: 18px 0 0; color: var(--muted);
  font-size: 12.5px; line-height: 1.75; }

/* ===== Bandeau news (accueil) -- contenu dans news.js, EN ===== */
.news-ticker {
  display: flex; align-items: center;
  height: 44px; overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.news-label {
  position: relative; z-index: 2; flex: none;
  display: inline-flex; align-items: center; gap: 8px; height: 100%;
  padding: 0 16px 0 clamp(20px, 2.4vw, 72px);
  background: var(--surface-2);
  box-shadow: 7px 0 8px -7px var(--surface-2);   /* fondu court, colle au label, n'atteint pas la pastille */
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange);
}
.news-label .news-dot { width: 6px; height: 6px; background: var(--orange); transform: rotate(45deg); }
.news-stage { position: relative; flex: 1; height: 100%; overflow: hidden; }
.news-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 0 clamp(16px, 2.4vw, 40px) 0 clamp(18px, 1.8vw, 26px);   /* gap a gauche : la pastille se pose apres le label, hors du fondu */
  transform: translateX(106%);
  transition: transform 1.35s cubic-bezier(.22, .61, .25, 1);   /* defile depuis la droite, ralentit, s'arrete */
  will-change: transform;
}
.news-slide.is-shown { transform: translateX(0); }
.news-slide.is-leaving { transform: translateX(-110%); transition: transform .85s cubic-bezier(.5, 0, .75, .35); }  /* sort a gauche (duree = LEAVE_MS de news.js) */
.news-text { color: var(--text); font-size: 14px; white-space: nowrap; }
.news-tag {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
}
.news-tag--update, .news-tag--new { background: var(--orange); color: #1a1206; }
.news-tag--soon { color: var(--orange); border: 1px solid var(--orange); }
.news-tag--open { color: var(--muted); border: 1px solid var(--border); }
.news-cta {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: #1a1206; background: var(--orange); border-radius: 5px; padding: 6px 12px;
  white-space: nowrap; transition: filter .15s ease, transform .12s ease;
}
.news-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.news-cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 640px) {
  .news-label { padding-left: 20px; letter-spacing: .14em; }
  .news-slide { gap: 8px; }
  /* mobile : le texte prend la place dispo et s'abrege, le bouton reste visible a droite */
  .news-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .news-cta { padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .news-slide { transition: none; }
}

/* ============================================================================
   Bloc "Updates" (notes de version) des fiches produit -- injecte par updates.js.
   Section native : meme rythme que .system-section, tokens de thème du site.
   Contenu EN ANGLAIS uniquement (pas de data-i18n). C'est la cible de #updates.
   ============================================================================ */
.updates-section {
  padding: clamp(76px, 8vw, 130px) clamp(24px, 7vw, 118px);
  border-top: 1px solid var(--border);
  background: var(--surface);
  scroll-margin-top: 96px; /* le header fixe ne recouvre pas le titre a l'arrivee via #updates */
}
.updates-title {
  margin: 0 0 clamp(30px, 4vw, 50px);
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
}
.updates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 840px;
  border-top: 1px solid var(--border);
}
.up {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 8px 34px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.up-meta { display: flex; flex-direction: column; gap: 5px; }
.up-ver { font-size: 17px; font-weight: 700; letter-spacing: .01em; color: var(--muted); }
.up-ver.hot { color: var(--orange); }
.up-date { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.up-body { color: var(--soft); font-size: 15px; line-height: 1.75; max-width: 64ch; }
.up-body b { color: var(--text); font-weight: 600; }
.up-body a { color: var(--orange); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease; }
.up-body a:hover { border-bottom-color: currentColor; }

/* arrivee via "More info" du bandeau news : petit flash pour situer le visiteur */
@keyframes up-flash {
  0%, 100% { background: transparent; }
  30% { background: rgba(255, 107, 46, .12); }
}
.updates-section.is-flash .up.is-latest { animation: up-flash 1.9s ease 1; }

@media (max-width: 640px) {
  .up { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .up-body a { transition: none; }
  .updates-section.is-flash .up.is-latest { animation: none; }
}