@font-face {
  font-family: "Mono UI";
  src: local("JetBrains Mono"), local("Cascadia Code"), local("SF Mono");
}

:root{
  --bg: #f3ead8;
  --panel: #fbf4e6;
  --panel-2: #efe4cc;
  --ink: #241c0f;
  --ink-muted: #6b5c3f;
  --ink-faint: #9c8c68;
  --accent: #a8650a;
  --accent-soft: rgba(168,101,10,0.14);
  --line: rgba(36,28,15,0.16);
  --glow: none;
  --cookie-space: 0px;
}
:root[data-theme="dark"]{
  --bg: #14110d;
  --panel: #1c160e;
  --panel-2: #241c11;
  --ink: #f5ead2;
  --ink-muted: #b8a888;
  --ink-faint: #7a6c4d;
  --accent: #ffb02e;
  --accent-soft: rgba(255,176,46,0.14);
  --line: rgba(255,176,46,0.22);
  --glow: 0 0 18px rgba(255,176,46,0.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #14110d;
    --panel: #1c160e;
    --panel-2: #241c11;
    --ink: #f5ead2;
    --ink-muted: #b8a888;
    --ink-faint: #7a6c4d;
    --accent: #ffb02e;
    --accent-soft: rgba(255,176,46,0.14);
    --line: rgba(255,176,46,0.22);
    --glow: 0 0 18px rgba(255,176,46,0.35);
  }
}

*{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family: "Segoe UI", -apple-system, system-ui, "Helvetica Neue", sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  padding:32px 24px calc(56px + var(--cookie-space));
  transition: padding-bottom .2s;
}
.page-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  width:100%;
}

.cookie-banner{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:16px 20px;
  background:var(--panel);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,0.15);
}
.cookie-banner.is-hidden{ display:none; }
.cookie-banner p{
  margin:0;
  max-width:560px;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-muted);
}
.cookie-banner p button{
  background:none;
  border:none;
  padding:0;
  color:var(--ink-muted);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  font:inherit;
}
.cookie-banner p button:hover{ color:var(--accent); }
.cookie-actions{ display:flex; gap:10px; flex:0 0 auto; }
.cookie-actions button{
  font:inherit;
  font-size:13px;
  font-weight:600;
  border-radius:6px;
  padding:9px 16px;
  cursor:pointer;
}
.cookie-actions .decline{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-muted);
}
.cookie-actions .decline:hover{ border-color:var(--accent); color:var(--accent); }
.cookie-actions .accept{
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--bg);
}

.console{
  position:relative;
  width:100%;
  max-width:460px;
  min-height:560px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow: var(--glow), 0 1px 0 rgba(0,0,0,0.04) inset;
  padding:36px 30px 30px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.console::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.7;
}

.site-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:21px;
  font-weight:600;
  letter-spacing:0.05em;
  color:var(--ink);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.site-brand:hover{ color:var(--accent); }
.site-brand:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.site-brand .mark{
  width:42px;
  height:42px;
  flex:0 0 auto;
}
.site-brand .mark .cap{ fill:var(--ink); }
.site-brand .mark .glass{ fill:var(--accent); }
.site-brand .mark .facet{ fill:none; stroke:var(--bg); stroke-linecap:round; opacity:0.5; }
.site-brand .mark .grain{ fill:var(--bg); }
.site-brand .mark .pile{ fill:var(--bg); opacity:0.85; }
.site-brand .mark .falling{
  fill:var(--bg);
  opacity:0;
  transform-box: fill-box;
  transform-origin:center;
  animation: sand-fall 1.8s linear infinite;
}
@keyframes sand-fall{
  0%   { transform:translateY(0); opacity:0; }
  8%   { opacity:0.95; }
  78%  { opacity:0.95; }
  100% { transform:translateY(14px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .site-brand .mark .falling{ animation:none; opacity:0.5; }
}

.lang-select{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--ink-muted);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  padding:5px 7px;
  cursor:pointer;
}
.lang-select:hover{ color:var(--ink); border-color:var(--accent); }
.lang-select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.screen{ display:none; flex-direction:column; flex:1; gap:26px; }
.screen.is-active{ display:flex; }

.eyebrow{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}
h1, h2{
  margin:0;
  text-wrap:balance;
  font-weight:600;
}
h1{ font-size:28px; letter-spacing:-0.01em; }
h2{ font-size:21px; letter-spacing:-0.01em; line-height:1.3; }
.lede{
  margin:0;
  font-size:14px;
  color:var(--ink-muted);
  line-height:1.5;
}

/* Intro screen */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-size:12px;
  color:var(--ink-muted);
  letter-spacing:0.02em;
}
.field input{
  font: inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:11px 12px;
}
.field input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.field-group{ display:flex; flex-direction:column; gap:16px; }

.btn{
  font: inherit;
  font-weight:600;
  font-size:14px;
  color:var(--bg);
  background:var(--accent);
  border:none;
  border-radius:6px;
  padding:13px 20px;
  cursor:pointer;
  letter-spacing:0.01em;
}
.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.btn:hover{ filter:brightness(1.06); }
.spacer{ flex:1; }

/* Question screen */
.progress-track{
  display:flex;
  gap:3px;
}
.progress-track span{
  height:4px;
  flex:1;
  border-radius:2px;
  background:var(--panel-2);
}
.progress-track span.done{ background:var(--accent); }
.progress-label{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:0.04em;
}
.slider-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex:1;
}
.slider-arrow{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  line-height:1;
  color:var(--ink);
  background:var(--panel-2);
  border:1px solid var(--line);
  cursor:pointer;
}
.slider-arrow:hover{ border-color:var(--accent); color:var(--accent); }
.slider-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.slider-arrow[disabled]{ opacity:0.3; cursor:not-allowed; }
.slider-content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
}
.periods-label{
  font-size:12px;
  color:var(--ink-muted);
}
.period-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.period-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:13px;
  color:var(--ink-muted);
}
.period-row input{
  text-align:center;
  font-variant-numeric: tabular-nums;
  font: inherit;
  font-size:13px;
  color:var(--ink);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  padding:6px 4px;
}
.period-row input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.period-row .field-pair{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.period-row .time-fields{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.period-row input.age-input{ width:42px; }
.period-row input.hours-input{ width:40px; }
.period-row input.minutes-input{ width:40px; }
.period-row .remove{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink-faint);
  cursor:pointer;
  font-size:13px;
  line-height:1;
  padding:0;
}
.period-row .remove:hover{ color:var(--accent); border-color:var(--accent); }
.add-period{
  align-self:flex-start;
  margin-top:12px;
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  background:transparent;
  border:1px dashed var(--line);
  border-radius:5px;
  padding:6px 10px;
  cursor:pointer;
}
.add-period:hover{ color:var(--accent); border-color:var(--accent); }

/* Result screen */
.greet{ font-size:14px; color:var(--ink-muted); }
.greet b{ color:var(--ink); }

.view-toggle{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.view-toggle-btn{
  font: inherit;
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:12px;
  font-weight:600;
  color:var(--ink-muted);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
  cursor:pointer;
}
.view-toggle-btn.is-active{ color:var(--bg); background:var(--accent); border-color:var(--accent); }
.view-toggle-btn:hover{ border-color:var(--accent); }
.view-toggle-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.result-view{ display:none; flex-direction:column; gap:16px; align-items:center; }
.result-view.is-active{ display:flex; }

/* Bleeds into the console's own side padding (30px each side) so the
   labels that spill past the SVG's nominal box via overflow:visible
   have room before hitting the console's overflow:hidden edge. */
.radar-wrap{ display:flex; justify-content:center; width:calc(100% + 60px); margin:0 -30px; }
.radar-wrap svg{ width:100%; max-width:400px; height:auto; overflow:visible; }
/* On narrow phones the console itself shrinks below the radar's
   enlarged max-width, so the bled-out labels no longer have the same
   safety margin — cap it back down a bit there. */
@media (max-width: 500px){
  .radar-wrap svg{ max-width:260px; }
}
@media (max-width: 360px){
  .radar-wrap svg{ max-width:230px; }
}
@media (max-width: 320px){
  .radar-wrap svg{ max-width:200px; }
}
.radar-hover{
  min-height:20px;
  text-align:center;
  font-size:12.5px;
  color:var(--ink-faint);
}
.radar-hover b{
  font-variant-numeric: tabular-nums;
  color:var(--accent);
}
.radar-vertex{ cursor:pointer; }
.radar-vertex:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.stat-line{
  margin:0;
  font-size:13.5px;
  color:var(--ink-muted);
  line-height:1.5;
}
.stat-line b{
  font-variant-numeric: tabular-nums;
  color:var(--ink);
  font-size:14.5px;
}
.stat-list{ display:flex; flex-direction:column; gap:8px; }

.rpg-class{ font-size:14px; color:var(--ink-muted); text-align:center; }
.rpg-class b{ color:var(--accent); }

.rpg-bars{ display:flex; flex-direction:column; gap:10px; width:100%; }
.rpg-bar-row{
  display:grid;
  grid-template-columns: 20px 108px 1fr 54px;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--ink-muted);
}
.rpg-bar-icon{ text-align:center; font-size:14px; }
.rpg-bar-label{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rpg-bar-track{
  height:10px;
  border-radius:6px;
  background:var(--panel-2);
  border:1px solid var(--line);
  overflow:hidden;
}
.rpg-bar-fill{
  height:100%;
  border-radius:6px 0 0 6px;
  box-shadow:var(--glow);
}
.rpg-bar-value{
  font-variant-numeric: tabular-nums;
  text-align:right;
  color:var(--ink);
  font-weight:600;
}

.loot-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap:10px;
  width:100%;
}
.loot-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:14px 6px 12px;
  border-radius:10px;
  background:var(--panel-2);
  border:2px solid var(--line);
  text-align:center;
}
.loot-icon{ font-size:26px; }
.loot-label{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:9.5px;
  color:var(--ink-muted);
  line-height:1.25;
  min-height:2.5em;
}
.loot-value{
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  font-variant-numeric: tabular-nums;
}
.loot-rarity{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:8px;
  letter-spacing:0.07em;
  text-transform:uppercase;
}
.loot-card.rarity-common{ border-color:var(--line); }
.loot-card.rarity-common .loot-rarity{ color:var(--ink-faint); }
.loot-card.rarity-rare{ border-color:#4a90d9; box-shadow:0 0 10px rgba(74,144,217,0.25); }
.loot-card.rarity-rare .loot-rarity{ color:#4a90d9; }
.loot-card.rarity-epic{ border-color:#a855f7; box-shadow:0 0 12px rgba(168,85,247,0.3); }
.loot-card.rarity-epic .loot-rarity{ color:#a855f7; }
.loot-card.rarity-legendary{ border-color:#ffb020; box-shadow:0 0 16px rgba(255,176,32,0.45); }
.loot-card.rarity-legendary .loot-rarity{ color:#ffb020; }

/* Bleeds into the console's own side padding, same trick as the
   radar, so the wingtips have room before the console's
   overflow:hidden edge. */
.wings-wrap{ display:flex; justify-content:center; width:calc(100% + 60px); margin:0 -30px; }
.wings-wrap svg{ width:100%; max-width:600px; height:auto; overflow:visible; }
@media (max-width: 500px){
  .wings-wrap svg{ max-width:420px; }
}
@media (max-width: 360px){
  .wings-wrap svg{ max-width:340px; }
}
@media (max-width: 320px){
  .wings-wrap svg{ max-width:280px; }
}
.wings-feather{ cursor:pointer; transition:filter .12s, opacity .12s; }
.wings-feather:hover, .wings-feather:focus-visible{ filter:brightness(1.15); outline:none; }
.wings-hover{ font-size:13px; color:var(--ink-muted); text-align:center; min-height:18px; }
.wings-hover b{ color:var(--accent); }

.restart-btn{
  align-self:flex-start;
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-faint);
  background:transparent;
  border:1px dashed var(--line);
  border-radius:5px;
  padding:6px 10px;
  cursor:pointer;
}
.restart-btn:hover{ color:var(--accent); border-color:var(--accent); }
.result-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.share-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.share-label{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-faint);
}
.share-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.share-btn{
  font: inherit;
  font-size:12px;
  font-weight:600;
  color:var(--ink-muted);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 14px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.share-btn:hover{ color:var(--accent); border-color:var(--accent); }
.share-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Legal screen */
.legal-screen{ overflow-y:auto; }
.legal-body{ display:flex; flex-direction:column; gap:22px; }
.legal-body h3{
  margin:0 0 8px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent);
}
.legal-body p{
  margin:0 0 8px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-muted);
}
.legal-body p:last-child{ margin-bottom:0; }

/* Always-visible editorial content below the console — not gated
   behind any click, so search/ad crawlers see real substantive text
   on first load, not just an interactive form. */
.about-section{
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.about-section h2{
  font-size:15px;
  color:var(--ink);
  text-align:center;
}
.about-section p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-muted);
}

.faq-section{ margin-top:8px; }

/* In-content ad placement, sized to the surrounding text column. Empty
   until a real AdSense unit is pasted in, so it collapses to nothing
   rather than leaving a hole in the layout. */
.ad-inarticle{
  width:100%;
  max-width:460px;
}
.ad-inarticle:not(:empty){ margin-top:4px; }
#faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
}
.faq-item summary{
  margin:0;
  padding:4px 22px 4px 0;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  list-style:none;
  position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:2px;
  font-size:16px;
  font-weight:400;
  color:var(--ink-faint);
  transition:transform .15s;
}
.faq-item[open] summary::after{
  content:"–";
}
.faq-item summary:hover{ color:var(--accent); }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.faq-item p{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-muted);
}

.page-footer{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11.5px;
  color:var(--ink-faint);
}
.footer-link{
  background:none;
  border:none;
  padding:0;
  color:var(--ink-faint);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-style:dotted;
  cursor:pointer;
  font:inherit;
}
.footer-link:hover{ color:var(--accent); }
.footer-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.footer-sep{ opacity:0.5; }

/* Large-monitor tier: explicit larger values (~28%), scoped to the
   elements that actually appear on a real, very wide monitor. */
@media (min-width: 1800px){
  body{ gap:28px; padding-left:30px; padding-right:30px; }
  .page-main{ gap:28px; }
  .console{ max-width:590px; min-height:700px; padding:46px 38px 38px; }
  .about-section{ max-width:590px; gap:13px; }
  .about-section h2{ font-size:19px; }
  .about-section p{ font-size:16px; }
  #faq-list{ gap:14px; }
  .faq-item summary{ font-size:17px; padding:6px 26px 6px 0; }
  .faq-item summary::after{ font-size:20px; }
  .faq-item p{ font-size:16px; }
  .site-brand{ font-size:27px; gap:14px; }
  .site-brand .mark{ width:54px; height:54px; }
  .lang-select{ font-size:14px; padding:7px 9px; }
  .eyebrow{ font-size:14px; }
  h1{ font-size:36px; }
  h2{ font-size:27px; }
  .lede{ font-size:18px; }
  .field label{ font-size:15px; }
  .field input{ font-size:20px; padding:14px 15px; }
  .progress-label{ font-size:14px; }
  .slider-arrow{ width:50px; height:50px; font-size:21px; }
  .periods-label{ font-size:15px; }
  .period-row{ font-size:16px; }
  .btn{ font-size:18px; padding:16px 25px; }
  .radar-wrap{ width:calc(100% + 76px); margin:0 -38px; }
  .radar-wrap svg{ max-width:500px; }
  .radar-hover{ font-size:16px; }
  .view-toggle-btn{ font-size:15px; padding:9px 18px; }
  .rpg-class{ font-size:17px; }
  .rpg-bar-row{ grid-template-columns: 26px 150px 1fr 70px; font-size:15px; }
  .rpg-bar-icon{ font-size:18px; }
  .rpg-bar-label{ font-size:14px; }
  .loot-icon{ font-size:32px; }
  .loot-label{ font-size:12px; }
  .loot-value{ font-size:15px; }
  .loot-rarity{ font-size:10px; }
  .wings-wrap{ width:calc(100% + 76px); margin:0 -38px; }
  .wings-wrap svg{ max-width:750px; }
  .wings-hover{ font-size:16px; }
  .stat-line{ font-size:17px; }
  .stat-line b{ font-size:18px; }
  .share-label{ font-size:14px; }
  .share-btn{ font-size:15px; padding:8px 18px; }
  .legal-body p{ font-size:17px; }
  .legal-body h3{ font-size:16px; }
  .page-footer{ font-size:14px; }
  .cookie-banner p{ font-size:16px; max-width:700px; }
  .cookie-actions button{ font-size:16px; padding:11px 20px; }
}

/* ---------------------------------------------------------------------
   Article pages (methodologie.html, comprendre-son-resultat.html,
   bien-estimer-son-temps.html). Plain static HTML sharing this
   stylesheet — they carry no script, so everything here is layout only.
   --------------------------------------------------------------------- */
.article{
  width:100%;
  max-width:660px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.article h1{
  font-size:27px;
  line-height:1.25;
  color:var(--ink);
}
.article-lede{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--ink-muted);
}
.article h2{
  margin-top:18px;
  font-size:18px;
  color:var(--ink);
}
.article h3{
  margin:10px 0 0;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
}
.article p{
  margin:0;
  font-size:14.5px;
  line-height:1.72;
  color:var(--ink-muted);
}
.article ul{
  margin:0;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-muted);
}
.article b, .article strong{ color:var(--ink); font-weight:600; }
.article a{ color:var(--accent); text-underline-offset:3px; }

/* Formulas and worked examples, set apart from the prose. */
.article .formula{
  margin:2px 0;
  padding:13px 16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:6px;
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:13px;
  line-height:1.7;
  color:var(--ink);
  overflow-x:auto;
}
.article .note{
  padding:13px 16px;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13.5px;
  line-height:1.65;
}

/* Cross-links to the other articles, at the foot of each one. */
.article-more{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:9px;
}
.article-more h2{ margin:0 0 2px; font-size:15px; }
.article-more a{
  font-size:14px;
  color:var(--accent);
  text-underline-offset:3px;
}

@media (min-width: 900px){
  .article h1{ font-size:32px; }
  .article-lede{ font-size:17.5px; }
  .article h2{ font-size:20px; }
  .article p, .article ul{ font-size:15.5px; }
}

/* "Pour aller plus loin" — static links from the home page to the
   article pages, so they aren't orphaned. */
.further-reading ul{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-muted);
}
.further-reading a{
  color:var(--accent);
  text-underline-offset:3px;
}

/* Language switch on the article pages, standing in for the home page's
   <select> (those pages carry no app code). */
.lang-alt{
  font-family:"Mono UI", ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--ink-muted);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:5px;
  padding:5px 7px;
  text-decoration:none;
  flex:0 0 auto;
}
.lang-alt:hover{ color:var(--ink); border-color:var(--accent); }
.lang-alt:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

/* Copyright note in the footer. Dimmer than the links beside it — it is
   there to be seen, not read. */
.footer-copy{ color:var(--ink-faint); }