/* lisaro.ch : direction « Passage » (maquette choisie par le porteur).
   Brume, sapin, un seul accent violet porté par la transformation et l'action. Syne pour la marque
   et les titres, Instrument Serif pour les phrases du rapport, Onest pour lire et agir, Space Mono
   pour les données techniques. Polices servies par le site, aucun fichier venu d'ailleurs.
   Sans JavaScript (html sans la classe .js), tout le contenu reste lisible : seules les commandes
   qui en dépendent sont masquées. */

@font-face {
  font-family: Onest;
  src: url("/polices/onest.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Syne;
  src: url("/polices/syne.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/polices/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/polices/space-mono.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #e3eee9;
  --ink: #143f37;
  --accent: #7548d9;
  --line: #b8cfc5;
  --white: #fbfdfb;
  --mist: #f6faf7;
  --rule: #d7e3db;
  --violet-pale: #eee8fb;
  --raw: #45695d; /* 5,1:1 sur la brume */
  --good: #23735b;
  --note: #87652d;
  --display: Syne, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --sans: Onest, Arial, sans-serif;
}

/* --- Base --------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 115px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.65 var(--sans); }
::selection { background: var(--accent); color: #fff; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
a { color: inherit; text-underline-offset: 5px; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { max-width: 68ch; }
ul { margin: 0; padding: 0; }
pre { margin: 0; }
svg.icone { width: 1em; height: 1em; flex: none; }
:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 5px; }
.wrap { width: min(1360px, calc(100% - 112px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 20px; top: -100px; padding: 12px; background: #fff; color: var(--ink); z-index: 1000; }
.skip:focus { top: 12px; }

/* --- En-tête -------------------------------------------------------------------------------- */

.header-shell { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid #b8cfc544; }
.site-header { height: 85px; display: flex; gap: 24px; align-items: center; justify-content: space-between; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 700 29px/1 var(--display); letter-spacing: -.07em; }
.brand-sign { width: 29px; height: 29px; display: grid; place-content: center; background: var(--accent); color: #fff; font: 700 19px/1 var(--display); border-radius: 50%; letter-spacing: -.12em; padding-right: 2px; flex: none; }
.brand-note { font: 400 12px/1.3 var(--sans); letter-spacing: 0; margin-left: 15px; }
.site-header nav { display: flex; gap: 28px; align-items: center; margin-left: auto; font-size: 14px; }
.site-header nav a { text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }
.motion-toggle { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-content: center; flex: none; font-size: 15px; }
.motion-toggle .icone-lecture, .motion-toggle[aria-pressed="true"] .icone-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icone-lecture { display: block; }

/* --- Commandes communes ------------------------------------------------------------------- */

.button { min-height: 50px; padding: 15px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 23px; background: var(--accent); color: var(--on-accent, #fff); text-decoration: none; font-size: 13px; font-weight: 600; border: 1px solid transparent; line-height: 1.4; text-align: center; }
.button:hover { filter: brightness(.93); }
.small-button { min-height: 43px; padding: 12px 16px; font-size: 13px; }
.small-note { font-size: 13px; line-height: 1.6; opacity: .85; }
.section-title { font: 600 clamp(36px, 4.5vw, 67px)/1.07 var(--display); letter-spacing: -.055em; max-width: 15ch; }
.section-intro { font-size: 15px; max-width: 45ch; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 45px; }
.status { font-size: 12px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status.alert { color: var(--accent); }
.status.note { color: var(--note); }
.status.ok { color: var(--good); }
.text-link { font-size: 14px; font-weight: 600; }

/* --- Ouverture : la scène ------------------------------------------------------------------ */

.hero { padding-top: 24px; padding-bottom: 24px; }
.hero-heading { text-align: center; }
.hero h1 { margin: 0 0 23px; font-weight: 400; }
.hero-surtitre { display: block; font: 400 14px/1.65 var(--sans); letter-spacing: 0; max-width: 68ch; margin: 0 auto 12px; }
.hero-titre { display: block; font: 650 clamp(65px, 8.6vw, 130px)/1 var(--display); letter-spacing: -.07em; }
.hero-heading > p:last-child { font-size: 15px; margin: auto; line-height: 1.7; }
.translation-scene { position: relative; isolation: isolate; display: grid; grid-template-columns: .9fr .6fr 1.3fr; gap: 35px; align-items: center; min-height: 340px; padding: 30px 0; }
.translation-scene > canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.scene-label { font-size: 12px; display: flex; align-items: center; gap: 15px; justify-content: space-between; margin-bottom: 25px; }
.raw pre { font: 700 clamp(17px, 1.8vw, 27px)/1.7 var(--mono); letter-spacing: -.05em; white-space: pre-wrap; color: var(--raw); margin: 28px 0; min-height: 95px; overflow-wrap: anywhere; }
.raw small { font-size: 12px; color: var(--raw); }
.membrane { position: relative; width: min(100%, 235px); aspect-ratio: 1; margin: auto; isolation: isolate; }
.membrane canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.membrane svg { position: relative; z-index: 0; width: 100%; height: 100%; filter: drop-shadow(9px 16px 0 #7548d910); }
.membrane.has-webgl svg { visibility: hidden; }
.membrane > span { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; font: 400 32px var(--serif); color: #fff; text-shadow: 0 1px 10px #4a209744; }
.human { min-height: 270px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 15px 0; }
.phrase { font: 400 clamp(35px, 3.95vw, 63px)/1.05 var(--serif); letter-spacing: -.018em; max-width: 19ch; min-height: 168px; text-wrap: pretty; }
.phrase.long-phrase { font-size: clamp(34px, 3.4vw, 54px); max-width: 23ch; }
.phrase-line { padding-bottom: .04em; }
.phrase-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; max-width: 530px; }
.phrase-actions > span { font-size: 12px; max-width: 30ch; line-height: 1.5; }
.topic-selector { display: flex; justify-content: center; padding: 7px; gap: 5px; max-width: 790px; margin: 0 auto; background: #f7fcf870; border: 1px solid #bdd3c8; border-radius: 60px; }
.topic-selector button { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; font-size: 13px; border-radius: 35px; }
.topic-selector button .icone { font-size: 22px; }
.topic-selector button[aria-pressed="true"] { background: var(--accent); color: #fff; box-shadow: 0 6px 17px #7548d925; }
.topic-selector button:hover:not([aria-pressed="true"]) { background: #c4dacf; }
.hero-foot { display: flex; gap: 35px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 27px 0; }
.etiquette { display: inline-block; font-weight: 600; border: 1px solid currentColor; border-radius: 20px; padding: 0 8px; line-height: 1.5; }
.scene-sujet { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.fine { letter-spacing: 0; padding-left: .08em; }
.hero-assurance { font-size: 14px; line-height: 1.7; }
.hero-assurance > span { font-size: 12px; opacity: .8; }
.scroll-link { font-size: 13px; display: flex; align-items: center; gap: 30px; text-decoration: none; }
.scroll-link span { font-size: 25px; }

/* --- L'aperçu du rapport, trois vues --------------------------------------------------------- */

.report-section { padding: 75px 0 90px; background: var(--mist); overflow-x: hidden; overflow-x: clip; } /* la feuille inclinée ne déborde pas */
.report-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 75px; align-items: start; }
.report-intro { padding-top: 20px; }
.report-intro > .section-title { font-size: clamp(41px, 4vw, 62px); }
.report-intro > p { font-size: 16px; line-height: 1.7; max-width: 37ch; margin: 25px 0; }
.report-tour { margin: 35px 0; }
.report-tour p { display: grid; gap: 5px; padding: 17px 0; border-top: 1px solid #c9dcd0; }
.report-tour strong { font-weight: 600; font-size: 15px; }
.report-tour span { font-size: 14px; line-height: 1.7; max-width: 38ch; opacity: .85; }

.report-paper { background: #fff; border: 1px solid var(--rule); box-shadow: 0 25px 60px #143f3711; position: relative; transform-origin: 50% 80%; }
.report-paper::after { content: ""; position: absolute; right: -1px; top: -1px; width: 28px; height: 28px; background: linear-gradient(45deg, #d5e4dc 49%, var(--mist) 50%); border-left: 1px solid #c3d6cb; border-bottom: 1px solid #c3d6cb; }
.workbench { --report-body: 16px; --report-small: 13px; --report-label: 15px; padding: 27px 32px; min-height: 730px; scroll-margin-top: 110px; }
.paper-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--rule); padding: 0 0 20px; font-size: var(--report-small); line-height: 1.6; text-align: right; }
.paper-logo { font: 700 28px var(--display); letter-spacing: -.06em; }
.workbench-nav { display: flex; gap: 6px; padding-top: 20px; }
.workbench-nav button { flex: 1; font-size: 14px; line-height: 1.4; min-height: 52px; padding: 12px 8px; border-bottom: 2px solid var(--rule); white-space: nowrap; }
.workbench-nav button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.paper-title { padding: 28px 0 24px; }
.paper-title > p { font: 500 32px/1.15 var(--display); letter-spacing: -.045em; }
.paper-title > span { display: block; font-size: var(--report-small); line-height: 1.65; margin-top: 12px; opacity: .85; }
.transfer-slot { position: relative; }
.transfer-slot[data-slot="report"] { padding: 24px; background: var(--violet-pale); border-left: 3px solid var(--accent); margin-bottom: 12px; }
.transfer-phrase { font: 400 30px/1.2 var(--serif); color: var(--ink); max-width: 32ch; transform-origin: left top; }
.report-row { border-bottom: 1px solid var(--rule); padding: 22px 0; }
.report-row summary { list-style: none; cursor: pointer; display: block; }
.report-row summary::-webkit-details-marker { display: none; }
.row-head { display: flex; align-items: center; gap: 14px 20px; font-size: 17px; line-height: 1.4; font-weight: 600; min-height: 32px; }
.row-name { flex: 1; }
.row-head .status { font-weight: 400; font-size: 13px; }
.row-plus::before { content: "+"; font-size: 23px; font-weight: 400; display: block; width: 1ch; text-align: center; }
.report-row[open] .row-plus::before { content: "−"; }
.report-row[data-selected="true"] .row-name { color: var(--accent); }
.row-phrase { display: block; font-size: var(--report-body); line-height: 1.7; max-width: 65ch; margin-top: 12px; }
.row-detail { font-size: var(--report-body); line-height: 1.7; padding: 20px; margin-top: 18px; background: var(--mist); }
.row-detail p { max-width: 65ch; }
.row-detail p + p, .row-detail ul + p { margin-top: 13px; }
.row-detail strong { font-weight: 600; }
.seuils { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.seuils li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: baseline; }
.seuils .status { font-size: var(--report-small); }
.prepare-message { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 58px; padding: 23px 0 12px; font-size: var(--report-label); line-height: 1.5; font-weight: 600; text-align: left; color: var(--accent); }
.prepare-message > span { font-size: 23px; }
.workbench-bottom { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--rule); }
.change-pair { display: grid; grid-template-columns: 1fr 1fr; margin: 5px 0 23px; border: 1px solid var(--rule); }
.change-pair > div { padding: 25px 20px; }
.change-pair > div + div { background: var(--violet-pale); border-left: 1px solid var(--rule); }
.change-pair span { display: block; font-size: var(--report-small); line-height: 1.5; margin-bottom: 18px; }
.change-pair strong { font: 700 26px var(--mono); letter-spacing: -.04em; }
.change-pair p { font-size: var(--report-body); line-height: 1.65; margin-top: 15px; }
.renewal { padding: 22px; background: #f0f7f1; margin-bottom: 25px; }
.renewal .status { font-size: var(--report-small); }
.renewal p { font-size: var(--report-body); line-height: 1.7; margin-top: 13px; }
.transfer-slot[data-slot="changes"] { padding: 20px 0; border-top: 1px solid var(--rule); }
.transfer-slot[data-slot="changes"]:empty { display: none; }
.view-note { font-size: var(--report-small); line-height: 1.7; margin: 18px 0; max-width: 58ch; opacity: .85; }
.message-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 28px 0 20px; font-size: var(--report-label); line-height: 1.5; }
.message-heading > strong { font-size: var(--report-small); font-weight: 400; text-align: right; max-width: 28ch; }
.message-subject { font-size: var(--report-label); line-height: 1.6; padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.message-content { font-size: var(--report-body); line-height: 1.7; padding: 28px 0 15px; }
.message-content > p { margin: 0 0 20px; max-width: 60ch; }
.transfer-slot[data-slot="message"] { margin: 22px 0 26px; border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; }

/* --- Le fonctionnement --------------------------------------------------------------------- */

.method-section { padding: 75px 0 65px; }
.method-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; border-top: 1px solid var(--line); padding-top: 30px; }
.method-line h3 { font: 600 21px/1.3 var(--display); letter-spacing: -.025em; margin: 22px 0 12px; }
.method-line p { font-size: 15px; max-width: 34ch; }
.step-mark { width: 31px; height: 31px; border: 1px solid #143f3766; border-radius: 50%; display: grid; place-content: center; font-size: 13px; }
.method-signoff { display: flex; justify-content: space-between; gap: 25px; padding-top: 32px; margin-top: 38px; border-top: 1px solid var(--line); font-size: 14px; }

/* --- L'offre, le formulaire, les questions ------------------------------------------------- */

.offer-section { --line: #ffffff66; --ink: #fff; --paper: #7548d9; --accent: #e3eee9; --on-accent: #143f37; --focus: #e3eee9; background: #7548d9; color: #fff; padding: 75px 0 60px; }
.offer-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 120px; align-items: start; }
.offer-pre { font-size: 13px; font-weight: 400; opacity: .9; margin-bottom: 17px; }
.offer-copy h2 { font: 600 clamp(42px, 4.8vw, 72px)/1.03 var(--display); letter-spacing: -.06em; margin-bottom: 25px; max-width: 14ch; }
.offer-copy > p:not(.offer-pre) { font-size: 16px; }
.future-price { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 32px; max-width: 460px; }
.future-price > p:first-child { font-size: 13px; }
.future-price .small-note { max-width: 52ch; }
.pricing-switch { display: inline-flex; border: 1px solid var(--line); padding: 4px; gap: 3px; margin: 15px 0 20px; }
.pricing-switch button { padding: 7px 15px; font-size: 13px; }
.pricing-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.price strong { font: 600 64px/1 var(--display); letter-spacing: -.06em; }
.price span { font-size: 14px; }
.form-panel { padding: 30px 0 0; }
.form-title { font: 500 29px/1.15 var(--display); letter-spacing: -.035em; margin-bottom: 30px; }
.register-form { display: grid; gap: 12px; }
.register-form label { font-size: 13px; }
.register-form input:not([type="hidden"]) { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; padding: 13px 0; border-radius: 0; outline-offset: 4px; min-height: 47px; font-size: 16px; }
.register-form input::placeholder { color: inherit; opacity: .6; }
.register-form .button { width: 100%; margin-top: 12px; justify-content: space-between; font-size: 14px; }
.register-form .etape { font-size: 13px; line-height: 1.6; opacity: .9; }
.form-info { font-size: 13px; line-height: 1.7; margin-top: 22px; opacity: .9; }
.offer-faq { margin-top: 45px; padding-top: 20px; }
.offer-faq > h2 { font-family: var(--sans); }
.faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.6; padding-right: 20px; }
.faq details p { font-size: 14px; padding-top: 14px; opacity: .92; }

/* --- Pied de page et bulle ----------------------------------------------------------------- */

.site-footer { display: flex; gap: 25px; align-items: center; justify-content: space-between; padding: 35px 0; font-size: 13px; }
.site-footer p { max-width: 62ch; }
.site-footer nav { display: flex; gap: 10px 22px; flex-wrap: wrap; }

/* --- Pages de lecture : guide, protection des données -------------------------------------- */

.page-lecture { padding: 60px 0 0; }
.lecture-cadre { max-width: 860px; }
.lecture-tete { padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.lecture-tete h1 { font: 600 clamp(38px, 5vw, 64px)/1.06 var(--display); letter-spacing: -.055em; margin-bottom: 22px; max-width: 18ch; }
.lecture-tete .chapeau { font: 400 clamp(22px, 2.3vw, 28px)/1.3 var(--serif); max-width: 40ch; }
.prose { font-size: 17px; line-height: 1.7; padding-bottom: 50px; }
.prose h2 { font: 600 24px/1.25 var(--display); letter-spacing: -.03em; margin: 38px 0 12px; }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 1.2em; display: grid; gap: 10px; }
.prose ul.sources { list-style: none; padding-left: 0; }
.prose a { text-decoration-thickness: 1px; }
.prose .reserve { margin-top: 30px; font-size: 15px; opacity: .85; }
.encart { margin: 0 0 50px; }
.encart .offer-copy h2 { font-size: clamp(32px, 3.4vw, 46px); max-width: 18ch; }
.encart .form-panel { padding-top: 10px; }

/* --- Sans JavaScript ----------------------------------------------------------------------- */

html:not(.js) .motion-toggle,
html:not(.js) .topic-selector,
html:not(.js) .workbench-nav,
html:not(.js) .prepare-message,
html:not(.js) .pricing-switch,
html:not(.js) .js-seulement,
html:not(.js) .transfer-slot[data-slot="report"] { display: none; }
html:not(.js) [data-panel="changes"][hidden] { display: block; border-top: 1px solid var(--rule); margin-top: 22px; }

/* --- Écrans moyens ------------------------------------------------------------------------- */

@media (min-width: 761px) {
  .translation-scene { height: 390px; }
}
@media (min-width: 1700px) {
  .wrap { width: min(1540px, calc(100% - 140px)); }
}
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 70px); }
  .brand-note { display: none; }
  .site-header { gap: 18px; }
  .site-header nav { gap: 20px; }
  .section-head { gap: 30px; }
  .translation-scene { gap: 22px; grid-template-columns: .85fr .55fr 1.25fr; min-height: 325px; }
  .phrase { font-size: 46px; }
  .raw pre { font-size: 20px; }
  .topic-selector button { padding: 10px 16px; }
  .hero-foot { gap: 20px; }
  .scroll-link { gap: 15px; }
  .report-layout { gap: 40px; grid-template-columns: .85fr 1.15fr; }
  .workbench { padding: 27px 25px; }
  .seuils li { grid-template-columns: 1fr; gap: 4px; }
  .offer-grid { gap: 65px; }
  .offer-copy h2 { font-size: 53px; }
  .method-line { gap: 30px; }
  .method-line h3 { font-size: 19px; }
  .faq { grid-template-columns: 1fr 1fr; }
}

/* --- Téléphones ---------------------------------------------------------------------------- */

@media (max-width: 760px) {
  html { scroll-padding-top: 95px; }
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 75px; gap: 12px; }
  .site-header nav { display: none; }
  .brand { font-size: 27px; }
  .site-header > .button { margin-left: auto; min-height: 40px; font-size: 12px; padding: 10px 13px; }
  .motion-toggle { width: 34px; height: 34px; }
  .button { font-size: 13px; padding: 14px 18px; min-height: 48px; }
  .section-head { display: block; margin-bottom: 28px; }
  .section-intro { margin-top: 20px; }
  .section-title { font-size: 40px; max-width: 16ch; }

  .hero { padding-top: 25px; padding-bottom: 0; }
  .hero-surtitre { font-size: 13px; max-width: 35ch; line-height: 1.6; }
  .hero h1 { margin-bottom: 18px; }
  .hero-titre { font-size: clamp(47px, 11.6vw, 82px); }
  .hero-heading > p:last-child { font-size: 14px; }
  .translation-scene { grid-template-columns: 1fr 120px; gap: 15px; padding: 25px 0 20px; min-height: 0; }
  .membrane { width: 120px; }
  .membrane > span { font-size: 23px; }
  .raw pre { font-size: 16px; min-height: 67px; margin: 12px 0; }
  .raw .scene-label { margin-bottom: 12px; max-width: 20ch; }
  .raw small { font-size: 12px; }
  .human { grid-column: 1 / -1; min-height: 235px; border-top: 1px solid #b8cfc588; padding: 20px 0 7px; }
  .human .scene-label { margin-bottom: 18px; }
  .phrase { font-size: 42px; min-height: 137px; max-width: 22ch; }
  .phrase.long-phrase { font-size: 38px; max-width: 24ch; }
  .phrase-actions { margin-top: 15px; gap: 15px; }
  .phrase-actions > span { max-width: 25ch; }
  .topic-selector { border-radius: 17px; gap: 0; padding: 5px; justify-content: space-between; max-width: 100%; width: 100%; }
  .topic-selector button { flex: 1; min-width: 0; flex-direction: column; gap: 8px; padding: 11px 2px; border-radius: 12px; font-size: 12px; min-height: 67px; }
  .hero-foot { display: grid; grid-template-columns: 1fr auto; padding: 22px 0; gap: 20px 10px; }
  .hero-assurance { font-size: 13px; max-width: 22ch; }
  .hero-foot > .button { grid-column: 2; grid-row: 1; max-width: 190px; padding: 13px 15px; min-height: 46px; }
  .scroll-link { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
  .scroll-link span { font-size: 20px; }

  .report-section { padding: 43px 0 45px; }
  .report-layout { display: block; }
  .report-intro { padding-top: 0; }
  .report-intro > .section-title { font-size: 42px; }
  .report-intro > p { font-size: 15px; max-width: 41ch; margin: 18px 0 22px; }
  .report-tour { display: none; }
  .report-intro > .text-link { display: inline-block; margin-bottom: 30px; }
  .workbench { --report-body: 15px; --report-label: 14px; padding: 24px 19px; min-height: 680px; scroll-margin-top: 95px; }
  .paper-head > span:last-child { font-size: 12px; }
  .paper-logo { font-size: 26px; }
  .workbench-nav { gap: 5px; padding-top: 17px; }
  .workbench-nav button { font-size: 13px; line-height: 1.35; white-space: normal; text-wrap: balance; padding: 12px 4px; min-height: 56px; }
  .paper-title > p { font-size: 28px; }
  .transfer-slot[data-slot="report"] { padding: 20px 17px; }
  .transfer-phrase { font-size: 26px; }
  .report-row { padding: 20px 0; }
  .row-head { font-size: 16px; flex-wrap: wrap; }
  .row-phrase { max-width: 100%; }
  .row-detail { padding: 17px; }
  .workbench-bottom { gap: 12px 16px; }
  .workbench-bottom .status { font-size: 12px; }
  .change-pair > div { padding: 20px 14px; }
  .change-pair span { font-size: 12px; }
  .change-pair strong { font-size: 21px; }
  .message-heading { align-items: start; gap: 15px; }
  .message-heading > strong { font-size: 12px; max-width: 22ch; }

  .method-section { padding: 43px 0; }
  .method-line { display: block; padding-top: 6px; }
  .method-line article { display: grid; grid-template-columns: 32px 1fr; gap: 0 16px; padding-top: 24px; }
  .method-line h3 { margin: 3px 0 10px; font-size: 19px; }
  .method-line p { grid-column: 2; max-width: 42ch; }
  .step-mark { grid-column: 1; grid-row: 1 / 3; }
  .method-signoff { display: grid; gap: 12px; font-size: 13px; margin-top: 27px; padding-top: 25px; }

  .offer-section { padding: 45px 0; }
  .offer-grid { display: block; }
  .offer-copy h2 { font-size: 44px; }
  .offer-copy > p:not(.offer-pre) { font-size: 15px; }
  .future-price { margin-top: 25px; max-width: 100%; }
  .price strong { font-size: 58px; }
  .form-panel { border-top: 1px solid var(--line); margin-top: 35px; padding-top: 30px; }
  .form-title { font-size: 27px; margin-bottom: 25px; }
  .offer-faq { margin-top: 30px; }
  .faq { display: block; }
  .faq details:last-child { border-bottom: 1px solid var(--line); }

  .site-footer { display: block; padding: 27px 0; }
  .site-footer .brand { font-size: 25px; }
  .site-footer > p { margin-top: 20px; }
  .site-footer nav { margin: 20px 0 0; display: grid; gap: 10px; }

  .page-lecture { padding-top: 36px; }
  .prose { font-size: 16px; }
  .encart .offer-copy h2 { font-size: 34px; }
  .encart .form-panel { border-top: 0; margin-top: 10px; padding-top: 0; }
}

@media (max-width: 370px) {
  .wrap { width: calc(100% - 32px); }
  .site-header { gap: 8px; }
  .brand { font-size: 24px; gap: 7px; }
  .brand-sign { width: 25px; height: 25px; font-size: 17px; }
  .site-header > .button { font-size: 12px; padding: 7px 10px; max-width: 9.5em; line-height: 1.25; }
  .section-title { font-size: 36px; }
  .hero-titre { font-size: 46px; }
  .translation-scene { grid-template-columns: 1fr 103px; gap: 14px; }
  .membrane { width: 103px; }
  .raw pre { font-size: 14px; }
  .phrase { font-size: 38px; }
  .phrase.long-phrase { font-size: 34px; }
  /* Trois rubriques puis deux : les étiquettes gardent 12 px. */
  .topic-selector { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
  .topic-selector button { grid-column: span 2; font-size: 12px; }
  .topic-selector button:nth-child(n + 4) { grid-column: span 3; }
  .hero-foot > .button { font-size: 12px; padding: 12px; max-width: 160px; }
  .hero-assurance { font-size: 12px; }
  .workbench { padding: 22px 16px; }
  .transfer-phrase { font-size: 24px; }
  .change-pair > div { padding-left: 12px; padding-right: 12px; }
  .change-pair strong { font-size: 19px; }
  .workbench-bottom { gap: 10px; }
  .offer-copy h2 { font-size: 40px; }
}

/* --- Pause et mouvement réduit ------------------------------------------------------------- */

.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}