PHOTOS PRODUIT SANS FOND BLANC + SELECTEUR SANS VIDEO — LOT DU 24/08 (v2)
=========================================================================

1) PLUS DE FOND BLANC
---------------------
Tes 7 PNG etaient deja detoures. Le fond blanc venait du site : depuis le 20/08 les
cadres photo etaient forces en #f6f6f6 pour masquer les bordures des anciennes photos
studio. Les 14 pages concernees (7 FR + 7 EN) sont repassees en fond SOMBRE :
  - cadres (.sp-photo, .sel-photo, .pcar-stage, .msx-view, .mgt-photo .gallery-item)
    -> linear-gradient(150deg,#0e1825,#1a2738)   [neutre, aucun halo cyan]
  - fond des <img> -> transparent
  - ombre portee CSS remise : drop-shadow(...)  (tes photos n'ont plus l'ombre incrustee)
  - pastilles du carrousel repassees en blanc

Correspondance des fichiers (identification par comparaison visuelle) :
  MGT5_4.png -> microswitch-mgt2            (Smart Panel + sectionneur rouge)
  MGT3.png   -> microswitch-mgt3            (Control Panel + ailettes bleues)
  MGT4.png   -> microswitch-mgt4            (cheminee noire + boutons poussoirs)
  MGT5_3.png -> microswitch-mgt5            (colonne lumineuse verte)
  MGT5_.png  -> microswitch-mgt5-plus       (coffret haut, Smart Panel en bas)
  MGT5.png   -> microswitch-mgt5-plus-plus  (bandeau Twin Eco Power)
Memes noms de fichier qu'avant -> aucun src a changer.

2) PLUS DE VIDEO DANS LE SELECTEUR
----------------------------------
produits.html et en/products.html : la balise <video id="sel-vid"> a ete SUPPRIMEE de
la carte "Modele recommande", ainsi que les 3 appels JS MX_VIDEO.show() du selecteur et
le CSS .sel-video devenu mort. L'etat hors gamme (>80 V ou >3000 A) affiche desormais la
PHOTO images/baiesansfond.webp au lieu de l'animation de la baie.
NB : les 7 videos des panneaux du CATALOGUE (Microswitch, Powerswitch, Baie, Microlab,
PowerRack, MXP) n'ont PAS ete touchees — dis-moi si tu les veux aussi en photo.

3) PRODUITS MIS EN VALEUR, CADRES RESSERRES
-------------------------------------------
  - photos regenerees : le produit occupe maintenant 90 % du canevas commun 1000x1250
    (contre 72 %) -> le vide integre a l'image est quasi supprime.
  - produits.html / en/products.html : .sel-photo passe de 493 px a 300 px de large
    (max-width + centrage), padding 16 -> 10 px.
    Photo affichee : 238x298 -> 219x310 dans un cadre 40 % plus etroit.
  - index.html / en/index.html : .sp-photo passe a 296 px de large et 360 px de haut
    (au lieu de 280), l'image peut occuper 100 % de la largeur (au lieu de 72 %).
    Mobile : 215 -> 280 px de haut.
  - microswitch.html et les 4 pages modeles beneficient du nouveau cadrage des photos
    sans changement de CSS.

EN ATTENTE DE TA REPONSE
------------------------
images/microswitch-variante-a-identifier.webp = ta 7e photo (MGT5_2.png), logo
"Micronics" et non "MicronX". Elle ne correspond a aucun des 6 modeles en ligne et
n'est referencee nulle part. S'agit-il du MGT2+ (dont la photo manque toujours) ?

DEPLOIEMENT
-----------
  images/*.webp   -> /images/      |  les 7 .html -> racine  |  en/*.html -> /en/
Mode BINAIRE dans FileZilla pour les .webp.

ROLLBACK
--------
Cadres clairs : remplacer linear-gradient(150deg,#0e1825,#1a2738) par #f6f6f6.
Largeurs : retirer les max-width:300px / max-width:296px ajoutes sur .sel-photo/.sp-photo.
Video du selecteur : restaurer depuis ton zip d'origine (produits.html, en/products.html).

CONTROLE EFFECTUE
-----------------
Playwright 1440 et 390 px sur les 14 pages (28 controles) : 0 erreur JS, 0 image 404,
0 debordement, 1 h1 par page, 0 video restante dans le selecteur, 0 cadre clair.
Parcours complet du selecteur teste : 12V/100A->MGT2, 36/500->MGT3, 48/900->MGT4,
60/2000->MGT5, 80/3000->MGT5+, 80/6000->hors gamme (photo baie).
Paires FR/EN toujours jumelles (patch strictement identique des deux cotes).


=========================================================================
AJOUT v3 — 24/08
=========================================================================

4) PHOTO MGT2 CORRIGEE
----------------------
images/microswitch-mgt2.webp regenere a partir de microswitch-photo.png
(deja detouree, 2752x1536). Meme recette : canevas 1000x1250, produit a 90 %,
WebP q82 (72 Ko — q88 donnait 132 Ko, hors norme par rapport aux autres).

Consequence : la photo que j'avais attribuee au MGT2 (MGT5_4.png) n'est plus
affectee a aucun modele. Elle est fournie sous
   images/a-identifier-2-sectionneur.webp
et l'ex-"variante-a-identifier" (MGT5_2.png) devient
   images/a-identifier-1-micronics.webp
Ces DEUX fichiers ne sont references nulle part. Dis-moi a quels modeles ils
correspondent (MGT2+ ? MGT5 d'une autre generation ?) et je les branche.

5) BUG CORRIGE — LIENS CASSES SUR LA PAGE BANC DE TEST ANGLAISE
---------------------------------------------------------------
en/test-benches.html : les 6 cartes secteur avaient bien un <a href> traduit,
mais leurs gestionnaires onclick / onkeydown pointaient encore vers les URL
FRANCAISES (banc-test-moteurs.html, etc.). Depuis /en/, ces URL resolvaient
vers /en/banc-test-moteurs.html -> 404. Un visiteur anglophone qui cliquait
sur la carte (et non sur le lien) tombait sur une page d'erreur.
12 occurrences corrigees (6 cartes x onclick + onkeydown) vers test-bench-*.html.
Le selecteur de langue (../banc-test.html) a ete PRESERVE : il doit bien
pointer vers le francais.
Verifie : les 6 cartes renvoient HTTP 200, 0 erreur JS.

A NOTER SUR LES SOUS-PAGES BANC DE TEST
---------------------------------------
Elles sont deja a jour dans TON zip, des deux cotes :
  FR : banc-test-{moteurs,batteries,electronique,aero-ferroviaire,endurance,
       laboratoire}.html  (~82 Ko chacune, bloc de 8 caracteristiques techniques,
       meta description reecrite, 1 h1) + les 6 cartes sur banc-test.html
       + entree mega-menu sur 52 des 57 pages FR
  EN : test-bench-{motors,batteries,power-electronics,aerospace-rail,endurance,
       laboratory}.html + test-benches.html
Aucune regeneration n'etait necessaire.
Point restant : les sous-pages banc de test n'apparaissent PAS dans le mega-menu
des pages EN (elles n'y sont referencees que depuis test-benches.html). A traiter
si tu veux la parite complete FR/EN sur le menu.


=========================================================================
AJOUT v4 — 24/08 — MENU BANC DE TEST
=========================================================================

RECTIFICATIF : ce que j'ai ecrit en v3 sur le menu anglais etait FAUX.
J'avais cherche les noms de fichiers FRANCAIS dans les pages anglaises, qui
utilisent evidemment test-bench-*.html. Le mega-menu EN contenait bien les
sous-pages. Le vrai probleme etait ailleurs.

LE VRAI PROBLEME
----------------
Sur 4 pages, la colonne "Banc de test" du mega-menu ne contenait QUE son titre,
sans aucun des 6 liens — un <div class="mega-col"> avec le seul <a class="mega-head">.
Ces 4 pages avaient ete oubliees lors du deploiement des sous-pages :
    produits.html        services.html
    en/products.html     en/services.html
Depuis ces pages, impossible d'atteindre une sous-page banc de test par le menu.

CORRECTION
----------
La colonne complete a ete recopiee a l'identique depuis index.html (FR) et
en/index.html (EN) — memes libelles, meme ordre, meme indentation :
    FR : Essais de moteurs / Test de batteries / Electronique de puissance /
         Aeronautique & ferroviaire / Endurance & qualite / Laboratoire & R&D
    EN : Motor testing / Battery testing / Power electronics /
         Aerospace & rail / Endurance & quality / Laboratory & R&D

Les 3 autres fichiers FR sans cette entree (diagnostic-videos.html,
recap-reunion-20-08.html, selecteur-puissance-section.html) n'ont AUCUNE
navigation : ce sont des fichiers de travail, pas des pages du site. Volontairement
laisses de cote.

CONTROLE
--------
11 pages testees (6 FR + 5 EN) : 6 liens de sous-pages dans le mega-menu partout,
tous en HTTP 200, 0 erreur JS.
Clic reel depuis produits.html : survol "Secteurs d'activites" -> le lien
"Test de batteries" est visible -> le clic arrive bien sur
banc-test-batteries.html (h1 "Test de batteries & accumulateurs").
Mobile 390 px : menu burger ouvert + colonne depliee -> 6/6 liens visibles,
0 debordement, cote FR comme cote EN.

FICHIERS AJOUTES DANS CE ZIP
----------------------------
services.html et en/services.html (nouveaux dans le lot).
produits.html et en/products.html deja presents, mis a jour.


=========================================================================
AJOUT v5 — 24/08 — AUDIT DES LIENS ET RESSOURCES
=========================================================================

Audit automatique des 108 pages (57 FR + 51 EN) : toutes les href/src et tous
les onclick="location.href='...'" resolus contre le systeme de fichiers.

A) 11 LIENS CASSES CORRIGES — meme bug que en/test-benches.html
--------------------------------------------------------------
Des cartes cliquables dont le <a href> etait traduit mais dont le onclick /
onkeydown pointait encore vers les URL FRANCAISES. Depuis /en/, elles
resolvaient vers /en/<nom-francais>.html -> 404.

  en/surface-finishing.html  (8 cartes) :
     metaux-precieux.html  -> precious-metals.html
     chromage-dur.html     -> hard-chrome-plating.html
     zingage.html          -> zinc-plating.html
     nickelage.html        -> nickel-plating.html
     cataphorese.html      -> cathodic-e-coating.html
     rhodium.html          -> rhodium-plating.html
     platine.html          -> platinum-plating.html
     anodisation.html      -> anodising.html
  en/rectifiers.html : baie.html -> modular-cabinet.html (2 occurrences)

Les liens ../ du selecteur de langue ont ete PRESERVES : ils doivent bien
pointer vers le francais.
RESULTAT : 0 page HTML introuvable sur tout le site (29 cibles manquantes
detectees au depart, dont 9 pages -> toutes corrigees).

B) 4 TEXTES ALTERNATIFS RESTES EN FRANCAIS DANS LES PAGES ANGLAISES
-------------------------------------------------------------------
  en/options.html  : 2 alt (Control Panel, ecran tactile) traduits
  en/microlab.html : "Microlab MX ecran tactile" -> "Microlab MX touchscreen"
  en/products.html : "Microswitch — redresseur mural"
                     -> "Microswitch — wall-mounted rectifier"
(Impact SEO et accessibilite : les alt sont lus par Google et les lecteurs
d'ecran.)

C) 404 EVITABLES SUPPRIMES
--------------------------
alimentations.html et en/regulated-power-supplies.html demandaient
images/microlab.jpg (inexistant) puis retombaient par onerror sur
images/microlab.webp (existant). Le src pointe maintenant directement sur le
.webp : une requete 404 en moins par visite.

D) IMAGES SANS REPLI -> ICONE CASSEE
------------------------------------
options.html et en/options.html : les 4 <img> des options Control Panel et
Ecran tactile n'avaient AUCUN onerror. Fichier absent = icone d'image cassee
affichee au visiteur. La fonction imgFail() deja presente dans ces pages y est
maintenant branchee : degradation propre au lieu d'une icone cassee.

E) NETTOYAGE DE MON PROPRE PATCH
--------------------------------
Le min-height:430px que j'avais pose sur .sel-photo (produits.html,
en/products.html) etait ecrase par une regle .sel-photo{min-height:330px}
situee ~900 lignes plus bas. Declaration morte et trompeuse -> alignee sur
330px, la valeur reellement appliquee. AUCUN changement de rendu.

F) IL TE MANQUE 5 FICHIERS IMAGES — je ne peux pas les inventer
---------------------------------------------------------------
  images/powerrack.jpg          cite par 4 pages (alimentations, powerrack,
                                + jumelles EN). Le repli onerror pointe sur
                                images/powerrack.png, qui n'existe pas non
                                plus -> aucune photo de PowerRack sur le site.
  images/mxp-photo.png          cite par mxp.html et en/mxp.html
  images/mxp-2.png              idem
  images/option-control-panel.webp    cite par options.html et en/options.html
  images/option-ecran-tactile.webp    idem
Depose ces 5 fichiers dans /images/ et tout s'affichera sans autre
modification. Il y a bien images/baie43u.png qui pourrait servir pour le
PowerRack, mais c'est un choix editorial : je ne l'ai pas substitue sans ton
accord.

CONTROLE
--------
10 pages retestees sous Playwright : 0 erreur JS, 0 debordement, 0 lien de
carte casse. Les 404 restants correspondent exactement aux 5 fichiers du
point F.


=========================================================================
AJOUT v6 — 24/08 — PHOTO DU BATIMENT SUR LA PAGE A PROPOS
=========================================================================

PLACEMENT
---------
apropos.html et en/about-us.html : le premier module (eyebrow "A propos" +
h1 + sous-titre) devient une grille 2 colonnes. Texte a GAUCHE, photo du
siege a DROITE, alignes verticalement au centre.
Sous 900 px : la grille repasse en 1 colonne, la photo se place sous le
texte et son format passe de 16/10 a 16/9.

TRAITEMENT DE LA PHOTO
----------------------
Le PNG d'origine (2752x1536) portait le FILIGRANE GEMINI (l'etoile a quatre
branches) en bas a droite, sur le bitume. Je l'ai supprime en recadrant la
bande de droite (largeur 2752 -> 2580), ce qui ne coupe que le bord du
parking : ni le batiment, ni l'enseigne, ni le ciel ne sont touches.
Deux tailles generees, servies en srcset selon l'ecran :
   images/micronics-batiment.webp        1600x953   113 Ko
   images/micronics-batiment-900.webp     900x536    49 Ko

DETAILS TECHNIQUES
------------------
  - width/height poses sur la balise -> pas de saut de mise en page au
    chargement (bon pour le score Core Web Vitals)
  - fetchpriority="high" : c'est l'image visible d'emblee
  - legende en surimpression bas de photo, sur degrade sombre
  - onerror : la figure se masque proprement si le fichier manque
  - alt renseigne, traduit cote EN
  - le CSS est isole dans <style id="mx-about-hero"> -> rollback = supprimer
    ce bloc et rendre a la section .mx-first sa <div class="container">
    d'origine

CONTROLE
--------
FR et EN en 1440 px : photo bien a DROITE du texte (x=734 contre x=24),
666x417 px affiches, 0 erreur JS, 0 404, 0 debordement, 1 h1.
Mobile 390 px : bascule en colonne, photo sous le texte, 0 debordement.
Le srcset sert bien la version 900 px sur les deux formats testes.


=========================================================================
AJOUT v7 — 27/08 — VIDEO DU HERO REMISE SUR L'ACCUEIL
=========================================================================

POURQUOI ELLE AVAIT DISPARU
---------------------------
Je ne l'ai pas retiree. Le patch avait ete fait le 21/08 (lot
micronics-hero-video-21-08.zip) : le <img class="rig-photo"> du .hero-bg
etait remplace par un <video class="rig-photo">. Le index.html du zip que
tu m'as envoye contient la balise <img> et la photo hero-scene-baie.webp :
c'est une version anterieure au 21/08 qui a ete redeposee. Mon lot du 24/08
n'a touche que le CSS de index.html (.sp-photo), rien d'autre.
Les deux .mp4 n'etaient pas non plus dans le dossier videos/ du zip.

CE QUI A ETE FAIT
-----------------
Meme patch qu'au 21/08, sur index.html ET en/index.html :
   <img class="rig-photo" src="images/hero-scene-baie.webp">
       remplace par
   <video class="rig-photo" autoplay muted loop playsinline preload="metadata"
          poster="..." width="1280" height="720">
     <source src="videos/baie-avantages-hero.mp4" type="video/mp4">
     <source src="baie-avantages-hero.mp4" type="video/mp4">
     <img class="rig-photo" src="images/hero-scene-baie.webp" ...>
   </video>

La classe rig-photo est CONSERVEE : tout le CSS du cadre s'applique tel quel
(16/9, object-fit cover, decalage vertical de +30px fixe le 20/08). Aucun CSS
ajoute. Verifie : cadre 625 x 351 px a 1440, identique a celui de la photo.

Trois filets de securite empiles :
  1. videos/baie-avantages-hero.mp4         (chemin normal)
  2. baie-avantages-hero.mp4 a la RACINE    (si le dossier videos/ n'est pas
                                             monte par le FTP)
  3. la photo hero-scene-baie.webp          (si aucune video ne charge)
Un poster est genere depuis la 1re image de chaque video, donc meme avant le
demarrage de la lecture le visiteur voit deja le bon visuel :
   images/hero-baie-avantages-poster.webp      (10 Ko)
   images/hero-baie-avantages-poster-en.webp   ( 9 Ko)

FICHIERS A DEPOSER (EN PLUS DU RESTE)
-------------------------------------
   videos/baie-avantages-hero.mp4      2,2 Mo   -> /videos/
   videos/baie-avantages-hero-en.mp4   2,0 Mo   -> /videos/
   images/hero-baie-avantages-poster*.webp     -> /images/
   index.html et en/index.html                 -> racine et /en/
Mode BINAIRE dans FileZilla pour les .mp4 et .webp.
Par securite tu peux aussi deposer une copie des deux .mp4 A LA RACINE du
site : c'est le filet n.2 ci-dessus.

CONTROLE
--------
1440 px FR et EN : la balise <video> est bien dans .hero-bg, cadre
625 x 351 px (identique a l'ancienne photo), object-fit cover, 0 erreur JS,
0 debordement, 1 h1. Mobile 390 px : video visible, 0 debordement.
NOTE : le navigateur de test (Chromium open source) n'embarque PAS le decodeur
H.264 -- canPlayType('video/mp4; codecs="avc1.42E01E"') repond vide. Je n'ai
donc PAS pu voir la video se lire ici ; c'est aussi vrai de la video deja en
place dans la section « Produit phare ». Sur Chrome, Edge, Safari et Firefox
grand public le H.264 est supporte. A verifier d'un coup d'oeil apres depot.


=========================================================================
AJOUT v8 — 27/08 — LA CROIX DE FERMETURE DU FORMULAIRE DE DEVIS
=========================================================================

LE BUG
------
Dans la fenetre « Demande de contact / devis », la croix en haut a droite
etait bien visible, bien cliquable en apparence, et son code JavaScript
etait correct sur les 105 pages. Elle ne fermait pourtant jamais la fenetre.

Cause : dans le HTML, le bouton est ecrit AVANT le bloc de titre :
   <button class="modal-close" id="modalClose">
   <div id="formWrap"><div class="modal-head"> ... titre ...

Or les deux sont des elements positionnes (.modal-close en position:absolute,
.modal-head en position:relative) et AUCUN des deux n'avait de z-index. Quand
deux elements positionnes n'ont pas de z-index, c'est l'ordre du HTML qui
tranche : le dernier ecrit passe devant. Le bloc de titre se peignait donc
par-dessus la croix et absorbait le clic.
Verifie par elementFromPoint() au centre exact du bouton : le navigateur
renvoyait « modal-head », pas « modalClose ». Le clic n'atteignait jamais
le bouton.

LA CORRECTION
-------------
Une seule declaration ajoutee, sur les 105 pages (FR + EN) :
   .modal-close{position:absolute;z-index:3;top:22px;right:24px; ...}
Rien d'autre n'a ete touche : ni le HTML, ni le JavaScript, ni les autres
regles CSS. z-index:3 reste sous l'overlay (z-index:2000) et ne peut donc
pas deborder sur le reste de la page.

CONTROLE
--------
Balayage automatique des 105 pages qui contiennent la fenetre : sur chacune,
la croix est desormais l'element reellement atteint au point de clic, et le
clic ferme bien la fenetre ET relache le blocage du defilement (classe
no-scroll retiree du body). 105/105.
Les deux autres facons de fermer, qui elles fonctionnaient deja, ont ete
re-testees et fonctionnent toujours :
   - clic sur le fond sombre autour de la fenetre
   - touche Echap
Teste en 1440 px et en 390 px (mobile), FR et EN : 0 erreur JS.

A DEPOSER
---------
Les 105 fichiers .html de ce zip (54 a la racine + 51 dans en/).


=========================================================================
AJOUT v9 — 27/08 — ACCUEIL : LES DEUX SECTEURS COTE A COTE
=========================================================================

AVANT / APRES
-------------
Le bloc « Secteurs d'activites » de l'accueil affichait Traitement de surface
et Banc de test en deux BANDES PLEINE LARGEUR empilees, avec l'illustration
a gauche pour l'une et a droite pour l'autre.
Ils sont maintenant en DEUX CARTES COTE A COTE, illustration en bandeau
haut, texte dessous.

Soin apporte au rendu :
  - hauteurs des deux cartes strictement egales, et le lien « Decouvrir le
    secteur » est plaque en bas de carte, donc les deux liens sont alignes
    au pixel meme si les textes n'ont pas la meme longueur
  - le numero 01 / 02 devient une pastille arrondie posee en haut a gauche
    de l'illustration, sur fond flou
  - degrade sombre en bas du bandeau : l'illustration se fond dans le texte
    au lieu de s'arreter net
  - survol : la carte se souleve de 6 px, la bordure passe au cyan, ombre
    portee. Le halo cyan d'origine sur l'illustration est conserve.
  - bandeau plus haut (jusqu'a 258 px) pour que les illustrations SVG soient
    moins recadrees qu'avec une bande large et basse

100 % CSS — LE HTML N'EST PAS TOUCHE
------------------------------------
Un seul bloc <style id="mx-sxr-duo"> ajoute avant </body> dans index.html et
en/index.html. Aucune balise deplacee, aucun texte modifie, aucun SVG touche.
ROLLBACK = supprimer ce bloc, la mise en page d'origine revient telle quelle.

DEUX PIEGES RENCONTRES, POUR MEMOIRE
------------------------------------
1. Une regle `.sxr-row{align-items:center}` situee dans un bloc de correctifs
   PLUS BAS dans la page ecrasait mon empilement : le bandeau illustration se
   retrouvait a 0 px de large et les dessins etaient invisibles. Corrige par
   `align-items:stretch` dans le nouveau bloc.
2. `.sxr-idx` (le numero) est un enfant de `.sxr-txt`. Pour le poser sur
   l'illustration il faut que `.sxr-txt` reste en position:static, sinon la
   pastille se cale sur le bloc de texte et chevauche le titre.

CONTROLE
--------
9 largeurs x 2 langues = 18 configurations (1920 / 1440 / 1280 / 1100 / 980 /
860 / 760 / 600 / 390) : 0 anomalie, 0 debordement, 0 erreur JS.
Au-dessus de 900 px : 2 colonnes, cartes sur la meme ligne et de meme hauteur.
En dessous : 1 colonne, les cartes s'empilent, bandeau ramene a 190 px.

A DEPOSER
---------
index.html et en/index.html.


=========================================================================
AJOUT v10 — 27/08 — BOUTONS « DECOUVRIR LE SECTEUR »
=========================================================================

Le lien discret en bas de chaque carte (petit texte cyan sur fond sombre)
devient un VRAI BOUTON PLEIN :
  - fond cyan #29abe2, texte sombre #04121b, comme le bouton
    « Demander un devis » du site : meme famille visuelle
  - pleine largeur de la carte, 57 px de haut, coins arrondis 9 px
  - ombre portee cyan pour le detacher du fond
  - survol : eclaircissement, ombre renforcee, remontee de 2 px,
    la fleche avance de 5 px
  - contour blanc net a la navigation au clavier (:focus-visible)

LISIBILITE MESUREE
------------------
Contraste texte / fond = 7,24 : 1. Le minimum WCAG AA est de 4,5 : 1 et le
niveau AAA de 7 : 1 — le bouton passe donc le niveau le plus exigeant.
Hauteur 57 px : au-dessus des 44 px recommandes pour une cible tactile.

LIBELLES RENDUS EXPLICITES
--------------------------
Les deux boutons portaient le meme texte generique. Cote a cote, ca ne dit
plus quel bouton mene ou. Ils nomment desormais leur secteur :
   FR : « Decouvrir le traitement de surface » / « Decouvrir le banc de test »
   EN : « Explore surface finishing »          / « Explore test benches »
C'est la SEULE modification de texte du lot. Les destinations n'ont pas
change (traitement-surface.html, banc-test.html, et leurs equivalents EN).

CONTROLE
--------
18 configurations (9 largeurs x 2 langues, de 1920 a 390 px) : aucun libelle
tronque, aucun bouton deforme, 0 debordement, 0 erreur JS. Les deux boutons
ont la meme largeur et le meme bas de page a l'ecran en mode 2 colonnes.
Clic reel teste : arrivee sur traitement-surface.html et surface-finishing.html.

Le style du bouton vit dans le meme bloc <style id="mx-sxr-duo"> ; le
rollback complet reste la suppression de ce bloc (les libelles, eux, se
reprennent depuis ton index.html precedent).


=========================================================================
AJOUT v11 — 27/08 — PAGES LEGALES REECRITES
=========================================================================

ETAT DE DEPART (mesure du texte reel de chaque page)
----------------------------------------------------
   mentions-legales.html            2 120 caracteres
   politique-confidentialite.html     604 caracteres  <- 3 paragraphes
   politique-cookies.html             352 caracteres  <- 2 paragraphes
   garantie.html                    4 628 caracteres
Les deux politiques contenaient meme des notes destinees a l'auteur laissees
en clair a l'ecran : « (A adapter a votre situation reelle.) » et « (Si vous
ajoutez des outils de mesure d'audience, mentionnez-les ici.) ». Elles sont
supprimees.

AUDIT PREALABLE — je n'ai pas ecrit ces textes de memoire
---------------------------------------------------------
Avant de rediger, j'ai inspecte les 106 pages du site pour ne decrire que ce
qu'il fait vraiment :
   - scripts tiers                : AUCUN
   - Google Analytics / Matomo / Meta / Hotjar / Clarity : AUCUN
   - document.cookie              : 0 page
   - localStorage / sessionStorage: 0 page
   - seule ressource externe      : Google Fonts, sur 106 pages
     (fonts.googleapis.com + fonts.gstatic.com)
   - formulaire de devis          : poste vers envoi-devis.php, sur VOTRE
     serveur, avec repli mailto vers info@micronics.fr. Aucun prestataire
     de formulaire tiers.
La politique de cookies peut donc affirmer « aucun cookie » sans mentir, et
la politique de confidentialite signale honnetement le point Google Fonts.

CE QUI A ETE FAIT — 6 PAGES (3 FR + 3 EN)
------------------------------------------
Mise en page « document » commune :
  - sommaire numerote colle en haut a gauche, qui SURLIGNE la section en
    cours de lecture pendant le defilement
  - date de derniere mise a jour
  - sections numerotees 01, 02... avec ancres (#m1, #p8...) : on peut
    envoyer un lien vers un article precis
  - carte d'identite en paires libelle/valeur pour l'editeur et le
    responsable de traitement
  - vrais tableaux pour les donnees collectees, les bases legales, les
    durees de conservation et les categories de cookies
  - encarts « EN BREF » en tete des deux politiques
  - liens croises vers les autres pages legales en bas
  - sous 980 px : le sommaire devient une rangee de pastilles, les tableaux
    defilent horizontalement

CONTENU
-------
Mentions legales (8 sections) : editeur, directeur de publication, hebergement,
propriete intellectuelle, donnees et cookies, limitation de responsabilite
(avec l'avertissement securite electrique, pertinent pour vos produits),
liens tiers, droit applicable.

Politique de confidentialite (10 sections) : responsable de traitement,
donnees collectees champ par champ, finalites ET bases legales RGPD,
destinataires, durees de conservation, transferts hors UE, securite, les
6 droits detailles avec la marche a suivre et le recours CNIL, cookies,
evolution.

Politique de cookies (6 sections) : definition, tableau des 5 categories
toutes a « aucun », ressources tierces, pourquoi pas de bandeau de
consentement, reglages des 4 navigateurs, que se passera-t-il si ca change.

Les pages EN conservent leur avertissement « seule la version francaise fait
foi », reformate dans le nouveau style.

3 POINTS QUI DEMANDENT VOTRE DECISION — ils sont signales EN JAUNE dans les pages
---------------------------------------------------------------------------------
1. HEBERGEUR (mentions legales, section 03). Toujours [nom de l'hebergeur].
   C'est une mention OBLIGATOIRE (art. 6 III LCEN). Trois champs a remplir.
2. DUREES DE CONSERVATION (confidentialite, section 05). J'ai propose 3 ans
   apres dernier contact et 12 mois pour les journaux serveur, alignes sur
   les recommandations CNIL. A confirmer ou ajuster.
3. GOOGLE FONTS (confidentialite section 06, cookies section 03). Les polices
   sont chargees depuis Google : votre visiteur envoie son IP a Google a
   chaque page. Ce n'est pas du pistage, mais ca reste un transfert hors UE.
   Solution : heberger les polices sur votre serveur. Dites-le moi et je le
   fais ; les deux paragraphes disparaitront alors.

GARANTIE — NON MODIFIEE, ET POURQUOI
-------------------------------------
garantie.html est deja une vraie page : tableau des 4 durees (2 ans neuf,
3 mois reparation, 6 mois reconditionne, 5 ans en option), calculateur
« jusqu'a quand suis-je couvert », etapes pour faire jouer la garantie,
bandeau de contact SAV. Elle n'a pas le probleme des trois autres.
Ce qui lui manque pour etre un document contractuel complet, ce sont les
CONDITIONS et les EXCLUSIONS (usure normale, mauvais raccordement, surtension
reseau, intervention d'un tiers, transport...). Je ne peux pas les inventer :
ce sont vos engagements juridiques. Envoyez-moi vos conditions reelles de
garantie et je les mets en page dans le meme style que les pages ci-dessus.

CONTROLE
--------
6 pages x 3 largeurs (1440 / 900 / 390) : sommaire et sections toujours en
nombre egal, AUCUNE ancre morte, 1 seul h1, 0 debordement, 0 erreur JS.
Surlignage du sommaire verifie : saut vers la section 08, le sommaire
surligne bien « 08. Vos droits ».

A DEPOSER
---------
mentions-legales.html, politique-confidentialite.html, politique-cookies.html
en/legal-notice.html, en/privacy-policy.html, en/cookie-policy.html
