/* Barre d’outils groupée (ruban) — layout unique bureau */

body:not(.illu-toolbar-ribbon) .illu-ribbon-groups {
    display: contents;
}

body:not(.illu-toolbar-ribbon) .illu-ribbon-group {
    display: contents;
}

body:not(.illu-toolbar-ribbon) .illu-ribbon-group-label {
    display: none !important;
}

body:not(.illu-toolbar-ribbon) .illu-ribbon-group-body {
    display: contents;
}

/* Bandeau : row1 + row2 — flex-grow pour occuper la largeur */
body.illu-toolbar-ribbon #tool-options-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    overflow-x: visible;
    overflow-y: visible;
    flex-shrink: 0;
    width: 100%;
    background: var(--mp-surface, #f4f4f4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

body.illu-toolbar-ribbon.theme-dark #tool-options-container {
    background: #353c48;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

body.illu-toolbar-ribbon #tool-options-bar-row1,
body.illu-toolbar-ribbon #tool-options-bar-2,
body.illu-toolbar-ribbon #tool-pinned-toggles,
body.illu-toolbar-ribbon .illu-ribbon-groups--actions,
body.illu-toolbar-ribbon .illu-ribbon-groups--params,
body.illu-toolbar-ribbon .illu-ribbon-groups {
    display: contents !important;
}

/* Pas de scroll interne sur les barres ruban */
body.illu-toolbar-ribbon .tool-options-bar,
body.illu-toolbar-ribbon .illu-app-toolbars-container {
    overflow-x: visible !important;
    overflow-y: visible !important;
    white-space: normal !important;
}

/* Dégradé : Lin./Rad. et Simple/Intel. — icône à gauche, texte à droite, une ligne */
body.illu-toolbar-ribbon #opt-grp-gradient-actions .illu-icon-toggle-group,
body.illu-toolbar-ribbon #opt-grp-gradient-actions .illu-mode-toggle-group,
body.illu-toolbar-ribbon .illu-grad-type-group,
body.illu-toolbar-ribbon .illu-grad-method-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: auto !important;
    min-width: 0 !important;
}

body.illu-toolbar-ribbon #opt-grp-gradient-actions .illu-toggle-group--one-row .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon .illu-grad-type-group.illu-toggle-group--one-row .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon .illu-grad-method-group.illu-toggle-group--one-row .illu-mode-toggle-item--unified {
    flex: 0 0 auto;
}

body.illu-toolbar-ribbon #opt-grp-gradient-actions .illu-mode-toggle-item--unified.illu-toggle-layout--inline,
body.illu-toolbar-ribbon .illu-grad-type-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline,
body.illu-toolbar-ribbon .illu-grad-method-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline {
    width: auto;
    min-width: 0;
    max-width: none;
}

body.illu-toolbar-ribbon #opt-grp-gradient-actions .illu-toggle-layout--inline>.illu-mode-toggle-btn,
body.illu-toolbar-ribbon .illu-grad-type-group .illu-toggle-layout--inline>.illu-mode-toggle-btn,
body.illu-toolbar-ribbon .illu-grad-method-group .illu-toggle-layout--inline>.illu-mode-toggle-btn {
    width: auto !important;
    min-width: 52px;
    justify-content: flex-start !important;
}

#opt-grp-gradient-actions .illu-mode-toggle-item--unified.illu-toggle-layout--inline>.illu-mode-toggle-btn.illu-icon-toggle,
.illu-grad-type-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline>.illu-mode-toggle-btn.illu-icon-toggle,
.illu-grad-method-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline>.illu-mode-toggle-btn.illu-icon-toggle {
    width: auto !important;
    height: auto !important;
    min-width: 48px;
    min-height: 27px;
    justify-content: flex-start;
    padding: 2px 6px !important;
}

#opt-grp-gradient-actions .illu-mode-toggle-item--unified.illu-toggle-layout--inline>.illu-mode-toggle-btn .illu-mode-toggle-lbl,
.illu-grad-type-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline>.illu-mode-toggle-btn .illu-mode-toggle-lbl,
.illu-grad-method-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline>.illu-mode-toggle-btn .illu-mode-toggle-lbl {
    text-align: left;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-ribbon-group {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    padding: 2px 4px 0;
    border-right: 1px solid rgba(0, 0, 0, 0.14);
    min-height: var(--illu-ribbon-group-h, 84px);
    height: auto;
    overflow: visible;
}

body.illu-toolbar-ribbon .illu-ribbon-group:last-child:not([data-illu-ribbon-group="symmetry"]) {
    border-right: none;
}

body.illu-toolbar-ribbon .illu-ribbon-group[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon {
    --illu-ribbon-btn-gap: 0;
    --illu-ribbon-grid-col-min: 52px;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    gap: var(--illu-ribbon-btn-gap);
    padding: 0;
    min-width: 0;
    overflow: visible;
}

/* Groupes une ligne (hors grilles compactes) : boutons même largeur dans le groupe */
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-icon-toggle-group:not(.illu-toggle-group--compact-grid),
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-mode-toggle-group:not(.illu-toggle-group--compact-grid),
body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-grp > .illu-icon-toggle-group:not(.illu-toggle-group--compact-grid),
body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-grp > .illu-mode-toggle-group:not(.illu-toggle-group--compact-grid),
body.illu-toolbar-ribbon .illu-sel-actions-layout:not(.illu-toggle-group--compact-grid) {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--illu-ribbon-btn-gap);
    width: auto;
    min-width: 0;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    white-space: nowrap;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-icon-toggle-group:not(.illu-toggle-group--compact-grid) > .illu-mode-toggle-item--unified:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-mode-toggle-group:not(.illu-toggle-group--compact-grid) > .illu-mode-toggle-item--unified:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-grp > .illu-icon-toggle-group:not(.illu-toggle-group--compact-grid) > .illu-mode-toggle-item--unified:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-grp > .illu-mode-toggle-group:not(.illu-toggle-group--compact-grid) > .illu-mode-toggle-item--unified:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-icon-toggle-group:not(.illu-toggle-group--compact-grid) > .illu-mode-toggle-item:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-mode-toggle-group:not(.illu-toggle-group--compact-grid) > .illu-mode-toggle-item:not([hidden]) {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

/* Stack : cellule étroite, icône au-dessus (largeur fixe hors ruban group-body flex) */
body.illu-toolbar-ribbon .illu-mode-toggle-item--unified.illu-toggle-layout--stack {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    overflow: visible;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body .illu-mode-toggle-item--unified.illu-toggle-layout--stack {
    flex: 1 1 0;
    width: auto !important;
    min-width: 40px;
    max-width: none !important;
}

body.illu-toolbar-ribbon .illu-toggle-layout--stack>.illu-mode-toggle-btn {
    width: 100% !important;
    max-width: 44px;
    min-height: 36px;
    height: auto !important;
}

body.illu-toolbar-ribbon .illu-toggle-layout--stack>.illu-mode-toggle-btn .illu-mode-toggle-lbl {
    text-align: center;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* Inline : icône à gauche, texte à droite (Sélection, sliders…) */
body.illu-toolbar-ribbon .illu-mode-toggle-item--unified.illu-toggle-layout--inline {
    display: block;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body .illu-mode-toggle-item--unified.illu-toggle-layout--inline {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
}

body.illu-toolbar-ribbon .illu-toggle-layout--inline>.illu-mode-toggle-btn {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    min-width: 48px;
    max-width: none;
    min-height: 27px;
    height: auto !important;
    padding: 2px 10px !important;
}

body.illu-toolbar-ribbon .illu-toggle-layout--inline>.illu-mode-toggle-btn .illu-mode-toggle-lbl {
    text-align: left;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-ribbon-group-label {
    flex: 0 0 auto;
    font: 600 10px/1.2 var(--mp-ui-font, 'Segoe UI', sans-serif);
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 9ch;
    padding: 2px 4px 4px;
    margin-top: auto;
}

/* Groupe Sélection : 2 rangées de 3 boutons alignées */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] .illu-ribbon-group-body {
    flex-wrap: nowrap;
    max-width: none;
    width: auto;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] {
    padding-left: 6px;
    padding-right: 6px;
}

/* Outils (mobile) : 4 coins + Désélectionner — groupe ruban à part de Sélection */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection-extra"] {
    padding-left: 4px;
    padding-right: 4px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection-extra"] .illu-ribbon-group-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 52px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection-extra"] .illu-mode-toggle-item--unified {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.illu-toolbar-ribbon.illu-mobile-ui .illu-ribbon-group[data-illu-ribbon-group="selection-extra"]:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
}

body.illu-toolbar-ribbon.illu-mobile-ui
    .illu-ribbon-group[data-illu-ribbon-group="selection-extra"]
    #illu-mobile-ribbon-deselect-wrap:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Style/Remplissage texte : grille unifiée 3×2 (6 boutons à plat) */
body.illu-toolbar-ribbon .illu-text-style-fill-group.illu-ribbon-grid-3x2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(var(--illu-ribbon-grid-col-min), 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: var(--illu-ribbon-btn-gap) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-text-style-fill-group.illu-ribbon-grid-3x2 > .illu-icon-toggle-group,
body.illu-toolbar-ribbon .illu-text-style-fill-group.illu-ribbon-grid-3x2 > .illu-mode-toggle-group,
body.illu-toolbar-ribbon .illu-text-style-fill-group.illu-ribbon-grid-3x2 > .illu-toggle-group--compact-grid {
    display: contents !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 0 !important;
}

/* Formes : Contour + Remplissage + 4 coins — grille 3×2 (ligne 1 : mode, ligne 2 : rempl. + 4 coins) */
body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(var(--illu-ribbon-grid-col-min), 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: var(--illu-ribbon-btn-gap) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2 > .illu-icon-toggle-group,
body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2 > .illu-mode-toggle-group,
body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2 > .illu-mode-toggle-item,
body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2 > #tool-shape-free-corners-wrap {
    display: contents !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 0 !important;
}

body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2 > .illu-mode-toggle-item[hidden],
body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2 #tool-shape-free-corners-wrap[hidden] {
    display: none !important;
}

/* Taille / trait : la dureté n’apparaît que pour pinceau et gomme (pas les formes) */
body.illu-toolbar-ribbon .illu-ribbon-param-pack:not(.illu-size-pack--brush-only) #tool-brush-hardness-row {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Sélection : 1 colonne de rangées ; chaque sous-groupe = grille 3 colonnes × 2 lignes max */
body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(72px, max-content)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 4px !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 > .illu-sel-actions-primary,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 > #selection-mode-group,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 > .illu-icon-toggle-group,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 > .illu-mode-toggle-group,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 > .illu-toggle-group--compact-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(var(--illu-ribbon-grid-col-min), 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: row !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    gap: var(--illu-ribbon-btn-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 > .illu-icon-toggle-group[hidden],
body.illu-toolbar-ribbon .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 > .illu-mode-toggle-group[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] .illu-ribbon-group-body {
    display: block;
}

/* Secours si les 3 sous-groupes sont encore enfants directs du body (sans stack) */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] .illu-ribbon-group-body:not(:has(> .illu-ribbon-selection-stack)) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(var(--illu-ribbon-grid-col-min), 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: row !important;
    gap: var(--illu-ribbon-btn-gap) !important;
    width: max-content !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] .illu-ribbon-group-body > .illu-icon-toggle-group,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] .illu-ribbon-group-body > .illu-mode-toggle-group {
    display: contents !important;
}

/* Hors mobile : bloc Effacer/Copier/Coller masqué (items exclus de la grille) */
body.illu-toolbar-ribbon:not(.illu-mobile-ui) #illu-mobile-sel-edit-actions,
body.illu-toolbar-ribbon:not(.illu-mobile-ui) #illu-mobile-sel-edit-actions[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui) #illu-mobile-sel-edit-actions .illu-mode-toggle-item {
    display: none !important;
}

/* Ruban téléphone : Effacer / Copier / Coller à la place de Nouv. / Ajout / Retrait */
body.illu-toolbar-ribbon.illu-mobile-ui .illu-ribbon-selection-stack .illu-mode-toggle-item:has([data-selection-mode]) {
    display: none !important;
}

body.illu-toolbar-ribbon.illu-mobile-ui .illu-ribbon-selection-stack #selection-mode-group[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection-extra"] .illu-mode-toggle-btn i.fa-solid {
    font-size: 15px;
    line-height: 1;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.illu-toolbar-ribbon .illu-ribbon-grid-3x2 .illu-mode-toggle-item[hidden],
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-item[hidden] {
    display: none !important;
}

/* Hors grille Sélection : Aucun (mobile) */
body.illu-toolbar-ribbon .illu-ribbon-selection-stack #illu-mobile-deselect-wrap,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mobile-only-opt {
    display: none !important;
}

/* Affichage (Grille / Règles) : masqué sur mobile — menu Fenêtre */
body.illu-toolbar-ribbon.illu-mobile-ui .illu-ribbon-group[data-illu-ribbon-group="view"],
body.illu-toolbar-ribbon.illu-mobile-ui #tool-pinned-select-actions .illu-sel-actions-view {
    display: none !important;
}

/* Affichage : grille compacte gérée par [data-illu-ribbon-group="view"] (2 × 2, 28 px) */

body.illu-toolbar-ribbon.theme-dark .illu-ribbon-group-label {
    color: rgba(255, 255, 255, 0.55);
}

body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-sep,
body.illu-toolbar-ribbon .illu-ribbon-groups .illu-sel-mode-actions-sep,
body.illu-toolbar-ribbon .illu-ribbon-groups .illu-sel-corners-center-sep,
body.illu-toolbar-ribbon #tool-shape-mode-row {
    display: none !important;
}

body.illu-toolbar-ribbon #opt-grp-shapes-params {
    display: none !important;
}

body.illu-toolbar-ribbon #opt-grp-text-params {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack {
    min-width: 108px;
}

/* Contraindre la largeur du sélecteur de fonte (#tool-text-font-size-stack
 * n'a PAS la classe illu-ribbon-gauge-stack → règles non scoped nécessaires) */
body.illu-toolbar-ribbon #tool-text-font-size-stack {
    display: grid !important;
    grid-template-columns: minmax(108px, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 3px 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 200px !important;   /* empêche la croissance libre via <select> */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

body.illu-toolbar-ribbon #tool-text-font-size-stack > .illu-text-font-row:not([hidden]) {
    display: grid !important;
    grid-template-columns: var(--illu-ribbon-gauge-label-col) minmax(0, 1fr) !important;
    column-gap: 6px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
}

body.illu-toolbar-ribbon #tool-text-font-size-stack > .illu-text-font-row > .illu-opt-lbl {
    grid-column: 1 !important;
    justify-self: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.illu-toolbar-ribbon #tool-text-font-size-stack > .illu-text-font-row > .illu-text-font-select,
body.illu-toolbar-ribbon #tool-text-font-size-stack > .illu-text-font-row > .illu-select-mini {
    grid-column: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.illu-toolbar-ribbon .illu-text-stroke-w-row--disabled {
    opacity: 0.42;
    pointer-events: none;
}

body.illu-toolbar-ribbon .illu-text-stroke-w-row--disabled .illu-gauge-input {
    cursor: not-allowed;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="text-params"] .illu-ribbon-group-body {
    align-items: stretch;
    min-width: 108px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="size"] .illu-ribbon-param-pack {
    min-width: 118px;
}

body.illu-toolbar-ribbon #pencil-close-row,
body.illu-toolbar-ribbon #pencil-close-row-2 {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-grp:not(.illu-ribbon-param-pack) {
    display: inline-flex !important;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--illu-ribbon-btn-gap);
    border: none;
    padding: 0;
    background: transparent;
    overflow: visible;
}

/* Packs jauges / remplissage / déformation : colonne (pas la ligne inline-flex des autres opt-grp) */
body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-grp.illu-ribbon-param-pack--stacked {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    min-width: 0;
    gap: var(--illu-ribbon-btn-gap);
}

body.illu-toolbar-ribbon .illu-ribbon-group-body .opt-grp.illu-ribbon-param-pack:not(.illu-ribbon-param-pack--stacked) {
    display: grid !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    min-width: 0;
}



body.illu-toolbar-ribbon #tool-pinned-select-actions {
    display: contents;
}

body.illu-toolbar-ribbon #tool-pinned-select-actions[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon #selection-mode-group[hidden],
body.illu-toolbar-ribbon .illu-sel-actions-primary[hidden],
body.illu-toolbar-ribbon .illu-sel-actions-layout[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="tool"] {
    align-self: stretch;
}

body.illu-toolbar-ribbon #tool-main-header {
    position: relative;
    display: block;
    align-self: stretch;
    margin: 0;
    padding: 0;
    min-width: 56px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    cursor: pointer;
    overflow: visible;
}

/* Liste native ancrée au rectangle du select = toute la cellule #tool-main-header */
body.illu-toolbar-ribbon #tool-main-header .illu-tool-picker-select {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

body.illu-toolbar-ribbon #tool-main-header .illu-tool-picker {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
    width: 100%;
    height: 100%;
    padding: 2px 3px;
    margin: 0;
    box-sizing: border-box;
    border: 2px dashed color-mix(in srgb, var(--mp-accent, #806020) 55%, transparent);
    border-radius: var(--mp-radius, 2px);
    background: color-mix(in srgb, var(--mp-accent, #806020) 6%, transparent);
    overflow: hidden;
}

body.illu-toolbar-ribbon .illu-tool-picker > * {
    pointer-events: none;
    flex-shrink: 0;
}

body.illu-toolbar-ribbon .illu-tool-picker-label {
    display: block;
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--mp-accent, #806020);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

body.illu-toolbar-ribbon .illu-tool-picker-chevron {
    font-size: 7px;
    line-height: 1;
    opacity: 0.55;
    flex-shrink: 0;
}

body.illu-toolbar-ribbon #tool-main-header:focus {
    outline: 1px dotted var(--mp-accent, #806020);
    outline-offset: 1px;
}

body.illu-toolbar-ribbon #tool-main-header:focus .illu-tool-picker {
    border-color: var(--mp-accent, #806020);
}

body.illu-toolbar-ribbon.theme-dark .illu-tool-picker-label {
    color: var(--mp-accent, #c9a227);
}

body.illu-toolbar-ribbon #tool-icon-preview.illu-tool-header-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
    font-size: 14px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="tool"] {
    padding-left: 4px;
    padding-right: 6px;
}

/* Dégradé forme : ligne horizontale (hors grille compacte) */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-grad"] .illu-mode-toggle-group:not(.illu-toggle-group--compact-grid) {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px 4px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-mode"] .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-grad"] .illu-mode-toggle-item--unified {
    width: auto;
    min-width: 0;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-fill"] .illu-mode-toggle-item--unified.illu-toggle-layout--stack {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
}

/* line-cap-* : grille 2×2 définie dans la section « Layouts ruban » */

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="line-cap-end"] .illu-line-cap-end-group .illu-shape-ico {
    transform: scaleX(-1);
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="size"] .illu-ribbon-param-pack {
    min-width: 118px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-angle"] {
    min-width: 132px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-angle"] > .illu-ribbon-group-body {
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-angle"] #tool-shape-grad-angle-row:not([hidden]) {
    display: grid !important;
    grid-template-columns: var(--illu-ribbon-gauge-label-col) minmax(80px, 1fr);
    column-gap: 6px;
    align-items: center;
    width: 100%;
    min-width: 118px;
    box-sizing: border-box;
    margin: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-angle"] #tool-shape-grad-angle-row > .illu-opt-lbl {
    grid-column: 1;
    justify-self: start;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-angle"] #tool-shape-grad-angle-row > .illu-gauge-wrap {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    min-width: 72px;
    max-width: 100%;
    flex: none;
}

body.illu-toolbar-ribbon .illu-ribbon-icon-grid2 {
    display: grid !important;
    grid-template-columns: repeat(2, 44px);
    gap: 4px 4px;
    justify-items: center;
    align-items: start;
    margin: 0;
    padding: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-icon-grid2 .illu-mode-toggle-item {
    min-width: 0;
    max-width: 44px;
    width: 44px;
}

body.illu-toolbar-ribbon .illu-ribbon-icon-grid2 .illu-mode-toggle-item[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-icon-grid2 .illu-mode-toggle-lbl {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body>.opt-grp:empty {
    display: none !important;
}

/* Packs paramètres : jauges empilées (1–3), tableau 2×2 si 4, 2 col. × 3 lignes si 5+ */
/* Pot de peinture, déformation : colonne (boutons puis jauges / Interp. au-dessus des icônes) */
body.illu-toolbar-ribbon .illu-ribbon-param-pack--stacked {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Baguette / pot de peinture : Contigu + Calque sur une ligne, Tol. en dessous */
body.illu-toolbar-ribbon #opt-grp-fill-params > .illu-mode-toggle-group.illu-toggle-group--compact-inline-row,
body.illu-toolbar-ribbon #opt-grp-wand-params > .illu-mode-toggle-group.illu-toggle-group--compact-inline-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-column: 1 / -1;
}

body.illu-toolbar-ribbon #opt-grp-fill-params > .illu-mode-toggle-group.illu-toggle-group--compact-inline-row .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon #opt-grp-wand-params > .illu-mode-toggle-group.illu-toggle-group--compact-inline-row .illu-mode-toggle-item--unified {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: auto !important;
}

body.illu-toolbar-ribbon #opt-grp-warp-params > .illu-warp-bar-toggles .illu-mode-toggle-item[hidden],
body.illu-toolbar-ribbon #opt-grp-warp-params > .illu-warp-bar-toggles .illu-mode-toggle-item--unified[hidden],
body.illu-toolbar-ribbon .illu-warp-bar-toggles > .illu-mode-toggle-item[hidden],
body.illu-toolbar-ribbon .illu-mode-toggle-item--unified[hidden]:not(.illu-sel-center-item) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    opacity: 0 !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
}

body.illu-toolbar-ribbon #opt-grp-fill-params > .field-row.illu-gauge-field {
    display: grid !important;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    margin: 0;
}

body.illu-toolbar-ribbon #opt-grp-warp-params > #opt-warp-resample-wrap {
    order: -1;
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    display: grid !important;
    grid-template-columns: max-content minmax(72px, 1fr);
    column-gap: 6px;
    align-items: center;
}

body.illu-toolbar-ribbon #opt-grp-warp-params > .illu-warp-bar-toggles {
    width: 100%;
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px 4px !important;
}

body.illu-toolbar-ribbon #opt-grp-warp-params > .illu-warp-bar-toggles .illu-mode-toggle-item--unified:not([hidden]) {
    flex: 1 1 0;
    min-width: 52px;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack:not(.illu-ribbon-param-pack--stacked),
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack {
    display: grid !important;
    grid-template-columns: minmax(108px, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap: 3px 8px;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack.illu-param-gauges-4,
body.illu-toolbar-ribbon .illu-ribbon-gauge-stack.illu-param-gauges-4 {
    grid-template-columns: repeat(2, minmax(108px, 1fr));
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: row;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack.illu-param-gauges-multi,
body.illu-toolbar-ribbon .illu-ribbon-gauge-stack.illu-param-gauges-multi {
    grid-template-columns: repeat(2, minmax(108px, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
}

body.illu-toolbar-ribbon .illu-ribbon-group:has(> .illu-ribbon-group-body > .illu-ribbon-param-pack),
body.illu-toolbar-ribbon .illu-ribbon-group:has(> .illu-ribbon-group-body > .opt-grp.illu-ribbon-param-pack) {
    align-items: stretch;
}

body.illu-toolbar-ribbon .illu-ribbon-group:has(> .illu-ribbon-group-body > .illu-ribbon-param-pack) > .illu-ribbon-group-body,
body.illu-toolbar-ribbon .illu-ribbon-group:has(> .illu-ribbon-group-body > .opt-grp.illu-ribbon-param-pack) > .illu-ribbon-group-body {
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack > .opt-sep {
    display: none !important;
}

/* [hidden] doit primer sur display:grid !important des jauges ruban */
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-gauge-field[hidden],
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .field-row.illu-gauge-field[hidden],
body.illu-toolbar-ribbon .illu-ribbon-param-pack > #tool-brush-hardness-row[hidden],
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-size-extra-row[hidden],
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-gauge-field[hidden],
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .field-row.illu-gauge-field[hidden],
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-text-font-row[hidden] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Jauges ruban : colonne libellés alignée, curseurs sur la même colonne */
body.illu-toolbar-ribbon {
    --illu-ribbon-gauge-label-col: 3.35rem;
}

/* Une ligne = libellé à gauche + jauge à droite */
body.illu-toolbar-ribbon .illu-ribbon-gauge-row,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-gauge-field:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .field-row.illu-gauge-field:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-param-pack > #opt-warp-resample-wrap,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-gauge-field:not([hidden]),
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .field-row.illu-gauge-field:not([hidden]),
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-text-font-row:not([hidden]) {
    display: grid !important;
    grid-template-columns: var(--illu-ribbon-gauge-label-col) minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack .illu-gauge-field:not([hidden]) > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-ribbon-param-pack .field-row.illu-gauge-field:not([hidden]) > .illu-opt-lbl {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack .illu-gauge-field:not([hidden]) > .illu-gauge-wrap,
body.illu-toolbar-ribbon .illu-ribbon-param-pack .field-row.illu-gauge-field:not([hidden]) > .illu-gauge-wrap {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: none;
}

body.illu-toolbar-ribbon .illu-ribbon-gauge-row > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-gauge-field > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .field-row.illu-gauge-field > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > #opt-warp-resample-wrap > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-text-font-row > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-gauge-field > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .field-row.illu-gauge-field > .illu-opt-lbl {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    margin-right: 0 !important;
    white-space: nowrap;
}

body.illu-toolbar-ribbon .illu-ribbon-gauge-row > .illu-gauge-wrap,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-gauge-field > .illu-gauge-wrap,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .field-row.illu-gauge-field > .illu-gauge-wrap,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > #opt-warp-resample-wrap > .illu-select-mini,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > #opt-warp-resample-wrap > select,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-text-font-row > .illu-text-font-select,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-text-font-row > .illu-select-mini,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .illu-gauge-field > .illu-gauge-wrap,
body.illu-toolbar-ribbon .illu-text-font-size-stack.illu-ribbon-gauge-stack > .field-row.illu-gauge-field > .illu-gauge-wrap {
    grid-column: 2;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack > .field-row.illu-size-extra-row {
    display: flex;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    margin: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-icon-toggle-group,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-mode-toggle-group {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

/* Jauge seule déplacée dans un groupe (Arrondi, Branches, Angle…) */
body.illu-toolbar-ribbon .illu-ribbon-group-body > .field-row.illu-gauge-field,
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-gauge-field.illu-gauge-field--inline {
    display: grid;
    grid-template-columns: var(--illu-ribbon-gauge-label-col) minmax(0, 1fr);
    column-gap: 6px;
    align-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body > .field-row.illu-gauge-field > .illu-opt-lbl,
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-gauge-field > .illu-opt-lbl {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    margin-right: 0 !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body > .field-row.illu-gauge-field > .illu-gauge-wrap,
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-gauge-field > .illu-gauge-wrap {
    grid-column: 2;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

body.illu-toolbar-ribbon .illu-toggle-group--two-rows {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-toggle-group--two-rows .illu-mode-toggle-item--unified {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-toggle-group--two-rows .illu-toggle-layout--inline>.illu-mode-toggle-btn {
    width: 100% !important;
    min-width: 0;
    justify-content: flex-start !important;
    padding: 2px 4px !important;
}

body.illu-toolbar-ribbon .illu-toggle-group--one-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-toggle-group--one-row .illu-mode-toggle-item--unified {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-toggle-group--one-row .illu-toggle-layout--inline>.illu-mode-toggle-btn {
    width: 100% !important;
    min-width: 0;
    justify-content: flex-start !important;
    padding: 2px 4px !important;
}

/* 3 boutons : colonnes égales, icône au-dessus du texte */
body.illu-toolbar-ribbon .illu-toggle-group--one-row.illu-toggle-group--stack-cells {
    min-width: 0;
}

body.illu-toolbar-ribbon .illu-toggle-group--one-row.illu-toggle-group--stack-cells .illu-mode-toggle-item--unified.illu-toggle-layout--stack {
    flex: 1 1 0;
    width: auto;
    min-width: 44px;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-toggle-group--one-row.illu-toggle-group--stack-cells .illu-toggle-layout--stack>.illu-mode-toggle-btn {
    width: 100% !important;
    max-width: none;
}

/* 2 boutons : 2 lignes empilées, même largeur de cellule */
body.illu-toolbar-ribbon .illu-toggle-group--two-rows.illu-toggle-group--stack-cells {
    min-width: 52px;
    align-items: stretch !important;
}

body.illu-toolbar-ribbon .illu-toggle-group--two-rows.illu-toggle-group--stack-cells .illu-mode-toggle-item--unified.illu-toggle-layout--stack {
    width: 100%;
    min-width: 0;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-toggle-group--two-rows.illu-toggle-group--stack-cells .illu-toggle-layout--stack>.illu-mode-toggle-btn {
    width: 100% !important;
    max-width: none;
    min-height: 27px;
}

/* Groupes 2 lignes : même largeur de colonne pour aligner les boutons entre alvéoles */
body.illu-toolbar-ribbon .illu-ribbon-group:has(.illu-toggle-group--two-rows.illu-toggle-group--stack-cells) .illu-ribbon-group-body {
    align-items: stretch;
    min-width: 52px;
}

body.illu-toolbar-ribbon .illu-ribbon-group:has(.illu-toggle-group--two-rows.illu-toggle-group--stack-cells) .illu-toggle-group--two-rows {
    width: 100%;
}

body.illu-toolbar-ribbon .illu-ribbon-group:has(.illu-toggle-group--one-row.illu-toggle-group--stack-cells) .illu-toggle-group--one-row {
    width: 100%;
}

/* Pinceau : 4 boutons sur une ligne, icône à gauche / texte à droite */
body.illu-toolbar-ribbon #opt-grp-brush-actions>.illu-icon-toggle-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: auto !important;
    min-width: 0 !important;
}

body.illu-toolbar-ribbon #opt-grp-brush-actions > .illu-icon-toggle-group.illu-toggle-group--one-row .illu-mode-toggle-item--unified {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
}

body.illu-toolbar-ribbon #opt-grp-brush-actions > .illu-icon-toggle-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline {
    width: auto !important;
    min-width: 0;
    max-width: none;
}

body.illu-toolbar-ribbon #opt-grp-brush-actions > .illu-icon-toggle-group .illu-toggle-layout--inline > .illu-mode-toggle-btn {
    width: 100% !important;
    min-width: 0;
    justify-content: flex-start !important;
}

#opt-grp-brush-actions>.illu-icon-toggle-group .illu-mode-toggle-item--unified.illu-toggle-layout--inline>.illu-mode-toggle-btn.illu-icon-toggle {
    width: auto !important;
    height: auto !important;
    min-width: 48px;
    min-height: 27px;
    justify-content: flex-start;
    padding: 2px 6px !important;
}

/* Jauges déplacées hors pack (Arrondi, Branches, Angle…) — pas les lignes dans .illu-ribbon-param-pack */
body.illu-toolbar-ribbon .illu-ribbon-group-body > .field-row.illu-gauge-field,
body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-gauge-field.illu-gauge-field--inline {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

body.illu-toolbar-ribbon .illu-gauge-field .illu-opt-lbl {
    flex: 0 0 auto;
    white-space: nowrap;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-gauge-field .illu-gauge-wrap,
body.illu-toolbar-ribbon .illu-ribbon-group-body > .field-row.illu-gauge-field .illu-gauge-wrap {
    flex: 1 1 auto;
    min-width: 80px;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body > .illu-gauge-field .illu-gauge-wrap.illu-gauge-wrap--has-steps,
body.illu-toolbar-ribbon .illu-ribbon-group-body > .field-row.illu-gauge-field .illu-gauge-wrap.illu-gauge-wrap--has-steps {
    flex: 0 1 auto;
    min-width: 0;
}

body.illu-toolbar-ribbon .illu-vector-ops-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    max-width: 220px;
}

body.illu-toolbar-ribbon .illu-vector-ops-group .illu-chip {
    font-size: 10px;
    max-width: 100%;
}

/* Priorité theme-win98 : pas de scroll interne sur les groupes */
body.illu-toolbar-ribbon #tool-pinned-toggles .illu-icon-toggle-group,
body.illu-toolbar-ribbon #tool-pinned-toggles .illu-mode-toggle-group,
body.illu-toolbar-ribbon .illu-ribbon-groups .illu-icon-toggle-group,
body.illu-toolbar-ribbon .illu-ribbon-groups .illu-mode-toggle-group {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

body.illu-toolbar-ribbon .illu-gauge-field {
    min-width: 100px;
}

body.illu-toolbar-ribbon .illu-ribbon-param-pack > .illu-gauge-field,
body.illu-toolbar-ribbon .illu-ribbon-param-pack > .field-row.illu-gauge-field {
    min-width: 0;
}

/* Boutons ruban : taille et padding uniformes (icône + texte) */
body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn,
body.illu-toolbar-ribbon #tool-options-container button.illu-icon-toggle.illu-mode-toggle-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 27px;
    min-height: 27px;
    height: auto;
    padding: 2px 4px;
}

body.illu-toolbar-ribbon #tool-options-container .illu-toggle-layout--stack > .illu-mode-toggle-btn.illu-icon-toggle {
    flex-direction: column;
    gap: 1px;
    padding: 2px 3px 3px;
}

body.illu-toolbar-ribbon #tool-options-container .illu-toggle-layout--inline > .illu-mode-toggle-btn.illu-icon-toggle {
    flex-direction: row;
    gap: 2px;
    padding: 2px 4px;
}

/* Boutons ruban : pas de bordure au repos ; hover / actif comme row1 */
body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle {
    border: 2px solid transparent;
    background: transparent;
    box-shadow: none;
}

body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle:hover {
    border-color: var(--mp-raised-top) var(--mp-raised-bot) var(--mp-raised-bot) var(--mp-raised-top);
    background: color-mix(in srgb, var(--mp-accent) 8%, var(--mp-surface-deep));
    box-shadow: none;
}

body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle:active,
body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle--on,
body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle.active {
    border-color: var(--mp-raised-bot) var(--mp-raised-top) var(--mp-raised-top) var(--mp-raised-bot);
    background: color-mix(in srgb, var(--mp-accent) 10%, var(--mp-surface-deep));
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.12);
}

/* Actif : texte adouci (pas d’accent plein) */
body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle--on .illu-mode-toggle-lbl,
body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.active .illu-mode-toggle-lbl {
    color: color-mix(in srgb, var(--mp-opt-bar-text, #333) 82%, var(--mp-accent) 18%);
    font-weight: normal;
}

body.illu-toolbar-ribbon.theme-dark #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle--on .illu-mode-toggle-lbl,
body.illu-toolbar-ribbon.theme-dark #tool-options-container .illu-mode-toggle-btn.active .illu-mode-toggle-lbl {
    color: color-mix(in srgb, var(--mp-opt-bar-text, #e8e8e8) 78%, var(--mp-accent) 22%);
}

/* Ruban compact : 2 rangées max, icône à gauche / texte à droite, scroll horizontal */
body.illu-toolbar-ribbon #tool-options-container {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body {
    width: auto;
    min-width: 0;
}

/* Grille compacte : colonnes via --group-grid-cols (hors grilles unifiées 3×2) */
body.illu-toolbar-ribbon #tool-options-container .illu-toggle-group--compact-grid:not(.illu-ribbon-selection-stack):not(.illu-selection-stack-child):not(.illu-ribbon-grid-3x2),
body.illu-toolbar-ribbon .illu-ribbon-group .illu-toggle-group--compact-grid,
body.illu-toolbar-ribbon .illu-ribbon-group .illu-sel-actions-layout.illu-toggle-group--compact-grid {
    display: grid !important;
    grid-template-columns: var(--group-grid-cols, repeat(2, minmax(var(--illu-ribbon-grid-col-min), 1fr))) !important;
    grid-template-rows: var(--group-grid-rows, repeat(2, auto)) !important;
    grid-auto-flow: var(--group-grid-flow, row) !important;
    grid-auto-columns: unset !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: var(--group-grid-gap, var(--illu-ribbon-btn-gap)) !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
}

/* Valeurs par défaut selon classes JS (surchargeables par [data-illu-ribbon-group] …) */
body.illu-toolbar-ribbon .illu-toggle-group--compact-cols-1 {
    --group-grid-cols: minmax(var(--illu-ribbon-grid-col-min), 1fr);
}

body.illu-toolbar-ribbon .illu-toggle-group--compact-cols-2 {
    --group-grid-cols: repeat(2, minmax(var(--illu-ribbon-grid-col-min), 1fr));
}

body.illu-toolbar-ribbon .illu-toggle-group--compact-cols-3 {
    --group-grid-cols: repeat(3, minmax(var(--illu-ribbon-grid-col-min), 1fr));
}

body.illu-toolbar-ribbon .illu-toggle-group--compact-cols-4 {
    --group-grid-cols: repeat(4, minmax(var(--illu-ribbon-grid-col-min), 1fr));
}

body.illu-toolbar-ribbon .illu-toggle-group--compact-one-row {
    grid-template-rows: auto !important;
}

/* Pipette : carré couleur à gauche, HEX / RGB / RAL à droite (largeur fixe ruban) */
.illu-eyedropper-info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    box-sizing: border-box;
    width: 152px;
    min-width: 152px;
    max-width: 152px;
    min-height: 0;
    max-height: 42px;
}

.illu-eyedropper-preview {
    flex: 0 0 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    align-self: center;
}

.illu-eyedropper-swatch {
    display: block;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 32px;
    height: 36px;
    margin: 0;
    border: 1px solid var(--illu-border, #808080);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    background: #000;
}

.illu-eyedropper-values {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    width: auto;
    font-size: 10px;
    line-height: 1.15;
}

.illu-eyedropper-line {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    white-space: nowrap;
    min-height: 12px;
}

.illu-eyedropper-line .illu-opt-lbl {
    flex: 0 0 1.75em;
    min-width: 1.75em;
    font-size: 10px;
    font-weight: 600;
}

.illu-eyedropper-code,
.illu-eyedropper-val {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

#opt-grp-eyedropper-params,
body.illu-toolbar-ribbon #opt-grp-eyedropper-params.illu-eyedropper-info {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 2px;
    max-height: none;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="eyedropper"] {
    min-width: 175px;
    max-width: 175px;
    min-height: 0;
    padding-top: 1px;
    padding-bottom: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="eyedropper"] .illu-ribbon-group-body {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 152px;
    min-width: 152px;
    max-width: 152px;
    padding: 2px 4px 0;
    box-sizing: border-box;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="eyedropper"] .illu-ribbon-group-label {
    padding-top: 2px;
    margin-top: auto;
    text-align: center;
    width: 100%;
}

body.illu-toolbar-ribbon #opt-grp-fill-params .illu-toggle-group--compact-inline-row,
body.illu-toolbar-ribbon #opt-grp-wand-params .illu-toggle-group--compact-inline-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: var(--illu-ribbon-btn-gap) !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.illu-toolbar-ribbon #opt-grp-fill-params .illu-toggle-group--compact-inline-row .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon #opt-grp-wand-params .illu-toggle-group--compact-inline-row .illu-mode-toggle-item--unified {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

body.illu-toolbar-ribbon #opt-grp-fill-params .illu-toggle-group--compact-inline-row .illu-toggle-layout--inline>.illu-mode-toggle-btn,
body.illu-toolbar-ribbon #opt-grp-wand-params .illu-toggle-group--compact-inline-row .illu-toggle-layout--inline>.illu-mode-toggle-btn {
    width: 100% !important;
    min-width: 0;
    justify-content: flex-start !important;
}

/* Remplissage formes (Uni / Dégr.) : 2 boutons sur une ligne — évite le chevauchement avec Taille */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-fill"] .illu-toggle-group--compact-inline-row,
body.illu-toolbar-ribbon .illu-shape-fill-group.illu-toggle-group--compact-inline-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 2px 4px !important;
    width: max-content !important;
    min-width: 0 !important;
}

body.illu-toolbar-ribbon .illu-shape-fill-group.illu-toggle-group--compact-inline-row .illu-mode-toggle-item--unified {
    flex: 0 0 auto;
    width: auto;
    min-width: 36px;
    max-width: none;
}

body.illu-toolbar-ribbon .illu-shape-fill-group.illu-toggle-group--compact-inline-row .illu-toggle-layout--stack>.illu-mode-toggle-btn {
    width: 100% !important;
    max-width: 44px;
    min-height: 36px;
}

body.illu-toolbar-ribbon .illu-shape-fill-group.illu-toggle-group--compact-inline-row .illu-toggle-layout--stack>.illu-mode-toggle-btn .illu-mode-toggle-lbl {
    text-align: center;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-fill"] {
    overflow: visible;
    z-index: 1;
}

body.illu-toolbar-ribbon .illu-ribbon-group .illu-toggle-group--compact-grid .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon .illu-toggle-group--compact-grid .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-item--unified {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none;
}

body.illu-toolbar-ribbon #tool-options-container .illu-toggle-layout--inline>.illu-mode-toggle-btn {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 27px !important;
    height: auto !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-toggle-layout--inline>.illu-mode-toggle-btn .illu-mode-toggle-lbl {
    text-align: left;
    max-width: none;
    font-size: 9px;
}

body.illu-toolbar-ribbon #tool-options-container .illu-toggle-layout--inline>.illu-mode-toggle-btn .illu-shape-ico,
body.illu-toolbar-ribbon #tool-options-container .illu-toggle-layout--inline>.illu-mode-toggle-btn i {
    flex-shrink: 0;
}

/* Priorité sur layouts bureau (pinceau / dégradé une ligne) */
body.illu-toolbar-ribbon #opt-grp-brush-actions>.illu-icon-toggle-group,
body.illu-toolbar-ribbon .illu-grad-type-group,
body.illu-toolbar-ribbon .illu-grad-method-group {
    display: grid !important;
    flex-direction: unset !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-mode-toggle-btn.illu-icon-toggle {
    height: auto !important;
}

/* Grille sélection (stack) — pas le groupe Ajustements (voir section Layouts ruban) */
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-sel-actions-layout,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] .illu-sel-actions-primary {
    display: grid !important;
    grid-template-columns: var(--group-grid-cols, repeat(4, minmax(var(--illu-ribbon-grid-col-min), 1fr))) !important;
    grid-template-rows: var(--group-grid-rows, repeat(2, auto)) !important;
    grid-auto-flow: var(--group-grid-flow, row) !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: var(--group-grid-gap, var(--illu-ribbon-btn-gap)) !important;
    width: max-content !important;
    height: auto !important;
    flex-wrap: unset !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-ribbon-grid-3x2 .illu-mode-toggle-item,
body.illu-toolbar-ribbon .illu-ribbon-grid-3x2 .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-item,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-item--unified {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-item--unified.illu-toggle-layout--inline,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-item--unified.illu-toggle-layout--stack {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-toggle-layout--inline>.illu-mode-toggle-btn,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-toggle-layout--stack>.illu-mode-toggle-btn {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 2px 6px !important;
    box-sizing: border-box !important;
    gap: 5px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-toggle-layout--inline>.illu-mode-toggle-btn .illu-mode-toggle-lbl,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-toggle-layout--stack>.illu-mode-toggle-btn .illu-mode-toggle-lbl {
    text-align: left !important;
    max-width: none !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-btn .illu-shape-ico,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-btn .illu-center-ico,
body.illu-toolbar-ribbon .illu-ribbon-selection-stack .illu-mode-toggle-btn i,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="adjustments"] .illu-sel-actions-layout .illu-mode-toggle-btn .illu-shape-ico,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="adjustments"] .illu-sel-actions-layout .illu-mode-toggle-btn .illu-center-ico {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    flex: 0 0 16px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="adjustments"] .illu-sel-actions-layout .illu-sel-center-item .illu-shape-ico,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="adjustments"] .illu-sel-actions-layout .illu-sel-center-item .illu-shape-ico use {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor;
    stroke: none;
}

/* Boutons ruban icône seule (hors grille compacte) */
body.illu-toolbar-ribbon .illu-ribbon-icon-only-group:not(.illu-toggle-group--compact-grid) {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
}

body.illu-toolbar-ribbon .illu-ribbon-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid #808080;
    border-radius: 2px;
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    color: #222;
    cursor: pointer;
}

body.illu-toolbar-ribbon .illu-ribbon-icon-btn:hover {
    background: linear-gradient(180deg, #f8f8f8 0%, #ddd 100%);
}

body.illu-toolbar-ribbon .illu-ribbon-icon-btn:active {
    background: #c8c8c8;
    border-color: #404040;
}

body.illu-toolbar-ribbon .illu-ribbon-icon-btn i {
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

body.illu-toolbar-ribbon.theme-dark .illu-ribbon-icon-btn {
    border-color: #555;
    background: linear-gradient(180deg, #4a4a58 0%, #353c48 100%);
    color: #eee;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="clipboard"] .illu-ribbon-icon-only-group {
    padding: 2px 0;
}

/* Bureau — Ajustements : 8 boutons icône seule (grille 4×2) */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout.illu-ribbon-icon-only-group,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout.illu-toggle-group--compact-grid {
    grid-template-columns: repeat(4, 28px) !important;
    gap: 4px !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout
    .illu-mode-toggle-lbl {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout
    .illu-mode-toggle-btn {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 28px !important;
    max-width: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px !important;
    gap: 0 !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout
    .illu-mode-toggle-item,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout
    .illu-mode-toggle-item--unified {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout
    .illu-mode-toggle-btn
    .illu-shape-ico,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout
    .illu-mode-toggle-btn
    i.fa-solid {
    margin: 0 auto !important;
}

body.illu-toolbar-ribbon .illu-sel-actions-layout .illu-icon-toggle:disabled,
body.illu-toolbar-ribbon .illu-sel-actions-layout .illu-icon-toggle[aria-disabled="true"] {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

body.illu-toolbar-ribbon.illu-mobile-ui #illu-sel-clipboard-actions,
body.illu-toolbar-ribbon.illu-mobile-ui .illu-ribbon-group[data-illu-ribbon-group="clipboard"] {
    display: none !important;
}

/* Mobile : le sous-groupe Effacer/Copier/Coller suit la même grille 3 colonnes */
body.illu-toolbar-ribbon.illu-mobile-ui
    .illu-ribbon-selection-stack.illu-ribbon-grid-3x2
    > #illu-mobile-sel-edit-actions:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(72px, max-content)) !important;
    grid-template-rows: repeat(2, auto) !important;
}

/* Bureau — Édition : icône + texte à droite */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="clipboard"]
    .illu-ribbon-clipboard-desktop {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 4px;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="clipboard"]
    .illu-ribbon-clipboard-desktop
    .illu-mode-toggle-btn {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    min-height: 27px !important;
    height: 27px !important;
    padding: 2px 8px !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="clipboard"]
    .illu-ribbon-clipboard-desktop
    .illu-mode-toggle-lbl {
    display: inline !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    #illu-desktop-clear-sel-wrap:not([hidden])
    .illu-mode-toggle-btn
    i.fa-solid {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    text-align: center;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    #illu-layout-zoom-fit-wrap {
    display: none !important;
}

body.illu-toolbar-ribbon.illu-mobile-ui #illu-desktop-clear-sel-wrap {
    display: none !important;
}

body.illu-toolbar-ribbon.illu-mobile-ui .illu-ribbon-group {
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
}

body.illu-toolbar-ribbon.illu-mobile-ui .illu-ribbon-group[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon.illu-mobile-shell-active .illu-mobile-opt-strip {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ==========================================================================
   CONFIGURATION SIMPLE DES LAYOUTS ET GRILLES DU RUBAN
   Pour changer la disposition des boutons ou la structure de la grille,
   listez simplement le sélecteur du groupe [data-illu-ribbon-group="nom"]
   et surchargez ses variables CSS ci-dessous.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. MODE CASCADE / STACK (Texte sous l'icône, type Gros Boutons)
   -------------------------------------------------------------------------- */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection-extra"],
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-fill"],
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="size"] {
    --item-flex-direction: column;
    --item-align-items: center;
    --item-justify-content: center;
    --item-width: 54px;
    --item-min-width: 54px;
    --item-max-width: 64px;

    --btn-flex-direction: column;
    --btn-align-items: center;
    --btn-justify-content: center;
    --btn-width: 100%;
    --btn-min-height: 40px;
    --btn-padding: 4px 2px;
    --btn-gap: 2px;

    --lbl-display: block;
    --lbl-font-size: 10px;
    --lbl-line-height: 1.15;
    --lbl-text-align: center;
    --lbl-margin-top: 2px;
    --lbl-white-space: nowrap;
}

/* --------------------------------------------------------------------------
   B. MODE ICÔNE SEULE (Le texte est masqué)
   -------------------------------------------------------------------------- */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="size-nudge"] {
    --item-flex-direction: row;
    --item-align-items: center;
    --item-justify-content: center;
    --item-width: auto;
    --item-min-width: 0;
    --item-max-width: none;

    --btn-flex-direction: row;
    --btn-align-items: center;
    --btn-justify-content: center;
    --btn-width: 28px;
    --btn-min-height: 28px;
    --btn-height: 28px;
    --btn-padding: 0;
    --btn-gap: 0;

    --lbl-display: none;
}

/* --------------------------------------------------------------------------
   C. CONFIGURATION DES GROUPES DU RUBAN
   Pour chaque groupe, surchargez ici les variables CSS selon le mode voulu.

   MODES DISPONIBLES :
   - Icône seule       : --lbl-display: none
   - Icône + texte     : --btn-flex-direction: row;  --lbl-display: inline
   - Cascade (icône↑)  : --btn-flex-direction: column; --lbl-display: block

   GRILLES DISPONIBLES (sur .illu-sel-actions-layout ou .illu-toggle-group--compact-grid) :
   - --group-grid-cols  : ex. repeat(4, 28px)  ou  repeat(3, minmax(52px,max-content))
   - --group-grid-rows  : ex. repeat(2, auto)
   - --group-grid-gap   : ex. 2px 4px
   -------------------------------------------------------------------------- */

/* ── Sélection : grille 2 × 3, icône à gauche / texte à droite ─────────── */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] {
    --item-flex-direction: row;
    --item-align-items: stretch;
    --item-justify-content: flex-start;
    --item-width: auto;
    --item-min-width: 0;
    --item-max-width: none;

    --btn-flex-direction: row;
    --btn-align-items: center;
    --btn-justify-content: flex-start;
    --btn-width: 100%;
    --btn-min-height: 27px;
    --btn-height: 27px;
    --btn-padding: 2px 6px;
    --btn-gap: 5px;

    --lbl-display: inline;
    --lbl-font-size: 11px;
    --lbl-line-height: 1.2;
    --lbl-text-align: left;
    --lbl-margin-top: 0;
    --lbl-white-space: nowrap;

    --group-grid-cols: repeat(3, minmax(var(--illu-ribbon-grid-col-min), 1fr));
    --group-grid-rows: repeat(2, auto);
    --group-grid-gap: var(--illu-ribbon-btn-gap);
}

/* ── Ajustements : icône seule, grille 2 × 4 (28 px) ─────────────────────── */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"] {
    --lbl-display: none;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="adjustments"]
    .illu-sel-actions-layout.illu-toggle-group--compact-grid {
    --group-grid-cols: repeat(4, 28px);
    --group-grid-rows: repeat(2, 28px);
    --group-grid-gap: var(--illu-ribbon-btn-gap);
    grid-template-columns: repeat(4, 28px) !important;
    grid-template-rows: repeat(2, 28px) !important;
    gap: var(--illu-ribbon-btn-gap) !important;
}

/* ── Affichage : icône seule, grille 2 colonnes × 2 rangées (28 px) ───────── */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"] {
    --lbl-display: none;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view.illu-ribbon-icon-only-group,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view.illu-toggle-group--compact-grid {
    --group-grid-cols: repeat(2, 28px);
    --group-grid-rows: repeat(2, 28px);
    --group-grid-gap: 4px;
    grid-template-columns: repeat(2, 28px) !important;
    grid-template-rows: repeat(2, 28px) !important;
    gap: 4px !important;
    width: max-content !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view
    .illu-mode-toggle-lbl {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view
    .illu-mode-toggle-btn {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 28px !important;
    max-width: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px !important;
    gap: 0 !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view
    .illu-mode-toggle-item,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view
    .illu-mode-toggle-item--unified {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex: 0 0 28px !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view
    .illu-mode-toggle-btn
    .illu-shape-ico,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="view"]
    .illu-sel-actions-view
    .illu-mode-toggle-btn
    i.fa-solid {
    margin: 0 auto !important;
}

/* ── Style/Remplissage texte : grille 2 × 3 unifiée (.illu-ribbon-grid-3x2) ─ */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="text-style-fill"] {
    --item-flex-direction: row;
    --item-align-items: stretch;
    --item-width: auto;
    --item-min-width: 0;
    --item-max-width: none;

    --btn-flex-direction: row;
    --btn-align-items: center;
    --btn-justify-content: flex-start;
    --btn-width: 100%;
    --btn-min-height: 27px;
    --btn-height: 27px;
    --btn-padding: 2px 6px;
    --btn-gap: 5px;

    --lbl-display: inline;
    --lbl-font-size: 11px;
    --lbl-text-align: left;
    --lbl-margin-top: 0;
    --lbl-white-space: nowrap;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="text-style-fill"] .illu-ribbon-grid-3x2 .illu-mode-toggle-item,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="text-style-fill"] .illu-ribbon-grid-3x2 .illu-mode-toggle-item--unified {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="text-style-fill"] .illu-ribbon-grid-3x2 .illu-mode-toggle-btn,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="text-style-fill"] .illu-ribbon-grid-3x2 .illu-icon-toggle.illu-mode-toggle-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 2px 6px !important;
    gap: 5px !important;
    box-sizing: border-box !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="text-style-fill"] .illu-ribbon-grid-3x2 .illu-mode-toggle-lbl {
    display: inline !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* ── Extrémités ligne/courbe : Icône + texte à droite, grille 2 × 2 ─────── */
/* 4 boutons → 2 colonnes × 2 lignes, label visible à droite de l'icône      */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-start"],
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-end"] {
    --lbl-display: inline;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-start"]
    .illu-line-cap-start-group,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-end"]
    .illu-line-cap-end-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(52px, max-content)) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: row !important;
    gap: 2px 4px !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: max-content !important;
}

/* Cellule : largeur auto (étirement de la grille) */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-start"]
    .illu-line-cap-start-group .illu-mode-toggle-item,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-end"]
    .illu-line-cap-end-group .illu-mode-toggle-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Bouton : icône à gauche, texte à droite */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-start"]
    .illu-line-cap-start-group .illu-icon-toggle,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-end"]
    .illu-line-cap-end-group .illu-icon-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 52px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 0 0 4px !important;
    gap: 5px !important;
    box-sizing: border-box !important;
}

/* Label : visible, taille standard */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-start"]
    .illu-line-cap-start-group .illu-mode-toggle-lbl,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="line-cap-end"]
    .illu-line-cap-end-group .illu-mode-toggle-lbl {
    display: inline !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* Outil actif : libellé complet (pas « Trian… ») */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="tool"] .illu-tool-picker {
    min-width: 56px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="tool"] .illu-tool-picker-label {
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    padding: 0 2px;
}

/* ── Mode Forme : 1 × 3, texte sous l’icône (cascade) ─────────────────── */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="shape-mode"] {
    --item-flex-direction: column;
    --item-align-items: center;
    --item-width: auto;
    --item-min-width: 52px;
    --item-max-width: none;

    --btn-flex-direction: column;
    --btn-align-items: center;
    --btn-justify-content: center;
    --btn-width: 100%;
    --btn-min-height: 36px;
    --btn-padding: 4px 2px;
    --btn-gap: 2px;

    --lbl-display: block;
    --lbl-font-size: 10px;
    --lbl-text-align: center;
    --lbl-margin-top: 2px;
    --lbl-white-space: nowrap;

    --group-grid-cols: repeat(3, minmax(52px, max-content));
    --group-grid-rows: auto;
    --group-grid-gap: 2px 4px;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="shape-mode"]
    .illu-shape-mode-group.illu-toggle-group--compact-grid {
    grid-template-columns: repeat(3, minmax(52px, max-content)) !important;
    grid-template-rows: auto !important;
    gap: 2px 4px !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="shape-mode"]
    .illu-shape-mode-group .illu-mode-toggle-item,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="shape-mode"]
    .illu-shape-mode-group .illu-mode-toggle-item--unified {
    display: block !important;
    width: 100% !important;
    min-width: 52px !important;
    max-width: none !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="shape-mode"]
    .illu-shape-mode-group .illu-mode-toggle-btn,
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="shape-mode"]
    .illu-shape-mode-group .illu-icon-toggle.illu-mode-toggle-btn {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 4px 2px !important;
    gap: 2px !important;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="shape-mode"]
    .illu-shape-mode-group .illu-mode-toggle-lbl {
    display: block !important;
    font-size: 10px !important;
    text-align: center !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-fill"]
    .illu-shape-fill-group .illu-mode-toggle-lbl {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-fill"]
    .illu-shape-fill-group .illu-mode-toggle-item--unified {
    min-width: unset !important;
    max-width: none !important;
}

/* ── Remplissage vectoriel : icône seule, grille 2 × 2 ───────────────────── */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="vector-fill"] {
    --lbl-display: none;
}

body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="vector-fill"]
    #opt-grp-vector-fill-buttons.illu-toggle-group--compact-grid {
    --group-grid-cols: repeat(2, 28px);
    --group-grid-rows: repeat(2, 28px);
    --group-grid-gap: 4px;
    grid-template-columns: repeat(2, 28px) !important;
    grid-template-rows: repeat(2, 28px) !important;
    gap: 4px !important;
}

/* Cellule : carré 28 px */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="vector-fill"]
    .illu-mode-toggle-item--unified {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
}

/* Bouton : centré carré, icône seule */
body.illu-toolbar-ribbon:not(.illu-mobile-ui)
    .illu-ribbon-group[data-illu-ribbon-group="vector-fill"]
    .illu-mode-toggle-btn {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px !important;
    gap: 0 !important;
}


/* ==========================================================================
   Moteur de layout (variables héritées depuis [data-illu-ribbon-group])
   ========================================================================== */
body.illu-toolbar-ribbon .illu-ribbon-group .illu-mode-toggle-item--unified {
    display: flex !important;
    flex-direction: var(--item-flex-direction, row) !important;
    align-items: var(--item-align-items, center) !important;
    justify-content: var(--item-justify-content, flex-start) !important;
    width: var(--item-width, auto) !important;
    min-width: var(--item-min-width, 0) !important;
    max-width: var(--item-max-width, none) !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group .illu-mode-toggle-btn,
body.illu-toolbar-ribbon .illu-ribbon-group .illu-icon-toggle.illu-mode-toggle-btn {
    display: flex !important;
    flex-direction: var(--btn-flex-direction, row) !important;
    align-items: var(--btn-align-items, center) !important;
    justify-content: var(--btn-justify-content, flex-start) !important;
    width: var(--btn-width, auto) !important;
    min-height: var(--btn-min-height, 27px) !important;
    height: var(--btn-height, auto) !important;
    padding: var(--btn-padding, 2px 8px) !important;
    gap: var(--btn-gap, 4px) !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group .illu-mode-toggle-lbl {
    display: var(--lbl-display, inline) !important;
    font-size: var(--lbl-font-size, 11px) !important;
    line-height: var(--lbl-line-height, 1.2) !important;
    text-align: var(--lbl-text-align, left) !important;
    margin-top: var(--lbl-margin-top, 0) !important;
    white-space: var(--lbl-white-space, nowrap) !important;
}

/* Sélection : rappel stack 1 colonne (détail dans le bloc .illu-ribbon-selection-stack plus haut) */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="selection"] .illu-ribbon-selection-stack.illu-ribbon-grid-3x2 {
    grid-template-columns: repeat(1, minmax(72px, max-content)) !important;
    grid-template-rows: none !important;
    gap: 4px !important;
}

#warp-quad-rect-lock {display: none !important;}

/* Sélecteur de formes (style Paint.NET, même présentation que #tool-main-header) */
.illu-shape-picker-wrap {
    position: relative;
    display: block;
    align-self: stretch;
    min-width: 0;
    width: 100%;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="shape-picker"] {
    align-self: stretch;
    padding-left: 4px;
    padding-right: 6px;
}

/* Même présentation que #tool-main-header (déclencheur visuel + popup) */
body.illu-toolbar-ribbon .illu-shape-picker-header {
    position: relative;
    display: block;
    align-self: stretch;
    margin: 0;
    padding: 0;
    min-width: 72px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
    cursor: pointer;
    overflow: visible;
}

body.illu-toolbar-ribbon .illu-shape-picker-header .illu-shape-picker-trigger,
body.illu-toolbar-ribbon .illu-shape-picker-header .illu-tool-picker {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
    width: 100%;
    height: 100%;
    padding: 2px 3px;
    margin: 0;
    box-sizing: border-box;
    border-radius: var(--mp-radius, 2px);
    background: color-mix(in srgb, var(--mp-accent, #806020) 6%, transparent);
    overflow: hidden;
}

body.illu-toolbar-ribbon #illu-shape-picker-icon.illu-tool-header-icon svg {
    width: 20px;
    height: 20px;
}

body.illu-toolbar-ribbon .illu-shape-picker-header:focus {
    outline: 1px dotted var(--mp-accent, #806020);
    outline-offset: 1px;
}

body.illu-toolbar-ribbon .illu-shape-picker-header:focus .illu-tool-picker {
    border-color: var(--mp-accent, #806020);
}

.illu-shape-picker-popup {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: 12000;
    min-width: max-content;
    max-width: min(92vw, 400px);
    padding: 6px 8px 8px;
    border: 1px solid #808080;
    background: #fff;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
}

.illu-shape-picker-section + .illu-shape-picker-section {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.illu-shape-picker-section-title {
    font-size: 11px;
    font-weight: 600;
    color: #444;
    margin: 0 0 4px 2px;
}

.illu-shape-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 40px);
    gap: 2px;
}

.illu-shape-picker-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    padding: 2px;
    border: 1px solid transparent;
    background: transparent;
    cursor: default;
    color: inherit;
}

.illu-shape-picker-item:hover {
    border-color: #316ac5;
    background: rgba(49, 106, 197, 0.08);
}

.illu-shape-picker-item.active {
    border-color: #316ac5;
    box-shadow: inset 0 0 0 1px #316ac5;
    background: rgba(49, 106, 197, 0.12);
}

.illu-shape-picker-item i {
    width: 20px;
    height: 20px;
    font-size: 15px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.illu-shape-picker-item svg {
    width: 36px;
    height: 36px;
    pointer-events: none;
    transform: scale(1.1); /* Slight boost to make thin strokes pop more */
}

.illu-shape-picker-item .illu-shape-picker-fa {
    font-size: 15px;
    line-height: 1;
    color: inherit;
}

.illu-shape-picker-item .illu-shape-ico--outline {
    color: currentColor;
}

.tool-btn--shape-family .illu-tool-shape-family-ico {
    color: inherit;
}

body.theme-dark .illu-shape-picker-popup {
    background: #2d2d2d;
    border-color: #555;
    color: #eee;
}

body.theme-dark .illu-shape-picker-section-title {
    color: #ccc;
}
body.illu-toolbar-ribbon .illu-ribbon-group[hidden] {
    display: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group-body > .field-row {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Popover Menu Modern UX - Match W10/W98 themes */
.illu-popover-trigger {
    position: relative;
    padding: 0 4px;
    height: 24px;
    border-radius: 2px;
    background: transparent;
    color: var(--text-color, #000);
    border: 1px solid transparent;
    transition: all 0.1s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}
.illu-popover-trigger:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.1));
    border-color: var(--border-light, rgba(0, 0, 0, 0.2));
}
.illu-popover-menu {
    position: absolute;
    border: 1px solid var(--border-dark, #a0a0a0);
    background: var(--panel-bg, #f0f0f0);
    border-radius: 0;
    padding: 2px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    color: var(--text-color, #000);
    margin: 0;
    z-index: 10000;
    flex-direction: column;
}

/* Anchor Positioning where supported */
@supports (anchor-name: --test) {
    button[popovertarget="vector-popover-arrange"] { anchor-name: --anchor-arrange; }
    #vector-popover-arrange { position-anchor: --anchor-arrange; top: anchor(bottom); left: anchor(left); margin-top: 2px; }

    button[popovertarget="vector-popover-combine"] { anchor-name: --anchor-combine; }
    #vector-popover-combine { position-anchor: --anchor-combine; top: anchor(bottom); left: anchor(left); margin-top: 2px; }
}

.illu-popover-item {
    background: transparent;
    border: none;
    color: inherit;
    padding: 4px 12px;
    text-align: left;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}
.illu-popover-item:hover {
    background: var(--accent-color, #0078d7);
    color: var(--accent-text-color, #fff);
}
.illu-popover-item i {
    width: 14px;
    text-align: center;
}
.illu-popover-sep {
    height: 1px;
    background: var(--border-light, #ccc);
    margin: 2px 0;
}

/* ── Plans / Groupe : même visuel que illu-tool-picker / illu-shape-picker-trigger ─ */
body.illu-toolbar-ribbon .illu-mode-toggle-item:has(.illu-generic-dropdown-header) {
    position: relative;
}

body.illu-toolbar-ribbon .illu-generic-dropdown-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-width: 56px;
    box-sizing: border-box;
    padding: 3px 6px;
    margin: 0;
    border: 2px dashed color-mix(in srgb, var(--mp-accent, #806020) 55%, transparent);
    border-radius: var(--mp-radius, 2px);
    background: color-mix(in srgb, var(--mp-accent, #806020) 6%, transparent);
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-accent, #806020);
    line-height: 1.2;
    min-height: 27px;
    height: auto;
}

body.illu-toolbar-ribbon .illu-generic-dropdown-header:hover {
    border-color: var(--mp-accent, #806020);
    background: color-mix(in srgb, var(--mp-accent, #806020) 10%, transparent);
}

body.illu-toolbar-ribbon .illu-generic-dropdown-header:focus-visible {
    outline: 1px dotted var(--mp-accent, #806020);
    outline-offset: 1px;
}

body.illu-toolbar-ribbon .illu-generic-dropdown-value {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

body.illu-toolbar-ribbon .illu-generic-dropdown-value i {
    font-size: 13px;
    flex-shrink: 0;
    opacity: 0.65;
}

body.illu-toolbar-ribbon .illu-generic-dropdown-value span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    font-weight: 600;
}

body.illu-toolbar-ribbon .illu-generic-dropdown-arrow {
    font-size: 7px;
    line-height: 1;
    opacity: 0.5;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.15s ease;
}

body.illu-toolbar-ribbon .illu-generic-dropdown-header[aria-expanded="true"] .illu-generic-dropdown-arrow {
    transform: rotate(180deg);
}

body.illu-toolbar-ribbon.theme-dark .illu-generic-dropdown-header {
    color: var(--mp-accent, #c9a227);
}

/* ── Groupe Vecteur : layout Plans/Groupe côte à côte, Dupl./Suppr. à droite empilés ─ */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] {
    padding-left: 4px;
    padding-right: 6px;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] .illu-ribbon-group-body {
    width: 100%;
    min-width: 0;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops {
    display: grid !important;
    grid-template-columns: 1fr 1fr minmax(44px, auto);
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 2px 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
}

/* Plans : colonne 1, ligne 1 */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .illu-mode-toggle-item:has(#vector-arrange-dropdown) {
    grid-column: 1;
    grid-row: 1;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Groupe : colonne 2, ligne 1 */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .illu-mode-toggle-item:has(#vector-combine-dropdown) {
    grid-column: 2;
    grid-row: 1;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Dupliqué : colonne 3, ligne 1 */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .illu-mode-toggle-item--unified:first-of-type {
    grid-column: 3;
    grid-row: 1;
    display: block !important;
    width: auto !important;
    min-width: 44px !important;
    max-width: none !important;
    flex: none !important;
}

/* Supprimé : colonne 3, ligne 2 */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .illu-mode-toggle-item--unified:last-of-type {
    grid-column: 3;
    grid-row: 2;
    display: block !important;
    width: auto !important;
    min-width: 44px !important;
    max-width: none !important;
    flex: none !important;
}

/* Boutons Dupliqué / Supprimé : pleine largeur de la cellule */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .illu-mode-toggle-item--unified .illu-mode-toggle-btn {
    width: 100% !important;
    min-width: 44px !important;
    justify-content: flex-start !important;
    padding: 2px 4px !important;
    white-space: nowrap;
}

body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .illu-mode-toggle-item--unified .illu-mode-toggle-lbl {
    font-size: 10px !important;
    white-space: nowrap !important;
}

/* Masquer les séparateurs et le compteur dans le layout ruban */
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .opt-sep,
body.illu-toolbar-ribbon .illu-ribbon-group[data-illu-ribbon-group="vector"] #opt-grp-vector-ops > .illu-mode-toggle-item:first-child:has(#vector-selection-count) {
    display: none !important;
}

/* Custom Overrides for Line Endpoints and Shape Style Fill groups */
body.illu-toolbar-ribbon #line-cap-start-wrap,
body.illu-toolbar-ribbon #line-dash-style-wrap,
body.illu-toolbar-ribbon #line-cap-end-wrap {
    height: 100% !important;
    align-self: stretch !important;
    width: auto !important;
}

body.illu-toolbar-ribbon #line-cap-start-wrap .illu-shape-picker-header,
body.illu-toolbar-ribbon #line-cap-end-wrap .illu-shape-picker-header {
    min-width: unset !important;
    width: 40px !important;
    height: 100% !important;
    align-self: stretch !important;
}

body.illu-toolbar-ribbon #line-dash-style-wrap .illu-shape-picker-header {
    min-width: unset !important;
    width: 56px !important;
    height: 100% !important;
    align-self: stretch !important;
}

/* Compact layout for shape/text fill grids (icons only) */
body.illu-toolbar-ribbon .illu-shape-style-fill-group.illu-ribbon-grid-3x2,
body.illu-toolbar-ribbon .illu-text-style-fill-group.illu-ribbon-grid-3x2 {
    display: grid !important;
    grid-template-columns: repeat(3, 27px) !important;
    grid-template-rows: repeat(2, 27px) !important;
    gap: 2px !important;
    width: max-content !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-shape-style-fill-group.illu-ribbon-grid-3x2 .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon #tool-options-container .illu-text-style-fill-group.illu-ribbon-grid-3x2 .illu-mode-toggle-item--unified {
    min-width: unset !important;
    max-width: unset !important;
    width: 27px !important;
    height: 27px !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-shape-style-fill-group.illu-ribbon-grid-3x2 .illu-mode-toggle-btn,
body.illu-toolbar-ribbon #tool-options-container .illu-text-style-fill-group.illu-ribbon-grid-3x2 .illu-mode-toggle-btn {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    max-width: 27px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   SYSTÈME D'OVERFLOW AUTOMATIQUE DES ALVÉOLES (illu-ribbon-overflow.js)
   ========================================================================== */

/* ── État COMPACT : icône seule, bien centrée ─────────────────────────────── */
body.illu-toolbar-ribbon .illu-ribbon-group--compact {
    --lbl-display: none;
    --btn-padding: 2px !important;
    --btn-justify-content: center;
    --btn-align-items: center;
    /* Min de colonne des grilles compactes : 52px → 28px en compact.
     * Les overrides directs (grid-template-columns: …28px) sont battus par la
     * règle .illu-toggle-group--compact-grid:not()(:not()(:not()) (spécificité
     * gonflée). On redéfinit donc la variable que CETTE règle consomme
     * (--group-grid-cols → minmax(var(--illu-ribbon-grid-col-min), 1fr)).
     * Effet : brushPatternGroup & co. passent vraiment en icône-seule serrée. */
    --illu-ribbon-grid-col-min: 28px;
}

/* Forcer le centrage des boutons en mode compact
 * Spécificité élevée pour battre les règles inline (--inline, #tool-options-container) */
body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-mode-toggle-btn,
body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-icon-toggle.illu-mode-toggle-btn,
body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-toggle-layout--inline > .illu-mode-toggle-btn,
body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-toggle-layout--stack > .illu-mode-toggle-btn {
    justify-content: center !important;
    padding: 2px 3px !important;
    min-width: 28px !important;
    width: 28px !important;
    max-width: 28px !important;
    flex-direction: row !important;
}

/* Items en mode compact : largeur fixe icône seule */
body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-mode-toggle-item--unified,
body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-mode-toggle-item {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
}

/* Compact : grilles compact-grid → colonnes 28px (écrase minmax(52px,1fr)) */
body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-toggle-group--compact-grid {
    grid-template-columns: repeat(auto-fill, 28px) !important;
    width: max-content !important;
    min-width: 0 !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-toggle-group--compact-cols-1 {
    grid-template-columns: repeat(1, 28px) !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-toggle-group--compact-cols-2 {
    grid-template-columns: repeat(2, 28px) !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-toggle-group--compact-cols-3 {
    grid-template-columns: repeat(3, 28px) !important;
}

body.illu-toolbar-ribbon #tool-options-container .illu-ribbon-group--compact .illu-toggle-group--compact-cols-4 {
    grid-template-columns: repeat(4, 28px) !important;
}

/* Masquer les labels en mode compact */
body.illu-toolbar-ribbon .illu-ribbon-group--compact .illu-mode-toggle-lbl {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Compact : grilles line-cap → icône seule 2×2 */
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="opt-grp-line-cap-start"]
    .illu-line-cap-start-group,
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="opt-grp-line-cap-end"]
    .illu-line-cap-end-group {
    grid-template-columns: repeat(2, 28px) !important;
    gap: 2px !important;
    width: max-content !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="opt-grp-line-cap-start"]
    .illu-line-cap-start-group .illu-icon-toggle,
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="opt-grp-line-cap-end"]
    .illu-line-cap-end-group .illu-icon-toggle {
    min-width: 28px !important;
    width: 28px !important;
    height: 27px !important;
    padding: 2px !important;
    justify-content: center !important;
}

/* Compact : grille sélection → icône seule 3×2 */
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-ribbon-selection-stack {
    grid-template-columns: repeat(1, max-content) !important;
}

/* Sélection compact : cibler explicitement chaque classe/id pour battre
 * la spécificité ID (#selection-mode-group) du parent (1,2,1 → ici 1,4,1) */
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-ribbon-selection-stack > .illu-sel-actions-primary:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-ribbon-selection-stack > #selection-mode-group:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-ribbon-selection-stack > .illu-icon-toggle-group:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-ribbon-selection-stack > .illu-mode-toggle-group:not([hidden]),
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-ribbon-selection-stack > .illu-toggle-group--compact-grid:not([hidden]) {
    display: grid !important;
    grid-template-columns: repeat(3, 28px) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 2px !important;
    width: max-content !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-mode-toggle-btn {
    min-width: 28px !important;
    width: 28px !important;
    height: 27px !important;
    padding: 2px !important;
    justify-content: center !important;
}

/* Sélection compact (mobile) — la sous-grille Effacer/Copier/Coller
 * (#illu-mobile-sel-edit-actions) est forcée à 3×72px par une règle à base d'ID
 * (cf. ~ligne 1851), que les sélecteurs de classe du compact ne battent pas.
 * Résultat : selection restait à ~220px en compact et sautait directement au
 * collapse sans jamais montrer l'état icônes-seules.
 * On la ramène ici aux mêmes colonnes 28px icône-seule. Le sélecteur reprend
 * l'ID + ajoute .illu-ribbon-group--compact → spécificité > règle 72px.
 * S'applique aussi au palier compressed (qui ajoute la classe --compact). */
body.illu-toolbar-ribbon.illu-mobile-ui
    .illu-ribbon-group--compact[data-illu-ribbon-group="selection"]
    .illu-ribbon-selection-stack > #illu-mobile-sel-edit-actions:not([hidden]) {
    grid-template-columns: repeat(3, 28px) !important;
}

/* Compact : shape-style-fill / text-style-fill → grille 3×2 icônes seules */
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="shape-style-fill"]
    .illu-ribbon-grid-3x2,
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="text-style-fill"]
    .illu-ribbon-grid-3x2 {
    grid-template-columns: repeat(3, 27px) !important;
    grid-template-rows: repeat(2, 27px) !important;
    gap: 2px !important;
}

/* Compact : clipboard → icône seule, colonne */
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="clipboard"]
    .illu-ribbon-clipboard-desktop {
    flex-direction: column !important;
    gap: 2px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="clipboard"]
    .illu-ribbon-clipboard-desktop .illu-mode-toggle-btn {
    min-height: 24px !important;
    height: 24px !important;
    min-width: 28px !important;
    width: 28px !important;
    padding: 2px !important;
    justify-content: center !important;
}

/* ── État HIDDEN : groupe masqué (ex: clipboard quand trop peu d'espace) ──── */
body.illu-toolbar-ribbon .illu-ribbon-group--hidden {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ── État COLLAPSED : seul le trigger est visible ─────────────────────────── */
body.illu-toolbar-ribbon .illu-ribbon-group--collapsed .illu-ribbon-group-body {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Trigger collapsed — visuel identique à illu-tool-picker :
 * colonne → icône → label → chevron, tout centré.
 * illu-generic-dropdown-header fournit la bordure pointillée et le fond accent. */
body.illu-toolbar-ribbon .illu-ribbon-group-collapse-trigger {
    display: none;                      /* masqué par défaut */
    flex-shrink: 0;
    align-self: stretch;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    min-width: 52px !important;
    max-width: 80px !important;
    padding: 2px 4px !important;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

/* Le label dans le trigger : tronqué comme illu-tool-picker-label */
body.illu-toolbar-ribbon .illu-ribbon-group-collapse-label {
    display: block !important;
    width: 100% !important;
    max-width: 72px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: var(--mp-accent, #806020) !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    user-select: none !important;
    pointer-events: none !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group--collapsed > .illu-ribbon-group-collapse-trigger:not([hidden]) {
    display: flex !important;
}

/* Icône interne */
body.illu-toolbar-ribbon .illu-ribbon-group-collapse-icon {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px;
}

body.illu-toolbar-ribbon.theme-dark .illu-ribbon-group-collapse-trigger {
    color: var(--mp-opt-bar-text, #e0e0e0);
}

/* ── Popup overflow (liste des outils du groupe collapsed) ───────────────── */
#illu-ribbon-overflow-popup {
    position: fixed;
    z-index: 15000;
    background: var(--panel-bg, #f0f0f0);
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.22);
    padding: 3px 0;
    min-width: 120px;
    max-width: 260px;
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 2px;
}

#illu-ribbon-overflow-popup[hidden] {
    display: none !important;
}

.illu-ribbon-overflow-row {
    /* Reset button */
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    text-align: left !important;
    width: 100% !important;
    /* Layout */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 4px 10px 4px 8px !important;
    cursor: default !important;
    font-size: 11px !important;
    color: var(--mp-opt-bar-text, #333) !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-sizing: border-box !important;
    min-height: 26px !important;
}

.illu-ribbon-overflow-row:hover {
    background: var(--mp-accent, #0078d7) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.illu-ribbon-overflow-row--active {
    font-weight: 600 !important;
    background: color-mix(in srgb, var(--mp-accent, #0078d7) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--mp-accent, #0078d7) 30%, transparent) !important;
}

.illu-ribbon-overflow-row--active:hover {
    background: var(--mp-accent, #0078d7) !important;
    color: #fff !important;
}

.illu-ribbon-overflow-row i,
.illu-ribbon-overflow-row svg,
.illu-ribbon-overflow-row .illu-shape-ico {
    width: 16px !important;
    height: 16px !important;
    font-size: 13px;
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.illu-ribbon-overflow-lbl {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dark theme popup */
body.theme-dark #illu-ribbon-overflow-popup {
    background: #2a2d36;
    border-color: rgba(255, 255, 255, 0.2);
    color: #e0e0e0;
}

body.theme-dark .illu-ribbon-overflow-row {
    color: #e0e0e0;
}

/* Corps cloné (groupes sans items unifiés) */
.illu-ribbon-overflow-body-clone {
    padding: 6px 8px;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Le clone reproduit le body d'origine (grilles à colonnes fixes, jauges larges,
 * largeurs max-content) qui débordait le popup et se faisait rogner (overflow-x
 * hidden). Dans le popup, on neutralise ces grilles : tout passe en colonne
 * pleine largeur pour TOUJOURS tenir, sans découpe par la largeur d'écran. */
.illu-ribbon-overflow-body-clone .illu-icon-toggle-group,
.illu-ribbon-overflow-body-clone .illu-mode-toggle-group,
.illu-ribbon-overflow-body-clone .illu-toggle-group--compact-grid,
.illu-ribbon-overflow-body-clone .illu-sel-actions-layout,
.illu-ribbon-overflow-body-clone .illu-ribbon-param-pack,
.illu-ribbon-overflow-body-clone .illu-text-font-size-stack,
.illu-ribbon-overflow-body-clone .opt-grp {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 4px !important;
}

.illu-ribbon-overflow-body-clone .illu-mode-toggle-item,
.illu-ribbon-overflow-body-clone .illu-mode-toggle-item--unified,
.illu-ribbon-overflow-body-clone .illu-mode-toggle-btn,
.illu-ribbon-overflow-body-clone .illu-icon-toggle {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
}

/* Jauges : piste pleine largeur du popup (au lieu d'une largeur fixe rognée) */
.illu-ribbon-overflow-body-clone .illu-gauge-track {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Labels de boutons réaffichés dans le popup (le clone peut venir d'un compact) */
.illu-ribbon-overflow-body-clone .illu-mode-toggle-lbl {
    display: inline !important;
    width: auto !important;
    overflow: visible !important;
}

/* ── Gauge track : réductible dans le ruban, minimum 60px ─────────────────── */
/* Normal : track s'étire librement dans le ribbon */
body.illu-toolbar-ribbon .illu-gauge-track {
    min-width: 60px;
}

/* Compact : groupe de jauges réduit → track forcé à 60px de large */
body.illu-toolbar-ribbon .illu-ribbon-group--compact .illu-gauge-track {
    width: 60px !important;
    min-width: 0 !important;
    max-width: 60px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group--compact .illu-ribbon-param-pack,
body.illu-toolbar-ribbon .illu-ribbon-group--compact .illu-text-font-size-stack {
    grid-template-columns: minmax(60px, 1fr) !important;
    min-width: 80px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="size"] .illu-ribbon-param-pack,
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="text-params"] .illu-ribbon-param-pack,
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="text-params"] .illu-text-font-size-stack {
    --illu-ribbon-gauge-label-col: 2rem;
    min-width: 90px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="size"] .illu-ribbon-group-body,
body.illu-toolbar-ribbon .illu-ribbon-group--compact[data-illu-ribbon-group="text-params"] .illu-ribbon-group-body {
    min-width: 90px;
}

/* ── Palier COMPRESSED générique (hors cutout) ──────────────────────────────
 * Intermédiaire entre compact (icône seule + label de groupe) et collapsed
 * (popup). Le JS ajoute aussi la classe --compact → on hérite de tout le visuel
 * icône-seule, puis on retire le label de groupe et on resserre davantage.
 * Objectif : lisser le saut compact → collapsed, surtout sur téléphone où l'on
 * atteint presque toujours le collapse faute de largeur.                       */
body.illu-toolbar-ribbon .illu-ribbon-group--compressed:not([data-illu-ribbon-group="cutout"])
    > .illu-ribbon-group-label {
    display: none !important;
}

/* Jauges : piste encore plus courte qu'en compact (60px → 40px) */
body.illu-toolbar-ribbon .illu-ribbon-group--compressed:not([data-illu-ribbon-group="cutout"])
    .illu-gauge-track {
    width: 40px !important;
    min-width: 0 !important;
    max-width: 40px !important;
}

/* Multi-icônes : grille repliée sur 2 colonnes (la hauteur de 84px laisse la
 * place à plusieurs rangées de 28px) → largeur ~halvée avant le collapse.
 * #tool-options-container pour égaler la spécificité des règles --compact-cols-N
 * et gagner par l'ordre source (ce bloc vient après).                          */
body.illu-toolbar-ribbon #tool-options-container
    .illu-ribbon-group--compressed:not([data-illu-ribbon-group="cutout"])
    .illu-toggle-group--compact-grid {
    grid-template-columns: repeat(2, 28px) !important;
    width: max-content !important;
}

/* ── Stack de collapsed : colonne quand l'espace est encore trop réduit ───── */
body.illu-toolbar-ribbon .illu-ribbon-collapsed-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 2px !important;
    flex-shrink: 0;
    align-self: stretch;
    border-right: 1px solid rgba(0, 0, 0, 0.14);
    padding: 2px 3px;
    box-sizing: border-box;
    width: max-content;
}

/* Groupes dans le stack : pas de bordure, pas de padding */
body.illu-toolbar-ribbon .illu-ribbon-collapsed-stack .illu-ribbon-group {
    border-right: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: 100%;
    flex-shrink: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
}

/* Label caché dans le stack */
body.illu-toolbar-ribbon .illu-ribbon-collapsed-stack .illu-ribbon-group-label {
    display: none !important;
}

/* Trigger dans le stack : compact 22px, icône + chevron côte à côte */
body.illu-toolbar-ribbon .illu-ribbon-collapsed-stack .illu-ribbon-group-collapse-trigger {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 22px !important;
    height: 22px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 2px 4px !important;
}

/* Icône plus petite dans le stack */
body.illu-toolbar-ribbon .illu-ribbon-collapsed-stack .illu-ribbon-group-collapse-icon {
    width: 14px !important;
    height: 14px !important;
    font-size: 12px !important;
}

body.illu-toolbar-ribbon .illu-ribbon-collapsed-stack .illu-generic-dropdown-arrow {
    font-size: 6px !important;
}

body.illu-toolbar-ribbon.theme-dark .illu-ribbon-collapsed-stack {
    border-color: rgba(255, 255, 255, 0.1);
}


html #illu-cutout-mode-group, #illu-cutout-action-group {
    /* On force le display flex, et on annule le grid en réinitialisant les variables */
    --group-grid-cols: none !important;
    --group-grid-rows: none !important;
}
/* Sélecteur d'outils de sélection : même gabarit que le catalogue de formes. */
body.illu-toolbar-ribbon #illu-select-picker-icon.illu-tool-header-icon svg {
    width: 20px;
    height: 20px;
}

/* [hidden] doit primer sur le display:block du ruban : sans ça, la cellule
 * « Outil » restait affichée à côté du sélecteur censé la remplacer. */
body.illu-toolbar-ribbon #tool-main-header[hidden] {
    display: none;
}