/* Styles propres aux écrans « editeur » de l’interface /v2.
   Portée : la vue plein écran « Éditer mon site » (#view-builder) et ses
   fenêtres (pages, menu du site, choix de formulaire). Seul l’habillage de
   l’éditeur change : le contenu de l’aperçu (le site du client) garde ses
   propres styles.

   Direction « Atelier calme » (docs/v2/REFONTE-DESIGN.md, section 4) :
   - barre du haut et panneaux plats, blancs, séparés par des filets #e6e6e3 ;
   - la page du client posée au centre sur un fond neutre uni, sans motif ;
   - listes en lignes (pas de carte par ligne), états écrits en texte ;
   - un seul bouton plein dans la barre : « Publier », en encre ;
   - le bleu reste un accent : liens, focus, entrée active, sélection ;
   - le violet n’est plus un décor : au plus une petite marque « IA » ;
   - rayons 6 / 8 / 12 px, ombres réservées à ce qui flotte, transitions
     de 120 à 180 ms sur la couleur et l’opacité.

   Dégel : styles.css fige les anciens tokens sous body.builder-active.
   Le bloc ci-dessous les ramène aux valeurs de la refonte pour l’habillage,
   puis rend au cadre d’aperçu (.site-frame) et aux miniatures de blocs les
   valeurs d’origine, pour que le site du client ne bouge pas. */

body.builder-active {
  /* — Neutres et accents de la refonte — */
  --blue-strong: #1c47b3;
  --blue-soft: #dbe4fa;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --muted: #63636b;
  --subtle: #a1a1a6;
  --line: #e6e6e3;
  --line-strong: #d4d4d0;
  --line-hover: #b8b8b3;
  --hairline: rgba(24, 24, 27, .08);
  --surface: #ffffff;
  --surface-2: #f1f1ee;
  --surface-3: #e9e9e5;
  --canvas: #f7f7f5;
  --surface-blue: #eef2fc;
  --surface-green: #e9f5ee;
  --surface-red: #fcf0f1;
  --surface-amber: #fbf4e2;

  /* — Ombres : seulement ce qui flotte — */
  --shadow-xs: 0 0 #0000;
  --shadow-sm: 0 0 #0000;
  --shadow: 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-md: 0 1px 2px rgba(24, 24, 27, .04), 0 8px 24px -8px rgba(24, 24, 27, .14);
  --shadow-lg: 0 2px 6px rgba(24, 24, 27, .05), 0 18px 44px -14px rgba(24, 24, 27, .2);
  --shadow-inset-highlight: 0 0 #0000;
  --shadow-preview: 0 1px 2px rgba(24, 24, 27, .04), 0 6px 18px -10px rgba(24, 24, 27, .12);
  --shadow-btn-primary: 0 0 #0000;
  --shadow-btn-primary-hover: 0 0 #0000;
  --btn-focus-halo: 0 0 #0000;

  /* — Rayons : 6 contrôles, 8 menus et cadre d’aperçu, 12 fenêtres — */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* — Typographie — */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-lg: 15px;
  --text-2xl: 22px;
  --tracking-tight: -.02em;
  --tracking-snug: -.01em;
  --weight-heading: 600;
  --word-spacing: normal;

  /* — Mouvement — */
  --dur-2: 150ms;
  --dur-3: 180ms;
  --dur-4: 220ms;

  /* — Composants — */
  --btn-radius: var(--radius-sm);
  --btn-weight: 550;
  --btn-primary-bg: #18181b;
  --btn-primary-bg-hover: #3f3f46;
  --btn-primary-fg: #ffffff;
  --backdrop: rgba(24, 24, 27, .32);
  --btn-hover-lift: none;
  --press-transform: translateY(1px);
  --icon-btn-radius: var(--radius-sm);
  --segmented-radius: var(--radius-sm);
  --segmented-item-radius: 4px;
  --card-shadow: none;
  --toast-bg: var(--ink);
  --toast-radius: var(--radius);
  --row-hover: rgba(24, 24, 27, .035);
  --field-radius: var(--radius-sm);

  /* — Propres à l’éditeur — */
  --ed-stage: #efefec;       /* fond neutre sous la page du client */
  --ed-frame-line: #dededa;  /* bord du cadre d’aperçu */
  --ed-panel-gap: 14px;
  --ed-row-h: 40px;
  line-height: 1.5;
}

/* Le site du client garde exactement ses valeurs d’avant (polices, filets, rayons). */
body.builder-active :is(.site-frame, .library-preview-stage) {
  --ink: #141b2d;
  --ink-2: #2c3446;
  --muted: #566174;
  --subtle: #7a8597;
  --line: #e3e7ee;
  --line-strong: #cfd5df;
  --surface-2: #f8f9fb;
  --surface-3: #f1f3f7;
  --surface-blue: #edf2fd;
  --blue-strong: #1d4fbf;
  --blue-soft: #dbe5fb;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-sans);
  line-height: 1.45;
}

/* -------------------------------------------------------------------------
   Barre du haut de l’éditeur
   ------------------------------------------------------------------------- */
body.builder-active .builder-toolbar {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  max-height: none;
  padding: 8px 14px;
  overflow: visible;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}
body.builder-active .builder-toolbar .bt-zone { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-width: 0; }
body.builder-active .builder-toolbar .bt-where { flex: 0 1 auto; gap: 10px; }
body.builder-active .builder-toolbar .bt-view { gap: 10px; }
body.builder-active .builder-toolbar .topbar-spacer { display: block; flex: 1 1 0; min-width: 0; }

/* N4 : seul le nom du site se tronque ; les autres éléments gardent leur taille,
   pour que les groupes d’outils ne se superposent jamais (« ··· » toujours cliquable). */
body.builder-active .builder-toolbar .bt-where > :not(.builder-context) { flex: none; }
body.builder-active .builder-toolbar .bt-where > .builder-context { flex: 0 1 auto; min-width: 0; overflow: hidden; }
body.builder-active .builder-context .builder-site-rename { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
body.builder-active .builder-context .builder-site-rename strong { min-width: 0; }
body.builder-active .builder-context .builder-site-rename svg { flex: none; }

/* Quitter l’éditeur */
body.builder-active .builder-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 0;
  padding: 0 12px 0 8px;
  border: 1px solid transparent;
  border-right: 0;
  border-radius: var(--radius);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-weight: 600;
  transition: background-color var(--dur-2) var(--ease-soft);
}
body.builder-active .builder-brand:hover { background: var(--surface-2); }
body.builder-active .builder-brand > svg { width: 18px; height: 18px; color: var(--muted); }
body.builder-active .builder-brand .brand-mark { display: grid; width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: 14px; }
body.builder-active .builder-brand-label { font-size: 13.5px; }

/* Site et page en cours */
body.builder-active .builder-context {
  display: flex;
  min-width: 0;
  max-width: 190px;
  flex-direction: column;
  gap: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
}
body.builder-active .builder-context small { color: var(--muted); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.builder-active .builder-context strong { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

body.builder-active .page-manager {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 3px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-soft);
}
body.builder-active .page-manager:hover { border-color: var(--line-hover); }
body.builder-active .page-manager:focus-within { border-color: var(--blue); }
body.builder-active .page-manager-label { display: grid; place-items: center; color: var(--muted); cursor: pointer; }
body.builder-active .page-manager-label svg { width: 16px; height: 16px; }
body.builder-active .page-manager select {
  width: 156px;
  min-width: 0;
  height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  cursor: pointer;
}
body.builder-active .page-manager select:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; }
body.builder-active .page-manager .tool-button,
body.builder-active .page-manager summary.tool-button { width: 34px; height: 34px; min-width: 34px; border: 0; }

/* Boutons-outils (historique, outils de dessin, actions de page) */
body.builder-active .builder-toolbar .tool-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}
body.builder-active .builder-toolbar .tool-button svg { width: 18px; height: 18px; }
body.builder-active .builder-toolbar .tool-button:hover { border-color: transparent; background: var(--surface-2); }
body.builder-active .builder-toolbar .tool-button.active,
body.builder-active .builder-toolbar .tool-button[aria-pressed="true"] { color: var(--blue); border-color: transparent; background: var(--surface-blue); }
body.builder-active .builder-toolbar .tool-group,
body.builder-active .builder-toolbar .bt-history {
  display: flex;
  gap: 2px;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 1px solid var(--line);
}
/* Le crayon (montrer une zone à l’IA) s’active comme les autres outils : pas de violet. */

/* Ordinateur / téléphone */
body.builder-active .builder-toolbar .bt-devices {
  display: inline-flex;
  min-height: 36px;
  padding: 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
}
body.builder-active .builder-toolbar .bt-devices button {
  min-width: 0;
  min-height: 32px;
  gap: 6px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}
body.builder-active .builder-toolbar .bt-devices button svg { width: 16px; height: 16px; }
body.builder-active .builder-toolbar .bt-devices button:hover { color: var(--ink); }
body.builder-active .builder-toolbar .bt-devices button:is(.active, [aria-pressed="true"]) { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
body.builder-active .builder-toolbar .bt-devices span { display: inline; }

/* État de sauvegarde : discret quand tout va bien */
body.builder-active .builder-toolbar .save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 4px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
/* Un état s’écrit en texte, avec un point de couleur quand il pose problème. */
body.builder-active .builder-toolbar .save-state[data-persistence="error"] { color: var(--red); background: transparent; }
body.builder-active .builder-toolbar .save-state[data-persistence="error"]::before { flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; content: ""; }
/* « Non enregistré » : bouton qui ouvre l'explication et les actions (Réessayer, Recharger). */
.save-state { position: relative; }
.save-state-explain { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.save-state-detail { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: grid; gap: 10px; width: min(340px, 86vw); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface, #fff); color: var(--ink, #18181b); font-weight: 400; white-space: normal; line-height: 1.45; box-shadow: var(--shadow-md); }
.save-state-detail[hidden] { display: none; }
.save-state-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* La connexion ne s’affiche que lorsqu’elle pose problème. */
body.builder-active #builderNetworkState { display: none; }
body.builder-active #builderNetworkState:is(.offline, .reconnecting) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 4px;
  color: var(--amber);
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
body.builder-active #builderNetworkState:is(.offline, .reconnecting)::before { flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; content: ""; }

body.builder-active .builder-toolbar .bt-actions { gap: 8px; }
body.builder-active .builder-toolbar .bt-actions .button.compact { min-height: 36px; gap: 7px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; }
body.builder-active .builder-toolbar .bt-actions .button svg { width: 16px; height: 16px; }
/* « Publier » : le seul bouton plein de la barre, en encre. */
body.builder-active .builder-toolbar [data-open-publish] { padding: 0 16px; color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); background: var(--btn-primary-bg); box-shadow: none; font-weight: 550; }
body.builder-active .builder-toolbar [data-open-publish]:hover { border-color: var(--btn-primary-bg-hover); background: var(--btn-primary-bg-hover); }

/* Menus déroulants (pages, outils avancés) */
body.builder-active .bt-menu { position: relative; }
/* Un menu ouvert passe au-dessus du panneau des réglages (fixe sur tablette et téléphone). */
body.builder-active .builder-toolbar:has(.bt-menu[open]) { z-index: 60; }
body.builder-active .bt-menu > summary { list-style: none; cursor: pointer; }
body.builder-active .bt-menu > summary::-webkit-details-marker { display: none; }
body.builder-active .bt-menu > summary.button { display: inline-flex; align-items: center; }
body.builder-active .bt-menu[open] > summary { color: var(--ink); border-color: var(--line-hover); background: var(--surface-2); }
body.builder-active .bt-menu .bt-caret { width: 14px !important; height: 14px !important; transition: transform var(--dur-2) var(--ease-soft); }
body.builder-active .bt-menu[open] .bt-caret { transform: rotate(180deg); }
body.builder-active .bt-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  z-index: 60;
  display: grid;
  gap: 2px;
  width: max-content;
  min-width: 236px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
body.builder-active .bt-menu-list.bt-menu-right { right: 0; left: auto; }
body.builder-active .bt-menu-list > .bt-menu-item:is(#addPageMenuItem, #addSkeletonMenuItem, #siteMenuMenuItem, #pageHistoryButton, #duplicatePageButton, #renamePageButton, #setHomePageButton, #configureNavigation, #deletePageButton, #openCodeEditor, #exportPages, #backendWorkspaceToggle) {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 40px;
  padding: 8px 10px;
  overflow: visible;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-soft);
}
body.builder-active .bt-menu-list > .bt-menu-item[hidden] { display: none !important; }
body.builder-active .bt-menu-list > .bt-menu-item svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
body.builder-active .bt-menu-list > .bt-menu-item:hover { background: var(--surface-2); }
body.builder-active .bt-menu-list > .bt-menu-item:disabled { opacity: .5; cursor: not-allowed; }
body.builder-active .bt-menu-list > .bt-menu-item.danger { color: var(--red); }
body.builder-active .bt-menu-list > .bt-menu-item.danger svg { color: var(--red); }
body.builder-active .bt-menu-list > .bt-menu-item.danger:hover { background: var(--surface-red); }
body.builder-active .bt-menu-list > #configureNavigation { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 4px; padding-top: 12px; }
body.builder-active .bt-menu-list > #backendWorkspaceToggle[aria-expanded="true"] { color: var(--blue-strong); background: var(--surface-blue); }

/* Rôle « lecteur » : consultation seule. Les commandes d’écriture disparaissent ;
   les pages, l’affichage, le zoom, l’aperçu et les réglages (en lecture) restent. */
.builder-readonly-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.builder-readonly-note[hidden] { display: none; }
.builder-readonly-note svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
#view-builder.builder-readonly :is([data-open-publish], #addPageButton, .page-actions-menu, .bt-history, .tool-group, #openMediaLibrary, .bt-advanced, #addSectionButton, .add-section, .page-structure-actions, .native-section-actions, .component-library, #openAddDrawer, .ai-launcher, .ai-command-panel, .ai-analysis-bar, .inspector-tab-ai, .generated-entry-actions, .block-actions) { display: none !important; }
#view-builder.builder-readonly .builder-inspector [data-inspector-panel] { opacity: .78; }
#view-builder.builder-readonly .builder-sections > .section-item { cursor: pointer; }
#view-builder.builder-readonly .builder-small-screen-note { display: none; }
/* Lecteur : ni crayon de renommage, ni indicateur d’enregistrement, ni champ actif. */
#view-builder.builder-readonly :is(.save-state, #contentSaveNote) { display: none !important; }
#view-builder.builder-readonly .builder-site-rename { cursor: default; color: inherit; opacity: 1; }
#view-builder.builder-readonly .builder-site-rename :is(svg, .sr-only) { display: none; }
#view-builder.builder-readonly .builder-inspector [data-inspector-panel] :is(input, textarea, select):disabled { color: var(--ink); background: var(--surface-2); border-style: dashed; cursor: not-allowed; opacity: 1; }
.inspector-readonly-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45; }
.inspector-readonly-note[hidden] { display: none; }
.inspector-readonly-note svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--muted); }

/* Conflit de version (N2) : bandeau dans le flux, sans bouton de fermeture. */
.page-conflict-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); color: var(--ink); background: var(--surface-amber); font-size: 13px; line-height: 1.45; }
.page-conflict-banner[hidden] { display: none; }
.page-conflict-banner > svg { flex: none; width: 20px; height: 20px; color: var(--amber); }
.page-conflict-copy { display: grid; flex: 1 1 280px; min-width: 0; gap: 2px; }
.page-conflict-copy strong { font-size: 14px; font-weight: 600; }
.page-conflict-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-conflict-actions[hidden] { display: none; }
.page-conflict-actions > span { flex: 1 1 100%; font-weight: 500; }
@media (max-width: 520px) { .page-conflict-actions, .page-conflict-actions .button { width: 100%; } }
/* Tablette et téléphone : les réglages s’ouvrent par-dessus la page ; le bandeau de conflit
   reste au-dessus d’eux, en bas de l’écran, pour que le choix soit toujours possible. */
@media (max-width: 920px) {
  .page-conflict-banner { position: fixed; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); left: 8px; z-index: 95; max-height: 70vh; overflow-y: auto; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
}

/* Petit écran : l’éditeur reste utilisable, mais il le dit. */
.builder-small-screen-note { display: none; }

/* -------------------------------------------------------------------------
   Disposition générale : panneau des blocs | page | réglages
   ------------------------------------------------------------------------- */
body.builder-active .builder-layout { grid-template-columns: 252px minmax(0, 1fr) 320px; }
body.builder-active .builder-layout.sections-collapsed { grid-template-columns: 52px minmax(0, 1fr) 320px; }
body.builder-active .builder-layout.inspector-collapsed { grid-template-columns: 252px minmax(0, 1fr) 52px; }
body.builder-active .builder-layout.sections-collapsed.inspector-collapsed { grid-template-columns: 52px minmax(0, 1fr) 52px; }

/* Le plan de travail : la page du client posée au centre, sur un fond neutre uni.
   Le cadre d’aperçu est la seule surface blanche avec une ombre très légère. */
body.builder-active .canvas-stage {
  padding: 28px 32px 196px;
  background: var(--ed-stage);
}
body.builder-active .site-frame {
  border: 1px solid var(--ed-frame-line);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 6px 18px -10px rgba(24, 24, 27, .12);
}
body.builder-active .site-frame.mobile { border-radius: 12px; box-shadow: 0 1px 2px rgba(24, 24, 27, .04), 0 6px 18px -10px rgba(24, 24, 27, .12); }

/* Zoom de l’aperçu (dans la barre du haut) */
body.builder-active .builder-toolbar .canvas-zoom {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: none;
}
body.builder-active .builder-toolbar .canvas-zoom .icon-button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-xs); color: var(--ink); background: transparent; cursor: pointer; }
body.builder-active .builder-toolbar .canvas-zoom .icon-button:hover { background: var(--surface-2); }
body.builder-active .builder-toolbar .canvas-zoom .icon-button svg { width: 15px; height: 15px; }
body.builder-active .builder-toolbar .canvas-zoom span { min-width: 44px; color: var(--ink); font-size: 12.5px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
body.builder-active .canvas-drop-hint { border-radius: var(--radius); }

/* -------------------------------------------------------------------------
   Panneau de gauche : « Ma page »
   ------------------------------------------------------------------------- */
body.builder-active .builder-sections {
  padding: 0 14px 18px;
  counter-reset: ed-section;
  background: var(--surface);
}
body.builder-active .builder-panel-title {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: auto;
  min-height: 58px;
  margin: 0 -14px 10px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
body.builder-active .builder-panel-title > span { display: grid; gap: 1px; min-width: 0; }
body.builder-active .builder-panel-title > span strong { font-size: 14px; font-weight: 600; }
body.builder-active .builder-panel-title > span small { color: var(--muted); font-size: 12px; font-weight: 500; }
body.builder-active .builder-panel-title > div { gap: 2px; }
body.builder-active .builder-panel-title .icon-button,
body.builder-active .inspector-panel-head .icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; }
body.builder-active .builder-panel-title .icon-button:hover,
body.builder-active .inspector-panel-head .icon-button:hover { color: var(--ink); border-color: transparent; background: var(--surface-2); }

/* Téléphone : nom du site sous « Ma page » en texte secondaire, pas en bleu. */
body.builder-active #view-builder .builder-panel-title .builder-site-mobile:not(:empty) { color: var(--ink-2); font-weight: 500; }

/* Les sections de la page, numérotées de haut en bas : des lignes, pas des cartes. */
body.builder-active .builder-sections > .section-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px 18px minmax(0, 1fr) auto;
  place-items: center start;
  gap: 8px;
  min-height: var(--ed-row-h);
  margin: 0 0 2px;
  padding: 6px 8px 6px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft);
}
body.builder-active .builder-sections > .section-item::before {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  content: counter(ed-section);
}
body.builder-active .builder-sections > .section-item:not([hidden]) { counter-increment: ed-section; }
body.builder-active .builder-sections > .section-item > svg:first-of-type { width: 16px; height: 16px; color: var(--muted); }
body.builder-active .builder-sections > .section-item > svg:last-child:not(:first-of-type) { width: 16px; height: 16px; color: var(--subtle); }
body.builder-active .builder-sections > .section-item:hover { background: var(--surface-2); }
/* Ligne choisie : fond de sélection et barre d’accent de 2 px, comme le menu latéral. */
body.builder-active .builder-sections > .section-item.active { color: var(--ink); background: var(--surface-blue); box-shadow: inset 2px 0 0 var(--blue); font-weight: 600; }
body.builder-active .builder-sections > .section-item.active::before { color: var(--blue); }
body.builder-active .builder-sections > .section-item.active > svg:first-of-type { color: var(--blue); }
body.builder-active .builder-sections > .section-item.is-hidden { color: var(--muted); background: transparent; }
body.builder-active .builder-sections > .section-item.is-hidden > span:not(.page-structure-actions, .native-section-actions) { text-decoration: line-through; text-decoration-color: var(--line-strong); }
body.builder-active .builder-sections > .section-item.dragging { opacity: .45; }

/* Actions d’une section (monter, descendre, dupliquer, masquer, supprimer) :
   on choisit d’abord la ligne, puis ses actions apparaissent sous le libellé.
   Rien n’apparaît au survol : aucune commande ne surgit sous le pointeur. */
body.builder-active .page-structure-actions,
body.builder-active .native-section-actions {
  justify-self: stretch;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-left: auto;
  opacity: 1;
}
/* Repliées hors sélection, mais toujours atteignables au clavier : un bouton en
   display:none perd le focus pendant la tabulation (retour sur BODY). */
body.builder-active .builder-sections > .section-item:has(:is(.page-structure-actions, .native-section-actions)) { position: relative; }
body.builder-active .builder-sections > .section-item:not(.active, .is-hidden, :focus-within) :is(.page-structure-actions, .native-section-actions) { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.builder-active .page-structure-actions button,
body.builder-active .native-section-actions [role="button"] {
  display: grid;
  place-items: center;
  width: 30px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  background: transparent;
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft);
}
body.builder-active .builder-sections > .section-item > .remove-section { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; }
body.builder-active .builder-sections > .section-item > .remove-section svg { width: 16px; height: 16px; color: currentColor; }
body.builder-active .builder-sections > .section-item > .remove-section:hover { color: var(--red); background: var(--surface-red); }
@media (min-width: 921px) { body.builder-active .builder-sections > .section-item:has(> .remove-section) { grid-template-columns: 22px 18px minmax(0, 1fr) auto; } }
@media (max-width: 920px) { body.builder-active .builder-sections > .section-item:has(> .remove-section) { grid-template-columns: 18px minmax(0, 1fr) auto; } }
#view-builder.builder-readonly .builder-sections > .section-item > .remove-section { display: none; }
body.builder-active .page-structure-actions button:focus-visible,
body.builder-active .native-section-actions [role="button"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
body.builder-active .page-structure-actions button:hover,
body.builder-active .native-section-actions [role="button"]:hover { color: var(--ink); background: var(--surface-3); box-shadow: none; }
body.builder-active .page-structure-actions button:is([data-structure-block-action="delete"], [data-structure-composition-action="delete"], [data-imported-structure-action="delete"]):hover,
body.builder-active .native-section-actions [data-native-section-action="delete"]:hover { color: var(--red); background: var(--surface-red); }
/* Libellé de la section : deux lignes au plus, sans chevaucher les actions. */
body.builder-active .builder-sections > .section-item > span:not(.page-structure-actions, .native-section-actions) {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (min-width: 921px) {
  body.builder-active .builder-sections > .section-item:has(.page-structure-actions, .native-section-actions) { grid-template-columns: 22px 18px minmax(0, 1fr); }
}

body.builder-active .builder-sections > .add-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: var(--ed-row-h);
  margin: 6px 0 0;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
body.builder-active .builder-sections > .add-section:hover { border-color: var(--line-hover); background: var(--surface-2); }
body.builder-active .builder-sections > .add-section svg { width: 16px; height: 16px; color: var(--muted); }

/* Page importée */
body.builder-active .imported-structure-panel { border-radius: var(--radius); }
body.builder-active .imported-structure-panel > strong { font-size: 14px; font-weight: 600; }
body.builder-active .imported-structure-panel > small { font-size: 12.5px; }
body.builder-active .imported-structure-panel > button { border-radius: var(--radius-sm); font-size: 13px; }

/* Ajouter un bloc (bibliothèque) */
body.builder-active .component-library { gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
body.builder-active .library-heading { min-height: 24px; }
body.builder-active .component-library-title { color: var(--ink); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
body.builder-active .library-heading kbd { font-size: 11px; }
body.builder-active .library-instruction { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
body.builder-active .component-library .library-kinds { gap: 2px; padding: 2px; border: 0; border-radius: var(--radius-sm); background: var(--surface-3); }
body.builder-active .component-library .library-kinds button {
  display: block;
  min-height: 32px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-xs);
  color: var(--muted);
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}
body.builder-active .component-library .library-kinds button:hover { color: var(--ink); border: 0; background: transparent; }
body.builder-active .component-library .library-kinds button.active { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
body.builder-active .library-search { min-height: 40px; border-color: var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
body.builder-active .library-search input { font-size: 13.5px; }
body.builder-active .library-search input::placeholder { color: var(--muted); }
body.builder-active .component-library .library-filters { gap: 5px; padding-bottom: 6px; }
body.builder-active .component-library .library-filters button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  width: auto;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
}
body.builder-active .component-library .library-filters button:hover { color: var(--ink); border-color: var(--line-hover); background: var(--surface); }
body.builder-active .component-library .library-filters button.active { color: var(--ink); border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
body.builder-active .component-library .library-filters b { color: var(--muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
body.builder-active .component-library .library-grid { gap: 10px; }
body.builder-active .component-library .library-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: start;
  gap: 8px 6px;
  width: 100%;
  min-height: 0;
  padding: 8px 10px 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: grab;
}
body.builder-active .component-library .library-card:hover { transform: none; border-color: var(--line-hover); background: var(--surface); box-shadow: none; }
body.builder-active .component-library .library-card > :is(.library-markup-preview, .library-preview) { grid-column: 1 / -1; border-radius: var(--radius-sm); }
body.builder-active .component-library .library-card-copy { display: grid; gap: 2px; padding-left: 2px; }
body.builder-active .component-library .library-card strong { font-size: 13px; font-weight: 600; }
body.builder-active .component-library .library-card small { color: var(--muted); font-size: 12px; line-height: 1.4; }
body.builder-active .component-library .library-card-grip { align-self: center; width: 16px; height: 16px; color: var(--muted); }
body.builder-active .component-library .library-card.is-incompatible { cursor: not-allowed; background: var(--surface-2); }
body.builder-active .library-state { border-radius: var(--radius); font-size: 12.5px; }
body.builder-active .library-state button { border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 500; }

/* -------------------------------------------------------------------------
   Panneau de droite : réglages
   ------------------------------------------------------------------------- */
body.builder-active .builder-inspector { padding: 0 16px 20px; background: var(--surface); }
body.builder-active .builder-inspector > .inspector-panel-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 58px;
  min-height: 0;
  max-width: none;
  margin: 0 -16px;
  padding: 10px 10px 10px 16px;
  border-bottom: 0;
  background: var(--surface);
  backdrop-filter: none;
}
body.builder-active .builder-inspector > .inspector-panel-head strong { font-size: 14px; font-weight: 600; }
body.builder-active .builder-inspector > .inspector-tabs {
  position: sticky;
  top: 58px;
  z-index: 3;
  display: flex;
  gap: 0;
  max-width: none;
  margin: 0 -16px 16px;
  padding: 0 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}
/* Mode expert : un cinquième onglet (Données) ; les icônes s’effacent pour tenir sur une ligne. */
body.mode-expert.builder-active .builder-inspector > .inspector-tabs button svg { display: none; }
body.builder-active .builder-inspector > .inspector-tabs button {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 0 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
body.builder-active .builder-inspector > .inspector-tabs button svg { width: 15px; height: 15px; }
body.builder-active .builder-inspector > .inspector-tabs button:hover { color: var(--ink); background: transparent; }
body.builder-active .builder-inspector > .inspector-tabs button.active { color: var(--ink); border-bottom-color: var(--blue); background: transparent; font-weight: 600; }
/* Onglet IA : même traitement que les autres onglets, sans violet. */

/* Typographie lisible dans les réglages */
body.builder-active .builder-inspector .selected-meta {
  gap: 2px;
  margin-bottom: 4px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
body.builder-active .builder-inspector .selected-meta > span { color: var(--muted); font-size: 12px; font-weight: 500; }
body.builder-active .builder-inspector .selected-meta strong { font-size: 15px; font-weight: 600; }
body.builder-active .builder-inspector .selected-meta strong svg { width: 16px; height: 16px; color: var(--muted); }
body.builder-active .builder-inspector :is(.inspector-form, .dynamic-fields) label { color: var(--ink); font-size: 13px; font-weight: 500; }
body.builder-active .builder-inspector :is(.inspector-form, .dynamic-fields) :is(input:not([type="range"], [type="checkbox"], [type="radio"], [type="color"]), select, textarea) { font-size: 13.5px; }
body.builder-active .builder-inspector .inspector-form > small,
body.builder-active .builder-inspector .inspector-hint { color: var(--muted); font-size: 12px; line-height: 1.45; }
body.builder-active .builder-inspector .content-live-note { font-size: 12.5px; }
body.builder-active .builder-inspector .content-live-note[hidden] { display: none; }
body.builder-active .builder-inspector #contentSaveNote.error { color: var(--red); background: var(--surface-red); }
body.builder-active #sectionContentFields .empty-editor { display: grid; gap: 4px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; line-height: 1.5; }
body.builder-active #sectionContentFields .empty-editor span { color: var(--muted); }
body.builder-active .builder-inspector :is(input:not([type="range"], [type="checkbox"], [type="radio"]), select, textarea) { font-weight: 400; }
body.builder-active .builder-inspector :is(.color-audit-scope, .data-choice-group, .data-confirm) input:is([type="radio"], [type="checkbox"]) { flex: 0 0 18px; width: 18px; min-width: 18px; max-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; }
body.builder-active .builder-inspector .color-audit-scope label { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; font-weight: 500; }
/* Aucun champ tant qu’aucun bloc n’est choisi : on dit quoi faire. */
body.builder-active #sectionContentFields:empty { display: block; padding: 4px 0; border: 0; border-radius: 0; background: transparent; }
body.builder-active #sectionContentFields:empty::before { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; content: "Cliquez sur un bloc de la page, ou sur une ligne de « Ma page », pour modifier ses textes et ses images."; }
body.builder-active .builder-inspector details.advanced { display: grid; gap: 12px; padding: 0 12px; border-radius: var(--radius); }
body.builder-active .builder-inspector details.advanced[open] { padding-bottom: 12px; }
body.builder-active .builder-inspector details.advanced > summary { font-size: 13px; }
body.builder-active .builder-inspector .interaction-effects { margin-top: 2px; }
body.builder-active .interaction-inspector legend,
body.builder-active .interaction-preview > span { color: var(--muted); font-size: 12px; font-weight: 500; }
body.builder-active .interaction-inspector .segmented button { font-size: 12px; }
body.builder-active .interaction-preview button { font-size: 12px; }
body.builder-active .builder-inspector .conversion-inspector,
body.builder-active .builder-inspector .button-action-inspector { border-radius: var(--radius); }
body.builder-active .builder-inspector .conversion-inspector p { font-size: 12.5px; }
body.builder-active .color-audit strong { font-size: 13px; font-weight: 600; }
body.builder-active .color-audit small,
body.builder-active .color-audit-result p,
body.builder-active .color-audit-scope label,
body.builder-active .responsive-scope small,
body.builder-active #generatedResponsiveFields label { font-size: 12px; }
body.builder-active .color-audit-scope legend { font-size: 12px; }
body.builder-active .data-step-heading p { font-size: 12.5px; }

/* Onglet IA */
body.builder-active .inspector-ai-panel { display: grid; gap: 12px; }
body.builder-active .inspector-ai-panel[hidden] { display: none; }
body.builder-active .ai-intro {
  display: grid;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
/* Petite marque « IA » : l’étiquette garde son violet, en rectangle discret (pas de pilule). */
body.builder-active .ai-tag { border-radius: var(--radius-xs); }
body.builder-active .ai-intro .ai-tag { justify-self: start; }
body.builder-active .ai-intro p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
body.builder-active .ai-scope-controls { gap: 2px; margin: 0; padding: 2px; border: 0; border-radius: var(--radius-sm); background: var(--surface-3); }
body.builder-active .ai-scope-controls button { min-height: 32px; border: 0; border-radius: var(--radius-xs); color: var(--muted); background: transparent; font-size: 12.5px; font-weight: 500; }
body.builder-active .builder-inspector .ai-scope-controls button.active { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }
body.builder-active .drawing-controls { padding: 0 0 12px; }
body.builder-active .drawing-controls > span { color: var(--muted); font-size: 12.5px; font-weight: 500; }
body.builder-active .ink-swatch.active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue); }
body.builder-active #penWidth { accent-color: var(--blue); }
body.builder-active .ai-prompt-block { padding: 0 0 14px; }
body.builder-active .ai-prompt-block label { font-size: 13px; font-weight: 500; }
body.builder-active .ai-prompt-block textarea { min-height: 104px; border-radius: var(--radius-sm); background: var(--surface); font-size: 13.5px; }
body.builder-active .ai-prompt-block textarea:focus-visible { border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 0; }
body.builder-active .prompt-hint { font-size: 12px; }
body.builder-active .prompt-suggestions button {
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 500;
}
body.builder-active .prompt-suggestions button:hover { color: var(--ink); border-color: var(--line-hover); background: var(--surface-2); }
body.builder-active .prompt-actions { justify-content: space-between; }
body.builder-active .ai-result { padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
body.builder-active .ai-result-heading > span:first-child { color: var(--ink); font-weight: 600; }
body.builder-active .change-row { font-size: 13px; }
body.builder-active .change-row svg { color: var(--muted); }
body.builder-active .inspector-soon { display: grid; gap: 8px; margin-top: 4px; padding: 12px 0 0; border-top: 1px solid var(--line); }
body.builder-active .inspector-soon p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
body.builder-active .inspector-soon p strong { color: var(--ink); }
body.builder-active .inspector-soon > div { display: flex; flex-wrap: wrap; gap: 6px; }
body.builder-active .inspector-soon .chip { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; }

/* -------------------------------------------------------------------------
   Demander à l’IA : la fenêtre posée sur la page
   ------------------------------------------------------------------------- */
body.builder-active .ai-command-panel {
  bottom: 22px;
  width: min(560px, calc(100% - 64px));
  padding: 10px 12px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
}
body.builder-active .ai-command-head { min-height: 30px; margin: 0 0 8px; }
body.builder-active .ai-command-head > span { gap: 8px; min-width: 0; }
body.builder-active .ai-command-head > span > svg { width: 17px; height: 17px; color: var(--violet); }
body.builder-active .ai-command-head strong { color: var(--ink); font-size: 13.5px; font-weight: 600; }
body.builder-active .ai-command-head small {
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
body.builder-active .ai-command-head button { width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; }
body.builder-active .ai-command-head button:hover { color: var(--ink); background: var(--surface-2); }
body.builder-active .ai-command-head button.active { color: var(--ink); border-color: transparent; background: var(--surface-3); }
body.builder-active .ai-command-input {
  height: 48px;
  padding: 4px 5px 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
body.builder-active .ai-command-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
body.builder-active .ai-command-input > svg { width: 18px; height: 18px; color: var(--muted); }
body.builder-active .ai-command-input input { color: var(--ink); font: inherit; font-size: 14px; }
body.builder-active .ai-command-input input:focus-visible { outline: none; }
body.builder-active .ai-command-input input::placeholder { color: var(--muted); }
body.builder-active .ai-command-input button { width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--btn-primary-fg); background: var(--btn-primary-bg); box-shadow: none; }
body.builder-active .ai-command-input button:hover { background: var(--btn-primary-bg-hover); }
body.builder-active .ai-command-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
body.builder-active .ai-command-actions button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
}
body.builder-active .ai-command-actions button:hover { background: var(--surface-2); }
body.builder-active .ai-command-actions button svg { width: 15px; height: 15px; }
body.builder-active .ai-command-actions button.apply { order: 3; color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); background: var(--btn-primary-bg); }
body.builder-active .ai-command-actions button.apply:hover { border-color: var(--btn-primary-bg-hover); background: var(--btn-primary-bg-hover); }
body.builder-active .ai-command-actions #floatingCancel { order: 1; border-color: transparent; color: var(--muted); background: transparent; }
body.builder-active .ai-command-actions #floatingVariant { order: 2; }
body.builder-active .ai-command-status { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.4; }
/* Proposition IA : avant / après lisible avant « Appliquer ». */
body.builder-active .ai-proposal-preview { display: grid; gap: 8px; margin-top: 10px; font-size: 13px; }
body.builder-active .ai-proposal-preview[hidden] { display: none; }
body.builder-active #floatingAiPreview { max-height: min(40vh, 320px); overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--canvas); }
body.builder-active .ai-command-panel.docked #floatingAiPreview { display: none; }
body.builder-active .ai-preview-meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
body.builder-active .ai-change-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.builder-active .ai-change { display: grid; gap: 4px; }
body.builder-active .ai-change-target { color: var(--ink); font-size: 12px; font-weight: 600; }
body.builder-active :is(.ai-change-before, .ai-change-after) { display: grid; grid-template-columns: 44px 1fr; gap: 6px; align-items: baseline; line-height: 1.4; overflow-wrap: anywhere; }
body.builder-active :is(.ai-change-before, .ai-change-after) small { color: var(--muted); font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.builder-active .ai-change-before > span { color: var(--muted); text-decoration: line-through; }
body.builder-active .ai-change-after > span { color: var(--ink); font-weight: 500; }
body.builder-active .ai-change-after small { color: var(--ink); }
body.builder-active .ai-change-more { color: var(--muted); font-size: 12px; }
body.builder-active .ai-why summary { color: var(--blue-strong); font-size: 12.5px; font-weight: 500; cursor: pointer; }
body.builder-active .ai-why p, body.builder-active .ai-preview-note { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
body.builder-active .ai-command-panel.ai-offline { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
body.builder-active .ai-command-panel.docked { width: 100%; margin: 4px 0 14px; transform: none; top: auto; bottom: auto; left: auto; padding: 10px; border-radius: var(--radius); box-shadow: none; backdrop-filter: none; }
body.builder-active .ai-command-panel.docked .ai-command-actions { display: flex; }
body.builder-active .ai-command-panel.docked .ai-command-head strong { white-space: nowrap; }
body.builder-active .ai-command-panel.docked .ai-command-head small { max-width: 90px; }
body.builder-active .ai-command-panel.docked .ai-command-actions button { flex: 1 1 auto; }

/* Analyse en cours */
body.builder-active .ai-analysis-bar {
  bottom: 196px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
body.builder-active .ai-analysis-bar small { color: var(--muted); font-size: 12.5px; }
body.builder-active .ai-analysis-icon { border-radius: 0; color: var(--violet); background: transparent; }
body.builder-active .ai-analysis-cancel { border-color: var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); }
body.builder-active .ai-analysis-cancel:hover { background: var(--surface-2); }
body.builder-active .analysis-meter i { background: var(--ink); }

/* -------------------------------------------------------------------------
   Serveur du site (mode expert) et fenêtres de l’éditeur
   ------------------------------------------------------------------------- */
body.builder-active .backend-workspace { border-top: 1px solid var(--line); }
.builder-dialog .modal-header .kicker { display: none; }
.builder-dialog-body > label { color: var(--ink); font-size: 13px; font-weight: 500; }
.builder-dialog-body label small { font-size: 12.5px; }
.builder-dialog-body input { border-radius: var(--radius-sm); font-size: 14px; }
.navigation-editor { display: grid; gap: 8px; }

/* -------------------------------------------------------------------------
   Largeurs intermédiaires
   ------------------------------------------------------------------------- */
@media (max-width: 1500px) {
  body.builder-active .builder-brand-label,
  body.builder-active .builder-toolbar .bt-devices span { display: none; }
  body.builder-active .builder-toolbar .bt-devices button { padding: 0 9px; }
  body.builder-active .builder-brand { padding: 0 8px; }
}
@media (max-width: 1360px) {
  body.builder-active .builder-layout { grid-template-columns: 236px minmax(0, 1fr) 300px; }
  body.builder-active .builder-layout.sections-collapsed { grid-template-columns: 52px minmax(0, 1fr) 300px; }
  body.builder-active .builder-layout.inspector-collapsed { grid-template-columns: 236px minmax(0, 1fr) 52px; }
  /* L’ancienne règle masquait les libellés des sections à cette largeur. */
  body.builder-active .builder-panel-title > span,
  body.builder-active .builder-sections > .section-item span,
  body.builder-active .builder-sections > .add-section span { display: revert; }
  body.builder-active .builder-panel-title > span { display: grid; }
  body.builder-active .builder-sections > .section-item > span:not(.page-structure-actions, .native-section-actions) { display: -webkit-box; }
  body.builder-active .builder-sections > .section-item :is(.page-structure-actions, .native-section-actions) { display: flex; }
  body.builder-active .builder-sections > .section-item > svg:last-child:not(:first-of-type) { display: block; }
  body.builder-active .builder-sections > .add-section { font-size: 13.5px; }
  body.builder-active .builder-panel-title { justify-content: space-between; }
  body.builder-active .builder-toolbar .save-state { display: none; }
  body.builder-active .builder-context { max-width: 150px; }
  body.builder-active .page-manager select { width: 132px; }
}
@media (max-width: 1240px) and (min-width: 921px) {
  body.builder-active .builder-toolbar { flex-wrap: nowrap; padding: 8px 10px; }
  body.builder-active [data-open-publish] { position: static; }
  body.builder-active .builder-context { display: none; }
  body.builder-active .builder-toolbar .bt-actions .button.compact > span { display: none; }
  body.builder-active .builder-toolbar .bt-actions .button.compact:not([data-open-publish]) { width: 38px; min-width: 38px; padding: 0; justify-content: center; font-size: 0; }
  body.builder-active .builder-toolbar .bt-actions .bt-advanced > summary .bt-caret { display: none; }
}

/* -------------------------------------------------------------------------
   Tablette et téléphone
   ------------------------------------------------------------------------- */
@media (max-width: 920px) {
  body.builder-active .builder-layout,
  body.builder-active .builder-layout.inspector-collapsed { grid-template-columns: clamp(190px, 32vw, 230px) minmax(0, 1fr); }
  body.builder-active .builder-layout.sections-collapsed,
  body.builder-active .builder-layout.sections-collapsed.inspector-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
  body.builder-active .builder-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    min-height: 0;
    padding: 6px 8px;
  }
  body.builder-active .builder-toolbar .topbar-spacer { display: none; }
  body.builder-active .builder-toolbar .bt-where { flex: 1 1 auto; }
  body.builder-active .builder-toolbar .bt-actions { margin-left: auto; }
  body.builder-active .builder-context { display: none; }
  body.builder-active .builder-brand .brand-mark,
  body.builder-active .builder-brand-label { display: none; }
  body.builder-active .builder-brand { min-width: 40px; padding: 0 9px; }
  body.builder-active .builder-toolbar .bt-actions .button.compact > span { display: none; }
  body.builder-active .builder-toolbar .bt-actions .button.compact:not([data-open-publish]) { width: 40px; min-width: 40px; padding: 0; justify-content: center; font-size: 0; }
  body.builder-active .builder-toolbar .bt-advanced > summary .bt-caret { display: none; }
  body.builder-active .builder-toolbar .bt-devices span { display: none; }
  body.builder-active .builder-toolbar .tool-group,
  body.builder-active .builder-toolbar .bt-history { padding-left: 6px; }
  body.builder-active .builder-sections > .section-item::before { display: none; }
  body.builder-active .builder-sections > .section-item { grid-template-columns: 18px minmax(0, 1fr); }
  body.builder-active .component-library .library-kinds button { white-space: normal; line-height: 1.2; }
  body.builder-active .builder-panel-title { position: static; min-height: 0; margin: 0 0 6px; padding: 6px 0; border: 0; }
  body.builder-active .builder-inspector > .inspector-panel-head { position: sticky; top: 0; height: 52px; min-height: 0; margin: 0; }
  body.builder-active .builder-inspector > .inspector-tabs { top: 52px; margin: 0; padding: 0 6px; }
  body.builder-active .builder-inspector > .inspector-tabs button { flex: 1 0 auto; font-size: 12.5px; }
  body.builder-active .builder-inspector { padding: 0; }
  body.builder-active .ai-command-panel { bottom: 62px; width: min(520px, calc(100% - 20px)); }
  body.builder-active .ai-analysis-bar { bottom: 214px; }
  body.builder-active .canvas-stage { padding-bottom: 210px; }
}

@media (max-width: 720px) {
  .builder-small-screen-note:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    background: var(--canvas);
    font-size: 12.5px;
    line-height: 1.4;
  }
  .builder-small-screen-note svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
}

@media (max-width: 640px) {
  body.builder-active .builder-layout,
  body.builder-active .builder-layout.sections-collapsed,
  body.builder-active .builder-layout.inspector-collapsed,
  body.builder-active .builder-layout.sections-collapsed.inspector-collapsed { grid-template-columns: minmax(0, 1fr); }
  /* Ligne 1 : quitter, page, Publier. Ligne 2 : affichage, historique, outils, aperçu, photos. */
  body.builder-active .builder-toolbar { flex-wrap: wrap; gap: 6px 4px; max-height: none; overflow: visible; }
  body.builder-active .builder-toolbar .bt-actions { display: contents; }
  body.builder-active .builder-toolbar .bt-where { order: 1; flex: 1 1 60%; min-width: 0; gap: 4px; }
  body.builder-active .builder-toolbar [data-open-publish] { order: 2; }
  body.builder-active .builder-toolbar .bt-view { display: contents; }
  body.builder-active .builder-toolbar .bt-view > * { order: 3; }
  body.builder-active .builder-toolbar :is(.builder-preview-button, #openMediaLibrary, .bt-advanced) { order: 4; }
  body.builder-active .builder-toolbar #builderNetworkState { order: 5; flex: 1 1 100%; justify-content: center; }
  body.builder-active .builder-toolbar .bt-actions .button.compact:not([data-open-publish]) { width: 36px; min-width: 36px; min-height: 36px; }
  body.builder-active .page-manager { flex: 1 1 auto; min-width: 0; height: 40px; }
  body.builder-active .page-manager select { width: auto; min-width: 0; flex: 1 1 auto; }
  body.builder-active .builder-brand { min-width: 36px; padding: 0 6px; }
  body.builder-active .builder-toolbar .tool-button { width: 36px; min-width: 36px; height: 36px; }
  body.builder-active .builder-toolbar .bt-devices { min-height: 36px; padding: 2px; }
  body.builder-active .builder-toolbar .bt-devices button { min-height: 30px; padding: 0 7px; }
  body.builder-active .builder-toolbar .tool-group,
  body.builder-active .builder-toolbar .bt-history { padding-left: 0; border-left: 0; }
  body.builder-active .bt-menu-list { position: fixed; top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; min-width: 0; max-width: none; }
  body.builder-active .bt-menu-list.bt-menu-right { right: 8px; left: 8px; }

  /* Panneau des blocs : une bande compacte, les libellés restent lisibles. */
  body.builder-active .builder-sections,
  body.builder-active .builder-layout.sections-collapsed .builder-sections { gap: 6px; padding: 8px; }
  body.builder-active .builder-sections > .section-item {
    flex: 1 1 calc(50% - 6px);
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 6px 8px;
  }
  body.builder-active .builder-sections > .section-item > span:not(.page-structure-actions, .native-section-actions) { display: -webkit-box; font-size: 13px; }
  body.builder-active .builder-sections > .section-item.active { flex-basis: 100%; }
  body.builder-active .builder-sections > .section-item.active :is(.page-structure-actions, .native-section-actions) button,
  body.builder-active .builder-sections > .section-item.active .native-section-actions [role="button"] { width: 40px; height: 36px; }
  body.builder-active .builder-panel-title { flex: 1 1 100%; }
  body.builder-active .builder-sections > .section-item > svg:last-child:not(:first-of-type) { display: none; }
  body.builder-active .builder-sections > .add-section { flex: 1 1 100%; width: 100%; height: auto; min-height: 44px; font-size: 13.5px; }
  body.builder-active .component-library .library-grid { grid-template-columns: minmax(0, 1fr); }
  body.builder-active .component-library .library-kinds button,
  body.builder-active .component-library .library-filters button { width: auto; height: auto; }
  body.builder-active .canvas-stage { padding: 10px 8px 200px; }
  body.builder-active .site-frame { border-radius: 8px; }
  body.builder-active .ai-command-panel { width: calc(100% - 16px); bottom: 62px; padding: 8px 10px; border-radius: var(--radius-xl); }
  body.builder-active .ai-command-actions button { min-height: 36px; font-size: 12.5px; }
  body.builder-active .inspector-tabs button { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  body.builder-active .bt-menu .bt-caret { transition: none; }
}

/* Choix de formulaire : le catalogue produit des cartes avec un aperçu réel,
   mais les contrôles de cet aperçu restent inertes et ne peuvent pas être soumis. */
body.builder-active .builder-sections > .add-form-entry {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  margin: 8px 0 2px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
body.builder-active .builder-sections > .add-form-entry:hover { border-color: var(--line-hover); color: var(--ink); background: var(--surface-2); }
body.builder-active .builder-sections > .add-form-entry svg { width: 16px; height: 16px; color: var(--muted); }
body.builder-active .builder-sections > .add-form-entry:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
body.builder-active #view-builder.builder-readonly #openAddFormChooser { display: none !important; }
.add-form-backdrop { z-index: 120; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.add-form-modal {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0,1fr) auto;
  gap: 14px;
  width: min(920px, 100%);
  max-height: min(90dvh, 900px);
  padding: clamp(16px, 3vw, 26px);
  overflow: hidden;
}
.add-form-modal .modal-header { margin: 0; }
.add-form-modal .modal-header p { max-width: 60ch; }
.add-form-guidance { display: grid; grid-template-columns: minmax(150px, .4fr) minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.add-form-guidance label { font-size: 13px; font-weight: 500; }
.add-form-guidance select { min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font: inherit; }
.add-form-guidance small { grid-column: 2; color: var(--muted); font-size: 12px; line-height: 1.45; }
.add-form-publication-note,.add-form-newsletter-note { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); background: var(--canvas); font-size: 12.5px; line-height: 1.5; }
.add-form-publication-note a { display: inline-flex; margin-left: 4px; color: var(--blue); font-weight: 500; text-underline-offset: 3px; }
.add-form-publication-note a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.add-form-newsletter-note { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); background: var(--surface-amber); }
.add-form-loading,.add-form-error { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; align-content: start; color: var(--muted); font-size: 13px; }
.add-form-loading > span:last-child { grid-column: 1 / -1; }
.add-form-skeleton { min-height: 128px; border-radius: var(--radius); background: linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2)); }
.add-form-error { grid-template-columns: 1fr; padding: 16px; border: 1px solid color-mix(in srgb,var(--red) 32%,var(--line)); border-radius: var(--radius); color: var(--ink); background: var(--surface-red); }
.add-form-error span { color: var(--muted); }
.add-form-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; min-height: 0; overflow: auto; padding: 1px 3px 8px 1px; }
.add-form-choice { display: grid; grid-template-rows: 164px auto auto 1fr auto; min-width: 0; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.add-form-choice h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.add-form-choice p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.add-form-preview { position: relative; display: block; min-width: 0; height: 164px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f2f1eb; pointer-events: none; }
.add-form-preview .library-preview { display: block; width: 100%; height: 100%; overflow: hidden; }
.add-form-preview .library-preview-stage { display: block; width: 100%; min-height: 420px; transform: scale(.42); transform-origin: top left; width: 238%; pointer-events: none; }
.add-form-preview .library-preview-stage :is(input,textarea,button,select) { pointer-events: none; }
.add-form-choice .button { width: 100%; min-height: 38px; justify-content: center; }
.add-form-choice.is-incompatible { background: var(--surface-2); }
.add-form-choice.is-incompatible .add-form-preview { filter: grayscale(.65); opacity: .65; }
.add-form-choice .add-form-unavailable { color: var(--red); font-size: 12px; font-weight: 500; }
.add-form-incompatibility { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--red); background: var(--surface-red); font-size: 13px; }
.add-form-modal .modal-actions { justify-content: flex-end; margin: 0; padding: 0; border: 0; }
@media (max-width: 680px) {
  .add-form-modal { grid-template-rows: auto auto auto auto minmax(0,1fr) auto; gap: 11px; width: 100%; max-height: 94dvh; padding: 15px; }
  .add-form-modal .modal-header p { font-size: 13px; }
  .add-form-guidance { grid-template-columns: 1fr; gap: 6px; }
  .add-form-guidance small { grid-column: 1; }
  .add-form-choices { grid-template-columns: 1fr; }
  .add-form-choice { grid-template-columns: minmax(0,1fr); grid-template-rows: 120px auto auto auto auto; }
  .add-form-preview { height: 120px; }
  .add-form-preview .library-preview-stage { transform: scale(.33); width: 303%; }
}
@media (prefers-reduced-motion: reduce) {
  .add-form-skeleton { background: var(--surface-2); }
}

/* -------------------------------------------------------------------------
   Mode simple : l’essentiel seulement (le mode expert garde tout)
   ------------------------------------------------------------------------- */
.add-drawer-button,
.ai-launcher { display: none; }

/* « Ma page » : des lignes compactes ; les actions restent sur la ligne choisie. */
body.mode-simple.builder-active .builder-sections { --ed-row-h: 38px; }
body.mode-simple.builder-active .builder-sections > .section-item { margin-bottom: 4px; padding-block: 4px; }
body.mode-simple.builder-active .builder-panel-title { min-height: 0; }

/* Le grand bouton « Ajouter » */
body.mode-simple.builder-active .builder-sections > .add-drawer-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 8px 0 0;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
body.mode-simple.builder-active .builder-sections > .add-drawer-button:hover { border-color: var(--line-hover); background: var(--surface-2); }
body.mode-simple.builder-active .builder-sections > .add-drawer-button[aria-expanded="true"] { border-color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
body.mode-simple.builder-active .builder-sections > .add-drawer-button svg { width: 16px; height: 16px; }

/* La bibliothèque devient un tiroir, fermé par défaut. */
body.mode-simple.builder-active .builder-sections > .component-library { display: none; }
body.mode-simple.builder-active #view-builder.add-drawer-open .builder-sections > .component-library {
  position: fixed;
  top: var(--add-drawer-top, 60px);
  bottom: 0;
  left: var(--add-drawer-left, 0px);
  z-index: 45;
  display: flex;
  width: min(400px, 100vw);
  margin: 0;
  padding: 16px 18px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 0;
  border-right: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: 0 0 0 100vmax var(--backdrop), var(--shadow-lg);
  animation: ed-drawer-in var(--dur-3) var(--ease-soft);
}
body.mode-simple.builder-active #view-builder.add-drawer-open .builder-sections > .component-library > * { flex-shrink: 0; }
@keyframes ed-drawer-in { from { opacity: 0; } }
body.mode-simple.builder-active .component-library .add-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.mode-simple.builder-active .component-library .add-drawer-head h2 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: var(--tracking-snug); }
body.mode-simple.builder-active .component-library .add-drawer-head .icon-button { display: grid; grid-template-columns: none; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; cursor: pointer; }
body.mode-simple.builder-active .component-library .add-drawer-head .icon-button:hover { background: var(--surface-2); }
body.mode-simple.builder-active .component-library .add-quick { display: grid; gap: 0; }
body.mode-simple.builder-active .component-library .add-quick button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft);
}
body.mode-simple.builder-active .component-library .add-quick button:hover { background: var(--row-hover); }
body.mode-simple.builder-active .component-library .add-quick-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 0; color: var(--muted); background: transparent; }
body.mode-simple.builder-active .component-library .add-quick-icon svg { width: 16px; height: 16px; }
body.mode-simple.builder-active .component-library .add-quick strong { display: block; font-size: 14px; font-weight: 500; }
body.mode-simple.builder-active .component-library .add-quick small { display: block; margin-top: 1px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
body.mode-simple.builder-active .component-library .library-heading { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Barres d’outils des blocs : une seule à la fois, celle du bloc survolé, sinon celle du bloc choisi. */
body.mode-simple.builder-active #siteFrame .dropped-block > .block-actions,
body.mode-simple.builder-active #siteFrame .generated-entry > .generated-entry-actions { display: none; }
body.mode-simple.builder-active #siteFrame .dropped-block:hover > .block-actions,
body.mode-simple.builder-active #siteFrame:not(:has(.dropped-block:hover)) .dropped-block:is(:focus-visible, :has(:focus-visible)) > .block-actions,
body.mode-simple.builder-active #siteFrame:not(:has(.dropped-block:hover, .dropped-block:focus-visible, .dropped-block :focus-visible)) .dropped-block.selected-block > .block-actions { display: flex; }
body.mode-simple.builder-active #siteFrame .generated-entry:hover > .generated-entry-actions,
body.mode-simple.builder-active #siteFrame:not(:has(.generated-entry:hover)) .generated-entry:is(:focus-visible, :has(:focus-visible)) > .generated-entry-actions,
body.mode-simple.builder-active #siteFrame:not(:has(.generated-entry:hover, .generated-entry:focus-visible, .generated-entry :focus-visible)) .generated-entry.selected-section > .generated-entry-actions { display: flex; }

/* Réglages : absents tant que rien n’est choisi ; la page prend toute la largeur. */
body.mode-simple.builder-active #view-builder:not(.has-builder-selection) .builder-inspector { display: none; }
body.mode-simple.builder-active .builder-layout { --ed-sections-w: 252px; }
body.mode-simple.builder-active .builder-layout.sections-collapsed { --ed-sections-w: 52px; }
@media (max-width: 1360px) {
  body.mode-simple.builder-active .builder-layout:not(.sections-collapsed) { --ed-sections-w: 236px; }
}
@media (min-width: 921px) {
  body.mode-simple.builder-active #view-builder:not(.has-builder-selection) .builder-layout { grid-template-columns: var(--ed-sections-w) minmax(0, 1fr) 0; }
  body.mode-simple.builder-active #view-builder.has-builder-selection .builder-inspector { animation: ed-inspector-in var(--dur-3) var(--ease-soft); }
}
@keyframes ed-inspector-in { from { opacity: 0; } }
body.mode-simple.builder-active .builder-inspector > .inspector-panel-head #closeInspector { display: grid; place-items: center; width: 34px; height: 34px; }
body.mode-simple.builder-active .builder-inspector > .inspector-panel-head #closeInspector svg { width: 17px; height: 17px; }

/* Demander à l’IA : repliée en un bouton flottant blanc, dans le coin bas-droit de la page.
   Seule l’icône garde une petite marque violette. */
body.builder-active #canvasStage > .ai-launcher {
  position: fixed;
  right: calc(var(--stage-right-gap, 0px) + 20px);
  bottom: calc(var(--stage-bottom-gap, 0px) + 20px);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-soft);
}
body.builder-active #canvasStage > .ai-launcher:hover { background: var(--surface-2); }
body.builder-active #canvasStage > .ai-launcher:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
body.builder-active #canvasStage > .ai-launcher svg { width: 18px; height: 18px; color: var(--violet); }
/* D3 : fermée par défaut dans tous les modes (Expert compris) : seul le bouton reste visible. */
body.builder-active #canvasStage:has(> .ai-command-panel:is(.ai-open, .ai-busy)) > .ai-launcher,
body.builder-active #canvasStage:not(:has(> .ai-command-panel)) > .ai-launcher { display: none; }
body.builder-active #canvasStage > .ai-command-panel:not(.ai-open, .ai-busy) { display: none; }
body.mode-simple.builder-active #canvasStage > .ai-command-panel {
  position: fixed;
  top: auto !important;
  right: calc(var(--stage-right-gap, 0px) + 20px);
  bottom: calc(var(--stage-bottom-gap, 0px) + 20px) !important;
  left: auto !important;
  width: min(520px, calc(var(--stage-width, 560px) - 40px));
  transform: none !important;
  animation: ed-ai-in var(--dur-2) var(--ease-soft);
}
body.mode-simple.builder-active #canvasStage > .ai-command-panel .ai-command-head { cursor: default; }
@keyframes ed-ai-in { from { opacity: 0; } }
body.builder-active .ai-command-head .ai-command-close { display: grid; place-items: center; }
body.mode-simple.builder-active #canvasStage > .ai-analysis-bar { position: fixed; right: calc(var(--stage-right-gap, 0px) + 20px); bottom: calc(var(--stage-bottom-gap, 0px) + 220px); left: auto; transform: none; }

/* Conseil de démarrage : posé au-dessus de la page, sans la recouvrir. */
/* D3/D8 : dans tous les modes, le conseil est posé dans le flux, au-dessus de la page,
   et c’est le seul conseil affiché (la note « petit écran » s’efface pendant ce temps). */
body.builder-active .canvas-stage:has(> .pc-editor-hint:not([hidden])) { flex-wrap: wrap; align-content: flex-start; }
body.mode-simple.builder-active .canvas-stage { flex-wrap: wrap; align-content: flex-start; }
#view-builder:has(#pcEditorHint:not([hidden])) .builder-small-screen-note { display: none !important; }
body.builder-active #canvasStage > .pc-editor-hint {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: auto;
  order: -1;
  flex: 0 0 100%;
  align-items: center;
  width: 100%;
  margin: 0 0 16px;
  padding: 12px 16px;
  box-shadow: none;
  transform: none;
}
/* Atelier calme : une note plate posée sur le plan de travail, plus de bandeau sombre. */
body.builder-active #canvasStage > .pc-editor-hint { border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); }
/* Pas de pictogramme décoratif : le titre suffit. */
body.builder-active #canvasStage > .pc-editor-hint .pc-editor-hint-icon { display: none; }
body.builder-active #canvasStage > .pc-editor-hint p { color: var(--muted); }
body.builder-active #canvasStage > .pc-editor-hint .button.secondary { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
body.builder-active #canvasStage > .pc-editor-hint .button.secondary:hover { border-color: var(--line-hover); background: var(--surface-2); }
body.builder-active #canvasStage > .pc-editor-hint .button.primary { border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); background: var(--btn-primary-bg); }
body.builder-active #canvasStage > .pc-editor-hint .button.primary:hover { border-color: var(--btn-primary-bg-hover); background: var(--btn-primary-bg-hover); }
body.builder-active #canvasStage > .pc-editor-hint .pc-editor-hint-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; flex: 1 1 auto; min-width: 0; }
body.builder-active #canvasStage > .pc-editor-hint .pc-editor-hint-body > :is(h2, p) { flex: 1 1 100%; }
body.builder-active #canvasStage > .pc-editor-hint h2 { font-size: 15px; font-weight: 600; }
body.builder-active #canvasStage > .pc-editor-hint p { font-size: 13px; line-height: 1.5; }
body.builder-active #canvasStage > .pc-editor-hint .pc-editor-hint-actions { margin-top: 6px; }

@media (max-width: 920px) {
  body.builder-active #canvasStage > .ai-launcher { right: 12px; bottom: 14px; position: fixed; }
  body.builder-active #view-builder.has-builder-selection #canvasStage > .ai-launcher { bottom: 68px; }
  body.mode-simple.builder-active #canvasStage > .ai-command-panel { right: 10px; left: 10px !important; bottom: 62px !important; width: auto; }
  body.mode-simple.builder-active #canvasStage > .ai-analysis-bar { right: 10px; left: 10px; bottom: 230px; }
  body.mode-simple.builder-active .canvas-stage { padding-bottom: 96px; }
  body.mode-simple.builder-active #view-builder.add-drawer-open .builder-sections > .component-library { width: min(440px, 100vw); }
}
@media (max-width: 640px) {
  body.builder-active #canvasStage > .pc-editor-hint { margin-bottom: 10px; padding: 10px 12px; gap: 10px; }
  body.builder-active #canvasStage > .pc-editor-hint .pc-editor-hint-icon { display: none; }
  body.mode-simple.builder-active .builder-sections { gap: 4px; }
  body.mode-simple.builder-active .builder-sections > .section-item { min-height: 38px; margin: 0; padding: 4px 8px; }
  body.mode-simple.builder-active .builder-sections > .add-drawer-button { min-height: 42px; margin-top: 2px; }
  body.mode-simple.builder-active #view-builder.add-drawer-open .builder-sections > .component-library { width: 100vw; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.mode-simple.builder-active #view-builder.add-drawer-open .builder-sections > .component-library,
  body.mode-simple.builder-active #view-builder.has-builder-selection .builder-inspector,
  body.mode-simple.builder-active #canvasStage > .ai-command-panel { animation: none; }
}
body.builder-active #view-builder.add-drawer-open #canvasStage > .ai-launcher { display: none; }

/* ------------------------------------------------------------------------- */
/* Pages toutes prêtes, menu du site, site complet en un clic (sp-)          */
/* ------------------------------------------------------------------------- */
body.builder-active .builder-toolbar .tool-button.sp-pages-button { display: inline-flex; gap: 6px; width: auto; padding: 0 10px 0 8px; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; border-color: transparent; }
body.builder-active .builder-toolbar .tool-button.sp-pages-button svg { width: 16px; height: 16px; }
.sp-backdrop { z-index: 90; }
.sp-modal { display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(860px, calc(100dvh - 36px)); overflow: hidden; border-radius: var(--radius-xl); }
.sp-modal.sp-chooser { width: min(1000px, 100%); }
.sp-modal.sp-skeleton { width: min(720px, 100%); }
.sp-head p { max-width: 62ch; margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.sp-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.sp-body { display: grid; gap: 14px; padding: 18px 22px 20px; overflow-y: auto; }
.sp-actions { flex-wrap: wrap; }
.sp-actions .sp-skeleton-link { margin-right: auto; }
/* Pages cochées rappelées à côté de « Créer ces N pages » (certaines sont plus bas dans la liste). */
.sp-actions .sp-create-list { flex: 1 1 220px; margin-right: auto; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.sp-status { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 13px; }
.sp-status:empty { min-height: 0; }
.sp-note { margin: 0; }
.sp-modal :is(button, input, a):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Choix d’une page : cartes avec la silhouette réelle de la page */
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-cards > li { display: flex; }
.sp-card { display: grid; grid-template-rows: auto 1fr; gap: 10px; width: 100%; padding: 10px 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft); }
.sp-card:hover { border-color: var(--line-hover); background: var(--surface); }
.sp-card:hover .sp-thumb { border-color: var(--line-strong); }
.sp-card[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.sp-card.is-existing .sp-thumb { opacity: .55; }
.sp-card.is-busy { border-color: var(--blue); background: var(--surface-blue); cursor: progress; }
.sp-card-copy { display: grid; align-content: start; gap: 4px; padding: 0 4px; }
.sp-card-copy strong { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.sp-card-copy strong svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.sp-card-copy small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* Précision sous la carte : du texte, pas un badge. */
.sp-card-copy em { justify-self: start; margin-top: 2px; padding: 0; border-radius: 0; color: var(--ink-2); background: none; font-size: 12px; font-style: normal; font-weight: 500; }
.sp-card.is-existing .sp-card-copy em { color: var(--green); background: none; }
.sp-thumb { display: flex; flex-direction: column; gap: 4px; height: 104px; padding: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.sp-thumb i { display: block; flex: none; border-radius: 3px; background: var(--line); }
.sp-thumb i[data-k="hero"] { height: 30px; background: linear-gradient(90deg, #dcdcd8 0 58%, #cbcbc6 58%); }
.sp-thumb i[data-k="grid"] { height: 16px; background: linear-gradient(90deg, var(--line) 0 31%, transparent 31% 34.5%, var(--line) 34.5% 65.5%, transparent 65.5% 69%, var(--line) 69%); }
.sp-thumb i[data-k="steps"] { height: 12px; background: linear-gradient(90deg, var(--line) 0 31%, transparent 31% 34.5%, var(--line) 34.5% 65.5%, transparent 65.5% 69%, var(--line) 69%); opacity: .8; }
.sp-thumb i[data-k="media"] { height: 22px; background: linear-gradient(90deg, #cbcbc6 0 31%, transparent 31% 34.5%, #cbcbc6 34.5% 65.5%, transparent 65.5% 69%, #cbcbc6 69%); }
.sp-thumb i[data-k="quote"] { width: 64%; height: 10px; margin-inline: auto; background: #dcdcd8; }
.sp-thumb i[data-k="cta"] { height: 10px; background: var(--ink); opacity: .45; }
.sp-thumb i[data-k="foot"] { height: 7px; margin-top: auto; background: var(--muted); }
.sp-thumb i[data-k="text"] { height: 12px; background: repeating-linear-gradient(180deg, var(--line) 0 3px, transparent 3px 5px); }
.sp-thumb i[data-k="lines"] { height: 14px; background: repeating-linear-gradient(180deg, var(--line) 0 2px, transparent 2px 5px); }
.sp-thumb i[data-k="form"] { width: 70%; height: 22px; background: repeating-linear-gradient(180deg, #fff 0 5px, transparent 5px 7px), var(--line); border: 1px solid var(--line-strong); }
.sp-thumb i[data-k="calendar"] { height: 24px; background: repeating-linear-gradient(90deg, var(--line) 0 12%, transparent 12% 14.6%); }
.sp-thumb i[data-k="blank"] { flex: 1; border: 1.5px dashed var(--line-strong); background: transparent; }

/* Menu du site */
.sp-preview { display: flex; align-items: center; gap: 18px; min-height: 48px; padding: 10px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.sp-preview strong { flex: none; max-width: 40%; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sp-preview-links { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.sp-preview-links em { color: var(--muted); font-weight: 400; }
.sp-count { margin: 0; color: var(--muted); font-size: 13px; }
.sp-warn { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--line)); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface-amber); font-size: 13px; line-height: 1.45; }
.sp-warn svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--amber); }
/* Pages du menu : des lignes séparées par un filet, pas une carte par page. */
.sp-rows { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.sp-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 4px 6px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.sp-row.is-off { background: transparent; }
.sp-row.is-off .sp-row-main input { color: var(--muted); }
.sp-row.is-dragging { opacity: .45; }
.sp-row.is-target-before { box-shadow: 0 -3px 0 var(--blue); }
.sp-row.is-target-after { box-shadow: 0 3px 0 var(--blue); }
.sp-grip { display: grid; place-items: center; color: var(--subtle); cursor: grab; }
.sp-grip svg { width: 16px; height: 16px; }
.sp-row-main { display: grid; gap: 2px; min-width: 0; }
.sp-row-main input { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink); background: transparent; font: inherit; font-size: 14px; font-weight: 500; transition: border-color var(--dur-2) var(--ease-soft); }
.sp-row-main input:hover { border-color: var(--line); }
.sp-row-main input:focus { border-color: var(--blue); background: var(--surface); }
.sp-row-main small { padding-left: 10px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sp-row-move { display: flex; gap: 2px; }
.sp-row-move .icon-button { width: 36px; height: 36px; border-color: transparent; background: transparent; }
.sp-row-move .icon-button:hover:not(:disabled) { border-color: var(--line); background: var(--surface-2); }
.sp-row-move .icon-button:disabled { opacity: .35; cursor: default; }
.sp-row-move svg { width: 16px; height: 16px; }
.sp-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; color: var(--ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.sp-switch input { position: absolute; width: 36px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
/* Interrupteur : seule forme en pilule de la fenêtre. */
.sp-switch-track { position: relative; flex: none; width: 36px; height: 22px; border-radius: var(--radius-pill); background: #8a8a90; transition: background-color var(--dur-2) var(--ease-soft); }
.sp-switch-track::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; content: ""; transition: transform var(--dur-2) var(--ease-soft); }
.sp-switch input:checked + .sp-switch-track { background: var(--blue); }
.sp-switch input:checked + .sp-switch-track::after { transform: translateX(14px); }
.sp-switch input:focus-visible + .sp-switch-track { outline: 2px solid var(--blue); outline-offset: 2px; }
.sp-switch input:disabled + .sp-switch-track { opacity: .5; }
.sp-add-row { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: transparent; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft); }
.sp-add-row:hover { border-color: var(--line-hover); background: var(--surface-2); }
.sp-add-row svg { width: 16px; height: 16px; color: var(--muted); }

/* Site complet en un clic */
.sp-skeleton fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sp-skeleton legend { margin-bottom: 8px; padding: 0; color: var(--ink); font-size: 13px; font-weight: 600; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { position: relative; }
.sp-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sp-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-2); background: var(--surface); font-size: 13px; font-weight: 500; transition: border-color var(--dur-2) var(--ease-soft); }
.sp-chip:hover span { border-color: var(--line-hover); }
.sp-chip input:checked + span { border-color: var(--ink); color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.sp-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Pages à cocher : des lignes, l’icône de la page en gris, sans pastille. */
.sp-checks ul { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.sp-check label { position: relative; display: grid; grid-template-columns: 22px 20px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; cursor: pointer; transition: background-color var(--dur-2) var(--ease-soft); }
.sp-check label:hover { background: var(--row-hover); }
.sp-check input { position: absolute; top: 50%; left: 12px; width: 22px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.sp-check-box { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #8a8a90; border-radius: var(--radius-xs); color: transparent; background: var(--surface); }
.sp-check-box svg { width: 15px; height: 15px; stroke-width: 3; }
.sp-check input:checked + .sp-check-box { border-color: var(--blue); color: #fff; background: var(--blue); }
.sp-check input:focus-visible + .sp-check-box { outline: 2px solid var(--blue); outline-offset: 2px; }
.sp-check-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 0; color: var(--muted); background: transparent; }
.sp-check-icon svg { width: 16px; height: 16px; }
.sp-check-copy { display: grid; gap: 1px; min-width: 0; }
.sp-check-copy strong { font-size: 14px; font-weight: 500; }
.sp-check-copy small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.sp-check:has(input:checked) label { background: transparent; }
.sp-check.is-done label { cursor: default; background: transparent; }
.sp-check.is-done .sp-check-copy strong { color: var(--muted); }
.sp-check.is-done input:checked + .sp-check-box { border-color: var(--green); background: var(--green); }
.sp-check.is-done .sp-check-icon { color: var(--muted); background: transparent; }
.sp-checks-optional legend { color: var(--muted); }
.sp-progress { height: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.sp-progress-bar, .sp-progress-bar i { display: block; height: 100%; }
.sp-progress-bar i { width: 0; background: var(--blue); transition: width var(--dur-4) var(--ease-soft); }

/* « + Ajouter » : sections conseillées pour la page */
.component-library .sp-suggest { display: grid; gap: 8px; margin: 4px 0 6px; }
.component-library .sp-suggest[hidden] { display: none; }
.component-library .sp-suggest h3 { margin: 6px 0 0; color: var(--ink); font-size: 13px; font-weight: 600; }
/* D6 : deux colonnes seulement à partir de 300 px de panneau ; libellés coupés entre les mots. */
.component-library .sp-suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 147px), 1fr)); gap: 6px; }
.component-library .sp-suggest-grid button span { min-width: 0; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: pretty; }
.component-library .sp-suggest h3 { text-wrap: balance; }
.component-library .sp-suggest-grid button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft); }
.component-library .sp-suggest-grid button:hover { border-color: var(--line-hover); background: var(--surface-2); }
.component-library .sp-suggest-grid button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.component-library .sp-suggest-grid svg { flex: none; width: 16px; height: 16px; color: var(--muted); }

@media (max-width: 640px) {
  .sp-backdrop { padding: 0; place-items: end stretch; }
  .sp-modal, .sp-modal.sp-chooser, .sp-modal.sp-skeleton { width: 100%; max-height: 100dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .sp-body { padding: 14px 16px 16px; }
  .sp-head h2 { font-size: 18px; }
  .sp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sp-card { padding: 8px 8px 12px; }
  .sp-thumb { height: 72px; padding: 6px; gap: 3px; }
  .sp-card-copy small { display: none; }
  .sp-card-copy strong { font-size: 14px; }
  .sp-row { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 2px; padding: 6px 4px 6px 0; }
  .sp-row .sp-switch { grid-column: 2 / -1; justify-self: start; padding-left: 8px; }
  .sp-preview { gap: 10px; }
  .sp-actions .sp-skeleton-link { flex: 1 1 100%; margin: 0; }
  body.builder-active .builder-toolbar .tool-button.sp-pages-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.builder-active .builder-toolbar .tool-button.sp-pages-button { width: 36px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-switch-track, .sp-switch-track::after, .sp-progress-bar i { transition: none; }
}
@media (max-width: 640px) {
  .sp-chips { flex-wrap: nowrap; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; }
  .sp-chip { flex: none; }
}

/* Nom du site renommable en un clic depuis l’en-tête de l’éditeur. */
body.builder-active .builder-site-rename { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; margin: 0 -6px; padding: 0 6px; border: 0; border-radius: var(--radius-xs); color: var(--ink); background: transparent; font: inherit; cursor: pointer; }
body.builder-active .builder-site-rename:hover { background: var(--surface-2); }
body.builder-active .builder-site-rename:focus-visible { outline: none; box-shadow: var(--focus-ring); }
body.builder-active .builder-site-rename svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
body.builder-active .builder-site-rename strong { min-width: 0; }

/* Actions de section : texte visible à côté du symbole. */
.generated-entry-actions button { display: inline-flex; align-items: center; gap: 5px; color: #fff; font: 600 12px/1 var(--font-sans); }
.generated-entry-actions .gea-glyph { font-size: 14px; }
.site-frame.mobile .generated-entry-actions .gea-label { display: none; }
@media (max-width: 760px) { .generated-entry-actions .gea-label { display: none; } }
.generated-site .generated-entry-actions button span.gea-label,
.generated-site .generated-entry-actions button span.gea-glyph { color: #fff; font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.generated-site .generated-entry-actions button span.gea-glyph { font-size: 14px; }
body.builder-active .builder-context { flex-shrink: 0; }
body.builder-active .builder-site-rename { width: max-content; max-width: 190px; }
body.builder-active .builder-site-rename strong { max-width: 160px; }

/* D9 : dans l’éditeur, les notifications se posent au-dessus du bouton « Demander à l’IA »,
   jamais dessus (bouton à 20 px du bas, 46 px de haut ; 68 px du bas avec une sélection sur mobile). */
body.builder-active .toast-region { bottom: 84px; }
@media (max-width: 920px) {
  body.builder-active .toast-region { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
}

/* P3 : « Utiliser » toujours visible dans la photothèque (pas seulement au survol : tablettes). */
#mediaModal .media-card-overlay { opacity: 1; transform: none; }
/* Téléphone et tablette : les réglages d’une sélection recouvrent le coin bas-droit
   (onglet « IA » inclus) ; le bouton flottant s’efface jusqu’à leur fermeture. */
@media (max-width: 920px) {
  body.builder-active #view-builder.has-builder-selection:has(.builder-inspector.open) #canvasStage > .ai-launcher { display: none; }
}

/* Menu du site visiteur : une seule ligne quand les liens tiennent, sinon bouton « Menu »
   (<details>, sans script). data-nav-fit = largeur nécessaire, posée par l’éditeur.
   Styles du site publié : valeurs littérales, aucun token de l’interface. */
.site-navigation { container: site-nav / inline-size; position: relative; }
.site-navigation .site-navigation-links { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; }
.site-navigation .site-navigation-links::-webkit-scrollbar { display: none; }
.site-navigation .site-navigation-links a { flex: none; white-space: nowrap; }
.site-navigation-compact { display: none; }
.site-navigation-compact > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(15, 23, 42, .14); border-radius: 999px; font-weight: 700; line-height: 1; list-style: none; cursor: pointer; user-select: none; transition: background-color .3s cubic-bezier(.32, .72, 0, 1); }
.site-navigation-compact > summary::-webkit-details-marker { display: none; }
.site-navigation-compact > summary:hover, .site-navigation-compact[open] > summary { background: rgba(15, 23, 42, .06); }
.site-navigation-compact > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-navigation-burger { position: relative; display: block; box-sizing: border-box; width: 18px; height: 12px; border-block: 2px solid currentColor; transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.site-navigation-burger i { position: absolute; inset: 3px 0 auto; border-top: 2px solid currentColor; }
.site-navigation-compact[open] .site-navigation-burger { transform: scaleX(.78); }
.site-navigation .site-navigation-drawer { position: absolute; z-index: 20; inset: calc(100% + 6px) 12px auto; display: grid; gap: 2px; max-height: min(70vh, 520px); overflow: auto; padding: 8px; border: 1px solid rgba(15, 23, 42, .1); border-radius: 18px; background: var(--gs-bg, #fff); box-shadow: 0 24px 48px -24px rgba(15, 23, 42, .35); }
.site-navigation .site-navigation-drawer a { display: flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px; }
.site-navigation .site-navigation-drawer a[aria-current="page"] { background: rgba(15, 23, 42, .06); }
@container site-nav (width < 1360px) { .site-navigation[data-nav-fit="1360"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="1360"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 1280px) { .site-navigation[data-nav-fit="1280"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="1280"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 1200px) { .site-navigation[data-nav-fit="1200"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="1200"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 1120px) { .site-navigation[data-nav-fit="1120"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="1120"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 1040px) { .site-navigation[data-nav-fit="1040"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="1040"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 960px) { .site-navigation[data-nav-fit="960"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="960"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 880px) { .site-navigation[data-nav-fit="880"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="880"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 800px) { .site-navigation[data-nav-fit="800"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="800"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 720px) { .site-navigation[data-nav-fit="720"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="720"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 640px) { .site-navigation[data-nav-fit="640"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="640"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 560px) { .site-navigation[data-nav-fit="560"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="560"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 480px) { .site-navigation[data-nav-fit="480"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="480"] > .site-navigation-compact { display: block; } }
@container site-nav (width < 400px) { .site-navigation[data-nav-fit="400"] .site-navigation-links { display: none; } .site-navigation[data-nav-fit="400"] > .site-navigation-compact { display: block; } }
.site-navigation[data-nav-fit] > .site-navigation-compact { margin-left: auto; width: max-content; }

/* -------------------------------------------------------------------------
   Lot B : site complet en un clic, barre de l’éditeur sur petits écrans
   ------------------------------------------------------------------------- */
/* « Menu du site » : aperçu de la barre sur une ligne (les libellés complets sont listés dessous). */
.sp-preview { flex-wrap: nowrap; min-width: 0; }
.sp-preview-links { flex: 1 1 auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
.sp-preview-links > span { flex: none; white-space: nowrap; }

/* Accès « plusieurs pages d’un coup » : une ligne soulignée d’un filet, sans carte ni icône. */
.sp-boost { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
.sp-boost-copy { display: grid; gap: 2px; min-width: 0; }
.sp-boost-copy strong { font-size: 14px; font-weight: 600; }
.sp-boost-copy small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.sp-boost .button { white-space: nowrap; }
.sp-add-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
@media (max-width: 640px) {
  .sp-boost { grid-template-columns: minmax(0, 1fr); }
  .sp-boost .button { justify-content: center; min-height: 44px; }
}

/* Menu « ⋯ » des pages : « Menu du site » n’y figure que lorsque son bouton est replié. */
body.builder-active .bt-menu-list > #siteMenuMenuItem.bt-compact-only { display: none; }


/* Tablette et téléphone : « Publier » reste dans le flux (jamais par-dessus le choix de page). */
@media (max-width: 920px) {
  body.builder-active [data-open-publish] { position: static; }
}

/* Tablette et téléphone : ligne 1 = quitter, page, Publier ; ligne 2 = affichage, annuler, outils, aperçu… */
@media (max-width: 920px) {
  body.builder-active .builder-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; }
  body.builder-active .builder-toolbar::before { content: ""; order: 4; flex: 0 0 100%; height: 0; }
  body.builder-active .builder-toolbar .bt-where { display: contents; }
  body.builder-active .builder-toolbar .bt-where > .builder-brand { order: 1; flex: none; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
  body.builder-active .builder-toolbar .builder-context { display: none; }
  body.builder-active .builder-toolbar .bt-where > .page-manager { order: 2; flex: 1 1 0; min-width: 0; max-width: 420px; width: auto; height: 40px; padding-left: 8px; }
  body.builder-active .builder-toolbar .page-manager select { flex: 1 1 auto; width: auto; min-width: 0; }
  body.builder-active .builder-toolbar .bt-actions { display: contents; }
  body.builder-active .builder-toolbar [data-open-publish] { order: 3; flex: none; min-height: 40px; margin-left: auto; padding: 0 14px; }
  body.builder-active .builder-toolbar .bt-view { order: 5; display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
  body.builder-active .builder-toolbar .bt-view > * { order: 0; }
  body.builder-active .builder-toolbar :is(.canvas-zoom, .save-state, #builderNetworkState) { display: none !important; }
  body.builder-active .builder-toolbar .bt-history { gap: 2px; }
  body.builder-active .builder-toolbar :is(.builder-preview-button, #openMediaLibrary, .bt-advanced) { order: 6; }
  body.builder-active .builder-toolbar .builder-preview-button { margin-left: auto; }
}
@media (max-width: 640px) {
  body.builder-active .builder-toolbar .page-manager :is(#addPageButton, #openSitePages) { display: none; }
  body.builder-active .builder-toolbar .bt-where > .page-manager { max-width: none; }
  body.builder-active .builder-toolbar .tool-group { display: none !important; }
  body.builder-active .bt-menu-list > #siteMenuMenuItem.bt-compact-only { display: flex; }
  /* Liste des sections : une ligne par section, pour laisser la page visible plus haut. */
  body.builder-active .builder-sections > .section-item { min-height: 40px; padding-block: 4px; }
  body.builder-active .builder-sections > .section-item > span:not(.page-structure-actions, .native-section-actions) { -webkit-line-clamp: 1; line-clamp: 1; }
  body.builder-active .builder-sections > .add-section { min-height: 40px; }
}
body.builder-active .bt-menu-list > #duplicatePageButton { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.sp-done { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink-2); background: transparent; font-size: 13px; line-height: 1.5; }
.sp-done strong { color: var(--ink); font-weight: 600; }
.sp-done strong::after { content: " :"; }
.sp-done-icon { display: grid; flex: none; place-items: center; width: 16px; height: 20px; color: var(--green); background: transparent; }
.sp-done-icon svg { width: 16px; height: 16px; stroke-width: 2.25; }

/* Page vide : point de départ dans le plan de travail. Une phrase et des actions,
   sans carte, sans icône ni animation d’entrée. */
body.builder-active #canvasStage > .sp-empty { order: -1; flex: 0 0 100%; display: grid; place-items: center; padding: clamp(16px, 6vh, 64px) 0 20px; }
body.builder-active #canvasStage > .sp-empty[hidden] { display: none; }
.sp-empty-card { display: grid; justify-items: center; gap: 8px; width: min(520px, 100%); padding: clamp(16px, 3vw, 28px) 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.sp-empty-card h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.sp-empty-card p { max-width: 46ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.sp-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.sp-empty-actions .button { min-height: 40px; }
.sp-empty-actions .button svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .sp-empty-actions { display: grid; width: 100%; }
}
body.builder-active #canvasStage:has(> #spEmpty:not([hidden])) > #siteFrame { border-color: transparent; box-shadow: none; }

/* « Ma page » → canevas : la section choisie est entourée et signalée brièvement. */
body.builder-active #siteFrame .generated-entry.selected-section { box-shadow: inset 0 0 0 2px var(--blue); }
body.builder-active #siteFrame .is-located { animation: athern-locate 1.4s var(--ease-out, ease-out) 1; }
@keyframes athern-locate {
  0%, 40% { box-shadow: inset 0 0 0 3px var(--blue), 0 0 0 6px color-mix(in srgb, var(--blue) 25%, transparent); }
  100% { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { body.builder-active #siteFrame .is-located { animation: none; } }

/* Menu replié du site visiteur (canevas et Aperçu) : mêmes règles que /athern-site.css. */
.site-navigation .site-navigation-drawer { width: auto; justify-content: normal; justify-items: stretch; text-align: left; }
.site-navigation .site-navigation-drawer a { justify-content: flex-start; width: auto; margin: 0; white-space: normal; }
.site-navigation:has(> .site-navigation-compact) { align-items: center; }
.site-navigation > strong { min-width: 0; overflow-wrap: anywhere; }
/* Titre du bandeau sur téléphone : aperçu « Téléphone » de l’éditeur et Aperçu ouvert sur un téléphone. */
.site-frame.mobile .generated-entry.generated-hero > h1,
.preview-viewport.mobile .generated-entry.generated-hero > h1 { font-size: var(--responsive-mobile-font-size, min(var(--responsive-font-size, 42px), 36px)); line-height: 1.08; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) {
  .generated-entry.generated-hero > h1 { font-size: var(--responsive-mobile-font-size, min(var(--responsive-font-size, 44px), clamp(30px, 9vw, 42px))); line-height: 1.08; overflow-wrap: break-word; hyphens: auto; }
}
/* Aperçu « Téléphone » : le cadre ne dépasse jamais l’écran (téléphone réel compris). */
.preview-viewport.mobile { width: min(390px, 100%); max-width: 100%; }
.preview-viewport.mobile .site-frame { width: 100%; min-width: 0; }

/* Téléphone : « Demander à l’IA » se réduit à une pastille ronde (icône seule, nom
   accessible conservé) pour ne plus masquer le contenu de la page. */
@media (max-width: 640px) {
  body.builder-active #canvasStage > .ai-launcher { justify-content: center; width: 48px; height: 48px; min-height: 48px; padding: 0; gap: 0; border-radius: var(--radius); }
  body.builder-active #canvasStage > .ai-launcher > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.builder-active #canvasStage > .ai-launcher svg { width: 20px; height: 20px; }
}

/* Mode simple : l’analyse « Harmonie des couleurs » est un outil d’expert. */
body.mode-simple .builder-inspector .color-audit { display: none; }
.page-actions-menu .bt-menu-item[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Pages et site complet : densité et petits écrans (passe 3).
   --------------------------------------------------------------------------- */
/* Menu « ⋯ » fermé : la liste ne garde aucune boîte (elle débordait de l’écran
   sur téléphone pour les outils de mesure et les lecteurs de zone). */
body.builder-active .bt-menu:not([open]) > .bt-menu-list { display: none; }

/* Page vide : le point de départ, puis le conseil, centrés dans la même colonne ;
   plus de cadre blanc de 2 px laissé seul sous le conseil. */
body.builder-active #canvasStage > .sp-empty { padding: clamp(12px, 4vh, 40px) 0 8px; }
body.builder-active #canvasStage:has(> #spEmpty:not([hidden])) > #siteFrame { background: transparent; }
body.builder-active #canvasStage:has(> #spEmpty:not([hidden])) > .pc-editor-hint { flex: 0 1 auto; width: min(560px, 100%); margin: 0 auto 16px; }

@media (max-width: 640px) {
  /* Fenêtres « Pages » : pied compact, deux boutons côte à côte, la liste à créer
     reste lisible dans la fenêtre (elle est rappelée par le bouton). */
  .sp-modal .sp-actions { flex-wrap: nowrap; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .sp-modal .sp-actions .button { flex: 0 0 auto; min-width: 0; width: auto; justify-content: center; white-space: nowrap; }
  .sp-modal .sp-actions .button.primary { flex: 1 1 auto; }
  .sp-modal .sp-actions .sp-create-list { display: none; }
  .sp-modal .sp-actions:has(.sp-skeleton-link) { flex-wrap: wrap; }
  .sp-head p { font-size: 13px; }
}