/* Styles des écrans du lot 2 « agenda » (/v2) : Rendez-vous, Newsletter,
   Assistant IA du site. Préfixe « ag- ».
   Refonte « Atelier calme » (docs/v2/REFONTE-DESIGN.md §4) : pas de cartes ni de
   pastilles, sections séparées par l’espace et un filet, primitives at- de
   components.css. Tout est limité à .ag-screen / .ag-dialog : rien ne touche
   l’éditeur (body.builder-active). */

.ag-host { --ag-hour: 52px; --ag-axis: 48px; }

/* ---------- Écran ---------- */
.ag-screen.at-page { max-width: var(--content-max); margin-inline: 0; }
.ag-screen > .ag-heading { max-width: none; margin: 0; }
.ag-screen > .ag-heading h1 { margin: 0; }
.ag-screen .at-section-title { font-size: var(--text-lg); font-weight: var(--weight-heading); }
.ag-screen .at-section-title .at-count { color: var(--muted); font-weight: 500; }
.ag-screen .at-preview-title { color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.ag-screen h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.ag-screen .ag-subtitle { margin: 0 0 var(--space-2); color: var(--ink); font-size: var(--text-md); font-weight: 600; }
.ag-screen p { margin: 0; }
.ag-head-status { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); margin-top: var(--space-2) !important; }
.ag-muted { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.ag-lead { max-width: 65ch; margin: 0 0 var(--space-4) !important; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.ag-stack { display: grid; align-content: start; gap: var(--space-4); min-width: 0; }
.ag-span-2 { grid-column: 1 / -1; }
.ag-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.ag-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-4); }
.ag-add-row { padding-top: var(--space-3); }
.ag-plain-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.ag-plain-list li::marker { color: var(--subtle); }

/* Notes en une ligne (lecture seule, e-mails non branchés) : texte, sans encadré. */
.ag-note { max-width: 80ch; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.ag-note .at-status { white-space: normal; }
.ag-dialog .ag-note { padding-left: var(--space-3); border-left: 2px solid var(--line-strong); }

/* Prochaine étape : une ligne, un lien. */
.ag-next-line { max-width: 80ch; padding: var(--space-3) 0; border-block: 1px solid var(--line); color: var(--muted); font-size: var(--text-md); line-height: 1.55; }
.ag-next-line strong { color: var(--ink); font-weight: 600; }
.ag-next-line .at-link { margin-left: 4px; font-size: var(--text-md); vertical-align: baseline; }

/* Erreur dans un formulaire */
.ag-error svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.ag-load-error .at-link { margin-left: 8px; }

/* « Pourquoi ? » */
.ag-why { display: inline-grid; justify-items: end; gap: 4px; }
.ag-why .why-text { max-width: 360px; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }

/* Champs du lot 1 (ft-) repris sans boîte dans ces écrans */
.ag-screen .ft-check, .ag-dialog .ft-check { padding: 6px 0; border: 0; border-radius: 0; background: none; }
.ag-screen .ft-check:has(input:checked), .ag-dialog .ft-check:has(input:checked) { background: none; }
.ag-switch-line { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.45; cursor: pointer; }
.ag-switch-line.is-disabled { cursor: default; opacity: .7; }
.ag-screen .at-field-help .ft-counter { margin-left: 6px; }
.ag-screen .at-field-control > .ft-counter { justify-self: end; }

/* Choix exclusifs (ton, pages, destinataires) : boutons radio en ligne, sans cartes. */
.ag-screen .ag-radios { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ag-screen .ag-radios .choice { position: relative; display: grid; gap: 1px; width: 100%; min-height: var(--touch-min); padding: 8px 0 8px 28px; border: 0; border-radius: var(--radius-sm); color: var(--ink); background: none; box-shadow: none; font: inherit; text-align: left; cursor: pointer; }
.ag-screen .ag-radios .choice::before { position: absolute; box-sizing: border-box; top: 11px; left: 2px; width: 16px; height: 16px; border: 1.5px solid var(--line-hover); border-radius: 50%; background: var(--surface); content: ""; transition: border-color var(--dur-2) var(--ease-soft); }
.ag-screen .ag-radios .choice:is([aria-checked="true"], [aria-pressed="true"]) { border: 0; background: none; box-shadow: none; }
.ag-screen .ag-radios .choice:is([aria-checked="true"], [aria-pressed="true"])::before { border: 5px solid var(--ink); }
.ag-screen .ag-radios .choice:hover:not(:disabled) { background: none; box-shadow: none; }
.ag-screen .ag-radios .choice:hover:not(:disabled)::before { border-color: var(--ink-2); }
.ag-screen .ag-radios .choice:disabled { color: var(--muted); }
.ag-screen .ag-radios .choice strong { color: var(--ink); font-size: var(--text-md); font-weight: 500; }
.ag-screen .ag-radios .choice small { color: var(--muted); font-size: var(--text-sm); }
.ag-screen .ag-radios .choice:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ag-tones .choice small { font-style: italic; }

/* Squelette de chargement */
.ag-skeleton { display: grid; gap: var(--space-5); max-width: 760px; }

/* ---------- Fenêtres (dialog natif) ---------- */
.ag-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); }
.ag-dialog-wide { width: min(720px, calc(100vw - 24px)); }
.ag-dialog-small { width: min(460px, calc(100vw - 24px)); }
.ag-dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ag-dialog h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: var(--tracking-snug); overflow-wrap: anywhere; }
.ag-dialog-body { display: grid; gap: 16px; padding: 18px 20px; }
.ag-dialog-small .ag-dialog-body p { margin: 0; color: var(--muted); }
.ag-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.ag-dialog-actions .at-link { margin-right: auto; align-self: center; }
.ag-dialog .ft-icon-btn { width: 36px; height: 36px; }
.button.ag-danger { color: #fff; border-color: var(--red); background: var(--red); }
.button.ag-danger:active { transform: var(--press-transform); }
.button.ag-danger:hover { border-color: var(--red-strong); background: var(--red-strong); }
.button.ag-danger-text { color: var(--red); }
.button.ag-danger-text:hover { color: var(--red-strong); background: var(--surface-red); }

/* ======================= Rendez-vous ======================= */

/* Mise en route : trois étapes en texte, sans frise encadrée. */
.ag-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-5); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--line); list-style: none; }
.ag-steps li { display: flex; align-items: center; gap: 8px; min-height: var(--touch-min); color: var(--muted); font-size: var(--text-md); font-weight: 500; }
.ag-steps li.current { color: var(--ink); font-weight: 600; }
.ag-steps li.done { color: var(--ink-2); }
.ag-step-dot { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-hover); border-radius: 50%; color: var(--muted); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-step-dot svg { width: 12px; height: 12px; stroke-width: 3; }
.ag-steps li.current .ag-step-dot { border-color: var(--ink); color: var(--ink); }
.ag-steps li.done .ag-step-dot { border-color: var(--ink-2); color: #fff; background: var(--ink-2); }
.ag-step-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch-min); padding: 0; border: 0; color: inherit; background: none; font: inherit; text-align: left; cursor: pointer; }
.ag-step-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ag-step-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.ag-step-body { min-width: 0; }
.ag-step-actions { justify-content: flex-start; margin-top: var(--space-5); }
.ag-skip { margin-top: calc(var(--space-3) * -1) !important; }
.ag-lead strong { color: var(--ink); font-weight: 600; }
/* Grand écran : les étapes passent en colonne à gauche, l’étape en cours à droite. */
@media (min-width: 1180px) {
  .at-section.ag-setup { grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--space-9); align-items: start; }
  .ag-setup > .at-section-head { grid-column: 1 / -1; }
  .ag-setup > .ag-steps { flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; border-bottom: 0; border-top: 1px solid var(--line); }
  .ag-setup > .ag-steps li { border-bottom: 1px solid var(--line); }
  .ag-setup > .ag-step-body { max-width: 760px; }
}

/* Prestations : lignes de liste, formulaire d’ajout posé sur le fond. */
.ag-services { margin-bottom: var(--space-2); }
.ag-service { flex-wrap: wrap; }
.ag-service.is-off .at-row-title { color: var(--muted); }
.ag-service form { flex: 1 1 100%; padding-block: var(--space-2); }
.ag-service .at-row-meta .at-status { font-size: var(--text-sm); font-weight: 500; }
.ag-mini-switch { display: inline-flex; align-items: center; min-height: var(--touch-min); margin-right: 4px; cursor: pointer; }
.ag-add-service { display: grid; gap: var(--space-4); max-width: 640px; padding-top: var(--space-4); }
.ag-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ag-service-grid .ft-field { align-content: start; }

/* Horaires de la semaine : une ligne par jour, libellé à gauche. */
.ag-hours { display: grid; margin-bottom: var(--space-3); border-top: 1px solid var(--line); }
.ag-hours-day { display: grid; grid-template-columns: var(--field-label-width) minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-6); min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ag-hours-toggle { display: flex; align-items: center; gap: 10px; min-height: var(--touch-min); font-size: var(--text-md); cursor: pointer; }
.ag-hours-toggle strong { font-weight: 500; }
.ag-hours-day.is-closed .ag-hours-toggle strong { color: var(--muted); }
.ag-hours-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.ag-range { display: inline-flex; align-items: center; gap: 6px; }
.ag-range input { width: 118px; min-height: 40px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--field-radius); color: var(--ink); background: var(--surface); font: inherit; font-variant-numeric: tabular-nums; }
.ag-range input:disabled { background: var(--surface-2); }
.ag-range > span { color: var(--muted); font-size: var(--text-sm); }
.ag-range .icon-button { width: 32px; height: 32px; border-color: transparent; background: transparent; }
.ag-closed-label { color: var(--muted); font-size: var(--text-sm); }
.ag-advanced { margin-top: var(--space-4); }
.ag-screen .ui-advanced-body.at-form { padding-top: var(--space-2); }

/* E-mails en attente (repliés) */
.ag-pending-mails > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-height: var(--touch-min); padding: 10px 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; cursor: pointer; list-style: none; }
.ag-pending-mails > summary::-webkit-details-marker { display: none; }
.ag-pending-mails > summary .at-status { white-space: normal; }
.ag-pending-mails > summary::after { width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); content: ""; transform: translateY(-2px) rotate(45deg); }
.ag-pending-mails[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.ag-pending-mails .at-list { max-width: 640px; margin-bottom: var(--space-2); }

/* Agenda : semaine à gauche, détail ou « À venir » à droite. */
.ag-agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: var(--space-8); min-width: 0; }
.ag-detail { position: sticky; top: var(--space-6); min-width: 0; }
.ag-calendar-card { min-width: 0; }
.ag-cal-head { align-items: center; }
.ag-week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); min-width: 0; }
.ag-week-nav .icon-button { width: 36px; height: 36px; border-color: transparent; background: transparent; }
.ag-week-nav .icon-button:hover { background: var(--row-hover); }
.ag-week-nav h2 { margin: 0 var(--space-2) 0 4px; font-variant-numeric: tabular-nums; }
.ag-cal-tools { gap: var(--space-4); }
.ag-facts { display: inline-flex; gap: var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.ag-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-view-switch button { min-width: 0; min-height: 32px; padding: 0 12px; font-size: var(--text-sm); }
.ag-cal-body { min-width: 0; }
.ag-cal-body.is-list .ag-week, .ag-cal-body.is-list .ag-legend { display: none; }
.ag-cal-body.is-week .ag-list { display: none; }
.ag-show-cancelled { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch-min); margin-top: var(--space-2); color: var(--muted); font-size: var(--text-sm); cursor: pointer; }
.ag-show-cancelled input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }

.ag-week { display: grid; grid-template-columns: var(--ag-axis) repeat(7, minmax(0, 1fr)); grid-template-rows: auto calc(var(--ag-rows) * var(--ag-hour)); padding-top: var(--space-2); }
.ag-day-head { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 0 2px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.ag-day-name { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.ag-day-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-day-head.is-today .ag-day-name { color: var(--ink); font-weight: 600; }
.ag-day-head.is-today .ag-day-num { color: #fff; background: var(--ink); }
.ag-day-flag { color: var(--muted); font-size: 11px; font-weight: 500; }
.ag-day-flag.is-closure { color: var(--red); }
.ag-hours-axis { position: relative; grid-column: 1; grid-row: 2; }
.ag-hours-axis span { position: absolute; right: 8px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; transform: translateY(-50%); white-space: nowrap; }
.ag-hours-axis span:first-child { transform: none; }
/* Hors des horaires : fond un ton sous le canevas ; horaires d’ouverture : blanc. */
.ag-day-col { position: relative; grid-row: 2; min-width: 0; border-left: 1px solid var(--line); background: var(--surface-2); }
.ag-day-col:last-of-type { border-right: 1px solid var(--line); }
.ag-hour-line { position: absolute; right: 0; left: 0; height: 0; border-top: 1px solid var(--line); pointer-events: none; }
.ag-open { position: absolute; right: 0; left: 0; background: var(--surface); pointer-events: none; }
.ag-day-col.is-closure { background: var(--surface-red); }
.ag-closure-label { position: absolute; top: 8px; right: 3px; left: 3px; color: var(--red); font-size: 11px; font-weight: 500; line-height: 1.3; text-align: center; overflow-wrap: break-word; hyphens: auto; }
.ag-now { position: absolute; right: 0; left: 0; z-index: 2; height: 0; border-top: 1.5px solid var(--red); pointer-events: none; }
.ag-now::before { position: absolute; top: -4px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); content: ""; }
.ag-event { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-height: 24px; overflow: hidden; padding: 4px 6px 4px 8px; border: 1px solid var(--line-strong); border-left: 2px solid var(--blue); border-radius: var(--radius-xs); 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); }
.ag-event:hover { border-color: var(--line-hover); border-left-color: var(--blue); background: var(--surface-2); }
.ag-event:focus-visible { z-index: 3; outline: 2px solid var(--blue); outline-offset: 2px; }
.ag-event.is-selected { z-index: 2; border-color: var(--ink); border-left-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ag-event-time { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ag-event-time svg { width: 12px; height: 12px; }
.ag-event-name { overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ag-event-service { overflow: hidden; color: var(--muted); font-size: 11.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ag-event.is-done { border-left-color: var(--green); }
.ag-event.is-no_show { border-left-color: var(--amber-bright); }
.ag-event.is-cancelled { border-left-color: var(--subtle); color: var(--muted); background: var(--surface-2); }
.ag-event.is-cancelled .ag-event-name { text-decoration: line-through; }
.ag-add-here { position: absolute; right: 4px; bottom: 4px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink); background: var(--surface); opacity: 0; cursor: pointer; transition: opacity var(--dur-2) var(--ease-soft); }
.ag-add-here svg { width: 15px; height: 15px; }
.ag-day-col:hover .ag-add-here, .ag-add-here:focus-visible { opacity: 1; }
.ag-add-here:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (hover: none) { .ag-add-here { opacity: 1; } }
.ag-legend { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); margin-top: var(--space-3); color: var(--muted); font-size: var(--text-xs); }
.ag-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ag-legend i { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--line-strong); border-radius: 2px; }
.ag-sw-open { background: var(--surface); }
.ag-sw-closed { background: var(--surface-2); }
.ag-sw-closure { background: var(--surface-red); }

/* Liste de la semaine (téléphone, ou au choix) */
.ag-list { display: grid; }
.ag-list-day { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.ag-list-day h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: var(--space-2); }
.ag-day-note { color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.ag-day-note.is-today { color: var(--ink); }
.ag-day-empty { color: var(--muted); font-size: var(--text-sm); }
.ag-list-day .at-list { border-top: 0; }
.ag-list-item, .ag-upcoming-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 52px; padding: 8px var(--space-2); border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: none; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-2) var(--ease-soft); }
.ag-list-day li:last-child .ag-list-item { border-bottom: 0; }
.ag-list-item:hover, .ag-upcoming-item:hover { background: var(--row-hover); }
.ag-list-item:focus-visible, .ag-upcoming-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ag-list-item.is-selected { background: var(--surface-2); box-shadow: inset var(--accent-bar, 2px) 0 0 var(--blue); }
.ag-list-item.is-cancelled strong { color: var(--muted); text-decoration: line-through; }
.ag-list-time { flex: none; width: 58px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-list-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ag-list-text strong { font-weight: 500; overflow-wrap: anywhere; }
.ag-list-text small { color: var(--muted); font-size: var(--text-sm); }

/* « À venir » (colonne de droite) */
.ag-upcoming .at-row { padding: 0; }
.ag-upcoming-item { border-bottom: 0; }
.ag-upcoming-when { display: grid; flex: none; width: 76px; gap: 1px; font-variant-numeric: tabular-nums; }
.ag-upcoming-when b { font-size: var(--text-sm); font-weight: 600; }
.ag-upcoming-when small { color: var(--muted); font-size: var(--text-sm); }

/* Détail d’un rendez-vous */
.ag-detail-card { gap: var(--space-4); }
.ag-detail-head { display: grid; justify-items: start; gap: 4px; }
.ag-detail-head .at-link { margin-bottom: 4px; }
.ag-detail-head h2 { outline: none; font-size: 18px !important; overflow-wrap: anywhere; }
.ag-dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.ag-dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-2); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.ag-dl dt { color: var(--muted); font-weight: 500; }
.ag-dl dd { margin: 0; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
.ag-dl dd small { color: var(--muted); }
.ag-dl a { color: var(--blue-strong); }
.ag-note-text { white-space: pre-line; }
.ag-visio { display: grid; justify-items: start; gap: 2px; }
.ag-visio a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-mails .at-row { min-height: 0; padding-block: 8px; }
.ag-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Fenêtre d’ajout d’un rendez-vous */
.ag-booking-form { display: grid; gap: 16px; }
.ag-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.ag-slot { position: relative; }
.ag-slot input { position: absolute; opacity: 0; }
.ag-slot span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--dur-2) var(--ease-soft), background-color var(--dur-2) var(--ease-soft); }
.ag-slot span:hover { border-color: var(--line-hover); background: var(--surface-2); }
.ag-slot input:checked + span { border-color: var(--ink); color: #fff; background: var(--ink); }
.ag-slot input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ag-slots { min-height: 38px; }
.ag-slots p { margin: 0; }
.ag-custom-time { margin-top: 4px; }
.ag-slot-field .callout { align-items: flex-start; }
.ag-slot-field .callout p { margin: 2px 0 0; }
.ag-slot-field .callout > svg { flex: none; width: 18px; height: 18px; color: var(--amber); }

/* Réglages des rendez-vous (onglets) */
.ag-manage .at-tabs { margin-bottom: var(--space-5); }
.ag-tabpanel { min-width: 0; }
.ag-closures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.ag-closure-list .at-row { min-height: 48px; }
.ag-closure-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ag-closure-form .ag-error { grid-column: 1 / -1; }
.ag-site-tab { display: grid; gap: 0; max-width: 820px; }
.ag-site-tab > .at-form + .at-form > .at-field:first-child { padding-top: var(--space-4); }
.ag-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-4); min-height: 36px; font-size: var(--text-sm); overflow-wrap: anywhere; }
.ag-link-row a { color: var(--blue-strong); font-weight: 500; }

/* Aperçu de la page de réservation (mise en route) */
.ag-site-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.ag-widget-preview { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-preview); font-size: var(--text-sm); }
.ag-wp-url { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ag-widget-preview > strong { font-size: 16px; font-weight: 600; }
.ag-wp-label { color: var(--muted); font-weight: 500; }
.ag-widget-preview ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ag-widget-preview li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ag-widget-preview li:first-child { border-color: var(--ink); }
.ag-widget-preview li b { font-weight: 500; }
.ag-widget-preview li small { color: var(--muted); white-space: nowrap; }
.ag-wp-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-wp-slots i { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ======================= Newsletter ======================= */
.ag-nl-col { display: grid; align-content: start; gap: var(--space-6); min-width: 0; }
.ag-nl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: start; gap: var(--space-9); min-width: 0; }
.ag-nl-main .at-tabs { margin-bottom: var(--space-5); }
.ag-nl-side { position: sticky; top: var(--space-6); min-width: 0; }
.ag-law { display: grid; gap: var(--space-3); margin: 0; }
.ag-law dt { color: var(--ink); font-size: var(--text-sm); font-weight: 500; }
.ag-law dd { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.45; }
.ag-campaign .at-status { flex: none; }

.ag-sub-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.ag-sub-tools .ft-field { flex: 0 1 200px; }
.ag-sub-tools .ag-search { flex: 1 1 240px; }
.ag-sub-actions { margin-bottom: var(--space-4); }
.ag-table-wrap { overflow-x: auto; }
.ag-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.ag-table th { padding: 8px var(--space-3) 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); font-weight: 500; text-align: left; white-space: nowrap; }
.ag-table td { padding: 10px var(--space-3) 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ag-table tbody tr { transition: background-color var(--dur-2) var(--ease-soft); }
.ag-table tbody tr:hover td { background: var(--row-hover); }
.ag-table td strong { display: block; font-weight: 500; overflow-wrap: anywhere; }
.ag-table td small { display: block; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ag-table td:nth-child(4) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-table tr.is-off td { color: var(--muted); }
.ag-td-actions { text-align: right; }
.ag-tag { color: var(--ink-2); font-size: var(--text-sm); }
.ag-tag-check { position: relative; display: inline-flex; }
.ag-tag-check input { position: absolute; opacity: 0; }
.ag-tag-check span { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: border-color var(--dur-2) var(--ease-soft); }
.ag-tag-check span:hover { border-color: var(--line-hover); }
.ag-tag-check input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ag-tag-check input:checked + span::before { content: "✓"; }
.ag-tag-check input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ag-tag-check input:disabled + span { cursor: default; opacity: .7; }
.ag-seg-tags, .ag-page-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ag-pick { display: grid; gap: 0; max-height: 340px; margin: 0; padding: 0; overflow: auto; border-top: 1px solid var(--line); list-style: none; }
.ag-pick li { border-bottom: 1px solid var(--line); }
.ag-pick .ft-check.is-disabled { cursor: default; opacity: .72; }
.ag-copy-row { display: flex; gap: 8px; }
.ag-copy-row input { flex: 1; min-width: 0; }

/* Éditeur de lettre : rédaction à gauche, aperçu collant à droite (.at-split). */
.ag-back-row { margin-bottom: calc(var(--space-4) * -1) !important; }
.ag-back svg { width: 14px; height: 14px; }
.ag-locked { outline: none; }
.ag-blocks { display: grid; gap: 0; margin: 0 0 var(--space-3); padding: 0; border-top: 1px solid var(--line); list-style: none; }
.ag-block { display: grid; gap: 6px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.ag-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-block-type { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.ag-block-tools { display: flex; gap: 2px; }
.ag-block-tools .icon-button { width: 32px; height: 32px; border-color: transparent; background: transparent; }
.ag-block :where(input, textarea) { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--field-radius); color: var(--ink); background: var(--surface); font: inherit; font-size: var(--text-md); }
.ag-block textarea { line-height: 1.5; resize: vertical; }
.ag-block :where(input, textarea):focus-visible { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.ag-add-blocks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-4); }
.ag-add-blocks .at-link { min-height: 36px; }
.ag-editor-actions { padding-top: var(--space-4); }
.ag-prev-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ag-prev-head h2 { margin: 0; }
.ag-mail-frame { max-width: 340px; margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-preview); transition: max-width var(--dur-2) var(--ease-soft); }
.ag-mail-frame.is-wide { max-width: 100%; }
.ag-mail-meta { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ag-mail-meta > span:last-child { display: grid; min-width: 0; }
.ag-mail-meta b { font-size: var(--text-xs); font-weight: 500; }
.ag-mail-meta strong { font-size: var(--text-md); font-weight: 600; overflow-wrap: anywhere; }
.ag-mail-meta small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.ag-mail-avatar { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-2); background: var(--surface-3); font-size: var(--text-sm); font-weight: 600; }
.ag-mail-body { display: grid; gap: 10px; padding: 18px 16px; color: var(--ink); font-size: var(--text-md); line-height: 1.55; overflow-wrap: anywhere; }
.ag-mail-body p { margin: 0; }
.ag-mail-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; }
.ag-mail-btn-row { text-align: center; }
.ag-mail-btn { display: inline-block; padding: 10px 18px; border-radius: var(--radius-sm); color: #fff; background: var(--ink); font-weight: 600; }
.ag-mail-img { display: block; width: 100%; border-radius: var(--radius-sm); }
.ag-mail-img-ph { display: grid; place-items: center; height: 120px; border-radius: var(--radius-sm); color: var(--muted); background: var(--surface-3); }
.ag-ph { color: var(--muted) !important; font-style: italic; }
.ag-mail-foot { padding: 12px 16px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; line-height: 1.5; text-align: center; }
.ag-prev-note { text-align: center; }

/* Formulaire d’inscription : réglages à gauche, aperçu à droite. */
.ag-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-8); align-items: start; }
.ag-form-preview { position: sticky; top: var(--space-6); display: grid; gap: 8px; }
.ag-signup { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-preview); font-size: var(--text-sm); }
.ag-signup.is-off { opacity: .45; }
.ag-signup strong { font-size: var(--text-lg); font-weight: 600; }
.ag-signup p { margin: 0; color: var(--muted); }
.ag-signup-row { display: flex; gap: 6px; }
.ag-signup-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); color: var(--muted); background: var(--surface); }
.ag-signup-btn { padding: 8px 12px; border-radius: var(--radius-xs); color: #fff; background: var(--ink); font-weight: 600; white-space: nowrap; }
.ag-signup-consent { display: flex; gap: 8px; color: var(--ink); font-size: var(--text-xs); line-height: 1.4; }
.ag-signup-consent i { flex: none; width: 14px; height: 14px; margin-top: 1px; border: 1.5px solid var(--muted); border-radius: 3px; background: var(--surface); }

/* ======================= Assistant IA ======================= */
.ag-knows { display: grid; gap: var(--space-4); }
.ag-knows .at-stat-delta { font-size: var(--text-sm); }
.ag-knows-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
/* Ce qu’il sait + Utilisation : côte à côte dès que la colonne de travail le permet. */
.ag-assistant-main { container: agmain / inline-size; }
.ag-as-facts { display: grid; gap: var(--section-gap); min-width: 0; padding-top: var(--section-gap); border-top: 1px solid var(--line); }
.ag-as-facts > .at-section:not([hidden]) { padding-top: 0; border-top: 0; }
.ag-as-facts > .ag-sec-usage:not([hidden]) { padding-top: var(--section-gap); border-top: 1px solid var(--line); }
.ag-as-facts .ag-knows-list { grid-template-columns: minmax(0, 1fr); }
.ag-knows .at-stat-value { font-size: 22px; }
@container agmain (min-width: 640px) {
  .ag-as-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); }
  .ag-as-facts > .ag-sec-usage:not([hidden]) { padding-top: 0; border-top: 0; }
}
.ag-test { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-preview); }
.ag-chat-top { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ag-chat-top b { font-size: var(--text-md); font-weight: 600; }
.ag-chat-top small { color: var(--muted); font-size: var(--text-xs); }
.ag-chat { display: grid; align-content: start; gap: 8px; min-height: 260px; max-height: 440px; overflow-y: auto; padding: 14px; }
.ag-bubble { max-width: 88%; padding: 8px 12px; border-radius: var(--radius); font-size: var(--text-sm); line-height: 1.45; }
.ag-bubble p { margin: 0; overflow-wrap: anywhere; }
.ag-bubble-who { display: block; margin-bottom: 2px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.ag-bubble.is-bot { justify-self: start; background: var(--surface-2); }
.ag-bubble.is-me { justify-self: end; color: #fff; background: var(--ink); }
.ag-bubble.is-visitor { justify-self: end; border: 1px solid var(--line); background: var(--surface); }
.ag-bubble.is-error { justify-self: stretch; max-width: none; color: var(--red-strong); background: var(--surface-red); }
.ag-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.ag-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--subtle); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .ag-typing i { animation: ag-typing 1s ease-in-out infinite; }
  .ag-typing i:nth-child(2) { animation-delay: .15s; }
  .ag-typing i:nth-child(3) { animation-delay: .3s; }
  @keyframes ag-typing { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
}
.ag-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.ag-chat-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--field-radius); font: inherit; font-size: var(--text-md); }
.ag-chat-form input:focus-visible { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent); }
.ag-chat-form .button { min-width: 44px; min-height: 44px; }
.ag-chat-suggest { display: grid; justify-items: start; gap: 0; }
.ag-chat-suggest .at-link { min-height: 36px; white-space: normal; text-align: left; }
.ag-chat-suggest .at-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.ag-chat-note { font-size: var(--text-xs); }
.ag-usage { display: grid; gap: 6px; max-width: 520px; }
.ag-usage-num { color: var(--muted); font-size: var(--text-sm); }
.ag-usage-num b { color: var(--ink); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-meter { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface-3); }
.ag-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ink-2); }
.ag-meter.is-mid span { background: var(--amber-bright); }
.ag-meter.is-high span { background: var(--red); }
.ag-guards { margin-top: var(--space-2); }
.ag-limits { display: grid; gap: 6px; margin: 0; font-size: var(--text-sm); }
.ag-limits > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; }
.ag-limits dt { color: var(--muted); font-weight: 500; }
.ag-limits dd { margin: 0; }
.ag-convs { min-width: 0; }
.ag-conv { border-bottom: 1px solid var(--line); }
.ag-conv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); }
.ag-conv-toggle { display: flex; flex: 1 1 260px; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px var(--space-2); border: 0; color: var(--ink); background: none; font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-2) var(--ease-soft); }
.ag-conv-toggle:hover { background: var(--row-hover); }
.ag-conv-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ag-conv-toggle > span { display: grid; flex: 1; min-width: 0; }
.ag-conv-toggle strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ag-conv-toggle small { color: var(--muted); font-size: var(--text-sm); }
.ag-conv-toggle > svg { flex: none; width: 16px; height: 16px; color: var(--muted); transition: transform var(--dur-2) var(--ease-soft); }
.ag-conv-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.ag-conv-head .icon-button { width: 36px; height: 36px; border-color: transparent; background: transparent; }
.ag-conv-body { display: grid; gap: 8px; padding: 4px var(--space-2) var(--space-4); }

/* ======================= Largeurs ======================= */
/* Assistant, une colonne : l’essai passe juste après les réglages, avant les chiffres. */
@media (max-width: 1100px) {
  .ag-assistant-layout > .ag-assistant-main { display: contents; }
  .ag-assistant-layout > .ag-assistant-main > .ag-sec-set { order: 1; }
  .ag-assistant-layout > .ag-assistant-side { order: 2; }
  .ag-assistant-layout > .ag-assistant-main > .ag-sec-conv { order: 3; padding-top: var(--section-gap); border-top: 1px solid var(--line); }
  .ag-assistant-layout > .ag-assistant-main > .ag-as-facts { order: 4; }
  .ag-assistant-side { gap: var(--space-3); }
  .ag-chat { min-height: 150px; max-height: 360px; }
  .ag-chat-suggest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-4); }
}
@media (max-width: 1180px) {
  .ag-agenda-layout, .ag-nl-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .ag-detail, .ag-nl-side { position: static; }
}
@media (max-width: 900px) {
  .ag-form-layout, .ag-closures, .ag-site-preview { grid-template-columns: minmax(0, 1fr); }
  .ag-form-preview { position: static; }
}
/* Téléphone : l’agenda passe en liste, les jours d’horaires s’empilent. */
@media (max-width: 760px) {
  .ag-cal-body.is-week .ag-week, .ag-cal-body.is-week .ag-legend { display: none; }
  .ag-cal-body.is-week .ag-list { display: grid; }
  .ag-view-switch { display: none; }
  .ag-hours-day { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 8px; }
}
@media (max-width: 640px) {
  .ag-service-grid, .ag-closure-form, .ag-knows-list { grid-template-columns: minmax(0, 1fr); }
  .ag-screen .at-page-actions .button { flex: 1 1 auto; justify-content: center; }
  .ag-cal-tools { width: 100%; justify-content: space-between; }
  .ag-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ag-detail-actions .button, .ag-dialog-actions .button { flex: 1 1 auto; }
  .ag-range input { width: 96px; }
  .ag-service .at-row-actions { padding-left: 0; }
  .ag-table thead { display: none; }
  .ag-table, .ag-table tbody, .ag-table tr, .ag-table td { display: block; }
  .ag-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ag-table td { padding: 2px 0; border: 0; }
  .ag-table td.ag-td-actions { text-align: left; }
  .ag-table td[data-label="Venu par"]::before, .ag-table td[data-label="Inscrit le"]::before { color: var(--muted); content: attr(data-label) " : "; }
  .ag-limits > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ag-screen *, .ag-dialog * { transition: none !important; }
}