/* ==========================================================================
   AlphaEdge — UI refresh (Docs & API)
   Couche chargée après style.css / style-dev.css. Les règles portant sur le
   contenu sont limitées à body.ae-refresh (Docs & API) ; seul le sélecteur
   d'application est partagé avec le Studio.
   - Arrondis homogènes (8 / 10 / 14 / 18 px)
   - Sidebar grise, zone principale blanche « papier »
   - Moins de bordures : une carte colorée n'a pas de bordure, une carte de la
     couleur du fond garde une bordure fine pour se détacher
   - Bouton d'action principal : dégradé marine AlphaDataRoom
   ========================================================================== */

:root {
    --ae-radius-xs: 6px;
    --ae-radius-sm: 8px;
    --ae-radius: 10px;
    --ae-radius-lg: 14px;
    --ae-radius-xl: 18px;
    --ae-radius-pill: 999px;

    --ae-sidebar-bg: #f3f4f6;
    --ae-main-bg: #fcfcfd;
    --ae-surface: #ffffff;
    --ae-surface-2: #f6f7f9;
    --ae-surface-3: #eef0f3;
    --ae-hover: #e9ebef;

    --ae-line: #e7e8ec;
    --ae-line-strong: #d9dbe1;
    --ae-line-soft: #efeff2;

    --ae-ink: #0c0c10;
    --ae-ink-soft: #3f4150;
    --ae-ink-muted: #6b6e7a;
    --ae-ink-faint: #9a9ca6;

    --ae-accent: #01113b;
    --ae-accent-soft: #eef4ff;
    --ae-accent-ring: #c7d7f5;
    --ae-accent-ink: #01113b;
    --ae-focus: rgba(74, 111, 224, 0.28);

    --ae-cta-gradient: linear-gradient(125deg, #0b1a3a 0%, #1d3a8a 55%, #4a6fe0 100%);
    --ae-cta-shadow: 0 10px 24px -10px rgba(29, 58, 138, 0.65), 0 2px 5px rgba(15, 23, 42, 0.16);
    --ae-cta-shadow-hover: 0 14px 30px -10px rgba(74, 111, 224, 0.7), 0 3px 8px rgba(15, 23, 42, 0.2);

    --ae-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --ae-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
    --ae-shadow-md: 0 10px 24px -8px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.05);
    --ae-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.22);

    --ae-code-bg: #16181d;
    --ae-code-head: #1f2229;
    --ae-code-ink: #e6e8ee;

    --ae-ease: 160ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Teintes de la charte : fond pastel (fill), contour de la même teinte (edge),
       couleur profonde (deep) et halo (glow). Le contour teinté détache la carte
       du fond sans changer ni le fond ni la couleur. */
    --ae-green-fill: #e7ffde;
    --ae-green-edge: #b9e3a2;
    --ae-green-glow: #cdf3b9;
    --ae-green-deep: #003333;
    --ae-green-shadow: rgba(0, 51, 51, 0.16);

    --ae-blue-fill: #dbe8ff;
    --ae-blue-edge: #aac3f0;
    --ae-blue-glow: #c3d7fb;
    --ae-blue-deep: #01123c;
    --ae-blue-shadow: rgba(1, 18, 60, 0.16);

    --ae-orange-fill: #ffe9de;
    --ae-orange-edge: #f5c0a4;
    --ae-orange-glow: #ffd6c1;
    --ae-orange-deep: #b83400;
    --ae-orange-shadow: rgba(184, 52, 0, 0.14);

    --ae-pink-fill: #fde4ef;
    --ae-pink-edge: #efb3cd;
    --ae-pink-glow: #f9cfe1;
    --ae-pink-deep: #8a1f4f;
    --ae-pink-shadow: rgba(138, 31, 79, 0.14);
}

body.ae-refresh {
    --alphaedge-sidebar-w: 272px;
}

body.ae-refresh.sidebar-collapsed {
    --alphaedge-sidebar-w: 64px;
}

html.dark {
    --ae-sidebar-bg: #121316;
    --ae-main-bg: #18191d;
    --ae-surface: #1e1f24;
    --ae-surface-2: #212227;
    --ae-surface-3: #282a30;
    --ae-hover: #24262c;

    --ae-line: #2c2e35;
    --ae-line-strong: #3a3d45;
    --ae-line-soft: #25272d;

    --ae-ink: #ecedf0;
    --ae-ink-soft: #c8cad1;
    --ae-ink-muted: #9a9da7;
    --ae-ink-faint: #7d808a;

    --ae-accent: #6a90e0;
    --ae-accent-soft: #1f2d4d;
    --ae-accent-ring: #34508c;
    --ae-accent-ink: #d7e3fb;
    --ae-focus: rgba(122, 156, 245, 0.35);

    --ae-cta-gradient: linear-gradient(125deg, #2447a8 0%, #3a64d8 55%, #6b8ff0 100%);
    --ae-cta-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(122, 156, 245, 0.4), 0 10px 24px -10px rgba(0, 0, 0, 0.8);
    --ae-cta-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 0 1px rgba(150, 178, 250, 0.6), 0 8px 26px -8px rgba(92, 130, 240, 0.7);

    --ae-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ae-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --ae-shadow-md: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
    --ae-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);

    --ae-code-bg: #111216;
    --ae-code-head: #1a1c21;

    --ae-green-fill: #003333;
    --ae-green-edge: #1c5c57;
    --ae-green-glow: #0a4541;
    --ae-green-deep: #cfeeb6;
    --ae-green-shadow: rgba(0, 0, 0, 0.5);

    --ae-blue-fill: #1a2338;
    --ae-blue-edge: #314469;
    --ae-blue-glow: #23314f;
    --ae-blue-deep: #d7e3fb;
    --ae-blue-shadow: rgba(0, 0, 0, 0.5);

    --ae-orange-fill: #2a1c17;
    --ae-orange-edge: #533223;
    --ae-orange-glow: #3a251c;
    --ae-orange-deep: #ffb99d;
    --ae-orange-shadow: rgba(0, 0, 0, 0.5);

    --ae-pink-fill: #2c1823;
    --ae-pink-edge: #57304a;
    --ae-pink-glow: #3b2030;
    --ae-pink-deep: #f6bcd5;
    --ae-pink-shadow: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   1. Sélecteur d'application (Docs & API / Studio) — partagé
   ========================================================================== */
body.docs-body .sidebar .logo-section.sidebar-head {
    height: 72px;
    min-height: 72px;
    padding: 12px 12px 12px 10px;
    gap: 6px;
    border-bottom: none;
}

body.docs-body .sidebar .logo-apps-wrap {
    position: relative;
}

body.docs-body .sidebar .sidebar-head .logo-apps-trigger {
    gap: 6px;
    height: 48px;
    padding: 0 8px 0 10px;
    border-radius: var(--ae-radius);
    transition: background-color var(--ae-ease), box-shadow var(--ae-ease);
}

body.docs-body .sidebar .sidebar-head .logo-apps-trigger:hover,
body.docs-body .sidebar .logo-apps-wrap.is-open .logo-apps-trigger {
    background: var(--ae-hover);
}

body.docs-body .sidebar .sidebar-head .logo-apps-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.docs-body .sidebar .sidebar-head .logo-apps-trigger .logo-apps-current {
    height: 34px;
}

body.docs-body .sidebar .logo-apps-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--ae-radius-xs);
    color: var(--ae-ink-muted);
    font-size: 0;
    transform: none !important;
}

body.docs-body .sidebar .logo-apps-trigger:hover .logo-apps-chevron,
body.docs-body .sidebar .logo-apps-wrap.is-open .logo-apps-chevron {
    color: var(--ae-ink);
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-dropdown {
    top: calc(100% + 6px);
    left: 0;
    right: auto;
    width: calc(var(--alphaedge-sidebar-w, 240px) - 20px);
    box-sizing: border-box;
    margin: 0;
    padding: 6px;
    background: var(--ae-surface);
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    box-shadow: var(--ae-shadow-lg);
    gap: 2px;
    z-index: 60;
    transform-origin: top left;
    animation: ae-pop-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ae-pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--ae-radius);
    text-align: left;
    text-decoration: none;
    color: var(--ae-ink);
    line-height: 1.25;
    transition: background-color var(--ae-ease);
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item:hover {
    background: var(--ae-surface-2);
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item.is-current {
    background: #dbe8ff;
}

html.dark body.docs-body .sidebar .logo-apps-wrap .logo-apps-item.is-current {
    background: #23345a;
}

/* Une seule teinte : l'icône de l'option sélectionnée se fond dans le fond bleu */
html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item.is-current .logo-apps-item-icon {
    background: transparent;
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ae-radius-sm);
    font-size: 0.875rem;
}

/* Une seule teinte (bleu de la charte) pour toutes les applications du sélecteur */
html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item-icon {
    background: #dbe8ff;
    color: #01123c;
}

html.dark body.docs-body .sidebar .logo-apps-wrap .logo-apps-item-icon {
    background: #23345a;
    color: #d7e3fb;
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ae-ink);
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item-desc {
    font-size: 0.75rem;
    color: var(--ae-ink-muted);
    white-space: normal;
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item-check {
    flex: none;
    font-size: 0.75rem;
    color: var(--ae-accent);
    opacity: 0;
}

html body.docs-body .sidebar .logo-apps-wrap .logo-apps-item.is-current .logo-apps-item-check {
    opacity: 1;
}

/* Sidebar repliée : pas de menu (comportement existant) */
body.sidebar-collapsed.docs-body .sidebar .logo-apps-chevron {
    display: none;
}

/* ==========================================================================
   2. Layout Docs & API : sidebar grise, zone principale blanche
   ========================================================================== */
body.ae-refresh,
body.ae-refresh .content-area,
body.ae-refresh .docs-main {
    background: var(--ae-main-bg);
}

body.ae-refresh .sidebar,
body.ae-refresh .sidebar .logo-section,
body.ae-refresh .studio-sidebar-footer,
body.ae-refresh .studio-sidebar-status,
body.ae-refresh .sidebar-status-wrap {
    background: var(--ae-sidebar-bg);
}

body.ae-refresh .sidebar {
    border-right: 1px solid var(--ae-line) !important;
}

/* Plus de topbar : le contenu démarre en haut */
body.ae-refresh .docs-main,
body.ae-refresh .content-area:has(.hero) .docs-main {
    padding-top: 0;
}

/* --- Navigation --- */
body.ae-refresh .sidebar-nav {
    padding: 8px 0 16px;
}

body.ae-refresh .nav-section + .nav-section {
    margin-top: 6px;
}

body.ae-refresh .section-title {
    margin: 0 0 6px;
    padding: 10px 22px 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ae-ink-faint);
}

body.ae-refresh .section-title::after {
    display: none;
}

body.ae-refresh .nav-list {
    margin-bottom: 8px;
    padding: 0 10px;
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item + .nav-item {
    margin-top: 2px;
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link,
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link-toggle {
    min-height: 38px;
    padding: 0 10px 0 6px;
    gap: 10px;
    border: none !important;
    border-radius: var(--ae-radius);
    color: var(--ae-ink-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    background: transparent;
    box-sizing: border-box;
    transition: background-color var(--ae-ease), color var(--ae-ease), box-shadow var(--ae-ease);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link-toggle {
    padding: 0 6px 0 0;
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link-toggle .nav-link-content {
    padding: 0 0 0 6px;
    min-height: 38px;
    gap: 10px;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
}

body.ae-refresh .sidebar .nav-link::before,
body.ae-refresh .sidebar .nav-link-toggle::before {
    content: none !important;
}

/* Icône dans une pastille 28px (comme AlphaDataRoom) */
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link > i:first-child,
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link-content > i:first-child {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ae-radius-sm);
    font-size: 0.8125rem;
    color: var(--ae-ink-muted);
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link:hover,
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link-toggle:hover {
    background: var(--ae-hover);
    color: var(--ae-ink);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link:hover > i:first-child,
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-link-toggle:hover .nav-link-content > i:first-child {
    color: var(--ae-ink);
}

/* État actif / focus : fond bleu doux + liseré interne + pastille marine */
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item.active > .nav-link,
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item.active > .nav-link-toggle {
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item.active > .nav-link-toggle .nav-link-content {
    color: var(--ae-accent-ink);
    font-weight: 600;
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item.active > .nav-link > i:first-child,
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item.active > .nav-link-toggle .nav-link-content > i:first-child {
    background: var(--ae-accent);
    color: #ffffff;
}

html.dark body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item.active > .nav-link > i:first-child,
html.dark body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-item.active > .nav-link-toggle .nav-link-content > i:first-child {
    color: #0c1120;
}

body.ae-refresh .sidebar .nav-link:focus-visible,
body.ae-refresh .sidebar .nav-sublink:focus-visible,
body.ae-refresh .sidebar .nav-link-content:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-chevron {
    margin-right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: var(--ae-ink-faint);
    border-radius: var(--ae-radius-xs);
}

body.ae-refresh .nav-link-external-icon {
    margin-left: auto;
    font-size: 0.625rem;
    color: var(--ae-ink-faint);
    opacity: 0;
    transition: opacity var(--ae-ease);
}

body.ae-refresh .nav-link--external:hover .nav-link-external-icon {
    opacity: 1;
}

/* Sous-liste : rail vertical discret au lieu d'une boîte */
body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-sublist {
    position: relative;
    margin: 2px 0 4px 20px;
    padding-left: 10px;
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-sublist::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--ae-line-strong);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-subitem + .nav-subitem {
    margin-top: 1px;
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-sublink {
    min-height: 32px;
    padding: 0 10px;
    gap: 8px;
    border: none !important;
    border-radius: var(--ae-radius-sm);
    color: var(--ae-ink-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-sublink:hover {
    background: var(--ae-hover);
    color: var(--ae-ink);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar .nav-subitem.active > .nav-sublink {
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
}

/* Endpoints : badge méthode compact + chemin monospace */
body.ae-refresh .sidebar .nav-sublist--endpoints .api-endpoint-link {
    align-items: center;
    gap: 10px;
}

body.ae-refresh .sidebar .nav-sublist--endpoints .nav-sublink .http-method {
    flex: none;
    min-width: 40px;
    height: 20px;
    margin: 0;
    padding: 0 5px;
    border-radius: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    line-height: 1.4;
    border: none;
}

body.ae-refresh .sidebar .nav-sublist--endpoints .http-get {
    background: #dbe8ff;
    color: #01123c;
}

body.ae-refresh .sidebar .nav-sublist--endpoints .http-post {
    background: #ffe9de;
    color: #b83400;
}

html.dark body.ae-refresh .sidebar .nav-sublist--endpoints .http-get {
    background: #23345a;
    color: #c9d9fb;
}

html.dark body.ae-refresh .sidebar .nav-sublist--endpoints .http-post {
    background: #35201a;
    color: #ffb99d;
}

body.ae-refresh .sidebar .nav-sublist--endpoints .endpoint-name {
    font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}

/* --- Pied de sidebar : compte + état API + thème (comme Studio) --- */
body.ae-refresh .studio-sidebar-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--ae-line);
}

body.ae-refresh .studio-sidebar-user-btn {
    padding: 7px 8px;
    border-radius: var(--ae-radius) !important;
}

body.ae-refresh .studio-sidebar-user-btn:hover,
body.ae-refresh .studio-sidebar-user-btn[aria-expanded="true"] {
    background: var(--ae-hover) !important;
}

body.ae-refresh .studio-sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-cta-gradient);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

body.ae-refresh .studio-sidebar-user-avatar {
    position: relative;
}

/* Invitations en attente : point orange sur l'avatar (l'entrée est dans le menu profil) */
body.ae-refresh .studio-sidebar-user-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ae-orange-deep);
    box-shadow: 0 0 0 2px var(--ae-sidebar-bg);
}

body.ae-refresh .studio-sidebar-user-menu,
body.ae-refresh .sidebar-user-menu {
    padding: 6px;
    background: var(--ae-surface);
    border: 1px solid var(--ae-line) !important;
    border-radius: var(--ae-radius-lg);
    box-shadow: var(--ae-shadow-lg);
    overflow: hidden;
}

body.ae-refresh .sidebar-user-menu-item {
    border-radius: var(--ae-radius-sm);
    min-height: 36px;
}

body.ae-refresh .studio-sidebar-menu-lang {
    margin: 4px 0;
    padding: 4px 0;
    border-top: 1px solid var(--ae-line-soft);
    border-bottom: 1px solid var(--ae-line-soft);
}

body.ae-refresh .studio-sidebar-menu-lang .lang-dropdown-trigger,
body.ae-refresh .studio-sidebar-lang .lang-dropdown-trigger {
    border-radius: var(--ae-radius-sm);
}

body.ae-refresh .studio-sidebar-guest {
    gap: 6px;
}

body.ae-refresh .studio-sidebar-guest-btn {
    min-height: 38px;
}

body.ae-refresh .sidebar-status-wrap {
    padding: 8px 10px 10px 18px;
    border-top: 1px solid var(--ae-line);
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar-status-wrap,
body.ae-refresh.sidebar-peek .sidebar-status-wrap {
    gap: 4px;
    padding-left: 14px;
}

body.ae-refresh:not(.sidebar-collapsed) .sidebar-status-wrap .sidebar-status-link,
body.ae-refresh.sidebar-peek .sidebar-status-wrap .sidebar-status-link {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 2px;
}

body.ae-refresh .sidebar-status-wrap .sidebar-status-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Langue : compacte, juste à gauche de la lune/soleil, menu ouvert vers le haut */
body.ae-refresh .sidebar-status-lang {
    flex: none;
}

/* Le gap du conteneur (4px) + le padding du bouton éloignaient FR de la lune :
   on les compense pour former un seul groupe visuel. */
body.ae-refresh .sidebar-status-lang + .studio-sidebar-status-theme {
    margin-left: -4px;
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-trigger {
    height: 34px;
    min-height: 34px;
    padding: 0 5px 0 8px;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: var(--ae-radius);
    background: transparent;
    color: var(--ae-ink-soft);
    font-size: 0.75rem;
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-trigger:hover,
body.ae-refresh .sidebar-status-lang .lang-dropdown[data-open="true"] .lang-dropdown-trigger {
    background: var(--ae-hover);
    color: var(--ae-ink);
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-flag {
    width: 16px;
    height: 11px;
    border-radius: 2px;
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-chevron {
    display: none;
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-list {
    top: auto;
    bottom: calc(100% + 8px);
    left: auto;
    right: -40px;
    min-width: 168px;
    padding: 6px;
    background: var(--ae-surface);
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    box-shadow: var(--ae-shadow-lg);
    z-index: 120;
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-option {
    padding: 8px 10px;
    border-radius: var(--ae-radius-sm);
    color: var(--ae-ink);
}

body.ae-refresh .sidebar-status-lang .lang-dropdown-option:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh.sidebar-collapsed:not(.sidebar-peek) .sidebar-status-lang {
    display: none;
}

@media (min-width: 1025px) {
    html body.ae-refresh.sidebar-collapsed.sidebar-peek .sidebar,
    html body.ae-refresh.sidebar-collapsed.docs-body.sidebar-peek .sidebar,
    html body.ae-refresh.sidebar-peek.docs-body .sidebar {
        width: 272px !important;
        min-width: 272px !important;
        max-width: 272px !important;
    }

    html body.ae-refresh.sidebar-collapsed.sidebar-peek .sidebar .sidebar-status-alert-popover:not([hidden]) {
        left: calc(272px + 8px);
    }
}

body.ae-refresh .sidebar-status-link {
    border-radius: var(--ae-radius-sm);
}

body.ae-refresh .studio-sidebar-status-theme {
    border-radius: var(--ae-radius) !important;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ae-ink-muted);
}

body.ae-refresh .studio-sidebar-status-theme:hover {
    background: var(--ae-hover);
    border-color: transparent;
    color: var(--ae-ink);
}

body.ae-refresh .sidebar-status-alert-trigger {
    border-radius: var(--ae-radius) !important;
    background: var(--ae-surface);
}

body.ae-refresh .sidebar-status-alert-trigger::before {
    border-radius: 12px;
}

body.ae-refresh .sidebar-status-alert-popover {
    border-radius: var(--ae-radius-lg);
    overflow: hidden;
}

body.ae-refresh .sidebar .sidebar-toggle--in-head {
    border-radius: var(--ae-radius-sm);
}

body.ae-refresh .sidebar .sidebar-toggle--in-head:hover {
    background: var(--ae-hover);
    border-color: transparent;
}

body.ae-refresh .studio-mobile-menu-btn {
    border-radius: var(--ae-radius);
    border-color: var(--ae-line);
    background: var(--ae-surface);
}

/* --- En-tête Docs : logo plus grand, flèches de sélection collées au logo --- */
body.ae-refresh .sidebar .sidebar-head .logo-apps-wrap {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
}

body.ae-refresh .sidebar .sidebar-head .logo-apps-trigger {
    width: auto;
    max-width: 100%;
    height: 52px;
    gap: 4px;
    padding: 0 6px 0 8px;
}

body.ae-refresh .sidebar .sidebar-head .logo-apps-trigger-main {
    flex: 0 1 auto;
}

body.ae-refresh .sidebar .sidebar-head .logo-apps-trigger .logo-apps-current {
    height: 40px;
    width: auto;
}

body.ae-refresh .sidebar .sidebar-head .logo-apps-chevron {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: var(--ae-radius-xs);
    background: var(--ae-surface-3);
    color: var(--ae-ink-soft);
}

body.ae-refresh .sidebar .sidebar-head .logo-apps-trigger:hover .logo-apps-chevron,
body.ae-refresh .sidebar .sidebar-head .logo-apps-wrap.is-open .logo-apps-chevron {
    background: var(--ae-surface);
    color: var(--ae-ink);
}

body.ae-refresh .sidebar .sidebar-head .sidebar-toggle--in-head {
    margin-left: auto;
}

/* --- Sidebar repliée (bureau) : uniquement les points du logo, icônes centrées
   dans la barre et bouton « déplier » en languette arrondie qui dépasse à droite --- */
@media (min-width: 1025px) {
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section.sidebar-head {
        position: relative;
        height: 72px;
        min-height: 72px;
        padding: 0;
        justify-content: center;
        overflow: visible;
        z-index: 6;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .sidebar-head-brand,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-apps-wrap {
        display: flex !important;
        flex: none;
        width: 100%;
        max-width: none;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-apps-trigger {
        flex: none;
        align-self: center;
        width: 40px;
        min-width: 0;
        height: 40px;
        margin: 0 auto;
        padding: 0;
        justify-content: center;
        border-radius: var(--ae-radius);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-apps-trigger .logo-apps-current {
        display: none;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-apps-trigger .logo-apps-collapsed {
        display: block;
        width: 28px;
        height: 28px;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head:active {
        position: absolute !important;
        top: 50% !important;
        left: 100% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 26px;
        min-width: 26px;
        height: 38px;
        margin: 0;
        padding: 0 2px 0 0;
        border: none;
        border-radius: 0 13px 13px 0;
        background: transparent;
        box-shadow: none;
        color: var(--ae-ink-muted);
        overflow: visible;
        z-index: 7;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head:hover {
        background: transparent;
        color: var(--ae-ink);
    }

    /* Languette dessinée d'un seul tracé (raccords concaves + bout arrondi) :
       ::before = fond qui masque le bord droit de la barre, ::after = contour. */
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head::before,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head::after {
        content: "";
        position: absolute;
        top: -10px;
        left: 0;
        width: 26px;
        height: 58px;
        pointer-events: none;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        z-index: -1;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head::before {
        background: var(--ae-sidebar-bg);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 58'%3E%3Cpath d='M0 0H0.5V0.5A10 10 0 0 0 10.5 10.5H13A12.5 12.5 0 0 1 25.5 23V35A12.5 12.5 0 0 1 13 47.5H10.5A10 10 0 0 0 0.5 57.5V58H0Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 58'%3E%3Cpath d='M0 0H0.5V0.5A10 10 0 0 0 10.5 10.5H13A12.5 12.5 0 0 1 25.5 23V35A12.5 12.5 0 0 1 13 47.5H10.5A10 10 0 0 0 0.5 57.5V58H0Z'/%3E%3C/svg%3E");
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head::after {
        background: var(--ae-line);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 58'%3E%3Cpath d='M0.5 0V0.5A10 10 0 0 0 10.5 10.5H13A12.5 12.5 0 0 1 25.5 23V35A12.5 12.5 0 0 1 13 47.5H10.5A10 10 0 0 0 0.5 57.5V58' fill='none' stroke='black'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 58'%3E%3Cpath d='M0.5 0V0.5A10 10 0 0 0 10.5 10.5H13A12.5 12.5 0 0 1 25.5 23V35A12.5 12.5 0 0 1 13 47.5H10.5A10 10 0 0 0 0.5 57.5V58' fill='none' stroke='black'/%3E%3C/svg%3E");
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .logo-section .sidebar-toggle--in-head .sidebar-toggle-icon {
        position: relative;
        width: 14px;
        height: 14px;
    }

    /* Icônes : plus de décalage de 10px (padding de la liste), pastille centrée */
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-list {
        padding: 0;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item + .nav-item {
        margin-top: 2px;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-link,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-link-toggle,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-link-toggle .nav-link-content {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 40px;
        min-height: 40px;
        padding: 0;
        justify-content: center;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-link > i:first-child,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-link-content > i:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0;
        border-radius: var(--ae-radius);
        font-size: 0.875rem;
        color: var(--ae-ink-muted);
        transition: background-color var(--ae-ease), color var(--ae-ease);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-link:hover > i:first-child,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-link-toggle:hover .nav-link-content > i:first-child {
        background: var(--ae-hover);
        color: var(--ae-ink);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.active > .nav-link > i:first-child,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.active > .nav-link-toggle .nav-link-content > i:first-child {
        background: var(--ae-accent);
        color: #ffffff;
    }

    html.dark body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.active > .nav-link > i:first-child,
    html.dark body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.active > .nav-link-toggle .nav-link-content > i:first-child {
        color: #0c1120;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.active > .nav-link::before,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.active > .nav-link::after {
        content: none !important;
    }

    /* Barre repliée un peu plus large (64px au lieu de 50px) */
    html body.ae-refresh.sidebar-collapsed.docs-body {
        --alphaedge-sidebar-w: 64px;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar {
        width: 64px !important;
        min-width: 64px !important;
        max-width: 64px !important;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .content-area {
        margin-left: 64px !important;
        max-width: calc(100vw - 64px) !important;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .docs-topbar {
        left: 64px !important;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .sidebar-status-link {
        width: 40px;
        min-width: 0;
        margin: 0 auto;
        border-radius: var(--ae-radius);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .sidebar-status-wrap.nav-sidebar-flyout-active > .sidebar-status-link {
        background: var(--ae-hover);
    }

    /* Survol : seul le libellé de l'onglet apparaît, en bulle à droite de l'icône */
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.nav-sidebar-flyout-active > .nav-link,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.nav-sidebar-flyout-active > .nav-link-toggle {
        background: transparent;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.nav-sidebar-flyout-active:not(.active) > .nav-link > i:first-child,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-item.nav-sidebar-flyout-active:not(.active) > .nav-link-toggle .nav-link-content > i:first-child {
        background: var(--ae-hover);
        color: var(--ae-ink);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-sublist.nav-sublist-flyout-open {
        left: 72px;
        min-width: 0;
        max-width: 280px;
        padding: 4px;
        background: var(--ae-surface);
        border: 1px solid var(--ae-line);
        border-radius: var(--ae-radius);
        box-shadow: var(--ae-shadow-lg);
        z-index: 40;
        animation: ae-flyout-in 120ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Bulle simple : centrée sur l'icône */
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-label-flyout.nav-sublist-flyout-open {
        top: calc(var(--flyout-top, 0px) + var(--flyout-row-height, 40px) / 2 - 18px);
    }

    /* Menu avec sous-onglets : le titre s'aligne sur l'icône */
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-sublist.nav-sublist-flyout-open.nav-flyout-with-tabs {
        top: calc(var(--flyout-top, 0px) + var(--flyout-row-height, 40px) / 2 - 21px);
        min-width: 190px;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-sublist.nav-sublist-flyout-open::before {
        content: none;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-sublist.nav-sublist-flyout-open .nav-sublink {
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        padding: 0 12px;
        border-radius: var(--ae-radius-sm);
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--ae-ink);
        background: transparent;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-label-flyout.nav-sublist-flyout-open .nav-sublink,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-label-flyout.nav-sublist-flyout-open .nav-subitem.active > .nav-sublink,
    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-label-flyout.nav-sublist-flyout-open .nav-sublink:hover {
        height: 26px;
        min-height: 26px;
        max-height: 26px;
        padding: 0 8px;
        background: transparent;
        color: var(--ae-ink);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-flyout-with-tabs.nav-sublist-flyout-open .nav-sublink:hover {
        background: var(--ae-hover);
        color: var(--ae-ink);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-flyout-with-tabs.nav-sublist-flyout-open .nav-subitem.active > .nav-sublink {
        background: var(--ae-accent-soft);
        color: var(--ae-accent);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-flyout-with-tabs.nav-sublist-flyout-open .nav-flyout-tab-header {
        margin-bottom: 4px;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--ae-line);
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-flyout-with-tabs.nav-sublist-flyout-open .nav-flyout-tab-header > .nav-sublink {
        font-weight: 600;
    }

    html body.ae-refresh.sidebar-collapsed.docs-body .sidebar .nav-flyout-with-tabs.nav-sublist-flyout-open .nav-flyout-tab-child > .nav-sublink {
        font-weight: 400;
        color: var(--ae-ink-muted);
    }
}

@keyframes ae-flyout-in {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   3. Pages de contenu
   ========================================================================== */
/* Zone centrale : occupe la largeur disponible (marges fluides) au lieu d'une
   colonne étroite centrée avec de grands vides de part et d'autre. */
body.ae-refresh .docs-content-page {
    background: transparent;
    width: 100%;
    max-width: 1560px;
    min-height: 100vh;
    padding: 40px clamp(28px, 3.2vw, 56px) 32px;
}

body.ae-refresh .api-endpoint-page,
body.ae-refresh .model-detail-page {
    padding-top: 44px;
}

/* Fil d'Ariane (comme AlphaDataRoom) : segments en pastilles arrondies,
   chevrons fins, page courante mise en avant. Décalé de -10px pour que le
   texte du premier segment s'aligne sur le titre. */
body.ae-refresh .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 18px -10px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ae-ink-muted);
}

body.ae-refresh .breadcrumbs > a,
body.ae-refresh .breadcrumbs > .breadcrumb-path,
body.ae-refresh .breadcrumbs > .breadcrumb-current {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--ae-radius-pill);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ae-ink-muted);
    text-decoration: none;
    opacity: 1;
    transition: background-color var(--ae-ease), color var(--ae-ease), border-color var(--ae-ease);
}

body.ae-refresh .breadcrumbs > a:hover {
    background: var(--ae-surface-3);
    color: var(--ae-ink);
    opacity: 1;
}

body.ae-refresh .breadcrumbs > a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh .breadcrumbs > .breadcrumb-current {
    border-color: var(--ae-accent-ring);
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
}

body.ae-refresh .breadcrumb-separator {
    flex: none;
    width: 14px;
    height: 14px;
    font-size: 0;
    color: transparent;
    background-color: var(--ae-ink-faint);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

body.ae-refresh .content-header {
    margin-bottom: 40px;
}

body.ae-refresh .content-title {
    letter-spacing: -0.02em;
}

/* Titres de section : plus de trait bleu clair, compteur en pastille */
body.ae-refresh .content-section-title {
    margin-bottom: 18px;
    gap: 10px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--ae-ink-muted);
}

body.ae-refresh .content-section-title::after {
    content: none;
}

body.ae-refresh .content-section-title .models-count,
body.ae-refresh .models-type-heading .models-count {
    display: inline-flex;
    align-items: center;
    height: 20px;
    margin: 0;
    padding: 0 8px;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-surface-3);
    color: var(--ae-ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 1;
}

body.ae-refresh .content-section {
    margin-bottom: 48px;
}

/* Séparateurs génériques : gris neutre au lieu du bleu clair */
body.ae-refresh .nav-separator,
body.ae-refresh hr {
    background: var(--ae-line);
    border-color: var(--ae-line);
}

/* ==========================================================================
   4. Boutons
   ========================================================================== */
body.ae-refresh .primary-btn,
body.ae-refresh .ghost-btn,
body.ae-refresh .reset-filters-btn {
    min-height: 40px;
    padding: 0 18px;
    gap: 8px;
    border-radius: var(--ae-radius);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    transition: background-color var(--ae-ease), border-color var(--ae-ease), color var(--ae-ease), box-shadow var(--ae-ease), filter var(--ae-ease), transform var(--ae-ease);
}

/* Bouton d'action principal : dégradé marine (AlphaDataRoom) */
body.ae-refresh .primary-btn:not(.ghost-btn),
html.dark body.ae-refresh .primary-btn:not(.ghost-btn) {
    border: none;
    background: var(--ae-cta-gradient);
    color: #ffffff;
    box-shadow: var(--ae-cta-shadow);
}

body.ae-refresh .primary-btn:not(.ghost-btn):hover,
html.dark body.ae-refresh .primary-btn:not(.ghost-btn):hover {
    background: var(--ae-cta-gradient);
    color: #ffffff;
    filter: brightness(1.1);
    box-shadow: var(--ae-cta-shadow-hover);
}

body.ae-refresh .primary-btn:not(.ghost-btn):active {
    transform: translateY(1px);
}

/* Bouton secondaire : surface + bordure fine */
body.ae-refresh .ghost-btn,
body.ae-refresh .reset-filters-btn,
html.dark body.ae-refresh .ghost-btn {
    border: 1px solid var(--ae-line-strong);
    background: var(--ae-surface);
    color: var(--ae-ink);
    box-shadow: var(--ae-shadow-xs);
}

body.ae-refresh .ghost-btn:hover,
body.ae-refresh .reset-filters-btn:hover,
html.dark body.ae-refresh .ghost-btn:hover {
    border-color: var(--ae-ink-faint);
    background: var(--ae-surface-2);
    color: var(--ae-ink);
}

body.ae-refresh .primary-btn:focus-visible,
body.ae-refresh .ghost-btn:focus-visible,
body.ae-refresh .reset-filters-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

/* ==========================================================================
   5. Champs, sélecteurs et menus déroulants
   ========================================================================== */
body.ae-refresh input[type="text"],
body.ae-refresh input[type="search"],
body.ae-refresh input[type="email"],
body.ae-refresh input[type="password"],
body.ae-refresh input[type="number"],
body.ae-refresh select,
body.ae-refresh textarea,
body.ae-refresh .form-input,
body.ae-refresh .filter-input,
body.ae-refresh .custom-select-trigger {
    border-radius: var(--ae-radius) !important;
    border-color: var(--ae-line-strong) !important;
    background: var(--ae-surface) !important;
    color: var(--ae-ink) !important;
    transition: border-color var(--ae-ease), box-shadow var(--ae-ease), background-color var(--ae-ease);
}

body.ae-refresh input::placeholder,
body.ae-refresh textarea::placeholder {
    color: var(--ae-ink-faint);
}

body.ae-refresh .custom-select-trigger .custom-select-text {
    color: var(--ae-ink-muted);
}

body.ae-refresh .filter-input:hover,
body.ae-refresh .custom-select-trigger:hover {
    border-color: var(--ae-ink-faint) !important;
}

body.ae-refresh input:focus,
body.ae-refresh select:focus,
body.ae-refresh textarea:focus,
body.ae-refresh .filter-input:focus,
body.ae-refresh .custom-select-trigger.active {
    outline: none;
    border-color: #4a6fe0 !important;
    box-shadow: 0 0 0 3px var(--ae-focus) !important;
}

body.ae-refresh .custom-select-dropdown {
    top: calc(100% + 6px) !important;
    padding: 4px;
    border: 1px solid var(--ae-line) !important;
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface) !important;
    box-shadow: var(--ae-shadow-lg) !important;
}

body.ae-refresh .custom-select-option {
    border-bottom: none;
    border-radius: var(--ae-radius-sm);
    padding: 8px 10px;
}

body.ae-refresh .custom-select-option:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh .lang-dropdown-list {
    border-radius: var(--ae-radius);
    overflow: hidden;
}

/* ==========================================================================
   6. Nos modèles : cartes
   ========================================================================== */
body.ae-refresh .featured-models-grid,
body.ae-refresh .frontier-models-grid {
    gap: 14px;
}

body.ae-refresh .model-card {
    border-radius: var(--ae-radius-lg);
    box-shadow: none;
}

body.ae-refresh .model-card-link {
    border-radius: var(--ae-radius-lg);
}

body.ae-refresh .model-card-link:focus-visible {
    outline: none;
}

body.ae-refresh .model-card-link:focus-visible .model-card {
    box-shadow: 0 0 0 3px var(--ae-focus);
}

/* Teinte de chaque carte (vert, bleu, orange, rose) */
body.ae-refresh .model-card.card-green,
body.ae-refresh .card-green {
    --c-fill: var(--ae-green-fill);
    --c-edge: var(--ae-green-edge);
    --c-glow: var(--ae-green-glow);
    --c-deep: var(--ae-green-deep);
    --c-shadow: var(--ae-green-shadow);
}

body.ae-refresh .model-card.card-blue,
body.ae-refresh .card-blue {
    --c-fill: var(--ae-blue-fill);
    --c-edge: var(--ae-blue-edge);
    --c-glow: var(--ae-blue-glow);
    --c-deep: var(--ae-blue-deep);
    --c-shadow: var(--ae-blue-shadow);
}

body.ae-refresh .model-card.card-orange,
body.ae-refresh .card-orange {
    --c-fill: var(--ae-orange-fill);
    --c-edge: var(--ae-orange-edge);
    --c-glow: var(--ae-orange-glow);
    --c-deep: var(--ae-orange-deep);
    --c-shadow: var(--ae-orange-shadow);
}

body.ae-refresh .model-card.card-pink,
body.ae-refresh .card-pink {
    --c-fill: var(--ae-pink-fill);
    --c-edge: var(--ae-pink-edge);
    --c-glow: var(--ae-pink-glow);
    --c-deep: var(--ae-pink-deep);
    --c-shadow: var(--ae-pink-shadow);
}

/* Cartes en vedette : fond de la charte + contour de la même teinte + halo
   dans l'angle + pastille d'icône pleine (couleur profonde). La carte se
   détache du fond sans changer ni le fond ni la couleur. */
body.ae-refresh .model-card.card-featured,
html.dark body.ae-refresh .model-card.card-featured {
    padding: 20px;
    border: 1px solid var(--c-edge, var(--ae-line)) !important;
    border-radius: var(--ae-radius-xl);
    background:
        radial-gradient(120% 95% at 100% 0%, var(--c-glow, transparent) 0%, transparent 62%),
        var(--c-fill, var(--ae-surface)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px var(--c-shadow, rgba(16, 24, 40, 0.06)),
        0 14px 30px -22px var(--c-shadow, rgba(16, 24, 40, 0.2));
    transition: transform var(--ae-ease), box-shadow var(--ae-ease), border-color var(--ae-ease);
}

html.dark body.ae-refresh .model-card.card-featured {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 30px -20px rgba(0, 0, 0, 0.7);
}

body.ae-refresh .model-card.card-featured:hover,
html.dark body.ae-refresh .model-card.card-featured:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--c-edge, var(--ae-line)) 70%, var(--c-deep, var(--ae-ink)) 30%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 4px var(--c-shadow, rgba(16, 24, 40, 0.08)),
        0 20px 36px -20px var(--c-shadow, rgba(16, 24, 40, 0.28));
}

html.dark body.ae-refresh .model-card.card-featured:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 36px -18px rgba(0, 0, 0, 0.8);
}

body.ae-refresh .model-card.card-featured .model-icon-wrapper,
body.ae-refresh .model-card.card-featured .model-card-featured-icon-row .model-icon-wrapper,
html.dark body.ae-refresh .model-card.card-featured .model-icon-wrapper,
html.dark body.ae-refresh .model-card.card-featured .model-card-featured-icon-row .model-icon-wrapper {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: var(--c-deep, var(--ae-accent)) !important;
    box-shadow: 0 6px 14px -8px var(--c-shadow, rgba(16, 24, 40, 0.4));
}

body.ae-refresh .model-card.card-featured .model-icon-wrapper i,
html.dark body.ae-refresh .model-card.card-featured .model-icon-wrapper i {
    color: var(--c-fill, #ffffff) !important;
}

body.ae-refresh .model-card.card-featured .model-title,
html.dark body.ae-refresh .model-card.card-featured .model-title {
    color: var(--c-deep, var(--ae-ink));
}

body.ae-refresh .model-card.card-featured .model-description {
    color: color-mix(in srgb, var(--c-deep, var(--ae-ink)) 72%, transparent);
}

body.ae-refresh .model-card.card-featured .model-version {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--ae-radius-pill);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px var(--c-edge, var(--ae-line));
    color: var(--c-deep, var(--ae-ink));
    font-size: 0.75rem;
    font-weight: 600;
}

html.dark body.ae-refresh .model-card.card-featured .model-version {
    background: rgba(255, 255, 255, 0.06);
}

body.ae-refresh .model-card.card-featured .model-deployment-badges i {
    color: color-mix(in srgb, var(--c-deep, var(--ae-ink)) 55%, transparent);
}

/* Cartes standard (fond = fond de page) : bordure fine neutre, pastille d'icône
   dans la teinte de la charte avec son contour ; au survol le contour prend la teinte */
body.ae-refresh .model-card.card-frontier,
body.ae-refresh .model-card.card-frontier.card-blue,
body.ae-refresh .model-card.card-frontier.card-green,
body.ae-refresh .model-card.card-frontier.card-orange,
body.ae-refresh .model-card.card-frontier.card-pink,
html.dark body.ae-refresh .model-card.card-frontier.card-orange {
    padding: 16px;
    gap: 14px;
    background: var(--ae-surface);
    border: 1px solid var(--ae-line);
    box-shadow: var(--ae-shadow-xs);
    transition: transform var(--ae-ease), box-shadow var(--ae-ease), border-color var(--ae-ease);
}

body.ae-refresh .model-card.card-frontier:hover,
body.ae-refresh .model-card.card-frontier.card-blue:hover,
body.ae-refresh .model-card.card-frontier.card-green:hover,
body.ae-refresh .model-card.card-frontier.card-orange:hover,
body.ae-refresh .model-card.card-frontier.card-pink:hover {
    transform: translateY(-2px);
    border-color: var(--c-edge, var(--ae-line-strong));
    box-shadow: var(--ae-shadow-md);
}

body.ae-refresh .model-card.card-frontier .model-icon-wrapper,
html.dark body.ae-refresh .model-card.card-frontier .model-icon-wrapper {
    width: 40px;
    height: 40px;
    border: none !important;
    border-radius: 11px;
    background:
        radial-gradient(120% 120% at 100% 0%, var(--c-glow, transparent) 0%, transparent 70%),
        var(--c-fill, var(--ae-surface-3)) !important;
    box-shadow: inset 0 0 0 1px var(--c-edge, var(--ae-line));
}

body.ae-refresh .model-card.card-frontier .model-icon-wrapper i,
html.dark body.ae-refresh .model-card.card-frontier .model-icon-wrapper i,
html.dark body.ae-refresh .model-card.card-frontier.card-blue .model-icon-wrapper i,
html.dark body.ae-refresh .model-card.card-frontier.card-green .model-icon-wrapper i {
    font-size: 1rem;
    color: var(--c-deep, var(--ae-ink)) !important;
}

html.dark body.ae-refresh .model-card.card-frontier .model-title {
    color: var(--ae-ink);
}

html.dark body.ae-refresh .model-card.card-frontier .model-description {
    color: var(--ae-ink-muted);
}

body.ae-refresh .model-card.card-frontier .model-version {
    color: var(--ae-ink-faint);
    font-weight: 600;
}

body.ae-refresh .model-card .model-description {
    color: var(--ae-ink-muted);
}

/* Badge « Disponible sur demande » : pastille douce sans bordure */
body.ae-refresh .model-on-demand-badge {
    gap: 5px;
    padding: 2px 8px;
    border: none !important;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-surface-3);
    color: var(--ae-ink-soft);
    font-weight: 600;
}

body.ae-refresh .model-sub-specialization {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-surface-3);
    color: var(--ae-ink-soft);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

body.ae-refresh .model-deployment-badges {
    bottom: 8px;
    right: 10px;
}

body.ae-refresh .model-deployment-badges i {
    color: var(--ae-ink-faint);
    opacity: 1;
}

/* ==========================================================================
   7. Filtres : barre d'outils compacte (plus de grande boîte « FILTRES »)
   ========================================================================== */
body.ae-refresh .filters-section {
    margin: 4px 0 28px;
}

body.ae-refresh .filters-container {
    background: transparent;
    border: none;
    box-shadow: none;
}

body.ae-refresh .filters-header {
    display: none;
}

body.ae-refresh .filters-content-wrapper,
body.ae-refresh .filters-content-wrapper.open {
    display: block !important;
    max-height: none !important;
    padding: 0 !important;
    border-top: none;
    overflow: visible !important;
}

body.ae-refresh .filters-content {
    gap: 10px;
    padding: 0;
    align-items: center;
}

body.ae-refresh .filters-content > .filter-group {
    flex: 0 1 200px;
    min-width: 160px;
}

body.ae-refresh .filters-content > .filter-group.filter-search {
    flex: 1 1 260px;
}

body.ae-refresh .filters-content > .filter-group.filter-actions {
    flex: 0 0 auto;
    min-width: 0;
}

body.ae-refresh .filters-content .filter-group > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.ae-refresh .filters-content .custom-select-trigger,
body.ae-refresh .filters-content .filter-input {
    height: 40px;
}

body.ae-refresh .filters-content .filter-actions .ghost-btn {
    height: 40px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ae-ink-muted);
}

body.ae-refresh .filters-content .filter-actions .ghost-btn:hover {
    background: var(--ae-surface-3);
    color: var(--ae-ink);
}

/* ==========================================================================
   8. Modèles spécialisés : sous-groupes à plat (pas de boîte dans une boîte)
   ========================================================================== */
body.ae-refresh .models-type-block,
body.ae-refresh .models-type-block:hover {
    margin-bottom: 28px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

body.ae-refresh .models-type-heading {
    margin: 0 0 12px;
    padding: 0;
    gap: 8px;
    align-items: center;
    border: none;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ae-ink);
}

body.ae-refresh .models-type-heading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ae-blue-edge);
}

body.ae-refresh .models-type-block[data-model-type="ocr"] .models-type-heading::before {
    background: var(--ae-blue-edge);
}

body.ae-refresh .models-type-block[data-model-type="audio"] .models-type-heading::before {
    background: var(--ae-green-edge);
}

body.ae-refresh .models-type-body {
    padding: 0;
}

/* ==========================================================================
   9. Blocs de code
   ========================================================================== */
body.ae-refresh .code-block {
    border: none;
    border-radius: var(--ae-radius-lg);
    background: var(--ae-code-bg);
    box-shadow: none;
    overflow: hidden;
}

body.ae-refresh .code-header {
    padding: 8px 8px 8px 16px;
    background: var(--ae-code-head);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.ae-refresh .code-lang {
    color: #9aa3b5;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

body.ae-refresh .btn-copy-code {
    padding: 6px 10px;
    border: none;
    border-radius: var(--ae-radius-sm);
    background: transparent;
    color: #9aa3b5;
}

body.ae-refresh .btn-copy-code:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body.ae-refresh .code-block pre {
    background: var(--ae-code-bg);
}

body.ae-refresh .code-block code {
    font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--ae-code-ink);
}

/* Onglets de langage : segmenté arrondi */
body.ae-refresh .code-tabs {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 12px;
    padding: 3px;
    border: none;
    border-radius: var(--ae-radius);
    background: var(--ae-surface-3);
}

body.ae-refresh .code-tab {
    padding: 7px 14px;
    border: none;
    border-radius: var(--ae-radius-sm);
    color: var(--ae-ink-muted);
    font-size: 0.8125rem;
    opacity: 1;
}

body.ae-refresh .code-tab:hover {
    color: var(--ae-ink);
}

body.ae-refresh .code-tab.active {
    border: none;
    background: var(--ae-surface);
    color: var(--ae-ink);
    box-shadow: var(--ae-shadow-sm);
}

/* Code inline */
body.ae-refresh .docs-content-page :not(pre) > code {
    padding: 1px 6px;
    border-radius: var(--ae-radius-xs);
    background: var(--ae-surface-3);
    border: none;
}

/* Liste d'étapes : pastilles arrondies */
body.ae-refresh .step-list li::before {
    border-radius: 7px;
}

/* ==========================================================================
   10. Navigation bas de page
   ========================================================================== */
/* Page précédente / suivante : flèche ronde avec libellé et titre, sans encadré
   (au lieu de liens orange). Les réseaux sociaux et les liens légaux du pied
   de page ne changent pas. */
body.ae-refresh .page-navigation .nav-link-prev:not(.nav-link-disabled),
body.ae-refresh .page-navigation .nav-link-next:not(.nav-link-disabled) {
    display: grid;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    width: auto;
    max-width: 100%;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: var(--ae-ink);
    text-decoration: none;
    opacity: 1;
    transition: color var(--ae-ease);
}

body.ae-refresh .page-navigation .nav-link-prev:not(.nav-link-disabled) {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: "arrow label" "arrow text";
    text-align: left;
}

body.ae-refresh .page-navigation .nav-link-next:not(.nav-link-disabled) {
    grid-template-columns: minmax(0, 1fr) 32px;
    grid-template-areas: "label arrow" "text arrow";
    justify-self: end;
    text-align: right;
}

body.ae-refresh .page-navigation .nav-link-prev:not(.nav-link-disabled)::before,
body.ae-refresh .page-navigation .nav-link-next:not(.nav-link-disabled)::before {
    content: attr(data-nav-label);
    grid-area: label;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ae-ink-faint);
}

body.ae-refresh .page-navigation .nav-link-prev .nav-text,
body.ae-refresh .page-navigation .nav-link-next .nav-text {
    grid-area: text;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ae-ink);
}

body.ae-refresh .page-navigation .nav-link-prev .nav-arrow,
body.ae-refresh .page-navigation .nav-link-next .nav-arrow {
    grid-area: arrow;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ae-surface-3);
    font-size: 0;
    color: transparent;
    transition: background-color var(--ae-ease);
}

body.ae-refresh .page-navigation .nav-link-prev .nav-arrow::before,
body.ae-refresh .page-navigation .nav-link-next .nav-arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--ae-ink-soft);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    transition: background-color var(--ae-ease), transform var(--ae-ease);
}

body.ae-refresh .page-navigation .nav-link-prev .nav-arrow::before {
    transform: scaleX(-1);
}

body.ae-refresh .page-navigation .nav-link-prev:not(.nav-link-disabled):hover,
body.ae-refresh .page-navigation .nav-link-next:not(.nav-link-disabled):hover {
    opacity: 1;
}

body.ae-refresh .page-navigation .nav-link-prev:hover .nav-arrow,
body.ae-refresh .page-navigation .nav-link-next:hover .nav-arrow {
    background: var(--ae-accent);
}

body.ae-refresh .page-navigation .nav-link-prev:hover .nav-arrow::before,
body.ae-refresh .page-navigation .nav-link-next:hover .nav-arrow::before {
    background-color: #ffffff;
}

html.dark body.ae-refresh .page-navigation .nav-link-prev:hover .nav-arrow::before,
html.dark body.ae-refresh .page-navigation .nav-link-next:hover .nav-arrow::before {
    background-color: #0c1120;
}

body.ae-refresh .page-navigation .nav-link-prev:hover .nav-arrow::before {
    transform: scaleX(-1) translateX(2px);
}

body.ae-refresh .page-navigation .nav-link-next:hover .nav-arrow::before {
    transform: translateX(2px);
}

body.ae-refresh .page-navigation .nav-link-prev:focus-visible,
body.ae-refresh .page-navigation .nav-link-next:focus-visible {
    outline: none;
}

body.ae-refresh .page-navigation .nav-link-prev:focus-visible .nav-arrow,
body.ae-refresh .page-navigation .nav-link-next:focus-visible .nav-arrow {
    box-shadow: 0 0 0 3px var(--ae-focus);
}

/* ==========================================================================
   11. Infobulles
   ========================================================================== */
body.ae-refresh .tooltiptext {
    border-radius: var(--ae-radius-sm);
}

/* Pied de sidebar invité : boutons côte à côte, langue compacte */
body.ae-refresh .studio-sidebar-guest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

body.ae-refresh .studio-sidebar-guest-btn {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.8125rem;
}

body.ae-refresh .studio-sidebar-guest + .studio-sidebar-lang {
    margin-top: 6px;
    padding: 0;
}

body.ae-refresh .studio-sidebar-lang .lang-dropdown-trigger {
    min-height: 32px;
    background: transparent;
}

body.ae-refresh .studio-sidebar-lang .lang-dropdown-trigger:hover {
    background: var(--ae-hover);
    border-color: transparent;
}

/* ==========================================================================
   12. Accueil (portail)
   ========================================================================== */
body.ae-refresh .docs-content-page.docs-index-page {
    max-width: none;
    min-height: 0;
    padding: 0;
    background: var(--ae-main-bg);
}

body.ae-refresh .gs-backdrop::before {
    background-image: conic-gradient(
        var(--ae-line) 0 25%,
        transparent 0 50%,
        var(--ae-line) 0 75%,
        transparent 0
    );
    opacity: 0.4;
}

html.dark body.ae-refresh .gs-backdrop::before {
    opacity: 0.45;
}

html.dark body.ae-refresh .gs-backdrop::after {
    background:
        radial-gradient(closest-side at 35% 55%, rgba(106, 144, 224, 0.20), transparent),
        radial-gradient(closest-side at 68% 45%, rgba(255, 140, 90, 0.08), transparent);
}

body.ae-refresh .gs-title {
    color: var(--ae-ink);
    background: linear-gradient(180deg, var(--ae-ink) 35%, color-mix(in srgb, var(--ae-ink) 62%, var(--ae-main-bg)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.ae-refresh .gs-manifesto {
    color: var(--ae-ink-muted);
}

body.ae-refresh .gs-value,
html.dark body.ae-refresh .gs-value {
    border: 1px solid var(--ae-line);
    background: color-mix(in srgb, var(--ae-surface) 80%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ae-ink);
    box-shadow: var(--ae-shadow-xs);
}

body.ae-refresh .gs-value-mark {
    background: var(--ae-green-fill);
    color: var(--ae-green-deep);
}

body.ae-refresh .gs-value:nth-child(2) .gs-value-mark {
    background: var(--ae-blue-fill);
    color: var(--ae-blue-deep);
}

body.ae-refresh .gs-value:nth-child(3) .gs-value-mark {
    background: var(--ae-orange-fill);
    color: var(--ae-orange-deep);
}

html.dark body.ae-refresh .gs-value-mark {
    background: #1d2c17;
    color: #cfeeb6;
}

html.dark body.ae-refresh .gs-value:nth-child(2) .gs-value-mark {
    background: #23345a;
    color: #d7e3fb;
}

html.dark body.ae-refresh .gs-value:nth-child(3) .gs-value-mark {
    background: #35201a;
    color: #ffb99d;
}

body.ae-refresh .gs-organic-card,
html.dark body.ae-refresh .gs-organic-card {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: color-mix(in srgb, var(--ae-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--ae-shadow-sm);
}

body.ae-refresh .gs-organic-card:hover,
html.dark body.ae-refresh .gs-organic-card:hover {
    border-color: var(--ae-line-strong);
    box-shadow: var(--ae-shadow-md);
    transform: translateY(-3px);
}

body.ae-refresh .gs-organic-label {
    color: var(--ae-ink);
}

body.ae-refresh .gs-organic-desc,
body.ae-refresh .gs-organic-arrow {
    color: var(--ae-ink-muted);
}

body.ae-refresh .gs-organic-card:hover .gs-organic-arrow {
    color: var(--ae-ink);
}

body.ae-refresh .gs-organic-icon {
    background: #dbe8ff;
    color: #01123c;
}

body.ae-refresh .gs-organic-card--models .gs-organic-icon {
    background: #e7ffde;
    color: #003333;
}

body.ae-refresh .gs-organic-card--integr .gs-organic-icon {
    background: #ffe9de;
    color: #b83400;
}

body.ae-refresh .gs-organic-card--playground .gs-organic-icon {
    background: #ede4ff;
    color: #4b0082;
}

html.dark body.ae-refresh .gs-organic-icon {
    background: #23345a;
    color: #d7e3fb;
}

html.dark body.ae-refresh .gs-organic-card--models .gs-organic-icon {
    background: #1d2c17;
    color: #cfeeb6;
}

html.dark body.ae-refresh .gs-organic-card--integr .gs-organic-icon {
    background: #35201a;
    color: #ffb99d;
}

html.dark body.ae-refresh .gs-organic-card--playground .gs-organic-icon {
    background: #2a2140;
    color: #d9c8ff;
}

/* ==========================================================================
   13. Cartes d'information (quickstart, endpoints…)
   ========================================================================== */
body.ae-refresh .quickstart-info-card,
html.dark body.ae-refresh .quickstart-info-card:not(.quickstart-info-card--info) {
    padding: 18px 20px;
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    box-shadow: none;
    transform: none;
}

body.ae-refresh .quickstart-info-card:hover,
html.dark body.ae-refresh .quickstart-info-card:not(.quickstart-info-card--info):hover {
    border-color: var(--ae-line);
    box-shadow: none;
    transform: none;
}

body.ae-refresh .quickstart-info-card-header i,
html.dark body.ae-refresh .quickstart-info-card:not(.quickstart-info-card--info) .quickstart-info-card-header i {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--ae-radius-sm);
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    font-size: 0.8125rem;
}

/* Variante notice : fond de la charte + contour de la même teinte (même
   principe que les cartes en vedette) */
body.ae-refresh .quickstart-info-card--info,
body.ae-refresh .quickstart-info-card--info:hover,
html.dark body.ae-refresh .quickstart-info-card--info,
html.dark body.ae-refresh .quickstart-info-card--info:hover {
    border: 1px solid var(--ae-orange-edge);
    background:
        radial-gradient(90% 140% at 100% 0%, var(--ae-orange-glow) 0%, transparent 60%),
        var(--ae-orange-fill);
    box-shadow: none;
}

body.ae-refresh .quickstart-info-card--info .quickstart-info-card-header i,
html.dark body.ae-refresh .quickstart-info-card--info .quickstart-info-card-header i {
    border: none;
    background: var(--ae-orange-deep);
    color: var(--ae-orange-fill);
}

body.ae-refresh .quickstart-info-card--info .quickstart-info-card-header h3,
body.ae-refresh .quickstart-info-card--info h3 {
    color: var(--ae-orange-deep);
}

/* ==========================================================================
   14. Pages endpoint
   ========================================================================== */
body.ae-refresh .api-endpoint-box {
    min-height: 52px;
    padding: 6px 6px 6px 8px;
    gap: 12px;
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
}

body.ae-refresh .api-endpoint-box .api-endpoint-method {
    min-width: 56px;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--ae-radius-sm);
    font-size: 0.6875rem;
}

body.ae-refresh .api-endpoint-box .api-endpoint-method.http-post {
    background: #ffe9de;
    color: #b83400;
}

body.ae-refresh .api-endpoint-box .api-endpoint-method.http-get {
    background: #dbe8ff;
    color: #01123c;
}

html.dark body.ae-refresh .api-endpoint-box .api-endpoint-method.http-post {
    background: #35201a;
    color: #ffb99d;
}

html.dark body.ae-refresh .api-endpoint-box .api-endpoint-method.http-get {
    background: #23345a;
    color: #d7e3fb;
}

body.ae-refresh .api-endpoint-path,
body.ae-refresh .docs-content-page .api-endpoint-box .api-endpoint-path {
    padding: 0;
    background: transparent;
    font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.9375rem;
    color: var(--ae-ink);
}

body.ae-refresh .api-endpoint-copy {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--ae-radius);
    color: var(--ae-ink-muted);
}

body.ae-refresh .api-endpoint-copy:hover {
    background: var(--ae-surface-3);
    color: var(--ae-ink);
}

body.ae-refresh .api-endpoint-copy i {
    font-size: 0.875rem;
}

body.ae-refresh .api-parameter {
    border-bottom-color: var(--ae-line-soft);
}

body.ae-refresh .api-parameter-header {
    gap: 8px;
}

body.ae-refresh .api-parameter-name,
body.ae-refresh .docs-content-page .api-parameter-name {
    padding: 3px 9px;
    border: none;
    border-radius: var(--ae-radius-xs);
    background: var(--ae-surface-3);
    font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ae-ink);
}

body.ae-refresh .api-type,
body.ae-refresh .api-required-badge {
    padding: 3px 9px;
    border: none;
    border-radius: var(--ae-radius-pill);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
}

body.ae-refresh .api-default-value,
body.ae-refresh .docs-content-page .api-default-value {
    padding: 2px 8px;
    border: none;
    border-radius: var(--ae-radius-xs);
    background: var(--ae-surface-3);
}

body.ae-refresh .api-parameter-expand {
    width: 26px;
    height: 26px;
    border-radius: var(--ae-radius-sm);
}

body.ae-refresh .api-parameter-expand:hover {
    background: var(--ae-surface-3);
}

body.ae-refresh .api-nested-fields {
    border-left-color: var(--ae-line-strong) !important;
}

/* Onglets de réponse (200 / erreurs) */
body.ae-refresh .api-response-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: none;
    border-radius: var(--ae-radius);
    background: var(--ae-surface-3);
}

body.ae-refresh .api-response-tab {
    border: none;
    border-radius: var(--ae-radius-sm);
}

body.ae-refresh .api-response-tab.active {
    background: var(--ae-surface);
    box-shadow: var(--ae-shadow-sm);
}

/* ==========================================================================
   15. Tableaux
   ========================================================================== */
body.ae-refresh .legacy-table-wrapper,
body.ae-refresh .table-wrapper,
body.ae-refresh .pricing-table-wrapper,
body.ae-refresh .error-codes-table-wrapper {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    overflow: hidden;
}

body.ae-refresh .config-table {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    box-shadow: none;
    overflow: hidden;
    overflow-x: auto;
}

body.ae-refresh .config-table table {
    border: none;
    background: var(--ae-surface);
}

body.ae-refresh .config-table thead,
html.dark body.ae-refresh .config-table thead {
    background: var(--ae-surface-2);
}

body.ae-refresh .config-table th,
html.dark body.ae-refresh .config-table th {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ae-line);
    color: var(--ae-ink-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
}

body.ae-refresh .config-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ae-line-soft);
}

body.ae-refresh .config-table tbody tr:hover,
html.dark body.ae-refresh .config-table tbody tr:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh .config-table code {
    border-radius: var(--ae-radius-xs);
    background: var(--ae-surface-3);
    color: var(--ae-ink);
    font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

body.ae-refresh .legacy-table {
    border: none;
}

/* ==========================================================================
   16. Glossaire, codes d'erreur, introduction, tarifs
   ========================================================================== */
body.ae-refresh .glossary-term {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    box-shadow: none;
    background: var(--ae-surface);
}

body.ae-refresh .glossary-term:hover {
    border-color: var(--ae-line-strong);
    box-shadow: none;
    transform: none;
}

body.ae-refresh .glossary-term-header {
    border-bottom: none;
    padding-bottom: 0;
}

body.ae-refresh #glossary-search {
    height: 44px;
    padding-left: 16px !important;
    border-radius: var(--ae-radius) !important;
}

body.ae-refresh .glossary-filters-row {
    gap: 6px;
}

body.ae-refresh .glossary-filter-btn {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius-pill);
    background: var(--ae-surface);
    color: var(--ae-ink-soft);
    font-weight: 600;
}

body.ae-refresh .glossary-filter-btn:hover {
    border-color: var(--ae-ink-faint);
    background: var(--ae-surface-2);
    color: var(--ae-ink);
}

body.ae-refresh .glossary-filter-btn.active,
html.dark body.ae-refresh .glossary-filter-btn.active {
    border-color: transparent;
    background: var(--ae-accent);
    color: #ffffff;
}

html.dark body.ae-refresh .glossary-filter-btn.active {
    color: #0c1120;
}

body.ae-refresh .glossary-filters-row .reset-filters-btn {
    min-height: 34px;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ae-ink-muted);
}

body.ae-refresh .glossary-filters-row .reset-filters-btn:hover {
    background: var(--ae-surface-3);
    color: var(--ae-ink);
}

/* Codes d'erreur : carte neutre, code en pastille colorée */
body.ae-refresh .error-card,
body.ae-refresh .error-card:hover {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    box-shadow: none;
    transform: none;
}

body.ae-refresh .error-card-code {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--ae-radius-xs);
    background: #ffe9de;
    color: #b83400;
    font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
}

html.dark body.ae-refresh .error-card-code {
    background: #35201a;
    color: #ffb99d;
}

/* Introduction */
body.ae-refresh .btn-discord,
body.ae-refresh .btn-reach-out,
body.ae-refresh .view-all-btn,
body.ae-refresh .btn-studio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    gap: 8px;
    border: none;
    border-radius: var(--ae-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: filter var(--ae-ease), box-shadow var(--ae-ease), transform var(--ae-ease);
}

body.ae-refresh .btn-reach-out,
body.ae-refresh .view-all-btn,
body.ae-refresh .btn-studio,
body.ae-refresh .btn-reach-out:hover,
body.ae-refresh .view-all-btn:hover,
body.ae-refresh .btn-studio:hover {
    background: var(--ae-cta-gradient);
    color: #ffffff;
    box-shadow: var(--ae-cta-shadow);
}

body.ae-refresh .btn-reach-out:hover,
body.ae-refresh .view-all-btn:hover,
body.ae-refresh .btn-studio:hover,
body.ae-refresh .btn-discord:hover {
    filter: brightness(1.1);
}

body.ae-refresh .btn-studio .btn-studio-icon {
    filter: brightness(0) invert(1);
}

body.ae-refresh .btn-discord {
    background: #5865f2;
    color: #ffffff;
}

body.ae-refresh .building-card,
body.ae-refresh .useful-link-card {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    box-shadow: none;
}

body.ae-refresh .building-card:hover,
body.ae-refresh .useful-link-card:hover {
    border-color: var(--ae-line-strong);
    box-shadow: var(--ae-shadow-md);
}

body.ae-refresh .building-icon-wrapper,
body.ae-refresh .useful-link-icon {
    border-radius: var(--ae-radius);
    background: var(--ae-surface-3);
}

/* Tarifs */
body.ae-refresh .pricing-card,
body.ae-refresh .pricing-card:hover {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    box-shadow: none;
    transform: none;
}

body.ae-refresh .pricing-card-header {
    border-bottom-color: var(--ae-line-soft);
}

/* ==========================================================================
   17. Changelog
   ========================================================================== */
body.ae-refresh .changelog-badge {
    border: none !important;
    border-radius: var(--ae-radius-pill);
    padding: 4px 10px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

body.ae-refresh .changelog-page .changelog-date-marker::before {
    border-radius: 50%;
    border-color: var(--ae-main-bg);
}

body.ae-refresh .changelog-list li::before {
    content: '';
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ae-ink-faint);
}

body.ae-refresh .timeline-line {
    background: var(--ae-line) !important;
}

/* ==========================================================================
   18. Fiche modèle
   ========================================================================== */
body.ae-refresh .model-detail-panel {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-xl);
    background: var(--ae-surface);
    box-shadow: none;
}

body.ae-refresh .model-detail-metrics-section {
    border-top-color: var(--ae-line-soft);
}

/* Pastilles Sortie / Région / Frugalité : même principe que les cartes
   colorées (fond de la charte, contour et halo de la même teinte, pastille
   d'icône pleine). Icône dans sa propre colonne, textes alignés à gauche,
   jauge de frugalité avec sa valeur sur la même ligne. */
body.ae-refresh .model-detail-specs-bar {
    gap: 12px;
    margin-top: 20px;
    overflow: visible;
    scrollbar-gutter: auto;
}

body.ae-refresh .model-spec-stat-chip--release {
    --c-fill: var(--ae-orange-fill);
    --c-edge: var(--ae-orange-edge);
    --c-glow: var(--ae-orange-glow);
    --c-deep: var(--ae-orange-deep);
    --c-shadow: var(--ae-orange-shadow);
}

body.ae-refresh .model-spec-stat-chip--region {
    --c-fill: var(--ae-blue-fill);
    --c-edge: var(--ae-blue-edge);
    --c-glow: var(--ae-blue-glow);
    --c-deep: var(--ae-blue-deep);
    --c-shadow: var(--ae-blue-shadow);
}

body.ae-refresh .model-spec-stat-chip--frugality {
    --c-fill: var(--ae-green-fill);
    --c-edge: var(--ae-green-edge);
    --c-glow: var(--ae-green-glow);
    --c-deep: var(--ae-green-deep);
    --c-shadow: var(--ae-green-shadow);
}

html body.ae-refresh .model-spec-stat-chip,
html.dark body.ae-refresh .model-spec-stat-chip {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    height: auto;
    min-height: 78px;
    max-height: none;
    padding: 14px 18px 14px 14px;
    border: 1px solid var(--c-edge) !important;
    border-radius: var(--ae-radius-lg);
    background:
        radial-gradient(110% 130% at 100% 0%, var(--c-glow) 0%, transparent 62%),
        var(--c-fill);
    box-shadow: 0 1px 2px var(--c-shadow);
}

html.dark body.ae-refresh .model-spec-stat-chip {
    box-shadow: none;
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    align-self: center;
    border-radius: 12px;
    background: var(--c-deep);
    color: var(--c-fill);
    font-size: 1rem;
    opacity: 1;
    box-shadow: 0 6px 14px -8px var(--c-shadow);
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-copy {
    justify-content: center;
    gap: 6px;
    overflow: visible;
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-title-row {
    align-items: baseline;
    gap: 12px;
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-name {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: color-mix(in srgb, var(--c-deep) 72%, transparent);
    opacity: 1;
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-emphasis {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-deep);
    letter-spacing: -0.01em;
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-mid-spacer {
    display: none;
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-scale {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: color-mix(in srgb, var(--c-deep) 62%, transparent);
    opacity: 1;
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-rail {
    height: 6px;
    border-radius: var(--ae-radius-pill);
    background: color-mix(in srgb, var(--c-deep) 12%, transparent);
}

html body.ae-refresh .model-spec-stat-chip .model-spec-stat-chip-rail-fill {
    border-radius: var(--ae-radius-pill);
    background: linear-gradient(90deg, color-mix(in srgb, var(--c-deep) 55%, var(--c-fill)), var(--c-deep));
}

body.ae-refresh .api-endpoint-input-group {
    border-radius: var(--ae-radius);
}

body.ae-refresh .api-endpoint-input-group .api-endpoint-input {
    border-radius: var(--ae-radius) 0 0 var(--ae-radius) !important;
}

body.ae-refresh .api-endpoint-input-group .btn-copy {
    border-radius: 0 var(--ae-radius) var(--ae-radius) 0;
    border-color: var(--ae-line-strong);
}

body.ae-refresh .metric-bars .metric-bar {
    border-radius: 4px;
}

body.ae-refresh .modality-icon-wrapper {
    border-radius: var(--ae-radius-sm);
}

body.ae-refresh .model-spec-item,
body.ae-refresh .hardware-badge {
    border-radius: var(--ae-radius);
}

body.ae-refresh .nav-arrow-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius);
    background: var(--ae-surface);
}

body.ae-refresh .nav-arrow-btn:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh .model-icon-large-wrapper {
    border: none;
    border-radius: var(--ae-radius-lg);
}

/* ==========================================================================
   19. Page état de l'API
   ========================================================================== */
body.ae-refresh .dashboard-page {
    background: transparent;
}

/* Même largeur et mêmes marges que les pages de documentation (plus de
   colonne de 920px centrée avec de grands vides de chaque côté) */
body.ae-refresh .dashboard-status-page .dashboard-status-inner {
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    padding: 40px clamp(28px, 3.2vw, 56px) 48px;
    box-sizing: border-box;
}

body.ae-refresh .dashboard-card,
body.ae-refresh .status-page-v2 .dashboard-card.status-page-kpi,
body.ae-refresh .status-page-v2 .dashboard-card.status-page-hourly-card,
body.ae-refresh .status-page-v2 .dashboard-card.status-page-chart-card {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    box-shadow: none;
}

body.ae-refresh .status-page-alert {
    border: none;
    border-radius: var(--ae-radius-lg);
}

body.ae-refresh .status-page-hourly-card .status-hour-bar,
body.ae-refresh .status-page-hourly-card [class*="bar"] {
    border-radius: 4px;
}

/* ==========================================================================
   20. Pages fonctionnalités (OCR / Audio)
   ========================================================================== */
body.ae-refresh .docs-content-page h2.section-title-large,
body.ae-refresh .feature-section-title {
    border-bottom-color: var(--ae-line);
}

body.ae-refresh .section-heading {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ae-line);
}

body.ae-refresh .ocr-showcase,
body.ae-refresh .audio-showcase {
    border-radius: var(--ae-radius-xl);
    overflow: hidden;
}

/* Endpoints : type FILE sans style dédié + badge Required plus doux */
body.ae-refresh .api-type {
    background: var(--ae-surface-3);
    color: var(--ae-ink-soft);
}

body.ae-refresh .api-type-string {
    background: #e7ffde;
    color: #1d5a10;
}

body.ae-refresh .api-type-integer,
body.ae-refresh .api-type-number {
    background: #dbe8ff;
    color: #01123c;
}

body.ae-refresh .api-type-boolean {
    background: #fff6cc;
    color: #6b5800;
}

body.ae-refresh .api-type-array,
body.ae-refresh .api-type-object,
body.ae-refresh .api-type-map {
    background: #ede4ff;
    color: #4b0082;
}

body.ae-refresh .api-required-badge {
    background: #ffe9de;
    color: #b83400;
}

html.dark body.ae-refresh .api-type-string { background: #1d2c17; color: #b7e59a; }
html.dark body.ae-refresh .api-type-integer,
html.dark body.ae-refresh .api-type-number { background: #23345a; color: #c9d9fb; }
html.dark body.ae-refresh .api-type-boolean { background: #332b10; color: #f0d77a; }
html.dark body.ae-refresh .api-type-array,
html.dark body.ae-refresh .api-type-object,
html.dark body.ae-refresh .api-type-map { background: #2a2140; color: #d9c8ff; }
html.dark body.ae-refresh .api-required-badge { background: #35201a; color: #ffb99d; }

/* ==========================================================================
   21. Responsive (plus de topbar : bouton menu flottant)
   ========================================================================== */
@media (max-width: 1024px) {
    body.ae-refresh .sidebar,
    body.ae-refresh.sidebar-collapsed .sidebar {
        width: min(272px, 86vw) !important;
    }

    /* Menu ouvert : le bouton fermer se place à droite du panneau, pas sur le logo */
    body.ae-refresh.sidebar-open-mobile .studio-mobile-menu-btn {
        left: calc(min(272px, 86vw) + 10px);
        z-index: 40;
    }

    body.ae-refresh .docs-content-page {
        padding: 76px 28px 32px;
    }

    body.ae-refresh .api-endpoint-page,
    body.ae-refresh .model-detail-page {
        padding-top: 76px;
    }

    body.ae-refresh .dashboard-status-page .dashboard-status-inner {
        padding: 76px 28px 32px;
    }

    body.ae-refresh .model-detail-specs-bar {
        flex-wrap: wrap;
    }

    body.ae-refresh .model-spec-stat-chip {
        flex: 1 1 220px;
    }
}

@media (max-width: 600px) {
    body.ae-refresh .docs-content-page {
        padding: 72px 16px 24px;
    }

    body.ae-refresh .dashboard-status-page .dashboard-status-inner {
        padding: 72px 16px 24px;
    }

    body.ae-refresh .page-navigation .nav-link-prev:not(.nav-link-disabled),
    body.ae-refresh .page-navigation .nav-link-next:not(.nav-link-disabled) {
        column-gap: 10px;
    }

    body.ae-refresh .page-navigation .nav-link-prev:not(.nav-link-disabled) {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    body.ae-refresh .page-navigation .nav-link-next:not(.nav-link-disabled) {
        grid-template-columns: minmax(0, 1fr) 26px;
    }

    body.ae-refresh .page-navigation .nav-link-prev .nav-arrow,
    body.ae-refresh .page-navigation .nav-link-next .nav-arrow {
        width: 26px;
        height: 26px;
    }

    body.ae-refresh .page-navigation .nav-link-prev:not(.nav-link-disabled)::before,
    body.ae-refresh .page-navigation .nav-link-next:not(.nav-link-disabled)::before {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.625rem;
        letter-spacing: 0.04em;
    }

    body.ae-refresh .page-navigation .nav-link-prev .nav-text,
    body.ae-refresh .page-navigation .nav-link-next .nav-text {
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   22. Studio — même charte que Docs & API
   Les jetons hérités (--gris, --bleu-2-bordure…) sont rebranchés sur ceux de
   la charte : tout le Studio passe sur le fond « papier », les bordures
   neutres et le texte gris doux, puis les composants propres au Studio
   (onglets segmentés, interrupteurs, zone de dépôt, tableaux, modales,
   cartes du tableau de bord) reprennent les formes de Docs & API.
   ========================================================================== */
body.ae-refresh.studio-body {
    --gris: var(--ae-main-bg);
    --color-bg: var(--ae-main-bg);
    --blanc: var(--ae-surface);
    --color-surface: var(--ae-surface);
    --bleu-2-bordure: var(--ae-line);
    --gris-bordure: var(--ae-line);
    --gris-texte: var(--ae-ink-muted);
}

/* --- Contexte (organisation / espace) : mêmes lignes que la navigation --- */
body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-list {
    padding: 0 10px;
}

body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 0 8px 0 6px;
    gap: 10px;
    border: none !important;
    border-radius: var(--ae-radius);
    background: transparent;
    color: var(--ae-ink-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: none;
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-item + .studio-scope-item {
    margin-top: 2px;
}

body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-link > i:first-child {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: var(--ae-radius-sm);
    background: var(--ae-surface);
    box-shadow: inset 0 0 0 1px var(--ae-line);
    color: var(--ae-ink-soft);
    font-size: 0.8125rem;
}

body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-link .studio-scope-link-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ae-ink);
    font-weight: 600;
}

body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-link .studio-scope-chevron {
    flex: none;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    color: var(--ae-ink-faint);
}

body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-link:hover,
body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .studio-scope-link[aria-expanded="true"] {
    background: var(--ae-hover);
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .sidebar .studio-scope-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh.studio-body:not(.sidebar-collapsed) .sidebar .section-title-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    cursor: pointer;
}

body.ae-refresh.studio-body .sidebar .section-title-toggle .section-chevron {
    font-size: 0.5625rem;
    color: var(--ae-ink-faint);
}

/* Barre repliée : organisation / espace en pastilles centrées, comme les onglets */
@media (min-width: 1025px) {
    html body.ae-refresh.studio-body.sidebar-collapsed .sidebar .studio-scope-list {
        padding: 6px 0 0;
    }

    html body.ae-refresh.studio-body.sidebar-collapsed .sidebar .studio-scope-link {
        width: 100%;
        height: 40px;
        min-height: 40px;
        padding: 0;
        justify-content: center;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.ae-refresh.studio-body.sidebar-collapsed .sidebar .studio-scope-link > i:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0;
        border-radius: var(--ae-radius);
        background: var(--ae-surface);
        box-shadow: inset 0 0 0 1px var(--ae-line);
        color: var(--ae-ink-soft);
        font-size: 0.875rem;
    }

    html body.ae-refresh.studio-body.sidebar-collapsed .sidebar .studio-scope-link:hover > i:first-child {
        background: var(--ae-hover);
        color: var(--ae-ink);
    }
}

body.ae-refresh.studio-body .sidebar .studio-scope-dropdown .sidebar-user-menu-item {
    border-radius: var(--ae-radius-sm);
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .sidebar .studio-scope-dropdown .sidebar-user-menu-item:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh.studio-body .sidebar .studio-scope-dropdown .sidebar-user-menu-item.active {
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    font-weight: 600;
}

body.ae-refresh.studio-body .sidebar .sidebar-nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-orange-fill);
    color: var(--ae-orange-deep);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* --- Zone principale --- */
body.ae-refresh.studio-body .dashboard-page,
body.ae-refresh.studio-body .dashboard-content,
body.ae-refresh.studio-body .playground-page,
body.ae-refresh.studio-body .playground-content,
body.ae-refresh.studio-body .playground-layout,
body.ae-refresh.studio-body .playground-card,
body.ae-refresh.studio-body .playground-card-head,
body.ae-refresh.studio-body .playground-card-body,
body.ae-refresh.studio-body .playground-side-panel,
body.ae-refresh.studio-body .playground-config-shell,
body.ae-refresh.studio-body .playground-config-list,
body.ae-refresh.studio-body .playground-bar {
    background: transparent;
}

body.ae-refresh.studio-body .usage-page-title,
body.ae-refresh.studio-body .studio-page-title,
body.ae-refresh.studio-body .org-detail-title {
    letter-spacing: -0.02em;
}

body.ae-refresh.studio-body .usage-page-lede,
body.ae-refresh.studio-body .studio-page-desc,
body.ae-refresh.studio-body .studio-page-lead {
    color: var(--ae-ink-muted);
}

/* --- Cartes : bordure fine neutre, grands arrondis, pas d'ombre --- */
body.ae-refresh.studio-body .dashboard-card,
body.ae-refresh.studio-body .usage-sidebar-card,
body.ae-refresh.studio-body .usage-chart-block,
body.ae-refresh.studio-body .usage-tabs-block,
body.ae-refresh.studio-body .usage-period-box,
body.ae-refresh.studio-body .dashboard-account-card,
body.ae-refresh.studio-body .org-detail-card,
body.ae-refresh.studio-body .org-detail-table-card,
body.ae-refresh.studio-body .org-detail-empty-card,
body.ae-refresh.studio-body .studio-workspace-card,
body.ae-refresh.studio-body .studio-accueil-card,
body.ae-refresh.studio-body .studio-card-item {
    border: 1px solid var(--ae-line) !important;
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    box-shadow: none;
    overflow: hidden;
}

body.ae-refresh.studio-body .usage-period-box {
    background: var(--ae-surface-2);
    overflow: visible;
}

body.ae-refresh.studio-body .studio-accueil-card:hover,
body.ae-refresh.studio-body .studio-card-item:hover {
    border-color: var(--ae-line-strong) !important;
    box-shadow: var(--ae-shadow-md);
}

body.ae-refresh.studio-body .usage-sidebar-card {
    cursor: pointer;
    transition: border-color var(--ae-ease), box-shadow var(--ae-ease), transform var(--ae-ease);
}

body.ae-refresh.studio-body .usage-sidebar-card:hover {
    border-color: var(--ae-line-strong) !important;
    box-shadow: var(--ae-shadow-md);
    transform: translateY(-1px);
}

/* Carte mise en avant (coût total, solde) : fond bleu de la charte + contour
   et halo de la même teinte, comme les cartes en vedette de Docs */
body.ae-refresh.studio-body .usage-spend-card,
body.ae-refresh.studio-body .dashboard-account-balance-box {
    border: 1px solid var(--ae-blue-edge) !important;
    border-radius: var(--ae-radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--ae-blue-glow) 0%, transparent 60%),
        var(--ae-blue-fill) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1px 2px var(--ae-blue-shadow);
}

html.dark body.ae-refresh.studio-body .usage-spend-card,
html.dark body.ae-refresh.studio-body .dashboard-account-balance-box {
    box-shadow: none;
}

body.ae-refresh.studio-body .usage-spend-card .usage-spend-label,
body.ae-refresh.studio-body .usage-spend-card .usage-spend-sub,
body.ae-refresh.studio-body .usage-spend-card .usage-spend-value,
body.ae-refresh.studio-body .dashboard-account-balance-box .dashboard-account-balance-label,
body.ae-refresh.studio-body .dashboard-account-balance-box .dashboard-account-balance-value,
body.ae-refresh.studio-body .dashboard-account-balance-box .dashboard-account-balance-currency {
    color: var(--ae-blue-deep);
}

body.ae-refresh.studio-body .usage-spend-card .usage-card-hint,
body.ae-refresh.studio-body .usage-spend-card .balance-precise,
body.ae-refresh.studio-body .dashboard-account-balance-box .balance-precise {
    color: color-mix(in srgb, var(--ae-blue-deep) 62%, transparent);
}

/* En-têtes de carte (compte) : plus de bandeau bleu, pastille d'icône douce */
body.ae-refresh.studio-body .dashboard-account-card-header {
    background: transparent;
    border-bottom: 1px solid var(--ae-line-soft);
}

body.ae-refresh.studio-body .dashboard-account-card-icon {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--ae-radius);
    background: var(--ae-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
    color: var(--ae-accent-ink);
}

body.ae-refresh.studio-body .dashboard-account-card-icon i {
    color: var(--ae-accent-ink);
}

body.ae-refresh.studio-body .dashboard-account-card-title {
    font-size: 1rem;
    letter-spacing: -0.01em;
}

/* Libellés en petites capitales : gris doux au lieu du marine */
body.ae-refresh.studio-body .dashboard-account-quick-label,
body.ae-refresh.studio-body .dashboard-account-spend-chart-title,
body.ae-refresh.studio-body .usage-period-box-label,
body.ae-refresh.studio-body .playground-config-section-title {
    color: var(--ae-ink-muted);
}

body.ae-refresh.studio-body .org-detail-section-title,
body.ae-refresh.studio-body .studio-workspace-card-title {
    color: var(--ae-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.ae-refresh.studio-body .org-detail-desc {
    color: var(--ae-ink-muted);
}

/* Lien retour : pastille comme le fil d'Ariane de Docs */
body.ae-refresh.studio-body .org-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-left: -10px;
    padding: 0 10px;
    border: none;
    border-radius: var(--ae-radius-pill);
    background: transparent;
    color: var(--ae-ink-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-refresh.studio-body .org-detail-back:hover {
    background: var(--ae-surface-3);
    color: var(--ae-ink);
}

/* --- Onglets segmentés : rail gris, onglet actif en carte blanche --- */
body.ae-refresh.studio-body .playground-side-tabs,
body.ae-refresh.studio-body .playground-ocr-mode-tabs,
body.ae-refresh.studio-body .playground-tabs,
body.ae-refresh.studio-body .usage-tabs-head,
body.ae-refresh.studio-body .usage-period-quick,
body.ae-refresh.studio-body .usage-date-mode-tabs,
body.ae-refresh.studio-body .keys-permission-tabs,
body.ae-refresh.studio-body .studio-workspace-tabs,
body.ae-refresh.studio-body .ws-detail-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    padding: 3px;
    border: none !important;
    border-radius: var(--ae-radius);
    background: var(--ae-surface-3) !important;
    box-shadow: none;
}

body.ae-refresh.studio-body .playground-side-tab,
body.ae-refresh.studio-body .playground-ocr-mode-tab,
body.ae-refresh.studio-body .playground-tab,
body.ae-refresh.studio-body .usage-tab,
body.ae-refresh.studio-body .usage-period-quick .usage-period-btn,
body.ae-refresh.studio-body .usage-date-mode-btn,
body.ae-refresh.studio-body .keys-permission-tab,
body.ae-refresh.studio-body .studio-workspace-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    border: none !important;
    border-radius: var(--ae-radius-sm) !important;
    background: transparent !important;
    color: var(--ae-ink-muted) !important;
    font-weight: 600;
    box-shadow: none;
    transition: background-color var(--ae-ease), color var(--ae-ease), box-shadow var(--ae-ease);
}

body.ae-refresh.studio-body .playground-side-tab i,
body.ae-refresh.studio-body .playground-ocr-mode-tab i,
body.ae-refresh.studio-body .playground-tab i,
body.ae-refresh.studio-body .usage-tab i,
body.ae-refresh.studio-body .keys-permission-tab i,
body.ae-refresh.studio-body .studio-workspace-tab i {
    color: inherit !important;
}

body.ae-refresh.studio-body .playground-side-tab:hover,
body.ae-refresh.studio-body .playground-ocr-mode-tab:hover,
body.ae-refresh.studio-body .playground-tab:hover,
body.ae-refresh.studio-body .usage-tab:hover,
body.ae-refresh.studio-body .usage-period-quick .usage-period-btn:hover,
body.ae-refresh.studio-body .usage-date-mode-btn:hover,
body.ae-refresh.studio-body .keys-permission-tab:hover,
body.ae-refresh.studio-body .studio-workspace-tab:hover {
    color: var(--ae-ink) !important;
}

body.ae-refresh.studio-body .playground-side-tab.active,
body.ae-refresh.studio-body .playground-ocr-mode-tab.active,
body.ae-refresh.studio-body .playground-tab.active,
body.ae-refresh.studio-body .usage-tab.usage-tab-active,
body.ae-refresh.studio-body .usage-period-quick .usage-period-btn.usage-period-btn-active,
body.ae-refresh.studio-body .usage-date-mode-btn.usage-date-mode-btn-active,
body.ae-refresh.studio-body .keys-permission-tab.active,
body.ae-refresh.studio-body .studio-workspace-tab.active {
    background: var(--ae-surface) !important;
    color: var(--ae-ink) !important;
    box-shadow: var(--ae-shadow-sm);
}

html.dark body.ae-refresh.studio-body .playground-side-tab.active,
html.dark body.ae-refresh.studio-body .playground-ocr-mode-tab.active,
html.dark body.ae-refresh.studio-body .playground-tab.active,
html.dark body.ae-refresh.studio-body .usage-tab.usage-tab-active,
html.dark body.ae-refresh.studio-body .usage-period-quick .usage-period-btn.usage-period-btn-active,
html.dark body.ae-refresh.studio-body .usage-date-mode-btn.usage-date-mode-btn-active,
html.dark body.ae-refresh.studio-body .keys-permission-tab.active,
html.dark body.ae-refresh.studio-body .studio-workspace-tab.active {
    background: var(--ae-line-strong) !important;
}

body.ae-refresh.studio-body .playground-side-tab:focus-visible,
body.ae-refresh.studio-body .playground-ocr-mode-tab:focus-visible,
body.ae-refresh.studio-body .playground-tab:focus-visible,
body.ae-refresh.studio-body .usage-tab:focus-visible,
body.ae-refresh.studio-body .keys-permission-tab:focus-visible,
body.ae-refresh.studio-body .studio-workspace-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

/* Onglets pleine largeur (bloc clés / utilisateurs, permissions) */
body.ae-refresh.studio-body .usage-tabs-head,
body.ae-refresh.studio-body .keys-permission-tabs {
    display: flex;
}

body.ae-refresh.studio-body .usage-tabs-head .usage-tab,
body.ae-refresh.studio-body .keys-permission-tabs .keys-permission-tab {
    flex: 1 1 0;
    min-height: 34px;
}

body.ae-refresh.studio-body .usage-tabs-head {
    margin: 12px 12px 0;
}

body.ae-refresh.studio-body .usage-period-quick {
    width: fit-content;
    max-width: 100%;
}

body.ae-refresh.studio-body .usage-period-quick .usage-period-btn,
body.ae-refresh.studio-body .usage-date-mode-btn {
    min-height: 28px;
    padding: 0 12px;
    font-size: 0.8125rem;
}

/* Onglets soulignés (compte) : liseré marine fin, pas de bandeau */
body.ae-refresh.studio-body .dashboard-account-tabs-head {
    background: transparent;
    border-bottom: 1px solid var(--ae-line-soft);
}

body.ae-refresh.studio-body .dashboard-account-tab {
    color: var(--ae-ink-muted);
    font-weight: 600;
}

body.ae-refresh.studio-body .dashboard-account-tab:hover,
body.ae-refresh.studio-body .dashboard-account-tab.dashboard-account-tab--active {
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .dashboard-account-tabs-indicator {
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ae-accent);
}

/* --- Interrupteurs : rail gris sans contour, pastille blanche, marine actif --- */
body.ae-refresh.studio-body .keys-toggle-slider,
body.ae-refresh.studio-body .studio-workspace-switch-slider {
    border: none !important;
    background: var(--ae-line-strong) !important;
    transition: background-color var(--ae-ease), box-shadow var(--ae-ease);
}

body.ae-refresh.studio-body .keys-toggle-slider::before,
body.ae-refresh.studio-body .studio-workspace-switch-slider::before {
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.22), 0 1px 1px rgba(16, 24, 40, 0.08);
}

body.ae-refresh.studio-body .keys-toggle-input:checked + .keys-toggle-slider,
body.ae-refresh.studio-body .studio-workspace-switch-input:checked + .studio-workspace-switch-slider {
    background: var(--ae-cta-gradient) !important;
}

body.ae-refresh.studio-body .keys-toggle-input:focus-visible + .keys-toggle-slider,
body.ae-refresh.studio-body .studio-workspace-switch-input:focus-visible + .studio-workspace-switch-slider {
    box-shadow: 0 0 0 3px var(--ae-focus);
}

/* --- Double curseur (filtres) --- */
body.ae-refresh.studio-body .keys-double-slider-track {
    height: 6px;
    margin-top: -3px;
    border: none;
    border-radius: var(--ae-radius-pill);
    background: linear-gradient(
        to right,
        var(--ae-surface-3) 0%,
        var(--ae-surface-3) var(--range-min-percent),
        var(--ae-accent) var(--range-min-percent),
        var(--ae-accent) var(--range-max-percent),
        var(--ae-surface-3) var(--range-max-percent),
        var(--ae-surface-3) 100%
    );
}

body.ae-refresh.studio-body .keys-double-slider .keys-range::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -4px;
    border: 2px solid var(--ae-accent);
    background: var(--ae-surface);
    box-shadow: var(--ae-shadow-sm);
}

body.ae-refresh.studio-body .keys-double-slider .keys-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ae-accent);
    background: var(--ae-surface);
    box-shadow: var(--ae-shadow-sm);
}

/* --- Boutons carrés hérités : mêmes arrondis et surfaces que Docs --- */
body.ae-refresh.studio-body .usage-period-btn,
body.ae-refresh.studio-body .dashboard-account-quick-btn,
body.ae-refresh.studio-body .keys-filter-dropdown-trigger,
body.ae-refresh.studio-body .workspace-action-btn,
body.ae-refresh.studio-body .org-detail-action-btn,
body.ae-refresh.studio-body .org-detail-dropdown-btn,
body.ae-refresh.studio-body .studio-workspace-dropdown-btn,
body.ae-refresh.studio-body .studio-workspace-icon-btn,
body.ae-refresh.studio-body .studio-workspace-copy-btn,
body.ae-refresh.studio-body .studio-ws-limit-btn,
body.ae-refresh.studio-body .studio-btn-sm {
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius) !important;
    background: var(--ae-surface);
    color: var(--ae-ink);
    box-shadow: var(--ae-shadow-xs);
    transition: background-color var(--ae-ease), border-color var(--ae-ease), color var(--ae-ease), box-shadow var(--ae-ease);
}

body.ae-refresh.studio-body .usage-period-btn:hover,
body.ae-refresh.studio-body .dashboard-account-quick-btn:hover,
body.ae-refresh.studio-body .keys-filter-dropdown-trigger:hover,
body.ae-refresh.studio-body .workspace-action-btn:hover,
body.ae-refresh.studio-body .org-detail-action-btn:hover,
body.ae-refresh.studio-body .org-detail-dropdown-btn:hover,
body.ae-refresh.studio-body .studio-workspace-dropdown-btn:hover,
body.ae-refresh.studio-body .studio-workspace-icon-btn:hover,
body.ae-refresh.studio-body .studio-workspace-copy-btn:hover,
body.ae-refresh.studio-body .studio-ws-limit-btn:hover,
body.ae-refresh.studio-body .studio-btn-sm:hover {
    border-color: var(--ae-ink-faint);
    background: var(--ae-surface-2);
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .dashboard-account-quick-btn {
    font-weight: 600;
}

/* Actions de ligne (modifier / supprimer) : icônes en pastille 32px */
body.ae-refresh.studio-body .workspace-action-btn,
body.ae-refresh.studio-body .org-detail-action-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--ae-ink-muted);
}

body.ae-refresh.studio-body .workspace-action-btn:hover,
body.ae-refresh.studio-body .org-detail-action-btn:hover {
    border-color: transparent;
    background: var(--ae-surface-3);
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .workspace-action-btn.workspace-action-delete,
body.ae-refresh.studio-body .org-detail-action-btn-danger {
    color: var(--ae-orange-deep);
}

body.ae-refresh.studio-body .workspace-action-btn.workspace-action-delete:hover,
body.ae-refresh.studio-body .org-detail-action-btn-danger:hover {
    background: var(--ae-orange-fill);
    color: var(--ae-orange-deep);
}

/* Boutons de suppression / révocation : orange de la charte */
body.ae-refresh.studio-body .keys-revoke-confirm-btn,
body.ae-refresh.studio-body .studio-btn-danger,
body.ae-refresh.studio-body .org-detail-btn-danger {
    min-height: 40px;
    padding: 0 18px;
    border: none !important;
    border-radius: var(--ae-radius) !important;
    background: var(--ae-orange-deep) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px var(--ae-orange-shadow);
}

html.dark body.ae-refresh.studio-body .keys-revoke-confirm-btn,
html.dark body.ae-refresh.studio-body .studio-btn-danger,
html.dark body.ae-refresh.studio-body .org-detail-btn-danger {
    color: #2a1c17 !important;
}

body.ae-refresh.studio-body .keys-revoke-confirm-btn:hover,
body.ae-refresh.studio-body .studio-btn-danger:hover,
body.ae-refresh.studio-body .org-detail-btn-danger:hover {
    filter: brightness(1.08);
}

/* Bouton flottant : dégradé marine, arrondi plus généreux */
body.ae-refresh.studio-body .dashboard-fab,
body.ae-refresh.studio-body .dashboard-fab.primary-btn {
    min-height: 46px;
    padding: 0 20px;
    border-radius: var(--ae-radius-lg);
    background: var(--ae-cta-gradient) !important;
    box-shadow: var(--ae-cta-shadow);
}

body.ae-refresh.studio-body .dashboard-fab:hover {
    box-shadow: var(--ae-cta-shadow-hover);
}

/* Petits boutons texte « OK » / « Créer une clé API » */
body.ae-refresh.studio-body .usage-date-btn-inline {
    min-height: 32px;
    padding: 0 12px;
}

/* --- Filtres (clés, logs) : en-tête compact, séparateur neutre --- */
body.ae-refresh.studio-body .keys-filters-card {
    padding: 0;
}

body.ae-refresh.studio-body .keys-filters-header {
    min-height: 52px;
    padding: 0 18px;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--ae-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

body.ae-refresh.studio-body .keys-filters-header:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh.studio-body .keys-filters-header i {
    color: var(--ae-ink-muted);
    font-size: 0.8125rem;
}

body.ae-refresh.studio-body .keys-filters-body {
    margin: 0;
    padding: 18px;
    border: none;
    border-top: 1px solid var(--ae-line-soft);
}

/* --- Tableaux : en-tête gris clair au lieu du bandeau marine --- */
body.ae-refresh.studio-body .docs-main table thead,
body.ae-refresh.studio-body .docs-main table thead tr,
html.dark body.ae-refresh.studio-body .docs-main table thead,
html.dark body.ae-refresh.studio-body .docs-main table thead tr {
    background: var(--ae-surface-2) !important;
}

body.ae-refresh.studio-body .docs-main table thead th,
html.dark body.ae-refresh.studio-body .docs-main table thead th {
    background: transparent !important;
    border-bottom: 1px solid var(--ae-line) !important;
    color: var(--ae-ink-muted) !important;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

body.ae-refresh.studio-body .docs-main table tbody td {
    border-color: var(--ae-line-soft) !important;
}

body.ae-refresh.studio-body .docs-main table tbody tr {
    transition: background-color var(--ae-ease);
}

body.ae-refresh.studio-body .docs-main table tbody tr:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh.studio-body .dashboard-card.keys-table-card {
    padding: 0;
    border-radius: var(--ae-radius-lg);
}

body.ae-refresh.studio-body .keys-table td {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Pipelines : chemin choisi et bloc « Mes configurations » */
body.ae-refresh.studio-body .ppg-pad__route {
    border: 1px solid var(--ae-blue-edge);
    border-radius: var(--ae-radius);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--ae-blue-glow) 0%, transparent 60%),
        var(--ae-blue-fill);
}

body.ae-refresh.studio-body .ppg-config-board__saves {
    border-top-color: var(--ae-line-soft);
}

body.ae-refresh.studio-body .ppg-slider__input {
    height: 4px;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-surface-3);
}

body.ae-refresh.studio-body .ppg-slider__input::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ae-accent);
    border-radius: 50%;
    background: var(--ae-surface);
    box-shadow: var(--ae-shadow-sm);
}

body.ae-refresh.studio-body .ppg-slider__input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ae-accent);
    border-radius: 50%;
    background: var(--ae-surface);
    box-shadow: var(--ae-shadow-sm);
}

/* --- États vides : pastille d'icône, texte gris doux, pas de pointillés --- */
body.ae-refresh.studio-body .dashboard-empty-state,
body.ae-refresh.studio-body .studio-empty,
body.ae-refresh.studio-body .org-detail-empty,
body.ae-refresh.studio-body .usage-keys-empty {
    border: none !important;
    border-radius: var(--ae-radius-lg);
    background: transparent;
}

body.ae-refresh.studio-body .usage-keys-empty {
    background: var(--ae-surface-2);
}

body.ae-refresh.studio-body .studio-empty {
    border: 1px solid var(--ae-line) !important;
    background: var(--ae-surface);
}

body.ae-refresh.studio-body .dashboard-empty-icon,
body.ae-refresh.studio-body .org-detail-empty-icon,
body.ae-refresh.studio-body .usage-keys-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--ae-radius-lg);
    background: var(--ae-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
    color: var(--ae-accent-ink);
    font-size: 1.25rem;
    opacity: 1;
}

body.ae-refresh.studio-body .dashboard-empty-icon i,
body.ae-refresh.studio-body .org-detail-empty-icon i,
body.ae-refresh.studio-body .usage-keys-empty-icon i {
    font-size: 1.25rem;
    color: var(--ae-accent-ink);
    opacity: 1;
}

body.ae-refresh.studio-body .dashboard-empty-text,
body.ae-refresh.studio-body .org-detail-empty-title,
body.ae-refresh.studio-body .usage-keys-empty-text {
    color: var(--ae-ink);
    font-weight: 600;
}

body.ae-refresh.studio-body .dashboard-empty-desc,
body.ae-refresh.studio-body .org-detail-empty-desc,
body.ae-refresh.studio-body .usage-keys-empty-desc {
    color: var(--ae-ink-muted);
}

/* --- Modales : grands arrondis, en-tête neutre, voile plus doux --- */
body.ae-refresh.studio-body .keys-modal-overlay {
    background: rgba(12, 14, 22, 0.42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

body.ae-refresh.studio-body .keys-modal {
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-xl);
    background: var(--ae-surface) !important;
    box-shadow: var(--ae-shadow-lg);
    overflow: hidden;
}

body.ae-refresh.studio-body .keys-modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ae-line-soft);
}

body.ae-refresh.studio-body .keys-modal-title {
    color: var(--ae-ink) !important;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

body.ae-refresh.studio-body .keys-modal-header-warning {
    background:
        radial-gradient(90% 160% at 100% 0%, var(--ae-orange-glow) 0%, transparent 60%),
        var(--ae-orange-fill) !important;
    border-bottom-color: var(--ae-orange-edge);
}

body.ae-refresh.studio-body .keys-modal-header-warning .keys-modal-title {
    color: var(--ae-orange-deep) !important;
}

body.ae-refresh.studio-body .keys-modal-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: var(--ae-radius-sm);
    background: transparent;
    color: var(--ae-ink-muted) !important;
}

body.ae-refresh.studio-body .keys-modal-close i {
    color: inherit !important;
}

body.ae-refresh.studio-body .keys-modal-close:hover {
    background: var(--ae-surface-3);
    color: var(--ae-ink) !important;
}

/* --- Champs : libellés encre, lecture seule en surface grise --- */
body.ae-refresh.studio-body .dashboard-account-label,
body.ae-refresh.studio-body .dashboard-form-group > label,
body.ae-refresh.studio-body .form-label,
body.ae-refresh.studio-body .studio-form-label,
body.ae-refresh.studio-body .studio-workspace-label {
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .dashboard-account-readonly,
body.ae-refresh.studio-body .studio-workspace-input-readonly {
    border: 1px solid var(--ae-line) !important;
    border-radius: var(--ae-radius) !important;
    background: var(--ae-surface-2) !important;
}

body.ae-refresh.studio-body .dashboard-account-readonly-hint {
    color: var(--ae-ink-faint);
}

body.ae-refresh.studio-body .docs-main .lang-dropdown-form .lang-dropdown-trigger {
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius);
    background: var(--ae-surface);
}

body.ae-refresh.studio-body .studio-ws-limit-input-wrap {
    border-color: var(--ae-line-strong);
    border-radius: var(--ae-radius);
    overflow: hidden;
}

body.ae-refresh.studio-body .studio-ws-limit-input-wrap:focus-within {
    border-color: #4a6fe0;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh.studio-body .studio-ws-limit-input-wrap input {
    border: none !important;
    box-shadow: none !important;
}

/* --- Playground : zone de dépôt, en-tête, options --- */
body.ae-refresh.studio-body .playground-dropzone {
    border: 1.5px dashed var(--ae-line-strong) !important;
    border-radius: var(--ae-radius-xl);
    background: var(--ae-surface) !important;
    transition: border-color var(--ae-ease), background-color var(--ae-ease);
}

body.ae-refresh.studio-body .playground-dropzone:hover,
body.ae-refresh.studio-body .playground-dropzone:focus-visible,
body.ae-refresh.studio-body .playground-dropzone.dragover,
body.ae-refresh.studio-body .playground-dropzone.is-dragover,
body.ae-refresh.studio-body .playground-dropzone.drag-over {
    outline: none;
    border-color: #4a6fe0 !important;
    background:
        radial-gradient(70% 60% at 50% 40%, var(--ae-accent-soft) 0%, transparent 100%),
        var(--ae-surface) !important;
}

body.ae-refresh.studio-body .playground-dropzone-icon-wrap {
    width: 52px;
    height: 52px;
    margin-bottom: 4px;
    border-radius: var(--ae-radius-lg);
    background: var(--ae-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
}

body.ae-refresh.studio-body .playground-dropzone-icon-wrap i {
    font-size: 1.25rem;
    color: var(--ae-accent-ink);
}

body.ae-refresh.studio-body .playground-dropzone-text {
    color: var(--ae-ink);
    font-weight: 600;
}

body.ae-refresh.studio-body .playground-dropzone-formats {
    color: var(--ae-ink-muted);
}

body.ae-refresh.studio-body .playground-dropzone-cta {
    min-height: 36px;
    height: 36px;
    margin-top: 4px;
    padding: 0 16px;
    border: 1px solid var(--ae-line-strong) !important;
    border-radius: var(--ae-radius) !important;
    background: var(--ae-surface) !important;
    color: var(--ae-ink) !important;
    box-shadow: var(--ae-shadow-xs);
}

body.ae-refresh.studio-body .playground-dropzone:hover .playground-dropzone-cta,
body.ae-refresh.studio-body .playground-dropzone:focus-visible .playground-dropzone-cta {
    border-color: transparent !important;
    background: var(--ae-cta-gradient) !important;
    color: #ffffff !important;
    box-shadow: var(--ae-cta-shadow);
}

body.ae-refresh.studio-body .playground-config-divider {
    border-color: var(--ae-line-soft) !important;
}

body.ae-refresh.studio-body .playground-config-banner {
    color: var(--ae-ink-muted);
}

body.ae-refresh.studio-body .playground-card-body--side,
body.ae-refresh.studio-body .playground-card-head--side {
    border-color: var(--ae-line) !important;
}

/* Cases rondes (confiance par page / par mot) */
body.ae-refresh.studio-body .playground-config-group input[type="checkbox"],
body.ae-refresh.studio-body .playground-config-group input[type="radio"] {
    border-color: var(--ae-line-strong) !important;
    background-color: var(--ae-surface) !important;
}

body.ae-refresh.studio-body .playground-config-group input[type="checkbox"]:checked,
body.ae-refresh.studio-body .playground-config-group input[type="radio"]:checked {
    border-color: var(--ae-accent) !important;
    background-color: var(--ae-accent-soft) !important;
}

/* États vides des panneaux Résultats / Extraction / Historique */
body.ae-refresh.studio-body .playground-results-empty > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface-3);
    color: var(--ae-ink-muted);
    font-size: 1.25rem;
    opacity: 1;
}

body.ae-refresh.studio-body .playground-results-empty p {
    color: var(--ae-ink-soft);
}

body.ae-refresh.studio-body .playground-results-empty .playground-history-empty-hint {
    color: var(--ae-ink-faint);
    font-size: 0.8125rem;
}

/* Formaté / JSON : même rail segmenté */
body.ae-refresh.studio-body .playground-output-mode {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: none;
    border-radius: var(--ae-radius);
    background: var(--ae-surface-3);
}

body.ae-refresh.studio-body .playground-output-mode .playground-output-mode-btn {
    min-height: 28px;
    padding: 0 12px;
    border: none !important;
    border-radius: var(--ae-radius-sm) !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ae-ink-muted) !important;
}

body.ae-refresh.studio-body .playground-output-mode .playground-output-mode-btn.is-active {
    background: var(--ae-surface) !important;
    box-shadow: var(--ae-shadow-sm) !important;
    color: var(--ae-ink) !important;
}

html.dark body.ae-refresh.studio-body .playground-output-mode .playground-output-mode-btn.is-active {
    background: var(--ae-line-strong) !important;
}

/* Jauge d'essai gratuit */
body.ae-refresh.studio-body .playground-trial-bar,
body.ae-refresh.studio-body .playground-trial-progress {
    border-radius: var(--ae-radius-pill);
    background: var(--ae-surface-3);
    overflow: hidden;
}

/* --- Mobile : même marge haute que Docs sous le bouton menu --- */
@media (max-width: 1024px) {
    body.ae-refresh.studio-body .dashboard-content {
        padding-top: 76px;
    }
}

/* ==========================================================================
   23. Connexion / inscription — même charte que Docs & API
   Fond gris de la sidebar, formulaire posé sur une carte blanche « papier »,
   étapes d'inscription en onglets segmentés, bouton principal en dégradé.
   ========================================================================== */
html body.ae-auth,
html.dark body.ae-auth {
    --gris: var(--ae-sidebar-bg);
    --blanc: var(--ae-surface);
    --bleu-2-bordure: var(--ae-line);
    --gris-texte: var(--ae-ink-muted);
    background:
        radial-gradient(60% 50% at 50% 0%, var(--ae-accent-soft) 0%, transparent 70%),
        var(--ae-sidebar-bg);
    color: var(--ae-ink);
}

html body.ae-auth .auth-topbar,
html.dark body.ae-auth .auth-topbar {
    height: 72px;
    padding: 0 24px;
    box-sizing: border-box;
    background: transparent;
    border-bottom: none;
}

body.ae-auth .auth-brand {
    display: inline-flex;
    align-items: center;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: var(--ae-radius);
    transition: background-color var(--ae-ease);
}

body.ae-auth .auth-brand:hover {
    background: var(--ae-hover);
}

body.ae-auth .auth-brand:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-auth .auth-brand-logo {
    height: 32px;
}

/* Le masque du logo (mode sombre) suit le padding du lien */
html.dark body.ae-auth .auth-brand::after {
    left: 8px;
    top: 6px;
    width: calc(100% - 16px);
    height: calc(100% - 12px);
}

body.ae-auth .auth-theme-toggle {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--ae-radius);
    background: transparent;
    color: var(--ae-ink-muted);
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-auth .auth-theme-toggle:hover {
    background: var(--ae-hover);
    color: var(--ae-ink);
}

body.ae-auth .auth-theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-auth .auth-main {
    padding: 24px 24px 72px;
}

/* Carte du formulaire */
html body.ae-auth .auth-page-container {
    padding: 36px 36px 28px;
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-xl);
    background: var(--ae-surface);
    box-shadow: var(--ae-shadow-md);
}

@media (min-width: 460px) {
    html body.ae-auth .auth-page-container {
        width: 460px;
        min-width: 460px;
        max-width: 460px;
    }
}

html.dark body.ae-auth .auth-page-container {
    box-shadow: var(--ae-shadow-lg);
}

body.ae-auth .auth-page-container .auth-header {
    margin-bottom: 28px;
}

body.ae-auth .auth-page-container .auth-title,
html.dark body.ae-auth .auth-page-container .auth-title {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--ae-ink);
}

body.ae-auth .auth-page-container .auth-subtitle,
html.dark body.ae-auth .auth-page-container .auth-subtitle {
    margin-top: 6px;
    color: var(--ae-ink-muted);
    font-size: 0.875rem;
}

/* Champs */
body.ae-auth .auth-page-container .auth-form .form-group {
    margin-bottom: 18px;
}

body.ae-auth .auth-page-container .auth-form .form-label {
    margin-bottom: 7px;
    color: var(--ae-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

body.ae-auth .auth-page-container .auth-form input[type="text"],
body.ae-auth .auth-page-container .auth-form input[type="password"],
body.ae-auth .auth-page-container .auth-form input[type="email"],
body.ae-auth .auth-page-container .auth-form select,
body.ae-auth .auth-page-container .auth-form .form-input,
body.ae-auth .auth-page-container .auth-form input.password-input {
    min-height: 44px;
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius) !important;
    font-size: 0.9375rem;
}

body.ae-auth .auth-page-container .auth-form .password-toggle {
    width: 32px;
    height: 32px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ae-radius-sm);
    color: var(--ae-ink-muted);
}

body.ae-auth .auth-page-container .auth-form .password-toggle:hover {
    background: var(--ae-surface-3);
    color: var(--ae-ink);
}

body.ae-auth .auth-page-container .auth-form .form-help-text {
    color: var(--ae-ink-muted);
}

body.ae-auth .auth-page-container .auth-form .form-error {
    color: var(--ae-orange-deep);
}

/* Bouton principal pleine largeur (connexion, mot de passe oublié…) */
body.ae-auth .auth-page-container .auth-form .form-actions {
    margin-top: 24px;
}

body.ae-auth .auth-page-container .auth-form .form-actions:not(.register-wizard-actions--split):not(.auth-form-actions-split) .primary-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
}

body.ae-auth .register-wizard-actions--split .primary-btn,
body.ae-auth .register-wizard-actions--split .ghost-btn,
body.ae-auth .auth-form-actions-split .primary-btn,
body.ae-auth .auth-form-actions-split .ghost-btn {
    min-height: 44px;
}

/* Messages : fonds de la charte, contour de la même teinte */
body.ae-auth .auth-page-container .auth-message {
    padding: 12px 14px;
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius);
    background: var(--ae-surface-2);
    font-size: 0.875rem;
}

body.ae-auth .auth-page-container .auth-message-success,
html.dark body.ae-auth .auth-page-container .auth-message-success {
    border-color: var(--ae-green-edge);
    background: var(--ae-green-fill);
    color: var(--ae-green-deep);
}

body.ae-auth .auth-page-container .auth-message-error,
html.dark body.ae-auth .auth-page-container .auth-message-error {
    border-color: var(--ae-orange-edge);
    background: var(--ae-orange-fill);
    color: var(--ae-orange-deep);
}

/* Pied : séparateur fin, liens marine */
body.ae-auth .auth-page-container .auth-footer,
html.dark body.ae-auth .auth-page-container .auth-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ae-line-soft);
    color: var(--ae-ink-muted);
    font-size: 0.875rem;
}

body.ae-auth .auth-page-container .auth-footer p {
    margin: 0;
}

body.ae-auth .auth-page-container .auth-footer p + p {
    margin-top: 8px;
}

body.ae-auth .auth-page-container .auth-link {
    color: var(--ae-accent-ink);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
}

body.ae-auth .auth-page-container .auth-link:hover {
    text-decoration: underline;
    opacity: 1;
}

/* Étapes d'inscription : rail segmenté, étape courante en carte blanche */
html body.ae-auth .register-wizard-progress,
html.dark body.ae-auth .register-wizard-progress {
    margin-bottom: 28px;
    padding: 3px;
    border: none;
    border-radius: var(--ae-radius);
    background: var(--ae-surface-3);
}

body.ae-auth .register-wizard-steps {
    gap: 2px;
    border-bottom: none;
}

html body.ae-auth .register-wizard-step,
html.dark body.ae-auth .register-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-right: none;
    border-radius: var(--ae-radius-sm);
    background: transparent;
    box-shadow: none;
    color: var(--ae-ink-muted);
    font-size: 0.75rem;
    opacity: 1;
}

body.ae-auth .register-wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 50%;
    background: var(--ae-line-strong);
    color: var(--ae-ink-soft);
    font-size: 0.6875rem;
    opacity: 1;
}

html body.ae-auth .register-wizard-step--current,
html.dark body.ae-auth .register-wizard-step--current {
    background: var(--ae-surface);
    box-shadow: var(--ae-shadow-sm);
    color: var(--ae-ink);
}

html.dark body.ae-auth .register-wizard-step--current {
    background: var(--ae-line-strong);
}

body.ae-auth .register-wizard-step--current .register-wizard-step-num {
    background: var(--ae-accent);
    color: #ffffff;
}

html.dark body.ae-auth .register-wizard-step--current .register-wizard-step-num {
    color: #0c1120;
}

html body.ae-auth .register-wizard-step--complete,
html.dark body.ae-auth .register-wizard-step--complete {
    color: var(--ae-ink-soft);
}

body.ae-auth .register-wizard-step--complete .register-wizard-step-num {
    background: var(--ae-green-fill);
    box-shadow: inset 0 0 0 1px var(--ae-green-edge);
    color: var(--ae-green-deep);
}

@media (max-width: 520px) {
    html body.ae-auth .auth-page-container {
        padding: 28px 20px 22px;
        border-radius: var(--ae-radius-lg);
    }

    body.ae-auth .auth-main {
        padding: 8px 12px 40px;
    }
}

/* ==========================================================================
   24. Notifications (toasts) : fond, contour et teinte de la charte, comme les
   messages Docs & API (vert = succès, orange = erreur / attention, bleu = info).
   Les couleurs ne sont plus posées en ligne par notifications.js.
   ========================================================================== */
html body .notification {
    min-width: 280px;
    max-width: 380px;
    padding: 10px 12px 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--ae-radius-lg);
    box-shadow: var(--ae-shadow-md);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

html body .notification-success { --n-fill: var(--ae-green-fill); --n-edge: var(--ae-green-edge); --n-deep: var(--ae-green-deep); }
html body .notification-error,
html body .notification-warning { --n-fill: var(--ae-orange-fill); --n-edge: var(--ae-orange-edge); --n-deep: var(--ae-orange-deep); }
html body .notification-info { --n-fill: var(--ae-blue-fill); --n-edge: var(--ae-blue-edge); --n-deep: var(--ae-blue-deep); }
html body .notification-debug { --n-fill: var(--ae-surface-2); --n-edge: var(--ae-line); --n-deep: var(--ae-ink-soft); }

html body .notification-success,
html body .notification-error,
html body .notification-warning,
html body .notification-info,
html body .notification-debug {
    background: var(--n-fill) !important;
    border-color: var(--n-edge) !important;
    color: var(--n-deep) !important;
}

html body .notification .notification-content {
    gap: 10px;
}

html body .notification .notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--ae-radius-sm);
    background: var(--n-deep);
    color: var(--n-fill);
    font-size: 0.8125rem;
}

html body .notification .notification-close {
    width: 24px;
    height: 24px;
    border-radius: var(--ae-radius-xs);
    color: var(--n-deep);
    opacity: 0.6;
}

html body .notification .notification-close:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--n-deep) 10%, transparent);
}

html body .notification .notification-action {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: none;
    border-radius: var(--ae-radius-xs);
    background: var(--n-deep);
    color: var(--n-fill);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

html body .notification .notification-action:hover {
    opacity: 0.9;
    color: var(--n-fill);
    text-decoration: none;
}

/* ==========================================================================
   25. Audio : zone d'envoi et bloc micro arrondis comme Document ; bouton
   « Démarrer l'enregistrement » de la charte (orange pendant l'enregistrement)
   ========================================================================== */
body.ae-refresh.studio-body .playground-page .playground-card-body--has-audio-source.playground-card-body--empty-upload .playground-dropzone,
body.ae-refresh.studio-body .playground-page .playground-card-body--has-audio-source.playground-card-body--empty-live .playground-live,
body.ae-refresh.studio-body .playground-page .playground-card-body--empty-live .playground-live,
body.ae-refresh.studio-body .playground-page .playground-live.has-take,
body.ae-refresh.studio-body .playground-page .playground-live.is-recording {
    border-radius: var(--ae-radius-xl) !important;
}

body.ae-refresh.studio-body .playground-page #studio-start-record {
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ae-radius) !important;
    font-size: 0.875rem;
}

body.ae-refresh.studio-body .playground-page .playground-live.is-recording #studio-start-record {
    background: var(--ae-orange-deep) !important;
    box-shadow: 0 10px 24px -12px var(--ae-orange-shadow);
}

html.dark body.ae-refresh.studio-body .playground-page .playground-live.is-recording #studio-start-record {
    color: #2a1c17 !important;
}

/* ==========================================================================
   26. Cases « score de confiance » (et options OCR) : lisibles en mode sombre.
   La coche gardait son trait marine sur un fond bleu nuit (invisible).
   ========================================================================== */
html.dark body.ae-refresh.studio-body .playground-config-group input[type="checkbox"] {
    border-color: var(--ae-ink-faint) !important;
    background-color: var(--ae-surface-3) !important;
}

html.dark body.ae-refresh.studio-body .playground-config-group input[type="checkbox"]:hover {
    border-color: var(--ae-ink-muted) !important;
    background-color: var(--ae-hover) !important;
}

html.dark body.ae-refresh.studio-body .playground-config-group input[type="checkbox"]:checked,
html.dark body.ae-refresh.studio-body .playground-config-group input[type="checkbox"]:checked:hover {
    border-color: var(--ae-accent) !important;
    background-color: var(--ae-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1120' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   27. Bouton replier la sidebar : en mode sombre, l'icône reste visible au survol
   ========================================================================== */
html.dark body.ae-refresh .sidebar .sidebar-toggle--in-head:hover,
html.dark body.ae-refresh .sidebar .sidebar-toggle--in-head:focus-visible {
    color: var(--ae-ink);
    background: var(--ae-hover);
    border-color: transparent;
}

/* ==========================================================================
   28. Contexte : un seul sélecteur (organisation + espace de travail) qui
   ouvre un panneau à deux sections, au lieu de deux lignes déroulantes.
   ========================================================================== */
body.ae-refresh.studio-body .studio-ctx {
    position: relative;
    margin: 0 14px 10px;
}

/* Même famille visuelle que les onglets : pas de carte blanche ni d'ombre,
   simple contour fin qui s'éclaircit au survol. */
body.ae-refresh.studio-body .studio-ctx-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 7px 10px 7px 8px;
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius);
    background: transparent;
    box-shadow: none;
    color: var(--ae-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ae-ease), border-color var(--ae-ease), box-shadow var(--ae-ease);
}

body.ae-refresh.studio-body .studio-ctx-trigger:hover {
    border-color: var(--ae-line-strong);
    background: var(--ae-hover);
}

body.ae-refresh.studio-body .studio-ctx-trigger[aria-expanded="true"] {
    border-color: var(--ae-accent-ring);
    background: var(--ae-hover);
}

body.ae-refresh.studio-body .studio-ctx-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh.studio-body .studio-ctx-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ae-radius-sm);
    background: var(--ae-cta-gradient);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
}

body.ae-refresh.studio-body .studio-ctx-avatar--personal {
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
}

body.ae-refresh.studio-body .studio-ctx-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.ae-refresh.studio-body .studio-ctx-org {
    overflow: hidden;
    color: var(--ae-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ae-refresh.studio-body .studio-ctx-ws {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--ae-ink-muted);
    font-size: 0.75rem;
    line-height: 1.25;
}

body.ae-refresh.studio-body .studio-ctx-ws > i {
    flex: none;
    font-size: 0.625rem;
    color: var(--ae-ink-faint);
}

body.ae-refresh.studio-body .studio-ctx-ws > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ae-refresh.studio-body .studio-ctx-chevron {
    flex: none;
    font-size: 0.625rem;
    color: var(--ae-ink-faint);
    transition: transform var(--ae-ease);
}

body.ae-refresh.studio-body .studio-ctx-trigger[aria-expanded="true"] .studio-ctx-chevron {
    transform: rotate(180deg);
}

body.ae-refresh.studio-body .studio-ctx-panel {
    position: fixed;
    z-index: 200;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 6px;
    background: var(--ae-surface);
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    box-shadow: var(--ae-shadow-lg);
    animation: ae-pop-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.ae-refresh.studio-body .studio-ctx-panel[hidden] {
    display: none;
}

body.ae-refresh.studio-body .studio-ctx-group + .studio-ctx-group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ae-line-soft);
}

body.ae-refresh.studio-body .studio-ctx-group-title {
    margin: 0;
    padding: 6px 10px 4px;
    color: var(--ae-ink-faint);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.ae-refresh.studio-body .studio-ctx-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.ae-refresh.studio-body .studio-ctx-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 4px 10px 4px 6px;
    border-radius: var(--ae-radius-sm);
    color: var(--ae-ink);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-refresh.studio-body .studio-ctx-option:hover {
    background: var(--ae-surface-2);
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .studio-ctx-option.is-active {
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    font-weight: 600;
}

body.ae-refresh.studio-body .studio-ctx-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh.studio-body .studio-ctx-option-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--ae-radius-xs);
    background: var(--ae-surface-3);
    color: var(--ae-ink-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

body.ae-refresh.studio-body .studio-ctx-option.is-active .studio-ctx-option-avatar {
    background: var(--ae-cta-gradient);
    color: #ffffff;
}

body.ae-refresh.studio-body .studio-ctx-option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ae-refresh.studio-body .studio-ctx-option-check {
    flex: none;
    font-size: 0.6875rem;
    color: var(--ae-accent-ink);
    opacity: 0;
}

body.ae-refresh.studio-body .studio-ctx-option.is-active .studio-ctx-option-check {
    opacity: 1;
}

body.ae-refresh.studio-body .studio-ctx-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    margin-top: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--ae-radius-sm);
    background: transparent;
    color: var(--ae-accent-ink);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--ae-ease);
}

body.ae-refresh.studio-body .studio-ctx-action:hover {
    background: var(--ae-surface-2);
}

body.ae-refresh.studio-body .studio-ctx-action i {
    font-size: 0.6875rem;
}

/* Barre repliée (bureau) : une seule pastille organisation, le détail s'ouvre à droite */
@media (min-width: 1025px) {
    html body.ae-refresh.studio-body.sidebar-collapsed:not(.sidebar-peek) .studio-ctx {
        display: flex;
        justify-content: center;
        margin: 6px 0 8px;
    }

    html body.ae-refresh.studio-body.sidebar-collapsed:not(.sidebar-peek) .studio-ctx-trigger {
        width: 40px;
        min-height: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    html body.ae-refresh.studio-body.sidebar-collapsed:not(.sidebar-peek) .studio-ctx-trigger .studio-ctx-avatar {
        width: 34px;
        height: 34px;
    }

    html body.ae-refresh.studio-body.sidebar-collapsed:not(.sidebar-peek) .studio-ctx-text,
    html body.ae-refresh.studio-body.sidebar-collapsed:not(.sidebar-peek) .studio-ctx-chevron {
        display: none;
    }
}

/* ==========================================================================
   29. Playground : choix du modèle en cartes pleines (bleu = OCR, vert = audio),
   comme les cartes en vedette de « Nos modèles » ; la carte choisie a un liseré.
   ========================================================================== */
body.ae-refresh.studio-body .playground-model-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
}

body.ae-refresh.studio-body .playground-model-cards-empty {
    margin: 0;
    color: var(--ae-ink-muted);
    font-size: 0.8125rem;
}

body.ae-refresh.studio-body .playground-model-card {
    --c-fill: var(--ae-blue-fill);
    --c-edge: var(--ae-blue-edge);
    --c-glow: var(--ae-blue-glow);
    --c-deep: var(--ae-blue-deep);
    --c-shadow: var(--ae-blue-shadow);
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 8px 34px 8px 8px;
    border: 1px solid var(--c-edge);
    border-radius: var(--ae-radius-lg);
    background:
        radial-gradient(120% 120% at 100% 0%, var(--c-glow) 0%, transparent 65%),
        var(--c-fill);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    color: var(--c-deep);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow var(--ae-ease), border-color var(--ae-ease);
}

body.ae-refresh.studio-body .playground-model-cards--audio .playground-model-card {
    --c-fill: var(--ae-green-fill);
    --c-edge: var(--ae-green-edge);
    --c-glow: var(--ae-green-glow);
    --c-deep: var(--ae-green-deep);
    --c-shadow: var(--ae-green-shadow);
}

/* Tous les états restent dessinés à l'intérieur de la carte : un anneau
   extérieur était rogné par le panneau (bord gauche contre la zone d'envoi). */
body.ae-refresh.studio-body .playground-model-card:hover {
    border-color: color-mix(in srgb, var(--c-deep) 45%, var(--c-edge));
}

body.ae-refresh.studio-body .playground-model-card:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--ae-focus);
}

body.ae-refresh.studio-body .playground-model-card[aria-pressed="true"] {
    border-color: var(--c-deep);
    box-shadow: inset 0 0 0 0.5px var(--c-deep);
}

body.ae-refresh.studio-body .playground-model-card-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--c-deep);
    color: var(--c-fill);
    font-size: 0.875rem;
}

body.ae-refresh.studio-body .playground-model-card-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--c-deep);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

body.ae-refresh.studio-body .playground-model-card-check {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-deep) 40%, transparent);
    color: transparent;
    font-size: 0.5625rem;
}

body.ae-refresh.studio-body .playground-model-card[aria-pressed="true"] .playground-model-card-check {
    background: var(--c-deep);
    box-shadow: none;
    color: var(--c-fill);
}

body.ae-refresh.studio-body .playground-config-row--models {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

body.ae-refresh.studio-body .playground-launch-field--models {
    flex: 1 1 360px;
    min-width: 0;
}

body.ae-refresh.studio-body .playground-bar .playground-launch-field--models {
    flex: 1 1 420px;
    flex-direction: column;
    align-items: stretch;
    max-width: 640px;
    gap: 8px;
}

body.ae-refresh.studio-body .playground-model-cards--bar {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

/* ==========================================================================
   30. Contexte, barre repliée : le panneau s'ouvre au survol à droite de la
   barre, avec le même rendu que les libellés des autres onglets.
   ========================================================================== */
body.ae-refresh.studio-body .studio-ctx-panel.studio-ctx-panel--flyout {
    padding: 4px;
    border-radius: var(--ae-radius);
    animation: ae-flyout-in 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 1025px) {
    html body.ae-refresh.studio-body.sidebar-collapsed:not(.sidebar-peek) .studio-ctx-trigger:hover,
    html body.ae-refresh.studio-body.sidebar-collapsed:not(.sidebar-peek) .studio-ctx-trigger[aria-expanded="true"] {
        background: var(--ae-hover);
    }
}

/* ==========================================================================
   31. Organisations / espaces de travail : en-tête avec récapitulatif et
   cartes cliquables (toute la carte ouvre le détail, plus de crayon caché).
   ========================================================================== */
body.ae-refresh.studio-body .scope-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 24px;
}

body.ae-refresh.studio-body .scope-page-heading {
    flex: 1 1 360px;
    min-width: 0;
}

body.ae-refresh.studio-body .scope-page-title {
    margin: 0 0 6px;
    color: var(--ae-ink);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

body.ae-refresh.studio-body .scope-page-desc {
    max-width: 640px;
    margin: 0;
    color: var(--ae-ink-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

body.ae-refresh.studio-body .scope-page-summary {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    overflow: hidden;
}

body.ae-refresh.studio-body .scope-page-summary > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 110px;
    padding: 10px 18px;
}

body.ae-refresh.studio-body .scope-page-summary > div + div {
    border-left: 1px solid var(--ae-line-soft);
}

body.ae-refresh.studio-body .scope-page-summary dt {
    color: var(--ae-ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.ae-refresh.studio-body .scope-page-summary dd {
    margin: 0;
    color: var(--ae-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

body.ae-refresh.studio-body .scope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: 16px;
}

body.ae-refresh.studio-body .scope-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 18px 18px 14px;
    border: 1px solid var(--ae-line);
    border-radius: var(--ae-radius-lg);
    background: var(--ae-surface);
    transition: border-color var(--ae-ease), box-shadow var(--ae-ease), transform var(--ae-ease);
}

body.ae-refresh.studio-body .scope-card:hover {
    border-color: var(--ae-line-strong);
    box-shadow: var(--ae-shadow-md);
    transform: translateY(-1px);
}

body.ae-refresh.studio-body .scope-card:focus-within {
    border-color: var(--ae-accent-ring);
}

body.ae-refresh.studio-body .scope-card.is-current {
    border-color: var(--ae-accent-ring);
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
}

body.ae-refresh.studio-body .scope-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

body.ae-refresh.studio-body .scope-card-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ae-radius);
    background: var(--ae-cta-gradient);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

body.ae-refresh.studio-body .scope-card-avatar--workspace {
    background: var(--ae-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ae-accent-ring);
    color: var(--ae-accent-ink);
}

body.ae-refresh.studio-body .scope-card-titles {
    flex: 1 1 auto;
    min-width: 0;
}

body.ae-refresh.studio-body .scope-card-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

body.ae-refresh.studio-body .scope-card-link {
    display: block;
    overflow: hidden;
    color: var(--ae-ink);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Lien étiré : toute la carte est cliquable */
body.ae-refresh.studio-body .scope-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

body.ae-refresh.studio-body .scope-card-link:focus-visible {
    outline: none;
}

body.ae-refresh.studio-body .scope-card-link:focus-visible::after {
    box-shadow: 0 0 0 3px var(--ae-focus);
    border-radius: var(--ae-radius-lg);
}

body.ae-refresh.studio-body .scope-card-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ae-ink-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.ae-refresh.studio-body .scope-card-sub i {
    color: var(--ae-ink-faint);
    font-size: 0.6875rem;
}

body.ae-refresh.studio-body .scope-card-badge {
    flex: none;
    padding: 3px 9px;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    font-size: 0.6875rem;
    font-weight: 700;
}

body.ae-refresh.studio-body .scope-card-actions {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    gap: 2px;
}

body.ae-refresh.studio-body .scope-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--ae-radius-sm);
    background: transparent;
    color: var(--ae-ink-faint);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color var(--ae-ease), color var(--ae-ease);
}

body.ae-refresh.studio-body .scope-card-action:hover,
body.ae-refresh.studio-body .scope-card-action:focus-visible {
    outline: none;
    background: var(--ae-hover);
    color: var(--ae-ink);
}

body.ae-refresh.studio-body .scope-card-action--danger:hover,
body.ae-refresh.studio-body .scope-card-action--danger:focus-visible {
    background: var(--ae-orange-fill);
    color: var(--ae-orange-deep);
}

body.ae-refresh.studio-body .scope-card-desc {
    display: -webkit-box;
    min-height: 2.9em;
    margin: 0;
    overflow: hidden;
    color: var(--ae-ink-soft);
    font-size: 0.8125rem;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.ae-refresh.studio-body .scope-card-desc.is-empty {
    color: var(--ae-ink-faint);
    font-style: italic;
}

/* Les séparateurs sont l'espace de 1px entre cellules : la grille peut passer
   de 4 colonnes à 2×2 sans bordure orpheline. */
body.ae-refresh.studio-body .scope-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--ae-line-soft);
    border-radius: var(--ae-radius);
    background: var(--ae-line-soft);
}

body.ae-refresh.studio-body .scope-card-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 9px 12px;
    background: var(--ae-surface-2);
}

body.ae-refresh.studio-body .scope-card-stat dt {
    overflow: hidden;
    color: var(--ae-ink-muted);
    font-size: 0.6875rem;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ae-refresh.studio-body .scope-card-stat dd {
    margin: 0;
    overflow: hidden;
    color: var(--ae-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ae-refresh.studio-body .scope-card-limit {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.ae-refresh.studio-body .scope-card-limit-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--ae-ink-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

body.ae-refresh.studio-body .scope-card-limit-bar {
    height: 6px;
    overflow: hidden;
    border-radius: var(--ae-radius-pill);
    background: var(--ae-surface-3);
}

body.ae-refresh.studio-body .scope-card-limit-bar > span {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: inherit;
    background: var(--ae-accent);
}

body.ae-refresh.studio-body .scope-card-limit.is-warning .scope-card-limit-bar > span {
    background: var(--ae-orange-deep);
}

body.ae-refresh.studio-body .scope-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ae-line-soft);
}

body.ae-refresh.studio-body .scope-card-meta {
    min-width: 0;
    overflow: hidden;
    color: var(--ae-ink-faint);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ae-refresh.studio-body .scope-card-open {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ae-accent-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

body.ae-refresh.studio-body .scope-card-open i {
    font-size: 0.6875rem;
    transition: transform var(--ae-ease);
}

body.ae-refresh.studio-body .scope-card:hover .scope-card-open i {
    transform: translateX(3px);
}

/* Aide affichée à côté des cartes quand il y en a peu (évite une page vide) */
body.ae-refresh.studio-body .scope-tip {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 18px;
    border: 1px dashed var(--ae-line-strong);
    border-radius: var(--ae-radius-lg);
    background: transparent;
}

body.ae-refresh.studio-body .scope-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ae-radius-sm);
    background: var(--ae-accent-soft);
    color: var(--ae-accent-ink);
    font-size: 0.8125rem;
}

body.ae-refresh.studio-body .scope-tip-title {
    margin: 0;
    color: var(--ae-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

body.ae-refresh.studio-body .scope-tip-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ae-refresh.studio-body .scope-tip-list li {
    position: relative;
    padding-left: 16px;
    color: var(--ae-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

body.ae-refresh.studio-body .scope-tip-list li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ae-ink-faint);
}

/* Page détail organisation : la grille remplace le tableau des espaces */
body.ae-refresh.studio-body .org-detail-section > .scope-grid {
    margin-top: 4px;
}

@media (max-width: 640px) {
    body.ae-refresh.studio-body .scope-grid {
        grid-template-columns: 1fr;
    }

    body.ae-refresh.studio-body .scope-page-summary {
        width: 100%;
    }

    body.ae-refresh.studio-body .scope-page-summary > div {
        flex: 1 1 45%;
    }
}

/* ==========================================================================
   32. Bouton flottant « Créer » : masqué tant que la liste est vide (l'état
   vide porte déjà son bouton centré). Couvre aussi les résultats rechargés
   en AJAX (filtres des clés API).
   ========================================================================== */
.dashboard-page:has(#keys-results-container > .dashboard-card .dashboard-empty-state) #toggle-create-form {
    display: none;
}

/* ==========================================================================
   Bordure « spotlight » : au survol, un reflet lumineux suit le pointeur
   le long de la bordure uniquement (l'intérieur de la carte ne change pas).
   Position pilotée par card-spotlight.js (--ae-spot-x / --ae-spot-y).
   ========================================================================== */
body.ae-refresh .model-card.card-featured,
body.ae-refresh .model-card.card-frontier,
body.ae-refresh.studio-body .usage-spend-card,
body.ae-refresh.studio-body .dashboard-account-balance-box,
body.ae-refresh.studio-body .playground-model-card,
body.ae-refresh.studio-body .ppl-callout {
    --ae-spot-spark: #3d7bff;
    --ae-spot-deep: var(--c-deep, var(--ae-blue-deep));
    --ae-spot-size: 210px;
    position: relative;
}

body.ae-refresh .card-green.model-card,
body.ae-refresh.studio-body .playground-model-cards--audio .playground-model-card {
    --ae-spot-spark: #2fbf62;
}

body.ae-refresh .card-orange.model-card {
    --ae-spot-spark: #ff8a3d;
}

body.ae-refresh .card-pink.model-card {
    --ae-spot-spark: #ff5fa2;
}

body.ae-refresh.studio-body .usage-spend-card,
body.ae-refresh.studio-body .dashboard-account-balance-box,
body.ae-refresh.studio-body .ppl-callout {
    --ae-spot-deep: var(--ae-blue-deep);
}

html.dark body.ae-refresh .model-card.card-featured,
html.dark body.ae-refresh .model-card.card-frontier,
html.dark body.ae-refresh.studio-body .usage-spend-card,
html.dark body.ae-refresh.studio-body .dashboard-account-balance-box,
html.dark body.ae-refresh.studio-body .playground-model-card,
html.dark body.ae-refresh.studio-body .ppl-callout {
    --ae-spot-spark: #7fa8ff;
}

html.dark body.ae-refresh .card-green.model-card,
html.dark body.ae-refresh.studio-body .playground-model-cards--audio .playground-model-card {
    --ae-spot-spark: #6fe39a;
}

html.dark body.ae-refresh .card-orange.model-card {
    --ae-spot-spark: #ffad73;
}

html.dark body.ae-refresh .card-pink.model-card {
    --ae-spot-spark: #ff8fc0;
}

body.ae-refresh .model-card.card-featured::after,
body.ae-refresh .model-card.card-frontier::after,
body.ae-refresh.studio-body .usage-spend-card::after,
body.ae-refresh.studio-body .dashboard-account-balance-box::after,
body.ae-refresh.studio-body .playground-model-card::after,
body.ae-refresh.studio-body .ppl-callout::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: 2px;
    border-radius: inherit;
    background: radial-gradient(
        var(--ae-spot-size) circle at var(--ae-spot-x, 50%) var(--ae-spot-y, 50%),
        var(--ae-spot-spark) 0%,
        color-mix(in srgb, var(--ae-spot-spark) 55%, var(--ae-spot-deep)) 22%,
        color-mix(in srgb, var(--ae-spot-deep) 45%, transparent) 46%,
        transparent 72%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ae-spot-spark) 70%, transparent));
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}

body.ae-refresh .model-card.card-featured.is-spot-active::after,
body.ae-refresh .model-card.card-frontier.is-spot-active::after,
body.ae-refresh.studio-body .usage-spend-card.is-spot-active::after,
body.ae-refresh.studio-body .dashboard-account-balance-box.is-spot-active::after,
body.ae-refresh.studio-body .playground-model-card.is-spot-active::after,
body.ae-refresh.studio-body .ppl-callout.is-spot-active::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.ae-refresh .model-card.card-featured::after,
    body.ae-refresh .model-card.card-frontier::after,
    body.ae-refresh.studio-body .usage-spend-card::after,
    body.ae-refresh.studio-body .dashboard-account-balance-box::after,
    body.ae-refresh.studio-body .playground-model-card::after,
    body.ae-refresh.studio-body .ppl-callout::after {
        transition: none;
    }
}

/* Accueil : même reflet de bordure que les cartes de modèles.
   Documentation = bleu, Modèles = vert, Intégration = rouge, Playground = violet. */
body.ae-refresh .gs-organic-card {
    --ae-spot-spark: #3d7bff;
    --ae-spot-deep: var(--ae-blue-deep);
    --ae-spot-size: 210px;
    position: relative;
    overflow: visible;
}

body.ae-refresh .gs-organic-card--models {
    --ae-spot-spark: #2fbf62;
    --ae-spot-deep: var(--ae-green-deep);
}

body.ae-refresh .gs-organic-card--integr {
    --ae-spot-spark: #ff4d4d;
    --ae-spot-deep: var(--ae-orange-deep);
}

body.ae-refresh .gs-organic-card--playground {
    --ae-spot-spark: #8b5cf6;
    --ae-spot-deep: #4b0082;
}

html.dark body.ae-refresh .gs-organic-card {
    --ae-spot-spark: #7fa8ff;
}

html.dark body.ae-refresh .gs-organic-card--models {
    --ae-spot-spark: #6fe39a;
}

html.dark body.ae-refresh .gs-organic-card--integr {
    --ae-spot-spark: #ff8f8f;
}

html.dark body.ae-refresh .gs-organic-card--playground {
    --ae-spot-spark: #b794ff;
}

body.ae-refresh .gs-organic-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: 2px;
    border-radius: inherit;
    background: radial-gradient(
        var(--ae-spot-size) circle at var(--ae-spot-x, 50%) var(--ae-spot-y, 50%),
        var(--ae-spot-spark) 0%,
        color-mix(in srgb, var(--ae-spot-spark) 55%, var(--ae-spot-deep)) 22%,
        color-mix(in srgb, var(--ae-spot-deep) 45%, transparent) 46%,
        transparent 72%
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ae-spot-spark) 70%, transparent));
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}

body.ae-refresh .gs-organic-card.is-spot-active::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    body.ae-refresh .gs-organic-card::after {
        transition: none;
    }
}

/* ==========================================================================
   33. Audit boutons : arrondis + survol de bordure partout
   ========================================================================== */
body.ae-refresh .ghost-btn.playground-results-action-btn,
body.ae-refresh .playground-preview-doc-pdf-nav-btn {
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius) !important;
    background: var(--ae-surface);
    color: var(--ae-ink);
    transition: background-color var(--ae-ease), border-color var(--ae-ease), color var(--ae-ease), box-shadow var(--ae-ease);
}

body.ae-refresh .ghost-btn.playground-results-action-btn:hover:not(:disabled),
body.ae-refresh .playground-preview-doc-pdf-nav-btn:hover:not(:disabled) {
    border-color: var(--ae-ink-faint);
    background: var(--ae-surface-2);
    color: var(--ae-ink);
}

body.ae-refresh .ghost-btn.playground-results-action-btn:focus-visible,
body.ae-refresh .playground-preview-doc-pdf-nav-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-accent-ring, rgba(37, 99, 235, 0.25));
}

html.dark body.ae-refresh .playground-preview-doc-pdf-nav-btn {
    background: var(--ae-surface);
    color: var(--ae-ink);
}

/* ==========================================================================
   34. Logs — sélecteur « nombre de logs à afficher » : boutons du nouveau
   design (arrondis, bordure fine, survol de bordure) ; l'option retenue est
   en dégradé marine comme le bouton d'action principal.
   ========================================================================== */
body.ae-refresh .logs-limit-buttons {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

body.ae-refresh .logs-limit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius);
    background: var(--ae-surface);
    color: var(--ae-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--ae-shadow-xs);
    transition: background-color var(--ae-ease), border-color var(--ae-ease), color var(--ae-ease), box-shadow var(--ae-ease), filter var(--ae-ease);
}

body.ae-refresh .logs-limit-btn:hover {
    border-color: var(--ae-ink-faint);
    background: var(--ae-surface-2);
    color: var(--ae-ink);
}

body.ae-refresh .logs-limit-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

body.ae-refresh .logs-limit-btn-active,
html.dark body.ae-refresh .logs-limit-btn-active {
    border-color: transparent;
    background: var(--ae-cta-gradient);
    color: #ffffff;
    box-shadow: var(--ae-cta-shadow);
}

body.ae-refresh .logs-limit-btn-active:hover,
html.dark body.ae-refresh .logs-limit-btn-active:hover {
    border-color: transparent;
    background: var(--ae-cta-gradient);
    color: #ffffff;
    filter: brightness(1.1);
    box-shadow: var(--ae-cta-shadow-hover);
}

/* ==========================================================================
   35. Logs — squelette de chargement (lazy load) : le tableau est déjà
   construit (en-tête + lignes vides), chaque ligne porte un effet de
   chargement, et la lueur se propage de ligne en ligne (quinconce).
   ========================================================================== */
body.ae-refresh .logs-toolbar--skeleton {
    pointer-events: none;
}

body.ae-refresh .logs-skeleton {
    display: inline-block;
    vertical-align: middle;
    height: 14px;
    border-radius: var(--ae-radius-pill);
    background: linear-gradient(
        100deg,
        var(--ae-surface-3) 25%,
        color-mix(in srgb, var(--ae-line) 75%, var(--ae-surface)) 50%,
        var(--ae-surface-3) 75%
    );
    background-size: 240% 100%;
    animation: ae-skeleton-shimmer 1.6s ease-in-out infinite;
    animation-delay: var(--sk-delay, 0s);
}

html.dark body.ae-refresh .logs-skeleton {
    background: linear-gradient(
        100deg,
        var(--ae-surface-2) 25%,
        color-mix(in srgb, var(--ae-line-strong) 80%, var(--ae-surface)) 50%,
        var(--ae-surface-2) 75%
    );
    background-size: 240% 100%;
}

@keyframes ae-skeleton-shimmer {
    from { background-position: 180% 0; }
    to { background-position: -80% 0; }
}

body.ae-refresh .logs-skeleton--count { width: 140px; height: 16px; }
body.ae-refresh .logs-skeleton--btn { width: 96px; height: 34px; border-radius: var(--ae-radius); }
body.ae-refresh .logs-skeleton--badge { width: 68px; height: 20px; }

/* Le tableau garde sa structure : en-tête visible, lignes de hauteur réelle,
   séparateurs et fond de ligne qui pulse en vague. */
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row {
    animation: ae-skeleton-row-wave 1.6s ease-in-out infinite;
    animation-delay: var(--sk-delay, 0s);
}

body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row td {
    padding-top: 15px;
    padding-bottom: 15px;
}

body.ae-refresh .logs-table--skeleton .logs-skeleton {
    max-width: 100%;
}

@keyframes ae-skeleton-row-wave {
    0%, 100% { background-color: transparent; }
    50% { background-color: color-mix(in srgb, var(--ae-surface-2) 70%, transparent); }
}

/* Décalage en quinconce : la vague descend de ligne en ligne. */
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(1)  { --sk-delay: 0s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(2)  { --sk-delay: 0.08s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(3)  { --sk-delay: 0.16s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(4)  { --sk-delay: 0.24s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(5)  { --sk-delay: 0.32s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(6)  { --sk-delay: 0.40s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(7)  { --sk-delay: 0.48s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(8)  { --sk-delay: 0.56s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(9)  { --sk-delay: 0.64s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(10) { --sk-delay: 0.72s; }
body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row:nth-child(n+11) { --sk-delay: 0.8s; }

/* Léger décalage horizontal entre colonnes pour un rendu plus organique. */
body.ae-refresh .logs-table--skeleton tbody td:nth-child(2n) .logs-skeleton { animation-delay: calc(var(--sk-delay, 0s) + 0.06s); }
body.ae-refresh .logs-table--skeleton tbody td:nth-child(3n) .logs-skeleton { animation-delay: calc(var(--sk-delay, 0s) + 0.12s); }

body.ae-refresh .logs-skeleton-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--ae-line-soft);
    font-size: 0.8125rem;
    color: var(--ae-ink-muted);
}

/* Voile discret pendant un rafraîchissement AJAX (recherche, filtres) */
body.ae-refresh #logs-results.logs-results--loading {
    opacity: 0.55;
    transition: opacity var(--ae-ease);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    body.ae-refresh .logs-skeleton,
    body.ae-refresh .logs-table--skeleton tbody tr.logs-skeleton-row {
        animation: none;
    }
}

/* ==========================================================================
   36. Tableaux — colonne « Actions » : bouton unique (engrenage) qui ouvre la
   modale de gestion, et troncature des colonnes de noms.
   ========================================================================== */
body.ae-refresh .keys-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ae-line-strong);
    border-radius: var(--ae-radius);
    background: var(--ae-surface);
    color: var(--ae-ink-soft);
    box-shadow: var(--ae-shadow-xs);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color var(--ae-ease), border-color var(--ae-ease),
        color var(--ae-ease), box-shadow var(--ae-ease), transform var(--ae-ease);
}

body.ae-refresh .keys-manage-btn:hover {
    border-color: var(--ae-ink-faint);
    background: var(--ae-surface-2);
    color: var(--ae-ink);
    transform: rotate(45deg);
}

body.ae-refresh .keys-manage-btn:active {
    transform: rotate(45deg) scale(0.96);
}

body.ae-refresh .keys-manage-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ae-focus);
}

html.dark body.ae-refresh .keys-manage-btn {
    background: var(--ae-surface);
    color: var(--ae-ink-soft);
}

/* Bloc « danger » dans la modale de gestion d'une clé */
body.ae-refresh .keys-edit-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #b42318 30%, transparent);
    border-radius: var(--ae-radius);
    background: color-mix(in srgb, #b42318 6%, transparent);
}

body.ae-refresh .keys-edit-danger[hidden] {
    display: none;
}

body.ae-refresh .keys-edit-danger-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.ae-refresh .keys-edit-danger-text strong {
    font-size: 0.875rem;
    color: #9b1c1c;
}

body.ae-refresh .keys-edit-danger-text small {
    font-size: 0.8125rem;
    color: var(--ae-ink-muted);
}

html.dark body.ae-refresh .keys-edit-danger-text strong {
    color: #ff8f8f;
}

/* Troncature d'une valeur de cellule : « … » uniquement si le texte dépasse. */
body.ae-refresh .cell-truncate {
    display: inline-block;
    max-width: var(--cell-truncate-max, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

body.ae-refresh .keys-table td.cell-truncate-cell {
    max-width: var(--cell-truncate-max, 220px);
}

/* Largeurs par contexte */
body.ae-refresh .keys-table-api-keys .keys-cell-label { --cell-truncate-max: 170px; }
body.ae-refresh .private-admin-users-table .cell-truncate { --cell-truncate-max: 150px; }
body.ae-refresh .org-detail-members-table .cell-truncate,
body.ae-refresh .org-detail-invitations-table .cell-truncate { --cell-truncate-max: 200px; }

/* Dans une cellule flex, autoriser la troncature (min-width: 0). */
body.ae-refresh .org-detail-member-cell,
body.ae-refresh .org-detail-member-info {
    min-width: 0;
}

/* ==========================================================================
   37. Arrondis globaux — rattrapage : plus aucune boîte ni bouton à angles
   carrés. On aligne tout sur le nouveau design (rayon 10 px, rayons plus
   petits 8 px pour les petits éléments, 14 px pour les grandes cartes).
   ========================================================================== */

/* --- Boutons / contrôles carrés (état, filtres, segments, champs) --- */
body.ae-refresh .sidebar-status-link,
body.ae-refresh .sidebar-status-alert-trigger,
body.ae-refresh .sidebar-status-bar,
body.ae-refresh .topbar-lang-btn,
body.ae-refresh .register-wizard-step,
body.ae-refresh .keys-double-slider-track,
body.ae-refresh .keys-double-slider .keys-range::-webkit-slider-thumb,
body.ae-refresh .keys-double-slider .keys-range::-moz-range-thumb,
body.ae-refresh .org-limit-input,
body.ae-refresh .studio-topbar-selector,
body.ae-refresh .studio-sidebar-scope .studio-scope-link,
body.ae-refresh .studio-sidebar-user-btn,
body.ae-refresh .studio-sidebar-user-avatar,
body.ae-refresh .studio-sidebar-menu-lang .lang-dropdown-trigger,
body.ae-refresh .studio-sidebar-lang .lang-dropdown-trigger,
body.ae-refresh .studio-sidebar-status-theme,
body.ae-refresh .dashboard-account-tabs-indicator {
    border-radius: var(--ae-radius) !important;
}

/* Groupes de boutons : coins extérieurs seulement, pas de carré résiduel */
body.ae-refresh .topbar-lang-btn:first-child { border-top-left-radius: var(--ae-radius) !important; border-bottom-left-radius: var(--ae-radius) !important; }
body.ae-refresh .topbar-lang-btn:last-child { border-top-right-radius: var(--ae-radius) !important; border-bottom-right-radius: var(--ae-radius) !important; }

/* --- Barres, jauges et pastilles (petits rayons) --- */
body.ae-refresh .usage-limit-bar-wrap,
body.ae-refresh .usage-limit-bar,
body.ae-refresh .model-spec-stat-chip-rail,
body.ae-refresh .model-spec-stat-chip-rail-fill,
body.ae-refresh .playground-file-progress-track,
body.ae-refresh .status-hourly-bar,
body.ae-refresh .status-hourly-tooltip,
body.ae-refresh .playground-dropzone-icon-wrap,
body.ae-refresh .playground-live-icon-wrap,
body.ae-refresh .playground-dropzone-cta,
body.ae-refresh .playground-diarization-body,
body.ae-refresh .playground-output-bbox-ref,
body.ae-refresh .playground-run-stat,
body.ae-refresh .oncloud-flow-wrapper {
    border-radius: var(--ae-radius-sm) !important;
}

/* --- Page État de l'API --- */
body.ae-refresh .status-range-segmented,
body.ae-refresh .status-range-btn,
body.ae-refresh .status-page-refresh,
body.ae-refresh .status-page-fetch-error,
body.ae-refresh .status-hourly-bar {
    border-radius: var(--ae-radius) !important;
}
body.ae-refresh .status-range-segmented { padding: 3px; }
body.ae-refresh .status-range-segmented .status-range-btn { border-radius: var(--ae-radius-sm) !important; }

/* --- Grandes cartes et panneaux --- */
body.ae-refresh .status-page-kpi,
body.ae-refresh .status-page-chart-card,
body.ae-refresh .status-page-hourly-card,
body.ae-refresh .gs-organic-card,
body.ae-refresh .gs-organic-icon,
body.ae-refresh .org-detail-card.studio-workspace-card,
body.ae-refresh .usage-keys-empty {
    border-radius: var(--ae-radius-lg) !important;
}
body.ae-refresh .gs-organic-icon { border-radius: var(--ae-radius) !important; }

/* --- Playground : aperçus et vignettes --- */
body.ae-refresh .playground-preview-pdf-thumb,
body.ae-refresh .playground-preview-bbox-tip-inner,
body.ae-refresh .playground-preview-doc-pdf-thumbs-toggle,
body.ae-refresh .playground-preview-doc-pdf-toolbar,
body.ae-refresh .playground-page .playground-files--toolbar .playground-file-remove {
    border-radius: var(--ae-radius-sm) !important;
}

/* --- Studio Playground / Pipelines : onglets, jetons, menus --- */
body.ae-refresh .private-admin-console .usage-period-quick .usage-period-btn,
body.ae-refresh .private-admin-console .usage-period-btn,
body.ae-refresh .private-admin-console .private-admin-tab,
body.ae-refresh .ppl-menu-edit,
body.ae-refresh .ppl-lang-code {
    border-radius: var(--ae-radius) !important;
}
body.ae-refresh .ppl-trial,
body.ae-refresh .ppl-trial .ppl-trial-progress,
body.ae-refresh .ppl-trial .ppl-trial-progress > span {
    border-radius: var(--ae-radius-pill) !important;
}
body.ae-refresh .ppb-port-label,
body.ae-refresh .ppb-viz-page,
body.ae-refresh .ppb-viz-zone,
body.ae-refresh .ppb-viz-word,
body.ae-refresh .ppb-viz-scan,
body.ae-refresh .ppb-viz-wave i,
body.ae-refresh .ppb-token,
body.ae-refresh .ppb-marquee,
body.ae-refresh .pp-schema__tip,
body.ae-refresh .pp-detail__swatch {
    border-radius: var(--ae-radius-sm) !important;
}

/* --- Filet de sécurité : tout bouton dont la classe porte « -btn » --- */
body.ae-refresh button[class*="-btn"],
body.ae-refresh a[class*="-btn"],
body.ae-refresh input[class*="-btn"],
body.ae-refresh [class*="-btn"]:is(button, a, input) {
    border-radius: var(--ae-radius) !important;
}

/* Rattrapage élargi : familles de composants (badges, puces, onglets,
   menus, infobulles, boîtes, cartes, alertes) — arrondis garantis. */
body.ae-refresh [class*="badge"],
body.ae-refresh [class*="chip"],
body.ae-refresh [class*="pill"],
body.ae-refresh .playground-output-tag,
body.ae-refresh .ppg-file-chip,
body.ae-refresh .ppl-share-chip {
    border-radius: var(--ae-radius-pill) !important;
}

body.ae-refresh [class*="-tab"]:not([class*="table"]),
body.ae-refresh [class*="tab-"],
body.ae-refresh .playground-config-segment,
body.ae-refresh .playground-config-segment:last-child {
    border-radius: var(--ae-radius) !important;
}

body.ae-refresh [class*="alert"],
body.ae-refresh [class*="banner"],
body.ae-refresh [class*="callout"],
body.ae-refresh [class*="dropdown"],
body.ae-refresh [class*="popover"],
body.ae-refresh [class*="tooltip"],
body.ae-refresh .tooltiptext,
body.ae-refresh .custom-select-dropdown,
body.ae-refresh .alpha-enhanced-select-dropdown {
    border-radius: var(--ae-radius) !important;
}

body.ae-refresh [class*="-box"],
body.ae-refresh .studio-panel,
body.ae-refresh .studio-modal-box,
body.ae-refresh .page-404-panel {
    border-radius: var(--ae-radius-lg) !important;
}

body.ae-refresh [class*="-card"]:not([class*="-card-body"]):not([class*="-card-head"]),
body.ae-refresh .studio-card-item {
    border-radius: var(--ae-radius-lg) !important;
}

/* Le texte du nom de modèle (overflow: hidden) ne doit pas être arrondi :
   les coins rognaient les lettres. */
html body.ae-refresh .playground-model-cards .playground-model-card > span.playground-model-card-name {
    border-radius: 0 !important;
}
html body.ae-refresh .playground-model-cards .playground-model-card > span.playground-model-card-check {
    border-radius: 50% !important;
}

body.ae-refresh .ppb-stage,
body.ae-refresh .pp-schema__stage,
body.ae-refresh .ppb-stage.is-drop {
    border-radius: var(--ae-radius-lg) !important;
}

/* ==========================================================================
   38. Bordure « spotlight » partout : le reflet lumineux qui suit le pointeur
   le long de la bordure (comme les cartes de la page Getting Started) est
   étendu aux boutons, cartes, boîtes, panneaux, onglets et pastilles.
   Le reflet est une couche enfant .ae-spot-layer (créée par card-spotlight.js).
   ========================================================================== */
body.ae-refresh .ae-spot-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 2px;
    border-radius: inherit;
    box-sizing: border-box;
    background: radial-gradient(
        var(--ae-spot-size, 210px) circle at var(--ae-spot-x, 50%) var(--ae-spot-y, 50%),
        var(--ae-spot-spark) 0%,
        color-mix(in srgb, var(--ae-spot-spark) 55%, var(--ae-spot-deep)) 22%,
        color-mix(in srgb, var(--ae-spot-deep) 45%, transparent) 46%,
        transparent 72%
    );
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-size: 100% 100%, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-size: 100% 100%, 100% 100%;
    mask-repeat: no-repeat, no-repeat;
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    filter: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}

/* Repli : si le navigateur ne sait pas découper le masque (l'anneau), on
   n'affiche pas la couche du tout — évite tout rendu « rectangle rempli ». */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    body.ae-refresh .ae-spot-layer {
        display: none !important;
    }
}

/* Couleurs par défaut du reflet */
body.ae-refresh .ae-spot-host,
body.ae-refresh {
    --ae-spot-spark: #3d7bff;
    --ae-spot-deep: var(--ae-blue-deep, #0b1a3a);
}

html.dark body.ae-refresh .ae-spot-host,
html.dark body.ae-refresh {
    --ae-spot-spark: #7fa8ff;
}

/* Boutons colorés : reflet clair pour rester visible sur le fond */
body.ae-refresh .primary-btn:not(.ghost-btn),
body.ae-refresh .keys-revoke-confirm-btn,
body.ae-refresh .org-detail-btn-danger,
body.ae-refresh .dashboard-fab {
    --ae-spot-spark: #b9ccff;
    --ae-spot-deep: #ffffff;
}

body.ae-refresh .keys-revoke-confirm-btn,
body.ae-refresh .org-detail-btn-danger,
body.ae-refresh .studio-btn-danger {
    --ae-spot-spark: #ffb4b4;
    --ae-spot-deep: #ffffff;
}

body.ae-refresh .ae-spot-host.is-spot-active > .ae-spot-layer {
    opacity: 1;
}

/* Les petits éléments gardent un reflet plus serré */
body.ae-refresh [class*="badge"].ae-spot-host,
body.ae-refresh [class*="chip"].ae-spot-host,
body.ae-refresh [class*="pill"].ae-spot-host {
    --ae-spot-size: 120px;
}

@media (prefers-reduced-motion: reduce) {
    body.ae-refresh .ae-spot-layer {
        transition: none;
    }
}

/* ==========================================================================
   39. Transitions de liste (filtres / tri) : éléments fantômes qui s'effacent
   et éléments conservés qui remontent (animation gérée par list-transition.js).
   ========================================================================== */
body.ae-refresh .ae-ghost-item {
    will-change: opacity, transform;
    pointer-events: none !important;
}

body.ae-refresh .ae-ghost-table {
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--ae-surface);
}

body.ae-refresh .ae-ghost-item * {
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.ae-refresh .ae-ghost-item,
    body.ae-refresh .ae-ghost-table {
        transition: none !important;
    }
}

/* ==========================================================================
   40. Tableaux : quand la carte du tableau porte déjà le halo au survol, on
   masque le liseré gauche des lignes survolées (il ferait doublon).
   ========================================================================== */
body.ae-refresh .ae-spot-host.is-spot-active .keys-table tbody tr:hover,
html.dark body.ae-refresh .ae-spot-host.is-spot-active .keys-table tbody tr:hover {
    box-shadow: none !important;
}

/* ==========================================================================
   41. Zones de filtres : menus déroulants qui ne doivent pas être coupés, et
   champs de type date arrondis comme le reste.
   ========================================================================== */

/* Les cartes de filtres ont `overflow: hidden` (arrondis des cartes) : ça
   coupait les menus déroulants. On autorise le débordement sur les cartes qui
   contiennent un de ces menus. */
body.ae-refresh .dashboard-card:has(.keys-filter-dropdown-panel),
body.ae-refresh .dashboard-card:has(.logs-filter-dropdown-panel),
body.ae-refresh .dashboard-card:has(.usage-scope-dropdown-panel),
body.ae-refresh .keys-filters-card {
    overflow: visible !important;
}

/* L'en-tête repliable garde des coins arrondis en haut (le débordement est
   désormais visible, il ne faut pas d'angle carré). */
body.ae-refresh .keys-filters-card > .keys-filters-header {
    border-radius: var(--ae-radius-lg) var(--ae-radius-lg) 0 0;
}

body.ae-refresh .keys-filters-card.keys-filters-card--collapsed > .keys-filters-header {
    border-radius: var(--ae-radius-lg);
}

/* Menus déroulants des filtres : au-dessus de tout le reste et arrondis. */
body.ae-refresh .keys-filter-dropdown-panel,
body.ae-refresh .logs-filter-dropdown-panel,
body.ae-refresh .usage-scope-dropdown-panel {
    z-index: 900 !important;
    border-radius: var(--ae-radius);
    overflow: hidden auto;
}

body.ae-refresh .keys-filter-dropdown-wrap:has(.keys-filter-dropdown-open),
body.ae-refresh .logs-filter-dropdown-wrap:has(.logs-filter-dropdown-open),
body.ae-refresh .usage-scope-dropdown-wrap:has(.usage-scope-dropdown-open),
body.ae-refresh .keys-filter-dropdown-wrap,
body.ae-refresh .logs-filter-dropdown-wrap {
    position: relative;
    z-index: 901;
}

body.ae-refresh .keys-filter-dropdown-panel .filter-dropdown-option,
body.ae-refresh .logs-filter-dropdown-panel .filter-dropdown-option,
body.ae-refresh .usage-scope-dropdown-panel .filter-dropdown-option {
    border-radius: var(--ae-radius-sm);
}

/* Champs date / heure : mêmes arrondis et bordures que les autres champs. */
body.ae-refresh input[type="date"],
body.ae-refresh input[type="datetime-local"],
body.ae-refresh input[type="time"],
body.ae-refresh input[type="month"],
body.ae-refresh input[type="week"] {
    border: 1px solid var(--ae-line-strong) !important;
    border-radius: var(--ae-radius) !important;
    background: var(--ae-surface) !important;
    color: var(--ae-ink) !important;
    transition: border-color var(--ae-ease), box-shadow var(--ae-ease);
}

body.ae-refresh input[type="date"]:focus,
body.ae-refresh input[type="datetime-local"]:focus,
body.ae-refresh input[type="time"]:focus {
    outline: none;
    border-color: #4a6fe0 !important;
    box-shadow: 0 0 0 3px var(--ae-focus) !important;
}

/* ==========================================================================
   42. Pages organisation / espace : arrondis manquants (statistiques,
   avatars) + halo sur ces boîtes.
   ========================================================================== */
body.ae-refresh .org-detail-stat {
    border-radius: var(--ae-radius-lg);
}

body.ae-refresh .org-detail-member-avatar {
    border-radius: var(--ae-radius-sm);
}

body.ae-refresh .org-detail-stat,
body.ae-refresh .org-detail-member-avatar {
    overflow: hidden;
}

/* ==========================================================================
   43. Bouton d'action flottant : pas de halo (il a déjà son ombre CTA ; le
   halo y rendait un artefact visuel).
   ========================================================================== */
body.ae-refresh .dashboard-fab > .ae-spot-layer {
    display: none !important;
}

/* Bouton replier/déplier la sidebar : aucun halo. */
body.ae-refresh .sidebar-toggle > .ae-spot-layer {
    display: none !important;
}

/* ==========================================================================
   44. Ajustements : boutons de modale, halos désactivés, cycle automatique
   des bordures de l'accueil.
   ========================================================================== */

/* 44.1 Modales : boutons Annuler / Valider alignés en bas à droite. */
body.ae-refresh .keys-modal .dashboard-form-actions,
body.ae-refresh .keys-modal .dashboard-account-form-actions,
body.ae-refresh .keys-modal .studio-form-actions,
body.ae-refresh .keys-modal .studio-modal-actions,
body.ae-refresh .keys-modal .keys-modal-actions:not(.register-wizard-actions--split):not(.password-update-invite-actions),
body.ae-refresh .studio-modal-box .studio-modal-actions,
body.ae-refresh .studio-modal-box .keys-modal-actions {
    justify-content: flex-end;
}

/* 44.2 Halo de bordure désactivé : langue + thème (bas de la navbar) et
   bloc de la courbe de la page « État de l'API ». */
body.ae-refresh .lang-dropdown .ae-spot-layer,
body.ae-refresh .sidebar-status-lang .ae-spot-layer,
body.ae-refresh .theme-toggle .ae-spot-layer,
body.ae-refresh .studio-sidebar-status-theme .ae-spot-layer,
body.ae-refresh .studio-sidebar-theme .ae-spot-layer,
body.ae-refresh .status-page-hourly-card .ae-spot-layer {
    display: none !important;
}

/* 44.3 API Endpoints : halo désactivé partout, sauf les encarts rouges/orange. */
body.ae-app-api .ae-spot-layer {
    display: none !important;
}
body.ae-app-api .quickstart-info-card--info > .ae-spot-layer {
    display: block !important;
}

/* 44.4 Accueil : un « serpent » lumineux circule sur une seule arête à la fois
   autour de chaque bloc (piloté par home-border-cycle.js). Le point est plus
   petit que le halo de survol pour se distinguer clairement de celui-ci. */
body.ae-refresh .gs-organic-card.is-auto-active {
    --ae-spot-size: 72px;
}
body.ae-refresh .gs-organic-card.is-auto-active::after {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    body.ae-refresh .gs-organic-card.is-auto-active::after {
        transition: none;
    }
}

/* ==========================================================================
   Playground — résultats au fil de l'eau (documents multi-pages)
   ========================================================================== */
.playground-progressive-status {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 7px 10px;
    border: 1px solid var(--ae-line);
    border-radius: 8px;
    background: var(--ae-surface-2);
    color: var(--ae-ink-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.playground-progressive-status.playground-hidden {
    display: none !important;
}

.playground-progressive-status.is-active::before {
    content: '';
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: playground-staging-spin 0.75s linear infinite;
    opacity: 0.7;
}

html.dark .playground-progressive-status {
    background: var(--ae-surface);
    color: var(--ae-ink-soft);
}

/* Sidebar repliée : barre d'état centrée (statut API et lune/soleil sur l'axe du rail) */
body.ae-refresh.sidebar-collapsed:not(.sidebar-peek) .sidebar .sidebar-status-wrap {
    /* Marges symétriques : le statut API et la lune/soleil restent sur l'axe du rail. */
    padding: 8px 0 10px !important;
    gap: 6px;
}

body.ae-refresh.sidebar-collapsed:not(.sidebar-peek) .sidebar-status-wrap .sidebar-status-link {
    width: 40px;
    min-width: 0;
    margin: 0;
}

body.ae-refresh.sidebar-collapsed:not(.sidebar-peek) .studio-sidebar-status-theme {
    margin: 0;
}