/* ---------------------------------------------------------------------
   Athern Canvas /v2 — Couche de composants partagés
   Chargée APRÈS toutes les feuilles d’écran : elle unifie boutons,
   puces, onglets, menus, surfaces, en-têtes, fenêtres et notifications
   à partir des tokens définis en tête de styles.css.
   Règle de spécificité : les états (survol, appui…) passent par :where()
   pour que les variantes contextuelles des écrans (fond sombre, etc.)
   gardent toujours la main.
   --------------------------------------------------------------------- */

/* ---------- Base typographique ---------- */
/* La police et l’interlettrage passent par des tokens : l’éditeur (body.builder-active)
   les redéclare avec les anciennes valeurs (Plus Jakarta Sans, word-spacing .04em). */
html, body { font-family: var(--font-sans); word-spacing: var(--word-spacing); }
body { color: var(--ink); }
:where(.view:not(.builder-view), .modal, .auth-card, dialog, .topbar-popover) :where(h1, h2, h3) { letter-spacing: var(--tracking-snug); text-wrap: balance; }
/* Chiffres alignés dans les compteurs, statistiques et tableaux. */
:where(.tabular, .nav-count, .badge, .state, .kpi .value, .metric-value, table td, table th, .score-ring span) { font-variant-numeric: tabular-nums; }
/* Le rendu du site du client garde sa propre typographie. */
:where(.canvas-stage, .library-preview-stage, .generated-site, .ft-brand-page, .ft-serp) { word-spacing: normal; }
:where(button, input, select, textarea) { font-family: inherit; }
::selection { background: var(--blue-soft); color: var(--ink); }
:where(code, kbd, pre, samp) { font-family: var(--font-mono); }

/* Icônes Lucide : trait plus fin, plus calme. */
svg.lucide { stroke-width: 1.5; }

/* Focus clavier visible partout, sans contour au clic. */
:where(a, button, [role="button"], [role="tab"], [role="menuitem"], [role="switch"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Aucun contrôle n’anime en ligne droite : une seule courbe douce pour toute l’interface. */
:where(button, a, [role="button"], [role="tab"], summary) { transition-timing-function: var(--ease-soft); }

/* ---------------------------------------------------------------------
   BOUTONS
   Hauteurs : sm 36 · md 40 · lg 48. Rayon --btn-radius (10 px), survol
   par changement de fond en 160 ms, appui --press-transform (1 px vers
   le bas), anneau de focus visible. Dans l’éditeur, les tokens gelés
   rendent la pilule et l’appui en échelle d’origine.
   --------------------------------------------------------------------- */
.button {
  --btn-h: var(--control-md);
  --btn-px: 18px;
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid var(--btn-bd);
  border-radius: var(--btn-radius);
  color: var(--btn-fg);
  background: var(--btn-bg);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--btn-weight);
  line-height: 1.2;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-2) var(--ease-soft),
    border-color var(--dur-2) var(--ease-soft),
    color var(--dur-2) var(--ease-soft),
    box-shadow var(--dur-3) var(--ease-soft),
    transform var(--dur-2) var(--ease-soft);
}
.button svg { flex: none; width: 17px; height: 17px; }
/* Appui « physique » : léger enfoncement, plus rapide que le survol. */
.button:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]), .button.is-active { transform: var(--press-transform); transition-duration: var(--dur-1); }
/* Focus clavier : anneau net + halo doux, qui suit la forme du bouton. */
.button:is(:focus-visible, .is-focus) { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: var(--btn-focus-halo); }

/* Tailles */
.button.compact, .button.small, .button.sm { --btn-h: var(--control-sm); --btn-px: 14px; font-size: var(--text-sm); gap: 6px; }
.button.compact svg, .button.small svg, .button.sm svg { width: 16px; height: 16px; }
.button.large, .button.lg { --btn-h: var(--control-lg); --btn-px: 24px; font-size: 15px; }

/* Principale : encre pleine, à plat ; au survol le fond s’éclaircit. Dans l’éditeur,
   les tokens gelés (--btn-primary-*) rendent le bleu et le soulèvement d’origine. */
.button.primary {
  --btn-bg: var(--btn-primary-bg);
  --btn-fg: var(--btn-primary-fg);
  --btn-bd: var(--btn-primary-bg);
  box-shadow: var(--shadow-btn-primary);
}
.button.primary:where(:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]), .is-hover) { --btn-bg: var(--btn-primary-bg-hover); --btn-bd: var(--btn-primary-bg-hover); box-shadow: var(--shadow-btn-primary-hover); transform: var(--btn-hover-lift); }

/* Secondaire : surface blanche, filet doux, ombre à peine posée. */
.button.secondary { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-bd: var(--line-strong); box-shadow: var(--shadow-xs); }
.button.secondary:where(:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]), .is-hover) { --btn-bd: var(--line-hover); --btn-bg: var(--surface-2); box-shadow: var(--shadow-sm); }

/* Discrète : sans fond tant qu’on ne la survole pas. Pour les actions de second rang répétées. */
.button.ghost { --btn-bg: transparent; --btn-fg: var(--ink-2); --btn-bd: transparent; box-shadow: none; }
.button.ghost:where(:hover:not(:disabled, [aria-disabled="true"]), .is-hover) { --btn-bg: var(--surface-3); --btn-fg: var(--ink); }
.button.ghost > svg:first-child { color: var(--muted); transition: color var(--dur-2) var(--ease-soft); }
.button.ghost:where(:hover:not(:disabled, [aria-disabled="true"]), .is-hover) > svg:first-child { color: currentColor; }

/* IA : violet, réservé aux actions qui sollicitent l’assistant. */
.button.ai { --btn-bg: var(--violet); --btn-fg: #fff; --btn-bd: var(--violet); box-shadow: 0 1px 2px rgba(82, 54, 184, .18), 0 6px 16px -6px rgba(99, 69, 208, .5), inset 0 1px 0 rgba(255, 255, 255, .14); }
.button.ai:where(:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]), .is-hover) { --btn-bg: var(--violet-strong); --btn-bd: var(--violet-strong); box-shadow: 0 2px 4px rgba(82, 54, 184, .16), 0 12px 24px -10px rgba(99, 69, 208, .55), inset 0 1px 0 rgba(255, 255, 255, .14); transform: translateY(-1px); }

/* Destructrices : rouge plein pour confirmer, texte rouge pour proposer. */
.button.danger, .button.ag-danger, .button.fo-danger { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); box-shadow: 0 6px 16px -8px rgba(194, 47, 71, .55); }
.button:is(.danger, .ag-danger, .fo-danger):where(:hover:not(:disabled, [aria-disabled="true"]), .is-hover) { --btn-bg: var(--red-strong); --btn-bd: var(--red-strong); }
.button.secondary.danger, .button.fo-danger-text, .button.ag-danger-text, .button.ghost.danger {
  --btn-bg: transparent; --btn-fg: var(--red); --btn-bd: transparent; box-shadow: none;
}
.button.secondary.danger { --btn-bg: var(--surface); --btn-bd: #efc3cb; }
.button:is(.secondary.danger, .danger-outline, .fo-danger-text, .ag-danger-text, .ghost.danger):where(:hover:not(:disabled), .is-hover) { --btn-bg: var(--surface-red); --btn-fg: var(--red-strong); }

/* Désactivé : gris neutre, sans ombre ni relief — impossible à confondre avec une variante claire. */
.button:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) {
  --btn-bg: var(--surface-3);
  --btn-fg: var(--subtle);
  --btn-bd: var(--line);
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.button.ghost:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { --btn-bg: transparent; --btn-bd: transparent; }
.button:is(:disabled, [aria-disabled="true"]) > svg:last-child { background: transparent !important; }
/* Chargement */
.button[aria-busy="true"] { cursor: progress; opacity: 1; transform: none; }
.button[aria-busy="true"]::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: .85;
  animation: ds-spin .8s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Flèche finale « bouton dans le bouton » : l’icône vit dans son propre cercle. */
.button:is(.primary, .ai) > svg:last-child:is(.lucide-arrow-right, .lucide-arrow-up-right, .lucide-chevron-right, .lucide-move-right) {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin-right: calc(var(--btn-px) * -1 + 6px);
  padding: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: transform var(--dur-3) var(--ease-soft), background-color var(--dur-2) var(--ease-soft);
}
.button.compact:is(.primary, .ai) > svg:last-child:is(.lucide-arrow-right, .lucide-arrow-up-right, .lucide-chevron-right, .lucide-move-right) { width: 26px; height: 26px; padding: 5px; margin-right: calc(var(--btn-px) * -1 + 5px); }
.button:is(.primary, .ai):where(:hover:not(:disabled), .is-hover) > svg:last-child:is(.lucide-arrow-right, .lucide-chevron-right, .lucide-move-right) { transform: translateX(2px); background: rgba(255, 255, 255, .26); }
.button:is(.primary, .ai):where(:hover:not(:disabled), .is-hover) > svg:last-child.lucide-arrow-up-right { transform: translate(1px, -1px) scale(1.05); background: rgba(255, 255, 255, .26); }
.button.secondary > svg:last-child:is(.lucide-arrow-right, .lucide-chevron-right) { transition: transform var(--dur-3) var(--ease-soft); }
.button.secondary:where(:hover, .is-hover) > svg:last-child:is(.lucide-arrow-right, .lucide-chevron-right) { transform: translateX(2px); }

/* Bouton d’outil avec libellé (barre de l’éditeur) */
.tool-button:has(> span:not(.sr-only, .visually-hidden)) { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 12px; white-space: nowrap; }
.tool-button:has(> span:not(.sr-only, .visually-hidden)) svg { width: 16px; height: 16px; flex: none; }


/* ---------------------------------------------------------------------
   BOUTONS-ICÔNES
   --------------------------------------------------------------------- */
.icon-button, .ft-icon-btn { border-radius: var(--icon-btn-radius); }
.tool-button { border-radius: var(--radius-sm); }
:where(.icon-button, .tool-button, .ft-icon-btn) {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft), transform var(--dur-1) var(--ease-soft);
}
.icon-button:where(:hover:not(:disabled), .is-hover), .tool-button:where(:hover:not(:disabled), .is-hover), .ft-icon-btn:where(:hover:not(:disabled), .is-hover) { color: var(--ink); border-color: var(--line-strong); background: var(--surface-3); }
.icon-button:where(:active:not(:disabled)), .tool-button:where(:active:not(:disabled)), .ft-icon-btn:where(:active:not(:disabled)) { transform: var(--press-transform); }
body.builder-active :is(.icon-button, .tool-button, .ft-icon-btn):where(:active:not(:disabled)) { transform: scale(.95); }
.icon-button:is(:focus-visible, .is-focus), .tool-button:focus-visible, .ft-icon-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.icon-button:is(:disabled, [aria-disabled="true"]), .tool-button:disabled, .ft-icon-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.icon-button.danger, .ft-icon-btn.danger { color: var(--red); }
.icon-button.danger:where(:hover:not(:disabled), .is-hover), .ft-icon-btn.danger:where(:hover:not(:disabled), .is-hover) { color: var(--red-strong); border-color: #efc3cb; background: var(--surface-red); }
.tool-button.active, .tool-button[aria-pressed="true"] { color: var(--blue-strong); background: var(--surface-blue); }

/* ---------------------------------------------------------------------
   PUCES (filtres, suggestions, exemples)
   --------------------------------------------------------------------- */
.chip, .pc-chip, .pc-quick-chips button, .rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--control-sm);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft), transform var(--dur-1) var(--ease-soft);
}
.pc-quick-chips button { min-height: var(--control-md); font-size: var(--text-md); }
.chip:where(:hover, .is-hover), .pc-chip:where(:hover, .is-hover), .pc-quick-chips button:where(:hover, .is-hover), .rl-chip:where(:hover, .is-hover) { border-color: var(--line-hover); color: var(--ink); background: var(--surface-2); }
.chip:where(:active), .pc-chip:where(:active), .pc-quick-chips button:where(:active), .rl-chip:where(:active) { transform: scale(.98); }
.chip:is(:focus-visible, .is-focus), .pc-chip:focus-visible, .pc-quick-chips button:focus-visible, .rl-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chip:is(.active, [aria-pressed="true"], [aria-selected="true"]), .rl-chip:is(.active, [aria-pressed="true"]), .pc-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  color: var(--blue-strong);
  background: var(--surface-blue);
}
.chip:disabled, .pc-chip:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   COMMUTATEURS SEGMENTÉS
   --------------------------------------------------------------------- */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--segmented-radius);
  background: var(--surface-3);
}
.segmented button {
  min-height: 32px;
  border-radius: var(--segmented-item-radius);
  color: var(--muted);
  font-weight: 650;
  transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
.segmented button:where(:hover:not(.active, [aria-pressed="true"], [aria-selected="true"])) { color: var(--ink); }
.segmented button:is(.active, [aria-pressed="true"], [aria-selected="true"]) { color: var(--ink); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 8px -2px rgba(16, 24, 40, .08); }
.segmented button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Menu latéral clair : même dessin que partout ailleurs. */
.sidebar .segmented { border-color: var(--line); background: var(--surface-3); }
.sidebar .segmented button.active { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------------
   ONGLETS
   --------------------------------------------------------------------- */
.tabs, .rl-tabs, .backend-tabs { gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button, .rl-tab, .backend-tabs button {
  position: relative;
  min-height: 44px;
  border-bottom: 0;
  color: var(--muted);
  font-weight: 650;
  transition: color var(--dur-2) var(--ease-soft);
}
.tabs button::after, .rl-tab::after, .backend-tabs button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--blue);
  transform: scaleX(0);
  transition: transform var(--dur-3) var(--ease-soft);
}
.tabs button:where(:hover, .is-hover), .rl-tab:where(:hover, .is-hover), .backend-tabs button:where(:hover, .is-hover) { color: var(--ink); }
.tabs button:is(.active, [aria-selected="true"]), .rl-tab[aria-selected="true"], .backend-tabs button.active { color: var(--blue-strong); border-bottom-color: transparent; }
.tabs button:is(.active, [aria-selected="true"])::after, .rl-tab[aria-selected="true"]::after, .backend-tabs button.active::after { transform: scaleX(1); }
.tabs button:where(:focus-visible), .rl-tab:where(:focus-visible), .backend-tabs button:where(:focus-visible) { outline: 2px solid var(--blue); outline-offset: -4px; border-radius: var(--radius-sm); }

/* Onglets en pilules (comptes) */
.cp-tabs { padding: 4px; border-color: var(--line); border-radius: var(--radius-pill); background: var(--surface-3); }
.cp-tabs button { border-radius: var(--radius-pill); font-weight: 650; transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft); }
.cp-tabs button[aria-selected="true"] { box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 8px -2px rgba(16, 24, 40, .08); }

/* Onglets latéraux des réglages */
.settings-nav button { border-radius: var(--radius-pill); font-weight: 600; transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft); }
.settings-nav button.active { font-weight: 700; }

/* ---------------------------------------------------------------------
   ÉLÉMENTS DE MENU
   --------------------------------------------------------------------- */
.popover-link, .bt-menu-item, .project-option, .popover-action {
  border-radius: 10px;
  transition: background-color var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft);
}
.popover-link:where(:hover, .is-hover), .project-option:where(:hover, .is-hover), .popover-action:where(:hover, .is-hover) { background: var(--surface-3); }
.popover-link.legacy-link { border-radius: 0; }
.popover-link.logout-link:where(:hover, .is-hover) { background: var(--surface-red); }
.command-results button { border-radius: var(--radius); }

/* ---------------------------------------------------------------------
   LIENS EN FORME DE BOUTON
   --------------------------------------------------------------------- */
.ft-link-button, .rl-link, .cr-link, .pc-link, .auth-inline-link, .generated-link {
  color: var(--blue-strong);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-2) var(--ease-soft), text-decoration-color var(--dur-2) var(--ease-soft);
}
.ft-link-button:where(:hover, .is-hover), .rl-link:where(:hover, .is-hover), .cr-link:where(:hover, .is-hover), .pc-link:where(:hover, .is-hover), .auth-inline-link:where(:hover, .is-hover), .generated-link:where(:hover, .is-hover) { color: var(--ink); text-decoration-color: currentColor; }
.ft-link-button:where(:focus-visible), .rl-link:where(:focus-visible), .cr-link:where(:focus-visible), .pc-link:where(:focus-visible), .auth-inline-link:where(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; box-shadow: none; }
.cp-danger-link { color: var(--red) !important; }

/* Liens d’action isolés (hors phrase) : une vraie cible de 32 px au pointeur fin. */
:is(.ft-link-button, .rl-link, .cr-link, .pc-link):not(p *, li *, td *, label *) { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------------------------------------------------------------------
   CIBLES DISCRÈTES SANS DÉCALAGE
   Les petits déclencheurs placés dans le texte (termes du glossaire, « Pourquoi ? »,
   adresses) gagnent une zone de clic de 32 px par un rembourrage vertical compensé
   par une marge négative : la mise en page ne bouge pas d’un pixel.
   --------------------------------------------------------------------- */
.why, button.why { min-height: 32px; margin-block: -7px; padding-block: 0; border-radius: var(--radius-sm); }
button:is(.term, .cr-term) {
  display: inline-block;
  padding-inline: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: help;
  border-bottom: 0;
  text-decoration: underline dotted;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  line-height: inherit;
}
button:is(.term, .cr-term):hover { color: var(--blue-strong); }
:where(.cr-url, .fo-room a, .fo-site-card .ft-small > a) { display: inline-block; padding-block: 8px; margin-block: -8px; }
.rl-card-open { display: grid; padding-block: 7px; margin-block: -7px; }
button:where(.term, .cr-term)[class] { padding-block: 7px; margin-block: -7px; }
p > button.ft-link-button { display: inline-block; padding-block: 7px; margin-block: -7px; line-height: inherit; }
/* Au doigt : 44 px de zone utile, toujours sans décaler le texte. */
@media (max-width: 860px), (pointer: coarse) {
  button:where(.term, .cr-term)[class], p > button.ft-link-button, :where(.cr-url, .fo-room a, .fo-site-card .ft-small > a) { padding-block: 13px; margin-block: -13px; }
}
/* Petites actions d’icône des cartes (domaine connecté, médias) : 32 px au lieu de 28. */
:is(.connected-domain, .media-card-actions) .icon-button { width: 32px; height: 32px; }

/* ---------------------------------------------------------------------
   CARTES À CHOIX
   --------------------------------------------------------------------- */
.choice {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft), transform var(--dur-1) var(--ease-soft);
}
.choice:where(:hover:not(:disabled), .is-hover) { border-color: #b6c6ea; box-shadow: var(--shadow); }
.choice:where(:active:not(:disabled)) { transform: scale(.99); }
.choice:is(.selected, [aria-pressed="true"], [aria-checked="true"]) { border-color: var(--blue); background: var(--surface-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }

/* ---------------------------------------------------------------------
   CHAMPS
   --------------------------------------------------------------------- */
:where(.view:not(.builder-view), .modal, .auth-card, dialog) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  border-color: var(--line-strong);
  border-radius: var(--field-radius);
  transition: border-color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
:where(.view:not(.builder-view), .modal, .auth-card, dialog) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):hover { border-color: var(--line-hover); }
:where(.view:not(.builder-view), .modal, .auth-card, dialog) :where(input, select, textarea):focus-visible {
  border-color: var(--blue);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
}
:where(.view:not(.builder-view), .modal, dialog) ::placeholder { color: #6a7486; }

/* ---------------------------------------------------------------------
   SURFACES
   --------------------------------------------------------------------- */
/* Cartes et panneaux : filet --line, rayon 16 px, pas d’ombre (--card-shadow vaut none hors éditeur). */
.panel, .card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}
.settings-section { border-color: var(--line); border-radius: var(--radius-lg); box-shadow: none; }
.panel-heading h2, .card-header h2 { letter-spacing: var(--tracking-snug); }

/* Double coque (outer shell + inner core) — réservée aux blocs majeurs.
   Variante balisée : <div class="ds-bezel"><div class="ds-bezel-core">…</div></div>
   Variante CSS seule (ombre concentrique) sur les blocs du tableau de bord. */
.ds-bezel {
  padding: var(--bezel-pad);
  border-radius: var(--radius-xl);
  background: rgba(16, 24, 40, .035);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.ds-bezel-core {
  border-radius: calc(var(--radius-xl) - var(--bezel-pad));
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow), var(--shadow-inset-highlight);
}

/* Prochaine étape (bandeau d’orientation) : aplat bleu clair, sans dégradé violet. */
.next-step {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: var(--radius-lg);
  background: var(--surface-blue);
  box-shadow: none;
}

/* ---------------------------------------------------------------------
   EN-TÊTES DE PAGE : h1 + phrase d’intention (65 caractères) + une action
   Le surtitre en pastille (nom de la rubrique) est masqué : le fil
   d’Ariane de la barre du haut l’indique déjà. Un surtitre qui porte
   une action (bouton « retour », lien) reste visible.
   --------------------------------------------------------------------- */
.page-heading { gap: var(--space-5); margin-bottom: var(--space-7); }
.page-heading h1 { margin: 0 0 6px; font-size: var(--text-3xl); font-weight: var(--weight-heading); line-height: 1.15; letter-spacing: var(--tracking-tight); text-wrap: balance; }
.page-heading > div > p:not(.eyebrow, .kicker), .page-heading p.today-intention { max-width: 65ch; margin: 0; color: var(--muted); font-size: var(--text-md); line-height: 1.55; }
.page-heading .eyebrow, .page-heading .kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 6px;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view:not(.builder-view) .page-heading :is(p, span).eyebrow:not(:has(button, a)),
.view:not(.builder-view) .page-heading .kicker:not(:has(button, a)) { display: none; }
.heading-actions { align-items: center; }

/* ---------------------------------------------------------------------
   BADGES ET ÉTATS : pilule, chiffres alignés
   --------------------------------------------------------------------- */
.badge, .state { border-radius: var(--radius-pill); font-weight: 550; letter-spacing: 0; }

/* ---------------------------------------------------------------------
   FENÊTRES MODALES, TIROIRS ET DIALOGUES NATIFS
   Rayon --radius-xl (20 px), ombre teintée de l’encre, fond --backdrop.
   --------------------------------------------------------------------- */
.modal-backdrop { background: var(--backdrop); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ds-fade var(--dur-3) var(--ease-soft); }
.modal { border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); animation: ds-pop var(--dur-4) var(--ease-soft); }
.modal-header h2 { font-weight: var(--weight-heading); letter-spacing: var(--tracking-snug); }
.modal-actions { border-top-color: var(--line); background: var(--surface-2); }
:is(.ag-dialog, .cp-dialog, .fo-dialog, .cr-dialog, .rl-dialog, .ft-dialog) { border: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
:is(.ag-dialog, .cp-dialog, .fo-dialog, .cr-dialog, .rl-dialog, .ft-dialog)[open] { animation: ds-pop var(--dur-4) var(--ease-soft); }
:is(.ag-dialog, .cp-dialog, .fo-dialog, .cr-dialog, .rl-dialog, .ft-dialog)::backdrop { background: rgba(17, 24, 39, .4); backdrop-filter: blur(3px); }
:is(.ag-dialog, .cp-dialog, .fo-dialog, .cr-dialog, .rl-dialog, .ft-dialog)[open]::backdrop { animation: ds-fade var(--dur-3) var(--ease-soft); }
@keyframes ds-fade { from { opacity: 0; } }
@keyframes ds-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes ds-slide-up { from { opacity: 0; transform: translateY(12px); } }

/* Fenêtres de la barre du haut */
.topbar-popover { border-color: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: ds-pop var(--dur-3) var(--ease-soft); }
.command-dialog { border-radius: var(--radius-xl); animation: ds-pop var(--dur-3) var(--ease-soft); }
.command-backdrop { background: var(--backdrop); backdrop-filter: blur(3px); }

/* Notifications éphémères : encre sombre, rayon 12 px (éditeur : bleu nuit, 14 px). */
.toast { border-radius: var(--toast-radius); background: var(--toast-bg); box-shadow: var(--shadow-lg); animation: ds-slide-up var(--dur-4) var(--ease-soft); }
.toast.error { background: #7a1b2d; }

/* ---------------------------------------------------------------------
   COQUE : barre du haut, menu latéral, navigation basse
   (masqués dans l’éditeur : body.builder-active les retire)
   --------------------------------------------------------------------- */
.topbar { border-bottom-color: var(--line); }
.topbar .icon-button { border-radius: var(--radius-sm); }
.topbar-search { border-color: var(--line); border-radius: var(--radius-sm); transition: border-color var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft); }
.topbar-search:hover { border-color: var(--line-strong); }
.user-menu-button .avatar { font-weight: 600; }
.sidebar .brand strong, .auth-brand strong { letter-spacing: var(--tracking-snug); }
.nav-group-toggle, .nav-link { transition: background-color var(--dur-2) var(--ease-soft), color var(--dur-2) var(--ease-soft); }
.nav-group-toggle { border-radius: var(--radius-sm); }
.nav-link { border-radius: var(--radius-sm); }
.nav-link.active { font-weight: 600; }
.nav-group-toggle .nav-chevron { transition: transform var(--dur-3) var(--ease-soft); }
.bottom-nav a, .bottom-nav button { border-radius: var(--radius-sm); font-weight: 550; }
.bottom-nav :is(a, button):where(:active) { transform: var(--press-transform); }

/* Connexion */
.auth-card .button.primary { font-size: 15px; }
.auth-card h1 { font-weight: var(--weight-heading); letter-spacing: var(--tracking-tight); }
.auth-pitch-title { letter-spacing: -.03em; }

/* ---------------------------------------------------------------------
   ÉCRANS TACTILES : cibles d’au moins 44 px
   --------------------------------------------------------------------- */
@media (max-width: 860px), (pointer: coarse) {
  .button, .button.compact, .button.small, .button.sm { --btn-h: var(--touch-min); }
  .chip, .pc-chip, .pc-quick-chips button, .rl-chip { min-height: var(--touch-min); }
  .segmented button { min-height: 38px; }
  .ft-icon-btn { min-width: var(--touch-min); min-height: var(--touch-min); }
}

/* ---------------------------------------------------------------------
   MOUVEMENT RÉDUIT
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .button, .chip, .choice, .icon-button, .tool-button, .ft-icon-btn, .segmented button, .button > svg { transition: none !important; }
  .button, .button:hover, .button:active, .chip:active, .choice:active, .icon-button:active, .button > svg { transform: none !important; }
  .modal, .modal-backdrop, .toast, .topbar-popover, .command-dialog,
  :is(.ag-dialog, .cp-dialog, .fo-dialog, .cr-dialog, .rl-dialog, .ft-dialog)[open] { animation: none; }
}

/* Barre du haut sur téléphone : cibles tactiles homogènes de 44 px. */
@media (max-width: 860px) {
  .topbar .icon-button, .topbar-search { width: var(--touch-min); height: var(--touch-min); min-height: var(--touch-min); padding: 0; justify-content: center; }
  .topbar .icon-button, .topbar-search { border-color: transparent; background: transparent; }
  /* « Publier » garde son libellé visible : une icône seule ne dit pas qu’elle met le site en ligne. */
  .topbar-publish.button { --btn-px: 12px; width: auto; height: var(--touch-min); min-height: var(--touch-min); gap: 6px; padding: 0 12px; justify-content: center; }
  .topbar-publish span { display: inline; }
}
@media (max-width: 389px) {
  .topbar-publish.button { --btn-px: 10px; padding: 0 10px; }
  .topbar-publish.button > svg { display: none; }
  /* Très petit écran : le titre de l’écran garde sa place (« Tableau de bord » entier). */
  .topbar { gap: 2px; padding-left: 12px; padding-right: 6px; }
  .topbar.topbar :is(.icon-button, .topbar-search) { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
  .topbar :is(.topbar-preview, .topbar-publish, .topbar-publish-pending) { margin-left: 2px; }
  .topbar-publish.button { height: 40px; min-height: 40px; }
  /* Titre trop long : deux lignes plutôt qu’une coupure « Tableau … ». */
  .crumbs li.crumb-current { white-space: normal; }
  .crumbs .crumb-current span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------
   SYSTÈME DE MISE EN PAGE (relecture visuelle multi-tailles)
   Une carte, une « Prochaine étape », un bouton principal, des écrans
   centrés en grand écran et des cibles tactiles de 44 px.
   --------------------------------------------------------------------- */

/* D10 — Le focus posé par programme sur le titre de l’écran ne dessine pas de cadre. */
:where(h1, h2)[tabindex="-1"]:focus, :where(h1, h2)[tabindex="-1"]:focus-visible { outline: none; }

/* D24 — Le tableau de bord n’a plus de cartes : voir « Tableau de bord » dans views/parcours.css. */
.today-heading .today-date { display: none; }

/* D20 — « Prochaine étape » : un seul composant, partout. */
.next-step, .today-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: var(--radius-lg);
  color: var(--ink);
  background: var(--surface-blue);
  box-shadow: none;
}
.next-step > :is(.ns-text, .today-next-body), .today-next > .today-next-body { flex: 1 1 240px; min-width: 0; }
.next-step :is(.ft-next-icon, .cr-next-icon, .rl-next-icon, .cp-next-icon, .dps-next-icon, .billing-next-icon, .ns-icon, .ag-next-icon, .fo-next-icon),
.today-next .today-next-icon {
  display: grid; flex: none; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius); color: var(--blue-strong); background: var(--surface); box-shadow: var(--shadow-sm);
}
.next-step :is(.ft-next-icon, .cr-next-icon, .rl-next-icon, .cp-next-icon, .dps-next-icon, .billing-next-icon, .ns-icon, .ag-next-icon, .fo-next-icon) svg,
.today-next .today-next-icon svg { width: 21px; height: 21px; }
.next-step .ns-text small, .today-next .today-next-label { display: block; color: var(--blue-strong); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.next-step .ns-text strong, .today-next h2 { display: block; margin: 2px 0 0; color: var(--ink); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.next-step .ns-text span, .today-next p { display: block; margin: 3px 0 0; max-width: 72ch; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.today-next .why { color: var(--blue-strong); }
.today-next .why-text { color: var(--ink); background: var(--surface); }
.today-next-actions, .dps-next-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.next-step .button, .today-next .button { white-space: nowrap; }
.today-next.is-done { border-color: #bfe6d4; background: var(--surface-green); }
.today-next.is-done .today-next-label { color: var(--green); }
@media (max-width: 600px) {
  .next-step, .today-next { align-items: flex-start; padding: 16px; }
  .next-step > .button, .next-step > a.button, .today-next-actions, .dps-next-actions, .next-step > div:last-child:not(.ns-text) { flex: 1 1 100%; }
  .next-step .button, .today-next .button { flex: 1 1 100%; justify-content: center; white-space: normal; }
  /* Actions d’en-tête : même règle partout sur téléphone, pleine largeur. */
  .page-heading :is(.heading-actions, .ft-heading-status) { width: 100%; }
  .page-heading :is(.heading-actions, .ft-heading-status) > :is(.button, a.button) { flex: 1 1 auto; justify-content: center; }
}

/* D19 — Le badge d’état se range au-dessus du titre (le surtitre de rubrique est masqué). */
:is(.ft-heading:has(> .ft-heading-status:not(:empty)):not(:has(> .ft-heading-status :is(.button, button, a, select))), .rm-head:has(> .rm-head-status)) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 10px;
}
:is(.ft-heading:has(> .ft-heading-status:not(:empty)):not(:has(> .ft-heading-status :is(.button, button, a, select))), .rm-head:has(> .rm-head-status)) > div:first-child { display: contents; }
:is(.ft-heading:has(> .ft-heading-status:not(:empty)):not(:has(> .ft-heading-status :is(.button, button, a, select))), .rm-head:has(> .rm-head-status)) > div:first-child > .eyebrow { grid-column: 1; grid-row: 1; }
:is(.ft-heading:has(> .ft-heading-status:not(:empty)):not(:has(> .ft-heading-status :is(.button, button, a, select))), .rm-head:has(> .rm-head-status)) > :is(.ft-heading-status, .rm-head-status) { grid-column: 1 / -1; grid-row: 1; justify-self: start; min-width: 0; margin-bottom: 8px; }
:is(.ft-heading:has(> .ft-heading-status:not(:empty)):not(:has(> .ft-heading-status :is(.button, button, a, select))), .rm-head:has(> .rm-head-status)) > div:first-child > :not(.eyebrow) { grid-column: 1 / -1; }

/* D7 — En-têtes dans une grille : alignés sur le contenu, jamais centrés à part. */
:is(.fo-screen, .cr-screen, .ag-screen) > .page-heading { justify-self: stretch; margin-inline: 0; }
:is(.fo-screen, .cr-screen) > .page-heading { margin-bottom: 6px; }

/* D14 — Grand écran : une largeur de contenu maximale (--content-max, 1280 px). La vue
   centre ce bloc dans la zone principale (padding de .view, styles.css) ; à l’intérieur,
   les écrans restent alignés à gauche. */
.view:not(.builder-view) > .page-heading { max-width: var(--content-max); margin-inline: auto; }
:where(body:not(.builder-active)) .view:not(.builder-view) > .page-heading { margin-inline: 0; }
:is(.ft-host, .rl-host, .cr-host) { --ft-max: var(--content-max); --rl-max: var(--content-max); --cr-max: var(--content-max); }
#view-domains, #view-deployments, #view-security { --dps-max: var(--content-max); }
.today-view { --today-max: var(--content-max); }
.account-view .settings-layout, .media-view .media-library-shell, .media-next-step, .media-readonly, .launch-view .create-layout { margin-inline: 0; }
:is(.integrations-view, .admin-view) :is(.page-heading, .integration-intro, .integrations-catalog, .account-services, .admin-kpis, .admin-tabs, .admin-panels, .admin-grid) { max-width: var(--content-max); margin-inline: 0; }
.view.results-view > *, .view.launch-view > *, .import-layout { max-width: var(--content-max); margin-inline: 0; }
/* Assistant en 3 questions : une colonne de lecture centrée, titre aligné sur la carte. */
.launch-view:not(.pc-detailed):has(> .pc-quick:not([hidden])) > :is(.page-heading, .pc-quick) { max-width: 860px; }
/* Tableau de bord : deux colonnes équilibrées, sans trou sous la colonne d’état. */
@media (min-width: 1101px) {
  .today-grid.today-top { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
}

/* D13 — Intégrations : le site et l’environnement forment une barre de contexte sous le titre. */
.integrations-view .page-heading { flex-wrap: wrap; align-items: flex-end; }
.integrations-view .page-heading > .heading-actions {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.integrations-view .page-heading > .heading-actions .context-chip { border: 0; padding: 0; background: transparent; box-shadow: none; }
.integrations-view .integration-environment-picker { display: flex; align-items: center; gap: 10px; min-width: 0; }
.integrations-view .integration-intro { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.integrations-view .integration-status-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; justify-items: start; gap: 8px 10px; padding-top: 14px; border-top: 1px solid var(--line); text-align: left; }

/* D18 — Nom du site : deux lignes dans le sélecteur, jamais coupé net dans l’éditeur. */
.sidebar .project-picker { flex: none; }
.sidebar .project-picker strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
body.builder-active .builder-site-rename strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* D4 — Fenêtres : la croix garde sa taille, les boutons du pied passent à la ligne. */
.modal-header .icon-button { flex: none; }
@media (max-width: 480px) {
  .modal-actions { flex-wrap: wrap-reverse; }
  .modal-actions .button { flex: 1 1 100%; min-width: 0; white-space: normal; }
}

/* D21 — Onglets qui défilent sur téléphone : un fondu indique la suite. */
@media (max-width: 860px) {
  :is(.tabs, .rl-tabs, .backend-tabs, .cp-tabs, .settings-nav, .ft-tabs)[data-scroll-more="end"],
  :is(.tabs, .rl-tabs, .backend-tabs, .cp-tabs, .settings-nav, .ft-tabs)[data-scroll-more="both"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  :is(.tabs, .rl-tabs, .backend-tabs, .cp-tabs, .settings-nav, .ft-tabs)[data-scroll-more="start"] { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); }
  :is(.tabs, .rl-tabs, .backend-tabs, .cp-tabs, .settings-nav, .ft-tabs)[data-scroll-more="both"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}

/* D2 + P4 — Téléphone et tablette : rien de collant en bas ne passe sous la barre d’onglets. */
@media (max-width: 860px) {
  .ft-actions-sticky,
  .launch-view.pc-from-quick .create-layout[data-stage="proposal"] .brief-proposal-actions { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
  .rl-undo { bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px)); }
  /* Assistant de création : « Suivant » reste visible au-dessus de la barre d’onglets. */
  .pc-quick-actions { position: sticky; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); z-index: 3; margin-inline: -16px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--surface); }
  /* Le menu des sites s’ouvre au-dessus du tiroir de navigation. */
  body.drawer-open .project-popover { z-index: 130; }
  /* …et reste dans la largeur du tiroir (min(300px, 86vw)) au lieu de déborder sur la page. */
  body.drawer-open .project-popover { right: auto; width: calc(min(300px, 86vw) - 20px); max-width: calc(100vw - 20px); }
}

/* D17 — Cibles tactiles de 44 px sur téléphone et tablette. */
@media (max-width: 860px), (pointer: coarse) {
  .topbar .icon-button, .topbar-search, .topbar-publish { flex: none; min-width: var(--touch-min); }
  .modal-header .icon-button, .sp-row-move .icon-button, :is(.ag-dialog-head, .fo-dialog-head, .rl-dialog-head) .icon-button { min-width: var(--touch-min); min-height: var(--touch-min); }
  .chip, .pc-chip, .rl-chip, :is(.ft-chips, .ft-month-tabs) .chip { min-height: var(--touch-min); }
  .why, button.why { min-height: var(--touch-min); display: inline-flex; align-items: center; }
  .view:not(.builder-view) .icon-button, .pc-launch-dismiss { min-width: var(--touch-min); min-height: var(--touch-min); }
  :is(.pc-link, .ft-link-button):not(p > *), :is(.pc-quick-alt, .launch-back) .pc-link { min-height: var(--touch-min); display: inline-flex; align-items: center; }
  :is(.view:not(.builder-view), .modal, dialog) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), select) { min-height: var(--touch-min); }
  :is(.view:not(.builder-view), .modal, dialog) summary { min-height: var(--touch-min); }
}

/* P4 — Éditeur sur téléphone et tablette : le nom du site reste visible (sous « Ma page »). */
.builder-site-mobile { display: none; }
@media (max-width: 920px) {
  body.builder-active .builder-panel-title .builder-site-mobile:not(:empty) { display: block; max-width: 100%; overflow: hidden; color: var(--blue-strong); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  body.builder-active .builder-panel-title:has(.builder-site-mobile:not(:empty)) .builder-panel-sub { display: none; }
}

/* D17 (suite) — Groupes de boutons, onglets, menu du tiroir et liens d’aide : 44 px au doigt. */
@media (max-width: 860px), (pointer: coarse) {
  #mainContent .view:not(.builder-view) :is(.segmented, [role="group"], [role="tablist"]) > :is(button, a, [role="tab"]) { min-height: var(--touch-min); }
  #mainContent .integration-card-actions > a { display: inline-flex; align-items: center; min-height: var(--touch-min); }
  #mainContent .view:not(.builder-view) input[type="text"], #mainContent .view:not(.builder-view) input:not([type]) { min-height: var(--touch-min); }
  #sidebar :is(.nav-link, .nav-group-toggle) { min-height: var(--touch-min); }
  #sidebar .sidebar-close { width: var(--touch-min); height: var(--touch-min); }
}

/* ---------------------------------------------------------------------
   REFONTE — COMPOSANTS COMMUNS AJOUTÉS
   Champs avec libellé, état d’erreur, état vide, squelette de chargement
   et entrée douce des écrans. Rien de tout cela ne s’applique à l’éditeur.
   --------------------------------------------------------------------- */

/* IA : hors éditeur, une seule couleur d’accent (le violet n’est plus décoratif). */
:where(body:not(.builder-active)) .button.ai { --btn-bg: var(--blue); --btn-bd: var(--blue); box-shadow: var(--shadow-btn-primary); }
:where(body:not(.builder-active)) .button.ai:where(:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]), .is-hover) { --btn-bg: var(--blue-strong); --btn-bd: var(--blue-strong); box-shadow: var(--shadow-btn-primary-hover); transform: none; }

/* Champ : libellé au-dessus, aide en dessous, erreur en ligne.
   <label class="field"><span class="field-label">Nom</span><input><small class="field-hint">…</small></label> */
.field { display: grid; gap: 6px; min-width: 0; }
.field-label { color: var(--ink); font-size: var(--text-sm); font-weight: 550; }
.field-hint { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--red); font-size: var(--text-xs); font-weight: 500; line-height: 1.45; }
.field-error svg { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.input, .field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  width: 100%;
  min-height: var(--control-md);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  transition: border-color var(--dur-2) var(--ease-soft), box-shadow var(--dur-2) var(--ease-soft);
}
.field textarea, textarea.input { min-height: 96px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.input:hover, .field :where(input, select, textarea):hover { border-color: var(--line-hover); }
.input:focus-visible, .field :where(input, select, textarea):focus-visible { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }
:where(.view:not(.builder-view), .modal, .auth-card, dialog) :where(input, select, textarea):is([aria-invalid="true"], .is-invalid),
:is(.input, .field :where(input, select, textarea)):is([aria-invalid="true"], .is-invalid) { border-color: var(--red); }
:where(.view:not(.builder-view), .modal, .auth-card, dialog) :where(input, select, textarea):is([aria-invalid="true"], .is-invalid):focus-visible,
:is(.input, .field :where(input, select, textarea)):is([aria-invalid="true"], .is-invalid):focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 20%, transparent); }
:is(.input, .field :where(input, select, textarea)):disabled { color: var(--subtle); background: var(--surface-2); cursor: not-allowed; }

/* État vide composé : icône, phrase, une action. */
.empty-state { display: grid; justify-items: center; gap: 10px; padding: 40px 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); background: var(--surface); text-align: center; }
.empty-state-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); color: var(--blue-strong); background: var(--surface-blue); }
.empty-state-icon svg { width: 22px; height: 22px; }
.empty-state :is(h2, h3, strong) { margin: 4px 0 0; color: var(--ink); font-size: var(--text-lg); font-weight: var(--weight-heading); letter-spacing: var(--tracking-snug); }
.empty-state p { max-width: 48ch; margin: 0; line-height: 1.55; }
.empty-state .button { margin-top: 6px; }

/* Squelette de chargement : aplat neutre, reflet animé seulement sans réduction des mouvements. */
.skeleton { display: block; min-height: 14px; border-radius: var(--radius-xs); background: var(--surface-3); }
.skeleton.is-text { height: 12px; min-height: 0; margin-block: 4px; }
.skeleton.is-title { width: 40%; height: 20px; min-height: 0; }
.skeleton.is-card { min-height: 96px; border-radius: var(--radius-lg); }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 40%, var(--surface-3) 80%) 0 0 / 200% 100%; animation: ds-shimmer 1.4s ease-in-out infinite; }
}
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Pas d’animation d’entrée des écrans (« Atelier calme », §4.6) : l’écran est là, tout de suite. */

/* Grilles de formulaire : une colonne trop étroite ne déborde jamais (un long
   libellé d’option ne pousse plus la page au-delà de l’écran). */
:where(body:not(.builder-active)) .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(body:not(.builder-active)) .form-grid > * { min-width: 0; }
:where(body:not(.builder-active)) .form-grid :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
  :where(body:not(.builder-active)) .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   MENU « PLUS D’ACTIONS » (v2-ui.js) : range les actions secondaires
   d’un en-tête ou d’une ligne derrière un seul bouton. Hors éditeur.
   --------------------------------------------------------------------- */
:where(body:not(.builder-active)) .ui-more { position: relative; display: inline-flex; }
:where(body:not(.builder-active)) .ui-more-trigger.icon-only { --btn-px: 0; width: var(--btn-h); }
:where(body:not(.builder-active)) .ui-more.is-open > .ui-more-trigger { --btn-bg: var(--surface-3); --btn-bd: var(--line-hover); }
:where(body:not(.builder-active)) .ui-more-menu {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid var(--hairline, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
:where(body:not(.builder-active)) .ui-more[data-align="start"] > .ui-more-menu { right: auto; left: 0; }
:where(body:not(.builder-active)) .ui-more-menu[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  :where(body:not(.builder-active)) .ui-more-menu:not([hidden]) { animation: ds-pop var(--dur-2) var(--ease-soft); }
}
/* Les actions rangées perdent leur habit de bouton : une ligne de menu pleine largeur. */
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(button, a, label) {
  --btn-h: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transform: none;
  cursor: pointer;
}
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(button, a, label) svg { width: 16px; height: 16px; color: var(--muted); }
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(button, a, label):where(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) { background: var(--surface-3); }
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(button, a, label):focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; box-shadow: none; }
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(.danger, .ghost.danger, .secondary.danger, .fo-danger-text, .ag-danger-text, .danger-outline) { color: var(--red); }
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(.danger, .ghost.danger, .secondary.danger, .fo-danger-text, .ag-danger-text, .danger-outline):where(:hover, :focus-visible):not(:disabled) { background: var(--surface-red); color: var(--red-strong); }
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(.danger, .ghost.danger, .secondary.danger, .fo-danger-text, .ag-danger-text, .danger-outline) svg { color: currentColor; }
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(button, a):is(:disabled, [aria-disabled="true"]) { color: var(--muted); background: transparent; opacity: .6; cursor: not-allowed; }
:where(body:not(.builder-active)) .ui-more > .ui-more-menu > hr { height: 1px; margin: 4px 6px; border: 0; background: var(--line); }
@media (max-width: 600px) {
  :where(body:not(.builder-active)) .ui-more > .ui-more-menu > :is(button, a, label) { min-height: var(--touch-min); }
}

/* Options avancées repliées (réglages rares) : même habit sur tous les écrans. */
:where(body:not(.builder-active)) details.ui-advanced { border-top: 1px solid var(--line); }
:where(body:not(.builder-active)) details.ui-advanced > summary { display: flex; align-items: center; gap: 8px; min-height: var(--touch-min); padding: 6px 0; color: var(--ink-2); font-weight: 600; cursor: pointer; list-style: none; }
:where(body:not(.builder-active)) details.ui-advanced > summary::-webkit-details-marker { display: none; }
:where(body:not(.builder-active)) details.ui-advanced > summary::after { width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); content: ""; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-soft); }
:where(body:not(.builder-active)) details.ui-advanced[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
:where(body:not(.builder-active)) details.ui-advanced > summary small { margin-left: auto; color: var(--muted); font-weight: 400; }
:where(body:not(.builder-active)) details.ui-advanced > .ui-advanced-body { display: grid; gap: var(--space-4); padding: var(--space-2) 0 var(--space-4); }
/* Carte entière repliable : le résumé tient lieu d’en-tête de carte. */
:where(body:not(.builder-active)) .ui-card-advanced > details.ui-advanced { border-top: 0; padding: 4px 16px; }
:where(body:not(.builder-active)) .ui-card-advanced > details.ui-advanced > summary :is(h2, h3) { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: var(--text-lg); font-weight: var(--weight-heading); }
:where(body:not(.builder-active)) .ui-card-advanced > details.ui-advanced > summary :is(h2, h3) svg { width: 18px; height: 18px; color: var(--muted); }
:where(body:not(.builder-active)) .ui-card-advanced > details.ui-advanced[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }

/* =====================================================================
   « ATELIER CALME » (docs/v2/REFONTE-DESIGN.md §4)
   Deuxième passe : moins de boîtes, plus de structure. Tout ce qui suit est
   limité à :where(body:not(.builder-active)) ou passe par un token gelé :
   l’éditeur ne change pas.
   ===================================================================== */

/* ---------- Composants existants, mis à plat ---------- */
/* Boutons : rayon 6 px, sans ombre ni flèche dans un cercle. */
:where(body:not(.builder-active)) .button.ai { --btn-bg: var(--btn-primary-bg); --btn-bd: var(--btn-primary-bg); box-shadow: none; }
:where(body:not(.builder-active)) .button.ai:where(:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]), .is-hover) { --btn-bg: var(--btn-primary-bg-hover); --btn-bd: var(--btn-primary-bg-hover); box-shadow: none; }
:where(body:not(.builder-active)) .button:is(.danger, .ag-danger, .fo-danger) { box-shadow: none; }
:where(body:not(.builder-active)) .button:is(.primary, .ai) > svg:last-child:is(.lucide-arrow-right, .lucide-arrow-up-right, .lucide-chevron-right, .lucide-move-right) { width: 16px; height: 16px; margin-right: 0; padding: 0; border-radius: 0; background: none; }
:where(body:not(.builder-active)) .button:is(.primary, .ai):where(:hover:not(:disabled), .is-hover) > svg:last-child:is(.lucide-arrow-right, .lucide-arrow-up-right, .lucide-chevron-right, .lucide-move-right) { background: none; }
:where(body:not(.builder-active)) .button.secondary { box-shadow: none; }
:where(body:not(.builder-active)) .button svg { width: 16px; height: 16px; }

/* Puces : plus de pilules, un petit rectangle à filet. */
:where(body:not(.builder-active)) :is(.chip, .pc-chip, .pc-quick-chips button, .rl-chip) { border-color: var(--line-strong); border-radius: var(--radius-sm); font-weight: 500; }
:where(body:not(.builder-active)) :is(.chip, .rl-chip):is(.active, [aria-pressed="true"], [aria-selected="true"]),
:where(body:not(.builder-active)) .pc-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }

/* Commutateurs segmentés : fond --surface-3, choix actif blanc à filet, sans ombre. */
:where(body:not(.builder-active)) .segmented { border-color: transparent; background: var(--surface-3); }
:where(body:not(.builder-active)) .segmented button { font-weight: 500; }
:where(body:not(.builder-active)) .segmented button:is(.active, [aria-pressed="true"], [aria-selected="true"]) { color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-weight: 600; }

/* Onglets soulignés : texte encre, trait d’accent de 2 px. */
:where(body:not(.builder-active)) :is(.tabs button, .rl-tab, .backend-tabs button) { font-weight: 500; }
:where(body:not(.builder-active)) :is(.tabs button:is(.active, [aria-selected="true"]), .rl-tab[aria-selected="true"], .backend-tabs button.active) { color: var(--ink); font-weight: 600; }
:where(body:not(.builder-active)) :is(.tabs, .rl-tabs, .backend-tabs) button::after { left: 0; right: 0; border-radius: 0; }
:where(body:not(.builder-active)) .tabs button { padding-inline: 2px; margin-right: 18px; }
:where(body:not(.builder-active)) .cp-tabs { padding: 3px; border-color: transparent; border-radius: var(--radius-sm); background: var(--surface-3); }
:where(body:not(.builder-active)) .cp-tabs button { border-radius: 4px; }
:where(body:not(.builder-active)) .cp-tabs button[aria-selected="true"] { box-shadow: 0 0 0 1px var(--line); }
:where(body:not(.builder-active)) .settings-nav button { border-radius: var(--radius-sm); font-weight: 500; }
:where(body:not(.builder-active)) .settings-nav button.active { color: var(--ink); background: var(--surface-3); font-weight: 600; }

/* Menus : rayon 6 px par ligne. */
:where(body:not(.builder-active)) :is(.popover-link, .project-option, .popover-action) { border-radius: var(--radius-sm); }
:where(body:not(.builder-active)) :is(.popover-link, .project-option, .popover-action):where(:hover, .is-hover) { background: var(--surface-2); }
:where(body:not(.builder-active)) .command-results button { border-radius: var(--radius-sm); }
:where(body:not(.builder-active)) .command-results button:is(:hover, .keyboard-active) { background: var(--surface-2); }
:where(body:not(.builder-active)) .command-results button.keyboard-active { box-shadow: inset var(--accent-bar) 0 0 var(--blue); }

/* Cartes à choix : filet 1 px, sélection au filet d’accent, sans halo ni fond bleu. */
:where(body:not(.builder-active)) .choice { border-width: 1px; box-shadow: none; }
:where(body:not(.builder-active)) .choice:where(:hover:not(:disabled), .is-hover) { border-color: var(--line-hover); box-shadow: none; }
:where(body:not(.builder-active)) .choice:is(.selected, [aria-pressed="true"], [aria-checked="true"]) { border-color: var(--blue); background: var(--surface); box-shadow: inset 0 0 0 1px var(--blue); }

/* Surfaces restantes : filet, rayon 8 px, titres en 600. */
:where(body:not(.builder-active)) :is(.panel-heading h2, .card-header h2, .settings-section h2) { font-size: var(--text-lg); font-weight: var(--weight-heading); }
:where(body:not(.builder-active)) .kpi .value { font-weight: 600; }

/* États et badges : du texte, plus de pilule. Un point de couleur seulement pour un vrai état. */
:where(body:not(.builder-active)) :is(.badge, .state) { min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--muted); background: transparent; font-size: var(--text-sm); font-weight: 500; }
:where(body:not(.builder-active)) .badge:is(.success, .warning, .danger)::before { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; content: ""; }
:where(body:not(.builder-active)) .badge.success, :where(body:not(.builder-active)) .ok-state { color: var(--green); background: transparent; }
:where(body:not(.builder-active)) .badge.warning, :where(body:not(.builder-active)) .warning-state { color: var(--amber); background: transparent; }
:where(body:not(.builder-active)) .badge.danger, :where(body:not(.builder-active)) :is(.danger-state, .unavailable-state) { color: var(--red); background: transparent; }
:where(body:not(.builder-active)) :is(.badge.info, .badge.violet) { color: var(--ink-2); background: transparent; }
:where(body:not(.builder-active)) .neutral-state { color: var(--muted); background: transparent; }

/* « Prochaine étape » : plus d’encadré bleu ni de rond, une ligne posée entre deux filets. */
:where(body:not(.builder-active)) :is(.next-step, .today-next) { padding: 14px 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; }
:where(body:not(.builder-active)) .next-step :is(.ft-next-icon, .cr-next-icon, .rl-next-icon, .cp-next-icon, .dps-next-icon, .billing-next-icon, .ns-icon, .ag-next-icon, .fo-next-icon),
:where(body:not(.builder-active)) .today-next .today-next-icon { width: 20px; height: 20px; border: 0; border-radius: 0; color: var(--muted); background: none; box-shadow: none; }
:where(body:not(.builder-active)) .next-step :is(.ft-next-icon, .cr-next-icon, .rl-next-icon, .cp-next-icon, .dps-next-icon, .billing-next-icon, .ns-icon, .ag-next-icon, .fo-next-icon) svg,
:where(body:not(.builder-active)) .today-next .today-next-icon svg { width: 18px; height: 18px; }
:where(body:not(.builder-active)) :is(.next-step .ns-text small, .today-next .today-next-label) { color: var(--muted); font-weight: 500; }
:where(body:not(.builder-active)) .today-next.is-done { border-color: var(--line); background: transparent; }

/* Fenêtres : rayon 12 px, fond à plat, pas de flou derrière. */
:where(body:not(.builder-active)) :is(.modal-backdrop, .command-backdrop) { backdrop-filter: none; -webkit-backdrop-filter: none; }
:where(body:not(.builder-active)) :is(.ag-dialog, .cp-dialog, .fo-dialog, .cr-dialog, .rl-dialog, .ft-dialog)::backdrop { background: var(--backdrop); backdrop-filter: none; }
:where(body:not(.builder-active)) .modal-actions { background: var(--surface); }
:where(body:not(.builder-active)) .toast { min-height: 44px; font-size: var(--text-sm); }

/* État vide : une phrase et un lien, sans cadre pointillé ni icône en pastille. */
:where(body:not(.builder-active)) .empty-state { justify-items: start; gap: 6px; padding: 20px 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
:where(body:not(.builder-active)) .empty-state-icon { display: none; }
:where(body:not(.builder-active)) .empty-state :is(h2, h3, strong) { margin: 0; font-size: var(--text-md); }

/* Options avancées : chevron fin. */
:where(body:not(.builder-active)) details.ui-advanced > summary::after { border-width: 1.5px; }

/* ---------- Primitives « at- » ----------
   Balisage de référence : docs/v2/ARCHITECTURE.md §8 et v2/styleguide.html. */

/* Lien d’action (texte) : bouton ou lien, souligné discret, accent bleu. */
.at-link { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0; border: 0; color: var(--blue-strong); background: none; font: inherit; font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--dur-2) var(--ease-soft); }
.at-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.at-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.at-link svg { width: 14px; height: 14px; }
.at-link.is-quiet { color: var(--muted); }
/* Au doigt, un lien d’action isolé (ligne, en-tête de section, aperçu) garde une cible confortable. */
@media (pointer: coarse) {
  :is(.at-row-actions, .at-section-head, .at-preview-head, .at-preview-note, .today-site-type, .dps-next-actions) .at-link { min-height: 36px; }
}

/* Écran : en-tête (H1 26 px, une phrase d’intention, actions à droite) puis corps. */
.at-page { display: grid; gap: var(--page-gap); max-width: var(--content-max); min-width: 0; }
.at-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-6); min-width: 0; }
.at-page-head > :first-child { min-width: 0; }
.at-page-title { margin: 0; color: var(--ink); font-size: var(--text-3xl); font-weight: var(--weight-heading); line-height: 1.2; letter-spacing: var(--tracking-tight); text-wrap: balance; overflow-wrap: anywhere; }
.at-page-title:focus { outline: none; }
.at-page-intent { max-width: 65ch; margin: 4px 0 0; color: var(--muted); font-size: var(--text-md); line-height: 1.5; }
.at-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
.at-page-body { display: grid; gap: var(--section-gap); min-width: 0; }
/* Tablette et téléphone : titre puis actions, toujours alignés à gauche
   (.page-heading passe en colonne sous 860 px : sans align-items, le titre partait à droite). */
@media (max-width: 860px) {
  .at-page-head { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .at-page-actions { margin-left: 0; }
}

/* Deux colonnes : le travail à gauche, l’aperçu réel du site à droite, collant. */
.at-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--preview-width); align-items: start; gap: var(--split-gap); min-width: 0; }
.at-split-main { display: grid; align-content: start; gap: var(--section-gap); min-width: 0; }
.at-split-aside { position: sticky; top: var(--space-6); display: grid; gap: var(--space-4); min-width: 0; }
@media (max-width: 1100px) {
  .at-split { grid-template-columns: minmax(0, 1fr); gap: var(--section-gap); }
  /* Sous le travail, l’aperçu est une section comme les autres : un filet le sépare. */
  .at-split-aside { position: static; padding-top: var(--section-gap); border-top: 1px solid var(--line); }
}

/* Section : titre 15/600, une ligne d’explication facultative, sans boîte.
   Deux sections qui se suivent sont séparées par l’espace et un filet. */
.at-section { display: grid; gap: var(--space-3); min-width: 0; }
.at-section[hidden] { display: none; }
.at-section:not([hidden]) ~ .at-section { padding-top: var(--section-gap); border-top: 1px solid var(--line); }
.at-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--space-4); min-width: 0; }
.at-section-head > :first-child { min-width: 0; }
.at-section-title { margin: 0; color: var(--ink); font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: 1.35; letter-spacing: var(--tracking-snug); }
.at-section-hint { max-width: 65ch; margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.at-section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* Liste : lignes séparées par un filet, survol discret, actions à droite. */
.at-list { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.at-list.is-plain { border-top: 0; }
.at-row { position: relative; display: flex; align-items: center; gap: var(--space-3); min-width: 0; min-height: 48px; padding: 10px var(--space-2); border-bottom: 1px solid var(--line); transition: background-color var(--dur-2) var(--ease-soft); }
.at-list.is-plain .at-row:last-child { border-bottom: 0; }
.at-row:hover { background: var(--row-hover); }
.at-row-lead { display: inline-grid; flex: none; place-items: center; width: 20px; color: var(--muted); }
.at-row-lead svg { width: 16px; height: 16px; }
.at-row-main { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.at-row-title { overflow: hidden; color: var(--ink); font-size: var(--text-md); font-weight: 500; line-height: 1.4; text-overflow: ellipsis; }
.at-row-meta { color: var(--muted); font-size: var(--text-sm); line-height: 1.4; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.at-row-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin-left: auto; }
.at-row-actions .icon-button { width: 28px; height: 28px; border-color: transparent; background: transparent; }
@media (max-width: 600px) {
  /* Téléphone : les actions de la ligne passent sous le libellé, alignées sur lui. */
  .at-row { flex-wrap: wrap; row-gap: 2px; }
  .at-row-main { flex-basis: 0; }
  .at-row-actions { flex-basis: 100%; margin-left: 0; }
  .at-row-lead ~ .at-row-actions { padding-left: calc(20px + var(--space-3)); }
}
.at-row.is-muted :is(.at-row-title, .at-row-meta) { color: var(--muted); }
.at-row.is-muted .at-row-title { font-weight: 400; }
/* Ligne entièrement cliquable : le lien principal couvre la ligne (actions au-dessus). */
.at-row-link::after { position: absolute; inset: 0; content: ""; }
.at-row-link { color: inherit; text-decoration: none; }
.at-row-actions { position: relative; z-index: 1; }
/* Rond à cocher (listes de tâches) : vide à faire, encre coché quand c’est fait. */
.at-check { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--line-hover); border-radius: 50%; color: #fff; background: transparent; }
.at-check svg { width: 11px; height: 11px; stroke-width: 3; }
.at-check.is-done { border-color: var(--ink-2); background: var(--ink-2); }
.at-check.is-current { border-color: var(--ink); }
/* « Voir tout » replié sous une liste. */
.at-more { margin: 0; }
.at-more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-top: 4px; padding: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--muted); font-size: var(--text-sm); font-weight: 500; list-style: none; cursor: pointer; }
.at-more > summary::-webkit-details-marker { display: none; }
.at-more > summary:hover { color: var(--ink); background: var(--row-hover); }
.at-more > summary svg { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease-soft); }
.at-more[open] > summary svg { transform: rotate(180deg); }

/* Formulaire de réglages : libellé à gauche (200 px), champ à droite ; empilés sous 720 px.
   Aide et erreur sous le champ. Enregistrement en bas de section (.at-form-actions). */
.at-form { display: grid; gap: 0; min-width: 0; }
.at-field { display: grid; grid-template-columns: var(--field-label-width) minmax(0, 1fr); align-items: start; gap: 6px var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.at-form > .at-field:first-child { padding-top: 0; }
.at-field-label { padding-top: 8px; color: var(--ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; }
.at-field-label small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; }
.at-field-control { display: grid; gap: 6px; min-width: 0; max-width: 520px; }
.at-field-help { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.at-field-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--red); font-size: var(--text-xs); font-weight: 500; line-height: 1.45; }
.at-field-error[hidden] { display: none; }
.at-field :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) { width: 100%; min-height: var(--control-md); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--field-radius); color: var(--ink); background: var(--surface); font: inherit; }
.at-field textarea { min-height: 96px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.at-field :where(input, select, textarea):hover { border-color: var(--line-hover); }
.at-field :where(input, select, textarea):focus-visible { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.at-field :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--red); }
.at-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-5); padding-left: calc(var(--field-label-width) + var(--space-6)); }
.at-form-actions .at-form-status { color: var(--muted); font-size: var(--text-sm); }
@media (max-width: 720px) {
  .at-field { grid-template-columns: minmax(0, 1fr); }
  .at-field-label { padding-top: 0; }
  .at-field-control { max-width: none; }
  .at-form-actions { padding-left: 0; }
}

/* État vide : une phrase et un lien d’action. */
.at-empty { margin: 0; padding: var(--space-1) 0; color: var(--muted); font-size: var(--text-md); line-height: 1.5; }
.at-empty .at-link { margin-left: 4px; font-size: inherit; }

/* État : point de couleur sémantique + texte. */
.at-status { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; white-space: nowrap; }
.at-status::before { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--subtle); content: ""; }
.at-status.is-ok::before { background: var(--green); }
.at-status.is-warn::before { background: var(--amber-bright); }
.at-status.is-error::before { background: var(--red); }
.at-status.is-muted { color: var(--muted); }
.at-status.is-muted::before { border: 1.5px solid var(--subtle); background: transparent; }

/* Onglets soulignés. */
.at-tabs { display: flex; gap: var(--space-6); min-width: 0; margin: 0; padding: 0; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.at-tabs::-webkit-scrollbar { display: none; }
.at-tabs > :is(button, a, [role="tab"]) { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; color: var(--muted); background: none; font: inherit; font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color var(--dur-2) var(--ease-soft); }
.at-tabs > :is(button, a, [role="tab"]):hover { color: var(--ink); }
.at-tabs > :is(button, a, [role="tab"]):is(.active, [aria-selected="true"], [aria-current="page"]) { color: var(--ink); font-weight: 600; }
.at-tabs > :is(button, a, [role="tab"]):is(.active, [aria-selected="true"], [aria-current="page"])::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); content: ""; }
.at-tabs > :is(button, a, [role="tab"]):focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 2px; }
.at-tabs .nav-count, .at-tabs .at-count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Chiffre clé : grand nombre aligné + libellé, sans boîte. */
.at-stats { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-9); }
.at-stat { display: grid; gap: 2px; min-width: 0; }
.at-stat-value { color: var(--ink); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.at-stat-label { color: var(--muted); font-size: var(--text-sm); }
.at-stat-delta { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* Boîte de réception : liste à gauche, détail à droite ; empilés sur téléphone. */
.at-inbox { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-width: 0; min-height: 480px; border-top: 1px solid var(--line); }
.at-inbox-list { align-content: start; min-width: 0; overflow-y: auto; border-right: 1px solid var(--line); }
.at-inbox-list .at-row { align-items: flex-start; padding: 12px var(--space-3); cursor: pointer; }
.at-inbox-list .at-row:is(.is-active, [aria-selected="true"], [aria-current="true"]) { background: var(--surface-2); box-shadow: inset var(--accent-bar) 0 0 var(--blue); }
.at-inbox-list .at-row.is-unread .at-row-title { font-weight: 600; }
.at-inbox-detail { min-width: 0; padding: var(--space-5) var(--space-6); }
@media (max-width: 860px) {
  .at-inbox { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .at-inbox-list { border-right: 0; }
  .at-inbox.is-reading .at-inbox-list, .at-inbox:not(.is-reading) .at-inbox-detail { display: none; }
  .at-inbox-detail { padding: var(--space-4) 0; }
}

/* Squelettes à la forme du contenu (s’ajoutent à .skeleton). */
.skeleton.is-row { height: 48px; min-height: 0; border-radius: 0; margin: 0; border-bottom: 1px solid var(--canvas); }
.skeleton.is-line { width: 60%; height: 10px; min-height: 0; margin-block: 6px; }
.skeleton.is-heading { width: 220px; height: 26px; min-height: 0; }
.skeleton.is-preview { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius); }
.at-skeleton-list { display: grid; border-top: 1px solid var(--line); }
.at-skeleton-list > .skeleton { height: 14px; margin: 17px var(--space-2); width: 70%; min-height: 0; }
.at-skeleton-list > .skeleton:nth-child(2n) { width: 52%; }

/* Aperçu réel du site (AthernV2UI.sitePreview) : réduit, non interactif, cadre blanc 8 px. */
.at-preview { display: grid; gap: var(--space-2); min-width: 0; }
.at-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.at-preview-title { margin: 0; color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.at-preview-frame { position: relative; aspect-ratio: 3 / 4; max-height: calc(100vh - var(--topbar-height) - 120px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-preview); }
.at-preview-frame > [hidden], .at-preview-head > [hidden], .at-preview > [hidden] { display: none; }
/* Sous le travail (tablette, téléphone) : un bandeau paysage de hauteur raisonnable. */
@media (max-width: 1100px) { .at-preview-frame { aspect-ratio: 16 / 10; max-height: min(52vh, 420px); } }
/* Page vide, pas de site, erreur : une phrase et un lien, pas de grand cadre blanc. */
.at-preview-note { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.at-preview-note .at-link { display: inline; min-height: 0; font-size: inherit; white-space: normal; }
@media (pointer: coarse) { .at-preview-note .at-link { display: inline-flex; min-height: 36px; vertical-align: middle; } }
.at-preview-note .at-link[hidden], body.role-viewer .at-preview-note .at-link { display: none; }
@media (max-width: 1100px) {
  /* Une seule ligne : le titre « Aperçu de votre site » ne sert plus à rien. */
  .at-preview:is([data-preview-state="empty"], [data-preview-state="no-site"], [data-preview-state="error"]) > .at-preview-head { display: none; }
  .at-preview-note::before { content: "Aperçu : "; color: var(--ink-2); font-weight: 500; }
}
.at-preview-stage { position: absolute; top: 0; left: 0; width: var(--at-preview-source, 1200px); transform-origin: 0 0; pointer-events: none; user-select: none; }
.at-preview-stage .site-frame { width: 100% !important; min-width: 0 !important; margin: 0 !important; transform: none !important; box-shadow: none !important; }
.at-preview-stage iframe { display: block; width: 100%; height: var(--at-preview-source-height, 900px); border: 0; background: #fff; }
.at-preview-frame > .skeleton { position: absolute; inset: 0; border-radius: 0; }
.at-preview-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-5); color: var(--muted); font-size: var(--text-sm); text-align: center; }
.at-preview-empty[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .at-more > summary svg { transition: none; } }