/* Gabarit one-page VDC Labs — partagé par tous les sites.
   Les couleurs viennent de la config de chaque site (variables dans <head>).
   Aucune police ni ressource externe : pas de requête vers un tiers. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
/* Colonne de lecture étroite, alignée à gauche comme le reste du site */
.narrow > * { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 40em; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }

/* En-tête */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
.brand-logo svg { display: block; height: 34px; width: auto; }
.brand-name { font-weight: 800; font-size: 1.25rem; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }
.nav a, .back { color: var(--text); text-decoration: none; font-weight: 500; padding: 10px 0; display: inline-block; }
.header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.langs { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; text-transform: uppercase; font-size: 0.85rem; font-weight: 700; }
.langs a, .langs span { display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; text-align: center; border-radius: 8px; }
.langs a { color: var(--muted); text-decoration: none; }
.langs a:hover { color: var(--accent); }
.langs span { color: var(--text); background: var(--surface); }
.nav a:hover, .back:hover { color: var(--accent); }

/* Héros */
.hero { padding: clamp(56px, 10vw, 112px) 0 clamp(48px, 8vw, 88px); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.button {
  display: inline-block; min-height: 48px; padding: 12px 22px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none;
  border: 2px solid var(--accent);
}
.button:hover { filter: brightness(1.08); }
.button-secondary { background: transparent; color: var(--text); border-color: var(--line); }
.button-disabled { background: transparent; color: var(--muted); border: 2px dashed var(--line); cursor: default; }

/* Sections */
.section { padding: clamp(48px, 8vw, 88px) 0; border-top: 1px solid var(--line); }
.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.card-plain { background: transparent; border: 0; padding: 0; }
.price { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.3em; }

/* Familles de produits (formes Modulaire) */
.family-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.family-head h3 { margin: 0; }
.shape { width: 28px; height: 28px; flex: none; display: inline-block; }
.shape-triangle { background: #2850C8; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.shape-demi-disque { background: #F2B705; width: 14px; border-radius: 0 14px 14px 0; }
.shape-anneau { border: 7px solid #E0452B; border-radius: 50%; border-right-color: transparent; transform: rotate(45deg); }
.product-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.product-list li { border-top: 1px solid var(--line); padding-top: 12px; }
.status { display: block; font-size: 0.9rem; color: var(--muted); }

/* FAQ */
.faq { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 12px 0; min-height: 44px; }
.faq p { color: var(--muted); }

.section-contact { text-align: left; }

/* Pages légales */
.legal { padding: 48px 0 72px; }
.legal h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.legal h2 { font-size: 1.3rem; margin-top: 2em; }
.legal .updated { color: var(--muted); font-size: 0.9rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0 0 1em; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal th { background: var(--surface); }
mark.todo { background: #FFE58A; color: #151515; padding: 0 3px; border-radius: 3px; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 24px; background: var(--surface); }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.footer-name { font-weight: 800; margin-bottom: 0.3em; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-links a { color: var(--text); }
.publisher { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== Accueil compact : tout tient sur un écran (ordinateur et téléphone) =====
   Les tailles suivent à la fois la largeur et la hauteur de l'écran (min(vw, vh)),
   pour rester lisibles sur grand écran sans déborder sur un petit. */
body.home-compact { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
/* padding-inline seulement : ne pas écraser les marges verticales de .compact */
body.home-compact .wrap { max-width: 92vw; padding-inline: clamp(16px, 2vw, 48px); }
body.home-compact .header-row { min-height: clamp(52px, 7vh, 120px); flex-wrap: nowrap; }
body.home-compact .brand { min-width: 0; }
body.home-compact .brand-logo svg { height: clamp(26px, 4.2vh, 64px); }
body.home-compact .langs { font-size: clamp(0.85rem, min(0.8vw, 1.4vh), 1.4rem); }
/* min-height: auto : si le contenu est plus haut que l'écran, la page s'allonge (léger défilement)
   au lieu de passer sous le pied de page */
body.home-compact main { flex: 1 0 auto; display: flex; }

.compact {
  flex: 1; display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  /* 1fr = jamais plus petit que le contenu : si l'écran est trop bas, la page s'allonge
     (défilement) au lieu que le texte passe sous le pied de page */
  grid-template-rows: 1fr;
  grid-template-areas: "left play";
  gap: clamp(12px, 2.4vh, 32px) clamp(24px, 5vw, 128px);
  padding-block: clamp(12px, 3vh, 48px);
}
/* Colonne gauche : accroche + familles, groupées et centrées verticalement */
.compact .left { grid-area: left; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 6vh, 112px); }
.compact .eyebrow { margin-bottom: clamp(6px, 1.4vh, 28px); font-size: clamp(0.72rem, min(0.9vw, 1.6vh), 1.6rem); }
.compact h1 { font-size: clamp(1.7rem, min(4.4vw, 7.2vh), 9rem); margin-bottom: clamp(8px, 1.8vh, 40px); }
.compact .lead { font-size: clamp(0.98rem, min(1.35vw, 2.4vh), 2.4rem); margin-bottom: 0; }
.compact .cta-row { margin-top: clamp(14px, 3vh, 64px); }
.compact .button { font-size: clamp(0.95rem, min(1.1vw, 2vh), 2rem); padding: clamp(10px, 1.6vh, 28px) clamp(18px, 1.8vw, 48px); border-radius: clamp(10px, 1.2vh, 18px); }

.playground {
  grid-area: play; position: relative; min-height: 0; overflow: hidden;
  /* Planche centrée, avec de l'air au-dessus et en dessous (ne touche ni le menu ni le pied de page) */
  align-self: center; height: 84%; max-height: 46vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: clamp(14px, 2vh, 24px);
  cursor: pointer; touch-action: manipulation;
}
.playground canvas { position: absolute; inset: 0; display: block; }

.families-row ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 24px); }
.families-row li { display: flex; align-items: flex-start; gap: 10px; font-size: clamp(0.85rem, min(1vw, 1.8vh), 1.8rem); line-height: 1.35; }
.families-row strong { display: block; }
.families-row .fam-text { color: var(--muted); }
.families-row .shape { width: clamp(18px, 2.4vh, 44px); height: clamp(18px, 2.4vh, 44px); margin-top: 2px; }
/* Demi-disque dessiné dans une case de même largeur que les autres formes : textes alignés */
.families-row .shape-demi-disque { border-radius: 0; clip-path: circle(50% at 0 50%); }
.families-row .shape-anneau { border-width: clamp(5px, 0.6vh, 11px); }

body.home-compact .site-footer { padding: clamp(8px, 1.4vh, 24px) 0; }
body.home-compact .footer-grid { align-items: center; gap: 6px 24px; }
body.home-compact .footer-grid > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
body.home-compact .footer-name, body.home-compact .footer-grid p,
body.home-compact .footer-links { margin: 0; font-size: clamp(0.8rem, min(0.75vw, 1.3vh), 1.4rem); }
body.home-compact .footer-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
body.home-compact .site-footer .wrap + .wrap p { margin: 4px 0 0; font-size: clamp(0.72rem, min(0.65vw, 1.1vh), 1.2rem); }

/* Téléphone / écran étroit : la page s'écoule normalement et défile librement
   (aucune contrainte « un seul écran » : rien ne peut se chevaucher) */
@media (max-width: 760px), (orientation: portrait) and (max-width: 900px) {
  body.home-compact main { display: block; flex: 1 0 auto; }
  .compact { display: flex; flex-direction: column; gap: 22px; padding-block: 18px 32px; }
  .compact .left { display: contents; }
  .compact .intro { order: 1; }
  /* La planche en bois vient après les trois familles (Jeux, Apps, Logiciels) */
  .compact .families-row { order: 2; }
  .playground { order: 3; flex: none; height: clamp(180px, 38vh, 360px); max-height: none; align-self: stretch; }
  body.home-compact .brand-logo svg { height: clamp(22px, 3.4vh, 30px); }
  body.home-compact .langs a, body.home-compact .langs span { min-width: 40px; }
  .compact h1 { font-size: clamp(1.5rem, 7.4vw, 2.4rem); line-height: 1.12; }
  .compact .lead { font-size: clamp(0.95rem, 4.2vw, 1.1rem); line-height: 1.5; }
  .compact .cta-row { margin-top: 16px; }
  .compact .button { min-height: 44px; padding: 10px 18px; }
  /* Une famille par ligne, avec son texte (la page défile, on a la place) */
  .families-row ul { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .families-row li { font-size: 0.98rem; align-items: flex-start; gap: 12px; line-height: 1.4; }
  .families-row .shape { width: 22px; height: 22px; margin-top: 2px; }
  .families-row .shape-anneau { border-width: 6px; }
  body.home-compact .site-footer { padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  body.home-compact .footer-links { gap: 4px 14px; }
}

/* Écran bas (téléphone à l'horizontale) : deux colonnes, l'essentiel seulement */
@media (max-height: 520px) and (orientation: landscape) {
  body.home-compact .header-row { min-height: 44px; }
  body.home-compact main { display: flex; }
  .compact {
    display: grid;
    padding-block: 12px 24px; gap: 8px 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "left play";
  }
  .compact .left { display: flex; gap: 10px; }
  .compact .intro, .compact .families-row { grid-area: auto; }
  .playground { height: 90%; align-self: center; }
  .compact .eyebrow, .families-row .fam-text { display: none; }
  .compact h1 { font-size: clamp(1.2rem, min(3.4vw, 8vh), 2rem); margin-bottom: 6px; }
  .compact .lead { font-size: clamp(0.8rem, min(1.8vw, 4vh), 1rem); line-height: 1.4; }
  .compact .cta-row { margin-top: 10px; }
  .compact .button { min-height: 40px; padding: 8px 16px; }
  .families-row li { align-items: center; font-size: 0.85rem; }
  body.home-compact .site-footer { padding: 6px 0; }
  body.home-compact .site-footer .wrap + .wrap { display: none; }
}

/* ===== Lien « Devenir testeur » dans l'en-tête (toutes les pages) ===== */
.header-cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px;
  border: 2px solid var(--accent); border-radius: 999px; color: var(--accent);
  font-weight: 700; text-decoration: none; white-space: nowrap; font-size: 0.95rem;
}
.header-cta:hover, .header-cta[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.header-cta .short { display: none; }
body.home-compact .header-cta { font-size: clamp(0.85rem, min(0.85vw, 1.5vh), 1.4rem); padding: clamp(4px, 0.6vh, 10px) clamp(12px, 1.1vw, 22px); min-height: 0; }
@media (max-width: 440px) {
  .header-cta .long { display: none; }
  .header-cta .short { display: inline; }
  .header-cta, body.home-compact .header-cta { padding: 4px 10px; min-height: 34px; font-size: 0.85rem; }
  .header-tools { gap: 4px 10px; }
}

/* ===== Page « Devenir testeur » ===== */
.testers {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "intro intro" "games games" "how rewards";
  gap: clamp(36px, 6vw, 80px) clamp(24px, 5vw, 72px);
  padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px);
}
.t-intro { grid-area: intro; max-width: 760px; }
.t-intro .cta-row { margin: 24px 0 12px; }
.t-games { grid-area: games; }
.t-how { grid-area: how; }
.t-rewards { grid-area: rewards; }


/* Encadrés des jeux : chacun dans sa propre charte */
.games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.game { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(21, 21, 21, 0.14); }
.game-media { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.game-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.game-body { flex: 1; display: flex; flex-direction: column; padding: clamp(20px, 2.6vw, 32px); }
.game-name { margin: 0 0 8px; font-size: 1.8rem; }
.game-name img { display: block; height: clamp(34px, 4vw, 46px); width: auto; }
.game-tagline { font-weight: 800; font-size: 1.12rem; margin-bottom: 0.6em; }
.game-text { opacity: 0.92; }
.game-facts { list-style: none; padding: 0; margin: 4px 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.game-facts li { font-size: 0.84rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 1px solid currentColor; opacity: 0.85; }
.game-actions { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

.game-packzoo .game-media { background: radial-gradient(circle at 50% 42%, #145c3a 0%, #062a1a 72%); }
.game-packzoo .game-media img { object-fit: contain; width: 74%; height: 86%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35)); }
.game-packzoo .game-body { background: #062a1a; color: #f8f0dc; }
.game-packzoo .game-tagline { color: #f5b82e; }
.game-packzoo .game-play { background: #f5b82e; border-color: #f5b82e; color: #062a1a; }
.game-packzoo .game-test { color: #f8f0dc; border-color: rgba(248, 240, 220, 0.5); }
.game-packzoo :focus-visible { outline-color: #f5b82e; }

.game-lastvector .game-media { background: #05060d; }
.game-lastvector .game-body { background: #05060d; color: #e6f1ff; border-top: 1px solid rgba(54, 224, 255, 0.25); }
.game-lastvector .game-name { letter-spacing: 0.16em; font-weight: 800; color: #7ff3ff; text-shadow: 0 0 14px rgba(54, 224, 255, 0.65); }
.game-lastvector .game-tagline { color: #ff5ad8; }
.game-lastvector .game-play { background: #36e0ff; border-color: #36e0ff; color: #05060d; }
.game-lastvector .game-test { color: #e6f1ff; border-color: rgba(230, 241, 255, 0.45); }
.game-lastvector :focus-visible { outline-color: #36e0ff; }

.steps { counter-reset: etape; list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.steps li { counter-increment: etape; position: relative; padding-left: 54px; min-height: 38px; }
.steps li::before {
  content: counter(etape); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 800; display: grid; place-items: center;
}
.steps strong { display: block; }
.rewards { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.rewards li { display: flex; gap: 14px; align-items: flex-start; }
.rewards .shape { width: 22px; height: 22px; margin-top: 3px; }
.rewards .shape-demi-disque { border-radius: 0; clip-path: circle(50% at 0 50%); }
.rewards .shape-anneau { border-width: 6px; }

@media (max-width: 860px) {
  .testers { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "games" "how" "rewards"; }
  .games { grid-template-columns: minmax(0, 1fr); }
}
/* LAST VECTOR : le nom figure déjà, en grand, dans son visuel : titre gardé pour les lecteurs d'écran seulement */
.game-lastvector .game-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* Téléphone : logo, « Testeur » et langues tiennent sur une seule ligne */
@media (max-width: 440px) {
  .header-row, body.home-compact .header-row { flex-wrap: nowrap; gap: 8px; }
  .header-tools { flex-wrap: nowrap; gap: 6px; }
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand-logo svg, body.home-compact .brand-logo svg { height: 24px; max-width: 100%; }
  .langs a, .langs span, body.home-compact .langs a, body.home-compact .langs span { min-width: 34px; }
}

/* ===== Lien « Qui sommes-nous » (en-tête) et liens de pages (pied de page) ===== */
.header-link { color: var(--text); text-decoration: none; font-weight: 600; padding: 8px 0; white-space: nowrap; }
.header-link:hover, .header-link[aria-current="page"] { color: var(--accent); }
.header-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
body.home-compact .header-link { font-size: clamp(0.85rem, min(0.85vw, 1.5vh), 1.4rem); }
.footer-pages { margin: 0.3em 0 0; }
.footer-pages a { color: var(--text); }
body.home-compact .footer-pages { margin: 0; font-size: clamp(0.8rem, min(0.75vw, 1.3vh), 1.4rem); }
/* Téléphone : le lien reste dans le pied de page, l'en-tête garde « Testeur » et les langues */
@media (max-width: 600px) { .header-link { display: none; } }

/* ===== Page « Qui sommes-nous » ===== */
.about { padding-block: clamp(32px, 6vw, 72px) clamp(48px, 8vw, 96px); display: grid; gap: clamp(40px, 6vw, 80px); }
.a-intro { max-width: 820px; }
.a-facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.a-facts li {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 2.4vw, 28px);
}
.a-facts .shape { grid-row: 1 / span 2; width: 34px; height: 34px; }
.a-facts .shape-demi-disque { border-radius: 0; clip-path: circle(50% at 0 50%); }
.a-facts .shape-anneau { border-width: 9px; }
.a-facts strong { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -0.02em; }
.a-facts li > span:last-child { color: var(--muted); line-height: 1.35; }
.a-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.a-cards .card { border-radius: 18px; }
.a-cards .card p { color: var(--muted); margin: 0; }
.a-cards .shape-demi-disque { border-radius: 0; width: 28px; clip-path: circle(50% at 0 50%); }
.a-values dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(24px, 4vw, 56px); }
.a-values dl > div { border-top: 3px solid var(--accent); padding-top: 14px; }
.a-values dl > div:nth-child(2) { border-top-color: #F2B705; }
.a-values dl > div:nth-child(3) { border-top-color: #E0452B; }
.a-values dl > div:nth-child(4) { border-top-color: var(--text); }
.a-values dt { font-weight: 800; font-size: 1.1rem; margin-bottom: 4px; }
.a-values dd { margin: 0; color: var(--muted); }
.a-cta { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 48px); }
.a-cta .lead { margin-bottom: 0; }
@media (max-width: 860px) {
  .a-facts ul, .a-cards, .a-values dl { grid-template-columns: minmax(0, 1fr); }
}