/*
 * Branding 23 Juin appliqué à WP admin + page de connexion.
 * Palette extraite de www.23juin.fr.
 */

:root {
    --vtjcore-brand:       #2C4463;
    --vtjcore-brand-dark:  #1C3050;
    --vtjcore-accent:      #C45F39;
    --vtjcore-accent-dark: #A84B2D;
    --vtjcore-cream:       #FAF7EE;
    --vtjcore-cream-deep:  #F0EADD;
    --vtjcore-sage:        #B4B991;
    --vtjcore-text-muted:  rgba(255, 255, 255, 0.55);

    --vtjcore-radius-sm:   6px;
    --vtjcore-radius-md:   8px;
    --vtjcore-radius-lg:   12px;
    --vtjcore-border-soft: rgba(44, 68, 99, 0.10);
    --vtjcore-border-line: rgba(44, 68, 99, 0.08);
    --vtjcore-shadow-sm:   0 1px 2px rgba(44, 68, 99, 0.05);
    --vtjcore-shadow-md:   0 4px 12px rgba(44, 68, 99, 0.08);
}

/* =============================================================
   PAGE DE CONNEXION — layout split-screen façon clients.23juin.fr
   ============================================================= */

body.login {
    background: var(--vtjcore-cream);
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    color: var(--vtjcore-brand);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Fond bleu marine du panel gauche, fixe pour couvrir le scroll */
body.login::before {
    content: "";
    position: fixed;
    inset: 0 60% 0 0;
    background: var(--vtjcore-brand);
    z-index: 0;
}

/* Aside injecté par AdminBranding::printLoginAside() */
.vtjcore-login-aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 40%;
    height: 100vh;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    color: #fff;
    z-index: 1;
    box-sizing: border-box;
}

.vtjcore-login-aside__top {
    display: flex;
    align-items: center;
}

.vtjcore-login-aside__logo {
    width: 140px;
    height: auto;
    /* Logo SVG est en #2C4463, on l'inverse en blanc pour fond bleu marine */
    filter: brightness(0) invert(1);
}

.vtjcore-login-aside__center {
    max-width: 380px;
}

.vtjcore-login-aside__label {
    color: var(--vtjcore-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 20px;
}

.vtjcore-login-aside__title {
    font-size: 38px;
    line-height: 1.15;
    color: #fff;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
    /* WP applique `.login h1 { text-align: center }` natif, plus spécifique que
       `.vtjcore-login-aside__title` — `!important` est obligatoire pour gagner. */
    text-align: left !important;
}

.vtjcore-login-aside__title em {
    color: var(--vtjcore-accent);
    font-style: italic;
    font-weight: 400;
    display: block;
}

.vtjcore-login-aside__caption {
    color: var(--vtjcore-text-muted);
    font-size: 13px;
    margin: 0;
}

/* Le container WP du formulaire occupe la moitié droite */
#login {
    position: relative;
    z-index: 2;
    margin: 0 0 0 40% !important;
    width: 60% !important;
    max-width: none !important;
    min-height: 100vh;
    padding: 0 64px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* On masque le h1 (logo dupliqué — déjà dans la sidebar gauche) */
#login h1 {
    display: none !important;
}

/* Stepper décoratif au-dessus du formulaire */
.vtjcore-login-stepper {
    display: flex;
    gap: 6px;
    margin: 0 0 32px;
    justify-content: center;
}
.vtjcore-login-stepper__dot {
    display: block;
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: var(--vtjcore-cream-deep);
}
.vtjcore-login-stepper__dot--active {
    background: var(--vtjcore-accent);
}

/* Titre du formulaire */
.vtjcore-login-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--vtjcore-brand);
    margin: 0 0 12px;
    text-align: center;
    letter-spacing: -0.01em;
}

.vtjcore-login-subtitle {
    color: rgba(44, 68, 99, 0.65);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 28px;
}

/* Formulaire WP — épuré pour ressembler à la maquette */
#loginform,
#lostpasswordform,
#registerform {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 380px;
}

#loginform p,
#lostpasswordform p,
#registerform p {
    margin-bottom: 14px;
}

#loginform label,
#lostpasswordform label,
#registerform label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(44, 68, 99, 0.7);
}

#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"],
#registerform input[type="text"],
#registerform input[type="email"] {
    background: #fff !important;
    border: 1px solid rgba(44, 68, 99, 0.15) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box;
    color: var(--vtjcore-brand);
}

#loginform input:focus,
#lostpasswordform input:focus,
#registerform input:focus {
    border-color: var(--vtjcore-brand) !important;
    box-shadow: 0 0 0 3px rgba(44, 68, 99, 0.12) !important;
    outline: 0 !important;
}

/* Bouton principal en orange terracotta, pleine largeur, arrondi */
body.login .button.button-primary,
body.login #wp-submit {
    background: var(--vtjcore-accent) !important;
    border-color: var(--vtjcore-accent) !important;
    color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    height: auto !important;
    width: 100% !important;
    line-height: 1 !important;
    margin-top: 8px !important;
    transition: background-color .15s, transform .05s;
}
body.login .button.button-primary:hover,
body.login #wp-submit:hover,
body.login .button.button-primary:focus,
body.login #wp-submit:focus {
    background: var(--vtjcore-accent-dark) !important;
    border-color: var(--vtjcore-accent-dark) !important;
}
body.login .button.button-primary:focus,
body.login #wp-submit:focus {
    box-shadow: 0 0 0 3px rgba(196, 95, 57, 0.25) !important;
}

/* Checkbox "Se souvenir" — style cohérent */
.login .forgetmenot {
    margin: 16px 0 8px;
    font-size: 13px;
    color: rgba(44, 68, 99, 0.75);
}
.login .forgetmenot label {
    color: inherit;
}
.login input[type="checkbox"]:checked::before {
    color: var(--vtjcore-accent);
}

/* Liens secondaires */
.login #nav,
.login #backtoblog {
    text-align: center;
    margin: 12px 0;
    font-size: 13px;
}
.login #nav a,
.login #backtoblog a {
    color: var(--vtjcore-brand);
    text-decoration: none;
}
.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--vtjcore-accent);
    text-decoration: underline;
}

/* Footer du panel droit : aligné dans la zone droite uniquement (sinon la moitié
   du texte tombe sur le fond bleu marine où sa couleur est invisible).
   z-index supérieur à #login pour que le lien reste cliquable. */
.vtjcore-login-footer {
    position: absolute;
    bottom: 32px;
    left: 40%;
    right: 0;
    z-index: 3;
    text-align: center;
    font-size: 12px;
    color: rgba(44, 68, 99, 0.5);
}
.vtjcore-login-footer a {
    color: var(--vtjcore-accent);
    text-decoration: none;
    font-weight: 600;
}

/* Neutralise le bleu pâle du Chrome autofill pour rester cohérent avec le design. */
body.login input:-webkit-autofill,
body.login input:-webkit-autofill:hover,
body.login input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color: var(--vtjcore-brand) !important;
    caret-color: var(--vtjcore-brand);
    border: 1px solid rgba(44, 68, 99, 0.15) !important;
    border-radius: 10px !important;
}

/* Messages d'erreur WP */
body.login .message,
body.login #login_error {
    background: #fff !important;
    border-left: 4px solid var(--vtjcore-accent) !important;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

/* === Responsive === */
@media (max-width: 900px) {
    body.login::before {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 220px;
    }
    .vtjcore-login-aside {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 220px;
        padding: 32px 28px;
    }
    .vtjcore-login-aside__title {
        font-size: 28px;
    }
    #login {
        margin: 0 !important;
        width: 100% !important;
        padding: 32px 24px !important;
        min-height: auto;
    }
    .vtjcore-login-footer {
        position: static;
        margin-top: 32px;
    }
}

/* =============================================================
   BACK-OFFICE — sidebar style "pills" aérées (façon uiPress/Notion)
   Items espacés, état actif en pill arrondie au lieu d'une barre pleine
   largeur, sub-menu sans surfaces colorées.
   ============================================================= */

#adminmenuwrap,
#adminmenuback,
#adminmenu {
    background: var(--vtjcore-brand);
}

/* Élargir la sidebar à 200px en mode déplié (y compris quand WP active `.auto-fold`
   pour les écrans entre 783 et 960px). Seul le mode `.folded` (utilisateur clique
   sur « Replier le menu ») conserve le comportement WP natif à 36px.
   `!important` est nécessaire car WP applique parfois un style="width:36px" inline
   via JavaScript en mode responsive, ce qui bat un CSS classique. */
@media screen and (min-width: 783px) {
    body:not(.folded) #adminmenu,
    body:not(.folded) #adminmenuback,
    body:not(.folded) #adminmenuwrap {
        width: 200px !important;
    }
    body:not(.folded) #wpcontent,
    body:not(.folded) #wpfooter {
        margin-left: 200px !important;
    }
}

/* Mode replié / auto-fold : on resserre uniquement les marges horizontales pour que
   la pill arrondie tienne dans 36px sans déborder. On laisse WP gérer le masquage
   du label et le positionnement de l'icône (sinon on casse le layout quand la sidebar
   est déployée temporairement au survol en mode tablette). */
.folded #adminmenu,
.auto-fold #adminmenu {
    padding: 4px 0;
}

.folded #adminmenu a.menu-top,
.auto-fold #adminmenu a.menu-top {
    margin: 1px 2px;
    border-radius: 6px;
}

#adminmenu {
    padding: 4px;
}

/* Séparateurs : invisibles mais avec un peu d'air entre groupes */
#adminmenu li.wp-menu-separator {
    background: transparent;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Items top-level : pill arrondie, padding resserré */
#adminmenu li.menu-top > a.menu-top,
#adminmenu li.menu-top {
    margin: 1px 0;
}

#adminmenu a.menu-top {
    border-radius: 8px;
    font-weight: 400;
    line-height: 1.3;
    transition: background-color .12s, color .12s;
}

#adminmenu a,
#adminmenu .wp-menu-name {
    color: rgba(255, 255, 255, 0.82);
    font-weight: 400;
}

#adminmenu div.wp-menu-image::before {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    transition: color .12s;
}

/* Hover : pill subtile */
#adminmenu li.menu-top:hover > a.menu-top,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
}

#adminmenu li.menu-top:hover div.wp-menu-image::before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image::before {
    color: #fff !important;
}

/* Item actif : pill plus marquée, sans barre orange */
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
.folded #adminmenu li.wp-has-current-submenu {
    background: rgba(255, 255, 255, 0.11) !important;
    color: #fff !important;
    font-weight: 500;
    box-shadow: none !important;
}

#adminmenu li.current div.wp-menu-image::before,
#adminmenu li.wp-has-current-submenu div.wp-menu-image::before {
    color: #fff !important;
}

/* Sub-menu : transparent par défaut (intégré à la sidebar). Le fond et la shadow
   sont réservés au mode `.folded` où le sub-menu apparaît en flyout et a besoin
   d'être lisible (règle dédiée plus bas). */
#adminmenu .wp-submenu {
    background: transparent;
    box-shadow: none;
    padding: 4px 0 4px 20px;
    border: 0;
    margin-left: 0;
}

/* Item parent du sub-menu courant : on colorise le <li> entier en brand-dark.
   Visuellement, cela crée une « capsule » foncée qui englobe l'item parent (avec
   sa pill blanche par-dessus) et le sub-menu en dessous. */
body:not(.folded) #adminmenu li.wp-has-current-submenu {
    background-color: #3e5b80;
    border-radius: 8px;
}

/* Ancre de positionnement du flyout : le <li> top-level doit être en position relative
   pour que son sous-menu absolu se cale dessus. Le core le fait déjà au survol, on le
   garantit aussi pour le cas focus clavier. */
body:not(.folded) #adminmenu li.menu-top {
    position: relative;
}

/* Sub-menu qui s'ouvre AU HOVER / FOCUS sur un item non courant (fly-out à droite) :
   le <li> reçoit la classe `.opensub` (souris) ; au clavier, le core affiche le flyout
   via `a.menu-top:focus + .wp-submenu`. On exclut `.wp-has-current-submenu` car ces items
   ont déjà la capsule foncée appliquée sur le <li> entier (sinon double fond au survol de
   l'item courant).

   POSITIONNEMENT : le core WP positionne ce flyout à `left: 160px` (largeur NATIVE de la
   sidebar). Or on l'élargit à 200px (cf. plus haut) sans corriger ce décalage : le flyout
   passait alors 40px SOUS la sidebar (début des libellés masqué, effet « sous-menu en
   dessous » constaté depuis WP 7). On le recale au bord droit du <li> (`left: 100%`, donc
   indépendant de la largeur exacte) et on le laisse s'adapter à son contenu (`width: auto`). */
body:not(.folded) #adminmenu li.menu-top.opensub:not(.wp-has-current-submenu) > .wp-submenu,
body:not(.folded) #adminmenu li.menu-top:not(.wp-has-current-submenu) > a.menu-top:focus + .wp-submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 4px;
    width: auto;
    min-width: 180px;
    z-index: 9999;
    background: #546d8e;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

#adminmenu .wp-submenu a {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 6px;
    margin: 1px 0;
    transition: background-color .12s, color .12s;
}

/* Hover / focus sur un sub-item : pill foncée (même look que le hover top-level) */
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
    color: #fff !important;
    background: var(--vtjcore-brand-dark) !important;
}

/* Sub-item courant : blanc + bold, pas de fond */
#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu a.current {
    color: #fff !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Mode `.folded` (sidebar à 36px) : le sub-menu apparaît en flyout et doit
   conserver un fond pour être lisible (sinon il flotte sur le contenu admin). */
.folded #adminmenu .wp-submenu {
    background: var(--vtjcore-brand-dark);
    border-radius: 10px;
    padding: 6px;
    margin-left: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Head du sub-menu (titre dupliqué) : on masque, redondant en style pills */
#adminmenu .wp-submenu .wp-submenu-head {
    display: none !important;
}

/* Flèche WP entre l'item parent et son flyout : décorative, gris foncé natif
   #1d2327 qui détonne sur notre bleu marine — on la cache.
   Existe sous deux formes : `.wp-menu-arrow` (élément) et un `::after` triangle
   généré directement sur le <li.wp-has-submenu> au hover/focus. */
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.wp-has-submenu::after {
    display: none !important;
    content: none !important;
}

/* Compositions (Patterns) sous Apparence : fallback CSS qui masque le <li>
   parent du lien (et pas juste le <a> pour éviter un <li> vide). Sélecteur
   volontairement large — l'ID du <li> top-level (menu-appearance vs menu-themes
   selon les versions) n'est pas garanti. */
#adminmenu .wp-submenu li:has(> a[href*="pattern"]),
#adminmenu .wp-submenu li:has(> a[href*="wp_block"]) {
    display: none !important;
}
/* Fallback pour navigateurs sans support `:has()` : on masque au moins le <a>. */
#adminmenu .wp-submenu a[href*="site-editor.php?p=/pattern"],
#adminmenu .wp-submenu a[href*="post_type=wp_block"] {
    display: none !important;
}

/* Évite le scroll horizontal parasite dans l'admin (cas où une grille ou un
   contenu déborde légèrement à droite). Le scroll vertical reste actif. */
body.wp-admin {
    overflow-x: hidden;
}


/* Page « Apparence > Menus » : WP applique nativement `margin-right: 20px` et
   `width: 100%` sur #menu-management, ce qui crée un débordement de 20px et
   un scroll horizontal. On neutralise + box-sizing: border-box pour que le
   padding ne s'ajoute pas à la largeur. */
#wpcontent #menu-management {
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* =============================================================
   PAGE MENUS (Apparence > Menus) — quirks spécifiques
   ============================================================= */

/* Bannière d'info en haut de page ("Créez votre premier menu ci-dessous.") */
.menu-edit .menu-name-label,
#menu-management .updated,
#menu-management p.post-body-plain {
    border-radius: var(--vtjcore-radius-md);
}

/* Le bouton "Gérer avec la prévisualisation en direct" à droite du titre */
.nav-menus-php .wp-core-ui .button.button-primary {
    border-radius: var(--vtjcore-radius-sm);
}

/* Metaboxes de la sidebar gauche "Ajouter des éléments" — radius forcé au cas
   où le CSS WP de cette page utilise une spécificité particulière. */
#nav-menu-meta .postbox,
#nav-menu-meta .postbox > .postbox-header {
    border-radius: var(--vtjcore-radius-md);
}

/* La grosse colonne droite "Structure du menu" — radius + shadow.
   Le padding ici est sûr grâce au `box-sizing: border-box` posé ci-dessus
   sur `#wpcontent #menu-management`. */
#menu-management {
    border: 1px solid var(--vtjcore-border-soft);
    border-radius: var(--vtjcore-radius-md);
    box-shadow: var(--vtjcore-shadow-sm);
    background: #fff;
    padding: 16px 20px;
    margin-top: 0;
}

#menu-management .menu-edit {
    background: transparent;
    border: 0;
    padding: 0;
}

#menu-management .menu-edit .menu-settings {
    border-top: 1px solid var(--vtjcore-border-line);
    padding-top: 16px;
    margin-top: 16px;
}

/* =============================================================
   ICÔNES — remplace les Dashicons natifs WP par des Lucide (MIT)
   Technique : mask-image SVG inline + background-color: currentColor pour
   hériter de la couleur du texte (hover, actif, etc.).
   Plugins tiers (SCF, Yoast, CompressX) conservent leurs icônes.
   ============================================================= */

/* Cache le glyph dashicon natif UNIQUEMENT pour les icônes qu'on remplace.
   Sinon les plugins tiers qui utilisent dashicons-before sont privés de leur icône. */
#adminmenu .dashicons-dashboard::before,
#adminmenu .dashicons-shield-alt::before,
#adminmenu .dashicons-shield::before,
#adminmenu .dashicons-admin-post::before,
#adminmenu .dashicons-admin-media::before,
#adminmenu .dashicons-admin-media-alt::before,
#adminmenu .dashicons-admin-page::before,
#adminmenu .dashicons-admin-comments::before,
#adminmenu .dashicons-admin-appearance::before,
#adminmenu .dashicons-admin-plugins::before,
#adminmenu .dashicons-admin-users::before,
#adminmenu .dashicons-admin-tools::before,
#adminmenu .dashicons-admin-settings::before,
#adminmenu .dashicons-admin-generic::before {
    content: "" !important;
    display: none;
}

/* Style commun aux icônes Lucide (mask-image) — limité aux dashicons remplacés.
   Les plugins tiers (SCF, Yoast, CompressX) gardent leurs propres icônes. */
#adminmenu .dashicons-dashboard,
#adminmenu .dashicons-shield-alt,
#adminmenu .dashicons-shield,
#adminmenu .dashicons-admin-post,
#adminmenu .dashicons-admin-media,
#adminmenu .dashicons-admin-media-alt,
#adminmenu .dashicons-admin-page,
#adminmenu .dashicons-admin-comments,
#adminmenu .dashicons-admin-appearance,
#adminmenu .dashicons-admin-plugins,
#adminmenu .dashicons-admin-users,
#adminmenu .dashicons-admin-tools,
#adminmenu .dashicons-admin-settings,
#adminmenu .dashicons-admin-generic {
    background-color: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 18px 18px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px;
}

/* Tableau de bord — layout-dashboard */
#adminmenu .dashicons-dashboard {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E");
}

/* Notre menu « 23 Juin » — shield */
#adminmenu .dashicons-shield-alt,
#adminmenu .dashicons-shield {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}

/* Articles — file-text */
#adminmenu .dashicons-admin-post {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

/* Médias — image */
#adminmenu .dashicons-admin-media,
#adminmenu .dashicons-admin-media-alt {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E");
}

/* Pages — file */
#adminmenu .dashicons-admin-page {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
}

/* Commentaires — message-square */
#adminmenu .dashicons-admin-comments {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Apparence — palette */
#adminmenu .dashicons-admin-appearance {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='%23000'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='%23000'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='%23000'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='%23000'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='%23000'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='%23000'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='%23000'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='%23000'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
}

/* Extensions — puzzle */
#adminmenu .dashicons-admin-plugins {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.872-.95a2.25 2.25 0 1 0-2.515 2.515c.47.07.88.402.95.872a.98.98 0 0 1-.276.837l-1.611 1.611c-.47.47-1.087.706-1.704.706s-1.233-.235-1.704-.706l-1.568-1.568c-.23-.23-.556-.338-.878-.289-.93.143-1.913-.149-2.617-.853-1.107-1.107-1.107-2.9 0-4.007.704-.704 1.687-.996 2.617-.853.322.049.648-.059.878-.289l3.532-3.532a3 3 0 1 0-3.847-3.847z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.872-.95a2.25 2.25 0 1 0-2.515 2.515c.47.07.88.402.95.872a.98.98 0 0 1-.276.837l-1.611 1.611c-.47.47-1.087.706-1.704.706s-1.233-.235-1.704-.706l-1.568-1.568c-.23-.23-.556-.338-.878-.289-.93.143-1.913-.149-2.617-.853-1.107-1.107-1.107-2.9 0-4.007.704-.704 1.687-.996 2.617-.853.322.049.648-.059.878-.289l3.532-3.532a3 3 0 1 0-3.847-3.847z'/%3E%3C/svg%3E");
}

/* Comptes / Utilisateurs — users */
#adminmenu .dashicons-admin-users {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Outils — wrench */
#adminmenu .dashicons-admin-tools {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
}

/* Réglages — settings (gear) */
#adminmenu .dashicons-admin-settings,
#adminmenu .dashicons-admin-generic {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Compteur "Plugins (3)", commentaires en attente : pastille discrète bleu accent */
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 999px;
    min-width: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
}

/* Quand l'item est courant ou en hover, l'accent passe en orange pour signaler */
#adminmenu li.menu-top:hover .awaiting-mod,
#adminmenu li.menu-top:hover .update-plugins,
#adminmenu li.current .awaiting-mod,
#adminmenu li.current .update-plugins,
#adminmenu li.wp-has-current-submenu .awaiting-mod,
#adminmenu li.wp-has-current-submenu .update-plugins {
    background: var(--vtjcore-accent);
    color: #fff;
}

/* Top bar : même brand que la sidebar pour une bande continue */
#wpadminbar {
    background: var(--vtjcore-brand);
}

#wpadminbar .ab-empty-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default .ab-item,
#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary .ab-item {
    color: rgba(255, 255, 255, 0.88);
}

#wpadminbar:not(.mobile) > #wp-toolbar li:hover > .ab-item,
#wpadminbar:not(.mobile) > #wp-toolbar li.hover > .ab-item,
#wpadminbar:not(.mobile) > #wp-toolbar a:focus {
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
}

#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before {
    color: rgba(255, 255, 255, 0.7);
}

/* Dropdown du top bar */
#wpadminbar .menupop .ab-sub-wrapper {
    background: var(--vtjcore-brand-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop.hover ul li a,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a {
    color: rgba(255, 255, 255, 0.85);
}

#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:hover strong,
#wpadminbar .quicklinks .menupop ul li.hover > a {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
}

/* "Howdy, admin" + avatar */
#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-item .display-name,
#wpadminbar #wp-admin-bar-my-account > .ab-item {
    color: rgba(255, 255, 255, 0.88);
}

/* Collapse menu button */
#collapse-button {
    color: rgba(255, 255, 255, 0.6);
}
#collapse-button:hover {
    color: #fff;
}

/* =============================================================
   TOP BAR — icônes Lucide + dropdown user
   Approche défensive : on touche au minimum pour éviter de casser le layout
   natif WP. Pour les icônes, on agit via `::before` (content: url(svg))
   qui hérite des dimensions du dashicon natif WP — donc pas de décalage vertical.
   ============================================================= */

/* Icône du site (à gauche de « Vitrine ») — home Lucide.
   En WP 6.9.x le glyph dashicon est sur `.ab-item::before` directement. On cible
   uniquement ce sélecteur pour éviter de dupliquer l'icône si un `.ab-icon`
   enfant existe aussi. */
#wpadminbar #wp-admin-bar-site-name > .ab-item::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffffe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") !important;
    font-family: inherit !important;
    vertical-align: middle;
    margin-right: 4px;
}

/* Icône « Créer » — plus Lucide. Sur cet item, WP injecte un <span.ab-icon>
   enfant qui porte le glyph natif via son propre `::before`. On cache le ::before
   du .ab-item (sinon doublon) et on cible le bon ::before sur .ab-icon. */
#wpadminbar #wp-admin-bar-new-content > .ab-item::before {
    content: none !important;
    display: none !important;
}
#wpadminbar #wp-admin-bar-new-content > .ab-item .ab-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffffe0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") !important;
    font-family: inherit !important;
    vertical-align: middle;
    top: 0 !important;
}

/* Icône du raccourci Vtjcore dans la top bar — shield Lucide.
   On cible uniquement `.ab-icon::before` (notre HTML contient un `<span.ab-icon>`)
   pour éviter le doublon que produirait `.ab-item::before` natif WP. */
#wpadminbar #wp-admin-bar-vtjcore-shortcut > .ab-item .ab-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffffe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E") !important;
    font-family: inherit !important;
    vertical-align: middle;
    margin-right: 4px;
    top: 0 !important;
}

/* Icônes « Modifier le site » / « Modifier la page » — pencil.
   Le DOM varie selon les versions WP : parfois le glyph est sur `.ab-item::before`,
   parfois sur un enfant `.ab-icon::before`. On cible les deux pour couvrir tous
   les cas (au pire un double affichage qu'on n'a pas constaté ici). */
#wpadminbar #wp-admin-bar-customize > .ab-item::before,
#wpadminbar #wp-admin-bar-customize > .ab-item .ab-icon::before,
#wpadminbar #wp-admin-bar-edit > .ab-item::before,
#wpadminbar #wp-admin-bar-edit > .ab-item .ab-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffffe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") !important;
    font-family: inherit !important;
    vertical-align: middle;
    margin-right: 4px;
    top: 0 !important;
}

/* Dropdown user : radius seulement en bas (collé à la top bar en haut).
   On reste défensif et on ne touche pas au layout interne fragile. */
#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--vtjcore-radius-md);
    border-bottom-right-radius: var(--vtjcore-radius-md);
    overflow: hidden;
}

#wpadminbar #wp-admin-bar-user-info .avatar,
#wpadminbar #wp-admin-bar-my-account .ab-item img.avatar {
    border-radius: 50% !important;
}

/* =============================================================
   BACK-OFFICE — boutons, liens, focus
   ============================================================= */

.wp-core-ui .button-primary {
    background: var(--vtjcore-brand);
    border-color: var(--vtjcore-brand);
    color: #fff;
    text-shadow: none;
    box-shadow: none;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
    background: var(--vtjcore-brand-dark);
    border-color: var(--vtjcore-brand-dark);
    color: #fff;
}
.wp-core-ui .button-primary:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--vtjcore-brand);
}
.wp-core-ui .button-primary:disabled,
.wp-core-ui .button-primary.disabled {
    background: #c3c4c7 !important;
    border-color: #c3c4c7 !important;
    color: #fff !important;
}

.wrap a,
.about-wrap a {
    color: var(--vtjcore-brand);
}
.wrap a:hover,
.wrap a:focus,
.about-wrap a:hover,
.about-wrap a:focus {
    color: var(--vtjcore-accent);
}

/* =============================================================
   BACK-OFFICE — modernisation UI
   Border-radius cohérents, shadows subtiles, tables et cards aérées.
   ============================================================= */

/* Boutons : radius + padding + transitions.
   Exclu sur body.wp-customizer où WP utilise des dimensions fixes spécifiques
   pour le bouton « Publier » et son groupe — notre padding casse le layout. */
body:not(.wp-customizer) .wp-core-ui .button,
body:not(.wp-customizer) .wp-core-ui .button-primary,
body:not(.wp-customizer) .wp-core-ui .button-secondary,
body:not(.wp-customizer) .wp-core-ui .button-link {
    border-radius: var(--vtjcore-radius-sm);
    padding: 5px 14px;
    font-weight: 500;
    transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}

.wp-core-ui .button-large {
    padding: 8px 18px;
}

.wp-core-ui .button-link {
    padding: 0;
    background: transparent;
    border: 0;
}

/* Inputs / textarea / select */
.wrap input[type="text"],
.wrap input[type="email"],
.wrap input[type="url"],
.wrap input[type="password"],
.wrap input[type="number"],
.wrap input[type="search"],
.wrap input[type="tel"],
.wrap input[type="date"],
.wrap input[type="time"],
.wrap input[type="datetime-local"],
.wrap textarea,
.wrap select {
    border-radius: var(--vtjcore-radius-sm);
    border-color: var(--vtjcore-border-soft);
    padding: 6px 10px;
    transition: border-color .12s, box-shadow .12s;
}

.wrap input[type="text"]:focus,
.wrap input[type="email"]:focus,
.wrap input[type="url"]:focus,
.wrap input[type="password"]:focus,
.wrap input[type="number"]:focus,
.wrap input[type="search"]:focus,
.wrap input[type="tel"]:focus,
.wrap textarea:focus,
.wrap select:focus {
    border-color: var(--vtjcore-brand);
    box-shadow: 0 0 0 3px rgba(44, 68, 99, 0.12);
    outline: 0;
}

/* Métaboxes (cards des sidebars + dashboard) */
.postbox {
    border: 1px solid var(--vtjcore-border-soft);
    border-radius: var(--vtjcore-radius-md);
    box-shadow: var(--vtjcore-shadow-sm);
    overflow: hidden;
}

.postbox > .postbox-header {
    border-bottom: 1px solid var(--vtjcore-border-soft);
    background: #fff;
    border-radius: var(--vtjcore-radius-md) var(--vtjcore-radius-md) 0 0;
}

.postbox > .postbox-header .hndle,
.postbox .hndle {
    font-size: 14px;
    font-weight: 600;
    color: var(--vtjcore-brand);
    padding: 14px 16px;
}

.postbox .inside {
    padding: 14px 16px;
    margin: 0;
}

.postbox .inside:last-child {
    padding-bottom: 16px;
}

/* Boutons "handle" (collapse) des postbox */
.postbox .handle-actions .button-link {
    color: rgba(44, 68, 99, 0.5);
}
.postbox .handle-actions .button-link:hover,
.postbox .handle-actions .button-link:focus {
    color: var(--vtjcore-brand);
}

/* Tables (.wp-list-table = liste articles, pages, comptes, etc.).
   Exclu sur la page « Extensions installées » (body.plugins-php) où la table a un
   layout particulier qui rend mal avec le radius + shadow + overflow:hidden. */
body:not(.plugin-install-php) .wp-list-table {
    border: 1px solid var(--vtjcore-border-soft);
    border-radius: var(--vtjcore-radius-md);
    box-shadow: var(--vtjcore-shadow-sm);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #fff;
}

.wp-list-table thead th,
.wp-list-table tfoot th {
    background: #fff;
    border-bottom: 1px solid var(--vtjcore-border-line);
    font-weight: 600;
    color: var(--vtjcore-brand);
    padding: 12px 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    color: rgba(44, 68, 99, 0.7);
    
}

.wp-list-table thead th{
  border-bottom: 1px solid #c3c4c7;
}

.wp-list-table tfoot th {
    border-top: 1px solid #c3c4c7 
    border-bottom: 0;
}

.wp-list-table tbody td,
.wp-list-table tbody th {
    border-top: 1px solid var(--vtjcore-border-line);
    padding: 14px 10px;
    vertical-align: middle;
}

.wp-list-table tbody tr:first-child td,
.wp-list-table tbody tr:first-child th {
    border-top: 0;
}

.wp-list-table tbody tr {
    transition: background-color .12s;
}

.wp-list-table.striped > tbody > :nth-child(odd) {
    background: transparent;
}

.wp-list-table tbody tr:hover,
.wp-list-table tbody tr:focus-within {
    background: rgba(44, 68, 99, 0.03);
}

/* WP applique un padding `6px 0 25px` natif sur la colonne checkbox du header (spec
   0,2,1) qui crée un décalage de la border-bottom par rapport à la cellule TITRE.
   On force un padding cohérent avec une spécificité de 0,2,2 pour gagner. */
.wp-list-table thead .check-column,
.wp-list-table tfoot .check-column,
.wp-list-table tbody .check-column {
    width: 2.4em;
    padding: 12px 10px 12px 14px;
    vertical-align: middle;
}

.wp-list-table tbody .check-column {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Row actions (Modifier, Corbeille, etc.) */
.wp-list-table .row-actions {
    font-size: 12px;
    color: rgba(44, 68, 99, 0.5);
}
.wp-list-table .row-actions a {
    color: var(--vtjcore-brand);
}
.wp-list-table .row-actions .trash a,
.wp-list-table .row-actions .delete a {
    color: #d63638;
}

/* Tablenav (haut/bas de table : filtres, pagination, "Actions groupées") */
.tablenav {
    padding: 12px 0;
}
.tablenav .actions select,
.tablenav .button {
    border-radius: var(--vtjcore-radius-sm);
}
.tablenav-pages .pagination-links .button,
.tablenav-pages .pagination-links .tablenav-pages-navspan,
.tablenav-pages .pagination-links a {
    border-radius: var(--vtjcore-radius-sm);
}

/* Notices */
.notice,
div.error,
div.updated,
.wrap .notice {
    border-radius: var(--vtjcore-radius-md);
    border-left-width: 4px;
    box-shadow: var(--vtjcore-shadow-sm);
}

.notice.notice-info {
    border-left-color: var(--vtjcore-brand);
}

.notice.notice-success {
    border-left-color: #6cb37c;
}

.notice.notice-warning {
    border-left-color: var(--vtjcore-accent);
}

.notice.notice-error {
    border-left-color: #d63638;
}

/* Plugin cards (page « Ajouter une extension »).
   On ne touche pas à la marge — WP applique `margin: 0 8px 16px` natif qui assure
   l'espacement horizontal entre les cards et le bord du conteneur. */
.plugin-card {
    border: 1px solid var(--vtjcore-border-soft);
    border-radius: var(--vtjcore-radius-md);
    box-shadow: var(--vtjcore-shadow-sm);
    overflow: hidden;
}

.plugin-card .plugin-card-top {
    padding: 20px 20px 16px;
}

.plugin-card .plugin-card-bottom {
    background: var(--vtjcore-cream);
    border-top: 1px solid var(--vtjcore-border-line);
    padding: 12px 20px;
}

.plugin-card .name h3 a,
.plugin-card .name h3 {
    color: var(--vtjcore-brand);
    font-weight: 600;
}

/* Thème cards (page « Thèmes ») */
.theme-browser .theme {
    border: 1px solid var(--vtjcore-border-soft);
    border-radius: var(--vtjcore-radius-md);
    box-shadow: var(--vtjcore-shadow-sm);
    overflow: hidden;
}

.theme-browser .theme .theme-name {
    border-radius: 0 0 var(--vtjcore-radius-md) var(--vtjcore-radius-md);
}

/* Wp-filter (barre de filtres « Mises en avant / Populaires / Recommandées / Favorites » +
   champ recherche en haut de pages catalogue plugins/thèmes) */
.wp-filter {
    background: #fff;
    border: 1px solid var(--vtjcore-border-soft);
    border-radius: var(--vtjcore-radius-md);
    box-shadow: var(--vtjcore-shadow-sm);
    padding: 12px 20px;
    margin: 16px 0 20px;
}

.wp-filter .filter-links li > a {
    border-radius: 999px;
    padding: 5px 12px;
    transition: background-color .12s, color .12s;
}

.wp-filter .filter-links li > a:hover,
.wp-filter .filter-links li > a:focus,
.wp-filter .filter-links li > a.current {
    background: rgba(44, 68, 99, 0.08);
    color: var(--vtjcore-brand);
    border-bottom: 0;
}

.wp-filter .filter-links li > a.current {
    font-weight: 600;
}

.wp-filter .search-form input[type="search"],
.wp-filter input.wp-filter-search {
    border-radius: var(--vtjcore-radius-sm);
    border-color: var(--vtjcore-border-soft);
}

/* Modales (médiathèque, ThickBox, etc.) */
.media-modal {
    border-radius: var(--vtjcore-radius-lg);
    overflow: hidden;
    box-shadow: var(--vtjcore-shadow-md);
}

.media-modal-close {
    border-radius: var(--vtjcore-radius-sm);
}

#TB_window {
    border-radius: var(--vtjcore-radius-lg);
    overflow: hidden;
}

/* H1 des pages d'admin */
.wrap > h1,
.wrap > h1.wp-heading-inline {
    font-size: 22px;
    font-weight: 600;
    color: var(--vtjcore-brand);
    padding: 9px 0 4px;
}

/* Sélecteur `.wp-core-ui .wrap .page-title-action` (spécificité 0,3,0) pour battre
   les règles natives WP (0,2,0) sans recourir à `!important`. WP applique padding
   0 10px et top: -3px qui change la hauteur visuelle entre les états — on les fige
   ici. */
.wp-core-ui .wrap .page-title-action {
    display: inline-block;
    margin-left: 8px;
    padding: 0 14px;
    min-height: 32px;
    line-height: 30px;
    top: 0;
    border: 1px solid var(--vtjcore-brand);
    border-radius: var(--vtjcore-radius-sm);
    background: #fff;
    color: var(--vtjcore-brand);
    font-weight: 500;
    text-shadow: none;
    box-shadow: none;
    box-sizing: border-box;
    transition: background-color .12s, color .12s;
}
.wp-core-ui .wrap .page-title-action:hover,
.wp-core-ui .wrap .page-title-action:focus,
.wp-core-ui .wrap .page-title-action:active {
    background: var(--vtjcore-brand);
    color: #fff;
    border-color: var(--vtjcore-brand);
    padding: 0 14px;
    top: 0;
    box-shadow: none;
    outline: 0;
}

/* Filtres / onglets de la liste (All / Published / Drafts...) */
.subsubsub {
    font-size: 13px;
    margin: 12px 0;
}
.subsubsub a {
    padding: 4px 10px;
    border-radius: 999px;
    transition: background-color .12s, color .12s;
}
.subsubsub a.current,
.subsubsub a:hover,
.subsubsub a:focus {
    background: rgba(44, 68, 99, 0.08);
    color: var(--vtjcore-brand);
}
.subsubsub a.current {
    font-weight: 600;
}

/* Champ recherche en haut à droite des listes */
.search-box input[type="search"],
.wp-filter input[type="search"] {
    border-radius: var(--vtjcore-radius-sm);
    padding: 6px 10px;
}

/* Codes / pre */
.wrap code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--vtjcore-cream);
    color: var(--vtjcore-brand);
}

/* Hr séparateurs */
.wrap hr,
hr.wp-header-end {
    border-color: var(--vtjcore-border-soft);
}

/* Checkbox + radio focus */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    border-color: var(--vtjcore-brand);
    box-shadow: 0 0 0 3px rgba(44, 68, 99, 0.18);
}

input[type="checkbox"]:checked::before {
    color: var(--vtjcore-brand);
}

/* "Help tab" en haut à droite des pages */
#screen-meta,
#contextual-help-link-wrap,
#screen-options-link-wrap {
    border-color: var(--vtjcore-border-soft);
    border-radius: 0 0 var(--vtjcore-radius-sm) var(--vtjcore-radius-sm);
}

/* =============================================================
   BACK-OFFICE — état natif (focus, notices info de base)
   ============================================================= */

input:focus,
textarea:focus,
select:focus {
    border-color: var(--vtjcore-brand);
    box-shadow: 0 0 0 1px var(--vtjcore-brand);
}

.notice-info {
    border-left-color: var(--vtjcore-brand);
}

/* =============================================================
   ONGLETS WP NATIFS (.nav-tab-wrapper / .nav-tab)
   Utilisés notamment sur : Apparence > Menus, Réglages, Outils.
   ============================================================= */

.nav-tab-wrapper {
    border-bottom: 1px solid var(--vtjcore-border-soft);
    margin: 0 0 20px;
    padding: 0;
}

.nav-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 16px;
    margin: 0 4px -1px 0;
    color: var(--vtjcore-text);
    font-weight: 500;
    transition: color .12s, border-color .12s;
}

.nav-tab:hover,
.nav-tab:focus {
    background: rgba(44, 68, 99, 0.04);
    color: var(--vtjcore-brand);
    box-shadow: none;
}

.nav-tab-active,
.nav-tab-active:focus,
.nav-tab-active:focus:active,
.nav-tab-active:hover {
    background: transparent;
    border-bottom-color: var(--vtjcore-brand);
    color: var(--vtjcore-brand);
    font-weight: 600;
}

/* =============================================================
   DASHBOARD — widget « Bienvenue 23 Juin »
   ============================================================= */

#vtjcore_dashboard_welcome .inside {
    padding: 0;
    margin: 0;
}

.vtjcore-welcome {
    padding: 16px 12px 12px;
}

.vtjcore-welcome__intro {
    font-size: 14px;
    color: #2c3338;
    margin: 0 0 16px;
    line-height: 1.5;
}

.vtjcore-welcome__section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(44, 68, 99, 0.6);
    margin: 18px 0 8px;
    font-weight: 600;
}

.vtjcore-welcome__shortcuts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
}

.vtjcore-welcome__shortcut {
    margin: 0;
}

.vtjcore-welcome__shortcut a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--vtjcore-cream);
    border: 1px solid rgba(44, 68, 99, 0.1);
    border-radius: 8px;
    color: var(--vtjcore-brand);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    transition: background-color .12s, border-color .12s;
}

.vtjcore-welcome__shortcut a:hover,
.vtjcore-welcome__shortcut a:focus {
    background: #fff;
    border-color: var(--vtjcore-brand);
    color: var(--vtjcore-brand);
}

.vtjcore-welcome__shortcut .dashicons {
    color: var(--vtjcore-accent);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.vtjcore-welcome__contact {
    margin: 0;
    padding: 12px;
    background: var(--vtjcore-cream);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(44, 68, 99, 0.85);
    line-height: 1.6;
}

.vtjcore-welcome__contact a {
    color: var(--vtjcore-brand);
    font-weight: 600;
    text-decoration: none;
}

.vtjcore-welcome__contact a:hover,
.vtjcore-welcome__contact a:focus {
    color: var(--vtjcore-accent);
    text-decoration: underline;
}

.vtjcore-welcome__contact-list {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    background: var(--vtjcore-cream);
    border-radius: 8px;
    font-size: 13px;
    color: rgba(44, 68, 99, 0.85);
}

.vtjcore-welcome__contact-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    margin: 0;
}

.vtjcore-welcome__contact-list li + li {
    border-top: 1px solid rgba(44, 68, 99, 0.06);
}

.vtjcore-welcome__contact-list .dashicons {
    color: var(--vtjcore-accent);
    font-size: 16px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.vtjcore-welcome__contact-list a {
    color: var(--vtjcore-brand);
    font-weight: 600;
    text-decoration: none;
}

.vtjcore-welcome__contact-list a:hover,
.vtjcore-welcome__contact-list a:focus {
    color: var(--vtjcore-accent);
    text-decoration: underline;
}

#adminmenu li.menu-top:hover, #adminmenu li.opensub>a.menu-top, #adminmenu li>a.menu-top:focus {
    background-color: inherit;
}

#adminmenu .wp-has-current-submenu .wp-submenu, #adminmenu .wp-has-current-submenu.opensub .wp-submenu, #adminmenu .wp-submenu, #adminmenu a.wp-has-current-submenu:focus+.wp-submenu {
    background: transparent;
}