/* Page de téléchargement — partagée par telecharger.html et maison.html. */
/* ══ Download page — premium monochrome ═══════════════════════════════ */
.dl { --edge: color-mix(in oklab, var(--black) 9%, transparent);
      --edge-soft: color-mix(in oklab, var(--black) 6%, transparent);
      --lift: 0 1px 2px rgba(10,10,10,.04), 0 12px 32px -12px rgba(10,10,10,.12);
      --lift-hi: 0 2px 4px rgba(10,10,10,.06), 0 28px 60px -20px rgba(10,10,10,.28);
      position: relative; overflow: clip; }
/* Soft radial glow + faint dot grid for depth */
.dl::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in oklab, var(--black) 5%, transparent), transparent 60%),
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--black) 5%, transparent) 1px, transparent 0);
  background-size: auto, 26px 26px; -webkit-mask-image: linear-gradient(#000, transparent 78%); mask-image: linear-gradient(#000, transparent 78%); }
.dl-main { position:relative; z-index:1; max-width: 1040px; margin: 0 auto; padding: clamp(2.5rem,6vw,4.5rem) 1.5rem 6rem; }

/* Hero */
.dl-hero { text-align:center; max-width: 46rem; margin: 0 auto 2.75rem; }
.dl-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gray-600); border:1px solid var(--edge); background: var(--white); border-radius:100px; padding:.35rem .8rem; box-shadow: var(--lift); }
.dl-eyebrow .dot { width:6px; height:6px; border-radius:50%; background: var(--live); box-shadow:0 0 0 3px color-mix(in oklab, var(--live) 22%, transparent); }
.dl-hero h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); line-height:1.02; letter-spacing:-.045em; margin:1.1rem 0 .8rem; }
.dl-hero p { color: var(--gray-600); font-size: clamp(1rem,2.2vw,1.15rem); line-height:1.55; margin:0 auto; max-width:34rem; }

/* Recommended hero download (OS-detected) */
.dl-primary { position:relative; overflow:hidden; margin: 0 auto 3.5rem; max-width: 46rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  background: linear-gradient(180deg, #171717, #0a0a0a); color: var(--white); border-radius: 22px; padding: 1.6rem 1.75rem; box-shadow: var(--lift-hi); }
.dl-primary::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 120% at 15% -20%, rgba(255,255,255,.12), transparent 55%); pointer-events:none; }
.dl-primary .pi-left { display:flex; align-items:center; gap:1.1rem; position:relative; z-index:1; }
.dl-primary .pi-badge { display:inline-flex; align-items:center; flex-shrink:0; }
.dl-primary .pi-badge svg { width:48px; height:48px; fill: var(--white); }
.dl-primary .pi-os { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.dl-primary .pi-sub { font-family: var(--font-mono); font-size:.78rem; color: rgba(255,255,255,.6); margin-top:.15rem; }
.dl-primary .btn { position:relative; z-index:1; background: var(--white); color: var(--black); padding:.8rem 1.4rem; font-size:.95rem; box-shadow:none; }
.dl-primary .btn.is-soon { background: rgba(255,255,255,.12); color: rgba(255,255,255,.6); }

/* Section label — un titre ciblé par une ancre (#mobile, #telecharger) ne doit
   pas finir sous l'en-tête collant de la page (.legal-nav). */
.dl-slabel[id] { scroll-margin-top: 5.5rem; }
/* Sans `gap` : le texte du titre et le numéro de version sont deux éléments de
   la boîte flexible, et l'écart les séparait (« v   1.0.31 »). Seuls le filet
   et la date prennent leur distance. */
.dl-slabel { display:flex; align-items:baseline; font-family: var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--gray-400); margin: 2.75rem 0 1.15rem; }
.dl-slabel::after { content:""; flex:1; height:1px; background: var(--edge-soft); margin-inline-start:.6rem; }
/* Date de publication : discrète, elle informe sans concurrencer la version. */
.dl-slabel .dl-date { order: 3; margin-inline-start:.6rem; text-transform: none; letter-spacing: .02em;
  color: var(--gray-400); font-size: .72rem; white-space: nowrap; }
.dl-slabel .dl-date:not(:empty)::before { content: "· "; }


/* Cards grid */
.dl-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:1rem; }
/* Une grille unique alignait les sept installeurs à la file : les deux
   macOS se retrouvaient séparés par un retour à la ligne et le dernier
   paquet Debian pendait seul sur sa rangée. Une pile de groupes, un par
   famille de système, garde chaque famille d'un seul tenant. */
.dl-stack { display:flex; flex-direction:column; gap:1.9rem; }
.dl-group-title { font-family: var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color: var(--gray-400); margin:0 0 .8rem; }
.dl-card { position:relative; background: var(--white); border:1px solid var(--edge); border-radius:18px; padding:1.35rem; display:flex; flex-direction:column; gap:1.1rem; box-shadow: var(--lift); transition: transform .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo), border-color .25s; }
.dl-card:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); border-color: color-mix(in oklab, var(--black) 16%, transparent); }
.dl-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.dl-ico { display:inline-flex; align-items:center; flex-shrink:0; }
.dl-ico svg { width:38px; height:38px; fill: var(--black); }
.dl-card-meta { text-align:right; }
.dl-card-os { font-weight:700; letter-spacing:-.01em; font-size:1.02rem; }
.dl-card-arch { font-family: var(--font-mono); font-size:.74rem; color: var(--gray-400); margin-top:.1rem; }
.dl-card-date { font-family: var(--font-mono); font-size:.68rem; color: var(--gray-400); margin-top:.25rem; }
.dl-card.is-reco .dl-card-date { color: rgba(255,255,255,.45); }
.dl-tag { font-family: var(--font-mono); font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; background: var(--black); color:var(--white); border-radius:100px; padding:.18rem .5rem; }
.btn-block { width:100%; }
.btn .ar { width:15px; height:15px; }
/* Le sélecteur doit reprendre les deux :not() de style.css. Sans eux, cette
   règle pèse 0,2,0 contre 0,3,0 pour `.btn:not(.btn-ghost):not(.btn-outline)`
   — chaque :not() compte son argument. Elle était donc muette, et un bouton
   inactif s'affichait en NOIR PLEIN, identique au vrai « Télécharger ». */
.btn.is-soon:not(.btn-ghost):not(.btn-outline) { background: none; color: var(--gray-400); border:1px solid var(--gray-200); box-shadow:none; }
.btn.is-soon { pointer-events:none; }

/* Recommended card = inverted (dark) */
.dl-card.is-reco { background: linear-gradient(180deg,#171717,#0a0a0a); border-color: transparent; color: var(--white); box-shadow: var(--lift-hi); }
.dl-card.is-reco .dl-ico svg { fill: var(--white); }
.dl-card.is-reco .dl-card-arch { color: rgba(255,255,255,.55); }
.dl-card.is-reco .dl-tag { background: var(--white); color: var(--black); }
.dl-card.is-reco .btn { background: var(--white); color: var(--black); }
.dl-card.is-reco:hover { transform: translateY(-4px); }

/* Mobile stores */
.dl-stores { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1rem; }
.dl-store { display:flex; align-items:center; gap:1rem; background: var(--white); border:1px solid var(--edge); border-radius:16px; padding:1rem 1.2rem; box-shadow: var(--lift); transition: transform .25s var(--ease-out-expo), box-shadow .25s; }
.dl-store:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); }
.dl-store .dl-ico svg { width:34px; height:34px; }
.dl-store .s-info { flex:1; min-width:0; }
.dl-store .s-name { font-weight:700; letter-spacing:-.01em; }
.dl-store .s-sub { font-family: var(--font-mono); font-size:.72rem; color: var(--gray-400); }

/* Version history */
.dl-table-wrap { border:1px solid var(--edge); border-radius:16px; overflow:hidden; box-shadow: var(--lift); background: var(--white); }
table.dl-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.dl-table thead th { text-align:left; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--gray-400); padding:.85rem 1.15rem; border-bottom:1px solid var(--edge-soft); }
.dl-table td { padding:.95rem 1.15rem; border-bottom:1px solid var(--edge-soft); vertical-align:top; }
.dl-table tr:last-child td { border-bottom:none; }
.dl-ver { font-family: var(--font-mono); font-weight:600; white-space:nowrap; }
.dl-date { color: var(--gray-600); white-space:nowrap; font-variant-numeric: tabular-nums; }
/* Sans largeur imposée, la mise en page automatique du tableau donnait
   l'essentiel de la place aux pastilles de téléchargement et écrasait les
   nouveautés en une colonne étroite — un mur de texte sur vingt lignes. */
.dl-notes { color: var(--gray-800); line-height:1.55; }
.dl-table th:nth-child(3), .dl-table td:nth-child(3) { width:52%; }
.dl-table th:nth-child(4), .dl-table td:nth-child(4) { width:30%; }
.dl-dllinks { display:flex; gap:.5rem; flex-wrap:wrap; }
.dl-dllinks a { display:inline-flex; align-items:center; gap:.3rem; font-family: var(--font-mono); font-size:.76rem; padding:.25rem .6rem; border:1px solid var(--edge); border-radius:100px; text-decoration:none; color: var(--black); transition: background .15s, border-color .15s; }
.dl-dllinks a:hover { border-color: color-mix(in oklab, var(--black) 20%, transparent); }
.dl-dllinks .off { font-family: var(--font-mono); font-size:.76rem; color: var(--gray-300); }

.dl-foot { margin-top:2.5rem; font-size:.82rem; color: var(--gray-400); text-align:center; }
.dl-empty { color: var(--gray-400); font-family: var(--font-mono); font-size:.85rem; }

/* Page coupée depuis l'admin : le seul contenu qui reste à la place des
   installeurs. Aucun lien de téléchargement n'est rendu dans ce cas. */
.dl-notice { max-width: 34rem; margin: 0 auto; text-align:center; background: var(--white); border:1px solid var(--edge); border-radius:18px; padding: 2rem 1.75rem; box-shadow: var(--lift); }
.dl-notice-ico { display:inline-flex; margin-bottom:.9rem; color: var(--gray-400); }
.dl-notice-ico svg { width:32px; height:32px; }
.dl-notice h2 { font-size:1.2rem; letter-spacing:-.02em; margin:0 0 .5rem; }
.dl-notice-text { color: var(--gray-600); font-size:.95rem; line-height:1.55; margin:0 0 1.4rem; }

/* Reveal on load */
@media (prefers-reduced-motion: no-preference) {
  .dl-reveal { opacity:0; transform: translateY(14px); animation: dl-in .7s var(--ease-out-expo) forwards; }
  .dl-reveal.d1{animation-delay:.05s}.dl-reveal.d2{animation-delay:.12s}.dl-reveal.d3{animation-delay:.19s}.dl-reveal.d4{animation-delay:.26s}
  @keyframes dl-in { to { opacity:1; transform:none; } }
}
@media (max-width:640px){ .dl-primary{flex-direction:column; align-items:stretch; text-align:left;} .dl-primary .btn{justify-content:center;} }

/* Sur un téléphone, « publiée le 23 septembre 2026 » ne tient pas à côté du
   titre : elle passait sous le bord droit, coupée. Elle prend sa propre ligne. */
@media (max-width:640px){
  .dl-slabel { flex-wrap:wrap; row-gap:.35rem; }
  .dl-slabel .dl-date { flex-basis:100%; margin-inline-start:0; }
  .dl-slabel .dl-date:not(:empty)::before { content: none; }
}

/* L'historique sur un téléphone : quatre colonnes ne tiennent pas en 390 px —
   les nouveautés partaient hors du cadre, coupées au milieu des mots. Chaque
   version devient une fiche : version et date sur une ligne, puis les
   nouveautés, puis les téléchargements. */
@media (max-width:640px){
  .dl-table thead { display:none; }
  .dl-table, .dl-table tbody, .dl-table tr, .dl-table td { display:block; }
  .dl-table tr { padding:.95rem 1.15rem; border-bottom:1px solid var(--edge-soft); }
  .dl-table tr:last-child { border-bottom:none; }
  .dl-table td, .dl-table td:nth-child(3), .dl-table td:nth-child(4) { width:auto; padding:0; border-bottom:none; }
  .dl-table td.dl-ver, .dl-table td.dl-date { display:inline-block; margin:0 .75rem .45rem 0; }
  .dl-table td.dl-notes { margin-bottom:.7rem; }
}