/* ============================================================
   Aplomb — page d'accueil
   La seule surface publique. Elle emprunte les bandes, les filets et la
   typographie de l'atelier ; ce fichier ne pose que ce qui lui est propre.
   ============================================================ */

/* L'accueil est la seule page qui doive convaincre, donc la seule où un titre a
   le droit d'occuper la hauteur d'un écran. Plus grand que .a-hero, qui sert à
   un nombre mesuré et non à une phrase. */
.accueil .ac-hero {
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  line-height: .9;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

.accueil .ac-chapo {
  font-family: var(--f-ui);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  margin: var(--u4) 0 0;
}

.accueil .ac-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u3);
  margin: var(--u6) 0 0;
}

/* ------------------------------------------------------------
   La vidéo — emplacement tenu même quand le fichier n'existe pas encore
   ------------------------------------------------------------ */

/* La hauteur est réservée dès maintenant : sans elle, déposer la vidéo
   déplacerait tout ce qui suit et changerait la page de silhouette. */
.accueil .ac-video {
  margin-top: var(--u4);
  border: 2px solid var(--rule-strong);
  background: var(--surface-sunk);
  aspect-ratio: 16 / 9;
  width: 100%;
}

.accueil .ac-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--ammo-1);
}

/* ------------------------------------------------------------
   Les étapes — numérotées à la main, la puce native ne se met pas à la charte
   ------------------------------------------------------------ */
.accueil .ac-etapes {
  list-style: none;
  margin: var(--u4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
}

/* Le filet vertical sépare les étapes comme le filet horizontal sépare les
   bandes : c'est la même règle, tournée d'un quart de tour. */
.accueil .ac-etapes li {
  display: flex;
  flex-direction: column;
  gap: var(--u2);
  padding: var(--u4);
  border-left: 2px solid var(--rule);
}

.accueil .ac-etapes li:first-child { border-left: 0; }

.accueil .ac-num {
  font-family: var(--f-perf);
  font-stretch: condensed;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.accueil .ac-etape-titre {
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--ink);
}

.accueil .ac-etape-detail {
  font-family: var(--f-ui);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ------------------------------------------------------------
   Ce qui est mesuré
   ------------------------------------------------------------ */

/* Six lignes de définitions se lisaient comme un glossaire : la même graisse, la
   même encre et le même filet du haut en bas, rien qui donne à entrer. Chaque
   mesure occupe désormais sa case, et son schéma dit avant le texte de quelle
   grandeur il s'agit.

   La gouttière fait le filet plutôt qu'une bordure : la grille se replie de trois
   colonnes à une, et une bordure ne sait pas séparer deux rangées sans se doubler
   là où le repli tombe. */
.accueil .ac-mesures {
  list-style: none;
  margin: var(--u4) 0 0;
  padding: 0;
  display: grid;
  /* Trois colonnes posées, et non `auto-fit` : six cases se rangent sans reste en
     trois, en deux ou en une, alors qu'un ajustement automatique en fabrique
     quatre à certaines largeurs et laisse deux cases vides — vides et visibles,
     puisque c'est le fond de la grille qui dessine les filets. */
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--rule);
}

@media (max-width: 900px) {
  .accueil .ac-mesures { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .accueil .ac-mesures { grid-template-columns: 1fr; }
}

.accueil .ac-mesures li {
  display: flex;
  flex-direction: column;
  gap: var(--u3);
  padding: var(--u6) var(--u4);
  background: var(--surface);
}

/* Le schéma est un dessin au trait, à l'épaisseur des filets de la charte : c'est
   la même main. L'accent ne porte que la grandeur mesurée, le pâle ce qui la situe
   — sans ce partage les six dessins se ressemblent tous.

   L'épaisseur est posée en unités du tracé, pas en pixels : elle doit retomber sur
   le filet de 2 px une fois la mise à l'échelle faite, donc elle se recalcule dès
   que la largeur rendue change. */
.accueil .ac-sch {
  display: block;
  width: 120px;
  height: 73px;
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.accueil .ac-sch .mesure { stroke: var(--accent); }
.accueil .ac-sch .fantome { stroke: var(--rule-strong); stroke-dasharray: 3 4; }
.accueil .ac-sch .pivot { fill: var(--rule-strong); stroke: none; }
.accueil .ac-sch .pastille { fill: var(--accent); stroke: none; }

.accueil .ac-mesure-nom {
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--ink);
}

.accueil .ac-mesure-quoi {
  font-family: var(--f-ui);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: calc(-1 * var(--u2));
}

/* ------------------------------------------------------------
   La boucle
   ------------------------------------------------------------ */

/* La bande reste dans le registre clair, comme le reste de l'accueil : c'est le
   tracé qui lui donne sa présence, pas un fond inversé. Le lavis d'accent la
   détache sans la trancher, et c'est un jeton de la charte — donc il suit le thème
   sans qu'on ait à le régler deux fois. */
.accueil .ac-bande-boucle {
  background: var(--accent-wash);
  padding-bottom: var(--u8);
}

/* La boucle se lit de haut en bas et non de gauche à droite. Trois colonnes
   l'avaient d'abord montrée à plat, avec un retour posé sous la rangée : ce trait
   ne touchait rien à ses deux bouts, et les chevrons, coincés dans la gouttière,
   se lisaient comme une ponctuation collée au mot suivant.

   À la verticale, le rail a un départ et une arrivée visibles — il part sous le
   dernier maillon, longe la colonne et pointe dans le premier. C'est le seul
   parcours qui se dessine sans deviner où tombent les cases. */
.accueil .ac-boucle {
  list-style: none;
  position: relative;
  margin: var(--u6) 0 0;
  padding: 0 0 0 var(--u12);
  display: grid;
  row-gap: var(--u6);
}

/* Le verbe et sa phrase sur la même ligne, dans deux colonnes : les trois verbes
   s'alignent alors sur une verticale, ce qui donne au rail un bord à suivre. */
.accueil .ac-maillon {
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr;
  column-gap: var(--u6);
  align-items: baseline;
}

/* Le rail de retour : trois côtés d'un rectangle, ouvert à droite. */
.accueil .ac-boucle::after {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  bottom: 14px;
  width: var(--u6);
  border: 2px solid var(--accent);
  border-right: 0;
}

/* La pointe au bout haut du rail, tournée vers le premier maillon. Sa géométrie
   est celle d'un carré tourné d'un huitième de tour : le sommet se retrouve alors
   à mi-hauteur sur le côté droit, ce qui la pose sur le trait et non à côté. */
.accueil .ac-boucle::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* Le sens de lecture entre deux maillons, dans la colonne du verbe et non sur le
   rail : celui-ci remonte, ceux-là descendent, et les confondre inverserait le
   sens du parcours. */
.accueil .ac-maillon + .ac-maillon::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-1 * var(--u6) / 2 - 6px);
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

.accueil .ac-maillon-nom {
  font-family: var(--f-perf);
  font-stretch: condensed;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}

.accueil .ac-maillon-quoi {
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0;
}

/* ------------------------------------------------------------
   L'en-tête et le pied
   ------------------------------------------------------------ */

/* Le bouton de l'en-tête ne prend pas la hauteur des liens qui l'entourent :
   sans cette borne, il fait grandir toute la barre.

   La couleur est reposée ici parce que `.atelier .compte a` est plus spécifique
   que `.atelier .bouton` : sans elle, le texte du bouton prend la teinte des liens
   de navigation et se retrouve vert sur fond vert. */
.accueil .app-bar .bouton {
  min-height: 32px;
  padding: 0 var(--u3);
  font-size: 13px;
  color: var(--accent-ink);
}

.accueil .app-bar .bouton:hover { color: var(--accent-ink); }

/* La barre de l'accueil n'a pas les six destinations de l'atelier, donc pas de
   panneau : ses trois éléments se rangent d'eux-mêmes. Les ordres sont posés ici
   pour toutes les largeurs, parce que le resserrement de l'atelier en donne
   d'autres à `.brand` et `.compte` et qu'un seul des deux jeux doit s'appliquer. */
.accueil .app-bar .brand { order: 1; }
.accueil .app-bar .compte { order: 3; }

/* La navigation de l'atelier occupe toute la ligne pour repousser le compte à
   droite. Ici elle s'étire à la place : à cette largeur-là, `width: 100%` la
   ferait passer seule à la ligne dès que la barre s'autorise à se replier, et le
   compte se retrouverait sur une troisième. */
.accueil .app-bar .nav { order: 2; width: auto; flex: 1 1 auto; }

/* Deux libellés de trois mots : sans cette règle ils se coupent en milieu de
   phrase dès que la barre se resserre, et l'en-tête passe à deux lignes de liens
   au lieu d'une. */
.accueil .app-bar .nav a { white-space: nowrap; }

@media (max-width: 700px) {
  .accueil .app-bar { flex-wrap: wrap; }
  .accueil .app-bar .compte { order: 2; margin-left: auto; }
  .accueil .app-bar .nav { order: 3; flex: 1 0 100%; width: auto; }

  /* Sur leur propre ligne, ces deux liens se visent au pouce : la hauteur d'une
     capitale ne suffit pas. Rien ne bouge à l'écran, seule la zone grandit —
     c'est le même correctif que celui du bandeau du terrain. */
  .accueil .app-bar .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding-bottom: 0;
  }
}

.accueil .ac-pied {
  border-top: 2px solid var(--rule-strong);
  padding: var(--u6) var(--u4);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.8;
}

.accueil .ac-pied p { margin: 0; }
.accueil .ac-pied-note { color: var(--ink-3); opacity: .8; }

/* ------------------------------------------------------------
   Resserrement
   ------------------------------------------------------------ */
@media (max-width: 620px) {
  /* Les filets verticaux n'ont plus de sens sur une seule colonne : ils
     redeviennent horizontaux, comme les bandes. */
  .accueil .ac-etapes li {
    border-left: 0;
    border-top: 2px solid var(--rule);
    padding: var(--u4) var(--u1);
  }

  .accueil .ac-etapes li:first-child { border-top: 0; }

  /* La colonne du verbe ne tient plus à côté de sa phrase : elles s'empilent. Le
     rail et son sens de parcours ne bougent pas — c'est la seule chose que la
     disposition verticale n'a pas à renégocier en se resserrant. */
  .accueil .ac-boucle { padding-left: var(--u8); }

  .accueil .ac-maillon {
    grid-template-columns: 1fr;
    row-gap: var(--u2);
  }

  .accueil .ac-boucle::after { width: var(--u4); top: 15px; }
  .accueil .ac-boucle::before { left: 3px; top: 10px; }

  .accueil .ac-maillon-nom { font-size: 1.9rem; }

  .accueil .ac-actions .bouton { width: 100%; }

  .accueil .ac-pied { padding: var(--u6) var(--u3); }
}