LISEZ-MOI — Comment modifier ce site
====================================
Soutenance Bachelor RAC · Théo Corredoura · Micronics Systems


CE QUI A CHANGÉ (version 2 — refonte graphique)
-----------------------------------------------
1. THÈME SOMBRE par défaut, thème CLAIR par bascule.
   Le bouton rond en haut à droite du bandeau, ou la touche T.
   Le choix est mémorisé d'une page à l'autre.

2. ENTÊTES EN VIDÉO. Chaque page démarre par un bandeau plein écran
   avec une boucle vidéo en fond (media-courant.mp4 = flux de courant,
   media-bain.mp4 = bain d'électrolyse). La vidéo est recolorée
   automatiquement à la couleur de la page : cyan, cuivre, vert…

3. NAVIGATION AU CLAVIER, pensée pour la soutenance :
       flèche droite  → page suivante
       flèche gauche  → page précédente
       T              → change de thème
       Début (Home)   → remonte en haut de la page
   Le rappel est affiché en bas à droite de l'écran.

4. TRANSITIONS entre les pages (fondu), barre de progression de
   lecture en haut de l'écran, et apparition progressive des blocs
   au défilement.

5. UN SEUL FICHIER DE SCRIPT : app.js, partagé par les 7 pages.
   Avant, le code était recopié en bas de chaque page.

6. LES COULEURS DES SCHÉMAS suivent maintenant le thème.
   Dans les schémas SVG, les couleurs ne sont plus écrites en dur :
   elles pointent vers des jetons, par exemple fill="var(--sv-bg)".
   Voir la section « CHANGER LES COULEURS » plus bas.


LES NOMS DES BLOCS
------------------
Menu du haut (court)      →  Titre de la page (intitulé officiel)
  L'OFFRE                    Définir une offre de produits et de services
                             pour une agence ou un commerce
  LES OPÉRATIONS             Gérer les opérations financières, administratives
                             et logistiques d'une agence ou d'un commerce
  LES ÉQUIPES                Piloter les équipes opérationnelles
                             d'une agence ou d'un commerce

La mention « Bloc 4 · 7 compétences » reste en petit au-dessus du titre,
pour que le jury raccroche au référentiel.

Pour changer un libellé de menu : dans chaque fichier .html, la ligne
    <a href="3-bloc4.html">Les opérations</a>
Il faut la changer dans les 7 pages (le menu est recopié partout).


LES FICHIERS
------------
index.html          Accueil : couverture, chiffres clés, tuiles vers les autres pages
1-entreprise.html   Micronics Systems, le marché, mon poste
2-bloc1.html        Bloc 1 — les 11 compétences
3-bloc4.html        Bloc 4 — les 7 compétences
4-bloc3.html        Bloc 3 — les 5 compétences
5-annexes.html      Porter, mapping, benchmark, circuit de distribution, tableau de bord
6-bilan.html        Radar de compétences, apports, la suite
style.css           Le style de TOUTES les pages (couleurs, tailles, espacements)
app.js              Le comportement de TOUTES les pages (thème, animations,
                    clavier, transitions). Un seul endroit à modifier.
logo-micronx.png         Le logo affiché en thème CLAIR
logo-micronx-blanc.png   Le logo affiché en thème SOMBRE
media-courant.mp4        Fond vidéo « flux de courant »
media-bain.mp4           Fond vidéo « bain d'électrolyse »
poster-courant.jpg       Image affichée le temps que la vidéo charge
poster-bain.jpg          idem

Pour changer la taille du logo : dans style.css, cherche
    .menu .logo img{height:19px;...}
et change la valeur. 19px est volontairement discret.

Tous les fichiers doivent rester dans le MÊME dossier, sinon le style ne s'applique pas.
Pour ouvrir : double-clic sur index.html.


LE SOMMAIRE DE L'ACCUEIL
------------------------
Il est dans index.html, dans le bloc <div class="som"> … </div>.
Chaque ligne est un <li> avec un lien :

    <li><a href="2-bloc1.html#c1-05"><span class="c">C1.05</span><span>Adapter le positionnement de l'offre</span></a></li>
                        ^^^^^^^^^^^^^ page + ancre        ^^^^^ code affiché    ^^^^ texte affiché

Si tu supprimes une compétence dans une page de bloc, pense à supprimer
la ligne correspondante ici.


MODIFIER UN TEXTE
-----------------
Ouvre le fichier avec le Bloc-notes (clic droit > Ouvrir avec > Bloc-notes),
ou mieux : avec Visual Studio Code, gratuit, qui colore le code.

Chaque compétence commence par un repère bien visible :

    <!-- ================= C1.05 ================= -->

Sous ce repère, cherche le texte entre les balises <p> et </p>.
Tu remplaces le texte, tu ne touches pas aux balises.

    AVANT :  <p>L'atelier assemble 8 à 12 redresseurs par semaine.</p>
    APRÈS :  <p>L'atelier assemble 10 à 15 redresseurs par semaine.</p>

Enregistre, puis recharge la page dans le navigateur (touche F5).


LE MODÈLE D'UNE COMPÉTENCE
--------------------------
Chaque compétence suit toujours le même ordre :

  1. l'énoncé officiel de la fiche IFAG      <p class="enonce">
  2. TA phrase d'accroche, en gros           <p class="punch">
  3. le visuel                               <div class="visuel">
  4. le tableau Méthodologie / Résultat      <div class="tableau mr">

C'est la phrase d'accroche (punch) que tu dis à l'oral. Le tableau,
tu le laisses parler tout seul — le jury le lit pendant que tu commentes.

Pour mettre un mot en surbrillance bleue dans la phrase d'accroche :
    <b>ton texte</b>


LA BIBLIOTHÈQUE DE VISUELS
--------------------------
Chaque compétence a son visuel. Neuf modèles réutilisables :

  .mrv          méthodologie → flèche → résultat (sous chaque compétence)
  .flux         source → signal → action (veille, déchets, délais)
  .barres       barres horizontales animées (répartitions, priorités)
  .chrono-h     chronologie horizontale (plan salon, cas du marquage au sol)
  .statut       coches vertes / cercles orange (sécurité, standardisation)
  .bascule      avant → après en deux colonnes (offre, compétences)
  .compare      solutions avec verdict coloré (le cas client 5 000 A)
  .boucle       cycle à quatre étapes (pilotage budgétaire)
  .plan         plan de stand vu du dessus (merchandising)

Plus les graphiques spécifiques : cascade du compte d'exploitation,
courbe de stock, roue PESTEL, canaux de recrutement, radar, mapping,
forces de Porter, circuit de distribution.

Pour dupliquer un visuel : copie le bloc <div class="visuel anim">…</div>
entier et change les textes à l'intérieur. La classe "anim" déclenche
l'animation au défilement.


LES ANIMATIONS
--------------
Elles se déclenchent quand l'élément arrive à l'écran, pas au chargement.
Tu peux donc scroller lentement pendant que tu parles : le graphique
se construit sous les yeux du jury.

  - les chiffres montent           <b data-n="1600">0</b>
  - les barres se remplissent      classe .barres
  - la cascade tombe poste à poste classe .casc
  - la courbe de stock se trace    classe .stock
  - les flèches de la chaîne
    de veille circulent en boucle  classe .flux

Pour qu'un bloc s'anime, il doit porter la classe "anim" :
    <div class="visuel anim"> … </div>


LES BALISES QUE TU VERRAS
-------------------------
<p>…</p>              un paragraphe
<ul><li>…</li></ul>   une liste à puces (un <li> par puce)
<strong>…</strong>    du texte en gras foncé
<h3>…</h3>            un titre de compétence
<span class="tag fait">Réalisé</span>    la pastille verte
<span class="tag vu">Observé</span>      la pastille bleue
<span class="tag prop">Proposé</span>    la pastille orange

Pour changer une pastille, remplace juste le mot après class="tag "
et le texte affiché.


SUPPRIMER UNE COMPÉTENCE OU UN BLOC
-----------------------------------
Supprime tout depuis la ligne

    <article class="fiche" id="…">

jusqu'à la ligne

    </article>

incluses. Rien d'autre ne bougera.


LES ENCADRÉS ORANGE « À RELIRE AVANT LA SOUTENANCE »
---------------------------------------------------
Ce sont MES notes, pas ton contenu. Elles signalent les passages que
j'ai rédigés faute d'information dans ton PDF, et que tu dois valider.

QUAND TU AS TOUT VÉRIFIÉ, SUPPRIME-LES : elles ne doivent pas être
visibles devant le jury. Elles ressemblent à ceci :

    <div class="verif"><b>À relire avant la soutenance</b>
      …le texte…
    </div>

Il y en a 8 :
  2-bloc1.html   3 encadrés — compétences C1.02, C1.03 et C1.10
  3-bloc4.html   1 encadré  — l'écart sur le nombre de compétences de la fiche
  4-bloc3.html   3 encadrés — compétences C3.03, C3.04 et C3.05
  5-annexes.html 1 encadré  — la mention « données fictives », qui elle
                              DOIT RESTER : c'est une mention obligatoire.


UNE COULEUR PAR PAGE
--------------------
Chaque page porte une couleur d'accent, définie par l'attribut
data-bloc sur la balise <body>. Elle colore aussi la vidéo du bandeau :

    L'entreprise   acier    <body data-bloc="entreprise">
    L'offre        cyan     <body data-bloc="offre">
    Les opérations cuivre   <body data-bloc="operations">
    Les équipes    vert     <body data-bloc="equipes">
    Annexes        acier    <body data-bloc="annexes">
    Bilan          cyan     <body data-bloc="bilan">

Les couleurs elles-mêmes sont regroupées dans style.css, section
« une couleur d'accent par page ». Une ligne par page.

Tout suit automatiquement : le bandeau, le liseré des fiches, les
badges de code, les traits, les chiffres clés, les tableaux.


LA BANDE FONCÉE PLEINE LARGEUR
------------------------------
C'est le bloc qui coupe la page en deux, avec un titre en gros et
quatre chiffres. Il y en a un par page de bloc. Structure :

    <div class="bande"><div class="dedans">
      <p class="oeil">Le sur-titre</p>
      <h3>La phrase forte</h3>
      <p>Le paragraphe d'explication.</p>
      <div class="chiffres">
        <div><b>45 %</b><span>du CA part en achats</span></div>
        …
      </div>
    </div></div>

Tu peux la déplacer où tu veux dans la page, ou en ajouter une autre :
copie le bloc entier et change les textes.


CHANGER LES COULEURS OU LA TYPOGRAPHIE
--------------------------------------
Tout est en haut de style.css, section « 1. JETONS DE COULEUR ».

Il y a DEUX palettes :
    :root { … }                      le thème SOMBRE (par défaut)
    html[data-theme="clair"] { … }   le thème CLAIR

Les jetons principaux, identiques dans les deux :
    --papier     le fond de page
    --carte      le fond des cartes et des tableaux
    --panneau    les grands aplats sombres (entêtes, bandes)
    --encre      la couleur des titres
    --texte      le texte courant
    --cyan       l'accent de la page
    --cyan-vif   l'accent lumineux (traits, liserés, chiffres)

Et les jetons réservés aux schémas SVG, préfixés --sv- :
    --sv-bg      le fond des boîtes dessinées
    --sv-line    les filets et les flèches
    --sv-ink     le texte à l'intérieur des schémas
    --sv-mute    les légendes
    --sv-blue, --sv-cyan, --sv-violet, --sv-ambre, --sv-vert,
    --sv-rouge, --sv-acier, --sv-indigo   les couleurs de données

Si tu changes --sv-vert dans les deux palettes, TOUS les schémas
du site suivent, dans les deux thèmes.

    --titre:'Archivo'          les titres, libellés et chiffres
    --texte-f:'Source Serif 4' le texte courant
    --mono:'IBM Plex Mono'     les codes de compétences

    --titre:'Archivo'          les titres, libellés et chiffres
    --texte-f:'Source Serif 4' le texte courant
    --mono:'IBM Plex Mono'     les codes de compétences

Les polices viennent de Google Fonts : il faut une connexion internet
au premier chargement. Ensuite le navigateur les garde en cache.

Le petit trait effilé bleu (sous les titres, dans le sommaire) reprend
la forme du trait du logo MicronX. Il s'écrit :

    <span class="courant"></span>

Sa forme est définie une seule fois dans style.css, classe .courant


LES VISUELS
-----------
Les graphiques sont dessinés en SVG directement dans les pages.
Ce sont des blocs longs et un peu illisibles : tu peux les DÉPLACER
(copier-coller le bloc <div class="visuel">…</div> entier ailleurs)
mais évite de modifier les chiffres à l'intérieur sans aide.

Si un chiffre change (par exemple le compte d'exploitation), demande-moi
de régénérer le visuel plutôt que de le retoucher à la main.


IMPRIMER EN PDF
---------------
Ctrl+P sur n'importe quelle page. Le menu et les flèches de navigation
disparaissent automatiquement à l'impression.


REMPLACER UNE VIDÉO DE FOND
---------------------------
Dans la page concernée, cherche le bloc :

    <div class="cine" aria-hidden="true">
      <video src="media-courant.mp4" poster="poster-courant.jpg" ...></video>

Remplace le nom du fichier par le tien (mets-le dans le même dossier).
Format conseillé : MP4 H.264, moins de 15 secondes, sans son, en boucle,
et sombre — c'est le voile et la teinte qui font le reste. Une vidéo de
1280 px de large suffit largement.

Si tu ne veux plus de vidéo sur une page, supprime la ligne <video …>
et garde le reste : le bandeau redevient un aplat sombre.


RÉGLER L'INTENSITÉ DE LA VIDÉO
------------------------------
Dans style.css, section « 6. ENTÊTE CINÉMA » :

    .cine video { opacity:.85 }     plus bas = vidéo plus discrète
    .cine .teinte { opacity:.75 }   la recoloration à la couleur de la page
    .cine .voile { … }              le dégradé sombre qui protège le texte

Si le titre manque de lisibilité en salle, baisse d'abord l'opacité
de la vidéo, pas celle du voile.


COUPER TOUTES LES ANIMATIONS
----------------------------
Le site respecte déjà le réglage « réduire les animations » du système
d'exploitation. Si tu veux les couper pour tout le monde, ajoute à la
fin de style.css :

    *{animation:none!important;transition:none!important}
    .cine video{display:none}
