/* Transcription de la maquette Claude Design (design/source/Accueil v3.dc.html, Lire et écrire.dc.html) :
   valeurs reprises telles quelles, y compris les clamp() de la source. */
:root {
  --bg: #f3eee3;
  --ink: #1d1b18;
  --red: #b23a26;
  --muted: #6b6358;
  --body2: #4a443c;
  --line: #d8cfbd;
  --card: #faf7f0;
  --chipline: #bfb4a0;
  --off: #9a907f;
  --d-line: #3d3832;
  --d-muted: #a89e8e;
  --d-btn: #5a534a;
  --d-text: #c9c0b0;
  --d-explain: #d6cdbd;
  --salmon: #e58a72;
  --pad-x: clamp(20px, 4vw, 48px);
  --serif: 'Newsreader', serif;
  --zh: 'Noto Serif SC', serif;
  --sans: 'Work Sans', sans-serif;
  --dark: #1d1b18;
  --dark-text: #f3eee3;
  --accent-ink: #f7f2e8;
  --motif-radius: 50%;
  --motif-transform: none;
  --motif-bg: #b23a26;
  --tile-size: clamp(34px, 4.6vw, 56px);
  --seg-size: clamp(30px, 3.8vw, 44px);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
[hidden] { display: none !important; }
button { font: inherit; }
.zh { font-family: var(--zh); }
.py { font-family: var(--serif); font-style: italic; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 10; }
.skip-link:focus { left: 8px; }

.page { position: relative; min-height: 100vh; overflow: hidden; background: var(--bg); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(60,45,20,.07) 1px, transparent 1px), radial-gradient(rgba(60,45,20,.05) 1px, transparent 1px); background-size: 7px 7px, 13px 13px; background-position: 0 0, 3px 5px; }

/* En-tête */
.hd { position: relative; max-width: 1240px; margin: 0 auto; padding: 24px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; background: var(--red); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--zh); font-weight: 700; font-size: 20px; border-radius: 3px; }
.brand-name { font-family: var(--serif); font-size: 22px; white-space: nowrap; }
.langbar-logo { flex: none; display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px); padding: 10px 0; }
.langbar-logo img { display: block; width: 112px; height: 112px; object-fit: contain; transition: filter .25s ease; }
/* Pas de voile (les liens de la barre sont à 70 % d'opacité) ; lueur au survol et au focus clavier. */
.langbar a.langbar-logo { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); opacity: 1; padding: 10px 0; min-height: 0; border-bottom: 0; }
.langbar a.langbar-logo:hover img, .langbar a.langbar-logo:focus-visible img { filter: drop-shadow(0 0 10px rgba(120, 220, 225, .55)) drop-shadow(0 0 22px rgba(120, 220, 225, .3)); }
.langbar-logo + .langbar-learn { margin-right: auto; }
.langbar-logo img.langbar-name { width: auto; height: 56px; }
/* Logo, « J'apprends » et langues toujours sur une seule ligne (hors téléphone) : la liste des langues passe à la ligne
   à droite du logo plutôt que la barre entière sous lui. */
@media (min-width: 641px) {
  .langbar .langbar-in { height: 132px;
    flex-wrap: nowrap; max-width: none; padding-left: 24px; padding-right: 24px; }
  .langbar .langbar-learn { min-width: 0; flex: 1 1 auto; }
  .langbar .langbar-ui { margin-left: auto; }
}
@media (min-width: 641px) and (max-width: 1199px) {
  .langbar .langbar-in, .langbar .langbar-learn { gap: 16px; }
  .langbar .langbar-ui .langbar-label { display: none; }
}
@media (min-width: 641px) and (max-width: 999px) { .langbar .langbar-learn > .langbar-label { display: none; } }
.brand-name i { font-style: italic; color: var(--muted); }
.hd-nav { display: flex; gap: clamp(16px, 3vw, 36px); font-size: 15px; flex-wrap: wrap; order: 3; flex: 1 1 100%; border-top: 1px solid var(--line); padding-top: 16px; }
.hd-nav a[aria-current="page"] { color: var(--red); border-bottom: 1px solid var(--red); }
.hd-actions { display: flex; gap: 16px; align-items: center; }
.hd-actions a { font-size: 15px; }
.hd-actions .btn-ink { padding: 11px 20px; }

/* Boutons */
.btn-ink { background: var(--ink); color: var(--bg); border-radius: 2px; }
.btn-ink:hover { background: var(--red); color: var(--bg); }
.btn-red { background: var(--red); color: var(--accent-ink); padding: 16px 28px; font-size: 16px; border-radius: 2px; }
.btn-red:hover { background: var(--ink); color: var(--bg); }
.link-line { padding: 16px 4px; font-size: 16px; border-bottom: 1px solid var(--ink); }

/* Section générique */
.sec { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 var(--pad-x) clamp(80px, 10vw, 140px); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 24px; margin-bottom: 40px; }
.sec-head.mb48 { margin-bottom: 48px; }
.sec-head.mb16 { margin-bottom: 16px; }
.eyebrow { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); margin: 0; letter-spacing: -.015em; }
.sec-intro { margin: 0; color: var(--body2); font-size: 15px; line-height: 1.6; max-width: 400px; }
.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Héros */
.hero { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--pad-x) clamp(72px, 9vw, 128px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(48px, 6vw, 88px); align-items: center; }
.hero.hero-ecrire { padding-bottom: clamp(72px, 9vw, 120px); }
.hero-ghost { position: absolute; left: -3vw; top: -60px; font-family: serif; font-weight: 900; font-size: clamp(320px, 42vw, 600px); line-height: 1; color: var(--ink); opacity: .045; pointer-events: none; }
.hero-text { position: relative; }
.kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.kicker::before { content: ""; width: 32px; height: 1px; background: var(--muted); }
.h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6.4vw, 86px); line-height: 1; letter-spacing: -.02em; margin: 0 0 28px; text-wrap: balance; }
.h1 i, .h2 i { font-style: italic; }
.h1 i { color: var(--red); }
.hero-lead { font-size: 18px; line-height: 1.6; color: var(--body2); max-width: 500px; margin: 0 0 40px; text-wrap: pretty; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-visual { position: relative; display: flex; flex-direction: column; }
.sun { position: absolute; top: -44px; right: -44px; width: clamp(150px, 17vw, 230px); aspect-ratio: 1; border-radius: var(--motif-radius); transform: var(--motif-transform); background: var(--motif-bg); }
.hero-photo { position: relative; height: clamp(300px, 38vw, 500px); }
.hero-ecrire .hero-photo { height: clamp(280px, 34vw, 440px); }
.slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-empty { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--line) 65%, var(--bg)); overflow: hidden; }
.slot-empty span { font-family: var(--zh); font-weight: 900; font-size: clamp(120px, 14vw, 200px); color: var(--ink); opacity: .07; line-height: 1; }
.hero-card { position: relative; margin: -110px clamp(12px, 3vw, 32px) 0; background: var(--card); border: 1px solid var(--line); padding: clamp(20px, 3vw, 36px); box-shadow: 0 30px 60px -30px rgba(20,20,30,.35); }
.hero-card .label { letter-spacing: .16em; margin-bottom: 20px; }
.hero-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 4px 12px; min-width: 0; border: 1px solid var(--line); background: var(--bg); }
.tile-zh { font-family: var(--zh); font-size: var(--tile-size); line-height: 1.1; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.tile-py { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--red); text-align: center; }
.tile-role { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-card-foot { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.hero-card-foot .fr { font-size: 18px; }
.hero-card-foot .py { color: var(--muted); }
.stamp { position: absolute; right: -14px; top: -14px; width: 52px; height: 52px; background: var(--red); color: var(--bg); display: grid; place-items: center; font-family: var(--zh); font-weight: 700; font-size: 15px; line-height: 1.05; text-align: center; border-radius: 3px; transform: rotate(4deg); }

/* Six familles */
.blocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.bloc { display: flex; flex-direction: column; gap: 20px; padding: 32px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bloc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloc-title { font-family: var(--serif); font-size: 26px; }
.bloc-mark { font-family: var(--serif); font-size: 15px; color: var(--red); }
.bloc-items { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bloc-item { display: flex; align-items: baseline; gap: 6px; }
.bloc-item .zh { font-size: 21px; }
.bloc-item .py { font-size: 14px; color: var(--red); }
.bloc p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body2); text-wrap: pretty; }

/* En situation */
.situations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.situation { display: flex; flex-direction: column; gap: 18px; }
.situation-photo { position: relative; height: clamp(280px, 30vw, 400px); }
.situation-text { display: flex; flex-direction: column; gap: 4px; }
.situation-text .zh { font-size: 28px; }
.situation-text .py { font-size: 17px; color: var(--red); }
.situation-text .fr { font-size: 16px; color: var(--body2); }

/* Constructeur */
.builder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.b-controls { display: flex; flex-direction: column; gap: 26px; }
.b-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.b-group .label { display: block; margin-bottom: 10px; }
.b-select { width: 100%; min-height: 58px; padding: 8px 40px 8px 12px; border-radius: 2px; border: 1px solid var(--chipline); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6358' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); font-family: var(--zh); font-size: 20px; appearance: none; cursor: pointer; }
.b-select:hover { border-color: var(--ink); }
.b-select.is-off { border-style: dashed; color: var(--off); }
.b-select:disabled { cursor: not-allowed; color: var(--off); border-style: dashed; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; cursor: pointer; border-radius: 2px; font-family: var(--sans); font-size: 15px; border: 1px solid var(--chipline); background: transparent; color: var(--ink); }
.toggle .zh { font-size: 20px; }
.toggle[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.toggle.is-off { border-style: dashed; color: var(--off); }
.b-reasons { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--body2); display: grid; gap: 6px; }
.b-reasons strong { font-weight: 600; }

.panel { background: var(--dark); color: var(--dark-text); padding: clamp(24px, 3.5vw, 40px); border-radius: 2px; display: flex; flex-direction: column; gap: 24px; }
.segs { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-speed { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-text); opacity: .85; }
.seg-speed span { margin-right: 4px; }
.seg-speed button { font: inherit; letter-spacing: .04em; text-transform: none; font-size: 13px; padding: 6px 12px; min-height: 32px; cursor: pointer; border-radius: 2px; border: 1px solid var(--d-line); background: transparent; color: var(--dark-text); }
.seg-speed button[aria-pressed="true"] { background: var(--dark-text); color: var(--dark, #1d1a24); }
.seg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 12px 10px; min-width: 64px; border: 1px solid var(--d-line); background: transparent; color: var(--dark-text); cursor: pointer; border-radius: 0; }
.seg:hover { border-color: var(--d-btn); }
.seg-zh { font-family: var(--zh); font-size: var(--seg-size); line-height: 1.1; }
.seg-py { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--salmon); }
.seg-role { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.p-hanzi { font-family: var(--zh); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; margin-bottom: 8px; }
.p-pinyin { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--salmon); margin-bottom: 14px; }
.p-label { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-text); opacity: .6; }
.p-pron { font-size: 14px; color: var(--d-muted); margin: -8px 0 14px; }
.p-pron .py { font-size: 17px; color: var(--d-explain); }
.p-fr { font-size: 19px; line-height: 1.4; }
.p-reveal { font-family: var(--sans); font-size: 15px; color: var(--dark-text); background: transparent; border: 1px dashed var(--muted); padding: 10px 14px; cursor: pointer; border-radius: 2px; }
.p-stale { opacity: .35; }
.p-msg { font-size: 14px; line-height: 1.55; border: 1px solid var(--red); padding: 12px 14px; }
.p-msg-row { display: flex; gap: 12px; }
.p-msg-label { font-weight: 600; color: var(--salmon); white-space: nowrap; }
.p-sugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.p-sug { font-family: var(--sans); font-size: 13px; padding: 6px 10px; cursor: pointer; border-radius: 2px; border: 1px solid var(--d-btn); background: transparent; color: var(--dark-text); }
.p-sug .zh { font-size: 16px; margin-right: 4px; }
.p-sug:hover { border-color: var(--dark-text); }
.p-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.p-btn { font-family: var(--sans); font-size: 14px; padding: 11px 16px; white-space: nowrap; cursor: pointer; border-radius: 2px; border: 1px solid var(--d-btn); background: transparent; color: var(--dark-text); }
.p-btn:hover { border-color: var(--dark-text); }
.p-btn.primary { border-color: var(--dark-text); background: var(--dark-text); color: var(--dark); }
.p-btn.primary:hover { background: var(--red); border-color: var(--red); color: var(--accent-ink); }
.p-audio { font-size: 13px; color: var(--d-muted); }
.p-why { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--d-explain); border-top: 1px solid var(--d-line); padding-top: 20px; }
.p-why p { margin: 0; text-wrap: pretty; }
.demo-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* Séance */
.seance-photo { position: relative; height: clamp(220px, 28vw, 380px); margin-bottom: 32px; }
.bars { display: grid; grid-template-columns: 3fr 4fr 5fr 3fr; gap: 4px; }
.bars span { height: 10px; background: var(--ink); }
.bars span:nth-child(even) { background: var(--red); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin-top: 24px; }
.step-min { font-family: var(--serif); font-size: 40px; line-height: 1; }
.step-min small { font-size: 18px; color: var(--muted); }
.step-title { font-size: 17px; margin: 10px 0 4px; font-weight: 500; }
.step-text { font-size: 15px; color: var(--body2); line-height: 1.5; }

/* Parcours */
.week { display: grid; grid-template-columns: 64px repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 32px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.week-n { font-family: var(--zh); font-weight: 700; font-size: 24px; color: var(--red); }
.week-obj { font-family: var(--serif); font-size: 22px; }
.week-comp { font-size: 15px; color: var(--body2); line-height: 1.5; }

/* Sections sombres */
.dark { position: relative; overflow: hidden; background: var(--dark); color: var(--dark-text); }
.dark a { color: var(--dark-text); }
.dark-ghost { position: absolute; right: -6vw; top: 50%; transform: translateY(-50%); font-family: serif; font-weight: 900; font-size: clamp(400px, 55vw, 820px); line-height: 1; color: inherit; opacity: .05; pointer-events: none; }
.dark-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--pad-x); }
.dark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; }
.dark .eyebrow { color: var(--d-muted); margin-bottom: 24px; }
.dark .h2 { line-height: 1.04; margin: 0 0 24px; }
.dark-lead { font-size: 17px; line-height: 1.6; color: var(--d-text); max-width: 460px; margin: 0 0 36px; }
.char-picks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 420px; margin-bottom: 24px; }
.char-pick { aspect-ratio: 1; min-height: 48px; font-family: var(--zh); font-size: 24px; cursor: pointer; border-radius: 2px; border: 1px solid var(--d-btn); background: transparent; color: var(--dark-text); }
.char-pick[aria-pressed="true"] { background: var(--dark-text); border-color: var(--dark-text); color: var(--dark); }
.char-cur { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.char-cur .py { font-size: 26px; color: var(--salmon); }
.char-cur .fr { color: var(--d-text); font-size: 16px; }
.dark-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.d-btn { font-family: var(--sans); font-size: 15px; padding: 13px 22px; white-space: nowrap; cursor: pointer; border-radius: 2px; border: 1px solid var(--d-btn); background: transparent; color: var(--dark-text); }
.d-btn:hover { border-color: var(--dark-text); }
.d-btn.primary { border-color: var(--dark-text); background: var(--dark-text); color: var(--dark); }
.d-btn.primary:hover { background: var(--red); border-color: var(--red); color: var(--accent-ink); }
.d-link { font-size: 15px; padding: 13px 4px; border-bottom: 1px solid var(--dark-text); white-space: nowrap; }
.writer-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.writer-box { position: relative; width: min(100%, 360px); aspect-ratio: 1; background: var(--bg); border-radius: 2px; }
.writer-grid { position: absolute; inset: 0; background: linear-gradient(#ddd3c0, #ddd3c0) center/1px 100% no-repeat, linear-gradient(#ddd3c0, #ddd3c0) center/100% 1px no-repeat; }
.writer-target { position: absolute; inset: 0; display: grid; place-items: center; }
.writer-status { font-size: 14px; color: var(--d-muted); min-height: 20px; }

/* Appel final */
.cta-sec { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(64px, 8vw, 100px) var(--pad-x); }
.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); border-radius: 2px; overflow: hidden; }
.cta-photo { position: relative; min-height: 340px; }
.cta-box { background: var(--red); color: var(--accent-ink); padding: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 32px; }
.cta-box .h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1; margin: 0 0 16px; }
.cta-box p { margin: 0; font-size: 17px; }
.btn-paper { background: var(--accent-ink); color: var(--ink); padding: 18px 32px; font-size: 16px; border-radius: 2px; white-space: nowrap; }
.btn-paper:hover { background: var(--ink); color: var(--bg); }

/* Pied */

/* Lire et écrire */
.ecrire-card { position: relative; align-self: center; width: min(78%, 300px); margin-top: -150px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(60,40,10,.4); padding: 14px; }
.ecrire-card-grid { position: relative; aspect-ratio: 1; background: linear-gradient(#e2d9c6, #e2d9c6) center/1px 100% no-repeat, linear-gradient(#e2d9c6, #e2d9c6) center/100% 1px no-repeat; }
.ecrire-card-word { display: flex; justify-content: center; align-items: baseline; gap: 10px; padding-top: 10px; }
.ecrire-card-word .py { font-size: 20px; color: var(--red); }
.ecrire-card-word .fr { font-size: 15px; color: var(--body2); }
.atelier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.atelier-left { display: flex; flex-direction: column; gap: 14px; }
.atelier-box { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; background: var(--card); border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(60,40,10,.3); }
.atelier-grid { position: absolute; inset: 0; background: linear-gradient(#e2d9c6, #e2d9c6) center/1px 100% no-repeat, linear-gradient(#e2d9c6, #e2d9c6) center/100% 1px no-repeat, linear-gradient(45deg, transparent calc(50% - .5px), #ece5d6 calc(50% - .5px), #ece5d6 calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), #ece5d6 calc(50% - .5px), #ece5d6 calc(50% + .5px), transparent calc(50% + .5px)); }
.atelier-status { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 520px; font-size: 15px; min-height: 22px; }
.atelier-status .st { color: var(--body2); }
.atelier-status .ct { color: var(--muted); }
.atelier-right { display: flex; flex-direction: column; gap: 28px; }
.fams { display: flex; flex-wrap: wrap; gap: 6px; }
.mini { font-family: var(--sans); font-size: 14px; padding: 10px 14px; min-height: 44px; cursor: pointer; border-radius: 2px; border: 1px solid var(--chipline); background: transparent; color: var(--ink); }
.mini[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.mini.mode { padding: 10px 16px; }
.a-chars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.a-char { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; min-height: 72px; cursor: pointer; border-radius: 2px; border: 1px solid var(--chipline); background: transparent; color: var(--ink); }
.a-char[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.a-char .zh { font-size: 30px; line-height: 1.1; }
.a-char .py { font-size: 14px; }
.a-cur { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.a-cur .zh { font-size: 72px; line-height: 1; }
.a-cur-info { display: flex; flex-direction: column; gap: 4px; }
.a-cur-info .py { font-size: 26px; color: var(--red); }
.a-cur-info .fr { font-size: 17px; }
.a-cur-info .note { font-size: 13px; color: var(--muted); }
.a-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.a-btn { font-family: var(--sans); font-size: 15px; padding: 13px 20px; white-space: nowrap; cursor: pointer; border-radius: 2px; border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.a-btn:hover { background: #ebe4d5; }
.a-btn.ink { background: var(--ink); color: var(--bg); }
.a-btn.ink:hover { background: var(--red); border-color: var(--red); }
.a-btn.red { background: var(--red); border-color: var(--red); color: var(--bg); }
.a-btn.red:hover { background: var(--ink); border-color: var(--ink); }
.a-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.a-link { font-family: var(--sans); font-size: 14px; padding: 6px 0; cursor: pointer; background: transparent; border: 0; border-bottom: 1px solid var(--muted); color: var(--body2); }
.strip-wrap { margin-top: 56px; }
.strip-wrap .label { margin-bottom: 14px; }
.strip { display: flex; flex-wrap: wrap; gap: 8px; }
.strip-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.strip-item svg { background: var(--card); border: 1px solid var(--line); }
.strip-item span, .strip-loading { font-size: 12px; color: var(--muted); }
.dark .rules-h { max-width: 720px; margin: 0 0 56px; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.rule { border-top: 1px solid var(--d-btn); padding-top: 20px; }
.rule .zh { font-size: 64px; line-height: 1.1; margin-bottom: 16px; }
.rule-t { font-size: 17px; font-weight: 500; margin-bottom: 6px; }
.rule-d { font-size: 15px; line-height: 1.55; color: var(--d-text); }
.lire-sec { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--pad-x); }
.modes { display: flex; gap: 6px; }
.lire { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.lire-card { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; }
.lire-card-grid { position: absolute; inset: 0; background: linear-gradient(#ece5d6, #ece5d6) center/1px 100% no-repeat, linear-gradient(#ece5d6, #ece5d6) center/100% 1px no-repeat; }
.lire-char { position: relative; font-family: var(--zh); font-size: clamp(140px, 18vw, 220px); line-height: 1; }
.lire-n, .lire-score { position: absolute; top: 16px; font-size: 13px; color: var(--muted); }
.lire-n { left: 18px; }
.lire-score { right: 18px; }
.lire-right { display: flex; flex-direction: column; gap: 20px; }
.lire-prompt { font-family: var(--serif); font-size: 28px; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; font-family: var(--sans); font-size: 20px; padding: 18px; min-height: 64px; cursor: pointer; border-radius: 2px; border: 1px solid var(--chipline); background: transparent; color: var(--ink); }
.choice.py-mode { font-family: var(--serif); font-style: italic; }
.choice .tag { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.choice.right { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.choice.wrong { border-color: var(--red); color: var(--red); }
.lire-fb { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
.lire-fb span { font-size: 16px; line-height: 1.5; color: var(--body2); max-width: 420px; }

/* Pages simples (absentes de la maquette, mêmes jetons) */
.prose { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--pad-x) clamp(80px, 10vw, 140px); position: relative; }
.prose h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 28px; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 40px 0 12px; }
.prose p, .prose li { font-size: 17px; line-height: 1.65; color: var(--body2); }
.prose a { border-bottom: 1px solid var(--ink); }

/* Liberté (maquette desktop) : deux listes par ligne aussi sur téléphone, pour rester compact en hauteur */
@media (max-width: 520px) {
  .b-selects { gap: 14px 10px; }
  .b-select { min-height: 52px; padding: 6px 30px 6px 10px; font-size: 16px; background-position: right 10px center; }
}

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

/* En-tête des pages du menu (absent de la maquette : reprend le texte du héros, sans visuel) */
.page-head { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--pad-x) clamp(56px, 7vw, 96px); }
.page-head .hero-lead { max-width: 640px; margin-bottom: 0; }
.page-head .h1 { max-width: 900px; }

/* Comptes (/compte) — écrans absents de la maquette : mêmes jetons, formulaires « libellé devant le champ » (charte §23) */
.acc-wrap { position: relative; max-width: 620px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--pad-x) clamp(64px, 8vw, 110px); }
.acc-page { position: relative; max-width: 1240px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) var(--pad-x) clamp(64px, 8vw, 110px); }
.acc-card { position: relative; background: var(--card); border: 1px solid var(--line); padding: clamp(22px, 3.5vw, 40px); box-shadow: 0 30px 60px -40px rgba(60,40,10,.3); min-width: 0; }
.acc-title { font-family: var(--serif); font-weight: 300; font-size: clamp(34px, 4.5vw, 48px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 14px; }
.acc-h1 { font-size: clamp(38px, 5.4vw, 68px); margin-bottom: 20px; }
.acc-h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0 0 16px; }
.acc-lede { font-size: 16px; line-height: 1.6; color: var(--body2); margin: 0 0 20px; }
.acc-note { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.acc-note a, .acc-lede a { border-bottom: 1px solid currentColor; }
.acc-form { display: grid; gap: 10px; }
.acc-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.acc-row > label { font-size: 14px; color: var(--body2); }
.acc-opt { color: var(--muted); font-size: 12px; }
.acc-row input[type=text], .acc-row input[type=email], .acc-row input[type=password], .acc-row input:not([type]) { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--chipline); border-radius: 2px; background: #fff; color: var(--ink); font: 16px var(--sans); }
.acc-row input:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; border-color: var(--ink); }
.acc-row-check { align-items: start; }
.acc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--body2); cursor: pointer; }
.acc-check input, .acc-checks input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--red); flex: none; }
.acc-submit, .acc-btn { justify-self: start; min-height: 48px; padding: 14px 26px; border: 1px solid var(--red); border-radius: 2px; background: var(--red); color: var(--bg); font: 16px var(--sans); cursor: pointer; margin-top: 8px; }
.acc-submit:hover, .acc-btn:hover { background: var(--ink); border-color: var(--ink); }
.acc-btn { font-size: 15px; padding: 12px 20px; background: var(--ink); border-color: var(--ink); }
.acc-btn:hover { background: var(--red); border-color: var(--red); }
.acc-btn-danger { background: var(--red); border-color: var(--red); }
.acc-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.acc-links a { color: var(--body2); border-bottom: 1px solid var(--chipline); }
.acc-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 18px 0 0; }
.acc-alert { margin: 0 0 18px; padding: 12px 14px; font-size: 15px; line-height: 1.5; border: 1px solid var(--line); border-left-width: 3px; background: var(--bg); }
.acc-ok { border-left-color: #3d7a4a; }
.acc-err { border-color: var(--red); color: #8f2c1b; }
.acc-info { border-left-color: var(--muted); }
.acc-sr, .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.acc-tabs { display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.acc-tabs a[aria-current="page"] { color: var(--red); border-bottom: 1px solid var(--red); }
.acc-logout { background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 4px 0; font: 15px var(--sans); color: var(--ink); cursor: pointer; }
.acc-logout:hover { color: var(--red); border-color: var(--red); }
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(16px, 2.5vw, 28px); align-items: start; margin-top: 32px; }
.acc-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.acc-tile p { margin: 10px 0 14px; font-size: 15px; line-height: 1.55; color: var(--body2); }
.acc-big { font-family: var(--serif); font-size: 44px !important; line-height: 1 !important; color: var(--ink) !important; margin: 14px 0 8px !important; }
.acc-big small { font-size: 17px; color: var(--muted); font-family: var(--sans); }
.acc-danger { border-color: #d9b3aa; }
.acc-danger summary { cursor: pointer; color: var(--red); margin-bottom: 14px; }
.acc-onboarding { display: grid; gap: 26px; max-width: 760px; margin-top: 28px; }
.acc-onboarding-sm { margin-top: 0; gap: 20px; }
.acc-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.acc-choice legend { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 10px; }
.acc-options { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-option input { position: absolute; opacity: 0; pointer-events: none; }
.acc-option span { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 16px; border: 1px solid var(--chipline); border-radius: 2px; font-size: 15px; cursor: pointer; background: transparent; }
.acc-option-sm span { min-width: 72px; justify-content: center; }
.acc-option input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.acc-option input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.acc-checks { display: grid; gap: 10px; }
.acc-checks label { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.acc-checks .zh { font-size: 18px; }
.acc-checks .py { color: var(--red); }
@media (max-width: 520px) {
  .acc-row { grid-template-columns: 88px minmax(0, 1fr); gap: 4px 8px; }
  .acc-row > label { font-size: 13px; }
  .acc-row-check > span:first-child { display: none; }
  .acc-row-check > .acc-check { grid-column: 1 / -1; }
}

/* Champ mot de passe + puzzle anti-robot (repris de sditech, aux couleurs du site) */
.pw-field { position: relative; }
.pw-field input { padding-right: 50px !important; }
.pw-toggle { position: absolute; top: 1px; bottom: 1px; right: 1px; width: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.pw-toggle[hidden] { display: none; }
.pw-toggle:hover { color: var(--ink); }
.pw-toggle svg { width: 20px; height: 20px; }
.pw-toggle .pw-ico-hide, .pw-toggle.is-shown .pw-ico-show { display: none; }
.pw-toggle.is-shown .pw-ico-hide { display: block; }
.pw-field input::-ms-reveal { display: none; }
.pw-match-msg { margin: 6px 0 0; font-size: 13px; color: #8f2c1b; }
.slcap { margin: 8px 0 6px; }
.slcap [hidden] { display: none !important; }
.slcap-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.slcap-stage { position: relative; width: 100%; aspect-ratio: 2/1; overflow: hidden; background: #e9e2d3; border: 1px solid var(--line); user-select: none; -webkit-user-select: none; }
.slcap-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
.slcap-piece { position: absolute; left: 0; top: 0; width: 17.35%; height: auto; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.slcap-refresh { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(29,27,24,.7); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slcap-refresh svg { width: 17px; height: 17px; }
.slcap-track { position: relative; height: 48px; margin-top: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--chipline); }
.slcap-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(178,58,38,.12); }
.slcap-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 56px; font-size: 13px; color: var(--muted); pointer-events: none; }
.slcap-handle { position: absolute; top: 0; left: 0; height: 100%; width: 59px; min-width: 44px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); cursor: grab; touch-action: none; }
.slcap-handle:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
.slcap-handle svg { width: 22px; height: 22px; }
.slcap-handle .slcap-ico-check { display: none; }
.slcap.is-dragging .slcap-handle { cursor: grabbing; }
.slcap.is-busy .slcap-handle { opacity: .7; }
.slcap-status { min-height: 1.25em; margin: 7px 0 0; font-size: 13px; color: var(--muted); }
.slcap-status.is-error { color: #8f2c1b; }
.slcap.is-solved .slcap-track { border-color: #3d7a4a; }
.slcap.is-solved .slcap-fill { background: rgba(61,122,74,.18); }
.slcap.is-solved .slcap-hint { visibility: hidden; }
.slcap.is-solved .slcap-handle { background: #3d7a4a; cursor: default; }
.slcap.is-solved .slcap-handle .slcap-ico-arrow { display: none; }
.slcap.is-solved .slcap-handle .slcap-ico-check { display: block; }
.slcap.is-solved .slcap-status { color: #2f6139; font-weight: 600; }
.slcap.is-error .slcap-track { border-color: var(--red); animation: slcap-shake .45s ease; }
.slcap-alt { margin: 10px 0 0; grid-template-columns: 1fr; }
.slcap-switch { margin-top: 6px; padding: 0; border: 0; background: none; font: 13px var(--sans); color: var(--muted); text-decoration: underline; cursor: pointer; }
.slcap-done { margin: 6px 0; font-size: 14px; font-weight: 600; color: #2f6139; }
.slcap-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes slcap-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .slcap.is-error .slcap-track { animation: none; } }

/* Thème de chaque langue (maquette « Accueil v4 », objet theme de LANGS) */
.lang-zh { --chipline: #d8cfbd; --bg: #f3eee3; --card: #faf7f0; --ink: #1d1b18; --body2: #4a443c; --muted: #6b6358; --line: #d8cfbd; --red: #b23a26; --accent-ink: #f7f2e8; --dark: #1d1b18; --dark-text: #f3eee3; --d-line: #3d3832; --d-btn: #3d3832; --salmon: #e58a72; --serif: 'Newsreader',serif; --zh: 'Noto Serif SC',serif; --sans: 'Work Sans',sans-serif; --motif-radius: 50%; --motif-transform: none; --motif-bg: #b23a26; --tile-size: clamp(34px,4.6vw,56px); --seg-size: clamp(30px,3.8vw,44px); }
.lang-ru { --chipline: #cfd6e2; --bg: #eef1f5; --card: #fbfcfd; --ink: #14203a; --body2: #3b4660; --muted: #5d6880; --line: #cfd6e2; --red: #2546a8; --accent-ink: #fbfcfd; --dark: #14203a; --dark-text: #eef1f5; --d-line: #2e3b5c; --d-btn: #2e3b5c; --salmon: #a9bcff; --serif: 'PT Serif',serif; --zh: 'PT Serif',serif; --sans: 'PT Sans',sans-serif; --motif-radius: 0; --motif-transform: rotate(45deg) scale(.8); --motif-bg: #2546a8; --tile-size: clamp(20px,2.4vw,30px); --seg-size: clamp(22px,2.6vw,30px); }
.lang-it { --chipline: #ddcdb9; --bg: #f2e9dd; --card: #fbf6ef; --ink: #2b211b; --body2: #54463c; --muted: #776759; --line: #ddcdb9; --red: #a9522a; --accent-ink: #fbf6ef; --dark: #2b211b; --dark-text: #f2e9dd; --d-line: #4a3c32; --d-btn: #4a3c32; --salmon: #f0a277; --serif: 'Bodoni Moda',serif; --zh: 'Bodoni Moda',serif; --sans: 'Work Sans',sans-serif; --motif-radius: 999px 999px 0 0; --motif-transform: none; --motif-bg: #a9522a; --tile-size: clamp(20px,2.4vw,30px); --seg-size: clamp(22px,2.6vw,30px); }
.lang-es { --chipline: #d6d6c8; --bg: #f5f2ea; --card: #fffdf8; --ink: #1c2422; --body2: #3f4a47; --muted: #5f6b67; --line: #d6d6c8; --red: #1e6b63; --accent-ink: #fffdf8; --dark: #15302c; --dark-text: #f5f2ea; --d-line: #2d4a45; --d-btn: #2d4a45; --salmon: #f2c14e; --serif: 'DM Serif Display',serif; --zh: 'DM Serif Display',serif; --sans: 'Instrument Sans',sans-serif; --motif-radius: 0; --motif-transform: none; --motif-bg: repeating-conic-gradient(#1e6b63 0 25%, #f2c14e 0 50%) 0 0/50% 50%; --tile-size: clamp(20px,2.4vw,30px); --seg-size: clamp(22px,2.6vw,30px); }
.lang-en { --chipline: #dbd4cc; --bg: #f4f1ec; --card: #fdfbf8; --ink: #1d1a24; --body2: #433e4c; --muted: #67606f; --line: #dbd4cc; --red: #6b2d5c; --accent-ink: #fdfbf8; --dark: #221a29; --dark-text: #f4f1ec; --d-line: #3e3347; --d-btn: #3e3347; --salmon: #e2a6d2; --serif: 'Libre Caslon Text',serif; --zh: 'Libre Caslon Text',serif; --sans: 'Work Sans',sans-serif; --motif-radius: 50%; --motif-transform: none; --motif-bg: radial-gradient(circle, transparent 44%, #6b2d5c 45%); --tile-size: clamp(18px,2.2vw,28px); --seg-size: clamp(20px,2.4vw,28px); }
.lang-fr { --chipline: #d9d4ca; --bg: #f6f3ee; --card: #fffdf9; --ink: #1b2233; --body2: #3d4558; --muted: #5d6475; --line: #d9d4ca; --red: #2b4c9b; --accent-ink: #fffdf9; --dark: #1a2340; --dark-text: #f6f3ee; --d-line: #33406a; --d-btn: #33406a; --salmon: #f2b8ae; --serif: 'Cormorant Garamond',serif; --zh: 'Cormorant Garamond',serif; --sans: 'Jost',sans-serif; --motif-radius: 50%; --motif-transform: none; --motif-bg: linear-gradient(90deg, #2b4c9b 0 33%, #fffdf9 33% 66%, #c8473d 66%); --tile-size: clamp(18px,2.2vw,28px); --seg-size: clamp(20px,2.4vw,28px); }
.lang-ja { --chipline: #dbd4c8; --bg: #f5f1ea; --card: #fffcf7; --ink: #1c1f2b; --body2: #41434f; --muted: #5e5f6b; --line: #dbd4c8; --red: #a8213f; --accent-ink: #fffcf7; --dark: #1b2238; --dark-text: #f5f1ea; --d-line: #323c5c; --d-btn: #323c5c; --salmon: #f3b0bc; --serif: 'Noto Serif JP',serif; --zh: 'Noto Serif JP',serif; --sans: 'Jost',sans-serif; --motif-radius: 50%; --motif-transform: none; --motif-bg: #a8213f; --tile-size: clamp(20px,2.4vw,30px); --seg-size: clamp(22px,2.6vw,32px); }
.lang-ko { --chipline: #d3dbd2; --bg: #eef2ec; --card: #fbfcf9; --ink: #1b2420; --body2: #3a4640; --muted: #59645d; --line: #d3dbd2; --red: #3d6b47; --accent-ink: #fbfcf9; --dark: #17231d; --dark-text: #eef2ec; --d-line: #2f4237; --d-btn: #2f4237; --salmon: #a8d8b9; --serif: 'Noto Serif KR',serif; --zh: 'Noto Serif KR',serif; --sans: 'Jost',sans-serif; --motif-radius: 50%; --motif-transform: rotate(-34deg); --motif-bg: linear-gradient(180deg, #c8323c 0 50%, #1f4e8c 50%); --tile-size: clamp(20px,2.4vw,30px); --seg-size: clamp(22px,2.6vw,30px); }
.lang-vi { --chipline: #ddd3bf; --bg: #f5f0e4; --card: #fffcf4; --ink: #22201a; --body2: #4a4436; --muted: #665e4e; --line: #ddd3bf; --red: #8f1d21; --accent-ink: #fffcf4; --dark: #1f2a20; --dark-text: #f5f0e4; --d-line: #3a4a3b; --d-btn: #3a4a3b; --salmon: #e9c46a; --serif: 'Playfair Display',serif; --zh: 'Playfair Display',serif; --sans: 'Montserrat',sans-serif; --motif-radius: 50%; --motif-transform: none; --motif-bg: radial-gradient(circle, #e9c46a 0 28%, #8f1d21 29%); --tile-size: clamp(18px,2.2vw,28px); --seg-size: clamp(20px,2.4vw,28px); }
.lang-yue { --chipline: #d9d3d0; --bg: #f4f1ee; --card: #fdfbfa; --ink: #1a1b22; --body2: #40414c; --muted: #5f5f6b; --line: #d9d3d0; --red: #9c1470; --accent-ink: #fdfbfa; --dark: #161a24; --dark-text: #f4f1ee; --d-line: #30364a; --d-btn: #30364a; --salmon: #f59ac5; --serif: 'Noto Serif HK',serif; --zh: 'Noto Serif HK',serif; --sans: 'Jost',sans-serif; --motif-radius: 6px; --motif-transform: none; --motif-bg: radial-gradient(circle, #f59ac5 0 24%, #9c1470 25%); --tile-size: clamp(20px,2.4vw,30px); --seg-size: clamp(22px,2.6vw,32px); }
.lang-nan { --chipline: #dcd3c2; --bg: #f5f1e8; --card: #fdfaf3; --ink: #1f1b14; --body2: #463f33; --muted: #655c4d; --line: #dcd3c2; --red: #86590a; --accent-ink: #fdfaf3; --dark: #1e2420; --dark-text: #f5f1e8; --d-line: #36403a; --d-btn: #36403a; --salmon: #f0cf7a; --serif: 'Noto Serif HK',serif; --zh: 'Noto Serif HK',serif; --sans: 'Jost',sans-serif; --motif-radius: 50%; --motif-transform: rotate(45deg); --motif-bg: linear-gradient(90deg, #86590a 0 50%, #2f5d50 50%); --tile-size: clamp(20px,2.4vw,30px); --seg-size: clamp(22px,2.6vw,32px); }

/* Barre « J'apprends » (maquette v4) */
.langbar { position: relative; background: var(--dark); color: var(--dark-text); }
.langbar-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); flex-wrap: wrap; min-height: 48px; }
.langbar-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.langbar-list { display: flex; gap: 4px; flex-wrap: wrap; }
.langbar a { display: flex; align-items: baseline; gap: 8px; padding: 13px 14px 11px; min-height: 48px; border-bottom: 2px solid transparent; color: inherit; opacity: .7; font-size: 16px; }
.langbar a:hover { opacity: 1; color: inherit; }
.langbar a[aria-current="true"] { border-bottom-color: var(--dark-text); opacity: 1; }
.langbar small { font-family: 'Work Sans', sans-serif; font-size: 12px; opacity: .75; }
.langbar .f-zh { font-family: 'Newsreader', serif; } .langbar .f-ru { font-family: 'PT Serif', serif; } .langbar .f-it { font-family: 'Bodoni Moda', serif; }
.langbar .f-es { font-family: 'DM Serif Display', serif; } .langbar .f-en { font-family: 'Libre Caslon Text', serif; } .langbar .f-fr { font-family: 'Cormorant Garamond', serif; font-size: 18px; }
/* Neuf langues étudiées (2026-10-31) : noms dans la langue de l'interface (demande de l'utilisateur), nom d'origine en infobulle. */
.langbar .langbar-list a[class] { padding-left: 11px; padding-right: 11px; font-family: var(--sans); font-size: 17px; font-weight: 400; }
/* Quand la ligne des langues ne tient plus (10 langues ; noms russes longs), liste déroulante comme sur téléphone. */
@media (max-width: 1439px) { .langbar .langbar-learn > .langbar-label, .langbar .langbar-list { display: none; } .langbar .langbar-pick { display: block; } .langbar .langbar-pick .langbar-label { display: inline; } }
@media (max-width: 1699px) { .ui-ru .langbar .langbar-learn > .langbar-label, .ui-ru .langbar .langbar-list { display: none; } .ui-ru .langbar .langbar-pick { display: block; } .ui-ru .langbar .langbar-pick .langbar-label { display: inline; } }
@media (max-width: 1599px) { .langbar .langbar-list a[class] { font-size: 16px; padding-left: 8px; padding-right: 8px; } }
@media (max-width: 1365px) { .langbar .langbar-list a[class] { font-size: 15px; padding-left: 6px; padding-right: 6px; } }
.langbar .f-ja { font-family: 'Noto Serif JP', serif; font-size: 15px; } .langbar .f-ko { font-family: 'Noto Serif KR', serif; font-size: 15px; } .langbar .f-vi { font-family: 'Playfair Display', serif; } .langbar .f-yue { font-family: 'Noto Serif HK', serif; font-size: 15px; }
/* « J'apprends » sur téléphone : liste déroulante (masquée au-delà de 640 px, où la ligne de langues suffit) */
.langbar-pick { display: none; position: relative; }
.langbar-pick summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; cursor: pointer; list-style: none; font-size: 16px; }
.langbar-pick summary::-webkit-details-marker { display: none; }
.langbar-pick summary::after { content: '▾'; font-size: 12px; opacity: .7; }
.langbar-pick[open] summary::after { content: '▴'; }
.langbar-pick-list { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 220px; padding: 6px 0; background: var(--dark); border: 1px solid var(--d-line); box-shadow: 0 18px 40px -20px rgba(0,0,0,.5); }
.langbar .langbar-pick-list a { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 11px 18px; border: 0; font-size: 17px; opacity: .85; }
.langbar .langbar-pick-list a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.langbar .langbar-pick-list small { display: inline; font-family: var(--sans); font-size: 15px; opacity: .9; }
/* « Je parle » : langue de l'interface, menu repliable à droite de la barre (details/summary : sans JavaScript) */
.langbar-in { justify-content: space-between; }
.langbar-learn { display: flex; align-items: center; gap: clamp(12px, 3vw, 32px); min-width: 0; }
.langbar-ui { position: relative; flex: none; }
.langbar-ui summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px; cursor: pointer; list-style: none; font-size: 15px; }
.langbar-ui summary::-webkit-details-marker { display: none; }
.langbar-ui summary::after { content: '▾'; font-size: 12px; opacity: .7; }
.langbar-ui[open] summary::after { content: '▴'; }
.langbar-ui nav { position: absolute; right: 0; top: 100%; z-index: 30; min-width: 180px; padding: 6px 0; background: var(--dark); border: 1px solid var(--d-line); box-shadow: 0 18px 40px -20px rgba(0,0,0,.5); }
.langbar .langbar-ui nav a { display: block; min-height: 44px; padding: 11px 18px; border: 0; font-size: 15px; opacity: .8; }
.langbar .langbar-ui nav a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
/* Lecture : échantillons du bandeau sombre et cartes de sons (langues européennes) */
.samples { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.sample { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px; border: 1px solid var(--d-line); }
.sample .zh { font-size: 40px; line-height: 1; }
.sample .py { font-size: 15px; color: var(--salmon); }
.sample small { font-size: 13px; opacity: .7; }
.d-cta { display: inline-block; font-size: 15px; padding: 14px 22px; border-radius: 2px; background: var(--dark-text); color: var(--dark) !important; }
.d-cta:hover { background: var(--red); color: var(--accent-ink) !important; }
.snd-card { display: flex; flex-direction: column; gap: 24px; background: var(--card); border: 1px solid var(--line); padding: clamp(24px, 4vw, 44px); box-shadow: 0 30px 60px -36px rgba(20,20,30,.3); }
.snd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.snd-h { font-family: var(--zh); font-size: clamp(80px, 11vw, 140px); line-height: .9; }
.snd-son { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.snd-son small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.snd-son .py { font-size: 28px; color: var(--red); }
.snd-d { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body2); text-wrap: pretty; }
.snd-ex { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.snd-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.snd-row-w { display: flex; flex-direction: column; gap: 2px; }
.snd-row-w .zh { font-size: 28px; }
.snd-row-w .py { font-size: 16px; color: var(--red); }
.snd-row-w span span { font-size: 15px; color: var(--body2); }
.snd-row-l { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.snd-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn-line { font-family: var(--sans); font-size: 14px; padding: 11px 16px; min-height: 44px; white-space: nowrap; cursor: pointer; border-radius: 2px; border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--bg); }
.snd-right { display: flex; flex-direction: column; gap: 24px; }
.snd-note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body2); }
.snd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.snd-c { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; min-height: 88px; cursor: pointer; border-radius: 2px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.snd-c[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.snd-c .zh { font-size: 30px; line-height: 1.1; }
.snd-c .py { font-size: 14px; }
.snd-audio { font-size: 13px; color: var(--muted); min-height: 1em; }
.lire-card.eu { padding: 24px; }
.lire-char.eu { font-size: var(--quiz-size, clamp(48px, 7vw, 84px)); text-align: center; overflow-wrap: anywhere; }
.lire-listen { position: absolute; bottom: 16px; right: 16px; display: flex; gap: 6px; }
.lire-listen button { font-family: var(--sans); font-size: 13px; padding: 9px 14px; min-height: 40px; cursor: pointer; border-radius: 2px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.lire-listen button:hover { border-color: var(--ink); }
.ecrire-word { position: relative; font-family: var(--zh); font-size: clamp(72px, 9vw, 120px); line-height: 1; background: var(--card); padding: 0 8px; }
.ecrire-card-grid.eu { display: grid; place-items: center; background: linear-gradient(var(--line), var(--line)) center/1px 100% no-repeat, linear-gradient(var(--line), var(--line)) center/100% 1px no-repeat; }
.dark .rules-h { max-width: 760px; }
.rule.eu .zh { font-size: var(--rule-size, 40px); }
.lang-en .rule.eu .zh { font-size: 36px; }
/* Liberté (maquette desktop) : sur téléphone, la barre des langues tient sur une ligne qui défile */
@media (max-width: 640px) {
  .langbar-in { flex-wrap: nowrap; gap: 8px; padding-right: 0; height: 64px; }
  /* Agencement fixe : boutons du compte toujours sous le nom (sinon leur place dépend de la largeur de la police, et la page saute
     de 50 px quand la vraie police remplace celle de secours). */
  .hd-actions { flex: 1 1 100%; }
  .langbar summary, .langbar-pick summary span { white-space: nowrap; }
  .langbar-label { display: none; }
  .langbar a.langbar-logo { padding: 6px 0; }
  .langbar-logo img { width: 52px; height: 52px; }
  .langbar-logo img.langbar-name { height: 26px; }
  .langbar a.langbar-logo { gap: 8px; }
  .langbar .langbar-pick .langbar-label { display: none; }
  .langbar-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .langbar-list::-webkit-scrollbar { display: none; }
  .langbar a { padding: 13px 10px 11px; white-space: nowrap; }
  .langbar small { display: none; }
  .langbar-learn { flex: 1; }
  .langbar-ui summary { padding: 0 12px 0 8px; font-size: 14px; }
}
/* Polices à empattements japonaise, coréenne et cantonaise (fonts-{ja,ko,yue}.css) en font-display: optional : 470 à 550 Ko de
   morceaux de caractères par page ; à la première visite la police du système s'affiche sans attente ni recomposition, la police
   du site (mise en cache) aux suivantes. Texte courant de ces langues en Jost (latin, cyrillique). */
/* Filigranes (.hero-ghost, .dark-ghost) en police du système : à 4,5 % d'opacité la différence ne se voit pas, et le plus gros élément
   de la page n'attend plus un fichier de police chinois ou japonais (affichage principal à 5 s sur mobile pour le cantonais). */
/* Le nom « <Langue> par construction » reste sur une ligne : sinon il s'affiche sur deux lignes dans la police de secours puis
   revient sur une seule à l'arrivée de la vraie police, et toute la page remonte (décalage mesuré à 0,23 sur mobile). */
.brand { min-width: 0; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Écart à la maquette : hors mandarin, un mot de la carte du héros se réduit à la largeur de sa case au lieu d'être
   coupé en deux (« Vorre / i » en italien). Le mandarin, un caractère par case, garde sa taille. */
body:not(.lang-zh) .tile { container-type: inline-size; }
body:not(.lang-zh) .tile-zh { font-size: min(var(--tile-size), 30cqi); overflow-wrap: normal; }
/* Japonais : pas d'espaces entre les mots, la case se couperait entre deux kana (たいで / す) ; on réduit plutôt la taille. */
.lang-ja .tile-zh, .lang-yue .tile-zh, .lang-nan .tile-zh { white-space: nowrap; font-size: min(var(--tile-size), 22cqi); }

/* Apprentissage (espace compte) : semaine 1, leçons, révisions, « Mes mots » */
.learn-week { grid-column: span 2; }
.learn-week-lead { margin: 4px 0 14px; color: var(--body2); }
.learn-lessons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.learn-lessons li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.learn-lessons li:last-child { border-bottom: 1px solid var(--line); }
.learn-n { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 14px; }
.learn-lessons li.is-done .learn-n { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.learn-t { display: flex; flex-direction: column; gap: 2px; font-size: 17px; }
.learn-t small { font-size: 13px; color: var(--muted); }
.learn-stage { margin-top: 28px; }
.learn-card { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.learn-progress { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.learn-q { margin: 0; font-size: 20px; outline: none; }
.learn-show { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.learn-big { font-size: clamp(54px, 9vw, 84px); line-height: 1.05; }
.learn-sentence { font-size: clamp(30px, 5vw, 44px); line-height: 1.2; }
.learn-gloss-big { font-size: 24px; }
.learn-gloss { color: var(--body2); }
.learn-audio { display: flex; gap: 8px; flex-wrap: wrap; }
.learn-audio-msg { margin: 0; font-size: 14px; color: var(--muted); }
.learn-audio-msg:empty { display: none; }
.learn-intro { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.learn-word { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); background: var(--bg); }
.learn-word-h { font-size: 44px; line-height: 1.1; }
.learn-choices .learn-choice-zh .zh { font-size: 30px; }
/* Phrases entières (transformer, répondre) : une par ligne, sans couper un mot de deux caractères en fin de ligne. */
.learn-choices.is-sentences { grid-template-columns: 1fr; }
.learn-choices.is-sentences .learn-choice-zh .zh { font-size: 24px; }
/* Langues européennes étudiées : police du texte, tailles réduites (mots plus longs que les caractères chinois). */
.zh.tl { font-family: var(--serif); }
.learn-big.tl { font-size: clamp(36px, 6vw, 54px); }
.learn-sentence.tl { font-size: clamp(24px, 4vw, 34px); }
.learn-word-h.tl { font-size: 30px; }
.learn-choices .learn-choice-zh .zh.tl { font-size: 22px; }
.learn-tile .zh.tl { font-size: 20px; }
.learn-langs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 22px; }
.learn-langs a { color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.learn-langs a.is-current { color: var(--ink); border-bottom-color: var(--red); }
.learn-answer, .learn-tiles { display: flex; flex-wrap: wrap; gap: 8px; min-height: 76px; padding: 10px; border: 1px dashed var(--line); }
.learn-answer.is-right { border-style: solid; border-color: #2e7d4f; }
.learn-answer.is-wrong { border-style: solid; border-color: var(--red); }
.learn-tiles { border: 0; padding: 0; min-height: 0; }
.learn-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; border-radius: 2px; }
.learn-tile .zh { font-size: 28px; line-height: 1.1; }
.learn-tile .py { font-size: 13px; }
.learn-tile.is-placed { background: var(--ink); color: var(--bg); }
.learn-fb { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-left: 3px solid #2e7d4f; background: var(--bg); }
.learn-fb.is-wrong { border-left-color: var(--red); }
.learn-fb p { margin: 0; }
.learn-solution { display: flex; flex-direction: column; gap: 4px; }
.words-table-wrap { overflow-x: auto; margin-top: 24px; }
.words-table { width: 100%; border-collapse: collapse; }
.words-table th { text-align: left; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.words-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.words-table .zh { font-size: 26px; margin-right: 8px; }
.words-audio { white-space: nowrap; }
.words-audio .mini + .mini { margin-left: 6px; }
.word-state { font-size: 13px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 12px; white-space: nowrap; }
.word-known { border-color: #2e7d4f; color: #2e7d4f; }
.word-learning { border-color: var(--ink); color: var(--ink); }
.word-again { border-color: var(--red); color: var(--red); }
@media (max-width: 900px) { .learn-week { grid-column: auto; } }
/* Pied de page : abonnement aux nouveautés (2026-10-30) */
.ft-nl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.legal-dl { display: grid; grid-template-columns: minmax(160px, 260px) 1fr; gap: 8px 16px; }
.legal-dl dt { color: var(--muted); }
.legal-dl dd { margin: 0; }
@media (max-width: 640px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dd { margin-bottom: 8px; } }

/* Pied de page compact, en ligne (demande de l'utilisateur, 2026-10-31) : crédit · liens légaux · nouveautés sur une ligne ;
   sur téléphone, trois lignes serrées (nouveautés, liens, crédit). */
.ft { position: relative; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.ft-in { max-width: 1240px; margin: 0 auto; padding: 18px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.ft-brand { margin: 0; white-space: nowrap; }
.ft-brand a { color: var(--ink); }
.ft-links { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.ft-links a, .ft-brand a { text-decoration: none; }
.ft-links a { color: var(--muted); }
.ft-links a:hover, .ft-brand a:hover { color: var(--red); }
.ft-nl { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.ft-nl label { color: var(--ink); white-space: nowrap; }
.ft-nl-row { display: flex; }
.ft-nl input[type=email] { width: 210px; padding: 7px 10px; border: 1px solid var(--line); border-right: 0; background: var(--card); color: var(--ink); font: inherit; border-radius: 2px 0 0 2px; }
.ft-nl button { padding: 7px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font: inherit; cursor: pointer; border-radius: 0 2px 2px 0; white-space: nowrap; }
.ft-nl button:hover { background: var(--red); border-color: var(--red); color: var(--accent-ink); }
.ft-nl-msg { flex-basis: 100%; margin: 0; color: var(--ink); }
@media (max-width: 900px) {
  .ft-in { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; padding-bottom: 20px; }
  .ft-nl { order: -1; }
  .ft-nl-row { flex: 1; }
  .ft-nl input[type=email] { flex: 1; width: auto; min-width: 0; }
  .ft-links { gap: 6px 18px; }
  .ft-brand { font-size: 12.5px; order: 2; }
}

/* Questions fréquentes (accueil de chaque langue) : sans JavaScript, details/summary */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--red); flex: none; }
.faq-item[open] summary::after { content: '−'; }
.faq-item h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 2vw, 23px); line-height: 1.35; }
.faq-item p { margin: 0 0 22px; max-width: 760px; font-size: 16px; line-height: 1.65; color: var(--body2); }

/* Constructeur : structures du mandarin (comptes connectés), listes construites d'après le moteur ; mention du vocabulaire */
.b-struct { grid-column: 1 / -1; }
.b-dyn { display: contents; }
.b-dyn[hidden], .b-group[hidden] { display: none; }
.b-member { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.b-member a { color: var(--red); }

/* « Chinois » : mandarin, cantonais, teochew dans un menu de la barre (ordinateur ; sur téléphone, la liste déroulante les montre à la suite) */
.langbar-group { position: relative; flex: none; }
.langbar-group summary { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 13px 8px 11px; cursor: pointer; list-style: none; opacity: .7;
  font-family: var(--sans); font-size: 17px; border-bottom: 2px solid transparent; }
.langbar-group summary::-webkit-details-marker { display: none; }
.langbar-group summary::after { content: '▾'; font-size: 11px; opacity: .8; }
.langbar-group[open] summary::after { content: '▴'; }
.langbar-group summary:hover, .langbar-group[open] summary { opacity: 1; }
.langbar-group summary[aria-current="true"] { opacity: 1; border-bottom-color: var(--dark-text); }
.langbar-group-list { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 220px; padding: 6px 0; background: var(--dark); border: 1px solid var(--d-line); box-shadow: 0 18px 40px -20px rgba(0,0,0,.5); }
.langbar .langbar-group-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; min-height: 44px; padding: 11px 18px; border: 0; font-family: var(--sans); font-size: 16px; opacity: .85; }
.langbar .langbar-group-list a[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.langbar .langbar-group-list small { display: inline; font-size: 14px; opacity: .8; }
@media (max-width: 1599px) { .langbar-group summary { font-size: 16px; } }
@media (max-width: 1365px) { .langbar-group summary { font-size: 15px; } }

/* Carte « où parle-t-on la langue » (views/lang/map.php) */
.map-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 28px; align-items: start; }
.map-fig { margin: 0; background: var(--card); border: 1px solid var(--line); }
.map-fig svg { display: block; width: 100%; height: auto; }
.map-land { fill: var(--line); stroke: var(--bg); stroke-width: .3; }
.map-zoom { fill: none; stroke: var(--red); stroke-width: 1.2; stroke-dasharray: 4 3; }
.map-dot { fill: var(--red); stroke: var(--card); }
.map-dot.map-d { fill: var(--card); stroke: var(--red); }
.map-grid.is-single { grid-template-columns: 1fr; }
.map-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: -1px; }
.map-key-o { background: var(--red); }
.map-key-d { border: 2px solid var(--red); }
.map-halo { fill: var(--red); opacity: .2; }
.map-n { fill: var(--ink); font-family: var(--sans); font-weight: 600; }
.map-legend { grid-column: 1 / -1; columns: 2; column-gap: 32px; margin: 4px 0 0; padding-left: 22px; font-size: 15px; line-height: 1.55; color: var(--body2); }
.map-legend li { break-inside: avoid; margin-bottom: 6px; }
.map-legend li.is-home strong { color: var(--red); }
.map-legend li.is-d { color: var(--muted); }
.map-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 800px) { .map-grid { grid-template-columns: 1fr; } .map-legend { columns: 1; } }