/* ==========================================================================
   Akuvox minisite — stylesheet
   Kleuren, typografie en componenten / couleurs, typographie et composants
   ========================================================================== */

:root {
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #64748b;
  --line: #e2e8f0;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --bg-deep: #0f172a;
  --bg-deep-2: #14203a;
  --accent: #1d5fd8;
  --accent-dark: #17499f;
  --accent-soft: #e8f0fe;
  --teal: #06b6d4;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .07);
  --shadow-lg: 0 20px 48px rgba(15, 23, 42, .16);
  --maxw: 1140px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Donkere modus / mode sombre.
   Twee blokken met dezelfde waarden: het eerste volgt de systeeminstelling, het tweede een
   expliciete keuze van de weergave-omgeving. Houd beide lijsten identiek.
   Deux blocs aux mêmes valeurs : le premier suit le réglage système, le second un choix
   explicite de l'environnement d'affichage. Gardez les deux listes identiques. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ink: #e8edf6;
  --ink-soft: #a9b6cc;
  --ink-faint: #8695ae;
  --line: #26334a;
  --bg: #0c1322;
  --bg-alt: #111b2e;
  --bg-deep: #070d19;
  --bg-deep-2: #101c33;
  --accent: #5b8cf0;
  --accent-dark: #7ba3f5;
  --accent-soft: #17253f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --ink: #e8edf6;
  --ink-soft: #a9b6cc;
  --ink-faint: #8695ae;
  --line: #26334a;
  --bg: #0c1322;
  --bg-alt: #111b2e;
  --bg-deep: #070d19;
  --bg-deep-2: #101c33;
  --accent: #5b8cf0;
  --accent-dark: #7ba3f5;
  --accent-soft: #17253f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
}

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

/* Klassen met een eigen display-waarde mogen [hidden] niet overrulen.
   Les classes ayant leur propre display ne doivent pas neutraliser [hidden]. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3rem); text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); }

img, svg { max-width: 100%; }
.sprite { display: none; }
.icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius-sm); text-decoration: none; transition: top .15s;
}
.skiplink:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.container { width: min(var(--maxw), 100% - 2.5rem); margin-inline: auto; }
.container--narrow { width: min(760px, 100% - 2.5rem); }

.small { font-size: .875rem; color: var(--ink-faint); }

/* --------------------------------------------------------------- Knoppen */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  padding: .8rem 1.35rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn--small { padding: .5rem .95rem; font-size: .9rem; }

.hero .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }

/* -------------------------------------------------------------- Taalmelding */
.langnotice {
  display: flex; align-items: center; gap: .75rem; justify-content: center;
  background: var(--accent-soft); color: var(--ink);
  padding: .6rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--line);
}
.langnotice__close {
  display: inline-flex; background: none; border: 0; cursor: pointer;
  color: inherit; padding: .25rem; border-radius: 50%;
}
.langnotice__close:hover { background: rgba(0, 0, 0, .08); }

/* ------------------------------------------------------------------ Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; flex-wrap: wrap;
}

/* Slogan onder het logo, zodat het menu meer ruimte heeft / slogan sous le logo, pour laisser de la place au menu. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand__logo { display: block; height: 26px; width: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__tagline { font-size: .74rem; color: var(--ink-faint); }

.nav { display: flex; gap: .35rem; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500;
  padding: .45rem .7rem; border-radius: var(--radius-sm);
}
.nav a:hover { color: var(--accent); background: var(--accent-soft); }
.nav a[aria-current="page"] { color: var(--accent); }

.navtoggle {
  display: none; align-items: center; gap: .4rem; font: inherit; font-weight: 600;
  background: none; border: 1.5px solid var(--line); color: var(--ink);
  padding: .45rem .8rem; border-radius: var(--radius-sm); cursor: pointer;
}

.langswitch {
  display: flex; align-items: center; gap: .15rem;
  border: 1.5px solid var(--line); border-radius: 999px; padding: .2rem .5rem .2rem .6rem;
}
.langswitch__icon { color: var(--ink-faint); margin-right: .15rem; }
.langswitch__btn {
  font: inherit; font-size: .85rem; font-weight: 700; letter-spacing: .03em;
  background: none; border: 0; color: var(--ink-faint);
  padding: .3rem .5rem; border-radius: 999px; cursor: pointer;
}
.langswitch__btn abbr { text-decoration: none; }
.langswitch__btn:hover { color: var(--accent); }
.langswitch__btn.is-active { background: var(--accent); color: #fff; }

/* Vijf menu-items plus de taalkiezer passen pas vanaf ±1120px op één regel (Nederlands is het
   langst, schuifbalk inbegrepen).
   Cinq entrées de menu plus le sélecteur de langue ne tiennent sur une ligne qu'à partir de ±1120px
   (le néerlandais est le plus long, barre de défilement comprise). */
@media (max-width: 1140px) {
  .navtoggle { display: inline-flex; }
  .nav {
    display: none; order: 5; width: 100%; flex-direction: column;
    padding-bottom: .75rem; gap: 0;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .65rem .5rem; border-bottom: 1px solid var(--line); border-radius: 0; }
}

/* -------------------------------------------------------------------- Hero */
/* De productfoto (Akuvox-toestellen met iF/reddot-designprijzen) heeft een transparante
   achtergrond, zodat de bestaande blauw/cyaan gradiënt erdoorheen blijft schijnen. Een extra
   donkere sluier van links naar rechts houdt de tekst links leesbaar terwijl de toestellen
   rechts zichtbaar blijven.
   La photo produit (appareils Akuvox avec prix de design iF/reddot) a un fond transparent,
   afin que le dégradé bleu/cyan existant transparaisse. Un voile sombre supplémentaire, de
   gauche à droite, garde le texte lisible à gauche tout en laissant les appareils visibles à
   droite. */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(6, 10, 20, .85) 0%, rgba(6, 10, 20, .55) 38%, rgba(6, 10, 20, .1) 58%, transparent 62%),
    url("../img/hero-awards.png") right center / 42% auto no-repeat,
    radial-gradient(900px 420px at 12% -10%, rgba(29, 95, 216, .55), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(6, 182, 212, .32), transparent 60%),
    linear-gradient(160deg, var(--bg-deep), var(--bg-deep-2));
  color: #fff; padding: clamp(3rem, 6vw, 5.5rem) 0;
}
/* Op smalle schermen staat de tekst in één kolom over de volle breedte; de decoratieve
   productfoto zou dan dwars door de tekst lopen, dus die valt weg en enkel de gradiënt blijft.
   Sur les petits écrans, le texte occupe une seule colonne pleine largeur ; la photo produit
   décorative traverserait alors le texte, elle disparaît donc et seul le dégradé subsiste. */
@media (max-width: 900px) {
  .hero {
    background:
      radial-gradient(900px 420px at 12% -10%, rgba(29, 95, 216, .55), transparent 60%),
      radial-gradient(700px 380px at 90% 0%, rgba(6, 182, 212, .32), transparent 60%),
      linear-gradient(160deg, var(--bg-deep), var(--bg-deep-2));
  }
}
.hero__inner { display: grid; gap: 2.5rem; }
.hero__content { max-width: 42rem; }
.hero h1 { color: #fff; }
.hero__subheading {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); font-weight: 650; color: #8ec6ff;
  margin: .3rem 0 1.3rem;
}
.eyebrow {
  text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; font-weight: 700;
  color: #8ec6ff; margin-bottom: .8rem;
}
.lead { font-size: clamp(1rem, .95rem + .35vw, 1.15rem); color: #c8d6ec; max-width: 40rem; }
.lead + .lead { margin-top: .9rem; }
.lead--strong { font-weight: 700; color: #fff; }
/* Tweede/derde alinea van de aankondiging: iets rustiger dan de eerste.
   Deuxième/troisième paragraphe de l'annonce : un peu plus discret que le premier. */
.lead--sub { font-size: clamp(.95rem, .92rem + .2vw, 1.02rem); color: #a9bcd8; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

.hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem; margin: 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.stat dt { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.stat dd { margin: .2rem 0 0; font-size: .9rem; color: #a9bcd8; }

/* ---------------------------------------------------------------- Secties */
.section { padding: clamp(3rem, 5vw, 4.75rem) 0; }
.section--alt { background: var(--bg-alt); }
.section--contact {
  background: linear-gradient(180deg, var(--bg), var(--bg-alt));
  border-top: 1px solid var(--line);
}
.section__head { max-width: 46rem; margin-bottom: 2rem; }
.section__head p { color: var(--ink-soft); margin: 0; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  padding: .22rem .6rem; border-radius: 999px; margin-bottom: .7rem;
}

/* ---------------------------------------------------------------- Formulier */
.form { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.form__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .88rem; font-weight: 650; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .97rem; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .8rem;
  width: 100%;
}
.field textarea { resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #dc2626; }
.field__error { margin: 0; font-size: .82rem; color: #dc2626; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.form__note { margin: 0; font-size: .82rem; color: var(--ink-faint); flex: 1 1 240px; }
.form__success {
  margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-dark); font-size: .92rem;
}
.form__failure {
  margin: 1rem 0 0; padding: .8rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid #dc2626; color: #dc2626; font-size: .92rem;
}
.form__head { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.form__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.form__intro { margin: 0; color: var(--ink-soft); }
.form__processing { margin-top: .9rem; }
.form__processing > * { display: block; }
.form__group { border: 0; margin: 0 0 .75rem; padding: 0; min-width: 0; }
.form__group legend { font-weight: 700; font-size: 1rem; margin-bottom: .75rem; padding: 0; }
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; }
.field--check input { width: auto; margin: .2rem 0 0; flex: none; accent-color: var(--accent); }
.field--check label { font-weight: 500; color: var(--ink); }
.field select[aria-invalid="true"], .field--check input[aria-invalid="true"] { outline: 2px solid #dc2626; }
/* Honeypot: buiten beeld, niet display:none, zodat bots het veld nog invullen. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ Footer */
.site-footer { background: var(--bg-deep); color: #c3d0e4; padding: 3rem 0 1.5rem; }
.site-footer__inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.site-footer p { font-size: .92rem; color: #98a9c4; }
.footer__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: .8rem; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list a { color: #c3d0e4; text-decoration: none; font-size: .92rem; display: inline-block; padding: .18rem 0; }
.footer__list a:hover { color: #fff; text-decoration: underline; }
.site-footer__bar {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .12);
}
.site-footer__bar p { margin: 0; }
.backtotop { display: inline-flex; align-items: center; gap: .4rem; color: #c3d0e4; text-decoration: none; font-size: .9rem; }
.backtotop:hover { color: #fff; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.checklist li { display: flex; gap: .6rem; font-size: .95rem; }
.checklist .icon { color: var(--accent); margin-top: .25em; }
.specs { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.specrow { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; }
.specrow + .specrow { border-top: 1px solid var(--line); }
.specrow dt { padding: .6rem .9rem; background: var(--bg-alt); font-size: .88rem; color: var(--ink-faint); font-weight: 600; }
.specrow dd { padding: .6rem .9rem; margin: 0; font-size: .92rem; }
.usecase { background: var(--bg-alt); border-radius: var(--radius-sm); padding: 1rem 1.1rem; }
.usecase p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
@media print {
  .site-header, .langnotice, .hero__actions, .backtotop { display: none !important; }
  body { font-size: 12pt; }
  .feature { break-inside: avoid; box-shadow: none; }
}

/* ------------------------------------------------------- Productblokken */
.features { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.feature {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feature:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.feature__media {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 190px; padding: 1rem; overflow: hidden;
  background: linear-gradient(140deg, var(--accent-soft), color-mix(in srgb, var(--teal) 14%, transparent));
  border-bottom: 1px solid var(--line);
}
/* Flex geeft een vaste hoogte om tegen te schalen; in een grid met auto-rijen valt max-height: 100%
   terug op de beeldverhouding en loopt een grote foto uit het kader.
   Le flex fournit une hauteur définie ; dans une grille à lignes auto, max-height: 100% retombe sur
   le rapport d'image et une grande photo déborde du cadre. */
.feature__photo { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Het pictogram staat achter de foto en komt tevoorschijn wanneer die ontbreekt. */
.feature__photo + .feature__icon { display: none; }
.feature__icon {
  width: 58px; height: 58px; fill: none; stroke: var(--accent);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.feature__badge {
  position: absolute; top: .7rem; right: .7rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-deep); color: #fff; padding: .28rem .6rem; border-radius: 999px;
}
.feature__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.2rem; flex: 1; }
.feature__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.feature__tagline { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.feature__more {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--accent); font-weight: 650; font-size: .92rem; margin-top: .4rem;
}
.feature:hover .feature__more .icon { transform: translateX(3px); }
.feature__more .icon { transition: transform .18s; }

/* --------------------------------------------------------- Productpagina */
.producthero {
  background:
    radial-gradient(800px 380px at 10% -20%, rgba(29, 95, 216, .5), transparent 60%),
    linear-gradient(160deg, var(--bg-deep), var(--bg-deep-2));
  color: #fff; padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.producthero__inner {
  display: grid; gap: 2rem; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.producthero__text { max-width: 34rem; }
.producthero h1, .producthero h2 { color: #fff; margin: .5rem 0 .4rem; }
.producthero .lead { margin-bottom: 1.5rem; }
.producthero .tag { background: rgba(255, 255, 255, .14); color: #cfe0ff; }
.producthero__media {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; overflow: hidden; height: clamp(230px, 28vw, 340px);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
}
.producthero__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.producthero__media img + .producthero__icon { display: none; }
.producthero__icon {
  width: 84px; height: 84px; fill: none; stroke: #8ec6ff;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.backlink {
  /* Op een eigen regel, zodat het label niet tegen de badge botst.
     Sur sa propre ligne, afin que le libellé n'entre pas en collision avec le badge. */
  display: flex; width: fit-content; align-items: center; gap: .4rem;
  margin-bottom: 1.1rem;
  color: #a9bcd8; text-decoration: none; font-size: .9rem; font-weight: 600;
}
.backlink:hover { color: #fff; }

.productbody {
  display: grid; gap: 2.5rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.productbody h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin-bottom: .8rem;
}
.productbody .usecase { margin-top: 2rem; }

.notfound { padding: 4rem 0; text-align: center; }

/* ------------------------------------------------------------- Videopagina
   Losstaande pagina voor een QR-code: één video, direct afspelend, met een
   weg terug naar de volledige productfiche.
   Page autonome pour un QR code : une seule vidéo, lecture directe, avec un
   chemin de retour vers la fiche produit complète. */
.videopage { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.videopage__eyebrow {
  text-transform: uppercase; letter-spacing: .13em; font-size: .78rem; font-weight: 700;
  color: var(--accent); margin-bottom: .5rem;
}
.videopage h1 { margin-bottom: 1.25rem; }
.videopage__player {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  background: #000;
}
/* Nooit groter dan het scherm, in geen enkele richting: breedte en hoogte krijgen
   allebei enkel een maximum (nooit een vaste waarde), zodat de browser de
   beeldverhouding van de video zelf bewaart — of die nu liggend of staand is,
   en of het toestel een telefoon, tablet of computer is.
   Jamais plus grande que l'écran, dans aucune direction : largeur et hauteur ne
   reçoivent chacune qu'un maximum (jamais une valeur fixe), afin que le navigateur
   conserve lui-même le rapport d'aspect de la vidéo — qu'elle soit à l'italienne ou
   à la française, et que l'appareil soit un téléphone, une tablette ou un ordinateur. */
.videopage__player video {
  display: block; width: auto; height: auto;
  max-width: 100%;
  max-height: 75vh;
  max-height: 75dvh; /* dynamische viewporthoogte: houdt rekening met de adresbalk op mobiel / hauteur de fenêtre dynamique : tient compte de la barre d'adresse sur mobile */
}
.videopage__back {
  display: flex; width: fit-content; align-items: center; gap: .4rem;
  margin-top: 1.5rem;
  color: var(--ink-soft); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.videopage__back:hover { color: var(--accent); }


/* ---------------------------------------------------- Downloads & media */
.resources { background: var(--bg-alt); border-top: 1px solid var(--line); }

.resources__grid {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 1.75rem;
}
.resource-card {
  display: flex; align-items: center; gap: .9rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; text-decoration: none; color: inherit;
  transition: border-color .18s, transform .12s, box-shadow .18s;
}
.resource-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); transform: translateY(-2px); }
.resource-card__icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent); flex: none;
}
.resource-card__icon .icon { width: 20px; height: 20px; }
.resource-card__body { display: flex; flex-direction: column; gap: .1rem; }
.resource-card__title { font-weight: 700; font-size: .96rem; }
.resource-card__meta { font-size: .8rem; color: var(--ink-faint); }

.gallery { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.gallery__item {
  position: relative; aspect-ratio: 1; padding: 0; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg);
}
.gallery__item img, .gallery__item video {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s;
}
.gallery__item:hover img, .gallery__item:hover video { transform: scale(1.06); }
/* Een levend lusje in de tegel zelf toont meteen dat het geen stilstaand beeld is;
   het badge-icoontje blijft als klik-aanwijzing. */
/* Une boucle vivante dans la vignette montre d'emblée qu'il ne s'agit pas d'une image
   figée ; le badge reste comme indice de clic. */
.gallery__badge {
  position: absolute; right: .4rem; bottom: .4rem; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); color: #fff;
}
.gallery__badge .icon { width: 14px; height: 14px; }

/* De lightbox is een lichtjes vervaagde ruit boven de pagina, geen ondoorzichtig scherm:
   de onderliggende pagina blijft zichtbaar rondom de kaart. */
/* La lightbox est une vitre légèrement voilée au-dessus de la page, pas un écran opaque :
   la page sous-jacente reste visible autour de la carte. */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  gap: 1rem; background: rgba(15, 23, 42, .45); backdrop-filter: blur(10px); padding: 2rem 1rem;
}
.lightbox__card {
  position: relative; background: var(--bg); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .75rem; max-width: min(92vw, 920px); max-height: 88vh;
  display: flex; flex-direction: column; gap: .5rem;
}
.lightbox__close {
  position: absolute; top: -14px; right: -14px; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer;
  transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.lightbox__close:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.08); }
.lightbox__close .icon { width: 18px; height: 18px; }
.lightbox__media { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.lightbox__media img, .lightbox__media video {
  max-width: min(88vw, 880px); max-height: 76vh; border-radius: calc(var(--radius) - 6px); display: block;
}
.lightbox__pdf {
  width: min(88vw, 880px); height: 76vh; border: 0; border-radius: calc(var(--radius) - 6px); display: block;
  background: #fff;
}
.lightbox__foot { display: flex; justify-content: flex-end; }
.lightbox__download {
  display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .85rem; font-weight: 600;
  background: none; border: 0; color: var(--ink-soft); cursor: pointer; padding: .3rem .2rem;
}
.lightbox__download:hover { color: var(--accent); }
.lightbox__download .icon { width: 16px; height: 16px; }
.lightbox__nav {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .28); color: #fff; cursor: pointer;
}
.lightbox__nav:hover { border-color: #fff; }
.lightbox__nav[hidden] { display: none; }
@media (max-width: 640px) {
  .lightbox { gap: .4rem; padding: 1rem .5rem; }
  .lightbox__nav { width: 38px; height: 38px; }
}

/* --------------------------------------------------- Vergelijkings- & accessoiretabellen
   Gebruikt op de X915S-pagina (binnenposten vergelijken) en de toebehorenpagina (accessoires
   per systeem). Een omringende wrapper met overflow-x zorgt dat brede tabellen op smalle
   schermen scrollen in plaats van de pagina te verbreden.
   Utilisés sur la page X915S (comparaison des moniteurs) et la page des accessoires
   (accessoires par système). Un conteneur avec overflow-x permet aux tableaux larges de
   défiler sur petit écran plutôt que d'élargir la page. */
.comparetable-wrap, .accessorytable-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
}
.comparetable, .accessorytable { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .92rem; }
.comparetable th, .comparetable td, .accessorytable th, .accessorytable td {
  padding: .65rem .9rem; text-align: left; border-bottom: 1px solid var(--line);
}
.comparetable thead th, .accessorytable thead th {
  background: var(--bg-alt); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; white-space: nowrap;
}
.comparetable tbody th {
  background: var(--bg-alt); font-weight: 650; white-space: nowrap; text-align: left;
}
.comparetable tbody tr:last-child td, .comparetable tbody tr:last-child th,
.accessorytable tbody tr:last-child td { border-bottom: 0; }

.accessorygroup + .accessorygroup { margin-top: 2.25rem; }
.accessorygroup h3 { margin-bottom: .8rem; }
.accessorytable__model { font-weight: 700; white-space: nowrap; }