Affichage premium en PowerShell — Guide pas à pas

Version 1.1 · Ascenseur premium — édition MODE 83 / Atelier TSSR

Guide pas à pas pour grands débutants : obtenir un affichage premium (cadres dorés, couleurs) pour n'importe quelle commande PowerShell sous Windows 10/11 natif, sans aucun prérequis.

Cette version enrichit la précédente d'un bouton « retour haut de page » à effet ascenseur sonorisé, en respectant strictement la discipline additive du projet : aucune ligne existante n'a été modifiée.

---

Sommaire

1. Nouveautés de la version 1.1
2. Aperçu du bouton ascenseur
3. Comportement détaillé
4. Sons — conception audio
5. Accessibilité
6. Architecture du fichier
7. Compatibilité navigateurs
8. Personnalisation rapide
9. Journal des versions
10. Licence & crédits

---

Nouveautés de la version 1.1

Un seul ajout, entièrement autonome, inséré juste avant la balise </body> :

• Bouton flottant circulaire doré en bas à droite de la page, positionné au-dessus du bouton « Imprimer / PDF » existant.
• Apparition automatique dès que l'utilisateur défile de plus de 320 pixels vers le bas (fondu + légère mise à l'échelle).
• Effet ascenseur au clic : remontée fluide vers le haut de la page en ~950 ms, avec courbe d'accélération ease-in-out cubique (démarrage doux, milieu rapide, arrivée freinée — sensation d'une vraie cabine).
• Deux sons synthétisés en Web Audio API native :
  • un bip d'appel au départ (sinus aigu qui glisse de La5 vers Mi6),
  • un carillon deux notes à l'arrivée (Sol6 puis Do6, style « ding-dong » d'étage).
• Micro-animations pendant la montée : la cabine (icône flèche) vibre légèrement, un pastille dorée « étage » pulse en haut à droite du bouton.
• Touche Home enrichie : déclenche également l'ascenseur avec sons (sans bloquer Ctrl+Home qui reste le comportement natif du navigateur).

---

Aperçu du bouton ascenseur

   ┌────────────────────────┐
   │      Bouton retour     │
   │      haut de page      │      ← visible dès que
   │                        │        l'utilisateur défile > 320 px
   │        ┌─────┐         │
   │        │  ▲  │  •      │      ← bouton circulaire doré
   │        └─────┘         │        avec pastille « étage »
   │                        │
   │   ┌──────────────┐     │
   │   │ Imprimer/PDF │     │      ← bouton existant, intact
   │   └──────────────┘     │
   └────────────────────────┘

Le style suit exactement la palette Obsidienne & Or du reste du guide : gradient --or-clair → --or sur la surface, bord --or-pale, ombre chaude, liseré interne blanc discret. En mode clair, la bordure est ajustée pour rester lisible sans jamais changer l'esprit doré.

---

Comportement détaillé

Événement	Effet visuel	Effet sonore
Défilement > 320 px	Fondu + montée de 14 px + léger scale(0.92→1)	—
Défilement retour < 320 px	Fondu inverse	—
Survol souris	Élévation -3 px, scale(1.04), éclat +8 %	—
Clic	Cabine vibre, pastille « étage » s'allume et pulse	Bip de départ (~380 ms)
Pendant la montée	Défilement en 950 ms, courbe ease-in-out cubique	—
Arrivée en haut	Cabine se stabilise, pastille s'éteint	Ding-dong d'arrivée (~1000 ms)
Touche Home (sans Ctrl)	Même comportement qu'un clic	Départ + arrivée
prefers-reduced-motion: reduce	Saut direct sans animation	Départ + arrivée conservés

---

Sons — conception audio

Les sons sont synthétisés à la volée en Web Audio API — aucun fichier audio embarqué, aucune requête réseau, aucun poids ajouté. Le contexte audio est créé au premier clic (conformément aux règles de politique auto-play des navigateurs modernes).

Son de départ — bip d'appel

Un oscillateur sinusoïdal qui glisse rapidement d'un La5 (880 Hz) vers un Mi6 (1320 Hz) en 90 ms, avec une enveloppe attaque-extinction très courte (~400 ms). Le résultat évoque le bip d'un bouton d'appel d'ascenseur qui vient d'être pressé.

Son d'arrivée — carillon deux notes

Deux oscillateurs sinusoïdaux joués en séquence :

• DING : Sol6 (1568 Hz), extinction naturelle ~550 ms
• DONG : Do6 (1046 Hz), décalé de 240 ms, extinction ~700 ms

L'intervalle Sol6 → Do6 correspond à la sonnerie « ding-dong » classique des ascenseurs Otis / Schindler à l'ouverture des portes à un étage.

Volume

Les gains crête sont plafonnés à 0.22 – 0.28 (échelle Web Audio), soit un niveau audible mais discret, jamais agressif.

---

Accessibilité

• aria-label explicite : « Retour en haut de la page avec effet ascenseur ».
• prefers-reduced-motion: reduce entièrement respecté : la remontée devient un saut direct (scrollTo(0,0)), les vibrations et le pulsé sont désactivés, mais les deux sons restent joués (feedback audio non-vestibulaire).
• Focus clavier visible : contour blanc outline: 3px solid #fff en focus visible.
• Bouton exclu de l'impression : @media print { display: none !important; } (cohérent avec la feuille d'impression existante).
• Contraste : gradient or sur icône encre noire (#1a1408) — ratio bien au-delà de WCAG AA.
• Zone de clic : 52 × 52 px, au-dessus du seuil recommandé de 44 × 44 px.

---

Architecture du fichier

Le fichier index.html est un livrable autonome unique : aucun build, aucune dépendance NPM, aucun fichier externe autre que les polices Google Fonts (Playfair Display, Atkinson Hyperlegible, JetBrains Mono).

index.html  (1326 lignes)
├── Lignes 1 – 792   → Guide original (thème, en-tête, hero,
│                       étapes 1 à 7, dépannage, aide-mémoire,
│                       pied, bouton « Imprimer / PDF »)
├── Lignes 807 – 921 → Scripts d'origine
│                     (horloge, aperçu console, boutons Copier, reveal)
├── Lignes 922 – 1072 → AJOUT ADDITIF 1.0 : bascule thème clair/sombre
│                        + plancher de lisibilité 1.08 rem
└── Lignes 1073 – 1324 → AJOUT ADDITIF 1.1 : bouton ascenseur premium
                          ├── HTML  : <button id="bouton-ascenseur">
                          ├── CSS   : <style id="ascenseur-mode83">
                          └── JS    : Web Audio API + scroll animé

Chaque bloc additif est délimité par un cartouche de commentaires identifiant sa fonction, et ne fait référence qu'à ses propres identifiants (#bouton-ascenseur, .cabine, .etage, .monte, .visible, #ascenseur-mode83).

---

Compatibilité navigateurs

Navigateur	Version minimale	Statut
Chrome / Edge	66+	✅ Support complet
Firefox	76+	✅ Support complet
Safari (macOS/iOS)	14.1+	✅ Support complet (webkitAudioContext géré)
Opera	53+	✅ Support complet
Internet Explorer	—	❌ Non pris en charge (le reste du guide non plus)

Le script utilise AudioContext || webkitAudioContext, requestAnimationFrame, window.matchMedia et passive:true sur l'écouteur scroll — tous stables et supportés depuis 2018.

En cas d'absence de Web Audio API, l'ascenseur fonctionne quand même (scroll animé), seuls les sons sont silencieusement omis (aucune erreur console).

---

Personnalisation rapide

Toutes les valeurs sensibles sont regroupées en haut du script, juste après le cartouche :

var SEUIL_AFFICHAGE = 320;   // px avant apparition du bouton
var DUREE_MONTEE    = 950;   // ms pour la remontée complète

Autres réglages fréquents :

Envie	Fichier · où chercher	Valeur à modifier
Remontée plus lente	<script> du bouton	DUREE_MONTEE = 1400
Bouton plus tôt / plus tard	<script> du bouton	SEUIL_AFFICHAGE = 150
Bouton plus gros	<style id="ascenseur-mode83">	width:52px;height:52px → 64
Position à gauche	<style id="ascenseur-mode83">	remplacer right: par left:
Sons plus forts	<script> du bouton	dans jouerDepart / jouerArrivee, augmenter les valeurs 0.22, 0.28
Autre courbe d'animation	<script> du bouton	fonction easeInOutCubic (ex. easeOutQuart)

---

Journal des versions

1.1 · Ascenseur premium — livraison courante

• ✨ Bouton circulaire flottant « retour haut de page » (obsidienne & or).
• ✨ Effet ascenseur : remontée en ~950 ms, courbe ease-in-out cubique.
• ✨ Son de départ synthétisé (bip d'appel, La5 → Mi6).
• ✨ Son d'arrivée synthétisé (ding-dong Sol6 → Do6).
• ✨ Micro-animations : cabine qui vibre, pastille « étage » qui pulse.
• ✨ Enrichissement de la touche Home (sans casser Ctrl+Home).
• ✅ prefers-reduced-motion respecté, impression exclue, mode clair pris en compte.
• 🔒 Discipline additive : lignes 1 à 1072 vérifiées identiques à la 1.0 par diff.

1.0 · Guide pas à pas + thèmes + impression

• Guide 7 étapes de l'affichage premium PowerShell.
• Console d'aperçu construite en DOM (rendu cible fidèle).
• Boutons « Copier » sur chaque bloc de code.
• Horloge temps réel format français, animations reveal au défilement.
• Bascule clair/sombre + plancher de lisibilité 1.08 rem (additif).
• Bouton « Imprimer / PDF » + feuille @media print premium (additif).

---

Licence & crédits

Auteur : Jean-Claude Lugo — formateur MODE 83 (Draguignan, Var, France) Public visé : stagiaires du parcours TSSR (Technicien Supérieur Systèmes et Réseaux, TP-01351) Design system : Obsidienne & Or — signature MODE 83 / Ondea Web Studio Technologies : HTML5, CSS3 (variables, glassmorphism, @media print), JavaScript vanilla, Web Audio API Polices : Playfair Display, Atkinson Hyperlegible, JetBrains Mono (Google Fonts) Aucune dépendance externe, aucun build, aucun paquet NPM, aucun framework.

Utilisation pédagogique libre au sein de MODE 83 et de ses stagiaires. Toute reproduction extérieure doit conserver la mention du centre et de l'auteur.

---

« Trois ingrédients suffisent : l'UTF-8 pour dessiner, la couleur pour guider, quelques petites fonctions pour tout réutiliser. »