/* ══ PALETTE DE COMMANDES (2026-10-11, U1), préfixe cpal- ══════════════════════════════════════════════════════════════════════
   Shared/CommandPalette.razor (la fenêtre), la loupe de l'en-tête du hub (.cpal-loupe-btn) et l'entrée du menu (.cpal-fab-item),
   Pages/FecLoader.Palette.cs (les entrées), js/palette-commandes.js (le clavier et la mise en évidence .cpal-repere).
   • Rang : 10100 / 10101, au-dessus de tout, copilote flottant compris (10050) : Ctrl+K s'ouvre aussi depuis le pilotage, le
     Reporting ou une fenêtre. Rendue au niveau haut de FecLoader : aucun ancêtre à transform ou filtre ne capture son position:fixed.
   • Grammaire des volets : surface PLEINE (--surf-2 en sombre, blanc en clair), pas de verre ; un voile simple derrière. Mat et
     Papier : surfaces et filets du style (fin de fichier). Compact : rangées resserrées.
   • Téléphone (≤ 640 px) : plein écran, champ en haut, un seul défilement, cibles de 44 px, jamais de hauteur en vh seule (iOS).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── La loupe de l'en-tête du hub (même gabarit que l'interrupteur du mode rendez-vous) ── */
.cpal-loupe-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 30px; padding: 0 8px 0 10px; border-radius: 9px;
    font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; white-space: nowrap;
    color: var(--tx2, #c2cdd6); background: transparent; border: 1px solid var(--o12, rgba(255,255,255,.12));
    transition: color .12s, background .12s, border-color .12s;
}
.cpal-loupe-btn:hover { color: var(--tx1, #e8eef2); background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent);
                        border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); }
.cpal-loupe-btn:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
.cpal-loupe-btn svg { width: 15px; height: 15px; }
.cpal-loupe-kbd, .cpal-fab-kbd {
    font: 600 10.5px/1 var(--font-family, inherit); letter-spacing: .02em; padding: 3px 5px; border-radius: 5px;
    color: var(--mut1, #8aa0ad); background: var(--o6, rgba(255,255,255,.06)); border: 1px solid var(--o10, rgba(255,255,255,.1));
}
@media (max-width: 1100px) { .cpal-loupe-lbl { display: none; } }
@media (max-width: 720px) { .cpal-loupe-kbd { display: none; } .cpal-loupe-btn { padding: 0 8px; } }
@media (max-width: 640px) {
    :root .cpal-loupe-btn { position: relative; min-height: 32px; }
    :root .cpal-loupe-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
}
/* L'entrée du menu flottant : le raccourci à droite, masqué au téléphone (pas de clavier). */
.cpal-fab-item .cpal-fab-kbd { margin-left: auto; }
@media (max-width: 640px), (pointer: coarse) { .cpal-fab-item .cpal-fab-kbd { display: none; } }

/* ── La fenêtre ── */
.cpal-voile { position: fixed; inset: 0; z-index: 10100; background: var(--bd72, rgba(3,12,18,.62)); }
html[data-theme="light"] .cpal-voile { background: rgba(15, 30, 45, .38); }
.cpal {
    position: fixed; z-index: 10101; left: 50%; top: 12vh; top: 12dvh; transform: translateX(-50%);
    width: min(780px, calc(100vw - 32px));   /* 12/10 : 640 → 780, le rail des rayons à gauche */
    max-height: min(560px, calc(100vh - 24vh)); max-height: min(560px, calc(100dvh - 24dvh));
    display: flex; flex-direction: column; overflow: hidden; outline: none;
    background: var(--surf-2, #102733); color: var(--tx1, #eafdff); font-family: var(--font-family);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 24%, transparent); border-radius: 14px;
    box-shadow: 0 28px 70px rgba(0,0,0,.55);
    animation: cpal-entree .14s ease-out;
}
html[data-theme="light"] .cpal { background: #fff; color: #10212b; box-shadow: 0 28px 70px rgba(30,41,59,.26); }
/*  Dégradé (12/10, Arthur) : la 1re et la 6e couleur de la palette active en halos sur la surface pleine, comme la fenêtre de l'IS ;
    la 1re derrière le champ et le rail, la 6e en bas à droite sous la liste. Mat garde son aplat (règle du style, plus bas). */
.cpal { background: radial-gradient(120% 75% at 0% 0%, color-mix(in srgb, var(--pal-1, var(--brand, #00B1CF)) 24%, transparent), transparent 62%),
                    radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--pal-6, var(--brand2, var(--brand, #00B1CF))) 30%, transparent), transparent 66%),
                    var(--surf-2, #102733); }
html[data-theme="light"] .cpal { background: radial-gradient(120% 75% at 0% 0%, color-mix(in srgb, var(--pal-1, var(--brand, #00B1CF)) 20%, transparent), transparent 62%),
                    radial-gradient(120% 80% at 100% 100%, color-mix(in srgb, var(--pal-6, var(--brand2, var(--brand, #00B1CF))) 26%, transparent), transparent 66%), #fff; }
@keyframes cpal-entree { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%); } }
html[data-motion="reduites"] .cpal { animation: none; }
@media (prefers-reduced-motion: reduce) { .cpal { animation: none; } }

.cpal-titre { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cpal-annonce { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cpal-tete { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--o8, rgba(255,255,255,.08)); }
.cpal-loupe { flex: 0 0 auto; display: inline-flex; color: var(--mut1, #8aa0ad); }
.cpal-loupe svg { width: 18px; height: 18px; }
.cpal-champ {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0; border: 0; outline: none; background: transparent;
    font: inherit; font-size: 16px; color: var(--tx1, #eafdff);   /* 16 px : iOS ne zoome pas sur le champ */
}
/* Le cadre de focus global des champs (analyses.css) encadrait le champ dans l'en-tête : le focus se lit au filet de l'en-tête, en
   couleur de marque, et au curseur. */
.cpal .cpal-champ:focus, .cpal .cpal-champ:focus-visible { outline: none; box-shadow: none; }
.cpal-tete:focus-within { border-bottom-color: color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent); }
.cpal-champ::placeholder { color: var(--mut1, #8aa0ad); opacity: 1; }
html[data-theme="light"] .cpal-champ { color: #10212b; }
.cpal-x {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 6px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; color: var(--mut1, #8aa0ad); cursor: pointer; font: inherit;
}
.cpal-x:hover { background: var(--o6, rgba(255,255,255,.06)); color: var(--tx1, #eafdff); }
.cpal-x:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }
.cpal-x-ic { display: none; }
.cpal-x-ic svg { width: 16px; height: 16px; }

.cpal kbd, .cpal-x-kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px;
    font: 600 10.5px/1 var(--font-family, inherit); color: var(--mut1, #8aa0ad);
    background: var(--o6, rgba(255,255,255,.06)); border: 1px solid var(--o10, rgba(255,255,255,.1));
}

/* ── Rayons (2026-10-12, Arthur : « trop de scroll, organise par catégorie ») : un rail à gauche, la liste du rayon à droite. Lignes
   resserrées (36 px), pastilles de verrou discrètes : un rayon tient en général sans défiler. ── */
.cpal-corps { flex: 1 1 auto; min-height: 0; display: flex; }
.cpal-rail {
    flex: 0 0 216px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 8px;
    border-right: 1px solid var(--o8, rgba(255,255,255,.08)); background: color-mix(in srgb, var(--brand, #00B1CF) 4%, transparent);
}
.cpal-rail-b {
    flex: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 5px 8px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent; background: transparent; color: var(--tx2, #c2cdd6); text-align: left;
    font: 600 12.5px/1.2 var(--font-family, inherit); transition: background .1s, color .1s;
}
.cpal-rail-b:hover { background: var(--o6, rgba(255,255,255,.06)); color: var(--tx1, #eafdff); }
.cpal-rail-b.on { color: var(--tx1, #eafdff); background: color-mix(in srgb, var(--brand, #00B1CF) 15%, transparent);
                  border-color: color-mix(in srgb, var(--brand, #00B1CF) 34%, transparent); }
.cpal-rail-ic { flex: none; display: inline-flex; color: var(--mut1, #8aa0ad); }
.cpal-rail-ic svg { width: 14px; height: 14px; }
.cpal-rail-b.on .cpal-rail-ic { color: var(--brand-strong, var(--brand, #00B1CF)); }
.cpal-rail-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpal-rail-n { flex: none; font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .cpal-rail { background: rgba(15, 38, 56, .035); border-right-color: rgba(15, 38, 56, .1); }
html[data-theme="light"] .cpal-rail-b { color: #3b4b56; }
html[data-theme="light"] :is(.cpal-rail-b:hover, .cpal-rail-b.on) { color: #10212b; }
html[data-theme="light"] .cpal-rail-b:hover { background: rgba(15, 38, 56, .06); }
html[data-theme="light"] .cpal-rail-ic, html[data-theme="light"] .cpal-rail-n { color: #5b6b76; }
html[data-theme="light"] .cpal-rail-b.on .cpal-rail-ic { color: var(--brand-strong, #007a90); }

.cpal-liste { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 8px; }
.cpal-grp + .cpal-grp { margin-top: 2px; }
.cpal-grp-t {
    padding: 8px 8px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--mut1, #8aa0ad);   /* 12/10 : plus collé ni opaque : il découpait des bandes dans le dégradé ; un rayon tient sans défiler */
}
html[data-theme="light"] .cpal-grp-t { color: #5b6b76; }

.cpal-o {
    display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 3px 8px 3px 10px; border-radius: 8px; cursor: pointer;
    color: var(--tx1, #eafdff); border: 1px solid transparent; user-select: none;
}
html[data-theme="light"] .cpal-o { color: #10212b; }
.cpal-o.actif { background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); border-color: color-mix(in srgb, var(--brand, #00B1CF) 32%, transparent); }
.cpal:not(.cpal-clavier) .cpal-o:not(.actif):hover { background: var(--o4, rgba(255,255,255,.04)); }
.cpal-o-ic {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
    background: var(--o6, rgba(255,255,255,.06)); color: var(--mut2, #b6c4cc);
}
.cpal-o-ic svg { width: 15px; height: 15px; }
.cpal-o.actif .cpal-o-ic { background: color-mix(in srgb, var(--brand, #00B1CF) 20%, transparent); color: var(--brand-strong, var(--brand, #00B1CF)); }
.cpal-o-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cpal-o-l { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpal-o-d { font-size: 11.5px; line-height: 1.3; color: var(--mut1, #8aa0ad); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpal-o-etat, .cpal-o-actuel {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 650; white-space: nowrap;
}
/*  12/10 : le verrou se lit sans crier (il était en pastille ambre bordée sur chaque ligne d'un rayon verrouillé). */
.cpal-o-etat { color: color-mix(in srgb, var(--st-amber, #fbbf24) 85%, var(--tx1, #eafdff)); background: color-mix(in srgb, var(--st-amber, #fbbf24) 9%, transparent); border: 0; }
html[data-theme="light"] .cpal-o-etat { color: #7a4f00; background: #fdf3df; }
.cpal-o-actuel { color: var(--st-green, #34d399); }
html[data-theme="light"] .cpal-o-actuel { color: #067647; }
.cpal-o.verrou .cpal-o-l { color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .cpal-o.verrou .cpal-o-l { color: #3b4b56; }
.cpal-o-entree { flex: 0 0 auto; font-size: 13px; color: var(--mut1, #8aa0ad); }
.cpal-o.iku-ia .cpal-o-ic { color: var(--brand-strong, var(--brand, #00B1CF)); }

.cpal-vide { margin: 18px 10px; font-size: 13px; line-height: 1.5; color: var(--mut1, #8aa0ad); }

.cpal-pied {
    flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 14px;
    border-top: 1px solid var(--o8, rgba(255,255,255,.08)); font-size: 11.5px; color: var(--mut1, #8aa0ad);
}
.cpal-pied span { display: inline-flex; align-items: center; gap: 4px; }
.cpal-pied-cop { margin-left: auto; }

/* Mode rendez-vous : toute entrée d'IA s'efface (comme ailleurs .iku-ia). */
html[data-rdv="1"] .cpal .iku-ia { display: none !important; }

/* ── La commande amenée à l'écran après l'ouverture d'une vue (« Figer », un onglet…) ── */
.cpal-repere { outline: 2px solid var(--brand, #00B1CF) !important; outline-offset: 3px !important; border-radius: 8px;
               animation: cpal-repere 1.2s ease-out 2; }
@keyframes cpal-repere { 0% { outline-color: var(--brand, #00B1CF); } 50% { outline-color: transparent; } 100% { outline-color: var(--brand, #00B1CF); } }
html[data-motion="reduites"] .cpal-repere { animation: none; }
@media (prefers-reduced-motion: reduce) { .cpal-repere { animation: none; } }

/* ── Mat et Papier : surfaces pleines du style, filets du thème ── */
html[data-style="mat"] .cpal { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .38) !important; }
html[data-style="mat"][data-theme="light"] .cpal { box-shadow: 0 16px 40px rgba(15, 38, 56, .18) !important; }
html[data-style="mat"] .cpal-grp-t { background: transparent !important; }
html[data-style="mat"] :is(.cpal-tete, .cpal-pied) { border-color: var(--mt-trait) !important; }
html[data-style="mat"] .cpal-o.actif { background: var(--mt-carte-2) !important; border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, var(--mt-trait)) !important; }
html[data-papier] .cpal { border-radius: 6px !important; box-shadow: var(--pp-ombre-fen) !important; }
html[data-papier] :is(.cpal-o, .cpal-o-ic, .cpal kbd) { border-radius: 4px !important; }
html[data-papier] .cpal-grp-t { font-family: var(--pp-serif); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
html[data-papier] .cpal-tete { border-bottom: 1px solid var(--pp-trait-fort) !important; }
html[data-style="mat"] .cpal-rail { background: var(--mt-carte-2) !important; border-color: var(--mt-trait) !important; }
html[data-style="mat"] .cpal-rail-b.on { background: var(--mt-carte) !important; border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, var(--mt-trait)) !important; }
html[data-papier] .cpal-rail { border-right: 1px solid var(--pp-trait-fort) !important; background: transparent !important; }
html[data-papier] .cpal-rail-b { border-radius: 4px !important; }
html[data-style="mat"] .cpal-tete:focus-within { border-bottom-color: color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent) !important; }

/* ── Compact ── */
html[data-density="compact"] .cpal-o { min-height: 32px; padding: 3px 8px; gap: 10px; }
html[data-density="compact"] .cpal-o-ic { width: 24px; height: 24px; }
html[data-density="compact"] .cpal-grp-t { padding: 6px 8px 2px; }
html[data-density="compact"] .cpal-champ { height: 34px; }
html[data-density="compact"] .cpal-rail-b { min-height: 28px; padding: 3px 8px; }
/*  Hauteur FIXE quand le rail est là : passer d'un rayon à l'autre ne fait pas sauter la fenêtre. */
.cpal.cpal-rayons { height: min(600px, calc(100vh - 20vh)); height: min(600px, calc(100dvh - 20dvh)); }
.cpal-parcours .cpal-o-d { display: none; }

/* ── Téléphone : plein écran ── */
/*  Passe mobile (2026-10-11) : plein écran ANCRÉ (haut et bas à 0), jamais 100vh ni 100dvh : sur iPhone le vh se mesure barres
    repliées et la liste passait sous la barre du navigateur. Les libellés longs reviennent à la ligne (« Reporting : précision
    des prévisions » était coupé à 375 px). */
@media (max-width: 640px) {
    .cpal, .cpal.cpal-rayons { left: 0; top: 0; bottom: 0; transform: none; width: 100vw; max-height: none; height: auto; border-radius: 0; border: 0; animation: none; }
    /*  Rayons : un ruban de pastilles sous le champ, qui défile de côté ; la liste dessous. */
    .cpal-corps { flex-direction: column; }
    .cpal-rail { flex: none; flex-direction: row; gap: 6px; padding: 8px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
                 border-right: 0; border-bottom: 1px solid var(--o8, rgba(255,255,255,.08)); }
    .cpal-rail::-webkit-scrollbar { display: none; }
    .cpal-rail-b { width: auto; min-height: 36px; padding: 4px 12px; border-radius: 999px; border-color: var(--o10, rgba(255,255,255,.1)); }
    .cpal-rail-l { overflow: visible; }
    html[data-papier] .cpal-rail { border-right: 0 !important; border-bottom: 1px solid var(--pp-trait-fort) !important; }
    .cpal-o-l { white-space: normal; }
    .cpal-tete { padding: 8px 8px 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); }
    .cpal-x { width: 44px; height: 44px; }
    .cpal .cpal-x-kbd { display: none; }
    .cpal .cpal-x-ic { display: inline-flex; }
    .cpal-o { min-height: 48px; }
    .cpal-o-d { white-space: normal; }
    .cpal-pied { display: none; }
    .cpal-liste { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    html[data-papier] .cpal { border-radius: 0 !important; }
}
/*  Téléphone en paysage (2026-10-11) : 375 px de haut, la fenêtre descendait à 12 % et le pied des raccourcis clavier (inutiles
    au doigt) mangeait une ligne : trois résultats visibles. La fenêtre monte en haut, prend la hauteur, sans le pied. */
@media (max-height: 500px) and (min-width: 641px) {
    .cpal { top: 8px; max-height: calc(100vh - 16px); max-height: calc(100svh - 16px); }
    .cpal.cpal-rayons { height: calc(100vh - 16px); height: calc(100svh - 16px); }
    .cpal-pied { display: none; }
}
@media (pointer: coarse) { .cpal-pied { display: none; } }