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

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

    --vtj-radius-sm:   6px;
    --vtj-radius-md:   8px;
    --vtj-radius-lg:   12px;
    --vtj-border-soft: rgba(44, 68, 99, 0.10);
    --vtj-border-line: rgba(44, 68, 99, 0.08);
    --vtj-shadow-sm:   0 1px 2px rgba(44, 68, 99, 0.05);
    --vtj-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(--vtj-cream);
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    color: var(--vtj-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(--vtj-brand);
    z-index: 0;
}

/* Aside injecté par AdminBranding::printLoginAside() */
.vtj-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;
}

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

.vtj-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);
}

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

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

.vtj-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
       `.vtj-login-aside__title` — `!important` est obligatoire pour gagner. */
    text-align: left !important;
}

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

.vtj-login-aside__caption {
    color: var(--vtj-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 */
.vtj-login-stepper {
    display: flex;
    gap: 6px;
    margin: 0 0 32px;
    justify-content: center;
}
.vtj-login-stepper__dot {
    display: block;
    width: 22px;
    height: 4px;
    border-radius: 2px;
    background: var(--vtj-cream-deep);
}
.vtj-login-stepper__dot--active {
    background: var(--vtj-accent);
}

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

.vtj-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(--vtj-brand);
}

#loginform input:focus,
#lostpasswordform input:focus,
#registerform input:focus {
    border-color: var(--vtj-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(--vtj-accent) !important;
    border-color: var(--vtj-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(--vtj-accent-dark) !important;
    border-color: var(--vtj-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(--vtj-accent);
}

/* Liens secondaires */
.login #nav,
.login #backtoblog {
    text-align: center;
    margin: 12px 0;
    font-size: 13px;
}
.login #nav a,
.login #backtoblog a {
    color: var(--vtj-brand);
    text-decoration: none;
}
.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--vtj-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. */
.vtj-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);
}
.vtj-login-footer a {
    color: var(--vtj-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(--vtj-brand) !important;
    caret-color: var(--vtj-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(--vtj-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;
    }
    .vtj-login-aside {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 220px;
        padding: 32px 28px;
    }
    .vtj-login-aside__title {
        font-size: 28px;
    }
    #login {
        margin: 0 !important;
        width: 100% !important;
        padding: 32px 24px !important;
        min-height: auto;
    }
    .vtj-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(--vtj-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 : flyout (au survol d'un item non courant) — fond foncé arrondi */
#adminmenu .wp-submenu {
    background: var(--vtj-brand-dark);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border: 0;
    margin-left: 4px;
}

#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;
}

/* Sub-menu déroulé (item parent courant) — pas de fond, juste indentation.
   On exclut uniquement `.folded` (sidebar vraiment à 36px → sub-menu en flyout).
   En `.auto-fold` on force la sidebar à 200px côté CSS, donc le sub-menu est
   visuellement déroulé et doit suivre le style indenté transparent. */
body:not(.folded) #adminmenu .wp-has-current-submenu .wp-submenu {
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 0 4px 20px;
    margin-left: 0;
}

body:not(.folded) #adminmenu .wp-has-current-submenu .wp-submenu a {
    padding: 5px 10px;
    margin: 1px 0;
}

/* Hover / actif dans le sub-menu : blanc + overlay subtil */
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06);
}

#adminmenu .wp-submenu li.current a,
#adminmenu .wp-submenu a.current {
    color: #fff !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* 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. */
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div {
    display: none !important;
}

/* =============================================================
   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(--vtj-accent);
    color: #fff;
}

/* Top bar : même brand que la sidebar pour une bande continue */
#wpadminbar {
    background: var(--vtj-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(--vtj-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;
}

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

.wp-core-ui .button-primary {
    background: var(--vtj-brand);
    border-color: var(--vtj-brand);
    color: #fff;
    text-shadow: none;
    box-shadow: none;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
    background: var(--vtj-brand-dark);
    border-color: var(--vtj-brand-dark);
    color: #fff;
}
.wp-core-ui .button-primary:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--vtj-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(--vtj-brand);
}
.wrap a:hover,
.wrap a:focus,
.about-wrap a:hover,
.about-wrap a:focus {
    color: var(--vtj-accent);
}

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

/* Boutons : radius + padding + transitions */
.wp-core-ui .button,
.wp-core-ui .button-primary,
.wp-core-ui .button-secondary,
.wp-core-ui .button-link {
    border-radius: var(--vtj-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(--vtj-radius-sm);
    border-color: var(--vtj-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(--vtj-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(--vtj-border-soft);
    border-radius: var(--vtj-radius-md);
    box-shadow: var(--vtj-shadow-sm);
    overflow: hidden;
}

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

.postbox > .postbox-header .hndle,
.postbox .hndle {
    font-size: 14px;
    font-weight: 600;
    color: var(--vtj-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(--vtj-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(--vtj-border-soft);
    border-radius: var(--vtj-radius-md);
    box-shadow: var(--vtj-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(--vtj-border-line);
    border-top: 0;
    font-weight: 600;
    color: var(--vtj-brand);
    padding: 12px 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    color: rgba(44, 68, 99, 0.7);
    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(--vtj-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(--vtj-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(--vtj-radius-sm);
}
.tablenav-pages .pagination-links .button,
.tablenav-pages .pagination-links .tablenav-pages-navspan,
.tablenav-pages .pagination-links a {
    border-radius: var(--vtj-radius-sm);
}

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

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

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

.notice.notice-warning {
    border-left-color: var(--vtj-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(--vtj-border-soft);
    border-radius: var(--vtj-radius-md);
    box-shadow: var(--vtj-shadow-sm);
    overflow: hidden;
}

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

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

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

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

.theme-browser .theme .theme-name {
    border-radius: 0 0 var(--vtj-radius-md) var(--vtj-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(--vtj-border-soft);
    border-radius: var(--vtj-radius-md);
    box-shadow: var(--vtj-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(--vtj-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(--vtj-radius-sm);
    border-color: var(--vtj-border-soft);
}

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

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

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

/* H1 des pages d'admin */
.wrap > h1,
.wrap > h1.wp-heading-inline {
    font-size: 22px;
    font-weight: 600;
    color: var(--vtj-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(--vtj-brand);
    border-radius: var(--vtj-radius-sm);
    background: #fff;
    color: var(--vtj-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(--vtj-brand);
    color: #fff;
    border-color: var(--vtj-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(--vtj-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(--vtj-radius-sm);
    padding: 6px 10px;
}

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

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

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

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

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

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

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

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

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

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

.vtj-welcome {
    padding: 16px 12px 4px;
}

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

.vtj-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;
}

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

.vtj-welcome__shortcut {
    margin: 0;
}

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

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

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

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

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

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