/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   HUB PERSONNALISABLE (2026-10-11, personnalisation U4) : ordre et cartes masquées du hub, chiffres clés du bandeau.
   Mécanique : Pages/FecLoader.Hub.cs (portées dossier puis navigateur), panneau Shared/HubPersonnaliser.razor.
   • .hubp-grille enveloppe les cartes d'intention, les bandeaux (Assistant IA, Cash à relancer) et la synthèse. À la disposition
     par défaut, elle reproduit .intent-zone (colonne centrée, MÊME écart, Compact compris par gap: inherit) : rien ne bouge.
   • .hubp-perso (ordre changé ou carte masquée) : mosaïque qui remplit ses rangées dans l'ordre choisi (order en ligne sur chaque
     carte) ; .intent-cards et .intent-banners-row ne font plus de boîte (display: contents). Une colonne sous 768 px.
   • .hubp-edition (panneau ouvert) : les cartes masquées réapparaissent en filigrane, les cartes ne s'ouvrent pas.
   Feuille chargée après les feuilles de style (index.html) ; Mat et Papier en fin de feuille.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.hubp-grille {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: inherit;            /* celui de .intent-zone : 20 px, 10 px en Compact */
    width: 100%;
    position: relative;      /* l'étiquette de la vitrine posée sur la rangée des bandeaux (display: contents en mosaïque) */
}

/* ── Mosaïque ordonnée ── */
.hubp-grille.hubp-perso {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    max-width: var(--hub-col, 1320px);
}
.hubp-perso > .intent-cards,
.hubp-perso > .intent-banners-row { display: contents; }
/*  Trois cartes au plus par rangée, dans les proportions d'origine (1 | 1,4 | 1) ; deux bandeaux par rangée. Une rangée incomplète
    s'étire (flex-grow) : une carte seule prend la largeur. */
.hubp-perso .intent-card:not(.intent-card-banner) { flex: 1 1 calc((100% - 33px) / 3.4); min-width: 0; }
.hubp-perso .intent-card-hero:not(.intent-card-banner) { flex: 1.4 1 calc((100% - 33px) * 1.4 / 3.4); }   /* :not() : même poids que la règle des cartes, sinon elle l'emporte (13/10) */
.hubp-perso .intent-card-banner { flex: 1 1 calc((100% - 17px) / 2); min-width: 0; margin: 0; justify-content: center; }
/*  2026-10-13 (Arthur : « l'encart fait un peu tache ») : l'ancre de la synthèse prenait toute la largeur de la grille (1 936 px à
    2 000 px d'écran) quand la carte qu'elle porte fait --hub-col (1 320 px), centrée : le cadre de réorganisation et la poignée
    tombaient loin de la carte. L'ancre a désormais la largeur de la carte. */
.hubp-perso > .hub-synth-anchor { flex: 1 1 100%; min-width: 0; }
.hubp-grille > .hub-synth-anchor { max-width: var(--hub-col, 1320px); margin-inline: auto; }
html[data-density="compact"] .hubp-grille.hubp-perso { gap: 10px; }
@media (max-width: 768px) {
    .hubp-grille.hubp-perso { gap: 8px; }
    .hubp-perso .intent-card:not(.intent-card-banner),
    .hubp-perso .intent-card-banner { flex-basis: 100%; }
}

/* ── Cartes masquées ── */
.hubp-grille:not(.hubp-edition) .hubp-masque { display: none !important; }

/* ── Mode édition (panneau ouvert) et réorganisation (menu d'une carte, 2026-10-13) : cartes non cliquables, poignées visibles ── */
.hubp-edition [data-hubp],
.hubd-reorg [data-hubp] {
    pointer-events: none;
    outline: 1.5px dashed color-mix(in srgb, var(--brand) 50%, transparent);
    outline-offset: 3px;
    transition: opacity .2s ease, outline-color .2s ease;
}
.hubp-edition .hubp-masque { opacity: .32; filter: saturate(.25); outline-color: color-mix(in srgb, var(--tx1, #888) 30%, transparent); }
/*  2026-10-13 (Arthur : « les autres encarts ont un border-radius et pas celui de synthèse ») : l'ancre de la synthèse n'a ni arrondi
    ni la marge de sa carte (.hubsynth, 8 px au-dessus) ; le cadre se pose donc sur la CARTE, dont il suit l'arrondi dans chaque style. */
.hubp-edition .hub-synth-anchor,
.hubd-reorg .hub-synth-anchor { outline: 0; }
.hubp-edition .hub-synth-anchor > .hubsynth,
.hubd-reorg .hub-synth-anchor > .hubsynth {
    outline: 1.5px dashed color-mix(in srgb, var(--brand) 50%, transparent);
    outline-offset: 3px;
}
.hubp-edition .hub-synth-anchor.hubp-masque > .hubsynth { outline-color: color-mix(in srgb, var(--tx1, #888) 30%, transparent); }

/* ── Bandeau des chiffres clés ── */
.kpi.kpi-verrou .kpi-v { color: var(--mut1); }
.kpi.kpi-verrou .kpi-ico { opacity: .7; }

/* ── « Toutes les vues » : les cartes masquées ── */
.hubp-vue-masquee .intent-analyses-btn-icon { opacity: .75; }

/* ── Fenêtre Apparence : la ligne « Hub » ── */
.appx-hubp-ligne .appx-pal-act { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
/* 2026-10-13 : un champ de la section « Écran d'ouverture » (analyses.css), au bout de la rangée des listes. */

/* ═══ Panneau « Personnaliser le hub » ═══ */
/*  14/10 : panneau ouvert, le hub se range à sa gauche au lieu de passer dessous (les poignées et le « … » des cartes de droite
    étaient inaccessibles). Largeur réservée = panneau (384 px) + ses 16 px de bord + 16 px d'air. Sous 900 px le panneau est une
    feuille du bas (≤ 640 px) ou couvre la moitié de l'écran : rien ne se pousse. */
@media (min-width: 900px) {
    .intent-zone.hubp-pousse { padding-right: calc(min(384px, 100vw - 32px) + 32px); transition: padding-right .22s ease; }
}
.hubp-panneau {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 5200;
    width: min(384px, calc(100vw - 32px));
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    display: flex;
    flex-direction: column;
    background: var(--modal-surf, var(--surf-pop));
    color: var(--tx1);
    border: 1px solid var(--o14, rgba(255, 255, 255, .14));
    border-radius: 14px;
    box-shadow: 0 22px 56px rgba(var(--shadow-col, 0, 0, 0), calc(.55 * var(--shadow-mul, 1)));
    font-family: var(--font-family);
    animation: hubpEntree .2s ease-out;
}
@keyframes hubpEntree { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.hubp-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--o8); }
.hubp-titre { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--tx1); }
.hubp-titre:focus { outline: none; }
.hubp-titre:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.hubp-x { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--mut1); cursor: pointer; }
.hubp-x:hover { background: var(--o6); color: var(--tx1); }

.hubp-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px 6px; }
.hubp-source { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 10px; padding: 8px 10px; border-radius: 9px; font-size: 12px; line-height: 1.4; color: var(--tx2, var(--tx1));
    background: color-mix(in srgb, var(--brand) 8%, transparent); }
.hubp-source svg { flex: 0 0 auto; margin-top: 1px; color: var(--brand-strong, var(--brand)); }
.hubp-portee { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hubp-portee-l { font-size: 11.5px; font-weight: 600; color: var(--mut1); }
.hubp-note, .hubp-aide { margin: 6px 0 10px; font-size: 11.5px; line-height: 1.45; color: var(--mut1); }
.hubp-h3 { margin: 16px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mut2, var(--mut1)); }

.hubp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hubp-item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 8px;
    border: 1px solid var(--o10, rgba(255, 255, 255, .1));
    border-radius: 10px;
    background: var(--o3, rgba(255, 255, 255, .03));
    cursor: grab;
    transition: border-color .15s ease, background .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.hubp-item:active { cursor: grabbing; }
.hubp-item.est-glisse { opacity: .45; }
.hubp-item.est-cible { border-color: var(--brand); box-shadow: inset 0 2px 0 var(--brand); }
.hubp-item.vient-de-bouger { animation: hubpBouge .7s ease-out; }
@keyframes hubpBouge { from { background: color-mix(in srgb, var(--brand) 16%, transparent); } to { background: var(--o3, transparent); } }
.hubp-poignee { display: inline-grid; place-items: center; color: var(--mut2, var(--mut1)); }
.hubp-rang { min-width: 14px; text-align: center; font-size: 11px; font-weight: 600; color: var(--mut2, var(--mut1)); font-variant-numeric: tabular-nums; }
.hubp-nom { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tx1); }
.hubp-nom > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubp-item.est-masquee .hubp-nom > span { color: var(--mut1); font-weight: 500; }
.hubp-etat { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--mut1); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--o12, rgba(255, 255, 255, .12)); }
.hubp-btn { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--o10, rgba(255, 255, 255, .1)); border-radius: 8px;
    background: transparent; color: var(--tx2, var(--tx1)); cursor: pointer; transition: background .13s, color .13s, border-color .13s; }
.hubp-btn:hover:not(:disabled) { color: var(--brand-strong, var(--brand)); border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.hubp-btn:disabled { opacity: .3; cursor: default; }
.hubp-btn:focus-visible, .hubp-x:focus-visible, .hubp-ok:focus-visible, .hubp-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.hubp-oeil[aria-pressed="false"] { color: var(--mut1); border-style: dashed; }

.hubp-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hubp-chiffre { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hubp-chiffre-l { font-size: 11px; font-weight: 600; color: var(--mut1); }
.hubp-select { width: 100%; min-height: 36px; padding: 6px 8px; font: inherit; font-size: 12.5px; color: var(--tx1); background: var(--o4, rgba(255, 255, 255, .04));
    border: 1px solid var(--o12, rgba(255, 255, 255, .12)); border-radius: 8px; cursor: pointer; }
.hubp-select option { background: var(--modal-surf, var(--surf-pop, #fff)); color: var(--tx1); }

.hubp-annonce { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hubp-msg { margin: 10px 0 4px; font-size: 11.5px; line-height: 1.4; color: var(--tx2, var(--tx1)); padding: 7px 10px; border-radius: 8px; border: 1px solid var(--o10, rgba(255, 255, 255, .1)); }

.hubp-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--o8); }
.hubp-pied .appx-pal-act { flex: 0 1 auto; white-space: normal; }
.hubp-ok { margin-left: auto; padding: 8px 18px; border: 0; border-radius: 8px; background: var(--brand); color: var(--brand-contrast, #fff); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.hubp-ok:hover { background: var(--brand-strong, var(--brand)); }

/* Compact : lignes plus serrées sur grand écran (les cibles tactiles gardent leur taille). */
@media (min-width: 641px) {
    html[data-density="compact"] .hubp-item { padding-top: 3px; padding-bottom: 3px; }
    html[data-density="compact"] .hubp-btn { width: 26px; height: 26px; }
    html[data-density="compact"] .hubp-liste { gap: 4px; }
}

/* Téléphone : feuille du bas ; on réordonne aux boutons (le glisser-déposer reste à la souris). */
@media (max-width: 640px) {
    .hubp-panneau {
        top: auto; left: 0; right: 0; bottom: 0; width: auto;
        max-height: 82vh; max-height: 82dvh;
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation-name: hubpMonte;
    }
    @keyframes hubpMonte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    .hubp-poignee { display: none; }
    .hubp-item { grid-template-columns: auto minmax(0, 1fr) auto auto auto; cursor: default; }
    .hubp-btn { width: 40px; height: 40px; }
    .hubp-x { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
    .hubp-chiffres { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hubp-panneau, .hubp-item.vient-de-bouger { animation: none; }
    .hubp-item, .hubp-edition [data-hubp] { transition: none; }
}
@media print {
    .hubp-panneau { display: none !important; }
    .hubp-edition [data-hubp], .hubp-edition .hub-synth-anchor > .hubsynth { outline: 0 !important; }
}

/* ── Mat (et Papier, qui le prolonge) : surfaces pleines, sans flou ni halo ── */
html[data-style="mat"] .hubp-panneau { background: var(--mt-carte); border-color: var(--mt-trait); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); }
html[data-style="mat"][data-theme="light"] .hubp-panneau { box-shadow: 0 12px 32px rgba(15, 38, 56, .14); }
html[data-style="mat"] .hubp-tete, html[data-style="mat"] .hubp-pied { border-color: var(--mt-trait); }
html[data-style="mat"] .hubp-item { background: var(--mt-carte-2); border-color: var(--mt-trait); }
html[data-style="mat"] .hubp-source { background: var(--mt-carte-2); border: 1px solid var(--mt-trait); }
html[data-style="mat"] .hubp-select { background: var(--mt-carte-2); border-color: var(--mt-trait); }
html[data-style="mat"] .hubp-select option { background: var(--mt-carte); }

/* ── Papier : allure de document imprimé ── */
html[data-papier] .hubp-panneau { border-radius: 6px; box-shadow: var(--pp-ombre-fen); }
html[data-papier] .hubp-titre { font-family: var(--pp-serif); font-size: 16px; font-weight: 600; letter-spacing: 0; }
html[data-papier] .hubp-item { border-radius: 4px; }
html[data-papier] .hubp-source { border-radius: 4px; }
html[data-papier] .hubp-btn, html[data-papier] .hubp-select { border-radius: 4px; }
html[data-papier] .hubp-ok { border-radius: 4px; background: var(--pp-encre); color: var(--pp-carte); }
@media (max-width: 640px) { html[data-papier] .hubp-panneau { border-radius: 8px 8px 0 0; } }

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   PERSONNALISER DIRECTEMENT SUR LES CARTES (2026-10-13) : poignée et bouton « … » dans le coin de chaque carte
   (Shared/HubCarteOutils), menu de la carte (Shared/HubCarteMenu), glisser-déposer (js/hub-direct.js), avis « Carte masquée ·
   Annuler », puce des cartes masquées, barre de réorganisation. Mécanique : Pages/FecLoader.HubDirect.cs. Préfixe hubd-.
   • .hubd-actif sur .hubp-grille : la personnalisation est permise (sinon rien n'est rendu ni écouté).
   • Les outils sont posés par-dessus le contenu (absolus), ils ne décalent rien ; survol ou focus dans la carte les montre ;
     au doigt (pas de survol), le bouton « … » reste visible, la poignée vient avec la réorganisation.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* La synthèse et l'Académie servent d'ancre à leur coin (les cartes d'intention le sont déjà). */
.hubd-actif .hub-synth-anchor,
.hubd-actif .aca-carte { position: relative; }
/* Une carte indisponible (grisée) garde son survol : sinon ses outils ne viendraient jamais à la souris. Son clic reste gardé. */
.hubp-grille.hubd-actif .intent-card-disabled { pointer-events: auto; }
.hubp-grille.hubd-actif .intent-card-disabled:hover { transform: none; box-shadow: none; }

.hubd-outils {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 10px;
    background: var(--surf-2, #102733);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 22%, transparent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
html[data-theme="light"] .hubd-outils { background: #fff; border-color: rgba(15, 38, 56, .14); box-shadow: 0 6px 18px rgba(30, 41, 59, .16); }
/* Cartes pleine largeur : la synthèse a ses propres gestes dans son coin (« Piloter mon prévisionnel »), et le coin bas droit de la page
   est sous les boutons flottants (l'Académie y finit le hub) : leurs outils se posent à cheval sur le bord haut, en retrait. */
.hubp-grille .hub-synth-anchor > .hubd-outils,
.hubp-grille .aca-carte > .hubd-outils { top: -16px; right: 64px; }
[data-hubp]:hover > .hubd-outils,
[data-hubp]:focus-within > .hubd-outils,
.hubd-reorg [data-hubp] > .hubd-outils,
.hubp-edition [data-hubp] > .hubd-outils,
.hubd-outils.est-ouvert { opacity: 1; pointer-events: auto; }

.hubd-poignee,
.hubd-menu-btn {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mut2, var(--mut1));
    font: inherit;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.hubd-poignee { cursor: grab; touch-action: none; }
.hubd-poignee:active { cursor: grabbing; }
.hubd-menu-btn svg { width: 16px; height: 16px; }
.hubd-poignee:hover,
.hubd-menu-btn:hover,
.hubd-menu-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); color: var(--tx1); }
.hubd-poignee:focus-visible,
.hubd-menu-btn:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }
html[data-theme="light"] .hubd-poignee,
html[data-theme="light"] .hubd-menu-btn { color: #4f6472; }
html[data-theme="light"] .hubd-poignee:hover,
html[data-theme="light"] .hubd-menu-btn:hover,
html[data-theme="light"] .hubd-menu-btn[aria-expanded="true"] { color: #10212b; }

/* Au doigt : pas de survol. Le bouton « … » reste là, sobre, cible de 44 px ; la poignée vient avec la réorganisation. */
@media (hover: none) {
    .hubd-outils,
    html[data-theme="light"] .hubd-outils { top: 2px; right: 2px; opacity: 1; pointer-events: auto; background: transparent; border-color: transparent; box-shadow: none; padding: 0; gap: 0; }
    .hubd-poignee { display: none; }
    .hubd-reorg .hubd-poignee,
    .hubp-edition .hubd-poignee { display: inline-grid; }
    .hubd-poignee,
    .hubd-menu-btn { width: 44px; height: 44px; background: transparent; }
    .hubd-menu-btn svg,
    .hubd-poignee svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; border-radius: 999px; background: var(--o8, rgba(255, 255, 255, .08)); }
    html[data-theme="light"] .hubd-menu-btn svg,
    html[data-theme="light"] .hubd-poignee svg { background: rgba(15, 38, 56, .07); }
    .hubd-poignee:hover,
    .hubd-menu-btn:hover { background: transparent; }
    /* L'appui long ouvre le menu : ni bulle de lien ni loupe de sélection sur la carte. */
    .hubd-actif [data-hubp] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ── Glisser en cours : la carte reste dans la grille, en pointillé (l'emplacement d'arrivée) ; une étiquette suit le pointeur ── */
.hubp-grille.hubd-en-cours [data-hubp] { transition: none !important; }
.hubp-grille.hubd-en-cours [data-hubp]:hover { transform: none; }
.hubp-grille.hubd-en-cours .hubd-origine {
    outline: 2px dashed var(--brand, #00B1CF) !important;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--brand, #00B1CF) 7%, transparent) !important;
}
/* .vit-corps est en display: contents (vitrine) : son opacité ne vaut rien, on atténue ses enfants. */
.hubp-grille.hubd-en-cours .hubd-origine > :not(.hubd-outils, .vit-corps),
.hubp-grille.hubd-en-cours .hubd-origine > .vit-corps > * { opacity: .25; }
.hubd-fantome {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 280px;
    padding: 9px 14px 9px 10px;
    border-radius: 12px;
    background: var(--surf-2, #102733);
    color: var(--tx1, #eafdff);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 50%, transparent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    cursor: grabbing;
}
.hubd-fantome > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hubd-fantome-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--brand-strong, var(--brand, #00B1CF));
    background: color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent); }
html[data-theme="light"] .hubd-fantome { background: #fff; color: #10212b; box-shadow: 0 16px 40px rgba(30, 41, 59, .24); }

/* ── Menu de la carte (niveau haut, placé par le script) ── */
.hubd-menu {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5300;
    min-width: 230px;
    max-width: calc(100vw - 16px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    text-align: left;
    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);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.hubd-menu:not(.est-place) { visibility: hidden; }
html[data-theme="light"] .hubd-menu { background: #fff; color: #10212b; box-shadow: 0 18px 44px rgba(30, 41, 59, .2); }
.hubd-menu-t { max-width: 260px; padding: 6px 8px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mut1, #8aa0ad); }
.hubd-mi {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.hubd-mi:hover:not(:disabled),
.hubd-mi:focus-visible { background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent); }
.hubd-mi:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: -2px; }
.hubd-mi:disabled { opacity: .4; cursor: default; }
.hubd-mi-ic { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px;
    background: var(--o6, rgba(255, 255, 255, .06)); color: var(--mut2, #b6c4cc); }
.hubd-mi-ic svg { width: 14px; height: 14px; }
html[data-theme="light"] .hubd-mi-ic { background: rgba(15, 38, 56, .06); color: #4f6472; }
.hubd-mi[data-hubd-action="masquer"] .hubd-mi-ic { color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .hubd-mi[data-hubd-action="masquer"] .hubd-mi-ic { color: #8a5a00; }
.hubd-mi-l { flex: 1 1 auto; min-width: 0; }
.hubd-menu-sep { height: 1px; margin: 4px 6px; background: var(--o8, rgba(255, 255, 255, .08)); }
html[data-theme="light"] .hubd-menu-sep { background: rgba(15, 38, 56, .1); }
@media (pointer: coarse) { .hubd-mi { min-height: 44px; } }
html[data-density="compact"] .hubd-mi { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }

/* ── Avis « Carte masquée · Annuler » ── */
.hubd-avis {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 5250;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 6px 6px 6px 14px;
    border-radius: 12px;
    background: var(--surf-2, #102733);
    color: var(--tx1, #eafdff);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 24%, transparent);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 600;
    animation: hubdAvis .2s ease-out;
}
@keyframes hubdAvis { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
html[data-theme="light"] .hubd-avis { background: #fff; color: #10212b; box-shadow: 0 16px 40px rgba(30, 41, 59, .2); }
.hubd-avis-ic { display: inline-grid; place-items: center; color: var(--mut1, #8aa0ad); }
.hubd-avis-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubd-avis-btn { flex: 0 0 auto; min-height: 32px; padding: 5px 12px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700;
    background: color-mix(in srgb, var(--brand, #00B1CF) 18%, transparent); color: var(--brand-strong, var(--brand, #00B1CF)); }
.hubd-avis-btn:hover { background: color-mix(in srgb, var(--brand, #00B1CF) 28%, transparent); }
.hubd-avis-x { flex: 0 0 auto; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--mut1, #8aa0ad); cursor: pointer; }
.hubd-avis-x:hover { background: var(--o6, rgba(255, 255, 255, .06)); color: var(--tx1); }
.hubd-avis-btn:focus-visible,
.hubd-avis-x:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }
@media (max-width: 640px) {
    .hubd-avis { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}
@media (pointer: coarse) { .hubd-avis-btn, .hubd-avis-x { min-height: 44px; min-width: 44px; } }

/* ── Puce « N cartes masquées · Afficher » et sa liste ── */
.hubd-masquees { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: var(--hub-col, 1320px); margin: 2px auto 0; }
.hubd-masquees-puce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px 6px 14px;
    border-radius: 999px;
    border: 1px dashed var(--o18, rgba(255, 255, 255, .18));
    background: transparent;
    color: var(--mut2, var(--mut1));
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.hubd-masquees-puce:hover { border-color: color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); color: var(--tx1); }
.hubd-masquees-puce:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
.hubd-masquees-act { color: var(--brand-strong, var(--brand, #00B1CF)); font-weight: 700; }
.hubd-masquees-act::before { content: "·"; margin-right: 8px; color: var(--mut1); font-weight: 600; }
.hubd-masquees-chev { display: inline-grid; transition: transform .15s ease; }
.hubd-masquees.est-ouvert .hubd-masquees-chev { transform: rotate(180deg); }
html[data-theme="light"] .hubd-masquees-puce { border-color: rgba(15, 38, 56, .22); color: #4f6472; }
.hubd-masquees-liste {
    list-style: none;
    margin: 0;
    padding: 6px;
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 12px;
    border: 1px solid var(--o10, rgba(255, 255, 255, .1));
    background: var(--o3, rgba(255, 255, 255, .03));
}
html[data-theme="light"] .hubd-masquees-liste { background: #fff; border-color: rgba(15, 38, 56, .12); }
.hubd-masquees-l,
.hubd-masquees-tout { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 3px 3px 10px; font-size: 13px; font-weight: 600; }
.hubd-masquees-tout { justify-content: flex-end; border-top: 1px solid var(--o8, rgba(255, 255, 255, .08)); margin-top: 2px; padding-top: 6px; }
.hubd-masquees-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubd-masquees-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 32%, transparent);
    background: transparent;
    color: var(--brand-strong, var(--brand, #00B1CF));
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.hubd-masquees-btn:hover { background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent); }
.hubd-masquees-btn:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }
@media (pointer: coarse) { .hubd-masquees-puce, .hubd-masquees-btn { min-height: 44px; } }

/* ── Barre de réorganisation ── */
.hubd-reorg-barre {
    position: sticky;
    top: 8px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: var(--hub-col, 1320px);
    padding: 6px 6px 6px 14px;
    border-radius: 12px;
    background: var(--surf-2, #102733);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    color: var(--tx1);
    font-size: 13px;
    font-weight: 600;
}
html[data-theme="light"] .hubd-reorg-barre { background: #fff; box-shadow: 0 8px 24px rgba(30, 41, 59, .14); }
.hubd-reorg-ic { display: inline-grid; place-items: center; color: var(--brand-strong, var(--brand, #00B1CF)); }
.hubd-reorg-t { flex: 1 1 auto; min-width: 0; }
.hubd-reorg-ok { flex: 0 0 auto; min-height: 34px; padding: 6px 16px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-weight: 700;
    background: var(--brand, #00B1CF); color: var(--brand-contrast, #fff); }
.hubd-reorg-ok:hover { background: var(--brand-strong, var(--brand, #00B1CF)); }
.hubd-reorg-ok:focus-visible { outline: 2px solid var(--tx1); outline-offset: 2px; }
@media (pointer: coarse) { .hubd-reorg-ok { min-height: 44px; } }

/* Annonces pour les lecteurs d'écran (visuellement masquées). */
.hubd-annonce { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mode rendez-vous : on présente, on ne réarrange pas. */
html[data-rdv="1"] .hubd-outils,
html[data-rdv="1"] .hubd-masquees,
html[data-rdv="1"] .hubd-reorg-barre,
html[data-rdv="1"] .hubd-avis { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .hubd-outils, .hubd-poignee, .hubd-menu-btn, .hubd-masquees-chev { transition: none; }
    .hubd-avis { animation: none; }
}
@media print {
    .hubd-outils, .hubd-menu, .hubd-avis, .hubd-masquees, .hubd-reorg-barre, .hubd-fantome { display: none !important; }
    .hubd-reorg [data-hubp], .hubd-reorg .hub-synth-anchor > .hubsynth { outline: 0 !important; }
}

/* ── Mat (et Papier, qui le prolonge) : surfaces pleines ── */
html[data-style="mat"] :is(.hubd-outils, .hubd-menu, .hubd-avis, .hubd-fantome, .hubd-reorg-barre) { background: var(--mt-carte) !important; border-color: var(--mt-trait) !important; }
html[data-style="mat"] .hubd-masquees-liste { background: var(--mt-carte-2); border-color: var(--mt-trait); }
html[data-style="mat"] .hubd-menu-sep { background: var(--mt-trait); }
@media (hover: none) { html[data-style="mat"] .hubd-outils { background: transparent !important; border-color: transparent !important; } }
html[data-papier] :is(.hubd-menu, .hubd-avis, .hubd-fantome, .hubd-reorg-barre, .hubd-masquees-liste) { border-radius: 6px; }
html[data-papier] :is(.hubd-mi, .hubd-mi-ic, .hubd-poignee, .hubd-menu-btn, .hubd-avis-btn, .hubd-masquees-btn, .hubd-reorg-ok) { border-radius: 4px; }
html[data-papier] .hubd-menu-t { font-family: var(--pp-serif); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; }

/* ── « Toutes les vues » dans la grille (2026-10-13, Arthur : « déplaçable mais pas masquable ») : carte « vues » du registre,
      ses outils à cheval sur son filet haut, en retrait du chevron ; pleine rangée, à sa largeur de tiroir. ── */
.hubd-actif .intent-allviews { position: relative; }
.hubp-grille .intent-allviews > .hubd-outils { top: -16px; right: 56px; }
.hubp-perso > .intent-allviews { flex: 1 1 100%; max-width: min(var(--hub-col, 1320px), 100%); margin-inline: auto; }
.hubp-edition .intent-allviews,
.hubd-reorg .intent-allviews { border-radius: 12px; }

/* ── Outils des cartes (poignée, « … ») : SEULEMENT en mode édition du hub (2026-10-13, Arthur : « je ne veux pas afficher les ...
      pour chaque élément sauf en mode édition du hub »). Ni au survol, ni au focus, ni à demeure sur un écran sans survol (un
      ordinateur à écran tactile se déclare « hover: none » : les « … » restaient sur toutes les cartes). On y entre par « Personnaliser
      le hub » (panneau : .hubp-edition) ou « Réorganiser les cartes » (.hubd-reorg) ; le clic droit (ou l'appui long) sur une carte
      ouvre toujours son menu (.est-ouvert). display: none : pas de bouton invisible dans l'ordre de tabulation. ── */
.hubp-grille:not(.hubd-reorg):not(.hubp-edition) [data-hubp] > .hubd-outils:not(.est-ouvert) { display: none !important; }

/* ── CARTE « REPORTING DU MOIS » (2026-10-13, Shared/HubCarteReporting ; préfixe repc-) : pleine largeur du hub, surface et halos de
      la palette comme la carte Académie. DEUX RANGÉES (13/10, Arthur : « espaces vides, pas propre ») : en haut, l'icône, le titre et
      le mois lu (‹ › ) à gauche, la période et « Ouvrir le reporting » à droite ; dessous, les trois chiffres sur toute la largeur,
      cliquables (ils ouvrent « Les trois états » au mois lu). ── */
.repc { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tete actions" "chiffres chiffres";
        align-items: center; gap: 12px 16px; width: 100%; max-width: var(--hub-col, 1320px); margin: 14px auto 0; padding: 14px 16px;
        box-sizing: border-box;
        /* 19/10 (Arthur : harmoniser avec le reste du hub) : la PEAU des cartes du hub (.intent-card, FecLoader.razor) : verre --o4,
           flou, filet --o8, coins de 18 px ; plus de halos de palette sur fond opaque. Mat et Papier : la carte est dans les listes
           de .intent-card (style-mat.css, style-papier.css), l'ombre douce du thème clair dans analyses.css. */
        border-radius: 18px; border: 1px solid var(--o8); background: var(--o4);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hubp-perso > .repc { flex: 1 1 100%; margin: 0 auto; }
.hubp-grille .repc > .hubd-outils { top: -16px; right: 64px; }
html[data-density="compact"] .repc { padding: 10px 12px; gap: 10px 12px; }

/* Rangée du haut, à gauche : icône, titre, mois lu. */
.repc-tete { grid-area: tete; display: flex; align-items: center; gap: 10px 12px; min-width: 0; flex-wrap: wrap; }
.repc-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
           color: var(--brand-strong, var(--brand)); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); }
.repc-ic svg { width: 18px; height: 18px; }
.repc-t { margin: 0; font-size: 15px; font-weight: 700; white-space: nowrap; }
html[data-papier] .repc-t { font-family: var(--pp-serif); }
.repc-nav { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--o6, rgba(255,255,255,.06)); }
html[data-theme="light"] .repc-nav { background: rgba(15, 38, 56, .06); }
.repc-mois { min-width: 74px; padding: 0 4px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.repc-fl { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--tx1); cursor: pointer; }
.repc-fl:hover:not(:disabled) { background: color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent); }
.repc-fl:disabled { opacity: .3; cursor: default; }
.repc-fl:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }

/* Rangée du haut, à droite : période, accès au module. */
.repc-actions { grid-area: actions; display: flex; align-items: center; gap: 10px; }
.repc-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--o6, rgba(255,255,255,.06)); }
html[data-theme="light"] .repc-seg { background: rgba(15, 38, 56, .06); }
.repc-seg button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--mut1, #8aa0ad);
                   font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.repc-seg button.on { background: var(--brand, #00B1CF); color: var(--brand-ink, #032530); }
.repc-seg button:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }
html[data-theme="light"] .repc-seg button:not(.on) { color: #4b5d68; }
.repc-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent;
            background: var(--brand, #00B1CF); color: var(--brand-ink, #032530); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.repc-btn:hover { filter: brightness(1.06); }
.repc-btn:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }

/* Rangée du bas : trois chiffres, toute la largeur. */
.repc-chiffres { grid-area: chiffres; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.repc-k { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; min-width: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
          background: color-mix(in srgb, var(--surf-1, #0b1f29) 52%, transparent); border: 1px solid var(--o8, rgba(255,255,255,.08));
          transition: border-color .12s ease; }
.repc-k:hover { border-color: color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); }
.repc-k:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
html[data-theme="light"] .repc-k { background: rgba(255, 255, 255, .7); border-color: rgba(15, 38, 56, .1); }
html[data-motion="reduites"] .repc-k { transition: none; }
.repc-k-l { font-size: 12px; font-weight: 600; color: var(--mut1, #8aa0ad); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="light"] .repc-k-l { color: #4b5d68; }
.repc-k-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tx1); }
.repc-k-e { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mut1, #8aa0ad); }
.repc-k-e i { font-style: normal; font-weight: 500; opacity: .8; margin-left: 3px; }
.repc-k-e.est-haut { color: var(--st-green, #34d399); }
.repc-k-e.est-bas { color: var(--st-red, #f87171); }
html[data-theme="light"] .repc-k-e.est-haut { color: #047857; }
html[data-theme="light"] .repc-k-e.est-bas { color: #b91c1c; }

@media (max-width: 820px) {
    .repc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "actions" "chiffres"; }
    .repc-actions { justify-content: space-between; flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .repc-chiffres { grid-template-columns: minmax(0, 1fr); }
}

/* Mini-graphique de chaque chiffre (13/10, « un peu de dataviz ») : à droite, sur la hauteur du chiffre. Barres = mois de l'exercice
   (le mois lu allumé), repères = N-1 ; courbes = cumul ou douze mois glissants, N-1 en pointillés. Traits fins, couleurs de la palette. */
.repc-k { grid-template-columns: minmax(0, 1fr) minmax(70px, 42%); column-gap: 12px; align-items: center; }
.repc-k > :not(.repc-mini) { grid-column: 1; }
.repc-mini { grid-column: 2; grid-row: 1 / span 3; width: 100%; height: 40px; overflow: visible; }
.repc-mini-zero { stroke: var(--o12, rgba(255,255,255,.12)); stroke-width: 1; vector-effect: non-scaling-stroke; }
html[data-theme="light"] .repc-mini-zero { stroke: rgba(15, 38, 56, .14); }
.repc-mini-b { fill: color-mix(in srgb, var(--brand, #00B1CF) 32%, transparent); }
.repc-mini-b.on { fill: var(--brand-strong, var(--brand, #00B1CF)); }
.repc-mini-n1 { stroke: var(--mut1, #8aa0ad); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .9; }
.repc-mini-l { fill: none; stroke: var(--brand-strong, var(--brand, #00B1CF)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.repc-mini-l.n1 { stroke: var(--mut1, #8aa0ad); stroke-width: 1.5; stroke-dasharray: 3 3; }
.repc-mini-p { fill: var(--brand-strong, var(--brand, #00B1CF)); }
html[data-theme="light"] :is(.repc-mini-b.on, .repc-mini-p) { fill: var(--brand, #00B1CF); }
html[data-theme="light"] .repc-mini-l:not(.n1) { stroke: var(--brand, #00B1CF); }
@media (max-width: 400px) { .repc-k { grid-template-columns: minmax(0, 1fr) 38%; } }

/* « PowerPoint » de la carte Reporting (13/10) : bouton secondaire, contour de la marque, à gauche de « Ouvrir le reporting ». */
.repc-btn.repc-btn-2 { background: transparent; color: var(--brand-strong, var(--brand, #00B1CF));
                       border-color: color-mix(in srgb, var(--brand, #00B1CF) 55%, transparent); }
.repc-btn.repc-btn-2:hover { filter: none; background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent); }
html[data-theme="light"] .repc-btn.repc-btn-2 { color: var(--brand, #00B1CF); }

/* 14/10 : dans la colonne du hub, l'écart vient du seul gap (20 px) : la carte Reporting, l'Académie et la rangée des bannières
   n'y ajoutent plus leur marge haute (34 px au-dessus d'elles, 20 ailleurs). */
.hubp-grille > :is(.repc, .aca-carte, .intent-banners-row) { margin-top: 0; }

/* 14/10 (Arthur : « aligne la width de la carte Académie avec le reste du hub ») : pleine largeur de la colonne, comme Reporting. */
.hubp-grille > .aca-carte { width: 100%; max-width: var(--hub-col, 1320px); margin-inline: auto; box-sizing: border-box; }

/* ── TABLETTE ET PETITS ÉCRANS (14/10, Arthur : « améliore l'ux dans cette disposition du hub, surface en mode portrait ») ──
   Mesuré à 912 px (Surface en portrait) : six tuiles de 128 px, quatre valeurs passaient sous leur icône, titres et sous-lignes
   tronqués ; la barre du haut montait à 102 px (récap sur trois lignes, chrono sur les boutons). À 1 024 px, des sous-lignes
   encore coupées ; à 1 180 px, tout tient. Spécificité relevée (.intent-zone, .recap-bar) : les règles de base sont dans le
   bloc de style de FecLoader, rendu après cette feuille. */
@media (min-width: 561px) and (max-width: 1100px) {
    .intent-zone .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 1180px) {
    .recap-bar .recap-elapsed { display: none; }
    .recap-bar .recap-content { flex: 1 1 auto; min-width: 0; }
    .recap-bar .recap-text { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
    .recap-bar :is(.recap-tour-lbl, .recap-compte-lbl, .recap-offers-lbl, .rdv-btn-lbl) { display: none; }
    .recap-bar .rdv-btn { padding: 0 8px; }
    .recap-bar .recap-tour-btn { padding-inline: 10px; }
}