/* ============================================================================
   Thème d'interface « WordPress » — Super-admin > Interface
   ----------------------------------------------------------------------------
   Reproduit l'administration WordPress (wp-admin) par-dessus le balisage
   existant de Prepress : mêmes polices, mêmes couleurs, mêmes formes.

   Chargé UNIQUEMENT quand HomeSetting::interfaceTheme() === 'wordpress',
   après la feuille Vite : il n'a donc à batailler qu'avec les styles inline
   et les classes Tailwind arbitraires, d'où les !important ciblés.

   Palette de référence (WordPress 6.x) :
     #1d2327  fond de la barre d'admin et du menu latéral
     #2c3338  fond des sous-menus
     #2271b1  bleu d'accent (liens, bouton principal, élément courant)
     #135e96  bleu survolé
     #72aee6  bleu clair (survol dans le menu sombre)
     #f0f0f1  fond de la zone de contenu
     #c3c4c7  bordure des boîtes
     #d63638  rouge (alerte, badge de synchronisation)
   ========================================================================== */

:root {
    --wp-adminbar-h: 32px;
    --wp-menu-w: 160px;
    --wp-dark: #1d2327;
    --wp-dark-sub: #2c3338;
    --wp-blue: #2271b1;
    --wp-blue-hover: #135e96;
    --wp-blue-light: #72aee6;
    --wp-bg: #f0f0f1;
    --wp-border: #c3c4c7;
    --wp-text: #3c434a;
    --wp-red: #d63638;
    --wp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

    /* Étage de la coquille (barre + menu). wp-admin les met très haut
       (9990 / 99999), mais les modales de Prepress vivent entre z-50 et
       z-10000 : le menu passait alors PAR-DESSUS elles, et la bibliothèque
       d'images (z-50) se retrouvait amputée de sa colonne de gauche. La
       coquille se range donc juste au-dessus du contenu et sous la plus basse
       des modales. */
    --wp-z-bar: 41;
    --wp-z-menu: 40;
    --wp-z-banner: 38;
}

/* Échelle « brique » remplacée par celle du bleu WordPress (mêmes paliers de
   luminosité qu'Account::brickScale, appliqués à #2271b1). Tout ce que
   Prepress teinte en brique — jauges, pastilles, accents — suit sans qu'il
   faille reprendre les vues une par une. */
html.wp-theme {
    --color-brick-50:#E9F3FB;  --color-brick-100:#CDE4F5; --color-brick-200:#9DC9EC;
    --color-brick-300:#6BADE2; --color-brick-400:#3B93D9; --color-brick-500:#2478BC;
    --color-brick-600:#2271B1; --color-brick-700:#1B5A8E; --color-brick-800:#164973;
    --color-brick-900:#123B5C; --color-brick-950:#0C2940;
}

/* ─── Fondations ─────────────────────────────────────────────────────────── */

html.wp-theme,
html.wp-theme body {
    font-family: var(--wp-font) !important;
    font-size: 13px;
    line-height: 1.4em;
    color: var(--wp-text);
    background: var(--wp-bg) !important;
}

/* Le corps est décalé sous la barre d'admin et à droite du menu : exactement
   la mécanique de wp-admin (`body { margin-top: 32px }` + `#wpcontent`). */
html.wp-theme body.wp-shell {
    padding-top: var(--wp-adminbar-h);
    padding-left: var(--wp-menu-w);
    min-height: 100vh;
}

html.wp-theme .wp-shell h1,
html.wp-theme .wp-shell h2,
html.wp-theme .wp-shell h3,
html.wp-theme .wp-shell h4 {
    font-family: var(--wp-font) !important;
    font-weight: 600;
    color: #1d2327;
    letter-spacing: normal;
}
html.wp-theme .wp-shell h1 { font-size: 23px; font-weight: 400; line-height: 1.3; }
html.wp-theme .wp-shell h2 { font-size: 14px; }
html.wp-theme .wp-shell h3 { font-size: 14px; }

html.wp-theme .wp-shell a { color: var(--wp-blue); }
html.wp-theme .wp-shell a:hover { color: var(--wp-blue-hover); }

/* Un lien maquillé en bouton porte DÉJÀ sa couleur de texte. La couleur de
   lien ci-dessus (spécificité 0,2,1) écrasait la classe .text-white (0,1,0) :
   sur un fond passé au bleu du thème, le libellé devenait bleu sur bleu, donc
   invisible — cas du bouton « Télécharger l'extension Chrome ». */
html.wp-theme .wp-shell a.text-white,
html.wp-theme .wp-shell a.text-white:hover { color: #fff !important; }

/* Material Symbols au gabarit des dashicons : 20 px, trait fin. */
html.wp-theme .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ─── Barre d'administration (#wpadminbar) ───────────────────────────────── */

#wpadminbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--wp-adminbar-h);
    z-index: var(--wp-z-bar);
    background: var(--wp-dark);
    color: #f0f0f1;
    font-size: 13px;
    line-height: var(--wp-adminbar-h);
    display: flex;
    align-items: stretch;
}
#wpadminbar .ab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--wp-adminbar-h);
    padding: 0 10px;
    color: #f0f0f1 !important;
    text-decoration: none;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
#wpadminbar .ab-item:hover,
#wpadminbar .ab-node:hover > .ab-item {
    color: var(--wp-blue-light) !important;
    background: #2c3338;
}
#wpadminbar .ab-item .material-symbols-outlined { font-size: 18px; }
#wpadminbar .ab-node { position: relative; display: flex; }
/* Bascule du menu : réservée aux largeurs où le menu se replie (cf. le média
   en bas de feuille). Au-delà, elle n'aurait rien à ouvrir. */
#wpadminbar .wp-menu-toggle { display: none; }
#wpadminbar .ab-right { margin-left: auto; display: flex; }
/* Cellule du logo : la largeur exacte du menu latéral, picto centré. Les
   items suivants démarrent donc au bord de la zone de contenu. */
#wpadminbar .ab-logo-cell {
    width: var(--wp-menu-w);
    min-width: var(--wp-menu-w);
    height: 84px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}
#wpadminbar .ab-logo {
    height: 44px;
    padding: 20px 30px;
    align-items: center;
    justify-content: center;
}
#wpadminbar .ab-logo:hover,
#wpadminbar .ab-node:hover > .ab-logo {
    background: transparent;
}
#wpadminbar .ab-logo img {
    height: 44px;
    width: auto;
    display: block;
    opacity: 1;
    transform: scale(1);
    transition: transform .25s ease, opacity .25s ease;
}
#wpadminbar .ab-logo:hover img {
    opacity: .88;
    transform: scale(1.08);
}
#wpadminbar .ab-sep { width: 1px; background: rgba(240,240,241,.14); margin: 6px 0; }

/* Sous-menus : WordPress les ouvre au survol, fond #2c3338, pas d'animation. */
#wpadminbar .ab-sub {
    display: none;
    position: absolute;
    top: var(--wp-adminbar-h);
    left: 0;
    min-width: 190px;
    background: var(--wp-dark-sub);
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
    padding: 6px 0;
    line-height: 1.4;
}
#wpadminbar .ab-sub.ab-sub-right { left: auto; right: 0; }
#wpadminbar .ab-node:hover > .ab-sub,
#wpadminbar .ab-node:focus-within > .ab-sub { display: block; }
#wpadminbar .ab-sub a,
#wpadminbar .ab-sub button {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    height: auto;
    padding: 5px 12px;
    color: #c3c4c7 !important;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}
#wpadminbar .ab-sub a:hover,
#wpadminbar .ab-sub button:hover { color: var(--wp-blue-light) !important; background: transparent; text-decoration: underline; }
#wpadminbar .ab-sub .ab-sub-head {
    padding: 4px 12px 6px;
    font-size: 11px;
    color: #8c8f94;
    text-transform: uppercase;
    letter-spacing: .04em;
}
#wpadminbar .ab-sub hr { border: 0; border-top: 1px solid rgba(240,240,241,.12); margin: 5px 0; }
#wpadminbar .ab-sub .is-current { color: #fff !important; font-weight: 600; }
#wpadminbar .ab-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    background: #2271b1; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; line-height: 1;
}

/* ─── Menu latéral (#adminmenu) ──────────────────────────────────────────── */

#wpadminmenu {
    position: fixed;
    top: var(--wp-adminbar-h);
    bottom: 0;
    left: 0;
    /* Largeur FIXE : le menu de WordPress ne se rétracte pas. */
    width: var(--wp-menu-w);
    min-width: var(--wp-menu-w);
    max-width: var(--wp-menu-w);
    z-index: var(--wp-z-menu);
    background: var(--wp-dark);
    /* Respiration sous la barre d'admin : le premier type de publication ne
       doit pas être collé dessous. */
    padding-top: calc(84px - var(--wp-adminbar-h));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #3c434a var(--wp-dark);
}
#wpadminmenu::-webkit-scrollbar { width: 8px; }
#wpadminmenu::-webkit-scrollbar-thumb { background: #3c434a; }

#wpadminmenu ul { list-style: none; margin: 0; padding: 0; }
#wpadminmenu .wp-menu-sep { height: 5px; margin: 9px 0; background: transparent; }

#wpadminmenu .wp-menu-item > a,
#wpadminmenu .wp-menu-item > button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px 8px 12px;
    color: #f0f0f1;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
#wpadminmenu .wp-menu-item > a:hover,
#wpadminmenu .wp-menu-item > button:hover {
    color: var(--wp-blue-light);
    background: var(--wp-dark-sub);
}
#wpadminmenu .wp-menu-item.is-current > a,
#wpadminmenu .wp-menu-item.is-current > button {
    /* L'élément courant de WordPress : bleu plein, texte blanc, sans survol. */
    color: #fff;
    background: var(--wp-blue);
    font-weight: 600;
}
#wpadminmenu .wp-menu-item .material-symbols-outlined {
    font-size: 20px;
    width: 20px;
    flex-shrink: 0;
    opacity: .75;
}
#wpadminmenu .wp-menu-item.is-current .material-symbols-outlined,
#wpadminmenu .wp-menu-item > a:hover .material-symbols-outlined,
#wpadminmenu .wp-menu-item > button:hover .material-symbols-outlined { opacity: 1; }
#wpadminmenu .wp-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── Menu du Super-admin ──────────────────────────────────────────────────
   Le menu latéral bascule en entier sur les pages de Super-admin : ses
   entrées y remplacent celles du site, et la barre d'onglets horizontale
   disparaît de la page (superadmin/index.blade.php).

   Les icônes y sont des chemins SVG et non des Material Symbols — c'est le
   jeu que la barre d'onglets portait depuis l'origine, et convertir la
   moitié de la liste aurait donné deux styles d'icônes dans un seul menu.
   Elles reprennent donc, à la lettre, les règles de leurs voisines. */
#wpadminmenu .wp-menu-item .wp-menu-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: .75;
}
#wpadminmenu .wp-menu-item.is-current .wp-menu-svg,
#wpadminmenu .wp-menu-item > a:hover .wp-menu-svg { opacity: 1; }

/* Intitulé de section, à la manière du « Network Admin » d'un multisite :
   il dit où l'on est, puisque le menu ne montre plus le site. */
#wpadminmenu .wp-menu-head {
    padding: 12px 12px 6px;
    color: rgba(240,240,241,.55);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Pastille de comptage (« Articles 11 »). Même forme que la bulle des
   commentaires en attente de WordPress, mais en gris : le rouge y signale une
   chose à traiter, ce qu'un simple total n'est pas. */
#wpadminmenu .wp-menu-count {
    background: rgba(240,240,241,.14);
    color: #c3c4c7;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    min-width: 17px;
    text-align: center;
}
#wpadminmenu .wp-menu-item > a:hover .wp-menu-count { color: #f0f0f1; }

/* Pastille D'ALERTE : une pile à traiter, pas un total. Le rouge de
   WordPress, celui des commentaires en attente — il dit « quelque chose
   t'attend », ce qu'un décompte gris ne dit pas. Sert aux demandes de
   maintenance non résolues, dans le menu du Super-admin. */
#wpadminmenu .wp-menu-count.is-alert { background: var(--wp-red); color: #fff; }
#wpadminmenu .wp-menu-item > a:hover .wp-menu-count.is-alert { color: #fff; }

/* ── Le chat, ÉPINGLÉ EN PIED DE MENU ─────────────────────────────────────
   Il ne fait pas partie du travail courant : c'est le recours. Sa place est
   donc en bas, séparée du reste, là où l'œil va chercher l'aide — et non
   coincée entre « Synchroniser » et les Réglages, où elle se lisait comme
   une fonction de plus.

   `margin-top:auto` ne pousse que dans un conteneur en colonne flexible : la
   liste doit donc l'être, et occuper toute la hauteur du menu. Le menu garde
   son défilement — sur une fenêtre courte, le pied redevient simplement le
   dernier élément de la liste. */
#wpadminmenu { display: flex; flex-direction: column; }
#wpadminmenu > ul { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 10px; }
#wpadminmenu .wp-menu-chat { margin-top: auto; }
/* Un filet au-dessus, plutôt qu'un séparateur en plus dans le balisage : il
   suit le pied où qu'il se trouve, y compris quand la liste déborde. */
#wpadminmenu .wp-menu-chat > a { border-top: 1px solid rgba(240,240,241,.10); padding-top: 12px; margin-top: 8px; }
#wpadminmenu .wp-menu-item.is-current .wp-menu-count { background: rgba(255,255,255,.25); color: #fff; }

/* Sous-menu (Réglages) : ouverture/fermeture animée à la hauteur réelle.
   WordPress ouvre le sien sans transition ; ici l'ouverture est demandée
   « smooth », d'où la mesure de scrollHeight côté JS. */
#wpadminmenu .wp-submenu {
    background: var(--wp-dark-sub);
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s cubic-bezier(.4, 0, .2, 1);
}
#wpadminmenu .wp-menu-item.is-open > .wp-submenu { /* max-height posé par le JS */ }
#wpadminmenu .wp-submenu a {
    display: block;
    padding: 6px 12px 6px 40px;
    color: #c3c4c7;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
}
#wpadminmenu .wp-submenu a:hover { color: var(--wp-blue-light); }
#wpadminmenu .wp-submenu a.is-current { color: #fff; font-weight: 600; }
#wpadminmenu .wp-submenu-toggle {
    margin-left: auto;
    font-size: 18px !important;
    opacity: .55;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
#wpadminmenu .wp-menu-item.is-open > a .wp-submenu-toggle,
#wpadminmenu .wp-menu-item.is-open > button .wp-submenu-toggle { transform: rotate(180deg); }

/* Bouton de synchronisation : gris tant que la copie locale est à jour,
   rouge dès que le plugin signale un changement côté WordPress. */
#wpSyncItem { margin-top: 10px; border-top: 1px solid rgba(240,240,241,.1); padding-top: 6px; }
#wpSyncBtn .wp-sync-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: transparent; flex-shrink: 0;
}
/* Sélecteurs portés par #wpadminmenu : sans cela, la règle générique
   « #wpadminmenu .wp-menu-item > button » (un id + une classe + un élément)
   l'emporterait sur « #wpSyncBtn.is-pending » et le rouge ne s'afficherait
   jamais. */
#wpadminmenu .wp-menu-item > button#wpSyncBtn.is-pending { color: #fff; background: var(--wp-red); }
#wpadminmenu .wp-menu-item > button#wpSyncBtn.is-pending:hover { background: #b32d2e; color: #fff; }
#wpadminmenu .wp-menu-item > button#wpSyncBtn.is-pending .material-symbols-outlined { opacity: 1; }
#wpSyncBtn.is-pending .wp-sync-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
#wpSyncBtn.is-busy .material-symbols-outlined { animation: wpSyncSpin 1s linear infinite; }
@keyframes wpSyncSpin { to { transform: rotate(360deg); } }
#wpSyncNote {
    padding: 6px 12px 10px;
    color: #f0c1c2;
    font-size: 11px;
    line-height: 1.45;
}
#wpSyncNote ul { list-style: none; margin: 4px 0 0; padding: 0; }
#wpSyncNote li { padding: 1px 0; color: #c3c4c7; }

/* ─── Zone de contenu ────────────────────────────────────────────────────── */

html.wp-theme .wp-shell main,
html.wp-theme .wp-shell > section { background: var(--wp-bg) !important; }

/* Remappage de la palette Prepress vers celle de wp-admin. Les teintes sont
   posées en classes Tailwind arbitraires un peu partout : les reprendre une
   fois ici évite de retoucher des dizaines de vues.
     ivoire  #F6F2EB → #f0f0f1 (fond de contenu)
     taupe   #d6d0bf → #f0f0f1 (fonds de barres latérales)
     encre   #333333 → #2271b1 (boutons et accents)
     brique  brick-* → bleu WordPress                                        */
html.wp-theme .bg-\[\#F6F2EB\],
html.wp-theme .bg-\[\#d6d0bf\],
html.wp-theme .hover\:bg-\[\#F6F2EB\]:hover { background-color: var(--wp-bg) !important; }
html.wp-theme .bg-\[\#333333\],
html.wp-theme .bg-brick-600,
html.wp-theme .peer-checked\:bg-\[\#333333\]:is(.peer:checked ~ *) { background-color: var(--wp-blue) !important; }
html.wp-theme .hover\:bg-\[\#222222\]:hover,
html.wp-theme .hover\:bg-\[\#333333\]\/90:hover,
html.wp-theme .hover\:bg-brick-600:hover,
html.wp-theme .hover\:bg-brick-800:hover { background-color: var(--wp-blue-hover) !important; }
html.wp-theme .text-\[\#333333\] { color: var(--wp-text) !important; }
html.wp-theme .border-\[\#333333\] { border-color: var(--wp-blue) !important; }
html.wp-theme .focus\:ring-\[\#333333\]:focus { --tw-ring-color: var(--wp-blue); }
/* Les libellés posés en ivoire vivent sur un fond devenu bleu : passés en blanc. */
html.wp-theme .bg-brick-600 .text-\[\#F6F2EB\],
html.wp-theme .bg-\[\#333333\] .text-\[\#F6F2EB\],
html.wp-theme .text-\[\#F6F2EB\] { color: #fff !important; }

/* Listes de publications : l'aspect « wp-list-table » — en-tête gris clair,
   filets fins, pas d'ombre portée. */
html.wp-theme .wp-shell table { border-collapse: collapse; font-size: 13px; }
html.wp-theme .wp-shell thead th {
    background: #f6f7f7;
    border-bottom: 1px solid var(--wp-border);
    color: #2c3338 !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}
/* Les colonnes triables sont des liens : sans cette règle, elles gardaient la
   casse et l'interlettrage de l'application (« MISE À JOUR » en capitales
   espacées) au milieu d'en-têtes remis en casse normale par la règle
   ci-dessus, qui ne porte que sur le `th` lui-même. */
html.wp-theme .wp-shell thead th a {
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
}

html.wp-theme .wp-shell tbody tr { border-bottom: 1px solid #f0f0f1; }

/* Boîtes (postbox) : blanc, bord gris, ombre d'un pixel, angles droits.
   On rattrape ici les cartes Tailwind existantes (rounded-*, shadow-sm). */
html.wp-theme .wp-shell .bg-white,
html.wp-theme .wp-shell .settings-card,
html.wp-theme .wp-shell .schedule-card,
html.wp-theme .wp-shell .pcf-card {
    background: #fff;
    border-color: var(--wp-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.04) !important;
}
html.wp-theme .wp-shell .rounded-xl,
html.wp-theme .wp-shell .rounded-2xl,
html.wp-theme .wp-shell .rounded-lg,
html.wp-theme .wp-shell .rounded-\[10px\] { border-radius: 3px !important; }

/* Champs de saisie : bord #8c8f94, rayon 3 px, focus bleu à double trait. */
html.wp-theme .wp-shell input[type="text"],
html.wp-theme .wp-shell input[type="email"],
html.wp-theme .wp-shell input[type="url"],
html.wp-theme .wp-shell input[type="search"],
html.wp-theme .wp-shell input[type="number"],
html.wp-theme .wp-shell input[type="password"],
html.wp-theme .wp-shell input[type="date"],
html.wp-theme .wp-shell input[type="datetime-local"],
html.wp-theme .wp-shell textarea,
html.wp-theme .wp-shell select {
    border: 1px solid #8c8f94 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #2c3338 !important;
    box-shadow: 0 0 0 transparent !important;
    font-family: var(--wp-font) !important;
    font-size: 14px;
}
/* Le titre de l'article n'est pas un champ de formulaire à l'œil : il se pose
   à même le fond de la page, comme dans l'éditeur de WordPress. Le style
   générique ci-dessus lui collait un rectangle blanc. */
html.wp-theme #articleTitle {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0;
}

/* La carte « publication assistée » (Citykomi, PanneauPocket) porte son propre
   dessin : ses champs sont posés DANS des lignes encadrées, et le style
   générique ci-dessus leur ajoutait un second cadre à l'intérieur du premier.
   La coquille s'abstient donc ici, comme elle le fait pour le titre — c'est à
   elle de dire ce qu'elle ne repeint pas, plutôt qu'à chaque carte de lutter
   avec des `!important` de plus en plus spécifiques. */
html.wp-theme .wp-shell .ac-card select,
html.wp-theme .wp-shell .ac-card input[type="url"] {
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    color: #475569 !important;
    box-shadow: none !important;
}
html.wp-theme .wp-shell .ac-card .ac-select {
    border: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}
html.wp-theme .wp-shell .ac-card .ac-input {
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
}
html.wp-theme .wp-shell .ac-card .ac-input:focus {
    border-color: var(--soc) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--soc) 14%, transparent) !important;
}

html.wp-theme .wp-shell input:focus,
html.wp-theme .wp-shell textarea:focus,
html.wp-theme .wp-shell select:focus {
    border-color: var(--wp-blue) !important;
    box-shadow: 0 0 0 1px var(--wp-blue) !important;
    outline: 2px solid transparent !important;
}

/* Boutons WordPress explicites (utilisés par les partials du thème). */
.wp-btn,
.wp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 3px;
    border: 1px solid var(--wp-blue);
    background: #f6f7f7;
    color: var(--wp-blue);
    font-family: var(--wp-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 2.15384615;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.wp-btn:hover { background: #f0f0f1; border-color: var(--wp-blue-hover); color: var(--wp-blue-hover); }
.wp-btn-primary { background: var(--wp-blue); border-color: var(--wp-blue); color: #fff; }
.wp-btn-primary:hover { background: var(--wp-blue-hover); border-color: var(--wp-blue-hover); color: #fff; }
.wp-btn-large { min-height: 32px; padding: 0 14px; font-size: 14px; }
.wp-btn .material-symbols-outlined,
.wp-btn-primary .material-symbols-outlined { font-size: 17px; }

/* La barre noire d'origine de Prepress n'a plus lieu d'être : la barre
   d'admin la remplace, et le menu latéral porte la navigation. */
html.wp-theme body.wp-shell > header,
html.wp-theme body.wp-shell > .gtabbar,
html.wp-theme body.wp-shell #pwaInstallBar { display: none !important; }

/* ─── Tableau de bord : la colonne de filtres devient une ligne « subsubsub »
       (les types de contenu vivent maintenant dans le menu latéral). ─────── */

html.wp-theme #dashNavTypes { display: none !important; }
html.wp-theme #dashSidebar {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    border: 0 !important;
    padding: 0 !important;
}
html.wp-theme #dashSidebar nav { display: flex; align-items: center; flex-wrap: wrap; padding: 8px 20px 0 !important; gap: 0; }
html.wp-theme #dashSidebar #dashNavFilters { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
html.wp-theme #dashSidebar #dashNavFilters > p { display: none; }
html.wp-theme #dashSidebar #dashNavFilters > .border-t { display: none; }
/* Publiés / Brouillons retirés : la colonne Statut de la liste dit déjà tout.
   Seule la Corbeille reste — et seulement si elle contient quelque chose. */
html.wp-theme #dashNavStatus { display: none !important; }
html.wp-theme #dashSidebar #dashNavFilters a {
    background: transparent !important;
    color: var(--wp-blue) !important;
    padding: 0 !important;
    margin-right: 14px;
    font-size: 13px;
    gap: 4px;
}
html.wp-theme #dashSidebar #dashNavFilters a:hover { color: var(--wp-blue-hover) !important; text-decoration: underline; }
html.wp-theme #dashSidebar #dashNavFilters a .material-symbols-outlined { font-size: 16px; color: inherit !important; }
html.wp-theme #dashSidebar #dashNavFilters a span { color: inherit !important; }
html.wp-theme #dashSidebar .lg\:hidden { display: none !important; }
html.wp-theme main.flex.flex-col { flex-direction: column !important; }
html.wp-theme body.wp-shell main { height: auto !important; min-height: calc(100vh - var(--wp-adminbar-h)); }
/* L'éditeur, lui, garde une hauteur exacte : ses trois colonnes défilent
   chacune de leur côté. La barre noire de 58 px cède la place aux 32 px de la
   barre d'admin. */
html.wp-theme .conversion-main-layout {
    height: calc(100vh - var(--wp-adminbar-h)) !important;
    min-height: 0 !important;
}

/* Interface flottante de TinyMCE (tiroir « ⋯ », bulles, menus) : rendue en fin
   de <body> avec un z-index de 1300, elle surnageait au-dessus des modales —
   on la voyait posée sur la bibliothèque d'images. Elle n'a besoin de passer
   que devant l'éditeur. */
html.wp-theme .tox.tox-tinymce-aux { z-index: 35 !important; }

/* Bandeau d'essai gratuit : collé SOUS la barre d'admin, pas dessous. */
html.wp-theme body.wp-shell > div.sticky.top-0 {
    top: var(--wp-adminbar-h) !important;
    z-index: var(--wp-z-banner) !important;
}

/* ─── Réglages : la colonne d'onglets est remplacée par le sous-menu du
       menu latéral, comme dans wp-admin. ─────────────────────────────────── */

html.wp-theme #settingsSidebar { display: none !important; }

/* ─── Éditeur : le volet passe à DROITE, en boîtes blanches ──────────────── */

html.wp-theme #conversionMain { align-items: stretch; }

/* `order` plutôt qu'un déplacement dans le DOM : tout le JS de l'éditeur
   (bascules d'onglets, mode focus, collaboration) continue de trouver ses
   nœuds là où il les attend. */
html.wp-theme #sidebarLeft.sidebar-left {
    order: 2;
    width: 280px !important;
    min-width: 280px;
    background: var(--wp-bg) !important;
    box-shadow: none !important;
    border-left: 1px solid var(--wp-border);
    padding: 0;
}
/* Le volet garde SA largeur quoi qu'il arrive : « Collab. » l'élargissait de
   300 à 360 px, ce qui décalait tout l'éditeur à chaque changement d'onglet. */
html.wp-theme #sidebarLeft.sidebar-left.collab-expanded,
html.wp-theme #sidebarLeft.sidebar-left.assistant-expanded {
    width: 280px !important;
    min-width: 280px !important;
}
/* Voile d'assombrissement de l'onglet Collaboration : calé sur « left: 360px »,
   il couvrait tout ce qui est à droite — donc le volet lui-même, désormais de
   ce côté. Le seul endroit resté clair était la gauche de l'écran, ce qui
   donnait l'impression que le panneau y avait déménagé. */
html.wp-theme #editorOverlay { display: none !important; }
/* L'onglet Collaboration prend la forme d'une boîte, comme ses voisins. */
html.wp-theme #sidebar-collab {
    background: #fff;
    border: 1px solid var(--wp-border);
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin: 12px;
}
html.wp-theme #conversionMain > section { order: 1; }
/* Le mode focus (sidebar escamotée pendant la frappe — vers la droite dans ce
   thème, où elle est à droite) a été retiré : elle reste visible. */
/* Le rayon uniforme de 2 px de la sidebar Prepress : à plat.
   Exception faite de ce qui est rond par nature — les pastilles de réseaux :
   wp-admin lui-même arrondit ses avatars, et un `*` en !important les
   rendait carrées sans qu'on voie d'où ça venait. */
html.wp-theme .sidebar-left,
html.wp-theme .sidebar-left *:not(.wp-social-circle) { border-radius: 0 !important; }
html.wp-theme .wp-social-circle { border-radius: 50% !important; }
/* Les blocs du volet ne sont plus estompés : wp-admin les montre tous. */
html.wp-theme #sidebar-apercu > * { opacity: 1 !important; }
html.wp-theme #sidebar-apercu { padding: 12px !important; gap: 0 !important; }

/* Onglets Général / Collab. : les deux onglets de la colonne de wp-admin. */
html.wp-theme #sidebarLeft > .flex.gap-1 {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--wp-border);
    gap: 0 !important;
}
html.wp-theme #sidebarLeft .sidebar-tab {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid transparent;
    border-bottom: 0;
    margin-bottom: -1px;
    color: var(--wp-blue) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}
html.wp-theme #sidebarLeft .sidebar-tab.ring-1,
html.wp-theme #sidebarLeft .sidebar-tab[data-active="1"] {
    background: #fff !important;
    border-color: var(--wp-border);
    color: #1d2327 !important;
    font-weight: 600 !important;
}

/* Metabox : en-tête à poignée, corps blanc, repli au clic sur le titre. */
.wp-metabox {
    background: #fff;
    border: 1px solid var(--wp-border);
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin-bottom: 12px;
}
.wp-metabox-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--wp-border);
    cursor: move;
    user-select: none;
}
.wp-metabox.is-collapsed .wp-metabox-header { border-bottom: 0; }
.wp-metabox-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.4;
    margin: 0;
}
.wp-metabox-toggle {
    background: none;
    border: 0;
    padding: 2px;
    color: #787c82;
    cursor: pointer;
    display: inline-flex;
    transition: transform .2s ease;
}
.wp-metabox.is-collapsed .wp-metabox-toggle { transform: rotate(-90deg); }
.wp-metabox-body { padding: 12px; font-size: 13px; }
.wp-metabox.is-collapsed .wp-metabox-body { display: none; }
.wp-metabox.is-dragging { opacity: .55; }
.wp-metabox-placeholder {
    border: 1px dashed #8c8f94;
    background: #f0f0f1;
    margin-bottom: 12px;
}
/* Les boîtes reprises telles quelles du volet Prepress (planification,
   taxonomies, auteur, capture) reçoivent le même cadre. */
html.wp-theme #sidebar-apercu > div:not(.wp-metabox) {
    background: #fff;
    border: 1px solid var(--wp-border) !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin-bottom: 12px;
    padding: 0;
}

/* Image à la une : la boîte de wp-admin — vignette pleine largeur, puis un
   lien texte bleu, exactement comme « Définir l'image mise en avant ». */
.wp-featured-box .wp-featured-thumb {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}
.wp-featured-box .wp-featured-thumb img { display: block; width: 100%; height: auto; }
/* Croix de retrait, posée dans l'angle de la vignette. Discrète au repos,
   franchement rouge au survol : le geste est destructif, il doit se voir
   venir. */
.wp-featured-box .wp-featured-figure { position: relative; }
.wp-featured-box .wp-featured-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: rgba(15, 23, 42, .62);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
}
.wp-featured-box .wp-featured-remove .material-symbols-outlined { font-size: 17px; }
.wp-featured-box .wp-featured-figure:hover .wp-featured-remove,
.wp-featured-box .wp-featured-remove:focus-visible { opacity: 1; }
.wp-featured-box .wp-featured-remove:hover { background: #b32d2e; }
.wp-featured-box .wp-featured-remove[disabled] { opacity: .5; cursor: progress; }
/* Pas de survol au doigt : sur écran tactile la croix reste visible. */
@media (hover: none) {
    .wp-featured-box .wp-featured-remove { opacity: 1; }
}
.wp-featured-box .wp-featured-empty {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wp-blue);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.wp-featured-box .wp-featured-empty:hover { color: var(--wp-blue-hover); text-decoration: underline; }
.wp-featured-box .wp-featured-actions { margin-top: 8px; display: flex; gap: 10px; font-size: 13px; }
.wp-featured-box .wp-featured-actions button {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--wp-blue);
}
.wp-featured-box .wp-featured-actions button:hover { text-decoration: underline; color: var(--wp-blue-hover); }
.wp-featured-box .wp-featured-actions .is-danger { color: #b32d2e; }

/* Boîte « Publier » : rangées d'état puis un pied gris avec le bouton bleu. */
.wp-publish-box .wp-metabox-body { padding: 0; }
.wp-publish-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--wp-text);
}
.wp-publish-row .material-symbols-outlined { font-size: 17px; color: #787c82; }
.wp-publish-row strong { font-weight: 600; color: #1d2327; }
.wp-publish-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #f6f7f7;
    border-top: 1px solid #dcdcde;
}
.wp-publish-actions .wp-save-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--wp-blue);
}
.wp-publish-actions .wp-save-link:hover { text-decoration: underline; }

/* Boîtes d'accès rapide (Réseaux sociaux, SEO) : un bouton pleine largeur. */
.wp-jump-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wp-blue);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.wp-jump-btn:hover { color: var(--wp-blue-hover); text-decoration: underline; }
.wp-jump-btn.is-open { font-weight: 600; }
/* Rangée des réseaux : des cercles de 36 px, assez grands pour qu'on
   distingue le réseau ET son état. Éteints par défaut, colorés une fois
   l'article PARU. Ce sont les gris de wp-admin : blanchir seulement le fond
   aurait laissé une icône blanche sur gris clair, illisible — c'est donc
   l'icône qui se grise aussi. */
.wp-social-circles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.wp-social-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f1;
    color: #a7aaad;
    box-shadow: inset 0 0 0 1px #dcdcde;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wp-social-circle .material-symbols-outlined { font-size: 19px; line-height: 1; }
/* RÉDIGÉ, pas encore paru : la couleur du réseau, en demi-teinte. Le travail
   est fait, il n'est pas parti — un cercle gris le niait, un cercle plein
   l'aurait donné pour publié. L'opacité porte tout le cercle, icône comprise :
   la teinte reste reconnaissable, l'affirmation est plus douce. */
.wp-social-circle.is-drafted {
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.10);
    opacity: .5;
}
.wp-social-circle.is-published {
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    opacity: 1;
}
.wp-social-circle:hover { transform: translateY(-1px); }

/* Décompte : il suit les cercles, sinon les deux diraient des choses
   différentes du même article. */
.wp-social-tally {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f1;
    font-size: 13px;
    color: var(--wp-text);
}
.wp-social-tally .material-symbols-outlined { font-size: 15px; color: #a7aaad; }
.wp-social-tally strong { color: #a7aaad; font-weight: 600; }
.wp-social-tally.is-done .material-symbols-outlined,
.wp-social-tally.is-done strong { color: #00a32a; }

.wp-jump-state { margin-left: auto; font-size: 12px; color: #787c82; text-decoration: none; }
.wp-jump-state.is-done { color: #007017; }

/* Lien de retour vers l'éditeur de texte, en tête des autres sections. */
.wp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* La section qui suit porte déjà 24 px de `space-y-6` ; les deux marges
       se fusionnent, c'est donc bien 30 px qui séparent le lien du contenu. */
    margin-bottom: 30px;
    color: var(--wp-blue);
    font-size: 13px;
    text-decoration: none;
}
.wp-back-link:hover { color: var(--wp-blue-hover); text-decoration: underline; }
.wp-back-link .material-symbols-outlined { font-size: 17px; }
.wp-back-link[hidden] { display: none; }

/* Barre d'onglets de l'éditeur : retirée. Elle refaisait en haut de page ce
   que les boîtes du volet portent déjà (Réseaux sociaux, SEO, Visuel,
   Publier). Elle reste dans le DOM — le JS de l'éditeur bascule les sections
   en cliquant ses boutons — mais elle ne s'affiche plus. */
html.wp-theme #desktopTabBar { display: none !important; }

/* Champs complémentaires : toujours dépliés, jamais en accordéon. */
html.wp-theme #pcfBlock .pcf-save,
html.wp-theme #pcfBlock .pcf-save[data-pcf-dirty="1"] {
    background: var(--wp-blue) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    transform: none !important;
}
html.wp-theme #pcfBlock .pcf-save:hover { background: var(--wp-blue-hover) !important; }
html.wp-theme #pcfBlock .pcf-head { cursor: default; }
html.wp-theme #pcfBlock .pcf-chevron { display: none !important; }
html.wp-theme #pcfBlock .cf-accordion-body { display: block !important; }

/* Ordre de la colonne d'édition : le corps, puis les champs complémentaires,
   puis l'extrait — l'ordre de wp-admin, où les champs personnalisés
   précèdent l'extrait. */
/* `:not(.hidden)` : sans lui, ce sélecteur (0,2,1) bat l'utilitaire
   `.hidden` (0,1,0) et la section Édition reste affichée sous toutes les
   autres. */
html.wp-theme #tab-html:not(.hidden) { display: flex; flex-direction: column; }
html.wp-theme #tab-html > #pcfBlock { order: 2; }
html.wp-theme #tab-html > #excerptBlock { order: 3; }

/* ─── Divers ─────────────────────────────────────────────────────────────── */

/* Le thème WordPress n'a pas de mode sombre : la bascule jour/nuit est
   masquée, et les surcharges `html.dark` ne doivent pas s'appliquer. */
html.wp-theme.dark { color-scheme: light; }

@media (max-width: 782px) {
    /* wp-admin bascule en menu réduit sous 783 px ; ici le menu se replie
       complètement et la barre d'admin passe à 46 px, comme WordPress. */
    :root { --wp-adminbar-h: 46px; }
    html.wp-theme body.wp-shell { padding-left: 0; }
    #wpadminmenu { transform: translateX(-100%); transition: transform .25s ease; }
    #wpadminmenu.is-open { transform: none; box-shadow: 0 0 30px rgba(0,0,0,.4); }
    #wpadminbar .wp-menu-toggle { display: flex; }
    #wpadminbar .ab-item { padding: 0 8px; }
    #wpadminbar .ab-logo { padding: 20px 30px; }
    /* Menu hors écran : la cellule du logo n'a plus de colonne à couvrir. */
    #wpadminbar .ab-logo-cell { width: auto; min-width: 0; }
    html.wp-theme #sidebarLeft.sidebar-left { width: 100% !important; min-width: 0; border-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modale de publication — maquette « Publication WP » (Claude Design)
   ---------------------------------------------------------------------------
   Reprise du balisage existant, pas de réécriture : toute la logique de
   publication (preflight, modes, progression, dépublication) tient à ces
   nœuds et à leurs identifiants. Seule l'apparence change, et seulement
   lorsque le thème WordPress est actif.

   Depuis le passage en accordéon (maquette « Fenêtre publication WP »), la
   modale tient sur UNE colonne de 680 px : un en-tête, trois volets repliables
   — Preflight, Mode de publication, Diffusion — et le pied d'actions. Les
   règles s'accrochent aux classes `pm-*` posées par le Blade ; les deux
   dernières qui visent un style inline par sous-chaîne (`[style*=...]`)
   concernent des libellés de carte de mode qui n'ont pas de classe à eux.
   ═══════════════════════════════════════════════════════════════════════════ */

html.wp-theme #publishModal { font-family: var(--wp-font) !important; font-size: 13px !important; color: #1e1e1e !important; }

/* Voile et carte : angles droits, ombre franche, 680 px sur une colonne. */
html.wp-theme #publishModal > .absolute.inset-0 {
    align-items: center !important;
    padding: 40px 24px !important;
    background: rgba(0,0,0,0.35) !important;
}
html.wp-theme #pmCard {
    max-width: 680px !important;
    background: #fff !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 3px 30px rgba(25,30,35,0.2) !important;
}

/* En-tête clair : le titre, le domaine en gris, la pastille d'état. */
html.wp-theme #pmHeader {
    background: #fff !important;
    border-bottom: 1px solid #dcdcde !important;
    padding: 14px 20px !important;
    gap: 10px !important;
}
html.wp-theme #publishModal .pm-h-title {
    font-family: var(--wp-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e1e1e !important;
}
html.wp-theme #publishModal .pm-h-host { font-size: 13px !important; color: #757575 !important; }
html.wp-theme #publishModal .pm-h-badge {
    border-radius: 2px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 3px 10px !important;
}
html.wp-theme #publishModal .pm-h-badge span { border-radius: 0 !important; }
html.wp-theme #publishModal .pm-h-badge-ok {
    color: #005c12 !important; background: #edfaef !important; border: 1px solid #68de7c !important;
}
html.wp-theme #publishModal .pm-h-badge-warn {
    color: #674600 !important; background: #fcf9e8 !important; border: 1px solid #dba617 !important;
}
html.wp-theme #publishModal .pm-close-btn {
    border-radius: 0 !important;
    color: #757575 !important;
    width: 28px !important;
    height: 28px !important;
}
html.wp-theme #publishModal .pm-close-btn:hover { background: transparent !important; color: #1e1e1e !important; }

/* Volets : filet plein largeur, survol gris clair, jauge verte carrée. */
html.wp-theme #publishModal .pm-acc { border-bottom: 1px solid #dcdcde !important; }
html.wp-theme #publishModal .pm-acc-head { padding: 13px 20px !important; color: #1e1e1e !important; }
html.wp-theme #publishModal .pm-acc-head:hover { background: #f6f7f7 !important; }
html.wp-theme #publishModal .pm-acc-title { font-size: 13px !important; font-weight: 600 !important; }
html.wp-theme #publishModal .pm-acc-resume { font-size: 13px !important; color: #757575 !important; }
html.wp-theme #publishModal .pm-acc-track {
    height: 6px !important; border-radius: 3px !important; background: #dcdcde !important;
}
html.wp-theme #publishModal .pm-acc-track > span { background: #00a32a !important; border-radius: 0 !important; }
/* Le rembourrage vit sur l'enveloppe intérieure : le volet lui-même est la
   grille qui s'anime, et un rembourrage posé sur elle resterait visible une
   fois replié. */
html.wp-theme #publishModal .pm-acc-body-inner { padding: 2px 20px 16px !important; }
/* Replié, le rembourrage vertical doit disparaître comme dans le thème par
   défaut — sinon le `!important` ci-dessus laisserait un liseré de 18 px. */
html.wp-theme #publishModal .pm-acc:not(.is-open) > .pm-acc-body > .pm-acc-body-inner {
    padding-top: 0 !important; padding-bottom: 0 !important;
}
html.wp-theme #publishModal #pmStatusArea:not(:empty) { padding: 16px 20px 0 !important; }
html.wp-theme #publishModal #pmProgressWrap:not(.hidden) { padding: 16px 20px !important; }

/* Ligne de contrôle : pastille pleine, intitulé, détail gris, « Corriger ». */
html.wp-theme #publishModal .pm-check-item {
    padding: 7px 0 !important;
    border-bottom: 1px solid #f0f0f1 !important;
}
html.wp-theme #publishModal .pm-check-icon { width: 16px !important; height: 16px !important; color: #fff !important; }
html.wp-theme #publishModal .pm-check-icon svg { width: 10px !important; height: 10px !important; }
html.wp-theme #publishModal .pm-badge-pass { background: #00a32a !important; }
html.wp-theme #publishModal .pm-badge-fail { background: var(--wp-red) !important; }
html.wp-theme #publishModal .pm-badge-warn { background: #dba617 !important; }
html.wp-theme #publishModal .pm-check-label { font-size: 13px !important; color: #1e1e1e !important; }
html.wp-theme #publishModal .pm-check-detail { font-size: 13px !important; color: #757575 !important; }
html.wp-theme #publishModal .pm-check-fix {
    border: 1px solid var(--wp-blue) !important;
    background: #fff !important;
    color: var(--wp-blue) !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 3px 10px !important;
}
html.wp-theme #publishModal .pm-check-fix:hover { background: #f0f6fc !important; color: var(--wp-blue-hover) !important; }

/* Mode de publication : deux cartes, anneau radio bleu. */
html.wp-theme #publishModal .pm-mode-card {
    border: 1px solid var(--wp-border) !important;
    border-radius: 2px !important;
    background: #fff !important;
    padding: 12px 14px !important;
}
html.wp-theme #publishModal .pm-mode-card:has(input:checked) {
    border: 1.5px solid var(--wp-blue) !important;
    background: #f0f6fc !important;
}
html.wp-theme #publishModal .pm-radio-ring {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #757575 !important;
    background: #fff !important;
    margin-top: 2px !important;
}
html.wp-theme #publishModal .pm-mode-card:has(input:checked) .pm-radio-ring { border-color: var(--wp-blue) !important; }
html.wp-theme #publishModal .pm-radio-dot { width: 8px !important; height: 8px !important; }
html.wp-theme #publishModal .pm-mode-card:has(input:checked) .pm-radio-dot { background: var(--wp-blue) !important; }
html.wp-theme #publishModal .pm-mode-icon { display: none !important; }
html.wp-theme #publishModal .pm-mode-card span[style*="font-weight:600"] { font-size: 13px !important; color: #1e1e1e !important; }
html.wp-theme #publishModal .pm-mode-card div[style*="font-size:12.5px"] { font-size: 12px !important; color: #50575e !important; }
html.wp-theme #publishModal .pm-mode-card code {
    background: var(--wp-bg) !important;
    border-radius: 2px !important;
    font-size: 11px !important;
    color: #3c434a !important;
}

/* Diffusion : interrupteurs et pastilles de réseau à la mode WordPress. */
html.wp-theme #publishModal .pm-switch {
    width: 36px !important; height: 18px !important; border-radius: 9px !important;
    background: #fff !important; border: 1px solid #757575 !important;
}
html.wp-theme #publishModal .pm-switch-dot {
    width: 12px !important; height: 12px !important; top: 2px !important; left: 2px !important;
    background: #757575 !important; box-shadow: none !important;
}
html.wp-theme #publishModal .pm-switch-input:checked + .pm-switch {
    background: var(--wp-blue) !important; border-color: var(--wp-blue) !important;
}
html.wp-theme #publishModal .pm-switch-input:checked + .pm-switch .pm-switch-dot {
    left: 20px !important; background: #fff !important;
}
html.wp-theme #publishModal .pm-net-pill {
    border-radius: 12px !important;
    border: 1px solid var(--wp-blue) !important;
    background: #f0f6fc !important;
    padding: 4px 10px 4px 5px !important;
}
html.wp-theme #publishModal .pm-net-label { font-size: 12px !important; font-weight: 500 !important; color: var(--wp-blue) !important; }
html.wp-theme #publishModal .pm-net-pill.is-off,
html.wp-theme #publishModal .pm-net-pill.is-done {
    border-color: #dcdcde !important; background: #f6f7f7 !important;
}
html.wp-theme #publishModal .pm-net-pill.is-off .pm-net-label,
html.wp-theme #publishModal .pm-net-pill.is-done .pm-net-label { color: #757575 !important; }
html.wp-theme #publishModal .pm-net-ico { width: 18px !important; height: 18px !important; }

/* Pied : lien de réimport à gauche, actions à droite. */
html.wp-theme #pmFooter {
    background: #f6f7f7 !important;
    border-top: 1px solid var(--wp-border) !important;
    padding: 14px 20px !important;
    gap: 10px !important;
}
html.wp-theme #publishModal .pm-ghost-btn {
    color: var(--wp-blue) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
    text-decoration: underline;
}
html.wp-theme #publishModal .pm-ghost-btn:hover { background: transparent !important; color: var(--wp-blue-hover) !important; }
html.wp-theme #publishModal .pm-outline-danger-btn {
    background: #fff !important;
    border: 1px solid var(--wp-red) !important;
    color: var(--wp-red) !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 14px !important;
}
html.wp-theme #publishModal .pm-outline-danger-btn:hover { background: #fcf0f1 !important; }
html.wp-theme #publishModal .pm-primary-btn {
    background: var(--wp-blue) !important;
    border: 1px solid var(--wp-blue) !important;
    color: #fff !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    box-shadow: 0 1px 0 var(--wp-blue-hover) !important;
}
html.wp-theme #publishModal .pm-primary-btn:hover { background: var(--wp-blue-hover) !important; box-shadow: 0 1px 0 var(--wp-blue-hover) !important; }
html.wp-theme #publishModal .pm-primary-btn:active { transform: none !important; }

/* Progression. Le rail est SEGMENTÉ : une case par étape. La règle
   précédente peignait la gouttière entière en bleu, si bien que les six cases
   paraissaient franchies alors que la première tournait encore — exactement
   le contraire de ce que le rail doit dire. La gouttière redevient grise, et
   ce sont les cases qui portent l'état. */
html.wp-theme #publishModal .pm-rail {
    background: #f0f0f1 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px #dcdcde !important;
}
html.wp-theme #publishModal .pm-seg { background: #dcdcde !important; border-radius: 0 !important; }
html.wp-theme #publishModal .pm-seg[data-etat="faite"]    { background: #00a32a !important; }
html.wp-theme #publishModal .pm-seg[data-etat="alerte"]   { background: #dba617 !important; }
html.wp-theme #publishModal .pm-seg[data-etat="abandon"]  { background: #dcdcde !important; }
html.wp-theme #publishModal .pm-seg[data-etat="courante"] {
    background: repeating-linear-gradient(115deg, var(--wp-blue) 0 9px, #4f94d4 9px 18px) !important;
    background-size: 200% 100% !important;
}
html.wp-theme #pmSpinner { border-color: #dcdcde !important; border-top-color: var(--wp-blue) !important; }

/* Modale « Auteur », ouverte depuis un point de preflight : même famille. */
html.wp-theme #pmAuthorModal { font-family: var(--wp-font) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Bibliothèque d'images — maquette « Bibliothèque médias WP » (Claude Design)
   ---------------------------------------------------------------------------
   Même principe que la modale de publication : le balisage et le JavaScript
   (filtres, multi-sélection, panneau de détails, upload) ne bougent pas, seule
   l'apparence est refaite, et seulement sous le thème WordPress.
   ═══════════════════════════════════════════════════════════════════════════ */

html.wp-theme #mediaLibraryModal { font-family: var(--wp-font) !important; }
html.wp-theme #mediaLibraryModal > div:first-child { background: rgba(0,0,0,0.35) !important; }

/* Fenêtre : centrée, 1440 px au plus, angles droits. */
html.wp-theme #mlShell {
    inset: 32px 24px !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 48px) !important;
    max-width: 1440px !important;
    transform: translateX(-50%);
    background: #fff !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 3px 30px rgba(0,0,0,0.25) !important;
    color: var(--wp-text) !important;
}

/* Page « Médias » : la bibliothèque n'y est PAS une fenêtre — elle occupe la
   colonne comme n'importe quel contenu (voir media/index.blade.php, qui repasse
   le shell en `position: static`). Les règles de fenêtre ci-dessus sont posées
   en !important : elles écrasaient `inset: auto` et surtout gardaient
   `transform: translateX(-50%)`, qui décalait de la moitié de sa largeur un
   bloc resté dans le flux — titre et colonne des collections sortaient par la
   gauche. On rend donc la boîte au flux, ici aussi. */
html.wp-theme .ml-page #mlShell {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    box-shadow: none !important;
}

/* En-tête sombre : pastille carrée bleue, titre + décompte, action, fermeture. */
html.wp-theme #mlShell > div:first-child {
    background: var(--wp-dark) !important;
    border-bottom: 0 !important;
    padding: 12px 20px !important;
    gap: 12px !important;
}
html.wp-theme #mlShell > div:first-child > div:first-child {
    width: 30px !important;
    height: 30px !important;
    border-radius: 2px !important;
    background: var(--wp-blue) !important;
}
html.wp-theme #mlShell > div:first-child > div:first-child svg { stroke: #fff !important; width: 17px; height: 17px; }
html.wp-theme #mlShell > div:first-child > div:nth-child(2) > div:first-child {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #f0f0f1 !important;
    letter-spacing: normal !important;
}
html.wp-theme #mediaLibraryCount { font-size: 12px !important; color: #a7aaad !important; }
html.wp-theme #mediaLibraryModal .ml-btn { transition: background .15s !important; }
html.wp-theme #mediaLibraryModal .ml-btn:hover { filter: none !important; }
html.wp-theme #mediaLibraryModal .ml-btn:active { transform: none !important; }
/* « Ajouter un fichier média » : bouton principal de WordPress. */
html.wp-theme #mlShell > div:first-child > button:not([onclick*="close"]) {
    background: var(--wp-blue) !important;
    border: 1px solid var(--wp-blue) !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 16px !important;
    box-shadow: 0 1px 0 var(--wp-blue-hover) !important;
}
html.wp-theme #mlShell > div:first-child > button:not([onclick*="close"]):hover { background: var(--wp-blue-hover) !important; }
html.wp-theme #mlShell > div:first-child > button[onclick*="close"] {
    width: 28px !important;
    height: 28px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #a7aaad !important;
}
html.wp-theme #mlShell > div:first-child > button[onclick*="close"]:hover { color: #fff !important; }

/* Colonne des collections. */
html.wp-theme #mlSidebar {
    width: 230px !important;
    background: var(--wp-bg) !important;
    border-right: 1px solid var(--wp-border) !important;
    padding: 16px 0 !important;
    gap: 0 !important;
}
html.wp-theme #mlSidebar > div > div:first-child {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #646970 !important;
    padding: 0 16px 8px !important;
}
html.wp-theme #mlSidebar > div:nth-child(2) { margin-top: 18px; }
html.wp-theme #mediaLibraryModal .ml-filter-btn {
    padding: 8px 16px !important;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    font-size: 13px !important;
    color: var(--wp-blue) !important;
    background: transparent !important;
    box-shadow: none !important;
}
html.wp-theme #mediaLibraryModal .ml-filter-btn:hover:not([data-active]) { background: #e5e5e7 !important; }
html.wp-theme #mediaLibraryModal .ml-filter-btn[data-active] {
    background: #fff !important;
    border-left-color: var(--wp-blue) !important;
    color: #1d2327 !important;
    font-weight: 600 !important;
}
html.wp-theme #mediaLibraryModal .ml-filter-count { color: #646970 !important; font-size: 12px !important; }
/* Pastilles HD / SD */
html.wp-theme #mediaLibraryModal .ml-filter-chip {
    border: 1px solid var(--wp-border) !important;
    border-left: 1px solid var(--wp-border) !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: var(--wp-blue) !important;
    padding: 5px 0 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    justify-content: center !important;
}
html.wp-theme #mediaLibraryModal .ml-filter-chip:hover,
html.wp-theme #mediaLibraryModal .ml-filter-chip[data-active] { border-color: var(--wp-blue) !important; }
/* Encart de stockage, en pied de colonne. */
html.wp-theme #mlStorageCard {
    background: #fff !important;
    border: 1px solid var(--wp-border) !important;
    border-left: 4px solid var(--wp-blue) !important;
    border-radius: 0 !important;
    margin: 16px !important;
    padding: 12px !important;
}
html.wp-theme #mlStorageCard > div:first-child { font-size: 13px !important; font-weight: 600 !important; color: #1d2327 !important; }
html.wp-theme #mlStorageInfo { font-size: 12px !important; color: #646970 !important; margin-top: 2px !important; }

/* Barre d'outils de la grille. */
html.wp-theme #mediaLibraryModal #mlMultiToggle {
    flex-direction: row !important;
    white-space: nowrap !important;
    background: #f6f7f7 !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 3px !important;
    color: var(--wp-blue) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 12px !important;
}
html.wp-theme #mediaLibraryModal #mlMultiToggle:hover { border-color: var(--wp-blue) !important; }
html.wp-theme #mediaLibraryModal #mlSort,
html.wp-theme #mediaLibraryModal #mlSearch {
    border: 1px solid #8c8f94 !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    color: #2c3338 !important;
    background: #fff !important;
}
html.wp-theme #mediaLibraryModal #mlSearch { padding: 6px 10px !important; }
html.wp-theme #mediaLibraryModal #mlSort:focus,
html.wp-theme #mediaLibraryModal #mlSearch:focus { border-color: var(--wp-blue) !important; box-shadow: 0 0 0 1px var(--wp-blue) !important; }
/* Le champ de recherche vit dans une capsule bordée : on neutralise LA
   CAPSULE (pas le champ, qui porte désormais la bordure lui-même). */
html.wp-theme #mediaLibraryModal div:has(> #mlSearch) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
}
html.wp-theme #mediaLibraryModal div:has(> #mlSearch) svg { display: none; }

/* Grille : vignettes carrées bordées, titre bleu, méta grise. */
html.wp-theme #mediaLibraryGrid { padding: 16px 20px !important; }
html.wp-theme #mlGridInner { gap: 14px !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
html.wp-theme #mediaLibraryModal .ml-thumb {
    border: 2px solid #dcdcde !important;
    border-radius: 2px !important;
    background: var(--wp-bg) !important;
    box-shadow: none !important;
}
html.wp-theme #mediaLibraryModal .ml-item:hover .ml-thumb { transform: none !important; box-shadow: none !important; border-color: #8c8f94 !important; }
html.wp-theme #mediaLibraryModal .ml-item-selected .ml-thumb,
html.wp-theme #mediaLibraryModal .ml-item-multi .ml-thumb { border-color: var(--wp-blue) !important; }
html.wp-theme #mediaLibraryModal .ml-item > div:last-child > div:first-child {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--wp-blue) !important;
    margin-top: 6px;
}
html.wp-theme #mediaLibraryModal .ml-item > div:last-child > div:last-child { font-size: 11px !important; color: #646970 !important; }

/* Panneau de détails. */
html.wp-theme #mlPreviewPanel {
    width: 280px !important;
    background: #f6f7f7 !important;
    border-left: 1px solid var(--wp-border) !important;
}
html.wp-theme #mlPreviewPanel > div { width: 280px !important; }
html.wp-theme #mlPreviewPanel > div > div:first-child {
    border-bottom: 0 !important;
    padding: 16px 16px 8px !important;
}
html.wp-theme #mlPreviewPanel > div > div:first-child span {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #646970 !important;
}
html.wp-theme #mediaLibraryModal .ml-label { font-size: 11px !important; letter-spacing: 0.5px !important; color: #646970 !important; }
html.wp-theme #mediaLibraryModal .ml-value { font-size: 13px !important; color: #1d2327 !important; }
html.wp-theme #mlPreviewTitle { font-size: 13px !important; font-weight: 600 !important; color: #1d2327 !important; }
html.wp-theme #mlPreviewImg { border-radius: 0 !important; }
html.wp-theme #mlPreviewContent > div:first-child > div:first-child {
    border: 1px solid var(--wp-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--wp-bg) !important;
}
html.wp-theme #mediaLibraryModal #mlUseBtn {
    background: var(--wp-blue) !important;
    border: 1px solid var(--wp-blue) !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
}
html.wp-theme #mediaLibraryModal #mlUseBtn:hover { background: var(--wp-blue-hover) !important; }
html.wp-theme #mediaLibraryModal #mlRestoreBtn {
    background: #f6f7f7 !important;
    border: 1px solid var(--wp-blue) !important;
    color: var(--wp-blue) !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
html.wp-theme #mediaLibraryModal #mlRestoreBtn:hover { background: #f0f6fc !important; }
html.wp-theme #mlPreviewActions a { font-size: 13px !important; font-weight: 400 !important; }
html.wp-theme #mlDeleteLink { color: var(--wp-red) !important; }
html.wp-theme #mlDeleteLink:hover { color: #b32d2e !important; }
html.wp-theme #mediaLibraryModal .ml-shimmer { animation: none !important; background: var(--wp-bg) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Onglet Visuel — maquette « Photos article WP » (Claude Design)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sélecteur de composition : cartes de 110 px, angles droits, active en bleu. */
html.wp-theme #tab-visual .comp-icon { background-color: #50575e; }
html.wp-theme #tab-visual button:hover .comp-icon,
html.wp-theme #tab-visual .comp-icon.is-active { background-color: var(--wp-blue) !important; }
html.wp-theme #tab-visual .group.flex-col {
    /* Largeur plancher, pas fixe : « Image dans l'image » passait à la ligne. */
    min-width: 110px;
    border-radius: 2px !important;
    border-color: var(--wp-border) !important;
    background: #fff !important;
    padding: 12px 8px 10px !important;
    gap: 8px !important;
    box-shadow: none !important;
}
html.wp-theme #tab-visual .group.flex-col:hover { border-color: var(--wp-blue) !important; }
html.wp-theme #tab-visual .group.flex-col.ring-1 {
    border-color: var(--wp-blue) !important;
    background: #f0f6fc !important;
    --tw-ring-color: transparent;
}
html.wp-theme #tab-visual .group.flex-col > span:last-child { font-size: 12px !important; color: #3c434a !important; white-space: nowrap; }
html.wp-theme #tab-visual .group.flex-col.ring-1 > span:last-child { color: var(--wp-blue) !important; }

/* En-tête « Photos de l'article ». */
html.wp-theme #tab-visual h3 { font-size: 15px !important; color: #1d2327 !important; }
html.wp-theme #tab-visual h3 + *, html.wp-theme #tab-visual .border-b { border-bottom-color: #dcdcde !important; }

/* Ligne « Image à la une » : étoile et dimensions en bleu. */
html.wp-theme #tab-visual h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #1d2327 !important;
}
html.wp-theme #tab-visual h4 .material-symbols-outlined { color: var(--wp-blue) !important; }
html.wp-theme #tab-visual h4 + span { color: var(--wp-blue) !important; font-size: 12px !important; }

/* Zone de dépôt : cadre à angles droits sur fond hachuré, comme la maquette. */
html.wp-theme #image-picker-label {
    border: 2px dashed #8c8f94 !important;
    border-radius: 2px !important;
    background: repeating-linear-gradient(45deg, #f0f0f1 0 14px, #e5e5e7 14px 28px) !important;
}
html.wp-theme #image-picker-label:hover { border-color: var(--wp-blue) !important; }
html.wp-theme #image-picker-label p:first-of-type { font-size: 12px !important; color: #3c434a !important; }
html.wp-theme #image-picker-label p:last-of-type { font-size: 11px !important; color: #646970 !important; }
/* L'image posée : liseré bleu franc (le rendu vient du JS, d'où les !important). */
html.wp-theme #photo-featured > div,
html.wp-theme #photo-featured img { border-radius: 2px !important; }
html.wp-theme #photo-featured > div { border: 2px solid var(--wp-blue) !important; box-shadow: none !important; }

/* Actions sous l'image : boutons secondaires WordPress. */
html.wp-theme #tab-visual .inline-flex.rounded-lg,
html.wp-theme #tab-visual button.inline-flex {
    background: #f6f7f7 !important;
    border: 1px solid var(--wp-blue) !important;
    color: var(--wp-blue) !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 7px 14px !important;
    box-shadow: none !important;
}
html.wp-theme #tab-visual button.inline-flex:hover { background: #f0f6fc !important; border-color: var(--wp-blue) !important; color: var(--wp-blue) !important; }
html.wp-theme #tab-visual button.inline-flex .material-symbols-outlined { color: inherit !important; font-size: 16px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Prepress Studio — maquette « Éditeur image WP » (Claude Design)
   ═══════════════════════════════════════════════════════════════════════════ */

html.wp-theme .ps-modal {
    background: rgba(0,0,0,0.35) !important;
    backdrop-filter: none !important;
    padding: 32px 24px !important;
    /* Centrée verticalement : la maquette étire la fenêtre sur toute la
       hauteur, mais le Studio n'a pas toujours de quoi la remplir — il
       restait alors collé en haut. */
    align-items: center !important;
    font-family: var(--wp-font) !important;
}
html.wp-theme .ps-shell {
    max-width: 1440px !important;
    max-height: calc(100vh - 64px) !important;
    border: 1px solid var(--wp-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 3px 30px rgba(0,0,0,0.25) !important;
}

/* Barre de titre sombre. */
html.wp-theme .ps-header {
    height: auto !important;
    padding: 12px 20px !important;
    background: var(--wp-dark) !important;
    border-bottom: 0 !important;
}
html.wp-theme .ps-title { font-size: 15px !important; color: #f0f0f1 !important; gap: 12px !important; }
/* Le logo garde sa forme : rond, sur pastille sombre. Le carré bleu venait du
   remappage général des fonds vers le bleu du thème — appliqué ici, il
   enfermait une sphère dans un carré de la couleur d'un bouton. */
html.wp-theme .ps-title .ps-logo {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #17171b !important;
}
html.wp-theme .ps-header-sep { background: #50575e !important; }
/* Boutons de la barre : cerclés sur fond sombre, sauf l'action principale. */
html.wp-theme .ps-header .ps-btn {
    background: transparent !important;
    border: 1px solid #50575e !important;
    color: #f0f0f1 !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 6px 14px !important;
    height: auto !important;
    min-height: 0 !important;
}
html.wp-theme .ps-header .ps-btn:hover { background: transparent !important; border-color: #a7aaad !important; }
html.wp-theme .ps-header .ps-btn.ps-btn-icon { padding: 6px 10px !important; min-width: 0 !important; }
html.wp-theme .ps-header .ps-btn.active { background: #2c3338 !important; border-color: #a7aaad !important; color: #fff !important; }
html.wp-theme .ps-header .ps-btn-primary {
    background: var(--wp-blue) !important;
    border-color: var(--wp-blue) !important;
    color: #fff !important;
    padding: 6px 16px !important;
    box-shadow: 0 1px 0 var(--wp-blue-hover) !important;
}
html.wp-theme .ps-header .ps-btn-primary:hover { background: var(--wp-blue-hover) !important; border-color: var(--wp-blue-hover) !important; }
html.wp-theme .ps-close {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 28px !important;
    height: 28px !important;
    color: #a7aaad !important;
}
html.wp-theme .ps-close:hover { color: #fff !important; }

/* Rail d'outils : colonne claire, outil courant en carte blanche. */
html.wp-theme .ps-rail {
    width: 96px !important;
    background: var(--wp-bg) !important;
    border-right: 1px solid var(--wp-border) !important;
    padding: 16px 10px !important;
}
html.wp-theme .ps-rail-item {
    border-radius: 3px !important;
    border-left: 3px solid transparent !important;
    padding: 10px 4px !important;
    gap: 5px !important;
    color: #3c434a !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
html.wp-theme .ps-rail-item:hover { background: #e5e5e7 !important; color: #3c434a !important; }
html.wp-theme .ps-rail-item.active {
    background: #fff !important;
    color: var(--wp-blue) !important;
    border-left-color: var(--wp-blue) !important;
    box-shadow: none !important;
}
html.wp-theme .ps-rail-sep { background: var(--wp-border) !important; }

/* Plan de travail : fond sombre hachuré, poignées bleues. */
html.wp-theme .ps-canvas-wrap {
    background: repeating-linear-gradient(45deg, #2c3338 0 16px, #23282d 16px 32px) !important;
}
html.wp-theme .ps-direct-handle {
    background: #2c3338 !important;
    border: 1px solid #50575e !important;
    color: #f0f0f1 !important;
    box-shadow: none !important;
}
html.wp-theme .ps-direct-handle:hover { border-color: #a7aaad !important; }

/* Inspecteur. */
html.wp-theme .ps-inspector { border-left: 1px solid var(--wp-border) !important; }
html.wp-theme .ps-ins-head { border-bottom: 1px solid #dcdcde !important; padding: 20px 20px 16px !important; }
html.wp-theme .ps-ins-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 3px !important;
    background: #f0f6fc !important;
    border: 1px solid var(--wp-blue) !important;
    color: var(--wp-blue) !important;
}
html.wp-theme .ps-ins-title { font-size: 15px !important; color: #1d2327 !important; }
html.wp-theme .ps-ins-desc { font-size: 12.5px !important; color: #646970 !important; }
html.wp-theme .ps-ins-foot { border-top: 1px solid #dcdcde !important; }
html.wp-theme .ps-field-label { font-size: 12px !important; color: #1d2327 !important; }
html.wp-theme .ps-input,
html.wp-theme .ps-select,
html.wp-theme .ps-modal textarea {
    border: 1px solid #8c8f94 !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    color: #2c3338 !important;
    background: #fff !important;
    box-shadow: none !important;
}
html.wp-theme .ps-input:focus,
html.wp-theme .ps-select:focus,
html.wp-theme .ps-modal textarea:focus {
    border-color: var(--wp-blue) !important;
    box-shadow: 0 0 0 1px var(--wp-blue) !important;
    outline: 2px solid transparent !important;
}
/* Bouton d'action de l'inspecteur : le bleu de WordPress, à angles droits. */
html.wp-theme .ps-cta {
    background: var(--wp-blue) !important;
    border: 1px solid var(--wp-blue) !important;
    border-radius: 3px !important;
    height: 34px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    box-shadow: 0 1px 0 var(--wp-blue-hover) !important;
}
html.wp-theme .ps-cta:hover { background: var(--wp-blue-hover) !important; }
/* Boutons secondaires de l'inspecteur (pivot, symétries, verrou de ratio). */
html.wp-theme .ps-inspector .ps-btn {
    background: #f6f7f7 !important;
    border: 1px solid #8c8f94 !important;
    color: #2c3338 !important;
    border-radius: 3px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
html.wp-theme .ps-inspector .ps-btn:hover { border-color: var(--wp-blue) !important; color: var(--wp-blue) !important; }
html.wp-theme .ps-inspector .ps-btn.active { background: #f0f6fc !important; border-color: var(--wp-blue) !important; color: var(--wp-blue) !important; }