/* =========================================================================
   ESDI MANAGER — 19-widgets.css (refonte du tableau de bord, 2026-09-21)
   LE CANEVAS LIBRE + LES CARTES DE WIDGETS — bureau ET téléphone.

   Une seule feuille pour les deux écrans, parce qu'un seul moteur les rend
   (public/js/esdi-widgets.js). TOKENS UNIQUEMENT (01-tokens.css) : le sombre
   de 06-dark.css suit sans redéclaration. Les séparateurs internes sont en
   gris ALPHA neutre (rgba 127) : lisibles sur les deux surfaces.

   Règles de lisibilité encodées ici (cadrage § 1) :
     · trois niveaux typographiques et pas plus (héros / standard / secondaire),
     · un KPI = valeur + unité + tendance + période, jamais un nombre nu,
     · la source et la fraîcheur au PIED, jamais dans le titre,
     · la couleur ne porte jamais seule un sens (icône + texte à côté),
     · grille de 8 px, mêmes marges, mêmes rayons, hauteur de titre fixe.
   ========================================================================= */

/* ═══ 1. LE CANEVAS (bureau ≥ 768 px) ══════════════════════════════════════
   24 colonnes fluides, crans de 32 px (dashboardLayout.CRAN_PX). x/y/w/h sont
   des entiers de grille posés en variables par esdi-dashboard.js ; la position
   est CSS, jamais l'ordre des nœuds. Le canevas n'a pas de hauteur propre :
   `grid-auto-rows` la déduit du widget le plus bas. */
.esdi-canevas {
    --colonnes: 24;
    --cran: 32px;
    --gouttiere: 16px;
    display: grid;
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
    grid-auto-rows: calc(var(--cran) - var(--gouttiere));
    gap: var(--gouttiere);
    align-items: stretch;
    position: relative;
    min-height: 120px;
}
.esdi-canevas > .esdi-widget {
    grid-column: calc(var(--x, 0) + 1) / span var(--w, 8);
    grid-row: calc(var(--y, 0) + 1) / span var(--h, 5);
    min-width: 0; min-height: 0;
}
/* Sous 768 px : UNE colonne, dans l'ordre téléphone (`--ordre` = _ordre_sm), les
   masqués disparaissent, chaque carte prend sa hauteur naturelle. */
@media (max-width: 767.98px) {
    .esdi-canevas { display: flex; flex-direction: column; gap: 12px; }
    .esdi-canevas > .esdi-widget { order: var(--ordre, 0); }
    .esdi-canevas > .esdi-widget[data-masque-sm="true"] { display: none; }
}

/* ═══ 2. LA CARTE ═════════════════════════════════════════════════════════ */
.esdi-widget {
    --wg-accent: var(--ink-soft);
    --wg-accent-bg: rgba(127, 127, 127, 0.10);
    --wg-pad: 14px 16px;
    display: flex; flex-direction: column;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px -18px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms ease;
}
@media (hover: hover) {
    .esdi-widget:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 14px 34px -16px rgba(0, 0, 0, 0.14); }
}
.esdi-widget--compact { border-radius: 14px; box-shadow: none; }
.esdi-widget--compact:hover { transform: none; }

/* Les accents : un NOM → des jetons. Jamais une couleur brute venue des données. */
.esdi-widget[data-accent="bleu"]   { --wg-accent: var(--primary-500); --wg-accent-bg: rgba(27, 90, 168, 0.12); }
.esdi-widget[data-accent="cyan"]   { --wg-accent: var(--accent-600);  --wg-accent-bg: rgba(63, 190, 204, 0.16); }
.esdi-widget[data-accent="vert"]   { --wg-accent: var(--sig-ok);      --wg-accent-bg: rgba(34, 160, 107, 0.13); }
.esdi-widget[data-accent="orange"] { --wg-accent: var(--sig-warn);    --wg-accent-bg: rgba(217, 119, 6, 0.13); }
.esdi-widget[data-accent="rouge"]  { --wg-accent: var(--sig-alert);   --wg-accent-bg: rgba(220, 38, 38, 0.11); }
.esdi-widget[data-accent="violet"] { --wg-accent: #8a5fd0;            --wg-accent-bg: rgba(138, 95, 208, 0.13); }
.esdi-widget[data-accent] { border-top: 3px solid var(--wg-accent); }

/* Les familles teintent l'icône (palette validée des graphiques, pas les signalétiques). */
.esdi-widget--fam-kpi     .wg-ico { color: #3b6fb5; background: rgba(59, 111, 181, 0.13); }
.esdi-widget--fam-graph   .wg-ico { color: #1d9cb8; background: rgba(29, 156, 184, 0.13); }
.esdi-widget--fam-liste   .wg-ico { color: #8a5fd0; background: rgba(138, 95, 208, 0.13); }
.esdi-widget--fam-stock   .wg-ico { color: #c9761a; background: rgba(201, 118, 26, 0.14); }
.esdi-widget--fam-flux    .wg-ico { color: #b0468a; background: rgba(176, 70, 138, 0.12); }
.esdi-widget--fam-compose .wg-ico { color: var(--accent-700); background: rgba(63, 190, 204, 0.16); }
.esdi-widget[data-accent] .wg-ico { color: var(--wg-accent); background: var(--wg-accent-bg); }

/* Densité : trois crans, jamais plus. */
.esdi-widget[data-densite="compacte"] { --wg-pad: 10px 12px; }
.esdi-widget[data-densite="aeree"]    { --wg-pad: 20px 22px; }

/* Le HÉROS : la valeur en très grand, la carte teintée. Réservé à 1-2 par page. */
.esdi-widget[data-heros="true"] { background: linear-gradient(160deg, var(--wg-accent-bg), var(--bg-card) 70%); }
.esdi-widget[data-heros="true"] .wg-val { font-size: 44px; }
.esdi-widget[data-heros="true"] .wg-titre { font-size: 15px; }
.esdi-widget[data-heros="true"]:not([data-accent]) { --wg-accent: var(--primary-500); --wg-accent-bg: rgba(27, 90, 168, 0.10); }

/* ── L'en-tête : hauteur fixe (40 px), titre en casse normale, actions à droite. */
.wg-tete {
    display: flex; align-items: center; gap: 10px;
    min-height: 40px; padding: var(--wg-pad); padding-bottom: 0;
    min-width: 0;
}
.wg-tete--masquee .wg-titre, .wg-tete--masquee .wg-ico { display: none; }
.wg-ico {
    flex: 0 0 auto; width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--ink-soft); background: rgba(127, 127, 127, 0.10);
}
.wg-ico svg, .wg-ico i { width: 15px; height: 15px; }
/* 2026-09-22 (audit ESDI) : un titre ne se tronque plus sur UNE ligne (« CA facturé HT … ») — il prend
   deux lignes au plus, et la taille minimale du widget le prévoit (un cran de plus au-delà de 40 c.). */
.wg-titre {
    flex: 1 1 auto; min-width: 0; margin: 0;
    font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em;
    color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* Le chiffre s'adapte à la LARGEUR de sa carte (container query) : jamais coupé à droite, jamais
   minuscule dans une carte large. 12 caractères (« 26 890,24 € ») tiennent dans 100 cqw à ~9 cqw. */
.esdi-widget { container-type: inline-size; }
.wg-val { font-size: clamp(20px, 9cqw, 30px); }
.esdi-widget[data-heros="true"] .wg-val { font-size: clamp(24px, 12cqw, 44px); }
.wg-td--n { text-align: right; font-variant-numeric: tabular-nums; }
.wg-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }

/* Le « ? » : visible au survol de la carte (au doigt, toujours visible). */
.wg-demander {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; line-height: 1; text-decoration: none;
    color: var(--ink-faded); background: var(--bg-section-cool); border: 1px solid var(--line);
    opacity: .55; transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.esdi-widget:hover .wg-demander, .wg-demander:focus-visible, .esdi-widget--compact .wg-demander { opacity: 1; }
.wg-demander:hover { color: var(--accent-700); border-color: var(--accent-500); background: var(--bg-card); }
.wg-demander:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; }

/* ── Le corps : prend la place, défile si la carte est trop petite pour son contenu. */
.wg-corps {
    flex: 1 1 auto; min-height: 0; min-width: 0;
    padding: var(--wg-pad); padding-top: 10px;
    display: flex; flex-direction: column; gap: 8px;
    overflow: auto;
    scrollbar-width: thin;
}
.esdi-widget--compact .wg-corps { overflow: visible; }

/* ── Le pied : source + fraîcheur, en mono, petit — l'eyebrow vit ICI désormais. */
.wg-pied {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 16px; border-top: 1px solid rgba(127, 127, 127, 0.12);
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
    color: var(--ink-faded);
}
.wg-source, .wg-maj { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.wg-source > span, .wg-maj > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-pied__ico { width: 11px; height: 11px; flex: 0 0 auto; }
.wg-pied__ico svg { width: 11px; height: 11px; }

/* ═══ 3. LES BRIQUES ═══════════════════════════════════════════════════════ */

/* La valeur : Geist Mono tabulaire, unité discrète, tendance en pilule. */
.wg-val {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px;
    font-family: var(--font-mono);
    font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
    font-variant-numeric: tabular-nums; color: var(--ink);
}
.esdi-widget--compact .wg-val { font-size: 26px; }
.wg-val--good { color: var(--sig-ok-text); }
.wg-val--warn { color: var(--sig-warn-text); }
.wg-val--bad  { color: var(--sig-alert-text); }
.wg-unite { font-family: var(--font-body, inherit); font-size: .9rem; font-weight: 400; color: var(--ink-faded); letter-spacing: 0; }
.wg-val__fleche { width: 22px; height: 22px; align-self: center; }
.wg-val__fleche svg { width: 22px; height: 22px; }
.wg-delta {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 999px;
    font-family: var(--font-body, inherit); font-size: .72rem; font-weight: 650; line-height: 1.3; letter-spacing: 0;
    font-variant-numeric: tabular-nums; align-self: center;
    color: var(--ink-soft); background: rgba(127, 127, 127, 0.12);
}
.wg-delta--good { color: var(--sig-ok-text); background: rgba(34, 160, 107, 0.13); }
.wg-delta--bad  { color: var(--sig-alert-text); background: rgba(220, 38, 38, 0.11); }
.wg-delta__ico, .wg-delta__ico svg { width: 12px; height: 12px; }
.wg-sous { font-size: 12px; color: var(--ink-faded); }

/* L'état vide : une phrase, pas un blanc. */
.wg-vide {
    display: flex; align-items: center; gap: 8px;
    border: 1px dashed rgba(127, 127, 127, 0.30); border-radius: 10px;
    padding: 10px 12px; font-size: .8rem; color: var(--ink-faded);
}
.wg-vide__ico, .wg-vide__ico svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Jauges : piste alpha, extrémités rondes ; la jauge neutre porte le dégradé signature. */
.wg-barre { height: 10px; border-radius: 999px; background: rgba(127, 127, 127, 0.15); overflow: hidden; }
.wg-barre__rempli { height: 100%; border-radius: 999px; background: var(--gradient-brand); transition: width .35s ease; }
.wg-barre__rempli--good { background: var(--sig-ok); }
.wg-barre__rempli--warn { background: var(--sig-warn); }
.wg-barre__rempli--bad  { background: var(--sig-alert); }

/* Les messages d'alerte : icône + fond signalétique + texte. La couleur n'est jamais seule. */
.wg-message {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 10px; font-size: .82rem; font-weight: 500;
    color: var(--ink-soft); background: rgba(127, 127, 127, 0.10);
}
.wg-message--good { color: var(--sig-ok-text); background: var(--sig-ok-bg); }
.wg-message--warn { color: var(--sig-warn-text); background: var(--sig-warn-bg); }
.wg-message--bad  { color: var(--sig-alert-text); background: var(--sig-alert-bg); }
.wg-message__ico, .wg-message__ico svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Sparkline SVG pur (dégradé #esdiSparkFond déclaré une fois par vue). */
.wg-spark { width: 100%; height: 52px; display: block; overflow: visible; margin-top: auto; }
.wg-spark__trait { fill: none; stroke: var(--accent-600); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.wg-spark__aire { fill: url(#esdiSparkFond); stroke: none; }
.wg-spark__fin  { stroke: var(--accent-600); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wg-spark__halo { stroke: var(--bg-card); stroke-width: 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Anneau d'objectif. */
.wg-anneau-ligne { display: flex; align-items: center; gap: 14px; }
.wg-anneau { width: 88px; height: 88px; flex: 0 0 auto; }
.wg-anneau__fond { fill: none; stroke: rgba(127, 127, 127, 0.18); stroke-width: 9; }
.wg-anneau__val { fill: none; stroke: var(--primary-500); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.wg-anneau__val--good { stroke: var(--sig-ok); }
.wg-anneau__val--warn { stroke: var(--sig-warn); }
.wg-anneau__val--bad  { stroke: var(--sig-alert); }
.wg-anneau__pct { font-family: var(--font-mono); font-size: 21px; font-weight: 700; fill: var(--ink); }
.wg-anneau-txt { min-width: 0; }
.wg-anneau-txt .wg-val { font-size: 22px; }

/* Paire. */
.wg-paire { display: flex; align-items: stretch; gap: 14px; }
.wg-paire__bloc { flex: 1 1 0; min-width: 0; }
.wg-paire__sep { width: 1px; background: rgba(127, 127, 127, 0.25); flex: 0 0 auto; }
.wg-paire__lib { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faded); margin-bottom: 4px; }
.wg-paire .wg-val { font-size: 24px; }

/* Lignes (listes, classements, stock, groupe). */
.wg-lignes { display: flex; flex-direction: column; font-size: .875rem; }
.wg-ligne {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.12);
}
.wg-ligne:last-of-type { border-bottom: 0; }
.wg-lignes [hidden] { display: none !important; }
.wg-ligne__lib { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.wg-ligne__lib > span { overflow: hidden; text-overflow: ellipsis; }
.wg-ligne__val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--ink); }
.wg-ligne__sous { font-size: 11.5px; color: var(--ink-faded); white-space: nowrap; }
.wg-ligne__droite { display: inline-flex; align-items: center; gap: 8px; }
.wg-rang { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-faded); min-width: 1.5rem; flex: 0 0 auto; }
.wg-rang--podium { color: var(--accent-600); font-weight: 600; }
.wg-plus {
    align-self: flex-start; margin-top: 6px;
    background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 12px; font-size: .78rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.wg-plus:hover { background: var(--bg-section-cool); color: var(--ink); border-color: var(--accent-500); }

/* Tableau (bureau). */
.wg-table-wrap { overflow: auto; margin: 0 -4px; }
.wg-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wg-table th {
    font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-faded); border-bottom: 1px solid var(--line); padding: 6px 8px; white-space: nowrap; text-align: left;
    position: sticky; top: 0; background: var(--bg-card);
}
.wg-table td { font-size: .875rem; color: var(--ink); padding: 7px 8px; border-bottom: 1px solid rgba(127, 127, 127, 0.12); }
.wg-table tr:last-child td { border-bottom: 0; }
.wg-table tbody tr:hover td { background: rgba(127, 127, 127, 0.05); }
.wg-table th:not(:first-child), .wg-table td:not(:first-child) { text-align: right; font-family: var(--font-mono); }
.wg-table td:first-child { font-weight: 500; }
/* Tableau (téléphone) : chaque enregistrement est un bloc. */
.wg-enreg { padding: 8px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.12); }
.wg-enreg:last-of-type { border-bottom: 0; }
.wg-enreg__titre { font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.wg-enreg__paire { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 1px 0; }
.wg-enreg__cle { color: var(--ink-faded); font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.wg-enreg__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Pastilles et points d'état (toujours accompagnés d'un mot ou d'un chiffre). */
.wg-pastilles { display: flex; gap: 6px; flex-wrap: wrap; }
.wg-pastille { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--ink-soft); background: rgba(127, 127, 127, 0.12); }
.wg-pastille--good, .wg-pastille--ok { color: var(--sig-ok-text); background: var(--sig-ok-bg); }
.wg-pastille--warn { color: var(--sig-warn-text); background: var(--sig-warn-bg); }
.wg-pastille--bad  { color: var(--sig-alert-text); background: var(--sig-alert-bg); }
.wg-point { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; background: rgba(127, 127, 127, 0.35); }
.wg-point--ok, .wg-point--good { background: var(--sig-ok); }
.wg-point--warn { background: var(--sig-warn); }
.wg-point--bad  { background: var(--sig-alert); }

/* Grille de statuts. */
.wg-statuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.wg-statut { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.wg-statut .wg-point { margin-top: 5px; }
.wg-statut__txt { min-width: 0; display: flex; flex-direction: column; }
.wg-statut__lib { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-statut__det { font-size: 11.5px; color: var(--ink-faded); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fil d'activité. */
.wg-fil { display: flex; flex-direction: column; }
.wg-fil__item { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(127, 127, 127, 0.12); }
.wg-fil__item:last-child { border-bottom: 0; }
.wg-fil__item .wg-point { margin-top: 5px; }
.wg-fil__txt { min-width: 0; }
.wg-fil__date { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faded); letter-spacing: .04em; }
.wg-fil__lib { font-size: 13px; font-weight: 600; }
.wg-fil__det { font-size: 12px; color: var(--ink-soft); }

/* Entonnoir. */
.wg-etape { display: flex; flex-direction: column; gap: 4px; }
.wg-etape__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; }
.wg-etape__lib { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-etape__val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.wg-etape__conv { font-weight: 400; color: var(--ink-faded); }

/* Texte, liens, graphiques. */
.wg-note { font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--ink-soft); white-space: pre-wrap; }
.wg-lien { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; font-weight: 500; color: var(--primary-500); text-decoration: none; }
.wg-lien:hover { text-decoration: underline; }
.wg-lien--discret { font-size: .78rem; color: var(--ink-faded); margin-top: auto; }
.wg-lien i, .wg-lien svg { width: 14px; height: 14px; }
.wg-graph { position: relative; flex: 1 1 auto; min-height: 160px; }
.wg-graph canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.esdi-widget--compact .wg-graph { min-height: 190px; }

/* ═══ 4. LE WIDGET COMPOSÉ ═════════════════════════════════════════════════ */
.wg-compose { display: grid; gap: 12px; flex: 1 1 auto; min-height: 0; }
.wg-compose--pile { grid-template-columns: 1fr; }
.wg-compose--ligne { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); grid-auto-flow: dense; }
.wg-compose--grille2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wg-elem { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.wg-compose--ligne .wg-elem, .wg-compose--grille2 .wg-elem { grid-column: span var(--wg-larg, 1); }
.wg-elem--chart_bar, .wg-elem--chart_line, .wg-elem--chart_area, .wg-elem--chart_pie, .wg-elem--chart_bar_horizontal { min-height: 180px; }
.wg-elem__tete { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faded); }
.wg-elem__ico, .wg-elem__ico svg { width: 12px; height: 12px; }
.wg-elem__corps { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
.wg-elem .wg-val { font-size: 24px; }
.wg-compose--pile > .wg-elem + .wg-elem { border-top: 1px solid rgba(127, 127, 127, 0.12); padding-top: 10px; }
@media (max-width: 767.98px) { .wg-compose--grille2 { grid-template-columns: 1fr; } }

/* ═══ 5. LE TITRE DE SECTION (pas une carte : un jalon dans la page) ══════ */
.esdi-widget--section {
    background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
    justify-content: flex-end;
}
.esdi-widget--section:hover { transform: none; box-shadow: none; }
.esdi-widget--section .wg-tete { padding: 0 2px; min-height: 0; border-bottom: 2px solid var(--line); padding-bottom: 6px; }
.esdi-widget--section .wg-titre { font-size: 17px; font-weight: 650; white-space: normal; }
.esdi-widget--section .wg-ico { width: 24px; height: 24px; }
.esdi-widget--section .wg-corps { padding: 4px 2px 0; }
.wg-section__sous { margin: 0; font-size: 12.5px; color: var(--ink-faded); }

/* ═══ 6. SOMBRE ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .esdi-widget { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px -18px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .wg-table th { background: var(--bg-card); }
[data-theme="dark"] .wg-message--good { background: rgba(34, 160, 107, 0.16); color: #7fd6ad; }
[data-theme="dark"] .wg-message--warn { background: rgba(217, 119, 6, 0.16); color: #f2b46b; }
[data-theme="dark"] .wg-message--bad  { background: rgba(220, 38, 38, 0.16); color: #f39a9a; }
[data-theme="dark"] .wg-pastille--good, [data-theme="dark"] .wg-pastille--ok { background: rgba(34, 160, 107, 0.18); color: #7fd6ad; }
[data-theme="dark"] .wg-pastille--warn { background: rgba(217, 119, 6, 0.18); color: #f2b46b; }
[data-theme="dark"] .wg-pastille--bad  { background: rgba(220, 38, 38, 0.18); color: #f39a9a; }
[data-theme="dark"] .wg-val--good, [data-theme="dark"] .wg-delta--good { color: #7fd6ad; }
[data-theme="dark"] .wg-val--warn { color: #f2b46b; }
[data-theme="dark"] .wg-val--bad, [data-theme="dark"] .wg-delta--bad { color: #f39a9a; }
[data-theme="dark"] .wg-delta--good { background: rgba(34, 160, 107, 0.18); }
[data-theme="dark"] .wg-delta--bad { background: rgba(220, 38, 38, 0.18); }

@media (prefers-reduced-motion: reduce) {
    .esdi-widget, .wg-barre__rempli, .wg-anneau__val { transition: none; }
}

/* ═══ 7. LA PAGE BUREAU AUTOUR DU CANEVAS ══════════════════════════════════ */
.esdi-dash-meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faded); margin-left: auto; }
.esdi-dash-etat-page { display: flex; flex-direction: column; gap: 12px; }
.esdi-squelette { height: 120px; border-radius: 14px; background: linear-gradient(90deg, rgba(127,127,127,.08), rgba(127,127,127,.16), rgba(127,127,127,.08)); background-size: 200% 100%; animation: esdi-squelette 1.2s ease-in-out infinite; }
.esdi-squelette--court { height: 62px; width: 60%; }
@keyframes esdi-squelette { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.esdi-dash-vide, .esdi-dash-page-vide {
    text-align: center; padding: 48px 24px; color: var(--ink-soft);
    border: 1px dashed rgba(127, 127, 127, 0.30); border-radius: 16px;
}
.esdi-dash-page-vide { grid-column: 1 / -1; }
.esdi-dash-vide__rond, .esdi-dash-page-vide__ico {
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent-700); background: var(--sig-ai-bg);
}
.esdi-dash-vide__rond svg, .esdi-dash-page-vide__ico svg { width: 24px; height: 24px; }
.esdi-dash-etat--erreur { color: var(--sig-alert-text); background: var(--sig-alert-bg); border-color: transparent; }
@media (prefers-reduced-motion: reduce) { .esdi-squelette { animation: none; } }
/* Le bandeau d'erreur : pas de `d-flex` (son !important battait `hidden`, mesuré le 2026-09-21). */
.esdi-dash-erreur { display: flex; align-items: center; gap: 8px; }
.esdi-dash-erreur[hidden] { display: none; }

/* ═══ 8. LE MODE « PERSONNALISER » ═════════════════════════════════════════
   Le quadrillage n'apparaît qu'en édition ; en lecture, rien n'invite à un geste
   qui finirait en 403. La carte tenue est transparente au pointage
   (`pointer-events: none`) : sans ça, `elementFromPoint` la renvoie elle-même. */
.esdi-dash-outils {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 8px 10px;
    background: var(--bg-section-cool); border: 1px solid var(--line); border-radius: 12px;
    position: sticky; top: 8px; z-index: 20;
}
.esdi-dash-outils__groupe { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.esdi-dash-outils__groupe--droite { margin-left: auto; }
.esdi-dash-outils__aide { font-size: 12px; color: var(--ink-faded); margin-right: 6px; }
@media (max-width: 991.98px) { .esdi-dash-outils__aide { display: none; } }
.esdi-dash-outils .btn.active { background: var(--primary-500); color: #fff; border-color: var(--primary-500); }
.esdi-dash-outils .btn i, .esdi-dash-outils .btn svg { width: 14px; height: 14px; vertical-align: -2px; }

.esdi-canevas--edition {
    background-image:
        linear-gradient(to right, rgba(127, 127, 127, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(127, 127, 127, 0.10) 1px, transparent 1px);
    background-size: calc((100% + 16px) / 24) 32px;
    background-position: -8px -8px;
    border-radius: 12px; padding-bottom: 96px;   /* de la place pour poser en bas */
}
.esdi-canevas--edition > .esdi-widget { cursor: grab; }
.esdi-canevas--edition > .esdi-widget:hover { border-color: var(--accent-500); }
.esdi-widget--attente { transform: scale(.985) !important; }
.esdi-widget--drag {
    transition: none !important; cursor: grabbing; z-index: 30; will-change: transform;
    pointer-events: none; box-shadow: 0 16px 40px rgba(0, 0, 0, .25) !important; border-color: var(--accent-500);
}
.esdi-widget--taille { border-color: var(--accent-500); z-index: 25; }
body.esdi-dash-en-cours { user-select: none; cursor: grabbing; }

/* La cible : l'emplacement aimanté où la carte se posera. */
.esdi-canevas__cible {
    grid-column: calc(var(--x, 0) + 1) / span var(--w, 8);
    grid-row: calc(var(--y, 0) + 1) / span var(--h, 5);
    border: 2px dashed var(--accent-500); border-radius: 14px;
    background: rgba(63, 190, 204, 0.08); pointer-events: none; z-index: 1;
}
.esdi-canevas__cible[hidden] { display: none; }

/* Les poignées de taille : coin (les deux sens), bord droit, bord bas, bord gauche. */
.wg-poignee { position: absolute; z-index: 6; opacity: 0; transition: opacity .15s; }
.esdi-canevas--edition > .esdi-widget:hover .wg-poignee, .esdi-widget--taille .wg-poignee { opacity: 1; }
.wg-poignee--se { right: 3px; bottom: 3px; width: 18px; height: 18px; cursor: nwse-resize; border-right: 2px solid var(--accent-600); border-bottom: 2px solid var(--accent-600); border-radius: 0 0 8px 0; }
.wg-poignee--e { right: -3px; top: 20%; height: 60%; width: 8px; cursor: ew-resize; }
.wg-poignee--w { left: -3px; top: 20%; height: 60%; width: 8px; cursor: ew-resize; }
.wg-poignee--s { bottom: -3px; left: 20%; width: 60%; height: 8px; cursor: ns-resize; }
.wg-poignee--e::after, .wg-poignee--w::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 28px; transform: translate(-50%, -50%); border-radius: 3px; background: var(--accent-600); opacity: .6; }
.wg-poignee--s::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 3px; transform: translate(-50%, -50%); border-radius: 3px; background: var(--accent-600); opacity: .6; }
.esdi-canevas--edition > .esdi-widget { position: relative; overflow: visible; }
.esdi-canevas--edition > .esdi-widget > .wg-corps { overflow: auto; }

/* Le bouton « ⋯ » et sa bulle. */
.wg-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); color: var(--ink-soft); cursor: pointer;
}
.wg-menu-btn:hover { border-color: var(--accent-500); color: var(--accent-700); }
.wg-menu-btn i, .wg-menu-btn svg { width: 14px; height: 14px; }
.esdi-bulle--widget { display: block; position: fixed; min-width: 210px; padding: 6px; white-space: normal; z-index: 1091; }
.esdi-bulle--widget::before { display: none; }
.esdi-bulle--widget .esdi-bulle__item { font-size: 13px; }
.esdi-bulle--widget .esdi-bulle__item i, .esdi-bulle--widget .esdi-bulle__item svg { width: 15px; height: 15px; color: var(--ink-faded); }

/* La bulle du geste (position / taille pendant qu'on tire). */
.esdi-dash-bulle {
    position: fixed; z-index: 1080; pointer-events: none;
    font-size: .75rem; font-family: var(--font-mono); padding: .2rem .5rem; border-radius: 6px;
    color: #fff; background: rgba(17, 24, 39, .92); white-space: nowrap;
}
/* Le mot d'état. */
.esdi-dash-etat {
    display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--accent-700);
    background: var(--bg-section-cool); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .6rem;
}

/* L'aperçu téléphone : le canevas se rétrécit à 390 px, une colonne, dans l'ordre téléphone. */
.esdi-canevas--apercu-sm {
    display: flex !important; flex-direction: column; gap: 12px;
    width: 390px; max-width: 100%; margin: 0 auto; padding: 16px 12px 40px;
    background: var(--bg); border: 8px solid var(--ink); border-radius: 36px; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    background-image: none;
}
.esdi-canevas--apercu-sm > .esdi-widget { order: var(--ordre, 0); cursor: default; }
.esdi-canevas--apercu-sm > .esdi-widget .wg-poignee, .esdi-canevas--apercu-sm > .esdi-widget .wg-menu-btn { display: none; }
.esdi-canevas--apercu-sm > .esdi-widget--masque-sm { opacity: .38; }
.esdi-canevas--apercu-sm .esdi-canevas__cible { display: none; }
.esdi-sm-ctl {
    display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-top: 1px dashed var(--line);
    background: var(--bg-section-cool);
}
.esdi-sm-ctl__rang { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faded); margin-right: auto; }
.esdi-sm-ctl__btn { width: 28px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-card); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; }
.esdi-sm-ctl__btn:disabled { opacity: .35; }
.esdi-sm-ctl__btn i, .esdi-sm-ctl__btn svg { width: 14px; height: 14px; }

/* Petites modales du DS (confirmer / demander / choisir). */
.esdi-modale--petite .esdi-modale__boite { width: min(440px, 100%); }
.esdi-modale h5 { font-size: 16px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .esdi-widget--attente { transform: none !important; } }
[data-theme="dark"] .esdi-dash-bulle { background: rgba(2, 6, 23, .95); border: 1px solid var(--line); }
[data-theme="dark"] .esdi-canevas--apercu-sm { border-color: #000; }

/* La modale « Nouveau widget » vit dans 20-modale-widget.css (2026-09-21). */

/* ═══ 10. LES MOUVEMENTS DU CANEVAS (demande Kevin 2026-09-21) ═════════════
   Courts, ease-out fort, uniquement opacity/transform ; coupés par prefers-reduced-motion. */
.esdi-canevas > .esdi-widget { animation: wg-pose .26s cubic-bezier(.16,1,.3,1) both; }
.esdi-canevas > .esdi-widget:nth-child(2) { animation-delay: .03s; }
.esdi-canevas > .esdi-widget:nth-child(3) { animation-delay: .06s; }
.esdi-canevas > .esdi-widget:nth-child(4) { animation-delay: .09s; }
.esdi-canevas > .esdi-widget:nth-child(5) { animation-delay: .12s; }
.esdi-canevas > .esdi-widget:nth-child(n+6) { animation-delay: .15s; }
.esdi-canevas--edition > .esdi-widget, .esdi-widget--drag, .esdi-widget--taille { animation: none; }
.esdi-dash-outils { animation: wg-descend .22s cubic-bezier(.16,1,.3,1) both; }
.esdi-canevas--edition { animation: wg-quadrille .3s ease-out both; }
.esdi-canevas--apercu-sm { animation: wg-pose .26s cubic-bezier(.16,1,.3,1) both; }
.esdi-bulle--widget { animation: wg-bulle .16s cubic-bezier(.16,1,.3,1) both; }
.esdi-sm-ctl { animation: wg-descend .18s ease-out both; }
.esdi-nav-tabs__tab { transition: background .15s, color .15s, transform .12s; }
.esdi-nav-tabs__tab:active { transform: scale(.97); }
.esdi-dash-etat { animation: wg-bulle .18s cubic-bezier(.16,1,.3,1) both; }
.esdi-dash-outils .btn, #dashBarre .btn { transition: transform .12s, background .15s, border-color .15s, color .15s; }
.esdi-dash-outils .btn:active, #dashBarre .btn:active { transform: scale(.96); }
@keyframes wg-pose { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes wg-descend { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes wg-quadrille { from { background-color: transparent; } to { background-color: rgba(127,127,127,.02); } }
@keyframes wg-bulle { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .esdi-canevas > .esdi-widget, .esdi-dash-outils, .esdi-canevas--edition, .esdi-canevas--apercu-sm, .esdi-bulle--widget, .esdi-sm-ctl, .esdi-dash-etat { animation: none !important; }
}

/* 2026-09-22 — chemin court : en LECTURE, le « ⋯ » existe pour qui peut modifier, mais ne se montre qu'au
   survol de la carte (au doigt, il reste visible : pas de survol sur tactile). */
.esdi-canevas:not(.esdi-canevas--edition) > .esdi-widget .wg-menu-btn { opacity: 0; transition: opacity .16s ease, border-color .16s, color .16s; }
.esdi-canevas:not(.esdi-canevas--edition) > .esdi-widget:hover .wg-menu-btn,
.esdi-canevas:not(.esdi-canevas--edition) > .esdi-widget:focus-within .wg-menu-btn { opacity: 1; }
@media (hover: none) { .esdi-canevas:not(.esdi-canevas--edition) > .esdi-widget .wg-menu-btn { opacity: 1; } }