/* ═══════════════════════════════════════════════════════════════════════
   Éditeur de boutique v2 — feuille de style (namespace wb-). Porte 1b, 2026-10-07.
   EN SERVICE depuis la bascule du 2026-10-08 (porte 1b-7) : chargée par index.html à la place de css/webshop-builder.css (v1).
   Section 1 (ci-dessous) : kit d'interface du cœur (js/webshop-builder-core.js — boîtes, toasts, bandeaux,
   menus, fenêtres). Section 2 (porte 1b-4, auteur de l'éditeur) : barre, onglets, inspecteur, canevas,
   + classes du panneau Magasins (.wb-store*, .wb-store__dti*) reprises À L'IDENTIQUE de la v1.
   Règles DTIOverlay (js/modal-utils.js) : SEULE la boîte modale porte « -overlay » dans sa classe
   (.wb-dlg-overlay, enfant direct de body, z-index 10700 > overlay de l'éditeur 10600) ; toasts, bandeaux,
   menus et fenêtres n'en portent jamais (ils ne deviennent pas « premier plan »).
   Revue r1 (2026-10-07) : anneaux de focus visibles (« Tout publier », toasts), barre étroite par paliers et barre du tiroir
   sur deux rangées FIXES, bandeaux / toasts décalés quand le tiroir est ouvert, actions de la Structure sans survol,
   bandeau d'appareil collant, « Panneau » enfoncé / repère.
   Revue r2 (2026-10-07) : colonnes de liens du pied de page dans l'inspecteur, action des bandeaux après son « — », paliers
   d'ajustement de la barre (wb-fit-*), aperçu décalé à droite du tiroir ouvert, libellés « Enregistrer » / « Voir » gardés
   dans le tiroir dès 900 px, barre du téléphone sur 2 rangées avec un nom long, pastille compacte (symbole + texte masqué).
   Revue r4 (2026-10-08) : pastille de la barre longue / courte selon le palier wb-fit-pill, palier 9 du téléphone (« ⏳ »),
   gabarit de mesure de la barre (.wb-measure), chiffres de l'état à chasse fixe, éditeur figé visible (curseur d'attente,
   corps estompé), boutons d'action des toasts et bandeaux en semi-gras, anneau de focus des menus non rogné.
   Revue r5 (2026-10-08) : boutons de boîte inactifs dessinés comme tels, palier 7 à largeur d'état fixe (--wb-res7-w), palier 8 du
   téléphone sans tremblement (place de l'état gardée, symbole en boîte fixe), anneau de focus de « Choisir une page » non rogné.
   Revue r7 (2026-10-08) : téléphone — bandeaux visibles AU-DESSUS d'une feuille ouverte (la feuille commence sous eux,
   --wb-banners-h) ; aperçu grisé pendant « Rechargement… » (data-reloading) ; « + Nouvelle page » juste sous la recherche.
   Revue r8 (2026-10-08) : « + Nouvelle page » AU-DESSUS de la recherche (filet entre la recherche et la liste) ; nom et adresse
   de « Nouvelle page » figés (lecture seule) pendant la création.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Kit d'interface du cœur ───────────────────────────────────────── */

/* Boîte de dialogue modale (wbDialog) */
.wb-dlg-overlay {
    position: fixed; inset: 0; z-index: 10700; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(15, 23, 42, .45);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px;
}
.wb-dlg {
    width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
    background: #fff; color: #1d2430; border-radius: 10px; box-shadow: 0 18px 50px rgba(15, 23, 42, .32); padding: 20px 22px 16px;
}
.wb-dlg--wide { max-width: 680px; }
.wb-dlg:focus { outline: none; }
.wb-dlg__title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #1d2430; }
.wb-dlg__body { font-size: 14px; line-height: 1.5; color: #33404f; }
.wb-dlg__p { margin: 0 0 10px; overflow-wrap: anywhere; }
.wb-dlg__list { margin: 0 0 10px; padding-left: 20px; }
.wb-dlg__list li { margin: 2px 0; overflow-wrap: anywhere; }
.wb-dlg__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.wb-dlg__btn {
    min-height: 36px; padding: 7px 14px; border-radius: 7px; border: 1px solid #cbd5e1; background: #fff; color: #1d2430;
    font: inherit; font-weight: 600; cursor: pointer;
}
.wb-dlg__btn:hover { background: #f1f5f9; }
.wb-dlg__btn:focus-visible { outline: 2px solid var(--wb-accent, #14572f); outline-offset: 2px; }
.wb-dlg__btn--primary { background: var(--wb-accent, #14572f); border-color: var(--wb-accent, #14572f); color: #fff; }
.wb-dlg__btn--primary:hover { filter: brightness(1.08); background: var(--wb-accent, #14572f); }
.wb-dlg__btn--danger { background: #b42318; border-color: #b42318; color: #fff; }
.wb-dlg__btn--danger:hover { background: #912018; }
/* Bouton inactif (revue r5 : « Créer la page » inactif pendant la création était dessiné comme actif) — survol sans effet. */
.wb-dlg__btn:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.wb-dlg__btn--secondary:disabled:hover { background: #fff; }
.wb-dlg__btn--danger:disabled:hover { background: #b42318; }

/* Toasts (wbToast) : bas gauche du canevas (hôte fourni par l'éditeur), 3 au plus */
.wb-toasts { position: absolute; left: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100% - 32px)); pointer-events: none; }
.wb-toasts--fixed { position: fixed; z-index: 10650; }
.wb-toast {
    position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; pointer-events: auto;
    background: #1d2430; color: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
    padding: 9px 42px 9px 14px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; line-height: 1.4;
}
.wb-toast--success { border-left: 4px solid #3fb871; }
.wb-toast--warn { border-left: 4px solid #f0a33a; }
.wb-toast--error { border-left: 4px solid #f97066; }
.wb-toast__text { flex: 1 1 200px; overflow-wrap: anywhere; }
.wb-toast__acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.wb-toast__act {
    background: none; border: 1px solid rgba(255, 255, 255, .35); color: #fff; border-radius: 6px; padding: 3px 9px; min-height: 28px;
    font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.wb-toast__act:hover { background: rgba(255, 255, 255, .14); }
/* Fermer : toujours en haut à droite (jamais renvoyé seul sur une 2ᵉ ligne quand le texte ou les actions passent à la ligne). */
.wb-toast__close { position: absolute; top: 5px; right: 6px; background: none; border: none; color: rgba(255, 255, 255, .7); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 4px; min-width: 28px; min-height: 28px; }
.wb-toast__close:hover { color: #fff; }

/* Bandeaux persistants : haut du canevas (role="alert") */
.wb-banners { display: flex; flex-direction: column; gap: 6px; }
.wb-banners:empty { display: none; }
.wb-banners--fixed { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 10650; width: min(720px, calc(100% - 32px)); }
.wb-banner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; line-height: 1.45;
}
.wb-banner--error { background: #fef3f2; border-color: #fecdca; color: #912018; }
.wb-banner--warn { background: #fff4e5; border-color: #fcd9b6; color: #8a4b08; }
.wb-banner--info { background: #eff6ff; border-color: #c7dbfd; color: #1e429f; }
/* Le texte ne s'étire plus sur toute la largeur : l'action suit son « — » (« … en attente — [Annuler] » se lit d'une traite,
   revue r2) ; le × éventuel reste au bout. Retour à la ligne inchangé sur un canevas étroit. */
.wb-banner__text { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.wb-banner__close { margin-left: auto; }
.wb-banner__act {
    border: 1px solid currentColor; background: #fff; color: inherit; border-radius: 6px; padding: 3px 10px; min-height: 28px;
    font: inherit; font-weight: 600; cursor: pointer;
}
.wb-banner__act:hover { filter: brightness(.96); }
.wb-banner__close { background: none; border: none; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; min-width: 28px; min-height: 28px; }

/* Menus (« ⋯ », « ▾ ») et fenêtres non modales (ex. « Choisir une page ») — dans l'overlay de l'éditeur */
.wb-menu, .wb-pop {
    position: fixed; z-index: 10650; background: #fff; color: #1d2430; border: 1px solid #dfe3e8; border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .2); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px;
}
.wb-menu { min-width: 220px; max-width: min(420px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; padding: 4px 0; }
.wb-menu:focus { outline: none; }
.wb-menu__item {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%; box-sizing: border-box; min-height: 32px;
    padding: 6px 14px; border: none; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.wb-menu__item:hover, .wb-menu__item:focus { background: var(--wb-accent-050, #e8f2ec); outline: none; }
.wb-menu__item--danger { color: #b42318; }
.wb-menu__item.is-disabled { color: #9aa3af; cursor: default; }
.wb-menu__item.is-disabled:hover, .wb-menu__item.is-disabled:focus { background: #f7f9fa; }
.wb-menu__lbl { overflow-wrap: anywhere; }
.wb-menu__sub { font-size: 12px; color: #6b7280; overflow-wrap: anywhere; }
.wb-menu__sep { height: 1px; margin: 4px 0; background: #eef1f4; }
.wb-menu__head { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #6b7280; }
/* Menu « ⋯ » d'une page : sa 1re ligne NOMME la page visée (lisible, pas en petites capitales) */
.wb-menu[data-menu="page-actions"] .wb-menu__head { font-size: 13px; letter-spacing: 0; text-transform: none; color: #1d2430; overflow-wrap: anywhere; }
.wb-menu__text { padding: 4px 14px; font-size: 12px; line-height: 1.4; color: #4b5563; overflow-wrap: anywhere; }
.wb-menu__text:focus { background: var(--wb-accent-050, #e8f2ec); outline: none; }   /* ligne en lecture seule atteinte au clavier */
.wb-pop { width: min(460px, calc(100vw - 16px)); max-height: calc(100vh - 16px); display: flex; flex-direction: column; }
.wb-pop__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px 14px; border-bottom: 1px solid #eef1f4; }
.wb-pop__title { flex: 1 1 auto; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.wb-pop__close { background: none; border: none; color: #6b7280; font-size: 1.2rem; line-height: 1; cursor: pointer; min-width: 28px; min-height: 28px; }
.wb-pop__close:hover { color: #1d2430; }
.wb-pop__body { overflow-y: auto; padding: 8px 0; }

@media (prefers-reduced-motion: no-preference) {
    .wb-toast { animation: wb-toast-in .16s ease-out; }
    @keyframes wb-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ── 2. Éditeur (porte 1b-4) ─────────────────────────────────────────── */
/* Jetons (posés sur l'overlay ; --wb-accent / --wb-accent-050 recalculés par wbApplyAccent : couleur principale de la
   boutique, ASSOMBRIE au besoin pour un contraste ≥ 4,5:1 du texte blanc de la barre et du texte d'accent sur la teinte). */
.wb-overlay {
    --wb-accent: #14572f; --wb-accent-ink: #ffffff; --wb-accent-050: #e8f2ec;
    --wb-ink: #1d2430; --wb-ink-2: #33404f; --wb-muted: #5b6472; --wb-line: #dfe3e8; --wb-line-2: #eef1f4; --wb-field: #b8c1cc;
    --wb-bg: #eef1f4; --wb-surface: #ffffff; --wb-surface-2: #f7f9fa; --wb-focus: #1b4fd8;
    --wb-warn-ink: #8a4b08; --wb-danger: #b42318;
    --wb-bar-h: 52px; --wb-rail-w: 56px; --wb-side-w: 300px; --wb-insp-w: 320px;
    position: fixed; inset: 0; z-index: 10600; display: flex; flex-direction: column;   /* > #optionsOverlay (10000) */
    background: var(--wb-bg); color: var(--wb-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; line-height: 1.4;
}
.wb-overlay *, .wb-overlay *::before, .wb-overlay *::after { box-sizing: border-box; }
/* [hidden] repasse devant toute classe qui déclare display (ARCHITECTURE §7.41) */
.wb-overlay [hidden], .wb-dlg-overlay [hidden] { display: none !important; }
.wb-hidden { display: none !important; }
/* Neutralise les polices de style.css (button / input) ; :where() garde la spécificité à (0,1,0) : les classes qui
   suivent (.wb-tab, .wb-mini, .wb-pub__main…) gardent leur taille et leur graisse. */
.wb-overlay :where(button, input, select, textarea) { font: inherit; }
/* … ce « font: inherit » (plus loin que leurs règles) retirait aussi le semi-gras des actions des toasts et des bandeaux (revue r4 :
   « Annuler » en normal à côté de « Voir la boutique ↗ » en gras) — rétabli ici, après lui. */
.wb-overlay .wb-toast__act, .wb-overlay .wb-banner__act { font-weight: 600; }
.wb-overlay :focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
/* Menus : overflow-y auto rognait l'anneau à gauche et à droite (revue r4) — tracé à l'intérieur de la ligne. */
.wb-menu :focus-visible { outline-offset: -2px; }
/* « Choisir une page » (revue r5) : liste défilante — l'anneau d'une ligne au bord de la liste était rogné, tracé DANS la ligne. */
.wb-pagegroups :focus-visible { outline-offset: -2px; }
.wb-bar :focus-visible { outline-color: var(--wb-accent-ink); }
/* Toasts (fond #1d2430) : anneau blanc (≈ 15:1) — le bleu de l'éditeur n'y atteignait que 2,3:1 (revue r1) */
.wb-toast :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ── Barre du haut (§2.1) ── */
.wb-bar {
    flex: 0 0 auto; min-height: var(--wb-bar-h); display: flex; align-items: center; gap: 8px; padding: 6px 12px;
    background: var(--wb-accent); color: var(--wb-accent-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); position: relative; z-index: 5;
}
.wb-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
.wb-spacer { flex: 1 1 auto; min-width: 4px; }
/* Le sélecteur de page est ce qui rétrécit EN PREMIER quand la barre est pleine (flex-shrink 3 ; nom abrégé, complet en
   info-bulle) — jusqu'à 110 px, jamais la pastille (flex: none). min-width: 0 : un nom long ne fixe plus la largeur minimale
   de la barre (revue r1 : à 1100 px, « × Fermer » sortait de l'écran) ; l'état de l'enregistrement garde sa place (heure lisible). */
.wb-pagepick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 0 3 auto; }
.wb-pagepick > .wb-pill, .wb-pagepick > .wb-pill-ex { flex: 0 0 auto; }
.wb-pagesel {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 110px; max-width: 300px; min-height: 36px; padding: 4px 10px;
    border-radius: 8px; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .12); color: var(--wb-accent-ink); cursor: pointer;
}
.wb-pagesel:hover { background: rgba(0, 0, 0, .22); }
.wb-pagesel__pre { white-space: nowrap; flex: 0 0 auto; }   /* « Page : » jamais coupé sur deux lignes (barre étroite + texte d'état) */
.wb-pagesel__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wb-pagesel__caret { font-size: 11px; flex: 0 0 auto; }
.wb-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent;
    font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.wb-pill--live { color: #1e7a44; background: #e8f5ee; border-color: #bfe3cd; }
.wb-pill--pending { color: #9c5207; background: #fff4e5; border-color: #f6d3a5; }   /* #9c5207 : 5,3:1 sur #fff4e5 (#b25e09 du plan = 4,49:1) */
.wb-pill--never, .wb-pill--never-empty, .wb-pill--none { color: #5b6472; background: #f1f3f5; border-color: #d5dae0; }
.wb-pill--hidden { color: #454f5c; background: #ffffff; border: 1px dashed #7b8592; }
.wb-pill-ex {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 18px;
    color: #5b2a86; background: #f4ecfb; border: 1px solid #dcc7ef; white-space: nowrap;
}
.wb-pillw { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Pastille de la barre : forme longue tant qu'elle tient, forme courte au palier wb-fit-pill (revue r4 — plus de forme courte
   imposée hors disposition large : « ● Modifications non publiées » restait « ● Modifiée » à 1440 px avec 270 px libres). */
.wb-pill__short { display: none; }
.wb-overlay.wb-fit-pill .wb-pagepick .wb-pill__long { display: none; }
.wb-overlay.wb-fit-pill .wb-pagepick .wb-pill__short { display: inline; }
.wb-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 7px; border: 1px solid transparent;
    font-weight: 600; cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.wb-btn--secondary { background: rgba(0, 0, 0, .12); border-color: rgba(255, 255, 255, .6); color: var(--wb-accent-ink); }
.wb-btn--secondary:hover { background: rgba(0, 0, 0, .24); }
.wb-btn.is-disabled { opacity: .6; cursor: not-allowed; }
.wb-btn.is-disabled:hover { background: rgba(0, 0, 0, .12); }
.wb-tbtn, .wb-dev, .wb-hist {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 8px;
    border: none; border-radius: 7px; background: rgba(0, 0, 0, .14); color: var(--wb-accent-ink); cursor: pointer; flex: 0 0 auto;
}
.wb-tbtn:hover, .wb-dev:hover, .wb-hist:hover:not(:disabled) { background: rgba(0, 0, 0, .26); }
.wb-devices, .wb-history { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.wb-dev[aria-pressed="true"] { background: #ffffff; color: var(--wb-accent); }
.wb-hist:disabled { opacity: .45; cursor: default; }
.wb-help__q { font-weight: 700; font-size: 15px; }
.wb-panelbtn { display: none; }
.wb-panelbtn[aria-expanded="true"] { background: #ffffff; color: var(--wb-accent); }   /* tiroir ouvert : bouton enfoncé (revue r1) */
/* Sélection faite dans l'aperçu, tiroir fermé : repère sur « Panneau » (le tiroir ne s'ouvre plus par-dessus le bloc cliqué) */
.wb-panelbtn[data-hint="1"] { position: relative; }
.wb-panelbtn[data-hint="1"]::after {
    content: ''; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%;
    background: #ffd166; box-shadow: 0 0 0 2px var(--wb-accent);
}
/* État de l'enregistrement : cède moins vite que le nom de la page (l'heure reste lisible ; texte complet en info-bulle et
   annoncé par aria-live ; texte court « Enregistré à … » hors disposition large). */
.wb-status {
    font-size: 13px; min-width: 0; max-width: 240px; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-variant-numeric: tabular-nums;   /* « … à 14:32 » : même largeur quelle que soit l'heure (mesure de fitBar, revue r4) */
}
.wb-status[data-save="dirty"]::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: middle; }
/* Largeur RÉSERVÉE par fitBar (revue r4) : l'état et « Tout publier » gardent la largeur de leur texte le plus large (famille courante) —
   « Modifications en cours… » → « Enregistrement… » → « Brouillon enregistré à … » ne déplace plus rien ni ne fait aller et venir les
   libellés. Le palier 7 (plus bas, plus spécifique et placé après) lève la réserve de l'état. */
.wb-overlay .wb-status, .wb-overlay .wb-pub__main { min-width: var(--wb-res-w, 0px); }
.wb-status[data-save="error"], .wb-status[data-save="conflict"] { font-weight: 700; }
/* Pas d'overflow: hidden (il coupait l'anneau de focus de « Tout publier » et de « ▾ » — revue r1) : l'arrondi est porté par
   les boutons, l'anneau est tracé DANS le bouton blanc, à la couleur d'accent (contraste ≥ 4,5:1 par construction). */
.wb-pub { display: inline-flex; border-radius: 8px; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wb-pub__main, .wb-pub__more { border: none; background: #ffffff; color: var(--wb-accent); font-weight: 700; cursor: pointer; min-height: 36px; }
.wb-pub__main { padding: 6px 14px; white-space: nowrap; border-radius: 8px 0 0 8px; }
.wb-pub__more { width: 34px; border-left: 1px solid var(--wb-line); border-radius: 0 8px 8px 0; }
.wb-pub :focus-visible { outline: 2px solid var(--wb-accent); outline-offset: -4px; }
.wb-pub__main:hover:not(.is-disabled), .wb-pub__more:hover { background: var(--wb-accent-050); }
.wb-pub__main.is-disabled { color: #4b5563; background: #eef1f4; cursor: default; }
.wb-pub__main[data-state="waiting"], .wb-pub__main[data-state="publishing"] { color: var(--wb-accent); background: #ffffff; cursor: progress; }
.wb-close {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 7px;
    background: none; color: var(--wb-accent-ink); font-size: 24px; line-height: 1; cursor: pointer; flex: 0 0 auto;
}
.wb-close:hover { background: rgba(0, 0, 0, .2); }
.wb-bar__break { display: none; }

/* ── Corps : barre d'icônes · panneau · canevas · inspecteur (§2.0) ── */
.wb-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }
.wb-rail {
    flex: 0 0 var(--wb-rail-w); width: var(--wb-rail-w); display: flex; flex-direction: column; gap: 2px; padding: 6px 3px;
    background: var(--wb-surface); border-right: 1px solid var(--wb-line); z-index: 3; order: 0;
}
.wb-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; padding: 8px 1px; border: none; border-radius: 8px;
    background: none; color: var(--wb-muted); cursor: pointer; font-size: 10.5px; line-height: 1.2;
}
.wb-tab i { font-size: 16px; }
.wb-tab span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.1px; }
.wb-tab:hover { background: var(--wb-surface-2); color: var(--wb-ink); }
.wb-tab[aria-selected="true"] { background: var(--wb-accent-050); color: var(--wb-accent); font-weight: 700; }
.wb-side, .wb-inspect { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--wb-surface); }
.wb-side { flex: 0 0 var(--wb-side-w); width: var(--wb-side-w); border-right: 1px solid var(--wb-line); order: 1; }
.wb-inspect { flex: 0 0 var(--wb-insp-w); width: var(--wb-insp-w); border-left: 1px solid var(--wb-line); order: 3; }
.wb-side__head, .wb-inspect__head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px 6px 14px; border-bottom: 1px solid var(--wb-line-2);
}
.wb-side__title, .wb-inspect__title {
    margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--wb-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-panel, .wb-inspector { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* « ‹ Structure » (panneau unique) et « Fermer » (tiroir / feuille) : spécificité > .wb-mini (display déclaré plus loin) */
.wb-overlay .wb-inspect__head .wb-back, .wb-overlay .wb-side__head .wb-sheet-close, .wb-overlay .wb-inspect__head .wb-sheet-close { display: none; }
.wb-canvas { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; order: 2; }
.wb-canvas__top { flex: 0 0 auto; padding: 8px 16px 0; }
.wb-canvas__top:empty, .wb-canvas__top > .wb-banners:empty { padding: 0; }
.wb-legend { flex: 0 0 auto; padding: 6px 16px 0; font-size: 12px; color: var(--wb-muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-stage { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 10px 16px 16px; }
/* overflow: clip (repli hidden) : le cadre ne peut jamais être défilé par programme sous l'aperçu mis à l'échelle */
.wb-sizer { flex: 0 0 auto; overflow: hidden; overflow: clip; background: #ffffff; border-radius: 4px; box-shadow: 0 4px 20px rgba(16, 24, 40, .14); transition: opacity .15s; }
.wb-sizer.is-stale { opacity: .5; filter: grayscale(.5); }
/* « Rechargement… » (revue r7) : l'aperçu montre encore le texte abandonné jusqu'à la réponse — estompé de même. */
.wb-overlay[data-reloading="1"] .wb-sizer { opacity: .5; filter: grayscale(.5); }
.wb-preview { display: block; border: 0; background: #ffffff; transform-origin: top left; }
/* Aperçu en cours de remplacement (srcdoc posé, nouveau document pas encore câblé — revue r3) : il ne prend aucun pointeur,
   un clic n'y suit jamais un lien ; la scène tient le focus le temps du rechargement (aucun anneau autour de l'aperçu). */
.wb-sizer.is-loading .wb-preview { pointer-events: none; }
.wb-stage:focus { outline: none; }

/* ── Disposition étroite (< 1500 px) : UN panneau latéral (onglet actif OU inspecteur, lien « ‹ Structure ») ── */
.wb-overlay[data-layout="narrow"] .wb-side { flex-basis: var(--wb-insp-w); width: var(--wb-insp-w); }
.wb-overlay[data-layout="narrow"] .wb-inspect { order: 1; border-left: none; border-right: 1px solid var(--wb-line); }
.wb-overlay[data-layout="narrow"][data-view="inspector"] .wb-side { display: none; }
.wb-overlay[data-layout="narrow"]:not([data-view="inspector"]) .wb-inspect { display: none; }
.wb-overlay:not([data-layout="wide"]) .wb-inspect__head .wb-back { display: inline-flex; }
.wb-overlay[data-layout="drawer"] .wb-side__head .wb-sheet-close, .wb-overlay[data-layout="drawer"] .wb-inspect__head .wb-sheet-close,
.wb-overlay[data-layout="phone"] .wb-side__head .wb-sheet-close, .wb-overlay[data-layout="phone"] .wb-inspect__head .wb-sheet-close { display: inline-flex; }
/* Étroit : l'état (texte court « Enregistré à … », ≤ 160 px) ne rétrécit pas, le nom de la page (plafonné à 240 px) cède
   toute la place — l'heure reste lisible même avec un nom de page long (revue r1). */
.wb-overlay[data-layout="narrow"] .wb-status { max-width: 200px; flex-shrink: 0; }
.wb-overlay[data-layout="narrow"] .wb-pagesel { max-width: 240px; }
/* Étroit (une rangée) : les libellés (titre, « Aide », « Page : », « Enregistrer », « Voir sur la boutique ») ne cèdent la
   place que s'il le faut — paliers MESURÉS de fitBar (wb-fit-1 … 5, plus bas). Revue r3 : les seuils fixes de la revue r1
   (1400 / 1300 / 1200 px) les retiraient même avec 300 px libres (à 1280 px, une disquette seule à côté d'un vide). */

/* ── Tiroir (< 1100 px) : panneau par-dessus le canevas, bouton « Panneau » ; appareils, annulation et aide en
      icônes seules, sélecteur réduit au nom de la page ── */
.wb-overlay[data-layout="drawer"] .wb-bar, .wb-overlay[data-layout="phone"] .wb-bar { flex-wrap: wrap; row-gap: 6px; }
.wb-overlay[data-layout="drawer"] .wb-panelbtn, .wb-overlay[data-layout="phone"] .wb-panelbtn { display: inline-flex; }
.wb-overlay[data-layout="drawer"] .wb-title__txt, .wb-overlay[data-layout="phone"] .wb-title__txt,
.wb-overlay[data-layout="drawer"] .wb-pagesel__pre, .wb-overlay[data-layout="phone"] .wb-pagesel__pre,
.wb-overlay[data-layout="drawer"] .wb-help .wb-tbtn__txt, .wb-overlay[data-layout="phone"] .wb-tbtn__txt,
.wb-overlay[data-layout="phone"] .wb-btn__txt { display: none; }
/* « Enregistrer » et « Voir sur la boutique » gardent leur libellé sur la 2ᵉ rangée du tiroir tant qu'il y a la place (revue
   r2 : un « ↗ » seul ne se reconnaît pas) ; sous 900 px, icônes seules — et plus tôt si la rangée déborde (fitBar). */
@media (max-width: 899px) {
    .wb-overlay[data-layout="drawer"] .wb-btn__txt { display: none; }
}
/* Barre du tiroir : DEUX rangées FIXES (revue r1 : les contrôles sautaient d'une rangée à l'autre selon le texte d'état et
   le nom de la page) — rangée 1 : titre, page (prend la place restante), « Panneau », appareils, annuler / rétablir ;
   rangée 2 : état (à gauche), « Enregistrer » et « Voir sur la boutique » en icônes, « Tout publier », aide, fermer. */
.wb-overlay[data-layout="drawer"] .wb-bar > * { order: 3; }
.wb-overlay[data-layout="drawer"] .wb-title, .wb-overlay[data-layout="drawer"] .wb-pagepick, .wb-overlay[data-layout="drawer"] .wb-panelbtn,
.wb-overlay[data-layout="drawer"] .wb-devices, .wb-overlay[data-layout="drawer"] .wb-history { order: 1; }
.wb-overlay[data-layout="drawer"] .wb-bar__break { display: block; order: 2; flex: 0 0 100%; height: 0; }
.wb-overlay[data-layout="drawer"] .wb-pagepick { flex: 1 1 0; }
.wb-overlay[data-layout="drawer"] .wb-status { flex: 1 1 0; max-width: none; }
.wb-overlay[data-layout="drawer"] .wb-spacer { display: none; }
.wb-overlay[data-layout="drawer"] .wb-side, .wb-overlay[data-layout="drawer"] .wb-inspect {
    position: absolute; top: 0; bottom: 0; left: var(--wb-rail-w); z-index: 20; width: min(340px, calc(100% - var(--wb-rail-w)));
    border: none; box-shadow: 4px 0 18px rgba(15, 23, 42, .2);
}
/* Tiroir OUVERT (340 px au-dessus du bord gauche du canevas) : bandeaux et toasts décalés à sa droite — ils restaient
   dessous, illisibles (revue r1). La légende de l'aperçu est alignée à droite. L'aperçu aussi est décalé et réajusté à
   droite du tiroir (fitPreview retranche la marge de la scène) : le bloc choisi et modifié n'est plus caché dessous
   (revue r2 — à 1024 px, la moitié d'une bannière sélectionnée l'était). Tiroir fermé : aperçu pleine largeur. */
.wb-overlay[data-layout="drawer"][data-drawer="open"] .wb-canvas__top { padding-left: calc(340px + 16px); }
/* … seulement s'il reste lisible ainsi (data-push="1", posé par fitPreview : ≥ 45 % — revue r3 ; sinon le tiroir est par-dessus,
   plan §2.0, et le bloc choisi est ramené à l'écran quand il se referme). */
.wb-overlay[data-layout="drawer"][data-drawer="open"][data-push="1"] .wb-stage { padding-left: calc(340px + 16px); }
.wb-overlay[data-layout="drawer"][data-drawer="open"] .wb-toasts { left: calc(340px + 16px); max-width: min(460px, calc(100% - 340px - 32px)); }
.wb-overlay[data-layout="drawer"][data-drawer="closed"] .wb-side, .wb-overlay[data-layout="drawer"][data-drawer="closed"] .wb-inspect,
.wb-overlay[data-layout="phone"][data-drawer="closed"] .wb-side, .wb-overlay[data-layout="phone"][data-drawer="closed"] .wb-inspect { display: none; }
.wb-overlay[data-layout="drawer"][data-view="inspector"] .wb-side, .wb-overlay[data-layout="phone"][data-view="inspector"] .wb-side { display: none; }
.wb-overlay[data-layout="drawer"]:not([data-view="inspector"]) .wb-inspect, .wb-overlay[data-layout="phone"]:not([data-view="inspector"]) .wb-inspect { display: none; }

/* ── Téléphone (< 700 px) : barre sur 2 rangées, feuilles plein écran avec « Fermer », pas de choix d'appareil ── */
.wb-overlay[data-layout="phone"] .wb-bar > * { order: 4; }
.wb-overlay[data-layout="phone"] .wb-title, .wb-overlay[data-layout="phone"] .wb-devices { display: none; }
/* Base 0 (revue r2) : avec un nom de page long, le sélecteur prenait toute la 1re rangée et « Tout publier » passait sur une
   3ᵉ rangée ; le nom s'abrège désormais (complet en info-bulle et dans le nom accessible). */
.wb-overlay[data-layout="phone"] .wb-pagepick { order: 1; flex: 1 1 0; min-width: 0; }
.wb-overlay[data-layout="phone"] .wb-pub { order: 2; }
.wb-overlay[data-layout="phone"] .wb-bar__break { display: block; order: 3; flex: 0 0 100%; height: 0; }
.wb-overlay[data-layout="phone"] .wb-spacer { display: none; }
.wb-overlay[data-layout="phone"] .wb-status { flex: 1 1 0; max-width: none; }   /* base 0 : le texte d'état s'abrège au lieu d'ajouter une 3ᵉ rangée */
.wb-overlay[data-layout="phone"] .wb-pagesel { max-width: none; flex: 1 1 0; min-width: 0; }
.wb-overlay[data-layout="phone"] .wb-side, .wb-overlay[data-layout="phone"] .wb-inspect {
    position: absolute; inset: 0; z-index: 25; width: auto; border: none; box-shadow: none;
}
.wb-overlay[data-layout="phone"] .wb-rail { flex-basis: 52px; width: 52px; }
/* Feuille ouverte (revue r7) : les bandeaux (conflit « Résoudre… », échec d'enregistrement, 401 / 403, rechargement impossible…)
   restent VISIBLES au-dessus d'elle, avec leurs actions — ils étaient cachés dessous (focus invisible, raison d'un refus de
   « Nouvelle page » renvoyant à un bandeau introuvable). Posés par-dessus la feuille, sur toute sa largeur (elle couvre toujours la
   barre d'icônes de 52 px), son contenu commence SOUS eux (--wb-banners-h, tenue à jour par l'éditeur : 0 sans bandeau) ; au-delà de 40 % de la hauteur, les
   bandeaux défilent (la feuille garde au moins 60 %). */
.wb-overlay[data-layout="phone"][data-drawer="open"] .wb-canvas__top { position: relative; z-index: 26; max-height: 40vh; overflow-y: auto; margin-left: -52px; }
.wb-overlay[data-layout="phone"][data-drawer="open"] .wb-side, .wb-overlay[data-layout="phone"][data-drawer="open"] .wb-inspect { padding-top: var(--wb-banners-h, 0px); }
/* Feuille ouverte : les toasts (bas gauche, au-dessus) n'y cachent jamais une ligne — marge du bas = hauteur de la pile
   (--wb-toasts-h, tenue à jour par l'éditeur ; revue r3). */
.wb-overlay[data-layout="phone"][data-drawer="open"] .wb-panel,
.wb-overlay[data-layout="phone"][data-drawer="open"] .wb-inspector { padding-bottom: calc(var(--wb-toasts-h, 0px) + 12px); }
/* Pastille compacte au téléphone : le SYMBOLE seul est écrit (fillPill, revue r2 — la pastille coupée à 21 px montrait un bout
   de lettre) ; texte complet masqué visuellement (lecteurs d'écran) et en info-bulle. */
.wb-overlay[data-layout="phone"] .wb-pagepick .wb-pill, .wb-overlay[data-layout="phone"] .wb-pagepick .wb-pill-ex { padding: 1px 7px; }

/* ── Ajustement de la barre (fitBar, revue r2) : paliers CUMULATIFS posés par l'éditeur quand la barre déborde, que la
      pastille sort du sélecteur de page (elle glissait sous les appareils), que l'état ou le nom de la page sont écrasés ou
      qu'une rangée de trop apparaît — états transitoires compris (« Échec de l'enregistrement » + « Enregistrement puis
      publication… »). Chaque bouton garde son icône, son info-bulle et son nom accessible. ── */
.wb-overlay.wb-fit-1 .wb-title__txt { display: none; }
.wb-overlay.wb-fit-2 .wb-help .wb-tbtn__txt { display: none; }
.wb-overlay.wb-fit-3 .wb-pagesel__pre { display: none; }
.wb-overlay.wb-fit-4 #wbSave .wb-btn__txt { display: none; }
.wb-overlay.wb-fit-5 #wbView .wb-btn__txt { display: none; }
.wb-pub__short, .wb-pub__tiny { display: none; }   /* « Publication en attente… » / « ⏳ » : formes courtes de « Enregistrement puis publication… » */
.wb-overlay.wb-fit-6 .wb-pub__long { display: none; }
.wb-overlay.wb-fit-6 .wb-pub__short { display: inline; }
/* Palier 9, téléphone seulement (revue r4) : « Tout publier » en attente réduit à « ⏳ » (texte complet : info-bulle et nom
   accessible) — à 360 px, en échec + publication en attente, le nom de la page tombait à quelques pixels. */
.wb-overlay[data-layout="phone"].wb-fit-9 .wb-pub__long, .wb-overlay[data-layout="phone"].wb-fit-9 .wb-pub__short { display: none; }
.wb-overlay[data-layout="phone"].wb-fit-9 .wb-pub__tiny { display: inline; }
/* L'état s'abrège en dernier (texte complet : info-bulle, bandeau). Une rangée (large / étroite, revue r5) : largeur FIXE
   (--wb-res7-w, posée par fitBar = texte ordinaire le plus court, « Enregistré à 00:00 », en largeur ET en minimum) au lieu de
   la largeur de son texte — sélecteur, pastilles, appareils, annulation… ne bougent plus d'un état à l'autre (35-44 px entre
   1100 et 1119 px) ; les textes plus longs s'abrègent dans la boîte, le sélecteur de page cède la place avant elle. Tiroir :
   base 0 (inchangé) et minimum de 60 px. Jamais au téléphone : l'état y a déjà une base 0, et ce minimum renvoyait « × Fermer
   l'éditeur » seul sur une 3ᵉ rangée à 360 px (revue r3). */
.wb-overlay[data-layout="wide"].wb-fit-7 .wb-status, .wb-overlay[data-layout="narrow"].wb-fit-7 .wb-status { flex: 0 0 var(--wb-res7-w, 60px); min-width: var(--wb-res7-w, 60px); }
.wb-overlay[data-layout="drawer"].wb-fit-7 .wb-status { flex-shrink: 1; min-width: 60px; }
/* Palier 8, téléphone seulement : l'état réduit à son symbole (⚠ échec / conflit / verrou — le bandeau en donne le texte,
   role="alert" —, … enregistrement, ✓ enregistré, ● modification en cours) ; texte complet gardé pour les lecteurs d'écran
   (masqué visuellement, zone aria-live) et en info-bulle. Revue r5 : l'état garde sa place de la 2ᵉ rangée (base 0, comme hors
   palier) et le symbole une boîte de largeur fixe — les boutons qui suivent ne tremblent plus d'un état à l'autre (les symboles
   n'ont pas la même largeur) ; la puce CSS de « modifié » cède la place au symbole « ● ». */
.wb-status__sym { display: none; }
.wb-overlay[data-layout="phone"].wb-fit-8 .wb-status__sym { display: inline-block; width: 1.1em; text-align: center; }
.wb-overlay[data-layout="phone"].wb-fit-8 .wb-bar .wb-status[data-save="dirty"]::before { display: none; }
.wb-overlay[data-layout="phone"].wb-fit-8 .wb-status__txt { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Texte masqué visuellement, lu par les lecteurs d'écran (pastilles compactes du téléphone) */
.wb-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* L'overlay tient le focus pendant une transition (corps inerte) : aucun anneau autour de tout l'éditeur */
.wb-overlay:focus { outline: none; }
/* Éditeur FIGÉ (fermeture, changement de page, « Tout publier et fermer » — revue r4) : il le montre — curseur d'attente
   (les parties inertes ne prennent pas le pointeur, l'overlay le reçoit) et corps estompé après 0,4 s (aucun clignotement
   sur un enregistrement rapide ; rien si l'utilisateur préfère moins d'animations). */
.wb-overlay[aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
    .wb-overlay[aria-busy="true"] .wb-body { opacity: .7; transition: opacity .2s .4s; }
}
/* Gabarit de mesure de la barre (fitBar, revue r4) : hors écran, invisible, mêmes classes que l'état et « Tout publier » —
   leur largeur naturelle sans plafond. */
.wb-measure { position: absolute; left: -10000px; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap; }
.wb-measure > * { display: inline-block; max-width: none !important; min-width: 0 !important; overflow: visible !important; }

/* ── Structure (§2.2-A) ── */
.wb-layers { padding: 4px 0 16px; }
.wb-layer {
    display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 1px 6px 1px 0; border-bottom: 1px solid var(--wb-surface-2);
    font-size: 13px; color: var(--wb-ink); touch-action: none; position: relative;
}
.wb-layer:hover { background: var(--wb-surface-2); }
.wb-layer.is-sel { background: var(--wb-accent-050); box-shadow: inset 3px 0 0 var(--wb-accent); }
.wb-layer__lbl {
    flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px; border-radius: 4px;
    cursor: grab; overflow: hidden; white-space: nowrap;
}
.wb-layer__lbl i { flex: 0 0 auto; width: 14px; text-align: center; color: var(--wb-muted); }
.wb-layer__txt { overflow: hidden; text-overflow: ellipsis; }
/* Actions (28 px) : TOUJOURS sur la ligne sélectionnée (plan §2.2-A) et sur la ligne focalisée au clavier ; masquées sinon
   (display) pour laisser toute la largeur au libellé — la hauteur de ligne (32 px) ne change pas. Plus au survol (revue r1 :
   le libellé rétrécissait sous le pointeur, un clic rapide tombait sur « Monter » au lieu de sélectionner). */
.wb-layer__act { display: none; gap: 2px; flex: 0 0 auto; }
.wb-layer.is-sel .wb-layer__act, .wb-layer:focus-within .wb-layer__act { display: inline-flex; }
.wb-layer__act button {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px;
    background: none; color: var(--wb-ink-2); font-size: 13px; line-height: 1; cursor: pointer;
}
.wb-layer__act button:hover:not(:disabled) { background: #ffffff; border-color: var(--wb-line); color: var(--wb-accent); }
.wb-layer__act button:disabled { opacity: .35; cursor: default; }
.wb-layer--shared { background: #f6f8fb; }
.wb-layer--shared .wb-layer__lbl { cursor: pointer; }
.wb-layer--shared .wb-layer__lbl i { color: #3e4c86; }
.wb-layer__tag {
    flex: 0 0 auto; margin-right: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px;
    color: #34407a; background: #e8ecfb; border: 1px solid #cfd6f5;
}
/* Glisser-déposer de l'arbre (classes v1 conservées : lues par le banc wb-dnd) */
.wb-layer.wb-drag-src { opacity: .4; pointer-events: none; }   /* sous-arbre déplacé = inerte (jamais cible du hit-test) */
.wb-layer.wb-drop-into { outline: 2px solid var(--wb-accent); outline-offset: -2px; background: var(--wb-accent-050); }
.wb-drag-ghost {
    position: fixed; top: 0; left: 0; z-index: 10700; pointer-events: none; opacity: .92; background: var(--wb-accent); color: var(--wb-accent-ink);
    font-size: 12px; padding: 4px 10px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); white-space: nowrap;
}
.wb-drop-line { position: fixed; height: 2px; background: var(--wb-accent); border-radius: 2px; pointer-events: none; z-index: 10690; }
body.wb-dragging, body.wb-dragging * { cursor: grabbing !important; user-select: none; }

/* ── Ajouter / Modèles (§2.2-B, C) ── */
.wb-addhead { padding: 12px 14px 2px; font-size: 13px; font-weight: 700; color: var(--wb-ink); overflow-wrap: anywhere; }
.wb-tabnote { margin: 0; padding: 4px 14px 6px; font-size: 12px; color: var(--wb-muted); }
.wb-tabnote--structure { padding: 14px 14px 10px; border-bottom: 1px solid var(--wb-line-2); }
.wb-palette { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px 16px; }
.wb-add {
    min-height: 32px; padding: 5px 10px; border: 1px solid var(--wb-line); border-radius: 6px; background: #ffffff; color: var(--wb-ink-2);
    font-size: 13px; cursor: grab; touch-action: none;   /* clic = ajoute au point d'insertion ; glisser = dépose dans l'aperçu */
}
.wb-add:hover { background: var(--wb-accent-050); border-color: var(--wb-accent); color: var(--wb-accent); }
.wb-add.is-disabled { color: #59616d; background: var(--wb-surface-2); border-style: dashed; cursor: not-allowed; }
.wb-add.is-disabled:hover { color: #59616d; background: var(--wb-surface-2); border-color: var(--wb-line); }
.wb-tpls { display: flex; flex-direction: column; gap: 6px; padding: 6px 14px 16px; }
.wb-tpl {
    min-height: 36px; padding: 7px 12px; border: 1px solid var(--wb-line); border-radius: 7px; background: #ffffff; color: var(--wb-ink-2);
    text-align: left; font-size: 13px; cursor: pointer;
}
.wb-tpl:hover { background: var(--wb-accent-050); border-color: var(--wb-accent); color: var(--wb-accent); }
.wb-tpl.is-disabled { color: #59616d; background: var(--wb-surface-2); cursor: not-allowed; }

/* ── Styles et réglages du site (§2.2-D) — zones / groupes ── */
.wb-sitehead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--wb-line-2); }
.wb-sitehead__note { flex: 1 0 100%; font-size: 12px; color: var(--wb-muted); }
.wb-kebab {
    width: 30px; height: 28px; margin-left: auto; border: 1px solid var(--wb-line); border-radius: 6px; background: #ffffff; color: var(--wb-ink-2);
    font-size: 16px; line-height: 1; cursor: pointer;
}
.wb-kebab:hover { border-color: var(--wb-accent); color: var(--wb-accent); }
.wb-area { border-bottom: 1px solid var(--wb-line-2); }
.wb-area__title { margin: 0; padding: 12px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--wb-muted); }
.wb-grp > summary {
    display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-weight: 600; color: var(--wb-ink); cursor: pointer; list-style: none;
}
.wb-grp > summary::-webkit-details-marker { display: none; }
.wb-grp > summary::before { content: '▸'; color: var(--wb-muted); transition: transform .12s; }
.wb-grp[open] > summary::before { transform: rotate(90deg); }
.wb-grp > summary:hover { background: var(--wb-surface-2); }
.wb-fields { padding: 0 14px 12px; }
.wb-infocard {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 10px 0; padding: 8px 10px;
    border: 1px dashed var(--wb-field); border-radius: 6px; font-size: 13px; color: var(--wb-ink-2);
}

/* ── Champs ── */
.wb-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.wb-flabel { flex: 1 1 auto; font-size: 13px; color: var(--wb-ink-2); }
.wb-field input[type="text"], .wb-field input[type="search"], .wb-field select {
    flex: 0 0 150px; min-width: 0; padding: 7px 8px; border: 1px solid var(--wb-field); border-radius: 6px; background: #ffffff; color: var(--wb-ink); font-size: 13px;
}
.wb-field input[type="number"] { flex: 0 0 90px; width: 90px; padding: 7px 8px; border: 1px solid var(--wb-field); border-radius: 6px; background: #ffffff; font-size: 13px; }
.wb-field input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.wb-field input:disabled, .wb-field select:disabled, .wb-field textarea:disabled { background: var(--wb-surface-2); color: var(--wb-muted); }
.wb-field--stack { flex-direction: column; align-items: stretch; gap: 4px; }
.wb-field--stack > .wb-flabel { flex: none; }
.wb-field--stack > input[type="text"], .wb-field--stack > select, .wb-field--stack > textarea { flex: none; width: 100%; }
/* Panneau et inspecteur étroits : libellé au-dessus du contrôle (cases à cocher : sur la même ligne) */
.wb-panel .wb-field, .wb-inspector .wb-field { flex-direction: column; align-items: stretch; gap: 4px; }
.wb-panel .wb-field > .wb-flabel, .wb-inspector .wb-field > .wb-flabel { flex: none; }
.wb-panel .wb-field > input[type="text"], .wb-panel .wb-field > select, .wb-panel .wb-field > input[type="number"],
.wb-inspector .wb-field > input[type="text"], .wb-inspector .wb-field > select, .wb-inspector .wb-field > input[type="number"] { flex: none; width: 100%; }
.wb-panel .wb-field:has(> input[type="checkbox"]), .wb-inspector .wb-field:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; justify-content: space-between; }
.wb-ta { width: 100%; padding: 6px 8px; border: 1px solid var(--wb-field); border-radius: 6px; background: #ffffff; color: var(--wb-ink); font-size: 13px; resize: vertical; }
.wb-fhint { margin: -4px 0 10px; font-size: 12px; line-height: 1.4; color: var(--wb-muted); }
.wb-field--group > .wb-fhint { margin: 0 0 4px; }
.wb-fwarn { font-size: 12px; line-height: 1.4; color: var(--wb-warn-ink); }
.wb-fwarn:empty { display: none; }
.wb-fline { display: flex; gap: 6px; align-items: center; }
.wb-note { padding: 8px 10px; border: 1px solid var(--wb-line-2); border-radius: 6px; background: var(--wb-surface-2); font-size: 13px; line-height: 1.4; color: #3f4a57; }
.wb-note.is-warn { color: #7a3f06; background: #fff7ed; border-color: #fcd9b6; }
.wb-hint { display: block; margin: 0; padding: 10px 14px; font-size: 13px; font-style: italic; color: var(--wb-muted); }
.wb-hint--box { padding: 10px 0 0; }
.wb-mini {
    display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 10px; border: 1px solid var(--wb-field); border-radius: 6px;
    background: var(--wb-surface-2); color: var(--wb-ink); font-size: 12px; white-space: nowrap; cursor: pointer;
}
.wb-mini:hover:not(:disabled):not(.is-disabled) { background: #ffffff; border-color: var(--wb-accent); color: var(--wb-accent); }
.wb-mini:disabled, .wb-mini.is-disabled { opacity: .5; cursor: default; }
.wb-mini--danger { color: var(--wb-danger); }
.wb-subh { margin: 16px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--wb-muted); }
.wb-bp { margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--wb-accent-050); color: var(--wb-accent); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Couleur (P0-8) : vide = damier « Par défaut (thème) », « Réinitialiser » dès qu'une valeur est posée */
.wb-color { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wb-swatch { position: relative; flex: 0 0 auto; width: 34px; height: 30px; overflow: hidden; border: 1px solid var(--wb-field); border-radius: 6px; background: #ffffff; }
.wb-swatch input[type="color"] { position: absolute; top: -6px; left: -6px; width: calc(100% + 12px); height: calc(100% + 12px); padding: 0; border: 0; background: none; cursor: pointer; }
.wb-swatch:focus-within { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
.wb-color.is-empty .wb-swatch {
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #cdd3db 25%, transparent 25%), linear-gradient(-45deg, #cdd3db 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #cdd3db 75%), linear-gradient(-45deg, transparent 75%, #cdd3db 75%);
    background-size: 10px 10px; background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
.wb-color.is-empty .wb-swatch input[type="color"] { opacity: 0; }
.wb-color .wb-hex { flex: 0 0 132px !important; width: 132px !important; text-transform: lowercase; }
.wb-color .wb-hex::placeholder { text-transform: none; }   /* « Par défaut (thème) » tel quel, en entier (revue r1) */

/* Image (P0-6) */
.wb-imgctrl { display: flex; align-items: center; gap: 10px; }
.wb-thumb {
    flex: 0 0 auto; width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; object-fit: contain;
    border: 1px solid var(--wb-line); border-radius: 6px; background: #ffffff; color: var(--wb-muted);
}
.wb-imgbtns { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wb-imgpick { position: relative; overflow: hidden; }
.wb-imgpick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wb-imgpick:focus-within { outline: 2px solid var(--wb-focus); outline-offset: 2px; }

/* Lien (P0-6) : rien n'est écrit sans cible ; « Retirer le lien » */
.wb-link { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wb-link-sum { font-size: 13px; color: var(--wb-ink); overflow-wrap: anywhere; }
.wb-link-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-link-ed { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--wb-line-2); border-radius: 6px; background: var(--wb-surface-2); }
.wb-link select, .wb-link input[type="text"], .wb-link input[type="search"] {
    flex: none; width: 100%; padding: 7px 8px; border: 1px solid var(--wb-field); border-radius: 6px; background: #ffffff; color: var(--wb-ink); font-size: 13px;
}
.wb-link-art, .wb-link-urlw { display: flex; flex-direction: column; gap: 4px; }
.wb-link-urlw .wb-mini { align-self: flex-start; }
.wb-link-artres { display: flex; flex-direction: column; gap: 2px; max-height: 190px; overflow-y: auto; }
.wb-link-artres:empty { display: none; }
.wb-link-artopt {
    padding: 6px 8px; border: 1px solid var(--wb-line-2); border-radius: 6px; background: #ffffff; color: var(--wb-ink); font-size: 13px;
    text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.wb-link-artopt:hover { background: var(--wb-accent-050); border-color: var(--wb-accent); }
.wb-link-artnone { padding: 6px 8px; font-size: 13px; color: var(--wb-muted); }

/* ── Inspecteur (§2.3) ── */
.wb-insp-body { padding: 4px 14px 16px; }
.wb-insphead { padding: 12px 14px 10px; border-bottom: 1px solid var(--wb-line-2); }
.wb-insphead__type { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--wb-ink); }
.wb-insphead__type i { color: var(--wb-muted); }
.wb-insphead__ex { margin-top: 2px; font-size: 12px; color: var(--wb-muted); overflow-wrap: anywhere; }
.wb-insphead__ex:empty { display: none; }
.wb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 8px; font-size: 12px; }
.wb-crumb { padding: 2px 4px; border: none; border-radius: 4px; background: none; color: var(--wb-accent); text-decoration: underline; cursor: pointer; }
.wb-crumb[aria-current="true"] { color: var(--wb-ink); font-weight: 600; text-decoration: none; cursor: default; }
.wb-crumb-sep { color: var(--wb-muted); }
.wb-inspacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wb-sharedban {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 14px 4px; padding: 8px 10px; border: 1px solid #c7d2fe;
    border-radius: 8px; background: #eef2ff; color: #27306b; font-size: 13px; line-height: 1.4;
}
.wb-sharedban__txt { flex: 1 1 180px; }
/* Collant en haut de l'inspecteur : toujours visible, même inspecteur défilé (revue r1) */
.wb-devban {
    position: sticky; top: 0; z-index: 2; margin: 10px 14px 0; padding: 8px 10px; border: 1px solid #fcd9b6; border-radius: 6px;
    background: #fff7ed; color: #7a3f06; font-size: 12px; line-height: 1.4; box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.wb-pageinfo { margin: 12px 0 0; font-size: 13px; }
.wb-pageinfo dt { margin-top: 8px; font-weight: 600; color: var(--wb-ink-2); }
.wb-pageinfo dd { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 2px 0 0; color: var(--wb-ink); }
.wb-pageinfo__url { overflow-wrap: anywhere; color: var(--wb-muted); }

/* ── Choisir une page (fenêtre du kit, dans l'overlay) ── */
.wb-pagelist { display: flex; flex-direction: column; min-height: 0; }
.wb-pagesearch { margin: 2px 12px 6px; padding: 7px 9px; border: 1px solid var(--wb-field); border-radius: 6px; font-size: 13px; }
.wb-pagegroups { overflow-y: auto; max-height: min(60vh, 460px); border-top: 1px solid var(--wb-line-2); }
.wb-pagegroup__title { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--wb-muted); }
.wb-pagerow { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; }
.wb-pagerow.is-current { background: var(--wb-accent-050); }
.wb-pagerow .wb-pillw { flex-wrap: nowrap; flex: 0 0 auto; }
.wb-pagerow__name {
    flex: 1 1 auto; min-width: 0; padding: 7px 8px; border: none; border-radius: 6px; background: none; color: var(--wb-ink);
    text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.wb-pagerow__name:hover { background: var(--wb-surface-2); }
.wb-pagerow__more { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--wb-ink-2); cursor: pointer; }
.wb-pagerow__more:hover { border-color: var(--wb-line); background: #ffffff; }
/* « + Nouvelle page » au-dessus de la recherche (revue r8 : un Maj+Tab depuis elle ; sous elle, il prenait le Tab qui mène au 1er
   résultat — revue r7 : en pied de liste, 29 Tab) ; le filet sépare la recherche de la liste (.wb-pagegroups) */
.wb-pagenew { padding: 2px 12px 4px; }

/* ── Boîte « Nouvelle page » (dans .wb-dlg-overlay, hors de l'overlay : couleurs explicites) ── */
.wb-newpage { display: flex; flex-direction: column; gap: 12px; }
.wb-newpage__f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #33404f; }
.wb-newpage__f input[type="text"] { padding: 8px 10px; border: 1px solid #b8c1cc; border-radius: 6px; font: inherit; color: #1d2430; }
.wb-newpage__f input[type="text"]:focus-visible { outline: 2px solid #1b4fd8; outline-offset: 1px; }
/* Création en cours : nom et adresse figés (revue r8 — la requête part avec ces valeurs) */
.wb-newpage__f input[type="text"]:read-only { background: #f1f4f8; color: #4a5361; }
.wb-newpage__addr { font-size: 12px; color: #5b6472; overflow-wrap: anywhere; }
.wb-newpage__type { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; border: none; font-size: 13px; color: #33404f; }
.wb-newpage__type legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.wb-newpage__radio { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.wb-newpage__err { margin: 0; font-size: 13px; color: #912018; }
.wb-newpage__err:empty { display: none; }
.wb-newpage__wait { margin: 0; font-size: 13px; color: #33404f; }
.wb-newpage__wait:empty { display: none; }

/* ── Raccourcis du bandeau (navbar.shortcuts) — v1 ── */
.wb-scuts { display: flex; flex-direction: column; gap: 8px; }
.wb-scrow { border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #f8fafc; }
.wb-scline { display: flex; gap: 4px; align-items: center; }
/* Sélecteurs renforcés : passent devant `.wb-field input[type="text"]` / `.wb-field select` (largeur fixe 150px). */
.wb-scline > .wb-scinp[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; box-sizing: border-box; font: inherit; font-size: .8rem; padding: 5px 7px; border: 1px solid #b8c1cc; border-radius: 4px; background: #fff; }
.wb-scbtn { flex: 0 0 auto; padding: 3px 7px; }
.wb-scbtn:disabled, .wb-scadd:disabled { opacity: .4; cursor: default; }
.wb-scline > select.wb-scdest { flex: 0 0 92px; width: 92px; min-width: 0; box-sizing: border-box; font: inherit; font-size: .78rem; padding: 4px; border: 1px solid #b8c1cc; border-radius: 4px; background: #fff; cursor: pointer; }
.wb-scinfo { font-size: .74rem; line-height: 1.35; color: #4b5563; overflow-wrap: anywhere; }
.wb-scinfo.is-warn { color: #8a4b08; }
.wb-scinfo:empty { display: none; }
.wb-scfoot { display: flex; align-items: center; gap: 8px; }
.wb-sccount { font-size: .74rem; color: #5b6472; }

/* ── Colonnes de liens du footer (footerlinks, rendu par groupRow dans un <div> — P0-8) — v1 ── */
.wb-flinks { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wb-flcol { border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; background: #f8fafc; }
.wb-flrow { display: flex; gap: 6px; align-items: center; }
/* Un lien = DEUX lignes (revue r3) : libellé + « ✕ », puis l'adresse sur toute la largeur, et son aide « → Page « … » » —
   à 111 px, chaque adresse ne montrait que « page.php?slug… » et la cible n'était jamais lisible. */
.wb-flrow--link { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 0 2px 8px; border-top: 1px dashed #e2e8f0; }
.wb-flline { display: flex; gap: 6px; align-items: center; }
.wb-flline > input.wb-flinp[type="text"] { flex: 1 1 0; width: auto; min-width: 0; box-sizing: border-box; font-size: 12px; padding: 5px 7px; }
.wb-flline > .wb-mini { flex: 0 0 auto; }
.wb-flinp { flex: 1; min-width: 0; font-size: 12px; padding: 4px 6px; border: 1px solid #b8c1cc; border-radius: 4px; background: #fff; }
/* Sélecteur renforcé (0,3,1) : passe devant `.wb-field input[type="text"]` (0,2,1, largeur fixe 150 px) — deux champs de 150 px
   + « ✕ » débordaient de l'inspecteur de 320 px, les boutons « Supprimer le lien » hors de vue (revue r2). Même principe que
   `.wb-scline > .wb-scinp[type="text"]` ci-dessus. */
.wb-flrow > input.wb-flinp[type="text"] { flex: 1 1 0; width: auto; min-width: 0; box-sizing: border-box; font-size: 12px; padding: 5px 7px; }
.wb-flrow > .wb-mini { flex: 0 0 auto; }
.wb-fladdcol, .wb-fladdlink { align-self: flex-start; }

/* ── Magasins (stores.items) ── */
.wb-store { border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 10px 2px; background: #f8fafc; margin-bottom: 8px; }
.wb-store__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wb-store__name { font-weight: 600; font-size: .86rem; color: #1d2430; }
.wb-store__ide { font-size: .72rem; color: #6b7280; white-space: nowrap; }
.wb-store__addr { font-size: .74rem; color: #6b7280; margin-top: 2px; }
/* Horaires de l'ERP (lecture seule, affichés en priorité par la boutique — 2026-10-06) */
.wb-store__dti { font-size: .74rem; color: #475569; margin: 8px 0 0; line-height: 1.45; }
.wb-store__dtil { font-weight: 600; color: #1d2430; }
.wb-store__dtih { display: block; white-space: pre-line; color: #1d2430; margin: 2px 0; }
.wb-store__dtin { color: #6b7280; }
.wb-store .wb-field { margin: 8px 0; }
.wb-store.is-off { background: #f3f4f6; }
.wb-store.is-off .wb-store__name { color: #9aa3af; text-decoration: line-through; }

@media (prefers-reduced-motion: reduce) {
    .wb-grp > summary::before, .wb-sizer { transition: none; }
}