/* 08 Sep 2026 17:01 Paris : le texte des sections occupe maintenant toute la largeur de la
   colonne (p max-width 64ch -> none) et les blancs sont resserrés — sections
   52px -> 30px au-dessus et au-dessous, paragraphes 16px -> 12px, titres h2
   14px -> 10px et jusqu'à 40 caractères au lieu de 26. Demande de Mark.
   L'ouverture de la page d'accueil n'est pas touchée : elle garde les 28px
   entre paragraphes et l'interligne 1,75 réglés le 08/09 à 10h15.

   nyms.buzz — shared stylesheet. One copy for every page and every language.
   Extracted from index.html 07 Sep 2026 so the pages cannot drift apart the way
   landing.html and the nyms-prive copy did. Edit here, never in a page. */
:root{
    /* inherited from nyms.eu so the two sites read as one family */
    --bg:#ffffff; --wash:#f7fafc; --line:#c9c9c9;
    --paper:#262626; --muted:#6c6f69;
    --brick:#c35139; --cyan:#0f8fc4; --gold:#b8860b; --green:#547c24;
    --font-display:'Spectral',Georgia,serif;
    --font-body:'Barlow',-apple-system,sans-serif;
  }
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0; background:var(--bg); color:var(--paper);
    font-family:var(--font-body); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-bottom:env(safe-area-inset-bottom);
  }
  ::selection{ background:#2cc4f5; color:#262626; }
  *:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
  a{ color:inherit; }

  .wrap{ max-width:940px; margin:0 auto; padding:0 20px; }
  .narrow{ max-width:64ch; }

  /* ---------- top strip: language names + the way home ---------- */
  .topstrip{
    max-width:940px; margin:0 auto; padding:10px 22px;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    border-bottom:1px solid #ececea;
  }
  .topstrip .brand{
    font-family:var(--font-display); font-weight:600; font-size:18px;
    color:var(--paper); margin-right:auto;
  }
  .langs-nav{ display:flex; flex-wrap:wrap; gap:2px 14px; }
  .langs-nav a{ font-size:14.5px; color:var(--muted); text-decoration:none; }
  .langs-nav a[aria-current="true"]{ color:var(--paper); font-weight:500; }
  @media (hover:hover){ .langs-nav a:hover{ color:var(--cyan); } }
  .login-link{
    font-size:14.5px; color:var(--paper); text-decoration:none;
    border:1px solid var(--line); padding:6px 14px;
  }
  @media (hover:hover){ .login-link:hover{ border-color:var(--cyan); color:var(--cyan); } }
  @media (max-width:560px){ .topstrip{ gap:10px; } .topstrip .brand{ width:100%; margin-right:0; } }

  /* ---------- masthead ---------- */
  .masthead{
    display:flex; align-items:center; gap:18px;
    background:var(--brick); padding:16px 22px;
    max-width:940px; margin:0 auto;
  }
  .masthead img{ flex:none; width:66px; height:66px; }
  .masthead .tag{
    font-size:12px; letter-spacing:.16em; color:#f6ded8; text-transform:lowercase;
  }
  .masthead .site{
    font-family:var(--font-display); font-size:22px; font-weight:600; color:#fff;
    line-height:1.2;
  }

  /* ---------- hero: the visitor lands mid-question ---------- */
  .hero{ padding:44px 0 8px; }
  h1{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(28px,5.2vw,44px); line-height:1.12;
    margin:0 0 16px; max-width:22ch;
  }
  .hero-sub{ font-size:18px; color:#43463f; margin:0 0 32px; max-width:56ch; }

  .quiz{
    border:1px solid var(--line); border-top:5px solid var(--brick);
    background:var(--wash); padding:26px 24px 22px;
  }
  .quiz-ask{ font-size:15px; color:var(--muted); margin:0 0 6px; }
  .quiz-word{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(34px,7vw,54px); line-height:1.05; margin:0 0 22px;
    color:var(--brick);
  }
  .quiz-word.small{ font-size:clamp(21px,3.4vw,28px); line-height:1.3; color:var(--paper); }
  .opts{ display:grid; gap:9px; }
  @media (min-width:620px){ .opts.two-up{ grid-template-columns:1fr 1fr; } }
  .opt{
    display:block; width:100%; text-align:left; cursor:pointer;
    font-family:var(--font-body); font-size:18px; color:var(--paper);
    background:#fff; border:1px solid var(--line); border-left:3px solid var(--line);
    padding:13px 16px; transition:border-color .12s, background .12s;
  }
  @media (hover:hover){ .opt:hover:not(:disabled){ border-left-color:var(--cyan); background:#eef8fd; } }
  .opt:disabled{ cursor:default; }
  .opt.right{ border-left-color:var(--green); background:#f1f7e8; }
  .opt.wrong{ border-left-color:var(--brick); background:#fbefec; color:#8d4030; }
  .opt .why{ display:block; font-size:14px; color:var(--muted); margin-top:3px; }

  .verdict{ margin:20px 0 0; font-size:17px; line-height:1.55; }
  .verdict[hidden]{ display:none; }
  .verdict b{ font-weight:600; }
  .verdict .clock{ color:var(--brick); font-weight:600; }

  /* ---------- sections ---------- */
  /* 10/09/26 : blancs resserres entre les sections, a la demande de Mark
   (30px -> 16px au-dessus et au-dessous, marge 30px -> 16px). */
section{ padding:16px 0; border-top:1px solid #e6e6e4; margin-top:16px; }
  h2{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(23px,3.6vw,31px); line-height:1.2; margin:0 0 10px; max-width:40ch;
  }
  h3{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0 0 5px; }
  p{ margin:0 0 12px; max-width:none; }
  .lead{ font-size:19px; color:#43463f; }

  /* the thesis, set as three beats */
  .beats{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); margin:28px 0 0; }
  @media (min-width:700px){ .beats{ grid-template-columns:repeat(3,1fr); } }
  .beat{ background:#fff; padding:20px 22px; }
  .beat .n{ font-family:var(--font-display); font-size:15px; color:var(--brick); margin-bottom:6px; }
  .beat p{ margin:0; font-size:16px; color:#43463f; }

  /* demos */
  .demos{ display:grid; gap:18px; margin-top:28px; }
  @media (min-width:820px){ .demos{ grid-template-columns:1fr 1fr; } }
  .demo{ border:1px solid var(--line); border-top:4px solid var(--accent,var(--cyan)); background:var(--wash); padding:20px 20px 18px; }
  .demo h3{ color:var(--accent,var(--cyan)); }
  .demo .kind{ font-size:14px; color:var(--muted); margin:0 0 16px; }
  .demo .quiz-word{ font-size:clamp(22px,3.4vw,30px); color:var(--paper); margin-bottom:16px; }
  .demo .opt{ font-size:16px; padding:11px 14px; }
  .demo .why{
    margin:16px 0 0; padding:12px 0 0; border-top:1px solid #e2e6e4;
    font-size:14.5px; line-height:1.55; color:#4a5a52;
  }
  .demo .why b{
    display:block; font-family:var(--font-mono); font-size:10.5px;
    letter-spacing:.13em; text-transform:uppercase; color:var(--accent,var(--cyan));
    font-weight:600; margin-bottom:4px;
  }
  .demo.wide{ grid-column:1 / -1; }

  /* nine-card memory board: three words x three ways of holding them */
  .mem-top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:14px; }
  .mem-clock{
    font-family:var(--font-display); font-size:26px; font-weight:600;
    color:var(--brick); font-variant-numeric:tabular-nums; min-width:4ch;
  }
  .mem-clock.idle{ color:var(--muted); }
  .mem-hint{ font-size:15px; color:var(--muted); }
  .mem-board{
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
    max-width:520px;
  }
  .mem-card{
    aspect-ratio:4 / 3; cursor:pointer; padding:6px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:var(--font-body); font-size:16px; line-height:1.25; color:var(--paper);
    background:#fff; border:1px solid var(--line); border-top:3px solid var(--line);
    transition:border-color .12s, background .12s;
  }
  @media (hover:hover){ .mem-card:hover:not(.up):not(.done){ border-color:var(--cyan); background:#eef8fd; } }
  .mem-card.face-down{
    color:transparent; background-color:var(--wash);
    background-repeat:no-repeat; background-position:center;
    background-size:auto 62%;
  }
  .mem-card.up{ background:#fff; }
  .mem-card.up.k-sound{ border-top-color:#dba67c; }
  .mem-card.up.k-en{ border-top-color:var(--brick); }
  .mem-card.up.k-fr{ border-top-color:var(--cyan); }
  .mem-card.done{ background:#f1f7e8; border-color:#8fae6a; border-top-color:#3f7d46; cursor:default; }
  .mem-card .sound-mark{ font-size:24px; }
  @media (max-width:420px){ .mem-card{ font-size:14px; } }
  .demo.wide .quiz-word{ font-size:clamp(40px,8vw,64px); color:var(--brick); }
  .contexts{ margin:16px 0 0; padding:0; list-style:none; }
  .contexts li{ font-size:16.5px; line-height:1.5; padding:8px 0; border-top:1px solid #e6e6e4; }
  .contexts li b{ color:#3f7d46; font-weight:600; }

  .say{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:14px; }
  .btn{
    font-family:var(--font-body); font-size:16px; cursor:pointer;
    background:var(--green); color:#fff; border:none; border-bottom:2px solid #3d5a19;
    padding:11px 18px;
  }
  .btn.quiet{ background:#fff; color:var(--paper); border:1px solid var(--line); border-bottom:1px solid var(--line); }
  @media (hover:hover){ .btn:hover{ filter:brightness(1.07); } }
  .type-in{
    width:100%; font-family:var(--font-body); font-size:17px; padding:12px 14px;
    border:1px solid var(--line); background:#fff; color:var(--paper);
  }
  .type-in:focus{ border-color:var(--cyan); outline:none; }
  /* 08/09/26 : demo Keywords — les trois espaces d'un mot-cle. */
  .kw3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 12px; }
  .kwbox{ display:block; min-width:0; }
  .kwbox span{
    display:block; margin-bottom:4px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
    text-transform:uppercase; color:var(--brick); font-weight:600;
  }
  .kwbox .type-in{ width:100%; }
  .kwcount{ margin:0; font-size:13px; color:var(--muted); }
  @media (max-width:640px){ .kw3{ grid-template-columns:1fr; } }
  .marked b{ color:#3f7d46; font-weight:600; }
  .marked s{ color:var(--brick); text-decoration-thickness:1px; }

  /* five skills */
  .skills{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); margin-top:26px; }
  @media (min-width:640px){ .skills{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:960px){ .skills{ grid-template-columns:repeat(5,1fr); } }
  .skill{ background:#fff; padding:18px 18px 20px; }
  .skill h3{ font-size:17px; }
  .skill p{ font-size:15px; color:var(--muted); margin:0; }

  /* why it works */
  .claims{ margin-top:26px; }
  .claim{ border-left:3px solid var(--accent,var(--cyan)); padding:2px 0 2px 18px; margin-bottom:26px; }
  .claim h3{ font-size:20px; }
  .claim p{ margin:0; color:#43463f; }

  /* three doors */
  .doors{ display:grid; gap:16px; margin-top:26px; }
  @media (min-width:760px){ .doors{ grid-template-columns:repeat(3,1fr); } }
  .door{
    display:flex; flex-direction:column; text-decoration:none;
    border:1px solid var(--line); border-top:4px solid var(--accent);
    background:#fff; padding:22px 20px;
  }
  @media (hover:hover){ .door:hover{ background:var(--wash); border-color:var(--accent); } }
  .door .who{ font-family:var(--font-display); font-size:21px; font-weight:600; margin-bottom:8px; }
  .door p{ font-size:15.5px; color:#43463f; margin:0 0 14px; }
  .door .go{ margin-top:auto; font-size:15px; color:var(--accent); font-weight:500; }
  /* 08/09/26 : la barre CONTACT, sur toute la largeur, sous les trois portes. */
  .doors .doorwide{ grid-column:1 / -1; }
  @media (min-width:760px){
    .doors .doorwide{
      flex-direction:row; align-items:center; gap:22px; padding:18px 22px;
    }
    .doors .doorwide .who{ margin-bottom:0; white-space:nowrap; }
    .doors .doorwide p{ margin:0; flex:1; }
    .doors .doorwide .go{ margin-top:0; white-space:nowrap; }
  }

  /* proof */
  .proof{ display:grid; gap:2px; background:var(--line); border:1px solid var(--line); margin-top:24px; }
  @media (min-width:560px){ .proof{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width:900px){ .proof{ grid-template-columns:repeat(4,1fr); } }
  .fact{ background:#fff; padding:18px; }
  .fact .big{ font-family:var(--font-display); font-size:27px; font-weight:600; color:var(--brick); line-height:1.1; }
  .fact p{ font-size:15px; color:var(--muted); margin:4px 0 0; }

  /* plans */
  .plans{ display:grid; gap:16px; margin-top:24px; }
  @media (min-width:700px){ .plans{ grid-template-columns:repeat(3,1fr); } }
  .plan{ border:1px solid var(--line); padding:20px; background:var(--wash); }
  .plan .name{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:4px; }
  .plan .price{ font-size:16px; color:var(--brick); font-weight:500; margin-bottom:8px; }
  .plan p{ font-size:15px; color:var(--muted); margin:0; }
  .reveal{
    display:inline-block; margin-top:6px; cursor:pointer;
    background:var(--cyan); color:#fff; border:none; border-bottom:2px solid #0b6f99;
    font-family:var(--font-body); font-size:17px; padding:13px 22px;
  }
  @media (hover:hover){ .reveal:hover{ filter:brightness(1.07); } }
  .cta{ display:inline-block; margin-top:22px; background:var(--cyan); color:#fff;
        text-decoration:none; font-size:17px; padding:13px 22px; border-bottom:2px solid #0b6f99; }
  @media (hover:hover){ .cta:hover{ filter:brightness(1.07); } }

  footer{ border-top:1px solid #e6e6e4; margin-top:52px; padding:26px 0 40px;
          font-size:14px; color:var(--muted); }
  footer a{ color:var(--muted); }
  .stamp{ font-size:12px; opacity:.7; margin-top:10px; }

  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---------- the samples gallery: ten small tiles, one panel ----------
   Added 07/09/26 at Mark's request: the samples used to be ten full-width
   panels spread down the page. They are now one picker and one stage. */
.picker{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:0 0 18px;
}
@media (max-width:820px){ .picker{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .picker{ grid-template-columns:repeat(2,1fr); } }
.pick{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  cursor:pointer; text-align:left; font-family:var(--font-body);
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--line);
  padding:10px 11px 11px; transition:border-color .12s, background .12s;
}
@media (hover:hover){ .pick:hover{ border-color:var(--cyan); background:#eef8fd; } }
.pick .pick-ic{ font-size:20px; line-height:1.1; }
.pick .pick-n{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--paper); }
.pick .pick-s{ font-size:11.5px; line-height:1.35; color:var(--muted); }
.pick.on{ border-top-color:var(--brick); background:var(--wash); }
.pick.on .pick-n{ color:var(--brick); }
.stage .demo{ margin:0; }
.stage .demo[hidden]{ display:none; }

/* ---------- The Language Lab sample, matching the real Lab on nyms.eu ---------- */
.lab-band{
  background:#4a7c1f; color:#fff; text-align:center; text-transform:uppercase;
  font-size:12.5px; letter-spacing:.06em; line-height:1.5;
  padding:12px 16px; margin:0 0 12px; max-width:none;
}
.lab-key{ display:flex; flex-wrap:wrap; gap:6px 22px; margin:0 0 8px; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.lab-key i{ display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px; }
.lab-key b{ font-weight:400; color:#a8aca6; }
.lab-note{ font-size:13.5px; color:#4a5a52; margin:10px 0 14px; max-width:none; }
.lab-buttons{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:560px){ .lab-buttons{ grid-template-columns:1fr; } }
.lab-buttons .btn{ font-size:16px; padding:13px 16px; }
.btn.lab-blue{ background:#00adef; border-bottom-color:#0b6f99; }
.btn.lab-red{ background:#c35139; border-bottom-color:#8d4030; }
.btn:disabled{ opacity:.55; cursor:default; }
@media (hover:hover){ .btn:disabled:hover{ filter:none; } }

/* ---------- the conversation replay, and the live-sessions card ---------- */
.chat-meta{ font-size:13px; color:var(--muted); margin:0 0 10px; }
.chat{
  border:1px solid var(--line); background:#fff; padding:14px;
  max-height:420px; overflow-y:auto;
}
.bubble{
  max-width:78%; padding:11px 14px; margin:0 0 10px;
  font-size:15.5px; line-height:1.5; border-radius:10px;
}
.bubble.them{ background:#e6f2f8; color:#1d2c33; }
.bubble.you{ background:#f2efe6; color:#2b2a24; margin-left:auto; }
.live-two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
@media (max-width:640px){ .live-two{ grid-template-columns:1fr; } }
.live-opt{ border:1px solid var(--line); border-top:3px solid var(--accent,#00adef);
  background:#fff; padding:16px; }
.live-opt .card-icon{ font-size:22px; margin-bottom:8px; display:block; }

/* ---------- the seven Faster Thinking courses, on the teacher page ---------- */
.ft-lede{ font-size:14.5px; color:#4a5a52; margin:26px 0 12px; }
.ft-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:900px){ .ft-row{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:520px){ .ft-row{ grid-template-columns:repeat(2,1fr); } }
.ft-card{
  border:1px solid var(--line); border-top:3px solid #8a6b14;
  background:#faf7ef; padding:12px 10px 13px; text-align:center;
}
.ft-card .ft-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-bottom:8px;
  background:#c35139; color:#fff; border-radius:6px;
  font-family:var(--font-display); font-weight:600; font-size:17px;
}
.ft-card .ft-cover{
  display:block; width:100%; height:auto; margin:0 auto 9px;
  border:1px solid var(--line); background:#fff;
}
.ft-card .ft-t{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.ft-card .ft-s{ font-size:11.5px; color:var(--muted); line-height:1.35; margin-top:3px; }
.ft-note{ font-size:14px; color:#8a6b14; margin:12px 0 0; }

/* ---------- a claim set apart, answered by the sample underneath ---------- */
.pullquote{
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(19px,2.8vw,25px); line-height:1.3; color:var(--brick);
  border-left:4px solid var(--brick); padding:4px 0 4px 18px;
  margin:26px 0 20px; max-width:30ch;
}

/* ---------- a named method above a question ---------- */
.eyebrow-line{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px;
}

/* ---------- the English/<language> flag banner, lifted from Mark's game pages ---------- */
.card-icon.langs{
    display:flex; align-items:center; gap:6px;
    margin-bottom: 12px;
  }
  .card-icon.langs .flag-group{ display:flex; gap:2px; }
  .card-icon.langs .flag-group .flag{
    width:14px; height:10px; line-height:0;
    border:1px solid rgba(38,38,38,.26);
  }
  .card-icon.langs .flag-group .flag svg{ display:block; width:100%; height:100%; }
  .card-icon.langs .slash{ color: var(--muted); font-size:14px; font-weight:300; }
  .card-icon.langs .flag-target{
    width:27px; height:19px; line-height:0;
    border:1px solid rgba(38,38,38,.26);
  }
  .card-icon.langs .flag-target svg{ display:block; width:100%; height:100%; }

.mini-quote{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:17px; color:var(--brick); margin:0 0 14px;
}

/* ---------- The Video Lab tile ---------- */
.privacy-note{
  border:1px solid #8fae6a; border-left:5px solid #4a7c1f; background:#f2f7ea;
  padding:12px 14px; font-size:14px; line-height:1.55; color:#33421f; margin:0 0 16px;
}
.vl-strip{ display:grid; grid-template-columns:1fr 1fr; gap:16px;
  border:1px solid #9ecfe8; background:#eaf6fc; padding:14px 16px; margin:0 0 14px; }
@media (max-width:640px){ .vl-strip{ grid-template-columns:1fr; } }
.vl-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.vl-scale{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-display); font-weight:600; color:#6b7a86; }
.vl-scale .on{ color:#3f7d46; }
.vl-line{ background:#fff; border:1px solid var(--line); padding:9px 12px; font-size:16px; }
.vl-missing{ font-size:14px; color:#4a5a52; background:#faf7ef; border-left:3px solid #8a6b14;
  padding:10px 14px; margin:0 0 4px; }
.vl-missing a{ color:var(--cyan); }

.vl-stage{ text-align:center; margin:0 0 14px; }
.vl-stage video{ max-width:100%; height:auto; border:1px solid var(--line); background:#000; }
.vl-line-said{ font-family:var(--font-display); font-size:20px; margin:10px 0 0; }

/* ---------- the KEYS! cover beside its claim ---------- */
.keys-strip{ display:grid; grid-template-columns:220px 1fr; gap:22px; align-items:center; margin:26px 0 20px; }
@media (max-width:640px){ .keys-strip{ grid-template-columns:1fr; } }
.keys-strip .pullquote{ margin:0; }
.keys-cover{ display:block; width:100%; height:auto; border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.18); background:#fff; }

/* 08 Sep 2026 17:36 : la rangée des quatre pochettes KEYS! — le CD d'origine puis les trois
   boîtes de 1999, toutes à la même hauteur, la citation en dessous. Les règles
   .keys-strip au-dessus ne sont pas touchées. */
.keys-covers{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px; margin:26px 0 16px;
}
.keys-covers .keys-cover{ width:auto; height:190px; }
.keys-covers + .pullquote{ margin:0 0 20px; }
@media (max-width:640px){ .keys-covers .keys-cover{ height:140px; } }

/* ---------- the contact form ---------- */
.ask{ max-width:56ch; }
.ask-row{ margin:0 0 20px; border:0; padding:0; }
.ask-row label, .ask-row legend{
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:16.5px; margin-bottom:6px; padding:0;
}
.ask-row input[type=text], .ask-row input[type=email], .ask-row textarea{
  width:100%; font-family:var(--font-body); font-size:17px; padding:11px 13px;
  border:1px solid var(--line); background:#fff; color:var(--paper);
}
.ask-row input:focus, .ask-row textarea:focus{ border-color:var(--cyan); outline:none; }
.ask-hint{ display:block; font-size:13.5px; color:var(--muted); margin-top:5px; }
.ask-opt{ font-family:var(--font-body); font-weight:400; font-size:13px; color:var(--muted); }
.ask-pick{ display:block; font-family:var(--font-body) !important; font-weight:400 !important;
  font-size:16.5px !important; margin:0 0 7px !important; cursor:pointer; }
.ask-pick input{ margin-right:9px; }
.ask-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ask-privacy{ font-size:13.5px; color:var(--muted); margin:16px 0 0; max-width:56ch; }

.vl-takes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 0; }
.vl-takes-label{ font-size:13.5px; color:var(--muted); margin-right:4px; }
.vl-take{ font-size:14px !important; padding:7px 12px !important; }
.vl-take.on{ background:#547c24; color:#fff; border-color:#3d5a19; }

/* ---------- the opening questions, quieter ---------- */
h1.opening-q{
  font-size:clamp(21px,3.2vw,29px); font-weight:500; line-height:1.35;
  max-width:34ch; color:#33362f; letter-spacing:0;
}

/* ---------- the opening runs the full width of the page ---------- */
.hero.opening h1, .hero.opening .hero-sub{ max-width:none; }

/* 08/09/26 : page contact seulement — le titre reste en Spectral mais plus leger
   et plus petit, le texte monte d'un cran : moins de rupture entre les deux. */
.hero-ask h1{ font-weight:500; font-size:clamp(26px,4.4vw,36px); }
.hero-ask .hero-sub{ font-size:19px; line-height:1.6; }

.picker-invite{ font-size:16px; color:var(--paper); margin:0 0 12px; max-width:none; }

/* ---------- the opening breathes: air between paragraphs, a looser line ---------- */
.hero.opening .hero-sub{
  margin-bottom:28px; line-height:1.75; font-size:17.5px;
}
.hero.opening h1.opening-q{ margin-bottom:30px; }

/* ---- .hear : le bouton d'ecoute discret (choix A de Mark, 10/09/26) ----
   Une icone de haut-parleur dessinee en SVG, couleur brique, sans cadre :
   elle ne coupe pas la ligne de texte et elle est identique sur tous les
   appareils, ce que l'emoji ne peut pas etre (chaque systeme dessine le sien).
   Utilisee dans la liste des expressions du Lexicon, sur index.html. ---- */
.hear{
  background:none; border:none; padding:2px 4px; cursor:pointer;
  color:var(--brick); vertical-align:-2px; line-height:0;
}
.hear svg{ display:block; }
@media (hover:hover){ .hear:hover{ opacity:.65; } }
.hear:focus-visible{ outline:2px solid var(--brick); outline-offset:2px; }

/* ---- .tag-logo : le vrai logotype nyms dans le bandeau (10/09/26) ----
   Remplace l'ancien texte .tag. Hauteur fixe, largeur proportionnelle,
   pour ne jamais dependre des dimensions reelles du fichier. ---- */
.masthead .tag-logo{ display:block; height:15px; width:auto; margin-bottom:2px; }

/* ---- .brand-logo : le logotype nyms.buzz noir et blanc dans le bandeau superieur
   (10/09/26, remplace le texte .brand "nyms."). Hauteur fixe, largeur
   proportionnelle ; il garde le margin-right:auto qui repousse les langues
   et le bouton Log in vers la droite. ---- */
.topstrip .brand-logo{ display:block; height:24px; width:auto; margin-right:auto;
  /* -22px = le padding lateral du bandeau : le logotype s'aligne ainsi sur le bord
     gauche du bandeau brique, a toutes les largeurs d'ecran. */
  margin-left:-22px; }
@media (max-width:560px){ .topstrip .brand-logo{ margin-right:auto; } }

/* ---- .logo-inline : un logotype pose dans une phrase, a la place du mot
   (10/09/26). Hauteur relative a la taille du texte qui l'entoure, largeur
   proportionnelle, pose sur la ligne de base. ---- */
.logo-inline{ height:1.25em; width:auto; vertical-align:-0.32em; margin:0 .1em; }