/* ===========================================================================
   /application : la visite guidée de l'app.

   Six sections de texte, une seule illustration : le triptyque des catégories.
   C'est un arbitrage de la propriétaire, pris après la maquette : « j'enlèverais
   toutes les captures sauf celles de la section catégories ». La page n'a donc
   pas de gabarit en deux colonnes, pas de capture pleine largeur, pas de bloc
   réservé. Une colonne de lecture, et une bande d'images qui déborde.

   Aucun appel à l'action ici : la page en porte UN, `.cta-page`, servi par
   `onglets.css`, et la pastille de l'en-tête. La maquette en alignait cinq, et
   le retour était « ça fait cheap ».
   ========================================================================== */

/* ---------- La bande scannable ------------------------------------------- */
/* Une navigation, pas une liste de titres : les libellés sont des <span>, et
   la hiérarchie de la page va du h1 aux h2 sans palier intermédiaire. */

.appli-bande {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  margin: var(--sp-4) 0 var(--sp-6);
}
.appli-bande a {
  display: block;
  padding: 16px 18px;
  text-decoration: none;
  background: var(--card);
  border-radius: 2px;
  transition: background .15s ease;
}
.appli-bande a:hover { background: var(--card-hi); }
.appli-bande a:focus-visible { outline: 2px solid var(--blanc); outline-offset: 2px; }
.appli-bande a:first-child { border-radius: 12px 2px 2px 12px; }
.appli-bande a:last-child  { border-radius: 2px 12px 12px 2px; }

/* La variante NON CLIQUABLE, née avec /en/writing-prompts. Les vingt et un
   prompts ont la forme de la bande (un numéro, un titre, une ligne) mais ne
   mènent nulle part : ce sont des cartes de contenu, pas une navigation.
   En faire des <a> sans href aurait donné un élément focusable qui ne fait
   rien, annoncé « lien » par un lecteur d'écran.

   La règle vaut ici comme ailleurs : le look d'un composant partagé vit dans
   la feuille QUI POSSÈDE le composant, jamais dans celle d'une page. Elles
   reprennent donc la boîte de `.appli-bande a`, sans l'état de survol ni le
   focus, qui n'ont pas de sens sur du texte. Les arrondis d'extrémité restent
   aux ancres : une grille de contenu se lit en rangées, pas en une barre. */
.appli-bande__item {
  display: block;
  padding: 16px 18px;
  background: var(--card);
  border-radius: 2px;
}
/* Un seul CTA de corps par page : cette grille ne doit jamais devenir une
   rangée de boutons. Rien d'interactif ne s'y ajoute. */

.appli-bande__n {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 6px;
}
.appli-bande__t {
  display: block;
  font-family: var(--f-disp);
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: 15px;
  color: var(--blanc);
  margin-bottom: 4px;
}
.appli-bande p {
  color: var(--faint);
  font-size: 12.5px;
  margin: 0;
}

/* ---------- Les sections -------------------------------------------------- */

/* ⚠️ Sans `scroll-margin-top`, cinq des six ancres déposent leur titre SOUS le
   chrome collant. Mesuré à 1024 px : l'en-tête tient 0 à 78, la barre de
   sections 78 à 134, et un `h2` visé par une ancre arrivait à y = 53, soit
   81 px masqués. Seule `#ecrire` y échappait, parce que c'est la dernière
   section et que le bas du document borne le défilement.

   134 px de chrome plus 16 de respiration. La respiration est celle que
   `home.css` applique déjà à `#jouer`. Sous 900 px rien n'est collant, et la
   marge y creuserait un trou de 150 px au-dessus du titre visé : la règle est
   donc dans la media query, pas hors d'elle. */
@media (min-width: 900px) {
  .appli-sec { scroll-margin-top: calc(var(--header-h) + 72px); }
}

.appli-sec {
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--stroke);
  margin-top: var(--sp-5);
}
.appli-sec h2 {
  font-family: var(--f-disp);
  font-weight: 800;
  letter-spacing: var(--tight);
  font-size: var(--t-h3);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 var(--sp-2);
}
.appli-sec p {
  color: var(--muted);
  margin: 0 0 var(--sp-3);
}

/* ---------- La constellation ---------------------------------------------- */
/* Un dessin et non une capture : il porte l'argument de la ramification sans
   peser, et il ne redit aucune image déjà servie ailleurs sur le site. */

.appli-constell {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: var(--sp-3) 0 0;
}

/* ---------- Le triptyque des catégories ----------------------------------- */
/* Même technique que la galerie de l'accueil : défilement horizontal à
   l'étroit, rangée centrée dès qu'il y a la place. Trois colonnes fixes à
   toutes les largeurs donnaient 93 px par capture sur un écran de 360, pour
   une section dont la démonstration EST typographique. Mesuré sur maquette.

   La bande déborde le conteneur de texte, comme la vitrine : `.section-mince`
   plafonne à 680 px, ce qui est juste pour un paragraphe et étroit pour trois
   captures de téléphone côte à côte. */

.appli-strip {
  width: min(840px, 100vw - 40px);
  margin-inline: calc(50% - min(420px, 50vw - 20px));
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  padding: 2px 20px 10px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.appli-strip::-webkit-scrollbar { display: none; }

/* ⚠️ L'emplacement plafonne à 238 px dès ~384 px de viewport : 62vw vaut
   238 px à 383,87. Le `sizes` des images bascule donc à 383 px et NON à 860,
   qui est la largeur où changent `overflow-x` et le centrage, pas la largeur
   de l'emplacement. Mesuré avec la bascule à 860 : entre 581 et 860 px en
   densité 1, le navigateur tirait le palier 720 pour un emplacement de
   238 px, soit 75 Ko de trop sur les trois images. Les deux valeurs sont
   indépendantes, elles ne doivent pas être confondues. */
.appli-shot {
  flex: 0 0 min(62vw, 238px);
  scroll-snap-align: center;
  margin: 0;
  min-width: 0;
}
.appli-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-shot-lg);
  box-shadow: var(--sh-shot);
}
.appli-shot figcaption {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 10px;
}

@media (min-width: 860px) {
  .appli-strip { overflow-x: visible; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .appli-bande a { transition: none; }
  .appli-strip { scroll-behavior: auto; }
}