@lystech/sections 0.5.0 → 0.5.1

package/dist/editeur/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const CSS = "\n:host {\n  all: initial;\n  --fond: #16181d;\n  --fond-clair: #21242b;\n  --bord: #333844;\n  --texte: #f2f3f5;\n  --texte-doux: #a3a9b6;\n  --accent: #3ba58d;\n  --accent-sombre: #2d8570;\n  --danger: #d9776a;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--texte);\n}\n\n* { box-sizing: border-box; }\n\n/* LE CALQUE LAISSE PASSER LES CLICS. Un conteneur fixe en plein \u00E9cran qui\n   intercepte tout rendrait le site inutilisable derri\u00E8re lui : on ne pourrait\n   plus naviguer, ni m\u00EAme faire d\u00E9filer correctement. Seuls ses ENFANTS\n   reprennent les clics. */\n.calque {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2147483000;\n}\n.calque > * { pointer-events: auto; }\n\n/* ---------------------------------------------------------- CADRES ------ */\n\n.cadre {\n  position: fixed;\n  border: 2px dashed rgba(59, 165, 141, 0.55);\n  border-radius: 6px;\n  pointer-events: none;\n  transition: border-color 120ms ease;\n}\n.cadre--actif { border-color: var(--accent); border-style: solid; }\n\n.pastille {\n  position: fixed;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--accent);\n  color: #06120e;\n  font-size: 12px;\n  font-weight: 650;\n  letter-spacing: 0.01em;\n  cursor: pointer;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);\n}\n.pastille:hover { background: #45bda2; }\n.pastille:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n/* ------------------------------------------------------------ BARRE ----- */\n\n.barre {\n  position: fixed;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 9px 14px;\n  border: 1px solid var(--bord);\n  border-radius: 999px;\n  background: var(--fond);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);\n  max-width: calc(100vw - 24px);\n}\n.barre__point {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--accent);\n  flex: none;\n}\n.barre__texte { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.barre__texte b { font-weight: 650; }\n.barre__compte { color: var(--texte-doux); font-size: 12px; white-space: nowrap; }\n\n/* ----------------------------------------------------------- PANNEAU ---- */\n\n.panneau {\n  position: fixed;\n  top: 0; right: 0; bottom: 0;\n  width: min(420px, 100vw);\n  display: flex;\n  flex-direction: column;\n  background: var(--fond);\n  border-left: 1px solid var(--bord);\n  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);\n}\n@media (max-width: 520px) {\n  .panneau { top: auto; height: 78vh; border-left: 0; border-top: 1px solid var(--bord); }\n}\n\n.panneau__tete {\n  display: flex; align-items: flex-start; gap: 10px;\n  padding: 16px 16px 12px;\n  border-bottom: 1px solid var(--bord);\n}\n.panneau__titre { font-size: 15px; font-weight: 650; margin: 0; }\n.panneau__sous { margin: 3px 0 0; font-size: 12px; color: var(--texte-doux); }\n.panneau__corps { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }\n.panneau__pied {\n  display: flex; gap: 8px; align-items: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--bord);\n  background: var(--fond-clair);\n}\n.panneau__pied .espace { flex: 1; }\n\n/* --------------------------------------------------- CONNEXION ---------- */\n\n/* Le voile PREND les clics, lui : une boite de dialogue qui demande un mot de\n   passe ne doit pas laisser cliquer la page derriere elle. C'est l'exception\n   a la regle du calque, et elle est volontaire. */\n.voile {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  background: rgba(8, 10, 14, 0.62);\n  backdrop-filter: blur(2px);\n}\n\n.fenetre {\n  position: relative;\n  width: min(408px, 100%);\n  max-height: 92vh;\n  overflow-y: auto;\n  padding: 30px 28px 20px;\n  border: 1px solid var(--bord);\n  border-radius: 18px;\n  /* Une lueur d'accent dans le coin superieur : de la presence, sans le\n     degrade violet-bleu qu'on voit sur une page d'accueil sur deux. */\n  background:\n    radial-gradient(120% 90% at 50% -20%, rgba(59, 165, 141, 0.16), transparent 62%),\n    var(--fond);\n  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);\n  text-align: center;\n}\n\n.fenetre__fermer {\n  position: absolute; top: 12px; right: 12px;\n  width: 30px; height: 30px;\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 0; border-radius: 8px;\n  background: transparent; color: var(--texte-doux);\n  font: inherit; font-size: 14px; cursor: pointer;\n}\n.fenetre__fermer:hover { background: var(--fond-clair); color: var(--texte); }\n\n/* ------------------------------------------------------------ MARQUE ---- */\n\n.marque {\n  display: inline-flex; align-items: center; gap: 8px;\n  margin-bottom: 18px;\n}\n.marque img { width: 22px; height: 22px; display: block; }\n.marque__mot {\n  font-size: 12px; font-weight: 600;\n  letter-spacing: 0.18em; text-transform: uppercase;\n  color: #6fd3bd;\n}\n\n.fenetre__titre {\n  margin: 0 0 6px;\n  font-size: 20px; font-weight: 640; letter-spacing: -0.01em;\n  color: var(--texte);\n}\n.fenetre__sous {\n  margin: 0 auto 22px;\n  max-width: 30ch;\n  font-size: 13px; line-height: 1.5; color: var(--texte-doux);\n}\n.fenetre__corps { text-align: left; }\n\n/* ------------------------------------------------------ FOURNISSEURS ---- */\n\n.fournisseurs { display: flex; flex-direction: column; gap: 10px; }\n\n.fournisseur {\n  display: flex; align-items: center; justify-content: center; gap: 10px;\n  width: 100%; padding: 12px 16px;\n  border: 1px solid transparent; border-radius: 10px;\n  font: inherit; font-size: 14px; font-weight: 600;\n  cursor: pointer;\n  transition: transform 90ms ease, filter 90ms ease;\n}\n.fournisseur:hover { filter: brightness(1.06); }\n.fournisseur:active { transform: translateY(1px); }\n.fournisseur:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }\n.fournisseur[disabled] { opacity: 0.55; cursor: default; transform: none; filter: none; }\n.fournisseur .logo { width: 18px; height: 18px; flex: none; display: block; }\n\n/* LES COULEURS DE CHAQUE MARQUE, telles qu'elles les publient. Un bouton\n   Google repeint aux couleurs du site devient moins reconnaissable \u2014 et un\n   bouton de connexion qu'on ne reconnait pas est un bouton sur lequel on\n   hesite a cliquer. */\n.fournisseur--google { background: #fff; color: #1f1f1f; border-color: #dadce0; }\n.fournisseur--facebook { background: #1877f2; color: #fff; }\n\n.bouton--large { width: 100%; padding: 12px 16px; font-size: 14px; }\n\n@media (prefers-reduced-motion: reduce) {\n  .fournisseur { transition: none; }\n}\n\n/* ------------------------------------------------------------ CHAMPS ---- */\n\n.champ { margin-bottom: 16px; }\n.champ__etiquette {\n  display: block; margin-bottom: 5px;\n  font-size: 12px; font-weight: 600; color: var(--texte);\n}\n.champ__aide { margin: 4px 0 0; font-size: 11.5px; color: var(--texte-doux); }\n.champ__langue {\n  display: inline-block; margin: 0 0 4px;\n  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--texte-doux);\n}\n\n/* TOUS les types de champs, pas seulement ceux auxquels on pensait. Un\n   type oublie \u2014 \u00AB password \u00BB, \u00AB email \u00BB \u2014 retombe sur le style brut du\n   navigateur : une ligne blanche au milieu d'un panneau sombre. */\ninput[type=\"text\"], input[type=\"url\"], input[type=\"number\"], input[type=\"date\"],\ninput[type=\"password\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"search\"],\nselect, textarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--bord);\n  border-radius: 6px;\n  background: var(--fond-clair);\n  color: var(--texte);\n  font: inherit;\n  font-size: 13px;\n}\ntextarea { min-height: 92px; resize: vertical; line-height: 1.5; }\ninput:focus, select:focus, textarea:focus {\n  outline: none; border-color: var(--accent);\n  box-shadow: 0 0 0 3px rgba(59, 165, 141, 0.18);\n}\n\n.bascule { display: flex; align-items: center; gap: 8px; }\n.bascule input { width: 16px; height: 16px; accent-color: var(--accent); }\n\n.vignette {\n  margin-top: 8px; max-height: 110px; border-radius: 6px;\n  border: 1px solid var(--bord); display: block;\n}\n\n/* --------------------------------------------------------- LISTES ------- */\n\n.liste__item {\n  border: 1px solid var(--bord); border-radius: 8px;\n  padding: 12px; margin-bottom: 10px; background: var(--fond-clair);\n}\n.liste__tete {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.liste__rang { font-size: 11px; font-weight: 700; color: var(--texte-doux); }\n\n/* --------------------------------------------------------- BOUTONS ------ */\n\n.bouton {\n  display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n  padding: 8px 14px; border-radius: 7px; border: 1px solid transparent;\n  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;\n  background: var(--fond-clair); color: var(--texte); border-color: var(--bord);\n}\n.bouton:hover { background: #2a2e37; }\n.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.bouton--principal { background: var(--accent); border-color: var(--accent); color: #06120e; }\n.bouton--principal:hover { background: #45bda2; }\n.bouton--discret { background: transparent; border-color: transparent; color: var(--texte-doux); }\n.bouton--discret:hover { background: var(--fond-clair); color: var(--texte); }\n.bouton[disabled] { opacity: 0.5; cursor: default; }\n.bouton--icone { padding: 6px 9px; }\n\n.message {\n  margin: 0 0 12px; padding: 9px 11px; border-radius: 7px;\n  font-size: 12.5px; border: 1px solid;\n}\n.message--erreur { background: rgba(217, 119, 106, 0.12); border-color: rgba(217, 119, 106, 0.4); color: #f0b3a9; }\n.message--ok { background: rgba(59, 165, 141, 0.12); border-color: rgba(59, 165, 141, 0.4); color: #8fd9c6; }\n.message--info { background: var(--fond-clair); border-color: var(--bord); color: var(--texte-doux); }\n\n@media (prefers-reduced-motion: reduce) {\n  * { transition: none !important; animation: none !important; }\n}\n";
+export declare const CSS = "\n:host {\n  all: initial;\n  --fond: #16181d;\n  --fond-clair: #21242b;\n  --bord: #333844;\n  --texte: #f2f3f5;\n  --texte-doux: #a3a9b6;\n  --accent: #3ba58d;\n  --accent-sombre: #2d8570;\n  --danger: #d9776a;\n  font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto,\n    \"Helvetica Neue\", Arial, sans-serif;\n  font-size: 14px;\n  line-height: 1.45;\n  color: var(--texte);\n}\n\n* { box-sizing: border-box; }\n\n/* LE CALQUE LAISSE PASSER LES CLICS. Un conteneur fixe en plein \u00E9cran qui\n   intercepte tout rendrait le site inutilisable derri\u00E8re lui : on ne pourrait\n   plus naviguer, ni m\u00EAme faire d\u00E9filer correctement. Seuls ses ENFANTS\n   reprennent les clics. */\n.calque {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2147483000;\n}\n.calque > * { pointer-events: auto; }\n\n/* ---------------------------------------------------------- CADRES ------ */\n\n.cadre {\n  position: fixed;\n  border: 2px dashed rgba(59, 165, 141, 0.55);\n  border-radius: 6px;\n  pointer-events: none;\n  transition: border-color 120ms ease;\n}\n.cadre--actif { border-color: var(--accent); border-style: solid; }\n\n.pastille {\n  position: fixed;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 0;\n  border-radius: 999px;\n  background: var(--accent);\n  color: #06120e;\n  font-size: 12px;\n  font-weight: 650;\n  letter-spacing: 0.01em;\n  cursor: pointer;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);\n}\n.pastille:hover { background: #45bda2; }\n.pastille:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n/* ------------------------------------------------------------ BARRE ----- */\n\n.barre {\n  position: fixed;\n  left: 50%;\n  bottom: 18px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 9px 14px;\n  border: 1px solid var(--bord);\n  border-radius: 999px;\n  background: var(--fond);\n  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);\n  max-width: calc(100vw - 24px);\n}\n.barre__point {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--accent);\n  flex: none;\n}\n.barre__texte { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.barre__texte b { font-weight: 650; }\n.barre__compte { color: var(--texte-doux); font-size: 12px; white-space: nowrap; }\n\n/* ----------------------------------------------------------- PANNEAU ---- */\n\n.panneau {\n  position: fixed;\n  top: 0; right: 0; bottom: 0;\n  width: min(420px, 100vw);\n  display: flex;\n  flex-direction: column;\n  background: var(--fond);\n  border-left: 1px solid var(--bord);\n  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);\n}\n@media (max-width: 520px) {\n  .panneau { top: auto; height: 78vh; border-left: 0; border-top: 1px solid var(--bord); }\n}\n\n.panneau__tete {\n  display: flex; align-items: flex-start; gap: 10px;\n  padding: 16px 16px 12px;\n  border-bottom: 1px solid var(--bord);\n}\n.panneau__titre { font-size: 15px; font-weight: 650; margin: 0; }\n.panneau__sous { margin: 3px 0 0; font-size: 12px; color: var(--texte-doux); }\n.panneau__corps { flex: 1; overflow-y: auto; padding: 14px 16px 18px; }\n.panneau__pied {\n  display: flex; gap: 8px; align-items: center;\n  padding: 12px 16px;\n  border-top: 1px solid var(--bord);\n  background: var(--fond-clair);\n}\n.panneau__pied .espace { flex: 1; }\n\n/* --------------------------------------------------- CONNEXION ---------- */\n\n/* LA CONNEXION EST CLAIRE, AUX COULEURS DE LYSTECH. L'\u00E9diteur reste un outil\n   sombre qui s'efface derri\u00E8re le travail ; la connexion, elle, est l'instant\n   o\u00F9 quelqu'un d\u00E9cide de faire confiance. Il doit y reconna\u00EEtre Lystech \u2014 la\n   fleur, son p\u00E9trole et son turquoise, sur du blanc \u2014 et non une bo\u00EEte noire\n   pos\u00E9e sur son site.\n\n   Le th\u00E8me se red\u00E9finit ICI, sur le voile : les boutons, messages et champs\n   partag\u00E9s avec l'\u00E9diteur suivent ces variables sans une r\u00E8gle de plus, et\n   l'\u00E9diteur garde les siennes. Clair quel que soit le th\u00E8me du syst\u00E8me :\n   c'est un choix de marque. */\n.voile {\n  --fond: #ffffff;\n  --fond-clair: #f4f7f8;\n  --bord: #dfe6e9;\n  --texte: #0b1f26;\n  --texte-doux: #52666f;\n  --petrole: #084050;\n  --petrole-survol: #0b5468;\n  --turquoise: #10b8b0;\n  --focus: #0c8f89;\n\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  /* Le voile PREND les clics, lui : une bo\u00EEte de dialogue qui demande une\n     identit\u00E9 ne doit pas laisser cliquer la page derri\u00E8re elle. C'est\n     l'exception \u00E0 la r\u00E8gle du calque, et elle est volontaire. Teint\u00E9 p\u00E9trole\n     plut\u00F4t que noir : on assombrit le site sans l'\u00E9teindre. */\n  background: rgba(8, 44, 56, 0.34);\n  backdrop-filter: blur(4px) saturate(115%);\n  color: var(--texte);\n}\n\n.fenetre {\n  position: relative;\n  width: min(400px, 100%);\n  max-height: 92vh;\n  overflow-y: auto;\n  padding: 34px 30px 26px;\n  border: 1px solid rgba(8, 64, 80, 0.10);\n  border-radius: 20px;\n  /* La lueur turquoise de la fleur, \u00E0 peine, en haut de la carte. */\n  background:\n    radial-gradient(90% 60% at 50% -12%, rgba(16, 184, 176, 0.13), transparent 70%),\n    var(--fond);\n  box-shadow:\n    0 1px 2px rgba(8, 64, 80, 0.06),\n    0 28px 64px -18px rgba(8, 44, 56, 0.45);\n  text-align: center;\n}\n\n.fenetre__fermer {\n  position: absolute; top: 14px; right: 14px;\n  width: 32px; height: 32px;\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 0; border-radius: 9px;\n  background: transparent; color: var(--texte-doux);\n  font: inherit; font-size: 14px; cursor: pointer;\n}\n.fenetre__fermer:hover { background: var(--fond-clair); color: var(--texte); }\n.fenetre__fermer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }\n\n/* ------------------------------------------------------------ MARQUE ---- */\n\n.marque {\n  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;\n  margin-bottom: 18px;\n}\n.marque img {\n  width: 44px; height: 44px; display: block;\n  filter: drop-shadow(0 6px 14px rgba(16, 184, 176, 0.28));\n}\n.marque__mot {\n  font-size: 11.5px; font-weight: 700;\n  letter-spacing: 0.24em; text-transform: uppercase;\n  color: var(--petrole);\n}\n\n.fenetre__titre {\n  margin: 0 0 8px;\n  font-size: 21px; font-weight: 700; letter-spacing: -0.015em;\n  color: var(--texte);\n  text-wrap: balance;\n}\n.fenetre__sous {\n  margin: 0 auto 24px;\n  max-width: 36ch;\n  font-size: 13.5px; line-height: 1.55; color: var(--texte-doux);\n  text-wrap: balance;\n}\n.fenetre__corps { text-align: left; }\n\n/* ------------------------------------------------------ FOURNISSEURS ---- */\n\n.fournisseurs { display: flex; flex-direction: column; gap: 10px; }\n\n.fournisseur {\n  display: flex; align-items: center; justify-content: center; gap: 10px;\n  width: 100%; min-height: 46px; padding: 12px 16px;\n  border: 1px solid transparent; border-radius: 12px;\n  font: inherit; font-size: 14px; font-weight: 600;\n  cursor: pointer;\n  transition: transform 90ms ease, background-color 120ms ease, box-shadow 120ms ease;\n}\n.fournisseur:active { transform: translateY(1px); }\n.fournisseur:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }\n.fournisseur[disabled] { opacity: 0.55; cursor: default; transform: none; }\n.fournisseur .logo { width: 18px; height: 18px; flex: none; display: block; }\n\n/* LES COULEURS DE CHAQUE MARQUE, telles qu'elles les publient. Un bouton\n   Google repeint aux couleurs du site devient moins reconnaissable \u2014 et un\n   bouton de connexion qu'on ne reconna\u00EEt pas est un bouton sur lequel on\n   h\u00E9site \u00E0 cliquer. */\n.fournisseur--google {\n  background: #fff; color: #1f1f1f; border-color: #dadce0;\n  box-shadow: 0 1px 2px rgba(8, 64, 80, 0.06);\n}\n.fournisseur--google:hover:not([disabled]) { background: #f6f9fa; border-color: #c9d3d8; }\n.fournisseur--facebook { background: #1877f2; color: #fff; }\n.fournisseur--facebook:hover:not([disabled]) { background: #166fe5; }\n\n.bouton--large { width: 100%; padding: 12px 16px; font-size: 14px; }\n\n/* Les boutons et messages PARTAG\u00C9S avec l'\u00E9diteur, en version claire. */\n.voile .bouton {\n  min-height: 44px; border-radius: 12px;\n  background: #fff; color: var(--texte); border-color: #cfd9dd;\n}\n.voile .bouton:hover { background: var(--fond-clair); }\n.voile .bouton:focus-visible { outline-color: var(--focus); }\n.voile .bouton--principal { background: var(--petrole); border-color: var(--petrole); color: #fff; }\n.voile .bouton--principal:hover { background: var(--petrole-survol); }\n\n.voile .message { font-size: 13px; line-height: 1.5; border-radius: 10px; }\n.voile .message--erreur { background: #fdf0ee; border-color: #f4c7bf; color: #a3321f; }\n.voile .message--ok { background: #e8f7f5; border-color: #a9e2dc; color: #0a5c57; }\n.voile .message--info { background: var(--fond-clair); border-color: var(--bord); color: #3a5159; }\n\n@media (prefers-reduced-motion: reduce) {\n  .fournisseur { transition: none; }\n}\n\n/* ------------------------------------------------------------ CHAMPS ---- */\n\n.champ { margin-bottom: 16px; }\n.champ__etiquette {\n  display: block; margin-bottom: 5px;\n  font-size: 12px; font-weight: 600; color: var(--texte);\n}\n.champ__aide { margin: 4px 0 0; font-size: 11.5px; color: var(--texte-doux); }\n.champ__langue {\n  display: inline-block; margin: 0 0 4px;\n  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;\n  text-transform: uppercase; color: var(--texte-doux);\n}\n\n/* TOUS les types de champs, pas seulement ceux auxquels on pensait. Un\n   type oublie \u2014 \u00AB password \u00BB, \u00AB email \u00BB \u2014 retombe sur le style brut du\n   navigateur : une ligne blanche au milieu d'un panneau sombre. */\ninput[type=\"text\"], input[type=\"url\"], input[type=\"number\"], input[type=\"date\"],\ninput[type=\"password\"], input[type=\"email\"], input[type=\"tel\"], input[type=\"search\"],\nselect, textarea {\n  width: 100%;\n  padding: 8px 10px;\n  border: 1px solid var(--bord);\n  border-radius: 6px;\n  background: var(--fond-clair);\n  color: var(--texte);\n  font: inherit;\n  font-size: 13px;\n}\ntextarea { min-height: 92px; resize: vertical; line-height: 1.5; }\ninput:focus, select:focus, textarea:focus {\n  outline: none; border-color: var(--accent);\n  box-shadow: 0 0 0 3px rgba(59, 165, 141, 0.18);\n}\n\n.bascule { display: flex; align-items: center; gap: 8px; }\n.bascule input { width: 16px; height: 16px; accent-color: var(--accent); }\n\n.vignette {\n  margin-top: 8px; max-height: 110px; border-radius: 6px;\n  border: 1px solid var(--bord); display: block;\n}\n\n/* --------------------------------------------------------- LISTES ------- */\n\n.liste__item {\n  border: 1px solid var(--bord); border-radius: 8px;\n  padding: 12px; margin-bottom: 10px; background: var(--fond-clair);\n}\n.liste__tete {\n  display: flex; align-items: center; justify-content: space-between;\n  margin-bottom: 8px;\n}\n.liste__rang { font-size: 11px; font-weight: 700; color: var(--texte-doux); }\n\n/* --------------------------------------------------------- BOUTONS ------ */\n\n.bouton {\n  display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n  padding: 8px 14px; border-radius: 7px; border: 1px solid transparent;\n  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;\n  background: var(--fond-clair); color: var(--texte); border-color: var(--bord);\n}\n.bouton:hover { background: #2a2e37; }\n.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\n.bouton--principal { background: var(--accent); border-color: var(--accent); color: #06120e; }\n.bouton--principal:hover { background: #45bda2; }\n.bouton--discret { background: transparent; border-color: transparent; color: var(--texte-doux); }\n.bouton--discret:hover { background: var(--fond-clair); color: var(--texte); }\n.bouton[disabled] { opacity: 0.5; cursor: default; }\n.bouton--icone { padding: 6px 9px; }\n\n.message {\n  margin: 0 0 12px; padding: 9px 11px; border-radius: 7px;\n  font-size: 12.5px; border: 1px solid;\n}\n.message--erreur { background: rgba(217, 119, 106, 0.12); border-color: rgba(217, 119, 106, 0.4); color: #f0b3a9; }\n.message--ok { background: rgba(59, 165, 141, 0.12); border-color: rgba(59, 165, 141, 0.4); color: #8fd9c6; }\n.message--info { background: var(--fond-clair); border-color: var(--bord); color: var(--texte-doux); }\n\n@media (prefers-reduced-motion: reduce) {\n  * { transition: none !important; animation: none !important; }\n}\n";
 export declare const CSS_EN_PLACE = "\n/* --------------------------------------------------------- CHOIX -------- */\n\n/* Quand un meme texte vient de plusieurs cles, on demande laquelle plutot que\n   de deviner \u2014 et de modifier la mauvaise sans que personne le voie. */\n.choix {\n  position: fixed;\n  width: 260px;\n  padding: 12px;\n  border: 1px solid var(--bord);\n  border-radius: 10px;\n  background: var(--fond);\n  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);\n}\n.choix__titre { margin: 0 0 2px; font-size: 12.5px; font-weight: 650; }\n.choix__aide { margin: 0 0 10px; font-size: 11.5px; color: var(--texte-doux); }\n.choix__option {\n  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;\n  width: 100%; margin-bottom: 6px; padding: 7px 9px;\n  border: 1px solid var(--bord); border-radius: 7px;\n  background: var(--fond-clair); color: var(--texte);\n  font: inherit; text-align: left; cursor: pointer;\n}\n.choix__option:hover { background: #2a2e37; border-color: var(--accent); }\n.choix__chemin { font-size: 12px; font-weight: 600; }\n.choix__ns { font-size: 10.5px; color: var(--texte-doux); }\n\n/* ------------------------------------------------------- RANGEES -------- */\n\n.rangee {\n  display: flex; align-items: center; justify-content: space-between; gap: 10px;\n  width: 100%; margin-bottom: 6px; padding: 10px 12px;\n  border: 1px solid var(--bord); border-radius: 8px;\n  background: var(--fond-clair); color: var(--texte);\n  font: inherit; text-align: left; cursor: pointer;\n}\n.rangee:hover { background: #2a2e37; border-color: var(--accent); }\n.rangee__nom { font-size: 13px; font-weight: 600; }\n.rangee__info { font-size: 11.5px; color: var(--texte-doux); white-space: nowrap; }\n\n/* ------------------------------------------------------ FLOTTANT -------- */\n\n/* Un message au-dessus de la barre, pour confirmer sans ouvrir de panneau. */\n.flottant {\n  position: fixed;\n  left: 50%; bottom: 76px;\n  transform: translateX(-50%);\n  max-width: min(460px, calc(100vw - 24px));\n}\n.flottant .message { margin: 0; box-shadow: 0 8px 26px rgba(0,0,0,.4); }\n";
 export declare const CSS_MODE = "\n/* ON NE DOIT JAMAIS SE DEMANDER SI ON EST EN MODE EDITION. Une barre en bas\n   se confond avec un bandeau de temoins ; un lisere qui borde tout l'ecran,\n   present sur chaque page, ne se confond avec rien. Il ne prend aucun clic. */\n.cadre-global {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  border: 2px solid var(--accent);\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);\n  opacity: 0.85;\n}\n\n/* EN MODE CIRCULER, le cadre change d'allure. On est toujours connecte \u2014 le\n   dire reste necessaire \u2014 mais les clics rendent la main aux liens, et rien\n   ne serait plus desagreable que de croire qu'on edite alors qu'on navigue,\n   ou l'inverse. Trait interrompu et plus efface : present, mais en retrait. */\n.cadre-global--circuler {\n  border-style: dashed;\n  border-color: var(--texte-doux);\n  opacity: 0.5;\n}\n\n/* La sortie est rouge au survol seulement : visible quand on la cherche,\n   discrete le reste du temps \u2014 c'est le geste qu'on fait une fois. */\n.bouton--sortie { color: var(--texte-doux); background: transparent; border-color: transparent; }\n.bouton--sortie:hover { background: rgba(217, 119, 106, 0.16); color: var(--danger); }\n";

package/dist/editeur.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as m, Fragment as ae } from "react/jsx-runtime";
 import { createRoot as se } from "react-dom/client";
 import { C as ge, s as ie } from "./morceaux/constantes-BPZxUYge.js";
-import { useState as M, useRef as j, useEffect as W, useCallback as X, useMemo as ne } from "react";
+import { useState as P, useRef as Y, useEffect as W, useCallback as X, useMemo as ne } from "react";
 function xe({
   jeton: o,
   site: t,
@@ -79,7 +79,7 @@ function Ce({
   surJeton: r,
   surFermer: d
 }) {
-  const [s, l] = M({ nom: "repos" }), g = (v) => {
+  const [s, l] = P({ nom: "repos" }), g = (v) => {
     switch (v) {
       case "auth/popup-blocked":
         return "Votre navigateur a bloqué la fenêtre de connexion. Autorisez les fenêtres pour ce site, puis réessayez.";
@@ -152,8 +152,8 @@ function Ce({
       const [{ initializeApp: A, getApps: T }, y] = await Promise.all([
         import("./morceaux/index.esm-B4AB50RA.js"),
         import("./morceaux/index.esm-B4hL1FOE.js")
-      ]), V = T().find((S) => S.name === "lystech-edition") ?? A(ve, "lystech-edition"), U = v === "google" ? new y.GoogleAuthProvider() : new y.FacebookAuthProvider(), P = await (await y.signInWithPopup(y.getAuth(V), U)).user.getIdToken();
-      await n(P);
+      ]), j = T().find((S) => S.name === "lystech-edition") ?? A(ve, "lystech-edition"), U = v === "google" ? new y.GoogleAuthProvider() : new y.FacebookAuthProvider(), O = await (await y.signInWithPopup(y.getAuth(j), U)).user.getIdToken();
+      await n(O);
     } catch (A) {
       l({ nom: "erreur", texte: g(String(A?.code ?? "")) });
     }
@@ -465,13 +465,13 @@ function ze({
   modifiable: a,
   surModification: r
 }) {
-  const d = j(/* @__PURE__ */ new Map()), s = j(null), [l, g] = M(null), n = j(o);
+  const d = Y(/* @__PURE__ */ new Map()), s = Y(null), [l, g] = P(null), n = Y(o);
   n.current = o;
-  const u = j(r);
+  const u = Y(r);
   u.current = r;
-  const x = j(a);
+  const x = Y(a);
   x.current = a;
-  const v = j(null);
+  const v = Y(null);
   return W(() => {
     if (!t) return;
     const A = () => {
@@ -487,18 +487,18 @@ function ze({
       s.current || (clearTimeout(T), T = setTimeout(A, 250));
     });
     y.observe(document.body, { childList: !0, subtree: !0 });
-    const V = "outline:2px dashed rgba(59,165,141,.85);outline-offset:3px;border-radius:3px;cursor:text;", U = (p) => {
+    const j = "outline:2px dashed rgba(59,165,141,.85);outline-offset:3px;border-radius:3px;cursor:text;", U = (p) => {
       const i = p.target;
       !(i instanceof HTMLElement) || s.current || d.current.has(i) && (i.dataset.lysStyleAvant || (i.dataset.lysStyleAvant = i.getAttribute("style") ?? ""), i.setAttribute(
         "style",
-        (i.dataset.lysStyleAvant ?? "") + V
+        (i.dataset.lysStyleAvant ?? "") + j
       ));
     }, I = (p) => {
       const i = p.target;
       if (!(i instanceof HTMLElement) || s.current?.el === i || i.dataset.lysStyleAvant === void 0) return;
       const h = i.dataset.lysStyleAvant;
       delete i.dataset.lysStyleAvant, h ? i.setAttribute("style", h) : i.removeAttribute("style");
-    }, P = (p, i) => {
+    }, O = (p, i) => {
       const h = p.getAttribute("style") ?? "";
       s.current = {
         el: p,
@@ -510,21 +510,21 @@ function ze({
         "style",
         (p.dataset.lysStyleAvant ?? "") + "outline:2px solid #3ba58d;outline-offset:3px;border-radius:3px;"
       ), p.focus();
-      const Q = window.getSelection(), q = document.createRange();
-      q.selectNodeContents(p), Q?.removeAllRanges(), Q?.addRange(q);
+      const B = window.getSelection(), Q = document.createRange();
+      Q.selectNodeContents(p), B?.removeAllRanges(), B?.addRange(Q);
     }, S = async (p) => {
       const i = s.current;
       if (!i) return;
       s.current = null;
       const h = (i.el.textContent ?? "").trim();
       i.el.removeAttribute("contenteditable");
-      const Q = i.el.dataset.lysStyleAvant;
-      if (delete i.el.dataset.lysStyleAvant, Q ? i.el.setAttribute("style", Q) : i.el.removeAttribute("style"), p || h === i.avant) {
+      const B = i.el.dataset.lysStyleAvant;
+      if (delete i.el.dataset.lysStyleAvant, B ? i.el.setAttribute("style", B) : i.el.removeAttribute("style"), p || h === i.avant) {
         p && (i.el.textContent = i.avant);
         return;
       }
-      const q = n.current.langueCourante();
-      n.current.poser(q, i.ns, i.chemin, h), await u.current(i.ns, i.chemin, q, h);
+      const Q = n.current.langueCourante();
+      n.current.poser(Q, i.ns, i.chemin, h), await u.current(i.ns, i.chemin, Q, h);
     }, D = (p) => {
       const i = p.target;
       if (!(i instanceof HTMLElement)) return;
@@ -535,7 +535,7 @@ function ze({
       const h = d.current.get(i);
       if (h) {
         if (p.preventDefault(), p.stopPropagation(), h.candidats.length === 1) {
-          P(i, h.candidats[0]);
+          O(i, h.candidats[0]);
           return;
         }
         g({
@@ -545,21 +545,21 @@ function ze({
           y: p.clientY
         });
       }
-    }, L = (p) => {
+    }, M = (p) => {
       s.current && (p.key === "Escape" ? (p.preventDefault(), S(!0)) : p.key === "Enter" && !p.shiftKey && (p.preventDefault(), S(!1)));
     }, _ = () => {
       s.current && S(!1);
     };
     document.addEventListener("mouseover", U, !0), document.addEventListener("mouseout", I, !0), document.addEventListener("click", D, !0);
-    const Z = (p) => {
+    const G = (p) => {
       if (!s.current) return;
       const i = p.inputType;
       (i === "insertParagraph" || i === "insertLineBreak") && (p.preventDefault(), S(!1));
     };
-    return document.addEventListener("beforeinput", Z, !0), document.addEventListener("keydown", L, !0), document.addEventListener("focusout", _, !0), window.__lysChoisir = (p, i) => {
-      g(null), P(i, p);
+    return document.addEventListener("beforeinput", G, !0), document.addEventListener("keydown", M, !0), document.addEventListener("focusout", _, !0), window.__lysChoisir = (p, i) => {
+      g(null), O(i, p);
     }, () => {
-      v.current = null, clearTimeout(T), y.disconnect(), document.removeEventListener("mouseover", U, !0), document.removeEventListener("mouseout", I, !0), document.removeEventListener("click", D, !0), document.removeEventListener("beforeinput", Z, !0), document.removeEventListener("keydown", L, !0), document.removeEventListener("focusout", _, !0), s.current && S(!0), delete window.__lysChoisir;
+      v.current = null, clearTimeout(T), y.disconnect(), document.removeEventListener("mouseover", U, !0), document.removeEventListener("mouseout", I, !0), document.removeEventListener("click", D, !0), document.removeEventListener("beforeinput", G, !0), document.removeEventListener("keydown", M, !0), document.removeEventListener("focusout", _, !0), s.current && S(!0), delete window.__lysChoisir;
     };
   }, [t]), W(() => {
     s.current || v.current?.();
@@ -600,25 +600,25 @@ function ze({
     }
   ) : null;
 }
-const H = /^i18n:([^:]+):(.*)$/, ee = "commun", te = "lystech-edit-mode";
+const Z = /^i18n:([^:]+):(.*)$/, ee = "commun", te = "lystech-edit-mode";
 function re(o, t) {
   return JSON.stringify(o ?? {}) === JSON.stringify(t ?? {});
 }
 function Te({ api: o, pont: t }) {
-  const [a, r] = M([]), [d, s] = M([]), [l, g] = M(t.page), [n, u] = M(null), [x, v] = M({}), [A, T] = M(!1), [y, V] = M(() => {
+  const [a, r] = P([]), [d, s] = P([]), [l, g] = P(t.page), [n, u] = P(null), [x, v] = P({}), [A, T] = P(!1), [y, j] = P(() => {
     try {
       return window.localStorage.getItem(te) === "circuler" ? "circuler" : "modifier";
     } catch {
       return "modifier";
     }
-  }), U = () => V((c) => {
+  }), U = () => j((c) => {
     const f = c === "modifier" ? "circuler" : "modifier";
     try {
       window.localStorage.setItem(te, f);
     } catch {
     }
     return f;
-  }), [I, P] = M(!1), [S, D] = M(
+  }), [I, O] = P(!1), [S, D] = P(
     null
   );
   W(() => (t.surChangementDePage = (c) => {
@@ -626,7 +626,7 @@ function Te({ api: o, pont: t }) {
   }, () => {
     t.surChangementDePage = void 0;
   }), [t]);
-  const L = X(async () => {
+  const M = X(async () => {
     try {
       const [c, f] = await Promise.all([
         o.pourPage(l),
@@ -643,23 +643,23 @@ function Te({ api: o, pont: t }) {
   W(() => {
     o.schemas().then(r).catch(() => r([]));
   }, [o]), W(() => {
-    L();
-  }, [L]);
+    M();
+  }, [M]);
   const _ = X(
     (c, f) => {
       let b = null, k = -1;
       for (const C of a) {
-        const N = H.exec(C.blockType);
+        const N = Z.exec(C.blockType);
         if (!N || N[1] !== c) continue;
         const w = N[2];
         (w === "" || f === w || f.startsWith(w + ".")) && w.length > k && (b = C, k = w.length);
       }
       if (!b) return null;
-      const E = H.exec(b.blockType)?.[2] ?? "", O = E ? f.slice(E.length + 1) : f;
-      return { bloc: b, champ: O };
+      const E = Z.exec(b.blockType)?.[2] ?? "", L = E ? f.slice(E.length + 1) : f;
+      return { bloc: b, champ: L };
     },
     [a]
-  ), Z = X(
+  ), G = X(
     (c, f) => _(c, f) !== null,
     [_]
   ), p = X(
@@ -674,7 +674,7 @@ function Te({ api: o, pont: t }) {
   ), h = ne(
     () => d.filter((c) => c.draft && !re(c.draft, c.data)),
     [d]
-  ), Q = X(
+  ), B = X(
     async (c, f, b, k) => {
       const E = _(c, f);
       if (!E) {
@@ -684,20 +684,20 @@ function Te({ api: o, pont: t }) {
         });
         return;
       }
-      const O = d.find((z) => z.blockType === E.bloc.blockType), C = O?.draft ?? O?.data ?? {}, N = C[E.champ], w = E.bloc.fields.find((z) => z.key === E.champ), B = (
+      const L = d.find((z) => z.blockType === E.bloc.blockType), C = L?.draft ?? L?.data ?? {}, N = C[E.champ], w = E.bloc.fields.find((z) => z.key === E.champ), q = (
         /* `!declare.localized` et non `=== false` : un champ non traduit
            OMET la cle plutot que de la mettre a faux. Tester l'egalite
            stricte ne se declenchait donc jamais. */
         w && !w.localized ? k : N && typeof N == "object" && !Array.isArray(N) ? { ...N, [b]: k } : { [b]: k }
-      ), G = { ...C, [E.champ]: B };
+      ), H = { ...C, [E.champ]: q };
       try {
-        if (O?.UID)
-          await o.enregistrerBrouillon(O.UID, G);
+        if (L?.UID)
+          await o.enregistrerBrouillon(L.UID, H);
         else {
           const z = E.bloc.pages?.[0] ?? l;
-          await o.creer(z, E.bloc.blockType, G);
+          await o.creer(z, E.bloc.blockType, H);
         }
-        await L(), D(null);
+        await M(), D(null);
       } catch {
         D({
           ton: "erreur",
@@ -705,14 +705,14 @@ function Te({ api: o, pont: t }) {
         });
       }
     },
-    [o, _, l, L, d]
-  ), q = async () => {
+    [o, _, l, M, d]
+  ), Q = async () => {
     if (!h.length) return;
-    P(!0), D(null);
+    O(!0), D(null);
     const c = h.length;
     try {
       for (const f of h) await o.publier(f.UID);
-      await L();
+      await M();
       for (const f of h) t.poserApercu(f.blockType, null);
       t.recharger(), D({
         ton: "ok",
@@ -724,14 +724,14 @@ function Te({ api: o, pont: t }) {
         texte: "La publication a échoué. Rien n'a été mis en ligne."
       });
     } finally {
-      P(!1);
+      O(!1);
     }
   }, de = async () => {
-    P(!0);
+    O(!0);
     try {
       const c = h.map((b) => b.blockType);
       for (const b of h) await o.annuler(b.UID);
-      const f = await L();
+      const f = await M();
       for (const b of c) t.poserApercu(b, null);
       if (t.sourceTexte) {
         const { appliquerAuxTextes: b } = await import("./morceaux/sourceTexte-BMPMpNg9.js");
@@ -745,42 +745,42 @@ function Te({ api: o, pont: t }) {
         texte: "Modifications abandonnées. On est revenu à ce qui est en ligne."
       });
     } finally {
-      P(!1);
+      O(!1);
     }
   }, pe = (c) => {
-    const f = d.find((C) => C.blockType === c), b = f?.draft ?? f?.data ?? {}, k = p(c), E = H.exec(c), O = {};
+    const f = d.find((C) => C.blockType === c), b = f?.draft ?? f?.data ?? {}, k = p(c), E = Z.exec(c), L = {};
     if (!E) {
       const C = t.replis?.[c];
-      C && typeof C == "object" && !Array.isArray(C) && Object.assign(O, C);
+      C && typeof C == "object" && !Array.isArray(C) && Object.assign(L, C);
     }
     if (E && k && t.sourceTexte) {
-      const C = E[1], N = E[2], w = t.sourceTexte.langues(), B = {};
+      const C = E[1], N = E[2], w = t.sourceTexte.langues(), q = {};
       for (const z of w)
-        B[z] = t.sourceTexte.dictionnaire(z)[C] ?? {};
-      const G = t.sourceTexte.langueCourante();
+        q[z] = t.sourceTexte.dictionnaire(z)[C] ?? {};
+      const H = t.sourceTexte.langueCourante();
       for (const z of k.fields) {
         const K = N ? N + "." + z.key : z.key;
         if (!z.localized) {
-          const Y = B[G]?.[K] ?? w.map((R) => B[R]?.[K]).find((R) => typeof R == "string");
-          typeof Y == "string" && (O[z.key] = Y);
+          const V = q[H]?.[K] ?? w.map((F) => q[F]?.[K]).find((F) => typeof F == "string");
+          typeof V == "string" && (L[z.key] = V);
           continue;
         }
         const $ = {};
-        for (const Y of w) {
-          const R = B[Y]?.[K];
-          typeof R == "string" && ($[Y] = R);
+        for (const V of w) {
+          const F = q[V]?.[K];
+          typeof F == "string" && ($[V] = F);
         }
-        Object.keys($).length && (O[z.key] = $);
+        Object.keys($).length && (L[z.key] = $);
       }
     }
     for (const [C, N] of Object.entries(b)) {
-      const w = O[C], B = N && typeof N == "object" && !Array.isArray(N) && w && typeof w == "object" && !Array.isArray(w);
-      O[C] = B ? { ...w, ...N } : N;
+      const w = L[C], q = N && typeof N == "object" && !Array.isArray(N) && w && typeof w == "object" && !Array.isArray(w);
+      L[C] = q ? { ...w, ...N } : N;
     }
-    v(O), u(c), T(!1), D(null);
+    v(L), u(c), T(!1), D(null);
   }, fe = (c, f) => v((b) => ({ ...b, [c]: f })), me = async () => {
     if (n) {
-      P(!0);
+      O(!0);
       try {
         const c = d.find((b) => b.blockType === n);
         if (c?.UID) await o.enregistrerBrouillon(c.UID, x);
@@ -788,7 +788,7 @@ function Te({ api: o, pont: t }) {
           const b = p(n)?.pages?.[0] ?? l;
           await o.creer(b, n, x);
         }
-        const f = await L();
+        const f = await M();
         if (t.sourceTexte) {
           const { appliquerAuxTextes: b } = await import("./morceaux/sourceTexte-BMPMpNg9.js");
           b(
@@ -796,14 +796,14 @@ function Te({ api: o, pont: t }) {
             t.sourceTexte
           );
         }
-        H.test(n) || t.poserApercu(n, x), D({
+        Z.test(n) || t.poserApercu(n, x), D({
           ton: "ok",
           texte: "Enregistré. Rien n'a encore changé pour vos visiteurs."
         });
       } catch {
         D({ ton: "erreur", texte: "L'enregistrement a échoué." });
       } finally {
-        P(!1);
+        O(!1);
       }
     }
   }, be = () => {
@@ -812,7 +812,7 @@ function Te({ api: o, pont: t }) {
     } catch {
     }
     ie();
-  }, F = n ? p(n) : void 0, J = !n && !A;
+  }, R = n ? p(n) : void 0, J = !n && !A;
   return /* @__PURE__ */ m("div", { className: "calque", children: [
     /* @__PURE__ */ e(
       "div",
@@ -826,8 +826,8 @@ function Te({ api: o, pont: t }) {
       {
         source: t.sourceTexte,
         actif: J && !I && y === "modifier",
-        modifiable: Z,
-        surModification: Q
+        modifiable: G,
+        surModification: B
       }
     ),
     J && /* @__PURE__ */ m("div", { className: "barre", children: [
@@ -850,7 +850,7 @@ function Te({ api: o, pont: t }) {
           {
             type: "button",
             className: "bouton bouton--principal",
-            onClick: q,
+            onClick: Q,
             disabled: I,
             children: "Publier"
           }
@@ -927,17 +927,17 @@ function Te({ api: o, pont: t }) {
         })
       ] })
     ] }),
-    n && F && /* @__PURE__ */ m(
+    n && R && /* @__PURE__ */ m(
       "div",
       {
         className: "panneau",
         role: "dialog",
-        "aria-label": "Modifier " + F.label,
+        "aria-label": "Modifier " + R.label,
         children: [
           /* @__PURE__ */ m("div", { className: "panneau__tete", children: [
             /* @__PURE__ */ m("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ e("h2", { className: "panneau__titre", children: F.label }),
-              F.description && /* @__PURE__ */ e("p", { className: "panneau__sous", children: F.description })
+              /* @__PURE__ */ e("h2", { className: "panneau__titre", children: R.label }),
+              R.description && /* @__PURE__ */ e("p", { className: "panneau__sous", children: R.description })
             ] }),
             /* @__PURE__ */ e(
               "button",
@@ -952,7 +952,7 @@ function Te({ api: o, pont: t }) {
           ] }),
           /* @__PURE__ */ m("div", { className: "panneau__corps", children: [
             S && /* @__PURE__ */ e("p", { className: "message message--" + S.ton, children: S.texte }),
-            F.fields.map((c) => /* @__PURE__ */ e(
+            R.fields.map((c) => /* @__PURE__ */ e(
               ce,
               {
                 champ: c,
@@ -991,7 +991,7 @@ function Te({ api: o, pont: t }) {
     )
   ] });
 }
-const Oe = `
+const Le = `
 :host {
   all: initial;
   --fond: #16181d;
@@ -1113,69 +1113,98 @@ const Oe = `
 
 /* --------------------------------------------------- CONNEXION ---------- */
 
-/* Le voile PREND les clics, lui : une boite de dialogue qui demande un mot de
-   passe ne doit pas laisser cliquer la page derriere elle. C'est l'exception
-   a la regle du calque, et elle est volontaire. */
+/* LA CONNEXION EST CLAIRE, AUX COULEURS DE LYSTECH. L'éditeur reste un outil
+   sombre qui s'efface derrière le travail ; la connexion, elle, est l'instant
+   où quelqu'un décide de faire confiance. Il doit y reconnaître Lystech — la
+   fleur, son pétrole et son turquoise, sur du blanc — et non une boîte noire
+   posée sur son site.
+
+   Le thème se redéfinit ICI, sur le voile : les boutons, messages et champs
+   partagés avec l'éditeur suivent ces variables sans une règle de plus, et
+   l'éditeur garde les siennes. Clair quel que soit le thème du système :
+   c'est un choix de marque. */
 .voile {
+  --fond: #ffffff;
+  --fond-clair: #f4f7f8;
+  --bord: #dfe6e9;
+  --texte: #0b1f26;
+  --texte-doux: #52666f;
+  --petrole: #084050;
+  --petrole-survol: #0b5468;
+  --turquoise: #10b8b0;
+  --focus: #0c8f89;
+
   position: fixed;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
-  background: rgba(8, 10, 14, 0.62);
-  backdrop-filter: blur(2px);
+  /* Le voile PREND les clics, lui : une boîte de dialogue qui demande une
+     identité ne doit pas laisser cliquer la page derrière elle. C'est
+     l'exception à la règle du calque, et elle est volontaire. Teinté pétrole
+     plutôt que noir : on assombrit le site sans l'éteindre. */
+  background: rgba(8, 44, 56, 0.34);
+  backdrop-filter: blur(4px) saturate(115%);
+  color: var(--texte);
 }
 
 .fenetre {
   position: relative;
-  width: min(408px, 100%);
+  width: min(400px, 100%);
   max-height: 92vh;
   overflow-y: auto;
-  padding: 30px 28px 20px;
-  border: 1px solid var(--bord);
-  border-radius: 18px;
-  /* Une lueur d'accent dans le coin superieur : de la presence, sans le
-     degrade violet-bleu qu'on voit sur une page d'accueil sur deux. */
+  padding: 34px 30px 26px;
+  border: 1px solid rgba(8, 64, 80, 0.10);
+  border-radius: 20px;
+  /* La lueur turquoise de la fleur, à peine, en haut de la carte. */
   background:
-    radial-gradient(120% 90% at 50% -20%, rgba(59, 165, 141, 0.16), transparent 62%),
+    radial-gradient(90% 60% at 50% -12%, rgba(16, 184, 176, 0.13), transparent 70%),
     var(--fond);
-  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
+  box-shadow:
+    0 1px 2px rgba(8, 64, 80, 0.06),
+    0 28px 64px -18px rgba(8, 44, 56, 0.45);
   text-align: center;
 }
 
 .fenetre__fermer {
-  position: absolute; top: 12px; right: 12px;
-  width: 30px; height: 30px;
+  position: absolute; top: 14px; right: 14px;
+  width: 32px; height: 32px;
   display: inline-flex; align-items: center; justify-content: center;
-  border: 0; border-radius: 8px;
+  border: 0; border-radius: 9px;
   background: transparent; color: var(--texte-doux);
   font: inherit; font-size: 14px; cursor: pointer;
 }
 .fenetre__fermer:hover { background: var(--fond-clair); color: var(--texte); }
+.fenetre__fermer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
 
 /* ------------------------------------------------------------ MARQUE ---- */
 
 .marque {
-  display: inline-flex; align-items: center; gap: 8px;
+  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
   margin-bottom: 18px;
 }
-.marque img { width: 22px; height: 22px; display: block; }
+.marque img {
+  width: 44px; height: 44px; display: block;
+  filter: drop-shadow(0 6px 14px rgba(16, 184, 176, 0.28));
+}
 .marque__mot {
-  font-size: 12px; font-weight: 600;
-  letter-spacing: 0.18em; text-transform: uppercase;
-  color: #6fd3bd;
+  font-size: 11.5px; font-weight: 700;
+  letter-spacing: 0.24em; text-transform: uppercase;
+  color: var(--petrole);
 }
 
 .fenetre__titre {
-  margin: 0 0 6px;
-  font-size: 20px; font-weight: 640; letter-spacing: -0.01em;
+  margin: 0 0 8px;
+  font-size: 21px; font-weight: 700; letter-spacing: -0.015em;
   color: var(--texte);
+  text-wrap: balance;
 }
 .fenetre__sous {
-  margin: 0 auto 22px;
-  max-width: 30ch;
-  font-size: 13px; line-height: 1.5; color: var(--texte-doux);
+  margin: 0 auto 24px;
+  max-width: 36ch;
+  font-size: 13.5px; line-height: 1.55; color: var(--texte-doux);
+  text-wrap: balance;
 }
 .fenetre__corps { text-align: left; }
 
@@ -1185,27 +1214,46 @@ const Oe = `
 
 .fournisseur {
   display: flex; align-items: center; justify-content: center; gap: 10px;
-  width: 100%; padding: 12px 16px;
-  border: 1px solid transparent; border-radius: 10px;
+  width: 100%; min-height: 46px; padding: 12px 16px;
+  border: 1px solid transparent; border-radius: 12px;
   font: inherit; font-size: 14px; font-weight: 600;
   cursor: pointer;
-  transition: transform 90ms ease, filter 90ms ease;
+  transition: transform 90ms ease, background-color 120ms ease, box-shadow 120ms ease;
 }
-.fournisseur:hover { filter: brightness(1.06); }
 .fournisseur:active { transform: translateY(1px); }
-.fournisseur:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
-.fournisseur[disabled] { opacity: 0.55; cursor: default; transform: none; filter: none; }
+.fournisseur:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
+.fournisseur[disabled] { opacity: 0.55; cursor: default; transform: none; }
 .fournisseur .logo { width: 18px; height: 18px; flex: none; display: block; }
 
 /* LES COULEURS DE CHAQUE MARQUE, telles qu'elles les publient. Un bouton
    Google repeint aux couleurs du site devient moins reconnaissable — et un
-   bouton de connexion qu'on ne reconnait pas est un bouton sur lequel on
-   hesite a cliquer. */
-.fournisseur--google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
+   bouton de connexion qu'on ne reconnaît pas est un bouton sur lequel on
+   hésite à cliquer. */
+.fournisseur--google {
+  background: #fff; color: #1f1f1f; border-color: #dadce0;
+  box-shadow: 0 1px 2px rgba(8, 64, 80, 0.06);
+}
+.fournisseur--google:hover:not([disabled]) { background: #f6f9fa; border-color: #c9d3d8; }
 .fournisseur--facebook { background: #1877f2; color: #fff; }
+.fournisseur--facebook:hover:not([disabled]) { background: #166fe5; }
 
 .bouton--large { width: 100%; padding: 12px 16px; font-size: 14px; }
 
+/* Les boutons et messages PARTAGÉS avec l'éditeur, en version claire. */
+.voile .bouton {
+  min-height: 44px; border-radius: 12px;
+  background: #fff; color: var(--texte); border-color: #cfd9dd;
+}
+.voile .bouton:hover { background: var(--fond-clair); }
+.voile .bouton:focus-visible { outline-color: var(--focus); }
+.voile .bouton--principal { background: var(--petrole); border-color: var(--petrole); color: #fff; }
+.voile .bouton--principal:hover { background: var(--petrole-survol); }
+
+.voile .message { font-size: 13px; line-height: 1.5; border-radius: 10px; }
+.voile .message--erreur { background: #fdf0ee; border-color: #f4c7bf; color: #a3321f; }
+.voile .message--ok { background: #e8f7f5; border-color: #a9e2dc; color: #0a5c57; }
+.voile .message--info { background: var(--fond-clair); border-color: var(--bord); color: #3a5159; }
+
 @media (prefers-reduced-motion: reduce) {
   .fournisseur { transition: none; }
 }
@@ -1293,7 +1341,7 @@ input:focus, select:focus, textarea:focus {
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
 }
-`, Pe = `
+`, Oe = `
 /* --------------------------------------------------------- CHOIX -------- */
 
 /* Quand un meme texte vient de plusieurs cles, on demande laquelle plutot que
@@ -1343,7 +1391,7 @@ input:focus, select:focus, textarea:focus {
   max-width: min(460px, calc(100vw - 24px));
 }
 .flottant .message { margin: 0; box-shadow: 0 8px 26px rgba(0,0,0,.4); }
-`, Me = `
+`, Pe = `
 /* ON NE DOIT JAMAIS SE DEMANDER SI ON EST EN MODE EDITION. Une barre en bas
    se confond avec un bandeau de temoins ; un lisere qui borde tout l'ecran,
    present sur chaque page, ne se confond avec rien. Il ne prend aucun clic. */
@@ -1371,13 +1419,13 @@ input:focus, select:focus, textarea:focus {
    discrete le reste du temps — c'est le geste qu'on fait une fois. */
 .bouton--sortie { color: var(--texte-doux); background: transparent; border-color: transparent; }
 .bouton--sortie:hover { background: rgba(217, 119, 106, 0.16); color: var(--danger); }
-`, Le = "lystech-editeur-hote", Ie = "lystech-connexion-hote";
+`, Me = "lystech-editeur-hote", Ie = "lystech-connexion-hote";
 function le(o) {
   document.getElementById(o)?.remove();
   const t = document.createElement("div");
-  t.id = o, document.body.appendChild(t);
+  t.id = o, t.style.position = "relative", t.style.zIndex = "2147483000", document.body.appendChild(t);
   const a = t.attachShadow({ mode: "open" }), r = document.createElement("style");
-  r.textContent = Oe + Pe + Me, a.appendChild(r);
+  r.textContent = Le + Oe + Pe, a.appendChild(r);
   const d = document.createElement("div");
   return a.appendChild(d), { hote: t, point: d };
 }
@@ -1414,13 +1462,13 @@ function Ue({
   const n = ue(l, d);
   return n;
 }
-function Fe({
+function Re({
   jeton: o,
   site: t,
   apiBaseUrl: a,
   pont: r
 }) {
-  const { hote: d, point: s } = le(Le), l = se(s);
+  const { hote: d, point: s } = le(Me), l = se(s);
   return l.render(
     /* @__PURE__ */ e(
       Te,
@@ -1438,5 +1486,5 @@ function Fe({
 }
 export {
   Ue as monterConnexion,
-  Fe as monterEditeur
+  Re as monterEditeur
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lystech/sections",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Contenu de site editable par le client — lecture legere, edition chargee a la demande.",
   "type": "module",
   "main": "./dist/index.js",