/* Refonte — page /download (page témoin, plan §6).
   Toute valeur vient de css/v2/jetons.css. */

/* ——— Héro asymétrique (§6.2) : contenu 7 / signature 5 ——— */

/* Aucun filet sous le hero : la ligne traversait toute la page et coupait
   l'entree en deux (retour d'Antoine, 2026-08-27). L'espacement suffit. */
/* Padding bas plus court que le haut : mesuré à 190 px, le creux avant
   « Installer » dépassait le rythme inter-sections de 96 px (2026-08-28). */
.hero-download {
  padding-block: var(--e-7) var(--e-4);
}

.hero-download__grille {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-download {
    padding-block: var(--e-8) var(--e-5);
  }

  .hero-download__grille {
    grid-template-columns: 7fr 5fr;
    gap: var(--e-7);
  }
}

.hero-download h1 {
  font-size: var(--t-heros);
  line-height: 1.08;
}

.hero-download__definition {
  font-size: var(--t-h4);
  line-height: 1.4;
  max-width: 46ch;
}

/* Sous 390 px, le chapô passe à la taille du corps : en 19 px il prenait huit
   lignes et repoussait le primaire hors du premier écran (lot 7, A236). */
@media (max-width: 389px) {
  .hero-download__definition {
    font-size: var(--t-corps);
    line-height: 1.55;
  }
}

.hero-download__reco {
  color: var(--texte-2);
  margin-bottom: var(--e-4);
}

.hero-download__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}

/* Sous 480 px, les deux boutons empilés prennent la largeur utile, comme ceux
   des cartes, au lieu de former un escalier (lot 7, A508). */
@media (max-width: 479px) {
  .hero-download__actions .bouton {
    flex: 1 1 100%;
    max-width: 26rem;
  }
}

.hero-download__systemes {
  font-size: var(--t-petit);
  color: var(--texte-2);
}

/* Liens de repli en rangée « · » : cible de 44 px de haut (lot 7, A147). */
.hero-download__systemes a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
}

/* Bandeau AMCF dans le héros (2026-08-28) : il remplace la ligne de confiance
   et reprend le style bordure gauche de .bloc-amcf (règle dans composants.css). */
/* Cap de 52ch levé le 2026-09-01 (QCM Antoine) : à cette mesure la phrase
   tenait en trois lignes étroites au milieu d'une colonne bien plus large. Le
   bandeau prend maintenant toute la colonne du héros, ce qui laisse la place
   au troisième lien (soutien). */
.hero-download__amcf {
  font-size: var(--t-petit);
  color: var(--texte-2);
  margin-top: var(--e-5);
}

.hero-download__amcf p {
  margin: 0;
}

/* Signature typographique : constellation composée (QCM Antoine 2026-08-28) —
   ni rangées ni colonnes, chaque glyphe placé et dimensionné à la main. Les
   tailles en cqi suivent la largeur de la carte (container query) ; le
   translate(-50%, -50%) fait des coordonnées left/top des centres de glyphes.
   Écarts de taille resserrés : 24 à 32 cqi. Tous les `top` descendus de 5 %
   le 2026-09-25 (lot 7, A526) : la constellation penchait vers le haut, 12 px
   de marge au-dessus du É contre 62 px sous la rangée du bas. */
.hero-download__signature {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 10 / 11;
  border: 1px solid var(--bordure);
  background: var(--surface);
}

@media (max-width: 1023px) {
  .hero-download__signature {
    max-width: 28rem;
    margin-inline: auto;
  }
}

.hero-download__signature .caractere-signature {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.hero-download__signature .sig-eacute     { left: 20%; top: 21%; font-size: 30cqi; }
.hero-download__signature .sig-cedille    { left: 52%; top: 27%; font-size: 32cqi; color: var(--action); }
.hero-download__signature .sig-guillemets { left: 81%; top: 20%; font-size: 24cqi; }
.hero-download__signature .sig-arobase    { left: 80%; top: 49%; font-size: 28cqi; color: var(--action); }
.hero-download__signature .sig-accolades  { left: 15%; top: 50%; font-size: 26cqi; }
.hero-download__signature .sig-oe         { left: 46%; top: 57%; font-size: 30cqi; }
.hero-download__signature .sig-ntilde     { left: 17%; top: 82%; font-size: 26cqi; color: var(--action); }
.hero-download__signature .sig-cadratin   { left: 49%; top: 79%; font-size: 30cqi; color: var(--action); }
.hero-download__signature .sig-pi         { left: 80%; top: 80%; font-size: 30cqi; }

@media (max-width: 389px) {
  .hero-download__signature {
    display: none;
  }
}

/* ——— Cartes de canaux ——— */

.canaux {
  display: grid;
  gap: var(--e-5);
  margin-bottom: var(--e-6);
}

/* Windows depuis le 2026-09-01 (QCM Antoine) : le canal recommandé à gauche, les
   deux canaux de repli empilés à droite. `stretch` et non `start` : c'est ce qui
   fait descendre le bas de la carte Store au niveau du bas de la carte EXE. */
@media (min-width: 768px) {
  .canaux--deux {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.canaux__pile {
  display: grid;
  gap: var(--e-5);
  align-content: start;
}

.canal {
  background: var(--surface);
  border: 1px solid var(--bordure);
  padding: var(--e-5);
}

.canal__contexte {
  color: var(--texte-2);
  font-size: var(--t-petit);
  margin-bottom: var(--e-4);
}

.canal__faits {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-5);
  font-size: var(--t-petit);
}

.canal__faits li {
  padding-left: var(--e-5);
  position: relative;
  margin-bottom: var(--e-2);
}

/* Les touches ne gonflent plus la ligne : 33 px d'écart pour un item à kbd
   contre 29-30 px pour les autres (lot 7, A513). */
.canal__faits kbd {
  line-height: 1.3;
}

/* Puce en filet, pas en pictogramme */
.canal__faits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--action);
}

/* Le bouton epouse la carte, mais s'arrete avant de traverser la page : sur
   macOS et Linux la carte occupe toute la largeur (retour d'Antoine, 2026-08-27). */
.canal .bouton {
  width: 100%;
  max-width: 26rem;
}

/* macOS et Linux n'ont qu'un canal : la carte non plus ne traverse plus la
   page — plus de la moitie restait a vide a 1920 px (2026-08-28). */
.canaux:not(.canaux--deux) .canal {
  max-width: 44rem;
}

.canal__note {
  font-size: var(--t-petit);
  color: var(--texte-2);
  margin: var(--e-3) 0 0;
}

/* ——— Liens caractères et étapes suivantes ——— */

/* Familles de caracteres (remplace la liste des 11 pages caractere, demande
   d'Antoine du 2026-08-27). Deux colonnes des 768 px : les libelles sont courts
   et la liste tiendrait sinon sur une colonne inutilement longue. */
.familles {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-5);
}

.familles li {
  margin-bottom: var(--e-5);
  break-inside: avoid;
}

/* Colonnes CSS et non grille : les familles n'ont pas toutes une note d'usage,
   et une grille alignait les rangees en laissant de grands trous sous les
   courtes (constat visuel du 2026-08-27). Le flux en colonnes les enchaine. */
@media (min-width: 768px) {
  .familles {
    column-count: 2;
    column-gap: var(--e-7);
  }
}

.familles strong {
  display: block;
  margin-bottom: var(--e-1);
}

/* Enfants directs seulement : un `.insecable` imbriqué ne doit pas passer en
   bloc. */
.familles li > span {
  display: block;
  color: var(--texte-2);
  font-size: var(--t-petit);
}

/* Les caracteres sont l'argument de la section : ils se lisent a la taille du
   corps, pas en note de bas de page (demande d'Antoine, 2026-08-27) ; montes
   d'un cran le 2026-08-28 avec la promotion de la section (QCM). */
/* Selecteur a deux classes : `.familles span` porte deja une taille et le
   battrait a specificite egale. */
.familles .familles__exemples {
  color: var(--encre);
  font-size: var(--t-h3);
  letter-spacing: 0.06em;
  margin-bottom: var(--e-1);
}

/* Glyphes liés à leur page caractère (lot 7, A413) : un « É » seul fait
   14 px de large ; la boîte monte la cible à 24 px. */
.familles__exemples a {
  display: inline-flex;
  justify-content: center;
  min-width: var(--e-5);
}

/* ——— Relais mobile ——— */

.relais-mobile {
  border: 1px solid var(--bordure);
  background: var(--surface);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-6);
}

.relais-mobile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-3);
}