/* ============================================================ RDR Syntax Highlighter — CSS Thème adaptatif dark/light via [data-theme] sur Compatible avec le thème enfant GeneratePress RDR-IT ============================================================ */ /* ============================================================ VARIABLES — DARK (défaut) ============================================================ */ :root, [data-theme="dark"] { --rdr-sh-bg: #0d1117; --rdr-sh-bg-toolbar: #161b22; --rdr-sh-bg-gutter: #111620; --rdr-sh-border: rgba(255,255,255,0.08); --rdr-sh-text: #c9d1d9; --rdr-sh-gutter-text: #484f58; --rdr-sh-ln-color: #586069; --rdr-sh-badge-bg: rgba(46,168,255,0.15); --rdr-sh-badge-text: #58a6ff; --rdr-sh-copy-bg: rgba(22,27,34,0.9); --rdr-sh-copy-text: #8b949e; --rdr-sh-copy-hover: #c9d1d9; --rdr-sh-copy-ok: #3fb950; --rdr-sh-shadow: 0 4px 24px rgba(0,0,0,0.5); /* Tokens dark */ --rdr-sh-keyword: #ff7b72; --rdr-sh-string: #a5d6ff; --rdr-sh-comment: #8b949e; --rdr-sh-number: #79c0ff; --rdr-sh-builtin: #d2a8ff; --rdr-sh-operator: #ff7b72; --rdr-sh-variable: #ffa657; --rdr-sh-function: #d2a8ff; --rdr-sh-tag: #7ee787; --rdr-sh-attr: #79c0ff; --rdr-sh-property: #79c0ff; --rdr-sh-selector: #7ee787; --rdr-sh-at-rule: #ff7b72; --rdr-sh-color-tok: #79c0ff; --rdr-sh-key: #7ee787; --rdr-sh-anchor: #ffa657; --rdr-sh-decorator: #d2a8ff; --rdr-sh-cmdlet: #79c0ff; --rdr-sh-flag: #ffa657; --rdr-sh-doctype: #8b949e; --rdr-sh-entity: #79c0ff; --rdr-sh-punct: #c9d1d9; /* Switch */ --rdr-sh-sw-bg: rgba(22,27,34,0.95); --rdr-sh-sw-border: rgba(255,255,255,0.1); --rdr-sh-sw-text: #8b949e; --rdr-sh-sw-track-off: #30363d; --rdr-sh-sw-track-on: #2ea8ff; --rdr-sh-sw-knob: #ffffff; } [data-theme="light"] { --rdr-sh-bg: #f8fafc; --rdr-sh-bg-toolbar: #f1f5f9; --rdr-sh-bg-gutter: #edf2f7; --rdr-sh-border: rgba(0,0,0,0.1); --rdr-sh-text: #24292f; --rdr-sh-gutter-text: #a0aec0; --rdr-sh-ln-color: #a0aec0; --rdr-sh-badge-bg: rgba(30,115,190,0.1); --rdr-sh-badge-text: #1e73be; --rdr-sh-copy-bg: rgba(241,245,249,0.95); --rdr-sh-copy-text: #64748b; --rdr-sh-copy-hover: #1e293b; --rdr-sh-copy-ok: #16a34a; --rdr-sh-shadow: 0 2px 12px rgba(0,0,0,0.1); /* Tokens light */ --rdr-sh-keyword: #cf222e; --rdr-sh-string: #0a3069; --rdr-sh-comment: #6e7781; --rdr-sh-number: #0550ae; --rdr-sh-builtin: #8250df; --rdr-sh-operator: #cf222e; --rdr-sh-variable: #953800; --rdr-sh-function: #8250df; --rdr-sh-tag: #116329; --rdr-sh-attr: #0550ae; --rdr-sh-property: #0550ae; --rdr-sh-selector: #116329; --rdr-sh-at-rule: #cf222e; --rdr-sh-color-tok: #0550ae; --rdr-sh-key: #116329; --rdr-sh-anchor: #953800; --rdr-sh-decorator: #8250df; --rdr-sh-cmdlet: #0550ae; --rdr-sh-flag: #953800; --rdr-sh-doctype: #6e7781; --rdr-sh-entity: #0550ae; --rdr-sh-punct: #24292f; /* Switch */ --rdr-sh-sw-bg: rgba(255,255,255,0.95); --rdr-sh-sw-border: rgba(0,0,0,0.12); --rdr-sh-sw-text: #64748b; --rdr-sh-sw-track-off: #cbd5e1; --rdr-sh-sw-track-on: #1e73be; --rdr-sh-sw-knob: #ffffff; } /* ============================================================ BLOC COLORISÉ ============================================================ */ .rdr-sh-block { background: var(--rdr-sh-bg); border: 1px solid var(--rdr-sh-border); border-radius: 10px; margin: 1.5em 0; overflow: hidden; font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; font-size: 13px; line-height: 1.65; box-shadow: var(--rdr-sh-shadow); position: relative; transition: box-shadow 0.2s ease; } /* ============================================================ TOOLBAR (badge + bouton copier) ============================================================ */ .rdr-sh-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--rdr-sh-bg-toolbar); border-bottom: 1px solid var(--rdr-sh-border); min-height: 36px; } .rdr-sh-lang-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; background: var(--rdr-sh-badge-bg); color: var(--rdr-sh-badge-text); font-family: 'DM Sans', sans-serif; } /* ============================================================ BOUTON COPIER ============================================================ */ .rdr-sh-copy-btn { display: flex; align-items: center; gap: 5px; background: var(--rdr-sh-copy-bg); border: 1px solid var(--rdr-sh-border); border-radius: 6px; color: var(--rdr-sh-copy-text); font-size: 11px; font-family: 'DM Sans', sans-serif; padding: 4px 10px; cursor: pointer; transition: all 0.18s ease; backdrop-filter: blur(4px); white-space: nowrap; } .rdr-sh-copy-btn:hover { color: var(--rdr-sh-copy-hover); border-color: var(--rdr-sh-badge-text); } .rdr-sh-copy-btn--copied { color: var(--rdr-sh-copy-ok) !important; border-color: var(--rdr-sh-copy-ok) !important; } .rdr-sh-copy-btn svg { flex-shrink: 0; } /* ============================================================ INNER : gutter + code ============================================================ */ .rdr-sh-inner { display: flex; overflow-x: auto; overflow-y: hidden; } /* Numéros de ligne */ .rdr-sh-gutter { display: flex; flex-direction: column; align-items: flex-end; padding: 14px 12px 14px 16px; background: var(--rdr-sh-bg-gutter); border-right: 1px solid var(--rdr-sh-border); color: var(--rdr-sh-gutter-text); font-size: 12px; line-height: 1.65; user-select: none; min-width: 40px; flex-shrink: 0; } .rdr-sh-gutter span { display: block; line-height: 1.65; } /* Zone de code */ .rdr-sh-code { flex: 1; overflow-x: auto; padding: 14px 18px; min-width: 0; } .rdr-sh-code pre, .rdr-sh-code pre code { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; font-family: inherit !important; font-size: inherit !important; line-height: 1.65 !important; color: var(--rdr-sh-text) !important; white-space: pre !important; tab-size: 4; } /* ============================================================ TOKENS — correspondance avec les types du highlighter ============================================================ */ .rdr-t-keyword { color: var(--rdr-sh-keyword); font-weight: 500; } .rdr-t-string { color: var(--rdr-sh-string); } .rdr-t-comment { color: var(--rdr-sh-comment); font-style: italic; } .rdr-t-number { color: var(--rdr-sh-number); } .rdr-t-builtin { color: var(--rdr-sh-builtin); } .rdr-t-operator { color: var(--rdr-sh-operator); } .rdr-t-variable { color: var(--rdr-sh-variable); } .rdr-t-function { color: var(--rdr-sh-function); } .rdr-t-tag { color: var(--rdr-sh-tag); } .rdr-t-attr-name { color: var(--rdr-sh-attr); } .rdr-t-property { color: var(--rdr-sh-property); } .rdr-t-selector { color: var(--rdr-sh-selector); } .rdr-t-at-rule { color: var(--rdr-sh-at-rule); } .rdr-t-color { color: var(--rdr-sh-color-tok); } .rdr-t-key { color: var(--rdr-sh-key); font-weight: 500; } .rdr-t-anchor { color: var(--rdr-sh-anchor); } .rdr-t-directive { color: var(--rdr-sh-comment); } .rdr-t-decorator { color: var(--rdr-sh-decorator); } .rdr-t-cmdlet { color: var(--rdr-sh-cmdlet); } .rdr-t-flag { color: var(--rdr-sh-flag); } .rdr-t-doctype { color: var(--rdr-sh-doctype); font-style: italic; } .rdr-t-entity { color: var(--rdr-sh-entity); } .rdr-t-punct { color: var(--rdr-sh-punct); } .rdr-t-plain { color: var(--rdr-sh-text); } /* ============================================================ LOADER (3 points animés) ============================================================ */ .rdr-sh-loader { position: absolute; bottom: 10px; right: 14px; display: flex; gap: 4px; align-items: center; } .rdr-sh-loader span { width: 6px; height: 6px; border-radius: 50%; background: var(--rdr-sh-badge-text); opacity: 0.4; animation: rdrShPulse 1.2s ease-in-out infinite; } .rdr-sh-loader span:nth-child(2) { animation-delay: 0.2s; } .rdr-sh-loader span:nth-child(3) { animation-delay: 0.4s; } @keyframes rdrShPulse { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } /* ============================================================ SWITCH UI — FLOTTANT ============================================================ */ /* Position flottante : droite ou gauche. Le JS calcule dynamiquement bottom en fonction du bouton back-to-top. Mobile < 768px : masqué via media query + JS. */ #rdr-sh-switch.rdr-sh-switch--floating { /* position/bottom/right/z-index gérés par window.rdrFloatingStack */ display: flex; align-items: center; gap: 10px; background: var(--rdr-sh-sw-bg); border: 1px solid var(--rdr-sh-sw-border); border-radius: 40px; padding: 8px 14px 8px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); backdrop-filter: blur(12px); cursor: default; user-select: none; transition: box-shadow 0.2s ease, bottom 0.3s ease; font-family: 'DM Sans', sans-serif; } #rdr-sh-switch.rdr-sh-switch--floating:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.3); } .rdr-sh-switch__label { font-size: 12px; font-weight: 500; color: var(--rdr-sh-sw-text); white-space: nowrap; } /* Track du switch */ .rdr-sh-switch__toggle { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--rdr-sh-sw-track-off); border: none; cursor: pointer; padding: 0; transition: background 0.25s ease; flex-shrink: 0; } .rdr-sh-switch__toggle--on { background: var(--rdr-sh-sw-track-on); } /* Knob (pastille) */ .rdr-sh-switch__knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--rdr-sh-sw-knob); box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: transform 0.25s ease; } .rdr-sh-switch__toggle--on .rdr-sh-switch__knob { transform: translateX(18px); } /* Switch inline */ #rdr-sh-switch:not(.rdr-sh-switch--floating) { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 1.2em 0; font-family: 'DM Sans', sans-serif; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 640px) { .rdr-sh-block { font-size: 12px; border-radius: 6px; margin: 1em -8px; /* full-bleed sur mobile */ } .rdr-sh-gutter { padding: 12px 8px; min-width: 32px; font-size: 11px; } .rdr-sh-code { padding: 12px 12px; } .rdr-sh-toolbar { padding: 6px 10px; } #rdr-sh-switch.rdr-sh-switch--floating { bottom: 16px; right: 16px; padding: 6px 10px 6px 12px; } .rdr-sh-switch__label { display: none; /* Juste le toggle sur mobile */ } } /* ============================================================ ACCESSIBILITÉ ============================================================ */ .rdr-sh-copy-btn:focus-visible, .rdr-sh-switch__toggle:focus-visible { outline: 2px solid var(--rdr-sh-badge-text); outline-offset: 2px; } /* ============================================================ BLOCS

 NATIFS — style minimal avant colorisation
   ============================================================ */
.entry-content pre:not(.rdr-sh-block pre),
.wp-block-code:not(.rdr-sh-block .wp-block-code) {
    transition: opacity 0.3s ease;
}

/* Pendant le chargement de la colorisation */
[data-rdr-loading="true"] {
    opacity: 0.7;
}

/* ============================================================
   SWITCH POSITION "SOUS LE TITRE"
   ============================================================ */
.rdr-sh-under-title-wrap {
    margin: 0 0 14px 0;
}

#rdr-sh-switch.rdr-sh-switch--under-title {
    display:     inline-flex;
    align-items: center;
    gap:         10px;
    padding:     6px 14px 6px 12px;
    background:  var(--rdr-sh-sw-bg);
    border:      1px solid var(--rdr-sh-sw-border);
    border-radius: 20px;
    font-family: 'DM Sans', sans-serif;
    box-shadow:  0 1px 4px rgba(0,0,0,0.08);
}

#rdr-sh-switch.rdr-sh-switch--under-title .rdr-sh-switch__label {
    font-size:   12px;
    font-weight: 500;
    color:       var(--rdr-sh-sw-text);
}

/* Mobile : switch flottant masqué */
@media (max-width: 767px) {
    #rdr-sh-switch.rdr-sh-switch--floating {
        display: none !important;
    }
}

/* ============================================================
   STYLE GLOSSAIRE — switch sous le titre
   Reproduit exactement le style du toggle dark/light du thème
   RDR-IT (pastille pill 44×24, fond #374151 dark / #3b82f6 light)
   ============================================================ */

.rdr-sh-under-title-wrap {
    margin: 6px 0 14px 0;
    display: block;
}

.rdr-sh-switch--glossaire {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    /* Pas de fond ni de bordure — comme le toggle du thème dans la nav */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-family: 'DM Sans', sans-serif;
}

.rdr-sh-switch--glossaire .rdr-sh-switch__label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--rdr-text-secondary, #8b949e) !important;
    white-space: nowrap;
}

/* Bouton pill — clone exact du #rdr-theme-toggle */
.rdr-sh-glossaire-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 44px !important;
    height: 24px !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(255,255,255,0.2) !important;
    cursor: pointer !important;
    padding: 3px !important;
    position: relative !important;
    background: #374151 !important;
    transition: background 0.3s ease, border-color 0.3s ease !important;
    flex-shrink: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    overflow: visible !important;
}

/* État actif (coloration ON) */
.rdr-sh-glossaire-btn.rdr-sh-switch__toggle--on {
    background: #2ea8ff !important;
    border-color: rgba(46,168,255,0.5) !important;
}

[data-theme="light"] .rdr-sh-glossaire-btn {
    background: #cbd5e1 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

[data-theme="light"] .rdr-sh-glossaire-btn.rdr-sh-switch__toggle--on {
    background: #1e73be !important;
    border-color: rgba(30,115,190,0.5) !important;
}

/* Pastille */
.rdr-sh-glossaire-btn .rdr-sh-switch__knob {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: white !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 4px !important;
    transition: left 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

.rdr-sh-glossaire-btn.rdr-sh-switch__toggle--on .rdr-sh-switch__knob {
    left: 22px !important;
}

/* Shortcode en contexte footer/sidebar */
.rdr-sh-switch--shortcode {
    font-family: 'DM Sans', sans-serif;
}

/* ============================================================
   MASQUER le switch sur les CPT non activés (géré côté PHP,
   mais on garde la règle CSS de sécurité)
   ============================================================ */
body:not(.rdr-sh-enabled-cpt) #rdr-sh-switch.rdr-sh-switch--floating {
    display: none !important;
}