/*
 * Ruban MasterPaint au style Microsoft 365 / Windows 11 (Fluent).
 *
 * Valeurs relevées sur Word (navigateur, Windows 11, thème clair) :
 *   fond de la barre d'onglets          #F5F5F5
 *   ruban : carte blanche, coins 8 px, ombre 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14)
 *   séparateur de groupes               1 px #C8C6C4, ne touche ni le haut ni le bas
 *   libellé de groupe                   11 px #616161, jamais tronqué
 *   bouton : transparent, coins 4 px ; survol #F5F5F5 ; enfoncé #E0E0E0 ;
 *            activé (bascule) #EBEBEB + bord 1 px #616161
 *   texte                                #242424
 * Compression quand la largeur diminue (js/app/illu-ribbon-overflow.js) :
 *   icône + texte → icône seule → sans libellé → groupe replié en un grand bouton
 *   « icône / Nom ▾ » dont le volet contient les vrais contrôles du groupe.
 *
 * Portée : barre « Ruban MasterPaint », thème Flat Design (Windows 98 et macOS gardent leur
 * dessin), hors téléphone. Le thème sombre a ses propres valeurs.
 */

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) {
    --fl-bar: #f5f5f5;
    --fl-card: #ffffff;
    --fl-text: #242424;
    --fl-label: #616161;
    --fl-sep: #c8c6c4;
    --fl-hover: #f5f5f5;
    --fl-press: #e0e0e0;
    --fl-on: #ebebeb;
    --fl-on-border: #616161;
    --fl-field: #ffffff;
    --fl-field-border: #d1d1d1;
    --fl-field-line: #616161;
    --fl-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
    --fl-flyout-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
}

body.illu-toolbar-ribbon.theme-dark:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) {
    --fl-bar: #1f1f1f;
    --fl-card: #292929;
    --fl-text: #ffffff;
    --fl-label: #adadad;
    --fl-sep: #4a4a4a;
    --fl-hover: #3d3d3d;
    --fl-press: #333333;
    --fl-on: #3d3d3d;
    --fl-on-border: #c7c7c7;
    --fl-field: #1f1f1f;
    --fl-field-border: #4a4a4a;
    --fl-field-line: #adadad;
    --fl-shadow: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
    --fl-flyout-shadow: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
}

/* ---------------------------------------------------------------- carte du ruban */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container {
    /* pleine largeur, sans coins arrondis (choix MasterPaint) ; filet bas comme l'ombre de Word */
    background: var(--fl-card) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fl-field-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 2px 4px !important;
    box-sizing: border-box !important;
    color: var(--fl-text) !important;
}

/* le bandeau autour de la carte prend le gris de la barre d'onglets */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container:not(:empty) {
    outline: 0;
}

/* ---------------------------------------------------------------- groupes */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group {
    position: relative;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-right: 7px !important;
    margin-right: 4px !important;
}

/* séparateur fin qui ne touche ni le haut ni le bas de la carte (comme Word) */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group::after {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--fl-sep);
    pointer-events: none;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group:last-of-type::after {
    display: none;
}

/* libellé de groupe : petit, gris, jamais tronqué (le groupe s'élargit au besoin) */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-label {
    color: var(--fl-label) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    min-width: max-content !important;
}

/* ---------------------------------------------------------------- boutons */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(button.illu-icon-toggle, button.illu-mode-toggle-btn, .illu-tool-header, .illu-ribbon-group-collapse-trigger) {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--fl-text) !important;
    text-shadow: none !important;
    transition: background-color 0.08s linear;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(button.illu-icon-toggle, button.illu-mode-toggle-btn, .illu-tool-header, .illu-ribbon-group-collapse-trigger):hover {
    background: var(--fl-hover) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(button.illu-icon-toggle, button.illu-mode-toggle-btn, .illu-tool-header, .illu-ribbon-group-collapse-trigger):active {
    background: var(--fl-press) !important;
}

/* bascule activée : gris + bord foncé (pas de remplissage coloré) */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(button.illu-icon-toggle, button.illu-mode-toggle-btn):is(.illu-icon-toggle--on, .active, [aria-pressed="true"]) {
    background: var(--fl-on) !important;
    border-color: var(--fl-on-border) !important;
    color: var(--fl-text) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(button.illu-icon-toggle, button.illu-mode-toggle-btn):is(.illu-icon-toggle--on, .active, [aria-pressed="true"]) :is(.illu-mode-toggle-lbl, span) {
    color: var(--fl-text) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(button, .illu-tool-header):focus-visible {
    outline: 2px solid var(--fl-text) !important;
    outline-offset: -2px;
}

/* gros bouton « outil » (sélecteur) : comme les grands boutons de Word, sans cadre pointillé */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-tool-picker {
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-tool-picker:hover {
    background: var(--fl-hover) !important;
}

/* ---------------------------------------------------------------- champs : jauges, listes */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(.illu-gauge-track, select:not(.illu-tool-picker-select), input[type="text"], input[type="number"]) {
    background-color: var(--fl-field) !important;
    border: 1px solid var(--fl-field-border) !important;
    border-bottom-color: var(--fl-field-line) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--fl-text) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(.illu-gauge-track, select:not(.illu-tool-picker-select)):hover {
    background-color: var(--fl-hover) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-gauge-fill {
    border-radius: 3px 0 0 3px !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-gauge-step {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--fl-text) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-gauge-step:hover {
    background: var(--fl-hover) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-gauge-step:active {
    background: var(--fl-press) !important;
}

/* ---------------------------------------------------------------- groupe replié (comme « Police ▾ » de Word) */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-collapse-trigger:not([hidden]) {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-width: 48px !important;
    height: auto !important;
    min-height: 60px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-collapse-trigger .illu-ribbon-group-collapse-icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-collapse-trigger .illu-ribbon-group-collapse-label {
    display: block !important;
    white-space: nowrap !important;
    color: var(--fl-text) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-collapse-trigger .illu-tool-picker-chevron {
    position: static !important;
    font-size: 8px !important;
}

/* volet d'un groupe replié : carte flottante Fluent, contrôles réels du groupe */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .illu-ribbon-overflow-popup {
    background: var(--fl-card) !important;
    color: var(--fl-text) !important;
    border: 1px solid var(--fl-field-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--fl-flyout-shadow) !important;
    padding: 6px !important;
    z-index: 100000 !important;
}

.illu-ribbon-overflow-popup > .illu-ribbon-group-body.illu-ribbon-overflow-live {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: min(520px, calc(100vw - 16px));
}

/* ---------------------------------------------------------------- jamais sur deux lignes (comme Word) :
 * quand plus rien ne peut se replier, le ruban défile horizontalement (barre fine). */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container,
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(.illu-ribbon-groups, .tool-options-bar) {
    flex-wrap: nowrap !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group {
    flex-shrink: 0 !important;
}

/* gros bouton « outil » : libellé en couleur de texte, comme les grands boutons de Word */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-tool-picker-label {
    color: var(--fl-text) !important;
}
/* ---------------------------------------------------------------- boutons dans le volet d'un groupe replié */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .illu-ribbon-overflow-popup :is(button.illu-icon-toggle, button.illu-mode-toggle-btn) {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--fl-text) !important;
    width: auto !important;
    min-width: 56px !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .illu-ribbon-overflow-popup :is(button.illu-icon-toggle, button.illu-mode-toggle-btn):hover {
    background: var(--fl-hover) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .illu-ribbon-overflow-popup :is(button.illu-icon-toggle, button.illu-mode-toggle-btn):active {
    background: var(--fl-press) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .illu-ribbon-overflow-popup :is(button.illu-icon-toggle, button.illu-mode-toggle-btn):is(.illu-icon-toggle--on, .active, [aria-pressed="true"]) {
    background: var(--fl-on) !important;
    border-color: var(--fl-on-border) !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) .illu-ribbon-overflow-popup .illu-mode-toggle-item {
    width: auto !important;
}
/* ---------------------------------------------------------------- alignements (piles de jauges : Police / Taille / Épaisseur…)
 * Une seule grille pour toute la pile : la colonne des libellés prend la largeur du plus long
 * (« Ép. contour ») au lieu de 50 px fixes — plus aucun texte ne passe sous le bouton « − » —
 * et tous les contrôles commencent et finissent au même endroit. */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack {
    display: grid !important;
    grid-template-columns: max-content auto !important;
    grid-auto-rows: 22px !important;
    column-gap: 8px !important;
    row-gap: 1px !important;
    align-items: center !important;
    width: auto !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack > .field-row:not([hidden]):not([style*="display: none"]):not([style*="display:none"]) {
    display: contents !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack .illu-opt-lbl {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    line-height: 22px !important;
}

/* même largeur pour la zone de police et les jauges (du « − » au « + ») : la colonne prend la
 * largeur naturelle des jauges (qui rétrécissent quand le ruban se compresse) et la zone de
 * police la remplit sans peser sur son calcul (largeur 0 + min-width 100 %). */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack :is(.illu-gauge-wrap, .illu-font-combo-wrap) {
    margin: 0 !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack .illu-font-combo-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack .illu-font-combo-wrap > input {
    width: 0 !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    height: 22px !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack .illu-gauge-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 1px !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack .illu-gauge-track {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: 22px !important;
    box-sizing: border-box !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-gauge-stack .illu-gauge-step {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* bouton d'un groupe replié : icône, nom et chevron centrés sur le même axe */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group-collapse-trigger > * {
    align-self: center !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    text-align: center !important;
}
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group .illu-ribbon-gauge-stack .illu-gauge-wrap {
    min-width: 132px !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-ribbon-group:is(.illu-ribbon-group--compact, .illu-ribbon-group--compressed) .illu-ribbon-gauge-stack .illu-gauge-wrap {
    min-width: 90px !important;
}
/* trois rangées (boutons + 2 jauges) doivent tenir avec le libellé de groupe dessous :
 * jauges de 20 px dans le ruban (Word : champs de 22-24 px sur deux rangées) */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .field-row.illu-gauge-field {
    min-height: 20px !important;
}

body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .field-row.illu-gauge-field :is(.illu-gauge-track, .illu-gauge-step) {
    height: 20px !important;
    min-height: 20px !important;
}

/* nom de l'outil jamais tronqué (« Sélection rapide », pas « Sélection ra… ») */
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container .illu-tool-picker-label {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
body.illu-toolbar-ribbon:not(.illu-toolbar-pdn):not(.illu-theme-classic):not(.illu-theme-mac):not(.illu-mobile-ui) #tool-options-container :is(.illu-tool-picker, .illu-tool-header, .illu-shape-picker-wrap) {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
}