/* Grille de widgets : gridstack sur desktop (≥ 1180 px), CSS grid ailleurs */
.grid-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-6); min-height: 32px; }
.grid-bar .edit-tools { display: none; align-items: center; gap: var(--sp-2); }
.grid-bar .edit-hint { font-size: 13px; color: var(--ardoise); }
body.editing .grid-bar .edit-tools { display: flex; }
body.editing .grid-bar .edit-start { display: none; }

.widgets { margin-top: var(--sp-3); }
.widget {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-widget);
  padding: var(--sp-4); min-width: 0; overflow: hidden;
}
.w-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); flex: none; }
.w-title { font: 600 15px/1.2 var(--f-titre); white-space: nowrap; }
.w-title-icon { display: inline-flex; align-items: center; gap: 6px; }
.w-title-icon svg.icon { width: 15px; height: 15px; color: var(--ardoise); }
.w-tools { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.w-config { width: 24px; height: 24px; align-self: center; opacity: .7; }
.w-config:hover, .w-config:focus-visible { opacity: 1; }
body.editing .w-config { pointer-events: none; }
.w-key { font-size: 13px; color: var(--ardoise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-key.alert { color: var(--graphite); }
.w-key.alert::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ambre); margin-right: 6px; vertical-align: 1px; }
.w-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--trait) transparent; }
.w-foot { margin-top: var(--sp-3); flex: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.w-note { font-size: 12px; color: var(--ardoise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--trait); }

/* Sans gridstack : tablette, mobile, avant initialisation */
.widgets:not(.grid-stack) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-4); }
.widgets:not(.grid-stack) > .grid-stack-item { position: static !important; width: auto !important; height: auto !important; transform: none !important; min-width: 0; grid-column: span var(--w, 4); min-height: calc(var(--h, 6) * 64px - 16px); }
/* relative (pas static) : le widget reste le cadre de ses couches en position absolue (zone cliquable du Coût IA, boutons
   masquer / renommer) ; sinon elles s'étendent à toute la page et captent les clics. */
.widgets:not(.grid-stack) > .grid-stack-item > .grid-stack-item-content { position: relative !important; inset: auto !important; height: 100%; }

/* Ordinateur, avant le montage de gridstack (premier affichage, page en cache Turbo) : mêmes positions et tailles
   que la grille (12 colonnes, rangées de 64 px, marges de 8 px), pour que rien ne saute au montage. */
@media (min-width: 1180px) {
  .widgets:not(.grid-stack) { gap: 0; grid-auto-rows: 64px; margin-left: -8px; margin-right: -8px; }
  .widgets:not(.grid-stack) > .grid-stack-item {
    grid-column: calc(var(--x, 0) + 1) / span var(--w, 4); grid-row: calc(var(--y, 0) + 1) / span var(--h, 6);
    min-height: 0; padding: 8px;
  }
}

/* Gridstack */
.widgets.grid-stack { margin-left: -8px; margin-right: -8px; }
.grid-stack > .grid-stack-item > .grid-stack-item-content { overflow: visible; inset: 8px; height: auto; }
.grid-stack .grid-stack-placeholder > .placeholder-content { border: 1.5px dashed var(--ardoise); border-radius: var(--r-widget); background: transparent; inset: 8px; }
body.editing .grid-stack .widget { border-style: dashed; border-color: var(--ardoise); }
body.editing .grid-stack .w-head { cursor: grab; }
body.editing .grid-stack .w-head:active { cursor: grabbing; }
body.editing .grid-stack .widget .w-body, body.editing .grid-stack .widget .w-foot { pointer-events: none; opacity: .75; }
.grid-stack > .grid-stack-item > .ui-resizable-se {
  background: none; width: 16px; height: 16px; right: 12px; bottom: 12px; rotate: none; transform: none;
  border-right: 2px solid var(--ardoise); border-bottom: 2px solid var(--ardoise); border-radius: 0 0 4px 0;
}
.grid-stack-item.ui-draggable-dragging .widget { box-shadow: 0 16px 40px -16px rgb(0 0 0 / .3); }

@media (max-width: 1179px) {
  .grid-bar .edit-start { display: none; }
  .widgets:not(.grid-stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widgets:not(.grid-stack) > .grid-stack-item { grid-column: span 1; min-height: 320px; }
  .widgets:not(.grid-stack) > .grid-stack-item[data-wide] { grid-column: span 2; }
}
@media (max-width: 767px) {
  .grid-bar { margin-top: var(--sp-5); } /* mobile : Synchroniser seul (la grille ne se personnalise que sur ordinateur) */
  .widgets:not(.grid-stack) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .widgets:not(.grid-stack) > .grid-stack-item,
  .widgets:not(.grid-stack) > .grid-stack-item[data-wide] { grid-column: span 1; min-height: 0; }
}

/* Widget « Bien démarrer » */
.welcome-intro { font-size: 13px; color: var(--ardoise); margin-bottom: var(--sp-2); }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--sp-3); padding: 9px 0; align-items: baseline; }
.steps li + li { border-top: 1px solid var(--trait); }
.steps .phase { font: 500 11px/1 var(--f-donnees); color: var(--ardoise); }
.steps b { font-weight: 500; }
.steps .d { display: block; font-size: 12px; color: var(--ardoise); }

/* Widget « Coût IA » */
.cost-link { display: block; color: inherit; }
/* Toute la carte est cliquable (pas seulement la jauge) ; le lien « Régler le budget » du pied reste au-dessus. */
.widget:has(.cost-link) { position: relative; cursor: pointer; }
.cost-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
body.editing .cost-link::after { display: none; }
.widget:has(.cost-link) .w-foot a { position: relative; z-index: 1; }
.cost-link .big { transition: color .15s; }
.cost-link:hover .big { color: var(--prusse); }
.cost-figure { display: flex; align-items: baseline; gap: var(--sp-2); }
.cost-figure .big { font: 500 28px/1 var(--f-donnees); letter-spacing: -0.02em; }
.cost-meter { margin: var(--sp-3) 0 var(--sp-4); }
.cost-rows { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cost-rows li { display: flex; justify-content: space-between; gap: var(--sp-2); padding: 4px 0; color: var(--ardoise); }
.cost-rows li .mono { color: var(--graphite); }
.cost-note { margin-top: var(--sp-3); font-size: 12px; color: var(--ardoise); }

/* Widget Semaine : colonnes si large, liste sinon */
.widget:has(.aw-days) { container-type: inline-size; }
.aw-days { display: flex; flex-direction: column; gap: var(--sp-2); }
.aw-day { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-2); align-items: start; }
.aw-day.past { opacity: .55; }
.aw-date { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--ardoise); padding-top: 3px; }
.aw-date .dnum { font: 600 14px/1 var(--f-titre); color: var(--graphite); }
.aw-day.today .dnum { color: var(--surface); background: var(--graphite); border-radius: 99px; padding: 2px 6px; }
.aw-items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-more { font-size: 12px; color: var(--ardoise); padding: 0 7px; }
@container (min-width: 760px) {
  .aw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; height: 100%; }
  .aw-day { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 0 4px; border-left: 1px solid var(--trait); }
  .aw-day:first-child { border-left: 0; }
  .aw-date { flex-direction: column; align-items: center; gap: 2px; padding-bottom: var(--sp-2); }
}

/* Widget Mois */
.am-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.am-dow { font-size: 11px; color: var(--ardoise); padding-bottom: 4px; text-transform: uppercase; }
.am-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 6px; font: 500 12px/1.2 var(--f-donnees); }
.am-day:hover { background: var(--surface-2); }
.am-day.out { color: var(--ardoise); opacity: .5; }
.am-day.today > span:first-child { background: var(--graphite); color: var(--surface); border-radius: 99px; padding: 1px 6px; }
.am-dots { display: flex; gap: 2px; height: 5px; }
.am-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.am-dots i.due { border-radius: 1px; rotate: 45deg; width: 4px; height: 4px; background: var(--ardoise); }
.am-next { margin-top: var(--sp-3); border-top: 1px solid var(--trait); padding-top: var(--sp-2); display: flex; flex-direction: column; gap: 4px; }
.am-next li { display: grid; grid-template-columns: 52px 1fr; gap: var(--sp-2); font-size: 13px; box-shadow: inset 2px 0 0 var(--c); padding-left: 8px; }
.am-next .mono { font-size: 11.5px; color: var(--ardoise); padding-top: 1px; }
.am-next .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Widget Trello : colonnes comme sur Trello, défilement horizontal */
.tw-board-scroll {
  display: flex; gap: var(--sp-2); align-items: stretch; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px;
}
.tw-board-scroll:focus-visible { outline: 2px solid var(--prusse); outline-offset: 2px; border-radius: 8px; }
.tw-col {
  flex: 0 0 216px; width: 216px; min-width: 0; display: flex; flex-direction: column; min-height: 0; scroll-snap-align: start;
  background: var(--surface-2); border-radius: 8px; padding: 8px;
}
.tw-col.done { opacity: .65; }
.tw-col-head { display: flex; align-items: baseline; gap: var(--sp-2); padding: 2px 4px 6px; flex: none; }
.tw-name { font: 600 13px/1.3 var(--f-titre); min-width: 0; overflow-wrap: anywhere; white-space: normal; } /* nom long (« Devis envoyé / en attente validation client ») : retour à la ligne */
.tw-col-head { align-items: flex-start; }
.tw-count { margin-left: auto; font-size: 11.5px; color: var(--ardoise); }
.tw-board-name { font-size: 11px; color: var(--ardoise); padding: 0 4px 4px; flex: none; }
.tw-mine { align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; border-radius: 12px; font-size: 11px; color: var(--ardoise); border: 1px solid var(--trait); background: var(--surface); border-radius: 99px; padding: 1px 7px; margin: 0 4px 6px; flex: none; }
.tw-cards { list-style: none; margin: 0; padding: 0 2px 2px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--trait) transparent; }
.tw-card {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--trait); color: var(--graphite); font-size: 13px; line-height: 1.35;
  transition: border-color .15s, box-shadow .15s;
}
.tw-card:hover, .tw-card:focus-visible { border-color: var(--ardoise); box-shadow: 0 2px 8px -4px rgb(0 0 0 / .18); }
.tw-card.is-done .tw-title { color: var(--ardoise); text-decoration: line-through; }
.tw-title { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tw-card .t-meta { font-size: 11.5px; }
.tw-empty { font-size: 12px; color: var(--ardoise); padding: 4px; }
@media (max-width: 767px) { .tw-col { flex-basis: 78%; } .widget:has(.tw-board-scroll) { min-height: 380px; } }
@media (prefers-reduced-motion: reduce) { .tw-card { transition: none; } }

/* Masquer / réafficher un widget (mode Personnaliser) */
.grid-stack-item-content.widget { position: relative; }
.widget > form:has(.w-hide) { display: contents; }
/* Spécificité renforcée : .mini-btn (tasks.css, chargé après) ne doit pas réafficher la croix hors édition. */
.widget .w-hide { display: none; position: absolute; top: 10px; right: 10px; z-index: 5; background: var(--surface); box-shadow: 0 0 0 1px var(--trait); }
body.editing .grid-stack .widget .w-hide { display: grid; }
body.editing .grid-stack .w-head { padding-right: 32px; }
.hidden-widgets { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.hidden-widgets form { display: contents; }
.add-widget { gap: 4px; cursor: pointer; background: var(--surface); }
.add-widget svg.icon { width: 13px; height: 13px; }
/* Poignées de redimensionnement sur les bords */
body.editing .grid-stack > .grid-stack-item > .ui-resizable-e,
body.editing .grid-stack > .grid-stack-item > .ui-resizable-w { width: 14px; }
body.editing .grid-stack > .grid-stack-item > .ui-resizable-s { height: 14px; }

/* Barre Synchroniser / Personnaliser : collante, puis icônes au milieu du bord droit */
.grid-bar-sentinel { height: 1px; margin-bottom: -1px; }
/* Au-dessus des poignées de redimensionnement de gridstack (z-index 100–101) ; sous un widget en cours de déplacement. */
.grid-bar { position: sticky; top: var(--sp-3); z-index: 200; }
.bar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.bar-actions > form { display: contents; }
.grid-bar .eyebrow, .grid-bar .edit-hint { transition: opacity .2s; }
.bar-btn { align-items: center; }
/* Libellé centré sur l'icône : hauteur de ligne = hauteur de l'icône (16 px), aligné au centre du bouton. */
.bar-btn .bar-label { display: block; align-self: center; line-height: 16px; max-width: 140px; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, opacity .2s; }
.sync-btn.spinning svg.icon { animation: spin .9s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.grid-bar.stuck { pointer-events: none; }
.grid-bar.stuck .eyebrow, .grid-bar.stuck .edit-hint, .grid-bar.stuck .hidden-widgets { opacity: 0; pointer-events: none; }
.grid-bar.stuck .bar-actions {
  position: fixed; right: var(--sp-4); top: 50%; translate: 0 -50%; z-index: 200;
  flex-direction: column; align-items: flex-end; pointer-events: auto;
}
/* Liquid glass (même recette que .glass) ; Terminé en verre teinté graphite. */
.grid-bar.stuck .bar-btn {
  isolation: isolate; border-color: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-line), var(--glass-shadow);
}
.grid-bar.stuck .bar-btn:not(.primary) { background: var(--glass-bg); color: var(--graphite); }
.grid-bar.stuck .bar-btn:not(.primary):hover { background: color-mix(in oklab, var(--glass-bg), var(--surface) 35%); }
.grid-bar.stuck .bar-btn.primary { background: color-mix(in oklab, var(--graphite) 86%, transparent); color: var(--surface); }
.grid-bar.stuck .bar-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(160deg, var(--glass-shine) 0%, transparent 38%, transparent 70%, var(--glass-shine) 100%); opacity: .8;
}
@media (prefers-reduced-transparency: reduce) {
  .grid-bar.stuck .bar-btn:not(.primary) { background: var(--surface); }
  .grid-bar.stuck .bar-btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .grid-bar.stuck .bar-btn::before { display: none; }
}
/* Icône parfaitement centrée : le libellé sort du flux (position absolue), il ne pousse plus l'icône. */
.grid-bar.stuck .bar-btn { position: relative; width: 42px; height: 42px; padding: 0; gap: 0; border-radius: 50%; }
.grid-bar.stuck .bar-btn .bar-label { position: absolute; max-width: 0; opacity: 0; pointer-events: none; }
.edit-tools > form { display: contents; }
.grid-bar.stuck .edit-tools { flex-direction: column; align-items: flex-end; }
.grid-bar.stuck .edit-hint, .grid-bar.stuck .hidden-widgets { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bar-btn .bar-label, .grid-bar .eyebrow, .grid-bar .edit-hint { transition: none; }
  .sync-btn.spinning svg.icon { animation: none; }
}

/* Contenu selon la taille réelle du widget (widget_size_controller) */
.cost-mini { display: none; }
.widget[data-size-h] .cost-rows, .widget[data-size-h] .cost-note { display: none; }
.widget[data-size-h="xs"] .w-foot { display: none; }
.widget[data-size-h="xs"] .w-head { margin-bottom: var(--sp-2); }
.widget[data-size-h="xs"] .cost-figure { display: none; }
.widget[data-size-h="xs"] .cost-meter { margin: 0; }
.widget[data-size-h="xs"] .w-key:not(.cost-mini):has(~ .cost-mini) { display: none; }
.widget[data-size-h="xs"] .cost-mini { display: inline; }
.widget[data-size-h] .am-next { display: none; }
.widget[data-size-h="xs"] .am-dow { display: none; }
.widget[data-size-h="xs"] .am-day { padding: 0; font-size: 11px; gap: 1px; }
.widget[data-size-h="xs"] .am-dots { height: 3px; }
.widget[data-size-h="xs"] .am-dots i { width: 3px; height: 3px; }
.widget[data-size-w="xs"] .w-key:not(.cost-mini) { display: none; }
.widget[data-size-w="xs"] { padding: var(--sp-3); }
/* Mois réduit : la grille seule, serrée */
.widget[data-size-h]:has(.am-grid) .w-foot { display: none; }
.widget[data-size-h]:has(.am-grid) .w-head { margin-bottom: var(--sp-2); }
.widget[data-size-h][data-size-w="xs"] .am-dow { display: none; }
.widget[data-size-h]:has(.am-grid) .am-grid { gap: 0; }
.widget[data-size-h]:has(.am-grid) .am-day { padding: 1px 0; font-size: 11px; gap: 1px; }
.widget[data-size-h]:has(.am-grid) .am-dots { height: 3px; }
.widget[data-size-h]:has(.am-grid) .am-dots i { width: 3px; height: 3px; }
/* Coût IA au minimum : jauge (et montant) seuls */
.widget[data-size-h="xs"] .cost-meter ~ .empty { display: none; }
.widget[data-size-h="xs"][data-size-w="xs"]:has(.cost-mini) .w-title { display: none; }
/* Renommer (mode Personnaliser) */
.widget .w-rename { display: none; position: absolute; top: 10px; right: 40px; z-index: 5; background: var(--surface); box-shadow: 0 0 0 1px var(--trait); }
body.editing .grid-stack .widget .w-rename { display: grid; }
body.editing .grid-stack .w-head { padding-right: 62px; }
.w-title-text[contenteditable="true"] { outline: 2px solid var(--prusse); outline-offset: 2px; border-radius: 4px; padding: 0 2px; cursor: text; white-space: nowrap; }
/* Mois réduit : la grille occupe toute la hauteur, lignes réparties */
.widget[data-size-h]:has(.am-grid) .w-body { display: flex; flex-direction: column; }
.widget[data-size-h]:has(.am-grid) .am-grid { flex: 1; grid-auto-rows: 1fr; align-items: center; }
/* Coût IA réduit : montant et jauge centrés verticalement, sans vide dessous */
.widget[data-size-h="xs"]:has(.cost-mini) { justify-content: center; }
.widget[data-size-h="xs"]:has(.cost-mini) .w-body { flex: 0 0 auto; overflow: visible; }
.widget[data-size-tiny] { padding: 8px var(--sp-3); }
.widget[data-size-tiny] .w-head { margin-bottom: 6px; }
/* En édition, la colonne d'icônes à droite ne doit pas recouvrir la croix / le crayon des widgets de droite. */
@media (min-width: 1180px) { body.editing .widgets.grid-stack { margin-right: 52px; } }

/* Widget « Brief du jour » : la phrase en grand, puis les points du jour */
.brief-w-sentence { font: 600 17px/1.4 var(--f-titre); letter-spacing: -0.01em; padding-left: var(--sp-3); box-shadow: inset 3px 0 0 var(--ambre); margin-bottom: var(--sp-3); }
.brief-w-content { font-size: 13.5px; line-height: 1.55; color: var(--graphite); }
.brief-w-content ul { margin: 0; padding-left: 18px; }
.brief-w-content li + li { margin-top: 4px; }
.brief-w-error { margin-top: var(--sp-3); }
.w-foot form:has(.brief-regen) { display: contents; }
.brief-regen.spinning { opacity: .6; pointer-events: none; }

/* Contenu du brief (sous la date et dans le widget) : point clé, puis sections en cartes */
.brief-body { container-type: inline-size; display: flex; flex-direction: column; gap: var(--sp-3); }
.brief-focus { margin: 0; padding: 10px 12px; border-radius: var(--r-ctrl); background: color-mix(in oklab, var(--ambre-doux) 70%, transparent); font-size: 14px; line-height: 1.5; color: var(--graphite); }
.brief-focus-label { display: block; font: 500 10.5px/1.3 var(--f-donnees); letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); margin-bottom: 2px; }
.brief-sections { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@container (min-width: 560px) { .brief-sections { grid-template-columns: 1fr 1fr; } .brief-section.brief-priorites { grid-column: 1 / -1; } }
.brief-section { padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--surface-2); }
.brief-section h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 600 12.5px/1.3 var(--f-titre); color: var(--graphite); }
.brief-section h4 svg.icon { width: 14px; height: 14px; color: var(--ardoise); }
.brief-section ul, .brief-section ol { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--graphite); }
.brief-section li + li { margin-top: 2px; }
.brief-section.brief-priorites { background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait), inset 3px 0 0 var(--ambre); }
.brief-section.brief-priorites ol { font-weight: 500; }
.brief-content .brief-body { max-width: 860px; }
.brief-content { background: transparent; box-shadow: none; padding: 0; }

/* Récap de la semaine (page et widget) */
.recap-page { margin-top: var(--sp-5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: var(--sp-4); align-items: start; }
.recap-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.recap-body { container-type: inline-size; display: flex; flex-direction: column; gap: var(--sp-4); }
.recap-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.recap-stats li { display: flex; flex-direction: column; min-width: 92px; padding: 10px 12px; border-radius: var(--r-ctrl); background: var(--surface-2); }
.recap-stats b { font: 600 22px/1.1 var(--f-titre); color: var(--graphite); }
.recap-stats span { font-size: 12px; color: var(--ardoise); }
.recap-stats li.warn b { color: var(--erreur); }
.recap-stats.compact li { min-width: 0; flex: 1; padding: 6px 8px; }
.recap-stats.compact b { font-size: 18px; }
.recap-sentence { margin: 0; font: 500 17px/1.45 var(--f-titre); color: var(--graphite); }
@container (min-width: 560px) { .recap-body .brief-sections { grid-template-columns: 1fr 1fr; } .recap-fait-cette-semaine { grid-column: 1 / -1; } }
.recap-fait-cette-semaine { background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait), inset 3px 0 0 var(--succes); }
.recap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.recap-actions form { display: contents; }
.recap-weeks { padding: var(--sp-4); }
.recap-weeks ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; }
.recap-weeks li { padding: 8px 0; border-top: 1px solid var(--trait); font-size: 13px; }
.recap-weeks li:first-child { border-top: 0; }
.recap-weeks li.current a b { color: var(--prusse); }
.recap-link { margin: 6px 0 0; font-size: 14px; }
.recap-link a { display: inline-flex; align-items: center; gap: 6px; }
.recap-w { display: flex; flex-direction: column; gap: var(--sp-3); }
.recap-w-sentence { margin: 0; font-size: 14px; line-height: 1.5; color: var(--graphite); }
.recap-w-next { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--graphite); }
.w-foot form:has(> button.link) { display: contents; }
@media (max-width: 900px) { .recap-page { grid-template-columns: minmax(0, 1fr); } .recap-card { padding: var(--sp-4); } }

/* IA à traiter (widget) */
.ai-review-w { display: flex; flex-direction: column; gap: var(--sp-3); }
.air-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.air-group { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-ctrl); background: var(--surface-2); color: var(--graphite); font-size: 13px; }
.air-group:hover { background: color-mix(in oklab, var(--prusse) 10%, var(--surface-2)); }
.air-group span { flex: 1; }
.air-group b { font: 600 13px/1 var(--f-donnees); color: var(--prusse); }
.air-group svg.icon { color: var(--ardoise); }
.air-proposals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.air-proposals li { display: flex; align-items: center; gap: 4px; padding: 8px 0 8px 10px; border-top: 1px solid var(--trait); box-shadow: inset 3px 0 0 var(--c, var(--ambre)); }
.air-proposals .grow { flex: 1; min-width: 0; }
.air-title { margin: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.air-where { margin: 0; font-size: 12px; }
.air-proposals form { display: inline; }
.mini-btn.danger:hover { color: var(--erreur); }

/* Plateau des widgets absents (mode Personnaliser) : cartes lisibles, en grille */
.widget-tray { display: none; margin-top: var(--sp-3); border: 1px dashed var(--trait); border-radius: var(--r-widget); background: color-mix(in oklab, var(--surface) 70%, transparent); }
body.editing .widget-tray { display: block; }
.widget-tray summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.widget-tray summary::-webkit-details-marker { display: none; }
.widget-tray summary svg.icon { width: 14px; height: 14px; color: var(--ardoise); }
.tray-count { padding: 0 8px; border-radius: 99px; background: var(--surface-2); font: 600 12px/20px var(--f-donnees); color: var(--ardoise); }
.tray-list { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; }
.tray-list form { display: contents; }
.tray-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); color: var(--graphite); cursor: pointer; text-align: left; font: inherit; }
.tray-item:hover { border-color: var(--prusse); background: color-mix(in oklab, var(--prusse) 5%, var(--surface)); }
.tray-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; }
.tray-action { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--prusse); }
.hint-mobile { display: none; }
.hidden-widgets { display: none; }

/* Accueil mobile : disposition propre au mobile (ordre, hauteur, widgets présents) */
.mobile-tools { display: none; align-items: center; gap: 6px; flex-wrap: wrap; margin: -4px 0 var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--trait); }
.mobile-tools form { display: contents; }
.mobile-tools .mini-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; }
.mobile-sizes { display: inline-flex; gap: 4px; margin: 0 auto 0 4px; }
.mobile-sizes .chip { padding: 5px 10px; font-size: 12px; }
.chip.on { background: var(--graphite); color: var(--surface); border-color: var(--graphite); }
.rot-up { rotate: 90deg; }
.rot-down { rotate: -90deg; }
@media (max-width: 767px) {
  .grid-bar .edit-start { display: inline-flex; }
  .grid-bar .tidy-btn { display: none; }
  .hint-desktop { display: none; }
  body.editing .hint-mobile { display: block; flex-basis: 100%; }
  body.editing .grid-bar { flex-wrap: wrap; }
  body.editing .grid-bar .edit-tools { flex-wrap: wrap; }
  body.editing .widgets-mobile .mobile-tools { display: flex; }
  .widgets-mobile > .grid-stack-item[data-size="short"] > .grid-stack-item-content { max-height: 260px; overflow-y: auto; }
  .widgets-mobile > .grid-stack-item[data-size="tall"] { min-height: 520px; }
  .widgets-mobile > .grid-stack-item[data-size="tall"] > .grid-stack-item-content { min-height: 520px; }
  .widget-tray .tray-list { grid-template-columns: 1fr; max-height: 240px; }
}
.tray-group { margin: 4px 14px 6px; font: 600 11.5px/1 var(--f-donnees); letter-spacing: .04em; text-transform: uppercase; color: var(--ardoise); }
@media (max-width: 767px) {
  body.editing .grid-bar { position: static; }
  body.editing .grid-bar .bar-actions { flex-wrap: wrap; }
}

/* Widgets Veille et Actualités : « Actualiser toutes les veilles » dans l'en-tête */
.w-key:has(.w-refresh) { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.w-key form.button_to { display: inline-flex; }
.w-refresh { width: 24px; height: 24px; }

/* Brief du jour › Veille : les meilleurs articles, cliquables */
.brief-articles { list-style: none; margin: var(--sp-2) 0 0; padding: var(--sp-2) 0 0; border-top: 1px solid var(--trait); display: grid; gap: 6px; }
.brief-articles .brief-article-title { font-weight: 500; }
.brief-articles .muted { display: block; font-size: 12px; }
.brief-more { margin-top: var(--sp-2); font-size: 12.5px; }