/* ── Lot 3 — Téléchargement ────────────────────────────────────────────
   Windows en grand, dans une dalle d'un palier plus sombre (`--bg-deep`) ;
   Linux replié dessous ; l'empreinte à côté du bouton, là où on la compare.
   Aucun cadre : les zones se séparent par paliers de noir et par filets
   d'un pixel. Le blanc lunaire ne sert qu'au bouton de téléchargement. */

.telechargement h1 {
  max-width: 18ch;
}

.tel-chapo {
  margin-top: 14px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* `minmax(0, 1fr)` partout : sans lui, la ligne la plus longue d'un <pre>
   Linux élargit la colonne, et toute la page défile de côté à 375 px. */
.tel-plateformes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(32px, 5vw, 48px);
}

/* Les étiquettes de zone, comme les titres d'une page de manuel. */
.tel-etiquette {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* « Windows en grand » : le nom de la plateforme porte le titre de la dalle,
   l'étiquette mono dit le reste. */
.tel-plateforme {
  font-size: clamp(26px, 3.4vw, 34px);
}

.tel-plateforme + .tel-etiquette {
  margin-top: 6px;
}

/* ── Windows ──────────────────────────────────────────────────────────── */
.tel-windows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: clamp(16px, 4vw, 40px);
  border-radius: var(--radius);
  background: var(--bg-deep);
}

@media (min-width: 900px) {
  .tel-windows {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
  }
}

.tel-bouton {
  margin-top: 18px;
  min-height: 56px;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 600;
}

@media (max-width: 520px) {
  .tel-bouton {
    width: 100%;
  }
}

.tel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tel-meta > div {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.tel-meta dt,
.tel-meta-exacte {
  color: var(--text-muted);
}

.tel-meta dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Une panne se dit dans la page, avec la seule couleur franche qui lui
   revient : le filet `--warn`, pas un bandeau. */
.tel-panne,
.tel-etat[data-panne] {
  padding-left: 12px;
  border-left: 2px solid var(--warn);
}

.tel-panne {
  margin-top: 16px;
  max-width: 56ch;
  font-size: 14px;
  color: var(--text-muted);
}

/* ── Ensuite : les trois étapes ─────────────────────────────────────── */
.tel-ensuite {
  margin-top: 32px;
  border-top: 1px solid var(--hairline);
}

.tel-ensuite summary,
.tel-linux summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  list-style: none;
  cursor: pointer;
}

.tel-ensuite summary::-webkit-details-marker,
.tel-linux summary::-webkit-details-marker {
  display: none;
}

/* Le chevron dit l'état replié ou déplié ; il tourne, il ne clignote pas. */
.tel-ensuite summary::before,
.tel-linux summary::before {
  content: "›";
  display: inline-block;
  width: 1ch;
  font-family: var(--mono);
  color: var(--text-muted);
  transition: transform 150ms var(--ease);
}

.tel-ensuite[open] summary::before,
.tel-linux[open] summary::before {
  transform: rotate(90deg);
}

.tel-ensuite summary {
  padding-block: 16px 4px;
  font-size: 15px;
  color: var(--text);
}

.tel-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tel-ensuite[open] .tel-etapes {
  animation: tel-apparait 180ms var(--ease);
}

@keyframes tel-apparait {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.tel-etape {
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  padding-block: 14px;
}

.tel-etape + .tel-etape {
  border-top: 1px solid var(--hairline);
}

.tel-etape-num {
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-muted);
}

.tel-etape-titre {
  font-weight: 560;
  color: var(--text);
}

.tel-etape-texte {
  font-size: 14px;
  color: var(--text-muted);
}

/* ── Empreinte ────────────────────────────────────────────────────────── */
.tel-empreinte {
  min-width: 0;
}

@media (max-width: 899px) {
  .tel-empreinte {
    padding-top: 24px;
    border-top: 1px solid var(--hairline);
  }
}

/* 64 signes en 8 groupes de 8 : on compare un groupe à la fois. Quatre
   colonnes tiennent à 375 px ; sous 340 px, deux. */
.tel-hash {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.tel-hash.rempli {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 4px 12px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .tel-hash {
    font-size: 15px;
  }

  .tel-hash.rempli {
    gap: 6px 14px;
  }
}

@media (max-width: 340px) {
  .tel-hash.rempli {
    grid-template-columns: repeat(2, max-content);
  }
}

.tel-hash-vide {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-muted);
}

.tel-copier {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

.tel-empreinte > .tel-copier {
  margin-top: 14px;
}

.tel-explique {
  margin-top: 22px;
  font-size: 14px;
  color: var(--text-muted);
}

.tel-commande + .tel-explique {
  margin-top: 12px;
}

/* La commande vit au palier du terminal, le plus sombre. */
.tel-commande {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--radius-xs);
  background: var(--seuil);
}

/* La commande se replie plutôt que de se couper : on la copie par le
   bouton, on la lit d'un coup d'œil. */
.tel-commande code {
  flex: 1;
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  color: var(--text);
}

/* ── Linux, replié ────────────────────────────────────────────────────── */
.tel-linux {
  border-bottom: 1px solid var(--border);
}

/* Déplacé en tête pour qui vient de Linux : la dalle Windows suit. */
.tel-linux + .tel-windows {
  margin-top: 32px;
}

.tel-linux summary {
  flex-wrap: nowrap;
  padding-block: 22px;
}

.tel-linux-texte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.tel-linux-titre {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

.tel-linux-resume {
  font-size: 14px;
  color: var(--text-muted);
}

.tel-linux-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 76ch;
  padding: 0 0 32px calc(1ch + 12px);
  color: var(--text-muted);
}

.tel-linux-corps strong,
.tel-linux-corps h3,
.tel-linux-corps code {
  color: var(--text);
}

.tel-linux-corps strong {
  font-weight: 600;
}

.tel-linux-corps h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.tel-linux-corps p + p {
  margin-top: 10px;
}

.tel-linux-installer p {
  margin-top: 10px;
}

.tel-linux-installer h3 + p {
  margin-top: 0;
}

.tel-linux-corps pre {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: var(--seuil);
  font-size: 13px;
  line-height: 1.5;
}

.tel-linux-corps pre code {
  font-size: inherit;
}

.tel-linux-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tel-linux-boutons:not(:has(a:not([hidden]))) {
  display: none;
}

.tel-etat {
  font-size: 14px;
}

.tel-linux-paquets {
  display: grid;
  gap: 10px;
  margin-top: -6px;
  font-family: var(--mono);
  font-size: 13px;
}

.tel-linux-paquets dt {
  color: var(--text-muted);
}

.tel-linux-paquets dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ── À savoir ─────────────────────────────────────────────────────────── */
.tel-savoir {
  margin-top: clamp(40px, 6vw, 64px);
}

.tel-savoir ul {
  max-width: 72ch;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.tel-savoir li {
  padding-block: 12px;
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
}

.tel-savoir strong {
  font-weight: 600;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .tel-ensuite[open] .tel-etapes {
    animation: none;
  }
}