/*
    MT Sound Quest — feuille de style du site de presentation.

    Un seul fichier pour les deux pages (accueil + confidentialite). Aucune
    dependance : les seules ressources externes sont les polices Google, et
    la page reste lisible sans elles grace aux piles de repli.
 */

/* ------------------------------------------------------------------ jetons */

:root {
  --paper: #f6f5fb;
  --paper-2: #ffffff;
  --ink: #16172e;
  --ink-soft: #565a7a;
  --ink-faint: #8a8ea8;
  --line: #e3e2ef;

  --brand: #5b63d3;
  --brand-deep: #3f47b0;
  --warm: #d9803a;
  --cool: #3f8fbd;

  --night: #14152b;
  --night-2: #1d1f3d;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(20, 21, 43, .06), 0 4px 14px rgba(20, 21, 43, .05);
  --shadow-md: 0 10px 30px rgba(20, 21, 43, .10), 0 2px 8px rgba(20, 21, 43, .06);
  --shadow-phone: 0 30px 60px rgba(20, 21, 43, .28), 0 6px 16px rgba(20, 21, 43, .18);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1120px;
}

/* ------------------------------------------------------------------ base */

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

html { scroll-behavior: smooth; }

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

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

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--warm); }

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.1; font-weight: 400; }
/* evite la derniere ligne a un seul mot dans les titres */
h1, h2 { text-wrap: balance; }

/*
    JAPONAIS ET CHINOIS : DES TITRES PLUS PETITS, ET DES COUPURES PROPRES.

    Une ecriture CJK n'a pas d'espaces : le navigateur coupe donc n'importe ou,
    et un titre au corps latin finit sur un caractere orphelin. Un corps plus
    petit (ces ecritures restent lisibles bien plus bas que l'alphabet latin)
    et line-break: strict, qui interdit de commencer une ligne par un signe de
    ponctuation, suffisent a rendre la coupure naturelle.
 */
html[data-lang="ja"] h1, html[data-lang="zh"] h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.36;
}
html[data-lang="ja"] h2, html[data-lang="zh"] h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.38;
}
html[data-lang="ja"] :is(h1, h2, h3, p, li, summary, figcaption),
html[data-lang="zh"] :is(h1, h2, h3, p, li, summary, figcaption) {
  line-break: strict;
}
h1 { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4.5rem); letter-spacing: -.01em; }
h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-family: var(--body); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink-soft); max-width: 58ch; }
.small { font-size: .92rem; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

/*
    Le basculement de langue : francais et anglais sont ecrits dans la page,
    les six autres langues REMPLACENT le texte des balises anglaises (voir
    site.js). Toute langue autre que le francais montre donc le cote "en".
 */
html[data-lang="fr"] [lang="en"] { display: none; }
html:not([data-lang="fr"]) [lang="fr"] { display: none; }

/* ------------------------------------------------------------------ entete */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand img { width: 34px; height: auto; }
.brand span { font-size: 1.02rem; }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }

.lang-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23565a7a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font: 600 .85rem/1 var(--body); color: var(--ink);
  padding: 9px 30px 9px 14px; cursor: pointer;
}
.lang-select:focus { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------------------ boutons */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 999px;
  font-weight: 700; font-size: .98rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-deep); color: #fff; }
.btn-ghost { background: var(--paper-2); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-light:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-sm { padding: 9px 15px; font-size: .88rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------------------------ portee */

/*
    LE MOTIF DE LA MARQUE : DE VRAIES PORTEES.

    Cinq lignes serrees, puis un intervalle vide, puis cinq autres -- pas un
    papier reglé. C'est cet ecart entre les groupes qui fait lire "musique"
    plutot que "cahier", donc le degrade n'est pas repetitif : il decrit une
    portee entiere, et c'est la TUILE (background-size) qui se repete.
 */
.staff {
  position: absolute; inset: 0; pointer-events: none;
  --staff-line: color-mix(in oklab, var(--ink) 14%, transparent);
  background-image: linear-gradient(to bottom,
    var(--staff-line) 0 1px, transparent 1px 22px,
    var(--staff-line) 22px 23px, transparent 23px 44px,
    var(--staff-line) 44px 45px, transparent 45px 66px,
    var(--staff-line) 66px 67px, transparent 67px 88px,
    var(--staff-line) 88px 89px, transparent 89px 240px);
  background-size: 100% 240px;
  background-position: 0 60px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 64%, transparent);
  opacity: .8;
}

/* ------------------------------------------------------------------ heros */

.hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 88px); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { margin-bottom: .28em; }
.hero .lede { margin-bottom: 26px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-deep); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.hero-note { color: var(--ink-faint); font-size: .88rem; margin-top: 16px; }

/* ------------------------------------------------------------------ telephone */

/*
    LE TELEPHONE.

    height: auto est OBLIGATOIRE sur l'image : sans lui, l'attribut height de
    la balise fige la hauteur pendant que la largeur se compresse dans la
    colonne, et la capture s'etire en spaghetti. Le front et le menton du
    cadre sont plus hauts que les cotes : c'est ce qui redonne au bloc la
    silhouette d'un telephone, la capture etant plus trapue qu'un vrai ecran.
 */
.phone {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  background: linear-gradient(160deg, #2b2f45, #14172a 62%, #23263c);
  border-radius: 30px; padding: 26px 10px 22px;
  box-shadow: var(--shadow-phone);
}
.phone::before {
  /* le haut-parleur, seul detail : il suffit a dire "telephone" */
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .17);
}
.phone img, .phone video { width: 100%; height: auto; border-radius: 13px; display: block; }
.phone-tilt { transform: rotate(-1.4deg); }
.phone-sm { max-width: 248px; }
.night .phone { box-shadow: 0 28px 56px rgba(0, 0, 0, .5); }

/* ------------------------------------------------------------------ sections */

section { padding: clamp(56px, 8vw, 96px) 0; }
.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.marker {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px;
}
.marker svg { color: var(--brand); }

.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.card .icon { color: var(--brand); margin-bottom: 14px; }
.card p:last-child { margin-bottom: 0; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split.reverse .split-media { order: 2; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.facts svg { margin-top: 5px; color: var(--brand); }
.facts b { font-weight: 700; }

/* section sombre */
.night { background: var(--night); color: #eceaf6; position: relative; overflow: hidden; }
.night h2, .night h3 { color: #fff; }
.night .lede, .night .muted { color: #b6b4cf; }
.night .marker { color: #8f8dae; }
.night .marker svg { color: var(--warm); }
.night .facts svg { color: var(--warm); }
.night .staff { --staff-line: rgba(255,255,255,.13); opacity: 1; }
.night a { color: #cfd3ff; }

/* le dessin du branchement OTG : une carte claire, le SVG s'y etale */
.midi-art {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
}
.midi-art svg { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------ galerie */

.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.strip figure { margin: 0; }
.strip figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* ------------------------------------------------------------------ tableau */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: .97rem; }
thead th { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
td.mid, th.mid { text-align: center; width: 22%; }
.yes { color: var(--brand); }
.no { color: var(--ink-faint); }

/* ------------------------------------------------------------------ faq */

.faq { display: grid; gap: 12px; max-width: 800px; }
details {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 20px;
}
details[open] { box-shadow: var(--shadow-sm); }
summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; align-items: center; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; color: var(--brand); font-weight: 700; font-size: 1.2rem; line-height: 1; }
details[open] summary::before { content: "–"; }
details p { margin: 0 0 16px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ appel */

.cta {
  background: linear-gradient(155deg, #eef0ff, #f7eef3 70%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 54px); text-align: center; box-shadow: var(--shadow-sm);
}
.cta .btn-row { justify-content: center; }

/* ------------------------------------------------------------------ pied */

footer { border-top: 1px solid var(--line); padding: 44px 0 56px; color: var(--ink-soft); font-size: .93rem; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-links a { color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------------ page texte */

.doc { max-width: 760px; }
.doc h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.2em; scroll-margin-top: 90px; }
.doc h2:first-of-type { margin-top: .4em; }
.doc h3 { margin-top: 1.8em; }
.doc ul { padding-left: 1.15em; }
.doc li { margin-bottom: .5em; }
.doc .updated { font-size: .9rem; color: var(--ink-faint); }
.toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 28px 0 40px; }
.toc ol { margin: 0; padding-left: 1.2em; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: .35em; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.callout {
  border-left: 3px solid var(--brand); background: var(--paper-2);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 22px 0;
}
.callout.warm { border-left-color: var(--warm); }
.fill { background: #fff5d6; padding: 1px 7px; border-radius: 5px; font-weight: 700; color: #7a5300; white-space: nowrap; }

/* ------------------------------------------------------------------ etroit */

@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .pillars { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links a:not(.btn) { display: none; }
  .toc ol { columns: 1; }
  .hero .phone { max-width: 260px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .strip { grid-template-columns: 1fr; }
  .strip figure { max-width: 260px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------ retouches

   Ces quelques reglages etaient ecrits en attributs style= dans les pages.
   Ils sont devenus des classes le jour ou le site a pris une politique de
   securite stricte : style-src 'self' fait ignorer le style en ligne, et la
   mise en page serait partie de travers sans qu'aucune erreur ne le dise. */

.pt0 { padding-top: 0; }
.pb0 { padding-bottom: 0; }
.m0 { margin: 0; }
.mb10 { margin-bottom: 10px; }
.mt26 { margin-top: 26px; }
.m-hero { margin: 0 auto 24px; }
.title-lg { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }