/* /telecharger.html and /telecharger-ar.html only, on top of /pages.css (lepos.ma's tokens and components).
   One memorable element: the version chooser drawn as a till receipt (Geist Mono, dashed rules, a torn edge),
   whose lines are the downloads. Everything around it stays quiet: hairline lists, no card grids.
   telecharger.js marks the line that fits the visitor's computer (data-recommended) and, on a phone, sets
   html[data-os='phone'] to show why there is nothing to install there. */

/* ---- Hero */
.dlp-hero .container { display: grid; gap: 3rem; align-items: center; padding-top: 3.5rem; padding-bottom: 5rem; }
@media (min-width: 1024px) { .dlp-hero .container { grid-template-columns: minmax(0, 1fr) 29rem; gap: 4.5rem; padding-top: 4.5rem; padding-bottom: 6rem; } }
.dlp-hero .hero-title { margin-top: 0; max-width: 15ch; }
.dlp-account { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--navy-line); max-width: 52ch; font-size: .9375rem; line-height: 1.6; color: var(--on-navy-2); }
.dlp-account a { color: var(--blue-on-navy); font-weight: 500; text-underline-offset: 4px; }
.dlp-account a:hover { color: #fff; }
.dlp-phone { display: none; margin-top: 1.5rem; padding: .875rem 1rem; border-radius: 10px; border: 1px solid rgb(127 176 247 / .35); background: rgb(10 96 216 / .18); color: var(--on-navy); font-size: .9375rem; line-height: 1.6; }
html[data-os='phone'] .dlp-phone { display: block; }

/* ---- The receipt */
.tk { position: relative; color: var(--ink); filter: drop-shadow(0 40px 60px rgb(0 0 0 / .45)); }
.tk-paper { background: var(--card); border-radius: 10px 10px 0 0; padding: 1.75rem 1.5rem 1.25rem; }
/* The torn bottom edge: a zigzag strip of the same paper, as a receipt torn off the printer. */
.tk::after {
  content: ''; display: block; height: 10px;
  background:
    linear-gradient(135deg, var(--card) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--card) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
.tk-head { text-align: center; }
.tk-brand { font-size: 1.125rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.tk-sub { margin-top: .375rem; font-size: .8125rem; line-height: 1.5; color: var(--mute); }
.tk-rule { margin: 1.25rem 0; border: 0; border-top: 1px dashed #b9c4d3; }
.tk-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: .25rem; }
.tk-row {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .875rem;
  margin-inline: -.75rem; padding: .875rem .75rem; border-radius: 8px; color: inherit; text-decoration: none;
  transition: background-color var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.tk-row:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .tk-row:hover { background: var(--bg); } .tk-row:hover .tk-get { background: var(--blue); color: #fff; border-color: var(--blue); } }
.tk-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--blue-soft); color: var(--blue); }
.tk-icon svg { width: 1.375rem; height: 1.375rem; }
.tk-name { display: block; font-size: 1rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.tk-detail { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.tk-meta { display: block; margin-top: .25rem; font-size: .75rem; line-height: 1.4; color: var(--mute); }
.tk-get {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 8px; border: 1px solid var(--line); color: var(--ink);
  transition: background-color var(--dur-press) var(--ease-out), color var(--dur-press) var(--ease-out), border-color var(--dur-press) var(--ease-out);
}
.tk-get svg { width: 1.125rem; height: 1.125rem; }
.tk-badge { display: none; margin-top: .5rem; width: fit-content; padding: .125rem .5rem; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: .71875rem; line-height: 1.5; font-weight: 600; }
.tk-row[data-recommended] { background: var(--blue-soft); }
.tk-row[data-recommended] .tk-icon { background: var(--blue); color: #fff; }
.tk-row[data-recommended] .tk-badge { display: block; background: var(--card); }
.tk-row[data-recommended] .tk-get { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: var(--shadow-btn); }
.tk-foot { font-size: .8125rem; line-height: 1.55; color: var(--ink-2); }
.tk-foot p + p { margin-top: .625rem; }
.tk-foot strong { font-weight: 600; color: var(--ink); }

/* ---- Sections */
.dlp-section { padding-block: 4.5rem; }
@media (min-width: 640px) { .dlp-section { padding-block: 5.5rem; } }
.dlp-section--alt { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dlp-head { display: grid; gap: .75rem; max-width: 40rem; }
.dlp-head .section-title { margin-top: 0; }

/* What the shop needs: a hairline list, two columns from tablets up. */
.needs { margin: 2.5rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .needs { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.need { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--line); }
.need-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 8px; background: var(--blue-soft); color: var(--blue); }
.need-icon svg { width: 1.25rem; height: 1.25rem; }
.need-t { font-size: 1rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.need-d { margin: .375rem 0 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.need-d + .need-d { margin-top: .25rem; color: var(--mute); font-size: .875rem; }

/* Installing: Mac and Windows side by side, each a real sequence. */
.installs { margin-top: 2.5rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .installs { grid-template-columns: 1fr 1fr; } }
.install { border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-card); padding: 1.5rem; }
@media (min-width: 640px) { .install { padding: 1.75rem 2rem; } }
.install-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.install-head h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.02em; }
.install-head .mono { font-size: .75rem; color: var(--mute); }
.install ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.install li { counter-increment: step; position: relative; padding: 1.125rem 0 0 2.75rem; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
[dir='rtl'] .install li { padding: 1.125rem 2.75rem 0 0; }
.install li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 1.0625rem;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink); font: 500 .8125rem/1 'Geist Mono', 'Geist Mono Fallback', ui-monospace, monospace;
}
.install li strong { color: var(--ink); font-weight: 600; }
.dlp-why { margin-top: 1.5rem; max-width: 70ch; font-size: .9375rem; line-height: 1.65; color: var(--ink-2); }

/* After installing: three short columns, no boxes. */
.after { margin-top: 2.5rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .after { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.after h3 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.02em; padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.after p { margin-top: .625rem; font-size: .9375rem; line-height: 1.65; color: var(--ink-2); }
.after .btn { margin-top: 1.25rem; }
.after .text-link { display: inline-block; margin-top: 1rem; color: var(--blue); font-weight: 500; text-underline-offset: 4px; }