diff --git a/html/liste_contacts.html b/html/liste_contacts.html
deleted file mode 100644
index f2f10fd..0000000
--- a/html/liste_contacts.html
+++ /dev/null
@@ -1,2216 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-<meta charset="UTF-8">
-<title>ASPIC — Liste des contacts</title>
-<style>
-  @font-face{
-    font-family:"Metro DF";
-    src:url('MetroDF.woff2') format('woff2'),url('MetroDF.ttf') format('truetype');
-    font-weight:normal;font-style:normal;font-display:swap;
-  }
-  :root{
-    --gris-fonce:#484848;
-    --orange:#FF5A1F;
-    --gris-clair:#C7C7C7;
-    --zebra-jaune:#F7F3E3;
-    --zebra-bleu:#E7EAF2;
-    --selection:#5C8C56;
-    --bandeau-bg:#C7C7C7;
-    --entete-bg:#C7C7C7;
-    --statut-bg:#C7C7C7;
-    --cartouche-bg:#1B1B1B;
-    --font-logo:"Metro DF","Segoe UI Black","Segoe UI Semibold","Segoe UI",Arial,sans-serif;
-    --texte-bandeau:#2a2a2a;
-    --sb-width:9px; /* largeur réelle de l'ascenseur, mesurée en JS au chargement (voir script) */
-    --sb-width-rea:9px; /* idem pour l'ascenseur de la sous-liste des réalisations (25 août 2026) */
-    --rouge-suppression:#c0392b;
-  }
-  *{box-sizing:border-box;}
-  html,body{
-    margin:0;padding:0;border:0;width:100%;height:100%;
-    overflow:hidden;
-    font-family:"Segoe UI","Arial",sans-serif;
-    background:#FFFFFF;
-    user-select:none;
-  }
-  /* Conteneur épinglé aux 4 bords du viewport : garantit que le bandeau est
-     toujours parfaitement collé en haut, quel que soit le navigateur. */
-  #app{
-    position:fixed;top:0;left:0;right:0;bottom:0;
-    display:flex;flex-direction:column;
-    background:#FFFFFF;
-    margin:0;padding:0;
-  }
-  /* -------- Bandeau applicatif -------- */
-  #bandeau{
-    height:44px;width:100%;flex:0 0 auto;
-    background:var(--bandeau-bg);
-    display:flex;align-items:center;
-    padding:0 16px;
-    gap:14px;
-  }
-  #hamburger{
-    font-size:20px;cursor:pointer;color:var(--texte-bandeau);
-    padding:2px 6px;border-radius:4px;
-    display:flex;align-items:center;
-  }
-  #hamburger:hover{background:rgba(0,0,0,0.08);}
-  #logo-aspic{
-    display:flex;align-items:center;
-    background:var(--cartouche-bg);
-    border-radius:5px;
-    padding:4px 10px;
-    font-family:var(--font-logo);
-    font-weight:900;font-size:15px;letter-spacing:1.5px;
-  }
-  #logo-aspic .A{color:var(--orange);}
-  #logo-aspic .rest{color:#FFFFFF;}
-  #titre-ecran{
-    font-size:16px;font-weight:800;color:var(--texte-bandeau);letter-spacing:0.5px;
-  }
-  #bandeau-spacer{flex:1;}
-  #avatar{
-    width:28px;height:28px;border-radius:50%;
-    background:var(--gris-fonce);color:#FFFFFF;
-    display:flex;align-items:center;justify-content:center;
-    font-weight:700;font-size:10px;cursor:default;
-    border:1px solid rgba(0,0,0,0.2);
-  }
-
-  /* -------- En-tête colonnes -------- */
-  #entete-colonnes{
-    height:22px;width:100%;flex:0 0 auto;
-    background:var(--entete-bg);
-    border-bottom:1px solid #a0a0a0;
-    display:flex;align-items:center;
-    font-weight:700;font-size:11px;color:#2a2a2a;
-    padding:0 0 0 22px;
-  }
-  .col{padding:0 8px;display:flex;align-items:center;gap:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
-  .case-ascenseur{
-    flex:0 0 auto;
-    display:flex;align-items:center;justify-content:center;
-    font-size:11px;line-height:1;color:#6a6a6a;
-    margin-left:auto;
-  }
-  #entete-colonnes .case-ascenseur{width:calc(var(--sb-width) + 2px);border-left:2px solid #808080;}
-  #statut .case-ascenseur{width:var(--sb-width);}
-  .col-nom{width:330px;}
-  .col-prenom{width:160px;}
-  .col-dept{width:70px;}
-  .col-ville{width:240px;}
-  .col-tel{width:85px;}
-  .col-portable{width:85px;}
-  .col-mail{width:300px;}
-
-  .sortable{cursor:pointer;}
-  .sortable:hover{color:var(--orange);}
-  .sort-icons{display:flex;flex-direction:column;font-size:8px;line-height:8px;color:#8a8a8a;}
-  .sort-icons span{cursor:pointer;}
-  .sort-icons span.actif{color:var(--orange);font-weight:900;}
-
-  /* -------- Corps de liste (zone scrollable : uniquement les lignes) -------- */
-  #zone-liste{
-    width:100%;
-    flex:1 1 auto;
-    min-height:0;
-    overflow-y:auto;
-    overflow-x:hidden;
-  }
-  #zone-liste::-webkit-scrollbar{width:9px;}
-  #zone-liste::-webkit-scrollbar-track{background:#e4e4e4;}
-  #zone-liste::-webkit-scrollbar-thumb{background:#7a7a7a;border-radius:2px;}
-  #zone-liste::-webkit-scrollbar-thumb:hover{background:#5f5f5f;}
-
-  #conteneur-lignes{
-    border-right:2px solid #808080;
-  }
-
-  .ligne-contact{
-    height:16px;width:100%;
-    display:flex;align-items:center;
-    font-size:11px;color:#1e1e1e;
-    padding:0 0 0 22px;
-    cursor:default;
-    box-shadow:inset 0 0 0 2px transparent;
-  }
-  .ligne-contact.zebra-a{background:var(--zebra-jaune);}
-  .ligne-contact.zebra-b{background:var(--zebra-bleu);}
-  .ligne-contact.selected{
-    box-shadow:inset 0 0 0 2px var(--selection);
-    border-radius:2px;
-  }
-  .ligne-contact .col{font-size:11px;}
-
-  /* -------- Barre de statut -------- */
-  #statut{
-    height:20px;width:100%;flex:0 0 auto;
-    background:var(--statut-bg);
-    border-top:1px solid #a0a0a0;
-    display:flex;align-items:center;
-    padding:0 0 0 22px;
-    font-size:10px;color:#2a2a2a;
-    gap:24px;
-  }
-
-  /* -------- Panneaux type "Utilisateur" (menu contextuel, menu hamburger, filtre, détail) -------- */
-  .panneau-aspic{
-    background:#ffffff;border-radius:8px;
-    box-shadow:0 4px 14px rgba(0,0,0,0.25);
-    overflow:hidden;
-  }
-  .panneau-aspic .panneau-titre{
-    background:var(--entete-bg);color:var(--gris-fonce);
-    font-size:12px;font-weight:700;letter-spacing:0.5px;
-    padding:9px 16px;
-  }
-
-  /* -------- Menu contextuel liste -------- */
-  #menu-contextuel{
-    position:absolute;display:none;
-    min-width:200px;z-index:500;
-    border-radius:0;
-  }
-  /* Menu contextuel du panneau détail (mode visualisation) : même habillage
-     que le menu contextuel de la liste, mais z-index au-dessus du voile et
-     du panneau détail (600/601) puisqu'il s'ouvre par-dessus ce panneau. */
-  #menu-detail-contextuel{
-    position:absolute;display:none;
-    min-width:220px;z-index:900;
-    border-radius:0;
-  }
-  #menu-contextuel .item, #menu-detail-contextuel .item{
-    padding:6px 14px;font-size:11px;color:#1e1e1e;cursor:pointer;
-  }
-  #menu-contextuel .item:hover, #menu-detail-contextuel .item:hover{
-    background:transparent;
-    box-shadow:inset 0 0 0 2px var(--selection);
-  }
-  /* Items désactivés (ex. "Contact précédent"/"Contact suivant" en bout de
-     liste, 27 août 2026) : grisés, pas de curseur pointeur, pas de mise en
-     surbrillance au survol — même principe que .desactive du menu hamburger. */
-  #menu-contextuel .item.desactive, #menu-detail-contextuel .item.desactive{
-    color:#aaaaaa;cursor:not-allowed;
-  }
-  #menu-contextuel .item.desactive:hover, #menu-detail-contextuel .item.desactive:hover{
-    box-shadow:none;
-  }
-  /* Items "à venir" (Envoyer un mail / Appeler, 25 août 2026) : en italique
-     pour signaler visuellement qu'il ne s'agit pas encore de fonctionnalités
-     abouties, sans pour autant les désactiver (cliquables, toast "à venir"). */
-  #menu-detail-contextuel .item.item-a-venir{font-style:italic;}
-  #menu-contextuel .separateur, #menu-detail-contextuel .separateur{height:1px;background:#e0e0e0;}
-
-  /* -------- Menu hamburger -------- */
-  #menu-hamburger{
-    position:absolute;top:44px;left:16px;display:none;
-    min-width:240px;z-index:500;
-  }
-  #menu-hamburger .item{padding:12px 18px;font-size:14px;color:#1e1e1e;cursor:pointer;}
-  #menu-hamburger .item:hover{background:var(--gris-clair);}
-  #menu-hamburger .item.desactive{color:#aaaaaa;cursor:not-allowed;}
-
-  /* -------- Panneau filtre -------- */
-  #voile{
-    position:fixed;top:0;left:0;width:100vw;height:100vh;
-    background:rgba(0,0,0,0.35);display:none;z-index:600;
-  }
-  #panneau-filtre{
-    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
-    width:420px;max-width:90vw;
-    max-height:85vh;overflow-y:auto;
-    display:none;
-    z-index:601;
-    border-radius:0;
-  }
-  #panneau-filtre .panneau-corps{padding:18px 24px 20px 24px;}
-  #panneau-filtre .case-suppression{
-    display:flex;align-items:center;gap:8px;
-    font-size:12px;color:var(--gris-fonce);font-weight:600;
-    padding-bottom:10px;margin-bottom:10px;
-    border-bottom:1px solid #e0e0e0;
-  }
-  #panneau-filtre .case-suppression input{width:14px;height:14px;cursor:pointer;}
-
-  #panneau-filtre .ligne-filtre{
-    display:grid;
-    grid-template-columns:86px 1fr;
-    align-items:center;
-    column-gap:8px;
-    margin:5px 0;
-  }
-  #panneau-filtre .lib-filtre{
-    display:flex;align-items:flex-end;overflow:hidden;
-    font-size:11px;color:#444;font-weight:600;cursor:default;
-  }
-  #panneau-filtre .lib-texte{white-space:nowrap;line-height:1;}
-  #panneau-filtre .lib-leader{
-    flex:1 1 auto;margin-left:3px;
-    height:0;margin-bottom:2px;
-    border-bottom:1px dotted #999;
-  }
-  #panneau-filtre input[type=text]{
-    width:100%;padding:6px 9px;font-size:12px;
-    border:1px solid #c0c0c0;border-radius:4px;
-  }
-  #panneau-filtre input[type=text]:disabled{background:#f0f0f0;color:#999;}
-  #panneau-filtre .actions{
-    display:flex;justify-content:flex-end;gap:10px;margin-top:16px;
-  }
-  #panneau-filtre button{
-    padding:8px 16px;border-radius:4px;border:none;
-    font-size:12px;font-weight:600;cursor:pointer;
-  }
-  #btn-appliquer{background:var(--orange);color:#fff;}
-
-  /* =====================================================================
-     -------- Panneau détail du contact (23 août 2026) --------
-     Panneau ouvert par-dessus la liste (même voile que le panneau filtre,
-     #voile est générique et sert aux deux — un seul panneau modal ouvert à
-     la fois dans cet écran). Deux états, VISUALISATION (lecture seule) et
-     MODIFICATION (formulaire éditable), qui sont deux états du même
-     panneau (classe .mode-vue / .mode-edition sur #panneau-detail) plutôt
-     que deux panneaux empilés — voir journal, section 6.
-
-     Habillage repris du panneau filtre (grille CSS "libellé ⋯⋯⋯ champ",
-     pointillé .lib-leader) MAIS PAS la même taille de texte : ici on
-     reprend la police/hauteur de ligne des lignes de la liste des contacts
-     (11px, hauteur de ligne 16px) plutôt que les tailles actuelles du
-     panneau filtre (12px/11px) — précision de Jean-Marc du 23 août 2026.
-     Le panneau filtre sera lui-même aligné sur cette taille plus tard
-     (homogénéisation à faire dans un second temps, pas dans ce fichier).
-     ===================================================================== */
-  /* Pas de scroll au niveau du panneau lui-même (cohérent avec le principe
-     général ASPIC "pas de scroll d'écran", section 6 du journal) : à la
-     résolution de référence 1920×1080, les champs + la sous-liste tiennent
-     sans avoir besoin de défiler. Seule la sous-liste des réalisations a son
-     propre ascenseur interne (#zone-realisations, voir plus bas) — retour de
-     Jean-Marc du 23 août 2026 : "l'ascenseur doit être mis uniquement sur la
-     partie Réalisations". */
-  #panneau-detail{
-    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
-    width:900px;max-width:96vw;
-    display:none;
-    z-index:601;
-    border-radius:0;
-    flex-direction:column;
-  }
-  #panneau-detail .panneau-corps{
-    padding:16px 22px 14px 22px;
-  }
-  /* Mode visualisation (27 août 2026) : la barre de position juste au-dessus
-     joue déjà le rôle de séparateur visuel (comme #entete-colonnes vis-à-vis
-     de #zone-liste, sans marge entre les deux) ; conserver le padding-top de
-     16px ici créait une bande blanche qui se lisait comme une ligne de champ
-     vide au-dessus de "Nom". On retombe sur la même marge que celle déjà
-     posée par .ligne-detail (margin:4px 0) pour un contact "collé" à la
-     barre, cohérent avec la convention de la liste ci-dessus. */
-  #panneau-detail.mode-vue .panneau-corps{
-    padding-top:0;
-  }
-
-  /* -- Grille des deux colonnes de champs -- */
-  /* overflow-y:auto est sans effet tant qu'aucune max-height n'est posée en
-     ligne par JS (mode vue uniquement, voir #diviseur-panneau) — le contenu
-     garde sa hauteur naturelle dans tous les autres cas, comme avant le 25
-     août 2026. */
-  .grille-champs{display:flex;gap:36px;margin-bottom:10px;overflow-y:auto;}
-  .grille-champs::-webkit-scrollbar{width:9px;}
-  .grille-champs::-webkit-scrollbar-track{background:#e4e4e4;}
-  .grille-champs::-webkit-scrollbar-thumb{background:#7a7a7a;border-radius:2px;}
-  .grille-champs::-webkit-scrollbar-thumb:hover{background:#5f5f5f;}
-  .colonne-champs{flex:1 1 0;min-width:0;}
-  .ligne-detail{
-    display:grid;
-    grid-template-columns:98px 1fr;
-    align-items:center;
-    column-gap:8px;
-    min-height:16px;
-    margin:4px 0;
-  }
-  .ligne-detail.ligne-haute{align-items:flex-start;}
-  .ligne-detail .lib-detail{
-    display:flex;align-items:flex-end;overflow:hidden;
-    font-size:11px;color:#444;font-weight:600;cursor:default;
-    height:16px;
-  }
-  .ligne-detail .lib-texte{white-space:nowrap;line-height:1;}
-  .ligne-detail .lib-leader{
-    flex:1 1 auto;margin-left:3px;
-    height:0;margin-bottom:2px;
-    border-bottom:1px dotted #999;
-  }
-  /* Lecture seule : simple texte, pas de chrome de champ de saisie */
-  .valeur-affichage{
-    font-size:11px;color:#1e1e1e;line-height:16px;height:16px;
-    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
-  }
-  .valeur-affichage.multiligne{
-    height:auto;line-height:14px;white-space:pre-wrap;
-    min-height:16px;
-  }
-  /* Police normale, juste non modifiable (demande de Jean-Marc, 25 août 2026 —
-     l'italique précédent ne convenait pas, seule la non-modifiabilité est
-     voulue ici, déjà assurée par l'absence de champ-edit associé). */
-  .valeur-affichage.lecture-seule{color:#777;}
-  /* Édition : champs de saisie compacts, calés sur la hauteur de ligne 16px */
-  .ligne-detail input[type=text],
-  .ligne-detail select{
-    width:100%;height:16px;padding:0 4px;font-size:11px;line-height:14px;
-    border:1px solid #c0c0c0;border-radius:2px;
-    font-family:inherit;
-  }
-  .ligne-detail input[type=text]:disabled{background:#f0f0f0;color:#777;}
-  .ligne-detail textarea{
-    width:100%;height:96px;padding:3px 4px;font-size:11px;line-height:14px;
-    border:1px solid #c0c0c0;border-radius:2px;resize:none;font-family:inherit;
-  }
-  /* Zone de saisie du commentaire de modification (remplace la sous-liste des
-     réalisations en mode édition, voir #bloc-notes-modification plus bas) :
-     même habillage que les autres textarea, hauteur propre pour occuper à peu
-     près le même espace que l'ancien bloc réalisations (24 août 2026). */
-  #commentaire-modification{height:132px;}
-  /* Sélecteurs renforcés (.ligne-detail.champ-XXX input[type=text]) : la règle
-     générale .ligne-detail input[type=text] a une spécificité plus élevée
-     qu'un simple .champ-XXX input, donc l'écrasait silencieusement — bug
-     latent découvert le 24 août 2026 en corrigeant la largeur du champ SIRET
-     (le Code Postal, avec le même défaut, en était visiblement affecté aussi :
-     largeur pleine (304px) au lieu des 70px prévus). Corrigé pour les deux. */
-  .ligne-detail.champ-cp input[type=text]{width:70px;}
-  /* Zone de saisie SIRET dimensionnée pour ~20 caractères plutôt que la pleine
-     largeur de la colonne (demande de Jean-Marc, 24 août 2026). */
-  .ligne-detail.champ-siret input[type=text]{width:150px;}
-  /* Téléphone fixe / Portable : même correctif que CP/SIRET, la zone de
-     saisie occupait toute la largeur de colonne (~40 caractères) alors que
-     maxlength=14 la limite déjà en pratique (demande de Jean-Marc, 25 août
-     2026 — à ne pas confondre avec la limite de saisie elle-même, déjà
-     correcte, voir journal section 16). */
-  .ligne-detail.champ-tel input[type=text]{width:110px;}
-  /* Normalisation du rendu natif des <select> (Profession, Statut) : sans ce
-     correctif, le chrome natif du menu déroulant (zone réservée à la flèche,
-     variable selon navigateur) décale légèrement le texte affiché par rapport
-     aux <input> de saisie des lignes voisines. On neutralise l'apparence native
-     et on redessine une flèche simple en CSS pur, avec le même padding que les
-     champs texte (24 août 2026, remarque de Jean-Marc "l'affichage est
-     légèrement décalé"). */
-  .ligne-detail select{
-    -webkit-appearance:none;-moz-appearance:none;appearance:none;
-    padding-right:16px;
-    background-color:#fff;
-    background-image:
-      linear-gradient(45deg, transparent 50%, #666 50%),
-      linear-gradient(135deg, #666 50%, transparent 50%);
-    background-position:
-      calc(100% - 10px) center,
-      calc(100% - 6px) center;
-    background-size:4px 4px, 4px 4px;
-    background-repeat:no-repeat;
-  }
-  /* Espacement des lignes dans la liste déroulante elle-même (options de
-     Profession/Statut) réduit à la demande de Jean-Marc du 24 août 2026.
-     Note : le rendu de <option> reste en grande partie contrôlé par le
-     système d'exploitation/navigateur (Windows/Chrome respecte peu ce genre
-     de règles) — effet best effort, pas garanti identique partout. */
-  .ligne-detail select option{
-    padding:1px 4px;
-    font-size:11px;
-    line-height:14px;
-  }
-  .ligne-nouvelle-profession{
-    display:none;
-    grid-column:1 / -1;
-    margin-top:2px;
-    gap:6px;
-  }
-  .ligne-nouvelle-profession.visible{display:flex;}
-  .ligne-nouvelle-profession input{
-    flex:1 1 auto;height:16px;padding:0 4px;font-size:11px;
-    border:1px solid var(--selection);border-radius:2px;
-  }
-  .ligne-nouvelle-profession button{
-    flex:0 0 auto;font-size:10px;padding:0 8px;border:none;border-radius:2px;
-    background:var(--selection);color:#fff;cursor:pointer;
-  }
-
-  /* Mode vue / mode édition : bascule d'affichage champ par champ */
-  #panneau-detail.mode-vue .champ-edit{display:none;}
-  #panneau-detail.mode-vue .champ-affichage{display:block;}
-  #panneau-detail.mode-edition .champ-affichage{display:none;}
-  #panneau-detail.mode-edition .champ-edit{display:block;}
-  #panneau-detail.mode-edition .champ-lecture-seule .champ-edit{display:none;}
-  #panneau-detail.mode-edition .champ-lecture-seule .champ-affichage{display:block;}
-  /* Mode suppression (25 août 2026) : champs en lecture seule comme en mode
-     vue (aucune saisie sur les données du contact, seule la zone Informations
-     ci-dessous reste éditable) — voir journal, section 16. */
-  #panneau-detail.mode-suppression .champ-edit{display:none;}
-  #panneau-detail.mode-suppression .champ-affichage{display:block;}
-
-  /* -- Barre de position (27 août 2026, navigation entre contacts) --
-     Même habillage que la barre de statut de l'écran liste (#statut) :
-     fond gris, 20px de haut, police 10px — indique le rang du contact
-     affiché dans la liste triée/filtrée courante ("Contact X/N"), ainsi que
-     le tri et le filtre en cours. Visible en mode visualisation uniquement :
-     masquée en édition/création/suppression ci-dessous (la position n'a pas
-     de sens tant qu'on modifie ou crée un contact), et masquée aussi via JS
-     si le contact affiché ne se retrouve plus dans la liste courante. */
-  #barre-position-detail{
-    height:20px;width:100%;flex:0 0 auto;
-    background:var(--statut-bg);
-    border-bottom:1px solid #a0a0a0;
-    display:flex;align-items:center;
-    padding:0 16px;
-    font-size:10px;color:#2a2a2a;
-    gap:24px;
-  }
-  #panneau-detail.mode-edition #barre-position-detail{display:none;}
-  #panneau-detail.mode-suppression #barre-position-detail{display:none;}
-
-  #panneau-detail .barre-actions{
-    display:flex;justify-content:flex-end;gap:10px;
-    padding:0 22px 14px 22px;flex:0 0 auto;
-  }
-  #panneau-detail.mode-vue .barre-actions{display:none;}
-  #panneau-detail.mode-edition .barre-actions{display:flex;}
-  #panneau-detail.mode-suppression .barre-actions{display:flex;}
-
-  /* Bascule réalisations (lecture seule, mode vue) / zone de commentaire de
-     modification (mode édition) : même emplacement, même principe de bascule
-     que les champs eux-mêmes (garde le panneau à une taille cohérente entre
-     les deux modes — demande de Jean-Marc du 23 août 2026, "sans changer la
-     taille globale de l'écran"). Voir #bloc-notes-modification plus bas. */
-  #panneau-detail.mode-edition #bloc-realisations{display:none;}
-  #panneau-detail.mode-suppression #bloc-realisations{display:none;}
-  /* Barre de redimensionnement : visible en mode visualisation seulement —
-     dans les autres modes la grille des champs reprend sa hauteur naturelle
-     complète, sans contrainte (25 août 2026, voir journal section 17). */
-  #diviseur-panneau{
-    display:none;align-items:center;justify-content:center;
-    height:9px;cursor:row-resize;
-  }
-  #panneau-detail.mode-vue #diviseur-panneau{display:flex;}
-  #diviseur-panneau .poignee{width:44px;height:4px;border-radius:2px;background:#c7c7c7;}
-  #diviseur-panneau:hover .poignee,
-  #diviseur-panneau.en-cours .poignee{background:var(--orange);}
-  #panneau-detail.mode-vue #bloc-notes-modification{display:none;}
-  #bloc-notes-modification{margin-top:10px;}
-  #btn-enregistrer{background:var(--orange);color:#fff;}
-  #btn-enregistrer:disabled{background:#cccccc;color:#888;cursor:not-allowed;}
-  /* Mode suppression : bouton rouge plutôt qu'orange (demande du 25 août
-     2026, "pas en orange"), et placeholder du textarea souligné pour bien
-     signaler que la saisie est obligatoire dans ce mode. */
-  #panneau-detail.mode-suppression #btn-enregistrer{background:var(--rouge-suppression);color:#fff;}
-  #panneau-detail.mode-suppression #btn-enregistrer:disabled{background:#e3a9a2;color:#fff;}
-  #panneau-detail.mode-suppression #commentaire-modification::placeholder{text-decoration:underline;}
-
-  /* -- Sous-liste des réalisations --
-     Pas de ligne de titre "Réalisations" au-dessus du bloc (retiré le 23 août
-     2026 à la demande de Jean-Marc, jugé inutile) : le bloc s'enchaîne
-     directement sous la grille des champs, avec juste une petite marge. */
-  #bloc-realisations{
-    margin-top:10px;
-    border:1px solid #a0a0a0;
-  }
-  #entete-realisations{
-    height:22px;
-    background:var(--entete-bg);
-    border-bottom:1px solid #a0a0a0;
-    display:flex;align-items:center;
-    font-weight:700;font-size:11px;color:#2a2a2a;
-    padding:0 0 0 10px;
-  }
-  /* Cases d'alignement sur l'ascenseur de la sous-liste des réalisations,
-     même principe que la liste des contacts (case-ascenseur, largeur mesurée
-     dynamiquement — 0 si pas d'ascenseur visible). Les triangles haut/bas
-     initialement affichés dans ces cases ont été retirés le 27 août 2026 à la
-     demande de Jean-Marc ("cela n'ajoute rien") — les cases elles-mêmes sont
-     conservées, l'espace qu'elles réservent restant nécessaire à l'alignement
-     des colonnes avec l'ascenseur réel en dessous. */
-  #entete-realisations .case-ascenseur{width:calc(var(--sb-width-rea) + 2px);border-left:2px solid #808080;}
-  #pied-realisations .case-ascenseur{width:var(--sb-width-rea);}
-  #zone-realisations{
-    height:112px; /* 7 lignes de 16px */
-    overflow-y:auto;overflow-x:hidden;
-  }
-  #zone-realisations::-webkit-scrollbar{width:9px;}
-  #zone-realisations::-webkit-scrollbar-track{background:#e4e4e4;}
-  #zone-realisations::-webkit-scrollbar-thumb{background:#7a7a7a;border-radius:2px;}
-  .ligne-realisation{
-    height:16px;
-    display:flex;align-items:center;
-    font-size:11px;color:#1e1e1e;
-    padding:0 0 0 10px;
-    cursor:default;
-  }
-  .ligne-realisation.zebra-a{background:var(--zebra-jaune);}
-  .ligne-realisation.zebra-b{background:var(--zebra-bleu);}
-  .ligne-realisation .col-rea{padding:0 8px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
-  .col-rea-date{width:120px;flex:0 0 auto;}
-  .col-rea-qui{width:40px;flex:0 0 auto;}
-  .col-rea-action{width:190px;flex:0 0 auto;}
-  .col-rea-comment{flex:1 1 auto;}
-  #pied-realisations{
-    height:20px;
-    background:var(--statut-bg);
-    border-top:1px solid #a0a0a0;
-    display:flex;align-items:center;
-    padding:0 0 0 10px;
-    font-size:10px;color:#2a2a2a;
-  }
-
-  /* -------- Toast -------- */
-  #toast{
-    position:fixed;bottom:70px;left:50%;transform:translateX(-50%);
-    background:var(--gris-fonce);color:#fff;
-    padding:14px 24px;border-radius:6px;font-size:14px;
-    box-shadow:0 6px 20px rgba(0,0,0,0.3);
-    display:none;z-index:700;
-  }
-</style>
-</head>
-<body>
-<div id="app">
-
-  <!-- Bandeau applicatif -->
-  <div id="bandeau">
-    <div id="hamburger" title="Menu">&#9776;</div>
-    <div id="logo-aspic"><span class="A">A</span><span class="rest">SPIC</span></div>
-    <div id="titre-ecran">LISTE DES CONTACTS</div>
-    <div id="bandeau-spacer"></div>
-    <div id="avatar" title="Utilisateur">JMP</div>
-  </div>
-
-  <!-- En-tête de colonnes -->
-  <div id="entete-colonnes">
-    <div class="col col-nom sortable" data-tri="CNT_Nom">
-      Nom
-      <span class="sort-icons">
-        <span class="fleche-haut" data-tri="CNT_Nom" data-sens="asc">&#9650;</span>
-        <span class="fleche-bas" data-tri="CNT_Nom" data-sens="desc">&#9660;</span>
-      </span>
-    </div>
-    <div class="col col-prenom">Prénom</div>
-    <div class="col col-dept">Dépt</div>
-    <div class="col col-ville sortable" data-tri="CNT_AdrVille">
-      Ville
-      <span class="sort-icons">
-        <span class="fleche-haut" data-tri="CNT_AdrVille" data-sens="asc">&#9650;</span>
-        <span class="fleche-bas" data-tri="CNT_AdrVille" data-sens="desc">&#9660;</span>
-      </span>
-    </div>
-    <div class="col col-tel">Tél</div>
-    <div class="col col-portable">Portable</div>
-    <div class="col col-mail">Mail</div>
-    <div class="case-ascenseur"></div>
-  </div>
-
-  <!-- Corps de liste -->
-  <div id="zone-liste">
-    <div id="conteneur-lignes"></div>
-  </div>
-
-  <!-- Barre de statut -->
-  <div id="statut">
-    <span id="statut-compte">0/0 contacts</span>
-    <span id="statut-tri">Tri : Nom ascendant</span>
-    <span id="statut-filtre">Filtre : aucun</span>
-    <span class="case-ascenseur"></span>
-  </div>
-
-</div><!-- /#app -->
-
-  <!-- Menu contextuel liste -->
-  <div id="menu-contextuel" class="panneau-aspic">
-    <div class="item" id="menu-ajouter">Ajouter un nouveau contact</div>
-    <div class="separateur" id="menu-detail-sep"></div>
-    <div class="item" id="menu-detail">Afficher le détail de ce contact</div>
-    <div class="separateur"></div>
-    <div class="item" id="menu-filtrer">Filtrer</div>
-  </div>
-
-  <!-- Menu hamburger -->
-  <div id="menu-hamburger" class="panneau-aspic">
-    <div class="panneau-titre">Menu principal</div>
-    <div class="item">Gestion des contacts</div>
-    <div class="item desactive">Gestion des actions</div>
-    <div class="item desactive">Documentation</div>
-  </div>
-
-  <!-- Voile générique : sert au panneau filtre ET au panneau détail (un seul
-       panneau modal ouvert à la fois sur cet écran). -->
-  <div id="voile"></div>
-
-  <!-- Panneau filtre -->
-  <div id="panneau-filtre" class="panneau-aspic">
-    <div class="panneau-corps">
-      <label class="case-suppression">
-        <input type="checkbox" id="f-supprimer-filtres">
-        Supprimer les filtres
-      </label>
-      <div class="ligne-filtre">
-        <label for="f-nom" class="lib-filtre"><span class="lib-texte">Nom</span><span class="lib-leader"></span></label>
-        <input type="text" id="f-nom">
-      </div>
-      <div class="ligne-filtre">
-        <label for="f-prenom" class="lib-filtre"><span class="lib-texte">Prénom</span><span class="lib-leader"></span></label>
-        <input type="text" id="f-prenom">
-      </div>
-      <div class="ligne-filtre">
-        <label for="f-dept" class="lib-filtre"><span class="lib-texte">Département</span><span class="lib-leader"></span></label>
-        <input type="text" id="f-dept" maxlength="2">
-      </div>
-      <div class="ligne-filtre">
-        <label for="f-ville" class="lib-filtre"><span class="lib-texte">Ville</span><span class="lib-leader"></span></label>
-        <input type="text" id="f-ville">
-      </div>
-      <div class="ligne-filtre">
-        <label for="f-tel" class="lib-filtre"><span class="lib-texte">Tél</span><span class="lib-leader"></span></label>
-        <input type="text" id="f-tel">
-      </div>
-      <div class="ligne-filtre">
-        <label for="f-portable" class="lib-filtre"><span class="lib-texte">Portable</span><span class="lib-leader"></span></label>
-        <input type="text" id="f-portable">
-      </div>
-      <div class="ligne-filtre">
-        <label for="f-mail" class="lib-filtre"><span class="lib-texte">Mail</span><span class="lib-leader"></span></label>
-        <input type="text" id="f-mail">
-      </div>
-      <div class="actions">
-        <button id="btn-appliquer">Appliquer</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- =====================================================================
-       Panneau détail du contact (23 août 2026)
-       Ouvert via Entrée (mode vue), double-clic gauche (mode édition), ou
-       menu contextuel de la liste "Afficher le détail de ce contact" (mode
-       vue). Menu contextuel propre à ce panneau, en mode vue uniquement :
-       Modifier le contact / Supprimer le contact / Revenir à la liste.
-       ===================================================================== -->
-  <div id="panneau-detail" class="panneau-aspic mode-vue">
-
-    <!-- Barre de position (27 août 2026) : rang du contact affiché dans la
-         liste actuellement triée/filtrée ("Contact X/N"), tri et filtre en
-         cours (même formulation que la barre de statut de l'écran liste).
-         Visible en mode visualisation uniquement (voir CSS) ; navigation au
-         clavier via PgUp/PgDn, ou via le menu contextuel de ce panneau
-         ("Contact précédent"/"Contact suivant"). -->
-    <div id="barre-position-detail">
-      <span id="position-detail-compte">Contact 1/1</span>
-      <span id="position-detail-tri">Tri : Nom ascendant</span>
-      <span id="position-detail-filtre">Filtre : aucun</span>
-    </div>
-
-    <div class="panneau-corps">
-
-      <div class="grille-champs">
-        <!-- Colonne de gauche -->
-        <div class="colonne-champs">
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Nom</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Nom"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Nom" maxlength="40">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Prénom</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Prenom"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Prenom" maxlength="40">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Profession</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Profession_Libelle"></span>
-            <select class="champ-edit" id="sel-profession" data-champ="CNT_CodeProfession"></select>
-          </div>
-          <div class="ligne-nouvelle-profession" id="ligne-nouvelle-profession">
-            <input type="text" id="nouvelle-profession-texte" placeholder="Libellé de la nouvelle profession" maxlength="40">
-            <button type="button" id="btn-creer-profession">OK</button>
-          </div>
-          <div class="ligne-detail champ-tel">
-            <label class="lib-detail"><span class="lib-texte">Téléphone fixe</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Tel"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Tel" maxlength="14">
-          </div>
-          <div class="ligne-detail champ-tel">
-            <label class="lib-detail"><span class="lib-texte">Portable</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Portable"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Portable" maxlength="14">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Adresse Mail</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Mail"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Mail" maxlength="40">
-          </div>
-          <div class="ligne-detail ligne-haute">
-            <label class="lib-detail"><span class="lib-texte">Notes</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage multiligne" data-champ="CNT_Notes"></span>
-            <textarea class="champ-edit" data-champ="CNT_Notes"></textarea>
-          </div>
-        </div>
-
-        <!-- Colonne de droite -->
-        <div class="colonne-champs">
-          <div class="ligne-detail champ-lecture-seule">
-            <label class="lib-detail"><span class="lib-texte">Code</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage lecture-seule" data-champ="CNT_Code"></span>
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Statut</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Statut_Libelle"></span>
-            <select class="champ-edit" id="sel-statut" data-champ="CNT_Statut"></select>
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Société</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Société"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Société" maxlength="40">
-          </div>
-          <div class="ligne-detail champ-siret">
-            <label class="lib-detail"><span class="lib-texte">SIRET</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_SIRET"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_SIRET" maxlength="20">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Service</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Service"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Service" maxlength="40">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Fonction</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_Fonction"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_Fonction" maxlength="40">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Adresse</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_AdrLig1"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_AdrLig1" maxlength="40">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_AdrLig2"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_AdrLig2" maxlength="40">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_AdrLig3"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_AdrLig3" maxlength="40">
-          </div>
-          <div class="ligne-detail champ-cp">
-            <label class="lib-detail"><span class="lib-texte">Code Postal</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_AdrCP"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_AdrCP" maxlength="5">
-          </div>
-          <div class="ligne-detail">
-            <label class="lib-detail"><span class="lib-texte">Ville</span><span class="lib-leader"></span></label>
-            <span class="champ-affichage valeur-affichage" data-champ="CNT_AdrVille"></span>
-            <input class="champ-edit" type="text" data-champ="CNT_AdrVille" maxlength="40">
-          </div>
-        </div>
-      </div>
-
-      <!-- Barre de redimensionnement (25 août 2026, voir journal section 17) :
-           visible en mode visualisation uniquement, permet de réallouer la
-           hauteur entre la grille des champs et la sous-liste des
-           réalisations, dans les bornes [1ère ligne visible] / [grille
-           complète]. Ratio mémorisé par utilisateur (ASP_Users). -->
-      <div id="diviseur-panneau" title="Glisser pour redimensionner"><span class="poignee"></span></div>
-
-      <!-- Sous-liste des réalisations : lecture seule, alimentée automatiquement
-           (création/modification/suppression), pas d'ajout manuel. Visible
-           uniquement en mode visualisation (voir CSS) — remplacée en mode
-           édition par la zone de commentaire ci-dessous, au même emplacement. -->
-      <div id="bloc-realisations">
-        <div id="entete-realisations">
-          <div class="col-rea col-rea-date">Date</div>
-          <div class="col-rea col-rea-qui">Qui ?</div>
-          <div class="col-rea col-rea-action">Action</div>
-          <div class="col-rea col-rea-comment">Commentaires</div>
-          <div class="case-ascenseur"></div>
-        </div>
-        <div id="zone-realisations">
-          <div id="conteneur-realisations"></div>
-        </div>
-        <div id="pied-realisations">
-          <span id="pied-realisations-texte">0 réalisation</span>
-          <span class="case-ascenseur" style="margin-left:auto;"></span>
-        </div>
-      </div>
-
-      <!-- Zone de commentaire de modification : visible uniquement en mode
-           édition (voir CSS), au même emplacement que le bloc réalisations
-           ci-dessus. Son contenu devient REA_Comment de la réalisation
-           CNT_MAJ journalisée automatiquement à l'enregistrement. -->
-      <div id="bloc-notes-modification">
-        <div class="ligne-detail ligne-haute">
-          <label class="lib-detail"><span class="lib-texte">Informations</span><span class="lib-leader"></span></label>
-          <textarea id="commentaire-modification" placeholder="Notes concernant la modification" maxlength="1000"></textarea>
-        </div>
-      </div>
-
-    </div>
-
-    <div class="barre-actions">
-      <button id="btn-enregistrer">Valider les modifications</button>
-    </div>
-  </div>
-
-  <!-- Menu contextuel du panneau détail (mode visualisation uniquement) -->
-  <div id="menu-detail-contextuel" class="panneau-aspic">
-    <div class="item" id="menu-detail-modifier">Modifier le contact</div>
-    <div class="separateur"></div>
-    <div class="item" id="menu-detail-supprimer">Supprimer le contact</div>
-    <div class="separateur"></div>
-    <!-- "Envoyer un mail" / "Appeler" (25 août 2026) : en italique, pas encore
-         fonctionnels — Jean-Marc doit encore définir le mécanisme
-         d'enregistrement/résumé automatique des échanges (voir journal,
-         section 16). Simple toast "à venir" pour l'instant. -->
-    <div class="item item-a-venir" id="menu-detail-mail">Envoyer un mail</div>
-    <div class="item item-a-venir" id="menu-detail-appeler">Appeler</div>
-    <div class="separateur"></div>
-    <!-- Navigation entre contacts (27 août 2026) : respecte le tri/filtre
-         courant de la liste (contactsAffiches). Grisés en début/fin de
-         liste — voir mettreAJourEtatNavigationContextuelle(). -->
-    <div class="item" id="menu-detail-precedent">Contact précédent</div>
-    <div class="item" id="menu-detail-suivant">Contact suivant</div>
-    <div class="separateur"></div>
-    <div class="item" id="menu-detail-retour">Revenir à la liste des contacts</div>
-  </div>
-
-  <!-- Toast -->
-  <div id="toast"></div>
-
-<script>
-/* =========================================================================
-   ASPIC — Écran "Liste des contacts" + panneau "Détail du contact"
-   -------------------------------------------------------------------------
-   Partie liste : inchangée par rapport à la version reçue le 23 août 2026
-   (branchée sur contacts.php).
-
-   Partie détail : entièrement branchée sur les vraies données (24 août 2026,
-   demande explicite de Jean-Marc "connecte-toi à mes données exclusivement") :
-   - Professions (ASP_Professions) : professions.php — GET pour la liste
-     déroulante, POST pour la création inline "+ Nouvelle profession…".
-   - Statuts (ASP_Statuts) : statuts.php — GET seul (table gérée à la main,
-     pas de création depuis ce formulaire, contrairement à Profession).
-   - Réalisations (ASP_Realisations) : realisations.php — GET filtré sur
-     REA_IncrContact pour l'historique (mode visualisation), POST pour
-     journaliser une nouvelle réalisation (utilisé par "Valider les
-     modifications" ci-dessous).
-   - Enregistrement des modifications (bouton "Valider les modifications") :
-     PUT contacts.php?id=... avec l'ensemble des champs modifiables, puis
-     POST realisations.php (REA_Action=CNT_MAJ, REA_Comment = zone
-     "Informations" du panneau). Scope volontairement limité à la
-     MODIFICATION d'un contact existant (pas la création : génération de
-     CNT_Code et notion de session utilisateur pour REA_CodeUser encore à
-     construire — voir journal). REA_CodeUser est pour l'instant fixé en dur
-     à "JMP" côté realisations.php, en attendant cette notion de session.
-   ========================================================================= */
-
-// ---- Mise en forme d'un numéro de téléphone/portable pour l'affichage ----
-function formaterTelAffichage(valeur){
-  if(!valeur) return "";
-  return valeur.replace(/[^0-9+]/g, "");
-}
-
-// ---- Affichage d'une valeur potentiellement NULL (colonnes optionnelles de
-// la liste, ex. Prénom, Ville, Mail) : une valeur NULL en base, une fois
-// encodée en JSON puis interpolée directement dans un template literal,
-// donne littéralement la chaîne "null" à l'écran — corrigé le 25 août 2026
-// (remarque de Jean-Marc), voir journal section 16. ----
-function aff(valeur){
-  return valeur === null || valeur === undefined ? "" : valeur;
-}
-
-// ---- Chargement des contacts depuis contacts.php ----
-let compteurRequetesContacts = 0;
-
-async function chargerContacts(){
-  const monNumero = ++compteurRequetesContacts;
-
-  const params = new URLSearchParams();
-  params.set("tri", etat.triChamp);
-  params.set("sens", etat.triSens);
-  const f = etat.filtres;
-  if(f.nom)      params.set("f_nom", f.nom);
-  if(f.prenom)   params.set("f_prenom", f.prenom);
-  if(f.dept)     params.set("f_dept", f.dept);
-  if(f.ville)    params.set("f_ville", f.ville);
-  if(f.tel)      params.set("f_tel", f.tel);
-  if(f.portable) params.set("f_portable", f.portable);
-  if(f.mail)     params.set("f_mail", f.mail);
-
-  let resultat;
-  try {
-    const reponse = await fetch("contacts.php?" + params.toString());
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-    const data = await reponse.json();
-    if(!Array.isArray(data.contacts)) throw new Error("Réponse contacts.php inattendue");
-    resultat = { contacts: data.contacts, total: data.total, erreur: false };
-  } catch(erreur){
-    console.error("Erreur de chargement de contacts.php :", erreur);
-    resultat = { contacts: [], total: 0, erreur: true };
-  }
-
-  if(monNumero !== compteurRequetesContacts){
-    return null;
-  }
-  return resultat;
-}
-
-// ---- Rendu de la liste ----
-const conteneurLignes = document.getElementById("conteneur-lignes");
-const zoneListe = document.getElementById("zone-liste");
-let totalContactsActifs = 0;
-
-async function rendreListe(){
-  document.getElementById("statut-compte").textContent = "Chargement…";
-
-  const resultat = await chargerContacts();
-  if(resultat === null) return;
-
-  conteneurLignes.innerHTML = "";
-
-  if(resultat.erreur){
-    contactsAffiches = [];
-    totalContactsActifs = 0;
-    document.getElementById("statut-compte").textContent = "Erreur de connexion à contacts.php";
-    document.getElementById("statut-tri").textContent = "";
-    document.getElementById("statut-filtre").textContent = "";
-    marquerSelection();
-    mesurerEtAppliquerAscenseur();
-    return;
-  }
-
-  contactsAffiches = resultat.contacts;
-  totalContactsActifs = resultat.total;
-
-  contactsAffiches.forEach((c, index)=>{
-    const ligne = document.createElement("div");
-    ligne.className = "ligne-contact " + (index % 2 === 0 ? "zebra-a" : "zebra-b");
-    ligne.dataset.index = index;
-
-    ligne.innerHTML = `
-      <div class="col col-nom">${aff(c.CNT_Nom)}</div>
-      <div class="col col-prenom">${aff(c.CNT_Prenom)}</div>
-      <div class="col col-dept">${aff(c.CNT_Dept)}</div>
-      <div class="col col-ville">${aff(c.CNT_AdrVille)}</div>
-      <div class="col col-tel">${formaterTelAffichage(c.CNT_Tel)}</div>
-      <div class="col col-portable">${formaterTelAffichage(c.CNT_Portable)}</div>
-      <div class="col col-mail">${aff(c.CNT_Mail)}</div>
-    `;
-
-    ligne.addEventListener("click", ()=> selectionnerLigne(index));
-    ligne.addEventListener("dblclick", ()=> ouvrirDetailContact(index, "edition"));
-    ligne.addEventListener("contextmenu", (e)=> gererClicDroit(e, index));
-
-    conteneurLignes.appendChild(ligne);
-  });
-
-  if(etat.ligneSelectionnee >= contactsAffiches.length){
-    etat.ligneSelectionnee = Math.max(0, contactsAffiches.length - 1);
-  }
-  marquerSelection();
-  mettreAJourStatut();
-  mesurerEtAppliquerAscenseur();
-}
-
-// ---- État de l'écran ----
-let etat = {
-  triChamp: "CNT_Nom",
-  triSens: "asc",
-  filtres: { nom:"", prenom:"", dept:"", ville:"", tel:"", portable:"", mail:"" },
-  ligneSelectionnee: 0
-};
-
-let contactsAffiches = [];
-
-function marquerSelection(){
-  document.querySelectorAll(".ligne-contact").forEach(l=>l.classList.remove("selected"));
-  const ligne = conteneurLignes.children[etat.ligneSelectionnee];
-  if(ligne){
-    ligne.classList.add("selected");
-  }
-}
-
-function selectionnerLigne(index, faireDefiler){
-  etat.ligneSelectionnee = index;
-  marquerSelection();
-  if(faireDefiler !== false){
-    const ligne = conteneurLignes.children[index];
-    if(ligne) ligne.scrollIntoView({block:"nearest"});
-  }
-}
-
-function mesurerEtAppliquerAscenseur(){
-  const largeur = Math.max(0, zoneListe.offsetWidth - zoneListe.clientWidth);
-  document.documentElement.style.setProperty("--sb-width", largeur + "px");
-}
-let redimensionnementTimer = null;
-window.addEventListener("resize", ()=>{
-  clearTimeout(redimensionnementTimer);
-  redimensionnementTimer = setTimeout(()=>{
-    mesurerEtAppliquerAscenseur();
-    if(typeof mesurerEtAppliquerAscenseurRealisations === "function") mesurerEtAppliquerAscenseurRealisations();
-  }, 150);
-});
-
-// ---- Barre de statut ----
-// texteTriCourant()/texteFiltreCourant() : factorisées le 27 août 2026 pour
-// être réutilisées telles quelles par la barre de position du panneau détail
-// (#barre-position-detail, voir plus bas) — même formulation partout dans
-// l'écran plutôt qu'une deuxième version dupliquée du même calcul.
-function texteTriCourant(){
-  const nomChamp = etat.triChamp === "CNT_Nom" ? "Nom" : "Ville";
-  const sensTexte = etat.triSens === "asc" ? "ascendant" : "descendant";
-  return `Tri : ${nomChamp} ${sensTexte}`;
-}
-
-function texteFiltreCourant(){
-  const libelles = {nom:"Nom", prenom:"Prénom", dept:"Département", ville:"Ville", tel:"Tél", portable:"Portable", mail:"Mail"};
-  const morceaux = [];
-  Object.keys(etat.filtres).forEach(cle=>{
-    if(etat.filtres[cle]) morceaux.push(`${libelles[cle]} : ${etat.filtres[cle]}`);
-  });
-  return "Filtre : " + (morceaux.length ? morceaux.join(", ") : "aucun");
-}
-
-function mettreAJourStatut(){
-  document.getElementById("statut-compte").textContent =
-    `${contactsAffiches.length}/${totalContactsActifs} contacts`;
-  document.getElementById("statut-tri").textContent = texteTriCourant();
-  document.getElementById("statut-filtre").textContent = texteFiltreCourant();
-
-  document.querySelectorAll(".sort-icons span").forEach(s=>s.classList.remove("actif"));
-  const actif = document.querySelector(
-    `.sort-icons span[data-tri="${etat.triChamp}"][data-sens="${etat.triSens}"]`
-  );
-  if(actif) actif.classList.add("actif");
-}
-
-// ---- Tri par en-tête de colonne ----
-document.querySelectorAll(".sort-icons span").forEach(span=>{
-  span.addEventListener("click", (e)=>{
-    e.stopPropagation();
-    etat.triChamp = span.dataset.tri;
-    etat.triSens = span.dataset.sens;
-    rendreListe();
-  });
-});
-document.querySelectorAll(".col.sortable").forEach(col=>{
-  col.addEventListener("click", ()=>{
-    const champ = col.dataset.tri;
-    if(etat.triChamp === champ){
-      etat.triSens = etat.triSens === "asc" ? "desc" : "asc";
-    } else {
-      etat.triChamp = champ;
-      etat.triSens = "asc";
-    }
-    rendreListe();
-  });
-});
-
-// ---- Navigation clavier + Échap ----
-document.addEventListener("keydown", (e)=>{
-  if(e.key === "Escape"){
-    // Menu contextuel du panneau détail vérifié EN PREMIER (27 août 2026,
-    // correction d'un bug signalé par Jean-Marc) : ce menu ne s'ouvre que
-    // panneau détail déjà ouvert, donc panneauDetailOuvert() est également
-    // vrai à ce moment-là — le vérifier avant lui priorise bien "referme le
-    // panneau le plus prioritaire d'abord" (le menu, empilé par-dessus le
-    // panneau). L'ordre précédent (panneau vérifié avant son propre menu)
-    // fermait tout le panneau au lieu du seul menu.
-    if(menuDetailContextuel.style.display === "block"){
-      e.preventDefault();
-      fermerMenuDetailContextuel();
-      return;
-    }
-    if(panneauDetailOuvert()){
-      e.preventDefault();
-      gererEchapDetail();
-      return;
-    }
-    if(menuContextuel.style.display === "block"){
-      e.preventDefault();
-      fermerMenuContextuel();
-      return;
-    }
-    if(menuHamburger.style.display === "block"){
-      e.preventDefault();
-      fermerMenuHamburger();
-      return;
-    }
-    if(voile.style.display === "block"){
-      e.preventDefault();
-      fermerPanneauFiltre();
-      return;
-    }
-    return;
-  }
-
-  // Navigation entre contacts depuis le panneau détail (27 août 2026),
-  // PgUp/PgDn, en mode visualisation uniquement — respecte l'ordre du tri et
-  // du filtre courants puisqu'elle s'appuie sur contactsAffiches. Interceptée
-  // ici, avant le retour anticipé ci-dessous qui bloque sinon ces touches
-  // tant qu'un panneau modal (filtre ou détail) est ouvert.
-  if(panneauDetailOuvert() && panneauDetail.classList.contains("mode-vue")){
-    if(e.key === "PageDown"){
-      e.preventDefault();
-      naviguerContactSuivant();
-      return;
-    }
-    if(e.key === "PageUp"){
-      e.preventDefault();
-      naviguerContactPrecedent();
-      return;
-    }
-  }
-
-  if(voile.style.display === "block") return;
-
-  if(e.key === "ArrowDown"){
-    e.preventDefault();
-    if(etat.ligneSelectionnee < contactsAffiches.length - 1){
-      selectionnerLigne(etat.ligneSelectionnee + 1);
-    }
-  } else if(e.key === "ArrowUp"){
-    e.preventDefault();
-    if(etat.ligneSelectionnee > 0){
-      selectionnerLigne(etat.ligneSelectionnee - 1);
-    }
-  } else if(e.key === "PageDown"){
-    e.preventDefault();
-    zoneListe.scrollBy({top: 600, behavior:"smooth"});
-  } else if(e.key === "PageUp"){
-    e.preventDefault();
-    zoneListe.scrollBy({top: -600, behavior:"smooth"});
-  } else if(e.key === "Enter"){
-    e.preventDefault();
-    ouvrirDetailContact(etat.ligneSelectionnee, "vue");
-  }
-});
-
-// ---- Clic droit (menu contextuel) et double clic gauche (accès direct) ----
-function gererClicDroit(e, index){
-  e.preventDefault();
-  selectionnerLigne(index, false);
-  ouvrirMenuContextuel(e.pageX, e.pageY, index);
-}
-
-function gererClicDroitZoneVide(e){
-  if(e.target.closest(".ligne-contact")) return;
-  e.preventDefault();
-  ouvrirMenuContextuel(e.pageX, e.pageY, -1);
-}
-zoneListe.addEventListener("contextmenu", gererClicDroitZoneVide);
-
-zoneListe.addEventListener("dblclick", (e)=>{
-  if(e.target.closest(".ligne-contact")) return;
-  ouvrirCreationContact();
-});
-
-const menuContextuel = document.getElementById("menu-contextuel");
-const menuDetailItem = document.getElementById("menu-detail");
-const menuDetailSep = document.getElementById("menu-detail-sep");
-
-function ouvrirMenuContextuel(x, y, index){
-  menuContextuel.style.left = x + "px";
-  menuContextuel.style.top = y + "px";
-  menuContextuel.style.display = "block";
-  menuContextuel.dataset.index = index;
-  const surUnContact = index !== -1;
-  menuDetailItem.style.display = surUnContact ? "" : "none";
-  menuDetailSep.style.display = surUnContact ? "" : "none";
-}
-function fermerMenuContextuel(){
-  menuContextuel.style.display = "none";
-}
-document.addEventListener("click", (e)=>{
-  // Ne pas fermer si le clic vient d'ouvrir un autre panneau au même moment
-  // (le gestionnaire "click global -> fermer menu" ne doit pas s'appliquer
-  // aux clics sur les items eux-mêmes, déjà gérés par leurs propres écouteurs
-  // avec fermeture explicite avant action).
-  fermerMenuContextuel();
-});
-
-function ouvrirCreationContact(){
-  ouvrirDetailContact(null, "edition");
-}
-
-document.getElementById("menu-ajouter").addEventListener("click", ()=>{
-  fermerMenuContextuel();
-  ouvrirCreationContact();
-});
-document.getElementById("menu-detail").addEventListener("click", ()=>{
-  const index = parseInt(menuContextuel.dataset.index, 10);
-  fermerMenuContextuel();
-  ouvrirDetailContact(index, "vue");
-});
-document.getElementById("menu-filtrer").addEventListener("click", ()=>{
-  fermerMenuContextuel();
-  ouvrirPanneauFiltre();
-});
-
-// ---- Toast ----
-let toastTimer = null;
-function afficherToast(message){
-  const toast = document.getElementById("toast");
-  toast.textContent = message;
-  toast.style.display = "block";
-  clearTimeout(toastTimer);
-  toastTimer = setTimeout(()=>{ toast.style.display = "none"; }, 2600);
-}
-
-// ---- Menu hamburger ----
-const menuHamburger = document.getElementById("menu-hamburger");
-document.getElementById("hamburger").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  menuHamburger.style.display = menuHamburger.style.display === "block" ? "none" : "block";
-});
-document.addEventListener("click", ()=>{ menuHamburger.style.display = "none"; });
-function fermerMenuHamburger(){
-  menuHamburger.style.display = "none";
-}
-
-// ---- Panneau filtre ----
-const voile = document.getElementById("voile");
-const panneauFiltre = document.getElementById("panneau-filtre");
-const CHAMPS_FILTRE = ["nom","prenom","dept","ville","tel","portable","mail"];
-
-function ouvrirPanneauFiltre(){
-  voile.style.display = "block";
-  panneauFiltre.style.display = "block";
-  document.getElementById("f-supprimer-filtres").checked = false;
-  CHAMPS_FILTRE.forEach(cle=>{
-    document.getElementById("f-" + cle).value = etat.filtres[cle];
-  });
-  basculerChampsFiltre(false);
-  document.getElementById("f-nom").focus();
-}
-function fermerPanneauFiltre(){
-  voile.style.display = "none";
-  panneauFiltre.style.display = "none";
-}
-function basculerChampsFiltre(desactives){
-  CHAMPS_FILTRE.forEach(cle=>{
-    const champ = document.getElementById("f-" + cle);
-    champ.disabled = desactives;
-    if(desactives) champ.value = "";
-  });
-}
-
-document.getElementById("f-supprimer-filtres").addEventListener("change", (e)=>{
-  basculerChampsFiltre(e.target.checked);
-});
-
-voile.addEventListener("click", ()=>{
-  // Le voile est partagé entre le panneau filtre et le panneau détail :
-  // ferme celui qui est effectivement ouvert.
-  if(panneauFiltre.style.display === "block") fermerPanneauFiltre();
-  if(panneauDetailOuvert()) fermerPanneauDetail();
-});
-
-function appliquerFiltre(){
-  if(document.getElementById("f-supprimer-filtres").checked){
-    etat.filtres = { nom:"", prenom:"", dept:"", ville:"", tel:"", portable:"", mail:"" };
-  } else {
-    const nouveauxFiltres = {};
-    CHAMPS_FILTRE.forEach(cle=>{
-      nouveauxFiltres[cle] = document.getElementById("f-" + cle).value.trim();
-    });
-    etat.filtres = nouveauxFiltres;
-  }
-  fermerPanneauFiltre();
-  etat.ligneSelectionnee = 0;
-  rendreListe();
-}
-
-document.getElementById("btn-appliquer").addEventListener("click", appliquerFiltre);
-
-panneauFiltre.addEventListener("keydown", (e)=>{
-  if(e.key === "Enter"){
-    e.preventDefault();
-    e.stopPropagation();
-    appliquerFiltre();
-  }
-});
-
-/* =========================================================================
-   -------- Panneau détail du contact --------
-   ========================================================================= */
-
-// -- Données de référence : branchées sur les vrais endpoints (24 août 2026) --
-// Professions (ASP_Professions, via professions.php) et Statuts (ASP_Statuts,
-// via statuts.php) sont rechargés à chaque ouverture du panneau, pour refléter
-// tout ajout fait entre-temps (phpMyAdmin, ou création inline pour Profession).
-let PROFESSIONS = [];
-let STATUTS = [];
-
-async function chargerProfessions(){
-  try {
-    const reponse = await fetch("professions.php");
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-    const data = await reponse.json();
-    PROFESSIONS = Array.isArray(data.professions) ? data.professions : [];
-  } catch(erreur){
-    console.error("Erreur de chargement de professions.php :", erreur);
-    afficherToast("Erreur de connexion à professions.php.");
-    PROFESSIONS = [];
-  }
-}
-
-async function chargerStatuts(){
-  try {
-    const reponse = await fetch("statuts.php");
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-    const data = await reponse.json();
-    STATUTS = Array.isArray(data.statuts) ? data.statuts : [];
-  } catch(erreur){
-    console.error("Erreur de chargement de statuts.php :", erreur);
-    afficherToast("Erreur de connexion à statuts.php.");
-    STATUTS = [];
-  }
-}
-
-// Historique des réalisations d'un contact (ASP_Realisations, via
-// realisations.php?id=..., filtré sur REA_IncrContact). N'est appelé que pour
-// un contact existant (jamais en création).
-async function chargerRealisations(idContact){
-  if(!idContact) return [];
-  try {
-    const reponse = await fetch("realisations.php?id=" + encodeURIComponent(idContact));
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-    const data = await reponse.json();
-    return Array.isArray(data.realisations) ? data.realisations : [];
-  } catch(erreur){
-    console.error("Erreur de chargement de realisations.php :", erreur);
-    afficherToast("Erreur de connexion à realisations.php.");
-    return [];
-  }
-}
-
-// Mise en forme d'une date MySQL ("YYYY-MM-DD HH:MM:SS") en "JJ/MM/AAAA HH:MM"
-function formaterDateHeure(valeur){
-  if(!valeur) return "";
-  const m = String(valeur).match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{2}):(\d{2})/);
-  if(!m) return valeur;
-  return `${m[3]}/${m[2]}/${m[1]} ${m[4]}:${m[5]}`;
-}
-
-const panneauDetail = document.getElementById("panneau-detail");
-const selProfession = document.getElementById("sel-profession");
-const selStatut = document.getElementById("sel-statut");
-const ligneNouvelleProfession = document.getElementById("ligne-nouvelle-profession");
-const nouvelleProfessionTexte = document.getElementById("nouvelle-profession-texte");
-
-// -- Saisie forcée en majuscules pour Nom et Ville (demande de Jean-Marc du
-// 25 août 2026) -- Transforme la valeur au fil de la frappe (et au collage,
-// l'évènement "input" couvre les deux), en conservant la position du curseur
-// pour ne pas gêner une correction en cours de mot. Ne touche qu'à la saisie
-// à venir, pas aux données déjà enregistrées telles quelles.
-function forcerMajuscule(champ){
-  const debut = champ.selectionStart, fin = champ.selectionEnd;
-  champ.value = champ.value.toUpperCase();
-  champ.setSelectionRange(debut, fin);
-}
-["CNT_Nom", "CNT_AdrVille"].forEach(nomChamp=>{
-  const champ = panneauDetail.querySelector(`input.champ-edit[data-champ="${nomChamp}"]`);
-  if(champ) champ.addEventListener("input", ()=> forcerMajuscule(champ));
-});
-
-let contactCourant = null; // données brutes du contact en cours (telles que chargées)
-let derniereModeOuverture = "vue";
-
-function panneauDetailOuvert(){
-  return panneauDetail.style.display === "flex";
-}
-
-function peuplerSelectProfession(idSelectionne){
-  selProfession.innerHTML = "";
-  // Option vide : la profession doit pouvoir rester non renseignée (demande
-  // de Jean-Marc du 24 août 2026) — première option, sélectionnée par défaut
-  // quand aucune profession n'est définie pour le contact.
-  const optVide = document.createElement("option");
-  optVide.value = "";
-  optVide.textContent = "";
-  selProfession.appendChild(optVide);
-  PROFESSIONS.forEach(p=>{
-    const opt = document.createElement("option");
-    opt.value = p.PRF_Incr;
-    opt.textContent = p.PRF_Libelle;
-    selProfession.appendChild(opt);
-  });
-  const optNouvelle = document.createElement("option");
-  optNouvelle.value = "__nouvelle__";
-  optNouvelle.textContent = "+ Nouvelle profession…";
-  selProfession.appendChild(optNouvelle);
-  selProfession.value = idSelectionne || "";
-}
-
-function peuplerSelectStatut(codeSelectionne){
-  selStatut.innerHTML = "";
-  STATUTS.forEach(s=>{
-    const opt = document.createElement("option");
-    opt.value = s.STA_Code;
-    opt.textContent = s.STA_Libellé;
-    selStatut.appendChild(opt);
-  });
-  if(codeSelectionne){
-    selStatut.value = codeSelectionne;
-  }
-}
-
-selProfession.addEventListener("change", ()=>{
-  if(selProfession.value === "__nouvelle__"){
-    ligneNouvelleProfession.classList.add("visible");
-    nouvelleProfessionTexte.value = "";
-    nouvelleProfessionTexte.focus();
-  } else {
-    ligneNouvelleProfession.classList.remove("visible");
-  }
-});
-
-async function creerNouvelleProfession(){
-  const libelle = nouvelleProfessionTexte.value.trim();
-  if(!libelle) { nouvelleProfessionTexte.focus(); return; }
-  try {
-    const reponse = await fetch("professions.php", {
-      method: "POST",
-      headers: {"Content-Type": "application/json"},
-      body: JSON.stringify({PRF_Libelle: libelle})
-    });
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-    const data = await reponse.json();
-    if(data.error) throw new Error(data.error);
-    await chargerProfessions();
-    peuplerSelectProfession(data.id);
-    ligneNouvelleProfession.classList.remove("visible");
-  } catch(erreur){
-    console.error("Erreur de création de la profession :", erreur);
-    afficherToast("Erreur : impossible de créer cette profession.");
-  }
-}
-document.getElementById("btn-creer-profession").addEventListener("click", creerNouvelleProfession);
-nouvelleProfessionTexte.addEventListener("keydown", (e)=>{
-  if(e.key === "Enter"){ e.preventDefault(); e.stopPropagation(); creerNouvelleProfession(); }
-});
-
-function libelleProfession(id){
-  const p = PROFESSIONS.find(p=>String(p.PRF_Incr) === String(id));
-  return p ? p.PRF_Libelle : "";
-}
-function libelleStatut(code){
-  const s = STATUTS.find(s=>s.STA_Code === code);
-  return s ? s.STA_Libellé : "";
-}
-
-// -- Remplissage des champs (affichage ET édition) à partir d'un contact --
-function remplirChampsContact(c){
-  const champs = ["CNT_Nom","CNT_Prenom","CNT_Tel","CNT_Portable","CNT_Mail","CNT_Notes",
-    "CNT_Société","CNT_SIRET","CNT_Service","CNT_Fonction",
-    "CNT_AdrLig1","CNT_AdrLig2","CNT_AdrLig3","CNT_AdrCP","CNT_AdrVille","CNT_Code"];
-  champs.forEach(nom=>{
-    const valeur = c[nom] || "";
-    const affichage = panneauDetail.querySelector(`.champ-affichage[data-champ="${nom}"]`);
-    const edition = panneauDetail.querySelector(`input.champ-edit[data-champ="${nom}"], textarea.champ-edit[data-champ="${nom}"]`);
-    if(affichage) affichage.textContent = valeur;
-    if(edition){
-      // Filet de sécurité pour Tél/Portable : maxlength HTML (14) n'empêche
-      // que la SAISIE au clavier, pas une valeur déjà plus longue chargée
-      // depuis la base par programmation (25 août 2026, remarque de Jean-Marc
-      // "semble accepter plus de 14 caractères" — voir journal section 16).
-      const estTel = (nom === "CNT_Tel" || nom === "CNT_Portable");
-      edition.value = estTel && typeof valeur === "string" ? valeur.slice(0, 14) : valeur;
-    }
-  });
-
-  peuplerSelectProfession(c.CNT_CodeProfession);
-  panneauDetail.querySelector('[data-champ="CNT_Profession_Libelle"]').textContent = libelleProfession(c.CNT_CodeProfession);
-  ligneNouvelleProfession.classList.remove("visible");
-
-  peuplerSelectStatut(c.CNT_Statut);
-  panneauDetail.querySelector('[data-champ="CNT_Statut_Libelle"]').textContent = libelleStatut(c.CNT_Statut);
-}
-
-function remplirChampsVide(){
-  panneauDetail.querySelectorAll(".champ-affichage").forEach(el=> el.textContent = "");
-  panneauDetail.querySelectorAll("input.champ-edit, textarea.champ-edit").forEach(el=> el.value = "");
-  panneauDetail.querySelector('[data-champ="CNT_Code"]').textContent = "(généré à l'enregistrement)";
-  peuplerSelectProfession(null);
-  panneauDetail.querySelector('[data-champ="CNT_Profession_Libelle"]').textContent = "";
-  ligneNouvelleProfession.classList.remove("visible");
-  peuplerSelectStatut(null);
-  panneauDetail.querySelector('[data-champ="CNT_Statut_Libelle"]').textContent = "";
-}
-
-// -- Sous-liste des réalisations (lecture seule, mode vue uniquement) --
-const conteneurRealisations = document.getElementById("conteneur-realisations");
-
-async function rendreRealisations(idContact){
-  conteneurRealisations.innerHTML = "";
-  const liste = await chargerRealisations(idContact);
-  liste.forEach((r, index)=>{
-    const ligne = document.createElement("div");
-    ligne.className = "ligne-realisation " + (index % 2 === 0 ? "zebra-a" : "zebra-b");
-    ligne.innerHTML = `
-      <div class="col-rea col-rea-date">${formaterDateHeure(r.REA_Date)}</div>
-      <div class="col-rea col-rea-qui">${r.REA_CodeUser || ""}</div>
-      <div class="col-rea col-rea-action">${r.ACT_Libelle || r.REA_Action || ""}</div>
-      <div class="col-rea col-rea-comment">${r.REA_Comment || ""}</div>
-    `;
-    conteneurRealisations.appendChild(ligne);
-  });
-  const n = liste.length;
-  document.getElementById("pied-realisations-texte").textContent =
-    n + (n > 1 ? " réalisations" : " réalisation");
-  mesurerEtAppliquerAscenseurRealisations();
-}
-
-// Triangles haut/bas de la sous-liste des réalisations, alignés sur son
-// ascenseur propre — même principe que mesurerEtAppliquerAscenseur() pour la
-// liste des contacts, largeur nulle quand pas d'ascenseur visible (25 août 2026).
-const zoneRealisations = document.getElementById("zone-realisations");
-function mesurerEtAppliquerAscenseurRealisations(){
-  const largeur = Math.max(0, zoneRealisations.offsetWidth - zoneRealisations.clientWidth);
-  document.documentElement.style.setProperty("--sb-width-rea", largeur + "px");
-}
-
-/* =========================================================================
-   -------- Barre de position et navigation entre contacts (27 août 2026) --
-   Demande de Jean-Marc : pouvoir passer au contact suivant/précédent depuis
-   le panneau de visualisation, en respectant l'ordre de tri et le filtre en
-   cours — donc en s'appuyant directement sur contactsAffiches, déjà
-   trié/filtré côté serveur par chargerContacts(). Uniquement en mode
-   visualisation : la barre est masquée en édition/création/suppression (voir
-   CSS), et PgUp/PgDn n'ont alors aucun effet particulier (voir gestionnaire
-   keydown ci-dessus).
-   ========================================================================= */
-const barrePositionDetail = document.getElementById("barre-position-detail");
-const positionDetailCompte = document.getElementById("position-detail-compte");
-const positionDetailTri = document.getElementById("position-detail-tri");
-const positionDetailFiltre = document.getElementById("position-detail-filtre");
-
-// Position (0-based) du contact actuellement affiché dans contactsAffiches ;
-// -1 si le contact n'a pas pu y être retrouvé (ex. un filtre modifié entre
-// deux ouvertures du panneau l'exclurait désormais de la liste courante).
-let indexContactCourantDansListe = -1;
-
-function indexDansListeAffichee(id){
-  if(id === null || id === undefined) return -1;
-  return contactsAffiches.findIndex(c => String(c.CNT_Incr) === String(id));
-}
-
-function mettreAJourBarrePosition(){
-  if(!contactCourant){
-    indexContactCourantDansListe = -1;
-    mettreAJourEtatNavigationContextuelle();
-    return;
-  }
-  indexContactCourantDansListe = indexDansListeAffichee(contactCourant.CNT_Incr);
-  if(indexContactCourantDansListe === -1){
-    // Contact affiché mais absent de la liste courante : pas de position
-    // fiable à afficher, plutôt que d'en montrer une fausse.
-    barrePositionDetail.style.display = "none";
-    mettreAJourEtatNavigationContextuelle();
-    return;
-  }
-  barrePositionDetail.style.display = "";
-  positionDetailCompte.textContent = `Contact ${indexContactCourantDansListe + 1}/${contactsAffiches.length}`;
-  positionDetailTri.textContent = texteTriCourant();
-  positionDetailFiltre.textContent = texteFiltreCourant();
-  mettreAJourEtatNavigationContextuelle();
-}
-
-function peutNaviguerPrecedent(){
-  return indexContactCourantDansListe > 0;
-}
-function peutNaviguerSuivant(){
-  return indexContactCourantDansListe !== -1 && indexContactCourantDansListe < contactsAffiches.length - 1;
-}
-
-// Met à jour l'état grisé des items "Contact précédent"/"Contact suivant" du
-// menu contextuel du panneau détail, à partir de la position courante.
-function mettreAJourEtatNavigationContextuelle(){
-  const itemPrecedent = document.getElementById("menu-detail-precedent");
-  const itemSuivant = document.getElementById("menu-detail-suivant");
-  if(itemPrecedent) itemPrecedent.classList.toggle("desactive", !peutNaviguerPrecedent());
-  if(itemSuivant) itemSuivant.classList.toggle("desactive", !peutNaviguerSuivant());
-}
-
-// Sélectionne aussi la ligne correspondante dans la liste sous-jacente
-// (etat.ligneSelectionnee), pour que la sélection reste cohérente si le
-// panneau est refermé juste après une navigation.
-async function naviguerContactPrecedent(){
-  if(!panneauDetail.classList.contains("mode-vue") || !peutNaviguerPrecedent()) return;
-  const nouvelIndex = indexContactCourantDansListe - 1;
-  selectionnerLigne(nouvelIndex);
-  await afficherDetailPourId(contactsAffiches[nouvelIndex].CNT_Incr, "vue");
-}
-async function naviguerContactSuivant(){
-  if(!panneauDetail.classList.contains("mode-vue") || !peutNaviguerSuivant()) return;
-  const nouvelIndex = indexContactCourantDansListe + 1;
-  selectionnerLigne(nouvelIndex);
-  await afficherDetailPourId(contactsAffiches[nouvelIndex].CNT_Incr, "vue");
-}
-
-/* =========================================================================
-   -------- Panneau redimensionnable (mode visualisation uniquement) --------
-   25 août 2026, voir journal section 17. Répartition de la hauteur entre la
-   grille des champs (haut) et la sous-liste des réalisations (bas), bornée
-   entre "seule la ligne Nom visible" (minimum) et "grille complète" (maximum,
-   comportement identique à avant l'introduction de cette fonctionnalité).
-   Ratio (0-100) mémorisé côté serveur, par utilisateur (ASP_Users), via
-   preferences.php.
-   ========================================================================= */
-const grilleChamps = panneauDetail.querySelector(".grille-champs");
-const diviseurPanneau = document.getElementById("diviseur-panneau");
-const blocRealisations = document.getElementById("bloc-realisations");
-const HAUTEUR_MIN_ZONE_REALISATIONS = 40; // garde-fou, jamais totalement écrasée
-
-let PREFERENCES = { USR_RatioPanneauContact: 100, USR_RatioPanneauProspect: 100 };
-let mesuresRedimensionnement = null; // recalculées à chaque entrée en mode vue
-let ratioPanneauCourant = 100;
-
-async function chargerPreferences(){
-  try {
-    const reponse = await fetch("preferences.php");
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-    const data = await reponse.json();
-    if(typeof data.USR_RatioPanneauContact === "number") PREFERENCES.USR_RatioPanneauContact = data.USR_RatioPanneauContact;
-    if(typeof data.USR_RatioPanneauProspect === "number") PREFERENCES.USR_RatioPanneauProspect = data.USR_RatioPanneauProspect;
-  } catch(erreur){
-    console.error("Erreur de chargement de preferences.php :", erreur);
-    // Pas de toast : une préférence d'affichage non chargée retombe sur le
-    // comportement par défaut (100, grille complète), sans rien bloquer.
-  }
-}
-
-async function sauvegarderRatioContact(ratio){
-  PREFERENCES.USR_RatioPanneauContact = ratio;
-  try {
-    const reponse = await fetch("preferences.php", {
-      method: "PUT",
-      headers: {"Content-Type": "application/json"},
-      body: JSON.stringify({ USR_RatioPanneauContact: ratio })
-    });
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-  } catch(erreur){
-    console.error("Erreur d'enregistrement du ratio du panneau détail :", erreur);
-    // Best-effort, comme pour les autres préférences : la répartition reste
-    // correcte pour la session en cours même si l'enregistrement échoue,
-    // seule la mémorisation pour la prochaine ouverture est perdue.
-  }
-}
-
-// Mesure la hauteur (offsetHeight) que prendrait #panneau-detail dans un
-// mode donné, sans l'afficher réellement dans cet état : bascule temporaire
-// des classes de mode, lecture, puis retour immédiat à l'état d'origine —
-// tout se passe de façon synchrone, avant la moindre repeinture visible par
-// l'utilisateur. Utilisée ci-dessous pour connaître la hauteur "cible" du
-// mode édition sans avoir à y basculer pour de vrai (27 août 2026).
-function mesurerHauteurPanneauPourMode(mode){
-  const classesOriginales = panneauDetail.className;
-  panneauDetail.classList.remove("mode-vue","mode-edition","mode-suppression");
-  panneauDetail.classList.add("mode-" + mode);
-  const hauteur = panneauDetail.offsetHeight;
-  panneauDetail.className = classesOriginales;
-  return hauteur;
-}
-
-// Mesure les bornes naturelles de la zone redimensionnable. Réinitialise
-// d'abord tout style en ligne précédemment posé, pour mesurer les hauteurs
-// CSS réelles plutôt qu'une valeur déjà contrainte par un ratio antérieur.
-function mesurerZoneRedimensionnable(){
-  grilleChamps.style.maxHeight = "";
-  grilleChamps.style.overflowY = "";
-  zoneRealisations.style.height = "";
-
-  const grilleNaturalHeight = grilleChamps.scrollHeight;
-  const premiereLigne = grilleChamps.querySelector(".ligne-detail");
-  const minTop = premiereLigne ? premiereLigne.getBoundingClientRect().height : 24;
-  const blocRealisationsNaturalHeight = blocRealisations.offsetHeight;
-  const chromeReal = blocRealisationsNaturalHeight - zoneRealisations.offsetHeight;
-
-  // Le panneau de visualisation doit occuper EXACTEMENT la même hauteur
-  // totale que le panneau d'édition/création (demande de Jean-Marc du 27
-  // août 2026, suite à l'ajout de la barre de position qui avait fait
-  // grandir le mode visualisation sans toucher au mode édition) — quitte à
-  // perdre un peu de hauteur sur la grille+réalisations, arbitrable ensuite
-  // via la barre de répartition. "écart" est mesuré dynamiquement (plutôt
-  // que déduit en dur de la hauteur de la barre de position) pour rester
-  // juste quel que soit ce qui cause la différence entre les deux modes,
-  // aujourd'hui ou après un futur changement de l'un des deux panneaux.
-  const hauteurNaturelleVue = panneauDetail.offsetHeight;
-  const hauteurCibleEdition = mesurerHauteurPanneauPourMode("edition");
-  const ecart = Math.max(0, hauteurNaturelleVue - hauteurCibleEdition);
-
-  return {
-    minTop,
-    grilleNaturalHeight,
-    chromeReal,
-    totalHeight: grilleNaturalHeight + blocRealisationsNaturalHeight - ecart
-  };
-}
-
-// Applique un ratio (0-100) : 100 = grille complète (comportement d'avant
-// cette fonctionnalité, valeur par défaut en base), 0 = grille réduite à la
-// seule ligne Nom, réalisations récupérant l'espace ainsi libéré.
-function appliquerRatioPanneau(ratio){
-  if(!mesuresRedimensionnement) return;
-  ratio = Math.max(0, Math.min(100, Math.round(ratio)));
-  const { minTop, grilleNaturalHeight, chromeReal, totalHeight } = mesuresRedimensionnement;
-
-  const topHeight = grilleNaturalHeight > minTop
-    ? minTop + (ratio / 100) * (grilleNaturalHeight - minTop)
-    : grilleNaturalHeight;
-  grilleChamps.style.maxHeight = topHeight + "px";
-  grilleChamps.style.overflowY = "auto";
-
-  const hauteurZoneReal = Math.max(HAUTEUR_MIN_ZONE_REALISATIONS, totalHeight - topHeight - chromeReal);
-  zoneRealisations.style.height = hauteurZoneReal + "px";
-
-  ratioPanneauCourant = ratio;
-}
-
-let dragRedimensionnementEnCours = false;
-let dragReferenceHautGrille = 0;
-
-diviseurPanneau.addEventListener("mousedown", (e)=>{
-  if(!panneauDetail.classList.contains("mode-vue") || !mesuresRedimensionnement) return;
-  dragRedimensionnementEnCours = true;
-  diviseurPanneau.classList.add("en-cours");
-  dragReferenceHautGrille = grilleChamps.getBoundingClientRect().top;
-  e.preventDefault();
-});
-
-document.addEventListener("mousemove", (e)=>{
-  if(!dragRedimensionnementEnCours) return;
-  const { minTop, grilleNaturalHeight } = mesuresRedimensionnement;
-  const hauteurSouhaitee = e.clientY - dragReferenceHautGrille;
-  const bornee = Math.max(minTop, Math.min(grilleNaturalHeight, hauteurSouhaitee));
-  const ratio = grilleNaturalHeight > minTop
-    ? ((bornee - minTop) / (grilleNaturalHeight - minTop)) * 100
-    : 100;
-  appliquerRatioPanneau(ratio);
-});
-
-document.addEventListener("mouseup", ()=>{
-  if(!dragRedimensionnementEnCours) return;
-  dragRedimensionnementEnCours = false;
-  diviseurPanneau.classList.remove("en-cours");
-  sauvegarderRatioContact(ratioPanneauCourant);
-});
-
-// -- Zone de commentaire de modification (mode édition, voir bloc-notes-modification) --
-const commentaireModification = document.getElementById("commentaire-modification");
-function effacerCommentaireModification(){
-  commentaireModification.value = "";
-}
-
-// -- Chargement d'un contact depuis contacts.php --
-async function chargerContact(id){
-  try {
-    const reponse = await fetch("contacts.php?id=" + encodeURIComponent(id));
-    if(!reponse.ok) throw new Error("HTTP " + reponse.status);
-    const data = await reponse.json();
-    if(data.error) throw new Error(data.error);
-    return data;
-  } catch(erreur){
-    console.error("Erreur de chargement du contact :", erreur);
-    afficherToast("Erreur de connexion à contacts.php pour charger ce contact.");
-    return null;
-  }
-}
-
-// -- Ouverture / fermeture du panneau --
-// Point d'entrée historique : index dans contactsAffiches (liste affichée) ou
-// null pour une création. Conservé tel quel pour les appels existants (liste,
-// menu "Ajouter un nouveau contact").
-async function ouvrirDetailContact(indexOuId, mode){
-  let id = null;
-  if(indexOuId !== null && typeof indexOuId === "number" && contactsAffiches[indexOuId]){
-    id = contactsAffiches[indexOuId].CNT_Incr;
-  }
-  return afficherDetailPourId(id, mode);
-}
-
-// Point d'entrée direct par CNT_Incr réel (25 août 2026) : utilisé pour
-// rouvrir un contact fraîchement créé ou modifié, sans dépendre de sa
-// position dans la liste actuellement affichée (qui peut avoir changé, ou ne
-// pas encore avoir été rechargée).
-async function afficherDetailPourId(id, mode){
-  fermerMenuContextuel();
-
-  // Professions et statuts toujours rechargés depuis les vraies tables de
-  // référence à chaque ouverture (voir chargerProfessions/chargerStatuts).
-  await Promise.all([chargerProfessions(), chargerStatuts()]);
-
-  if(id){
-    const data = await chargerContact(id);
-    if(!data) return; // échec réseau : on n'ouvre pas le panneau sur des données vides
-    contactCourant = data;
-    remplirChampsContact(data);
-    await rendreRealisations(id);
-  } else {
-    contactCourant = null;
-    remplirChampsVide();
-    await rendreRealisations(null);
-  }
-
-  effacerCommentaireModification();
-  voile.style.display = "block";
-  panneauDetail.style.display = "flex";
-  basculerModeDetail(mode || "vue");
-  // Re-mesure de l'ascenseur des réalisations APRÈS que le panneau soit
-  // effectivement affiché : appelée plus haut par rendreRealisations(), la
-  // mesure y était faite pendant que le panneau était encore display:none
-  // (offsetWidth/clientWidth valent alors 0), donnant à tort un ascenseur
-  // "invisible" même quand la liste déborde (bug repéré en test, 25 août 2026).
-  mesurerEtAppliquerAscenseurRealisations();
-}
-
-function fermerPanneauDetail(){
-  voile.style.display = "none";
-  panneauDetail.style.display = "none";
-  fermerMenuDetailContextuel();
-}
-
-const btnEnregistrer = document.getElementById("btn-enregistrer");
-const MODES_VALIDES = ["vue", "edition", "suppression"];
-
-// Bouton + placeholder du bloc Informations : le texte dépend du mode ET,
-// en édition, de si on modifie un contact existant ou qu'on en crée un
-// nouveau (25 août 2026, voir journal section 16).
-function mettreAJourLibellesActionPanneau(){
-  if(panneauDetail.classList.contains("mode-suppression")){
-    btnEnregistrer.textContent = "Valider la suppression de ce contact";
-    commentaireModification.placeholder = "Notes concernant la suppression : saisie obligatoire";
-  } else if(panneauDetail.classList.contains("mode-edition")){
-    if(contactCourant){
-      btnEnregistrer.textContent = "Valider les modifications";
-      commentaireModification.placeholder = "Notes concernant la modification";
-    } else {
-      btnEnregistrer.textContent = "Confirmer l'ajout de ce contact";
-      commentaireModification.placeholder = "Notes concernant l'ajout";
-    }
-  }
-}
-
-// En mode suppression, la saisie du commentaire est obligatoire : le bouton
-// reste désactivé (pas de message, juste l'état du bouton — demande de
-// Jean-Marc du 25 août 2026) tant que la zone est vide.
-function mettreAJourEtatBoutonSuppression(){
-  if(!panneauDetail.classList.contains("mode-suppression")) return;
-  btnEnregistrer.disabled = commentaireModification.value.trim() === "";
-}
-commentaireModification.addEventListener("input", mettreAJourEtatBoutonSuppression);
-
-function basculerModeDetail(mode){
-  if(!MODES_VALIDES.includes(mode)) mode = "vue";
-  derniereModeOuverture = mode;
-  panneauDetail.classList.remove("mode-vue","mode-edition","mode-suppression");
-  panneauDetail.classList.add("mode-" + mode);
-
-  if(mode === "edition" || mode === "suppression"){
-    effacerCommentaireModification();
-  }
-  mettreAJourLibellesActionPanneau();
-
-  if(mode === "suppression"){
-    btnEnregistrer.disabled = true; // zone vide au départ (voir ci-dessus)
-    commentaireModification.focus();
-  } else {
-    btnEnregistrer.disabled = false;
-  }
-
-  if(mode === "edition"){
-    // Focus automatique sur Nom en entrant en édition (demande du 25 août 2026).
-    const champNom = panneauDetail.querySelector('input.champ-edit[data-champ="CNT_Nom"]');
-    if(champNom) champNom.focus();
-  }
-
-  // Panneau redimensionnable (25 août 2026) : uniquement en mode visualisation
-  // — dans les autres modes, la grille des champs reprend sa hauteur naturelle
-  // complète, sans contrainte (édition/création/suppression ne masquent pas
-  // le besoin de voir tous les champs).
-  if(mode === "vue"){
-    // mettreAJourBarrePosition() D'ABORD (27 août 2026) : elle fixe l'état
-    // d'affichage réel de la barre de position (visible, ou masquée si le
-    // contact ne se retrouve plus dans la liste courante) avant que
-    // mesurerZoneRedimensionnable() ne mesure la hauteur naturelle du
-    // panneau — sinon un état d'affichage laissé par l'ouverture précédente
-    // fausserait cette mesure.
-    mettreAJourBarrePosition();
-    mesuresRedimensionnement = mesurerZoneRedimensionnable();
-    appliquerRatioPanneau(PREFERENCES.USR_RatioPanneauContact);
-  } else {
-    grilleChamps.style.maxHeight = "";
-    grilleChamps.style.overflowY = "";
-    zoneRealisations.style.height = "";
-  }
-}
-
-// Échap : en mode édition ou suppression -> repasse en visualisation SANS
-// prendre en compte la saisie en cours (on recharge simplement les valeurs
-// d'affichage, déjà intactes puisqu'on n'écrit dans contactCourant qu'à
-// l'enregistrement). Un second Échap (depuis la visualisation) referme le
-// panneau et revient à la liste — confirmé par Jean-Marc le 23 août 2026,
-// étendu au mode suppression le 25 août 2026 (annuler une suppression doit
-// ramener à la visualisation, pas fermer le panneau directement).
-function gererEchapDetail(){
-  if(panneauDetail.classList.contains("mode-edition") || panneauDetail.classList.contains("mode-suppression")){
-    if(contactCourant){
-      remplirChampsContact(contactCourant); // annule toute saisie en cours
-    } else {
-      remplirChampsVide(); // création en cours abandonnée
-    }
-    effacerCommentaireModification();
-    basculerModeDetail("vue");
-  } else {
-    fermerPanneauDetail();
-  }
-}
-
-// Double-clic gauche en mode visualisation -> passage direct en édition,
-// sans repasser par le menu contextuel (demande du 25 août 2026).
-panneauDetail.addEventListener("dblclick", ()=>{
-  if(!panneauDetail.classList.contains("mode-vue")) return;
-  basculerModeDetail("edition");
-});
-
-// -- Bouton "Valider les modifications" --
-// Champs texte simples envoyés tels quels dans le corps JSON du PUT. Profession
-// et Statut sont gérés à part (sélection en cours dans les <select>, avec le
-// cas particulier "__nouvelle__" pour Profession — ne devrait normalement pas
-// se présenter ici puisque creerNouvelleProfession() referme cette option dès
-// qu'une profession est créée, mais on s'en protège quand même).
-const CHAMPS_TEXTE_MODIFIABLES = [
-  "CNT_Nom","CNT_Prenom","CNT_Tel","CNT_Portable","CNT_Mail","CNT_Notes",
-  "CNT_Société","CNT_SIRET","CNT_Service","CNT_Fonction",
-  "CNT_AdrLig1","CNT_AdrLig2","CNT_AdrLig3","CNT_AdrCP","CNT_AdrVille"
-];
-
-btnEnregistrer.addEventListener("click", ()=>{
-  if(panneauDetail.classList.contains("mode-suppression")){
-    validerSuppression();
-  } else {
-    validerFormulaireContact();
-  }
-});
-
-// Lit une réponse fetch en tentant un .json(), avec repli sur le texte brut
-// si le corps n'est pas du JSON valide (ex. erreur serveur non interceptée
-// ayant renvoyé une page HTML) — pour avoir un message exploitable dans la
-// console plutôt qu'un échec de parsing muet (voir journal, 24 août 2026).
-async function lireReponse(reponse){
-  const texte = await reponse.text();
-  try { return {json: JSON.parse(texte), texte}; }
-  catch(e) { return {json: null, texte}; }
-}
-
-// -- Bouton "Valider les modifications" / "Confirmer l'ajout de ce contact" --
-// Un seul bouton, un seul gestionnaire : dispatch MODIFICATION (PUT) ou
-// CRÉATION (POST) selon contactCourant, comme déjà fait pour les libellés
-// (mettreAJourLibellesActionPanneau) — étendu le 25 août 2026 pour couvrir
-// réellement la création (génération de CNT_Code désormais implémentée côté
-// contacts.php, REA_CodeUser lu depuis la session, voir journal section 16).
-async function validerFormulaireContact(){
-  const nomInput = panneauDetail.querySelector('input.champ-edit[data-champ="CNT_Nom"]');
-  if(!nomInput.value.trim()){
-    afficherToast("Le nom est obligatoire.");
-    nomInput.focus();
-    return;
-  }
-
-  const donnees = {};
-  CHAMPS_TEXTE_MODIFIABLES.forEach(nomChamp=>{
-    const el = panneauDetail.querySelector(
-      `input.champ-edit[data-champ="${nomChamp}"], textarea.champ-edit[data-champ="${nomChamp}"]`
-    );
-    if(el) donnees[nomChamp] = el.value.trim();
-  });
-  donnees.CNT_CodeProfession = (selProfession.value && selProfession.value !== "__nouvelle__")
-    ? selProfession.value : null;
-  donnees.CNT_Statut = selStatut.value || null;
-
-  const commentaire = commentaireModification.value.trim();
-  const enModification = !!contactCourant;
-
-  try {
-    let idContact;
-    if(enModification){
-      idContact = contactCourant.CNT_Incr;
-      const reponse = await fetch("contacts.php?id=" + encodeURIComponent(idContact), {
-        method: "PUT",
-        headers: {"Content-Type": "application/json"},
-        body: JSON.stringify(donnees)
-      });
-      const {json: data, texte} = await lireReponse(reponse);
-      if(!reponse.ok || (data && data.error)){
-        console.error("Erreur PUT contacts.php :", reponse.status, data ? data.error : texte);
-        afficherToast("Erreur : impossible d'enregistrer les modifications.");
-        return;
-      }
-    } else {
-      const reponse = await fetch("contacts.php", {
-        method: "POST",
-        headers: {"Content-Type": "application/json"},
-        body: JSON.stringify(donnees)
-      });
-      const {json: data, texte} = await lireReponse(reponse);
-      if(!reponse.ok || !data || data.error || !data.id){
-        console.error("Erreur POST contacts.php :", reponse.status, data ? data.error : texte);
-        afficherToast("Erreur : impossible de créer ce contact.");
-        return;
-      }
-      idContact = data.id;
-    }
-
-    // Contact bien enregistré à ce stade. La journalisation de la réalisation
-    // (CNT_MAJ en modification, CNT_CRE en création) est traitée à part : un
-    // échec ici ne doit pas laisser croire que l'enregistrement du contact
-    // lui-même a échoué (il a réussi juste au-dessus).
-    const reponseRea = await fetch("realisations.php", {
-      method: "POST",
-      headers: {"Content-Type": "application/json"},
-      body: JSON.stringify({
-        REA_IncrContact: idContact,
-        REA_Action: enModification ? "CNT_MAJ" : "CNT_CRE",
-        REA_Comment: commentaire
-      })
-    });
-    if(!reponseRea.ok){
-      const {texte: texteRea} = await lireReponse(reponseRea);
-      console.error("Erreur POST realisations.php :", reponseRea.status, texteRea);
-      afficherToast(enModification
-        ? "Modifications enregistrées, mais l'historique n'a pas pu être journalisé."
-        : "Contact créé, mais l'historique n'a pas pu être journalisé.");
-    }
-
-    // Retour sur le panneau de visualisation du contact (25 août 2026, pour
-    // modification ET création) plutôt que fermeture/retour liste — meilleure
-    // façon de voir que l'enregistrement a bien été pris en compte. Pas de
-    // toast de succès supplémentaire (jugé inutile par Jean-Marc).
-    // Liste attendue (await, 27 août 2026 — avant seulement "tirée" en
-    // arrière-plan) avant de réafficher le détail : la barre de position et
-    // la navigation PgUp/PgDn du panneau détail doivent refléter le tri/
-    // filtre à jour de contactsAffiches, pas son état d'avant enregistrement.
-    await rendreListe();
-    await afficherDetailPourId(idContact, "vue");
-  } catch(erreur){
-    console.error("Erreur d'enregistrement :", erreur);
-    afficherToast(enModification
-      ? "Erreur : impossible d'enregistrer les modifications."
-      : "Erreur : impossible de créer ce contact.");
-  }
-}
-
-// -- Bouton "Valider la suppression de ce contact" (mode suppression) --
-// Le bouton reste désactivé tant que le commentaire est vide (voir
-// mettreAJourEtatBoutonSuppression) : ce garde-fou est un filet de sécurité
-// supplémentaire, pas la protection principale.
-async function validerSuppression(){
-  if(!contactCourant) return;
-  const commentaire = commentaireModification.value.trim();
-  if(!commentaire){
-    commentaireModification.focus();
-    return;
-  }
-  const idContact = contactCourant.CNT_Incr;
-
-  try {
-    const reponse = await fetch("contacts.php?id=" + encodeURIComponent(idContact), {method: "DELETE"});
-    const {json: data, texte} = await lireReponse(reponse);
-    if(!reponse.ok || (data && data.error)){
-      console.error("Erreur DELETE contacts.php :", reponse.status, data ? data.error : texte);
-      afficherToast("Erreur : impossible de supprimer ce contact.");
-      return;
-    }
-
-    // Suppression logique effective à ce stade (CNT_Actif = 0). Journalisation
-    // de la réalisation CNT_SUP en best-effort, même principe que CNT_MAJ/CNT_CRE.
-    const reponseRea = await fetch("realisations.php", {
-      method: "POST",
-      headers: {"Content-Type": "application/json"},
-      body: JSON.stringify({
-        REA_IncrContact: idContact,
-        REA_Action: "CNT_SUP",
-        REA_Comment: commentaire
-      })
-    });
-    if(!reponseRea.ok){
-      const {texte: texteRea} = await lireReponse(reponseRea);
-      console.error("Erreur POST realisations.php :", reponseRea.status, texteRea);
-      afficherToast("Contact supprimé, mais l'historique n'a pas pu être journalisé.");
-    }
-
-    // Après suppression, retour à la liste des contacts (25 août 2026) —
-    // contrairement à la modification/création, ce contact n'existe plus à
-    // visualiser (CNT_Actif = 0, exclu de contacts.php).
-    fermerPanneauDetail();
-    rendreListe();
-  } catch(erreur){
-    console.error("Erreur de suppression :", erreur);
-    afficherToast("Erreur : impossible de supprimer ce contact.");
-  }
-}
-
-// -- Menu contextuel du panneau détail (mode visualisation uniquement) --
-const menuDetailContextuel = document.getElementById("menu-detail-contextuel");
-
-panneauDetail.addEventListener("contextmenu", (e)=>{
-  if(!panneauDetail.classList.contains("mode-vue")) return; // pas de menu en édition/suppression
-  e.preventDefault();
-  e.stopPropagation();
-  menuDetailContextuel.style.left = e.pageX + "px";
-  menuDetailContextuel.style.top = e.pageY + "px";
-  menuDetailContextuel.style.display = "block";
-  mettreAJourEtatNavigationContextuelle();
-});
-function fermerMenuDetailContextuel(){
-  menuDetailContextuel.style.display = "none";
-}
-document.addEventListener("click", fermerMenuDetailContextuel);
-
-document.getElementById("menu-detail-modifier").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  fermerMenuDetailContextuel();
-  basculerModeDetail("edition");
-});
-document.getElementById("menu-detail-supprimer").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  fermerMenuDetailContextuel();
-  basculerModeDetail("suppression");
-});
-document.getElementById("menu-detail-mail").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  fermerMenuDetailContextuel();
-  afficherToast("Envoi de mail : fonctionnalité à venir.");
-});
-document.getElementById("menu-detail-appeler").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  fermerMenuDetailContextuel();
-  afficherToast("Appel : fonctionnalité à venir.");
-});
-document.getElementById("menu-detail-precedent").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  fermerMenuDetailContextuel();
-  naviguerContactPrecedent();
-});
-document.getElementById("menu-detail-suivant").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  fermerMenuDetailContextuel();
-  naviguerContactSuivant();
-});
-document.getElementById("menu-detail-retour").addEventListener("click", (e)=>{
-  e.stopPropagation();
-  fermerMenuDetailContextuel();
-  fermerPanneauDetail();
-});
-
-// ---- Avatar utilisateur : purement indicatif, aucune interaction ----
-
-// ---- Initialisation ----
-chargerPreferences();
-rendreListe();
-</script>
-</body>
-</html>
