@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-display:swap;src:url(/fonts/archivo-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Crayon Rouge — papier crème, un seul rouge (le crayon de l’isoloir), titres très gras, cartes arrondies.
   Pensé d’abord pour le pouce : une colonne, gros boutons en pilule, barre d’action collée en bas du quiz. */
:root {
  --ground: #E6E1D8;
  --paper: #F8F4ED;
  --paper-2: #F0EBE1;
  --card: #FDFBF7;
  --ink: #15181D;
  --ink-2: #4A4F57;
  --ink-3: #626770;
  --rule: #CFC7BA;
  --rule-2: #E2DCD0;
  --red: #C8101E;
  --red-ink: #FFFFFF;
  --red-text: #C8101E;
  --red-tint: #FBE8E4;
  --night: #0F1823;
  --night-ink: #F6F1E9;
  --night-2: #B3BBC7;
  --night-red: #FF5B64;
  --night-rule: #26323F;
  --focus: #1456C4;
  --warn: #8A5A00;
  --warn-bg: #FFF1D2;
  --c2: #1B7A4E;  --t2: #CBEBDB;
  --c1: #3E9A70;  --t1: #E3F3EB;
  --c0: #7B8797;  --t0: #E9E6DF;
  --c-1: #D1703F; --t-1: #FBE6DB;
  --c-2: #B3441C; --t-2: #F6CFC0;
  --ps: #E2362E; --mr: #1B63B5; --eng: #0E96A3; --eco: #2C9A4B; --ptb: #8E1226; --defi: #D4007A;
  --b-ps: #D92D26; --b-mr: #1B63B5; --b-eng: #08808B; --b-eco: #228A40; --b-ptb: #8E1226; --b-defi: #C4006F;
  --tb-eco: #F8DFCB; --ti-eco: #D9742F;
  --tb-emp: #F5E7C2; --ti-emp: #A87900;
  --tb-san: #F6DADB; --ti-san: #D2475A;
  --tb-cli: #DCE8D5; --ti-cli: #4C8A4A;
  --tb-mob: #D8E4F1; --ti-mob: #3F78B5;
  --tb-mig: #E4DDF1; --ti-mig: #7058B8;
  --tb-edu: #D2E8E5; --ti-edu: #2E8580;
  --tb-int: #E4E0D8; --ti-int: #5F6670;
  --ti-ink: #FFFFFF;
  --pill-g: #E0DBD1; --pill-g-ink: #15181D; --pill-n: #2E4A66; --pill-v: #4F7355;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --shadow: 0 1px 0 rgba(21, 24, 29, .05), 0 18px 34px -26px rgba(21, 24, 29, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E0C0B; --paper: #171412; --paper-2: #211D1A; --card: #1D1917; --ink: #F4EEE6; --ink-2: #C5BDB1; --ink-3: #A39B8F;
    --rule: #433C36; --rule-2: #2D2723; --red: #D92D3A; --red-ink: #FFFFFF; --red-text: #FF6B73; --red-tint: #3A1D20;
    --night: #0A0E13; --night-ink: #F6F1E9; --night-2: #B3BBC7; --night-red: #FF6B73; --night-rule: #25303C;
    --focus: #7FB0FF; --warn: #F3C463; --warn-bg: #3A2D10;
    --c2: #5FD39B;  --t2: #1D4A37;
    --c1: #4DB985;  --t1: #1A3A2D;
    --c0: #A39B8F;  --t0: #2C2723;
    --c-1: #F0A077; --t-1: #4A2F22;
    --c-2: #FF8A5E; --t-2: #5E2A18;
    --ps: #FF6A5F; --mr: #5B9BE8; --eng: #36C2CF; --eco: #5BCB78; --ptb: #E0546C; --defi: #FF4DA6;
    --tb-eco: #3A2A1E; --ti-eco: #E58A4B;
    --tb-emp: #3A3220; --ti-emp: #D9A92B;
    --tb-san: #3B2528; --ti-san: #E56A7B;
    --tb-cli: #243324; --ti-cli: #6DB36A;
    --tb-mob: #202C3B; --ti-mob: #6BA0DD;
    --tb-mig: #2D2640; --ti-mig: #9B86E0;
    --tb-edu: #1F3433; --ti-edu: #4FB3AC;
    --tb-int: #2B2B2B; --ti-int: #98A0AB;
    --ti-ink: #15110E;
    --pill-g: #2E2924; --pill-g-ink: #F4EEE6; --pill-n: #35567A; --pill-v: #5D8A64;
    --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 34px -26px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0E0C0B; --paper: #171412; --paper-2: #211D1A; --card: #1D1917; --ink: #F4EEE6; --ink-2: #C5BDB1; --ink-3: #A39B8F;
  --rule: #433C36; --rule-2: #2D2723; --red: #D92D3A; --red-ink: #FFFFFF; --red-text: #FF6B73; --red-tint: #3A1D20;
  --night: #0A0E13; --night-ink: #F6F1E9; --night-2: #B3BBC7; --night-red: #FF6B73; --night-rule: #25303C;
  --focus: #7FB0FF; --warn: #F3C463; --warn-bg: #3A2D10;
  --c2: #5FD39B;  --t2: #1D4A37;
  --c1: #4DB985;  --t1: #1A3A2D;
  --c0: #A39B8F;  --t0: #2C2723;
  --c-1: #F0A077; --t-1: #4A2F22;
  --c-2: #FF8A5E; --t-2: #5E2A18;
  --ps: #FF6A5F; --mr: #5B9BE8; --eng: #36C2CF; --eco: #5BCB78; --ptb: #E0546C; --defi: #FF4DA6;
  --tb-eco: #3A2A1E; --ti-eco: #E58A4B;
  --tb-emp: #3A3220; --ti-emp: #D9A92B;
  --tb-san: #3B2528; --ti-san: #E56A7B;
  --tb-cli: #243324; --ti-cli: #6DB36A;
  --tb-mob: #202C3B; --ti-mob: #6BA0DD;
  --tb-mig: #2D2640; --ti-mig: #9B86E0;
  --tb-edu: #1F3433; --ti-edu: #4FB3AC;
  --tb-int: #2B2B2B; --ti-int: #98A0AB;
  --ti-ink: #15110E;
  --pill-g: #2E2924; --pill-g-ink: #F4EEE6; --pill-n: #35567A; --pill-v: #5D8A64;
  --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 34px -26px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; min-height: 100vh; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--ink); text-underline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; }

.page { max-width: 1120px; margin: 0 auto; padding-block: 0 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sheet { padding-block: 6px 8px; }
@media (min-width: 760px) {
  body { background: var(--ground); }
  .page { padding-block: 24px 48px; }
  .sheet { background: var(--paper); border-radius: 30px; padding: 22px 44px 48px; box-shadow: var(--shadow); }
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-text); }

/* ---------- En-tête ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding-block: 6px; }
.brand { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; color: var(--ink); text-align: left; }
.brand svg { width: 40px; height: 40px; flex: none; }
.brand .bw { display: grid; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; line-height: .95; letter-spacing: .02em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 22px; }
.nl { position: relative; background: none; border: 0; padding: 10px 2px; min-height: 44px; font-weight: 600; font-size: .9688rem; color: var(--ink); }
.nl.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; border-radius: 2px; background: var(--red); }
.nl.pill { border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 18px; min-height: 42px; }
@media (hover: hover) { .nl:hover { color: var(--red-text); } .nl.pill:hover { background: var(--ink); color: var(--paper); } }
@media (max-width: 759px) { .nl.hm { display: none; } }

/* ---------- Boutons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--red); background: var(--red); color: var(--red-ink); font-weight: 700; font-size: 1.0313rem; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .btn:hover { filter: brightness(1.08); } .btn.ghost:hover { background: var(--ink); color: var(--paper); filter: none; } }
.btn:active { transform: scale(.985); }
.btn.slim { min-height: 46px; font-size: .9688rem; }
.link { white-space: nowrap; background: none; border: 0; padding: 10px 2px; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: .9375rem; font-weight: 600; }
@media (hover: hover) { .link:hover { color: var(--red-text); } }
.fine { font-size: .8125rem; color: var(--ink-3); line-height: 1.55; }
.fine a { color: inherit; }
.card { background: var(--card); border: 1.5px solid var(--rule-2); border-radius: 24px; padding: 18px; }

/* ---------- Accueil ---------- */
.home { display: flex; flex-direction: column; gap: 32px; padding-top: 18px; }
.hero { display: grid; gap: 22px; }
.hero-txt { display: grid; gap: 18px; align-content: start; }
.home h1 { font-size: clamp(2.35rem, 10.4vw, 4.1rem); line-height: .96; text-transform: uppercase; font-weight: 900; margin-top: 10px; }
.home h1 em { font-style: normal; color: var(--red-text); }
.lead { font-size: 1.0625rem; color: var(--ink-2); max-width: 34em; }
.cta { display: grid; gap: 10px; max-width: 460px; }
.cta .cap { text-align: center; font-size: .8125rem; color: var(--ink-3); margin-top: -4px; }
.resume { display: grid; gap: 2px; text-align: left; width: 100%; padding: 14px 18px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--rule); box-shadow: var(--shadow); }
.resume .m-t { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.resume .m-s { color: var(--ink-2); font-size: .9rem; }
.resume .m-go { margin-top: 6px; color: var(--red-text); font-weight: 700; }
@media (hover: hover) { .resume:hover { border-color: var(--red); } }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.meta-row span { display: inline-flex; align-items: center; gap: 8px; }
.meta-row .ic { width: 22px; height: 22px; color: var(--ink); }

.art { position: relative; width: 100%; max-width: 340px; aspect-ratio: 320 / 300; margin: 0 auto; }
.art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl { position: absolute; padding: 6px 13px; border-radius: 999px; font-weight: 700; font-size: .8438rem; line-height: 1.3; white-space: nowrap; color: #fff; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
.fl.g { background: var(--pill-g); color: var(--pill-g-ink); }
.fl.r { background: var(--red); }
.fl.n { background: var(--pill-n); }
.fl.v { background: var(--pill-v); }

.how h2 { font-size: 1.35rem; margin-bottom: 14px; }
.promises { display: grid; gap: 10px; }
.promises li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; background: var(--card); border: 1.5px solid var(--rule-2); border-radius: 20px; font-size: .9688rem; color: var(--ink-2); }
.promises li::before { content: "✓"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: var(--red-ink); font-weight: 800; font-size: .85rem; }
.promises b { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); font-size: .875rem; font-weight: 600; }
.pchip::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); }
@media (min-width: 760px) {
  .home { gap: 44px; padding-top: 30px; }
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
  .home h1 { font-size: clamp(3.2rem, 5.2vw, 4.6rem); }
  .lead { font-size: 1.125rem; }
  .promises { grid-template-columns: 1fr 1fr; }
}

/* ---------- Quiz ---------- */
.quiz { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; max-width: 720px; margin: 0 auto; min-height: calc(100svh - 18px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.qtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 4px; background: none; border: 0; font-weight: 600; font-size: .9688rem; }
.back .ic { width: 20px; height: 20px; }
@media (hover: hover) { .back:hover { color: var(--red-text); } }
.qcount { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qcount b { font-weight: 800; }
.prog { height: 8px; border-radius: 99px; background: var(--rule-2); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--red); border-radius: 99px; transition: width .25s ease; }
.qtheme { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: var(--tb); font-size: .8125rem; font-weight: 700; margin-top: 6px; }
.qtheme .ti { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ti); color: var(--ti-ink); }
.qtheme .ti .ic { width: 14px; height: 14px; }
.prompt { font-size: .875rem; font-weight: 600; color: var(--ink-3); margin-bottom: -4px; }
.qtext { font-size: clamp(1.3rem, 5.8vw, 1.85rem); line-height: 1.22; font-weight: 800; letter-spacing: -.015em; text-wrap: pretty; outline: none; }
.ans { display: grid; gap: 8px; margin-top: 4px; }
.a { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 10px 18px; text-align: left; background: var(--card); border: 1.5px solid var(--rule); border-radius: 18px; font-weight: 600; font-size: 1rem; }
.a .chk { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule); background: transparent; display: grid; place-items: center; }
.a .chk::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .15s ease; }
.a[aria-pressed="true"] { background: var(--red-tint); border-color: var(--red); }
.a[aria-pressed="true"] .chk { border-color: var(--red); }
.a[aria-pressed="true"] .chk::after { transform: scale(1); }
.a:active { transform: scale(.99); }
@media (hover: hover) { .a:hover { border-color: var(--red); } }
.linkish { align-self: center; }
.priv { display: flex; align-items: flex-start; gap: 8px; font-size: .8125rem; color: var(--ink-3); }
.priv .ic { width: 16px; height: 16px; margin-top: 2px; }
.qfoot { position: sticky; bottom: 0; z-index: 5; margin-top: auto; margin-inline: -4px; padding: 14px 4px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--paper) 82%, transparent); }
.qnav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.qnav .btn { min-height: 52px; }
.qnav .prevb { width: auto; padding-inline: 20px; }
.qnav .prevb[disabled] { opacity: .35; cursor: default; }
@media (min-width: 760px) {
  .quiz { gap: 16px; padding-top: 14px; min-height: 0; }
  .qfoot { position: static; padding: 6px 0 0; margin: 0; background: none; }
  .a { min-height: 58px; font-size: 1.0625rem; }
}
@media (max-height: 700px) and (max-width: 759px) {
  .quiz { gap: 10px; }
  .a { min-height: 50px; padding-block: 8px; }
  .qtext { font-size: clamp(1.18rem, 5.4vw, 1.5rem); }
}

/* ---------- Résultats ---------- */
.res { display: flex; flex-direction: column; gap: 30px; padding-top: 14px; }
.res h2 { font-size: 1.4rem; line-height: 1.1; }
.sect { display: grid; gap: 14px; }
#res-main { display: grid; gap: 16px; }
.pod.p1 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 22px 20px 22px; border-radius: 28px; background: var(--night); color: var(--night-ink); box-shadow: var(--shadow); overflow: hidden; }
.pod.p1 .tag { grid-column: 1 / -1; justify-self: start; background: var(--red); color: var(--red-ink); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; margin-bottom: 10px; }
.pod.p1 h1 { display: grid; gap: 2px; font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--night-2); }
.pod.p1 .nm { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.1rem, 9.4vw, 3.4rem); line-height: .98; letter-spacing: -.025em; color: var(--night-red); overflow-wrap: anywhere; }
.pod.p1 .badge { grid-row: 2; grid-column: 2; display: grid; place-items: center; align-content: center; width: 96px; height: 96px; border-radius: 26px; background: var(--pb); color: #fff; transform: rotate(-7deg); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7); }
.pod.p1 .pc { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; }
.pod.p1 .badge small { font-size: .625rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.pod.p1 .verdict { grid-column: 1 / -1; margin-top: 12px; font-size: 1rem; color: var(--night-ink); }
.pod.p1 .st { grid-column: 1 / -1; font-size: .8438rem; color: var(--night-2); margin-top: 2px; }
.runners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pod.p2, .pod.p3 { position: relative; display: grid; gap: 2px; align-content: start; padding: 16px 16px 14px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--rule-2); box-shadow: var(--shadow); overflow: hidden; }
.pod.p2::before, .pod.p3::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--pc); }
.pod .rk { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pod.p2 .nm, .pod.p3 .nm { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pod.p2 .pc, .pod.p3 .pc { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1.1; letter-spacing: -.02em; }
.pod.p2 .st, .pod.p3 .st { font-size: .75rem; color: var(--ink-3); margin-top: 4px; }
.res-grid { display: grid; gap: 16px; }
.why { display: grid; gap: 10px; align-content: start; font-size: .9688rem; color: var(--ink-2); }
.why h2 { color: var(--ink); }
.why b { color: var(--ink); }
.why .tip { font-size: .8438rem; color: var(--ink-3); }
.rank { display: grid; gap: 8px; }
.rrow { display: grid; grid-template-columns: 114px minmax(0, 1fr) 46px; align-items: center; gap: 2px 10px; }
.rrow .rn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9375rem; }
.rrow .rn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; }
.rrow .rb { height: 14px; background: var(--rule-2); border-radius: 99px; overflow: hidden; position: relative; }
.rrow .rb i { position: absolute; inset: 0 auto 0 0; background: var(--pc); border-radius: 99px; }
.rrow .rv { font-weight: 700; text-align: right; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.rsub { grid-column: 2 / -1; font-size: .75rem; color: var(--ink-3); margin-bottom: 4px; }
.rsub.low { color: var(--warn); font-weight: 600; }
.note { background: var(--warn-bg); color: var(--warn); border-radius: 18px; padding: 12px 16px; font-size: .9rem; font-weight: 500; }
@media (min-width: 760px) {
  .res { gap: 40px; padding-top: 22px; }
  .res-grid { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 18px; }
  .pod.p1 { padding: 34px 36px; border-radius: 32px; }
  .pod.p1 .nm { font-size: clamp(3rem, 5.6vw, 4.4rem); }
  .pod.p1 .badge { width: 150px; height: 150px; border-radius: 38px; grid-row: 2 / 4; }
  .pod.p1 .pc { font-size: 2.7rem; }
  .pod.p1 .badge small { font-size: .75rem; }
  .pod.p1 h1 { font-size: 1.15rem; }
  .pod.p1 .verdict { font-size: 1.0625rem; max-width: 36em; }
}

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px; border-radius: 22px; background: var(--tb); border: 2px solid transparent; min-height: 132px; }
.tile .ti { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ti); color: var(--ti-ink); margin-bottom: 4px; }
.tile .ti .ic { width: 19px; height: 19px; }
.tile .tn { font-family: var(--font-display); font-weight: 800; font-size: .9688rem; line-height: 1.15; letter-spacing: -.01em; }
.tile .tq { font-size: .75rem; color: var(--ink-2); }
.tile .tbest { margin-top: 2px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .8438rem; }
.tile .tbest::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pc); }
.tile[aria-pressed="true"] { border-color: var(--ink); }
@media (hover: hover) { .tile:hover { border-color: var(--ink-3); } }
.tpanel { margin-top: 12px; display: grid; gap: 12px; }
.tpanel h3 { font-size: 1.05rem; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

details.fold { background: var(--card); border: 1.5px solid var(--rule-2); border-radius: 24px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details > summary::after { content: "+"; display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--rule); font-weight: 700; line-height: 1; color: var(--ink-2); }
details[open] > summary::after { content: "–"; }
details.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 18px; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; }
details.fold > summary .s { display: block; font-family: var(--font-body); font-weight: 400; font-size: .875rem; color: var(--ink-3); letter-spacing: 0; }
details.fold .inner { padding: 14px 18px 20px; display: grid; gap: 14px; border-top: 1.5px solid var(--rule-2); }

.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.wrow label { font-weight: 600; font-size: .9688rem; }
.wrow output { font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.wrow input[type=range] { grid-column: 1 / -1; width: 100%; height: 36px; accent-color: var(--red); margin: 0; }
.wscale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-3); grid-column: 1 / -1; margin-top: -8px; }

.filters { display: grid; gap: 10px; }
.filters select { width: 100%; min-height: 50px; padding: 8px 14px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--paper); font-size: 1rem; }
.filters label.ck { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9688rem; }
.filters input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--red); flex: none; }
.filters label.ck.off { opacity: .45; }
.qlist { display: grid; gap: 8px; }
details.qi { background: var(--paper-2); border-radius: 18px; border: 1.5px solid var(--rule-2); }
details.qi > summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; gap: 4px 8px; padding: 12px 14px; align-items: start; }
details.qi > summary::after { grid-column: 3; grid-row: 1; align-self: start; }
details.qi .qn { font-size: .8125rem; font-weight: 700; color: var(--ink-3); padding-top: 2px; font-variant-numeric: tabular-nums; }
details.qi .qt { font-weight: 600; font-size: .9688rem; line-height: 1.35; }
details.qi .meta { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.you { font-size: .8125rem; color: var(--ink-2); font-weight: 600; flex-basis: 100%; }
.vc { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; border: 1.5px solid var(--bc); background: var(--bt); color: var(--ink); white-space: nowrap; }
.vc b { font-weight: 800; }
.v-accord2 { --bc: var(--c2); --bt: var(--t2); } .v-accord { --bc: var(--c1); --bt: var(--t1); } .v-neutre { --bc: var(--c0); --bt: var(--t0); }
.v-desaccord { --bc: var(--c-1); --bt: var(--t-1); } .v-desaccord2 { --bc: var(--c-2); --bt: var(--t-2); }
.v-inconnu { --bc: var(--rule); --bt: transparent; border-style: dashed; color: var(--ink-3); }
.pp { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.pp:first-child { border-top: 0; }
.pp .ph { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; font-weight: 700; }
.pp .ph::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); flex: none; }
.pp .pos { font-size: .875rem; color: var(--ink-2); font-weight: 500; }
.pp .nt { font-size: .875rem; }
.pp .srcs { font-size: .8125rem; color: var(--ink-3); }
.pp .srcs a { color: var(--ink-2); overflow-wrap: anywhere; }
.qbody { padding: 0 14px 10px; border-top: 1px solid var(--rule-2); }
.qempty { color: var(--ink-3); padding: 8px 2px; }

.actions { display: grid; gap: 10px; max-width: 460px; }
.copybox { width: 100%; min-height: 110px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); padding: 10px; font-size: .9rem; }

/* ---------- Méthode ---------- */
.meth { display: flex; flex-direction: column; gap: 26px; padding-top: 14px; max-width: 760px; }
.meth h1 { font-size: clamp(2.1rem, 9vw, 3.2rem); line-height: .98; font-weight: 900; }
.meth h2 { font-size: 1.3rem; margin-bottom: 8px; }
.meth section p, .meth section li { color: var(--ink-2); font-size: 1rem; }
.meth section ul { display: grid; gap: 8px; margin-top: 6px; }
.meth section li { padding-left: 18px; position: relative; }
.meth section li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.meth section b { color: var(--ink); }
.meth .tbl { display: grid; gap: 8px; margin-top: 8px; }
.meth .tbl div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .9375rem; color: var(--ink-2); padding: 12px 14px; background: var(--card); border: 1.5px solid var(--rule-2); border-radius: 18px; }
.meth .tbl b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--red-text); }
.srclist { display: grid; gap: 8px; }
.srclist li { font-size: .875rem; color: var(--ink-2); padding-left: 0; }
.srclist li::before { content: none !important; }
.srclist a { overflow-wrap: anywhere; }
.srclist .d { color: var(--ink-3); font-size: .75rem; margin-left: 6px; }

#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: calc(100vw - 32px); text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }